@font-face {
    font-family: 'Dela Gothic One';
    src: url('./font/Dela_Gothic_One/DelaGothicOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  } 
 
  :root{
    --bg: #1f1f27;
    --panel: #2a2a35;
    --text: #f2f2f5;
    --muted: rgba(242,242,245,.75);
    --muted2: rgba(242,242,245,.55);
    --accent: #f29a1a;
    --accent2: #ffb23a;
    --link: #4154cf;
    --shadow: 0 18px 50px rgba(0,0,0,.35);
    --radius: 18px;
    --radius2: 26px;
    --maxw: 980px;
  }
  
  *{ box-sizing: border-box; }
  html,body{ height: 100%; }
  body{
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
  }
  
  a{ color: inherit; text-decoration: none; }
  a:hover{ text-decoration: underline; }
  
  .hero{
    width: 100%;
    overflow: hidden;
    background: var(--bg);
    display: flex;
    flex-direction: column;
  }
  .hero__visual{
    position: relative;
  }
  .hero__img{
    width: 100%;
    height: clamp(220px, 34vw, 420px);
    object-fit: cover;
    display: block;
  }
  .hero__overlay{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 24px;
    background: rgba(0,0,0,.28);
  }
  .hero__title{
    width: min(21vw, 180px);
    height: auto;
    display: block;
  }
  
  .hero__subtitle{
    margin: 0;
    font-family: 'Dela Gothic One', system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.2;
  
    font-size: clamp(50px, 7.2vw, 89px);
  
    color: #ffffff;
    text-shadow: 0 6px 24px rgba(0,0,0,.45);
  }
  
  .header-logo{
    align-self: flex-start;
    padding: 14px 18px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
  }
  
  .header-logo img{
    height: 38px;
    width: auto;
    display: block;
  }

  /* スマホでは少し小さく */
  @media (max-width: 820px){
    .header-logo{
      top: 12px;
      left: 14px;
    }
    .header-logo img{
      height: 30px;
    }
  }
  
  .main{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 34px 16px 60px;
  }
  
  .intro{
    text-align: center;
    margin: 6px 0 22px;
  }
  .intro__lead{
    margin: 0 0 22px;
    color: var(--muted);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.9;
  }
  
  .toc{
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .toc__item{
    padding: 14px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--text);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .05em;
  }
  .toc__item:hover{
    background: rgba(255,255,255,.10);
    text-decoration: none;
  }
  
  .section{
    margin: 30px 0 0;
  }
  .section__title{
    margin: 0 0 12px;
    text-align: center;
    letter-spacing: .06em;
    font-size: 20px;
  }
  
  .panel{
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 18px;
  }
  .panel__text{
    margin: 0 0 14px;
    color: var(--muted);
    font-weight: 600;
  }

  .panel__text a{
    color: var(--link);
  }
  /* 利用規約トグルボタン */
  .terms-toggle{
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 14px 10px;
    cursor: pointer;
  
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .terms{
    margin: 0 0 40px 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
  }
  .terms-toggle__icon{
    font-size: 20px;
    transition: transform .5s ease;
  }
  
  /* 中身のラッパー：高さと透明度をアニメーション */
  .terms-content{
    overflow: hidden;
    height: auto;                 /* 開いている時 */
    opacity: 1;
    transition: height .5s ease, opacity .5s ease;
  }
  
  /* hidden の時（JSが hidden を付けた後に効く） */
  .terms-content[hidden]{
    display: block;               /* hidden属性のdisplay:noneを避ける */
    height: 0;
    opacity: 0;
  }
  
  .terms-content:not([hidden]){
    opacity: 1;
    height: auto;
  }
  
  /* 開いている時の見た目 */
  .terms-toggle[aria-expanded="true"] .terms-toggle__icon{
    transform: rotate(45deg); /* ＋ → × */
  }
  .terms__head{
    display: block;
    font-weight: 800;
    letter-spacing: .03em;
    margin-bottom: 2px;
  }
  .terms__body{
    display: block;
    color: var(--muted);
  }
  
  .card{
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--panel);
    box-shadow: var(--shadow);
  }
  .card--reverse{
    grid-template-columns: .95fr 1.05fr;
  }
  .card__media{
    background: #111;
    min-height: 280px;
  }
  .card__media img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .card__body{
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }
  .card__title{
    margin: 0;
    font-size: 22px;
    letter-spacing: .08em;
    font-weight: 900;
  }
  .card__meta{
    margin: 0;
    color: var(--muted2);
    font-weight: 700;
    letter-spacing: .03em;
  }
  .card__desc{
    margin: 0;
    color: var(--muted);
    font-weight: 650;
    font-size: 15px;
    line-height: 1.85;
  }
  
  .btn{
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    min-width: 210px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .02em;
    background: #ffb23a;
    color: #141018;
  }
  .btn:hover{
    text-decoration: none;
    filter: brightness(1.03);
  }
  .btn:active{
    transform: translateY(1px);
  }

  .btn__ready{
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    min-width: 210px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .02em;
    background: #1f1f27;
    color: #f2f2f5;
  }
  .btn__ready:hover{
    text-decoration: none;
    filter: brightness(1.03);
  }
  
  .footer{
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.10);
    text-align: center;
  }
  .footer__brand{
    margin: 0 0 6px;
    color: var(--muted2);
    font-weight: 800;
    letter-spacing: .06em;
  }
  .footer__links{
    font-size: 13px;
    color: var(--muted2);
  }
  .footer__sep{
    opacity: .7;
    margin: 0 8px;
  }
  
  @media (max-width: 820px){
    .card, .card--reverse{
      grid-template-columns: 1fr;
    }
    .card__media{
      min-height: 220px;
    }
    .main{
      padding: 26px 14px 52px;
    }
  }