@charset "utf-8";

/* //////////////////////// ファーストビューー //////////////////////// */

/* -----------------------------------------------------------------
 ベースカラーの調整
----------------------------------------------------------------- */
html,body {
  background: #fff;
}
body::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  content: "";
  display: block;
  width: 100%;
  background: var(--color_base);
}
@media screen and (max-width: 767px) {
  body::after {
    height: 160vh;
  }
}
@media print, screen and (min-width: 768px) {
  body::after {
    height: 200vh;
  }
}

/* -----------------------------------------------------------------
 背景ラインアニメーション
----------------------------------------------------------------- */
/*--------------- deco_item10 ---------------*/
#wrap_deco_item10 {
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#wrap_deco_item10 {
  aspect-ratio: 1920 / 1065;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#deco_item10 {
  top: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  #wrap_deco_item10 {
    width: max(800px,100vw);
  }
}
@media print, screen and (min-width: 768px) {
  #wrap_deco_item10 {
    width: 100vw;
  }
}

/* -----------------------------------------------------------------
 fv
----------------------------------------------------------------- */
.fv {
  position: relative;
}
.fv::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  z-index: 4;
}
#slider_mv_before {
  position: absolute;
  z-index: 3;
}
.fv .splide .item img {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 450;
  object-fit: cover;
  border-radius: var(--margin_size_30);
}

@media screen and (max-width: 767px) {
  .fv::after {
    height: 70vw;
    background: url("/img/index/deco_mv_sp.svg") no-repeat;
    background-size: cover;
  }
  #slider_mv_before {
    top: 10vw;
  }
  #slider_mv_after {
    padding-top: 10vw;
  }
  .fv .splide .item:nth-of-type(2n) {
    margin-top: 6vw;
  }
}
@media print, screen and (min-width: 768px) {
  .fv::after {
    height: 31vw;
    background: url("/img/index/deco_mv_pc.svg") no-repeat;
    background-size: cover;
  }
  #slider_mv_before {
    top: 44px;
  }
  #slider_mv_after {
    padding-top: 44px;
  }
  .fv .splide .item:nth-of-type(2n) {
    margin-top: 3vw;
  }
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 .fv_cont
----------------------------------------------------------------- */
.fv_cont {
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 4;
}
@media screen and (max-width: 767px) {
  .fv_cont {
    flex-direction: column;
    padding-top: 8vw;
  }
}
@media print, screen and (min-width: 768px) {
  .fv_cont {
    padding-top: 4.6vw;
  }
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 .fv_cont（fv_copy）
----------------------------------------------------------------- */
.fv_cont .fv_copy {
  position: relative;
}
.fv_cont .fv_copy .text {
  display: block;
  font-weight: 700;
}
.fv_cont .fv_copy::before,
.fv_cont .fv_copy::after {
  content: "";
  display: block;
  position: absolute;
}
@media screen and (max-width: 767px) {
  .fv_cont .fv_copy .text {
    margin-left: 4.7vw;
    font-size: 6.8vw;
  }
  .fv_cont .fv_copy::after {
    bottom:0;
    right: 4.2vw;
    width: 8vw;
    height: 9.4vw;
    background: url("/img/common/deco05.svg") no-repeat center top;
    background-size: contain;
  }
}
@media print, screen and (min-width: 768px) {
  .fv_cont .fv_copy .text {
    margin-left:min(9vw,200px);
    font-size: min(2.9vw,3.5rem);
  }
  .fv_cont .fv_copy::before {
    top: -5vw;
    left: 0;
    width: min(9vw,200px);
    height: min(11.2vw,214px);
    background: url("/img/common/deco01.svg") no-repeat center top;
    background-size: 60%;
  }
  .fv_cont .fv_copy::after {
    top:2vw;
    right: 0;
    width: min(3vw,58px);
    height: min(4vw,75px);
    background: url("/img/common/deco02.svg") no-repeat center top;
    background-size: contain;
  }
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 .fv_cont（fv_news）
----------------------------------------------------------------- */
.fv_cont .fv_news {
  align-self: flex-start;
  position: relative;
  display: flex;
  gap:2.5rem;
  align-items: center;
  border-radius: 9999px 0 0 9999px;
  background: #fff;
}
.fv_cont .fv_news_title {
/*  position: absolute;*/
}
.fv_cont .item {
  display: flex;
  gap: 1rem;
}
.fv_cont .item_inner {
}
.fv_cont .item .date {
  color: var(--color_txt_gray);
}
.fv_cont .item .box_ttl {
  margin-top: .4rem;
}
.fv_cont .item .box_ttl .ttl {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  font-weight: 700;
}
.fv_cont .item .arrow {
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 0.35rem 0 0.35rem 1.35rem;
  border-color: transparent transparent transparent currentColor;
  transition: border-color 0.4s ease 0.1s, transform 0.4s ease;
}
@media screen and (max-width: 767px) {
  .fv_cont .fv_news {
    width:100%;
    margin-top: max(10vw,2.5rem);
    margin-left: 4.7vw;
    padding:2rem 0 2rem 2.3rem;
  }
  .fv_cont .item_inner {
    flex: 1 0;
    flex: 0 1 calc(95vw - 13.5rem);
  }

  .fv_cont .fv_news .splide {
    flex:1;
  }
  .fv_cont .item .date {
  }
  .fv_cont .item .box_ttl .ttl {
  }
  .fv_cont .item .arrow {
    flex: 1 1 2rem;
  }
}
@media print, screen and (min-width: 768px) {
  .fv_cont .fv_news {
    width: min(34vw,614px);
    margin-top: -1rem;
    padding:2rem 0 2rem 2.3rem;
  }
  .fv_cont .fv_news_title {
    top: 1.8rem;
    left: 2.3rem;
    font-size: 1.125rem;
  }
	.fv_cont .item {
	}
	.fv_cont .item_inner {
	  flex: 1 1 80%;
	}

  .fv_cont .fv_news ul {
    width: calc(min(34vw,614px) - 8rem);
  }
  .fv_cont .item .date {
    top: 2.8rem;
    left: 2.3rem;
    font-size: .875rem;
  }
  .fv_cont .item .box_ttl .ttl {
  }
  .fv_cont .item .arrow {
    width: 3rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  /*---------- hover共通処理 ----------*/
  .fv_cont .item:hover .arrow {
    border-color: transparent transparent transparent currentColor;
    transform: translateX(0.5rem);
  }  
}