/*
Theme Name: Sunlife-rm 2015
Author: ASHIKI Hirotaka / LaLaCREER Inc. / lalacreer.jp
*/


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








#contentWrapper{
	clear:both;
	width:100%;
	padding:0;
	background-image:url(./images/background_content.png);
	background-position:top center;
	background-color:#fff;
	background-repeat:no-repeat;
}


#contentWrapper2{
	clear:both;
	width:100%;
	padding:0;
	background: #d4dcd6;
}




#content{
	width:900px;
	margin:0 auto;
	padding:50px 0;
	overflow:hidden;
	position:relative;
}







/* -- 製品ページ -- */




/* --スライドショー／メテオスライド -- */



.meteor-slides{
	width:900px;
	height:450px;
	margin:0 0 0 0;
}

.meteor-clip img{
	border-radius:5px 5px 0 0; 
    -webkit-border-radius:5px 5px 0 0; 
	-moz-border-radius:5px 5px 0 0; 
}







#productHeader{
	clear:both;
	margin:0 0 30px 0;
	padding:30px 0;
	border-top:10px solid rgba(153,153,151,1.0);
	border-bottom:10px solid rgba(153,153,151,1.0);
}



#productHeader h1{
	font-size:3em;
	margin:0;
	padding:0;
	text-align:center;
	line-height:100%;
}

#productHeader h2{
	text-align:center;
	margin:0;
	padding:0.5em 0;
	line-height:100%;
	color:rgba(0,0,0,0.3);
	font-family: 'Ubuntu', sans-serif;
}

#productHeader p{
	text-align:left;
	margin:0;
	padding:0;
	font-size:1.1em;
	line-height:190%;
}









/* product ギャラリー */

#productLineup .gallery{
	float:right;
	width:440px;
	border:1px solid #f00;
}









.productLineupSlide{
	margin:0 0 30px 0;
}

.productLineupSlide img{
border-radius:10px; 
    -webkit-border-radius:10px; 
	-moz-border-radius:10px;
}




h3.productsTitle{
	margin:0 0 40px 0;
	color:rgba(153,153,151,1.0);
}






h5.productName{
	text-align:center;
	font-size:3em;
	margin:0 0 20px 0;
	color:rgba(0,0,0,0.7);
	letter-spacing:0.2em;
}

h6.productName{
	text-align:center;
	font-size:1em;
	margin:0 0 20px 0;
	color:rgba(0,0,0,0.3);
	font-family: 'Ubuntu', sans-serif;
	letter-spacing:0.5em;

}

.productInfo p{
	text-align:center;
	line-height:2em;
	color:rgba(0,0,0,0.7);
	margin:0 0 2em 0;
}







.productLineup{
	padding:40px;
	margin:0 0 40px 0;
	border:10px solid rgba(0,0,0,0.3);
	border-radius:10px; 
    -webkit-border-radius:10px; 
	-moz-border-radius:10px;
	background-image:url(./images/lineupback.png);
	background-repeat:no-repeat;
	background-position:top center;
}



h2.productName2{
	font-size:1.2em;
	font-weight:bold;
	letter-spacing:0.05em;
	margin:0 0 0.5em 0;
}

.productInfo2{
	text-align:left;
	color:rgba(0,0,0,0.7);
	line-height:1.7em;
	margin:0 ;
	padding:0 0 1em 0;
}




.productInfoImg{
	margin:0 0 20px 0;
}



/*  製品ラインナップの表 */

.productSpec2{
	list-style:none;
}

.productSpec2 dt{
	clear:both;
	float:left;
	width:8em;
	margin:0 0 25px 0;
	padding:0.5em 0;
	line-height:100%;
	font-weight:bold;
	background-color:rgba(0,0,0,0.2);
	border-radius:1em; 
    -webkit-border-radius:1em; 
	-moz-border-radius:1em;
	text-align:center;
}

.productSpec2 dd{
	margin:0 0 25px 9em;
	padding:0.3em 0 0 0;
	line-height:180%;
}





/* ４カラムギャラリー */

.gallery{
	width:100%;
	margin:0 0 25px 0;
	padding:0;
}

dl.gallery-item{
	list-style:none;
	float:left;
	margin:0;
	padding:0;
}

dt.gallery-icon img{
	border-radius:5px; 
    -webkit-border-radius:5px; 
	-moz-border-radius:5px;
}

dt.gallery-icon a:hover{
	opacity:0.5;
}




























/* - material - - - - - - - - - - - - - -  */




#materialWrapper{
	clear:both;
	width:100%;
	padding:0;
	background-position:top center;
}



.bgMaterial1{	background-image:url(./images/background_material3.png);}
.bgMaterial2{	background-image:url(./images/background_material2.png);}
.bgMaterial5{	background-image:url(./images/background_material5.png);}



#material{
	min-width:860px;
	margin:0 auto;
	padding:60px 20px 20px 20px;
	overflow:hidden;
	position:relative;
}



ul.material{
	max-width:900px;
	clear:both;
	list-style:none;
	float:left;
	margin:0;
	padding:0;
	position:relative;
	left:50%;
}

.material li{
	float:left;
	position:relative;
	left:-50%;
}


.material a{
	display:block;
	margin:15px;
	width:150px;
	height:180px;
	background-image:url(./images/material_eyecatch.png);
	background-position:center;
/*	box-shadow:0px 0px 5px rgba(0,0,0,0.3);*/
}



.material-2 a{
	display:block;
	margin:15px;
	width:150px;
	height:243px;
	background-image:url(./images/material_eyecatch.png);
	background-position:center;
/*	box-shadow:0px 0px 5px rgba(0,0,0,0.3);*/
}




.material a:hover{
	opacity:0.5;
}
	









#materialHeader{
	clear:both;
	margin:0 0 30px 0;
	padding:30px 0;
	border-top:1px solid rgba(153,153,151,1.0);
	border-bottom:1px solid rgba(153,153,151,1.0);
	background-color:rgba(255,255,255,0.3);

}



#materialHeader h1{
	font-size:2em;
	margin:0 0 0.3em 0;
	padding:0;
	text-align:center;
	line-height:100%;
}

#materialHeader h2{
	text-align:center;
	font-size:1em;
	margin:0;
	padding:0.5em 0;
	line-height:100%;
	color:rgba(0,0,0,0.3);
	font-family: 'Ubuntu', sans-serif;
}

#materialHeader p{
	text-align:center;
	margin:0;
	padding:0;
	font-size:1.1em;
	line-height:190%;
}




#materialArea{
	width:630px;
	padding:0 135px 25px;
	margin:0 0 0 0;
	background-image:url(./images/materialDocBack.png);
	background-repeat:repeat-y;
}

#materialArea img{
	margin:0 0 25px 0;
	border-radius:5px; 
    -webkit-border-radius:5px; 
	-moz-border-radius:5px;
}



.materialListNumber{
	list-style:decimal; !important
}


.materialCaution{
	text-align:left;
	padding:25px;
	margin:0;
	font-size:0.5em;
	border-radius:5px; 
    -webkit-border-radius:5px; 
	-moz-border-radius:5px;
	color:rgba(0,0,0,0.3);
}







#materialProductlist{
	width:840px;
	padding:60px 30px 30px;
	margin:0 0 25px 0;
	background-image:url(./images/background_lineup2.png);
	background-position:top center;
	text-align:center;
	border-radius:10px; 
    -webkit-border-radius:10px; 
	-moz-border-radius:10px;
}


#materialProductlist h6{
	color:rgba(255,255,255,1.0);
}

#materialProductlist a{
	margin:0 10px;
}

#materialProductlist a:hover{
	opacity:0.5;
}








/* singleDeco */

#singleDecoA{
}


#singleDecoA h4{
	ine-height:100%;
	padding:0.5em 0;
	text-align:center;
	border:1px solid rgba(150,150,150,1);
	border-radius:10px; 
	-webkit-border-radius:10px; 
	-moz-border-radius:10px;
}

#singleDecoA p{
	padding:0 5em;
}




/* クロレラグラフ */

#ChlorellaGraph{
	width:100%;
	margin:0 0 1em 0;
	padding:0;	
}


#ChlorellaGraph th{
	text-align:left;
	font-weight:bold;
}

#ChlorellaGraph p{
	margin:0;
	padding:0;
	font-size:0.8em;
}

#ChlorellaGraph tr{
	margin:0;
	padding:0;
}

#ChlorellaGraph th{
	margin:0;
	padding:0.5em 0;
	font-weight:bold;
}

#ChlorellaGraph td{
	margin:0;
	padding:0.5em 1em;
	font-size:0.7em;
	border-bottom:1px solid #ccc;
}

#ChlorellaGraph .tdColoredA{
	background-color:rgba(74,149,20,0.20);
}







/* 製品ページ #products */



#product h6{
	text-align:center;
	margin:0em 0 3em;
	padding:0.5em 1.5em;
	font-size:0.7em;
	color:rgb(255,255,255);
	background-color:rgba(0,0,0,0.4);
	border-radius:0 0 0.5em 0.5em; 
	-webkit-border-radius:0 0 0.5em 0.5em;  
	-moz-border-radius:0 0 0.5em 0.5em; 
}


#product h2{
	margin:0em 0 1em;
	padding:0;
	text-align:center;
	font-weight:normal;
	font-size:1.3em;
	line-height:160%;
	letter-spacing:0.3em;
	font-family: "kozuka-gothic-pr6n";
}


#product h1{
	margin:0 0 0.5em 0;
	padding:0;
	text-align:center;
	font-weight:normal;
	font-size:3.5em;
	line-height:100%;
	letter-spacing:0.2em;
	font-family: "kozuka-gothic-pr6n";
}





#product hr{
	margin:2em 0;
	padding:0;
	border-top:1px dotted rgb(200,200,200);
}

.productText{
	margin:0;
	padding:0;
	line-height:200%;
	letter-spacing:0.2em;
	font-size:1em;
}

.productInfo{
	padding:3em;
	margin:0 0 1em 0;
	border:1px solid #ccc;
	border-radius:0.5em; 
	-webkit-border-radius:0.5em;  
	-moz-border-radius:0.5em; 
}



.productInfo p{
	text-align:left;
	margin:0;
	padding:0;
}




/* スペック構成 */

.productSpec{
	list-style:none;
}

.productSpec dt{
	clear:both;
	float:left;
	width:200px;
	margin:0 0 1.5em 0;
	padding:1em;
	line-height:160%;
	background-color:rgba(0,0,0,0);
	border:1px solid #ccc;
	border-radius:0.5em; 
	-webkit-border-radius:0.5em;  
	-moz-border-radius:0.5em;
}

.productSpec dd{
	margin:0 0 1.5em 230px;
	padding:0em 0 2em 30px;
	line-height:160%;
}






/* 栄養成分表示等 */

.productSpec .SpecGraph{
	list-style:none;
	margin:1em 0;
	padding:2em 2em 1em 2em;
	border:1px dotted #ccc;
	background-color:rgb(250,250,250);
	border-radius:0.3em; 
	-webkit-border-radius:0.3em;  
	-moz-border-radius:0.3em;
}

.productSpec .SpecGraph dt{
	clear:both;
	float:left;
	width:20em;
	margin:0;
	padding:0 0 1em 0;
	line-height:100%;
	font-weight:bold;
	border:none;
}

.productSpec .SpecGraph dd{
	margin:0 0 0 10em;
	padding:0 0 1em 0;
	line-height:100%;
	text-align:right;
	border:none;
}










.productTableA,
.productTableB,
.productTableC{
	width:635px;
	border-collapse: collapse;
}


.productTableA p,
.productTableB p,
.productTableC p{
	font-size:1em;
}



.productTableA th,
.productTableA td,
.productTableB th,
.productTableB td,
.productTableC th,
.productTableC td{
	margin:0;
	padding:0;
	border-bottom:1px dotted rgba(0,0,0,0.2);
 	font-size:1em;
}





/* tableB = 希望小売価格 */
 
.productTableB th{
	padding:0.5em 1em 0.5em 0;
	text-align:left;
	font-size:1em;
	white-space: nowrap;
}

.productTableB td{
	padding:0.5em 1em 0.5em 0;
	text-align:right;
	font-size:1em;
}



/* tableC = 栄養成分 */


.productTableC th{
	padding:0.5em 1em 0.5em 0;
	text-align:left;
	font-size:1em;
	white-space: nowrap;
}

.productTableC td{
	padding:0.5em 1em 0.5em 0;
	text-align:right;
	font-size:1em;
}






#productsTopic{
	list-style:none;
	margin:0 0 0 -2em;
	padding:2em;
}

#productsTopic li{
	display:block;
	margin:0;
	padding:0;
	font-weight:bold;
	border-bottom:1px solid #ccc;
}

.productImage {
	margin:1em 0 2em;
}

div.productImage img{
	clear:both;
	float:left;
	border-radius:5px; 
	-webkit-border-radius:5px;  
	-moz-border-radius:5px;
	
}



/* 原材料の表 */
.productRawMaterial{
	list-style:none;
	margin:0 0 1em 0;
	padding:2em 2em 1em 0em;
	border:1px dotted #ccc;
	background-color:rgb(250,250,250);
	border-radius:0.3em; 
	-webkit-border-radius:0.3em;  
	-moz-border-radius:0.3em;
}

.productRawMaterial li{
	margin:0;
	padding:0 0 1em 0;
	border-bottom:1px dotted #ccc;	
}

.productRawMaterial li.pRMbottom{
	border:none;
	padding:0 0 0em 0;

}


.sdgs01{
  border-spacing: 5px;
  width: 100%;
}

.sdgs01 th,.sdgs01 td{
  border-radius: 5px;
  text-align: center;
  padding: 10px 0;
}

.sdgs01 th{
  border:solid 1px #927141;
}

.sdgs01 td{
  background-color: #e4d4bc;
  border:solid 1px #af9d85;
}



.flex{
      display: flex;
    }
    .box1{
        border-radius:5px; 
	-webkit-border-radius:5px;  
	-moz-border-radius:5px;
        border:1px solid #ccc;
    }
    .box2{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
        text-align:left;
        line-height: 1.4em;
        font-size:0.96em;
        padding:1em 1em 1em 1em;
        border-top:1px dotted rgba(0,0,0,0.2);
        border-bottom:1px dotted rgba(0,0,0,0.2);
    }







/* 以下201611追加 */


/* 以下201808追加 */