@charset "utf-8";
/* ==========================================================================
   page/front.css  ―  トップページ（front-page.php）
   --------------------------------------------------------------------------
   命名規則・記述ルールは common.css に準拠する
     ・!important は使用しない
     ・margin の向きは top / left に統一する
     ・html { font-size: 10px } のため 1.6rem = 16px
   ========================================================================== */

.p-mv {
  --mv-gutter: 11.833333%;
  --mv-surface: #feeaaa;
  position: relative;
  isolation: isolate;
  padding-top: 3.2rem;
  padding-bottom: 0;
  font-family: var(--font-base);
  background-color: var(--color-bg-cream);
  overflow: hidden;
}

.p-mv__footer {
  position: relative;
  display: flow-root;
  padding-bottom: calc(7.6rem + 6vw);
}

.p-mv__footer::before {
  content: '';
  position: absolute;
  top: -4.2vw;
  bottom: 0;
  left: 0;
  z-index: calc(var(--z-base) - 2);
  width: 100%;
  background-image: url(../../img/common/deco-scallop-back.png),
    linear-gradient(var(--mv-surface), var(--mv-surface));
  background-repeat: no-repeat;
  background-position: top center, bottom center;
  background-size: 100% auto, 100% calc(100% - 2vw);
  pointer-events: none;
}

.p-mv__catch {
  padding: 0 1.6rem;
  font-size: clamp(2rem, 2.666667vw, 3.2rem);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--color-primary);
}

.p-mv__slider {
  position: relative;
  z-index: var(--z-base);
  margin-top: 0;
}

.p-mv__list {
  position: relative;
  display: flex;
  gap: 2.4rem;
  padding-right: var(--mv-gutter);
  padding-left: var(--mv-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.p-mv__list::-webkit-scrollbar {
  display: none;
}

.p-mv__item {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  scroll-snap-align: center;
  opacity: 0.6;
  transform: scale(0.64);
  transform-origin: right center;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.p-mv__item.is-active {
  opacity: 1;
  transform: scale(1);
  transform-origin: center;
}

.p-mv__item.is-active ~ .p-mv__item {
  transform-origin: left center;
}

.p-mv__image {
  display: block;
  width: 100%;
  height: auto;
  border: 0.8rem solid transparent;
  border-radius: var(--radius-l);
}

.p-mv__item.is-active .p-mv__image {
  border-color: var(--color-primary);
}

.p-mv__arrow {
  position: absolute;
  top: 50%;
  z-index: var(--z-base);
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 5.4rem;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  transform: translateY(-50%);
  cursor: pointer;
}

.p-mv__arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}

.p-mv__arrow--prev {
  left: calc(var(--mv-gutter) - 6.2rem);
}

.p-mv__arrow--next {
  right: calc(var(--mv-gutter) - 6.2rem);
}

.p-mv__arrow-icon {
  display: block;
  width: 0;
  height: 0;
  border-top: 0.9rem solid transparent;
  border-bottom: 0.9rem solid transparent;
}

.p-mv__arrow--prev .p-mv__arrow-icon {
  border-right: 1.4rem solid var(--color-text-invert);
  transform: translateX(-0.2rem);
}

.p-mv__arrow--next .p-mv__arrow-icon {
  border-left: 1.4rem solid var(--color-text-invert);
  transform: translateX(0.2rem);
}

.p-mv__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 0.4rem;
}

.p-mv__dot-item {
  display: flex;
}

.p-mv__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  background-color: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.p-mv__dot::before {
  content: '';
  display: block;
  width: 1.2rem;
  aspect-ratio: 1;
  background-color: var(--color-border-strong);
  border-radius: var(--radius-full);
  pointer-events: none;
}

.p-mv__dot.is-active::before {
  background-color: var(--color-primary);
}

.p-mv__news {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: calc(100% - 34rem);
  max-width: 68.5rem;
  min-height: 3.5rem;
  margin-top: 1.1rem;
  margin-inline: auto;
  padding: 0.6rem 2.4rem;
  background-color: var(--color-bg-white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
}

.p-mv__news::before,
.p-mv__news::after {
  content: '';
  position: absolute;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  pointer-events: none;
}

.p-mv__news::before {
  left: -15.8rem;
  width: 13.7rem;
  aspect-ratio: 137 / 226;
  background-image: url(../../img/front/mv-otter.png);
}

.p-mv__news::after {
  right: -10.8rem;
  width: 5.9rem;
  aspect-ratio: 48.38 / 53.12;
  background-image: url(../../img/front/mv-duck.png);
}

.p-mv__news-link {
  display: flex;
  flex: 1 1 0%;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  font-size: 1.4rem;
  overflow-wrap: anywhere;
}

.p-mv__news-label {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.3rem;
}

.p-mv__news-date {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--color-text-sub);
  font-size: 1.3rem;
}

.p-mv__news-title {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.3rem;
}

.p-mv__news-more {
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
}

.p-about {
  position: relative;
  isolation: isolate;
  margin-top: 0;
  padding-top: calc(6.35vw + 2.4rem);
  padding-bottom: 0;
  font-family: var(--font-base);
  background-color: var(--color-bg-white, #fff);
  overflow: visible;
}

.p-about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: calc(var(--z-base) - 2);
  width: 100%;
  aspect-ratio: 25 / 4;
  background: url(../../img/common/deco-scallop.png) no-repeat top center / 100% auto;
  transform: translateY(-37.5%);
  pointer-events: none;
}

.p-about__inner {
  position: relative;
  min-width: 0;
  min-height: clamp(24rem, 26.666667vw, 32rem);
}

.p-about__illust {
  position: absolute;
  bottom: 0;
  display: block;
  width: 22%;
  max-width: 22rem;
  height: auto;
  pointer-events: none;
}

.p-about__illust--woman {
  left: -1rem;
}

.p-about__illust--otter {
  right: -1rem;
  width: 26.5%;
  max-width: 27.7rem;
}

.p-about__body {
  position: relative;
  z-index: var(--z-base);
  width: 60%;
  min-width: 0;
  max-width: 60rem;
  margin-inline: auto;
  padding-bottom: 6.4rem;
}

.p-about__title {
  padding: 0;
  font-size: clamp(2.4rem, 3.333333vw, 4rem);
  line-height: 1.3;
}

.p-about__lead {
  width: 90%;
  max-width: 54rem;
  margin-top: 2.4rem;
  margin-inline: auto;
  font-size: clamp(1.8rem, 1.666667vw, 2rem);
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.p-about__action {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  width: fit-content;
  margin-inline: auto;
}

.p-about__button {
  max-width: 100%;
  min-height: 4.4rem;
  padding: 0.6rem 1.6rem;
  font-size: clamp(1.8rem, 1.666667vw, 2rem);
  box-shadow: none;
  flex: 1;
}

.p-mv__list.is-ready {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.p-mv__list.is-resetting .p-mv__item {
  transition: none;
}

.p-front-section {
  border-top: .8rem solid var(--color-primary);
}

.p-front-heading-wrap {
  width: min(61rem, calc(100% - 3.2rem));
  margin-inline: auto;
}

.p-front-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 6.4rem;
  padding: .8rem 3.2rem;
  border-radius: 0;
  background: url('../../img/common/top_title.png') center / 100% 100% no-repeat;
  font-size: 4rem;
  text-align: center;
  font-weight: 400;
}

.p-front-no-image,
.p-initiative__no-image {
  display: grid;
  place-items: center;
  min-height: 8rem;
  height: 100%;
  background: #f4f1e9;
  color: #666;
  font-size: 1.3rem;
}

.p-front-button {
  gap: 2rem;
  min-height: 4.4rem;
  padding: .8rem 5rem;
}

.p-front-button:focus-visible,
.p-initiative__filter:focus-visible,
.p-initiative__arrow:focus-visible,
.p-initiative__scrollbar:focus-visible,
.p-character__profile:focus-visible,
.p-character__social:focus-visible,
.p-partner__card:focus-visible,
.p-special__card:focus-visible {
  outline: .3rem solid #222;
  outline-offset: .4rem;
}

.p-initiative {
  --hs-container: min(84vw, var(--inner-width));
  overflow: clip;
  background: var(--color-bg-cream);
  padding-bottom: 9rem;
}

.p-initiative__block {
  padding-top: 6rem;
}

.p-initiative__block + .p-initiative__block {
  border-top: .1rem solid #ff9d8e;
  margin-top: 4.8rem;
}

.p-initiative__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.p-initiative__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
}

.p-initiative__label {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-initiative__updated {
  font-size: 1rem;
  white-space: nowrap;
}

.p-initiative__lead {
  line-height: 1.5;
}

.p-initiative__tools {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.6rem;
}

.p-initiative__tools[hidden],
.p-initiative__item[hidden],
.p-initiative__scroll-control[hidden] {
  display: none;
}

html:not(.js) .p-initiative__tools,
html:not(.js) .p-initiative__scroll-control {
  display: none;
}

.p-initiative__filters,
.p-initiative__arrows {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.p-initiative__arrows {
  margin-left: auto;
}

.p-initiative__filter,
.p-initiative__arrow {
  min-height: 4.4rem;
  padding: .8rem 1.6rem;
  border: .1rem solid var(--color-primary);
  border-radius: 5rem;
  color: var(--color-primary);
  background: transparent;
  cursor: pointer;
  font-size: 1.4rem;
}

.p-initiative__filter.is-active {
  color: #fff;
  background: var(--color-primary);
}

.p-initiative__arrow {
  width: 4.4rem;
  padding: 0;
  font-size: 2rem;
}

.p-initiative__arrow:disabled {
  opacity: .35;
  cursor: default;
}

.p-initiative__list {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-top: 1.6rem;
  padding-bottom: 0;
}

.p-initiative__list::-webkit-scrollbar {
  display: none;
}

.p-initiative__item {
  flex: 0 0 30%;
  min-width: 0;
  scroll-snap-align: start;
}

.p-initiative__card {
  overflow: hidden;
  border-radius: 1.6rem;
  box-shadow: none;
}

.p-initiative__card-link {
  display: block;
  height: 100%;
}

.p-initiative__thumb {
  aspect-ratio: 30 / 19;
  overflow: hidden;
}

.p-initiative__image {
  display: block;
  width: 100%;
  object-fit: cover;
  height: auto;
  aspect-ratio: 30 / 19;
  object-position: 100% 0;
}

.p-initiative__card-body {
  padding: 2.4rem 2.8rem;
}

.p-initiative__card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 3.2em;
  max-height: 3.2em;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.p-initiative__scroll-control {
  position: relative;
  height: 4.4rem;
  margin-top: 0;
}

.p-initiative__scrollbar {
  position: relative;
  display: block;
  width: 100%;
  height: 4.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}

.p-initiative__action {
  display: flex;
  justify-content: center;
  width: min(100%, 30.3rem);
  margin-inline: auto;
  margin-top: 0;
}

/* スクロールバー非表示時も記事とボタンの間隔を保つ。 */
.p-initiative__scroll-control[hidden] ~ .p-initiative__action {
  margin-top: 2.4rem;
}

.p-initiative__action,
.p-measures__action,
.p-partner__action {
  text-align: center;
}

.p-measures {
  background: #fff2c3;
  padding-bottom: 4.4rem;
}

.p-measures__content {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  align-items: center;
  gap: 3rem;
  margin-top: 4rem;
}

.p-measures__image {
  display: block;
  width: 100%;
  height: auto;
}

.p-measures__heading,
.p-character__heading {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-measures__text {
  margin-top: 1.6rem;
  white-space: pre-line;
  line-height: 1.6;
}

.p-measures__note {
  margin-top: 4rem;
  display: block;
}

.p-measures__note-icon {
  flex: 0 0 3.2rem;
  width: 3.2rem;
  height: 3.2rem;
  background: url('../../img/common/icon-note.svg') center / contain no-repeat;
}

.p-measures__note-label {
  flex: 1;
  min-width: 0;
  font-size: 1.8rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.p-measures__note-arrow {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: 2.4rem;
}

.p-measures__note:focus-visible {
  outline: .2rem solid var(--color-primary);
  outline-offset: .4rem;
}

.p-measures__action {
  margin-top: 4rem;
}

.p-character {
  background: var(--color-bg-cream);
  padding: 6.6rem 0;
}

.p-character__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.p-character__profile {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.4rem;
  background-color: var(--color-text-invert);
  border: .1rem solid var(--color-primary);
  border-radius: 1.6rem;
}

.p-character__visual {
  flex: 0 0 33%;
}

.p-character__image {
  display: block;
  width: 100%;
  height: auto;
}

.p-character__text {
  margin-top: 1.2rem;
  line-height: 1.6;
}

.p-character__more {
  margin-top: 1.2rem;
  color: var(--color-primary);
  font-size: 1.4rem;
}

.p-character__socials {
  display: grid;
  gap: 1.6rem;
}

.p-character__social {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  min-height: 6rem;
  height: 100%;
  padding: 1.2rem 2.4rem;
  background-color: var(--color-text-invert);
  border: .1rem solid var(--color-primary);
  border-radius: 1.6rem;
}

.p-character__social-label {
  flex: 1;
}

.p-character__external {
  color: var(--color-primary);
  font-size: 2.4rem;
}

.p-character__icon {
  flex: 0 0 3.2rem;
  height: 3.2rem;
  background: center / contain no-repeat;
}

.p-character__icon--shop {
  background-image: url('../../img/common/icon-home.svg');
}

.p-character__icon--instagram {
  background-image: url('../../img/common/icon-instagram.svg');
}

.p-character__icon--x {
  background-image: url('../../img/common/icon-x.svg');
}

.p-special {
  position: relative;
  background: var(--color-bg-white);
  padding-bottom: calc(16vw + 6.8rem);
}

.p-special__body {
  margin-top: 3rem;
}

.p-special__lead {
  text-align: center;
}

.p-special__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.p-special__action {
  margin-top: 3.2rem;
  text-align: center;
}

.p-special__card {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: .1rem solid var(--color-secondary);
  border-radius: 1.6rem;
  background: white;
}

.p-special__image {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: top;
  height: auto;
  aspect-ratio: 3 / 2;
}

.p-special__divider {
  position: absolute;
  left: 0;
  width: 100%;
  background: linear-gradient(#fff 0 24%, #fff2c3 24%);
  height: 16vw;
  bottom: 6.8rem;
}

.p-special__divider::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../../img/common/deco-scallop.png') center / 100% 100% no-repeat;
  transform: rotate(180deg);
}

.p-partner {
  background: #fff2c3;
}

.p-partner__group {
  padding: 4rem 0;
}

.p-partner__layout {
  display: grid;
  grid-template-columns: 23.5% 1fr;
  gap: 2rem;
}

.p-partner__heading-tile {
  display: grid;
  place-items: center;
  padding: 2rem;
  border-radius: 1.6rem;
  background: #fff;
}

.p-partner__group-name {
  display: grid;
  place-items: center;
  width: 20rem;
  max-width: 100%;
  aspect-ratio: 1;
  padding: 1.6rem;
  border-radius: 50%;
  color: #fff;
  background: var(--color-secondary);
  font-size: 2.4rem;
  text-align: center;
}

.p-partner__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.p-partner__item {
  min-width: 0;
}

.p-partner__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.4rem;
  border-radius: 1.6rem;
  background: #fff;
  overflow-wrap: anywhere;
}

.p-partner__logo-frame {
  /* ロゴの表示サイズ。ここを変えると全グループ・全ページのロゴがそろって変わる。 */
  --logo-w: 26.5rem;
  --logo-h: 9.7rem;
  display: block;
  place-items: center;
  width: 100%;
  max-width: var(--logo-w);
  height: var(--logo-h);
  margin-inline: auto;
}

.p-partner__logo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.p-partner__name {
  width: fit-content;
  max-width: 100%;
  margin-bottom: .5rem;
  margin-inline: auto;
  min-height: 5rem;
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: left;
}

.p-partner__product {
  --product-h: 12rem;
  display: grid;
  place-items: center;
  min-height: var(--product-h);
  padding-top: 2.4rem;
  border-top: .8rem solid var(--color-secondary);
}

.p-partner__product-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--product-h);
  object-fit: contain;
}

.p-partner__detail {
  margin-top: 2.4rem;
  color: var(--color-primary);
  text-align: left;
}

.p-partner__group--primary .p-partner__layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4rem 2rem;
}

.p-partner__group--primary .p-partner__list {
  display: contents;
}

/* ロゴ / 社名 / 商品 / 詳細 の4行を全カードで共有する */
.p-partner__group--primary .p-partner__heading-tile {
  grid-row: span 4;
}

.p-partner__group--primary .p-partner__item {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.p-partner__group--primary .p-partner__card {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.p-partner__group--compact {
  background: #fff;
}

.p-partner__group--compact + .p-partner__group--compact .p-partner__layout {
  padding-top: 0;
  border-top: 0;
}

.p-partner__group--compact .p-partner__card {
  border: .1rem solid var(--color-primary);
  min-height: 20rem;
  padding: 2.6rem;
  border-color: var(--color-secondary, #ff8b22);
}

/* ロゴ / 名称 の2行を共有する */
.p-partner__group--compact .p-partner__item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.p-partner__group--compact .p-partner__card {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.p-partner__detail--compact {
  margin-top: auto;
  text-align: right;
}

.p-partner__action {
  display: none;
  padding: 0 1.6rem 7rem;
  background: #fff;
}

.p-initiative__archive {
  flex: 1;
  min-height: 4.4rem;
  padding: .8rem 2.4rem;
}

.p-special::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff2c3;
  height: 6.8rem;
}

.p-partner__group--compact .p-partner__layout {
  align-items: start;
}

.p-partner__group--compact .p-partner__heading-tile {
  min-height: 20rem;
  padding: 0;
}

.p-partner__group--compact .p-partner__logo-frame {
  flex: 1;
  --logo-h: 10.8rem;
}

.p-partner__group--compact .p-partner__name {
  min-height: 0;
  margin-top: 1.6rem;
  font-size: 1.8rem;
  line-height: 1.5;
}

.p-partner__name-arrow {
  display: inline-block;
  margin-left: 1rem;
  color: var(--color-primary);
  white-space: nowrap;
}

.p-initiative__list.is-ready {
  scroll-snap-type: none;
}

.p-partner__group--compact + .p-partner__group--compact {
  position: relative;
}

.p-partner__group--compact + .p-partner__group--compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100rem, calc(100% - 3.2rem));
  border-top: .1rem solid #ddd;
  transform: translateX(-50%);
}

.p-initiative__scroll-rail {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.4rem;
  padding: .2rem;
  border: .1rem solid var(--color-text-sub);
  border-radius: 999px;
  background: #fff;
  transform: translateY(-50%);
  pointer-events: none;
}

.p-initiative__scroll-thumb {
  position: relative;
  left: var(--scroll-position, 0%);
  display: block;
  width: 30%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-text-sub);
}

.p-initiative__scroll-control:focus-within .p-initiative__scroll-rail {
  outline: .2rem solid #222;
  outline-offset: .3rem;
}

.p-initiative__scrollbar::-webkit-slider-runnable-track {
  height: 4.4rem;
  border: 0;
  background: transparent;
}

.p-initiative__scrollbar::-moz-range-track {
  height: 4.4rem;
  border: 0;
  background: transparent;
}

.p-initiative__scrollbar::-webkit-slider-thumb {
  appearance: none;
  width: 30%;
  height: 4.4rem;
  margin: 0;
  border: 0;
  background: transparent;
}

.p-initiative__scrollbar::-moz-range-thumb {
  appearance: none;
  width: 30%;
  height: 4.4rem;
  margin: 0;
  border: 0;
  background: transparent;
}

@media screen and (max-width: 1199px) {
  .p-mv__news-link,
  .p-mv__news-more {
    min-height: 4.4rem;
  }

  .p-mv__news-more {
    display: flex;
    align-items: center;
  }
}

@media screen and (max-width: 767px) {
  .p-mv {
    --mv-gutter: 1.6rem;
    padding-top: 2.4rem;
  }

  .p-mv__catch {
    font-size: 1.8rem;
  }

  .p-mv__slider {
    margin-top: 1.6rem;
  }

  .p-mv__list {
    gap: 1.2rem;
  }

  .p-mv__image {
    border-width: 0.4rem;
    border-radius: var(--radius-m);
  }

  .p-mv__arrow {
    width: 4.4rem;
    height: 4.4rem;
  }

  .p-mv__arrow--prev {
    left: 0.8rem;
  }

  .p-mv__arrow--next {
    right: 0.8rem;
  }

  .p-mv__footer {
    padding-bottom: 17rem;
  }

  .p-mv__news {
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    width: calc(100% - 3.2rem);
    padding: 1.6rem;
    border-radius: var(--radius-m);
    margin-top: 2.4rem;
    min-height: 0;
    box-shadow: none;
  }

  .p-mv__news-link {
    flex-basis: 100%;
    gap: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: .5rem;
    min-width: 0;
    min-height: 0;
    line-height: 1.4;
  }

  .p-mv__news-title {
    grid-column: 1 / -1;
    flex-basis: 100%;
  }

  .p-about {
    padding-top: 16vw;
  }

  .p-about::before {
    height: 25.6vw;
    aspect-ratio: auto;
    background-position: -30.4vw 0;
    background-size: 160% auto;
  }

  .p-about__container {
    width: calc(100% - 3.2rem);
  }

  .p-about__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 4rem .4rem;
    min-height: 0;
  }

  .p-about__body {
    order: -1;
    flex: 0 0 100%;
    width: 100%;
    padding-bottom: 0;
    margin-inline: 0;
  }

  .p-about__title {
    font-size: 3.2rem;
    line-height: 1.375;
    text-wrap: balance;
  }

  .p-about__lead {
    width: 100%;
    margin-top: 1.6rem;
    line-height: 1.375;
    max-width: 31.1rem;
  }

  .p-about__action {
    margin-top: 5rem;
  }

  .p-about__illust {
    position: static;
    width: auto;
    max-width: none;
  }

  .p-about__illust--woman {
    width: 10.5rem;
  }

  .p-about__illust--otter {
    width: 13.1rem;
  }

  .p-front-heading {
    flex-direction: column;
    min-height: 12.2rem;
    font-size: 3.2rem;
    line-height: 1.4;
    padding: 1.6rem 2rem;
  }

  .p-initiative {
    padding-bottom: 5rem;
  }

  .p-initiative__block {
    padding-top: 2.4rem;
  }

  .p-initiative__block + .p-initiative__block {
    margin-top: 6.4rem;
  }

  .p-initiative__heading {
    flex-direction: column-reverse;
    gap: .4rem;
  }

  .p-initiative__label {
    font-size: 2.8rem;
  }

  .p-initiative__arrows,
  .p-initiative__scroll-control {
    display: none;
  }

  .p-initiative__list {
    display: grid;
    grid-template-columns: minmax(0, 30rem);
    justify-content: center;
    gap: 2rem;
    overflow: visible;
    margin-top: 4rem;
  }

  .p-initiative__item {
    min-width: 0;
  }

  .p-initiative__item:nth-child(n + 5) {
    display: none;
  }

  .p-initiative__card-title {
    font-size: 1.6rem;
  }

  .p-measures {
    padding-bottom: 5rem;
  }

  .p-measures__content {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    margin-top: 2.8rem;
  }

  .p-measures__heading {
    text-align: left;
    font-size: 2.2rem;
  }

  .p-measures__text {
    font-size: 1.4rem;
  }

  .p-measures__note {
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
  }

  .p-measures__note-label {
    font-size: 1.4rem;
  }

  .p-measures__action {
    margin-top: 3.2rem;
  }

  .p-character {
    padding: 5rem 0;
    padding-bottom: 8rem;
  }

  .p-character__profile {
    flex-direction: column;
    padding: 2.5rem 4rem;
  }

  .p-character__visual {
    width: 15rem;
  }

  .p-character__text {
  font-size: 1.4rem;
}

  .p-character__heading {
    font-size: 2.2rem;
    text-align: center;
  }

  .p-character__more {
    text-align: center;
    margin-top: 1.6rem;
  }

  .p-character__social {
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
  }

  .p-special {
    padding-bottom: calc(32vw + 9rem);
  }

  .p-special__lead {
    text-align: left;
  }

  .p-special__list {
    justify-content: center;
    gap: 1.6rem;
    grid-template-columns: minmax(0, 32rem);
  }

  .p-partner__layout,
  .p-partner__group--primary .p-partner__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .p-partner__heading-tile {
    grid-column: 1 / -1;
    min-height: 22rem;
  }

  .p-partner__group--primary .p-partner__heading-tile {
    grid-row: auto;
  }

  .p-partner__group-name {
    width: 18rem;
    font-size: 2.4rem;
  }

  .p-partner__group--compact .p-partner__list {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .p-partner__card,
  .p-partner__group--compact .p-partner__card {
    padding: 1.2rem;
  }

  .p-partner__logo-frame {
    --logo-h: 5.4rem;
  }

  .p-partner__product {
    --product-h: 9rem;
    margin-top: .8rem;
    border-top-width: .4rem;
    padding-top: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 100%;
  }

  .p-partner__product-image {
    height: auto;
  }

  .p-partner__detail {
    margin-top: 2rem;
    font-size: 1.2rem;
  }

  .p-partner__group--compact .p-partner__card {
    min-height: 17rem;
    padding: 1.2rem;
  }

  .p-partner__group--compact .p-partner__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 1.6rem) / 2);
    justify-self: center;
  }

  .p-partner__group--compact .p-partner__name {
    font-size: 1.4rem;
    line-height: 1.2;
  }

  .p-special__divider {
    bottom: 9rem;
  }

  .p-special::after {
    height: 9rem;
  }

  .p-partner__group--compact .p-partner__logo-frame {
    --logo-h: 8.6rem;
  }

  .p-initiative__tools {
    margin-top: 2.4rem;
  }

  .p-initiative__action {
    margin-top: 2.4rem;
  }

  .p-partner__group {
    padding: 1.6rem 0;
  }

  .p-partner__action {
    padding: 3rem 1.6rem 5rem;
    padding-bottom: 4.4rem;
  }

  .p-mv__news::before,
.p-mv__news::after {
    display: block;
  }

  .p-mv__news::before {
    top: calc(100% - 1rem);
    bottom: auto;
    left: 30%;
    width: 7rem;
  }

  .p-mv__news::after {
    top: calc(100% + 7.2rem);
    bottom: auto;
    right: 32%;
    width: 3rem;
  }

  .p-character__layout {
    gap: 3.2rem;
  }

  .p-character__socials {
    gap: 2.5rem;
  }

  .p-about__title-line {
    display: block;
  }

  .p-mv__dots {
    display: none;
  }

  .p-mv__news-more {
    margin-left: auto;
    justify-content: flex-end;
    min-height: 0;
    line-height: 1.4;
  }

  .p-partner__group--primary {
    padding-top: 4rem;
  }

  .p-partner__group--primary .p-partner__layout {
    gap: 2.4rem 1.6rem;
  }

  .p-partner__group--primary .p-partner__heading-tile {
    min-height: 28rem;
  }

  .p-partner__group--primary .p-partner__group-name {
    width: 20rem;
    font-weight: 700;
    font-size: 2.4rem;
  }

  .p-partner__group--primary .p-partner__logo-frame {
    --logo-h: 5.2rem;
  }

  .p-partner__group--primary .p-partner__name {
    min-height: 0;
    margin-top: .8rem;
    font-size: 1.2rem;
  }

  .p-about__button {
    min-height: 4rem;
    font-size: 2rem;
    line-height: 1.4;
  }

  .p-measures .p-front-heading {
    min-height: 7.6rem;
  }

  .p-partner__group--compact .p-partner__group-name {
    width: 16rem;
    font-size: 2rem;
    font-weight: 700;
  }
}

@supports (-webkit-text-stroke: 1px #000) {
  .p-mv__catch {
    color: var(--color-accent);
    -webkit-text-stroke: .5rem var(--color-primary);
    paint-order: stroke fill;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-mv__item {
    transition: none;
  }
}

@media screen and (max-width: 1023px) {
  .p-initiative__head {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .p-character__layout {
    grid-template-columns: 1fr;
  }

  .p-partner__group-name {
    font-size: 2rem;
  }
}

@media screen and (min-width: 1032px) {
  .p-initiative__list {
    width: calc(50% + 50vw);
  }
  .p-initiative__item {
    flex: 0 0 calc(var(--hs-container) * .3);
  }
}


@supports not (grid-template-rows: subgrid) {
  .p-partner__item,
  .p-partner__group--primary .p-partner__item,
  .p-partner__group--compact .p-partner__item {
    display: block;
  }

  .p-partner__group--primary .p-partner__heading-tile {
    grid-row: auto;
  }

  .p-partner__card,
  .p-partner__group--primary .p-partner__card,
  .p-partner__group--compact .p-partner__card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .p-partner__logo-frame {
    --logo-h: 9.7rem;
  }

  .p-partner__detail {
    margin-top: auto;
  }
}


/* トップのスペシャルコンテンツ：一覧と共通のカード表示 */
.p-special .p-special-archive__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4rem;
  margin: 0;
  margin-top: 3rem;
  padding: 0;
  list-style: none;
}

.p-special .p-special-archive__item {
  min-width: 0;
}
.p-special .p-special-archive__card {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  height: 100%;
  color: var(--color-text);
  text-decoration: none;
}

.p-special .p-special-archive__thumb:focus-visible {
  outline: .3rem solid var(--color-primary);
  outline-offset: .4rem;
}
.p-special .p-special-archive__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: .1rem solid var(--color-secondary);
  border-radius: 1.6rem;
  background-color: var(--color-bg-white);
}
.p-special .p-special-archive__thumb--video {
  position: relative;
}

.p-special .p-special-archive__thumb--video::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 7.2rem;
  max-width: 30%;
  aspect-ratio: 72 / 50;
  border-radius: 1.2rem;
  background-color: var(--color-primary);
  content: "";
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.p-special .p-special-archive__thumb--video::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 2rem;
  max-width: 8%;
  aspect-ratio: 20 / 24;
  background-color: var(--color-text-invert);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
  transform: translate(-40%, -50%);
  pointer-events: none;
}

.p-special .p-special-archive__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/*
 * トップページではデザインカンプに合わせてタイトルと説明文を表示しない。
 * タイトルは aria-labelledby でカードの名前として参照しているため、
 * display: none ではなく視覚的にのみ隠す（読み上げには残す）。
 * 一覧ページ（/special/）では special.css の指定どおり表示される。
 */
.p-special .p-special-archive__title {
  position: absolute;
  width: .1rem;
  height: .1rem;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.p-special .p-special-archive__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1.6rem;
  font-size: 1.8rem;
  text-align: center;
}

/* 説明文は一覧ページ側で読めるため、トップページでは出力しない。 */
.p-special .p-special-archive__description {
  display: none;
}

.p-special .p-special-archive__thumb {
  transition: opacity .2s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .p-special .p-special-archive__thumb:hover {
    opacity: .6;
  }
}
@media screen and (max-width: 767px) {

  .p-special .p-special-archive__list {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    gap: 2.4rem;
  }

  .p-special .p-special-archive__card {
    gap: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-special .p-special-archive__thumb {
    transition: none;
  }
}

@media print {
  .p-special .p-special-archive__item {
    break-inside: avoid;
  }
}