/*
Theme Name: 引化 株式会社 テーマ
Author: Your Name
Description: アンティークショップ「引化」のオリジナルテーマ
Version: 1.0
*/



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* フォント設定：明朝体を中心にアンティーク感を演出 */
body {
    font-family: "Yu Mincho" ,"Sawarabi Mincho", "MS PMincho", serif;
    color: #333;
}

a, button {
    transition: all 0.4s ease-in-out;
}

/* 画像ホバーの共通ルール */
.item-image-box img, .blog-img-box img, .post-eyecatch img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.item-card a:hover img, .blog-list-item a:hover img {
    transform: scale(1.05);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0; /* 左右のパディングを一旦0に。各要素で制御します */
    width: 90%; /* スマホ時の余白確保 */
}

/* ヘッダー：一番上の細い線は引かず、下の境界線のみ表示 */
.header {
    background-color: #f0f7f9;
    padding: 20px 0;
    /* 下側のラインを表示（画像内の青いラインに対応） *//* border-bottom: 2px solid #1a94bc; */
    /*position: relative; /* ラインの基準位置にする */
    position: fixed;
    width: 100%;
    z-index: 9999;
    /*max-width: 1200px;*/
}

/* ヘッダー下の特殊なライン */
.header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px; /* containerと同じ幅に制限 */
  /* ラインの高さ */
  height: 3px;
  /* 左から右に向かって「色が濃く」「太く」見える様にグラデーション */
  /* 透明(transparent)から青(#1a94bc)へ */
  background-image: linear-gradient(to right, #f0f7f9 0%, #1a94bc 100%);

  /* 右側を少し太く見せる為の微調整 */
  border-radius: 0 2px 2px 0;
}

/* ヘッダー内の会社名の位置をcontainerの左端に合わせる */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0; /* 上下のみパディング */
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    margin-left: 0;
    padding-left: 0;
    font-size: 1.5rem;
    color: #0d4f65;
}

.logo a {
  text-decoration: none;
  color: #0d4f65;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-list a {
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
}

/* ハンバーガーボタン */
#menu-btn-check{display: none;}
.menu-btn{display: none;}

/* メインコンテンツエリア */
.main-content {
    background-color: #f0f7f9; /* 背景の薄いブルー */
    padding: 40px 0;
}

.content-wrapper {
    margin-top: 100px;
    padding: 60px 0;
    display: flex;
    border-left: 2px solid #add8e6;
}



.side-space {
    width: 15%; /* 画像の左側にある余白を再現 */
}

/* メイン画像（Heroエリア）の右端を基準にする */
.hero-image {
    width: 100%;
    text-align: right; /* 画像を右に寄せる */
}

.hero-image img {
    max-width: 100%;
    height: auto;
    display: inline-block; /* 右寄せを有効にするため */
}

/* メイン画像のスライドショー */

.slider{
  max-height: 549px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.slider-item{
  opacity: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 36s 0s infinite;
  animation: anime 36s 0s infinite;
}

.slider-item:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s;
}
.slider-item:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s;
}
.slider-item:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s;
}
.slider-item:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s;
}
.slider-item:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s;
}

@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        z-index:9;
    }
    100% { opacity: 0 }
}


/* お知らせエリア */
.news-section {
    padding: 60px 0; /* 上下の余白を広げてセクションを明確に */
    background-color: #f0f7f9;
}

.news-flex {
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
    padding: 40px 0 20px 0; /* 左右パディングを0に。これでcontainerの端に吸着します */
    max-width: 1200px;
    margin: 0 auto;
}

.news-list-container {
    flex: 1; /* リスト部分を広く取る */
}

.news-item {
    display: flex;
    align-items: baseline; /* 日付とタイトルの高さを揃える */
    padding: 15px 0;
    border-bottom: 1px solid #add8e6; /* アイテム間に薄い線を引く */
}

.news-item:first-child {
    padding-top: 0;
}

.news-item .date {
    background-color: #0d4f65;
    color: #fff;
    padding: 3px 12px;
    border-radius: 2px; /* 丸みは抑えめにして骨董店らしいカッチリ感へ */
    margin-right: 20px;
    font-size: 0.8rem;
    min-width: 100px; /* 日付の幅を固定して揃える */
    text-align: center;
}

.news-item .title {
    text-decoration: none;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.6;
    flex: 1;
}

.news-item .title:hover {
    color: #1a94bc; /* ホバー時に色を変えて反応を出す */
}

/* ボタン周り */
.news-btn-wrapper {
    flex-shrink: 0; /* ボタンが潰れないように */
    margin-right: 0; /* 右端の余白を完全に消す */
    padding-left: 10px;
}

.news-btn {
  display: inline-block;
  min-width: 160px;
  text-align: center;
  background-color: #0d4f65;
  color: #fff;
  text-decoration: none;
  padding: 12px 30px;
  font-size: 0.9rem;
  transition: opacity 0.3s;
}

.news-btn:hover {
    opacity: 0.8;
}

/* --- 共通ボタンパーツ --- */
.btn-dark, .btn-gold {
  display: inline-block;
  min-width: 160px;  /* お知らせボタンと幅を合わせるとより綺麗です */
  text-align: center;
  text-decoration: none;
  padding: 12px 30px;
  font-size: 0.9rem;
  transition: 0.3s;
  border: none;
  cursor: pointer;
}

.btn-dark {
    background-color: #0d4f65;
    color: #fff !important;
}

.btn-gold {
    background-color: #d4a373; /* 新着商品には少し華やかな色を */
    color: #fff !important;
}

.btn-dark:hover, .btn-gold:hover {
    opacity: 0.8;
}

/* --- セクションごとのヘッダー調整 --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0 40px 0; /* 左右パディングを0に。これでcontainerの端に吸着します */
    max-width: 1200px;
    margin: 0 auto;
}

/* 各ボタンを囲むラッパーの余白を調整 */
.section-btn-wrapper {
  flex-shrink: 0;
  margin-right: 0; /* 右端の余白を完全に消す */
}

/* 共通：カード内のテキスト調整 */
.post_txt {
    padding: 15px 5px;
    text-align: left;
}

/* 新着エリア */

.latest-section {
  padding: 20px 0;
  background-color: #f0f7f9;
  /* 上側に境界線が必要な場合はここに border-top を追加できます */
}

.latest-flex {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0; /* 左右のズレをなくす */
  max-width: 1200px;
  margin: 0 auto;
}

.latest-flex a{
  text-decoration: none;
  color: #333;
  font-size: 0.8rem;
  text-align: center;
}

.item{
  flex: 1;
  max-width: 350px;
  display: flex;
}

.item img{
  width: 100%;
  height: auto;
  display: block;
}
/* 新着商品の調整 */
.latest-card {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

.latest-card .item-name {
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.latest-card .item-category {
    font-size: 0.85rem;
    color: #777;
}

/* ブログエリア */

.blog-section {
  padding: 20px 0;
  background-color: #f0f7f9;
  /* 上側に境界線が必要な場合はここに border-top を追加できます */
}

.blog-flex {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0; /* 左右のズレをなくす */
  max-width: 1200px;
  margin: 0 auto;
}

.blog-flex a{
  text-decoration: none;
  color: #333;
  font-size: 0.8rem;
}

.rectangle img{
  width: 100%;
  max-width: 350px;
  aspect-ratio: 16/9;
  object-fit: cover; /* 画像の比率を保ったまま、はみだした部分をカット */
}

/* ブログセクションの調整 */
.blog-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card .date {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.blog-card .post_title {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
}

/* ホバー時の挙動 */
.latest-card:hover, .blog-card:hover {
    opacity: 0.8;
}



/* 店舗案内エリアとお問い合わせエリアの横並び */

/* --- 店舗案内・お問い合わせエリアの完全一致 --- */
.horizontally-section {
    padding: 60px 0; /* 上下の余白のみ */
    background-color: #fff;
}

.horizontally {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* 高さを揃える */
    gap: 30px;
    padding: 0;
}

/* 各セクションの器となる要素 */
.store-section, .contact-section {
    flex: 1; /* 均等な幅に広がる */
    min-width: 0; /* Flexアイテムの縮小バグ防止 */
    padding: 0; /* 余計なパディングを削除 */
    background-color: transparent; /* 背景色を透過 */
}

/* カード全体のデザイン（画像とテキストの親） */
.store-card, .contact-card {
    position: relative;
    width: 100%;
    height: 100%; /* 高さを揃える */
    overflow: hidden;
}

/* 画像の設定：縮小を防ぎ、アスペクト比を維持 */
.store-card img, .contact-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* 店舗案内エリア */
/* 店舗案内のコンテンツ配置（画像に重ねる） */
.store-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); /* ほんの少し暗くして文字を読みやすく */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 40px;/* 画像内のテキストの引っ込み */
}

.store-title {
    font-size: 1.8rem;
    color: #0d4f65;
    margin-bottom: 20px;
    background: rgba(240, 247, 249, 0.8);
    padding: 5px 15px;
}

/* お問い合わせエリア */

/* お問い合わせのオーバーレイ配置 */
.contact-card .content-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: #fff;
    pointer-events: none; /* 下のリンクをクリック可能に */
}



/* フッター */

footer{
  background-color: #222222;
  width: auto;
  text-align: center;
}

footer{
  padding: 15px;
}

footer small {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 12px; /* 小さめに設定 */
    color: #666;    /* 少し薄めの色にするのが一般的 */
}

/* --- お知らせ一覧ページ専用スタイル --- */

/* ページヘッダー */
.page-header {
    padding-top: 140px; /* fixedヘッダーとの重なり防止 */
    padding-bottom: 40px;
    text-align: center;
    padding-top: 100px !important; /* お知らせ一覧などのページヘッダー */
}

.page-title {
    font-size: 2rem;
    color: #0d4f65;
    letter-spacing: 0.1em;
    position: relative;
    /*display: inline-block;*/
    padding-bottom: 10px;
}

.page-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: #1a94bc;
}

.page-subtitle {
    font-size: 0.8rem;
    color: #1a94bc;
    margin-top: 10px;
    text-transform: uppercase;
}

/* タイトル全体のレイアウト調整 */
.page-title {
    display: flex;
    align-items: center;      /* 垂直方向の中央 */
    justify-content: center; /* 水平方向の中央 */
    gap: 0.5em;               /* 要素間の隙間（お好みで調整） */
    flex-wrap: wrap;         /* スマホで入り切らない場合に折り返し */
    text-align: center;
}

/* 区切り文字のスタイル（少し細くしたり色を薄くすると綺麗です） */
.title-separator {
    color: #ccc;             /* グレーにして主役を引き立てる */
    font-weight: normal;     /* 棒線だけ細くする */
    user-select: none;       /* マウスで選択されないようにする */
}

/* 左側のテキスト（蔵品展示） */
.page-title .main-text {
    flex: 1;                 /* 利用可能な幅を等分に広げる */
    text-align: right;       /* テキストを右寄せ（区切り文字に寄せる） */
}

/* 中央の区切り文字 */
.page-title .title-separator {
    flex: 0 0 auto;         /* 幅を固定（広がらないようにする） */
    padding: 0 10px;        /* 左右の余白を調整 */
}

/* 右側のテキスト（カテゴリー名） */
.page-title .sub-text {
    flex: 1;                 /* 利用可能な幅を等分に広げる */
    text-align: left;        /* テキストを左寄せ（区切り文字に寄せる） */
}

/* リスト全体の枠組み */
.news-list-wrapper {
    background-color: #fff; /* リスト部分を白抜きにして清潔感を出す */
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 40px;
}

/* 各アイテム */
.news-list-item {
    border-bottom: 1px solid #eee;
}

.news-list-item:last-child {
    border-bottom: none;
}

.news-list-item a {
    display: flex;
    padding: 25px 30px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

.news-list-item a:hover {
    background-color: #f9fbfc;
}

/* 日付とラベル */
.news-meta {
    display: flex;
    align-items: center;
    min-width: 240px;
}

.news-meta .date {
    font-size: 0.9rem;
    color: #666;
    margin-right: 20px;
}

.news-meta .label {
    background-color: #0d4f65; /* 基本色 */
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 12px;
    border-radius: 2px;
}

/* ラベルの色バリエーション */
.label.event { background-color: #0d4f65; } /* 深い青緑色：イベント */
.label.itemnews { background-color: #4a7c59; } /* 緑：新着商品 */
.label.media  { background-color: #1a94bc; } /* 青：メディア */
.label.gray  { background-color: #999; } /* グレー：その他 */

/* タイトル部分 */
.news-content {
    flex: 1;
}

.news-title {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.6;
}

/* ページネーション */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0 60px;
}

.pagination a, .pagination .current {
    display: flex; /* flexに変更 */
    align-items: center; /* 上下中央揃え */
    justify-content: center; /* 左右中央揃え */

    /* 枠からはみ出さないように幅を自動調整（または固定幅を維持） */
    min-width: 40px;
    height: 40px;
    padding: 0 10px; /* 「次へ ＞」のように文字数が多い場合に備えて余白を設定 */

    text-decoration: none;
    border: 1px solid #add8e6;
    font-size: 0.9rem;
    white-space: nowrap; /* 文字の改行を禁止 */
}

.pagination a {
    color: #0d4f65;
    background-color: #fff;
}

.pagination .current {
    background-color: #0d4f65;
    color: #fff;
    border-color: #0d4f65;
}

/* --- 記事詳細ページ専用スタイル --- */

.detail-container {
    padding-top: 140px; /* ヘッダー固定分の余白 */
    max-width: 900px;  /* 読みやすさのため、一覧より幅を絞る */
    background-color: #fff;
    padding-bottom: 80px;
    margin-bottom: 60px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.post-header {
    padding: 20px 40px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.post-meta {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.post-title {
    font-size: 1.8rem;
    line-height: 1.4;
    color: #0d4f65;
}

.post-eyecatch {
    padding: 0 40px;
    margin-bottom: 40px;
}

.post-eyecatch img {
    width: 100%;
    height: auto;
    display: block;
}

/* 本文エリアの書式 */
.post-content {
    padding: 0 40px;
    line-height: 1.8;
    color: #444;
}

.post-content p {
    margin-bottom: 1.5em;
}


.post-content h3 {
    font-size: 1.4rem;
    color: #0d4f65;
    border-left: 4px solid #1a94bc;
    padding-left: 15px;
    margin: 2em 0 1em;
}

.post-content ul {
    margin-bottom: 1.5em;
    padding-left: 20px;
}

.post-content blockquote {
    background-color: #f0f7f9;
    padding: 20px;
    border-radius: 4px;
    font-style: italic;
    font-size: 0.95rem;
    margin-bottom: 1.5em;
}

.post-content .wp-block-quote p{
  margin-bottom: 0;
}

.post-sub-image
, .post-content .wp-block-image {
    margin: 40px 0;
    text-align: center;
}

.post-sub-image img {
    max-width: 100%;
    height: auto;
}



.post-sub-image .caption
, .post-content .wp-block-image .wp-element-caption {
  line-height: 0;
    font-size: 0.8rem;
    color: #888;
    margin-top: 28.5px;
}

/* 記事下ナビゲーション */
.post-footer {
    margin-top: 60px;
    padding: 40px;
    border-top: 1px solid #eee;
    text-align: center;
}

.back-to-list {
    display: inline-block;
    padding: 12px 40px;
    background-color: #0d4f65;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
}

.back-to-list:hover {
    opacity: 0.8;
}

/* --- 蔵品展示（商品一覧）専用スタイル --- */

/* カテゴリーナビ */
.filter-nav {
    margin-bottom: 40px;
    text-align: center;
}

.filter-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
}

.filter-list li a {
    display: block;
    padding: 8px 20px;
    background-color: #fff;
    border: 1px solid #add8e6;
    color: #0d4f65;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.filter-list li.active a,
.filter-list li a:hover {
    background-color: #0d4f65;
    color: #fff;
    border-color: #0d4f65;
}

/* 商品グリッド */
.item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC時は3列 */
    gap: 40px 30px;
    margin-bottom: 60px;
}

.item-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.item-image-box {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.item-image-box img {
    width: 100%! important;
    height: auto !important;
    aspect-ratio: 1 / 1; /* 正方形に統一 */
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.item-card a:hover img {
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

/* 新入荷タグなど */
.status-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #d4a373; /* 骨董に合うゴールド/ブラウン系 */
    color: #fff;
    padding: 4px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

/* 商品テキスト */
.item-info {
    text-align: center;
}

.item-name {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 5px;
    font-weight: normal;
}

.item-category {
    font-size: 0.8rem;
    color: #888;
}

/* --- 商品詳細ページ専用スタイル --- */

.item-detail-container {
    padding-top: 140px;
    margin-bottom: 80px;
}

/* パンくずリスト */
.breadcrumb {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 30px;
}

.breadcrumb a {
    text-decoration: none;
    color: #1a94bc;
}

/* パンくずの区切り文字 */
.breadcrumb .sep::before {
    content: ">";        /* 半角で指定 */
    font-family: serif;  /* 明朝体にするとアンティーク感が出ます */
    margin: 0 3px;      /* 左右に程よい余白を作る（これで全角風のゆとりを作る） */
    color: #999;         /* 文字より少し薄くすると上品です */
    font-size: 0.9em;    /* ほんの少し小さくする */
}

/* レイアウト */
.item-detail-flex {
    display: flex;
    justify-content: space-between; /* 両端に寄せて間に余白を作る */
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 60px;
}

.item-detail-images {
    /*flex: 1.2;*/
    flex: 0 0 52%; /* 横幅を55%に固定 */
    max-width: 52%;
}

.item-detail-info {
    /*flex: 1;*/
    flex: 0 0 43%; /* 横幅を40%に固定 */
    max-width: 43%;
}

/* 画像ギャラリー */
.main-img img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 15px;
}

.sub-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.sub-images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #eee;
}

/* --- 商品詳細 画像ギャラリー ---(WP) */
/* --- 商品詳細：WordPress標準ギャラリーの上書き設定 --- */

/* ギャラリーコンテナ */
    .item-detail-image .wp-block-gallery {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important; /* 隙間を10pxに設定 */
        margin-top: 10px !important;
    }

    /* JavaScriptで生成されるメイン画像エリア */
    .main-preview-area {
        width: 100%;
        margin-bottom: 15px;
    }
    .main-preview-area img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* サムネイル：1枚目も含めてすべてを4列にする */
    .item-detail-image .wp-block-gallery .wp-block-image {
        /* (100% - 隙間10px × 3箇所) / 4列 */
        width: calc((100% - 30px) / 4) !important;
        flex-basis: calc((100% - 30px) / 4) !important;
        flex-grow: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    /* 選択中（is-active）のスタイルを強制適用 */
    /* クラス名をつなげて記述し、!importantで優先順位を最大にします */
    .item-detail-image .wp-block-gallery .wp-block-image.is-active img {
      outline: 3px solid #333 !important; /* 黒系の枠線。お好みで #ff0000 などに */
      opacity: 1 !important;
      filter: brightness(1.1); /* 少し明るくするとより目立ちます */
    }

    /* 通常のサムネイル */
    .item-detail-image .wp-block-gallery .wp-block-image img {
        width: 100%;
        aspect-ratio: 1 / 1; /* 正方形に揃える */
        object-fit: cover;
        cursor: pointer;
        transition: all 0.2s;   /* 変化を滑らかに */
        /* 枠線の代わりに透明な線を用意しておく */
        outline: 3px solid transparent;
        outline-offset: -3px;
    }

    .item-detail-image .wp-block-gallery .wp-block-image img:hover {
        opacity: 0.8;
    }
/* 4枚並んだ後の右端の余白を消す（5枚目がある場合などを考慮） */
.item-detail-image .wp-block-gallery.has-nested-images .wp-block-image:nth-child(4n+1):not(:first-child) {
    margin-right: 0 !important;
}

/* 画像自体の角丸や枠線の調整 */
.item-detail-image .wp-block-gallery.has-nested-images .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1; /* 正方形に統一（HTML版の雰囲気に合わせる） */
    object-fit: cover;
    border: 1px solid #ddd;
}

/* メイン画像だけは正方形ではなく元の比率で見せたい場合 */
.item-detail-image .wp-block-gallery.has-nested-images .wp-block-image:first-child img {
    aspect-ratio: auto;
}

/* 解説エリア */
.item-cat {
    color: #1a94bc;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}

.item-name {
    font-size: 2rem;
    color: #0d4f65;
    margin-bottom: 15px;
}

.item-price {
    font-size: 1.5rem;
    color: #333;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f7f9;
    margin-bottom: 25px;
}

.item-price .tax {
    font-size: 0.9rem;
    color: #888;
}

.item-description {
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

/* スペック表 */
.item-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
}

.item-spec-table th, .item-spec-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

.item-spec-table th {
    width: 30%;
    text-align: left;
    color: #888;
    font-weight: normal;
}

/* 商品名直下の価格スタイル(wp) */
/*.item-price-top {
    margin: -10px 0 20px; /* 商品名との間隔を詰め、下の説明文と空ける
    font-family: serif;
}*/

/*.item-price-top .price-num {
    font-size: 1.6rem;
    font-weight: bold;
    color: #b03030; /* 骨董品に合う落ち着いた赤系 */
/*}

.item-price-top .price-tax {
    font-size: 0.9rem;
    color: #666;
    margin-left: 5px;
}

/* スペック表の微調整(wp)（HTML版のスタイルに準拠） */
/*.item-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    border-top: 1px solid #ccc;
}

.item-spec-table th,
.item-spec-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.item-spec-table th {
    width: 80px;
    color: #0d4f65;
    font-weight: bold;
    white-space: nowrap;
}*/

/* ボタン */
.contact-btn {
    display: block;
    background-color: #0d4f65;
    color: #fff;
    text-align: center;
    padding: 18px;
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s;
    margin-bottom: 15px;
}

.contact-btn:hover {
    opacity: 0.8;
}

.caution {
    font-size: 0.8rem;
    color: #d4a373;
    text-align: center;
}

.detail-back {
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 40px;
}

.back-link {
    color: #0d4f65;
    text-decoration: none;
    font-size: 0.9rem;
}

/* --- ブログ一覧ページ専用スタイル --- */

.blog-list-container {
    margin-bottom: 60px;
}

.blog-list-item {
    margin-bottom: 50px;
    border-bottom: 1px solid #e0ebf0;
    padding-bottom: 50px;
}

.blog-list-item:last-child {
    border-bottom: none;
}

.blog-list-item a {
    display: flex;
    gap: 40px;
    text-decoration: none;
    color: inherit;
}

/* 画像エリア */
.blog-img-box {
    flex: 0 0 40%; /* 幅を40%に固定 */
    overflow: hidden;
}

.blog-img-box img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9; /* 16:9の比率を維持 */
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.blog-list-item a:hover .blog-img-box img {
    transform: scale(1.08);
}

/* テキストエリア */
.blog-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-meta {
    margin-bottom: 10px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.blog-cat {
    font-size: 0.75rem;
    color: #1a94bc;
    border: 1px solid #1a94bc;
    padding: 1px 8px;
}

.blog-title {
    font-size: 1.4rem;
    color: #0d4f65;
    margin-bottom: 15px;
    line-height: 1.4;
}

.blog-excerpt {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
    /* 3行以上は省略する設定（必要に応じて） */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    font-size: 0.85rem;
    color: #0d4f65;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
}

.read-more::after {
    content: " ≫";
    margin-left: 5px;
    font-size: 0.7rem;
    transition: transform 0.3s;
}

.blog-list-item a:hover .read-more::after {
    transform: translateX(5px);
}

/* --- ブログ詳細ページ専用スタイル --- */

.blog-detail-wrapper {
    padding-top: 140px;
    max-width: 800px;
    background-color: #fff;
    margin-bottom: 60px;
    padding-bottom: 40px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.03);
}

.blog-post-header {
    padding: 40px 60px 20px;
    text-align: center;
    /*margin-top: 20px;*/
}

.blog-post-title {
    font-size: 1.8rem;
    color: #0d4f65;
    line-height: 1.5;
}

.blog-post-eyecatch {
    padding: 0 60px;
    margin-bottom: 40px;
}

.blog-post-eyecatch img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.blog-post-content {
    padding: 0 60px;
    line-height: 2;
    color: #333;
    font-size: 1.05rem;
    /* 本文の最後に大きな余白を追加 */
    margin-bottom: 80px;
}

.blog-post-content h3 {
    margin: 2.5em 0 1em;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f7f9;
    color: #0d4f65;
    font-size: 1.4rem;
}

.post-image-center
, .blog-post-content .wp-block-image {
    margin: 40px 0;
    text-align: center;
}

.post-image-center img {
    max-width: 100%;
}

.post-image-center .caption
, .blog-post-content .wp-block-image .wp-element-caption {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-top: 21.5px;
}


/* 記事下エリア */
.blog-post-footer {
  padding: 60px 60px 40px; /* 上のパディングを 40px → 60px に増加 */
  border-top: 1px solid #f0f7f9;
  /* 境界線をより際立たせるための設定 */
  position: relative;
}



.post-tags {
  margin-bottom: 40px;
  color: #1a94bc;
  font-size: 0.9rem;
  display: flex;
  gap: 15px;
  /* タグに少し透明感を出して落ち着かせる */
  opacity: 0.8;
}

.post-tags span a{
  color: #1a94bc;
  font-size: 0.9rem;
  text-decoration: none;
}

.blog-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.blog-navigation a {
    text-decoration: none;
    color: #0d4f65;
    font-size: 0.9rem;
    transition: opacity 0.3s;
}

/* ページネーション同様、はみ出し防止のflex設定 */
.blog-navigation .back-to-list {
    background-color: #f0f7f9;
    padding: 10px 25px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 店舗案内ページ専用スタイル --- */

/* コンセプトセクション */
.concept-section {
    margin-bottom: 80px;
}

.concept-flex {
    display: flex;
    align-items: center;
    gap: 50px;
}

.concept-img {
    flex: 1;
}

.concept-img img {
    width: 100%;
    height: auto;
    box-shadow: 10px 10px 0 #f0f7f9, 10px 10px 0 1px #add8e6;
}

.concept-text {
    flex: 1;
}

.concept-text h3 {
    font-size: 1.8rem;
    color: #0d4f65;
    line-height: 1.6;
    margin-bottom: 25px;
}

.concept-text p {
    line-height: 2;
    color: #444;
}

.owner-name {
    margin-top: 30px;
    text-align: right;
    font-weight: bold;
}

/* 店舗情報テーブル */
.info-section {
    margin-bottom: 60px;
    max-width: 800px; /* テーブルは幅を絞る */
}

.info-title {
    text-align: center;
    color: #0d4f65;
    margin-bottom: 30px;
    font-size: 1.5rem;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #0d4f65;
}

.info-table th, .info-table td {
    padding: 20px;
    border-bottom: 1px solid #e0ebf0;
    line-height: 1.6;
}

.info-table th {
    width: 30%;
    background-color: #f9fbfc;
    text-align: left;
    color: #0d4f65;
    font-weight: bold;
}

/* マップエリア */
.map-section {
    margin-bottom: 80px;
}

.map-container {
    width: 100%;
    height: 400px;
    background-color: #eee;
}

.map-dummy {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

/* 例：地図の角を丸くし、うっすら影をつける */
iframe {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: none;
}

/* --- お問い合わせページ専用スタイル --- */

.contact-wrapper {
    max-width: 800px; /* フォームが横に広がりすぎないように制限 */
    margin-bottom: 100px;
}

.contact-intro {
    text-align: center;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #444;
}

.contact-form {
    background-color: #fff;
    padding: 60px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.03);
    border-radius: 4px;
}

.form-item {
    margin-bottom: 30px;
}

.form-item label {
    display: block;
    font-weight: bold;
    color: #0d4f65;
    margin-bottom: 10px;
}

.form-item .required {
    background-color: #d4a373; /* 骨董店カラー（アクセント） */
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    margin-left: 10px;
    border-radius: 2px;
    vertical-align: middle;
}

.form-item input[type="text"],
.form-item input[type="email"],
.form-item select,
.form-item textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #add8e6;
    border-radius: 2px;
    font-family: inherit;
    font-size: 1rem;
    color: #333;
    background-color: #f9fbfc;
}

.form-item textarea {
    resize: vertical; /* 縦方向のみリサイズ可能に */
}

.form-privacy {
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.form-privacy a {
    color: #1a94bc;
}

.form-submit {
    text-align: center;
}

.submit-btn {
    background-color: #0d4f65;
    color: #fff;
    padding: 15px 80px;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    transition: background-color 0.3s, opacity 0.3s;
}

.submit-btn:hover {
    opacity: 0.8;
}

/* --- サンクスページ --- */

.thanks-section {
    padding: 80px 0;
    text-align: center;
}

.thanks-message {
    margin: 60px 0;
    line-height: 1.8;
}

.back-to-home .btn-primary {
    display: inline-block;
    padding: 12px 40px;
    background-color: #333; /* サイトのテーマカラーに合わせて調整 */
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
}

.back-to-home .btn-primary:hover {
    opacity: 0.8;
}


/* --- プライバシーポリシーページ専用スタイル --- */

/* 1. コンテンツ全体の枠組み */
.policy-wrapper {
    max-width: 850px; /* 読みやすさを考慮し、既存のdetail-containerに近い幅に */
    margin: 0 auto 80px;
    background-color: #fff;
    padding: 60px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.03);
    border-radius: 4px;
    line-height: 2; /* 明朝体が美しく見えるゆったりした行間 */
    color: #444;
}

/* 2. 各セクションの余白とタイトル */
.policy-section {
    margin-top: 50px;
}

.policy-section:first-of-type {
    margin-top: 30px;
}

.policy-section h3 {
    font-size: 1.3rem;
    color: #0d4f65; /* 既存のロゴやタイトル色と統一 */
    border-bottom: 1px solid #f0f7f9;
    padding-bottom: 10px;
    margin-bottom: 20px;
    position: relative;
}

/* 3. 箇条書きのデザイン（新着情報などのリストと統一感を持たせる） */
.policy-section ul {
    margin: 20px 0;
    padding-left: 20px;
}

.policy-section li {
    margin-bottom: 10px;
    list-style-type: none;
    position: relative;
}

.policy-section li::before {
    content: "・";
    color: #1a94bc;
    position: absolute;
    left: -1.2em;
}

/* 4. お問い合わせ先ボックス（骨董店らしい落ち着いた背景色） */
.policy-contact-box {
    margin-top: 25px;
    padding: 30px;
    background-color: #f9fbfc; /* main-contentの背景色と調和 */
    border: 1px solid #add8e6;
}

.policy-contact-box p {
    margin-bottom: 5px;
}

/* 5. 戻るボタンのエリア */
.page-back {
    text-align: center;
    margin-top: 60px;
    border-top: 1px solid #eee;
    padding-top: 40px;
}


/* --- レスポンシブ --- */

@media (max-width: 1024px) {

  /* --- 蔵品展示（商品一覧）専用スタイル --- */
    .item-grid {
        grid-template-columns: repeat(2, 1fr); /* 2列 */
    }
}

@media (max-width: 960px) {

  /* --- 商品詳細ページ専用スタイル --- */
    .item-detail-flex {
        flex-direction: column;
        gap: 30px;
    }

    /* パンくずの余白を少し縮める */
    .breadcrumb {
        margin-bottom: 20px;
        font-size: 0.8rem;
    }

    /* 画像エリアの幅を100%にし、Flexの固定幅をリセット */
    .item-detail-image,
    .item-detail-images { /* HTML版とWP版両方のクラスを想定 */
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* テキストエリアの幅を100%にし、Flexの固定幅をリセット */
    .item-detail-info {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px; /* スマホ時に左右に少し余白を持たせる */
    }
}

@media (max-width: 850px) {
  /* --- スマホ用レスポンシブ：横並びから縦並びに切り替え --- */
    .horizontally {
        flex-direction: column;
        padding: 40px 20px;width: 95%; /* スマホ時は少しだけ左右に余白を空ける */
        gap: 20px;
    }

    .store-section, .contact-section {
        width: 100%;
    }

    .store-content {
        padding-left: 20px;
        align-items: center; /* スマホでは中央寄せ */
    }
}

@media (max-width: 768px) {

/* ハンバーガーボタンの作成 */
    .menu-btn{
      display: flex;
      height: 60px;
      width: 60px;
      justify-content: left;
      align-items: center;
      z-index: 100;
      cursor: pointer;
    }

    .menu-btn span, .menu-btn span:before, .menu-btn span:after {
      content: '';
      display: block;
      height: 2px;
      width: 25px;
      border-radius: 3px;
      background-color: #333;
      position: absolute;
    }

    .menu-btn span:before{ bottom: 8px;}
    .menu-btn span:after{ top: 8px;}

    /* メニュー表示時のアニメーション */
    #menu-btn-check:checked ~ .menu-btn span {background-color: rgba(255,255,255,0);}
    #menu-btn-check:checked ~ .menu-btn span::before {bottom: 0; transform: rotate(45deg);}
    #menu-btn-check:checked ~ .menu-btn span::after {top: 0; transform: rotate(-45deg);}

    /* スマホ時のメニュー画面 */
    .nav-content{
      width: 60%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 100%; /* 初期は画面の外に配置 */
      z-index: 99;
      background: #fff;
      transition: all 0.5s;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .nav-list{flex-direction: column; text-align: center; gap: 30px;}
    .nav-list a{font-size: 1.2rem;}

    /* チェックが入ったらメニューをスライドイン */
    #menu-btn-check:checked ~ .nav-content{left: 40%;}

    /* 1. 全ての共通コンテナの余白を統一 */
    .container,
    .news-flex,
    .section-header,
    .latest-flex,
    .blog-flex,
    .horizontally {
        padding: 0 20px !important; /* 左右に均等な20pxの余白 */
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. ヘッダー（タイトルとボタンの親）を縦並びにする */
    .news-flex,
    .section-header {
        flex-direction: column;
        align-items: flex-start; /* 左寄せに揃える */
        gap: 15px;
        padding-top: 40px !important;
        padding-bottom: 20px !important;
    }

    /* 3. ボタンの親要素を横幅いっぱいに広げる */
    .news-btn-wrapper,
    .section-btn-wrapper,
    .news-btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 4. ボタン自体のデザインを統一して端を揃える */
    .news-btn a,
    .btn-gold,
    .btn-dark {
        display: block !important; /* 横いっぱいに広げる */
        width: 100% !important;
        box-sizing: border-box; /* パディングを含めて100%にする */
        padding: 15px 0 !important; /* 上下パディングのみ */
        text-align: center !important;
        margin: 0 !important;
    }

    /* タイトルも左端にしっかり寄せる */
    .section-title, .latest-title, .blog-title {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* ブログ記事詳細（blog-detail.html）やニュース詳細の重なり防止 */
    .blog-detail-wrapper,
    .detail-container {
        padding-top: 100px !important;
    }

    /* ブログ記事タイトルのサイズ微調整（隠れにくくするため） */
    .blog-post-title,
    .post-title {
        font-size: 1.3rem; /* スマホで見やすいサイズに調整 */
        line-height: 1.4;
    }

    /* main-content 自体に余白を持たせる場合 */
    .main-content {
        padding-top: 80px;
    }


    .content-wrapper {
        flex-direction: column;
        border-left: none;
    }

    .side-space {
        display: none;
    }

    .hero-image {
        width: 100%;
    }

    .news-item {
        flex-direction: column; /* スマホでは日付とタイトルを縦に */
        align-items: flex-start;
        gap: 10px;
    }

    .news-item .date {
        margin-right: 0;
    }

    .news-btn-wrapper {
        text-align: center;
        padding-left: 0;
    }

    .latest-flex {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }

    .latest-flex a{
      font-size: 1.5rem;
    }


    .blog-flex {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }

    .blog-flex a{
      font-size: 1.5rem;
      text-align: left;
    }

    .rectangle img{
      max-width: 100%;
    }

    .horizontally{
      flex-direction: column;
      gap: 50px;
      text-align: center;
    }

    .store-section{
      padding: 0;
      padding-top: 30px;
    }

    .store-section img{
      max-width: 100%;
    }

    .store-content {
        padding-left: 0;
        align-items: center;
    }

    .contact-section{
      padding: 0;
    }

    .contact-section img{
      max-width: 100%;
    }

    .contact-header {
        padding-top: 50px;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .contact-header .contact-icon{
      top: 28%;
      left: 13%;
    }

    .contact-header h2{
      top: 10%;
      left: 20%;
    }

    .contact-header .contact-content{
      top: 65%;
      left: 18%;
    }

    .item{
      max-width: none;
    }

    /* --- お知らせ一覧ページ専用スタイル --- */

    .page-header {
        padding-top: 100px;
        /*margin-top: 80px;*/
    }

    .news-list-item a {
        flex-direction: column;
        padding: 20px;
    }

    .news-meta {
        margin-bottom: 10px;
        min-width: auto;
    }

    .news-title {
        font-size: 0.95rem;
    }

    /* --- 記事詳細ページ専用スタイル --- */

    .detail-container {
        padding-top: 100px;
        margin-bottom: 0;
    }

    .post-header, .post-eyecatch, .post-content, .post-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .post-title {
        font-size: 1.4rem;
    }

    /* --- 蔵品展示（商品一覧）専用スタイル --- */

    .item-grid {
        grid-template-columns: 1fr; /* 1列 */
        gap: 40px;
        padding: 0 20px;
    }

    .filter-list {
        gap: 10px;
    }

    .filter-list li a {
        padding: 6px 15px;
        font-size: 0.8rem;
    }

    .item-name {
        font-size: 1.2rem; /* スマホで見やすいよう少し大きく */
    }

    .title-separator {
        display: none;       /* スマホでは棒線を消して上下に並べてもOK */
    }
    .page-title {
        flex-direction: column;
        gap: 0.2em;
    }

    /* --- 商品詳細ページ専用スタイル --- */

    .item-name {
        font-size: 1.6rem;
    }

    /* --- ブログ一覧ページ専用スタイル --- */

    .blog-list-item a {
        flex-direction: column;
        gap: 20px;
    }

    .blog-img-box {
        flex: none;
        width: 100%;
    }

    .blog-title {
        font-size: 1.2rem;
    }

    .blog-excerpt {
        -webkit-line-clamp: 3; /* スマホでは少し長めに表示 */
    }

    /* --- ブログ詳細ページ専用スタイル --- */

    .blog-post-header, .blog-post-eyecatch, .blog-post-content, .blog-post-footer {
        padding: 20px;
    }

    .blog-post-title {
        font-size: 1.4rem;
    }

    .blog-navigation {
        flex-direction: column;
        gap: 20px;
    }

    /* --- 店舗案内ページ専用スタイル --- */

    .concept-flex {
        flex-direction: column;
        gap: 30px;
    }

    .concept-text h3 {
        font-size: 1.5rem;
    }

    .info-table th, .info-table td {
        display: block;
        width: 100%;
    }

    .info-table th {
        border-bottom: none;
        padding-bottom: 5px;
    }

    .info-table td {
        padding-top: 5px;
    }

    /* --- お問い合わせページ専用スタイル --- */

    .contact-form {
        padding: 30px 20px;
    }

    .submit-btn {
        width: 100%;
        padding: 15px 0;
    }

    .contact-intro {
        text-align: left;
        font-size: 0.95rem;
    }

    /* メインコンテンツ全体をヘッダーの高さ分（150px程度）押し下げます */
    .main-content {
        padding-top: 150px !important;
    }

    /* 各ページのヘッダー部分の余白も調整 */
    .page-header,
    .blog-detail-wrapper,
    .detail-container,
    .item-detail-container {
        padding-top: 20px !important; /* コンテンツ内の余白 */
        margin-top: 0 !important;
    }

    /* タイトルの文字が大きすぎて重なって見える場合は、少し小さく調整します */
    .page-title,
    .blog-post-title,
    .post-title {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
        margin-top: 10px !important;
    }

    /* 【追加】トップページ（index.html）だけ余白を小さく上書き */
    /* index.htmlのmainタグにクラスがない場合を想定し、hero-sectionがある場合で指定 */
    .main-content:has(.hero-section),
    .main-content:has(.content-wrapper) {
        padding-top: 100px !important;
    }

    /* 各ページ内のタイトル周りの余白をリセット */
    .page-header,
    .blog-detail-wrapper,
    .detail-container {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }

    /* タイトル自体のサイズ調整 */
    .page-title,
    .blog-post-title {
        font-size: 1.4rem !important;
    }

    /* --- プライバシーポリシーページ専用スタイル --- */

    .policy-wrapper {
        padding: 40px 20px;
        margin-bottom: 40px;
    }

    .policy-section h3 {
        font-size: 1.2rem;
    }

    .policy-contact-box {
        padding: 20px;
        font-size: 0.9rem;
    }

    /* プライバシーポリシーのコンテンツ上部に余白を追加 */
    .policy-wrapper {
        padding-top: 50px !important; /* 既存のpaddingを上書きして広げる */
        margin-top: 20px; /* ヘッダーとの距離を少し取る */
    }

    /* 最初の段落「引化 株式会社...」の文字サイズと余白を微調整 */
    .policy-wrapper > p:first-of-type {
        margin-bottom: 30px;
        line-height: 1.7; /* スマホでは行間を少し詰めて読みやすく */
    }

}