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{
  --base-font-color: #333333;
  --suzuka: #2f93f3;
  --content-width: 1220px;
  --content-padding: 0 12px;

  --lightgray: #e5e9eb;
  --gray01: #eff1f3;
  --gray02: #e5e9eb;
}

/*---------------------------------------------
 CONTAINER
---------------------------------------------*/
#container{ font-family: 'Noto Sans JP', sans-serif; color: var(--base-font-color); width: 100%; padding-bottom: 20px; min-width: 1220px; font-size: 16px; letter-spacing: 0.05em;}
#container p:not([class]){ line-height: 1.75; font-weight: 500;}
#container .cautionSection{ border-top: 1px solid var(--lightgray); margin-top: 120px;}
#container .u-caution{ font-size: 12px; line-height: 1.6; color: #666666; margin: 120px auto 0; width: var(--content-width); padding: var(--content-padding); box-sizing: border-box; }
#container .cautionSection .u-caution{ margin-top: 80px; }
#container .btnType01{ box-sizing: border-box; margin-top: 40px;}
#container .btnType01 a{ display: block; border-radius: 60px; background-color: var(--suzuka); color: #fff; text-decoration: none; font-size: 18px; position: relative; box-sizing: border-box; padding: 30px 40px; line-height: 1; width: 320px; font-weight: 700; margin: 0 auto;}
#container .btnType01 a::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 40px;}

/*-- MAIN --*/
#container #mainVisual{ position: relative; min-height: 900px; box-sizing: border-box; padding-top: 40px;}
#container #mainVisual::before{ content: ""; display: block; width: 100%; height: 100%; background-image: url(../img/main-bg-pc.webp); background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: 0; left: 0;}
#container #mainVisual .innerMainVisual{ position: relative;}
#container #mainVisual .innerMainVisual hgroup{ margin-bottom: 80px;}
#container #mainVisual .innerMainVisual hgroup h1{ font-size: 20px; color: #fff; text-align: center; margin: 0 auto; position: relative; padding-bottom: 20px; margin-bottom: 30px;}
#container #mainVisual .innerMainVisual hgroup h1::after{ content: ""; display: block; background-color: var(--suzuka); width: 100px; height: 2px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
#container #mainVisual .innerMainVisual hgroup .wifiIcon{ width: 222px; margin: 0 auto;}
#container #mainVisual .innerMainVisual .mainCatchBox{ width: 1196px; margin: 0 auto; display: flex; gap: 40px; justify-content: center;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox{ width: 488px;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .text{ font-size: 44px; font-weight: 700; color: #fff; line-height: 1.5; letter-spacing: 0.07em; padding-left: 30px; box-sizing: border-box;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .text small{ font-size: 36px;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .text .band{ background-color: #fff; color: var(--base-font-color); font-weight: 900; font-size: 56px; display: inline-block; line-height: 1; padding: 10px 30px 15px; transform: translateX(-30px); margin: 15px 0;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .button{ padding-left: 30px; box-sizing: border-box; margin-top: 40px;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .button a{ display: block; border-radius: 60px; background-color: var(--suzuka); color: #fff; text-decoration: none; font-weight: 18px; position: relative; box-sizing: border-box; padding: 30px 40px; line-height: 1; width: 320px; font-weight: 700;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .button a::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 40px;}

#content{ display: block; }
#service,
#feature,
#howto{ background-color: var(--gray01);}
.innerSection01{ width: 1196px; margin: 0 auto;}

/*-- HEADING --*/
.wifiTtl{ text-align: center; font-size: 32px; position: relative; letter-spacing: 0.1em; margin: 0 auto 50px;}
.wifiTtl::before{ content: ""; aspect-ratio: 80 / 64; width: 80px; display: block; margin: 0 auto 10px; background-image: url(../img/icon-wifi.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; }
.simpleTtl01{ font-size: 32px; text-align: center; font-weight: 700; margin: 0 auto 30px; line-height: 1.75; }

/*-- TEXT --*/
.catch01{ text-align: center; color: var(--suzuka); font-size: 40px; font-weight: 900; letter-spacing: 0.1em;}
.lead01{ text-align: center; font-size: 20px; margin: 0 auto;}
.catch01 + .lead01{ margin-top: 25px;}
.text01{ font-size: 18px; text-align: center; margin: 2em 0;}
.caution01{ margin-top: 15px; font-size: 16px; text-align: center;}
.catch01 a,
.lead01 a,
.caution01 a{ text-decoration: underline; color: inherit;}
.t-right{ text-align: right;}

/*-- LIST --*/
.numList01{ display: flex; gap: 40px; list-style: none; padding: 0; margin: 50px auto 0;}
.numList01 li{ background-color: #fff; width: 372px; border-radius: 10px; position: relative; box-sizing: border-box; padding: 75px 25px 40px;}
.numList01 li::before{ font-size: 60px; line-height: 1; position: absolute; top: 20px; left: 20px; font-weight: bold;}
.numList01 li:nth-child(1):before{ content: "01";}
.numList01 li:nth-child(2):before{ content: "02";}
.numList01 li:nth-child(3):before{ content: "03";}
.numList01 li:nth-child(4):before{ content: "04";}
.numList01 li:nth-child(5):before{ content: "05";}
.numList01 li:nth-child(6):before{ content: "06";}
.numList01 li .text{ text-align: center; font-size: 20px; font-weight: 700; line-height: 1.75;}

.numList02{ display: flex; flex-direction: column; width: 980px; margin: 0 auto; list-style: none; padding: 0; gap: 10px;}
.numList02 li{ width: 100%; background-color: #fff; border-radius: 10px; padding: 40px 60px 40px 40px; box-sizing: border-box; display: flex; align-items: center; gap: 22px;}
.numList02 li::before{ color: #fff; background-color: var(--base-font-color); aspect-ratio: 1 / 1; font-size: 40px; line-height: 1;  font-weight: bold; width: 100px; border-radius: 100px; display: flex; align-items: center; justify-content: center; letter-spacing: 0.1em;}
.numList02 li:nth-child(1):before{ content: "01";}
.numList02 li:nth-child(2):before{ content: "02";}
.numList02 li:nth-child(3):before{ content: "03";}
.numList02 li:nth-child(4):before{ content: "04";}
.numList02 li:nth-child(5):before{ content: "05";}
.numList02 li:nth-child(6):before{ content: "06";}
.numList02 li .textBox{ width: calc(100% - 44px - 120px - 100px);}
.numList02 li .textBox h3{ font-size: 24px; font-feature-settings: "palt"; letter-spacing: 0.05em; margin: 0 auto 15px; line-height: 1.458333;}
.numList02 li figure{ width: 120px; margin: 0;}

/*-- BACKGROUND --*/
.bgBox01{ position: relative; padding-bottom: 120px;}
.bgBox01::before{ content: ""; display: block; position: absolute; bottom: 0; left: 0; height: calc(100% - 95px); width: calc(50% + 598px); background-color: var(--gray02); pointer-events: none;}
.bgBox01 > *{ position: relative; z-index: 1;}

/*-- SERVICE --*/
#service{ padding: 100px 0 30px;}

/*-- FEATURE --*/
#feature{ padding: 100px 0 0;}

/*-- COMPARISON --*/
#comparison{ padding: 120px 0; }
#comparison .scrollBox{ overflow: auto !important; margin: 0 auto; padding-bottom: 4px;}
#comparison .scrollBox .innerScroll{ width: 100%;}
.comparisonTable{ width: 980px; margin: 0 auto; border-spacing: 4px 2px; font-size: 16px;}
.comparisonTable thead th{ vertical-align: bottom; line-height: 1; padding: 0; line-height: 1.75;}
.comparisonTable thead th .inner{ display: flex; flex-direction: column; justify-content: flex-end; height: 100%; width: 100%; margin: auto 0 0; position: relative;}
.comparisonTable thead th span{ border-radius: 10px 10px 0 0; padding: 20px; background-color: #e5e9ec; position: relative; width: 100%; box-sizing: border-box; margin-top: auto; background-color: #4c4948; color: #fff; font-size: 20px;}
.comparisonTable thead th:not(.blue) span::after{ content: ""; display: block; width: 100%; background-color: #4c4948; position: absolute; bottom: -2px; left: 0; height: 2px;}
.comparisonTable tbody th{ font-size: 18px;}
.comparisonTable tbody th:not(.blank),
.comparisonTable tbody td:not(.blank){ background-color: #e5e9ec; text-align: center; padding: 20px; position: relative;}
.comparisonTable tbody td.skyBlue{ color: var(--suzuka); font-weight: 700;}
.comparisonTable tbody tr:first-child th{ border-radius: 10px 0 0 0;}
.comparisonTable thead th.blue span{ background-color: #2f93f3; color: #fff; padding: 20px 20px;}
.comparisonTable th.blue .inner::after{ content: ""; display: block; position: absolute; z-index: 2; width: 100%; height: calc(100% + 4px); box-sizing: border-box; top: -2px ; left: 0; border: 6px solid #2f93f3; border-radius: 10px 10px 0 0;}
.comparisonTable tbody td:nth-child(2)::after{ content: ""; display: block; position: absolute; z-index: 2; width: 100%; height: calc(100% + 8px); box-sizing: border-box; top: -4px ; left: 0; border-left: 6px solid #2f93f3; border-right: 6px solid #2f93f3;}
.comparisonTable tbody tr:last-child td:nth-of-type(1)::after{ border-bottom: 6px solid #2f93f3; height: calc(100% + 10px);}
.comparisonTable .w25{ width: 25%;}

/*-- HOWTO --*/
#howto{ padding: 120px 0; }
.tabBtnList{ display: flex; width: 1196px; justify-content: space-between; margin: 30px auto 55px; list-style: none; padding: 0;}
.tabBtnList li{ width: 284px; border-radius: 10px; background-color: #fff; }
.tabBtnList li button{ display: block; border: none; background: none; padding: 20px 20px 15px; position: relative; width: 100%; box-sizing: border-box; cursor: pointer;}
.tabBtnList li button::after{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; border-radius: 10px; border: 4px solid var(--suzuka); box-sizing: border-box; opacity: 0; transition: opacity ease 0.5s;}
.tabBtnList li button.active::after{ opacity: 1;}
.tabBtnList li button figure{ width: 100%; margin: 0 auto 15px;}
.tabBtnList li button p{ font-size: 16px;}
.tabBox{ display: none;}
.tabBox.active{ display: block;}
.tabBox .wrapSlide{ width: 1236px; position: relative; left: 50%; transform: translateX(-50%);}
.tabBox .wrapSlide ol{ list-style: none; padding: 0;}
.tabBox .wrapSlide .slick-track{ display: flex; align-items: normal;}
.tabBox .wrapSlide .slick-slide{ padding: 20px 20px 0; box-sizing: border-box; width: 412px; height: auto !important; position: relative;}
.tabBox .wrapSlide .slick-slide .slideInner{ display: flex; height: 100%; flex-direction: column; background-color: #fff; border-top: 2px solid #4c4948; border-radius: 0 0 10px 10px; box-sizing: border-box; padding: 50px 40px 20px; }
.tabBox .wrapSlide .slick-slide .slideInner .step{ position: absolute; top: 0; left: 20px; z-index: 2; color: #fff; box-sizing: border-box; padding: 10px 30px 10px 20px; line-height: 1; font-size: 20px; font-weight: 700; }
.tabBox .wrapSlide .slick-slide .slideInner .step::after{ content: ""; display: block; background-color: #4c4948; width: 100%; height: 100%; position: absolute; top: 0; left: 0; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 0 100% );}
.tabBox .wrapSlide .slick-slide .slideInner .step span{ position: relative; z-index: 3;}
.tabBox .wrapSlide .slick-slide .slideInner p:not([class]){ font-weight: 700 !important; font-size: 18px; margin-bottom: 40px; line-height: 1.6;}
.tabBox .wrapSlide .slick-slide .slideInner figure{ width: 100%; margin: auto 0 0;}
.tabBox .wrapSlide .pagination{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; justify-content: space-between; width: 1256px; z-index: 3;}
.tabBox .wrapSlide .pagination .slick-arrow{ background-color: var(--suzuka); border: none; aspect-ratio: 1 / 1; width: 60px; border-radius: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all ease 0.5s; border: 1px solid var(--suzuka);}
.tabBox .wrapSlide .pagination .slick-arrow.pickupPrev{ padding-left: 10px;}
.tabBox .wrapSlide .pagination .slick-arrow.pickupNext{ padding-right: 10px;}
.tabBox .wrapSlide .pagination .slick-arrow span{ display: block; aspect-ratio: 1 / 1; width: 11px; }
.tabBox .wrapSlide .pagination .slick-arrow.pickupPrev span{ border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg);}
.tabBox .wrapSlide .pagination .slick-arrow.pickupNext span{ border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
.tabBox .wrapSlide .pagination .slick-arrow.slick-disabled{ background-color: #c1dffc; border: none; pointer-events: none;}
.tabBox .dot{ margin-top: 30px;}
.tabBox .slick-dots{ position: relative; top: auto; bottom: auto; left: auto; right: auto; margin: 0 auto; display: flex; justify-content: center; gap: 15px; }
.tabBox .slick-dots li{ padding: 0; margin: 0;}
.tabBox .slick-dots li button{ padding: 0; background-color: #c1dffc; aspect-ratio: 1 / 1; display: block; width: 15px; height: auto; border-radius: 10px; transition: all ease 0.5s;}
.tabBox .slick-dots li button::before{ content: none;}
.tabBox .slick-dots li.slick-active button{ background-color: var(--suzuka); }

/*-- AREA / FAQ --*/
#area-faq{ padding: 120px 0 0;}
.areaBox{ width: 980px; margin: 0 auto;}
.grayBox{ background-color: #eff1f3; box-sizing: border-box; padding: 45px 40px;}
.lineList { margin: 0;}
.lineList dt{ display: flex; gap: 15px; align-items: flex-start; line-height: 1.75; font-size: 20px; font-weight: 700; margin: 35px 0 10px;}
.lineList dt::before{ content: ""; display: block; width: 32px; height: 2px; background-color: var(--suzuka); margin-top: 0.8em; }
.lineList dt:first-child{ margin-top: 0;}
.lineList dt:has( + dt){ margin-bottom: 0;}
.lineList dd{ font-size: 18px; padding-left: calc(32px + 15px); margin: 0;}
#faq{ padding: 100px 0 0;}
.faqBox{ width: 980px; margin: 0 auto; }
.faqBox .faqList{ margin: 0 auto; padding: 0; border-top: 1px solid #666666; line-height: 1.75;}
.faqBox .faqList > div{ border-bottom: 1px solid #666666; }
.faqBox .faqList dt button{ width: 100%; display: flex; gap: 15px; border: none; background: none; font-size: 20px; font-weight: 700; padding: 0; align-items: flex-start; position: relative; box-sizing: border-box; padding: 35px 20px 35px 0; cursor: pointer;}
.faqBox .faqList dt button::before{ content: "Q"; color: #fff; aspect-ratio: 1 / 1; background-color: #4c4948; width: 30px; font-size: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;  font-weight: bold; vertical-align: middle; font-family: 'Noto Sans JP', sans-serif; padding-bottom: 0.2em; box-sizing: border-box; line-height: 1;}
.faqBox .faqList dt button .text{ display: block; width: calc(100% - 30px - 22px - 30px); text-align: left;}
.faqBox .faqList dt button .icon{ display: block; width: 22px; position: relative; aspect-ratio: 1 / 1; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); transition: all ease 0.5s;}
.faqBox .faqList dt button .icon::before{ content: ""; display: block; width: 100%; height: 2px; background-color: #4c4948; position: absolute; top: 50%; transform: translateY(-50%); transition: all ease 0.5s;}
.faqBox .faqList dt button .icon::after{ content: ""; display: block; width: 2px; height: 100%; background-color: #4c4948; position: absolute; left: 50%; transform: translateX(-50%);}
.faqBox .faqList dt.active button .icon{ transform: translateY(-50%) rotate(90deg); }
.faqBox .faqList dt.active button .icon::before{ transform: translateY(-50%) scaleX(0); opacity: 0;}
.faqBox .faqList dd{ padding: 0 calc(20px + 22px + 15px) 30px 0; margin: 0; display: none;}
.faqBox .faqList dd .innerAnswer{ display: flex; align-items: flex-start; gap: 15px;}
.faqBox .faqList dd .innerAnswer::before{ content: "A"; align-items: center; color: #fff; aspect-ratio: 1 / 1; background-color: var(--suzuka); width: 30px; font-size: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;  font-weight: bold; vertical-align: middle; line-height: 1; font-family: 'Noto Sans JP', sans-serif;}
.faqBox .faqList dd .innerAnswer .textBox{ display: block; width: calc(100% - 30px - 15px); text-align: left; }
.faqBox .faqList dd .ttl{ font-size: 18px; margin: 25px 0 5px;}
.faqBox .faqList dd .ttl:first-child{ margin-top: 0;}
.faqBox .faqList dd .ttl:last-child{ margin-bottom: 0;}

/*-- FIXED BUTTON --*/
.fixedBox{ position: fixed; bottom: 130px; right: 0; display: flex; justify-content: flex-end; pointer-events: none; z-index: 20; opacity: 0; transition: all ease 0.5s;}
.fixedBox.active{ opacity: 1;}
.fixedBox .fixedBtn{ width: 240px; pointer-events: none;}
.fixedBox .fixedBtn a{ display: block; background-color: var(--suzuka); color: #fff; text-decoration: none; font-weight: 18px; position: relative; box-sizing: border-box; padding: 30px 20px; line-height: 1; width: 100%; font-weight: 700; margin: 0 auto; height: 80px;}
.fixedBox .fixedBtn a::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 40px;}
#move-page-top{ cursor: pointer; pointer-events: none;}
.fixedBox.active .fixedBtn{ pointer-events: all;}
.fixedBox.active #move-page-top{ cursor: pointer; pointer-events: all;}

@media (any-hover: hover) {
#container .btnType01 a,
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .button a,
.fixedBox .fixedBtn a{ transition: all ease 0.5s; box-sizing: border-box; border: 1px solid var(--suzuka);}
#container .btnType01 a::after,
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .button a::after,
.fixedBox .fixedBtn a::after{ transition: all ease 0.5s; }
#move-page-top,
.tabBox .wrapSlide .pagination .slick-arrow,
.tabBox .wrapSlide .pagination .slick-arrow.pickupPrev span,
.tabBox .wrapSlide .pagination .slick-arrow.pickupNext span{ transition: all ease 0.5s;}

#container .btnType01 a:hover,
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .button a:hover,
.fixedBox .fixedBtn a:hover{ color: var(--suzuka); background-color: #fff;  }
#container .btnType01 a:hover::after,
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .button a:hover::after,
.fixedBox .fixedBtn a:hover::after{ border-color: var(--suzuka);}
#move-page-top:hover{ opacity: 0.8;}

.tabBox .wrapSlide .pagination .slick-arrow:hover{ background-color: #fff;}
.tabBox .wrapSlide .pagination .slick-arrow.pickupPrev:hover span,
.tabBox .wrapSlide .pagination .slick-arrow.pickupNext:hover span{ border-color: var(--suzuka);}
.tabBox .slick-dots li button:hover{ background-color: var(--suzuka); }
}

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

@media screen and (max-width: 749px){
.pc{ display: none !important;}

/*---------------------------------------------
 CONTAINER
---------------------------------------------*/
:root{
    --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-66: 8.9189189189189vw;
    --comp-60: 8.1081081081081vw;
    --comp-56: 7.56756756756756vw;
    --comp-44: 5.94594594594594vw;
    --comp-42: 5.67567567567567vw;
    --comp-36: 4.86486486486486vw;
    --comp-32: 4.32432432432432vw;
    --comp-28: 3.78378378378378vw;
    --comp-27: 3.64864864864865vw;
    --comp-26-5: 3.581081081081081vw;
    --comp-24: 3.24324324324324vw;
    --comp-20: 2.70270270270270vw;
    --comp-18: 2.43243243243243vw;
    --comp-16: 2.16216216216216vw;
    --comp-12: 1.6216216216216216vw;
    --comp-8: 1.081081081081081vw;
    --comp-6: 0.81081081081081vw;
}

/*---------------------------------------------
 CONTAINER
---------------------------------------------*/
#container{ font-family: 'Noto Sans JP', sans-serif; color: var(--base-font-color); width: 100%; padding-bottom: var(--comp-20); min-width: 100%; font-size: var(--comp-24); letter-spacing: 0.05em;}
#container p:not([class]){ line-height: 1.75; font-weight: 500; font-size: var(--cmp-24);}
#container .cautionSection{ border-top: 1px solid var(--lightgray); margin-top: var(--comp-120);}
#container .u-caution{ font-size: var(--comp-20); margin: var(--comp-120) auto 0; padding: 0; width: calc(100% - var(--comp-60) - var(--comp-60));}
#container .cautionSection .u-caution{ margin-top: var(--comp-120); }
#container .btnType01{ box-sizing: border-box; margin-top: var(--comp-50)}
#container .btnType01 a{ display: block; border-radius: 100px; background-color: var(--suzuka); color: #fff; text-decoration: none; position: relative; box-sizing: border-box; padding: var(--comp-35) var(--comp-30); line-height: 1; width: 70vw; font-weight: 700; margin: 0 auto; font-size: var(--comp-24);}
#container .btnType01 a::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: var(--comp-16); border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: var(--comp-35);}
button{ font-family: inherit; color: inherit;}

/*-- MAIN --*/
#container #mainVisual{ position: relative; min-height: 0; box-sizing: border-box; padding-top: var(--comp-60); background-color: var(--gray01);}
#container #mainVisual::before{ content: ""; display: block; width: 100%; height: 100%; background-image: url(../img/main-bg-sp.webp); background-repeat: no-repeat; background-position: center top; background-size: 100%; position: absolute; top: 0; left: 0; aspect-ratio: 740 / 1060;}
#container #mainVisual .innerMainVisual{ position: relative;}
#container #mainVisual .innerMainVisual hgroup{ margin-bottom: var(--comp-30);}
#container #mainVisual .innerMainVisual hgroup h1{ font-size: var(--comp-30); color: #fff; text-align: center; margin: 0 auto; position: relative; padding-bottom: var(--comp-20); margin-bottom: var(--comp-30);}
#container #mainVisual .innerMainVisual hgroup h1::after{ content: ""; display: block; background-color: var(--suzuka); width: var(--comp-200); height: 2px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
#container #mainVisual .innerMainVisual hgroup .wifiIcon{ width: 35%; margin: 0 auto;}
#container #mainVisual .innerMainVisual .mainCatchBox{ width: 100%; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--comp-85); justify-content: center;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox{ width: 100%;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .text{ font-size: var(--comp-44); font-weight: 700; color: #fff; line-height: 1.5; letter-spacing: 0.07em; padding-left: 0; box-sizing: border-box; text-align: center; font-feature-settings: "palt"; letter-spacing: 0.1em; }
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .text small{ font-size: var(--comp-36);}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .text .band{ background-color: #fff; color: var(--base-font-color); font-weight: 900; font-size: var(--comp-56); display: inline-block; line-height: 1; padding: var(--comp-10) var(--comp-30) var(--comp-15); transform: translateX(0); margin: var(--comp-15) 0;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .button{ padding-left: 0; box-sizing: border-box; margin-top: var(--comp-50);}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .button a{ display: block; border-radius: 60px; background-color: var(--suzuka); color: #fff; text-decoration: none; font-weight: 18px; position: relative; box-sizing: border-box; padding: var(--comp-35) var(--comp-30); line-height: 1; width: 70vw; font-weight: 700; margin: 0 auto;}
#container #mainVisual .innerMainVisual .mainCatchBox .textBox .button a::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: var(--comp-16); border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: var(--comp-35);}
#container #mainVisual .innerMainVisual figure{ margin: 0 auto; width: min(74.324324324324324vw, 550px);}

#content{ display: block; }
#service,
#feature,
#howto{ background-color: var(--gray01);}
.innerSection01{ width: 83%; margin: 0 auto;}

/*-- HEADING --*/
.wifiTtl{ text-align: center; font-size: var(--comp-42); position: relative; letter-spacing: 0.05em; margin: 0 auto var(--comp-60);}
.wifiTtl::before{ content: ""; aspect-ratio: 80 / 64; width: var(--comp-90); display: block; margin: 0 auto var(--comp-15); background-image: url(../img/icon-wifi.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; }
.simpleTtl01{ font-size: var(--comp-42); text-align: center; font-weight: 700; margin: 0 auto var(--comp-50); line-height: 1.75; }

/*-- TEXT --*/
.catch01{ text-align: center; color: var(--suzuka); font-size: var(--comp-32); font-weight: 900; letter-spacing: 0.1em;}
.lead01{ text-align: left; font-size: var(--comp-24); margin: 0 auto;}
.catch01 + .lead01{ margin-top: var(--comp-30);}
.text01{ font-size: var(--comp-24); text-align: center; margin: 2em 0;}
.text01:last-child{ margin-bottom: 0;}
.caution01{ margin-top: var(--comp-20); font-size: var(--comp-20); text-align: left;}
.catch01 a,
.lead01 a,
.caution01 a{ text-decoration: underline; color: inherit;}
.t-right{ text-align: right;}

/*-- LIST --*/
.numList01{ display: flex; flex-direction: column; gap: var(--comp-40); list-style: none; padding: 0; margin: var(--comp-50) auto 0;}
.numList01 li{ background-color: #fff; width: 100%; border-radius: var(--comp-10); position: relative; box-sizing: border-box; padding: var(--comp-40) var(--comp-30); display: flex; align-items: center; gap: var(--comp-20);}
.numList01 li::before{ font-size: var(--comp-55); line-height: 1; position: relative; top: auto; left: auto; font-weight: bold;}
.numList01 li:nth-child(1):before{ content: "01";}
.numList01 li:nth-child(2):before{ content: "02";}
.numList01 li:nth-child(3):before{ content: "03";}
.numList01 li:nth-child(4):before{ content: "04";}
.numList01 li:nth-child(5):before{ content: "05";}
.numList01 li:nth-child(6):before{ content: "06";}
.numList01 li .text{ text-align: left; font-size: var(--comp-24); font-weight: 700; line-height: 1.75; flex: 1; order: 2;}
.numList01 li figure{ order: 3; aspect-ratio: 168 / 133; width: min(20vw, 168px); margin: 0;}

.numList02{ display: flex; flex-direction: column; width: 83%; margin: 0 auto; list-style: none; padding: 0; gap: var(--comp-40);}
.numList02 li{ background-color: #fff; width: 100%; border-radius: var(--comp-10); position: relative; box-sizing: border-box; padding: var(--comp-40) var(--comp-30); display: flex; align-items: center; gap: var(--comp-20);}
.numList02 li::before{ color: #fff; background-color: var(--base-font-color); aspect-ratio: 1 / 1; font-size: var(--comp-26-5); line-height: 1;  font-weight: bold; width: var(--comp-66); border-radius: 100px; display: flex; align-items: center; justify-content: center; letter-spacing: 0.1em;}
.numList02 li:nth-child(1):before{ content: "01";}
.numList02 li:nth-child(2):before{ content: "02";}
.numList02 li:nth-child(3):before{ content: "03";}
.numList02 li:nth-child(4):before{ content: "04";}
.numList02 li:nth-child(5):before{ content: "05";}
.numList02 li:nth-child(6):before{ content: "06";}
.numList02 li .textBox{ width: auto; flex: 1; }
.numList02 li .textBox h3{ font-size: var(--comp-24); font-feature-settings: "palt"; letter-spacing: 0.05em; margin: 0 auto var(--comp-10); line-height: 1.458333;}
.numList02 li p{ font-feature-settings: "palt";}
.numList02 li figure{ width: min(20vw, 168px); margin: 0;}

/*-- BACKGROUND --*/
.bgBox01{ position: relative; padding-bottom: var(--comp-90);}
.bgBox01::before{ content: ""; display: block; position: absolute; bottom: 0; left: 0; height: calc(100% - var(--comp-85)); width: 80%; background-color: var(--gray02); pointer-events: none;}
.bgBox01 > *{ position: relative; z-index: 1;}

/*-- SERVICE --*/
#service{ padding: var(--comp-90) 0 0;}

/*-- FEATURE --*/
#fea ture{ padding: var(--comp-90) 0 0;}

/*-- COMPARISON --*/
#comparison{ padding: var(--comp-90) 0; }
#comparison .scrollBox{ overflow-x: scroll !important; width: 83%; margin: 0 auto; padding-bottom: 4px;}
#comparison .scrollBox .innerScroll{ width: 200vw;}
.comparisonTable{ width: 100%; margin: 0 auto; border-spacing: 4px 2px; font-size: var(--comp-24);}
.comparisonTable thead th{ vertical-align: bottom; line-height: 1; padding: 0; line-height: 1.75;}
.comparisonTable thead th .inner{ display: flex; flex-direction: column; justify-content: flex-end; height: 100%; width: 100%; margin: auto 0 0; position: relative;}
.comparisonTable thead th span{ border-radius: var(--comp-15) var(--comp-15) 0 0; padding: var(--comp-30) var(--comp-20); background-color: #e5e9ec; position: relative; width: 100%; box-sizing: border-box; margin-top: auto; background-color: #4c4948; color: #fff; font-size: var(--comp-30);}
.comparisonTable thead th:not(.blue) span::after{ content: ""; display: block; width: 100%; background-color: #4c4948; position: absolute; bottom: -2px; left: 0; height: 2px;}
.comparisonTable tbody th{ font-size: var(--comp-30);}
.comparisonTable tbody th:not(.blank),
.comparisonTable tbody td:not(.blank){ background-color: #e5e9ec; text-align: center; padding: var(--comp-30) var(--comp-20); position: relative;}
.comparisonTable tbody td.skyBlue{ color: var(--suzuka); font-weight: 700;}
.comparisonTable tbody tr:first-child th{ border-radius: 10px 0 0 0;}
.comparisonTable thead th.blue span{ background-color: #2f93f3; color: #fff; padding: var(--comp-30) var(--comp-20);}
.comparisonTable th.blue .inner::after{ content: ""; display: block; position: absolute; z-index: 2; width: 100%; height: calc(100% + 4px); box-sizing: border-box; top: -2px ; left: 0; border: 6px solid #2f93f3; border-radius: 10px 10px 0 0;}
.comparisonTable tbody td:nth-child(2)::after{ content: ""; display: block; position: absolute; z-index: 2; width: 100%; height: calc(100% + 8px); box-sizing: border-box; top: -4px ; left: 0; border-left: 6px solid #2f93f3; border-right: 6px solid #2f93f3;}
.comparisonTable tbody tr:last-child td:nth-of-type(1)::after{ border-bottom: 6px solid #2f93f3; height: calc(100% + 10px);}
.comparisonTable .w25{ width: 25%;}

/*-- HOWTO --*/
#howto{ padding: var(--comp-90) 0; }
#howto .innerSection01{ width: 100%;}
#howto .innerSection01 .lead01,
#howto .innerSection01 .caution01{ width: 83%; margin-left: auto; margin-right: auto;}
.tabBtnList{ display: flex; width: 83%; justify-content: space-between; flex-wrap: wrap; margin: 30px auto var(--comp-60); list-style: none; padding: 0; gap: var(--comp-40);}
.tabBtnList li{ width: calc((100% - var(--comp-40) - 1px) / 2); border-radius: 10px; background-color: #fff; }
.tabBtnList li button{ display: block; border: none; background: none; padding: var(--comp-30) var(--comp-15) var(--comp-30); position: relative; width: 100%; box-sizing: border-box; cursor: pointer;}
.tabBtnList li button::after{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; border-radius: 10px; border: 4px solid var(--suzuka); box-sizing: border-box; opacity: 0; transition: opacity ease 0.5s;}
.tabBtnList li button.active::after{ opacity: 1;}
.tabBtnList li button figure{ width: 80%; margin: 0 auto var(--comp-15);}
.tabBtnList li button p{ font-size: 16px;}
.tabBox{ display: none; overflow: clip;}
.tabBox.active{ display: block;}
.tabBox .wrapSlide{ width: 73.78378378378%; position: relative; left: 50%; transform: translateX(-50%);}
.tabBox .wrapSlide ol{ list-style: none; padding: 0;}
.tabBox .wrapSlide .slick-track{ display: flex; align-items: normal;}
.tabBox .wrapSlide .slick-list{ overflow: visible;}
.tabBox .wrapSlide .slick-slide{ padding: var(--comp-25) var(--comp-20) 0; box-sizing: border-box; width: auto; height: auto !important; position: relative;}
.tabBox .wrapSlide .slick-slide .slideInner{ display: flex; height: 100%; width: 100%; flex-direction: column; background-color: #fff; border-top: 2px solid #4c4948; border-radius: 0 0 var(--comp-20) var(--comp-20); box-sizing: border-box; padding: var(--comp-65) var(--comp-40) var(--comp-40); }
.tabBox .wrapSlide .slick-slide .slideInner .step{ position: absolute; top: 0; left: calc(var(--comp-20) - 1px); z-index: 2; color: #fff; box-sizing: border-box; padding: var(--comp-10) var(--comp-35) var(--comp-10) var(--comp-20); line-height: 1; font-size: var(--comp-32); font-weight: 700; }
.tabBox .wrapSlide .slick-slide .slideInner .step::after{ content: ""; display: block; background-color: #4c4948; width: 100%; height: 100%; position: absolute; top: 0; left: 0; clip-path: polygon(0 0, calc(100% - var(--comp-20)) 0, 100% 100%, 0 100% );}
.tabBox .wrapSlide .slick-slide .slideInner .step span{ position: relative; z-index: 3;}
.tabBox .wrapSlide .slick-slide .slideInner p:not([class]){ font-weight: 700 !important; font-size: var(--comp-28) !important; margin-bottom: var(--comp-30); line-height: 1.6;}
.tabBox .wrapSlide .slick-slide .slideInner figure{ width: 100%; margin: auto 0 0;}
.tabBox .wrapSlide .pagination{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; justify-content: space-between; width: 78.3783783783vw; z-index: 3;}
.tabBox .wrapSlide .pagination .slick-arrow{ background-color: var(--suzuka); border: none; aspect-ratio: 1 / 1; width: var(--comp-80); border-radius: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all ease 0.5s; border: 1px solid var(--suzuka);}
.tabBox .wrapSlide .pagination .slick-arrow.pickupPrev{ padding-left: var(--comp-20);}
.tabBox .wrapSlide .pagination .slick-arrow.pickupNext{ padding-right: var(--comp-20);}
.tabBox .wrapSlide .pagination .slick-arrow span{ display: block; aspect-ratio: 1 / 1; width: var(--comp-15); }
.tabBox .wrapSlide .pagination .slick-arrow.pickupPrev span{ border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg);}
.tabBox .wrapSlide .pagination .slick-arrow.pickupNext span{ border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
.tabBox .wrapSlide .pagination .slick-arrow.slick-disabled{ background-color: #c1dffc; border: none; pointer-events: none;}
.tabBox .dot{ margin-top: 30px;}
.tabBox .slick-dots{ position: relative; top: auto; bottom: auto; left: auto; right: auto; margin: 0 auto; display: flex; justify-content: center; gap: var(--comp-15); }
.tabBox .slick-dots li{ padding: 0; margin: 0; width: var(--comp-20); height: auto;}
.tabBox .slick-dots li button{ padding: 0; background-color: #c1dffc; aspect-ratio: 1 / 1; display: block; width: var(--comp-20); height: auto; border-radius: 10px; transition: all ease 0.5s;}
.tabBox .slick-dots li button::before{ content: none;}
.tabBox .slick-dots li.slick-active button{ background-color: var(--suzuka); }

/*-- AREA / FAQ --*/
#area-faq{ padding: var(--comp-90) 0 0;}
.areaBox{ width: 83%; margin: 0 auto;}
.grayBox{ background-color: #eff1f3; box-sizing: border-box; padding: var(--comp-60) var(--comp-30);}
.lineList { margin: 0;}
.lineList dt{ display: flex; gap: var(--comp-10); align-items: flex-start; line-height: 1.75; font-size: var(--comp-24); font-weight: 700; margin: var(--comp-30) 0 var(--comp-10);}
.lineList dt::before{ content: ""; display: block; width: var(--comp-32); height: 2px; background-color: var(--suzuka); margin-top: 0.8em; }
.lineList dt:first-child{ margin-top: 0;}
.lineList dt:has( + dt){ margin-bottom: 0;}
.lineList dd{ font-size: var(--comp-24); padding-left: calc(var(--comp-32) + var(--comp-10)); margin: 0;}
#faq{ padding: var(--comp-90) 0 0;}
.faqBox{ width: 83%; margin: 0 auto; }
.faqBox .faqList{ margin: 0 auto; padding: 0; border-top: 1px solid #666666; line-height: 1.75;}
.faqBox .faqList > div{ border-bottom: 1px solid #666666; }
.faqBox .faqList dt button{ width: 100%; display: flex; gap: var(--comp-20); border: none; background: none; font-size: var(--comp-30); font-weight: 700; padding: 0; align-items: flex-start; position: relative; box-sizing: border-box; padding: var(--comp-50) 0 var(--comp-50) 0; cursor: pointer;}
.faqBox .faqList dt button::before{ content: "Q"; color: #fff; aspect-ratio: 1 / 1; background-color: #4c4948; width: var(--comp-45); font-size: var(--comp-30); display: flex; flex-direction: column; justify-content: center; align-items: center;  font-weight: bold; vertical-align: middle; font-family: 'Noto Sans JP', sans-serif; padding-bottom: 0.2em; box-sizing: border-box; line-height: 1;}
.faqBox .faqList dt button .text{ display: block; width: calc(100% - var(--comp-45) - var(--comp-32) - var(--comp-20) - var(--comp-20)); text-align: left;}
.faqBox .faqList dt button .icon{ display: block; width: var(--comp-32); position: relative; aspect-ratio: 1 / 1; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all ease 0.5s;}
.faqBox .faqList dt button .icon::before{ content: ""; display: block; width: 100%; height: 2px; background-color: #4c4948; position: absolute; top: 50%; transform: translateY(-50%); transition: all ease 0.5s;}
.faqBox .faqList dt button .icon::after{ content: ""; display: block; width: 2px; height: 100%; background-color: #4c4948; position: absolute; left: 50%; transform: translateX(-50%);}
.faqBox .faqList dt.active button .icon{ transform: translateY(-50%) rotate(90deg); }
.faqBox .faqList dt.active button .icon::before{ transform: translateY(-50%) scaleX(0); opacity: 0;}
.faqBox .faqList dd{ padding: 0 calc(var(--comp-32) + var(--comp-20)) var(--comp-50) 0; margin: 0; display: none;}
.faqBox .faqList dd .innerAnswer{ display: flex; align-items: flex-start; gap: var(--comp-20);}
.faqBox .faqList dd .innerAnswer::before{ content: "A"; align-items: center; color: #fff; aspect-ratio: 1 / 1; background-color: var(--suzuka); width: var(--comp-45); font-size: var(--comp-30); display: flex; flex-direction: column; justify-content: center; align-items: center;  font-weight: bold; vertical-align: middle; line-height: 1; font-family: 'Noto Sans JP', sans-serif;}
.faqBox .faqList dd .innerAnswer .textBox{ display: block; width: calc(100% - var(--comp-45) - var(--comp-20 )); text-align: left; }
.faqBox .faqList dd .ttl{ font-size: var(--comp-25); margin: var(--comp-25) 0 var(--comp-5);}
.faqBox .faqList dd .ttl:first-child{ margin-top: 0;}
.faqBox .faqList dd .ttl:last-child{ margin-bottom: 0;}

/*-- FIXED BUTTON --*/
.fixedBox{ position: sticky; bottom: var(--comp-40); margin-top: var(--comp-20); right: 0; display: flex; justify-content: flex-end; pointer-events: none; z-index: 20; opacity: 0; transition: all ease 0.5s;}
.fixedBox.active{ opacity: 1; }
.fixedBox .fixedBtn{ width: auto; pointer-events: none;}
.fixedBox .fixedBtn a{ display: block; background-color: var(--suzuka); color: #fff; text-decoration: none; font-weight: var(--comp-24); position: relative; box-sizing: border-box; padding: var(--comp-30) var(--comp-60) var(--comp-30) var(--comp-25); line-height: 1; width: 100%; font-weight: 700; margin: 0 auto; height: var(--comp-100); display: flex; flex-direction: column; justify-content: center;}
.fixedBox .fixedBtn a::after{ content: ""; display: block; aspect-ratio: 1 / 1; width: var(--comp-12); border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: var(--comp-30);}
#move-page-top{ cursor: pointer; width: var(--comp-100); display: block; pointer-events: none;}
.fixedBox.active .fixedBtn{ pointer-events: all;}
.fixedBox.active #move-page-top{ cursor: pointer; pointer-events: all;}
#move-page-top img{ display: block; width: 100%;}

}