@charset "utf-8";

/* =======================================

	CommonElements

======================================= */

/* ------------------------------
   共通
------------------------------ */
.pd_t15 {
	padding-top:15px;
}

.pd_b15 {
	display:block;
	padding-bottom: 15px;
}

pd_b30 {
	display:block;
	padding-bottom: 30px;
}

.mg_b15 {
	display:block;
	margin-bottom: 15px;
}

.t_bold {
	font-weight:bold;
}

.ptext01 {
	display:block;
	text-align:center;
	line-height:125%;
	font-size: 15px;
	padding: 15px 0px 0px 0px;
}


body {
	font-size: 100%;
	line-height: 170%;
	font-family: 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #5f5f5f;
}

ul {
	list-style-type:none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

li {
	list-style-type:none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

p { display:block;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.align_c  {
	display:block;
	text-align: center;
	margin:0px auto 0px;
}

.clearfix {width:100%;}
.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;
 }
 
.touchHover:hover {
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
} 


a:link { text-decoration:none; color: #5f5f5f;}
a:visited { text-decoration:none; color: #5f5f5f;}
a:active { text-decoration:none; color: #65f1ae;}
a:hover { text-decoration:none; color: #65f1ae;}

a.hnave:link { text-decoration:none; color: #FFF;}
a.hnave:visited { text-decoration:none; color: #FFF;}
a.hnave:active { text-decoration:none; color: #fcff00;}
a.hnave:hover { text-decoration:none; color: #fcff00;}

a.bluelink:link { text-decoration:none; color: #002eb1;}
a.bluelink:visited { text-decoration:none; color: #002eb1;}
a.bluelink:active { text-decoration:none; color: #00b4ff;}
a.bluelink:hover { text-decoration:none; color: #00b4ff;}




#contents {
	width: 1000px;
	margin:0px auto 0px;
	}

.inner {
	width: 98%;
	margin:0px auto 0px;
	}


#pageTop {
  position: fixed;
  bottom: 20px;
  right: 40px;
}
 
#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
}
 
#pageTop a:hover {
  opacity: 0.5;
}


header {
	width:100%;
	background: #06569f;
	padding: 0px 0px 5px 0px;
}


#header_waku {
	width:1000px;
	margin: 0px auto 10px;
}

#header_waku img {
	width:10%;

}

h1 {
	color: #fff;
	background:#06569f;
	font-size: 12px;
	padding: 0px 0px 0px 0px;	
	margin: 0px 0px 0px 0px;
}



h2#title01 {
	width:100%;
　　font-size:35px;
	color:#FFFFFF;
	font-weight:bold;
	text-align:center;
	background:#908787;
	padding: 18px 0px 15px 0px;
	margin: 0px 15px 0px 0px;
  } 

h2#title02 {
	width:960px;
　　font-size:48px;
	color:#FFFFFF;
	font-weight:bold;
	line-height:160%;
	background:#06569f;
	padding: 15px 20px 15px 20px;
	margin: 0px 15px 40px 0px;
  }
  
h2#title02 span {
	  color:#fff334;

  }

h3.h3tt {
	color:#5f5f5f;
	font-size: 26px;
	font-weight:bold;
	line-height:135%;
	border: 0px solid #908787;
	border-left-width: 30px;
	padding: 0px 0px 0px 20px;	
	margin: 30px 0px 30px 0px;
}

h3.imgtt {
	width:100%;
	margin: 30px 0px 30px 0px;
}


#container {
	margin: 0 auto;
	width: 100%;

}

h5 {
	color:#5f5f5f;
	font-weight:bold;
	text-align:center;
	font-size:36px;
	line-height:50px;
	padding: 0px 3px 15px 3px;
	margin: 30px 0px 15px 0px;

  }

    /* 内容要素 CSS
  ================================================*/
  
#laed {
	font-size:20px;
	line-height:180%;
	width:100%;
	padding: 0px 0px 30px 0px;
  }

.pointtext  {
	color:#ff3000;
	font-weight:bold;
  }  
 
#research {
	width:100%;
	background:#fdfff3;
	padding: 15px 0px 15px 0px;
	margin: 50px 0px 30px 0px;
  }
  
#wom-1 {
	width:485px;
	float:left;
	padding: 0px 10px 15px 0px;
  }    

#man-1 {
	width:485px;
	float:left;
	padding: 0px 0px 15px 0px;
  } 
  
#img-en {
	width:73%;
	margin: 0px auto 0px;
  }   

#img-graph {
	width:81%;
	margin: 0px auto 0px;
  }  
  
.bk-pink {
	width:100%;
	background:#fee9e2;
	padding: 15px 0px 15px 0px;
	margin: 0px 0px 0px 0px;
  }
  
  

    /* 商品紹介 CSS
  ================================================*/ 
  
  
.element-left {
	width:520px;
	float:left;
	padding: 0px 0px 0px 0px;
  }
  
.element-left p {
	font-size:20px;
	line-height:200%;
	padding: 30px 30px 0px 0px;
  }
.element-left span {
	font-weight:bold;
  }     

.element-right {
	width:460px;
	float:left;
	padding: 0px 0px 0px 0px;
  }
  

#img-float {
	width:100%;
	padding: 0px 0px 0px 0px;
  } 

#img-float img {
	width:485px;
	float:left;
	padding: 0px 0px 0px 10px;
  } 
  
   
    /* ご購入ボタン CSS
  ================================================*/
.bottan {
	display:block;
	width:72%;
	margin: 30px auto 50px;
  }

  
    /* 5: Footer Block CSS
  ================================================*/
  
footer{
	display:block;
	width:100%;
	font-size:12px;
	text-align:center;
	background:#e5e5e5;
	padding: 15px 0 20px 0;

}




/* ------------------------------
   MEDIAQUERIES LAYOUT
------------------------------ */
@media only screen and (max-width: 800px) {
	#menuList ul {
		width: 100%;
	}

	#menuList ul li {
		width: 20%;
	}
	

	
}

/* ------------------------------
   MEDIAQUERIES[SP]LAYOUT
------------------------------ */
@media only screen and (max-width: 768px) {
		
	#menuList {
		display: none;
	}
	
	#footerWrap {
		display: none;
	}

	#rwdMenuWrap {
		width: 100%;
		border-bottom: #aaa 1px solid;
	}

	#rwdMenuWrap #switchBtnArea {
		width: 100%;
		height: 60px;
		background: url(../img/oasislogo.png) center no-repeat #002eb1;
		position: relative;
	}

	#rwdMenuWrap #switchBtnArea #switchBtn {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		display: block;
		background: #002eb1;
		position: absolute;
		border-radius: 5px;
	}

	#rwdMenuWrap #switchBtnArea #switchBtn span {
		left: 20%;
		width: 60%;
		height: 4px;
		display: block;
		position: absolute;
		background-color: #fff;
		border-radius: 5px;
		transition: all 0.2s linear;
	}
	#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(1) {
		top: 10px;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(2) {
		top: 18px;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(3) {
		bottom: 10px;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {
		top: 18px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {
		bottom: 18px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#rwdMenuWrap ul {
		width: 100%;
		display: none;
	}

	#rwdMenuWrap ul li {
		width: 100%;
		border-bottom: #aaa 1px solid;
	}

	#rwdMenuWrap ul li a {
		padding: 15px 20px;
		text-align: left;
		display: block;
		background: #484848;
		position: relative;
	}

	#rwdMenuWrap ul li a:after {
		content: '';
		margin-top: -4px;
		top: 50%;
		right: 15px;
		width: 8px;
		height: 8px;
		color: #888;
		font-size: 1em;
		font-weight: bold;
		line-height: 1.2em;
		display: block;
		position: absolute;
		border-top: 2px solid #b0b0b0;
		border-right: 2px solid #b0b0b0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#contents {
		width: 100%;
	}


	#laed {
	font-size:16px;
	width:100%;
	padding: 0px 0px 30px 0px;
  }



}

@media only screen and (min-width: 768px) {
	
	#imgmain_sp {
	display: none;
}

	#img_05pc {
	display: none;
}

#sns_footer {
	display: none;
}	

li.navi_sp {
		display: none;
	}


}


/* ------------------------------
   MEDIAQUERIES[SP]LAYOUT ★SP用
------------------------------ */


@media screen and (min-width:0px) and (max-width: 768px) {


header {
	width:100%;
	background: #06569f;
	padding: 0px 0px 1px 0px;
}

#header_waku {
	width:100%;
	margin: 0px auto 10px;
}

#header_waku img {
	width:10%;
	margin: 3px 0px 0px 2px;

}

#contents {
	width: 100%;
	margin:0px auto 0px;
	}	
	
#spec ul {
	width:100%;
	float:left;
	border:0px solid #333333;
	border-top-width: 1px;
	padding: 0px 3px 0px 3px;
	margin: 10px 0px 15px 0px;
  }	


 
    /* ご購入ボタン CSS
  ================================================*/
.bottan {
	display:block;
	width:98%;
	margin: 0px auto 50px;
  }


  /* ------------------------------
   SP用フッター一式
------------------------------ */
footer{
	display:block;
	width:100%;
	font-size:10px;
	text-align:center;
	background:#e5e5e5;
	padding: 15px 0 20px 0;

}



  /* ------------------------------
  内容
------------------------------ */

  
h3.h3tt {
	color:#5f5f5f;
	font-size: 21px;
	font-weight:bold;
	line-height:135%;
	border: 0px solid #908787;
	border-left-width: 30px;
	padding: 0px 0px 0px 20px;	
	margin: 30px 0px 30px 0px;
}

#wom-1 {
	width:100%;
	padding: 0px 0px 15px 0px;
  }    

#man-1 {
	width:100%;
	padding: 0px 0px 15px 0px;
  } 
  
#img-en {
	width:98%;
	margin: 0px auto 0px;
  }    

#img-graph {
	width:98%;
	margin: 0px auto 0px;
  }  
  
h2#title02 {
	width:100%;
	color:#FFFFFF;
	font-weight:bold;
	line-height:160%;
	background:#06569f;
	padding: 5% 2% 5% 2%;
	margin: 0px 0px 40px 0px;
  }
  
  
.ptext01 {
	display:block;
	text-align:center;
	line-height:125%;
	font-size: 10px;
	padding: 15px 0px 0px 0px;
}   
 
#img-float {
	width:100%;
	padding: 0px 0px 25px 0px;
  } 
 
#pageTop {
  position: fixed;
  bottom: 0px;
  right: 0px;
}	
	
#pageTop img {
  width:80%;
}


h1 {
	width:100%;
	color: #fff;
	background:#06569f;
	font-size: 8px;
	padding: 0px 0px 0px 0px;	
	margin: 0px 0px 0px 0px;
}

h4 {
	width:75%;
}

h5 {
	color:#5f5f5f;
	font-weight:bold;
	text-align:center;
	font-size:27px;
	line-height:50px;
	padding: 0px 5px 15px 5px;
	margin: 30px 0px 15px 0px;

  }

#img-float img {
	width:98%;
	padding: 20px 0px 0px 5px;
  } 

.element-left {
	width:100%;
	padding: 0px 0px 0px 0px;
  }
  
.element-left p {
	font-size:16px;
	line-height:200%;
	padding: 20px 0px 10px 0px;
  }

.element-right {
	width:100%;
	padding: 0px 0px 0px 0px;
  }

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
#menuList > ul:before,
#menuList > ul:after {
	content: " ";
	display: table;
}
#menuList > ul:after {clear: both;}
#menuList > ul {*zoom: 1;}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}