@charset "UTF-8";

/*
 *  rise_special/css/style.css
 *  updated --- 2017.09
 */
 
 

 /* !Style
---------------------------------------------------------- */


 /*　ライズのこだわり全体的な設定　*/
 div#rise_special{
	 width:100%;
	 max-width:1000px;
	 margin:0 auto;
	 padding: 0 1.5em;
	 font-size:1.6rem;
	 font-size:16px;
	 line-height:1.6;
	 font-family:'游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic,'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial,'メイリオ',Meiryo,sans-serif, 'Helvetica Neue';
	 -webkit-text-size-adjust: 100%;

 }
 

/*　リンクの色　*/ 
 div#rise_special a{
	 color:#000;
 }
 
 
/*--------------- 導入部分 ----------------
-----------------------------------------*/	

 section#introduction{margin-top:75px;}
 	@media only screen and (max-width: 480px) {section#introduction {margin-top:35px;}}
	
	/*　スマホ縦の時はテキスト　*/ 
	@media only screen and (max-width: 480px) {
			.altxt img{
				display:none;
			}
			
    		.altxt:before {
    		content: attr(data-label);
  			}
		}
 
 	/*　動的睡眠を可能にするライズの高反発マットレスが良質の睡眠へと導く　*/ 
 	#introduction h1{ 
		margin-bottom:45px;
		text-align:center;
		}
		
	@media only screen and (max-width: 480px) {
			#introduction h1{
				font-size:2.4rem;
				color:#b9262c;
				line-height:1.3;
				font-family:'Hiragino Mincho ProN', serif;
				margin-bottom:30px;}
				}
		
		#question #quest01,#quest02,#quest03,#quest04{text-align:center;}
		#question #quest01{margin-bottom:15px;}
		#question #quest02{margin-bottom:5px;}
		#question #quest03{margin-bottom:15px;}
		#question #quest04{margin-bottom:50px;}
	
		@media only screen and (max-width: 480px) {#question #quest01,#quest02,#quest03,#quest04{}}
		@media only screen and (max-width: 480px) {#question #quest01{font-size:1.7rem;color:#333;line-height:1.3;margin-bottom:15px;}}
		@media only screen and (max-width: 480px) {#question #quest02{font-size:1.7rem;color:#ff762e;line-height:1;margin-bottom:10px;}}
		@media only screen and (max-width: 480px) {#question #quest03{font-size:1.7rem;color:#ff762e;line-height:1;margin-bottom:15px;}}
		@media only screen and (max-width: 480px) {#question #quest04{font-size:1.7rem;color:#333;line-height:1.3;margin-bottom:30px;}}	
	
	
	/*　良質な睡眠に大切なのは、寝ている間の体のスムーズな動き　*/  
	#introduction h2{
		text-align:center;
		margin-bottom:20px;
		border-left:none;
		}
		
	@media only screen and (max-width: 480px) {
	#introduction h2{
		text-align:center;
		font-size:2.0rem;
		color:#193998;
		line-height:1.3;
		margin-bottom:5px;
		font-family:'Hiragino Mincho ProN',serif;
		}
	}
	
	
	/*　テキスト部分　*/
	#introduction article{
		width:100%;
		max-width:650px;
		float:none;
		margin:0 auto 50px;
	}
	
	@media only screen and (max-width: 480px) {
		#introduction article{
			margin-bottom:20px;
		}
	}
	
	
	#introduction article p{
		text-align:justify;
	}
	
	
	/*---------- 動的睡眠、静止的睡眠の写真 ---------*/	
	#introduction figure{
		width:100%;
		max-width:710px;
		margin:0 auto;
	}
	
	
	#introduction figure img{
		margin-bottom:15px;
	}
	
	
	#introduction figure #move,#stop{
		float:left;
		width:48%;
	}
	
	#introduction figure #move{
		margin: 0 2% 0 0;
	}
	
	#introduction figure #stop{
		margin: 0 0 0 2%;
	}
	
	
	#introduction figure p{
		display:block;
		width:100%;
		max-width:275px;
		margin:0 auto;
		font-size:1.4rem;
		font-size:14px;
		text-align:left;
		line-height:1.4;
	}
	
	#introduction figure p.name{
		text-align:center;
		margin-bottom:10px;
	}
	
	@media only screen and (max-width: 480px) {
		#introduction figure p.name{
			margin-bottom:5px;
		}
	}
	
 
 /*---------- Pre-Study ---------*/	
 aside#prestudy{
	width:100%;
	max-width:710px;
	margin:0 auto 50px;
	border:1px dotted #d1332a;
	padding:25px 30px;
	float:none;
}
	
@media only screen and (max-width: 480px) {
	aside#prestudy{
		padding:10px 15px;
		margin:10px auto 30px;
	}
}
	
		#prestudy h1{
			font-family: 'EB Garamond', serif;
			font-style:italic;
			font-size:2.2rem;
			font-size:22px;
			color:#d1332a;
			margin-bottom:8px;
		}
		
		#prestudy h1 i.red_pen{
			font-size:1.6em;
		}
		
		#prestudy li{
			font-size:1.4rem;
			font-size:14px;
			line-height:1.4;
			text-indent:-1em;
			padding-left:1em;
		}
		

/*--------------- Lineup ----------------
-----------------------------------------*/		
 section#lineup{
	 width:100%;
	 max-width:1000px;
 }
		
		#lineup #ttlineup{
			width:100%;
			max-width:650px;
			margin:0 auto 30px;
		}
		
		
		#ttlineup h1{
			text-align:center;
			margin-bottom:15px;
		}
		
		@media only screen and (max-width: 480px) {
			#ttlineup h1{
				font-size:2.8rem;
				color:#1a3a98;
				line-height:1;
				font-family: 'Hiragino Mincho ProN', serif;
				letter-spacing:0.05em;
				margin-bottom:5px;
				}
			}
		
		#ttlineup p{line-height:1.5;}
		
		
		 /*--- Lineupのナビ ---*/
		#lineup nav{
			
		}
		
		#lineup nav ul{
			width:100%;
			max-width:900px;
			margin:0 auto;
			padding:0;
			display:-webkit-box;
			display:-moz-box;
			display:-ms-box;
			display:-webkit-flexbox;
			display:-moz-flexbox;
			display:-ms-flexbox;
			display:-webkit-flex;
			display:-moz-flex;
			display:-ms-flex;
			display:flex;
			-webkit-box-lines:multiple;
			-moz-box-lines:multiple;
			-webkit-flex-wrap:wrap;
			-moz-flex-wrap:wrap;
			-ms-flex-wrap:wrap;
			flex-wrap:wrap;
		}
		
		
		#lineup nav ul li{
			float:left;
			width:24%;
			margin-right:1.3%;
			background-color:#f6f6f6;
			border:1px solid #e7e7e7;
			border-radius:5px;
			padding:15px 10px 5px 10px;
			font-size:1.4rem;
			font-size:14px;
			font-weight:bold;
			text-align:center;
			line-height:1.4;
			letter-spacing:0.05em;
		}
		
		#lineup nav ul li a{
			display:block;
			cursor:pointer;
		}
		
		
		#lineup nav ul li#nav04{margin-right:0px;}
		
		#lineup nav ul li:hover{
			background-color:#e0e0e0;
		}
		
		
		@media only screen and (max-width: 480px) {
			#lineup nav ul li{
				width:48%;
    			margin:0% 1% 2% 1%;
				padding:10px 5px 5px 5px;
				font-size:1.2rem;
				font-size:12px;
				line-height:1.3;
			}
		}
		
		
		#lineup nav ul li a:after{
			display:block;
			font-family: "Font Awesome 5 Free";
  			content: "\f107";
  			color:#d1332a;
			font-size:1.5em;
			font-weight: 900;
		}
		
		
		 /*--- 中材・製品紹介 ---*/
		#lineup .product_material{
			width:100%;
			max-width:1000px;
			padding-left:40px;
		}
		
		@media only screen and (max-width: 768px) {
			#lineup .product_material{
				padding-left:0px;
					
				}
		}
		
			/*　中材・製品名　*/
			#lineup .product_material h1{
				font-size:22px;
				font-size:2.2rem;
				font-weight:bold;
				line-height:1.2;
				margin-bottom:20px;
				padding-top:100px;
			}
			
			@media only screen and (max-width: 768px) {
				#lineup .product_material h1{
					padding-top:40px;
				}
			}
			
			/*　製品名 > 英語部分の字間　*/
			#lineup .product_material h1 span{
				letter-spacing:0.05em;
				 /* shop2.css 打ち消し */
				font-size:22px;
				font-size:2.2rem;
			}
			
			/*　中材の写真・３つのポイント　*/
			#lineup figure{
					width:100%;
					max-width:751px;
					padding-left:45px;
					margin-bottom:60px;
				}
				
			@media only screen and (max-width: 768px) {
				#lineup figure{
					width:100%;
					max-width:641px;
					padding-left:0px;
					margin:0 auto 1rem;
					}
					
				}
				
					#lineup figure .photo_01{
						width:380px;
						float:left;
						margin-right:65px;
					}
					
					@media only screen and (max-width: 768px) {
						#lineup figure .photo_01{
							float:left;
							margin: 0 2% 0 0;
							width:58%;
						 }
						 #lineup figure .photo_01 img{
							height: auto;
						 }
				    }
					
					
					#lineup figure .circle_01{
						width:261px;
						float:left;
						padding-top:10px;
					}
					
					@media only screen and (max-width: 768px) {
						#lineup figure .circle_01{
							padding-top:0px;
							float:left;
							width:40%;
							margin-bottom:20px;
						 }
						 #lineup figure .circle_01 img{
							height: auto;
						 }
					
				    }
					
					@media only screen and (max-width: 768px) {
						#lineup figure .circle_01{
							padding-top:0px;
							
						 }
					}
					
			/*　説明部分　*/
			.product_material article{
					width:100%;
					max-width: 725px;
    				padding-left: 45px;
				}
				
				@media only screen and (max-width:768px) {
					.product_material article{
						padding-left:0px;
					}
					
				}
				
					/*　Point・Type・Entry Modelの見出し　*/
					article.point h2,
					article.type h2,
					article.other h2{
						font-family: 'EB Garamond', serif;
						font-size:19px;
						font-size:1.9rem;
						letter-spacing:0.08em;
						line-height:1;
						 /* shop2.css 打ち消し */
						margin:0 0 15px 0;
						border-left:none;
						
					}
					
					@media only screen and (max-width: 768px) {
						article.point h2,
						article.type h2,
						article.other h2{
							margin-bottom:8px;
						}
					}
					
					
					/*　Pointの見出し背景　*/
					article.point h2{
						display:inline-block;
						position:relative;
						padding:5px 65px;
						color:#fff;
						background:#ff762e;
						border-radius:5px;
						margin-bottom: 20px;
					}
					
					article.point h2:after{
						position: absolute;
						content: '';
						top: 100%;
						left: 50%;
						margin-left:-10px;
						border: 10px solid transparent;
						border-top: 15px solid #ff762e;
						width: 0;
						height: 0;
					}
					
					
					/*　Typeの見出し背景　*/
					article.type h2{
						display:inline-block;
						padding:5px 65px 6px;
						color:#fff;
						background:#64a5d6;
						border-radius:50px;
					}
					
					
					/*　Entry Modelの見出し背景　*/
					article.other h2{
						display:inline-block;
						padding:5px 35px 6px;
						color:#fff;
						background:#f6b17c;
						border-radius:50px;
					}
					
					@media only screen and (max-width:768px) {
						article.point h2,
						article.type h2,
						article.other h2{
							width:100%;
							text-align:center;
						}
					}
					
					
					/*　Point・Type・Entry Modelのテキスト部分　*/
					article section.descript{
						padding-left:10px;
						margin-bottom:35px;
					}
					
					
					@media only screen and (max-width:768px) {
						article section.descript{
						padding-left:0;
						margin-bottom:5px;
						}
					}
					
					
					/*　タイプ別の見出し部分　*/
					article h3{
						font-weight:bold;
						font-size:17px;
						font-size:1.7rem;
					}
					
					article p{
						text-align:justify;
					}
					
					article p span{
						font-weight:bold;
					}
					
					/*　タイプの使用方法下余白　*/
					#material_01 article.type p.type04,
					#material_03 article.type p.type04,
					#material_04 article.type p.type04{
						margin-bottom:5px;
					}
			
			
			/*--- 特集ページへのリンク ---*/
			#lineup .product_material .link_01{
				font-size:15px;
				font-size:1.5rem;
				text-align:right;
				text-decoration:underline;
			}
			
			@media only screen and (max-width: 768px) {
				#lineup .product_material .link_01#link01{
					margin-bottom:30px;
				}
			}
			
			@media only screen and (max-width: 768px) {
				#lineup .product_material .link_01{
					text-align:left;
				}
			}
				
				.link_01 i.red_double_arrow{
					color:#d1332a;
				}
				
			
			/*--- 製品間のライン ---*/
			#lineup .product_material .border_01{
				border-bottom:1px solid #e1e1e1;
			}	
			
				
				/*---------- SLEEP OASIS ---------*/
					
						/*　5cmタイプの下の余白　*/
						#material_01 article.type section#type_01{
							margin-bottom:15px;
						}
					
						/*　POINTの※コメントト　*/
						article #comment_01{
							font-size:15px;
							font-size:1.5rem;
							line-height:1.4;
						}
					
						@media only screen and (max-width:768px) {
							article #comment_01{
								margin-bottom:30px;
							}
						}
						
						/*　TYPEの※コメント　*/
						article #comment_01_01{
							font-size:15px;
							font-size:1.5rem;
							line-height:1.4;
						}	
					
				
				/*---------- SLEEP MAGIC ---------*/
					
					/*　pitpoint　*/
					#material_02 aside.descript{
						padding:18px 25px;
						margin-bottom:35px;
						border:1px dotted #d1332a;
						font-size:15px;
						font-size:1.5rem;
					}
					
					@media only screen and (max-width:768px) {
						#material_02 aside.descript{
						margin-bottom:30px;
						}
					}
					
					
					#material_02 aside.descript h1{
						font-family: 'EB Garamond', serif;
						font-style:italic;
						font-size:2rem;
						font-size:20px;
						letter-spacing:0.05em;
						color:#d1332a;
						margin-bottom:8px;
						padding-top:0;
						}
		
					#material_02 aside.descript h1 i.red_pen{
						font-size:1.4em;
					}
					
					#material_02 aside.descript p{
						width:100%;
						max-width:615px;
						margin:0 auto;
						line-height:1.4;
					}
					
					/*　Type説明文※の設定　*/
					#material_02 article.type .descript span{
						font-size:12px;
						font-size:1.2rem;
						vertical-align:top;
					}
					
					/*　Type説明文下の余白　*/
					#material_02 article.type .descript{
						margin-bottom:25px;
					}
					
					@media only screen and (max-width:768px) {
						#material_02 article.type .descript{
						margin-bottom:10px;
						}
					}
					
					/*　ウェーブカット説明文下の余白　*/
					#material_02 article .descript p.upsleep_01{
						margin-bottom:10px;
					}
					
					#material_02 article .descript p.upsleep_01,
					#material_02 article .descript p.sidesleep_01
					{
						text-indent:-1em;
						padding-left:1em;
					}
					
					
					/*　TABLE　*/
					section#data_01{
						width:100%;
						max-width:795px;
						padding-left:45px;
					}
					
					@media only screen and (max-width:768px) {
						section#data_01{
						padding-left:0;
						}
					}
					
					#data_01 table{
						font-size:14px;
						font-size:1.4rem;
						margin-bottom:15px;
					}
					
					
					/*　tableの罫線　*/
					#data_01 th,
					#data_01 td{
						border:1px solid #d6d6d6;
						}
					
					
						/*　thead　*/
						#data_01 th{padding:5px 0;color:#fff;text-align:center;background-color:#000;}
						#data_01 th#thickness_01{width:87px;}
						#data_01 th#shape_01{width:112px;}
						#data_01 th#power_01{width:112px;}
						#data_01 th#density_01{width:101px;}
						#data_01 th#hardness_01{width:104px;}
						#data_01 th#howto_01{width:228px;}
						
						
						/*　tbody　*/
						#data_01 td{vertical-align:middle;text-align:center;}
						#data_01 td.thick_01{padding:20px 10px;background-color:#ededed;}
						@media only screen and (max-width:768px) {#data_01 td.thick_01{padding:20px 5px;}}
						#data_01 td.howto_02{padding:5px 10px;text-align:left;line-height:1.3;}
						#data_01 td.wave,td.block{padding:5px 5px;}
					
					#material_02 aside{
						width:100%;
						max-width:750px;
					}
					
					
					/*　ニュートン測定方法　*/
					#material_02 aside#comment_02{
						margin-bottom:30px;
					}
					
					@media only screen and (max-width:480px) {
						#material_02 aside#comment_02{
						margin-bottom:10px;
						}
					}
					
					
						/*　ニュートン測定方法説明　*/
						#material_02 aside#comment_02 p,
						#material_02 aside#comment_02 li{
							font-size:14px;
							font-size:1.4rem;
							line-height:1.4;
						}
						
						@media only screen and (max-width:480px) {
							#material_02 aside#comment_02 p,
							#material_02 aside#comment_02 li{
								margin-bottom:5px;
							}
						}
					
					
				/*---------- K18 3D ブロック ---------*/
				
					
					/*　写真下の余白　*/
					@media only screen and (max-width:768px) {
						#lineup #material_03 figure{
							margin-bottom:2.5rem;
						}
					}
					
					@media only screen and (max-width:768px) {
						#material_03 article section.descript#type03{
							margin-bottom:30px;
						}
					}
					
				/*---------- K18 ラテックス 360 ---------*/	
				
					/*　写真下の余白　*/
					@media only screen and (max-width:768px) {
						#lineup #material_04 figure{
							margin-bottom:2.5rem;
						}
					}
				
					@media only screen and (max-width:768px) {
						#material_04 article section.descript#type03{
							margin-bottom:30px;
						}
					}
					

/*--------------- Features ----------------
-----------------------------------------*/	
#features{
	width:100%;
	max-width:750px;
	margin:0 auto 70px;
}

	#features h1{
		text-align:center;
		padding-top:55px;
		margin-bottom:20px;
	}
	
	@media only screen and (max-width:480px){
		#features h1{
			font-size:2.8rem;
			color:#1a3a98;
			line-height:1;
			font-family: 'Hiragino Mincho ProN', serif;
			letter-spacing:0.05em;
			padding-top:40px;
			margin-bottom:10px;
		}
	}
	
	#features p{
		text-align:center;
		margin-bottom:30px;
	}
	
	@media only screen and (max-width:480px){
		#features p{
			margin-bottom:15px;
		}
	}
	
	#features table#data_02{
		font-size:14px;
		font-size:1.4rem;
	}
	
		/*　tableの罫線　*/
		table#data_02 th,td{
			border:1px solid #b6b6b6;
			
		}
		
		
		/*　thead　*/
		#data_02 th{padding:5px 5px;color:#fff;text-align:center;background-color:#000; border-color:#fff;}
		#data_02 th#product_02{width:123px;}
		#data_02 th#thickness_02{width:117px;}
		#data_02 th#hardness_02{width:118px;}
		#data_02 th#breath_02{width:121px;}
		#data_02 th#howto_02{width:226px;}
						
		/*　tbody　*/
		#data_02 td{vertical-align:middle;text-align:center;}
		#data_02 td{letter-spacing:0.02em}
		#data_02 td.product_03{padding:20px 10px; background-color:#ededed;line-height:1.2;}
		@media only screen and (max-width:768px) {#data_02 td.product_03{padding:5px 0;}}
		#data_02 td.star_01{text-align:left; color:#ff762e;padding:10px 25px;}
		@media only screen and (max-width:768px) {#data_02 td.star_01{padding:0 5px;}}
		#data_02 td.star_02{text-align:left; color:#64a5d6;padding:10px 40px;}
		@media only screen and (max-width:768px) {#data_02 td.star_02{padding:0 5px;}}
		#data_02 td.howto_03{padding:10px 10px;}
		@media only screen and (max-width:768px) {#data_02 td.howto_03{padding:5px 5px;line-height:1.3;text-align:left;}}



/*--------------- PageTop ----------------
-----------------------------------------*/	

section#pagetop{
	width:100%;
}

	div#pagetop_01{
		position:fixed;
		right:3px;
		bottom:30px;
	}
	
	#pagetop_01 i.angle_up_white{
		display:block;
		cursor:pointer;	
		font-size:2em;
		color:#fff;
		background-color:#000;
		padding:5px 10px;
		}
		
	@media only screen and (max-width:768px) {
		#pagetop_01 i.angle_up_white{
		display:block;
		cursor:pointer;	
		font-size:1em;
		color:#fff;
		background-color:#000;
		padding:2px 4px;
		}
	}
		

					
				
					
			
		
		

