@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}
*{ box-sizing: border-box;}
/* =============================================
                    COMMON
============================================= */
html,body{ height: 100%;}
body{
color: #000;
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
font-size: 1.0rem;
line-height: 2.0;
-webkit-text-size-adjust: 100%;
}
/*  Anchor  */
a{ color: #000; text-decoration: none;}
a:hover{ text-decoration: none;}
a:link{ color: #000;}
a:visited{ color: #000;}
a:active{ color: #000;}
/*  Base  */
.hide{ display: none;}
#contents{ text-align: center;}
#top h1{ position: relative; text-indent: -9999px;}
#top h1 span{ position: absolute; left: 0; top: 0; width: 100%;}
#top h1 .before{ background: url(./img/logoB.svg) center center no-repeat; display: block;}
#top h1 .after{ background: url(./img/logoA.svg) center center no-repeat; display: none;}
#top .btn{ border: 3px solid #000; border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; margin: 0 auto;}
#top .btn a{ font-weight: bold; color: #000; line-height: 50px; transition: all .5s ease; z-index: 2; position: relative; display: block;}
#top #menu{ background: url(./img/menu.png) center top no-repeat; background-size: 100%; width: 50px; height: 50px; position: fixed; top: 20px; right: 20px; text-indent: -9999px; z-index: 100; cursor: pointer;}
#top #menu.ac{ background-position: center bottom;}
#top .profile{ background: #000; color: #fff; width: 100%; height: 100%; position: fixed; left: 0; right: 0; top: 0; z-index: 50; display: none;}
#top .profile img{ width: 100%;}
#top .profile .img{ width: 200px; margin: 0 auto;}
#top .profile p span{ font-size: 60%; color: #777; vertical-align: 0;}
#top .profile ul{ margin-top: 20px;}
#top .profile ul li{ display: inline-block; margin: 0 5px; width: 50px;}
#price .table-box table{ width: 100%; line-height: 1.4;}
#price .table-box table th{ background: #eee; border: 1px solid #ccc; width: 30%; padding: 15px; text-align: left; vertical-align: top;}
#price .table-box table td{ border: 1px solid #ccc; padding: 15px; text-align: left; vertical-align: middle;}
#price .table-box .notes{ text-align: right;}

footer small{ font-size: 0.8rem;}
/* =============================================
                    PC
============================================= */
@media screen and (min-width: 768px){
#contents{ padding-top: 6%;}
#top h1{ height: 450px; margin-bottom: 10px;}
#top h1 .before{ height: 450px;}
#top h1 .after{ height: 450px;}
#top .copy{ letter-spacing: 0.4rem; margin-left: 0.4rem; margin-bottom: 30px;}
#top .btn{ width: 330px;}
#top .eff{ width: 330px; height: 50px; bottom: -50px; background: #000; position: absolute; transition: all .5s ease; z-index: 1;}
#top .btn:hover .eff{ bottom:0;}
#top .btn:hover a{ color:#fff;}
#top .profile{ padding-top: 12%;}
#top .profile h2{ font-size: 1.4rem; margin: 10px 0 0;}
#top .profile p{ font-size: 0.8rem;}
#price #logo{ margin-bottom: 10px;}
#price h1{ font-size: 1.4rem; margin-bottom: 20px;}
#price .table-box{ width: 80%; margin: 0 auto;}
#price .table-box table td ul{ line-height: 1.8; margin-top: 5px;}
#price .table-box table td ul li{ font-size: 0.8rem;}
#price .table-box .notes{ font-size: 0.8rem;}

footer{ padding: 40px 0;}
}
/* =============================================
                    SP
============================================= */
@media screen and (max-width:768px){
#contents{ padding-top: 10%;}
#top h1{ height: 340px; margin-bottom: 1%;}
#top h1 .before{ height: 340px;}
#top h1 .after{ height: 340px;}
#top .copy{ letter-spacing: 0.14rem; margin-left: 0.14rem; margin-bottom: 4%;}
#top .btn{ width: 250px;}
#top .eff{ width: 250px;}
#top .profile{ padding-top: 12%;}
#top .profile h2{ font-size: 1.3rem; margin: 10px 0 5px;}
#top .profile p{ font-size: 0.7rem;}
footer{ padding: 6% 0;}
#price #logo{ width: 70%; margin: 0 auto;}
#price #logo img{ width: 100%;}
#price h1{ font-size: 1.2rem; margin-bottom: 10px;}
#price .table-box{ margin: 0 auto;}
#price .table-box table{ font-size: 0.8rem;}
#price .table-box table th br{ display: none;}
#price .table-box table td ul{ line-height: 1.8; margin-top: 5px;}
#price .table-box table td ul li{ font-size: 0.6rem;}
#price .table-box .notes{ font-size: 0.6rem;}
#price #contents{ padding: 10% 4% 0 4%;}

}