@charset "utf-8";
/*
Theme Name: Asairo Design
Author: asairo desgin
Author URI: https://asairo.com
Description: 浅色デザインのスタイルテーマ
Version: 2018．12.04
Text Domain: asairo-design
*/



/*--------------------------------------------------
  メインスタイル開始
--------------------------------------------------*/
/*--------------------------------------------------
                全サイズの基盤スタイル
--------------------------------------------------*/

  main { position: relative; z-index: 1; overflow: hidden; }
  .wrap { padding: 0 0%; margin: 0 auto 0; width: 100%; max-width: 1068px; }




  /*--------------------------------------------------
  ヘッダー
  --------------------------------------------------*/
header { position: relative; z-index: 10; }
header .block { position: fixed; display: flex; margin: 25px 0 0 40px; z-index: 11; }
header .block .logo { margin-right: 50px; }
header .block .header_tel {  }

/* レスポンシブメニュー */
header img{ width:100%; }

/*ロゴの大きさを調整*/
header nav{ width: 100%; height: 70px; position: absolute; z-index: 10; }
header .drawer{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: relative; height: 70px; padding: 0 1em; }


/*OPEN時の動き*/
header .menu.open { display: block; position: fixed; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.8);
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*メニューを元の位置へ戻す*/
    -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;    /*変化の速度を指定*/
    transition: .35s ease-in-out;     /*変化の速度を指定*/
}

header .menu.open ul { display: flex; flex-direction: row-reverse;  list-style: none; margin: 168px 175px 0 0; padding: 1em 0; }

/*トグルボタンのスタイルを指定*/
header .Toggle {
    display: flex; justify-content: center; flex-wrap: wrap; background: rgba(255,255,255,0.84); border: 1px solid #707070; width: 50px; height: 50px; cursor: pointer; z-index: 3; top: 12px; right: 12px;
    position: fixed;    /* bodyに対しての絶対位置指定 */
}
header .Toggle span {
    display: block; position: absolute; width: 32px; border-bottom: solid 1px #333;
    -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;    /*変化の速度を指定*/
    transition: .35s ease-in-out;     /*変化の速度を指定*/
}
header .Toggle .text { position: absolute; bottom: 0; font-size: 90%; }

 /*各ボーダー少しずつずらす*/
header .Toggle span:nth-child(1) { top: 13px; top: 22%; }
header .Toggle span:nth-child(2) { top: 21px; top: 36%; }
header .Toggle span:nth-child(3) { top: 29px; top: 50%; }
header .Toggle.active span:nth-child(1) {
    top: 18px;
/* 1番目のspanをマイナス45度に */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
header .Toggle.active span:nth-child(2),
header .Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}


header .Toggle.active span { border-color: #fff; }
/*ナビゲーション部分*/
header .menu {
  display: none;
  text-align:center;
  transition: 0.5s ease;/*滑らかに表示*/
  -webkit-transform: translateX(100%);/*画面より100%外へ押し出し非表示にさせる*/
/*  transform: translateX(-100%);/*右から出す場合は、マイナス100%としてください*/
}
header .menu ul li {  }
header .menu ul li a::before { content: '―'; margin-bottom: 1em; }
header .menu ul li a { display:block; margin: 0 30px; text-shadow: none; font-size: 2.2rem; padding: 0 0 2.5vw; letter-spacing: 3px; font-weight:bold; color: #fff; text-decoration:none;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl; }
header .menu ul li a:hover { background-color:rgba(0,0,0,0.5); color:orange; }

header .menu ul li:last-of-type a { border: none; }
header .menu ul li.white {  }
header .menu ul li.white a { background: #fff; color: #000; min-height: 15em; display: inline-flex; align-items: flex-start; }
header .menu ul li.white a::before { color: #fff; }
header .Toggle.active { background: transparent; border: none; }
header .Toggle.active .text { display: none; }

.pcmenu_sns{ margin-right: 50px;}

.pcmenu_sns .li{ margin-bottom: 50px;}


/*----------------------------------ここからPCモニターの記述-----------*/
@media screen and (min-width: 600px) {

}



  /*--------------------------------------------------
  フッター
  --------------------------------------------------*/
  footer#footer { position: relative; background: url(img/footer_back.png) no-repeat; width: 100%; height: ; background-size: cover; background-position: center top; color: #fff; padding: 130px 0 15px; }
  footer h2 { width: 231px; margin: 0 auto 60px; }
  footer .inner {  }
  footer .inner dl { text-align: center; line-height: 1.6; margin-bottom: 15px; }
  footer .inner dl dt { font-size: 1.6rem; }
  footer .inner dl dd { font-size: 2.2rem; }
  footer .inner dl .att { font-size: 1.6rem; }
  footer .inner dl dd a { color: #fff; }
  footer .inner dl.tel dd { font-size: 2.4rem; }
  footer .sns { display: flex; justify-content: center; margin: 40px 0; }
  footer .sns li { margin: 0 20px; }
  footer .sns li a img { width: auto; height: 30px; }
  .copy { text-align: center; padding: 20px 0; }

  /* ページトップ */
.pagetop { position: fixed; bottom: 20px; right: 20px; display: block; z-index: 999; width: 50px; height: 50px; color: #fff; font-weight: bold; text-decoration: none; text-align: center; }
.pagetop:hover { cursor: pointer; opacity: 0.7; }







  /*--------------------------------------------------
  ページの余白設定
  --------------------------------------------------*/
  /* コンテンツとコンテンツの間の余白*/
  #main section { margin-bottom: 10%; }

  /* 共通部分*/


  /*--------------------------------------------------
  見出しの設定
  --------------------------------------------------*/



/*--------------------------------------------------
  ローディングロゴアニメーション
  --------------------------------------------------*/


  /* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#fff;
  text-align:center;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:100px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(0);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}





  /*--------------------------------------------------
  TOP
  --------------------------------------------------*/

#visual { position: relative; z-index: 0; }
#visual .slider4-wrap { width: 100%; margin: 0 auto; position: relative; }
#visual .slider-4 .slick-slide { height: 769px; overflow: hidden; }
#visual .slider-4 .slick-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
#visual .dots-4 .slick-dots { text-align: center; }
#visual .dots-4 .slick-dots li { display: block; }
#visual .dots-4 .slick-dots button { display: block; width: 10px; height: 10px; margin-bottom: 10px; font-size: 0; padding: 0; border: 0; outline: none; cursor: pointer; background: #fff; }
#visual .dots-4 .slick-dots .slick-active button { background: #505050; }
#visual .progress_bar { width: 100%; background: #eaeaea; position: absolute; bottom: 0; left: 0; z-index: 1; }
#visual .progress_bar .bar { width: 0%; height: 4px; background: #505050; }
#visual .dots-4 { position: absolute; bottom: 40px; right: 30px; }
#visual .wrap { position: absolute; top: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
#visual .wrap h2 { width: 100px; position: absolute; top: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
#visual .wrap h3 { width: 63px; }

#lead { background: #000; padding: 80px 0 ; text-align: center; color: #fff; font-size: 1.6rem; }

#about { background: url(img/about_bg.jpg) no-repeat; width: 100%; height: 880px; background-size: cover; }
#about .wrap { position: relative; height: 100%; }
#about .inner { display: flex; flex-direction: row-reverse; }
#about h2 { width: 41px; position: relative; top: -20px;}
#about h2::before { content: ''; display: block; border-bottom: 1px solid #000000; width: 400px; position: absolute; top: 0; right: 0; }
#about .text { width: 385px; padding: 50px 50px 0 0; }
#about .about_01 { position: absolute; top: -60px; left: 0; width: 500px;}
#about .about_02 { position: absolute; bottom: 100px; width: 400px; left: 290px; }
#about .about_03 { width: 350px; position: absolute; bottom: 100px; right: 0;}

#about .main_text{ 
  padding: 50px 40px 0 0;
  width: 100px;
}


/*タイトルの下ライン*/

.linebox{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}




#course { background: url(img/course_bg.png) no-repeat; background-size: cover; margin: -50px 0; position: relative; z-index: 2; overflow: hidden; min-height: 1268px; color: #fff;}
#course .price { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; font-size: 2.2rem; color: #fff; position: absolute; line-height: 1.2; }
#course .price dt { }
#course .price dd { text-align: right; }
#course .price span { font-size: 1.6rem;}

#course h2 { max-width: 780px; padding: 170px 0 20px; color: #fff; font-weight: bold; text-align: center; font-size: 2.2rem; line-height: 1; margin:auto; }
#course .left_line{
  display: block;
  width: 54%;
  border-bottom: solid 1.5px #fff;
  margin-left: 0;
}
#course .wrap { max-width: 1172px; padding-bottom: 130px; }
#course .wrap01 { padding-bottom: 50px !important;}
#course .omakase { display: flex; flex-direction: row-reverse; position: relative; z-index: 0; }
#course .omakase h3 { width: 50px; margin-top: 55px; }
#course .omakase .text { width: 107px; margin: 70px 24px 0 35px; }
#course .omakase .names { width: 414px; margin-top: 110px; }
#course .omakase .img { position: absolute; z-index: -1; top: 0; left: -250px; overflow: hidden; }
#course .omakase .price {
  right: 840px;
  bottom: -40px;
  width: 310px;
}
#course .torafugu { display: flex; flex-direction: row-reverse; position: relative; padding-right: 640px; }
#course .torafugu h3 { width: 46px; margin-top: 55px; }
#course .torafugu .text { width: 77px; margin: 70px 24px 0 35px; }
#course .torafugu .names { width: 316px; margin-top: 110px; }
#course .torafugu .img { position: absolute; z-index: -1; top: 0; right: -180px; max-width: 939px; width: 100%; }
#course .torafugu .price { left: 30px; bottom: -20px;  width: 310px;}
#course .price_at{ left: 30px; bottom: -70px; position: absolute;}

#others { background: url(img/washi_white_bg.jpg); width: 100%; overflow: hidden; }
#others h2 { max-width: 474px; padding: 118px 0 20px; margin-bottom: 60px; color: #000; font-weight: bold; text-align: center; font-size: 2.2rem; margin: auto;}
#others .left_line{
  display: block;
  width: 54%;
  border-bottom: solid 1.5px #000;
  margin-left: 0;
}
#others .inner { position: relative; vertical-align: top; margin-bottom: 150px; width: 1200px; margin-left: auto; margin-right: auto; margin-top:100px;}
#others .block { display: inline-block; vertical-align: top; }
#others .block ul li { font-size: 1.8rem; font-weight: bold; }
#others .block ul li::before { content: '－'; display: inline-block; color: #707070; margin-right: 5px; }
#others .block ul .last_alacarte::before { display:none;}
#others .course_image { max-width: 741px; position: absolute; top: -90px; right: -140px; }
#others .other_course { margin: 0 30px 0 70px; }
#others .other_course h3 { max-width: 231px; width: 100%; }
#others .alacarte { }
#others .alacarte h3 { max-width: 163px; width: 100%; }
#others .block h3 { margin-bottom: 40px; }
#others .last_alacarte {padding-left: 180px;} 


/* 右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.loops { display: -ms-grid; overflow: hidden; }
/*----------------------------*/
.loops__wrap { display: flex; overflow: hidden; }
.loops__list { display: flex; list-style: none; }
.loops__list--left{ animation :infinity-scroll-left 95s infinite linear 0.5s both; }
.loops__item { width: 445px; margin-right: 15px; }
.loops__item > img{ width: 100%; }


#master { background: url(img/washi_white_bg.jpg); width: 100%; padding-top: 60px; }
#master .wrap01 { padding: 0 0%; margin: 0 auto 0; width: 100%; max-width: 1068px; display: flex; justify-content: space-between; margin-bottom: 45px; }
#master .imgage { width: 41.1%; }
#master .sp_name_box{ 
  position: absolute;
  z-index: 2;
  width: 70px;
  top: 0px;
  right: -5px;}
#master .inner { width: 54%; padding-top: 40px; }
#master .inner .head_block { display: flex; justify-content: space-between; }
#master .head_block .name_box { width: 100%; }
#master .head_block .name_box .position { font-size: 2.2rem; margin-bottom: 30px; font-weight: bold; }
#master .head_block .name_box .ruby { font-size: 1.8rem; line-height: 1; letter-spacing: 5px; font-weight: bold; }
#master .head_block .name_box .name { font-size: 3.8rem; line-height: 1.2; letter-spacing: 8px; margin-bottom: 20px; font-weight: bold; }
#master .head_block .bnr_box { width: 183px; display: inline-flex; flex-wrap: wrap; }
#master .head_block .bnr_box div { width: 183px; }
#master h2{ max-width: 760px; width: 100%; padding: 70px 0 20px; margin: auto; color: #000000; font-weight: bold; font-size: 2.2rem; text-align: center;}
#master .right_line{
  display: block;
  width: 54%;
  border-bottom: solid 1.5px #000;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 100px;
}

#master .text { margin-bottom: 40px; font-size: 1.8rem; letter-spacing: 1px; }
#master .twitter {  }
#master .twitter a { background: #fff; border-radius: 10px; border: 1px solid #707070; padding: 10px 15px; display: flex; justify-content: space-evenly; align-items: center; max-width: 405px; margin: 0 auto; }
#master .twitter a i {  }
#master .twitter a span { font-weight: bold; font-size: 2.2rem; }
#master .twitter a:hover { opacity: 0.6; }



#seat { background: url(img/washi_white_bg.jpg); width: 100%; }
/*#seat h2 { display: flex; justify-content: space-between; }
#seat h2::before { content: ''; }*/
#seat h2{ max-width: 760px; width: 100%; padding: 70px 0 20px; margin: auto; color: #000000; font-weight: bold; font-size: 2.2rem; text-align: center;}
#seat .right_line{
  display: block;
  width: 54%;
  border-bottom: solid 1.5px #000;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 100px;
}
#seat .block { display: flex; justify-content: space-between; padding-bottom: 60px; }
#seat .block .image { max-width: 420px; width: 100%; }
#seat .block .box { max-width: 585px; width: 100%; }
#seat .block .box .seat_tt { font-size: 2.4rem; font-weight: bold; border-bottom: 3px solid #000; padding: 0 0 15px; margin-bottom: 35px; }
#seat .block .box .syosai { display: flex; justify-content: space-between; flex-direction: row-reverse; line-height: 1.4; }
#seat .block .box .syosai .capacity { font-size: 2rem; font-weight: bold; }
#seat .block .box .syosai .text { font-size: 1.6rem; width: 330px;}

#access { background: url(img/access_bg.jpg) no-repeat; padding: 70px 0; width: 100%; color: #fff; background-size: cover; }
#access h2 { padding: 0px 0 70px; font-size: 2.2rem; text-align: center; font-weight: bold; }
#access .flex { align-items: flex-end; }
#access .add_block a{ color: #fff; border-bottom: solid 1px #fff;}
#access .add_block {  }
#access .add_block .storename { font-size: 2.3rem; }
#access .add_block .add { font-size: 2.3rem; }
#access .add_block .walk dd { font-size: 2.3rem; }
#access .map_block {
  max-width: 502px;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
#access .map_block iframe { width: 100%; height: 510px; }
#access .add_block dl { display: flex; justify-content: space-between; }
#access .add_block dl dt { font-size: 2.3rem; }
#access .add_block dl dd { font-size: 2.1rem; }
#access .add_block dl .att { font-size: 1.4rem; margin-bottom: 10px;}



#contact { background: #E0E0E0; }
#contact .ttl { padding: 90px 0; font-size: 2.2rem; font-weight: bold; text-align: center; line-height: 1; }
#contact #form {  }
#contact #form dl { display: flex; justify-content: space-between; padding: 10px 20px; }
#contact #form dl dt { width: 11em; margin-right: 1em; font-weight: bold; font-size: 1.7rem; color: #707070; text-align: right; line-height: 2.4rem; }
#contact #form dl dd { position: relative; width: calc(100% - 11em); }
#contact #form dl dd textarea { height: 110px; }
#contact #form dl dd .hissu { position: absolute; top: 2px; left: 0.7em; font-size: 1.1rem; color: #d22a3b; }
#contact #form .att { margin: 0; padding: 10px 0 0 0; font-size: 1.8rem; text-align: right; color: #707070; line-height: 2rem;}

#contact #form input[type="text"] {  }

#contact #form input[type="text"],
#contact #form input[type="password"],
#contact #form input[type="datetime"],
#contact #form input[type="datetime-local"],
#contact #form input[type="date"],
#contact #form input[type="month"],
#contact #form input[type="time"],
#contact #form input[type="week"],
#contact #form input[type="number"],
#contact #form input[type="email"],
#contact #form input[type="url"],
#contact #form input[type="search"],
#contact #form input[type="tel"],
#contact #form input[type="color"],
#contact #form select,
#contact #form textarea,
#contact #form .field
 { border: 1px solid #707070; padding: 12px; }


#contact form #Submit { padding: 100px 0 90px; margin: 0; }
#contact form #Submit button { display: block; width: 100%; max-width:  440px; margin: 0 auto; padding: 18px 0; border: 0; background: #858585; text-align: center; font-size: 2.0rem; color: #fff; cursor: pointer; webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; }
#contact form #Submit button:hover { background: #4a4a4a; color: #fff;}

.meiryo{ }


#Submit input{
  width: 100%;
  max-width: 300px;
  background-color: #858585;
  text-align: center; font-size: 2.0rem; color: #fff; cursor: pointer; webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s;
}

#page_content { padding: 100px 30px 20px; font-size: 1.6rem; }
#complete {     padding: 280px 30px;
  font-size: 1.6rem; }

#complete p{ font-size: 2rem; text-align: center;}

.reseTb{ width: 50%; display: block; margin: auto;}
.reseTb tbody{ width: 440px; display: block; margin: auto;}
.reseTb .l_Cel{ padding: 10px; border: solid 1px #333;}
.reseTb td{ padding: 10px; border: solid 1px #333;}



/*------------------------------------------------------------------------
                                < 1366
------------------------------------------------------------------------*/

@media screen and (max-width: 1366px) {

#course h2 { width: 55%; }

#course .torafugu { padding-right: 47vw; }
#course .torafugu .img {  }




}





/*------------------------------------------------------------------------
                                < 1068
------------------------------------------------------------------------*/

@media screen and (max-width: 1068px) {

.wrap { padding: 0 30px; }
#about .about_01 {
  width: calc(100% - 535px);
}
#about .about_02 {  }
#seat .block .box { margin-left: 20px; }
#course .omakase .price { right: auto; left: 0; }
#course .omakase .names { margin-bottom: 13em; }
#course .torafugu { padding-right: 0; width: 100%; justify-content: flex-end;}
#others .block ul li { text-shadow: 0 0 3px rgb(255 255 255), 0 0 3px rgb(255 255 255), 0 0 3px rgb(255 255 255); }


  
}






/*------------------------------------------------------------------------
                                < 900
------------------------------------------------------------------------*/

@media screen and (max-width: 900px) {

  #access .map_block {
    max-width: 375px;
  }


#about .main_text {
  padding: 50px 20px;
  width: 95px;
}


#about .text {
  width: 355px;
  padding: 50px 20px 0 0;
}

#about .about_02 {
  position: absolute;
  bottom: 70px;
  width: 400px;
  left: 100px;
}


#others .course_image {
  max-width: 420px;
  position: absolute;
  top: 140px;
  left: 20px;
  right: auto;
}


#seat .block .box .syosai .text {
  font-size: 1.6rem;
  width: 230px;
}


#course .omakase .img {
  position: absolute;
  z-index: -1;
  top: 330px;
  left: -150px;
  overflow: hidden;
  width: 700px;
}

#course .omakase .price {
  right: auto;
  left: 0;
  bottom: -100px;
}


#course .torafugu {
  padding-right: 0;
  width: 100%;
  justify-content: flex-start;
  margin-top: 70px;
}

#course .torafugu .img {
  position: absolute;
  z-index: -1;
  top: auto;
  left: -150px;
  max-width: 630px;
  width: 100%;
  bottom: -110px;
}

#course .torafugu .price {
  left: 10px;
  bottom: -80px;
  width: 310px;
}

#course .wrap {
  padding-bottom: 270px;
}

#course .price_at {
  left: 30px;
  bottom: -130px;
  position: absolute;
}


  
}






/*------------------------------------------------------------------------
                                < 768
------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {


#others .other_course { margin: 0 0 70px; }

.pc_only{
  display:none !important;
}

.sp_slide_3{

}

  
}





/*------------------------------------------------------------------------
                                < 640
------------------------------------------------------------------------*/

@media screen and (max-width: 640px) {

.main_logo{
  width: 80% !important;
}


  
}







/*------------------------------------------------------------------------
                                < 600
------------------------------------------------------------------------*/

@media screen and (max-width: 600px) {

header .block .header_tel { display: none; }
header .menu.open { text-align: left; }
header .menu.open ul { flex-wrap: wrap; flex-direction: row;  margin: 160px 0 0; margin-top: 7vh; }
header .menu ul li { width: 100%; margin-bottom: 2em; }
header .menu ul li a { padding: 0; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; }
header .menu ul li a::before { margin: 0 1em 0 0; }
header .menu ul li.white a { min-height: auto; padding: 0; width: 10em; justify-content: center; }
header .menu ul li.white a::before { content: none; }
header .fix_con { position: fixed; bottom: 0; width: 100%; }
header .fix_con .sns { display: flex; justify-content: flex-end; margin: 0 0 100px; }
header .fix_con .sns .li { margin: 0 20px; }
header .fix_con .sns .li a img { width: auto; height: 27px; }
header .fix_con .footer_fix { display: flex; justify-content: space-between; }
header .fix_con .footer_fix a { background: #fff; padding: 14px 30px; width: 50%; }
header .fix_con .footer_fix a.tel { border-right: 1px solid #707070; }
header .block .logo { width: 45px; }


footer#footer { position: relative; background: url(img/sp_footer_back.png) no-repeat; width: 100%; height: auto; background-size: cover; background-position: center top; color: #fff; padding: 170px 0 0; }
footer#footer {  }
footer .wrap { display: flex; justify-content: center; flex-wrap: wrap; }

footer h2{ width: 160px;}
footer .inner dl { display: none;}

/*
footer .inner dl { display: flex; justify-content: space-between; text-align: left; }
footer .inner dl dt { width: 7em; }
footer .inner dl dd { font-size: 1.7rem; width: 100%; }
footer .inner dl .att { font-size: 1.5rem; width: 100%; }*/
footer .footer_fix { display: flex; justify-content: space-between; position: fixed; bottom: 0; width: 100%; z-index: 20; }
footer .footer_fix a { background: #fff; padding: 14px 30px; width: 50%; }
footer .footer_fix a.tel { border-right: 1px solid #707070; }
footer .wrap.copy { padding-bottom: 35vw; }

footer .sns {
  margin: 20px 0;
}

#visual .slider-4 .slick-slide { height: 100vh; }
#visual .wrap h3 { position: absolute; left: 40px; }

#about { height: 1160px; position: relative; z-index: 3; }
#about .wrap { padding: 0; }
#about .inner { flex-wrap: wrap; padding: 0 30px; }
#about .text { width: 100%; padding: 40px 0 0; font-size: 1.6rem; }
#about .about_01 { width: 74%; top: -30px;}
#about .about_03 {
  width: 69%;
  left: auto;
  right: 0;
  bottom: -6em;
}
#about .about_02 {
  width: 69%;
  right: auto;
  left: 10px;
  bottom: 8em;
}

#about .main_text {
  padding: 0;
  width: 300px;
  margin-top: 20px;
}

#course { background: url(img/course_bg_sp.png); background-size: cover; margin: 0vw 0 -18vw; }
#course h2 { padding: 40vw 0 20px; }
#course .wrap:nth-of-type(1) {
  padding-top: 70px;
}

#course .left_line{ width: 70%;}
#course .wrap { padding: 0 0 50vw; }
#course .omakase { flex-direction: row; flex-wrap: wrap; }
#course .omakase h3 { width: auto; padding: 0 30px; margin-top: 30px; }
#course .omakase .ttl_2{ width: 100%; margin: 10px 0 0; font-size: 1.7rem; padding: 0 30px;}
#course .omakase .text { width: 100%; font-size: 1.7rem; margin: 20px 0 0; padding: 0 30px; }
#course .omakase .names { width: 100%; margin: 180px 0 0; padding: 0 30px 30px; }
#course .omakase .names dl { display: flex; justify-content: space-between; margin-bottom: 10px; }
#course .omakase .names dl dt { font-size: 2.2rem; width: 5em; }
#course .omakase .names dl dd { font-size: 1.9rem; width: 100%;}
#course .omakase .names dl dd span { font-size: 80%; }
#course .omakase .img { width: 100%; position: static; }
#course .omakase .img img { width: 146%; object-position: -29vw; }
#course .omakase .names_2 { font-size: 1.4rem;}
#course .omakase .price { position: absolute;
  width: 80%;
  margin: auto;
  top: -770px;
  left: 0;
  right: 0; }
#course .torafugu { flex-direction: row; flex-wrap: wrap; padding-right: 0; justify-content: flex-start; }
#course .torafugu h3 { width: auto; padding: 0 30px; margin-top: 60px; }
#course .torafugu .ttl_2 { width: 100%; margin: 10px 0 0; font-size: 1.7rem; padding: 0 30px;}
#course .torafugu .text { width: 100%; margin: 30px 0 0; font-size: 1.7rem; padding: 0 30px; }
#course .torafugu .names { width: 100%; font-size: 2.2rem; margin-top: 140px; line-height: 2.2; padding: 0 30px 30px; }
#course .torafugu .img { width: 100%; position: static; }
#course .torafugu .img img { width: 146%; object-position: -29vw; }
#course .torafugu .price {     position: absolute;
  width: 80%;
  margin: auto;
  top: -440px;
  left: 0;
  right: 0;}
#course .price{ padding: 35px 0 15px !important;}
#course .price_at{ bottom: -370px; font-size: 1.4rem;}

#course .sp_others .names {
  width: 100%;
  font-size: 2.2rem;
  margin-top: 30px;
  line-height: 2.2;
  padding: 0 30px;
}

#course .sp_others h2{
  padding: 20vw 0 20px !important;
  width: 55%;
}

#course .sp_others .names2 {
  width: 100%;
  font-size: 1.9rem;
  margin-top: 10px;
  text-align: right;
  padding-right: 15px;
  padding-bottom: 100px;
} 


#others h2 { width: 68%; margin-bottom: 0px; padding-top: 90px; line-height: 1rem;}
#others .wrap:nth-of-type(1) { padding: 0; }
#others .inner { width: 100% !important; margin-bottom: 40px; margin-left: 0; margin-right: 0; margin-top: 30px;}
#others .block ul li { margin-left: 1em; }
#others .block ul li::before { margin-left: -1em; }
#others .course_image { position: static; }
#others .course_image img { object-fit: cover; width: 160%; object-position: -25vw; }
#others .other_course { padding: 0; }
#others .other_course h3 { font-size: 3.0rem; max-width: 100%; margin-bottom: 30px; }
#others .alacarte { padding: 0; }
#others .alacarte h3 { font-size: 3.0rem; max-width: 100%; margin-bottom: 30px; }
#others .left_line{ width: 64%;}

.loops__list--left { animation: none; }
.loops__list--left:nth-of-type(2) { display: none; }
.loops__list { display: block; }
.item45 { display: none;}
.loops__list::after { content: ''; display: block; clear: both; }
.loops__item { width: 88%; margin: 0 0 20px; }
.loops__item:nth-of-type(even) { float: right; }

#master .wrap01 { flex-wrap: wrap; padding: 0 30px;}
#master .right_line{
  width: 64%;
  margin-bottom: 30px;
}

#master .imgage { width: 81%; margin-bottom: 20px; margin-left: -30px;}
#master .inner { width: 100%; }
#master .inner .head_block { flex-wrap: wrap; }
#master .head_block .bnr_box { width: 100%; margin-bottom: 10px; }
#master .bnr_box{ height: 80px;
  width: 90%;
  margin-bottom: 10px;}
#master .head_block .bnr_box a { width: 49%; }
#master h2{ line-height: 1rem;}
#master .text { font-size: 1.6rem; line-height: 2; }
#master .cover {  }
#master .cover img { object-fit: cover; height: 130px; object-position: 48% 0; }
#master .head_block .bnr_box div{ width: 145px; margin-right: 10px;}


#seat { position: relative; }
#seat h2 { width: 68%; text-align: center; line-height: 1rem;}
#seat .wrap { overflow-x: scroll; max-width: none; }
#seat .wrap:nth-of-type(1) { padding: 0; }
#seat .wrap .scr { display: inline-block; position: absolute; top: 170px; right: 10px; }
#seat .wrap .inner { display: flex; width: 1160px; }
#seat .block { display: block; width: 270px; margin-right: 40px; }
#seat .block .image {}
#seat .block .box { margin: 0; }
#seat .block .box .seat_tt { font-size: 2.0rem; padding: 0 0 10px; margin-bottom: 12px; }
#seat .block .box .syosai { flex-wrap: wrap; }
#seat .block .box .syosai .capacity { font-size: 1.8rem; margin-bottom: 20px; height: 50px;}
#seat .block .box .syosai .text { font-size: 1.5rem; width: 100%; }
#seat .right_line{ width: 67%;}


#access { padding: 70px 0 0; }
#access .add_block .storename { font-size: 1.9rem; }
#access .add_block .add { font-size: 2.1rem; }
#access .add_block .walk dd { font-size: 1.7rem; }
#access .add_block dl dt { font-size: 1.7rem; }
#access .add_block dl dd { font-size: 1.6rem; }
#access .wrap { padding: 0; }
#access .add_block { padding: 0 40px; margin-bottom: 60px; }
#access .map_block { line-height: 0.5; max-width: revert; }

#contact .wrap { padding: 0 20px; }
#contact .ttl {
  padding: 67px 0 55px;
  font-size: 2.2rem;
}
#contact #form dl { flex-wrap: wrap; padding: 10px 0; }
#contact #form dl dt { width: 100%; text-align: left; }
#contact #form dl dd { width: 100%; }
#contact #form dl.nfw { flex-wrap: nowrap; }
#contact #form .att { font-size: 1.7rem; text-align: left; }

#contact form #Submit {
  padding: 50px 0 60px;
  margin: 0;
}

.reseTb{ width: 100%;}
.reseTb tbody{
  width: 100% !important;
}
.reseTb .l_Cel{ width: 100px !important; line-height: 1.4;}

.reseTb td{
  width: 200px !important;
}


  
}




/*------------------------------------------------------------------------
                                < 555
------------------------------------------------------------------------*/

@media screen and (max-width: 555px) {



  
}



/*------------------------------------------------------------------------
                                < 400
------------------------------------------------------------------------*/

@media screen and (max-width: 400px) {


#about {  }
#master .twitter a span { line-height: 1.2; font-size: 1.8rem; }
#master .twitter a i { margin-right: 1.5em; }

  
}