/* ========================================================================
ResetCss
======================================================================== */

/* 要素 フォントサイズ・マージン・パディングをリセット */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, 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:0;
  outline:0;
  font-size:100%;
  font-weight: normal;
  vertical-align:baseline;
  background:transparent;
}

/* 行の高=フォントサイズ */
body {
  line-height:1;
}

/* 新規追加要素をブロック要素化 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

/* ulのマーカー非表示 */
ol, ul {
  list-style: none;
}

/* 引用符の非表示 */
blockquote, q {
  quotes:none;
}

/* blockquote要素、q要素の前後にコンテンツ非表示 */
blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

/* フォントサイズ　リセット フォントの縦方向 ベースライン揃え 点線削除 */
a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  outline: none;
  text-decoration: none;
}

/* ins要素 デフォルトセット 色を変える場合はここで変更 */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* mark要素 デフォルトセット 色やフォントスタイルを変える場合はここで変更 */
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

/* テキスト 打ち消し線 */
del {
  text-decoration: line-through;
}

/* IE　デフォルトで点線を下線表示設定　下線設定 マウスオーバー時 ヘルプカーソル表示可 */
abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

/*　隣接するセルのボーダーを重ねて表示　*/
table {
  border-collapse:collapse;
  border-spacing:0;
}

/* 水平罫線デフォルトリセット */
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

/* 縦方向の揃え 中央揃え */
input, select {
  vertical-align:middle;
}

/* 画像を縦に並べた時に余白0 */
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*画像レスポンシブ*/
img {
  max-width: 100%;
  height: auto;
}

/*改行のweb際のBR高さバグ修正*/
br {
  line-height: inherit;
}


/*  レスポンシブ用
-------------------------------------------------------------*/
/*  pcのみ  */
.sp {display: none !important;}
.pc {display: block !important;}

/*  spのみ  */
@media screen and (max-width: 1199px) {
  .pc {display: none !important;}
  .sp {display: block !important;}
}

/*  共通
-------------------------------------------------------------*/
body{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
background: none;
height: 100%;
position: relative;
margin: 0px;
}

/* body.no-scroll{height: 100vh; overflow-y: hidden; width: 100%;}
body.sticky {padding-top: 130px;} */

a{transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; color: #383838;}
a:hover{opacity: 0.6; transition:.2s all;}
a img{transition:.2s all;}
a img:hover{opacity: 0.8; transition:.2s all;}
button{transition:.2s all;}
button:hover{opacity: 0.8; transition:.2s all;}
form{margin: 0;}

@media screen and (max-width: 1199px) {
  body.sticky {padding-top: 75px;}
}

.inner {width: 100%; max-width: 1400px; margin: 0 auto; position: relative;}
.inner.small {max-width: 1100px;}

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

}

/* =================================================================
ヘッダー
=================================================================*/
header {width: 100%; height: 70px; display: flex; justify-content: space-between; position: fixed; z-index: 10000;}
header .logo {margin: 40px 0 0 31px; width: 132px; height: auto;}
header .logo img {display: block;}

.header-menu {position: fixed; z-index: 10; right: 0; width: 290px; height: 70px; display: flex; align-items: center; justify-content: flex-end;}
.header-menu:after {content: ""; display: block; position: absolute; width: 330px; height: 70px; background: #ede3e1; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease;}
.header-menu.open:after {opacity: 1; visibility: visible; -webkit-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease;}
.header-menu ul {display: flex; align-items: center; justify-content: flex-end; padding-right: 31px; z-index: 1;} 
.header-menu ul li {margin-left: 20px; height: 70px; display: flex; align-items: center; justify-content: center;}

header .hamburger {width: 37px; margin-left: 22px;}
header .hamburger a{display: block; padding-top: 47px;}
header .hamburger span{margin-top: -14px; display: block; height: 2px; width: 37px; background: #000000; transform-origin: center center; -webkit-transform-origin: center center; -webkit-transition: all 0.3s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990); transition: all 0.3s 0s cubic-bezier(0.875, 0.005, 0.090, 0.99);}
header .hamburger span:last-child{margin-top: 8px;}
.contact header span {background: #000;}
header .hamburger .active{padding-top: 47px;}
header .hamburger .active span{width: 45px; margin-top: -9px; -webkit-transform: scale3d(1,1,1) translate(0px,0px) rotate(45deg); -moz-transform: scale3d(1,1,1) translate(0px,0px) rotate(25deg); transform: scale3d(1,1,1) translate(0px,0px) rotate(30deg); background: #000;}
header .hamburger .active span:last-child{margin-top: -1px; -webkit-transform: scale3d(1,1,1) translate(0px,0px) rotate(-45deg); -moz-transform: scale3d(1,1,1) translate(0px,0px) rotate(-25deg); transform: scale3d(1,1,1) translate(0px,0px) rotate(-30deg);}
header .hamburger.reversal span {background: #000;}

/*  menu  *//*  button  */
#head_submenu {visibility: hidden; opacity: 0; -webkit-transition: all 0.3s 0s ease; transition: all 0.6s 0s ease;}
#head_submenu.open { opacity: 1; visibility: visible; z-index: 20; -webkit-transition: all 0.3s 0s ease; transition: all 0.3s 0s ease;}

/*  head submenu  */
#head_submenu {position: fixed; top: 70px; left: 0; right: 0; bottom: 0; z-index: 997;}
#head_submenu .head {position: fixed; width: 330px; top: 70px; right: 0; bottom: 0; background: #ede3e1; overflow-y: scroll; padding: 22px 60px 0px; box-sizing: border-box;}

/*  animation  */
#head_submenu,
#head_submenu #submenu_left ul li a,
#head_submenu #submenu_right ul li a,
#head_menu ul li a {transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s;}

#head_submenu .menu a {font-family: "Josefin Sans", '游ゴシック体', serif; font-size: 20px; letter-spacing: 0.08em; color: #000;}
#head_submenu .menu a span {font-size: 11px; display: inline-block; margin-left: 20px; letter-spacing: 0.05em;}
#head_submenu .menu li + li {margin-top: 23px;}
#head_submenu .sns {margin-top: 33px; margin-bottom: 42px; display: flex; align-items: center;}
#head_submenu .sns li + li {margin-left: 31px;}
#head_submenu .sns img {width: 26px; height: auto;}

#head_submenu .button {display: flex; justify-content: center; align-items: center; background: none; color: #404040; height: 50px; font-size: 14px; border: 2px solid #404040;}
#head_submenu .button:after {display: none;}
#head_submenu .button + .button {margin-top: 14px;}
#head_submenu .button:hover {background: #000; color: #fff; border-color: #000;}

.float {position: fixed; top: 53.3%; right: 0; z-index: 10;}
.float .reserve {font-size: 16px; display: flex; justify-content: center; align-items: flex-start; width: 59px; height: 190px; background: rgba(255,255,255,0.8); margin-bottom: 25px; transition: all 0.3s 0s ease; padding-top: 29px;}
.float .reserve span {text-align: center; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; letter-spacing: 0.24em; line-height: 1;}
.float ul li + li {margin-top: 18px;}
.float ul li a {display: flex; justify-content: center; align-items: center;}
.float .link-tel {display: none;}
.float .link-tel img {filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);}
.float .link-instagram img {filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%); max-width: 22px;}
.float .link-line img {filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%); max-width: 22px;}

.float.reversal .reserve {background: rgba(0,0,0,0.8); color: #fff; transition: all 0.3s 0s ease;}
.float.reversal .link-instagram img {filter: none;}
.float.reversal .link-line img {filter: none;}

@media screen and (max-width: 1199px) {
  header .logo {margin: 21px 0 0 17px;}
  header .logo img {width: 80px; height: auto;}
  header .logo.open {display: none;}
  .contact header .logo {display: block; margin: 15px 0 0 13px; width: 97px;}

  .header-menu {height: 50px;}
  .header-menu.open:after {display: none;}
  .header-menu ul {padding-right: 19px;}
  .header-menu ul li {height: 60px;}

  header .hamburger a{display: block; padding-top: 39px;}
  header .hamburger span {width: 25px; height: 1px;}
  header .hamburger span{margin-top: -14px;width: 25px; }
  header .hamburger span:last-child{margin-top: 6px;}
  header .hamburger .active span{width: 32px; margin-top: -14px;}
  header .hamburger .active span:last-child{margin-top: -1px;}

  #head_submenu .head {width: 100%; top: 0px; padding: 50px 20px 120px;}
  #head_submenu .menu-wrap {padding: 0 20px;}
  #head_submenu .menu {padding-top: 12px; text-align: center; display: flex; flex-wrap: wrap;}
  #head_submenu .menu li {font-size: 18px; width: 50%; padding-left: 16px;}
  #head_submenu .menu li + li {margin-top: 0px;}
  #head_submenu .menu li:nth-child(n + 3) {margin-top: 30px;}
  #head_submenu .menu a {display: flex; justify-content: center; align-items: flex-start; flex-direction: column; font-size: 17px;}
  #head_submenu .menu a span {margin-left: 0; font-size: 9px; margin-top: 7px;}
  #head_submenu .sns {display: flex; justify-content: center; margin-top: 31px;}
  #head_submenu .sns li + li {margin: 0 0 0 30px;}
  #head_submenu .button {height: 59px; max-width: 315px; font-size: 14px; margin: auto; font-weight: bold; color: #000; border-color: #000;}
  #head_submenu .button:after {display: block;}
  #head_submenu .button + .button {margin-top: 13px;}

  .float {top: auto; bottom: 20px;}
  .float .reserve {width: 44px; height: 132px; font-size: 13px; padding-top: 13px; margin-bottom: 20px;}
  .float .link-tel {display: flex;}
  .float .link-tel img {height: 23px; width: auto; display: block;}
  .float.reversal .link-tel img {filter: none;}
  .float.reversal .link-instagram img {filter: none;}
  .float.reversal .link-line img {filter: none;}

}



/* =================================================================
フッター
=================================================================*/
footer {background: url('../images/common/footer-bg.jpg'); background-size: cover; color: #404040; height: 341px; position: relative; z-index: 2;}
footer .back-to-top {position: absolute; right: 10%; top: -16px;}
footer .inner {display: flex; justify-content: space-between; align-items: flex-start; padding-top: 92px; max-width: 1100px;}
footer .left-box {display: flex; align-items: flex-start;}
footer .left-box .logo {margin-top: 8px; margin-right: 49px; display: block;}
footer .left-box .logo img {display: block; width: 132px; height: auto;}
footer .left-box .info {font-size: 14px; line-height: 1.857142857142857;}
footer .left-box h2 {margin-bottom: 0;}
footer .right-box {padding-top: 7px;}
footer .right-box ul {display: flex; justify-content: flex-end;}
footer .right-box ul li + li {margin-left: 17px;}
footer .right-box ul li img {width: 17px; height: auto;}
footer .right-box ul li + li img {width: 21px; height: auto;}
footer .right-box .copy {margin-top: 109px; font-size: 12px; letter-spacing: 0.1em;}
footer a {color: #fff;}

@media screen and (max-width: 1199px) {
  footer {height: auto; padding-bottom: 61px;}
  footer .inner {justify-content: center;}
  footer .back-to-top {right: 13px; top: -20px;}
  footer .inner {padding-top: 69px;}
  footer .left-box  {flex-direction: column;}
  footer .left-box .logo {width: 92.5px; margin: 0 auto 0;}

  footer .left-box .info {display: none;}
  footer .right-box {display: none;}
  footer .copy {margin-top: 33px; font-size: 11px; display: inline-block;}
}