/* header.css */

/* header */
/*--------------------------------------*/
#header * {box-sizing:border-box;}

.gap {
    padding-top:105px;
}
#header {
    position:fixed;
    top:0;
    width:100%;
    height:105px;
    background:#ffffff;
    background:rgba(255,255,255,0.9);
    margin:0;
    padding:0;
    text-align:center;
    z-index:100;
    transition:.5s;
}
#headerInner {
    width:96%;
    max-width:1100px;
    margin:0 auto;
    padding:0;
}

#logo {
    float:left;
    width:116px;
    padding-top:20px;
    text-align:left;
    transition:.5s;
}
#logo img {
    max-width:100%;
    height:auto;
}

/* main navigation */
#navigation {
    position:relative;
    float:right;
    width:86%;
    padding-top:50px;
    transition:.5s;
}

#navigation ul#global-nav {
    margin:0;
    padding:0;
    text-align:right;
}
#navigation ul#global-nav > li {
    display:inline-block;
    margin-left:3em;
    text-align:right;
    line-height:1.4;
    font-size:1.3em;
    font-weight:bold;
}
#navigation ul#global-nav > li:first-child {
    margin-left:0;
}
#navigation ul#global-nav li > a {
    color:#444444;
}

#navigation ul#global-nav li.contact {display:none;}

#navigation .btn_contact {
    position:absolute;
    top:0;
    right:0;
}
#navigation .btn_contact a {
    display:block;
    background:#ebebeb;
    padding:0.3em 1.3em;
    font-size:1.1em;
    transition:all .3s ease-in;
}
#navigation .btn_contact a:hover {
    background:#a4a4a4;
    color:#ffffff;
    text-decoration:none;
}


/* current */
body#company #navigation ul li.company > a,
body#business #navigation ul li.business > a,
body#products #navigation ul li.products > a,
body#foodsafety #navigation ul li.foodsafety > a,
body#contact #navigation ul li.contact > a,
body#story #navigation ul li.story > a {
    color:#888888;
}


#navigation ul#global-nav li.sp-item,
#navigation ul#global-nav li ul.child {
    display:none;
}




/* header change */
#header.change {
    height:65px;
}
#header.change #logo {
    padding-top:5px;
    width:100px;
}
#header.change #navigation {
    padding-top:30px;
}
#header.change #navigation .btn_contact a {
    padding:0 1.3em;
}


/* - 1200px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 1200px) {


/* main navigation */
#navigation ul#global-nav > li {
    margin-left:1.0em;
}



}
/* - 1200px end */



/* - 950px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 950px) {


/* main navigation */
#navigation {
    width:84%;
}
#navigation ul#global-nav > li {
    margin-left:1.0em;
    font-size:1.2em;
}

#navigation .btn_contact a {
    font-size:1.05em;
}


}
/* - 950px end */



/* - 900px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 900px) {



/* header */
/*--------------------------------------*/
#header {
    height:95px;
}


#logo {
    width:14%;
}

/* main navigation */
#navigation {
}
#navigation ul#global-nav > li {
    font-size:1.1em;
}



}
/* - 900px end */





/* - 790px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 790px) {


#logo {
}

/* main navigation */
#navigation {
}
#navigation ul#global-nav > li {
    font-size:1.05em;
}

#navigation .btn_contact a {
    font-size:0.9em;
}



}
/* - 790px end */





/* - 768px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 768px) {

#wrapper {
    padding-top:100px;
}

.gap {
    padding-top:0;
}

.fixed {
    position:fixed;
    width:100%;
    height:100%;
}

/* header change */
#header.change,
#header.change #headerInner {
    height:inherit;
}
#header.change #logo {
    padding-top:0;
    width:24%;
}
#header.change #navigation {
    padding-top:inherit;
}

/* header */
/*--------------------------------------*/
#header {
    position:fixed;
    top:0;
    height:100px;
    background:rgba(255,255,255,0.9);
    z-index:9998;
    transition:all .3s;
}
#headerInner {
    position:relative;
    width:100%;
    height:100px;
}

#logo {
    position:relative;
    float:left;
    width:24%;
    max-width:140px;
    height:100px;
    margin-left:4%;
    padding-top:0;
    z-index:101;
}
#logo img {
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    max-width:100%;
    margin:auto;
}


/* burger menu */
#toggle {
    position:absolute;
    top:0;
    right:4%;
    bottom:0;
    width:56px;
    height:52px;
    background-color:#e94709;
    margin:auto;
    cursor:pointer;
    z-index:101;
}

#toggle,
#toggle span {
    display:inline-block;
    transition:all .4s;
    box-sizing:border-box;
}
#toggle div {
    position:relative;
    width:36px;
    height:52px;
    margin:0 auto;
}
#toggle div span {
    position:absolute;
    left:0;
    width:100%;
    height:4px;
    background-color:#fff;
}
#toggle div span:nth-of-type(1) {
    top:12px;
}
#toggle div span:nth-of-type(2) {
    top:24px;
}
#toggle div span:nth-of-type(3) {
    top:36px;
}


/* #toggle animation */
.open #toggle span:nth-of-type(1) {
  -webkit-transform: translateY(12px) rotate(-45deg);
  transform: translateY(12px) rotate(-45deg);
}
.open #toggle span:nth-of-type(2) {
  opacity: 0;
}
.open #toggle span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
}



/* navigation */
/*--------------------------------------*/
#navigation {
    float:none;
    position:fixed;
    top:100px;
    right:0;
    width:0;
    height:100%;
    min-height:100%;
    background:#f3f3f3;
    line-height:1.8;
    transition:.2s;
    transform:translate3d(100%, 0, 0);
    -webkit-overflow-scrolling:touch;
    -webkit-text-size-adjust:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    z-index:100;
}
#wrapper.open #navigation {
    width:100%;
    transform:translate3d(0, 0, 0);
}
#wrapper.open #header {
    background:#f3f3f3;
}
#wrapper.open {
    overflow-y:hidden;
    -webkit-overflow-scrolling:auto;
}

#navigation ul#global-nav li.sp-item,
#navigation ul#global-nav li ul.child {
    display:block;
}

#navigation nav {
    overflow-x:hidden;
    overflow-y:scroll;
    position:relative;
    height:calc(100% - 120px);
    min-height:calc(100% - 120px);
    -webkit-overflow-scrolling:touch;
}

#navigation ul#global-nav {
    margin-bottom:80px;
    padding-bottom:1.2em;
    text-align:left;
}
#navigation ul#global-nav > li {
    display:block;
    margin-left:0;
    text-align:left;
    line-height:1.4;
    font-size:2.0em;
    font-weight:normal;
}
#navigation ul#global-nav > li:first-child {
    margin-left:0;
}

#navigation ul#global-nav > li {
    display:block;
    background:url("../images/common/nav_sp_line.png") no-repeat left bottom;
    padding-left:10%;
}
#navigation ul#global-nav li a {
    display:block;
}
#navigation ul#global-nav > li.parent > a {
    background:#f3f3f3;
    margin-bottom:1.2em;
    padding:0 0 0.5em 0.5em;
}

#navigation ul#global-nav li.terms a {
    padding:0 0 0.5em 0.5em;
    font-size:0.8em;
}
#navigation ul#global-nav li.terms {
    background:none;
    margin-bottom:1em;
}
#navigation ul#global-nav li.sitemap {
    background:url("../images/common/nav_sp_line.png") no-repeat left bottom;
    padding-left:10%;
}
#navigation ul#global-nav li.sitemap a {
    background:#f3f3f3;
    margin-bottom:1.2em;
    padding:0 0 1.5em 0.5em;
    font-size:0.8em;
}

#navigation ul#global-nav > li.products {
    margin-bottom:1.5em;
}
#navigation ul#global-nav > li.products > a {
    margin-bottom:1em;
    padding:0 0 0 0.5em;
}
#navigation ul#global-nav ul.child {
    background:#f3f3f3;
    padding:0 0 0 1.5em;
}
#navigation ul#global-nav ul.child li {
    margin-bottom:1.2em;
    padding-left:0;
}
#navigation ul#global-nav ul.child li:last-child {
    margin-bottom:0;
}

#navigation ul#global-nav li.contact {display:block;}
#navigation .btn_contact {display:none;}



}
/* - 768px end */



/* - 640px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 640px) {

#wrapper {
}


/* header */
/*--------------------------------------*/

/* burger menu */
#toggle {
    width:52px;
    height:48px;
}

#toggle div {
    width:34px;
    height:48px;
}
#toggle div span:nth-of-type(1) {
    top:12px;
}
#toggle div span:nth-of-type(2) {
    top:22px;
}
#toggle div span:nth-of-type(3) {
    top:32px;
}

/* #toggle animation */
.open #toggle span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
.open #toggle span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}

/* navigation */
/*--------------------------------------*/
#navigation {
    top:100px;
}




}
/* - 640px end */



/* - 375px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 375px) {

#wrapper {
    padding-top:60px;
}


/* header */
/*--------------------------------------*/
#header,
#headerInner,
#logo {
    height:60px;
}
#logo {
    width:20%;
}
#navigation nav {
    height:calc(100% - 60px);
    min-height:calc(100% - 60px);
}


/* burger menu */
#toggle {
    width:40px;
    height:36px;
}

#toggle div {
    width:24px;
    height:24px;
}
#toggle div span {
    height:3px;
}
#toggle div span:nth-of-type(1) {
    top:9px;
}
#toggle div span:nth-of-type(2) {
    top:17px;
}
#toggle div span:nth-of-type(3) {
    top:25px;
}

/* #toggle animation */
.open #toggle span:nth-of-type(1) {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
}
.open #toggle span:nth-of-type(3) {
  -webkit-transform: translateY(-8px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
}

/* navigation */
/*--------------------------------------*/
#navigation {
    top:60px;
}
#navigation ul#global-nav > li {
    font-size:1.6em;
}
#navigation ul#global-nav li.terms,
#navigation ul#global-nav li.sitemap {
    font-size:1.3em;
}



}
/* - 375px end */



/* - 320px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 320px) {




/* navigation */
/*--------------------------------------*/
#navigation ul#global-nav > li {
    font-size:1.4em;
}
#navigation ul#global-nav li.terms,
#navigation ul#global-nav li.sitemap {
    font-size:1.2em;
}

#navigation ul#global-nav > li.parent {
    background-position:left -25% bottom;
}


}
/* - 320px end */