/* Figma 2484:5858: 325px inner width, 355px detail cards. */
.p-detail__copy--pc {
  display: none;
}

.p-detail__copy--sp {
  display: inline;
}

.p-lineup > .l-inner {
  width: calc(100% - 50px);
}

.p-lineup__item, .p-lineup__item:first-child, .p-lineup__item:last-child {
  /* 右列は 375px デザインの幅（203px）まで。広い画面では写真＋テキストのまとまりをカードの中央に置く */
  grid-template-columns: 90px minmax(0, 203px);
  grid-template-rows: 22px 35px auto;
  justify-content: center;
  gap: 0 12px;
  padding: 25px 10px;
  min-height: 245px;
}

.p-lineup__visual {
  grid-column: 1;
  grid-row: 1 / 4;
}

.p-lineup__use {
  align-self: start;
  font-size: 0.875rem;
  line-height: 22px;
  letter-spacing: 0.05em;
}

.p-lineup__name {
  align-self: center;
  justify-content: space-between;
  width: 100%;
  /* 375px デザインの幅（ロゴ 156.5 + 間 12 + 矢印 35）まで。広い画面でも矢印をロゴの横に置く */
  max-width: 203px;
  margin: 0;
  gap: 8px;
}

.p-lineup__name img {
  flex: 0 1 156.5px;
  width: 156.5px;
  max-width: calc(100% - 43px);
  height: auto;
  max-height: none;
}

.p-lineup__name .c-circle-icon {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  transform: rotate(90deg);
}

.p-lineup__formula {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
  padding: 16px 0 0;
  border: 0;
  /* デザインどおり商品名の下に薄い区切り線 */
  border-top: 1px solid var(--c-line);
}

.p-lineup__formula .c-formula__item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 5px;
  width: 100%;
}

.p-lineup__formula .c-pill {
  width: 110px;
  height: 40px;
  min-height: 40px;
  padding: 0 8px;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.p-lineup__formula .c-pill .u-en,
.p-lineup__formula .c-pill .c-pill__unit {
  font-size: 0.875rem;
}

.p-lineup__formula .c-formula__desc {
  font-size: 0.75rem;
  line-height: 1.4;
}

.p-lineup__formula .c-formula__plus {
  width: 110px;
  height: 30px;
  margin: 0;
  font-size: 2.1875rem;
  line-height: 30px;
  text-align: center;
}

.p-detail__main {
  padding: 40px 0 30px;
  text-align: center;
}

.p-detail__name img {
  width: auto;
  max-width: calc(100% - 40px);
  height: 32px;
  max-height: none;
  margin-inline: auto;
}

.p-detail__flavor {
  margin-top: 20px;
}

.p-detail__catch {
  margin: 30px 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-wrap: initial;
}

.p-detail__formula {
  display: block;
  margin: 20px 20px 0;
  font-size: 0.875rem;
  line-height: 1.9;
  text-align: left;
}

.p-detail__formula .c-pill {
  display: inline-flex;
  height: 30px;
  min-height: 30px;
  padding-inline: 10px;
  font-size: 0.875rem;
  vertical-align: middle;
}

.p-detail__formula .c-pill .u-en,
.p-detail__formula .c-pill .c-pill__unit {
  font-size: 0.9375rem;
}

.p-detail__plus {
  display: inline-block;
  width: 20px;
  font-size: 1.875rem;
  line-height: 30px;
  text-align: center;
  vertical-align: middle;
}

.p-detail__formula-text, .p-detail__formula-text--inline {
  display: contents;
  margin: 0;
}

.p-detail__points {
  flex-direction: column;
  width: fit-content;
  max-width: calc(100% - 30px);
  margin: 25px auto 0;
  text-align: left;
}

.p-detail__points li {
  font-size: 0.875rem;
  line-height: 1.5;
}

.p-detail__foot {
  align-items: center;
  padding: 20px 15px;
  gap: 20px;
  text-align: center;
  /* 区切り線はアレルゲンの上ではなく、下の「乳酸菌B240」見出しの上（.p-detail__tips 側） */
  border-top: 0;
}

.p-detail__foot .c-btn {
  width: 200px;
  max-width: 100%;
}

.p-detail__foot .c-boxnote, .p-detail__footnote {
  font-size: 0.8125rem;
  line-height: 1.57;
}

.p-detail__footnote {
  /* 375px デザインの幅（325px）まで。広い画面ではブロックごと中央に置く（文字は左揃えのまま） */
  max-width: 325px;
  margin-inline: auto;
  text-align: left;
}

.p-detail__tips {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--c-line);
}

.p-tip {
  width: 100%;
  padding: 20px 15px 60px;
}

.p-tip + .p-detail__plus-circle + .p-tip {
  padding-top: 60px;
  padding-bottom: 40px;
}

.p-tip__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 75px;
  padding: 10px;
  /* Figma（6891:9115 ほか）の角丸 */
  border-radius: 20px;
  text-align: center;
}

.p-tip__label {
  flex: none;
  justify-content: center;
  /* PC の左の余白（products.css）を打ち消して、見出しの中央に置く */
  padding-left: 0;
  font-size: 1.125rem;
  line-height: 19px;
  text-align: center;
}

.p-tip__label--sm {
  font-size: 1.125rem;
}

.p-tip__label .u-en {
  font-size: 1.1875rem;
}

.p-tip__badge {
  flex: none;
  width: 250px;
  max-width: 100%;
  height: auto;
  min-height: 25px;
  padding: 5px 8px;
  font-size: 0.875rem;
  line-height: 1.07143;
  text-align: center;
}

/* ゼリーのタンパク質の見出し：成分名（15px）の下に内訳（14px）を1行で置く（Figma 6891:9304） */
.p-tip__protein-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-ja);
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0;
}

.p-tip__protein-label .p-tip__sub {
  margin-left: 0;
  font-size: 0.875rem;
  line-height: 1;
}

/* 内訳を1行にすると2つの成分が1語に見えるので、SP だけ「／」で区切る（Figma には無い。PC は改行で区切る） */
.p-tip__sep {
  display: inline;
}

/* SP のバッジはデザインどおり詰めない */
.p-tip__badge--tight {
  letter-spacing: 0.05em;
}

.p-tip__figure {
  margin-top: 30px;
}

.p-tip__figure--b240::before {
  display: none;
}

.p-tip__title {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.57;
  letter-spacing: 0.04em;
}

.p-tip__text {
  margin-top: 15px;
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.p-tip__action {
  margin-top: 25px;
}

.p-tip__action .c-btn {
  width: 200px;
  max-width: 100%;
}

.p-detail__plus-circle {
  position: relative;
  z-index: 1;
  flex: none;
  align-self: center;
  width: 60px;
  height: 60px;
  margin: -30px 0;
  font-size: 0;
  line-height: 1;
}

.p-detail__plus-circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100cqw - 20px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to right, var(--c-line) 0 calc(50% - 30px), transparent calc(50% - 30px) calc(50% + 30px), var(--c-line) calc(50% + 30px));
}

.p-detail__plus-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: linear-gradient(var(--c-black), var(--c-black)) center / 1px 100% no-repeat, linear-gradient(var(--c-black), var(--c-black)) center / 100% 1px no-repeat;
}

.p-tip__spec dt {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.9;
}

.p-tip__spec dd {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.7;
}

.p-tip__spec dd + dt {
  margin-top: 20px;
}

.p-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 15px;
  border: 0;
  /* デザインどおり「こんなときにおすすめ SCENE」の上に薄い区切り線 */
  border-top: 1px solid var(--c-line);
}

.p-scene__head {
  align-items: center;
  width: 100%;
  gap: 15px;
  text-align: center;
}

.p-scene__head .c-tag {
  height: auto;
  min-height: 25px;
  padding: 5px 15px;
  font-size: 0.875rem;
  line-height: 1;
}

.p-scene__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 0;
}

.p-scene__item + .p-scene__item {
  margin-left: -5px;
}

.p-scene__caption {
  margin-top: 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

.p-ask {
  margin-top: 50px;
  padding: 0 0 20px;
}

.p-ask__inner {
  display: block;
  position: relative;
}

.p-ask__visual {
  justify-content: flex-end;
  gap: 5px;
  height: 213.3px;
  /* 375px デザインの 325px 幅のまとまり（左にマーク・右に製品）を、広い画面でも中央に置く */
  width: min(100%, 325px);
  margin-inline: auto;
}

.p-ask__drink {
  height: 213px;
}

.p-ask__jelly {
  height: 158px;
}

/* マークの配置基準は本文ブロック。フェードイン（transform）中に基準が変わって位置がずれるのを防ぐ
   top：製品画像の上端から 93.3px（= 本文上端から 93.3 − 213.3）。flow-root で見出しのマージン相殺による上端のずれを防ぐ */
.p-ask__body {
  position: relative;
  display: flow-root;
  margin-inline: auto; /* 最大幅 753px（products.css）になる幅でも中央に置く */
}

.p-ask__body .c-ask {
  display: block;
}

.p-ask__body .c-ask__mark {
  position: absolute;
  top: -120px;
  left: max(0px, calc(50% - 162.5px)); /* 製品画像のまとまり（325px・中央）の左端に合わせる */
  width: 120px;
}

.p-ask__body .c-ask__title {
  margin-top: 25px;
  font-size: 1.25rem;
  line-height: 1.6;
  text-align: center;
}

.p-ask__body .c-ask__notes {
  padding: 0;
  margin-top: 25px;
  font-size: 0.75rem;
  line-height: 1.57;
}

.p-ask__about {
  margin-top: 25px;
  padding: 15px;
}

.p-ask__about-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.57;
}

.p-ask__about-text {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0;
}

.p-links {
  margin: 50px 0 85px;
}

.c-tile__visual--feature picture, .c-tile__visual--feature picture img {
  display: block;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 359px) {

  .p-lineup__item, .p-lineup__item:first-child, .p-lineup__item:last-child {
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 0 7px;
  }

  .p-lineup__visual--drink img {
    height: 180px;
  }

  .p-lineup__visual--jelly img {
    height: 135px;
  }

  .p-lineup__formula .c-formula__item {
    grid-template-columns: 95px minmax(0, 1fr);
  }

  .p-lineup__formula .c-pill, .p-lineup__formula .c-formula__plus {
    width: 95px;
  }

  .p-lineup__formula .c-pill {
    padding-inline: 3px;
  }
}

/* 注記の位置は Figma の SP に合わせる（PC は右・下 10px） */
.p-tip__figure--protein .p-tip__imgnote {
  right: 5.3px;
  bottom: 7.5px;
}

.p-detail__formula .c-pill {
  min-width: 0;
}

.p-lineup__formula .c-formula__item {
  height: 40px;
}

.p-tip__title, .p-tip__spec dt {
  font-weight: 500;
}

.p-tip:nth-of-type(2) .p-tip__title {
  letter-spacing: 0;
}

/* Figma 6106: three 120px circles overlap by 10px inside the 355px card. */

.p-scene {
  gap: 25px;
  padding: 41px 0 40px;
}

.p-scene__head {
  gap: 10px;
}

.p-scene__list {
  display: flex;
  justify-content: center;
  width: calc(100% - 15px);
}

.p-scene__item {
  flex: 0 0 calc((100% + 20px) / 3);
  min-width: 0;
}

.p-scene__item + .p-scene__item {
  margin-left: -10px;
}

.p-scene__caption {
  margin-top: 10px;
}

/* Original SP formula rows: 35px badge row, followed by 27px text rows. */

.p-detail__formula {
  display: grid;
  grid-template-columns: 92px 20px 64px minmax(0, 1fr);
  grid-template-rows: minmax(35px, auto) auto;
  align-items: center;
  gap: 0;
  /* 375px デザインの幅（315px）まで。広い画面ではブロックごと中央に置く（文字は左揃えのまま）。
     375px 未満でも左右 20px の余白を残す */
  width: min(315px, 100% - 40px);
  margin-right: auto;
  margin-left: max(20px, calc(50% - 157.5px));
  line-height: 1.9285714;
}

.p-detail__formula .c-pill {
  width: 100%;
  padding-inline: 5px;
}

.p-detail__formula-text {
  display: block;
  grid-column: 1 / -1;
  max-width: 315px;
  letter-spacing: 0.02em;
}

.p-detail__formula-text--inline {
  grid-column: 4;
  grid-row: 1;
  padding-left: 5px;
  letter-spacing: 0.05em;
}

#jelly .p-detail__formula {
  grid-template-columns: 92px 20px 114px minmax(0, 1fr);
  /* 375px では左 20px・右 15px（幅 320px）。375px 未満でも右 15px を残す */
  width: min(320px, 100% - 35px);
  margin-left: max(20px, calc(50% - 160px));
}

.p-detail__body {
  padding-bottom: 20px;
}

.p-detail__foot .c-boxnote {
  padding-block: 1px;
}

.p-detail__footnote {
  margin-top: 10px;
}

.p-detail__visual--jelly {
  height: 300px;
}

.p-tip + .p-detail__plus-circle + .p-tip {
  padding-top: 51px;
}

.p-tip__head--outline {
  padding-block: 8px;
}

#drink .p-tip:nth-of-type(2) .p-tip__title {
  line-height: 1.3626075;
}

.p-tip__text, .p-tip__spec dd {
  line-height: 1.7142857;
}

#jelly {
  margin-top: 60px;
}

#jelly .p-tip__head--outline {
  gap: 11px;
  padding-block: 9px;
}

#jelly .p-scene {
  gap: 30px;
}

#jelly .p-scene__head {
  gap: 12px;
}

.p-ask__body .c-ask__notes {
  line-height: 1.5833333;
}

.p-ask__about {
  padding: 13.5px 13.5px 18.5px;
}

.p-ask__about-title {
  line-height: 1.5625;
}

.p-ask__about-text {
  line-height: 1.7142857;
}

/* Let the 375px composition reflow on narrower phones. */
@media (max-width: 359px) {
  .p-detail__formula, #jelly .p-detail__formula {
    width: auto;
    margin-inline: 10px;
  }

  .p-lineup__formula .c-formula__item {
    height: auto;
    min-height: 40px;
  }

  /* SCENE のキャプション：円の幅は（画面幅 - 15px）/ 3 で、13px のままだと 327px 未満で
     8 文字の行（「ハードワーク時の」）が入らず「の」だけが次の行に落ちる。
     また隣のキャプションとのすき間も数 px まで詰まるので、狭い幅では 12px にする */
  .p-scene__caption {
    font-size: 0.75rem;
  }
}