@charset "UTF-8";


/*====================================================================================
1. FOUNDATION.
====================================================================================*/


html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scroll-padding-top: var(--layout-header-height);
  inline-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  inline-size: 100%;
  min-block-size: 100dvh;

  color: var(--text-primary);
  background-color: var(--bg-subtle);

  font-family: var(--typography-font-family-ja);
  font-feature-settings: 'pwid' on, 'palt' on;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}


h1 { line-height: var(--line-height-tight); }
h2 { line-height: var(--line-height-snug);  }
h3, h4, h5, h6 { line-height: 1.6; }

a {
  text-decoration: underline;
  color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  a[href^="tel:"] {
    cursor: pointer;
    pointer-events: none;
    text-decoration: none;
  }

  a {
    transition: color 0.3s ease;

    &:hover {
      text-decoration: none;
    }
  }

  img {
    transition: transform 0.5s ease;
  }
}

picture {
  display: block;
  line-height: 1;
}

figure {
  margin: 0;
  padding: 0;
}

svg {
  max-width: none;
  block-size: auto;
}

@media (width >= 768px) {
  body {
    min-inline-size: calc(var(--l-container-max) + var(--l-container-padding) * 2);
  }
}

input, select, textarea {
  &:focus {
    outline-color: var(--brand-border);
  }
}

/*====================================================================================
2. LAYOUT.
====================================================================================*/

/* CONTAINER.
------------------------------------------------------------------------------------*/

.l-container {
  max-inline-size: var(--l-container-max);
  margin-inline: auto;
}

@media (width >= 768px) {
  .l-container {
    inline-size: var(--l-container-max);
  }
}

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

/* WRAPPER.
------------------------------------------------------------------------------------*/

.l-wrapper {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}

.l-main {
  overflow: hidden;
  inline-size: 100%;
}

/* HEADER.
------------------------------------------------------------------------------------*/

.l-header {
  position: sticky;
  z-index: var(--z-fixed);
  inset-block-start: 0;
  inset-inline: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  inline-size: 100%;
  block-size: var(--layout-header-height);
  background-color: var(--bg-subtle);
}

.l-header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--space-4);
}


.l-header a {
  text-decoration: none;
}


.l-header__logo {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
  max-width: 100%;
}

.l-header__logo img {
  display: block;
  max-block-size: 53px;
  inline-size: auto;
}

.l-header__nav {
  display: none;
}

@media (width >= 768px) {
  .l-header__container {
    padding-inline-start: var(--space-8);
  }

  .l-header__logo img {
    block-size: 53px;
  }
}


/* BUTTON.
------------------------------------------------------------------------------------*/
.l-header__buttons {
  display: flex;
  flex-shrink: 0;
}



/* FOOTER.
------------------------------------------------------------------------------------*/

.l-footer {
  padding-block: var(--space-8);

  & a {
    text-decoration: none;
  }
}

.l-footer__container {
  display: grid;
  gap: var(--space-4);
}

.l-footer__logo {
  flex-shrink: 0;

  & a {
    display: block;
    text-decoration: none;
  }

  & figure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  & figcaption {
    line-height: 1;
  }

  & img {
    display: block;
    block-size: 2.8em;
    inline-size: auto;
  }
}

.l-footer__company {
  font-size: var(--font-size-xs);
  margin: 0;
  letter-spacing: var(--letter-spacing-wide);
}

.l-footer-corp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75em;

  & a {
    display: block;
    inline-size: fit-content;
    line-height: 1;
    text-decoration: none;
  }

  & img {
    block-size: 1.6875em;
    inline-size: auto;
  }

  & .agency_logo {
    inline-size: 10rem;
    background-color: #3114B5;
    -webkit-mask: url("../../images/common_img/logo.png") center / contain no-repeat;
    mask: url("../../images/common_img/logo.png") center / contain no-repeat;
  }

  & .agency_logo img {
    visibility: hidden;
  }

  & .agency_logo img,
  & .holdings_logo img {
    inline-size: 100%;
    block-size: auto;
  }

  & .holdings_logo {
    inline-size: 10rem;
  }
}

/* --- Navigation --- */

.l-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-12);
}

.l-footer-nav__head {
  display: grid;
  grid-template-columns: 1em 1fr;
  align-items: center;
  font-family: var(--typography-font-family-en);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-loose);
  color: var(--brand-default);
  line-height: 1;
  &::before {
    content: "+";
    text-align: center;
  }
}

.l-footer-nav__item {
  display: grid;
  grid-template-columns: 1em 1fr;
  font-size: .875em;
  line-height: 1;
  &::before {
    content: "・";
    text-align: center;
  }
}

.l-footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}



@media (width < 576px) {
  .l-footer {
    margin-block-end: var(--layout-section-spacing-y-compact);

    .page-regist & {
      margin-block-end: 0;
    }
  }
}

@media (width < 768px) {
  .l-footer-nav__head {
    margin-block: 1.5em .75em;
  }

  .l-footer-nav__desc:last-child {
    margin-block: 1.5em;
  }

  .l-footer-nav__item {
    line-height: 1.5;
  }
}

@media (width >= 768px) {
  .l-footer {
    padding-block: var(--layout-section-spacing-y-compact) var(--layout-section-spacing-y);
  }

  .l-footer__container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2em;
  }


  .l-footer__logo {
    & img {
      max-block-size: 2.75em;
    }
  }

  .l-footer__logo {
    grid-column: 1;
    grid-row: 1;
  }

  .l-footer__nav {
    grid-column: 2;
    grid-row: 1;
    margin-block-start: 1.6875em;
    margin-inline-start: auto;
  }

  .l-footer-corp {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2em;
    margin-block-start: 2em;
  }

  .l-footer-nav__group {
    display: grid;
    grid-template-columns: repeat(4, 9em);
    grid-template-rows: auto 1fr;
    grid-auto-flow: column;
    inline-size: fit-content;
    gap: var(--space-4) var(--space-8);
  }

  .l-footer-nav__head:last-of-type {
    grid-column: span 2;
  }

  .l-footer-nav__list {
    row-gap: var(--space-4);
  }
}

@media (hover: hover) and (pointer: fine) {
  .l-footer-nav__link,
  .l-footer-nav__lang {
    transition: 0.3s ease;

    &:hover {
      color: var(--brand-default);
      text-decoration: underline;
    }
  }
}


/* FIXED BUTTON.
------------------------------------------------------------------------------------*/
.l-order {
  z-index: var(--z-fixed);
  display: flex;
  position: fixed;
  bottom: 0;
  right: 0;

  .page-item &,
  .page-regist & {
    display: none;
  }
}

@media (width < 576px) {
  .l-order {
    inline-size: 100%;

    & .c-btn {
      inline-size: 100%;
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;

      & .c-icon {
        inline-size:  2.5em;
        block-size: 2.5em;
      }

      & .c-btn__text {
        flex-grow: 1;
        font-size: 1.25em;
        font-weight: var(--font-weight-normal);
        text-align: center;
      }
    }
  }
}

@media (width >= 576px) {
  .l-order {
    inline-size: var(--layout-header-height);

    & .c-btn {
      min-inline-size: var(--layout-header-height);
      background-size: 100% 300%;
      writing-mode: vertical-rl;

      & .c-btn__icon {
        inline-size:  var(--layout-header-height);
        block-size: calc(var(--layout-header-height) + 1px);
        border-inline-end: 1px solid var(--brand-border);
      }

      & .c-icon {
        inline-size: calc(var(--layout-header-height) / 2);
        block-size:  calc(var(--layout-header-height) / 2);
      }

      & .c-btn__text {
        padding-inline: 1em;
        font-size: 1.25em;
        font-weight: var(--font-weight-normal);
        letter-spacing: var(--letter-spacing-loose);
      }
    }
  }
}
@media (width < 768px) {
  .page-mypage .l-order {
    display: none;
  }
}
@media (width >= 768px) {
  .l-order {
    inline-size: 5em;
    & .c-btn--basic {
      min-inline-size: 5em;

      & .c-btn__icon {
        inline-size:  5em;
        block-size: calc(5em + 1px);
      }

      & .c-icon {
        inline-size:  2.5em;
        block-size: 2.5em;
      }

      & .c-btn__text {
        font-size: 1.5em;
      }
    }
  }
}


/* DRAWER MENU.
------------------------------------------------------------------------------------*/
body:has(dialog[open]) {
  overflow: hidden;
}

.l-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--brand-default);
  color: var(--brand-on-brand);
}

.l-menu-header__title {
  display: inline-flex;
  gap:.25em;
  padding-inline: var(--space-4);
  font-family: var(--typography-font-family-en);
  font-size: 1.5em;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-loose);

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

.l-menu-drawer {
  --menu-interaction-delay: 0s;

  position: fixed;
  inset: 0 0 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 16px;
  inset-inline-start: auto;
  inline-size: fit-content;
  min-inline-size: 270px;
  max-inline-size: 480px;
  height: 100dvh;
  block-size: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-inline-start: 1px solid var(--line);
  background-color: var(--bg-surface);
  interactivity: inert;
  opacity: 0;
  pointer-events: none;
  translate: 100% 0;
  transition:
    opacity 0.4s,
    translate 1s var(--ease-spring),
    display 1s allow-discrete,
    overlay 1s allow-discrete,
    interactivity 0s var(--menu-interaction-delay) allow-discrete,
    pointer-events 0s var(--menu-interaction-delay) allow-discrete;
  transition-behavior: allow-discrete;

  &:not([open]):not(:popover-open) {
    display: none;
  }

  &::backdrop {
    background-color: var(--color-backdrop);
    opacity: 0;
    transition: opacity 0.4s;
  }

  /* Right-side surface for spring overshoot */
  &::after {
    position: absolute;
    inset-block: 0;
    right: -128px;
    inline-size: 128px;
    border-block-start: 60px solid var(--brand-default);
    background-color: var(--bg-surface);
    content: "";
    pointer-events: none;
  }

  &[open],
  &:popover-open {
    --menu-interaction-delay: 0.4s;

    display: grid;
    interactivity: auto;
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;

    &::backdrop {
      opacity: 1;
    }

    @starting-style {
      interactivity: inert;
      opacity: 0;
      pointer-events: none;
      translate: 640px 0;

      &::backdrop {
        opacity: 0;
      }
    }
  }

  .l-menu-nav {
    overflow: auto;
  }
}

@media (width >= 768px) {
  .l-menu-drawer {
    display: none !important;
  }
}


/* PAGE HEADER.
------------------------------------------------------------------------------------*/

.l-page-header,
.l-page-insert {
  position: relative;
  padding-inline: var(--space-4);

  &::before {
    content: "";
    z-index: -1;
    pointer-events: none;
    display: block;
    opacity: .5;
    position: absolute;
    top: 0;
    inline-size: 100vw;
    aspect-ratio: 2 / 1;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221440%22%20height%3D%22720%22%20viewBox%3D%220%200%201440%20720%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%22M645.084%2038.61V54.5128H661V71.6668H645.084V87.61H627.916V71.6668H612V54.5128H627.916V38.61H645.084Z%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%22M860.229%20522.739V527.835H865.324V533.362H860.229V538.458H854.788V533.362H849.692V527.835H854.788V522.739H860.229Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1289.42%20110.915V96.5785H1275V81.0329H1289.42V66.61H1304.97V81.0329H1319.31V96.5785H1304.97V110.915H1289.42Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1122.47%20640.324V626.765H1109V612.169H1122.47V598.61H1137.07V612.169H1150.63V626.765H1137.07V640.324H1122.47Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1310.14%20347.61V371.274H1333.81V396.751H1310.14V420.502H1284.66V396.751H1261V371.274H1284.66V347.61H1310.14Z%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%22M1112.54%20113.61V151.956H1150.89V193.238H1112.54V231.498H1071.35V193.238H1033V151.956H1071.35V113.61H1112.54Z%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%22M563.705%20451.192V433.401H546V414.315H563.705V396.61H582.791V414.315H600.582V433.401H582.791V451.192H563.705Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1398.82%20481.274V467.369H1385V452.428H1398.82V438.61H1413.76V452.428H1427.66V467.369H1413.76V481.274H1398.82Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.5%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M927.141%20546.61V570.274H950.805V595.751H927.141V619.502H901.664V595.751H878V570.274H901.664V546.61H927.141Z%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%22M242.542%20560.61V598.956H280.888V640.238H242.542V678.498H201.346V640.238H163V598.956H201.346V560.61H242.542Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M998.45%20225.61V239.774H1012.61V255.06H998.45V269.31H983.164V255.06H969V239.774H983.164V225.61H998.45Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M130.536%20361.619V366.714H135.632V372.242H130.536V377.337H125.096V372.242H120V366.714H125.096V361.619H130.536Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M573.818%20127.337V133.901H580.468V141.069H573.818V147.719H566.65V141.069H560V133.901H566.65V127.337H573.818Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-size: cover;
    background-position: center top;
  }

  .page-company &::before,
  .page-item &::before,
  .page-mypage &::before,
  .page-regist &::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221440%22%20height%3D%22720%22%20viewBox%3D%220%200%201440%20720%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%22M645.084%2038.61V54.5128H661V71.6668H645.084V87.61H627.916V71.6668H612V54.5128H627.916V38.61H645.084Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1289.42%20110.915V96.5785H1275V81.0329H1289.42V66.61H1304.97V81.0329H1319.31V96.5785H1304.97V110.915H1289.42Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1310.14%20347.61V371.274H1333.81V396.751H1310.14V420.502H1284.66V396.751H1261V371.274H1284.66V347.61H1310.14Z%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%22M1112.54%20113.61V151.956H1150.89V193.238H1112.54V231.498H1071.35V193.238H1033V151.956H1071.35V113.61H1112.54Z%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%22M1398.82%20481.274V467.369H1385V452.428H1398.82V438.61H1413.76V452.428H1427.66V467.369H1413.76V481.274H1398.82Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M998.45%20225.61V239.774H1012.61V255.06H998.45V269.31H983.164V255.06H969V239.774H983.164V225.61H998.45Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M130.536%20361.619V366.714H135.632V372.242H130.536V377.337H125.096V372.242H120V366.714H125.096V361.619H130.536Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M573.818%20127.337V133.901H580.468V141.069H573.818V147.719H566.65V141.069H560V133.901H566.65V127.337H573.818Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  }

}

.l-page-header {
  display: flex;
  flex-direction: column;
  &::before {
    inset-inline-start: 12.5vw;
  }
}

.l-page-insert {
  &::before {
    inset-inline-end: 25vw;
    transform: scaleX(-1);
  }
}

@media (width >= 768px) {
  .l-page-header,
  .l-page-insert {
    &::before {
      inline-size: 1440px;
      block-size: 720px;
    }
  }
  .l-page-header {
    padding-inline-start: var(--space-8);
  }
  .l-page-insert {
    max-inline-size: var(--l-container-max);
    margin-inline: auto;
  }
}


/* SIDE MENU.
------------------------------------------------------------------------------------*/

.l-side-menu {
    font-size: var(--font-size-sm);

  & .c-notes {
    margin-block-start: .5em;
    font-size: var(--font-size-xs);
  }
}

.l-item--ca__item {
  border-block-end: 1px solid var(--border-default);
}

@media (width < 768px) {
  .l-side-menu {
    z-index: 999;
    position: fixed;
    inset: auto 0 0 0;
    display: grid;
    block-size: var(--layout-header-height);
    background-color: var(--bg-surface);

    .page-item & {
      grid-template-columns: 24.5% 24.5% 24.5% 26.5%;
    }

    .page-mypage & {
      grid-template-columns: 24.5% 24.5% 24.5% 26.5%;
    }
  }

  .l-item--ca {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1em;
  }

  .l-side-menu__item {
    z-index: 999;
    position: relative;
    inline-size: 100%;
    block-size:  100%;

    .page-item &:nth-child(1) { order: 4; }
    .page-item &:nth-child(2) { order: 3; }
    .page-item &:nth-child(3) { order: 1; }
    .page-item &:nth-child(4) { order: 2; }

    .page-mypage &.l-side--settings { order: 1; }
    .page-mypage &.l-side--shopping { order: 2; }
    .page-mypage &.l-side--cart { order: 4; }
    .page-mypage &.l-side--mail { order: 3; }
  }

  .l-side-menu__block {
    overflow: hidden;
    position: fixed;
    inset-block: auto var(--layout-header-height);
    inset-inline: 0;
    display: none;
    inline-size: 100%;
    max-block-size: calc(100dvh - (var(--layout-header-height) * 2.25));
    padding: var(--space-4);
    border-width: 4px;
    border-style: solid;
    border-color: currentColor;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background-color: var(--bg-surface);

    transition: opacity .3s;

    &::before,
    & > * {
      transition: translate .3s;
      translate: 0 8px;
    }

    &::before {
      content: attr(data-title);
      display: block;
      margin-block-end:  .25em;
      padding-block-end: .25em;
      border-width: 0 0 1px;
      border-style: solid;
      border-color: currentColor;
      font-size: 1.25em;
      font-weight: bold;
    }

    .l-side--mypage &,
    .l-side--search &,
    .l-side--settings & {
      color: var(--c-link-color--mypage);
    }

    .l-side--shopping &,
    .l-side--dairy & {
      color: var(--c-link-color--primary);
    }

    .l-side--corporate &,
    .l-side--fresh & {
      color: var(--c-link-color--secondary);
    }

    &::backdrop {
      background: transparent;
    }

    &:popover-open {
      opacity: 1;
      display: block;

      &::before,
      & > * {
      translate: 0 0;
      }

      @starting-style {
        opacity: 0;
        &::before,
        & > * {
          translate: 0 8px;
        }
      }
    }
  }

  .l-side-menu__inner {
    overflow: auto;
    max-block-size: calc(100dvh - var(--layout-header-height) - 7em);
  }
}

@media (width >= 768px) {
  .l-side-menu {
    flex-shrink: 0;
    inline-size: 17.143em;
    block-size: 100%;
  }

  .l-side-menu__item:not(:first-child) {
    margin-block-start: var(--space-8);
  }

  .l-side-menu__block {
    overflow: visible;
    display: block;
    position: static;
    border: 0 none;
    inset: unset;
    inline-size: 100%;
    max-block-size: unset;
    padding: 0;
    background-color: transparent;
  }

  .l-side--cart .c-btn,
  .l-side--mail .c-btn {
    justify-content: flex-start;
    padding-inline-start: 2.5em;
  }

  .page-mypage .l-side--cart { margin-block-start: var(--space-8); }
  .page-mypage .l-side--mail { margin-block: var(--space-6) var(--space-8); }

}


/* CTA.
------------------------------------------------------------------------------------*/
.l-cta {
  overflow: hidden;
  position: relative;
  margin-block-start: var(--l-container-padding);
  margin-inline:      var(--l-container-padding);
  border-radius:      var(--radius-xl);
  background-color:   var(--cta-navy);
  color:              var(--text-on-dark);

  &::before {
    content: "";
    opacity: .5;
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    background-image: url('../common_img/cta-bg.webp');
    background-size: cover;
    background-position: center;
    inline-size:  100%;
    block-size: 100%;
  }
}

.l-cta__container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline: auto;
}

.l-cta__header,
.l-cta__body {
  text-shadow: 0 0 .333em var(--cta-navy-dark);
}

.l-cta__footer {
  margin-block-start: 1.5em;
  & .c-btn__text {
    --c-btn-letter-spacing: var(--letter-spacing-loose);
  }
}

@media (width < 768px) {
  .l-cta__container {
    padding-block: var(--space-8);

    & .c-btn {
      background-image: var(--c-btn-grad--secondary);
    }
  }
}

@media (width >= 768px) {
  .l-cta__container {
    inline-size: fit-content;
    min-block-size: 494px;
    padding-block: var(--space-8);

    & .c-btn--icon {
      border-radius: var(--radius-full);
    }
  }
}


/* LOGIN.
------------------------------------------------------------------------------------*/

.l-login__container {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
}

.l-login__block {
  padding: var(--space-8) var(--l-container-padding);

  & .c-btn__wrap {
    max-inline-size: 320px;
  }

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

  & .c-btn__text {
    text-align: center;
  }
}

.p-signin {
  background-color: var(--status-warning-bg);

  & .p-login__head {
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);

    * + & {
      margin-block-start: .5em;
    }
  }
  & .p-login__desc {
    margin-block-start: .5em;
  }
}

.p-signup {
  background-color: var(--status-info-bg);

  & .c-heading--subject {
    color: var(--status-info-text);
  }
}

.p-forgetpass {
  background-color: var(--status-success-bg);

  & .c-heading--subject {
    color: var(--status-success-text);
  }
  & .c-table {
    & th,
    & td {
      border-block-end: 0 none;
    }
    & td {
      padding-inline: 0;
    }
  }
}

@media (width < 768px) {
  .l-login__container {
    margin-inline: var(--l-container-padding);
  }

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

@media (width >= 768px) {
  .l-login__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    &:has(.p-forgetpass) {
      display: block;
    }
  }

  .l-login__block {
    padding: calc(var(--l-container-padding) * 2);
  }

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

  .p-forgetpass {
    & .c-input {
      max-inline-size: 600px;
    }
    & th {
      white-space: nowrap;
    }
    & td {
      inline-size: 100%;
    }
  }
}

/*====================================================================================
3. COMPONENT.
====================================================================================*/

.c-icon {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  vertical-align: -0.125em; /* ベースライン補正 */
  fill: none;
  stroke-width: 1.25px;
  -webkit-text-stroke-color: currentColor;
}


/* --- TAG. --- */

.c-tag--flag {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  color: inherit;

  & img {
    width: auto;
    height: 1em;
    line-height: 1;
  }

  &:not(:last-of-type)::after {
    opacity: .5;
    content: "";
    width: 1px;
    height: 1em;
    background-color: var(--text-secondary);
    margin-inline: .5em;
    transform: rotate(30deg);
  }
}

.c-tag--required,
.c-tag--anyitem {
  display: inline-block;
  padding: .25em 1em;
  border-radius: var(--radius-full);
  font-size: var(--font-size-4xs);
}
.c-tag--required {
  background-color: var(--status-error-text);
  color: var(--text-on-dark);
}
.c-tag--anyitem {
  background-color: var(--status-info-text);
  color: var(--text-on-dark);
}


/* NAVIGATION.
------------------------------------------------------------------------------------*/

.c-main-nav__link {
  display: flex;
  line-height: 1;
  text-decoration: none;
}

.c-corp-nav__link {
  display: flex;
  align-items: center;
  gap: .25em;
  color: #157d3c;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
}

.c-corp-nav__logo {
  display: block;
  line-height: 1;
}

.l-main-nav {
  display: none;
}


/* --- For Drawer Menu. --- */

:where(.l-menu-drawer) .c-main-nav__list,
:where(.l-menu-drawer) .c-corp-nav__list {
  display: flex;
  flex-direction: column;
  padding: 1em;
}

:where(.l-menu-drawer) .c-main-nav__list {
  gap: .5em;
  &::before {
    content: "Contents";
    display: block;
    margin-block-end: .75em;
    padding-block-end: .5em;
    border-block-end: 1px solid currentColor;
    font-family: var(--typography-font-family-en);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-loose);
    text-transform: uppercase;
    color: var(--brand-default);
  }
}

:where(.l-menu-drawer) .c-main-nav__link {
  display: grid;
  grid-template-columns: 1em 1fr;
  &::before {
    content: "・";
    color: var(--brand-default);
  }
}

:where(.l-menu-drawer) .c-corp-nav__list {
  gap: .75em;
}

:where(.l-menu-drawer) .c-corp-nav__item:last-of-type {
  margin-block-start: 1.5em;
}

@media (width >= 768px) {
  :where(.l-header) .l-main-nav {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1.125em;
    block-size: 100%;
  }

  :where(.l-header) .c-main-nav__list {
    display: flex;
    justify-content: flex-end;
  }

  :where(.l-header) .c-main-nav__link {
    padding-block-end: 1em;
    padding-inline: 1em;
  }

  :where(.l-header) .c-corp-nav__list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .c-corp-nav__item {
    display: flex;
    align-items: center;
    line-height: 1;

    &:last-of-type {
      margin-inline: 2em 1em;
    }
  }

  .c-corp-nav__link {
    padding-inline: 1em;
  }

  .c-corp-nav__link > .c-icon {
    inline-size:  1.125em;
    block-size: 1.125em;
  }

  .c-corp-nav__text {
    font-size: .875em;
  }
}


@media (hover: hover) and (pointer: fine) {
  :where(.l-header) .c-main-nav__link {
    position: relative;
    &::before {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      inline-size: 100%;
      block-size: 2px;
      background-color: var(--brand-default);
      transform: scaleY(0);
      transition: transform 0.3s ease;
    }
    &:hover {
      color: var(--brand-default);

      &::before {
        transform: scaleY(1);
      }
    }
  }

  :where(.l-header) .c-corp-nav__link {
    transition: opacity 0.3s ease;

    &:hover {
      opacity: .75;
    }
  }
}


/* --- LINK - CATEGORIES. --- */

.c-link--ca {
  display: block;
  inline-size: 100%;
  padding: 1em 0;
  border: 0 none;
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

@media (width >= 768px) {
  .c-link--ca {
    display: flex;
    justify-content: space-between;
    padding-inline: .5em;
    gap: .5em;

    &::after {
      content: "→";
      opacity: 0;
    }
  }

}

@media (hover: hover) and (pointer: fine) {
  .c-link--ca {
    &, &::after {
      transition: opacity .3s, translate .3s;
    }

    .l-side--shopping &:hover,
    .l-side--dairy &:hover {
      color: var(--c-link-color--primary);
    }

    .l-side--fresh &:hover {
      color: var(--c-link-color--secondary);
    }

    .l-side--mypage &:hover {
      color: var(--c-link-color--mypage);
    }

    &:hover::after {
      opacity: 1;
      translate: .5em 0;
    }
  }
}



/* BUTTON.
------------------------------------------------------------------------------------*/

.c-btn:not(:disabled) {
  cursor: pointer;
}

/* --- STRUCTURE --- */

/**
 * text + separator + chevron-right
 */

.c-btn--arrow {
  display: flex;
  inline-size: fit-content;
  min-inline-size: 256px;
  align-items: flex-start;
  padding: 0;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-on-dark);

  & .c-btn__text {
    display: flex;
    padding-inline: 1em;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 0;
    align-self: stretch;
  }

  & .c-btn__icon {
    inline-size: calc(3em + 1px);
    block-size: 3em;
    border-inline-start-width: 1px;
    border-inline-start-style: solid;
  }

  & .c-icon {
    inline-size: 1.5em;
    block-size:  1.5em;
  }
}

/**
 * [filled] icon + separator + text
 */

.c-btn--icon {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  border-width: 1px;
  border-style: solid;
  padding: 0;
  text-decoration: none;
  color: var(--text-on-dark);

  & .c-btn__icon {
    inline-size: calc(3em + 1px);
    block-size: 3em;
    border-inline-end-width: 1px;
    border-inline-end-style: solid;
  }

  & .c-icon {
    inline-size: 1.75em;
    block-size: auto;
    aspect-ratio: 1/1;
  }

  & .c-btn__text {
    flex-grow: 1;
    padding-inline: .5em;
  }
}

/**
 * [outline] icon + separator + text
 */

.c-btn--outline {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: var(--radius-sm);
  border-width: 1px;
  border-style: solid;
  border-color: currentColor;
  text-decoration: none;
  color: var(--text-on-dark);

  &::after {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    border-width: 1.25px;
    border-style: solid;
    border-color: currentColor;
  }

  & .c-btn__icon {
    inline-size: calc(3em + 1.25px);
    block-size: 3em;
    border-inline-end-width: 1.25px;
    border-inline-end-style: solid;
    border-inline-start-color: currentColor;
  }

  & .c-icon {
    inline-size: 1.75em;
    block-size: auto;
    aspect-ratio: 1/1;
  }

  & .c-btn__text {
    flex-grow: 1;
    padding-inline: .5em;
    color: currentColor;
  }
}


/**
 * arrow box + text
 */

.c-btn--link {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  gap: var(--space-3);
  cursor: pointer;

  & .c-btn__icon {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-link-color--primary);
    background: var(--c-btn-filled--primary) var(--c-btn-grad--primary);
    background-size: 100% 200%;
    background-position: 50% 50%;
    color: var(--text-on-dark);

    body:has(.c-title--dairy, .c-title--shopping) & {
      border-color: var(--c-link-color--primary);
      background: var(--c-btn-filled--primary) var(--c-btn-grad--primary);
    }

    body:has(.c-title--fresh, .c-title--corporate) & {
      border-color: var(--c-link-color--secondary);
      background: var(--c-btn-filled--secondary) var(--c-btn-grad--secondary);
    }

    body:has(.c-title--search, .c-title--settings) & {
      border-color: var(--c-link-color--mypage);
      background: var(--c-btn-filled--mypage) var(--c-btn-grad--mypage);
    }

    .c-btn--return & {
      border-color: var(--c-link-color--negative) !important;
      background: var(--c-btn-filled--negative) var(--c-btn-grad--negative) !important;
    }
  }

  & .c-btn__text {
    color: var(--text-secondary);
    font-style: normal;
    font-weight: 400;
  }

  & .c-icon {
    inline-size:  1.5em;
    block-size:   1.5em;
    color: var(--text-on-dark);
  }
}

@media (width < 768px) {
  .c-btn--side,
  .c-tab__side {
    display: flex;
    justify-content: center;
    align-items: center;
    inline-size: 100%;
    block-size:  100%;
    gap: .5em;
    border: 0 none;
    text-decoration: none;
    color: var(--text-on-dark);

    & .c-btn__text {
      font-size: .875em;
      line-height: var(--line-height-tight);
      color: var(--text-on-dark);
    }

    & .c-btn__icon {
      color: var(--text-on-dark);
    }

    & .c-icon {
      inline-size: 2em;
      block-size: auto;
      aspect-ratio: 1/1;
    }
  }

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

  .l-side--shopping .c-btn__text,
  .l-side--mypage .c-btn__text,
  .l-side--search .c-btn__text,
  .l-side--dairy .c-btn__text,
  .l-side--fresh .c-btn__text {
    width: 2em;
  }

  .l-side--cart .c-btn__text,
  .l-side--mail .c-btn__text {
    width: 3em;
    & span {
      display: none;
    }
  }

}

@media (width >= 768px) {
  .c-btn--side {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
    inline-size: 100%;
    border-radius: var(--radius-lg);
    padding: .75em 1em;
    border-width: 1px;
    border-style: solid;
    line-height: 1;
    text-decoration: none;
    color: var(--text-on-dark);

    & .c-btn__icon {
      line-height: 1;
      vertical-align: bottom;
    }

    & .c-icon {
      font-size: 2em;
      stroke-width: 1.25px;
      line-height: 1;
    }

    & .c-btn__text {
      color: inherit;
      font-weight: var(--font-weight-medium);
      line-height: 1;
    }
  }

  .c-tab {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .5em;
    padding: .5em .5em;
    border-width: 4px 0 0;
    border-style: solid;
    border-color: currentColor;

    &, & > * {
      cursor: default;
    }

    & .c-icon {
      font-size: 2em;
      stroke-width: 1.25px;
      line-height: 1;
    }

    & .c-btn__text {
      color: var(--text-primary) !important;
    }

    & > .c-btn {
      display: contents;
    }

    .l-side--settings &,
    .l-side--mypage &,
    .l-side--search & {
      background-color: var(--c-btn-bg--search);
      color: var(--c-link-color--search);
    }

    .l-side--shopping &,
    .l-side--dairy & {
      background-color: var(--c-btn-bg--primary);
      color: var(--c-link-color--primary);
    }

    .l-side--fresh & {
      background-color: var(--c-btn-bg--secondary);
      color: var(--c-link-color--secondary);
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  .c-btn--arrow {
    & .c-icon {
      transition: translate .3s;
    }
    &:hover .c-icon {
      translate: .125em 0;
    }
  }

  .c-btn--icon {
    & .c-icon {
      transition: transform .3s;
    }
    &:hover .c-icon {
      transform: scale(1.2);
    }
  }

  .c-btn--outline {
    & .c-icon {
      transition: transform .3s;
    }
    &:hover .c-icon {
      transform: scale(1.2);
    }
  }

  .c-btn--link {
    & .c-btn__icon {
      transition: background .3s;
    }
    &:hover .c-btn__icon {
      background-position: center top;
    }
    & .c-icon {
      transition: translate .3s;
    }
    &:hover:not(.c-btn--return) .c-icon {
      translate: .125em 0;
    }
    &.c-btn--return:hover .c-icon {
      translate: -.125em 0;
    }
  }
}


/**
 * ONLY HEADER USE BUTTON
 */

.c-btn--header,
.c-btn--close {
  display: grid;
  place-content: center;
  place-items: center;
  gap: .125em;
  inline-size: auto;
  block-size:  var(--layout-header-height);
  aspect-ratio: 1 / 1;
  border: 0 none !important;
  color: var(--text-on-dark);

  font-size: calc(var(--font-size-4xs) *.875);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;

  & .c-icon {
    font-size: 4em;
  }
}

.c-btn--close {
  color: inherit;
  & .c-icon {
    fill: currentColor;
  }
}

@media (width >= 768px) {
  .c-btn--hamburger {
    display: none;
  }

  .c-btn--mypage,
  .c-btn--login {
    font-size: var(--font-size-3xs);
  }
}


/* --- COLOR. --- */

.c-btn--primary,
.c-btn--primary-hol,
.c-btn--shopping,
.c-btn--dairy,
.c-btn--brand {
  border-color: var(--c-btn-border--primary);
  background-color: var(--c-btn-filled--primary);

  & .c-btn__text {
    color: inherit;
  }

  & .c-btn__icon {
    border-color: var(--c-btn-border--primary);
  }
}

.c-btn--secondary,
.c-btn--secondary-hol,
.c-btn--fresh,
.c-btn--mail {
  border-color: var(--c-btn-border--secondary);
  background-color: var(--c-btn-filled--secondary);

  & .c-btn__text {
    color: var(--text-on-dark);
  }

  & .c-btn__icon {
    border-color: var(--c-btn-border--secondary);
  }
}

.c-btn--mypage,
.c-btn--search,
.c-btn--settings,
.c-btn--success {
  border-color: var(--c-btn-border--search);
  background-color: var(--c-btn-filled--search);

  & .c-btn__text {
    color: var(--text-on-dark);
  }

  & .c-btn__icon {
    border-color: var(--c-btn-border--search);
  }
}

.c-btn--submit,
.c-btn--order,
.c-btn--cart {
  border-color: var(--c-btn-border--submit);
  background-color: var(--c-btn-filled--submit);

  & .c-btn__text {
    color: var(--text-on-dark);
  }

  & .c-btn__icon {
    border-color: var(--c-btn-border--submit);
  }
}


.c-txt--primary,
.c-txt--primary-hol,
.c-txt--dairy,
.c-txt--brand {
  color: var(--c-link-color--primary);
}

.c-txt--secondary,
.c-txt--secondary-hol,
.c-txt--fresh,
.c-txt--mail {
  color: var(--c-link-color--secondary);
}

.c-txt--mypage,
.c-txt--search,
.c-txt--success {
  color: var(--c-link-color--search);
}

.c-txt--submit,
.c-txt--order,
.c-txt--cart {
  color: var(--c-link-color--submit);
}


/* --- OVER GRADATION. ---  */

.c-btn--brand,
.c-btn--primary {
  background-image: var(--c-btn-grad--primary);
  background-size: 100% 200%;
  background-position: 50% 50%;
}
.c-btn--primary-hol {
  background-image: var(--c-btn-grad-hol--primary);
  background-size: 300% 100%;
  background-position: 100% 50%;
}

.c-btn--mail,
.c-btn--secondary {
  background-image: var(--c-btn-grad--secondary);
  background-size: 100% 200%;
  background-position: 50% 50%;
}
.c-btn--secondary-hol {
  background-image: var(--c-btn-grad-hol--secondary);
  background-size: 300% 100%;
  background-position: 100% 50%;
}

.c-btn--mypage,
.c-btn--search,
.c-btn--settings,
.c-btn--success {
  background-image: var(--c-btn-grad--search);
  background-size: 100% 200%;
  background-position: 50% 50%;
}

.c-btn--submit,
.c-btn--order,
.c-btn--cart {
  background-image: var(--c-btn-grad--submit);
  background-size: 100% 200%;
  background-position: 50% 50%;
}


@media (hover: hover) and (pointer: fine) {
  .c-btn--primary,
  .c-btn--shopping,
  .c-btn--dairy,
  .c-btn--brand {
    transition: background .3s;
    &:hover {
      background-position: center bottom;
    }
  }

  .c-btn--secondary,
  .c-btn--fresh,
  .c-btn--mail {
    transition: background .3s;
    &:hover {
      background-position: center bottom;
    }
  }

  .c-btn--primary-hol,
  .c-btn--secondary-hol {
    transition: background .3s;
    &:hover {
      background-position: left center;
    }
  }

  .c-btn--mypage,
  .c-btn--search,
  .c-btn--settings,
  .c-btn--success {
    transition: background .3s;
    &:hover {
      background-position: center bottom;
    }
  }

  .c-btn--submit,
  .c-btn--order,
  .c-btn--cart {
    transition: background .3s;
    &:hover {
      background-position: center bottom;
    }
  }

  .c-txt--primary,
  .c-txt--primary-hol,
  .c-txt--dairy,
  .c-txt--brand {
    &, & .c-btn__icon {
      transition: background .3s, color .3s;
    }
    &:hover {
      background-color: var(--c-btn-bg--primary);
    }
    &:hover .c-btn__icon {
      background-color: var(--c-link-color--primary);
      color: var(--text-on-dark);
    }
  }

  .c-txt--secondary,
  .c-txt--secondary-hol,
  .c-txt--fresh,
  .c-txt--mail {
    &, & .c-btn__icon {
      transition: background .3s, color .3s;
    }
    &:hover {
      background-color: var(--c-btn-bg--secondary);
    }
    &:hover .c-btn__icon {
      background-color: var(--c-link-color--secondary);
      color: var(--text-on-dark);
    }
  }

  .c-txt--mypage,
  .c-txt--search,
  .c-txt--success {
    &, & .c-btn__icon {
      transition: background .3s, color .3s;
    }
    &:hover {
      background-color: var(--c-btn-bg--mypage);
    }
    &:hover .c-btn__icon {
      background-color: var(--c-link-color--search);
      color: var(--text-on-dark);
    }
  }

  .c-txt--submit,
  .c-txt--order,
  .c-txt--cart {
    &, & .c-btn__icon {
      transition: background .3s, color .3s;
    }
    &:hover {
      background-color: var(--c-btn-bg--submit);
    }
    &:hover .c-btn__icon {
      background-color: var(--c-link-color--submit);
      color: var(--text-on-dark);
    }
  }
}

/* --- LAYOUT and MODIFIER. --- */

.c-btn--round {
  border-radius: var(--radius-lg);
}

.c-btn--pill {
  border-radius: var(--radius-full);
}

/* --- PARTS. --- */

.c-btn__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.c-btn__text {
  font-family: var(--c-btn-font-family);
  font-size:   var(--c-btn-font-size);
  font-style:  var(--c-btn-font-style);
  font-weight: var(--c-btn-font-weight);
  letter-spacing: var(--c-btn-letter-spacing);
  line-height: var(--c-btn-line-height);
}


/* -- BUTTON WRAPPER. --- */

.c-btn__wrap {
  margin-block-start: 1.5em;
}

.c-btn__wrap--footer {
  margin-block: var(--layout-section-spacing-y-compact);
}


/* FORM.
------------------------------------------------------------------------------------*/

.c-input,
.c-textarea,
.c-select {
  max-inline-size: 100%;
  padding-inline: .5em;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
}

.c-input,
.c-select {
  line-height: 2;
}

.c-input--name,
.c-input--address,
.c-input--email,
.c-textarea {
  inline-size: 100%;
}

.c-select {
  inline-size: 100%;
}

.c-input__subtext {
  font-size: 0.75em;
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}

/* --- SEARCH. --- */

.c-input--search {
  display: flex;
  overflow: hidden;
  inline-size: 100%;
  margin-block-start: 1em;
  border: 1px solid var(--status-success-text);
  border-radius: var(--radius-sm);

  & .c-input {
    appearance: none;
    inline-size: 100%;
    border: 0 none;
    line-height: 2;

    &:focus {
      outline: none;
    }
  }
}

.c-submit--search {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5em;
  padding-inline: 1em;
  border: 0 none;
  background-color: var(--status-success-text);
  color: var(--brand-on-brand);
  cursor: pointer;

  & .c-btn__icon {
    line-height: 1;
    vertical-align: bottom;
  }

  & .c-icon {
    inline-size: 1.5em;
    block-size:  1.5em;
    line-height: 1;
    vertical-align: bottom;
  }

  & .c-btn__text {
    display: none;
  }
}

/* --- INPUT GROUP. --- */

.c-input__group--name {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  inline-size: 100%;

  & label {
    display: flex;
    align-items: center;
  }

  & input {
    flex-grow: 1;
    inline-size: 100%;
  }
}

.c-input__group--address {
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.c-label--form {
  display: inline-block;
  margin-block-end: .333em;
  font-weight: var(--font-weight-medium);
}

.c-form__inner {
  flex-grow: 1;
  inline-size: 100%;

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


@media (width < 576px) {
  .c-input__group--tel {
    display: flex;
    align-items: center;
    margin-block-end: .5em;

    & span {
      line-height: .5;
    }
  }

}

@media (width >= 576px) {
  .c-input__group--tel {
    display: inline-flex;
    inline-size: fit-content;
    margin-inline-end: .5em;
  }
  .c-input__group--name {
    flex-direction: row;
    gap: 1em;
  }
}


/* TEXT & PARAGRAPH.
------------------------------------------------------------------------------------*/
.c-paragraph {
  margin-block-start: 1em;

  & > * + * {
    margin-block-start: 1em;
  }
}

.c-paragraph--half {
  margin-block-start: .5em;

  & > * + * {
    margin-block-start: 1em;
  }
}


/* TITLE & HEADING.
------------------------------------------------------------------------------------*/

/* --- UPPER BULLET TITLE --- */

.c-title--bullet {
  display: flex;
  flex-direction: column;

  &::before {
    content: "";
    display: block;
    inline-size: 2em;
    block-size: .25em;
    margin-block-end: .75em;
    background-color: currentColor;
    color: var(--brand-default);
  }

  & .c-title__eyebrow {
    color: var(--brand-default);
    font-weight: var(--font-weight-bold);
  }

  & .c-title__heading,
  & .c-title__subheading {
    display: flex;
    align-items: baseline;
    font-family:    var(--typography-font-family-base);
    font-weight:    var(--typography-heading-font-weight);
    letter-spacing: var(--typography-heading-letter-spacing);
    line-height:    var(--typography-heading-line-height);
    color:          var(--typography-heading-color);
  }

  & .c-title__heading {
    font-size: var(--typography-heading-font-size);
  }

  & .c-title__subheading {
    font-size: calc(var(--typography-heading-font-size) * .875);
  }

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

.c-title--bullet-primary,
.c-title--shopping,
.c-title--dairy {
  &::before,
  & .c-title__eyebrow {
    color: var(--brand-default);
  }
}

.c-title--bullet-secondary,
.c-title--corporate,
.c-title--fresh {
  &::before,
  & .c-title__eyebrow {
    color: var(--secondary-text);
  }
}

.c-title--bullet-success,
.c-title--settings,
.c-title--search {
  &::before,
  & .c-title__eyebrow {
    color: var(--status-success-text);
  }
}

.c-title--bullet-info {
  &::before,
  & .c-title__eyebrow {
    color: var(--status-info-text);
  }
}

.c-title--bullet-warning {
  &::before,
  & .c-title__eyebrow {
    color: var(--status-warning-text);
  }
}

.c-title--bullet-error {
  &::before,
  & .c-title__eyebrow {
    color: var(--status-error-text);
  }
}

/* --- SUBJECT. --- */

.c-title--subject {
  display: block;
  margin-block-end: .75em;
  padding-block-end: .5em;
  border-block-end: 1px solid var(--border-default);
  font-weight:    var(--typography-h2-font-weight);
  letter-spacing: var(--typography-h2-letter-spacing);
  line-height:    var(--typography-h2-line-height);
  color:          var(--typography-h2-color);

  * ⁺ & {
    margin-block-start: 1.5em;
  }
}

.c-heading--subject {
  font-size: calc(var(--typography-h2-font-size) * .875);
  color: var(--brand-default);
}

@media (width < 768px) {
  .c-title--bullet {

    & .c-title__eyebrow {
      font-size: min(var(--font-size-base), 3.75vw);
    }
  }
}

@media (width >= 768px) {
  .c-title--bullet {
    & .c-title__subheading {
      font-size: calc(var(--typography-heading-font-size) * .667);
    }
  }
}

/* --- PAGE TITLE --- */

.c-title--page {
  order: 2;
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--l-container-max);
  margin-inline: auto;
}

.c-heading--page,
.c-heading--insert {
  z-index: 2;
  position: relative;
  display: block;
  inline-size: fit-content;
  padding-block-start: 1.5em;
  color: var(--brand-default);
  font-size: var(--typography-hero-font-size);
  white-space: nowrap;

  &::before {
    content: attr(data-text);
    z-index: -1;
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: fit-content;
    margin: auto;
    color: var(--brand-on-brand);
    -webkit-text-stroke: 2px currentColor;
  }

  .page-mypage & {
    color: var(--status-success-text);
  }
}

.c-heading--page {
  padding-block-end: 1.5em;
  &::before {
    inset-block-start: 0;
  }
}

@media (width >= 768px) {
  .c-heading--page {
    padding-block: .75em;
  }
}


/* LIST.
------------------------------------------------------------------------------------*/

/* --- SUB CATEGORY. --- */

.c-subcategories {
  margin-block: var(--space-8) var(--space-16);
  font-size: var(--font-size-sm);
}

.c-subcategories__list {
  display: flex;
  flex-wrap: wrap;
  gap: .666em;
}

.c-subcategory {
  display: block;
  inline-size: fit-content;
  border-radius: var(--radius-full);
  padding: .5em 1em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-default);
  background-color: var(--bg-muted);
  line-height: var(--line-height-tight);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .c-subcategory {
    transition: background .1s, border .1s, color .1s;

    .c-title--dairy + .c-subcategories &:hover {
      background-color: var(--brand-hover);
      border-color: var(--brand-border);
      color: var(--text-on-dark);
    }

    .c-title--fresh + .c-subcategories &:hover {
      background-color: var(--secondary-hover);
      border-color: var(--status-info-border);
      color: var(--text-on-dark);
    }

    .c-title--search + .c-subcategories &:hover {
      background-color: var(--status-success-text);
      border-color: var(--status-success-solid);
      color: var(--text-on-dark);
    }
  }
}


/* --- DATA. --- */

.c-data__head {
  margin-block-start: 1rem;
  color: var(--brand-default);
  font-size: 1.25em;
  font-weight: var(--font-weight-medium);
}

.c-data__desc {
  margin-block-start: .5rem;
}


/* BREADCRUMB LIST.
------------------------------------------------------------------------------------*/
.c-breadcrumb {
  display: none;
}

@media (width >= 768px) {
  .c-breadcrumb {
    order: 1;
    display: block;
    margin-block: 1em;
  }

  .c-breadcrumb__list {
    display: flex;
  }

  .c-breadcrumb__item {
    display: flex;

    &:not(:first-child)::before {
      content: "/";
      margin-inline: .5em;
    }
  }

  .c-breadcrumb__current {
    max-inline-size: 24em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* PAGINATION.
------------------------------------------------------------------------------------*/
.c-pager {
  margin-block: var(--space-8);
}

.c-pager__list {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: fit-content;
  margin-inline: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);

  & > * + * {
    border-inline-start: 1px solid var(--border-strong);
  }
}

.c-pager__link {
  display: grid;
  position: relative;
  place-content: center;
  place-items: center;
  inline-size: 3em;
  block-size:  3em;
  background-image: linear-gradient(0deg, var(--bg-muted), transparent);
  line-height: 1;
  text-decoration: none;
  color: var(--text-primary);

  &::before {
    content: "";
    display: block;
    pointer-events: none;
    position: absolute;
    inset: -1px;
  }

  &.is-skip {
    pointer-events: none;
  }

  &.is-disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
    background-image: none;
    background: var(--bg-disabled);
  }

  &.is-current {
    font-weight: var(--font-weight-bold);

    &::before {
      border: 1px solid var(--text-hint);
    }

    body:has(.c-title--dairy) & {
      color: var(--brand-hover);
    }

    body:has(.c-title--fresh) & {
      color: var(--secondary-text);
    }

    body:has(.c-title--search) & {
      color: var(--status-success-text);
    }
  }

  & .c-icon {
    inline-size: 1.333em;
    block-size:  1.333em;
    stroke-width: 1px;
  }
}

@media (width >= 768px) {
  .c-pager {
    margin-block: var(--space-16);
  }
}

.c-btn--secondary,
.c-btn--mail,
.c-btn--login {
  border-color: #157d3c;
  background-color: #157d3c;
  background-image: linear-gradient(180deg, rgba(22, 163, 74, 0.90) 0%, rgba(21, 125, 60, 0.90) 50%, rgba(22, 101, 52, 0.90) 100%);
}

@media (hover: hover) and (pointer: fine) {
  .c-pager__link {
    transition: background .3s;

    &:not(.is-current):hover {
      background-image: linear-gradient(0deg, var(--text-secondary), var(--text-hint));
      color: var(--text-on-dark);
    }

    body:has(.c-title--dairy) &:not(.is-current):hover {
      background-image: linear-gradient(0deg, var(--brand-hover), var(--brand-default));
    }

    body:has(.c-title--fresh) &:not(.is-current):hover {
      background-image: linear-gradient(0deg, var(--secondary-text), var(--secondary-solid));
    }

    body:has(.c-title--search) &:not(.is-current):hover {
      background-image: linear-gradient(0deg, var(--status-success-text), var(--status-success-solid));
    }
  }
}


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

.c-card:not(.p-item) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}


/* TABLE.
------------------------------------------------------------------------------------*/

.c-table {
  inline-size: 100%;
  margin-block-start: 1em;

  & td,
  & th {
    font-weight: var(--font-weight-normal);
    text-align: left;
    vertical-align: top;
  }
  & td {
    padding-block-end: 1em;
    border-block-end: 1px solid var(--border-default);
    color: var(--text-primary);
  }
  & th {
    color: var(--text-secondary);

    &:has(.c-tag--required, .c-tag--anyitem) {
      padding-inline-start: 0;
      font-weight: var(--font-weight-medium);
      color: var(--text-primary);
    }
  }

  &.step-input th {
    line-height: 2;
  }
}

.c-table.c-table--settings {
  & td,
  & th {
    padding-inline: 0;
  }
}

@media (width < 768px) {
  .c-table {
    display: block;
    inline-size: 100%;

    & thead,
    & tbody,
    & tr {
      display: contents;
    }

    & td,
    & th {
      display: block;
      box-sizing: border-box;
    }

    & th {
      margin-block: 1em .5em;
      padding-inline-start: .5em;
      border-inline-start: 4px solid var(--brand-default);
      line-height: 1.2;
    }

    & th:has(.c-tag--required, .c-tag--anyitem) {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: flex-start;
      gap: 1em;
      text-indent: -1em;
      padding-inline-start: 0;
      border-inline-start: 0;

      & .c-tag--required,
      & .c-tag--anyitem {
        text-indent: 0;
      }
    }

  }


  .c-table--settings th {
    padding-block-end: .5em;
    border-block-end: 0;
  }
}

@media (width >= 768px) {
  .c-table {
    & td,
    & th {
      padding-block-start: 1em;
      padding-inline: 1em;
    }

    & th {
      border-block-end: 1px solid var(--border-default);
    }

  }

  .c-table--settings th {
    border-block-end: 0;
  }
}


/* CONTACT.
------------------------------------------------------------------------------------*/

.c-contact-guide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(100% - var(--l-container-padding) * 2);
  margin-inline: auto;
  padding-block: calc(var(--l-container-padding) * 2) calc(var(--l-container-padding) * 3);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background-color: var(--color-navy-100);

  &::before,
  &::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  &::before {
    opacity: .5;
    inset: 0;
    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);
    background-size: 75% auto;
    background-position: center;
  }

  &::after {
    inset-block-end: 0;
    inset-inline: 0;
    block-size: var(--l-container-padding);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background-color: var(--bg-subtle);
  }

  & * {
    position: relative;
  }

  & + * {
    margin-block-start: 0;
  }
}

.c-contact-guide__title {
  display: flex;
  gap: .25em;
  font-size: var(--typography-h3-font-size);
}

.c-contact-guide__heading {
  font-size: 1em;
  color: var(--secondary-hover);
}

.c-contact-guide__icon {
  display: flex;
  width:  1.5em;
  height: 1.5em;
  color: var(--secondary-hover);

  & svg {
    width:  100%;
    height: 100%;
  }
}

@media (width >= 768px) {
  .c-contact-guide {
    margin-block-start: var(--layout-section-spacing-y-compact);
    padding-block: var(--layout-section-spacing-y-compact);

    &::before {
      background-repeat: repeat;
      background-size: auto;
      background-position: 0 -25%;
    }
  }

  .c-contact-guide__title {
    font-size: var(--typography-h1-font-size);
  }
}


/* CTA.
------------------------------------------------------------------------------------*/

.c-cta__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--typography-h2-font-size);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;

  &::before,
  &::after {
    content: "";
    inline-size: 100%;
    block-size: 1px;
    flex-grow: 1;
    background-color: currentColor;
  }
}

.c-cta__sub {
  font-size: min(var(--font-size-xl), 4.875vw);
  letter-spacing: var(--letter-spacing-loose);
  text-align: center;

  &, & * {
    font-feature-settings: normal !important;
    font-weight: var(--font-weight-bold);
  }
}

.c-cta__title {
  font-size: var(--typography-heading-font-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
}

.c-cta__text {
  font-weight: var(--font-weight-medium);

  & br {
    display: none;
  }
}

@media (width < 768px) {
  .c-cta__text {
    padding-inline: 1em;
  }

  .l-cta__container {

    & .c-btn--rounded {
      width: 100%;
      max-width: 480px;
      margin-inline: auto;
    }
    & .c-btn__text {
      padding-inline: 1.5em;
      font-size: min(var(--font-size-lg), 4.875vw);
      line-height: var(--line-height-snug);
      & > * {
        white-space: nowrap;
      }
    }

    & .c-btn__icon {
      inline-size: calc(4.5em + 1px);
      block-size: 4.5em;
      border-inline-end-width: 1px;
      border-inline-end-style: solid;
    }

    & .c-icon {
      inline-size: 2.25em;
      block-size:  2.25em;
    }
  }
}

@media (width >= 768px) {
  .c-cta__sub,
  .c-cta__title,
  .c-cta__text {
    text-align: center;
    & br {
      display: block;
    }
  }
  .c-cta__sub {
    font-size: 1.75em;
    line-height: 1.42857;
  }

  .l-cta__container {

    & .c-btn--rounded {
      color: var(--text-on-dark);
    }
    & .c-btn__icon {
      inline-size: calc(6em + 1px);
      block-size: 6em;
      border-inline-end-width: 1px;
      border-inline-end-style: solid;
    }

    & .c-icon {
      inline-size: 2.25em;
      block-size:  2.25em;
    }

    & .c-btn__text {
      padding-inline: 1.5em;
      font-size: 1.75em;

      & br {
        display: none;
      }
    }
  }
}


/*====================================================================================
4. UTILITY.
====================================================================================*/

.u-fc--alert {
  color: var(--status-error-text);
}

/* DISPLAY.
------------------------------------------------------------------------------------*/

.u-d-b { display: block; }
.u-d-ib { display: inline-block; }
.u-d-f { display: flex; }
.u-d-if { display: inline-flex; }
.u-d-g { display: grid; }

@media (width < 768px) {
  /* sp */
  .u-d-b--sp  { display: block; }
  .u-d-ib--sp { display: inline-block; }
  .u-d-f--sp  { display: flex; }
  .u-d-if--sp { display: inline-flex; }
  .u-d-g--sp  { display: grid; }
  /* pc */
  .u-d-b--pc, .u-d-ib--pc, .u-d-f--pc, .u-d-if--pc, .u-d-g--pc  { display: none; }
}
@media (width >= 768px) {
  /* sp */
  .u-d-b--sp, .u-d-ib--sp, .u-d-f--sp, .u-d-if--sp, .u-d-g--sp  { display: none; }
  /* pc */
  .u-d-b--pc  { display: block; }
  .u-d-ib--pc { display: inline-block; }
  .u-d-f--pc  { display: flex; }
  .u-d-if--pc { display: inline-flex; }
  .u-d-g--pc  { display: grid; }
}


/* LIST.
------------------------------------------------------------------------------------*/

.u-list--disc > *{
  margin-inline-start: 1.5em;
  list-style: outside disc;
  &::marker {
    color: var(--brand-default);
  }
}