@charset "UTF-8";
/* CSS Document */

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 896px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

/* .EN {ffont-family: 'Raleway', sans-serif;} */
.mincho {font-family: 'Noto Serif JP', serif;}
.NS {font-family: 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;}
.bgWH {background-color: #FFF;}
.bgBL {background-color: #00B4ED;}

.bgPI {background-color: #EE87B4;}
.bgYL {background-color: #FFF360;}
.bgLYL {background-color: #FFFABE;}
.bgGRY {background-color: #666666;}
.txtWH {color: #FFF;}
.txtPI {color: #EE87B4;}
.txtBL {color: #00B4ED;}
.txtYL {color: #FFF360;}
.txtGRY{color: #666666;}
.txtBK{color: #222;}
.bBR {border-color: #BF9D63;}
.bDBL {border-color: #2F3B49;}
/* main {min-height: 2000px;} */
body{background: #D5F1FA; background: linear-gradient(90deg,rgba(213, 241, 250, 1) 0%, rgba(248, 244, 191, 1) 50%, rgba(252, 219, 234, 1) 100%);}

.mb25{margin-bottom: 25px;}
.pt35{padding-top: 35px;}
.pt45{padding-top: 45px;}
.pt65{padding-top: 65px;}
.gap10{gap: 0 10px;}
.bdrBKTxt{border: 1px solid #222; border-radius: 20px; padding: 5px 20px; width: fit-content; margin-right: auto; margin-left: auto;}
.lsm1{letter-spacing: -1px;}
.lsm2{letter-spacing: -2px;}
.txtNw{white-space: nowrap;}
/* layout */
.l-wrap{width: 100%; justify-content: center;}
.l-side{width: calc(50% - 244px); max-width: 596px; position: relative;}
.l-side section{ padding: 40px 30px;}
.l-side.--left{text-align: center;}
.l-main{width: 488px;}
/* ===== Right column sticky ===== */
/* :root{--sticky-top: 0px;} */
.l-side.--right #fixedCta {position: fixed; top: var(0); width: calc(50% - 244px); height: calc(100vh - 100px); overflow: auto; -webkit-overflow-scrolling: touch; pointer-events: none;}



/* common item */
#page-top{width: 80px; aspect-ratio: 1/1; object-fit: contain; position: fixed;}
.c-cta{max-width: 368px; width: 100%; margin-right: auto; margin-left: auto; display: block;}
.c-cta img{width: 100%;}
.c-bdbl_btm{position: relative;}
.c-bdbl_btm::before{position: absolute; content: ""; background-image: url(../img/cmn/bd-bl.svg); width: calc(100% + 40px); bottom: -2px; left: -20px; transform: translate(0,0); display: block; height: 3px; background-size: contain; background-repeat: repeat-x;}
.c-udline{position: relative; z-index: 0;}
.c-udline::before{position: absolute; content: ""; background-color: #FFF360; z-index: -1; height: 10px; left: 50%; bottom: 0; transform: translate(-50%,0); width: calc(100% - 20px);}
.c-sideLine{position: relative; width: fit-content; margin-right: auto; margin-left: auto;}
.c-sideLine::before,.c-sideLine::after{position: absolute; content: ""; display: block; background-color: #222; height: 1px; width: 50px; top: 50%;}
.c-sideLine::before{transform: translate(calc(-100% - 10px)); left: 0;}
.c-sideLine::after{transform: translate(calc(100% + 10px)); right: 0;}
.c-snsLink{border: 3px solid #666; padding: 15px; font-size: 16px; font-weight: 900; width: 100%; display: flex; border-radius: 60px; justify-content: center; align-items: center; color: #666; text-decoration: none; margin-bottom: 15px;}
.c-snsLink span:first-child{margin-right: 20px;}
.c-snsLink span:first-child img{max-width: 30px; height: 30px; object-fit: contain;}
.c-snsLink span:last-child{display: inline-block; width: 220px;}
.c-col2,.c-col3{width: 100%; gap: 8px; flex-wrap: nowrap;}
.c-col2 .item,.c-col3 .item{display: flex; align-items: center; flex-direction: column; justify-content: baseline; text-align: center; margin-bottom: 20px;}
.c-col2 .item img,.c-col3 .item img{object-fit: contain; margin-bottom: 10px;}
.c-col2 .item{width: 50%;}
.c-col3 .item{width: calc(100% / 3);}
.c-col2 .item img{width: 71px; height: 172px;}
.c-col3 .item img{max-width: 100px; max-height: 127px; height: 127px; object-position: bottom center;}


.c-step{position: relative;}
/* .c-step .unit{margin-bottom: 30px;} */
.c-step .unitNum{width: 62px; aspect-ratio: 1/1; border-radius: 62px; background-color: #FFF360; border: 2px solid #222; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;}
.c-step .unitNum span:first-child{font-size: 14px; font-weight: 700; line-height: 16px; display: block;}
.c-step .unitNum span:last-child{font-size: 30px; font-weight: 700; line-height: 26px; display: block;}
.c-step .unitTxt{width: calc(100% - 82px); font-size: 16px; font-weight: 500; position: relative; padding-bottom: 30px; min-height: 100px;}
.c-step .unitTxt::before{position: absolute; content: ""; background-color: #222; width: 4px; border-radius: 4px; height: 100%; max-height: calc(100% - 72px); left: -51px; bottom: 8px; transform: translate(-50%,0);}
.c-step .unit:last-child .unitTxt::before{max-height: calc(100% - 42px); bottom: unset; top: calc(100% - 80px);}


.cloudBg,.cloudBgv2{background-color: #00B4ED; position: relative;}
.cloudBg{background-image: url(../img/top/04-bg.svg);}
.cloudBgv2{background-image: url(../img/top/04-bg.svg); background-size: contain; background-repeat: repeat-y;}
.cloudBg::before,.cloudBgv2::before{background-image: url(../img/cmn/cloud.svg); width: calc(100% + 120px); background-position: top center; background-size: contain; top: 0; left: 50%; transform: translate(-50%,0); content: ""; display: block; position: absolute; height: calc(100% + 54px); background-repeat: repeat-y;}
.cloudBgv2::before{background-image: url(../img/cmn/cloudv2.svg); height: calc(100%); width: calc(100% + 68px);}
.ylwBox{border: 5px solid #FFF360; border-radius: 6px; width: calc(100% - 60px); margin-right: auto; margin-left: auto; background-color: rgba(256, 256, 256, 0.8); position: relative;}
.ylwBoxInner{width: calc(100% - 40px); margin-right: auto; margin-left: auto;}
.blueBox{border: 5px solid #00B4ED; border-radius: 6px; width: calc(100% - 60px); margin-right: auto; margin-left: auto; background-color: rgba(256, 256, 256, 0.8); position: relative;}
.blueBoxInner{width: calc(100% - 50px); margin-right: auto; margin-left: auto;}
.bgCara{background-image: url(../img/cmn/bg-pi.svg); background-repeat: repeat-y; background-size: 100% auto;  background-position: top center;}
/* 詳細 */
.h52{height: 52px;}
.w260{max-width: 260px; width: 100%; margin-right: auto; margin-left: auto; display: block;}
.commonlink{text-decoration: none;}

/* 
width: 100%; margin-right: auto; margin-left: auto; display: block;
*/

section .title{position: absolute; transform: translate(-50%,-59%); top: 0; left: 50%; width: 100%;}
/* #cp02 .ylwBox{position: relative;} */
#cp05 .bgGRY{padding: 9px;}
#cp05{position: relative; z-index: 0;}
#cp05::before{position: absolute; bottom: 0px; background-image: url(../img/top/05-bg-btm.svg); content: ""; height: 30px; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: bottom center; z-index: 10;}
#cp05 .halfBox{padding: 0; justify-content: space-around;}
#cp05 .halfBox .item{width: calc(50%);}
#cp05 .halfBox .item .img{margin-bottom: 8px; display: flex; justify-content: center;}
#cp05 .halfBox .item img{max-height: 242px; min-width: 154px; object-fit: contain;}
#cp05 .pointBox .bgYL{padding: 5px 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
#cp05 .pointBox .content{padding: 15px 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
#cp05 .pointBox .content .flex{gap: 10px 20px;}
#cp05 .bdrBox{border: 1px solid #222; border-radius: 10px;}
#cp05 .bdrBoxTtl{padding: 10px;}
#cp05 .bdrBox .content{padding: 10px 20px;}
#cp05 .bdrBox .content ul {gap: 10px; flex-wrap: nowrap;}
#cp05 .bdrBox .content ul li{width: calc(33.3333% - 7px); margin-bottom: 6px;}
#cp05 .bdrBox .content ul li p{background-color: #222; color: #fff; border-radius: 30px; padding: 5px ; margin-bottom: 10px;}

#cp06,#cp07,#cp08{background-color: #fff; padding: 45px 0;}

#cp06{padding: 45px 0 10px;}
#cp06 .lylwBox{margin-bottom: 45px; background-color: #FFFABE; width: calc(100% - 60px); margin-right: auto; margin-left: auto; position: relative; border-radius: 10px;}
#cp06 .lylwBoxInner{padding: 45px 20px 20px; position: relative;}
#cp06 .title{width: calc(100% - 60px); margin-right: auto; margin-left: auto; text-align: center; background-color: #EE87B4; color: white; padding: 10px; border-radius: 30px;}
#cp06 .lylwBoxContent p{font-size: 13px; line-height: 1.7; font-family: 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;}
#cp06 .indent-lv01 {padding-left: 38px; position: relative;}
#cp06 .indent-lv01::before {position: absolute; left: 0; top: 0; line-height: 1.6;}
#cp06 .indent-lv01.--01::before {content: "（1）";}
#cp06 .indent-lv01.--02::before {content: "（2）";}
#cp06 .indent-lv01.--03::before {content: "（3）";}
#cp06 .indent-lv01.--04::before {content: "（4）";}
#cp06 .indent-lv01.--05::before {content: "（5）";}
#cp06 .indent-lv01.--06::before {content: "（6）";}
#cp06 .indent-lv01.--07::before {content: "（7）";}
#cp06 .indent-lv01.--08::before {content: "（8）";}
#cp06 .indent-lv01.--09::before {content: "（9）";}
#cp06 .indent-lv01.--10::before {content: "（10）";}
#cp06 .indent-lv01.--11::before {content: "（11）";}
#cp06 .indent-lv01.--12::before {content: "（12）";}
#cp06 .indent-lv01.--13::before {content: "（13）";}
#cp06 .indent-lv01.--14::before {content: "（14）";}
#cp06 .indent-lv02 {padding-left: 19px; position: relative;}
#cp06 .indent-lv02::before {position: absolute; left: 0; top: 0; line-height: 1.6;}
#cp06 .indent-lv02.--01::before {content: "①";}
#cp06 .indent-lv02.--02::before {content: "②";}
#cp06 .indent-lv02.--03::before {content: "③";}
#cp06 .indent-lv02.--04::before {content: "④";}
#cp06 .indent-lv02.--05::before {content: "⑤";}
#cp06 .lylwBoxContent_list li{padding-left: 20px; position: relative; line-height: 2;}
#cp06 .lylwBoxContent_list li::before{content: "●"; left: 0; top: 0; line-height: 28px; font-size: 10px; font-family: 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; position: absolute;}
#cp06 .q_txt,#cp06 .a_txt{position: relative; padding-left: 33px;}
#cp06 .q_txt{margin-bottom: 13px;}
#cp06 .a_txt{margin-bottom: 20px;}
#cp06 .q_txt::before,#cp06 .a_txt::before{position: absolute; left: 0; top: 0; width: 24px; height: 24px; aspect-ratio: 1/1; border-radius: 8px; font-size: 18px; font-weight: 700; color: #fff; display: flex; align-items: baseline; justify-content: center; line-height: 1.2;}
#cp06 .q_txt::before{content: "Q"; background-color: #EE87B4;}
#cp06 .a_txt::before{content: "A"; background-color: #00B4ED;}

#cp07{padding: 0px 0 45px;}
#cp07 .contact{position: relative; padding: 42px 20px 20px; border: 5px solid #EE87B4; border-radius: 10px; width: calc(100% - 60px); margin-right: auto; margin-left: auto;}
#cp07 .contact .title{padding: 0 20px; background-color: white; width: fit-content; margin-right: auto; margin-left: auto; white-space: nowrap;}

#cp08 .inner{margin-right: auto; margin-left: auto; width: calc(100% - 60px);}

#footer{background-color: #fff;}
#footer .wrap{border-bottom: 1px solid #666;}
#footer .inner{width: calc(100% - 60px); margin-right: auto; margin-left: auto; margin-bottom: 20px;}
#footer .inner .txt14{text-decoration: none;}
#footer .copy{padding: 20px;}


#sideItems{background-image: url(../img/item/00_bg.png); background-attachment: fixed; background-position: top left; background-size: contain; background-repeat: no-repeat; height: 100%;}
#sideItems .c-col2,#sideItems .c-col3 ,#sideItems .c-col5{gap: 0 10px; flex-wrap: wrap;}
#sideItems .c-col5{justify-content: center;}
#sideItems .item .txt14{font-size: 11px;}
#sideItems .item img{margin-bottom: 5px; max-width: 80px; height: 96px; object-fit: contain; object-position: bottom center;}
#sideItems .item{width: calc(20% - 8px); margin-bottom: 10px;}

#fixedCta {display: flex; align-items: center;justify-content: center; background-image: url(../img/right/bg.svg); background-repeat: no-repeat; background-size: contain; background-position: center center;}

@media screen and (min-width: 1300px){
  .l-side.--right #fixedCta .inner {pointer-events: auto;}
  :root{--header-h:0px}
  @supports(height:100dvh){.l-wrap{height:calc(100dvh - var(--header-h))}.l-side.--left,.l-main{height:calc(100dvh - var(--header-h))}}
  @supports not (height:100dvh){.l-wrap{height:calc(100vh - var(--header-h))}.l-side.--left,.l-main{height:calc(100vh - var(--header-h))}}
  .l-wrap{overflow:hidden}
  .l-side.--left,.l-main{overflow:auto;-webkit-overflow-scrolling:touch;min-width:0}
  .l-side.--left{overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
  .l-main{scrollbar-width:none;-ms-overflow-style:none}
  .l-side.--left::-webkit-scrollbar,.l-main::-webkit-scrollbar{width:0;height:0;display:none}
  .l-side.--left #sideItems{height:auto!important;min-height:100%;display:flow-root;padding-bottom:env(safe-area-inset-bottom,0);overflow-x: hidden;}
  .l-side.--right #fixedCta .inner {pointer-events: auto;}
}
@media screen and (max-width: 1400px){
  #sideItems .item{width: 30%;} 
}
@media screen and (max-width: 1300px){
  .l-side{display: none;}
}
@media screen and (max-width: 578px){
  .l-main{width: 100%;}
  section{overflow: hidden;}
  #cp06, #cp07, #cp08{padding: 45px 0 20px;}
  #page-top{right: 15px; bottom: 15px;}
}
@media screen and (max-width: 488px){
  .ylwBox,.blueBox,#cp07 .contact,#cp06 .lylwBox,#cp08 .inner{width: calc(100% - 40px);}
  .ylwBoxInner,.blueBoxInner{width: calc(100% - 30px);}
  .txtNw{white-space: initial;}
}
@media screen and (max-width: 430px){
  .c-step .unit:last-child .unitTxt::before{top: calc(100% - 107px);}
  #cp05 .halfBox .item{width: calc(50% - 5px);}
  #cp05 .halfBox .item img{min-width: unset;}
  #cp05 .bdrBox .content ul li p{font-size: 10px;}
  #cp06 .title{font-size: 12px;}
  #cp07{padding: 20px 0 45px;}

  .c-snsLink{font-size: 14px; padding: 10px;}
  .c-snsLink span:first-child{margin-right: 10px;}
  .c-snsLink span:first-child img{max-width: 24px; height: 24px;}
  .c-snsLink span:last-child {width: 200px;}
}


/* js */
/* ===== LYLW アコーディオン（作用範囲を限定） ===== */
.js-lylwAcc .js-lylwAcc-title {cursor: pointer; user-select: none;}
.js-lylwAcc .js-lylwAcc-title .js-lylwAcc-icon {margin-left: auto; font-weight: 700; line-height: 1; display: inline-block; transform: translateY(1px);}
.js-lylwAcc .js-lylwAcc-content { transition: height .25s ease, opacity .2s ease; overflow: hidden; }
.js-lylwAcc.is-collapsed .js-lylwAcc-content { height: 0 !important; opacity: 0; }
.js-lylwAcc.is-collapsed{background-color: unset!important; margin-bottom: 12px!important;}

/* hover */
.uxhvr-zoom {transition: transform .25s ease;}
.uxhvr-zoom:hover { transform: scale(1.03); }