@charset "UTF-8";

/* ========================================================
                      * Variable *
===========================================================
  単位システム（coding-guidelines.md 1章参照 / SP特化型）
  - SP特化型部分       : calc(N * var(--rem))
  - PC左右装飾         : calc(N * var(--rem-pc))
  - line-height        : 単位なし / letter-spacing : em

  本件: SP=390 / PC=1440。--artboard-pw=390（PC上でもSPを実寸で流す）。
  ≥1440px はデザイン実寸で固定（中央390px・左右525px）。
========================================================= */
:root {
  --pw: 1440; /* PC幅 */
  --sw: 390; /* SP幅 */
  --artboard-pw: 500; /* PC上でSPレイアウトを表示する幅 */
  --artboard-sw: 390; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  --ratio: 1;
  --variable: calc(100vw / var(--sw));
}

@media (min-width: 769px) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}

@media (min-width: 1440px) {
  :root {
    --variable: 1px; /* デザイン実寸で固定 */
  }
}

/* ========================================================
                      * Design Token *
========================================================= */
.p-feature {
  --base-font-color: #212121;
  --color-accent: #b52024;

  --lp-font-ja: "Noto Sans JP", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: "Jost", "Noto Sans JP", Verdana, Helvetica, Arial, sans-serif;

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --letter-spacing: .08em;

  /* colors */
  --bg: #fefeec;       /* ページ全体のメイン背景（Figma変数 background） */
  --bg-about: #f7f7cf; /* 吹き出し(about)セクションの帯（Figma変数 bg） */
  --red: #b52024;
  --yellow: #e3e16d;
  --green: #bedeb0;
  --olive: #bdbd2d;
  --sub: #888;
  --btn-green: #416f2c;
}

/* ========================================================
                      * Reset (LPスコープ内) *
========================================================= */
.lp_contents {
  position: relative;
  display: flex;
  justify-content: center;
  background: #F6F6DA;
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  font-style: normal;
  letter-spacing: var(--letter-spacing);

  & * {
    font-feature-settings: "palt";
  }

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

  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup, b) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }

  & ul,
  & li {
    list-style: none;
  }

  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }

  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }

  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition: opacity var(--duration) var(--timing), color var(--duration) var(--timing), background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
  }

  & :where(a) {
    color: inherit;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* プレビュー用：ページ背景（本番はマスターページが出力。aspx化時に扱いを確認） */
body {
  margin: 0;
}

#Wrap{
  width: 100%;
}

#Contents {
  background: var(--bg, #fefeec);
}

/* ========================================================
                      * Utility *
===========================================================
  u-d-lg : PC(769px以上)のみ表示 / u-d-md : SP(768px以下)のみ表示
========================================================= */
.lp_contents {
  & .u-d-lg {
    @media (max-width: 768px) {
      display: none !important;
    }
  }

  & .u-d-md {
    @media (min-width: 769px) {
      display: none !important;
    }
  }
}

/* ========================================================
                      * Layout *
===========================================================
  SP特化型：中央にSPレイアウト(390)を流し、PCは左右に装飾を置く。
========================================================= */
.lp_contents {
  & .layout-mobile-first {
    position: relative;
    z-index: 1;
    width: calc(390 * var(--rem));
    margin-inline: auto;
    padding-bottom: calc(50 * var(--rem));
    order: 2;
    background: var(--bg);
  }
}

/* ========================================================
                      * Mainvisual *
========================================================= */
.lp_contents {
  & .project-mainvisual__visual img {
    width: 100%;
  }

  & .project-mainvisual__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: calc(40 * var(--rem)) auto 0;
    text-align: center;
  }

  & .project-mainvisual__name {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--lp-font-en);
    font-weight: 500;
    line-height: 1.2;
    color: var(--red);
  }

  & .project-mainvisual__name-lg {
    font-size: calc(24 * var(--rem));
  }

  & .project-mainvisual__name-xl {
    font-size: calc(32 * var(--rem));
  }

  & .project-mainvisual__lead {
    margin-top: calc(5 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: 2;
    color: #000;
  }
}

/* ========================================================
                      * Venue *
========================================================= */
.lp_contents {
  & .project-venue {
    width: calc(331 * var(--rem));
    margin: calc(50 * var(--rem)) auto 0;
  }

  & .project-venue__box {
    border: calc(2 * var(--rem)) solid var(--yellow);
    border-radius: calc(4 * var(--rem));
    background: #fff;

    & + .project-venue__box {
      margin-top: calc(30 * var(--rem));
    }
  }

  & .project-venue__head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(40 * var(--rem));
    border-radius: calc(2 * var(--rem)) calc(2 * var(--rem)) 0 0;
    background: var(--yellow);
    font-family: var(--lp-font-ja);
    font-weight: 500;
    font-size: calc(20 * var(--rem));
    line-height: 2;
    letter-spacing: var(--letter-spacing);
    color: var(--red);
  }

  & .project-venue__head--en {
    font-family: var(--lp-font-en);
  }

  & .project-venue__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(15 * var(--rem));
    padding: calc(20 * var(--rem)) 0 calc(30 * var(--rem));
  }

  & .project-venue__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(5 * var(--rem));
    text-align: center;
  }

  & .project-venue__label {
    font-weight: 600;
    font-size: calc(15 * var(--rem));
    line-height: 2;
  }

  & .project-venue__date {
    display: flex;
    flex-direction: column;
    font-family: var(--lp-font-en);
    font-weight: 400;
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    color: #000;
  }

  & .project-venue__divider {
    width: calc(269 * var(--rem));
    height: 0;
    margin: 0;
    border: none;
    border-top: calc(1 * var(--rem)) dotted #cfcd83;
  }

  & .project-venue__place {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--rem));
  }

  & .project-venue__pin svg {
    display: block;
    width: calc(13 * var(--rem));
    height: calc(16 * var(--rem));
  }

  & .project-venue__place-name {
    font-family: var(--lp-font-en);
    font-weight: 400;
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    color: #000;
    text-decoration: underline;
    text-underline-position: from-font;
  }

  & .project-venue__note {
    margin-top: calc(30 * var(--rem));
    font-weight: 400;
    font-size: calc(11 * var(--rem));
    line-height: 2;
    color: var(--sub);
    text-align: center;
  }
}

/* ========================================================
                      * About *
========================================================= */
.lp_contents {
  & .project-about {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(30 * var(--rem));
    width: calc(347 * var(--rem));
    margin: calc(50 * var(--rem)) auto 0;
  }

  /* 吹き出しセクションの背景帯（Rectangle 11 / #f7f7cf。メイン背景 #fefeec と別色）。
     全カラム幅(390)。吹き出し上端から 40px 下がって始まり、説明文の 50px 下で終わる
     （予定出店数セクションはメイン背景 #fefeec に乗る）。 */
  & .project-about::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(40 * var(--rem));
    bottom: calc(-50 * var(--rem));
    left: 50%;
    translate: -50% 0;
    width: calc(390 * var(--rem));
    background: var(--bg-about);
  }

  & .project-about__head {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .project-about__balloon {
    position: relative;
    margin-bottom: calc(15 * var(--rem));
    padding: calc(15 * var(--rem)) calc(30 * var(--rem));
    border-radius: calc(4 * var(--rem));
    background: var(--green);
    filter: drop-shadow(0 calc(3 * var(--rem)) calc(5 * var(--rem)) rgba(0, 0, 0, .05));
    font-weight: 700;
    text-align: center;
  }

  & .project-about__balloon::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    border-style: solid;
    border-width: calc(9 * var(--rem)) calc(8 * var(--rem)) 0;
    border-color: var(--green) transparent transparent;
  }

  & .project-about__balloon-sm {
    display: block;
    font-weight: 600;
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
  }

  & .project-about__balloon-lg {
    display: block;
    font-weight: 700;
    font-size: calc(20 * var(--rem));
    line-height: 1.5;
  }

  & .project-about__catch {
    font-weight: 700;
    font-size: calc(16 * var(--rem));
    line-height: 2;
    color: #000;
    text-align: center;
  }

  & .project-about__actions {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: calc(10 * var(--rem));
    margin-top: calc(4 * var(--rem));
  }

  & .project-about__actions::before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    width: calc(265 * var(--rem));
    height: calc(10 * var(--rem));
    background: #fff;
  }

  & .project-about__action,
  & .project-about__action-tail {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: calc(18 * var(--rem));
    line-height: 1;
  }

  & .project-about__action {
    color: var(--red);
  }

  & .project-about__action-tail {
    color: #000;
  }

  & .component-bracket {
    position: relative;
    display: inline-block;
    padding: 0 calc(9 * var(--rem));
  }

  & .component-bracket::before,
  & .component-bracket::after {
    content: "";
    position: absolute;
    width: calc(6 * var(--rem));
    height: calc(18 * var(--rem));
    border: 0 solid var(--olive);
  }

  & .component-bracket::before {
    top: 0;
    left: 0;
    border-top-width: 1px;
    border-left-width: 1px;
  }

  & .component-bracket::after {
    right: 0;
    bottom: 0;
    border-bottom-width: 1px;
    border-right-width: 1px;
  }

  & .project-about__desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    font-weight: 500;
    font-size: calc(14 * var(--rem));
    line-height: 1.75;
    letter-spacing: .05em;
    color: #000;
    text-align: center;
  }

  & .project-about__desc p {
    letter-spacing: .05em;
  }
}

/* ========================================================
                      * Brands *
========================================================= */
.lp_contents {
  & .project-brands {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--rem));
    /* about の背景帯が下に 50px はみ出す分 + セクション間 50px = 100px 空ける */
    margin-top: calc(100 * var(--rem));
    text-align: center;
  }

  & .project-brands__label {
    font-weight: 700;
    font-size: calc(15 * var(--rem));
    line-height: 1;
    color: var(--red);
  }

  & .project-brands__count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(5 * var(--rem));
    line-height: 1;
  }

  & .project-brands__unit {
    font-weight: 700;
    font-size: calc(22 * var(--rem));
    letter-spacing: var(--letter-spacing);
  }

  & .project-brands__num {
    font-family: var(--lp-font-en);
    font-weight: 600;
    font-size: calc(28 * var(--rem));
    color: var(--red);
  }
}

/* ========================================================
                      * Coming soon *
========================================================= */
.lp_contents {
  & .project-comingsoon {
    width: calc(340 * var(--rem));
    margin: calc(50 * var(--rem)) auto 0;
  }

  & .project-comingsoon__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--rem));
    padding: calc(25 * var(--rem)) calc(30 * var(--rem)) calc(36 * var(--rem));
    border-radius: calc(4 * var(--rem));
    background: #fff;
    box-shadow: 0 calc(3 * var(--rem)) calc(5 * var(--rem)) rgba(0, 0, 0, .1);
  }

  & .project-comingsoon__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(3 * var(--rem));
    text-align: center;
  }

  & .project-comingsoon__en {
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(30 * var(--rem));
    line-height: 1.2;
    color: var(--red);
  }

  & .project-comingsoon__note {
    font-weight: 500;
    font-size: calc(14 * var(--rem));
    line-height: 2;
    color: #000;
  }

  & .project-comingsoon__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(250 * var(--rem));
    height: calc(48 * var(--rem));
    border-radius: calc(999 * var(--rem));
    background: var(--btn-green);
    font-weight: 500;
    font-size: calc(13 * var(--rem));
    line-height: 2;
    color: #fff;
    text-align: center;
  }
}

/* ========================================================
                      * PC Decoration (左右装飾・PC専用) *
===========================================================
  中央カラム(390)の左右外側にヒーローへ揃えて配置。
  ※SP特化型の左右エリアは常に追従（coding-guidelines.md 1-3）。position: fixed で
    ビューポートに固定し、スクロールしても左右装飾が追従表示される。
========================================================= */
.lp_contents {
  & .project-deco {
    position: fixed;
    position: sticky;
    display: flex;
    align-items: center;
    top: calc(6.4 * var(--rem));
    z-index: 0;
    width: calc(525 * var(--rem-pc));
    height: calc(100vh - 6.4rem);
  }

  & .project-deco--left {
    left: calc(50% - 720 * var(--rem));
  }

  & .project-deco--right {
    right: calc(50% - 720 * var(--rem));
    order: 3;
  }

  & .project-deco img {
    width: 100%;
  }
}