@charset "utf-8";
/* common------------------------*/
body{ background:#000; color:#FFF; }
#wrapper{ width:100%; position:relative; overflow:hidden; }
.inner{ max-width:1100px; margin:0 auto; padding:0 20px; }
main{ position:relative; display:block; }
img[src$=".svg"]{ height:100%; }
a:hover{ text-decoration:none; }
.tel a{ text-decoration:none; color:#b73019; }

::selection { background:#CCC; }
::-moz-selection { background:#CCC; }

.title{ font-size:1.4em; line-height:1.2; }
.sub{ font-size:1.1em; }
.title_line{ position:relative; margin-bottom:2em; padding-left:1.3em; font-size:1.4em; font-weight:500; }
.title_line::before{ position:absolute; content:""; width:0.3em; height:100%;
  left:-0.1em; top:0; background:#a0001a; }
.title_line .gf-roboto{ margin-left:1em; font-size:0.95em; color:#888888; }
.t_info tr > * { padding:1em 1em; border-bottom:#333 solid 2px; }
.t_info th { font-weight:300; background:#444; }
.t_info tbody th { text-align:left; }
.t_info td { text-align:right; }
.title_pa{ position:relative; margin-bottom:5em; text-align:center; }
.title_pa::before{ position:absolute; content:""; width:35%; height:14px;
  left:0; top:50%; background:url(../img/pattern01.png) 0 0 / 340px; }
.title_pa::after{ position:absolute; content:""; width:35%; height:14px;
  right:0; top:50%; background:url(../img/pattern01.png)0 0 / 340px; }
.title_pa .title{ display:inline-block; padding:1em 2.5em 0;
  font-size:1.9em; font-weight:400; letter-spacing:0.1em; }
.title_pa .title span{ margin-left:1em; font-size:0.6em; text-transform:capitalize;
  color:#888888; letter-spacing:0.06em; }
.t_col{ padding:0.7em 1em; font-size: 1.1em; line-height: 1.4; background:#222; }
.t_b{ margin-bottom:1em; padding:0.3em 0 0.3em 1em; font-size: 1.1em; line-height: 1.4; border-left:5px solid #333; }

.btn_red{ position:relative; margin:2em auto; text-align:center; }
.btn_red a{ position:relative; z-index:1; display:inline-block; padding:0.4em 4em; color:#FFF; text-decoration:none;
  font-size:1.2em; background:#a0001a; box-shadow: 6px 6px #000; }
.btn_red a::before{ position:absolute; z-index:2; content:""; width:1em; padding-top:50%; right:1.5em; top:38%;
  background:url(../img/icon_arrow.svg) no-repeat 0 0 / contain; }
.btn_red a::after{ position:absolute; content:""; z-index:1; width:15%; height:100%;
  right:0; top:0; background:url(../img/pat_r.png) repeat 0 0 / 250px; }
.btn_red a:hover{ color:#FFF; background:#8c0017; box-shadow:none; }
.btn_red.btn_booking{ margin:3em auto; font-size:1.3em }

.btn_insta{ display:inline-block; margin:0 auto 2em; padding:0.7em 1.8em 0.4em; background:#000; }
.btn_insta:hover{ background:#8c0017; }
.btn_insta img{ width:180px; }
.bg_gr{ background:#272727; }
/*.beauty{ margin-top:1.7em; padding-bottom:0.2em; font-size:1.75em;
  color:#ca0021; border-bottom:3px solid #ca0021; }*/
.d_data{ display:-webkit-flex; display:flex; }
.d_data > *{ display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; 
  -webkit-box-align: center; align-items: center;
  margin:0.5%; padding:0.5em; text-align:center; border:1px solid #EEE; }
.d_data dt{ width:40%; }
.d_data dd{ -webkit-box-flex:1; flex:1; }

/* header------------------------*/
header{ position:relative; z-index:100; width:100%; background-color:rgba(0,0,0,0.8); }
header::before{ position:absolute; content:""; left:0; top:0; width:100%; height:8px;
  background:url(../img/pattern01.png) repeat-x 0 -7px / 300px; }
header .logo{ position:relative; z-index:999; width:300px; float:left; padding:0.5em 0 0.5em 5%; }
header .logo img{ height:auto; }
#gmenu{ display:none; }
#gnav{ position:relative; float:right; padding:2em 1em 0 0; }
#gnav li{ position:relative; margin:0 1em; }
#gnav li a{ display:block; position:relative; padding:0.4em 0.5em; text-decoration:none; 
	font-size:0.9em; line-height:1.2; color:#FFF; }
#gnav li a::before{ content:''; position:absolute; bottom:-0.5em; left:0; width:0; height:1px; 
  background-color:#FFF; -webkit-transition:all .3s; transition:all .3s ease; }
#gnav li a:hover:before { width: 100%; }
#gnav li span{ display:block; color:#CCC; }
#gnav .g_reservation a, #gnav .g_reservation a span/*, 
#gnav .g_contact a, #gnav .g_contact a span*/{ color:#FFF; background:#b2001d; }
#gnav .g_reservation a:hover{ color:#FFF; }

/* instructor */
.instructor{ position:relative; padding-bottom:8em; }
.instructor::before{ position:absolute; content:""; width:360px; padding-top:50%;
  z-index:-1; top:30%; right:0; opacity: 0.7;
  background:url(../img/pattern01.png) no-repeat 0 0 / contain; }
.instructor .inner{ width:60%; margin:0 auto; }
.instructor .txt{ flex:1; font-size:0.95em; line-height:2.0; }
.instructor .sub{ margin:0.5em 0 1.5em; font-size:1.7em; font-weight:400; }
.instructor .sub span{ margin-left:1em; font-size:0.9em; color:#888888; }
.instructor .pic{ width:35%; margin-right:5em; }
.instructor .btn_red{ margin-top:3.5em; }

/* lesson */
.lesson{ margin-bottom: 2.5em; padding:3em 0 4em; }
.lesson .con{ padding-left:6em; font-size:0.95em;
  background:url(../img/icon_line.svg) repeat-y 0 0 / 1em; }
.lead_tx .sub.mincho{ margin-bottom:1.5em; text-align:center; font-size:1.5em; }
.lesson .classes{ margin-top:2.5em; }
.lesson .classes li{ display:inline-block; position:relative; margin:0.5em 0.5em; 
  padding:1em 1em 1em 2.5em; border:1px solid #909090; }
.lesson .classes li::before{ position:absolute; content:""; width:1.8em; padding-top:50%;
  top:0.3em; left:0.2em; background:url(../img/icon_feather2.svg) no-repeat 0 0 / contain; }
.lesson .toe{ position:relative; width:90%; margin:6em auto 2em; padding:2em 1.5em; 
  border:1px solid #909090; }
.lesson .toe::before{ position:absolute; content:""; width:2.4em; padding-top:50%;
  top:-4em; left:50%; margin-left:-1.2em; background:url(../img/icon_plus.svg) no-repeat 0 0 / contain; }
.lesson .toe .sub{ position:relative; width:35%; padding:1em 0 0 2.4em; font-size:1.4em; }
.lesson .toe .sub::before{ position:absolute; content:""; width:1.8em; padding-top:50%; top:0.5em; left:0;
   background:url(../img/icon_toe.png) no-repeat 0 0 / contain; }

/* room */
.room{ padding:3em 0 5em; }
.room .tbox{ width:70%; margin:0 auto 2em; }
.room .tbox p{ margin:0.5em 0; }
.room .tbox .title{ font-size:2.0em; font-weight:400; }
.room .tbox .title span{ margin-left:1em; font-size:0.6em; }
.room .tbox .btn_insta{ margin: 0 2em 2em 0; border:1px solid #999; }
.room .map{ width:100%; height:25em; border:0; }

/* footer */
footer{ position:relative; margin-top: 3em; padding:5em 0 1em; }
footer .logo{ position: relative; width:10em; margin:-7em auto 3em; }
footer::before{ position:absolute; content:""; width:100%; height:32px; top:3em; left:0;
  background:url(../img/pattern01.png) 0 0 / 340px; }
footer .gnav{ margin-bottom:3em; }
footer .gnav li{ position:relative; margin:0 1em; }
footer .gnav li a{ display:block; position:relative; padding:0.4em 0.5em; text-decoration:none; 
  font-size:0.9em; line-height:1.2; color:#FFF; }
footer .gnav li a::before{ content:''; position:absolute; bottom:-0.5em; left:0; width:0; height:1px; 
  background-color: #CCC; -webkit-transition:all .3s; transition:all .3s ease; }
footer .gnav li a:hover { color:#FFF; }
footer .gnav li a:hover:before { width: 100%; }
footer .gnav li span{ display:block; color:#898989; }
footer .gnav .g_reservation a, #gnav .g_reservation a span{ color:#FFF; background:#b2001d; }
footer .gnav .g_reservation a:hover, footer .gnav li.g_reservation span{ color:#FFF; }
footer .tbox{ margin:0 auto 2em; }
footer .tbox .title{ margin-right:3em; font-size:1.5em; }
footer .tbox .title span{ margin-left:1.5em; font-size:0.7em; }
footer .tbox p{ margin:0; font-size:0.95em; }
.copyright{ text-align:center; font-size:0.85em; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 960以上(PC) */
@media screen and (min-width: 960px) { 
  header{ position:fixed; }
  .t_col{ font-size: 1.3em; }
}

/*1290px 以下  */
@media screen and (max-width: 1290px) {
  header .logo{ width:250px; padding-left:2%; }
  #gnav li{ margin: 0 0.5em; }
}

/*1190px 以下  */
@media screen and (max-width: 1190px) {
  header{ padding:0 0 0.5em; }
  header .logo{ float:none; width:200px; margin:0 auto; padding:1em 0; }
  #gnav{ width:100%; float:none; padding:0; }
  #gnav ul{ margin:0 auto; }

  /* instructor */
  .instructor .inner{ width: 90%; }
}

/*959px 以下  760px-959px */
@media screen and (max-width: 959px) {
  body{ font-size: 0.9em; }
  header::before{ background-size:250px; }
	
	/* gnav */
  #gmenu{ display:block; }
  .c_menu{ width:70px; height:70px; position:fixed; top:20px; right:20px; padding:15px 0; 
  	font-size:1.05em; font-weight:700;
    border-radius:50%; border:2px solid #b2001d;
    text-align:center; text-decoration:none; color:#FFF; background:#b2001d;
    cursor: pointer; z-index: 600; transition:all .3s; }
  .c_menu::before{ position:absolute; content:""; width:6px; height:6px; top:45px; left:50%; margin-left:-4px;
    border-top: 4px solid #b2001d; border-right: 4px solid #b2001d;
    -webkit-transform: rotate(135deg); transform: rotate(135deg); }
  .c_menu span{ display:block; letter-spacing:0.08em }
  .c_menu span:after{ content: attr(data-txt-menu); }
  .c_menu:hover{ color:#FFF; background:#b2001d; }
  .c_menu:hover::before{ border-color:#b2001d; }
  .open .c_menu span:after { content: attr(data-txt-close); }
  /* 開閉用ボタンがクリックされた時のスタイル */
  .open .g_nav { cursor: url(../img/svg/close.svg),auto; -webkit-transition: all .5s; transition: all .5s;
      visibility: visible; opacity: 1; }
  .open .c_menu::before{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* g_nav　モーダルメニュー　 */
  .g_nav { display: flex; flex-direction: column; justify-content: center; align-items: center;
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background:rgba(0,0,0,0.95); -webkit-transition: all .5s; transition: all .5s;
      visibility: hidden; opacity: 0; z-index:500; }
  #gnav{ width:100%; position: fixed; }
  #gnav ul{ width:90%; }
  #gnav li{ width:100%; border-bottom:1px solid #b2001d; }
  #gnav li:last-child{ border:0; }
  #gnav li.g_news{ display:block; }
  #gnav li a{ padding:1.2em; }
  #gnav li a:before{ content:none; }

  .title_pa{ margin-bottom: 3em; }
  .title_pa::before, .title_pa::after{ width: 30%; background-size:200px; }
  .title_pa .title{ font-size: 1.5em; }
  /*.beauty{ font-size: 1.5em; }*/

  footer .logo{ width: 8em; }
  footer .gnav li{ margin-bottom:1em; }
  footer .tbox .title{ margin-right:0; }

  /* instructor */
  .instructor{ padding-bottom: 4em; }
  .instructor .inner{ width:100%; margin:0 auto; }
  .instructor .pic{ margin-right: 3em; }
  .instructor .sub{ font-size: 1.4em; }

  /* lesson */
  .lead_tx .sub.mincho{ font-size: 1.3em; }
  .lesson .toe .sub{ width: auto; margin: 0 auto; }

  /* room */
  .room .tbox .btn_insta{ margin: 0 auto 1.5em; }

}

/*759px 以下  600px-759px */
@media screen and (max-width: 759px) { 
  .inner{ padding: 0 15px; }
  .btn_red a{ padding: 0.4em 3em; }
  .btn_red.btn_booking{ margin: 2em auto; font-size: 1.15em; }
  .title_pa{ margin-bottom:2em; }
  .title_pa::before, .title_pa::after{ width: 20%; }

  /* instructor */
  .instructor .pic{ width: 50%; margin:0 auto 2em; }
  .instructor .txt{ flex:auto; }

  /* lesson */
  .lesson .con{ padding-left: 3em; }
  .lesson .classes li{ padding: 0.5em 0.5em 0.5em 2.0em; }
  .lesson .classes li::before{ width: 1.4em; }
  .lesson .toe{ padding: 0.8em 1.2em; }

  /* lesson */
  .room .tbox{ width: 90%; }
  
}

/*599px 以下*/
@media screen and (max-width: 599px){
  header .logo{ width: 150px; }
  .c_menu{ width: 55px; height: 55px; top: 8px; font-size: 0.9em; }
  .c_menu::before{ top: 37px; border-width:2px; }
  #gnav li a{ padding:1em; }
  .title_pa::before, .title_pa::after{ height: 10px; }

  /* instructor */
  .instructor{ padding-bottom: 2em; }

  /* lesson */
  .lesson{ padding: 3em 0 1em; }
  .lesson .con{ padding-left: 1.5em; background-size:0.7em; }
  .lead_tx .sub.mincho{ font-size: 1.1em; }

  /* room */
  .room{ padding: 2em 0; }

  footer{ padding-top:1em; }
  footer::before{ height: 15px; background-size:250px; }
  footer .logo{ width: 6em; margin:-2em auto 2em; }

}