/* ==================================================
   デザイントークン：サイト全体で使う色・幅・フォント
   ================================================== */
:root {
  --green: #3a844f;
  --deep: #387f4b;
  --paper: #f2efe6;
  --surface: #fdfdfc;
  --ink: #252525;
  --muted: #6d716d;
  --max: 1088px;
  --content-width: calc(100% - 48px);
  --line: rgba(58,132,79,.72);
  --shadow-card: 0 8px 21px rgba(0,0,0,.12);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 72px;
  --space-8: 96px;
  --space-9: 112px;
  --font-caption: 12px;
  --font-body: 14px;
  --font-body-large: 16px;
  --font-label: 16px;
  --font-subheading: 18px;
  --font-card-title: 22px;
  --font-section-heading: clamp(24px,2.5vw,32px);
  font-family: "Noto Sans JP","Yu Gothic",sans-serif;
  color: var(--ink);
  background: var(--paper)
}


.header .logo img {
  filter: brightness(0) saturate(100%) invert(43%) sepia(24%) saturate(1120%) hue-rotate(83deg) brightness(91%) contrast(84%)
}


.hero h1 span.hero-line {
  display: block;
  white-space: nowrap;
  color: var(--ink)
}


.hero h1 .hero-line strong {
  color: var(--green);
  font-weight: inherit
}


.nav-cta img,.app-button img {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  object-fit: contain;
  filter: brightness(0) invert(1)
}


.header .nav-cta,.app-button {
  min-width: 170px;
  min-height: 36px;
  padding: 8px 16px;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap
}


.download .app-button img,.header .nav-cta img,footer .app-button img {
  width: 13px;
  height: 13px;
  margin: 0;
  object-fit: contain;
  filter: brightness(0) invert(1)
}


/* ==================================================
   ベーススタイル：リセット、本文、リンク、画像
   ================================================== */
* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: .02em
}

a {
  color: inherit;
  text-decoration: none
}

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

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

button {
  font: inherit;
  color: inherit;
  border: 0
}

a:focus-visible,button:focus-visible {
  outline: 3px solid #79bd8b;
  outline-offset: 3px
}

/* ==================================================
   ヘッダー・ロゴ・ナビゲーション
   ================================================== */
.header {
  position: absolute;
  z-index: 5;
  top: 34px;
  left: 50%;
  display: flex;
  width: min(var(--max),var(--content-width));
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%)
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 22px;
  font-weight: 700
}

.logo img {
  width: 30px;
  height: 30px
}

.logo small {
  font-size: 10px;
  font-weight: 600
}

.header nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 8px 6px 22px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  box-shadow: 0 5px 18px rgba(0,0,0,.09);
  font-size: 12px;
  backdrop-filter: blur(14px)
}

.header nav i {
  opacity: .45
}

.series-menu {
  position: relative
}

.series-menu summary {
  display: block;
  list-style: none;
  cursor: pointer
}

.series-menu summary::-webkit-details-marker {
  display: none
}

.series-menu-list {
  position: absolute;
  z-index: 10;
  top: calc(100% + 16px);
  left: 50%;
  display: grid;
  width: 190px;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 15px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 30px rgba(37,37,37,.13);
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%)
}

.series-menu-list a {
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap
}

.series-menu-list a:hover {
  background: rgba(58,132,79,.11);
  color: var(--green)
}

.nav-cta,.app-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  transition: .2s
}

.nav-cta:hover,.app-button:hover {
  background: #2e6d40;
  transform: translateY(-1px)
}


/* ==================================================
   ヒーロー：左側のコピーと右側の画像エリア
   ================================================== */
.hero {
  display: grid;
  min-height: 780px;
  grid-template-columns: 1fr 1fr
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px max(48px,calc((100vw - 1088px)/2)) 60px
}

.hero h1 {
  margin: 0;
  font-size: clamp(38px,4vw,52px);
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: .05em
}

.hero h1 span {
  color: var(--green)
}

.hero-copy>p {
  margin: 30px 0;
  color: #343834;
  font-weight: 500;
  line-height: 1.9
}

.download {
  display: flex;
  align-items: center;
  gap: 18px
}

.download img {
  width: 48px;
  height: 48px
}

.download-qr {
  display: inline-flex;
  flex: none;
  border-radius: 4px
}

.download-qr:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px
}

.download-note {
  margin: 10px 0 0;
  color: #526057;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em
}

.hero-download-note {
  margin: 10px 0 0
}

.hero-scroll-cue {
  display: none
}

.benefits {
  display: flex;
  gap: 28px;
  margin: 42px 0 0;
  padding: 0;
  list-style: nones
}

.benefits li {
  display: grid;
  min-width: 90px;
  place-items: center;
  text-align: center
}

.benefits li+li {
  border-left: 1px solid rgba(58,132,79,.25);
  padding-left: 28px
}

.benefits img {
  width: 34px;
  height: 34px;
  margin-bottom: 8px
}

.benefits span {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.55
}

.hero-visual {
  position: relative;
  overflow: hidden
}

.hero-visual>img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.suggestion {
  position: absolute;
  right: 24px;
  bottom: 70px;
  display: grid;
  width: 280px;
  padding: 18px 145px 16px 18px;
  border-radius: 14px;
  background: rgba(242,239,230,.92);
  box-shadow: 0 4px 22px rgba(0,0,0,.12);
  line-height: 1.55
}

.suggestion:after {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 120px;
  height: calc(100% - 20px);
  border-radius: 10px;
  background: url("image/mv_1_sub.webp") center/cover;
  content: ""
}

.suggestion small {
  color: var(--green)
}

.suggestion b {
  font-size: 13px
}

.suggestion span {
  font-size: 9px
}


/* ==================================================
   今日の楽しみ：タブと提案カード
   ================================================== */
.ideas {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-9);
  text-align: center
}

.eyebrow,.label {
  margin: 0 0 10px;
  color: var(--green);
  font-weight: 600
}

.eyebrow {
  font-size: var(--font-label)
}

.ideas h2,.faq h2 {
  display: inline-block;
  margin: 0;
  padding: 8px 28px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 26px;
  line-height: 1.35
}

.ideas h2 {
  display: inline-flex;
  position: relative;
  width: min(470px,calc(100vw - 40px));
  min-height: 65px;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
  border-radius: 133px;
  background: #3a834e;
  font-size: var(--font-section-heading);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap
}

.ideas h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 22px;
  height: 14px;
  background: #3a834e;
  clip-path: polygon(50% 100%,0 0,100% 0);
  transform: translateX(-50%)
}

.heading-comma {
  display: inline-block;
  margin-right: -.24em
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin: 40px auto 34px;
  border-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.tabs::-webkit-scrollbar {
  display: none
}

.tab {
  margin-bottom: -2px;
  padding: 0 10px 14px;
  border-bottom: 2px solid #b9bbb8;
  background: none;
  color: #92938f;
  font-size: 16px;
  cursor: pointer
}

.tab.is-active {
  border-bottom: 2px solid var(--ink);
  color: var(--ink)
}

.idea-cards {
  --idea-card-width: 350px;
  width: 100vw;
  margin: 40px 0 0 calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 8px;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch
}

.idea-cards::-webkit-scrollbar {
  display: none
}

.idea-cards:active {
  cursor: grabbing
}

.idea-cards:active .idea-track {
  animation-play-state: paused
}

.idea-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 24px;
  animation: idea-carousel 64s linear infinite;
  will-change: transform
}

.idea-cards article {
  position: relative;
  flex: 0 0 var(--idea-card-width);
  width: var(--idea-card-width);
  height: 114px;
  padding-top: 15px
}

.idea-cards article::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 99px;
  border: 1px solid #3a844f;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,.1)
}

.idea-cards em {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  min-width: 182px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 3px 18px 4px;
  border: 1px solid #3a844f;
  border-radius: 999px;
  background: var(--surface);
  color: var(--green);
  font-size: var(--font-body);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%)
}

.idea-cards em::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  border-right: 1px solid #3a844f;
  border-bottom: 1px solid #3a844f;
  background: var(--surface);
  transform: translateX(-50%) rotate(45deg)
}

.idea-cards b {
  position: absolute;
  top: 48px;
  left: 54px;
  z-index: 1;
  width: 242px;
  color: #2a2a2a;
  font-size: var(--font-body-large);
  font-weight: 400;
  line-height: 22px;
  text-align: center
}

.idea-cards .idea-title-two-line {
  top: 40px
}

.idea-cards small {
  position: absolute;
  top: 84px;
  left: 98px;
  z-index: 1;
  width: 155px;
  color: #2a2a2a;
  font-size: var(--font-caption);
  line-height: 18px;
  text-align: center
}

@keyframes idea-carousel {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(calc((var(--idea-card-width) + 24px) * -5))
  }
}


/* ==================================================
   機能紹介：説明文、スマートフォン画像、操作カード
   ================================================== */
.feature {
  display: grid;
  max-width: var(--max);
  min-height: 630px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin: auto;
  padding: 70px 0 90px
}

.feature-copy {
  padding-left: 24px
}

.feature-copy h2 {
  margin: 0 0 30px;
  color: var(--green);
  font-size: 24px
}

.feature-copy h2 span {
  display: block;
  font-size: 20px
}

.feature-copy h3 {
  margin: 24px 0 4px;
  font-size: 14px
}

.feature-copy>p {
  max-width: 470px;
  margin: 0;
  font-size: 12px
}

.phone-demo {
  position: relative;
  height: 550px
}

.phone {
  height: 540px;
  margin: 0 auto;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.15))
}

.tip {
  position: absolute;
  bottom: 80px;
  left: 10px;
  width: 210px
}

.carousel-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px
}

.carousel-nav > button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,.12)
}

.carousel-nav i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b8d7c0
}

.carousel-nav i:first-of-type {
  background: var(--green)
}


/* ==================================================
   選ばれている理由
   ================================================== */
.reasons {
  width: min(var(--max),var(--content-width));
  max-width: var(--max);
  margin: auto;
  padding: var(--space-8) 0 216px;
  text-align: center
}

.reason-eyebrow {
  margin: 0 0 8px;
  color: var(--green);
  font-size: var(--font-label);
  font-weight: 500;
  line-height: 1.5
}

.reason-heading {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 18px 32px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: var(--font-section-heading);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em
}

.reason-heading::after {
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 29px;
  height: 18px;
  background: var(--green);
  clip-path: polygon(50% 100%,0 0,100% 0);
  content: "";
  transform: translateX(-50%)
}

.reason-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 140px;
  row-gap: 46px;
  margin-top: 72px;
  text-align: left
}

.reason-grid article {
  min-width: 0
}

.reason-grid article:nth-child(even) {
  transform: translateY(134px)
}

.reason-visual-row {
  display: contents
}

.reason-media {
  overflow: hidden;
  width: min(365px,calc(100% - 84px));
  aspect-ratio: 365/250;
  margin-left: auto;
  border-radius: 16px
}

.reason-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.reason-media picture {
  display: block;
  width: 100%;
  height: 100%
}

.reason-number {
  display: block;
  margin-top: -69px;
  color: var(--green);
  font-family: "Montserrat","Noto Sans JP",sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em
}

.reason-grid h3 {
  margin: 7px 0 10px;
  font-size: var(--font-card-title);
  line-height: 1.5
}

.reason-grid p {
  margin: 0;
  font-size: var(--font-body-large);
  line-height: 1.5
}

.reason-grid .reason-note {
  margin-top: 2px;
  font-size: var(--font-caption);
  line-height: 1.5;
  letter-spacing: .08em
}


/* ==================================================
   FAQ・お問い合わせ・SNS
   ================================================== */
.faq {
  max-width: var(--max);
  margin: auto;
  padding: 80px 0 60px;
  text-align: center
}

.faq h2 {
  padding: 0;
  background: none;
  color: var(--green);
  font-size: 28px
}

.faq-list {
  margin-top: 26px;
  text-align: left
}

.faq-item {
  margin-bottom: 8px;
  border: 1.4px solid var(--line);
  border-radius: 8px
}

.faq-item button {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: none;
  color: var(--green);
  cursor: pointer
}

.faq-item p {
  display: none;
  margin: 0 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(58,132,79,.4);
  color: var(--green)
}

.faq-item.is-open p {
  display: block
}

.faq-item p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px
}

.contact {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 10px 28px;
  border: 1.4px solid var(--green);
  border-radius: 8px;
  color: var(--green);
  font-size: var(--font-body);
  font-weight: 500;
  line-height: 1.5
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 60px 0 110px;
  color: var(--green);
  font-size: 18px
}

.social a {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.48);
  font-weight: 700
}

.social a img {
  width: 22px;
  height: 22px;
  object-fit: contain
}

.social a:nth-of-type(-n+3) img {
  width: 20px;
  height: 20px
}


/* ==================================================
   フッター
   ================================================== */
footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  padding: 70px max(48px,calc((100vw - 1088px)/2)) 28px;
  background: #fff
}

footer nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 40px;
  font-size: var(--font-caption);
  font-weight: 600
}

.footer-logo {
  margin-bottom: 20px
}

.footer-logo span {
  font-size: 22px
}

.footer-description {
  max-width: 360px;
  margin: -8px 0 20px;
  color: #526057;
  font-size: var(--font-caption);
  line-height: 1.8
}

footer small {
  grid-column: 1/-1;
  padding-top: 24px;
  border-top: 1px solid #e7e7e4;
  font-size: var(--font-caption)
}


/* ==================================================
   基本レスポンシブ：タブレット（900px以下）
   ================================================== */
@media(max-width:900px) {
  .header nav>a:not(.nav-cta),.header nav i {
  display: none
}

.hero {
  grid-template-columns: 1fr;
  min-height: auto
}

.hero-copy {
  padding: 120px 24px 64px
}

.hero-visual {
  height: 520px
}

.ideas,.feature,.reasons,.faq {
  width: var(--content-width)
}

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

.feature-copy {
  padding: 0
}

.phone-demo {
  margin-top: 30px
}

.reason-heading {
  max-width: 100%
}

.reason-grid {
  max-width: 560px;
  grid-template-columns: 1fr;
  row-gap: 64px;
  margin-right: auto;
  margin-left: auto
}

.reason-grid article:nth-child(even) {
  transform: none
}
}


/* スマートフォン（680px以下） */
@media(max-width:680px) {
  .header {
  top: 22px;
  width: calc(100% - 40px)
}

.logo {
  font-size: 18px
}

.logo small {
  display: none
}

.header nav {
  padding: 4px
}

.nav-cta {
  padding: 7px 12px
}

.hero h1 {
  font-size: 37px
}

.hero-visual {
  height: 420px
}

.suggestion {
  right: 14px;
  bottom: 24px
}

.benefits {
  gap: 12px
}

.benefits li+li {
  padding-left: 12px
}

.ideas {
  padding: 68px 0
}

.ideas h2 {
  width: min(470px,100%);
  min-height: 56px;
  padding: 0 24px;
  font-size: var(--font-section-heading)
}

.ideas h2::after {
  bottom: -11px;
  width: 19px;
  height: 12px
}

.tabs {
  width: 100vw;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: 0;
  padding-left: 20px;
  overscroll-behavior-inline: contain;
  overscroll-behavior-block: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch
}

.tab {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: 0;
  border-bottom: 0;
  font-size: 16px
}

.tab::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 2px;
  background: #b9bbb8;
  content: ""
}

.tab.is-active {
  border-bottom: 0
}

.tab.is-active::after {
  background: var(--ink)
}

.tab:last-child {
  margin-right: 20px
}

.idea-cards {
  --idea-card-width: min(350px,calc(100vw - 48px));
  margin-top: 34px
}

.idea-cards b {
  left: 44px;
  width: calc(var(--idea-card-width) - 108px);
  font-size: 14px
}

.idea-cards small {
  left: 50%;
  transform: translateX(-50%)
}

.feature {
  padding: 50px 0
}

.phone-demo {
  height: 490px
}

.phone {
  height: 470px
}

.tip {
  width: 170px
}

.reasons {
  padding: 68px 0
}

.faq {
  padding: 68px 0
}

.reason-eyebrow {
  font-size: var(--font-label)
}

.reason-heading {
  padding: 15px 22px 16px;
  font-size: var(--font-section-heading)
}

.reason-media {
  width: calc(100% - 56px)
}

.reason-number {
  margin-top: -50px;
  font-size: 48px
}

.reason-grid h3 {
  margin-top: 4px;
  font-size: var(--font-subheading)
}

.reason-grid p {
  font-size: var(--font-body)
}

.reason-grid .reason-note {
  font-size: var(--font-caption)
}

.social {
  gap: 10px;
  padding-bottom: 70px
}

.social span {
  font-size: 15px
}

footer {
  grid-template-columns: 1fr;
  padding: 50px 20px 24px
}

footer nav {
  gap: 8px 20px
}


}


@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior: auto!important;
  transition: none!important
}

.idea-track {
  animation: none
}


}


@media(max-width:680px) {
  .hero-copy h1 {
  font-size: clamp(29px,9vw,37px)
}


}


.header .nav-cta,.app-button {
  display: inline-flex;
  min-width: 170px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap
}


.download .app-button img,.header .nav-cta img,footer .app-button img {
  width: 13px;
  height: 13px;
  margin: 0;
  object-fit: contain;
  filter: brightness(0) invert(1)
}


@media(max-width:680px) {
  .header .nav-cta,.app-button {
  min-width: 158px;
  padding-inline: 12px
}


}


.hero-visual {
  background: var(--paper)
}


/* ==================================================
   ヒーロー画像の無限縦スクロール
   画像セットを2組並べ、下方向へ移動させます。
   ================================================== */
.hero-scroll-track {
  display: flex;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  flex-direction: column;
  animation: hero-scroll 68s linear infinite;
  will-change: transform
}


.hero-scroll-set {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 0 24px 24px
}


.hero-slide {
  position: relative;
  right: 0;
  overflow: hidden;
  flex: none;
  width: 100%;
  margin-left: auto;
  aspect-ratio: 1.59;
  background: #ddd;
  box-shadow: 0 0 38.44px rgba(0,0,0,.08)
}


.hero-slide > img,
.hero-slide > picture,
.hero-slide > picture > img {
  display: block;
  width: 100%;
  height: 100%
}

.hero-slide > img,
.hero-slide > picture > img {
  object-fit: cover
}


.hero-slide .suggestion {
  right: 16px;
  bottom: 16px;
  display: block;
  width: 352px;
  height: 134px;
  padding: 18px 172px 14px 24px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 34px rgba(0,0,0,.1)
}


.hero-slide .suggestion:after {
  right: 8px;
  top: 8px;
  width: 148px;
  height: 118px;
  border-radius: 13px
}


.hero-slide .suggestion small,
.hero-slide .suggestion b,
.hero-slide .suggestion span {
  display: block
}


.hero-slide .suggestion small {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap
}


.hero-slide .suggestion b {
  margin-top: 3px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
  white-space: nowrap
}


.hero-slide .suggestion span {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap
}


.hero-slide:nth-child(1) .suggestion:after {
  background-image: url("image/mv_1_sub.webp")
}


.hero-slide:nth-child(2) .suggestion:after {
  background-image: url("image/mv_5_sub.webp")
}


.hero-slide:nth-child(3) .suggestion:after {
  background-image: url("image/mv_4_sub.webp")
}


.hero-slide:nth-child(4) .suggestion:after {
  background-image: url("image/mv_3_sub.webp")
}


.hero-slide:nth-child(5) .suggestion:after {
  background-image: url("image/mv_2_sub.webp")
}


@keyframes hero-scroll {
  from {
  transform: translateY(-50%)
}

to {
  transform: translateY(0)
}


}


@media(max-width:900px) {
  .hero-scroll-set {
  padding-left: 16px;
  padding-right: 0
}

.hero-slide {
  aspect-ratio: 1.65
}


}


@media(max-width:680px) {
.hero-slide .suggestion {
  width: 280px;
  height: 108px;
  padding: 13px 138px 10px 18px
}

.hero-slide .suggestion:after {
  top: 8px;
  right: 8px;
  width: 118px;
  height: 92px
}


}


@media(prefers-reduced-motion:reduce) {
  .hero-scroll-track {
  animation: none
}

.hero-scroll-set[aria-hidden="true"] {
  display: none
}


}


/* 画像の左端を生成り背景へ溶け込ませる横グラデーション */
.hero-visual::after {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 28.5%;
  background: linear-gradient(90deg,var(--paper) 0%,var(--paper) 16%,rgba(242,239,230,.94) 28%,rgba(242,239,230,.72) 48%,rgba(242,239,230,.38) 70%,rgba(242,239,230,0) 100%);
  content: "";
  pointer-events: none
}


/* 画像の下端を生成り背景へ溶け込ませる縦グラデーション */
.hero-visual::before {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 25.5%;
  background: linear-gradient(180deg,rgba(242,239,230,0) 0%,rgba(242,239,230,.18) 26%,rgba(242,239,230,.58) 62%,var(--paper) 100%);
  content: "";
  pointer-events: none
}


.hero {
  grid-template-columns: 40% 60%
}


@media(max-width:900px) {
  .hero {
  grid-template-columns: 1fr
}


}


.hero {
  position: relative;
  isolation: isolate
}


.hero-visual {
  z-index: 0
}


.hero-scroll-track {
  z-index: 0
}


.hero-visual::after {
  z-index: 1
}


.hero-copy {
  position: relative;
  z-index: 3
}


.header {
  z-index: 10
}


.header .logo img {
  filter: brightness(0) saturate(100%) invert(43%) sepia(24%) saturate(1120%) hue-rotate(83deg) brightness(91%) contrast(84%)
}


.hero-copy {
  padding: 120px 32px 60px clamp(40px,6vw,120px)
}


.header {
  width: min(1600px,calc(100% - 64px))
}


/* ==================================================
   ヒーロー専用レスポンシブ調整
   ================================================== */
/* ワイドディスプレイ */
@media(min-width:1600px) {
  .hero {
  max-width: 1920px;
  margin-inline: auto
}

.hero-copy {
  padding-left: clamp(80px,7vw,140px)
}


}


@media(max-width:1200px) {
  .hero {
  grid-template-columns: 44% 56%
}

.hero-copy {
  padding-left: 40px
}

.header {
  width: calc(100% - 48px)
}

.hero h1 {
  font-size: clamp(36px,4vw,48px)
}


}


@media(max-width:900px) {
  .hero {
  grid-template-columns: 1fr
}

.hero-copy {
  padding: 112px 32px 64px
}

.hero-visual {
  height: 560px
}

.hero-visual::after {
  width: 21%
}


}


@media(max-width:680px) {
  .hero-copy {
  padding: 100px 20px 48px
}

.header {
  width: calc(100% - 32px)
}

.hero-visual {
  height: 420px
}

.hero-scroll-set {
  padding-left: 10px;
  padding-right: 0;
  gap: 14px
}

.hero-visual::after {
  width: 16.5%
}

.benefits {
  justify-content: space-between
}

.benefits li {
  min-width: 0;
  flex: 1
}


}


body {
  overflow-x: hidden
}


.logo small {
  font-size: 12px
}


.header {
  justify-content: flex-end
}


.hero-logo {
  align-self: flex-start;
  margin-bottom: 48px
}


.hero-logo img,
.footer-logo img {
  filter: brightness(0) saturate(100%) invert(43%) sepia(24%) saturate(1120%) hue-rotate(83deg) brightness(91%) contrast(84%)
}


.hero-logo {
  gap: 11px;
  font-size: 31px
}


.hero-logo img {
  width: 42px;
  height: 42px
}


.hero-logo small {
  font-size: 17px
}


.hero-copy {
  transform: translateY(-32px)
}


.hero {
  min-height: 700px
}


@media(max-width:680px) {
  .hero-copy {
  transform: translateY(-16px)
}


}


@media(max-width:680px) {
  .hero-logo {
  margin-bottom: 34px
}

.hero-logo small {
  display: inline
}


}


@media(max-width:680px) {
  .header nav {
  display: none
}

.benefits {
  width: 100%;
  gap: 0
}

.benefits li {
  padding-inline: 8px;
  font-size: 9px
}

.benefits li+li {
  padding-left: 8px
}

.hero-slide .suggestion {
  right: 8px;
  bottom: 8px;
  width: 280px;
  height: 108px;
  padding: 13px 138px 10px 18px
}

.hero-slide .suggestion:after {
  top: 8px;
  right: 8px;
  width: 118px;
  height: 92px
}

.hero-slide .suggestion b {
  font-size: 12px
}

.hero-slide .suggestion small {
  font-size: 12px
}

.hero-slide .suggestion span {
  font-size: 10px
}


}

.hero-scroll-track {
  position: relative;
  top: 0;
  width: 100%;
  height: auto;
  animation: hero-scroll 68s linear infinite
}

.hero-scroll-set {
  width: 100%;
  flex: none
}

.hero-visual {
  min-width: 0;
  height: 700px;
  background: var(--paper)
}

/* PC・タブレットでは表示倍率が高くてもヒーローを左右配置に保ちます。 */
@media(min-width:560px) {
  .hero {
    grid-template-columns: 44% 56%
  }

  .hero-visual {
    height: 700px
  }
}

/* SP：選ばれるための工夫をスクロールで表示 */
@media(max-width:680px) {
  .reasons.has-scroll-reveal .reason-grid article {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .72s ease,transform .72s cubic-bezier(.22,1,.36,1)
  }

  .reasons.has-scroll-reveal .reason-grid article.is-revealed {
    opacity: 1;
    transform: translateY(0)
  }
}

@media(min-width:901px) {
  .reasons.has-scroll-reveal .reason-grid article {
    --reason-layout-offset: 0px;
    opacity: 0;
    transform: translateY(calc(var(--reason-layout-offset) + 24px));
    transition: opacity .72s ease,transform .72s cubic-bezier(.22,1,.36,1)
  }

  .reasons.has-scroll-reveal .reason-grid article:nth-child(even) {
    --reason-layout-offset: 134px
  }

  .reasons.has-scroll-reveal .reason-grid article.is-revealed {
    opacity: 1;
    transform: translateY(var(--reason-layout-offset))
  }
}

@media(max-width:680px) and (prefers-reduced-motion:reduce) {
  .reasons.has-scroll-reveal .reason-grid article {
    opacity: 1;
    transform: none;
    transition: none
  }
}

@media(min-width:901px) and (prefers-reduced-motion:reduce) {
  .reasons.has-scroll-reveal .reason-grid article {
    opacity: 1;
    transform: translateY(var(--reason-layout-offset));
    transition: none
  }
}

/* SP・タブレットのメインビジュアル試作 */
@media(max-width:900px) {
  .hero {
    grid-template-columns: 1fr
  }

  .hero-visual {
    height: auto
  }

  .hero-visual::after {
    display: none
  }

  .hero-scroll-track {
    position: relative;
    width: 100%;
    height: auto;
    animation: none;
    transform: none
  }

  .hero-scroll-set {
    display: block;
    width: 100%;
    padding: 0
  }

  .hero-scroll-set[aria-hidden="true"] {
    display: none
  }

  .hero-scroll-set:first-child {
    position: relative
  }

  .hero-scroll-set:first-child .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    aspect-ratio: 1572/3532;
    box-shadow: none;
    opacity: 0;
    animation: hero-mobile-fade 40s linear infinite
  }

  .hero-scroll-set:first-child .hero-slide:first-child {
    position: relative
  }

  .hero-scroll-set:first-child .hero-slide:nth-child(2) {
    animation-delay: -8s
  }

  .hero-scroll-set:first-child .hero-slide:nth-child(3) {
    animation-delay: -16s
  }

  .hero-scroll-set:first-child .hero-slide:nth-child(4) {
    animation-delay: -24s
  }

  .hero-scroll-set:first-child .hero-slide:nth-child(5) {
    animation-delay: -32s
  }

  .hero-scroll-set:first-child .hero-slide > picture > img {
    object-position: center top
  }

  .hero-slide-main .suggestion {
    right: 20px;
    bottom: clamp(38px,10vw,72px);
    left: 20px;
    width: auto
  }
}

@keyframes hero-mobile-fade {
  0%,
  14% {
    opacity: 1
  }

  20%,
  94% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@media(max-width:900px) and (prefers-reduced-motion:reduce) {
  .hero-scroll-set:first-child .hero-slide {
    animation: none;
    opacity: 0
  }

  .hero-scroll-set:first-child .hero-slide:first-child {
    opacity: 1
  }
}

/* PCではヒーロー左側の内容を中央方向へ少し寄せる */
.hero-mobile-download {
  display: none
}

@media(max-width:900px) {
  .tabs {
    gap: 0
  }

  .hero-mobile-download {
    position: relative;
    z-index: 7;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: clamp(-240px,-34vw,-130px);
    padding: 0 24px
  }

  .hero-mobile-download .app-button {
    flex: 0 0 auto;
    width: min(290px,100%);
    min-height: 52px;
    padding: 12px 24px;
    box-shadow: 0 8px 22px rgba(46,109,64,.18);
    font-size: 15px;
    font-weight: 600
  }

  .hero-mobile-download .app-button img {
    width: 17px;
    height: 17px
  }

  .ideas {
    position: relative;
    z-index: 6;
    margin-top: 0;
    padding-top: 64px
  }
}

@media(min-width:901px) {
  .header {
    position: fixed;
    z-index: 100
  }

  .hero-transition {
    position: relative
  }

  .hero-transition .hero {
    position: sticky;
    top: 0;
    z-index: 0;
    --hero-scroll-blur: 0px;
    --hero-scroll-opacity: 1
  }

  .hero-transition .hero-copy,
  .hero-transition .hero-visual {
    filter: blur(var(--hero-scroll-blur));
    opacity: var(--hero-scroll-opacity);
    transition: filter .08s linear,opacity .08s linear;
    will-change: filter,opacity
  }

  .hero-transition .ideas {
    position: relative;
    z-index: 1;
    max-width: none;
    background: var(--paper)
  }

  .hero-transition .ideas::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 180px;
    background: linear-gradient(to bottom,rgba(242,239,230,0),#f2efe6);
    pointer-events: none
  }

  .hero-copy {
    transform: translate(clamp(28px,3vw,48px),-32px)
  }
}

/* ==================================================
   ヒーロー提案カードの最終サイズ
   HTML構造には触れず、全カードを同じ比率で表示します。
   ================================================== */
.hero-slide .suggestion {
  width: 390px;
  height: 142px;
  padding: 17px 214px 13px 18px;
  border-radius: 17px
}

.hero-slide .suggestion small,
.hero-slide .suggestion b,
.hero-slide .suggestion span {
  max-width: 158px;
  overflow: hidden;
  text-overflow: ellipsis
}

.hero-slide .suggestion::after {
  top: 8px;
  right: 8px;
  width: 198px;
  height: 126px;
  border-radius: 15px;
  background-position: center;
  background-size: 153% auto;
  background-repeat: no-repeat
}

@media(max-width:680px) {
  .hero-slide .suggestion {
    width: 320px;
    height: 112px;
    padding: 13px 170px 10px 14px;
    border-radius: 15px
  }

  .hero-slide .suggestion small,
  .hero-slide .suggestion b,
  .hero-slide .suggestion span {
    max-width: 136px
  }

  .hero-slide .suggestion::after {
    top: 8px;
    right: 8px;
    width: 154px;
    height: 96px;
    border-radius: 12px
  }
}

@media(max-width:900px) {
  .hero-slide-main .suggestion {
    right: 20px;
    bottom: clamp(38px,10vw,72px);
    left: 20px;
    width: auto;
    height: clamp(108px,18vw,142px);
    padding-right: 52%
  }

  .hero-slide-main .suggestion::after {
    width: calc(50% - 16px);
    height: calc(100% - 16px)
  }
}

/* ==================================================
   SP・タブレット ヒーロー
   メインビジュアルを画面上端から表示し、ブランドとコピーを重ねます。
   ================================================== */
.mobile-brand,
.mobile-menu-button {
  display: none
}

.suggestion-image {
  display: none
}

@media(max-width:900px) {
  .header {
    position: absolute;
    top: 18px;
    right: 20px;
    left: 20px;
    width: auto;
    transform: none;
    align-items: center;
    justify-content: space-between;
    pointer-events: none
  }

  .header nav {
    display: none
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--green);
    font-weight: 700;
    line-height: 1;
    pointer-events: auto
  }

  .mobile-brand img {
    width: 28px;
    height: 28px;
    filter: brightness(0) saturate(100%) invert(43%) sepia(24%) saturate(1120%) hue-rotate(83deg) brightness(91%) contrast(84%)
  }

  .mobile-brand span {
    font-size: 20px;
    letter-spacing: .06em
  }

  .mobile-brand small {
    margin-left: 2px;
    font-size: 14px;
    font-weight: 600
  }

  .mobile-menu-button {
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 50%;
    background: rgba(255,255,255,.28);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    place-content: center;
    gap: 5px;
    backdrop-filter: blur(12px);
    pointer-events: auto
  }

  .mobile-menu-button span {
    display: block;
    width: 18px;
    height: 1px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.12)
  }

  .hero {
    position: relative;
    display: block;
    min-height: 0;
    background: var(--paper)
  }

  .hero-visual {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0
  }

  .hero-visual::before {
    z-index: 2;
    bottom: -2px;
    height: 40%;
    background: linear-gradient(180deg,rgba(242,239,230,0) 0%,rgba(242,239,230,.12) 24%,rgba(242,239,230,.72) 52%,var(--paper) 66%,var(--paper) 100%)
  }

  .hero-copy {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: block;
    padding: 0 32px;
    transform: none;
    pointer-events: none
  }

  .hero-logo,
  .hero-copy .download,
  .hero-copy .benefits {
    display: none
  }

  .hero-copy h1 {
    position: absolute;
    right: 32px;
    bottom: clamp(226px,53vw,350px);
    left: 32px;
    margin: 0;
    color: #fff;
    font-size: clamp(34px,8.7vw,58px);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .06em;
    text-shadow: 0 2px 7px rgba(0,0,0,.28)
  }

  .hero-copy h1 span,
  .hero-copy h1 strong {
    color: inherit;
    font-weight: inherit
  }

  .hero .hero-copy h1 .hero-line,
  .hero .hero-copy h1 .hero-line strong {
    color: #fff
  }

  .hero-copy > p {
    position: absolute;
    right: 32px;
    bottom: clamp(172px,41vw,274px);
    left: 32px;
    margin: 0;
    color: #fff;
    font-size: clamp(15px,3.6vw,22px);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .04em;
    text-shadow: 0 2px 6px rgba(0,0,0,.3)
  }

  .hero-scroll-set:first-child .hero-slide {
    aspect-ratio: 1572/3532
  }

  .hero-scroll-set:first-child .hero-slide::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.02) 34%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.35) 100%);
    content: "";
    pointer-events: none
  }

  .hero-scroll-set:first-child .hero-slide .suggestion {
    display: grid;
    position: absolute;
    z-index: 3;
    right: clamp(22px,8vw,64px);
    bottom: 40%;
    left: auto;
    width: clamp(248px,62vw,386px);
    height: clamp(102px,25vw,152px);
    padding: clamp(13px,3.2vw,19px) 8px 11px clamp(15px,3.7vw,21px);
    border: 1px solid rgba(255,255,255,.52);
    border-radius: clamp(12px,3.2vw,18px);
    background: rgba(250,249,243,.92);
    box-shadow: 0 8px 24px rgba(44,51,44,.12);
    grid-template-columns: minmax(0,54%);
    grid-template-rows: auto auto auto;
    column-gap: clamp(10px,2.5vw,18px);
    align-content: center;
    backdrop-filter: blur(8px)
  }

  .hero-scroll-set:first-child .hero-slide .suggestion::after {
    display: none
  }

  .hero-scroll-set:first-child .hero-slide .suggestion::before {
    display: none
  }

  .hero-scroll-set:first-child .hero-slide .suggestion small,
  .hero-scroll-set:first-child .hero-slide .suggestion b,
  .hero-scroll-set:first-child .hero-slide .suggestion span {
    grid-column: 1;
    width: 100%;
    max-width: none;
    overflow: visible;
    text-overflow: clip
  }

  .hero-scroll-set:first-child .hero-slide .suggestion small {
    color: var(--green);
    font-size: clamp(11px,2.5vw,16px);
    font-weight: 600;
    letter-spacing: .04em
  }

  .hero-scroll-set:first-child .hero-slide .suggestion b {
    margin-top: 3px;
    color: #303430;
    font-size: clamp(12px,2.7vw,17px);
    font-weight: 600;
    letter-spacing: .02em
  }

  .hero-scroll-set:first-child .hero-slide .suggestion span {
    margin-top: 2px;
    color: #5d625d;
    font-size: clamp(9px,2vw,12px);
    font-weight: 500
  }

  .hero-scroll-set:first-child .hero-slide .suggestion-image {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 52%;
    display: block;
    width: auto;
    height: auto;
    border-radius: clamp(9px,2.4vw,14px);
    background: url("image/mv_1_sub.webp") center/153% auto no-repeat
  }

  .hero-scroll-set:first-child .hero-slide .suggestion-image-2 {
    background-image: url("image/mv_2_sub.webp")
  }

  .hero-scroll-set:first-child .hero-slide .suggestion-image-3 {
    background-image: url("image/mv_3_sub.webp")
  }

  .hero-scroll-set:first-child .hero-slide .suggestion-image-4 {
    background-image: url("image/mv_4_sub.webp")
  }

  .hero-scroll-set:first-child .hero-slide .suggestion-image-5 {
    background-image: url("image/mv_5_sub.webp")
  }
}

@media(max-width:480px) {
  .header {
    top: 14px;
    right: 16px;
    left: 16px
  }

  .mobile-brand {
    gap: 5px
  }

  .mobile-brand img {
    width: 24px;
    height: 24px
  }

  .mobile-brand span {
    font-size: 18px
  }

  .mobile-brand small {
    font-size: 12px
  }

  .mobile-menu-button {
    width: 42px;
    height: 42px
  }

  .hero-copy {
    padding-inline: 24px
  }

  .hero-copy h1 {
    right: 24px;
    bottom: 234px;
    left: 24px;
    font-size: clamp(31px,8.7vw,40px)
  }

  .hero-copy > p {
    right: 24px;
    bottom: 178px;
    left: 24px;
    font-size: 14px
  }

  .hero-scroll-set:first-child .hero-slide .suggestion {
    right: 18px;
    bottom: 39%;
    left: auto;
    width: min(280px,calc(100% - 36px));
    height: 104px;
    padding: 10px 8px 10px 16px;
    grid-template-columns: minmax(0,52%);
    column-gap: 10px
  }

  .hero-scroll-set:first-child .hero-slide .suggestion-image {
    left: 50%
  }

  .hero-scroll-set:first-child .hero-slide .suggestion small {
    font-size: 11px;
    line-height: 1.35
  }

  .hero-scroll-set:first-child .hero-slide .suggestion b {
    font-size: 12px;
    line-height: 1.4
  }

  .hero-scroll-set:first-child .hero-slide .suggestion span {
    font-size: 9.5px;
    line-height: 1.3
  }

  .hero-scroll-set:first-child .hero-slide .suggestion small,
  .hero-scroll-set:first-child .hero-slide .suggestion b,
  .hero-scroll-set:first-child .hero-slide .suggestion span {
    white-space: nowrap
  }
}

/* Footer navigation: stack every link in a single column. */
footer nav {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 10px
}

/* ==================================================
   Feature section template
   ================================================== */
.feature {
  display: block;
  width: min(var(--max),var(--content-width));
  max-width: var(--max);
  min-height: 0;
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-9);
  text-align: center
}

.feature-eyebrow {
  margin: 0 0 8px;
  color: var(--green);
  font-size: var(--font-label);
  font-weight: 600;
  line-height: 1.5
}

.feature-heading {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 34px;
  padding: 18px 32px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: var(--font-section-heading);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em
}

.feature-heading span {
  display: block;
  line-height: 1;
  transform: translateY(-1px)
}

.feature-heading::after {
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 29px;
  height: 18px;
  background: var(--green);
  clip-path: polygon(50% 100%,0 0,100% 0);
  content: "";
  transform: translateX(-50%)
}

.feature-panel {
  position: relative;
  display: grid;
  overflow: visible;
  min-height: 420px;
  grid-template-columns: minmax(0,1fr) minmax(360px,430px);
  align-items: center;
  gap: 24px;
  padding: 72px 64px 50px 56px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: left
}

.feature-bg-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none
}

.feature-bg {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg,rgba(156,191,55,.2),rgba(56,191,20,.2));
  pointer-events: none
}

.feature-bg-one {
  top: -35px;
  left: -38px;
  width: 112px;
  height: 112px
}

.feature-bg-two {
  top: -99px;
  left: 38.62%;
  width: 392px;
  height: 392px
}

.feature-bg-three {
  right: -31px;
  bottom: -66px;
  width: 387px;
  height: 387px
}

.feature-bg-four {
  left: 25.28%;
  bottom: -40px;
  width: 167px;
  height: 167px
}

.feature-bg-five {
  left: 33.77%;
  bottom: -71px;
  width: 384px;
  height: 384px;
  border: 3px solid transparent;
  background: linear-gradient(135deg,rgba(156,191,55,.2),rgba(56,191,20,.2)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude
}

.feature-copy,
.feature-visual {
  position: relative;
  z-index: 1
}

.feature-copy {
  padding: 0;
  max-width: 560px
}

.feature-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px
}

.feature-title-row h3 {
  margin: 0;
  color: var(--green);
  font-size: clamp(24px,2.7vw,32px);
  font-weight: 700;
  line-height: 1.5
}

.feature-title-row img {
  width: 34px;
  height: 34px;
  object-fit: contain
}

.feature-text-block {
  max-width: 540px
}

.feature-text-block + .feature-text-block {
  margin-top: 18px
}

.feature-text-block h4 {
  margin: 0 0 5px;
  color: #000;
  font-size: var(--font-subheading);
  font-weight: 600;
  line-height: 1.55
}

.feature-text-block p {
  margin: 0;
  color: #000;
  font-size: var(--font-body);
  line-height: 1.75
}

.feature-visual {
  height: 362px;
  min-width: 0
}

.feature-phone {
  position: absolute;
  right: 18px;
  top: -118px;
  width: 318px;
  height: 600px;
  z-index: 1;
  filter: drop-shadow(0 14px 12px rgba(0,0,0,.22))
}

.feature-screen {
  position: absolute;
  top: 11px;
  left: 13px;
  width: 216px;
  height: 466px;
  border-radius: 20px;
  object-fit: cover
}

.feature-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.feature-phone.is-full-phone .feature-screen {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 14px 12px rgba(0,0,0,.2))
}

.feature-phone .feature-screen[src$="calendar_iphone.webp"],
.feature-phone .feature-screen[src$="calender_iphone.png"] {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: 178%;
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%,-50%)
}

.feature-phone .feature-screen[src$="input_iphone.webp"] {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: 126%;
  max-width: none;
  height: auto;
  transform: translate(-50%,-50%)
}

.feature-phone .feature-screen[src$="home_iphone.webp"] {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%,-50%)
}

.feature-phone.is-full-phone .feature-frame {
  display: none
}

.feature-character {
  position: absolute;
  z-index: 5;
  right: 190px;
  bottom: -120px;
  width: 252px;
  max-width: none;
  transform: scaleX(-1);
  transition: opacity .2s ease, transform .2s ease
}

.feature-idea-card {
  position: absolute;
  z-index: 3;
  width: 320px;
  height: 104px;
  padding-top: 14px;
  text-align: center
}

.feature-idea-card::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 90px;
  border: 1px solid var(--green);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,.1);
  content: ""
}

.feature-idea-card em {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  min-width: 170px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 3px 16px 4px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--surface);
  color: var(--green);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%)
}

.feature-idea-card em::before {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--green);
  border-bottom: 1px solid var(--green);
  background: var(--surface);
  content: "";
  transform: translateX(-50%) rotate(45deg)
}

.feature-idea-card b {
  position: absolute;
  top: 44px;
  left: 40px;
  z-index: 1;
  width: 240px;
  color: #2a2a2a;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: center
}

.feature-idea-card small {
  position: absolute;
  top: 76px;
  left: 83px;
  z-index: 1;
  width: 155px;
  color: #2a2a2a;
  font-size: 12px;
  line-height: 18px;
  text-align: center
}

.feature-idea-card-one {
  top: 8px;
  right: 0
}

.feature-idea-card-two {
  top: 135px;
  right: 42px
}

.feature-nav {
  display: grid;
  grid-template-columns: 55px auto 55px;
  justify-content: start;
  gap: 8px;
  margin-top: 30px
}

.feature-nav > button {
  width: 55px;
  height: 55px;
  background: transparent;
  box-shadow: none;
  transition: opacity .2s ease, transform .2s ease
}

.feature-nav > button:hover {
  opacity: .78;
  transform: translateY(-2px)
}

.feature-nav > button:active {
  transform: translateY(0) scale(.96)
}

.feature-nav > button:focus-visible,
.feature-dot:focus-visible {
  outline: 3px solid rgba(58,132,79,.28);
  outline-offset: 2px
}

.feature-nav > button img {
  display: block;
  width: 55px;
  height: 55px;
  transform: rotate(180deg)
}

.feature-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 56px;
  height: 55px;
  padding: 0
}

.feature-dot {
  display: block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--green);
  border-radius: 50%;
  appearance: none;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .2s ease
}

.feature-dot:not(:disabled):hover {
  background: rgba(58,132,79,.18)
}

.feature-dot.is-active {
  background: var(--green)
}

.feature-dot:disabled {
  opacity: 1;
  cursor: default
}

.feature-panel.is-changing .feature-copy,
.feature-panel.is-changing .feature-visual {
  opacity: .42
}

.feature-copy,
.feature-visual {
  transition: opacity .18s ease
}

.feature-mobile-slider {
  display: none
}

/* X share */
.x-share {
  width: min(905px,var(--content-width));
  margin: 0 auto;
  padding: var(--space-8) 0
}

.x-share-heading {
  display: flex;
  margin: 0 auto 42px
}

.x-share-banner {
  display: block;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(37,37,37,.16);
  color: #219442;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease
}

.x-share-banner:hover {
  box-shadow: 0 14px 38px rgba(37,37,37,.2);
  transform: translateY(-3px)
}

.x-share-banner:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 5px
}

.x-share-banner img {
  display: block;
  width: 100%;
  height: auto
}

.x-share-banner span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: clamp(48px, 7vw, 66px);
  padding: 8px 20px;
  font-size: clamp(15px, 2.5vw, 24px);
  font-weight: 500;
  line-height: 1.5
}

.x-share-banner span b {
  font-weight: inherit
}

.x-share-note {
  margin: 18px 0 0;
  color: #000;
  font-size: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  text-align: center
}

@media(max-width:900px) {
  :root {
    --content-width: calc(100% - 40px)
  }

  .x-share {
    width: var(--content-width);
    padding: 80px 0
  }

  .feature {
    width: 100%;
    padding: 72px 0 90px
  }

  .feature-eyebrow,
  .feature-heading {
    margin-right: 20px;
    margin-left: 20px
  }

  .feature-heading {
    width: calc(100% - 40px);
    max-width: 470px;
    margin-bottom: 12px;
    white-space: nowrap
  }

  .feature-panel {
    display: none
  }

  .feature-mobile-slider {
    display: block;
    width: 100%;
    margin-top: 0
  }

  .feature-mobile-track {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 476px;
    padding: 6px 0 0;
    touch-action: pan-y
  }

  .feature-mobile-track::-webkit-scrollbar {
    display: none
  }

  .feature-mobile-slide {
    position: absolute;
    top: 6px;
    left: 50%;
    display: flex;
    width: min(270px,72vw);
    height: 470px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transform: translateX(-50%) scale(.88);
    transition: left .48s ease,opacity .35s ease,transform .48s ease;
    pointer-events: none
  }

  .feature-mobile-slide.is-current {
    left: 50%;
    z-index: 3;
    opacity: 1;
    transform: translateX(-50%) scale(1)
  }

  .feature-mobile-slide.is-previous {
    left: 0;
    z-index: 2;
    opacity: .82;
    transform: translateX(calc(-100% + 64px)) scale(.9);
    transform-origin: right center
  }

  .feature-mobile-slide.is-next {
    left: 100%;
    z-index: 2;
    opacity: .82;
    transform: translateX(-64px) scale(.9);
    transform-origin: left center
  }

  .feature-mobile-phone {
    width: min(270px,72vw);
    height: min(510px,135vw);
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(0,0,0,.14))
  }

  .feature-mobile-phone-calendar {
    width: min(432px,115vw);
    height: 470px
  }

  .feature-mobile-slide[data-feature-index="1"] {
    flex-basis: min(432px,115vw);
    width: min(432px,115vw)
  }

  .feature-mobile-slide[data-feature-index="0"] .feature-mobile-phone,
  .feature-mobile-slide[data-feature-index="3"] .feature-mobile-phone {
    transform: scale(.85)
  }

  .feature-mobile-slide[data-feature-index="2"] .feature-mobile-phone {
    width: min(300px,80vw)
  }

  .feature-mobile-slide[data-feature-index="2"] {
    flex-basis: min(300px,80vw);
    width: min(300px,80vw)
  }

  .feature-mobile-copy {
    display: none
  }

  .feature-mobile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px
  }

  .feature-mobile-title h3 {
    margin: 0;
    color: var(--green);
    font-size: clamp(22px,5.5vw,28px);
    font-weight: 700;
    line-height: 1.4
  }

  .feature-mobile-title img {
    width: 28px;
    height: 28px;
    object-fit: contain
  }

  .feature-mobile-description h4 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55
  }

  .feature-mobile-description p {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.85;
    overflow-wrap: anywhere
  }

  .feature-mobile-descriptions {
    position: relative;
    width: min(520px,calc(100% - 56px));
    min-height: 172px;
    margin: 16px auto 0;
    text-align: left
  }

  .feature-mobile-description {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease-in-out;
    pointer-events: none
  }

  .feature-mobile-description.is-active {
    opacity: 1;
    pointer-events: auto
  }

  .feature-mobile-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 8px
  }

  .feature-mobile-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid var(--green);
    border-radius: 50%;
    background: transparent;
    cursor: pointer
  }

  .feature-mobile-dots button.is-active {
    background: var(--green)
  }

}

@media(max-width:680px) {
  :root {
    --font-label: 13px;
    --font-section-heading: clamp(20px,6vw,24px)
  }

  .x-share {
    padding: 68px 0
  }

  .x-share-heading {
    margin-bottom: 32px
  }

  .x-share-heading-prefix {
    display: none
  }

  .x-share-banner {
    border-radius: 12px
  }

  .x-share-banner span {
    padding: 8px 14px
  }

  .x-share-note {
    margin-top: 14px;
    padding: 0 8px;
    font-size: 12px
  }

  .feature {
    padding: 68px 0 76px
  }

  .feature-eyebrow {
    font-size: var(--font-label)
  }

  .feature-heading {
    width: max-content;
    max-width: calc(100% - 40px);
    margin-bottom: 12px;
    padding: 15px 22px 16px;
    font-size: clamp(18px,5.5vw,22px)
  }

  .feature-panel {
    min-height: 0;
    padding: 58px 22px 28px;
    border-radius: 22px
  }

  .feature-title-row {
    gap: 10px;
    margin-bottom: 16px
  }

  .feature-title-row h3 {
    font-size: 24px
  }

  .feature-title-row img {
    width: 28px;
    height: 28px
  }

  .feature-text-block h4 {
    font-size: 16px
  }

  .feature-text-block p {
    font-size: var(--font-body)
  }

  .feature-nav {
    justify-content: center;
    margin-top: 24px
  }

  .feature-visual {
    height: 345px
  }

  .feature-phone {
    top: -76px;
    right: 0;
    width: 232px;
    height: 438px
  }

  .feature-screen {
    top: 9px;
    left: 10px;
    width: 162px;
    height: 351px;
    border-radius: 15px
  }

  .feature-character {
    right: 135px;
    bottom: -20px;
    width: 178px
  }

  .feature-idea-card {
    width: min(280px,76vw);
    height: 94px;
    padding-top: 13px
  }

  .feature-idea-card::before {
    height: 81px
  }

  .feature-idea-card em {
    min-width: 155px;
    min-height: 28px;
    padding: 3px 14px;
    font-size: 12px
  }

  .feature-idea-card b {
    top: 40px;
    left: 35px;
    width: calc(100% - 70px);
    font-size: 14px;
    line-height: 20px
  }

  .feature-idea-card small {
    top: 68px;
    left: 50%;
    width: 150px;
    font-size: 11px;
    transform: translateX(-50%)
  }

  .feature-idea-card-one {
    top: 12px;
    right: -2px
  }

  .feature-idea-card-two {
    top: 116px;
    right: 24px
  }

  .feature-bg-two {
    left: 22%;
    width: 290px;
    height: 290px
  }

  .feature-bg-three {
    right: -150px;
    width: 310px;
    height: 310px
  }
}

@media (prefers-reduced-motion: reduce) {
  .x-share-banner {
    transition: none
  }
}

@media(max-width:900px) {
  .reason-visual-row {
    display: grid;
    width: 100%;
    align-items: flex-end;
    grid-template-columns: minmax(0,1fr) auto;
    column-gap: 24px
  }

  .reason-visual-row .reason-media {
    width: auto;
    min-width: 0;
    margin: 0
  }

  .reason-visual-row .reason-number {
    margin: 0;
    line-height: .82
  }

  .reason-grid article:nth-child(odd) .reason-visual-row {
    grid-template-columns: auto minmax(0,1fr)
  }

  .reason-grid article:nth-child(odd) .reason-number {
    grid-column: 1;
    grid-row: 1
  }

  .reason-grid article:nth-child(odd) .reason-media {
    grid-column: 2;
    grid-row: 1
  }

  .reason-grid h3 {
    margin-top: 18px
  }
}

/* SP・タブレット：ハンバーガーメニュー */
@media(max-width:900px) {
  .header nav {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    display: flex;
    width: min(300px,calc(100vw - 32px));
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 12px 16px 16px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 24px;
    visibility: hidden;
    background: rgba(31,45,36,.3);
    box-shadow: 0 14px 36px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.42);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .22s ease,transform .22s ease,visibility .22s;
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    pointer-events: none
  }

  .header.is-menu-open nav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto
  }

  .header nav>a:not(.nav-cta) {
    display: block;
    padding: 13px 8px;
    border-bottom: 1px solid rgba(255,255,255,.42);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0,0,0,.32)
  }

  .header nav .series-menu {
    display: block;
    border-bottom: 1px solid rgba(255,255,255,.42)
  }

  .header nav .series-menu summary {
    padding: 13px 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0,0,0,.32)
  }

  .header nav .series-menu-list {
    position: static;
    width: auto;
    gap: 3px;
    margin: -3px 0 9px;
    padding: 0 7px 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
  }

  .header nav .series-menu-list a {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.13);
    color: #fff;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0,0,0,.25)
  }

  .header nav i {
    display: none
  }

  .header nav .nav-cta {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    font-size: 14px
  }

  .mobile-menu-button span {
    transition: opacity .2s ease,transform .2s ease
  }

  .header.is-menu-open .mobile-menu-button span:nth-child(1) {
    transform: translateY(6px) rotate(45deg)
  }

  .header.is-menu-open .mobile-menu-button span:nth-child(2) {
    opacity: 0
  }

  .header.is-menu-open .mobile-menu-button span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg)
  }

  .header {
    position: fixed;
    z-index: 100
  }

  .hero-transition {
    position: relative
  }

  .hero-transition .hero-copy,
  .hero-transition .hero-visual {
    filter: blur(var(--hero-scroll-blur));
    opacity: var(--hero-scroll-opacity);
    transition: filter .08s linear,opacity .08s linear;
    will-change: filter,opacity
  }

  .hero-transition .ideas {
    position: relative;
    z-index: 6;
    width: 100%;
    max-width: none;
    padding-right: 24px;
    padding-left: 24px;
    background: var(--paper)
  }

  .hero-transition .ideas::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 180px;
    background: linear-gradient(to bottom,rgba(242,239,230,0),#f2efe6);
    pointer-events: none
  }

}

/* SP・タブレット：ヒーロー固定用の最終指定 */
@media(max-width:900px) {
  .hero-transition::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1572/3532
  }

  .hero-transition .hero {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1572/3532;
    overflow: hidden;
    --hero-scroll-blur: 0px;
    --hero-scroll-opacity: 1
  }

  .hero-transition.is-hero-past .hero {
    visibility: hidden
  }

  .hero-transition .hero-visual,
  .hero-transition .hero-scroll-track,
  .hero-transition .hero-scroll-set:first-child,
  .hero-transition .hero-scroll-set:first-child .hero-slide {
    height: 100%
  }

  .hero-transition .hero-scroll-set:first-child .hero-slide {
    aspect-ratio: auto
  }

  .feature {
    position: relative;
    z-index: 6;
    background: #f2efe6
  }
}

/* 仕上げ：ヒーローの視認性、操作ヒント、表示アニメーション */
@media(max-width:900px) {
  .hero-copy::before {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: clamp(118px,28vw,205px);
    left: 0;
    height: clamp(250px,66vw,410px);
    background:
      radial-gradient(ellipse at 33% 64%,rgba(0,0,0,.20) 0%,rgba(0,0,0,.11) 42%,rgba(0,0,0,0) 74%),
      linear-gradient(180deg,rgba(0,0,0,0) 6%,rgba(0,0,0,.04) 48%,rgba(0,0,0,.11) 78%,rgba(0,0,0,0) 100%);
    content: "";
    pointer-events: none
  }

  .hero-copy h1,
  .hero-copy > p:not(.hero-download-note) {
    z-index: 1
  }

  .hero-copy > p:not(.hero-download-note) {
    text-shadow: 0 1px 2px rgba(0,0,0,.34),0 3px 9px rgba(0,0,0,.24)
  }

  .hero-download-note {
    display: none
  }

  .hero-scroll-cue {
    position: absolute;
    z-index: 5;
    right: clamp(18px,4.8vw,38px);
    bottom: clamp(190px,46vw,305px);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.28));
    pointer-events: none
  }

  .hero-scroll-cue span {
    font-family: Arial,sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .04em;
    writing-mode: vertical-rl;
    transform: rotate(180deg)
  }

  .hero-scroll-cue i {
    position: relative;
    width: 1px;
    height: 29px;
    background: currentColor
  }

  .hero-scroll-cue i::after {
    position: absolute;
    right: -3px;
    bottom: 0;
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    content: "";
    transform: rotate(45deg)
  }

  .hero-mobile-download {
    align-items: center;
    flex-direction: column
  }

  .hero-mobile-download .download-note {
    margin-top: 9px;
    color: #526057;
    font-size: 11px;
    text-align: center
  }

  .feature-mobile-slider {
    position: relative
  }

  .feature-swipe-hint {
    position: absolute;
    z-index: 5;
    top: 4px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(242,239,230,.82);
    color: #637068;
    font-size: 10px;
    line-height: 1.4;
    backdrop-filter: blur(5px);
    transition: opacity .4s ease,visibility .4s ease;
    pointer-events: none
  }

  .feature-swipe-hint span {
    color: var(--green);
    font-size: 13px
  }

  .feature-swipe-hint.is-hidden {
    visibility: hidden;
    opacity: 0
  }
}

@media(min-width:901px) {
  .reasons.has-scroll-reveal .reason-grid article:nth-child(1) {
    transition-delay: 0ms
  }

  .reasons.has-scroll-reveal .reason-grid article:nth-child(2) {
    transition-delay: 100ms
  }

  .reasons.has-scroll-reveal .reason-grid article:nth-child(3) {
    transition-delay: 200ms
  }

  .reasons.has-scroll-reveal .reason-grid article:nth-child(4) {
    transition-delay: 300ms
  }
}

@media(prefers-reduced-motion:reduce) {
  .feature-swipe-hint,
  .reasons.has-scroll-reveal .reason-grid article {
    transition-delay: 0ms
  }
}

/* Tablet: a compact two-column version of the desktop hero. */
@media(min-width:681px) and (max-width:900px) {
  .hero-transition::before {
    height: max(760px,100svh);
    aspect-ratio: auto
  }

  .hero-transition .hero {
    display: grid;
    grid-template-columns: 46% 54%;
    height: max(760px,100svh);
    min-height: 760px;
    aspect-ratio: auto;
    background: var(--paper)
  }

  .mobile-brand {
    display: none
  }

  .header {
    justify-content: flex-end
  }

  .hero-copy {
    position: relative;
    inset: auto;
    display: flex;
    justify-content: center;
    padding: 86px 14px 64px 28px;
    transform: none;
    pointer-events: auto
  }

  .hero-copy::before {
    display: none
  }

  .hero-logo,
  .hero-copy .download,
  .hero-copy .benefits {
    display: flex
  }

  .hero-logo {
    gap: 8px;
    margin-bottom: 34px;
    font-size: clamp(22px,3.1vw,28px)
  }

  .hero-logo img {
    width: 34px;
    height: 34px
  }

  .hero-logo small {
    font-size: clamp(11px,1.65vw,14px)
  }

  .hero-copy h1 {
    position: static;
    width: auto;
    margin: 0;
    color: var(--ink);
    font-size: clamp(29px,4.1vw,37px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .04em;
    text-shadow: none
  }

  .hero .hero-copy h1 .hero-line {
    color: var(--ink)
  }

  .hero .hero-copy h1 .hero-line strong {
    color: var(--green)
  }

  .hero-copy > p,
  .hero-copy > p:not(.hero-download-note) {
    position: static;
    width: auto;
    margin: 22px 0;
    color: #343834;
    font-size: clamp(12px,1.75vw,15px);
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: .02em;
    text-shadow: none
  }

  .hero-copy .download {
    align-items: center;
    gap: 10px
  }

  .hero-copy .app-button {
    min-width: 0;
    min-height: 42px;
    padding: 10px 14px;
    font-size: clamp(11px,1.45vw,13px);
    white-space: nowrap
  }

  .hero-copy .download-qr img {
    width: 44px;
    height: 44px
  }

  .hero-copy .hero-download-note {
    display: block;
    margin: 10px 0 0;
    color: #526057;
    font-size: 10px;
    line-height: 1.5
  }

  .hero-copy .benefits {
    width: 100%;
    gap: 0;
    margin-top: 32px
  }

  .hero-copy .benefits li {
    min-width: 0;
    flex: 1;
    padding-inline: 6px
  }

  .hero-copy .benefits li + li {
    padding-left: 6px
  }

  .hero-copy .benefits img {
    width: 28px;
    height: 28px;
    margin-bottom: 6px
  }

  .hero-copy .benefits span {
    font-size: clamp(8px,1.15vw,10px);
    line-height: 1.5
  }

  .hero-visual {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden
  }

  .hero-visual::after {
    display: block;
    width: 10%;
    background: linear-gradient(90deg,var(--paper) 0%,rgba(242,239,230,.82) 28%,rgba(242,239,230,.38) 62%,rgba(242,239,230,0) 100%)
  }

  .hero-visual::before {
    display: block;
    z-index: 2;
    bottom: 0;
    height: 28%;
    background: linear-gradient(180deg,rgba(242,239,230,0) 0%,rgba(242,239,230,.16) 28%,rgba(242,239,230,.62) 66%,var(--paper) 100%)
  }

  .hero-scroll-track {
    display: flex;
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: auto;
    flex-direction: column;
    animation: hero-scroll 42s linear infinite;
    transform: none
  }

  .hero-transition .hero-scroll-track,
  .hero-transition .hero-scroll-set:first-child,
  .hero-transition .hero-scroll-set:first-child .hero-slide {
    height: auto
  }

  .hero-scroll-set,
  .hero-scroll-set[aria-hidden="true"] {
    display: flex;
    width: 100%;
    flex: none;
    flex-direction: column;
    gap: 18px;
    padding: 0 0 18px 18px
  }

  .hero-scroll-set:first-child {
    position: static
  }

  .hero-scroll-set .hero-slide,
  .hero-scroll-set:first-child .hero-slide {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1.42;
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 30px rgba(0,0,0,.08);
    opacity: 1;
    animation: none
  }

  .hero-scroll-set .hero-slide > picture > img {
    object-position: center
  }

  .hero-scroll-set:first-child .hero-slide::after {
    display: none
  }

  .hero-scroll-set .hero-slide .suggestion,
  .hero-scroll-set:first-child .hero-slide .suggestion {
    right: 10px;
    bottom: 10px;
    left: auto;
    width: min(220px,calc(100% - 20px));
    height: 80px;
    padding: 9px 6px 7px 11px;
    grid-template-columns: minmax(0,54%);
    border-radius: 10px
  }

  .hero-scroll-set .hero-slide .suggestion small,
  .hero-scroll-set:first-child .hero-slide .suggestion small {
    font-size: 8px
  }

  .hero-scroll-set .hero-slide .suggestion b,
  .hero-scroll-set:first-child .hero-slide .suggestion b {
    margin-top: 2px;
    font-size: 9px
  }

  .hero-scroll-set .hero-slide .suggestion span,
  .hero-scroll-set:first-child .hero-slide .suggestion span {
    font-size: 7px
  }

  .hero-scroll-set .hero-slide .suggestion-image,
  .hero-scroll-set:first-child .hero-slide .suggestion-image {
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 54%;
    border-radius: 7px
  }

  .hero-mobile-download,
  .hero-scroll-cue {
    display: none
  }
}

@media(min-width:681px) and (max-width:900px) and (prefers-reduced-motion:reduce) {
  .hero-scroll-track {
    animation: none
  }

  .hero-scroll-set[aria-hidden="true"] {
    display: none
  }
}

/* SP: fade the photo all the way into the paper background without a seam. */
@media(max-width:680px) {
  .faq-item-desktop-only {
    display: none
  }

  .mobile-brand {
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(242,239,230,0);
    box-shadow: 0 0 0 rgba(31,45,36,0);
    transform: scale(1);
    transform-origin: left center;
    transition:
      padding 240ms cubic-bezier(.22,1,.36,1),
      background-color 240ms ease,
      border-color 240ms ease,
      box-shadow 240ms ease,
      transform 240ms cubic-bezier(.22,1,.36,1)
  }

  .header.is-scrolled .mobile-brand {
    padding: 10px 14px;
    border-color: rgba(255,255,255,.62);
    background: rgba(242,239,230,.68);
    box-shadow: 0 6px 20px rgba(31,45,36,.12),inset 0 1px 0 rgba(255,255,255,.46);
    transform: scale(.92);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%)
  }

  .hero-visual::before {
    display: none
  }

  .hero-mobile-download {
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: var(--paper)
  }

  .hero-mobile-download::before {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: calc(100% - 1px);
    left: 0;
    height: clamp(170px,48vw,230px);
    background: linear-gradient(
      180deg,
      rgba(242,239,230,0) 0%,
      var(--paper) 100%
    );
    content: "";
    pointer-events: none
  }

  .hero-mobile-download > * {
    position: relative;
    z-index: 1
  }
}

/* iPhone: lift hero content above browser chrome and keep the solid paper area clear. */
@media(max-width:480px) {

  .hero-copy::before {
    bottom: 170px;
    height: 300px
  }

  .hero-copy h1 {
    bottom: 286px
  }

  .hero-copy > p:not(.hero-download-note) {
    bottom: 230px
  }

  .hero-scroll-set:first-child .hero-slide .suggestion {
    top: auto;
    bottom: calc(39% + 60px)
  }

  .hero-scroll-cue {
    top: auto;
    bottom: 242px
  }

  .hero-mobile-download {
    margin-top: 0;
    padding-top: 22px;
    background: var(--paper)
  }
}