@charset "utf-8";
/* ----------------------------- #shopper ------------------------------- */
h3{font-size: 15px; line-height: 140%;}
h3 span{font-size: 54px; font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal;line-height: 93%;display: inline-block; padding: 0 0 6px;}
.yellow_mark{background:linear-gradient(transparent 60%, #FBFF95 30%);}
/* ----------------------------- #fv ------------------------------- */
#fv{background: url(../images/index/fv_bg_1.jpg) no-repeat center top; background-size: cover; max-height: 890px; padding: 404px 0 33px;}

#fv .text_box{justify-content: center;}
#fv .text_box .tt_box{width: 100%; max-width: 160px; height: auto; position: relative; text-align: center;}
#fv .text_box .tt_box:first-child{margin: 0 10px 0 0;}
#fv .text_box .tt_box:before{content: ""; display: block; position: absolute; top: 5px; left: 5px; background:linear-gradient(45deg,#ECD3E8,#ECFAFB); width: 100%; height: 100%; border-radius: 10px;}
#fv .text_box .tt_box .bg_white{width: 100%;background: #fff; position: relative; z-index: 1; border-radius: 10px; }
#fv .text_box .tt_box p{ padding: 3px 0 8px; line-height: 145%; font-size: 18px; text-align: left; display: inline-block;}
#fv h2{text-align: center; line-height: 160%; padding: 23px 0 0;}
#fv h2 span{background: #FF7F02;font-family: 'Noto-Sans-JP-Bold'; line-height: 160%; display: inline-block; color: #fff; padding: 0 17px;}
#fv h2 span:not(:last-child){margin: 0 0 6px;}
#fv h2 span.bg_orange_1{font-size: 35px; }
#fv h2 span.bg_orange_2{font-size: 46px;}
#fv h2 span.bg_orange_3{font-size: 50px;}
#fv .due_date{justify-content: center;border-bottom: 12px solid #F7E43B; max-width: 330px; margin: 14px auto 0;align-items: flex-end; }
#fv .due_date p.text_1{font-family: 'Noto-Sans-JP-Medium';font-size: 21px; line-height: 120%; text-align: left; padding: 0 6px 0 0;}
#fv .due_date p.text_2{font-family: 'Noto-Sans-JP-Bold';font-size: 24px; line-height: 120%; }
#fv .due_date p.text_2 span{font-family: "Helvetica Neue" , Helvetica , serif; font-weight: 700; font-size:57px; }

/* ----------------------------- #shopper ------------------------------- */
#shopper{background: #FEFCF6; padding: 50px 0;}
#shopper .top_box{padding: 0 3%;}
#shopper .top_box .shopper_img_1{padding: 5px 5% 0 3%;}
#shopper .top_box .shopper_img_1 img{width: 100%; height: auto;}
#shopper .tt_box{text-align: center; padding: 35px 0 0;}
#shopper .tt_box p.text{font-size: 16px;font-family: 'Noto-Sans-JP-Medium';line-height: 194%;font-feature-settings: "palt";}
#shopper .tt_box p.text span.mini{font-size: 11px;font-family: 'Noto-Sans-JP-Medium';}
#shopper .tt_box p.text:not(:last-child){margin: 0 0 35px;}
#shopper p.text_mini{text-align: center; font-size: 12px; padding: 6px 0 0; line-height: 160%;}

#shopper .about{padding: 20px 3% 0; text-align: center;}
#shopper .about h4{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 49px; line-height: 101%;}
#shopper .about .tt_box{padding: 15px 0 0;}
#shopper .yellow_mark{background:linear-gradient(transparent 40%, #FFFA76 30%);}

/* ----------------------------- #feature ------------------------------- */
#feature{background: #FFF3E0; padding: 50px 0 60px;}
#feature .tt_white{max-width: 317px; margin: 33px auto 0; text-align: center; font-size: 16px; background: #fff; border-radius: 10000px; padding: 8px 0 11px;line-height: 150%;}
#feature .list_box{padding: 11px 0 0;}
#feature .list_box .box{position: relative;}
#feature .list_box .box:not(:last-child){margin: 0 0 47px;}
#feature .list_box .box.box_1{padding: 38.8% 0 0;}
#feature .list_box .box.box_2{padding: 36.4% 0 0;}
#feature .list_box .box.box_3{padding: 47% 0 0;}
#feature .list_box .box.box_4{padding: 32% 0 0;}
#feature .list_box .box .img{position: absolute; top: 0px; left: 50%; transform: translateX(-50%);}
#feature .list_box .box .img img{width: 100%; height: auto;}
#feature .list_box .box.box_1 .img{width: 53.6%;}
#feature .list_box .box.box_2 .img{width: 57%;}
#feature .list_box .box.box_3 .img{width: 47%;}
#feature .list_box .box.box_4 .img{width: 86%;}

#feature .list_box .box h4{position: relative; left: 0%; width: 95%; background: #fff; clip-path: polygon(0px 0, 95% 0%, 100% 100%, 0% 100%); color: #2C2C2C; line-height: 140%; display: flex; padding: 11px 19px 6px 20px; font-family: 'Noto-Sans-JP-Bold'; font-size: 20px; }
#feature .list_box .box h4 span{font-family: "Helvetica Neue" , Helvetica , serif; font-weight: 700; font-size: 32px; display: inline-block; margin: 0 16px 0 0 ;}
#feature .list_box .box ul{padding: 20px 0 0 5%; text-align: left; width: 90%; margin: 0 auto;}
#feature .list_box .box ul li{font-size: 16px; line-height: 160%; position: relative; padding: 0 0 0 31px;}
#feature .list_box .box ul li:not(:last-child){margin: 0 0 16px;}
#feature .list_box .box ul li:before{content: ""; display: block; width: 21px; height: 21px; background: url(../images/index/feature_icn_1.png?var=1111) no-repeat center center; background-size: 100%; position: absolute; top: 3px; left: 0px;}

#feature .bottom_box{padding: 43px 0 0; width: 90%; margin: 0 auto;}
#feature .bottom_box .orange{position: relative;}
#feature .bottom_box .orange:not(:last-child){margin: 0 0 22px;}
#feature .bottom_box .orange:before{content: ""; display: block; background: #FFD26E; border-radius: 20px; width: 100%; height: 100%; position: absolute; top: 5px; right: -5px;}
#feature .bottom_box .orange .white_box{background: #fff; border-radius: 20px; text-align: center; position: relative; z-index: 1;padding: 13px 24px;}
#feature .bottom_box .orange .white_box h4{display: inline-block; font-size: 20px;font-family: 'Noto-Sans-JP-Bold';line-height: 170%; position: relative;background:linear-gradient(transparent 50%, #F9FF58 50%);}
#feature .bottom_box .orange .white_box p{font-size: 16px; line-height: 150%; padding: 15px 0 0;}}
#feature .bottom_box .orange .white_box ul li{font-size: 16px;}
#feature .bottom_box .orange.recommendation .white_box{padding: 30px 24px 29px;}
#feature .bottom_box .orange.recommendation .white_box h4:before{content: ""; display: block; background: url(../images/index/icn_logo_4.png?var=1111) no-repeat center center; background-size: 100%; width: 49px; height: 27px; position: absolute; left: -59px; top: 0px;}
#feature .bottom_box .orange.recommendation .white_box h4:after{content: ""; display: block; background: url(../images/index/icn_logo_5.svg) no-repeat center center; background-size: 100%; width: 23px; height: 27px; position: absolute; right: -32px; top: -10px;}
#feature .bottom_box .orange.recommendation ul{padding: 22px 0 0;}
#feature .bottom_box .orange.recommendation ul li{text-align: left; font-size: 16px; line-height: 160%; position: relative; padding: 0 0 0 25px;}
#feature .bottom_box .orange.recommendation ul li:before{content: ""; display: block; width: 16px; height: 16px; position: absolute; left: 0px; top: 5px;}
#feature .bottom_box .orange.recommendation ul li:not(:last-child){margin: 0 0 10px;}
#feature .bottom_box .orange.recommendation ul li.icn_1:before{background: url(../images/index/icn_logo_6.png?var=1111) no-repeat left center; background-size: 100%; }
#feature .bottom_box .orange.recommendation ul li.icn_2:before{background: url(../images/index/icn_logo_7.png?var=1111) no-repeat left center; background-size: 100%; }
#feature .bottom_box .orange.recommendation ul li.icn_3:before{background: url(../images/index/icn_logo_8.png?var=1111) no-repeat left center; background-size: 100%; }
#feature .bottom_box .orange.recommendation ul li.icn_4:before{background: url(../images/index/icn_logo_9.png?var=1111) no-repeat left center; background-size: 100%; }
#feature .bottom_box .orange.recommendation ul li.icn_5:before{background: url(../images/index/icn_logo_10.png?var=1111) no-repeat left center; background-size: 100%; }

#feature .bottom_box .orange.example p{text-align: left;}

/* ----------------------------- #flow ------------------------------- */
#flow{background: #FFE577; padding: 50px 8px 50px; text-align: center;}
#flow h3{width: 100%; text-align: left;}
#flow ul{padding: 34px 0 0; display: inline-block; text-align: left;}
#flow ul li{position: relative;}
#flow ul li:not(:last-child){margin: 0 0 22px; padding: 0 0 23px; }
#flow ul li:not(:last-child):before{content: ""; display: block; background: url(../images/index/flow_icn.svg) no-repeat center center; background-size: 100%; width: 41px; height: 10px; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); }
#flow ul li .flex{align-items: flex-start;}
#flow ul li .flex img{margin: 0 22px 0 0;}
#flow ul li .flex .text_box{width: calc(100% -83px); position: relative;}
#flow ul li .flex .text_box h4{position: relative; font-family: 'Noto-Sans-JP-Bold'; font-size: 20px;padding: 0 22px 0 0;display: inline-block; padding:}
#flow ul li .flex .text_box h4 span{font-size: 24px; font-family: "Helvetica Neue" , Helvetica , serif; font-weight: 700; display: inline-block; padding: 0 11px 0 0;}
#flow ul li .flex .text_box p{font-size: 12px; line-height: 150%; padding: 11px 0 0;}
#flow ul li .flex .text_box p span{font-size: 12px; line-height: 150%; position: relative; display: inline-block; padding: 0 14px 0 0;}
#flow ul li .flex .text_box a.line{font-size: 14px; border: 1px solid #fff;background: #00C755 url(../images/common/icn_1.svg) no-repeat left 10px center; background-size: 26px;max-width: 174px;padding: 7px 15px 9px 41px; line-height: 129%; margin: 13px 0 0;}

#flow ul li .flex .text_box h4:before{width: 20px; height: 26px; position: absolute; right: 0px; content: ""; display: block;}
#flow ul li.list_1 .flex .text_box h4:before{background: url(../images/index/icn_logo_11.png?var=1111) no-repeat center center; background-size: 100%;}
#flow ul li.list_2 .flex .text_box h4:before{background: url(../images/index/icn_logo_12.png?var=1111) no-repeat center center; background-size: 100%;}
#flow ul li.list_3 .flex .text_box h4:before{background: url(../images/index/icn_logo_13.png?var=1111) no-repeat center center; background-size: 100%;}
#flow ul li.list_4 .flex .text_box h4:before{background: url(../images/index/icn_logo_14.png?var=1111) no-repeat center center; background-size: 100%;}
#flow ul li.list_5 .flex .text_box h4:before{background: url(../images/index/icn_logo_15.png?var=1111) no-repeat center center; background-size: 100%;}
#flow ul li.list_6 .flex .text_box h4:before{background: url(../images/index/icn_logo_16.png?var=1111) no-repeat center center; background-size: 100%;}
#flow ul li.list_6 .flex .text_box p span:before{ position: absolute; right: 0px; content: ""; display: block; background: url(../images/index/icn_logo_16.png?var=1111) no-repeat center center; background-size: 100%; width: 14px; height: 20px;}


/* ----------------------------- #faq ------------------------------- */
#faq{background: #FEFCF6; padding: 50px 0;}
#faq p.text{font-size: 14px; letter-spacing: 0.04em; line-height: 186%;font-family: 'Noto-Sans-JP-Regular'; padding: 18px 0 0;}
#faq ul{padding: 25px 0 0 ;}
#faq ul li.clos_btn{padding: 21px 16px;border-radius: 18px; background: #fff; box-shadow: 0 0 10px 3px rgba(0,0,0,0.1);}
#faq ul li.clos_btn:not(:last-child){margin: 0 0 17px;}
#faq ul li.clos_btn .tt_box {position: relative;}
#faq ul li.clos_btn .tt_box span.big_tt{color: #1F3D75; padding: 0 17px 0 0;font-family: din-2014, sans-serif; font-weight: 400; font-style: normal;font-size: 28px; line-height: 100%; position: absolute; left: 0px; top: 0px;}
#faq ul li.clos_btn .tt_box.question span.big_tt{ top: -4px;}
#faq ul li.clos_btn .tt_box.question {font-family: 'Noto-Sans-JP-Bold'; font-size: 15px; line-height: 150%; padding: 0 20px 0 30px;}
#faq ul li.clos_btn .tt_box.question span.clos{width: 24px; height: 24px; display: block; position: absolute;right: 0px; top: 0px;}
#faq ul li.clos_btn .tt_box.question span.clos:before,
#faq ul li.clos_btn .tt_box.question span.clos:after{content: ""; display: block; width: 100%; height: 2px; background: #FF8822; position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%); transition: 0.5s;}
#faq ul li.clos_btn .tt_box.question span.clos:after{transform: translate(-50%,-50%) rotateZ(90deg);}
#faq ul li.clos_btn.active .tt_box.question span.clos:after{transform: translate(-50%,-50%) rotateZ(0deg); transition: 0.5s;}
#faq ul li.clos_btn .tt_box.content_tt{padding: 0 0 0 30px; font-size: 14px; letter-spacing: 0.04em; line-height: 186%; display: none; margin: 14px 0 0;}
#faq ul li.clos_btn .tt_box.content_tt span.big_tt{color: #E87700; top:0;}

/* ----------------------------- #entry ------------------------------- */
#entry{padding: 50px 0; background: linear-gradient(to bottom, #FF9A8D,#FFD593);text-align: center; }
#entry h3{display: inline-block; color: #fff; position: relative;}
#entry h3:before{content: ""; display: block; background: url(../images/index/icn_logo_17.png?var=1111) no-repeat center center; background-size: 100%; width: 33px; height: 36px; position: absolute; bottom: 0px; right: -35px;}
#entry .bg_white{background: #fff; border-radius: 20px; margin: 16px auto 0; padding: 17px; position: relative;}
#entry .bg_white:before{background: url(../images/index/icn_logo_19.png?var=1111) no-repeat center center; background-size: 100%; width: 44px; height: 35px; content: ""; display: block; position: absolute; bottom: -15px; left: 0; z-index: 1;}
#entry .bg_white .title_box {position: relative;display: inline-block; }
#entry .bg_white .title_box:before{background: url(../images/index/enetr_icn_1.svg) no-repeat center center; background-size: 100%; width: 27px; height: 42px; content: ""; display: block; position: absolute; bottom: -20px; left: 15px;}
#entry .bg_white .title_box h4{background: #2C2C2C; color: #fff;font-family: 'Noto-Sans-JP-Bold'; font-size: 19px; padding:7px 10px 8px; position: relative; z-index: 1; line-height: 143%;}
#entry .bg_white p.big{ max-width: 300px; margin: 0 auto; padding: 18px 0 0; font-size: 24px; font-family: 'Noto-Sans-JP-Bold'; line-height: 167%; position: relative; }
#entry .bg_white p.big span{ font-family: 'Noto-Sans-JP-Bold'; line-height: 167%}
#entry .bg_white p.big:before{content: ""; display: block; width: 48px; height: 63px; background: url(../images/index/icn_logo_18.png?var=1111) no-repeat center center; background-size: 100%; position: absolute; right: -22px; bottom: -16px;}
#entry .bg_white .box{padding: 36px 0 0; max-width: 350px; margin: 0 auto;}
#entry .bg_white .box .flex{align-items: flex-start;}
#entry .bg_white .box .flex:not(:last-child){margin: 0 0 19px;}
#entry .bg_white .box h4{background: #2C2C2C; width: 88px; height: auto; padding: 3px 0; text-align: center; font-size: 16px; line-height: 150%;font-family: 'Noto-Sans-JP-Bold'; color: #fff;}
#entry .bg_white .box p{font-family: 'Noto-Sans-JP-Bold'; font-size: 16px; text-align: left; padding: 3px 0 0 15px; line-height: 163%;}
#entry .bg_white .box p span.mini{font-size: 12px;font-family: 'Noto-Sans-JP-Bold'; line-height: 163%;}
#entry .bg_white .box p span.yellow_mark{font-size: 16px;font-family: 'Noto-Sans-JP-Bold'; line-height: 163%;}
#entry .bg_white .mini_tt{text-align: left;font-size: 12px; line-height: 180%; display: inline-block; padding: 13px 0 0 12px; text-indent: -12px;}
#entry .white_mark{padding: 43px 0 0; line-height: 180%;}
#entry .white_mark span{display: inline-block; background: #fff; font-size: 18px; line-height: 180%; padding: 0px 4px;}
#entry .white_mark span:not(:last-child){margin: 0 0 10px;}
#entry .link_box{margin: 30px 0 0;}
#entry .link_box p{text-align: center; display: inline-block; position: relative; padding: 0 25px; font-size: 20px;}
#entry .link_box p:before{content: ""; display: block; width: 24px; height: 1px; background: #000; position: absolute; right: 0px; top: 50%; transform: translateY(-50%) rotateZ(-45deg);}
#entry .link_box p:after{content: ""; display: block; width: 24px; height: 1px; background: #000; position: absolute; left: 0px; top: 50%; transform: translateY(-50%) rotateZ(45deg);}
#entry .yellow_mark{background:linear-gradient(transparent 48%, #F9FF58 30%);}