@charset "UTF-8";
/* 展開カード（ピュアCSS）— SENWA色（温かみグレー #D9D8D3 / 文字#111 / アクセント#2B2B2B）
   元コンポーネント: Fatih YILDIZ。配色・文言をSENWA向けに調整。 */

:root{
  --c-text:#111111;
  --c-accent:#2B2B2B;
  --c-main:#D9D8D3;
}

/* レイアウト（背景・フォント・トークンは common.css） */
body{display:flex;align-items:center;justify-content:center}

/* CARDS CONTAINER — 全画面の90%（中央・枠付き） */
.cards{
  display:flex;flex-wrap:nowrap;width:90vw;height:90vh;overflow:hidden;
  border-radius:1rem;
  box-shadow:0 26px 70px rgba(17,17,17,.30),0 0 0 1px rgba(255,255,255,.6);
  white-space:nowrap;z-index:2;
}

/* CARD */
.card{flex:1 1 0;min-width:0;height:100%;cursor:pointer;transition:flex .5s ease;overflow:hidden;position:relative;will-change:flex}
.card:hover{flex:3;box-shadow:0 0 18px rgba(17,17,17,.45)}

.card a{display:block;width:100%;height:100%;text-decoration:none;color:inherit}

/* IMAGE — グレースケール→ホバーでカラー */
.card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease,filter .5s ease;
  filter:grayscale(100%) contrast(1.12) brightness(.95);will-change:transform,filter;
  background:linear-gradient(90deg,#cfcdc6 25%,#e4e2dc 50%,#cfcdc6 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.card:hover img{transform:scale(1.2);filter:grayscale(0%)}

/* OVERLAY */
.card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(17,17,17,.55),transparent 50%);
  opacity:0;transition:opacity .3s ease;z-index:1;pointer-events:none;
}
.card:hover::after{opacity:1}

/* SENWA 3D LETTER（立体テキスト・stacked text-shadow技法／SENWA色） */
.card-letter{
  position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;
  font-family:"Heebo","Lato",system-ui,sans-serif;font-weight:800;
  font-size:clamp(96px,11.5vw,210px);line-height:1;letter-spacing:.02em;
  color:rgba(214,216,218,.58);          /* 透明感のある面（画像が透ける） */
  text-shadow:
    -1px -1px 1px rgba(239,237,227,.55),
    0 1px 0 rgba(46,46,46,.9),0 2px 0 rgba(42,42,42,.88),0 3px 0 rgba(38,38,38,.85),
    0 4px 0 rgba(34,34,34,.82),0 5px 0 rgba(30,30,30,.8),0 6px 0 rgba(26,26,26,.78),
    0 7px 0 rgba(22,22,22,.75),0 8px 0 rgba(18,18,18,.72),0 9px 0 rgba(16,16,16,.7),
    0 10px 0 rgba(14,14,14,.66),
    2px 16px 12px rgba(0,0,0,.4),6px 22px 20px rgba(0,0,0,.25);
  transition:transform .5s ease,color .4s ease;
}
.card:hover .card-letter{color:rgba(232,233,234,.72);transform:translate(-50%,-50%) scale(1.07)}

/* TITLE — 3Dプレス風ボタン（superellipse） */
.card-title{
  --clr:#2B2B2B;--fg:#cfcdc6;
  position:absolute;top:64%;left:50%;transform:translate(-50%,-50%);
  color:var(--fg);background-color:var(--clr);
  background-image:linear-gradient(155deg,#d9d8d31f,#0002,#d9d8d32b);
  border:1px solid;border-width:.05em .05em .45em .05em;
  border-radius:50%;corner-shape:superellipse(1.5);
  padding:.55em 1.15em;font-size:1.05rem;font-weight:700;letter-spacing:.02em;
  box-shadow:0 .45em .45em color-mix(in srgb, color-mix(in srgb, var(--clr), var(--fg)), #0000);
  transition:color .3s ease,background-color .3s ease,transform .25s ease,border-width .15s linear,box-shadow .15s linear;
  z-index:2;white-space:nowrap;
}
.card:hover .card-title{--clr:#D9D8D3;--fg:#111111;transform:translate(-50%,-50%) scale(1.08)}
/* 日本語(通常) → ホバーで英語に切替 */
.card-title .t-en{display:none}
.card:hover .card-title .t-jp{display:none}
.card:hover .card-title .t-en{display:inline;font-family:"Heebo",sans-serif;letter-spacing:.04em}
.card:active .card-title{border-width:.05em .05em .2em .05em;box-shadow:0 .2em .3em #1f202050}

/* DESCRIPTION */
.card-desc{
  position:absolute;z-index:3;left:0;right:0;bottom:0;margin:0;
  transform:translateY(100%);transition:transform .3s ease;
  padding:.6rem 1rem;color:#fff;font-size:.9rem;line-height:1.6;white-space:normal;
  background:linear-gradient(to top,rgba(17,17,17,.82),transparent);
}
.card:hover .card-desc{transform:translateY(0)}

/* KEYBOARD A11Y */
.card a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.card a:focus-visible img{filter:grayscale(0%)}

/* MOBILE — 縦積みレイアウト（スマホ・大型スマホまで対応） */
@media (max-width:600px){
  body{display:block;padding-top:64px}            /* 固定ヘッダー分のクリアランス */
  .cards{flex-direction:column;flex-wrap:wrap;height:auto;width:94vw;margin:0 auto 24px;border-radius:14px}
  .card{flex:none;width:100%;height:280px}
  .card:hover{flex:none;box-shadow:0 0 15px rgba(17,17,17,.45)}
  .card::after{opacity:1}
  .card-letter{font-size:60px;top:26%}                 /* 小さめ＋上寄せでボタンと重ねない */
  .card-title{top:auto;bottom:40px;font-size:.95rem}   /* ボタンは下寄せ */
  .card-desc{position:absolute;bottom:0;transform:translateY(0);font-size:.82rem;padding:.45rem .9rem}
  .card img{filter:grayscale(100%) contrast(1.12) brightness(.95);animation:none}  /* スマホは白黒がベース */
  /* スクロールで上から順にカラー化（JSで is-active 付与） */
  .card.is-active img{filter:grayscale(0%) contrast(1) brightness(1);transition:filter .5s ease}
}
@media (max-width:600px) and (hover:none){
  .card:active{flex:none}
  .card:active img{transform:scale(1.05)}
}
/* MOBILE — めくりオーバーレイは全画面に */
@media (max-width:600px){
  .peel-overlay{perspective:1400px}
  .peel-stage{width:100vw;height:100vh;border-radius:0;
    transform:rotateX(40deg) rotateZ(-8deg) scale(.8)}
  .peel-overlay.open .peel-stage{transform:none}
  .is-peeled .cards{transform:none;filter:brightness(.55)}
  .peel-close{top:10px;right:10px}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  .card,.card img,.card-title,.card-desc,.card::after{transition:none}
  .card img{animation:none}
}

/* 3Dプレス風ボタン（superellipse）— 採用スタイル */
.cta-float{position:fixed;left:50%;bottom:4.2rem;transform:translateX(-50%);display:flex;gap:1rem;z-index:11}
.btn{
  --clr:#F7F6F2;--fg:#111111;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:.85em 1.7em;font-weight:700;font-size:1.05rem;font-family:inherit;
  color:var(--fg);background-color:var(--clr);
  background-image:linear-gradient(155deg,#fff2,#0002,#fff3);
  border:1px solid;border-width:.05em .05em .5em .05em;
  border-radius:50%;corner-shape:superellipse(1.5);
  cursor:pointer;position:relative;
  box-shadow:0 .5em .5em color-mix(in srgb, color-mix(in srgb, var(--clr), var(--fg)), #0000);
  transition:.18s linear;
}
.btn:active{border-width:.05em .05em .2em .05em;translate:0 .2em;box-shadow:0 .2em .3em #1f202050}
.btn-primary{--clr:#2B2B2B;--fg:#F7F6F2}
.btn-secondary{--clr:#D9D8D3;--fg:#111111}

@media (prefers-reduced-motion:reduce){.author-link{transition:none}}

/* ============ ページめくりオーバーレイ ============ */
.peel-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;perspective:2200px;pointer-events:none}
.peel-stage{
  position:relative;width:90vw;height:90vh;
  transform-origin:100% 100%;
  transform:rotateX(54deg) rotateZ(-15deg) scale(.7);opacity:0;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .5s ease;
  border-radius:14px;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.55);
}
.peel-overlay.open{pointer-events:auto}
.peel-overlay.open .peel-stage{transform:none;opacity:1}
.peel-frame{width:100%;height:100%;border:0;display:block;background:#f7f6f2}
.peel-close{
  position:absolute;top:12px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;
  border:none;cursor:pointer;font-size:22px;line-height:1;color:#111;
  background:rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(0,0,0,.2);transition:.25s;
}
.peel-close:hover{background:#fff;transform:scale(1.08)}

/* TOPを背景に退かせる */
.cards{transition:flex .5s ease,transform .65s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.is-peeled .cards{transform:scale(.92);filter:brightness(.55) saturate(.85)}
/* TOPヘッダーは退かせず固定（単一ヘッダーとして常に最前面） */