@charset "UTF-8";

/* =============================================================
   PicLive 秋の投稿キャンペーン LP
   Figma: UI仕様書 / autumnLP (node 26502-15120) 基準幅 440px
   -------------------------------------------------------------
   単位方針: 1rem = 10px（440px時）。440px未満はビューポートに
   連動して全体が等倍縮小するので、デザインの比率が崩れません。
   ============================================================= */

/* -------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------- */
:root {
  /* color */
  --c-bg:          #F9DCC2;
  --c-card:        #FDF3DD;
  --c-box:         #FFFFFF;
  --c-text:        #3F3F3F;
  --c-text-strong: #000000;
  --c-text-sub:    #6C6C6C;
  --c-accent:      #EA5513;
  --c-cta:         #E83514;
  --c-cta-alt:     #F37E17;

  /* 賞品カードの枠線色はブラシ線SVG（image/prizeN_frame.svg）に含まれる
     #C02103 / #A2333D / #F37E16 / #FFCC16 */

  /* typography */
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --lh-base: 1.45;

  /* layout */
  --lp-width: 44rem;   /* 440px */
  --gutter:   1.6rem;  /* 16px */
  --radius-card: 3rem;
  --radius-box:  1rem;
}

/* -------------------------------------------------------------
   2. Base / reset
   ------------------------------------------------------------- */
html {
  font-size: 2.272727vw;           /* 440px幅で 1rem = 10px */
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 440px) {
  html { font-size: 10px; }
}

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-jp);
  font-weight: 500;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; }
ul { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------
   3. Layout wrapper
   ------------------------------------------------------------- */
.lp {
  position: relative;
  width: 100%;
  max-width: var(--lp-width);
  margin-inline: auto;
  overflow: hidden;
  background: var(--c-bg);
}

/* -------------------------------------------------------------
   4. Button
   ------------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 2rem;
  border-radius: var(--radius-card);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: var(--lh-base);
  text-align: center;
  text-decoration: none;
  transition: opacity .2s ease;
}
.btn:hover,
.btn:focus-visible { opacity: .85; }

.btn--primary   { background: var(--c-cta); }
.btn--secondary { background: var(--c-cta-alt); }

/* -------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 6rem 0 3.7rem;
}

/* 背景の秋イラスト（Figma: y=200 / h=564 / opacity 40%） */
.hero__bg {
  position: absolute;
  top: 20rem;
  left: 0;
  width: 100%;
  height: 56.4rem;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-inline: var(--gutter);
}

/* 書き出し画像にドロップシャドウが含まれるため、はみ出し分を負マージンで相殺 */
.hero__logo {
  width: 42rem;
  max-width: none;
  margin: 0 -0.6rem;
}

.hero__title {
  margin-top: .9rem;   /* 画像下辺のシャドウ分10pxを差し引き（Figma 19px） */
  color: var(--c-text-strong);
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
}

.hero__lead {
  margin-top: 2.1rem;
  min-height: 12.5rem;  /* Figmaのテキストボックス高さ */
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.hero .btn { margin-top: 2rem; }

/* -------------------------------------------------------------
   6. Prizes
   ------------------------------------------------------------- */
.prizes {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 4rem var(--gutter) 0;
}

.prize {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 2.1rem;
}

.prizes p { margin-top: 1.5rem; text-align: center; font-size: 1.5rem; line-height: 1.5; }

/* カードの塗り＋枠線は Figma のブラシ線（Melodrama）をそのまま SVG で書き出したもの。
   カードごとに高さが違うため 4 枚を個別に用意し、preserveAspectRatio="none" で
   カードサイズにフィットさせている。inset の負値はブラシが枠外へはみ出す分。 */
.prize::before {
  content: "";
  position: absolute;
  inset: -.25rem -.2rem;
  z-index: 0;
  background: var(--prize-frame) no-repeat center / 100% 100%;
  pointer-events: none;
}
.prize > * { position: relative; z-index: 1; }

.prize--1 { --prize-frame: url("../image/prize1_frame.svg"); }
.prize--2 { --prize-frame: url("../image/prize2_frame.svg"); }
.prize--3 { --prize-frame: url("../image/prize3_frame.svg"); }
.prize--4 { --prize-frame: url("../image/prize4_frame.svg"); }

.prize__logo          { width: 34.8rem; }
.prize__logo--narrow  { width: 28rem; }

.prize__count {
  color: var(--c-accent);
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
}
.prize__label {
  color: var(--c-text);
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
}

.prize__amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 7rem;
}
.prize--4 .prize__amount { justify-content: center; }

.prize__illust      { flex: none; }
.prize__illust--sm  { width: 6.4rem; }
.prize__illust--lg  { width: 7rem; }

.prize__price {
  color: var(--c-text);
  font-weight: 700;
  white-space: nowrap;
}
.prize__num { font-size: 6.4rem; line-height: 7rem; }
/* line-height:1 にしてもベースライン揃えのため見た目は変わらず、
   行ボックスの高さだけが Figma と同じ 70px に収まる */
.prize__yen { font-size: 4rem;   line-height: 1; }

/* -------------------------------------------------------------
   7. Section title
   ------------------------------------------------------------- */
.section-title {
  color: var(--c-text);
  font-size: 2.1rem;
  font-weight: 700;
  text-align: center;
}

/* -------------------------------------------------------------
   8. 応募方法
   ------------------------------------------------------------- */
.entry { padding: 2.2rem var(--gutter) 0; }

.entry__box {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius-box);
  background: var(--c-box);
  color: var(--c-text);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.7;   /* Figmaのauto行送り（27px）に合わせる */
}
.entry__box--period { text-align: center; }

/* -------------------------------------------------------------
   9. CTA group / 装飾バンド
   ------------------------------------------------------------- */
.cta-group {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 4.2rem var(--gutter) 0;
}

.band {
  margin-top: 4.5rem;
  opacity: .7;
  pointer-events: none;
}
.band img { width: 100%; }

/* -------------------------------------------------------------
   10. 応募規約ほか注意書き
   ------------------------------------------------------------- */
.terms { padding: 3rem var(--gutter) 0; }

.notes,
.notes-text {
  color: var(--c-text-sub);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
}

.notes {
  margin-top: 2.5rem;
  padding-left: 1.95rem;
  list-style: disc;
}

.terms__group { margin-top: 4rem; }
.terms__group .notes-text { margin-top: 2rem; }
.terms__group .notes      { margin-top: 2rem; }

/* -------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
  width: 34rem;
  max-width: 100%;
  margin: 5.7rem auto 0;
  padding-bottom: 4rem;
  color: var(--c-text);
  font-weight: 400;
  text-align: center;
}

.site-footer__logo { width: 34rem; max-width: 100%; }

.site-footer__tagline   { font-size: 1.6rem; }
.site-footer__copyright { font-size: 1.6rem; }

.site-footer__company {
  font-size: 1.6rem;
  line-height: 1.5;
}
.site-footer__link { text-decoration: underline; }

.site-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
}
.site-footer__row {
  display: flex;
  align-items: center;
  list-style: none;
}
.site-footer__row--between {
  width: 17.7rem;
  justify-content: space-between;
}
.site-footer__row--center {
  justify-content: center;
  gap: 2.3rem;
}
.site-footer__row a { text-decoration: none; }
.site-footer__row a:hover,
.site-footer__row a:focus-visible { text-decoration: underline; }

/* -------------------------------------------------------------
   12. PC表示時の装飾
   ------------------------------------------------------------- */

/* 画面に余白が出る幅から、背景を水彩イラストに差し替える。
   中央のLP（.lp）は #F9DCC2 のままなので、スマホ表示には影響しない。 */
@media (min-width: 560px) {
  /* background-attachment:fixed は iOS Safari で背景がページ全高に
     引き伸ばされる不具合があるため、固定した擬似要素で代用する。 */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("../image/background.png") center / cover no-repeat;
  }
}

/* 左右の装飾はスマホ・タブレットでは出さない */
.pc-deco { display: none; }

@media (min-width: 1240px) {
  .pc-deco {
    position: fixed;                /* 画面に追従。中央のLPだけがスクロールする */
    top: 50%;
    transform: translateY(-50%);
    width: calc((100% - var(--lp-width)) / 2);   /* LPの左右に残る余白ぶん */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
  }
  .pc-deco--left  { left: 0; }
  .pc-deco--right { right: 0; gap: 3rem; }

  /* 幅は上限つきの % 指定。1240px では少し小さく、1600px 以上で原寸になる */
  .pc-deco__logo    { width: min(400px, 80%); height: auto; }
  .pc-deco__heading { width: min(314px, 78%); height: auto; }
  .pc-deco__qr      { width: min(200px, 50%); height: auto; }

  .pc-deco__map {
    width: min(305px, 76%);
    margin-top: 9rem;               /* gap 3rem と合わせて Figma の 120px */
    transition: opacity .2s ease;
  }
  .pc-deco__map img { width: 100%; height: auto; }
  .pc-deco__map:hover,
  .pc-deco__map:focus-visible { opacity: .85; }
}

/* 背景画像の読み込みを待たずに読めるよう、モーション配慮も兼ねて */
@media (prefers-reduced-motion: reduce) {
  .btn, .pc-deco__map { transition: none; }
}