@charset "UTF-8";

/* ===================================================================
CSS information
 file name  :  style.css
 style info : LPスタイル
=================================================================== */
body {
    background-color: #f2f2f2;
    font-family: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
    font-feature-settings: "palt";
    overflow-x: hidden;
}

.content {
    width: 750px;
    max-width: 100%;
    margin: 0 auto 10%;
    text-align: center;
    -webkit-box-shadow: 0 0 10px 2px #d6d6d6;
    -moz-box-shadow: 0 0 10px 2px #d6d6d6;
    box-shadow: 0 0 10px 2px #d6d6d6;
    position: relative;
    overflow: hidden;
}

/* ==============================
common
=================================== */
.box_wrap {
    position: relative;
}

.slick-slide img {
    margin: 0 auto;
    text-align: center;
}

.btn img {
    animation: buttonMove 0.5s ease infinite alternate;
}

.mix-blend {
    position: absolute;
    mix-blend-mode: plus-lighter;
}

/* ==============================
FV
=================================== */
.fv {
    position: relative;
    background: url(../img/fv_bg.png?v=20250218) no-repeat top center/100%;
}
/* ==============================
CTA
=================================== */
.cta {
    background: url(../img/cta_bg.png)no-repeat top center/100%;
}

.cta_price {
    position: absolute;
    bottom: 0;
}

.cta_btn {
    width: min(calc(714/750 * 100vw), 714px);
    position: absolute;
    top: max(calc(-5/750 * 100vw), -5px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.cta_0yen {
    width: min(calc(640/750 * 100vw), 640px);
    position: absolute;
    top: max(calc(-25/750 * 100vw), -25px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

/* ==============================
case
=================================== */
.case {
    background: url(../img/case_bg.png) no-repeat top center/ 100%;
}

/* ==============================
jisekki
=================================== */
.jisekki {
    position: relative;
    background: url(../img/jisseki_bg.png) no-repeat bottom center/ 100%;
}

.jisseki_330 {
    position: absolute;
    bottom: 0;
}

.jisekki::after{
    content: "";
    position: absolute;
    background: url(../img/dot.png)no-repeat top center / min(calc(6/750 * 100vw), 6px);
    bottom: max(calc(-46/750 * 100vw), -46px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: min(calc(6/750 * 100vw), 6px);
    height: min(calc(96/750 * 100vw), 96px);
}
/* ==============================
hce
=================================== */
.hce video{
    position: absolute;
    width: min(calc(520/ 750 * 100vw),520px);
    height: min(calc(540/ 750 * 100vw),540px);
    top: min(calc(90/ 750 * 100vw),90px);
    object-fit: cover;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.hce {
    background: url(../img/hce_bg.png) no-repeat top center/ 100%;
}
/* ==============================
nayami
=================================== */
.nayami {
    background: url(../img/nayami_bg.png) no-repeat top center/ 100%;
}

.nayami h2{
    position: relative;
    z-index: 2;
}
.nayami_list li {
    position: absolute;
    bottom: 0;
}

.nayami_list li:first-child,
.nayami_list li:nth-child(2),
.nayami_list li:nth-child(3),
.nayami_list li:nth-child(4) {
    transition-delay: .8s;
}

.nayami_ha {
    position: absolute;
    bottom: min(calc(424/750 * 100vw), 424px);
    left: 0;
    z-index: 3;
}

.nayami_kai {
    position: absolute;
    bottom: min(calc(484/750 * 100vw), 484px);
    right: 0;
    z-index: 1;
}

.nayami_kai img {
    transition-delay: 0.7s;
}

.nayami_ki {
    position: absolute;
    top: 0;
    left:0;
    z-index: 21;
}

/* ==============================
check
=================================== */
.check{
    position: relative;
    background: url(../img/check_bg.png) no-repeat top center/ 100%;
    padding-bottom: min(calc(490 / 750 * 100vw), 490px);
}
.check ul li{
    position: absolute;
    top: min(calc(200 / 750 * 100vw), 200px);
}
.check ul li:nth-child(2) {
  transition-delay: .2s;
}
.check ul li:nth-child(3) {
  transition-delay: .4s;
}
.check ul li:nth-child(4) {
  transition-delay: .6s;
}
.check ul li:nth-child(5) {
  transition-delay: .8s;
}
.check::before{
    content: "";
    position: absolute;
    background: url(../img/next.png) no-repeat top center/ 100%;
    width: 100%;
    height: min(calc(170 / 750 * 100vw), 170px);
    top: max(calc(-84 / 750 * 100vw), -84px);
    left: 0;
}
/* ==============================
catch02
=================================== */
.catch02{
    position: relative;
    background: url(../img/catch02_bg.png) no-repeat top center/ 100%;
}
.catch02::before{
    content: "";
    position: absolute;
    background: url(../img/catch02_pop.png) no-repeat top center/ 100%;
    width: 100%;
    height: min(calc(104 / 750 * 100vw), 104px);
    top: max(calc(-37 / 750 * 100vw), -37px);
    left: 0;
}
/* ==============================
hce02
=================================== */
.hce02 video{
    position: absolute;
    width: min(calc(520/ 750 * 100vw),520px);
    height: min(calc(540/ 750 * 100vw),540px);
    top: min(calc(90/ 750 * 100vw),90px);
    object-fit: cover;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.hce02 {
    background: url(../img/hce02_bg.png) no-repeat bottom center/ 100%;
}
/* ==============================
point
=================================== */
.point{
    background: url(../img/point_bg.png?v=20250218) no-repeat top center/ 100%;
}

.point03{
    position: relative;
}

.point03::before{
    content: '';
    width: min(calc(6/ 750 * 100vw),6px);
    height: min(calc(96/ 750 * 100vw),96px);
    left: 50%;
    top: max(calc(-46/ 750 * 100vw),-46px);
    transform: translateX(-50%);
    position: absolute;
    background: url(../img/dot.png) no-repeat top center / 100%;
}
/* ==============================
catch04
=================================== */
.catch04{
    position: relative;
    background: url(../img/catch04_bg.png) no-repeat top center/ 100%;
}
.catch04 h2{
    position: absolute;
    top: 0;
    z-index: 0;
}
.catch04_pic{
    position: absolute;
    bottom: 0;
}
.catch04_sub{
    position: relative;
    z-index: 2;
}
/* ==============================
risk
=================================== */
.risk{
    background: url(../img/risk_bg.png) no-repeat top center/ 100%;
}

/* ==============================
feature
=================================== */
.feature{
    background: url(../img/feature_bg.png) no-repeat top center/ 100%;
}

/* ==============================
voice
=================================== */
.voice{
    background: #fff;
}
/* ==============================
flow
=================================== */
.flow {
    background: url(../img/flow_bg.png)no-repeat top center/100%;
}

.flow_slide {
    padding-left: min(calc(15/750 * 100vw), 15px);
}

.flow_slide .slick-arrow {
    width: min(calc(229 / 750 * 100vw), 229px);
    height: min(calc(27 / 750 * 100vw), 27px);
    top: min(calc(943 / 750 * 100vw), 943px);
    z-index: 5;
}

.flow_slide .slick-prev {
    display: none;
}

.flow_slide .slick-next {
    background: url(../img/flow_slide_arrow.png) no-repeat center / contain;
    right: min(calc(24 / 750 * 100vw), 24px);
}

.flow_slide .slick-dots {
    bottom: max(calc(-26 / 750 * 100vw), -26px);
    left: 4.5%;
    z-index: 2;
    width: auto;
    display: inline-block !important;
}

.flow_slide .slick-dots li {
    margin: 0 min(calc(11 / 750 * 100vw), 11px);
}

.flow_slide.slick-dotted.slick-slider {
    margin-bottom: min(calc(155 / 750 * 100vw), 155px);
}

/* ==============================
faq
=================================== */
.faq {
    background: url(../img/faq_bg.png)no-repeat top center/100%;
    padding-bottom: min(calc(54 / 750 * 100vw), 54px);
}

.faq-item {
    width: min(calc(700 / 750 * 100vw), 700px);
    padding: min(calc(25 / 750 * 100vw), 25px) min(calc(35 / 750 * 100vw), 35px) min(calc(25 / 750 * 100vw), 25px) min(calc(36 / 750 * 100vw), 36px);
    background: white;
    border-radius: min(calc(10 / 750 * 100vw), 10px);
    box-shadow: 0 0 min(calc(10 / 750 * 100vw), 10px) rgba(0, 0, 0, 0.1);
    margin: 0 auto min(calc(32 / 750 * 100vw), 32px);
    cursor: pointer;
}

.faq-question {
    position: relative;
    display: grid;
    grid-template-columns: min(calc(24/750 * 100vw), 24px) 1fr;
    column-gap: min(calc(33 / 750 * 100vw), 33px);
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    font-size: min(calc(30 / 750 * 100vw), 30px);
    font-weight: 500;
    letter-spacing: 0.052em;
    line-height: 1.7;

}

.faq-question img {
    margin-top: min(calc(15 / 750 * 100vw), 15px);
}

.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    display: grid;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out;
    grid-template-columns: min(calc(20/750 * 100vw), 20px) 1fr;
    column-gap: min(calc(33/750 * 100vw), 33px);
    font-size: min(calc(26 / 750 * 100vw), 26px);
    color: #444;
    text-align: left;
    line-height: 2.1;
    letter-spacing: 0.06em;
    border-top: min(calc(1 / 750 * 100vw), 1px) solid #cecece;
    font-weight: 500;
}

.faq-answer-note {
    display: block;
    text-align: right;
    font-size: min(calc(18 / 750 * 100vw), 18px);
}

.faq-question.active+.faq-answer {
    max-height: 1000px;
    opacity: 1;
    padding-top: min(calc(15 / 750 * 100vw), 15px);
    margin-top: min(calc(23 / 750 * 100vw), 23px);
}

.faq-item:nth-of-type(1) .faq-question.active+.faq-answer {
    padding-bottom: min(calc(29 / 750 * 100vw), 29px);
}

.faq-item:has(.faq-question.active):nth-of-type(2) {
    margin: 0 auto min(calc(33 / 750 * 100vw), 33px);
    padding-bottom: min(calc(60 / 750 * 100vw), 60px);
}

.faq-item:has(.faq-question.active):nth-of-type(3) {
    margin: 0 auto min(calc(31 / 750 * 100vw), 31px);
    padding-bottom: min(calc(62 / 750 * 100vw), 62px);
}

.faq-item:nth-of-type(3) .faq-answer {
    letter-spacing: 0.085em;
}

.faq-item:has(.faq-question.active):nth-of-type(4),
.faq-item:has(.faq-question.active):nth-of-type(5) {
    margin: 0 auto min(calc(30 / 750 * 100vw), 30px);
    padding-bottom: min(calc(70 / 750 * 100vw), 70px);
}

.faq-item:has(.faq-question.active):nth-of-type(5) {
    padding-bottom: min(calc(20 / 750 * 100vw), 20px);
}


.faq-item:has(.faq-question.active):nth-of-type(6) {
    margin: 0 auto min(calc(30 / 750 * 100vw), 30px);
    padding-bottom: min(calc(44 / 750 * 100vw), 44px);
}

.faq-item:has(.faq-question.active):nth-of-type(7) {
    margin: 0 auto min(calc(30 / 750 * 100vw), 30px);
    padding-bottom: min(calc(48 / 750 * 100vw), 48px);
}

.faq-item:has(.faq-question.active):nth-of-type(8) {
    margin: 0 auto min(calc(30 / 750 * 100vw), 30px);
    padding-bottom: min(calc(48 / 750 * 100vw), 48px);
}

.faq-item:has(.faq-question.active):nth-of-type(9) {
    margin: 0 auto min(calc(30 / 750 * 100vw), 30px);
    padding-bottom: min(calc(48 / 750 * 100vw), 48px);
}

.faq-item:has(.faq-question.active):nth-of-type(10) {
    margin: 0 auto min(calc(30 / 750 * 100vw), 30px);
    padding-bottom: min(calc(64 / 750 * 100vw), 64px);
}


.faq-answer img {
    margin-top: min(calc(17 / 750 * 100vw), 17px);
}

.faq-answer p {
    display: inline;
}

.question-text:before,
.question-text:after {
    content: "";
    position: absolute;
    top: 52%;
    right: 0.2%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: min(calc(25/750 * 100vw), 25px);
    height: min(calc(2/750 * 100vw), 2px);
    background: #303030;
    display: block;
}

.question-text:after {
    transform: rotate(90deg);
    transition: 0.5s;
}

.faq-question.active .question-text:after {
    transform: rotate(0deg);
    transition: 0.5s;
}

.faq .note {
  display: block;
  text-align: right;
  font-size: min(calc(18/750 * 100vw),18px);
}

.men_logo img {
    display: block;
    width: min(calc(354/750 * 100vw), 354px);
    margin: min(calc(45/750 * 100vw), 45px) auto 0 min(calc(82/750 * 100vw), 82px);
}

/* ==============================
float_btn
=================================== */
.float_btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s;
    width: min(calc(680/750 * 100vw),680px);
    margin: 0 auto;
    position: sticky;
    bottom: 0;
    display: grid;
    padding-bottom: min(calc(20/750 * 100vw), 20px);
    justify-content: center;
    align-items: baseline;
    z-index: 99;
}
.float_btn.visible {
    opacity: 1;
    visibility: visible;
}
/* ==============================
clinic
=================================== */

.clinic_accordion {
    background: #fff;
}

.clinic {
    background: #fff;
    padding-bottom: min(calc(30/750 * 100vw), 30px);
}

.state_name {
    position: relative;
    color: #3db2d2;
    font-size: min(calc(30/750 * 100vw), 30px);
    margin: 0 min(calc(37/750 * 100vw), 37px) min(calc(37/750 * 100vw), 37px) min(calc(40/750 * 100vw), 40px);
    text-align: left;
    padding: min(calc(7/750 * 100vw), 7px) 0 min(calc(5/750 * 100vw), 5px) min(calc(21/750 * 100vw), 21px);
    border-left: #3db2d2 solid min(calc(6/750 * 100vw), 6px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.clinic_list {
    margin-bottom: min(calc(55/750 * 100vw), 55px);
    display: grid;
    grid-template-columns: repeat(auto-fit, min(calc(325/750 * 100vw), 325px));
    gap: min(calc(20/750 * 100vw), 20px);
    padding: 0 min(calc(40/750 * 100vw), 40px);
    justify-content: space-between;
    box-sizing: border-box;
}

.clinic_card {
    width: min(calc(325/750 * 100vw), 325px);
    border: 1px solid #3db2d2;
    background: #eefbff;
    border-radius: min(calc(5/750 * 100vw), 5px);
    box-sizing: border-box;
    height: auto;
    text-align: left;
    padding: min(calc(35/750 * 100vw), 35px) min(calc(20/750 * 100vw), 20px) min(calc(35/750 * 100vw), 35px) min(calc(30/750 * 100vw), 30px);
}

li:has(.clinic-inner.open) .clinic_card  {
    border: 1px solid #3db2d2;
    background: #3db2d2;
}

li:has(.clinic-inner.open) .clinic_card_ttl {
  color: #fff;
}

.c_toyohashi .clinic_card,
.c_hamamatsu .clinic_card {
    padding-bottom: min(calc(47/750 * 100vw), 47px);
}

.c_fukuokatenjin .clinic_card {
    padding: min(calc(20/750 * 100vw), 20px) min(calc(20/750 * 100vw), 20px) min(calc(20/750 * 100vw), 20px) min(calc(30/750 * 100vw), 30px);
}
.c_fukuokatenjin .clinic_card_ttl span {
    display: block;
    font-size: min(calc(22/750 * 100vw), 22px);
    margin-top: min(calc(8/750 * 100vw), 8px);
}

.clinic_card.open {
    background: #faf4ec;
}

.clinic_card>.clinic_card_ttl {
    font-size: min(calc(26/750 * 100vw), 26px);
    color: #3db2d2;
    line-height: 1;
}

.clinic_card.open>.clinic_card_ttl {
    color: #fff;
}

.clinic_card>.clinic_card_txt {
    font-size: min(calc(18/750 * 100vw), 18px);
    color: #000;
    margin-top: min(calc(2/750 * 100vw), 2px);
    letter-spacing: 0.05em;
}

.clinic_card.open>.clinic_card_txt {
    color: #fff;
}

.clinic-inner {
    position: relative;
    width: min(calc(670/750 * 100vw), 670px);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    border: solid min(calc(1/750 * 100vw), 1px) #3db2d2;
    background: #fff;
    border-radius: min(calc(5/750 * 100vw), 5px);
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, margin 0.4s ease-in-out;
}

.clinic-inner.open {
    opacity: 1;
    max-height: 100%;
    margin-top: min(calc(21/750 * 100vw), 21px);
}

.clinic_list>li:nth-child(2n) .clinic-inner {
    margin-left: -106%;
}

.clinic-inner h4 {
    font-size: min(calc(30/750 * 100vw), 30px);
    color: #3db2d2;
}

.clinic_info,
.clinic-info--head,
.clinic-info--txt {
    font-size: min(calc(22/750 * 100vw), 22px);
    color: #000;
    text-align: left;
    padding: 0 0 0 min(calc(33/750 * 100vw), 33px);
}

.clinic-info--txt {
    font-size: min(calc(18/750 * 100vw), 18px);
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.clinic-map,
.clinic-holiday,
.clinic-access,
.clinic-address {
    padding: min(calc(22/750 * 100vw), 22px) 0 min(calc(194/750 * 100vw), 19px);
    background: #eefbff;
}

.table-heading,
.profile,
.clinic-hours,
.clinic-tel {
    padding: min(calc(20/750 * 100vw), 20px) 0 min(calc(27/750 * 100vw), 27px);
}

.clinic-hours .clinic-info--txt,
.clinic-tel .clinic-info--txt {
    font-size: min(calc(22/750 * 100vw), 22px);
}

.clinic-hours,
.clinic-tel {
    padding: min(calc(24/750 * 100vw), 24px) 0 min(calc(14/750 * 100vw), 14px);
}

.clinic-map {
    padding: 0;
}

.clinic-map iframe {
    width: 100%;
    height: min(calc(300/750 * 100vw), 300px);
    border: none;
}

.map-counseling {
    margin: min(calc(30/750 * 100vw), 30px) auto min(calc(13/750 * 100vw), 13px);
    display: grid;
    grid-template-columns: repeat(2, min(calc(280/750 * 100vw), 280px));
    column-gap: min(calc(20/750 * 100vw), 20px);
    justify-content: center;
}

.map-counseling a.inner_btn,
.map-counseling a.btn_map {
    display: inline-block;
    width: min(calc(280/750 * 100vw), 280px);
    padding: min(calc(29/750 * 100vw), 29px) min(calc(5/750 * 100vw), 5px);
    background: #3db2d2;
    color: #fff;
    font-size: min(calc(22/750 * 100vw), 22px);
    border-radius: min(calc(5/750 * 100vw), 5px);
    cursor: pointer;
    line-height: 1;
}

.btn_map {
    letter-spacing: 0.12em;
}

.map-counseling a.inner_btn {
    background: #f17250;
}

.profile .name {
    padding: 0 0 0 min(calc(28/750 * 100vw), 28px);
    margin-bottom: min(calc(15/750 * 100vw), 15px);
    font-size: min(calc(30/750 * 100vw), 30px);
    text-align: left;
}

.profile .name span {
    font-size: min(calc(22/750 * 100vw), 22px);
    margin-right: min(calc(15/750 * 100vw), 15px);
}

.profile .comment,
.profile .history {
    padding: 0 0 0 min(calc(30/750 * 100vw), 30px);
    font-size: min(calc(18/750 * 100vw), 18px);
    text-align: left;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.profile .comment {
    width: 92%;
    padding-left: 0;
    margin: 0 auto;
    border-top: solid 1px #c3a983;
    padding-top: min(calc(15/750 * 100vw), 15px);
    margin-top: min(calc(12/750 * 100vw), 12px);
}

/* ==============================
アニメーション
=================================== */
@keyframes buttonMove {
    0% {
        transform: scale(0.9, 0.9);
    }

    100% {
        transform: scale(1, 1);
    }
}

.move {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

/* 左からフェードイン */
.fade-in-left {
    transition: all 0.5s 0s ease;
    transition-delay: 0s;
    opacity: 0;
    transform: scale(1, 1) translateX(-20%);
    transition-delay: .25s;
}

.fade-in-left.show {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
}

/* 右からフェードイン */
.fade-in-right {
    transition: all 0.5s 0s ease;
    transition-delay: 0s;
    opacity: 0;
    transform: scale(1, 1) translateX(20%);
    transition-delay: .25s;
}

.fade-in-right.show {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
}

/* 上からフェードイン */
.fade-in-top {
    transition: all 0.8s 0s ease;
    transition-delay: 0s;
    opacity: 0;
    transform: scale(1, 1) translateY(-40%);
    transition-delay: .25s;
}

.fade-in-top.show {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}

/* 下からフェードイン */
.fade-in-bottom {
    transition: all 0.8s 0s ease;
    transition-delay: 0s;
    opacity: 0;
    transform: scale(1, 1) translateY(40%);
    transition-delay: .25s;
}

.fade-in-bottom.show {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
}

/* ズームイン */
.zoom-in {
    transform: scale(1.8);
    transition: all 0.8s 0s ease;
}

.zoom-in.show {
    transform: scale(1);
}

/* ふわっと現れる */
.pop-in {
    transition: all 0.8s 0s ease;
    opacity: 0;
    transform: scale(1, 1);
    transition-delay: .25s;
}

.pop-in.show {
    opacity: 1;
    transform: scale(1, 1);
}

.footer_wrap {
    padding: min(calc(40/750 * 100vw), 40px);
    background: #3db2d2;
    color: #fff;
}

.attention {
    background: #faf4ec;
}

.footer_wrap a {
    color: #fff;
}