@charset "utf-8";
/* ------------------------------------------------------------ 共有 ------------------------------------------------------------ */
main{ position: relative; }
.flex{display: flex;}
a.view_btn.line{background: #00C755 url(../images/common/icn_1.svg) no-repeat left 10px center; background-size: 50px; border-radius: 100px; text-align: center; font-size: 21px; padding: 14px 35px 15px 63px; display: block;font-family: 'Noto-Sans-JP-Bold'; color: #fff; margin: 17px auto 0; max-width: 300px; width: 100%;}
.taberu_crew_box .crew_box_pc{display: none;}
.taberu_box{max-width: 390px; position: relative; margin: 0 auto; z-index: 100;box-shadow: 0 0 4px 3px rgba(0,0,0,0.07);}
body:before{content: ""; display: block; position: fixed; width: 100%; height: 100vh; background: linear-gradient(to bottom,#FDE1B2 50%,#FEFCF5 80%); }

.view_btn{transition: 0.5s; opacity: 1;}
.view_btn.thumb-hover{transition: 0.5s; opacity: 0.5;}

.float_btn{ width: 100%; max-width: 390px; text-align: center; }
.rec_btn{ background: #FF7F02; max-width: 338px; width: 85%; height: 68px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 17px; border-radius: 100px; font-size: 23px; color: #fff!important; font-family: 'Noto-Sans-JP-Bold'; }
.rec_btn .arrow{ position: relative; background: #fff; border-radius: 100px; width: 40px; height: 40px; }
.rec_btn .arrow:before{ position: absolute; content: ""; left: 35%; top: 50%; transform: rotate(45deg) translate(-50%,-50%); width: 15px; height: 15px; border-right: 2px solid #FF7F02; border-bottom: 2px solid #FF7F02; }


/* ------------------------------------------------------------ offers ------------------------------------------------------------ */
#offers{ position: ab; padding: 50px 0 30px; background: linear-gradient(178deg,rgba(253, 197, 107, 1) 0%, rgba(149, 155, 221, 1) 100%); text-align: center; }
#offers:before{ position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 195px; clip-path: polygon(51% 40%, 100% 0, 100% 100%, 0 100%, 0 0); background: #F8F3E8; }
#offers .offers_wrapper{ position: relative; }

#offers h3{display: inline-block; color: #fff; position: relative;padding: 0 0 20px;}
#offers 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: 20px; right: -19px;}
#offers h3:after{content: ""; display: block; width: 63px; height: 63px; background: url(../images/index/icn_logo_18.png?var=1111) no-repeat center center; background-size: 100%; position: absolute; right: -73px; top: -41px;}
#offers h3 span{ padding: 0; }
#offers .offers-bnr{ position: relative; margin: 0 0 55px; }
#offers .offers-bnr:before{background: url(../images/index/icn_logo_19.png?var=1111) no-repeat center center; background-size: 100%; width: 59px; height: 48px; content: ""; display: block; position: absolute; bottom: -33px; left: 0; z-index: 1;}
#offers .white_mark{ margin: 0 0 75px; }
#offers .white_mark span{display: inline-block; background: #fff; font-size: 18px; line-height: 180%; padding: 0px 4px;}
#offers .white_mark span:not(:last-child){margin: 0 0 10px;}


/* ------------------------------------------------------------ header ------------------------------------------------------------ */
header {background: #FEFCF7; padding: 13px 11px 14px 20px; position: fixed; width: 100%; z-index: 1000; max-width: 390px;}
header .flex h1 a{display: block; padding: 10px 0;}
header .flex{align-items: center; justify-content: space-between;}
header .flex .view_btn{background: #00C755; border-radius: 100px; color: #fff; font-family: 'Noto-Sans-JP-Bold'; text-align: center; line-height: 140%; padding: 10px 20px;}
/* ------------------------------------------------------------ footer ------------------------------------------------------------ */
footer{background: #2C2C2C; text-align: center; padding: 40px 0 3px;}
footer p{font-family: 'Noto-Sans-JP-Light'; font-size: 13px;line-height: 160%;color: #fff; padding: 22px 0 0;}


@media only screen and (min-width: 1100px) {
	
	.taberu_box{ margin: 0 134px 0 auto;}

	/* ------------------------------------------------------------ taberu_box ------------------------------------------------------------ */
	.taberu_crew_box{max-width: 1212px;width: 100%; margin: 0 auto; display: flex; padding: 0 50px;}
	.taberu_crew_box .crew_box_pc{position: fixed; z-index: 1; width: 91%; max-width: 1112px;height: 100vh; display: block;}
	.taberu_crew_box .line_box_pc{ width: 400px; text-align: center; padding: 237px 0 0;}
	.taberu_crew_box .line_box_pc p.bg_white{background: #fff; font-size: 22px;display: inline-block; margin: 17px 0 0; line-height: 140%;}
	.taberu_crew_box .line_box_pc .tt_box{padding: 51px 0 0;}
	.taberu_crew_box .line_box_pc .tt_box p{font-size: 20px; line-height: 160%;}
	.taberu_crew_box .line_box_pc .tt_box p:not(:last-child){padding: 0 0 30px;}
	.taberu_crew_box .line_box_pc a.line{max-width: 376px; border: 2px solid #fff; font-size: 22px; padding: 26px 35px 26px 70px; position: relative; line-height: 146%;text-align: left;font-family: 'Noto-Sans-JP-Medium'; margin: 55px auto 0;}
	.taberu_crew_box .line_box_pc a.line:before{content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%) rotateZ(-45deg); right: 30px; width: 14px; height: 14px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;}
	.taberu_crew_box .copy_light{position: absolute; right: 0px; bottom: 0px; z-index: 1; color: #000; writing-mode: vertical-rl; font-size: 11px; padding: 0 0 75px;}	
}

@media only screen and (max-width: 600px) {
	body:before{display: none;}
	header {max-width: 100%;}
	.taberu_box{max-width: 100%;margin: 0 auto;  }
	.float_btn{ max-width: 100%; }
}