@charset "UTF-8";

:root{

--plan-font: "Noto Sans JP", sans-serif;

--plan-bg-blue: #09439a;
--plan-bg-green: #009393;
--plan-bg-lightblue: #2191ae;
--plan-bg-lightgreen: #44b098;
--plan-font-blue : #006683;
--plan-font-navy: #202c4a;
--plan-font-red: #e65551;

}

.content_bk { min-width: 1260px;}
.content_bk p,
.content_bk h1,
.content_bk h2:not([class]),
.content_bk h3,
.content_bk h4,
.content_bk h5,
.content_bk h6{ font-family: var(--plan-font);}

.planBox img{ width: 100%; height: auto;}

/*
PLAN
---------------------------------*/
.content-title h2{ font-weight: 700;}
.content-title + .catch{ font-size: 35px; text-align: center; font-weight: 400; color: #fff; margin-top: 80px;}

.planBox{ background-image: url(../img/plan/bg-pc.webp); background-repeat: repeat-y; background-position: center top; display: flex; flex-direction: column; gap: 140px; margin-top: 80px; padding-bottom: 120px; position: relative;}
.planBox::after{ content: ""; display: block; height: 200px; width: 100%;  background-image: linear-gradient(0deg, #000 0%, #000 10%, transparent 100%);; position: absolute; bottom: 0; left: 0;}
.planBox section{ margin-inline: auto; width: 1260px; position: relative; z-index: 2;}
.planBox section.js-scroll-animation{ opacity: 0; transform: translateY(60px); transition: opacity 0.8s ease, transform 0.8s ease;}
.planBox section.js-scroll-animation.is-visible{ opacity: 1; transform: translateY(0);}
@media (prefers-reduced-motion: reduce){
    .planBox section.js-scroll-animation{ opacity: 1; transform: none; transition: none;}
}
.planBox section:not(.headress) h3{ width: fit-content; min-width: 500px; text-align: center; color: #fff; font-size: 48px; margin-inline: auto; box-sizing: border-box; padding: 30px; line-height: 1; border-radius: 40px 40px 0 0; font-weight: 900; position: relative;}
.planBox section:nth-child(odd):not(.headress) h3{ background-color: var(--plan-bg-blue);}
.planBox section:nth-child(even):not(.headress) h3{ background-color: var(--plan-bg-green);}
.planBox section .inner{ background-image: url(../img/plan/bg-contents.webp); background-repeat: repeat; background-position: center top; box-sizing: border-box; padding: 100px 60px 80px; border-radius: 60px;}
.planBox section .inner p:not([class]){ font-size: 16px; color: var(--plan-font-navy);}
.planBox section .inner p.lead{ font-size: 24px; text-align: center; color: var(--plan-font-navy);}
.planBox section .inner p.lead b{ font-weight: 700; color: var(--plan-font-blue); }
.planBox section.headress .inner{ padding-top: 80px; }
.planBox section:not(.headress) .inner{ margin-top: -50px;}
.planBox section .inner h4,
.planBox section .inner h3{ font-size: 40px; font-weight: 700; text-align: center; width: fit-content; margin: 0 auto 60px; color: var(--plan-font-navy); padding-bottom: 20px; background-image: url(../img/plan/wave-w.svg); background-repeat: repeat-x; background-position: center bottom; background-size: 40px 10px;}
.planBox section .inner h4.check::before,
.planBox section .inner h3.check::before{ content: ""; display: block; width: 135px; aspect-ratio: 135 / 30; background-image: url(../img/plan/check-r.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; margin: 0 auto 10px;}
.planBox .mainFlexBox{ display: flex; align-items: center; gap: 50px;}
.planBox .mainFlexBox.reverse{ flex-direction: row-reverse;}
.planBox .mainFlexBox > figure,
.planBox .mainFlexBox > .planSliderBox{ width: 500px;}
.planBox .mainFlexBox > figure img{ border-radius: 30px; overflow: hidden; display: block;}
.planBox .mainFlexBox > figure figcaption{ text-align: right; font-size: 12px; margin-top: 20px; color: var(--plan-font-navy); }
.planBox .mainFlexBox > .planSliderBox > ul{ margin: 0; border-radius: 30px; overflow: hidden;}
.planBox .mainFlexBox > .planSliderBox > ul img{ display: block;}
.planBox .mainFlexBox > .planSliderBox .dot{ margin-top: 20px;}
.planBox .mainFlexBox > .planSliderBox .dot .slick-dots{ display: flex !important; justify-content: center; position: relative; top: auto; left: auto; right: auto; bottom: auto; gap: 15px;}
.planBox .mainFlexBox > .planSliderBox .dot .slick-dots li{ width: 15px; height: auto; aspect-ratio: 1 / 1; padding: 0; margin: 0; border-radius: 50%; overflow: clip;}
.planBox .mainFlexBox > .planSliderBox .dot .slick-dots li{ width: 15px; aspect-ratio: 1 / 1; padding: 0;}
.planBox .mainFlexBox > .planSliderBox .dot .slick-dots li button{ width: 100%; height: 100%; padding: 0; display: block;}
.planBox .mainFlexBox > .planSliderBox .dot .slick-dots li button > *{ opacity: 0;}
.planBox .mainFlexBox > .planSliderBox .dot .slick-dots li button::before{ content: ""; width: 100%; height: 100%; padding: 0; display: block; background-color: #76bbcd; opacity: 1;}
.planBox .mainFlexBox > .planSliderBox .dot .slick-dots li.slick-active button::before{ background-color: #2191ae;}
.planBox .mainFlexBox > .textBox{ flex: 1;}
.planBox .mainFlexBox > .textBox p:not([class]){ color: var(--plan-font-navy); font-size: 16px; line-height: 1.75; font-weight: 400; }
.planBox .mainFlexBox > .textBox p:not([class]):not(:last-child){ margin-bottom: 30px;}
.planBox .mainFlexBox > .textBox p:not([class]) a{ font-weight: 700; color: var(--plan-font-blue); text-decoration: underline;}
.planBox .mainFlexBox > .textBox p:not([class]) .red,
.planBox .mainFlexBox > .textBox p:not([class]) .red a{ font-weight: 700; color: var(--plan-font-red);}
.planBox .bdrTtl{ display: flex; gap: 30px; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; color: var(--plan-font-navy); margin: 80px auto 50px;}
.planBox .bdrTtl::before,
.planBox .bdrTtl::after{ content: ""; display: block; background-color: var(--plan-bg-lightblue); height: 2px; width: 130px; }
.planBox .planLink01{ display: flex; flex-wrap: wrap; row-gap: 80px; column-gap: 60px;}
.planBox .planLink01 li{ width: 520px;}
.planBox .planLink01 li p:not([class]){ text-align: center;}
.planBox .planLink01 li .planBtn02{ margin-inline: auto;}
.planBox .planLink01 figure{ display: block; position: relative;  margin-bottom: 30px;}
.planBox .planLink01 figure img{ display: block; border-radius: 30px;}
.planBox .planLink01 figure figcaption{ display: block; position: absolute; top: 20px; left: -20px; width: fit-content; box-sizing: border-box; padding: 20px; background-color: var(--plan-bg-blue); color: #fff; font-size: 26px; font-weight: 700; line-height: 1;}
.planBox .planLink01 figure figcaption::after{ content: ""; display: block; width: 20px; aspect-ratio: 1 / 1; clip-path: polygon(0 0, 100% 0, 100% 100%); background-color: #202c4a; position: absolute; top: 100%; left: 0;}
.planBox .planLink01 li.wide{ display: flex; gap: 40px; align-items: center; width: 100%;}
.planBox .planLink01 .wide figure{ width: 600px; margin-bottom: 0;}
.planBox .planLink01 .wide p:not([class]){ text-align: left;}
.planBox .planLink01 .ttl{ font-size: 20px; font-weight: 700; margin-bottom: 20px; color: var(--plan-font-navy);}
.planBox .planLink01 p:not([class]){ font-size: 16px; font-weight: 400; color: var(--plan-font-navy); }
.planBox .planBtn01{ margin-top: 30px; width: fit-content; }
.planBox .planBtn01 a{ border-radius: 60px; background-color: var(--plan-bg-lightblue); color: #fff; width: 460px; display: block; padding: 35px 100px 35px 40px; position: relative; font-size: 24px; font-weight: 700;}
.planBox .planBtn01 a::after{ content: ""; width: 60px; aspect-ratio: 1 / 1; position: absolute; right: 20px; top: 50%; background-image: url(../img/plan/arrow-g.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; transform: translateY(-50%);}
.planBox .planBtn02{ margin-top: 30px; width: fit-content; }
.planBox .inner > .planBtn02{ margin-inline: auto; margin-top: 60px;}
.planBox .planBtn02 a{ border-radius: 60px; background-color: var(--plan-bg-lightgreen); color: #fff; width: 420px; display: block; padding: 20px 100px 20px 40px; position: relative; font-size: 24px; font-weight: 700;}
.planBox .planBtn02 a::after{ content: ""; width: 50px; aspect-ratio: 1 / 1; position: absolute; right: 20px; top: 50%; background-image: url(../img/plan/arrow-b.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; transform: translateY(-50%);}

.planBox .planLink02{ display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 70px; justify-content: center;}
.planBox .planLink02 li{ width: 340px;}
.planBox .planLink02 li figure{ border-radius: 30px; overflow: hidden; margin-bottom: 30px;}
.planBox .planLink02 li .sub{ margin-bottom: 15px; font-weight: 400; font-size: 16px; text-align: center; color: var(--plan-font-navy);}
.planBox .planLink02 li .main{ font-weight: 700; font-size: 20px; text-align: center; color: var(--plan-font-navy); line-height: 1.6;}
.planBox .planLink02 li .main::after{ content: ""; display: inline-block; aspect-ratio: 1 / 1; height: 1.2em; background-image: url(../img/plan/arrow-g.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-left: 15px; transform: translateY(0.2em);}