@charset "UTF-8";
/* CSS Document */

/*Informationのブロック*/
.information_block {
	width: 80%;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 30px;
	margin-bottom: 100px;
}

.information_title {
	border-left: #CB9E68 7px solid;
	border-bottom: #cccccc 1px solid;
	padding-left: 5px;
	margin-bottom: 15px;
	margin-left: 0;
}

.information {
	position:relative;
	width: 47%;
	height: 0;
	float: left;
	margin: 0 auto;
	background: #fbf8f3;
    padding-top: 28%;
	border-radius: 0.3em;
}

.information iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.banner {
	float: right;
	width: 47%;
}

.banner img {
	width: 100%;
}


/*各コンテンツのタイトル(index.html)*/
.contents_name_index {
	text-align: center;
	color: #fff;
	text-shadow: 2px 2px 2px #000000;
	font-weight: normal;
	line-height: 1.3em;
	font-size: 26pt;
	margin-top: 120px;
}

/*コンテンツの本文(index.html)*/
.introduction {
	width: 80%;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 80px;
	color: #252525;
	line-height: 1.5em;
	
}

/*ヘッダー画像固定スクロール*/
/*背景画像固定スクロール*/
.cd-fixed-bg.cd-bg-1 {
	background-image: url(../image/index_background/12.jpg);
}

/*セルフチェックのイメージ画像*/
.check_image {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 20px;
}

.check_image img {
	width: 100%;
	border-radius: 0.3em;
}

/*寝具カウンセリング--チェックリストのdiv*/
.check_list {
	padding: 5px 15px 15px 15px;
	background: #FFFCDD;
	background: #f5f4fb;
}

.check_list img {
	width: 28px;
	padding-right: 6px;
	vertical-align: bottom;
	
}

/*期間限定特別価格*/
.sale {
	margin-top: 120px;
}

/*特別価格のコンテンツ部分*/
.discount {
	width: 70%;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 30px;
}
/*特別価格の画像*/
.discount img {
	width: 100%;
	max-width: 800px;
	border-radius: 0.3em;
}

/*プラスカウンセリングバージョンのArticle*/
/*Article ボックス要素３つを横並び(index.html)--ここから*/
.index_3contents {
	height: auto;
	width: calc(100% / 3);
	margin: 12px;
	line-height: 1.6em;
	font-size: 11.5pt;
	padding: 20px;
	border-radius: 0.3em;
}

/*寝具カウンセリングチェックボックスが入っているboxContainer限定*/
/*別クラスにしないとdivが横並びになるため*/
.boxContainer_block {
	width: 70%;
	padding: 0;
	margin: auto;
}

.boxContainer {
	width: 70%;
	display: flex;
	ustify-content: center;
	padding: 0;
	margin-top: 20px;
	margin-bottom: 70px;
	margin: auto;
	overflow: hidden;
}

/*Article ボックス要素３つを横並び(index.html)--ここまで*/

/*Article ボックス要素３つを横並び背景画像(index.html)--ここから*/
.index_3contents.image_1 {	
	background-image: url("../image/silk01.jpg");
	background-size:cover;
}

.index_3contents.image_2 {	
	background-image: url("../image/silk02.jpg");
	background-size:cover;
}

.index_3contents.image_3 {	
	background-image: url("../image/silk03.jpg");
	background-size:cover;
}
/*Article ボックス要素３つを横並び背景画像(index.html)--ここまで*/

/*Article ボックス要素３つの下にシャドウ*/
.index_3contents {
	-moz-box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
	-o-box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
	-ms-box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
	behavior: url(/PIE.htc);
	}

.index_3contents h2 {
	margin: 5px 0 25px 0;
	border-left: solid 10px #cb9d68;
	padding: 11px 0px 5px 10px;
	background-color: rgba(255,255,255,0.7);
	font-size: 12pt;
	line-height: 1.3em;
}

.index_3contents p {
	margin-bottom: 10px;
	clear: both;
}

.waku {
	width: 70%;
	color: #ffffff;
	border-radius: 0.3em;
	margin: 0 auto;
	margin-top: 120px;
	padding: 40px 0;
}

/*----- ブレークポイント --------------------------------------------------------------------
/*===== max-width: 960px ===================================================================*/
@media (max-width: 960px){
	
	.waku {
	width: 80%;
	}
	
	/*Article ボックス要素３つ横並び(index.html)--ここから*/
	.index_3contents {
		height: auto;
		width: calc(100% / 3);
		margin: 8px;
		line-height: 1.6em;
		font-size:11pt;
		padding: 17px;
		border-radius: 0.3em;
	}

	.index_3contents h2 {
		width: 95%;
		margin: 0 0 18px -5px;
		font-size: 11.5pt;
		line-height: 1.4em;
		padding-top: 10px;
	}
	/*寝具カウンセリングチェックボックスが入っているboxContainer限定*/
	/*別クラスにしないとdivが横並びになるため*/
	.boxContainer_block {
		width: 80%;
	}
	
	.boxContainer {
		width: 80%;
		display: flex;
		ustify-content: center;
		padding: 0;
		margin-top: 20px;
		margin-bottom: 70px;
		margin: auto;
		overflow: hidden;
	}
	
	.index_3contents {
		height: auto;
		width: 70%;
		margin: 11px;
		line-height: 1.6em;
		font-size: 10pt;
		padding: 17px;
		border-radius: 0.3em;
	}
	/*Article ボックス要素３つ横並び(index.html)--ここまで*/
}

/*===== max-width: 768px ===================================================================*/
@media (max-width: 768px){
	
	.information_block {
		width: 90%;
	}

	/*期間限定特別価格*/
	.sale {
		margin-top: 60px;
	}
	
	/*特別価格のコンテンツ部分*/
	.discount {
		width: 90%;
	}
	
	/*特別価格の画像*/
	.discount img {
		width: 100%;
	}
	
		
	/*背景画像固定スクロール スマートフォン用*/
	.cd-fixed-bg.cd-bg-1 {background:none} /*PC用の背景はオフ*/
	.cd-fixed-bg.cd-bg-1::before {
		content:"";
		display:block;
		position:fixed;
		top:0;
		left:0;
		z-index:-1;
		width:100%;
		height:100vh;
		max-height: 500px;
		background:url(../image/index_background/12.jpg) center/cover no-repeat; /*fixedを取る*/
		-webkit-background-size:cover;/*Android4*/
		margin-top: -120px;
		padding-bottom: 120px;
	}
	
	/*Article ボックス要素３つ横並びを横１つに変更(index.html)--ここから*/
	.index_3contents {
		width: 90%;
		margin: auto;
		margin-bottom: 60px;
		font-size: 11pt;
	}
	
	.index_3contents h2 {
		width: 90%;
		margin: 0 auto;
		margin-top: 25px;
		margin-bottom: 30px;
		font-size: 13pt;
	}
	
	.index_3contents p {
		width: 90%;
		margin: 0 auto;	
		margin-bottom: 16px;
	}
	
	.boxContainer:after {
	  content: "."; 
	  display: block; 
	  height: 0; 
	  clear: both; 
	  visibility: hidden;
	}
	
	.boxContainer {
		width: 90%;
		display: inline-table;
	}
	
	.waku {
	width: 90%;
	}

	/* Hides from IE-mac */
	* html .boxContainer { height: 1%; }
	.boxContainer { display: block; }
	/* End hide from IE-mac */
	
	.index_3contents button {
		margin-top: 30px;
	}
	
	.image_1 h2,
	.image_2 h2,
	.image_3 h2 {
		margin-top: 7px;
	}
	
	/*Article ボックス要素３つ横並び(index.html)--ここまで*/
	
	
	.boxContainer_block {
		width: 90%;
	}
	
	/*各コンテンツのタイトル(index.html)*/
	.contents_name_index {
		font-size: 20pt;
		margin-top: 65px;
	}
}

/*===== max-width: 667px ===================================================================*/
@media (max-width: 667px){
	
	.information {
		height: 28%;
		overflow:scroll;
	  -webkit-overflow-scrolling:touch;
}
	
	.information_block {
		margin-bottom: 60px;
	}
	
	.information, .banner {
		float: none;
		width: 90%;	
		margin: 0 auto;
		margin-bottom:  40px;
	}
	
	
	/*各コンテンツのタイトル(index.html)*/
	.contents_name_index {
		font-size: 20pt;
		margin-top: 60px;
	}
	
	.waku {
		margin-top: 100px;
	}
}
	
/*===== max-width: 480px ===================================================================*/
@media (max-width: 480px){
	
	/*背景画像固定スクロール スマートフォン用*/
	.cd-fixed-bg.cd-bg-1 {background:none} /*PC用の背景はオフ*/
	.cd-fixed-bg.cd-bg-1::before {
		content:"";
		display:block;
		position:fixed;
		top:0;
		left:0;
		z-index:-1;
		width: 100%;
		height:100vh;
		background:url(../image/index_background/12.jpg) center/cover no-repeat; /*fixedを取る*/
		-webkit-background-size:cover;/*Android4*/
	}
	
	/*各コンテンツのタイトル(index.html)*/
	.contents_name_index {
		font-size: 16pt;
		margin-top: 40px;
	}
	
	/*期間限定 特別価格*/
	.sale {
		margin-top: -20px;
	}
	
	/*特別価格のコンテンツ部分*/
	.discount {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		margin-bottom: 30px;
	}
	
	.waku {
		margin-top: 80px;
	}
}	


/*===== max-width: 375px ===================================================================*/
@media (max-width: 375px){
	
	/*各コンテンツのタイトル(index.html)*/
	.contents_name_index {
		width: 90%;
		font-size: 15pt;
		margin: 0 auto;
		margin-top: 27px;
		}
	
	.index_3contents h2 {
		width: 95%;
		margin-top: 2px;
		font-size: 12pt;
	}
	
	.hide_3 {
		display: inline;
	}
	
	.black_bold {
		font-size: 10pt;
		padding: 14px 12px 10px 12px;
		margin-left: -13px;
		}
	.red_bold {
		font-size: 10pt;
		padding: 14px 12px 10px 12px;
		margin-left: -13px;
	}
	
	/*ナビゲーションのドロップダウンメニュー*/
	#DropDownMenu li, #DropDownMenu a {
		font-size: 6.5pt;
		font-feature-settings : "palt";/*文字詰め*/
	}

	
	
	.contents_description {
		width: 80%;
		font-size: 10pt;
	}
	
	.contents_description a {
		font-size: 10pt;
	}
	
}