@charset "shift_jis";
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +base & parts   */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* --- base --- */
#landing{
	overflow: hidden;
	color: #333;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-size: 20px;
	text-align: left;
}
#landing *{
	box-sizing: border-box;
}
.flexbox{
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
}
.notes{
	margin-top: 15px;
	line-height: 1.0;
}

/* --- リンク画像の透過--- */
a:hover{opacity: .65;-webkit-opacity: .65;-moz-opacity: .65;}
a{-webkit-transition: opacity .2s ease-out;-moz-transition: opacity .2s ease-out;-ms-transition: opacity .2s ease-out;transition: opacity .2s ease-out;}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +landing  */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*======================
 fv
======================*/
.fv-ofr-wrap{
	padding: 100px 50px;
	background: url(../img/fv_bg01.png) no-repeat top/contain, url(../img/ofr_bg01.png) top/contain;
}
.fv .flexbox{
	text-align: center;
}
.fv .flexbox h1{
	margin: 25px 0 0;
}
.fv .flexbox p{
	margin-bottom: 12px;
	color: #FFFFFF;
}
.fv .flexbox .flex-left{
	margin-right: 20px;
}
.fv .flex01{
	margin-bottom: 10px;
}
.fv .flex02{
	justify-content: center;
	align-items: center;
}
.fv .flex02 .flex-left .fv-txt01{
	font-size: 34px;
	font-weight: bold;
}

/*======================
 ofr
======================*/
.ofr{
	padding-top: 50px;
}
.ofr .ofr-box{
	padding: 70px 50px;
	background-color: #FFFFFF;
	border-radius: 30px;
}
.ofr .ofr-box .flexbox{
	margin-bottom: 40px;
	justify-content: center;
	align-items: center;
}
.ofr .ofr-box .flexbox .flex-left{
	margin-right: 50px;
}
.ofr .ofr-box .flexbox .flex-right{
	position: relative;
}
.ofr .ofr-box .flexbox .flex-right .ofr-txt01{
	margin-bottom: 20px;
	font-size: 52px;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: -3px;
}
.ofr .ofr-box .flexbox .flex-right .ofr-txt01 span{
	font-size: 0.8em;
}
.ofr .ofr-box .flexbox .flex-right .ofr-icon{
	position: absolute;
	top: 58px;
	left: 340px;
}
.ofr .ofr-box .ofr-off{
	margin-bottom: 30px;
	text-align: center;
}
/* --- オファー内の購入ボタン調整 --- */
.cp_ofr_btn a{
	padding: 18px;
	font-size: 28px;
}

/*======================
 movie
======================*/
.movie{
	padding: 50px 220px;
	text-align: center;
	background:  url(../img/movie_bg01.png) no-repeat top/cover;
}
.movie .movie-box,
.movie .movie-box iframe{
	height: 540px;
}

/*======================
 negative
======================*/
.negative .negative-inner{
	padding: 80px 0;
	text-align: center;
	background: url(../img/negative_bg01.png) top/contain;
}
.negative .negative-inner .negative-img{
	margin: 60px 0;
}

/*======================
 feature
======================*/
.feature{
	padding: 70px 70px 150px;
	background: url(../img/feature_bg01.png);
}
.feature h2{
	margin-bottom: 50px;
	text-align: center;
}
.feature .feature-list .feature-box{
	margin-bottom: 40px;
	padding: 60px;
	border: 10px solid #00b4ef;
	border-radius: 40px;
	box-shadow: 0 0 10px 1px rgb(0, 54, 166, 0.2);
	background-color: #FFFFFF;
}
.feature .feature-list .feature-box h3{
	margin-bottom: 50px;
	text-align: center
}
.feature .feature-list .feature-box .flexbox{
	align-items: center;
}
.feature .feature-list .feature-box .flexbox .flex-left{
	margin-right: 30px;
}

/*======================
 scene
======================*/
.scene{
	position: relative;
}
.scene h2{
	position: absolute;
	top: -135px;
}

/*======================
 cloth
======================*/
.cloth{
	padding: 200px 80px 150px;
	background: url(../img/scene_bg02.png) no-repeat bottom/contain, url(../img/scene_bg01.png) top/contain;
}
.cloth h3{
	margin-bottom: 70px;
	text-align: center
}
.cloth .cloth-list .cloth-box{
	margin-bottom: 60px;
	padding: 60px 30px;
	box-shadow: 15px 15px 0px 0 rgb(44, 92, 183);
	border-radius: 40px;
	background-color: #FFFFFF;
}
.cloth .cloth-list .cloth-box h4{
	margin-bottom: 40px;
	text-align: center;
}
.cloth .cloth-list .cloth-box h4.cloth-rubbing{
	margin-top: 60px;
}
.cloth .cloth-list .cloth-box .flex-left{
	margin-right: 30px;
}
.cloth .cloth-list .cloth-box .flexbox{
	align-items: center;
}
.cloth .cloth-list .box01 .flexbox{
	margin-top: 30px;
}
.cloth .cloth-list .box02 .cloth-txt01{
	margin-bottom: 30px;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
}
.cloth .cloth-list .box02 .cloth-movie .video{
	width: 48%;
}
.cloth .cloth-list .box02 .cloth-movie .video .hacobune-app-container{
	border-radius: 20px;
}

/*======================
 kitchen
======================*/
.kitchen{
	padding: 50px 80px 180px;
	background: url(../img/kitchen_bg01.png) top/contain;
}
.kitchen h3{
	margin-bottom: 70px;
	text-align: center;
}
.kitchen .kitchen-list .kitchen-box{
	margin-bottom: 40px;
	padding: 50px 30px;
	box-shadow: 12px 16px 0px 0 rgb(44, 92, 183);
	border-radius: 30px;
	background-color: #FFFFFF;
}
.kitchen .kitchen-list .kitchen-box .text-box{
	margin: 0 60px;
}
.kitchen .kitchen-list .kitchen-box h4,
.kitchen .kitchen-list .kitchen-box .kitchen-img{
	margin-bottom: 40px;
	text-align: center;
}
.kitchen .kitchen-list .kitchen-box h4.kitchen-hard{
	margin-top: 50px;
}
.kitchen .kitchen-list .kitchen-box .kitchen-movie{
	text-align: center;
}
.kitchen .kitchen-list .kitchen-box .kitchen-movie .video{
	width: 65%;
	margin: auto;
}
.kitchen .kitchen-list .kitchen-box .kitchen-movie .video .hacobune-app-container{
	border-radius: 20px;
}

/*======================
 wipe
======================*/
.wipe{
	position: relative;
	padding: 200px 0 120px;
	background: url(../img/wipe_bg02.png) no-repeat bottom/contain, url(../img/wipe_bg01.png) no-repeat top/cover;
}
.wipe h2{
	position: absolute;
	top: -135px;
}
.wipe .wipe-inner{
	padding: 0 40px;
}
.wipe .wipe-inner .wipe-txt01{
	margin: 0 60px 30px;
	padding: 40px 60px;
	font-size: 22px;
	font-weight: bold;
	border-radius: 20px;
	box-shadow: 0 0 10px 1px rgb(0, 54, 166, 0.2);
	background-color: #FFFFFF;
}
.wipe .wipe-inner .wipe-img01{
	text-align: center;
}

/*======================
 sink
======================*/
.sink{
	padding: 20px 80px 120px;
	background: url(../img/sink_bg02.png) no-repeat bottom/contain, url(../img/sink_bg01.png) top/contain;
}
.sink h3{
	margin-bottom: 50px;
	text-align: center;
}
.sink .sink-txt01{
	margin-bottom: 60px;
	padding: 40px 60px;
	font-size: 20px;
	font-weight: bold;
	border-radius: 20px;
	box-shadow: 0 0 10px 1px rgb(0, 54, 166, 0.2);
	background-color: #FFFFFF;
}
.sink .sink-box{
	margin-bottom: 80px;
}
.sink .sink-box h4,
.sink .basin-box h4{
	margin-bottom: 20px;
	text-align: center;
}
.sink .sink-box .sink-img,
.sink .basin-box .sink-img{
	margin-bottom: 30px;
	text-align: center;
}
.sink .sink-movie{
	text-align: center;
}
.sink .sink-movie .video{
	width: 65%;
	margin: auto;
}
.sink .sink-movie .video .hacobune-app-container{
	border-radius: 20px;
}

/*======================
 drain
======================*/
.drain{
	padding: 50px 0 80px;
	background: url(../img/drain_bg01.png) top/contain;
}
.drain .drain-inner{
	padding: 0 80px 100px;
}
.drain h3{
	margin-bottom: 30px;
	text-align: center;
}
.drain .drain-img{
	margin-bottom: 20px;
	text-align: center;
}
.drain .text-wrap{
	margin: 0 50px;
}
.drain .drain-pipe{
	margin-top: 30px;
}
.drain h4{
	text-align: center;
}

/*======================
 value
======================*/
.value{
	margin-top: 80px;
	text-align: center;
}
.value h2+p{
	margin-top: -15px;
}

/*======================
 ofr-bottom
======================*/
.ofr-bottom{
	padding: 70px 50px;
	background: url(../img/ofr_bg01.png) top/contain;
}
.ofr-bottom .flex-right p:last-of-type{
	margin-top: 10px;
	font-size: .8em;
}

/*======================
 spec
======================*/
.spec h2{
	padding: 20px 0;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background: #0036a6;
}
.spec table{
	width: 100%;
	font-size: 18px;
}
.spec tr{
	border-left: 1px #0036a6 solid;
	border-right: 1px #0036a6 solid;
	border-bottom: 1px #0036a6 solid;
}
.spec th,.spec td{
	padding: 15px 35px;
}
.spec th{
	width: 20%;
	font-weight: normal;
	text-align: left;
	background-color: #f2fcff;
}