@charset "UTF-8";

/*====================================================================================
[TABLE OF CONTENT]

00. COMMON
01. ABOUTUS.
02. ITSUMONO.
03. ITEM.
04. USER.
05. COMPANY.
06. INFORMATION.
07. RECRUIT.
08. CONTACT.
09. PRIVACYPOLICY.
10. MYPAGE.
====================================================================================*/


/*====================================================================================
00. COMMON - SECOND PAGE ONLY.
====================================================================================*/

/* --- BASIC LAUOUT. --- */

.l-basic--start,
.l-basic--end {
  position: relative;
  display: flex;
}

.l-basic__figure {
  overflow: hidden;
  width: fit-content;
  border-radius: var(--radius-xl);
}


@media (width < 768px) {
  .l-basic--start,
  .l-basic--end {
    display: contents;
  }

  .l-basic__content {
    padding-inline: var(--l-container-padding);
  }

  .l-basic__media{
    padding-block-end: var(--l-container-padding);

    .l-basic--start & {
      padding-inline-end: var(--l-container-padding);
    }

    .l-basic--end & {
      padding-inline-start: var(--l-container-padding);
    }
  }

  .l-basic__figure:first-of-type {
    aspect-ratio: 16 / 9;

    .l-basic--start & {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    .l-basic--end & {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
  }

}

@media (width >= 768px) {
  .l-basic--start,
  .l-basic--end {
    justify-content: space-between;
    gap: calc(var(--l-container-padding) * 2);
  }

  .l-basic--end {
    flex-direction: row-reverse;
  }

  .l-basic__content {
    inline-size: calc(66% - var(--l-container-padding) * 2);
  }

  .l-basic__media{
    position: relative;
    flex-shrink: 0;
    width: 33%;
  }

  .l-basic__figure {
    overflow: hidden;
    width: fit-content;
    border-radius: var(--radius-xl);

    & img {
      object-fit: cover;
      width:  100%;
      height: 100%;
    }

    &:first-of-type {
      width: calc(var(--layout-container-max-w) * .666);
      aspect-ratio: 3 / 2;
    }

    .l-basic--start & {
      margin-inline-start: calc((var(--layout-container-max-w) * -0.333) - (var(--l-container-padding) * 2));
    }

    .l-basic--end & {
      margin-inline-end: calc((var(--layout-container-max-w) * -0.333) - (var(--l-container-padding) * 2));
    }
  }
}

/*====================================================================================
1. ABOUTUS.
====================================================================================*/

.p-aboutus,
.p-biz-itsumono,
.p-biz-overseas {
  padding-block-end: var(--layout-section-spacing-y-compact);
}

.p-aboutus {
  position: relative;

  & .c-title__heading {
    flex-wrap: wrap;
  }
}

.p-aboutus__media {
  position: relative;
}

.p-aboutus__figure--mini {
  z-index: 2;
  overflow: hidden;
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-full);

  &:nth-child(2) {
    bottom: -2.5%;
    right: 35%;
    width: 32.5%;
  }

  &:nth-child(3) {
    top: 5%;
    right: 65%;
    width: 20%;
  }

  &:nth-child(4) {
    top: 42.5%;
    right: 72.5%;
    width: 25%;
  }
}

.p-biz-itsumono__figure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);

  & img {
    object-fit: cover;
    height: 100%;
    aspect-ratio: 1 / 1;
  }

  & > *:nth-child(2) img {
    object-position: 45% top;
  }

  & > *:nth-child(3) img {
    object-position: 10% top;
  }
}

.p-biz-itsumono {
  & .c-title__eyebrow {
    align-self: flex-start;
    padding: .3em .65em;
    color: var(--brand-on-brand);
    background-color: var(--brand-default);
    font-size: var(--font-size-md);
    line-height: var(--line-height-snug);
    letter-spacing: .04em;
  }
}

@media (width < 768px) {
  .p-biz-itsumono__figure {
    margin-block-start: var(--layout-section-spacing-y-compact);
  }
}

@media (width >= 768px) {
  .p-aboutus,
  .p-biz-itsumono,
  .p-biz-overseas {
    padding-block-start: var(--layout-section-spacing-y-compact);
  }

  .p-aboutus__figure--mini {
    &:nth-child(2) {
      top: 62.5%;
      right: 30%;
      width: 75%;
    }

    &:nth-child(3) {
      top: 15%;
      right: 100%;
      width: 40%;
    }

    &:nth-child(4) {
      top: 50%;
      right: 115%;
      width: 60%;
    }
  }
}


/* --- BANNER. --- */

.p-itsumono--banner {
  margin-block-start: .5em;
  font-size: min(16px, calc(16/720) * 100vw);
}

.p-itsumono--banner__link {
  overflow: hidden;
  display: grid;
  grid-template-columns: 30% auto 30%;
  border-radius: var(--radius-sm);
  background-color: var(--text-primary);
  color: var(--text-on-dark);
  text-decoration: none;
  box-shadow: var(--shadow-2);

  &::before,
  &::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--bg-muted);
    background-size: cover;
  }

  &::before {
    background-image: url(../images/product-img-cold.webp);
  }

  &::after {
    background-image: url(../images/product-img-hot.webp);
  }
}

.p-itsumono--banner__content {
  padding-inline: 1em;
  align-self: center;
  font-size: calc();
}

.p-itsumono--banner__eyebrow {
  display: block;
  margin-block-end: .5em;
  background-color: var(--brand-hover);
  color: var(--brand-on-brand);
  font-size: .666em;
  text-align: center;
}

.p-itsumono--banner__heading {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 2em;
  line-height: 1;

  & .--en {
    font-size: 1.25em;
    line-height: 0.8;
    letter-spacing: var(--letter-spacing-relaxed);
    transform: translateY(.05em);
  }
}

.p-itsumono--banner__text {
  margin-block-start: 1em;
  font-size: .75em;
}

@media (hover: hover) and (pointer: fine) {
  .p-itsumono--banner__link {

    transition: .3s ease;

    &:hover {
      opacity: .9;
      transform: scale(1.025);
      box-shadow: var(--shadow-3);
    }
  }
}


/*====================================================================================
2. ITSUMONO.
====================================================================================*/

.p-delivery {
  margin-block-start: calc(var(--layout-section-spacing-y-compact) * -1.125);
}

.p-delivery__inner {
  padding-block-end: var(--layout-section-spacing-y-compact);

  & * + .c-title--bullet {
    margin-block-start: var(--layout-section-spacing-y-compact);
  }
}

.p-delivery,
.p-feature,
.p-voice {
  padding-block-end: var(--layout-section-spacing-y-compact);
}

@media (width < 576px) {
  :where(.page-itsumono) .c-heading--page {
    padding-block: 1em .875em;
    font-size: calc(var(--typography-hero-font-size) * 1.5);

    &::before {
      transform: translateY(.075em);
    }
  }
}

@media (width < 768px) {
  .page-itsumono .l-basic__media {
    margin-block-start: calc(var(--layout-section-spacing-y-compact) * 0.5);
  }
}

@media (width >= 768px) {
  .p-feature,
  .p-voice {
    padding-block-start: var(--layout-section-spacing-y-compact);
  }
}


/* DELIVERY.
------------------------------------------------------------------------------------*/

.p-delivery {
  position: relative;

  --p-delivery-gap: 16px;
  --p-delivery-slide-width: clamp(240px, 36vw, 360px);
  --p-delivery-slide-ratio: 1 / 1;
}

/* --- Swiper --- */
.p-delivery-slider {
  --swiper-wrapper-transition-timing-function: linear;

  overflow: hidden;
  pointer-events: none;
}

.p-delivery__track {
  transition-timing-function: linear !important;
}

.p-delivery__img.swiper-slide {
  overflow: hidden;
  inline-size: var(--p-delivery-slide-width);
  aspect-ratio: var(--p-delivery-slide-ratio);
  block-size: auto;
  border-radius: var(--radius-lg);

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
}

/* --- Content --- */

.p-delivery__container {
  z-index: 101;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-block-start: -1em;
}

.p-delivery__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-size: calc( var(--typography-hero-font-size) * .8);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: var(--letter-spacing-base);

  & span {
    position: relative;
    display: block;
    inline-size: fit-content;
    color: var(--brand-default);
    white-space: nowrap;

    &::before {
      content: attr(data-text);
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      color: var(--brand-on-brand);
      -webkit-text-stroke: 2px currentColor;
    }
  }
}

.p-delivery__text {
  margin-block-start: 1em;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-base);
}

@media (width >= 576px) {
  .p-delivery {
    --p-delivery-slide-width: clamp(240px, 33vw, 360px);
  }
}

@media (width >= 768px) {
  .p-delivery {
    --p-delivery-slide-width: 360px;

    min-block-size: 360px;
  }

  .p-delivery__container {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end;
    margin-block-start: -2em;
    padding-block-end: calc(var(--layout-section-spacing-y-compact) / 1);
  }

  .p-delivery__text {
    font-size: 1.075em;
    color: var(--text-secondary);
  }

  .p-servicearea__content .c-paragraph:first-of-type {
    margin-block-start: 0;
  }
}


/* FEATURE.
------------------------------------------------------------------------------------*/

.p-feature__content {
  display: grid;
  gap: var(--l-container-padding);
  margin-block-start: calc(var(--l-container-padding) * 1);
}

.c-card--feature {
  border: 1px solid var(--border-default);
  background-color: var(--bg-surface);

  & .c-card__figure {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-muted);
    background-size: cover;

    & img {
      mix-blend-mode: multiply;
    }

    &::before {
      content: "";
    }
  }

  & .c-icon__cover {
    display: block;
    opacity: .96;
    position: absolute;
    inset: 0;
    inline-size: 25%;
    block-size: auto;
    aspect-ratio: 1 / 1;
    margin: auto;
    padding: var(--space-4);
    color: var(--brand-on-brand);
    background-color: var(--brand-default);
    border-radius: 50%;
  }

  & .c-icon {
    inline-size: 100%;
    block-size:  100%;
  }

  & .c-card__header {
    display: flex;
    align-items: flex-end;
    padding-block-start: var(--space-4);
    padding-inline: var(--space-4);
  }

  .c-card__heading {
    display: flex;
    flex-direction: column;
    font-size: var(--typography-h2-font-size);
    color: #e3621f;
    margin-bottom: 1rem;
  }

  & .c-card__content {
    padding: var(--space-2) var(--space-4) var(--space-6);
  }
}

@media (width >= 768px) {
  .p-feature {
    z-index: 3;
    position: relative;

    &::before,
    &::after {
      content: "";
      opacity: .5;
      pointer-events: none;
      z-index: -1;
      position: absolute;
      inset-block: 0;
      display: block;
      inline-size: 720px;
      block-size: auto;
      background-size: contain;
      margin: auto;
    }

    &::before {
      inset-inline-end: 66.667vw;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22590%22%20height%3D%22684%22%20viewBox%3D%220%200%20590%20684%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M244.599%20485.731V499.118H257.986V513.541H244.599V526.927H230.177V513.541H216.79V499.118H230.177V485.731H244.599Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.5%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M440.659%20470.731V495.259H465.186V521.686H440.659V546.127H414.318V521.686H389.79V495.259H414.318V470.731H440.659Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M402.89%20194.731V203.022H411.095V211.831H402.89V220.036H393.995V211.831H385.79V203.022H393.995V194.731H402.89Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M44.9959%20310.654V332.332H66.587V355.65H44.9959V377.328H21.6775V355.65H0V332.332H21.6775V310.654H44.9959Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M115.529%20644.559V657.168H128.139V670.728H115.529V683.337H101.97V670.728H89.3608V657.168H101.97V644.559H115.529Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M579.998%200V9.06828H589.152V18.9139H579.998V27.9821H570.238V18.9139H561.084V9.06828H570.238V0H579.998Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M243.569%2051.1941V55.9441H248.319V61.126H243.569V65.8761H238.474V61.126H233.724V55.9441H238.474V51.1941H243.569Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      aspect-ratio: 590 / 684;
    }

    &::after {
      inset-inline-start: 66.667vw;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22920%22%20height%3D%22708%22%20viewBox%3D%220%200%20920%20708%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M341.509%200V13.3001H354.895V27.723H341.509V41.1095H327.086V27.723H313.699V13.3001H327.086V0H341.509Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M353.337%20450.364V457.014H359.987V464.096H353.337V470.746H346.169V464.096H339.519V457.014H346.169V450.364H353.337Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M256.838%20227.382V261.064H290.52V297.338H256.838V330.933H220.651V297.338H186.969V261.064H220.651V227.382H256.838Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.5%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M766.021%20625.724V652.238H792.449V680.738H766.021V707.166H737.435V680.738H711.007V652.238H737.435V625.724H766.021Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M911.546%20654.052V662.084H919.664V670.806H911.546V678.925H902.823V670.806H894.705V662.084H902.823V654.052H911.546Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.25%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M576.438%20480.382V526.76H622.903V576.765H576.438V623.229H526.433V576.765H479.969V526.76H526.433V480.382H576.438Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M124.607%20254.63V267.93H137.907V282.267H124.607V295.48H110.356V282.267H97.0562V267.93H110.356V254.63H124.607Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M7.60012%20488.573V492.2H11.3137V496.173H7.60012V499.8H3.71372V496.173H0V492.2H3.71372V488.573H7.60012Z%22%20fill%3D%22%23FFA500%22%2F%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M72.8838%2079.0906V82.3725H76.2519V85.9997H72.8838V89.2816H69.3427V85.9997H65.9746V82.3725H69.3427V79.0906H72.8838Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      aspect-ratio: 920 / 708;
    }
  }

  .p-feature__content {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--l-container-padding) * 2);
    margin-block-start: calc(var(--l-container-padding) * 2);
  }
}

/* VOICE.
------------------------------------------------------------------------------------*/

.p-voice__content {
  display: grid;
  gap: var(--l-container-padding);
  margin-block-start: var(--l-container-padding);
}

.c-card--voice {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  background-color: var(--bg-surface);

  & .c-card__header {
    display: flex;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-4);
    border-block-end: 1px solid var(--border-default);
    background-color: var(--color-primary-100);
    color: var(--color-primary-900);

    &::before {
      content: "";
      display: grid;
      place-content: center;
      inline-size: 2em;
      block-size:  2em;
      border-radius: 50%;
      background-color: currentColor;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-user%22%3E%20%3Cpath%20d%3D%22M12%202a5%205%200%201%201%20-5%205l.005%20-.217a5%205%200%200%201%204.995%20-4.783z%22%20fill%3D%22%23fff%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2014a5%205%200%200%201%205%205v1a2%202%200%200%201%20-2%202h-10a2%202%200%200%201%20-2%20-2v-1a5%205%200%200%201%205%20-5h4z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E');
      background-position-y: .25em;
      background-size: 100%;
    }
  }

  & .c-card__heading {
    font-size: 1.08em;
  }

  & .c-card__content {
    flex-grow: 1;
    padding: var(--space-4);
  }

  & .c-card__footer {
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
}

@media (width < 768px) {
  .p-voice__lead {
    margin-block: .75em 1.5em;
  }
}

@media (width >= 768px) {
  .p-voice__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .p-voice__lead {
    margin-block: 0 .5em;
  }

  .p-voice__content {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--l-container-padding) * 2);
    margin-block-start: calc(var(--l-container-padding) * 2);
  }
}


/*====================================================================================
03. ITEM.
====================================================================================*/

.l-item__grid {
  --layout-gap : var(--space-6);

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--layout-gap);
  margin-block: var(--layout-gap);

}

/* --- CARD. --- */

.p-item {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size:  100%;
}

.p-item__figrue {
  inline-size: 100%;
}

.p-item__inner,
.p-detail__figure {
  display: grid;
  place-content: center;
  place-items: center;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1/1;

  & * {
    object-fit: contain;
    object-position: center;
    max-inline-size: 100%;
    max-block-size: 100%;
  }
}

.p-item__content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--p-item-name-font-size) / 2);
  margin-block-start: var(--p-item-name-font-size);
}

.p-item__title {
  font-size: var(--p-item-name-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--p-item-name-line-height);
}

.p-item__link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: var(--p-item-name-color);
  text-decoration: none;
}

.p-item__weight {
  font-size: var(--p-item-subtext-font-size);
  line-height: var(--p-item-subtext-line-height);
  color: var(--p-item-subtext-color);
  & .__num {
    margin-inline: .2em;
    font-size: var(--p-item-subtext-num-size);
  }

  .p-detail & {
    margin-block-start: 1em;
    font-size: calc(var(--p-item-subtext-font-size) * 1.25);

    & .__num {
      font-size: calc(var(--p-item-subtext-num-size) * 1.25);
    }
  }
}

.p-item__amount {
  display: flex;
  align-items: baseline;
  gap: var(--p-item-amount-gap);
  font-size: var(--p-item-amount-font-size);
  line-height: var(--p-item-amount-line-height);
  color: var(--p-item-amount-color);

  & .c-select {
    min-inline-size: 2.75em;
    padding-inline: .5em;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 1.333em;
  }

  .p-detail & {
    font-size: calc(var(--p-item-amount-font-size) * 1.25);
  }
}

.p-item__price {
  font-size: var(--p-item-price-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--p-item-price-line-height);
  color: var(--p-item-price-color);

  & .__num {
    font-size: 1.5em;
  }

  .p-detail & {
    margin-block-start: .75em;
    font-size: calc(var(--p-item-price-font-size) * 1.5);
  }
}

.p-btn--buy {
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 100%;
  margin-block-start: 1em;
  padding: .5em 1em;
  font-size: var(--p-item-button-font-size);
  line-height: var(--p-item-button-line-height);
  border: 1px solid var(--p-item-button-border-color);
  border-radius: var(--radius-full);
  background-color: var(--p-item-button-background);
  color: var(--p-item-button-color);
  cursor: pointer;

  .p-detail & {
    margin-block-start: 1.5em;
    font-size: calc(var(--p-item-button-font-size) * 1.25);
  }
}

/** ------------------------------
 * DEATAIL.
 */

.p-detail__content {
  margin-block-end: var(--space-16);
}

.p-detail__inner {
  display: grid;
  grid-template-columns: 1fr;
  margin-block-start: var(--space-8);

  & .p-item__list {
    display: flex;
    flex-direction: column;
    gap: .75em;
  }
}

.p-detail__heading {
  margin-block-start: 1.5em;
  font-size: var(--typography-h3-font-size);
  font-weight: var(--font-weight-medium);
}

.p-detail__notes {
  margin-block-start: var(--space-12);
}

@media (width < 576px) {

  /* --- CARD. --- */

  .p-item {
    flex-direction: row;
    gap: 1em;
  }

  .p-item__figure {
    flex-shrink: 0;
    inline-size: 33%;
    max-inline-size: 128px;
  }

  .p-item__content {
    flex-grow: 1;
  }

}

@media (width >= 576px) and (width < 768px) {
  .l-item__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width >= 768px) {
  .l-item__container {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--space-10);
  }

  .l-item__content {
    flex-grow: 1;
  }

  .l-item__grid {
    --layout-gap : var(--space-8);
    grid-template-columns: repeat(4, 1fr);;
  }

  /* --- CARD. --- */

  .p-item {
    flex-direction: column;
    justify-content: space-between;
  }

  /** ------------------------------
   * DEATAIL.
   */

  .p-detail__inner {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--space-8);
    margin-block: var(--space-12);
  }

  .p-detail__heading {
    margin-block-start: 0;
    font-size: var(--typography-h2-font-size);
  }

  .p-detail__notes {
    grid-column: 1 / -1;
  }

}

@media (hover: hover) and (pointer: fine) {
  .p-item__link {
    &:hover {
      color: var(--p-item-name-hover-color);
      text-decoration: underline;
    }
  }

  .p-btn--buy {
    transition: background .3s, color .3s;
    &:hover {
      background-color: var(--p-item-button-hover-color);
      color: var(--text-on-dark);
    }
  }
}

/*====================================================================================
04. USER.
====================================================================================*/


/*====================================================================================
05. COMPANY.
====================================================================================*/

.p-overview,
.p-holdings,
.p-corporate {
  padding-block-end: var(--layout-section-spacing-y-compact);
}


.p-holdings {
  & .c-heading--insert {
    position: relative;
    background-clip: text;
    background-image: var(--grad-corp);
    color: transparent;
    font-size: var(--typography-h1-font-size);
    white-space: normal;

    &::before {
      display: none;
    }
  }
}

.p-corporate {
  .c-title--bullet {
    &::before {
      background-color: var(--brand-corporate);
    }
    & .c-title__eyebrow {
      color: var(--brand-corporate);
    }
  }
}

/* --- CHART. --- */

.p-holdings__chart {
  --block-gap: 80px;

  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--block-gap);
  margin-block-start: 3em;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: calc(50% + (var(--block-gap) * 0.5));
    block-size: 1px;
    background-image: linear-gradient(90deg, var(--brand-corporate)50%, var(--brand-default) 75%);
  }
}

.p-holdings__block {
  position: relative;

  &:first-of-type {
    grid-column: span 2;
  }

  &::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    display: block;
    margin-inline: auto;
    inline-size: 1px;
    block-size: calc(var(--block-gap) / 2);
    background-color: currentColor;
  }

  &:first-of-type::before {
    inset-block-start: 100%;
  }
  &:not(:first-of-type)::before {
    inset-block-start: calc(var(--block-gap) * -0.5);
  }

  &:not(:last-of-type) {
    color: var(--brand-corporate);
  }

  &:last-of-type {
    color: var(--brand-default);
  }

}

.p-holdings__list {
  padding: 1.25em 1em 1em 1em;
  border: 1px solid currentColor;

  .p-holdings__block:first-of-type & {
    inline-size: calc((100% - var(--block-gap)) / 2);
    margin-inline: auto;
  }
}

.p-holdings__name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: var(--font-weight-bold);
  line-height: 1.333;

  & > br {
    display: none;
  }

  & .--ja {
    font-size: 1.25em;
    text-align: center;
  }

  & .--en {
    font-size: .875em;
    font-weight: var(--font-weight-bold);
  }
}

.p-holdings__ceo {
  margin-block-start: .5em;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: center;
}


@media (width < 768px) {

  /* --- HOLDINGS. ---  */

  .p-holdings.l-page-insert {
    padding-inline: 0;
  }

  .p-holdings__chart {
    --block-gap: 8vw;
    font-size: 2.5cqw;
  }

  /* --- CORPORATE. ---  */

  .p-corporate th {
    border-color: var(--brand-corporate);
  }
}

@media (width >= 768px) {
  .p-overview,
  .p-holdings,
  .p-corporate {
    padding-block: var(--layout-section-spacing-y-compact);
  }

  /* --- COMPANY. ---  */

  .p-company__container {
    display: flex;
    gap: var(--space-8);
  }

  .p-company__content {
    flex-shrink: 0;
    width: 22.5em;
  }

  .p-company__media {
    flex-grow: 1;
  }

  /* --- HOLDINGS. ---  */

  .p-holdings {
    &.l-page-insert::before {
      opacity: .25;
      inset-block-start: 0;
      inset-inline-end: 25vw;
      inline-size: calc(590px * 1.5);
      block-size:  calc(684px * 1.5);
      background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22590%22%20height%3D%22684%22%20viewBox%3D%220%200%20590%20684%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M244.599%20485.731V499.118H257.986V513.541H244.599V526.927H230.177V513.541H216.79V499.118H230.177V485.731H244.599Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.5%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M440.659%20470.731V495.259H465.186V521.686H440.659V546.127H414.318V521.686H389.79V495.259H414.318V470.731H440.659Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M402.89%20194.731V203.022H411.095V211.831H402.89V220.036H393.995V211.831H385.79V203.022H393.995V194.731H402.89Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M44.9959%20310.654V332.332H66.587V355.65H44.9959V377.328H21.6775V355.65H0V332.332H21.6775V310.654H44.9959Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M115.529%20644.559V657.168H128.139V670.728H115.529V683.337H101.97V670.728H89.3608V657.168H101.97V644.559H115.529Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M579.998%200V9.06828H589.152V18.9139H579.998V27.9821H570.238V18.9139H561.084V9.06828H570.238V0H579.998Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M243.569%2051.1941V55.9441H248.319V61.126H243.569V65.8761H238.474V61.126H233.724V55.9441H238.474V51.1941H243.569Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
      aspect-ratio: 590 / 684;
      transform: scaleX(1);
    }

    & .c-heading--insert {
      font-size: calc(var(--typography-h1-font-size) * 1.75);
    }

    & br {
      display: none;
    }
  }

  .p-holdings__header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .p-holdings__ceo {
    display: flex;
    justify-content: center;
    gap: 1em;
  }

}


/*====================================================================================
06. INFORMATION.
====================================================================================*/

/* INFORMATION.
------------------------------------------------------------------------------------*/

.p-information__list {
  border-block-start: 1px solid var(--border-default);
}

.p-information__item {
  padding-block: var(--layout-section-spacing-y-compact);
  border-block-end: 1px solid var(--border-default);
}

.p-information__figure {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.p-information__figure img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.p-information__header {
  display: grid;
  gap: var(--space-2);
}

.p-information__date {
  font-family: var(--typo-font-family-en);
  font-weight: var(--font-weight-bold);
  color: var(--brand-default);
}

.p-information__title {
  font-size: var(--typography-h3-font-size);
}

.p-information__text {
  margin-block-start: var(--space-3);
  line-height: var(--typography-body-base-line-height);
}

@media (width >= 768px) {
  .p-information__item--has-image {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .p-information__header {
    grid-template-columns: 8em 1fr;
    align-items: baseline;
    gap: var(--space-4);
  }
}

/*====================================================================================
07. RECRUIT.
====================================================================================*/


/*====================================================================================
08. CONTACT.
====================================================================================*/


/*====================================================================================
09. PRIVACYPOLICY.
====================================================================================*/
.p-privacy {
  margin-block: var(--layout-section-spacing-y-compact);
}


/*====================================================================================
10. MYPAGE.
====================================================================================*/

.l-mypage__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-block: calc(var(--layout-section-spacing-y-compact) / 2) var(--layout-section-spacing-y-compact);
}

@media (width >= 768px) {
  .l-mypage__container {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--space-10);
  }

  .l-mypage__content {
    flex-grow: 1;
  }

  .l-mypage__footer{
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;

    & .c-form__inner {
      flex-grow: 0;
      inline-size: fit-content;
      min-inline-size: 33%;
    }
  }
}

.p-holdings__chart--image {
  display: block;
  margin-block-start: 2rem;
}

.p-holdings__chart--image::before {
  display: none;
}

.p-holdings__chart--image img {
  display: block;
  inline-size: 100%;
  max-inline-size: 1774px;
  block-size: auto;
  margin-inline: auto;
}