body {
color: #4d4d4d;
display: flex;
flex-direction: column;
font-family: "Noto Serif JP", serif;
min-height: 100vh
}
body.is-fixed {
overflow: hidden
}
main {
flex: 1
}
.kv {
aspect-ratio: 1366/748;
height: 100vh;
margin-bottom: 96px;
width: 100%
}
@media screen and (max-width:767px) {
.kv {
margin-bottom: 48px;
}
}
.kv__inner {
position: relative
}
.kv__inner,
.kv__inner .kv__carousel,
.kv__inner .kv__carousel div {
height: 100%
}
.kv__inner .kv__carousel div .slick-slide {
position: relative
}
.kv__inner .kv__carousel div .slick-slide.add-animation .kv__img {
animation: kv-slider 18s 0s forwards
}
.kv__inner .kv__carousel div .slick-slide:nth-child(2) .kv__slide .kv__textarea,
.kv__inner .kv__carousel div .slick-slide:nth-child(3) .kv__slide .kv__textarea {
bottom: 6.8376068376%;
left: 4.831625183%;
top: auto;
transform: none
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide:nth-child(2) .kv__slide .kv__textarea,
.kv__inner .kv__carousel div .slick-slide:nth-child(3) .kv__slide .kv__textarea {
bottom: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
}
.kv__inner .kv__carousel div .slick-slide .kv__slide,
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__img {
height: 100%
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__img img {
height: 100%;
object-fit: cover;
width: 100%
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea {
align-items: center;
display: flex;
flex-direction: column;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea {
width: 100%
}
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title {
margin-bottom: 19px;
text-align: center
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row {
display: block;
white-space: nowrap
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row:first-child {
font-size: 30px;
font-weight: 600;
letter-spacing: .2em;
line-height: 1.4583333333;
margin-bottom: 10px
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row:first-child {
font-size: 16px;
font-weight: 700;
letter-spacing: .1em;
margin-bottom: 30px
}
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row:nth-child(2) {
font-size: 54px;
font-weight: 500;
line-height: 1.4259259259
}
@media screen and (max-width:960px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row:nth-child(2) {
font-size: 46px
}
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row:nth-child(2) {
display: inline;
font-size: 26px;
font-weight: 700
}
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row:nth-child(2) .large {
font-size: 69px;
font-weight: 700;
line-height: 1.4347826087
}
@media screen and (max-width:960px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row:nth-child(2) .large {
font-size: 60px
}
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row:nth-child(2) .large {
font-size: 26px
}
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row:nth-child(3) {
font-size: 54px;
font-weight: 700;
line-height: 1.4259259259
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__title .row:nth-child(3) {
display: inline;
font-size: 26px
}
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__text {
font-size: 20px;
font-weight: 600;
line-height: 1.45;
margin-bottom: 28px
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__text {
font-size: 14px;
margin-bottom: 34px
}
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__list {
align-items: center;
display: flex;
justify-content: center
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__list {
flex-direction: column
}
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__list .kv__itemwrapper {
align-items: center;
display: flex
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__list .kv__item {
align-items: center;
background-image: url(//www.a-hifuka.com/wp-a-hifuka/wp-content/themes/a-derma/assets/img/top/kv-text-bg_2x.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
color: #005388;
display: flex;
font-size: 24px;
font-weight: 600;
justify-content: center;
line-height: 1.4583333333;
min-width: 256px;
padding: 19px 0
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__list .kv__item {
font-size: 14px;
min-width: 150px;
padding: 14px 0
}
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__list .kv__item--first {
margin-right: -30px
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__list .kv__item--first {
margin-right: 0
}
}
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__list .kv__item--last {
margin-left: -30px
}
@media screen and (max-width:767px) {
.kv__inner .kv__carousel div .slick-slide .kv__slide .kv__textarea .kv__list .kv__item--last {
margin-left: 0
}
}
@keyframes kv-slider {
0% {
transform: scale(1.15) translateX(-6%)
}
to {
transform: scale(1.15) translateX(5%)
}
}
.news {
margin-bottom: 112px;
padding-left: 16px;
padding-right: 16px
}
.news_top  {
margin-bottom: 40px;
line-height: 1.5;
}
.news__inner {
align-items: center;
background-image: url(//www.a-hifuka.com/wp-a-hifuka/wp-content/themes/a-derma/assets/img/common/bg.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 40px;
box-shadow: 0 3px 6px #00000029;
display: flex;
gap: 74px;
justify-content: center;
max-width: 1040px;
overflow: hidden;
padding-bottom: 61px;
padding-top: 61px
}
@media screen and (max-width:767px) {
.news__inner {
flex-direction: column;
gap: 30px
}
}
.news__inner .news__head .news__title {
margin-bottom: 61px
}
@media screen and (max-width:767px) {
.news__inner .news__head .news__title {
margin-bottom: 0
}
}
.news__inner .news__head .news__title .news-title__en {
font-size: 40px;
line-height: 1
}
@media screen and (max-width:767px) {
.news__inner .news__head .news__title .news-title__en {
font-size: 32px
}
}
.news__inner .news__contents {
max-width: 500px;
width: 100%
}
@media screen and (max-width:767px) {
.news__inner .news__contents {
max-width: none
}
}
.news__inner .news__contents .news__item:not(:last-child) {
margin-bottom: 22px
}
@media screen and (max-width:767px) {
.news__inner .news__contents .news__btn {
margin: 0 auto;
}
}
.reason {
margin-bottom: 74px
}
.reason__inner .reason__title {
font-size: 48px;
font-weight: 700;
line-height: 1.4375;
margin-bottom: 110px;
text-align: center
}
@media screen and (max-width:767px) {
.reason__inner .reason__title {
font-size: 32px;
margin-bottom: 60px
}
}
.reason__banner {
max-width: 1040px;
width: 100%;
margin: 0 auto 100px;
}
@media screen and (max-width:767px) {
.reason__banner {
margin: 0 auto 54px;
}
}
.reason__banner img {
width: 100%;
}
.reason__inner .reason__text {
font-size: 18px;
font-weight: 600;
line-height: 1.625;
text-align: center
}
@media screen and (max-width:960px) {
.reason__inner .reason__text {
font-size: 16px
}
}
.reason__inner .reason__contents {
align-items: stretch;
display: grid;
gap: 34px;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 40px
}
@media screen and (max-width:960px) {
.reason__inner .reason__contents {
gap: 20px
}
}
@media screen and (max-width:767px) {
.reason__inner .reason__contents {
gap: 50px;
grid-template-columns: 1fr
}
}
.reason__inner .reason__contents .reason__item {
align-items: center;
border: 1px solid #1895a0;
display: flex;
flex-direction: column;
padding: 36px 11px 23px;
position: relative
}
@media screen and (max-width:767px) {
.reason__inner .reason__contents .reason__item {
margin-inline: auto;
max-width: 390px;
width: 100%
}
}
.reason__inner .reason__contents .reason__item .reason-item__num {
align-items: center;
background: #fff;
color: #1895a0;
display: flex;
font-size: 34px;
font-weight: 700;
gap: 11px;
left: 50%;
position: absolute;
top: 0;
transform: translate(-50%, -50%)
}
@media screen and (max-width:960px) {
.reason__inner .reason__contents .reason__item .reason-item__num {
font-size: 28px;
gap: 6px
}
}
.reason__inner .reason__contents .reason__item .reason-item__num span img {
width: 49px
}
@media screen and (max-width:960px) {
.reason__inner .reason__contents .reason__item .reason-item__num span img {
width: 36px
}
}
.reason__inner .reason__contents .reason__item .reason-item__title {
align-items: center;
color: #1895a0;
display: flex;
font-size: 30px;
font-weight: 700;
justify-content: center;
line-height: 1.4666666667;
margin-bottom: 30px;
min-height: 132px;
text-align: center
}
@media screen and (max-width:960px) {
.reason__inner .reason__contents .reason__item .reason-item__title {
font-size: 22px;
margin-bottom: 15px;
min-height: 106px
}
}
.reason__inner .reason__contents .reason__item .reason-item__text {
font-size: 16px;
font-weight: 600;
line-height: 1.625;
text-align: center
}
@media screen and (max-width:960px) {
.reason__inner .reason__contents .reason__item .reason-item__text {
font-size: 14px
}
}
.reason__inner .reason__contents .reason__item .reason-item__text+.reason-item__text {
margin-top: 12px
}
.guide-bg {
background-image: url(//www.a-hifuka.com/wp-a-hifuka/wp-content/themes/a-derma/assets/img/common/bg.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 3px 6px #00000029;
margin-bottom: 0;
}
.guide.guide-bg.menu {
margin-bottom: 120px;
}
@media screen and (max-width:767px) {
.guide.guide-bg.menu {
margin-bottom: 60px;   
}
}
.guide.guide-middle {
box-shadow: 0 3px 6px #00000029;
margin-bottom: 0;
background-color: #FDFFE6;
}
@media screen and (max-width:767px) {
.guide {
margin-bottom: 60px;   
}
}
.guide__inner {
padding-bottom: 110px;
padding-top: 88px
}
@media screen and (max-width:767px) {
.guide__inner {
padding-bottom: 50px;
padding-top: 50px
}
}
.guide__inner .guide__title {
margin-bottom: 80px
}
@media screen and (max-width:767px) {
.guide__inner .guide__title {
margin-bottom: 40px
}
}
.guide__inner .guide__contents .guide__items {
align-items: stretch;
display: grid;
gap: 62px 35px;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 80px
}
@media screen and (max-width:960px) {
.guide__inner .guide__contents .guide__items {
gap: 30px 20px
}
}
@media screen and (max-width:767px) {
.guide__inner .guide__contents .guide__items {
grid-template-columns: 1fr 1fr
}
}
@media screen and (max-width:600px) {
.guide__inner .guide__contents .guide__items {
grid-template-columns: 1fr;
margin-bottom: 0px;
}
}
.guide__inner .guide__contents .guide__items .guide__item a {
background: #fff;
display: flex;
flex-direction: column;
height: 100%
}
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__body {
align-items: center;
display: flex;
gap: 10px;
height: 100%
}
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__body .guide-item__img {
flex-shrink: 0;
height: 100%;
max-width: 106px;
aspect-ratio: 1/1;
}
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__body .guide-item__img img {
height: 100%;
object-fit: cover;
width: 100%
}
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__body .guide-item__title {
font-size: 20px;
font-weight: 600;
line-height: 1.85
}
@media screen and (max-width:960px) {
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__body .guide-item__title {
font-size: 14px
}
}
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__footer {
background: #47c4d0;
padding: 14px 0;
position: relative;
text-align: center
}
@media screen and (max-width:767px) {
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__footer {
padding: 10px 0
}
}
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__footer .guide-item__text {
color: #fff;
font-size: 16px;
font-weight: 600
}
@media screen and (max-width:960px) {
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__footer .guide-item__text {
font-size: 14px
}
}
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__footer .guide-item__arrow {
bottom: 17px;
position: absolute;
right: 40px;
width: 32px
}
@media screen and (max-width:767px) {
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__footer .guide-item__arrow {
width: 24px
}
}
.guide__inner .guide__contents .guide__items .guide__item a .guide-item__footer .guide-item__arrow img {
height: auto;
width: 100%
}
.guide__inner .guide__contents .guide__box {
align-items: stretch;
background: #47c4d0;
display: flex;
margin: 0 auto;
max-width: 840px;
min-height: 301px;
overflow: hidden;
width: 100%
}
@media screen and (max-width:767px) {
.guide__inner .guide__contents .guide__box {
min-height: auto
}
}
.guide__inner .guide__contents .guide__box .guide-box__textarea {
align-items: center;
display: flex;
flex-direction: column;
padding-top: 27px;
width: 100%
}
@media screen and (max-width:767px) {
.guide__inner .guide__contents .guide__box .guide-box__textarea {
padding: 20px 10px
}
}
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__title {
color: #1895a0;
font-family: Noto Sans JP, sans-serif;
font-size: 24px;
font-weight: 700;
margin-bottom: 19px;
padding: 13px 0;
position: relative;
text-align: center;
width: 100%;
z-index: 1
}
@media screen and (max-width:960px) {
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__title {
font-size: 20px
}
}
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__title:before {
background: #fff;
box-shadow: 0 3px 6px #00000029;
content: "";
height: 60px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 140%;
z-index: -1
}
@media screen and (max-width:767px) {
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__title:before {
height: 50px
}
}
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__text {
color: #fff;
font-family: Noto Sans JP, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.75;
margin-bottom: 23px
}
@media screen and (max-width:960px) {
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__text {
font-size: 14px
}
}
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__note {
color: #fff;
font-family: Noto Sans JP, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 2;
margin-bottom: 23px
}
@media screen and (max-width:960px) {
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__note {
font-size: 13px
}
}
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__imgsp {
margin: 0 auto 23px;
max-width: 300px
}
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__imgsp img {
height: auto;
width: 100%
}
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__btn {
background: #f7bf03;
box-shadow: 0 3px 6px #00000029;
color: #fff;
font-family: Noto Sans JP, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
max-width: 280px;
padding: 16px 0;
text-align: center;
text-shadow: 0 2px 2px #00000029;
width: 100%
}
@media screen and (max-width:960px) {
.guide__inner .guide__contents .guide__box .guide-box__textarea .guide-box__btn {
font-size: 14px;
padding: 13px 0
}
}
.guide__inner .guide__contents .guide__box .guide-box__imgarea {
flex-shrink: 0;
max-width: 396px;
position: relative;
width: 100%;
z-index: 1
}
.guide__inner .guide__contents .guide__box .guide-box__imgarea img {
height: 100%;
object-fit: cover;
width: 100%
}
.menu {
margin-bottom: 120px
}
@media screen and (max-width:767px) {
.menu {
margin-bottom: 80px;
}
}
.menu__inner .menu__title {
margin-bottom: 62px
}
@media screen and (max-width:767px) {
.menu__inner .menu__title {
margin-bottom: 40px
}
}
.menu__inner .menu__title .menu-title__en {
font-size: 40px;
line-height: 1
}
@media screen and (max-width:767px) {
.menu__inner .menu__title .menu-title__en {
font-size: 32px
}
}
.menu__inner .menu__contents .menu__head {
border-bottom: 3px solid #47c4d0;
display: grid;
gap: 19px;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 20px;
padding-bottom: 20px
}
@media screen and (max-width:767px) {
.menu__inner .menu__contents .menu__head {
grid-template-columns: 1fr
}
}
.menu__inner .menu__contents .menu__head .menu__tab {
align-items: center;
background: #fff;
border: 1px solid #47c4d0;
cursor: pointer;
display: flex;
gap: 10px;
justify-content: center;
padding: 13px 10px;
transition: background .3s
}
@media screen and (max-width:767px) {
.menu__inner .menu__contents .menu__head .menu__tab {
padding: 10px
}
}
.menu__inner .menu__contents .menu__head .menu__tab.current {
background: #47c4d0
}
.menu__inner .menu__contents .menu__head .menu__tab.current .menu-tab__icon img:first-child {
opacity: 0
}
.menu__inner .menu__contents .menu__head .menu__tab.current .menu-tab__icon img:last-child {
opacity: 1
}
@media (min-width:47.9375em) {
.menu__inner .menu__contents .menu__head .menu__tab.current:hover {
background: #47c4d0
}
}
.menu__inner .menu__contents .menu__head .menu__tab.current .menu-tab__title {
color: #fff
}
.menu__inner .menu__contents .menu__head .menu__tab .menu-tab__icon {
flex-shrink: 0;
position: relative;
width: 40px
}
@media screen and (max-width:767px) {
.menu__inner .menu__contents .menu__head .menu__tab .menu-tab__icon {
width: 32px
}
}
.menu__inner .menu__contents .menu__head .menu__tab .menu-tab__icon img {
height: auto;
transition: opacity .3s;
width: 100%
}
.menu__inner .menu__contents .menu__head .menu__tab .menu-tab__icon img:first-child {
opacity: 1
}
.menu__inner .menu__contents .menu__head .menu__tab .menu-tab__icon img:last-child {
left: 0;
opacity: 0;
position: absolute;
top: 0
}
.menu__inner .menu__contents .menu__head .menu__tab .menu-tab__title {
color: #47c4d0;
font-family: Noto Sans JP, sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.4583333333;
transition: color .3s
}
@media screen and (max-width:960px) {
.menu__inner .menu__contents .menu__head .menu__tab .menu-tab__title {
font-size: 18px
}
}
.menu__inner .menu__contents .menu__list {
display: grid;
gap: 16px 23px;
grid-template-columns: repeat(3, 1fr);
left: 0;
margin-bottom: 140px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
transition: opacity .6s, visibility .6s;
visibility: hidden
}
@media screen and (max-width:767px) {
.menu__inner .menu__contents .menu__list {
grid-template-columns: 1fr;
margin-bottom: 60px
}
}
.menu__inner .menu__contents .menu__list.current {
opacity: 1;
pointer-events: auto;
position: relative;
visibility: visible
}
.menu__inner .menu__contents .menu__list .menu__item a {
align-content: center;
background: #fff;
border: 2px solid #47c4d0;
color: #47c4d0;
display: block;
font-family: Noto Sans JP, sans-serif;
font-size: 18px;
font-weight: 500;
height: 100%;
padding: 18px 10px;
text-align: center;
transition: background .3s, color .3s
}
@media screen and (max-width:767px) {
.menu__inner .menu__contents .menu__list .menu__item a {
background: #e9f7f9;
font-size: 14px
}
}
.menu__inner .menu__contents .menu__list .menu__item a:hover {
background: #47c4d0;
color: #fff
}
.menu__inner .menu__contents .menu__machine .menu-machine__title {
margin: 0 auto 50px
}
@media screen and (max-width:767px) {
.menu__inner .menu__contents .menu__machine .menu-machine__title {
margin: 0 auto 30px
}
}
.menu__inner .menu__contents .menu__machine .menu-machine__slider {
margin: 0;
padding-bottom: 55px;
position: relative
}
@media screen and (max-width:767px) {
.menu__inner .menu__contents .menu__machine .menu-machine__slider {
padding-bottom: 30px
}
}
.menu__inner .menu__contents .menu__machine .menu-machine__slider .slick-list .slick-track {
display: flex;
justify-content: flex-start
}
.menu__inner .menu__contents .menu__machine .menu-machine__slider .slick-list .slick-track .slick-slide:not(:last-child) {
margin-right: 20px
}
.menu__inner .menu__contents .menu__machine .menu-machine__slider .slick-list .slick-track .slick-slide div .menu-machine__item a {
aspect-ratio: 246/148;
display: inline-block;
width: 246px !important
}
@media screen and (max-width:767px) {
.menu__inner .menu__contents .menu__machine .menu-machine__slider .slick-list .slick-track .slick-slide div .menu-machine__item a {
width: 200px !important
}
}
.menu__inner .menu__contents .menu__machine .menu-machine__slider .slick-list .slick-track .slick-slide div .menu-machine__item a img {
height: 100%;
object-fit: cover;
width: 100%
}
.menu__inner .menu__contents .menu__machine .menu-machine__slider .slick-dots {
align-items: center;
bottom: 0;
display: flex;
gap: 8px;
justify-content: center;
left: 0;
position: absolute
}
.menu__inner .menu__contents .menu__machine .menu-machine__slider .slick-dots li {
background: #d5d5d5;
border-radius: 50%;
height: 16px;
margin: 0;
transition: background .3s;
width: 16px
}
@media screen and (max-width:767px) {
.menu__inner .menu__contents .menu__machine .menu-machine__slider .slick-dots li {
height: 12px;
width: 12px
}
}
.menu__inner .menu__contents .menu__machine .menu-machine__slider .slick-dots li.slick-active {
background-color: #47c4d0
}
.menu__inner .menu__contents .menu__machine .menu-machine__slider .slick-dots li button {
display: none
}
.about {
background-image: url(//www.a-hifuka.com/wp-a-hifuka/wp-content/themes/a-derma/assets/img/common/bg.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 3px 6px #00000029;
margin-bottom: 96px;
}
@media screen and (max-width:767px) {
.about {
margin-bottom: 0;
}
}
.about__inner {
padding-bottom: 100px;
padding-top: 120px
}
@media screen and (max-width:767px) {
.about__inner {
padding-bottom: 50px;
padding-top: 50px
}
}
.about__inner .about__title {
margin-bottom: 50px
}
@media screen and (max-width:767px) {
.about__inner .about__title {
margin-bottom: 40px
}
}
.about__inner .about__title .about-title__en {
font-size: 36px
}
@media screen and (max-width:767px) {
.about__inner .about__title .about-title__en {
font-size: 32px
}
}
.about__inner .about__contents {
display: flex;
justify-content: space-between
}
@media screen and (max-width:767px) {
.about__inner .about__contents {
flex-direction: column;
gap: 30px
}
}
.about__inner .about__contents .about__textarea {
align-items: center;
display: flex;
flex-direction: column;
margin-right: 20px;
max-width: 520px
}
@media screen and (max-width:767px) {
.about__inner .about__contents .about__textarea {
margin-right: 0;
max-width: none
}
}
.about__inner .about__contents .about__textarea .about__text {
font-size: 16px;
font-weight: 600;
line-height: 2;
margin-bottom: 50px
}
@media screen and (max-width:767px) {
.about__inner .about__contents .about__textarea .about__text {
font-size: 14px;
margin-bottom: 30px
}
}
.about__inner .about__contents .about__textarea .about__btnarea {
display: flex;
flex-direction: column;
gap: 24px
}
@media screen and (max-width:767px) {
.about__inner .about__contents .about__textarea .about__btnarea {
align-items: center;
gap: 14px;
width: 100%
}
}
.about__inner .about__contents .about__imgarea {
max-width: 400px;
width: 100%
}
@media screen and (max-width:767px) {
.about__inner .about__contents .about__imgarea {
margin: 0 auto
}
}
.about__inner .about__contents .about__imgarea img {
height: auto;
width: 100%
}
.sns {
margin-bottom: 100px
}
.sns__inner .sns__title {
margin-bottom: 39px
}
@media screen and (max-width:767px) {
.sns__inner .sns__title {
margin-bottom: 40px
}
}
.sns__inner .sns__contents .sns__text {
font-size: 24px;
font-weight: 600;
line-height: 2.75;
margin: 0 auto 34px;
padding: 0 67px;
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
@media screen and (max-width:767px) {
.sns__inner .sns__contents .sns__text {
font-size: 18px;
line-height: 1.6;
padding: 0 30px
}
}
.sns__inner .sns__contents .sns__text:after,
.sns__inner .sns__contents .sns__text:before {
background-image: url(//www.a-hifuka.com/wp-a-hifuka/wp-content/themes/a-derma/assets/img/top/deco-line.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 35px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 35px
}
@media screen and (max-width:767px) {
.sns__inner .sns__contents .sns__text:after,
.sns__inner .sns__contents .sns__text:before {
height: 20px;
width: 20px
}
}
.sns__inner .sns__contents .sns__text:before {
left: 0
}
.sns__inner .sns__contents .sns__text:after {
right: 0;
transform: translateY(-50%) scaleX(-1)
}
.sns__inner .sns__contents .sns__box {
border: 4px solid #47c4d0;
margin: 0 auto 49px;
max-width: 757px;
padding: 46px 65px;
text-align: center
}
@media screen and (max-width:767px) {
.sns__inner .sns__contents .sns__box {
border: 3px solid #47c4d0;
padding: 16px 20px
}
}
.sns__inner .sns__contents .sns__box img {
height: auto;
max-width: 628px;
width: 100%
}
.sns__inner .sns__contents .sns__box #sbi_load,
.sns__inner .sns__contents .sns__box .sb_instagram_header {
display: none
}
.sns__inner .sns__contents .sns__btn {
margin: 0 auto
}
.cg {
background-image: url(//www.a-hifuka.com/wp-a-hifuka/wp-content/themes/a-derma/assets/img/common/bg.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 3px 6px #00000029;
margin-bottom: 120px
}
.cg__inner {
padding-bottom: 120px;
padding-top: 84px
}
@media screen and (max-width:767px) {
.cg__inner {
padding-bottom: 50px;
padding-top: 50px
}
}
.cg__inner .cg__title {
margin-bottom: 73px
}
@media screen and (max-width:767px) {
.cg__inner .cg__title {
margin-bottom: 24px;
}
}
.cg__inner .cg__title .cg-title__en {
font-size: 40px
}
@media screen and (max-width:767px) {
.cg__inner .cg__title .cg-title__en {
font-size: 32px
}
}
.cg__inner .cg__contents .cg__main {
align-items: center;
display: flex;
gap: 34px;
margin-bottom: 83px
}
@media screen and (max-width:767px) {
.cg__inner .cg__contents .cg__main {
flex-direction: column-reverse
}
}
.cg__inner .cg__contents .cg__main .cg__imgarea {
max-width: 424px;
width: 100%
}
@media screen and (max-width:767px) {
.cg__inner .cg__contents .cg__main .cg__imgarea {
max-width: none
}
}
.cg__inner .cg__contents .cg__main .cg__imgarea img {
height: auto;
width: 100%
}
.cg__inner .cg__contents .cg__main .cg__items {
display: grid;
gap: 14px;
grid-template-columns: 1fr 1fr;
max-width: 582px;
width: 100%
}
@media screen and (max-width:960px) {
.cg__inner .cg__contents .cg__main .cg__items {
grid-template-columns: 1fr;
max-width: none;
gap: 10px;
}
}
.cg__inner .cg__contents .cg__main .cg__items .cg__item {
align-items: center;
background: #1fb6c3;
display: flex;
flex-direction: column;
min-height: 166px;
padding-top: 15px
}
@media screen and (max-width:767px) {
.cg__inner .cg__contents .cg__main .cg__items .cg__item {
width: 100%;
min-height: 0;
padding-top: 10px;
}
}
.cg__inner .cg__contents .cg__main .cg__items .cg__item .cg-item__title {
color: #fff;
font-size: 22px;
font-weight: 700;
line-height: 1.2727272727;
margin-bottom: 17px
}
@media screen and (max-width:767px){
.cg__inner .cg__contents .cg__main .cg__items .cg__item .cg-item__title {
font-size: 20px;
margin-bottom: 6px;
}
}
.cg__inner .cg__contents .cg__main .cg__items .cg__item .cg-item__text {
color: #fff;
font-family: Noto Sans JP, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
text-align: center
}
@media screen and (max-width:767px) {
.cg__inner .cg__contents .cg__main .cg__items .cg__item .cg-item__text {
font-size: 13px;
line-height: 1.3;
}
}
.cg__inner .cg__contents .cg__main .cg__items .cg__item .cg-item__footer {
background: #47c4d0;
color: #fff;
font-family: Noto Sans JP, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.125;
margin-top: auto;
padding: 6px 0;
text-align: center;
width: 100%
}
@media screen and (max-width:767px) {
.cg__inner .cg__contents .cg__main .cg__items .cg__item .cg-item__footer {
padding: 8px 0;
margin-top: 12px;
}
}
.cg__inner .cg__contents .cg__reserve .cg-reserve__title {
margin: 0 auto 40px
}
.cg__inner .cg__contents .cg__reserve .cg__btns {
display: grid;
gap: 52px;
grid-template-columns: repeat(3, 1fr)
}
@media screen and (max-width:960px) {
.cg__inner .cg__contents .cg__reserve .cg__btns {
gap: 20px
}
}
@media screen and (max-width:767px) {
.cg__inner .cg__contents .cg__reserve .cg__btns {
grid-template-columns: 1fr
}
}
.cg__inner .cg__contents .cg__reserve .cg__btns .cg__btn {
align-items: center;
background: #fff;
box-shadow: 0 3px 4px #00000029;
color: #1895a0;
display: flex;
font-size: 24px;
font-weight: 500;
gap: 32px;
justify-content: center;
line-height: 1.4583333333;
padding: 18px 0
}
@media screen and (max-width:960px) {
.cg__inner .cg__contents .cg__reserve .cg__btns .cg__btn {
font-size: 18px;
gap: 20px;
padding: 14px 0
}
}
.cg__inner .cg__contents .cg__reserve .cg__btns .cg__btn img {
height: auto;
width: 45px
}
@media screen and (max-width:960px) {
.cg__inner .cg__contents .cg__reserve .cg__btns .cg__btn img {
width: 35px
}
}
.mh {
margin-bottom: 157px
}
@media screen and (max-width:767px) {
.mh {
margin-bottom: 100px
}
}
.mh__inner .mh__title {
margin-bottom: 52px
}
@media screen and (max-width:767px) {
.mh__inner .mh__title {
margin-bottom: 40px
}
}
.mh__inner .mh__title .mh-title__en {
font-size: 40px
}
@media screen and (max-width:767px) {
.mh__inner .mh__title .mh-title__en {
font-size: 32px
}
}
.mh__inner .mh__contents {
margin: 0 auto;
max-width: 750px;
width: 100%
}
@media screen and (max-width:767px) {
.mh__inner .mh__contents {
max-width: none
}
}
.mh__inner .mh__contents .mh__text {
font-size: 16px;
font-weight: 600;
line-height: 2;
margin-bottom: 10px;
text-align: center
}
@media screen and (max-width:767px) {
.mh__inner .mh__contents .mh__text {
font-size: 14px
}
}
.mh__inner .mh__contents .mh__sales {
margin: 0 auto 31px;
width: 100%
}
.mh__inner .mh__contents .mh__sales img {
height: auto;
width: 100%
}
.mh__inner .mh__contents .mh__note {
font-size: 16px;
line-height: 1.75;
margin-bottom: 65px
}
@media screen and (max-width:767px) {
.mh__inner .mh__contents .mh__note {
font-size: 13px
}
}
.mh__inner .mh__contents .mh__calendar {
margin-bottom: 3px
}
@media screen and (max-width:767px) {
.mh__inner .mh__contents .mh__calendar {
margin-bottom: 20px
}
}
.mh__inner .mh__contents .mh__calendar img {
height: auto;
width: 100%
}
.mh__inner .mh__contents .mh__list .mh__item {
font-size: 16px;
font-weight: 600;
line-height: 2
}
@media screen and (max-width:767px) {
.mh__inner .mh__contents .mh__list .mh__item {
font-size: 14px
}
}
.reserve {
background-image: url(//www.a-hifuka.com/wp-a-hifuka/wp-content/themes/a-derma/assets/img/common/bg.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 3px 6px #00000029;
margin-bottom: 120px
}
.reserve__inner {
padding-bottom: 92px;
padding-top: 85px
}
.reserve__inner .reserve__title {
margin-bottom: 37px
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__title {
margin-bottom: 40px
}
}
.reserve__inner .reserve__title .reserve-title__en {
font-size: 40px
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__title .reserve-title__en {
font-size: 32px
}
}
.reserve__inner .reserve__contents .reserve__text {
font-size: 16px;
font-weight: 600;
line-height: 2;
margin-bottom: 37px;
text-align: center
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__text {
font-size: 14px;
margin-bottom: 30px
}
}
.reserve__inner .reserve__contents .reserve__btns {
display: flex;
gap: 30px;
justify-content: center;
margin-bottom: 67px
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__btns {
align-items: center;
flex-direction: column;
gap: 16px;
margin-bottom: 30px
}
}
.reserve__inner .reserve__contents .reserve__boxes {
display: flex;
gap: 26px
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__boxes {
align-items: center;
flex-direction: column
}
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__telbox {
align-items: center;
background: #fff;
display: flex;
flex-direction: column;
max-width: 438px;
padding: 33px 10px 38px;
width: 100%
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__boxes .reserve__telbox {
padding: 16px
}
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__telbox .reserve-telbox__title {
background: #47c4d0;
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 1.45;
margin-bottom: 38px;
max-width: 382px;
padding: 10px;
text-align: center;
width: 100%;
word-break: keep-all
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__boxes .reserve__telbox .reserve-telbox__title {
font-size: 18px;
margin-bottom: 15px;
max-width: none
}
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__telbox .reserve-telbox__num {
color: #1895a0;
font-size: 28px;
font-weight: 700;
line-height: 1.4285714286;
margin-bottom: 30px
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__boxes .reserve__telbox .reserve-telbox__num {
font-size: 20px;
margin-bottom: 15px
}
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__telbox .reserve-telbox__text {
font-size: 14px;
font-weight: 600;
line-height: 2.2857142857;
text-align: center
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox {
align-items: center;
background: #fff;
display: flex;
flex-direction: column;
max-width: 576px;
padding: 33px 10px 38px;
width: 100%
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox {
max-width: 438px;
padding: 16px
}
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox .reserve-webbox__title {
background: #47c4d0;
color: #fff;
font-size: 20px;
font-weight: 700;
left: 1.45;
margin-bottom: 28px;
max-width: 530px;
padding: 10px;
text-align: center;
width: 100%
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox .reserve-webbox__title {
font-size: 18px;
margin-bottom: 15px;
max-width: none
}
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox .reserve-webbox__text {
font-family: Noto Sans JP, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
margin-bottom: 26px
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox .reserve-webbox__text {
font-size: 14px;
margin-bottom: 15px
}
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox .reserve-webbox__btns {
display: flex;
gap: 14px;
justify-content: center;
width: 100%
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox .reserve-webbox__btns {
align-items: center;
flex-direction: column
}
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox .reserve-webbox__btns .reserve-webbox__btn {
color: #fff;
font-size: 20px;
font-weight: 600;
max-width: 258px;
padding: 13px 0;
text-align: center;
width: 100%
}
@media screen and (max-width:767px) {
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox .reserve-webbox__btns .reserve-webbox__btn {
font-size: 16px
}
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox .reserve-webbox__btns .reserve-webbox__btn:first-child {
background: #4f9ed1
}
.reserve__inner .reserve__contents .reserve__boxes .reserve__webbox .reserve-webbox__btns .reserve-webbox__btn:last-child {
background: #1895a0
}
.access {
margin-bottom: 70px
}
.access__inner .access__info {
margin-bottom: 34px
}
.access__inner .access__btn {
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.info {
margin-bottom: 108px
}
@media screen and (max-width:767px) {
.info {
margin-bottom: 60px
}
}
.info__inner .info__title {
margin-bottom: 60px
}
@media screen and (max-width:767px) {
.info__inner .info__title {
margin-bottom: 40px
}
}
.info__inner .info__contents .info__items {
align-items: stretch;
display: grid;
gap: 30px 40px;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 104px
}
@media screen and (max-width:960px) {
.info__inner .info__contents .info__items {
grid-template-columns: 1fr 1fr
}
}
@media screen and (max-width:767px) {
.info__inner .info__contents .info__items {
grid-template-columns: 1fr;
margin-bottom: 50px
}
}
.info__inner .info__contents .info__items .info__item {
max-width: 336px;
min-height: 90px;
width: 100%
}
@media screen and (max-width:767px) {
.info__inner .info__contents .info__items .info__item {
margin: 0 auto
}
}
@media screen and (max-width:960px) {
.info__inner .info__contents .info__items .info__item:nth-child(odd) {
margin-left: auto
}
}
@media screen and (max-width:767px) {
.info__inner .info__contents .info__items .info__item:nth-child(odd) {
margin: 0 auto
}
}
.info__inner .info__contents .info__items .info__item .info__btn {
display: flex;
height: 100%;
width: 100%
}
.info__inner .info__contents .info__items .info__item .info__btn .sns-btn__icon {
padding: 17px 0
}
.info__inner .info__contents .info__items .info__item .info__btn .sns-btn__icon--full {
padding: 0
}
.info__inner .info__contents .info__items .info__item .info__btn .sns-btn__icon--full img {
height: 100%;
max-height: 90px;
object-fit: cover;
width: 100%
}
@media screen and (max-width:960px) {
.info__inner .info__contents .info__items .info__item .info__btn .sns-btn__icon--full img {
max-height: none
}
}
.info__inner .info__contents .info__items .info__item .info__btn .sns-btn__text {
font-size: 18px
}
.info__inner .info__contents .info__items .info__item .info__btn .sns-btn__text .bd {
font-size: 12px;
margin-top: 3px
}
.info__inner .info__contents .info__items .info__item .info__btn .sns-btn__text .small {
font-size: 12px
}
.info__inner .info__contents .info__items .info__item .info__btn .sns-btn__text--col {
flex-direction: column;
gap: 6px;
margin-bottom: 5px
}
.info__inner .info__contents .info__items .info__item .info__btn--full img {
height: auto;
width: 100%
}
.info__inner .info__contents .info__bannerarea {
display: flex;
gap: 34px;
justify-content: center;
align-items: center;
}
.info__inner .info__contents .info__bannerarea-top {
margin-bottom: 40px;
}
@media screen and (max-width:767px) {
.info__inner .info__contents .info__bannerarea {
align-items: center;
flex-direction: column;
gap: 20px
}
.info__inner .info__contents .info__bannerarea-top {
margin-bottom: 20px;
}
}
.info__inner .info__contents .info__bannerarea .info__banner {
max-width: 418px;
width: 100%
}
.info__inner .info__contents .info__bannerarea .info__banner img {
height: auto;
width: 100%
}
.banner_inner {
margin: 0 auto;
max-width: 1072px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 74px;
}
.banner_img {
width: 100%;
}