@charset "utf-8";

/* -----------------------------------------------------------------
 setting・上書き
----------------------------------------------------------------- */
:root {
  --footer_margin :30vw;
}
.cmn_breadcrumb::before {
  background: var(--color_accent_green);
}
@media screen and (max-width: 767px) {
  .cmn_box_title01::after {
    width: calc(2.6rem * 0.9);
    height: calc(2.6rem * 0.9);
  }
  .cmn_box_title01.deco03::after {
    width: calc(3.2rem * 0.9);
    height: calc(2.3rem * 0.9);
  }
  .cmn_box_title01.deco09::after {
    width: calc(2.2rem * 0.9);
    height: calc(2.2rem * 0.9);
  }
  .cmn_box_title01.deco11::after {
    width: calc(3.2rem * 0.9);
    height: calc(2.3rem * 0.9);
  }
}

@media print, screen and (min-width: 768px) {
  .cmn_local_nav .list {
    align-items: center;
    gap: min(4.6rem, 3vw);
    font-size: min(1.25vw,1rem);
  }
  .cmn_box_title01::after {
    width: calc(3.8rem * 0.9);
    height: calc(3.8rem * 0.9);
  }
  .cmn_box_title01.deco03::after {
    width: calc(4.6rem * 0.9);
    height: calc(3.3rem * 0.9);
  }
  .cmn_box_title01.deco10::after {
    width: calc(3.15rem * 0.9);
    height: calc(3.15rem * 0.9);
  }
  .cmn_box_title01.deco11::after {
/*
    width: calc(4.6rem * 0.9);
    height: calc(3.3rem * 0.9);
*/
  }
  .cmn_box_title01 .title_main.en{
    font-size: 1.875rem;
  }
  .cmn_box_title01 .title_sub{
    margin-top:.3em;
    font-size: 1.125rem;
  }
  .cmn_box_title02 .title_main.en{
    font-size: 1.875rem;
  }
  .cmn_box_title02 .title_sub{
    margin-top:.3em;
    font-size: 1.125rem;
  }
}

/* -----------------------------------------------------------------
 common（cmn_local_flex）
----------------------------------------------------------------- */
.cmn_local_flex {
}
.cmn_local_flex:nth-of-type(odd) {
  flex-direction: row;
  margin-left: clamp(-89px, calc((84vw - min(1200px, 90.66vw)) * -0.21), 0px);

}
.cmn_local_flex:nth-of-type(even) {
  flex-direction: row-reverse;
  margin-right: clamp(-89px, calc((84vw - min(1200px, 90.66vw)) * -0.21), 0px);
}
.cmn_local_flex .img {
  border-radius: var(--margin_size_60);
  overflow: hidden;
  aspect-ratio: 879 / 621;
}
.cmn_local_title01 {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color_txt_netz);
}
.cmn_local_title02 {
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 1.4rem;
}
.cmn_local_title01 + .cmn_local_title02 {
  margin-top: 0.6em;
}

.cmn_local_flex .body{
  margin-top: 2rem;
}
.cmn_local_flex .body,
.cmn_local_flex .body *{
  line-height: 2;
}

@media screen and (max-width: 767px) {

  .cmn_local_title01 {
    margin-top: 2rem;

  }
  .cmn_local_title02 {

  }
}
@media print, screen and (min-width: 768px) {
  .cmn_local_flex {
    display: flex;
    align-items: flex-start;
    gap: 4vw;
  }

  .cmn_local_flex .img {
    flex: 0 0 50%;
  }
  .cmn_local_flex .text {
    flex: 0 0 calc(50%  - 4vw);
  }
  .cmn_local_title01 {
    font-size: 1.125rem;
  }
  .cmn_local_title02 {
    font-size: 1.625rem;
  }
}

/* -----------------------------------------------------------------
 common（cmn_local_flex_wide）
----------------------------------------------------------------- */
.cmn_local_flex_wide .img {
  margin-left: calc((92vw - min(1200px, 90.66vw)) * -0.21);
  margin-right: calc((92vw - min(1200px, 90.66vw)) * -0.21);
  aspect-ratio: 1347 / 440;
  border-radius: var(--margin_size_60);
  overflow: hidden;
}
.cmn_local_flex_wide .cmn_local_title01 {
  margin-top: var(--margin_size_40); 
}
.cmn_local_flex_wide .body{
  margin-top: 1.5rem;
}
.cmn_local_flex_wide .body,
.cmn_local_flex_wide .body *{
  line-height: 2;
}

/* -----------------------------------------------------------------
 背景ラインアニメーション
----------------------------------------------------------------- */
/*--------------- deco_item26 ---------------*/
#wrap_deco_item26 {
  position: absolute;
  overflow: hidden;
  width: 100vw !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#box_deco_item26 {
  position: absolute;
  left: 0;
  right: auto;
}
#deco_item26 {
  width: 556px;
  width: 29vw;
}
@media screen and (max-width: 767px) {
  #box_deco_item26 {
    width: 233px;
  }
  #deco_item26 {
    width: 233px;
  }
}
@media print, screen and (min-width: 768px) {
  #box_deco_item26 {
    left: 0;
    right: auto;
    width: 29vw;
  }
  #deco_item26 {
    width: 29vw;
  }
}

/*--------------- deco_item24 ---------------*/
#box_deco_item24 {
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
}
#deco_item24 {
  top: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  #box_deco_item24 {
    width: max(800px,100vw);
    top: 30vh;
  }
}
@media print, screen and (min-width: 768px) {
  #box_deco_item24 {
    width: 100vw;
  }
}

/*--------------- deco_item25 ---------------*/
#box_deco_item25 {
  position: absolute;
  top: -10rem;
  left: 50%;
  transform: translateX(-50%);
}
#deco_item25 {
  top: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  #box_deco_item25 {
    width: max(800px,100vw);
    top: 10vh;
  }
}
@media print, screen and (min-width: 768px) {
  #box_deco_item25 {
    width: 100vw;
  }
}

/*--------------- deco_item27 ---------------*/
#box_deco_item27 {
  position: absolute;
  top: 22rem;
  left: 50%;
  transform: translateX(-50%);
}
#deco_item27 {
  top: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  #box_deco_item27 {
    width: max(800px,100vw);
    top: 23vh;
  }
}
@media print, screen and (min-width: 768px) {
  #box_deco_item27 {
    width: 100vw;
  }
}

/*--------------- deco_item06 ---------------*/
#wrap_deco_item06 {
  position: absolute;
  overflow: hidden;
  top: 2rem;
  bottom: -25rem;
  left: 0;
  right: 0;
}
#box_deco_item06 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#deco_item06 {
  top: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  #box_deco_item06 {
    width: max(800px,100vw);
  }
}
@media print, screen and (min-width: 768px) {
  #box_deco_item06 {
    width: 100vw;
  }
}

/* -----------------------------------------------------------------
 page_header
----------------------------------------------------------------- */
.page_header {
  position: relative;
  margin-top: var(--margin_size_80);
  z-index: 0;
}

.page_header .title_cat {
  display: table;
  padding: .5em 1.2em;
  border-radius: 9999px;
  background: #000;
  line-height: 1;
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
}
.page_header .title_cat.bg_color01 {
  background: var(--color_accent_red);
}
.page_header .title_cat.bg_color02 {
  background: var(--color_accent_orange);
}
.page_header .title_cat.bg_color03 {
  background: var(--color_accent_Yellow);
}
.page_header .title_cat.bg_color04 {
  background: var(--color_accent_green);
}
.page_header .title_cat.bg_color05 {
  background: var(--color_accent_blue);
}
.page_header .title_main {
  position: relative;
  padding-top: .3em;
  padding-bottom: 1.1em;
  line-height: 1.56;
  font-weight: 700;
  font-size: 2rem;
}
.page_header .title_main::before,
.page_header .title_main::after {
  position: absolute;
  content: "";
  display: block;
}
.page_header .title_main::before {
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #aeaeae;
}
.page_header .title_main::after {
  bottom: 0;
  left: 0;
  width: 4.25rem;
  height: 5px;
  background: #000;
}
.page_header .title_main.bg_color01::after {
  background: var(--color_accent_red);
}
.page_header .title_main.bg_color02::after {
  background: var(--color_accent_orange);
}
.page_header .title_main.bg_color03::after {
  background: var(--color_accent_Yellow);
}
.page_header .title_main.bg_color04::after {
  background: var(--color_accent_green);
}
.page_header .title_main.bg_color05::after {
  background: var(--color_accent_blue);
}
.page_header .name {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1;
  font-weight: 700;
  font-size: 1.5rem;
}
.page_header .text {
  margin-top: .5rem;
  line-height: 1;
  font-weight: 400;
}

.page_header .img {
  aspect-ratio: 879 / 621;
  border-radius: var(--margin_size_60) 0 0 var(--margin_size_60);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .page_header .title {
    width: 90.66vw;
    margin-left: auto;
    margin-right: auto;
  }
  .page_header .img {
    margin-top: var(--margin_size_60);
    margin-left: 4.67vw;
  }

}
@media print, screen and (min-width: 768px) {
  .page_header {
    display: flex;
    align-items: center;
    gap:4%;
    margin-left: max(calc((100% - 1200px) / 2),4.67vw);
  }
  .page_header .title_main {
    font-size: 2.875rem;
  }

  .page_header .title {
    flex: 0 0 40%;
  }
  .page_header .img {
    flex: 0 0 56%;
  }
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 sec_career ※コンテンツ削除
----------------------------------------------------------------- */
.sec_career {
  position: relative;
  margin-top: var(--margin_size_80);
  padding: var(--margin_size_80) 0;
  background: #fff;
  border-radius: var(--margin_size_60);
  z-index: 1;
}
.sec_career .sec_inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}
.sec_career .sec_cont {
  display: flex;
  flex-direction: column;
  gap:1.5rem;
  margin-top: var(--margin_size_50);
}
.sec_career .sec_cont .item {
  display: flex;
  gap:5rem;
}
.sec_career .sec_cont .item .year {
  font-size: 1.125rem;
  color: #979797;
}

@media screen and (max-width: 767px) {
  .sec_career .cmn_box_title01::after {
    left: 12rem;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_career .cmn_box_title01::after {
    left: 12rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 sec_present
----------------------------------------------------------------- */
.sec_present {
  position: relative;
  margin-top: var(--margin_size_120);
  z-index: 1;
}

.sec_present .sec_cont {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--margin_size_100);
  margin-top: var(--margin_size_60);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .sec_present .cmn_box_title01::after {
    left: 12rem;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_present .cmn_box_title01::after {
    left: 13rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}


/* -----------------------------------------------------------------
 sec_schedule
----------------------------------------------------------------- */
.sec_schedule {
  position: relative;
  margin-top: var(--margin_size_80);
  z-index: 1;
}
.sec_schedule .sec_schedule_inner {
  margin-top: var(--margin_size_30);
  padding: var(--margin_size_60) min(100px, 10%) ;
  background: #fff;
  border-radius: var(--margin_size_20);
	overflow: hidden;
}
.sec_schedule .sec_schedule_cont .sec_schedule_item {
  display: flex;
}

.sec_schedule .sec_schedule_cont .sec_schedule_item .time {
  position: relative;
  flex-shrink: 0;
  width: 6em;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color_txt_netz);
}
.sec_schedule .sec_schedule_cont .sec_schedule_item .time::before,
.sec_schedule .sec_schedule_cont .sec_schedule_item .time::after {
  position: absolute;
  top: calc((1em - 12px) / 2);
  display: block;
  content: "";
  background: var(--color_txt_netz);
}
.sec_schedule .sec_schedule_cont .sec_schedule_item .time::before {
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  z-index: 2;
}
.sec_schedule .sec_schedule_cont .sec_schedule_item .time::after {
  right: 5px;
  width: 2px;
  height: 10rem;
  z-index: 1;
}
.sec_schedule .sec_schedule_cont .sec_schedule_item .action {
  padding-left: 2.5rem;
}

@media screen and (max-width: 767px) {
  .sec_schedule .sec_schedule_cont {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 2rem;
  }
  .sec_schedule .sec_schedule_cont .sec_schedule_item:nth-child(8) .time::after,
  .sec_schedule .sec_schedule_cont .sec_schedule_item:nth-child(n+5).stop .time::after {
    background: #fff;
  }

}
@media print, screen and (min-width: 768px) {
  .sec_schedule .sec_schedule_cont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 2rem 4vw;
  }

  /* 左列：1〜4 */
  .sec_schedule_cont .sec_schedule_item:nth-child(1) { grid-column: 1; grid-row: 1; }
  .sec_schedule_cont .sec_schedule_item:nth-child(2) { grid-column: 1; grid-row: 2; }
  .sec_schedule_cont .sec_schedule_item:nth-child(3) { grid-column: 1; grid-row: 3;}
  .sec_schedule_cont .sec_schedule_item:nth-child(4) { grid-column: 1; grid-row: 4; }

  /* 右列：5〜8（左列と行番号を揃える） */
  .sec_schedule_cont .sec_schedule_item:nth-child(5) { grid-column: 2; grid-row: 1; }
  .sec_schedule_cont .sec_schedule_item:nth-child(6) { grid-column: 2; grid-row: 2; }
  .sec_schedule_cont .sec_schedule_item:nth-child(7) { grid-column: 2; grid-row: 3; }
  .sec_schedule_cont .sec_schedule_item:nth-child(8) { grid-column: 2; grid-row: 4; }

  .sec_schedule .sec_schedule_cont .sec_schedule_item:nth-child(4) .time::after,
  .sec_schedule .sec_schedule_cont .sec_schedule_item:nth-child(8) .time::after,
  .sec_schedule .sec_schedule_cont .sec_schedule_item.stop .time::after {
    top: 12px;
    background: #fff;
  }

}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 sec_past
----------------------------------------------------------------- */
.sec_past {
  position: relative;
  margin-top: var(--margin_size_120);
  z-index: 1;
}

.sec_past .sec_cont {
  display: flex;
  flex-direction: column;
  gap: var(--margin_size_100);
  margin-top: var(--margin_size_60);
}
@media screen and (max-width: 767px) {
  .sec_past .cmn_box_title01::after {
    left: 12rem;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_past .cmn_box_title01::after {
    left: 10rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}



/* -----------------------------------------------------------------
 sec_future
----------------------------------------------------------------- */
.sec_future {
  position: relative;
  margin-top: var(--margin_size_120);
  z-index: 1;
}

.sec_future .sec_cont {
  display: flex;
  flex-direction: column;
  gap: var(--margin_size_100);
  margin-top: var(--margin_size_60);
}
@media screen and (max-width: 767px) {
  .sec_future .cmn_box_title01::after {
    left: 12rem;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_future .cmn_box_title01::after {
    left: 12rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}


/* -----------------------------------------------------------------
 sec_message
----------------------------------------------------------------- */
.sec_message {
  position: relative;
  margin-top: var(--margin_size_80);
  padding: var(--margin_size_80) 0;
  background: #fff;
  border-radius: var(--margin_size_60);
  z-index: 1;
}
.sec_message .sec_inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}
.sec_message .sec_cont {
  display: flex;
  flex-direction: column;
  gap:1.5rem;
  margin-top: var(--margin_size_50);
}
.sec_message .cmn_local_flex:nth-of-type(odd) {
  flex-direction: row;
  margin-left: clamp(-89px, calc((84vw - min(1200px, 90.66vw)) * -0.21), 0px);
}
.sec_message .cmn_local_flex:nth-of-type(even) {
  flex-direction: row-reverse;
  margin-right: clamp(-89px, calc((84vw - min(1200px, 90.66vw)) * -0.21), 0px);

}


@media screen and (max-width: 767px) {
  .sec_message .cmn_box_title01::after {
    left: 9.5rem;
  }
  .sec_message .cmn_local_flex:nth-of-type(odd) {
    flex-direction: row;
    margin-left: auto;
  }
  .sec_message .cmn_local_flex:nth-of-type(even) {
    flex-direction: row-reverse;
    margin-right: auto;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_message {
    padding: var(--margin_size_80) 0;
  }
  .sec_message .cmn_box_title01::after {
    left: 10rem;
  }
}
@media (hover: hover) and (pointer: fine) {
}

/* -----------------------------------------------------------------
 sec_person
----------------------------------------------------------------- */
.sec_person {
  position: relative;
  margin-top: var(--margin_size_120);
  z-index: 1;
}

.sec_person .sec_cont {
  display: flex;
  flex-direction: column;
  gap: var(--margin_size_100);
  margin-top: var(--margin_size_60);
}
.sec_person .cmn_box_title02 .title_main::before {
  bottom: 0;
  background: url("/img/common/deco12.svg") no-repeat;
  background-size: contain;
}
.sec_person .cmn_box_title02 .title_main::after {
  right: -2.5rem;
  bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .sec_person .cmn_local_title02::after {
    left: 12rem;
  }
}
@media print, screen and (min-width: 768px) {
  .sec_person .cmn_local_title02::after {
    left: 10rem;
  }
}
@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;
  }
}