/* パシャっち 紹介サイトのスタイル。配色と字体はアプリ本体のテーマ定義に合わせる。 */

:root {
  --cream: #fbf6f1;
  --cream-deep: #f3e9e0;
  --coral: #b85a49;
  --coral-dark: #a04c3c;
  --coral-soft: #f2d3c9;
  --sage: #b9cdb7;
  --sage-soft: #e3ece1;
  --mustard: #e9c46a;
  --mustard-soft: #f7ebcb;
  --sky: #bfd4e3;
  --sky-soft: #e4edf4;
  --ink: #4a3b36;
  --ink-soft: #7a6a64;
  --white: #ffffff;
  --radius: 28px;
  --radius-sm: 16px;
  --shadow: 0 18px 50px rgba(74, 59, 54, 0.12);
  --max: 1040px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--coral);
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0.02em;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ボタン */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--white);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(184, 90, 73, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:hover {
  background: var(--coral-dark);
  transform: translateY(-1px);
}

.btn svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.btn--ghost {
  background: var(--white);
  color: var(--coral);
  box-shadow: inset 0 0 0 2px var(--coral-soft);
}

.btn--ghost:hover {
  background: var(--coral-soft);
}

.btn--small {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  box-shadow: none;
}

/* ヘッダー */

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 246, 241, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.nav {
  display: none;
  gap: 24px;
  margin-left: auto;
  font-size: 15px;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.nav a:hover {
  color: var(--coral);
}

.header .btn {
  margin-left: auto;
}

@media (min-width: 820px) {
  .nav {
    display: flex;
  }

  /* ナビが見えているときだけ、ボタンはナビの右隣に置く。狭い画面ではナビが無いので右端に寄せる */
  .nav + .btn {
    margin-left: 0;
  }
}

/* 狭い画面のヘッダー。アプリ名と Play ボタンを 1 行に収めるため、間隔とボタンを詰め、英語は「Get it on」を省く */

@media (max-width: 819px) {
  .header .wrap {
    gap: 12px;
  }
}

@media (max-width: 399px) {
  .header .btn {
    padding: 0 16px;
    font-size: 14px;
  }

  .header .btn svg,
  .btn__long {
    display: none;
  }
}

/* 320px 級の狭い画面では、ヘッダーのアプリ名を読み上げ専用にして Play ボタンと重ならないようにする */

@media (max-width: 359px) {
  .brand__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ヒーロー */

.hero {
  position: relative;
  padding: 48px 0 24px;
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  gap: 32px;
  align-items: center;
}

.hero__copy {
  text-align: center;
}

.hero__eyebrow {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--coral-soft);
  color: var(--coral);
  font-size: 14px;
  font-weight: 700;
}

.hero h1 {
  margin: 20px 0 16px;
  font-size: clamp(34px, 7vw, 52px);
  line-height: 1.3;
}

.hero__lead {
  font-size: 18px;
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.hero__note {
  font-size: 14px;
  color: var(--ink-soft);
}

.hero__shot {
  position: relative;
  width: min(320px, 78%);
  margin: 0 auto;
}

.blob {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.blob--coral {
  width: 420px;
  height: 420px;
  background: var(--coral-soft);
  top: -160px;
  left: -180px;
  opacity: 0.7;
}

.blob--mustard {
  width: 320px;
  height: 320px;
  background: var(--mustard-soft);
  right: -120px;
  bottom: -40px;
}

.sparkle {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

@media (min-width: 820px) {
  .hero {
    padding: 72px 0 40px;
  }

  .hero .wrap {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .hero__copy {
    text-align: left;
  }

  .hero__actions {
    align-items: flex-start;
  }

  .hero__shot {
    width: min(340px, 100%);
  }
}

/* セクション共通 */

.section {
  padding: 72px 0;
}

.section--sage {
  background: var(--sage-soft);
}

.section--sky {
  background: var(--sky-soft);
}

.section--mustard {
  background: var(--mustard-soft);
}

.section--coral {
  background: var(--coral-soft);
}

.section__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.section__label {
  display: block;
  margin-bottom: 10px;
  color: var(--coral);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.section__head h2 {
  font-size: clamp(26px, 5vw, 36px);
}

.section__head p {
  margin-top: 14px;
  color: var(--ink-soft);
}

/* 悩み → 解決 */

.pairs {
  display: grid;
  gap: 16px;
}

.pair {
  /* タグ列と本文列の 2 列。「いままで」「パシャっち」のタグ幅が違っても本文の開始位置が揃うよう、タグは共通の列に置く */
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--white);
}

.pair__before,
.pair__after {
  display: contents;
}

.pair__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.pair__before .pair__tag {
  background: var(--cream-deep);
  color: var(--ink-soft);
}

.pair__after .pair__tag {
  background: var(--coral);
  color: var(--white);
}

.pair__before p {
  color: var(--ink-soft);
}

.pair__after p {
  font-weight: 700;
}

@media (min-width: 820px) {
  .pairs {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 3 列では 1 列が狭いので、タグを本文の上に置いて 1 行を長くする */
  .pair {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pair__tag {
    justify-self: start;
  }

  .pair__after .pair__tag {
    margin-top: 12px;
  }
}

/* 使い方 */

.steps {
  display: grid;
  gap: 24px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 28px 24px 24px;
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mustard);
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
}

.step h3 {
  margin: 14px 0 8px;
  font-size: 22px;
}

.step p {
  color: var(--ink-soft);
  font-size: 16px;
}

.step .phone {
  width: min(220px, 70%);
  margin: 20px auto 0;
  padding: 8px;
  border-radius: 30px;
}

.step .phone img {
  border-radius: 22px;
}

@media (min-width: 820px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 特長 */

.features {
  display: grid;
  gap: 24px;
}

.feature {
  display: grid;
  gap: 20px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--white);
}

.feature__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
}

.feature__icon svg {
  width: 30px;
  height: 30px;
}

.feature--sage .feature__icon {
  background: var(--sage-soft);
}

.feature--sky .feature__icon {
  background: var(--sky-soft);
}

.feature--mustard .feature__icon {
  background: var(--mustard-soft);
}

.feature--coral .feature__icon {
  background: var(--coral-soft);
}

.feature h3 {
  margin: 14px 0 8px;
  font-size: 22px;
}

.feature p {
  color: var(--ink-soft);
  font-size: 16px;
}

.feature > img,
.feature > .phone {
  width: min(200px, 60%);
  margin: 0 auto;
}

.feature > img {
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.feature > .phone {
  padding: 8px;
  border-radius: 30px;
}

.feature .phone img {
  border-radius: 22px;
}

@media (min-width: 640px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .feature--text {
    grid-template-columns: 1fr;
  }

  .feature > img,
  .feature > .phone {
    width: 150px;
    margin: 0;
  }

  /* 特長が奇数個のとき、最後の 1 つは 2 列ぶんに広げて空きを作らない */
  .feature:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* 安心 */

.trust {
  display: grid;
  gap: 16px;
}

.trust__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: var(--radius-sm);
  background: var(--white);
}

.trust__item svg {
  flex: none;
  width: 32px;
  height: 32px;
  margin-top: 4px;
}

.trust__item h3 {
  font-size: 18px;
}

.trust__item p {
  color: var(--ink-soft);
  font-size: 15px;
}

.trust__link {
  text-align: center;
  margin-top: 28px;
  font-size: 15px;
}

@media (min-width: 640px) {
  .trust {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 料金 */

.plans {
  display: grid;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}

.plan {
  padding: 32px 28px;
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
}

.plan--paid {
  box-shadow: inset 0 0 0 3px var(--mustard);
}

.plan__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}

.plan__price {
  margin: 8px 0 4px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

.plan__price small {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-soft);
}

.plan__sub {
  color: var(--ink-soft);
  font-size: 14px;
}

.plan ul {
  margin-top: 20px;
  text-align: left;
  display: grid;
  gap: 8px;
}

.plan li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sage);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (min-width: 640px) {
  .plans {
    grid-template-columns: 1fr 1fr;
  }
}

/* よくある質問 */

.faq {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq details {
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 0 24px;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 36px 18px 0;
  font-weight: 700;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid var(--coral);
  border-bottom: 2.5px solid var(--coral);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.faq details p {
  padding: 0 0 20px;
  color: var(--ink-soft);
  font-size: 16px;
}

/* 締めの呼びかけ */

.cta {
  text-align: center;
  padding: 80px 0;
}

.cta h2 {
  font-size: clamp(26px, 5vw, 36px);
}

.cta p {
  margin: 14px 0 28px;
  color: var(--ink-soft);
}

.cta__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  border-radius: 28px;
  box-shadow: var(--shadow);
}

/* フッター */

.footer {
  padding: 40px 0 48px;
  background: var(--cream-deep);
  font-size: 14px;
  color: var(--ink-soft);
}

.footer .wrap {
  display: grid;
  gap: 16px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer__links a {
  color: var(--ink-soft);
}

.footer__links a:hover {
  color: var(--coral);
}

.footer small {
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn {
    transition: none;
  }
}

/* ヒーローの端末枠。画面写真は画面部分だけを切り出し、枠は CSS で描く */

.phone {
  padding: 12px;
  border-radius: 44px;
  background: #2b2320;
  box-shadow: var(--shadow);
}

.phone img {
  border-radius: 34px;
}

.hero__shot .phone {
  width: min(300px, 100%);
  margin: 0 auto;
}

.feature--text {
  align-content: start;
}

/* Google Play の公式バッジ。画像は改変せず、高さだけを決める（画像に余白が含まれる） */

.badge {
  display: inline-block;
  line-height: 0;
}

.badge img {
  height: 68px;
  width: auto;
}

.hero__actions .badge {
  margin-left: -10px;
}

@media (max-width: 819px) {
  .hero__actions .badge {
    margin-left: 0;
  }
}

/* 規約ページ */

.legal {
  padding: 40px 0 72px;
}

.legal .wrap {
  max-width: 720px;
}

.legal h1 {
  font-size: clamp(26px, 5vw, 32px);
  margin-bottom: 4px;
}

.legal h2 {
  font-size: 19px;
  color: var(--coral);
  margin: 36px 0 8px;
}

.legal .meta {
  color: var(--ink-soft);
  font-size: 14px;
}

.legal .summary {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-top: 20px;
}

.legal p + p {
  margin-top: 10px;
}

.legal ul {
  list-style: disc;
  padding-left: 1.4em;
  display: grid;
  gap: 4px;
}

/* 日本語の折り返し。見出しや短い文言は、HTML 側で文節の切れ目に置いた <wbr> だけで改行し、語の途中では切らない。
   本文の段落は自然に折り返しつつ各行の長さを揃え、末尾に 1〜2 文字だけが残る孤立行を避ける */

:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3,
:lang(ja) summary,
:lang(ja) .hero__eyebrow,
:lang(ja) .hero__lead,
:lang(ja) .hero__note,
:lang(ja) .section__head p,
:lang(ja) .plan li,
:lang(ja) .plan__sub,
:lang(ja) .cta p,
:lang(ja) .footer small {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 見出しは行の長さを揃え、段落は最終行に 1 語だけが残らないようにする（全言語） */

h1,
h2,
h3,
summary {
  text-wrap: balance;
}

.hero__lead,
.pair p,
.step p,
.feature p,
.trust__item p,
.faq details p,
.cta p {
  text-wrap: pretty;
}

/* 日本語の段落は語の区切りが無く pretty では孤立行を避けられないため、行の長さを揃える方を使う */

:lang(ja) .pair p,
:lang(ja) .step p,
:lang(ja) .feature p,
:lang(ja) .trust__item p,
:lang(ja) .faq details p {
  text-wrap: balance;
}

.btn,
.plan__price,
.pair__tag {
  white-space: nowrap;
}

/* 段落の結びの語。末尾に 1〜2 文字だけが残らないよう、行をまたがせない */

.nobr {
  white-space: nowrap;
}