@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	//float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}


.pc {display:block;}
.sp {display:none;}

#sect2{
margin-top: 00px;
background-image:url(images/bg_sect2.jpg);
height:1345px;
background-size: 1260px 1345px;
}
#sect22{
background-image:url(images/bg_sect22.png);
height:153px;
background-position: center top;
}
#sect3{
background-image:url(images/bg_sect3.jpg);
height:900px;
background-position: center top;
background-attachment: fixed;
background-repeat:repeat;
}
#sect4{
background-image:url(images/bg_sect4.jpg);
//height:2250px;
background-position: center -1000px;
background-attachment: fixed;
}
#sect6{
background-image:url(images/bg_sect6.png);
height:883px;
background-position: center top;
}
#sect7 {
background-color: rgba(50,101,43,1.00)
}
#sect8{
background-image:url(images/bg_sect3.jpg);
height:900px;
background-position: center top;
}
#sect9{
background-image:url(images/bg_sect9.png);
height:782px;
background-position: center top;
}
#sect10{
background-image:url(images/bg_sect10.jpg);
height:700px;
background-position: center -190px;
background-size: 1260px 893px;
}
/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin: 0 auto;
	width: 100%;
	max-width:1260px;
	text-align: center;
	//padding-left: 2.275%;
	//padding-right: 2.275%;
	clear: none;
	float: none;
	overflow-x: hidden;
}
#div1 {
}
.navigation {
	width:100%;
	max-width: 1260px;
	margin:0 auto;
	position:fixed;
	z-index:99;
	background-color:white;
	
	//border:solid 1px red;
}

.zeroMargin_mobile {
	margin-left: 0;
}
.hide_mobile {
	display: none;
}

#logo{
		float:left;
		width:500px;
		height:56px;
		margin:10px 190px 0 10px;
		color:green;
		font-size:2.5rem;
		font-weight:bold;
	}
	
	#logo img {
		padding-top:10px;
		width:150px;
		height:46px;
	}


header nav ul{
	float:right;
	width:600px;	
	margin:15px  auto 10px;
	font-weight:400;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	
	//border:solid 1px red;
}

nav li {
float:left;
margin-left:10px;
}

#sect2 {
	text-align: center;
	z-index: 7;
}

#tokkyo {
	text-align: left;
	margin:8px auto 8px 20px;
}
#sukoyakani p{
	
	margin: 15px 20px 8px auto;
}

#sukoyakani img{
	margin-top: 5px;
	width:40px;
	height:40px;
}

#tokkyo, #sukoyakani {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 0.8em;
	font-weight: 100;
	line-height: normal;
	color:#8AB4DA;
}

#title_area {
		text-align: center;
		margin:0 auto;
	padding-top: 2rem;
	width:800px;
	font-size:2em;
	font-weight: 400;
	color: #cef;
	font-feature-settings:"palt"; 
}
#title_area p {
	text-align: center;
	margin: 80px auto 10px;
	width:800px;
}

#title_area h1{
	font-size: 1.8em;
}

#title_area h2{
	font-size: 0.9em;
}

#koshunso_toha{
}

#sect22 p{
	width: 600px;
	line-height: 1.2em;
}
#sect22 h2{
	
	line-height: 1.7em;
	padding-top:40px;
}



/* 四角形かさね合わせレイアウト用のスタイル群*/

.quad1 {
position:static;
z-index:10;
//width:350px;height:350px;
//border:solid 1px black;
}
.quad2 {
position:relative;
z-index:20;
//width:350px;height:350px;
//border:solid 1px red;
}
.quad3 {
position:relative;
z-index:30;
//width:350px;height:350px;
//border:solid 1px blue;
}
/* 矩形かさね合わせレイアウト用のスタイル群*/


/* sect2 矩形かさね合わせ*/
#quadra1 {
	margin-top: 38rem;
	width:400px;
}

#sect2 .quad1 {
	width:350px;height:340px;
	
	padding-top: 5px;
	color: rgba(97,130,58,1.00);
	font-size: 1em;
	font-feature-settings: "palt";
	background-color:#FAD8A7;
	//border: 0;
}

#sect2 .quad2 {
	width:350px;height:350px;
	left:30px;top:30px;
	border: solid 1px white;
}

#sect2 .quad3 {
	width: 330px;
	height: 330px;
	left: -15px;
	top: -25px;
	padding: 10px;
	color: #FFFFFF;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size: 1.7em;
	line-height: 1.3em;
	text-align: left;
	background: rgba(95,131,51,0.90);
	//border: 0;

#se}

#sect2 .quad3 h2 {
	text-align: center;
}

#sect3 h1, #sect8 h1{
	position: relative;
	top: 150px;
	font-size: 3em;
}

#sect3 h1 span,#sect8 h1 span {
	font-size: 1.4em;
}




/*******************************SECT4 グラフなど***/
#sect4 {
	padding: 30px;
}

#clearBlackSheet {
	box-sizing: content-box;
	background-color:rgba(0,0,0,0.40);
	border-radius:7px;
	border-style: groove;
	width:95%;height: 99%;
	padding: 20px auto;
}

#sect4 h2 {
	padding:40px;
	color: chartreuse;
	font-size:2.5em;
	font-feature-settings: "palt";
}



.fig_box {　　/*左右あわせたボックス*/
	clear:both;
	margin-top:50px;
	width:90%;
	//border: solid 1px blue; 
}

/*左の矩形の半透明白*/
.clearWhiteSheet {background-color: rgba(255,255,255,0.39)}

#sect4 .quad1 {
	width:300px;
	height:300px;
}

#sect4 .quad2 {
	width:300px;
	height:300px;
	left:30px;top:30px;
	font-size: 400%;
	text-align: left;
	font-feature-settings: "palt";
	border: solid 1px white;
}

/*スマホ用代替画像グラフの表示*/
#sect4 .fl_r img.sp_fig {
	display: none;　　　//PCでは非表示
	margin: 50px auto auto 155px;
	width:320; height:232;
}

/*右側のBox　*/
#sect4 .fig_quad {
	border:solid 1.5px white;
	padding:5px;
	width:450px;
	height: 320px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-weight: 200;
		
}

/*リノレン酸説明*/
#sect4 #linolenic {
	border:solid 1.5px white;
	padding:5px;
	width:450px;
	height: 320px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-weight: 200;
	
}




/*グラフの縦軸*/
#sect4 .fig_quad .fl_l ul {
	width: 40px;

}
/*グラフの縦軸目盛り*/
#sect4 .fig_quad .fl_l li {
    font-size: 0.8em;
    height: 45px;
    margin: 0;
    text-align: right;
}
/*グラフの縦軸herf*/
#sect4 .fig_quad .fl_l.herf ul {
	margin-left:10px;
	width: 32px;
}
/*グラフの縦軸目盛りherf*/
#sect4 .fig_quad .fl_l.herf li {
    font-size: 0.8em;
    height: 25px;
    margin: 0;
    text-align: right;
}







/*グラフ構築　背景の罫線をdivで積み上げている*/
#sect4 .parts {
	width:380px;
	height:45px;
	margin:0 auto;
	border-top: solid 1px white;
	border-right: solid 1px white;
	border-left: solid 1px white;

}
/*グラフ構築　カルシウムマグネシウム用*/
#sect4 .herf .parts {
	width:150px;
	height:50px;

}
/*グラフ底辺*/
#sect4 .base {
	border-bottom:solid 1px white;
	position: relative;
	
}

/*グラフ横軸の枠*/
#sect4 .yokojiku ul {
	margin-left:20px;
	margin-top:8px;
	height:25px;
	}
/*グラフ横軸の項目*/
#sect4 .fig_item li {
	float:left;
	width:70px;
	font-size: 0.8em;
	font-weight: 100;
}


/*アディポオ折れ線グラフ位置指定*/
#sect4 img#fig_data1 {
	float: left;
	position: absolute;
	z-index: 50;
	bottom:70px;
	left:50px;

}

/*シマアザミはアディポネクチンを促進します。*/
#sect4 p#note {
	width:600px;
	margin:0 auto;
	padding:20px;
	text-align: left;
	font-size:1.2em;
	line-height: 1.3em;
}



/*ポリフェノール棒グラフ共通の指定*/
#sect4 li.fig_data2 {

	width:30px;
	background-color: rgba(235,209,57,1.00);
	position:absolute;
	bottom:0;
	margin-left:43px; 
	padding-top: 4px;
}
/*ポリフェノール棒グラフの個別の指定*/
#sect4 li#bar1 {height:15px;left:0px;}
#sect4 li#bar2 {height:21px;left:65px;}
#sect4 li#bar3 {height:26px;left:135px;}
#sect4 li#bar4 {height:48px;left:205px;}
#sect4 li#bar5 {height:185px;left:275px;background-color: rgba(3,205,19,1.00)}


/*αリノレン酸の説明*/
#sect4 p#note2 {
	padding:10px;
	width:430px;
	font-size:1.2em;
	line-height:1.3em;
	text-align:left;
}

#sect4 .yokojiku ul.fig_item {
	width:350px;
	font-size:1.3em;
}
#sect4 .yokojiku li {
	float: left;
	width: 70px;
}





/*カルシウムマグネシウム棒グラフ共通の指定*/
#sect4 li.fig_data3 {
	width:20px;
	background-color: rgba(235,209,57,1.00);
	position:absolute;
	bottom:0;
	margin-left:4px; 
	padding-top: 4px;
}
/*カルシウム棒グラフの個別の指定*/
#sect4 li#bar1herf {height:10px;left:15px;}
#sect4 li#bar2herf {height:21px;left:50px;}
#sect4 li#bar3herf {height:115px;left:85px;}
#sect4 li#bar4herf {height:145px;left:120px;background-color: rgba(3,205,19,1.00)}
/*magnecium棒グラフの個別の指定*/
#sect4 li#bar5herf {height:33px;left:15px;}
#sect4 li#bar6herf {height:52px;left:50px;}
#sect4 li#bar7herf {height:116px;left:85px;}
#sect4 li#bar8herf {height:174px;left:120px;background-color: rgba(3,205,19,1.00)}

#sect4 h3 {
	margin-top:20px;
	font-size:2em;
	line-height: 1.3em;
}

#sect4 .herf h4 {
	width:200px;
	margin:10px auto;
 }


/*グラフの縦軸目盛りherf magnecium*/
#sect4 .fig_quad .fl_l.herf#mag fl_l li {
    font-size: 0.8em;
    height: 25px;
    margin: 0;
    text-align: right;
}


#sect4 .herf .yokojiku ul.fig_item {
	width:155px;
	padding-left: 1px;
	font-size:0.9em;
	//border:solid 1px red;
}
#sect4 .herf .yokojiku li {
	float: left;
	width: 37px;
	padding-left: 1px;
	margin-left:1px;
	font-weight: 100;}
/*以上カルシムマグネシム*/



#sect6 {text-align: center; }

#sect6 .quadra2 {
	width:400px;
	margin:0 auto;
padding-top:50px;
}
#sect6 .quad1 {
	width:400px;height:400px;
	color: rgba(97,130,58,1.00);
	font-size: 1em;
	font-feature-settings: "palt";
	background-color: rgba(255,255,255,0.40);
	//border: 0;
}
#sect6 .quad2 {
	width:400px;height:400px;
	left:50px;top:50px;
	border: solid 1px white;
}
#sect6 .quad3 {
	width:400px;height:400px;;
	left:-25px;top:-25px;
	color:#FFFFFF;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size:1.7em;
	line-height: 1.3em;
	text-align: left;
	background:rgba(95,131,51,0.90);
}

#sect6 .quad3 p {
	font-size: 1.5em;
	line-height: 2em;
}

#sect6 dt {
	margin: 3px 20px;
}

#sect6 dd span {
	font-size: 1.5em;
	line-height: 1.5em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"
}

.txt_orange {color:orange;}
.txt_pink {color:pink;}
.txt_blue {color:blue;}
.txt_yellow {color:yellow;}

	
#sect7 h2 {
	padding:50px 0 30px;
	font-size: 2.5em;
}

#sect7 #box1 {  /*お話し*/
	width:850px;
	margin: 15px auto;
	font-size: 1.5em;
	text-align: left;
	line-height: 1.5em;
	//border: solid 1px black;
}

#sect7 .fl_l {
	padding:5px 0 0 10px;
	//width: 260px;
	//border: solid 1px red;
}


#sect7 .quad1 {  /*上山写真*/
	width:250px;height:250px;
	z-index: 10;
	border: solid 1px white;
}

#sect7 .quad2 {
	width:250px;height:250px;
	left:-10px;top:-10px;
	z-index: 20;
	//border: solid 1px orange;
}

#sect7 #box1 .fl_r {/*肩書き*/
	width: 700px;
	height: 226px;
	padding: 15px;
	font-size: 0.8em;
	text-align: left;
	line-height: 1.5em;
	border: solid 1px white;
	width: 525px;
}

#sect7 #box2 {
	background-image: url("images/hospital.png");
	width: 850px;
	height:337px;
	margin: 10px auto;
	padding-top: 20px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

#ueyama_prof {
	font-size: 1.05em;
	line-height:1.8em;
	text-align:left;
}

#ueyama_prof span {
	font-size: 1.5em;
	line-height: 1.2em;
}

#sect7 #box2 dl {
	margin-top: 8px;
	width:450px;
	line-height: 1.5em;
}

#sect7 #box2 dt {
	float:left;
}

#sect7 #box2 dd {
	margin-left:80px;
	text-align: left;
}

#sect8 h1 {
	/*  これについてはsect3にまとめて指定*/
}
	
#sect8 #box3 {
    position: relative;
    top: 570px;
    width: 600px;
    margin: 0 auto;
	}

#sect8 .button {
	background-color:orange;
	/*color指定はtagにあり*/
	font-size: 2em;
	width:250px;height:50px;
	border-radius:5px;
	padding-top:15px;
	
}


#sect9 .box1 {
	margin: 0 auto;
	padding: 50px 0 50px 0;
	width:700px;
}

#productDetail {
	display: grid;
	grid: 30px 100px 30px 30px 70px / 80px 250px;
	grid-row-gap: 5px;
	grid-column-gap: 5px;
	line-height: 1.2em;
	//background: rgba(0,0,0,0.31);
	padding: 5px;

}


#productDetail div {
    background-color: rgba(255,255,255,0.17);
    padding: 5px;
}

#eiyo {
	display: grid;
	grid: 30px 30px 30px 30px 30px / 100px 200px;
	grid-row-gap: 5px;
	grid-column-gap: 5px;
	line-height: 1.2em;
	padding: 5px;
}

#eiyo div {
    background-color: rgba(255,255,255,0.17);
    padding: 5px;
}

#sect9 .box2 ul {
	padding:30px 0;
}

#sect9 .box2  {
	margin:0 auto;
	width:700px;
	text-align: left;
	}

#sect9 .box2 dl{
	width:700px;
	line-height: 1.2em;
}

#sect9 .box2 dt {float:left;}
#sect9 .box2 dd {float:left;}

#sect9 .box2 dt {
	margin-left:15px;
	width:30px;
}

#sect9 .box2 dd {
	width:650px;
}



#sect10{
	text-align: center;
	}
#sect10 .box1 {
	width:400px;
	margin:0 auto;
	padding-top:50px;
}
#sect10 .quad1 {
	width:400px;height:400px;
	color: rgba(97,130,58,1.00);
	font-size: 1em;
	font-feature-settings: "palt";
	background-color: rgba(255,255,255,0.40);
	//border: 0;
}
#sect10 .quad2 {
	width:400px;height:400px;
	left:50px;top:50px;
	border: solid 1px white;
}
#sect10 .quad3 {
	width:400px;height:400px;;
	left:-25px;top:-25px;
	padding: 10px;
	color:#FFFFFF;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size:1.5em;
	line-height: 1.5em;
	text-align: left;
	background:rgba(95,131,51,0.80);
}

#sect10 .quad3 p {
	font-size:1.2em;
	line-height: 2.0rem;
}
#sect10 li {margin-left:50px;}

#sect10 li span {
	font-size: 1.5em;
	line-height: 1.5em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"
}


#sect11 {
	background:rgba(95,131,51,1.00);
	height:980px;
}

#sect11 img {width:40px;}

#sect11 dl {
	padding-top: 40px;
    width: 800px;
    //border: 2px solid rgba(224,148,150,1.00);
}
#sect11 dt {
	margin:20px auto ;
}
#sect11 dd {
	margin:20px 0 0 50px ;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 1.5em;
	line-height: 1.5em;
}

#sect11 p.orange_notice {
	margin: 10px auto 20px 50px;
	width:460px;
	height:70px;
	background:darkorange;
	border-radius: 5px;
	font-size:3em;
	font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
}

#sect11 p img {
	margin:18px 20px auto 15px;
}


 #sect11 dd {
	//padding:20px auto 20px 10px;
}

footer {
		margin-top: 30px;
		font-size: 0.8em;
		line-height: 1.5em;
	}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

/*@media only screen and (min-width: 481px) {*/
 /*　画面サイズが481pxから768pxまではここを読み込む　*/
/*.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
	}
#div1 {
}
.navigation {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
*/

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

/*@media only screen and (min-width: 769px) {*/
/*
.gridContainer {
	width: 100%;
	max-width: 1260px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.navigation {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}*/