@charset "utf-8";

/* base ------------------------*/
main {
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
    animation: fadeIn 4s ease 0s 1 normal;
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.en { font-family:linotype-sabon, sans-serif; font-weight: 400; font-style: normal;}

#wrapper { position:relative; }
#wrapper > section { padding: 80px 0; }
.inner { max-width: 1000px; margin: 0 auto; }

/*ローディング*/
#loading { position:fixed; top:0; bottom:0; left:0; right:0; z-index:99999; width:100%; height:100%;
  background:#fff; }
#loading .load_box { position:absolute; top:0; bottom:0; left:0; right:0; width:200px; height:160px; margin:auto; text-align:center; }
#loading .load_box .logo { margin-bottom:1.5em; }
.loader { position:relative; display:inline-block; width:.8em; height:.5em; margin-right:.4em; font-size:2em; }

/* header ------------------------*/
#header { position: relative; top: 0 ; right: 0; left: 0;
    width: 100%;padding: 40px;
    background: rgba(255, 255, 255, .3);
    z-index: 10;}
#header .sitename { float: left; }
#header.scroll { position: fixed; background: rgba(255, 255, 255, .9)!important; transition: .2s;  }

/* gnav ------------------------*/
#gnav { float: right; margin-top: 3px; }
#gnav li:not(:last-child) { margin-right: 1em; }
#gnav li:not(:last-child) a { position: relative; display: inline-block; font-size: 15px; }
#gnav li:not(:last-child) a::after { content: ''; position: absolute;bottom: -4px; left: 0;
  width: 100%; height: 1px;
  background: #d9a72f;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s; }
#gnav li:not(:last-child) a:hover::after { transform: scale(1, 1); }

.btn_online a { padding: .1em 1em .2em; background:#d9a72f;color: #fff; }
.btn_online a:hover { background:#fff; color: #d9a72f; }


/* online ------------------------*/
.online {padding: 100px 30px;}
.online a { display: block;}
.online .small {font-size: 14px;}
.online .ttl { padding: .8em 1em; width: 48%; margin-right: 0; text-align: left; background: #242424; color: #fff; font-size: 22px; }
.online .inner > span { display: block; position: relative; }
.online .inner > span::after { content: ""; position: absolute; right: 30px; top: 50%;
    transform: translate(0, -50%); -webkit-transform: translate(0, -50%);
    background: url("../img/arrow_w.png") no-repeat; width: 36px; height: 6px; }
.online .ttl .en { color: #aa944a; }
.online a:hover { transition: .3s; opacity: .7; }

.online p:last-child {letter-spacing: .05em; line-height: 1.3em;}
.online p:last-child .en {margin-top: .7em;}
/* footer ------------------------*/
#footer { background: #000 url(../img/bg_footer.png) no-repeat bottom /100%; }
#footer .inner { padding-top: 30px; }
#footer .f_logo { float: left; }
#f_gnav { float: right; width: 50%; margin-right: 0; margin-left: auto; margin-bottom: 30px;}
#f_gnav > ul { width: 30%; }
#f_gnav > ul:nth-child(2){width: 37%;}
#f_gnav li a { color: #fff; font-size: 14px; }
#f_gnav .nav_works      { padding-left: 1em; }
#f_gnav .nav_works li a { position: relative; padding-left: 1em; }
#f_gnav .nav_works li a::before { content: ""; position: absolute; top: 13px; left: 0; height: 1px; width: 3px; background: #fff; }

#footer .sns_box{padding: 10px;}
#footer .sns_box a+a{padding-left: 6%;}

.copyright { margin:0; padding:1em 0; font-size:.75em; border-top:1px solid rgba(255,255,255,.7); text-align:right; color: #fff; }
.copyright a { color: #fff; }
.copyright a:hover,#f_gnav li a:hover { color:#aa944a; }

/* 固定バナー */
.flo-bnr-list { position:fixed; z-index:5; bottom:2.2em; right:0; margin:0; }

/*縦書き*/
.writing-rl { writing-mode: vertical-rl; text-orientation: upright; }

/* title */
/*縦書きタイトル*/
.title { text-align: center; }
.title .ttl { position: relative; display: inline-block; font-size: 22px; }
.title .ttl span { text-orientation: upright;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
     writing-mode: vertical-rl;
}
.title .en { margin: 0; font-size: 14px; color: #aa944a; letter-spacing: 1px; }
/*横書きタイトル*/
.ttl { font-size: 26px; margin-bottom: 40px; }
.ttl .en { display: block; font-size: 14px; color: #fff; letter-spacing: 1px; }

/* button */
.btnBox { margin-top: 30px; }
.button { position:relative; padding:.6em 3.2em .6em 3em; display:inline-block;
    overflow:hidden; z-index:2;
    min-width:260px; text-align:center;
    background: #d74040; color: #fff;}
.button::before { content:""; position: absolute; top: 50%; right: 20px;
    transform: translate(0, -50%); -webkit-transform: translate(0, -50%);
    background: url("../img/arrow_w.png") no-repeat; width: 32px; height: 6px; }
.button:hover { color: #fff; opacity: .7; }

.button_w { position:relative; padding:.6em 3.2em .6em 3em; display:inline-block;
    overflow:hidden; z-index:2;
    min-width:260px; text-align:center;
    background: #fff; color: #000;}
.button_w::before { content:""; position: absolute; top: 50%; right: 20px;
    transform: translate(0, -50%); -webkit-transform: translate(0, -50%);
    background: url("../img/arrow.png") no-repeat; width: 32px; height: 6px; }

/* table */
.conTbl { width: 100%; border-top: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5; }
.conTbl>tbody>tr:not(:first-child) { border-top: 1px solid #c5c5c5; }
.conTbl>tbody>tr>th { width: 19.56044%; padding: 1.25em 1.1875em 0.9375em; background: #fdfaf3; }
.conTbl>tbody>tr>td { padding: 1.25em 1.1875em 0.9375em; }


/* ================================================================
  レスポンシブ
=================================================================== */

@media screen and (min-width: 1500px) {
.online { background:#131313 url("../img/bg_online.png") no-repeat 30% 100%; }
}

@media screen and (max-width: 1499px) {
  .online { background:#131313 url("../img/bg_online.png") no-repeat left bottom; }
}


/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

}

/* 960以上(PC) */
@media screen and (min-width: 960px) {
  .menu-button { display:none; }
}

/* 1024以下(PC) */
@media screen and (max-width: 1024px) {
  #header { padding: 20px 10px; }
  #gnav li:not(:last-child) { margin-right: 10px; }
  #gnav li:not(:last-child) a { font-size: 14px; }
  .btn_online a { padding: .1em 15px .2em; font-size: 15px; }

}

@media screen and (max-width: 999px) {
  .inner { margin: 0 3%; }
}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 959px) {
  body { font-size:15px; }

  /* header ------------------------ */
  #header { padding: 10px 20px; }

  /* gnav ------------------------ */
  #gnav { position:fixed; float: none; z-index:1000; top:0; right:0; width:300px; height:100%; overflow-y:auto;
    margin-top: 0; padding:25px; padding-top:80px; background:#fff;
   -webkit-transition:all .3s ease-in; transition:all .3s ease-in;
   -webkit-transform:translate(300px); transform:translate(300px);
   -webkit-overflow-scrolling:touch; }
  #gnav.open { -webkit-transform:translate(0); transform:translate(0); }

  #gnav ul { display: block; }
  #gnav li:not(:last-child) { display: block; padding: 10px; margin-right:0; border-bottom: 1px solid #f3f3f3; }
  #gnav li:not(:last-child) a { display: block;}

  .btn_online a { display: block; margin-top: 20px; padding: 10px; text-align: center; font-size: 17px; }

  .overlay { position:fixed; z-index:999; top:0; right:0; bottom:0; left:0;display:none;
    width:100%; height:100%; background:rgba(0, 0, 0, .5);  }

  /* menuボタン */
  .menu-button { position:relative; z-index:9999; float:right;}
  .menu-button,
  .menu-button span { display:block; transition:all .5s; -webkit-transition:all .5s; box-sizing:border-box; }
  .menu-button .h_menu { position:relative; width:30px; height:20px; margin:0 auto; }
  .menu-button span { position:absolute; left:0; width:100%; height:1px; background-color:#1e2024; }

  .menu-button span:nth-of-type(1) { top: 0; }
  .menu-button span:nth-of-type(2) { top: 9px; }
  .menu-button span:nth-of-type(3) { bottom: 0; }

  .menu-button.open span:nth-of-type(1) {
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
  }
  .menu-button.open span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-button.open span:nth-of-type(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
  }
  .menu-button .label { width:auto; height:auto; margin:0 0 5px; color:#1e2024;
    text-align:center; line-height:1; font-size:11px; }

  /* footer ------------------------ */
  .online .ttl { width: 60%;margin-bottom: 0;}
  .online a:first-child {margin-bottom: 10px;}

  #footer .f_logo { float: none; text-align: center; }
  #f_gnav { float: none; width: auto; margin: 30px; }

  @media screen and (min-width: 600px){
  /* 固定バナー */
  .flo-bnr-list { width:120px; }
  }
}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
/*  body { font-size:14px; }*/
  .wide_inner,
  .inner, .narrow { margin: 0 15px; }
  #wrapper > section { padding: 40px 0; }

  /* header------------------------*/
  #header { padding:10px 10px 15px; }
  #header .sitename { margin-top: 6px; }

  /* footer------------------------*/

  /* 固定バナー */
  .flo-bnr-list.sp {
    width:100%; bottom:0;
    > li.youtube { width: 50%; }
  }

  .online {padding: 40px 11px; background: #131313 url(../img/bg_online.png) no-repeat left bottom/100%; }
  /* .online a { padding: 60px 0; } */
  .online .ttl { width: 100%; margin-bottom: 0; font-size: 17px; background: rgba(36, 36, 36, 0.8);}
  .online .inner > span::after { right: 10px; }

  #f_gnav { margin: 30px 20px;}
  #f_gnav > ul { width: 100%; }
  #f_gnav > ul:nth-child(2){width: 100%;}
  #f_gnav > ul > li { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }

  #footer { padding-bottom:5em; }
  #footer .sns_box {border-bottom: 0;  margin-bottom: 0;  text-align: right; }
  #footer .sns_box a+a{padding-left: 2%;}

  /* title */
  .title .ttl { display: block; margin-bottom: 0; }
  .title .ttl span { writing-mode:inherit; text-orientation: inherit; }

  .ttl {  margin-bottom: .8em; text-align: center; font-size: 22px; }

  /* button */
  .btnBox { margin-top: 20px; }

  /* table */
  .conTbl,.conTbl>tbody>tr:not(:first-child) { border: none; }
  .conTbl>tbody>tr>th { display: block; width: 100%; padding: .5em; }
  .conTbl>tbody>tr>td { display: block; width: 100%; padding: .6em 1em 1em; }

}