/*
Theme Name: 漢和堂通商
Theme URI: https://kanwado.jp
Author: Kanwado
Author URI: https://kanwado.jp
Description: 骨董品・美術品買取 漢和堂通商のWordPressテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kanwado
*/

/* ============================================
   CSS Variables
============================================ */
:root {
  --color-red: #c0392b;
  --color-red-dark: #922b21;
  --color-gold: #b8960c;
  --color-gold-light: #d4a017;
  --color-dark: #1a1a1a;
  --color-dark-2: #2c2c2c;
  --color-gray: #f5f5f0;
  --color-gray-2: #e8e8e0;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-white: #ffffff;
  --font-mincho: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
  --font-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --transition: 0.3s ease;
}

/* ============================================
   Reset & Base
============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-gothic);
  color: var(--color-text);
  line-height: 1.7;
  background: var(--color-white);
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition);
}

a:hover {
  opacity: 0.8;
}

ul,
ol {
  list-style: none;
}

/* ============================================
   Typography
============================================ */
h1,
h2,
h3,
h4 {
  font-family: var(--font-mincho);
  line-height: 1.4;
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--color-dark);
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-red);
  margin: 0.8rem auto 0;
}

/* ============================================================================
   【基本スタイル】スマホ用ベース（画面幅 480px 以下の見た目）
   ============================================================================ */

/* Layout Base */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px; /* スマホ時の標準の横余白 */
}

.section {
  padding: 56px 0; /* スマホ時の標準の上下余白 */
}

/* Header */
.site-header {
  background: var(--color-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-logo img {
  height: 45px;
  width: auto;
}

.site-logo .logo-text {
  font-family: var(--font-mincho);
  color: var(--color-white);
  font-size: 1.1rem;
}

/* スマホ・タブレット時はPCナビを非表示、ハンバーガーを表示 */
.main-nav,
.header-contact {
  display: none;
}

.btn-line {
  background: #06c755;
  color: var(--color-white);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition);
}

.btn-line:hover {
  background: #05a847;
  opacity: 1;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-white);
  transition: all var(--transition);
}

/* モバイルナビメニュー内調整 */
.mobile-nav {
  padding: 30px 24px;
}

.mobile-nav ul {
  text-align: left;
  margin-bottom: 30px;
}

.mobile-tel,
.mobile-hours {
  text-align: left;
  padding-left: 0;
}

.mobile-tel {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 2px;
  line-height: 1.2;
}

.mobile-tel a {
  color: var(--color-white);
}

.mobile-hours {
  font-size: 0.85rem;
  color: var(--color-white);
  margin-top: 2px;
  margin-bottom: 30px;
  line-height: 1.2;
}

.mobile-line-wrap {
  width: 100%;
  margin-top: 15px;
}

.mobile-line-wrap .btn-line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Hero Section */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    transparent 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 40px 20px;
  color: var(--color-white);
  margin-top: -160px;
}

.hero-badge {
  display: inline-block;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 6px 16px;
  margin-bottom: 20px;
  border-radius: 2px;
}

.hero-catch {
  font-family: var(--font-mincho);
  font-size: clamp(1.3rem, 4vw, 2.4rem);
  line-height: 1.8;
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-sub {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  opacity: 0.9;
  margin-bottom: 28px;
  font-family: var(--font-mincho);
}

.hero-cta {
  width: 100%;
  max-width: 300px;
  margin: 24px 0 0 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* 480px以下は縦並び */
}

.cta-banner-btn {
  display: block;
  background-color: #e60012;
  padding: 6px;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity 0.2s;
}

.cta-banner-btn:hover {
  opacity: 0.9;
}

.cta-banner-inner {
  border: 2px solid #ffffff;
  padding: 15px 10px;
  text-align: center;
  color: #ffffff;
}

.cta-banner-main {
  margin: 0 0 6px 0;
  font-size: clamp(1.7rem, 5.2vw, 2.2rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.cta-banner-sub {
  margin: 0;
  font-size: clamp(0.55rem, 2.6vw, 0.8rem);
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-variant-emoji: text;
}

/* btn-primary (カプセル) */
.btn-primary {
  display: block;
  position: relative;
  background-color: #950000;
  color: #ffffff;
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  height: 44px;
  line-height: 44px;
  width: 100%;
  max-width: 220px;
  border-radius: 27px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  box-sizing: border-box;
  transition:
    background-color 0.3s ease,
    opacity 0.3s ease;
  margin: 24px 0 0 0;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #6b0000;
  opacity: 1;
}

.btn-primary .btn-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
}

.btn-primary .btn-arrow svg {
  width: 14px;
  height: 14px;
  color: #ffffff;
  display: block;
}

.btn-secondary {
  background: transparent;
  color: var(--color-white);
  padding: 13px 30px;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid var(--color-white);
  display: inline-block;
  transition: all var(--transition);
}

.btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-dark);
  opacity: 1;
}

/* Features Section */
.features {
  background: var(--color-gray);
  padding: 60px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr; /* スマホは1列 */
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.feature-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #8a0000;
}

.feature-item img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.feature-item:hover img {
  transform: scale(1.05);
}

.feature-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 28px 24px;
  background-color: #8a0000;
  color: var(--color-white);
  flex-grow: 1;
}

.feature-title {
  font-family: var(--font-mincho);
  font-size: clamp(1.6rem, 2vw, 1.35rem);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.feature-desc {
  font-size: 0.85rem;
  opacity: 0.9;
  line-height: 1.7;
}

/* Philosophy Section (スマホ時：画像なし・中央寄せベース) */
.philosophy {
  background-color: var(--color-gray);
  position: relative;
}

.philosophy .section-title {
  text-align: center;
}

.philosophy .section-title::after {
  margin: 0.8rem auto 0;
}

.philosophy-text-main {
  margin: 0 auto 40px auto;
  color: var(--color-text-light);
  line-height: 2;
  font-size: 0.95rem;
  text-align: center;
  max-width: 680px;
}

.philosophy-text-sub {
  margin: 0 auto 30px auto;
  color: var(--color-text-light);
  line-height: 2;
  font-size: 0.95rem;
  text-align: center;
  max-width: 680px;
}

.philosophy img {
  margin: 30px auto 0;
  max-width: 100%;
  height: auto;
}

/* About Section */
.about {
  background: var(--color-white);
  position: relative;
  background: linear-gradient(to bottom, #1a1a1a 20%, #ffffff 20%);
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr; /* スマホ・タブレットは1列 */
  gap: 40px;
  align-items: center;
}

.about-image {
  position: relative;
  overflow: hidden;
}

.about-image img {
  width: 100%;
  border-radius: 4px;
}

.about-image::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #ffffff;
  border-radius: 1px;
  z-index: 1;
  pointer-events: none;
}

.about-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.about-title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--color-dark);
  margin-bottom: 20px;
  line-height: 1.5;
}

.about-text {
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.9;
  margin-bottom: 16px;
}

/* Buy Items Section */
.buy-items {
  background: var(--color-gray);
}

.items-grid {
  display: grid;
  grid-template-columns: 1fr; /* スマホ480px以下は1列 */
  gap: 20px;
}

.item-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}

.item-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.item-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);
  color: var(--color-white);
  font-family: var(--font-mincho);
  font-size: 1rem;
  text-align: center;
  padding: 12px;
  letter-spacing: 0.1em;
}

/* News Section */
.news {
  background: var(--color-white);
}

.news-inner {
  display: grid;
  grid-template-columns: 1fr; /* スマホは1列 */
  gap: 32px;
  align-items: start;
}

.news-image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 4px;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-gray-2);
}

.news-item:first-child {
  border-top: 1px solid var(--color-gray-2);
}

.news-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 2px;
  white-space: nowrap;
}

.news-tag.business {
  background: var(--color-dark);
  color: var(--color-white);
}

.news-tag.general {
  background: var(--color-gray-2);
  color: var(--color-text);
}

.news-date {
  font-size: 0.8rem;
  color: var(--color-text-light);
  white-space: nowrap;
}

.news-title {
  font-size: 0.9rem;
  color: var(--color-text);
  transition: color var(--transition);
}

.news-item a:hover .news-title {
  color: var(--color-red);
}

.news-more {
  margin-top: 24px;
  text-align: right;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-red);
  font-size: 0.85rem;
  font-weight: 700;
  border-bottom: 1px solid var(--color-red);
  padding-bottom: 4px;
  transition: opacity var(--transition);
}

.news-section-title {
  text-align: left;
}

.news-section-title::after {
  margin-left: 0;
  margin-right: auto;
}

/* Auction Section (スマホ用縦長カプセルベース) */
.auction {
  background-color: #5a0404;
  padding: 32px 16px;
  position: relative;
  overflow: hidden;
}

.auction::before {
  display: none;
}

.auction .container {
  padding: 0;
}

.auction-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  background: url("images/auction-bg.png") center top / 100% auto no-repeat;
  margin-left: 2em;
  margin-right: 2em;
  border-radius: 0;
  overflow: hidden;
  max-width: none;
}

.auction-text-wrap {
  width: 100%;
  padding: 45px 20px 115% 20px;
  color: #1a1a1a;
  text-align: left;
  box-sizing: border-box;
}

.auction-badge {
  background-color: #000000;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 6px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: inline-block;
  white-space: nowrap;
}

.auction-title {
  color: #1a1a1a;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  margin-bottom: 14px;
  line-height: 1.3;
}

.auction-text {
  color: #222222;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  line-height: 1.7;
  margin-bottom: 0;
}

.auction-text-wrap .btn-secondary,
.auction-image {
  display: none;
}

/* Company Section */
.company {
  background: var(--color-gray);
}

.company-inner {
  display: grid;
  grid-template-columns: 1fr; /* スマホ・タブレットは1列 */
  gap: 40px;
  align-items: center;
}

.company-image img {
  width: 100%;
  border-radius: 4px;
}

.company-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.company-logo img {
  height: 48px;
}

.company-name {
  font-family: var(--font-mincho);
  font-size: 1.4rem;
  color: var(--color-dark);
}

.company-text {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.9;
}

/* Footer */
.site-footer {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: 48px 20px;
}

.footer-logo {
  font-family: var(--font-mincho);
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.footer-tel {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.footer-tel a {
  color: var(--color-white);
}

.footer-hours {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: 24px;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.footer-nav a {
  font-size: 0.8rem;
  opacity: 0.7;
  transition: opacity var(--transition);
}

.footer-nav a:hover {
  opacity: 1;
}

.footer-copy {
  font-size: 0.75rem;
  opacity: 0.5;
}

/* ============================================================================
   【ステップ①】大画面スマホ・小型タブレット環境（画面幅 481px 以上〜）
   ============================================================================ */
@media (min-width: 481px) {
  .hero-cta {
    flex-direction: row; /* 横並びへ変更 */
  }
  .items-grid {
    grid-template-columns: repeat(2, 1fr); /* 2列化 */
  }
}

/* ============================================================================
   【ステップ②】中型タブレット環境（画面幅 769px 以上〜）
   ============================================================================ */
@media (min-width: 769px) {
  .container {
    padding: 0 40px; /* 1024px以下対応のタブレット余白 */
  }

  .section {
    padding: 80px 0; /* 本来の広めの上下余白へ拡張 */
  }

  /* Hero */
  .hero-content {
    padding: 60px 20px 60px 8%;
    margin-top: -160px;
  }
  .hero-cta {
    max-width: 300px;
  }

  /* ★ここを追記：サイト内のすべての共通タイトルを一括で大きくします */
  .section-title {
    font-size: 2.4rem; /* 先ほどの「About」や「Philosophy」と同じサイズに統一 */
  }
  /* about */
  .about-title {
    font-size: 2.4rem; /* 元のサイズからガツンと大きく強調 */
    line-height: 1.4;
    margin-bottom: 24px;
  }

  /* Features */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
  }

  /* Philosophy (右側半分切れた和モダン背景画像をここで発動) */
  .philosophy .section-title {
    text-align: left;
    margin-bottom: 2.5rem;
    font-size: 2.4rem; /* ★ここを追記：哲学セクションのタイトルも2.4remにサイズアップ */
  }
  .philosophy {
    background-image: url("images/philosophy-2.png");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 45% auto;
  }
  .philosophy .section-title {
    text-align: left;
    margin-bottom: 2.5rem;
  }
  .philosophy .section-title::after {
    margin-left: 0;
    margin-right: auto;
  }
  .philosophy-text-main,
  .philosophy-text-sub {
    text-align: left;
    max-width: 48%;
    margin-left: 0;
    margin-right: auto;
  }
  .philosophy-text-main {
    margin: 0 auto 40px 0;
  }
  .philosophy-text-sub {
    margin: 0 auto 0 0;
  }
  .philosophy img {
    margin: 40px 0 0 0;
    max-width: 420px;
  }

  /* News (お知らせ一覧をタブレット時に美しく横並びキープ) */
  .news-inner {
    grid-template-columns: 1fr 2fr;
    gap: 32px;
  }

  /* Auction (769px以上：背景画像を絶対に切らないパーフェクト配置) */
  .auction {
    padding: 60px 0;
  }
  .auction .container {
    padding: 0 40px;
  }

  .auction-inner {
    display: block;
    /* ★ background-size を 100% 100% にして枠線にピタッと合わせます */
    background: url("images/auction-bg-pc.png") center center / 100% 100%
      no-repeat;
    max-width: 1000px;
    margin: 0 auto;
    /* ★最重要：画像本来の縦横比（横1000:縦365）で要素の形を完全に固定します。
       これを入れることで、画面が縮んでも画像が絶対に上下に切れなくなります */
    aspect-ratio: 1000 / 365;
  }

  .auction-text-wrap {
    width: 50%;
    height: 100%; /* 高さをバナーいっぱいに広げる */
    /* ★ flex配置に切り替え、文字全体をベージュ枠の「上下のド真ん中」に自動キープします */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4% 0 6%; /* 上下の余白は自動計算されるため0にし、左右の余白だけを指定 */
    color: #1a1a1a;
    text-align: left;
    box-sizing: border-box;
  }

  .auction-text-wrap {
    width: 50%;
    height: 100%; /* 高さをバナーいっぱいに広げる */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* ★これを追加！カプセルや文字が横にびよーんと広がるのを一発で防ぎます */
    padding: 0 4% 0 6%;
    color: #1a1a1a;
    text-align: left;
    box-sizing: border-box;
  }
}

/* ============================================================================
   【ステップ③】パソコン環境（画面幅 1025px 以上〜）
   ============================================================================ */
@media (min-width: 1025px) {
  .container {
    padding: 0 20px; /* PC用のスリムな余白 */
  }

  /* 1. 1200pxの幅制限を解除し、ヘッダーを画面の右端ぴったりまで広げます */
  .header-inner {
    padding: 0 0 0 20px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: none;
    max-width: 1100px;
    margin-left:auto;
    margin-right: auto;
  }

  /* 2. ナビゲーションを高さいっぱいにし、右側の余白を完全にゼロにして連結させます */
  .main-nav {
    display: block;
    height: 100%;
    margin-left: auto;
    margin-right: 0;
  }

  .main-nav ul {
    display: flex;
    gap: 0;
    height: 100%;
    align-items: center;
  }

  .main-nav li {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .main-nav a {
    color: var(--color-white);
    font-size: 0.8rem; /* ★1025px直後は少し小さめの文字にして重なりを防ぐ */
    letter-spacing: 0.02em;
    padding: 0 14px; /* ★左右の余白を少し詰めて、狭い画面でも1行に収めます */
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap; /* ★最重要：どれだけ画面が縮んでも、文字を絶対に2行に砕かないお守り */
  }

  /* 3. 連絡先・LINEボタンのエリアも、間の空間（gap）をゼロにして完全連結 */
  .header-contact {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 0;
  }

  /* 電話番号ブロックの左右にパディングを持たせて密着配置 */
  .header-tel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    line-height: 1.3;
    padding: 0 16px; /* ★ここも少し詰め気味にしてナビゲーションのスペースを確保 */
  }

  /* 電話番号のリンク自体の色とサイズ */
  .header-tel a {
    color: var(--color-white) !important;
    font-size: 1.15rem; /* ★狭い画面に合わせて、電話番号も少しだけスマートに */
    font-weight: 700;
    display: block;
    white-space: nowrap;
  }

  /* 営業時間 */
  .header-tel::after {
    content: "営業時間 9:00-18:00";
    display: block;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.68rem;
    margin-top: 3px;
    font-weight: 500;
    white-space: nowrap;
  }

  /* 4. LINEボタンを完全な四角形にして、上下右の隙間なく完全に吸着 */
  .btn-line {
    height: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0 24px;
    display: flex;
    align-items: center;
  }

  .hamburger {
    display: none;
  }

  /* ============================================
     Hero Section (PC時の高さ・バランス調整)
     ============================================ */
  /* ★メインビジュアル全体の高さを大きく広げます */
  .hero {
    min-height: 660px; /* 元の520pxから660pxに拡張してダイナミックに。お好みで700px等に広げてもOKです */
  }

  /* ★高さを出した分、文字が上に上がりすぎないよう配置のバランスを微調整します */
  .hero-content {
    margin-top: -150px; /* もし文字が上すぎる・下すぎる場合は、ここを -100px 〜 -150px の間で微調整してください */
  }

  /* About Section (★タブレット以上になったらPCと同じ綺麗な2列にする) */
  .about {
    /* ★ to bottom を to right に変更することで、黒背景が左側に回ります */
    background: linear-gradient(to right, #1a1a1a 35%, #ffffff 35%);
  }

/* Philosophy (大画面時に右側画像を大きくダイナミックに拡張) */
  .philosophy {
    background-image: url("images/philosophy-3.png");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: min(60%, 1080px) auto; /* ★上限を820pxまで広げ、大画面時にしっかり大きく */
    min-height: 1060px;                     /* ★画像拡大に合わせて高さを確保し、上下の切れを防止 */
  }
  /* -------------------------------------------
     他セクションのPC用共通スタイル（完全に引き継ぎ）
     ------------------------------------------- */
  /* Features */
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* About */
  .about-inner {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }

  /* Buy Items */
/* Buy Items */
  .items-grid {
    /* ★ 3から5に変更することで、PC大画面のときに横5個並びに切り替わります */
    grid-template-columns: repeat(5, 1fr);
    gap: 16px; /* ★5個並び用に、カード同士の隙間を少しだけキュッと詰めて綺麗に収めます（お好みで20pxのままで調整してもOKです） */
  }

  /* News */
  .news-inner {
    gap: 60px;
  }

  /* Company */
  .company-inner {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }

  /* Footer */
  .footer-nav {
    gap: 24px;
  }
}

/* ============================================================================
   【ステップ④】さらに画面が広いパソコン環境（画面幅 1200px 以上〜）
   ============================================================================ */
@media (min-width: 1200px) {
  /* 画面幅に十分な余裕ができるため、本来のゆったりした上品な大画面サイズに広げます */
  .main-nav a {
    font-size: 0.85rem; /* 文字を通常の大きさに */
    padding: 0 24px; /* 各メニューの間の余白を贅沢に拡張 */
  }
  .header-tel {
    padding: 0 32px; /* 電話番号まわりの余白も広げる */
  }
  .header-tel a {
    font-size: 1.3rem; /* 電話番号もどっしり大きく */
  }
}


/* ============================================================================
   会社概要・ごあいさつページ (About Page)
   ============================================================================ */

/* ============================================================================
   会社概要・ごあいさつページ (About Page)
   ============================================================================ */

/* --- ページタイトル & bar 装飾 --- */
.page-title-section {
  background-color: var(--color-white);
  padding: 60px 0 20px;
  text-align: center;
}

.page-main-title {
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  color: var(--color-dark);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;           /* 下のコンテンツと同じ幅いっぱいに広げる */
  max-width: 1100px;     /* .container と同じ最大幅 */
  margin: 0 auto;
  margin-bottom:1em;
}

/* 上下の装飾ライン共通設定 */
.page-main-title::before,
.page-main-title::after {
  content: "";
  display: block;
  width: 100%;           /* 左右の端まで届かせる */
  height: 28px;          /* ★16pxから引き上げ：画像が上下に潰れるのを防ぐ */
  background-position: center center;
  background-repeat: no-repeat;
  /* ★最重要：横幅100%に合わせつつ、縦横比を自動維持（auto）して潰れを完全解消 */
  background-size: 100% auto; 
}

/* 上のライン（bar1.png） */
.page-main-title::before {
  background-image: url("images/bar1.png");
}

/* 下のライン（bar2.png） */
.page-main-title::after {
  background-image: url("images/bar2.png");
}

/* --- ごあいさつセクション --- */
.greeting-section {
  background-color: var(--color-white);
  padding: 30px 0 80px;
}

.greeting-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.greeting-image {
  width: 100%;
}

.greeting-image img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.greeting-content {
  width: 100%;
}

/* --- ごあいさつセクション：ロゴ＆会社名 --- */
.greeting-logo {
  display: flex;
  justify-content: flex-start; /* 左揃え */
  align-items: center;
  gap: 16px; 
  margin-bottom: 24px;
  width: fit-content;  /* 横幅を広げずに左側に固定 */
}

.greeting-logo img {
  height: clamp(40px, 3.5vw, 50px);
  width: auto;
  flex-shrink: 0;
  margin: 0;
}

/* ★「会社概要」見出し（.overview-title）と完全同一のフォント・太さ・字間 */
.greeting-logo-text {
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 700;            /* ★会社概要と同じ太字（Bold）を指定 */
  color: var(--color-dark);
  letter-spacing: 0.18em;      /* ★会社概要と同じ字間に設定 */
  line-height: 1;
  white-space: nowrap;
}

/* --- ごあいさつセクション：本文（トップページのAboutと完全一致） --- */
.greeting-text {
  font-family: var(--font-gothic);
  font-size: 0.95rem; 
  font-weight: 400; 
  color: var(--color-text-light); 
  line-height: 1.9;
}

.greeting-text p {
  margin-bottom: 16px;               /* 段落ごとの余白もトップページと統一 */
}

.greeting-text p:last-child {
  margin-bottom: 0;
}

/* --- 会社概要セクション --- */
.company-overview-section {
  background-color: var(--color-gray); /* 上品な薄いグレー背景 */
  padding: 80px 0 100px;
}

.overview-title {
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  color: var(--color-dark);
  text-align: center;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  margin-bottom: 50px;
}

.overview-table-wrap {
  max-width: 760px;
  margin: 0 auto;
}

/* --- 会社概要セクション --- */
.overview-table-wrap {
  width: fit-content;      /* ★中身の文字幅に合わせて枠を自動フィット */
  max-width: 100%;
  margin: 0 auto;          /* ★画面の左右ど真ん中にセンタリング */
  padding: 0 20px;         /* スマホ等で画面端にくっつかないための安全余白 */
  box-sizing: border-box;
}

.overview-row {
  display: flex;
  align-items: stretch;
}

/* 左側：項目名（th相当：太字のまま維持） */
.overview-row dt {
  width: 190px;
  flex-shrink: 0;
  font-weight: 400;  
  color: var(--color-text-light); 
  font-size: 0.9rem;
  color: #222222;
  padding: 10px 24px 10px 0;
  border-right: 1px solid #777777; /* 中央の縦の仕切り線 */
  display: flex;
  align-items: center;
}

/* 右側：内容（td相当：ごあいさつ本文と同一スタイルに統一） */
.overview-row dd {
  flex: 1;
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 400; 
  color: var(--color-text-light);
  padding: 10px 0 10px 32px;
  margin: 0;
  display: flex;
  align-items: center;
  word-break: break-all;
}

.overview-row dd a {
  color: inherit;
  text-decoration: none;
}

.overview-row dd a:hover {
  opacity: 0.7;
}

/* --- タブレット・PC以上（769px〜）のレイアウト --- */
@media (min-width: 769px) {
  .greeting-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr; /* 左側画像を少し広めに配置 */
    gap: 50px;
    align-items: center;
  }
}

/* --- 小型スマホ（480px以下）のレイアウト調整 --- */
@media (max-width: 480px) {
  .overview-row dt {
    width: 125px;
    font-size: 0.78rem;
    padding: 8px 12px 8px 0;
  }

  .overview-row dd {
    font-size: 0.78rem;
    padding: 8px 0 8px 16px;
  }
}


/* ============================================================================
   お知らせ一覧ページ (News Archive Page)
   ============================================================================ */

/* --- 上部アイキャッチ画像 --- */
.page-hero-image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
}

.page-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (min-width: 769px) {
  .page-hero-image {
    height: 300px; /* PC・タブレット時は少し高さを出して堂々と見せる */
  }
}

/* --- お知らせ一覧レイアウト --- */
.news-archive-section {
  background-color: var(--color-white);
  padding: 20px 0 100px;
}

.news-archive-container {
  max-width: 780px; /* 横幅を絞って中央に端正に配置 */
  margin: 0 auto;
}

.news-archive-list {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 記事ブロック同士の間隔 */
}

/* 各お知らせアイテム（上下にグレーの仕切り線） */
.news-archive-item {
  border-top: 1px solid #b5b5b5;
  border-bottom: 1px solid #b5b5b5;
  padding: 36px 12px 30px;
  box-sizing: border-box;
}

/* お知らせタイトル */
.news-archive-title {
  font-family: var(--font-mincho);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
  line-height: 1.5;
}

.news-archive-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

.news-archive-title a:hover {
  color: var(--color-red);
}

/* 抜粋本文 */
.news-archive-excerpt {
  font-size: 0.85rem;
    font-weight: 400; 
  color: var(--color-text-light);
  color: #222222;
  line-height: 1.95;
  margin-bottom: 24px;
}

/* 詳しく読むボタン */
.news-archive-btn-wrap {
  display: flex;
  justify-content: flex-start;
}

.btn-news-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #950000;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  height: 34px;
  padding: 0 42px 0 20px;
  border-radius: 20px;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.btn-news-detail:hover {
  background-color: #6b0000;
  opacity: 1;
}

.btn-news-detail .btn-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
}

.btn-news-detail .btn-arrow svg {
  width: 10px;
  height: 10px;
  color: #ffffff;
  display: block;
}

/* --- ページネーション --- */
.news-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}

.news-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
  color: #333333;
  border: 1px solid #cccccc;
  text-decoration: none;
  transition: all var(--transition);
}

.news-pagination .page-numbers.current,
.news-pagination .page-numbers:hover {
  background-color: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}


/* ============================================================================
   お知らせ詳細ページ (single.php) の幅と行間調整
   ============================================================================ */

/* 記事本文セクションのみを一覧と同じ780pxに絞って中央配置（タイトル枠は干渉させない） */
.news-single-section .container,
.news-single-container {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.news-single-section {
  background-color: var(--color-white);
  padding-top: 20px;
}

/* 記事タイトル（アンダーライン追加） */
.single-article-title {
  font-family: var(--font-mincho);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.5;
  padding-bottom: 18px;            /* タイトルとアンダーラインの間の余白 */
  margin-bottom: 32px;             /* アンダーラインと本文の間の余白 */
  border-bottom: 2px solid #b5b5b5; /* ★アンダーライン（上品なグレー） */
  text-align: left;
}

/* 本文（文字サイズアップ & 視認性の高い配色） */
.single-article-body,
.single-article-body p {
  font-family: var(--font-gothic);
  font-size: 1.05rem;              /* ★0.95remからひと回り大きく拡大 */
  font-weight: 400;
  color: #333333;                  /* ★少し濃いめのグレーにして可読性向上 */
  line-height:1.6 !important;     /* ゆったりした行間を維持 */
  margin-bottom: 24px;
}

/* 一覧へ戻るリンク */
.single-back-wrap {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e0;
}

.single-back-wrap .btn-more {
  display: inline-block;
  color: var(--color-red);
  font-size: 0.85rem;
  font-weight: 700;
  border-bottom: 1px solid var(--color-red);
  padding-bottom: 4px;
  text-decoration: none;
}


/* ============================================================================
   買取案内ページ (Buy Page) 全スタイル（モバイルファースト完全版）
   ============================================================================ */

/* --- 全体共通コンテナ（トップページと同一の1100px幅） --- */
.buy-page .buy-narrow-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ============================================
   1. 上部アピールセクション
   ============================================ */

/* 上部メイン画像（スマホ基準） */
.buy-hero-image {
  width: 100%;
  height: 320px;
  overflow: hidden;
  position: relative;
}

.buy-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* アピールセクション外枠（マージン相殺を防ぎhero画像を隠さない） */
.buy-appeal-section {
  background-color: var(--color-white);
  padding: 0 0 60px;
  position: relative;
  display: flow-root;
}

/* hero画像に食い込む白背景パネル（スマホ基準） */
.appeal-overlap-card {
  background-color: #ffffff;
  width: fit-content;
  max-width: 680px;
  margin-top: -50px;
  padding: 20px 24px 16px 20px;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

/* タグリスト */
.appeal-tag-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.appeal-tag {
  background-color: #0b5f74;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  line-height: 1.2;
}

/* キャッチコピー */
.appeal-catch {
  line-height: 1.25;
  margin: 0;
}

.appeal-catch .catch-sub {
  display: block;
  font-family: var(--font-gothic);
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: 900;
  color: #c9171e;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.appeal-catch .catch-main {
  display: block;
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  font-weight: 900;
  color: #111111;
  letter-spacing: 0.05em;
}

.appeal-catch .catch-main2 {
  font-size: inherit;
  font-weight: inherit;
}

/* 丸型画像リスト（スマホ基準：上3個・下3個の3列並び） */
.appeal-circles-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2.5vw, 24px);
  width: 100%;
  margin-top: 24px;
  margin-bottom: 50px;
  align-items: center;
}

.circle-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ecece6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.circle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2カラムコンテンツ（スマホ基準：1列縦並び） */
.appeal-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 44px;
}

.appeal-lead {
  font-size: clamp(1.2rem, 2.2vw, 1.35rem);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.75;
  margin-bottom: 0;
  border-top: 2px dotted #696969;
  border-bottom: 2px dotted #696969;
  padding: 10px 0;
}

.appeal-lead .text-red {
  color: var(--color-red);
  font-size: 1.25em;
}

.appeal-speech-wrap {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.appeal-speech-wrap img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

.appeal-image-side img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 査定無料ボックス（スマホ基準：横並び・余白確保・空行除去） */
.appeal-free-box {
  border: 2px solid #176579;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 28px 8px;
  box-sizing: border-box;
}

.free-badge {
  background-color: var(--color-red);
  color: #ffffff;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  flex-shrink: 0;
}

.free-text {
  text-align: left;
}

.free-text p {
  font-size: 0.8rem;
  color: #222222;
  line-height: 1.55;
  margin: 0;
  text-align: left;
}

.free-text strong {
  font-size: 0.9rem;
  display: block;
  line-height: 1.4;
  margin-bottom: 4px;
}

.free-text br {
  display: none;
}

/* 電話発信ボタン（スマホ基準：左右余白と収まり） */
.appeal-tel-wrap {
  text-align: center;
  margin-top: 20px;
  padding: 0 16px;
  box-sizing: border-box;
}
.btn-appeal-tel {
  display: inline-block;
  background-color: #800000; /* ★濃い赤色に統一 */
  color: #ffffff;
  font-family: var(--font-gothic);
  font-size: 1.25rem;
  font-weight: 900;
  padding: 14px 20px;
  border-radius: 100px;
  width: 100%;
  max-width: 580px;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.btn-appeal-tel:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}
/* ============================================
   2. 買取の流れセクション
   ============================================ */
.buy-flow-section {
  background-color: var(--color-gray);
  padding: 60px 0 80px;
}

/* ★STEP下のコンテンツ：タイトルの頭（バッジの右端）と左端を揃える */
.step-dialogues,
.step-sub-note,
.step-two-grid,
.step-bottom-note {
  padding-left: 46px; /* スマホのバッジ幅 34px + gap 12px */
  box-sizing: border-box;
}

.flow-title-wrap {
  margin-bottom: 40px;
}

/* タイトル上下のbar1/bar2非表示 */
.flow-title-wrap .page-main-title::before,
.flow-title-wrap .page-main-title::after {
  display: none;
}

.flow-title-wrap .page-main-title {
  margin-bottom: 0;
}

.flow-step-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.flow-step-item {
  position: relative;
}

/* STEPヘッダー（スマホ基準） */
.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 2px solid #222222;
  margin-bottom: 24px;
}

.step-badge {
  background-color: #000000;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 900;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-title {
  font-family: var(--font-gothic);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 700;
  color: #111111;
  line-height: 1.5;
  margin: 0;
}

/* STEP 01：対話ブロック（スマホ基準） */
.step-dialogues {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 10px;
}

.dialogue-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dialogue-illust {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialogue-illust img {
  width: 100%;
  height: auto;
  display: block;
}

.dialogue-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dialogue-question {
  color: #0088d2;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.dialogue-balloon {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dialogue-balloon p {
  color: #111111;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

/* STEP 02（スマホ基準） */
.step-sub-note {
  font-size: 0.85rem;
  color: #555555;
  margin-top: -16px;
  margin-bottom: 24px;
}

.circle-item-list {
  display: flex;
  justify-content: center; /* ★左右中央揃え */
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  flex-wrap: wrap;
  margin: 32px auto 0;    /* 上に余白を空け、全体を中央配置 */
  width: 100%;
}

.circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 5個並びに合わせた円形画像のサイズ調整 */
.circle-item-thumb {
  width: clamp(60px, 12vw, 96px);
  height: clamp(60px, 12vw, 96px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ecece6;
}

.circle-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* STEP 03 */
.step-bottom-note {
  font-size: 0.85rem;
  color: #666666;
  margin-top: 10px;
}


/* ============================================================================
   3. タブレット・PC向け拡張（769px以上）
   ============================================================================ */
@media (min-width: 769px) {

  /* ヒーロー画像・重なりカード */
  .buy-hero-image {
    height: 480px;
  }

  .appeal-overlap-card {
    margin-top: -140px;
    padding: 32px 44px 20px 32px;
  }

  .appeal-catch .catch-main {
    white-space: nowrap;
  }

  /* 丸型画像：横1列（6個並び）へ拡張 */
  .appeal-circles-row {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 36px;
    margin-bottom: 60px;
  }

  /* 2カラムコンテンツ */

  .appeal-content-grid {
    grid-template-columns: 1.15fr 0.9fr;
    gap: 48px;
  }

  /* ★769px以上：文字をカラム幅ぎりぎりまで拡大 */
  .appeal-lead {
    font-size: clamp(1.35rem, 2.6vw, 1.95rem);
    line-height: 1.55;
    padding: 16px 0;
  }

 /* 査定無料ボックス：サイズアップ＆余白最適化 */
  .appeal-free-box {
    gap: 36px;
    padding: 30px 44px;
    margin: 40px auto;
  }

  /* ★査定無料バッジをさらに大きく強調 */
  .free-badge {
    width: 112px;
    height: 112px;
    font-size: 1.45rem;
    letter-spacing: 0.05em;
    line-height: 1.25;
  }

  /* ★下の補足文字も大きく調整 */
  .free-text p {
    font-size: 1.15rem;
    line-height: 1.6;
  }

  /* ★メイン文字を大きくし、直下の余白を詰める */
  .free-text strong {
    font-size: 1.35rem;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  /* ★PCでも二重改行による不要な空行を消去 */
  .free-text br {
    display: none;
  }
/* 電話発信ボタン：横幅をキュッと狭め、文字をサイズアップ */
  .appeal-tel-wrap {
    padding: 0;
    margin-top: 30px;
  }

  .btn-appeal-tel {
    max-width: 480px;                       /* ★横幅を580pxから480pxにスリム化 */
    font-size: clamp(1.5rem, 2.4vw, 2.1rem); /* ★文字をひと回り大きく強調 */
    padding: 16px 36px;
    letter-spacing: 0.08em;
  }
  /* 買取の流れセクション余白 */
  .buy-flow-section {
    padding: 80px 0 120px;
  }

  .flow-title-wrap {
    margin-bottom: 60px;
  }

  .flow-step-list {
    gap: 70px;
  }

  .step-header {
    gap: 18px;
    margin-bottom: 28px;
  }

  .step-badge {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
  }
  
  /* ★769px以上：PCのタイトルの頭に合わせて左余白を拡張 */
  .step-dialogues,
  .step-sub-note,
  .step-two-grid,
  .step-bottom-note {
    padding-left: 60px; /* PCのバッジ幅 42px + gap 18px */
        padding-right: 60px;
  }

  /* STEP 01 対話ブロック */
  .step-dialogues {
    gap: 36px;
  }

  .dialogue-row {
    gap: 24px;
  }

  .dialogue-illust {
    width: 95px;
  }

  .dialogue-question {
    font-size: 1rem;
  }

  .dialogue-balloon {
    padding: 16px 24px;
    border-radius: 18px;
  }

  .dialogue-balloon p {
    font-size: 0.95rem;
  }

/* STEP 02 (右側写真を260pxに絞ってコンパクト化) */
  .step-two-grid {
    grid-template-columns: 1fr 210px;
    gap: 48px;
    align-items: center;
  }
}


/* ============================================================================
   4. パソコン大画面向け拡張（1025px以上）
   ============================================================================ */
@media (min-width: 1025px) {

  /* 白背景カード：文字の拡大に合わせて幅と余白を拡張 */
  .appeal-overlap-card {
    max-width: 780px;
    margin-top: -155px;
    padding: 36px 50px 24px 36px;
  }

  /* タグ（美術品・コレクション・不用品・レトロ品）のサイズアップ */
  .appeal-tag {
    font-size: 1rem;
    padding: 7px 18px;
  }

  /* 「なんでも OK」のサイズアップ */
  .appeal-catch .catch-sub {
    font-size: 3.3rem;
    margin-bottom: 8px;
  }

  /* 「高く売るなら 漢和堂」のサイズアップ */
  .appeal-catch .catch-main {
    font-size: 3.85rem;
  }
  
  /* ★買取の流れ：PC大画面時に横幅を絞ってすっきり中央配置 */
  .buy-flow-section .buy-narrow-container {
    max-width: 880px;
  }
}

/* ============================================================================
   お問い合わせページ (Contact Page)
   ============================================================================ */

.contact-section {
  background-color: var(--color-white);
  padding: 40px 0 90px;
}

/* 全体の横幅を860pxに拡張してゆったり配置 */
.contact-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 導入案内 */
.contact-intro {
  margin-bottom: 40px;
  text-align: center;
}

.contact-lead {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.9;
  margin-bottom: 28px;
}

/* お電話誘導カード */
.contact-tel-card {
  background-color: #fafaf8;
  border: 1px solid var(--color-gray-2);
  border-radius: 8px;
  padding: 24px;
  margin: 0 auto 34px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.tel-card-sub {
  font-size: 0.9rem;
  font-weight: 700;
  color: #555555;
  margin: 0;
}

.tel-card-num {
  font-family: var(--font-gothic);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 900;
  color: #800000;
  letter-spacing: 0.05em;
  text-decoration: none;
  line-height: 1.2;
}

.tel-card-hours {
  font-size: 0.82rem;
  color: #777777;
}

.contact-form-lead {
  font-size: 1rem;
  font-weight: 700;
  color: #111111;
  margin: 0;
}

/* --- フォーム本体 --- */
.contact-form-wrap {
  border-top: 2px solid #222222;
  padding-top: 10px;
}

/* 不要な自動改行brを消去 */
.contact-form-wrap br {
  display: none;
}

/* 各行ブロック */
.form-item,
.contact-form-wrap p {
  display: block;
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid #ebebe5;
}

/* ラベルテキスト（潰れを防ぎ、上部にすっきり配置） */
.form-label-wrap,
.contact-form-wrap label {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111111;
  letter-spacing: 0.03em;
  margin: 0 0 10px 0;
  line-height: 1.5;
  width: 100%;
}

/* ★必須バッジ（赤色・小型：入力欄を巻き込まないようクラスを限定） */
.form-badge.required,
.contact-form-wrap .required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #c0392b;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-left: 8px;
  vertical-align: middle;
}

/* ★最重要：Contact Form 7のラッパーspanの赤背景を完全リセット */
.contact-form-wrap .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* すべての入力欄（横幅100%・ゆったりサイズ・白背景） */
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap select,
.contact-form-wrap textarea {
  display: block;
  width: 100%;
  min-height: 54px;
  font-family: var(--font-gothic);
  font-size: 1.05rem;
  color: #111111;
  background-color: #ffffff;
  border: 1.5px solid #d2d2c8;
  border-radius: 6px;
  padding: 14px 18px;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form-wrap input::placeholder,
.contact-form-wrap textarea::placeholder {
  color: #a0a09a;
  font-size: 0.95rem;
}

/* フォーカスリング */
.contact-form-wrap input:focus,
.contact-form-wrap select:focus,
.contact-form-wrap textarea:focus {
  border-color: #0b5f74;
  box-shadow: 0 0 0 3px rgba(11, 95, 116, 0.12);
  background-color: #ffffff;
}

/* テキストエリア */
.contact-form-wrap textarea {
  min-height: 200px;
  resize: vertical;
  line-height: 1.75;
}

/* 送信ボタンエリア（シャドウなし・濃い赤色ベタ塗り） */
.form-submit-wrap,
.contact-form-wrap p:last-child {
  margin-top: 40px;
  text-align: center;
  border-bottom: none;
  padding-bottom: 0;
}

.btn-form-submit,
.contact-form-wrap input[type="submit"] {
  display: inline-block;
  background-color: #800000;
  color: #ffffff;
  font-family: var(--font-gothic);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 18px 48px;
  min-height: 56px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
}

.btn-form-submit:hover,
.contact-form-wrap input[type="submit"]:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

/* Contact Form 7 エラー・完了メッセージ */
.wpcf7-not-valid {
  border-color: var(--color-red);
  background-color: #fff9f9;
}

.wpcf7-not-valid-tip {
  color: var(--color-red);
  font-size: 0.85rem;
  margin-top: 6px;
  font-weight: 700;
  text-align: left;
}

.wpcf7-response-output {
  margin: 30px 0 0;
  padding: 16px 22px;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  font-weight: 700;
}

.wpcf7 form.sent .wpcf7-response-output {
  background-color: #edf7ed;
  border: 1.5px solid #4caf50;
  color: #1e4620;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  background-color: #fdf2f2;
  border: 1.5px solid var(--color-red);
  color: var(--color-red-dark);
}

.wpcf7-spinner {
  display: block;
  margin: 14px auto 0;
}

/* --- 769px以上：PC向け微調整 --- */
@media (min-width: 769px) {
  .contact-section {
    padding: 50px 0 130px;
  }

  .contact-intro {
    margin-bottom: 52px;
  }

  .contact-form-wrap input[type="text"],
  .contact-form-wrap input[type="email"],
  .contact-form-wrap input[type="tel"],
  .contact-form-wrap select,
  .contact-form-wrap textarea {
    font-size: 1.1rem;
    padding: 16px 20px;
    min-height: 58px;
  }

  .btn-form-submit,
  .contact-form-wrap input[type="submit"] {
    font-size: 1.25rem;
    padding: 20px 64px;
  }
}

/* ★スクロール時の出現アニメーションを停止し、最初から完全表示 */
.buy-items .item-card {
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
}