/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/


html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none;}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

html, body {
width: 100%;
height: 100%;
background:#fff;
scroll-padding-top: 50px; 
}
body{
font-size:16px;
-webkit-text-size-adjust: 100%;
font-family:メイリオ,Meiryo,-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",sans-serif;
text-align:center;
color:#666;
}
img {
vertical-align:bottom;
}
a{
text-decoration:none;
color:#666;
line-height:1.5;
opacity:1;
}
a,a:hover {
-webkit-transition:0.7s;
-moz-transition:0.7s;
-o-transition:0.7s;
transition:0.7s;
}
a img:hover {
-moz-opacity:0.75;
opacity:0.75;
}
a:hover{
opacity:0.5;
}
p,li,div,dt,dd,td,th{
box-sizing:border-box;
}

.br_1,
.pcn {
display:none;
}
.spn {
display:block;
}

.img100{
width:100%;
}

/*====================================================
LAYOUT
====================================================*/

#wrapper {
}

#header_pc {
display: block;
width: 100%;
margin: 0 auto;
}
#header_pc img{
width: 100%;
}

#header_sp {
display: none;
}
h1 {
width:360px;
color:#001450;
font-size: 190%;
font-weight:normal;
line-height:1.2;
letter-spacing:-2px;
padding: 0.5rem;
border-bottom:1px solid #2b8fc2;
margin:0 auto 3rem;
}
.white {
color:#fff;
}
p {
line-height:1.8;
padding: 1rem 0;
}
.btn1 p a {
background:url(../img/arrow2.png) no-repeat right 5% center, #ef8200;
background-size:0.6rem;
width:300px;
color:#fff;
text-align:center;
font-weight:bold;
padding:1rem;
display:inline-block;
margin:1rem auto 0;
}
.btn2 p a {
background:url(../img/arrow2.png) no-repeat right 5% center, #f06478;
background-size:0.6rem;
width:300px;
color:#fff;
text-align:center;
padding:1rem;
font-weight:bold;
display:inline-block;
}

#sect1,
#sect2,
#sect3,
#sect4 {
background:#f0f7fb;
border-bottom:1px solid #dddddd;
padding:6rem 0;
}
#sect1 dl dd,
#sect2 dl dd {
color:#2b8fc2;
font-size:180%;
padding-top:1.5rem;
}

#sect3 ul li {
float:left;
width:31.3%;
margin:0 1% 4%;
}
#sect3 dl dd {
color:#2b8fc2;
font-size:120%;
padding-top:1rem;
}
#sect4 ul li {
float:left;
width:23%;
margin:0 1% 2%;
}


#sect5 {
background: url(../img/cat_bg.jpg) no-repeat center bottom;
background-size:cover;
padding:6rem 0;
position:relative;
}
p.nanap {
font-size:130%;
padding:1rem 0 0;
}
p.catp {
font-size:110%;
padding:1rem 0 0;
}
.bottle {
width:190px;
position:absolute;
top:20%;
left:23%;
}

.w300 {
width:300px;
margin:auto;
}
.w480 {
width:480px;
margin:auto;
}
.w1080 {
width:1080px;
margin:auto;
}


#footer {
margin: 0 auto;
text-align: center;
padding:4rem 0 2rem;
}
#footer dl dt{
color:#000;
margin-bottom: 0.5rem;
}
#footer dl dt img {
width:260px;
}
#footer dl dd{
color:#000;
font-size:14px;
font-family:YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS ゴシック","MS Gothic","メイリオ", Meiryo,sans-serif;
}


/*====================================================
AFTER
====================================================*/

section:after,
#sect3:after,
#sect4:after,
#sect3 ul:after,
#sect4 ul:after{content:".";display:block;clear:both;height:0;visibility:hidden;font-size:0;}

/*====================================================
MEDIA QUERY
====================================================*/

@media screen and (max-width:1080px) {
.w1080 {
width:90%;
}
.bottle {
width:190px;
position:absolute;
top:20%;
left:10%;
}
}
@media screen and (max-width:750px) {
html {
scroll-padding-top: 10rem; 
}
body{
font-size:15px;
}
img {
width: 100%;
height: auto;
}
#header_sp {
display: block;
width: 100%;
}
#header_pc {
display: none;
}
h1 {
width:90%;
}
p {
width:90%;
padding: 0.5rem 0;
margin:0 auto;
}
#sect1,
#sect2,
#sect3,
#sect4 {
padding:4rem 0;
}
#sect3 ul li {
float:none;
width:100%;
margin:0;
}
#sect3 dl dd {
font-size:150%;
padding:1rem 0 2rem;
}
#sect4 ul li {
width:48%;
margin:0 1% 3%;
}
.btn1 p a,
.btn2 p a {
background-size:0.5rem;
width:90%;
}
#sect5 {
background: url(../img/cat_bg2.jpg) no-repeat center bottom;
background-size:cover;
padding:3rem 0 12rem;
}
.br_1,
.pcn {
display:block;
}
.spn {
display:none;
}
}

@media screen and (max-width:480px) {
.w480 {
width:90%;
}
}