/*********************************************************************
* Copyright (c) Left Inc.
* http://left-inc.co.jp
* developer: matsumoto
**********************************************************************/
@charset "UTF-8";

/* reset */
html{ height:100%; overflow-y:scroll; -webkit-overflow-scrolling: touch }
body{ height:100%; margin:0; padding:0; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; word-break:break-all; -webkit-text-size-adjust:100%; }
p{ margin:0; padding:0; }
a, a:hover{ text-decoration:none; outline:none; }
h1, h2, h3, h4, h5, h6{ margin:0; padding:0; font-size:0; line-height:0; }
ul, dl, dt, dd{ margin:0; padding:0; }
li, ol{ margin:0; padding:0; list-style:none; }

.clear{ clear:both; margin:0; padding:0; font-size:0; line-height:0; }
sup{ font-size:60%; }
header, nav, article, aside, section, footer{ display:block; }
*{ box-sizing:border-box; }

/*************************************************************************************************************************
* default : 640px以下
*************************************************************************************************************************/
html{ font-size:15px; }

/* title */
.content h2 span{ color:rgba(0,0,0,0.6); }

/* pricacy */
.privacy{ display:none; background:rgba(255,255,255,0.95); width:100%; height:100%; padding:30px 20px 50px; position:fixed; top:0; left:0; z-index:1000; overflow-y:scroll; }
.privacy h2 span{ margin:10px 0 0; }
.privacy div{ width:100%; max-width:600px; margin:30px auto 0; font-size:13px; }
.privacy div dl{ margin:30px 0 0;}
.privacy div dl dt{ margin:30px 0 10px; padding:0 0 5px; border-bottom:1px solid rgba(0,0,0,0.1); font-weight:bold; }
.privacy div dl dd ul{ margin:15px 0 0; }
.privacy div dl dd ul li{ padding:0 0 0 1rem; position:relative; }
.privacy div dl dd ul li:before{ content:"・"; position:absolute; top:0; left:0; }
.privacy > a{ display:block; background:rgba(0,0,0,0.8); width:40px; height:40px; padding:10px; position:fixed; top:0; right:0; font-size:0; line-height:0; }
.privacy > a img{ width:20px; }
#privacy .privacy{ display:block; height:auto; position:static; overflow:auto; }
#privacy .privacy div{ max-width:900px; }

/* header */
header{ background:rgba(255, 255, 255, 0.88); width:100%; height:48px; padding:8px 0 0; position:fixed; top:0; left:0; z-index:100; }
header h1{ width:120px; margin:0 auto; }
header > a{ display:block; width:48px; height:48px; padding:19px 0 0 18px; position:absolute; top:0; left:0; line-height:0; }
header > a img{ width:12px }
header > div{ display:none; background:rgba(135,191,18,0.95); width:100%; height:100%; position:fixed; top:48px; left:0; }
header > div nav{ padding:48px 0 0; position:fixed; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
header > div nav ul.menu li a{ display:block; width:100%; font-family:"Marcellus",serif; font-size:1.84rem; color:#fff; text-align:center; } 
header > div nav ul.menu li a span{ display:block; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-size:0.84rem; font-style:normal; color:rgba(255,255,255,0.7); }

header > div nav ul.sns{ display:table; margin:0 auto; overflow:hidden;}
header > div nav ul.sns li{ background:rgba(115,170,0,0.5); width:34px; height:34px; margin:0 8px; float:left; border-radius:50%; }

header > div > a{ width:40px; height:40px; position:fixed; right:0; bottom:0; }
header > div > a img{ width:25px; }

/* content */
.content{ padding:48px 0 0; font-size:13px; }

/* title */
section h2{ font-family:"Marcellus",serif; font-size:30px; font-style:italic; font-weight:normal; line-height:1.3; text-align:center; }
section h2 span{ display:block; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-size:1rem; font-style:normal; color:#aeaeae; }

/* top以外 */
.content h2{ padding:35px 0 30px; color:#fff; }
.content h2 span{ color:rgba(255,255,255,0.6); }
.content h3{ margin:0 0 28px; padding:0 0 12px; border-bottom:2px solid #ededed; font-family:"Marcellus",serif; font-size:23px; font-style:italic; font-weight:normal; line-height:1.8; }
.content h3 span{ display:block; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-size:12px; font-style:normal; color:rgba(0,0,0,0.4); }

/* footer */
footer{ width:100%; height:55px; position:relative; background:#fff; }
footer a{ display:block; width:42px; position:absolute; bottom:-20px; right:18px; transition:bottom 0.3s linear; }
footer p{ font-size:0.66rem; line-height:55px; text-align:center; }

/*************************************************************************************************************************
* 641px以上
*************************************************************************************************************************/
@media print, screen and (min-width:641px){

/* header */
header{ height:60px; padding:5px 0 0; }
header h1{ width:180px; }
header > a{ width:60px; height:60px; padding:22px 0 0 21px; }
header > a img{ width:18px }
header > div{ top:60px; }
header > div nav{ padding:60px 0 0; }
header > div nav ul.menu li a{ font-size:2.2rem; } 
header > div nav ul.menu li a span{ font-size:1rem; }
header > div nav ul.sns li{ width:42px; height:42px; margin:0 12px; }  

/* content */
.content{ padding:60px 0 0; font-size:1rem; }
  
/* title */
section h2{ font-size:50px; }

/* top以外 */
.content h2{ padding:50px 0 45px; }
.content h3{ padding:0; border-bottom:none; font-size:32px; }
.content h3 span{ display:inline; margin:0 0 0 25px; font-size:13px; }

/* footer */
footer{ height:60px; }
footer p{ line-height:60px; }

}

/*************************************************************************************************************************
* 1023 x 470以内
*************************************************************************************************************************/
@media print, screen and (max-width:1023px) and (max-height:470px){
header > div nav{ width:100%; }
header > div nav ul.menu li a { width:50%; float:left; }
}

/*************************************************************************************************************************
* 1024px以上
*************************************************************************************************************************/
@media print, screen and (min-width:1024px){
	
/* header */
header{ height:100px; overflow:hidden; transition:height 0.2s linear; }
header h1{ width:259px; margin:0 0 0 -512px; position:absolute; top:12px; left:50%; transition:width 0.2s linear,top 0.2s linear; }
header > a{ display:none; }
header > div{ display:block !important; background:none; width:612px; margin:0 0 0 -100px; height:auto; position:absolute; top:0; left:50%; }
header > div nav{ padding:0; position:static; -webkit-transform:none; transform:none; overflow:hidden; }

/* content */
.content{ padding:100px 0 0;  }
  
/* footer */
footer{ height:126px; }
footer p{ line-height:126px;}
footer a{ width:53px; transition:bottom 0.3s linear, opacity 0.3s linear; }
footer a:hover{ opacity:0.6;}  
}