/* index.php reset */
#index section {
  /*	margin-bottom: 30px;*/
  overflow: hidden;
}
/* main visual */
#index .mv {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1; /* 背景扱い */
  opacity: 0.5;
}

/* 写真が永遠と回るやつ */
.mv_img {
  width: 55%;
  max-height: 640px;
  height: 80vh;
  overflow: hidden;
  box-shadow: -3vw 2vw 0 #254fa555;
  line-height: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.mv_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.slid_wrap {
  width: 70%;
  height: auto;
  max-height: 220px;
  margin: auto 0 0 auto;
  background: #5880ce;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
}
.slid_wrap .min-slider div {
  opacity: 1;
  mix-blend-mode: multiply;
}

#index .mv .curtain_right {
  width: 0;
  height: 900px;
  background: #5880ce;
  mix-blend-mode: multiply;
  animation: bg 1s 2s 1 forwards;
  transform: rotate(-45deg);
  transform-origin: left;
  opacity: 0.7;
  position: absolute;
  top: 54vh;
  left: 94vw;
  z-index: 1;
}
#index .mv .curtain_right::after {
  content: "";
  display: block;
  width: 0;
  height: 900px;
  background: #254fa5;
  opacity: 0.5;
  position: absolute;
  animation: bg2 2s 2s 1 forwards;
}
#index .mv .curtain_right::after {
  bottom: 4vh;
}
@keyframes bg {
  100% {
    width: 120vw;
  }
}
@keyframes bg2 {
  100% {
    width: 120vw;
  }
}
#index .mv .mv_copy {
  position: absolute;
  left: 58%;
  top: 16%;
  z-index: 10;
}
#index .mv .mv_copy h2 {
  font-size: 3em;
  line-height: 1.4;
  font-weight: 700;
  color: #254fa5;
}
#index .mv .mv_copy p {
  padding: 1em 0 0 3em;
  color: #ae7239;
  font-size: 1.2em;
  font-weight: bold;
}
@media screen and (max-width: 1081px) {
  #index .mv {
    max-height: 700px;
  }
  .mv_img {
    width: 52%;
    max-height: 620px;
    height: auto;
    box-shadow: -4vw 3vw 0 #254fa555;
  }
  .slid_wrap {
    height: auto;
  }
  #index .mv .mv_copy h2 {
    font-size: calc(100vw / 20);
  }
  #index .mv .mv_copy p {
    padding: 10px 0 0 2em;
    color: #ae7239;
    font-size: 1em;
    font-weight: bold;
  }
  #index .mv .curtain_right {
    top: 30vh;
    left: 100vw;
  }
  #index .mv .curtain_right::after {
    bottom: 3vh;
  }
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .mv {
    max-height: none;
    height: 90vh;
  }
  #index .mv .mv_copy {
    right: auto;
    left: 2vw;
    top: 36vh;
  }
  #index .mv .mv_copy h2 {
    font-size: calc(100vw / 20);
  }
  #index .mv .curtain_right {
    top: 55vh;
    left: 110vw;
  }
  .mv_img {
    width: 80%;
    max-height: 500px;
    height: auto;
    box-shadow: -7vw 6vw 0 #254fa555;
  }
  .slid_wrap {
    width: 100%;
  }
}
@media screen and (max-width: 431px) {
  #index .mv {
    max-height: 700px;
    height: 80vh;
  }
  #index .mv .mv_copy {
    right: auto;
    left: 3vw;
    top: 32vh;
  }
  #index .mv .mv_copy h2 {
    font-size: calc(100vw / 12);
    left: 3vw;
  }
  #index .mv .curtain_right {
    top: 25vh;
    left: 150vw;
  }
}
/* introducs */
#index .intro_box {
  position: relative;
}
#index .intro_box .cotns_box {
  padding: 100px 0 100px;
}
#index .intro_box .intro_txt {
  width: 54vw;
  max-width: 1000px;
  background: #ffffff;
  z-index: 2;
}
#index .intro_box .intro_txt h2 {
  color: #254fa5;
  font-size: calc(100vw / 32);
  font-weight: 700;
  line-height: 1.4;
  padding-bottom: 50px;
}
#index .intro_box .intro_txt p {
  line-height: 2.4;
  letter-spacing: 1px;
}

#index .intro_img {
  width: 44vw;
  max-height: 560px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  bottom: 100px;
  right: 0;
  z-index: 1;
}
@media screen and (min-width: 1500px) {
  #index .intro_box .intro_txt h2 {
    font-size: 46px;
  }
}
@media screen and (max-width: 1081px) {
  #index .intro_box {
    height: auto;
    font-size: calc(100vw / 52);
  }
  #index .intro_box .cotns_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 4vw 0;
  }
  #index .intro_box .intro_txt {
    width: 55%;
    margin-left: 0;
  }
  #index .intro_box .intro_txt .br_pc {
    display: none;
  }
  #index .intro_box .intro_txt h2 {
    font-size: calc(100vw / 30);
  }
  #index .intro_box .intro_txt p {
    line-height: 2.2;
  }
  #index .intro_img {
    width: 44%;
    height: 40vh;
    /* margin: auto 0 2vw; */
    position: static;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  #index .intro_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
  }
}
@media screen and (max-width: 768px) {
  #index .intro_box {
    min-height: auto;
    height: auto;
  }
  #index .intro_box .news_box {
    width: 90%;
    max-width: none;
    margin: 3vw auto;
    position: static;
  }
  #index .intro_box .news_box ul {
    width: 100%;
    min-height: 30vw;
    padding: 2vw;
  }
  #index .intro_box .intro_txt {
    width: 100%;
    max-width: none;
    margin-bottom: 3vw;
  }
  #index .intro_box .intro_txt h2 {
    width: 90%;
    margin: 0 auto;
    font-size: calc(100vw / 24);
  }
  #index .intro_box .intro_txt p {
    width: 90%;
    margin: 0 auto;
    max-width: none;
  }
  #index .intro_img {
    position: static;
    width: 100%;
    max-width: none;
    border-radius: 0;
  }
}

@media screen and (max-width: 430px) {
  #index .intro_box .intro_txt h2 {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 3vw;
    font-size: calc(100vw / 17);
  }
  #index .intro_box {
    padding: 6vh 0 0;
    font-size: calc(100vw / 24);
    position: relative;
  }
}

/* =========================================
   共通：写真コンテナ（左右共通）
========================================= */
#index .top_cotnsL .cotns_box,
#index .top_cotnsR .cotns_box {
  /* max-width: none; */
  position: relative;
  height: 500px;
  z-index: 0;
}
#index .top_cotnsL,
#index .top_cotnsR {
  position: relative;
}
#index .top_cotnsL::before,
#index .top_cotnsR::before {
  content: "";
  height: 60%;
  position: absolute;
  inset: 0;
  background: #254fa522;
  opacity: 0;
  transform: translate(20px, 60px);
  transition: opacity 2s ease, transform 2s ease;
  z-index: -1;
}
#index .top_cotnsR::before {
  background: #82d2eb33;
}

#index .top_cotnsL.is-active::before,
#index .top_cotnsR.is-active::before {
  opacity: 1;
  transform: translate(0, 0);
}
#index .top_cotnsL .top_cotnsL_img,
#index .top_cotnsR .top_cotnsR_img,
#index .top_cotnsL .top_cotnsL_img_shadow,
#index .top_cotnsR .top_cotnsR_img_shadow {
  position: absolute;
  height: 400px;
  transition: all 0.3s ease 0s;
}
#index .top_cotnsL .top_cotnsL_img,
#index .top_cotnsR .top_cotnsR_img {
  width: 54%;
  max-width: 900px;
  z-index: 10;
}
#index .top_cotnsR .top_cotnsR_img img,
#index .top_cotnsL .top_cotnsL_img img {
  object-fit: cover;
  object-position: center bottom;
  width: 100%;
  height: 100%;
}

/* 共通：影 */
#index .top_cotnsL .top_cotnsL_img_shadow,
#index .top_cotnsR .top_cotnsR_img_shadow {
  width: 56%;
  max-width: 900px;
  height: 400px;
  content: "";
  display: block;
  background: #254fa5;
  opacity: 0;
  z-index: -1;
}

/* 共通：テキストブロック */
#index .top_cotnsL .top_cotnsL_cntns,
#index .top_cotnsR .top_cotnsR_cntns {
  width: 38%;
  max-width: 550px;
  position: absolute;
  bottom: 0;
}
#index .top_cotnsL .top_cotnsL_cntns p,
#index .top_cotnsR .top_cotnsR_cntns p {
  margin: 30px 0;
  width: 100%;
}
#index .top_cotnsL .top_cotnsL_cntns .cntns_hl1::before,
#index .top_cotnsR .top_cotnsR_cntns .cntns_hl1::before {
  width: 550px;
  left: 0;
  z-index: -1;
}

/* 写真が左 */
#index .top_cotnsL .cotns_box {
  margin-left: 0;
}
#index .top_cotnsL .top_cotnsL_img,
#index .top_cotnsL .top_cotnsL_img_shadow {
  clip-path: polygon(20% 0, 100% 0%, 80% 100%, 0% 100%);
  top: 0;
  left: 0;
}
#index .top_cotnsL .top_cotnsL_img_shadow.is-active {
  top: 60px;
  left: 20px;
  transition: all 2.5s ease 0s;
}
#index .top_cotnsL .top_cotnsL_cntns {
  right: 6%;
}

/* 写真が右（R）*/
#index .top_cotnsR .cotns_box {
  margin-right: 0;
}
#index .top_cotnsR .top_cotnsR_img,
#index .top_cotnsR .top_cotnsR_img_shadow {
  right: 0;
  top: 0;
  clip-path: polygon(0 0, 80% 0%, 100% 100%, 20% 100%);
}
#index .top_cotnsR .top_cotnsR_img_shadow.is-active {
  top: 60px;
  transition: all 2s ease 0s;
}
#index .top_cotnsR .top_cotnsR_cntns {
  left: 3%;
}
/* タブレット用のスタイル */
@media screen and (max-width: 1081px) {
  #index .top_cotnsL .cotns_box,
  #index .top_cotnsR .cotns_box {
    height: 440px;
  }
  #index .top_cotnsL:nth-child(5) .cotns_box {
    height: 500px;
  }
  #index .top_cotnsL .top_cotnsL_img,
  #index .top_cotnsL .top_cotnsL_img_shadow {
    width: 57%;
    height: 24vh;
  }
  #index .top_cotnsR .top_cotnsR_img,
  #index .top_cotnsR .top_cotnsR_img_shadow {
    height: 24vh;
  }
  #index .top_cotnsL .top_cotnsL_img_shadow.is-active {
    top: 6vw;
    left: 2vw;
  }
  #index .top_cotnsR .top_cotnsR_img_shadow.is-active {
    top: 6vw;
    right: 2vw;
  }
  #index .top_cotnsL .top_cotnsL_cntns {
    width: 42%;
    right: 4%;
  }
  #index .top_cotnsR .top_cotnsR_cntns {
    width: 45%;
  }
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .top_cotnsL .cotns_box,
  #index .top_cotnsR .cotns_box {
    margin: 2vw 0 3vw 0;
    height: 70vh;
    max-width: none;
    position: relative;
  }
  /* 左 */
  #index .top_cotnsL .top_cotnsL_img {
    width: 70%;
    height: 24vh;
  }
  #index .top_cotnsL .top_cotnsL_img_shadow {
    width: 70%;
    height: 24vh;
  }
  #index .top_cotnsL .top_cotnsL_cntns {
    width: 90%;
    margin-top: 10vw;
    bottom: auto;
    top: 32%;
  }
  #index .top_cotnsL .top_cotnsL_cntns .cntns_hl1::before {
    width: 100%;
  }
  #index .top_cotnsL .top_cotnsL_cntns p {
    margin: 3vw 0 6vw;
  }
  /* 右 */
  #index .top_cotnsR .top_cotnsR_img {
    width: 70vw;
    height: 24vh;
  }
  #index .top_cotnsR .top_cotnsR_img_shadow {
    width: 70vw;
    height: 24vh;
  }
  #index .top_cotnsR .top_cotnsR_cntns {
    width: 90%;
    margin-top: 10vw;
    left: 10%;
    bottom: auto;
    top: 32%;
  }
  #index .top_cotnsR .top_cotnsR_cntns .cntns_hl1::before {
    width: 550px;
  }
  #index .top_cotnsR .top_cotnsR_cntns p {
    margin: 3vw 0 6vw;
  }
}

@media screen and (max-width: 430px) {
  #index .top_cotnsL .cotns_box,
  #index .top_cotnsR .cotns_box {
    max-height: 500px;
  }
  #index .top_cotnsR .top_cotnsR_img,
  #index .top_cotnsL .top_cotnsL_img,
  #index .top_cotnsR .top_cotnsR_img_shadow,
  #index .top_cotnsL .top_cotnsL_img_shadow {
    width: 80%;
    height: 20vh;
  }
}