@charset "utf-8";
@import "reset.css";

@font-face {
    font-family: YasashisaAntique;  /* フォントにフォント集合名を付ける */
    src: url(/fonts/07YasashisaAntique.otf);  /* フォントのURLを指定する */
}

html {
    width: 100%;
    height: 100%;
}
body {
  font-family: メイリオ, Meiryo, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, Osaka, ＭＳ Ｐゴシック, sans-serif;
  color: #2b2b2b;
  width: 100%;
  height: 100%;
  line-height: 1.6em;
  background-color: #181a1a;
}
body.pc {font-size: 12pt;}
body.mobile{font-size: 30px;}

/* font ************************************************************************ font */
.font-yasashisa{
    font-family: YasashisaAntique, sans-serif;
}
.font-Courgette{
    font-family: 'Courgette', cursive;
}
i{margin-bottom: 20px;}
i span{margin-left: 10px;}

/* layer *********************************************************************** layer */
/* JavaScript用 */
.j-layer-menu{
    width: 100%;
    height: 100%;
    background: rgba( 30,27,22,0.9 );
}
.j-layer-menu .sitemap li{
    line-height: 70px;
}
.j-layer-menu{
    z-index: 51;
    position: absolute;
    top: 0;
    left: 0;
}
/* layer-menu **************************************************** layer-menu */
.layer-menu-header{
    z-index: 50;
    position: fixed;
    width: 100%;
    background-color: #ffffff;
}
.pc .layer-menu-header{height: 60px;}
.tablet .layer-menu-header{height: 80px;}
.mobile .layer-menu-header{height: 80px;}

.layer-main{
    z-index: 0;
    position: absolute;
    left: 0;
    width: 100%;
}
.pc .layer-main{top: 110px;}  /* layer-menu-header + layer-belt */
.tablet .layer-main{top: 160px;}
.mobile .layer-main{top: 160px;}

/* layer-belt **************************************************** layer-belt */
.layer-belt{
    z-index: 50;
    position: fixed;
    width: 100%;
    background-color: #181a1a;
}
.pc .layer-belt{
    top: 60px;  /* layer-menu-header */
    height: 50px;
}
.tablet .layer-belt{
    top: 80px;  /* layer-menu-header */
    height: 80px;
}
.mobile .layer-belt{
    top: 80px;  /* layer-menu-header */
    height: 80px;
}

.arrow{
    color: #ffffff;
    font-weight: bold;
}
.pc .layer-belt .arrow{line-height:50px; font-size:200%; width:48%; text-align:center;}
.tablet .layer-belt .arrow{line-height:80px; font-size: 140%;}
.mobile .layer-belt .arrow{line-height:80px; font-size: 140%;}

/* area ************************************************************************ area */
/* section */
body section:nth-of-type(2n){
    width: 100%;
    background: #f3f3f2;
}
body section{
    width: 100%;
    background-color: #ffffff;
}

.pc section{padding: 20px 0 20px 0;}
.pc section .marker{position:relative; top:-124px;} /* layer-menu-header + section */

.tablet section{padding: 40px 0 80px 0;}
.mobile section{padding: 40px 0 80px 0;}

/* sns */
.sns {padding: 20px 0;}
.sns li{display: inline;}

.pc .sns{text-align: right;}
.tablet .sns{text-align: center;}
.mobile .sns{text-align: center;}

.tablet .sns li{padding: 0 20px;}
.mobile .sns li{padding: 0 20px;}

/* c *************************************************************************** c */
.c{
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.pc .c{width: 1200px;}
.tablet .c{width: 760px;}
.mobile .c{width: 680px;}

/* h *************************************************************************** h */
.c h2{
    font-family: YasashisaAntique, sans-serif;
    
    font-weight: bolder;
    margin-bottom: 20px;
}
.pc .c h2{font-size: 120%;}
.tablet .c h2{font-size: 2rem;}
.mobile .c h2{font-size: 2rem;}

/* title *********************************************************************** title */
.title-site{
    font-family: 'Courgette', cursive;
    
    font-weight: bolder;
    text-align: center;
    margin-bottom: 20px;
}
.pc .title-site{font-size: 200%;}
.tablet .title-site{font-size: 200%; padding-top: 20px;}
.mobile .title-site{font-size: 120%; line-height: 80px;}

/* flex ************************************************************************ flex */
.flex-g-nav{
    display: -webkit-flex;  /* Safari Chrome */
    display: -moz-flex;     /* Firefox */
    display: -ms-flex;      /* InternetExplorer */
    display: -o-flex;       /* Opera */
    display: flex;          /* ベンダーフレックスなし */
    
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-between;
    
    height: 60px; /* layer-menu-header */
    line-height: 60px;
}
.flex-g-nav li:first-child{
    margin-right: auto;
}
.pc .flex-g-nav li{margin-left: 20px;}
.pc .flex-g-nav li:first-child{margin-left: 0;}
.pc .flex-g-nav li:first-child img{vertical-align:middle;}

/* header_m.tpl */
.flex-right{
    display: -webkit-flex;  /* Safari Chrome */
    display: -moz-flex;     /* Firefox */
    display: -ms-flex;      /* InternetExplorer */
    display: -o-flex;       /* Opera */
    display: flex;          /* ベンダーフレックスなし */
    
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: flex-end;
}

/* 個別ページ */
.flex-between{
    display: -webkit-flex;  /* Safari Chrome */
    display: -moz-flex;     /* Firefox */
    display: -ms-flex;      /* InternetExplorer */
    display: -o-flex;       /* Opera */
    display: flex;          /* ベンダーフレックスなし */
    
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-between;
}

/* card ************************************************************************ card */
/* 02 */
.pc .card2{width: 46%;}
.tablet .card2{width: 100%;}
.mobile .card2{width: 100%;}
/* aside */
.pc aside .card2{margin-bottom: 40px;}
.tablet aside .card2{margin-bottom: 40px;}
.mobile aside .card2{margin-bottom: 40px;}

.pc aside .card2 i{margin-right: 1em;}
.tablet aside .card2 i{margin-right: 1em;}
.mobile aside .card2 i{margin-right: 1em;}

/* img ************************************************************************* img */
.pc .lineup img{
    width: 100%;
    vertical-align: top;
}
.tablet .lineup img{width: 100%;}
.mobile .lineup img{width: 100%;}

.rounded-corner img{
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
.pc .img-main{
    margin-bottom: 40px;
    height: 675px;
}
.tablet .c img{width: 760px;}
.mobile .c img{width: 680px;}

/* Link ************************************************************************ Link */
a:link{
    color: #2b2b2b;
    text-decoration: none;
}
a:visited{
    color: #2b2b2b;
    text-decoration: none;
}
a:hover{
    color: #b7282e;
    text-decoration: none;
}
/* white ***************************** white */
.white a:link{
    color: #ffffff;
    text-decoration: none;
}
.white a:visited{
    color: #ffffff;
    text-decoration: none;
}
.white a:hover{
    color: #b7282e;
    text-decoration: none;
}
/* button ********************************************************************** button */
/* button-menu ** header_m.tpl ********************************** button-menu */
.button-menu{
    height: 80px;
    line-height: 80px;
}
a.button-menu{
    height: 80px;
    line-height: 80px;
    display: inline-block;
    padding: 0 10px;
    background-color: #b7282e;
    
    font-size: 120%;
    font-weight: bold;
}
a:link.button-menu{
    color: #ffffff;
    text-decoration: none;
}
a:visited.button-menu{
    color: #ffffff;
    text-decoration: none;
}
a:hover.button-menu{
    color: #ffffff;
    text-decoration: none;
    background-color: #ca2d34;
}
/* button-link ** header_m.tpl ********************************** button-link */
.button-link li {
    background-color: #2b2b2b;
    background-position: 4px center;
    border: 1px solid #181a1a;
    border-radius: 4px;
    width: 100%;
    font-family: YasashisaAntique, sans-serif;
     margin-bottom: 20px;
}
.button-link a {
    display: block;
    font-size: 120%;
    font-weight: bold;
    padding: 20px 0;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
.button-link a:link{
    color: #ffffff;
    text-decoration: none;
}
.button-link a:visited{
    color: #ffffff;
    text-decoration: none;
}
.button-link a:hover{
    color: #b7282e;
    text-decoration: none;
}
.pc .button-link .font-Courgette{font-size: 160%;}
.tablet .button-link .font-Courgette{font-size: 160%;}
.mobile .button-link .font-Courgette{font-size: 3rem;}


/* up  ************************************************************************* up*/
.goup{
    position:fixed;
    right:20px;
    bottom:20px;
    width:80px;
    height:80px;
}