@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;
	//border: solid 1px red;
}

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




/*01_t.cssは、cssファイルとして横幅481px以上800px以下を担当する*/
.pc {display:none;}
.sp {display:block;}



#sect2{
background-image:url(images/bg_sect2.jpg);
height:623px;
background-position: center -50px;
background-size: 630px 673px;
background-repeat:no-repeat;
	//border:solid 1px red;
}
#sect22{
background-image:url(images/bg_sect22.png);
height:173px;
background-position: center top;
background-size: 630px 173px;
}
#sect3{
background-image:url(images/bg_sect3.jpg);
height:450px;
background-size: 630px 450px;
background-position: center top;
}
@media only screen and ( min-width : 481px ) and (max-width : 703px ) {
#sect4{
background-image:url(images/bg_sect4.jpg);
height:2710px;
background-size: 630px 1379px;
background-position: center top;
//background-attachment: fixed;
background-repeat:repeat;
padding-top:4%;
	}}
@media only screen and ( min-width : 704px ) and (max-width : 800px ) {
	#sect4 {
	background-image:url(images/bg_sect4.jpg);
	background-repeat:repeat;
	height:1860px;
	
	}
}

#sect6{
background-image:url(images/bg_sect6.png);
height:442px;
background-size: 630px 442px;
background-position: center top;
}
#sect7 {
background-color: rgba(50,101,43,1.00)
}
#sect8{
background-image:url(images/bg_sect3.jpg);
height:450px;
background-size: 630px 450px;
background-position: center top;
}
#sect9{
background-image:url(images/bg_sect9.png);
height:1282px;
background-size: 630px 391px;
background-position: center top;
background-repeat:repeat;
}
#sect10{
background-image:url(images/bg_sect10.jpg);
height:420px;
background-position: center top;
background-size: 630px 446px;
}


@media only screen and ( min-width : 481px ) and (max-width : 800px ) {
#sect2,#sect22,#sect3,#sect4,#sect5,#sect6,#sect7,#sect8,#sect9,#sect10 {
	background-size:800px;	
	//border:solid 1px red;
	}
#sect2 {
	height:790px;
	background-position: center -60px;
	background-size: 800px;	
	}
#sect22 {
	height:173px;
	//background-position: center top;
	background-size: 800px 120%;
	}
#sect3 {
	height:530px;
	//background-position: center top;
	background-size: 800px;	
	}
}


/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin: 0;
	//margin-left: auto;
	//margin-right: auto;
	width:100%;
	min-width: 375px;
	max-width:800px;
	
	//padding-left: 2.275%;
	//padding-right: 2.275%;これは絶対off（両わきの空白アンバランスに生じる）
	clear: none;
	float: none;
	//overflow-x: hidden;
	//border:solid 1px black;
	}
#div1 {
	}
.navigation {
	//clear:both;
	width:100%;
	height:65px;
	position:fixed;
	left:0;
	z-index:99;
	background-color:white;
	//border:solid 1px black;
}
.zeroMargin_mobile {
	margin-left: 0;
}
.hide_mobile {
	display: none;
}

	#logo{
		width:500px;
	margin-left:15px;
	text-align: left;
	color:green;
		font-size:1.5rem;
		font-weight:bold;
	//border: solid 1px green;
}

#logo img {
		width:70%;
		max-width:100px;
	height:70%;
	margin:5px auto 0 0px;
	//border: solid 1px orange;
}


header nav {
	width:100%;
	//padding:25px 10px;
	text-align: right;
	font-size: 0.9em;
	font-weight:200;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	//border:solid 1px green;
	}
nav ul{
	width: 560px;
	height:20px;
	margin:45px 0 0 auto;
	//margin-right:0;
	//margin-left:auto;
	//border:solid 1px blue;
}

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

#sect2 {
	text-align: center;
	z-index: 7;
	padding: 0 2%;
}

#tokkyo {
	//margin-left: 18px;
	position: relative;
	top: 15px;
	text-align: left;
	font-size: 2em;
	//border: solid 1px red;
}
#sukoyakani p{
	margin: 17px 0 8px auto;
	font-weight: lighter;
}
#sukoyakani img{
	margin-top: 15px;
	width:20px;
	height:20px;
}
#tokkyo, #sukoyakani {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 0.6em;
	font-weight: 100;
	line-height: normal;
	color: #A2D0F2;
}
#title_area {
	position: relative;
	top:40px;
	width: 100%;
	max-width:700px;
    margin: 0 auto;
    font-size: 1.0em;
    font-weight: 700;
    color: rgba(220,240,247,1.00);
    font-feature-settings: "palt";
	text-align: center;
}
#title_area p {
	//text-align: center;
	margin: 0 auto 5px;
	width:200px;
}

#title_area h1{
	width:96%;
	margin: 0 auto 5px;
	font-size: 2em;
}

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

#koshunso_toha{
}

#sect22 p{
	text-align: left;
	width: 350px;
	font-size: 1.0em;
	line-height: 1.3em;
}
#sect22 h2{
	font-size: 1.2em;
	line-height: 1.3em;
	padding-top:10px;
}

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

.quad1 {
position:relative;
z-index:10;
}
.quad2 {
position:relative;
z-index:20;

}
.quad3 {
position:relative;
z-index:30;
}
/* 矩形かさね合わせレイアウト用のスタイル群*/


/* sect2 矩形かさね合わせ*/
#sect2 #quadra1 {
	margin: 370px auto 0;
	width:250px;
	height: 250px;
}

#sect2 .quad1 {
	width: 220px;
	height: 220px;
	//margin-left: 72px;
	padding-top: 5px;
	color: rgba(40,67,8,1.00);
	font-size: 1em;
	font-feature-settings: "palt";
	background-color: #FAD8A7;
	//border:solid 10px red;
}

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

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

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






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

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






#sect4 {
	padding: 30px auto;
}

#clearBlackSheet {
	background-color:rgba(0,0,0,0.40);
	border-radius:7px;
	border-style: groove;
	min-width: 360px;
	width:90%;
	
	//height: 99%;
	padding: 20px auto;
	text-align:center;
}

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

.fig_box {
	margin-top:50px;
	width:90%;
	//border: solid 1px blue; 
}

.clearWhiteSheet {background-color: rgba(255,255,255,0.39)}

#sect4 .quad1 {
	margin-left: 40px;
	width: 200px;
	height: 200px;
}

#sect4 .quad2 {
	width: 200px;
	height: 200px;
	left: 20px;
	top: 20px;
	font-size: 2.7em;
	line-height: 1.2em;
	text-align: left;
	font-feature-settings: "palt";
	border: solid 1px white;
}

#sect4 .fl_l {
	//width:45%;
}

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


.fig_quad {
	display:none;/*スマホではコード描画のグラフは全て非表示*/
	
	margin-top: 100px;
	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 {
	margin-top: 30px;
	padding:5px;
	width:320px;
	//height: 320px;
	font-family:  "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-weight: 200;
	font-size: 0.8em;
}

#sect4 #linolenic h4 {	
}


/*グラフの縦軸*/
#sect4 .fig_quad .fl_l ul {
	width: 30px;
	margin-right: 1px;
}
/*グラフの縦軸目盛り*/
#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 {
	width: 30px;
}
/*グラフの縦軸目盛りherf*/
#sect4 .fig_quad .fl_l.herf li {
    font-size: 0.8em;
    height: 26px;
    margin: 0;
    text-align: right;
}
/*グラフの縦軸目盛りherf magnecium*/
#sect4 .fig_quad .fl_l.herf#mag fl_l 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 .herf .yokojiku ul {
	margin-top:8px;
	height:5px;
	border:solid 1px red;
	}

#sect4 .herf .fig_item li {
	float:left;
	font-size:0.8em;
	font-weight: 100;
	border:solid 1px red;
}

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


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

}

/*ポリフェノール棒グラフ共通の指定*/
#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 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:20px 0 0;
	font-size:1.5em;
	line-height: 1.3em;
	color:coral;
}



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

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

#sect6 {text-align: center; }

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

#sect6 .quad3 p {
	font-size: 1em;
	line-height: 1.8em;
}

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

#sect6 dd span {
	font-size: 1em;
	line-height: 1.2em;
	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 {
	width:220px;
	margin:30px auto;
	//padding:30px 0;
	font-size: 1.5em;
}

#sect7 #box1 {
	width:360px;
	padding: 5px;
	text-align: left;
	//border: solid 1px black;

}

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

#sect7 .quad1 {
	width:100px;height:100px;
	margin-left: 10px;
	z-index: 10;
	border: solid 1px white;
}

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

#sect7 #box1 .fl_r {
	width:205px;
	height:91px;
    margin-right:10px;
	padding: 7px;
    font-size: 0.82em;
    text-align: left;
    line-height: 1.7em;
    border: solid 1px white;
}

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

#ueyama_prof {
	font-size: 0.9em;
	line-height:1.3em;
	text-align:left;
	
}

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

#sect7 #box2 dl {
	//margin-top: 8px;
	width:340px;
	padding:5px;
	font-size: 0.8em;
	line-height: 1.3em;
}

#sect7 #box2 dt {
	float:left;
}

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

#sect8 h1 {
	/*  これについてはsect3にまとめて指定*/
}
	
#sect8 #box3 {
	
    position: relative;
    top: 300px;
    width:270px;
    margin: 0 auto;
	text-align: center;
	}

#sect8 .button {
	background-color:#DF9102;
	/*color指定はtagにあり*/
	font-size: 1em;
	width:130px;height:25px;
	margin:5px 0px;
	border-radius:5px;
	padding-top:15px;
	
}


#sect9 .box1 {
	margin: 0 auto;
	padding: 50px 0 50px 0;
	width:350px;
	text-align: center;
}

#productDetail {
	display: grid;
	grid: 30px 70px 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 {
	width:350px;
	padding:30px 0;
}

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

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

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

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

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



#sect10{
	text-align: center;
	}
#sect10 .box1 {
	width:350px;
	margin:0 auto;
	padding-top:50px;
}
#sect10 .quad1 {
	width:300px;height:300px;
	color: rgba(97,130,58,1.00);
	//font-size: 1em;

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

#sect10 .quad3 p {
	font-size:1em;
	line-height: 1.5em;
}
#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 {
	width:100%;
	text-align:center;
	background:rgba(95,131,51,1.00);
	height:900px;

}

#sect11 img {width:40px;}

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

#sect11 p.orange_notice {
	margin: 0px auto 16px;
	width:310px;
	height:50px;
	background:darkorange;
	border-radius: 5px;
	font-size:1.8em;
	padding-bottom: 10px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
}

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

	footer {
		width:520px;
		margin: 30px auto 0px;
		font-size: 0.8em;
		line-height: 1.5em;
	}


/*
@media only screen and (max-width: 480px) {
header nav {
	padding-top:10px;
	font-size: 0.8em;

//border: solid 1px blue;
	}
nav ul {
	width:375px;
	margin:0 0 0 auto;
	}
#sect2,#sect22,#sect3,#sect4,#sect5,#sect6,#sect7,#sect8,#sect9,#sect10,#sect11,footer {
	//background-size:800px;	
	//border:solid 1px red;
	}
}

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

/*@media only screen and ( min-width : 481px ) and (max-width : 800px ){
 /*　画面サイズが481pxから799pxまではここを読み込む　

.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}*/

/* Desktop Layout: 801px 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 {
		width:100%;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
*/