@charset "utf-8";

.l-header {
  /* background: #00428e; */
}

body.color_change .l-header {
  background: transparent;
}

/* .l-header::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -2;
  background-color: #4279b9;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(1 / 1366 * 100vw); /* 1px 変換 */
  height: 100%;
} */
body.color_change .l-header::after {
  opacity: 0;
}

.l-header__logo {
  color: #fff;
}
body.color_change .l-header__logo {
  color: var(--primary);
}

.l-header__nav__btn .bar.top,
.l-header__nav__btn .bar.bottom {
  background-color: #fff;
}

body.color_change .l-header__nav__btn .bar.top,
body.color_change .l-header__nav__btn .bar.bottom {
  background-color: var(--text);
}

.l-header__nav__btn .bar.middle {
  border-top: calc(1 / 1366 * 100vw) dotted #fff; /* 1px 変換 */
}
body.color_change .l-header__nav__btn .bar.middle {
  border-top: calc(1 / 1366 * 100vw) dotted var(--text); /* 1px 変換 */
}

.l-header__nav__btn .txt::before {
  color: #fff;
}
body.color_change .l-header__nav__btn .txt::before {
  color: var(--text);
}

.text00 {
  font-weight: normal;
  font-size: calc(14 / 1366 * 100vw);
  letter-spacing: 0.05em;
  line-height: calc(32 / 14);
  color: #fff;
}
@media screen and (max-width: 768px) {
  .text00 {
    font-size: calc(14 / 375 * 100vw);
    line-height: calc(32 / 14);
  }
}

.block_message00 h2 {
  font-weight: bold;
  font-size: calc(36 / 1366 * 100vw);
  letter-spacing: 0.05em;
  line-height: calc(60 / 36);
  margin-bottom: calc(77 / 1366 * 100vw);
  color: #fff;
}
@media screen and (max-width: 768px) {
  .block_message00 h2 {
    font-size: calc(20 / 375 * 100vw);
    letter-spacing: 0.05em;
    line-height: calc(35 / 20);
    margin-bottom: calc(33 / 375 * 100vw);
  }
}

.mv02 {
  position: relative;
  z-index: 0;
  background: #00428e;
  padding: calc(230 / 1366 * 100vw) calc(155 / 1366 * 100vw) 0 calc(155 / 1366 * 100vw);
}
.mv02::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -2;
  background-color: #4279b9;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(1 / 1366 * 100vw); /* 1px 変換 */
  height: 100%;
}

.mv02 .dec_text {
  display: flex;
  align-items: center;
  font-family: "DM Sans", sans-serif;
  font-weight: bold;
  font-size: calc(59 / 1366 * 100vw);
  line-height: 1;
  margin-left: calc(-64 / 1366 * 100vw);
  color: #fff;
  transform:translateY(30px);
  opacity: 0;
  transition: .7s ease-out;
}
.mv02.go .dec_text {
  transform:translateY(0);
  opacity: 1;
}


.mv02 .dec_text .en {
  font-weight: 600;
  font-size: calc(14 / 1366 * 100vw);
  line-height: calc(21 / 14);
  text-align: right;
  padding-right: calc(10 / 1366 * 100vw);
  margin-right: calc(8 / 1366 * 100vw);
  border-right: calc(1 / 1366 * 100vw) solid #fff; /* 1px 変換 */
}
.mv02 .mv_ttl {
  position: relative;
  z-index: 0;
  font-weight: normal;
  display: flex;
  align-items: last baseline;
  gap: 0 calc(59 / 1366 * 100vw);
  color: #fff;
  margin: 0 0 calc(67 / 1366 * 100vw) calc(38 / 1366 * 100vw);
    transform:translateY(30px);
  opacity: 0;
  transition: .7s ease-out;
}
.mv02.go .mv_ttl {
  transform:translateY(0);
  opacity: 1;
}
.mv02 .mv_ttl .en.size_s {
  font-family: "DM Sans";
  font-weight: 900;
  font-size: calc(17 / 1366 * 100vw);
}
.mv02 .mv_ttl .en .jp01 {
  display: block;
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: calc(10 / 1366 * 100vw);
  letter-spacing: 0.05em;
  line-height: 2.2;
}

.mv02 .mv_ttl .en.size_l {
  font-weight: 900;
  font-size: calc(149 / 1366 * 100vw);
  letter-spacing: 0.03em;
}
.mv02 .mv_ttl .jp02 {
  position: absolute;
  top: calc(-65 / 1366 * 100vw);
  left: calc(129 / 1366 * 100vw);
  font-weight: bold;
  font-size: calc(20 / 1366 * 100vw);
  letter-spacing: 0.05em;
}
.mv02 .mv_img {
  position: relative;
  z-index: -1;
}
.mv02 .mv_img .mv_text01 {
  position: absolute;
  top: calc(-137 / 1366 * 100vw);
  right: calc(45 / 1366 * 100vw);
  font-weight: bold;
  font-size: calc(30 / 1366 * 100vw);
  letter-spacing: 0.7em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #fff;
    transform:translateY(30px);
  opacity: 0;
  transition: .7s ease-out;
}
.mv02.go .mv_img .mv_text01 {
  transform:translateY(0);
  opacity: 1;
}

.mv02 .breadcrumbs {
  width: fit-content;
  position: absolute;
  z-index: 1;
  top: calc(145 / 1366 * 100vw);
  right: calc(85 / 1366 * 100vw);
  font-weight: bold;
  font-size: calc(12 / 1366 * 100vw);
  line-height: calc(22 / 12);
  display: flex;
    transform:translateY(30px);
  opacity: 0;
  transition: .7s ease-out;
}
.mv02.go .breadcrumbs {
  transform:translateY(0);
  opacity: 1;
}
.mv02 .breadcrumbs li {
  color: #fff;
}
.mv02 .breadcrumbs li a {
  color: #5686be;
}
.mv02 .breadcrumbs li + li {
  display: flex;
  align-items: center;
}
.mv02 .breadcrumbs li + li::before {
  content: "";
  display: block;
  width: calc(15 / 1366 * 100vw);
  margin: 0 calc(6 / 1366 * 100vw);
  border-top: calc(1 / 1366 * 100vw) dotted #fff; /* 1px 変換 */
}

@media screen and (max-width: 768px) {
  .mv02 {
    position: relative;
    z-index: 0;
    padding: calc(159 / 375 * 100vw) calc(50 / 375 * 100vw) 0 calc(50 / 375 * 100vw); /* 159px, 50px 変換 */
  }
  .mv02 .mv_img {
    margin: 0 calc(50% - 50vw);
  }
  .mv02 .dec_text {
    font-size: calc(47 / 375 * 100vw); /* 47px 変換 */
    margin-bottom: calc(37 / 375 * 100vw); /* 37px 変換 */
  }
  .mv02 .dec_text .en {
    font-weight: 600;
    font-size: calc(10 / 375 * 100vw); /* 10px 変換 */
    line-height: 1.5;

    padding-right: calc(10 / 375 * 100vw); /* 10px 変換 */
    margin-right: calc(8 / 375 * 100vw); /* 8px 変換 */
  }
  .mv02 .mv_ttl {
    font-size: calc(20 / 375 * 100vw); /* 20px 変換 */
    line-height: calc(22 / 20);
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 calc(90 / 375 * 100vw) calc(-19 / 375 * 100vw);
  }
  .mv02 .mv_ttl .en.size_s {
    font-size: calc(17 / 375 * 100vw); /* 14px 変換 */
    line-height: calc(21 / 14);
    font-weight: 900;
  }
  .mv02 .mv_ttl .en .jp01 {
    display: inline-block;
    font-size: calc(10 / 375 * 100vw); /* 10px 変換 */
    letter-spacing: 0.05em;
    line-height: 2.2;
    margin-left: calc(5 / 375 * 100vw); /* 5px 変換 */
  }
  .mv02 .mv_ttl .en.size_l {
    font-weight: 900;
    font-size: calc(60 / 375 * 100vw); /* 60px 変換 */
    line-height: 1;
    margin: calc(6 / 375 * 100vw) 0 calc(18 / 375 * 100vw); /* 6px, 18px 変換 */
  }

  .mv02 .mv_ttl .jp02 {
    position: static;
    font-size: calc(18 / 375 * 100vw); /* 18px 変換 */
    line-height: calc(22 / 18);
  }

  .mv02 .mv_img .mv_text01 {
    top: calc(-96 / 375 * 100vw);
    right: calc(64 / 375 * 100vw);
    font-size: calc(19 / 375 * 100vw);
    letter-spacing: 0.7em;

    .adjust01 {
      display: block;
      margin-top: calc(42 / 375 * 100vw);
      line-height: 2.5;
    }
  }

  .mv02 .breadcrumbs {
    z-index: 1;
    top: calc(106 / 375 * 100vw);
    right: calc(31 / 375 * 100vw);
    font-size: calc(10 / 375 * 100vw);
    line-height: calc(22 / 12);
    display: flex;
  }
  .mv02 .breadcrumbs li + li::before {
    content: "";
    display: block;
    width: calc(15 / 375 * 100vw); /* 15px 変換 */
    margin: 0 calc(6 / 375 * 100vw); /* 6px 変換 */
  }
}
/*.block_message01 */
.block_message01 {
  position: relative;
  z-index: 0;
  padding: 0 0 calc(127 / 1366 * 100vw); /* 127px 変換 */
  background: #00428e;
}

.block_message01::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -2;
  background-color: #4279b9;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(1 / 1366 * 100vw); /* 1px 変換 */
  height: 100%;
}

.block_message01 .inner {
  margin: 0 auto;
  width: 87.55%;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.block_message01 .parson {
  width: calc(357 / 1366 * 100vw); /* 357px 変換 */
  margin-top: calc(-78 / 1366 * 100vw); /* -78px 変換 */
}

.block_message01 .parson .box_name {
  position: relative;
  padding-bottom: calc(20 / 1366 * 100vw); /* 20px 変換 */
  margin-bottom: calc(20 / 1366 * 100vw); /* 20px 変換 */
}

.block_message01 .parson .box_name::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  background-color: #fff;
  bottom: 0;
  left: 0;
  transform-origin: left center;
  width: 0;
  height: 1px;
  transition: 0.7s;
}
.block_message01 .parson .box_name.go::after {
  width: 100%;
}

.block_message01 .parson .box_name .en {
  font-weight: 900;
  font-size: calc(63 / 1366 * 100vw); /* 63px 変換 */
}
.block_message01 .parson .box_name .jp01 {
  display: block;
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: calc(12 / 1366 * 100vw); /* 12px 変換 */
  letter-spacing: 0.05em;
  margin-bottom: calc(26 / 1366 * 100vw); /* 26px 変換 */
}

.block_message01 .parson .box_name .jp02 {
  display: inline-block;
  font-family: "Noto Sans JP";
  font-weight: bold;
  font-size: calc(20 / 1366 * 100vw); /* 20px 変換 */
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-align: left;
  color: #fff;
  margin-left: calc(22 / 1366 * 100vw); /* 22px 変換 */
  transform: translateY(calc(-10 / 1366 * 100vw)); /* -10px 変換 */
}
.block_message01 .parson .box_prof {
  font-weight: normal;
  font-size: calc(12 / 1366 * 100vw); /* 12px 変換 */
  letter-spacing: 0.05em;
  line-height: 2;
}

.block_message01 .parson .box_prof strong {
  display: block;
  font-weight: 900;
  font-size: calc(20 / 1366 * 100vw); /* 20px 変換 */
  text-align: left;
  color: #fff;
  margin-bottom: calc(20 / 1366 * 100vw); /* 20px 変換 */
}

.block_message01 .box_message {
  margin-top: calc(189 / 1366 * 100vw); /* 189px 変換 */
  width: calc(530 / 1366 * 100vw); /* 530px 変換 */
}

@media screen and (max-width: 768px) {
  .block_message01 {
    padding: 0 0 calc(86 / 375 * 100vw); /* 86px 変換 */
  }

  .block_message01 .inner {
    margin: 0 auto;
    width: 83.73%;
    flex-flow: column;
    gap: calc(85 / 375 * 100vw) 0; /* 85px 変換 */
  }
  .block_message01 .parson {
    width: 100%;
    margin-top: calc(-61 / 375 * 100vw); /* -61px 変換 */
  }

  .block_message01 .parson .box_name {
    padding-bottom: calc(22 / 375 * 100vw); /* 22px 変換 */
    margin-bottom: calc(22 / 375 * 100vw); /* 22px 変換 */
  }
  .block_message01 .parson .box_name .en {
    font-size: calc(41 / 375 * 100vw); /* 41px 変換 */
  }
  .block_message01 .parson .box_name .jp01 {
    font-size: calc(12 / 375 * 100vw); /* 12px 変換 */
    margin-bottom: calc(15 / 375 * 100vw); /* 15px 変換 */
  }

  .block_message01 .parson .box_name .jp02 {
    font-size: calc(12 / 375 * 100vw); /* 12px 変換 */
    margin-left: calc(40 / 375 * 100vw); /* 40px 変換 */
    transform: translateY(calc(-10 / 375 * 100vw)); /* -10px 変換 */
  }
  .block_message01 .parson .box_prof {
    font-size: calc(12 / 375 * 100vw); /* 12px 変換 */
    display: flex;
    gap: 0 calc(31 / 375 * 100vw); /* 31px 変換 */
  }

  .block_message01 .parson .box_prof strong {
    font-size: calc(20 / 375 * 100vw); /* 20px 変換 */
    margin-bottom: calc(20 / 375 * 100vw); /* 20px 変換 */
  }
  .block_message01 .parson .box_prof strong + p {
    margin-top: 1em;
  }

  .block_message01 .box_message {
    /* margin: 0 0 0 auto;
  width: 77.39%;*/
    margin: 0;
    width: 100%;
  }
}

/*.block_message02 */
.block_message02 {
  position: relative;
  z-index: 0;
  padding: 0 0 calc(125 / 1366 * 100vw); /* 125px 変換 */
  background: #00428e;
}

.block_message02::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -2;
  background-color: #4279b9;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(1 / 1366 * 100vw); /* 1px 変換 */
  height: 100%;
}

.block_message02 .inner {
  margin: 0 calc(12.44% / 1366 * 100vw) 0 auto; /* 12.44% をvw化 */ /* 元のコードで margin-right が % だったので保留。ここでは 12.44% はそのままにし、px値がある場合のみ変換を適用 */
  margin: 0 12.44% 0 auto;
  width: 79.8%;
  display: flex;
  justify-content: space-between;
  color: #fff;
}

.block_message02 .box_message {
  width: 44.31%;
}

.block_message02 .box_img {
  width: 47.06%;
}

@media screen and (max-width: 768px) {
  .block_message02 {
    padding: 0 0 calc(86 / 375 * 100vw); /* 86px 変換 */
  }
  .block_message02 .inner {
    margin: 0 auto;
    width: 84%;
    flex-flow: column-reverse;
    align-items: flex-end;
    gap: calc(43 / 375 * 100vw) 0; /* 43px 変換 */
  }

  .block_message02 .box_message {
    width: 100%;
  }

  .block_message02 .box_img {
    /* width: 86.98%;
  margin-right: calc(50% - 50vw); */
    width: 100%;
  }
}

/*.block_message03 */
.block_message03 {
  position: relative;
  z-index: 0;
  background: #ebebeb;
}
.block_message03::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  background: #00428e;

  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1366 / 215;
}

.block_message03 .inner {
  margin: 0 6.22% 0 auto;
  width: 84.55%;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.block_message03 .box_img01 {
  width: 48.22%;
}
.block_message03 .box_img02 {
  width: 35.5%;
  margin-top: calc(140 / 1366 * 100vw); /* 140px 変換 */
}
@media screen and (max-width: 768px) {
  .block_message03 {
    padding-bottom: calc(40 / 375 * 100vw); /* 40px 変換 */
  }
  .block_message03::before {
    aspect-ratio: 375 / 85;
  }

  .block_message03 .inner {
    margin: 0;
    width: 100%;
    display: block;
  }
  .block_message03 .box_img01 {
    width: 77.87%;
  }
  .block_message03 .box_img02 {
    width: 61%;
    margin: calc(40 / 375 * 100vw) 0 0 auto; /* 40px 変換 */
  }
}

/*.block_message04 */
.block_message04 {
  position: relative;
  z-index: 0;
  margin-top: calc(-60 / 1366 * 100vw); /* -60px 変換 */
  background: linear-gradient(to bottom, #ebebeb 80.6%, transparent 80.6%);
}

.block_message04 h2,
.block_message04 .text00 {
  color: #000;
}

.block_message04 .inner {
  margin: 0 13.62% 0 auto;
  width: 76.77%;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.block_message04 .inner {
  margin: 0 13.62% 0 auto;
  width: 76.77%;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.block_message04 .box_text {
  margin: 0 0 0 calc(20.12% / 1366 * 100vw); /* 20.12%は元のコードで%指定だが、ここではpx基準で変換しなかった。20.12%はそのままにし、px値がある場合のみ変換を適用 */
  margin: 0 0 0 20.12%;
}
.block_message04 .box_text .img00 {
  display: none;
}
.block_message04 .box_img {
  margin: calc(93 / 1366 * 100vw) calc(30.48% / 1366 * 100vw) 0 0; /* 93px 変換。30.48%はそのままにし、px値がある場合のみ変換を適用 */
  margin: calc(93 / 1366 * 100vw) 30.48% 0 0;
}
@media screen and (max-width: 768px) {
  .block_message04 {
    position: relative;
    z-index: 0;
    margin-top: 0;
    background: linear-gradient(to bottom, #ebebeb 95.32%, transparent 95.32%);
  }

  .block_message04 .inner {
    margin: 0 auto;
    width: 84%;
    display: flex;
    justify-content: space-between;
    color: #fff;
  }
  .block_message04 .box_text {
    /* margin: 0 0 0 13.6%; */
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
  }
  .block_message04 .box_text .text00 {
    width: 100%;
  }
  .block_message04 .box_text .text00:nth-child(2) {
    width: 52.2%;
  }
  .block_message04 .box_text .img00 {
    display: block;
    width: 55.51%;
    margin-right: calc(-11 / 375 * 100vw);
    margin: calc(10 / 375 * 100vw) calc(-11 / 375 * 100vw) calc(10 / 375 * 100vw) 0; /* 10px, -11%, 10px 変換 */
  }

  .block_message04 .box_img {
    margin: calc(50 / 375 * 100vw) 0 0 0;
  }
}