@charset "utf-8";
/*----------------------------------------------------
	共通タイトル
----------------------------------------------------*/
/*タイトル*/
.title {
  position: relative;
  text-align: center;
  padding: 0 1em;
}
.title__text {
  text-align: center;
  position: absolute;
  font-size: var(--40px);
  top: 2.5em;
  left: 50%;
  transform: translate(-50%, -50%);
}
.title__text__en {
  font-size: clamp(65px, 2.000px + 16.8vw, 170px);
  font-family: YuMincho, Yu Mincho, serif;
  font-weight: normal;
  text-align: center;
  opacity: 0.2;
}
.full-container.-top__en {
  margin-bottom: -15em;
}
@media (max-width: 767px) { /* SP */
  .title {
    margin-top: 2em;
  }
  .title__text {
    top: 2em;
  }
}

.heading {
  color: #fff;
  font-size: var(--30px);
  font-weight: normal;
}
.heading.-blue {
  color: var(--color-main);
}

/*----------------------------------------------------
	共通パーツ
----------------------------------------------------*/
/* ボタン */
.button {
  display: inline-block;
  padding: 1em;
  border: 1px solid transparent;
  color: #fff;
  border-color: currentColor;
  transition: .3s;
  line-height: 1.5;
  width: min(340px, 100%);
  text-align: center;
  font-size: var(--20px);
}
.button:is(:hover, :focus) {
  border-color: var(--color-main);
  background: #fff;
  color: var(--color-main);
}
.button.-w100 {
  width: 100%;
}

/*画像の枠*/
.image__line { border: #fff 1px solid; }


/*文字サイズ*/
.text20 { font-size: var(--20px); }
.text40 { font-size: var(--40px); }


/*動画*/
video {
  width: 100%; /* 動画をレスポンシブ化 */
  max-width: 1400px; /* 動画の最大幅 */
}


/*背景*/
.second__visual {
  background-image: url("../images/second_visual.webp");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.-back__white {
  background: #fff;
  padding: 1em 0;
  color: #000;
}
.-back__white .-blue {
  color: var(--color-main);
}
.-back__white .heading {
  color: #000;
}

/*glid*/
.boxG {
  width: min(1000px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 2em;
  align-items: center;
  margin-top: 2em;
  margin-bottom: 3em;
}

/*Flex*/
.box {
  display: flex;
  column-gap: 3em;
}
.boxS {
  width: min(800px, 100%);
  margin-inline: auto;
  display: flex;
  margin-top: 8em;
  column-gap: 2em;
}
.boxL {
  width: min(1000px, 100%);
  margin-inline: auto;
  display: flex;
  margin-top: 8em;
  column-gap: 2em;
  position: relative;
}
.boxS.-center,
.boxL.-center {
  align-items: center;
}
.box__line {
  border: #fff 1px solid;
  padding: 1em 2em;
  width: min(800px, 100%);
  margin-inline: auto;
  margin-top: 4em;
}

.box__container {
  width: 100%;
}
.box__container.-flex {
  display: flex;
  align-items: center;
  column-gap: 2em;
}
.box__inner {
  width: 50%;
}

.box__requests {
  width: min(1000px, 100%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  margin-top: 8em;
  column-gap: 4em;
  padding: 10em 0;
  
}
.box__inner50 {
  width: 50%;
}
.box__inner40 {
  width: 40%;
}
.box__inner60 {
  width: 60%;
}
.box__inner30 {
  width: 30%;
}
.box__inner70 {
  width: 70%;
  align-self: center;
}

@media (min-width: 1000px) { /* PC */
  .boxS.-reverse,
  .boxL.-reverse {
    flex-direction: row-reverse;
  }
}
@media (max-width: 999px) { /* SP */
  .boxS,
  .boxL {
    flex-direction: column;
  }
  .box__inner{
    width: 100%;
    margin-bottom: 3em;
  }
}
@media (min-width: 768px) { /* PC */
  .-back__requests__blue {
    background: url("../../requests/images/back_requests.webp") no-repeat bottom right / 100% auto;
  }
  .-back__requests__white {
    background-image: linear-gradient(180deg,rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);
  }
  .box.-reverse {
    flex-direction: row-reverse;
  }
}
@media (max-width: 1000px) { /* PC */
  .box__inner50,
  .box__inner40,
  .box__inner60 {
    width: 50%;
  }
  .box__inner30,
  .box__inner70 {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 767px) { /* SP */
  .-back__requests__blue {
    background: url("../../requests/images/back_requests.webp") no-repeat top left / auto 100%;
  }
  .box,
  .box__requests {
    flex-direction: column;
  }
  .box__inner60 {
    width: 100%;
    text-align: center;
  }
  .box__inner50,
  .box__inner40 {
    width: 100%;
    margin-top: 2em;
  }
}


/*縦型のタイトル*/
@media (min-width: 1000px) { /* PC */
  .box__title {
    width: 80px;
  }
  .box__title.-left {
    writing-mode: vertical-rl;
    margin-right: -80px;
  }
  .box__title.-right {
    writing-mode: vertical-lr;
    margin-left: -80px;
  }
}

@media (max-width: 999px) { /* SP */
  .box__title {
    text-align: center;
    margin-bottom: 2em;
  }
}

.box__container__en {
  font-size: clamp(50px, 32.000px + 4.8vw, 80px);
  font-family: YuMincho, Yu Mincho, serif;
  font-weight: normal;
  opacity: 0.2;
  text-align: right;
  margin-top: -.5em;
  line-height: .5;
}

/*表組*/
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 1.5;
  border-top: 1px solid #fff;
  font-size: var(--18px);
}
.table th { font-weight: normal; white-space: nowrap; }
.table td { border-left: 1px solid #fff; }
.table td:first-child { border-left: none; }
.table th,
.table td { display: table-cell; border-bottom: 1px solid #fff; padding: 1em; text-align: center; }
@media (max-width: 767px) { /* SP */
  .table.-tCL td {
    text-align: left;
  }
  .table__wrap .table { width: 800px; margin-top: 3em; }
  .table__wrap .table td { padding: .5em; }
  .table__wrap { overflow-x: scroll; position: relative; }
  .table__wrap::before { content: "\008868\00306f\005de6\0053f3\00306b\0030b9\0030af\0030ed\0030fc\0030eb\003067\00304d\00307e\003059"; /* 文字化け対策のためUnicode変換 */ color: #fff; background: #000; position: absolute; padding: .3em 1em; }
}

/*沿革*/
.timeline {
  position: relative;
  padding-left: 2em;
  border-left: 3px solid var(--color-main);
  font-size: var(--20px);
  width: 100%;
}
.timeline__item {
  margin-bottom: 2em;
  position: relative;
  display: flex;
}
.timeline__date {
  font-weight: bold;
  color: #fff;
  margin-bottom: .3em;
}
.timeline__content {
  background: var(--color-main);
  padding: .5em 2em;
  border-radius: 6px;
  width: 80%;
}
@media (max-width: 767px) { /* SP */
  .timeline__item {
    flex-direction: column;
  }
  .timeline__content {
    width: 100%;
  }
}