/* 最初の画面：左にハク、中央にコピー、右に縦長の動画 */
.mv, .intro > .heading { background-color: var(--paper); background-image: radial-gradient(rgba(10, 44, 85, .1) 1.4px, transparent 1.5px), linear-gradient(125deg, transparent 56%, rgba(10, 44, 85, .04) 56%, rgba(10, 44, 85, .04) 70%, transparent 70%); background-size: 16px 16px, 100% 100%; }
.mv-inner { width: min(1320px, 100%); grid-template-columns: minmax(0, 1fr) minmax(0, 470px) minmax(0, 300px); gap: 24px; align-items: stretch; padding: 22px 20px; }
.mv-visual { position: relative; height: auto; min-height: 560px; }
.mv-tag { left: 14%; top: 0; }
.mv-haku { position: absolute; left: 50%; bottom: -22px; width: min(112%, 500px); max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: translateX(-50%); filter: drop-shadow(0 12px 18px rgba(10, 44, 85, .2)); }
.mv-note { left: auto; right: 2%; top: 26px; }
.mv-sticker { left: 4%; bottom: 16px; }
.mv-copy { align-self: center; padding-bottom: 0; }
.mv-movie { position: relative; align-self: center; overflow: hidden; aspect-ratio: 9 / 16; background: #000; box-shadow: 0 16px 34px rgba(10, 44, 85, .28); }
.mv-movie video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mv-sound, .mv-pause { position: absolute; bottom: 10px; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 10px; background: rgba(0, 0, 0, .55); border: 0; border-radius: 18px; color: #fff; font: 700 12.5px/1 var(--sans); cursor: pointer; }
.mv-sound { right: 10px; }
.mv-pause { left: 10px; }
.mv-sound-icon { position: relative; width: 12px; height: 12px; background: #fff; clip-path: polygon(0 32%, 34% 32%, 100% 0, 100% 100%, 34% 68%, 0 68%); }
.mv-sound:not(.is-on) .mv-sound-icon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 44%, #e0342f 44%, #e0342f 56%, transparent 56%); }

/* 5本の帯：短い言葉と、せり上がる大きなスマホ */
.intro { padding-top: 0; }
.intro > .heading { padding-block: 34px 26px; }
.intro > .heading h2 { font-size: clamp(27px, 4.8vw, 56px); }
.cols { height: clamp(620px, 52vw, 800px); margin-top: 0; }
.col p { margin-top: 34px; font-size: clamp(24px, 2.5vw, 38px); font-weight: 900; line-height: 1.25; letter-spacing: .12em; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.col-bg { background: linear-gradient(var(--main) 58%, #fff 92%); }
.col:nth-child(even) .col-bg { background: linear-gradient(var(--sub) 50%, #fff 92%); }
.col img { width: 88%; border-width: 7px; border-radius: 30px; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.js .col.in img, html:not(.js) .col img { bottom: -42%; }
.col:nth-child(odd) img { transform: translateX(-50%) rotate(-2deg); }
.col:nth-child(even) img { transform: translateX(-50%) rotate(2deg); }

/* 現場まるごと（中央に大きく） */
.about { padding-bottom: 0; }
.ab { padding-inline: 20px; text-align: center; }
.ab .tags { justify-content: center; }
.about-h { font: 900 clamp(32px, 5.4vw, 58px)/1.35 var(--serif); }
.fan { display: flex; justify-content: center; width: min(720px, 100%); margin: 26px auto 0; }
.fan img { width: 34%; min-width: 0; background: #fff; border: 5px solid #15161a; border-radius: 20px; box-shadow: 0 14px 30px rgba(0, 0, 0, .28); }
.fan img:nth-child(1) { z-index: 1; margin-right: -9%; margin-top: 6%; transform: rotate(-7deg); }
.fan img:nth-child(2) { z-index: 2; }
.fan img:nth-child(3) { z-index: 1; margin-left: -9%; margin-top: 6%; transform: rotate(7deg); }
.about-tx { width: min(620px, 100%); margin: 26px auto 0; font-size: 15px; line-height: 2; }

/* 3枚：ひとことで言い切る */
.power-head { padding: 64px 20px 28px; text-align: center; }
.power-head h2 { font: 900 clamp(32px, 5.4vw, 62px)/1.3 var(--serif); }
.powers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.power { position: relative; overflow: hidden; min-height: clamp(700px, 58vw, 880px); padding: 40px 24px 0; background: linear-gradient(var(--sub) 60%, var(--paper) 96%); color: #fff; text-align: center; }
.power:nth-child(2) { background: linear-gradient(var(--main) 60%, var(--paper) 96%); }
.power-num { position: absolute; left: 14px; top: 2px; color: transparent; font: 900 clamp(70px, 8vw, 118px)/1 var(--serif); -webkit-text-stroke: 1.5px rgba(255, 255, 255, .4); }
.power-pre { position: relative; font: 700 clamp(19px, 2vw, 28px)/1.4 var(--serif); }
.power h3 { position: relative; color: var(--accent); font: 900 clamp(46px, 5.6vw, 84px)/1.2 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.power-line { position: relative; margin-top: 10px; color: #eef4f0; font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; line-height: 1.7; }
.power-phone { position: absolute; left: 50%; bottom: -36%; width: 76%; margin-left: -38%; background: #fff; border: 7px solid #15161a; border-radius: 30px; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.js .power-phone.rv.up { translate: 0 150px; transition-duration: 1s; }
.js .power-phone.rv.up.in { translate: 0 0; }

/* 機能（線のアイコン） */
.fa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.fa li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: 18px; background: var(--white); color: var(--ink); }
.fa svg { grid-row: span 2; width: 44px; fill: none; stroke: var(--main); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.fa b { font: 700 18px/1.4 var(--serif); }
.fa span { color: #444; font-size: 13.5px; line-height: 1.5; }

@media (max-width: 1080px) and (min-width: 761px) {
  .mv-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 340px) minmax(0, 200px); gap: 14px; }
  .mv-visual { min-height: 440px; }
  .col img { width: 94%; border-width: 5px; border-radius: 20px; }
  .col p { font-size: 22px; }
  .power { padding-inline: 12px; }
}

@media (max-width: 760px) {
  .mv-inner { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 12px; padding-top: 16px; }
  .mv-copy { grid-column: 1 / -1; grid-row: 1; }
  .mv-visual { min-height: 0; height: auto; align-self: stretch; }
  .mv-tag { left: 0; top: 0; }
  .mv-haku { left: 50%; bottom: 40px; width: 118%; }
  .mv-note { display: none; }
  .mv-sticker { left: 0; bottom: 4px; font-size: 13px; white-space: nowrap; }
  .mv-sticker b { font-size: 16px; }
  .mv-movie { align-self: start; }
  .mv-sound, .mv-pause { bottom: 6px; padding-inline: 8px; }
  .mv-sound { right: 6px; }
  .mv-pause { left: 6px; }

  .cols { display: block; height: auto; }
  .col { height: 270px; }
  .col p, .js .col p, .js .col.in p { left: 5%; top: 50%; width: 50%; margin: 0; font-size: 25px; line-height: 1.35; letter-spacing: .02em; word-break: auto-phrase; translate: 0 -50%; }
  .col-bg { background: linear-gradient(90deg, var(--main) 58%, #fff 104%); }
  .col:nth-child(even) .col-bg { background: linear-gradient(90deg, var(--sub) 58%, #fff 104%); }
  .col img, .js .col img, .js .col.in img, html:not(.js) .col img { left: auto; right: 5%; top: 26px; bottom: auto; width: 40%; border-width: 5px; border-radius: 20px; transform: rotate(3deg); }
  .col:nth-child(odd) img { transform: rotate(-3deg); }
  .col:nth-child(even) img { transform: rotate(3deg); }

  .power-head { padding-top: 44px; }
  .powers { grid-template-columns: minmax(0, 1fr); }
  .power { min-height: 620px; }
  .power h3 { font-size: 62px; }
  .power-line { font-size: 15px; }
  .power-phone { bottom: -24%; width: 68%; margin-left: -34%; }

  .fa { grid-template-columns: minmax(0, 1fr); }
}

/* 文字とスマホが重ならないように */
.col p { font-size: clamp(24px, 2.2vw, 34px); }
.js .col.in img, html:not(.js) .col img { bottom: -52%; }
.power { height: clamp(760px, 58vw, 900px); min-height: 0; }
.power-phone { position: relative; left: auto; bottom: auto; display: block; margin: 22px auto 0; }
@media (max-width: 1080px) and (min-width: 761px) {
  .col p { font-size: 22px; }
}
@media (max-width: 760px) {
  .col p, .js .col p, .js .col.in p { font-size: 25px; }
  .col img, .js .col img, .js .col.in img, html:not(.js) .col img { bottom: auto; }
  .power { height: 640px; }
  .power-phone { width: 68%; margin: 20px auto 0; }
}