@charset "utf-8";
/* *************************************
hamburger
************************************* */
.hamburger {
  width: fit-content;
  text-align: center;
}

@media (any-hover: hover) {
  .hamburger:hover {
    cursor: pointer;
  }
}

.hamburger__btn {
  padding: calc(8 * var(--rem));
}

.hamburger__btn span {
  display: block;
  width: calc(32 * var(--rem));
  height: calc(2 * var(--rem));
  background-color: var(--white);
  transition: 0.3s ease;
}

.header.is-active .hamburger__btn span,
.header.is-color .hamburger__btn span,
.header.not-front .hamburger__btn span {
  background-color: var(--black);
}

.hamburger__btn span:nth-child(2) {
  margin: calc(8 * var(--rem)) 0;
}

/* is-open */
.hamburger.is-open .hamburger__btn span:nth-child(1) {
  transform: translateY(calc(10 * var(--rem))) rotate(45deg);
}
.hamburger.is-open .hamburger__btn span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open .hamburger__btn span:nth-child(3) {
  transform: translateY(calc(-10 * var(--rem))) rotate(-45deg);
}

.hamburger__menu,
.hamburger__close {
  text-transform: uppercase;
  font-size: calc(12 * var(--rem));
  font-weight: bold;
  font-family: var(--jp);
  line-height: 1;
  color: var(--white);
}

.header.is-active .hamburger__menu,
.header.is-color .hamburger__menu,
.header.not-front .hamburger__menu {
  color: var(--black);
}

.header.is-active .hamburger__close {
  color: var(--black);
}

.hamburger.is-open .hamburger__menu {
  display: none;
}

.hamburger__close {
  display: none;
}

.hamburger.is-open .hamburger__close {
  display: block;
}

/* *************************************
page-head
************************************* */
.page-head {
  height: calc(600 * var(--rem));
  position: relative;
  margin-block-start: var(--header-height-pc);
  @media (width < 768px) {
    height: auto;
    margin-block-start: var(--header-height-sp);
  }
}

.page-head__img {
  height: inherit;
}

.page-head__img img {
  aspect-ratio: 1200 /510;
  width: 100%;
  height: 100%;
  object-fit: cover;
  @media (width < 768px) {
    aspect-ratio: 1;
  }
}

.page-head[data-page="about"] .page-head__img img {
  object-position: 50% 10%;
}

.page-head__title {
  position: absolute;
  top: 34%;
  left: 5%;

  @media (width < 768px) {
    width: 100%;
    padding-inline: calc(24 * var(--rem));
    container-type: inline-size;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.page-head__title-en {
  font-size: calc(100 * var(--rem));
  font-weight: 900;
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
  text-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.15),
    4px 4px 8px rgba(0, 0, 0, 0.12),
    6px 6px 16px rgba(0, 0, 0, 0.1),
    8px 8px 24px rgba(0, 0, 0, 0.08);
  @media (width < 768px) {
    font-size: min(15cqi, 90px);
  }
}

.page-head__title-jp {
  font-size: calc(60 * var(--rem));
  line-height: 1;
  font-weight: 900;
  color: var(--white);
  margin-block-start: calc(12 * var(--rem));
  text-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.15),
    4px 4px 8px rgba(0, 0, 0, 0.12),
    6px 6px 16px rgba(0, 0, 0, 0.1),
    8px 8px 24px rgba(0, 0, 0, 0.08);
  @media (width < 768px) {
    font-size: min(9cqi, 40px);
  }
}

.page-head[date-font-size='small'] .page-head__title-jp {
  font-size: calc(35 * var(--rem));
  margin-block-start: calc(15 * var(--rem));
  line-height: 1.3;
  @media (width < 768px) {
    font-size: min(7cqi, 40px);
  }
}

/* 環境取り組み */
.page-head[data-page='environment'] .page-head__img img {
  object-position: 50% 92%;
}

.page-head[data-page='environment'] .page-head__title-en {
  @media (width < 768px) {
    font-size: min(13cqi, 90px);
  }
}

.page-head[data-page='environment'] .page-head__title-jp {
  font-size: calc(35 * var(--rem));
  margin-block-start: calc(13 * var(--rem));
  line-height: 1.3;
  @media (width < 768px) {
    font-size: min(6cqi, 40px);
  }
}

/* 参共化成について、リクルート */
.page-head[data-page='about'] .page-head__title-jp,
.page-head[data-page='recruit'] .page-head__title-jp {
  font-size: calc(35 * var(--rem));
  margin-block-start: calc(13 * var(--rem));
  line-height: 1.3;
  @media (width < 768px) {
    font-size: min(6cqi, 40px);
  }
}

/* *************************************
btn1
************************************* */
.btn1 {
  display: inline-grid;
  min-width: calc(200 * var(--rem));
  padding-block: calc(10 * var(--rem));
  padding-inline: calc(22 * var(--rem));
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(16 * var(--rem));
  background-color: var(--blue);
  border-radius: 100vmax;
  letter-spacing: 0.05em;
  color: var(--white);
}

.btn1::after {
  content: '';
  display: inline-block;
  width: 0.5lh;
  aspect-ratio: 1;
  background: url(../../library/images/common/btn-arrow-w.svg) no-repeat center / contain;
  margin-block-start: calc(3 * var(--rem));
  transition: translate 0.3s ease-out;
}

@media (any-hover: hover) {
  .btn1:hover {
    opacity: 1;
  }
  .btn1:hover::after {
    translate: calc(8 * var(--rem));
  }
}

.btn1[data-color='green'] {
  background-color: var(--green);
}

/* *************************************
post
************************************* */
.post {
}

.post[data-list='archive'] {
  display: grid;
  gap: calc(16 * var(--rem));
}

.post__item {
}

.post__link {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  padding-block: calc(10 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: calc(120 * var(--rem)) auto;
    grid-template-rows: repeat(2, auto);
    padding-block: calc(20 * var(--rem));
  }
}

.post[data-list='archive'] .post__link {
  padding-block: calc(16 * var(--rem));
  border-bottom: 1px solid var(--gray);
}

.post__time {
  font-size: calc(14 * var(--rem));
  font-weight: 900;
  margin-inline-end: calc(25 * var(--rem));
  @media (width < 768px) {
    grid-column: 1/2;
    grid-row: 1/2;
    margin-inline-end: calc(4 * var(--rem));
    display: inline-block;
    width: fit-content;
  }
}

.post__cat {
  background-color: var(--red);
  padding-block: calc(2 * var(--rem));
  padding-inline: calc(8 * var(--rem));
  font-size: calc(14 * var(--rem));
  color: var(--white);
  min-width: calc(111 * var(--rem));
  text-align: center;
  border-radius: calc(6 * var(--rem));
  margin-inline-end: calc(14 * var(--rem));
  @media (width < 768px) {
    grid-column: 2/3;
    grid-row: 1/2;
    width: fit-content;
  }
}

.post__title {
  font: calc(14 * var(--rem));
  font-weight: bold;
  @media (width < 768px) {
    grid-column: span 2;
    grid-row: 2/3;
    margin-block-start: calc(8 * var(--rem));
  }
}

/* *************************************
title1
************************************* */
.title1 {
  font-size: calc(60 * var(--rem));
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--white);
  background-color: var(--blue);
  padding-block: calc(10 * var(--rem));
  padding-inline: calc(26 * var(--rem)) calc(8 * var(--rem));
  position: relative;
  @media (width < 768px) {
    font-size: calc(35 * var(--rem));
    padding-inline: calc(8 * var(--rem));
  }
}

.title1::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  position: absolute;
  top: 1px;
  left: 1px;
  clip-path: polygon(35% 43%, 100% 43%, 100% 100%, 32% 100%);
  @media (width < 768px) {
    clip-path: polygon(75% 43%, 100% 43%, 100% 100%, 70% 100%);
  }
}

/* *************************************
title2
************************************* */
.title2 {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  gap: calc(4 * var(--rem));
}

.title2__main {
  font-size: calc(50 * var(--rem));
  letter-spacing: -0.05em;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
  @media (width < 768px) {
    font-size: calc(30 * var(--rem));
  }
}

.title2__sub {
  font-size: calc(30 * var(--rem));
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--blue);
  font-feature-settings: 'palt';
  font-kerning: auto;
  margin-block-start: calc(3 * var(--rem));
  line-height: 1;
  @media (width < 768px) {
    font-size: calc(20 * var(--rem));
  }
}

/* *************************************
title3
************************************* */
.title3 {
  font-size: calc(35 * var(--rem));
  font-weight: 900;
  color: var(--blue);
  text-transform: capitalize;
  @media (width < 768px) {
    font-size: calc(30 * var(--rem));
  }
}

/* *************************************
card1-list
************************************* */
.card1-list {
  display: grid;
  gap: calc(38 * var(--rem));
}

.card1-list__item {
  background: url(../../library/images/product/product2.webp) no-repeat center / cover;
  min-height: calc(355 * var(--rem));
  border-radius: calc(23 * var(--rem));
  padding: calc(30 * var(--rem)) calc(42 * var(--rem));
  position: relative;
  overflow: clip;
  @media (width < 768px) {
    padding-inline: calc(16 * var(--rem)) calc(24 * var(--rem));
    min-height: calc(300 * var(--rem));
  }
}

.card1-list__item:nth-child(2) {
  background: url(../../library/images/product/product3.webp) no-repeat center / cover;
}

.card1-list__item:nth-child(3) {
  background: url(../../library/images/product/product4.webp) no-repeat center / cover;
}

.card1-list__item::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #2185d0 0%, transparent 50%);
}

.card1-list__title {
  font-size: calc(50 * var(--rem));
  color: var(--white);
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.12em;
  position: relative;
  @media (width < 768px) {
    font-size: calc(30 * var(--rem));
  }
}

.card1-list__text {
  margin-block-start: calc(21 * var(--rem));
  margin-inline-start: calc(10 * var(--rem));
  font-size: calc(19 * var(--rem));
  color: var(--white);
  line-height: 1.6;
  position: relative;
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

/* *************************************
img-parts1
************************************* */
.img-parts1 {
  /* width: calc(350 * var(--rem)); */

  aspect-ratio: 297/282;
  background: url(../../library/images/flow/folder.webp) no-repeat center / contain;
  position: relative;
  @media (width < 768px) {
    width: 100%;
  }
}

.img-parts1__title {
  font-size: calc(44 * var(--rem));
  color: var(--white);
  letter-spacing: 0.66em;
  font-weight: 500;
  line-height: 1;
  position: absolute;
  top: 4%;
  left: 11%;
  @media (width < 768px) {
    font-size: calc(38 * var(--rem));
  }
}

.img-parts1__img {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  border-radius: calc(10 * var(--rem));
  border: 1px solid var(--white);
  overflow: clip;
}

.img-parts1__img img {
  aspect-ratio: 278 /208;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-parts1__img:empty {
  aspect-ratio: 278 / 208;
  width: 95%;
}

.img-parts1[date-text='characters4'] .img-parts1__title {
  left: 7%;
  letter-spacing: -0.01em;
}

.img-parts1[date-text='characters13'] .img-parts1__title {
  font-size: calc(26 * var(--rem));
  top: 3%;
  left: 7%;
  letter-spacing: -0.01em;
  @media (width < 768px) {
    left: 5%;
  }
}

/* *************************************
img-parts1-list
************************************* */
.img-parts1-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: calc(70 * var(--rem));

  @media (width < 768px) {
    display: block;
    max-width: calc(400 * var(--rem));
    margin-inline: auto;
  }
}

.img-parts1-list__item {
  position: relative;
}

.img-parts1-list__item + .img-parts1-list__item {
  @media (width < 768px) {
    margin-block-start: calc(80 * var(--rem));
  }
}

.img-parts1-list__item:nth-child(1) {
  grid-column: 1/1;
  grid-row: 1/2;
}
.img-parts1-list__item:nth-child(2) {
  grid-column: 2/3;
  grid-row: 1/2;
}
.img-parts1-list__item:nth-child(3) {
  grid-column: 3/4;
  grid-row: 1/2;
}
.img-parts1-list__item:nth-child(4) {
  grid-column: 3/4;
  grid-row: 2/3;
}
.img-parts1-list__item:nth-child(5) {
  grid-column: 2/3;
  grid-row: 2/3;
}
.img-parts1-list__item:nth-child(6) {
  grid-column: 1/2;
  grid-row: 2/3;
}

.img-parts1-list__item::after {
  content: '';
  display: block;
  width: calc(60 * var(--rem));
  aspect-ratio: 1;
  background: url(../../library/images/flow/flow-arrow.svg) no-repeat center / contain;
  position: absolute;
  top: 56%;
  right: -20%;
  transform: translate(0%, -50%);
  @media (width < 768px) {
    top: 110%;
    left: 42%;
    transform: translate(-50%, 0%);
    rotate: 90deg;
  }
}

.img-parts1-list__item:nth-child(3)::after {
  top: 111%;
  right: 41%;
  transform: translate(-50%, 0%);
  rotate: 90deg;
}

.img-parts1-list__item:nth-child(4)::after {
  display: none;
  @media (width < 768px) {
    display: block;
  }
}

.img-parts1-list__item:nth-child(5)::after {
  rotate: 180deg;
  top: 40%;
  right: -18%;
  @media (width < 768px) {
    top: 110%;
    left: 42%;
    transform: translate(-50%, 0%);
    rotate: 90deg;
  }
}

.img-parts1-list__item:nth-child(6)::after {
  rotate: 180deg;
  top: 40%;
  right: -18%;
  @media (width < 768px) {
    display: none;
  }
}

/* *************************************
img-parts2-list
************************************* */
.img-parts2-list {
  width: min(100%, 1180px);
  display: grid;
  gap: calc(64 * var(--rem));
}

.img-parts2-list__item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(42 * var(--rem));
  align-items: self-end;
  @media (width < 768px) {
    grid-template-columns: 1fr;
    gap: calc(8 * var(--rem));
  }
}

.img-parts2-list__item:nth-child(4) .img-parts2-list__img1 {
  margin-block-start: calc(-62 * var(--rem));
}

.img-parts2-list__img1 img {
  aspect-ratio: 620/435;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-parts2-list__img2 {
  margin-block-start: calc(-46 * var(--rem));
  cursor: zoom-in;
  @media (width < 768px) {
    margin-block-start: 0;
  }
}

.img-parts2-list__img2 img {
  aspect-ratio: 601 / 357;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-parts2-list__img3 {
  height: calc(213 * var(--rem));
}

.img-parts2-list__img3 img {
  aspect-ratio: 1280 /853;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-parts2-list__item:nth-child(3) .img-parts2-list__img1 img {
  aspect-ratio: 620/490;
}

.img-parts2-list__img3 figcaption {
  text-align: center;
  font-size: calc(14 * var(--rem));
  font-weight: bold;
}

/* *************************************
zoom-modal
************************************* */
.zoom-modal {
  display: flex;
  justify-content: center;
  align-items: center;

  position: fixed;
  inset: 0;
  z-index: 9999;

  background-color: rgb(0 0 0 / 0.8);

  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.zoom-modal[data-state='open'] {
  opacity: 1;
  visibility: visible;
}

.zoom-modal__inner {
  position: relative;
  max-width: min(95vw, calc(1400 * var(--rem)));
  max-height: 95dvh;

  transform: scale(0.92);
  transition: transform 0.3s ease;
}

.zoom-modal[data-state='open'] .zoom-modal__inner {
  transform: scale(1);
}

.zoom-modal__img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 95dvh;
  object-fit: contain;
}

.zoom-modal__close {
  position: absolute;
  top: calc(-44 * var(--rem));
  right: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  width: calc(36 * var(--rem));
  height: calc(36 * var(--rem));

  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* × アイコンを疑似要素で描画 */
.zoom-modal__close-icon,
.zoom-modal__close-icon::before {
  display: block;
  width: calc(28 * var(--rem));
  height: calc(2 * var(--rem));
  background-color: #fff;
  border-radius: 2px;
}

.zoom-modal__close-icon {
  position: relative;
  transform: rotate(45deg);
}

.zoom-modal__close-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(90deg);
}

/* ホバー時に少し透過 */
.zoom-modal__close:hover .zoom-modal__close-icon,
.zoom-modal__close:hover .zoom-modal__close-icon::before {
  opacity: 0.7;
}

/* *************************************
table1
************************************* */
.table1 {
  border: 1px solid var(--black);
}

.table1__item {
  display: grid;
  grid-template-columns: calc(140 * var(--rem)) 1fr;
  @media (width < 768px) {
    grid-template-columns: calc(110 * var(--rem)) 1fr;
  }
}

.table1__item:not(:last-child) {
  border-bottom: 1px solid var(--black);
}

.table1__item dt {
  padding: calc(7 * var(--rem));
  font-size: calc(20 * var(--rem));
  color: var(--blue);
  font-weight: bold;
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

.table1__item dd {
  border-left: 1px solid var(--black);
  padding: calc(7 * var(--rem)) calc(10 * var(--rem));
  font-size: calc(18 * var(--rem));
  color: var(--blue);
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

.table1[data-type='2'] .table1__item {
  grid-template-columns: 1fr calc(80 * var(--rem));
}

.table1[data-type='2'] .table1__item dt {
  padding: calc(10 * var(--rem));
}

.table1[data-type='2'] .table1__item dd {
  font-weight: bold;
  padding: calc(10 * var(--rem));
  text-align: right;
  display: grid;
  align-items: center;
}

/* *************************************
member-list
************************************* */
.member-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(84 * var(--rem)) calc(100 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

/* *************************************
member-card
************************************* */
.member-card {
}

.member-card__img-wrap {
  position: relative;
}

.member-card__img img {
  aspect-ratio: 500/ 352;
  width: 100%;
  height: 100%;
  border-radius: calc(20 * var(--rem));
}

.member-card__title-img {
  position: absolute;
  top: 98%;
  left: 0%;
  transform: translate(0%, -50%);
  width: 95%;
}

.member-card__title-img img {
  aspect-ratio: 430/147;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.member-list__item:nth-child(2) .member-card__title-img {
}
.member-list__item:nth-child(3) .member-card__title-img img {
}
.member-list__item:nth-child(4) .member-card__title-img img {
}

.member-card__meta {
  margin-block-start: calc(105 * var(--rem));
  margin-inline-start: calc(45 * var(--rem));
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  align-items: end;
  gap: calc(6 * var(--rem));
  @media (width < 768px) {
    display: block;
    width: min(80%, calc(350 * var(--rem)));
    margin-inline: auto;
    margin-block-start: calc(72 * var(--rem));
  }
}

.member-card__year {
  width: fit-content;
  font-size: calc(18 * var(--rem));
  line-height: 1;
  font-weight: bold;
  color: var(--white);
  background-color: var(--blue);
  padding-block: calc(5 * var(--rem));
  padding-inline: calc(7 * var(--rem)) 0;
  grid-column: 1/2;
  grid-row: 1/2;
}

.member-card__department {
  font-family: calc(20 * var(--rem));
  font-weight: bold;
  letter-spacing: 0.09em;
  grid-column: 1/2;
  grid-row: 2/3;
}

.member-card__business {
  font-family: calc(20 * var(--rem));
  font-weight: bold;
  grid-column: 1/2;
  grid-row: 3/4;
}

.member-name {
  font-weight: bold;
  grid-column: 2/3;
  grid-row: 1/4;
  padding-block-end: calc(8 * var(--rem));
  font-size: calc(34 * var(--rem));
  letter-spacing: 0.1em;
  line-height: 1;
  @media (width < 768px) {
    margin-block-start: calc(16 * var(--rem));
  }
}

.member-card__container {
  margin-block-start: calc(10 * var(--rem));
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: self-start;
  gap: calc(20 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

.member-card__subimg {
  width: calc(230 * var(--rem));
  border-radius: calc(15 * var(--rem));
  overflow: clip;
  margin-block-start: calc(10 * var(--rem));
  @media (width < 768px) {
    width: min(80%, calc(350 * var(--rem)));
    margin-inline: auto;
  }
}

.member-card__subimg img {
  aspect-ratio: 191/206;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.3;
  object-position: 50% 50%;
}

.member-card__faq {
  display: grid;
  gap: calc(22 * var(--rem));
}

.member-card__faq-item {
  counter-increment: num;
}

.member-card__faq-item dt {
  color: var(--blue);
  font-weight: 500;
}

.member-card__faq-item dt::before {
  content: 'Q' counter(num, decimal-leading) '.';
}

.member-card__faq-item dd {
  font-size: calc(14 * var(--rem));
}

.member-card__faq-item dd::before {
  content: 'A' counter(num, decimal-leading) '.';
}

/* *************************************
slider1
************************************* */
.slider1 {
}

.slider1__container {
}

.slider1__list {
}

.slider1__item {
  height: calc(602 * var(--rem));
  background-color: var(--white);
}

.slider1__item img {
  aspect-ratio: 1200/510;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ページぺーション */
.slider1-pagination.swiper-pagination {
  top: 86%;
}

.slider1-pagination .swiper-pagination-bullet {
  border-radius: 0;
  width: calc(110 * var(--rem));
  @media (width < 768px) {
  width: calc(52 * var(--rem));
  }
}

.slider1-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--green);
}

.slider1-pagination__list {
  position: absolute;
  top: 92%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: inline-grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  gap: calc(47 * var(--rem));
  @media (width < 768px) {
    width: calc(375 * var(--rem));
    gap: calc(10 * var(--rem));
    padding-inline: calc(10 * var(--rem));
  }
}

.slider1-pagination__item {
  font-weight: bold;
  font-size: calc(14 * var(--rem));
  @media (width < 768px) {
    display: block;
    font-size: calc(10 * var(--rem));
    text-align: center;
  }
}

/* *************************************
list1
************************************* */
.list1 {
}

.list1__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(8 * var(--rem));
  font-weight: bold;
}

.list1__item::before {
  content: '';
  display: inline-block;
  width: 0.7lh;
  aspect-ratio: 1;
  background-color: var(--blue);
  margin-block-start: calc(3 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(4 * var(--rem));
  }
}

/* *************************************
table2
************************************* */
.table2 {
  display: grid;
  gap: calc(8 * var(--rem));
}

.table2__item {
  display: grid;
  grid-template-columns: calc(70 * var(--rem)) 1fr;
  gap: calc(13 * var(--rem));
}

.table2__item dt {
}

.table2__item dd {
}

/* *************************************
pagination
************************************* */
.pagination {
}

.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(16 * var(--rem));
}

.page-numbers li a,
.page-numbers li span {
  display: inline-block;
  border: 1px solid var(--black);
  padding: calc(8 * var(--rem)) calc(10 * var(--rem));
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;
}

@media (any-hover: hover) {
  .page-numbers li a:hover {
    border-color: var(--blue);
    background-color: var(--blue);
    color: var(--white);
    opacity: 1;
  }
}

.page-numbers li span.current {
  border-color: var(--blue);
  background-color: var(--blue);
  color: var(--white);
}

/* *************************************
cat-list
************************************* */
.cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--rem));
  @media (width < 768px) {
    gap: calc(16 * var(--rem)) calc(8 * var(--rem));
  }
}

.cat-list__item a {
  display: inline-block;
  background-color: var(--blue);
  padding-block: calc(4 * var(--rem));
  padding-inline: calc(8 * var(--rem));
  font-size: calc(14 * var(--rem));
  color: var(--white);
  min-width: calc(111 * var(--rem));
  text-align: center;
  border-radius: calc(6 * var(--rem));
  @media (width < 768px) {
    min-width: calc(80 * var(--rem));
  }
}

/* *************************************
the_content
************************************* */
.the_content {
  img.alignright {
    display: block;
    margin: 0 0 0 auto;
  }
  img.alignleft {
    display: block;
    margin: 0 auto 0 0;
  }
  img.aligncenter {
    display: block;
    margin: 0 auto;
  }

  p {
    margin-block-end: 1em;
  }

  img {
    height: auto;
  }
}