/* ===========================
  Page: ピコカアプリ（/application）
=========================== */

/* --------------------------------
  ヒーローセクション PC
-------------------------------- */
.page-hero--application .page-hero-inner {
  height: 518px;
  padding-top: 77px;
}

.page-hero--application .page-hero-heading {
  margin-bottom: 18px;
}

/* --------------------------------
  ダウンロードボタンエリア（PC）
-------------------------------- */
.application-download {
  margin-top: 40px;
  width: fit-content;
}

.application-download-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.application-download-btn {
  font-size: 18px;
  padding: 20px 68px;
}

.application-download-stores {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  opacity: 0.93;
  text-align: center;
}

/* --------------------------------
  スマホモックアップ（PC）
-------------------------------- */
.application-hero-media {
  position: absolute;
  right: 10px;
  top: -65px;
  width: 675px;
}

.application-hero-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================
  アプリ機能紹介セクション
================================ */

/* ---- セクション共通 ---- */
.app-features {
  padding: 0 0 80px;
}

.app-features-inner {
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 35px;
}

/* ---- セクションヘッダー ---- */
.app-features-header {
  text-align: center;
  margin-bottom: 48px;
}

.app-features-eyebrow {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-green-dark);
  margin-bottom: 8px;
}

.app-features-heading {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-green);
  line-height: 130%;
}

/* ---- メインフィーチャーブロック ---- */
.app-feature-main {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-background);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 48px;
}

.app-feature-main-media {
  flex: 0 0 46%;
  align-self: stretch;
  overflow: hidden;
}

.app-feature-main-media img {
  width: 88%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin: 0 auto;
}

.app-feature-main-content {
  flex: 1;
  padding: 72px 20px 72px 0;
}

/* タグ */
.app-feature-tag {
  display: inline-block;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 6px 15px;
  margin-bottom: 25px;
}

/* 見出し */
.app-feature-main-heading {
  font-size: 32px;
  font-weight: 500;
  color: var(--color-green-dark);
  line-height: 130%;
  margin-bottom: 19px;
}

/* 本文 */
.app-feature-main-desc {
  font-size: 16px;
  line-height: 175%;
  margin-bottom: 32px;
}

/* 注釈ボックス */
.app-feature-main-note {
  background: var(--color-white);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-green);
  line-height: 150%;
  max-width: 566px;
}

/* ---- サービスカード ---- */
.app-service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.app-service-card {
  border-radius: 20px;
  padding: 18px 24px 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  background: #F9FBFB;
}

.app-service-card-logos {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.app-service-card-logos img {
  width: auto;
  display: inline-block;
}

.logo-delicia {
  height: 26px;
}

.logo-delicia-meals {
  height: 13px;
}

.logo-you-palette {
  height: 30px;
}

.app-service-card-heading {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-green-dark);
  line-height: 150%;
  margin-bottom: 20px;
}

.app-service-card-desc {
  font-size: 16px;
  line-height: 175%;
}

.app-service-card-note {
  font-size: 14px;
  color: var(--color-gray);
  line-height: 175%;
  margin-top: 20px;
}

/* ================================
  会員登録方法セクション
================================ */
.app-howto {
  background: var(--color-bg-green);
  padding: 80px 0;
  margin-top: 0;
}

.app-howto-inner {
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 35px;
}

/* セクション見出し */
.app-howto-heading {
  font-size: 40px;
  line-height: 130%;
  font-weight: 700;
  color: var(--color-green);
  text-align: center;
  margin-bottom: 48px;
}

/* Step 1 & 2: 2カラム */
.app-howto-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* ステップ共通 */
.app-howto-step {
  display: flex;
  flex-direction: column;
}

.app-howto-step--full {
  margin-bottom: 20px;
}

/* ステップヘッダー（カード内） */
.app-howto-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.app-howto-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1; 
}

.app-howto-step-title {
  font-size: 28px;
  font-weight: 700;
}

/* ステップカード */
.app-howto-step-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 36px 32px;
  flex: 1;
  box-shadow: 0 4px 32px 0 rgba(5, 78, 60, 0.08);
}

.app-howto-step-desc {
  font-size: 16px;
  line-height: 175%;
  margin-bottom: 32px;
}

.app-howto-step01-desc {
  min-height: 56px;
}

.app-howto-step-desc span {
  color: var(--color-green);
}

/* ---- Step 1 ---- */
.app-howto-step01-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ---- Step 2 メディア (centered) ---- */
.app-howto-step-media {
  display: flex;
  justify-content: center;
}

.app-howto-step-media img {
  width: 100%;
  height: auto;
}

/* ---- Step 3 ---- */
.app-howto-step03-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-howto-step03-body img {
  width: 47%;
  height: auto;
}

/* > 矢印 */
.app-howto-arrow {
  display: block;
  flex-shrink: 0;
  width: 75px;
  height: 33px;
  transform: rotate(-90deg);
}

/* ---- Step 4 ---- */
.app-howto-step04-header {
  margin-bottom: 20px;
}

.app-howto-step04-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.app-howto-step04-col {
  padding: 0 28px;
}

.app-howto-step04-col:first-child {
  padding-left: 0;
  border-right: 2px solid #D9D9D9;
}

.app-howto-step04-col:last-child {
  padding-right: 0;
}

.app-howto-step04-col-heading {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-green);
  margin-bottom: 16px;
}

.app-howto-step04-col .app-howto-step-desc {
  min-height: 56px;
}

/* ---- Step 5 ---- */
.app-howto-step05-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.app-howto-step05-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-howto-step05-inner {
  display: flex;
  align-items: center;
  gap: 84px;
}

.app-howto-step05-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-howto-step05-card .app-howto-step-desc {
  margin-bottom: 0;
}

.app-howto-step05-inner .app-howto-step-media {
  flex: 0 0 46.6%;
  display: flex;
  justify-content: center;
}

.app-howto-step05-card .app-howto-step-media img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* ================================
  よくあるご質問セクション（applicationページ）
================================ */
.faq--application {
  background: var(--color-white);
  border-radius: 0 0 72px 72px;
  padding: 80px 0 40px;
}

.faq--application .faq-inner {
  max-width: 900px;
}

.faq--application .faq-heading {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 56px;
  color: var(--color-green);
}

/* --------------------------------
  SP（〜820px）
-------------------------------- */
@media (max-width: 820px) {
  .page-hero--application .page-hero-inner {
    height: auto;
    min-height: auto;
    height: 635px;
    padding-top: 30px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  .page-hero--application .page-hero-label {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .page-hero--application .page-hero-heading {
    margin-bottom: 14px;
    white-space: nowrap;
    font-size: 27.5px;
  }

  .page-hero--application .page-hero-desc {
    line-height: 175%;
  }

  .application-download {
    margin-top: 24px;
    width: 100%;
  }

  .application-download-row {
    margin-bottom: 8px;
  }

  .application-download-btn {
    font-size: 14px;
    padding: 11px 24px;
    width: 315px;
    margin: 0 auto;
  }

  .application-download-stores {
    font-size: 16px;
  }

  /* スマホモックアップ SP：テキスト下に静的配置 */
  .application-hero-media {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    max-width: none;
    margin-top: 28px;
  }

  .application-hero-media img {
    width: 50%;
    margin: 0 auto;
  }

  /* ---- アプリ機能紹介 SP ---- */
  .app-features {
    padding: 0 0 46px;
  }

  .app-features-inner {
    padding: 0 15px;
  }

  .app-features-header {
    padding-top: 50px;
    margin-bottom: 20px;
  }

  .app-features-heading {
    font-size: 29px;
  }

  /* SP：テキスト上・画像下（column-reverse で順序反転） */
  .app-feature-main {
    flex-direction: column-reverse;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .app-feature-main-media {
    flex: none;
    width: 80%;
    margin: 0 auto;
    align-self: auto;
  }

  .app-feature-main-media img {
    height: auto;
    object-fit: contain;
  }

  .app-feature-main-content {
    padding: 30px 20px 20px;
  }

  .app-feature-tag {
    font-size: 13px;
    padding: 5px 11px;
    margin-bottom: 14px;
  }

  .app-feature-main-heading {
    font-size: 26px;
    margin-bottom: 13px;
  }

  .app-feature-main-desc {
    font-size: 16px;
    margin-bottom: 25px;
  }

  .app-feature-main-note {
    font-size: 14px;
    padding: 15px 16px;
    border-radius: 6px;
  }

  /* SP：サービスカードをフラットなリストに */
  .app-service-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .app-service-card {
    border-radius: 10px;
    padding: 15px 12px 20px;
  }

  .app-service-card:last-child {
    border-bottom: 1px solid #E5E7EB;
  }

  .app-service-card-logos {
    padding-bottom: 5px;
    margin-bottom: 10px;
  }

  .app-service-card-heading {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .app-service-card-note {
    margin-top: 10px;
  }

  /* ---- 会員登録方法 SP ---- */
  .app-howto {
    padding: 65px 0 50px;
  }

  .app-howto-inner {
    padding: 0 15px;
  }

  .app-howto-heading {
    font-size: 29px;
    margin-bottom: 20px;
  }

  /* 1カラム */
  .app-howto-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }

  .app-howto-step--full {
    margin-bottom: 16px;
  }

  .app-howto-step-title {
    font-size: 18px;
  }

  .app-howto-step-card {
    padding: 30px 20px;
    border-radius: 12px;
  }

  .app-howto-step-title {
    font-size: 22px;
  }

  .app-howto-step-header {
    margin-bottom: 15px;
    gap: 8px;
  }

  .app-howto-step-desc {
    margin-bottom: 15px;
  }

  .app-howto-arrow {
    width: 45px;
    height: 20px;
  }

  /* Step 2, 5 メディア SP */
  .app-howto-step-media img {
    width: 100%;
    height: auto;
  }

  /* Step 3 SP：縦並び・下向き矢印 */
  .app-howto-step03-body {
    flex-direction: column;
    gap: 16px;
  }

  .app-howto-step03-body img {
    width: 100%;
  }

  .app-howto-arrow {
    transform: rotate(0deg);
  }

  /* Step 4 SP：縦積み */
  .app-howto-step04-cols {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .app-howto-step04-col {
    padding: 0;
  }

  .app-howto-step04-col:first-child {
    padding-left: 0;
    border-right: none;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 25px;
  }

  .app-howto-step04-col-heading {
    font-size: 18px;
  }

  /* Step 5 SP：縦積み */
  .app-howto-step05-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .app-howto-step05-card .app-howto-step-media {
    flex: 0 0 auto;
    width: 100%;
  }

  .app-howto-step05-inner {
    display: block;
  }

  .app-howto-step05-header {
    gap: 8px;
  }

  .app-howto-step05-left {
    margin-bottom: 15px;
  }

  /* ---- よくあるご質問 SP ---- */
  .faq--application {
    padding: 45px 0 40px;
    border-radius: 0 0 36px 36px;
  }

  .faq--application .faq-heading {
    font-size: 28px;
    margin-bottom: 32px;
  }

  .app-howto-step05-card .app-howto-step-media img {
    width: auto;
  }
}

@media (max-width: 767px) {
  .application-hero-media img {
    width: 100%;
    margin: 0 auto;
  }
}