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

    :root {
      --cream: #FAF7F2;
      --beige: #EDE8DF;
      --brown: #8C7355;
      --dark: #1C1915;
      --mid: #3D3529;
      --muted: #7A7060;
      --pink: #C9898A;
      --gold: #B89A6A;
      --gold-lt: #D4B88A;
      --white: #FFFFFF;
      --radius: 4px;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--cream);
      color: var(--dark);
      font-family: 'Noto Serif JP', serif;
      font-weight: 300;
      line-height: 1.8;
      overflow-x: hidden;
    }
    /* ─── HEADER ─── */
header.header {
    display: flex !important; /* 強制的にflexを適用 */
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px; /* スマホ用に少し調整 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(250, 247, 242, 0.92);
    backdrop-filter: blur(12px);
    box-sizing: border-box; /* パディングを含めた幅計算にする */
}

/* ロゴエリアの調整 */
.header-logo {
    display: flex;
    flex-direction: column;
}

/* ボタンの調整 */
.header-cta {
    display: inline-block;
    background: #1a1a1a; /* 濃い茶〜黒 */
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.1em;
    border-radius: 2px;
    font-family: 'Noto Serif JP', serif;
}

/* スマホ表示（幅が狭い時）の調整 */
@media (max-width: 560px) {
    header.header {
        padding: 10px 15px;
    }
    .logo-text {
        font-size: 8px;
    }
    .header-cta {
        padding: 8px 20px;
        font-size: 12px;
    }
}

    .logo-text {
      font-family: 'DM Serif Display', serif;
      font-size: 10px;
      letter-spacing: .25em;
      color: var(--brown);
      text-transform: uppercase;
    }

    .logo-jp {
      font-family: 'Shippori Mincho', serif;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: .12em;
      margin-top: 2px;
    }

    .header-cta {
      background: var(--dark);
      color: var(--cream);
      padding: 10px 24px;
      border-radius: 2px;
      font-family: 'Noto Serif JP', serif;
      font-size: 12px;
      letter-spacing: .1em;
      text-decoration: none;
      transition: background .2s;
    }

    .header-cta:hover {
      background: var(--brown);
    }

    /* ─── HERO ─── */
    .hero {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding-top: 72px;
    }

    .hero-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px 60px 80px 80px;
      position: relative;
      background-image: url(/img/location/test/camera_img.jpg);
    }

    .hero-left::after {
      content: '';
      position: absolute;
      top: 15%;
      right: 0;
      width: 1px;
      height: 70%;
      background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    }

    .eyebrow {
      font-family: 'Cormorant Garamond', serif;
      font-size: 13px;
      letter-spacing: .3em;
      color: var(--gold);
      font-style: italic;
      margin-bottom: 24px;
      opacity: 0;
      animation: fadeUp .8s .2s forwards;
    }

    .hero-title {
      font-family: 'Shippori Mincho', serif;
      font-size: 36px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--dark);
      margin-bottom: 32px;
      opacity: 0;
      animation: fadeUp .8s .4s forwards;
    }

    .hero-title em {
      font-style: normal;
      color: var(--pink);
    }
    .hero-title span {
      font-size: 22px;
    }
    .hero-desc {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.9;
      margin-bottom: 44px;
      max-width: 400px;
      opacity: 0;
      animation: fadeUp .8s .6s forwards;
    }

    .hero-cta-group {
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-width: 320px;
      opacity: 0;
      animation: fadeUp .8s .8s forwards;
    }

    .btn-primary {
      background: var(--dark);
      color: var(--cream);
      padding: 18px 32px;
      border-radius: 2px;
      text-decoration: none;
      font-family: 'Noto Serif JP', serif;
      font-size: 14px;
      letter-spacing: .1em;
      text-align: center;
      transition: all .2s;
      display: block;
      border: 1px solid var(--dark);
    }

    .btn-primary:hover {
      background: var(--brown);
      border-color: var(--brown);
    }

    .btn-secondary {
      color: var(--brown);
      text-decoration: none;
      font-size: 13px;
      letter-spacing: .08em;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 0;
      border-bottom: 1px solid var(--gold-lt);
      width: fit-content;
      transition: all .2s;
    }

    .btn-secondary:hover {
      color: var(--dark);
    }

    .hero-tags {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 32px;
      opacity: 0;
      animation: fadeUp .8s 1s forwards;
    }

    .tag {
      font-size: 11px;
      color: var(--brown);
      letter-spacing: .08em;
      border: 1px solid rgba(140, 115, 85, 0.4);
      padding: 4px 12px;
      border-radius: 20px;
    }

    .hero-right {
      position: relative;
      overflow: hidden;
    }

    .hero-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 15%;
      opacity: 0;
      animation: fadeIn 1.2s .3s forwards;
    }

    .hero-right::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to right, rgba(250, 247, 242, 0.3), transparent 40%);
    }

    .hero-badge {
      position: absolute;
      bottom: 40px;
      left: 40px;
      z-index: 2;
      background: rgba(250, 247, 242, 0.94);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(140, 115, 85, 0.25);
      padding: 20px 24px;
      border-radius: 2px;
      min-width: 200px;
      opacity: 0;
      animation: fadeUp .8s 1.2s forwards;
    }

    .badge-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 38px;
      color: var(--dark);
      line-height: 1;
    }

    .badge-num span {
      font-size: 18px;
      color: var(--gold);
    }

    .badge-label {
      font-size: 11px;
      color: var(--muted);
      letter-spacing: .1em;
      margin-top: 4px;
    }

    /* ─── SECTION BASE ─── */
    section {
      padding: 100px 80px;
    }

    .section-eyebrow {
      font-family: 'Cormorant Garamond', serif;
      font-size: 12px;
      letter-spacing: .35em;
      color: var(--gold);
      font-style: italic;
      margin-bottom: 16px;
    }

    .section-title {
      font-family: 'Shippori Mincho', serif;
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 700;
      color: var(--dark);
      line-height: 1.4;
      margin-bottom: 20px;
    }

    .section-sub {
      font-size: 15px;
      color: var(--muted);
      max-width: 540px;
      line-height: 1.9;
    }

    .divider {
      width: 48px;
      height: 1px;
      background: var(--gold);
      margin: 32px 0;
    }

    /* ─── SCENE ─── */
    .scene {
      background: var(--dark);
      color: var(--cream);
      padding: 100px 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .scene-photos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      position: relative;
    }

    .scene-photos img {
      width: 100%;
      aspect-ratio: 3/4;
      object-fit: cover;
      border-radius: 2px;
    }

    .scene-photos img:nth-child(2) {
      margin-top: 40px;
    }

    .scene-label {
      position: absolute;
      bottom: -16px;
      right: -16px;
      background: var(--brown);
      color: var(--cream);
      padding: 12px 20px;
      font-size: 11px;
      letter-spacing: .12em;
    }

    .scene .section-eyebrow {
      color: var(--gold-lt);
    }

    .scene .section-title {
      color: var(--cream);
    }

    .scene .section-sub {
      color: rgba(250, 247, 242, 0.65);
    }

    .scene .divider {
      background: var(--gold-lt);
    }

    .scene-text p {
      font-size: 15px;
      color: rgba(250, 247, 242, 0.7);
      line-height: 1.95;
      margin-top: 24px;
    }

    /* ─── CONDITIONS ─── */
    .conditions {
      background: var(--beige);
      padding: 100px 80px;
    }

    .cond-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      margin-top: 60px;
    }

    .cond-card {
      background: var(--cream);
      padding: 40px 36px;
      border-top: 2px solid var(--gold);
      transition: transform .2s;
    }

    .cond-card:hover {
      transform: translateY(-4px);
    }

    .cond-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 44px;
      color: var(--beige);
      font-style: italic;
      line-height: 1;
      margin-bottom: 20px;
    }

    .cond-title {
      font-family: 'Shippori Mincho', serif;
      font-size: 17px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 12px;
    }

    .cond-value {
      font-size: 22px;
      color: var(--brown);
      font-weight: 500;
      margin-bottom: 8px;
      font-family: 'Shippori Mincho', serif;
    }

    .cond-desc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.8;
    }

    /* ─── WHO ─── */
    .who {
      padding: 100px 80px;
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 80px;
      align-items: start;
    }

    .who-list {
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .who-item {
      padding: 28px 0;
      border-bottom: 1px solid var(--beige);
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }

    .who-item:first-child {
      border-top: 1px solid var(--beige);
    }

    .who-check {
      width: 20px;
      height: 20px;
      min-width: 20px;
      border: 1px solid var(--gold);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 3px;
    }

    .who-check::after {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
    }

    .who-text {
      font-size: 15px;
      color: var(--dark);
      line-height: 1.8;
    }

    .who-text strong {
      color: var(--brown);
      font-weight: 500;
    }

    .who-photo-wrap {
      position: relative;
    }

    .who-photo-wrap img {
      width: 100%;
      border-radius: 2px;
    }

    .who-photo-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(28, 25, 21, 0.85), transparent);
      padding: 40px 28px 24px;
      color: rgba(250, 247, 242, 0.85);
      font-size: 13px;
      letter-spacing: .05em;
      border-radius: 0 0 2px 2px;
    }

    /* ─── FLOW ─── */
    .flow {
      background: var(--dark);
      padding: 100px 80px;
    }

    .flow .section-eyebrow {
      color: var(--gold-lt);
    }

    .flow .section-title {
      color: var(--cream);
    }

    .flow-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 60px;
      position: relative;
    }

    .flow-steps::before {
      content: '';
      position: absolute;
      top: 28px;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
    }

    .flow-step {
      padding: 0 20px;
      text-align: center;
    }

    .flow-step-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 13px;
      letter-spacing: .2em;
      color: var(--gold);
      display: block;
      margin-bottom: 28px;
    }

    .flow-step-circle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 1px solid var(--gold);
      background: var(--dark);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      position: relative;
      z-index: 1;
    }

    .flow-step-icon {
      font-size: 20px;
      color: var(--gold);
    }

    .flow-step-title {
      font-family: 'Shippori Mincho', serif;
      font-size: 15px;
      color: var(--cream);
      margin-bottom: 8px;
      font-weight: 500;
    }

    .flow-step-desc {
      font-size: 13px;
      color: rgba(250, 247, 242, 0.55);
      line-height: 1.8;
    }

    /* ─── APPEAL ─── */
    .appeal {
      padding: 100px 80px;
      background: var(--cream);
    }

    .appeal-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      margin-top: 60px;
    }

    .appeal-photo img {
      width: 100%;
      border-radius: 2px;
    }

    .appeal-items {
      display: flex;
      flex-direction: column;
      gap: 36px;
    }

    .appeal-item {
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }

    .appeal-icon {
      font-family: 'Cormorant Garamond', serif;
      font-size: 28px;
      color: var(--gold);
      line-height: 1;
      min-width: 40px;
      font-style: italic;
    }

    .appeal-title {
      font-family: 'Shippori Mincho', serif;
      font-size: 17px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 8px;
    }

    .appeal-desc {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.85;
    }

/* gallery */

.recruit-slideshow {
    padding: 80px 0;
    overflow: hidden;
}
.recruit-slideshow .reveal {
  padding: 0px 80px;
}

/* スライド画像サイズ調整 */
.swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
   /*  aspect-ratio: 3 / 2; 写真の比率に合わせて調整 */
}

/* コントロールエリアのレイアウト */
.slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    gap: 40px;
    font-family: 'Cormorant Garamond', serif;
}

/* ページネーション (1 / 25) */
.swiper-pagination {
    position: static !important;
    width: auto !important;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: #333;
}

/* NEXT/BACK ボタン */
.swiper-button-next,
.swiper-button-prev {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: #333 !important;
    font-size: 1rem;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: opacity 0.3s;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none; /* デフォルトの矢印アイコンを消す */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 0.5;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .recruit-slideshow {
        padding: 50px 0;
    }
    .recruit-slideshow .reveal {
  padding: 0px 24px;
}

    .slider-controls {
        gap: 20px;
    }
}


    /* ─── FORM ─── */
    .form-section {
      padding: 100px 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .form-intro .section-title {
      max-width: 320px;
    }

    .form-intro p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.9;
      margin-top: 24px;
      max-width: 340px;
    }

    .form-box {
      background: var(--cream);
      border-radius: 2px;
    }

    .form-group {
      margin-bottom: 28px;
    }

    .form-label {
      display: block;
      font-size: 12px;
      letter-spacing: .1em;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .form-label span {
      color: var(--pink);
      margin-left: 4px;
    }

    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid rgba(140, 115, 85, 0.25);
      border-radius: 2px;
      background: var(--cream);
      color: var(--dark);
      font-family: 'Noto Serif JP', serif;
      font-size: 14px;
      transition: border-color .2s;
      outline: none;
      -webkit-appearance: none;
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      border-color: var(--brown);
    }

    .form-textarea {
      min-height: 100px;
      resize: vertical;
    }

    .form-submit {
      width: 100%;
      background: var(--dark);
      color: var(--cream);
      border: none;
      padding: 18px;
      border-radius: 2px;
      cursor: pointer;
      font-family: 'Noto Serif JP', serif;
      font-size: 14px;
      letter-spacing: .12em;
      transition: background .2s;
      margin-top: 8px;
    }

    .form-submit:hover {
      background: var(--brown);
    }

    .form-note {
      font-size: 12px;
      color: var(--muted);
      margin-top: 16px;
      line-height: 1.7;
    }
/* スマホ実機向けの強制リセット */
@media (max-width: 900px) {
    /* 1. 親セクションのレイアウト固定 */
    .form-section {
        display: block !important; /* gridを解除 */
        padding: 60px 20px !important; /* 左右の余白を20pxに固定 */
        width: 100% !important;
        box-sizing: border-box !important; /* パディングを幅の中に含める */
        overflow-x: hidden; /* 横揺れ防止 */
    }

    /* 2. フォームを囲む要素の突き抜け防止 */
    .form-box, 
    .contact_dl,
    .wpcf7-form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. 【最重要】入力欄自体の幅計算を正す */
    .contact_dd input[type="text"],
    .contact_dd input[type="tel"],
    .contact_dd input[type="email"],
    .contact_dd textarea,
    .contact_dd select {
        width: 100% !important; /* 親の幅(100%)に合わせる */
        max-width: 100% !important;
        box-sizing: border-box !important; /* これがないとパディング分外に飛び出す */
        display: block;
    }

    /* 4. ラベル周りの微調整（実機でのズレ防止） */
    .contact_dt {
        width: 100% !important;
        padding-bottom: 5px;
    }
    
    .contact_unit {
        display: block !important; /* 横並びを防ぐ */
        width: 100% !important;
    }
}
    /* ─── FOOTER ─── */
    footer {
      background: var(--dark);
      color: rgba(250, 247, 242, 0.5);
      padding: 60px 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-logo {
      font-family: 'DM Serif Display', serif;
      font-size: 18px;
      color: var(--gold);
      letter-spacing: .15em;
    }

    .footer-sub {
      font-size: 11px;
      letter-spacing: .1em;
      margin-top: 4px;
    }

    .footer-right {
      font-size: 12px;
      text-align: right;
      line-height: 1.9;
    }

    /* ─── ANIMATIONS ─── */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(24px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .7s, transform .7s;
    }

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

    /* ─── RESPONSIVE ─── */
    @media (max-width: 900px) {
      header {
        padding: 16px 24px;
      }

      .hero {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .hero-left {
        padding: 78px 24px 40px;
      }

      .hero-left::after {
        display: none;
      }

      .hero-right {
        height: 55vw;
      }

      .hero-badge {
        bottom: 20px;
        left: 20px;
      }

      section {
        padding: 70px 24px;
      }

      .scene {
        grid-template-columns: 1fr;
        padding: 70px 24px;
        gap: 48px;
      }

      .conditions {
        padding: 70px 24px;
      }

      .cond-grid {
        grid-template-columns: 1fr;
        gap: 2px;
      }

      .who {
        grid-template-columns: 1fr;
        padding: 70px 24px;
        gap: 48px;
      }

      .who-photo-wrap {
        order: -1;
      }

      .flow {
        padding: 70px 24px;
      }

      .flow-steps {
grid-template-columns: 1fr;
        gap: 40px;
      }

      .flow-steps::before {
        display: none;
      }

      .appeal {
        padding: 70px 24px;
      }

      .appeal-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .form-section {
        grid-template-columns: 1fr;
        padding: 70px 24px;
        gap: 48px;
      }

      footer {
        flex-direction: column;
        gap: 24px;
        padding: 48px 24px;
        text-align: center;
      }

      .footer-right {
        text-align: center;
      }
    }