*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  /* Fallback; in-page anchors use eased JS scroll in app.js (offset + reduced motion). */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
}

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

/* Eyedropper the flat area of your bg image and set this to match (edges / loading flash). */
.fv {
  --fv-bg: #efd31d;
  position: relative;
  overflow: visible;
  z-index: 20;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--fv-bg);
  background-image: url("https://print-world.jp/resource/4a424d2da0eee57aeac89df54598dd1784078343");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* --- Header: coded, not a flat image (fixed sitewide; Excel 全体的に ④) --- */
.fv-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  min-height: 108px;
  pointer-events: none;
  background: transparent;
}

.fv-logo {
  position: absolute;
  top: 24px;
  left: 24px;
  pointer-events: auto;
}

.fv-logo img {
  width: min(360px, 50vw);
  height: auto;
}

.fv-logo picture {
  display: block;
  line-height: 0;
}

.fv-header__right {
  position: absolute;
  right: 0;
  pointer-events: auto;
}

.fv-pill {
  margin: 0 auto;
  padding: 8px 88px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #f15a24;
  border-radius: 999px;
  line-height: 1;
  min-width: 292px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: -10px;
}

.fv-header__actions {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 50px;
}

/* Header — 769–1919: lock 1920 composition via uniform zoom. */
@media (min-width: 769px) and (max-width: 1919px) {
  .fv-header {
    width: 1920px;
    zoom: calc(100vw / 1920px);
    transform-origin: top left;
  }
}

.fv-header__compact {
  display: none;
}

.fv-header__left {
  display: contents;
}

.fv-header__brand {
  display: none;
}

.fv-header__brand-lead,
.fv-header__brand-name {
  margin: 0;
}

.fv-header__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.fv-header__links {
  display: flex;
  align-items: stretch;
  height: 118px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.fv-header__links>a {
  transition: transform 140ms ease, filter 140ms ease, outline-color 140ms ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
  will-change: transform;
}

.fv-header__links>a:hover {
  transform: translateY(-2px);
  filter: brightness(1.03) saturate(1.02);
  outline-color: rgba(255, 255, 255, 0.35);
}

.fv-header__links>a:active {
  transform: translateY(0);
  filter: brightness(0.99) saturate(0.98);
  outline-color: rgba(0, 0, 0, 0.08);
}

.phone-box {
  --phone-icon: 20px;
  --phone-gap: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  background: #fff;
  color: #111;
  text-decoration: none;
  border-radius: 0;
  width: auto;
  flex: 0 0 auto;
  height: 100%;
  border-right: 1px solid #f2f2f2;
  white-space: nowrap;
}

.phone-box__icon {
  width: var(--phone-icon);
  height: var(--phone-icon);
  object-fit: contain;
  flex-shrink: 0;
}

.phone-box__top {
  display: inline-flex;
  align-items: baseline;
  gap: var(--phone-gap);
}

.phone-box__top .phone-box__icon {
  margin-top: 0;
}

.phone-box__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  white-space: nowrap;
}

.phone-box__label {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  color: #111;
  font-weight: 700;
  padding-left: calc(var(--phone-icon) + var(--phone-gap));
}

.phone-box__number {
  font-size: clamp(26px, 2.1vw, 40px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.95;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 8px 8px;
  width: 144px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  height: 100%;
  border-radius: 0;
}

.cta--contact {
  background: #d8001a;
}

.cta--line {
  background: #00c300;
  width: 144px;
}

.cta__icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.cta__label {
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
}

/* Orange utility cluster: cart + login + hamburger */
.fv-header__util {
  display: flex;
  align-items: center;
  gap: 50px;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 170px;
  padding: 0 50px 0 50px;
  background: #f15a24;
  border-radius: 0 0 0 29px;
}

.fv-header__util .mt-ec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  margin: 0;
}

.fv-header__util .mt-ec .header__item {
  position: relative;
  display: flex;
  align-items: center;
}

.fv-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.fv-cart-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-color: #fff;
  -webkit-mask: url("images/header-backet-icon.png") center / contain no-repeat;
  mask: url("images/header-backet-icon.png") center / contain no-repeat;
}

.fv-cart-label {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.fv-header__util .header__cart .m-icon.icon--cart,
.fv-header__util .header__cart a > .m-icon {
  display: none !important;
}

.fv-header__util .header__login .btn--login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 108px;
  padding: 7px 22px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff !important;
  background: transparent !important;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.fv-header__util .header__login .btn--user img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.fv-login-icon {
  display: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.menu-btn {
  width: 48px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 72px;
  padding: 0;
  border-radius: 0;
  transition: filter 140ms ease;
}

.menu-btn span {
  display: block;
  height: 6px;
  margin: 0;
  width: 100%;
  background: #fff;
  transition: width 140ms ease;
}

.menu-btn:hover {
  filter: brightness(1.08);
}

.menu-btn:hover span {
  width: 100%;
}

.menu-btn:active {
  filter: brightness(0.95);
}

@media (max-width: 768px) {
  /* Mobile icon row: phone / mail / LINE / cart / login — equal size + equal gap.
     Menu follows the same box size for alignment. */
  .fv-header__actions {
    --fv-sp-icon: 34px;
    --fv-sp-icon-gap: 10px;
    align-items: center;
    gap: var(--fv-sp-icon-gap);
  }

  .fv-header__compact {
    align-items: center;
    gap: var(--fv-sp-icon-gap);
  }

  .fv-compact-action {
    box-sizing: border-box;
    justify-content: center;
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    min-width: var(--fv-sp-icon);
    gap: 0;
    padding: 0;
  }

  .fv-compact-action img {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    object-fit: contain;
  }

  .fv-compact-action span {
    display: none;
  }

  .fv-header__util {
    height: auto;
    padding: 0;
    gap: var(--fv-sp-icon-gap);
    background: transparent;
    border-radius: 0;
    align-items: center;
  }

  .fv-header__util .mt-ec {
    flex-direction: row;
    align-items: center;
    gap: var(--fv-sp-icon-gap);
  }

  .fv-header__util .mt-ec .header__item {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fv-cart-link {
    box-sizing: border-box;
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    gap: 0;
    justify-content: center;
    align-items: center;
  }

  .fv-cart-icon {
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    background-color: #f15a24;
  }

  .fv-cart-label {
    display: none;
  }

  .fv-header__util .header__login .btn--login {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--fv-sp-icon);
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background: transparent !important;
  }

  .fv-header__util .header__login .btn--login .fv-login-icon {
    display: block;
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    object-fit: contain;
  }

  .fv-header__util .menu-btn {
    box-sizing: border-box;
    width: var(--fv-sp-icon);
    height: var(--fv-sp-icon);
    gap: 6px;
    background: transparent;
  }

  .fv-header__util .menu-btn span {
    width: 100%;
    height: 3px;
    margin: 0;
    background: #f15a24 !important;
  }
}

@media (min-width: 769px) {
  .fv-header__util .menu-btn {
    width: 48px;
    height: 72px;
    background: transparent;
    border-radius: 0;
  }

  .fv-header__util .menu-btn span {
    width: 100%;
    margin: 0;
    background: #fff;
  }
}

/* --- Hamburger menu drawer (JP service-site style: list rows, calm header) --- */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

.site-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  transition: opacity 180ms ease;
}

.site-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: #fff;
  transform: translateX(100%);
  transition: transform 220ms ease;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 22px;
  box-shadow: none;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.site-menu__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  padding-bottom: 8px;
  margin-bottom: 0;
}

.site-menu__close {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #f0f0f0;
  color: #2a2a2a;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease;
}

.site-menu__close::before,
.site-menu__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.site-menu__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.site-menu__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.site-menu__close:hover {
  background: #e4e4e4;
  color: #111;
}

.site-menu__close:focus-visible {
  outline: 2px solid #f15a24;
  outline-offset: 2px;
}

.site-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
  padding: 0 0 4px;
}

.site-menu__link {
  position: relative;
  display: block;
  padding: 16px 28px 16px 2px;
  border: 0;
  border-bottom: 1px solid #ebebeb;
  border-radius: 0;
  text-decoration: none;
  color: #111;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  background: transparent;
}

.site-menu__link:last-child {
  border-bottom: 0;
}

.site-menu__link::after {
  content: "\203A";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 400;
  color: #c0c0c0;
  line-height: 1;
}

.site-menu__link:hover {
  background: #fafafa;
}

.site-menu__link:focus-visible {
  outline: 2px solid #f15a24;
  outline-offset: -2px;
  z-index: 1;
}

.site-menu__actions {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 10px;
  margin-top: 0;
  border-top: 1px solid #ebebeb;
}

.site-menu__action {
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  padding: 13px 14px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  background: #fff;
  border: 1px solid #d5d5d5;
  box-sizing: border-box;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.site-menu__action:hover {
  background: #f7f7f7;
  border-color: #c0c0c0;
  color: #111;
}

.site-menu__action:focus-visible {
  outline: 2px solid #888;
  outline-offset: 2px;
}

.site-menu__action--phone {
  color: #222;
  background: #fafafa;
  border-color: #cfcfcf;
}

.site-menu__action--phone:hover {
  background: #f0f0f0;
  border-color: #b8b8b8;
}

.site-menu__action--mail {
  color: #2c2c2c;
  background: #fff;
  border-color: #c8c8c8;
}

.site-menu__action--mail:hover {
  background: #f9f9f9;
  border-color: #a8a8a8;
}

.site-menu__action--line {
  color: #06c755;
  background: #fff;
  border-color: #06c755;
}

.site-menu__action--line:hover {
  background: #f3fcf7;
  border-color: #05b34c;
  color: #049948;
}

.is-menu-open .site-menu {
  pointer-events: auto;
}

.is-menu-open .site-menu__overlay {
  opacity: 1;
}

.is-menu-open .site-menu__panel {
  transform: translateX(0);
}

.is-menu-open body {
  overflow: hidden;
}

/* --- Shirt rows: behind content --- */
.shirts-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding-top: 120px;
  pointer-events: none;
}

/* PC: exactly 8 shirt slots across the viewport width (100%). */
:root {
  --shirt-gap: clamp(10px, 1vw, 16px);
  --shirt-col: calc((100vw - 7 * var(--shirt-gap)) / 7.5);
  --marquee-duration: 48s;
}

.marquee {
  overflow: hidden;
  width: 100%;
  margin: 20px 0;
}

.marquee__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
}

/* No flex gap: margins repeat identically across the duplicated strip (seamless loop). */
.marquee--left .marquee__track {
  animation: marquee-slide var(--marquee-duration) linear infinite;
}

/* Same distance as left, opposite direction — no jump at loop (avoids 0 ↔ -50% mismatch). */
.marquee--right .marquee__track {
  animation: marquee-slide var(--marquee-duration) linear infinite reverse;
}

@keyframes marquee-slide {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.shirt-card {
  flex: 0 0 var(--shirt-col);
  width: var(--shirt-col);
  max-width: var(--shirt-col);
  aspect-ratio: 1;
  margin-right: var(--shirt-gap);
  padding: clamp(4px, 0.8vw, 14px);
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shirt-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}



/* --- Foreground (fewer images: people | full-text plate | phone+badges composite) --- */
/* Width ratios from ~1024px reference comp: people ~23%, main copy ~43%, phone+badges ~30% of screen. */
.fv-content {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  --fv-people-w: 38%;
  --fv-maincopy-w: 45%;
  --fv-mobile-w: 36%;
}

.fv-foreground {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.fv-foreground__figures {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
}

.fv-people {
  position: absolute;
  z-index: 11;
  left: 0;
  bottom: 0;
  width: var(--fv-people-w);
  height: auto;
}

.fv-maincopy-wrap {
  position: absolute;
  z-index: 13;
  left: 48%;
  top: clamp(100px, 24vh, 240px);
  width: var(--fv-maincopy-w);
  transform: translateX(-50%);
}

.fv-maincopy {
  display: block;
  width: 100%;
  height: auto;
  position: static;
  transform: none;
}

.fv-mobilephone {
  position: absolute;
  z-index: 24;
  right: -2vw;
  top: clamp(96px, 20vh, 240px);
  width: var(--fv-mobile-w);
  height: auto;
  transform: translateY(48px);
}





/* --- Section 2 --- */
.sec2 {
  position: relative;
  z-index: 10;
  margin-top: 0;
  overflow: hidden;
  background-color: #f6f6c2;
  background-image: url("https://print-world.jp/resource/4f07559b2d7af570e117059e86bcc41784082250");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.sec2-inner {
  position: relative;
  height: clamp(320px, 35.5vw, 460px);
}

.sec2-col--left,
.sec2-col--right {
  display: contents;
}

.sec2-maincopy-wrap,
.sec2-choicecopy-wrap {
  display: contents;
}

.sec2-badge {
  display: none;
}

.sec2-maincopy {
  position: absolute;
  z-index: 5;
  left: 13%;
  top: 12%;
  width: 32%;
  height: auto;
}

.sec2-choicecopy {
  position: absolute;
  z-index: 6;
  left: 16%;
  bottom: -6%;
  width: 22%;
  height: auto;
}

.sec2-people {
  position: absolute;
  z-index: 4;
  left: 29.6%;
  bottom: -101%;
  width: 33%;
  height: auto;
}

.sec2-shirts {
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  top: 9%;
  width: 36%;
  height: auto;
}

.sec2-middle-confetti {
  position: absolute;
  z-index: 7;
  left: 52%;
  bottom: -10%;
  width: 10%;
  height: auto;
}

.sec2-computer-wrap {
  position: absolute;
  z-index: 4;
  right: 13%;
  bottom: -1%;
  width: 30%;
}

.sec2-computer {
  display: block;
  width: 100%;
  height: auto;
}

.sec2-products-marquee {
  position: relative;
  z-index: 20;
  margin-top: 48px;
  width: 100%;
  overflow: hidden;
}

.sec2-products-track {
  --sec2-loop-translate: -50%;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: sec2-products-left 44s linear infinite;
}

.sec2-products {
  flex: 0 0 100vw;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 0;
  width: 100vw;
  padding: 0 16px 64px 0;
}

@keyframes sec2-products-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--sec2-loop-translate), 0, 0);
  }
}

.product-card {
  position: relative;
  padding: 0 0 16px;
}

.product-rank {
  margin: 0;
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: #8f8f8f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  transform: translateY(8px);
  margin-left: 6px;
  position: relative;
  z-index: 2;
}

.product-rank--1 {
  background: #d9ab2d;
}

.product-rank--2 {
  background: #9e9e9e;
}

.product-rank--3 {
  background: #8f5a2e;
}

.product-image-wrap {
  background: #fff;
  margin: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image-wrap img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.product-chip {
  margin: 9px 0 0 8px;
  display: inline-block;
  background: #fff;
  border: 1px solid #e4e4e4;
  color: #606060;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  padding: 4px 8px;
}

.product-name {
  margin: 8px 6px 0;
  color: #141414;
  font-size: clamp(12px, 1.02vw, 16px);
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: 0;
}

.product-price {
  margin: 6px 6px 0;
  color: #c91f2e;
  font-size: clamp(24px, 2.75vw, 44px);
  line-height: 0.95;
  font-weight: 900;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

.product-price span {
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 700;
}

.product-tags {
  list-style: none;
  margin: 10px 6px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.product-tags li {
  color: #8a8a8a;
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.tag-hash {
  color: #c91f2e;
}



/* --- Section 3: categories --- */
.sec3 {
  position: relative;
  background: #89d6e8;
  z-index: 12;
  margin-top: 0;
  padding: 18px 0 28px;
  overflow: visible;
}

.sec3-inner {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
  padding-bottom: 64px;
}

.sec3-top {
  position: relative;
  min-height: 148px;
  margin-bottom: 0;
}

.sec3-deco {
  position: absolute;
  left: 0;
  top: -84%;
  width: min(370px, 34vw);
  height: auto;
  z-index: 2;
}

.sec3-title {
  position: absolute;
  z-index: 3;
  left: 37%;
  top: -48px;
  transform: translateX(-50%);
  width: min(440px, 42vw);
  height: auto;
}

.sec3-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 64px 16px;
  margin-top: -44px;
}

/* 上段6枚＋右端に不可視スペーサー1枚で「7列×2段」を確定。全カードを同一サイズ（1/7幅）に揃える */
.sec3-grid .sec3-card--spacer {
  visibility: hidden;
  pointer-events: none;
}

.sec3-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sec3-card__image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%; /* 画像サイズに依存せず正方形を確定 */
  background: #fff;
  overflow: hidden;
}

.sec3-card__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  height: 86%;
  object-fit: contain;
}

.sec3-card__link {
  margin-top: 12px;
  width: calc(100% - 8px);
  min-height: 28px;
  border-radius: 999px;
  background: #0071BC;
  color: #fff;
  text-decoration: none;
  font-size: clamp(10px, 0.86vw, 13px);
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 8px 8px 10px;
  position: relative;
}

.sec3-card__link::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid #fff;
}

/* --- Section 4: ideas usage --- */
.sec4 {
  position: relative;
  overflow: visible;
  background: #ffd9ef;
  z-index: 14;
}

.sec4-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.sec4-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 34px 0 52px;
}

.sec4-kicker {
  display: block;
  width: min(380px, 24vw);
  margin: 0;
  position: absolute;
  left: 18%;
  top: -44px;
  z-index: 5;
}

.sec4-title {
  display: block;
  width: min(1080px, 62vw);
  margin: 8px auto 48px;
}

.sec4-marquee {
  width: 100%;
  overflow: hidden;
}

.sec4-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: sec4-left 34s linear infinite;
}

.sec4-list {
  --sec4-gap: 16px;
  --sec4-col: calc((100vw - 16px - 6 * var(--sec4-gap)) / 7);
  display: flex;
  align-items: flex-start;
  gap: var(--sec4-gap);
  width: max-content;
  padding: 0 8px;
}

.sec4-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 var(--sec4-col);
  width: var(--sec4-col);
  padding-bottom: 10px;
}

.sec4-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  padding: clamp(4px, 0.8vw, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sec4-card__image img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.sec4-card__link {
  margin-top: -24px;
  width: calc(80% - 8px);
  min-height: 32px;
  border-radius: 999px;
  background: #25b0d6;
  color: #fff;
  text-decoration: none;
  font-size: clamp(10px, 0.86vw, 13px);
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 16px 16px 10px;
  position: relative;
  z-index: 2;
}

.sec4-card__link::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid #fff;
}

.sec4-bottom-confetti {
  display: block;
  width: 64%;
  left: 53%;
  transform: translateX(-50%);
  position: relative;
  z-index: 1;
  margin-top: -30px;
  padding-bottom: 24px;
}

@keyframes sec4-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}



/* --- Section 5: strengths --- */
.sec5 {
  position: relative;
  z-index: 16;
  overflow: visible;
  background: #D3E283;
  padding: 28px 0 clamp(72px, 10vw, 200px);
}

/* Hero only: max width + side margin. Intro / grid / CTA use full width below. */
.sec5-hero-wrap {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
}

.sec5-body {
  width: 100%;
  box-sizing: border-box;
  padding: 0 64px;
}

.sec5-hero {
  position: relative;
  z-index: 2;
}

.sec5-people {
  position: absolute;
  left: -8%;
  bottom: 0;
  width: 44%;
  height: auto;
  z-index: 1;
  transform: translateY(39%);
}
/* 769px以上のみ .sec5-people の位置を上書き（他の範囲は不変） */
@media (min-width: 769px) {
  .sec5-people {
    left: -4%;
    transform: translateY(36%);
  }
}

/* PC = .sec5-people / SP(<=768px) = .sec5-people-mobile を表示切替。
   .sec5-people-mobile はPC位置を初期値として持たせてある（SPの値は適宜調整可）。 */
.sec5-people-mobile {
  display: none;
  position: absolute;
  left: -8%;
  bottom: 0;
  width: 44%;
  height: auto;
  z-index: 1;
  transform: translateY(39%);
}
@media (max-width: 768px) {
  .sec5-people { display: none !important; }
  .sec5-people-mobile { display: block !important; }
}
/* 768px〜426px の範囲だけ .sec5-people-mobile の位置・サイズを上書き（他の範囲は不変） */
@media (min-width: 426px) and (max-width: 768px) {
  .sec5-people-mobile {
    left: -9%;
    width: 55%;
    transform: translateY(35%);
  }
}
/* 425px〜320px の範囲だけ .sec5-people-mobile の位置・サイズを上書き（他の範囲は不変） */
@media (min-width: 320px) and (max-width: 425px) {
  .sec5-people-mobile {
    left: -6%;
    width: 56%;
    transform: translateY(9%);
  }
}

.sec5-maincopy {
  position: relative;
  display: block;
  width: min(760px, 78vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  z-index: 3;
  transform: translateY(-88%);
}

.sec5-badge {
  display: none;
}

.sec5-intro {
  position: relative;
  z-index: 4;
  background: #f7ede6;
  border-radius: 14px;
  padding: 56px 48px 48px 48px;
  margin: 0 auto 48px;
  max-width: min(1168px, 100%);
  margin-top: -88px;
  text-align: left;
  color: #222;
}

.sec5-intro__lead {
  margin: 0 0 14px;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.65;
}

.sec5-intro__body {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.75;
}

.sec5-em {
  color: #c91f2e;
  font-weight: 700;
}

.sec5-grid {
  position: relative;
  z-index: 4;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 24px;
  counter-reset: sec5;
}

.sec5-card {
  position: relative;
  counter-increment: sec5;
  display: flex;
  align-items: stretch;
  gap: 0 16px;
  background: #fff;
  border-radius: clamp(24px, 4.2vw, 18px);
  padding: 16px 24px 0 14px;
  min-height: clamp(132px, 14vw, 168px);
  overflow: visible;
}

/* Number badge: overlaps top-left of card (design) */
.sec5-card::before {
  content: counter(sec5);
  position: absolute;
  top: -16px;
  left: 20px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f15a24;
  color: #fff;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 0 #000000;
}

/* Visual ~47% width; copy fills remainder (~53%) — design split */
.sec5-card__media {
  flex: 0 0 47%;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: clamp(22px, 3vw, 34px) 0 0 clamp(22px, 3vw, 34px);
}

.sec5-card__media img {
  width: 100%;
  height: auto;
  max-height: min(200px, 28vw);
  display: block;
  object-fit: contain;
  object-position: bottom center;
}

.sec5-card__text {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 0 14px 4px;
  font-size: clamp(11px, 0.95vw, 14px);
  line-height: 1.65;
  color: #5c5c5c;
  display: flex;
  align-items: center;
  text-align: left;
}

.sec5-cta {
  display: block;
  width: min(476px, 92%);
  margin: 48px auto 64px;
  padding: 20px 20px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
}



/* --- Section 6: guide --- */
.sec6 {
  position: relative;
  z-index: 18;
  background: #4e87d3;
  margin-top: 0;
  padding: 74px 0 160px;
}

.sec6::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='24' viewBox='0 0 112 24'%3E%3Cpath fill='%234e87d3' d='M0 24V14L28 0l28 14 28-14 28 14v10z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 112px 24px;
}

.sec6-overlap {
  position: relative;
  width: 100%;
  max-width: none;
  margin: -228px 0px 0px;
  padding: 0 clamp(16px, 5vw, 64px);
  min-height: clamp(98px, 12vw, 152px);
  z-index: 3;
}

.sec6-overlap__copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  max-width: min(520px, 48%);
  min-width: 0;
  left: 18%;
  transform: translateY(clamp(-36px, -2.4vw, -42px));
}

.sec6-kicker {
  display: inline-block;
  margin: 0 0 8px 6px;
  padding: 8px 18px;
  border: 3px solid #111;
  border-radius: 999px;
  background: #fff;
  font-size: clamp(14px, 1.3vw, 22px);
  font-weight: 900;
  line-height: 1;
}

.sec6-title {
  margin: 0;
  font-size: clamp(38px, 5.3vw, 76px);
  font-weight: 900;
  color: #111;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 0 #fff;
}

.sec6-kicker-img {
  width: clamp(120px, 18vw, 320px);
  height: auto;
  margin: 0 0 6px 0;
  z-index: 4;
}

.sec6-title-img {
  width: clamp(260px, 40vw, 520px);
  max-width: 100%;
  height: auto;
  z-index: 4;
}

.sec6-people {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(130px, 20vw, 320px);
  height: auto;
  z-index: 2;
}

.sec6-panel {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(28px, 3vw, 38px) clamp(26px, 5vw, 84px);
  border: 4px solid #111;
  background: #F7EDE6;
  box-shadow: 0 2px 0 #111;
}

.sec6-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 128px;
}

.sec6-item {
  margin: 0;
}

.sec6-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  border: 3px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  padding: 0 12px;
}

.sec6-pill--image {
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 0;
  border-radius: 0;
}

.sec6-pill--image img {
  width: 100%;
  height: auto;
  display: block;
}

.sec6-num {
  width: 30px;
  height: 30px;
  border: 2px solid #111;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

.sec6-label {
  min-width: 0;
  font-size: clamp(13px, 1vw, 20px);
  font-weight: 900;
  line-height: 1.2;
}

.sec6-arrow {
  margin-left: auto;
  color: #222;
  font-size: 12px;
  line-height: 1;
}

.sec6-copy {
  padding: 0px 36px;
  font-size: clamp(11px, 0.92vw, 16px);
  line-height: 1.45;
  color: #666666;
  font-weight: 800;
}



/* --- Section 7: staff --- */
.sec7 {
  position: relative;
  z-index: auto;
  background: #fff;
  margin-top: clamp(-36px, -3vw, -18px);
  padding: clamp(92px, 10vw, 96px) clamp(16px, 5vw, 48px) clamp(140px, 12vw, 200px);
}

.sec7-head {
  position: relative;
  z-index: 30;
  text-align: center;
  margin: 0 auto clamp(28px, 4vw, 28px);
  max-width: 1148px;
}

.sec7-title-img {
  width: min(380px, 100%);
  height: auto;
  margin: 0 auto;
  top: -84px;
  position: absolute;
  z-index: 31;
}

.sec7-marquee {
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

.sec7-track {
  display: block;
}

.sec7-grid[data-loop-clone="true"] {
  display: none;
}

.sec7-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  max-width: min(1440px, 100%);
}

.sec7-card {
  margin: 0;
}

.sec7-card__photo {
  overflow: hidden;
}

.sec7-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.sec7-card__name {
  margin: 12px 0 6px;
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 900;
  line-height: 1.35;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sec7-card__role {
  display: inline;
  margin-left: 8px;
  margin-top: 0;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 900;
}

.sec7-card__text {
  margin: 0;
  font-weight: 800;
  opacity: 0.85;
  font-size: clamp(11px, 0.85vw, 13px);
  line-height: 1.65;
  color: #444;
}

/* sec7: 静的2枚レイアウト（旧5枚マーキーを置換）。PC=2列 / 768px以下=1列・スクロールなし。
   新クラス .sec7-list で自己完結（既存の .sec7-marquee/.sec7-track/.sec7-grid には触れない）。 */
.home-page .sec7-list {
  list-style: none;
  margin: 0 275px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 80px);
  max-width: 1920px;
}
.home-page .sec7-list .sec7-card__name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-weight: normal;
}
/* 769px以上：sec7 と同じ --sec7-pc-s（1920pxで=1）で余白・間隔をスケール */
@media (min-width: 769px) {
  .home-page .sec7-list {
    margin: 0 calc(275px * var(--sec7-pc-s));
    padding: 0 calc(24px * var(--sec7-pc-s));
    gap: calc(80px * var(--sec7-pc-s));
  }
}
@media (max-width: 768px) {
  .home-page .sec7-list {
    grid-template-columns: 1fr;
    margin: 0 auto;
    padding: 0 60px;
  }
}

/* --- Section 8: store + FAQ --- */
.sec8 {
  position: relative;
  z-index: 12;
  background: transparent;
  padding: 0;
  margin-top: clamp(56px, 12vw, 198px);
}

.sec8-wave {
  display: block;
  line-height: 0;
  margin-top: clamp(-20px, -2vw, -10px);
  margin-bottom: 0;
  position: relative;
}

.sec8-wave__svg {
  display: block;
  width: 100%;
  height: clamp(40px, 5.5vw, 56px);
}

.sec8-inner {
  position: relative;
  z-index: 1;
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(8px, 2vw, 20px) clamp(16px, 5vw, 48px) clamp(56px, 7vw, 96px);
  background: transparent;
}

.sec8-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #F7EB9A;
}

.sec8-store {
  background: #f4efec;
  border-radius: 40px;
  padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.4vw, 44px);
  margin-top: clamp(-356px, -22vw, -120px);
  margin-bottom: clamp(36px, 9vw, 77px);
  position: relative;
  z-index: 20;
}

.sec8-store__title {
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900;
  color: #111;
}

.sec8-store__title-picture {
  display: block;
}

.sec8-store__title-img {
  width: min(520px, 100%);
  height: auto;
  display: block;
  margin: 0 0 clamp(18px, 2.5vw, 28px);
}

.sec8-store__cols {
  display: grid;
  grid-template-columns: 1fr min(42%, 380px);
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}

.sec8-store__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.sec8-store__figures {
  min-width: 0;
}

.sec8-dl {
  margin: 0;
}

.sec8-dl__row {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: 12px 18px;
  padding: 6px 0;
  font-size: clamp(12px, 1vw, 15px);
}

.sec8-dl__row:last-child {
  border-bottom: 0;
}

.sec8-dl dt {
  margin: 0;
  font-weight: normal;
  color: #1A1A1A;
}

.sec8-dl dd {
  margin: 0;
  color: #1A1A1A;
  font-weight: 800;
}

.sec8-collage {
  position: relative;
  min-height: min(260px, 42vw);
}

.sec8-collage__building {
  width: 100%;
  height: auto;
  border: 0;
  display: block;
  position: relative;
  z-index: 5;
  left: -66px;
}

.sec8-collage__work {
  position: absolute;
  right: -2%;
  bottom: -8%;
  width: min(52%, 240px);
  height: auto;
  z-index: 6;
  border: 0;
}

.sec8-collage__woman {
  position: absolute;
  right: -34%;
  top: -52%;
  width: min(100%, 360px);
  height: auto;
  z-index: 4;
}

.sec8-btn {
  display: block;
  width: min(560px, 100%);
  margin: clamp(22px, 3vw, 32px) auto 0;
  padding: 24px 24px;
  border-radius: 999px;
  background: #FF6700;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.sec8-btn:hover {
  opacity: 0.95;
}

.sec8-faq__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 40px);
}

.sec8-faq__title {
  margin: 4px 0 0;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 900;
  color: #111;
}

.sec8-faq__title-img {
  flex: 0 0 auto;
  width: auto;
  max-width: min(280px, 42vw);
  height: auto;
  display: block;
  margin-top: 12px;
}

.sec8-faq__list {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

.sec8-details {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
  border-radius: 16px;
  overflow: hidden;
}

.sec8-summary {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  background: #EFCE70;
  color: #222;
}

.sec8-summary::-webkit-details-marker {
  display: none;
}

.sec8-summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F29318;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
}

.sec8-details[open] .sec8-summary::after {
  content: "−";
  line-height: 28px;
}

.sec8-details__body {
  padding: 14px 18px 18px;
  background: #F7EDE6;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.65;
  color: #666666;
}

.sec8-details__body p {
  margin: 0;
}

.sec8-faq>.sec8-btn {
  margin-top: clamp(24px, 4vw, 36px);
}



/* --- Section 9: contact / payment / shipping --- */
.sec9 {
  position: relative;
  z-index: 13;
  overflow: visible;
  background: #F7D172;
  padding: 79px 48px 48px;
}

.sec9-inner {
  width: min(1320px, 100%);
  margin: 0 auto;
}

.sec9-wave {
  display: block;
  line-height: 0;
  width: 100%;
  background-color: #fff;
}

.sec9-wave__svg {
  display: block;
  width: 100%;
  height: clamp(34px, 5vw, 56px);
}

.sec9-wave:not(:has(.sec9-wave__svg)) {
  height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='56' viewBox='0 0 53 56'%3E%3Crect width='53' height='56' fill='%23fff'/%3E%3Cpath fill='%23F7D172' shape-rendering='crispEdges' d='M0 56V36L26.5 16L53 36V56H0z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: calc(100vw / 35) 56px;
  background-position: top left;
}

.sec9-contact {
  position: relative;
  margin-bottom: clamp(28px, 4vw, 48px);
  overflow: visible;
}

.sec9-contact__hero,
.sec9-contact__woman-wrap {
  display: contents;
}

.sec9-contact__woman {
  position: absolute;
  left: -142px;
  bottom: calc(100% - 76px);
  top: -320px;
  width: 600px;
  height: auto;
  max-width: none;
  margin: 0;
  transform: none;
  z-index: 2;
  pointer-events: none;
}

.sec9-contact picture {
  display: block;
  position: absolute;
  left: 156px;
  bottom: calc(100% - 76px);
  top: -76px;
  width: 568px;
  max-width: calc(100% - 300px);
  margin: 0;
  z-index: 3;
  pointer-events: none;
}

.sec9-contact__panel {
  position: relative;
  z-index: 1;
  background: #F7EDE6;
  border-radius: 36px;
  padding: 126px 40px 44px;
}

.sec9-contact__title {
  position: static;
  left: auto;
  top: auto;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
}

.sec9-contact__main {
  padding-top: 0;
}

.sec9-contact__lead {
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 900;
  color: #111;
}

.sec9-contact__cols {
  display: grid;
  width: 80%;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 36px);
  margin-bottom: clamp(22px, 3vw, 34px);
}

.sec9-bullets {
  margin: 0;
  padding: 0 0 0 1.15em;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.75;
  color: #222;
}

.sec9-bullets li {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: medium;
}

.sec9-contact__actions {
  width: 96%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 18px);
}

.sec9-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 76px;
  padding: 24px 14px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 800;
  box-sizing: border-box;
}

.sec9-action img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.sec9-action--phone {
  background: #fff;
  color: #111;
  align-items: flex-start;
}

.sec9-action--phone img {
  width: 24px;
  height: 24px;
  margin-top: 8px;
}

.sec9-action__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  min-width: 0;
}

.sec9-action__main {
  font-size: clamp(17px, 2vw, 36px);
  font-weight: 900;
  line-height: 1.1;
}

.sec9-action__sub {
  font-size: 14px;
  font-weight: 700;
}

.sec9-action--line {
  background: #00c300;
  color: #fff !important;
  border-color: #009b00;
}

.sec9-action--mail {
  background: #d8001a;
  color: #fff !important;
  border-color: #a50014;
}

.sec9-action--line .sec9-action__label,
.sec9-action--mail .sec9-action__label,
.home-page .sec9-action--line,
.home-page .sec9-action--mail,
.home-page .sec9-action--line .sec9-action__label,
.home-page .sec9-action--mail .sec9-action__label,
.product-detail-page .sec9-action--line,
.product-detail-page .sec9-action--mail,
.product-detail-page .sec9-action--line .sec9-action__label,
.product-detail-page .sec9-action--mail .sec9-action__label {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.sec9-action__label {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 2px;
}

.sec9-sub {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1.16fr) minmax(0, 0.78fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: stretch;
  justify-items: stretch;
}

.sec9-sub>.sec9-ship-aside {
  width: 100%;
  min-width: 0;
}

.sec9-sub>.sec9-card {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sec9-sub>.sec9-card--pay .sec9-card__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sec9-ship-aside {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  min-width: 0;
  height: 100%;
}

.sec9-ship-aside__staff {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: scale(1.4);
  transform-origin: 50% 100%;
  position: relative;
  left: 34px;
  bottom: -48px;
}

.sec9-ship-aside__vertical {
  margin: 0;
  writing-mode: vertical-rl;
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 900;
  color: #111;
  letter-spacing: 0.18em;
  line-height: 1.2;
  padding-bottom: clamp(4px, 0.8vw, 10px);
}

.sec9-card {
  --sec9-orange: #FF6700;
  --sec9-peach: #FF9B64;
  position: relative;
  background: #fff;
  border-radius: clamp(22px, 2.6vw, 32px);
  padding-bottom: clamp(24px, 3vw, 36px);
  overflow: visible;
}

.sec9-card--pay {
  overflow: hidden;
}

.sec9-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 12px;
  padding: 16px 56px;
  background: var(--sec9-orange);
  border-radius: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px) 0 0;
}

.sec9-card__head-main {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 900;
  font-size: clamp(15px, 1.4vw, 24px);
  letter-spacing: 0.02em;
}

.sec9-card__head-pill {
  display: inline-block;
  box-sizing: border-box;
  background: #fff;
  color: var(--sec9-orange) !important;
  -webkit-text-fill-color: var(--sec9-orange) !important;
  font-weight: 800;
  font-size: clamp(11px, 0.92vw, 18px);
  line-height: 1.35;
  padding: 10px 14px;
  border-radius: 2px;
  overflow: visible;
}

.sec9-pay-list {
  list-style: none;
  margin: clamp(18px, 2.2vw, 26px) clamp(22px, 3vw, 56px) 0;
  padding: 0;
  counter-reset: sec9pay;
}

.sec9-pay-list li {
  counter-increment: sec9pay;
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
  font-size: clamp(13px, 1.12vw, 24px);
  font-weight: 900;
  color: #222;
}

.sec9-pay-list li::before {
  content: counter(sec9pay);
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: #ff9b64;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  line-height: 38px;
  text-align: center;
}

.sec9-card__logos {
  display: block;
  width: min(380px, 88%);
  height: auto;
  margin: clamp(10px, 1.5vw, 10px) auto clamp(10px, 1.8vw, 24px);
}

.sec9-card__btn {
  position: relative;
  z-index: 4;
  display: block;
  width: min(320px, 92%);
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(18px, 2.5vw, 28px);
  margin-bottom: 0;
  padding: 14px 24px;
  text-align: center;
  border-radius: 999px;
  background: var(--sec9-peach);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  font-size: 15px;
  border: 0;
}

.sec9-sub>.sec9-card .sec9-card__btn {
  flex-shrink: 0;
  margin-top: auto;
}

.sec9-card--ship .sec9-card__body {
  text-align: center;
  margin: clamp(18px, 2.2vw, 26px) clamp(22px, 3vw, 56px) 0;
}

.sec9-sub>.sec9-card--ship .sec9-card__body {
  flex: 1 1 auto;
  min-height: 0;
}


.sec9-ship__lead {
  margin: 0 0 14px;
  color: var(--sec9-orange) !important;
  -webkit-text-fill-color: var(--sec9-orange) !important;
  font-weight: 900;
  font-size: clamp(14px, 1.12vw, 24px);
  line-height: 1.6;
  text-align: left;
}

/* Scope: ONLY the free-shipping lead inside the ship card (MT body* black). */
.sec9-card--ship .sec9-ship__lead {
  color: #ff6700 !important;
  -webkit-text-fill-color: #ff6700 !important;
}

.sec9-ship__note {
  margin: 0 0 14px;
  font-size: clamp(11px, 0.88vw, 16px);
  line-height: 1.7;
  color: #222;
  text-align: left;
  font-weight: 800;
}

.sec9-ship__ems {
  margin: 0;
  color: var(--sec9-orange);
  font-weight: 900;
  font-size: clamp(12px, 1.12vw, 24px);
  line-height: 1.6;
  text-align: left;
}

/* --- Footer --- */
.site-footer {
  position: relative;
  z-index: 2;
  background: #FF6700;
  color: #fff;
  padding: 72px 48px 128px;
}

.site-footer__inner {
  max-width: min(1440px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(16px, 2.4vw, 44px);
  align-items: start;
}

.site-footer__logo {
  width: min(360px, 100%);
  height: auto;
  margin: 0 0 24px;
}

.site-footer__company {
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 22px;
}

.site-footer__address,
.site-footer__tel {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.site-footer__title {
  margin: 0 0 12px;
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.site-footer__title--section {
  margin: 0 0 8px;
  font-size: 20px;
}

.site-footer__lead {
  margin: 0 0 8px;
}

.site-footer__leadlink {
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.35;
  opacity: 0.98;
}

.site-footer__leadlink:hover {
  text-decoration: underline;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li {
  margin: 0 0 8px;
}

.site-footer__list a {
  color: #fff;
  text-decoration: none;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 700;
  opacity: 0.92;
}

.site-footer__list--dash li {
  position: relative;
  padding-left: 1.05em;
  margin: 0 0 clamp(6px, 0.9vw, 10px);
}

.site-footer__list--dash li::before {
  content: '-';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  opacity: 0.95;
}

.site-footer__list--dash a {
  font-size: 14px;
  font-weight: 800;
}

.site-footer__list--corp li {
  margin: 0 0 8px;
}

.site-footer__list--corp a {
  font-size: 16px;
  font-weight: 900;
}

.site-footer__list a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* --- Guide: ご注文から到着までの流れ (PC) --- */
.guide-flow-page {
  position: relative;
  background: #fff;
}

.guide-flow-main {
  position: relative;
  z-index: 4;
}

/* Maker Town's `body *` sets a Helvetica-first font stack, which changes the
   look/width of Latin text (STEP labels, "AI / PSD / PDF", etc.). Our class
   selector out-specifies MT's `body *`, restoring the design font across the
   whole guide-flow content. */
.guide-flow-main * {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
}

.guide-flow-inner {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
}

/* Same yellow band height on all guide pages (title image heights differ) */
.guide-flow-hero,
.guide-hero {
  background: #efce0a;
  padding: 130px 0 48px;
  min-height: 400px;
}

.guide-flow-hero .guide-flow-inner {
  padding: 30px 36px;
}

.guide-hero .guide-flow-inner {
  padding: 30px 36px;
}

.guide-flow-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.guide-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.guide-flow-hero__kicker {
  width: min(280px, 52%);
  height: auto;
}

.guide-hero__kicker {
  width: min(280px, 52%);
  height: auto;
}

.guide-flow-hero__title-img-wrap {
  margin: 0;
}

.guide-hero__title-img-wrap {
  margin: 0;
}

.guide-flow-hero__title-img-wrap img {
  width: min(780px, 88%);
  height: auto;
}

.guide-design-tool-page .guide-hero__title-img-wrap img {
  width: min(756px, 92%);
  height: auto;
}

.guide-data-submission-page .guide-hero__title-img-wrap img {
  width: min(756px, 90%);
  height: auto;
}

.guide-print-method-page .guide-hero__title-img-wrap img {
  width: min(640px, 88%);
  height: auto;
}

.guide-design-tool-page {
  position: relative;
  background: #fff;
}

.guide-design-tool-main {
  position: relative;
  z-index: 4;
}

.guide-print-method-page {
  position: relative;
  background: #fff;
}

.guide-print-method-main {
  position: relative;
  z-index: 4;
}

.print-method-intro {
  padding: 72px 0 48px;
  background: #fff;
}

.print-method-intro__inner {
  padding-inline: 0;
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

.print-method-intro__lead {
  margin: 0 auto 72px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  color: #666666;
}

.print-method-inkjet {
  padding: 24px 0 96px;
  background: #fff;
}

.print-method-inkjet__inner {
  padding-inline: 0;
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

.print-method-inkjet__page-title {
  margin: 0 0 28px;
  line-height: 0;
}

.print-method-inkjet__page-title-img {
  display: block;
  width: min(360px, 100%);
  height: auto;
}

.print-method-inkjet__subheading {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.print-method-inkjet__body {
  margin: 0 0 64px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  color: #666666;
}

.print-method-inkjet__body p {
  margin: 0 0 1em;
}

.print-method-inkjet__body p:last-child {
  margin-bottom: 0;
}

.print-method-inkjet__features {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(1168px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px;
}

.print-method-feature {
  text-align: left;
}

.print-method-feature__icon {
  margin: 0 0 32px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.print-method-feature__icon img {
  display: inline-block;
  width: auto;
  max-width: min(160px, 88%);
  height: auto;
}

.print-method-feature__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
  text-align: center;
}

.print-method-feature__text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.75;
  color: #666666;
}

.print-method-inkjet__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: min(1168px, 100%);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.print-method-inkjet__photos li {
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  line-height: 0;
}

.print-method-inkjet__photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 537;
  object-fit: cover;
}

.print-method-embroidery {
  padding: 24px 0 96px;
  /* border-top: 8px solid #f0f0f0; */
  background: #fff;
}

.print-method-embroidery__inner {
  padding-inline: 0;
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

.print-method-embroidery__title {
  margin: 0 0 28px;
  line-height: 0;
}

.print-method-embroidery__title-img {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
}

.print-method-embroidery__lead {
  margin: 0 0 64px;
  color: #666666;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
}

.print-method-embroidery__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: min(1168px, 100%);
  margin: 0 auto 14px;
  padding: 0;
  list-style: none;
}

.print-method-embroidery__photos li {
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  line-height: 0;
}

.print-method-embroidery__photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 537;
  object-fit: cover;
}

.print-method-embroidery__notes {
  color: #e92b2b;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.print-method-embroidery__notes p {
  margin: 0;
}

.print-method-finish {
  padding: 72px 0 96px;
  background: #ffffff;
}

.print-method-finish__inner {
  padding: 0 36px;
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

.print-method-finish__title {
  margin: 0 0 28px;
  line-height: 0;
}

.print-method-finish__title-img {
  display: block;
  width: min(516px, 100%);
  padding: 24px;
  height: auto;
}

.print-method-finish__card {
  background: #fff;
  border-radius: 16px;
}

.print-method-finish__card+.print-method-finish__card {
  margin-top: 28px;
}

.print-method-finish__lead {
  margin: 0 0 16px;
  padding-inline: 8px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.85;
  color: #111;
}

.print-method-finish__text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.85;
  color: #666666;
  margin: 0 0 24px;
}

.print-method-finish__text p {
  margin: 0;
}

.print-method-finish__note {
  margin-top: 1em;
}

.print-method-finish__subheading {
  margin: 0 0 16px;
  padding-inline: 8px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.print-method-finish__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.print-method-finish__media-img {
  flex: 0 1 auto;
  width: auto;
  height: auto;
  padding: 48px;
}

.guide-data-submission-page {
  position: relative;
  background: #fff;
}

.guide-data-submission-main {
  position: relative;
  z-index: 4;
}

.data-submission-guide {
  padding: 72px 0 96px;
  background: #fff;
}

.data-submission-guide__inner {
  padding: 0 36px;
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

.data-submission-guide__intro {
  margin: 0 0 72px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  color: #666666;
}

.data-submission-guide__intro p {
  margin: 0;
}

.data-submission-guide__intro p:last-child {
  margin-bottom: 0;
}

.data-submission-guide__note {
  margin-top: 0.25em;
}

.data-submission-guide__block {
  margin: 0 0 64px;
}

.data-submission-guide__block:last-child {
  margin-bottom: 0;
}

.data-submission-guide__heading {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.data-submission-guide__body {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  color: #666666;
}

.data-submission-guide__body p {
  margin: 0;
}

.data-submission-guide__body p:last-child {
  margin-bottom: 0;
}

.data-submission-guide__warning-lead {
  color: #ff0000;
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 8px !important;
}

.data-submission-guide__file-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px 24px;
}

.data-submission-guide__file-type-img {
  flex: 0 1 auto;
  width: auto;
  max-width: min(156px, 100%);
  height: auto;
}

.data-submission-caution {
  padding: 56px 0 88px;
  background: #efefef;
}

.data-submission-caution__inner {
  padding: 0 36px;
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

.data-submission-caution__title {
  margin: 0 0 28px;
  line-height: 0;
}

.data-submission-caution__title-img {
  display: block;
  width: min(480px, 100%);
  padding: 24px;
  height: auto;
}

.data-submission-caution__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.data-submission-caution__card {
  background: #fff;
  border-radius: 16px;
  padding: 48px 64px;
}

.data-submission-caution__card-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.data-submission-caution__card-text {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  color: #666666;
}

.data-submission-caution__media {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.data-submission-caution__media-img {
  flex: 0 1 auto;
  width: auto;
  max-width: min(628px, 100%);
  height: auto;
  padding: 24px 16px;
}

.data-submission-spec {
  padding: 0 0 96px;
  background: #fff;
}

.data-submission-spec__inner {
  padding: 0 36px;
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

.data-submission-spec__title {
  margin: 0 0 20px;
  line-height: 0;
}

.data-submission-spec__title-img {
  display: block;
  width: min(576px, 100%);
  height: auto;
}

.data-submission-spec__lead {
  margin: 0 0 40px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  color: #666666;
}

.data-submission-spec__chapter {
  margin: 0 0 56px;
}

.data-submission-spec__chapter:last-child {
  margin-bottom: 0;
}

.data-submission-spec__chapter-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}


.data-submission-spec__row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 20px 28px;
  align-items: start;
  padding: 22px 0;
}

.data-submission-spec__pill {
  align-self: start;
  background: #e8e8e8;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
  text-align: center;
}

.data-submission-spec__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.85;
  color: #666666;
}

.data-submission-spec__bullets li {
  position: relative;
  padding-left: 1.1em;
  margin: 0 0 0.45em;
}

.data-submission-spec__bullets li:last-child {
  margin-bottom: 0;
}

.data-submission-spec__bullets li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: #666666;
}

.data-submission-spec__emph {
  color: #e60012;
  font-weight: 900;
}

.data-submission-spec__li--emph {
  color: #e60012;
  font-weight: 900;
}

.data-submission-spec__li--emph::before {
  color: #e60012;
}

.data-submission-spec__link {
  color: #036eb8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-submission-spec__link:hover {
  filter: brightness(1.06);
}

.data-submission-print-method {
  padding: 72px 0 96px;
  background: #efefef;
}

.data-submission-print-method__inner {
  padding: 0 36px;
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

.data-submission-print-method__title {
  margin: 0 0 20px;
  line-height: 0;
}

.data-submission-print-method__title-img {
  display: block;
  width: min(548px, 100%);
  height: auto;
  padding-inline: 16px;
}

.data-submission-print-method__lead {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  color: #666666;
}


.data-submission-print-method__row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 20px 28px;
  align-items: start;
  padding: 22px 16px;
}

.data-submission-print-method__pill {
  align-self: start;
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
  text-align: center;
}

.data-submission-print-method__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.85;
  color: #666666;
}

.data-submission-print-method__bullets li {
  position: relative;
  padding-left: 1.1em;
  margin: 0 0 0.45em;
}

.data-submission-print-method__bullets li:last-child {
  margin-bottom: 0;
}

.data-submission-print-method__bullets li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: #666666;
}

.guide-design-tool-nav {
  background: #fff;
  padding: 72px 0 48px;
}


.guide-design-tool-nav__lead {
  margin: 0 0 48px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  color: #666666;
}

.guide-design-tool-nav__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.guide-design-tool-nav__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 18px 18px;
  border: 2px solid #231815;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  text-align: center;
}

.guide-design-tool-nav__card::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #efce0a;
  font-weight: 900;
}

.guide-design-tool-nav__card:hover {
  filter: brightness(0.99);
}

.design-simulator {
  background: #fff;
  padding: 16px 0 84px;
}

.design-simulator__inner {
  padding: 0;
}

.design-simulator__title {
  margin: 0 0 34px;
  line-height: 0;
  text-align: left;
}

.design-simulator__title-img {
  display: block;
  width: min(640px, 100%);
  height: auto;
}

.design-simulator__block {
  padding: 0 0 64px;
  margin: 0 0 64px;
}

.design-simulator__block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.design-simulator__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 34px;
}

.design-simulator__head-left {
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 0;
}

.design-simulator__head-icon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  flex-shrink: 0;
}

.design-simulator__head-title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: #111;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.design-simulator__desc {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: #666666;
}

.design-simulator__screen {
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  padding: 22px;
}

.design-simulator__screen img {
  display: block;
  width: 100%;
  height: auto;
}

.design-simulator__screen--phone img {
  width: min(520px, 100%);
  margin: 0 auto;
}

.text-guide {
  background: #efefef;
  padding: 56px 0 88px;
}

.text-guide__inner {
  padding: 0 36px;
}

.text-guide__title {
  margin: 0 0 28px;
  line-height: 0;
}

.text-guide__title-img {
  display: block;
  width: min(320px, 100%);
  padding: 24px;
  height: auto;
}

.text-guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.text-guide__card {
  background: #fff;
  border-radius: 16px;
  padding: 48px 64px;
}

.text-guide__card-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.text-guide__card-text {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: #666666;
}

.text-guide__media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.text-guide__media-img {
  flex: 0 1 auto;
  width: auto;
  max-width: 30%;
  height: auto;
}

.text-guide__list>.text-guide__card:nth-child(1) .text-guide__media-img:nth-child(2) {
  max-width: 14%;
}

.text-guide__list>.text-guide__card:nth-child(2) .text-guide__media-img:nth-child(1) {
  max-width: 20%;
}

.transform-guide {
  background: #ffffff;
  padding: 56px 0 88px;
}

.transform-guide__inner {
  padding: 0 36px;
}

.transform-guide__title {
  margin: 0 0 28px;
  line-height: 0;
}

.transform-guide__title-img {
  display: block;
  width: min(320px, 100%);
  padding: 24px;
  height: auto;
}

.transform-guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.transform-guide__card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 0;
}

.transform-guide__card-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.transform-guide__card-text {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: #666666;
}

.transform-guide__media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.transform-guide__media-img {
  flex: 0 1 auto;
  width: auto;
  max-width: min(956px, 100%);
  height: auto;
  margin: 0 auto;
}

.image-guide {
  background: #efefef;
  padding: 56px 0 88px;
}

.image-guide__inner {
  padding: 0 36px;
}

.image-guide__title {
  margin: 0 0 28px;
  line-height: 0;
}

.image-guide__title-img {
  display: block;
  width: min(620px, 100%);
  padding: 24px;
  height: auto;
}

.image-guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.image-guide__card {
  background: #fff;
  border-radius: 16px;
  padding: 48px 64px;
}

.image-guide__card-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.image-guide__card-text {
  display: flex;
  flex-direction: column;
  gap: 1.75em;
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: #666666;
}

.image-guide__card-text p {
  margin: 0;
}

.image-guide__notes {
  margin-top: 1.25em;
}

.image-guide__in-page-link {
  color: #036eb8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.image-guide__in-page-link:hover {
  filter: brightness(1.06);
}

.image-guide__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.image-guide__media-img {
  flex: 0 1 auto;
  width: auto;
  max-width: min(956px, 100%);
  height: auto;
}

img[src="https://print-world.jp/resource/a5cf2a20c446ff4403d6b232e8b9d01784079427"] {
  max-width: min(756px, 100%);
}

.image-guide__media--file-types {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

.image-guide__file-type-img {
  flex: 0 1 auto;
  width: auto;
  max-width: min(156px, 100%);
  height: auto;
}

.stamp-guide {
  background: #fff;
  padding: 56px 0 88px;
}

.stamp-guide__inner {
  padding: 0 36px;
}

.stamp-guide__title {
  margin: 0 0 28px;
  line-height: 0;
}

.stamp-guide__title-img {
  display: block;
  width: min(320px, 100%);
  padding: 24px;
  height: auto;
}

.stamp-guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.stamp-guide__card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 0;
}

.stamp-guide__card-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.stamp-guide__card-text {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: #666666;
}

.stamp-guide__notes {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: #666666;
}

.stamp-guide__media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}

.stamp-guide__media-img {
  flex: 0 1 auto;
  width: auto;
  max-width: min(480px, calc(50% - 12px));
  height: auto;
}

.save-guide {
  background: #efefef;
  padding: 56px 0 88px;
}

.save-guide__inner {
  padding: 0 36px;
}

.save-guide__title {
  margin: 0 0 28px;
  line-height: 0;
}

.save-guide__title-img {
  display: block;
  width: min(476px, 100%);
  padding: 24px;
  height: auto;
}

.save-guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.save-guide__card {
  background: #fff;
  border-radius: 16px;
  padding: 48px 64px;
}

.save-guide__card-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.save-guide__card-text {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: #666666;
}

.save-guide__card-text p {
  margin: 0;
}

.save-guide__card-text p:last-child {
  margin-bottom: 0;
}

.save-guide__aside {
  margin-top: 0.5em;
}

.save-guide__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.save-guide__media-img {
  flex: 0 1 auto;
  width: auto;
  max-width: min(956px, 100%);
  height: auto;
}

.guide-flow-steps {
  padding: 72px 0 48px;
  background: #fff;
}

.guide-flow-steps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.guide-flow-steps__card {
  --guide-step-badge: 44px;
  --guide-card-border: 2px;
  --guide-card-position: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: var(--guide-card-border) solid #111;
  border-radius: 20px;
  padding-block: 52px 44px;
  padding-inline: 36px;
  background: #fff;
  overflow: visible;
}

.guide-flow-steps__num {
  position: absolute;
  top: calc(-1 * var(--guide-card-border));
  left: calc(2 * var(--guide-card-position));
  z-index: 2;
  /* !important: Maker Town overrides background/color on embedded content;
     these keep the black circle + white number in the MT environment. */
  width: var(--guide-step-badge) !important;
  height: var(--guide-step-badge) !important;
  border-radius: 50% !important;
  background: #111 !important;
  color: #fff !important;
  font-weight: 900;
  font-size: 19px;
  line-height: var(--guide-step-badge) !important;
  text-align: center;
  transform: translate(-50%, -50%);
}

.guide-flow-steps__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  object-fit: contain;
  flex-shrink: 0;
}

.guide-flow-steps__heading {
  width: 100%;
  margin-top: 16px;
  padding: 0px 12px;
  font-size: 18px;
  font-weight: 900;
  color: #111;
  text-align: center;
}

.guide-flow-steps__text {
  width: 100%;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  color: #666666;
  text-align: left;
}

.guide-flow-steps__notes {
  margin-top: 28px;
}

.guide-flow-steps__notes p {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  color: #666666;
}

/* --- Guide: デザインを作成する場合の注文の流れ (PC) --- */
.guide-design-flow {
  --guide-design-flow-card-inner-h: 376px;
  background: #fff;
  padding: 0 0 64px;
}

.guide-design-flow__panel {
  padding: 48px 40px 56px;
}

.guide-design-flow__text,
.guide-template-flow__text,
.guide-post-submission-flow__text {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Guide: 後入稿サービス利用の場合 --- */
.guide-post-submission-flow {
  background: #fff;
  padding: 56px 0 64px;
}

.guide-post-submission-flow__panel {
  padding: 48px 40px 56px;
}

.guide-post-submission-flow__page-title {
  margin: 0 0 48px;
  line-height: 0;
  text-align: center;
}

.guide-post-submission-flow__title-img {
  display: block;
  max-width: 100%;
  width: min(460px, 100%);
  height: auto;
  margin: 0 auto;
}

/* --- Guide: デザインテンプレート利用の場合 --- */
.guide-template-flow {
  background: #efefef !important; /* MT strips backgrounds; keep the gray band */
  padding: 56px 0 64px;
}

/* MT paints every element white; inside this gray section force all inner
   containers transparent so the gray shows through. The white image card is
   re-asserted with !important below. */
.guide-template-flow * {
  background-color: transparent !important;
}

.guide-template-flow__panel {
  padding: 48px 40px 56px;
}

.guide-template-flow__page-title {
  margin: 0 0 48px;
  line-height: 0;
  text-align: center;
}

.guide-template-flow__title-img {
  display: block;
  max-width: 100%;
  width: min(540px, 100%);
  height: auto;
  margin: 0 auto;
}

.guide-design-flow__page-title {
  margin: 0 0 48px;
  line-height: 0;
  text-align: center;
}

.guide-design-flow__title-img {
  display: block;
  max-width: 100%;
  width: min(460px, 100%);
  height: auto;
  margin: 0 auto;
}

.guide-design-flow__list,
.guide-template-flow__list,
.guide-post-submission-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-design-flow__row,
.guide-template-flow__row,
.guide-post-submission-flow__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 96px;
  align-items: start;
  padding-bottom: 28px;
  margin-bottom: 28px;
}

.guide-design-flow__row:last-child {
  padding-bottom: 0;
  margin: 0 auto;
  border-bottom: none;
  width: 68%;
  gap: 32px;
}

.guide-template-flow__row:last-child,
.guide-post-submission-flow__row:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.guide-design-flow__heading,
.guide-template-flow__heading,
.guide-post-submission-flow__heading {
  margin: 0;
  padding-block: 28px 20px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
}

.guide-design-flow__step-label,
.guide-template-flow__step-label,
.guide-post-submission-flow__step-label {
  color: #036eb8 !important; /* MT forces color:#000; keep the blue STEP label */
  margin-right: 0.4em;
}

.guide-design-flow__title-text,
.guide-template-flow__title-text,
.guide-post-submission-flow__title-text {
  color: #111;
}

.guide-design-flow__body,
.guide-template-flow__body,
.guide-post-submission-flow__body {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
  color: #666666;
}

.guide-design-flow__body p,
.guide-template-flow__body p,
.guide-post-submission-flow__body p {
  margin: 0;
}


.guide-design-flow__body p:last-child,
.guide-template-flow__body p:last-child,
.guide-post-submission-flow__body p:last-child {
  margin-bottom: 0;
}

.guide-design-flow__note {
  font-size: 14px;
  line-height: 1.7;
}

.guide-design-flow__note--strong {
  margin-bottom: 0.35em;
  font-weight: 900;
}

.guide-design-flow__link,
.guide-template-flow__link,
.guide-post-submission-flow__link {
  color: #3b6dbb !important; /* MT forces color:#000; keep guide links blue */
  text-decoration: underline;
}

.guide-design-flow__link:hover,
.guide-template-flow__link:hover,
.guide-post-submission-flow__link:hover {
  text-decoration: underline;
}

.guide-design-flow__shot,
.guide-template-flow__shot,
.guide-post-submission-flow__shot {
  width: 100%;
  box-sizing: border-box;
  justify-self: stretch;
}

/* STEP 06: wide text + plain photo (no card frame), ~60% / ~40% */
.guide-design-flow__row--finale {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
}

.guide-design-flow__shot--plain {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.guide-design-flow__media-img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
}

.guide-design-flow__card,
.guide-template-flow__card,
.guide-post-submission-flow__card {
  box-sizing: border-box;
  padding: 24px;
  border: 2px solid #231815;
  border-radius: 12px;
  background: #fff !important; /* keep white card over MT/section reset */
}

.guide-design-flow__card-inner,
.guide-template-flow__card-inner,
.guide-post-submission-flow__card-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--guide-design-flow-card-inner-h);
  min-height: var(--guide-design-flow-card-inner-h);
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
}

.guide-design-flow__card-inner img,
.guide-template-flow__card-inner img,
.guide-post-submission-flow__card-inner img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  object-fit: contain;
}

.guide-design-flow__shot--cta {
  align-self: stretch;
}

.guide-design-flow__cta-stack {
  box-sizing: border-box;
  width: 100%;
  padding: 48px 24px;
  border-radius: 14px;
  background: #e8e8e8 !important; /* MT strips backgrounds; keep gray panel */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.guide-design-flow__cta-card {
  margin: 0 auto;
  width: 78%;
  padding: 28px 22px 32px;
  border-radius: 12px;
  background: #fff !important; /* MT strips backgrounds; keep white card */
  text-align: center;
}

.guide-design-flow__cta-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.guide-design-flow__cta-btn {
  display: inline-block;
  min-width: 64%;
  padding: 14px 24px;
  border-radius: 8px;
  background: #036eb8 !important; /* MT strips button background */
  color: #fff !important;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.guide-design-flow__cta-btn:hover {
  filter: brightness(1.06);
}

.guide-flow-order3 {
  padding: 0 0 36px;
  background: #fff;
}

.guide-flow-order3__inner {
  position: relative;
  background: #ececec !important; /* MT strips backgrounds on embedded content */
  border-radius: 24px;
  padding: 68px 40px 24px;
}

.guide-flow-order3__title-wrap {
  display: flex;
  margin: 0 164px 76px;
  /* MT's `body * { background-color:#fff !important }` paints this wrapper
     white behind the transparent title PNG; force it back to transparent. */
  background-color: transparent !important;
}

.guide-flow-order3__title-wrap img {
  width: min(560px, 92%);
  height: auto;
}

.guide-flow-order3__staff {
  position: absolute;
  left: 62%;
  top: -52px;
  transform: translateX(-50%);
  width: 340px;
  height: auto;
  pointer-events: none;
  z-index: 2;
  /* MT paints a white background behind embedded <img>; keep this transparent
     PNG see-through so it doesn't cover the title behind it. */
  background: transparent !important;
}

/* MT paints white behind every embedded <img>. Force all guide-flow content
   images transparent so transparent PNGs (title/staff/etc.) show the real
   background instead of a white rectangle. Scoped to our content only. */
.guide-flow-main img {
  background: transparent !important;
}

.guide-flow-order3__cards {
  position: relative;
  top: -17px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  /* MT paints this grid white; keep it transparent so the gray panel shows
     through the gaps between cards. */
  background-color: transparent !important;
}

.guide-flow-order3__card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 24px 20px 24px;
  /* Design shows white cards on the gray panel. !important so MT can't
     strip the white background. */
  background: #fff !important;
  border-radius: 16px;
  border: 1px solid #ddd;
}

.guide-flow-order3__card-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 900;
  color: #111;
  text-align: center;
  line-height: 1.45;
}

.guide-flow-order3__card-text {
  margin: 0 0 18px;
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.65;
  color: #666666;
}

.guide-flow-order3__btn {
  display: block !important;
  margin-top: auto;
  padding: 14px 16px !important;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  color: #fff !important;
  background: #3b6dbb !important; /* MT strips button background/padding */
  border-radius: 8px !important;
}

.guide-flow-order3__btn:hover {
  filter: brightness(1.05);
}

/* --- Product list & detail (PC) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.product-list-page,
.product-detail-page {
  position: relative;
  background: #fff;
}

.product-list-page {
  --plp-header-bg: #efce0a;
}

.product-detail-page {
  --pdp-header-bg: #efce0a;
}

.plp-main,
.pdp-main {
  position: relative;
  z-index: 4;
}

.plp-inner,
.pdp-inner {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
}

/* Hero bands */
.plp-hero {
  background-color: var(--plp-header-bg, #efce0a);
  padding: 240px 29px 80px 0;
  text-align: left;
}

.pdp-hero {
  background: var(--pdp-header-bg, #efce0a);
  padding: 200px 0 48px;
}

.plp-hero__inner {
  padding: 0 29px 0 29px;
}

.pdp-hero__inner {
  padding: 24px 24px 8px;
}

.plp-hero__title {
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0.5em;
  font-weight: 900;
  line-height: 1.05;
  color: #111;
}

.plp-hero__title-sm {
  font-size: clamp(23px, 3.2vw, 47px);
  letter-spacing: 0em;
}

.plp-hero__title-lg {
  font-size: clamp(43px, 6.2vw, 91px);
  letter-spacing: 0;
}

.pdp-hero__title {
  margin: 0;
  font-size: clamp(32px, 3.2vw, 52px);
  font-weight: 900;
  line-height: 1.2;
  color: #111;
  letter-spacing: 0.02em;
}

/* Intro copy */
.plp-intro {
  background: #fff;
  padding: 28px 0 32px;
}

.plp-intro__inner {
  /* text-align: center; */
}

.plp-intro__catch {
  margin: 0 32px;
  max-width: none;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 1000;
  line-height: 1.55;
  color: #111;
}

.plp-intro__body {
  margin: 20px 35px 0;
  max-width: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.85;
  color: #555;
}

/* Ranking panel */
.plp-ranking {
  background: #fff;
  padding: 28px 0 40px;
}

.plp-ranking__outer {
  position: relative;
}

.plp-ranking__panel {
  position: relative;
  border-radius: 16px;
  background: #fcf6c7;
  overflow: visible;
  box-shadow: none;
  padding-top: 40px;
}

.plp-ranking__banner-row {
  position: absolute;
  top: 0;
  left: 0;
  /* right: 0; */
  z-index: 3;
  /* display: flex; */
  /* justify-content: center; */
  padding: 0 40px;
  box-sizing: border-box;
  transform: translateY(-50%);
  pointer-events: none;
}

.plp-ranking__banner {
  position: relative;
  top: auto;
  display: table;
  width: fit-content;
  max-width: calc(100% - 30px);
  margin: 0 auto;
  padding: 17px 58px;
  background: #f15a24;
  border-radius: 999px;
  transform: none;
  pointer-events: auto;
}

.plp-ranking__banner-title {
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  color: #fff;
  font-weight: 900;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.plp-ranking__banner-part {
  display: inline;
}

.plp-ranking__banner-part + .plp-ranking__banner-part {
  font-size: calc(1em + 6px);
}

.plp-ranking__banner-crown {
  display: inline-flex;
  align-items: center;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.4em;
  color: #fff;
  vertical-align: -0.2em;
}
.plp-ranking__banner-crown svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* banner text always white (robust on MT too) */
.plp-ranking__banner-title,
.plp-ranking__banner-title .plp-ranking__banner-part {
  color: #fff !important;
}

.plp-ranking__slider {
  position: relative;
  padding: 8px 56px 24px;
}

.plp-ranking__viewport {
  container-type: inline-size;
  container-name: plp-ranking-viewport;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.plp-ranking__viewport::-webkit-scrollbar {
  display: none;
}

.plp-ranking__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  width: max-content;
  padding: 32px 4px 16px;
}

.plp-ranking__track .product-card {
  container-type: inline-size;
  container-name: plp-rank-card;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  /* 768–1919: fixed 1920 card size (do not shrink with cqw). 1920+ uses fluid 3-up below. */
  flex: 0 0 488px;
  width: 488px;
  min-width: 488px;
  max-width: 488px;
  scroll-snap-align: start;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
}

@media (min-width: 1920px) {
  .plp-ranking__track .product-card {
    flex: 0 0 calc((100cqw - 32px) / 3);
    width: calc((100cqw - 32px) / 3);
    min-width: 0;
    max-width: none;
    gap: 1cqi;
  }
}

.plp-ranking__track .plp-rank-card__media {
  position: relative;
  flex: 0 0 40%;
  width: 40%;
  min-width: 0;
}

.plp-ranking__track .plp-rank-card__body {
  flex: 0 0 60%;
  width: 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0;
}

.plp-ranking__track .product-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #e8e8e8;
  overflow: visible;
  padding-top: 0.55em;
  box-sizing: border-box;
}

.plp-ranking__track .plp-rank-badge {
  position: absolute;
  top: 0;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  padding: 0.42em 0.9em 0.42em 0.72em;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  color: #fff;
  font-size: clamp(9px, 2.8cqi, 12px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  transform: translate(0, -50%);
  white-space: nowrap;
  pointer-events: none;
}

.plp-ranking__track .plp-rank-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 0.96em;
  color: #fff;
  flex-shrink: 0;
}

.plp-ranking__track .plp-rank-badge__crown {
  display: block;
  width: 100%;
  height: 100%;
}

.plp-ranking__track .plp-rank-badge__label {
  display: block;
  line-height: 1.1;
}

.plp-ranking__track .plp-rank-badge--1 {
  background: #f15a24;
}

.plp-ranking__track .plp-rank-badge--2 {
  background: #9e9e9e;
}

.plp-ranking__track .plp-rank-badge--3 {
  background: #8f5a2e;
}

.plp-ranking__track .plp-rank-badge:not([class*="plp-rank-badge--"]) {
  background: #8f8f8f;
}

.plp-ranking__track .product-image-wrap img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.plp-ranking__track .product-chip {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.4em 0.75em;
  font-size: 14px;
  line-height: 1;
  border: 1px solid #e4e4e4;
  background: #fff;
  color: #606060;
}

.plp-ranking__track .product-chip::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #f15a24;
  flex-shrink: 0;
}

.plp-ranking__track .product-name {
  margin: 0.45em 0 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
  color: #141414;
  letter-spacing: 0;
}

.plp-ranking__track .product-price {
  margin: 0.35em 0 0;
  font-size: 36px;
  line-height: 0.95;
  font-weight: 900;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  color: #c91f2e;
}

.plp-ranking__track .product-price span {
  font-size: 0.32em;
  font-weight: 700;
}

.plp-ranking__track .product-tags {
  margin: 0.55em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 0.2em 0.85em;
}

.plp-ranking__track .product-tags li {
  font-size: 12px;
  line-height: 1.15;
  font-weight: 700;
  color: #9a8578;
  white-space: nowrap;
}

.plp-ranking__track .tag-hash {
  color: #f15a24;
}

.plp-ranking__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.plp-ranking__nav:hover {
  background: #fff;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.16);
}

.plp-ranking__nav:focus-visible {
  outline: 2px solid #f15a24;
  outline-offset: 2px;
}

.plp-ranking__nav--prev {
  left: 0;
  transform: translate(-50%, -50%);
}

.plp-ranking__nav--next {
  right: 0;
  transform: translate(50%, -50%);
}

.plp-ranking__nav span {
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 2.5px solid #f15a24;
  border-left: 2.5px solid #f15a24;
}

.plp-ranking__nav--prev span {
  margin-left: 4px;
  transform: rotate(45deg);
}

.plp-ranking__nav--next span {
  margin-right: 4px;
  transform: rotate(-135deg);
}

/* Subcategory tags */
.plp-subcat {
  background: #fff;
  padding: 8px 0 28px;
}

.plp-subcat__title {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
  color: #111;
}

.plp-subcat__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px 12px;
}

.plp-subcat__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #c91f2e;
}

.plp-subcat__link .tag-hash {
  margin-right: 0.12em;
}

.plp-subcat__link:hover {
  color: #a01521;
}

.plp-subcat__count {
  color: #c91f2e;
  font-weight: 700;
}

/* Product grid */
.plp-grid-section {
  background: #fff;
  padding: 10px 0 64px;
}

.plp-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 16px;
}

.plp-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.plp-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #fff;
}

.plp-card__image img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

.plp-card__chip {
  margin: 10px 0 0 8px;
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #e4e4e4;
  border-radius: 999px;
  background: #fff;
  color: #606060;
  font-size: 10px;
  font-weight: 700;
}

.plp-card__name {
  margin: 8px 8px 0;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 800;
  line-height: 1.35;
  color: #141414;
}

.plp-card__price {
  margin: 6px 8px 0;
  color: #c91f2e;
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 900;
  line-height: 1;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

.plp-card__price span {
  font-size: 10px;
  font-weight: 700;
}

.plp-card__tags {
  list-style: none;
  margin: 8px 8px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.plp-card__tags li {
  color: #8a8a8a;
  font-size: 10px;
  font-weight: 700;
}

/* Pagination */
.plp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 48px;
}

.plp-pagination__prev,
.plp-pagination__next {
  padding: 10px 18px;
  border-radius: 999px;
  background: #efce0a;
  color: #111;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.plp-pagination__prev[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.plp-pagination__pages {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.plp-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e4e4e4;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.plp-pagination__page--current {
  background: #fcf6c7;
  border-color: #fcf6c7;
  color: #111;
}

.plp-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e4e4e4;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* Product detail */
.pdp-body {
  background: #fff;
  padding: 36px 0 52px;
}

.pdp-body__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.pdp-gallery__viewport {
  position: relative;
  overflow: visible;
}

.pdp-gallery__main {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #ececec;
  border-radius: 0;
}

.pdp-gallery__main-img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.pdp-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.pdp-gallery__nav--prev {
  left: 0;
  transform: translate(-50%, -50%);
}

.pdp-gallery__nav--next {
  right: 0;
  transform: translate(50%, -50%);
}

.pdp-gallery__nav span {
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #c91f2e;
  border-left: 2px solid #c91f2e;
}

.pdp-gallery__nav--prev span {
  transform: rotate(45deg);
}

.pdp-gallery__nav--next span {
  transform: rotate(-135deg);
}

.pdp-gallery__meta {
  margin: 10px 0 0;
  color: #888;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.pdp-gallery__thumbs {
  display: grid;
  /* base/mobile = 4 columns; desktop (1024–1919px) widens to 10 (mobile.css). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.pdp-gallery__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
}

.pdp-gallery__thumb.is-active {
  border-color: #efce0a;
}

.pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-point {
  margin: 0 0 14px;
  padding: 0;
  background: none;
  border: none;
}

.pdp-point__label {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: #f15a24;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pdp-headline {
  margin: 0 0 18px;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 900;
  line-height: 1.45;
  color: #111;
}

.pdp-desc {
  margin-bottom: 16px;
}

.pdp-desc p {
  margin: 0 0 12px;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.75;
}

.pdp-related {
  margin: 0 0 22px;
}

.pdp-related__link {
  color: #3b6dbb;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
}

.pdp-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.pdp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: 18px 24px;
  border: 2px solid transparent;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* When the PW item-detail shell is on the page, hide MT's stock detail chrome
   (it remains in the DOM as the data + design-button source). */
/* Item detail (/item): MT renders its native detail server-side. Hide it from the
   FIRST paint (before app.mt.js runs) so it never flashes before our shell — it stays
   in the DOM as the data source + design button. `.make__detail__box` only exists on
   item pages, so hiding it unconditionally is safe and immediate. */
.make__detail__box {
  display: none !important;
}
body:has(.make__detail__box) .header__bread-crumb,
body.pw-pdp-hydrated .header__bread-crumb {
  display: none !important;
}

/* The PW item-detail shell lives in the global ページテーマ, so it is present on every
   page. Show it only on item pages. `:has()` makes this immediate (no flash); the
   body.pw-pdp-hydrated variant is the JS fallback for browsers without :has(). */
#pw-pdp-shell {
  display: none;
}
body:has(.make__detail__box) #pw-pdp-shell,
body.pw-pdp-hydrated #pw-pdp-shell {
  display: block;
}

.pdp-btn--design {
  background: #00b2c8;
  color: #fff;
}

.pdp-btn--support {
  background: #eef9fb;
  border-color: #00b2c8;
  color: #00b2c8;
}

.pdp-btn:hover {
  filter: brightness(1.04);
}

.pdp-spec {
  margin-top: 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.pdp-spec__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pdp-spec th,
.pdp-spec td {
  padding: 14px 18px;
  border-bottom: 1px solid #ececec;
  vertical-align: top;
}

.pdp-spec tr:last-child th,
.pdp-spec tr:last-child td {
  border-bottom: none;
}

/* On /item, MT's item-detail CSS overrides table cell borders and strips these
   row dividers, so the spec box shows no inner lines. Force ours back (scoped to
   the hydrated PDP so the standalone sample page is unaffected). */
body.pw-pdp-hydrated .pdp-spec th,
body.pw-pdp-hydrated .pdp-spec td {
  border-bottom: 1px solid #ececec !important;
}
body.pw-pdp-hydrated .pdp-spec tr:last-child th,
body.pw-pdp-hydrated .pdp-spec tr:last-child td {
  border-bottom: none !important;
}

.pdp-spec th {
  width: 34%;
  background: #fff;
  color: #888;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}

.pdp-spec td {
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}

.pdp-spec__price {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 900;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
  color: #e60012;
}

.pdp-spec__price-note {
  margin-left: 0.15em;
  font-size: 14px;
  font-weight: 700;
  color: #e60012;
}

.pdp-spec__material-note {
  display: block;
  margin-top: 8px;
  color: #666;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.65;
}

.pdp-spec__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-spec__tags li {
  color: #e60012;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.pdp-spec__hash {
  color: #e60012;
}

.pdp-spec__brand {
  display: inline-block;
  font-family: "Times New Roman", "Hiragino Mincho ProN", serif;
  font-size: clamp(28px, 2.8vw, 38px);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #111;
}

.pdp-price,
.pdp-size {
  background: #fff;
  padding: 44px 0 52px;
}

.pdp-price {
  padding-bottom: 28px;
}

.pdp-section-title {
  margin: 0 0 10px;
  font-size: 27px;
  font-weight: 900;
  color: #111;
}

.pdp-table-block__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

.pdp-table-block__intro {
  flex: 1 1 auto;
  min-width: 0;
}

.pdp-table-block__lead {
  margin: 0;
  color: #888;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.65;
}

.pdp-table-block__lead + .pdp-table-block__lead {
  margin-top: 2px;
}

.pdp-table-block__meta {
  flex: 0 0 auto;
  margin: 0;
  color: #888;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.pdp-table-block__scroll {
  overflow-x: auto;
}

.pdp-data-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 18px;
}

.pdp-data-table th,
.pdp-data-table td {
  padding: 12px 10px;
  border: 1px solid #fff;
  text-align: center;
  vertical-align: middle;
  color: #333;
  font-weight: 700;
  line-height: 1.4;
}

.pdp-data-table thead th {
  background: #efce0a;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.pdp-data-table tbody th,
.pdp-data-table tbody td {
  background: #fff6df;
}

.pdp-data-table--size tbody tr:nth-child(even) th,
.pdp-data-table--size tbody tr:nth-child(even) td {
  background: #fff;
}

.pdp-size__tables {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pdp-caution {
  margin-top: 36px;
}

.pdp-caution__title {
  margin: 0 0 14px;
  font-size: 27px;
  font-weight: 900;
  color: #111;
}

.pdp-caution__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-caution__list li {
  position: relative;
  padding-left: 1.1em;
  color: #444;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.75;
  text-indent: -1.1em;
}

.pdp-caution__list li + li {
  margin-top: 6px;
}

.pdp-caution__item--alert {
  color: #c91f2e;
}

.product-detail-page .sec9 {
  margin-top: 0;
}

/* =========================================================================
   Maker Town defense: guide-print-method
   MT injects `body * { background:#fff!important; color:#000!important;
   font-family:Helvetica... }`. Re-assert the design inside this page.
   ========================================================================= */
.guide-print-method-main * {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
}
.guide-print-method-main img {
  background-color: transparent !important;
}

/* colored section bands */
.guide-print-method-page .guide-hero {
  background: #efce0a !important;
}
.guide-print-method-page .data-submission-caution {
  background: #efefef !important;
}

/* inner containers of the colored sections -> transparent so the band shows */
.guide-print-method-page .guide-hero *,
.guide-print-method-page .data-submission-caution * {
  background-color: transparent !important;
}

/* white card kept white on top of the reset above */
.guide-print-method-page .data-submission-caution__card {
  background-color: #fff !important;
}

/* keep gray body text (MT forces it to #000) */
.print-method-intro__lead,
.print-method-inkjet__body,
.print-method-feature__text,
.print-method-finish__text,
.data-submission-caution__card-text,
.guide-design-tool-nav__lead {
  color: #666666 !important;
}

/* =========================================================================
   Maker Town defense: guide-data-submission
   Counter MT's `body * { background:#fff!important; color:#000!important;
   font:Helvetica }` for this page's colored elements.
   ========================================================================= */
.guide-data-submission-main * {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
}
.guide-data-submission-main img {
  background-color: transparent !important;
}

/* colored section bands */
.guide-data-submission-page .guide-hero {
  background: #efce0a !important;
}
.guide-data-submission-page .data-submission-print-method {
  background: #efefef !important;
}

/* inner containers of the colored sections -> transparent so the band shows */
.guide-data-submission-page .guide-hero *,
.guide-data-submission-page .data-submission-print-method * {
  background-color: transparent !important;
}

/* re-assert filled elements over the reset above */
.guide-data-submission-page .data-submission-print-method__pill {
  background-color: #fff !important;
}
/* gray pill on the white spec section */
.guide-data-submission-page .data-submission-spec__pill {
  background-color: #e8e8e8 !important;
}

/* keep gray body text (MT forces it to #000) */
.data-submission-guide__intro,
.data-submission-guide__body,
.data-submission-spec__lead,
.data-submission-spec__bullets,
.data-submission-print-method__lead,
.data-submission-print-method__bullets {
  color: #666666 !important;
}

/* accent text colors */
.data-submission-guide__warning-lead {
  color: #ff0000 !important;
}
.data-submission-spec__emph,
.data-submission-spec__li--emph {
  color: #e60012 !important;
}
.data-submission-spec__link {
  color: #036eb8 !important;
}

/* Remove the 55px white gap MT's footer (margin-top) leaves above itself.
   Visible on this page because the last section is gray. */
.guide-data-submission-page .m-footer {
  margin-top: 0 !important;
}

/* =========================================================================
   Maker Town defense: guide-design-tool
   Counter MT's `body * { background:#fff!important; color:#000!important;
   font:Helvetica }` for this page's colored elements.
   ========================================================================= */
.guide-design-tool-main * {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
}
.guide-design-tool-main img {
  background-color: transparent !important;
}

/* colored section bands */
.guide-design-tool-page .guide-hero {
  background: #efce0a !important;
}
.guide-design-tool-page .text-guide,
.guide-design-tool-page .image-guide,
.guide-design-tool-page .save-guide {
  background: #efefef !important;
}

/* inner containers of the colored sections -> transparent so the band shows */
.guide-design-tool-page .guide-hero *,
.guide-design-tool-page .text-guide *,
.guide-design-tool-page .image-guide *,
.guide-design-tool-page .save-guide * {
  background-color: transparent !important;
}

/* re-assert white cards inside the gray sections */
.guide-design-tool-page .text-guide__card,
.guide-design-tool-page .image-guide__card,
.guide-design-tool-page .save-guide__card {
  background-color: #fff !important;
}

/* keep gray body text (MT forces it to #000) */
.guide-design-tool-nav__lead,
.design-simulator__desc,
.text-guide__card-text,
.transform-guide__card-text,
.image-guide__card-text,
.stamp-guide__card-text,
.stamp-guide__notes,
.save-guide__card-text {
  color: #666666 !important;
}

/* blue in-page link */
.image-guide__in-page-link {
  color: #036eb8 !important;
}

/* =========================================================================
   Maker Town defense: home / TOP  (scoped to .home-mt wrapper)
   Reset all content backgrounds, then re-assert the many colored sections/
   elements + white text. MT does not strip background-image or ::before/
   ::after, so FV/sec2 bg images and pseudo decorations are preserved.
   ========================================================================= */
.home-mt * { font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif; }
.home-mt * { background-color: transparent !important; }

.home-mt .fv { background-color: #efd31d !important; }
.home-mt .fv-pill { background-color: #f15a24 !important; }
.home-mt .sec2 { background-color: #f6f6c2 !important; }
.home-mt .sec3 { background-color: #89d6e8 !important; }
.home-mt .sec3-card__image { background-color: #fff !important; }
.home-mt .sec3-card__link { background-color: #0071bc !important; }
.home-mt .sec4 { background-color: #ffd9ef !important; }
.home-mt .sec4-card__image { background-color: #fff !important; }
.home-mt .sec4-card__link { background-color: #25b0d6 !important; }
.home-mt .sec5 { background-color: #d3e283 !important; }
.home-mt .sec5-card { background-color: #fff !important; }
.home-mt .sec5-cta { background-color: #111 !important; }
.home-mt .sec5-intro { background-color: #f7ede6 !important; }
.home-mt .sec6 { background-color: #4e87d3 !important; }
.home-mt .sec6-kicker { background-color: #fff !important; }
.home-mt .sec6-panel { background-color: #f7ede6 !important; }
.home-mt .sec7 { background-color: #fff !important; }
.home-mt .sec8-btn { background-color: #ff6700 !important; }
.home-mt .sec8-details__body { background-color: #f7ede6 !important; }
.home-mt .sec8-store { background-color: #f4efec !important; }
.home-mt .sec8-summary { background-color: #efce70 !important; }
.home-mt .sec9 { background-color: #f7d172 !important; }
.home-mt .sec9-action--line { background-color: #00c300 !important; }
.home-mt .sec9-action--mail { background-color: #d8001a !important; }
.home-mt .sec9-action--phone { background-color: #fff !important; }
.home-mt .sec9-card { background-color: #fff !important; }
.home-mt .sec9-card__btn { background-color: #ff9b64 !important; }
.home-mt .sec9-card__head { background-color: #ff6700 !important; }
.home-mt .sec9-card__head-main {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.home-mt .sec9-card__head-pill {
  background-color: #fff !important;
  color: #ff6700 !important;
  -webkit-text-fill-color: #ff6700 !important;
}
.home-mt .sec9-card--ship .sec9-ship__lead {
  color: #ff6700 !important;
  -webkit-text-fill-color: #ff6700 !important;
}
.home-mt .sec9-contact__panel { background-color: #f7ede6 !important; }
.home-mt .sec9-wave { background-color: #fff !important; }
.home-mt .product-chip { background-color: #fff !important; }
.home-mt .product-image-wrap { background-color: #fff !important; }
.home-mt .product-rank { background-color: #8f8f8f !important; }
.home-mt .product-rank--1 { background-color: #d9ab2d !important; }
.home-mt .product-rank--2 { background-color: #9e9e9e !important; }
.home-mt .product-rank--3 { background-color: #8f5a2e !important; }

/* white text on dark/colored backgrounds (MT forces #000) */
.home-mt .sec5-cta,
.home-mt .sec3-card__link,
.home-mt .sec4-card__link,
.home-mt .sec8-btn,
.home-mt .sec9-card__btn,
.home-mt .sec9-card__head-main,
.home-mt .sec9-action--line,
.home-mt .sec9-action--mail,
.home-mt .sec9-action--line .sec9-action__label,
.home-mt .sec9-action--mail .sec9-action__label,
.home-mt .product-rank {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* other colored text */
.home-mt .sec5-card__text { color: #5c5c5c !important; }
.home-mt .sec5-em { color: #c91f2e !important; }
.home-mt .sec6-copy { color: #000 !important; }
.home-mt .sec7-card__text { color: #444 !important; }

@media (max-width: 768px) {
  .home-mt .sec7-card__text {
    color: #000 !important;
  }
}
.home-mt .sec8-details__body { color: #666666 !important; }

/* home/TOP: shirt marquee cards are injected by app.js, so they were missed
   by the background re-assert list. Restore the white card, and clip the
   shirts layer to the FV so the flowing shirts don't overflow into sec2. */
.home-page .shirt-card {
  background-color: #fff !important;
}
.home-page .shirts-layer {
  overflow: hidden !important;
}

/* home/TOP: shirts-layer top offset (applies to MT and Vercel). */
@media (min-width: 769px) {
  .home-page .shirts-layer {
    padding-top: calc(130px * var(--fv-shirt-s)) !important;
  }
}


/* home/TOP: match the design — the FV is a width-scaled artboard that the
   shirt grid fills. .fv/.fv-content/.fv-foreground used 100vh, which doesn't
   match the width-scaled shirt canvas, leaving a gap (or overflow) when the
   window isn't 16:9. Size the whole FV to the artboard height so the shirts
   fill it and everything scales together from 769 to 1920. Both MT and Vercel. */
@media (min-width: 769px) {
  .home-page .fv,
  .home-page .fv-content,
  .home-page .fv-foreground {
    min-height: var(--fv-shirt-canvas-h) !important;
    height: var(--fv-shirt-canvas-h) !important;
  }
}

/* =========================================================================
   Maker Town defense: product-list (PLP)
   Counter MT's `body * { background:#fff!important; color:#000!important;
   font:Helvetica }` for this page. Scoped to .plp-main.
   ========================================================================= */
.plp-main * {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
}
.plp-main img { background-color: transparent !important; }

/* ranking is a colored panel: reset inner containers transparent so the panel
   color shows, then re-assert the colored/white pieces (higher specificity or
   later source order wins over the reset). */
.plp-main .plp-ranking * { background-color: transparent !important; }
.plp-main .plp-ranking__panel { background-color: #fcf6c7 !important; }
.plp-main .plp-ranking__banner { background-color: #f15a24 !important; }
.plp-main .plp-ranking__track .product-image-wrap { background-color: #e8e8e8 !important; }
.plp-main .plp-ranking__track .product-chip { background-color: #fff !important; }
.plp-main .plp-ranking__track .plp-rank-badge--1 { background-color: #f15a24 !important; }
.plp-main .plp-ranking__track .plp-rank-badge--2 { background-color: #9e9e9e !important; }
.plp-main .plp-ranking__track .plp-rank-badge--3 { background-color: #8f5a2e !important; }
.plp-main .plp-ranking__track .plp-rank-badge:not([class*="plp-rank-badge--"]) { background-color: #8f8f8f !important; }

/* grid product cards + rank badges */
.plp-main .product-image-wrap,
.plp-main .product-chip { background-color: #fff !important; }
.plp-main .product-rank { background-color: #8f8f8f !important; }
.plp-main .product-rank--1 { background-color: #d9ab2d !important; }
.plp-main .product-rank--2 { background-color: #9e9e9e !important; }
.plp-main .product-rank--3 { background-color: #8f5a2e !important; }

/* white text on colored backgrounds */
.plp-main .plp-ranking__banner-title,
.plp-main .plp-ranking__track .plp-rank-badge,
.plp-main .plp-ranking__track .plp-rank-badge__icon,
.plp-main .plp-ranking__track .plp-rank-badge__label,
.plp-main .product-rank { color: #fff !important; }

/* crown icon inside rank badge: MT reset paints the <path>/<svg> black + a white
   box behind the icon. Force white fill + transparent icon box so the crown shows. */
.plp-main .plp-ranking__track .plp-rank-badge__icon,
.plp-main .plp-ranking__track .plp-rank-badge__crown {
  background-color: transparent !important;
}
.plp-main .plp-ranking__track .plp-rank-badge__crown,
.plp-main .plp-ranking__track .plp-rank-badge__crown path {
  color: #fff !important;
  fill: #fff !important;
}

/* colored text */
.plp-main .product-price { color: #c91f2e !important; }
.plp-main .product-chip { color: #606060 !important; }
.plp-main .product-tags li { color: #8a8a8a !important; }
.plp-main .plp-ranking__track .product-tags li { color: #9a8578 !important; }
.plp-main .plp-intro__body { color: #555 !important; }

/* subcategory filter links: MT paints <a> blue — force brand red like standard */
.plp-main .plp-subcat__link,
.plp-main .plp-subcat__link .tag-hash,
.plp-main .plp-subcat__count { color: #c91f2e !important; }
.plp-main .plp-subcat__link:hover { color: #a01521 !important; }

/* pagination: MT reset strips fills + paints links blue. Restore design. */
.plp-main .plp-pagination__prev,
.plp-main .plp-pagination__next {
  background-color: #efce0a !important;
  color: #111 !important;
}
.plp-main .plp-pagination__page {
  background-color: #fff !important;
  border-color: #e4e4e4 !important;
  color: #111 !important;
}
.plp-main .plp-pagination__page--current {
  background-color: #fcf6c7 !important;
  border-color: #fcf6c7 !important;
  color: #111 !important;
}
.plp-main .plp-pagination__ellipsis {
  background-color: #fff !important;
  border-color: #e4e4e4 !important;
  color: #111 !important;
}

/* =========================================================================
   Maker Town defense: product-detail (PDP). Scoped to .pdp-main.
   ========================================================================= */
.pdp-main * {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
}
.pdp-main img { background-color: transparent !important; }

/* colored backgrounds */
.pdp-main .pdp-gallery__main { background-color: #ececec !important; }
/* Product photos are white-background JPGs, so on the gray box they read as a white
   square. multiply blends the white into the gray box → uniform gray with the garment
   floating on it (matches the original design). Garment/colored pixels stay. */
.pdp-main .pdp-gallery__main-img,
.pdp-main .pdp-gallery__thumb img { mix-blend-mode: multiply; }
.pdp-main .pdp-point__label { background-color: #f15a24 !important; }
.pdp-main .pdp-btn--design { background-color: #00b2c8 !important; }
.pdp-main .pdp-btn--support { background-color: #eef9fb !important; }
.pdp-main .pdp-data-table thead th { background-color: #efce0a !important; }
.pdp-main .pdp-data-table tbody td { background-color: #fff6df !important; }
.pdp-main .pdp-data-table--size tbody tr:nth-child(even) td { background-color: #fff !important; }

/* white text on colored backgrounds */
.pdp-main .pdp-point__label,
.pdp-main .pdp-btn--design,
.pdp-main .pdp-data-table thead th { color: #fff !important; }

/* colored text */
.pdp-main .pdp-gallery__meta,
.pdp-main .pdp-spec th,
.pdp-main .pdp-table-block__lead,
.pdp-main .pdp-table-block__meta { color: #888 !important; }
.pdp-main .pdp-desc p,
.pdp-main .pdp-data-table td { color: #333 !important; }
.pdp-main .pdp-related__link { color: #3b6dbb !important; }
.pdp-main .pdp-spec__price,
.pdp-main .pdp-spec__price-note,
.pdp-main .pdp-spec__tags li,
.pdp-main .pdp-spec__hash { color: #e60012 !important; }
.pdp-main .pdp-spec__material-note { color: #666 !important; }
.pdp-main .pdp-btn--support { color: #00b2c8 !important; }

/* =============================================================================
   MT (Maker Town) HEADER defense — 2026-07-05
   MT injects `body * { background-color:#fff!important; color:#000!important }`
   which strips every header colour. Re-assert with class-scoped !important so it
   beats body* (0,0,1) via (0,2,0). Scoped to .fv-header → never touches MT pages.
   ============================================================================= */
/* MT also forces white bg on <img>; transparent so icons sit on coloured buttons */
.fv-header img { background-color: transparent !important; }

/* orange "相談しながら…" pill */
.fv-header .fv-pill { background: #f15a24 !important; color: #fff !important; }

/* contact (red) / LINE (green) CTA buttons */
.fv-header .cta { background: #111 !important; color: #fff !important; }
.fv-header .cta--contact { background: #d8001a !important; }
.fv-header .cta--line { background: #00c300 !important; }
.fv-header .cta__label { color: #fff !important; }

/* hamburger: keep ORIGINAL design = transparent button + orange bars.
   (.fv-header * transparent below would blank the bars, so re-assert orange) */
.fv-header .menu-btn span { background: #f15a24 !important; }

/* mobile compact actions (icon/label tint) */
.fv-header .fv-compact-action--phone { color: #111 !important; }
.fv-header .fv-compact-action--mail  { color: #d8001a !important; }
.fv-header .fv-compact-action--line  { color: #06c755 !important; }
.fv-header .fv-compact-action span   { color: inherit !important; }

/* dark text bits (phone number/label, brand lines) */
.fv-header .phone-box__number,
.fv-header .phone-box__label,
.fv-header .fv-header__brand-lead,
.fv-header .fv-header__brand-name { color: #111 !important; }

/* Fix: MT paints white bg on EVERY descendant (labels became white bars over
   the coloured buttons). Transparent-ize all header descendants; coloured
   buttons/bars above keep their fill via higher (0,2,0)/(0,2,1) specificity. */
.fv-header * { background-color: transparent !important; }
.fv-header .menu-btn span { background-color: #f15a24 !important; }

/* Fix: .fv-header * transparent-ize above also wiped the white phone card.
   Restore the white "電話/メール/LINE" card background (drop-shadow on
   .fv-header__links is a filter → MT never stripped it). */
.fv-header .phone-box { background: #fff !important; }

/* Fix: same transparent-ize wiped the orange cart/login/menu cluster and the
   white cart glyph (mask uses background-color). Re-assert fills. */
.fv-header .fv-header__util {
  background: #f15a24 !important;
  background-color: #f15a24 !important;
}
.fv-header .fv-cart-icon {
  background-color: #fff !important;
}
.fv-header .fv-cart-link,
.fv-header .fv-cart-label {
  color: #fff !important;
}
.fv-header .fv-header__util .header__login .btn--login {
  background: transparent !important;
  background-color: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Mobile (≤768): icon-only util — override desktop orange panel fills. */
@media (max-width: 768px) {
  .fv-header .fv-header__util {
    background: transparent !important;
    background-color: transparent !important;
  }
  .fv-header .fv-cart-icon {
    background-color: #f15a24 !important;
  }
  .fv-header .fv-cart-label {
    display: none !important;
  }
  .fv-header .fv-header__util .header__login .btn--login {
    border: 0 !important;
    border-color: transparent !important;
    color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    font-size: 0 !important;
  }
  .fv-header .fv-header__util .header__login .btn--login .fv-login-icon {
    display: block !important;
  }
  .fv-header .fv-header__util .menu-btn {
    background: transparent !important;
    background-color: transparent !important;
  }
  .fv-header .fv-header__util .menu-btn span {
    background: #f15a24 !important;
    background-color: #f15a24 !important;
  }
  .fv-header .fv-compact-action span {
    display: none !important;
  }
}

/* Hamburger: DESKTOP with util cluster = transparent button + white bars on
   the shared orange util. Without util (legacy), orange square + white bars.
   ≤768 intentionally untouched → stays transparent button + orange bars. */
@media (min-width: 769px) {
  .fv-header .menu-btn { background: #f15a24 !important; }
  .fv-header .menu-btn span { background: #fff !important; }
  .fv-header .fv-header__util .menu-btn {
    background: transparent !important;
    background-color: transparent !important;
  }
  .fv-header .fv-header__util .menu-btn span {
    background: #fff !important;
    background-color: #fff !important;
  }
}

/* =============================================================================
   MT (Maker Town) FOOTER defense — 2026-07-05
   Standard footer = orange (#FF6700) bg + white text. MT's body* reset paints it
   white and blacks the text. Re-assert, scoped to .site-footer only.
   ============================================================================= */
.site-footer { background: #FF6700 !important; }
/* MT paints every descendant white → transparent-ize so the orange shows through */
.site-footer * { background-color: transparent !important; }
/* all footer text/links white */
.site-footer,
.site-footer * { color: #fff !important; }
.site-footer a { color: #fff !important; }
/* logo: drop MT's forced white box */
.site-footer img { background-color: transparent !important; }

/* MT EC cluster lives inside .fv-header__util (orange cart/login/menu block).
   Keep a harmless fallback if util wrap is missing on a page. */
.fv-header .mt-ec { display: flex; align-items: center; gap: 20px; margin-left: 16px; }
.fv-header .mt-ec .header__item { position: relative; display: flex; align-items: center; }
.fv-header__util .mt-ec { margin-left: 0; }

/* =============================================================================
   MT wrapper fix — remove reveal-footer reserve space
   MT wraps every page in `.L-wrapper { padding-bottom: 100vh }`, reserved for its
   own scroll-reveal fixed footer. We replaced the footer with a static one, so
   that 100vh padding just left a white gap below our footer. Cancel it.
   ============================================================================= */
.L-wrapper { padding-bottom: 0 !important; }

/* =============================================================================
   MT fix — .site-menu full-screen white cover (2026-07-05)
   app.js appends `.site-menu { position:fixed; inset:0; z-index:999 }` (the mobile
   menu layer) on any page with a .menu-btn. MT's `body * { background:#fff }` paints
   that layer white → covers the whole page. Keep the layer transparent; restore the
   dim overlay colour for when the menu is actually open.
   ============================================================================= */
.site-menu { background-color: transparent !important; }
.site-menu__overlay { background: rgba(0, 0, 0, 0.36) !important; }

/* =============================================================================
   MT home header stacking fix (2026-07-05)
   MT wraps our theme header in `.header__fixed / .header_outer`. Our home FV
   (`.fv`) carries `z-index: 20` — a leftover from the standalone layout where the
   header lived INSIDE `.fv`. On MT the header is a separate fixed element in that
   wrapper, and the FV's z-index:20 outranked the wrapper, painting OVER the header.
   Lift MT's header wrapper above page content (it's position:fixed, so z applies).
   ============================================================================= */
.header__fixed, .header_outer { z-index: 100 !important; }

/* Header bar itself must be transparent so it floats over the hero. MT's body*
   reset painted .fv-header white. Re-assert transparent — DESKTOP ONLY (769–1920+);
   ≤768 keeps its own (white) mobile-header background. */
@media (min-width: 769px) {
  .fv-header { background: transparent !important; }
}

/* =============================================================================
   MT header integration — ALL ページマスタ (custom) pages — 2026-07-06
   Standard design: the header floats OVER section1; section1 rises to y=0.

   Robust, NO :is()/:has() (an earlier :is(... :has()) selector was dropped whole by
   the browser and silently broke every page). `mcPage__main` / `mcPage__contentBlock`
   / `contentBlock__*` classes exist ONLY on ページマスタ custom pages (= the pages we
   built). MT's system pages (cart / checkout / mypage) use different templates and
   never carry these classes, so plain global rules here can't touch them.

   (A) HEADER-HEIGHT removal (MT's main{padding-top:70px} reserve + content-block top
       spacing) — ALL widths (320–1920).
   (B) TRANSPARENT header bar (over base.css #fafafa) — DESKTOP ONLY (769+), limited to
       ページマスタ pages via one plain :has() so cart's header stays solid.
   ============================================================================= */

/* (A) header-height removal — ALL widths, all ページマスタ pages.
   NOTE: non-home blocks nest their own <main class="…-main"> inside MT's
   main.mcPage__main. MT's `main { padding-top:70px }` hits BOTH, so the inner main
   keeps a 70px gap unless we zero it too — hence the explicit …-main classes. */
main.mcPage__main,
.plp-main, .pdp-main,
.guide-flow-main, .guide-design-tool-main,
.guide-data-submission-main, .guide-print-method-main,
.mcPage__contentBlock,
.mcPage__htmlContent,
.contentBlock__titleArea, .contentBlock_titleArea,
.contentBlock__text, .contentBlock_text,
.home-mt,
.company-mt, .contact-mt, .delivery-mt, .privacy-mt, .tokushoho-mt, .terms-mt,
.company-page main, .info-page main, .legal-page main {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}
/* confirmed culprit: .mcPage__contentBlock .contentBlock__text { margin-top:6px } */
.mcPage__contentBlock .contentBlock__text { margin-top: 0 !important; }

/* /item (商品詳細) pages use MT's plain <main> (no .mcPage__main class), so rule (A)
   above misses it and MT's headerFix `main{padding-top:70px}` leaves a 70px gap above
   our shell. Zero it — scoped to item pages (:has immediate, pw-pdp-hydrated fallback).
   Exclude make_confirm (design→cart): that page needs real top padding for the fixed header. */
body:has(.make__detail__box):not(.make_confirm) main,
body.pw-pdp-hydrated:not(.make_confirm) main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Design-confirm / add-to-cart: clear tall fixed fv-header (MT headerFix = 70px).
   Also forced by JS in theme-header.twig — MT may strip <style> from ヘッダ Twig. */
html body.make_confirm main,
html body.make_confirm #l-wrapper > main,
html body.make_confirm .L-wrapper > main {
  padding-top: 175px !important;
  margin-top: 0 !important;
}

/* Cart: MT headerFix is 70px/50px but our fixed fv-header needs more clearance
   (DevTools-tuned: 190px desktop, 90px ≤959 — see cart overlap of contact bar). */
html body:has(.cart__parent-area) main,
html body:has(.cart_parent-area) main,
html body:has(.cart__parent-area) #l-wrapper > main,
html body:has(.cart__parent-area) .L-wrapper > main,
html body:has(.cart_parent-area) #l-wrapper > main,
html body:has(.cart_parent-area) .L-wrapper > main {
  padding-top: 190px !important;
  margin-top: 0 !important;
}

@media only screen and (max-width: 959px) {
  html body:has(.cart__parent-area) main,
  html body:has(.cart_parent-area) main,
  html body:has(.cart__parent-area) #l-wrapper > main,
  html body:has(.cart__parent-area) .L-wrapper > main,
  html body:has(.cart_parent-area) #l-wrapper > main,
  html body:has(.cart_parent-area) .L-wrapper > main {
    padding-top: 90px !important;
  }
}

/* Checkout (届け先 / 決済 etc.): DevTools-tuned clearance for fixed fv-header.
   Default 170px; ≤959px → 106px. */
html body:has(.header__checkout) main,
html body:has(.header__checkout) #l-wrapper > main,
html body:has(.header__checkout) .L-wrapper > main {
  padding-top: 170px !important;
  margin-top: 0 !important;
}

@media only screen and (max-width: 959px) {
  html body:has(.header__checkout) main,
  html body:has(.header__checkout) #l-wrapper > main,
  html body:has(.header__checkout) .L-wrapper > main {
    padding-top: 106px !important;
  }
}

/* (B) transparent header bar — DESKTOP ONLY (769+), ページマスタ pages only */
@media (min-width: 769px) {
  body:has(.mcPage__main) .header_outer,
  body:has(.mcPage__main) .header__fixed {
    background-color: transparent !important;
    border-bottom: 0 !important;
  }
}

/* On MT, our decorative HTML block sits inside MT's centered content wrapper
   (~1180px), which shrinks the hero into a boxed band with white side margins.
   Break the whole .plp-main out to full viewport width; each inner .plp-inner
   still centers content at 1440px, matching the standard full-bleed design.
   Scoped to .mcPage__htmlContent so the standalone Vercel page is unaffected. */
.mcPage__htmlContent .plp-main {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* kill the horizontal scrollbar that 100vw full-bleed can introduce */
.L-wrapper,
body {
  overflow-x: hidden !important;
}

/* First-section (hero) background — force #efce0a against MT's body* reset.
   guide-flow / PDP / PLP lacked this defense (the other 3 guides already had it),
   so MT was stripping their hero to white. These classes exist only on our pages. */
.guide-flow-hero,
.plp-hero,
.pdp-hero {
  background: #efce0a !important;
}

/* Make the ENTIRE first section yellow. MT's body* reset paints the inner
   containers (.guide-flow-inner etc.) white, so only a yellow "frame" showed.
   Transparent-ize every hero descendant so #efce0a fills the whole section.
   (Hero bg itself stays #efce0a via the rule above.) Scoped to our 3 heroes. */
.guide-flow-hero *,
.plp-hero *,
.pdp-hero * {
  background-color: transparent !important;
}

/* =============================================================================
   MT 商品一覧（itemListContent グリッド）→ Print World PLP カードデザイン — 2026-07
   MTの「商品一覧」構造化ブロックが自動生成する実商品カード（.itemListContent__grid）
   を、私たちの .plp-card の見た目に合わせる。MT標準（flex:0 1 20%）を上書き。
   ============================================================================= */
/* The MT "商品グリッド" structured block is used ONLY as a hidden data source:
   app.mt.js reads its rendered products and rebuilds them as .plp-card inside the
   static .plp-grid. Hide the raw block (attributes stay readable while display:none). */
.mcPage__itemListContent-grid {
  display: none !important;
}
.mcPage__itemListContent-grid .itemListContent__gridArea {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 16px;
}
.mcPage__itemListContent-grid .itemListContent__grid {
  display: block !important;
  flex: none !important;
  padding: 0 !important;
  text-decoration: none;
  color: inherit;
}
.mcPage__itemListContent-grid .itemListContent__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: #fff !important;
}
.mcPage__itemListContent-grid .itemListContent__name {
  margin: 8px 8px 0;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 800;
  line-height: 1.35;
  color: #141414 !important;
  text-align: left;
}
.mcPage__itemListContent-grid .itemListContent__price {
  margin: 6px 8px 2px;
  color: #c91f2e !important;
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 900;
  line-height: 1;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}
@media (max-width: 768px) {
  .mcPage__itemListContent-grid .itemListContent__gridArea {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }
}

/* =========================================================================
   Maker Town defense: info subpages (contact / delivery / privacy / tokushoho)
   Counter MT's `body * { background:#fff!important }` — restore hero band color.
   ========================================================================= */
.info-page .info-hero {
  background: #f3d500 !important;
}
.delivery-page .info-hero,
.tokushoho-page .info-hero,
.privacy-page .info-hero,
.terms-page .info-hero,
.faq-page .info-hero {
  background: #efce0a !important;
}
.info-page main * {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}
.info-page main img {
  background-color: transparent !important;
}

/* Hero band descendants -> transparent so the yellow band shows fully
   (MT's body*{bg:#fff} paints inner containers white, covering the band). */
.company-page .company-title *,
.info-page .info-hero * {
  background-color: transparent !important;
}
/* keep the white eyebrow badge white on info pages */
.info-page .info-hero__eyebrow {
  background-color: #ffffff !important;
}

/* Contact submit button: restore orange bg + white text against MT's body* reset */
.contact-submit {
  background: #ff9863 !important;
  color: #ffffff !important;
}

/* "必須" badge: restore red box + white text against MT's body* reset */
.contact-required {
  background: #c91b2c !important;
  color: #ffffff !important;
}

/* Bank-account box (delivery): restore gray background against MT's body* reset */
.payment-bank {
  background: #f0f0f0 !important;
}

/* Delivery tables: restore header gray backgrounds against MT's body* reset */
.delivery-fee-table th {
  background: #f5f5f5 !important;
}
.cod-table th {
  background: #e9e9e9 !important;
}

/* Tokushoho table: restore left-column (th) gray background against MT reset */
.tokushoho-table th {
  background: #f5f5f5 !important;
}

/* FAQ accordion: restore band colors against MT's body*{background:#fff} reset.
   Question bar (golden), answer panel (light pink), +/- icon circle (orange). */
.faq-item__question {
  background: #f0c15a !important;
}
.faq-item__answer {
  background: #f7ebe6 !important;
}
/* MT's `body *{bg:#fff}` also paints the inner text nodes white (the qtext span
   is flex:1 and covers the whole golden bar; the answer <p> covers the pink).
   Make those descendants transparent so the parent band colour shows through. */
.faq-item__question *,
.faq-item__answer * {
  background-color: transparent !important;
}
/* Keep the +/- icon circle orange. MUST come AFTER the transparent rule above:
   `.faq-item__question *` also matches the icon (equal specificity), so source
   order decides -> this later rule wins and the circle stays orange. The white
   +/- cross is drawn by ::before/::after, which MT also forces #fff (fine). */
.faq-item__icon {
  background: #ef7a1a !important;
}

/* =========================================================================
   Maker Town defense: design-help page
   Restore band/label/button colors against MT's body*{background:#fff} reset.
   ========================================================================= */
/* Sec1 yellow title band. MT's body*{bg:#fff} also paints the inner
   div white, covering the band -> transparent-ize descendants. */
.dh-sec1 {
  background: #efce0a !important;
}
.dh-sec1 * {
  background-color: transparent !important;
}

/* Sec3 overlaps the hero photo (margin-top:-70px) so the bubble/catch-copy PNG
   floats over it. In the original these elements are transparent; MT's
   body*{bg:#fff} paints them white, forming an opaque white box over the photo.
   Keep sec3 + the copy/heading wrappers + the text images transparent so the
   photo shows behind the bubble. Below the photo it reveals the white body, so
   the rest of the section still looks white. (.dh-case__label / .dh-sec5 keep
   their own colours via their explicit rules.) */
.dh-sec3,
.dh-sec2__copy,
.dh-sec2__heading,
.dh-sec2__bubble,
.dh-sec3__heading,
.dh-sec3__title-img {
  background-color: transparent !important;
}

/* Gray "case" label pill (h3 with direct text -> no descendant fix needed) */
.dh-case__label {
  background: #e8e8e8 !important;
}

/* CTA section gray band; inner divs/heading/text cover it -> transparent-ize
   descendants so the gray shows through. */
.dh-sec5 {
  background: #ececec !important;
}
.dh-sec5 * {
  background-color: transparent !important;
}
/* Re-assert CTA buttons AFTER the transparent rule (equal specificity -> later
   wins): colored backgrounds + white label text (MT forces text #000, and the
   inner <span> is targeted directly by body* so it needs its own white rule). */
.dh-sec5__btn--line {
  background: #06c755 !important;
}
.dh-sec5__btn--mail {
  background: #d3122a !important;
}
.dh-sec5__btn,
.dh-sec5__btn span {
  color: #ffffff !important;
}

/* =========================================================================
   Maker Town defense: about (プリントワールドについて) page
   Restore band/card/button colors against MT's body*{background:#fff} reset.
   ========================================================================= */
/* Hero yellow title band. */
.ap-hero {
  background: #efce0a !important;
}
.ap-hero * {
  background-color: transparent !important;
}

/* Sec2 green band; its inner divs/imgs cover it -> transparent-ize descendants,
   then re-assert the white reason cards AFTER (equal specificity -> later wins). */
.ap-sec2 {
  background: #d3e283 !important;
}
.ap-sec2 * {
  background-color: transparent !important;
}
.ap-card {
  background: #ffffff !important;
}

/* Guide arrow dark circle + white glyph */
.ap-guide-arrow {
  background: #111111 !important;
  color: #ffffff !important;
}

/* Sec5 contact buttons: colored bg + white label; phone chip stays gray.
   Transparent-ize inner icon/text so the button colour shows through. */
.ap-method__btn--mail {
  background: #d8001a !important;
}
.ap-method__btn--line {
  background: #06c755 !important;
}
.ap-method__btn--visit {
  background: #f15a24 !important;
}
.ap-method__btn,
.ap-method__btn * {
  color: #ffffff !important;
}
.ap-method__btn *,
.ap-method__phone * {
  background-color: transparent !important;
}
.ap-method__phone {
  background: #ececec !important;
}

/* =========================================================================
   PC (>=769px): phone (tel:) links must NOT initiate a call — desktop has no
   dialer. The number still shows; it's just not clickable. On mobile (<769px)
   tel: links stay tappable. Covers header phone-box / compact / sec9 / etc.
   ========================================================================= */
@media (min-width: 769px) {
  a[href^="tel:"] {
    pointer-events: none !important;
    cursor: default !important;
  }
}

/* =========================================================================
   Smooth accordion — height tween (JS sets px ↔ 0). Gated behind `.pw-acc`.
   Avoid grid 0fr↔1fr: Chrome often eases then snaps. Padding on inner <p>
   so collapsed height is truly 0.
   ========================================================================= */
.faq-item.pw-acc .faq-item__answer,
.sec8-details.pw-acc .sec8-details__body {
  display: block !important;
  overflow: hidden;
  height: 0;
  padding: 0 !important;
  transition: height 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.pw-acc .faq-item__answer > p {
  margin: 0;
  padding: 18px 24px 22px;
}
.sec8-details.pw-acc .sec8-details__body > p {
  margin: 0;
  padding: 14px 18px 18px;
}
@media (max-width: 768px) {
  .faq-item.pw-acc .faq-item__answer > p {
    padding: 16px 18px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item.pw-acc .faq-item__answer,
  .sec8-details.pw-acc .sec8-details__body {
    transition: none;
  }
}

/* =========================================================================
   sec9 card heads — design: white on orange head, orange on white pill
   (MT body* forces #000; re-assert with !important)
   ========================================================================= */
.sec9-card__head > .sec9-card__head-main,
.home-mt .sec9-card__head > .sec9-card__head-main {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.sec9-card__head > .sec9-card__head-pill,
.home-mt .sec9-card__head > .sec9-card__head-pill {
  color: #ff6700 !important;
  -webkit-text-fill-color: #ff6700 !important;
}

/* MT body* black — only ship-card lead (design: orange) */
.sec9-card--ship .sec9-ship__lead,
.home-mt .sec9-card--ship .sec9-ship__lead {
  color: #ff6700 !important;
  -webkit-text-fill-color: #ff6700 !important;
}

/* Simulation confirm page (/simulation/confirm) — MT's fixed header overlaps the top
   of the content. Push the page's <main> down. Scoped to body.make__confirm only. */
body.make__confirm main {
  padding-top: 175px !important;
}