@charset "UTF-8";


/* ===============================================
  * TODO: 作業用CSS *
  ある程度作業完了した段階で、対応するCSSにマージすること
=============================================== */

@import url(./_top_kaneko.css);
@import url(./_top_yoshioka.css);
@import url(./_top_tkhc.css);


/*
u- = utility,
m = margin, p = padding ,n = negative
t = top, b = bottom, l = left, r = right,

*/
/*-- カラー --*/
.u-color-accent {
  color: var(--color-emphasis);
}

.u-color-red {
  color: #f00;
}

.u-color-yellow {
  color: #ff0;
}

.u-color-blue {
  color: #00f;
}

/*--  margin --*/
/*margin-top*/
.u-mt-n10 {
  margin-top: -1rem;
}

.u-mt-10 {
  margin-top: 1rem;
}

.u-mt-20 {
  margin-top: 2rem;
}

.u-mt-30 {
  margin-top: 3rem;
}

.u-mt-40 {
  margin-top: 4rem;
}

.u-mt-50 {
  margin-top: 5rem;
}

/*margin-left*/
.u-ml-10 {
  margin-left: 1rem;
}

.u-ml-20 {
  margin-left: 2rem;
}

.u-ml-30 {
  margin-left: 3rem;
}

.u-ml-40 {
  margin-left: 4rem;
}

.u-ml-50 {
  margin-left: 5rem;
}

/*margin-right*/
.u-mr-10 {
  margin-right: 1rem;
}

.u-mr-20 {
  margin-right: 2rem;
}

.u-mr-30 {
  margin-right: 3rem;
}

.u-mr-40 {
  margin-right: 4rem;
}

.u-mr-50 {
  margin-right: 5rem;
}

/*margin-bottom*/
.u-mb-n10 {
  margin-bottom: -1rem;
}

.u-mb-10 {
  margin-bottom: 1rem;
}

.u-mb-20 {
  margin-bottom: 2rem;
}

.u-mb-30 {
  margin-bottom: 3rem;
}

.u-mb-40 {
  margin-bottom: 4rem;
}

.u-mb-50 {
  margin-bottom: 5rem;
}

/*-- padding --*/
/*padding-top*/
.u-pt-10 {
  padding-top: 1rem;
}

.u-pt-20 {
  padding-top: 2rem;
}

.u-pt-30 {
  padding-top: 3rem;
}

.u-pt-40 {
  padding-top: 4rem;
}

.u-pt-50 {
  padding-top: 5rem;
}

/*padding-left*/
.u-pl-10 {
  padding-left: 1rem;
}

.u-pl-20 {
  padding-left: 2rem;
}

.u-pl-30 {
  padding-left: 3rem;
}

.u-pl-40 {
  padding-left: 4rem;
}

.u-pl-50 {
  padding-left: 5rem;
}

/*padding-right*/
.u-pr-10 {
  padding-right: 1rem;
}

.u-pr-20 {
  padding-right: 2rem;
}

.u-pr-30 {
  padding-right: 3rem;
}

.u-pr-40 {
  padding-right: 4rem;
}

.u-pr-50 {
  padding-right: 5rem;
}

/*padding-bottom*/
.u-pb-10 {
  padding-bottom: 1rem;
}

.u-pb-20 {
  padding-bottom: 2rem;
}

.u-pb-30 {
  padding-bottom: 3rem;
}

.u-pb-40 {
  padding-bottom: 4rem;
}

.u-pb-50 {
  padding-bottom: 5rem;
}

.c-button {
  min-width: 30.5rem;
  border: 1px solid var(--color-secondary);
  border-radius: 0.4rem;
  display: block;
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  line-height: 1.5;
  padding-block: 1.35rem;
  padding-inline: 4.8rem;
  text-align: center;
  text-decoration: none;
}
.c-button[disabled] {
  opacity: 0.4;
}
@media screen and (min-width: 768px) {
  .c-button {
    min-width: 20rem;
  }
}
.c-button__primary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}
.c-button__secondary {
  background-color: transparent;
  color: var(--color-secondary);
}
.c-button__tertiary {
  width: fit-content;
  margin-inline: auto;
  border-color: #D8D8D8;
  padding: 1.4rem;

  color: var(--color-project-text);
  font-size: 1.3rem;
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
  line-height: 1;
}
.c-button__mini {
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: 1.3rem;
  line-height: 1.2308;
  padding-block: 0.8rem;
}

.required {
  background-color: var(--color-emphasis);
  border-radius: 0.2rem;
  color: var(--color-white);
  display: inline-block;
  font-size: 1rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.2rem 0.45rem;
}

:where(textarea) {
  resize: vertical;
}

.c-form__wrapper--column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem;
}
.c-form__wrapper--column-zipcode {
  width: fit-content;
  grid-template-columns: max-content 15rem 8rem;
}
.c-form__wrapper--column-zipcode .postmark {
  align-self: center;
}
.c-form__wrapper--column-zipcode .c-button__primary {
  min-width: 8rem;
  display: grid;
  place-content: center;
  padding: 0;
}
.c-form__wrapper--column-multi {
  grid-template-columns: repeat(3, auto);
}
.c-form__wrapper--column-multi > div {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
}
.c-form__wrapper--column-multi span {
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  align-self: center;
}
.c-form__wrapper--column-expiry * {
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.05em;
  line-height: 1.5;
  align-self: center;
}
.c-form__item {
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.c-form__item:nth-of-type(n+2) {
  margin-top: 3rem;
}
.c-form__item--wrapper {
  display: grid;
  gap: 1rem;
}
.c-form__item--list {
  border: 1px solid var(--color-gray-300);
  border-radius: 0.4rem;
  padding: 2rem;
}
.c-form__item--list.active {
  background-color: var(--color-gray-100);
}
.c-form__item--list > dd {
  margin-top: 1rem;
  line-height: 1.75;
}
@media screen and (min-width: 768px) {
  .c-form__item--list > dd {
    margin-top: 2rem;
  }
}
.c-form__item--list > dd:empty {
  margin: 0;
}
.c-form__item--list > dd strong {
  display: block;
  margin: 1.5rem 0 0.4rem;
}
.c-form__item--list > dd img {
  width: auto;
}
.c-form__item--notice {
  margin-top: 1rem;
  font-weight: var(--fw-regular);
}
.c-form__item--note {
  margin-top: 1rem;
  font-weight: normal;
}
.c-form__item--note p {
  font-size: 1.2rem;
}
.c-form__item--block {
  display: grid;
  row-gap: 1rem;
}
.c-form__item dd {
  margin-top: 1.4rem;
}
.c-form__item dd:nth-of-type(n+2) {
  margin-top: 1rem;
}
.c-form__item--center {
  text-align: center;
}
.c-form__toggleitem {
  margin-top: 3rem;
}
.c-form__toggleitem + * {
  margin-top: 3rem;
}
.c-form__subitem {
  font-weight: var(--fw-regular);
}
.c-form__subitem:not(:first-of-type) {
  margin-top: 3rem;
}
.c-form__subitem dd {
  margin-top: 1.4rem;
}
.c-form__input--text, .c-form__input--select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: 0.4rem;
  box-sizing: border-box;
  color: var(--color-black);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  padding: 1rem 1.5rem;
}
.c-form__input--text:focus, .c-form__input--select:focus {
  outline-color: var(--color-black);
}
.c-form__input--text::placeholder, .c-form__input--select::placeholder {
  color: var(--color-gray-400);
}
.c-form__input--text.error_input, .c-form__input--select.error_input {
  border-color: var(--color-emphasis);
}
.c-form__input--select {
  background-image: url(../Contents/ThemeImage/common/arrow.svg);
  background-repeat: no-repeat;
  background-size: 1.2rem 0.7rem;
  background-position: top 50% right 0.5rem;
  padding: 1rem 2rem 1rem 1.5rem;
}
@media screen and (min-width: 768px) {
  .c-form__input--select {
    padding: 1rem 2.5rem 1rem 1.5rem;
    background-size: 1.2rem;
    background-position: top 48% right 1rem;
  }
}
.c-form__input--check, .c-form__input--radio {
  display: flex;
  gap: 1rem;
}
.c-form__input--check label, .c-form__input--radio label {
  width: max-content;
  align-self: center;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.05em;
  line-height: 1.6154;
  position: relative;
}
.c-form__input--check input, .c-form__input--radio input {
  width: 2rem;
  height: 2rem;
  appearance: none;
  -webkit-appearance: none;
  align-self: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-500);
  border-radius: 0;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: relative;
}
.c-form__input--check input:checked, .c-form__input--radio input:checked {
  border-color: var(--color-primary);
}
.c-form__input--check input:checked::before, .c-form__input--radio input:checked::before {
  width: 1rem;
  height: 1rem;
  background-color: var(--color-primary);
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.c-form__input--check-column, .c-form__input--radio-column {
  display: grid;
  grid-template-columns: auto 1fr;
}
.c-form__input--check > li, .c-form__input--radio > li {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
.c-form__input--radio {
  flex-wrap: wrap;
}
.c-form__input--radio input {
  border-radius: 50%;
}
.c-form__input--radio input::before {
  border-radius: 50%;
}
.c-form__input--radio-nolabel input {
  border-radius: 50%;
}
.c-form__input--radio-nolabel input::before {
  border-radius: 50%;
}
.c-form__input--size-half {
  width: 50%;
}
@media screen and (min-width: 768px) {
  .c-form__input--size-half {
    width: 28%;
  }
}
.c-form__same-select {
  margin-bottom: 2rem;
}
.c-form__item--center .c-form__input--check {
  justify-content: center;
}
.c-form__error .error_inline {
  color: var(--color-emphasis) !important;
  display: block;
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-top: 0.5rem;
}
.c-form__error .error_inline:empty {
  display: none;
}
.c-form__error .error_inline[style*="visibility:hidden"] {
  display: none;
}

.button__group {
  width: fit-content;
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
  margin-inline: auto;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .button__group {
    flex-direction: row;
    margin-top: 4rem;
  }
}
.button__group + .c-form__error .error_inline {
  margin-top: 1rem;
}

.c-announce-freeshipping {
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  margin-block: 1rem;
  text-align: center;
  word-break: auto-phrase;
}
@media screen and (min-width: 768px) {
  .c-announce-freeshipping {
    line-height: 1.8;
    margin-block: 2rem;
  }
}
.c-announce-freeshipping__emphasis {
  color: var(--color-emphasis);
}

.c-heading {
  width: 100%;
  display: block;
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.4444;
}
@media screen and (min-width: 768px) {
  .c-heading {
    font-size: 2rem;
    line-height: 1.5;
  }
}
.c-heading--border {
  border-bottom: 1px solid var(--color-gray-300);
  padding-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .c-heading--border {
    padding-bottom: 1.6rem;
  }
}
.c-heading--border-left {
  padding-left: 1.5rem;
  border-left: 0.4rem solid var(--color-primary);
}
.c-heading--large {
  font-size: 1.8rem;
  line-height: 1.4444;
}
@media screen and (min-width: 768px) {
  .c-heading--large {
    font-size: 2rem;
    line-height: 1.5;
  }
}
.c-heading--medium {
  font-size: 1.6rem;
  line-height: 1.375;
}

.c-linebutton {
  --line-green: #06c755;
  --line-hover-layer: rgba(0,0,0, 0.1);
  --line-white: #fff;
  --line-border: rgba(0,0,0, 0.08);
  width: 100%;
  background-color: var(--line-green);
  border-radius: 0.4rem;
}
.c-linebutton__link {
  background-color: transparent;
  display: grid;
  grid-template-columns: 5rem 1fr;
  text-decoration: none;
  transition: background-color var(--transition-default);
}
.c-linebutton__icon {
  width: 100%;
  aspect-ratio: 1;
  border-right: 1px solid var(--line-border);
  display: grid;
  place-content: center;
  padding: 0.6rem 0.8rem;
}
.c-linebutton__text {
  align-self: center;
  color: var(--line-white);
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
}
.c-linebutton__notice {
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-top: 1rem;
  text-align: center;
}
@media (hover: hover) {
  .c-linebutton:hover .c-linebutton__link {
    background-color: var(--line-hover-layer);
  }
}

.c-loading {
  width: max-content !important;
  max-width: 100vw;
  height: auto;
  background-color: var(--color-white);
  border-radius: 1rem;
  box-shadow: 0 0 0.5rem var(--color-gray-500);
  padding: 1rem;
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.c-loading__icon {
  width: 3.2rem;
  height: 3.2rem;
  display: block;
  margin-inline: auto;
}
.c-loading__message {
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.5;
  margin-top: 1rem;
}

.c-step-indicator {
  --step-item-width: 25%;
  --step-icon-width: 2.6rem;
  --margin-icon-to-line: 1.5rem;
  --step-items-gap: 3rem;
  --padding-outside-horizontal: 4vw;
  display: grid;
  padding: 0 var(--padding-outside-horizontal);
}
@media screen and (min-width: 768px) {
  .c-step-indicator {
    --step-item-width: 8rem;
    --padding-outside-horizontal: 4%;
  }
}
.c-bg-area .c-step-indicator {
  --padding-outside-horizontal: 0;
}
@media screen and (min-width: 768px) {
  .c-step-indicator {
    justify-content: center;
  }
}
.c-step-indicator__wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  column-gap: var(--step-items-gap);
}
.c-step-indicator__item {
  position: relative;
  width: var(--step-item-width);
  color: var(--color-gray-300);
  text-align: center;
}
.c-step-indicator__item--icon {
  width: var(--step-icon-width);
  aspect-ratio: 1;
  margin-inline: auto;
}
.c-step-indicator__item--icon svg {
  overflow: visible;
}
.c-step-indicator__item--name {
  color: var(--color-gray-500);
  font-size: 1.2rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin-top: 0.7rem;
}
.c-step-indicator__item:where(:nth-of-type(n + 2)) .c-step-indicator__item--icon::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--step-icon-width) / 2);
  left: calc((var(--step-items-gap) + (100% - (var(--step-icon-width) + var(--margin-icon-to-line) * 2)) / 4) * -1);
  width: calc(var(--step-items-gap) + (100% - (var(--step-icon-width) + var(--margin-icon-to-line) * 2)) / 2);
  height: 2px;
  background-color: var(--color-gray-300);
}
.c-step-indicator__item--active {
  color: var(--color-primary);
}
.c-step-indicator__item--active .c-step-indicator__item--icon::before {
  background-color: var(--color-primary);
}
.c-step-indicator__item--active .c-step-indicator__item--name {
  color: var(--color-primary);
}

.c-pager {
  margin-top: 3rem;
}
.c-pager__wrapper {
  display: flex;
  justify-content: center;
  column-gap: 0.6rem;
}
.c-pager__item {
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--color-gray-500);
  display: grid;
  place-content: center;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .c-pager__item {
    width: 4rem;
    font-size: 1.5rem;
  }
}
.c-pager__num--active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.c-pager__button {
  width: 3rem;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  padding: 0.5rem;
}
.c-pager__button svg {
  width: auto;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .c-pager__button {
    width: 4rem;
  }
}

:where(.c-pager__totalcount) {
  display: none;
}

:where(.c-pager__showrange) {
  display: none;
}

.c-tab {
  --border-radius: 0.4rem;
  --border-color: var(--color-gray-500);
}
.c-tab__selector {
  display: flex;
  column-gap: 0.5rem;
  position: relative;
}
.c-tab__selector::before {
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}
.c-tab__selector--item {
  min-width: calc((100% - 1rem) / 3);
}
.c-tab__selector--button {
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-100);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  box-sizing: border-box;
  color: var(--color-gray-500);
  display: grid;
  place-content: center;
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  .c-tab__selector--button {
    font-size: 1.6rem;
    padding: 2rem;
  }
}
.c-tab__selector--button:not(.active) {
  cursor: pointer;
}
.c-tab__selector--button.active {
  background-color: var(--color-white);
  border: 1px solid var(--border-color);
  border-bottom: none;
  color: var(--color-black);
  font-weight: var(--fw-bold);
  position: relative;
  z-index: 2;
}
.c-tab__content {
  margin-block: 2rem;
  padding-inline: 1.5rem;
}
.c-tab__content--item:not(.active) {
  height: 0;
  visibility: hidden;
}

:root {
  --bg-padding-block: 3rem;
  --bg-padding-inline: 3.5rem;
  --bg-color: var(--color-gray-100);
  --bg-border-color: var(--color-gray-300);
  --title-transform: none;
  --title-direction: column;
}

.c-breadcrumb {
  grid-column: 1/-1;
  width: 100%;
  max-width: 100vw;
  /* 今回ページによってmargin-bottom: 0;もあるので、ページごとに設定願います。 */
  /* margin-bottom: 2rem; */
  /* margin-bottom: 1rem; */
  padding: 0;
  overflow-x: auto;
}
.c-breadcrumb > ol {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 1rem calc((100% - var(--inner-width, 92%)) / 2) 0;
  list-style: none;
  overflow-x: auto;
}
@media screen and (min-width: 768px) {
  .c-breadcrumb > ol {
    padding: 1.5rem 0;
  }
}
.c-breadcrumb > ol > li:not(:last-of-type) {
  display: flex;
  align-items: center;
}
.c-breadcrumb > ol > li:not(:last-of-type)::after {
  content: "";
  width: auto;
  height: 7px;
  aspect-ratio: 1;
  margin: 0 0.8rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225.657%22%20height%3D%229.899%22%20viewBox%3D%220%200%205.657%209.899%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_10796%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2010796%22%20transform%3D%22translate(60.811%20-116.673)%20rotate(45)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_18%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2018%22%20width%3D%227%22%20height%3D%221%22%20transform%3D%22translate(40%20125)%22%20fill%3D%22%23acacac%22%2F%3E%20%3Cpath%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_18_-_%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2018%20-%20%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%22%20d%3D%22M0%2C0H7V1H0Z%22%20transform%3D%22translate(40%20125)%22%20fill%3D%22%237c7c7c%22%2F%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_19%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2019%22%20width%3D%227%22%20height%3D%221%22%20transform%3D%22translate(47%20125)%20rotate(90)%22%20fill%3D%22%23acacac%22%2F%3E%20%3Cpath%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_19_-_%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2019%20-%20%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%22%20d%3D%22M0%2C0H7V1H0Z%22%20transform%3D%22translate(47%20125)%20rotate(90)%22%20fill%3D%22%237c7c7c%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.c-breadcrumb__text {
  color: var(--color-text-default, #000);
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-decoration: none;
  word-break: keep-all;
  display: block;
}

.c-page-title {
  display: flex;
  flex-direction: var(--title-direction);
  align-items: center;
  gap: 0.8rem 0;
  margin: 3rem 0 4rem;
  text-align: center;
  text-transform: var(--title-transform);
}
.c-page-title--ja {
  font-family: var(--font-ja);
}
.c-page-title--en {
  font-family: var(--font-en);
}
.c-page-title__item {
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}
.c-page-title--ja {
  font-size: 3rem;
  line-height: 2;
}
.c-page-title--en {
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.c-page-title--sub {
  margin: 7.7rem 0 2.5rem;
  font-size: 2rem;
  line-height: 1;
  text-align: center;
}
.c-page-title[data-page="static"]{
  align-items: flex-start;
  font-size: 1.8rem;
  line-height: 1.66666;
  margin: 1rem 0 2rem;
}
@media screen and (max-width: 767px) {
  .c-page-title {
    width: var(--inner-width);
    margin-inline: auto;
    font-size: 2.6rem;
  }
  .c-page-title--sub {
    margin: 4rem 0 3rem;
  }
  .c-page-title[data-page="static"]{
    margin: 2.5rem auto 2rem;
  }
}

.l-section__text--heading--underline{
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  font-size: 2.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: normal;
  line-height: 1;
  color: var(--color-project-primary);
  border-bottom: .5rem solid var(--color-project-primary);
}
[data-category="trekking"]{
  --color-project-primary:#948047;
}
@media (min-width: 768px) {
  .l-section__text--heading--underline{
    font-size: 2.8rem;
  }
}
.c-page-title--home {
  flex-direction: column-reverse;
  row-gap: .4rem;
  align-items: flex-start;

  margin-block: 0;

  color: var(--color-project-primary);
  font-weight: var(--fw-bold);
  text-align: left;

  .c-page-title--en {
    font-size: 2.9rem;
    letter-spacing: normal;
    line-height: calc(30 / 29);

    @media (min-width: 768px) {
      font-size: 6rem;
    }
  }

  .c-page-title--ja {
    font-size: 1.2rem;
    letter-spacing: .03em;
    line-height: calc(20 / 12);
  }
}

.c-breadcrumb + .c-main-title {
  margin: 1.5rem auto 4rem;
}

.c-lead {
  font-size: 1.4rem;
  line-height: 1.85;
  letter-spacing: 0.05em;
  text-align: center;
  margin-inline: auto;
}
.c-lead[data-page="static"]{
  text-align: left;
}
@media screen and (max-width: 767px) {
  .c-lead {
    width: var(--inner-width);
    text-align: left;
  }
}
.c-lead--justify {
  text-align: justify;
}
.c-lead--left {
  text-align: left;
}
.c-lead--right {
  text-align: right;
}
.c-lead--center {
  text-align: center;
}
.form__section--content .c-lead {
  width: 100%;
}

.c-easyuser-text {
  margin: 0 0 3rem;
  font-size: 1.6rem;
  color: var(--color-emphasis);
  text-align: center;
  font-weight: var(--fw-bold);
}

.c-noitem {
  text-align: center;
  font-size: 1.6rem;
  margin: 2rem 0 0;
}

.c-bg-area {
  background-color: var(--bg-color);
  border: 1px solid var(--bg-border-color);
  padding: var(--bg-padding-block) var(--bg-padding-inline);
  border-radius: 0.4rem;
}
@media screen and (max-width: 767px) {
  .c-bg-area {
    border: 0;
    border-radius: 0;
    padding: 3rem 1.5rem;
  }
}

.c-navigation {
  width: 100%;
  max-width: 240px;
}
.c-navigation-list {
  counter-reset: count_menu;
}
.c-navigation-list__heading {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1.6154;
  padding: 1rem 1.5rem;
}
@media screen and (min-width: 768px) {
  .c-navigation-list__heading {
    border-radius: 0.4rem 0.4rem 0 0;
    font-size: 1.3rem;
  }
}
.c-navigation-list__item {
  counter-increment: count_menu;
  list-style: none;
}
.c-navigation-list__item a {
  position: relative;
  display: flex;
  padding: 1.7rem 3.3rem 1.8rem 1.7rem;
  border-top: 1px dotted var(--color-gray-300);
  font-size: 1.3rem;
  line-height: 1.6;
  color: inherit;
  text-decoration: none;
}
.c-navigation-list__item a::after {
  content: "";
  position: absolute;
  top: 2.3rem;
  right: 1.1rem;
  width: 0.9rem;
  height: 0.9rem;
  background: url(../Contents/ThemeImage/common/navigation-arrow.svg) no-repeat center/contain;
  flex-shrink: 0;
}
.c-navigation-list__item.active {
  background-color: var(--color-secondary);
}
.c-navigation-list__item:last-child a {
  border-bottom: 1px dotted var(--color-gray-300);
}
.c-navigation-list--num a::before {
  content: counter(count_menu) ".";
}
.c-navigation-list__accordion {
  width: 100%;
}
.c-navigation-list__accordion--heading {
  height: 3.5rem;
  border-top: 1px dotted var(--color-gray-300);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
  line-height: 1.3;
  list-style: none;
  padding-block: 0.5rem;
  padding-inline-start: 1rem;
  padding-inline-end: 3.5rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .c-navigation-list__accordion--heading {
    height: auto;
    line-height: 1.6;
    padding-block: 1.75rem;
    padding-inline-start: 1.7rem;
    padding-inline-end: 3.3rem;
  }
}
.c-navigation-list__accordion--heading::-webkit-details-marker {
  display: none;
}
.c-navigation-list__accordion--heading::after {
  width: 1.2rem;
  height: 1.2rem;
  background-image: url(../Contents/ThemeImage/common/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  transition: transform var(--transition-default);
}
@media screen and (min-width: 768px) {
  .c-navigation-list__accordion--heading::after {
    width: 0.9rem;
    height: 0.9rem;
    right: 1rem;
  }
}
.c-navigation-list__accordion[open] .c-navigation-list__accordion--heading::after {
  transform: translateY(-50%) rotate(180deg);
}
.c-navigation-list__accordion--item a {
  border: none;
}
.c-navigation-list__accordion--item a::after {
  content: none;
}
.c-navigation-list__accordion--item.active {
  background-color: var(--color-secondary);
}
.c-navigation--sticky {
  position: sticky;
  top: calc(var(--height-header) + 1svh);
}
@media screen and (min-width: 768px) {
  .c-navigation--sticky {
    max-height: 70vh;
    overflow: auto;
  }
}
.c-navigation.js-index-highlight .--active {
  background-color: var(--color-secondary);
}
@media screen and (max-width: 767px) {
  .c-navigation {
    max-width: none;
    width: var(--inner-width);
    margin: 0 auto;
  }
  .c-navigation-list__item a {
    display: flex;
    align-items: center;
    height: 4.6rem;
    padding: 0.5rem 3.5rem 0.5rem 1rem;
    font-size: 1.3rem;
    line-height: 1.3;
  }
  .c-navigation-list__item a::after {
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%) rotate(-90deg);
    width: 1.2rem;
    height: 1.2rem;
    background-image: url(../Contents/ThemeImage/common/arrow.svg);
  }
  .c-navigation--sticky {
    position: static;
  }
}

.c-social-login__text--button {
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .c-social-login__text--button {
    font-size: 1.4rem;
  }
}
.c-social-login__text--annotation {
  color: var(--color-gray-500);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .c-social-login__text--annotation {
    font-size: 1.2rem;
  }
}
.c-social-login__button {
  --color-bg: #000;
  --color-border: transparent;
  --color-separater: rgba(0, 0, 0, .2);
  --color-text: #fff;
  --border-width: 1px;
  --border-radius: .4rem;
  --icon-fill-ratio: 16%;
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: var(--icon-fill-ratio) 1fr;
  width: 100%;
  padding: 0;
  background-color: var(--color-bg);
  border: solid var(--border-width) var(--color-border);
  border-radius: var(--border-radius);
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .c-social-login__button {
    --icon-fill-ratio: 12%;
  }
}
.c-social-login__button::before {
  content: "";
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-right: solid var(--border-width) var(--color-separater);
  background-image: var(--social-service-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50% auto;
}
.c-social-login__button:disabled {
  pointer-events: none;
}
.c-social-login__button-text {
  display: grid;
  align-items: center;
  padding: 0 1rem;
}
.c-social-login__button[data-button-name=apple] {
  --social-service-logo: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22842.32007%22%20height%3D%221000.0001%22%3E%3Cscript%20xmlns%3D%22%22%2F%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M824.66636%20779.30363c-15.12299%2034.93724-33.02368%2067.09674-53.7638%2096.66374-28.27076%2040.3074-51.4182%2068.2078-69.25717%2083.7012-27.65347%2025.4313-57.2822%2038.4556-89.00964%2039.1963-22.77708%200-50.24539-6.4813-82.21973-19.629-32.07926-13.0861-61.55985-19.5673-88.51583-19.5673-28.27075%200-58.59083%206.4812-91.02193%2019.5673-32.48053%2013.1477-58.64639%2019.9994-78.65196%2020.6784-30.42501%201.29623-60.75123-12.0985-91.02193-40.2457-19.32039-16.8514-43.48632-45.7394-72.43607-86.6641-31.060778-43.7024-56.597041-94.37983-76.602609-152.15586C10.740416%20658.44309%200%20598.01283%200%20539.50845c0-67.01648%2014.481044-124.8172%2043.486336-173.25401C66.28194%20327.34823%2096.60818%20296.6578%20134.5638%20274.1276c37.95566-22.53016%2078.96676-34.01129%20123.1321-34.74585%2024.16591%200%2055.85633%207.47508%2095.23784%2022.166%2039.27042%2014.74029%2064.48571%2022.21538%2075.54091%2022.21538%208.26518%200%2036.27668-8.7405%2083.7629-26.16587%2044.90607-16.16001%2082.80614-22.85118%20113.85458-20.21546%2084.13326%206.78992%20147.34122%2039.95559%20189.37699%2099.70686-75.24463%2045.59122-112.46573%20109.4473-111.72502%20191.36456.67899%2063.8067%2023.82643%20116.90384%2069.31888%20159.06309%2020.61664%2019.56727%2043.64066%2034.69027%2069.2571%2045.4307-5.55531%2016.11062-11.41933%2031.54225-17.65372%2046.35662zM631.70926%2020.0057c0%2050.01141-18.27108%2096.70693-54.6897%20139.92782-43.94932%2051.38118-97.10817%2081.07162-154.75459%2076.38659-.73454-5.99983-1.16045-12.31444-1.16045-18.95003%200-48.01091%2020.9006-99.39207%2058.01678-141.40314%2018.53027-21.27094%2042.09746-38.95744%2070.67685-53.0663C578.3158%209.00229%20605.2903%201.31621%20630.65988%200c.74076%206.68575%201.04938%2013.37191%201.04938%2020.00505z%22%2F%3E%3Cscript%20xmlns%3D%22%22%2F%3E%3C%2Fsvg%3E");
  --color-separater: transparent;
}
.c-social-login__button[data-button-name=facebook] {
  --social-service-logo: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216.283%22%20height%3D%2216.184%22%20viewBox%3D%220%200%2016.283%2016.184%22%3E%20%3Cpath%20id%3D%22f_logo_RGB-White_1024%22%20d%3D%22M16.283%2C8.141a8.141%2C8.141%2C0%2C1%2C0-9.414%2C8.043V10.495H4.8V8.141H6.869V6.348A2.873%2C2.873%2C0%2C0%2C1%2C9.944%2C3.18a12.525%2C12.525%2C0%2C0%2C1%2C1.822.159v2H10.74A1.177%2C1.177%2C0%2C0%2C0%2C9.414%2C6.615V8.141h2.258l-.361%2C2.353h-1.9v5.689A8.143%2C8.143%2C0%2C0%2C0%2C16.283%2C8.141Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  --color-bg: var(--color-social-facebook-primary);
  --color-border: var(--color-social-facebook-primary);
  --color-separater: transparent;
}
.c-social-login__button[data-button-name=x] {
  --social-service-logo: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219%22%20height%3D%2218%22%20viewBox%3D%220%200%2019%2018%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_10845%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2010845%22%20transform%3D%22translate(0.274%20-0.21)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_3127%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%203127%22%20width%3D%2219%22%20height%3D%2218%22%20transform%3D%22translate(-0.274%200.21)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_49715%22%20data-name%3D%22%E3%83%91%E3%82%B9%2049715%22%20d%3D%22M6.648%2C8.034h0l-.554-.793L1.682.931h1.9l3.56%2C5.092.554.793%2C4.627%2C6.619h-1.9ZM12.322%2C0%2C7.792%2C5.266%2C4.173%2C0H0L5.472%2C7.963%2C0%2C14.323H1.236L6.021%2C8.762l3.821%2C5.561h4.173L8.341%2C6.065h0L13.559%2C0Z%22%20transform%3D%22translate(2.202%202.523)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  --color-bg: var(--color-social-x-primary);
  --color-separater: transparent;
}
.c-social-login__button[data-button-name=yahoo] {
  --social-service-logo: url(/Contents/ImagesPkg/socialLogin/logo_yahoo.png);
  --color-bg: var(--color-social-yahoo-primary);
  --color-separater: transparent;
}
.c-social-login__button[data-button-name=google] {
  --social-service-logo: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20style%3D%22display%3A%20block%3B%22%3E%20%3Cpath%20fill%3D%22%23EA4335%22%20d%3D%22M24%209.5c3.54%200%206.71%201.22%209.21%203.6l6.85-6.85C35.9%202.38%2030.47%200%2024%200%2014.62%200%206.51%205.38%202.56%2013.22l7.98%206.19C12.43%2013.72%2017.74%209.5%2024%209.5z%22%3E%3C%2Fpath%3E%20%3Cpath%20fill%3D%22%234285F4%22%20d%3D%22M46.98%2024.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58%202.96-2.26%205.48-4.78%207.18l7.73%206c4.51-4.18%207.09-10.36%207.09-17.65z%22%3E%3C%2Fpath%3E%20%3Cpath%20fill%3D%22%23FBBC05%22%20d%3D%22M10.53%2028.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92%2016.46%200%2020.12%200%2024c0%203.88.92%207.54%202.56%2010.78l7.97-6.19z%22%3E%3C%2Fpath%3E%20%3Cpath%20fill%3D%22%2334A853%22%20d%3D%22M24%2048c6.48%200%2011.93-2.13%2015.89-5.81l-7.73-6c-2.15%201.45-4.92%202.3-8.16%202.3-6.26%200-11.57-4.22-13.47-9.91l-7.98%206.19C6.51%2042.62%2014.62%2048%2024%2048z%22%3E%3C%2Fpath%3E%20%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h48v48H0z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
  --color-text: #1F1F1F;
  --color-bg: #fff;
  --color-border: #747775;
  --color-separater: transparent;
}
.c-social-login__button[data-button-name=google] .c-social-login__text--button {
  font-family: Roboto, sans-serif;
  font-weight: 500;
}
.c-social-login__button[data-button-name=line] {
  --social-service-logo: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22213.378%22%20height%3D%22203.31%22%20viewBox%3D%220%200%20213.378%20203.31%22%3E%20%3Cpath%20id%3D%22%E5%89%8D%E9%9D%A2%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A7%E5%9E%8B%E6%8A%9C%E3%81%8D_2%22%20data-name%3D%22%E5%89%8D%E9%9D%A2%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A7%E5%9E%8B%E6%8A%9C%E3%81%8D%202%22%20d%3D%22M-12127.184%2C2867.31a3.556%2C3.556%2C0%2C0%2C1-2.871-1.113c-1.309-1.561-.809-4.4-.54-5.926.015-.081.028-.158.041-.231.217-1.285%2C1.074-6.441%2C1.4-8.382.076-.456.123-.737.125-.751.585-4.442.473-7.6-.344-9.648-1.18-2.927-5.763-4.476-9.4-5.26a122.935%2C122.935%2C0%2C0%2C1-35.571-10.187%2C104.139%2C104.139%2C0%2C0%2C1-28.269-19.014%2C84.294%2C84.294%2C0%2C0%2C1-18.654-25.768%2C72.445%2C72.445%2C0%2C0%2C1-6.731-30.449c0-47.741%2C47.859-86.581%2C106.688-86.581s106.69%2C38.84%2C106.69%2C86.581a70.007%2C70.007%2C0%2C0%2C1-1.4%2C14%2C69.475%2C69.475%2C0%2C0%2C1-4.237%2C13.441%2C81.706%2C81.706%2C0%2C0%2C1-7.136%2C13.039%2C108.912%2C108.912%2C0%2C0%2C1-10.1%2C12.791h.006a181.007%2C181.007%2C0%2C0%2C1-20.939%2C19.872c-7.426%2C6.149-15.869%2C12.528-25.1%2C18.959-9.818%2C6.844-17.946%2C11.951-23.035%2C15.03a140.192%2C140.192%2C0%2C0%2C1-14.755%2C8.08A16.123%2C16.123%2C0%2C0%2C1-12127.184%2C2867.31Zm5.188-118.846%2C0%2C0%2C21.33%2C28.8a1.977%2C1.977%2C0%2C0%2C0%2C.524.513.058.058%2C0%2C0%2C0%2C.024.015%2C1.126%2C1.126%2C0%2C0%2C0%2C.119.076l.007%2C0c.022.011.044.025.059.034l.093.042%2C0%2C0%2C.021.01.011%2C0c.023.011.046.021.069.03l.034.013.006%2C0%2C.027.009.069.023.069.023.015%2C0%2C.016%2C0a2.008%2C2.008%2C0%2C0%2C0%2C.531.071h7.524a2.039%2C2.039%2C0%2C0%2C0%2C2.038-2.035V2729.55a2.04%2C2.04%2C0%2C0%2C0-2.038-2.038l-7.564%2C0a2.04%2C2.04%2C0%2C0%2C0-2.038%2C2.038V2757.2l-21.3-28.77a2.044%2C2.044%2C0%2C0%2C0-.162-.212.063.063%2C0%2C0%2C1-.013-.015l-.009-.01c-.036-.039-.074-.08-.114-.116l-.012-.009a.325.325%2C0%2C0%2C1-.027-.024%2C1.144%2C1.144%2C0%2C0%2C0-.111-.1l-.01-.006a.486.486%2C0%2C0%2C1-.045-.033.839.839%2C0%2C0%2C0-.072-.051l-.007%2C0-.028-.019-.031-.02-.03-.02-.011-.006c-.029-.017-.064-.037-.1-.055l-.031-.015-.014-.006-.02-.009c-.04-.019-.081-.034-.12-.049a.556.556%2C0%2C0%2C0-.064-.025c-.029-.011-.061-.021-.092-.03l-.03-.01a.344.344%2C0%2C0%2C0-.074-.019l-.119-.028-.037%2C0h-.008l-.045-.006-.051-.006-.06-.006h-.009c-.033%2C0-.064-.006-.1-.006h-7.595a2.039%2C2.039%2C0%2C0%2C0-2.038%2C2.035v46.563a2.04%2C2.04%2C0%2C0%2C0%2C2.038%2C2.038h7.564a2.04%2C2.04%2C0%2C0%2C0%2C2.037-2.038v-27.647Zm41.905-20.954a2.04%2C2.04%2C0%2C0%2C0-2.038%2C2.038v46.56a2.04%2C2.04%2C0%2C0%2C0%2C2.038%2C2.038h29.974a2.04%2C2.04%2C0%2C0%2C0%2C2.037-2.038v-7.565a2.04%2C2.04%2C0%2C0%2C0-2.037-2.038h-20.371v-7.856h20.371a2.04%2C2.04%2C0%2C0%2C0%2C2.037-2.038v-7.568a2.038%2C2.038%2C0%2C0%2C0-2.037-2.035h-20.371v-7.859h20.371a2.038%2C2.038%2C0%2C0%2C0%2C2.037-2.035v-7.568a2.04%2C2.04%2C0%2C0%2C0-2.037-2.038Zm-70.424%2C0a2.038%2C2.038%2C0%2C0%2C0-2.034%2C2.038v46.56a2.038%2C2.038%2C0%2C0%2C0%2C2.034%2C2.038h7.568a2.04%2C2.04%2C0%2C0%2C0%2C2.037-2.038v-46.56a2.04%2C2.04%2C0%2C0%2C0-2.037-2.038Zm-40.45%2C0a2.04%2C2.04%2C0%2C0%2C0-2.037%2C2.038v46.56a2.04%2C2.04%2C0%2C0%2C0%2C2.037%2C2.038h29.974a2.04%2C2.04%2C0%2C0%2C0%2C2.038-2.038v-7.565a2.04%2C2.04%2C0%2C0%2C0-2.038-2.038h-20.371v-36.958a2.04%2C2.04%2C0%2C0%2C0-2.037-2.038Z%22%20transform%3D%22translate(12228.001%20-2664)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  --color-bg: var(--color-social-line-primary);
  --color-separater: rgba(0, 0, 0, .2);
}
.c-social-login__button[data-button-name=line] .c-social-login__text--button, .c-social-login__button[data-button-name=line]::before {
  z-index: 2;
}
.c-social-login__button[data-button-name=line]::after {
  content: "";
  position: absolute;
  top: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  border-radius: var(--border-radius);
}
@media (hover: none) {
  .c-social-login__button[data-button-name=line] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .c-social-login__button[data-button-name=line]:active::after {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
  .c-social-login__button[data-button-name=line]:hover::after {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
.c-social-login__button[data-button-name=line]:active::after {
  background-color: rgba(0, 0, 0, 0.3);
}
.c-social-login__button[data-button-name=line]:disabled {
  --social-service-logo: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22213.377%22%20height%3D%22203.31%22%20viewBox%3D%220%200%20213.377%20203.31%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_66360%22%20data-name%3D%22%E3%83%91%E3%82%B9%2066360%22%20d%3D%22M266.656%2C144.924c0-47.739-47.859-86.579-106.689-86.579S53.279%2C97.185%2C53.279%2C144.924c0%2C42.8%2C37.955%2C78.642%2C89.225%2C85.418%2C3.474.751%2C8.2%2C2.291%2C9.4%2C5.261%2C1.076%2C2.7.7%2C6.922.345%2C9.647%2C0%2C0-1.252%2C7.528-1.523%2C9.133-.465%2C2.7-2.145%2C10.549%2C9.241%2C5.752s61.441-36.179%2C83.824-61.941h-.005c15.461-16.957%2C22.869-34.164%2C22.869-53.27Z%22%20transform%3D%22translate(-53.279%20-58.345)%22%20fill%3D%22rgba(30%2C30%2C30%2C0.2)%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_66361%22%20data-name%3D%22%E3%83%91%E3%82%B9%2066361%22%20d%3D%22M231.163%2C172.49H201.189a2.037%2C2.037%2C0%2C0%2C1-2.037-2.037V123.892a2.037%2C2.037%2C0%2C0%2C1%2C2.037-2.037h29.974a2.042%2C2.042%2C0%2C0%2C1%2C2.037%2C2.037v7.566a2.037%2C2.037%2C0%2C0%2C1-2.037%2C2.037h-20.37v7.857h20.37a2.043%2C2.043%2C0%2C0%2C1%2C2.037%2C2.037v7.566a2.037%2C2.037%2C0%2C0%2C1-2.037%2C2.037h-20.37v7.857h20.37a2.043%2C2.043%2C0%2C0%2C1%2C2.037%2C2.037v7.566a2.037%2C2.037%2C0%2C0%2C1-2.037%2C2.037Z%22%20transform%3D%22translate(-53.279%20-58.345)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_66362%22%20data-name%3D%22%E3%83%91%E3%82%B9%2066362%22%20d%3D%22M120.289%2C172.49a2.037%2C2.037%2C0%2C0%2C0%2C2.037-2.037v-7.566a2.043%2C2.043%2C0%2C0%2C0-2.037-2.037H99.918V123.892a2.043%2C2.043%2C0%2C0%2C0-2.037-2.037H90.315a2.037%2C2.037%2C0%2C0%2C0-2.037%2C2.037v46.561a2.037%2C2.037%2C0%2C0%2C0%2C2.037%2C2.037h29.974Z%22%20transform%3D%22translate(-53.279%20-58.345)%22%20fill%3D%22%23fff%22%2F%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_23727%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2023727%22%20width%3D%2211.64%22%20height%3D%2250.635%22%20rx%3D%222.037%22%20transform%3D%22translate(75.451%2063.51)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_66363%22%20data-name%3D%22%E3%83%91%E3%82%B9%2066363%22%20d%3D%22M189.842%2C121.855h-7.566a2.037%2C2.037%2C0%2C0%2C0-2.037%2C2.037v27.655l-21.3-28.769a1.954%2C1.954%2C0%2C0%2C0-.164-.211l-.013-.015c-.039-.044-.08-.086-.123-.127l-.038-.035c-.036-.032-.073-.064-.111-.093l-.055-.041c-.035-.026-.071-.05-.108-.074l-.062-.038c-.037-.022-.074-.043-.112-.062l-.065-.031c-.039-.018-.079-.035-.119-.051l-.066-.024c-.041-.014-.082-.028-.124-.04q-.036-.011-.072-.018c-.04-.01-.08-.019-.121-.026l-.087-.013-.11-.014c-.036%2C0-.072%2C0-.109%2C0s-.046%2C0-.07%2C0h-7.525a2.037%2C2.037%2C0%2C0%2C0-2.037%2C2.037v46.562a2.037%2C2.037%2C0%2C0%2C0%2C2.037%2C2.037h7.566a2.037%2C2.037%2C0%2C0%2C0%2C2.037-2.037V142.809l21.33%2C28.806a2.045%2C2.045%2C0%2C0%2C0%2C.525.513l.024.016c.041.028.085.053.128.078l.059.033q.048.025.1.048c.033.015.066.03.1.043l.065.024c.046.016.093.032.14.045l.029.008a2.075%2C2.075%2C0%2C0%2C0%2C.532.071h7.525a2.037%2C2.037%2C0%2C0%2C0%2C2.037-2.037V123.9a2.037%2C2.037%2C0%2C0%2C0-2.037-2.037Z%22%20transform%3D%22translate(-53.279%20-58.345)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  --color-bg: #fff;
  --color-text: rgba(30, 30, 30, 0.2);
  --color-border: rgba(229, 229, 229, .6);
  --color-separater: rgba(229, 229, 229, .6);
}
.c-social-login__list {
  --gap: 1rem;
  display: grid;
  gap: var(--gap) calc(var(--gap) / 2);
}

.c-siteinfo {
  margin-inline: auto;
  background-color: var(--color-gray-100);
  border-radius: 0.4rem;
  text-align: center;
  line-height: 1.8571;
}
@media screen and (min-width: 768px) {
  .c-siteinfo {
    max-width: 700px;
    padding: 4rem 3rem;
  }
}
@media screen and (max-width: 767px) {
  .c-siteinfo {
    width: 345px;
    padding: 3rem 2rem;
  }
}
.c-siteinfo__bold {
  font-weight: var(--fw-bold);
}
.c-siteinfo__bold + .c-siteinfo__text {
  margin-top: 1.5rem;
}

@media screen and (max-width: 767px) {
  .pconly {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .sponly {
    display: none !important;
  }
}


/* Search Result Layer */
.c-form__wrapper--column-zipcode {
  position: relative;
}

.c-searchresult {
  display: none;
  position: absolute;
  z-index: 10;
  top: calc(100% + 1rem);
  left: 0;
  width: min(calc(306* (100vw / 375)), 40rem);
  background-color: #fff;
  text-align: left;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.4rem;
  cursor: default;
}
.c-searchresult__title {
  font-weight: var(--fw-semibold);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-text-default);
  background-color: var(--color-secondary);
  /* border-bottom: 1px solid #ccc; */
  padding-block: 1.2rem;
  padding-inline: 2rem;
  position: relative;
}
.c-searchresult__results {
  width: 100%;
  height: fit-content;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 36rem;
  padding-block: 1.5rem 2rem;
  padding-inline: 2rem;
  display: flex;
  flex-direction: column;
  row-gap: 1.8rem;
}
.c-searchresult__results > li {
  cursor: pointer;
  font-weight: var(--fw-regular);
  font-size: 1.2rem;
  padding: 0 !important;
}
.c-searchresult__results > li:hover{
  text-decoration: underline;
}
.c-searchresult__close {
  display: block;
  width: 1.5rem;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  right: 1.5rem;
  translate: 0 -50%;
}
.c-searchresult__close::before,
.c-searchresult__close::after {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background-color: var(--color-primary);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.c-searchresult__close::before {
  rotate: -45deg;
}
.c-searchresult__close::after {
  rotate: 45deg;
}

/* Status Area */
.c-status-area {
  margin-top: 3rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
}
.c-status-area:empty {
  display: none;
}
@media (min-width: 768px) {
  .c-status-area {
    margin-top: 4rem;
  }
}
.c-status--failure{
  color: var(--color-emphasis);
}


/*
 * Tile Layout
 */

.l-tile__inner {
  display: grid;
  gap: 1rem;
}

.l-tile__item {
  display: grid;

  border-radius: .4rem;
  overflow: hidden;
}

.l-tile__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Tile Layout - 1 */

.l-tile[data-tile-layout="1"] .l-tile__inner {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="1"] .l-tile__inner {
    grid-template-columns: calc(373 / var(--max-width-desktop, 1200) * 100%) 1fr 1fr;
    grid-template-rows: repeat(2, auto);
  }
}

.l-tile[data-tile-layout="1"] .l-tile__inner > a:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;

  aspect-ratio: 373 / 517;
}

.l-tile[data-tile-layout="1"] .l-tile__inner > a:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;

  aspect-ratio: 404 / 266;
}

.l-tile[data-tile-layout="1"] .l-tile__inner > a:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

  aspect-ratio: 404 / 266;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="1"] .l-tile__inner > a:nth-of-type(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
}

.l-tile[data-tile-layout="1"] .l-tile__inner > a:nth-of-type(4) {
  grid-column: 1 / 3;
  grid-row: 3 / 4;

  aspect-ratio: 817 / 241;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="1"] .l-tile__inner > a:nth-of-type(4) {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
  }
}


/* Tile Layout - 2 */

.l-tile[data-tile-layout="2"] .l-tile__inner {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="2"] .l-tile__inner {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
  }
}

.l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;

  aspect-ratio: 292 / 404;
}

.l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;

  aspect-ratio: 293 / 195;
}

.l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

  aspect-ratio: 293 / 195;
}

.l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(4) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;

  aspect-ratio: 293 / 195;
}

.l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(5) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;

  aspect-ratio: 293 / 195;
}

.l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(6) {
  grid-column: 1 / 3;
  grid-row: 4 / 5;

  aspect-ratio: 596 / 195;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(6) {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
  }
}

.l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(7) {
  grid-column: 1 / 2;
  grid-row: 5 / 6;

  aspect-ratio: 293 / 195;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(7) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }
}

.l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(8) {
  grid-column: 2 / 3;
  grid-row: 5 / 6;

  aspect-ratio: 293 / 195;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(8) {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
  }
}

.l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(9) {
  grid-column: 1 / 2;
  grid-row: 6 / 7;

  aspect-ratio: 293 / 195;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(9) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }
}

.l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(10) {
  grid-column: 2 / 3;
  grid-row: 6 / 7;

  aspect-ratio: 293 / 195;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="2"] .l-tile__inner > a:nth-of-type(10) {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
  }
}


/* Tile Layout - 3 */

.l-tile[data-tile-layout="3"] .l-tile__inner {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="3"] .l-tile__inner {
    grid-template-columns: calc(386 / var(--max-width-desktop, 1200) * 100%) 1fr 1fr;
    grid-template-rows: repeat(2, auto);
  }
}

.l-tile[data-tile-layout="3"] .l-tile__inner > a:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;

  aspect-ratio: 386 / 534;
}

.l-tile[data-tile-layout="3"] .l-tile__inner > a:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;

  aspect-ratio: 396 / 262;
}

.l-tile[data-tile-layout="3"] .l-tile__inner > a:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

  aspect-ratio: 396 / 262;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="3"] .l-tile__inner > a:nth-of-type(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
}

.l-tile[data-tile-layout="3"] .l-tile__inner > a:nth-of-type(4) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;

  aspect-ratio: 396 / 262;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="3"] .l-tile__inner > a:nth-of-type(4) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}

.l-tile[data-tile-layout="3"] .l-tile__inner > a:nth-of-type(5) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;

  aspect-ratio: 396 / 262;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="3"] .l-tile__inner > a:nth-of-type(5) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }
}


/* Tile Layout - 4 */

.l-tile[data-tile-layout="4"] .l-tile__inner {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, auto);
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="4"] .l-tile__inner {
    grid-template-columns: calc(351 / var(--max-width-desktop, 1200) * 100%) calc(357 / var(--max-width-desktop, 1200) * 100%) 1fr 1fr;
    grid-template-rows: repeat(6, auto);
  }
}

.l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;

  aspect-ratio: 351 / 486;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(1) {
    grid-row: 1 / 7;
  }
}

.l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;

  aspect-ratio: 358 / 236;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(2) {
    grid-row: 1 / 4;
  }
}

.l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

  aspect-ratio: 358 / 236;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(3) {
    grid-row: 4 / 7;
  }
}

.l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(4) {
  grid-column: 1 / 2;
  grid-row: 3 / 5;

  aspect-ratio: 231 / 319;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(4) {
    grid-column: 3 / 4;
    grid-row: 1 / 5;
  }
}

.l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(5) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;

  aspect-ratio: 231 / 153;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(5) {
    grid-column: 3 / 4;
    grid-row: 5 / 7;
  }
}

.l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(6) {
  grid-column: 2 / 3;
  grid-row: 4 / 5;

  aspect-ratio: 231 / 153;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(6) {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
  }
}

.l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(7) {
  grid-column: 1 / 2;
  grid-row: 5 / 6;

  aspect-ratio: 231 / 153;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(7) {
    grid-column: 4 / 5;
    grid-row: 3 / 5;
  }
}

.l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(8) {
  grid-column: 2 / 3;
  grid-row: 5 / 6;

  aspect-ratio: 231 / 153;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="4"] .l-tile__inner > a:nth-of-type(8) {
    grid-column: 4 / 5;
    grid-row: 5 / 7;
  }
}


/* Tile Layout - 5 */

.l-tile[data-tile-layout="5"] .l-tile__inner {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, auto);
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="5"] .l-tile__inner {
    /* grid-template-columns: calc(351 / var(--max-width-desktop, 1200) * 100%) calc(357 / var(--max-width-desktop, 1200) * 100%) 1fr 1fr; */
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, auto);
  }
}

.l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;

  aspect-ratio: 351 / 486;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(1) {
    grid-row: 1 / 5;
  }
}

.l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;

  aspect-ratio: 358 / 236;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(2) {
    grid-row: 1 / 3;
  }
}

.l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(3) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;

  /* aspect-ratio: 358 / 236; */
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
  }
}

.l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(4) {
  grid-column: 1/2;
  grid-row: 5/6;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(4) {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
  }
}

.l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(5) {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(5) {
    grid-column: 5 / 6;
    grid-row: 1 / 3;
  }
}

.l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(6) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

  aspect-ratio: 231 / 153;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(6) {
    grid-column: 2 / 3;
    grid-row: 3 / 5;
  }
}

.l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(7) {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(7) {
    grid-column: 3 / 4;
    grid-row: 3 / 5;
  }
}

.l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(8) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(8) {
    grid-column: 4 / 5;
    grid-row: 3 / 5;
  }
}

.l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(9) {
  grid-column: 2 / 3;
  grid-row: 5 / 6;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="5"] .l-tile__inner > a:nth-of-type(9) {
    grid-column: 5 / 6;
    grid-row: 3 / 5;
  }
}


/* Tile Layout - 6 */

.l-tile[data-tile-layout="6"] .l-tile__inner {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="6"] .l-tile__inner {
    grid-template-columns: calc(289 / var(--max-width-desktop, 1200) * 100%) 1fr 1fr 1fr;
    grid-template-rows: repeat(2, auto);
  }
}

.l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;

  aspect-ratio: 289 / 400;
}

.l-tile[data-tile-layout="6"] .l-tile__inner > a:not(:nth-of-type(1)) {
  aspect-ratio: 294 / 195;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(1) {
    grid-row: 1 / 3;
  }
}

.l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(2) {
    grid-row: 1 / 2;
  }
}

.l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(3) {
    grid-row: 2 / 3;
  }
}

.l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(4) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(4) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
}

.l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(5) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(5) {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }
}

.l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(6) {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(6) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }
}

.l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(7) {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

@media (min-width: 768px) {
  .l-tile[data-tile-layout="6"] .l-tile__inner > a:nth-of-type(7) {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
  }
}




/*
 * Flyer
 */

.c-flyer {
  margin-top: 1rem;
  padding-block: 1rem;
  background-color: var(--color-project-bg);
}

@media (min-width: 768px) {
  .c-flyer {
    margin-top: 2rem;
    padding-block: 1.4rem;
  }
}

.c-flyer__inner {
  display: grid;
  row-gap: .6rem;
  justify-items: center;
}

@media (min-width: 768px) {
  .c-flyer__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4rem;
  }
}

.c-flyer__text--heading {
  display: flex;
  align-items: center;
  column-gap: .6rem;

  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: normal;
  line-height: 1;
}

.c-flyer__text--heading::before {
  content: "";

  width: 1.46rem;
  aspect-ratio: 1;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214.632%22%20height%3D%2214.625%22%20viewBox%3D%220%200%2014.632%2014.625%22%3E%20%3Cg%20id%3D%22Icon_ionic-ios-megaphone%22%20data-name%3D%22Icon%20ionic-ios-megaphone%22%20transform%3D%22translate(0)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81233%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081233%22%20d%3D%22M4.852%2C10.164A3.229%2C3.229%2C0%2C0%2C1%2C6.381%2C7.39a.114.114%2C0%2C0%2C0-.06-.211h0A2.715%2C2.715%2C0%2C0%2C0%2C3.716%2C9.633a.5.5%2C0%2C0%2C0-.348.524.479.479%2C0%2C0%2C0%2C.38.52A3.1%2C3.1%2C0%2C0%2C0%2C5.9%2C12.945h0a.153.153%2C0%2C0%2C0%2C.134-.264A3.5%2C3.5%2C0%2C0%2C1%2C4.852%2C10.164Z%22%20transform%3D%22translate(-3.368%20-5.277)%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81234%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081234%22%20d%3D%22M19.923%2C5.3c-.035-.095-.074-.183-.113-.271A3.607%2C3.607%2C0%2C0%2C0%2C19.048%2C3.9a1.735%2C1.735%2C0%2C0%2C0-1.223-.524%2C1.607%2C1.607%2C0%2C0%2C0-.907.274A12.539%2C12.539%2C0%2C0%2C1%2C11.5%2C5.266c-1.466%2C0-1.385.007-1.385.007a3.3%2C3.3%2C0%2C0%2C0-.366%2C5.8c.425.355.83.309.742.78S9.7%2C15.282%2C9.615%2C15.9s-.1.967.141%2C1.266A5.188%2C5.188%2C0%2C0%2C0%2C12.146%2C18c.65%2C0%2C.485-.306.485-1.54s-.327-4.63.58-4.63a9.479%2C9.479%2C0%2C0%2C1%2C3.913%2C1.114%2C1.884%2C1.884%2C0%2C0%2C0%2C.707.165%2C1.734%2C1.734%2C0%2C0%2C0%2C1.22-.64%2C3.643%2C3.643%2C0%2C0%2C0%2C.763-1.132c.039-.091.077-.183.116-.281a8.209%2C8.209%2C0%2C0%2C0%2C.482-2.879A8.214%2C8.214%2C0%2C0%2C0%2C19.923%2C5.3Zm-.935%2C5.52c-.225.552-.619.991-.946.991s-.626-.439-.851-.991a7.25%2C7.25%2C0%2C0%2C1-.432-2.626%2C7.277%2C7.277%2C0%2C0%2C1%2C.432-2.633c.225-.548.524-.879.847-.879s.714.334.942.879a7.083%2C7.083%2C0%2C0%2C1%2C.007%2C5.259Z%22%20transform%3D%22translate(-5.78%20-3.375)%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}

.c-flyer__list {
  --column-gap: .5rem;

  display: flex;
  justify-content: center;
  column-gap: var(--column-gap);

  width: 100%;
}

@media (min-width: 768px) {
  .c-flyer__list {
    --column-gap: 2rem;

    width: auto;
  }
}

.c-flyer__list-item {
  width: calc((100% - var(--column-gap) * 2) / 3);
}

@media (min-width: 768px) {
  .c-flyer__list-item {
    width: auto;
  }
}

.c-flyer__list-item[data-brand-name="depo"] {
  --color-brand: #204832;
}

.c-flyer__list-item[data-brand-name="outdoors"] {
  --color-brand: #898989;
}

.c-flyer__list-item[data-brand-name="golf5"] {
  --color-brand: #28883A;
}

.c-flyer__link {
  display: grid;

  border-radius: .4rem;
  overflow: hidden;

  text-decoration: none;
}

@media (min-width: 768px) {
  .c-flyer__link {
    grid-template-columns: repeat(2, 1fr);
  }
}

.c-flyer__image {
  display: grid;
  place-content: center;

  aspect-ratio: 115 / 30;
  background-color: var(--color-brand, var(--color-project-bg));

}

@media (min-width: 768px) {
  .c-flyer__image {
    aspect-ratio: 115 / 40;
  }
}

.c-flyer__image > svg {
  height: auto;
}

.c-flyer__list-item[data-brand-name="depo"] .c-flyer__image > svg {
  width: 8.737rem;
}

.c-flyer__list-item[data-brand-name="outdoors"] .c-flyer__image > svg {
  width: 9.051rem;
}

.c-flyer__list-item[data-brand-name="golf5"] .c-flyer__image > svg {
  width: 5.841rem;
}

.c-flyer__text--link {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .6rem;

  padding-block: .9rem;
  background-color: var(--color-white);

  color: var(--color-project-text);
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  letter-spacing: normal;
  line-height: 1;
}

@media (min-width: 768px) {
  .c-flyer__text--link {
    height: 100%;
    padding-block: initial;
  }
}

.c-flyer__text--link::after {
  content: "";

  width: .526rem;
  aspect-ratio: 5.26 / 9.53;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225.264%22%20height%3D%229.527%22%20viewBox%3D%220%200%205.264%209.527%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81319%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081319%22%20d%3D%22M0%2C9.027a.5.5%2C0%2C0%2C1-.354-.146.5.5%2C0%2C0%2C1%2C0-.707l3.91-3.91L-.354.354a.5.5%2C0%2C0%2C1%2C0-.707.5.5%2C0%2C0%2C1%2C.707%2C0L4.617%2C3.91a.5.5%2C0%2C0%2C1%2C0%2C.707L.354%2C8.881A.5.5%2C0%2C0%2C1%2C0%2C9.027Z%22%20transform%3D%22translate(0.5%200.5)%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}


/*
 * Slider
 */

.c-slider {
  --swiper-navigation-size: 3.6rem;
  --swiper-navigation-position-horizontal: var(--padding-horizontal-global);

  position: relative;

  width: var(--container-default);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .c-slider {
    --swiper-navigation-position-horizontal: calc(var(--padding-horizontal-global) + -2rem);
  }
}

.c-slider.c-slider--product {
  --swiper-navigation-position-top: 6.4rem;
}

@media (min-width: 768px) {
  .c-slider.c-slider--product {
    --swiper-navigation-position-top: 7.7rem;
  }
}

.c-slider.c-slider--feature-page {
  --swiper-navigation-position-top: 3.3rem;
}

@media (min-width: 768px) {
  .c-slider.c-slider--feature-page {
    --swiper-navigation-position-top: 5.1rem;
  }
}

.c-slider--staff-coordinate .swiper-slide,
.c-slider--staff-review .swiper-slide {
  align-items: flex-start;
}

.c-slider .swiper {
  display: grid;
  width: 100%;

  opacity: 0;
}

.c-slider .swiper.swiper-initialized {
  opacity: 1;
}

.c-slider .swiper-wrapper {
  min-width: 0;
}

.c-slider [class*="swiper-button-"] {
  top: var(--swiper-navigation-position-top, calc(50% - (var(--swiper-navigation-size) / 2)));

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  margin: 0;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88_19_144%22%20data-name%3D%22%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%2019%20%E2%80%93%20144%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_80917%22%20data-name%3D%22%E3%83%91%E3%82%B9%2080917%22%20d%3D%22M18%2C0A18%2C18%2C0%2C1%2C1%2C0%2C18%2C18%2C18%2C0%2C0%2C1%2C18%2C0Z%22%20fill%3D%22%234d4d4d%22%20opacity%3D%220.7%22%2F%3E%20%3Cg%20id%3D%22Icon_feather-arrow-right%22%20data-name%3D%22Icon%20feather-arrow-right%22%20transform%3D%22translate(10.061%2010.059)%22%20opacity%3D%220.8%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_68840%22%20data-name%3D%22%E3%83%91%E3%82%B9%2068840%22%20d%3D%22M7.5%2C18H22.764%22%20transform%3D%22translate(-7.5%20-10.368)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_68841%22%20data-name%3D%22%E3%83%91%E3%82%B9%2068841%22%20d%3D%22M18%2C7.5l7.632%2C7.632L18%2C22.764%22%20transform%3D%22translate(-10.368%20-7.5)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;

  transition: opacity var(--transition-default);
}

.c-slider [class*="swiper-button-"]::after {
  content: none;
}

.c-slider [class*="swiper-button-"].swiper-button-disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}

.c-slider .swiper-button-prev {
  left: var(--swiper-navigation-position-horizontal);

  scale: -1 1;
}

.c-slider .swiper-button-next {
  right: var(--swiper-navigation-position-horizontal);
}

.c-slider__item-inner {
  display: grid;
  row-gap: 1rem;

  color: var(--color-project-text);
  text-decoration: none;
}

.c-slider__image {
  position: relative;
}

.c-slider__image .soldout {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  display: grid;
  place-content: center;

  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);

  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
}

.c-slider__cicon-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;

  margin-bottom: 1.2rem;
}

.c-slider__cicon-list-item {
  height: 1.8rem;
}

.c-slider__cicon-list-item:not(:has(> *)) {
  display: none;
}

.c-slider__cicon-list-item img {
  width: auto;
  height: 100%;
}

.c-slider__text--brand-name {
  margin-bottom: .6rem;

  font-size: 1.2rem;
  font-weight: var(--fw-regular);
  letter-spacing: .03em;
  line-height: 1;
}

.c-slider__text--product-name {
  margin-bottom: .8rem;

  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: .03em;
  line-height: calc(20 / 14);
}

.c-slider__price-wrapper {
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
  line-height: 1;
}

.c-slider__item-inner--feature-page {
  color: var(--color-project-text);
  text-decoration: none;
}

@media (min-width: 768px) {
  .c-slider__item-inner--feature-page {
    row-gap: 1.2rem;
  }
}

.c-slider__item-inner--feature-page .c-slider__image {
  aspect-ratio: 210 / 140;
}

.c-slider__item-inner--feature-page .c-slider__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-slider__item-inner--feature-page .c-slider__text--feature-page-title {
  font-size: 1.2rem;
  letter-spacing: .03em;
  line-height: calc(20 / 12);
}

.c-slider__item-inner--feature-page .c-slider__text--feature-page-title > span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Staff Coordinate */

.c-slider--staff-coordinate .c-slider__image {
  border-radius: .4rem;
  overflow: hidden;
}

.c-slider__text--staff-name {
  display: flex;
  align-items: baseline;
  column-gap: .8rem;

  font-size: 1.3rem;
  font-weight: var(--fw-light);
  letter-spacing: .03em;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .c-slider__text--staff-name {
    font-size: 1.2rem
  };
}

.c-slider__text--staff-name > small {
  color: var(--color-project-tertiary);
  font-size: 1.1rem;
}

.c-slider__text--staff-shop {
  color: var(--color-project-tertiary);
  font-size: 1rem;
  letter-spacing: .03em;
  line-height: 1.4;
}

/* Staff Review */

.c-slider--staff-review .c-slider__detail-container {
  display: grid;
  row-gap: 1rem;
}

.c-slider--staff-review .c-slider__image {
  aspect-ratio: 1;
  border-radius: .4rem;
  overflow: hidden;
}

.c-slider--staff-review .c-slider__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-slider__staff-review-content--product {
  display: grid;
  row-gap: .4rem;
}

@media (min-width: 768px) {
  .c-slider__staff-review-content--product {
    row-gap: .6rem;
  }
}

.c-slider__text--review-product-brand {
  font-size: 1rem;
  letter-spacing: .03em;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .c-slider__text--review-product-brand {
    font-size: 1.2rem;
  }
}

.c-slider__text--review-product-name {
  font-size: 1rem;
  font-weight: var(--fw-light);
  letter-spacing: .03em;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .c-slider__text--review-product-name {
    font-size: 1.3rem;
  }
}

.c-slider__text--review-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  font-size: 1.3rem;
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
  line-height: calc(18 / 13);
}

.c-slider__staff-review-content--profile {
  --width-profile-image: 3.8rem;

  display: grid;
  grid-template-areas: "profile-image shop-name" "profile-image staff-name";
  grid-template-columns: 3.8rem 1fr;
  align-items: flex-start;
  gap: .6rem .8rem;
}

@media (min-width: 768px) {
  .c-slider__staff-review-content--profile {
    --width-profile-image: 4.2rem;
    column-gap: 1rem;
  }
}

.c-slider__image--review-profile {
  grid-area: profile-image;

  border-radius: 50%;
  overflow: hidden;
}

.c-slider__text--review-writer-shop {
  grid-area: shop-name;

  color: var(--color-project-tertiary);
  font-weight: var(--fw-light);
  font-size: 1rem;
  letter-spacing: .03em;
  line-height: 1.2;
}

.c-slider__text--review-writer-name {
  grid-area: staff-name;

  font-size: 1.3rem;
  font-weight: var(--fw-light);
  letter-spacing: .03em;
  line-height: calc(18 / 13);
}

@media (min-width: 768px) {
  .c-slider__text--review-writer-name {
    font-size: 1.2rem;
  }
}

/* Look Book */

.c-slider--look-book {
  --swiper-navigation-position-top: calc(158 / 420 * 100%);

  width: 100%;
}

@media (min-width: 768px) {
  .c-slider--look-book {
    --swiper-navigation-position-top: calc(50% - var(--swiper-navigation-size));
    --swiper-navigation-position-horizontal: 34%;
    --swiper-navigation-size: calc(36 / 1400 * 100vw);
  }
}

.c-slider--look-book .c-slider__image {
  border-radius: .4rem;
  overflow: hidden;
}

.c-slider--look-book .c-slider__detail-container {
  margin-top: 1rem;
}

.c-slider__price-list {
  display: grid;
  justify-items: center;
  row-gap: .8rem;
}

.c-slider__text--price-link {
  color: var(--color-project-text);
  font-size: 1.2rem;
  letter-spacing: .05em;
  line-height: calc(14 / 12);
  text-decoration: underline;
}


/*
 * Sticky Navigation
 */

.c-sticky-nav {
  --height-header: calc(var(--height-header-primary) + var(--height-header-global-nav));
  --sticky-menu-item-height: 3rem;
  --separator-height: 2rem;
  --separator-color: #CEDCF4;

  position: sticky;
  top: var(--height-header);
  left: 0;
  z-index: calc(var(--zindex-header) - 1);

  width: 100%;
  background-color: var(--color-project-primary);

  transition: top var(--transition-default);
}

@media (max-width: 767px) {
  html:has(.global-header[data-stick-header][data-scroll-direction="down"] [data-header-type="default"]) .c-sticky-nav {
    top: calc(var(--height-header) - var(--variable-header-value, 0rem));
  }
}

@media (min-width: 768px) {
  .c-sticky-nav {
    --sticky-menu-item-height: 4rem;
    --separator-height: 3rem;
  }
}

.c-sticky-nav__inner {
  /* width: var(--container-default); */
  height: 100%;
  /* margin-inline: auto; */
}

/* @media (min-width: 768px) {
  .c-sticky-nav__inner {
    padding-inline: var(--padding-horizontal-global);
  }
} */

.c-sticky-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  width: 100%;
  height: 100%;
}

.c-sticky-nav__list > li {
  position: relative;
}

/* TODO: どの列数でも良い感じにborderが表示されるロジックを検討する */
.c-sticky-nav__list > li::before,
.c-sticky-nav__list > li::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;

  width: 1px;
  height: var(--separator-height);
  margin-block: auto;
  background-color: var(--separator-color);

  pointer-events: none;
}

.c-sticky-nav__list > li::before {
  left: 0;
}

.c-sticky-nav__list > li::after {
  right: 0;
}

.c-sticky-nav__list > li:not(:first-of-type)::before {
  content: "";
}

@media (min-width: 768px) {
  .c-sticky-nav__list > li:first-of-type::before {
    content: "";
  }
}

@media (min-width: 768px) {
  .c-sticky-nav__list > li:last-of-type::after {
    content: "";
  }
}

.c-sticky-nav__item {
  width: calc(100% / var(--sticky-menu-column-mobile, 3));
  height: var(--sticky-menu-item-height);
}

@media (min-width: 768px) {
  .c-sticky-nav__item {
    width: calc(100% / var(--sticky-menu-column-desktop, 3));
  }
}

.c-sticky-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .6rem;

  height: 100%;

  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.c-sticky-nav__link::after {
  content: "";

  width: .923rem;
  aspect-ratio: 9.23 / 5.32;

  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229.234%22%20height%3D%225.324%22%20viewBox%3D%220%200%209.234%205.324%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_1701%22%20data-name%3D%22%E3%83%91%E3%82%B9%201701%22%20d%3D%22M.354%2C8.881l-.707-.707%2C3.91-3.91L-.354.354.354-.354%2C4.971%2C4.264Z%22%20transform%3D%22translate(8.881%200.354)%20rotate(90)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}


/*
 * Category Panel
 */

.c-category-panel {
  --column-num: var(--column-num-mobile);
  --column-num-mobile: 5;
  --column-num-desktop: 10;
  --row-gap: 1.5rem;
  --column-gap: 1.3rem;

  display: grid;
  gap: var(--row-gap) var(--column-gap);
}

@media (min-width: 768px) {
  .c-category-panel {
    --column-num: var(--column-num-desktop);

    --gap: 2rem;
  }
}

.c-category-panel__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--row-gap) var(--column-gap);

  width: 100%;
}

.c-category-panel__list.c-category-panel__list--brand {
  --column-num-mobile: 4;
  --column-num-desktop: 8;
}

.c-category-panel__item {
  width: calc((100% - (var(--column-gap) * (var(--column-num) - 1))) / var(--column-num));
}

.c-category-panel__link {
  display: flex;
  flex-direction: column;
  row-gap: .6rem;

  color: var(--color-project-text);
  text-decoration: none;
}

.c-category-panel__image {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 1;
  padding: .2rem;
  background-color: var(--color-project-bg);
  border-radius: .4rem;
}

/* TODO: デバッグ用スタイル */
.c-category-panel__image img {
  &[src=""] {
    display: none;
  }
}

.c-category-panel__text--title {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
  line-height: calc(11 / 10);
  text-align: center;
}


/*
 * News
 */

.l-news__inner {
  display: grid;
  row-gap: 1.2rem;
}

@media (min-width: 768px) {
  .l-news__inner {
    --column-gap: 2rem;

    grid-template-columns: auto 1fr;
    column-gap: var(--column-gap);
  }
}

.l-news__inner > article:nth-of-type(n+4) {
  display: none !important;
}

@media (min-width: 768px) {
  .l-news__article {
    display: contents;
  }
}

.l-news__link {
  display: grid;
  row-gap: 1rem;

  padding: 2rem;
  background-color: var(--color-project-bg);
  border-radius: .4rem;

  color: var(--color-project-text);
  text-decoration: none;
}

@media (min-width: 768px) {
  .l-news__link {
    grid-template-columns: subgrid;
    grid-column: span 2;
    align-items: center;
  }
}

.l-news__link .static-section__text {
  display: none !important;
}

.l-news__text--date {
  font-size: 1.3rem;
  letter-spacing: .03em;
}

@media (min-width: 768px) {
  .l-news__text--date {
    padding-right: var(--column-gap);

    border-right: solid 1px #ACACAC;
  }
}

.l-news__article .static-section__heading--large {
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: .03em;
  line-height: calc(20 / 14);

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/*
 * Tab Panel
 */

.c-tab-panel {

}

.c-tab-panel__tab-list {
  --border-width: 1px;

  display: flex;

  border-bottom: solid var(--border-width, 1px) #ACACAC;
}

.c-tab-panel__button--tab {
  position: relative;

  display: grid;
  place-content: center;

  width: calc(100% / var(--tablist-column-num, 2));
  padding-bottom: 1.7rem;

  color: var(--color-active-color, #B1B1B1);
  font-size: 1.8rem;
  letter-spacing: .03em;
  line-height: 1;
}

.c-tab-panel__button--tab::after {
  content: "";

  position: absolute;
  bottom: calc(var(--border-width, 0) * -1);
  left: 0;
  z-index: 2;

  width: 100%;
  height: .4rem;
  background-color: var(--color-active-color, transparent);

  pointer-events: none;
}

.c-tab-panel__button--tab[hidden] {
  display: none !important;
}

.c-tab-panel__button--tab[aria-selected="true"] {
  --color-active-color: var(--color-text-default);

  font-weight: var(--fw-bold);
}

.c-tab-panel__panel {
  display: none;
}

.c-tab-panel__panel[aria-hidden="false"] {
  display: block;
}

/* タブボタン 横スクロール */
.c-tab-panel__tab-list[data-horizontal-scroll] {
  max-width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (min-width: 768px) {
  .c-tab-panel__tab-list[data-horizontal-scroll] {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
}

.c-tab-panel__tab-list[data-horizontal-scroll] > * {
  width: fit-content;
  padding-inline: 4rem;

  white-space: nowrap;
  word-break: keep-all;
}


/*
 * Overlay Content
 */

.c-overlay__dialog {
  --heading-close-button-size: 3.2rem;

  position: fixed;

  background-color: var(--color-project-bg);
  border: none;

}

@media (max-width: 767px) {
  .c-overlay__dialog {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    max-width: 90vw;
    height: 83dvh;
    max-height: 83dvh;
    margin: auto;

    opacity: 0;
    transition: opacity 500ms ease;
  }

  .c-overlay__dialog[data-state="active"] {
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .c-overlay__dialog {
    top: 0;
    right: 0;
    left: auto;

    width: min(33.5rem, 80vw);
    max-width: 80vw;
    height: 100%;
    max-height: none;

    translate: 100% 0;
    transition: translate 500ms ease;
  }

  .c-overlay__dialog[data-state="active"] {
    translate: 0 0;
  }
}

.c-overlay__dialog::backdrop {
  background-color: rgba(0, 0, 0, .7);

  opacity: 0;
  transition: opacity 500ms ease;
}

.c-overlay__dialog[data-state="active"]::backdrop {
  opacity: 1;
}

.c-overlay__dialog-inner {
  padding-bottom: 4rem;
}

.c-overlay__heading-container {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;

  display: grid;
  grid-template-columns: var(--heading-close-button-size) 1fr var(--heading-close-button-size);
  align-items: center;
  column-gap: .8rem;

  width: 100%;
  padding: 1.3rem .4rem;
  background-color: var(--color-project-bg);
}

.c-overlay__heading-container::before {
  content: "";
}

.c-overlay__text--heading {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: calc(20 / 18);
  text-align: center;
}

.c-overlay__content-wrapper {
  background-color: var(--color-white);
}

.c-overlay__button--close-bottom {
  display: grid;
  grid-template-columns: auto 1.3rem;
  align-items: center;
  column-gap: 1rem;

  width: fit-content;
  margin-top: 3rem;
  margin-inline: auto;
  padding: 1.4rem 3rem;
  background-color: var(--color-white);
  border: solid 1px #D8D8D8;
  border-radius: .4rem;

  font-size: 1.3rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: .03em;
}

.c-overlay__button--close-bottom::after {
  content: "";

  width: 100%;
  aspect-ratio: 1;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_15494%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2015494%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212.579%22%20height%3D%2212.579%22%20viewBox%3D%220%200%2012.579%2012.579%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_24761%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2024761%22%20width%3D%221.368%22%20height%3D%2216.421%22%20transform%3D%22translate(0%200.968)%20rotate(-45)%22%20fill%3D%22%23acacac%22%2F%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_24762%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2024762%22%20width%3D%221.368%22%20height%3D%2216.421%22%20transform%3D%22translate(0.968%2012.579)%20rotate(-135)%22%20fill%3D%22%23acacac%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}

/* Overlay Content - Links */

.c-overlay__content-wrapper .hamburger-menu__text--link {
  padding: 1.8rem 1rem;
}