html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
list-style: none;
}
ol {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted #000;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
} * {
box-sizing: border-box;
}
body {
color: #333;
font-size: 16px;
font-family: 'Montserrat', 'M PLUS Rounded 1c', sans-serif;
line-height: 1.8;
letter-spacing: 3px;
background-color: #F8F7F1;
}
:root {
--font-size-10: .625rem;
--font-size-12: .75rem;
--font-size-14: .875rem;
--font-size-16: 1rem;
--font-size-18: 1.125rem;
--font-size-21: 1.3125rem;
--font-size-24: 1.5rem;
--font-size-26: 1.625rem;
--font-size-32: 2rem;
--font-size-36: 2.25rem;
--font-size-40: 2.5rem;
--font-size-48: 3rem;
--font-size-56: 3.5rem;
--font-size-64: 4rem;
--font-size-80: 5rem;
--font-size-96: 6rem;
--font-size-128: 8rem;
--font-size-180: 11.25rem;
} .sticky {
display: block;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 0 auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
text-align: center;
margin: 10px;
padding: 4px 0 0 0;
}
.wp-caption img {
margin: 0;
padding: 0;
}
.wp-caption p.wp-caption-text,
.gallery-caption {
margin: 0;
padding: 0 4px 5px;
font-size: 11px;
line-height: 1.4;
} a {
color: #111;
text-decoration: none;
}
a:hover {
color: #111;
text-decoration: underline;
transition: 0.3s ease;
}
a:hover img {
opacity: 0.7;
}   .header__wrap {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-inline: auto;
padding-block: 56px;
max-width: 1300px;
}
@media not all and (min-width: 1348px){
.header__wrap {
padding-inline: 24px;
}
}
@media not all and (min-width: 768px){
.header__wrap {
padding-block: 40px;
}
}
.header__logo {
width: 260px;
}
@media not all and (min-width: 568px){
.header__logo {
width: 220px;
}
}
.header__logo img {
display: block;
max-width: 100%;
height: auto;
}
.header__nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
font-weight: bold;
}
.header__nav-list > li:not(:last-child) {
margin-right: 40px;
}
@media not all and (min-width: 1200px){
.header__nav-list > li:not(:last-child) {
margin-right: 24px;
}
}
.header__nav-list > li {
display: inline-block;
position: relative;
}
.header__nav-list .__dropdown {
display: block;
position: relative;
}
.header__nav-list .__dropdown::after {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 3px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/dropdown-arrow.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.header__nav-list .__child {
display: none;
}
.header__nav-list > li:hover .__child {
display: block;
position: absolute;
top: 2em;
left: 0;
padding: 8px 24px;
width: 300px;
background-color: #fff;
border-radius: 10px;
}
.header__nav-list .__child li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
.header__nav-list .__child a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
width: 100%;
font-size: var(--font-size-14);
}
.header__nav-list .__child a::after {
content: '';
display: block;
width: 24px;
height: 24px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/arrow-button.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.header__nav-list .__child a:hover {
text-decoration: none;
}
.header__nav .__tel {
font-size: var(--font-size-26);
line-height: 1.4;
}
.header__nav .__tel .__heading {
display: block;
font-size: var(--font-size-12);
}
@media not all and (min-width: 1200px){
.header__nav .__tel {
font-size: var(--font-size-21);
}
}
.header__nav .__button a {
display: block;
padding: 16px 32px;
color: #333;
text-align: center;
background-color: #A3D19D;
border-radius: 30px 15px;
}
.header__nav .__button a:hover {
color: #fff;
text-decoration: none;
background-color: #4A7D49;
}
@media not all and (min-width: 1200px){
.header__nav .__button a {
padding: 12px 24px;
font-size: var(--font-size-14);
}
}
@media not all and (min-width: 1060px){
.header__nav .__link {
display: none;
}
}
@media not all and (min-width: 768px) {
.header__nav {
display: none;
}
}  .section {
padding-block: 120px 240px;
}
@media not all and (min-width: 768px) {
.section {
padding-block: 80px 140px;
}
}
.bg-image {
position: relative;
}
.bg-image::before {
content: '';
position: absolute;
top: -120px;
left: 0;
width: 100%;
height: 125px;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
.bg-image01::before {
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/bg-image01.svg);
}
.bg-image02::before {
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/bg-image02.svg);
}
.bg-image03::before {
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/bg-image03.svg);
}
@media not all and (max-width: 1400px){
.bg-image::before {
height: 220px;
}
}
@media not all and (min-width: 868px){
.bg-image::before {
top: -80px;
height: 85px;
}
}
@media not all and (min-width: 568px){
.bg-image::before {
top: -50px;
height: 55px;
}
}
@media not all and (min-width: 468px){
.bg-image::before {
top: -35px;
height: 40px;
}
}
.section__area {
margin: 0 auto;
max-width: 1300px;
}
@media not all and (min-width: 1348px) {
.section__area {
padding-inline: 24px;
}
}
.page-title {
margin-block: 80px 240px;
font-size: var(--font-size-36);
text-align: center;
}
@media not all and (min-width: 768px){
.page-title {
margin-block: 40px 140px;
font-size: var(--font-size-26);
}
}
.page-title span {
display: inline-block;
}
.page-background {
position: relative;
padding-block: 80px 240px;
background-color: #fff;
border-radius: 0 0 40px 40px;
}
@media not all and (min-width: 1380px){
.page-background {
margin-inline: 24px;
}
}
@media not all and (min-width: 768px){
.page-background {
padding-block: 40px 140px;
}
}
.page-background::before {
content: '';
position: absolute;
top: -120px;
left: 0;
width: 100%;
height: 125px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/bg-image03.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
@media not all and (min-width: 868px){
.page-background::before {
top: -80px;
height: 85px;
}
}
@media not all and (min-width: 568px){
.page-background::before {
top: -50px;
height: 55px;
}
}
@media not all and (min-width: 468px){
.page-background::before {
top: -35px;
height: 40px;
}
}
.page-contents__wide {
margin-inline: auto;
max-width: 1140px;
}
.page-contents__narrow {
margin-inline: auto;
max-width: 900px;
}
.page-contents h2 {
margin-block: 0 40px;
padding-bottom: 24px;
font-size: var(--font-size-32);
line-height: 1.4;
border-bottom: 1px solid #bbb;
}
.page-contents h3 {
margin-block: 0 24px;
font-size: var(--font-size-24);
line-height: 1.4;
}
.page-contents h4 {
margin-block: 0 24px;
font-size: var(--font-size-21);
line-height: 1.4;
}
.page-contents h5 {
margin-block: 0 24px;
font-size: var(--font-size-18);
line-height: 1.4;
}
.page-contents p + h2 {
margin-block: 80px 40px;
}
.page-contents p + h3 {
margin-block: 64px 24px;
font-size: var(--font-size-24);
line-height: 1.4;
}
.page-contents p + h4 {
margin-block: 40px 24px;
}
.page-contents p + h5 {
margin-block: 32px 24px;
}
@media not all and (min-width: 768px){
.page-contents h2 {
margin-block: 64px 32px;
padding-bottom: 16px;
font-size: var(--font-size-24);
}
.page-contents h3 {
margin-block: 48px 16px;
font-size: var(--font-size-21);
}
.page-contents p + h4 {
font-size: var(--font-size-18);
}
.page-contents p + h5 {
font-size: var(--font-size-16);
}
}
.page-contents p {
margin-bottom: 40px;
line-height: 2.2;
}
.page-contents img {
display: block;
margin: 56px auto;
max-width: 100%;
height: auto;
border-radius: 40px;
}
@media not all and (min-width: 768px){
.page-contents p {
margin-bottom: 32px;
}
.page-contents img {
margin: 40px auto;
}
}
.breadcrumb {
margin-top: 160px;
}
@media not all and (min-width: 768px){
.breadcrumb {
margin-top: 80px;
}
}
.breadcrumb ol {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.5em;
}
.breadcrumb li {
position: relative;
padding-right: 1.5em;
font-size: var(--font-size-14);
}
@media not all and (min-width: 768px){
.breadcrumb li {
font-size: var(--font-size-12);
}
}
.breadcrumb li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(45deg);
width: 4px;
height: 4px;
border-top: 2px solid #555;
border-right: 2px solid #555;
}
.consultation-time-table table {
width: 100%;
}
.consultation-time-table tr {
border-bottom: 1px solid #9D9D9D;
}
.consultation-time-table th,
.consultation-time-table td {
padding-block: 16px;
text-align: center;
}
@media not all and (min-width: 368px){
.consultation-time-table thead {
font-size: 12px;
}
}
.consultation-time-table th.__consultation-hour {
font-size: 12px;
text-align: left;
}
@media not all and (min-width: 368px){
.consultation-time-table th.__consultation-hour {
font-size: 10px;
vertical-align: middle;
}
}
.consultation-time-table td {
width: 10%;
vertical-align: middle;
}
.consultation-time-table .__mark {
color: #4A7D49;
}
.consultation-time-table .__text {
padding-block: 8px;
font-size: 10px;
font-weight: bold;
}
.consultation-time-table .__time {
display: block;
}
.consultation-time-table .__conjunction {
position: absolute;
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
white-space: nowrap;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
} .home-mv__image {
margin-bottom: 56px;
}
@media not all and (min-width: 768px){
.home-mv__image {
margin-bottom: 24px;
}
}
.home-mv__image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 120px 60px;
}
.home-mv__wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
@media not all and (min-width: 768px){
.home-mv__news {
padding: 16px;
width: 100%;
font-size: var(--font-size-12);
background-color: #fff;
border-radius: 10px;
}
}
.home-mv__news a {
display: flex;
flex-wrap: wrap;
font-size: var(--font-size-14);
font-weight: bold;
}
.home-mv__news time {
width: 120px;
letter-spacing: 1px;
}
.home-mv__news p {
width: calc(100% - 120px);
}
@media not all and (min-width: 568px){
.home-mv__news time {
width: 100%;
}
.home-mv__news p {
width: 100%;
}
}
.home-mv__consultation-time-table {
margin-top: -180px;
padding: 24px 40px 40px;
width: 560px;
background-color: #fff;
border-radius: 60px 20px;
}
@media not all and (min-width: 1080px){
.home-mv__consultation-time-table {
margin-top: -180px;
padding: 8px 24px 24px;
width: 400px;
}
}
@media not all and (min-width: 880px){
.home-mv__consultation-time-table {
display: none;
}
}
.home-section__heading {
margin-bottom: 40px;
font-size: var(--font-size-36);
}
@media not all and (min-width: 768px){
.home-section__heading {
margin-bottom: 32px;
font-size: var(--font-size-26);
}
}
@media not all and (min-width: 468px){
.home-section__heading {
font-size: var(--font-size-21);
}
}
.home-about__wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row-reverse;
margin-bottom: 160px;
}
@media not all and (min-width: 768px){
.home-about__wrap {
margin-bottom: 80px;
}
}
.home-about__image {
width: 35%;
}
.home-about__textarea {
width: 55%;
}
@media not all and (min-width: 1200px){
.home-about__image {
width: 30%;
}
.home-about__textarea {
width: 65%;
}
}
@media not all and (min-width: 768px){
.home-about__image {
margin-bottom: 40px;
width: 100%;
}
.home-about__textarea {
width: 100%;
}
}
.home-about__textarea p {
margin-bottom: 40px;
}
.home-about__nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 32px 4%;
}
.home-about__nav li {
width: 48%;
}
@media not all and (min-width: 940px){
.home-about__nav {
gap: 16px 0;
}
.home-about__nav li {
width: 100%;
}
}
.home-about__nav a {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 32px 24px;
font-weight: bold;
background-color: #fff;
border: 2px solid rgba(0 0 0 / 0);
border-radius: 40px 20px;
}
.home-about__nav a::after {
content: '';
display: block;
width: 35px;
height: 35px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/arrow-button.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.home-about__nav a:hover {
text-decoration: none;
border: 2px solid #4A7D49;
}
@media not all and (min-width: 1000px){
.home-about__nav a {
padding: 24px 16px;
}
.home-about__nav a::after {
width: 25px;
height: 25px;
}
}
.home-about__image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 120px 60px;
}
.infinite-slider .swiper-wrapper {
transition-timing-function: linear;
}
.home-about__slider-image {
margin-right: 40px;
width: auto;
height: 480px;
}
.home-about__slider-image img {
display: block;
max-width: 320px;
height: auto;
}
@media not all and (min-width: 568px){
.home-about__slider-image {
margin-right: 24px;
height: 380px;
}
.home-about__slider-image img {
max-width: 240px;
}
}
.swiper-wrapper > .home-about__slider-image:nth-child(1) img,
.swiper-wrapper > .home-about__slider-image:nth-child(6) img {
margin-top: 0px;
border-radius: 120px 60px;
}
.swiper-wrapper > .home-about__slider-image:nth-child(2) img,
.swiper-wrapper > .home-about__slider-image:nth-child(7) img {
margin-top: 80px;
border-radius: 90px 30px;
}
.swiper-wrapper > .home-about__slider-image:nth-child(3) img,
.swiper-wrapper > .home-about__slider-image:nth-child(8) img {
margin-top: 20px;
border-radius: 140px 70px;
}
.swiper-wrapper > .home-about__slider-image:nth-child(4) img,
.swiper-wrapper > .home-about__slider-image:nth-child(9) img {
margin-top: 90px;
border-radius: 100px 30px;
}
.swiper-wrapper > .home-about__slider-image:nth-child(5) img,
.swiper-wrapper > .home-about__slider-image:nth-child(10) img {
margin-top: 50px;
border-radius: 120px 60px;
}
.home-medical {
background-color: #ECE9D9;
}
.home-medical .home-section__heading {
text-align: center;
}
.home-medical__description {
margin-bottom: 80px;
text-align: center;
}
.home-medical__list {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 56px 5%;
}
.home-medical__list li {
width: 30%;
}
@media not all and (min-width: 768px){
.home-medical__list {
gap: 32px 4%;
}
.home-medical__list li {
width: 48%;
}
}
@media not all and (min-width: 468px){
.home-medical__list {
gap: 16px 0;
}
.home-medical__list li {
width: 100%;
}
}
.home-medical__list a {
display: block;
padding: 40px 24px;
text-align: center;
background-color: #fff;
border: 2px solid rgba(0 0 0 / 0);
border-radius: 120px 60px;
}
.home-medical__list a::after {
content: '';
display: block;
margin-inline: auto;
width: 35px;
height: 35px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/arrow-button.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.home-medical__list a:hover {
text-decoration: none;
border: 2px solid #4A7D49;
}
@media not all and (min-width: 1000px){
.home-medical__list a {
padding: 32px 24px;
}
}
@media not all and (min-width: 468px){
.home-medical__list a {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
text-align: left;
border-radius: 40px 20px;
}
.home-medical__list a::after {
margin-inline: 0;
width: 25px;
height: 25px;
}
}
.home-medical__list-icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px;
height: 84px;
}
@media not all and (min-width: 1000px){
.home-medical__list-icon {
margin-bottom: 16px;
}
}
@media not all and (min-width: 468px){
.home-medical__list-icon {
margin-bottom: 0;
width: 56px;
height: auto;
}
}
.home-medical__list-icon img {
display: block;
max-width: 100%;
height: auto;
}
.home-medical__list-heading {
margin-bottom: 24px;
font-size: var(--font-size-21);
}
@media not all and (min-width: 1000px){
.home-medical__list-heading {
font-size: var(--font-size-16);
}
}
@media not all and (min-width: 468px){
.home-medical__list-heading {
margin-bottom: 0;
width: calc(100% - 127px);
}
}
.home-policy__wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.home-policy__image {
width: 42%;
}
.home-policy__textarea {
width: 52%;
}
@media not all and (min-width: 768px){
.home-policy__image {
display: none;
}
.home-policy__textarea {
width: 100%;
}
}
.home-policy__image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 120px 60px;
}
.home-policy__description {
margin-bottom: 56px;
}
.home-policy__list {
counter-reset: homePolicyList;
}
.home-policy__list li {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
font-weight: bold;
}
.home-policy__list li::before {
counter-increment: homePolicyList;
content: counter(homePolicyList, decimal-leading-zero) '.';
display: flex;
justify-content: center;
align-items: center;
width: 60px;
color: #4A7D49;
font-size: var(--font-size-14);
letter-spacing: 1px;
border-bottom: 1px solid #4A7D49;
}
@media not all and (min-width: 468px){
.home-policy__list li::before {
width: 32px;
font-size: var(--font-size-10);
}
}
.home-policy__list a {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: relative;
padding: 24px 80px 24px 24px;
width: calc(100% - 60px);
line-height: 1.4;
border-bottom: 1px solid #d0d0d0;
}
@media not all and (min-width: 468px){
.home-policy__list a {
padding: 16px 56px 16px 16px;
width: calc(100% - 32px);
}
}
.home-policy__list a::after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
width: 35px;
height: 35px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/arrow-button.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
@media not all and (min-width: 468px){
.home-policy__list a::after {
right: 16px;
width: 25px;
height: 25px;
}
}
.home-policy__list a:hover {
text-decoration: none;
border-bottom: 1px solid #4A7D49;
}
.home-news {
background-color: #fff;
}
.home-news__wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.home-news__textarea {
width: 30%;
}
.home-news__list {
width: 60%;
}
@media not all and (min-width: 768px){
.home-news__textarea {
width: 100%;
}
.home-news__list {
width: 100%;
}
}
@media not all and (min-width: 768px){
.home-news__description {
margin-bottom: 40px;
}
}
@media not all and (min-width: 768px){
.news__list {
margin-bottom: 40px;
}
}
.news__list a {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 24px 32px;
border-bottom: 1px solid #D0D0D0;
}
@media not all and (min-width: 768px){
.news__list a {
padding: 24px 0;
}
}
.news__list a:hover {
text-decoration: none;
border-bottom: 1px solid #4A7D49;
}
.news__list time {
width: 150px;
letter-spacing: 1px;
}
.news__list p {
width: calc(100% - 150px);
font-weight: bold;
}
@media not all and (min-width: 768px){
.news__list time {
width: 100%;
font-size: var(--font-size-14);
}
.news__list p {
width: 100%;
}
}
.home-news__text-button a {
display: flex;
align-items: center;
font-size: var(--font-size-18);
font-weight: bold;
}
.home-news__text-button a::after {
content: '';
display: inline-block;
margin-left: 24px;
width: 35px;
height: 35px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/arrow-button.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
} .feature-about {
margin-bottom: 160px;
}
@media not all and (min-width: 768px){
.feature-about {
margin-bottom: 80px;
}
}
.feature__heading {
margin-bottom: 80px;
font-size: var(--font-size-32);
text-align: center;
}
@media not all and (min-width: 768px){
.feature__heading {
margin-bottom: 40px;
font-size: var(--font-size-26);
}
}
.feature-about__section {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.feature-about__section:not(:last-child) {
margin-bottom: 80px;
}
@media not all and (min-width: 768px){
.feature-about__section:not(:last-child) {
margin-bottom: 64px;
}
}
.feature-about__textarea {
padding-top: 32px;
width: 58%;
}
.feature-about__image {
width: 35%;
}
@media not all and (min-width: 768px){
.feature-about__textarea {
margin-bottom: 32px;
padding-top: 0;
width: 100%;
}
.feature-about__image {
width: 100%;
}
}
.feature-about__sub-heading {
margin-bottom: 32px;
font-size: var(--font-size-26);
}
@media not all and (min-width: 768px){
.feature-about__sub-heading {
margin-bottom: 24px;
font-size: var(--font-size-21);
}
}
.feature-about__description p:not(:last-child) {
margin-bottom: 40px;
}
@media not all and (min-width: 768px){
.feature-about__description p:not(:last-child) {
margin-bottom: 32px;
}
}
.feature-about__image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 120px 60px;
}
.feature-policy__section {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.feature-policy__textarea {
width: 58%;
}
.feature-policy__image {
width: 35%;
}
@media not all and (min-width: 768px){
.feature-policy__textarea {
margin-bottom: 40px;
width: 100%;
}
.feature-policy__image {
width: 100%;
}
}
.feature-policy__description p:not(:last-child) {
margin-bottom: 40px;
}
@media not all and (min-width: 768px){
.feature-policy__description p:not(:last-child) {
margin-bottom: 32px;
}
}
.feature-policy__image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 120px 60px;
} .staff__section {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 120px;
}
@media not all and (min-width: 768px){
.staff__section {
margin-bottom: 64px;
}
}
.staff__image {
width: 35%;
}
.staff__textarea {
width: 58%;
}
@media not all and (min-width: 768px){
.staff__image {
margin-bottom: 32px;
width: 100%;
}
.staff__textarea {
width: 100%;
}
}
.staff__image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 40px;
}
.staff__name {
margin-bottom: 32px;
}
.staff__name .__position {
display: block;
font-size: var(--font-size-14);
}
.staff__name .__name {
font-size: var(--font-size-32);
}
@media not all and (min-width: 768px){
.staff__name {
margin-bottom: 24px;
}
.staff__name .__position {
font-size: var(--font-size-12);
}
.staff__name .__name {
font-size: var(--font-size-26);
}
}
.staff__message {
margin-bottom: 40px;
}
.staff__message p:not(:last-child) {
margin-bottom: 32px;
}
.staff__history h3 {
margin-block: 40px 16px;
font-size: var(--font-size-24);
}
@media not all and (min-width: 768px){
.staff__message {
margin-bottom: 32px;
}
.staff__message p:not(:last-child) {
margin-bottom: 24px;
}
.staff__history h3 {
margin-bottom: 32px 8px;
font-size: var(--font-size-21);
}
} .medical-fees__section {
margin-bottom: 160px;
}
.medical-fees__hero-image {
margin-bottom: 64px;
}
.medical-fees__hero-image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 40px;
}
.medical-fees__hero-text p:not(:last-child) {
margin-bottom: 40px;
}
.medical-fees__heading {
margin-bottom: 40px;
font-size: var(--font-size-36);
text-align: center;
}
.medical-fees__description {
margin-bottom: 64px;
}
.medical-fees__description p:not(:last-child) {
margin-bottom: 32px;
}
.medical-fees__description h3 {
margin-block: 64px 40px;
font-size: var(--font-size-32);
line-height: 1.4;
}
.medical-fees__description h4 {
margin-block: 56px 32px;
font-size: var(--font-size-26);
line-height: 1.4;
}
@media not all and (min-width: 768px){
.medical-fees__description h3 {
margin-block: 56px 32px;
font-size: var(--font-size-26);
}
.medical-fees__description h4 {
margin-block: 48px 26px;
font-size: var(--font-size-21);
}
}
.medical-fees__dl {
padding-block: 32px;
border-bottom: 1px solid #B0B0B0;
}
.medical-fees__dl dt {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.medical-fees__dl dt .__name {
display: inline-block;
margin-right: 32px;
font-size: var(--font-size-24);
font-weight: bold;
}
.medical-fees__dl dt .__price {
font-size: var(--font-size-21);
}
@media not all and (min-width: 768px){
.medical-fees__dl dt .__name {
margin-right: 24px;
font-size: var(--font-size-21);
}
.medical-fees__dl dt .__price {
font-size: var(--font-size-18);
}
}
.medical-fees__dl dd p:not(:last-child) {
margin-bottom: 32px;
} .health-management__hero {
margin-inline: auto;
margin-bottom: 64px;
max-width: 900px;
}
@media not all and (min-width: 768px){
.health-management__hero {
margin-bottom: 40px;
}
}
.health-management__archive {
display: flex;
flex-wrap: wrap;
gap: 64px 0;
}
.health-management__item {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 32px;
width: 100%;
background-color: #F8F7F1;
border-radius: 40px;
}
@media not all and (min-width: 940px){
.health-management__item {
padding: 32px;
}
}
@media not all and (min-width: 768px){
.health-management__archive {
gap: 40px 0;
}
.health-management__item {
padding: 32px 24px;
}
}
.health-management__image {
width: 400px;
}
.health-management__contents {
width: calc(100% - 440px);
}
@media not all and (min-width: 940px){
.health-management__image {
width: 240px;
}
.health-management__contents {
width: calc(100% - 272px);
}
}
@media not all and (min-width: 768px){
.health-management__image {
margin-bottom: 24px;
width: 100%;
}
.health-management__contents {
width: 100%;
}
}
.health-management__image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 30px;
}
.health-management__heading {
margin-bottom: 24px;
font-size: var(--font-size-21);
} .treatment-details__section {
margin-bottom: 160px;
}
@media not all and (min-width: 768px){
.whitening__section {
margin-bottom: 80px;
}
} .whitening__section {
margin-bottom: 160px;
}
@media not all and (min-width: 768px){
.whitening__section {
margin-bottom: 80px;
}
}
.whitening__section dl {
display: flex;
flex-wrap: wrap;
margin-bottom: 16px;
}
.whitening__section dt {
margin-right: 40px;
width: fit-content;
font-weight: bold;
}
.whitening__section dd {
width: fit-content;
} .news__article {
margin-bottom: 160px;
}
.news__article time {
margin-bottom: 16px;
font-size: var(--font-size-14);
}
.news__article h2 {
margin-bottom: 40px;
font-size: var(--font-size-26);
}
.news__article p {
margin-bottom: 40px;
line-height: 2.2;
}
@media not all and (min-width: 768px){
.news__article p {
margin-bottom: 32px;
}
}
.news-single__more-button a {
display: flex;
justify-content: center;
align-items: center;
}
.news-single__more-button a::after {
content: '';
display: inline-block;
margin-left: 24px;
width: 35px;
height: 35px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/arrow-button.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
} .provisional-reservation__wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.provisional-reservation__textarea {
margin-bottom: 40px;
width: 35%;
}
.provisional-reservation__form {
width: 55%;
}
@media not all and (min-width: 768px){
.provisional-reservation__textarea {
width: 100%;
}
.provisional-reservation__form {
width: 100%;
}
}
.provisional-reservation__textarea p:not(:last-child) {
margin-bottom: 40px;
}
@media not all and (min-width: 768px){
.provisional-reservation__textarea p:not(:last-child) {
margin-bottom: 32px;
}
}
.provisional-reservation__tel {
margin-bottom: 40px;
padding: 24px;
line-height: 1.4;
background-color: #fff;
border: 3px solid #DAD6C2;
border-radius: 10px;
}
.provisional-reservation__tel dt {
margin-right: 32px;
font-size: var(--font-size-14);
}
.provisional-reservation__tel dd {
font-size: var(--font-size-26);
font-weight: bold;
}
@media not all and (min-width: 768px){
.provisional-reservation__tel {
margin-bottom: 32px;
}
.provisional-reservation__tel dt {
margin-right: 0;
margin-bottom: 8px;
font-size: var(--font-size-12);
}
.provisional-reservation__tel dd {
font-size: var(--font-size-21);
}
}
.provisional-reservation__form {
padding: 56px 40px;
background-color: #fff;
border-radius: 20px;
}
@media not all and (min-width: 768px){
.provisional-reservation__form {
padding: 32px 24px;  }
}
.provisional-reservation__form .__form__section {
display: block;
margin-bottom: 40px;
}
.provisional-reservation__form .__label {
display: block;
margin-bottom: 16px;
font-weight: bold;
}
.provisional-reservation__form .__label .__req {
display: inline-block;
margin-left: 24px;
color: #4A7D49;
font-size: var(--font-size-14);
}
.provisional-reservation__form input[type="text"],
.provisional-reservation__form input[type="email"],
.provisional-reservation__form input[type="tel"] {
display: block;
padding: 24px;
width: 100%;
color: #333;
font-size: var(--font-size-18);
font-weight: bold;
font-family: 'Montserrat', 'M PLUS Rounded 1c', sans-serif;
background-color: #F8F7F1;
border: 2px solid #7E722A;
border-radius: 10px;
}
@media not all and (min-width: 768px){
.provisional-reservation__form input[type="text"],
.provisional-reservation__form input[type="email"],
.provisional-reservation__form input[type="tel"] {
padding: 16px;
font-size: var(--font-size-16);
}
}
.provisional-reservation__form .wpcf7-date {
display: block;
padding: 24px;
width: 100%;
color: #333;
font-size: var(--font-size-18);
font-weight: bold;
font-family: 'Montserrat', 'M PLUS Rounded 1c', sans-serif;
background-color: #F8F7F1;
border: 2px solid #7E722A;
border-radius: 10px;
}
.provisional-reservation__form select {
display: block;
padding: 24px;
width: 100%;
color: #333;
font-size: var(--font-size-18);
font-weight: bold;
font-family: 'Montserrat', 'M PLUS Rounded 1c', sans-serif;
background-color: #F8F7F1;
border: 2px solid #7E722A;
border-radius: 10px;
}
.provisional-reservation__form .__input-wrap {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: 16px;
}
.provisional-reservation__form .__sub-label {
width: 100px;
font-weight: bold;
}
.provisional-reservation__form .__input-wrap .__input {
width: calc(100% - 100px);
}
.provisional-reservation__form textarea {
display: block;
padding: 24px;
width: 100%;
height: 360px;
color: #333;
font-size: var(--font-size-18);
font-weight: bold;
font-family: 'Montserrat', 'M PLUS Rounded 1c', sans-serif;
background-color: #F8F7F1;
border: 2px solid #7E722A;
border-radius: 10px;
}
@media not all and (min-width: 768px){
.provisional-reservation__form textarea {
padding: 16px;
height: 240px;
font-size: var(--font-size-16);
}
}
.provisional-reservation__form .wpcf7-list-item {
display: block;
margin: 0 0 8px;
}
.provisional-reservation__form .wpcf7-list-item input[type=checkbox],
.provisional-reservation__form .__check input[type=checkbox] {
position: absolute;
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
white-space: nowrap;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
.provisional-reservation__form .wpcf7-list-item-label,
.provisional-reservation__form .__check {
position: relative;
padding-left: 2em;
font-weight: bold;
line-height: 1.4;
}
.provisional-reservation__form .wpcf7-list-item-label::before,
.provisional-reservation__form .__check .__check-label::before {
content: '';
display: inline-block;
position: absolute;
top: 2px;
left: 0;
width: 16px;
height: 16px;
background-color: #fff;
border: 2px solid #658B64;
border-radius: 6px;
transition: .1s;
}
.provisional-reservation__form .wpcf7-list-item-label::after,
.provisional-reservation__form .__check .__check-label::after {
content: '';
position: absolute;
top: 8px;
left: 4px;
transform: rotate(-45deg);
width: 10px;
height: 3px;
border-bottom: 2px solid rgba(0 0 0/0);
border-left: 2px solid rgba(0 0 0/0);
transition: .3s;
}
input:focus ~ .wpcf7-list-item-label::before,
input[name="contact-check"]:focus ~ .__check-label::before {
border: 2px solid #4A7D49;
box-shadow: 0 0 4px #4A7D49;
}
input:checked ~ .wpcf7-list-item-label::before,
input[name="contact-check"]:checked ~ .__check-label::before {
background-color: #4A7D49;
border: 2px solid #4A7D49;
}
.wpcf7-list-item-label::after,
.__check-label::after {
content: '';
position: absolute;
top: 6px;
left: 4px;
transform: rotate(-45deg);
width: 10px;
height: 3px;
border-bottom: 2px solid rgba(0 0 0 / 0);
border-left: 2px solid rgba(0 0 0 / 0);
transition: .3s;
}
input:checked ~ .wpcf7-list-item-label::after,
input[name="contact-check"]:checked ~ .__check-label::after {
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
}
.provisional-reservation__form .__check .__check-label a {
text-decoration: underline;
}
.provisional-reservation__form .__check .__check-label a:hover {
text-decoration: none;
}
.provisional-reservation__form .__submit input {
display: block;
padding: 24px;
width: 100%;
color: #fff;
font-size: var(--font-size-18);
font-weight: bold;
font-family: 'Montserrat', 'M PLUS Rounded 1c', sans-serif;
text-align: center;
background-color: #333;
border: 0;
border-radius: 10px;
}
.provisional-reservation__form .__submit input:hover {
background-color: #000;
} .provisional-reservation-complete__textarea {
margin-bottom: 80px;
}
.provisional-reservation-complete__textarea p:not(:last-child) {
margin-bottom: 40px;
}
@media not all and (min-width: 768px){
.provisional-reservation-complete__textarea {
margin-bottom: 40px;
}
.provisional-reservation-complete__textarea p:not(:last-child) {
margin-bottom: 32px;
}
}
.provisional-reservation-complete__tel {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 40px;
padding: 32px;
background-color: #fff;
border: 3px solid #DAD6C2;
border-radius: 20px;
}
.provisional-reservation-complete__tel dt {
margin-right: 32px;
font-size: var(--font-size-14);
}
.provisional-reservation-complete__tel dd {
font-size: var(--font-size-26);
font-weight: bold;
}
@media not all and (min-width: 768px){
.provisional-reservation-complete__tel {
flex-direction: column;
margin-bottom: 32px;
padding: 32px 24px;
border-radius: 10px;
}
.provisional-reservation-complete__tel dt {
margin-right: 0;
margin-bottom: 8px;
font-size: var(--font-size-12);
}
.provisional-reservation-complete__tel dd {
font-size: var(--font-size-21);
}
}
.provisional-reservation-complete__more-button {
margin-top: 80px;
}
@media not all and (min-width: 768px){
.provisional-reservation-complete__more-button {
margin-top: 40px;
}
}
.provisional-reservation-complete__more-button a {
display: flex;
justify-content: center;
align-items: center;
}
.provisional-reservation-complete__more-button a::after {
content: '';
display: inline-block;
margin-left: 24px;
width: 35px;
height: 35px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/arrow-button.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
} .privacypolicy-contents h2 {
margin-block: 80px 24px;
font-size: var(--font-size-24);
}
@media not all and (min-width: 768px){
.privacypolicy-contents h2 {
margin-block: 40px 16px;
font-size: var(--font-size-11);
}
}
.privacypolicy-contents p {
margin-bottom: 40px;
line-height: 2.2;
}
@media not all and (min-width: 768px){
.privacypolicy-contents p {
margin-bottom: 32px;
}
} .footer__information {
padding-block: 120px 240px;
}
@media not all and (min-width: 768px){
.footer__information {
padding-block: 24px 80px;
}
}
@media not all and (min-width: 568px){
.footer__information {
padding-block: 64px 40px;
}
}
@media not all and (min-width: 468px){
.footer__information {
padding-block: 64px 32px;
}
}
.footer__information-wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-weight: bold;
}
.footer__information-textarea {
width: 40%;
font-size: 14px;
}
.footer__information-map {
width: 50%;
aspect-ratio: 16/9;
}
@media not all and (min-width: 768px){
.footer__information-textarea {
margin-bottom: 64px;
width: 100%;
}
.footer__information-map {
width: 100%;
}
}
.footer__information-logo {
margin-bottom: 32px;
width: 300px;
}
.footer__information-logo img {
display: block;
max-width: 100%;
height: auto;
}
@media not all and (min-width: 768px){
.footer__information-logo {
width: 240px;
}
}
.footer__meta {
margin-bottom: 32px;
}
.footer__tel {
margin-bottom: 32px;
}
.footer__tel span {
display: block;
font-size: var(--font-size-26);
letter-spacing: 3px;
}
.footer__provisional-reservation {
margin-bottom: 32px;
}
.footer__provisional-reservation a {
display: flex;
align-items: center;
font-weight: bold;
}
.footer__provisional-reservation a::after {
content: '';
display: inline-block;
margin-left: 24px;
width: 35px;
height: 35px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/arrow-button.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.footer__information-map iframe {
width: 100%;
height: 100%;
}
.footer__nav {
padding-block: 120px 200px;
background-color: #fff;
}
@media not all and (min-width: 768px){
.footer__nav {
display: none;
}
}
.footer__nav-wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: var(--font-size-14);
font-weight: bold;
}
.footer__nav-primary {
width: 325px;
}
.footer__nav-secondary {
width: 325px;
}
.footer__nav-tertiary {
width: calc(100% - 650px);
}
@media not all and (min-width: 940px){
.footer__nav-primary {
width: 250px;
}
.footer__nav-secondary {
width: 250px;
}
.footer__nav-tertiary {
width: calc(100% - 500px);
}
}
.footer__nav-primary li,
.footer__nav-secondary li {
position: relative;
margin-bottom: 24px;
padding-left: 16px;
}
.footer__nav-primary li::before,
.footer__nav-secondary li::before {
content: '';
position: absolute;
top: 8px;
left: 0;
width: 5px;
height: 10px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/list-arrow.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.footer__nav-tertiary--heading {
margin-bottom: 8px;
}
.footer__nav-tertiary--list {
display: flex;
flex-wrap: wrap;
gap: 8px 32px;
}
.footer__nav-tertiary--list li {
position: relative;
padding-left: 16px;
}
.footer__nav-tertiary--list li::before {
content: '';
position: absolute;
top: 8px;
left: 0;
width: 5px;
height: 10px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/list-arrow.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.footer__nav-tertiary--list:not(:last-child) {
margin-bottom: 40px;
}
.copyright {
padding-block: 100px;
font-size: 13px;
font-weight: bold;
text-align: center;
}
@media not all and (min-width: 768px){
.copyright {
padding-block: 40px 140px;
}
}
.sp-float-menu {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 150;
}
.sp-float-menu__wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
font-weight: bold;
gap: 0 10px;
}
.sp-float-menu__tel {
width: calc(100% - 35% - 100px);
}
.sp-float-menu__provisional-reservation {
width: calc(100% - 35% - 100px);
}
.sp-float-menu__button {
width: 70px;
}
@media not all and (min-width: 678px){
.sp-float-menu__wrap {
gap: 0 5px;
}
.sp-float-menu__tel {
width: calc(100% - 35% - 70px);
}
.sp-float-menu__provisional-reservation {
width: calc(100% - 35% - 70px);
}
.sp-float-menu__button {
width: 70px;
}
}
@media not all and (min-width: 378px){
.sp-float-menu__wrap {
gap: 0 5px;
}
.sp-float-menu__tel {
width: calc(100% - 35% - 70px);
}
.sp-float-menu__provisional-reservation {
width: calc(100% - 25% - 70px);
}
.sp-float-menu__button {
width: 70px;
}
}
@media not all and (min-width: 478px){
.sp-float-menu__wrap {
padding: 16px 8px;
letter-spacing: 1px;
}
}
.sp-float-menu__tel {
font-size: var(--font-size-21);
line-height: 1.4;
}
.sp-float-menu__tel .__heading {
display: block;
font-size: var(--font-size-12);
}
@media not all and (min-width: 568px){
.sp-float-menu__tel {
font-size: var(--font-size-18);
}
}
@media not all and (min-width: 368px){
.sp-float-menu__tel {
font-size: var(--font-size-14);
}
.sp-float-menu__tel .__heading {
font-size: var(--font-size-10);
}
}
.sp-float-menu__provisional-reservation a {
display: block;
padding: 16px 32px;
color: #333;
text-align: center;
background-color: #A3D19D;
border-radius: 10px;
}
.sp-float-menu__provisional-reservation a:hover {
color: #fff;
background-color: #4A7D49;
}
@media not all and (min-width: 1200px){
.sp-float-menu__provisional-reservation a {
padding: 12px 24px;
font-size: var(--font-size-14);
}
}
@media not all and (min-width: 420px){
.sp-float-menu__provisional-reservation a {
padding: 12px 16px;
font-size: var(--font-size-12);
}
}
@media not all and (min-width: 768px) {
.sp-float-menu {
display: block;
}
}
.button-clear {
position: relative;
display: inline-block;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: transparent;
cursor: pointer;
}
.sp-float-menu__button button {
display: flex;
justify-content: center;
position: relative;
width: 100%;
height: 48px;
color: #333;
background-color: #A3D19D;
border-radius: 10px;
transition: .3s;
}
.sp-float-menu__button button:hover,
.sp-float-menu__button button:focus {
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.sp-float-menu__button .__line {
display: block;
position: relative;
width: 28px;
height: 2px;
transition: .3s;
}
.sp-float-menu__button .__line::before,
.sp-float-menu__button .__line::after {
content: '';
display: block;
position: absolute;
width: 28px;
height: 2px;
background-color: #333;
border-radius: 50vh;
transition: .3s;
}
.sp-float-menu__button .__line::before {
top: 10px;
}
.sp-float-menu__button .__line::after {
top: 18px;
}
.sp-float-menu__button button[aria-expanded="true"] .__line::before,
.sp-float-menu__button button[aria-expanded="true"] .__line::after {
top: 16px;
background-color: #111;
}
.sp-float-menu__button button[aria-expanded="true"] .__line::before {
transform: rotate(30deg);
}
.sp-float-menu__button button[aria-expanded="true"] .__line::after {
transform: rotate(-30deg);
}
.sp-float-menu__button .__text {
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
font-size: var(--font-size-12);
font-weight: bold;
text-transform: uppercase;
}
@media not all and (min-width: 368px){
.sp-float-menu__button .__text {
font-size: var(--font-size-10);
}
}
.sp-float-menu__button .__non {
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
margin: -1px;
}
.sp-nav {
position: fixed;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #DAD6C2;
z-index: 10;
-webkit-overflow-scrolling: touch;
touch-action: none;
visibility: hidden;
transition: .3s;
overflow-y: scroll;
}
.is-drawerActive .sp-nav {
visibility: visible;
}
.no-scroll {
overflow: hidden;
touch-action: none;
}
.sp-nav__contents {
padding: 40px 24px;
font-weight: bold;
overflow-y: scroll;
}
.sp-nav__logo {
margin-bottom: 56px;
width: 168px;
}
.sp-nav__logo img {
display: block;
max-width: 100%;
height: auto;
}
.sp-nav__heading {
margin-bottom: 8px;
}
.sp-nav__list {
display: flex;
flex-wrap: wrap;
gap: 8px 32px;
margin-bottom: 40px;
}
.sp-nav__list li {
position: relative;
padding-left: 16px;
}
.sp-nav__list li::before {
content: '';
position: absolute;
top: 8px;
left: 0;
width: 5px;
height: 10px;
background-image: url(https://yotsuba-dc.com/wp/wp-content/themes/yotsuba/assets/images/common/list-arrow.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.sp-nav__list li a:hover {
opacity: 0.5;
text-decoration: none;
}
.sp-nav__information {
padding: 0 24px 150px;
}
.sp-nav__information .consultation-time-table {
margin-bottom: 40px;
}
.sp-nav__map {
margin-bottom: 40px;
aspect-ratio: 16/9;
}
.sp-nav__map iframe {
width: 100%;
height: 100%;
}
.sp-nav__address {
font-size: var(--font-size-14);
font-weight: bold;
}