:root {
--color-main: #0F8BA1;
--color-main02: #003953;
--color-grad: linear-gradient(to right, #ECBE02, #EC8B02); --color-wh: #FFFFFF;
--color-dark: #A2A2A2;
--color-grad-gray: linear-gradient(to right, #E9EEF4, #F8FBFF);
--color-signature: #D2691E;
--color-signature-alt: #FFB361;
--color-decoration: #95D2DD;
--color-bg-gray: #F5F5F5;
--color-bg-blue: #EFFAFC;
--color-bg-menu: #F8F9FB;
--color-shadow: rgba(2, 72, 85, 0.1);
--color-main-light: #72C6D5;
--color-icon-start: #1BA2BA;
--color-icon-end: #89C9D5;
--color-grad-icon: linear-gradient(to left, #1BA2BA, #89C9D5);
--color-button-shadow: rgba(0, 0, 0, 0.15);
--color-grad-orange: linear-gradient(99.02deg, #DEA600 0.38%, #EA7500 100%);
--color-orange: #EA7500;
--font-sans: 'Noto Sans JP', sans-serif;
--font-serif: 'Noto Serif JP', serif;
--leading-trim: calc((1rem - 1lh) / 2);
}
body {
position: relative; }
.mgb-res8060 {
margin-bottom: 5rem;
@media (768px > width) {
margin-bottom: 3.75rem;
}
}
.img-sp-full {
@media (768px > width) {
width: 100vw;
margin: 0 calc(50% - 50vw);
}
}
.c-logo {
text-align: center;
& .c-logo__text {
color: var(--color-main);
@media (768px > width) {
font-size: 1.125rem;
}
}
.custom-logo-link {
display: block;
text-align: left;
margin-bottom: 1rem;
@media (768px > width) {
text-align: center;
}
img {
max-width: 270px;
vertical-align: middle;
}
}
}
.breadcrumb {
text-align: right;
width: 100%;
@media (768px > width) {
margin-top: 1.625rem;
}
#breadcrumbs {
display: flex;
justify-content: right;
align-items: center;
}
a, span {
font-size: .875rem;
color: var(--color-wh);
@media (768px > width) {
font-size: .75rem;
}
}
.breadcrumb_last {
color: var(--color-wh);
}
}
.l-pageHeader {
position: relative;
margin-top: 5rem;
padding: 6rem 0 9.375rem;
@media (768px > width) {
margin-top: 3.75rem;
padding: 3.125rem 0 7.125rem;
}
& .l-pageHeader__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
& .l-pageHeader__bgImage {
width: 100%;
height: 100%;
object-fit: fill;
}
& .l-pageHeader__title {
margin: 0 0 1.75rem;
font-size: 2.5rem;
font-weight: 700;
font-family: var(--font-serif);
color: var(--color-wh);
@media (768px > width) {
font-size: 1.5rem;
}
&::before {
content: attr(data-en);
display: block;
font-size: .875rem;
font-weight: 400;
color: var(--color-wh);
}
+ p {
color: var(--color-wh);
}
}
}
.error-404 {
text-align: center;
padding-bottom: 5rem;
& .c-button {
margin: 2rem auto;
}
}
.l-inner {
box-sizing: border-box;
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 1.25rem;
}
.l-inner--content {
box-sizing: border-box;
width: 100%;
max-width: 1040px;
margin: 0 auto;
padding: 0;
}
.l-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
box-shadow: 0 4px 4px #00000040;
background: var(--color-wh);
& .l-header__inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 90px;
padding-left: calc(50/1400 * 100vw);
@media (768px > width) {
height: 60px;
}
.main-navigation {
display: flex;
align-items: center;
justify-content: right;
height: 100%;
@media (1024px > width) {
flex-direction: row-reverse;
}
#menu-item-300 {
a {
text-align: center;
width: 170px;
padding: .75rem 0;
border-radius: 1.875rem;
border: 1px solid var(--color-wh);
background: transparent;
color: var(--color-wh);
@media (1024px > width) {
color: var(--color-dark02);
}
}
}
& .l-header__contactButton {
text-align: center;
align-content: center;
width: 100px;
font-size: .875rem;
color: var(--color-wh);
background: var(--color-sub);
@media (768px > width) {
width: 60px;
font-size: .6375rem;
}
img {
display: block;
width: 30px;
margin: 0 auto .5rem;
}
&:hover {
opacity: .75;
}
}
& .l-header__contactMenu {
position: relative;
display: none;
text-align: center;
align-content: center;
width: 100px;
height: 100%;
padding: 0;
font-size: .875rem;
border: none;
border-radius: 0;
color: var(--color-wh);
background: var(--color-main);
@media (1024px > width) {
display: block;
}
@media (768px > width) {
width: 60px;
font-size: .6375rem;
}
span { display: block;
width: 30px;
height: 2px;
margin: 5px auto 0;
background: var(--color-wh);
&:first-of-type {
margin: 0 auto;
}
}
p {
margin: .625rem auto 0;
@media (768px > width) {
font-size: .7125rem;
}
}
img {
display: block;
word-break: 30px;
margin: 0 auto .5rem;
}
}
& .l-headerColumn {
padding-right: 2.375rem;
display: flex;
flex-direction: column;
justify-content: end;
gap: .625rem;
@media (1024px > width) {
display: none;
}
& .tel {
a {
position: relative;
padding: 0 1.25rem 0 2.5rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-main02);
&:hover {
opacity: .8;
}
}
&::before {
position: absolute;
content: "";
top: 50%;
left: 9%;
transform: translateY(-50%);
width: 14px;
height: 14px;
background: url(//albert-shihou.com/wp-content/themes/albert/assets/images/icon-tel-navy.png) top center / contain no-repeat;
z-index: 1;
}
}
& .daytime {
color: var(--color-main02);
font-size: .75rem;
font-weight: 500;
}
& .line {
position: relative;
margin-left: 1.5rem;
font-size: .875rem;
font-weight: 500;
@media (768px > width) {
margin-left: 0;
}
a {
width: 160px;
padding: .5rem 0;
text-align: center;
color: var(--color-wh);
background: #06C755;
span {
position: relative;
&::before {
position: absolute;
content: "";
top: 54%;
left: -1.75rem;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: url(//albert-shihou.com/wp-content/themes/albert/assets/images/line-icon.png) top center / contain no-repeat;
}
&::after {
position: absolute;
content: "";
top: 50%;
right: -1.5rem;
transform: translateY(-50%);
width: 14px;
height: 14px;
background: url(//albert-shihou.com/wp-content/themes/albert/assets/images/btn-icon-line-wh.png) top center / contain no-repeat;
}
b {
@media (768px > width) {
font-size: .75rem;
font-weight: 400;
}
}
}
}
}
& .sp-menu {
display: none;
}
}
&.toggled {
& .l-header__contactMenu {
color: var(--color-main);
background: var(--color-bg-menu);
p {
margin: 1rem auto 0;
}
span {
width: 26px;
background: var(--color-main);
&:first-of-type {
transform: rotate(45deg) translate(4px, 5px);
}
&:nth-of-type(2) {
display: none;
}
&:last-of-type {
transform: rotate(-45deg) translate(0px, -1px);
}
}
}
& .l-headerColumn {
position: fixed;
content: "";
top: 60px;
display: block;
width: 100%;
height: 100vh;
padding: 1.5rem 1.5rem 6rem;
background: var(--color-wh);
overflow-y: scroll;
& .menu-header-container, .l-headerColumn__list {
display: none;
}
& .sp-menu {
display: block;
& .c-cta__link {
margin-top: 2.5rem;
& .c-cta__button.tel {
background: var(--color-sub); }
}
& .l-headerColumn__list {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
& .tel {
a {
width: 160px;
padding: .5625rem 0;
text-align: center;
font-size: .875rem;
background: var(--color-wh);
color: var(--color-main02);
border: 1px solid var(--color-main02);
span {
display: block;
font-size: .75rem;
font-weight: 400;
color: var(--color-main02);
}
}
&:before {
left: 5%;
}
}
}
& #menu-header-sp {
li {
padding: .25rem 0;
a {
position: relative;
margin: .75rem 0 1rem;
padding: 0 0 .5rem;
border-bottom: 1px solid var(--color-dark);
font-size: 1.125rem;
font-weight: 500;
color: var(--color-main02);
span {
font-size: .875rem;
font-weight: 400;
color: var(--color-dark);
}
}
&.menu-item-has-children {
position: relative;
}
}
& .sub-menu {
background: var(--color-wh);
@media (1024px > width) {
position: static;
overflow: hidden;
list-style: none;
box-shadow: none;
}
li {
a {
margin: 0 0 .25rem;
padding: 0;
font-size: .875rem;
border-bottom: none;
}
}
}
& .open {
& .sub-menu {
margin-top: 1rem;
float: none;
transform: translateX(0);
li {
position: relative;
margin: 3px 0;
padding: 0;
border-radius: .75rem;
border-bottom: none;
background: #f5f5f5;
a {
width: 100%;
padding: .75rem 0 1rem 1rem;
color: var(--color-main);
}
}
}
}
}
}
& .menu-header-top-container,
& .menu-header-bottom-container {
display: none;
}
}
}
}
}
& .l-header__logo {
width: 400px;
@media (10240px > width) {
width: 320px;
}
@media (1024px > width) {
width: 236px;
}
& .c-logo__textEn {
@media (1024px > width) {
font-size: .625rem;
}
@media (768px > width) {
font-size: .5rem;
}
}
& .c-logo__text {
font-size: 1.375rem;
@media (1280px > width) {
font-size: 1.125rem;
}
@media (768px > width) {
font-size: .8125rem;
}
}
}
&.is-scrolled {
background: var(--color-wh);
box-shadow: 0 4px 4px #00000040;
& .logo-white {
display: none;
}
& .logo-color {
display: block !important;
}
& .main-navigation {
a {
font-weight: 700;
color: var(--color-main);
text-shadow: none;
@media (768px > width) {
padding: .875rem 0;
border-bottom: 1px solid #DEE3E3;
}
}
}
& .l-header__inner {
#menu-item-300 {
@media (768px > width) {
text-align: center;
margin-top: 3.375rem;
}
a {
text-align: center;
width: 170px;
padding: .75rem 0;
border-radius: 1.875rem;
border: none;
background: var(--color-main);
color: var(--color-wh);
@media (768px > width) {
display: inline-block;
text-align: left;
width: 294px;
padding: 1.125rem 2rem;
}
&::after {
@media (768px > width) {
position: absolute;
content: "";
top: 50%;
right: 2.375rem;
transform: translateY(-50%);
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-wh);
}
}
}
}
}
}
}
.l-footLink {
text-align: center;
padding: 6rem 0 0;
background: url(//albert-shihou.com/wp-content/themes/albert/assets/images/bg-footLink.png) no-repeat center top / cover;
@media (768px > width) {
padding: 3.25rem 0;
}
& .l-inner {
@media (768px > width) {
padding: 0 1.875rem;
}
}
& .l-footLink__title {
position: relative;
margin-bottom: 1.25rem;
font-size: 2.25rem;
font-family: var(--font-serif);
font-weight: 700;
color: var(--color-wh);
letter-spacing: .25rem;
@media (768px > width) {
font-size: 2rem;
}
&::before {
content: attr(data-en);
display: block;
font-size: .875rem;
font-weight: 400;
color: var(--color-wh);
@media (768px > width) {
font-size: .75rem;
}
}
}
& .l-footLink__text {
margin-bottom: 2.5rem;
font-weight: 500;
color: var(--color-wh);
@media (1024px > width) {
font-size: 1rem;
}
@media (768px > width) {
font-size: .9375rem;
}
}
& .l-footLink__access {
padding: 0 0 2rem;
& .l-footLink__accessList {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 1rem;
max-width: 616px;
margin: 0 auto;
@media (768px > width) {
grid-template-columns: repeat(1, 1fr);
gap: 0;
}
& .l-footLink__accessItem {
height: 100%;
align-content: center;
border-left: 1px solid var(--color-wh);
color: var(--color-wh);
@media (768px > width) {
text-align: center;
padding: 1rem 0;
border-left: none;
border-top: 1px solid var(--color-wh);
border-bottom: 1px solid var(--color-wh);
}
&:last-of-type {
border-right: 1px solid var(--color-wh);
@media (768px > width) {
border-right: none;
border-top: none;
}
}
> span {
font-size: .875rem;
}
}
}
}
& .l-footLink__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 980px;
margin: 0 auto;
padding: 4.75rem 0;
@media (768px > width) {
grid-template-columns: 1fr;
padding: 3.25rem 0 3.875rem;
}
& .l-footLink__item {
z-index: 2;
position: relative;
text-align: center;
&:not(:last-of-type) {
border-right: 2px solid var(--color-bg);
@media (768px > width) {
border-bottom: 2px solid var(--color-bg02);
}
}
&:nth-of-type(2) {
width: 360px;
}
& .l-footLink__link {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1.625rem 1.25rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-wh);
@media (1024px > width) {
font-size: 1rem;
}
@media (768px > width) {
position: relative;
flex-direction: row;
justify-content: space-between;
gap: 1.25rem;
padding: 1.625rem 0;
}
> div {
@media (768px > width) {
width: calc(100% - 100px);
}
}
p {
margin-bottom: 1.125rem;
font-size: 1.25rem;
font-weight: 700;
@media (768px > width) {
font-size: 1.125rem;
}
> span {
display: block;
font-size: .875rem;
font-weight: 500;
}
}
img {
display: block;
width: 82px;
@media (1024px > width) {
width: 72px;
}
}
p {
position: relative;
display: inline-block;
@media (768px > width) {
display: flex;
justify-content: center;
align-items: center;
gap: .9375rem;
margin-bottom: .375rem;
}
}
}
}
}
} .l-footer {
border-radius: 1.875rem;
position: relative;
margin-top: -2rem;
z-index: 999;
background: #fff;
& .l-footer__inner {
display: flex;
justify-content: space-between;
gap: clamp(1rem, 4vw, 8.125rem);
max-width: 1040px;
padding-top: 4.25rem;
padding-bottom: 5.5rem;
@media (960px > width) {
flex-direction: column;
align-items: center;
gap: 3.625rem;
padding-top: 3.5rem;
padding-bottom: 3.75rem;
}
& .custom-logo-link {
margin-bottom: 1rem;
@media (768px > width) {
text-align: center;
margin-bottom: 1.875rem;
}
}
& .l-footer__title {
color: var(--color-main);
@media (768px > width) {
text-align: center;
margin-bottom: 2.25rem;
}
}
& .l-footerTable {
margin-top: 1.25rem;
}
& .l-footer__content {
width: 100%;
max-width: 325px;
& .l-footer__contentText {
margin-bottom: 1rem;
font-size: .875rem;
font-weight: 500;
color: var(--color-main02);
}
& .l-footer__contentAddress {
font-size: .75rem;
font-weight: 500;
color: var(--color-main02);
}
}
& .l-footer__list {
display: flex;
gap: 2.125rem;
min-width: 410px;
@media (768px > width) {
flex-direction: column;
width: 100%;
min-width: auto;
}
& .menu {
display: flex;
flex-direction: column;
gap: .5rem;
max-width: 430px;
margin-left: auto;
@media (768px > width) {
flex-direction: row;
flex-wrap: wrap;
gap: 1rem clamp(1.875rem, calc(-0.1427rem + 0.3571vw), 5rem);
margin: auto;
}
li {
position: relative;
display: flex;
cursor: pointer;
@media (768px > width) {
width: calc(50% - 1rem);
}
&:hover {
a {
@media (768px < width) {
color: var(--color-sub);
}
}
}
a {
width: 100%;
font-size: .875rem;
font-weight: 500;
color: var(--color-main02);
transition: .3s ease;
@media (768px > width) {
font-size: .875rem;
}
}
}
}
& .l-footer__listItem {
> a {
display: block;
padding-left: 1.5rem;
font-size: .875rem;
font-weight: 500;
color: var(--color-main02);
&:first-of-type {
margin-bottom: .5rem;
}
span {
position: relative;
}
&.tel {
span::before {
position: absolute;
content: "";
top: 50%;
left: -1.5rem;
transform: translateY(-50%);
display: inline-block;
width: 15px;
height: 15px;
background: url(//albert-shihou.com/wp-content/themes/albert/assets/images/footer-icon-tel.png) top center / contain no-repeat;
}
}
&.mail {
span {
white-space: nowrap;
font-size: .75rem;
}
span::before {
position: absolute;
content: "";
top: 50%;
left: -1.5rem;
transform: translateY(-50%);
display: inline-block;
width: 17px;
height: 12px;
background: url(//albert-shihou.com/wp-content/themes/albert/assets/images/footer-icon-mail.png) top center / contain no-repeat;
}
}
}
& .l-footer__listTitle {
padding-bottom: .625rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--color-dark);
font-size: 1.125rem;
font-weight: 600;
color: var(--color-main02);
a {
display: inline-block;
color: var(--color-main02);
}
&::after {
content: attr(data-en);
display: inline-block;
padding-left: 1rem;
font-size: .875rem;
font-weight: 400;
color: var(--color-dark);
}
}
}
}
}
& .l-footer__copy {
width: 100vw;
margin: 0 calc(50% - 50vw);
padding: 1.25rem 0;
color: var(--color-main02);
@media (768px > width) {
padding: 1rem 0;
}
& .l-inner {
display: flex;
justify-content: space-between;
@media (768px > width) {
flex-direction: column-reverse;
align-items: center;
gap: 0.9375rem;
}
}
& .l-footer__copyLink {
display: flex;
gap: 1.25rem;
}
a, p {
align-content: center;
font-size: .75rem;
font-weight: 600;
color: var(--color-main02);
}
p {
@media (768px > width) {
font-size: .625rem;
}
}
}
}
.c-title {
font-size: 2.25rem;
font-weight: 700;
letter-spacing: .25rem;
@media (1024px > width) {
font-size: 1.875rem;
}
@media (768px > width) {
font-size: 1.5rem;
}
}
.c-title--en {
display: inline-block;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-main);
@media (768px > width) {
font-size: .875rem;
}
}
.c-button {
position: relative;
display: block;
width: 240px;
padding: .75rem 2rem;
font-size: .9375rem;
font-weight: 500;
border: 1px solid var(--color-wh);
color: var(--color-wh);
background: linear-gradient(to right, var(--color-main), var(--color-main05));
span {
position: relative;
&::before {
position: absolute;
content: "";
top: 54%;
left: -.75rem;
transform: translateY(-50%);
}
}
&.tel {
background: var(--color-main);
@media (768px < width) {
pointer-events: none;
}
span {
padding-left: 1.25rem;
&::before {
width: 16px;
height: 16px;
background: url(//albert-shihou.com/wp-content/themes/albert/assets/images/btn-icon-tel.png) top center / contain no-repeat;
}
}
&:hover {
@media (768px < width) {
opacity: 1;
}
}
}
&.mail {
background: var(--color-grad);
span {
padding-left: 1.25rem;
&::before {
width: 19px;
height: 13px;
background: url(//albert-shihou.com/wp-content/themes/albert/assets/images/btn-icon-mail.png) top center / contain no-repeat;
}
}
}
&.line {
border: 1px solid var(--color-main);
color: var(--color-main);
background: var(--color-wh);
span::before {
content: none;
}
span::after {
position: absolute;
content: "";
top: 54%;
transform: translateY(-50%);
right: -1.5rem;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: url(//albert-shihou.com/wp-content/themes/albert/assets/images/btn-icon-line.png) top center / contain no-repeat;
}
}
&:hover {
&::after {
transform: translate(9px ,-50%);
transition: .3s ease;
}
}
}
.c-button--wh {
position: relative;
display: block;
width: 230px;
padding: .8125rem 2rem;
border-radius: 5.625rem;
font-size: .9375rem;
font-weight: 400;
border: 1px solid var(--color-main);
color: var(--color-main);
background: var(--color-wh);
transition: .3s ease;
&::after {
position: absolute;
content: "";
top: 50%;
right: 1.875rem;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-main);
transition: .3s ease;
}
&:hover {
color: var(--color-wh);
background: var(--color-main);
&::after {
transform: translate(9px ,-50%);
background: var(--color-wh);
}
}
}
.c-pagination {
display: flex;
justify-content: center;
gap: 1.25rem;
text-align: center;
margin-top: 6.25rem;
@media (768px > width) {
margin-top: 3.125rem;
}
span {
display: block;
align-content: center;
width: 34px;
height: 34px;
border-radius: .25rem;
font-size: 1.25rem;
&.current {
background: var(--color-main);
color: var(--color-wh);
}
}
}
.c-caption {
text-align: left;
padding-top: .875rem;
font-size: .75rem;
font-weight: 500;
}
.u-color--wh {
color: var(--color-wh);
} .u-fw-400 {
font-weight: 400;
}
.u-mx-auto {
margin: 0 auto;
}
.u-text--center {
text-align: center;
}
.u-text-spLeft {
text-align: center;
@media (768px > width) {
text-align: left;
}
}
.u-text-spCenter {
@media (768px > width) {
margin: 0 auto;
}
}
.u-text-spCenter {
text-align: left;
@media (768px > width) {
text-align: center;
}
}
.u-pc--hidden {
display: none!important;
@media (768px > width) {
display: block!important;
}
}
.u-sp--hidden {
display: block!important;
@media (768px > width) {
display: none!important;
}
}
.center-left {
text-align: center;
@media (768px > width) {
text-align: left;
}
}
.p-cta {
position: relative;
padding: 4.6875rem 1.25rem;
border-top: 1.5px solid var(--color-dark);
@media (768px > width) {
padding: 3.75rem 0;
}
& .p-cta__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
& .p-cta__bgImage {
display: block;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover; object-position: center; }
}
& .p-cta__title {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-main02);
font-family: var(--font-serif);
letter-spacing: 0.1em;
text-align: center;
margin: 0 0 1.875rem;
line-height: 1.333;
@media (768px > width) {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
}
& .p-cta__description {
max-width: 1000px;
margin: 0 auto;
text-align: center;
p {
font-size: 1rem;
font-weight: 500;
color: var(--color-main02);
line-height: 1.75;
@media (768px > width) {
text-align: left;
font-size: 1rem;
}
&:not(:last-of-type) {
margin-bottom: 0.5rem;
}
}
}
}
.c-bg-full {
width: 100vw;
margin: 0 calc(50% - 50vw);
}
.c-ud--yellow {
background: linear-gradient(to bottom, transparent 0%, transparent 50%, #FFE797 50%, #FFE797 50.1%, #FFE797 100%);
}
.wpcf7-turnstile {
display: none;
}
.c-pagination {
display: flex;
justify-content: center;
gap: 1.25rem;
text-align: center;
margin-top: 6.25rem;
@media (768px > width) {
margin-top: 3.75rem;
}
a {
display: block;
align-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
border: 1px solid var(--color-main);
background: var(--color-wh);
color: var(--color-main);
&.current {
background: var(--color-main);
color: var(--color-wh);
}
}
span {
display: block;
align-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
&.current {
background: var(--color-main);
color: var(--color-wh);
}
}
}
.c-category__title {
padding-bottom: 2.125rem;
text-align: center;
font-size: 1.375rem;
color: var(--color-main);
}
.c-category__list {
position: relative;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: .75rem;
border-bottom: 2px solid var(--color-bg02);
&::before {
position: absolute;
content: "";
bottom: -2px;
left: 0;
width: 80px;
height: 2px;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
}
& .c-category__item {
a {
display: inline-block;
padding: .25rem .9375rem;
border: 1px solid var(--color-main);
border-radius: 1.875rem;
font-weight: 600;
background: var(--color-wh);
color: var(--color-main);
@media (768px > width) {
padding: .375rem .875rem;
}
&:hover {
background: var(--color-main);
color: var(--color-wh);
}
}
&.active {
a {
background: var(--color-main);
color: var(--color-wh);
}
}
}
}
.p-topBlog {
padding: 7rem 0;
@media (768px > width) {
padding: 3.75rem 0 7.5rem;
}
}
.p-blog {
padding: 0 0 6.75rem;
@media (768px > width) {
padding: 0 0 4.125rem;
}
.p-blog__list {
margin: 6.25rem auto 0;
@media (768px > width) {
margin: 2.5rem auto 0;
}
}
}
.p-blogCategory {
display: flex;
justify-content: center;
max-width: 1140px;
margin: 0 auto;
padding: 4rem 0;
@media (768px > width) {
flex-direction: column;
padding: 0;
}
}
.p-blogCategory, .p-post {
& .l-inner {
max-width: 780px;
}
& .wp-block-latest-posts__list {
margin-top: 1rem;
}
& .wp-block-latest-posts__post-title {
display: block;
padding: .75rem 0;
font-size: .875rem;
font-weight: 500;
color: var(--color-main02);
border-bottom: 1px solid var(--color-main02);
}
& .cat-item {
a {
display: inline-block;
padding: .25rem .9375rem;
border: 1px solid var(--color-main02);
border-radius: 1.875rem;
font-size: .875rem;
font-weight: 600;
background: var(--color-wh);
color: var(--color-main02);
@media (768px > width) {
padding: .375rem .875rem;
}
&:hover {
background: var(--color-main02);
color: var(--color-wh);
opacity: 1;
}
}
}
#secondary {
box-sizing: border-box;
width: 280px;
margin-right: 1.25rem;
@media (768px > width) {
width: 100%;
padding: 4rem 1.25rem 0;
}
h2 {
padding: .25rem .75rem .25rem 1rem;
font-size: 1.25rem;
color: var(--color-wh);
background: var(--color-main02);
@media (768px > width) {
font-size: 1.125rem;
}
}
.widget {
margin: 0 0 2.5rem;
}
}
}
.p-blog__title {
display: flex;
justify-content: space-between;
@media (768px > width) {
flex-direction: column;
gap: 1.125rem;
}
}
.p-blog__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3.75rem 2.5rem;
margin: 3.75rem auto 0;
@media (1024px > width) {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 1.5rem auto 0;
}
@media (768px > width) {
place-items: center;
}
& .p-blog__item {
overflow: hidden;
border-radius: .625rem;
box-shadow: 0 0 .625rem #00000040;
& .p-blog__link {
display: flex;
flex-direction: column;
font-size: .875rem;
transition: .4s ease;
> div {
&:first-of-type {
width: 100%;
height: 135px;
@media (768px > width) {
height: 110px;
}
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: .4s ease;
}
& .p-blog__content {
padding: 0 1rem .8125rem;
@media (768px > width) {
padding: 0 .625rem .75rem;
}
& .p-blog__subject {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
height: 75px;
margin-top: .8125rem;
font-size: 1rem;
color: var(--color-main);
@media (768px > width) {
height: 46px;
-webkit-line-clamp: 2;
font-size: .9375rem;
}
}
& .p-blog__date {
position: relative;
display: block;
margin-top: .75rem;
font-weight: 600;
color: #333;
transition: .4s ease;
&::before {
position: absolute;
content: "";
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 2px;
background: transparent;
transition: .3s ease;
}
&::after {
transition: .4s ease;
position: absolute;
content: "";
top: 50%;
right: 0;
transform: translateY(-50%);
width: 8px;
height: 16px;
background: url(//albert-shihou.com/wp-content/themes/albert/assets/images/arrow-navy.png), top center / contain no-repeat;
}
}
}
&:hover {
opacity: .8;
img {
@media (768px < width) {
transform: scale(1.05);
}
}
& .p-blog__content {
@media (768px < width) {
background: var(--color-hover02);
}
}
}
}
}
}
.p-price {
& .wp-block-flexible-table-block-table {
table {
tr {
th {
@media (768px > width) {
font-size: .84375rem
}
}
td {
@media (768px > width) {
font-size: .8125rem;
}
}
}
+ figcaption {
@media (768px > width) {
font-size: .75rem!important;
}
}
}
}
}