* { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; color: #322f2e; line-height: 1.6; background: #fff; }
  .wrapper { max-width: 1200px; width: 90%; margin: 0 auto; }
  .block { padding: 32px 0; }
  .block-label { display:inline-block; font-size:11px; font-weight:900; color:#fff; background:#999; padding:3px 10px; border-radius:4px; margin-bottom:14px; }

  #top{
    margin-top: 100px;
  }

  .page-header { padding: 18px 0 6px; }
  .breadcrumb { font-size: 12px; color: #888; margin-bottom: 14px; }
  .breadcrumb a { color: #00b295; text-decoration: none; font-weight: 700; }
  .breadcrumb a:hover { text-decoration: underline; }
  .breadcrumb .sep { margin: 0 6px; color: #ccc; }
  .breadcrumb .current { color: #555; }

  .page-title-bar {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 14px; border-bottom: 3px solid #00b295; margin-bottom: 4px;
  }
  .page-title-bar__icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, #00b295, #00967f);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: #fff; box-shadow: 0 3px 8px rgba(0,178,149,.3);
  }
  /* ══ タイムライン式フロー ══ */
  .flow-section { padding: 8px 0 32px; }
  .flow-section h2 { font-size: 18px; font-weight: 900; margin-bottom: 28px; text-align: center; }

  .timeline { position: relative; padding-left: 84px; }
  .timeline::before {
    content: ''; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #a8e0cf 0%, #2fb894 50%, #00776a 100%);
  }
  .t-step {
    position: relative; margin-bottom: 44px;
    opacity: 0; transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .t-step:last-child { margin-bottom: 0; }
  .t-step.reveal { opacity: 1; transform: none; }
  .t-step:nth-child(2) { transition-delay: .15s; }
  .t-step:nth-child(3) { transition-delay: .3s; }
  .t-node {
    position: absolute; left: -84px; top: 0;
    width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
    background: #fff; box-shadow: 0 6px 16px rgba(0,50,40,.15);
  }
  .t-step:nth-child(1) .t-node { border: 4px solid #a8e0cf; }
  .t-step:nth-child(2) .t-node { border: 4px solid #2fb894; }
  .t-step:nth-child(3) .t-node { border: 4px solid #00776a; }
  .t-node img { width: 100%; height: 140%; object-fit: cover; object-position: top center; display:block; transform: scale(1.35); transform-origin: top center; }
  .t-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; color: #fff;
    font-size: 11px; font-weight: 900; margin-right: 6px; flex-shrink: 0; vertical-align: middle;
  }
  .t-step:nth-child(1) .t-badge { background: #7fd4bd; }
  .t-step:nth-child(2) .t-badge { background: #2fb894; }
  .t-step:nth-child(3) .t-badge { background: #00776a; }
  .t-content { padding-top: 14px; min-height: 80px; }
  .t-title { font-size: 15.5px; font-weight: 900; margin-bottom: 4px; }
  .t-title .sub { display:block; font-size: 11.5px; color: #00776a; font-weight: 700; margin-top: 2px; }
  .t-note { font-size: 12px; color: #666; }
  .t-note a { color: #00776a; font-weight: 700; white-space: nowrap; }
  .t-more { font-size: 11.5px; font-weight: 700; color: #00776a; cursor: pointer; margin-top: 4px; display: inline-block; }
  .t-full { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .t-full.open { max-height: 300px; }
  .t-full ul { margin: 8px 0 0; padding-left: 1.1em; font-size: 11.5px; color: #666; line-height: 1.9; }

  @media (max-width: 480px) {
    .timeline { padding-left: 68px; }
    .timeline::before { left: 31px; }
    .t-node { left: -68px; width: 64px; height: 64px; }
    .t-title { font-size: 14px; }
  }

  /* ══ PC（801px以上）は横向きタイムラインに ══ */
  @media (min-width: 801px) {
    .timeline {
      padding-left: 0; display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; padding-top: 60px;
    }
    .timeline::before {
      left: 0; right: 0; top: 114px; bottom: auto; width: auto; height: 4px; z-index: 0;
      background: linear-gradient(90deg, #a8e0cf 0%, #2fb894 50%, #00776a 100%);
    }
    .t-step {
      flex: 1; margin-bottom: 0; text-align: center;
      display: flex; flex-direction: column; align-items: center;
    }
    .t-node {
      position: relative; z-index: 1; width: 108px; height: 108px; margin-bottom: 14px;
    }
    .t-content { padding-top: 0; min-height: auto; max-width: 260px; }
    .t-title { font-size: 16px; }
    .t-note { font-size: 12.5px; }
  }

  /* ══ 申込みゲート（チェック不要・自動解禁＋ピッカーン） ══ */
  .gate-section { padding: 8px 0 40px; }
  .gate-glow {
    position: relative; max-width: 640px; margin: 0 auto; border-radius: 22px; padding: 3px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,178,149,.18);
  }
  .gate-glow::before {
    content: ''; position: absolute; inset: -50%; z-index: 0;
    background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, #7fe8cf 330deg, #fff 345deg, #7fe8cf 360deg);
    animation: gate-spin 3s linear infinite;
  }
  @keyframes gate-spin {
    to { transform: rotate(360deg); }
  }
  .gate-card {
    position: relative; z-index: 1; background: #fff; border-radius: 20px;
    padding: 0 26px 28px; overflow: hidden;
  }
  .gate-headline {
    margin: 0 -26px 20px; padding: 18px 26px 16px;
    background: linear-gradient(120deg, #00b295, #00967f); color: #fff;
    display: flex; align-items: center; gap: 10px;
  }
  .gate-headline__icon {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
  }
  .gate-headline h3 { font-size: 16px; font-weight: 900; text-align: left; margin-bottom: 2px; color: #fff; }
  .gate-headline .sub { font-size: 12px; color: rgba(255,255,255,.9); text-align: left; margin-bottom: 0; }
  .scroll-box {
    height: 240px; overflow-y: auto; border: 1.5px solid #ddd; border-radius: 14px;
    padding: 18px 20px; font-size: 12.5px; color: #444; line-height: 1.9; background: #fafafa;
  }
  .scroll-box h4 {
    font-size: 13.5px; font-weight: 900; margin: 16px 0 8px; color: #00776a;
    padding-bottom: 6px; border-bottom: 2px solid #00b295;
  }
  .scroll-box h4:first-child { margin-top: 0; }
  .scroll-box p { margin-bottom: 10px; }
  .scroll-box .note { font-size: 11px; color: #888; display: block; margin-top: 2px; }
  .scroll-box a { color: #00776a; font-weight: 700; }
  .scroll-hint { text-align: center; font-size: 11.5px; color: #999; margin-top: 8px; transition: opacity .3s; }
  .scroll-hint.hide { opacity: 0; }
  .gate-cta-wrap { text-align: center; margin-top: 22px; }
  .gate-cta {
    display:inline-block; width:100%; max-width:340px; padding:16px; border-radius:999px;
    background:#eee; color:#aaa; font-weight:900; font-size:15px; text-decoration:none;
    cursor:not-allowed; transition: background .3s, color .3s, transform .2s;
    position: relative; overflow: visible;
    border: none; font-family: inherit; appearance: none;
  }
  .gate-cta:disabled { cursor: not-allowed; }
  .gate-cta.active { background:#00b295; color:#fff; cursor:pointer; }
  .gate-cta.flash { animation: flash-pop .6s ease; }
  @keyframes flash-pop {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,178,149,.6); }
    40%  { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(0,178,149,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,178,149,0); }
  }
  .sparkle {
    position: absolute; pointer-events: none; font-size: 20px;
    opacity: 0; animation: sparkle-pop .7s ease forwards;
  }
  @keyframes sparkle-pop {
    0%   { opacity: 0; transform: scale(.4) translateY(0); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.3) translateY(-24px); }
  }
  .gate-motivate { font-size:12.5px; color:#00b295; font-weight:700; text-align:center; margin-top:10px; min-height:18px; }

  /* ══ よくある質問（仄かなネオン明滅） ══ */
  .faq-section { padding: 32px 0 8px; }
  .faq-heading {
    font-size: 15px; font-weight: 900; text-align: center; margin-bottom: 16px;
    color: #00776a; letter-spacing: .04em;
    animation: neon-flicker 3.2s ease-in-out infinite;
  }
  @keyframes neon-flicker {
    0%, 100% { text-shadow: 0 0 6px rgba(0,178,149,.25), 0 0 14px rgba(0,178,149,.12); }
    50%      { text-shadow: 0 0 10px rgba(0,178,149,.45), 0 0 22px rgba(0,178,149,.22); }
  }
  .faq-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
  .faq-item {
    border: 1.5px solid #dcefe9; border-radius: 12px; overflow: hidden; background: #fff;
    animation: neon-border 3.2s ease-in-out infinite;
  }
  .faq-item:nth-child(2) { animation-delay: .5s; }
  .faq-item:nth-child(3) { animation-delay: 1s; }
  @keyframes neon-border {
    0%, 100% { box-shadow: 0 0 0 rgba(0,178,149,0); border-color: #dcefe9; }
    50%      { box-shadow: 0 0 10px rgba(0,178,149,.18); border-color: #b9e3d7; }
  }
  .faq-q {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 13px 14px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
  }
  .faq-q__mark {
    position: relative; width: 26px; height: 26px; border-radius: 50%; background: #F4FBF9; color: #fff;
    font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    border: 1.5px solid #00b295;
  }
  .faq-q__mark small {
    position: absolute; bottom: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%;
    background: #00b295; color: #fff; font-size: 8.5px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
  }
  .faq-q__text { flex: 1; font-size: 13px; font-weight: 700; color: #322f2e; }
  .faq-q__chev { font-size: 11px; color: #00b295; transition: transform .3s; flex-shrink: 0; }
  .faq-item.open .faq-q__chev { transform: rotate(180deg); }
  .faq-a {
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
    display: flex; gap: 10px; padding: 0 14px;
  }
  .faq-item.open .faq-a { max-height: 300px; padding: 0 14px 16px; }
  .faq-a__mark {
    width: 22px; height: 22px; border-radius: 50%; background: #F4FBF9; color: #00776a; border: 1.5px solid #00b295;
    font-size: 11.5px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .faq-a p { font-size: 12.5px; color: #555; line-height: 1.8; }
  .faq-a small { font-size: 10.5px; color: #999; }
  .faq-a small.footnote { display: block; margin-top: 6px; }

  .credit-life-banner {
    display: block; max-width: 320px; margin: 24px auto 0; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.1); transition: transform .2s ease;
  }
  .credit-life-banner:hover { transform: translateY(-2px); }
  .credit-life-banner img { width: 100%; display: block; }

  .page-title-bar h1 {
    font-size: 22px; font-weight: 900; color: #322f2e; letter-spacing: .01em;
  }

  .hero-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

  .slider-box { position: relative; border-radius: 25px; overflow: hidden; }
  .slider-track { display: flex; transition: transform .5s cubic-bezier(.22,1,.36,1); }
  .slider-track > img, .slider-track > a { flex: 0 0 100%; width:100%; display:block; }
  .slider-track img { width:100%; aspect-ratio: 628/418; object-fit: cover; display:block; }
  .slider-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
  .slider-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); }
  .slider-dots span.active { background: #fff; }

  /* ══ 4分割スポットライト・グリッド ══ */
  .quad-grid {
    position: relative;
    aspect-ratio: 628/418;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 0; border-radius: 25px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 14px rgba(0,0,0,.12);
  }

  .quad-cell {
    position: relative; cursor: pointer; overflow: hidden;
    border: 3px solid transparent; /* 通常時は透明。継ぎ目にクロスの筋が入らないように */
  }
  .quad-cell:hover, .quad-cell.active {
    z-index: 5;
  }
  .quad-cell[data-axis="anshin"]:hover, .quad-cell[data-axis="anshin"].active { border-color: #159a4c; }
  .quad-cell[data-axis="benri"]:hover,  .quad-cell[data-axis="benri"].active  { border-color: #1ba8e0; }
  .quad-cell[data-axis="otoku"]:hover,  .quad-cell[data-axis="otoku"].active  { border-color: #e08a1e; }
  .quad-cell[data-axis="kaigai"]:hover, .quad-cell[data-axis="kaigai"].active { border-color: #e02780; }

  .quad-cell img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .quad-cell .img-color {
    z-index: 2;
    opacity: 1;
    filter: grayscale(0);
    transition: filter .6s ease, transform .28s ease;
  }

  /* グレー画像を別読込せず、カラー画像1枚をCSSでモノクロ化 */
  .quad-cell.idle-mono .img-color { filter: grayscale(1); }
  .quad-grid:hover .quad-cell .img-color { filter: grayscale(1); }
  .quad-grid:hover .quad-cell:hover .img-color { filter: grayscale(0); }

  /* タッチ端末：選択した1枚だけカラー */
  .quad-grid.touch.has-active .quad-cell .img-color { filter: grayscale(1); }
  .quad-grid.touch.has-active .quad-cell.active .img-color { filter: grayscale(0); }

  .quad-cell__glow {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    box-shadow: inset 0 0 0 0 rgba(255,255,255,0); transition: box-shadow .28s ease;
  }
  .quad-cell:hover .quad-cell__glow, .quad-cell.active .quad-cell__glow {
    box-shadow: inset 0 0 40px 4px rgba(255,255,255,.25);
  }

  .quad-cell__tap {
    position: absolute; bottom: 6px; right: 8px; z-index: 4;
    font-size: 10.5px; font-weight: 900; color: #fff;
    background: rgba(0,0,0,.55); padding: 3px 10px; border-radius: 999px;
    opacity: 1; transition: opacity .2s ease, transform .2s ease;
    animation: tap-hint-pulse 2.4s ease-in-out infinite;
  }
  .quad-cell:hover .quad-cell__tap, .quad-cell.active .quad-cell__tap {
    opacity: 1; animation: none; transform: scale(1.08);
  }
  @keyframes tap-hint-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
  }

  /* ── 詳細パネル ── */
  .detail-panel {
    position: absolute; inset: 0; background: #fff; border-radius: 25px;
    display: flex; flex-direction: column;
    transform: translateX(100%); pointer-events: none;
    transition: transform .32s cubic-bezier(.22,1,.36,1);
    z-index: 10; overflow: hidden;
    border: 3px solid #fff; box-shadow: 0 2px 14px rgba(0,0,0,.12);
  }
  .detail-panel.show { transform: translateX(0); pointer-events: auto; }
  .detail-panel__head {
    display:flex; align-items:center; gap:10px; padding: 14px 16px; flex-shrink:0;
    background: var(--accent, #00b295);
  }
  .detail-panel__back {
    background: rgba(255,255,255,.2); border:none; font-size:11.5px; color:#fff; font-weight:900;
    cursor:pointer; font-family:inherit; padding: 5px 10px; border-radius: 999px; flex-shrink: 0;
  }
  .detail-panel__avatar {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.8);
  }
  .detail-panel__avatar img { width:100%; height:100%; object-fit:cover; object-position: top center; }
  .detail-panel__title { font-size: 16px; font-weight:900; flex:1; color: #fff; }
  .detail-panel__body { padding: 14px 16px; font-size: 12.5px; color:#555; overflow-y:auto; flex:1; }
  .detail-panel__body small { display:block; font-size: 11px; color:#999; margin-top:8px; line-height:1.7; }

  /* 種類別の見せ方 */
  .kind-tag {
    display:inline-block; font-size:10.5px; font-weight:900; color:#fff;
    padding:2px 9px; border-radius:999px; margin-bottom:6px;
  }
  .detail-panel[data-axis="anshin"] { --accent: #159a4c; }
  .detail-panel[data-axis="benri"]  { --accent: #1ba8e0; }
  .detail-panel[data-axis="otoku"]  { --accent: #e08a1e; }
  .detail-panel[data-axis="kaigai"] { --accent: #e02780; }
  .kind-tag { background: var(--accent, #888) !important; }
  .sim-cta { background: var(--accent, #d1451f) !important; }
  .link-cta { background: var(--accent, #2f7fd1); }

  .sim-cta, .link-cta {
    display:inline-flex; align-items:center; gap:6px; margin-top:8px;
    font-size:12.5px; font-weight:900; color:#fff; padding:8px 16px; border-radius:999px; text-decoration:none;
  }
  .sim-cta { background:#d1451f; cursor:pointer; border:none; font-family:inherit; }
  .link-cta.secondary { background:#fff; color: var(--accent, #2f7fd1); border: 2px solid var(--accent, #2f7fd1); }

  .detail-table { width:100%; border-collapse:collapse; font-size:10.5px; margin-top:10px; }
  .detail-table th, .detail-table td { border:1px solid #e2e2e2; padding: 5px 6px; text-align:center; }
  .table-title {
    font-weight: 900; font-size: 12.5px; color: #fff; background: var(--accent, #00776a);
    padding: 5px 10px; border-radius: 6px 6px 0 0; margin-top: 12px;
  }
  .detail-table.no-top-radius { margin-top: 0; }
  .detail-table th { background:#F4FBF9; font-weight:700; color: var(--accent, #00776a); }

  /* シミュレーター（実装版） */
  .sim-box { background:#F9FAFB; border:1.5px solid #eee; border-radius:12px; padding:14px; margin-top:10px; }
  .sim-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .sim-row label { font-size:11.5px; font-weight:700; color:#555; width:64px; flex-shrink:0; }
  .sim-row input[type=number] {
    flex:1; padding:7px 10px; border:1.5px solid #ccc; border-radius:8px; font-size:14px; font-weight:700; font-family:inherit;
  }
  .sim-terms { display:flex; gap:4px; flex-wrap:wrap; flex:1; }
  .sim-terms button {
    font-size:11px; font-weight:700; padding:5px 0; width:38px; border-radius:6px;
    border:1.5px solid #ccc; background:#fff; color:#555; cursor:pointer; font-family:inherit;
  }
  .sim-terms button.active { background: var(--accent, #d1451f); border-color: var(--accent, #d1451f); color:#fff; }
  .sim-result { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; font-size:11px; }
  .sim-result .c { background:#fff; border:1px solid #eee; border-radius:8px; padding:10px; }
  .sim-line { display:flex; justify-content:space-between; gap:4px; padding:3px 0; border-top:1px dashed #eee; font-size:10.5px; color:#666; }
  .sim-line:first-of-type { border-top:none; margin-top:6px; }
  .sim-line b { font-weight:900; color:#322f2e; font-size:11.5px; }
  .sim-line.total { border-top:1.5px solid #ddd; margin-top:4px; padding-top:6px; }
  .sim-line.total b { color: var(--accent, #d1451f); font-size:13px; }
  .sim-diff {
    margin: 10px 0 12px; background: linear-gradient(135deg, #e6332c, #c41e1e); color:#fff;
    border-radius: 12px; padding: 14px 12px; text-align: center;
    box-shadow: 0 4px 14px rgba(196,30,30,.35);
    animation: sim-diff-shine 3s ease-in-out infinite;
  }
  .sim-diff__label { display:block; font-size: 12px; font-weight:700; opacity:.9; margin-bottom: 2px; }
  .sim-diff__amount { display:block; font-size: 26px; font-weight:900; letter-spacing:.02em; }
  @keyframes sim-diff-shine {
    0%, 80%, 100% { transform: scale(1); }
    85% { transform: scale(1.08); }
    90% { transform: scale(0.98); }
    95% { transform: scale(1.03); }
  }

  .item-title {
    font-weight: 900; font-size: 13.5px; margin-bottom: 4px; display: inline-block;
    padding: 0 3px; border-radius: 3px;
  }
  .item-title.hl-anshin { background: linear-gradient(transparent 60%, #c8ecd9 60%); color: #0d7a44; }
  .item-title.hl-benri  { background: linear-gradient(transparent 60%, #c9ecf7 60%); color: #0d6f96; }
  .item-title.hl-otoku  { background: linear-gradient(transparent 60%, #fbdfc0 60%); color: #a35c00; }
  .item-title.hl-kaigai { background: linear-gradient(transparent 60%, #fbd0e6 60%); color: #a3125c; }
  .item-row { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed #eee; }
  .item-row:last-child { border-bottom: none; }

  .hint { text-align:center; font-size:11.5px; color:#00776a; margin-top:10px; }

  @media (max-width: 900px) {
    .hero-2col { grid-template-columns: 1fr; }
  }

/* ===== 2026-09 TOP reframe / mobile-first ===== */
.intro-lead {
  margin: 8px 0 18px;
  padding: 16px 18px;
  background: #FAF8F1;
  border-left: 4px solid #00B295;
  border-radius: 0 12px 12px 0;
}
.intro-lead h2 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 900;
  color: #252525;
}
.intro-lead p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #555;
}
.credit-life-banner__fallback {
  min-height: 142px;
  padding: 22px 18px;
  background: linear-gradient(135deg, #f4fbf9, #faf8f1);
  border: 1px solid #dcefe9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  color: #322f2e;
  font-size: 13px;
  line-height: 1.5;
}
.credit-life-banner__fallback strong { font-size: 20px; color: #00776a; margin: 2px 0 8px; }
.credit-life-banner__fallback small { color: #777; }

@media (max-width: 600px) {
  .wrapper { width: calc(100% - 32px); }
  .page-header { padding-top: 12px; }
  .page-title-bar h1 { font-size: 20px; }
  .intro-lead { margin-top: 6px; margin-bottom: 14px; padding: 14px 14px 14px 16px; }
  .intro-lead h2 { font-size: 17px; }
  .intro-lead p { font-size: 13px; line-height: 1.75; }
  .block { padding-top: 12px; }
  .hero-2col { gap: 14px; }
  .slider-box, .quad-grid, .detail-panel { border-radius: 18px; }
  .flow-section { padding-top: 4px; }
}


/* ===== 2026-09-09 refinement pass ===== */
/* スライダー：スマホは縦スクロールを保ちつつ左右スワイプ */
.slider-box { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.slider-track { will-change: transform; }

/* タイムライン：ベース線 + 3秒で流れるハイライト */
.timeline::before { z-index: 0; }
.timeline::after {
  content: '';
  position: absolute;
  left: 39px;
  top: 40px;
  bottom: 40px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,.95) 48%, rgba(127,232,207,.95) 56%, transparent 78%);
  background-size: 100% 240%;
  animation: timeline-flow-y 3s linear infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes timeline-flow-y {
  from { background-position: 0 -120%; }
  to   { background-position: 0 120%; }
}
.t-step, .t-node, .t-content { position: relative; z-index: 1; }

@media (min-width: 801px) {
  .timeline::after {
    left: 0;
    right: 0;
    top: 114px;
    bottom: auto;
    width: auto;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,.98) 47%, rgba(127,232,207,1) 54%, transparent 78%);
    background-size: 240% 100%;
    animation: timeline-flow-x 3s linear infinite;
  }
  @keyframes timeline-flow-x {
    from { background-position: -120% 0; }
    to   { background-position: 120% 0; }
  }
  .t-step { text-align: left; }
  .t-content { width: 100%; max-width: 300px; text-align: left; }
  .t-title, .t-note, .t-more, .t-full { text-align: left; }
  .t-full ul { text-align: left; }
}

/* 詳細パネル：丸サムネをやめ、オリジナル透過イラストを活かす */
.detail-panel__head {
  min-height: 74px;
  position: relative;
  padding-right: 116px;
  overflow: hidden;
}
.detail-panel__title { font-size: 21px; line-height: 1.2; }
.detail-panel__character {
  position: absolute;
  right: 8px;
  bottom: -20px;
  width: 104px;
  height: 110px;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.detail-panel__character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.12));
}
/* 旧サムネ定義は非表示 */
.detail-panel__avatar { display: none !important; }
/* 操作を説明するだけの補助タグは表示しない */
.kind-tag { display: none !important; }

/* FAQ：ランキング演出をやめ、通年のQ&Aへ */
.faq-heading { font-size: 17px; }
.faq-q__mark {
  width: 28px;
  height: 28px;
  color: #00776a;
  background: #f4fbf9;
  border: 1.5px solid #00b295;
  font-size: 13px;
  font-weight: 900;
}
.faq-q__mark small { display: none; }

/* 外部学習コンテンツ：PC/SP別画像。画像内の常設注記部分は表示領域から外し、hover/focusで案内 */
.credit-life-banner {
  position: relative;
  display: block;
  width: min(100%, 960px);
  max-width: none;
  margin: 34px auto 0;
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  transition: transform .2s ease;
  text-decoration: none;
}
.credit-life-banner__visual {
  display: block;
  width: 100%;
  aspect-ratio: 1983 / 710;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}
.credit-life-banner picture,
.credit-life-banner img { display: block; width: 100%; }
.credit-life-banner img {
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.credit-life-banner::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 6px);
  max-width: min(92vw, 520px);
  width: max-content;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(37,37,37,.94);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
@media (hover: hover) and (pointer: fine) {
  .credit-life-banner:hover::after,
  .credit-life-banner:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 600px) {
  .detail-panel__head { min-height: 66px; padding: 12px 90px 12px 12px; }
  .detail-panel__back { font-size: 11px; padding: 5px 9px; }
  .detail-panel__title { font-size: 19px; }
  .detail-panel__character { width: 80px; height: 88px; right: 4px; bottom: -18px; }
  .credit-life-banner { width: 100%; margin-top: 26px; border-radius: 14px; }
  .credit-life-banner__visual { aspect-ratio: 1536 / 900; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline::after { animation: none; display: none; }
  .slider-track { transition: none; }
}


/* ===== 2026-09-09 slider PC controls + timeline highlight fix ===== */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.38);
  color: #fff;
  font: 700 30px/1 sans-serif;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .78;
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}
.slider-nav--prev { left: 12px; }
.slider-nav--next { right: 12px; }
.slider-nav:hover,
.slider-nav:focus-visible {
  opacity: 1;
  background: rgba(0,0,0,.55);
  outline: none;
}
.slider-nav:active { transform: translateY(-50%) scale(.94); }

@media (min-width: 801px) {
  .slider-nav { display: inline-flex; }
}

/* タイムラインの光は「背景移動」ではなく、短い発光セグメント自体を走らせる */
.timeline { overflow: visible; }
.timeline::after {
  left: 37px;
  top: 40px;
  bottom: auto;
  width: 8px;
  height: 74px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.95) 30%,
    #9ff3df 52%,
    rgba(255,255,255,.95) 70%,
    rgba(255,255,255,0) 100%);
  box-shadow: 0 0 9px rgba(127,232,207,.95), 0 0 18px rgba(0,178,149,.52);
  animation: timeline-shine-y 3s ease-in-out infinite;
}
@keyframes timeline-shine-y {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(calc(100% + 210px)); opacity: 0; }
}

@media (min-width: 801px) {
  .timeline::after {
    left: 0;
    right: auto;
    top: 112px;
    width: 120px;
    height: 8px;
    background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.98) 30%,
      #9ff3df 52%,
      rgba(255,255,255,.98) 70%,
      rgba(255,255,255,0) 100%);
    box-shadow: 0 0 9px rgba(127,232,207,.98), 0 0 20px rgba(0,178,149,.58);
    animation: timeline-shine-x 3s ease-in-out infinite;
  }
  @keyframes timeline-shine-x {
    0%   { transform: translateX(-15%); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(calc(100vw - 240px)); opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline::after { display: none; animation: none; }
}

/* ===== 2026-09-09 final interaction refinement ===== */
/* 旧timeline疑似要素アニメーションを停止し、実体DOMでSTEP進行を見せる */
.timeline::after { content: none !important; display: none !important; animation: none !important; }
.timeline { overflow: visible; }
.timeline-progress {
  position: absolute;
  left: 39px;
  top: 40px;
  bottom: 40px;
  width: 4px;
  z-index: 1;
  pointer-events: none;
}
.timeline-progress__segment {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  transform-origin: top center;
  transform: scaleY(0);
  border-radius: 999px;
  background: linear-gradient(180deg, #d8fff5 0%, #64dfc1 52%, #00b295 100%);
  box-shadow: 0 0 8px rgba(0,178,149,.45);
}
.timeline-progress__segment--1 { top: 0; animation: timeline-pass-1 3s ease-in-out infinite; }
.timeline-progress__segment--2 { top: 50%; animation: timeline-pass-2 3s ease-in-out infinite; }

@keyframes timeline-pass-1 {
  0%, 8% { transform: scaleY(0); opacity: 0; }
  12% { opacity: 1; }
  38%, 100% { transform: scaleY(1); opacity: 1; }
}
@keyframes timeline-pass-2 {
  0%, 42% { transform: scaleY(0); opacity: 0; }
  46% { opacity: 1; }
  72%, 100% { transform: scaleY(1); opacity: 1; }
}

.t-step:nth-of-type(2) .t-node { animation: timeline-node-1 3s ease-in-out infinite; }
.t-step:nth-of-type(3) .t-node { animation: timeline-node-2 3s ease-in-out infinite; }
.t-step:nth-of-type(4) .t-node { animation: timeline-node-3 3s ease-in-out infinite; }

@keyframes timeline-node-1 {
  0%, 7% { box-shadow: 0 6px 16px rgba(0,50,40,.15); }
  10%, 16% { box-shadow: 0 0 0 6px rgba(168,224,207,.28), 0 0 18px rgba(0,178,149,.35); }
  22%, 100% { box-shadow: 0 6px 16px rgba(0,50,40,.15); }
}
@keyframes timeline-node-2 {
  0%, 39% { box-shadow: 0 6px 16px rgba(0,50,40,.15); }
  43%, 50% { box-shadow: 0 0 0 6px rgba(47,184,148,.24), 0 0 18px rgba(0,178,149,.38); }
  56%, 100% { box-shadow: 0 6px 16px rgba(0,50,40,.15); }
}
@keyframes timeline-node-3 {
  0%, 72% { box-shadow: 0 6px 16px rgba(0,50,40,.15); }
  76%, 84% { box-shadow: 0 0 0 6px rgba(0,119,106,.2), 0 0 18px rgba(0,119,106,.34); }
  92%, 100% { box-shadow: 0 6px 16px rgba(0,50,40,.15); }
}

/* 入力フォームCTAをポイント大きめに */
.gate-cta {
  max-width: 420px;
  padding: 19px 24px;
  font-size: 18px;
  letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(0,178,149,.12);
}
.gate-cta.active {
  background: linear-gradient(135deg, #00b295, #008f7a);
  box-shadow: 0 10px 24px rgba(0,178,149,.28);
}

@media (min-width: 801px) {
  .timeline-progress {
    left: 0;
    right: 0;
    top: 114px;
    bottom: auto;
    width: auto;
    height: 4px;
  }
  .timeline-progress__segment {
    top: 0;
    height: 100%;
    width: 50%;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, #d8fff5 0%, #64dfc1 52%, #00b295 100%);
  }
  .timeline-progress__segment--1 { left: 0; animation: timeline-pass-x-1 3s ease-in-out infinite; }
  .timeline-progress__segment--2 { left: 50%; animation: timeline-pass-x-2 3s ease-in-out infinite; }
  @keyframes timeline-pass-x-1 {
    0%, 8% { transform: scaleX(0); opacity: 0; }
    12% { opacity: 1; }
    38%, 100% { transform: scaleX(1); opacity: 1; }
  }
  @keyframes timeline-pass-x-2 {
    0%, 42% { transform: scaleX(0); opacity: 0; }
    46% { opacity: 1; }
    72%, 100% { transform: scaleX(1); opacity: 1; }
  }
}

@media (max-width: 480px) {
    #top{
    margin-top: 60px;
  }
  .timeline-progress { left: 31px; }
  .gate-cta { font-size: 17px; padding: 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-progress__segment,
  .t-node { animation: none !important; }
}

/* ===== 2026-09-09 node pulse timeline v6 ===== */
/*
   罫線は静止。
   STEP1→2→3はJSで順番に強めの「呼吸」アクション。
   PCではSTEP領域へのhoverでも、そのSTEPの円を明確に持ち上げる。
*/
.timeline::after,
.timeline-progress {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.t-step .t-node {
  animation: none !important;
  transform: translateY(0) scale(1);
  transform-origin: center center;
  will-change: transform, box-shadow, filter;
  transition:
    transform .24s cubic-bezier(.22,1,.36,1),
    box-shadow .24s ease,
    filter .24s ease;
}

/* 自動：STEP1 → STEP2 → STEP3 */
.t-step .t-node.node-breathe-active {
  animation: timeline-node-breathe-visible .92s cubic-bezier(.22,1,.36,1) 1 !important;
}

@keyframes timeline-node-breathe-visible {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 16px rgba(0,50,40,.15);
    filter: saturate(1);
  }
  32% {
    transform: translateY(-6px) scale(1.12);
    box-shadow:
      0 13px 30px rgba(0,90,70,.24),
      0 0 0 7px rgba(0,178,149,.10);
    filter: saturate(1.08);
  }
  58% {
    transform: translateY(-3px) scale(1.055);
    box-shadow:
      0 10px 23px rgba(0,75,60,.20),
      0 0 0 3px rgba(0,178,149,.06);
    filter: saturate(1.04);
  }
  76% {
    transform: translateY(-5px) scale(1.085);
    box-shadow:
      0 11px 26px rgba(0,82,65,.21),
      0 0 0 5px rgba(0,178,149,.075);
    filter: saturate(1.06);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 16px rgba(0,50,40,.15);
    filter: saturate(1);
  }
}

/* PC：ポインターをSTEP領域に合わせたときは、その円を保持して強調 */
@media (hover: hover) and (pointer: fine) {
  .t-step:hover .t-node {
    transform: translateY(-7px) scale(1.13);
    box-shadow:
      0 14px 32px rgba(0,85,68,.25),
      0 0 0 7px rgba(0,178,149,.10);
    filter: saturate(1.09);
  }

  /* 自動アニメーションとhoverがぶつかったらhoverを優先 */
  .t-step:hover .t-node.node-breathe-active {
    animation: none !important;
    transform: translateY(-7px) scale(1.13);
  }
}

/* 動きを減らすOS設定では自動移動は抑える。hoverは位置移動なしの拡大のみ。 */
@media (prefers-reduced-motion: reduce) {
  .t-step .t-node.node-breathe-active {
    animation: timeline-node-breathe-reduced .6s ease 1 !important;
  }

  @keyframes timeline-node-breathe-reduced {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
  }

  @media (hover: hover) and (pointer: fine) {
    .t-step:hover .t-node,
    .t-step:hover .t-node.node-breathe-active {
      animation: none !important;
      transform: scale(1.07);
    }
  }
}


/* ===== 2026-09-09 lightweight image pass v7 ===== */
.flow-section,
.gate-section,
.faq-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

img {
  max-width: 100%;
}

/* ===== 2026-09-09 v8: slider keeps each banner's native ratio ===== */
.slider-box {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.slider-track {
  display: flex;
  height: 100%;
  align-items: stretch;
}
.slider-track > img,
.slider-track > a {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  display: block;
}
.slider-track img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  aspect-ratio: auto;
}

/* ══ 中央大学生協 所定フッター ══ */
.coop-page-top-wrap { max-width: 1200px; margin: 52px auto 0; padding: 0 clamp(20px,5vw,48px) 34px; border-top: 1px solid rgba(0,0,0,.16); text-align: right; }
.coop-page-top { display: inline-block; margin-top: 28px; color: #00B295; font-size: 16px; font-weight: 700; text-decoration: none; }
.coop-page-top:hover { text-decoration: underline; }
.coop-foot { font-family: inherit; color: rgb(50,47,46); font-size: 14px; line-height: 1.5; background-image: url("https://www.chudai-seikyo.or.jp/re_img/common/bg.jpg"); background-repeat: repeat; padding: 21.6px 0 0; }
.coop-foot,.coop-foot * { box-sizing: border-box; }
.coop-foot a { color: rgb(50,47,46); text-decoration: none; }
.coop-foot__wrapper { width: min(486px,calc(100% - 54px)); margin: 0 auto; }
.coop-foot__wrap { margin: 0 0 35.1px; }
.coop-foot__info { margin: 0 0 22px; }
.coop-foot__logo { width: 194px; margin: 0 0 18px; }
.coop-foot__logo img { display: block; width: 100%; height: auto; }
.coop-foot__address { font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.coop-foot__links { font-size: 13px; line-height: 1.5; }
.coop-foot__link-item { display: inline-block; position: relative; font-size: 13px; line-height: 19.5px; background: #fff; margin: 0 8px 10px 0; padding: 3px 24px 3px 10px; border: 1px solid rgba(0,0,0,.1); border-radius: 50px; box-shadow: 2px 3px 0 rgba(0,0,0,.10); vertical-align: top; white-space: nowrap; }
.coop-foot__link-item::after { content: "›"; position: absolute; right: 10px; top: 50%; transform: translateY(-52%); color: #00B295; font-weight: 700; }
.coop-foot__sns-block { display: block; }
.coop-foot__sns-wrap { width: 360px; max-width: 100%; display: flex; margin: 0 0 15px; border-radius: 5px; overflow: hidden; box-shadow: 2px 3px 0 rgba(0,0,0,.08); }
.coop-foot__sns-head { width: 107px; min-height: 86.6667px; display: flex; align-items: center; justify-content: center; flex: 0 0 107px; }
.coop-foot__sns-wrap--line .coop-foot__sns-head { background: rgb(0,185,0); }
.coop-foot__sns-wrap--x .coop-foot__sns-head { background: rgb(29,139,215); }
.coop-foot__sns-head img { display: block; width: 78%; max-width: 84px; height: auto; }
.coop-foot__sns-body { width: 253px; display: flex; flex-wrap: wrap; background: #fff; }
.coop-foot__sns-item { width: 50%; min-height: 43.6667px; display: flex; align-items: center; position: relative; font-size: 12px; line-height: 18px; background: #fff; padding: 12px 24px 10px 18px; border-left: 1px solid rgba(0,178,149,.55); border-bottom: 1px solid rgba(0,178,149,.55); }
.coop-foot__sns-wrap--x .coop-foot__sns-item { border-left-color: rgba(29,139,215,.55); border-bottom-color: rgba(29,139,215,.55); }
.coop-foot__sns-item:nth-child(3),.coop-foot__sns-item:nth-child(4) { border-bottom: 0; }
.coop-foot__sns-item::after { content: "▶"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #00B295; font-size: 10px; font-weight: 700; }
.coop-foot__sns-wrap--x .coop-foot__sns-item::after { color: #1d8bd7; }
.coop-foot__app { display: flex; align-items: center; gap: 22px; margin: 22px 0 0; min-height: 100px; flex-wrap: nowrap; }
.coop-foot__app-main img { width: 100px; height: 100px; display: block; }
.coop-foot__store-badges { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; }
.coop-foot__store-badges img { width: 110px; height: auto; display: block; }
.coop-foot__bottom { background: #00B295; padding: 20px 0 40px; font-size: 12px; line-height: 18px; color: #fff; }
.coop-foot__bottom-inner { width: min(486px,calc(100% - 54px)); margin: 0 auto; }
.coop-foot__copyright { margin: 0 0 10px; }
.coop-foot__bottom-links { display: flex; flex-wrap: wrap; gap: 4px 0; }
.coop-foot__bottom-links a { color: #fff; font-size: 12px; margin: 0 22px 0 0; text-decoration: none; }
.coop-foot__bottom-links a::after { content: "↗"; margin-left: 6px; font-size: 10px; }
.coop-foot__bottom-links a:not(:first-child)::after { content: ""; margin: 0; }
@media (min-width: 768px) {
  .coop-foot__wrapper,.coop-foot__bottom-inner { width: min(1080px,calc(100% - 80px)); }
  .coop-foot__wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
  .coop-foot__info { flex: 1; margin-bottom: 0; }
  .coop-foot__sns-block { width: 520px; flex-shrink: 0; }
  .coop-foot__bottom-inner { display: flex; justify-content: space-between; gap: 24px; }
  .coop-foot__copyright { margin: 0; }
}
@media (max-width: 600px) {
  .coop-foot__wrapper,.coop-foot__bottom-inner { width: calc(100% - 32px); }
  .coop-foot__sns-wrap { width: 100%; }
  .coop-foot__sns-head { width: 96px; flex-basis: 96px; }
  .coop-foot__sns-body { width: calc(100% - 96px); }
  .coop-foot__sns-item { padding-left: 12px; padding-right: 20px; }
  .coop-foot__app { gap: 14px; flex-wrap: wrap; }
  .coop-foot__store-badges { gap: 10px; }
}


/* ===== 担当者チェック版：スライダー運用ルール =====
   画像名: slide-01.webp, slide-02.webp ...
   枚数・リンク: assets/js/slides.js
   表示比率: 628:418。画像は欠けない。
*/
.slider-box {
  width: 100%;
  aspect-ratio: 628 / 418;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
}
.slider-track > img,
.slider-track > a {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  display: block;
}
.slider-track img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}
.slider-nav[hidden], .slider-dots[hidden] { display: none !important; }