@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);;
}
.site_footer {
  border-radius:60px 60px 0 0;
  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;
  }
}

/*--------------- deco_item12 ---------------*/
#box_deco_item12 {
  aspect-ratio: 1920 / 614;
  position: absolute;
  top: 40rem;
  left: 50%;
  transform: translateX(-50%);
}
#deco_item12 {
  top: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  #box_deco_item12 {
    width: max(800px,100vw);
  }
}
@media print, screen and (min-width: 768px) {
  #box_deco_item12 {
    width: 100vw;
  }
}

/*--------------- deco_item13 ---------------*/
#wrap_deco_item13 {
  position: absolute;
  overflow: hidden;
  top: -38rem;
  bottom: -40rem;
  left: 0;
  right: 0;
}

#box_deco_item13 {
  aspect-ratio: 1920 / 796;
  position: absolute;
/*  top: -40rem;*/
  left: 50%;
  transform: translateX(-50%);
}
#deco_item13 {
  top: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  #wrap_deco_item13 {
    top: -40rem;
    bottom: 0;
  }
  #box_deco_item13 {
    width: max(800px,100vw);
  }
}
@media print, screen and (min-width: 768px) {
  #wrap_deco_item13 {
    top: -40rem;
  }
  #box_deco_item13 {
    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 {
  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);
  }  
}

/* -----------------------------------------------------------------
 .sec_parallax（base）
----------------------------------------------------------------- */
.sec_parallax {
  position: relative;
  z-index: 6;
}
.sec_parallax_item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: #fff;
  will-change: transform;
}
.sec_parallax_item .curve_top {
  position: absolute;
  top: -5vw;
}
.sec_parallax_item .curve_top path {
  height: 6vw;
}
@media screen and (max-width: 767px) {
  .sec_parallax {
    margin-top: 35vw;
    min-height: 200vw;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_parallax {
    margin-top: 14vw;
    min-height: 100vh;
  }
}
@media (hover: hover) and (pointer: fine) {
}


/* -----------------------------------------------------------------
 .sec_message
----------------------------------------------------------------- */
.sec_message {
  position: relative;
  padding: var(--margin_size_150) 5vw var(--margin_size_100);
  z-index: 10;
}
.sec_message .cmn_btn01 {
  padding: 1.5rem 5rem 1.5rem 6.3rem;
}
.sec_message .cmn_btn01 > .text {
  font-size: 1.125rem;
}
@media screen and (max-width: 767px) {
  .sec_message {
    margin-top: -219vw;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_message {
    margin-top: -110vh;
  }
}


/* -----------------------------------------------------------------
 .sec_message（box_title）
----------------------------------------------------------------- */
.sec_message .box_title {
}
.sec_message .box_title .sub_title {
  text-align: center;
  font-weight: 700;
  opacity: .2;
}
.sec_message .box_title .title {
  position: relative;

  margin: .3em auto 0;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
}
.sec_message .box_title .title::before,
.sec_message .box_title .title::after {
  position: absolute;
  display: block;
  content: "";
}
.sec_message .box_title .title::before {
  background: url("/img/common/deco06.svg") no-repeat;
  background-size: contain;
}
.sec_message .box_title .title::after {
  background: url("/img/common/deco07.svg") no-repeat;
  background-size: contain;
}
.sec_message .box_text {
  margin-top: var(--margin_size_60);
  text-align: center;
}
.sec_message .box_text p {
  line-height: 1.7;
  font-weight: 700;
  font-size: 1.1rem;
}
.sec_message .box_text p + p {
  margin-top: 2em;
}
.sec_message .box_text p .block {
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .sec_message .box_title .title {
    width: 26rem;
    font-size: 1.77rem;
  }
.sec_message .box_title .title::before {
  width: 3.2rem;
  height: 3.2rem;
  top: -10px;
  left: -1vw;
}
.sec_message .box_title .title::after {
  width: 4rem;
  height: 3.65rem;
  bottom: 0;
  right: -1vw;
}

}
@media print, screen and (min-width: 768px) {
  .sec_message .box_title .sub_title {
    font-size: 2.125rem;
  }
  .sec_message .box_title .title {
    width: min(100%,calc(17em + 14vw));
    font-size: min(4.7vw,2.88rem);
  }
  .sec_message .box_title .title::before {
    width: 6vw;
    height: 6vw;
    top: -4.6vw;
    left: -1vw;
  }
  .sec_message .box_title .title::after {
    width: 7vw;
    height: 6.1vw;
    bottom: 0;
    right: -1vw;
  }
  .sec_message .box_text p {
    line-height: 2.5;
    font-size: 1.25rem;
  }
  .sec_message .box_text p + p {
    margin-top: 2em;
  }
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 .sec_photo_strip
----------------------------------------------------------------- */
.sec_photo_strip {
  z-index: 10;  
}

/* -----------------------------------------------------------------
 .sec_about
----------------------------------------------------------------- */
.sec_about {
  position: relative;
}
.sec_about::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1.6vw;
  right: calc(((100vw - min(1520px,90.66vw)) / 2) - 2.5vw);
  width: min(18.12vw,348px);
  height: min(9.01vw,173px);
  background: url("/img/index/about_img02.png") no-repeat;
  background-size: contain;
  z-index: 2;
}
.sec_about_inner {
  display: flex;
  margin-top: var(--margin_size_100);
  background: var(--color_base);
  border-radius: var(--margin_size_60);
  overflow: hidden;
}
.sec_about .cont {
  padding: var(--margin_size_50) min(7.8vw,9.37rem) var(--margin_size_60) min(5vw,6rem) ;
}
.sec_about .cont .cmn_btn01 {/*cms_parts.css上書き*/
  margin-top: var(--margin_size_50);
}
@media screen and (max-width: 767px) {
  .sec_about::before {
    bottom: -1.6vw;
    right: calc(((100vw - min(1520px,90.66vw)) / 2) - 2.5vw);
    width: min(26.8vw,201px);
    height: min(13.3vw,100px);
  }

  .sec_about_inner {
    flex-direction: column;
  }
  .sec_about .img {
    aspect-ratio:681 / 419;
  }
  .sec_about .cont .cmn_box_title01::after {/*cms_parts.css上書き*/
    top: 0;
    left: 11rem;
  }
  .sec_about .cont .body {
    margin-top: 1rem;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_about::before {
    bottom: -1.6vw;
    right: calc(((100vw - min(1520px,90.66vw)) / 2) - 2.5vw);
    width: min(18.12vw,348px);
    height: min(9.01vw,173px);
  }
  .sec_about .img {
    flex: 0 0 50%;
    aspect-ratio: 760 / 580;
  }
  .sec_about .cont {
    padding-top: var(--margin_size_100);
    padding-bottom: var(--margin_size_40);
  }
  .sec_about .cont .cmn_box_title01::after {/*cms_parts.css上書き*/
    left: 15.5rem;
  }
  .sec_about .cont .body {
    margin-top: var(--margin_size_50);
  }
  .sec_about .cont .cmn_btn01 {/*cms_parts.css上書き*/
    left: unset;
    transform: translateX(0);
  }
}
@media print, screen and (max-width: 440px) {
  .sec_about::before {
    top: 61vw;
    bottom: unset;
    right: 10vw;
  }
  
}
@media (hover: hover) and (pointer: fine) {
}


/* -----------------------------------------------------------------
 .sec_person
----------------------------------------------------------------- */
.sec_person {
  margin-top: var(--margin_size_100);
}
.sec_person .sec_header .cmn_box_title01::after {
  background: url("/img/common/deco_title01.svg") no-repeat;
  background-size: contain;
}
.sec_person .sec_header .text {
  flex: 1 1 57%;
}

@media screen and (max-width: 767px) {
  .sec_person .sec_header .cmn_box_title01::after {
    top: -0.5rem;
    left: 8.5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_person .sec_header {
    display: flex;
  }
  .sec_person .sec_header .cmn_box_title01 {
    flex: 0 1 50%;
    min-width: 26rem;
  }
  .sec_person .sec_header .cmn_box_title01::after {
    top: -1.5rem;
    left: 13rem;
  }
  .sec_person .sec_header .text {
    margin-top: 2em;
  }
}
@media (hover: hover) and (pointer: fine) {
}
/* -----------------------------------------------------------------
 .sec_person_inner
----------------------------------------------------------------- */
.sec_person_inner {
  margin-top: var(--margin_size_60);
  margin-left : max(calc((100% - 1200px) / 2),4.67vw);
/*  margin-right: 2rem;*/
}
@media screen and (max-width: 767px) {
  .sec_person_inner {
    width: 108vw;
  }
}
@media print, screen and (min-width: 768px) {
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 .sec_person スライダー部分
----------------------------------------------------------------- */
.sec_person_inner .splide {
}
.sec_person_inner .splide .link {
  position: relative;
  display: block;
  margin-right: 2rem;
  border-radius: var(--margin_size_30);
  overflow: hidden;
}
.sec_person_inner .splide .img::after {
  content: "";
  display: block;
  position: absolute;
  inset:0;
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%);
}
.sec_person_inner .splide .cmn_img_trim {
  aspect-ratio: 360 / 500;
}
.sec_person_inner .splide .link .cat {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 0 0 .625rem;
  background: #000;
  font-weight: 700;
  color: #fff;
}
.sec_person_inner .splide .link .cat.cat_sales {
  background: var(--color_accent_red);
}
.sec_person_inner .splide .link .cat.cat_attendant {
  background: var(--color_accent_orange);
}
.sec_person_inner .splide .link .cat.cat_office {
  background: var(--color_accent_Yellow);
}
.sec_person_inner .splide .link .cat.cat_engineer {
  background: var(--color_accent_green);
}
.sec_person_inner .splide .link .summary {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 1.6rem;
}
.sec_person_inner .splide .link .summary .copy {
  font-weight: 700;
  color: #fff;
}
.sec_person_inner .splide .link .summary .name {
  margin-top: 1em;
  font-size: .875rem;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .sec_person_inner .splide .link .cat {
    padding: .8rem 1rem;
  }
  .sec_person_inner .splide .link .summary .copy {
    font-size: 1.15rem;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_person_inner .splide .link .cat {
    padding: 1.13rem 1.3rem;
  }
  .sec_person_inner .splide .link .summary .copy {
    font-size: 1.375rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 スライダーコントロール部分
----------------------------------------------------------------- */
.sec_person_inner .splide_utility {
  display: flex;
  align-items: center;
  gap: var(--margin_size_50);
  width: min(1200px,90.66vw);
  margin-top: var(--margin_size_60);
}
.sec_person_inner .splide_progress {
  position: relative;
  flex: 1 0 auto;
  height: 4px;
  border: #ccc 1px solid;
  border-radius: 2px;
  overflow: hidden;
}
.sec_person_inner .splide_progress_bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--color_txt_gray);
  transition: left 0.4s ease;
  border-radius: 2px;
}
.sec_person_inner .splide__arrows {
  display: flex;
  gap:1rem;
}
.sec_person_inner .splide__arrow {
  position: relative;
  inset: auto;
  width: 2.5rem;
  height: 2.5rem;
  border: currentcolor 1px solid;
  background: #fff;
  transform:unset;
  transition: background 0.3s ease;
}
.sec_person_inner .splide__arrow svg {
  display: none;
}
.sec_person_inner .splide__arrow .arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 1.25rem;
  border-color: transparent transparent transparent #000;
  transition: border-color 0.4s ease 0.1s, transform 0.4s ease;
}
.sec_person_inner .splide__arrow.splide__arrow--prev .arrow {
  transform:rotate(180deg);
}
@media screen and (max-width: 767px) {
}
@media print, screen and (min-width: 768px) {
}
@media (hover: hover) and (pointer: fine) {
  .sec_person_inner .splide__arrow:hover:not(:disabled) {
    opacity: 1;
    border: var(--color_txt_netz) 1px solid;
    background: var(--color_txt_netz);
  }
  .sec_person_inner .splide__arrow:hover:not(:disabled) .arrow {
    border-color: transparent transparent transparent #fff;
  }
}

/* -----------------------------------------------------------------
 .sec_data
----------------------------------------------------------------- */
.sec_data {
  position: relative;
  z-index: 10;
  margin-top: var(--margin_size_120);
}
.sec_data .sec_header .text {
  display: flex;
  justify-content: center;
  margin-top: var(--margin_size_50);
}
.sec_data .splide {
  margin-top: var(--margin_size_60);
}
.sec_data .splide .item {
  padding: 3rem;
  border-radius: var(--margin_size_30);
  border: #9e9e9e 1px solid;
  background: #fff;
}
@media screen and (max-width: 767px) {
}
@media print, screen and (min-width: 768px) {
}
@media (hover: hover) and (pointer: fine) {
}


/* -----------------------------------------------------------------
 sec_data（item）
----------------------------------------------------------------- */
.sec_data .box_panel .item {
  position: relative;
  padding:  var(--margin_size_30);
  border-radius: var(--margin_size_30);
  background: #fff;
  overflow: hidden;
}
.sec_data .box_panel .item .ico {
  position: absolute;
  transition: all 0.3s ease 0s;
}
.sec_data .box_panel .item .data_label {
  display: table;
  padding: .4em 1.2em;
  border-radius: 10px;
  background: var(--color_main);
  font-size: .83rem;
  color: #fff;
}
.sec_data .box_panel .item .data_body {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .2rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
  color: var(--color_txt_netz);
}
.sec_data .box_panel .item .data_body .number {
  font-weight: 700;
  font-size: 4.5rem;
}
.sec_data .box_panel .item .data_body .font_small {
  font-size: 1.8rem;
}
.sec_data .box_panel .item .data_footer {
  display: flex;
  justify-content: space-between;
}
.sec_data .box_panel .item .data_footer .data_caption {
  font-weight: 700;
  font-size: .875rem;
  color: #aeaeae;
}
.sec_data .box_panel .item .data_footer .data_btn {
  display: flex;
  align-items: center;
  opacity: 0;
}
.sec_data .box_panel .item .data_footer .data_btn .text{
  font-size: .875rem;
  color: var(--color_txt_netz);
}
.sec_data .box_panel .item .data_footer .data_btn .btn{
  display: inline-block;
  position: relative;
  width: 1rem;
  height: 1rem;
  margin-left: 0.3rem;
  border-radius: 50%;
  background-color: var(--color_txt_netz);
  transition: all 0.3s ease 0s;
}
.sec_data .box_panel .item .data_footer .data_btn .btn::after{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background: url(/img/data/ico_plus_wh.svg) no-repeat center center/70%;
  content: "";
  transition: transform 0.3s;
}
@media screen and (max-width: 767px) {
  .sec_data .box_panel .item .ico {
    top: 0;
    right: 0;
    transform: scale(0.5);
  }
}
@media print, screen and (min-width: 768px) {
  .sec_data .box_panel .item .ico {
    top: var(--margin_size_30);
    right: var(--margin_size_30);
  }
  .sec_data .box_panel .item .data_label {
    font-size: 1.125rem;
  }
  .sec_data .box_panel .item .data_body .number {
    font-size: 6.25rem;
  }
  .sec_data .box_panel .item .data_body .font_small {
    font-size: 2.5rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}