@charset "utf-8";

/* =====================================
  Price Page (price.html)
===================================== */

.p-price{
  color: var(--text);
}

main.p-price{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
main.p-price > section{
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
}

/* 
=========================
HEROの帯
========================= */

.p-price .goccha-price-hero{
  background: var(--orange-footer);
  padding: 10px 0 8px;   /* ← flow.html と同じ感覚 */
  margin-top: 8px;        /* グレー帯が見えるの防止 */
}


/* l-container--wide の中で、右859pxを確保する */
.p-price .goccha-price-hero__stage{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 620px; /* ← 右を固定 */
  align-items: center;
  position: relative;
  overflow: visible; /* はみ出し見せる */
}

/* 左テキスト（1280基準のコンテナはHTML側で .l-container を噛ませてる前提） */
.p-price .goccha-price-hero__contentWrap{
  z-index: 2;
}

/* 右イラスト：固定幅のまま、右に“どーん” */
.p-price .goccha-price-hero__media{
  width: 859px;
  justify-self: end;
  padding-top: 12px;   /* flowの右画像と同じノリ */
  padding-bottom: 8px;
  margin-right: -245px; /* ← “はみ出し量” ここで調整（-30〜-120） */
  z-index: 1;
}

.p-price .goccha-price-hero__media img{
  display: block;
  width: 859px;
  max-width: none;
  height: auto;
}
.p-price .goccha-price-hero__tagBrand {
    color: var(--orange);
}
/* 1280未満は崩れ防止で縮める */
@media (max-width: 1279px){
  .p-price .goccha-price-hero__stage{
    grid-template-columns: 1fr minmax(280px, 42vw);
  }
  .p-price .goccha-price-hero__media{
    width: 100%;
    margin-right: 0;
  }
  .p-price .goccha-price-hero__media img{
    width: 100%;
    max-width: 520px;
  }
}

/* SPは縦積み */
@media (max-width: 899px){
  .p-price .goccha-price-hero__stage{
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
  .p-price .goccha-price-hero__media{
    justify-self: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
.p-price .goccha-price-hero__tag{
display: inline-flex;
    align-items: center;
    gap: .35em;
    margin: 0 0 22px;
    padding: 8px 14px;
    background: #fff;
    border-radius: 10px;
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 1;
}

.p-price .goccha-price-hero__title{
	margin:0;
  font-weight: 500;
  line-height: 1.35;
  font-size: clamp(26px, 2.8vw, 40px);
}

.p-price .goccha-price-hero__lead{
  font-size: var(--fs-body);
  font-weight: 600;
}

/* ----------------------
  Intro（HERO直下の大見出し）
---------------------- */
.p-price .goccha-price-intro{
  padding: 64px 0 56px;
  background: #fff;
}

.p-price .goccha-price-intro__title{
  margin: 0;
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  font-size: clamp(22px, 2.6vw, 38px);
}

.p-price .goccha-price-intro__brand{
  color: var(--orange);
}

.p-price .goccha-price-intro__keyword{
  font-weight: 900;
}

.p-price .goccha-price-intro__text{
  margin: 22px auto 0;
  text-align: center;
  max-width: 980px;
  font-size: clamp(16px, 1.35vw, 20px); /* ← 少し大きめ */
  line-height: 1.9;
  color: var(--text);
}

@media (max-width: 899px){
  .p-price .goccha-price-intro{
    padding: 36px 0 34px;
  }

  .p-price .goccha-price-intro__title{
    font-size: clamp(20px, 6.4vw, 30px);
    line-height: 1.35;
	text-align: left;
  }

  .p-price .goccha-price-intro__text{
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.8;
	text-align: left;
  }
}

/* =========================
  QR駐輪シール（見本＋特徴）
========================= */
.p-price .goccha-price-seal{
  background: var(--bg-gray);
  padding: 56px 0;
}

.p-price .goccha-price-seal__title{
  margin: 0 0 42px;
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  font-size: clamp(22px, 2.4vw, 32px);
}
.p-price .goccha-price-seal__brand{
  color: var(--orange);
}
.p-price .goccha-price-seal__accent{
  color: var(--orange);
  font-weight: 900;
}

.p-price .goccha-price-seal__panel{
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow: hidden;
}


/* 本体 */
.p-price .goccha-price-seal__body{
  display: grid;
  grid-template-columns: 450px 1fr; /* ←左を少し広げて、右を少し右へ */
  gap: 34px;                        /* ←余白を広めに（見本っぽく） */
  padding: 70px 26px;
}

.p-price .goccha-price-seal__figure{
  margin: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: center;
}
.p-price .goccha-price-seal__figure img{
  display: block;
  width: min(280px, 100%);
  height: auto;
}
.p-price .goccha-price-seal__caption{
  margin: 0;
  font-size: 24px;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
	font-weight: 500;
}
.p-price .goccha-price-seal__note{
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
}
.p-price .goccha-price-seal__points{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 22px; /* ← 16px → 22px（見本はゆったり） */
}

.p-price .goccha-price-seal__point{
  position: relative;
  padding-left: 26px;
  min-height: 74px;        /* ←タイトル＋本文がある項目でも中央が安定 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* ←文字塊を縦中央へ */
}
.p-price .goccha-price-seal__point::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 58px;
  background: var(--orange);
}
.p-price .goccha-price-seal__pointTitle{
  margin: 0;
  font-weight: 800;
	font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.55;
}

.p-price .goccha-price-seal__pointText{
  margin: 0;
  font-size: clamp(14px, 1.05vw, 17px); /* ←UP */
  line-height: 1.85;
  color: var(--text);
}
/* SP */
@media (max-width: 899px){
  .p-price .goccha-price-seal{
    padding: 34px 0;
  }

  .p-price .goccha-price-seal__head{
    grid-template-columns: 1fr;
  }
  .p-price .goccha-price-seal__headRight{
    padding-left: 30px;
  }

  .p-price .goccha-price-seal__body{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .p-price .goccha-price-seal__points{
    gap: 12px;
  }
}

/* =========================
  Campaign（見本寄せ）
========================= */
.p-price .goccha-price-campaign{
  background: #fff;
  padding: 70px 0 54px;
}

.p-price .goccha-price-campaign__head{
  text-align: center;
}

.p-price .goccha-price-campaign__kicker{
  margin: 0;
  display: inline-block;
  color: var(--orange);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: .02em;
  padding: 0 84px; /* ←飾りのスペース */
  /* 波線（簡単＆綺麗） */
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  position: relative;
}

/* 真ん中線 */
.p-price .goccha-price-campaign__deco{
  position: absolute;
  top: 50%;
  width: 28px;              /* 真ん中線は短め */
  height: 7px;
  background: var(--orange);
  border-radius: 999px;
  pointer-events: none;
}

/* 上下の斜め線（真ん中線より少し長め） */
.p-price .goccha-price-campaign__deco::before,
.p-price .goccha-price-campaign__deco::after{
  content: "";
  position: absolute;
  left: 0;
  width: 32px;
  height: 7px;
  background: var(--orange);
  border-radius: 999px;

  /* ★内側（文字側）で“すぼむ”ように：右端を固定して回転 */
  transform-origin: right center;
}

.p-price .goccha-price-campaign__deco::before{ top: -14px; transform: rotate(25deg); }
.p-price .goccha-price-campaign__deco::after { top:  14px; transform: rotate(-25deg); }

/* 左：そのまま */
.p-price .goccha-price-campaign__deco--left{
  left: 0;
  transform: translate(-16px, -50%);
}

/* 右：左をミラー（これで左右の“すぼみ”が完全一致） */
.p-price .goccha-price-campaign__deco--right{
  right: 0;
  transform: translate(16px, -50%) scaleX(-1);
}
.p-price .goccha-price-campaign__title{
  margin: 52px 0 0;
  font-weight: 900;
  line-height: 1.25;
  font-size: clamp(28px, 3.0vw, 48px);
  letter-spacing: .01em;
}

.p-price .goccha-price-campaign__price{
  color: var(--orange);
  font-size: 1.35em;
  font-weight: 900;
}

.p-price .goccha-price-campaign__lead{
  margin: 16px 0 0;
  font-weight: 800;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.8;
  color: var(--text);
}

.p-price .goccha-price-campaign__badges{
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.p-price .goccha-price-campaign__badge{
  background: var(--green);
  color: #fff;
  border-radius: 10px;
  padding: 10px 26px;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  min-width: 180px;
  text-align: center;
}

.p-price .goccha-price-campaign__points{
  margin: 46px auto 0;
  padding: 0;
  list-style: none;
  max-width: 980px;
  display: grid;
  gap: 22px;
}

.p-price .goccha-price-campaign__point{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: center;
  font-weight: 900;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.7;
}

.p-price .goccha-price-campaign__icon{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 26px;
}
.p-price .goccha-price-campaign__icon{
  position: relative;
  font-size: 0; /* ←中の文字を隠す（HTMLに!が入っててもOK） */
}

/* 斜めの ! を描画 */
.p-price .goccha-price-campaign__icon::before{
  content: "!";
  display: block;
  color: #fff;
  font-weight: 900;
  font-size: 36px;          /* 大きさはここ */
  line-height: 1;
  transform: rotate(18deg); /* ←斜め（-12〜-22で調整） */
}
.p-price .goccha-price-campaign__divider{
  margin: 46px auto 0;
  height: 2px;
  width: min(980px, 100%);
  background: var(--orange);
  opacity: .85;
}

/* SP */
@media (max-width: 899px){
  .p-price .goccha-price-campaign{
    padding: 40px 0 34px;
  }

  .p-price .goccha-price-campaign__kicker{
    padding: 0 46px;
    text-underline-offset: 8px;
  }

  .p-price .goccha-price-campaign__title{
    margin-top: 18px;
    font-size: clamp(20px, 6.2vw, 28px);
	line-height: 1.25;
  }
  .p-price .goccha-price-campaign__title br{
    display: none;
  }

  .p-price .goccha-price-campaign__title,
  .p-price .goccha-price-campaign__lead{
    text-align: left;
  }

  /* 左寄せにした分、読みやすい幅に */
  .p-price .goccha-price-campaign__lead{
    margin-left: 0;
    margin-right: 0;
  }

  .p-price .goccha-price-campaign__badges{
    gap: 12px;
  }

  .p-price .goccha-price-campaign__badge{
    min-width: 0;
    padding: 10px 18px;
    font-size: 13px;
  }

  .p-price .goccha-price-campaign__points{
    margin-top: 22px;
    gap: 14px;
  }

  .p-price .goccha-price-campaign__point{
    grid-template-columns: 44px 1fr;
    font-size: 20px;
  }

  .p-price .goccha-price-campaign__icon{
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  .p-price .goccha-price-campaign__divider{
    margin-top: 28px;
  }
}

/* =========================
  Pay（見本：①グレー帯 / ②白帯）
========================= */
.p-price .goccha-price-pay{
  background: #fff;
  padding: 0;
}

.p-price .goccha-price-pay__head{
  text-align: center;
  margin-bottom: 30px;
}

.p-price .goccha-price-pay__title{
  margin: 0;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .01em;
  font-size: clamp(28px, 3.2vw, 46px);
}
.p-price .goccha-price-pay__accent{ color: var(--orange); }

.p-price .goccha-price-pay__lead{
  margin: 18px auto 0;
  max-width: 980px;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.9;
  color: var(--text);
  font-weight: 700;
}

/* ケース共通 */
.p-price .goccha-paycase{
  padding: 46px 0 54px;
}
.p-price .goccha-paycase--gray{ background: var(--bg-gray); }
.p-price .goccha-paycase--white{ background: #fff; }

.p-price .goccha-paycase__title{
  margin: 0 0 50px;
  text-align: center;
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-align: center; /* 改行時の保険 */
}
.p-price .goccha-paycase__no{
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid #111;
  font-size: 26px;
  font-weight: 700; /* 数字をくっきり */
  margin-right: 0;
  background: transparent;
  line-height: 1;
}
.p-price .goccha-paycase__accentGreen{ color: var(--green); }
.p-price .goccha-paycase__accentOrange{ color: var(--orange); }

/* 2カラム */
.p-price .goccha-paycase__grid{
  display: grid;
  grid-template-columns: 640px 1fr;
  gap: 26px;
  align-items: start;
}

/* 左：説明カード群 */
.p-price .goccha-paycase__cards{
  display: grid;
  gap: 20px;
}


.p-price .goccha-paycard{
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 26px rgba(0,0,0,.12); /* 影を強め */
  position: relative;
  display: flex;
  align-items: center;   /* ← 縦中央 */
  min-height: 150px;      /* すでに入れてる基準値 */
  padding: 18px 20px 18px 120px; /* ← 左を広め（アイコン分） */
}
/* 枠なしの器 */
.p-price .goccha-paycard__icon{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}

/* PNGを“形”として使って、色は currentColor で塗る */
.p-price .goccha-paycard__icon::after{
  content: "";
  width: 84px;
  height: 84px;
  background: currentColor;
  -webkit-mask: url("../img/icon-cloud.png") center / contain no-repeat;
          mask: url("../img/icon-cloud.png") center / contain no-repeat;
}

/* カードの色（すでにあるならOK） */
.p-price .goccha-paycard--green{ color: var(--green); }
.p-price .goccha-paycard--orange{ color: var(--orange); }

.p-price .goccha-paycard__text{
  margin: 0;
  color: var(--text);
  font-weight: 900;
  line-height: 1.65;
  font-size: 26px;
}

/* 下の帯（人物＋強調文） */
.p-price .goccha-paybar{
  display: grid;
  grid-template-columns: 158px 1fr;
  gap: 16px;
  align-items: center;
  padding: 0 16px;
  border-radius: 4px;
  overflow: visible; /* ←これ重要 */
  position: relative;
  margin-top: 14px;
  min-height: 150px;
}


.p-price .goccha-paybar__illust{
  width: 158px;
  height: 143px;
  transform: translateY(-16px); /* ←上にはみ出させる量（-10〜-20で調整） */
}
.p-price .goccha-paybar--green .goccha-paybar__illust{
  background: url("../img/paybar-green.png") top center / contain no-repeat;
}

.p-price .goccha-paybar--orange .goccha-paybar__illust{
  background: url("../img/paybar-orange.png") top center / contain no-repeat;
}


.p-price .goccha-paybar__text{
  margin: 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.6;
  font-size: 24px;
}

.p-price .goccha-paybar--green{ background: var(--green); }
.p-price .goccha-paybar--orange{ background: var(--orange); }

/* 右：図 */
.p-price .goccha-paycase__figure{
  margin: 0;
  display: grid;
  gap: 10px;            /* 図と注釈の間 */
  align-content: start;
}

.p-price .goccha-paycase__figure img{
  display: block;
  width: 100%;
  max-width: 590px; /* 520〜600で好み調整 */
  height: auto;
  margin-left: auto; /* 右寄せ */
}
/* 注釈：右カラム内で左寄せにする（見本寄せ） */

.p-price .goccha-paycase__notes{
  margin: 10px 0 0 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
}

.p-price .goccha-paycase__note{
  display: block;
  padding-left: 1em;   /* ←「※」+少し余白ぶん */
  text-indent: -1em;   /* ←1行目の※だけ左へ出す */
}

.p-price .goccha-paycase__note + .goccha-paycase__note{
  margin-top: 4px;
}
/* SP */
@media (max-width: 899px){
  .p-price .goccha-price-pay{
    padding-top: 0;
  }
  .p-price .goccha-paycase{
    padding: 26px 0 34px;
  }
  .p-price .goccha-paycase__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-price .goccha-paycard{
    padding: 14px 14px 14px 56px;
  }
  .p-price .goccha-paycard__text{
    font-size: 14px;
  }
  .p-price .goccha-paybar{
    grid-template-columns: 56px 1fr;
  }
}

/* =========================
  Recommend（4枚カード）
========================= */
.p-price .goccha-price-rec{
  background: var(--bg-gray);
  padding: 64px 0 72px;
}

.p-price .goccha-price-rec__title{
  margin: 0;
  text-align: center;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .01em;
  font-size: clamp(26px, 3vw, 44px);
}

.p-price .goccha-price-rec__accent{
  color: var(--green);
}

.p-price .goccha-price-rec__grid{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.p-price .goccha-price-rec-card{
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 0;               /* 見本が角丸弱め（必要なら 6px とかに） */
  padding: 18px 16px 16px;
  text-align: center;
  position: relative;
  overflow: visible; /* ←はみ出し許可 */
}
.p-price .goccha-price-rec-card{
  position: relative;
  border: 2px solid var(--green);
  padding: 0 16px 16px;
  text-align: center;
}

.p-price .goccha-price-rec-card__media{
  margin: 0;
  height: 140px;               /* ←ここで詰め具合を作る（120〜160で調整） */
  display: grid;
  place-items: end center;     /* 下に寄せる */
  overflow: visible;
}

.p-price .goccha-price-rec-card__img{
  width: 140px;
  height: auto;
  display: block;
  transform: translateY(-16px); /* はみ出し */
  margin: 0;                    /* ←余白ゼロ */
}

.p-price .goccha-price-rec-card__text{
  margin: 15px 0 0;   /* ←画像直下に詰める */
  font-weight: 700;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text);	
}

/* 2列（タブレット） */
@media (max-width: 1099px){
  .p-price .goccha-price-rec__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1列（SP） */
@media (max-width: 899px){
  .p-price .goccha-price-rec{
    padding: 38px 0 44px;
  }
  .p-price .goccha-price-rec__grid{
    margin-top: 18px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .p-price .goccha-price-rec-card{
    padding: 16px 14px;
  }
}

/* セクション間の縦リズム */
.p-price section{
  scroll-margin-top: 80px;
}


/* =====================================
  SP Final Tuning (Price)
  支払い方法 + おすすめ4枚
===================================== */
@media (max-width: 899px){

  /* --- 支払い方法（①②） --- */
  .p-price .goccha-paycase{
    padding: 22px 0 28px;
  }

  .p-price .goccha-paycase__title{
    font-size: clamp(18px, 5.2vw, 24px);
    position: relative;
    display: block;          /* flexをやめる */
    text-align: left;        /* ←自然な改行にする（おすすめ） */
    padding-left: 40px;      /* ①のぶん空ける */
    margin-bottom: 14px;
    line-height: 1.35;
  }

  .p-price .goccha-paycase__no{
    position: absolute;
    left: 0;
    top: .1em;               /* 縦位置微調整 */
    margin: 0;
    width: 28px;
    height: 28px;
    font-size: 14px;
    line-height: 1;
  }

  .p-price .goccha-paycase__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* 左：カード群 */
  .p-price .goccha-paycase__cards{
    gap: 12px;
  }

  .p-price .goccha-paycard{
    min-height: 74px;
    padding: 14px 14px 14px 70px;
    box-shadow: 0 10px 18px rgba(0,0,0,.10);
  }

  .p-price .goccha-paycard__icon{
    left: 14px;
    width: 40px;
    height: 40px;
  }

  .p-price .goccha-paycard__icon::after{
    width: 40px;
    height: 40px;
  }

  .p-price .goccha-paycard__text{
    font-size: 15px;
    line-height: 1.6;
  }

  /* 下の色帯（人物＋白文字） */
  .p-price .goccha-paybar{
    min-height: 86px;
    grid-template-columns: 92px 1fr;
    padding: 12px 12px;
    margin-top: 10px;
  }

  .p-price .goccha-paybar__illust{
    width: 92px;
    height: 82px;
    transform: translateY(-18px);
  }

  .p-price .goccha-paybar__text{
    font-size: 15px;
    line-height: 1.6;
  }

  /* 右：図（画像） */
  .p-price .goccha-paycase__figure img{
    max-width: 520px;
    margin: 0 auto;
  }

  .p-price .goccha-paycase__notes{
    font-size: 12px;
    line-height: 1.7;
  }

  /* --- おすすめ4枚 --- */
  .p-price .goccha-price-rec{
    padding: 34px 0 40px;
  }

  .p-price .goccha-price-rec__title{
    font-size: clamp(20px, 6.2vw, 28px);
  }

  /* 2列→狭ければ自動で1列に落ちる */
  .p-price .goccha-price-rec__grid{
    margin-top: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .p-price .goccha-price-rec-card{
    padding: 0 12px 12px;
  }

  .p-price .goccha-price-rec-card__media{
    height: 140px;
  }

  .p-price .goccha-price-rec-card__img{
    width: 130px;
    transform: translateY(-12px);
  }

  .p-price .goccha-price-rec-card__text{
    margin-top: 10px;
    font-size: 18px;
    line-height: 1.55;
  }

}

/* さらに小さい端末は1列に */
@media (max-width: 420px){
  .p-price .goccha-price-rec__grid{
    grid-template-columns: 1fr;
  }
}