@charset "UTF-8";

html { font-size: 62.5%; /* sets the base font to 10px for easier math */ }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
font-size: 13px;
font-size: 1.3rem;
line-height:1.5;
/* sets the default sizing to make sure nothing is actually 10px */
}
body * { box-sizing:border-box; }

p,h1,h2,h3,h4,h5,h6,ul,li,small  { color: #333; }

a {
color: #333;
outline: none;
}
.ac { text-align: center; }
.fb { font-weight: 700; }
.fu { text-decoration: underline; }
.co1 { color: #fa0000; }
.co2 { color: #005bac; }

.f333 { color: #333; }
.f666 { color: #666; }
.f16 { font-size: 1.6rem; }
.f18 { font-size: 1.8rem; }
.f20 { font-size: 2rem; }
.f22 { font-size: 2.2rem; }
.f24 { font-size: 2.4rem; }
.f26 { font-size: 2.6rem; }
.f28 { font-size: 2.8rem; }
.f30 { font-size: 3rem; }

.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pb20 { padding-bottom: 20px; }


/* #gotop */
#gotop {
z-index:2;
_display:none;
position:fixed;
bottom:0;
margin: 0;
padding: 0;
left: auto;
right:10px;
line-height: 1;
}
#gotop a {
width:40px;
display: block;
}
#gotop a img {
width: 100%;
height: auto;
}
@media screen and ( min-width: 1000px ) {
#gotop {
left:50%;
right: 0;
margin-left:450px;
}
#gotop a { width:50px; }
}


.wrap {
position: relative;
margin: 0 auto;
max-width: 1000px;
width: 100%;
}
.wrap .inner {
position: relative;
margin: 0 auto;
max-width: 1000px;
width: 95%;
}

.arrow {
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}

.arrow4-1::before{
left: 4px;
box-sizing: border-box;
width: 6px;
height: 4px;
border: 4px solid transparent;
border-left: 4px solid #333;
}
.arrow4-2::before{
left: 4px;
box-sizing: border-box;
width: 6px;
height: 4px;
border: 4px solid transparent;
border-bottom: 4px solid #333;
}


/* #header -------------------------------------------    */
#header {
overflow: hidden;
padding: 20px 0 5px;
}
#header h1 {
float: left;
width: 25%;
min-width: 150px;
}

#header h1 img {
width: 100%;
height: auto;
}
#header ul {
margin-top: 0px;
float: right;
overflow: hidden;
}
#header ul li {
float: right;
}
#header ul li a {
font-size: 1.2rem;
display: block;
padding: 5px 5px 5px 15px;
}


/* .cover -------------------------------------------    */
.cover {
width: 100%;
height: 100%;
padding:0;
background:#4589c8 url("/products/overseas/en/img/recipe01.jpg") no-repeat center top;
background-size:contain;
}
.cover .inner {
height: 100%;
padding: 56.8% 0 0;
}
.cover p {
position:absolute;
}
.cover p img {
width: 100%;
height: auto;
}


/* #footer -------------------------------------------    */
#footer {
overflow: hidden;
margin-top: 30px;
padding: 20px 0 40px;
border-top: solid 2px #00a0e9;
text-align: center;
}
#footer ul {
}
#footer ul li {
display: inline-block;
}

#footer ul li a {
display: block;
padding: 5px 5px 5px 15px;
font-size: 1.2rem;
}
#footer p {
font-size: 1.1rem;
padding: 5px 0px;
}



@media screen and ( min-width: 769px ) {

#footer ul {
float: left;
overflow: hidden;
}
#footer ul li {
float: left;
}

#footer p {
float: right;
}
}
@media screen and ( min-width: 1001px ) {

#footer .inner {
width:100%;
}
}