/* ==========================================================================
   中央大学生協 × パナソニック ホームズ 提携ページ
   スタイルシート

   ▼ よく触る箇所
     :root ........... 配色・フォントの定義（色を変えるならここ）
     .hero ........... ファーストビュー（背景スライドショー）
     .lineup ......... 外観デザインギャラリー
     .cta / .footer .. 最下部の申込導線
   ========================================================================== */

:root {
  --brand-navy: #001c4d;
  --brand-blue: #0050a0;
  --brand-blue-light: #2a6ec8;
  --brand-gold: #c9a84c;
  --bg-cream: #faf8f3;
  --bg-soft: #f2f6fb;
  --white: #fff;
  --text-main: #1c1c2e;
  --text-sub: #4f556a;
  --line: rgba(28,28,46,.1);
  --shadow: 0 16px 40px rgba(0,0,0,.08);
  --radius: 14px;
  --max: 1180px;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: auto;
}
body {
  font-family: "Noto Sans JP",sans-serif;
  color: var(--text-main);
  background: var(--bg-cream);
  line-height: 1.7;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
.container {
  width: min(var(--max),calc(100% - 40px));
  margin: 0 auto;
}
.section {
  padding: 96px 0;
}
.section-head {
  margin-bottom: 42px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand-blue);
}
.section-title {
  font-family: "Noto Serif JP",serif;
  font-size: clamp(28px,4vw,46px);
  line-height: 1.45;
  margin-bottom: 16px;
  font-weight: 700;
}
.section-desc {
  max-width: 760px;
  color: var(--text-sub);
  font-size: 16px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(201,168,76,.12);
  color: #8d6a10;
  border: 1px solid rgba(201,168,76,.3);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  transition: .2s ease;
  cursor: pointer;
  border: none;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  color: var(--white);
  background: linear-gradient(135deg,var(--brand-navy),var(--brand-blue) 60%,var(--brand-blue-light));
  box-shadow: 0 12px 30px rgba(0,80,160,.2);
}
.btn-secondary {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--text-main);
}
.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  color: var(--white);
}
.brand-logo-coop {
  height: 52px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-logo-ph {
  height: 38px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.site-header-inner {
  width: min(var(--max),calc(100% - 32px));
  min-height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.brand-chip {
  padding: 7px 12px;
  border-radius: 4px;
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}
.brand-chip.coop {
  background: var(--brand-blue);
}
.brand-chip.ph {
  background: var(--brand-blue);
}
.brand-x {
  color: var(--brand-gold);
  font-size: 18px;
  font-weight: 700;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-mini {
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
}
.hero {
  position: relative;
  padding: 150px 0 84px;
  overflow: hidden;
  background: linear-gradient(160deg,#fdfcf8,#f8f5ee);
}
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroFade 18s infinite;
  will-change: opacity;
  transform: scale(1.04);
}
.hero-slide:nth-child(1) {
  animation-delay: 0s;
}
.hero-slide:nth-child(2) {
  animation-delay: 6s;
}
.hero-slide:nth-child(3) {
  animation-delay: 12s;
}
@keyframes heroFade {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  28% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,rgba(252,250,244,.97) 0%,rgba(252,250,244,.9) 32%,rgba(252,250,244,.55) 52%,rgba(248,245,238,.18) 72%,rgba(248,245,238,.05) 100%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(rgba(201,168,76,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.06) 1px,transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.hero-wrap {
  position: relative;
  z-index: 2;
}
.hero-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
}
.hero-copy h1 {
  font-family: "Noto Serif JP",serif;
  font-size: clamp(36px,5.3vw,66px);
  line-height: 1.35;
  font-weight: 700;
  margin: 20px 0 18px;
}
.hero-copy h1 .accent {
  background: linear-gradient(90deg,var(--brand-gold),#e8c87a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: "Cormorant Garamond",serif;
  font-weight: 600;
  font-style: italic;
}
.hero-lead {
  font-size: 17px;
  color: var(--text-sub);
  max-width: 680px;
  margin-bottom: 28px;
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
.hero-point {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.hero-note {
  font-size: 12px;
  color: var(--text-sub);
}
.hero-card {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 28px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-card-title {
  font-family: "Noto Serif JP",serif;
  font-size: 22px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.hero-card-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}
.hero-card-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  color: var(--text-sub);
  font-size: 14px;
}
.hero-card-list li strong {
  color: var(--text-main);
}
.hero-card-box {
  background: linear-gradient(135deg,#effaf8,#f4f8ff);
  border: 1px solid rgba(0,80,160,.08);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
}
.hero-card-box strong {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}
.hero-card-box p {
  font-size: 13px;
  color: var(--text-sub);
}
.trust-strip {
  padding: 22px 0;
  background: linear-gradient(135deg,var(--brand-navy),var(--brand-blue) 55%,var(--brand-blue-light));
  color: var(--white);
}
.trust-strip-inner {
  width: min(var(--max),calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px 16px;
}
.trust-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.16);
  font-size: 18px;
  flex-shrink: 0;
}
.trust-item strong {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 2px;
}
.trust-item span {
  font-size: 12px;
  opacity: .84;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-top: 18px;
}
.audience-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 28px 24px;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.audience-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#e8fffe,#e7f1ff);
  font-size: 24px;
  margin-bottom: 18px;
}
.audience-card h3 {
  font-family: "Noto Serif JP",serif;
  font-size: 20px;
  margin-bottom: 10px;
}
.audience-card p {
  color: var(--text-sub);
  font-size: 14px;
  margin-bottom: 14px;
}
.audience-card ul {
  list-style: none;
  display: grid;
  gap: 8px;
}
.audience-card li {
  font-size: 14px;
  color: var(--text-sub);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.audience-card li::before {
  content: "✓";
  color: var(--brand-blue);
  font-weight: 800;
}
.partnership {
  background: var(--bg-cream);
}
.partner-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 26px;
}
.partner-card {
  padding: 34px 28px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(0,0,0,.04);
}
.partner-card h3 {
  font-family: "Noto Serif JP",serif;
  font-size: 24px;
  margin-bottom: 8px;
}
.partner-card small {
  display: block;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 16px;
}
.partner-card ul {
  list-style: none;
  display: grid;
  gap: 10px;
}
.partner-card li {
  display: flex;
  gap: 10px;
  color: var(--text-sub);
  font-size: 14px;
}
.partner-card li::before {
  content: "●";
  color: var(--brand-gold);
  font-size: 11px;
  transform: translateY(6px);
}
.partner-connector {
  text-align: center;
  color: var(--brand-gold);
  font-family: "Cormorant Garamond",serif;
}
.partner-connector .x {
  font-size: 58px;
  line-height: 1;
  margin-bottom: 8px;
}
.partner-connector span {
  display: block;
  font-size: 12px;
  color: var(--text-sub);
  letter-spacing: .14em;
}
.benefits {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 85% 20%,rgba(42,110,200,.28),transparent 28%),radial-gradient(circle at 15% 80%,rgba(0,80,160,.22),transparent 24%),linear-gradient(135deg,#001c4d,#0050a0 55%,#2a6ec8);
}
.benefits .eyebrow,
.benefits .section-title,
.benefits .section-desc {
  color: var(--white);
}
.benefits .eyebrow::before {
  background: var(--brand-gold);
}
.benefits .eyebrow {
  color: var(--brand-gold);
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
  margin-top: 20px;
}
.benefit-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 30px 26px;
  color: var(--white);
  backdrop-filter: blur(4px);
}
.benefit-num {
  font-family: "Cormorant Garamond",serif;
  font-size: 58px;
  line-height: 1;
  opacity: .18;
  margin-bottom: 8px;
}
.benefit-title {
  font-family: "Noto Serif JP",serif;
  font-size: 22px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.benefit-desc {
  font-size: 14px;
  color: rgba(255,255,255,.84);
  min-height: 120px;
}
.benefit-tag {
  margin-top: 16px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.reason {
  background: var(--white);
}
.reason-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 22px;
}
.reason-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  background: linear-gradient(180deg,#fff,#fcfcfd);
}
.reason-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.reason-icon {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#eef8ff,#e6fffc);
  font-size: 28px;
  flex-shrink: 0;
}
.reason-title {
  font-family: "Noto Serif JP",serif;
  font-size: 20px;
  line-height: 1.5;
}
.reason-sub {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--brand-blue);
  margin-top: 4px;
}
.reason-card p {
  color: var(--text-sub);
  font-size: 14px;
}
.proof {
  background: var(--bg-soft);
}
.proof-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
}
.proof-main,
.proof-side {
  display: grid;
  gap: 20px;
}
.proof-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.proof-box h3 {
  font-family: "Noto Serif JP",serif;
  font-size: 22px;
  margin-bottom: 14px;
}
.proof-box p,
.proof-box li {
  color: var(--text-sub);
  font-size: 14px;
}
.proof-box ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.proof-box li {
  display: flex;
  gap: 10px;
}
.proof-box li::before {
  content: "✓";
  color: var(--brand-blue);
  font-weight: 800;
}
.voice {
  border-left: 4px solid var(--brand-gold);
  padding-left: 16px;
  margin-top: 12px;
}
.voice strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--text-main);
}
.voice p {
  font-size: 14px;
}
.flow {
  background: var(--bg-cream);
}
.flow-steps {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 18px;
  margin-top: 16px;
}
.flow-step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.03);
}
.flow-step-num {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  font-family: "Cormorant Garamond",serif;
  font-size: 26px;
  background: linear-gradient(135deg,var(--brand-navy),var(--brand-blue) 60%,var(--brand-blue-light));
}
.flow-step h3 {
  font-family: "Noto Serif JP",serif;
  font-size: 18px;
  margin-bottom: 10px;
}
.flow-step p {
  color: var(--text-sub);
  font-size: 13px;
}
.faq {
  background: var(--white);
}
.faq-list {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
}
.faq-q {
  font-weight: 800;
  margin-bottom: 10px;
  font-size: 16px;
}
.faq-a {
  color: var(--text-sub);
  font-size: 14px;
}
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,#001c4d,#0050a0 55%,#2a6ec8);
  color: var(--white);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.cta-title {
  font-family: "Noto Serif JP",serif;
  font-size: clamp(28px,4vw,44px);
  line-height: 1.5;
  margin: 18px 0 16px;
}
.cta-desc {
  font-size: 16px;
  color: rgba(255,255,255,.84);
  margin-bottom: 28px;
}
.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.cta-note {
  margin-top: 16px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.site-footer {
  background: #2d3442;
  color: rgba(255,255,255,.72);
  padding: 54px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand h3 {
  font-family: "Noto Serif JP",serif;
  color: var(--white);
  margin-bottom: 12px;
  font-size: 18px;
}
.footer-brand p,
.footer-links li,
.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,.72);
}
.footer-links h4 {
  color: var(--white);
  font-size: 13px;
  letter-spacing: .08em;
  margin-bottom: 14px;
}
.footer-links ul {
  list-style: none;
  display: grid;
  gap: 8px;
}
.footer-bottom {
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
}
.floating-cta {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1001;
}
.floating-cta a {
  min-width: 210px;
  min-height: 54px;
  border-radius: 999px;
  padding: 0 24px;
  box-shadow: 0 16px 30px rgba(0,80,160,.25);
}
.brand-hs {
  height: 20px;
  width: auto;
  margin: 0 2px;
}
.partner-connector .hs-icon {
  width: 66px;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}
.coop-card-logo {
  height: 52px;
  width: auto;
  margin-bottom: 14px;
}
.ph-card-logo {
  height: 32px;
  width: auto;
  margin-bottom: 8px;
}
.footer-hs {
  height: 17px;
  width: auto;
  display: inline-block;
  vertical-align: -2px;
  margin: 0 4px;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.movie-section {
  background: #2a2a3a;
  padding: 96px 0;
}
.movie-section .eyebrow {
  color: var(--brand-gold);
}
.movie-section .eyebrow::before {
  background: var(--brand-gold);
}
.movie-section .section-title {
  color: #fff;
}
.movie-section .section-desc {
  color: rgba(255,255,255,.6);
}
/* ▼ 商品ラインナップ（カサート）ギャラリー */
    .lineup {
  background: var(--bg-cream);
}
.lineup-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
  margin-top: 18px;
}
.lineup-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.1);
  background: #000;
  aspect-ratio: 4/3;
  cursor: default;
}
.lineup-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s ease;
  transform: scale(1);
}
.lineup-card:hover .lineup-img {
  transform: scale(1.08);
}
.lineup-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 24px 22px 20px;
  background: linear-gradient(0deg,rgba(12,18,28,.82) 0%,rgba(12,18,28,.5) 55%,transparent 100%);
  color: #fff;
}
.lineup-cap .ln-series {
  font-family: "Cormorant Garamond",serif;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--brand-gold);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lineup-cap h3 {
  font-family: "Noto Serif JP",serif;
  font-size: 19px;
  margin-bottom: 4px;
  line-height: 1.4;
}
.lineup-cap p {
  font-size: 12.5px;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
}
.lineup-note {
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-sub);
  text-align: center;
}
@media(max-width:1024px) {
  .lineup-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media(max-width:600px) {
  .lineup-grid {
    grid-template-columns: 1fr;
  }
}
/* ▼ セクション背景に外観写真を差し込む共通演出 */
    .has-bg {
  position: relative;
  overflow: hidden;
}
.sec-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.sec-bg-ken {
  animation: secKen 24s ease-in-out infinite alternate;
}
@keyframes secKen {
  0% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1.14);
  }
}
.sec-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* 明るいセクション用（白カードが上に乗る）：写真をうっすら見せる */
    .ov-light {
  background: linear-gradient(160deg,rgba(250,248,243,.93),rgba(248,245,238,.9));
}
/* CTA用（ダーク）：写真の上にブランドグラデを重ねる */
    .ov-brand {
  background: linear-gradient(135deg,rgba(0,169,157,.9),rgba(0,122,114,.88) 45%,rgba(0,80,160,.9));
}
.has-bg>.container {
  position: relative;
  z-index: 2;
}
@media(max-width:900px) {
  .sec-bg {
    background-attachment: scroll;
  }
}
@media(prefers-reduced-motion:reduce) {
  .sec-bg-ken {
    animation: none;
    transform: scale(1.06);
  }
}
@media(max-width:1024px) {
  .hero-wrap,
  .proof-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .trust-strip-inner,
  .audience-grid,
  .benefit-grid,
  .flow-steps,
  .reason-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .partner-grid {
    grid-template-columns: 1fr;
  }
  .partner-connector {
    display: none;
  }
}
@media(max-width:768px) {
  .hero-overlay {
    background: linear-gradient(180deg,rgba(252,250,244,.93) 0%,rgba(252,250,244,.87) 45%,rgba(252,250,244,.8) 100%);
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-slide {
    animation: none;
    opacity: 0;
  }
  .hero-slide:nth-child(1) {
    opacity: 1;
  }
}
@media(max-width:768px) {
  .section {
    padding: 72px 0;
  }
  .site-header-inner {
    min-height: auto;
    flex-wrap: wrap;
    padding: 10px 0;
    gap: 8px;
  }
  .brand {
    gap: 6px;
    justify-content: center;
    width: 100%;
  }
  .brand-logo-coop {
    height: 32px!important;
  }
  .brand-logo-ph {
    height: 28px!important;
  }
  .brand .brand-x {
    font-size: 14px;
  }
  .brand .brand-chip {
    padding: 5px 8px;
    font-size: 9px;
  }
  .header-actions {
    width: 100%;
    justify-content: center;
    gap: 8px;
  }
  .header-mini {
    display: block;
    font-size: 11px;
  }
  .site-header .btn {
    min-height: 38px;
    padding: 0 14px;
    font-size: 12px;
  }
  .hero {
    padding: 120px 0 60px;
  }
  .hero-cta,
  .cta-actions {
    flex-direction: column;
  }
  .hero-cta .btn,
  .cta-actions .btn {
    width: 100%;
  }
  .trust-strip-inner,
  .audience-grid,
  .benefit-grid,
  .reason-grid,
  .flow-steps {
    grid-template-columns: 1fr;
  }
  .floating-cta {
    display: none;
  }
}

/* ==========================================================================
   写真の割り当て
   ここのファイル名を差し替えるだけで、該当箇所の写真が全部入れ替わります。
   （ヒーロー背景・セクション背景・ギャラリーで共通利用）
   ========================================================================== */
.bg-casart1 { background-image: url(../assets/images/image-01-1ad2575f1d25.jpg); }
.bg-casart2 { background-image: url(../assets/images/image-02-9d2211e63c14.jpg); }
.bg-casart3 { background-image: url(../assets/images/image-03-8a64bdd27579.jpg); }

/* ==========================================================================
   公式リンクカード（Official Links）
   4枚の高さ・幅を完全に揃えるためのクラス
   ========================================================================== */
.official-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.official-link {
  display: flex;
  text-decoration: none;
  height: 100%;
}
.official-link-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  border: 1px solid var(--link-border, rgba(0,80,160,.15));
  border-radius: 14px;
  padding: 24px;
  background: var(--link-bg, linear-gradient(135deg,#F0F6FF,#FFF));
  transition: box-shadow .2s, transform .2s;
}
.official-link:hover .official-link-inner {
  box-shadow: 0 8px 28px var(--link-shadow, rgba(0,80,160,.12));
  transform: translateY(-3px);
}
.official-link-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  background: var(--link-icon-bg, #0050A0);
}
.official-link-body {
  min-width: 0;
  flex: 1;
}
.official-link-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  margin-bottom: 6px;
  color: var(--link-accent, #0050A0);
}
.official-link-title {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 4px;
  min-height: calc(1.5em * 2);
  display: flex;
  align-items: center;
}
.official-link-desc {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.6;
}
.official-link-arrow {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 18px;
  color: var(--link-accent, #0050A0);
}
.official-link.c-blue    { --link-accent:#0050A0; --link-icon-bg:#0050A0; --link-border:rgba(0,80,160,.15);  --link-bg:linear-gradient(135deg,#F0F6FF,#FFF); --link-shadow:rgba(0,80,160,.12); }
.official-link.c-blue2   { --link-accent:#2A6EC8; --link-icon-bg:#2A6EC8; --link-border:rgba(0,80,160,.15);  --link-bg:linear-gradient(135deg,#F0F6FF,#FFF); --link-shadow:rgba(0,80,160,.12); }
.official-link.c-teal    { --link-accent:#007A72; --link-icon-bg:#007A72; --link-border:rgba(0,122,114,.15); --link-bg:linear-gradient(135deg,#F0FBF9,#FFF); --link-shadow:rgba(0,122,114,.12); }
.official-link.c-red     { --link-accent:#CC0000; --link-icon-bg:#CC0000; --link-border:rgba(204,0,0,.15);   --link-bg:linear-gradient(135deg,#FFF5F5,#FFF); --link-shadow:rgba(204,0,0,.1); }




/* ==========================================================================
   Responsive polish 2026-09-16
   PC / tablet / smartphone checks after self-contained conversion.
   - Prevents CTA text from splitting on small phones.
   - Keeps important title phrases together.
   - Reduces mobile heading sizes slightly to avoid awkward one-character breaks.
   ========================================================================== */
.btn { white-space: nowrap; }
.header-actions { flex-wrap: wrap; }
.title-keep,
.nowrap { white-space: nowrap; }

@media (max-width: 480px) {
  .container { width: min(var(--max), calc(100% - 40px)); }
  .hero-copy h1 {
    font-size: clamp(28px, 8.5vw, 34px);
    line-height: 1.45;
    letter-spacing: -0.02em;
  }
  .hero-lead {
    font-size: 15px;
    line-height: 1.85;
  }
  .badge {
    font-size: 11px;
    padding: 8px 12px;
  }
  .section-title {
    font-size: clamp(26px, 8vw, 32px);
    line-height: 1.55;
    letter-spacing: -0.01em;
  }
  .hero-card,
  .audience-card,
  .partner-card,
  .reason-card,
  .proof-box,
  .faq-item {
    padding: 24px;
  }
  .proof-box h3 {
    font-size: 20px;
    line-height: 1.55;
  }
  .site-header .btn {
    white-space: nowrap;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 360px) {
  .site-header-inner { width: calc(100% - 24px); }
  .brand-logo-coop { height: 29px !important; max-width: 128px; }
  .brand-logo-ph { height: 27px !important; max-width: 124px; }
  .header-mini { display: none; }
  .site-header .btn {
    min-height: 36px;
    font-size: 11.5px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero { padding-top: 112px; }
  .hero-copy h1 {
    font-size: 28px;
    line-height: 1.45;
  }
  .hero-point {
    font-size: 12px;
    padding: 9px 12px;
  }
  .proof-box h3 { font-size: 19px; }
}


@media (max-width: 480px) {
  .hero-card-title { font-size: 20px; line-height: 1.55; }
  .voice strong { font-size: 13.5px; line-height: 1.7; }
}
@media (max-width: 360px) {
  .hero-card-title { font-size: 19px; }
  .voice strong { font-size: 13px; }
}



/* ======================================================================
   上品なホバー演出（PC・マウス操作時のみ）
   - 動かす対象はクリック/選択できそうな要素に限定
   - スマホでは hover を無効化して、タップ時の違和感を避ける
   ====================================================================== */
:root {
  --motion-ease: cubic-bezier(.22,1,.36,1);
  --hover-shadow-soft: 0 18px 42px rgba(0,28,77,.12);
  --hover-shadow-blue: 0 18px 42px rgba(0,80,160,.20);
}

.btn,
.hero-point,
.trust-item,
.audience-card,
.partner-card,
.benefit-card,
.reason-card,
.proof-box,
.flow-step,
.faq-item,
.lineup-card {
  transition:
    transform .28s var(--motion-ease),
    box-shadow .28s var(--motion-ease),
    border-color .28s var(--motion-ease),
    background-color .28s var(--motion-ease),
    opacity .28s var(--motion-ease);
}

.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -90%;
  width: 42%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  opacity: 0;
  pointer-events: none;
}

.audience-icon,
.reason-icon,
.trust-icon,
.flow-step-num {
  transition: transform .28s var(--motion-ease), background .28s var(--motion-ease);
}

@media (hover:hover) and (pointer:fine) {
  .btn:hover {
    transform: translateY(-2px);
  }

  .btn:hover::after {
    animation: btnSheen .82s var(--motion-ease) forwards;
  }

  .btn-primary:hover {
    box-shadow: var(--hover-shadow-blue);
  }

  .btn-secondary:hover {
    border-color: rgba(0,80,160,.22);
    box-shadow: var(--hover-shadow-soft);
  }

  .btn-outline:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.72);
  }

  .hero-point:hover,
  .trust-item:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.24);
  }

  .hero-point:hover {
    background: rgba(255,255,255,.86);
    border-color: rgba(201,168,76,.42);
    box-shadow: 0 10px 24px rgba(0,28,77,.08);
  }

  .audience-card:hover,
  .partner-card:hover,
  .reason-card:hover,
  .proof-box:hover,
  .flow-step:hover,
  .faq-item:hover {
    transform: translateY(-5px);
    border-color: rgba(0,80,160,.18);
    box-shadow: var(--hover-shadow-soft);
  }

  .benefit-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.115);
    border-color: rgba(255,255,255,.24);
    box-shadow: 0 20px 42px rgba(0,0,0,.16);
  }

  .audience-card:hover .audience-icon,
  .reason-card:hover .reason-icon,
  .trust-item:hover .trust-icon,
  .flow-step:hover .flow-step-num {
    transform: scale(1.045);
  }

  .lineup-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 46px rgba(0,0,0,.16);
  }

  .lineup-card:hover .lineup-cap {
    background: linear-gradient(0deg,rgba(8,14,24,.88) 0%,rgba(8,14,24,.56) 58%,transparent 100%);
  }
}

@keyframes btnSheen {
  0% { left: -90%; opacity: 0; }
  18% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .hero-point,
  .trust-item,
  .audience-card,
  .partner-card,
  .benefit-card,
  .reason-card,
  .proof-box,
  .flow-step,
  .faq-item,
  .lineup-card,
  .audience-icon,
  .reason-icon,
  .trust-icon,
  .flow-step-num,
  .lineup-img {
    transition: none !important;
    animation: none !important;
  }
  .btn:hover,
  .hero-point:hover,
  .trust-item:hover,
  .audience-card:hover,
  .partner-card:hover,
  .benefit-card:hover,
  .reason-card:hover,
  .proof-box:hover,
  .flow-step:hover,
  .faq-item:hover,
  .lineup-card:hover {
    transform: none !important;
  }
}