@charset "UTF-8";

/*
 * からだメイチEWatch MH-W01 製品トチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eペ�Eジ スタイル
 * ブレークポイント：SP < 768px / Tablet 768px、E/ PC 1024px、E/ Large 1300px、E * フォントサイズは rem/em のみ使用�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Ex持E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�不可�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E * コンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E高さの絶対値固定不可�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E00%拡大対応！E */


/* ====================================
  カラー変数�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EigmaチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�イント�Eクン準拠�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E==================================== */

:root {
  /* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スチE*/
  --color-text-primary: #202020;
  --color-text-secondary: #91806F;
  /* 見�Eし�Eージュ */
  --color-text-note: #666666;

  /* 背景 */
  --color-bg-white: #FFFFFF;
  --color-bg-spec: #F9F8F7;
  /* スペックセクション */
  --color-bg-app-cards: #F9E5DE;
  /* アプリ機�EカーチE*/
  --color-bg-health-advice: #F0F0F0;
  /* 健康アドバイス */
  --color-bg-basic-func: #DEE3E6;
  /* 基本機�E */
  --color-bg-color-var: #DEE3E6;
  /* カラーバリエーション */
  --color-bg-footer: #403D33;
  /* フッター */

  /* ボ�Eダー */
  --color-border-faq: #E8E3DF;
  --color-border-beige: #C6BAAF;

  /* アクセンチE*/
  --color-sharp-red: #E6000D;
}

sup {
  color: var(--color-text-primary);
}

.sp {
  display: block
}

.pc {
  display: none
}

@media print,
screen and (width >=768px) {
  .sp {
    display: none
  }

  .pc {
    display: block
  }
}

/* ============================================================
  APP page styles
============================================================ */

.app-mv-section {
  background-color: #F9F8F7;
  padding-bottom: 40px;
}

.app-mv-image-wrap,
.app-mv-image-wrap picture,
.app-mv-image-wrap img {
  display: block;
}

.app-mv-image-wrap img {
  width: 100%;
  height: 36rem;
  object-fit: cover;
}

.app-mv-content-wrap {
  background-color: #F9F8F7;
  padding: 5rem 2.4rem 3.2rem;
}

.app-mv-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  text-align: center;
  color: var(--color-text-primary);
}

.app-mv-text {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  width: 100%;
}

.app-mv-copy {
  margin: 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.app-mv-lead {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.04em;
}

.app-mv-product-name {
  margin: 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: -0.02em;
}

.app-mv-product-name img {
  max-width: 190px;
}

.app-mv-product-name span {
  font-weight: 700;
}

.app-mv-downloads {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  max-width: 31.6rem;
  margin-inline: auto;
}

.app-mv-store-link {
  display: block;
  line-height: 0;
}

.app-mv-store-link img {
  display: block;
  height: 5rem;
  width: auto;
}

.app-mv-store-link:first-child img {
  width: 16.8rem;
}

.app-mv-store-link:nth-child(2) img {
  width: 13.6rem;
}

.app-mv-qr {
  display: none;
  width: 16rem;
  height: auto;
  border-radius: 1rem;
}

.app-mv-campaign {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
  box-sizing: border-box;
  width: 90%;
  max-width: 50rem;
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  background-color: #F9F8F7;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}

.app-mv-campaign img {
  flex: 0 0 auto;
  display: block;
  width: 18.8rem;
  height: auto;
  margin-inline: 0;
  border-radius: 1rem;
  scroll-snap-align: start;
}

.app-mv-campaign::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}


@media print,
screen and (width >=768px) {

  .app-mv-section {
    position: relative;
    padding-bottom: 0px;
  }

  .app-mv-image-wrap img {
    height: auto;
  }

  .app-mv-content-wrap {
    display: flex;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 80.6rem;
    box-sizing: border-box;
    padding: 0;
    background-color: transparent;
    justify-content: center;
  }

  .app-mv-content {
    gap: 3rem;
  }

  .app-mv-text {
    gap: 0rem;
  }

  .app-mv-copy {
    font-size: 3rem;
    line-height: 1.67;
    white-space: nowrap;
  }

  .app-mv-lead {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0.06em;
  }

  .app-mv-product-name {
    font-size: 3rem;
    line-height: 1.33;
  }

  .app-mv-downloads {
    gap: 1.6rem;
    flex-wrap: nowrap;
    max-width: none;
  }

  .app-mv-qr {
    display: block;
    width: 7.9rem;
    border-radius: 0;
  }

  .app-mv-campaign {
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 6.8rem;
    bottom: -90px;
    align-items: flex-start;
    gap: 1.6rem;
    width: auto;
    max-width: none;
    margin-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
    scrollbar-width: auto;
    background-color: transparent;
    padding: 0;
  }

  .app-mv-campaign img {
    width: 16rem;
  }

}

@media screen and (768px <=width < 1100px) {

  .app-mv-content-wrap {}

  .app-mv-content {
    gap: 2.6rem;
  }

  .app-mv-store-link img {
    height: 4rem;
  }

  .app-mv-store-link:first-child img {
    width: 13.5rem;
  }

  .app-mv-store-link:nth-child(2) img {
    width: 10.9rem;
  }

  .app-mv-copy,
  .app-mv-product-name {
    font-size: 2.4rem;
  }

  .app-mv-lead {
    font-size: 1.4rem;
  }

  .app-mv-qr {
    width: 6.4rem;
  }

  .app-mv-campaign {
    bottom: -70px;
  }

  .app-mv-campaign img {
    width: 12rem !important;
  }

}

@media screen and (768px <=width < 890px) {
  .app-mv-content-wrap {
    width: 50%;
  }

  .app-mv-campaign {
    bottom: -80px;
  }

  .app-mv-campaign img {
    width: 8rem !important;
  }

}

@media screen and (width < 390px) {

  .app-mv-section {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .app-mv-copy {
    font-size: 1.8rem;
  }

}



/* App: からだメイトとは�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.app-about-section {
  background: linear-gradient(157deg, #F9DEE4 0%, #F6C7B7 100%);
  overflow: hidden;
}

.app-about-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  padding: 6rem 2.4rem;
}

.app-about-text {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
  text-align: center;
}

.app-about-label {
  margin: 0;
  color: #E35330;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.06em;
}

.app-about-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}

.app-about-title-sp-break {
  display: none;
}

.app-about-title-sp-none {
  display: none;
}

.app-about-visual {
  width: 100%;
  max-width: 32.7rem;
  margin-top: 3.2rem;
}

.app-about-visual picture,
.app-about-visual img {
  display: block;
}

.app-about-visual img {
  width: 100%;
  height: auto;
}


@media print,
screen and (width >=768px) {

  .app-about-inner {
    min-height: 78.254rem;
    padding: 8rem 0 0;
    justify-content: flex-start;
  }

  .app-about-text {
    gap: 3rem;
  }

  .app-about-label {
    color: #B01D00;
  }

  .app-about-title {
    font-size: 3rem;
    line-height: 1.667;
    letter-spacing: 0.14em;
  }

  .app-about-title-sp-none {
    display: block;
  }

  .app-about-visual {
    width: 75.1%;
    max-width: 108.1rem;
    margin-top: 6rem;
  }

}

@media screen and (768px <=width < 1100px) {

  .app-about-inner {
    min-height: 65rem;
  }

  .app-about-visual {
    width: 75%;
    max-width: 750px;
    margin-top: auto;
  }

}

@media screen and (width < 768px) {

  .app-about-section {
    width: 100%;
    margin-inline: 0;
  }

  .app-about-inner {
    width: 100%;
    padding-inline: 0;
    padding-bottom: 0;
  }

  .app-about-title {
    letter-spacing: 0.06em;
    padding: 0 1.5em;
  }

  .app-about-visual {
    width: 100%;
    max-width: 100%;
    margin-top: 3.2rem;
  }

  .app-about-title-sp-break {
    display: block;
  }

}

/* App: ウェアラブルヘルスケア体騁E*/
.app-wearable-section {
  position: relative;
  background-color: var(--color-bg-app-cards);
  padding: 6rem 0rem;
}


.app-wearable-title {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 2.4rem;
}

.app-wearable-heading {
  text-align: center;
  margin: 0;
  color: var(--color-text-primary);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.64;
  letter-spacing: 0.14em;
  overflow-wrap: anywhere;
}

.app-wearable-lead {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  text-align: center;
}

.app-wearable-content {
  margin-top: 3.2rem;
}

.app-wearable-products {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  padding: 0 2.4rem;
}

.app-wearable-product {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.app-wearable-product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3.2rem 0 2.8rem;
  border-radius: 1.6rem;
  background-color: rgba(255, 255, 255, 0.3);
}

.app-wearable-product-card img {
  display: block;
  width: 16rem;
  height: 16rem;
  object-fit: contain;
}

.app-wearable-product-name {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.06em;
  text-align: center;
}

.app-wearable-product-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.2rem;
  min-height: 4.2rem;
  padding: 0.6rem 4rem;
  border-radius: 0.8rem;
  background-color: #fff;
  color: var(--color-text-primary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.96px;
}

.app-wearable-product-link:hover {
  text-decoration: none;
  background: #F1EFEE;
  box-shadow: 0 0 10px 0 rgba(32, 32, 32, 0.08);
}

.app-wearable-product-text {
  text-align: center;
}

.app-wearable-product-title {
  margin: 0 0 1.8rem;
  color: var(--color-text-primary);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.53;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.app-wearable-sp-break {
  display: block;
}

.app-wearable-product-text p {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.app-wearable-cards {
  margin-top: 6rem;
  margin-inline: -2.4rem;
}

.app-wearable-note {
  margin: 1.4rem 0 0;
  color: #5E5E5E;
  font-size: 1.4rem;
  line-height: 1.57;
  letter-spacing: 0.04em;
  text-align: left;
  font-weight: 400;
  width: 80%;
  margin: 0 auto;
  padding-left: 1em;
  text-indent: -1em;
}

.app-wearable-note2 {
  margin: 1.4rem 0 0;
  color: #5E5E5E;
  font-size: 1.6rem;
  line-height: 1.57;
  letter-spacing: 0.04em;
  text-align: left;
  font-weight: 400;
  width: 80%;
  margin: 0 auto;
  padding-left: 1em;
  text-indent: -1em;
}

.app-card-device-legend {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 2rem;
  margin: 1.6rem 0 0;
  padding: 0 10px 0 0;
  list-style: none;
  color: #5E5E5E;
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.app-card-device-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #5E5E5E;
  font-size: 1.4rem;
  font-weight: 400;
}

.app-card-device-legend img {
  display: block;
  width: 1.8rem;
  height: auto;
}


@media print,
screen and (width >=768px) {

  .app-wearable-section {
    padding: 10rem 0;
  }

  .app-wearable-title {
    gap: 3rem;
    box-sizing: border-box;
    width: calc(100% - 6rem);
    max-width: 114rem;
    margin-inline: auto;
    text-align: left;
  }

  .app-wearable-heading {
    font-size: 3.2rem;
    line-height: 1.5625;
    text-align: left;
  }

  .app-wearable-lead {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0.06em;
    text-align: left;
  }

  .app-wearable-content {
    margin-top: 5rem;
  }

  .app-wearable-products {
    flex-direction: row;
    gap: 3rem;
    justify-content: flex-start;
    box-sizing: border-box;
    width: calc(100% - 6rem);
    max-width: 114rem;
    margin-inline: auto;
  }

  .app-wearable-product {
    width: 55.5rem;
    gap: 3rem;
  }

  .app-wearable-product-card {
    gap: 2.4rem;
    padding: 5rem 0 4rem;
  }

  .app-wearable-product-card img {
    width: 24rem;
    height: 24rem;
  }

  .app-wearable-product-name {
    font-size: 1.6rem;
    line-height: 1.75;
  }

  .app-wearable-product-link {
    min-width: 12rem;
    min-height: 4.6rem;
  }

  .app-wearable-product-title {
    margin-bottom: 2.4rem;
    font-size: 2.2rem;
    line-height: 1.636;
    letter-spacing: 0.14em;
  }

  .app-wearable-sp-break {
    display: none;
  }

  .app-wearable-product-text p {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0.06em;
  }

  .app-wearable-cards {
    margin-top: 10rem;
    margin-inline: 0;
  }



  .app-wearable-cards.app-cards-wrap {
    padding-left: 15rem;
    scroll-padding-left: 15rem;
  }

  .app-wearable-cards+.wearable-scrollbar {
    /*margin-inline: 0;*/
  }

  .app-wearable-cards .list-app-cards {
    gap: 3rem;
    padding-right: 15rem;
  }

  .app-wearable-note {
    margin-top: 0.4rem;
    text-align: right;
  }

  .app-wearable-note2 {
    margin-top: 1.4rem;
    text-align: right;
  }

}

@media screen and (width < 768px) {

  .app-wearable-section {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
  }

}


/* 水分量自動測定 モーダル */
.is-watch-water-modal-open {
  overflow: hidden;
}

.watch-water-modal[hidden] {
  display: none;
}

.watch-water-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 3.2rem 2.4rem;
}

.watch-water-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 70%);
}

.watch-water-modal-panel {
  position: relative;
  z-index: 1;
  background-color: #F9F8F7;
  border-radius: 2rem;
  /*width: min(100%, 32.7rem);
  margin-block: 1.8rem;
  padding: 6rem 2.4rem;
  outline: none;*/
}

.watch-water-modal-close {
  position: absolute;
  top: -1rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding: 0;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
  transform: translateX(36%);
  cursor: pointer;
}

.watch-water-modal-close:hover {
  background: #ECE9E6;
  box-shadow: 0 0 10px 0 rgba(32, 32, 32, 0.08);
}

.watch-water-modal-close img {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}

.watch-water-modal-lead {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  text-align: center;
}

.watch-water-modal-title {
  margin: 0;
  color: #202020;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.53;
  letter-spacing: 0.08em;
}

.watch-water-modal-desc,
.watch-water-modal-note {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.04em;
}

.watch-water-modal-desc {
  color: #202020;
}

.watch-water-modal-note {
  color: #5E5E5E;
}

.watch-water-modal-image {
  display: block;
  width: 100%;
  max-width: 28rem;
  margin: 3.2rem auto 0;
}

.watch-water-modal-image img {
  display: block;
  width: 100%;
  height: auto;
}

@media print,
screen and (width >=768px) {

  .watch-water-modal {
    align-items: center;
    overflow: hidden;
    padding: 4rem;
  }

  .watch-water-modal-panel {
    /*width: min(100%, 102.1rem);
    max-height: calc(100vh - 8rem);
    margin-block: 1.8rem;
    padding: 6rem;
    overflow-y: auto;*/
  }

  .watch-water-modal-close {
    position: absolute;
    top: -2.2rem;
    right: -2.2rem;
    z-index: 20;
    margin: 0;
    transform: none;
  }

  .watch-water-modal-lead {
    gap: 2rem;
  }

  .watch-water-modal-title {
    font-size: 2.2rem;
    line-height: 1.64;
    letter-spacing: 0.14em;
  }

  .watch-water-modal-desc {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0.06em;
  }

  .watch-water-modal-note {
    font-size: 1.4rem;
    line-height: 1.57;
  }

  .watch-water-modal-image {
    max-width: 64rem;
    margin-top: 5rem;
  }

}


/* ウォッチバンド モーダル */
.is-watch-band-modal-open {
  overflow: hidden;
}

.watch-band-modal[hidden] {
  display: none;
}

.watch-band-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 6rem 2.4rem;
}

.watch-band-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 70%);
}

.watch-band-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 32.7rem);
  padding: 6rem 2.4rem;
  background-color: #F9F8F7;
  border-radius: 2rem;
  outline: none;
}

.watch-band-modal-close {
  position: absolute;
  top: -1rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding: 0;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
  transform: translateX(36%);
  cursor: pointer;
}

.watch-band-modal-close:hover {
  background: #ECE9E6;
  box-shadow: 0 0 10px 0 rgba(32, 32, 32, 0.08);
}

.watch-band-modal-close img {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}

.watch-band-modal-lead {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  text-align: center;
}

.watch-band-modal-title {
  margin: 0;
  color: #202020;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.53;
  letter-spacing: 0.08em;
}

.watch-band-modal-desc {
  margin: 0;
  color: #202020;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.04em;
}

.watch-band-modal-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-top: 3.2rem;
}

.watch-band-modal-brand img {
  display: block;
  width: 18rem;
  height: auto;
}

.watch-band-modal-link {
  color: #91806F;
  font-family: "Noto Serif JP", serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.875;
  letter-spacing: 0.05em;
  text-decoration: underline;
}

.watch-band-modal-link:hover {
  color: #202020;
}

@media print,
screen and (width >=768px) {

  .watch-band-modal {
    padding: 4rem;
  }

  .watch-band-modal-panel {
    width: min(100%, 77.9rem);
    padding: 6rem;
  }

  .watch-band-modal-close {
    top: 0;
    transform: translate(36%, -36%);
  }

  .watch-band-modal-lead {
    gap: 2.4rem;
  }

  .watch-band-modal-title {
    font-size: 2.2rem;
    line-height: 1.64;
    letter-spacing: 0.14em;
  }

  .watch-band-modal-desc {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0.06em;
  }

  .watch-band-modal-brand {
    gap: 3rem;
    margin-top: 5rem;
  }

  .watch-band-modal-brand img {
    width: 20rem;
  }

}


/* ====================================
  共通スタイル
==================================== */

/* 非表示チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト（スクリーンリーダー用�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
/* App: コース選抁E*/
.app-course-section {
  background-color: #fff;
}

.app-course-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 144rem;
  margin-inline: auto;
  padding: 6rem 2.4rem;
}

.app-course-title {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.app-course-heading {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.64;
  letter-spacing: 0.14em;
  text-align: center;
}

.app-course-lead {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-align: center;
}

.app-course-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  margin-top: 3.2rem;
}

.app-course-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 32.7rem);
}

.app-course-image {
  width: 28.4rem;
  max-width: 100%;
  height: 22rem;
  overflow: hidden;
  border-radius: 1.6rem;
  background-color: #F0F0F0;
}

.app-course-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-course-body {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  box-sizing: border-box;
  width: 100%;
  margin-top: -2.4rem;
  padding: 4rem 1.6rem;
  border-radius: 1.6rem;
  background-color: rgba(230, 230, 230, 0.4);
  backdrop-filter: blur(1.2rem);
}

.app-course-body>img {
  flex-shrink: 0;
  width: 5.4rem;
  height: 5.4rem;
}

.app-course-text {
  flex: 1;
  min-width: 0;
}

.app-course-text h3 {
  margin: 0;
  color: rgba(0, 0, 0, 0.8);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.53;
  letter-spacing: 0.08em;
}

.app-course-text p {
  margin: 1.6rem 0 0;
  color: rgba(0, 0, 0, 0.8);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.54;
  letter-spacing: 0.02em;
}


@media print,
screen and (width >=768px) {

  .app-course-inner {
    padding: 10rem 15rem;
  }

  .app-course-title {
    gap: 3rem;
    max-width: 114rem;
    margin-inline: auto;
  }

  .app-course-heading {
    font-size: 3.2rem;
    line-height: 1.5625;
    text-align: left;
  }

  .app-course-lead {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0.06em;
    text-align: left;
  }

  .app-course-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 5rem 3rem;
    width: 100%;
    max-width: 114rem;
    margin: 5rem auto 0;
  }

  .app-course-card {
    grid-column: span 2;
    width: 100%;
    height: 100%;
  }

  .app-course-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .app-course-card:nth-child(5) {
    grid-column: 4 / span 2;
  }

  .app-course-image {
    width: 32rem;
    height: 32rem;
  }

  .app-course-body {
    flex: 1;
    padding-inline: 2rem;
  }

}

@media screen and (768px <=width < 1200px) {

  .app-course-inner {
    padding-inline: 3rem;
  }

  .app-course-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-course-card,
  .app-course-card:nth-child(4),
  .app-course-card:nth-child(5) {
    grid-column: auto;
  }

}


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


/* ====================================
  ローカルヘッダーナビ�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�カチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�リタブ）上書ぁE  product-common.css のチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�プレートスタイルを上書ぁE==================================== */

/* 非アクチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ブ色 */
.list-local-header-navi>li>a {
  color: #ADADAD;
}

/* アクチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ブ色 */
.list-local-header-navi>li>a.active {
  color: #202020;
}

/* アクチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ブ下線色 */
.list-local-header-navi>li>a.active::before {
  background-color: #202020;
}

/* SP: flex-grow リセチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E��E�E�E�E�E�E�E�プレート�E等幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�トレチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�を解除�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E20px gap */
.list-local-header-navi>li:first-child,
.list-local-header-navi>li:not(:first-child) {
  flex-grow: 0;
}

.list-local-header-navi {
  gap: 2rem;
  justify-content: center;
}


/* ====================================
  MV�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�メインビジュアル�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E  Figma仕槁E 1440ÁE30 / オーバ�Eレイbox 583ÁE96 @(746,165)
  ※ 現在はサンプル画像（テキスト�Eり）使用。本番差し替え前提�Eため
     HTMLチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ストをグレーフロストガラスボックスでオーバ�Eレイ表示、E==================================== */

.mv-section {
  position: relative;
  overflow: hidden;
}

/* 画像ラチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ー�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E��E�E�E�E�E�E�E�レーチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ブ扱ぁE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�aria-hidden="true"�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.mv-image-wrap {
  display: block;
  line-height: 0;
  /* 画像下�E隙間を除去 */
}

.mv-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ストオーバ�Eレイ�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�SP時�E画像下に通常フロー */
.mv-content-wrap {
  background-color: #F9F8F7;
  padding-block: 2rem;
  padding-inline: 1.5rem;
}

/* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ストコンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�佁E*/
.mv-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* キャチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�コピ�E (Figma: 30px Regular LS14%) */
.mv-copy {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #202020;
}

/* 製品名 (Figma: 30px Bold+Light LS-2%) */
.mv-product-name {
  font-size: 2.2rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #202020;
}

.mv-brand {
  font-weight: 700;
}

.mv-brand-watch {
  font-weight: 300;
}

/* 型番・対応OS (Figma: 14px Regular LS4%) */
.mv-model-info {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #202020;
}

/* 価格ボックス (Figma: bg rgba(255,255,255,0.8) / radius 8px / shadow) */
.mv-price-wrap {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.8rem;
  box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
  width: 100%;
  max-width: 327px;
}

.mv-price-wrap a {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-decoration: none;
  border-radius: 0.8rem;
}

.mv-price-wrap a:hover {
  text-decoration: none;
  background: var(--beige_light02, #F1EFEE);
  box-shadow: 0 0 10px 0 rgba(32, 32, 32, 0.08);
}

/* 店�E吁E(Figma: 16px Regular LS6%) */
.mv-store-label {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #202020;
}

/* 価格 (Figma: 24px Medium LS14%) */
.mv-price {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #202020;
}


/* ====================================
  機�E特長セクション�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eeature-section�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E  PC: チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト左・ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�画像右�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�また�E反転�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E  SP: ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�画像上�EチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ストカード下（カード上部が画像に重なる！E==================================== */

.feature-section {
  position: relative;
  overflow: hidden;
}

/* 背景画像ラチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ー�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�吁E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�クションで背景画像を設宁E*/
.feature-bg-wrap {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: 0;
}

/* 機�E特長1�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�カロリー自動計測�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�背景 */
.feature-section--calorie .feature-bg-wrap {
  background-image: url(/wearable/common/images/watch_bg_1.webp);
}

/* 機�E特長2�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�水刁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�自動測定）背景 */
.feature-section--water .feature-bg-wrap {
  background-image: url(/wearable/common/images/watch_bg_2.webp);
}

/* 機�E特長3�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�サーキチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ビュー�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�背景 */
.feature-section--circuit .feature-bg-wrap {
  background-image: url(/wearable/common/images/watch_bg_3.webp);
}

/* 冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�レイアウト！EP: 縦積み�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.feature-inner {
  display: flex;
  flex-direction: column;
}

/* ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�画像エリア�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EP: 上部に配置�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.feature-image {
  order: 0;
  /* SP: 最上部 */
  text-align: center;
  position: relative;
}

.ring .feature-image {
  display: flex;
}

.feature-image img {
  display: block;
  width: 80%;
  max-width: 25rem;
  height: auto;
  margin-inline: auto;
  position: absolute;
  top: 50%;
  transform: translate(-0%, -50%);
}

.video-container {
  width: 195%;
  height: auto;
  display: block;
  clip-path: circle(22% at center);
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ストカードエリア�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EP: 画像に100px重�Eて下部�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.feature-text {
  order: 1;
  background-color: rgba(255, 255, 255, 0.92);
  padding: 2rem;
  margin-top: -6.25rem;
  /* -100pxをremで表現�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Erem=16px想定だが可変！E*/
  position: relative;
  z-index: 1;
}

/* タグライン�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�「食事から、理想の自刁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�」など�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E   Figma仕槁E 32px / Medium / #202020 / LS14% / LH50px
   SP: めE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�縮封E*/
.feature-tagline {
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0.14em;
  line-height: 1.56;
  margin-bottom: 2rem;
  /* Figma: タグラインと機�E名�E閁Egap 50px相彁E*/
}

/* 機�E名（「カロリー自動計測」など�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E   Figma仕槁E 20px / Medium / LS10%
   product-top.css の section-title 裁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�黒バー・ボ�Eダー�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�めEfeature-section 冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�無効匁E*/
.feature-title.section-title {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  margin-bottom: 1.5rem;
  /* section-title の border-top・padding-top をリセチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� */
  border-top: none;
  padding-top: 0;
}

/* product-top.css の ::before 黒グラチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eションバ�EめEfeature-section 冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�非表示 */
.feature-section .feature-title.section-title::before {
  display: none;
}

/* 機�E説明文 */
.feature-desc {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem;

}

/* 詳細ボタン
   Figma仕槁E bg rgba(255,255,255,0.8) / shadow / radius 8px / padding 0 40px / height 46px */
.feature-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: none;
  font-size: 1.5rem;
  font-weight: 400;
  font-family: inherit;
  color: var(--color-text-primary);
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
  border-radius: 0.8rem;
  padding: 0 2.5rem;
  height: 4.4rem;
  white-space: nowrap;
}

.feature-btn:hover {
  background: #F1EFEE;
  box-shadow: 0 0 10px 0 rgba(32, 32, 32, 0.08);
  text-decoration: none;
}

.feature-btn .chevron-right {
  width: 0.5em;
  height: auto;
  fill: currentColor;
  flex-shrink: 0;
}

/* カロリー自動計測 モーダル */
.is-watch-calorie-modal-open {
  overflow: hidden;
}

.watch-calorie-modal[hidden] {
  display: none;
}

.watch-calorie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 3.2rem 2.4rem;
}

.watch-calorie-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 70%);
}

.watch-calorie-modal-panel {
  position: relative;
  background-color: #F9F8F7;
  border-radius: 2rem;
  z-index: 1;
  /*width: min(100%, 32.7rem);
  margin-block: 1.8rem;
  padding: 6rem 2.4rem;
  outline: none;*/
}

.watch-calorie-modal-inner {
  width: min(100%, 103.4rem);
  max-height: calc(100vh - 8rem);
  margin-block: 1.8rem;
  padding: 6rem;
  overflow-y: auto;
}

.watch-calorie-modal-close {
  position: absolute;
  top: -1rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding: 0;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
  transform: translateX(36%);
  cursor: pointer;
}

.watch-calorie-modal-close:hover {
  background: #ECE9E6;
  box-shadow: 0 0 10px 0 rgba(32, 32, 32, 0.08);
}

.watch-calorie-modal-close img {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}

.watch-calorie-modal-lead {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  text-align: center;
}

.watch-calorie-modal-title {
  margin: 0;
  color: #202020;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.53;
  letter-spacing: 0.08em;
}

.watch-calorie-modal-desc,
.watch-calorie-modal-note {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.04em;
}

.watch-calorie-modal-desc {
  color: #202020;
}

.watch-calorie-modal-note {
  color: #5E5E5E;
}

.watch-calorie-modal-steps {
  display: grid;
  grid-template-columns: repeat(2, 13rem);
  justify-content: center;
  gap: 2.4rem 1.6rem;
  margin: 3.2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: calorie-step;
}

.watch-calorie-modal-step {
  counter-increment: calorie-step;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 13rem;
  text-align: center;
}

.watch-calorie-modal-step img {
  display: block;
  width: 13rem;
}

.watch-calorie-modal-step p {
  margin: 0;
  color: #202020;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.04em;
}

@media print,
screen and (width >=768px) {

  .watch-calorie-modal {
    align-items: center;
    overflow: hidden;
    padding: 4rem;
  }

  .watch-calorie-modal-panel {
    /*width: min(100%, 103.4rem);
    max-height: calc(100vh - 8rem);
    margin-block: 1.8rem;
    padding: 6rem;
    overflow-y: auto;*/
  }

  .watch-calorie-modal-close {
    position: absolute;
    top: -2.2rem;
    right: -2.2rem;
    z-index: 20;
    margin: 0;
    transform: none;
  }

  .watch-calorie-modal-lead {
    gap: 2rem;
  }

  .watch-calorie-modal-title {
    font-size: 2.2rem;
    line-height: 1.64;
    letter-spacing: 0.14em;
  }

  .watch-calorie-modal-desc {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0.06em;
  }

  .watch-calorie-modal-note {
    font-size: 1.4rem;
    line-height: 1.57;
  }

  .watch-calorie-modal-steps {
    grid-template-columns: repeat(3, 20rem);
    gap: 3.3rem 2rem;
    margin-top: 5rem;
  }

  .watch-calorie-modal-step {
    gap: 1.6rem;
    width: 20rem;
  }

  .watch-calorie-modal-step img {
    width: 20rem;
  }

  .watch-calorie-modal-step p {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
  }

}


/* ====================================
  アプリ機�Eセクション�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eカード横スクロール�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E  タイトル・リード�E線なぁE  カード構�E: タイトル ↁE説昁EↁE画像（下部�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E==================================== */

.app-features-section {
  background-color: var(--color-bg-app-cards);
  padding-block: 5rem;
  position: relative;
}

/* スクロールバ�EのインチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ト左側を背景色で要E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�隠ぁE   �E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�コンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�は全幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�peekを実現しつつ、スクロールバ�EはコンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�置から見せる！E*/
.app-features-section::after {
  content: '';
  position: absolute;
  bottom: 4.8rem;
  left: 0;
  width: 5rem;
  height: 0.7rem;
  background-color: var(--color-bg-app-cards);
  z-index: 1;
  display: none;
}

/* スクロールコンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�横スクロール管琁E   ・padding-left ↁE初期状態でカードをコンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�置からスターチE   ・scroll-padding-left = padding-left ↁEスナップ時にpeekがブラウザ左端まで届く
     peek幁E= scroll-padding-left - gap */
.app-cards-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-left: 5rem;
  scroll-padding-left: 5rem;
  /*padding-bottom: 4.8rem;*/
}

/* スクロールバ�E */
.app-cards-wrap::-webkit-scrollbar {
  height: 0.4rem;
}

.app-cards-wrap::-webkit-scrollbar-track {
  background: rgba(255, 113, 77, 0.2);
  border-radius: 0.2rem;
}

.app-cards-wrap::-webkit-scrollbar-thumb {
  background: #FF714D;
  border-radius: 0.2rem;
}

.app-cards-wrap.is-custom-scrollbar,
.helpful-contents-scroll.is-custom-scrollbar,
.app-mv-campaign.is-custom-scrollbar,
.app-download-promo-campaign-list.is-custom-scrollbar {
  scrollbar-width: none;
}

.app-cards-wrap.is-custom-scrollbar::-webkit-scrollbar,
.helpful-contents-scroll.is-custom-scrollbar::-webkit-scrollbar,
.app-mv-campaign.is-custom-scrollbar::-webkit-scrollbar,
.app-download-promo-campaign-list.is-custom-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.app-cards-wrap--drag-scroll {
  cursor: grab;
}

.app-cards-wrap--drag-scroll.is-content-dragging,
.helpful-contents-scroll--drag-scroll.is-content-dragging {
  cursor: grabbing;
  user-select: none;
}

.helpful-contents-scroll--drag-scroll {
  cursor: grab;
}

@media (hover: hover) and (pointer: fine) {
  .helpful-contents-scroll--drag-scroll {
    scroll-snap-type: none;
  }
}

.wearable-scrollbar {
  height: 0.4rem;
  margin-top: 1.5rem;
  background: rgba(255, 113, 77, 0.2);
  border-radius: 0.2rem;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  width: 80%;
  margin: 0 auto;
}

.wearable-scrollbar-thumb {
  display: block;
  height: 100%;
  background: #FF714D;
  border-radius: 0.2rem;
  transform-origin: left center;
  will-change: transform;
}

.wearable-scrollbar.is-dragging {
  cursor: grabbing;
}

.helpful-scrollbar {
  height: 0.4rem;
  margin-top: 1.5rem;
  background: rgba(113, 111, 110, 0.2);
  border-radius: 0.2rem;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  width: 80%;
  margin: 0 auto;
}

.helpful-scrollbar-thumb {
  display: block;
  height: 100%;
  background: #716f6e;
  border-radius: 0.2rem;
  transform-origin: left center;
  will-change: transform;
}

.helpful-scrollbar.is-dragging {
  cursor: grabbing;
}

.app-wearable-cards+.wearable-scrollbar {
  /*margin-inline: -2.4rem;*/
}

.app-mv-campaign+.wearable-scrollbar,
.app-download-promo-campaign-list+.wearable-scrollbar {
  margin-top: 2.4rem;
}

/* カードリスチE*/
.list-app-cards {
  list-style: none;
  padding: 0;
  padding-right: 1.5rem;
  margin: 0;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* 個別カード：縦flex�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E��E�E�E�E�E�E�E�スト上�E画像下！E*/
.app-card {
  flex: 0 0 28rem;
  scroll-snap-align: start;
}

.list-app-cards--watch-end-space::after {
  content: '';
  flex: 0 0 5rem;
  scroll-snap-align: none;
}

.app-card-panel {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 1.6rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 428px;
  height: 100%;
}

.app-card-device-icon {
  display: flex;
  justify-content: left;
  margin-top: 1.3rem;
  line-height: 0;
  gap: 10px;
}

.app-card-device-icon img {
  display: block;
  width: 1.85rem;
  height: auto;
}

.app-card-device-icon img.icon-watch {
  width: 1.85rem;
  height: auto;
}

.app-card-device-icon img.icon-ring {
  width: 3.9rem;
  height: auto;
}

/* カード本斁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�タイトル�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�説明！E 上部 */
.app-card-body {
  padding: 1.5rem 1.5rem 1rem;
}

/* カード画僁E 下部�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Elex: 1で残り高さを使ぁE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.app-card-image {
  margin-top: auto;
  line-height: 0;
  display: flex;
  align-items: end;
}

.app-card-image img {
  display: block;
  width: 100%;
  height: auto;
}

.app-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
  margin-bottom: 0.75em;
  text-align: center;
}

.app-card-desc {
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--color-text-primary);

}

.app-card-note {
  font-size: 1.1rem;
  color: var(--color-text-note);
  margin-top: 0.75em;
}


/* ====================================
  健康アドバイスセクション
==================================== */

.health-advice-section {
  background-color: var(--color-bg-health-advice);
}

/* section-title の border-top・padding-top・::before をリセチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eroduct-top.css 上書き！E*/
.health-advice-section .section-title,
.timeline-section .section-title {
  border-top: none;
  padding-top: 0;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: 4.48px;
}

.health-advice-section .section-title::before,
.timeline-section .section-title::before {
  display: none;
}

/* 冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�レイアウト！EP: 縦積み�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.health-advice-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* アプリ画面イメージ */
.health-advice-image img {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
}

/* 白ぁE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ス�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�グレー背景の上に右寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�で配置�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.health-advice-box {
  background: var(--white-50, rgba(255, 255, 255, 0.50));
  padding: 4rem 5%;
  border-radius: 16px;
}

/* からだメイトアプリ タグボタン */
.health-advice-app-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  border-radius: 1rem;
  height: 4.6rem;
  padding-inline: 1.4rem 1.0rem;
  padding: 0 2rem 0 1.4rem;
  margin-top: 3rem;
  text-decoration: none;
  transition: background-color 0.2s;
  border-radius: 8px;
  background: var(--white-80, rgba(255, 255, 255, 0.80));
  box-shadow: 0 0 10px 0 rgba(32, 32, 32, 0.08);
}

.health-advice-app-tag img {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 1rem;
  flex-shrink: 0;
}

.health-advice-app-tag span {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-text-primary);
  padding-left: 10px;
}

@media (hover: hover) and (pointer: fine) {
  .health-advice-app-tag:hover {
    background-color: #ECE9E6;
    text-decoration: none;
  }

  .health-advice-app-tag:hover span {
    text-decoration: none;
  }
}

/* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ストエリア */
.health-advice-desc {
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-block: 1em 0;
}


/* ====================================
  タイムラインセクション
==================================== */

.timeline-section {
  background-color: var(--color-bg-health-advice);
}

/* 白ぁE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ス�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�グレー背景の上に右寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�で配置�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.timeline-box {
  background: var(--white-50, rgba(255, 255, 255, 0.50));
  padding: 4rem 5%;
  border-radius: 16px;
}

/* 2カラム外枠�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EP: 縦積み�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.timeline-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.timeline-desc {
  font-size: 1.6rem;
  line-height: 1.8;
  margin-top: 1em;
  color: var(--color-text-primary);
}

/* 画像ブロチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スマ�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�時間帯ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.timeline-images {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}

/* スマ�E画像（左�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.timeline-phone {
  flex: 0 0 auto;
}

.timeline-phone img {
  display: block;
  width: 14rem;
  height: auto;
}

/* 時間帯ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�一覧�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�縦並び�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.timeline-times {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 0 0 auto;
}

.timeline-image-wrap img {
  display: block;
  width: 8rem;
  height: auto;
}

.timeline-image-toggle {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.timeline-image-toggle picture {
  display: block;
}

.app-plan-compare-note-wrap {
  width: 90%;
  max-width: 840px;
  margin-top: 3rem;
  margin-left: auto;
  margin-right: auto;
}

/* ====================================
  基本機�Eセクション
==================================== */

.basic-functions-section {
  background-color: var(--color-bg-basic-func);
}

/* 基本機�E: section-title の上線�E黒バーを非表示 */
.basic-functions-section .section-title {
  border-top: none;
  padding-top: 0;
  letter-spacing: 4.48px;
  text-align: center;
}

.basic-functions-section .section-title::before {
  display: none;
}

/* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト中央寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� */
.basic-function-text {
  text-align: center;
}

/* 冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�レイアウト！EP: 縦積み�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.basic-functions-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.basic-function-item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.basic-function-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.basic-function-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.5em;
}

.basic-function-item p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--color-text-primary);
}


/* ====================================
  カラーバリエーションセクション
==================================== */

.color-variation-section {
  background-color: var(--color-bg-color-var);
}

/* section-title の上線�E黒バーを非表示 */
.color-variation-section .section-title {
  border-top: none;
  padding-top: 0;
  text-align: center;
}

.color-variation-section .section-title::before {
  display: none;
}

/* 画像グリチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EP: 縦積み�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.color-variation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.color-variation-main img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.color-variation-subs {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.color-variation-sub {
  flex: 1;
  min-height: 0;
}

.color-variation-sub img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

/* カラー吁E*/
.color-variation-label {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-text-primary);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: 1px;
}

/* カラーセレクタードッチE*/
.color-variation-selector {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.color-dot {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

.color-dot--gold {
  background-color: #C9BDB3;
}

.color-dot--silver {
  background-color: #C2C2C2;
}

/* 選択中ドッチE 外枠 #806C59 / 冁E#C9BDB3 / 白ぁE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ャチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E */
.color-dot--selected {
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #806C59;
}

/* フッター（アワードバッジ＋カラー名・ドット）
   SP: バッジを画像直下に右寄せ → その下にキャプション中央（Figma SP: 82×42 / gap 16px） */
.color-variation-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 0rem;
}

.color-variation-award {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin-top: 0;
  width: 8.2rem;
  height: auto;
}

.color-variation-caption {
  grid-column: 2;
  grid-row: 1;
}

/* ====================================
  ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�フェイスセクション
==================================== */

/* section-title の上線�E黒バーを非表示 */
.watch-face-section .section-title {
  border-top: none;
  padding-top: 0;
  text-align: center;
}

.watch-face-section .section-title::before {
  display: none;
}

.watch-face-desc {
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-block: 1em 3.5em;
  text-align: center;
}

/* 全幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�像エリア�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�SP では横スクロール、中央フォーカス */
.watch-face-image {
  scroll-snap-type: x mandatory;
  display: flex;
  justify-content: center;
  padding-inline: 5%;
}

.watch-face-image img {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: auto;
  /* SP では最低幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�確保して横スクロール */
  max-width: 100%;
  scroll-snap-align: center;
}

/* 注記テキスチE*/
.watch-face-note {
  font-size: 1.6rem;
  color: var(--color-text-note);
  margin-top: 5rem;
  text-align: center;
}

.watch-face-note span {
  border-bottom: 1px solid #5E5E5E;
}

.watch-face-note-button {
  padding: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: none;
  text-align: center;
}

.watch-face-note-button a {
  text-decoration: underline;
}

.watch-face-note-button:hover {
  color: #202020;
}

/* ====================================
  スペックチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eブルセクション
==================================== */

.spec-section {
  background-color: var(--color-bg-spec);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.spec-note {
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  color: var(--darkgray, #5E5E5E);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.56px;
  padding-left: 2em;
  text-indent: -2em;
}

.watch-notes-section {
  padding-block: 0rem 5rem;
  background-color: var(--color-bg-spec);
}

.watch-notes-inner {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  color: var(--darkgray, #5E5E5E);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.watch-notes-title {
  margin: 0 0 1.8rem;
  color: var(--color-text-primary);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
}

.watch-notes-block {
  margin-top: 1.8rem;
}

.watch-notes-heading {
  margin: 0 0 0.4rem;
  color: var(--color-text-primary);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
  text-decoration: underline;
}

.watch-notes-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.watch-notes-list li {
  padding-left: 1em;
  text-indent: -1em;
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  color: var(--darkgray, #5E5E5E);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.56px;
}

/* section-title: 上線削除・中央寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� */
.spec-section .section-title {
  border-top: none;
  padding-top: 0;
  text-align: center;
}

.spec-section .section-title::before {
  display: none;
}

/* スペックチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eブル: 最大幁E40px・中央配置 */
.watch-spec-table {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 2rem;
  font-size: 1.4rem;

}

.spec-col-th {
  width: 10rem;
}

.watch-spec-table tr:first-child th,
.watch-spec-table tr:first-child td {
  border-top: 1px solid var(--color-border-faq);
}

.watch-spec-table th,
.watch-spec-table td {
  padding: 1.0em 1em;
  border-bottom: 1px solid var(--color-border-faq);
  vertical-align: middle;
  line-height: 1.6;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
}

.watch-spec-table th {
  width: 10rem;
  font-weight: 400;
  color: var(--color-text-primary);
  text-align: left;
  padding-left: 1rem;
  padding-right: 2rem;
  overflow-wrap: break-word;
  word-break: break-all;
}

.watch-spec-table td {
  color: var(--color-text-primary);
}

.watch-spec-table td sup {
  color: var(--color-text-primary);
}

/* ====================================
  FAQ�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�よくある質問）セクション
==================================== */

/* FAQ: section-title 上線�E黒バーを非表示、中央寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� */
.faq-section .section-title {
  border-top: none;
  padding-top: 0;
  text-align: center;
}

.faq-section .section-title::before {
  display: none;
}

.list-faq {
  margin: 0;
  max-width: 84rem;
  margin-inline: auto;
}

/* FAQ 吁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� */
.faq-item {
  border-bottom: 1px solid var(--color-border-faq);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border-faq);
}

/* 質問�Eタン */
.btn-faq-toggle {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: 100%;
  padding: 1.5rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.75;
}

/* Q マ�Eク */
.faq-q-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  background-color: var(--color-text-secondary);
  color: #fff;
  font-size: 0.9em;
  font-weight: 700;
  border-radius: 50%;
  margin-top: 0.1em;
}

/* 質問テキスチE*/
.faq-question-text {
  flex: 1;
}

/* 開閉アイコン�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�矢印 img�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.faq-toggle-icon {
  flex-shrink: 0;
  width: 0.9rem;
  height: 1.4rem;
  transition: transform 0.25s;
}

/* 展開状慁E 矢印めE0度回転�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E めEↁEに�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.btn-faq-toggle[aria-expanded="true"] .faq-toggle-icon {
  transform: rotate(90deg);
}

/* 回答エリア */
.faq-answer {
  padding: 2.4rem 1rem 1.5rem 1rem;
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

.faq-answer[hidden] {
  display: none;
}

.faq-answer p {
  margin: 0;
}

/* ====================================
  お役立ちコンテンツ
==================================== */

.helpful-contents-section {
  padding: 6rem 0;
  overflow: hidden;
  position: relative;
}

.helpful-contents-section::after {
  content: '';
  position: absolute;

  height: 0.7rem;
  background-color: #ffffff;
  z-index: 1;
  bottom: 5.8rem;
  left: 0;
  width: 3rem;
  display: none;
}

.helpful-contents-title {
  margin: 0;
  padding-inline: 2.4rem;
  color: #202020;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.64;
  letter-spacing: 0.14em;
  text-align: center;
}

.helpful-contents-scroll {
  margin-top: 3.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2.4rem;
  padding-left: 2.4rem;
  padding-bottom: 1.5rem;
}



.helpful-contents-scroll::-webkit-scrollbar {
  height: 0.4rem;
}

.helpful-contents-scroll::-webkit-scrollbar-track {
  background: rgba(113, 111, 110, 0.2);
  border-radius: 0.2rem;
}

.helpful-contents-scroll::-webkit-scrollbar-thumb {
  background: #716f6e;
  border-radius: 0.2rem;
}

.helpful-contents-list {
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0 2.4rem 0 0;
  list-style: none;
}

.helpful-contents-card {
  flex: 0 0 28rem;
  width: 28rem;
  height: 17rem;
  background-color: #E3E3E3;
  border-radius: 1rem;
  scroll-snap-align: start;
}

@media print,
screen and (width >=768px) {

  .helpful-contents-section {
    padding: 10rem 0;
  }

  .helpful-contents-section::after {
    bottom: 9.8rem;
    left: 0;
    width: 15rem;
  }

  .helpful-contents-title {
    padding-inline: 15rem;
    font-size: 3.2rem;
    line-height: 1.5625;
  }

  .helpful-contents-scroll {
    margin-top: 5rem;
    padding-left: 15rem;
    padding-bottom: 2rem;
    scroll-padding-left: 15rem;
  }

  .helpful-contents-scroll--drag-scroll {
    scroll-snap-type: none;
  }

  .helpful-contents-list {
    gap: 3rem;
    padding-right: 15rem;
  }

  .helpful-contents-card {
    flex-basis: 50rem;
    width: 50rem;
    height: 30.3rem;
    border-radius: 1.6rem;
  }

}

/* ホバー対応環墁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eみ */
@media (hover: hover) and (pointer: fine) {
  .btn-faq-toggle:hover {
    color: var(--color-text-secondary);
  }
}


/* ====================================
  スマ�Eトフォン専用スタイル�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eidth < 768px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E==================================== */

@media screen and (width < 768px) {

  /* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ザー: SP縦積み */
  .teaser-section {
    padding-block: 2rem;
  }

  /* 機�E特長: SP背景画像をSP用に刁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�替ぁE*/
  .feature-section--calorie .feature-bg-wrap {
    background-image: url(/wearable/common/images/watch_bg_1_sp.webp);
    background-color: #fff;
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 27rem 2.4rem 2.4rem;
  }

  .feature-section--water .feature-bg-wrap {
    background-image: url(/wearable/common/images/watch_bg_2_sp.webp);
    background-color: #fff;
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 27rem 2.4rem 2.4rem;
  }

  .feature-section--circuit .feature-bg-wrap {
    background-image: url(/wearable/common/images/watch_bg_3_sp.webp);
    background-color: #fff;
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 20rem 2.4rem 2.4rem;
  }

  /* 機�E特長: SP レイアウト（画像上部・チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト下部に重なる！E*/
  .feature-image img {
    width: 70%;
    max-width: 18rem;
  }

  .feature-text {
    /* 画像との重なりを視覚的に表現 */
    margin-top: -5rem;
    border-radius: 1rem 1rem 0 0;
    padding: 1.75rem;
  }

  /* スペック: SP th幁E*/
  .feature-section--calorie .feature-frame {
    background-color: rgba(244, 244, 244, 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 1.6rem;
    box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
    padding: 3.2rem;
    overflow: hidden;
  }

  .feature-section--calorie .feature-inner {
    gap: 3.2rem;
    align-items: center;
  }

  .feature-section--calorie .feature-image img {
    width: 12rem;
    max-width: none;
    position: relative;
    transform: none;
  }

  .feature-section--calorie .feature-text {
    background-color: transparent;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    text-align: center;
  }

  .feature-section--calorie .feature-tagline {
    font-size: 2.2rem;
    line-height: 1.64;
    letter-spacing: 0.14em;
    margin-bottom: 3.2rem;
  }

  .feature-section--calorie .feature-title.section-title {
    font-size: 1.7rem;
    line-height: 1.53;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
  }

  .feature-section--calorie .feature-desc {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
  }

  .feature-section--calorie .feature-btn {
    display: flex;
    width: 100%;
    height: 4.6rem;
    padding-inline: 2rem;
    font-size: 1.4rem;
  }

  .feature-section--water .feature-frame {
    background-color: rgba(244, 244, 244, 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 1.6rem;
    box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
    padding: 3.2rem;
    overflow: hidden;
  }

  .feature-section--water .feature-inner {
    gap: 3.2rem;
    align-items: center;
  }

  .feature-section--water .feature-image img {
    width: 12rem;
    max-width: none;
    position: relative;
    transform: none;
  }

  .feature-section--water .feature-text {
    background-color: transparent;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    text-align: center;
  }

  .feature-section--water .feature-tagline {
    font-size: 2.2rem;
    line-height: 1.64;
    letter-spacing: 0.14em;
    margin-bottom: 3.2rem;
  }

  .feature-section--water .feature-title.section-title {
    font-size: 1.7rem;
    line-height: 1.53;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
  }

  .feature-section--water .feature-desc {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
  }

  .feature-section--water .feature-btn {
    display: flex;
    width: 100%;
    height: 4.6rem;
    padding-inline: 2rem;
    font-size: 1.4rem;
  }

  .feature-section--circuit .feature-frame {
    background-color: rgba(244, 244, 244, 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 1.6rem;
    box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
    padding: 3.2rem;
    overflow: hidden;
  }

  .feature-section--circuit .feature-inner {
    gap: 3.2rem;
    align-items: center;
  }

  .feature-section--circuit .feature-image img {
    width: 12rem;
    max-width: none;
    position: relative;
    transform: none;
  }

  .feature-section--circuit .feature-text {
    background-color: transparent;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    text-align: center;
  }

  .feature-section--circuit .feature-tagline {
    font-size: 2.2rem;
    line-height: 1.64;
    letter-spacing: 0.14em;
    margin-bottom: 3.2rem;
  }

  .feature-section--circuit .feature-title.section-title {
    font-size: 1.7rem;
    line-height: 1.53;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
  }

  .feature-section--circuit .feature-desc {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
  }

  .feature-section--circuit .feature-btn {
    display: flex;
    width: 100%;
    height: 4.6rem;
    padding-inline: 2rem;
    font-size: 1.4rem;
  }

  .app-card-desc {
    text-align: center;
  }

  .health-advice-section {
    background-color: var(--color-bg-health-advice);
    padding: 5.6rem 2.4rem 0;
  }

  .health-advice-section .health-advice-box {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1.6rem;
    padding: 4.8rem 3.2rem;
  }

  .health-advice-section .health-advice-inner {
    gap: 3.2rem;
  }

  .health-advice-section .section-title {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.64;
    letter-spacing: 0.14em;
    text-align: center;
  }

  .health-advice-section .health-advice-desc {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-top: 2rem;
    text-align: center;
  }

  .health-advice-section .health-advice-app-tag {
    display: flex;
    height: 4.6rem;
    width: fit-content;
    margin-top: 2.4rem;
    margin-inline: auto;
    padding: 0 2rem 0 1rem;
    gap: 1.2rem;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 0.8rem;
    box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
  }

  .health-advice-section .health-advice-app-tag img {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 0.8rem;
  }

  .health-advice-section .health-advice-app-tag span {
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.08em;
  }

  .health-advice-section .health-advice-image img {
    width: 100%;
    max-width: none;
  }

  .timeline-section {
    background-color: var(--color-bg-health-advice);
    padding: 5.6rem 2.4rem;
  }

  .timeline-section .timeline-box {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1.6rem;
    padding: 4.8rem 3.2rem;
  }


  .timeline-section .timeline-inner {
    gap: 3.2rem;
  }

  .timeline-section .section-title {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.64;
    letter-spacing: 0.14em;
    text-align: center;
  }

  .timeline-section .timeline-desc {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-top: 2rem;
    text-align: center;
  }

  .timeline-section .timeline-images {
    --watch-timeline-media-width: 13.1rem;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .timeline-section .timeline-phone img {
    width: var(--watch-timeline-media-width);
  }

  .timeline-section .timeline-times {
    width: var(--watch-timeline-media-width);
    min-width: 0;
    gap: 1.7rem;
  }

  .timeline-section .timeline-image-wrap {
    width: var(--watch-timeline-media-width);
    aspect-ratio: 131 / 80;
    overflow: hidden;
    border-radius: 0.9rem;
  }

  .timeline-section .timeline-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .watch-spec-table th {
    width: 10rem;
    font-size: 1.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .watch-spec-table td {
    font-size: 1.3rem;
  }

  /* カラーバリエーション: SP グリチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�縦積みは base styles で定義済み */

}


/* ====================================
  タブレチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�・PC共通スタイル�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E68px〜！E==================================== */


@media print,
screen and (width >=768px) {

  /* ローカルヘッダーナビ: PC 中央寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�・120px gap */
  .list-local-header-navi {
    justify-content: center;
    column-gap: 12rem;
  }

  /* ===== MV: PC絶対配置オーバ�Eレイ ===== */
  /* Figma: overlay box 583ÁE96 @(746px,165px) / MV 1440ÁE30 */

  /* グレーフロストガラスボックスとして画像�E右側に絶対配置 */
  /* Figma: overlay box 583ÁE96 @(746,165) / MV 1440ÁE30
     height固定ではなくコンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�合わせた高さ�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eiewport幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�よるフォントスケールに追従！E*/
  .mv-content-wrap {
    position: absolute;
    left: 60.8%;
    top: 50%;
    transform: translateY(-50%);
    width: 38%;
    padding-block: 3rem;
    padding-inline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: no-repeat;
  }

  /* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ストコンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ス冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�中央揁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� */
  .mv-content {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    align-items: center;
    /* Figma: text frame padding 110px L/R out of 583px box ≁E18.9% */
    padding-inline: 0%;
    gap: 1.5rem;
  }

  /* キャチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�コピ�E (Figma PC: 30px ↁE3rem) */
  .mv-copy {
    font-size: 3rem;
    letter-spacing: 0.14em;
  }

  /* 製品名 (Figma PC: 30px ↁE3rem) */
  .mv-product-name {
    font-size: 3rem;
    letter-spacing: -0.02em;
    line-height: 1.33;
  }

  /* 型番 (Figma PC: 14px ↁE1.4rem) */
  .mv-model-info {
    font-size: 1.4rem;
  }

  /* 価格ボックス�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�っぱぁE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E中央揁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� (Figma: padding 20px 40px / gap 14px) */
  .mv-price-wrap {
    width: 72%;
    align-items: center;
    gap: 1.4rem;
    padding: 0;
    max-width: 308px;
  }

  .mv-price-wrap a {
    display: block;
    width: 100%;
    padding: 2rem 0;
  }

  .mv-price-wrap a:hover {
    text-decoration: none;
    background: var(--beige_light02, #F1EFEE);

    /* shadow */
    box-shadow: 0 0 10px 0 rgba(32, 32, 32, 0.08);
  }

  /* 店�E吁E(Figma: 16px ↁE1.6rem) */
  .mv-store-label {
    font-size: 1.6rem;
    letter-spacing: 0.06em;
  }

  /* 価格 (Figma: 24px ↁE2.4rem) */
  .mv-price {
    font-size: 2.4rem;
    letter-spacing: 0.14em;
  }

  /* 機�E特長: PC 下余白�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eigma: padding 0 0 80px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .feature-section {
    /*margin-bottom: 8rem;*/
  }

  /* 機�E特長: PC レイアウト！Eigmaベ�Eス 1440ÁE40�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E     Rectangle 3468546: w=860 h=580 @ x=-30,y=30 / section 1440ÁE40
     ※ flex-basis/margin の % は .feature-inner の content box�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E frame幁E860px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�が基溁E*/
  .feature-bg-wrap {
    aspect-ratio: 1440 / 640;
    padding-block: 0;
  }

  /* 半透�Eフレーム: チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト＋ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�画像を匁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E */
  .feature-frame {
    position: absolute;
    left: 0;
    top: 4.69%;
    /* 30 / 640 */
    width: 59.72%;
    /* 860 / 1440 */
    height: 90.625%;
    /* 580 / 640 */
    background-color: rgba(244, 244, 244, 0.6);
    border-radius: 0 2rem 2rem 0;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .ring .feature-frame {
    width: 63%;
  }

  /* padding なぁEↁEflex-basis/margin の % ぁEframe 幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E60px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�に対して正確に解決されめE*/
  .feature-inner {
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 0;
  }



  /* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スチE margin-left で左余白を確保！Eadding にすると flex-basis の基準がずれる！E*/
  .feature-text {
    flex: 0 0 43%;
    /* 290 / 860 */
    order: 0;
    margin-left: 13.95%;
    /* 120 / 860 */
    background-color: transparent;
    padding: 0;
    margin-top: 0;
    border-radius: 0;
  }

  .ring .feature-text {
    flex: 0 0 31%;
    margin-left: 12.5%;
  }

  /* ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�画僁E margin-left でチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ストとの gap を確俁E*/
  .feature-image {
    flex: 0 0 26.74%;
    /* 230 / 860 */
    order: 1;
    margin-left: 8.14%;
    /* 70 / 860 */
    position: relative;
  }

  /* リング: 画像エリアを比率持E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�フレーム幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�準）にして固定pxを廁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�
     ↁEフレーム幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�縮んでめEチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト�E画像�E余白が均等に縮小すめE     冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�: チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スチE2.5%+31% / 画僁Emargin7%+44% = 94.5% / 右余白 紁E.5% */
  .ring .feature-image {
    flex: 0 0 44%;
    min-width: 0;
    gap: 1.6rem;
    margin-left: 7%;
    justify-content: center;
  }

  .feature-image img {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  /* リング: 2枚を半�Eずつ�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eap刁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�差し引き�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E最大200pxで上限 */
  .ring .feature-image img {
    width: calc(50% - 0.8rem);
    max-width: 200px;
    height: auto;
    filter: drop-shadow(4.152px 4.152px 16.609px rgba(32, 32, 32, 0.30));
    position: relative;
    transform: none;
  }

  /* タグライン: Figma PC 32px */
  .feature-tagline {
    font-size: 3.2rem;
    line-height: 1.5625;
    /* 50px / 32px */
    margin-bottom: 3rem;
    /* 50px gap */
  }

  /* 機�E吁E Figma PC 20px */
  .feature-title.section-title {
    font-size: 2rem;
  }

  .feature-desc {
    font-size: 1.5rem;
  }

  .ring .feature-desc {
    width: auto;
    max-width: 29rem;
  }

  /* ボタン: Figma PC height 46px / padding 0 40px */
  .feature-btn {
    font-size: 1.6rem;
    padding: 0 4rem;
    height: 4.6rem;
  }

  /* アプリ機�E: PC横スクロールカルーセル�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eard 340ÁE40px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E     コンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�全幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�peekをブラウザ左端まで届かせ、E     ::after でスクロールバ�E左側�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�コンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ト�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�を背景色で要E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�
     peek幁E= scroll-padding-left - gap = 150 - 30 = 120px */
  .app-features-section {
    padding-block: 10rem;
  }

  .app-features-section::after {
    bottom: 17.8rem;
    width: 15rem;
    height: 0.7rem;
  }

  .app-cards-wrap {
    padding-left: 10rem;
    scroll-padding-left: 15rem;
  }

  .list-app-cards {
    gap: 3rem;
    padding-right: 15rem;
    /* 最後�Eカード後に右余白�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�左のscroll-padding-leftと対称�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  }

  /* カーチE 340px幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E縦flex */
  .app-card {
    flex: 0 0 34rem;
  }

  .app-card-panel {
    border-radius: 1.6rem;
    height: 57rem;
    max-height: 100%;
    /* 540px total height */
  }

  /* 本斁E 上部�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�タイトル�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�説明！E*/
  .app-card-body {
    padding: 4rem 3.2rem 2.4rem;
  }

  /* 画僁E 残りスペ�Eスを使ぁE*/
  .app-card-image {
    flex: 1;
    overflow: hidden;
  }

  .app-card-image img {
    width: 100%;
    object-fit: cover;
    max-width: 340px;
  }

  .app-card-title {
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.636;
    margin-bottom: 1.6rem;
  }

  .app-card-desc {
    font-size: 1.6rem;
    line-height: 1.75;
    text-align: center;
    margin-bottom: 0;
  }

  /* 健康アドバイス: PC - 上下余白でグレー背景を見せめE*/
  .health-advice-section {
    padding-block: 8rem 6rem;
  }

  /* 健康アドバイス: PC 白ボックスを右寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�左にグレー帯 紁E0px刁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E     余白はすべて vw 基準でビューポ�Eト幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�比例してスケール
     1440px 晁E 左pad=80px / gap=80px / 右pad=150px */
  .health-advice-box {
    margin-left: 5.56%;
    padding-block: 5rem;
    padding-left: 5.56vw;
    padding-right: 10.42vw;
    border-radius: 20px 0px 0px 20px;
  }

  /* 健康アドバイス: PC 2カラム�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E��E�E�E�E�E�E�E�スト左・画像右�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .health-advice-inner {
    flex-direction: row;
    align-items: center;
    gap: 5.56vw;
    width: 100%;
  }

  /* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト�EめE10px固定幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� */
  .health-advice-text {
    flex: 0 0 34rem;
    min-width: 0;
  }

  .health-advice-image {
    flex: 1;
    max-width: 1000px;
  }

  .health-advice-image img {
    margin-inline: 0;
    max-width: none;
    width: 100%;
  }

  /* タイムライン: PC - 下余白でグレー背景を見せめE*/
  .timeline-section {
    padding-bottom: 8rem;
  }

  /* タイムライン: 白ボックスを右寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�左にグレー帯 紁E0px刁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E     余白はすべて vw 基準でビューポ�Eト幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�比例してスケール
     1440px晁E 左pad=80px / gap=80px / 右pad=150px */
  .timeline-box {
    margin-left: 5.56%;
    padding-block: 8rem;
    padding-left: 5.56vw;
    padding-right: 10.42vw;
    border-radius: 20px 0px 0px 20px;
  }

  .app-plan-compare-note-wrap {
    margin-left: 5.56%;
    padding-left: 5.56vw;
    margin-top: 3rem;
    padding-right: 11.42vw;
    max-width: 1500px;
  }

  /* タイムライン: PC 2カラム�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E��E�E�E�E�E�E�E�スト左・画像右�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E68px、E*/
  .timeline-inner {
    flex-direction: row;
    align-items: center;
    gap: 5.56vw;
    width: 100%;
  }

  .timeline-text {
    flex: 0 0 39rem;
    min-width: 0;
  }

  /* 画像エリア全佁E 健康アドバイスの .health-advice-image と同じ老E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�方 */
  .timeline-images {
    flex: 1;
    overflow-x: visible;
    padding-bottom: 0;
    gap: 3rem;
    align-items: center;
  }

  /* スマ�E画僁E 比率240で伸縮・最大240px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E440px時にちめE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ど240px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .timeline-phone {
    flex: 240 1 0;
    max-width: 24rem;
    min-width: 0;
  }

  .timeline-phone img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(4.152px 4.152px 16.609px rgba(32, 32, 32, 0.30));
  }

  /* 時間帯画像�E: 比率380で伸縮・最大380px */
  .timeline-times {
    flex: 380 1 0;
    max-width: 38rem;
    min-width: 0;
  }

  .timeline-image-wrap {
    display: block;
  }

  .timeline-image-wrap img {
    width: 100%;
    height: auto;
  }

  /* 基本機�E: PC コンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�確保！E55pxÁE + 30px gap = 1141px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E     % は outer-base-width 基準で計算されるため px 固定！Erem=30px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�を使用
     base-width 1200px - 30pxÁE = 1140px ≁E1141px */
  .basic-functions-section .base-width {
    padding-inline: 3rem;
  }

  .basic-functions-section .section-title,
  .color-variation-section .section-title {
    text-align: left;
  }

  /* 基本機�E: PC 2カラム�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eap 30px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .basic-functions-inner {
    flex-direction: row;
    gap: 3rem;
  }

  .basic-function-item {
    flex: 1;
    min-width: 0;
  }

  .basic-function-title {
    font-size: 2rem;
  }

  .basic-function-title sup {
    color: var(--color-text-primary);
  }

  /* カラーバリエーション: PC グリチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�2カラム�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�左: メイン / 右: サチE枚縦積み�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E     幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E基本機�Eと同じ 1140px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eadding-inline: 3rem�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .color-variation-section .base-width {
    padding-inline: 3rem;
  }

  .color-variation-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  /* カラーバリエーション: PC フッターを3カラムグリッドにして
     キャプションをセクション中央・バッジを右端に配置（Figma PC: 133×68）
     ※ position は使わず 1fr auto 1fr で中央を保つ */
  .color-variation-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 3rem;
    /* Figma: 画像グリッドとの余白 30px */
  }

  /* grid-row: 1 を両方に明示し、バッジとキャプションを同じ行（横並び）に固定
     （自動配置だとDOM順でキャプションが2行目に送られるため） */
  .color-variation-caption {
    grid-column: 2;
    grid-row: 1;
  }

  .color-variation-award {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    width: 13.3rem;
    margin-top: 0;
    /* SPの上余白をリセット（縦位置は align-self: center で揃える） */
  }

  /* ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�フェイス: PC は全幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�示�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スクロールなし！E*/
  .watch-face-image {
    display: block;
    overflow-x: visible;
    padding-inline: 0;
  }

  .watch-face-image img {
    width: 90%;
    min-width: 0;
    max-width: 1140px;
    margin: 0 auto;
  }

  /* スペックチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eブル: PC th列幁E240px */
  .spec-col-th {
    width: 24rem;
  }

  .watch-spec-table th {
    padding-left: 1rem;
    padding-right: 3rem;
  }

  /* FAQアコーチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�オン: PC余白調整 */
  .btn-faq-toggle {
    font-size: 1.6rem;
    padding-block: 1.5rem;
  }

  .faq-answer {
    font-size: 1.6rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
  }

}


/* ====================================
  タブレチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�幁EV調整�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E68px、E100px未満�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E  PCオーバ�Eレイボックスが狭くなるためフォントを縮封E==================================== */

@media screen and (768px <=width < 1100px) {

  .mv-copy {
    font-size: 1.8rem;
  }

  .mv-product-name {
    font-size: 2.2rem;
    line-height: 1.3;
  }

  .mv-model-info {
    font-size: 1.2rem;
  }

  .mv-content {
    gap: 0.9rem;
    padding-inline: 8%;
  }

  .mv-price-wrap a {
    padding: 1.25rem 2rem;
    gap: 0.8rem;
  }

  .mv-store-label {
    font-size: 1.3rem;
  }

  .mv-price {
    font-size: 1.8rem;
  }

  .feature-section--calorie .feature-frame {
    width: 68%;
    height: calc(100% - 6rem);
    top: 3rem;
  }

  .feature-section--calorie .feature-bg-wrap {
    aspect-ratio: auto;
    min-height: 42rem;
  }

  .feature-section--calorie .feature-text {
    flex-basis: 36%;
    margin-left: 8%;
  }

  .feature-section--calorie .feature-image {
    flex-basis: 24%;
    margin-left: 6%;
  }

  .feature-section--calorie .feature-tagline {
    font-size: 2.4rem;
    margin-bottom: 2.4rem;
  }

  .feature-section--calorie .feature-title.section-title {
    font-size: 1.8rem;
  }

  .feature-section--calorie .feature-desc {
    font-size: 1.4rem;
    line-height: 1.75;
  }

  .feature-section--calorie .feature-btn {
    font-size: 1.4rem;
    padding-inline: 2.4rem;
  }

  .feature-section--water .feature-frame {
    width: 68%;
    height: calc(100% - 6rem);
    top: 3rem;
  }

  .feature-section--water .feature-bg-wrap {
    aspect-ratio: auto;
    min-height: 42rem;
  }

  .feature-section--water .feature-text {
    flex-basis: 36%;
    margin-left: 8%;
  }

  .feature-section--water .feature-image {
    flex-basis: 24%;
    margin-left: 6%;
  }

  .feature-section--water .feature-tagline {
    font-size: 2.4rem;
    margin-bottom: 2.4rem;
  }

  .feature-section--water .feature-title.section-title {
    font-size: 1.8rem;
  }

  .feature-section--water .feature-desc {
    font-size: 1.4rem;
    line-height: 1.75;
  }

  .feature-section--water .feature-btn {
    font-size: 1.4rem;
    padding-inline: 2.4rem;
  }

  .feature-section--circuit .feature-frame {
    width: 68%;
    height: calc(100% - 6rem);
    top: 3rem;
  }

  .feature-section--circuit .feature-bg-wrap {
    aspect-ratio: auto;
    min-height: 42rem;
  }

  .feature-section--circuit .feature-text {
    flex-basis: 36%;
    margin-left: 8%;
  }

  .feature-section--circuit .feature-image {
    flex-basis: 24%;
    margin-left: 6%;
  }

  .feature-section--circuit .feature-tagline {
    font-size: 2.4rem;
    margin-bottom: 2.4rem;
  }

  .feature-section--circuit .feature-title.section-title {
    font-size: 1.8rem;
  }

  .feature-section--circuit .feature-desc {
    font-size: 1.4rem;
    line-height: 1.75;
  }

  .feature-section--circuit .feature-btn {
    font-size: 1.4rem;
    padding-inline: 2.4rem;
  }

}


/* ====================================
  大画面スタイル�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E300px〜！E==================================== */

@media screen and (width >=1300px) {

  /* 大画面でも機�E名�E20px相当を維持E*/
  .feature-title.section-title {
    font-size: 2rem;
  }

}


/* ============================================================
  ============================================================
  RING�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�リング�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eージ専用スタイル
  ・index.html�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�を褁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ぁEring 用クラス名で再定義
  ・汎用クラス�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Efeature-text / .app-card / .mv-copy / .list-faq 等）�E
    両ペ�Eジ共有�Eためここでは再定義せず、ウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�側の定義を流用
  ・ここではウォチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�固有名・セクション識別クラスのみ ring- 版を用愁E  ============================================================
  ============================================================ */

/* ---- MV: 製品名�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eatch相当�ELight表示�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E---- */
.mv-brand-ring {
  font-weight: 300;
}

.mv-brand img {
  width: 280px;
}


/* ---- 機�E特長: 背景画像！Ease / SP�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E---- */
.ring-feature--calorie .feature-bg-wrap {
  background-image: url(/wearable/common/images/ring_sleep_bg.webp);
}

.ring-feature--water .feature-bg-wrap {
  background-image: url(/wearable/common/images/watch_bg_2.png);
}

.ring-feature--circuit .feature-bg-wrap {
  background-image: url(/wearable/common/images/watch_bg_3.png);
}


/* ---- アプリ機�Eセクション ---- */
.ring-app-features-section {
  background-color: var(--color-bg-app-cards);
  padding-block: 5rem;
  position: relative;
}

.ring-app-features-section::after {
  content: '';
  position: absolute;
  bottom: 4.8rem;
  left: 0;
  width: 5rem;
  height: 0.7rem;
  background-color: var(--color-bg-app-cards);
  z-index: 1;
}


/* ---- 健康アドバイスセクション ---- */
.ring-health-advice-section {
  background-color: var(--color-bg-health-advice);
}

.ring-health-advice-section .section-title {
  border-top: none;
  padding-top: 0;
  margin-bottom: 0px;
  font-style: normal;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: 4.48px;
}

.ring-health-advice-section .section-title::before {
  display: none;
}


/* ---- タイムラインセクション ---- */
.ring-timeline-section {
  background-color: var(--color-bg-health-advice);
}

.ring-timeline-section .section-title {
  border-top: none;
  padding-top: 0;
  margin-bottom: 0px;
  font-style: normal;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: 4.48px;
}

.ring-timeline-section .section-title::before {
  display: none;
}


/* ---- 基本機�Eセクション ---- */
.ring-basic-functions-section {
  background-color: var(--color-bg-basic-func);
}

.ring-basic-functions-section .section-title {
  border-top: none;
  padding-top: 0;
  letter-spacing: 4.48px;
  text-align: center;
}

.ring-basic-functions-section .section-title::before {
  display: none;
}


/* ---- カラーバリエーションセクション ---- */
.ring-color-variation-section {
  background-color: var(--color-bg-color-var);
}

.ring-color-variation-section .section-title {
  border-top: none;
  padding-top: 0;
  text-align: center;
}

.ring-color-variation-section .section-title::before {
  display: none;
}


/* ---- リングフェイスセクション�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�旧 watch-face�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E---- */
.ring-face-section .section-title {
  border-top: none;
  padding-top: 0;
  text-align: center;
}

.ring-face-section .section-title::before {
  display: none;
}

.ring-face-desc {
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-block: 1em 3.5em;
  text-align: center;
}

.ring-face-image {
  scroll-snap-type: x mandatory;
  display: flex;
  justify-content: center;
}

.ring-face-image img {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-width: 80rem;
  max-width: 100%;
  scroll-snap-align: center;
}

.ring-face-note {
  font-size: 1.6rem;
  color: var(--color-text-note);
  margin-top: 5rem;
  text-align: center;
}

.ring-face-note span {
  border-bottom: 1px solid #5E5E5E;
}


/* ---- スペックセクション�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�旧 spec-section / watch-spec-table�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E---- */
.ring-spec-section {
  background-color: var(--color-bg-spec);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.ring-spec-section .section-title {
  border-top: none;
  padding-top: 0;
  text-align: center;
}

.ring-spec-section .section-title::before {
  display: none;
}

.ring-spec-table {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 2rem;
  font-size: 1.4rem;
  border-top: 1px solid var(--color-border-faq);
}

.ring-spec-table th,
.ring-spec-table td {
  padding: 1.0em 1em;
  border-bottom: 1px solid var(--color-border-faq);
  vertical-align: middle;
  line-height: 1.6;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
}

.ring-spec-table td sup {
  color: var(--color-text-primary);
}

.ring-spec-table th {
  width: 10rem;
  font-weight: 400;
  color: var(--color-text-primary);
  text-align: left;
  padding-left: 1rem;
  padding-right: 2rem;
  overflow-wrap: break-word;
  word-break: break-all;
}

.ring-spec-table td {
  color: var(--color-text-primary);
}

.ring-txt-ostm-wrap {
  margin-top: 10px;
}

.ring-txt-ostm-img,
.ring-txt-ostm-p {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.96px;
}

.ring-txt-ostm-img {
  margin-top: 30px;
}

.ring-txt-ostm-img img {
  width: 60px;
}

.attentattention-note {
  width: 100%;
  max-width: 840px;
  margin: 30px auto;
}

.attentattention-note p {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.56px;
  color: var(--darkgray, #5E5E5E);
  padding-left: 2em;
  text-indent: -2em;
}

.ring-notes-section {
  width: 100%;
  max-width: 84rem;
  margin: 3rem auto 0;
  color: var(--darkgray, #5E5E5E);
}

.ring-notes-title {
  margin: 0 0 1.8rem;
  color: var(--color-text-primary);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
}

.ring-notes-trademark {
  margin-bottom: 2.8rem;
  color: var(--darkgray, #5E5E5E);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.04em;
}

.ring-notes-heading {
  margin: 0 0 0.4rem;
  color: var(--color-text-primary);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
  text-decoration: underline;
}

.ring-notes-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ring-notes-list li {
  padding-left: 1em;
  text-indent: -1em;
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  color: var(--darkgray, #5E5E5E);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.56px;
}

.ring-notes-accordion {
  max-width: none;
}

.ring-notes-section .ring-notes-toggle {
  min-height: 5.2rem;
  padding: 1.2rem 1rem;
  color: var(--darkgray, #5E5E5E);
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.ring-notes-section .ring-notes-answer {
  padding: 0.2rem 1rem 2rem;
  color: var(--darkgray, #5E5E5E);
  font-size: 1.4rem;
  line-height: 1.57;
  letter-spacing: 0.04em;
}

.ring-notes-section .ring-notes-answer p {
  margin: 0;
}

/* ---- FAQセクション ---- */
.ring-faq-section .section-title {
  border-top: none;
  padding-top: 0;
  text-align: center;
}

.ring-faq-section .section-title::before {
  display: none;
}


/* ====================================
  RING: スマ�Eトフォン専用�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eidth < 768px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E==================================== */

@media screen and (width < 768px) {

  /* 機�E特長: SP背景画僁E*/
  .ring-feature--calorie .feature-bg-wrap {
    background-image: url(/wearable/common/images/ring_sleep_sp_bg.webp);
  }

  .ring-feature--water .feature-bg-wrap {
    background-image: url(/wearable/common/images/watch_bg_2_sp.png);
  }

  .ring-feature--circuit .feature-bg-wrap {
    background-image: url(/wearable/common/images/watch_bg_3_sp.png);
  }

  /* スペック: SP th/td */
  .ring-spec-table th {
    width: 10rem;
    font-size: 1.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .ring-spec-table td {
    font-size: 1.3rem;
  }

  /* MV: SP 中央寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eigma node 1007-58080 / alignItems center�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E     ※ .ring スコープで watch(index.html) には影響させなぁE        PC表示は別メチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�アクエリのまま�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�変更しなぁE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .ring .mv-content {
    align-items: center;
    text-align: center;
  }

  /* キャチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�コピ�E Figma SP: 20px/中央/折返し防止 */
  .ring .mv-copy {
    font-size: 1.8rem;
    white-space: nowrap;
  }

  /* 型番・対応OS Figma SP: 13px/中央/折返し防止 */
  .ring .mv-model-info {
    font-size: 1.3rem;
    white-space: nowrap;
  }

  /* 価格ボックス: 中央寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� */
  .ring .mv-price-wrap {
    align-items: center;
  }

  /* 睡眠見守る: SP 2枚�E電話画像を横並びで収める（あふれ防止�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E     Figma node 1014-48386: カード�Eに2枚横並び・中央 */
  .ring .feature-image {
    justify-content: center;
    gap: 1.6rem;
  }

  .ring .feature-image img {
    width: 16rem;
    max-width: calc((100% - 1.6rem) / 2);
    margin-inline: 0;
    position: relative;
    transform: none;
  }

  /* タイトル・見�Eし�E中央寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eigma SP準拠�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .ring .feature-tagline,
  .ring .feature-title.section-title {
    text-align: center;
  }

  /* 睡眠見守る: SP レイアウト！Eigma node 1014-48386�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E     背景画像を上部に表示し、その下に「電話�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E��E�E�E�E�E�E�E�ストを冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�したガラスカード」を
     重�Eて配置する。背景はカード越しにブラーで見せる（ガラスフィールド）、E*/

  /* 背景画僁E 上部に表示し、カードを下げて 200px の余白�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�背景が見える領域�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�を確俁E*/
  .ring-feature--calorie .feature-bg-wrap {
    background-color: #fff;
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 20rem 2.4rem 2.4rem;
    /* 丁E 200px の余白 / 左右: 24px / 丁E 24px */
  }

  /* ガラスカーチE 電話�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�チE�E�E�E�E�E�E�E��E�E�E�E�E�E�E�ストを冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�・フロスト（半透�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ブラー�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .ring .feature-frame {
    background-color: rgba(244, 244, 244, 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 1.6rem;
    box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
    padding: 3.2rem 2rem;
    overflow: hidden;
  }

  /* カード�E: 縦積み・中央・gap 32px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�電話 ↁEチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト！E*/
  .ring .feature-inner {
    gap: 3.2rem;
    align-items: center;
  }

  /* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スチE カード裁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�を解除�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�カード�E frame 側�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E中央寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� */
  .ring .feature-text {
    background-color: transparent;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    text-align: center;
  }

  /* Ring health advice: SP card layout (Figma node 1014:66863) */
  .ring-health-advice-section {
    background-color: var(--color-bg-health-advice);
    padding: 5.6rem 2.4rem 0;
  }

  .ring-health-advice-section .health-advice-box {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1.6rem;
    padding: 4.8rem 3.2rem;
  }

  .ring-health-advice-section .health-advice-inner {
    gap: 3.2rem;
  }

  .ring-health-advice-section .section-title {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.64;
    letter-spacing: 0.14em;
    text-align: center;
  }

  .ring-health-advice-section .health-advice-desc {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-top: 2rem;
    text-align: center;
  }

  .ring-health-advice-section .health-advice-app-tag {
    display: flex;
    height: 4.6rem;
    width: fit-content;
    margin-top: 2.4rem;
    margin-inline: auto;
    padding: 0 2rem 0 1rem;
    gap: 1.2rem;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 0.8rem;
    box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
  }

  .ring-health-advice-section .health-advice-app-tag img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.8rem;
  }

  .ring-health-advice-section .health-advice-app-tag span {
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.08em;
  }

  .ring-health-advice-section .health-advice-image img {
    width: 100%;
    max-width: none;
  }

  /* Ring timeline: SP card layout (Figma node 1014:67856) */
  .ring-timeline-section {
    background-color: var(--color-bg-health-advice);
    padding: 5.6rem 2.4rem;
  }

  .ring-timeline-section .timeline-box {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1.6rem;
    padding: 4.8rem 3.2rem;
  }

  .ring-timeline-section .timeline-inner {
    gap: 3.2rem;
  }

  .ring-timeline-section .section-title {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.64;
    letter-spacing: 0.14em;
    text-align: center;
  }

  .ring-timeline-section .timeline-desc {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-top: 2rem;
    text-align: center;
  }

  .ring-timeline-section .timeline-images {
    --ring-timeline-media-width: 13.1rem;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .ring-timeline-section .timeline-phone img {
    width: var(--ring-timeline-media-width);
  }

  .ring-timeline-section .timeline-times {
    width: var(--ring-timeline-media-width);
    min-width: 0;
    gap: 1.7rem;
  }

  .ring-timeline-section .timeline-image-wrap {
    width: var(--ring-timeline-media-width);
    aspect-ratio: 131 / 80;
    overflow: hidden;
    border-radius: 0.9rem;
  }

  .ring-timeline-section .timeline-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

}

@media screen and (width < 390px) {

  .timeline-section .timeline-images {
    --watch-timeline-media-width: 11.6rem;
  }

  .ring-timeline-section .timeline-images {
    --ring-timeline-media-width: 11.6rem;
  }

}

@media screen and (390px <=width < 430px) {

  .timeline-section .timeline-images {
    --watch-timeline-media-width: 12.3rem;
  }

  .ring-timeline-section .timeline-images {
    --ring-timeline-media-width: 12.3rem;
  }

}


/* ====================================
  RING: タブレチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�・PC共通！E68px〜！E==================================== */


@media print,
screen and (width >=768px) {

  /* アプリ機�E: PC余白 */
  .ring-app-features-section {
    padding-block: 10rem;
  }

  .ring-app-features-section::after {
    bottom: 9.8rem;
    width: 15rem;
    height: 0.7rem;
  }

  /* 健康アドバイス: PC余白 */
  .ring-health-advice-section {
    padding-block: 8rem 6rem;
  }

  /* タイムライン: PC余白 */
  .ring-timeline-section {
    padding-bottom: 8rem;
  }

  /* 基本機�E: PCコンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�幁E*/
  .ring-basic-functions-section .base-width {
    padding-inline: 3rem;
  }

  .ring-basic-functions-section .section-title,
  .ring-color-variation-section .section-title {
    text-align: left;
  }

  .basic-function-item p {
    font-size: 1.6rem;
  }

  /* カラーバリエーション: PCコンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�幁E*/
  .ring-color-variation-section .base-width {
    padding-inline: 3rem;
  }

  /* リングフェイス: PC全幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�示 */
  .ring-face-image {
    display: block;
    overflow-x: visible;
  }

  .ring-face-image img {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* スペックチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eブル: PC th余白 */
  .ring-spec-table th {
    padding-left: 1rem;
    padding-right: 1rem;
  }

}


/* ====================================
  RING: コンセプト�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eingとは�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�セクション
  Figma: node 968-75829 / bg #DEE3E6 / セクション髁E368px相彁E  ・position は使用せず flex + min-height で配置を�E現
==================================== */

/* セクション背景�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�フルワイド！E*/
.ring-concept-section {
  background-color: #DEE3E6;
  /* Figma: bg_gray_dark */
  padding-block: 4rem;
}

/* 冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�レイアウト！EP: 縦積み・中央寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.ring-concept-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* ラベル「からだメイチEingとは、EFigma: 16px/400/LH28/LS6%/#5E5E5E */
.ring-concept-label {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: #5E5E5E;
  text-align: center;
}

/* 見�EぁEFigma: 30px/500/LH50/LS14%/#202020 */
.ring-concept-title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  text-align: center;
  margin-top: 1.5rem;
}

/* タグ一覧�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EP: 縦積み・中央寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.ring-concept-tags {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

/* 吁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�グ Figma: 白30%/角丸10px/padding10-20/gap10 */
.ring-concept-tag {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
  width: 100%;
  max-width: 241px;
}

.ring-concept-tag img {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
}

/* リング画像！EP: 下�E中央�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.ring-concept-image {
  margin-top: 1rem;
  text-align: center;
}

.ring-concept-image img {
  width: auto;
  height: auto;
  max-width: 55%;
}


/* ---- コンセプト: タブレチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�・PC�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E68px〜！E---- */

@media print,
screen and (width >=768px) {

  /* セクション: 余白をリセチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ぁEmin-height で高さ確俁E*/
  .ring-concept-section {
    padding-block: 0;
  }

  /* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト左・画像右の2カラム、min-heightで縦中央 */
  .ring-concept-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    min-height: 36.8rem;
    /* Figma: section height 368px */
    padding-block: 4rem;
  }

  /* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ストブロチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�左�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .ring-concept-text {
    flex: 1;
    min-width: 0;
  }

  .ring-concept-label {
    font-size: 1.6rem;
    text-align: left;
  }

  /* 見�EぁEFigma PC: 30px/LH50/LS14% */
  .ring-concept-title {
    font-size: 3rem;
    line-height: 1.667;
    letter-spacing: 0.14em;
    text-align: left;
    margin-top: 3rem;
  }

  /* タグ: 横並び�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eigma: gap 30px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .ring-concept-tags {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 3rem;
    margin-top: 3rem;
  }

  /* タグ Figma PC: チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スチE8px/アイコン34px */
  .ring-concept-tag {
    font-size: 1.8rem;
    padding: 1rem 2rem;
    width: auto;
    max-width: 100%;
  }

  .ring-concept-tag img {
    width: 3.4rem;
    height: 3.4rem;
  }

  /* リング画像（右�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Figma: 176ÁE38 */
  .ring-concept-image {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .ring-concept-image img {
    width: 17.6rem;
    max-width: none;
  }

}


/* ====================================
  RING: 記録できること�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�運動記録・体調�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�セクション
  Figma: node 968-70002 / bg #DEE3E6 / 白30%カーチE极E  ・position は使用せず flex で配置
==================================== */

/* セクション背景�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�フルワイド！E*/
.ring-record-section {
  background-color: #DEE3E6;
  /* Figma: bg_gray_dark */
  padding-block: 4rem;
}

/* カードリスト！EP: 縦積み�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.ring-record-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.ring-record-note {
  color: #5E5E5E;
  text-align: left;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.96px;
  margin-top: 30px;
  padding-left: 1em;
  text-indent: -1em;
}

/* 吁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ード（白30%・角丸16px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
.ring-record-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 1.6rem;
  padding: 3rem 0 0;
  overflow: hidden;
}

/* カードテキスト（タイトル�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�説明！E*/
.ring-record-card-text {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding-inline: 2rem;
  width: 100%;
}

/* タイトル Figma: 22px/500/LH36/LS14%/中央 */
.ring-record-card-title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.636;
  letter-spacing: 0.14em;
  color: var(--color-text-primary);
  text-align: center;
}

/* 説昁EFigma: 16px/400/LH28/LS6%/左 */
.ring-record-card-desc {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
  text-align: center;
}

/* カード画像（下部・中央�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EFigma: 340ÁE70 */
.ring-record-card-image {
  margin-top: 2rem;
  width: 100%;
  text-align: center;
}

.ring-record-card-image img {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
  margin-inline: auto;
}


/* ---- 記録できること: タブレチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�・PC�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E68px〜！E---- */

@media print,
screen and (width >=768px) {

  /* セクション余白 Figma: padding 100px */
  .ring-record-section {
    padding-block: 8rem;
  }

  /* コンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�基本機�Eと同じ1140px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .ring-record-section .base-width {
    padding-inline: 3rem;
  }

  /* カード横並び�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eigma: gap 30px・同高さ�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .ring-record-list {
    flex-direction: row;
    align-items: stretch;
    gap: 3rem;
  }

  .ring-record-note {
    margin-top: 40px;
  }

  .ring-record-note {
    margin-top: 30px;
    text-align: right;
  }

  /* カーチE 等幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E上かめE0px */
  .ring-record-card {
    flex: 1;
    min-width: 0;
    padding-top: 4rem;
  }

  /* チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スチEFigma: padding 0 60px / gap 24px */
  .ring-record-card-text {
    gap: 2.4rem;
    padding-inline: 6rem;
  }

  /* タイトル Figma PC: 22px */
  .ring-record-card-title {
    font-size: 2.2rem;
  }

  /* 説昁EFigma PC: 16px */
  .ring-record-card-desc {
    font-size: 1.6rem;
    text-align: center;
  }

  /* 画僁E 下部に寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�る（カードを同高さに揁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�画像をボトム配置�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EFigma: 340px */
  .ring-record-card-image {
    margin-top: auto;
    padding-top: 2.4rem;
  }

  .ring-record-card-image img {
    max-width: 34rem;
  }

}


/* ====================================
  RING: ご購入からお届けまでの流れ セクション
  Figma: node 968-106095
  ・画像左�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�プ右�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EC�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�画像上＋スチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�プ下！EP�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E  ・connector線�E通常フロー要素で描画�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eosition不使用�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E==================================== */

/* section-title: 上線�E黒バー非表示、左寁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E� Figma: 32px/500/LS14% */
.ring-flow-section .section-title {
  border-top: none;
  padding-top: 0;
  text-align: left;
  letter-spacing: 0.14em;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
}

.ring-flow-section .section-title::before {
  display: none;
}

/* 冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�レイアウト！EP: 画像上�EスチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�プ下！E*/
.ring-flow-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 2.5rem;
}

/* 画像（角丸16px�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EFigma: 555ÁE54 cover */
.ring-flow-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 555 / 454;
  object-fit: cover;
  border-radius: 1.6rem;
}

/* スチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�プリスチE*/
.ring-flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ring-flow-step {
  display: flex;
  flex-direction: column;
}

/* 番号�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�ラベルの衁EFigma: gap 20px */
.ring-flow-step-main {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* 番号 Figma: Noto Serif JP 26px / #568693 / 中央 */
.ring-flow-num {
  flex-shrink: 0;
  min-width: 2.6rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #568693;
  text-align: center;
}

/* ラベル Figma: 20px/400/LH32/LS10%/#3F3F3F */
.ring-flow-label {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #3F3F3F;
}

/* スチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�プ間の縦コネクター緁EFigma: 高さ20px / #568693 50% / 左15px */
.ring-flow-connector {
  display: block;
  width: 1px;
  height: 2rem;
  background-color: #568693;
  opacity: 0.5;
  margin: 0.6rem 0 0.6rem 1.5rem;
}

/* 注訁EFigma: 14px/400/LH22/LS4%/#5E5E5E */
.ring-flow-note {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.04em;
  color: #5E5E5E;
  margin-top: 2.5rem;
  padding-left: 1em;
  text-indent: -1em;
}


/* ---- 流れ: タブレチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�・PC�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E68px〜！E---- */

@media print,
screen and (width >=768px) {

  /* タイトル Figma PC: 32px */
  .ring-flow-section .section-title {
    font-size: 3.2rem;
  }

  /* 画像左・スチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�プ右の2カラム Figma: gap 50px */
  .ring-flow-inner {
    flex-direction: row;
    align-items: center;
    gap: 5rem;
    margin-top: 3rem;
  }

  /* 画僁EFigma: 555px固定相当（コンチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�比！E*/
  .ring-flow-image {
    flex: 0 0 48%;
    max-width: 55.5rem;
  }

  /* スチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�プ＋注記（右�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .ring-flow-body {
    flex: 1;
    min-width: 0;
  }

  /* ラベル Figma PC: 20px */
  .ring-flow-label {
    font-size: 2rem;
  }

  .ring-txt-ostm-p {
    font-size: 1.6rem;
  }
}


/* ====================================
  RING: タブレチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E68px、E240px未満�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�調整
  ・こ�E幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�では2カラムのチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト�Eが狭く、見�Eしが過剰に折返し・はみ出すためE    ①幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�フレーム・チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�を庁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�めEↁE②フォントサイズを調整 の頁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�最適匁E  ・1240px以上！ECチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�イン承認済み�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�と SP�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E68px未満�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E変更しなぁE  ・.ring スコープで watch(index.html) には影響させなぁE==================================== */

@media screen and (768px <=width < 1240px) {

  /* ---- 睡眠見守る�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eeature�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E フレーム・チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト�Eを庁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�めE---- */
  .ring .feature-frame {
    width: 90%;
  }

  .ring .feature-text {
    flex: 0 0 29%;
    margin-left: 6%;
  }

  /* 画像エリアは比率維持で残りに収める（固定pxにしなぁE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E*/
  .ring .feature-image {
    flex: 0 0 38%;
    margin-left: 5%;
  }

  /* ② フォント調整: 見�Eしを縮小して枠冁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�2行で収めめE*/
  .ring .feature-tagline {
    font-size: 2.4rem;
    line-height: 1.5;
  }

  .ring .feature-desc {
    width: auto;
    max-width: 100%;
  }

  /* ---- からだメイチEingとは�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�Eoncept�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E チE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト�Eを庁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�見�Eしを調整 ---- */
  /* 画像をめE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�小さくしてチE�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�スト幁E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E��E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�確俁E*/
  .ring-concept-image img {
    width: 14rem;
  }

  /* ② フォント調整: 見�Eしを縮小して折返しを抑える */
  .ring-concept-title {
    font-size: 2.4rem;
    line-height: 1.5;
  }

}



/* App: balance meal proposal */
.balance-meal-section {
  background-color: var(--color-bg-health-advice);
}

.balance-meal-section .section-title {
  border-top: none;
  padding-top: 0;
  text-align: left;
}

.balance-meal-section .section-title::before {
  display: none;
}

.balance-meal-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.balance-meal-box {
  background-color: #fff;
  padding: 4rem 5%;
}

.balance-meal-desc {
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-block: 1em 0;
}

.balance-meal-image {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.6rem;
}

.balance-meal-image img {
  display: block;
  width: min(13.1rem, calc((100vw - 9.6rem) / 2));
  max-width: none;
  height: auto;
  margin: 0;
  filter: drop-shadow(0.524rem 0.524rem 2.096rem rgba(32, 32, 32, 0.3));
}

@media screen and (width < 768px) {
  .balance-meal-section {
    background-color: var(--color-bg-health-advice);
    padding: 5.6rem 2.4rem 0;
  }

  .balance-meal-box {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1.6rem;
    padding: 4.8rem 3.2rem;
  }

  .balance-meal-inner {
    gap: 3.2rem;
  }

  .balance-meal-section .section-title {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.64;
    letter-spacing: 0.14em;
    text-align: center;
  }

  .balance-meal-desc {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-top: 2rem;
    text-align: center;
  }
}


@media print,
screen and (width >=768px) {
  .balance-meal-section {
    padding-block: 8rem 6rem;
  }

  .balance-meal-box {
    margin-left: 5.56%;
    padding-block: 5rem;
    padding-left: 5.56vw;
    padding-right: 10.42vw;
    background-color: #fff;
    border-radius: 20px 0px 0px 20px;
  }

  .balance-meal-inner {
    flex-direction: row;
    align-items: center;
    gap: 5.56vw;
    width: 100%;
  }

  .balance-meal-text {
    /*flex: 0 0 52rem;*/
    min-width: 0;
    max-width: 520px;
    width: 100%;
  }

  .balance-meal-image {
    flex: 1;
    max-width: 1000px;
    gap: 3rem;
  }

  .balance-meal-image img {
    width: 24rem;
  }
}

@media screen and (768px <=width < 1200px) {
  .balance-meal-image img {
    width: 13.1rem;
  }
}

/* App: daily food record */
.daily-food-record-section {
  background-color: var(--color-bg-health-advice);
}

.daily-food-record-section .section-title {
  border-top: none;
  padding-top: 0;
}

.daily-food-record-section .section-title::before {
  display: none;
}

.daily-food-record-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.daily-food-record-box {
  background-color: #fff;
  padding: 4rem 5%;
}

.daily-food-record-desc {
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-block: 1em 0;
}

.daily-food-record-image {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.6rem;
}

.daily-food-record-image img {
  display: block;
  width: min(13.1rem, calc((100vw - 9.6rem) / 2));
  max-width: none;
  height: auto;
  margin: 0;
  filter: drop-shadow(0.524rem 0.524rem 2.096rem rgba(32, 32, 32, 0.3));
}

@media screen and (width < 768px) {
  .daily-food-record-section {
    background-color: var(--color-bg-health-advice);
    padding: 5.6rem 2.4rem 0;
  }

  .daily-food-record-box {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1.6rem;
    padding: 4.8rem 3.2rem;
  }

  .daily-food-record-inner {
    gap: 3.2rem;
  }

  .daily-food-record-section .section-title {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.64;
    letter-spacing: 0.14em;
    text-align: center;
  }

  .daily-food-record-desc {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-top: 2rem;
    text-align: center;
  }
}


@media print,
screen and (width >=768px) {
  .daily-food-record-section {
    padding-block: 8rem 6rem;
  }

  .daily-food-record-box {
    margin-left: 5.56%;
    padding-block: 5rem;
    padding-left: 5.56vw;
    padding-right: 10.42vw;
    background-color: #fff;
    border-radius: 20px 0px 0px 20px;
  }

  .daily-food-record-inner {
    flex-direction: row;
    align-items: center;
    gap: 5.56vw;
    width: 100%;
  }

  .daily-food-record-text {
    min-width: 0;
    max-width: 508px;
    width: 100%;
  }

  .daily-food-record-image {
    flex: 1;
    max-width: 1000px;
    gap: 3rem;
  }

  .daily-food-record-image img {
    width: 24rem;
  }
}

@media screen and (768px <=width < 1200px) {
  .daily-food-record-image img {
    width: 13.1rem;
  }
}

/* App: plan feature comparison */
.app-plan-compare-section {
  background-color: #fff;
  padding: 6rem 0;
}

.app-plan-compare-inner {
  width: 100%;
  /*max-width: 32.7rem;*/
  margin-inline: auto;
}

.app-plan-compare-title {
  margin: 0 0 3.2rem;
  color: var(--color-text-primary);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.64;
  letter-spacing: 0.14em;
  text-align: center;
}



.app-plan-compare-note li {
  color: #5E5E5E;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 1.2px;
  font-weight: 400;
  padding-left: 1em;
  text-indent: -1em;
}

.app-plan-compare-table-wrap {
  width: 100%;
  overflow-x: visible;
  margin-top: 50px;
}


.app-plan-compare-table {
  width: 80%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--color-text-primary);
}

.app-plan-compare-col-feature {
  width: 18.7rem;
}

.app-plan-compare-col-free {
  width: 7rem;
}

.app-plan-compare-col-plus {
  width: 7rem;
}

.app-plan-compare-table th,
.app-plan-compare-table td {
  box-sizing: border-box;
  height: 4.4rem;
  padding: 0;
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.06);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.app-plan-compare-table thead th {
  height: 9.8rem;
  height: 0rem;
  position: relative;
  border-bottom: none;
}

.app-plan-compare-free-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3px;
}

.app-plan-compare-free-text strong {}

.app-plan-compare-free-text span {}

.app-plan-compare-table th[scope="row"] {
  text-align: left;
}

.app-plan-compare-table td,
.app-plan-compare-free,
.app-plan-compare-plus {
  text-align: center;
}

.app-plan-compare-free {
  font-weight: 500;
}



.app-plan-compare-group-row th,
.app-plan-compare-group-row td {
  height: 4.4rem;
  padding-top: 1rem;
  border-bottom: none;
}

.app-plan-compare-group-row th {
  color: #FF714D;
  font-weight: 500;
}

.app-plan-compare-plus {
  border-left: 0.3rem solid #FF714D;
  border-right: 0.3rem solid #FF714D;
}

.app-plan-compare-plus-head {
  position: relative;
  padding-top: 0;
  border-top: 0.3rem solid #FF714D;
  border-radius: 1.6rem 1.6rem 0 0;
  vertical-align: top;
}

.app-plan-compare-plus-head::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 93%;
  width: 2.5rem;
  height: 2rem;
  background: url(/wearable/common/images/app_icon_crown.png) center / contain no-repeat;
  transform: translateX(-50%) translateY(0.2rem);
  pointer-events: none;
}

.app-plan-compare-plus-last {
  position: relative;
  border-bottom: none;
  /*border-radius: 0 0 0.8rem 0.8rem;*/
}

.app-plan-compare-plus-last::after {
  content: '';
  position: absolute;
  left: -0.3rem;
  right: -0.3rem;
  top: 100%;
  height: 1rem;
  border-right: 0.3rem solid #FF714D;
  border-bottom: 0.3rem solid #FF714D;
  border-left: 0.3rem solid #FF714D;
  border-radius: 0 0 0.8rem 0.8rem;
  pointer-events: none;
}

.app-plan-compare-plus-head img {
  display: block;

  max-width: none;
  height: auto;
  margin: 0rem auto 0;
}

.app-plan-compare-plus-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  margin-top: 0.9rem;
  color: #F08389;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.app-plan-compare-free-text span,
.app-plan-compare-plus-price span {
  font-size: 1.3rem;
}

.app-plan-compare-free-text strong,
.app-plan-compare-plus-price strong {
  font-size: 1.6rem;
  font-weight: 700;
}

.app-plan-compare-table td img {
  display: inline-block;
  width: 2.3rem;
  height: 2.3rem;
  vertical-align: middle;
}

@media screen and (width < 768px) {
  .app-plan-compare-table {
    margin-inline-end: 0;
    margin: 0 auto;
  }
}


@media print,
screen and (width >=768px) {
  .app-plan-compare-section {
    padding: 10rem 0;
  }

  .app-plan-compare-inner {
    /*max-width: 65rem;*/
  }

  .app-plan-compare-title {
    margin-bottom: 5rem;
    font-size: 3.2rem;
    line-height: 1.5625;
  }

  .app-plan-compare-note li {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.96px;
  }

  .app-plan-compare-table {
    width: 65rem;
  }

  .app-plan-compare-col-feature {
    width: 40.6rem;
  }

  .app-plan-compare-col-free {
    width: 12.4rem;
  }

  .app-plan-compare-col-plus {
    width: 12rem;
  }

  .app-plan-compare-table th,
  .app-plan-compare-table td {
    height: 6.6rem;
    font-size: 2rem;
    line-height: 1.75;
    letter-spacing: 0.06em;
  }


  .app-plan-compare-group-row th,
  .app-plan-compare-group-row td {
    height: 6.6rem;
    padding-top: 1.8rem;
  }

  .app-plan-compare-table td img {
    width: 3.5rem;
    height: 3.5rem;
  }

  .app-plan-compare-plus {
    border-left-width: 0.4rem;
    border-right-width: 0.4rem;
  }

  .app-plan-compare-plus-head {
    position: relative;
    border-top-width: 0.4rem;
    border-radius: 1.6rem 1.6rem 0 0;
  }

  .app-plan-compare-plus-head::before {
    width: 2.7rem;
    height: 2.4rem;
    transform: translateX(-50%) translateY(0.35rem);
  }

  .app-plan-compare-plus-last {
    position: relative;
    border-bottom: none;
    /*border-radius: 0 0 1.6rem 1.6rem;*/
  }

  .app-plan-compare-plus-last::after {
    left: -0.4rem;
    right: -0.4rem;
    height: 1.4rem;
    border-right-width: 0.4rem;
    border-bottom-width: 0.4rem;
    border-left-width: 0.4rem;
    border-radius: 0 0 1.6rem 1.6rem;
  }

  .app-plan-compare-table thead th {
    height: 0rem;
  }

  .app-plan-compare-free-text {
    bottom: -1.2rem;
  }

  .app-plan-compare-free-text strong {
    font-size: 2.9rem;
  }

  .app-plan-compare-free-text span {
    font-size: 1.7rem;
  }


  .app-plan-compare-plus-head img {
    width: 100%;
    margin-top: 0rem;
  }

  .app-plan-compare-plus-price {
    margin-top: 1.6rem;
  }

  .app-plan-compare-plus-price span {
    font-size: 1.7rem;
  }

  .app-plan-compare-plus-price strong {
    font-size: 2.9rem;
  }
}

/* App: download promotion */
.app-download-promo-section {
  background: linear-gradient(to bottom, #fff 0 6.9rem, #F9E5DE 6.9rem 100%);
  padding: 0 2.4rem 6rem;
}

.app-download-promo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  width: 100%;
  max-width: 32.7rem;
  margin-inline: auto;
}

.app-download-promo-phone {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 23.4rem;
  line-height: 0;
  overflow: visible;
}

.app-download-promo-phone picture {
  position: relative;
  z-index: 1;
  display: block;
}

.app-download-promo-phone::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  width: calc(100vw - 4.8rem);
  max-width: 32.7rem;
  height: 11.4rem;
  transform: translateX(-50%);
  border: 0.1rem solid rgba(255, 255, 255, 0.7);
  border-radius: 0.8rem;
  background-color: rgba(255, 255, 255, 0.34);
  pointer-events: none;
}

.app-download-promo-phone img {
  display: block;
  width: auto;
  height: 23.4rem;
}

.app-download-promo-content {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

.app-download-promo-title {
  width: 100%;
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.06em;
  text-align: center;
}

.app-download-promo-badges {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

.app-download-promo-badges img {
  display: block;
  height: 5rem;
  width: auto;
}

.app-download-promo-qr {
  display: none !important;
}

.app-download-promo-campaign-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
  box-sizing: border-box;
  width: min(50rem, 90vw);
  max-width: 50rem;
  margin-inline: calc(50% - min(25rem, 50vw));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.app-download-promo-campaign {
  flex: 0 0 auto;
  display: block;
  width: 18.8rem;
  height: auto;
  scroll-snap-align: start;
}

.app-download-promo-campaign-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}


@media print,
screen and (width >=768px) {
  .app-download-promo-section {
    background: linear-gradient(to bottom, #fff 0 3.981rem, #F9E5DE 3.981rem 45.581rem, #fff 45.581rem 100%);
    padding: 0 0 0;
  }

  .app-download-promo-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    max-width: 70rem;
  }

  .app-download-promo-phone {
    position: static;
    width: 24rem;
    height: 49.627rem;
    flex-shrink: 0;
  }

  .app-download-promo-phone::before {
    display: none;
  }

  .app-download-promo-phone img {
    width: 100%;
    height: auto;
  }

  .app-download-promo-content {
    gap: 2rem;
    width: 41rem;
  }

  .app-download-promo-badges {
    gap: 1.2rem;
  }

  .app-download-promo-badges img {
    height: auto;
  }

  .app-download-promo-badges img:nth-child(1) {
    width: 16.8rem;
  }

  .app-download-promo-badges img:nth-child(2) {
    width: 13.6rem;
  }

  .app-download-promo-qr {
    display: block !important;
    width: 7rem !important;
    height: 7rem !important;
  }

  .app-download-promo-campaign-list {
    flex-direction: row;
    justify-content: center;
    gap: 1.6rem;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
    scrollbar-width: auto;
  }

  .app-download-promo-campaign {
    width: 14rem;
  }
}

/* ============================================================
  Wearable top page
============================================================ */

.wearable-top-page {
  color: var(--color-text-primary);
  background-color: #fff;
}

.wearable-top-mv {
  overflow: hidden;
  background-color: #fff;
}

.wearable-top-mv .swiper {
  position: relative;
}

.wearable-top-mv .swiper-slide a,
.wearable-top-mv .swiper-slide picture,
.wearable-top-mv .swiper-slide img {
  display: block;
}

.wearable-top-mv .swiper-slide img {
  width: 100%;
  height: auto;
}

.wearable-top-mv .mv-pagination-wrap {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  min-width: 21.1rem;
  min-height: 3.5rem;
  padding: 0.6rem 2rem;
  border-radius: 3rem;
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateX(50%);
}

.wearable-top-mv .mv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.8rem;
  flex: 1;
}

.wearable-top-mv .swiper-pagination-bullet {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 !important;
  background-color: #ccc;
  opacity: 1;
}

.wearable-top-mv .swiper-pagination-bullet-active {
  background-color: #767676;
}

.wearable-top-mv .btn-swiper-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  color: #959595;
  background: none;
  border: none;
  cursor: pointer;
}

.wearable-top-mv .icon-swiper-play,
.wearable-top-mv .icon-swiper-pause {
  display: none;
  width: 1.5rem;
  height: 2.1rem;
}

.wearable-top-mv .icon-swiper-play.is-active,
.wearable-top-mv .icon-swiper-pause.is-active {
  display: block;
}

.wearable-top-mv .icon-swiper-play {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background-color: currentColor;
}

.wearable-top-mv .icon-swiper-pause {
  background: linear-gradient(to right, currentColor 0 33%, transparent 33% 67%, currentColor 67% 100%);
}

.wearable-top-concept,
.wearable-top-lineup,
.wearable-top-news {
  padding: 5rem 1.9rem 0;
}

.wearable-top-concept-inner,
.wearable-top-section-inner {
  width: 100%;
  max-width: 33.7rem;
  margin-inline: auto;
}

.wearable-top-concept-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.wearable-top-concept picture,
.wearable-top-concept img {
  display: block;
}

.wearable-top-concept img {
  width: 100%;
  max-width: 640px;
  height: auto;
}

.wearable-top-movie-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  width: min(100%, 30.5rem);
  min-height: 4.7rem;
  padding: 0.7rem 1.8rem;
  border: 0.1rem solid #000;
  border-radius: 0.5rem;
  color: #000;
  font-size: 1.8rem;
  line-height: 1.5;
  text-decoration: none;
}

.wearable-top-movie-link:hover {
  color: #000;
  text-decoration: none;
  background-color: #f5f5f5;
}

.wearable-top-movie-link span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.08rem;
  height: 1.8rem;
}

.wearable-top-movie-link span::before {
  content: '';
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-top: 0.2rem solid currentColor;
  border-right: 0.2rem solid currentColor;
  transform: rotate(45deg);
}

.wearable-top-heading {
  margin: 0;
  color: #000;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.wearable-top-lineup-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 0.55rem;
  margin-top: 3rem;
}

.wearable-top-lineup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 2.4rem 0;
  border-radius: 1rem;
  color: #000;
  background-color: #f5f5f5;
  text-align: center;
  text-decoration: none;
}

.wearable-top-lineup-card:hover {
  color: #000;
  text-decoration: none;
  box-shadow: 0 0 1rem rgba(32, 32, 32, 0.08);
}

.wearable-top-lineup-card img {
  display: block;
  width: 13.4rem;
  height: 13.4rem;
  object-fit: contain;
}

.wearable-top-lineup-card span {
  display: block;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
}

.wearable-top-lineup-card strong {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
}

.wearable-top-news {
  padding-bottom: 8rem;
}

.wearable-top-news-list {
  margin: 3rem 0 0;
}

.wearable-top-news-list div {
  display: grid;
  gap: 0.8rem;
  min-height: 11.9rem;
  padding: 2.2rem 0;
  border-top: 0.1rem solid #d9d9d9;
}

.wearable-top-news-list div:last-child {
  border-bottom: 0.1rem solid #d9d9d9;
}

.wearable-top-news-list dt,
.wearable-top-news-list dd {
  margin: 0;
}

.wearable-top-news-list time {
  color: #000;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
}

.wearable-top-news-list a {
  color: #000;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.6;
  text-decoration: none;
}

.wearable-top-news-list a:hover {
  text-decoration: underline;
}

.wearable-top-support {
  padding: 4.1rem 1.9rem 4rem;
  background-color: #f5f5f5;
}

.wearable-top-support-title {
  margin: 0;
  color: #000;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.wearable-top-support-list {
  display: grid;
  gap: 1.4rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.wearable-top-support-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.1rem;
  border: 0.1rem solid #959595;
  color: #000;
  background-color: #fff;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.5;
  text-decoration: none;
}

.wearable-top-support-list a:hover {
  text-decoration: none;
  background-color: #f9f9f9;
}

@media print,
screen and (width >=768px) {

  .wearable-top-mv .mv-pagination-wrap {
    bottom: 2rem;
  }

  .wearable-top-concept,
  .wearable-top-lineup,
  .wearable-top-news {
    padding: 10rem 15rem 0;
  }

  .wearable-top-concept-inner,
  .wearable-top-section-inner {
    max-width: 114rem;
  }

  .wearable-top-concept-inner {
    gap: 5rem;
  }

  .wearable-top-movie-link {
    width: 30.5rem;
  }

  .wearable-top-heading {
    font-size: 3.2rem;
    line-height: 1.5;
  }

  .wearable-top-lineup-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
    margin-top: 5rem;
  }

  .wearable-top-lineup-card {
    gap: 1rem;
    padding: 4rem 0 3.6rem;
  }

  .wearable-top-lineup-card img {
    width: 26rem;
    height: 26rem;
  }

  .wearable-top-lineup-card span {
    font-size: 1.6rem;
    line-height: 1.75;
  }

  .wearable-top-lineup-card strong {
    font-size: 3.2rem;
    line-height: 1.5;
  }

  .wearable-top-news {
    padding-bottom: 10rem;
  }

  .wearable-top-news-list {
    margin-top: 5rem;
  }

  .wearable-top-news-list div {
    grid-template-columns: 18rem minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
    min-height: 8.35rem;
    padding: 0;
  }

  .wearable-top-news-list time {
    font-size: 1.5rem;
  }

  .wearable-top-news-list a {
    font-size: 1.6rem;
    line-height: 1.75;
  }

  .wearable-top-support {
    padding: 6rem 15rem 5.4rem;
  }

  .wearable-top-support-title {
    font-size: 3.2rem;
    line-height: 1.5;
  }

  .wearable-top-support-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.4rem;
    margin-top: 3.9rem;
  }
}

@media screen and (width < 768px) {
  .wearable-top-mv .swiper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1rem;
  }

  .wearable-top-mv .mv-pagination-wrap {
    position: static;
    transform: none;
  }

  .wearable-top-lineup-card:nth-child(3) {
    grid-column: 1 / -1;
    width: calc((100% - 0.55rem) / 2);
  }
}

/* ====================================
  アプリダウンロードページ
==================================== */

.qr-download-page {
  background-color: #fff;
}

.qr-download-mv picture,
.qr-download-mv img {
  display: block;
  width: 100%;
}

.qr-download-mv img {
  height: 34rem;
  object-fit: cover;
}

.qr-download-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  padding: 5rem 2.4rem;
  text-align: center;
}

.qr-download-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.qr-download-brand img {
  width: 13.7rem;
  max-width: 100%;
  height: auto;
}

.qr-download-lead {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: #202020;
}

.qr-download-store-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

.qr-download-store-link {
  display: block;
}

.qr-download-store-link img {
  display: block;
  height: 5rem;
  width: auto;
}

@media print,
screen and (width >=768px) {
  .qr-download-mv img {
    height: 49.5rem;
  }

  .qr-download-content {
    padding: 5rem 15rem;
  }
}