:host{ --ink:#e2ddd2; --dim:#6f6a61; --rule:#22232a; }
  *{box-sizing:border-box;margin:0;padding:0}
  
  :host{
    background:transparent;color:var(--ink);
    font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Times New Roman",serif;
    /* hostをスクロール容器にすると、元のsticky演出が画面上端に固定されなくなる。 */
    -webkit-font-smoothing:antialiased;overflow-x:clip;
  }

  #bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}

  /* 全面グレイン */
  #grain{
    position:fixed;inset:-80px;z-index:50;pointer-events:none;
    mix-blend-mode:overlay;opacity:.55;
    background-repeat:repeat;background-size:240px 240px;
    image-rendering:pixelated;
  }

  .pad{
    position:relative;z-index:1;height:74vh;display:grid;place-items:center;
    color:var(--dim);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
    font-family:"Helvetica Neue",Inter,system-ui,sans-serif;
  }

  .cellar{position:relative;z-index:1}
  .stage{
    position:sticky;top:0;height:100vh;
    display:grid;place-items:center;z-index:2;pointer-events:none;
  }
  #card{display:block;width:clamp(220px,31vw,430px);height:auto}

  /* テキストはオブジェクトの上を流れる */
  .flow{position:relative;z-index:3;margin-top:-100vh;padding:190vh 0 140vh}

  .block{width:min(700px,86vw);margin:0 auto;padding:11vh 0;text-align:center}
  .ln{display:block;line-height:2.4;letter-spacing:.14em}
  .ch{display:inline-block;will-change:transform,opacity}

  /* 見出しはフローから外し、オブジェクトの上部に固定してフェードさせる */
  .lead-pin{
    position:absolute;left:50%;top:26%;
    transform:translate(-50%,-50%);
    width:min(94vw,1000px);text-align:center;
    opacity:0;z-index:3;pointer-events:none;
  }
  .lead-pin .ln{
    display:block;
    color:var(--ink);
    will-change:transform;
    font-size:clamp(30px,5.6vw,62px);
    line-height:1.5;letter-spacing:.2em;
  }
  .body .ln{color:var(--ink);font-size:22px}
  .close .ln{font-size:clamp(17px,2.2vw,26px);line-height:1.95;letter-spacing:.19em}
  .close .ln.sub{
    font-size:15px;line-height:2.3;letter-spacing:.16em;
    margin-top:0;
    margin-bottom: 2em;
  }

  /* パネル */
  .toggle{
    position:fixed;right:18px;top:18px;z-index:61;
    font-family:"Helvetica Neue",Inter,system-ui,sans-serif;
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    background:rgba(12,12,15,.9);color:var(--ink);
    border:1px solid var(--rule);padding:9px 13px;cursor:pointer;backdrop-filter:blur(8px);
  }
  .toggle:hover{border-color:#4a4c57}
  .panel{
    position:fixed;right:0;top:0;height:100vh;width:288px;z-index:60;
    background:rgba(10,10,13,.96);backdrop-filter:blur(14px);
    border-left:1px solid var(--rule);padding:64px 24px 40px;overflow-y:auto;
    transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);
    font-family:"Helvetica Neue",Inter,"Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  }
  .panel.open{transform:none}
  .gt{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
    margin:22px 0 14px;padding-top:18px;border-top:1px solid var(--rule)}
  .gt:first-child{border-top:0;padding-top:0;margin-top:0}
  .row{margin-bottom:14px}
  .row label{display:flex;justify-content:space-between;align-items:baseline;
    font-size:11px;letter-spacing:.05em;margin-bottom:6px}
  .row label span{font-variant-numeric:tabular-nums;font-size:10px;color:var(--dim)}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;background:transparent;cursor:pointer}
  input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--rule)}
  input[type=range]::-moz-range-track{height:1px;background:var(--rule)}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
    width:8px;height:8px;border-radius:50%;background:#9aa4b0;margin-top:-3.5px}
  input[type=range]::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:#9aa4b0}
  select{
    width:100%;background:#141419;color:var(--ink);border:1px solid var(--rule);
    padding:7px 8px;font:inherit;font-size:11px;cursor:pointer;
  }
  input[type=color]{
    width:100%;height:28px;background:transparent;border:1px solid var(--rule);
    padding:2px;cursor:pointer;
  }
  .check{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.05em;cursor:pointer}
  .check input{accent-color:#9aa4b0;width:13px;height:13px;cursor:pointer}
  .panel button,.panel .filebtn{
    width:100%;font:inherit;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink);background:transparent;border:1px solid var(--rule);
    padding:10px;cursor:pointer;text-align:center;margin-top:8px;display:block}
  .panel button:hover,.panel .filebtn:hover{border-color:#4a4c57}
  .filebtn input{display:none}

  @media (max-width:760px){ #grain{opacity:.4} .flow{padding:150vh 0 120vh} .body .ln{font-size:17px} }

:host{display:block;}

:host{position:relative;z-index:10;margin-top:-100vh;opacity:0;}


/* ==== 下線付き汎用リンク / c-primary-btn ==== */
.c-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    min-width: 10em;
    padding: .55em 0;
    border-bottom: 1px solid currentColor;
    color: var(--ink);
    font-family: var(--font-family01);
    font-size: var(--font-size18);
    line-height: 1.5;
    letter-spacing: .08em;
    transition: opacity .3s ease;
    opacity: .4;
}

.c-primary-btn:hover {
    opacity: .65;
}

.c-primary-btn__arrow {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.5em;
    height: 1.5em;
    mask: url('/wp-content/uploads/icon-usagi.svg') center / contain no-repeat;
    background-color: var(--ink);
}

.c-primary-btn__arrow::before,
.c-primary-btn__arrow::after {
    content: none;
}
a {
  text-decoration: unset;
}