@charset "utf-8";
/* ------------------------------------------------------------ 共通 */
h3.title{font-size: 20px; text-align: center; line-height: 265%;font-family: fot-tsukubrdgothic-std, sans-serif; font-weight: 700; font-style: normal;}
h3.title span{font-size: 69px;font-family: fot-tsukubrdgothic-std, sans-serif; font-weight: 700; font-style: normal;}
.text_box{text-align: center;}
.text_box .big_tt{font-size: 39px; line-height: 136%; display: inline-block; text-align: left; padding: 55px 0 0;font-family: fot-tsukubrdgothic-std, sans-serif; font-weight: 700; font-style: normal;}
.text_box .mini_tt{font-size: 18px; line-height: 250%; padding: 34px 0 0;}
/* ----------------------------- #fv ------------------------------- */
#fv{padding: 100px 50px 0; position: relative; background: #fff;}
#fv .img_box{width: 100%; height: auto;}
#fv .img_box img{width: 100%; height: auto; border-radius: 30px;}
#fv h2{position: absolute; bottom: -45px; left: 0px; z-index: 2;}
#fv .bg_1{position: absolute; bottom: 0px; width: 100%; height: auto;left: 0;}
#fv .bg_1 img{width: 100%; height: auto;}

/* ----------------------------- #about ------------------------------- */
#about{background: #2AA2E0 url(../images/top/about_bg_1.svg) no-repeat center top 42px; background-size: 1600px; color: #fff;  position: relative; }
#about:before{content: ""; display: block; position: absolute; width: 100%; height: 165px; background: url(../images/top/about_bg_5.svg) no-repeat center bottom; background-size: 1600px; bottom: 4.5%; left: 0px;}
#about .text_box .mini_tt{font-size: 16px;}
#about .about_bg_2{background: linear-gradient(to top, transparent 99%, #2AA2E0 5%),linear-gradient(to bottom, transparent 99%, #DFBA8A 5%);position: relative; z-index: 1;}
#about .about_bg{background:url(../images/top/about_bg_2.svg) no-repeat center bottom ,url(../images/top/about_bg_4.svg) no-repeat center bottom; background-size:1600px, 100%; padding: 67px 0 173px;}

#about .about_bg .about_box{position: relative;}
#about .about_bg .about_box .img1{position: absolute; top: 0px; left: -34px;}
#about .about_bg .about_box .img2{position: absolute; top: 221px; right: -22px;}
#about .about_bg .about_box .img3{position: absolute; top: 383px; left: -100px;}
#about .about_bg .about_box .youtube_box{position: relative; padding: 43.82% 0 0 ; width: 857px; margin: 118px auto 0; border: 11px solid #fff; border-radius: 34px; overflow: hidden;}
#about .about_bg .about_box .youtube_box iframe{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }

#about .about_bg_4{position: absolute; bottom: 0px;width: 100%; left: 0px; right: 0px;}
#about .about_bg_4 img{width: 100%; height: auto;}
/* ---------------------------- #shops ------------------------------- */
#shops{background: url(../images/top/shops_bg_1.svg) no-repeat center bottom 50%; background-size: 1600px; position: relative; color: #003A83; }
#shops .shops_bg_2{background: linear-gradient(to top, transparent 99%, #DFBA8A 5%);}
#shops .shops_bg{padding: 218px 0 200px;background:url(../images/top/shops_bg_2.svg) no-repeat center top  ; background-size: 100%;}

#shops .shops_bg .text_box .big_tt{padding: 30px 0px 0px 0px; font-size: 46px;}
#shops .shops_bg .text_box .mini_tt{padding: 11px 0 0; font-family: 'Noto-Sans-JP-Medium';}
#shops .shops_bg ul{padding: 58px 0 0;}
#shops .shops_bg ul li{background: #fff; border-radius: 19px; padding: 27px 47px 26px 29px; align-items: center;}
#shops .shops_bg ul li:not(:last-child){margin: 0 0 31px;}
#shops .shops_bg ul li .img {margin: 0 71px 0 0;}
#shops .shops_bg ul li .img img{border-radius: 13px; }
#shops .shops_bg ul li .text{width: 503px;}
#shops .shops_bg ul li .text h4{font-family: fot-tsukubrdgothic-std, sans-serif; font-weight: 700; font-style: normal; font-size: 30px; line-height: 150%;}
#shops .shops_bg ul li .text p{font-size: 16px;font-family: 'Noto-Sans-JP-Regular'; line-height: 160%; padding: 8px 0 0;}
#shops .shops_bg ul li .text a{display: block; width: 293px; background: #003A83; border-radius: 1000px; color: #fff; font-size: 18px; text-align: center; position: relative; padding: 19px 0 24px;font-family: 'Noto-Sans-JP-Medium'; line-height: 145%; margin: 63px 0 0 auto; transition: 0.5s;}
#shops .shops_bg ul li .text a.thumb-hover{opacity: 0.8; transition: 0.5s;}
#shops .shops_bg ul li .text a:before{content: ""; display: block; width: 17px; height: 14px; background: url(../images/top/icn_1.svg) no-repeat center center;background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); right: 27px;}

#shops .shops_bg_3{position: absolute; width: 100%; height: auto; bottom: 0px; left: 0px; right: 0px;}
#shops .shops_bg_3 img{width: 100%; height: auto;}


/* ----------------------------- #news ------------------------------- */
#news{position: relative; background: #D0E7F4 url(../images/top/news_bg_1.svg) no-repeat center bottom; background-size: 2086px; color: #003A83;}
#news .news_bg_2{background:linear-gradient(to top, transparent 99%, #D0E7F4 5%),linear-gradient(to bottom, transparent 99%, #2AA2E0 5%);}
#news .news_bg{padding: 77px 0 185px; position: relative; z-index: 1; background: url(../images/top/news_bg_2.svg) no-repeat center bottom; background-size: 100%;}
#news .news_bg .text_box .mini_tt{padding: 11px 0 0;font-family: 'Noto-Sans-JP-Regular';}
#news .news_bg ul{padding: 78px 0 0; justify-content: flex-start;}
#news .news_bg ul li a{transition: 0.5s; color: #003A83;}
#news .news_bg ul li a.thumb-hover{opacity: 0.6;transition: 0.5s;}
#news .news_bg ul li:not(:last-child){margin: 0 40px 0 0;}
#news .news_bg ul li{width: 340px; height: auto;}
#news .news_bg ul li .img img{border-radius: 10px; width: 100%; height: auto;}
#news .news_bg ul li .text{padding: 16px 0 0;}
#news .news_bg ul li .text .mini{font-size: 14px;font-family: 'Noto-Sans-JP-Regular'; line-height: 160%;}
#news .news_bg ul li .text .text{font-size: 18px; line-height: 173%;font-family: 'Noto-Sans-JP-Medium'; padding: 12px 0 0;}
#news .shops_bg_3{position: absolute; left: 0px; bottom: 0px; width: 100%; height: auto;}
#news .shops_bg_3 img{width: 100%; height: auto;}

#news .link_btn{margin: 60px auto 0; width: 293px;}
#news .link_btn a{width: 100%; height: auto; display: block; background: #fff url(../../nobicco_jumbo/images/top/icn_1.svg) no-repeat right 27px center; background-size: 16px; border-radius: 100px; color: #003A83; font-size: 18px; text-align: center; line-height: 145%; padding: 19px 0 24px;transition: 0.5s;font-family: 'Noto-Sans-JP-Medium';}
#news .link_btn a.thumb-hover{opacity: 0.6;transition: 0.5s;}

/* ----------------------------- #question ------------------------------- */
#question{background: #2AA2E0; color: #fff;}
#question .question_bg{padding: 97px 0 146px;background: url(../images/top/q&a_bg_1.svg) no-repeat center center;background-size: 1652px;}
#question .question_bg .text_box .mini_tt{padding: 11px 0 0; font-family: 'Noto-Sans-JP-Medium';}
#question .question_bg ul{color: #003A83;width: 100%; height: auto; padding: 51px 0 0; }
#question .question_bg ul li.question_btn{background: #fff; border-radius: 19px;width: 100%; height: auto; padding: 39px 75px 41px 36px; position: relative;}
#question .question_bg ul li.question_btn:not(:last-child){margin: 0 0 20px;}
#question .question_bg ul li.question_btn span.clos{width: 27px; height: 27px; position: absolute; display: block; top: 50%; transform: translateY(-50%); right: 35px;}
#question .question_bg ul li.question_btn span.clos:before{content: ""; display: block; width: 100%; height: 2px; background: #003A83; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#question .question_bg ul li.question_btn span.clos:after{content: ""; display: block; width: 100%; height: 2px; background: #003A83; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotateZ(-90deg); transition: 0.5s;}
#question .question_bg ul li.question_btn.active span.clos:after{transition: 0.5s;transform: translate(-50%,-50%) rotateZ(-0deg); }
#question .question_bg ul li.question_btn p.question{font-family: fot-tsukubrdgothic-std, sans-serif; font-weight: 700; font-style: normal; position: relative; font-size: 27px; line-height: 160%; padding: 0 0 0 40px;}
#question .question_bg ul li.question_btn p.question span{font-family: fot-tsukubrdgothic-std, sans-serif; font-weight: 700; font-style: normal;display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0px; color: #2AA2E0; font-size: 30px;}
#question .question_bg ul li.question_btn p.answer{font-size: 18px; line-height: 160%; position: relative;padding: 0 0 0 40px;font-family: 'Noto-Sans-JP-Medium'; margin: 30px 0 0;display: none;}
#question .question_bg ul li.question_btn p.answer span{font-family: fot-tsukubrdgothic-std, sans-serif; font-weight: 700; font-style: normal;display: block; position: absolute; top: 0%; left: 0px; color: #E3628C; font-size: 30px;}

/* ----------------------------- #wish ------------------------------- */
#wish h3{color: #003A83; font-size: 60px;font-family: fot-tsukubrdgothic-std, sans-serif; font-weight: 700; font-style: normal; text-align: center; line-height: 160%;}
#wish .wish_bg{padding: 129px 0 148px;background: url(../images/top/wish_bg_1.svg) no-repeat center bottom 160px; background-size: 1600px;}
#wish .wish_bg ul{flex-wrap: wrap; padding: 64px 0 0 ;}
#wish .wish_bg ul li{width: 529px; height: auto; background: #fff; border-radius: 16px; display: flex; align-items: center; padding: 26px 18px 26px 29px; margin-bottom: 17px;}
#wish .wish_bg ul li:not(:nth-child(2n)){margin-right: 35px;}
#wish .wish_bg ul li p{font-family: 'Noto-Sans-JP-Regular';line-height: 177%; font-size: 17px; padding: 0 0 0 16px;}

@media only screen and (max-width: 640px) {
	/* ------------------------------------------------------------ 共通 */
	h3.title{font-size: 14px;line-height: 200%;}
	h3.title span{font-size: 36px;}
	.text_box .big_tt{font-size: 24px; padding: 25px 0 0;}
	.text_box .mini_tt{font-size: 14px; padding: 23px 0 0;line-height: 193%;font-family: 'Noto-Sans-JP-Medium';}
	img{width: 100%; height: auto;}
	/* ----------------------------- #fv ------------------------------- */
	#fv{padding: 50px 0 0 15px; position: relative; }
	#fv .img_box img{border-radius: 10px 0 0 0;}
	#fv h2{bottom: -45px; width: 80%; height: auto;}
	#fv .bg_1 {background:linear-gradient(to bottom, transparent 99%, #2AA2E0 5%)}
	/* ----------------------------- #about ------------------------------- */
	#about{background: #2AA2E0;}
	#about:before{display: none;}

	#about .about_bg{padding: 50.4% 0 27.4%; z-index: 1; position: relative;background: url(../images/top/about_bg_1_sp.svg) no-repeat center top, url(../images/top/about_bg_2_sp.svg) no-repeat center bottom; background-size: 100%,100%;}
	#about .text_box {position: relative; z-index: 2}
	#about .text_box .mini_tt{font-size: 14px;}
	#about .about_bg .about_box{position: relative;}
	#about .about_bg .about_box .img1{top: -20%; left: -14%; width: 50%;}
	#about .about_bg .about_box .img2{top: -11%; right: -16%; width: 41%;}
	#about .about_bg .about_box .img3{top: auto; bottom: 20.5%; left: -26%; width: 52%;}
	#about .about_bg .about_box .youtube_box{padding: 56.5% 0 0 ; width: 100%; margin: 83px auto 0; border: 5px solid #fff; border-radius: 10px; }
	#about .about_bg .about_box .youtube_box img{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
	
	#about .about_bg_4{position: absolute; bottom: 0px;width: 100%; left: 0px; right: 0px;}
	#about .about_bg_4 img{width: 100%; height: auto;}
	
	/* ----------------------------- #shops ------------------------------- */
	#shops{background: url(../images/top/shops_bg_2_sp.svg) no-repeat center top ,url(../images/top/shops_bg_5_sp.svg) no-repeat top 46% center; background-size: 100%,100%;}
	#shops .shops_bg_2{background: linear-gradient(to top, transparent 99%, #DFBA8A 5%);}
	#shops .shops_bg{padding: 107px 0 96px;background:url(../images/top/shops_bg_1_sp.svg) no-repeat center top 48px,url(../images/top/shops_bg_3_2.svg) no-repeat center bottom; background-size: 100%,100%;}
	#shops .shops_bg .text_box .big_tt{padding: 20px 0px 0px; text-align: center; font-size: 22px;}
	#shops .shops_bg .text_box .mini_tt{padding: 11px 0 0;}
	#shops .shops_bg ul{padding: 27px 0 0;}
	#shops .shops_bg ul li{border-radius: 10px; padding: 11px 12px 26px 12px; display: block;}
	#shops .shops_bg ul li:not(:last-child){margin: 0 0 21px;}
	#shops .shops_bg ul li .img {margin: 0 0 0;}
	#shops .shops_bg ul li .img img{border-radius: 10px; }
	#shops .shops_bg ul li .text{width: 100%;}
	#shops .shops_bg ul li .text h4{font-size: 20px; padding: 23px 0 0;}
	#shops .shops_bg ul li .text p{font-size: 14px; padding: 12px 0 0;line-height: 172%;}
	#shops .shops_bg ul li .text a{width: 89%; font-size: 16px; padding: 14px 0 16px;margin:24px auto 0;}
	#shops .shops_bg ul li .text a:before{width: 17px; height: 14px; right: 27px;}
	
	#shops .shops_bg_3 img{width: 100%; height: auto;}
	
	/* ----------------------------- #news ------------------------------- */
	#news{position: relative; background: #D0E7F4; }
	#news .news_bg{padding:44px 0 113px; background: url(../images/top/news_bg_1_sp.svg) no-repeat center top,url(../images/top/news_bg_2_sp.svg) no-repeat center bottom;background-size: 100%,100%; }
	#news .news_bg .text_box .mini_tt{padding: 11px 0 0;font-family: 'Noto-Sans-JP-Medium';}
	#news .news_bg ul{padding: 37px 0 0;display: block;}
	#news .news_bg ul li:not(:last-child){margin: 0 0 31px;}
	#news .news_bg ul li a{transition: 0.5s; display: flex;}

	#news .news_bg ul li{width: 100%; height: auto; display: flex; border-bottom: 1px solid #fff; padding: 0 0 18px;}
	#news .news_bg ul li .img img{border-radius: 10px; width: 100%; height: auto;}
	#news .news_bg ul li .text{padding: 0 0 0 17px; margin: -4px 0 0px;}
	#news .news_bg ul li .text .mini{font-size: 14px;}
	#news .news_bg ul li .text .text{font-size: 14px; line-height: 165%;padding: 9px 0 0;}
	#news .shops_bg_3{bottom: 0px; width: 100%; height: auto;z-index: 1;}
	
	#news .link_btn{margin: 30px auto 0; width: 80%;}
	#news .link_btn a{background: #fff url(../../nobicco_jumbo/images/top/icn_1.svg) no-repeat right 20px center; background-size: 12px; font-size: 14px; text-align: center;  padding: 14px 0 18px;}
	/* ----------------------------- #question ------------------------------- */
	#question .question_bg{background: url(../images/top/q&a_bg_1_sp.svg) no-repeat center top,url(../images/top/q&a_bg_2_sp.svg) no-repeat center bottom;background-size: 100%,100%; padding: 37px 0 111px;}
	#question .question_bg .text_box .mini_tt{padding: 11px 0 0;}
	#question .question_bg ul{width: 100%; height: auto; padding: 39px 0 0; }
	#question .question_bg ul li.question_btn{border-radius: 10px;width: 100%; height: auto; padding: 23px 40px 24px 13px; }
	#question .question_bg ul li.question_btn:not(:last-child){margin: 0 0 20px;}
	#question .question_bg ul li.question_btn span.clos{width: 16px; height: 16px; right: 14px;top: 27px; transform: none;}
	#question .question_bg ul li.question_btn p.question{font-size: 15px; padding: 0 0 0 25px;}
	#question .question_bg ul li.question_btn p.question span{font-size: 18px;}
	#question .question_bg ul li.question_btn p.answer{font-size: 13px; padding: 0 0 0 25px; margin: 23px 0 0;}
	#question .question_bg ul li.question_btn p.answer span{font-size: 18px;}
	
	/* ----------------------------- #wish ------------------------------- */
	#wish h3{font-size: 29px;}
	#wish .wish_bg{background: url(../images/top/wish_bg_1_sp.svg) no-repeat center top 22px, url(../images/top/wish_bg_2_sp.svg) no-repeat center bottom 10px; background-size: 100%,100%; padding: 43px 0 92px;}
	#wish .wish_bg ul{flex-wrap: wrap; padding: 39px 0 0 ;}
	#wish .wish_bg ul li{width: 100%; height: auto; border-radius: 10px; display: flex; align-items: center; padding: 19px 14px 15px 14px ; margin-bottom: 10px;}
	#wish .wish_bg ul li img{width: 20px; height: auto;}
	#wish .wish_bg ul li:not(:nth-child(2n)){margin-right: 0;}
	#wish .wish_bg ul li p{ font-size: 14px; padding: 0 0 0 7px;}
}