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

/* ===================================================================
 Reset
=================================================================== */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
 margin: 0; padding: 0; border: 0; font-weight: normal; font-size: 100%; vertical-align:baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article, header, footer, aside, figure, figcaption, nav, section { display:block; }
html { scroll-behavior:smooth; }
body { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
table { border-collapse: collapse; border-spacing: 0;}


/* ===================================================================
 Layout
=================================================================== */
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
*, :before, :after { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit; }
body { background:#fff; padding:0; margin:0 auto; font-size:16px; color:#000; font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; }
#page { position:relative; word-wrap:break-word; }

img { max-width:100%; height: auto; margin:0; padding:0; -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; }
p { margin-bottom: 1em;}

ul { list-style-type: none;}

/*--------------------------------------------------------------
 Links
--------------------------------------------------------------*/
a,
a:visited {text-decoration: underline;}
a:focus { }
a:hover,
a:active { text-decoration: underline; opacity:0.75; filter: alpha(opacity=75); -webkit-transition: all .3s; transition: all .3s; }

strong a { font-weight: bold;}

@media screen and (min-width: 769px) {
    a[href^="tel:"] { pointer-events: none; text-decoration: none; color: #000; }
    .site-header .head-company .tel-pc a { text-decoration: none; color: #fff;}
}
@media screen and (max-width: 768px) {
    a[href^="tel:"] { text-decoration: underline; color: #000; }
}

/*--------------------------------------------------------------
 HEAD
--------------------------------------------------------------*/
.site-header { background: url("../img/mv.jpg") no-repeat center top; height: 800px; text-align: center; padding: 0; line-height: 1.2;}
.site-header .head { position: relative; height: 80px;}
.site-header .head-youkei { width: 320px; float: left; margin-left: 10px; padding-top: 8px; text-align: left;}
.site-header .head-company { width: 350px; float: right; margin-right: 10px; padding-top: 8px; text-align: right; color: #fff; font-size: 14px;}
.site-header .head-company a { color: #fff; text-decoration: underline;}
.site-header .head-company a.nextone{ font-size: 12px;}

@media screen and (max-width: 768px) {
    .site-header { height: 450px; background-position: top center; background-size: auto 400px; }
    .site-header { background-size: auto 415px; }
    .site-header .head { height: 30px;}
}
@media screen and (max-width: 500px) {
    .site-header { height: 350px; background-position: top center; background-size: auto 295px; }
}

.mv { clear: both; width: 100%; text-align: center;}
.mv img { margin: 290px auto 0 auto; }

@media only screen and (max-width: 768px) {
    .mv { }
    .mv img { margin: 130px auto 0 auto;  }
}

@media only screen and (max-width: 500px) {
    .mv { width: calc(100% + 80px);}
    .mv img { margin: 80px auto 0 auto; }
}

.menu { display: block; position: absolute; left: 40px; top: 100px; width: 100px;}
.menu-bt { width: 100px; height: 100px; padding-top: 78px; background: url("../img/head_egg.png") no-repeat center top; cursor: pointer; z-index: 3; text-align: center;}
.menu-bt:hover{ color: #999;}
.menu-bt:after{ content: "↓";}
.menu-bt.open:after{ content: "↑";}
.menu-box{ padding: 5px;}
.menu-box ul li{ font-size: 21px; padding: 1em 0; background: url("../img/menu_line.png") no-repeat center bottom; }
.menu-box ul li a { color: #fff; text-decoration: none;}

@media only screen and (max-width: 768px) {
    .menu { display: block; position: absolute; left: 20px; width: 100px;}
}

@media only screen and (max-width: 420px) {
    .menu { display: block; position: absolute; left: 10px; top: 70px; width: 80px;}
    .menu-bt { width: 80px; height: 75px; padding-top: 56px; background: url("../img/head_egg.png") no-repeat center top; background-size: 60px 75px; cursor: pointer; z-index: 3; text-align: center;}
    .menu-box ul li{ font-size: 17px; padding: 0.5em 0; }
}

/*--------------------------------------------------------------
 MAIN
--------------------------------------------------------------*/

#main { line-height: 1.5; letter-spacing: 0.03em; }
section { clear: both; width: 100%; margin: 0 auto; padding: 40px 0;}
section:after { content:" "; display:block; clear:both;}
.box { clear: both; width: 1200px; margin: 0 auto;}
.box:after { content:" "; display:block; clear:both;}
h2 { color: #3F1F00; text-align: center; font-size: 28px; margin-bottom: 1em;}

@media only screen and (max-width: 1200px) {
    .box { width: 94%; }
}

@media screen and (max-width: 768px) {
    section { clear: both; width: 100%; margin: 0 auto; padding: 20px 0;}
}
@media screen and (max-width: 420px) {
    h2 { text-align: left; font-size: 20px;}
}

#about { margin-top: 40px; }
@media screen and (max-width: 768px) {
    #about { margin-top: 0px;  }
}

#food h2 { text-align: left;}
#food .food-txt { width: 42%; float: left;}
#food .food-photo { width: 50%; float: right; margin-bottom: 30px;}

@media screen and (max-width: 768px) {
    #food .food-txt { width:100%; float: none;}
    #food .food-photo { width:100%; float: none; text-align: center;}
}

#egg ul.row3 { margin-bottom: 20px; }

#egg h2 { text-align: center;}
#egg .food-txt { width: 42%; float: left;}
#egg .food-photo { width: 50%; float: right; margin-bottom: 30px;}

#egg .pdf-bt { width:100%; padding: 30px 30px; margin: 30px auto; text-align: center;}

@media screen and (max-width: 768px) {
    #egg .food-txt { width:100%; float: none;}
    #egg .food-photo { width:100%; float: none; text-align: center;}
}

#cycle .cycle-img { text-align: center;}

@media screen and (min-width: 421px) {
    #cycle .cycle-sp { display: none;}
}
@media screen and (max-width: 420px) {
    #cycle .cycle-pc { display: none;}
}



ul.row2:after { content:" "; display:block; clear:both;}
ul.row2 li { float: left; width:599px; margin-right: 2px; }
@media only screen and (max-width: 1199px) {
    ul.row2 li { float: left; width:49.9%; margin-right: 0.2%; }
}
@media screen and (min-width: 421px) {
    ul.row2 li:nth-child(even){ margin-right: 0; }
}
@media screen and (max-width: 420px) {
   ul.row2 li { width:100%; float: none; margin: 0 auto 3px auto; text-align: center;}
}

ul.row3:after { content:" "; display:block; clear:both;}
ul.row3 li { float: left; width:398px; margin-right: 3px; }
@media only screen and (max-width: 1199px) {
    ul.row3 li { float: left; width:33.1%; margin-right: 0.35%; }
}
@media screen and (min-width: 421px) {
    ul.row3 li:nth-child(3n){ margin-right: 0; }
}
@media screen and (max-width: 420px) {
   ul.row3 li { width:100%; float: none; margin: 0 auto 3px auto; text-align: center;}
}


/*----------------------------------------------------
	footer#globalFooter
----------------------------------------------------*/
#foot { clear: both; text-align:center;}
#foot .footmn {}
#foot .footmn ul { background: url(../img/foot_bg.gif) repeat top; margin:0 auto; padding-top:6px; padding-bottom:7px; list-style: none; font-size:11px; line-height:100%;}
#foot .footmn ul:after { content:" "; display:block; clear:both;}
#foot .footmn ul li { display: inline; border-right:1px solid #FFF; padding:0 15px 0 12px; margin: 10px 0; line-height: 2; }
#foot .footmn ul li a { color:#FFF;}
#foot .footmn ul li a:hover { color: #B5D6D9;}
#foot .footmn ul li:last-child { border-right:none;}
#foot .footmn ul li img { vertical-align: middle;}

#foot .footadd { clear: both; width: 100%; max-width: 1200px; margin:0 auto; font-size:12px;}
#foot .footadd:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;}
#foot .footadd .foot-logo { float:left; width:30%; }
#foot .footadd .foot-factory { float:left; width:40%; padding-top: 20px; text-align:left; }
#foot .footadd .foot-factory p { margin-bottom: 0.5em; }
#foot .footadd .foot-bn { float:left; width:28%; padding-top: 10px; }
#foot .footadd .foot-bn ul { background: #fff; }
#foot .footadd .foot-bn ul li { float: left; width: 50%;}

@media screen and (max-width: 768px) {
    #foot ul li img { vertical-align: middle; margin-top: 5px; }
    #foot .footadd .foot-logo { float:none; width:100%; text-align: center;}
    #foot .footadd .foot-factory { float:none; width:100%; text-align: center; padding-top: 0; }
    #foot .footadd .foot-bn { float:none; width: calc(100% - 80px); text-align: center;}
}

/* copyright
----------------------------------------------------*/
#foot .copyright { clear: both; width: 100%; margin: 0 auto 3px auto; text-align: center; font-size: 10px; color: #746152;}
#foot .copyright a { color: #746152;}
#foot .copyright a:hover { color: #4E4136;}

/* ページ先頭へ------------------------------------------------ */
#pagetop { position: fixed; bottom: 10px; right: 20px;}
#pagetop a { }
#pagetop a img{ opacity:0.8; filter: alpha(opacity=80);}
#pagetop a:hover img{ opacity:0.5; filter: alpha(opacity=50);}

@media screen and (max-width: 420px) {
    #pagetop { display: none;}
}