@charset "UTF-8";

html {
  scroll-behavior: smooth;
  scroll-padding-top: 151px;
}
/*
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/**************************************************
 * 0. CSS カスタムプロパティ（変数）
 **************************************************/
:root {
  /* ─── 背景色 ─── */
  --bg-0: #fff;  /* 最薄（本文エリア・セクション） */
  --bg-1: #fff;  /* メイン（薄い） */
  --bg-2: #AAB5C3;  /* セクション（中間） */
  --bg-3: #666666;  /* フッター（濃い） */
  --bg-4: #DEE5ED;  /* 予備アクセント */


  /* ─── テキスト ─── */
  --clr-title:  #6F6869;  /* h2タイトル色 */
  --clr-text:   #6F6869;
  --clr-muted:  #C3A24A;
  --clr-hover:      #0ff;     /* リンクホバー色（案件ごとに変更） */
  --clr-highlight:  #FBFFBD; /* テキストハイライト */

  /* ─── フォント ─── */
  --ff-base:   "Yu Gothic", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN W3", "Hiragino Sans W3", sans-serif;
  --ff-accent: "Sorts Mill Goudy", serif;
  --ff-accent2: "GFS Didot", serif;

  /* ─── フォントサイズ ─── */
  --fs-xl:   32px;  /* 特大 */
  --fs-lg:   24px;  /* 大 */
  --fs-base: 16px;  /* ベース */
  --fs-sm:   14px;  /* 小 */

  /* ─── フォントウェイト ─── */
  --fw-normal: normal;
  --fw-bold:   500;

  /* ─── 行間 ─── */
  --lh-loose:   2;
  --lh-base:    1.6;
  --lh-heading: 1.2;
  --lh-btn:     1;

  /* ─── レイアウト ─── */
  --max-w:         1150px;
  --max-w-lg:      1440px;
  --max-w-content: 900px;

  /* ─── セクション余白 ─── */
  --section-pt: 80px;
  --section-pb: 100px;
  --pad-x:      15px;

  /* ─── ボーダー半径 ─── */
  --radius-btn:  30px;
  --radius: 20px;
}

@media (max-width: 767px) {
  :root {
    --fs-xl:   24px;
    --fs-lg:   20px;
    --fs-base: 16px;
    --fs-sm:   12px;
  }
}

/**************************************************
 * 1. 共通リセット・基本設定
 **************************************************/
p, .body, a, .navi-in a, .breadcrumb, .breadcrumb-caption, #header .site-name-text,
.site-name-text, .copyright,
.entry-content > *, .mce-content-body > *,
.article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc,
.body .article, .body .column-wrap, .body .new-entry-cards, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus,
.body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only,
.body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box,
.body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box,
.body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box,
.body .tomarebalink-box, .body .product-item-box, .body .speech-wrap, .body .wp-block-categories, .body .wp-block-archives,
.body .wp-block-archives-dropdown, .body .wp-block-calendar, .body .ad-area, .body .wp-block-gallery, .body .wp-block-audio,
.body .wp-block-cover, .body .wp-block-file, .body .wp-block-media-text, .body .wp-block-video, .body .wp-block-buttons,
.body .wp-block-columns, .body .wp-block-separator, .body .components-placeholder, .body .wp-block-search, .body .wp-block-social-links,
.body .timeline-box, .body .blogcard-type, .body .btn-wrap, .body .btn-wrap a, .body .block-box, .body .wp-block-embed,
.body .wp-block-group, .body .wp-block-table, .body .scrollable-table, .body .wp-block, .body .video-container,
.comment-area, .related-entries, .pager-post-navi, .comment-respond {
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  color: var(--clr-text);
}

.entry-title, .archive-title,
.header-text-layer .header-catch,
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: 1;
}

.article .ttl-2-xl {
  padding-bottom: 5px;
  padding-right: 20px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--clr-title);
  line-height: var(--lh-heading);
  text-align: center;
  letter-spacing: 2px;
}

/* --- H6（英語サブタイトルなど） --- */
.article .ttl-6-xs {
  color: var(--clr-muted);
  text-align: center;
  font-family: var(--ff-accent);
  padding-bottom: 10px;
  letter-spacing: 2px;
}

.home .article .ttl-2-xl {
  padding-bottom: 16px;
  font-family: var(--ff-accent);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--clr-title);
  line-height: var(--lh-heading);
  text-align: center;
  padding-right: 0;
}

/* --- H6（英語サブタイトルなど） --- */
.home .article .ttl-6-xs {
  font-family: var(--ff-base);
  color: var(--clr-muted);
  text-align: center;
}

.title {
  margin-bottom: 60px;
}
body:not(.home) .title {
  display: flex;
  justify-content: flex-start;
  align-items: end;
  border-bottom:solid 1px var(--clr-muted);
}

.article .ttl-3-lg {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--clr-title);
  line-height: var(--lh-heading);
  text-align: left;
  letter-spacing: 2px;
  margin-bottom: 40px;
}

#list, .list-wrap,
.article ul li, .article ol li {
  margin: 0;
}

.list {
  flex-direction: inherit;
  row-gap: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

a:hover {
  color: var(--clr-muted);
}

/* 共通パーツ非表示設定（スマホ用など） */
.sp {
  display: none;
}

/**************************************************
 * 2. レイアウト・メインエリア
 **************************************************/

/* 横スクロール制御（PCのみ） */
body {
  background-color: var(--bg-0);
}

.box p,
.txt p {
  font-weight: var(--fw-bold);
  line-height: var(--lh-loose);
  margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
  body {
    min-width: var(--max-w-lg);
    overflow-x: auto;
  }
}

.content {
  margin: 0;
}

.wrap {
  width: auto;
}

main.main {
  padding: 0;
  border: none;
  background-color: var(--bg-0);
}

/* 記事本文エリア */
.entry-content {
  margin: 0;
}

/* ==================================================
   セクション背景の共通設定 (アンティークホワイト)
   ================================================== */
/*
   1. .home ... section : トップページのエディタで作ったセクション
   2. .article-section  : 投稿・固定ページ (content.phpで追加したクラス)
   3. .archive-section  : 一覧ページ (list.phpで追加したクラス)
*/
#cta section,
article.article .entry-content section,
.article-section,
.archive-section {
  padding-top: var(--section-pt);
  padding-bottom: var(--section-pb);
}

/* ==================================================
   偶数番目のセクションを白にする (縞々)
   ================================================== */
article.article .entry-content section:nth-child(even),
.article-section:nth-child(even),
.archive-section:nth-child(even) {
  background-color: var(--bg-0);
}

body:not(.post-type-archive) .archive-section {
  padding-top: 0;
}

/* 汎用ボックス */
.wp-block-group.box.wp-block-group-,
.breadcrumbs-in,
.box {
  max-width: var(--max-w);
  margin: 0 auto 0;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

body.contact .article .box,
.single .main .article-section .box {
  max-width: var(--max-w-content);
  margin: 0 auto 0;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

body.single-post .main .article-section .box {
  max-width: var(--max-w);
}

.breadcrumbs-in {
  text-align: left;
  font-size: 12px;
}

.breadcrumbs-in a {
  font-size: 12px;
}

.breadcrumb-sep {
  padding: 0 4px;
}

.breadcrumbs-layer {
  padding: 8px 0;
}


/* トップに戻るボタン */
.go-to-top-visible .go-to-top {
  bottom: 80px;
  z-index: 997;
}


@media screen and (max-width: 767px) {
  body:has(.navi.is-open) .go-to-top {
    display: none;
  }
}
.go-to-top {
  border: 1px solid var(--clr-muted);
  border-radius: 20px;
  padding: 10px 16px;
  background-color: #fff;
}
.go-to-top-button-image span {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-family: var(--ff-accent);
}
.go-to-top-button-image img {
  display: block;
  margin: 0 auto;
  width: 70px;
  height: 70px;
}
.go-to-top-button {
  border-width: 0;
  background-color: transparent;
  color: inherit;
  text-decoration: none;
  display: block;
  justify-content: unset;
  align-items: unset;
  width: auto;
  height: auto;
  cursor: pointer;
  text-align: unset;
  line-height: unset;
  border-radius: 0;
  font-size: unset;
}

/**************************************************
 * 3. ヘッダーエリア
 **************************************************/

/* --- 固定バー (.header-container) --- */
#header-container {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 99;
  width: 100%;
  height: auto;
  background-color: var(--bg-0);
}

/* --- ヘッダー中身 (.header-container-in) --- */
#header-container-in {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  max-width: var(--max-w-lg);
  margin: 0 auto;
  padding: 20px 0;
}

/* --- ビジュアルエリア (#header) --- */
#header {
  position: relative;
  width: 100%;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body:not(.home) #header {
  min-height: 300px;
}

.header-bg-wrap {
  position: relative;
  width: calc(100% - 5%);
  min-height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  overflow: hidden;
}
@media (min-width: 1440px) {
  .header-bg-wrap {
    width: calc(1440px - 72px);
  }
}

.header-in {
  display: block;
  margin: 0;
}

/* --- ロゴ関連 --- */
.tagline {
  margin: 0;
  display: none;
}

.logo-image {
  padding: 0;
}

.site-name-text-link {
  padding: 0;
}

.logo-header {
  width: 160px;
}

.logo-text {
  padding: 0;
}

.logo-header img {
  display: block;
}

.logo-header img:first-child {
  margin: 0 auto 8px;
}

.logo-header img:last-child {
  width: 100%;
}
.logo.logo-header.logo-text a:hover,
.go-to-top-button-image img:hover,
.sns a:hover,
.footer-bottom-logo a:hover {
  opacity: .8;
}

/* --- H1 --- */
.header-text-layer {
  position: absolute;
  top: 50%;
  right: 0;
  width: 40%;
  text-align: right;
  transform: translateY(-50%);
  padding: 60px 0;
}

.header-text-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(236,233,226,0.5), #ECE9E2);
  -webkit-mask:
    linear-gradient(to right, transparent, black 5%),
    linear-gradient(to bottom, transparent, black 4%, black 96%, transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, transparent, black 5%),
    linear-gradient(to bottom, transparent, black 4%, black 96%, transparent);
  mask-composite: intersect;
  z-index: 0;
}

.header-text-layer > * {
  position: relative;
  z-index: 1;
}

.header-text-layer .header-catch,
.header-text-layer .entry-title {
  position: relative;
  left: 0;
  max-width: 500px;
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  text-align: center;
  color: var(--clr-text);
}

.home .header-text-layer .header-catch,
.home .header-text-layer .entry-title {
  font-family: var(--ff-base);
}

.header-catch-sub {
  display: block;
  font-size: 18px;
  margin-top: 8px;
}

@media screen and (max-width: 767px) {
  .header-text-layer .header-catch,
  .header-text-layer .entry-title {
    font-size: var(--fs-xl);
  }

  /* トップページ スマホ用ヘッダー */
  .home .slider_in {
    padding-right: 0;
    height: 70vh;
  }
  .home .slider_in .slick-slider,
  .home .slider_in .slick-list,
  .home .slider_in .slick-track,
  .home .slider_in .slick-slide {
    height: 100%;
  }
  .home .slider_in .slick-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 75% center;
  }
  .home .slick-list {
    border-top-right-radius: 0;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  .home .slick-dots {
    flex-direction: row;
    justify-content: flex-end;
    right: 16px;
    left: auto;
    bottom: 16px;
    transform: none;
    gap: 4px;
  }
  .home .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
  }
  .header-text-layer {
    width: 70%;
  }
  .home .header-text-layer {
    top: 0;
    width: 100%;
    transform: none;
    padding: 50px 20px 100px;
    text-align: left;
  }
  .home .header-text-layer .header-catch {
    font-size: 32px;
  }
  .home .header-text-layer::before {
    background: linear-gradient(to bottom, rgba(236,233,226,0.85), rgba(236,233,226,0.5) 75%, transparent);
    -webkit-mask: none;
    mask: none;
  }
}

/**************************************************
 * 4. ナビゲーションメニュー
 **************************************************/
.navi {
  width: auto;
  margin: 0;
  background-color: transparent;
  display: flex;
  flex-direction: column;
}

.navi .item-label, .navi .item-description {
  overflow: visible;
}

.current_page_item {
  text-decoration: none;
  background-color: transparent;
  color: #fff;
  transition: none;
}

.navi-in a:hover {
  text-decoration: none;
  background-color: transparent;
  transition: none;
}

.navi-in .current_page_item > a .item-label,
.navi-in .current-menu-item > a .item-label,
.navi-in a:hover .item-label {
  text-decoration: underline;
  text-decoration-color: currentColor;
  transition: text-decoration-color 0.3s ease;
}

.navi-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
}

.navi-in > ul {
  max-width: 580px;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: center;
}

/* リスト設定 */
.navi-in > ul li {
  width: auto;
  height: auto;
}

.navi-in > ul li:not(.btn) {
  padding: 5px 16px;
}

/* ナビ内テキスト */
.navi-in > ul .caption-wrap > div {
  font-size: var(--fs-base);
  font-family: var(--ff-accent);
}
.navi-in > ul .caption-wrap > div.item-description.sub-caption {
  font-size: 10px;
  font-family: var(--ff-base);
  color: var(--clr-muted);
}
.navi-in > ul .caption-wrap {
  display: block;
}
#header-container-in .navi .btn_in {
  width: 264px;
}

.navi-in .btn.contact_btn {
  padding-left: 24px;
}

.navi-in .btn.contact_btn span {
  position: relative;
  padding-left: 36px;
}

.navi-in .btn.contact_btn span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 16px;
  background-image: url(./../../../common/img/icon_mail.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* PCでは不要な要素を隠す */
.navi .sns,
.btn-gnavi_box,
.navi-overlay,
.header-container-in .spnav_bottom {
  display: none;
}
.navi .sns_h .sns {
  display: block;
}
/**************************************************
 * 5. ボタンデザイン
 **************************************************/
.btn_in {
  text-align: center;
}

.footer .btn_in {
  margin-bottom: 10px;
}

input[type="submit"],
.navi-in a.btn,
.btn {
  position: relative;
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 16px 50px 16px 40px;
  border: 1px solid var(--clr-text);
  border-radius: 0;
  background-color: transparent;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-btn);
  color: var(--clr-text);
}

/* 矢印の線 */
.navi-in a.btn::after,
.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -36px;
  width: 46px;
  height: 1px;
  background-color: currentColor;
  border: none;
  transform: translateY(-50%) translateX(0);
  transition: transform 0.3s ease;
}

/* 矢印の頭（直角三角形） */
.navi-in a.btn::before,
.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -36px;
  width: 12px;
  height: 5px;
  background-color: currentColor;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  transform: translateY(-100%) translateX(0);
  transition: transform 0.3s ease;
}

.navi-in a.btn:hover,
.btn:hover {
  text-decoration: none;
  opacity: 1;
  color: var(--clr-text);
}

body .navi-in a.btn:hover::after,
body .btn:hover::after {
  right: -36px;
  transform: translateY(-50%) translateX(8px);
}

body .navi-in a.btn:hover::before,
body .btn:hover::before {
  transform: translateY(-100%) translateX(8px);
}



.bottom_btn.sp {
  display: none;
}

.ranking-item-link-buttons a:hover::after,
.btn-wrap > a:hover::after {
  right: -4px;
}

/**************************************************
 * 6. SNSアイコン
 **************************************************/
.footer-bottom-content.box.navi_in .sns,
.sns_h {
  max-width: 126px;
  margin: 0 60px;
}
.footer-bottom-content.box.navi_in .sns {
  margin: 0;
}
.footer-bottom-content.box.navi_in .sns ul,
.sns_h .sns ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}
.footer-bottom-content.box.navi_in .sns ul li,
.sns_h .sns ul li {
  width: 38%;
}




.sns ul li img {
  display: none;
}

.sns ul li img.color_icon {
  display: block;
}



/**************************************************
 * 8. フッターエリア
 **************************************************/
#footer .footer-info ul {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
}

.footer {
  margin: 0;
  padding: 0;
  background-color: var(--bg-3);
}

/* テキスト色調整 */
.copyright, .footer ul li, .footer ul li a, .footer ul li p,
.footer ul li span, .footer a, .footer p, .footer span {
  color: #fff;
}

.copyright {
  display: inline-block;
  width: auto;
}

/* フッター内SNS */
.footer .sns img {
  display: block;
}


/* フッター下部レイアウト */
.footer-bottom .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom:  solid 1px #fff;
  column-gap: 56px;
  margin-top: 60px;
}

.footer-bottom_in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

/* ロゴ */
.footer-bottom-logo {
  position: relative;
  float: none;
  width: 250px;
}

.footer-bottom-logo img {
  height: 80px;
}

.footer-bottom-logo a {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 10px;
}

.footer-bottom-logo a img {
  filter: brightness(0) invert(1);
  max-width: 50px;
  height: auto;
}
.footer-bottom-logo a img:last-child {
  filter: brightness(0) invert(1);
  max-width: 180px;
  height: auto;
}

/* フッターメニュー */
.footer-container .menu li {
  border-left: 1px solid #fff;
}

.footer-container .menu li a {
  padding-left: 10px;
}
.footer-container .menu li a:hover {
  text-decoration: underline;
}

.menu-desc {
  padding-left: 10px;
}

.footer-container .menu {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 16px 40px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.navi-footer-in a:hover {
  text-decoration: underline;
  background-color: transparent;
  color: inherit;
}

.navi-footer-in > .menu-footer li:last-child {
  border-right: none;
}

/* コンテンツ・住所 */
.footer-bottom-content {
  float: none;
  text-align: left;
}

.footer-bottom-content .shopinfo {
  display: none;
}

.footer-bottom-content .address {
  display: block;
  margin-left: 30px;
}

.footer-bottom-content .address li {
  margin-bottom: 5px;
  line-height: var(--lh-base);
}

.footer-bottom-content .address li .tel-num {
  margin: 0;
  font-size: inherit;
  font-weight: var(--fw-normal);
  letter-spacing: 0;
}

.footer-adress p {
  margin: 0;
  line-height: var(--lh-base);
}


.right.map {
  margin-bottom: 30px;
}


.footer-bottom-content.box.copy {
  text-align: center;
}
.footer-bottom-content.box.copy a {
  text-decoration: underline;
}
.footer-bottom-content.box.copy a:hover {
  text-decoration: none;
}

.yoyaku span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #fff;
  background-color: #C3A24A;
  margin-bottom: 40px;
  padding: 10px 20px;
  border-radius: 30px;
  line-height: 1;
}
.info_table {
  margin-bottom: 60px;
}

.main .menu_table {
  border: 1px solid var(--clr-muted);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.main table thead th,
.main table thead td {
  width: 50%;
  background-color: var(--clr-muted);
  color: #fff;
  text-align: center;
}

.main table tbody tr:nth-child(even) th,
.main table tbody tr:nth-child(even) td {
  background-color: #F3ECDB;
}

.main table thead th,
.main table thead td,
.main table tbody th,
.main table tbody td {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  padding: 8px 40px;
}

.main table tbody th {
  text-align: left;
  background-color: #fff;
}

.main table tbody td {
  text-align: right;
}


.main .menu_table.xp td {
  text-align: left;
}
.main .menu_table.xp thead td {
  text-align: center;
}

.main .menu_table.xp thead th,
.main .menu_table.xp tbody th {
  width: 30%;
}
.main table:not(.has-border-color) :where(th, td) {
  border: none;
}


table tr:nth-of-type(2n+1),
.footer-info table:not(.has-border-color) :where(th, td),
.footer-info table th {
  background-color: transparent;
  border: none;
  font-size: var(--fs-sm);
  padding: 2px 0;
}
.footer-info table th {
  text-align: left;
  vertical-align: top;
  font-weight: inherit;
}

/* フッター最下部ボックス */
.footer-bottom-content.box.navi_in {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 50px 15px 20px;
}
.footer-bottom-content.box {
  padding: 30px 15px;
}

.footer-bottom-content.box a,
.footer-bottom-content.box div {
  font-size: var(--fs-sm);
}

.footer-bottom-content.box div {
  margin-left: 10px;
}

.footer-bottom-content.box .pri {
  text-decoration: underline;
}

/**************************************************
 * 9. スマホ・タブレット用レスポンシブ (max-width: 767px)
 **************************************************/
@media screen and (max-width: 767px) {
  /* --- 共通 --- */
  .sp {
    display: block;
  }
  body:not(.home) .title {
    display: block;
  }
  .breadcrumb {
    width: 100%;
    max-width: 100%;
  }

  /* --- ヘッダー --- */
  .logo {
    width: 84px;
  }
  .logo-header img {
    width: 30px;
  }
  #header-container-in {
    justify-content: flex-start;
    padding: 10px 15px;
  }
  .header-container-in .shopinfo {
    display: none;
  }

  /* スマホ用パーツ表示 */
  .navi .sns,
  .header-container-in .spnav_bottom,
  .header-container-in .spnav_bottom .shopinfo {
    display: block;
  }

  .navi .sns_h {
    display: none;
  }
  /* --- ハンバーガーメニュー --- */
  .btn-gnavi_box {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    display: block;
    width: 70px;
    height: 80px;
    padding: 16px;
    background-color: var(--bg-1);
    cursor: pointer;
  }
  .btn-gnavi_box span {
    position: absolute;
    left: 50%;
    width: 30px;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 10px;
    background: var(--clr-text);
    transition: all 400ms;
  }
  .btn-gnavi span:nth-child(1) {
    top: 20px;
  }
  .btn-gnavi span:nth-child(2) {
    top: 30px;
  }
  .btn-gnavi span:nth-child(3) {
    top: 40px;
  }

  /* アニメーション */
  .is-open .btn-gnavi span:nth-child(1) {
    top: 30px;
    left: 20px;
    width: 30px;
    transform: rotate(45deg);
  }
  .is-open .btn-gnavi span:nth-child(2) {
    display: none;
  }
  .is-open .btn-gnavi span:nth-child(3) {
    top: 30px;
    left: 20px;
    width: 30px;
    transform: rotate(-45deg);
  }

  .btn-gnavi_box .txt {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-sm);
    font-family: var(--ff-accent2);
    color: var(--clr-text);
  }

  /* --- ナビゲーション (.navi) --- */
  .navi {
    position: fixed;
    top: 0;
    right: -100%;
    left: auto;
    z-index: 999;
    width: 75%;
    height: 100dvh;
    padding-top: 80px;
    background-color: transparent;
    transition: right 0.4s ease;
    overflow-y: auto;
  }
  .navi.is-open {
    right: 0;
    overflow-y: scroll;
  }

  #navi-in {
    width: 100%;
    padding: 20px;
    background-color: #666666;
  }
  #header-container-in .navi .footer-info table tr:nth-child(n+3) {
    display: none;
  }
  #header-container-in .navi .yoyaku span {
    margin-bottom: 10px;
  }
  #header-container-in .navi .btn_in {
    width: 100%;
    color: #fff;
  }
  #header-container-in .navi .btn_in .tel li a {
    color: #fff;
  }
  #header-container-in .navi .btn_in .tel ul {
    display: inline-block;
  }
  #header-container-in .navi .btn_in .tel ul::before {
    left: -20px;
  }
  .navi-in .btn.contact_btn {
    color: #fff;
    border-color: #fff;
  }
  .navi-in .btn.contact_btn span::before {
    filter: brightness(0) invert(1);
  }

  /* PCメニュー非表示・開閉制御 */
  .navi-in .menu-pc {
    display: none;
  }
  .navi.is-open .navi-in .menu-pc {
    display: block;
    width: 100%;
    margin-bottom: 30px;
  }

  .navi-in .btn_in,
  .navi-in .sns {
    margin: 0 auto 20px;
  }
  .navi-in .sns {
    margin-bottom: 50px;
  }
  .navi-in .sns ul {
    display: flex;
    justify-content: center;
    gap: 24px;
  }
  .navi-in .sns ul li {
    width: 50px;
    text-align: center;
  }
  .navi-in .sns ul {
    margin: 0;
  }
  .navi-in .btn_in a {
    margin: 0;
  }

  /* ナビ内リスト */
  .navi-in > ul li {
    text-align: left;
    border-bottom: solid 1px var(--clr-muted);
  }

  .current_page_item, .navi-in a:hover,
  .navi-in > ul .caption-wrap > div {
    color: #fff;
  }
  .navi-in > ul li:not(.btn) {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .navi-in > ul li:not(.btn) a {
    position: relative;
    display: block;
    padding-right: 40px;
  }
  .navi-in > ul li:not(.btn) a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 30px;
    height: 1px;
    background-color: var(--clr-muted);
    transform: translateY(-50%);
  }
  .navi-in > ul li:not(.btn) a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 10px;
    height: 4px;
    background-color: var(--clr-muted);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    transform: translateY(-100%);
  }
  .navi-in > ul li:last-child a,
  .navi-in > ul li:last-child .caption-wrap {
    width: auto;
  }
  .navi-in > ul .caption-wrap > div {
    width: auto;
    padding-right: 10px;
  }
  .navi-in > ul .caption-wrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
  }

  /* ナビ内情報 */
  ul.shopinfo {
    grid-template-columns: 1fr;
    margin-bottom: 50px;
  }
  ul.shopinfo li {
    margin-bottom: 4px;
  }

  .spnav_bottom {
    color: #fff;
    margin: 0 auto;
  }
  .spnav_bottom .footer-adress {
    text-align: center;
    margin-bottom: 24px;
  }
  .spnav_bottom .footer-adress p {
    display: inline-block;
    position: relative;
    padding-left: 24px;
    color: #fff;
    text-align: left;
  }
  .spnav_bottom .footer-adress p::before {
    content: '\f041';
    font-family: 'FontAwesome';
    position: absolute;
    top: -3px;
    left: -10px;
    width: 24px;
    font-size: 32px;
    text-align: center;
    color: var(--clr-muted);
  }
  .spnav_bottom a {
    color: #fff;
  }
  .spnav_bottom span {
    display: inline-block;
    font-size: var(--fs-sm);
  }
  .spnav_bottom span.tel-num {
    font-size: 28px;
  }
  .spnav_bottom p {
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
  }
  .spnav_bottom .source-org.copyright,
  .spnav_bottom a {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: var(--fw-normal);
    line-height: var(--lh-base);
    color: inherit;
  }
  .spnav_bottom a {
    text-decoration: underline;
  }

  /* --- オーバーレイ --- */
  .navi-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    display: block;
    width: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s ease;
  }
  .navi-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* --- フッター (スマホ) --- */
  .footer-bottom, .footer-bottom_in {
    display: block;
  }
  #footer .footer-info ul {
    display: block;
  }
  #footer .footer-info ul .yoyaku {
    margin-bottom: 10px;
  }
  .footer-bottom .wrap {
    grid-template-columns: 1fr;
  }
  .footer-bottom-content.box.navi_in {
    display: block;
    padding-top: 0;
  }
  .footer-bottom-content.box.navi_in .sns {
    margin: 0 auto;
  }
  .footer-container .menu {
    grid-template-columns: 1fr;
    grid-template-rows: unset;
    grid-auto-flow: unset;
    width: fit-content;
    margin: 0 auto 30px;
  }
  .footer-container .menu li a {
    display: block;
    text-align: left;
    margin-bottom: 0;
  }
  .footer-container .menu li span {
    display: none;
  }
  .footer-bottom-content.box, .footer-bottom.box {
    max-width: 90%;
  }

  .footer-bottom-logo {
    margin-bottom: 30px;
  }
  .footer-bottom-logo .logo-image {
    width: 80px;
  }
  .footer-bottom-logo img {
    height: auto;
  }

  .footer-bottom-content {
    margin-bottom: 30px;
  }
  .footer-bottom-content .address {
    margin-left: 0;
  }

  .navi-footer-in > .menu-footer li.menu-item {
    width: auto;
    text-align: left;
    border-left: 1px solid var(--cocoon-thin-color);
  }
  .navi-footer-in > .menu-footer li.menu-item a {
    padding: 0 8px;
  }
  .footer-bottom-content.box {
    display: block;
    max-width: 100%;
    margin: 0;
  }
  .footer-bottom-content.box a, .footer-bottom-content.box div {
    display: block;
    margin: 0;
    text-align: center;
    font-size: .8em;
  }
  .footer-bottom-content.box a {
    margin-bottom: 30px;
  }

  /* --- 追従ボタン --- */
  .bottom_btn.sp {
    position: fixed;
    bottom: 10px;
    left: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    transition: opacity 0.3s, visibility 0.3s;
    opacity: 1;
  }
  .bottom_btn.sp.is-bottom {
    opacity: 0;
  }

  .bottom_btn.sp a {
    position: relative;
    padding: 15px 16px 15px 44px;
    font-size: 12px;
    color: var(--clr-muted);
    font-family: var(--ff-accent);
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid var(--clr-muted);
    margin-left: 5px;
    margin-right: 5px;
  }
  .bottom_btn .btn::after {
    content: none;
  }
  .bottom_btn.sp a:hover::before {
    transform: translateY(-50%);
  }
  .bottom_btn .btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 15px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    clip-path: none;
    transform: translateY(-50%);
    transition: none;
    background-image: url(./../../../common/img/icon_phone.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .bottom_btn .btn.line::before {
    left: 15px;
    width: 20px;
    height: 20px;
    background-image: url(./../../../common/img/icon_line.png);
    filter: inherit;
  }
  .bottom_btn .btn.pc::before {
    left: 15px;
    width: 20px;
    height: 16px;
    background-image: url(./../../../common/img/icon_mail_g.png);
    filter: inherit;
  }
}

/**************************************************
 * 10. ニュースエリア (#news)
 **************************************************/
#news {
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 20px;
  border-radius: var(--radius);
  background-color: var(--bg-0);
}

/**************************************************
 * 11. スライダー (Slick / Swiper)
 **************************************************/
.slider_in {
  padding-right: 5%;
  overflow: hidden;
}
@media (min-width: 1440px) {
  .slider_in {
    max-width: 1440px;
    padding-right: 72px;
  }
}
.slick-dotted.slick-slider {
  margin-bottom: 0;
}
.slick-dots li button::before {
  font-size: var(--fs-base);
  color: #ccc;
}
.slick-dots li.slick-active button::before {
  color: var(--clr-muted);
}
.slick-dots {
  position: absolute;
  top: auto;
  right: -40px;
  bottom: 0;
  left: auto;
  width: auto;
  transform: translateY(-50%);
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
.slick-slider {
  margin-top: 0;
}
.slick-list {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

/* ==================================================
   Swiperスライダー (my-post-swiper) の装飾
   ================================================== */
.my-post-swiper {
  box-sizing: border-box;
  width: 100%;
  /* ▼▼▼ これが「左余白」を作ります ▼▼▼ */
  padding-top: 0;
  padding-right: 20px; /* 右端の余白 */
  padding-bottom: 50px; /* ページネーション用の下余白 */
  padding-left: 10vw; /* 初期表示で左に10vwの余白 */
}

.my-post-swiper .swiper-wrapper {
  margin: 0;
}

/**************************************************
 * 12. トップページ セクション
 **************************************************/
#sec_a.box {
  max-width: 700px;
  text-align: center;
}
#sec_a.box .ttl-3-lg {
  text-align: center;
}
#sec_a.box .txt {
  margin-bottom: 80px;
}

/* スライド（箱）の設定 */
.my-post-swiper .swiper-slide {
  height: auto; /* 高さを揃える */
}

.my-post-swiper .swiper-slide article .entry-card-thumb {
  width: 100%;
}

.my-post-swiper .swiper-slide article .entry-card-content {
  margin: 0;
  min-height: 165px;
}

.my-post-swiper .swiper-slide article .entry-card-content .btn_in {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  padding-right: 10px;
}

/* 中身のCocoonカードの調整 */
.my-post-swiper .entry-card-wrap {
  width: 100%;
  height: 100%;
  margin: 0; /* 余計なマージン削除 */
}

/* ==================================================
   共通: 丸矢印ボタン
   ================================================== */
.post-thumb-overlay__arrow,
.my-gallery-swiper .swiper-button-prev,
.my-gallery-swiper .swiper-button-next,
.pagination .page-numbers.next,
.pagination .page-numbers.prev,
.pager-links .page-numbers.next,
.pager-links .page-numbers.prev {
  --arrow-color: #fff;
  border-radius: 50%;
  border: 1px solid var(--arrow-color);
  background-color: transparent;
  background-image: none;
  transition: background-color 0.4s ease;
}

/* 金色バリアント */
.my-gallery-swiper .swiper-button-prev,
.my-gallery-swiper .swiper-button-next,
.pagination .page-numbers.next,
.pagination .page-numbers.prev,
.pager-links .page-numbers.next,
.pager-links .page-numbers.prev {
  --arrow-color: var(--clr-muted);
}

/* 矢印の線 */
.my-post-swiper .swiper-button-prev::after,
.my-post-swiper .swiper-button-next::after,
.post-thumb-overlay__arrow::after,
.my-gallery-swiper .swiper-button-prev::after,
.my-gallery-swiper .swiper-button-next::after,
.pagination .page-numbers.next::after,
.pagination .page-numbers.prev::after,
.pager-links .page-numbers.next::after,
.pager-links .page-numbers.prev::after {
  content: "";
  font-size: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 1px;
  background-color: var(--arrow-color);
  transform: translate(-55%, -50%);
}

/* 矢印の三角 */
.post-thumb-overlay__arrow::before,
.my-gallery-swiper .swiper-button-prev::before,
.my-gallery-swiper .swiper-button-next::before,
.pagination .page-numbers.next::before,
.pagination .page-numbers.prev::before,
.pager-links .page-numbers.next::before,
.pager-links .page-numbers.prev::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 5px;
  background-color: var(--arrow-color);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* ==================================================
   my-post-swiper 固有（Swiperデフォルトスタイルを上書き）
   ================================================== */
.my-post-swiper .swiper-button-prev,
.my-post-swiper .swiper-button-next {
  z-index: 20;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  border: 1px solid var(--clr-muted);
  background-color: transparent;
  background-image: none;
  transition: background-color 0.4s ease;
}

.my-post-swiper .swiper-button-prev:hover,
.my-post-swiper .swiper-button-next:hover {
  background-color: var(--clr-muted);
}

.my-post-swiper .swiper-button-prev::after,
.my-post-swiper .swiper-button-next::after {
  content: "";
  font-size: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 1px;
  background-color: var(--clr-muted);
  transform: translate(-55%, -50%);
}

.my-post-swiper .swiper-button-prev:hover::after,
.my-post-swiper .swiper-button-next:hover::after {
  background-color: #fff;
}

.my-post-swiper .swiper-button-prev::before,
.my-post-swiper .swiper-button-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 5px;
  background-color: var(--clr-muted);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.my-post-swiper .swiper-button-prev:hover::before,
.my-post-swiper .swiper-button-next:hover::before {
  background-color: #fff;
}

.my-post-swiper .swiper-button-next {
  right: auto;
  left: 6vw;
}

.my-post-swiper .swiper-button-next::before {
  transform: translate(-118%, -100%) scaleX(-1);
}

.my-post-swiper .swiper-button-prev {
  right: 19px;
  left: auto;
}

.my-post-swiper .swiper-button-prev::before {
  transform: translate(18%, -100%);
}

/* --- スマホ調整 --- */
@media screen and (max-width: 767px) {
  .my-post-swiper {
    padding-right: 0;
    padding-left: 50px;
  }
  .my-post-swiper .swiper-button-next {
    left: 5px;
  }
  .my-post-swiper .swiper-button-prev {
    right: 5px;
  }
  .my-post-swiper .swiper-button-prev,
  .my-post-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  .my-post-swiper .swiper-button-prev::before,
  .my-post-swiper .swiper-button-next::before {
    width: 14px;
  }
  .my-post-swiper .swiper-button-next::after {
    left: 14px;
  }
  .my-post-swiper .swiper-button-prev::after {
    right: 14px;
  }
}

/**************************************************
 * 12. ページネーション & ページャー (共通デザイン)
 **************************************************/
/* --- 外枠のレイアウト --- */
.pagination,
.pager-links {
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-items: center;
  gap: 8px; /* ボタン同士の間隔 */
  margin: 60px 0; /* 上下の余白 */
  padding: 0;
  list-style: none;
}

/* --- 丸いボタンの共通設定 --- */
/* 一覧(.pagination) と 記事分割(.pager-links) の両方に適用 */
.pagination .page-numbers,
.pager-links .page-numbers {
  display: flex;
  justify-content: center; /* 文字をど真ん中に */
  align-items: center;
  width: 50px; /* 正円にするため幅と高さを固定 */
  height: 50px;
  border: 1px solid var(--clr-muted);
  border-radius: 50%;
  background: transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-decoration: none;
  color: var(--clr-muted);
  transition: all 0.3s ease;
}

/* --- ホバー時 & 現在のページ --- */
/* リンクがある時のホバー */
.pagination a.page-numbers:hover,
.pager-links a.page-numbers:hover,
/* 現在のページ（spanタグ） */
.pagination .page-numbers.current,
.pager-links .page-numbers.current {
  /* 浮き上がる演出 */
  transform: translateY(-2px);
  border-color: var(--clr-muted);
  background-color: var(--clr-muted);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  color: #fff;
  opacity: 1;
}

/* 現在のページはクリック無効 */
.pagination .page-numbers.current,
.pager-links .page-numbers.current {
  pointer-events: none;
}

/* --- next / prev 矢印 --- */
.pagination .page-numbers.next,
.pagination .page-numbers.prev,
.pager-links .page-numbers.next,
.pager-links .page-numbers.prev {
  font-size: 0;
  position: relative;
  overflow: visible;
}

/* ページャーは矢印を小さめに */
.pagination .page-numbers.next::after,
.pagination .page-numbers.prev::after,
.pager-links .page-numbers.next::after,
.pager-links .page-numbers.prev::after {
  width: 16px;
}

.pagination .page-numbers.next::before,
.pagination .page-numbers.prev::before,
.pager-links .page-numbers.next::before,
.pager-links .page-numbers.prev::before {
  width: 7px;
  height: 4px;
  transform: translate(18%, -100%);
}

.pagination .page-numbers.prev,
.pager-links .page-numbers.prev {
  transform: scaleX(-1);
}

.pagination a.page-numbers.next:hover::after,
.pagination a.page-numbers.next:hover::before,
.pagination a.page-numbers.prev:hover::after,
.pagination a.page-numbers.prev:hover::before,
.pager-links a.page-numbers.next:hover::after,
.pager-links a.page-numbers.next:hover::before,
.pager-links a.page-numbers.prev:hover::after,
.pager-links a.page-numbers.prev:hover::before,
.my-gallery-swiper .swiper-button-prev:hover::after,
.my-gallery-swiper .swiper-button-prev:hover::before,
.my-gallery-swiper .swiper-button-next:hover::after,
.my-gallery-swiper .swiper-button-next:hover::before {
  background-color: #fff;
}

.pagination a.page-numbers.prev:hover,
.pager-links a.page-numbers.prev:hover {
  transform: scaleX(-1) translateY(-2px);
}

/* --- 「...」の装飾 --- */
/* ドットは枠線を消してシンプルに */
.pagination .dots,
.pager-links .dots {
  width: auto;
  border: none;
  background: transparent;
  pointer-events: none;
  color: var(--clr-muted);
}

/* --- スマホ調整 --- */
@media screen and (max-width: 767px) {
  .pagination,
  .pager-links {
    gap: 4px; /* 間隔を狭く */
  }
  .pagination .page-numbers,
  .pager-links .page-numbers {
    width: 40px; /* スマホは少し小さく */
    height: 40px;
    font-size: var(--fs-sm);
  }
}

/**************************************************
 * 13. 投稿一覧カードデザイン (共通化・修正版)
 **************************************************/

/* 抜粋文のスマホ表示調整 */
.no-sp-snippet .entry-card-snippet {
  display: none;
}

.no-sp-snippet .entry-card-snippet p {
  margin-bottom: 20px;
  line-height: var(--lh-base);
}

/* --------------------------------------------------
   1. リスト全体（Flexコンテナ）
   -------------------------------------------------- */
/* IDセレクタ(#list)を使って優先度を上げる */
body:not(.home) #list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  align-items: stretch;
}

/* --------------------------------------------------
   2. カード本体 (.entry-card)
   -------------------------------------------------- */
/* 共通設定 */
.list .entry-card,
.my-post-swiper .swiper-slide,
.top-post-list .entry-card {
  /* カード自体のレイアウト設定 */
  display: flex;
  flex-direction: column; /* 縦積み */
  float: none; /* Cocoonのfloatを解除 */
  height: auto; /* 親のstretchに従う */
  background-color: var(--bg-1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
}


/* --------------------------------------------------
   3. 画像エリア
   -------------------------------------------------- */
.list .entry-card-thumb,
.my-post-swiper .entry-card-thumb,
.top-post-list .entry-card-thumb {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
}

.type-post .entry-card-thumb {
  aspect-ratio: 2 / 3;
}

.list .entry-card-thumb img,
.my-post-swiper .entry-card-thumb img,
.top-post-list .entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-thumb-cat {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: auto;
  left: auto;
  z-index: 1;
  max-width: inherit;
  margin: 0;
  padding: 4px 8px;
  overflow: visible;
  border: none;
  border-radius: 5px;
  background-color: var(--clr-muted);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  opacity: 1;
}

.post-thumb-link {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.post-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.post-thumb-link:hover img {
  transform: scale(1.08);
}

.post-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.4s ease;
}

.post-thumb-overlay .post-thumb-overlay__title {
  color: #fff;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  text-align: center;
  padding: 0 32px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.post-thumb-overlay__arrow {
  position: relative;
  width: 40px;
  height: 40px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s, background-color 0.4s ease;
}

.post-thumb-overlay__arrow::before {
  transform: translate(18%, -100%);
}



.post-thumb-link:hover .post-thumb-overlay {
  background: rgba(0, 0, 0, 0.45);
}

.post-thumb-link:hover .post-thumb-overlay__title,
.post-thumb-link:hover .post-thumb-overlay__arrow {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------
   4. コンテンツエリア（文字＋ボタン）
   -------------------------------------------------- */
.list .entry-card-content,
.my-post-swiper .entry-card-content,
.top-post-list .entry-card-content {
  position: relative;
  /* カードの残りの高さを埋める */
  flex: 1;
  /* 中身（ボタンなど）の配置用 */
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px;
}

/* --------------------------------------------------
   5. ボタンの位置調整
   -------------------------------------------------- */
.list .entry-card .btn_in,
.my-post-swiper .entry-card .btn_in,
.top-post-list .entry-card .btn_in {
  /* 位置リセット */
  position: static;
  right: auto;
  bottom: auto;
  width: 100%;
  margin-top: auto; /* 一番下に配置 */
}

/* --------------------------------------------------
   スマホ対応（レスポンシブ）
   -------------------------------------------------- */
@media screen and (max-width: 768px) {
  body:not(.home) #list {
    grid-template-columns: 1fr 1fr;
    gap: 24px 12px;
  }
  body:not(.home) #list .entry-card {
    width: 100%;
    margin-right: 0;
  }
}

/**************************************************
 * 14. 記事詳細・メタ情報・カテゴリラベル
 **************************************************/
.article-section .single-content-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  text-align: left;
  border-bottom: 1px solid var(--clr-muted);
  margin-bottom: 40px;
}

.related-entry-card-title, .entry-card-title {
  display: inline-block;
  margin: 0;
  overflow: visible;
  font-size: inherit;
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  text-align: left;
  -webkit-line-clamp: inherit;
  -webkit-box-orient: inherit;
}

.entry-card-thumb, .author-thumb, .blogcard-thumbnail, .related-entry-card-thumb, .popular-entry-card-thumb, .new-entry-card-thumb {
  float: none;
  width: 100%;
  margin: 0;
}

.entry-card-meta {
  position: relative;
  right: auto;
  bottom: auto;
  margin-bottom: 10px;
}

.e-card-info {
  display: block;
  width: 100%;
  text-align: left;
}

.entry-card-title a {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  text-align: left;
}

body:not(.home) .eye-catch-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.entry-card .btn_in {
  text-align: right;
}

.entry-card .btn_in a {
  position: relative;
  display: inline-block;
  padding-right: 60px;
  font-size: var(--fs-sm);
  color: var(--clr-text);
}

.entry-card .btn_in a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 46px;
  height: 1px;
  background-color: currentColor;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.entry-card .btn_in a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 12px;
  height: 5px;
  background-color: currentColor;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.entry-card .btn_in a:hover::after {
  transform: translateY(-50%) translateX(8px);
}

.entry-card .btn_in a:hover::before {
  transform: translateY(-100%) translateX(8px);
}

.e-card-info > span {
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
}

.post-date span.fa {
  display: none;
}

.entry-date {
  margin: 0;
  color: var(--clr-muted);
}

/* --- スマホ調整（一覧） --- */
@media screen and (max-width: 767px) {
  body:not(.home) .list .entry-card-wrap {
    width: 100%; /* スマホは1列 */
    margin: 0 0 20px;
  }
  .article-section .single-content-title {
    font-size: 18px;
    line-height: 1.8;
  }
}

.eye-catch .cat-label,
.cat-label {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: auto;
  left: auto;
  max-width: inherit;
  margin: 0;
  padding: 5px 12px;
  overflow: visible;
  border: none;
  border-radius: 12px;
  background-color: var(--clr-muted);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  opacity: 1;
}

.single .eye-catch img {
  display: block;
  margin-bottom: 40px;
  border-radius: 20px;
}

.single .eye-catch .cat-label {
  position: relative;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  margin: 20px 0 0 0;
}

.single .date-tags {
  margin-bottom: 50px;
}

.news-list-wrap .cat-label {
  position: relative;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  min-width: 80px;
  margin: 0 32px;
}

#news {
  padding-bottom: 40px;
}

#news .news-list-wrap {
  padding: 0 20px 40px;
}

#news .news-list-wrap li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: solid 1px #ccc;
}

#news .news-list-wrap li span {
  line-height: var(--lh-base);
}

@media screen and (max-width: 767px) {
  #news .news-list-wrap li {
    flex-wrap: wrap;
    align-items: center;
  }
  #news .news-list-wrap li .news-date {
    margin-bottom: 8px;
  }
  #news .news-list-wrap li .news-cat {
    margin-bottom: 8px;
  }
  #news .news-list-wrap li a.news-link {
    display: block;
    width: 100%;
  }
}

/**************************************************
 * 15. フォーム関連 (naniwaya-form)
 **************************************************/
.naniwaya-form > p {
  margin-bottom: 30px;
}

.naniwaya-form > p > label {
  display: inline-block;
  padding-bottom: 10px;
}

.wpcf7-form-control-wrap {
  display: block;
}

input[type="date"], select, input[type="number"] {
  width: 300px;
}

._in {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.last_oder {
  margin-left: 30px;
}

.submitbtn p {
  margin-top: 50px;
  text-align: center;
}

.pri_box {
  width: 70%;
  margin: 48px auto 0;
  text-align: center;
}

.pri_box > p > a {
  display: inline-block;
  padding-bottom: 30px;
  text-decoration: underline;
}

.pri_box > p > span {
  display: block;
  text-align: left;
}

.wpcf7-spinner {
  display: none;
}

/**************************************************
 * 16. CTAエリア
 **************************************************/
.tel ul {
  position: relative;
  padding-left: 10px;
  margin-bottom: 24px;
}
.tel ul::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-image: url(./../../../common/img/icon_phone.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tel li {
  line-height: 1;
  text-align: center;
}

.tel .hours {
  display: block;
  font-size: 10px;
  line-height: 1;
  margin-bottom: 5px;
  text-align: center;
}

.tel .namber {
  font-family: var(--ff-accent2);
  font-size: var(--fs-lg);
  text-align: center;
  display: block;
  line-height: 1;
  letter-spacing: 2px;
}





.contact #cta .box {
  max-width: var(--max-w-content);
}

.contact #cta .box ul li {
  width: 50%;
}

#cta .box ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 30px 16px;
  background-color: transparent;
  border: 1px solid var(--clr-muted);
  border-radius: 30px;
}

#cta .box ul li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 12px;
  border-right: solid 1px var(--clr-muted);
  text-align: center;
}

#cta .box ul li::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: 1;
  width: 40px;
  height: 40px;
  transform: translateX(-50%);
  background-image: url(./../../../common/img/icon_phone.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#cta .box ul li::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--clr-muted);
}

#cta .box ul li ul {
  display: block;
}
#cta .box ul li ul li {
  border: none;
  text-align: left;
  padding: 0;
}
#cta .box ul li ul li::before,
#cta .box ul li ul li::after {
  content: none;
}

#cta .box ul li:last-child {
  border-right: none;
}

#cta .box ul li p.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  margin: 104px 0 30px;
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 2;
  border: none;
}

#cta .box ul li:nth-child(2)::before {
  background-image: url(./../../../common/img/icon_line.png);
}

#cta .box ul li:nth-child(3)::before {
  background-image: url(./../../../common/img/icon_instagram.png);
}

#cta .box .btn_in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

#cta .box .btn_in p {
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 2;
}

#cta .box .btn_in p.tel {
  color: var(--bg-3);
}

#cta .box .btn_in p.tel a {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--bg-3);
}

#cta .box .btn_in p.uketsuke {
  font-size: var(--fs-sm);
}

#cta .box .btn_in .btn {
  margin-bottom: 16px;
}

#cta .box .btn_in .end {
  margin-bottom: 0;
}
#cta .box .tel ul {
  display: flex;
  flex-direction: column-reverse;
  border: none;
  padding-top: 0;
  padding-bottom: 0;
}
#cta .box .tel ul::before {
 content: none;
}
#cta .box .tel ul li {
  display: block;
  width: 100%;
  text-align: center;
}
#cta .box .tel ul li .namber {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--clr-muted);
  text-decoration: underline;
  text-decoration-color: var(--clr-muted);
  padding-bottom: 20px;
}
#cta .box .tel ul li .namber::before {
  content: "TEL.";
  color: var(--clr-muted);
  font-size: var(--fs-base);
  display: inline-block;
  text-decoration: none;
}
#cta .box .tel ul li .hours {
  font-size: 12px;
}
/**************************************************
 * 17. CTA用スマホ設定
 **************************************************/
@media screen and (max-width: 767px) {
  #cta .box ul {
    display: block;
    padding: 16px;
  }
  .contact #cta .box ul li,
  #cta .box ul li {
    width: 100%;
    min-height: inherit;
    padding: 40px 12px;
    border-right: none;
    border-bottom: solid 1px #ccc;
  }
  #cta .box ul li:last-child {
    border-bottom: none;
  }
  #cta .box ul li::before {
    top: 40px;
  }
  #cta .box ul li::after {
    top: 20px;
  }
  #cta .box ul li p.title {
    margin: 72px 0 20px;
  }
  #cta .box .btn_in p.tel a {
    font-size: var(--fs-lg);
  }
}

.home #sec_a .txt p {
  line-height: var(--lh-loose);
}

/**************************************************
 * 18. sec_b カード（MENU / STYLE 大型リンク）
 **************************************************/
.sec-b-cards {
  display: flex;
  gap: 60px;
}

.sec-b-card {
  position: relative;
  flex: 1;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  height: 300px;
  text-decoration: none;
}

.sec-b-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
  z-index: 0;
}

.sec-b-card:hover::before {
  transform: scale(1.04);
}

.sec-b-card--menu::before {
  background-image: url(./../../../common/img/frame140.jpg);
}

.sec-b-card--style::before {
  background-image: url(./../../../common/img/frame141.jpg);
}

.sec-b-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.25);
}

.sec-b-card__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 28px 32px;
}

.sec-b-card__text {
  text-align: center;
}

.sec-b-card .sec-b-card__text .sec-b-card__title {
  display: block;
  margin: 0 0 6px;
  font-family: var(--ff-accent);
  font-size: 32px;
  font-weight: var(--fw-bold);
  letter-spacing: 3px;
  line-height: 1;
  color: #fff;
}

.sec-b-card .sec-b-card__text .sec-b-card__sub {
  display: block;
  margin: 0;
  font-size: var(--fs-base);
  letter-spacing: 1px;
  color: #fff;
}

.sec-b-card__arrow {
  position: absolute;
  bottom: 28px;
  right: 32px;
  width: 46px;
  height: 1px;
  background-color: #fff;
  transition: transform 0.3s ease;
}

.sec-b-card__arrow::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 5px;
  background-color: #fff;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  transform: translateY(-100%);
}

.sec-b-card:hover .sec-b-card__arrow {
  transform: translateX(8px);
}

/**************************************************
 * 19. sec_c スタッフカード
 **************************************************/
.staff-cards {
  display: flex;
  gap: 60px;
  margin-bottom: 60px;
}

.staff-card {
  display: flex;
  flex: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.staff-card__img {
  flex-shrink: 0;
  width: 47%;
  overflow: hidden;
}

.staff-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-card__body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.staff-card__role {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 16px;
  border: 1px solid var(--clr-muted);
  border-radius: 30px;
  font-size: var(--fs-sm);
  background-color: var(--clr-muted);
  color: #fff;
  line-height: 1;
  align-self: center;
}

.staff-card .staff-card__body .staff-card__name {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--clr-text);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--clr-text);
  line-height: 1.4;
  text-align: center;
}

.staff-card__name-en {
  display: inline-block;
  margin-left: 8px;
  font-size: var(--fs-sm);
  font-family: var(--ff-accent);
  font-weight: var(--fw-normal);
  color: var(--clr-muted);
}

.staff-card .staff-card__body .staff-card__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--clr-text);
}

@media screen and (max-width: 767px) {
  .staff-cards {
    flex-direction: column;
    gap: 24px;
  }
  .staff-card {
    flex-direction: column;
  }
  .staff-card__img {
    width: 100%;
  }
}

/**************************************************
 * 20. sec_d リクルートセクション
 **************************************************/
.recruit-bg {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./../../../common/img/recruit_bg.webp);
}

.recruit-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.recruit-inner {
  position: relative;
  z-index: 1;
  padding: 80px 60px;
}

#sec_d .title {
  margin-bottom: 40px;
}

#sec_d .ttl-2-xl {
  color: #fff;
}

#sec_d .ttl-6-xs {
  color: #fff;
}

#sec_d .recruit-text.xp {
  margin-bottom: 24px;
}

#sec_d .recruit-catch {
  margin: 0 0 24px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: var(--lh-heading);
  letter-spacing: 2px;
  text-align: center;
}

#sec_d .recruit-text {
  margin: 0 0 60px;
  font-size: var(--fs-base);
  color: #fff;
  line-height: var(--lh-loose);
  text-align: center;
}

#sec_d .btn {
  color: #fff;
  border-color: #fff;
}

#sec_d .btn::after,
#sec_d .btn::before {
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  .recruit-inner {
    padding: 50px 24px;
  }
  .recruit-catch {
    font-size: 22px;
  }
}

/**************************************************
 * 21. sec_share シェアスペース
 **************************************************/
.share-intro {
  text-align: center;
  margin-bottom: 60px;
}

#sec_share .share-intro .share-intro__lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: 16px;
  color: var(--clr-text);
}

#sec_share .share-intro .share-intro__text {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--clr-text);
}

.share-merit__heading-wrap {
  text-align: center;
  margin-bottom: 80px;
}

.share-merit__heading-wrap.xp {
  margin-bottom: 0;
}

#sec_share .share-merit__heading {
  line-height: 1;
  display: inline-block;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: 40px;
  color: var(--clr-text);
  border: 1px solid var(--clr-muted);
  border-radius: 10px;
  padding: 20px 40px;
}

.share-merits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 60px;
  margin-top: 20px;
  margin-bottom: 60px;
}

.share-merits::after {
  content: "";
  grid-column: span 1;
}

.share-merit:nth-child(4) { grid-column: 1; }
.share-merit:nth-child(5) { grid-column: 2; }

.share-merit {
  position: relative;
  padding: 62px 20px 62px;
  border: 1px solid #ddd;
  border-radius: 20px;
  text-align: center;
  overflow: visible;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.share-merit__num {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--clr-muted);
  color: #fff;
  font-family: var(--ff-accent2);
  font-size: var(--fs-lg);
  line-height: 48px;
  text-align: center;
}

.share-merit__icon {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.share-merit:nth-child(1) .share-merit__icon { background-image: url(./../../../common/img/icon_merit_01.png); }
.share-merit:nth-child(2) .share-merit__icon { background-image: url(./../../../common/img/icon_merit_02.png); }
.share-merit:nth-child(3) .share-merit__icon { background-image: url(./../../../common/img/icon_merit_03.png); }
.share-merit:nth-child(4) .share-merit__icon { background-image: url(./../../../common/img/icon_merit_04.png); }
.share-merit:nth-child(5) .share-merit__icon { background-image: url(./../../../common/img/icon_merit_05.png); }

#sec_share .share-merit .share-merit__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: 10px;
  color: var(--clr-text);
}

#sec_share .share-merit .share-merit__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--clr-text);
  margin: 0;
  text-align: left;
}

#sec_share .share-info {
  margin-bottom: 60px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.share-info__label {
  flex-shrink: 0;
  min-width: 128px;
  padding: 4px 16px;
  background-color: var(--clr-muted);
  color: #fff;
  font-size: var(--fs-sm);
  border-radius: 30px;
  line-height: 1.6;
  text-align: center;
  width: 20%;
  box-sizing: border-box;
  margin-bottom: 24px;
}

#sec_share .share-info__val {
  font-size: var(--fs-base);
  color: var(--clr-text);
  margin: 0;
  width: 80%;
  box-sizing: border-box;
  text-align: left;
  padding-left: 24px;
  margin-bottom: 24px;
}

@media screen and (max-width: 767px) {
  .share-merits {
    grid-template-columns: 1fr;
  }
  .share-merit:nth-child(4),
  .share-merit:nth-child(5) {
    grid-column: auto;
  }

  .share-info__label {
    width: 100%;
    margin-bottom: 10px;
  }

  #sec_share .share-info__val {
    width: 100%;
    padding-left: 0;
    margin-bottom: 24px;
  }

}


/* ==============================================
   Section 22: Scroll Reveal
   ============================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.header {
  opacity: 0;
  transition: opacity 1s ease;
}

.header.visible {
  opacity: 1;
}


/* ==============================================
   Section 23: ヘッダーテキスト
   ============================================== */
.header-text-layer .header-catch,
.header-text-layer .entry-title {
  font-family: var(--ff-accent);
  letter-spacing: .05em;
}

.header-text-layer .header-desc {
  display: block;
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  color: var(--clr-muted);
  margin: 8px 0 0;
  letter-spacing: 0.05em;
}

body:not(.home) .header-text-layer::before {
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9) 50%);
  -webkit-mask: none;
  mask: none;
}

.abcd {
  height: 600px;
  background-color: #ccc;
}

/* ==============================================
   アクセスセクション (.access)
   ============================================== */
.access .shopinfo-block__info {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 60px;
  margin-bottom: 40px;
  border: 1px solid var(--clr-muted);
  border-radius: 20px;
  padding: 24px 40px;
}

/* 左：ロゴ＋予約優先制 */
.access .shopinfo-block__left {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.access .shopinfo-block__logo {
  width: 100%;
}

.access .shopinfo-block__logo a {
  display: flex;
  align-items: flex-end;
  gap: 5%;
}

.access .shopinfo-block__logo img {
  height: auto;
}

.access .shopinfo-block__logo img:first-child {
  width: 20%;
}

.access .shopinfo-block__logo img:last-child {
  width: 75%;
}

.access .shopinfo-block__yoyaku {
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  border: 1px solid var(--clr-muted);
  border-radius: 10px;
  line-height: 1;
  text-align: center;
}

/* 右：テーブル */
.access .shopinfo-block__table {
  flex: 1;
  margin: 0;
}

.access .shopinfo-block__row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 5px 0;
}

.access .shopinfo-block__row dt {
  flex-shrink: 0;
  min-width: 110px;
  padding: 10px 16px;
  font-size: var(--fs-sm);
  color: #fff;
  background-color: var(--clr-muted);
  border-radius: 30px;
  line-height: 1;
  text-align: center;
}

.access .shopinfo-block__row dd {
  margin: 0;
  line-height: var(--lh-base);
  color: var(--clr-text);
}

/* マップ */
.access .shopinfo-block__map {
  border-radius: 20px;
  overflow: hidden;
}

.access .shopinfo-block__map iframe {
  display: block;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .access .shopinfo-block__info {
    flex-direction: column;
    gap: 30px;
  }
  .access .shopinfo-block__left {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .access .shopinfo-block__logo img {
    width: 120px;
  }
}

/* ==============================================
   Gallery Swiper（見切れスライダー）
   ============================================== */
.my-gallery-swiper {
  position: relative;
  width: 100%;
  padding-bottom: 50px;
  overflow: hidden;
}

.my-gallery-swiper .swiper-slide {
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.my-gallery-swiper .swiper-slide img {
  border-radius: 20px;
}

.my-gallery-swiper .swiper-slide-active {
  opacity: 1;
}

.my-gallery-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* 矢印：my-gallery-swiper 固有 */
.my-gallery-swiper .swiper-button-prev,
.my-gallery-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  top: calc(50% - 20px);
}

.my-gallery-swiper .swiper-button-prev {
  left: 5%;
}

.my-gallery-swiper .swiper-button-next {
  right: 5%;
}

.my-gallery-swiper .swiper-button-prev:hover,
.my-gallery-swiper .swiper-button-next:hover {
  background-color: var(--clr-muted);
}

.my-gallery-swiper .swiper-button-next::before {
  transform: translate(18%, -100%);
}

.my-gallery-swiper .swiper-button-prev::before {
  transform: translate(-118%, -100%) scaleX(-1);
}

/* ドットページネーション */
.my-gallery-swiper .swiper-pagination {
  bottom: 10px;
}

.my-gallery-swiper.swiper-horizontal .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  opacity: 1;
  margin: 0 10px;
}

.my-gallery-swiper.swiper-horizontal .swiper-pagination-bullet-active {
  background-color: var(--clr-muted);
}

.gallery-slide__title {
  margin-top: 20px;
  margin-bottom: 60px;
}

.my-gallery-swiper .gallery-slide__name {
  display: inline-block;
  margin: 0 0 8px;
  padding: 10px 30px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1;
  background-color: var(--clr-muted);
  border-radius: 30px;
}

.my-gallery-swiper .gallery-slide__caption {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--clr-text);
}

/**************************************************
 * Style ACF コンテンツ
 **************************************************/

/* ── ラッパー ── */
.style-acf-content {
  display: grid;
  grid-template-columns: 350px 1fr;
  grid-template-rows: auto auto;
  gap: 0 40px;
  margin-top: 40px;
}

.style-acf-content .style-gallery-viewer {
  grid-column: 1;
  grid-row: 1 / 3;
}

.style-acf-content .style-text-block {
  grid-column: 2;
  grid-row: 1;
}

.style-acf-content .style-stylist {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 768px) {
  .style-acf-content {
    display: block;
    margin-top: 0;
  }
}

/* ── スタイル詳細テキスト ── */
.style-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.style-detail__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.style-detail__label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-muted);
  white-space: nowrap;
}

.style-detail__item p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--clr-text);
}

/* ── サブ画像ギャラリー ── */
/* ── 画像ギャラリービューワー ── */
.style-gallery-viewer {
  margin-bottom: 40px;
}

.style-gallery-viewer__main {
  width: 100%;
  margin-bottom: 12px;
}

.style-gallery-viewer__main img {
  width: 100%;
  height: 490px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.style-gallery-viewer__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.style-gallery-viewer__thumb {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.style-gallery-viewer__thumb:hover,
.style-gallery-viewer__thumb.is-active {
  opacity: 1;
}

.style-gallery-viewer__thumb img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* 旧クラス（念のため残す） */
.style-gallery__item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ── 担当スタイリスト ── */
.style-stylist {
  margin-top: 40px;
}

.style-stylist__heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-muted);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--clr-muted);
}

/* LINE予約ボタン */
.style-line-btn {
  grid-column: 1 / -1;
  background-color: #F3ECDB;
  border-radius: var(--radius);
  padding: 20px 30px;
  margin-top: 60px;
}

.style-line-btn__left span {
  font-weight: var(--fw-bold);
}

.style-line-btn__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.style-line-btn__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.style-line-btn__icon {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url(./../../../common/img/icon_line.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* 関連スタイル */
.style-related {
  grid-column: 1 / -1;
  margin-top: 60px;
}

.style-related__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* カテゴリーフィルター */
.filter-row {
  border: 1px solid var(--clr-muted);
  border-radius: 20px;
  padding: 30px 40px;
}

.category-tag-filter .row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.category-tag-filter .cate_label small {
  display: block;
  color: var(--clr-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  font-family: var(--ff-accent);
}

.category-tag-filter .cate_label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--clr-text);
  white-space: nowrap;
  padding-top: 6px;
}

.category-tag-filter .filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.category-tag-filter .btn-filter {
  display: inline-block;
  padding: 16px 40px;
  border: 1px solid var(--clr-muted);
  border-radius: 10px;
  line-height: 1;
  color: var(--clr-text);
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.category-tag-filter .btn-filter:hover,
.category-tag-filter .btn-filter.is-active {
  background-color: var(--clr-muted);
  color: #fff;
}

/* 投稿詳細ページのarticle-headerを非表示 */
.single-post .article-header {
  display: none;
}

.share-space-contact #cta,
.contact #cta {
  display: none;
}



/* ラインのリンクが入ったら消す */
#cta .box ul {
  grid-template-columns: repeat(2,1fr);
}
.contact .form ul.form-row {
  grid-template-columns: 1fr !important;
}
.contact .form ul.form-row .form-icon:last-child,
.footer-bottom-content.box.navi_in .sns ul li:first-child,
.style-line-btn,
#cta .box ul li:nth-child(2),
.bottom_btn.sp a.line,
.sns .line {
  display: none;
}
#cta .box ul li .tel ul li:nth-child(2) {
  display: block;
}
.bottom_btn.sp {
  justify-content: center;
}
/* ここまで　ラインのリンクが入ったら消す */

/**************************************************
 * 追加修正
 **************************************************/

.body .entry-content hr {
  border: solid 1px #ccc;
  margin: 50px 0;
}

#sec_share .list {
  display: block;
  width: 80%;
  margin: 0 auto;
}
#sec_share .list .entry-card {
  flex-direction: inherit;
}
#sec_share .list .entry-card-thumb {
  aspect-ratio: inherit;
  width: 20%;
}
#sec_share .list .entry-card-content {
  display: block;
  flex-direction: inherit;
}

@media screen and (max-width: 767px) {
  #sec_share .list {
    grid-template-columns: 1fr 1fr;
    gap: 24px 12px;
  }
  #sec_share .list {
    width: 100%;
  }
  #sec_share .list .entry-card-thumb {
    width: 40%;
  }
}

/* マスターの1023px以下でmenu-pcを非表示にするルールを打ち消す（タブレット帯のみ） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .navi-in .menu-pc {
    display: flex;
  }
}