@charset "utf-8";

/*
Theme Name: litbarber-theme-2026
Theme URI:showa
Description: 代田橋の床屋・バーバー Lit BARBERのテーマです。
Author:LEXURES
Author URI:https://lexures.com
*/

/* ------------------------------------------------------------
   1. GOOGLE FONTS インポート
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Serif+JP:wght@400;700&family=Noto+Sans+JP:wght@300;400;500&family=Playfair+Display:ital@1&display=swap');


/* ------------------------------------------------------------
   2. CSS カスタムプロパティ（デザイントークン）
   ------------------------------------------------------------ */

:root{
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  /*フォント設定*/
  --base-font:16px;
  --base-font-s:14px;
  --fruid-fontsize:clamp(14px,3vw,16px);
  /*見出し設定*/
  --heading-font-m:clamp(1.6em,3vw,2.4em);
  --heading-font-l:clamp(2.0em,5vw,2.8em);
  --heading-font-xl:clamp(2.4em,5vw,3.2em);
  /*line-height設定*/
  --line-h-17:1.7;
  --line-h-18:1.8;
  --line-h-20:2.0;
  /*横幅設定*/
  --width-400:400px;
  --width-600:600px;
  --width-750:750px;
  --width-800:800px;
  --width-900:900px;
  --width-1024:1024px;
  --width-1200:1200px;
  --width-1600:1600px;
  --width-100per:100%;
  /*カラー設定*/
  --color-base-bg:#fff;
  --color-yel:#67701E;
  --color-red:#9b1c1c;

  /* --- タイポグラフィ --- */
  --font-display:  'Bebas Neue', sans-serif;        /* ロゴ・英字装飾・セクション番号 */
  --font-heading:  'Noto Serif JP', serif;           /* 日本語メイン見出し */
  --font-body:     'Noto Sans JP', sans-serif;       /* 本文・UI全般 */
  --font-accent:   'Playfair Display', serif;        /* 英字サブキャプション（イタリック） */

  /* --- カラーパレット --- */
  --color-black:        #1A1A1A;   /* Jet Black     — メイン背景・ベース */
  --color-dark-brown:   #3D2008;   /* Dark Roast    — セカンダリ背景・深茶 */
  --color-brown:        #5C3317;   /* Mahogany      — 見出し・アクセント茶 */
  --color-mid-brown:    #8B4513;   /* Saddle Brown  — ボーダー・中間トーン */
  --color-orange:       #D2601A;   /* Burnt Orange  — メインアクセント・CTA */
  --color-amber:        #F5A623;   /* Amber Gold    — ハイライト・英字装飾 */
  --color-off-white:    #F5F0EB;   /* Warm White    — 明背景・本文テキスト */
  --color-pale-ash:     #C9B8A8;   /* Pale Ash      — サブテキスト・補足 */
  --color-border:       #E8DDD4;   /* Border        — ライト系ボーダー */
  --color-bg-light:     #FAF8F5;   /* Light BG      — カード・ライトセクション */

    /* --- 字間 --- */
  --tracking-display:  0.06em;   /* Bebas Neue 通常 */
  --tracking-wide:     0.15em;   /* Bebas Neue サブコピー */
  --tracking-xwide:    0.25em;   /* Bebas Neue 装飾ラベル */
  --tracking-body:     0.02em;   /* 日本語本文 */

  /* ── セクション背景色 ── */
  --grad-bg-dark:   #1A1A1A;    /* section--dark  */
  --grad-bg-brown:  #3D2008;    /* section--brown */
  --grad-bg-light:  #FAF8F5;    /* section--light (Menuのみ) */
  --grad-bg-footer: #111111;    /* footer */

  /* ── セクション境界グラデーション（::before 疑似要素 / 高さ 40-60px） ── */
  --grad-dark-brown:
    linear-gradient(180deg, #1A1A1A 0%, #3D2008 100%);
  --grad-brown-dark:
    linear-gradient(180deg, #3D2008 0%, #1A1A1A 100%);
  --grad-dark-light:
    linear-gradient(180deg, #1A1A1A 0%, #FAF8F5 100%);
  --grad-light-dark:
    linear-gradient(180deg, #FAF8F5 0%, #1A1A1A 100%);
  --grad-brown-footer:
    linear-gradient(180deg, #3D2008 0%, #111111 100%);
  --grad-peak-brown:
    linear-gradient(180deg, #1A1A1A 0%, #3D2008 50%, #1A1A1A 100%);

  /* ── HERO 動画オーバーレイ ── */
  --grad-hero-overlay:
    linear-gradient(
      105deg,
      rgba(26,26,26,.88)  0%,
      rgba(26,26,26,.60) 55%,
      rgba(61,32,8,.25)  100%
    );

  /* ── 画像オーバーレイ ── */
  --grad-img-bottom:
    linear-gradient(
      to top,
      rgba(26,26,26,.96)  0%,
      rgba(26,26,26,.60) 40%,
      transparent        100%
    );
  --grad-card-brown:
    linear-gradient(
      to top,
      rgba(61,32,8,.95) 0%,
      rgba(61,32,8,.50) 50%,
      transparent       100%
    );
  --grad-vignette:
    radial-gradient(
      ellipse at center,
      transparent         30%,
      rgba(26,26,26,.85) 100%
    );

  /* ── アクセントグラデーション ── */
  --grad-orange-top:
    linear-gradient(180deg, rgba(210,96,26,.55) 0%, rgba(210,96,26,0) 100%);
  --grad-footer-depth:
    linear-gradient(180deg, #1A1A1A 0%, #0D0D0D 100%);
  --grad-amber-glow:
    linear-gradient(
      180deg,
      rgba(245,166,35,.15) 0%,
      rgba(245,166,35,0)   50%,
      rgba(210,96,26,.10) 100%
    );
}

/*-- パララックス背景設定 --*/

.bg_attachment{
  background-attachment: fixed;
}

.bg_scroll{
  background-attachment:scroll!important;
}


/* .lazyfadein img {
  opacity: 0;
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
}
.lazyfadein .lazyloaded {
  opacity: 1;
} */


/* --------------------------------------
  ローディング画面
--------------------------------------- */
/* .loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  background-color: #D2601A;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2.5s forwards;
}

.loading img{
  max-width: 200px;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 175px;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
} */

/* .progBar{
  width:100%;
  height:50px;
  background-color:#8b0f0f;
  position:relative;
  border-radius:10px;
  overflow: hidden;
}
.progBar .bar{
  position:absolute;
  height:100%;
  background-color:#777f0b;
  animation: progress 4s normal;
  animation-fill-mode: forwards;
}
@keyframes progress {
  0% {width: 0}
  100% {width: 100%}
} */


/* --------------------------------------
  ローディング画面 ここまで
--------------------------------------- */


  /* ──claude new 2026-0409 ローディング ── */
  /* #loading {
    position: fixed; inset: 0; background: #0d0d0d;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 28px; z-index: 9999; transition: opacity 0.6s ease;
  }
  #loading.fade-out { opacity: 0; pointer-events: none; }
  .spinner {
    width: clamp(28px, 8vw, 40px); height: clamp(28px, 8vw, 40px);
    border: 2px solid #2a2a2a; border-top-color: #c8983a;
    border-radius: 50%; animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .load-label {
    color: #333; font-size: clamp(9px, 2.5vw, 11px);
    letter-spacing: 4px; font-family: monospace; text-transform: uppercase;
  } */

    /* ──claude new 2026-0411 文字FILL ローディング ── */

  /* =============================================
     ローディング画面
     ============================================= */
  #loading {
    position: fixed;
    inset: 0;
    background: #0d0d0d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 5vw, 36px);
    z-index: 9999;
    transition: opacity 0.7s ease;
  }
  #loading.fade-out {
    opacity: 0;
    pointer-events: none;
  }
 
  /* ---- SVGロゴ ---- */
  #loading-logo {
    width: clamp(120px, 30vw, 200px);
    height: auto;
    opacity: 0;
    animation: logoAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
  }
  @keyframes logoAppear {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
 
  /* ---- プログレスエリア ---- */
  .progress-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: logoAppear 0.6s ease 0.5s forwards;
  }
 
  /* プログレスバー（細線） */
  .bar-outer {
    width: clamp(100px, 25vw, 160px);
    height: 1px;
    background: #1e1e1e;
    overflow: hidden;
  }
  .bar-inner {
    height: 100%;
    width: 0%;
    background: #c8983a;
    /* JS で width を直接更新するので transition は使わない */
  }
 
  /* パーセント表示 */
  .pct-label {
    font-size: clamp(9px, 2vw, 11px);
    letter-spacing: 3px;
    color: #2a2a2a;
    font-family: monospace;
  }


.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* --------------------------------------
  メイン要素
--------------------------------------- */
html{
background:#fff;
font-size:62.5%;
}

body{
font-family:'游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
/* font-family:"Noto Sans JP",sans-serif; */
letter-spacing: 1px;
margin: 0;
word-wrap: break-word;
word-break: break-all;
background-image: none;
font-size:100%;
min-width: inherit;
margin:0;
padding:0;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}


main > * {
  position: relative;
  /* z-index: 10; */
}

p{
  word-break: auto-phrase;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
}


.item {
  opacity: 0;
}

.item:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}

.item:nth-child(2) {
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 0.5s ease 1s 1 forwards;
}

.item:nth-child(3) {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 0.5s ease 1.5s 1 forwards;
}

.item:nth-child(4) {
  -webkit-animation: example 0.5s ease 2s 1 forwards;
  animation: example 0.5s ease 2s 1 forwards;
}

.item:nth-child(5) {
  -webkit-animation: example 0.5s ease 2.5s 1 forwards;
  animation: example 0.5s ease 2.5s 1 forwards;
}

.item:nth-child(6) {
  -webkit-animation: example 0.5s ease 3s 1 forwards;
  animation: example 0.5s ease 3s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/* --------------------------------------
  吹きだし
--------------------------------------- */
.balloon {
  display: inline-block;
      margin:0 0 1em;
      min-width: 120px;
      max-width: 100%;
      color: #555;
      border: 1px solid #777;
      box-sizing: border-box;
}

.balloon:before{
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.balloon:after{
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #777777;
  z-index: 1;
}

.balloon p {
	margin: 0;
	padding: 0;
}


/* --------------------------------------
  動画背景用 共通 CSS
--------------------------------------- */

.video-background {
  position: fixed; /* 動画を固定する */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1; /* コンテンツの背面に配置 */
}

.video {
  opacity: 0;
  transition: opacity 0.8s ease;
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を維持して全体をカバー */
}

.video-background:after{
content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
background: linear-gradient(to bottom, rgba(000, 000, 000, 1) 0%, rgba(000, 000, 000, 0.5) 20%, rgba(000, 000, 000, 0.5) 80%, rgba(000, 000, 000, 1) 100%);
}

/* 動画背景CSS single.php */
.video-background-single {
  position: fixed; /* 動画を固定する */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1; /* コンテンツの背面に配置 */
}

.video-background-single:after{
content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
background: linear-gradient(to bottom, rgba(000, 000, 000, 1) 0%, rgba(000, 000, 000, 0.9) 20%,rgba(000, 000, 000, 0.8) 50%, rgba(000, 000, 000, 0.9) 80%, rgba(000, 000, 000, 1) 100%);
}

.video_content {
  position: relative; /* コンテンツを通常通り表示 */
  color: #fff; /* 文字色を白に設定 */
  display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
  padding: 20px;
  height: 100vh; /* コンテンツを中央に配置 */
}

.video::-webkit-media-controls {
  display: none;
}
.video::-moz-media-controls {
  display: none;
}

/* デスクトップ用の動画をデフォルトで表示 */
#mobile-video {
  display: none;
}

/* スマホの表示幅では、モバイル用動画を表示 */
@media screen and (max-width: 768px) {
  #desktop-video {
      display: none;
  }
  #mobile-video {
      display: block;
  }
}

/* --------------------------------------
  KV 
--------------------------------------- */
#kv{
  padding:0;
  margin: 0;
}

.kv_content {
  position: relative;
  color: #fff;
  display: grid;
  align-items: flex-start;
  height: 100svh;
  place-content: center;
  /* grid-template-rows: 10%; */
  
}

.kv_content img{
  width: 100%;
  height: 100%;
}

.kv_main_c{
  max-width: clamp(300px, 50vw, 800px);

}

.kv_c{
  max-width: clamp(75px,5vw,100px);
  }

 #kv-text {
    display: flex;
    align-items: baseline;
    font-family: var(--font-heading);
  }
 
  .ch {
    display: inline-block;
    font-size: clamp(32px, 9vw, 96px);
    font-weight: 900;
    color: #F0EAE0;
    letter-spacing: clamp(1px, 0.3vw, 3px);
    opacity: 0;
    will-change: transform, opacity;
  }

    .sep { display: inline-block; width: clamp(10px, 2.5vw, 24px); }


/*******************************
    　kv フロート 予約
********************************/

/* @media only screen and (max-width:768px){ */
  .fixed_sticky_menu{
    position: sticky;
    display: inline-grid;
    bottom: 25%;
    z-index: 100;
    left: 100%;
    /* background: #000; */
    /* padding: 1em; */
    /* border-top: 1px solid #fff;
    border-bottom: 1px solid #fff; */
    background: linear-gradient(to bottom, rgb(147 124 21 / 69%) 0%, rgb(169 142 15 / 61%) 3%, rgb(137 112 24 / 66%) 10%, rgb(169 142 15 / 61%) 20%, rgb(183 153 15 / 61%) 30%, rgb(157 132 16 / 73%) 80%, rgb(190 159 15 / 71%) 100%);
    /* border-top: 1px solid #be9f0e;
    border-bottom: 1px solid #be9f0e; */
    /* height: 100vh; */
  } 
/* } */
@media only screen and (max-width:768px){
  .fixed_sticky_menu{
    position: fixed;
    bottom:0;
    left:0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: linear-gradient(to bottom, rgb(147 124 21 / 69%) 0%, rgb(169 142 15 / 61%) 3%, rgb(137 112 24 / 66%) 10%, rgb(169 142 15 / 61%) 20%, rgb(183 153 15 / 61%) 30%, rgb(157 132 16 / 73%) 80%, rgb(190 159 15 / 71%) 100%);
    height:auto;
  } }


  .fixed_sticky_menu a {
    text-decoration: none;
    color: #333;
    font-size:clamp(1.2em,3vw,1.6em);
    writing-mode: vertical-lr;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.5em;
    justify-content: center;
    padding: 1em;
    background: #F5F0EB;
    font-weight: bold;
    transition: 1s ease;
  }
  @media only screen and (max-width:768px){
    .fixed_sticky_menu a{
      writing-mode: horizontal-tb;
      padding: 1.5em 0.4em;
    } }

    .fixed_sticky_menu a:hover{
      opacity:0.7;
    }

.fixed_sticky_menu_web{
  background: #D2601A!important;
  color:#fff!important;
  position: relative;
}

.fixed_sticky_menu_line{
  background: #00c000!important;
  color:#fff!important;
  position: relative;
}


.lp-coupon::before{
  position: absolute;
  content: "新規の方限定！\A このページから予約で最大20%OFF";
  width: auto;
  height: auto;
  background: var(--color-brown);
  top: 8px;
  left: -35px;
  padding: 0.6em 0.4em;
  color: #ffffff;
  font-size: 12px;
  border-radius:4px;
  white-space: pre-wrap;
  z-index: 10;
  writing-mode: vertical-rl;
}

@media only screen and (max-width:768px){
.lp-coupon::before{
  position: absolute;
  height: auto;
  width: max-content;
  top: -10px;
  padding: .4em .8em;
  color: #fff;
  left: 50%;
  font-size: 10px;
  transform: translate(-50%, -50%);
  writing-mode: horizontal-tb;
} }


  #kv_reserve{
    position: fixed;
    bottom:150px;
    right: 10px;
    z-index: 10000;
  }
  @media only screen and (max-width:768px){
    #kv_reserve{
        bottom: unset;
        right: unset;
        position: initial;
        margin: 0;
        flex-basis: 100%;
    } }
  
    #kv_reserve a {
      background: #a11e1e;
      background: linear-gradient(0deg, #9a1414, #b52a2a);
      text-decoration: none;
      width: 100px;
      padding: 7px 10px;
      color: #fff;
      font-size: 1.4em;
      display: block;
      line-height: 1.7;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 100px;
      border-radius: 100px;
    }
    @media only screen and (max-width:768px){
      #kv_reserve a{
        width:auto;
        padding: 10px 0;
        display: block;
        text-align: center;
    } }

    #kv_reserve a:hover{
      color: #ddd;
    }

    @media only screen and (max-width:768px){
      #kv_reserve a i{
        vertical-align: baseline;
      } }

/*******************************
    　 フロート 予約 single など
********************************/

/* @media only screen and (max-width:768px){ */
.fixed__menu{
  position: fixed;
  display: inline-grid;
  bottom: 0%;
  z-index: 99;
  right:0;
  background: linear-gradient(to bottom, rgb(147 124 21 / 69%) 0%, rgb(169 142 15 / 61%) 3%, rgb(137 112 24 / 66%) 10%, rgb(169 142 15 / 61%) 20%, rgb(183 153 15 / 61%) 30%, rgb(157 132 16 / 73%) 80%, rgb(190 159 15 / 71%) 100%);
  transform: translateZ(0);
} 
/* } */
@media only screen and (max-width:768px){
.fixed__menu{
  top:inherit;
  bottom: 0;
  left:0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: linear-gradient(to bottom, rgb(147 124 21 / 69%) 0%, rgb(169 142 15 / 61%) 3%, rgb(137 112 24 / 66%) 10%, rgb(169 142 15 / 61%) 20%, rgb(183 153 15 / 61%) 30%, rgb(157 132 16 / 73%) 80%, rgb(190 159 15 / 71%) 100%);
  height:auto;
} }


.fixed__menu a {
  text-decoration: none;
  color: #333;
  font-size:clamp(1.2em,3vw,1.6em);
  writing-mode: vertical-lr;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.5em;
  justify-content: center;
  padding: 1em;
  background: #F5F0EB;
  font-weight: bold;
  transition: 1s ease;
}
@media only screen and (max-width:768px){
  .fixed__menu a{
    writing-mode: horizontal-tb;
    padding: 1.5em 0.4em;
  } }

  .fixed__menu a:hover{
    opacity:0.7;
  }


  .fixed__menu__lp{
    position: fixed;
    display: inline-grid;
    bottom: 0%;
    z-index: 99;
    right:0;
    background: linear-gradient(to bottom, rgb(147 124 21 / 69%) 0%, rgb(169 142 15 / 61%) 3%, rgb(137 112 24 / 66%) 10%, rgb(169 142 15 / 61%) 20%, rgb(183 153 15 / 61%) 30%, rgb(157 132 16 / 73%) 80%, rgb(190 159 15 / 71%) 100%);
    transform: translateZ(0);
  } 
  /* } */
  @media only screen and (max-width:768px){
  .fixed__menu__lp{
    top:inherit;
    bottom: 0;
    left:0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    background: linear-gradient(to bottom, rgb(147 124 21 / 69%) 0%, rgb(169 142 15 / 61%) 3%, rgb(137 112 24 / 66%) 10%, rgb(169 142 15 / 61%) 20%, rgb(183 153 15 / 61%) 30%, rgb(157 132 16 / 73%) 80%, rgb(190 159 15 / 71%) 100%);
    height:auto;
  } }

  .fixed__menu__lp a {
    text-decoration: none;
    color: #333;
    font-size:clamp(1.2em,3vw,1.6em);
    writing-mode: vertical-rl;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.5em;
    justify-content: center;
    padding: 1em;
    background: #cececee0;
    font-weight: bold;
    transition: 1s ease;
    height: 250px;
    transform: translateZ(0);
  }
  @media only screen and (max-width:768px){
    .fixed__menu__lp a{
      writing-mode: horizontal-tb;
      padding: 1.5em 0.4em;
      height: auto;
    } }

  


/* --------------------------------------
 #news
--------------------------------------- */
#news{
  margin: 0;
  padding: 5em 0;
  /* background: linear-gradient(to bottom, rgba(000, 000, 000, 0) 0%, rgba(000, 000, 000, 0.4) 5%, rgba(000, 000, 000, 0.9) 10%, rgba(000, 000, 000, 0.9) 20%, rgba(000, 000, 000, 0.9) 30%,rgba(000, 000, 000, 0.9) 60%, rgba(000, 000, 000, 0.8) 70%,rgba(000, 000, 000, 0.8) 80%, rgba(000, 000, 000, 0.8) 100%); */
  background: linear-gradient(to bottom, rgba(000, 000, 000, 0.6) 0%, rgba(000, 000, 000, 0.6) 5%, rgba(000, 000, 000, 0.6) 10%, rgba(000, 000, 000, 0.6) 20%, rgba(000, 000, 000, 0.6) 30%, rgba(000, 000, 000, 0.6) 60%, rgba(000, 000, 000, 0.6) 70%, rgba(000, 000, 000, 0.6) 80%, rgba(000, 000, 000, 0.6) 100%);
}

/* #news:before{
    background: linear-gradient(180deg, #3d2008 0%, #3d2008e6 50%, #1b1b1b9c 70%, #1d1d1d45 100%);
    content: '';
    display: block;
    height: 50px;
    margin-top: -110px;
} */

.news_container{
  /* display: grid;
  grid-template-columns: 1fr 3fr; */
  max-width: 1600px;
  width: 90%;
  margin:0 auto;
}

.news_heading{
    /* max-width: 400px; */
    margin: 4em auto 0;
    text-align: center;
}

.news_heading h2{
    padding: 0;
    /* text-align: center; */
    font-family: "Noto Serif JP", serif;
    font-size: clamp(24px, 2.5vw, 36px);
    color: #fff;
}

.article-list{
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}


.article-list article{
  font-size:14px;
  border-bottom: 1px solid #fff;
  padding: 0.4em 0;
}

.article-list article a{
  color:#fff;
}

.post-categories{
  font-size:14px;
}

.post-categories li{
  background: #fff;
  background: var(--color-dark-brown);
  border: 1px solid var(--color-border);
  color: var(--color-pale-ash);
  /* color: #333; */
  padding: 0.2em;
  margin: 0;
  /* max-width: fit-content; */
  font-family: "Noto Sans CJK", sans-serif;
  display: inline-block;
}



/* --------------------------------------
  匠和 about
--------------------------------------- */

#about{
  background: linear-gradient(to bottom, rgba(0,0,0, 0 ) 0%, rgba(0,0,0, .20 ) 3%, rgba(0,0,0, .30 ) 6%, rgba(0,0,0, .60 ) 20%, rgba(0,0,0, .65 ) 40%, /* ← 0.60 → 0.65 に微増 */ rgba(26,26,26,.88) 75%, /* ← 0.70 → #1A1A1A 系に変更 */ rgba(26,26,26,1.0) 100% /* ← 0.80 → 完全不透過 #1A1A1A */ );
  padding: 80px 0;
  transform: translateZ(0);
}


.about_heading{
  padding: 0;
  text-align: center;
  font-family:"Noto Serif JP",serif;
  font-size: clamp(14px, 2.5vw, 26px);
}

.about_box{
  position: relative;
  margin: 0;
  /* background: rgba(0, 0, 0, 0.8); */
  width: 100%;
  height: 100%;
  color: #fff;
  z-index: 11;
  overflow: hidden;
}

  .about_box h3{
    font-size: 1.8em;
    font-weight: bolder;
    margin: 10% 0;
    line-height: 2.0;
    padding:0;
    text-align: center;
    position: relative;
    color: #fff;
  }
  @media only screen and (min-width:767px){
  .about_box h3{
    font-size: 2.4em;
    margin: 80px 0;
  } }

  .about_box h3 span{
  font-size: 1em;
  display: block;
}

.about_box h3::before{
  position: relative;
  content: '';
  display: block;
  width: 90%;
  height: 1px;
  background: #fff;
  left: 50%;
  transform: translate(-50%);
  top: -20px;
  max-width: 600px;
}

.about_box h3::after{
  position: relative;
  content: '';
  display: block;
  width: 90%;
  height: 1px;
  background: #fff;
  left: 50%;
  transform: translate(-50%);
  bottom: -20px;
  max-width: 600px;
}

.about_box_inner{
  padding: 10px;
  width: 100%;
  height: 100%;
  color: #fff;
  z-index: 11;
  max-width: 1600px;
  margin: 0 auto;
  flex-direction: column-reverse;
  display:-webkit-flex;
  display: flex;
}
@media only screen and (min-width:767px){
.about_box_inner{
  padding: 50px;
  position: relative;
  display:-webkit-flex;
  display: flex;
  flex-direction: row;
} }

.about_box_txt{
    max-width: 800px;
    width: 100%;
    margin:min(10vw, 120px)  auto;
    padding:0 2em;

}


.about_box_txt p{
  font-size: var(--base-font);
  margin: 0 0 1.6em;
  line-height:var(--line-h-20);
}

.about_img img{
  width: 100%;
  height: auto;
  
}

.circle-box {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 70%);
  mask-image: radial-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 70%);
}
.circle-box img{
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
}

.l-img{
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
}

.r-img{
  bottom: -50%;
  right: -30%;
  transform: translate(-50%, -50%);
}

/**** 匠和　Recommend ****/

.about_recommend_container{
  max-width:1600px;
  margin: 80px auto;
  padding: 0 clamp(2em, 6vw, 8em);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4em;
}
@media only screen and (max-width:1024px){
  .about_recommend_container{
    grid-template-columns: 1fr;
    margin: 40px auto;
  }
}

.about_recommend img{
  width: 100%;
  height: auto;
  padding:0 ;
}
@media only screen and (max-width:768px){
.about_recommend img{
padding: 0;
margin:0;
  } }


.about_recommend_text{
  padding: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

.about_recommend_text h4{
      font-size: var(--heading-font-xl);
      font-family: var(--font-heading);
      margin: 0 0 2em;
      color: #fff;
      /* text-align: center; */
}


.about_recommend_text ul{
margin: 0 0 30px;
}

.about_recommend_text ul > li{
      font-size: clamp(16px,3vw,20px);
      margin: 0 0 1em;
      color:#fff;
      font-weight: bold;
}

.about_recommend_text ul > li:before{
  font-family: "Font Awesome 6 Free";
  content: "\f058";
  padding-right: 10px;
}

.about_recommend_text p{
font-size:var(--base-font);
margin: 0 0 2em;
line-height: var(--line-h-20);
color: #fff;
}


  .recommend_img_box{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:2em;
  }
  
  @media (max-width: 1024px) {
    .recommend_img_box{
      gap:1em;
      margin: 6em 0;
      }
  }

.recommend_img_box img{
 width: 100%;
height: auto;
}

.grid-item {
  width: 100%;
}

/* 2番目と3番目の画像を下にずらす */
.grid-item:nth-child(2),
.grid-item:nth-child(4) {
  margin-top: 40px;
}





/* --------------------------------------
  feature
--------------------------------------- */

#feature{
  background: linear-gradient(to bottom, rgb(26 26 26) 0%, rgb(61 32 8) 6%,rgba(61, 32, 8, 0.8) 12%, rgba(61, 32, 8, 0.65) 45%, rgba(61, 32, 8, 0.72) 75%, rgba(61, 32, 8, 0.85) 100%);
  background-position: 25% 100%;
  /* background: #3d2008f9;; */
  padding: clamp(2em,10vw,100px) 0;
  margin-top: -0.5px;
}

/* #feature::before{
  background:linear-gradient(180deg, #1A1A1A 0%, #3D2008 100%);
  content: '';
  display: block;
  height: 120px;
  margin-top: -130px;
} */

/* .feature_heading{
  padding: 0;
  text-align: center;
  font-family:"Noto Serif JP",serif;
  font-size: clamp(14px, 2.5vw, 36px);
  margin: 4em 0;
  color: #fff;
} */

.feature_heading{
    /* max-width: 400px; */
    margin: 4em auto 6em;
    text-align: center;
}

.feature_heading h2{
    padding: 0;
    /* text-align: center; */
    font-family: "Noto Serif JP", serif;
    font-size: clamp(24px, 2.5vw, 36px);
    color: #fff;
}

.sec-head-en{
    font-family: var(--font-display);
    font-size: clamp(48px, 4vw, 72px);
    letter-spacing: .06em;
    color: #D2601A;
    line-height: 1;
    display: block;
    margin-bottom: -8px;
    /* text-align: center; */
}

  .feature_box{
    padding: clamp(2em,5vw,8em) 0;
    position: relative;
    -webkit-display: flex;
    display: flex;
  }
  @media only screen and (max-width:1024px){
    .feature_box{
      -webkit-flex-direction: column;
      flex-direction: column;
      margin:0 0 8em;
      } }

  
  .feature_box figure{
    margin: 0 0 4em;
  }
  
  .feature_box img{
  width: 100%;
  height: auto;
  position: relative;
  transition:all 0.5s ease-out;
  }


.sk-one::before{
  position: absolute;
  content: 'Feature01.';
  display: block;
  color: #fff;
  text-shadow: 0 0 10px #000000;
  z-index: 2;
  top: 1vh;
  left: 1%;
  font-size: 7em;
  mix-blend-mode: difference;
  }
  @media only screen and (max-width:1024px){
    .sk-one::before{
          content: 'Feature01.';
          top: -20px;
    }
  }
  @media only screen and (max-width:600px){
    .sk-one::before{
          content: 'Feature01.';
          font-size: 48px;
          top: -25px;
    }
  }

  /* .sk-two{
    flex-direction: row-reverse;
  } */

  .sk-two::before{
    position: absolute;
    content: 'Feature02.';
    display: block;
    color: #fff;
    text-shadow: 0 0 10px #000000;
    z-index: 2;
    top: 1vh;
    left: 1%;
    font-size: 7em;
    mix-blend-mode: difference;
    }
    @media only screen and (max-width:1024px){
      .sk-two::before{
            content: 'Feature02.';
            top: -20px;
      }
    }
    @media only screen and (max-width:600px){
      .sk-two::before{
            content: 'Feature02.';
            font-size: 48px;
            top: -25px;
      }
    }
  

.sk-three::before{
  position: absolute;
  content: 'Feature03.';
  display: block;
  color: #fff;
  text-shadow: 0 0 10px #000000;
  z-index: 2;
  top: 1vh;
  left: 1%;
  font-size: 7em;
  mix-blend-mode: difference;
  }
  @media only screen and (max-width:1024px){
    .sk-three::before{
          content: 'Feature03.';
          top: -20px;
    }
  }
  @media only screen and (max-width:600px){
    .sk-three::before{
          content: 'Feature03.';
          font-size: 48px;
          top: -25px;
    }
  }

.feature-container{
  margin: 0 auto; 
  max-width: var(--width-1600);
  transform: translateZ(0);
}

.feature_text{
  z-index: 1;
  width: 100%;
  transition: all 0.5s ease-out;
  padding:0 clamp(2em, 4vw, 6em);
  color: #fff;
}
@media only screen and (max-width:1024px){
  .feature_text{
    max-width: var(--width-800);
    margin: 0 auto;
  }
}

.feature_text h3{
  font-size: var(--heading-font-l);
  font-family: var(--font-heading);
  font-weight: bolder;
  margin: 0 0 2em;
  line-height:var(--line-h-20);
  color: #ffffff;
  transition: all 0.5s ease-out;
  letter-spacing: 0.02em;
}

.feature_text ul > li{
  font-size: 1.5em;
  margin: 0 0 7px;
  font-weight: bold;
  -webkit-display: flex;
  display: flex;
  width: 100%;
}

.feature_text ul > li:before{
font-family: "Font Awesome 5 Free";
content: "\f058";
padding-right: 10px;
}

.feature_text p{
font-size: var(--base-font);
line-height: var(--line-h-20);
margin: 0 0 2em;
}


/* --------------------------------------
アコーディオンコンテンツ
--------------------------------------- */

.agingcare_box {
    margin: 50px 0;
    padding: 0;
    width: calc(98% / 3);
    display: inline-block;
    vertical-align: top;
}
@media only screen and (max-width:768px){
  .agingcare_box{
    width: auto;
    display:block;
  }
}

/*ボタン装飾*/
.agingcare_box label {
    padding: 10px;
    font-weight:500;
    border: solid 1px #333;
    cursor :pointer;
    background: #fff;
}

/*ボタンホバー時*/
.agingcare_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.agingcare_box input {
    display: none;
}

/*中身を非表示にしておく*/
.agingcare_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.agingcare_box input:checked ~ .hidden_show {
    padding: 20px 0 0;
    height: auto;
    opacity: 1;
}


.qa_box {
	padding: 0;
	max-width: 800px;
	width: 100%;
	margin: 0 auto 1em;
	text-align: center;
}

/*ラベル*/
.qa_box label {
  display: block;
      margin: 1.5px 0;
      padding: 20px 33px 20px 20px;
      color: #fff;
      font-weight: bold;
      background: #000;
      cursor: pointer;
      transition: all 0.4s;
      font-size:1.8em;
      text-align: left;
}
@media only screen and (max-width:544px){
  .qa_box label {
    font-size:1.4em;
    padding: 13px 33px 13px 13px;
  }
}

/*アイコンを表示*/
.qa_box label:before {
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    padding-right: 8px;
}

/*ラベルホバー時*/
.qa_box label:hover {
  background: #1970a9ed;
}

/*チェックは隠す*/
.qa_box input {
    display: none;
}

/*中身を非表示にしておく*/
.qa_box .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.4s;
    font-size:1.4em;
    text-align: left;

}

.qa_box .accshow dt{
margin-bottom:10px;
}

.qa_box .accshow dd{
margin: 0;
}



/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 10px;
    background: #fbfbfb;
    opacity: 1;

}

.accbox .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}


/* --------------------------------------
  店舗情報
--------------------------------------- */

#storeinfo{
padding:1em 0;
background: linear-gradient(to bottom, rgba(000, 000, 000, 0) 0%, rgba(000, 000, 000, 0) 20%, rgba(000, 000, 000, 0) 80%, rgba(000, 000, 000, 0) 100%);
/* background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
position: relative; */
}

.storeinfo_heading{
font-size: var(--heading-font-m);
color: #fff;
}

.storeinfo_container{
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1600px;
margin: 0 auto;
padding: 0;
gap: 1em;
}
@media only screen and (max-width:768px){
.storeinfo_container{
    grid-template-columns: 1fr 1fr;
  } }
  @media only screen and (max-width:600px){
    .storeinfo_container{
        grid-template-columns: 1fr;
      } }


.storeinfo_box{
  width:100%;
  margin: 0 auto;
  padding:0;
  color: #fff;
}
@media only screen and (max-width:768px){
.storeinfo_box{
    display:block;
  } }


.storeinfo_fig{
 /* text-align: center;  */
}
@media only screen and (max-width:600px){
  .storeinfo_fig{
    text-align: center; 
   } }


.storeinfo_fig img{
width: 100%;
height: auto;
max-width: 100px;
}

#storeinfo table {
  width: 100%;
  font-size: var(--base-font);
  position: relative;
  }
  @media only screen and (max-width:768px){
    #storeinfo table{
      font-size: 1.4em;
      margin: 0 auto;
    } }

#storeinfo tr{
  margin: 0 0 1em;
  display: block;
}


#storeinfo th {
  padding: 0;
  font-weight: normal;
  display: block;
}

#storeinfo td {
  text-align: left;
  padding: 0;
  display: block;
  margin: 0 0 1em;
}

#storeinfo a{
  color: var(--color-amber);
}

.map_container{
  margin: 0 auto;
}
@media only screen and (max-width:768px){
.map_container{
    width: 100%;
  } }

.map_container h3{
  padding:0;
  font-size: var(--heading-font-m);
  margin: 0 0 1em;
  color: #fff;
/* text-align: center; */
}
.gmap {
width:100%;
margin: 0 auto;
}

.gmap iframe,
.gmap object,
.gmap embed {
display:block;
margin:0 auto;
}


/********************************************
  店舗情報内の動画 CSS ここから #storeinfo
*********************************************/

.storeinfo_movie_text{
  margin: 2em 0;
}

.storeinfo_movie_text h3{
  margin: 0 0 1em;
  font-size: var(--heading-font-m);
  }

.storeinfo_movie_text p{
  font-size:1.4em;
  margin: 0 0 1em;
  line-height: var(--line-h-17);
  }
  
  
  .movie_wrap{
  -moz-display:flex;
  -webkit-display:flex;
  display: flex;
  -webkit-flex-wrap:wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 1600px;
  margin: 0 auto;
  }
  
  .movie_wrap > li{
    width: calc(100% / 2 - 10px);
  }
  
  .movie{
  margin: 5px;
  }
  
  .movie img{
    width:100%;
    max-width:800px;
  }
  
  .movie iframe{
    width: 100%;
    max-width: 800px;
    height: 100%;
  }
  @media only screen and (min-width:767px){
    .movie iframe{
      min-height: 225px;
    }
  }

/********************************************
  店舗情報内の動画 CSS ここまで
*********************************************/




/***矢印アニメーション***/
.arrow_animation{
  padding-top: 70px;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
}
.arrow_animation span {
  position: absolute;
      top: 0;
      left: 50%;
      width: 50px;
      height: 50px;
      margin-left: -20px;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb 2s infinite;
      animation: sdb 2s infinite;
      opacity: 0;
      box-sizing: border-box;
}
@media only screen and (max-width:480px){
  .arrow_animation span{
    width: 30px;
    height: 30px;
  } }
.arrow_animation span:nth-of-type(1) {
  top: 0;
  /* left: 12px; */
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.arrow_animation span:nth-of-type(2) {
  top: 18px;
  /* left: 11px; */
  animation-delay: .15s;
  -webkit-animation-delay: .15s;
}
.arrow_animation span:nth-of-type(3) {
  top: 15px;
      animation-delay: .3s;
      -webkit-animation-delay: .3s;
      /* left: 12px; */
}


@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }

}


/* --------------------------------------
  スタッフ
--------------------------------------- */

#staff{
  background: linear-gradient(to bottom, rgba(000, 000, 000, 0.8) 0%, rgba(000, 000, 000, 0.8) 20%, rgba(000, 000, 000, 0.9) 80%, rgba(000, 000, 000, 0.6) 100%);
  padding: clamp(3em,10vw,6em) 0;
  margin-top: -0.5px;
}


.staff_heading{
    padding: 0;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(14px, 2.5vw, 36px);
    margin: 4em 0;
    color: #fff;
}

.staff_heading h2{
    padding: 0;
    /* text-align: center; */
    font-family: "Noto Serif JP", serif;
    font-size: clamp(24px, 2.5vw, 36px);
    color: #fff;
}

.staff_container{
  max-width: 1600px;
  margin: 0 auto;
  color: #fff;
  padding:0 2em;
  -webkit-display:flex;
  display:flex;
  gap: 2em;
  justify-content: center;
}

@media only screen and (max-width:768px){
  .staff_container{
      flex-wrap: wrap;
    } }


.staff_box{
position: relative;
width: 100%;
max-width: 600px;
}


.staff_box h3{
  margin: 1em 0;
  color: #fff;
  text-align: center;
  font-size: 1.8em;
}

.staff_box dl{
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2em;
}

.staff_box dt{
  font-size: 1.6em;
  padding: 0;;
}

.staff_box dd{
  font-size: 1.6em;
}


.staff_fig{
  text-align: center;
      margin: 0px auto;
      width: auto;

}
@media only screen and (max-width:600px){
  .staff_fig{
    width:100%;
    padding: 0;
  } }

.staff_fig img{
  width: 100%;
  transition: 0.5s ease-in;
}

.list {
  display: grid;
  row-gap: 20px;
  padding: 20px;
}
  /* ここまで調整用スタイル */


  /* スタッフアコーディオン設定 */

.details {
  background-color:#111;
}
.summary {
  cursor: pointer;
  font-weight: bold;
  padding: 20px;
  font-size: var(--base-font);
}
.answer {
  overflow: hidden;
}
.answerInner {
  padding: 0 20px 20px;
}



/* --------------------------------------
 モーダルサンプル
--------------------------------------- */
.works_item {
  list-style: none;
  position: relative;
  width: 200px;
  border-radius: 2px;
  margin: 0 auto;
  background-color: #F2F2F2;
}
.works_modal_open {
  text-align: center;
}

.works_modal_open p{
  color: #fff;
}
.works_image_mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  cursor: pointer;
}
.mask_text {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.works_modal_content{
  text-align: center;
}
.works_image:hover .works_image_mask {
  opacity: 1;
  padding-top: 13%;
}
/* ------works_modal css------ */
.works_modal_wrapper {
  position: fixed;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: none;
  opacity: 0;
  z-index: -1;
  display: none;
}
.works_modal_window {
  width: 90%;
  max-width: 400px;
  max-height: 100%;
  height:auto;
  margin: auto;
  padding: 30px 30px;
  background: #fff;
  z-index: 1;
  overflow-y: hidden;
  border-radius: 5px;
}
.works_modal_mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
.works_modal_close {
  z-index: 300;
  position: absolute;
  top: 30px;
  right: 10px;
  color: #808080;
  font-size: 1.5rem;
  cursor: pointer;
}
.works_modal_close:hover {
  color: #000;
  transition: all .5s;
}
html.is_open, body.is_open {
  overflow: hidden;
}
.works_modal_wrapper.is_open {
  animation: works_modal_wrapper_open .5s ease forwards;
  display: -webkit-flex;
  display:flex;
}
.works_modal_wrapper.is_open .works_modal_window {
  animation: works_modal_window_open .5s ease forwards;
}
.works_modal_wrapper.is_close {
  animation: works_modal_wrapper_close .5s ease forwards;
}
.works_modal_wrapper.is_close .works_modal_window {
  animation: works_modal_window_close .5s ease forwards;
}

@keyframes works_modal_wrapper_open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    z-index: 300;
  }
}
@keyframes works_modal_window_open {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes works_modal_wrapper_close {
  0% {
    z-index: 300;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes works_modal_window_close {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}



/* --------------------------------------
 メニュー
--------------------------------------- */
#menu{
background: linear-gradient(to bottom, rgba(000, 000, 000, 0.8) 0%, rgba(000, 000, 000, 0.2) 10%, rgba(000, 000, 000, 0.4) 20%, rgba(000, 000, 000, 0.6) 40%, rgba(000, 000, 000, 0.9) 80%, rgba(000, 000, 000, 0.8) 100%);
padding:10em 0;
overflow: hidden;
background: var(--grad-bg-light);
}

#menu::before{
    background: linear-gradient(180deg, #1A1A1A 0%, #FAF8F5 100%);
    content: '';
    display: block;
    height: 60px;
    margin-top: -130px;
}



/* .menu_heading{
    padding: 0;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(14px, 2.5vw, 26px);
    color: #fff;
} */

.menu_heading{
    /* max-width: 400px; */
    margin: 4em auto 6em;
    text-align: center;
}

.menu_heading h2{
    padding: 0;
    /* text-align: center; */
    font-family: "Noto Serif JP", serif;
    font-size: clamp(24px, 2.5vw, 36px);
    /* color: #fff; */
}


/* .menu_heading::before{
  position: absolute;
  content: '';
  top: 50%;
  left: -10%;
  width: 150vw;
  height: 50%;
  background: #000;
  z-index: -1;
} */

.menu_text_shadow{
  text-shadow: 0 0 4px #000;
}

.menu_container{
  margin: 0 auto;
  padding: 0 2em;
  width: 100%;
  display:block;
  max-width: 1200px;
  /* color: #fff; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6rem;
}
@media (max-width: 768px) {
  .menu_container{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}


#menu h3{
  font-size: var(--heading-font-m);
  margin: 2em 0;
  padding: 0;
  width: 100%;
  line-height: 1.7;
  padding: 0.2em 0.4em;
  /* max-width: fit-content; */
  border-bottom: 1px solid #f37414;
  padding-bottom: 12px;
  margin-bottom: 24px;
}

.menu_box{
  display: block;
  max-width: 0 0 5em;
}


#menu dl{
  vertical-align: top;
  -webkit-display: flex;
  display: grid;
  align-items: baseline;
  grid-template-columns: 70% 30%;
  margin: 0 0 2em;
}


#menu dt{
  font-weight: bold;
  text-align: left;
  font-size: var(--fruid-fontsize);
}

#menu dd{
  font-size:var(--fruid-fontsize);
  font-family: var(--font-display);
  text-align: right;
  color: var(--color-orange);
}


.menu_explain{
  text-align: left !important;
  padding: 0.4em 0 0 0.6em;
}


.menu_alart{
  margin: 2em auto;
  text-align: center;
  font-size:12px;
  letter-spacing: 0;
}



/* --------------------------------------
 スタイル
--------------------------------------- */

#style{
  width: 100%;
  margin: -0.5px auto 0;
  /* color: #fff; */
  /* background: linear-gradient(to bottom, rgba(000, 000, 000, 0.0) 0%,rgba(000, 000, 000, 0.2) 10%, rgba(000, 000, 000, 0.4) 20%,rgba(000, 000, 000, 0.6) 40%, rgba(000, 000, 000, 0.9) 80%, rgba(000, 000, 000, 0) 100%); */
  background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .20) 3%, rgba(0, 0, 0, .30) 6%, rgba(0, 0, 0, .60) 20%, rgb(0 0 0 / 68%) 40%, /* ← 0.60 → 0.65 に微増 */ rgb(26 26 26 / 90%) 75%, /* ← 0.70 → #1A1A1A 系に変更 */ rgba(26, 26, 26, 1.0) 100% /* ← 0.80 → 完全不透過 #1A1A1A */);
  background: linear-gradient(
    360deg,
    rgba(0,  0,  0,  0.00)   0%,
    rgba(0,  0,  0,  0.20)   3%,
    rgba(0,  0,  0,  0.30)   6%,
    rgba(0,  0,  0,  0.60)  20%,
    rgba(0,  0,  0,  0.68)  40%,
    rgba(26, 26, 26, 0.90)  75%,
    rgba(26, 26, 26, 1.0)  100%
  );
  padding:3em 0;
  overflow: hidden;
}

#style::before{
    background: linear-gradient(180deg, #452c1987 30%, #452c1994 50%, #3c220c69 70%, #1a1a1abd 100%);
    content: '';
    display: block;
    height: 66px;
    margin-top: -60px;
}

.style_heading{
    padding: 0;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(14px, 2.5vw, 36px);
    margin: 4em 0;
    color: #fff;
}

.style_heading{
    /* max-width: 400px; */
    margin: 4em auto 6em;
    text-align: center;
}

.style_heading h2{
    padding: 0;
    /* text-align: center; */
    font-family: "Noto Serif JP", serif;
    font-size: clamp(24px, 2.5vw, 36px);
    color: #fff;
}


.hair_style_gallery{
  display: -webkit-box;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  /* max-width: 1600px; */
}

.hair_style_gallery img{
  width: 90%;
  height: 100%;
  margin: 0 auto;
}

.hair_style_gallery h3{
  text-align: center;
  margin: 0 0 20px;
  font-size: 1.6em;
  color: #fff;
}

.hair_style_gallery p{
  font-size: 1.3em;
  color: #fff;
}

.style_box{
  width: 100%;
}

.hair_style_gallery .slider-style{
text-align: center;
}

.hair_style_gallery li a img{
  transition:0.5s;
}

.hair_style_gallery li a img:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}

.style_alart{
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 2em 1em 1em;
  margin: 1em auto;
  max-width: 1200px;
  text-align: center;
  font-size: 1.3em;
  color: #fff;
}


/* --------------------------------------
 ご来店後の流れ flow 
--------------------------------------- */

#flow{
  width: 100%;
  margin: -0.5px auto;
  /* color: #fff; */
  background: linear-gradient(to bottom, rgba(000, 000, 000, 0.0) 0%, rgba(000, 000, 000, 0.2) 10%, rgba(000, 000, 000, 0.4) 20%, rgba(000, 000, 000, 0.6) 40%, rgba(000, 000, 000, 0.9) 80%, rgba(000, 000, 000, 0.8) 100%);
  padding: clamp(5em, 10vw, 200px) 0;
  overflow: hidden;
  /* background: #000; */
}


.flow_heading{
    /* max-width: 400px; */
    margin: 4em auto 6em;
    text-align: center;
}

.flow_heading h2{
    padding: 0;
    /* text-align: center; */
    font-family: "Noto Serif JP", serif;
    font-size: clamp(24px, 2.5vw, 36px);
    color: #fff;
}

.sec-head-en{
    font-family: var(--font-display);
    font-size: clamp(48px, 4vw, 72px);
    letter-spacing: .06em;
    color: #D2601A;
    line-height: 1;
    display: block;
    margin-bottom: -8px;
    /* text-align: center; */
}

.flow_container{

}

.flow_text{
  max-width: 800px;
  padding: 0 2em;
  margin: 0 auto clamp(5em,5vw,10em);
}

.flow_container p{
  font-size: var(--fruid-fontsize);
  color:#fff;
  text-align: center;
  text-wrap: balance
}

.flow_list img{
  width: 90%;
  height: auto;
  margin:0 auto;
  position: relative;
}

.flow_list li{
  position: relative;
}

.video_play {
  display: inline-block;
  position: absolute;
  width: 1em;
  height: 1em;
  border: 0.05em solid currentColor;
  border-radius: 50%;
  color: #fcfcfc;
  font-size: 75px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0px 11px -2px #0000007a;
  }
  .video_play::before {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translateY(-50%);
  width: 0px;
  height: 0px;
  border: 0.3em solid transparent;
  border-left: 0.5em solid currentColor;
  box-sizing: border-box;
  content: "";
  }



.flow_list video{
  width: 100%;
  height: 100%;
  aspect-ratio: 3/4;

}


.flow_list li::before{
  position: absolute;
  /* content: ''; */
  writing-mode: vertical-rl;
  display: block;
  color: #fff;
  text-shadow: 8px 0px 30px #000000;
  top: 10px;
  left:0;
  font-size: clamp(3em, 3vw, 4em);
  z-index: calc(infinity);
  background: #000;
  font-family: var(--font-heading);

  }


      .flow_one_001::before{
      content: '①お流し';
      }
      .flow_two_001::before{
      content: '②カット';
      }
      .flow_two_002::before{
      content: '②カット';
      }
      .flow_two_003::before{
      content: '②カット';
      }
      .flow_three_001::before{
      content: '③際そり';
      }
      .flow_four_001::before{
      content: '④シャンプー';
      }
      .flow_four_002::before{
      content: '④プチヘッドマッサージ';
      }
      .flow_four_003::before{
      content: '④すすぎ';
      }
      .flow_four_004::before{
      content: '④スチームタオル';
      }
      .flow_five_001::before{
      content: '⑤シェービング';
      }
      .flow_five_002::before{
      content: '⑤シェービング';
      }
      .flow_five_003::before{
      content: '⑤シェービング';
      }
      .flow_five_004::before{
      content: '⑤ふきとり';
      }
      .flow_six_001::before{
      content: '⑥フェイスパック';
      }
      .flow_six_002::before{
      content: '⑥フェイスパック';
      }                 
      .flow_seven_001::before{
      content: '⑦ヘッドマッサージ';
      }
      .flow_eight_001::before{
      content: '⑧マッサージ';
      }  
      .flow_eight_002::before{
      content: '⑧マッサージ';
      }
      .flow_nine_001::before{
      content: '⑨ブロー';
      }     
      .flow_nine_002::before{
      content: '⑨スタイリング';
      }    
      .flow_nine_003::before{
        content: '⑨スタイリング';
        }
      .flow_ten_001::before{
        content: '⑩完成';
        }
      .flow_ten_002::before{
        content: '⑩完成';
        }



.flow_conatier h3{
  text-align: center;
  margin: 0 0 20px;
  font-size: 1.6em;
  color: #fff;
}

.flow_conatier p{
  font-size: 1.3em;
  color: #fff;
}

.flow_box{
  width: 100%;
}

.flow_conatier .slider-style{
text-align: center;
}

.flow_conatier li a img{
  transition:0.5s;
}

.flow_conatier li a img:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}



/* --------------------------------------
 お客様の声
--------------------------------------- */

#customer_voice{
width: 100%;
margin: 0 auto;
/* color: #fff; */
/* background: linear-gradient(to bottom, rgba(000, 000, 000, 0.6) 0%, rgba(000, 000, 000, 0.6) 10%, rgba(000, 000, 000, 0.6) 20%, rgba(000, 000, 000, 0.6) 40%, rgba(000, 000, 000, 0.6) 80%, rgba(000, 000, 000, 0.6) 100%); */
padding: 2em 0 4em;
overflow: hidden;
/* background: #3d2008f9; */
/* background: linear-gradient(to bottom, rgb(12 11 13 / 67%) 0%, rgb(61 32 8) 6%, rgba(61, 32, 8, 0.8) 12%, rgba(61, 32, 8, 0.65) 45%, rgba(61, 32, 8, 0.72) 75%, rgba(61, 32, 8, 0.85) 100%); */
    background: linear-gradient(to bottom, rgb(0 0 0 / 60%) 0%, rgb(61 32 8 / 80%) 6%, rgb(61 32 8 / 85%) 12%, rgba(61, 32, 8, 0.65) 45%, rgba(61, 32, 8, 0.72) 75%, rgba(61, 32, 8, 0.72) 90%, rgb(0 0 0 / 60%) 100%);
}

/* #customer_voice::before{
    background: linear-gradient(180deg, #1A1A1A 0%, #3D2008 100%);
    content: '';
    display: block;
    height: 60px;
    margin-top: -40px;
} */

#customervoice img{
  width: 100%;
  height: auto;
  vertical-align: top;
}


/* .voice_heading{
    padding: 0;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(14px, 2.5vw, 36px);
    margin:0;
    color: #fff;
} */

.voice_heading{
    /* max-width: 400px; */
    margin: 4em auto 8em;
    text-align: center;
}

.voice_heading h2{
    padding: 0;
    /* text-align: center; */
    font-family: "Noto Serif JP", serif;
    font-size: clamp(24px, 2.5vw, 36px);
    color: #fff;
}

.voice_container{
text-align:center;
/*margin: 0 20px;*/
}
@media only screen and (max-width:600px){
.voice_container{
    margin:30px 0 0;} }

.voice_container img{
  width: 100%;
  }


.voice_box{
  padding: 2em;
  width: 96%!important;
  /* background: linear-gradient(rgb(255 255 255 / 60%), rgb(165 165 165 / 70%)), url(./images/bg002.webp); */
  border-top: 2px solid var(--color-orange);
  color: #fff;
  background: #4a1e07;
  box-shadow: 0px 5px 5px #6e280a;
  margin: 0 auto;
  min-height: 330px;
}

.voice_box_inner{
display: grid;
grid-template-columns: 1fr 2fr;
align-items: center;
}

.voice_box figure img{
  width: 100%;
  max-width: 50px;
  border-radius: 50%;
  box-shadow: 0 0 0px 1px rgb(101 9 10);
  background: #ffffff;
}

.voice_box h3{
font-size:var(--heading-font-m);
margin: 0 0 1em;
text-align: left;
}

.voice_box p{
font-size:1.4em;
text-align: left;
}

/* --------------------------------------
 Q&A コンテンツ 2022/06/11 追加
--------------------------------------- */

.qa_heading{
  color:#fff;
  font-size: 5.0vw;
  letter-spacing: 2px;
  line-height: 1.2;
  word-break: break-all;
  padding:0;
  text-align: center;
  font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
  text-align: center;
  text-shadow: 0 0 4px #c0c0c0;
  z-index: 2;
  margin: 1.6em 0;
  }
  


.qa_container{
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.acd-check{
  display: none;
}
.acd-label{
  background: linear-gradient(#d2619a,#d4477e);
  background: -webkit-linear-gradient(#d2619a,#d4477e);
  color: #fff;
  display: block;
  margin-bottom: 1px;
  padding: 20px;
  position: relative;
  font-size:18px;
  border-radius: 2px;
  box-shadow: 0 0 15px 3px #efefef;
  font-weight: bold;
  z-index: 2;
}
@media only screen and (max-width:544px){
.acd-label{
font-size:12px;
padding: 10px 35px 10px 25px;
}
}

.acd-label:after{
  box-sizing: border-box;
  content: '\f067';
  font-weight: bold;
  display: block;
  font-family: "Font Awesome 5 Free";
  padding: 14px 8px;
  position: absolute;
  right: 0;
  top: 0px;
}
@media only screen and (max-width:544px){
  .acd-label:after{
  font-size:12px;
  padding: 10px 15px;
  }
  }
.acd-content{
  font-size:16px;
  background: #fff;
  display: block;
  height: 0;
  opacity: 0;
  padding:20px;
  transition: .5s;
  visibility: hidden;
  box-shadow: 0 0 15px 3px #efefef;
  position: relative;
  text-align: left;
}
@media only screen and (max-width:544px){
  .acd-content{
  font-size:12px;
  padding:10px;
  }
  }

.acd-content::first-letter{
  font-size: 18px;
  padding:0 0.5em 0 0;
}

.acd-content ul > li{
  margin:0.5em 0;
  color: #e54646;
  font-weight: bold;
}

.acd-check:checked + .acd-label:after{
  font-family: "Font Awesome 5 Free";
  content: '\f068';
  font-weight: bold;
}
.acd-check:checked + .acd-label + .acd-content{
  height: 100%;
  opacity: 1;
  padding: 20px;
  visibility: visible;
  margin: 1em 1em;

}



/* --------------------------------------
  ブログ トピックス
--------------------------------------- */

#blog{
  /*color:#fff;*/
  background: -webkit-linear-gradient(45deg, #0f3973, #033143);
  background: linear-gradient(45deg, #0f3973, #033143);
  padding:60px 0;
  background-size: cover;
  background-attachment: fixed;
}
@media only screen and (max-width:544px){
#blog{
    padding: 0 0 25px;
  }
}

.blog_heading{
  color: #fff;
    font-size: 5.0em;
    letter-spacing: 2px;
    word-break: break-all;
    /* padding: 1rem 0.5rem; */
    padding: 30px 0;
    text-align: center;
    font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
}
@media only screen and (max-width:767px){
.blog_heading{
    font-size: 5.0vw;
  }
}

.blog_heading h2{
  line-height: 1.2;
  margin: 0;
}


#breadcrumb{
  padding:10px;
  margin:0;
}

#breadcrumb a{
  color: #fff;
}

.breadcrumb_inner{
max-width: 1000px;
margin: 0 auto;
width: 100%;
color: #fff;
padding: 0 3em;
}

#breadcrumb2{
  max-width: 1000px;
  padding: 0 0 1em;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-size: clamp(12px, 3vw, 14px);
}

#breadcrumb2 a{
  color: var(--color-amber);
  /* font-size: clamp(12px,3vw,14px); */
}

#breadcrumb3{
  max-width: 970px;
  padding: 5px 0;
  margin: 0 auto 10px;
  width: 96%;
  color: #fff;
}

#breadcrumb3 a{
  color: #fff;
}


.blog_container{
  position: relative;
  width: 94%;
  margin: 0px auto;
  box-sizing: border-box;
  text-align: center;
  overflow: scroll;
  height: 150px;
  margin:0px auto;
  border: 1px solid #ccc;
  max-width: 1000px;
  background: #fff;
  border-radius: 10px;
}
@media only screen and (max-width:544px){
.blog_container{
    height: 150px;
    margin:0px auto;
  }
}

.blog_article{
  width: 100%;
  display: block;
  margin: 15px 0 0;
  border-bottom: 1px dashed #ddd;
  padding: 0 0 15px;
}

.blog_thumb{
  float: left;
      width: 100%;
      margin: 0 0 0 20px;
      padding: 0 30px 0 0;
      max-width: 150px;
}
@media only screen and (max-width:480px){
  .blog_thumb{
    padding: 10px;
    max-width: 100px;
    margin: 0 auto;
  }
}

.blog_thumb img{
  width: 100%;
  height: auto;
}
@media only screen and (max-width:480px){
  .blog_thumb img{
    width: 100%;
    height: auto;
  }
}

.blog_content_inner{
  /*padding: 10px;*/
      /* border: 1px solid; */
  float: left;
  width: 60%;
  }
@media only screen and (max-width:768px){
  .blog_content_inner{
    width: 55%;
  }
}
@media only screen and (max-width:600px){
  .blog_content_inner{
    width: 45%;
  }
}
@media only screen and (max-width:480px){
  .blog_content_inner{
    width: 60%;
    margin: 0 auto;
  }
}

h3.blog_title{
  font-size: 1.5em;
  color: #1551b1;
  margin: 0 0 5px;
  text-align: left;
  /*padding: 5px;*/
  /* max-width: max-content; */
}
@media only screen and (max-width:480px){
  h3.blog_title{
    margin: 0;
  padding: 10px 0;
  }
}

.blog_title a{
  color:#000;
}

.blog_title a:link{
  color:#999;
}

.blog_meta{
  text-align: left;
  display: -webkit-flex;
  display: flex;
}

.blog_meta p{
  background: #eee;
  padding: 3px;
  margin: 0 5px 0 0;
  max-width: max-content;
}

.blog_excerpt{
  text-align: left;
  margin: 10px 0;
}
@media only screen and (max-width:380px){
  .blog_excerpt{
    margin: 5px 0; } }
.blog_excerpt a{
color:#333;
}

/************************
  slick ブログ用 css
************************/

.slick-slider{
  margin-bottom:0;
}

.slick-prev{
  left: 0!important;
  z-index: 2;
  position: relative;
}

.slick-prev:before{
  content:'\f104'!important;
  font-family:"Font Awesome 5 Free"!important;
  font-weight: bold;
  color: #fff!important;
}

.slick-next{
  right:0!important;
  z-index: 2;
  position: relative;
}

.slick-next:before{
  content:'\f105'!important;
  font-family:"Font Awesome 5 Free"!important;
  font-weight: bold;
  color: #fff!important;
}

.slick-dots li.slick-active button:before{
  color:#fff!important;
}

.slick-dots li button:before{
  color:#fff!important;
}

.slick-slide {
  position: relative;
}

.slick-slide .caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: calc(100% - 40px);
  padding: 20px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: .3s ease;
}
.slick-current .caption {
  opacity: 1;
  transition-delay: .5s;
}


.owned{
  text-align: center;
  margin: 30px auto 0;
  max-width: 1000px;
  width: 94%;
}

.owned img{
  width: 100%;
  height: auto;
}


/************************
    single.php用 css
************************/
#single_page{
  padding: 1em 0;
  background: linear-gradient(360deg, rgba(000, 000, 000, 0.6) 0%, rgba(000, 000, 000, 0.6) 20%, rgba(000, 000, 000, 0.1) 80%, rgba(000, 000, 000, 0) 100%);
}

.single_container{
  display:block;
  width: 100%;
  justify-content: space-around;
  margin: 0px auto;
  max-width: 1200px;
  padding:60px 3em 60px;
}
@media only screen and (min-width:1200px) {
.single_container{
  display: flex;
  width:100%}}
@media only screen and (max-width:600px) {
  .single_container{
    padding:40px 2em 20px;
    }}


.entry_container{
  max-width: 1000px;
  width: 100%;
  margin: 0px auto;
  padding:0;
  box-sizing: border-box;
  color: #fff;
}

@media only screen and (max-width:768px){
.entry_container{
  margin:0 auto;
  border:none;
  padding: 0;
} }

h1.entry_title{
  font-size: 2.6em!important;
  margin: 13px 0!important;
  float: none;
}

h1.entry_title a{
color:#333;
}

.meta_entry{
  margin: 0 0 1em;
}

.meta_entry p{
  float:left;
  margin: 0 10px 0 0!important;
  font-size:14px;
}

.blog_head{
  clear:both;

}

.blog_header{
  text-align:center;
}

.blog_header img{
width:100%;
height: auto;
}

.entry{
  font-size: 1.2em;
  margin: 10px auto;
}

.entry img{
  max-width:100%;
  height:auto;
}

@media only screen and (max-width:768px) {
.entry img{
  max-width:100%; } }

.cat{
  background:var(--color-dark-brown);
  padding:3px;
}

.cat a{
  color:#fff;
}

.nav_links{
  text-align: center;
  font-size: 1.6em;
  margin: 70px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: center;
  gap: 0 2em;
}
@media only screen and (max-width:600px) {
  .nav_links{
    font-size: 1.2em; } }

.prev_link a{
  width: 100%;
  float: left;
  display: block;
  padding: 1em;
  background: #870202;
  color: #fff;
  transition: 0.5s ease-in-out;
  font-weight: bold;
}

.next_link a{
  width: 100%;
  float: left;
  display: block;
  padding: 1em;
  background: #870202;
  color: #fff;
  transition: 0.5s ease-in-out;
  font-weight: bold;
}


.prev_link a:hover,.next_link a:hover{
  box-shadow: 1px 1px 2px #ececec;
}

/************************************
** サイドバー（Sidebar）・ウィジェットなど
************************************/

#sidebar{
  /*width: auto;*/
  display: block;
  height: max-content;
  max-width: 1000px;
  padding:0;
  width: 100%;
  margin: 5em auto 0;
  position: relative;
  z-index: 11;
}

@media only screen and (min-width:1200px) {
#sidebar{
  width: 100%;
  max-width: 320px;
  min-width:320px;
  margin: 0 0 0 3em;
  }}
@media only screen and (max-width:768px) {
  #sidebar{
    border:none;
    }}

#sidebar a{
  color: #D2601A;
}


#sidebar .widget_categories{

}

#sidebar h3{
  margin-bottom: 10px;
  font-size: 18px;
  background: #000;
  padding: 5px 7px;
  color: #fff;
}
#sidebar .widget{
  margin-bottom: 25px;
  /*padding: 30px;*/
  color: #fff;
}

.widget_search{
  margin-bottom: 0;
}

#sidebar ul,
#sidebar ol,
.widget-over-article ul,
.widget-over-article ol,
.widget-under-article ul,
.widget-under-article ol,
.widget-over-sns-buttons ul,
.widget-over-sns-buttons ol,
.widget-under-sns-buttons ul,
.widget-under-sns-buttons ol{
  padding-left: 1em;
  list-style:none;
}

#sidebar ul.snsp,
#main ul.snsp,
#footer ul.snsp{
  padding-left: 0;
}

.widget-over-article{
  margin-top: 10px;
  margin-bottom: 10px;
}

#sidebar-recent-posts li,
#sidebar-popular-posts li{
  margin:20px 0;
}

#sidebar li{
  margin-bottom: 8px;
  font-size:16px;
}

.sidebar-thumbnail-box{
  float: left;
  width: 75px;
}

.sidebar-recent-posts-title{
  float: right;
  width: 165px;
}
  #sidebar-recent-posts h3,
  #sidebar-recent-posts p,
  #sidebar-popular-posts h3,
  #sidebar-popular-posts p{
    margin: 0;
  }

#main .widgets{
  margin-top: 20px;
  margin-bottom: 20px;
}

#sidebar .widget_category_sns_follow_buttons ul,
.widget_category_sns_follow_buttons ul{
  padding-left: 0;
}

.widget_text ul {
  list-style-type:  disc;
}
.widget_text ol {
  list-style-type:  decimal;
}

/************************************
** 新着記事・人気記事（new, pupular）
************************************/
.widget_new_entries,
.widget_new_popular,
.widget_popular_ranking{
  line-height:150%;
}

.widget_new_entries h4,
.widget_new_popular h4,
.widget_popular_ranking h4{
  margin-bottom:15px;
}

#main .widget_new_entries ul,
#main .widget_new_popular ul,
#main .widget_popular_ranking ul,
#sidebar .widget_new_entries ul,
#sidebar .widget_new_popular ul,
#sidebar .widget_popular_ranking ul,
#footer .widget_new_entries ul,
#footer .widget_new_popular ul,
#footer .widget_popular_ranking ul {
  padding-left:0;
  list-style:none;
}

.widget_new_entries ul li,
.widget_new_popular ul li,
.widget_popular_ranking ul li {
  clear: left;
  float: none;
  margin-bottom:10px;
/*  overflow: auto;
  zoom: 1;*/
}

.widget_new_entries ul li img,
.widget_new_popular ul li img,
.widget_popular_ranking ul li img {
  border: medium none;
  display: inline;
  float: left;
  margin-top: 3px;
  margin-right: 5px;
  width: 75px;
  height: 75px;
  margin-bottom: 10px;
}

span.wpp-views{
  font-size:x-small;
  font-style:italic;
}

/************************************
** 新着記事・人気記事（拡張）
************************************/
.widget_new_entries .new-entrys-large .new-entry,
.widget_new_popular .popular-entrys-large .popular-entry,
.widget_new_popular .new-entrys-large .new-entry,
.widget_new_popular .popular-entrys-large .wpp-list li,
.widget_popular_ranking .popular-entrys-large .popular-entry,
.widget_popular_ranking .popular-entrys-large .wpp-list li{
  margin-bottom:15px;
  line-height:120%;
  position:relative;
  display:block;
  max-width: 440px;/*これを書いておかないと、タイトル部分がはみ出す*/
  overflow: visible;
}

.widget_new_entries .new-entrys-large .new-entry img,
.widget_new_popular .popular-entrys-large .popular-entry img,
.widget_new_popular .new-entrys-large .new-entry img,
.widget_new_popular .popular-entrys-large .wpp-list li img,
.widget_popular_ranking .popular-entrys-large .popular-entry img,
.widget_popular_ranking .popular-entrys-large .wpp-list li img{
  width:100%;
  float:none;
  margin:0;
  display:block;
  margin-bottom:5px;
  min-height: 180px;
  max-width: 440px;/*iPhone6は幅が414pxなのでそれより大きく*/
  max-height: 240px;
  height: auto;
}


/************************************
** タグクラウド
************************************/

.tagcloud a{
  padding-left: 1rem;
  margin-bottom: 8px;
  font-size: 16px!important;
}



/************************
    home.php用 css
************************/

#home-contents{
  padding: 0;
  background: rgb(0 0 0 / 85%);
}

.home_container{
width: 100%;
max-width: 1000px;
margin: 4em auto 0;
padding:0 3em;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: center;
}

.page-blog-header{
  position: relative;
  background: url(./images/page-head.jpg) 100% 50% no-repeat;
  background-size: cover;
  min-height: 200px
}

.page-blog-header::before{
  position: absolute;
  content: '';
  background: #000;
}

.page-blog-header h2{
  position: absolute;
  color: #fff;
  font-weight: bold;
  font-size: var(--heading-font-xl);
  position: absolute;
  line-height: 1.5;
  text-align: center;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  width: 100%;
}

.page-blog-header img{
  width:100%;
  height:auto;
}

.home_heading h3{
color: #fff;
font-size: 2.2em;
text-shadow: 0 0 7px #999;
text-align: center;
margin: 50px 0 30px;
}

.home_contents_box{
  padding: 2em;
  background: url(./images/bg001.png);
  width: 100%;
  margin: 0 0 4em;
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 2em;
  border: 0.5px solid #8e860f;
}

@media only screen and (max-width:768px) {
  .home_contents_box{
    width: 100%;
    grid-template-columns:1fr;
  } }

.home_contents_box a{
  color: #fff;
}

.home_content_inner{
padding: 0;
width: 100%;
}

.home_contents_title{
  font-size:var(--heading-font-m);
  padding: 0;
  margin: 0;
  text-align: left;
}

.home_contents_title a{
color: #fff;
}

.home_thum{
width: 100%;
}

.home_thum img{
width: 100%;
height: auto;
vertical-align: bottom;
}

.home_contents_meta{
  padding: 1em 0;
}

.home_contents_date{
  color: #fff;
}

.home_contents_cat{
  padding: 1px;
  margin: 0;
  background: #870202;
}

.home_contents_cat a{
  color: #fff;
}

.home_contents_entry{
  width:100%;
}


.home_contents_entry p{
  font-size:14px;
  padding:0;
  text-align: left;
}

.home_alart{
padding:0;
margin: 0 auto;
}

.home_alart p{
  font-size: 16px;
  margin: 0 0 1em;
  color: #fff;
}

/**** home.php用 css ここまで ****/


/*archive.php用 css */

#contents{
  background: rgb(0 0 0 / 60%);
}


.arc_container{
  width:100%;
  max-width:1000px;
  margin:4em auto 0;
  text-align: center;
  padding:0 3em 1em;
}

.arc_head{
  background:url(./images/page-head.jpg) 100% 50%;
  background-size:cover;
  height:200px;
  position:relative;
}


.arc_head h2{
  position: absolute;
    color:#fff;/*文字は白に*/
    font-weight: bold; /*太字に*/
    font-size: 36px;/*サイズ2倍*/
    /*font-family:IMPACT;/*Google Font*/
    position: absolute;
    line-height: 1.5;
    text-align: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
}
@media only screen and (max-width:480px){
.arc_head h2{
font-size: 26px;
} }


.arc_box{
  padding: 2em;
  background:var(--color-off-white);
  width: 100%;
  margin: 0 0 4em;
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 2em;
}

@media only screen and (max-width:768px){
  .arc_box{
    width: 100%;
    grid-template-columns: 1fr;
  } }


.arc_box a{
  color:var(--color-mid-brown);
}

.arc_title{
  font-size: var(--heading-font-m);
  padding: 0;
  margin: 0;
  text-align: left;
}

.arc_title a{
    color:var(--color-mid-brown);
}

.arc_inner{
  padding:0;
  width: 100%;
  padding:0;
}

.entry_meta{
  padding: 1em 0;
  text-align: left;
  font-size: 1.4em;
}

.entry_meta .date{
  margin: 0;
  padding: 0;
  display: inline-block;
  color: var(--color-mid-brown);
}


.arc_cat{
  padding: 1px;
  margin: 0;
  /* background: var(--color-brown); */
}

.entry_content{
  width:100%;
  padding:0;
}

.arc_thum img{
  width: 100%;
  height: auto;
}

.entry_content p{
  font-size: 14px;
  padding: 0;
  text-align: left;
}




/* --------------------------------------
  ページネーション　pagination
--------------------------------------- */

.pagination {
    width: 100%;
    margin: 70px 0;
    text-align: center;
    position: relative;
    z-index: 200;
    font-size: 14px;
    color: #fff;
    padding:0 10px;
}

.page-numbers{
  display: inline-block;
}

a.page-numbers{
  /* background: rgba(0,0,0,0.02); */
  /*border: solid 1px rgba(0,0,0,0.1);*/
  margin: 0 5px;
  background: #1e7698;
  color:#fff;
  text-align: center;
  padding: 7px 13px;
  margin: 5px 0;
}

.page-numbers.current{
  margin: 5px 0;
  text-shadow: 0 0 7px #333;
  padding:7px 13px;
}




/* --------------------------------------
  media
--------------------------------------- */

#media{
background: #fff;
padding: 0 0 30px;
position: relative;
overflow: hidden;
}

#media img{
  width: 100%;
  height: auto;
}

.media_heading{
color: rgb(255, 255, 255);
font-size: 4vw;
letter-spacing: 2px;
line-height: 1.2;
word-break: break-all;
font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
text-align: left;
position: absolute;
top:5%;
right: 8%;
transform: translate(10%,28%);
padding: 0px;
text-shadow: 0 0 20px #000;
z-index: 2;
}

.media_heading h2{
  margin: 0;
}

.media_catch{
width: 100%;
}

.media_catch figure{
  margin: 0;
}

.multiple li{
  padding: 0 2%;
}

@media only screen and (max-width:480px){
  .fancybox-caption{
font-size: 11px!important;
padding: 20px 30px!important;
  } }

/* --------------------------------------
  予約ヘッダーボタン 
--------------------------------------- */
/* --------------------------------------
  予約ボタン
--------------------------------------- */
.button-header{
  margin:0;
}

.button-header a,
.button-header a::after {
-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
-o-transition: all 0.3s;
  transition: all 0.3s;
}

.button-header a {
  background: none;
  border: 1px solid;
  color: #fff;
  font-size: clamp(1.4em,3vw,2em);
  font-weight: bold;
  max-width: 450px;
  width: 96%;
  padding:1em;
  text-align: center;
  display: block;
  letter-spacing: .1em;
  position: relative;
  margin: 1em auto;
  line-height: 1.5;
  text-decoration: none;
  -o-transition-duration: 400ms;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  box-shadow: 3px 4px 0;
}

.button-header a::before,
.button-header a::after {
background: #fff;
content: '';
position: absolute;
z-index: -1;
}

.button-header a:hover {
opacity: 0.9;
color:#000;
transition: 0.4s;
text-shadow: none;
border:1px solid #fff;
}

.button-header a::after {
height: 0;
left: 50%;
top: 50%;
width: 0;
}

.button-header a:hover:after {
height: 100%;
left: 0;
top: 0;
width: 100%;
}

.button-header p{
font-size: 2em;
}


/* --------------------------------------
  予約ボタン 
--------------------------------------- */

.button a,
.button a::after {
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
    transition: all 0.3s;
}

.button a {
  background: none;
      border: 1px solid;
      color: #000;
      font-size: 1.5em;
      max-width: 600px;
      width: 94%;
      padding:10px;
      text-align: center;
      display: block;
      letter-spacing: .1em;
      position: relative;
      margin: 0px auto;
      line-height: 1.5;
      text-decoration: none;
      -o-transition-duration: 400ms;
      -webkit-transition-duration: 400ms;
      transition-duration: 400ms;
}

@media only screen and (max-width:480px){
.button a{
  font-size:1.2em;
} }

.button a::before,
.button a::after {
  background: #000;
  content: '';
  position: absolute;
  z-index: -1;
}

.button a:hover {
  opacity: 0.9;
  color:#fff;
  transition: 0.4s;
  text-shadow: none;
}

.button a::after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

.button a:hover:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

/* --------------------------------------
  予約ボタン セカンド
--------------------------------------- */

.button2{
  margin:20px 0px;
}

.button2 a,
.button2 a::after {
-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
-o-transition: all 0.3s;
  transition: all 0.3s;
}

.button2 a {
      /* background:#465ba9; */
      /* background:#0087d7; */
      background:#1d8a24;
      /* box-shadow: 0 4px 0 #124e82; */
       box-shadow: 0 4px 0 #07470a;
      color: #fff;
      font-size: 2.4em;
      font-weight: bold;
      max-width: 800px;
      width: 100%;
      padding:20px;
      text-align: center;
      display: block;
      letter-spacing: .1em;
      position: relative;
      margin: 0px auto;
      line-height: 1.5;
      text-decoration: none;
      -o-transition-duration: 400ms;
      -webkit-transition-duration: 400ms;
      transition-duration: 400ms;
}
@media only screen and (max-width:600px){
.button2 a {
  font-size: 2.0em;}
}

.btn2-style-margin{
  margin: 20px;
}

/*.button2 a::before,
.button2 a::after {
background:#465ba9;
content: '';
position: absolute;
z-index: -1;
}*/

.button2 a:hover {
opacity: 0.9;
color:#fff;
transition: 0.4s;
text-shadow: none;
/*border: 2px solid #465ba9;*/
}

.button2 a::after {
height: 100%;
left: 0;
top: 0;
width: 0;
}

.button2 a:hover:after {
width: 100%;
}

/* --------------------------------------
  予約ボタン
--------------------------------------- */


.button3{
  padding: 2em 0;
  margin: 0 auto;
  max-width: var(--width-800);
}

.button3 a,
.button3 a::after {
-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
-o-transition: all 0.3s;
  transition: all 0.3s;
}

.button3 a {
  /* background: #9b1c1c; */
  background: linear-gradient(0deg, #540808, #bc1818);;
  box-shadow: 0 6px 0 #480606;
  color: #fff;
  font-size: 1.8em;
  font-weight: bold;
  border-radius: 100px;
  width: 100%;
  padding: clamp(1em, 3vw, 2em) 0.4em;
  text-align: center;
  display: block;
  letter-spacing: .1em;
  position: relative;
  margin: 0px auto;
  line-height: 1.5;
  text-decoration: none;
  -o-transition-duration: 400ms;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}


.button3 a:hover {
opacity: 0.8;
color:#fff;
transition: 0.4s;
text-shadow: none;
/*border: 2px solid #336336;*/
}

.button3 a::after {
height: 100%;
left: 0;
top: 0;
width: 0;
}

.button3 a:hover:after {
width: 100%;
}


/* --------------------------------------
  電話予約　フロート
--------------------------------------- */

#float_tel_reserve{
  position: fixed;
  bottom:200px;
  right: 20px;
  font-size: 80%;
  z-index: 100;
}
@media only screen and (max-width:480px){
#float_tel_reserve{
    bottom: unset;
    right: unset;
    position: initial;
    margin: 0;
    flex-basis: 100%;
} }

#float_tel_reserve a {
  background:#225290;
  color: #fff!important;
      text-decoration: none;
      width: 50px;
      padding: 5px;
      font-size: 1.2em;
      text-align: center;
      display: block;
      line-height: 40px;
      -webkit-transition:0.5s;
      transition: 0.5s;
      /* border-radius: 50%; */
}
@media only screen and (max-width:480px){
#float_tel_reserve a{
    width:auto;
    padding: 10px 0;
} }

#float_tel_reserve a:hover {
    text-decoration: none;
    width: 100px;
/*background: rgba(197, 197, 197, 0.8);*/
}
@media only screen and (max-width:480px){
#float_tel_reserve a:hover{
    width:auto;
} }

/* --------------------------------------
  WEB予約　フロート
--------------------------------------- */

#float_web_reserve{
  position: fixed;
  bottom: 140px;
  right: 20px;
  font-size: 80%;
  z-index: 100;
}
@media only screen and (max-width:480px){
#float_web_reserve{
  bottom: unset;
  right: unset;
  position: initial;
  margin: 0;
  flex-basis: 100%;
} }

#float_web_reserve a {
  background:#225290;
  color: #fff!important;
      text-decoration: none;
      width: 50px;
      padding: 5px;
      font-size: 1.2em;
      text-align: center;
      display: block;
      line-height: 40px;
      -webkit-transition:0.5s;
      transition: 0.5s;
      /* border-radius: 50%; */
}
@media only screen and (max-width:480px){
#float_web_reserve a{
    width:auto;
    padding: 10px 0;
} }

#float_web_reserve a:hover {
    text-decoration: none;
    width: 100px;
/*background: rgba(197, 197, 197, 0.8);*/
}
@media only screen and (max-width:480px){
#float_web_reserve a:hover{
    width:auto;
} }


/* --------------------------------------
  LINE予約　フロート
--------------------------------------- */

#float_line_reserve{
  position: fixed;
  bottom: 80px;
  right: 20px;
  font-size: 80%;
  z-index: 100;
}
@media only screen and (max-width:480px){
#float_line_reserve{
  bottom: unset;
  right: unset;
  position: initial;
  margin: 0;
  flex-basis: 100%;
} }

#float_line_reserve a {
  background:#00c000;
  color: #fff!important;
      text-decoration: none;
      width: 50px;
      padding: 5px;
      font-size: 1.2em;
      text-align: center;
      display: block;
      line-height: 40px;
      -webkit-transition:0.5s;
      transition: 0.5s;
      /* border-radius: 50%; */
}
@media only screen and (max-width:480px){
#float_line_reserve a{
    width:auto;
    padding: 10px 0;
} }

#float_line_reserve a:hover {
    text-decoration: none;
    width: 100px;
/*background: rgba(197, 197, 197, 0.8);*/
}
@media only screen and (max-width:480px){
#float_line_reserve a:hover{
    width:auto;
} }


/* --------------------------------------
  トップへ戻る
--------------------------------------- */

#page-top {
  position: relative;
  margin: 0;
}

#page-top a {
  background:var(--color-mid-brown);
  text-decoration: none;
  width: 100%;
  padding: 5px;
  font-size:var(--heading-font-m);
  text-align: center;
  display: block;
  line-height: 40px;
  color: var(--color-dark-brown);
  font-family: var(--font-display);
}
#page-top a:hover {
    text-decoration: none;
/*background: rgba(197, 197, 197, 0.8);*/
}

#page-top a img{
  width:100%;
  max-width: 100px;
}

.fa {
  display: initial!important;
  font-family:"Font Awesome 5 Free";
  font-style: normal;
  font-weight:bold;
 font-size: 15px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color:#fff;
  vertical-align: middle;
}

.fa-chevron-up:before{
vertical-align: middle;
}


/* container 各セクション 最大幅指定
------------------------------------------------------------*/
.container{
max-width:1200px;
width:94%;
margin:0 auto;
}
@media only screen and (max-width:480px){
  .container{
  padding:0;
  } }


/********************
/* ロゴ
*********************/

.logo{
display: inline-flex;
}

.logo h1,.logo p{
margin: 0;
}

.logo img{
  width: clamp(50px, 3vw, 150px);
  display: block;
  margin:0;
}

.head_inner{
    width: 100%;
    margin: 0 auto;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: rgba(26, 26, 26, 0);
    border-bottom: 1px solid transparent;
}


/* --------------------------------------
  ナビゲーション パターン１
--------------------------------------- */

.inner:after {
    content: "";
    clear: both;
    display: block;
}

/* header */
#top-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: background .5s, border-color .5s, padding .5s;
}

#global-nav ul {
    list-style: none;
    margin: 0 auto;
    text-align: center;
clear:both;
max-width:1000px;

}

#global-nav ul li {
    display: inline-block;
}

#global-nav ul li a {
  padding: 10px 5px;
  display: block;
  text-transform: uppercase;
  font-size: 1.2em;
}

#global-nav ul li:hover a{
  background: #da0303c4;
  color: #fff;
}

/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    /*padding: 10px 0;*/
    /*height: 55px;*/
    background: #E91E63;
    background: rgba(233, 30, 99, 0.9);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
    color: #fff;
}
#top-head.fixed #global-nav ul li a {
    color: #000;
    /*padding: 0 20px;*/
}




/* PC用ナビゲーション CSS */

#top-head.scrolled {
    background: rgba(26, 26, 26, .95);
    border-bottom: 1px solid #a9520a;
    /* backdrop-filter: blur(8px); */
}

.hd-nav { display: flex; gap: 28px; align-items: center; }
@media (max-width: 768px) {
    .hd-nav {display: none;}
  }
.hd-nav a { font-size: 12px; letter-spacing: .1em; color: var(--color-off-white); transition: color .2s; }
.hd-nav a:hover { color: var(--color-amber); }
.hd-cta {
  font-size: 14px; letter-spacing: .08em; padding: 8px 20px;
  border: 1px solid var(--color-orange); color: var(--color-orange); border-radius: 2px;
  transition: background .2s, color .2s;
}
.hd-cta:hover { background: var(--color-orange); color: #fff; }
.hd-hamburger { display: none; flex-direction: column; gap: 5px; width: 24px; }
.hd-hamburger span { display: block; height: 1px; background: var(--color-off-white); transition: all .3s; }



/* -----------------------------------------
header_img
----------------------------------------- */

.main_header{
  vertical-align: bottom;
  position:relative;
  overflow: hidden;
  z-index: 11;
  overflow:hidden;
  padding:5px 0 0;
  color:#000;
  background:url(./images/header01.jpg) 10% 50%;
  background-size:cover;
  height: 100vh;
  }
  
  .main_header img{
    width: 100%;
  }

.main_header::before{
  /* 透過した黒を上から重ねるイメージ */
    background-color: rgba(0,0,0,0.4);
    /* 自由に位置指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}

.main_header .header-bg-text{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); /*上下左右中央寄せ*/
  text-align:center;
  width: 75%;
}

.main_header .header-bg-text h2{
  font-size:5vw;
  font-weight:bold;
  line-height: 1.5;
  color:#fff;
  font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
}
@media only screen and (max-width:600px){
.main_header .header-bg-text h2{
  font-size:2.8em;
  } }

.main_header .header-bg-text p{
  font-size:3vw;
  color:#fff;
  font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
}
@media only screen and (max-width:544px){
.main_header .header-bg-text p {
  font-size: 3em;
  } }

.header_img{
  width:100%;
  padding: 0;
  margin: 0;
}

.header_img img{
  width:100%;
  }

/* --------------------------------------
  店舗情報
--------------------------------------- */

.map {
  width: 100%;
  height: 100%;
  margin: 0 0 40px 0;
  padding: 0;
}

.detail {
  margin: 0 0 10px 0;
}

.table_detail {
  float: right;
  width: 100%;
  margin-bottom: 40px;
  border-top: 1px solid #bfbfbf;
}

.table_detail th {
  width: 150px;
  text-align: center;
  white-space: normal;
  word-break: break-all;
  padding: 20px 20px;
  border-bottom: 1px solid #bfbfbf;
  border-left: 1px solid #bfbfbf;
}

.table_detail td {
  width: 350px;
  padding: 20px 20px;
  white-space: normal;
  word-break: break-all;
  border-bottom: 1px solid #bfbfbf;
  border-left: 1px solid #bfbfbf;
  border-right: 1px solid #bfbfbf;
}

/* --------------------------------------
 予約
--------------------------------------- */

#reservation{
  background: linear-gradient(to bottom, rgba(000, 000, 000, 0.6) 0%, rgba(000, 000, 000, 0.6) 20%, rgba(000, 000, 000, 0.1) 80%, rgba(000, 000, 000, 0) 100%);
  padding: 10em 2em 5em 0;
  overflow: hidden;
  position: relative;
  margin: 0 auto;

}
@media only screen and (max-width:1024px){
  #reservation{

    padding: 3em 0;
  }
}

.reservation_heading{
    /* max-width: 400px; */
    margin: 6em auto;
    text-align: center;
}

.reservation_heading h2{
    padding: 0;
    /* text-align: center; */
    font-family: "Noto Serif JP", serif;
    font-size: clamp(24px, 2.5vw, 36px);
    color: #fff;
}

.reservation_container {
  /* display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: flex-start; */
  margin: 0px auto;
  width: 90%;
  padding: 0 2em;
  max-width: 1600px;
  border-bottom: 1px solid #fff;
}
@media only screen and (max-width:1024px){
  .reservation_container {
  grid-template-columns:1fr;
  padding:0;
  } }

.reservation_container img{
  max-width:100%;
  height: auto;
  display: block;
}


/************************
    予約共通 css
************************/



.reservation_inner{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3em;
  align-items: flex-start;
}
@media only screen and (max-width:1024px){
  .reservation_inner{
    grid-template-columns: 1fr;
    gap: 0;
    max-width:var(--width-800);
    margin: 0 auto;
  } }

.reservation_text{
  margin: 0;
  width: 100%;
  /* max-width: 800px; */
  position: relative;
  color: #fff;
}

.reservation_text h3{
  font-size: 2.4em;
  /* text-align: center; */
  margin: 0 0 3em;
  }
  @media only screen and (max-width:1024px){
    .reservation_text h3{
      text-align: center;
    } }

.reserve_box{
margin: 0 0 5em;
}

.reserve_box dl{
margin:0;
}

.reserve_box dt{
  font-size: 1.6em;
  }

.reserve_box dd{
  font-size: 1.4em;
}

.reserve_box p{
 font-size: 1.4em;
 margin: 0 0 1em;
}

.flex__contents{
  display: grid;
}

/****************************
    予約ボタン 電話・WEB・LINE
****************************/

.resb-btn-base{
  max-width: 800px;
  width: 100%;
  margin: 10px 0;
  align-items: baseline;
  display: inline-flex;
  gap: 0.5em;
  padding: 1.3em 10px;
  background-color: #a8a8a3;
  color: #fff;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 6px #5a584c;
  justify-content: center;
  font-size: 1.2em;
  font-weight: bold;
}

.resb-btn-base:visited{
  color: #fcfcfc;
}

.resb-btn-base:hover{
  box-shadow: 0 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.resb-btn-web{
  background-color: var(--color-orange);
  box-shadow: 0 6px #732c02;
}

.resb-btn-line{
  background-color: #00c000;
  box-shadow: 0 6px #014e01;
}



/************************
  電話予約セクション
************************/


#tel_reservation {
position: relative;
margin: 0 0 50px;
}

#tel_reservation::after{
  position: absolute;
      content: '';
      top: 10%;
      width: 200vw;
      height: 75%;
      background: #815236;
      /* z-index: 0; */
      left: -10%;
      background: -webkit-linear-gradient(45deg, #982a2a, #a91212);
      background: linear-gradient(45deg, #982a2a, #a91212);
  }


.tel_reservation_inner{
  position: relative;
  z-index: 1;
}
@media only screen and (max-width:768px){
.tel_reservation_inner{
    -webkit-display:flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.tel_reservation_inner figure{
padding: 50px;
}
@media only screen and (max-width:768px){
.tel_reservation_inner figure{
  padding:0px;
  margin: 0 auto;
  }
}

.tel_reserve_text{
top: 50%;
padding: 25px;
box-shadow: 0 0 30px -5px #bdbaba;
background: #fff;
position: absolute;
right: 0;
margin: 0 50px 0 0;
z-index: 2;
}
@media only screen and (max-width:768px){
.tel_reserve_text{
    position: relative;
    margin: -60px 50px 0 10px;
  }
}
@media only screen and (max-width:380px){
.tel_reserve_text{
    position: relative;
    margin: -60px 10px 0 10px;
  }
}

.tel_reserve_text h3{
font-size: 2.0em;
margin: 0 0 20px;
font-weight: bold;
color: #a91212;

  }


.tel_reserve_text dt{
  font-size: 1.5em;
  }

.tel_reserve_text dd{
  font-size: 1.5em;
}

.tel_reserve_text p{
 font-size: 1.5em;
}


/*WEB予約セクション*/

#web_reservation{
position: relative;
margin: 0 0 50px;
}

#web_reservation::after{
  position: absolute;
      content: '';
      top: 10%;
      width: 200vw;
      height: 75%;
      background: #815236;
      /* z-index: 0; */
      right: -10%;
      background: -webkit-linear-gradient(60deg, #0f3973, #033143);
      background: linear-gradient(60deg, #0f3973, #033143);
  }



.web_reservation_inner{
  position: relative;
  z-index: 1;
  -webkit-display: flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media only screen and (max-width:768px){
.web_reservation_inner{
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.web_reservation_inner figure{
padding: 50px;
}
@media only screen and (max-width:768px){
.web_reservation_inner figure{
  padding:0px;
  margin: 0 auto;
  }
}

.web_reserve_text{
bottom:35%;
padding: 25px;
box-shadow: 0 0 30px -5px #bdbaba;
background: #fff;
position: absolute;
left: 0;
margin: 0 0 0 50px;
z-index: 2;
}
@media only screen and (max-width:768px){
.web_reserve_text{
    position: relative;
    margin: -60px 10px 0 40px;
  }
}
@media only screen and (max-width:380px){
.web_reserve_text{
    position: relative;
    margin: -60px 10px 0 10px;
  }
}

.web_reserve_text h3 {
font-size: 2.0em;
margin:0 0 15px;
color: #225290;
}

.web_reserve_text p{
  font-size: 1.5em;
  margin: 0 0 10px;
}

/*LINE予約セクション*/

#line_reservation {
position: relative;

}


#line_reservation::after{
  position: absolute;
      content: '';
      top:0;
      width: 200vw;
      height: 75%;
      background: #815236;
      /* z-index: 0; */
      left: -10%;
      background: -webkit-linear-gradient(45deg, #157f15, #3fcd14);
      background: linear-gradient(45deg, #157f15, #3fcd14);
}

.line_reservation_inner{
  position: relative;
  z-index: 1;
}
@media only screen and (max-width:768px){
.line_reservation_inner{
    -webkit-display:flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.line_reservation_inner figure{
padding: 50px;
display:inline-block;
}
@media only screen and (max-width:768px){
.line_reservation_inner figure{
  padding:0px;
  margin: 0 auto;
  }
}

.line_reserve_text{
  bottom:0;
  padding:30px;
  box-shadow: 0 0 30px -5px #bdbaba;
  background: #fff;
  position: absolute;
  right: 0;
  margin: 0 50px 0 0;
}
@media only screen and (max-width:768px){
.line_reserve_text{
    position: relative;
    margin: -60px 30px 0 30px;
    padding: 25px;
    z-index: 2;
  }
}
@media only screen and (max-width:380px){
.line_reserve_text{
    position: relative;
    margin: -60px 10px 0 10px;
  }
}

.line_reserve_text h3 {
    font-size: 2.0em;
    margin: 0 0 15px;
    color: #02b902;
  }

.line_reserve_text p{
  font-size: 1.5em;
  margin: 0 0 15px;
}

.reserve-img img{
  max-width: 200px;
}


/* --------------------------------------
サイトマップコンテンツ
--------------------------------------- */

.sitemap_head{
background:url(./images/page-head.jpg) 50% 50%;
background-size:cover;
height:33.3vh;
position:relative;
}

.sitemap_head h2{
  position: absolute;
    color:#fff;/*文字は白に*/
    font-weight: bold; /*太字に*/
    font-size: 36px;/*サイズ2倍*/
    /*font-family:IMPACT;/*Google Font*/
    position: absolute;
    line-height: 1.5;
    text-align: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
}

#sitemap-contents{
  padding:0;
  background: #fff;
}

.sitemap_container{
  padding: 30px 0;
  max-width: 800px;
  margin: 0 auto;
}

.sitemaps_list{
padding: 10px;
}

.sitemaps_list li{
  font-size:1.5em;
  margin: 0 5px 10px;
}
@media only screen and (max-width:425px){
.sitemaps_list li{
font-size: 1.2em;
} }

.sitemaps_list li a:visited{
  color: #3a92b3;
}

.children{
  margin-top: 10px;
  padding-left: 20px;
}

.children li{
  font-size:75%!important;
  border-bottom:none;
  margin-bottom: 5px;
}

.sitemaps_list li:before{
    font-family:"Font Awesome 5 Free";
    content: "\f0da";
    font-weight: bold;
    /* position: absolute; */
    /* left: 1.5em; */
    padding-right: 10px;
  }

/* --------------------------------------
    404.php
--------------------------------------- */

#contents2{
    padding: 10em 0;
    background: linear-gradient(to bottom, rgba(000, 000, 000, 0.6) 0%, rgba(000, 000, 000, 0.6) 20%, rgba(000, 000, 000, 0.1) 80%, rgba(000, 000, 000, 0.6) 100%);
  }

  .error_container{
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }

  .error_title{
    font-size: 6.0vw;
    text-align: center;
    font-weight: bold;
    color: #fff;
  }
  @media only screen and (min-width:1024px){
  .error_title{
  font-size: 6.0em;
  } }

  .error_message{
    text-align: center;
    color: #fff;
  }

  .error_message h3{
    font-size: 4.0vw;
    text-align: center;
    font-weight: 500;
    margin: 0 0 10px;
  }
  @media only screen and (min-width:1024px){
  .error_message h3{
  font-size: 3.0em;
  } }

  .error_message p{
    font-size:12px;
  }


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

#gfooter{
  color: #fff;
  position: relative;
}

#footernav{
padding:0;
}

#footernav ul{
  margin: 3em auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width:768px){
  #footernav ul{
    max-width: 800px;

  } }

#footernav li{
  box-sizing: border-box;
  font-size: 1.4em;
  margin: 0 0 1em;
}

#footernav li:before{
  font-family:"Font Awesome 6 Free";
  content: "\f105";
  padding-right: 10px;
  font-weight: bold;
  /* position: absolute; */
  /* left: 1.5em; */
}

#footernav li a{
  transition: 0.8s;
  -webkit-transition: 0.8s;
  color: #fff;
}

#gfooter small{
  text-align: center;
  display: block;
  margin: 0;
  color: #fff;
  padding:1em;
  font-size: 12px;
  background: linear-gradient(#000,#1b1b1b7e);
}
@media only screen and (max-width:768px){
#gfooter small{
padding: 10px 0 90px;
} }

#gfooter small a{
  color: var(--color-amber);
}

/*wp_footer*/
.menu{
  display:none;
}


/* -----------------------------------------
タブレット
※ 幅768px以下のデバイスには、下記のスタイルが継承されます。
----------------------------------------- */

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

/*共通項目*/
.tx_c img{
width:100%;
}

.r_fss{
font-size:85%;
}


/* --------------------------------------
  ナビゲーション レスポンシブ  768px以下
--------------------------------------- */
 #top-head{
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }


/* ナビゲーション レスポンシブ ここまで*/

}/*768px以下ここまで*/


/* --------------------------------------
  showa lp only campaign css
--------------------------------------- */

/****** Campaign 設定 *******/

#campaign{
  padding: 80px 0;
  position: relative;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 10%) 5%, rgb(0 0 0 / 20%) 10%, rgb(0 0 0 / 30%) 20%, rgb(0 0 0 / 40%) 30%, rgb(0 0 0 / 50%) 40%, rgb(0 0 0 / 60%) 50%, rgb(0 0 0 / 50%) 60%, rgb(0 0 0 / 0%) 100%);
  margin: 0;
}


.campaign_container{
margin: 5% auto 0;
overflow: hidden;
}

.campaign_heading h2 img{
  width: 100%;
  height: clamp(200px, 15vw, 300px);
}

.campaign_fig{
  margin: min(10vw, 120px) auto;
  text-align: center;
}

.campaign_fig img{
  width: 100%;
  max-width: 800px;
}

.campaign_container h3{
  font-size: var(--heading-font-l);
  font-weight: bolder;
  margin: 0 0 2em;
  line-height: var(--line-h-20);
  color: #fff;
  transition: all .5s ease-out;
  letter-spacing: .02em;
  text-align: center;
}
@media only screen and (max-width:768px){
.campaign_container  h3{
        font-size: 2.0em;
        } }

.campaign_box{
  max-width: 800px;
  width: 100%;
  margin: min(10vw, 120px) auto;
  padding: 0 2em;
}


.campaign_explain{
  margin: 0 auto 5em;
  background: #919354;
  padding: 2em;
}

.campaign_explain li{
  font-size: clamp(1.6em, 5vw, 2.6em);
  color: #fff;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.campaign_box p{
  font-size: var(--base-font);
  color:var(--color-base-bg);
}

.campain_alart{
  padding: 1em;
  border: 1px solid #fff;
  margin: 3em 0;
}

.campain_alart p{
font-size: 1.4em;
}

.campain_alart p:last-of-type{
  margin: 0;
}