@charset "utf-8";

/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}									

article, aside, figure, figcaption, footer, header, hgroup, nav, section {display: block;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: middle; text-align:left;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: middle; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active, input:focus, select:focus, option:focus, textarea:focus {outline: none;}

strong, th {font-weight: bold;}

td, td {vertical-align: top;} 
img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  



/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {font: 13px Helmet, Freesans, sans-serif;}

/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #333;}

a {color: #554639;text-decoration:underline;}
a:hover {color: #00468C;text-decoration:none;}

ins {background-color: #333; color: #FFF; text-decoration: none;}
mark {background-color: #333; color: #FFF; font-style: italic; font-weight: bold;}

/* -------------------------------
   BASE
------------------------------- */

/* margin */
.mt-60 {margin-top:-60px!important;}
.mt-50 {margin-top:-50px!important;}
.mt-40 {margin-top:-40px!important;}
.mt-30 {margin-top:-30px!important;}
.mt-20 {margin-top:-20px!important;}
.mt-10 {margin-top:-10px!important;}
.mt0 {margin-top:0!important;}
.mt5 {margin-top:5px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mt25 {margin-top:25px!important;}
.mt30 {margin-top:30px!important;}
.mt40 {margin-top:40px!important;}
.mt50 {margin-top:50px!important;}
.mt60 {margin-top:60px!important;}
.mt70 {margin-top:70px!important;}

/* float */
.left { float:left;}
.right { float:right;}
.fNone { float:none!important;}
.clear { clear:both; }

/* align */
.tLeft { text-align:left!important;}
.tCenter { text-align:center!important;}
.tRight { text-align:right!important;}
.vTop { vertical-align:top!important;}
.vMiddle { vertical-align:middle!important;}
.vBottom { vertical-align:bottom!important;}

.nowrap { white-space:nowrap; }

/* color */
.blue { color:#144398;}
.red { color:#A30035;}
.green { color:#AEC533;}
.pink { color:#EA609E;}

/* text */
.normal { font-weight:normal; }
.bold { font-weight:bold; }
.f10 { font-size:10px!important;}
.f11 { font-size:11px!important;}
.f12 { font-size:12px!important;}
.f13 { font-size:13px!important;}
.f15 { font-size:15px!important;}
.f16 { font-size:16px!important;}
.f18 { font-size:18px!important;}
.lh10 { line-height:1!important;}
.lh12 { line-height:1.2!important;}
.lh15 { line-height:1.5!important;}
.lh18 { line-height:1.8!important;}
.lh20 { line-height:2!important;}
.gothic { font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,'游ゴシック','Yu Gothic',Arial,Verdana,Helvetica,Roboto,sans-serif;}
.serif { font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;}

/* color */
.block { display:block!important;}
.inline { display:inline!important;}
.inlineBlock { display:inline-block!important;}

/* link */
a {color: #333;text-decoration:underline;}
a:hover {color: #333;text-decoration:none;}

/* transition */
.transition05 {
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
	transition-duration:0.5s;
}


/* -------------------------------
   common
------------------------------- */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	background:#FFF;
}
body {
	font-size:14px;
	line-height:1.5;
	background:#FFF;
	font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,'游ゴシック','Yu Gothic',Arial,Verdana,Helvetica,Roboto,sans-serif;
}

.btn{
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	text-align:center;
	font-weight:bold;
}

.btn a{
	padding:10px 30px;
	display:inline-block;
	background-color:#715B78;
	color:#FFF;
	text-decoration:none;
	border-radius:10px;
	position:relative;
}

.btn a:after{
    display: inline-block;
	margin-left:5px;
    width: 8px;
    height: 8px; 
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all 0.4s cubic-bezier(.17,.67,.54,.93);
    -webkit-transition: all 0.4s cubic-bezier(.17,.67,.54,.93);
    content: "";
}


/* -------------------------------
   header
------------------------------- */



/* -------------------------------
   footer
------------------------------- */



/* -------------------------------
   side
------------------------------- */



/* -------------------------------
   contents
------------------------------- */



/* -------------------------------
   home
------------------------------- */

#mainVisual{
	background-color:#179DDD;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	text-align:center;
}

#mainVisual h1{
	font-weight:normal;
	color:#FFFFFF;
}

#mainVisual dl{
	background-color: #FFF;
	color:#179DDD;
}

#mainVisual dt{
	border-bottom:dotted 1px #179DDD;
}

.introduce{
	background-color: #F7F7F7;
}

.introduce h2{
	text-align:center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	background-color:#179DDD;
	color:#FFF;
	font-weight:normal;
	padding:10px;
	margin-bottom:20px;
}

.introduce p{
	text-align:center;
}

.introduce ul li{
	font-size:14px;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}

.introduce ul li figure{
	background-color:#FFF;
	margin-bottom:10px;
}

.introduce ul li .name{
	font-weight: bold;
}

.introduce ul li.female .name{
	color:#FF7272;
}

.introduce ul li.male .name{
	color:#106E9B;
}

.sec .secTit{
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	text-align:center;
	font-weight:normal;
	background-color:#179DDD;
	color:#FFF;
}

.sec .subTit{
	border-top:solid 1px #179DDD;
	border-bottom:solid 1px #179DDD;
	text-align:center;
	font-weight:normal;
	color:#179DDD;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
}

.talk li .comment{
	border-radius:20px;
	background-color:#F7F7F7;
	padding:25px 30px;
	position:relative;
}

.talk li .comment:after{
	content:"";
	position:absolute;
	top:100%;
	left:100px;
	border-left:solid 17px #F7F7F7;
	border-bottom:solid 17px transparent;
}

.talk li .person img{
	vertical-align:baseline;
	margin-right:10px;
}

.talk li .person{
	font-weight:bold;
	margin-top:-20px;
	position:relative;
}

.talk li.female .comment{
	background-color: #FDF3F2;
}

.talk li.male .comment{
	background-color: #E8F7FD;
}

.talk li.female .person .name{
	color:#FF7272;
}

.talk li.male  .person .name{
	color:#106E9B;
}

.note{
	border:solid 4px #DDDDDD;
}

.note h3{
	text-align:center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	color:#333333;
	font-weight:normal;
	position:relative;
	border-bottom:solid 1px #DDDDDD;
}

.note .model{
	text-align: center;
	font-size:0;
}

.note .model li{
	display: inline-block;	
}

.note .model li img{
	margin-bottom:5px;
}

.note h4{
	text-align: center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	background-color: #F7F7F7;
	padding:10px 20px;
	font-weight: normal;
}

#after{
	background-color:#F7F7F7;
	margin-top:40px;
}

#after h2{
	text-align:center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	font-weight:normal;
}

#after .afterTop figure img:first-child{
	float:left;
}

#after .afterTop figure img:last-child{
	float:right;
}

#after .message h3{
	border-top:solid 1px #222222;
	border-bottom:solid 1px #222222;
	text-align:center;
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
	padding:10px;
	margin-bottom:20px;
	font-weight:normal;
}

.mattressWrap{
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 0 -10px;
}

.mattressWrap > div{
	margin-top: 30px;
	margin-left: 10px;
	text-align: center;
	width: 280px;
}

.mattressWrap > div img{
	max-width: 100%;
	height: auto;
}

.mattressWrap > div .moreBtn{
	margin: 10px 0 0;
	text-align: center;
}

.mattressWrap > div .point{
	background: url("../../../images/bed/products/position/icon_point.png") no-repeat 10px center #ECF3F7;
	background-size: 52px 52px;
	color: #295978;
	font-size: 15px;
	padding: 12px 10px 12px 75px;
	line-height: 1.5;
	font-weight: bold;
	text-align: left;
}

.moreBtn{
	font-family:'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',Georgia,'Times New Roman',serif;
}

.moreBtn a{
	width: 260px;
	max-width: 100%;
	box-sizing: border-box;
	color: #fff;
	display: inline-block;
	padding: 3px 10px;
	background-color: #295978;
	font-size: 14px;
	text-decoration: none;
	background-image: url(../images/bed/feature/arrow.png);
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 5px auto;
	border-bottom: solid 2px #1D3E54;
	text-align: center;
}