@charset "utf-8";
/* ============================================================
   style.css ― 案件別スタイル【このファイルを編集する】
   20260821【HM東北】お子様ぬりえコンクール 店長賞発表LP
   共通スタイルは base.css / destyle.css（編集禁止）。
   ============================================================ */

/*変数上書き ======================================
デザイン基準幅 1500px。ぬりえ一覧のコンテンツエリアは実測1210px。
--headerH は固定ヘッダーの実効高（ロゴ 1300x124・上下padding10px）。
=================================================*/
body {
  /* LP全体(container)の最大幅。前回(BKUP)と同じ840pxに絞る */
  --container-width: 840px;
  /* コンテンツエリア(content)の最大幅 */
  --content-width: 840px;
}

/*base     ======================================
このLPの背景色・基本色など
=================================================*/
body {
  /* container(840px)の外側の色。前回(BKUP)と同じ */
  background: #d3edfb;
}

/*==========================================
 ヘッダー（黒帯ロゴ 1500×202 に合わせた固定ヘッダー）
 背景色は支給ロゴの帯色の実測値。画面幅がcontainer(840px)を
 超えたときに帯が途切れないよう、同じ色で全幅に伸ばす。
 ロゴは w500（max-width:500px・中央寄せ）＝ヘッダーの実効高は
 min(container幅, 500px) × 202/1500。下の .main / .lp_bg__sky の
 min() の 67.34px はこの 500 × 202/1500 と一致させている。
===========================================*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  background: #231815;
}

/*==========================================
 背景（支給アートボードを上部＋波帯1周期に分割して敷く）
 ・container(840px)の幅に合わせて中央に敷く。外側は body の #d3edfb
 ・波帯は周期1825pxで完全にループするため repeat-y で県ごとの枚数差に追従
 ・縦の寸法はすべて container 幅に対する%（デザイン基準1500px換算）
===========================================*/
body {
  position: relative;
}

.wrap {
  min-height: 100vh;
}

/* .container と併用して幅を --container-width に揃える（margin:autoで中央寄せ） */
.lp_bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
}

/* 固定ヘッダーの高さ ＋ その下の空の余白(47/1500) */
.lp_bg__sky {
  padding-top: calc(min(13.4667%, 67.34px) + 3.1333%);
  background: #00afe5;
}

/* 空〜雲〜ポリゴン（1500×1581） */
.lp_bg__top {
  padding-top: 105.4%;
  background: url(../images/0_bg_top.webp) center top / 100% auto no-repeat;
}

/* 波帯1周期（1500×1825）をループ */
.lp_bg__wave {
  flex: 1 0 auto;
  background: url(../images/0_bg_wave.webp) center top / 100% auto repeat-y;
}

.main {
  position: relative;
  z-index: 1;
  /* 固定ヘッダーの高さ分。ロゴは 1500×202 で max-width:500px なので
     min(container幅の13.4667%, 500px×202/1500 = 67.34px) */
  padding-top: min(13.4667%, 67.34px);
  /* デザイン実測 244/1500 */
  padding-bottom: 16.2667%;
}

/*component =====================================
サイト内で何度も使いまわしたいもの
=================================================*/
/* ぬりえカード・お名前プレートの影（base.cssの .shadow より濃い指定） */
.shadow--nurie {
  filter: drop-shadow(4px 5px 8px rgba(0, 0, 0, .25));
}

/*contents  ======================================
各コンテンツごとの設定（余白はデザイン実測値／1500px基準の%）
=================================================*/

/* メインビジュアル：夏の感謝祭は白帯に21pxかぶせる（-21/1500） */
.lp_mv {
  margin-top: -1.4%;
}

/* 店長賞発表ブロック（14/1500） */
#tencho {
  padding-top: 0.9333%;
}

/* ぬりえ一覧（13/1500） */
#nurie {
  padding-top: 0.8667%;
}

/* カード幅 565/1210・段間 44/1210 */
.nurie__item {
  width: 46.6942%;
  margin-bottom: 3.6364%;
}

.nurie__img {
  cursor: pointer;
}

/* ぬりえ↔お名前プレート間 26/565 */
.nurie__name {
  margin-top: 4.6018%;
}

/* COMING SOON */
.coming {
  padding: 9% 0 12%;
  font-weight: 900;
  font-size: clamp(20px, 2.8vw, 42px);
  letter-spacing: .06em;
  text-shadow: 0 2px 6px rgba(0, 72, 120, .35);
}

/*ぬりえ拡大表示 =================================*/
.nuriePop__wall {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 980;
  background: rgba(0, 0, 0, .6);
}

.nuriePop {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 990;
  width: 92%;
  max-width: 900px;
  transform: translate(-50%, -50%);
}

.nuriePop__inner {
  position: relative;
}

.nuriePop__img img {
  pointer-events: none;
  box-sizing: border-box;
}

/* 閉じるボタンのサイズは前回(BKUP)と同じ。
   BKUPは html の font-size 指定なし(1rem=16px)、base.css は 62.5%(1rem=10px)なので
   BKUPのrem値を1.6倍して実寸を合わせている（BKUP: font-size 1.5rem=24px / top -24px / right -16px） */
.nuriePop__close {
  cursor: pointer;
  position: absolute;
  top: -2.4rem;
  right: -1.6rem;
  z-index: 999;
  margin: 0;
  width: 4.8rem;
  height: 4.8rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #75c9f7;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 4.4rem;
}

/*footer ========================================
このLPはフッター表示なし（デザインどおり）。
base.cssは1000px以上で #page_top を position:relative に
切り替えるため、フッターに白帯が出ないよう fixed に戻す。
=================================================*/
@media all and (min-width:1000px) {
  #page_top {
    position: fixed;
    right: 10px;
    bottom: 20px;
    left: auto;
  }
}

/* base.css は 700px未満で bottom:21vw（＝画面下の追従CTAを避けるための逃げ）。
   このLPには追従ボタンが無いので、SPでも下端ギリギリに置く */
@media all and (max-width:699px) {
  #page_top {
    bottom: 10px;
  }
}

/*===============================================
 SP（768px以下）：ぬりえは1カラム
===============================================*/
@media screen and (max-width:768px) {
  .nurie__item {
    width: 100%;
    margin-bottom: 6%;
  }

  .nurie__name {
    margin-top: 2.6%;
  }

  /* BKUP SP: top -20px / right -12px / font-size 5.5vw 相当 */
  .nuriePop__close {
    top: -2rem;
    right: -1.2rem;
    width: 3.8rem;
    height: 3.8rem;
    font-size: 2rem;
    line-height: 3.4rem;
  }
}