:root{
    /*content color*/
    --blue: #027cc4;
    --green: #24ab7f;
    --salmon: #ef6b71;
    --lightsalmon: #f98e75;
    --purple: #b3b3e2;
    --mint: #68b4ad;
    --lime: #f3ffd1;
    --yellow: #f9ff6b;
    --noto-sans:'Noto Sans JP', sans-serif;

    --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;
}

img{ height: auto;}

/*-- heading --*/
.plan-fee-visual{ aspect-ratio: 1920 / 600; width: 100%; min-height: 600px; margin: 0 auto; position: relative;}
.plan-fee-visual hgroup{ position: relative; z-index: 2; height: 100%; margin: 0 auto; text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 600px;}
.plan-fee-visual hgroup .catch{ font-family: var(--noto-sans); font-size: 40px; color: #fff; font-weight: 900; letter-spacing: 0.2em; position: relative; padding-bottom: 19px; filter: drop-shadow(2px 2px 6px #fff) drop-shadow(-2px 2px 6px #fff) drop-shadow(-2px -2px 6px #fff) drop-shadow(2px -2px 6px #fff); margin: 0 auto 0;}
.plan-fee-visual hgroup .catch::after{ content: ""; display: block; aspect-ratio: 15 / 20; width: 15px; clip-path: polygon(0 0, 100% 0, 50% 100%); background-color: var(--mint); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.plan-fee-visual hgroup .catch span{ background-color: var(--mint); box-sizing: border-box; display: inline-block; line-height: 1.4; padding: 10px 40px; border-radius: 100px;}
.plan-fee-visual hgroup h1{ color: var(--green); font-size: 120px; font-family: var(--noto-sans); font-weight: 900; filter: drop-shadow(0px 0px 6px #fff); filter: drop-shadow(2px 2px 6px #fff) drop-shadow(-2px 2px 6px #fff) drop-shadow(-2px -2px 6px #fff) drop-shadow(2px -2px 6px #fff); margin: 0;}
.plan-fee-visual hgroup h1 small{ color: var(--green); font-size: 111px; }
.plan-fee-visual figure{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%;}
.plan-fee-visual figure img{ display: block; object-fit: cover; width: 100%; height: 100%;}

/*-- contents --*/
/*container*/
.page-fee{ background-image: url(../images/bg-pc.webp); background-repeat: repeat-y; background-position: center top; background-size: max(1920px, 100%); padding-bottom: 150px;}
.subpage-inner > .plan-fee-lead{ text-align: center; font-size: 28px; color: var(--green); font-weight: bold; line-height: 1.75; margin-bottom: 95px !important;}
.plan-fee-campaignList{ width: 1020px; margin: 0 auto 95px; display: flex; gap: 20px; }
.plan-fee-campaignList li{ flex: 1; text-align: center; position: relative; padding-bottom: 19px;}
.plan-fee-campaignList li > a,
.plan-fee-campaignList li > .noLink{ height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: 40px; box-sizing: border-box; padding: 20px 30px; background-color: #fff; color: var(--mint); font-weight: bold; transition: all ease 0.5s;}
.plan-fee-campaignList li > .noLink{ opacity: 0.6;}
.plan-fee-campaignList li.active > a{ background-color: var(--mint); color: var(--yellow);}
.plan-fee-campaignList li > a::after{ content: ""; display: block; background-color: #fff; aspect-ratio: 1 / 1; position: absolute; width: 20px; bottom: 0; left: 50%; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: 0; transition: all ease 0.5s;}
.plan-fee-campaignList li.active > a::after{ background-color: var(--mint); opacity: 1;}
.plan-fee-campaignList li .sub{ font-size: 16px; padding-bottom: 10px; position: relative; margin-bottom: 15px;}
.plan-fee-campaignList li .sub::after{ content: ""; display: block; aspect-ratio: 168 / 6; background-color: var(--mint); mask-image: url(../images/wave-g-pc.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; width: 168px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: all ease 0.5s;}
.plan-fee-campaignList li.active .sub::after{ background-color: #fff;}
.plan-fee-campaignList li .name{ font-size: 22px;}

.cautionList{ font-size: 14px; display: flex; flex-direction: column; gap: 5px; margin-top: 10px;}
.cautionList > li{ position: relative; padding-left: 1.2em; line-height: 1.75;}
.cautionList > li::before{ content: "※"; position: absolute; left: 0; top: calc(1em * (1.75 / 2)); transform: translateY(-50%);}

.plan-fee-section{ margin-top: 95px;}
.plan-fee-lead + .plan-fee-section{ margin-top: 80px;}
.plan-fee-ttl{ text-align: center; color: var(--green); font-size: 40px; padding-bottom: 20px; line-height: 1.6; margin: 0 auto 50px ; position: relative;}
.plan-fee-ttl::after{ content: ""; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-image: url(../images/wave-ttl.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; aspect-ratio: 140 / 10; width: 140px;}
.plan-fee-section-main{ display: flex; gap: 60px; flex-direction: row-reverse; align-items: flex-start; }
.plan-fee-section-main > figure{ width: 480px; border-radius: 100px; overflow: clip;}
.plan-fee-section-main > figure img{ display: block; width: 100%;}
.plan-fee-section-main > .wrap-plan-fee-slider{ width: 480px; position: relative;}
.plan-fee-section-main > .wrap-plan-fee-slider .plan-fee-slider{ border-radius: 100px; overflow: clip; margin-bottom: 25px;}
.plan-fee-section-main > .wrap-plan-fee-slider .dot{ margin-top: 25px;}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots{ position: relative; top: auto; left: auto; bottom: auto; right: auto; margin: 0 auto; display: flex; justify-content: center; gap: 20px;}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots li{ margin: 0; aspect-ratio: 1 / 1; padding: 0; position: relative; width: 15px; border-radius: 100px; overflow: clip; height: auto;}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots li button{ background-color: var(--mint); display: block; padding: 0; margin: 0; position: relative; top: auto; left: auto; bottom: auto; right: auto; width: 100%; height: 100%; opacity: 0.6; transition: all ease 0.5s;}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots li button::before{ content: none;}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots  li.slick-active button{ background-color: var(--green); opacity: 1; }
.plan-fee-section-main .textBox{ width: 480px;}
.plan-fee-section-main .textBox .catch{ font-size: 24px; font-weight: bold; color: var(--green); margin: 0 auto 25px; line-height: 1.6;}
.plan-fee-section-main .textBox .text{ line-height: 1.75; font-size: 16px;}

.subSection01{ margin-top: 80px;}
.subSectionTtl01{ text-align: center; position: relative; z-index: 2;}
.subSectionTtl01 span{ background-color: var(--green); color: #fff; font-size: 26px; padding: 8px 25px; line-height: 1.6; border-radius: 100px;}
.subSection01 .whiteBox{ background-color: #fff; box-sizing: border-box; padding: 75px 60px 60px; border-radius: 30px;}
.subSection01 .subSectionTtl01 + .whiteBox{ position: relative; z-index: 1; margin-top: calc(((26px * 0.8) + 4px ) * (-1));}
.subSection01 .pointList{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 40px; }
.subSection01 .pointList > li{ display: flex; align-items: flex-start; gap: 40px;}
.subSection01 .pointList > li:nth-child(1):before{ background-image: url(../images/point01.webp);}
.subSection01 .pointList > li:nth-child(2):before{ background-image: url(../images/point02.webp);}
.subSection01 .pointList > li:nth-child(3):before{ background-image: url(../images/point03.webp);}
.subSection01 .pointList > li:only-child::before{ content: none;}
.subSection01 .pointList > li::before{ content: ""; display: block; width: 80px; aspect-ratio: 1 / 1; background-position: center center; background-repeat: no-repeat; background-size: contain;}
.subSection01 .pointList > li .innerPointList{ flex: 1;}
.subSection01 .pointList > li .innerPointList .catch{ font-size: 20px; font-weight: bold; color: var(--green); margin: 0 auto 10px;}
.subSection01 .pointList > li .innerPointList .text{ line-height: 1.75; font-size: 16px; }
.subSection01 .simpleTable{ width: 100%; border-top: 1px solid #333; font-size: 16px; line-height: 1.75;}
.subSection01 .simpleTable div{ display: flex; gap: 30px; padding: 20px 0; border-bottom: 1px solid #333; align-items: flex-start;}
.subSection01 .simpleTable div dt{ width: 95px; color: var(--green); font-weight: bold;}
.subSection01 .simpleTable div dd{ flex: 1; }
.bnrList{ display: flex; gap: 30px; flex-direction: column; margin: 80px auto 0;}
.bnrList > li{ width: 100%;}
.bnrList > li .bnr{ border-radius: 30px; margin: 0 auto; overflow: clip;}
.bnrList > li.asoview{ background: none !important;}
.bnrList > li.asoview .bnr{ width: 600px; border: none !important;}
.bnrList > li.asoview .bnr a{ display: block; transition: all ease 0.5s;}
.bnrList > li .bnrCaution{ font-size: 14px; margin: 15px auto 0; text-align: center;}

.simpleBtnList{ display: flex; margin: 40px auto 0; gap: 130px; width: 100%; justify-content: center;}
.simpleBtnList li{ width: 400px;}
.simpleBtnList li a{ width: 100%; display: inline-block; position: relative; box-sizing: border-box; background-color: var(--mint); border-radius: 50px; color: #fff; font-weight: bold; font-size: 16px; padding: 15px 50px 13px 20px; text-align: left; transition: all ease 0.3s; border: 1px solid var(--mint);}
.simpleBtnList li a::after{ content: ""; display: block; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; position: absolute; top: 50%; right: 25px; transform: rotate(45deg) translateY(-50%); transition: all ease 0.3s;}

.simpleBtnList.type01{ display: flex; width: 800px; gap: 35px;}
.simpleBtnList.type01 li:first-child{ width: 280px;}
.simpleBtnList.type01 li:last-child{ flex: 1;}
.simpleBtnList.type01 li a{ width: auto; min-width: 280px; max-width: 100%;}
.simpleBtnList.type01 li:last-child a{ width: 100%; }

/*-- ページトップ --*/
#page-top{ width: 80px; display:none; position:fixed; right: 20px; bottom: 22px; z-index:200;}
#page-top p{ margin:0; padding:0;}
#page-top p img{ width: 100%;}
#move-page-top{ text-decoration:none; display:block; cursor:pointer; transition: opacity 0.5s;}

/*-- hover --*/
@media (any-hover: hover) {
.plan-fee-campaignList li > a:hover{ background-color: var(--mint); color: var(--yellow);}
.plan-fee-campaignList li > a:hover::after{ background-color: var(--mint); opacity: 1;}
.plan-fee-campaignList li > a:hover .sub::after{ background-color: #fff;}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots  li button:hover{ background-color: var(--green); opacity: 1; }
.simpleBtn a:hover{ color: var(--mint); background-color: #fff;}
.simpleBtnList li a:hover::after{ border-color: var(--mint);}
.simpleBtnList li a:hover{ color: var(--mint); background-color: #fff;}
.bnrList li.asoview .bnr a:hover{ opacity: 0.7;}
#move-page-top:hover{ opacity: 0.8;}
}

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

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

/*-- heading --*/
.plan-fee-visual{ aspect-ratio: 740 / 800; width: 100%; min-height: 0; margin: 0 auto; position: relative;}
.plan-fee-visual hgroup{ position: relative; z-index: 2; height: 100%; margin: 0 auto; text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100%; aspect-ratio: 740 / 800;     min-height: 100%;}
.plan-fee-visual hgroup .catch{ font-family: var(--noto-sans); font-size: var(--comp-36); color: #fff; font-weight: 900; letter-spacing: 0.2em; position: relative; padding-bottom: calc(var(--comp-20) - 1px); filter: drop-shadow(2px 2px 6px #fff) drop-shadow(-2px 2px 6px #fff) drop-shadow(-2px -2px 6px #fff) drop-shadow(2px -2px 6px #fff); margin: 0 auto 0;}
.plan-fee-visual hgroup .catch::after{ content: ""; display: block; aspect-ratio: 15 / 20; width: var(--comp-15); clip-path: polygon(0 0, 100% 0, 50% 100%); background-color: var(--mint); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.plan-fee-visual hgroup .catch span{ background-color: var(--mint); box-sizing: border-box; display: inline-block; line-height: 1.4; padding: var(--comp-10) var(--comp-40); border-radius: 100px;}
.plan-fee-visual hgroup h1{ color: var(--green); font-size: var(--comp-100); font-family: var(--noto-sans); font-weight: 900; filter: drop-shadow(0px 0px 6px #fff); filter: drop-shadow(2px 2px 6px #fff) drop-shadow(-2px 2px 6px #fff) drop-shadow(-2px -2px 6px #fff) drop-shadow(2px -2px 6px #fff); margin: 0;}
.plan-fee-visual hgroup h1 small{ color: var(--green); font-size: var(--comp-100); }
.plan-fee-visual figure{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%;}
.plan-fee-visual figure img{ display: block; object-fit: cover; width: 100%; height: 100%;}
.subpage-inner.plan-fee{ margin-top: var(--comp-80);}

/*-- contents --*/
/*container*/
.page-fee{ background-image: url(../images/bg-sp.webp); background-repeat: repeat-y; background-position: center top; background-size: 100%; padding-bottom: var(--comp-150);}
.subpage-inner > .plan-fee-lead{ text-align: center; font-size: min(var(--comp-28), 22px); color: var(--green); font-weight: bold; line-height: 1.75; margin-bottom: var(--comp-70) !important;}
.plan-fee-campaignList{ width: 100%; margin: 0 auto var(--comp-95); display: flex; flex-direction: column; gap: var(--comp-20); }
.plan-fee-campaignList li{ flex: 1; text-align: center; position: relative; padding-bottom: 0;}
.plan-fee-campaignList li > a,
.plan-fee-campaignList li > .noLink{ height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: var(--comp-30); box-sizing: border-box; padding: var(--comp-20) var(--comp-30); background-color: #fff; color: var(--mint); font-weight: bold; transition: all ease 0.5s;}
.plan-fee-campaignList li > .noLink{ opacity: 0.6;}
.plan-fee-campaignList li.active > a{ background-color: var(--mint); color: var(--yellow);}
.plan-fee-campaignList li > a::after{ content: none;}
.plan-fee-campaignList li .sub{ font-size: min(var(--comp-22), 14px); padding-bottom: var(--comp-15); position: relative; margin-bottom: var(--comp-10);}
.plan-fee-campaignList li .sub::after{ content: ""; display: block; aspect-ratio: 168 / 6; background-color: var(--mint); mask-image: url(../images/wave-g-pc.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; width: auto; height: var(--comp-10); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.plan-fee-campaignList li .name{ font-size: min(var(--comp-28), 22px);}

.cautionList{ font-size: min(var(--comp-22), 14px); display: flex; flex-direction: column; gap: var(--comp-5); margin-top: var(--comp-20);}
.cautionList > li{ position: relative; padding-left: 1.2em; line-height: 1.75;}
.cautionList > li::before{ content: "※"; position: absolute; left: 0; top: calc(1em * (1.75 / 2)); transform: translateY(-50%);}

.plan-fee-section{ margin-top: var(--comp-120);}
.plan-fee-lead + .plan-fee-section{ margin-top: var(--comp-80);}
.plan-fee-ttl{ text-align: center; color: var(--green); font-size: min(var(--comp-36), 30px); padding-bottom: var(--comp-25); line-height: 1.6; margin: 0 auto var(--comp-40); position: relative;}
.plan-fee-ttl::after{ content: ""; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-image: url(../images/wave-ttl.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; aspect-ratio: 140 / 10; width: auto; height: 1.5vw;}
.plan-fee-section-main{ display: flex; gap: var(--comp-40); flex-direction: column; align-items: flex-start; }
.plan-fee-section-main > figure{ width: 100%; border-radius: var(--comp-80); overflow: clip;}
.plan-fee-section-main > figure img{ display: block; width: 100%;}
.plan-fee-section-main > .wrap-plan-fee-slider{ width: 100%; position: relative;}
.plan-fee-section-main > .wrap-plan-fee-slider .plan-fee-slider{ border-radius: var(--comp-80); overflow: clip; margin-bottom: var(--comp-25);}
.plan-fee-section-main > .wrap-plan-fee-slider .dot{ margin-top: var(--comp-20);}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots{ position: relative; top: auto; left: auto; bottom: auto; right: auto; margin: 0 auto; display: flex; justify-content: center; gap: var(--comp-30);}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots li{ margin: 0; aspect-ratio: 1 / 1; padding: 0; position: relative; width: var(--comp-20); border-radius: 100px; overflow: clip; height: auto;}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots li button{ background-color: var(--mint); display: block; padding: 0; margin: 0; position: relative; top: auto; left: auto; bottom: auto; right: auto; width: 100%; height: 100%; opacity: 0.6; transition: all ease 0.5s;}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots li button::before{ content: none;}
.plan-fee-section-main > .wrap-plan-fee-slider .dot .slick-dots  li.slick-active button{ background-color: var(--green); opacity: 1; }
.plan-fee-section-main .textBox{ width: 100%; box-sizing: border-box; padding: 0 var(--comp-40); margin: 0 auto;}
.plan-fee-section-main .textBox .catch{ font-size: min(var(--comp-30), 24px); font-weight: bold; color: var(--green); margin: 0 auto var(--comp-15); line-height: 1.6;}
.plan-fee-section-main .textBox .text{ line-height: 1.75; font-size: var(--comp-22);}

.subSection01{ margin-top: var(--comp-60);}
.subSectionTtl01{ text-align: center; position: relative; z-index: 2;}
.subSectionTtl01 span{ background-color: var(--green); color: #fff; font-size: min(var(--comp-28), 22px); padding: var(--comp-10) var(--comp-25); line-height: 1.6; border-radius: var(--comp-30);}
.subSection01 .whiteBox{ background-color: #fff; box-sizing: border-box; padding: var(--comp-80) var(--comp-40) var(--comp-60); border-radius: var(--comp-40);}
.subSection01 .subSectionTtl01 + .whiteBox{ position: relative; z-index: 1; margin-top: calc(((min(var(--comp-28), 22px) * 0.8) + var(--comp-10)) * (-1));}
.subSection01 .pointList{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--comp-60); }
.subSection01 .pointList > li{ display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--comp-30); row-gap: var(--comp-30);}
.subSection01 .pointList > li:nth-child(1):before{ background-image: url(../images/point01.webp);}
.subSection01 .pointList > li:nth-child(2):before{ background-image: url(../images/point02.webp);}
.subSection01 .pointList > li:nth-child(3):before{ background-image: url(../images/point03.webp);}
.subSection01 .pointList > li::before{ content: ""; display: block; width: var(--comp-90); aspect-ratio: 1 / 1; background-position: center center; background-repeat: no-repeat; background-size: contain; order: 1;}
.subSection01 .pointList > li:only-child::before{ content: none;}
.subSection01 .pointList > li .innerPointList{ display: contents;}
.subSection01 .pointList > li .innerPointList .textBox{ order: 3; width: 100%;}
.subSection01 .pointList > li .innerPointList .catch{ font-size: min(var(--comp-26), 20px); font-weight: bold; color: var(--green); margin: 0; order: 2; width: calc(100% - var(--comp-90) - var(--comp-30) - 1px); padding-top: var(--comp-10);}
.subSection01 .pointList > li .innerPointList .text{ line-height: 1.75; font-size: min(var(--comp-24), 16px); }
.subSection01 .simpleTable{ width: 100%; border-top: 1px solid #333; font-size: min(var(--comp-24), 16px); line-height: 1.75;}
.subSection01 .simpleTable div{ display: flex; flex-direction: column; gap: var(--comp-5); padding: var(--comp-30) 0; border-bottom: 1px solid #333; align-items: flex-start;}
.subSection01 .simpleTable div dt{ width: 95px; color: var(--green); font-weight: bold; font-size: min(var(--comp-26), 18px);}
.subSection01 .simpleTable div dd{ flex: 1; }
.bnrList{ display: flex; gap: var(--comp-30); flex-direction: column; margin: var(--comp-60) auto 0;}
.bnrList > li{ width: 100%;}
.bnrList > li .bnr{ border-radius: var(--comp-30); margin: 0 auto; overflow: clip; width: 100%;}
.bnrList > li.asoview .bnr{ width: 100%;}
.bnrList > li.asoview .bnr a{ display: block; transition: all ease 0.5s;}
.bnrList > li .bnrCaution{ font-size: min(var(--comp-22), 14px); margin: var(--comp-20) auto 0; text-align: center;}

.simpleBtnList{ flex-wrap: wrap; margin: min(var(--comp-80), 60px) auto 0; gap: min(var(--comp-40), 40px); width: 100%; max-width: calc(100vw - (var(--comp-40) * 4))}
.simpleBtnList li{ width: 100%;}
.simpleBtnList li a{ width: 100%; border-radius: min(var(--comp-45), 45px); font-size: min(var(--comp-28), 16px); padding: min(var(--comp-30), 15px) min(var(--comp-100), 50px) min(var(--comp-30), 15px) min(var(--comp-50), 20px); }
.simpleBtnList li a::after{ top: 50%; right: 25px; }

.simpleBtnList.type01{ width: min(75vw, 560px); max-width: 100%; flex-wrap: wrap; gap: min(var(--comp-40), 35px); margin: var(--comp-60) auto 0;}
.simpleBtnList.type01 li:first-child{ width: 100%;}
.simpleBtnList.type01 li:last-child{ flex: none;}
.simpleBtnList.type01 li a{ width: auto; min-width: 100%; max-width: 100%;}
.simpleBtnList.type01 li:last-child a{ width: 100%; }


/*-- ページトップ --*/
#page-top{ width: 60px; display:none; position:fixed; right: 20px; bottom: 22px; z-index:200;}
#page-top p{ margin:0; padding:0;}
#page-top p img{ width: 100%;}
#move-page-top{ text-decoration:none; display:block; cursor:pointer; transition: opacity 0.5s;}

}