:root {
  color-scheme: light;
  --blue: #2182cc;
  --blue-strong: #1454af;
  --sky: #cce4fc;
  --yellow: #fecb4e;
  --ink: #16202b;
  --paper: #fffefa;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  place-items: center;
  background: #f5f6f7;
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cards {
  display: grid;
  width: min(1856px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 84px;
  padding: 32px;
}

.card {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 44 / 25;
  overflow: hidden;
  background: var(--paper);
  box-shadow:
    0 22px 50px rgb(22 32 43 / 11%),
    0 3px 10px rgb(22 32 43 / 6%);
}

.card-front {
  isolation: isolate;
}

.role {
  position: absolute;
  z-index: 2;
  top: 20.5%;
  left: 8.1%;
  margin: 0;
  color: var(--blue-strong);
  font-size: 2.6cqw;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.identity {
  position: absolute;
  z-index: 2;
  top: 43%;
  left: 8.1%;
}

.identity h1 {
  margin: 0;
  color: var(--ink);
  font-size: 4.8cqw;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.075em;
}

/* 長い名前用: 右上の図形にかからないよう縮める */
.identity--long h1 {
  font-size: 3.9cqw;
  letter-spacing: 0.04em;
}

.roman-name {
  margin: 1.4cqw 0 0;
  color: var(--ink);
  font-size: 2.95cqw;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.045em;
}

.contact {
  position: absolute;
  z-index: 2;
  bottom: 20.5%;
  left: 8.1%;
  display: grid;
  gap: 0.8cqw;
  margin: 0;
  font-style: normal;
}

.contact a {
  width: fit-content;
  color: var(--ink);
  font-size: 2.45cqw;
  line-height: 1.35;
  font-weight: 500;
  text-decoration: none;
}

.website-row {
  position: relative;
  width: fit-content;
}

.qr {
  position: absolute;
  z-index: 3;
  top: 0.8cqw;
  left: calc(100% + 3.8cqw);
  display: block;
  width: 7.7cqw;
  height: auto;
  aspect-ratio: 1;
  background: #fff;
  image-rendering: pixelated;
}

.shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.sun {
  top: -11%;
  right: -7%;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fedb71 0%, var(--yellow) 68%, #f4b832 100%);
}

.hill {
  right: 0;
  bottom: -19%;
  width: 39%;
  height: 65%;
  border-radius: 54% 46% 0 0 / 49% 44% 0 0;
  background: linear-gradient(145deg, #2690da 4%, var(--blue) 55%, #1670bc 100%);
}

.arch {
  right: 26%;
  bottom: -15%;
  width: 24%;
  height: 48%;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  background: linear-gradient(150deg, rgb(225 239 254 / 94%), rgb(170 207 248 / 90%));
}

.card-back {
  display: grid;
  place-items: center;
}

.brand {
  width: 35%;
  height: auto;
}

.splash {
  display: none;
}

@keyframes splash-logo-in {
  from {
    opacity: 0;
    transform: rotate(var(--splash-rotation, 0deg)) scale(0.86);
  }

  to {
    opacity: 1;
    transform: rotate(var(--splash-rotation, 0deg)) scale(1);
  }
}

@keyframes splash-out {
  to {
    visibility: hidden;
    opacity: 0;
  }
}

@keyframes card-reveal {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 780px) {
  .cards {
    width: min(620px, 100%);
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px;
  }

  .card {
    box-shadow:
      0 16px 36px rgb(22 32 43 / 10%),
      0 2px 8px rgb(22 32 43 / 5%);
  }
}

/* 画面の短辺が600px以下: 表面だけをスプラッシュ付きで表示 */
@media screen and (max-width: 600px), screen and (max-height: 600px) {
  .cards {
    width: min(620px, 100%);
    grid-template-columns: 1fr;
    gap: 0;
    padding: 16px;
  }

  .card-back {
    display: none;
  }

  .card-front {
    animation: card-reveal 650ms cubic-bezier(0.22, 1, 0.36, 1) 1250ms both;
  }

  .splash {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--paper);
    animation: splash-out 450ms ease 1150ms forwards;
  }

  .splash-logo {
    display: block;
    width: min(52vw, 240px);
    height: auto;
    animation: splash-logo-in 600ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
  }
}

@media screen and (max-width: 780px) and (max-aspect-ratio: 1 / 1) {
  body {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  .cards {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vh;
    width: 100svh;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }

  @media screen and (max-width: 600px), screen and (max-height: 600px) {
    .splash-logo {
      --splash-rotation: 90deg;
    }

    .cards {
      width: min(620px, 100vh);
      width: min(620px, 100svh);
      grid-template-columns: 1fr;
      gap: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @media screen and (max-width: 600px), screen and (max-height: 600px) {
    .splash {
      animation-delay: 350ms;
      animation-duration: 1ms;
    }

    .splash-logo {
      opacity: 1;
      transform: rotate(var(--splash-rotation, 0deg));
      animation: none;
    }

    .card-front {
      opacity: 1;
      transform: none;
      animation: none;
    }
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 15mm;
  }

  body {
    display: block;
    min-height: auto;
    background: #fff;
  }

  .cards {
    display: flex;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 10mm;
    padding: 0;
  }

  .card {
    width: 91mm;
    height: 55mm;
    flex: none;
    box-shadow: none;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/*
 * コンテナクエリ非対応ブラウザ(iOS 15 以前など)向けのフォールバック。
 * --u に「カード幅の 1%」をレイアウトごとに計算して入れ、cqw の代わりに使う。
 * 対応ブラウザではこのブロックは読まれない。
 */
@supports not (container-type: inline-size) {
  /* PC: 2列 (padding 32px × 2, gap 84px) */
  .card {
    --u: calc((min(1856px, 100vw) - 148px) / 200);
  }

  /* 1列 (padding 16px × 2) */
  @media (max-width: 780px) {
    .card {
      --u: calc((min(620px, 100vw) - 32px) / 100);
    }
  }

  @media screen and (max-width: 600px), screen and (max-height: 600px) {
    .card {
      --u: calc((min(620px, 100vw) - 32px) / 100);
    }
  }

  /* 縦長画面で90度回転: 幅の基準が vh になる */
  @media screen and (max-width: 780px) and (max-aspect-ratio: 1 / 1) {
    .card {
      --u: calc((100vh - 52px) / 200);
    }

    @media screen and (max-width: 600px), screen and (max-height: 600px) {
      .card {
        --u: calc((min(620px, 100vh) - 32px) / 100);
      }
    }
  }

  @media print {
    .card {
      --u: 0.91mm;
    }
  }

  .role {
    font-size: calc(2.6 * var(--u));
  }

  .identity h1 {
    font-size: calc(4.8 * var(--u));
  }

  .identity--long h1 {
    font-size: calc(3.9 * var(--u));
  }

  .roman-name {
    margin-top: calc(1.4 * var(--u));
    font-size: calc(2.95 * var(--u));
  }

  .contact {
    gap: calc(0.8 * var(--u));
  }

  .contact a {
    font-size: calc(2.45 * var(--u));
  }

  .qr {
    top: calc(0.8 * var(--u));
    left: calc(100% + 3.8 * var(--u));
    width: calc(7.7 * var(--u));
  }
}