@charset "UTF-8";

/*
Theme Name: 喫茶と食事 みどり
Theme URI: https://midori-sendai.com/
Description: 喫茶と食事 みどり WordPress Theme
Author:  喫茶と食事 みどり
Version: 2026_10
Tested up to: 7.1
Requires PHP: 8.3.0
*/

/* basic style setting in utility.css */

/* 変数 */
:root {
  --main_color: #A7D8CC;
  --bg_color: #F9F7F6;
}



/*---------------------------------------------------------------------
 共通レイアウト
---------------------------------------------------------------------*/
/* 汎用レイアウト */
#main {
  width: 100%; background: var(--main_color); text-align: justify;
}

.inner {width: min(1000px, 100%); margin: auto; padding: 0 20px}

.big_wrap {
  margin-bottom: 120px; padding: 0 20px;
  .inner {width: min(1600px, 100%); background: var(--bg_color); border-radius: 120px; padding: 80px 40px}
  hr {border-top: 1px solid var(--main_color); margin-bottom: 80px}
}

.small_wrap {
  margin-bottom: 120px; padding: 0 20px;
  .inner {width: min(1000px, 100%); background: var(--bg_color); border-radius: 120px; padding: 80px 40px}
  hr {border-top: 1px solid var(--main_color); margin-bottom: 80px}
}

.foot_interval {
  text-align: center; border-bottom: 1px solid white; padding-bottom: 50px; margin-bottom: 70px;
  img {display: inline; padding: 0 20px}
}

/* ヘッダーまわり */
header {
  position: sticky; top:0; width: 100%; z-index: 100; pointer-events: none;
  .inner {width: min(100%); padding: 45px 45px 0;}
  .site_title {line-height: 1;}
  .site_title a {display: inline-block; pointer-events: auto;}
  li a {pointer-events: auto;}
  .burger {pointer-events: auto}
  .overlay.show {pointer-events: auto}

  /* current */
  .current-menu-item {border-bottom: 2px solid var(--bg_color)}

  /* current（投稿ページにcurrentには、utility.js にて current-menu-item 付与を指定） */
  .current-menu-item > a,
  .current-page-ancestor > a {border-bottom: 2px solid var(--main_color); padding-bottom: 1px}
} /* header */

/* Google font */
.inter {font-family: "Inter", sans-serif;}

/* NEW マーク */
.new_mark {width: 30px; height: 30px; background: url(img/common/bg_new.svg) no-repeat;} 

/* 一覧のスタイル：ブロック */
.post_line {
  margin-bottom: 80px;
  .inner {width: min(1280px, 100%); }
  .post_line_wrap {gap: 40px}
  article {position: relative; min-width: 0;}
  article dl {display: grid; grid-template-columns: 100px 1fr; gap: 16px 24px; border-bottom: 1px dotted var(--bg_color);}
  article dt {margin-bottom: 20px}
  article dd .date {font-size: 1.2rem; padding-top: 6px; margin-bottom: 12px; font-family: "Inter", sans-serif; letter-spacing: .1em}
  article dd h3 {font-size: 1.6rem; line-height: 1.4; font-weight: 400; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; letter-spacing: .16em} /* 2行目以降は「…」で省略 親の定義 */
  article img {transition: transform 0.5s, filter 0.5s; border-radius: 20px;} /* 画像の枠を外れて拡大 */
  article:hover img {transform: scale(1.05);}
  article .new_mark {position: absolute; top: 0; right: 0px;} /* NEW マーク位置調整 */
} /* .post_line */

/* 一覧のスタイル：水平 */
.post_line_horizontal {
  .inner {width: min(1280px, 100%)}
  article a {display: block; border-bottom: 1px dotted var(--bg_color); padding: 20px 0 15px}
  article a:hover {background: rgba(255, 255, 255, 0.1)}
  article dl {display: grid; grid-template-columns: 1fr; align-items: center; gap: 10px 20px}
  article dt {font-size: 1.2rem; letter-spacing: .1em; padding-left: 4px}
  article:has(.new_mark) dd {width: 85%}
  article dd h3 {line-height: 1.4; font-size: 1.4rem; letter-spacing: .16em; font-weight: 400}
  article .new_mark {position: absolute; top: 25%; right: 10px;} /* NEW マーク位置調整 */
} /* .post_line_horizontal */

/* Gmap、YouTubeなどコンテンツのレスポンシブ */
iframe.respo {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 50px}

/* Loading */
#loading {position: fixed; width: 100%; height: 100%; z-index: 999; background: var(--main_color);}

#loading_logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.fadeUp {animation-name: fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0;}
@keyframes fadeUpAnime{
  from {opacity: 0;transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}



/*---------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------*/
.home {
 .h_title {font-size: 2.1rem; text-align: center; margin-bottom: 40px; font-family: "Inter", sans-serif; color: var(--main_color)}

 #movie {
    margin-top: -170px; margin-bottom: 60px;
    .inner {width: min(100%); }
    video {clip-path: inset(0 0 0 0 round 600px);}
  }

  #slide {
    margin-top: -184px; margin-bottom: 60px;
    .inner {width: min(1420px, 100%); }
    .swiper-hero {overflow: hidden; position: relative}
    .swiper-slide {text-align: center}
    .swiper-slide img {clip-path: inset(0 0 0 0 round 600px);}
    .swiper-pagination-bullet { opacity: 1; background: white}
    .swiper-pagination-bullet-active { background: var(--main_color); opacity: 1}
    .swiper-button-prev:after, .swiper-button-next:after { color: var(--main_color)}
  } /* #slide */

  #notice, #topics {
    margin-bottom: 70px;
    .inner {width: min(680px, 100%); }
    h2 {color: white; margin-bottom: 10px; font-size: 1.8rem}
    .in_site_link {text-align: right; margin-top: 30px}
  } /* #notice #topics */

  #topics {margin-bottom: 100px}

  #about {
    margin-bottom: 80px; padding-left: 20px; padding-right: 20px;
    .inner {width: min(1380px, 100%); background: var(--bg_color); position: relative; padding: 0; border-radius: 600px; align-items: center; gap: 0}
    h2 {text-align: center; position: absolute; top: 40px; left: 0; width: 100%; z-index: 10}
    .text {padding-left: 10%}
    .text p {text-align: right; padding-right: 60px}
    .swiper-slide {background: var(--main_color)}
    .swiper-about {overflow: hidden; position: relative}
    .swiper-about img {clip-path: inset(0 0 0 0 round 0 300px 300px 0); width: 100%; aspect-ratio: 69/60; object-fit: cover;}
    .swiper-pagination-bullet { opacity: 1; background: white}
    .swiper-pagination-bullet-active { background: var(--main_color); opacity: 1}
    .swiper-button-prev:after, .swiper-button-next:after { color: var(--main_color)}
  } /* #about */

  #info {
    margin-bottom: 120px; letter-spacing: .1em; padding-left: 20px; padding-right: 20px;
    .inner {width: min(1280px, 100%); background: var(--bg_color); border-radius: 280px; padding: 60px 10% 80px}
    h2 {margin-bottom: 60px}
    h3 {font-size: 2.1rem; margin-bottom: 46px; font-weight: 400}
    .address {margin-bottom: 30px}
    .address li {margin-bottom: 12px; font-size: 1.4rem}
    .address li:nth-of-type(1) a {font-size: .7em; padding: 5px 18px; background: var(--main_color); border-radius: 50px; margin-left: 10px; letter-spacing: .1em}
    .address li:nth-of-type(1) a:hover {opacity: .7}
    .address li:nth-of-type(2) a {text-decoration: underline}
    .detail h4 {font-size: 1.4rem; margin-bottom: 20px}
    .detail dt {font-size: 1.4rem; border-bottom: 1px solid silver; padding-bottom: 10px; margin-bottom: 16px}
    .detail dd ul {margin-bottom: 10px}
    .detail dd li {font-size: 1.4rem; margin-bottom: 10px}
    .detail dd:last-of-type {font-size: 1.2rem; letter-spacing: .1em} 
    .detail .open {grid-template-columns: 1fr 1fr 38%; gap: 40px 60px; margin-bottom: 48px}
    .detail .notice_map {grid-template-columns: 1fr 38%; gap: 40px 60px;}
    .detail .notice_map li {font-size: 1.2rem; line-height: 1.8;}
    .detail .notice_map .in_site_link {margin-top: 30px}
  } /* #info */

  #blog {
    margin-bottom: 120px;
    .inner {width: min(1200px, 100%);}
    h2 {color: white}
    .post_line_wrap {margin-bottom: 30px}
    .in_site_link {text-align: right}
  } /* #blog */

  .interval {text-align: center; width: 100%; padding: 0 20px; margin-bottom: 100px;}
  .interval img {display: inline-block}

  #sns {
    position: relative; z-index: 1; /* 背景より手前に出す */
    .inner {width: min(1360px, 100%); position: relative; }
    h2 {margin-bottom: 26px}
    h2 a {font-family: "Inter", sans-serif; font-size: 1.4rem; color: white; display: flex; align-items: center; gap: 10px; justify-content: center; text-decoration: underline}
    h2 a::before  {content: ""; width: 16px; height: 16px; background: url(img/home/sns_instagram.svg)  no-repeat center / contain; flex-shrink: 0;}
    ul {display: flex; justify-content: flex-end; flex-wrap: wrap; gap:20px; position: absolute; top: 0; right: 20px;}
    .feed img {border-radius: 30px;}
    .feed .sbi_photo_wrap img {transition: transform 0.5s, filter 0.5s;} /* 画像の枠を外れて拡大 */
    .feed .sbi_photo_wrap:hover img {transform: scale(1.05);}
  } /* #sns */

  #guide {
    position: relative;
    isolation: isolate;            /* ::before の z-index:-1 を #guide 内に閉じ込める */
    margin-top: -130px;             /* #sns に食い込ませる量（フィード画像の半分くらい） */
    margin-bottom: 120px;
    padding: 200px 0 80px;         /* 元の180px + 食い込ませた70px */
    &::before {
      content: "";
      position: absolute;
      inset: 0 20px;               /* 左右を少し内側に */
      background: var(--bg_color);
      border-radius: 300px 300px 0 0;
      z-index: -1;
    }
    h2 {margin-bottom: 0}
    .inner {width: 100%; padding: 0}
    .swiper-guide {overflow: hidden; position: relative; padding-top: 40px}
    .swiper-slide {text-align: center; line-height: 1.4}
    .swiper-slide img {border-radius: 30px;}
    .swiper-slide span {color: var(--main_color)}
  } /* #guide */
} /* home */



/*---------------------------------------------------------------------
 固定ページ共通
---------------------------------------------------------------------*/
#title_head {
  margin: -80px auto 36px; 
  .inner {width: min(1600px, 100%); position: relative;}
  h1 {font-family: "Inter", sans-serif; font-size: clamp(2.6rem, 0.77rem + 7.51vw, 6.4rem); font-weight: 100; text-align: center; line-height: 1; margin-bottom: 70px; color: white; letter-spacing: .12em}
  h1 a {pointer-events:none;}
  .figure img {border-radius: 275px 275px 0 0;}
} /* #title_head */

.page {
  #main img {border-radius: 30px}
  .h_title {font-size: clamp(2.1rem, 1.57rem + 2.17vw, 3.2rem); margin-bottom: 16px; letter-spacing: .2em}

  #lead_line {
    .inner {width: min(100%); }
    .lead_text {text-align: center; margin-bottom: 36px; letter-spacing: .24em; font-weight: 300}
  }

  #intro_class {
    h2 {text-align: center; margin-bottom: 30px}
    dl {gap: 30px 80px; margin-bottom: 60px; align-items: center}
    dl h3 {font-size: 2.4rem; margin-bottom: 24px}
    dt img {width: 100%; aspect-ratio: 4/3; object-fit: cover;}
  }
} /* page */


/*---------------------------------------------------------------------
 個別ページ
---------------------------------------------------------------------*/
/* About */
.page-id-2 {
  #lead {
    margin-top: -200px; margin-bottom: 100px; position: relative; z-index: 10;
    .inner {width: min(840px, 100%); display: grid; grid-template-columns: 80px 1fr; gap: 20px 70px;}
    h2 {writing-mode: vertical-rl; font-size: 3.2rem; font-weight: 200; letter-spacing: .4em; line-height: 1.6}
    h2 span {background: white; padding-top: 10px}
    h2 span:nth-of-type(2) {margin-top: 4rem} 
    .wrap {padding-top: 280px}
    .wrap p {font-size: clamp(1.8rem, 1.656rem + 0.59vw, 2.1rem);}
  }

  #policy {
    h2 {font-family: "Inter", sans-serif; margin-bottom: 8px; text-align: left}
    dl {gap: 24px 60px; margin-bottom: 100px; align-items: center;}
    dl:nth-child(odd) dt {order: 2}
    dl:nth-child(odd) dd {order: 1}
    dt img {width: 100%; aspect-ratio: 4/3; object-fit: cover;}
    dd p {font-size: 1.8rem}
  }

  #rule {
    display: grid; grid-template-columns: 80px 1fr; gap: 20px 70px; margin-bottom: 100px;
    h2 {writing-mode: vertical-rl; font-size: 3.2rem; font-weight: 200; letter-spacing: .4em; line-height: 1.6}
    h2 span {background: white; padding-top: 10px}
    h2 span:nth-of-type(2) {margin-top: 4rem} 
    .wrap {padding-top: 60px}
    .wrap dl {display: grid; grid-template-columns: 100px 1fr; gap: 20px; border-bottom: 1px dotted var(--main_color); padding-bottom: 20px; margin-bottom: 20px}
  }
} /* About */


/* Menu */
.page-id-4189 {
  #title_head {
    margin-bottom: 60px;
    .text {position: absolute; bottom: 70px; left: 10%; font-size: clamp(1.6rem, 1.359rem + 0.99vw, 2.1rem); margin-bottom: 0}
  }

  #rule {
    display: grid; grid-template-columns: 80px 1fr; gap: 20px 70px; margin-bottom: 100px;
    h2 {writing-mode: vertical-rl; font-size: 3.2rem; font-weight: 200; letter-spacing: .4em; line-height: 1.6}
    h2 span {background: white; padding-top: 10px}
    h2 span:nth-of-type(2) {margin-top: 4rem} 
    .wrap {padding-top: 60px}
    .wrap dl {display: grid; grid-template-columns: 100px 1fr; gap: 20px; border-bottom: 1px solid white; padding-bottom: 20px; margin-bottom: 20px}
  }

   #lead {
   .anchor {display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 50px; margin-bottom: 100px;}
   .anchor li a {border: 2px solid white; padding: 10px 50px; border-radius: 50px; display: inline-flex; align-items: center; gap: 12px; text-transform: uppercase;}
   .anchor li a::after {
     content: "";
     width: 8px; height: 8px;
     border-right: 1px solid currentColor;
     border-bottom: 1px solid currentColor;
     transform: translateY(-3px) rotate(45deg); /* 回転で下にずれる分を少し上へ */
     flex-shrink: 0;
   }
   .anchor li a:hover {background: var(--bg_color)}
  }

 .menu_wrap {
  .lead {margin-bottom: 40px}
  .lead a {text-decoration: underline}
  .wrap dt {margin-bottom: 30px}
  .wrap dt img {width: 100%; aspect-ratio: 3/2; object-fit: cover;}
  .wrap dd ul {grid-template-columns: 1fr; gap: 0; margin-bottom: 16px; align-items: center}
  .wrap dd .name {font-size: 1.8rem;}
  .wrap dd .price {font-weight: 300; letter-spacing: .1em}
  .wrap dd .text {margin-bottom: 10px; font-weight: 300}
  .wrap dd .text a {text-decoration: underline}
  .wrap dd .note {font-weight: 300}
  }

  #lunch {
    margin-bottom: 100px;
    .inner {width: min(1600px, 100%); align-items: start;}
    .wrap {background: var(--bg_color); border-radius: 160px; padding: 140px 120px 100px 120px}
    .wrap h3 {font-size: clamp(2.8rem, 2.607rem + 0.79vw, 3.2rem)}
    .wrap .info {margin-bottom: 80px}
    .wrap dd .name {font-size: clamp(1.8rem, 1.656rem + 0.59vw, 2.1rem);}
    .wrap .curry {border-bottom: 1px dotted var(--main_color); margin-bottom: 50px; padding-bottom: 30px}
    .wrap .season {border-bottom: 1px dotted var(--main_color); margin-bottom: 50px; padding-bottom: 30px}
    .wrap .season li {font-size: clamp(1.8rem, 1.656rem + 0.59vw, 2.1rem); font-weight: 300;}
    .wrap .season p {font-weight: 300}
  }

  #take {
    .inner {padding-left: 190px; padding-right: 190px}
    h2 {text-transform: uppercase}
    .wrap {gap:60px 100px; margin-bottom: 40px}
    .in_site_link {margin-bottom: 40px}
    .info {text-align: center; font-weight: 300}
    .info dt {font-size: clamp(1.8rem, 1.656rem + 0.59vw, 2.1rem); margin-bottom: 10px}
    .info dt a {text-decoration: underline}
    .info dd {font-size: 1.2rem; letter-spacing: .1em}
  }
  #menu {
    .inner {padding-left: 190px; padding-right: 190px}
    .wrap {gap:80px 100px}
  }

  .other_menu {
    .each:not(:last-child) {border-bottom: 1px solid #9FA0A0; padding-bottom: 60px; margin-bottom: 80px}
    h2 {font-family: "Inter", sans-serif; font-weight: 200; margin-bottom: 30px; letter-spacing: .2em}
    .wrap .note {grid-column: 1 / -1; font-weight: 300; margin-top: -40px}
  }
} /* Menu */


/* Studio */
.page-id-4191 {
  #rental {
    .wrap {gap:80px; margin-bottom: 40px;}
    .wrap .each {position: relative;}
    .wrap .each:nth-child(1)::after {
      position: absolute;
      top: 0;
      right: -1em; /* 仕切り線の位置を調整 */
      content: "";
      width: 1px;
      height: 100%;
      background-color: #9FA0A0;
    }
    .wrap dl {display: grid; grid-template-columns: 140px 1fr; gap: 10px 20px; margin-bottom: 10px; align-items: center}
    .wrap dt {display: flex; align-items: center; gap: 8px;}
    .wrap dt::before {content: "- "; font-size: 2rem; font-weight: 200}
    .note {margin-bottom: 10px}
    li a {text-decoration: underline}
  }

  #overview {
    .inner {width: min(1480px, 100%); padding-left: 80px; padding-right: 80px}
    .wrap {position: relative; display: grid; }
    .wrap::before, .h_title, .figure {grid-area: 1 / 1;}
    .h_title {
      position: sticky; top: 0;
      height: 100vh;            /* 背景の固定エリアと同じ高さ */
      padding-top: 80px;        /* タイトルの上の位置はここで調整 */
      box-sizing: border-box;
      align-self: start;
      background: url(img/page/studio_overview_bg.png) no-repeat top left / 50%;
    }
    .figure {max-width: 840px; margin-left: auto;}
    .figure dl {
      position: sticky; top: 0;
      display: grid;
      align-content: start;
      padding-top: 40px;
      padding-bottom: 40px;   /* 画像同士の間隔。スクロール量はここで調整 */
    }
    .figure dl:has(.is-portrait) {max-width: 560px; margin-left: auto;}
    /* dt と dd を同じセルに重ねて、キャプションを画像の右下に */
    .figure dt, .figure dd {grid-area: 1 / 1;}
    .figure dt img {display: block; width: 100%; height: auto; max-height: calc(100vh - 80px); object-fit: cover; border-radius: 30px;}
    .figure dd {align-self: end; justify-self: end; margin: 0 25px 25px; font-size: clamp(1.6rem, 0.83rem + 3.16vw, 3.2rem); font-weight: 200; color: white; font-family: "Inter", sans-serif; line-height: 1}

    .street_view {
      padding-top: 90px; margin-bottom: 100px;
      iframe {aspect-ratio: 16 / 9; width: 100%; height: 100%;}
    }

    #intro_class {
      max-width: 1000px; margin: auto;
    }
  }
} /* Studio */


/* Cooking Class */
.page-id-4193 {
  #info {
    overflow: hidden; position: relative;
    .lead {margin-bottom: 50px}
    .lead .text a {text-decoration: underline}
    .lead .in_site_link {text-align: left}
    .slide {margin-bottom: 120px}
    .swiper-class {}
    .profile .wrap {gap:80px}
    .profile dt {margin-bottom: 24px}
    .profile dd h3 {margin-bottom: 20px}
    .profile dd p a {text-decoration: underline}
  }
} /* Cooking Class */


/* FAQ */
.page-id-4195 {
  #detail {
    dl:not(:last-child) {margin-bottom: 60px}
    dt {display: flex; align-items: center; gap: 10px; padding-left: 40px; line-height: 1.5; margin-bottom: 8px}
    dt::before {content: "Q."; font-size: 2.6rem; font-family: "Inter", sans-serif; font-weight: 200}
    dd {background: white; padding: 20px 40px; border-radius: 30px; font-weight: 300}
    dd a {text-decoration: underline}
  }
} /* FAQ */


/* Recruit */
.page-id-4197 {
  #detail {
    .primary {padding-bottom: 100px}
    .primary h2 {margin-bottom: 30px} 
    .primary .text {margin-bottom: 70px}
    .primary .text a {text-decoration: underline}
    .primary .figure {margin-bottom: 80px}
    .primary dl {display: grid; grid-template-columns: 1fr 330px; gap: 30px 30px; align-items: center;}
    .primary dt {order: 2}
    .primary dd {order: 1; font-size: clamp(2.1rem, 1.956rem + 0.59vw, 2.4rem); line-height: 3; font-weight: 200}
    hr {margin-bottom: 100px}
    .secondary {gap: 60px; margin-bottom: 80px}
    .secondary .each {background: white; border-radius: 30px; padding: 40px 50px}
    .secondary h3 {margin-bottom: 20px}
    .application a {text-decoration: underline}
  }
} /* Recruit */


/* Reserve  Reserve-Confirm */
.page-id-4200, .page-id-4219 {
  .common_reserve {display: none}
  #form_wrap {
    dl.order[hidden] {display: none !important;} /* ご注文される定食の個数 一旦隠す */
  }
} /* Reserve  Reserve-Confirm */


/* Contact  Contact-Confirm */
.page-id-4202, .page-id-4221 {
  #detail {
    .inner {padding-top: 60px}
  }

  .info {
    margin-bottom: 40px;
    .tel {text-align: center; font-family: "Inter", sans-serif; font-weight: 200; font-size: clamp(1.8rem, 1.656rem + 0.59vw, 2.1rem); margin-bottom: 6px; }
    .tel a {text-decoration: underline}
    .open {font-size: 1.2rem; font-weight: 300; text-align: center; letter-spacing: .1em}
  }
} /* Contact  Contact-Confirm */


/*---------------------------------------------------------------------
 フォーム Contact Form 7
---------------------------------------------------------------------*/
.page-id-4200, .page-id-4202 {
  #form_wrap {
    background: white; border-radius: 30px; padding: 50px;
    .policy {border-bottom: 1px solid #9FA0A0; padding-bottom: 40px; margin-bottom: 40px}
    .policy h3 {font-size: 2.1rem; margin-bottom: 10px}
    li {font-size: 1.4rem}
    p {margin-bottom: 0}
    dl {display: grid; grid-template-columns: 180px 1fr; gap: 0 20px; margin-bottom: 20px}
    dl:last-of-type {margin-bottom: 10px} 
    dt {margin-bottom: 10px; font-weight: 300}
    dt span {font-size: 1rem; padding: 2px 6px 3px; background: var(--main_color); letter-spacing: .1em; margin-left: 3px; font-weight: 500}
    dd input {border: 1px solid #D2D2D2; padding: 5px 10px; letter-spacing: .1em; background: var(--bg_color)}
    dl:not(.order) input {width: 100%}
    dd textarea {width: 100%; border: 1px solid #D2D2D2; padding: 10px; letter-spacing: .1em}
    dd select {width: 140px}
    dt small {display: block; font-size: 1.2rem; letter-spacing: .1em}
    dd .memo {font-size: 1.2rem; padding-left: 10px}
    .order dd select {width: 80px}
    .notice {padding-top: 40px}
    .notice li {font-size: 1.2rem}

    input:focus, textarea:focus {outline: none; background: white} /* フォーカス */
    input::placeholder, textarea::placeholder {color: silver} /* placeholder */
    .wpcf7-submit {color: white; letter-spacing: .12em; padding: 10px 50px; background: var(--main_color); border: 1px solid var(--main_color); transition: all 0.3s ease; }
    .wpcf7-submit:hover { opacity: .8; cursor: pointer;}
    .wpcf7-previous {color: #222222; letter-spacing: .12em; padding: 10px 50px; background: #DFDFDF; border: 1px solid #DFDFDF; transition: all 0.3s ease; }
    .wpcf7-previous:hover { opacity: .8; cursor: pointer;}
    p:has(.wpcf7-submit) {text-align: center; position: relative}
    .wpcf7-not-valid-tip {margin-top: 4px; font-size: 1.2rem;} /* 都度のエラーメッセージ */
    .wpcf7-response-output {text-align: center; padding: 10px; font-size: 1.4rem; border: 1px solid red !important;} /* 下部のエラーメッセージ */
    .wpcf7-spinner {position: absolute; top: 12px; left: 46%;} /* 回転アイコン */

    .wpcf7-list-item {margin: 0 20px 0 0} /* チェックボックス・ラジオボタン */
    .wpcf7-list-item input {width: auto} /* チェックボックス・ラジオボタン */
    .note {font-size: 1.2rem; margin-bottom: 36px; text-align: center} /* 情報使用について */
  }
}

/* confirm 共通 */
.page-id-4219, .page-id-4221 {
  #title_head h1 {font-size: 4rem}
  #title_head {margin-bottom: 50px}
  #form_wrap {
    .inner {width: min(760px, 100%); padding-top: 60px}
    h2 {font-size: 2.1rem; text-align: center; margin-bottom: 30px; font-weight: 400}
    dl {border-bottom: 1px solid silver; margin-bottom: 20px; padding-bottom: 10px}
    dt {letter-spacing: .1em}
    dt p {margin-bottom: 10px}
    dt span {font-size: 1rem; padding: 2px 6px 3px; background: var(--main_color); letter-spacing: .1em; margin-left: 3px; font-weight: 500}
    dd p {margin-bottom: 10px}
    .note {font-size: 1.2rem; margin-bottom: 30px}
    .notice li {font-size: 1.2rem}
    .after_sent {display: none; text-align: center; margin-top: 40px;} /* トップページへ戻るボタン 一旦隠す */
    .wpcf7-form.sent .after_sent {display: block !important;} /* トップページへ戻るボタン 表示 */
    .wpcf7-form.sent .after_sent a {display: inline-flex !important;} /* ボタン本体も表示 */

    .wpcf7-submit {color: #222222; letter-spacing: .12em; padding: 10px 50px; background: var(--main_color); border: 1px solid var(--main_color); transition: all 0.3s ease; }
    .wpcf7-submit:hover { opacity: .8; cursor: pointer;}
    .wpcf7-previous {color: #222222; letter-spacing: .12em; padding: 10px 50px; background: #DFDFDF; border: 1px solid #DFDFDF; transition: all 0.3s ease; }
    .wpcf7-previous:hover { opacity: .8; cursor: pointer;}
    p:has(.wpcf7-submit) {text-align: center; position: relative}

    p:has(.wpcf7-submit) {text-align: center; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;}
    p:has(.wpcf7-submit) br {display: none}

    .wpcf7-response-output {border-color: var(--main_color); margin-bottom: 30px}
  }
} /* confirm 共通 */




/*---------------------------------------------------------------------
 アーカイブ カテゴリ ニュース共通
---------------------------------------------------------------------*/
.archive {}
.category {}

/* Topics  Blog */
.page-id-4204, .page-id-4206, .post-archive-news, .post-type-archive-blog {
  #title_head {margin-bottom: 80px}
  .sidebar {
    h3 {font-family: "Inter", sans-serif; font-size: 1.8rem; margin-bottom: 10px; font-weight: 300; letter-spacing: .1em} 
    li {margin-bottom: 10px}
    li a {font-family: "Inter", sans-serif; font-size: 1.2rem; font-weight: 300; letter-spacing: .1em; display: block}
    li a:hover {color: var(--main_color)}
  }
} /* Topics  Blog */

.post-archive-news, .post-type-archive-blog {
  #title_head {margin-bottom: 40px}
  #title_head h1 {margin-bottom: 0}
}

/* Topics */
.page-id-4204, .post-archive-news {
  .post_line_horizontal {
    .inner {width: min(1000px, 100%); display: grid; grid-template-columns: 1fr 120px; gap: 40px 80px;}
    .post_line_wrap {article {border-bottom: 1px dotted var(--main_color);}}
    article a:hover {background: white}
    .wp-pagenavi {padding-top: 40px}
  }
} /* Topics */


/* Blog */
.page-id-4206, .post-type-archive-blog {
  .post_line {
    .inner {width: min(1000px, 100%); display: grid; grid-template-columns: 1fr 120px; gap: 40px 80px; align-items: flex-start}
    article {border-bottom: 1px dotted var(--main_color);}
  }
} /* Blog */


/* 一覧のページナビ */
.wp-pagenavi {
  text-align: center;
  a {background: white ; color: #7f7f7f;}
  span.current {font-weight: bold; color :#ffffff; background: var(--main_color); border: none;}
  span.pages {display: none !important}
} /* .wp-pagenavi */


#main .wp-pagenavi a, #main .wp-pagenavi span {
  border: none;
  font-size: 1.8rem;
  padding: .4em 1.1em;
  margin: 5px;
  border-radius: 70px; /* 正方形にする場合はここを削除 */
  transition: all .3s ease;
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 200;
} /* #main .wp-pagenavi a */

#main .wp-pagenavi a:hover {background: var(--main_color); color: white;}



/*---------------------------------------------------------------------
 投稿ページ共通
---------------------------------------------------------------------*/
.single {
 
  .entry_meta .date {margin-bottom: 20px; font-family: "Inter", sans-serif; font-size: 1.2rem; letter-spacing: .1em}
  .entry_title {line-height: 1.4; font-size: 2.1rem; border-bottom: 1px solid var(--main_color); padding-bottom: 30px; margin-bottom: 30px; font-weight: 400}
  
  .entry_content {
    padding-bottom: 30px; word-wrap: break-word; /* 折り返し解除 */
    border-bottom: 1px solid var(--main_color);
    h2 {font-size: clamp(2rem, 1.9rem + 0.5vw, 2.4rem); border-left: 3px solid var(--main_color); padding-left:20px; margin-bottom: 20px; line-height: 1.6; font-weight: 500; word-break: auto-phrase;}
    h3 {font-size: clamp(1.8rem, 1.725rem + 0.38vw, 2.1rem); margin-bottom: 16px; padding-bottom: 6px; font-weight: 500; border-bottom: 2px solid silver;}
    a img {pointer-events: none;} /* 画像にリンクがついてもリンク解除 */
    a img:hover {opacity: .8}
    figure {margin-bottom: 20px} /* 画像 */
    figure a { display: block}
    figcaption {margin-top: 6px; text-align: right; font-size: 1.4rem;} /* キャプション */
    p {margin-bottom: 30px; line-height: 1.8}
    a {text-decoration: underline}
    ul {margin-bottom: 30px}
    .wp-block-file a {text-decoration: underline}
    .wp-block-file a:last-child {display: none}
    a[href$=".pdf"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_pdf_18.svg) no-repeat left center;}
    a[href$=".doc"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_docx_18.svg) no-repeat left center;}
    a[href$=".docx"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_docx_18.svg) no-repeat left center;}
    a[href$=".xls"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_xlsx_18.svg) no-repeat left center;}
    a[href$=".xlsx"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_xlsx_18.svg) no-repeat left center;}
    a[href$=".csv"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_csv_18.svg) no-repeat left center;}
    .wp-block-quote {background: #EBEBEB url(img/post/quote_bk.svg) no-repeat 30px 30px; padding: 80px 30px 30px 30px; border-radius: 30px; margin-bottom: 30px} /* 引用ブロック */
    .wp-block-quote cite {font-size: 1.2rem;} /* 引用 */
    .wp-block-quote cite a { text-decoration: underline} /* 引用 */
    .wp-block-quote cite::before {content: "引用元"; padding-right: 10px} /* 引用 */
    .wp-block-cover p {color: white} /* カバー */
    .wp-block-table table { margin-bottom: 10px} /* カバー */
    .wp-block-columns {gap:30px}
    .wp-block-columns p {margin-bottom: 15px}
    .wp-block-columns ul {margin-bottom: 15px}
    .wp-block-columns figure { margin-bottom: 0}
    .wp-block-gallery ul {margin-bottom: 0}
    .wp-block-button a {color: white; font-weight: bold; transition: all 0.3s ease;} /* ボタン */
    .wp-block-button a:hover {opacity: .8} /* ボタン */
    .wp-block-gallery {display: flex; flex-wrap: wrap;} /* ギャラリー縦並びになってしまう事の対処 */
    .wp-element-caption a {color: var(--main_color); border-bottom: 1px solid var(--main_color); display: inline-block} /* キャプションにリンクがある場合 */
    .youtube_movie {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 20px} /* YouTube 埋め込み対応（utility.js にてjquery でクラス追加） */
    .google_map {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 20px} /* Google Map 埋め込み対応（utility.js にてjquery でクラス追加） */
    .has-small-font-size { font-size: 1.2rem !important} /* フォントサイズ */
    .has-medium-font-size { font-size: clamp(1.4rem, 1.339rem + 0.26vw, 1.6rem)!important}
    .has-large-font-size { font-size: clamp(1.7rem, 1.669rem + 0.13vw, 1.8rem)!important}
    .has-x-large-font-size { font-size: clamp(1.8rem, 1.739rem + 0.26vw, 2rem)!important}
  } /* .entry_content */

  .archive_link {
    padding-top: 30px;
    h3 {font-family: "Inter", sans-serif; font-size: 1.8rem; margin-bottom: 10px; font-weight: 300; letter-spacing: .1em} 
    ul {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 0 20px;}
    li {margin-bottom: 0}
    li a {font-family: "Inter", sans-serif; font-size: 1.2rem; font-weight: 300; letter-spacing: .1em}
    li a:hover {color: var(--main_color)}
  }
} /* single-post */


/* ページナビゲーション */
.single #single_page_nav {
  .inner {width: min(780px, 100%)}
  margin-bottom: 50px;
  ul {gap:20px;}
  li a {font-size: clamp(1.2rem, 1.15rem + 0.25vw, 1.4rem); display: block; }
  #previous a {background: silver url(img/post/arrow_previous.svg) left 6px top 50% no-repeat; padding: 12px 16px 12px 38px;}
  #next a {background: silver url(img/post/arrow_next.svg) right 6px top 50% no-repeat; padding: 12px 38px 12px 16px; text-align: right}
  #previous a:hover {background: var(--main_color) url(img/post/arrow_previous.svg) left 0 top 50% no-repeat; color: white}
  #next a:hover {background: var(--main_color) url(img/post/arrow_next.svg) right 0 top 50% no-repeat; color: white}
} /* ページナビゲーション */



/*---------------------------------------------------------------------
 Not 404
---------------------------------------------------------------------*/
.error404 {
  #title_head, #breadcrumb {display: none}
  #main {background: var(--main_color); background-size: cover; background-position: 50% 50%; min-height: 60vh; display: grid; place-items: center; margin-bottom: 40px;}
  #main dt {color: white; font-size: clamp(2.8rem, 1.741rem + 4.35vw, 5rem); text-align: center; font-family: "Inter", sans-serif; font-weight: 200}
  #main dd {color: white; font-size: clamp(1.2rem, 1rem + 1vw, 2rem); text-align: center; font-weight: 200}
} /* error404 */


/*---------------------------------------------------------------------
 footer
---------------------------------------------------------------------*/
footer {
  letter-spacing: .1em; padding-bottom: 50px; 
  .inner {width: min(1120px, 100%); display: grid; grid-template-columns: 180px 1fr; gap: 30px 60px;}
  .detail nav ul {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 26px; margin-bottom: 34px}
  .detail nav ul a {font-size: 1.4rem; color: white; letter-spacing: .03em; font-family: "Inter", sans-serif;}
  .detail nav ul a:hover {opacity: .6}
  .detail .open {margin-bottom: 10px}
  .detail .open dl {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 16px; margin-bottom: 6px}
  .detail .open dt {font-size: 1.2rem; font-weight: 300}
  .detail .open dd {display: flex; align-items: center; font-size: 1.2rem; font-weight: 300}
  .detail .open dd::before {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 1px;
    margin-right: 16px;
    background: currentColor; /* 文字色と同じ色 */
    opacity: .6;             /* 画像のように少し薄く */
  }
  .detail .notice {margin-bottom: 10px}
  .detail .notice li {font-size: 1.2rem; font-weight: 300; text-align: right; margin-bottom: 0; line-height: 1.6}
  .detail .address {font-size: 1.2rem; text-align: right; margin-bottom: 34px; font-weight: 300}
  .detail .sns {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 8px}
  .detail .copy {text-align: right;}
  .detail .copy small {font-size: 1rem; color: white}
  .common_reserve {position: fixed; bottom: 20px; right: 70px; z-index: 10; margin-bottom: 0}
  .common_reserve a {padding-left: 40px; padding-right: 40px}
  .common_reserve a::after {display: none}
} /* footer */

/* ページトップへ */
p.pagetop {
  position: fixed; bottom: 22px; right: 20px; opacity: 0; transform: scale(1.5); transition: all .5s; text-align: right; width: auto; z-index: 10;
  a {display: block}
  a:hover { transform: scale(1.2)}
  &.show {opacity: 1; transform: scale(1);}
} /* p.pagetop */


/*---------------------------------------------------------------------
 print
---------------------------------------------------------------------*/
@media print {
  body {-webkit-print-color-adjust: exact;} /* Chrome 背景色強制印刷 */
  a[href]:after {content: "" !important;}
  abbr[title]:after {content: "" !important;}
  .show-for-small-only {display: none !important}
  .pagetop.show {display: none !important}
  body, h1, h2, h3, h4, h5, h6, li, dt, dd, p, th, td, .mincho {font-family: sans-serif !important} /* Chrome印刷で日本語が表示されない対応 */
}


/*---------------------------------------------------------------------
 jquery js 関連 css
---------------------------------------------------------------------*/
body {margin:0; padding:0}

/*  BURGER
========================================== */
.burger {
  width: 90px;
  height: 90px;
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 10;
  border-radius: 16px;
  background: var(--main_color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

/* 2本線の入れ物 */
.burger span {
  position: relative;
  display: block;
  width: 52px;
  height: 22px;
}

.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: white;
  transition: transform .3s;
}

.burger span::before {top: 0;}
.burger span::after  {bottom: 0;}

/* MENU の文字 */
.burger::after {
  content: "MENU";
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1;
  color: white;
  margin-top: 4px;
}

/* クリック時：×印と CLOSE */
.burger.clicked span::before {transform: translateY(10px) rotate(45deg);}
.burger.clicked span::after  {transform: translateY(-10px) rotate(-45deg);}
.burger.clicked::after {content: "CLOSE";}

/*  NAV
========================================== */
.drawer {
  background-color: var(--main_color);
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  height: 100%;
  width: 25vw;
  min-width: 25vw;
  padding: 100px 40px 60px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  pointer-events: auto; /* iOSでスクロール可能のする */
}

nav.show.drawer {transform: translateX(0px)}
nav.show.drawer ul li {transform: translateX(0px); opacity: 1;}
nav.show.drawer ul li:nth-child(1) { transition-delay: 0.2s; }
nav.show.drawer ul li:nth-child(2) { transition-delay: 0.3s; }
nav.show.drawer ul li:nth-child(3) { transition-delay: 0.4s; }
nav.show.drawer ul li:nth-child(4) { transition-delay: 0.5s; }
nav.show.drawer ul li:nth-child(5) { transition-delay: 0.6s; }
nav.show.drawer ul li:nth-child(6) { transition-delay: 0.7s; }
nav.show.drawer ul li:nth-child(7) { transition-delay: 0.8s; }
nav.show.drawer ul li:nth-child(8) { transition-delay: 0.9s; }
nav.show.drawer ul li:nth-child(9) { transition-delay: 1.0s; }
nav.show.drawer ul li:nth-child(10) { transition-delay: 1.1s; }
nav.show.drawer ul li:nth-child(11) { transition-delay: 1.2s; }
nav.show.drawer ul li:nth-child(12) { transition-delay: 1.3s; }
nav.show.drawer ul li:nth-child(13) { transition-delay: 1.4s; }
nav.show.drawer ul li:nth-child(14) { transition-delay: 1.5s; }

nav.drawer ul li {
  margin-bottom: 20px;
  transform: translateX(40px);
  opacity: 0;
  transition: all 0.3s ease;
}

nav.drawer ul li:last-of-type { margin-bottom: 0px; }

nav.drawer ul li a {
  font-family: "Inter", sans-serif;
  text-decoration: none;
  font-size: 1.8rem;
  display: block;
  font-weight: 400;
  padding: 4px 0;
  transition: all 0.3s ease;
  letter-spacing: .1em;
}

nav.drawer ul li a span { color: white; }
nav.drawer ul li a:hover { color: white; }

/*  OVERLAY
========================================== */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
  background-color: var(--bg_color);
  opacity: 0;
  visibility: hidden;
}

.overlay.show {opacity: 0.7; visibility: visible;}
body.overflow {overflow: hidden;} /* メニューを開いている間、背景のページを固定 */


/*---------------------------------------------------------------------
 メディアクエリー
---------------------------------------------------------------------*/
/* スマホ以降（639px 以下） */
@media screen and (max-width: 639px) {
  .no_br_sp br {display: none !important}
  br.no_br_sp {display: none}
  table tr th, table tr td {padding: 0.4em 0.8em; font-size: 1.2rem}
  .single .wp-caption {max-width: 100%}
  .single #single_page_nav ul {justify-content: center}

  a.round_btn {font-size: 1.2rem;  padding: 6px 30px;}
  .post_line_horizontal article .new_mark {top: 50%}
  .post_line_horizontal article dt {padding-left: 0}

  header {position: relative; }
  header .inner {padding: 25px}
  header .site_title img {max-width: 80px}

  .drawer {width: 60vw; min-width: 60vw;}
  .burger {transform: scale(.8); transform-origin: top right; top: 10px ; right: 10px; background: rgba(167, 216, 204, 0.9)}
  nav.drawer ul li {margin-bottom: 10px}
  nav.drawer ul li a {font-size: 1.4rem}

  .big_wrap {margin-bottom: 80px}
  .big_wrap hr {margin-bottom: 60px} 
  .small_wrap {margin-bottom: 80px}

  .home #movie {margin-top: -30px}
  .home #movie .inner {padding-left: 10px; padding-right: 10px}
  .home #slide {margin-top: -30px}
  .home #about {padding: 0 10px}
  .home #about .inner {padding: 60px 6% 50px; border-radius: 100px;}
  .home #about .swiper-about img {clip-path: inset(0 0 0 0 round 80px 80px 80px 80px);}
  .home #about .swiper-slide {background: transparent}
  .home #about .text {padding: 40px 0 0 0}
  .home #about .text p {text-align: center; padding-right: 0}
  .home #about .in_site_link {margin-bottom: 30px}
  .home #info {padding: 0 20px}
  .home #info .inner {border-radius: 100px;}
  .home #info h2 {margin-bottom: 40px}
  .home #sns ul {display: none}
  .home #sns #sbi_images {gap: 20px !important}
  .home #guide {margin-top: 0; padding-top: 40px; padding-bottom: 50px}
  .home #guide::before {border-radius: 100px 100px 0 0;}
  .home #guide .swiper-guide {padding-top: 20px}
  .home #guide .swiper-slide {line-height: .6}
  .home #guide .swiper-slide span {font-size: 1.2rem; line-height: 1.2; letter-spacing: .1em}

  .page .h_title {line-height: 1.5}
  .page #title_head {margin-top: -60px}
  .page #title_head h1 {margin-bottom: 24px;}
  .page #title_head .figure img {border-radius: 100px 100px 0 0; width: 100%; aspect-ratio: 3/4; object-fit: cover;}
  .page #intro_class dl h3 {font-size: 2.1rem; line-height: 1.5}
  .page #intro_class dl {margin-bottom: 40px}
  .page #lead_line .lead_text {font-size: 1.8rem; line-height: 1.5}

  .page-id-2 #lead h2 {font-size: 2rem}
  .page-id-2 #lead {margin-top: -110px; margin-bottom: 60px}
  .page-id-2 #lead .inner {gap:20px 30px}
  .page-id-2 #lead .wrap {padding-top: 120px; padding-right: 20px}
  .page-id-2 #lead .wrap p {font-size: 1.4rem}
  .page-id-2 #lead .wrap p br {display: none}
  .page-id-2 #policy dl:nth-child(odd) dt {order: 1}
  .page-id-2 #policy dl:nth-child(odd) dd {order: 2}
  .page-id-2 #policy dd p {font-size: 1.4rem}
  .page-id-2 #rule {grid-template-columns: 1fr}
  .page-id-2 #rule h2 {font-size: 2.4rem; width: fit-content; justify-self: center;}
  .page-id-2 #rule .wrap dl {grid-template-columns: 70px 1fr; gap:10px}

  .page-id-4189 #title_head .text {font-size: 1.2rem; bottom: 20px; letter-spacing: .1em}
  .page-id-4189 #rule {grid-template-columns: 80px 1fr; gap: 24px; margin-bottom: 40px}
  .page-id-4189 #rule h2 {font-size: 2.1rem;}
  .page-id-4189 #rule .wrap {padding-top: 0}
  .page-id-4189 #rule .wrap dl {grid-template-columns:1fr; gap:10px}
  .page-id-4189 .anchor {margin-bottom: 40px}
  .page-id-4189 .wrap dd .name {line-height: 1.5}
  .page-id-4189 #lunch .wrap {border-radius: 100px; padding: 80px 40px 40px 40px;}
  .page-id-4189 #lunch .wrap .season li {line-height: 1.5; margin-bottom: 20px}
  .page-id-4189 #take .inner {padding-left: 40px; padding-right: 40px}
  .page-id-4189 #menu .inner {padding-left: 40px; padding-right: 40px}

  .page-id-4191 #rental .wrap .each:nth-child(1)::after {display: none}
  .page-id-4191 #overview .inner {padding-left: 40px; padding-right: 40px}
  .page-id-4191 #overview .figure dd {margin: 0 18px 18px}
  .page-id-4191 #overview .h_title {background-size: 100%; padding-top: 0; height: calc(114cqw + 66.7cqw + 90px); margin-bottom: 0;}
  .page-id-4191 #overview .wrap {container-type: inline-size;}
  .page-id-4191 #overview .figure {margin-top: calc(91cqw + 10px);}
  .page-id-4191 #overview .figure dl {top: calc(91cqw + 10px);}
  .page-id-4191 #overview .figure::after {content: ""; display: block; height: 20vh;}
  .page-id-4191 #overview .street_view iframe {aspect-ratio: 2 / 3;}
  .page-id-4191 #overview #intro_class h2 {font-size: 2.4rem; line-height: 1.5}

  .page-id-4193 #title_head {margin-top: -10px}

  .page-id-4195 #title_head .figure img {aspect-ratio: 4 / 3;}
  .page-id-4195 #detail dt { padding-left: 0}

  .page-id-4197 #title_head .figure img {aspect-ratio: 4 / 3;}
  .page-id-4197 #detail .primary dd  {font-size: 1.8rem}
  .page-id-4197 #detail .secondary .each {padding: 40px 30px}
  .page-id-4197 #detail .secondary .each h3 {line-height: 1.5} 

  .page-id-4200, .page-id-4202 {
    #title_head .figure img {aspect-ratio: 4 / 3;}
    #form_wrap {padding: 30px 20px}
    #form_wrap h3 {font-size: 1.6rem; margin-bottom: 10px}
    #form_wrap dl {grid-template-columns: 1fr; margin-bottom: 40px}
    #form_wrap li {font-size: 1.2rem; line-height: 1.5; letter-spacing: .1em; margin-bottom: 10px}
    #form_wrap .order p {text-align: left}
    #form_wrap .order p label {}
  }

  .page-id-4219, .page-id-4221 {
    #title_head h1 {font-size: 2rem; letter-spacing: .1em}
    #title_head .figure img {aspect-ratio: 4 / 3;}
  }

 .page-id-4204, .page-id-4206, body.date {
    #title_head {margin-bottom: 40px}
    #title_head .figure img {aspect-ratio: 4 / 3;}
    .post_line_horizontal .inner {grid-template-columns: 1fr; padding-top: 40px}
    .post_line_horizontal dt {padding-left: 0}
    .post_line .inner {grid-template-columns: 1fr;}
    .post_line article dl {grid-template-columns: 80px 1fr;}
    .post_line article dt img {border-radius: 20px !important}
    .post_line article dd .date {margin-bottom: 6px}
    .post_line article dd .title h3 {font-size: 1.4rem}
    .sidebar ul {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr ;gap:0 10px;} 
    #main .wp-pagenavi a, #main .wp-pagenavi span {font-size: 1.2rem}
  } 

  .single #content {margin-top: -40px}
  .single #content .inner {padding-top: 60px}
  .single .entry_title {padding-bottom: 16px}
  .single .archive_link ul {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr ;gap:0 10px;}

  footer {padding-bottom: 20px}
  footer .logo {display: none}
  footer .detail nav ul {justify-content: flex-start; gap: 0 20px}
  footer .detail .open dl {justify-content: flex-start; margin-bottom: 20px}
  footer .detail .open dd::before {display: none}
  footer .detail .notice {margin-bottom: 20px}
  footer .detail .notice li {text-align: left; margin-bottom: 0}
  footer .detail .address {text-align: left}
  footer .detail .sns {justify-content: flex-start;}
  footer .detail .copy {text-align: left}
  footer .common_reserve {bottom: 75px; top: auto; right: 20px}
  footer .common_reserve a {padding: 5px 20px; font-size: 1.2rem}
}


/* スマホ〜タブレット共通（1099px 以下） */
@media screen and (max-width: 1099px) {
  .no_br br {display: none !important}
}


/* スマホ「横」向き対応 */
@media screen and (max-width: 940px) and (orientation:landscape) {
  .sample {}
}


/* スマホ以降（375px 以下）iPhone SE */
@media screen and (max-width: 375px) {
  .inner {padding: 0 10px}
}


/* スマホ以降（320px 以下）旧 iPhone SE */
@media screen and (max-width: 320px) {
  .sample {}
}


/* スマホ以降（321px 以降） */
@media screen and (min-width: 321px) {
  .sample {}
}


/* タブレット対応 */
@media screen and (min-width: 640px) and (max-width: 1099px) {
  .no_br_tb br {display: none !important}
  br.tb_non {display: none}

  header .inner {padding: 38px 45px 0}
  header .site_title img {max-width: 120px}

  .drawer {width: 40vw; min-width: 40vw;}
  
  .home #movie {margin-top: -30px}
  .home #movie .inner {padding-left: 10px; padding-right: 10px}
  .home #slide {margin-top: -30px}
  .home #about {padding: 0 10px}
  .home #about .inner {padding: 60px 6% 50px; border-radius: 120px;}
  .home #about .swiper-about img {clip-path: inset(0 0 0 0 round 80px 80px 80px 80px);}
  .home #about .swiper-slide {background: transparent}
  .home #about .text {padding: 40px 0 0 0}
  .home #about .text p {text-align: center; padding-right: 0}
  .home #about .in_site_link {margin-bottom: 30px}
  .home #about .swiper-about img {width: 100%; aspect-ratio: 3/2; object-fit: cover;}
  .home #info .inner {border-radius: 120px;}
  .home #info .detail .open {gap: 20px}

  .page .h_title {line-height: 1.5}
  .page #title_head {margin-top: -60px}
  .page #title_head h1 {margin-bottom: 40px;}
  .page #title_head .figure img {border-radius: 160px 160px 0 0; width: 100%; aspect-ratio: 4/3; object-fit: cover;}
  .page #intro_class dl h3 {font-size: 2.1rem; line-height: 1.5}
  .page #intro_class dl {margin-bottom: 40px}
  .page #lead_line .lead_text {font-size: 2.4rem; line-height: 1.5}

  .page-id-2 #lead {padding: 0 20px}
  .page-id-2 #policy dl:nth-child(odd) dt {order: 1}
  .page-id-2 #policy dl:nth-child(odd) dd {order: 2}
  .page-id-2 #policy dd p {font-size: 1.4rem}
  .page-id-2 #rule {grid-template-columns: 1fr}
  .page-id-2 #rule h2 {font-size: 2.4rem; width: fit-content; justify-self: center;}
  .page-id-2 #rule .wrap dl {grid-template-columns: 70px 1fr; gap:10px}

  .page-id-4189 #title_head .text {font-size: 1.4rem; bottom: 40px;}
  .page-id-4189 #lead {padding: 0 20px}
  .page-id-4189 .wrap dd .name {line-height: 1.5}
  .page-id-4189 #take .inner {padding-left: 60px; padding-right: 60px}
  .page-id-4189 #take .wrap {gap: 80px 40px}
  .page-id-4189 #menu .inner {padding-left: 60px; padding-right: 60px}
  .page-id-4189 #menu .wrap {gap: 80px 40px}

  .page-id-4191 #overview .h_title {background-size: 80%; padding-top: 0; height: calc(91cqw + 66.7cqw + 90px); margin-bottom: 0;}
  .page-id-4191 #overview .wrap {container-type: inline-size;}
  .page-id-4191 #overview .figure {margin-top: calc(91cqw + 10px);}
  .page-id-4191 #overview .figure dl {top: calc(91cqw + 10px);}
  .page-id-4191 #overview .figure::after {content: ""; display: block; height: 20vh;}

  .page-id-4195 #title_head .figure img {aspect-ratio: 2 / 1;}
  
  .page-id-4197 #title_head .figure img {aspect-ratio: 2 / 1;}
  .page-id-4197 #detail .primary dl {grid-template-columns: 1fr;}

  .page-id-4200, .page-id-4202 {
    #title_head .figure img {aspect-ratio: 2 / 1;}
  }

  .page-id-4219, .page-id-4221 {
    #title_head .figure img {aspect-ratio: 2 / 1;}
  }

 .page-id-4204, .page-id-4206, body.date {
    #title_head .figure img {aspect-ratio: 2 / 1;}
  } 

  .single #content {margin-top: -30px}
  .single #content .inner {padding-top: 60px}
  .single .entry_title {padding-bottom: 16px}
  .single .archive_link ul {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}

  footer {padding-bottom: 40px}
  footer .inner {grid-template-columns: 120px 1fr; gap: 30px}
  footer .common_reserve {bottom: 25px; top: auto; right: 70px}
  footer .common_reserve a {padding: 5px 20px; font-size: 1.2rem}
}


/* タブレット以降（640px 以降） */
@media screen and (min-width: 640px) {
  .logged-in header {padding-top: 32px; margin-top: -32px} /* ログイン時のアドミンバー対応（ヘッダー） */
  .logged-in .gtranslate_wrapper {top: 112px} /* ログイン時のアドミンバー対応（GTranslate） */

  .post_line_horizontal article dl {display: grid; grid-template-columns: 100px 1fr;}
  .post_line_horizontal article dt {}
  .entry_content .wp-block-table td, .wp-block-table th {padding: 1em;}

  .big_wrap .inner {border-radius: 160px; padding: 100px 120px}
  .small_wrap .inner {border-radius: 160px; padding: 100px 80px}
}


/* PCモニター（1100px以降） */
@media screen and (min-width: 1100px) {
  .no_br_pc br { display: none}
  br.pc_non {display: none} 
  .big_wrap .inner {border-radius: 160px; padding: 110px 80px}
  .page-id-4189 #lunch .wrap {padding-left: 80px; padding-right: 80px;}
  .page-id-4189 #take .inner {padding-left: 100px; padding-right: 100px;}
  .page-id-4189 #menu .inner {padding-left: 100px; padding-right: 100px;}
}


/* PCモニター（1240px以降） */
@media screen and (min-width: 1240px) {
  .big_wrap .inner {border-radius: 210px; padding: 120px 160px}
  .small_wrap .inner {border-radius: 210px; padding: 120px 90px}
}


/* PCモニター大（1480px以降） */
@media screen and (min-width: 1480px) {
  .big_wrap .inner {border-radius: 210px; padding: 120px 240px}
  .small_wrap .inner {border-radius: 210px; padding: 120px 110px}
  .page-id-4189 #take .inner {padding-left: 180px; padding-right: 180px;}
  .page-id-4189 #menu .inner {padding-left: 180px; padding-right: 180px;}
}


/* PCモニター大（1600px以降） */
@media screen and (min-width: 1600px) {
  .big_wrap .inner {border-radius: 210px; padding: 120px 280px}
  .small_wrap .inner {border-radius: 210px; padding: 120px 120px}
  .page-id-4189 #lunch .wrap {padding-left: 120px; padding-right: 120px;}
  footer {padding-bottom: 0}
}


/* スタッキングスクロールの調整（タブレット縦長のみ） */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1099px) {
  .page-id-4191 #overview .figure dl {top: calc(50vh - 150px);}
}


/* タッチデバイスでのhoverを書き換える場合はここに記述 */
@media (any-hover: hover) {
  nav.drawer ul li a:hover {color: #222222}
}