@charset "UTF-8";
/* ============================================================
   lp.css — LP（recommend.jr-central.co.jp/oshi-tabi/makeine5th/ phase4）のデザイン移植
   ・クラス名は LP（style.css）のまま。px は ÷100 で rem 化（100px = 1rem）
   ・車内（top.php / certificate）と現地（stamprally/）の両方が読む。base.css / custom.css の後に読み込む
   ・セクションの色は LP と同じく .sec_A（車内・緑）/ .sec_B（市内・オレンジ）の変数で切り替える
   ・素材は assets/img/lp/（LP の bg_01 / bg_02 / cloud / flag / line / wave / spot / mv_sp_date）
   ============================================================ */

:root {
    --lp-text: #634C33;
    --lp-primary: #0FAD6B;
    --lp-link: #F58700;
    --lp-accent: #FFE743;
    --lp-bg: #F1FAE1;
    --lp-bg02: #FCFCDE;
    --lp-bg03: #FFFEF0;
    --lp-btn-base: #745D45;
    --lp-font-deco: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    --lp-font-date: 'M PLUS 1p', 'Noto Sans JP', sans-serif;
}

/* 車内コンテンツ */
.sec_A {
    --cont-color01: #0FAD6B;
    --cont-color02: #0FAD6B;
    --secondary-color: #88D700;
    --step-color: #A9E246;
    --border-color: #C9E894;
}

/* 豊橋市内コンテンツ */
.sec_B {
    --cont-color01: #FFA80E;
    --cont-color02: #FF9924;
    --secondary-color: #FFB22A;
    --step-color: #FFC866;
    --border-color: #FDCC75;
}

/* ページ全体 — LP の本文設定（14px・行間 1.5・茶色） */
.lp-page {
    color: var(--lp-text);
    font-size: 0.14rem;
    line-height: 1.5;
    font-family: 'Noto Sans JP', YakuHanJP, sans-serif;
}
.lp-page *,
.lp-page *::before,
.lp-page *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   MV — KV の下に LP の期間帯（mv_sp_date）を重ねる
   ------------------------------------------------------------ */
.lp-mv {
    position: relative;
    background: url("../img/bg.webp") center top / cover no-repeat;
}
.lp-mv__date {
    width: 94%;
    margin: 0.04rem auto 0;
    padding-bottom: 0.16rem;
    position: relative;
    z-index: 2;
}
.lp-mv__date img {
    width: 100%;
}

/* ------------------------------------------------------------
   INTRO — 旗ガーランド・リード・ログイン導線
   ------------------------------------------------------------ */
.intro__wrap {
    background-color: var(--lp-bg03);
    padding: 0.86rem 0 0.40rem;
    position: relative;
    overflow: hidden;
}
.intro__flag {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    transform: rotate(-2.756deg);
}
.intro__lead01 {
    text-align: center;
    font-size: 0.16rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
.intro__lead02 {
    text-align: center;
    font-size: 0.18rem;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-decoration-line: underline;
    text-decoration-color: var(--lp-accent);
    text-decoration-thickness: 30%;
    text-underline-offset: -10%;
    text-decoration-skip-ink: none;
}

/* LP の横長ボタン（キャンペーンサイト一覧・現地/車内への導線）を並べる箱 */
.intro__nav {
    margin-top: 0.20rem;
}

/* チェック柄の区切り帯（LP .line） */
.line {
    height: 0.15rem;
    background: url("../img/lp/line.webp") center / auto 100% repeat-x var(--lp-bg03);
}

/* ------------------------------------------------------------
   セクション背景（LP .bg_cont1 = 車内 / .bg_cont2 = 市内）
   ------------------------------------------------------------ */
.bg_cont1 {
    background: url("../img/lp/bg_01.webp") center top / 2.62rem auto repeat #FCFCDE;
}
.bg_cont2 {
    background: url("../img/lp/bg_02.webp") center top / 2.62rem auto repeat #E1FAE1;
}

.container {
    width: 92%;
    margin: 0 auto;
}

.sec__wrap {
    padding: 0.32rem 0 0.40rem;
}
.sec__wrap + .sec__wrap {
    padding-top: 0;
}

/* 見出し画像の背面に雲 */
.sec__top {
    background: url("../img/lp/cloud.svg") center bottom / 100% 73% no-repeat;
}
.sec__top h2 {
    margin: 0 auto;
    max-width: 4.00rem;
}
.sec__top h2 img {
    width: 100%;
    display: block;
}

/* 白いカード（下だけ角丸） */
.box01 {
    background-color: #FFF;
    border-radius: 0 0 0.16rem 0.16rem;
    padding: 0.12rem 0.15rem 0.24rem;
}

/* 期間 */
.sec__date {
    display: flex;
    margin: 0 auto;
    border-radius: 0.06rem;
    border: 0.015rem solid var(--cont-color01);
    overflow: hidden;
}
.sec__date dt {
    color: #FFF;
    background-color: var(--cont-color01);
    text-align: center;
    font-family: var(--lp-font-date);
    font-size: 0.10rem;
    font-weight: 800;
    line-height: 1.2;
    width: calc(0.12rem + 1em);
    padding: 0.03rem 0.06rem;
    margin: 0;
}
.sec__date dd {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lp-bg03);
    width: calc(100% - (0.12rem + 1em));
    margin: 0;
}
.sec__date dd p {
    color: var(--cont-color02);
    text-align: center;
    font-family: var(--lp-font-date);
    font-size: 0.12rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.03em;
    margin: 0;
}
.sec__date dd span {
    font-size: 0.15rem;
}
/* 「開催期間」を上に置く縦型（イントロ用） */
.sec__date02 {
    flex-direction: column;
    max-width: 3.45rem;
}
.sec__date02 dt {
    width: 100%;
    letter-spacing: 0.15em;
    font-size: 0.12rem;
}
.sec__date02 dd {
    width: 100%;
    padding: 0.06rem 0;
}

/* リード文 */
.sec__lead {
    color: var(--lp-text);
    font-size: 0.15rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    padding: 0 0.10rem;
}

.sec__lead--center {
    text-align: center;
    padding: 0;
}

/* 注意書き（LP .note__list：12px・ぶら下げ）。ul.caution と併用して base の ※ を使う */
.lp-page ul.caution {
    margin-top: 0.16rem;
    font-size: 0.12rem;
    line-height: 1.5;
    color: var(--lp-text);
}
.lp-page ul.caution li + li {
    margin-top: 0.03rem;
}
.lp-page ul.caution li a {
    color: var(--lp-link);
    font-weight: 700;
}

/* 画像見出し（ピル）＋サブ */
.img__wrap {
    margin: 0 auto;
}
.img__wrap > img {
    width: 100%;
    display: block;
}
.img__head {
    background-color: var(--cont-color01);
    color: var(--lp-accent);
    display: flex;
    gap: 0.16rem;
    border-radius: 1rem;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    font-family: var(--lp-font-deco);
    font-size: 0.17rem;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.05em;
    padding: 0.04rem 0.12rem;
}
.img__head::before,
.img__head::after {
    content: "";
    background-color: var(--lp-accent);
    height: 0.06rem;
    width: 0.06rem;
    border-radius: 100%;
}
.sec_B .img__head {
    color: #FFF;
}
.sec_B .img__head::before,
.sec_B .img__head::after {
    background-color: #FFF;
}
.img__head__sub {
    font-size: 0.12rem;
    margin-top: 0.02rem;
    text-align: center;
    font-weight: 500;
    color: var(--cont-color01);
}
/* ＼ ○○ ／ */
.img__head__top {
    color: var(--cont-color01);
    font-family: var(--lp-font-deco);
    font-size: 0.14rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
}
.img__head__top::before,
.img__head__top::after {
    content: "";
    background-color: var(--cont-color01);
    width: 0.015rem;
    border-radius: 0.03rem;
    height: 0.10rem;
}
.img__head__top::before { transform: rotate(-35deg); }
.img__head__top::after  { transform: rotate(35deg); }

/* 点線ボックス（引換時間・場所） */
.place__wrap {
    padding: 0.16rem 0.15rem;
    border-radius: 0.08rem;
    border: 0.03rem dotted var(--secondary-color);
    background: var(--lp-bg03);
    width: 100%;
}
.place__head {
    text-align: center;
    padding: 0.08rem 0;
    line-height: 1;
}
.place__head span {
    position: relative;
    display: inline-block;
    z-index: 1;
    line-height: 1;
    color: #FFF;
    font-family: var(--lp-font-deco);
    font-size: 0.14rem;
    font-weight: 900;
}
.place__head span + span {
    margin-left: 0.08rem;
}
.place__head span::before {
    content: "";
    width: 0.30rem;
    height: 0.30rem;
    position: absolute;
    top: -0.08rem;
    left: -0.08rem;
    background-color: var(--secondary-color);
    z-index: -1;
    border-radius: 100%;
}
.place__box {
    padding-top: 0.10rem;
}
.place__box + .place__box {
    border-top: 0.01rem solid var(--border-color);
    margin-top: 0.10rem;
}
.place__text01 {
    text-align: center;
    font-size: 0.15rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin: 0;
}
.place__text02 {
    text-align: center;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin: 0;
}
.place__wrap dl {
    margin: 0.04rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
}
.place__wrap dt {
    color: #FFF;
    text-align: center;
    padding: 0 0.06rem;
    border-radius: 1rem;
    background: var(--secondary-color);
    font-size: 0.10rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
.place__wrap dd {
    margin: 0;
}
.place__closed {
    color: #e60012;
    font-weight: 700;
    font-size: 0.13rem;
    text-align: center;
}
.place__wrap ul.caution {
    margin-top: 0.12rem;
}

/* 吹き出し見出し（ボイスラリースポット / エクストラスポット） */
.rally__head {
    background-color: #FF832A;
    padding: 0.12rem 0.32rem;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    border-radius: 1rem;
}
.rally__head::after {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    bottom: -0.10rem;
    left: calc(50% - 0.10rem);
    border-top: 0.20rem solid #FF832A;
    border-left: 0.10rem solid transparent;
    border-right: 0.10rem solid transparent;
}
.rally__head__icon {
    width: 0.11rem;
    margin: 0 auto;
}
.rally__head__icon img {
    width: 100%;
    display: block;
}
.rally__head__text01 {
    color: #FFF;
    font-family: var(--lp-font-deco);
    font-size: 0.18rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0;
}
.rally__head__text02 {
    color: #FFF;
    text-align: center;
    font-size: 0.12rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.05em;
    margin: 0;
}

/* スポット名の帯（LP .map_acc_btn と同じ配色：奇数オレンジ／偶数黄緑・エクストラは黄緑） */
.map_acc_btn {
    border-radius: 0.04rem;
    display: flex;
    color: #FFF;
    align-items: center;
    justify-content: flex-start;
    padding: 0.08rem 0.12rem;
    gap: 0.08rem;
    font-weight: 700;
    font-size: 0.14rem;
    line-height: 1.4;
    background-color: #FFB22A;
}
.map_num {
    width: 0.25rem;
    height: 0.25rem;
    flex-shrink: 0;
    background-color: #FFF;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.16rem;
    font-weight: 800;
    line-height: 1;
    color: #FFB22A;
}
.lp-spot__note {
    text-align: center;
    font-size: 0.12rem;
    font-weight: 500;
    margin-top: 0.04rem;
}

/* 波線の区切り */
.wave {
    margin: 0 auto;
    background: url("../img/lp/wave.svg") center / 100% no-repeat;
    height: 0.03rem;
    padding-top: 2%;
}

/* 余白（LP の mgt*） */
.mgtSS { margin-top: 0.04rem; }
.mgtS  { margin-top: 0.08rem; }
.mgtM  { margin-top: 0.16rem; }
.mgtL  { margin-top: 0.24rem; }
.mgtLL { margin-top: 0.32rem; }

/* ------------------------------------------------------------
   ボタン — 車内・現地で同じ形（角丸ピル＋内側白線＋LP の落ち影）にそろえる
   色だけ LP のセクション色。非活性は custom.css の灰色（!important）が勝つ
   ★ stamprally/assets/css/base.css は角の無い形なので、ここで形を上書きしてそろえる
   ------------------------------------------------------------ */
.lp-page .iconButton {
    max-width: 3.45rem;
    height: 0.64rem;
    border-radius: 0.32rem;
    box-shadow: 0.04rem 0.04rem 0 rgba(49, 56, 58, 0.15);
    margin: 0.08rem auto 0.04rem;
    padding: 0.05rem 0.14rem;
}
.lp-page .iconButton::before {
    top: 0.04rem;
    right: 0.04rem;
    bottom: 0.04rem;
    left: 0.04rem;
    border: 0.015rem solid rgba(255, 255, 255, 0.9);
    border-radius: 0.28rem;
}
.lp-page .iconButton.button-bg {
    background: var(--cont-color01, var(--color-button));
}
.lp-page .iconButton.local-bg {
    background: var(--color-local);
}
.lp-page .iconButton .iconButtonText {
    font-size: 0.16rem;
    font-weight: 700;
    line-height: 1.35;
}
.lp-page .toOshitabiTop {
    background: #FFF;
    border-color: var(--lp-text);
    color: var(--lp-text);
    font-weight: 700;
}
.lp-page .loginRgisterButton {
    margin: 0.10rem auto;
}


/* ============================================================
   行き来ボタン（車内 ⇄ 現地）— LP の navi_0N.png（ブラシ調の帯＋白丸＋2段の文字＋細い矢印）を CSS で再現
   ・車内トップ → 現地: .lp-navi--local（オレンジ・ピン）
   ・現地トップ → 車内: .lp-navi--shinkansen（緑・新幹線）
   ・アイコンは CSS マスクで企画色に塗る（共有 /icon は白なので白丸の上では見えない）
   ============================================================ */
.lp-navi {
    --navi-color: #FF9A2E;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.12rem;
    width: 100%;
    max-width: 3.45rem;
    min-height: 0.74rem;
    margin: 0.20rem auto 0.08rem;
    padding: 0.12rem 0.44rem 0.12rem 0.14rem;
    border: 0;
    color: #FFF;
    text-align: left;
    cursor: pointer;
    /* ブラシの横スジ（LP の navi の質感） */
    background:
        repeating-linear-gradient(176deg,
            rgba(255, 255, 255, 0) 0 0.07rem,
            rgba(255, 255, 255, 0.10) 0.07rem 0.085rem,
            rgba(255, 255, 255, 0) 0.085rem 0.15rem),
        var(--navi-color);
    /* 筆で塗ったような少しガタつく輪郭 */
    clip-path: polygon(1% 4%, 12% 0%, 30% 3%, 52% 0%, 74% 3%, 90% 0%, 99% 5%, 100% 30%, 98.5% 55%, 100% 82%, 98% 98%, 80% 100%, 58% 97%, 36% 100%, 16% 97%, 2% 100%, 0% 78%, 1.5% 50%, 0% 22%);
    filter: drop-shadow(0.04rem 0.04rem 0 rgba(49, 56, 58, 0.15));
    -webkit-tap-highlight-color: transparent;
}
.lp-navi:active {
    transform: translate(0.03rem, 0.03rem);
}
.lp-navi--local {
    --navi-color: #FF9A2E;
}
.lp-navi--shinkansen {
    --navi-color: #3FAA68;
}
.lp-navi__circle {
    flex-shrink: 0;
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 50%;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-navi__icon {
    display: block;
    width: 0.24rem;
    height: 0.24rem;
    background-color: var(--navi-color);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.lp-navi__text {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    min-width: 0;
}
.lp-navi__sub {
    font-family: var(--lp-font-deco);
    font-size: 0.12rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
}
.lp-navi__main {
    font-family: var(--lp-font-deco);
    font-size: 0.19rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
/* 行き来ボタン（車内⇄現地）。下段が「〜はこちら」で 14 文字になるので、両ボタンとも下段を少し小さくしてそろえる */
.lp-navi--single .lp-navi__main {
    font-size: 0.16rem;
    letter-spacing: 0.02em;
}

/* 右端の細い矢印（LP navi の ↓ を → に） */
.lp-navi__arrow {
    position: absolute;
    right: 0.16rem;
    top: 50%;
    width: 0.20rem;
    height: 0.02rem;
    margin-top: -0.01rem;
    background: #FFF;
    border-radius: 0.01rem;
}
.lp-navi__arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -0.06rem;
    width: 0.02rem;
    height: 0.09rem;
    background: #FFF;
    border-radius: 0.01rem;
    transform: rotate(-40deg);
    transform-origin: bottom center;
}


/* ============================================================
   スポットカード（現地）— 番号付きの帯＋淡い地のボディを1つのカードにまとめる
   （帯とボタンがばらばらに並ぶと重く間延びするため）
   ============================================================ */
.lp-spot {
    --spot-color: #FFB22A;
    margin-top: 0.12rem;
    border-radius: 0.06rem;
    overflow: hidden;
    border: 0.02rem solid var(--spot-color);
    background: var(--lp-bg03);
}
.lp-spot:nth-of-type(even),
.lp-spot--extra {
    --spot-color: #88D700;
}
.lp-spot .map_acc_btn {
    border-radius: 0;
    background-color: var(--spot-color);
    padding: 0.06rem 0.10rem;
}
.lp-spot .map_num {
    color: var(--spot-color);
    width: 0.22rem;
    height: 0.22rem;
    font-size: 0.14rem;
}
.lp-spot .map_acc_btn p {
    margin: 0;
}
.lp-spot__body {
    padding: 0.06rem 0.10rem 0.08rem;
}
.lp-spot .iconButton {
    height: 0.54rem;
    max-width: 3.00rem;
    margin: 0.04rem auto 0;
}
.lp-spot .iconButton .iconButtonText {
    font-size: 0.15rem;
}
.lp-spot .lp-spot__note {
    margin-top: 0.04rem;
}

/* ------------------------------------------------------------
   白ボタン（地図で確認・リセット・キャンペーンサイト一覧）— 車内・現地で同じ形
   ------------------------------------------------------------ */
.lp-page .simpleButton {
    display: block;
    width: 100%;
    max-width: 3.45rem;
    margin: 0.12rem auto 0.04rem;
    padding: 0.12rem 0.10rem;
    border-radius: 0.30rem;
    border: 0.02rem solid var(--cont-color01, var(--lp-text));
    background: #FFF;
    color: var(--cont-color01, var(--lp-text));
    font-size: 0.15rem;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0.04rem 0.04rem 0 rgba(49, 56, 58, 0.15);
}
.lp-page .simpleButton.disabled,
.lp-page .simpleButton:disabled {
    border-color: #B5B5B5 !important;
    background: #EDEDED !important;
    color: #9A9A9A !important;
    pointer-events: none;   /* 形・影は活性時のまま（色だけグレーの規約） */
}


/* ============================================================
   引換ページ（certificate / stamprally/exchange/completed）内の特典引換場所
   ・.completedSlider は font-weight:700 を持つので、トップと同じ文字の太さ・大きさに戻す
   ・注意書きの直後に付かないよう上に余白、ボックス内も少し広げる
   ★ certificate.css は書き換えず、親クラスを前置して特異度で勝つ
   ============================================================ */
.completedSlider .place__wrap {
    margin: 0.28rem auto 0.08rem;
    padding: 0.20rem 0.16rem 0.18rem;
    font-weight: 400;
    color: var(--lp-text);
}
.completedSlider .place__head {
    padding: 0.08rem 0 0.06rem;
    margin-bottom: 0.04rem;
}
.completedSlider .place__box {
    padding-top: 0.14rem;
}
.completedSlider .place__box + .place__box {
    margin-top: 0.14rem;
}
.completedSlider .place__text01 {
    font-size: 0.15rem;
    font-weight: 700;
}
.completedSlider .place__wrap dl {
    margin-top: 0.06rem;
}
.completedSlider .place__text02 {
    font-size: 0.14rem;
    font-weight: 700;
}
.completedSlider .place__wrap ul.caution {
    margin: 0.16rem 0 0;
    font-size: 0.12rem;
    font-weight: 400;
    line-height: 1.5;
}