@charset "UTF-8";
@import url(component.css?202603302);
/* -------------------------------------
カラー
------------------------------------- */
:root {
  --leading-trim: calc((1em - 1lh) / 2);
}

@supports not (top: 1lh) {
  :root {
    --leading-trim: 0px;
  }
}
:is(p, h1, h2, h3, h4, h5, h6, figcaption) {
  margin-block: var(--leading-trim);
}

/* ==============================
   remベース設計
   PCデザイン: 1440px基準
   SPデザイン: 375px基準
   基準: 1rem = 10px（設計幅時）
   ============================== */
/* SP: 375px基準で流動スケール */
html {
  font-size: 2.6666666667vw;
}

/* 769px〜1024px: 固定
   1024pxをPC最小想定幅とし、その時点の比率で固定 */
@media screen and (min-width: 769px) {
  html {
    font-size: 7.5px;
  }
}
/* 1024px〜1440px: 1440px基準で流動スケール */
@media screen and (min-width: 1024px) {
  html {
    font-size: 0.6944444444vw;
  }
}
/* 1440px〜: デザイン基準幅で固定 */
@media screen and (min-width: 1440px) {
  html {
    font-size: 10px;
  }
}
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #1B293A;
  background-color: #F5F5F5;
  font-weight: 400;
  font-size: 1.6rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 1.4rem;
  }
}

.font-en {
  font-family: "Roboto Condensed", sans-serif;
}

.font-en2 {
  font-family: "Inter", sans-serif;
}

.font-body {
  font-family: "Noto Sans JP", sans-serif;
}

.color-orange {
  color: #DB7814;
}

/* -------------------------------------
// 共通レイアウト
------------------------------------- */
.l-mainInner {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .l-mainInner {
    width: calc(100% - 4rem);
  }
}

.l-ttl_inner {
  width: min(100%, 107.2rem);
  margin-inline: auto;
}
@media screen and (max-width: 1024px) {
  .l-ttl_inner {
    width: min(100% - 4rem, 107.2rem);
  }
}
@media screen and (max-width: 768px) {
  .l-ttl_inner {
    width: 100%;
  }
}

.l-single_inner {
  width: min(100% - 4rem, 107.2rem);
  margin-inline: auto;
  padding-block: 23.5rem 20.5rem;
}
@media screen and (max-width: 768px) {
  .l-single_inner {
    width: calc(100% - 4rem);
    padding-block: 13rem 10rem;
  }
}

.l-bg_blue {
  width: 100%;
  height: 100%;
  padding-block: 18.3rem;
  background: linear-gradient(66deg, rgb(49, 67, 130) 0%, rgb(69, 103, 158) 50%, rgb(101, 154, 203) 100%);
  -webkit-mask-image: url(../img/common/bg_blue_mask.svg);
          mask-image: url(../img/common/bg_blue_mask.svg);
  -webkit-mask-size: 100% calc(100% - 6rem);
          mask-size: 100% calc(100% - 6rem);
  -webkit-mask-position: 100% 3rem;
          mask-position: 100% 3rem;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .l-bg_blue {
    padding-block: 8rem;
    -webkit-mask-image: url(../img/common/bg_blue_mask_sp.svg);
            mask-image: url(../img/common/bg_blue_mask_sp.svg);
    -webkit-mask-size: 100% calc(100% - 3rem);
            mask-size: 100% calc(100% - 3rem);
    -webkit-mask-position: 100% 2rem;
            mask-position: 100% 2rem;
  }
}

.l-bg_wave {
  position: relative;
}
.l-bg_wave::before, .l-bg_wave::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 18.3rem;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .l-bg_wave::before, .l-bg_wave::after {
    height: 8rem;
  }
}
.l-bg_wave::before {
  top: 0;
  left: 0;
  background-image: url(../img/common/bg_wave_top.svg);
}
.l-bg_wave::after {
  bottom: 0;
  left: 0;
  background-image: url(../img/common/bg_wave_bottom.svg);
}

/* -------------------------------------
// デバイス別 表示/非表示
------------------------------------- */
.pc-only {
  display: block;
}
@media screen and (max-width: 1024px) {
  .pc-only {
    display: none;
  }
}

.sp-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp-only {
    display: block;
  }
}

.pc-none {
  display: none;
}
@media screen and (max-width: 768px) {
  .pc-none {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .sp-none {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .tb-none {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .tb-none {
    display: block;
  }
}

.all-none {
  display: none !important;
}

.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* -------------------------------------
アイコン
------------------------------------- */
.icon-arrow {
  width: 1.6rem;
  height: 1.6rem;
  background-image: url(../img/common/icon-arrow.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.icon-arrow.--white {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

/* -------------------------------------
ヘッダー
------------------------------------- */
.l-overlay {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
.l-overlay.active {
  opacity: 1;
  pointer-events: auto;
  transition: 0.3s;
}

.l-head {
  width: min(136rem, 100% - 20px);
  height: 8rem;
  margin: 0 auto;
  position: fixed;
  top: 2.8rem;
  left: 50%;
  translate: -50% 0;
  z-index: 300;
  background-color: #fff;
  border-radius: 0.8rem;
  box-shadow: 0 4px 15px 0 rgba(27, 41, 58, 0.06);
}
@media screen and (max-width: 768px) {
  .l-head {
    height: 6.4rem;
    top: 2rem;
    border-radius: 0.6rem;
  }
}

.is-sp_open .l-head {
  box-shadow: none;
}

.l-head_block {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  height: 100%;
  padding-inline: 2.5rem;
}
@media screen and (max-width: 1024px) {
  .l-head_block {
    gap: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  .l-head_block {
    padding-inline: 1.6rem 2rem;
  }
}

.l-head_logo {
  display: block;
}
@media screen and (max-width: 768px) {
  .l-head_logo {
    width: 9.8rem;
    height: 3.6rem;
  }
}

.l-head_title {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}
@media screen and (max-width: 1024px) {
  .l-head_title {
    gap: 1rem;
  }
}

.l-head_alt {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .l-head_alt {
    font-size: 1.4rem;
  }
}

.l-head_nav {
  display: flex;
  justify-content: space-between;
  max-width: 83.4rem;
  width: 100%;
  gap: 1rem;
}
@media screen and (max-width: 768px) {
  .l-head_nav {
    width: auto;
  }
}

.l-gnav_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
}
@media screen and (max-width: 1024px) {
  .l-gnav_list {
    gap: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .l-gnav_list {
    display: none;
  }
}
.l-gnav_list > li > a {
  display: block;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.l-head_action {
  display: flex;
  align-items: center;
  gap: 2rem;
}
@media screen and (max-width: 768px) {
  .l-head_action {
    display: none;
  }
}

.l-head_icon {
  display: flex;
  align-items: center;
}
.l-head_icon svg {
  width: 2.5rem;
  height: 2.5rem;
  transition: 0.3s;
  color: #1B293A;
}
.l-head_icon > a {
  padding-block: 0.5rem;
}
@media (hover: hover) {
  .l-head_icon > a:hover svg {
    color: #DB7814;
  }
}

.l-gnav_contact {
  width: 20.8rem;
  height: 5rem;
}
.l-gnav_contact > a {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  border-radius: 9999px;
  background-color: #DB7814;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  border: 1px solid #DB7814;
  transition: 0.2s;
}
@media (hover: hover) {
  .l-gnav_contact > a:hover {
    background-color: #fff;
    color: #DB7814;
  }
}

/* -------------------------------------
ハンバーガーメニュー
------------------------------------- */
/* ボタン　 */
.l-menu_btn {
  width: 3.6rem;
  height: 3.6rem;
  display: none;
  align-self: center;
  place-content: center;
  cursor: pointer;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .l-menu_btn {
    display: grid;
  }
}
.l-menu_btn .l-menu_lineBox {
  width: 3.2rem;
  height: 1.8rem;
  position: relative;
}
.l-menu_btn span {
  height: 2px;
  width: 100%;
  display: inline-block;
  position: absolute;
  background-color: #184675;
  transition: 0.3s;
}
.l-menu_btn span:first-of-type {
  top: 0;
  left: 50%;
  translate: -50% 0;
}
.l-menu_btn span:nth-of-type(2) {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.l-menu_btn span:last-of-type {
  bottom: 0;
  left: 50%;
  translate: -50% 0;
}
.l-menu_btn.active span {
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .l-menu_btn.active span {
    background-color: #1B293A;
  }
}
.l-menu_btn.active span:first-of-type {
  width: 100%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: 45deg;
}
.l-menu_btn.active span:nth-of-type(2) {
  width: 0;
}
.l-menu_btn.active span:last-of-type {
  width: 100%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: -45deg;
}

/* メニュー背景 */
.l-open_sp {
  width: calc(100% - 20px);
  height: 50.2rem;
  border-radius: 0.6rem;
  position: fixed;
  top: 2rem;
  left: 50%;
  translate: -50% 0;
  z-index: 299;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  box-shadow: 0 4px 15px 0 rgba(27, 41, 58, 0.06);
}
.l-open_sp.open {
  opacity: 1;
  pointer-events: auto;
}

/* -------------
SPメニュー
------------- */
.l-sp_menu {
  padding-top: 10.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.l-sp_menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
}
.l-sp_menu-list > li a {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  margin-block: var(--leading-trim);
}

.l-sp_icon-block {
  display: flex;
  gap: 2rem;
}

.l-sp_icon svg {
  width: 3.2rem;
  height: 3.2rem;
  transition: 0.3s;
  color: #184675;
}

.l-sp_contact {
  width: 26.4rem;
  height: 6rem;
}
.l-sp_contact > a {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  border-radius: 9999px;
  border: 1px solid #DB7814;
  background-color: #DB7814;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  transition: 0.2s;
}

/* -------------------------------------
SP固定ボタン
------------------------------------- */
.l-sp_fixed {
  display: none;
  width: 100%;
  height: 6rem;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 98;
}
@media screen and (max-width: 768px) {
  .l-sp_fixed {
    display: block;
  }
}
.l-sp_fixed > a {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  background-color: #DB7814;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  position: relative;
}
.l-sp_fixed > a::before {
  content: "";
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background-image: url(../img/common/icon-arrow.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  right: 2rem;
  translate: 0 -50%;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

/* -------------------------------------
フッター
------------------------------------- */
#pageFooter {
  overflow-x: clip;
  position: relative;
}

.l-foot {
  padding-top: 44.6rem;
}
@media screen and (max-width: 768px) {
  .l-foot {
    padding-top: 47.6rem;
  }
}

.l-foot_catch-block {
  width: 72rem;
  translate: -2.9rem;
  position: absolute;
  top: 24rem;
  right: 0;
}
@media screen and (max-width: 1024px) {
  .l-foot_catch-block {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media screen and (max-width: 768px) {
  .l-foot_catch-block {
    width: calc(100% - 4rem);
    translate: 0;
    top: 21.2rem;
    right: auto;
    left: 2rem;
  }
}

@media screen and (max-width: 768px) {
  .l-foot_catch-img {
    width: 31.9rem;
  }
}

.l-foot_catch-cnt {
  margin-top: 2.7rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  translate: -0.2rem;
}
@media screen and (max-width: 768px) {
  .l-foot_catch-cnt {
    flex-direction: column;
    margin-top: 4.2rem;
    translate: -1.2rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
  }
}

.l-foot_catch-txt {
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: #184675;
}

.l-foot_img {
  position: absolute;
  z-index: 3;
}
.l-foot_img.--1 {
  width: 66.8rem;
  height: 66.8rem;
  left: calc(50% - 53.5rem);
  translate: -50% 0;
  bottom: 3.3rem;
}
@media screen and (max-width: 1024px) {
  .l-foot_img.--1 {
    width: 46.8rem;
    height: 46.8rem;
    left: calc(50% - 40.5rem);
    bottom: 18.3rem;
  }
}
@media screen and (max-width: 768px) {
  .l-foot_img.--1 {
    width: 29.5rem;
    height: 29.5rem;
    left: calc(50% - 15rem);
    bottom: 50.7rem;
  }
}
.l-foot_img.--2 {
  width: 31.5rem;
  height: 31.5rem;
  right: calc(50% - 76.4rem);
  top: -3.9rem;
}
@media screen and (max-width: 1024px) {
  .l-foot_img.--2 {
    right: calc(50% - 54.4rem);
  }
}
@media screen and (max-width: 768px) {
  .l-foot_img.--2 {
    width: 17rem;
    height: 17rem;
    right: calc(50% - 21.7rem);
    top: 7.5rem;
  }
}

.l-foot_main {
  position: relative;
}
@media screen and (max-width: 768px) {
  .l-foot_main {
    padding-bottom: 4rem;
  }
}
.l-foot_main::before {
  content: "";
  width: 100%;
  height: 21.6rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-image: url(../img/common/footer_wave.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .l-foot_main::before {
    height: 8rem;
    top: 1rem;
  }
}

.l-foot_cnt {
  width: 100%;
  height: 43.4rem;
  padding-top: 22.8rem;
  background: linear-gradient(66deg, rgb(49, 67, 130) 0%, rgb(69, 103, 158) 50%, rgb(101, 154, 203) 100%);
  -webkit-mask-image: url(../img/common/footer_mask.svg);
          mask-image: url(../img/common/footer_mask.svg);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: 100% 3rem;
          mask-position: 100% 3rem;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  color: #fff;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .l-foot_cnt {
    height: auto;
    padding-top: 11.4rem;
    -webkit-mask-image: url(../img/common/footer_mask_sp.svg);
            mask-image: url(../img/common/footer_mask_sp.svg);
    justify-content: center;
    padding-bottom: 5rem;
  }
}

.l-foot_inner {
  display: flex;
  width: 73.7rem;
  justify-content: space-between;
  margin-right: 10.2rem;
}
@media screen and (max-width: 768px) {
  .l-foot_inner {
    width: calc(100% - 4rem);
    justify-content: space-between;
    flex-direction: column;
    margin-right: 0;
  }
}

@media screen and (max-width: 768px) {
  .l-foot_site {
    align-self: flex-end;
    margin-right: 1.9rem;
  }
}

.l-foot_site-info {
  display: flex;
}

.l-foot_site-ttl {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.l-foot_insta {
  position: relative;
  display: block;
  margin-top: 0.2rem;
  margin-left: 1.5rem;
}
@media screen and (max-width: 768px) {
  .l-foot_insta {
    margin-left: 1.2rem;
  }
}
.l-foot_insta::before {
  content: "";
  display: block;
  width: 2px;
  height: 1lh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #A6BED9;
}
@media screen and (max-width: 768px) {
  .l-foot_insta::before {
    top: 0.2rem;
  }
}
.l-foot_insta img {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-left: 1.5rem;
}

.l-foot_address {
  margin-top: 2.5rem;
}
@media screen and (max-width: 768px) {
  .l-foot_address {
    margin-top: 0.8rem;
  }
}
.l-foot_address .--text {
  display: block;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
  .l-foot_address .--text {
    font-size: 1.2rem;
  }
}
.l-foot_address .--text:nth-child(2) {
  letter-spacing: 0.06em;
}
.l-foot_address .--text + .--text {
  margin-top: calc((1em - 1lh) / 2 + 1.2rem);
}
@supports not (top: 1lh) {
  .l-foot_address .--text + .--text {
    margin-top: 1.2rem;
  }
}

.l-foot_nav-list {
  width: 39.3rem;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  justify-content: space-between;
  row-gap: 1.9rem;
  padding-top: 5rem;
  padding-right: 2.5rem;
}
@media screen and (max-width: 768px) {
  .l-foot_nav-list {
    width: 100%;
    padding-top: 6.4rem;
    padding-bottom: 7.5rem;
    padding-right: 0;
    grid-template-columns: auto;
    grid-template-rows: auto;
    justify-content: center;
    grid-auto-flow: row;
    row-gap: 3.1rem;
    text-align: center;
  }
}

.l-foot_nav-item {
  font-weight: 700;
  line-height: 1;
  border-bottom: 1px solid transparent;
  transition: 0.2s;
}
@media screen and (max-width: 768px) {
  .l-foot_nav-item {
    font-size: 1.8rem;
  }
}
@media (hover: hover) {
  .l-foot_nav-item:hover {
    border-bottom: 1px solid #fff;
  }
}

.l-foot_back {
  width: 4.52rem;
  height: 4.52rem;
  position: absolute;
  top: 12.2rem;
  right: 9.2rem;
  z-index: 3;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .l-foot_back {
    width: 4.02rem;
    height: 4.02rem;
    top: 17.4rem;
    right: auto;
    left: 5.4rem;
  }
}

.l-foot_back-link {
  display: block;
  width: inherit;
  height: inherit;
  border-radius: 0.4rem;
  background-color: #273F75;
  rotate: 45deg;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.l-foot_back-link::after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  rotate: -45deg;
  background-color: #fff;
  clip-path: path("M6 -2.62268e-07L0 6L12 6L6 -2.62268e-07Z");
  transition: 0.3s;
}
@media (hover: hover) {
  .l-foot_back-link:hover::after {
    top: 0.5rem;
    left: 0.5rem;
  }
}

.l-foot_back-text {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.5;
  position: absolute;
  top: calc(50% + 0rem);
  left: 60%;
  translate: -50% -30%;
  rotate: -45deg;
  color: #fff;
}

.l-foot_copyright {
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.03em;
  text-align: center;
  font-size: 1.2rem;
  position: absolute;
  top: 33.4rem;
  left: calc(50% - 62rem);
  translate: -50%;
  rotate: 45deg;
  color: #A6BED9;
}
@media screen and (max-width: 768px) {
  .l-foot_copyright {
    font-size: 1rem;
    position: static;
    rotate: 0deg;
    translate: 0;
  }
}

/* -------------------------------------
コンタクトエリア
------------------------------------- */
.l-contact {
  position: relative;
  overflow-x: clip;
}

@media screen and (max-width: 768px) {
  .l-contact_cnt {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}

.l-contact_imgArea {
  display: flex;
  flex-direction: column;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-top: 6rem;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .l-contact_imgArea {
    position: absolute;
    top: 34rem;
    z-index: 1;
    left: 50%;
    translate: -50%;
  }
}

.l-contact_bubble {
  width: 35.6rem;
  height: 26.5rem;
  border-radius: 1.5rem;
  background-color: #184675;
  color: #fff;
  display: grid;
  place-content: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .l-contact_bubble {
    width: 29rem;
    height: 19.5rem;
    border-radius: 1.2rem;
  }
}
.l-contact_bubble::before {
  content: "";
  width: 2.38rem;
  height: 2rem;
  clip-path: path("M6.48499e-05 20.25L0.000127655 -3.95153e-06L23.3828 -1.90735e-06L6.48499e-05 20.25Z");
  background-color: #184675;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 100%;
}

.l-contact_bubble_catch {
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  translate: 0.5rem;
}
@media screen and (max-width: 768px) {
  .l-contact_bubble_catch {
    font-size: 1.5rem;
    translate: 0 -0.4rem;
  }
}
.l-contact_bubble_catch::before, .l-contact_bubble_catch::after {
  content: "";
  display: block;
  width: 1.6rem;
  height: 1px;
  background-color: #fff;
}
.l-contact_bubble_catch::before {
  rotate: 45deg;
}
.l-contact_bubble_catch::after {
  rotate: -45deg;
}

.l-contact_bubble_text {
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin-top: calc((1em - 1lh) / 2 + 3rem);
}
@supports not (top: 1lh) {
  .l-contact_bubble_text {
    margin-top: 3rem;
  }
}
.l-contact_bubble_text {
  translate: 0.7rem;
}
@media screen and (max-width: 768px) {
  .l-contact_bubble_text {
    font-size: 2.5rem;
    margin-top: calc((1em - 1lh) / 2 + 1.2rem);
  }
  @supports not (top: 1lh) {
    .l-contact_bubble_text {
      margin-top: 1.2rem;
    }
  }
}

.l-contact_img {
  width: 29rem;
  height: 29rem;
  margin-top: 6.3rem;
  margin-left: 5rem;
}
@media screen and (max-width: 768px) {
  .l-contact_img {
    width: 19rem;
    height: 19rem;
    margin-top: 3.3rem;
  }
}
.l-contact_img img {
  display: block;
}

.l-contact_backText {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  margin-top: 3.3rem;
}
@media screen and (max-width: 768px) {
  .l-contact_backText {
    margin-top: 2.3rem;
  }
}
.l-contact_backText .c-backText_list {
  font-weight: 500;
  font-size: 13rem;
  color: #184675;
  opacity: 0.06;
  line-height: normal;
}
@media screen and (max-width: 768px) {
  .l-contact_backText .c-backText_list {
    font-size: 8rem;
  }
}
.l-contact_backText .c-backText_list > span {
  padding-inline: 1.6rem;
}
@media screen and (max-width: 768px) {
  .l-contact_backText .c-backText_list > span {
    padding-inline: 1.2rem;
  }
}

.l-contact_info {
  width: 75rem;
  height: 68rem;
  border-radius: 1rem 0 0 1rem;
  background-color: #E7ECF2;
  position: absolute;
  top: 0;
  right: 0;
  padding: 19rem 11rem;
}
@media screen and (max-width: 768px) {
  .l-contact_info {
    width: 36.5rem;
    height: 81rem;
    border-radius: 1rem 0 0 1rem;
    padding: 12.5rem 2.8rem;
    position: static;
  }
}

.l-contact_block + .l-contact_block {
  margin-top: 6.2rem;
}
@media screen and (max-width: 768px) {
  .l-contact_block + .l-contact_block {
    margin-top: 3.7rem;
  }
}

.l-contact_block-ttl {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  padding-left: 2.4rem;
  background-size: 2rem;
  background-position: left center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .l-contact_block-ttl {
    margin-inline: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    translate: -0.6rem;
  }
}
.l-contact_block-ttl.--tel {
  background-image: url(../img/common/icon-tel.svg);
}
.l-contact_block-ttl.--mail {
  background-image: url(../img/common/icon-mail.svg);
}

.l-contact_block-link {
  margin-top: 1rem;
  height: 0.9lh;
  font-weight: 700;
  font-size: 5.6rem;
  color: #DB7814;
  line-height: normal;
  border-bottom: 2px solid #DB7814;
}
@media screen and (max-width: 768px) {
  .l-contact_block-link {
    height: 0.85lh;
    font-size: 4.8rem;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    translate: -0.5rem;
  }
}
.l-contact_block-text {
  margin-top: calc((1em - 1lh) / 2 + 1rem);
}
@supports not (top: 1lh) {
  .l-contact_block-text {
    margin-top: 1rem;
  }
}
.l-contact_block-text {
  letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
  .l-contact_block-text {
    margin-top: calc((1em - 1lh) / 2 + 0.8rem);
  }
  @supports not (top: 1lh) {
    .l-contact_block-text {
      margin-top: 0.8rem;
    }
  }
  .l-contact_block-text {
    text-align: center;
  }
}

/* -------------------------------------
2カラム用レイアウト
------------------------------------- */
.l-col2 {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .l-col2 {
    flex-direction: column;
  }
}
.l-col2.--sticky {
  position: relative;
}
.l-col2.--sticky .l-content_side {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: sticky;
}
@media screen and (max-width: 1024px) {
  .l-col2.--sticky .l-content_side {
    position: static;
  }
}

/* -------------------------------------
下層ページMV
------------------------------------- */
.l-page_mv {
  position: relative;
  margin-bottom: 3rem;
}
@media screen and (max-width: 768px) {
  .l-page_mv {
    margin-bottom: 1rem;
  }
}
.l-page_mv::before {
  content: "";
  position: absolute;
  bottom: -3rem;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 21.6rem;
  background-image: url(../img/common/page_wave.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .l-page_mv::before {
    height: 8.3rem;
    bottom: -0.5rem;
  }
}

.l-page_bg {
  height: 49.6rem;
  -webkit-mask-image: url(../img/common/page_mv_mask.svg);
          mask-image: url(../img/common/page_mv_mask.svg);
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background: linear-gradient(66deg, rgb(49, 67, 130) 0%, rgb(69, 103, 158) 50%, rgb(101, 154, 203) 100%);
}
@media screen and (max-width: 768px) {
  .l-page_bg {
    -webkit-mask-image: url(../img/common/page_mv_mask_sp.svg);
            mask-image: url(../img/common/page_mv_mask_sp.svg);
    height: 37rem;
  }
}

.l-page_ttl {
  position: absolute;
  top: 21.8rem;
  left: 10rem;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .l-page_ttl {
    top: 15.8rem;
    left: 2rem;
  }
}
.l-page_ttl .--sub {
  font-weight: 600;
  font-size: 8rem;
}
@media screen and (max-width: 768px) {
  .l-page_ttl .--sub {
    font-size: 5.4rem;
  }
}
.l-page_ttl .--main {
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.03em;
  margin-top: calc((1em - 1lh) / 2 + 0.8rem);
}
@supports not (top: 1lh) {
  .l-page_ttl .--main {
    margin-top: 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  .l-page_ttl .--main {
    font-size: 1.6rem;
  }
}

/* -------------------------------------
animation
------------------------------------- */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}