@CHARSET "utf-8";

/* =============================================
                    RESET
============================================= */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,a,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:none;outline:none;background:transparent;vertical-align:top;font-size:100%}body{line-height:1}img{line-height: 0; vertical-align: top;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}del{text-decoration: line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}li{list-style-type: none}table{border-collapse:collapse;border-spacing:0}input, select{vertical-align:middle}hr{display:block;height:1px;margin:1em 0;padding:0;border:none;border-top:1px solid #ccc}a{outline:none;}.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{zoom:1}

/* =============================================
                    COMMON
============================================= */
body{
background: #fff;
color: #fff;
font: 12px/1.4 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo, Osaka,'ＭＳ Ｐゴシック','MS P Gothic',sans-serif;
/font: 12px/1.4 'ＭＳ Ｐゴシック','MS P Gothic',sans-serif;
}

/*  Anchor  */
a{ text-decoration: underline;}
a:link { color: #fff;}
a:visited{ color: #fff;}
a:hover{ text-decoration: none;}
a:active{ color: #fff;}
.switch { visibility: hidden;}

a.blue:link { color: #34a398;}
a.blue:visited{ color: #34a398;}
a.blue:hover{ text-decoration: none;}
a.blue:active{ color: #34a398;}
a.blue[target="_blank"] { display: inline-flex; align-items: center; column-gap: 3px;}
a.blue[target="_blank"]:after { content: ''; display: block; width: 12px; height: 12px; background: url(../img/sec4-icon-blank.png) no-repeat; background-size: cover;}

header{ background: #fff;}
footer{background: #34a398; text-align: center;}
footer .page-top{ position: absolute;}
.bgA{ background: url(../img/bg-a.png) center top repeat; background-size: 50%;}
.bgB{ background: url(../img/bg-b.png) center top repeat;}
.bgC{ background: url(../img/bg-c.png) center top repeat;}
.bgD{ background: url(../img/bg-d.png) center top repeat;}
.bgE{ background: url(../img/bg-e.png) center top repeat;}
.top nav{ background: #5f513a;}
#main .notes{ background: rgba(72,180,170,0.5); }
.under .notes-area{ background: rgba(255,255,255,0.5); color: #000;}
#sec2 .img03{ position: relative;}
#sec2 .img03 p{ position: absolute; color: #5f513a;}

/* =============================================
                    PC
============================================= */
@media screen and (min-width: 768px){
a:hover img{ filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}
section{ padding: 50px 0;}
h2{ margin-bottom: 40px;}
.innerA{ width: 920px; text-align: center; margin: 0 auto; position: relative;}
.innerB{ width: 920px; text-align: center; margin: 0 auto; position: relative;}

header{ padding: 15px 0;}
header #logo img{ margin: 0 auto;}
.bgA{ background-size: 61px;}
.bgC{ background-size: 20px;}
.bgD{ background-size: 40px;}
.bgE{ background-size: 20px;}
#main{ padding: 50px 0 0;}
#main h1{ margin-bottom: 30px;}
#main .img01{ margin-bottom: 18px;}
#main #bnr-area{ width: 580px; margin: 0 auto 30px;}
#main .notes{ font-size: 14px; text-align: center; padding: 15px 0;}
.top nav ul{ width: 920px; margin: 0 auto; padding: 20px 0 5px;}
.top nav ul li{ float: left; margin: 0 22px 15px 0;}
.top nav ul li:nth-of-type(3),.top nav ul li:nth-of-type(6){ margin-right: 0;}
#sec1 p{ margin-bottom: 40px;}
#sec1 .img02{ margin-bottom: 40px;}
#sec1 .notes{ font-size: 14px; text-align: center; color: #000; margin-bottom: 40px;}
#sec2 ul{ width: 540px; margin: 0 auto;}
#sec2 ul li{ float: left; margin-bottom: 30px;}
#sec2 ul li:nth-child(even){ float: right;}
#sec2 .img03{ width: 540px; margin: 0 auto;}	
#sec2 .img03 p{ width: 496px; font-size: 18px; left: 24px; bottom: 24px;}
#sec2 .img04{ margin-top: 20px;}
#sec2 .btn{ margin-top: 30px;}
#sec3 ul{ width: 775px; margin: 0 auto;}
#sec3 ul li{ float: left;}
#sec3 ul li:nth-child(even){ float: right;}
#sec4 ul{ width: 736px; margin: 0 auto;}
#sec4 ul li{ float: left; margin-bottom: 30px;}
#sec4 ul li:nth-child(even){ float: right;}
#sec4 .img05{ position: relative; margin: 0 0 30px 0;}
#sec4 .img05 p.pepe_site{ position: absolute; font-size: 14px; color: #34a398; left: 45px; bottom: 468px;}
#sec4 .img05 p.pepe_caution{ position: absolute; font-size: 11px; color: #ff6e6e; left: 33px; bottom: 453px;}
#sec4 #tag3{ position: relative; margin: 0 0 30px 0;}
#sec4 #tag3 p.yao_caution{ position: absolute; font-size: 11px; color: #ff6e6e; left: 33px; bottom: 453px;}
#sec5 .img01{ margin-bottom: 40px;}
#sec5 h3{ margin-bottom: 20px;}
#sec5 ul{ width: 820px; margin: 0 auto;}
#sec5 ul li{float: left; margin: 0 20px 20px 0;}
#sec5 ul li:nth-of-type(3),#sec5 ul li:nth-of-type(6){ margin-right: 0;}

#back-nav{ position: fixed; left: 20px; bottom: 20px; width: 80px; z-index: 100;}
#back-nav img{ width: 80px;}

footer{ padding: 40px 0;}
footer .page-top{ right: 0; top: -79px;}
footer small{ font-size: 14px; display: block; margin-bottom: 20px;}
footer ul li{ width: 40px; display: inline-block; margin: 0 5px;}
footer ul li img{ width: 100%;}

.under nav{ text-align: center; margin-bottom: 40px;}
.under nav ul li{ display: inline-block; margin: 0 5px; width: 216px;}
.under nav ul li img{ width: 100%;}
.under section{ padding: 0 0 40px;}
.under h2{ margin-bottom: 40px; text-align: center;}
.under section ul{ text-align: left;}
.under section ul li{ margin: 0 4px 10px; width: 218px; float: none; display: inline-block;}
.under section ul li img{ width: 100%;}
.under section .txt{ margin: 10px 0 20px;}
.under section .txt2{ margin: 10px 0 20px 40px;}
.under .notes-area{ padding: 40px 0;}
.under .notes-area h3{ margin-bottom: 20px;}
.under .notes-area p{ text-align: left;}

/* slick */
.slick-prev,.slick-next{ top: 85px; width: 50px; height: 50px; }
.slick-prev{ left: -25px; background: url(../img/arrowL.png) center center no-repeat; background-size: 50px;}
.slick-next{ right: -25px; background: url(../img/arrowR.png) center center no-repeat; background-size: 50px;}
}
/* =============================================
                    SP
============================================= */
@media screen and (max-width: 768px){
img{ width: 100%;}
section{ padding: 30px 0;}
h2{ margin-bottom: 20px;}
.innerA{ padding: 0 15px; position: relative;}
.innerB{ padding: 0 10px; position: relative;}
.bgA{ background-size: 16%;}
.bgB{ background-size: 110%;}
.bgC{ background-size: 8%;}
.bgD{ background-size: 8%;}
.bgE{ background-size: 8%;}

header{ padding: 10px 0;}
#main{ padding: 20px 0 0;}
#main h1{ margin-bottom: 15px;}
#main .img01{ margin-bottom: 10px;}
#main #bnr-area{ margin-bottom: 20px;}
#main .notes{ padding: 10px 20px;}
.top nav{ padding: 10px 15px 0;}
.top nav ul li{ width: 49%; float: left; margin-bottom: 10px;}
.top nav ul li:nth-child(even){ float: right;}
#sec1 p{ margin-bottom: 20px;}
#sec1 .img02{ margin-bottom: 20px;}
#sec1 .notes{ color: #000; margin-bottom: 20px;}
#sec2 ul{ margin-bottom: 20px;}
#sec2 ul li{ width: 49%; float: left; margin-bottom: 10px;}
#sec2 ul li:nth-child(even){ float: right;}

#sec2 .img03{ margin: 0 auto;}
#sec2 .img03 p{ font-size: 3vw; left: 25%; bottom: 7%;}
#sec2 .img04{ margin-top: 15px;}
#sec2 .btn{ margin-top: 15px;}
#sec3 ul li{ width: 49%; float: left;}
#sec3 ul li:nth-child(even){ float: right;}
#sec4 ul li{ margin-bottom: 20px;}
#sec4 ul li:last-child{ margin-bottom: 0;}
#sec4 .img05{ position: relative;}
#sec4 .img05 p.pepe_site{ position: absolute; font-size: 4vw; color: #34a398; left: 13%; bottom: 65.5%;}
#sec4 .img05 p.pepe_caution{ position: absolute; font-size: 3vw; color: #ff6e6e; left: 9%; bottom: 63.5%;}
#sec4 #tag3{ position: relative;}
#sec4 #tag3 p.yao_caution{ position: absolute; font-size: 3vw; color: #ff6e6e; left: 9%; bottom: 61.5%;}
#sec5 .img01{ margin-bottom: 30px;}
#sec5 ul li{ width: 49%; float: left; margin-top: 10px;}
#sec5 ul li:nth-child(even){ float: right;}

#back-nav{ position: fixed; left: 10px; bottom: 50px; width: 40px; z-index: 100;}

footer{ padding: 20px 0 30px;}
footer .page-top{ right: 10px; top: -39px; width: 46px;}
footer small{ display: block; margin-bottom: 20px;}
footer ul li{ width: 13%; display: inline-block; margin: 0 1%;}

.under nav{ padding: 0 15px 0; margin-bottom: 5px;}
.under nav ul li{ width: 49%; float: left; margin-bottom: 10px;}
.under nav ul li:nth-child(even){ float: right;}
.under section{ padding: 0 0 20px;}
.under h2{ margin-bottom: 10px;}
.under section ul li{ width: 49%; float: left; margin-bottom: 10px;}
.under section ul li:nth-child(even){ float: right;}
.under section .txt{ margin-bottom: 10px;}
.under section .txt2{ margin-bottom: 10px; width: 90%; margin-left: 9%;}
.under .notes-area{ padding: 40px 0;}
.under .notes-area h3{ margin-bottom: 15px;}
.under footer small{ margin-bottom: 0px;}

/* slick */
.slick-prev,.slick-next{ top: 46%; width: 25px; height: 25px; }
.slick-prev{ left: -3%; background: url(../img/arrowL.png) center center no-repeat; background-size: 25px;}
.slick-next{ right: -3%; background: url(../img/arrowR.png) center center no-repeat; background-size: 25px;}

}