/* index.php reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  text-align: center;
  color: var(--sub-color);
}

/* Loading画像中央配置　*/
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  color: var(--sub-color);
  width: 100%;
  font-family: "Zen Antique Soft", serif;
}
#splash_text > a {
  display: block;
  max-width: 360px;
  width: 30%;
  position: absolute;
  top: -20svh;
  left: calc(50% - 180px);
}

@media screen and (max-width: 1081px) {
  #splash_text > a {
    width: 50%;
    left: 25%;
  }
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg {
  height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
  width: 100%;
  height: 50%;
  transition: all 0.2s cubic-bezier(0.04, 0.435, 0.315, 0.9);
  transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
  background: linear-gradient(180deg, #08121c 0, #003365 65%);
  transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
  background: linear-gradient(0deg, #08121c 0, #003365 75%);
  position: absolute;
  bottom: 0;
  transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
  transform: scaleY(0);
}

/* ====== main visual ====== */
/* main visual */
#index .mv {
  width: 100%;
  height: min(calc(100svh - 90px), 900px);
  padding-top: 6%;
  background-image: linear-gradient(320deg, #0058b6 65%, #003365 65%);
  position: relative;
  z-index: 1;
  /*! overflow: hidden; */
}
#index .mv .mv_Limg {
  width: min(calc(100vw / 2.5), 640px);
  height: auto;
  z-index: 5;
  box-shadow: -5px 0 20px #02163bbb;
  line-height: 0;
}
#index .mv .mv_Rimg {
  width: min(calc(100vw / 2.5), 520px);
  height: auto;
  z-index: 5;
  box-shadow: -5px 0 20px #02163bbb;
  line-height: 0;
}
#index .mv .mv_Limg img,
#index .mv .mv_Rimg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#index .mv .mv_Limg {
  position: absolute;
  top: 0;
  left: 0;
}
#index .mv .mv_Rimg {
  position: absolute;
  bottom: 0;
  right: 0;
}
#index .mv .mv_copy {
  display: flex;
  flex-direction: column;
  justify-content: start;
  font-family: "Zen Old Mincho";
  font-weight: bold;
  font-size: 2.4em;
  line-height: 1.4;
  color: var(--main-color);
  position: absolute;
  left: 0;
  bottom: 20%;
  z-index: 10;
}
#index .mv .mv_copy div {
  margin: 0 0 10px 0;
}
#index .mv .mv_copy div:last-child {
  margin-bottom: 0;
}
#index .mv .mv_copy span {
  display: inline-block;
  width: fit-content;
  padding: 10px 20px;
  background: #ffffff;
  line-height: 1;
  border-bottom: 6px solid var(--main-color);
}
#index .mv .mv_copy span em {
  color: var(--main-color);
}

/* slider */
#index .mv .mv_box {
  position: relative;
  z-index: 1;
  width: 75%;
  height: 100%;
  margin: 0 0 0 auto;
  overflow: visible;
  box-shadow: -5px 0 20px #02163bbb;
}
#index .mv .mv_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  background-size: cover;
  background-position: center;
}
#index .mv .mv_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

#index .mv .mv_box li {
  overflow: hidden;
  opacity: 0;
  transition: all 0.8s ease 0s;
}
#index .mv .mv_box li.mv-fadein {
  overflow: visible;
  opacity: 1;
  transition: all 0.8s ease 0s;
}

/* pager（矢印） */
.mv-pager {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}
.mv-pager button {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}
/* タブレット用のスタイル */
/* タブレット用のスタイル */
@media screen and (max-width: 1081px) {
  #index .mv {
    width: 100%;
    height: clamp(500px, calc(100svh - 100px), 860px);
    /* height: calc((var(--vh) * 76) - 100px);
    min-height: auto; */
    position: relative;
    z-index: 1;
  }
  #index .mv .mv_box {
    width: 85%;
    height: 80%;
    margin: 20% 0 0 auto;
  }
  #index .mv .mv_copy {
    width: 70%;
    max-width: none;
    position: absolute;
    left: 0;
    bottom: 6%;
  }
  #index .mv .mv_Limg,
  #index .mv .mv_Rimg {
    width: min(60vw, 700px);
    z-index: 5;
  }
}

/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .mv {
    width: 100%;
    /*  height: calc(var(--vh) * 70); */
    height: clamp(460px, calc(90svh - 100px), 680px);
    position: relative;
    z-index: 1;
  }
  #index .mv .mv_box {
    width: 85%;
    height: 60%;
    margin: 25% 0 0 auto;
  }
  #index .mv .mv_copy {
    width: 100%;
    padding-right: 5%;
    font-size: 1.8em;
    right: 0;
    bottom: 10%;
  }
  #index .mv .mv_Limg {
    width: min(64vw, 700px);
    z-index: 5;
  }
}
@media screen and (max-width: 431px) {
  #index .mv {
    height: clamp(460px, calc(86svh - 80px), 580px);
  }
  #index .mv .mv_copy {
    bottom: 0;
  }
}

/* --- introducs --- */
#index .introduction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: -1;
  background-image: linear-gradient(60deg, #1b79c5 0%, #0058b6 20%, #0058b6 60%, #003365 60%);
}
#index .introduction .introduction_img01,
#index .introduction .introduction_img02 {
  width: 25%;
  height: 32svh;
  line-height: 0;
  box-shadow: 0 0 15px #02163b88;
}
#index .introduction .introduction_img01 {
  margin-bottom: 14svh;
}
#index .introduction .introduction_img02 {
  margin-top: 14svh;
}
#index .introduction .introduction_img01 img,
#index .introduction .introduction_img02 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#index .intro_box {
  width: 50%;
  height: clamp(380px, 68svh, 640px);
  display: flex;
  align-items: center;
  padding: 60px 0;
  position: relative;
  z-index: 5;
}
#index .intro_box .intro_txt {
  width: 100%;
  padding-left: 3%;
  font-family: "Zen Antique Soft", serif;
  font-size: clamp(34px, calc(50vw / 18), 42px);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.6;
}
#index .intro_box .intro_txt small {
  font-size: 75%;
  color: var(--point2-color);
}
@media screen and (min-width: 1500px) {
  #index .intro_box .intro_txt {
    padding-left: 10%;
  }
}

/* タブレット用のスタイル */
@media screen and (max-width: 1081px) {
}
@media screen and (max-width: 821px) {
  #index .intro_box {
    height: auto;
    padding: 8svh 0 4svh;
    width: 100%;
  }
  #index .introduction .introduction_img01,
  #index .introduction .introduction_img02 {
    width: 50%;
    height: 24svh;
  }
  #index .introduction .introduction_img01 {
    margin-bottom: 8svh;
  }
  #index .introduction .introduction_img02 {
    margin-top: 8vh;
  }
  #index .intro_box .intro_txt {
    text-align: center;
  }
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .intro_box {
    padding: 4svh 0 4svh;
  }
  #index .intro_box .intro_txt {
    width: 100%;
    line-height: 1.8;
    font-size: clamp(18px, calc(100vw / 16), 24px);
  }
}
@media screen and (max-width: 431px) {
  #index .introduction {
    background-image: linear-gradient(60deg, #0058b6 0%, #1b79c5 20%, #1b79c5 76%, #54b5d2 76%);
  }
  #index .introduction .introduction_img01,
  #index .introduction .introduction_img02 {
    height: 18svh;
  }
}

/* --- service --- */
#index .service {
  height: clamp(380px, 62svh, 600px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(120deg, #1b79c5 0%, #0058b6 30%, #1b79c5 42%, #0058b6 75%, #003365 75%);
}
#index .service .service_img {
  width: 55%;
  height: 100%;
  line-height: 0;
}
#index .service .service_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}
#index .service .service_txt {
  width: 45%;
  color: #ffffff;
}
#index .service .service_txt h3 {
  font-size: 2em;
  font-family: "Zen Antique Soft", serif;
  color: var(--point2-color);
  line-height: 1.4;
  margin-bottom: 20px;
}
#index .service .service_txt h3 small {
  width: fit-content;
  display: block;
  margin-bottom: 5px;
  font-size: 60%;
  color: #93d3f4;
}
#index .service .service_txt p em {
  font-size: 1.1em;
  color: var(--point2-color);
}
@media screen and (min-width: 1500px) {
  #index .service .service_txt p {
    margin-bottom: 20px;
    font-size: 1.2em;
  }
}
/* タブレット用のスタイル */
@media screen and (max-width: 1081px) {
  #index .service {
    height: clamp(360px, 32svh, 420px);
  }
  #index .service .service_img {
    width: 50%;
  }
  #index .service .service_txt {
    width: 50%;
  }
  #index .service .service_txt h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 821px) {
  /* s */
  #index .service .service_txt {
    padding: 0 2% 0 0;
  }
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .service {
    flex-wrap: wrap;
    height: auto;
    max-height: none;
    background-image: linear-gradient(120deg, #0058b6 30%, #1b79c5 30%, #0058b6 100%, #003365 100%);
  }
  #index .service .service_img {
    width: 100%;
    height: auto;
    order: 2;
    background: var(--sub-color);
  }
  #index .service .service_txt {
    width: 100%;
    margin: 6svh 0 3svh;
    padding: 0 5vw;
    text-align: center;
  }
  #index .service .service_txt h3 small {
    margin: 0 auto 5px;
  }
}

/* --- area --- */
#index .area {
  height: clamp(450px, 62svh, 600px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #003365 url(../images/common/triangle_bg.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
}
#index .area .area_txt {
  width: 70%;
  padding: 0 3% 0 13%;
}
#index .area .area_txt p {
  color: #ffffff;
}
#index .area .area_txt p em {
  font-size: 1.1em;
  color: var(--point2-color);
}
#index .area .area_txt h3 {
  font-size: 2em;
  font-family: "Zen Antique Soft", serif;
  color: var(--point2-color);
  line-height: 1.4;
  margin-bottom: 20px;
}
#index .area .area_txt h3 small {
  width: fit-content;
  display: block;
  margin-bottom: 5px;
  font-size: 60%;
  color: #93d3f4;
}
#index .area .area_img {
  width: 60%;
  height: 100%;
  align-self: flex-start;
  line-height: 0;
}
#index .area .area_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
@media screen and (min-width: 1500px) {
  #index .area .area_txt p {
    margin-bottom: 20px;
    font-size: 1.2em;
  }
}
/* タブレット用のスタイル */
@media screen and (max-width: 1081px) {
  #index .area {
    height: clamp(360px, 32svh, 420px);
  }
  #index .area .area_txt {
    width: 60%;
    margin: 0 0 0 5%;
    padding: 3% 0;
  }
  #index .area .area_txt p {
    font-size: 100%;
  }
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .area {
    flex-wrap: wrap;
    height: auto;
    max-height: none;
  }
  #index .area .area_txt {
    width: 100%;
    margin: 0 5% 15%;
    font-size: 1.1em;
    order: 2;
  }
  #index .area .area_txt h3,
  #index .area .area_txt p {
    text-align: center;
  }
  #index .area .area_txt h3 small {
    margin: auto;
  }
  #index .area .area_img {
    width: 80%;
    height: min(36svh, 420px);
    margin: 0 0 0 auto;
    order: 1;
  }
  #index .area .area_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
  }
}

/* --- about --- */
#index .about {
  display: flex;
  width: 100%;
  height: clamp(380px, 62svh, 600px);
  justify-content: space-between;
  align-items: flex-start;
  background-image: linear-gradient(120deg, #dbfff7 0%, #93d3f4 42.2%, #6db4df 44%, #1b79c5 44%, #6dbbfb 92%);
}
#index .about .about_img {
  width: 40%;
  height: 70%;
  margin: 6% auto auto;
  line-height: 0;
  box-shadow: 0 0 #41adcd69;
  transition: 1s all;
}
#index .about .about_img.is-active {
  box-shadow: -4vw -7svh #41adcd69;
}
#index .about .about_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
#index .about .about_txt {
  width: 60%;
  height: 100%;
  padding: 0 3% 0 13%;
  background-size: auto 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
}
#index .about .about_txt h3 {
  font-size: 1.6em;
  font-family: "Zen Antique Soft", serif;
  line-height: 1.3;
  margin-bottom: 20px;
}
#index .about .about_txt h3 em {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 1.4em;
  color: var(--point2-color);
}

@media screen and (min-width: 1500px) {
  #index .about .about_txt p {
    font-size: 1.2em;
  }
}
/* タブレット用のスタイル */
@media screen and (max-width: 1081px) {
  #index .about {
    height: clamp(280px, 50svh, 420px);
    background-image: linear-gradient(120deg, #dbfff7 0%, #93d3f4 32%, #6db4df 38%, #1b79c5 38%, #6dbbfb 92%);
  }
  #index .about .about_txt {
    padding: 0 5% 0 5%;
  }
  #index .about .about_txt p {
    margin-bottom: 20px;
    font-size: 100%;
  }
  #index .about .about_img {
    height: 60%;
    margin: 12% auto auto;
  }
  #index .about .about_img.is-active {
    box-shadow: -4vw -5svh #41adcd69;
  }
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .about {
    flex-wrap: wrap;
    height: auto;
    background-image: linear-gradient(120deg, #dbfff7 0%, #93d3f4 25%, #95c2e3 26%, #1b79c5 26%, #6dbbfb 92%);
  }
  #index .about .about_img {
    width: 80%;
    height: 28svh;
    margin: 14% 7% 0 auto;
  }
  #index .about .about_img.is-active {
    box-shadow: -8vw -3svh #41adcd69;
  }
  #index .about .about_txt {
    width: 100%;
    height: auto;
    margin: 10% 0;
  }
  #index .about .about_txt p {
    font-size: 1.1em;
    text-align: center;
  }
  #index .about .about_txt h3 {
    text-align: center;
  }
}