@charset "shift_jis";
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +base & parts   */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* --- base --- */
#landing{
	color: #333;
	font-size: 4.27vw;
}
#landing img{width: 100%;}
#landing small{font-size: .75em;}
.flexbox{
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
}
.notes{
	margin-top: 2vw;
	line-height: 1.0;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +landing  */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*======================
 fv
======================*/
.fv-ofr-wrap{
	padding: 0 0 10vw;
	background: url(../img/ofr_bg01.png) top/contain;
}
.fv h1{
	margin: 6vw 0 8vw;
}
.fv .flexbox .flex-left{
	margin-right: 4vw;
	text-align: center;
}
.fv .flexbox .flex-left p{
	color: #FFFFFF;
}
.fv .flexbox .flex-left .fv-txt01{
	margin-top: 2vw;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
}
.fv .flexbox .flex-left .fv-txt02{
	margin-top: 4vw;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
}
.ofr.ofr-top {
    margin: 0 4vw;
}
.fv{
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, #000), color-stop(95%, #000), to(transparent));
    -webkit-mask-image: -webkit-linear-gradient(top, transparent 0%, #000 0%, #000 95%, transparent 100%);
    mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, #000), color-stop(95%, #000), to(transparent));
    mask-image: linear-gradient(to bottom, transparent 0%, #000 0%, #000 95%, transparent 100%);
}

/*======================
 ofr
======================*/
.ofr{
	padding: 10vw 0 0;
}
.ofr .ofr-box{
	padding: 8vw 4vw;
	background-color: #FFFFFF;
	border-radius: 3vw;
}
.ofr .ofr-box .flexbox{
	margin-bottom: 6vw;
	justify-content: center;
}
.ofr .ofr-box .flex-left{
	margin-right: 4vw;
}
.ofr .ofr-box .flex-right{
	position: relative;
}
.ofr .ofr-box .flex-right .ofr-txt01{
	margin-bottom: 3vw;
	font-size: 1.3em;
	line-height: 1.2;
	font-weight: bold;
}
.ofr .ofr-box .flex-right .ofr-txt01 span{
	font-size: 0.8em;
}
.ofr .ofr-box .flex-right .ofr-icon{
	position: absolute;
	top: 5vw;
	right: -3vw;
	width: 15vw;
}
.ofr .ofr-box .ofr-off{
	margin-bottom: 5vw;
	text-align: center;
}
/* --- オファー内の購入ボタン調整 --- */
.cp_ofr_btn a{
	padding: 5% 10%;
	font-size: 1.2em;
	font-weight: bold;
}

/*======================
 movie
======================*/
.movie{
	padding: 10vw 10vw;
	background:  url(../img/movie_bg01.png) no-repeat top/cover;
}
.movie .movie-box,
.movie .movie-box iframe{
	height: 80vw;
}

/*======================
 negative
======================*/
.negative .negative-inner{
	padding: 12vw 0;
	background: url(../img/negative_bg01.png) top/contain;
}
.negative .negative-inner .negative-img{
	margin: 12vw 0;
}

/*======================
 feature
======================*/
.feature{
	padding: 12vw 4vw 23vw;
	background: url(../img/feature_bg01.png);
}
.feature h2{
	margin-bottom: 8vw;
}
.feature .feature-list .feature-box{
	margin-bottom: 6vw;
	padding: 7vw 4vw;
	background-color: #FFFFFF;
	border: 2vw solid #00b4ef;
	border-radius: 5vw;
}
.feature .feature-list .feature-box h3{
	margin-bottom: 6vw;
}
.feature .feature-list .feature-box .feature-img{
	margin-bottom: 4vw;
}

/*======================
 scene
======================*/
.scene{
	position: relative;
}
.scene h2{
	position: absolute;
	top: -15vw;
	width: 100%;
}

/*======================
 cloth
======================*/
.cloth{
	padding: 28vw 5vw;
	background: url(../img/scene_bg02.png) no-repeat bottom/contain, url(../img/scene_bg01.png) top/contain;
}
.cloth h3{
	margin-bottom: 8vw;
}
.cloth .cloth-list .cloth-box{
	margin-bottom: 6vw;
	padding: 8vw 4vw;
	background-color: #FFFFFF;
	box-shadow: 2vw 2vw 0px 0 rgb(44, 92, 183);
	border-radius: 5vw;
}
.cloth .cloth-list .cloth-box h4{
	margin-bottom: 6vw;
}
.cloth .cloth-list .cloth-box .cloth-img{
	margin: 4vw 0;
}
.cloth .cloth-list .cloth-box.box02 .cloth-txt01{
	margin-bottom: 2vw;
	font-weight: bold;
	text-align: center;
}
.cloth .cloth-list .cloth-box.box02 .cloth-img{
	margin-bottom: 8vw;
}
.cloth .cloth-list .cloth-box.box02 .cloth-movie{
	width: 100%;
	text-align: center;
}
.cloth .cloth-list .cloth-box.box02 .cloth-movie .video{
	width: 65%;
	margin: 0 auto 3vw;
}
.cloth .cloth-list .cloth-box.box02 .cloth-movie .video .hacobune-app-container{
	border-radius: 3vw;
}

/*======================
 kitchen
======================*/
.kitchen{
	padding: 6vw 5vw 22vw;
	background: url(../img/kitchen_bg01.png) top/contain;
}
.kitchen h3{
	margin-bottom: 8vw;
}
.kitchen .kitchen-list .kitchen-box{
	margin-bottom: 6vw;
	padding: 8vw 4vw;
	background-color: #FFFFFF;
	box-shadow: 2vw 2vw 0px 0 rgb(44, 92, 183);
	border-radius: 5vw;
}
.kitchen .kitchen-list .kitchen-box h4{
	margin-bottom: 6vw;
}
.kitchen .kitchen-list .kitchen-box .kitchen-img{
	margin-bottom: 4vw;
}
.kitchen .kitchen-list .kitchen-box .kitchen-hard{
	margin: 8vw 0 6vw;
}
.kitchen .kitchen-list .kitchen-box .kitchen-movie{
	width: 100%;
	text-align: center;
}
.kitchen .kitchen-list .kitchen-box .kitchen-movie .video{
	width: 85%;
	margin: 0 auto 3vw;
}
.kitchen .kitchen-list .kitchen-box .kitchen-movie .video .hacobune-app-container{
	border-radius: 3vw;
}

/*======================
 wipe
======================*/
.wipe{
	position: relative;
	padding: 30vw 0 20vw;
	background: url(../img/wipe_bg02.png) no-repeat bottom/contain, url(../img/wipe_bg01.png) no-repeat top/cover;
}
.wipe h2{
	position: absolute;
	top: -15vw;
	width: 100%;
}
.wipe .wipe-inner{
	padding: 0 2vw;
}
.wipe .wipe-inner .wipe-txt01{
	margin: 0 2vw 6vw;
	padding: 5vw 5vw;
	background-color: #FFFFFF;
	border-radius: 3vw;
	box-shadow: 0 0 1vw 0.1vw rgb(0, 54, 166, 0.2);
	font-size: 0.95em;
	font-weight: bold;
	line-height: 1.4;
}
.wipe .wipe-inner .wipe-img{
	margin-bottom: 6vw;
}

/*======================
 sink
======================*/
.sink{
	padding: 4vw 4vw 30vw;
	background: url(../img/sink_bg02.png) no-repeat bottom/contain, url(../img/sink_bg01.png) top/contain;
}
.sink h3{
	margin-bottom: 8vw;
}
.sink .sink-txt01{
	margin-bottom: 10vw;
	padding: 5vw 5vw;
	background-color: #FFFFFF;
	border-radius: 3vw;
	box-shadow: 0 0 1vw 0.1vw rgb(0, 54, 166, 0.2);
	font-size: 0.95em;
	font-weight: bold;
	line-height: 1.4;
}
.sink .sink-box{
	margin-bottom: 10vw;
}
.sink .sink-box h4,
.sink .basin-box h4{
	margin-bottom: 4vw;
}
.sink .sink-box .sink-img,
.sink .basin-box .sink-img{
	margin-bottom: 3vw;
}
.sink .sink-movie{
	width: 100%;
	text-align: center;
}
.sink .sink-movie .video{
	width: 85%;
	margin: 0 auto 3vw;
}
.sink .sink-movie .video .hacobune-app-container{
	border-radius: 3vw;
}

/*======================
 drain
======================*/
.drain{
	padding: 4vw 0 18vw;
	background: url(../img/drain_bg01.png) top/contain;
}
.drain .drain-inner{
	padding: 0 4vw 20vw;
}
.drain h3{
	margin-bottom: 6vw;
}
.drain .drain-img{
	margin-bottom: 4vw;
}
.drain .text-wrap{
	margin: 0 2vw;
}
.drain .drain-pipe{
	margin-top: 8vw;
}

/*======================
 value
======================*/
.value{
	text-align: center;
}
.value h2{
	margin: 4vw 19vw;
}
.value p{
	margin-inline: 4vw;
}

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

/*======================
 spec
======================*/
.spec h2{
	padding: 3vw 0;
	color: #fff;
	background: #0036a6;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
}
.spec table{
	width: 100%;
	font-size: 0.8em;
}
.spec tr{
	border-left: 0.1em #0036a6 solid;
	border-right: 0.1em #0036a6 solid;
	border-bottom: 0.1em #0036a6 solid;
}
.spec th,.spec td{
	padding: 3vw;
}
.spec th{
	width: 25%;
	background-color: #f2fcff;
	font-weight: normal;
	text-align: left;
}

/*======================
 visumo
======================*/
#landing img.hacobune-video-icon.hacobune-card-slider-video-icon {
    width: unset;
}
#landing .hacobune-logo img.hacobune-logo-image{
    width: 55px;
}
#landing .visumo_title {
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    margin: 2em 0 0.5em;
}