html{ -webkit-text-size-adjust:none; margin:0 auto; padding:0;}
body{ margin:0;}
.clear{ clear:both; height:0;}
.center{ text-align:center;}
img{ border:0; vertical-align:bottom; max-width: 100%; height: auto;}
ul{ margin:0; padding:0; list-style:none;}
p{ margin:0;}

:root{
    --blue: #005497;
    --pink: #ec9d9c;
    --base-font-color: #333333;
    --bg-gray: #f5f5f7;

    --comp-250: 33.7837837837837vw;
    --comp-230: 31.081081081081vw;
    --comp-220: 29.7297297297297vw;
    --comp-210: 28.3783783783783vw;
    --comp-200: 27.027027027027vw;
    --comp-195: 26.3513513513513vw;
    --comp-190: 25.6756756756756vw;
    --comp-185: 25vw;
    --comp-180: 24.3243243243243vw;
    --comp-175: 23.6486486486486vw;
    --comp-170: 22.9729729729729vw;
    --comp-165: 22.2972972972972vw;
    --comp-160: 21.6216216216216vw;
    --comp-155: 20.9459459459459vw;
    --comp-150: 20.2702702702702vw;
    --comp-145: 19.5945945945945vw;
    --comp-140: 18.9189189189189vw;
    --comp-135: 18.2432432432432vw;
    --comp-130: 17.5675675675675vw;
    --comp-125: 16.8918918918918vw;
    --comp-120: 16.2162162162162vw;
    --comp-115: 15.5405405405405vw;
    --comp-110: 14.8648648648648vw;
    --comp-105: 14.1891891891891vw;
    --comp-100: 13.5135135135135vw;
    --comp-95: 12.83783783783783vw;
    --comp-90: 12.1621621621621vw;
    --comp-85: 11.48648648648648vw;
    --comp-80: 10.8108108108108vw;
    --comp-75: 10.13513513513513vw;
    --comp-70: 9.459459459459459vw;
    --comp-65: 8.738738738738738vw;
    --comp-60: 8.108108108108108vw;
    --comp-55: 7.432432432432432vw;
    --comp-50: 6.756756756756756vw;
    --comp-45: 6.081081081081081vw;
    --comp-40: 5.405405405405405vw;
    --comp-35: 4.729729729729729vw;
    --comp-30: 4.054054054054054vw;
    --comp-25: 3.378378378378378vw;
    --comp-20: 2.702702702702702vw;
    --comp-15: 2.027027027027027vw;
    --comp-10: 1.351351351351351vw;
    --comp-5: 0.6756756756756756vw;

    --comp-46: 6.21621621621621vw;
    --comp-34: 4.59459459459459vw;
    --comp-32: 4.32432432432432vw;
    --comp-28: 3.78378378378378vw;
    --comp-27: 3.64864864864865vw;
    --comp-26: 3.51351351351351vw;
    --comp-24: 3.24324324324324vw;
    --comp-22: 2.97297297297297vw;
    --comp-20: 2.70270270270270vw;
    --comp-18: 2.43243243243243vw;
    --comp-14: 1.89189189189189vw;
    --comp-12: 1.62162162162162vw;
    --comp-8: 1.081081081081081vw;
    --comp-6: 0.81081081081081vw;
}

/*---------------------------------------------
 CONTAINER
---------------------------------------------*/
[id] { scroll-margin-top: 0; }

#container{ font-family: 'Noto Sans JP', sans-serif; color: var(--navy); overflow: hidden; padding-bottom: 80px; width: 1220px; margin: 0 auto; overflow: hidden;}
#container p:not([class]){ line-height: 2; font-feature-settings: "palt";}
#container h2,
#container h3,
#container h4,
#container h5,
#container h6,
#container li{ font-feature-settings: "palt";}
#container .u-caution{ font-size: 12px; line-height: 1.6; color: #666666; margin-top: 50px; }

@media screen and (width < 750px){
[id] { scroll-margin-top: 60px; }

#container{ width: 100%; padding-bottom: var(--comp-100);}
#container .u-caution{ font-size: var(--comp-20); margin: var(--comp-50) var(--comp-60) 0; }
}

/*-- MAIN --*/
#main{ min-height: 600px; background-image: url(../img/main-pc.webp); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 20px 70px 60px; display: flex; width: 100%; flex-direction: column; justify-content: space-between; box-sizing: border-box;}
#main hgroup{ text-align: center; color: #fff; font-weight: 900; display: flex; flex-direction: column; align-items: center; width: 100%;}
#main hgroup::after{ content: ""; background-image: url(../img/ttl-book.svg); background-repeat: no-repeat; background-position: center bottom; background-size: contain; display: block; width: 590px; aspect-ratio: 590 / 30; margin: 15px auto 0; }
#main hgroup p{ font-size: 46px; color: inherit; font-weight: inherit; position: relative; padding: 20px 42px 0; letter-spacing: 0.1em; overflow: hidden; line-height: 1 !important;}
#main hgroup p span,
#main hgroup h1 span{ display: inline-block; transform: translate(0, 101%); animation: slideUp .8s ease forwards; line-height: 1.4;}
#main hgroup p span{ animation-delay: 0.5s;}
#main hgroup h1 span{ animation-delay: 1.2s;}
#main hgroup p::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: 55px; position: absolute; left: 0; top: 0; background-image: url(../img/ttl-light.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; animation: fadein 1.2s step-start forwards; animation-delay: 1.2s; opacity: 0;}
#main hgroup h1{ font-size: 60px; color: inherit; font-weight: inherit; margin: 0; letter-spacing: 0.1em; line-height: 1; overflow: hidden;}
#main .anchorList{ width: 100%; display: flex; width: 1000px; margin: 120px auto 0; gap: 50px;}
#main .anchorList li{ flex: 1;}
#main .anchorList a{ display: flex; background-color: #fff; height: 100%; text-decoration: none; border-radius: 15px; box-sizing: border-box; padding: 20px 25px 50px; gap: 10px; align-items: center; position: relative; transition: all 0.3s ease;}
#main .anchorList a::before{ content: ""; height: 50px; aspect-ratio: 1 / 1; display: block; background-color: var(--blue); transition: all 0.3s ease;}
#main .anchorList a::after{ content: ""; display: block; width: 14px; aspect-ratio: 1 / 1; border-bottom: 2px solid var(--blue); border-left: 2px solid var(--blue); transform: rotate(-45deg) translateX(-50%); position: absolute; left: 50%; bottom: 30px; transition: all 0.3s ease; }
#main .anchorList li:nth-child(1) a::before{ mask-image: url(../img/icon-glossary-b.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;}
#main .anchorList li:nth-child(2) a::before{ mask-image: url(../img/icon-flag-b.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;}
#main .anchorList li:nth-child(3) a::before{ mask-image: url(../img/icon-car-b.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;}
#main .anchorList a span{ color: var(--base-font-color); font-weight: 700; font-size: 20px; display: block; width: calc(100% - 10px - 55px); line-height: 1.5; transition: all 0.3s ease;}

@media (any-hover: hover) {
#main .anchorList a:hover{ background-color: #333333; transform: translateY(10px);}
#main .anchorList a:hover::before{ background-color: #fff;}
#main .anchorList a:hover::after{ border-bottom: 2px solid #fff; border-left: 2px solid #fff;}
#main .anchorList a:hover span{ color: #fff;}
}

@media screen and (width < 750px){
#main{ aspect-ratio: 740 / 890; min-height: 0; background-image: url(../img/main-sp.webp); background-repeat: no-repeat; background-position: center bottom; background-size: cover; padding: var(--comp-50) var(--comp-40) var(--comp-40); display: block;}
#main hgroup::after{ width: 79.279279279279279vw; margin: var(--comp-10) auto 0; }
#main hgroup p{ font-size: var(--comp-46); padding: var(--comp-25) var(--comp-40) 0;}
#main hgroup p::after{ width: var(--comp-55); }
#main hgroup h1{ font-size: var(--comp-60); }
#main .anchorList{ width: 100%; flex-wrap: wrap; margin: var(--comp-60) auto 0; gap: var(--comp-40);}
#main .anchorList li{ flex: none; width: 100%;}
#main .anchorList a{ height: 100%; border-radius: 15px; box-sizing: border-box; padding: var(--comp-20); gap: var(--comp-15); align-items: center; width: 100%; flex-wrap: wrap;}
#main .anchorList a::before{ height: var(--comp-40); }
#main .anchorList a::after{ width: var(--comp-12); transform: rotate(-45deg); left: auto; bottom: auto; position: relative; }
#main .anchorList a span{ font-size: var(--comp-24); width: calc(100% - var(--comp-30) - var(--comp-40) - var(--comp-20) - 1px); }
}

@media screen and (width < 750px) and (any-hover: hover){
#main .anchorList a:hover{ transform: translateY(var(--comp-10));}
}


/*-- leadBox --*/
#container .leadBox{ text-align: center; padding: 80px 0 100px; letter-spacing: 0.05em; }
#container .leadBox .catch{ color: var(--blue); font-weight: 900; font-size: 40px; display: flex; justify-content: center; gap: 30px; margin-bottom: 40px;}
#container .leadBox .catch::before{ content: ""; display: block; background-image: url(../img/line-l.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; aspect-ratio: 34 / 48; width: 34px;}
#container .leadBox .catch::after{ content: ""; display: block; background-image: url(../img/line-r.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; aspect-ratio: 34 / 48; width: 34px;}
#container .leadBox .lead{ font-weight: 700; font-size: 18px; line-height: 2;}
#container .leadBox .lead .grayline{ color: #666666; font-size: 20px; background: linear-gradient(transparent 64%, #d2e9fb 0%); display: inline-block; margin: 25px 0;}
#container .leadBox .lead .large{ font-size: 22px; display: inline-block; margin-top: 20px;}
#container .leadBox + .contentSection{ margin-top: 0;}

@media screen and (width < 750px){
#container .leadBox{ padding: var(--comp-100) var(--comp-60) var(--comp-120); box-sizing: border-box;}
#container .leadBox .catch{ font-size: var(--comp-40); gap: var(--comp-10); margin-bottom: var(--comp-60); align-items: flex-end;}
#container .leadBox .catch::before,
#container .leadBox .catch::after{ width: var(--comp-50);}
#container .leadBox .lead{ font-size: var(--comp-24);}
#container .leadBox .lead .grayline{ font-size: var(--comp-26); margin: 0;}
#container .leadBox .lead .grayline + .grayline{ margin-bottom: 1em;}
#container .leadBox .lead .large{ font-size: var(--comp-28); margin-top: var(--comp-20);}
#container .leadBox + .contentSection{ margin-top: 0;}
}

/*-- content --*/
#container .contentSection{ margin-top: 100px;}
#container .contentSection .contentTtl{ font-weight: bold; position: relative; width: 50%; margin: 0 auto 0 0; padding: 1.3em 2em 1.3em 60px; border-radius: 0 1.5rem 1.5rem 0; line-height: 1.4;  display: flex; align-items: center; box-sizing: border-box; gap: 20px;}
#container .contentSection .contentTtl::before{ border-radius: 0 1.5rem 1.5rem 0; left: calc(4rem * -1); border-top: 10px #ccc solid;border-right: 10px #ccc solid; border-bottom: 10px solid #ccc; content: ""; position: absolute; top: 0; right: 0; bottom: 0; pointer-events: none; background-color: #fff;}
#container .contentSection .contentTtl span{ position: relative;}
#container .contentSection .contentTtl span.icon{ display: inline-block; height: 36px; aspect-ratio: 1 / 1;}
#container .contentSection .contentTtl span.icon img{ object-fit: contain; width: 100%; height: 100%;}
#container .contentSection .contentTtl span.text{ font-size: 22px;}
#container .contentSection .bgBox{ background-color: var(--bg-gray); padding: 100px 120px 60px; box-sizing: border-box; margin-top: -45px;}
#container .contentSection .bgBox p{ font-size: 16px;}
#container .contentSection .bgBox > p.catch{ margin-bottom: 60px; line-height: 2; font-size: 18px;}
#container .contentSection .lineTtl{ margin: 50px auto 15px;}
#container .contentSection .lineTtl:first-child{ margin-top: 0;}
#container .contentSection .lineTtl span{ display: inline-block; border-bottom: 2px solid var(--blue); font-size: 20px; line-height: 1.5; padding-bottom: 8px; }

#container .plusBox{ margin-top: 80px; padding-top: 60px; position: relative;}
#container .plusBox::before{ content: ""; display: block; width: 604px; aspect-ratio: 604 / 8; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-image: url(../img/line-wave-pc.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}
#container .plusBox hgroup{ margin-bottom: 35px;}
#container .plusBox hgroup p{ display: inline-block; background-color: var(--pink); color: #fff; border-radius: 50px; font-size: 20px; font-weight: 900; padding: 10px 15px; line-height: 1.2; position: relative; letter-spacing: 0.08em;}
#container .plusBox hgroup p::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: 8px; position: absolute; left: 40px; bottom: -7px; background-color: var(--pink); clip-path: polygon(0 0, 100% 0, 100% 100%);}
#container .plusBox hgroup h3{ color: var(--blue); font-size: 30px; font-weight: 900; margin: 10px auto 0; }
#container .plusBox hgroup + *{ margin-top: 0 !important;}

#container .imgFlexBox{ display: flex; column-gap: 40px; margin: 60px auto 0;}
#container .imgFlexBox figure{ width: 300px; margin: 0;}
#container .imgFlexBox figure img{ display: block; width: 100%;}
#container .imgFlexBox figure figcaption{ text-align: center; margin-top: 20px; font-size: 16px;}

#container .flexList{ display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: 40px; row-gap: 60px;}
#container .flexList.center{ justify-content: center;}
#container .flexList li{  width: 300px; margin: 0; text-align: left;}
#container .flexList li figure{ width: 100%; margin: 0 auto;}
#container .flexList li figure + .lineTtl,
#container .flexList li .slideImg + .lineTtl{ margin-top: 25px;}


@media screen and (width < 750px){
#container .contentSection{ margin-top: var(--comp-120);}
#container .contentSection .contentTtl{ width: calc(100% - var(--comp-80)); padding: 1.4em 1.5em 1.4em var(--comp-20); gap: var(--comp-20);}
#container .contentSection .contentTtl::before{ border-radius: 0 var(--comp-50) var(--comp-50) 0; left: calc(4rem * -1); border-top: var(--comp-20) #ccc solid; border-right: var(--comp-20) #ccc solid; border-bottom: var(--comp-20) solid #ccc; }
#container .contentSection .contentTtl span.icon{ height: var(--comp-50);}
#container .contentSection .contentTtl span.text{ font-size: var(--comp-32);}
#container .contentSection .bgBox{ background-color: var(--bg-gray); padding: var(--comp-160) var(--comp-60) var(--comp-120); box-sizing: border-box; margin-top: calc(var(--comp-80) * (-1));}
#container .contentSection .bgBox p{ font-size: var(--comp-22);}
#container .contentSection .bgBox > p.catch{ margin-bottom: var(--comp-80); font-size: var(--comp-26);}
#container .contentSection .lineTtl{ margin: var(--comp-60) auto var(--comp-15);}
#container .contentSection .lineTtl:first-child{ margin-top: 0;}
#container .contentSection .lineTtl span{ font-size: var(--comp-28); padding-bottom: var(--comp10); }

#container .plusBox{ margin-top: var(--comp-80); padding-top: var(--comp-85); }
#container .plusBox::before{ width: 67.567567567567567vw; aspect-ratio: 500 / 8; background-image: url(../img/line-wave-sp.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}
#container .plusBox hgroup{ margin-bottom: var(--comp-40);}
#container .plusBox hgroup p{ border-radius: 80px; font-size: var(--comp-22); padding: var(--comp-10) var(--comp-15); }
#container .plusBox hgroup p::after{ width: var(--comp-14); position: absolute; left: var(--comp-35); bottom: calc(var(--comp-14) * (-1) + 1px);}
#container .plusBox hgroup h3{ font-size: var(--comp-34); margin: var(--comp-10) auto 0; }

#container .imgFlexBox{ flex-wrap: wrap; row-gap: var(--comp-60); margin: var(--comp-60) auto 0;}
#container .imgFlexBox figure{ width: 100%; }
#container .imgFlexBox figure img{ display: block; width: 100%;}
#container .imgFlexBox figure figcaption{ text-align: center; margin-top: var(--comp-25); font-size: var(--comp-24);}

#container .flexList{ row-gap: var(--comp-80);}
#container .flexList.center{ justify-content: center;}
#container .flexList li{  width: 100%; margin: 0; text-align: left;}
#container .flexList li figure{ width: 100%; margin: 0 auto;}
#container .flexList li figure + .lineTtl,
#container .flexList li .slideImg + .lineTtl{ margin-top: var(--comp-20);}
}

@media screen and (width >= 750px){
.sp{ display: none !important;}
}

@media screen and (width < 750px){
.pc{ display: none !important;}
}

/*-- ANIMATION --*/
.fadein{ opacity : 0; transform: translate(-10px, 0); transition : transform 800ms, opacity 800ms;}
.fadeDown{ opacity : 0; transform: translate(0, -10px); transition : transform 800ms, opacity 800ms;}

.fadein.scrollin,
.fadeDown.scrollin{ opacity : 1; transform : translate(0, 0);}

@keyframes fadeDown {
0% { opacity : 0; transform: translate(0, -10px); }
100% { opacity : 1; transform: translate(0, 0); }
}

@keyframes fadein {
0%, 50% { opacity : 0;  }
25%, 75%, 100% { opacity : 1; }
}

@keyframes slideUp {
0% { transform: translate(0, 101%); }
100% { opacity : 1; transform: translate(0, 0); }
}