/*
common
-------------------*/
:root{
    /*content color*/
    --green: #059B66;
	--lightgreen: #F4F8F1;

    --comp-660: 89.1891891891891vw;
    --comp-580: 78.3783783783783vw;
    --comp-540: 72.9729729729729vw;
    --comp-520: 70.2702702702702vw;
    --comp-500: 67.5675675675675vw;
    --comp-480: 64.8648648648648vw;
    --comp-400: 54.054054054054vw;
    --comp-360: 48.6486486486486vw;
    --comp-350: 47.2972972972972vw;
    --comp-340: 45.9459459459459vw;
    --comp-330: 44.5945945945945vw;
    --comp-300: 40.5405405405405vw;
    --comp-280: 37.83783783783784vw;
    --comp-260: 35.1351351351351vw;
    --comp-250: 33.7837837837837vw;
    --comp-240: 32.4324324324324vw;
    --comp-225: 30.4054054054054vw;
    --comp-220: 29.7297297297297vw;
    --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-96: 12.97297297297297vw;
    --comp-88: 11.89189189189189vw;
    --comp-86: 11.62162162162162vw;
    --comp-68: 9.189189189189189vw;
    --comp-64: 8.648648648648648vw;
    --comp-62: 8.378378378378378vw;
    --comp-58: 7.837837837837837vw;
    --comp-57: 7.702702702702707vw;
    --comp-56: 7.567567567567567vw;
    --comp-54: 7.297297297297297vw;
    --comp-52: 7.027027027027027vw;
    --comp-48: 6.486486486486486vw;
    --comp-46: 6.216216216216216vw;
    --comp-44: 5.945945945945945vw;
    --comp-43: 5.81081081081081vw;
    --comp-42: 5.675675675675675vw;
    --comp-39: 5.270270270270270vw;
    --comp-38: 5.135135135135135vw;
    --comp-36: 4.864864864864864vw;
    --comp-34: 4.594594594594594vw;
    --comp-33: 4.459459459459459vw;
    --comp-32: 4.324324324324324vw;
    --comp-28: 3.783783783783783vw;
    --comp-27: 3.648648648648648vw;
    --comp-26: 3.513513513513513vw;
    --comp-24: 3.243243243243243vw;
    --comp-22: 2.972972972972972vw;
    --comp-21: 2.837837837837837vw;
    --comp-19: 2.567567567567567vw;
    --comp-18: 2.432432432432432vw;
    --comp-17: 2.297297297297297vw;
    --comp-16: 2.162162162162162vw;
    --comp-14: 1.891891891891891vw;
    --comp-13-5: 1.82432432432432432vw;
    --comp-12: 1.621621621621621vw;
    --comp-8: 1.08108108108108108vw;
    --comp-7: 0.94594594594594594vw;
    --comp-4: 0.54054054054054054vw;
    --comp-3: 0.40540540540540540vw;
}

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

@media (width <= 750px) {
*[id]{ scroll-margin-top: calc(60px + min(var(--comp-15), 15px));}
.pc{ display: none !important; white-space: pre!important;}
}

img{ height: auto;}

.secContent{ min-width: 1200px; width: 100%;}
#secVisual{ height: 372px; width: 100%; }
#secVisual img{ display: block; object-fit: cover; width: 100%; height: 100%;}
#secVisual + *{ margin-top: 70px;}

section:has( .btm-Caution){ margin-top: 110px;}

/*-- subSection --*/
.subSection{ margin-top: 85px;}
.subSection > *{ width: 850px; margin-inline: auto;}
.bandTtl{ background-color: var(--green); color: #fff; border-radius: 6px; box-sizing: border-box; padding: 25px; line-height: 1.75; font-weight: bold; font-size: 20px; }
.bandTtl + p:not([class]){ margin-top: 20px; font-size: 17px; line-height: 1.75; font-weight: 500;}
.cs{ margin-top: 30px; font-size: 24px; line-height: 1.75; font-weight: 500; text-align: center; color: #979797;}

/*-- pageIntroSection --*/
.pageIntroSection{ width: 1020px; margin-inline: auto;}
.pageIntroSection + *{ margin-top: 50px;}
.pageIntroSection > *{ width: 850px; margin-inline: auto;}
.pageIntroSection h2{ display: flex; flex-direction: column; align-items: center; gap: 25px; color: var(--green); font-size: 30px; font-weight: bold; text-align: center; margin-bottom: 50px;}
.pageIntroSection h2 i{ width: 90px;}
.pageIntroSection h2 span{ display: block; line-height: 1.8;}
.pageIntroSection figure{ border-radius: 20px; overflow: hidden;}
.pageIntroSection figure img{ display: block;}
.pageIntroSection .textBox{ margin-top: 50px; font-weight: 500;}
.pageIntroSection .textBox h3{ color: var(--green); font-weight: bold; font-size: 20px; margin: 50px auto 30px; line-height: 1.8;}
.pageIntroSection .textBox p{ font-size: 17px; line-height: 1.8;}
.pageIntroSection .textBox p + p{ margin-top: 2em;}

/*-- greenBox --*/
.greenBox{ background-color: var(--lightgreen); width: 1020px; border-radius: 25px; margin-inline: auto; box-sizing: border-box; padding: 40px 0;}
.greenBox > *{ width: 880px; margin-inline: auto;}
.greenBox h3{ text-align: center; display: flex; flex-direction: column; color: var(--green); font-size: 31px; line-height: 1.8; margin: 0 auto 30px;}

/*-- exclamationBox --*/
.exclamationBox{ margin-top: 60px;}
.exclamationBox h4{ color: var(--green); font-weight: bold; font-size: 16px; line-height: 1.75; display: flex; gap: 8px; margin-bottom: 20px;}
.exclamationBox h4::before{ content: ""; width: 24px; aspect-ratio: 1 / 1; background-image: url(../images/icon-exclamation.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; display: block;}
.exclamationBox h4 span{ display: block; flex: 1;}
.exclamationBox .innerSpScrollBox{ font-size: 14px; font-weight: 500;}
.exclamationBox .innerSpScrollBox > *{ margin-top: 2em;}
.exclamationBox .innerSpScrollBox > *:first-child{ margin-top: 0;}
.exclamationBox .innerSpScrollBox > * a{ color: inherit; text-decoration: underline;}

/*-- btn --*/
.voiceBtn{ width: 330px; margin: 50px auto 0;}
.voiceBtn a{ display: block; background-color: var(--green); padding: 15px 50px 15px 50px; box-sizing: border-box; font-size: 17px; border-radius: 100px; width: 100%; font-weight: bold; font-size: 17px; color: #fff; text-align: center; position: relative;}
.voiceBtn a::after{ content: ""; aspect-ratio: 1 / 1; width: 23px; position: absolute; background-color: #fff; mask-image: url(../images/icon-pen.svg); mask-repeat: no-repeat; mask-position: center center; right: 20px; top: 50%; transform: translateY(-50%); }

.topBtn{ width: 1020px; margin-inline: auto; position: relative; font-weight: bold; font-size: 18px; margin-top: 110px;}
.topBtn a{ color: #fff; text-align: center; margin-bottom: 10px; width: 280px; margin-inline: auto; display: block; position: relative;}
.topBtn a > span{ background-color: #8E4405; border-radius: 50px 50px 0 50px; box-sizing: border-box; padding: 15px 10px; position: relative; z-index: 2; display: block }
.topBtn a > span i{ display: inline-block; width: 1.5em; margin-left: 5px;}
.topBtn a::after{ content: ""; display: block; position: absolute; bottom: -10px; background-color: #673E0B; z-index: 1; width: 100%; height: 100%; border-radius: 50px 50px 0 50px; box-sizing: border-box; z-index: 1;}

/*-- list --*/
.cautionList{ font-size: 14px; line-height: 1.75; color: #656565; margin-top: 30px; display: flex; flex-direction: column; gap: 0.5em;}
.cautionList li{ text-indent: -1em; padding-left: 1em; width: 100%;}
.cautionList li::before{ content: "※";}

.anchorList{ display: flex; flex-wrap: wrap; gap: 30px;}
.anchorList li{ width: calc((100% - 30px - 1px) / 2);}
.anchorList li a{ border: 1px solid var(--green); display: block; width: 100%; height: 100%; border-radius: 100px; background-color: #fff; color: var(--green); font-weight: bold; font-size: 17px; padding: 15px 50px 15px 20px; box-sizing: border-box; position: relative;}
.anchorList li a::after{ content: ""; display: block; background-color: var(--green); aspect-ratio: 12 / 9; width: 12px; position: absolute; clip-path: polygon(0 0, 100% 0, 50% 100%); right: 20px; top: 50%; transform: translateY(-50%);}

.circleList li{ text-indent: -1.2em; padding-left: 1.2em; font-size: inherit;}
.circleList li::before{ content: "●"; margin-right: 0.2em; }

/*-- accordion --*/
.innerLargeAccordionBox{ display: none;}
.largeAccordionBoxBtn{ width: 100%;}
.largeAccordionBoxBtn button{ border: 1px solid var(--green); color: var(--green); text-align: center; display: block; width: 100%; background-color: #fff; font-weight: bold; font-size: 15px; box-sizing: border-box; padding: 10px 0; cursor: pointer;}
.largeAccordionBoxBtn button::after{ content: ""; width: 0.5em; aspect-ratio: 1 / 1; margin-left: 1em; display: inline-block; border-bottom: 1px solid var(--green); border-right: 1px solid var(--green); transform: rotate(45deg) translateY(-0.3em);}
.largeAccordionBoxBtn.active button::after{ transform: rotate(-135deg) translateY(0em);}


/*
voice
-------------------*/
.voiceBox h5{ display: flex; gap: 10px; font-size: 16px; font-weight: bold; color: var(--green); margin-bottom: 20px; }
.voiceBox i{ display: inline-block; }
.voiceBox span{ display: block; flex-direction: 1;}
.voiceList div{ padding: 35px 0; border-top: 1px solid var(--green);}
.voiceList div dt{ position: relative; margin-bottom: 25px;}
.voiceList div dt::after{ content: ""; z-index: 1; position: absolute; left: 35px; bottom: -10px; display: block; aspect-ratio: 28 / 20; width: 28px; background-color: #CCEBB8; clip-path: polygon(0 0, 100% 0, 100% 100%);}
.voiceList div dt span{ display: inline-block; background-color: #CCEBB8; border-radius: 50px; font-size: 16px; font-weight: bold; padding: 10px 15px; line-height: 1.6; position: relative; z-index: 2; color: #707070;}
.voiceList div dd{ font-size: 17px; font-weight: 500; line-height: 1.75;}
.voiceList div dd b{ font-weight: bold; background-color: #FFFF88;}
.voiceList div dd figure{ max-width: 660px; margin-inline: auto; margin-top: 30px;}




@media (width <= 750px) {
.secContent{ min-width: 100%; width: 100%;}
#secVisual{ height: auto; width: 100%; }
#secVisual img{ display: block; object-fit: cover; width: 100%; height: auto;}
#secVisual + *{ margin-top: min(var(--comp-70), 70px);}

section:has( .btm-Caution){ margin-top: min(var(--comp-120), 110px);}

/*-- subSection --*/
.subSection{ margin-top: min(var(--comp-120), 50px);}
.subSection > *{ width: 90%; margin-inline: auto;}
.bandTtl{ background-color: var(--green); color: #fff; border-radius: var(--comp-15); box-sizing: border-box; padding: min(var(--comp-20), 20px) min(var(--comp-30), 25px); line-height: 1.75; font-weight: bold; font-size: min(var(--comp-34), 20px); }
.bandTtl + p:not([class]){ margin-top: min(var(--comp-40), 20px); font-size: min(var(--comp-32), 17px); line-height: 1.75; font-weight: 500;}
.cs{ margin-top: min(var(--comp-60), 30px); font-size: min(var(--comp-40), 24px); line-height: 1.75; font-weight: 500; text-align: center; color: #979797;}

/*-- pageIntroSection --*/
.pageIntroSection{ width: 90%; margin-inline: auto;}
.pageIntroSection + *{ margin-top: min(var(--comp-120), 50px);}
.pageIntroSection > *{ width: 100%; margin-inline: auto;}
.pageIntroSection h2{ display: flex; flex-direction: column; align-items: center; gap: 25px; color: var(--green); font-size: min(var(--comp-42), 22px); font-weight: bold; text-align: center; margin-bottom: min(var(--comp-40), 20px);}
.pageIntroSection h2 i{ width: var(--comp-100);}
.pageIntroSection h2 span{ display: block; line-height: 1.8;}
.pageIntroSection figure{ border-radius: var(--comp-30); overflow: hidden;}
.pageIntroSection figure img{ display: block;}
.pageIntroSection .textBox{ margin-top: min(var(--comp-50), 50px);}
.pageIntroSection .textBox h3{ color: var(--green); font-weight: bold; font-size: min(var(--comp-36), 20px); margin: min(var(--comp-50), 50px) auto min(var(--comp-30), 30px); line-height: 1.8;}
.pageIntroSection .textBox p{ font-size: min(var(--comp-32), 17px); line-height: 1.8;}
.pageIntroSection .textBox p + p{ margin-top: 2em;}

/*-- greenBox --*/
.greenBox{ background-color: var(--lightgreen); width: 100%; border-radius: 0; margin-inline: auto; box-sizing: border-box; padding: 40px 0;}
.greenBox > *{ width: 90%; margin-inline: auto;}
.greenBox h3{ text-align: left; display: flex; align-items: center; flex-direction: row; gap: min(var(--comp-20), 20px); color: var(--green); font-size: min(var(--comp-45), 31px); line-height: 1.8; margin: 0 auto min(var(--comp-30), 30px);}
.greenBox h3 i{ width: min(var(--comp-80), 60px); }
.greenBox h3 span{ flex: 1;}

/*-- exclamationBox --*/
.exclamationBox{ margin-top: min(var(--comp-80), 60px);}
.exclamationBox h4{ color: var(--green); font-weight: bold; font-size: min(var(--comp-30), 16px); line-height: 1.75; display: flex; gap: 8px; margin-bottom: 20px;}
.exclamationBox h4::before{ content: ""; width: 24px; aspect-ratio: 1 / 1; background-image: url(../images/icon-exclamation.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; display: block;}
.exclamationBox h4 span{ display: block; flex: 1;}
.exclamationBox .spScrollBox{ background-color: #fff; border: 1px solid #707070; overflow-y: auto; max-height: 90vw;}
.exclamationBox .innerSpScrollBox{ width: 90%; margin-inline: auto; padding-top: min(var(--comp-40), 30px); font-size: min(var(--comp-26), 14px); font-weight: 500;}
.exclamationBox .innerSpScrollBox > *{ margin-top: 2em; line-height: 1.75;}
.exclamationBox .innerSpScrollBox > *:first-child{ margin-top: 0;}
.exclamationBox .innerSpScrollBox > * a{ color: inherit; text-decoration: underline;}

/*-- btn --*/
.voiceBtn{ width: min(100%, 90vw); margin: min(var(--comp-50), 50px) auto 0;}
.voiceBtn a{ display: block; background-color: var(--green); padding: min(var(--comp-15), 15px) min(var(--comp-40), 40px) min(var(--comp-15), 15px) min(var(--comp-30), 30px); box-sizing: border-box; font-size: 17px; border-radius: 100px; width: 100%; font-weight: bold; font-size: min(var(--comp-32), 17px); color: #fff; text-align: center; position: relative;}
.voiceBtn a::after{ content: ""; aspect-ratio: 1 / 1; width: 1.5em; position: absolute; background-color: #fff; mask-image: url(../images/icon-pen.svg); mask-repeat: no-repeat; mask-position: center center; right: min(var(--comp-30), 30px); top: 50%; transform: translateY(-50%); }

.topBtn{ width: 70%; margin-inline: auto; position: relative; font-weight: bold; font-size: min(var(--comp-28), 18px); margin-top: min(var(--comp-120), 110px);}
.topBtn a{ color: #fff; text-align: center; margin-bottom: 10px; width: 100%; margin-inline: auto; display: block; position: relative;}
.topBtn a > span{ background-color: #8E4405; border-radius: min(var(--comp-40), 50px) min(var(--comp-40), 50px) 0 min(var(--comp-40), 50px); box-sizing: border-box; padding: min(var(--comp-15), 15px) min(var(--comp-10), 10px); position: relative; z-index: 2; display: block }
.topBtn a > span i{ display: inline-block; width: 1.2em; height: 1.2em; margin-left: 5px; vertical-align: middle;}
.topBtn a > span i img{ display: block; }
.topBtn a::after{ content: ""; display: block; position: absolute; bottom: calc(min(var(--comp-15), 10px) * (-1)); background-color: #673E0B; z-index: 1; width: 100%; height: 100%; border-radius: min(var(--comp-40), 50px) min(var(--comp-40), 50px) 0 min(var(--comp-40), 50px); box-sizing: border-box; z-index: 1;}

/*-- list --*/
.cautionList{ font-size: min(var(--comp-26), 14px); line-height: 1.75; color: #656565; margin-top: 30px; display: flex; flex-direction: column; gap: 0.5em;}
.cautionList li{ text-indent: -1em; padding-left: 1em; width: 100%;}
.cautionList li::before{ content: "※";}

.anchorList{ display: flex; flex-wrap: wrap; gap: min(var(--comp-30), 30px);}
.anchorList li{ width: 100%;}
.anchorList li a{ border: 1px solid var(--green); display: block; width: 100%; height: 100%; border-radius: 100px; background-color: #fff; color: var(--green); font-weight: bold; font-size: min(var(--comp-28), 17px); padding: min(var(--comp-15), 15px) min(var(--comp-40), 40px) min(var(--comp-15), 15px) min(var(--comp-30), 30px); box-sizing: border-box; position: relative;}
.anchorList li a::after{ content: ""; display: block; background-color: var(--green); aspect-ratio: 12 / 9; width: var(--comp-20); position: absolute; clip-path: polygon(0 0, 100% 0, 50% 100%); right: min(var(--comp-20), 20px); top: 50%; transform: translateY(-50%);}

.circleList li{ text-indent: -1.2em; padding-left: 1.2em; font-size: inherit;}
.circleList li::before{ content: "●"; margin-right: 0.2em; }

/*-- accordion --*/
.innerLargeAccordionBox{ display: none;}
.largeAccordionBoxBtn{ width: 100%;}
.largeAccordionBoxBtn button{ border: 1px solid var(--green); color: var(--green); text-align: center; display: block; width: 100%; background-color: #fff; font-weight: bold; font-size: min(var(--comp-26), 15px); box-sizing: border-box; padding: min(var(--comp-15), 10px) 0;}
.largeAccordionBoxBtn button::after{ content: ""; width: 0.5em; aspect-ratio: 1 / 1; margin-left: 1em; display: inline-block; border-bottom: 1px solid var(--green); border-right: 1px solid var(--green); transform: rotate(45deg) translateY(-0.3em);}
.largeAccordionBoxBtn.active button::after{ transform: rotate(-135deg) translateY(0em);}


/*
voice
-------------------*/
.voiceBox{ margin-top: min(var(--comp-80), 40px);}
.voiceBox h5{ display: flex; gap: 10px; font-size: min(var(--comp-30), 16px); font-weight: bold; color: var(--green); margin-bottom: 20px; }
.voiceBox i{ display: inline-block; width: min(var(--comp-60), 35px);}
.voiceBox span{ display: block; flex-direction: 1;}
.voiceList div{ padding: min(var(--comp-40), 35px) 0; border-top: 1px solid var(--green);}
.voiceList div dt{ position: relative; margin-bottom: min(var(--comp-40), 25px);}
.voiceList div dt::after{ content: ""; z-index: 1; position: absolute; left: min(var(--comp-40), 35px); bottom: calc(min(var(--comp-20), 10px) * (-1)); display: block; aspect-ratio: 28 / 20; width: min(var(--comp-40), 28px); background-color: #CCEBB8; clip-path: polygon(0 0, 100% 0, 100% 100%);}
.voiceList div dt span{ display: inline-block; background-color: #CCEBB8; border-radius: 50px; font-size: min(var(--comp-30), 16px); font-weight: bold; padding: 10px 15px; line-height: 1.6; position: relative; z-index: 2; color: #707070;}
.voiceList div dd{ font-size: min(var(--comp-32), 17px); font-weight: 500; line-height: 1.75;}
.voiceList div dd b{ font-weight: bold; background-color: #FFFF88;}
.voiceList div dd figure{ max-width: 100%s; margin-inline: auto; margin-top: min(var(--comp-30), 30px);}
}