html, body {
  margin: 0;           /* UAデフォルト8px対策 */
  padding: 0;
  overflow-x: hidden;
}
@supports (overflow-x: clip){
  html, body { overflow-x: clip; }
}
/* 1) 縦スクロールバーの出入りによる横幅揺れを抑止 */
html { scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable) {
  /* 非対応ブラウザでは常に縦スクロールを出してレイアウトを安定化（必要なら外してください） */
  html { overflow-y: scroll; }
}

/* 2) フェードイン要素の描画を軽くしてジャンク回避 */
.animation01{
  opacity: 0;
  will-change: transform, opacity; /* 先読みでGPUに載せる */
  backface-visibility: hidden;
  transform: translateZ(0);        /* Safari/Chromeでのティア防止 */
}

/* 3) スクロールアンカーによる“戻し”挙動を抑える（アニメ大量区間だけ） */
#pokepeace_01, #pokepeace_02, #pokepeace_03,
#pokepeace_04, #pokepeace_05, #pokepeace_06, #pokepeace_07 {
  overflow-anchor: none;
}
body {
    font-size:16px;
    font-weight:500;
    z-index:0;
    line-height: 1.75em;
    letter-spacing:0.03em;
    overflow-x:hidden;
}
.color-brown{
    color:#89665E;
}
.color-white{
    color:#fff;
}
.color-orange{
    color:#F3A183;
}
a,a.active, a:active, a:focus, a:hover {
	outline:none;
	text-decoration:none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  margin:0;
  padding:0;
  }
p{
  margin:0;
  padding:0;
}
img{
  width:100%;
  height:auto;
}
*{
  box-sizing:border-box;
  font-family: 'Zen Maru Gothic', sans-serif !important;
}
*:focus {
  outline: none;
}
.wrapper{
    width:600px;
    position:relative;
    margin:0 auto;
    display:block;
    overflow-x:hidden !important;
    z-index:99;
}
section {
    width:100%;
    padding:0; 
    display:block;
    margin:0 auto;
    position:relative;
}
.container-fluid{
    padding:0 !important;
    overflow-x:hidden !important;
}
.container{
    padding:0 !important;
    overflow-x:hidden !important;
}
.mx-auto{
    display:block !important;
    margin:0 auto !important;
}
.text-center{
    text-align:center;
}
.animation01{
    opacity:0;
}

/*--------------------------------------------------------------
PC表示
--------------------------------------------------------------*/
.pc-left-area{
    position:fixed;
    top:0;
    left:0;
    width:calc(50% - 300px) ;
    height:100vh;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    background-image:url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/pokepeace25/img/pc_left_area_bg.png);
    z-index:9;
}
.pc-right-area{
    position:fixed;
    top:0;
    right:0;
    width:calc(50% - 300px) ;
    height:100vh;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    background-image:url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/pokepeace25/img/pc_right_area_bg.png);
    z-index:9;
}
.pc-inner{
    width:100%;
    height:100vh;
    position:relative;
}
.pc-inner-area{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    margin: auto;
}
.pc-left-area .pc-inner-area img{
    width:400px;
    max-width:100%;
    display:block;
    margin:0 auto;
    padding:0 20px;
}
.pc-right-area .pc-inner-area img{
    width:360px;
    max-width:100%;
    display:block;
    margin:0 auto;
    padding:0 20px;
}
@media screen and (min-width: 768px){
.wrapper{
    box-shadow: 10px 0 15px rgba(0,0,0,0.2);
}
}
@media screen and (max-width: 767px){
.pc-left-area .pc-inner-area img, .pc-right-area .pc-inner-area img{
    display:none;
}
}
@media screen and (max-width: 600px){
.pc-left-area{
    display:none;
}
.pc-right-area{
    display:none;
}
.wrapper{
    width:100%;
}
}

/*--------------------------------------------------------------
KV
--------------------------------------------------------------*/
#pokepeace_01{
    position:relative;
    z-index:8;
}
.kv-area {
  position: relative;
}

.kv-area img {
  width: 100%;
  display: block;
}

.kv-area > img:first-child {
  position: relative;
  z-index: 1;
}

.kv-border-01 {
  width: 100%;
  position: absolute;
  bottom: 28%;
  z-index: 9;
}

.kv-border-02 {
  width: 100%;
  position: absolute;
  bottom: -12%;
  z-index: 9;
}
.kv-text-area{
  width: 100%;
  position: absolute;
  bottom: 10%;
  z-index: 9;
  font-size:16px;
  line-height:1.6em;
  font-weight:500;
}
.kv-text-area p{
  margin:0 0 15px;
}
.kv-text-area span{
  display: inline-block;
  padding: 0 10px 7px;
  font-size: 22px;
  font-weight: 700;
}
.to-campaign-link {
    width:300px;
    display:block;
    margin:20px auto 0;
    color:#FCB5B8;
    background:#fff;
    padding:10px;
    border:1px solid #FCB5B8;
    border-radius:30px;
    font-size:18px;
    font-weight: 700;
    position: relative; /* ← アイコン配置の基準にする */
    text-align: center; /* テキストを中央寄せ */
}
.to-campaign-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    width: 20px;
    height: 16px;
    background: url("../img/campaign_link_icon.svg") no-repeat center center / contain;
    pointer-events: none; /* クリックの邪魔をしない */
}
@media screen and (min-width: 481px) and (max-width: 767px){
.kv-text-area{
  bottom: 8%;
}
}
@media screen and (max-width: 480px){
.kv-text-area{
  font-size:2.8vw;
}
.kv-text-area p{
  margin:0 0 2%;
}
.kv-text-area span{
  padding: 0 4px 5px;
  font-size:4.2vw;
  font-weight: 700;
  border-image: repeating-linear-gradient(
    to right,
    #89665E 0 8px,   /* 線の長さ */
    transparent 10px 20px  /* 線と線の間隔 */
  ) 1;
}
.to-campaign-link {
    width:50%;
    margin:12px auto 0;
    padding:7px;
    border-radius:25px;
    font-size:3.6vw;
}
.to-campaign-link::after {
    width: 4.0vw;
    height: 3.2vw;
}
}


/*--------------------------------------------------------------
商品一覧
--------------------------------------------------------------*/
#pokepeace_02{
    background-image: url("../img/lineup_bg.png");
    background-repeat: no-repeat;
    background-position: 100% auto;
    background-size: cover;
    position:relative;
    z-index:10;
    padding:20% 0 15%;
}
#pokepeace_02::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: -120px;
  height:250px;
  background: url("../img/kv_border_02.png") no-repeat center bottom / 100% auto;
  pointer-events: none;
  z-index: 12; 
}
.lineup-title{
    width:44%;
    display:block;
    margin:6% auto 8%;
}
.lineup-area{
    padding:0 10%;
    position:relative;
}
.lineup-tap-img{
    width:14%;
    position:absolute;
    top:0%;
    left:5%;
    transform: rotate(-30deg);
}
.lineup-column:nth-child(3n+1){
    padding:0 6px 0 0;
}
.lineup-column:nth-child(3n+2){
    padding:0 3px;
}
.lineup-column:nth-child(3n){
    padding:0 0 0 6px;
}
.lineup-bottom-area{
    margin:13% 0 5%;
    position:relative;
}
.lineup-bottom-area p{
    font-size:14px;
    font-weight:500;
    line-height:1.6em;
}
.lineup-bottom-area img{
    width:27%;
    position:absolute;
    bottom:-30%;
    right:0;
    z-index:8;
}

.lineup-item{
  position: relative;
  isolation: isolate; /* ← z-index の負値や背面化の事故を防止 */
}
/* 中身（画像やテキスト）は前面に */
.lineup-item > *{
  position: relative;
  z-index: 1;
}
.lineup-item img{
    width:60%;
    display:block;
    margin:0 auto;
}
.lineup-item::before{
  content: "";
  position: absolute;
  right: -18%;         /* 右へ少しはみ出させて”理想”に寄せる */
  bottom: 12%;
  width: 98%;  /* レスポンシブな幅 */
  aspect-ratio: 391 / 341;          /* 画像の縦横比（必要なら微調整） */
  z-index: 0;         /* 中身より後ろ */
  pointer-events: none;
  opacity: 1;         /* デザインに合わせて 0.9 などでもOK */
}
.lineup-item01::before{
  background: url("../img/lineup_bg_01.png") no-repeat center / contain;
}
.lineup-item02::before{
  background: url("../img/lineup_bg_02.png") no-repeat center / contain;
}
.lineup-item03::before{
  background: url("../img/lineup_bg_03.png") no-repeat center / contain;
}
.lineup-item04::before{
  background: url("../img/lineup_bg_04.png") no-repeat center / contain;
}
.lineup-item05::before{
  background: url("../img/lineup_bg_05.png") no-repeat center / contain;
}
.lineup-item06::before{
  background: url("../img/lineup_bg_06.png") no-repeat center / contain;
}
.lineup-item07::before{
  background: url("../img/lineup_bg_07.png") no-repeat center / contain;
}
.lineup-item08::before{
  background: url("../img/lineup_bg_08.png") no-repeat center / contain;
}
.lineup-item p{
    font-size:15px;
    margin-bottom:20px;
}

@media screen and (max-width: 767px){
.lineup-area{
    padding:0 7%;
}
.lineup-column:nth-child(3n+1){
    padding:0;
}
.lineup-column:nth-child(3n+2){
    padding:0;
}
.lineup-column:nth-child(3n){
    padding:0;
}
.lineup-item::before{
  content: "";
  position: absolute;
  bottom: 25px;
}
.lineup-tap-img{
    left:3%;
}
}
@media screen and (max-width: 480px){
#pokepeace_02::before{
  height:35vw;
  top: -6%;
}
.lineup-item p{
    font-size:3.0vw;
    margin-bottom:3%;
}
.lineup-bottom-area p{
  font-size:2.8vw;
}
.lineup-bottom-area img{
    width:25%;
    bottom:-15%;
}
.lineup-tap-img{
    left:1.5%;
}
}

/*--------------------------------------------------------------
モーダル
--------------------------------------------------------------*/
.modal{
    display: none;
    height: calc(var(--vh, 1vh) * 100);
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    z-index:999999999;
}
.modal__bg{
    background: rgba(44,44,44,0.30);
    height: calc(var(--vh, 1vh) * 100);
    position: absolute;
    width: 100%;
}
.modal__content{
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    max-width:600px;
}
.modal-area{
    position:relative;
    padding:0 15%;
}
.js-modal-close-button{
    display: block;
    position: absolute; /* 必要に応じて絶対位置を保持 */
    bottom: 8%;
    left: 0;
    right: 0;
    margin:auto;
    width:15%;
    cursor: pointer; /* ポインタをクリック状態に */
    z-index: 99999; /* 適切なz-index */
}
.no-scroll {
    overflow: hidden;
}
@media screen and (max-width: 480px){
.modal__content{
    width: 100%;
    max-width:100%;
}
.modal-area{
    position:relative;
    padding:0 5%;
}
}




/*--------------------------------------------------------------
対象店舗
--------------------------------------------------------------*/
#pokepeace_03{
    background-image: url("../img/store_bg.jpg");
    background-repeat: no-repeat;
    background-position: 100% auto;
    background-size: cover;
    position:relative;
    z-index:10;
    padding:20% 0 42%;
}
#pokepeace_03::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: -50px;           /* ← 上に40pxオーバーハング */
  height: 80px;             /* ← 画像の縦量に合わせて */
  background: url("../img/store_border.png") no-repeat center bottom / 100% auto;
  pointer-events: none;
  z-index: 11;               /* 03内の装飾を前面に */
}
.store-title{
    width:44%;
    display:block;
    margin:0% auto 18%;
}
.store-area{
    padding:0 10%;
}
.store-column:nth-child(2n+1){
    padding:10px 15px 15px 15px;
}
.store-column:nth-child(2n){
    padding:10px 15px 15px 15px;
}
#pokepeace_03 .store-column p{
    --base-font: clamp(12px, 1.2vw, 13px);
    font-size: var(--base-font);
    padding: 8px 20px;
    box-sizing: border-box;             /* ← パディング込みで高さ制御 */
    display: flex;                      /* ← 中央寄せ（任意） */
    align-items: center;
    justify-content: center;
    overflow: hidden;         /* はみ出し保険（任意） */
    /* 行送りと行数を変数化 */
    --lh: 1.2;
    --lines: 2;
    line-height: var(--lh);
    min-height: calc(1em * var(--lh) * var(--lines) + 20px);
}
/* JSが作る内包spanを拡大ターゲットに */
#pokepeace_03 .store-column p .fittext{
  display: inline-block;
  transform: scale(1);
  transform-origin: center center;  /* 中央から拡大 */
  will-change: transform;
  /* 見た目調整（お好みで） */
  line-height: inherit;
}
.store-column p{
    border:2px solid #F6DE88;
    border-radius:5px;
    background:#fff;
    font-weight:500;
    line-height:1.0;
    /* JSが書き込む拡大係数。デフォルト1 */
    --scale: 1;
    /* 元のフォントサイズ×拡大係数で表示 */
    font-size: calc(var(--base-font, 1rem) * var(--scale));
}
.store-bottom-area{
    width:100%;
    margin:1% 0 0;
    position:relative;
}
.store-bottom-area p{
    display:block;
    margin:0 0 0 1em;
    text-indent:-1em;
    font-size:14px;
    font-weight:500;
    line-height:1.7em;
}
@media screen and (max-width: 767px){
#pokepeace_03 .store-column p{
    padding: 8px 15px;
}
}
@media screen and (max-width: 480px){
#pokepeace_03{
    padding:15% 0 35%;
}
#pokepeace_03::before{
  top: -8%;
}
.store-title{
    margin:0 auto 12%;
}
.store-area{
    padding:0 8%;
}
.store-column:nth-child(2n+1){
    padding:6px 10px 6px 15px;
}
.store-column:nth-child(2n){
    padding:6px 15px 6px 10px;
}
#pokepeace_03 .store-column p{
    padding: 5px 5px !important;
    --base-font:2.8vw;
}
.store-bottom-area p{
  font-size:2.8vw;
}
}

/*--------------------------------------------------------------
キャンペーン
--------------------------------------------------------------*/
#pokepeace_04{
    background-image: url("../img/campaign_bg.jpg");
    background-repeat: no-repeat;
    background-position: 100% auto;
    background-size: cover;
    position:relative;
    z-index:10;
    padding:7% 0 25%;
    width:100%;
}
#pokepeace_04::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: -180px;               /* ← 上に40pxオーバーハング */
  height: 240px;             /* ← 画像の縦量に合わせて */
  width:100%;
  background: url("../img/campaign_border.png") no-repeat center bottom / 100% auto;
  pointer-events: none;
  z-index: 12;               /* 03内の装飾を前面に */
}
.campaign-title{
    width:40%;
    display:block;
    margin:10% auto;
}
.campaign-area{
    display:block;
    margin:3% auto 0;
}
.campaign-area strong{
    display:block;
    font-weight:700;
    font-size:42px;
}
.campaign-detail-text{
    margin:3% auto 9%;  
}
/* レイアウト全体 */
.campaign-apply-area{
  position: relative;                 /* ＋ を中央に重ねるため */
  padding: 0 3.5%;           /* 既存の 0 15% を少しレスポンシブに */
}
.campaign-apply-area .row{ align-items: center; }

/* 列の左右余白も固定 */
.campaign-column{ 
  display:flex; 
  padding: 0 24px; /* ← 0 min(2.6vw, 35px) → 24px に固定 */
}

/* 共通カード */
.campaign-apply-item{
  --bd: 2px;
  --white: rgba(255,255,255,.95);
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 15px;                /* 固定値のまま */
  border: var(--bd) solid var(--white);
  border-radius: 15px;
  padding: 20px;            /* 固定値のまま */
  text-align:center;
  color:#fff;
}
.campaign-apply-item p{
  display:block;
  line-height:1.4;
  font-size: 16px;          /* 固定値のまま */
}
.campaign-apply-item img{ width:72%; height:auto; }

/* ボックス型（上下padding/gapを固定） */
.campaign-apply-item.is-box{
  flex-direction: column;
  padding-block: 16px;  /* ← clamp(...) → 16px に固定 */
  gap: 10px;            /* ← clamp(...) → 10px に固定 */

  /* 高さの下限を外してコンテンツ量に合わせる */
  min-height: 0;
  height: auto;
}

/* 画像で縦が伸びすぎないように保険（任意） */
.campaign-apply-item.is-box img{
  width: 68%;
  height: auto;
  max-height: 220px; /* 必要なら数値を調整 */
}

/* 右：丸すぎない“カプセル風”（高さ/左右paddingを固定） */
.campaign-apply-item.is-pill{
  flex-direction: row;
  justify-content: center;
  text-align:center;
  height: 88px;            /* ← clamp(...) → 88px に固定 */
  border-radius: 15px;     /* 角丸はそのまま20px */
  padding-inline: 20px;    /* ← clamp(...) → 20px に固定 */
}

/* 中央の「＋」：サイズ固定、影ナシ、枠から約15pxの“抜き” */
.campaign-apply-area::after{
  content: "+";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 36px;   /* ← clamp(...) → 36px に固定（半分指定の意図を維持） */
  line-height: 1;
  color:#fff;

  /* 枠線と+の間に“抜き”を作る（背景が単色の場合） */
  padding: 0 15px;   /* 枠との距離 約15px */
  background: inherit;
  border-radius: 8px;
  /* text-shadow: なし（影を消す） */
}

.contact-area{
    margin:17% 0 0;
    padding:0 5%:
}
.contact-inner{
    width:90%;
    display:block;
    margin:0 auto;
    background:#fff;
    border:2px solid #E6D4E7;
    border-radius:18px;
    padding:30px;
}
.contact-title span{
  position: relative;
  display: inline-block;
  padding: 0 35px 28px; /* 下に帯ぶんの余白 */
  font-size: 22px;
  font-weight: 600;
  line-height: 1.8em;
}
.contact-title span::after{
  content:"";
  position:absolute;
  left:0;                /* ← 横位置を確定 */
  right:0;
  bottom:0;
  height:24px;
  background-image: url("../img/contact_title_border.png");
  background-repeat:no-repeat;
  background-position: center bottom;
  background-size: 100% auto;   /* 幅にフィット、高さは比率維持 */
  pointer-events:none;
}
.contact-detail{
  margin:25px 0 0;
}
.contact-detail a{
  color:#0089FF;
  text-decoration:underline;
}
.contact-detail span{
  display:block;
  font-size:14px;
  margin:1% 0 0;
}

@media screen and (max-width: 767px){
.campaign-apply-area{
    padding:0 8%;
}
.campaign-column:nth-child(2n+1){
padding:0 10px 0 0;
}
.campaign-column:nth-child(2n){
padding:0 0 0 10px;
}
.campaign-detail-text{
  font-size:14px;
}
.campaign-apply-item p{
  display:block;
  line-height:1.4;
  font-size: 14px;          /* 固定値のまま */
}
.campaign-apply-area{ --plus-gutter: 22px; } /* ← 最低確保幅（例：44px） */
.campaign-apply-area .row{
    display: flex;
    align-items: center;
}
/* 2カラムは可変幅のまま等分。中央だけを必ず空ける */
.campaign-apply-area .campaign-column{
    flex: 1 1 0;
    min-width: 0;
}
.campaign-apply-area .campaign-column + .campaign-column{
    margin-left: var(--plus-gutter); /* ← 最低ガターを強制的に確保 */
}

/* （任意）＋がガター内に収まるように控えめに */
.campaign-apply-area::after{
    font-size: 20px;  /* ガターより小さく */
    padding: 0 8px;
}
}

@media screen and (max-width: 480px){
#pokepeace_04{
    padding:10% 0 20%;
}
#pokepeace_04::before{
  top: -205px;
}
.campaign-title{
    width:45%;
    display:block;
    margin:8% auto;
}
.campaign-area strong{
  font-size:8.4vw;
}
.campaign-detail-text{
  font-size:2.8vw;
  line-height:1.8em;
}
.campaign-column:nth-child(2n+1){
  padding:0 5px 0 0;
}
.campaign-column:nth-child(2n){
  padding:0 0 0 5px;
}
.campaign-detail-text{
    margin:3% auto 10%;  
}
.campaign-apply-area{
  padding: 0 8.75%;
}
.campaign-apply-item{
  padding-left: 14px;
  padding-right: 14px;
}
/* 横長タイプはさらに少しだけタイトに */
.campaign-apply-item.is-pill{
  padding-inline: 12px;
}
.campaign-apply-item p{
  font-size:2.8vw;
  line-height:1.8em;
}
.campaign-apply-item p::before {
margin-right: 4px; /* 文字との余白 */
transform: translateY(-1px);
}
.contact-area{
    margin:10% 0 0;
}
.contact-inner{
    border-radius:10px;
    padding:15px;
}
.contact-title span{
  padding: 0 24px 16px; /* 下に帯ぶんの余白 */
  font-size: 4.4vw;
  line-height: 1.7em;
}
.contact-title span::after{
  height:12px;
}
.contact-detail{
  margin:5% 0 0;
}
.contact-detail p{
  font-size:3.2vw;
  line-height:1.8em;
}
.contact-detail span{
  font-size:2.8vw;
  line-height:1.8em;
}
}

/*--------------------------------------------------------------
ポケピース
--------------------------------------------------------------*/
#pokepeace_05{
    background-image: url("../img/pokepeace_bg.png");
    background-repeat: no-repeat;
    background-position: 100% auto;
    background-size: cover;
    position:relative;
    z-index:11;
    padding:2% 0 6%;
    width:100%;
}
#pokepeace_05::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: -50px;              /* ← 上に40pxオーバーハング */
  height: 80px;             /* ← 画像の縦量に合わせて */
  width:100%;
  background: url("../img/pokepeace_border.png") no-repeat center bottom / 100% auto;
  pointer-events: none;
  z-index: 12;               /* 03内の装飾を前面に */
}
.pokepeace-title{
    width:44%;
    display:block;
    margin:10% auto;
}
.pokepeace-area{
    display:block;
    margin:3% auto 0;
}
.pokepeace-detail-text{
    margin:2% auto 8%;  
    line-height:1.9em;
}
.pokepeace-character{
    width:85%;
    margin:8% 0 0;
}
@media screen and (max-width: 480px){
#pokepeace_05::before{
  top: -60px;              /* ← 上に40pxオーバーハング */
}
.pokepeace-title{
    width:50%;
}
.pokepeace-detail-text{
  font-size:2.8vw;
}
}

/*--------------------------------------------------------------
BODYFANTASIES
--------------------------------------------------------------*/
#pokepeace_06{
    background-image: url("../img/bf_bg.png");
    background-repeat: no-repeat;
    background-position: 100% auto;
    background-size: cover;
    position:relative;
    z-index:11;
    padding:10% 0;
    width:100%;
}
#pokepeace_06::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: -45px;              /* ← 上に40pxオーバーハング */
  height: 80px;             /* ← 画像の縦量に合わせて */
  width:100%;
  background: url("../img/bf_border.png") no-repeat center bottom / 100% auto;
  pointer-events: none;
  z-index: 12;               /* 03内の装飾を前面に */
}
.bf-character{
    width:24.8%;
    position:absolute;
    top:6%;
    right:4%;
}
.bf-title{
    width:44%;
    display:block;
    margin:15% auto 8%;
}
.bf-area{
    display:block;
    margin:0;
}
.bf-detail-text{
    margin:4% auto 8%;  
    line-height:1.9em;
}
.bf-lineup{
    width:88%;
    margin:10% 0 0;
}
.bf-bottom-area{
    display:block;
    width:85%;
    margin:0 auto;
    font-size:10px;
    line-height:1.3;
    letter-spacing:0.03em !important;
}
@media screen and (max-width: 480px){
#pokepeace_06::before{
  top: -65px;              /* ← 上に40pxオーバーハング */
}
.bf-character{
    right:2%;
}
.bf-title{
    width:48%;
}
.bf-detail-text{
  font-size:2.8vw;
}
.bf-bottom-area{
    font-size:2.0vw;
    line-height:1.2;
}
}


/*--------------------------------------------------------------
FOOTER
--------------------------------------------------------------*/
#pokepeace_07{
  position:relative;
  z-index: 15;
  padding:10% 0;
}
#pokepeace_07::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: -45px;              /* ← 上に40pxオーバーハング */
  height: 45px;             /* ← 画像の縦量に合わせて */
  width:100%;
  background: url("../img/footer_bg.png") no-repeat center bottom / 100% auto;
  pointer-events: none;
  z-index: 16;               /* 03内の装飾を前面に */
}
.footer-area{
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap:60px;
  row-gap: 16px;
}

/* SNS */
.footer-social{
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-btn{ display: inline-block; text-decoration: none; }
.social-circle{
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  transition: transform .15s ease, filter .15s ease;
}
.social-circle img{
  width: 100%; /* 画像は余白を持たせて表示（SVG推奨） */
  height: auto;
}

/* リンク（ブランドサイト／プライバシー） */
.footer-links{
  display: grid;
  gap: 10px;
  justify-content: start;
}
.footer-link{
  display: inline-flex;
  align-items: center;
  gap:10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .03em;
  font-feature-settings: "palt";
  line-height: 1.4;
}
.link-bullet{
  width: 18px;
  height: auto;
  flex: 0 0 auto;
}
/* コピーライト */
.footer-copy{
  grid-column: 1 / -1;
  text-align: center;
  margin: 20px 0 0;
  font-size:14px;
  font-weight: 600;
}
#pokepeace_07 .footer-area{
  grid-template-columns: max-content max-content; /* ← 1frをやめる */
  justify-content: center;                        /* ← グリッドを中央に配置 */
}
/* ② 右カラム内の文字は左揃えのまま */
#pokepeace_07 .footer-links{
  justify-items: start;
  text-align: left;
}

@media screen and (max-width: 480px){
.footer-area{
  column-gap:8vw;
}
/* SNS */
.footer-social{
  gap: 3vw;
}
.social-circle{
  width: 100%;
  height: 100%;
}

/* リンク（ブランドサイト／プライバシー） */
.footer-links{
  display: grid;
  gap: 4px;
  justify-content: start;
}
.footer-link{
  gap: 8px;
  font-size:3.2vw;
}
.link-bullet{
  width: 3.6vw;
}
/* コピーライト */
.footer-copy{
  margin: 0;
  font-size:2.8vw;
}
}



/*--------------------------------------------------------------
PH2対象店舗
--------------------------------------------------------------*/
@media screen and (max-width: 360px){
#pokepeace_03.store-section{
    background-image: url("../img/ph2_store_section_bg.png");
}
}
/*--------------------------------------------------------------
PH2キャンペーン
--------------------------------------------------------------*/
#pokepeace_08{
    background-image: url("../img/ph2_campaign_bg.png");
    background-repeat: no-repeat;
    background-position: 100% auto;
    background-size: cover;
    position:relative;
    padding:10% 0 25%;
    width:100%;
}
#pokepeace_08::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: -180px;               /* ← 上に40pxオーバーハング */
  height: 240px;             /* ← 画像の縦量に合わせて */
  width:100%;
  background: url("../img/campaign_border.png") no-repeat center bottom / 100% auto;
  pointer-events: none;
  z-index: 12;               /* 03内の装飾を前面に */
}
.ph2-campaign-title{
    width:50%;
    display:block;
    margin:10% auto 5%;
}
.ph2-campaign-area{
    display:block;
    margin:0 auto;
}
.ph2-campaign-detail-text{
    width:83%;
    display:block;
    margin:5% auto 9%;     
}
@media screen and (max-width: 767px){
.ph2-campaign-detail-text{
  font-size:14px;
}
}
@media screen and (max-width: 480px){
#pokepeace_08::before{
  top: -203px;
}
.ph2-campaign-detail-text{
  font-size:2.8vw;
  line-height:1.8em;
}
}
/*--------------------------------------------------------------
対象商品
--------------------------------------------------------------*/
.ph2-campaign-products-title{
    width:35%;
    display:block;
    margin:8% auto 0;
}
.campaign-item-area{
    width:100%;
    padding:0 5% 0 0;
    display:block;
    margin: 0 auto;
}
.campaign-item-inner{
    width:100%;
    gap:0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.campaign-item-img{
    width:45%;
}
.campaign-item-detail{
    width:55%;
}
.ph2-campaign-item-name-01{
    width:85%;
}
.ph2-campaign-item-text-01{
    margin:7% 0 0;
    width:80%;
}
.to-item-link {
    width:95%;
    display:block;
    margin:30% auto 0;
    color:#B194C4;
    background:#fff;
    padding:10px;
    border:1px solid #B194C4;
    border-radius:30px;
    font-size:18px;
    font-weight: 700;
    position: relative; /* ← アイコン配置の基準にする */
    text-align: center; /* テキストを中央寄せ */
}
.to-item-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    width: 20px;
    height: 16px;
    background: url("../img/ph2_item_link_icon.svg") no-repeat center center / contain;
    pointer-events: none; /* クリックの邪魔をしない */
}
.ph2-campaign-prize-title{
    width:35%;
    display:block;
    margin:17% auto 10%;
}
.ph2-prize-01{
    width:80%;
    display:block;
    margin:0 auto;
}
.ph2-prize-02{
    width:80%;
    display:block;
    margin:0 auto;
}
.ph2-prize-03{
    width:82%;
    display:block;
    margin:0 auto;
    position:relative;
    right:2%;
}
.ph2-campaign-item-size{
    display:block;
    margin:1.5% auto 12%;
}
.ph2-campaign-item-size03{
    position:relative;
    right:1.5%;
}
@media screen and (max-width: 480px){
.to-item-link {
    margin:23% auto 0;
    padding:1px 5px;
    border-radius:25px;
    font-size:3.6vw;
}
.to-item-link::after {
    width: 4.0vw;
    height: 3.2vw;
}
.ph2-campaign-item-size{
    font-size: 3.2vw;
    margin:1.0% auto 13%;
}
}

/*--------------------------------------------------------------
対象期間
--------------------------------------------------------------*/
/* ===== Theme ===== */
.period-card {
  --lilac: #B194C4;
  --brown: #89665E;
}

/* ===== Card（親は“土台”だけ。白パネルは::beforeで描く） ===== */
.period-card {
  position: relative;
  width: 90%;
  margin: 28% auto 10%;
  /* 親自体の背景や枠を外す（子に任せる） */
  background: transparent;
  border: none;
  border-radius: 15px;
  padding: 8% 5% 6%;
}

/* 白いパネル（枠付き）= 親の前面レイヤー */
.period-card::before {
  content: "";
  position: absolute;
  inset: 0;                 /* 親の内側いっぱい */
  background: #fff;
  border: 2px solid var(--lilac);
  border-radius: 10px;
  z-index: 1;               /* タブより上、本文より下 */
}

/* ===== タブ ===== */
.period-card__tab {
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width:35%;
  min-width:200px;
  padding: 15px 42px;
  background: var(--lilac);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  border-radius: 35px 35px 0 0;
  text-align: center;
  z-index: 0;               /* いちばん下（= 白パネルの“下”） */
}

/* ===== 本文 ===== */
.period-card__body {
  position: relative;
  display: grid;
  gap: 28px;
  z-index: 2;               /* 白パネルの上に置く */
}

/* ===== 行 ===== */
.period-row {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 14px;
}

/* ===== バッジ ===== */
.badge {
  width: 35%;
  display: inline-block;
  background: var(--lilac);
  color: #fff;
  font-weight: 600;
  line-height: 1;
  padding: 12px 25px;
  border-radius: 9999px;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* ===== 日付 ===== */
.period-date {
  margin: 2% 0;
  color: var(--brown);
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 28px;
}

@media screen and (max-width: 480px){
.period-card {
  margin: 24% auto 10%;
}
/* ===== タブ ===== */
.period-card__tab {
  top: -7%;
  min-width:150px;
  padding: 10px 25px 12px;
  font-size:3.8vw;
  border-radius: 20px 20px 0 0;
}
/* ===== 本文 ===== */
.period-card__body {
  gap: 16px;
}
/* ===== 行 ===== */
.period-row {
  gap: 12px;
}
/* ===== バッジ ===== */
.badge {
  width: 35%;
  font-size:3.2vw;
  padding: 8px 10px;
}
/* ===== 日付 ===== */
.period-date {
  margin:0 0 2%;
  font-size:5.0vw;
}
}
/*--------------------------------------------------------------
応募方法
--------------------------------------------------------------*/
.ph2-campaign-apply-title{
    width:35%;
    display:block;
    margin:15% auto 10%;
}
.apply-flow-area {
  position: relative;
  width: 90%;
  margin: 0 auto 10%;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding:30px 30px 110px;
  border: 2px solid #B194C4;
  border-radius: 15px;
}
.apply-table{
    width:95%;
    display:block;
    margin:3% auto 0;
}
.apply-table tr{
    width:100%;
    border-bottom:2px solid #F0E6F0;
}
.apply-table tr:last-child{
    width:100%;
    border-bottom:none;
}
.apply-table th{
    width:20%;
    vertical-align:top;
    padding:12.5% 4% 7% 0.5%;
}
.apply-table th img{
    width:100%;
}
.apply-table td{
    width:80%;
    vertical-align:top;
    padding:12% 0 7%;
    color:#8A675D;
}
.official-line{
    padding:5% 0;
}
.apply-table td span{
    display:block;
    font-weight:700;
    font-size:24px;
    line-height:1.65em;
}
.apply-table td span.margin-adjust{
    margin-top:5%;
}
p.step-add-text{
    display:block;
    margin:0 0 0 1em;
    text-indent:-1em;
    font-size:14px;
    color:#89665E;
    line-height:1.8em;
    font-weight:700;
    letter-spacing:0.02em !important;
}
.ph2-step-arrow{
    display:inline-block;
    width:8%;
    margin:6% 0 4%;
}
.step-table-bottom-area{
    width:95%;
    display:block;
    margin:0 auto;
}
p.step-add-text{
    line-height:2.0em;
    white-space:nowrap;
}
@media screen and (max-width: 480px){
.ph2-campaign-apply-title{
    margin:18% auto 7%;
}
.apply-flow-area {
  padding:2% 20px 15%;
}
.apply-table th{
    width:24%;
}
.apply-table th img{
    width:100%;
}
.apply-table td{
    width:76%;
}
.apply-table td span{
    font-size:4.0vw;
}
p.step-add-text{
    font-size:2.3vw;
}
}
/*--------------------------------------------------------------
レシート撮影時の注意事項
--------------------------------------------------------------*/
.ph2-reciept-title{
    width:50%;
    display:block;
    margin:15% auto 10%;
}
.shooting-collect-case{
    width:90%;
    display:block;
    margin:0 auto;
}
.shooting-no-correct{
    width:50%;
    display:block;
    margin:30% auto 10%;
}
.no-correct-area{
    width:calc(90% - 30px);
    display:block;
    margin:0 auto 8%;
}
.no-correct-column:nth-child(3n+1){
    padding:0 2% 6% 0;
}
.no-correct-column:nth-child(3n+2){
    padding:0 1% 6%;
}
.no-correct-column:nth-child(3n){
    padding:0 0 6% 2%;
}
.reciept-bottom-area{
    width:90%;
    display:block;
    margin:9% auto 18%;
    line-height:2.0em;
}

@media screen and (max-width: 480px){
.reciept-bottom-area{
    margin:11% auto 22%;
}
}