/* header
======================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  container-type: inline-size;
}
.site-header__inner {
  padding-block: var(--space-2xs);
  padding-inline: var(--space-md) var(--space-xs);
  background-color: var(--color-bg-default);
}
.site-header__body {
  display: flex;
  flex-wrap: wrap;
  gap: min(3.3333vw, var(--space-2xl));
  justify-content: space-between;
  align-items: end;
}
@container (max-width: 1280px) {
  .site-header__body {
    row-gap: var(--space-2xs);
  }
}
@media (max-width: 1024px) {
  .site-header__inner {
    padding-block: var(--space-3xs);
    padding-inline: var(--space-2xs);
  }
  .site-header__logo img {
    height: var(--size-2xl);
  }
}
.site-header__content {
  display: flex;
  flex-wrap: wrap;
  gap: min(var(--space-md));
  align-items: center;
}
.navi-global__items {
  display: flex;
}
.navi-global__link {
  display: block;
  padding-block: var(--space-3xs);
  padding-inline: var(--space-2xs);
  line-height: var(--line-height-md);
  border-bottom: 2px solid transparent;
}
.navi-global__link span {
  transition: opacity .3s;
}
.navi-global__link:hover {
  border-color: var(--color-border-primary);
  transition: border-bottom .3s;
}
.navi-global__link:hover span {
  opacity: .6;
}
.navi-global__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: stretch;
  padding-inline: var(--space-2xs);
  padding-bottom: var(--space-min);
  transition: opacity .3s;
}
.navi-global__toggle:hover {
  opacity: .6;
}
.navi-global__toggle .bar {
  display: block;
  width: var(--size-2xl);
  height: 2px;
  position: relative;
  background-color: var(--init-color);
  border-radius: var(--radius-xs);
}
.navi-global__toggle .bar::before,
.navi-global__toggle .bar::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  background-color: var(--init-color);
  border-radius: var(--radius-xs);
}
.navi-global__toggle .bar::before {
  top: -6px;
}
.navi-global__toggle .bar::after {
  bottom: -6px;
}
.site-header__actions {
  display: flex;
  gap: var(--space-xs);
}
.site-header__actions .icon-close {
  display: none;
}
.site-header.is-search-open .icon-search {
  display: none;
}
.site-header.is-search-open .icon-close {
  display: inline-flex;
}
.header-search {
  width: 100%;
  padding-block: var(--space-md);
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--color-text-inverse);
  font-size: var(--size-sm);
  line-height: var(--line-height-min);
  background-color: var(--color-bg-primary);
}
.header-search[hidden] {
  display: none;
}
.header-search__form {
  display: flex;
  justify-content: center;
}
.header-search__form .form {
  width: var(--width-sm);
  padding-block: 0;
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}
body.is-navi-open {
  overflow: hidden;
}

.site-header::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;

  background: rgba(0, 0, 0, 0.25);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

body.is-navi-open .site-header::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-header__modal {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  height: 100dvh;

  background: #fff;

  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;

  transition:
    transform 0.35s ease,
    visibility 0.35s ease;
}

.site-header__modal.is-open {
  height: 100vh;
  overflow-y: scroll;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.site-header__modal[hidden] {
  display: none;
}

.site-header__modal__heading {
  display: flex;
  justify-content: flex-end;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
}
.site-header__modal__close {
  width: var(--size-2xl);
  height: var(--size-2xl);
  position: relative;
}
.site-header__modal__close::before,
.site-header__modal__close::after {
  content: "";
  height: var(--size-xl);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  background: var(--color-border-default);
  border-radius: var(--radius-xs);
}
.site-header__modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.site-header__modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.site-header__modal__inner {
  padding-bottom: var(--space-xl);
  padding-inline: var(--space-md);
}
.site-header__sidenavi {
  display: flex;
}
.site-header__sidenavi__list {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: self-start;
  gap: var(--space-md);
}
.site-header__sidenavi__parent {
  font-size: var(--size-sm);
}
.site-header__sidenavi__parent a {
  border-bottom: 1px solid var(--color-border-primary-dark);
}
.site-header__sidenavi__list--sub {
  margin-top: var(--space-2xs);
  padding-left: var(--space-3xs);
}
.site-header__sidenavi__item a {
  position: relative;
  padding-left: var(--space-xs);
  color: var(--color-text-primary-dark);
}
.site-header__sidenavi__item a:hover {
  text-decoration: underline;
}
.site-header__sns {
  margin-top: var(--space-md);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border-default);
}
.site-header__sns__list,
.site-footer__sns__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.site-header__sns__item a,
.site-footer__sns__item a {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  height: 28px;
  font-size: var(--size-3xs);
  transition: opacity .3s;
}
.site-header__sns__item a:hover,
.site-footer__sns__item a:hover {
  opacity: .6;
}
.site-footer__sns__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-header__hamburger-menu {
  display: none;
}
@media (max-width: 1024px) {
  .site-header__content[hidden] {
    display: none;
  }
  .site-header__hamburger-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    height: stretch;
  }
  .navi-global__toggle {
    padding: 0;
  }
  .navi-global__toggle .bar {
    width: var(--size-xl);
  }


}

/* hamburger menu
======================================== */
.hamburger-menu {
  display: none;
}
@media (max-width: 1024px) {
  .hamburger-menu {
    display: block;
    width: var(--size-2xl);
    height: var(--size-2xl);
    position: absolute;
    top: var(--space-2xs);
    right: var(--space-2xs);
    z-index: 999;
  }
  .hamburger-menu .bar {
    position: absolute;
    left: var(--space-3xs);
    width: var(--size-xl);
    height: 2px;
    background-color: var(--init-color);
    border-radius: var(--radius-xs);
  }
  .hamburger-menu,
  .hamburger-menu .bar {
    display: inline-block;
    transition: all .3s;
    box-sizing: border-box;
  }
  .hamburger-menu .bar:nth-of-type(1) {
    top: 12px;
  }
  .hamburger-menu .bar:nth-of-type(2) {
    top: 23px;
  }
  .hamburger-menu .bar:nth-of-type(3) {
    bottom: 12px;
  }
  .hamburger-menu.is-active .bar:nth-of-type(1) {
    transform: translateY(11px) rotate(45deg);
  }
  .hamburger-menu.is-active .bar:nth-of-type(2) {
    opacity: 0;
  }
  .hamburger-menu.is-active .bar:nth-of-type(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

}
/* news ticker
======================================== */

.news-ticker {
  color: var(--color-text-inverse);
  background-color: var(--color-bg-primary-dark);
}
.news-ticker__inner {
  width: fit-content;
  max-width: var(--width-xl);
  margin-inline: auto;
  padding-block: var(--space-xs);
}
.news-ticker__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--size-xs);
  line-height: var(--line-height-min);
}
.news-ticker__heading a {
  display: block;
  padding: var(--space-min) var(--space-3xs);
  font-size: var(--size-3xs);
  font-weight: 400;
  border: 1px solid var(--color-border-inverse);
}
.news-ticker__list {
  margin-top: var(--space-2xs);
  line-height: var(--line-height-xs);
}
.news-ticker__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}
.news-ticker__date {
  font-size: var(--size-3xs);
  font-weight: 400;
}
.news-ticker__label {
  padding: var(--space-min) var(--space-xs);
  color: var(--color-text-primary-dark);
  font-size: var(--size-4xs);
  background-color: var(--color-bg-default);
  border-radius: var(--radius-max);
}
@media (max-width: 1024px) {
  .news-ticker__inner {
    padding: var(--space-2xs);
  }
  .news-ticker__heading {
    display: none;
  }
  .news-ticker__list {
    margin: 0;
  }
  .news-ticker__link {
    gap: var(--space-3xs) var(--space-2xs);
  }
  .news-ticker__text {
    line-height: var(--line-height-sm);
  }
}

/* main contents list
======================================== */

.main-contents__list .grid {
  grid-template-rows: 500px;
}
.main-contents__item {
  padding: var(--space-lg) var(--space-xs);
  position: relative;
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-1);
  transition: all .3s;
}
.main-contents__item[data-content="wooden"] {
  background: url(../images/front-page/main_contents_wooden.jpg) no-repeat center / cover;
}
.main-contents__item[data-content="architecture"] {
  background: url(../images/front-page/main_contents_architecture.jpg) no-repeat center / cover;
}
.main-contents__item:has(.main-contents__title a:hover) {
  opacity: 0.8;
}
.main-contents__title {
  font-size: var(--size-2xl);
  line-height: 1;
}
.main-contents__title a::before {
  content: "";
  display: inline-block;
  width: var(--size-xl);
  height: var(--size-xl);
  margin-right: var(--space-3xs);
  background-color: var(--color-bg-default);
  mask: url("../images/common/icon-navilink.svg") no-repeat center / contain;
  -webkit-mask: url("../images/common/icon-navilink.svg") no-repeat center / contain;
}
.main-contents__detail {
  margin-top: var(--space-xs);
  line-height: var(--line-height-md);
}
.main-contents__title,
.main-contents__detail {
  text-shadow: 0 0 50px rgb(0 0 0 / 50%);
}
.main-contents__product {
  font-size: var(--size-sm);
}
.main-contents__product-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--size-lg);
  font-weight: 700;
  line-height: var(--line-height-min);
}
.main-contents__product-name a {
  display: block;
  padding: var(--space-3xs) var(--space-2xs);
  font-size: var(--size-3xs);
  font-weight: 400;
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-xs);
  transition: all .3s;
}
.main-contents__product-name a:hover {
  opacity: .8;
}
.index-content__product-dl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.index-content__product-dl_text {
  font-size: var(--size-md);
}

/* front page
======================================== */

.index-content {
  margin-top: var(--space-max);
}
@media (max-width: 1024px) {
  .index-content {
    margin-top: var(--space-md);
  }
}
.index-content h2 {
  color: var(--color-text-primary);
  font-size: clamp(var(--size-sm), 5.3333vw, var(--size-2xl));
  font-weight: 700;
  line-height: var(--line-height-md);
  text-align: center;
}
.index-content__background {
  margin-top: var(--space-max);
  position: relative;
  background: url(../images/front-page/index-content-bg-image.jpg) no-repeat bottom / cover var(--color-bg-primary-light);
}
@media (max-width: 1024px) {
  .index-content__background {
    margin-top: var(--space-2xl);
  }
}
.index-content__inner {
  max-width: var(--width-xl);
  margin-inline: auto;
}
@media (max-width: 1024px) {
  .index-content__inner {
    max-width: min(calc(100vw - var(--space-sm)), var(--width-lg));
  }
}
.index-content__title {
  position: relative;
  font-size: clamp(var(--size-xl), 12.5vw, var(--size-2xl));
  font-weight: 700;
  line-height: var(--line-height-min);
  text-align: center;
}
.index-content__title span {
  display: block;
}
.index-content__title button {
  justify-content: space-between;
  width: 240px;
  position: absolute;
  top: 0;
  right: var(--space-xs);
}
@media (max-width: 767px) {
  .index-content__title button {
    margin-top: var(--space-md);
    position: static;
  }
}
.index-content__product .index-content__title,
.index-content__support .index-content__title {
  position: relative;
  top: calc(var(--space-xs) * -1 );
}
.index-content__list {
  padding-block: var(--space-lg);
}
.index-content__product .index-content__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: space-between;
}
@media (max-width: 1024px) {
  .index-content__list {
    padding-block: var(--space-md);
  }
  .index-content__product .index-content__list {
    gap: var(--space-2xs);
  }
}
.index-content__product .index-content__item a {
  display: block;
  height: 100%;
  transition: all .3s;
}
.index-content__product .index-content__item a:hover {
  opacity: .8;
}
.index-content__product .index-content__item[data-cols="3"] {
  width: calc((100% - (var(--space-xs) * 2)) / 3);
}
.index-content__product .index-content__item[data-cols="3"] .index-content__item-name {
  padding-block: var(--space-xs);
  font-size: var(--size-xl);
  text-align: center;
}
.index-content__product .index-content__item[data-cols="3"] .index-content__item-name > span {
  display: block;
  font-size: var(--size-sm);
}
.index-content__product .index-content__item[data-cols="2"] {
  width: calc((100% - var(--space-xs)) / 2);
}
.index-content__product .index-content__item[data-cols="2"] .index-content__item-name {
  padding: var(--space-xs);
  font-size: var(--size-lg);
}
.index-content__product .index-content__item[data-cols="2"] > a {
  display: flex;
  height: 100%;
}
.index-content__product .index-content__item[data-cols="2"] .index-content__image {
  width: 50%;
}
@media (max-width: 1024px) {
  .index-content__product .index-content__item[data-cols="2"] .index-content__image {
    flex: 1 0 auto;
    width: 30%;
  }
}
@media (max-width: 767px) {
  .index-content__product .index-content__item[data-cols="2"] > a {
    display: block;
  }
  .index-content__product .index-content__item[data-cols="2"] .index-content__image {
    width: 100%;
  }
}
.index-content__product .index-content__item[data-cols="2"] .index-content__item-name > span {
  display: block;
  font-size: min(var(--size-xs), var(--size-sm));
}
.index-content__product .index-content__item {
  background-color: var(--color-bg-default);
  box-shadow: var(--shadow-1);
}
@media (max-width: 767px) {
  .index-content__product .index-content__item[data-cols] {
    width: 100%;
  }
  .index-content__product .index-content__item[data-cols] .index-content__item-name {
    padding: 0;
    padding-block: var(--space-3xs);
    font-size: var(--size-lg);
    text-align: center;
  }
  .index-content__product .index-content__item[data-cols] .index-content__item-name > span {
    font-size: var(--size-2xs);
    line-height: var(--line-height-md);
  }
}
.index-content__product .index-content__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
@media (max-width: 767px) {
  .index-content__product .index-content__image {
    aspect-ratio: 4 / 2;
  }
}
.index-content__product .index-content__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1024px) {
  .index-content__product .index-content__item[data-cols] .index-content__item-name {
    padding: var(--space-2xs);
    font-size: var(--size-lg);
    line-height: var(--line-height-sm);
  }
  .index-content__product .index-content__item[data-cols] .index-content__item-name > span {
    margin-top: var(--space-3xs);
    font-size: var(--size-2xs);
  }
}
.index-content__support {
  margin-top: var(--space-2xl);
}
.index-content__support .index-content__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}
.index-content__support .index-content__item > a {
  display: flex;
  justify-content: center;
  width: 160px;
  padding: var(--space-lg);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-max);
  background-color: var(--color-bg-default);
  box-shadow: var(--shadow-1);
}
.index-content__support .index-content__item-name {
  margin-top: var(--space-2xs);
  text-align: center;
}
@media (max-width: 767px) {
  .index-content__support .index-content__list {
    flex-wrap: nowrap;
    gap: var(--space-2xs);
  }
  .index-content__support .index-content__item {
    width: calc((100% - var(--space-2xs) / 3));
  }
  .index-content__support .index-content__item > a {
    width: 100%;
    padding: var(--space-xs);
  }
  .index-content__support .index-content__item-name {
    font-size: var(--size-3xs);
    line-height: var(--line-height-sm);
  }
}
.index-content__news {
  padding-block: var(--space-4xl);
}
@media (max-width: 1024px) {
  .index-content__news {
    padding-block: var(--space-2xl);
    padding-inline: var(--space-2xs);
  }
}
.index-content__news .news-list {
  max-width: var(--width-xl);
  margin-top: var(--space-md);
  margin-inline: auto;
  line-height: var(--line-height-xs);
  border-top: 1px solid var(--color-border-default);
}
.index-content__news .news-item {
  border-bottom: 1px solid var(--color-border-default);
}
.index-content__news .news-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
}
.news-date {
  font-size: var(--size-3xs);
  font-weight: 400;
}
.news-label {
  padding: var(--space-min) var(--space-xs);
  color: var(--color-text-inverse);
  font-size: var(--size-4xs);
  border-radius: var(--radius-max);
}
.news-label[data-label="information"] {
  background-color: var(--color-bg-primary);
}
.news-label[data-label="product"] {
  background-color: var(--color-bg-secondary);
}
.news-content img {
  width: auto;
}

/* search
======================================== */

.index-content__search {
  padding-block: var(--space-4xl);
}
@media (max-width: 1024px) {
  .index-content__search {
    padding-block: var(--space-2xl);
    padding-inline: var(--space-2xs);
  }
}
.index-content__search h2 {
  color: var(--color-text-init);
  font-size: var(--size-2xl);
  line-height: var(--line-height-sm);
}
@media (max-width: 1024px) {
  .index-content__search h2 {
    font-size: var(--size-xl);
  }
}
.index-content__search .is-style-heading-dotted {
  --dot-size: var(--space-3xs);
  --dot-gap: calc(var(--dot-size) * 2);
  --dot-color-main: var(--color-bg-primary);
  --dot-color-sub: var(--color-bg-primary-muted);
  padding-bottom: var(--space-sm);
  position: relative;
}
.index-content__search .is-style-heading-dotted::before {
  content: "";
  width: var(--dot-size);
  height: var(--dot-size);
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--dot-color-main);
  border-radius: var(--radius-max);
}
.index-content__search .is-style-heading-dotted::after {
  content: "";
  width: calc(var(--dot-gap) * 4);
  height:  var(--dot-size);
  position: absolute;
  bottom: 0;
  left: calc(var(--dot-gap) - var(--dot-size) / 2);
  background-image: radial-gradient(
    circle,
    var(--dot-color-sub) calc(var(--dot-size) / 2),
    transparent calc(var(--dot-size) / 2)
  );
  background-size: var(--dot-gap) 100%;
  background-repeat: repeat-x;
}
.index-content__search .search-result {
  margin-top: var(--space-2xl);
}
.index-content__search .search-list {
  max-width: var(--width-xl);
  margin-top: var(--space-md);
  margin-inline: auto;
  line-height: var(--line-height-xs);
  border-top: 1px solid var(--color-border-default);
}
.index-content__search .search-item {
  border-bottom: 1px solid var(--color-border-default);
}
.index-content__search .search-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
}
.search-label {
  padding: var(--space-min) var(--space-xs);
  color: var(--color-text-inverse);
  font-size: var(--size-4xs);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-max);
}

/* footer
======================================== */

.site-footer__inner {
  padding-block: var(--space-2xl) var(--space-4xl);
  padding-inline: var(--space-md);
  background-color: var(--color-bg-default);
}
.site-footer__body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: start;
}
.navi-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: stretch;
}
@media (min-width: 1025px) {
  .navi-footer > * + * {
    padding-left: var(--space-xs);
    border-left: 1px solid var(--color-border-default);
  }
}
.navi-footer__sublist {
  margin-top: var(--space-3xs);
}
.navi-footer__sublist a {
  position: relative;
  padding-left: var(--space-xs);
  color: var(--color-text-primary-dark);
  font-size: var(--size-2xs);
  line-height: var(--line-height-xl);
}
a[data-type="navi"]::before,
a[data-type="externallink"]::before {
  content: "";
  width: var(--size-2xs);
  height: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  background-color: var(--color-bg-primary-dark);
}
a[data-type="navi"]::before {
  mask: url("../images/common/icon-navilink.svg") no-repeat center / contain;
  -webkit-mask: url("../images/common/icon-navilink.svg") no-repeat center / contain;
}
a[data-type="externallink"]::before {
  mask: url("../images/common/icon-externallink.svg") no-repeat center / contain;
  -webkit-mask: url("../images/common/icon-externallink.svg") no-repeat center / contain;
}
.copyright {
  padding-block: var(--space-3xs);
  color: var(--color-text-inverse);
  font-size: var(--size-min);
  font-weight: 400;
  line-height: var(--line-height-min);
  text-align: var(--text-align);
  background-color: var(--color-bg-primary-dark);
}
@media (max-width: 1024px) {
  .site-footer__body {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }
}
@media (max-width: 767px) {
  .site-footer__inner {
    padding-block: var(--space-md) var(--space-2xl);
    padding-inline: var(--space-2xs);
    background-color: var(--color-bg-default);
  }
  .navi-footer__list {
    width: 100%;
  }
  .navi-footer__list a {
    display: block;
  }
}

/* breadcrumbs
======================================== */

.breadcrumbs {
  padding: var(--space-3xs) var(--space-md);
  background-color: var(--color-bg-blank);
}
@media (max-width: 1024px) {
  .breadcrumbs {
    padding-inline: var(--space-2xs);
  }
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}
.breadcrumbs__item {
  font-size: var(--size-3xs);
  font-weight: 400;
  line-height: var(--line-height-min);
}
.breadcrumbs__item a {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-3xs);
  color: var(--color-text-primary);
}
.breadcrumbs__item a::after {
  content: "";
  width: var(--size-min);
  background-color: var(--color-bg-initbase);
  mask: url("../images/common/icon-arrow.svg") no-repeat center / contain;
  -webkit-mask: url("../images/common/icon-arrow.svg") no-repeat center / contain;
  transform: rotate(-90deg);
}

/* sidebar
======================================== */
.navi-sidebar__list {
  display: flex;
  gap: var(--space-2xs);
  flex-direction: column;
}
.navi-sidebar__link {
  display: inline-flex;
  padding-block: var(--space-3xs);
  font-size: var(--size-sm);
  line-height: var(--line-height-md);
  border-bottom: 2px solid transparent;
  transition: all .3s;
}
.navi-sidebar__link.is-current {
  border-color: var(--color-bg-primary);
}
.navi-sidebar__link:hover {
  color: var(--color-text-primary);
}

/* heading
======================================== */

.heading {
  --heading-size: var(--_fs-10);

  color: var(--heading-color, var(--heading-color-base));
  font-size: var(--heading-size, var(--heading-size-base));
  line-height: var(--heading-line-height);
  text-align: var(--text-align, start);
}
.c-page-header {
  max-width: var(--width-max);
  margin-top: var(--space-xl);
  margin-inline: auto;
  padding-inline: var(--space-max);
}
@media (max-width: 1024px) {
  .heading {
    --heading-size: clamp(var(--size-lg), 8.5333vw, var(--size-2xl));
  }
  .c-page-header {
    margin-top: var(--space-xs);
    padding-inline: var(--space-2xs);
  }
}
.c-page-header .heading {
  --heading-line-height: var(--line-height-min);
}
.description {
  margin-top: var(--space-md);
}
.description .anchor {
  margin-top: var(--space-xs);
}
.description a {
  color: var(--color-text-primary);
}

/* text
======================================== */

.lead {
  color: var(--lead-color, var(--lead-color-base));
  font-size: var(--lead-size, var(--lead-size-base));
}
.text {
  color: var(--body-color, var(--body-color-base));
  font-size: var(--text-size, var(--text-size-base));
}
.note {
  color: var(--note-color, var(--note-color-base));
  font-size: var(--note-size, var(--note-size-base));
}
.lead,.text,.note {
  text-align: var(--text-align, justify);
}

/* card
======================================== */

.card {
  --card-gap-base: var(--space-md);
  --card-padding-base: var(--space-lg);
  --card-bg-base: var(--card-bg);
  --card-radius-base: var(--card-radius);
  --card-shadow-base: var(--card-shadow);
  --card-media-height-base: auto;
  --card-media-scale-base: 1;

  --card-gap-context: initial;
  --card-padding-context: initial;
  --card-bg-context: initial;
  --card-radius-context: initial;
  --card-shadow-context: initial;
  --card-media-height-context: initial;
  --card-media-scale-context: initial;

  gap: var(--card-gap-context, var(--card-gap-base));
  padding: var(--card-padding-context, var(--card-padding-base));
  background-color: var(--card-bg-context, var(--card-bg-base));
  border-radius: var(--card-radius-context, var(--card-radius-base));
  box-shadow: var(--card-shadow-context, var(--card-shadow-base));
}
.card__media {
  block-size: var(--card-media-height-context, var(--card-media-height-base));
  transform: scale(var(--card-media-scale-context, var(--card-media-scale-base)));
}

/* media */
.media {
  overflow: hidden;
}
.media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* button
======================================== */

.button {
  --button-gap-base: var(--space-2xs);
  --button-padding-block-base: var(--space-2xs);
  --button-padding-inline-base: var(--space-sm);
  --button-label-base: var(--button-label);
  --button-bg-base: var(--button-bg);
  --button-radius-base: var(--radius-max);

  --button-gap-context: initial;
  --button-padding-block-context: initial;
  --button-padding-inline-context: initial;
  --button-label-context: initial;
  --button-bg-context: initial;
  --button-radius-context: initial;

  display: inline-flex;
  align-items: center;
  gap: var(--button-gap-context, var(--button-gap-base));
  inline-size: auto;
  padding-block: var(--button-padding-block-context, var(--button-padding-block-base));
  padding-inline: var(--button-padding-inline-context, var(--button-padding-inline-base));
  color: var(--button-label-context, var(--button-label-base));
  font-size: var(--button-label-size);
  font-weight: var(--button-label-weight);
  line-height: var(--button-label-line-height);
  background-color: var(--button-bg-context, var(--button-bg-base));
  border-radius: var(--button-radius-context, var(--button-radius-base));
  transition: opacity .3s;
}
.button:hover {
  opacity: var(--button-hover-opacity);
}
.button:disabled,
.button[aria-disabled="true"] {
  --button-label-context: var(--button-disabled-text);
  --button-bg-context: var(--button-disabled-bg);
  pointer-events: none;
}
.button__icon {
  color: currentColor;
  font-size: 1em;
}
.button[data-variant="action"] {
  color: var(--button-action-label);
  background-color: var(--button-action-bg);
}
.button[data-variant="search"] {
  --button-padding-inline-context: var(--space-2xs);
  color: var(--color-text-inverse);
  background-color: var(--color-bg-primary-dark);
}
.button[data-variant="search"][type="submit"] {
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.button[data-destination="listpage"] {
  --button-padding-block-context: var(--space-2xs);
  --button-padding-inline-context: var(--space-xs);
  color: var(--color-text-inverse);
  --button-radius-context: var(--radius-xs);
}
.button[data-destination="listpage"]::after {
  content: "→";
}

/* table
======================================== */
.l-entry .table * {
  margin: 0;
}
.table {
  --table-bg-base: var(--table-bg);
  --table-border-color-base: var(--table-border-color);
  --table-radius-base: var(--table-radius);

  --table-bg-context: initial;
  --table-border-color-context: initial;
  --table-radius-context: initial;

  background: var(--table-bg-context, var(--table-bg-base));
  border: var(--table-gap-border) solid var(--table-border-color-context, var(--table-border-color-base));
  border-radius: var(--table-radius-context, var(--table-radius-base));
}
.table .table__note {
  margin-top: var(--space-3xs);
  font-size: var(--size-xs);
}
.table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}
.table__table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (max-width: 767px) {
  .table__table {
    width: 860px;
  }
}
.table__table tr {
  border-bottom: var(--table-gap-border) solid var(--table-row-separator-color);
}
.table__table tr:first-of-type {
  border-top: var(--table-gap-border) solid var(--table-row-separator-color);
}
.table__table th,
.table__table td {
  --table-text-size-base: var(--table-text-size);
  --table-text-size-context: initial;

  font-size: var(--table-text-size-context, var(--table-text-size-base));
  text-align: var(--text-align, justify);
  vertical-align: middle;
}
.table__table thead th {
  --table-header-cell-padding-block-base: var(--table-header-cell-padding-block);
  --table-header-cell-padding-inline-base: var(--table-header-cell-padding-inline);

  --table-header-cell-padding-block-context: initial;
  --table-header-cell-padding-inline-context: initial;

  padding-block: var(--table-header-cell-padding-block-context, var(--table-header-cell-padding-block-base));
  padding-inline: var(--table-header-cell-padding-inline-context, var(--table-header-cell-padding-inline-base));
}
.table__table tbody th,
.table__table tbody td {
  --table-data-cell-padding-block-base: var(--table-data-cell-padding-block);
  --table-data-cell-padding-inline-base: var(--table-data-cell-padding-inline);

  --table-data-cell-padding-block-context: initial;
  --table-data-cell-padding-inline-context: initial;

  padding-block: var(--table-data-cell-padding-block-context, var(--table-data-cell-padding-block-base));
  padding-inline: var(--table-data-cell-padding-inline-context, var(--table-data-cell-padding-inline-base));
}
.table__table .table__caption {
  margin-bottom: var(--space-2xs);
  font-size: var(--size-md);
  font-weight: 700;
}
@media (max-width: 767px) {
  .table[data-variant="list"] .table__table {
    table-layout: fixed;
    width: 100%;
  }
  .table[data-variant="list"] .table__table tr {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding-block: var(--space-2xs);
  }
  .table[data-variant="list"] .table__table th,
  .table[data-variant="list"] .table__table td {
    padding: var(--space-0);
  }
}
@media (max-width: 1024px) {
  .table[data-variant="list"] .table__table th {
    width: 1%;
    white-space: nowrap;
  }
  .table[data-variant="list"] .table__table iframe {
    width: 100%;
  }
}

/* dl02 */
.table.table-dl02 {
  width: 100%;
}
.table.table-dl02:first-of-type,
.wpcf7-form {
  margin: 0;
}
.table.table-dl02 thead th {
  background-color: var(--color-bg-primary-light);
}
.table.table-dl02 tbody tr {
  border-bottom: var(--table-gap-border) solid var(--table-row-separator-color);
}
.table.table-dl02 thead th,
.table.table-dl02 tbody td {
  padding-block: var(--table-data-cell-padding-block);
  padding-inline: var(--table-data-cell-padding-inline);
  font-size: var(--table-text-size);
}
.table.table-dl02 thead th:first-child,
.table.table-dl02 tbody td:first-child {
  width: 5%;
  text-align: center;
}
.table.table-dl02 thead th:last-child,
.table.table-dl02 tbody td:last-child {
  width: 15%;
}

/* certification */
.table.table-certification {
  width: 100%;
  font-size: var(--size-2xs);
  border-right: 1px solid var(--color-border-default);
}
@media (max-width: 767px) {
  .table.table-certification {
    width: 1120px;
    margin-top: var(--space-md);
  }
}
.table.table-certification tr:not(:first-of-type) {
  border-top: 1px solid var(--color-border-default);
}
.table.table-certification th,
.table.table-certification td {
  padding: var(--space-2xs) var(--space-3xs);
  font-weight: 500;
  text-align: center;
  align-content: center;
  border-left: 1px solid var(--color-border-default);
}
.table.table-certification th {
  background-color: var(--color-bg-primary-light);
}
.table.table-certification th:nth-of-type(1) {
  width: 4%;
}
.table.table-certification th:nth-of-type(2) {
  width: 7%;
}
.table.table-certification th:nth-of-type(3) {
  width: 16%;
}
.table.table-certification th:nth-of-type(4) {
  width: 12%;
}
.table.table-certification th:nth-of-type(5) {
  width: 12%;
}
.table.table-certification th:nth-of-type(6) {
  width: 17%;
}
.table.table-certification th:nth-of-type(7) {
  width: 17%;
}
.table.table-certification th:nth-of-type(8) {
  width: 15%;
}
.table.table-certification td.dotted {
  border-top: 1px dotted var(--color-border-default);
}
.table.table-certification td > span {
  display: block;
}
.table.table-certification td > span + * {
  margin-top: var(--space-2xs);
}

/* list
======================================== */
.l-entry .catalog-item + * {
  margin: 0;
}
.catalog-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.catalog-item {
  width: calc((100% - (var(--space-xs) * 3)) / 4 );
  text-align: center;
}
@media (max-width: 767px) {
  .catalog-item {
    width: calc((100% - var(--space-xs)) / 2 );
  }
}
.catalog-item__image {
  display: block;
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-1);
}
.catalog-item__text {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--size-3xs);
}


/* form
======================================== */
.contact-tel {
  margin-top: var(--space-md);
  color: var(--color-text-primary);
  font-size: var(--size-2xl);
  font-weight: 700;
}
@media (max-width: 767px) {
  .contact-tel {
    font-size: var(--size-xl);
  }
}
.form-container {
  max-width: var(--width-xl);
  margin-inline: auto;
  padding: var(--space-2xl);
}
@media (max-width: 1024px) {
  .form-container {
    padding: var(--space-md);
  }
}
@media (max-width: 767px) {
  .form-container {
    padding: var(--space-md) var(--space-2xs);
  }
}
.form-title {
  text-align: center;
}
.form-list {
  margin-top: var(--space-2xl);
}
@media (max-width: 1024px) {
  .form-list {
    margin-top: var(--space-md);
  }
}
.form-list[data-layout="grid"] .form-item {
  display: grid;
  grid-template-columns: 15rem minmax(var(--grid-min-width), 1fr);
  align-items: start;
  gap: var(--space-2xs);
}
@media (max-width: 1024px) {
  .form-list[data-layout="grid"] .form-item {
    grid-template-columns: 100%;
  }
}
.form-list[data-layout="stack"] {
  margin-top: var(--space-md);
}
.form-list[data-layout="stack"] .form-item {
  margin-top: var(--space-2xs);
}
.form-list[data-layout="stack"] label {
  padding: var(--space-xs);
  line-height: var(--line-height-min);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}
@media (max-width: 1024px) {
  .form-list[data-layout="stack"] label {
    padding: var(--space-2xs);
  }
}
.form-list[data-layout="stack"] label:has(>input[type="checkbox"]:checked) {
  background-color: var(--color-bg-primary-light);
  border: 1px solid var(--color-border-primary);
}

.form-item * + * {
  margin: 0;
}
.form-item [data-name] {
  display: block;
  min-width: 0;
}
.form-item__label {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-2xs);
  font-size: var(--size-xs);
  font-weight: 700;
  line-height: var(--line-height-min);
}
@media (max-width: 1024px) {
  .form-item__label {
    justify-content: start;
    gap: var(--space-3xs);
    padding-block: var(--space-0);
  }
}
.form-item__badge {
  padding: var(--space-min) var(--space-3xs);
  color: var(--color-text-inverse);
  font-size: var(--size-min);
  font-weight: 500;
  line-height: var(--line-height-min);
  border-radius: var(--radius-xs);
}
.form-item__badge[data-variant="required"] {
  background-color: var(--color-bg-required);
}
.form-item__badge[data-variant="optional"] {
  background-color: var(--color-bg-optional);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="datatime"],
textarea,
select {
  --input-field-max-width-base: var(--input-field-max-width);
  --input-field-padding-block-base: var(--input-field-padding-block);
  --input-field-padding-inline-base: var(--input-field-padding-inline);
  --input-text-size-base: var(--input-text-size);
  --input-line-height-base: var(--input-line-height);
  --input-bg-base: var(--input-bg);
  --input-border-color-base: var(--input-border-color);
  --input-radius-base: var(--input-radius);

  --input-field-max-width-context: initial;
  --input-field-padding-block-context: initial;
  --input-field-padding-inline-context: initial;
  --input-text-size-context: initial;
  --input-line-height-context: initial;
  --input-bg-context: initial;
  --input-border-color-context: initial;
  --input-radius-context: initial;

  width: var(--input-field-max-width-base);
  padding-block: var(--input-field-padding-block-context, var(--input-field-padding-block-base));
  padding-inline: var(--input-field-padding-inline-context, var(--input-field-padding-inline-base));
  color: var(--color-text-init);
  font-size: var(--input-text-size-context, var(--input-text-size-base));
  font-weight: 400;
  line-height: var(--input-line-height-context, var(--input-line-height-base));
  background-color: var(--input-bg-context, var(--input-bg-base));
  border-color: var(--input-border-color-context, var(--input-border-color-base));
  border-radius: var(--input-radius-context, var(--input-radius-base));
}
textarea {
  --input-line-height-context: var(--line-height-md);
  width: 100%;
  resize: vertical;
}
select {
  --input-line-height-context: var(--line-height-md);
  width: fit-content;
  --input-field-padding-inline-context: var(--space-xs) var(--space-lg);
  background: url(../images/common/icon-arrow.svg) #FFF no-repeat right var(--space-2xs) center / var(--size-4xs) auto;
}
label:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  cursor: pointer;
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  inline-size: var(--size-md);
  block-size: var(--size-md);
  border-radius: var(--radius-xs);
  background-color: var( --color-bg-disabled);
  display: grid;
  place-content: center;
  cursor: pointer;
}
input[type="checkbox"]::before {
  content: "";
  inline-size: var(--size-4xs);
  block-size: calc(var(--size-4xs) / 2);
  border-left: 2px solid var(--color-border-inverse);
  border-bottom: 2px solid var(--color-border-inverse);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
}
input[type="checkbox"]:checked {
  background-color: var(--color-bg-primary);
}
input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--init-color);
  outline-offset: 2px;
}
::placeholder {
  --placeholder-color-base: var(--placeholder-color);
  --placeholder-color-context: initial;
  color: var(--placeholder-color-context, var(--placeholder-color-base));
}
.form-submit {
  margin-top: var(--space-2xl);
  text-align: center;
}
.form-submit a {
  display: inline-block;
  margin-top: var(--space-xs);
  font-size: var(--size-3xs);
}
.form-submit .button[type="submit"] {
  inline-size: var(--width-min);
}

/* contact form 7 */
.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-not-valid-tip {
  padding: var(--space-3xs);
  color: var(--color-text-attention);
  font-size: var(--size-2xs);
}
.wpcf7-list-item-label {
  margin: 0;
}
.wpcf7-list-item {
  margin: 0;
}
.wpcf7-spinner {
  display: none;
  margin-inline: auto;
}

/* scroll hint */
@media (min-width: 768px) {
  .scroll-wrap.js-scrollable {
    position: static!important;
  }
}
@media (max-width: 767px) {
  .scroll-wrap.js-scrollable {
    width: 100%;
    margin: 0;
    overflow-x: auto!important;
    overflow-y: hidden!important;
  }
  .scroll-wrap.js-scrollable > img {
    width: 860px;
    max-width: unset;
  }
}