@charset "utf-8";
/* ==========================================================
   DruModule トップページ
   ========================================================== */

/* ---- 書体
   Shippori Antique B1 / Copyright 2020 The Shippori Antique Project Authors
   SIL Open Font License 1.1 → assets/fonts/OFL.txt */
@font-face {
  font-family: "Shippori Antique B1";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/shippori-antique-b1-subset.woff2") format("woff2");
}

/* ---- 土台 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #14202f;
  font-family: "Shippori Antique B1", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Hiragino Sans", sans-serif;
}
a { text-decoration: none; color: inherit; }

/* ---- 三つの面 ---- */
.panels { display: flex; flex-direction: column; width: 100%; height: 100svh; }
.panels > * {
  position: relative; flex: 1 1 0; overflow: hidden; color: inherit;
  transition: flex-grow .9s cubic-bezier(.16, .84, .3, 1);
}
.panels > div { cursor: default; }

/* 数字 */
.num {
  position: absolute; left: -2vw; top: -7vh;
  font-size: 30vh; line-height: .72; letter-spacing: -.05em;
  opacity: .13; user-select: none; pointer-events: none;
}

/* アイコン */
.icon {
  position: absolute; width: 13vh; height: 13vh; right: 6vw; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  transition: transform .9s cubic-bezier(.16, .84, .3, 1);
}
.icon svg, .icon img { width: 100%; height: 100%; }
.icon img { object-fit: contain; }
.icon.off { opacity: .3; }

/* アプリ名 */
.label { position: absolute; left: 6vw; bottom: 2.5vh; }
.label b { display: block; font-size: 7vw; font-weight: 400; line-height: .9; letter-spacing: -.02em; }
.label i {
  display: block; width: 0; height: 5px; margin-top: 8px; background: currentColor;
  transition: width .9s cubic-bezier(.16, .84, .3, 1);
}

/* 準備中 */
.stamp {
  position: absolute; left: 6vw; top: 3vh;
  padding: 8px 6px; border: 2px solid currentColor; transform: rotate(9deg);
  font-size: 10px; letter-spacing: .34em; writing-mode: vertical-rl;
}

/* 矢印 */
.arrow { display: none; }

/* 質感 */
.grain {
  position: absolute; inset: 0; opacity: .22; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 案内 ---- */
.notice {
  position: fixed; right: 5vw; bottom: 2vh; z-index: 30;
  font-size: 11px; letter-spacing: .12em; color: #14202f; opacity: .42;
  transition: opacity .5s;
}
.notice:hover { opacity: 1; }

/* ---- 題字 ---- */
@property --cut { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
:root {
  --cut: 100%;
  --title-left: #fff6ec;
  --title-right: #8d9bad;
  transition: --cut .9s cubic-bezier(.16, .84, .3, 1);
}
.title {
  position: fixed; left: 0; top: 2.5vh; z-index: 30; width: 100%; margin: 0; padding: 0 6vw;
  font-size: 12vw; font-weight: 400; line-height: .85; letter-spacing: -.045em;
  user-select: none; pointer-events: none;
  background-image: linear-gradient(90deg, var(--title-left) 0 var(--cut), var(--title-right) var(--cut) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- 横に並ぶ画面 ---- */
@media (min-width: 768px) {
  .panels { flex-direction: row; }
  :root { --cut: 33.3333%; }
  .num { top: -9vh; font-size: 44vh; }
  .icon { width: 24vh; height: 24vh; right: auto; left: 50%; transform: translate(-50%, -50%); }
  .label { left: 2.2vw; bottom: 4vh; }
  .label b { font-size: 2.7vw; }
  .label i { height: 6px; margin-top: 20px; }
  .stamp { left: auto; right: 2.2vw; top: 6vh; padding: 12px 10px; border-width: 3px; font-size: 11px; }
  .arrow {
    display: block; position: absolute; right: 2.2vw; top: 6vh;
    font-size: 4vh; line-height: 1; opacity: 0; transition: opacity .7s;
  }
  .title { top: 8vh; padding: 0 2.2vw; font-size: 9.2vw; }
  .notice { right: 2.2vw; bottom: 2.6vh; }
}

/* ---- ホバー ---- */
@media (hover: hover) and (min-width: 768px) {
  .panels > a:hover { flex-grow: 1.9; }
  .panels > a:hover .icon { transform: translate(-50%, -50%) scale(1.1); }
  .panels > a:hover .label i { width: 42%; }
  .panels > a:hover .arrow { opacity: 1; }
  body:has(.panels > a:nth-child(1):hover) { --cut: 48.72%; }
  body:has(.panels > a:nth-child(3):hover) { --cut: 25.64%; }
}

/* ---- 読み込み時の動き ---- */
@keyframes rise { from { transform: translateY(102%); } to { transform: none; } }
@keyframes appear  { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.anim .panels > *  { animation: rise .9s cubic-bezier(.16, .84, .3, 1) both; }
.anim .panels > *:nth-child(2) { animation-delay: .1s; }
.anim .panels > *:nth-child(3) { animation-delay: .2s; }
.anim .title { animation: appear 1.1s .5s cubic-bezier(.16, .84, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .anim .panels > *, .anim .title { animation: none; }
  .panels > *, .icon, .label i, :root { transition: none; }
}