/* 製品詳細のSP指定。共通・PCの基底指定はstyle.cssを継承する。 */
@media (width <= 767px) {
  .p-product-page main {
    position: static;
  }

  .p-product-breadcrumb {
    position: absolute;
    top: 64px;
    right: 20px;
    left: 20px;
    display: block;
    font-size: 1.1rem;
    line-height: 29px;
  }

  .p-product-breadcrumb ol {
    display: flex;
    gap: 0 var(--space-2xs);
    list-style: none;
  }

  .p-product-breadcrumb li + li::before {
    content: "＞";
    margin-right: var(--space-2xs);
  }

  .p-product-page {
    --product-sp-gutter: 24px;
    --product-sp-card-width: 208px;
    min-width: 0;
    font-size: var(--fs-sm);
  }

  .p-product-hero {
    --hero-step: 345px;
    --hero-main-top: 105px;
    --hero-slide-width: min(344px, calc(100vw - var(--product-sp-gutter) * 2));
    --hero-slide-height: calc(var(--hero-slide-width) * 218 / 344);
    --hero-side-width: calc(var(--hero-slide-width) * 266 / 344);
    /* 前後の写真は XD どおり写真全体を縮めたもので、メイン写真の上下に 80px だけのぞかせる */
    --hero-side-height: calc(var(--hero-side-width) * 218 / 344);
    --hero-side-peek: 80px;
    --hero-side-rise: 78px;
    /* 前後の写真のぼけたふちが写真欄の枠で切れないよう、枠を上下に広げる分（メイン写真の位置は変えない） */
    --hero-side-fringe: 12px;
    --hero-window-height: calc(375px + var(--hero-side-fringe) * 2);
    /* サムネイルは下の写真のふちから 40px 下（ユーザー指示。XD は約 230px あいていた） */
    --hero-thumbs-gap: 40px;
    --hero-thumb-height: 68px;
    --hero-thumbs-top: calc(var(--hero-window-height) / 2 - var(--hero-side-fringe) + var(--hero-slide-height) / 2 + var(--hero-side-peek) + var(--hero-thumbs-gap));
    padding-bottom: 12px;
    /* 上の写真のぼけたふちがパンくずに近すぎるので、XD より 20px 下げる（ユーザー指示） */
    margin-top: calc(var(--space-lg) + 20px);
  }

  .p-product-hero__slider {
    top: calc(-1 * var(--hero-side-fringe));
    height: var(--hero-window-height);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    touch-action: pan-y;
  }

  .p-product-hero__track {
    flex-direction: column;
    width: 100%;
    margin-top: 0;
    padding: calc((var(--hero-window-height) - var(--hero-slide-height)) / 2) 0;
  }

  .p-product-hero__item {
    flex-basis: var(--hero-slide-height);
    width: 100%;
    transition: none;
  }

  .p-product-hero__slide {
    border-radius: var(--radius-md);
  }

  /* 切り取らずに写真全体をぼかすので、ふちも XD のように柔らかくぼける。のぞかせる部分の外はメイン写真の後ろに隠れる */
  .p-product-hero__item.is-prev .p-product-hero__slide,
  .p-product-hero__item.is-next .p-product-hero__slide {
    width: var(--hero-side-width);
    height: var(--hero-side-height);
    opacity: 0.8;
    filter: blur(3.7px);
    transform: translateX(-50%);
  }

  .p-product-hero__item.is-prev .p-product-hero__slide {
    top: calc(100% - var(--hero-side-peek));
  }

  .p-product-hero__item.is-next .p-product-hero__slide {
    top: calc(var(--hero-side-peek) - var(--hero-side-height));
  }

  /* SP は4枚ずつの段に折り返す */
  .p-product-hero__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    max-width: none;
    margin: var(--hero-thumbs-top) var(--product-sp-gutter) 0;
  }

  .p-product-hero__thumb {
    width: 100%;
    height: var(--hero-thumb-height);
  }

  .p-product-intro,
  .p-product-content {
    width: calc(100% - var(--product-sp-gutter) * 2);
    max-width: none;
  }

  .p-product-intro {
    padding: 15px 0 50px;
  }

  /* 写真のない製品は、パンくず（1行 29px）の下からタイトルを始める。 */
  .p-product-breadcrumb + .p-product-intro {
    padding-top: calc(29px + var(--space-md));
  }

  .p-product-intro__heading-row {
    display: block;
  }

  .p-product-intro__title {
    font-size: var(--fs-2xl);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .p-product-intro__badges {
    flex-wrap: wrap;
    gap: var(--space-2xs) 5px;
    margin-top: 10px;
    white-space: normal;
  }

  .p-product-intro__badge {
    padding: 2px var(--space-sm) 3px;
    font-size: var(--fs-sm);
  }

  .p-product-intro__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-md);
  }

  .p-product-intro__copy {
    font-size: var(--fs-sm);
  }

  .p-product-intro__tags {
    flex-wrap: wrap;
    gap: var(--space-3xs) 10px;
    margin-top: 22px;
    font-size: var(--fs-xs);
  }

  .p-product-intro__actions {
    padding-top: 0;
    margin-top: 34px;
  }

  .p-product-intro__buttons {
    display: grid;
    gap: var(--space-sm);
  }

  .p-product-intro__button {
    width: 100%;
  }

  .p-product-intro__video {
    margin-top: 18px;
  }

  .p-product-overview {
    overflow: visible;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .p-product-overview__inner {
    display: block;
    width: 100%;
  }

  .p-product-overview__col--color,
  .p-product-overview__col--related,
  .p-product-overview__col--works {
    width: 100%;
    padding: 35px 0 42px;
    border-right: 0;
  }

  .p-product-overview__col--color,
  .p-product-overview__col--related {
    border-bottom: 2px solid var(--color-line);
  }

  .p-product-overview__heading {
    font-size: var(--fs-xl);
  }

  .p-product-overview__heading span {
    font-size: var(--fs-md);
  }

  .p-product-overview__colors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 10px;
    margin-top: 23px;
  }

  .p-product-overview__colors li {
    font-size: var(--fs-md);
  }

  .p-product-overview__colors img {
    width: 100%;
    height: 62px;
    margin-bottom: var(--space-3xs);
  }

  .p-product-overview__note {
    margin-top: var(--space-md);
  }

  .p-product-overview__cards {
    display: grid;
    grid-auto-columns: var(--product-sp-card-width);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 26px;
    overflow-x: auto;
    width: calc(100vw - var(--product-sp-gutter) * 2);
    margin-top: var(--space-md);
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .p-product-overview__cards::-webkit-scrollbar {
    display: none;
  }

  .p-product-overview__cards img {
    width: 100%;
    height: 186px;
  }

  .p-product-section {
    padding: 34px 0 44px;
  }

  .p-product-overview + .p-product-section::before {
    border-top-width: 2px;
  }

  .p-product-section__heading {
    min-height: 57px;
    padding-left: var(--space-sm);
    font-size: var(--fs-xl);
  }

  .p-product-section__lead {
    margin-top: var(--space-lg);
  }

  .p-product-section__diagrams,
  .p-product-section__technical-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 30px;
    margin-top: 20px;
  }

  .p-product-section__diagrams img,
  .p-product-section__technical-images img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .p-product-section--dimension .p-product-section__note,
  .p-product-section--technical .p-product-section__note {
    margin-top: var(--space-md);
  }

  /* 最後の欄（価格表・寸法図・技術情報・製品名の欄）の下の余白。 */
  .p-product-section:last-child,
  .p-product-intro:not(:has(+ .p-product-content > *)) {
    padding-bottom: 44px;
  }

  /* カラー・関連の欄は、各列の下の余白がそのまま最後の余白になるので足さない。 */
  .p-product-overview:last-child {
    padding-bottom: 0;
  }

  .p-product-section__price-scroll {
    overflow-x: auto;
    width: calc(100vw - var(--product-sp-gutter) * 2);
  }

  .p-product-section__price-table {
    width: 700px;
    table-layout: fixed;
  }

  .p-product-section__price-table th:first-child {
    width: 264px;
  }

  .p-product-section__price-placeholder {
    width: 100%;
    margin-top: var(--space-md);
  }
}