@charset "utf-8";
@font-face {
font-family: "Noto Sans Regular JP";
src: url("../font/NotoSansJP-Regular.ttf");
}
@font-face {
font-family: "Noto Sans Medium JP";
src: url("../font/NotoSansJP-Medium.ttf");
}

/* =reset
--------------------------------------------------------- */
html,body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
p,form,fieldset,legend,a,em,address,img {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
border: none;
text-align: left;
line-height: 1;
list-style-type: none;
font-family: "Noto Sans Regular JP", sans-serif;
}

img {
display:block;
}
/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
img {
max-width: 100%;
height: auto;
width /***/:auto;
}
video {
max-width: 100%;
height: auto;
width /***/:auto;
}
}

/* 画面サイズ 1000px〜*/
@media screen and (min-width: 1000px){
.brPc {display:block;}
.brSp {display:none;}
}
/* 画面サイズ 〜999px*/
@media screen and (max-width: 999px){
.brPc {display:none;}
.brSp {display:block;}
}

.clearfix:after {
content: "";
display: block;
clear: both;
}

a:link {
color:#62a7d5;
text-decoration: none;
line-height:140%;
}
a:visited {
color:#62a7d5;
text-decoration: none;
}
a:hover {
color:#62a7d5;
text-decoration: underline;
}

/* =layout
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
body {
font-size: 16px;
margin: 0px;
padding: 0px;
text-align: center;
color: #000000;
background:#26474d;
}
#wrapper {
/*padding:2vh 2vh 0;*/
padding:20px 20px 0;
}
#mainCont {
/*padding:100px 0 0;*/
background:#f6f3ec;
}
#index #mainCont {
padding:60px 0 0;
}
#footer {
background:#000000;
}
#title {
width:900px;
margin:0 auto;
}
#readText {
width:900px;
margin:0 auto 60px;
}
#articleBox {
width:900px;
margin:0 auto;
padding:0 0 30px;
}
#pageBack {
width:900px;
margin:0 auto;
padding:0 0 30px;
}
#skipNav {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
body {
font-size: 16px;
margin: 0px;
padding: 0px;
text-align: center;
color: #000000;
background:#26474d;
}
#wrapper {
padding:10px 0 0;
}
#index #wrapper {
padding:0 0 0;
}
#mainCont {
width:100%;
background:#f6f3ec;
margin:0 0 0;
}
#footer {
background:#000000;
}
#title {
/*width:94%;*/
width:94vw;
margin:0 auto;
}

#readText {
/*width:94%;*/
width:94vw;
margin:0 auto 60px;
}
#articleBox {
/*width:94%;*/
width:94vw;
margin:0 auto;
padding:0 0 30px;
}

#pageBack {
width:94vw;
margin:0 auto;
padding:0 0 30px;
}

#skipNav {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
}

}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {

}

/* =object
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
h1 {
font-size: 225%;/* 36px */
line-height:100%;
margin:0 0 20px;
position:relative;
font-family: "Noto Sans Regular JP", sans-serif;
}
h1 .small {
font-size: 50%;/* 18px */
}
span.english {
font-size: 64px;
line-height:105%;
opacity:0.1;
filter: alpha(opacity=10);
-ms-filter: "alpha( opacity=10 )";
font-family: "Noto Sans Medium JP", sans-serif;
}

h2 {
margin:0 0 20px;
font-size: 163%;/* 26px */
line-height:120%;
font-family: "Noto Sans Regular JP", sans-serif;
}
h3 {
margin:0 0 20px;
font-size: 138%;/* 22px */
line-height:120%;
font-family: "Noto Sans Regular JP", sans-serif;
}
h3 span {
font-size: 80%;
margin:0 0 0 20px;
}
h4 {
margin:0 0 10px;
font-size: 100%;/* 16px */
line-height:120%;
font-family: "Noto Sans Regular JP", sans-serif;
}
h5 {
font-size: 88%;/* 14px */
line-height:120%;
font-family: "Noto Sans Regular JP", sans-serif;
}
h1.border,
h2.border,
h3.border,
h4.border {
padding-bottom:5px;
border-bottom:3px solid #000000;
}
h1.headline,
h2.headline,
h3.headline,
h4.headline {
padding-left:8px;
border-left:5px solid #f08300;
color:#f08300;
}

#mainCont p {
font-size: 82%;/* 13px */
line-height:220%;
margin:0 0 30px;
}

.orange {
color:#f08300;
}

.floatLeft {
float:left;
margin:0 0 20px;
}
.floatRight {
float:right;
margin:0 0 20px;
}

.alignCenter {
text-align:center;
}
.alignRight {
text-align:right;
}
.alignCenter img {
margin:0 auto;
}
.alignRight img {
margin:0 0 0 auto;
}

.mgn0{
margin-bottom:0px !important;
}
.mgn10{
margin-bottom:10px !important;
}
.mgn20{
margin-bottom:20px !important;
}
.mgn30{
margin-bottom:30px !important;
}
.mgn40{
margin-bottom:40px !important;
}
.mgn50{
margin-bottom:50px !important;
}
.mgn60{
margin-bottom:60px !important;
}

/* whiteBox */
.whiteBox{
padding:30px;
background:#ffffff;
}

/* listArrow */
ul.listArrow{
margin:0 0 30px;
}
ul.listArrow li{
font-size: 138%;/* 22px */
margin:0 0 20px;
}

/* linkBox */
.linkBox{
width:280px;
background:#ffffff;
}
.linkBox img{
width:280px;
}
.linkBox span{
width:280px;
display:table-cell;
height:60px;
line-height:100%;
vertical-align:middle;
padding:0 10px;
background: url("../images/arrow_linkBox.png") no-repeat 95% 50%;
}
.linkBox a:link {
color:#000000;
text-decoration: none;
line-height:140%;
}
.linkBox a:visited {
color:#000000;
text-decoration: none;
}
.linkBox a:hover {
color:#999999;
text-decoration: none;
}

/* linkBoxWide */
.linkBoxWide{
width:435px;
background:#ffffff;
}
.linkBoxWide img{
width:435px;
}
.linkBoxWide span{
width:435px;
display:table-cell;
height:60px;
line-height:100%;
vertical-align:middle;
padding:0 10px;
background: url("../images/arrow_linkBox.png") no-repeat 95% 50%;
}
.linkBoxWide a:link {
color:#000000;
text-decoration: none;
line-height:140%;
}
.linkBoxWide a:visited {
color:#000000;
text-decoration: none;
}
.linkBoxWide a:hover {
color:#999999;
text-decoration: none;
}

/* boxLink */
.boxLink{
display:inline-block;
border:1px solid #cfcfcf;
background:#ffffff url("../images/arrow_linkBox.png") no-repeat 95% 50%;
}
.boxLink a{
font-size: 115%;/* 15px */
display:inline-block;
padding:18px 35px 18px 20px;
font-family: "Noto Sans Regular JP", sans-serif;
transition: .3s;
}
.boxLink a:link {
color:#000000;
text-decoration: none;
line-height:140%;
}
.boxLink a:visited {
color:#000000;
text-decoration: none;
}
.boxLink a:hover {
color:#999999;
text-decoration: none;
}

/* btnList */
.btnList {
width:110px;
height:48px;
background:url("../images/btn_list_on.png") no-repeat 0 0;
}
.btnList img {
transition: .3s;
}
.btnList img:hover {
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "alpha( opacity=0 )";
}

/* imghover */
a.imghover img {
transition: .3s;
}
a.imghover img:hover {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}

/*a.imghover:hover img {
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
background: #fff;
}*/

/* table1 */
.table1 table{
width:100%;
border-collapse:collapse;
margin:0 0 20px;
}
.table1 table th{
font-size: 82%;/* 13px */
line-height:140%;
padding:10px;
background:#fcc800;
border:1px solid #ff8b00;
text-align:center;
}
.table1 table td{
font-size: 82%;/* 13px */
line-height:140%;
border:1px solid #ff8b00;
text-align:center;
vertical-align:top;
padding:10px;
}
.table1 table td p{
margin:0 10px 5px !important;
text-align:center;
}
.table1 table td h5{
padding:10px;
text-align:center;
}

}
/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
h1 {
font-size: 225%;/* 36px */
line-height:100%;
margin:0 0 20px;
position:relative;
font-family: "Noto Sans Regular JP", sans-serif;
}
h1 .small {
font-size: 50%;/* 18px */
}
span.english {
font-size: 56px;
line-height:105%;
opacity:0.1;
filter: alpha(opacity=10);
-ms-filter: "alpha( opacity=10 )";
font-family: "Noto Sans Medium JP", sans-serif;
}

h2 {
margin:0 0 20px;
font-size: 163%;/* 26px */
line-height:120%;
font-family: "Noto Sans Regular JP", sans-serif;
}
h3 {
margin:0 0 10px;
font-size: 138%;/* 22px */
line-height:120%;
font-family: "Noto Sans Regular JP", sans-serif;
}
h3 span {
font-size: 80%;
margin:0 0 0 20px;
}
h4 {
margin:0 0 10px;
font-size: 100%;/* 16px */
line-height:120%;
font-family: "Noto Sans Regular JP", sans-serif;
}
h5 {
font-size: 88%;/* 14px */
line-height:120%;
font-family: "Noto Sans Regular JP", sans-serif;
}
h1.border,
h2.border,
h3.border,
h4.border {
padding-bottom:5px;
border-bottom:3px solid #000000;
}
h1.headline,
h2.headline,
h3.headline,
h4.headline {
padding-left:8px;
border-left:5px solid #f08300;
color:#f08300;
}

#mainCont p {
font-size: 82%;/* 13px */
line-height:220%;
margin:0 0 30px;
}

.orange {
color:#f08300;
}

.floatLeft {
float:left;
margin:0 0 20px;
}
.floatRight {
float:right;
margin:0 0 20px;
}

.alignCenter {
text-align:center;
}
.alignRight {
text-align:right;
}
.alignCenter img {
margin:0 auto;
}
.alignRight img {
margin:0 0 0 auto;
}

.mgn0{
margin-bottom:0px !important;
}
.mgn10{
margin-bottom:10px !important;
}
.mgn20{
margin-bottom:20px !important;
}
.mgn30{
margin-bottom:30px !important;
}
.mgn40{
margin-bottom:40px !important;
}
.mgn50{
margin-bottom:50px !important;
}
.mgn60{
margin-bottom:60px !important;
}

/* whiteBox */
.whiteBox{
padding:30px;
background:#ffffff;
}

/* listArrow */
ul.listArrow{
margin:0 0 30px;
}
ul.listArrow li{
font-size: 138%;/* 22px */
margin:0 0 20px;
}

/* linkBox */
.linkBox{
background:#ffffff;
}
.linkBox span{
display:table-cell;
/*width:100%;*/
width:420px;
height:7vh;
line-height:100%;
vertical-align:middle;
padding:0 20px 0 10px;
font-size: 94%;/* 15px */
background: url("../images/arrow_linkBox.png") no-repeat 95% 50%;
}
.linkBox a:link {
color:#000000;
text-decoration: none;
line-height:140%;
}
.linkBox a:visited {
color:#000000;
text-decoration: none;
}
.linkBox a:hover {
color:#999999;
text-decoration: none;
}

/* linkBoxWide */
.linkBoxWide{
background:#ffffff;
}
.linkBoxWide span{
width:435px;
display:table-cell;
height:7vh;
line-height:100%;
vertical-align:middle;
padding:0 20px 0 10px;
font-size: 94%;/* 15px */
background: url("../images/arrow_linkBox.png") no-repeat 95% 50%;
}
.linkBoxWide a:link {
color:#000000;
text-decoration: none;
line-height:140%;
}
.linkBoxWide a:visited {
color:#000000;
text-decoration: none;
}
.linkBoxWide a:hover {
color:#999999;
text-decoration: none;
}

/* boxLink */
.boxLink{
display:inline-block;
border:1px solid #cfcfcf;
background:#ffffff url("../images/arrow_linkBox.png") no-repeat 95% 50%;
}
.boxLink a{
font-size: 115%;/* 15px */
display:inline-block;
padding:25px 35px 25px 20px;
font-family: "Noto Sans Regular JP", sans-serif;
transition: .3s;
}
.boxLink a:link {
color:#000000;
text-decoration: none;
line-height:140%;
}
.boxLink a:visited {
color:#000000;
text-decoration: none;
}
.boxLink a:hover {
color:#999999;
text-decoration: none;
}

/* btnList */
.btnList {
width:110px;
height:48px;
background:url("../images/btn_list_on.png") no-repeat 0 0;
}
.btnList img {
transition: .3s;
}
.btnList img:hover {
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "alpha( opacity=0 )";
}

}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
span.english {
font-size: 46px;
opacity:0.1;
filter: alpha(opacity=10);
-ms-filter: "alpha( opacity=10 )";
}



}

/* =keyvisual
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#keyvisual{
position:relative;
width:100%;
height:calc(100vh - 100px);
/*height:90vh;*/
margin:60px 0 20px;
/*margin:0 0 2vh;*/
/*overflow:hidden;*//*ズーム用*/
}
#keyvisual ul#slide{
position:relative;
}
#keyvisual ul#slide li{
position:absolute;
left:0;
top:0;
width:100%;
height:calc(100vh - 100px);
}
#keyvisual ul#slide li.slide01{
background:url("../../images/keyvisual_01.jpg") no-repeat 50% 50%;
background-size: cover;
}
#keyvisual ul#slide li.slide02{
background:url("../../images/keyvisual_02.jpg") no-repeat 50% 50%;
background-size: cover;
}
#keyvisual ul#slide li.slide03{
background:url("../../images/keyvisual_03.jpg") no-repeat 50% 50%;
background-size: cover;
}
#keyvisual ul#slide li.active{/*ズーム用*/
/*z-index:100;*/
/*-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: all 7s linear;*/
}

#keyvisual #keyvisualPoly{
position:absolute;
bottom:20px;
right:20px;
}
#keyvisual #keyvisualScroll{
position:absolute;
bottom:-40px;
right:0;
left:0;
margin:0 auto;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#keyvisual{
position:relative;
/*width:97%;*/
height:98vh;
margin:1vh 1vh;
}
#keyvisual ul#slide{
position:relative;
}
#keyvisual ul#slide li{
position:absolute;
left:0;
top:0;
width:100%;
height:98vh;
}
#keyvisual ul#slide li.slide01{
background:url("../../images/keyvisual_01.jpg") no-repeat 50% 50%;
background-size: cover;
}
#keyvisual ul#slide li.slide02{
background:url("../../images/keyvisual_02.jpg") no-repeat 50% 50%;
background-size: cover;
}
#keyvisual ul#slide li.slide03{
background:url("../../images/keyvisual_03.jpg") no-repeat 50% 50%;
background-size: cover;
}

#keyvisual #keyvisualPoly{
position:absolute;
bottom:15px;
right:15px;
width:140px;
}
#keyvisual #keyvisualScroll{
position:absolute;
bottom:-15px;
right:0;
left:0;
margin:0 auto;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#keyvisual #keyvisualPoly{
width:120px;
}
}

/* =globalNavi
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#globalNavi{
width:100%;
position:absolute;
top:20px;
left:0;
z-index:10;
}
#index #globalNavi{
top:0;
}
#globalNavi .inner {
width:980px;
margin:0 auto;
position:relative;
}

#globalNavi .inner .logo {
position:absolute;
top:20px;
left:0;
width:200px;
}
#index #globalNavi .inner .logo{
background:#ffffff;
}
#globalNavi .inner .logo img {
width:200px;
}
#globalNavi .inner ul.menu {
width:745px;
margin:0 0 0 auto;
}
#globalNavi .inner ul.menu li {
display:inline-block;
vertical-align:middle;
font-size: 94%;/* 15px */
}
#globalNavi ul.menu li.about {
width:160px;
}
#globalNavi ul.menu li.nutrients {
width:145px;
}
#globalNavi ul.menu li.recipe {
width:75px;
}
#globalNavi ul.menu li.sustainability {
width:150px;
}
#globalNavi ul.menu li.information {
width:85px;
}
#globalNavi ul.menu li.qa {
width:130px;
}
#globalNavi .inner ul.menu li a {
display:block;
padding:20px 0;
text-align:center;
font-family: "Noto Sans Regular JP", sans-serif;
transition: .3s;
}
#globalNavi .inner ul.menu li a:link {
color:#000000;
text-decoration: none;
}
#globalNavi .inner ul.menu li a:visited {
color:#000000;
text-decoration: none;
}
#globalNavi .inner ul.menu li a:hover {
color:#6f7755;
text-decoration: none;
}

#index #globalNavi .inner ul.menu li a:link {
color:#ffffff;
}
#index #globalNavi .inner ul.menu li a:visited {
color:#ffffff;
}
#index #globalNavi .inner ul.menu li a:hover {
color:#c5cab5;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#globalNavi{
display:none;
}
}

/* =globalNaviSp
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#globalNaviSp{
display:none;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#globalNaviSp{
}
#globalNaviSp .logo {
width:18vw;
position:absolute;
top:20px;
left:4vw;
z-index:12;
}
#index #globalNaviSp .logo{
background:#ffffff;
}
#globalNaviSp .logo img {
width:18vw;
}

#globalNaviSp .btnOpen{
width:7vw;
position:fixed;
top:0;
right:0;
z-index:11;
}
#globalNaviSp .btnOpen img{
width:7vw;
}

#globalNaviSp #menuSpBg{
display:none;
width:100%;
height:120%;
position:fixed;
top:0;
left:0;
background:#000000;
z-index:99;
}

#globalNaviSp #menuSp{
display:none;
width:100%;
position:absolute;
top:0;
left:0;
z-index:100;
}
#globalNaviSp #menuSp .inner{
width:80vw;
margin:10px auto 0;
padding:0 0 50px;
}
#globalNaviSp #menuSp .btnClose{
width:35px;
margin:0 0 10px auto;
}
#globalNaviSp #menuSp dl {
border-bottom:1px solid #2f2f2f;
padding:0 0 5px;
}
#globalNaviSp #menuSp dl dt{
color:#ffffff;
font-size: 100%;/* 16px */
background: url("../images/arrow_linkBox.png") no-repeat 95% 50%;
}
#globalNaviSp #menuSp dl dt a{
display:block;
padding:10px 25px 10px 0;
}
#globalNaviSp #menuSp dl dd{
color:#ffffff;
font-size: 88%;/* 14px */
padding:5px 25px 5px 0;
margin:0 0 0 20px;
}
#globalNaviSp #menuSp ul {
}
#globalNaviSp #menuSp ul li{
color:#ffffff;
font-size: 100%;/* 16px */
border-bottom:1px solid #2f2f2f;
background: url("../images/arrow_linkBox.png") no-repeat 95% 50%;
}
#globalNaviSp #menuSp ul li a{
display:block;
padding:10px 25px 10px 0;
}
#globalNaviSp #menuSp dl dt a:link,
#globalNaviSp #menuSp dl dd a:link,
#globalNaviSp #menuSp ul li a:link {color:#ffffff;}
#globalNaviSp #menuSp dl dt a:visited,
#globalNaviSp #menuSp dl dd a:visited,
#globalNaviSp #menuSp ul li a:visited {color:#ffffff;}
#globalNaviSp #menuSp dl dt a:hover,
#globalNaviSp #menuSp dl dd a:hover,
#globalNaviSp #menuSp ul li a:hover {color:#ffffff; text-decoration: none;}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#globalNaviSp .logo {
width:24vw;
}
#globalNaviSp .logo img {
width:24vw;
}
#globalNaviSp .btnOpen{
width:10vw;
}
#globalNaviSp .btnOpen img{
width:10vw;
}
}

/* =btnTrade
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#btnTrade {
width:120px;
height:60px;
position:absolute;
top:0;
right:0;
z-index:120;
background:url("../images/btn_trade_on.png") no-repeat 0 0;
}
#btnTrade a img {
transition: .3s;
}
#btnTrade a img:hover {
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "alpha( opacity=0 )";
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#btnTrade {
display:none;
}
}

/* =Navigation
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#Navigation {
width:900px;
margin:0 auto 60px;
padding:100px 0 0;
}
#Navigation ul {
margin:0 0 0 195px;
}
#Navigation ul li {
font-size: 82%;/* 13px */
color:#999999;
display:inline;
}
#Navigation ul li a:link {color:#999999;}
#Navigation ul li a:visited {color:#999999;}
#Navigation ul li a:hover {color:#999999;}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#Navigation {
width:65vw;
margin:0 0 70px 24vw;
padding:30px 0 0;
}
#Navigation ul {
}
#Navigation ul li {
font-size: 82%;/* 13px */
color:#999999;
display:inline;
}
#Navigation ul li a:link {color:#999999;}
#Navigation ul li a:visited {color:#999999;}
#Navigation ul li a:hover {color:#999999;}

}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#Navigation {
width:56vw;
margin:0 0 40px 30vw;
padding:30px 0 0;
}

}

/* =subCont
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#subCont {
width:900px;
margin:0 auto;
background:#66b2e4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px; 
border-radius: 5px;
}
#subCont dl {
padding:20px;
}
#subCont dl:after {
content: "";
display: block;
clear: both;
}
#subCont dl dt {
float:left;
width:250px;
font-size:113%;
text-align:center;
}
#subCont dl dd {
float:right;
width:590px;
}
#subCont dl dd span{
display:inline-block;
margin:5px 20px 5px 0;
color:#a9ddff;
}

#subCont dl dt a:link,
#subCont dl dd a:link {color:#ffffff;}
#subCont dl dt a:visited,
#subCont dl dd a:visited {color:#ffffff;}
#subCont dl dt a:hover,
#subCont dl dd a:hover {color:#ffffff;}

}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#subCont {
/*width:100%;
margin:0 auto;*/
width:94%;
margin:0 auto 30px;
background:#66b2e4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px; 
border-radius: 5px;
}
#subCont dl {
padding:20px;
}
#subCont dl:after {
content: "";
display: block;
clear: both;
}
#subCont dl dt {
float:left;
width:30%;
font-size:113%;
}
#subCont dl dd {
float:right;
width:70%;
}
#subCont dl dd span{
display:inline-block;
margin:5px 20px 5px 0;
color:#a9ddff;
}

#subCont dl dt a:link,
#subCont dl dd a:link {color:#ffffff;}
#subCont dl dt a:visited,
#subCont dl dd a:visited {color:#ffffff;}
#subCont dl dt a:hover,
#subCont dl dd a:hover {color:#ffffff;}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#subCont dl dt {
float:none;
width:100%;
font-size:113%;
}
#subCont dl dd {
float:none;
width:100%;
}
#subCont dl dd span{
display:block;
margin:5px 20px 5px 0;
}
}

/* =readText
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#readText p {
font-size: 88%;/* 14px */
font-family: "Noto Sans Regular JP", sans-serif;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {

}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {

}

/* =pageBack
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#pageBack h3 {
}
#pageBack h3 a:link {
color:#000000;
}
#pageBack h3 a:visited {
color:#000000;
}
#pageBack h3 a:hover {
color:#000000;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#pageBack h3 {
}
#pageBack h3 a:link {
color:#000000;
}
#pageBack h3 a:visited {
color:#000000;
}
#pageBack h3 a:hover {
color:#000000;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {

}

/* =pageTop
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#pageTop {
position:fixed;
bottom:-95px;
right:2%;
}

}
/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#pageTop {
position:fixed;
bottom:-77px;
right:2%;
}
}


/* =index
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#index #indexVideo {
width:940px;
margin:0 auto;
padding:40px 0 100px;
}
#index #indexVideo .titleBox {
width:940px;
margin:0 auto 60px;
}
#index #indexVideo .titleBox h1 {
font-size: 225%;/* 36px */
line-height:140%;
color:#26474d;
text-align:center;
margin:0 0 20px;
}
#index #indexVideo .titleBox img {
width:160px;
margin:0 auto;
}
#index #indexVideo .pv {
width:900px;
margin:0 auto;
}
#index #indexVideo .pv video:focus {
outline: none;
}

#index #indexInformation {
background:url("../images/bg_texture.gif") repeat 0 0;
padding:80px 0;
}
#index #indexInformation .boxStripe {
background:url("../images/bg_stripe.gif") repeat 0 0;
width:900px;
margin:0 auto;
padding:20px 0;
position:relative;
}
#index #indexInformation .boxStripe h3 {
margin-left:20px;
}
#index #indexInformation .boxStripe .btnList {
position:absolute;
top:15px;
right:5px;
}
#index #indexInformation .boxStripe .listBox {
}
#index #indexInformation .boxStripe .listBox dl {
margin:0 20px;
padding:15px 0;
background:#ffffff url("../images/line_dot.gif") repeat-x 0 0;
}
#index #indexInformation .boxStripe .listBox dl:first-child {
background-image:none;
}
#index #indexInformation .boxStripe .listBox dl:after {
content: "";
display: block;
clear: both;
}
#index #indexInformation .boxStripe .listBox dl dt {
float:left;
width:110px;
margin:0 0 0 20px;
color:#93431d;
}
#index #indexInformation .boxStripe .listBox dl dd {
float:right;
width:710px;
margin:0 20px 0 0;
font-size:82%;/* 13px */
line-height:140%;
color:#62a7d5;
}
#index #indexInformation .boxStripe .listBox dl dd b {
display:block;
font-size:124%;/* 16px */
margin:0 0 5px;
}

#index #indexNutrients {
background:#2b5961;
padding:80px 0 0;
}
#index #indexNutrients .inner {
width:940px;
margin:0 auto;
text-align:center;
}
#index #indexNutrients .inner:after {
content: "";
display: block;
clear: both;
}
#index #indexNutrients .inner h1 {
display:inline-block;
font-size: 225%;/* 36px */
line-height:100%;
color:#ffffff;
text-align:center;
border-bottom:1px solid #ffffff;
padding:0 0 10px;
/*text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:15px;*/
margin:0 0 80px;
}
#index #indexNutrients .inner .textBox {
float:left;
width:440px;
}
#index #indexNutrients .inner .photoBox {
float:right;
width:480px;
position:relative;
}
#index #indexNutrients .inner .textBox h2 {
font-size: 188%;/* 30px */
color:#ffffff;
}
#index #indexNutrients .inner .textBox p {
color:#ffffff;
}
#index #indexNutrients .inner .photoBox h3 {
position:absolute;
top:-50px;
right:0;
display:inline-block;
color:#fffc00;
font-size: 112%;/* 18px */
line-height:120%;
text-align:center;
padding:0 15px 0 20px;
background-image: url("/images/comment_left.svg"), url("/images/comment_right.svg");
background-position: left 0 top 0, right 0 top 0;
background-repeat: no-repeat, no-repeat;
font-family: "Noto Sans Medium JP", sans-serif;
}
#index #indexNutrients .inner .photoBox img {
width:500px;
}

#index #indexRecipe {
background: url("../images/bg_texture.gif") repeat 0 0;
padding:80px 0;
}
#index #indexRecipe .inner {
width:900px;
margin:0 auto;
text-align:center;
}
#index #indexRecipe .inner .comment {
display:inline-block;
font-size: 150%;/* 24px */
color:#62a7d5;
text-align: center;
border:1px solid #62a7d5;
background:#ffffff;
padding:20px;
margin:0 0 40px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
position:relative;
font-family: "Noto Sans Regular JP", sans-serif;
}
#index #indexRecipe .inner .comment::after {
content: url(/nutrients/images/comment_bottom.png);
position:absolute;
bottom:-15px;
left:48%;
}
#index #indexRecipe .inner .titleBox {
position:relative;
}
#index #indexRecipe .inner .titleBox .btnList {
position:absolute;
top:-15px;
right:0;
}
#index #indexRecipe .inner ul {
width:860px;
margin:0 auto;
}
#index #indexRecipe .inner ul:after {
content: "";
display: block;
clear: both;
}
#index #indexRecipe .inner ul li {
float:left;
width:205px;
margin:0 5px;
}
#index #indexRecipe .inner ul li:nth-child(4n+1) {
}
#index #indexRecipe .inner ul li img {
width:205px;
}
#index #indexRecipe .inner ul li span {
display:block;
padding:5px 5px;
background:#ffffff;
line-height:120%;
}
#index #indexRecipe .inner .prev-arrow {
width:15px;
position:absolute;
top:0;
bottom:0;
margin:auto 0;
left:-20px;
z-index:10;
cursor: pointer;
}
#index #indexRecipe .inner .next-arrow {
width:15px;
position:absolute;
top:0;
bottom:0;
margin:auto 0;
right:-20px;
z-index:10;
cursor: pointer;
}

#index #indexAbout {
padding:80px 0 360px;
background:#ffffff url("../../images/bg_about.jpg") no-repeat 50% 100%;
background-size: contain;
}
#index #indexAbout .inner {
width:940px;
margin:0 auto;
text-align:center;
}
#index #indexAbout .inner h1 {
display:inline-block;
font-size: 225%;/* 36px */
line-height:100%;
color:#26474d;
text-align:center;
border-bottom:1px solid #26474d;
padding:0 0 10px;
/*text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:15px;*/
margin:0 0 60px;
}
#index #indexAbout .inner h2 {
font-size: 225%;/* 36px */
line-height:140%;
color:#26474d;
margin:0 0 60px;
}
#index #indexAbout .inner h3.english {
font-size: 60px;
line-height:105%;
font-family: "Noto Sans Regular JP", sans-serif;
color:#7c9698;
}
#index #indexAbout .inner .about1,
#index #indexAbout .inner .about2 {
margin:0 0 60px;
}
#index #indexAbout .inner .about3 {
margin:0 0 0;
}
#index #indexAbout .inner .about1:after,
#index #indexAbout .inner .about2:after,
#index #indexAbout .inner .about3:after {
content: "";
display: block;
clear: both;
}
#index #indexAbout .inner .about1 .text,
#index #indexAbout .inner .about3 .text {
float:left;
width:300px;
}
#index #indexAbout .inner .about2 .text {
float:right;
width:300px;
}
#index #indexAbout .inner .about1 .text p,
#index #indexAbout .inner .about2 .text p,
#index #indexAbout .inner .about3 .text p {
color:#26474d;
}
#index #indexAbout .inner .about1 .photo,
#index #indexAbout .inner .about3 .photo {
float:right;
width:560px;
}
#index #indexAbout .inner .about2 .photo {
float:left;
width:560px;
}
#index #indexAbout .inner .about1 .photo img,
#index #indexAbout .inner .about2 .photo img,
#index #indexAbout .inner .about3 .photo img {
width:560px;
}

#index #indexAbout .inner .about1 .photo {
position:relative;
}
#index #indexAbout .inner .about1 .photo .absolute1 {
width:200px;
position:absolute;
top:-90px;
right:30px;
}
#index #indexAbout .inner .about1 .photo .absolute2 {
width:200px;
position:absolute;
bottom:-90px;
left:30px;
}

#index #indexSustainability {
padding:80px 0 120px;
}
#index #indexSustainability .inner {
width:940px;
margin:0 auto;
text-align:center;
}
#index #indexSustainability .inner h1 {
display:inline-block;
font-size: 225%;/* 36px */
line-height:100%;
color:#26474d;
text-align:center;
border-bottom:1px solid #26474d;
padding:0 0 10px;
/*text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:15px;*/
margin:0 0 60px;
}
#index #indexSustainability .inner h2 {
font-size: 225%;/* 36px */
line-height:140%;
color:#26474d;
}
#index #indexSustainability .inner .sustainability1 {
}
#index #indexSustainability .inner .sustainability1:after {
content: "";
display: block;
clear: both;
}
#index #indexSustainability .inner .sustainability1 .text {
float:left;
width:360px;
}
#index #indexSustainability .inner .sustainability1 .photo {
float:right;
width:510px;
}
#index #indexSustainability .inner .sustainability1 .photo img {
width:510px;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#index #indexVideo {
width:92vw;
margin:0 auto;
padding:60px 0;
}
#index #indexVideo .titleBox {
margin:0 0 30px;
}
#index #indexVideo .titleBox h1 {
font-size: 188%;/* 30px */
line-height:140%;
color:#26474d;
text-align:center;
margin:0 0 20px;
}
#index #indexVideo .titleBox img {
width:25vw;
margin:0 auto;
}
#index #indexVideo .pv {
}
#index #indexVideo .pv video:focus {
outline: none;
}

#index #indexInformation {
background:url("../images/bg_texture.gif") repeat 0 0;
padding:80px 0;
}
#index #indexInformation .boxStripe {
background:url("../images/bg_stripe.gif") repeat 0 0;
width:92vw;
margin:0 auto;
padding:4vw 0;
position:relative;
}
#index #indexInformation .boxStripe h3 {
margin-left:4vw;
}
#index #indexInformation .boxStripe .btnList {
position:absolute;
top:15px;
right:4vw;
}
#index #indexInformation .boxStripe .listBox {
}
#index #indexInformation .boxStripe .listBox dl {
width:84vw;
margin:0 auto;
padding:2vw 0;
background:#ffffff url("../images/line_dot.gif") repeat-x 0 0;
}
#index #indexInformation .boxStripe .listBox dl:first-child {
background-image:none;
}
#index #indexInformation .boxStripe .listBox dl:after {
content: "";
display: block;
clear: both;
}
#index #indexInformation .boxStripe .listBox dl dt {
float:left;
width:18vw;
margin:0 2vw;
color:#93431d;
}
#index #indexInformation .boxStripe .listBox dl dd {
float:right;
width:60vw;
margin:0 2vw 0 0;
font-size:82%;/* 13px */
line-height:140%;
color:#62a7d5;
}
#index #indexInformation .boxStripe .listBox dl dd b {
display:block;
font-size:124%;/* 16px */
margin:0 0 5px;
}

#index #indexNutrients {
background:#2b5961;
padding:80px 0 0;
}
#index #indexNutrients .inner {
text-align:center;
}
#index #indexNutrients .inner h1 {
display:inline-block;
font-size: 188%;/* 30px */
line-height:100%;
color:#ffffff;
text-align:center;
border-bottom:1px solid #ffffff;
padding:0 0 10px;
/*text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:15px;*/
margin:0 0 60px;
}
#index #indexNutrients .inner .textBox {
width:92vw;
margin:0 auto 20px;
text-align:center;
}
#index #indexNutrients .inner .photoBox {
width:92vw;
margin:0 auto;
text-align:center;
}
#index #indexNutrients .inner .textBox h2 {
color:#ffffff;
text-align:center;
}
#index #indexNutrients .inner .textBox p {
color:#ffffff;
}
#index #indexNutrients .inner .photoBox h3 {
display:inline-block;
color:#fffc00;
font-size: 112%;/* 18px */
line-height:120%;
text-align:center;
padding:0 15px 0 20px;
background-image: url("/images/comment_left.svg"), url("/images/comment_right.svg");
background-position: left 0 top 0, right 0 top 0;
background-repeat: no-repeat, no-repeat;
font-family: "Noto Sans Medium JP", sans-serif;
}
#index #indexNutrients .inner .photoBox img {
width:80vw;
margin:0 auto;
}

#index #indexRecipe {
background: url("../images/bg_texture.gif") repeat 0 0;
padding:80px 0;
}
#index #indexRecipe .inner {
width:92vw;
margin:0 auto;
position:relative;
text-align:center;
}
#index #indexRecipe .inner .comment {
display:inline-block;
font-size: 113%;/* 18px */
color:#62a7d5;
text-align: center;
border:1px solid #62a7d5;
background:#ffffff;
padding:20px;
margin:0 0 40px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
position:relative;
font-family: "Noto Sans Regular JP", sans-serif;
}
#index #indexRecipe .inner .comment::after {
content: url(/nutrients/images/comment_bottom.png);
position:absolute;
bottom:-15px;
left:48%;
}
#index #indexRecipe .inner .titleBox {
position:relative;
}
#index #indexRecipe .inner .titleBox .btnList {
position:absolute;
top:-15px;
right:0;
}
#index #indexRecipe .inner ul {
width:88vw;
margin:0 auto;
}
#index #indexRecipe .inner ul:after {
content: "";
display: block;
clear: both;
}
#index #indexRecipe .inner ul li {
float:left;
width:20vw;
margin:0 1vw;
}
#index #indexRecipe .inner ul li:nth-child(4n+1) {
}
#index #indexRecipe .inner ul li img {
width:20vw;
}
#index #indexRecipe .inner ul li span {
display:block;
padding:5px 5px;
background:#ffffff;
line-height:120%;
}
#index #indexRecipe .inner .prev-arrow {
width:2vw;
position:absolute;
top:0;
bottom:0;
margin:auto 0;
left:-3vw;
z-index:10;
cursor: pointer;
}
#index #indexRecipe .inner .next-arrow {
width:2vw;
position:absolute;
top:0;
bottom:0;
margin:auto 0;
right:-3vw;
z-index:10;
cursor: pointer;
}

#index #indexAbout {
padding:80px 0 280px;
background:#ffffff url("../../images/bg_about.jpg") no-repeat 50% 100%;
background-size: contain;
}
#index #indexAbout .inner {
width:92vw;
margin:0 auto;
text-align:center;
}
#index #indexAbout .inner h1 {
display:inline-block;
font-size: 188%;/* 30px */
line-height:100%;
color:#26474d;
text-align:center;
border-bottom:1px solid #26474d;
padding:0 0 10px;
/*text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:15px;*/
margin:0 0 60px;
}
#index #indexAbout .inner h2 {
font-size: 188%;/* 30px */
line-height:140%;
color:#26474d;
margin:0 0 60px;
text-align:center;
}
#index #indexAbout .inner h3.english {
font-size: 52px;
line-height:105%;
font-family: "Noto Sans Regular JP", sans-serif;
color:#7c9698;
margin:0 0 30px;
}
#index #indexAbout .inner .about1,
#index #indexAbout .inner .about2 {
margin:0 0 60px;
}
#index #indexAbout .inner .about3 {
margin:0 0 0;
}
#index #indexAbout .inner .about1:after,
#index #indexAbout .inner .about2:after,
#index #indexAbout .inner .about3:after {
content: "";
display: block;
clear: both;
}
#index #indexAbout .inner .about1 .text,
#index #indexAbout .inner .about3 .text {
float:left;
width:48vw;
}
#index #indexAbout .inner .about2 .text {
float:right;
width:48vw;
}
#index #indexAbout .inner .about1 .text p,
#index #indexAbout .inner .about2 .text p,
#index #indexAbout .inner .about3 .text p {
color:#26474d;
margin:0 0 20px;
}
#index #indexAbout .inner .about1 .photo,
#index #indexAbout .inner .about3 .photo {
float:right;
width:40vw;
}
#index #indexAbout .inner .about2 .photo {
float:left;
width:40vw;
}
#index #indexAbout .inner .about1 .photo img,
#index #indexAbout .inner .about2 .photo img,
#index #indexAbout .inner .about3 .photo img {
width:40vw;
}

#index #indexAbout .inner .about1 .photo {
position:relative;
margin:80px 0 0;
}
#index #indexAbout .inner .about1 .photo .absolute1 {
width:16vw;
position:absolute;
top:-8vw;
right:20px;
}
#index #indexAbout .inner .about1 .photo .absolute2 {
width:16vw;
position:absolute;
bottom:-8vw;
left:20px;
}

#index #indexSustainability {
padding:80px 0 120px;
}
#index #indexSustainability .inner {
width:92vw;
margin:0 auto;
text-align:center;
}
#index #indexSustainability .inner h1 {
display:inline-block;
font-size: 188%;/* 30px */
line-height:100%;
color:#26474d;
text-align:center;
border-bottom:1px solid #26474d;
padding:0 0 10px;
/*text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:15px;*/
margin:0 0 60px;
}
#index #indexSustainability .inner h2 {
font-size: 188%;/* 30px */
line-height:140%;
color:#26474d;
}
#index #indexSustainability .inner .sustainability1 {
}
#index #indexSustainability .inner .sustainability1:after {
content: "";
display: block;
clear: both;
}
#index #indexSustainability .inner .sustainability1 .text {
float:left;
width:44vw;
}
#index #indexSustainability .inner .sustainability1 .photo {
float:right;
width:44vw;
}
#index #indexSustainability .inner .sustainability1 .photo img {
width:44vw;
}


}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#index #indexVideo {
width:90vw;
}
#index #indexVideo .titleBox h1 {
font-size: 150%;/* 24px */
}
#index #indexVideo .titleBox img {
width:40vw;
}

#index #indexInformation {
padding:60px 0;
}
#index #indexInformation .boxStripe {
width:90vw;
}
#index #indexInformation .boxStripe .listBox dl {
width:82vw;
padding:2vw 0;/*重複*/
}
#index #indexInformation .boxStripe .listBox dl dt {
float:none;
width:74vw;
margin:0 auto 1vw;
}
#index #indexInformation .boxStripe .listBox dl dd {
float:none;
width:74vw;
margin:0 auto;
}

#index #indexNutrients {
padding:60px 0 0;
}
#index #indexNutrients .inner h1 {
font-size: 150%;/* 24px */
}
#index #indexNutrients .inner .textBox {
width:90vw;
}
#index #indexNutrients .inner .photoBox {
width:90vw;
}
#index #indexNutrients .inner .textBox h2 {
font-size: 137%;/* 22px */
}

#index #indexNutrients .inner .photoBox img {
width:90vw;
}

#index #indexRecipe {
padding:60px 0;
}
#index #indexRecipe .inner {
width:90vw;
}
#index #indexRecipe .inner .comment {
margin:0 0 60px;
}
#index #indexRecipe .inner .titleBox .btnList {
top:-45px;
}
#index #indexRecipe .inner h3 {
text-align:center;
}
#index #indexRecipe .inner ul {
width:86vw;
}
#index #indexRecipe .inner ul li {
width:39vw;
margin:0 2vw;
}
#index #indexRecipe .inner ul li img {
width:39vw;
}

#index #indexAbout {
padding:60px 0 240px;
}
#index #indexAbout .inner h1 {
font-size: 150%;/* 24px */
}
#index #indexAbout .inner h2 {
font-size: 137%;/* 22px */
}
#index #indexAbout .inner h3.english {
font-size: 46px;
text-align:center;
}
#index #indexAbout .inner .about1 .text,
#index #indexAbout .inner .about3 .text {
float:none;
width:90vw;
text-align:center;
}
#index #indexAbout .inner .about2 .text {
float:none;
width:90vw;
text-align:center;
}
#index #indexAbout .inner .about2 .text {
margin:0 0 20px;
}
#index #indexAbout .inner .about3 .text {
margin:0 0 20px;
}
#index #indexAbout .inner .about1 {
margin:0 0 120px;
}
#index #indexAbout .inner .about1 .photo,
#index #indexAbout .inner .about3 .photo {
float:none;
width:90vw;
}
#index #indexAbout .inner .about2 .photo {
float:none;
width:90vw;
}
#index #indexAbout .inner .about1 .photo img,
#index #indexAbout .inner .about2 .photo img,
#index #indexAbout .inner .about3 .photo img {
width:90vw;
}
#index #indexAbout .inner .about1 .photo {
margin:60px 0 0;
}
#index #indexAbout .inner .about1 .photo .absolute1 {
width:25vw;
position:absolute;
top:-12vw;
right:20px;
}
#index #indexAbout .inner .about1 .photo .absolute2 {
width:25vw;
position:absolute;
bottom:-12vw;
left:20px;
}

#index #indexSustainability {
padding:60px 0 100px;
}
#index #indexSustainability .inner h1 {
font-size: 150%;/* 24px */
}
#index #indexSustainability .inner h2 {
font-size: 137%;/* 22px */
text-align:center;
}
#index #indexSustainability .inner .sustainability1 .text {
float:none;
width:90vw;
text-align:center;
margin:0 0 20px;
}
#index #indexSustainability .inner .sustainability1 .photo {
float:none;
width:90vw;
}
#index #indexSustainability .inner .sustainability1 .photo img {
width:90vw;
}

}

/* =about
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#about h1 .english {
position:absolute;
top:-30px;
left:400px;
}
#about #mainCont {
background:#f6f3ec url("/about/images/bg_about.png") no-repeat 50% 100%;
/*background-size: contain;*/
background-size: cover;
}
#about #box1 {
padding:60px 0;
}
#about #box1 .linkBox {
float:left;
margin:0 5px;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#about h1 .english {
position:absolute;
top:-25px;
left:260px;
}
#about #mainCont {
background:#f6f3ec url("/about/images/bg_about.png") no-repeat 50% 100%;
background-size: contain;
}
#about #box1 {
padding:30px 0 80px;
}
#about #box1 .linkBox {
float:left;
width:29%;
margin:0 2%;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#about h1 .english {
position:absolute;
top:-28px;
left:120px;
}
#about #box1 .linkBox {
float:none;
width:70%;
margin:0 auto 20px;
}
}

/* =history
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#history h1 .english {
position:absolute;
top:40px;
left:90px;
}
#history #box1 {
background:url("../../about/images/bg_box1.png") no-repeat 100% 0;
background-size: contain;
}
#history #box1 .inner {
width:900px;
margin:0 auto;
padding:60px 0;
}
#history #box1 .inner .left1 {
float:left;
width:560px;
}
#history #box1 .inner .left2 {
float:left;
width:560px;
}
#history #box1 .inner .right2 {
float:right;
width:320px;
}

#history #box2 {
background:url("../../about/images/bg_box2.jpg") no-repeat 50% 50%;
background-size: cover;
}
#history #box2 .inner {
width:900px;
margin:0 auto;
padding:60px 0;
}
#history #box2 .inner .left {
float:left;
width:390px;
}

#history #box3 {
background:url("../../about/images/bg_box3.png") no-repeat 50% 100%;
background-size: contain;
padding:0 0 280px;
}
#history #box3 .inner {
width:900px;
margin:0 auto;
padding:60px 0;
}
#history #box3 .inner .left {
float:left;
width:390px;
margin:60px 0 0;
}
#history #box3 .inner .right {
float:right;
width:490px;
padding:30px 0 0;
margin:60px 0 0;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#history h1 .english {
position:absolute;
top:35px;
left:90px;
}
#history #box1 {
background:url("../../about/images/bg_box1.png") no-repeat 100% 20%;
background-size: contain;
padding:0 3%;
}
#history #box1 #title {
width:100%;
margin:0;
}
#history #box1 .inner {
width:100%;
padding:60px 0;
}
#history #box1 .inner .left1 {
float:left;
width:50%;
}
#history #box1 .inner .left2 {
float:left;
width:50%;
}
#history #box1 .inner .right2 {
float:right;
width:47%;
}

#history #box2 {
background:url("../../about/images/bg_box2_sp.jpg") no-repeat 50% 50%;
background-size: cover;
}
#history #box2 .inner {
width:100%;
padding:60px 0;
}
#history #box2 .inner .left {
margin:0 15%;
}

#history #box3 {
background:url("../../about/images/bg_box3.png") no-repeat 50% 100%;
background-size: contain;
padding:0 3% 280px;
}
#history #box3 .inner {
width:100%;
padding:60px 0;
}
#history #box3 .inner .floatLeft {
width:33%;
}

#history #box3 .inner .left {
float:left;
width:50%;
margin:60px 0 0;
}
#history #box3 .inner .right {
float:right;
width:48%;
padding:30px 0 0;
margin:60px 0 0;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#history #box1 {
background:url("../../about/images/bg_box1_sp.png") no-repeat 100% 10%;
background-size: contain;
padding:0 0 0;
}
#history #box1 #title {
width:90%;
margin:0 auto;
}
#history #box1 .inner {
width:100%;
padding:300px 0 60px;
}
#history #box1 .inner .left1 {
float:none;
width:90%;
margin:0 auto;
}
#history #box1 .inner .left2 {
float:none;
width:90%;
margin:0 auto;
}
#history #box1 .inner .right2 {
float:none;
width:90%;
margin:0 auto;
}

#history #box2 .inner {
width:100%;
padding:60px 0;
}
#history #box2 .inner .left {
margin:0 5%;
}

#history #box3 {
padding:0 3% 150px;
}
#history #box3 .inner {
width:100%;
padding:60px 0 0;
}
#history #box3 .inner .floatLeft {
width:100%;
float:none;
margin:0 0 5px;
}
#history #box3 .inner .left {
float:none;
width:100%;
margin:0 0 0;
}
#history #box3 .inner .left img {
margin:0 auto;
}
#history #box3 .inner .right {
float:none;
width:100%;
padding:0 0 0;
margin:60px 0 0;
}


}

/* =industry
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#industry h1 .english {
position:absolute;
top:-35px;
left:300px;
}
#industry .box1 {
margin:0 0 60px;
}
#industry .box1 .left {
float:left;
width:530px;
}
#industry .box1 .left img {
width:530px;
}
#industry .box1 .right {
float:right;
width:340px;
}
#industry .box2 {
width:900px;
margin:0 auto 60px;
}
#industry .box2 .left {
float:left;
width:530px;
}
#industry .box2 .right {
float:right;
width:340px;
}
#industry .box2 .right img {
width:340px;
}
#industry #backgroundBox {
background:url("/about/images/bg_industry.png") no-repeat 50% 100%;
background-size: cover;
padding:0 0 300px;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#industry h1 .english {
position:absolute;
top:-25px;
left:260px;
}
#industry .box1 .left img {
margin:0 auto 30px;
}
#industry .box2 {
width:94%;
margin:0 auto 30px;
}
#industry .box2 .right img {
margin:0 auto 30px;
}
#industry #backgroundBox {
background:url("/about/images/bg_industry_sp.png") no-repeat 50% 100%;
background-size: contain;
padding:0 0 300px;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#industry h1 .english {
position:absolute;
top:-28px;
left:120px;
}
}

/* =how
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#how h1 .english {
position:absolute;
top:-45px;
left:120px;
}
#how .box1 {
margin:0 0 40px;
}
#how .box1 .left {
float:left;
width:460px;
}
#how .box1 .right {
float:right;
width:380px;
}
#how .box1 .right img {
width:380px;
}
#how .flow1 {
background:#edf2c5;
position:relative;
}
#how .flow2 {
background:#d7e7af;
position:relative;
}
#how .flow3 {
background:#c0dd98;
position:relative;
}
#how .flow4 {
background:#a8d182;
margin:0 0 60px;
}
#how .flow1 .text,
#how .flow2 .text,
#how .flow3 .text,
#how .flow4 .text {
float:left;
width:480px;
margin:20px 0 0 20px;
}
#how .flow1 .text h2,
#how .flow2 .text h2,
#how .flow3 .text h2,
#how .flow4 .text h2 {
color:#00693e;
}
#how .flow1 .photo,
#how .flow2 .photo,
#how .flow3 .photo,
#how .flow4 .photo {
float:right;
width:360px;
margin:20px;
}
#how .flow1 .arrow,
#how .flow2 .arrow,
#how .flow3 .arrow {
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:-20px;
z-index:10;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#how h1 .english {
position:absolute;
top:-40px;
left:150px;
}
#how .box1 {
margin:0 0 40px;
}
#how .box1 .left {
float:left;
width:55%;
}
#how .box1 .right {
float:right;
width:40%;
}
#how .box1 .right img {
width:100%;
}
#how .flow1 {
background:#edf2c5;
position:relative;
}
#how .flow2 {
background:#d7e7af;
position:relative;
}
#how .flow3 {
background:#c0dd98;
position:relative;
}
#how .flow4 {
background:#a8d182;
margin:0 0 60px;
}
#how .flow1 .text,
#how .flow2 .text,
#how .flow3 .text,
#how .flow4 .text {
float:left;
width:57%;
margin:0 0 0 3%;
}
#how .flow1 .text h2,
#how .flow2 .text h2,
#how .flow3 .text h2,
#how .flow4 .text h2 {
color:#00693e;
padding:20px 0 10px;
margin:0;
}
#how .flow1 .text p,
#how .flow2 .text p,
#how .flow3 .text p,
#how .flow4 .text p {
line-height:130%;
}
#how .flow1 .photo,
#how .flow2 .photo,
#how .flow3 .photo,
#how .flow4 .photo {
float:right;
width:32%;
margin:20px 3%;
}
#how .flow1 .arrow,
#how .flow2 .arrow,
#how .flow3 .arrow {
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:-30px;
z-index:10;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#how h1 .english {
position:absolute;
top:-30px;
left:80px;
}
#how .box1 .left {
float:none;
width:100%;
}
#how .box1 .right {
float:none;
width:100%;
}
#how .box1 .right img {
margin:0 auto;
}
#how .flow1 .text,
#how .flow2 .text,
#how .flow3 .text,
#how .flow4 .text {
float:none;
width:auto;
padding:0 20px;
margin:0;
}
#how .flow1 .photo,
#how .flow2 .photo,
#how .flow3 .photo,
#how .flow4 .photo {
float:none;
width:100%;
margin:0;
}
}

/* =nutrients
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#nutrients h1 .english {
position:absolute;
top:-35px;
left:260px;
}
#nutrients #popupBox {
width:900px;
margin:0 auto;
padding:40px 0 0px;
}
#nutrients #popupBox h2 {
font-size: 225%;/* 36px */
line-height:140%;
color:#26474d;
margin:0 0 30px;
text-align:center;
}
#nutrients #popupBox .lead {
text-align:center;
margin:0 0 30px;
}
#nutrients #popupBox .commentBox {
width:690px;
margin:0 auto;
}
#nutrients #popupBox .commentBox .left {
float:left;
width:320px;
background:#ffee60;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
position:relative;
}
#nutrients #popupBox .commentBox .left::after {
content: url(/nutrients/images/comment_left.png);
position:absolute;
bottom:-27px;
left:48%;
}
#nutrients #popupBox .commentBox .right {
float:right;
width:320px;
background:#ffee60;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
position:relative;
}
#nutrients #popupBox .commentBox .right::after {
content: url(/nutrients/images/comment_right.png);
position:absolute;
bottom:-27px;
left:48%;
}
#nutrients #popupBox .commentBox .left h3,
#nutrients #popupBox .commentBox .right h3 {
font-size: 137%;/* 22px */
margin:20px 20px 10px;
padding:0 0 10px;
text-align:center;
border-bottom:1px solid #000000;
font-family: "Noto Sans Medium JP", sans-serif;
}
#nutrients #popupBox .commentBox .left p,
#nutrients #popupBox .commentBox .right p {
margin:0 20px 20px;
line-height:180%;
}
#nutrients #popupBox .commentBox .photoOlive {
clear: both;
margin:0;
position:relative;
}
#nutrients #popupBox .commentBox .photoOlive img {
width:500px;
margin:0 auto;
position:relative;
top:-35px;
}

#nutrients #otherNutrients {
width:900px;
margin:0 auto;
padding:0 0 60px;
text-align:center;
}
#nutrients #otherNutrients h2 {
display:inline-block;
font-size: 225%;/* 36px */
line-height:100%;
color:#26474d;
text-align:center;
border-bottom:1px solid #26474d;
padding:0 0 10px;
/*text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:15px;*/
margin:0 0 30px;
}
#nutrients #otherNutrients .boxStripe {
background:url("../images/bg_stripe2.gif") repeat 0 0;
padding:20px;
}
#nutrients #otherNutrients .boxStripe dl {
display: table;
margin:0 0 20px;
}
#nutrients #otherNutrients .boxStripe dl:last-child {
margin:0 0 0;
}
#nutrients #otherNutrients .boxStripe dl dt {
width: 25%;
display: table-cell;
vertical-align: middle;
text-align: center;
background: #26474d;
font-size: 125%;/* 20px */
color:#ffffff;
border-radius: 15px 0 0 15px;
-moz-border-radius: 15px 0 0 15px;
-webkit-border-radius: 15px 0 0 15px;
font-family: "Noto Sans Medium JP", sans-serif;
}
#nutrients #otherNutrients .boxStripe dl dd {
width:auto;
display: table-cell;
vertical-align: middle;
padding:20px;
background: #ffffff;
font-size: 87%;/* 14px */
line-height:150%;
border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
}

#nutrients #nutrientsRecipe {
background: url("../images/bg_texture.gif") repeat 0 0;
padding:80px 0;
}
#nutrients #nutrientsRecipe .inner {
width:900px;
margin:0 auto;
text-align: center;
position:relative;
}
#nutrients #nutrientsRecipe .inner .comment {
display:inline-block;
font-size: 150%;/* 24px */
color:#62a7d5;
text-align: center;
border:1px solid #62a7d5;
background:#ffffff;
padding:20px;
margin:0 0 40px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
position:relative;
font-family: "Noto Sans Regular JP", sans-serif;
}
#nutrients #nutrientsRecipe .inner .comment::after {
content: url(/nutrients/images/comment_bottom.png);
position:absolute;
bottom:-15px;
left:48%;
}
#nutrients #nutrientsRecipe .inner .titleBox {
position:relative;
}
#nutrients #nutrientsRecipe .inner .titleBox .btnList {
position:absolute;
top:-15px;
right:0;
}
#nutrients #nutrientsRecipe .inner ul {
width:860px;
margin:0 auto;
}
#nutrients #nutrientsRecipe .inner ul:after {
content: "";
display: block;
clear: both;
}
#nutrients #nutrientsRecipe .inner ul li {
float:left;
width:205px;
margin:0 5px;
}
#nutrients #nutrientsRecipe .inner ul li:nth-child(4n+1) {
}
#nutrients #nutrientsRecipe .inner ul li img {
width:205px;
}
#nutrients #nutrientsRecipe .inner ul li span {
display:block;
padding:5px 5px;
background:#ffffff;
line-height:120%;
}
#nutrients #nutrientsRecipe .inner .prev-arrow {
width:15px;
position:absolute;
top:0;
bottom:0;
margin:auto 0;
left:-20px;
z-index:10;
cursor: pointer;
}
#nutrients #nutrientsRecipe .inner .next-arrow {
width:15px;
position:absolute;
top:0;
bottom:0;
margin:auto 0;
right:-20px;
z-index:10;
cursor: pointer;
}


}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#nutrients h1 .english {
position:absolute;
top:-30px;
left:200px;
}
#nutrients #popupBox {
width:92vw;
margin:0 auto;
padding:40px 0 40px;
}
#nutrients #popupBox h2 {
font-size: 188%;/* 30px */
line-height:140%;
color:#26474d;
margin:0 0 30px;
text-align:center;
}
#nutrients #popupBox .lead {
margin:0 0 30px;
}
#nutrients #popupBox .commentBox {
width:84vw;
margin:0 auto;
}
#nutrients #popupBox .commentBox .left {
float:left;
width:40vw;
background:#ffee60;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
position:relative;
}
#nutrients #popupBox .commentBox .left::after {
content: url(/nutrients/images/comment_left.png);
position:absolute;
bottom:-27px;
left:48%;
}
#nutrients #popupBox .commentBox .right {
float:right;
width:40vw;
background:#ffee60;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
position:relative;
}
#nutrients #popupBox .commentBox .right::after {
content: url(/nutrients/images/comment_right.png);
position:absolute;
bottom:-27px;
left:48%;
}
#nutrients #popupBox .commentBox .left h3,
#nutrients #popupBox .commentBox .right h3 {
font-size: 137%;/* 22px */
margin:20px 20px 10px;
padding:0 0 10px;
text-align:center;
border-bottom:1px solid #000000;
font-family: "Noto Sans Medium JP", sans-serif;
}
#nutrients #popupBox .commentBox .left p,
#nutrients #popupBox .commentBox .right p {
margin:0 20px 20px;
line-height:180%;
}
#nutrients #popupBox .commentBox .photoOlive {
clear: both;
margin:0;
}
#nutrients #popupBox .commentBox .photoOlive img {
width:84vw;
margin:0 auto;
}

#nutrients #otherNutrients {
width:92vw;
margin:0 auto;
padding:0 0 60px;
text-align:center;
}
#nutrients #otherNutrients h2 {
display:inline-block;
font-size: 188%;/* 30px */
line-height:100%;
color:#26474d;
text-align:center;
border-bottom:1px solid #26474d;
padding:0 0 10px;
/*text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:15px;*/
margin:0 0 30px;
}
#nutrients #otherNutrients .boxStripe {
background:url("../images/bg_stripe2.gif") repeat 0 0;
padding:4vw;
}
#nutrients #otherNutrients .boxStripe dl {
display: table;
margin:0 0 4vw;
}
#nutrients #otherNutrients .boxStripe dl:last-child {
margin:0 0 0;
}
#nutrients #otherNutrients .boxStripe dl dt {
width: 25%;
display: table-cell;
vertical-align: middle;
text-align: center;
background: #26474d;
font-size: 125%;/* 20px */
color:#ffffff;
border-radius: 15px 0 0 15px;
-moz-border-radius: 15px 0 0 15px;
-webkit-border-radius: 15px 0 0 15px;
font-family: "Noto Sans Medium JP", sans-serif;
}
#nutrients #otherNutrients .boxStripe dl dd {
width:auto;
display: table-cell;
vertical-align: middle;
padding:20px;
background: #ffffff;
font-size: 87%;/* 14px */
line-height:150%;
border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
}

#nutrients #nutrientsRecipe {
background: url("../images/bg_texture.gif") repeat 0 0;
padding:80px 0;
}
#nutrients #nutrientsRecipe .inner {
width:92vw;
margin:0 auto;
position:relative;
}
#nutrients #nutrientsRecipe .inner .comment {
display:inline-block;
font-size: 113%;/* 18px */
color:#62a7d5;
text-align: center;
border:1px solid #62a7d5;
background:#ffffff;
padding:20px;
margin:0 0 40px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
position:relative;
font-family: "Noto Sans Regular JP", sans-serif;
}
#nutrients #nutrientsRecipe .inner .comment::after {
content: url(/nutrients/images/comment_bottom.png);
position:absolute;
bottom:-15px;
left:48%;
}
#nutrients #nutrientsRecipe .inner .titleBox {
position:relative;
}
#nutrients #nutrientsRecipe .inner .titleBox .btnList {
position:absolute;
top:-15px;
right:0;
}
#nutrients #nutrientsRecipe .inner ul {
width:88vw;
margin:0 auto;
}
#nutrients #nutrientsRecipe .inner ul:after {
content: "";
display: block;
clear: both;
}
#nutrients #nutrientsRecipe .inner ul li {
float:left;
width:20vw;
margin:0 1vw;
}
#nutrients #nutrientsRecipe .inner ul li img {
width:20vw;
}
#nutrients #nutrientsRecipe .inner ul li span {
display:block;
padding:5px 5px;
background:#ffffff;
line-height:120%;
}
#nutrients #nutrientsRecipe .inner .prev-arrow {
width:2vw;
position:absolute;
top:0;
bottom:0;
margin:auto 0;
left:-3vw;
z-index:10;
cursor: pointer;
}
#nutrients #nutrientsRecipe .inner .next-arrow {
width:2vw;
position:absolute;
top:0;
bottom:0;
margin:auto 0;
right:-3vw;
z-index:10;
cursor: pointer;
}



}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#nutrients h1 .english {
position:absolute;
top:-25px;
left:10vw;
}
#nutrients #popupBox {
width:90vw;
padding:30px 0 40px;
}
#nutrients #popupBox h2 {
font-size: 137%;/* 22px */
}
#nutrients #popupBox .commentBox {
width:90vw;
}
#nutrients #popupBox .commentBox .left {
float:none;
width:90vw;
margin:0 0 30px;
padding:;
}
#nutrients #popupBox .commentBox .right {
float:none;
width:90vw;
margin:0 0 30px;
}
#nutrients #popupBox .commentBox .left h3,
#nutrients #popupBox .commentBox .right h3 {
font-size: 125%;/* 20px */
margin:0 20px 10px;
padding:20px 0 10px;
}
#nutrients #popupBox .commentBox .left p,
#nutrients #popupBox .commentBox .right p {
margin:0 20px 0;
padding:0 0 20px;
line-height:180%;
}
#nutrients #popupBox .commentBox .photoOlive img {
width:90vw;
}

#nutrients #otherNutrients {
width:90vw;
}
#nutrients #otherNutrients h2 {
font-size: 150%;/* 24px */
}
#nutrients #otherNutrients .boxStripe dl {
display: block;
}
#nutrients #otherNutrients .boxStripe dl dt {
width: auto;
display: block;
font-size: 100%;/* 16px */
padding:10px;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
}
#nutrients #otherNutrients .boxStripe dl dd {
width: auto;
display: block;
font-size: 82%;/* 13px */
padding:20px;
border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
-webkit-border-radius: 0 0 15px 15px;
}

#nutrients #nutrientsRecipe {
padding:60px 0;
}
#nutrients #nutrientsRecipe .inner {
width:90vw;
}
#nutrients #nutrientsRecipe .inner .comment {
margin:0 0 60px;
}
#nutrients #nutrientsRecipe .inner .titleBox .btnList {
top:-45px;
}
#nutrients #nutrientsRecipe .inner h3 {
text-align:center;
}
#nutrients #nutrientsRecipe .inner ul {
width:86vw;
}
#nutrients #nutrientsRecipe .inner ul li {
width:39vw;
margin:0 2vw;
}
#nutrients #nutrientsRecipe .inner ul li img {
width:39vw;
}
}

/* =sustainability
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#sustainability h1 .english {
position:absolute;
top:-35px;
left:300px;
}
#sustainability #leadBox {
width:900px;
margin:0 auto;
padding:40px 0 0;
}
#sustainability #leadBox h2 {
font-size: 225%;/* 36px */
line-height:140%;
color:#26474d;
margin:0 0 30px;
text-align:center;
}
#sustainability #leadBox .boxStripe {
background:url("../images/bg_stripe2.gif") repeat 0 0;
padding:20px;
}
#sustainability #leadBox .boxStripe dl {
}
#sustainability #leadBox .boxStripe dl dt {
text-align: center;
background: #26474d;
font-size: 150%;/* 24px */
line-height:140%;
color:#ffffff;
padding:20px;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
font-family: "Noto Sans Regular JP", sans-serif;
}
#sustainability #leadBox .boxStripe dl dd {
padding:20px 30px;
background: #ffffff;
font-size: 82%;/* 13px */
line-height:180%;
border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
-webkit-border-radius: 0 0 15px 15px;
}
#sustainability #leadBox .boxStripe dl dd .note {
font-size: 84%;/* 11px */
color:#666666;
}

#sustainability #attemptBox {
padding:60px 0 80px;
}
#sustainability #attemptBox .inner {
width:900px;
margin:0 auto;
text-align:center;
}
#sustainability #attemptBox .inner h2 {
display:inline-block;
font-size: 225%;/* 36px */
line-height:100%;
color:#26474d;
text-align:center;
border-bottom:1px solid #26474d;
padding:0 0 10px;
margin:0 0 60px;
}
#sustainability #attemptBox .inner h3 {
font-size: 150%;/* 24px */
line-height:140%;
color:#26474d;
margin:0 0 20px;
}
#sustainability #attemptBox .inner .attempt1,
#sustainability #attemptBox .inner .attempt2,
#sustainability #attemptBox .inner .attempt3 {
margin:0 0 60px;
}
#sustainability #attemptBox .inner .attempt4 {
margin:0 0 0;
}
#sustainability #attemptBox .inner .attempt1:after,
#sustainability #attemptBox .inner .attempt2:after,
#sustainability #attemptBox .inner .attempt3:after,
#sustainability #attemptBox .inner .attempt4:after {
content: "";
display: block;
clear: both;
}
#sustainability #attemptBox .inner .attempt1 .text {
float:left;
width:380px;
}
#sustainability #attemptBox .inner .attempt3 .text {
float:left;
width:620px;
}
#sustainability #attemptBox .inner .attempt2 .text,
#sustainability #attemptBox .inner .attempt4 .text {
float:right;
width:320px;
}
#sustainability #attemptBox .inner .attempt1 .text p,
#sustainability #attemptBox .inner .attempt2 .text p,
#sustainability #attemptBox .inner .attempt3 .text p,
#sustainability #attemptBox .inner .attempt4 .text p {
text-align:180%;
margin:0;
}
#sustainability #attemptBox .inner .attempt1 .photo {
float:right;
width:480px;
}
#sustainability #attemptBox .inner .attempt3 .photo {
float:right;
width:220px;
}
#sustainability #attemptBox .inner .attempt2 .photo,
#sustainability #attemptBox .inner .attempt4 .photo {
float:left;
width:540px;
}
#sustainability #attemptBox .inner .attempt1 .photo img {
width:480px;
}
#sustainability #attemptBox .inner .attempt3 .photo img {
width:220px;
}
#sustainability #attemptBox .inner .attempt2 .photo img,
#sustainability #attemptBox .inner .attempt4 .photo img {
width:540px;
}
#sustainability #attemptBox .inner .attempt2 .photo {
position:relative;
margin:100px 0 0 ;
}
#sustainability #attemptBox .inner .attempt2 .photo .absolute1 {
width:200px;
position:absolute;
top:-90px;
right:30px;
}
#sustainability #attemptBox .inner .attempt2 .photo .absolute2 {
width:200px;
position:absolute;
bottom:-90px;
left:30px;
}

}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#sustainability h1 .english {
position:absolute;
top:-30px;
left:180px;
}

#sustainability #leadBox {
padding:60px 0 0;
}
#sustainability #leadBox .inner {
width:92vw;
margin:0 auto;
}
#sustainability #leadBox h2 {
font-size: 188%;/* 30px */
line-height:140%;
color:#26474d;
margin:0 0 30px;
text-align:center;
}
#sustainability #leadBox .boxStripe {
padding:4vw 0;
background:url("../images/bg_stripe2.gif") repeat 0 0;
}
#sustainability #leadBox .boxStripe dl {
width:84vw;
margin:0 auto;
}
#sustainability #leadBox .boxStripe dl dt {
text-align: center;
background: #26474d;
font-size: 137%;/* 22px */
line-height:140%;
color:#ffffff;
padding:2vw;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
font-family: "Noto Sans Regular JP", sans-serif;
}
#sustainability #leadBox .boxStripe dl dd {
padding:2vw 3vw;
background: #ffffff;
font-size: 82%;/* 13px */
line-height:180%;
border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
-webkit-border-radius: 0 0 15px 15px;
}
#sustainability #leadBox .boxStripe dl dd .note {
font-size: 84%;/* 11px */
color:#666666;
}

#sustainability #attemptBox {
padding:60px 0 80px;
}
#sustainability #attemptBox .inner {
width:92vw;
margin:0 auto;
text-align:center;
}
#sustainability #attemptBox .inner h2 {
display:inline-block;
font-size: 188%;/* 30px */
line-height:100%;
color:#26474d;
text-align:center;
border-bottom:1px solid #26474d;
padding:0 0 10px;
margin:0 0 60px;
}
#sustainability #attemptBox .inner h3 {
font-size: 137%;/* 22px */
line-height:140%;
color:#26474d;
margin:0 0 20px;
}
#sustainability #attemptBox .inner .attempt1,
#sustainability #attemptBox .inner .attempt2,
#sustainability #attemptBox .inner .attempt3 {
margin:0 0 60px;
}
#sustainability #attemptBox .inner .attempt4 {
margin:0 0 0;
}
#sustainability #attemptBox .inner .attempt1:after,
#sustainability #attemptBox .inner .attempt2:after,
#sustainability #attemptBox .inner .attempt3:after,
#sustainability #attemptBox .inner .attempt4:after {
content: "";
display: block;
clear: both;
}
#sustainability #attemptBox .inner .attempt1 .text {
float:left;
width:44vw;
}
#sustainability #attemptBox .inner .attempt3 .text {
float:left;
width:60vw;
}
#sustainability #attemptBox .inner .attempt2 .text,
#sustainability #attemptBox .inner .attempt4 .text {
float:right;
width:44vw;
}
#sustainability #attemptBox .inner .attempt1 .text p,
#sustainability #attemptBox .inner .attempt2 .text p,
#sustainability #attemptBox .inner .attempt3 .text p,
#sustainability #attemptBox .inner .attempt4 .text p {
text-align:180%;
margin:0;
}
#sustainability #attemptBox .inner .attempt1 .photo {
float:right;
width:44vw;
}
#sustainability #attemptBox .inner .attempt3 .photo {
float:right;
width:28vw;
}
#sustainability #attemptBox .inner .attempt2 .photo,
#sustainability #attemptBox .inner .attempt4 .photo {
float:left;
width:44vw;
}
#sustainability #attemptBox .inner .attempt1 .photo img {
width:44vw;
}
#sustainability #attemptBox .inner .attempt3 .photo img {
width:28vw;
}
#sustainability #attemptBox .inner .attempt2 .photo img,
#sustainability #attemptBox .inner .attempt4 .photo img {
width:44vw;
}
#sustainability #attemptBox .inner .attempt2 .photo {
position:relative;
margin:5vw 0 0 ;
}
#sustainability #attemptBox .inner .attempt2 .photo .absolute1 {
width:20vw;
position:absolute;
top:-5vw;
right:3vw;
}
#sustainability #attemptBox .inner .attempt2 .photo .absolute2 {
width:20vw;
position:absolute;
bottom:-5vw;
left:3vw;
}

}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#sustainability h1 .english {
left:5vw;
}
#sustainability #leadBox .inner {
width:90vw;
}
#sustainability #leadBox h2 {
font-size: 150%;/* 24px */
}
#sustainability #leadBox .boxStripe {
}
#sustainability #leadBox .boxStripe dl {
width:82vw;
}
#sustainability #leadBox .boxStripe dl dt {
font-size: 112%;/* 18px */
padding:3vw;
}
#sustainability #leadBox .boxStripe dl dd {
padding:3vw 4vw;
}

#sustainability #attemptBox .inner {
width:90vw;
}
#sustainability #attemptBox .inner h2 {
font-size: 150%;/* 24px */
}
#sustainability #attemptBox .inner h3 {
font-size: 150%;/* 24px */
text-align:center;
}
#sustainability #attemptBox .inner .attempt1,
#sustainability #attemptBox .inner .attempt3 {
margin:0 0 60px;
}
#sustainability #attemptBox .inner .attempt2 {
margin:0 0 80px;
}
#sustainability #attemptBox .inner .attempt4 {
margin:0 0 0;
}
#sustainability #attemptBox .inner .attempt1 .text {
float:none;
width:90vw;
margin: 0 0 5vw;
}
#sustainability #attemptBox .inner .attempt3 .text {
float:none;
width:90vw;
margin: 0 0 5vw;
}
#sustainability #attemptBox .inner .attempt2 .text,
#sustainability #attemptBox .inner .attempt4 .text {
float:none;
width:90vw;
margin: 0 0 5vw;
}
#sustainability #attemptBox .inner .attempt1 .photo {
float:none;
width:90vw;
}
#sustainability #attemptBox .inner .attempt3 .photo {
float:none;
width:90vw;
}
#sustainability #attemptBox .inner .attempt2 .photo,
#sustainability #attemptBox .inner .attempt4 .photo {
float:none;
width:90vw;
}
#sustainability #attemptBox .inner .attempt1 .photo img {
width:90vw;
}
#sustainability #attemptBox .inner .attempt3 .photo img {
width:90vw;
}
#sustainability #attemptBox .inner .attempt2 .photo img,
#sustainability #attemptBox .inner .attempt4 .photo img {
width:90vw;
}
#sustainability #attemptBox .inner .attempt2 .photo {
position:relative;
margin:10vw 0 0 ;
}
#sustainability #attemptBox .inner .attempt2 .photo .absolute1 {
width:30vw;
position:absolute;
top:-8vw;
right:5vw;
}
#sustainability #attemptBox .inner .attempt2 .photo .absolute2 {
width:30vw;
position:absolute;
bottom:-8vw;
left:5vw;
}
}

/* =qa
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#qa h1 .english {
position:absolute;
top:-35px;
left:180px;
}
#qa .listQa {
background: url("../images/line_dot_black.gif") repeat-x 0 100%;
padding:20px 0 10px;
}
#qa .listQa dl dt {
font-size: 100%;/* 16px */
line-height:140%;
padding-bottom:10px;
padding-left:30px;
background: url("/qa/images/icon_q.png") no-repeat 0 0;
font-family: "Noto Sans Regular JP", sans-serif;
}
#qa .listQa dl dd {
font-size: 88%;/* 14px */
line-height:160%;
padding-bottom:10px;
padding-left:30px;
background: url("/qa/images/icon_a.png") no-repeat 0 0;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#qa h1 .english {
position:absolute;
top:-30px;
left:180px;
}
#qa .listQa {
background: url("../images/line_dot_black.gif") repeat-x 0 100%;
padding:20px 0 10px;
}
#qa .listQa dl dt {
font-size: 100%;/* 16px */
line-height:140%;
padding-bottom:10px;
padding-left:30px;
background: url("/qa/images/icon_q.png") no-repeat 0 0;
font-family: "Noto Sans Regular JP", sans-serif;
}
#qa .listQa dl dd {
font-size: 88%;/* 14px */
line-height:160%;
padding-bottom:10px;
padding-left:30px;
background: url("/qa/images/icon_a.png") no-repeat 0 0;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
}

/* =footer
--------------------------------------------------------- */
/* 画面サイズ 1000px〜*/
@media only screen and (min-width: 1000px) {
#footer .inner{
width:900px;
margin:0 auto;
padding:50px 0;
}
#footer .inner #logoBox{
float:left;
width:300px;
}
#footer .inner #logoBox .logo{
width:200px;
height:110px;
background:#ffffff;
margin:0 auto 10px;
}
#footer .inner #logoBox .logo img{
}
#footer .inner #logoBox h4{
color:#ffffff;
text-align:center;
}
#footer .inner #textBox{
float:right;
width:600px;
}
#footer .inner #textBox dl{
margin:0 0 20px;
}
#footer .inner #textBox dl:after {
content: "";
display: block;
clear: both;
}

#footer .inner #textBox dl dt{
float:left;
width:180px;
color:#ffffff;
font-size: 100%;/* 16px */
line-height:120%;
}
#footer .inner #textBox dl dd{
float:right;
width:420px;
color:#ffffff;
font-size: 82%;/* 13px */
line-height:160%;
}
#footer .inner #textBox dl.long dt{
width:420px;
}
#footer .inner #textBox dl.long dd{
width:180px;
}
#footer .inner #textBox dl dd span{
display:inline-block;
}
#footer .inner #textBox ul li{
color:#ffffff;
font-size: 100%;/* 16px */
display:inline-block;
margin:0 30px 0 0;
}

#footer .inner #textBox dl dt a:link, 
#footer .inner #textBox dl dd a:link, 
#footer .inner #textBox ul li a:link {color:#ffffff;}
#footer .inner #textBox dl dt a:visited, 
#footer .inner #textBox dl dd a:visited, 
#footer .inner #textBox ul li a:visited {color:#ffffff;}
#footer .inner #textBox dl dt a:hover, 
#footer .inner #textBox dl dd a:hover, 
#footer .inner #textBox ul li a:hover {color:#ffffff;}

#footer .inner #copyright{
clear:both;
color:#999999;
text-align:center;
font-size: 82%;/* 13px */
padding:50px 0 0;
margin:0;
}
#footer .inner #textBoxSp{
display:none;
}
}

/* 画面サイズ 〜999px*/
@media only screen and (max-width: 999px) {
#footer .inner{
padding:50px 0;
}
#footer .inner #logoBox{
float:left;
width:20%;
margin:0 5%;
}
#footer .inner #logoBox .logo{
width:120px;
height:66px;
background:#ffffff;
margin:0 auto 10px;
}
#footer .inner #logoBox .logo img{
width:120px;
}
#footer .inner #logoBox h4{
color:#ffffff;
text-align:center;
}
#footer .inner #textBox{
float:right;
width:65%;
margin:0 5% 0 0;
}
#footer .inner #textBox dl{
margin:0 0 20px;
}
#footer .inner #textBox dl:after {
content: "";
display: block;
clear: both;
}

#footer .inner #textBox dl dt{
float:left;
width:30%;
color:#ffffff;
font-size: 100%;/* 16px */
line-height:120%;
}
#footer .inner #textBox dl dd{
float:right;
width:67%;
color:#ffffff;
font-size: 82%;/* 13px */
line-height:160%;
}
#footer .inner #textBox dl.long dt{
width:67%;
}
#footer .inner #textBox dl.long dd{
width:30%;
}
#footer .inner #textBox dl dd span{
display:inline-block;
}
#footer .inner #textBox ul li{
color:#ffffff;
font-size: 100%;/* 16px */
display:inline-block;
margin:0 30px 0 0;
}

#footer .inner #textBox dl dt a:link, 
#footer .inner #textBox dl dd a:link, 
#footer .inner #textBox ul li a:link {color:#ffffff;}
#footer .inner #textBox dl dt a:visited, 
#footer .inner #textBox dl dd a:visited, 
#footer .inner #textBox ul li a:visited {color:#ffffff;}
#footer .inner #textBox dl dt a:hover, 
#footer .inner #textBox dl dd a:hover, 
#footer .inner #textBox ul li a:hover {color:#ffffff;}

#footer .inner #copyright{
clear:both;
color:#999999;
text-align:center;
font-size: 82%;/* 13px */
line-height:140%;
padding:50px 0 0;
margin:0;
}
#footer .inner #textBoxSp{
display:none;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {

#footer .inner{
}
#footer .inner #logoBox{
float:none;
width:40%;
margin:0 auto 20px;
}
#footer .inner #textBox{
display:none;
}
#footer .inner #textBoxSp{
display:block;
}
#footer .inner #textBoxSp ul{
width:90%;
margin:0 auto;
border-top:1px solid #2f2f2f;
}
#footer .inner #textBoxSp ul li{
padding:10px 0;
border-bottom:1px solid #2f2f2f;
background: url("../images/arrow_linkBox.png") no-repeat 95% 50%;
}
#footer .inner #textBoxSp ul li a:link {color:#ffffff;}
#footer .inner #textBoxSp ul li a:visited {color:#ffffff;}
#footer .inner #textBoxSp ul li a:hover {color:#ffffff;}


#footer .inner #copyright{
padding:50px 80px 0;
}
}