@charset "utf-8";
@font-face {
	font-family: "sagoe";
	src: url("../fonts/segoeui.eot?") format('eot');
	src: url("../fonts/segoeui.woff") format('woff'),
		url("../fonts/segoeui.ttf")  format('truetype');
}

.sagoe { font-family: "sagoe"; font-weight: bold; }

body { color: #333; overflow: hidden; overflow-y: scroll; }

.space-10 { padding-top: 10px; }
.space-15 { padding-top: 15px; }
.space-30 { padding-top: 30px; }
.space-45 { padding-top: 45px; }
.space-60 { padding-top: 60px; }
.space-90 { padding-top: 90px; }
.space-120 { padding-top: 120px; }

.color-1 { color: #3f5da8; }
.color-2 { color: #336600; }
.color-3 { color: #663300; }
.color-4 { color: #669933; }
.color-5 { color: #ff7700; }

hr { margin: 60px 0; }
hr.mt-0, hr.mh-0 { margin-top: 0 !important; }
hr.mb-0, hr.mh-0 { margin-bottom: 0 !important; }

.sep-bg { background-color: #f1f4f9; padding: 60px 0; margin-top: 60px; }
.sep-bg.mt-0, .sep-bg.mh-0 { margin-top: 0 !important; }
.sep-bg.mb-0, .sep-bg.mh-0 { margin-bottom: 0 !important; }
.sep-bg.pt-0, .sep-bg.ph-0 { padding-top: 0 !important; }
.sep-bg.pb-0, .sep-bg.ph-0 { padding-bottom: 0 !important; }
.sep-bg.yellow-bg { background: url(../img/yellow_bg.jpg) transparent center; background-size: 100% auto; }

section {
	position: relative;
	background-color: #fff;
	z-index: 100;
}
section > .in-wrapper { padding-top: 90px; padding-bottom: 90px; }
section > .in-wrapper.pt-0, section > .in-wrapper.ph-0 { padding-top: 0 !important; }
section > .in-wrapper.pb-0, section > .in-wrapper.ph-0 { padding-bottom: 0 !important; }

header {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 900;
}
.navbar-nav {
	float: none!important;
	font-size: 1em !important;
	margin: 0 !important;
	padding: 15px;
}
.navbar-nav > li {
	float: none;
	display: block !important;
	width: 100% !important;
	text-align: left;
	border-left: none !important;
	padding: 0;
}
.navbar-default { background: none !important; }
.navbar-default .navbar-nav > li > a {
	font-family: "sagoe";
	letter-spacing: 0.05em;
	text-shadow: none !important;
}

#home .firstview {
	background: url(../img/firstview.jpg) center no-repeat;
	background-size: cover;
}
	#home .firstview .copy {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 35%;
		max-width: 512px;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}
		#home .firstview .copy > * {
			padding-top: 75.5859375%;
			background-image: url(../img/fv_good_sleep.png);
		}
	
	#home .in-label {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		line-height: 2.5em;
		letter-spacing: 0.4em;
		text-indent: 0.4em;
		background-color: #336600;
		/*background-color: #223519;*/
		z-index: 200;
	}

#home .side .inner {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 30px;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
	#home .side .inner .copy {
		width: 60%;
		max-width: 186px;
		margin: 0 auto 15%;
	}
		#home .side .inner .copy > * {
			padding-top: 120.4301075%;
			background-image: url(../img/fv_copy.png);
		}

	#home .side .inner .logo {
		width: 65%;
		max-width: 200px;
		margin: 0 auto 15%;
	}
		#home .side .inner .logo > * {
			padding-top: 59.1478696%;
			background-image: url(../img/fv_logo.png);
		}

	#home .side .inner .logo-text {
		width: 90%;
		max-width: 290px;
		margin: 0 auto 15%;
	}
		#home .side .inner .logo-text > * {
			padding-top: 3.7800687%;
			background-image: url(../img/fv_title.png);
		}

	#home .side .inner ul {
		position: relative;
		display: block;
		width: 100%;
		list-style: none;
	}
		#home .side .inner ul li {
			position: relative;
			display: block;
			width: 100%;
			white-space: nowrap;
		}
			#home .side .inner ul li a {
				position: relative;
				display: inline-block;
				font-family: "メイリオ", Meiryo, Osaka;
				line-height: 2.0em;
				letter-spacing: 0.1em;
				padding-left: 15px;
			}
				#home .side .inner ul li a:before {
					position: absolute;
					display: block;
					top: 50%;
					left: 0;
					color: #669933;
					font-size: 0.75em;
					line-height: 1em;
					-webkit-transform-origin: center;
					-moz-transform-origin: center;
					transform-origin: center;
					-webkit-transform: scaleX(0.7) rotate(90deg) translateX(-50%);
					-moz-transform: scaleX(0.7) rotate(90deg) translateX(-50%);
					transform: scaleX(0.7) rotate(90deg) translateX(-50%);
					content: "▲";
				}

.on-mouse {
	position: absolute;
	overflow: hidden;
	right: 0;
	bottom: 30px;
	width: 60px;
	border-radius: 50%;
	background-color: #fff;
	-webkit-transform: translateX(50%);
	-moz-transform: translateX(50%);
	transform: translateX(50%);
}
	.on-mouse > * {
		padding-top: 100%;
		background-image: url(../img/wheel.png); 
	}

.fullscreen {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 31.25%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 90px 0 60px;
}
.fullscreen.mt-0, .fullscreen.mh-0 { margin-top: 0 !important; }
.fullscreen.mb-0, .fullscreen.mh-0 { margin-bottom: 0 !important; }
#concept .fullscreen { background-image: url(../img/concept_fv.jpg); }
#overview .fullscreen { background-image: url(../img/overview_fullscreen.jpg); }

.youtube-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.youtube-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.full-half > * { overflow: hidden; }

.full-half h2 { letter-spacing: normal; line-height: 1.5em; }

.full-half .table {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: table;
	width: 100%;
	height: 100%;
	margin: 0;
}

.full-half .table > .table-cell {
	position: relative;
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}

.full-half .data-note .table > .table-cell {
	padding: 0 60px;
}

.full-half .data-note dl {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
}

.full-half .data-note dl dt {
	position: relative;
	float: left;
	display: block;
	line-height: 2em;
}

.full-half .data-note dl dd {
	position: relative;
	display: block;
	line-height: 2em;
	margin-left: 100px;
}

.full-half .data-note dl dd + dt {
	clear: both;
}

.index-seal {
	position: absolute;
	top: 0;
	left: 0;
	bottom: auto;
	width: 25%;
	max-width: 472px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	transform-origin: top left;
	z-index: 200;
}
.index-seal > * { padding-top: 38.1355932%; }
.index-seal.active { width: 12%; }

#naturflex .index-seal > * { background-image: url(../img/index_1.png); }
#relax2000 .index-seal > * { background-image: url(../img/index_2.png); }
#latexmattress .index-seal > * { background-image: url(../img/index_3.png); }
#baseframe .index-seal > * { background-image: url(../img/index_4.png); }
#wool_bed_pad .index-seal > * { background-image: url(../img/index_5.png); }

.fukidashi {
	position: relative;
	line-height: 1.8em;
	padding: 30px;
	background-color: #fff;
	border-radius: 10px;
}
.fukidashi .note { line-height: 1.8em; }

.fukidashi .arrow {
	position: absolute;
	top: 50%;
	right: -30px;
	width: 30px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}

.fukidashi .arrow > * {
	-webkit-transform: scaleX(0.75) rotate(90deg);
	-moz-transform: scaleX(0.75) rotate(90deg);
	transform: scaleX(0.75) rotate(90deg);
}

.fukidashi + .fukidashi {
	margin-top: 30px;
}

.fukidashi + .fukidashi:before {
	position: absolute;
	top: -35px;
	left: 50%;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 20px 0;
	border-color: #fff transparent transparent;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
	content: "";
}

.in-blockquote {
	padding: 30px;
	border: solid 1px #333;
	border-radius: 10px;
}

.video {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 75.2727272%;
}

#comfort-shoulder-zone .video {
	padding-top: 47.4056603%;
}

.video > video {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.border-thumb img {
	border: solid 1px #ccc;
}

.notes { line-height: 1.8em; }

.overview-title {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-shadow: -1px -1px 8px rgba(0,0,0,0.25),
				 -1px 1px 8px rgba(0,0,0,0.25),
				 1px -1px 8px rgba(0,0,0,0.25),
				 1px 1px 8px rgba(0,0,0,0.25);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}
#overview .thumbnails img { border: solid 1px #fff; }

#wool_bed_pad_ph {
	padding-left: 15px;
	padding-right: 15px;
}

table.size {
	border-collapse: separate;
	padding: 0;
	margin: 0;
}

table.size td {
	padding-right: 15px;
}

footer {
	position: relative;
	z-index: 100;
}

.footer-logo {
	position: relative;
	width: 200px;
	margin: 0 auto;
}

.footer-logo > * {
	padding-top: 59.1478696%;
	background-image: url(../img/fv_logo.png);
}

footer hr { width: 80px; margin: 0 auto; }

.copyright { background-color: #663300; }

.pagetop {
	position: fixed;
	display: block;
	right: 30px;
	bottom: 90px;
	overflow: hidden;
	width: 60px;
	border-radius: 50%;
	background-color: rgba(102,51,0,0.5);
	z-index: 900;
}

.pagetop:not(.active){
	bottom: -60px;
}

.pagetop > * {
	padding-top: 100%;
	background-image: url(../img/pagetop.png);
	background-position: top center;
	background-size: 100% auto;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
}

.pagetop:hover {
	background-color: rgba(102,51,0,1);
}

.pagetop:hover > * {
	background-position: bottom center;
}

@media screen and (min-width:768px){
	section { height: auto !important; }
}
@media screen and (min-width:992px){
	#home { position: fixed; top: 0; left: 0; width: 100%; z-index: 0; }
	#wool_bed_pad_ph {
		width: 75%;
		margin: 0 auto;
	}

	header {
		top: 50%;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	header.init {
		right: -100px;
	}

	.navbar-default .navbar-nav > li {
		position: relative;
		text-align: right;
	}
	.navbar-default .navbar-nav > li { margin-top: 5px; }
	.navbar-default .navbar-nav > li:after{
		content: "."; 
		display: block; 
		height: 0; 
		font-size:0;	
		clear: both; 
		visibility:hidden;
	}
	.navbar-default .navbar-nav > li > a {
		position: relative;
		float: right;
		overflow: hidden;
		display: block;
		color: #666 !important;
		font-size: 0.875em;
		line-height: 1em;
		padding: 0 20px 0 0;
		box-sizing: content-box;
		white-space: nowrap;
	}
	.navbar-default .navbar-nav > li > a:not(:hover){
		width: 0 !important;
	}
	.navbar-default .navbar-nav > li > a:after {
		position: absolute;
		top: 50%;
		right: 4px;
		display: block;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: #ccc;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		transform: translateY(-50%);
		content: "";
	}
	.navbar-default .navbar-nav > li > a:hover:after {
		-webkit-transform: translateY(-50%) scale(1.5,1.5);
		-moz-transform: translateY(-50%) scale(1.5,1.5);
		transform: translateY(-50%) scale(1.5,1.5);
		background-color: #ff9900;
	}
	.navbar-default .navbar-nav > li > a > * {
		position: relative;
		float: right;
		display: inline-block;
		line-height: 1em;
		padding: 5px;
		border-radius: 3px;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;
	}
	.navbar-default .navbar-nav > li > a:hover > * {
		background-color: rgba(255,255,255,0.75);
	}
}
@media screen and (min-width:1200px){
	#wool_bed_pad_ph {
		position: absolute;
		width: 50%;
		left: 47%;
		bottom: 0;
	}
	#wool_bed_pad_ph .col-xs-6 > span { font-size: 0.8vw; }
}

@media screen and (max-width:1360px){
	#home .side .inner ul li a { letter-spacing: normal; }
}

@media screen and (max-width:1199px){
	body { font-size: 0.875em; line-height: 1.7em; }
	.space-10 { padding-top: 7px; }
	.space-15 { padding-top: 10px; }
	.space-30 { padding-top: 20px; }
	.space-45 { padding-top: 30px; }
	.space-60 { padding-top: 45px; }
	.space-90 { padding-top: 60px; }
	.space-120 { padding-top: 90px; }
	#home .side .inner ul li a { padding-left: 10px; }
	.full-half .data-note .table > .table-cell { padding-left: 30px; padding-right: 30px; }
	.full-half .data-note .table > .table-cell > h2 { font-size: 1.75em; }
}

@media screen and (max-width:991px){
	#home .firstview .copy { width: 60%; }
	.font-1 { font-size: 1.0em; }
	.font-2 { font-size: 1.125em; }
	.font-3 { font-size: 1.3125em; }
	.font-4 { font-size: 1.5em; }
	.font-5 { font-size: 1.875em; }
	.font-6 { font-size: 2.25em; }

	hr { margin: 45px 0; }
	.sep-bg { padding: 45px 0; margin-top: 45px; }
	section > .in-wrapper { padding-top: 60px; padding-bottom: 60px; }
	.fullscreen { margin: 60px 0 45px; }

	.footer-logo { width: 175px; }
	.pagetop { width: 45px; right: 15px; bottom: 60px; }

	header {
		top: 0;
		padding-top: 50px;
		margin-top: -50px;
		-webkit-transform: none !important;
		-moz-transform: none !important;
		transform: none !important;
	}
	.navbar-header { float: none; }

	.navbar-toggle {
		display: block;
		border: none !important;
		padding: 11px 10px;
		margin: 10px 15px;
		background-color: transparent !important;
	}

	.navbar-default .navbar-toggle {
		background: none !important;
		text-shadow: none !important;
		box-shadow: none !important;
	}
	
	.navbar-offcanvas {
		overflow: hidden;
		overflow-y: auto;
		padding: 0;
	}
	.navbar-default .navbar-offcanvas{
		background: url(../img/yellow_bg.jpg) top center repeat-y;
		background-size: 100% auto;
	}

	.navbar-default .navbar-toggle .icon-bar { background-color: #fff; width: 30px; box-shadow: 0 0 3px 1px rgba(0,0,0,0.35); }
	.navbar-default .navbar-toggle .icon-bar + .icon-bar { margin-top: 7px; }

	.navbar-default .navbar-toggle .icon-bar:nth-child(1) {
		-webkit-transform-origin: left top;
		-moz-transform-origin: left top;
		transform-origin: left top;
	}
	.offcanvas-toggle.is-open .icon-bar:nth-child(1) {
		-webkit-transform: rotate(45deg) translate(0px, -2px);
		-moz-transform: rotate(45deg) translate(0px, -2px);
		transform: rotate(45deg) translate(0px, -2px);
	}

	.navbar-default .navbar-toggle .icon-bar:nth-child(3) {
		-webkit-transform-origin: left bottom;
		-moz-transform-origin: left bottom;
		transform-origin: left bottom;
	}
	.offcanvas-toggle.is-open .icon-bar:nth-child(3) {
		-webkit-transform: rotate(-45deg) translate(0px, 2px);
		-moz-transform: rotate(-45deg) translate(0px, 2px);
		transform: rotate(-45deg) translate(0px, 2px);
	}

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: none !important;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		font-size: 1em !important;
        margin: 0 !important;
		padding: 15px;
    }
    .navbar-nav > li {
        float: none;
		display: block !important;
		width: 100% !important;
		text-align: left;
		border-left: none !important;
		padding: 0;
    }
	.navbar-nav > li + li {
		border-top: dotted 1px #b2997f;
	}
	.navbar-default .navbar-nav > li > a {
		display: block;
		width: 100% !important;
		color: #663300;
        padding: 10px !important;
		background-image: none !important;
    }
	
    .navbar-default .navbar-nav > li > a:hover {
		color: #fff !important;
		background-color: #b2997f !important;
	}

    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }

}

@media screen and (min-width:768px) and (max-width:991px){
	#home > .container-fluid > .row > .col-md-9 > .row { padding-top: 35px; }
	#home .firstview { height: 0 !important; padding-top: 75%; }
}

@media screen and (max-width:767px){
	.space-10 { padding-top: 7px; }
	.space-15 { padding-top: 10px; }
	.space-30 { padding-top: 15px; }
	.space-45 { padding-top: 15px; }
	.space-60 { padding-top: 30px; }
	.space-90 { padding-top: 30px; }
	.space-120 { padding-top: 60px; }
	.font-3 { font-size: 1.0em; }
	.font-4 { font-size: 1.125em; }
	.font-5 { font-size: 1.3125em; }
	.font-6 { font-size: 1.5em; }
	h1,h2,h3,h4,h5,h6 { line-height: 1.4em; }
	hr { margin: 30px 0; }
	.sep-bg { padding: 30px 0; margin-top: 30px; }
	section > .in-wrapper { padding-top: 30px; padding-bottom: 30px; }
	.fullscreen { padding-top: 56.25%; margin: 30px 0 15px; }
	#home .in-label { font-size: 0.875em; }
	#home .firstview .copy { width: 75%; }
	.full-half .data-note .table > .table-cell { padding-left: 15px; padding-right: 15px; }
	.full-half .data-note .table > .table-cell > h2 { font-size: 1.285em; }
	.fukidashi { padding: 15px; }
	.in-blockquote { padding: 15px; }
	.in-blockquote strong { display: inline-block; width: 100%; font-size: 1.285em; text-align: center; margin-bottom: 15px; }
	.in-blockquote .row.ptit { margin: 0; }
	.in-blockquote .row.ptit > * { padding-left: 0; padding-right: 0; }
	.footer-logo { width: 150px; }
	.pagetop { width: 36px; right: 10px; bottom: 55px; }
	
	.index-seal { width: 46%; }
	.index-seal.active { width: 30%; }

	.tap-controll {
		position: relative;
		overflow: hidden;
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
		cursor: pointer;
	}
	.tap-controll.active { height: 0 !important; }
	.tap-controll > * {
		position: relative;
		padding-top: 15px;
		padding-bottom: 15px;
		border-bottom: dotted 1px #ccc;
	}
	.tap-controll > *:after {
		position: absolute;
		top: 50%;
		right: 5px;
		display: block;
		color: #bbb;
		-webkit-transform: translateY(-50%) rotate(90deg) scaleY(0.75);
		-moz-transform: translateY(-50%) rotate(90deg) scaleY(0.75);
		transform: translateY(-50%) rotate(90deg) scaleY(0.75);
		content: "▲";
	}
	.tap-controll + section {
		overflow: hidden;
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
	}
	.tap-controll:not(.active) + section { height: 0 !important }
	
	#overview > .in-wrapper { padding-bottom: 0; }

	.tap-close-controll {
		position: relative;
		width: 100%;
		background-color: #cbd5e7;
		cursor: pointer;
	}
	.tap-controll.active + section .tap-close-controll.active {
		position: fixed;
		left: 0;
		bottom: 0;
	}
}