@charset "utf-8";
/* ============================================================================
CSS information
 style info :  下層ページ
/* ============================================================================



/* ============================================================================
目次
 下層共通部分
 ・ヘッダー・リードなど
 ・page_menu / タブメニュー
 ・wihite_box / 白ボックスに左右配置
01. about      / 私たちについて（メッセージ・ビジョン・数字）
02. next10      / 次の10年を担う人へ
03. project     / プロジェクトストーリー
04. job         / 社員紹介
05. talk        / 座談会
06. environment      / 働く環境
06. recruit      / 採用情報

 biz / 事業内容
 job / 社員紹介
 support / 教育制度・福利厚生
 recruit / 採用情報
 etc / 汎用ページ

 anime / アニメーション

/* ============================================================================

 下層共通部分
 ヘッダー・リードなど

=============================================================================== */

:root {
  --BG_gradinet:linear-gradient(0deg, #ffffff, #f0f0f0); /*背景のグレーグラデーション*/
}


/* ============================================================================
   00.　共通 道
/* ============================================================================ */
.road-wrapper_lower {
  position: absolute;
  top: -50px;
  left: 50vw;
  z-index: -100;
}
.road-wrapper_lower svg {
  width: 150vw;
  height: auto;
}


/* ========================================================
FVのメインビジュアル（画像・キャッチコピー エリア）
=========================================================== */
#main_visual{
  /*position: relative;*/
  background-position:center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 30vh;
  min-height: 350px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}
#main_visual:before{
  z-index: 0;
}
/* ---------------------------
PC */
@media only screen and (min-width: 901px){
  #main_visual{
    height: 70vh;
    min-height: 600px;
    justify-content: center;
  }
}

/*FV内のキャッチコピー*/
#main_visual #main_catch{/*大見出しと小見出しを中央揃え*/
  display: flex;
  flex-direction: column;
  overflow: visible;
  /*メインキャッチコピーが遅れてフェードイン*/
  animation-fill-mode:both;
  animation-name: maincatch_anime;
  animation-duration:1s;
  animation-delay:0.1s;
}
@keyframes maincatch_anime {
  0% {
    opacity: 0;
    transform :translateX(-30px);
  }
  99.9%, to {
    opacity: 1;
    transform :translateX(0px);
  }
}
#main_visual #main_catch h1{/*その大見出し*/
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 100;
  line-height: 1.2;
  padding: .75em .5em;
  color: #000;
}

#main_visual #main_catch h1 span{
  display: block;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 300;
  line-height: 1.5;

}


/* ========================================================
汎用的なリード部分
=========================================================== */
.read_general .inner {
  width: 90%;
  max-width: 1024px;
  margin: 100px auto;
}
.read_general p{
  margin: 1em auto;
}


/* ========================================================
メインコンテンツ（FV・タブメニューより下の部分 〜 フッターの上まで）
=========================================================== */
main #main_contents{
  margin-top: 0px;
  width: 100%;
  z-index: 0;
  margin-bottom: 160px;
}
section .inner{
  padding-top: 0;
  width: 90%;
  max-width: 1024px;
  margin: 100px auto;
}
/*各セクションの見出し*/
section h2{
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 4rem);
  line-height: 1.25;
  text-align: center;
}
section h3{
  font-weight: 300;
  font-size: clamp(1.5rem, 2vw, 3rem);
  color: var(--common_R);
}

@media only screen and (min-width: 901px){
  main #main_contents{
    margin-bottom: 290px;
  }
  section .inner{
    padding-bottom: 100px;
  }
  /*見出しと本文を左右に振り分ける*/
  .LR_split{
    overflow: hidden;
  }
    .LR_split p{
    width: 650px;
    float: right;
  }
  .fit{
    max-width: 100vw;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}





/* ============================================================================

  下層共通部分
　 page_menu / タブメニュー

=============================================================================== */
/* サブメニュー（ヘッダー nav と同一のピル追従・ホバー） */
aside.subnav {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}


aside.subnav .nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0;
}

aside.subnav .nav-list {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  position: relative;
  --active-anchor: --about-sub-1;
  padding: 10px 0;
  margin: 0;
}

aside.subnav .nav-link {
  display: block;
  padding: 5px 15px;
  text-decoration: none;
  color: #333;
  font-size: 1.4rem;
  text-align: center;
  transition: color 0.3s ease;
  position: relative;
  z-index: 2;
}

aside.subnav .nav-link .arrow_circle {
  display: none;
}

aside.subnav .nav-link:hover {
  color: #ffffff;
  text-decoration: none;
}

aside.subnav .nav-list::before {
  content: '';
  position: absolute;
  position-anchor: var(--active-anchor);
  top: anchor(top);
  left: anchor(left);
  width: anchor-size(width);
  height: anchor-size(height);
  background-color: var(--common_R);
  border-radius: var(--radius-M);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: top, left, width, height, opacity;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

aside.subnav .nav-list.active::before {
  opacity: 1;
}

aside.subnav .nav-list .nav-item.on {
  background: #ddd;
  border-radius: 40px;
}


@media (max-width: 900px) {
  aside.subnav {
    margin: auto; 
    max-width: 90%;
    margin-bottom: -20px;
    border-radius: var(--radius-S);
  }

  aside.subnav .nav-container {
    padding: 0 10px;
  }

  aside.subnav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 0;
  }

  aside.subnav .nav-list::before {
    display: none;
  }

  aside.subnav .nav-item {
    width: 100%;
  }

  aside.subnav .nav-list .nav-item.on {
    border-radius: 10px;
    background: #eee;
    
  }


  aside.subnav .nav-item:last-child {
    border-bottom: none;
  }

  aside.subnav .nav-link {
    display: flex;
    align-items: center;
    padding: 10px 0 10px 10px;
    text-align: left;
  }

  aside.subnav .nav-link .arrow_circle {
    display: inline-flex;
    margin-left: auto;
    transform: scale(0.5);
  }

  aside.subnav .nav-link:hover {
    background-color: #f5f5f5;
    color: var(--common_R);
    border-radius: 10px;
  }
}



/* ============================================================================


  about / 私たちについて


=============================================================================== */
#about_detail h2{
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  padding: 40px 0;
}

#about_detail h3{
  font-size: clamp(2.1rem, 3vw, 3.2rem);
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
}
#about_detail .img-cut{
  border-radius: var(--radius-S);
  width: 100%;
}

#about_detail #main_visual{
  height: 50vh;
  min-height: 500px;
}
/* ---------------------------
SP */
@media only screen and (max-width: 900px){
  #about_detail #main_visual{
    height: 20vh;
    min-height: 300px;
  }
}

#about_detail .contents_inner section{
  max-width: 95%;
}
/* 私たちについて詳細（.contents_inner 配下のショートクラス） */
#about_detail .contents_inner {
  --ad-col: min(900px, 90vw);
  --ad-sheet-pad: clamp(28px, 5vw, 48px);
  /* ヒーロー高さ：幅が狭いほど ~50vh、広いほど ~90vh（400〜1280px の間で線形。外側は clamp で固定） */
  --ad-hero-h: clamp(
    50vh,
    calc(50vh + (100vw - 400px) / 880px * 40vh),
    min(90vh, 1000px)
  );
  background: var(--BG_gradinet);
  margin-top: 0;
  padding-bottom: 60px;
}
#about_detail .contents_inner .hero {
  position: relative;
  width: 100vw;
  max-height: var(--ad-hero-h);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
#about_detail .contents_inner .hero-img {
  display: block;
  width: 100%;
  height: var(--ad-hero-h);
  object-fit: cover;
  object-position: center top;
}
#about_detail .contents_inner .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 55%);
  pointer-events: none;
}
#about_detail.co_message .hero-names {
  position: absolute;
  font-weight: 400;
  line-height: 1.4;
  left: max(5vw, calc((100vw - var(--ad-col)) / 2));
  right: clamp(20px, 4vw, 40px);
  bottom: 50px;
  z-index: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: clamp(16px, 4vw, 48px);
  color: #fff;
}
#about_detail.co_message .hero-names__person {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
#about_detail.co_message .hero-names__person span.cap {
  margin-top: 0;
}
#about_detail.co_message .hero-names__role {
  margin: 0;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.4;
}
#about_detail.co_message .hero-names__name {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 1.6rem);
}
#about_detail .contents_inner .sheet.inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 56px);
  margin-top: -40px;
  margin-bottom: 0;
  margin-left: max(5vw, calc((100vw - var(--ad-col)) / 2));
  margin-right: 0;
  max-width: none;
  width: calc(100vw - max(5vw, calc((100vw - var(--ad-col)) / 2)));
  box-sizing: border-box;
  padding: var(--ad-sheet-pad) 0 clamp(40px, 6vw, 64px) var(--ad-sheet-pad);
  background: #fff;
  border-radius: clamp(20px, 4vw, 40px) 0 0 clamp(20px, 4vw, 40px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}
/* 従来どおりビューポート中央のカラム幅に収める（シート右端は画面右に密着） */
#about_detail .contents_inner section > * {
  max-width: var(--ad-col);
  width: 100%;
  box-sizing: border-box;
  padding: clamp(20px, 4vw, 40px) 0;
}

@media only screen and (max-width: 900px) {
  #about_detail .contents_inner .panels {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
index / メッセージ
=========================================================== */
#about_detail.co_message h3{
  padding-bottom: 0;
  margin-bottom: 0;
}
#about_detail.co_message .name{
  font-size: 1em;
  padding-right: .5em;
  font-weight: 400;
  padding-top: 0;
}
#about_detail.co_message .name span{
  font-size: .8em;
  margin-right: 1em;
}
#about_detail.co_message .message_cut_wrap{
  padding-bottom: 0;
  line-height: 0;
}


/* ========================================================
vision / ビジョン
=========================================================== */
#about_detail.co_vision .contents_inner .sheet.inner {
  gap: 0;
}

#about_detail.co_vision .column{
  display: flex;
  gap:5%;
}
#about_detail.co_vision .column h3{
   background: var(--common_R);
   padding: 0.25em .5em;
   color: #fff;
   border-radius: var(--radius-SS);
   margin: 0;
}
#about_detail.co_vision .img_cut{
  max-width: 500px;
}

#about_detail.co_vision .img_cut img{
  border-radius: var(--radius-SS);
}

@media only screen and (max-width: 900px) {
  #about_detail.co_vision .column{
    display: block;
    gap:5%;
  }
  #about_detail.co_vision .txt_wrap{
    padding:0;
  }
  #about_detail.co_vision .img_cut{
    max-width: 100%;
    padding: 0 0 40px 0;
  }
    #about_detail.co_vision section.column:last-of-type .img_cut{
    padding: 0;
  }
  
}


/* ========================================================
number / 数字で見る
=========================================================== */
#about_detail.co_num .contents_inner .sheet.inner{
  background-color: var(--common_R);
  margin-top: 0;

}
#about_detail.co_num .contents_inner {
  background: #fff;
}

#about_detail.co_num #main_contents .read_general .card{
  margin-bottom: 0;
  padding-bottom: 0;
}

#about_detail.co_num .main_column .card {
  max-width: 1024px;
  margin: auto;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about_detail.co_num h3{
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.2;
}
#about_detail.co_num h3 span{
  font-size: 0.7em;
}

#about_detail.co_num ul.col2{
  flex-wrap: wrap;
  gap: 0;
  max-width: var(--ad-col);
  padding: 0;
  margin: 0;
}
#about_detail.co_num ul.col2 section{
  padding-bottom: 0;
}
#about_detail.co_num ul.col2 li {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #Ffff;
  border-radius: var(--radius-M);
  margin: 1%;
}
#about_detail.co_num .num_wrap{
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
/*数字部分*/
#about_detail.co_num .num {
  color: var(--common_R);
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;

}
#about_detail.co_num .num span {
  font-family: var(--font-en);
  font-size: 5em;
  font-weight: bold;
  font-style: italic;
  margin-right: .1em;
}
#about_detail.co_num .num_wrap img  {
  margin-right: 5px;
}

#about_detail.co_num span.cap br{
  display: none;
}

/* ---------------------------
SP */
@media only screen and (max-width: 900px){
  #about_detail.co_num ul.col2 {
    width: 93%;
  }
}  

/* ---------------------------
PC */
@media only screen and (min-width: 901px){
  #about_detail.co_num .read .catch{
    font-size: 5em;
  }
  #about_detail.co_num .main_column .card {
    padding: 40px 0;
  }
  #about_detail.co_num ul.col2 li{
    width: 48%;
  }
  /*数字部分*/
#about_detail.co_num .num {
  font-size: 2em;
  }
#about_detail.co_num .num span {
  font-size: 3.5em;
  }
}



/* ============================================================================


  about / 私たちについて


=============================================================================== */




/* ============================================================================


  next10 / 次の10年を担う人へ


=============================================================================== */
@media only screen and (min-width: 901px) {
  #next10 #main_visual {
      height: 80vh;
      min-height: 700px;
      justify-content: center;
  }
}


#next10 {
  overflow: hidden;
  position: relative;
  --next10-hero-size: clamp(360px, min(50vw, 58vh), 720px);
}
#next10 #main_catch h1 img {
  display: block;
  width: clamp(240px, 55vw, 520px);
  max-width: 100%;
  height: auto;
}
#next10 .next10_inner {
  overflow: visible;
}
#next10 .next10_inner .hero {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  margin-bottom: clamp(24px, 5vw, 48px);
}
#next10 .next10_inner .hero .round-wrap {
  position: relative;
  z-index: 0;
}
#next10 .next10_inner .hero .next10-round-hero {
  width: var(--next10-hero-size);
  height: var(--next10-hero-size);
}
#next10 .next10_inner .hero .next10-round-hero .round-inner {
  background-image: url(../next10/images/img_main.jpg);
  background-position: 38% 38%;
}
#next10 .next10-round-hero,
#next10 .next10-round-A,
#next10 .next10-round-B,
#next10 .next10-round-C,
#next10 .next10-round-D {
  animation: mv-photo-in 2s 1.5s both;

}
#next10 .next10-round-hero .rotate,
#next10 .next10-round-A .rotate,
#next10 .next10-round-B .rotate,
#next10 .next10-round-C .rotate,
#next10 .next10-round-D .rotate {
  animation: none;
}
#next10 .next10-round-hero .round,
#next10 .next10-round-A .round,
#next10 .next10-round-B .round,
#next10 .next10-round-C .round,
#next10 .next10-round-D .round {
  animation: round_anime_next10 30s linear infinite;
}
#next10 .next10-round-hero .round-inner,
#next10 .next10-round-A .round-inner,
#next10 .next10-round-B .round-inner,
#next10 .next10-round-C .round-inner,
#next10 .next10-round-D .round-inner {
  animation: none;
  transform: scale(1.2);
  background-position: center center;
  background-size: cover;
}
#next10 .inner.sheet {
  overflow: visible;
}
#next10 section.column figure .round-wrap {
  position: relative;
  z-index: 0;
}
#next10 section.column {
  --next10-col-img-size: clamp(400px, 50vw, 560px);
}
#next10 .next10-round-A,
#next10 .next10-round-B,
#next10 .next10-round-C,
#next10 .next10-round-D {
  width: var(--next10-col-img-size);
  height: var(--next10-col-img-size);
}
#next10 .next10-round-A .round-inner {
  background-image: url(../next10/images/img_01.jpg);
}
#next10 .next10-round-B .round-inner {
  background-image: url(../next10/images/img_02.jpg);
}
#next10 .next10-round-C .round-inner {
  background-image: url(../next10/images/img_03.jpg);
}
#next10 .next10-round-D .round-inner {
  background-image: url(../next10/images/img_04.jpg);
}
@keyframes round_anime_next10 {
  0%   { border-radius: 34% 66% 58% 42% / 34% 40% 60% 66%; }
  25%  { border-radius: 52% 58% 46% 54% / 38% 30% 54% 58%; }
  50%  { border-radius: 66% 34% 32% 68% / 50% 68% 30% 52%; }
  75%  { border-radius: 48% 52% 68% 36% / 40% 58% 36% 54%; }
  100% { border-radius: 34% 66% 58% 42% / 34% 42% 60% 66%; }
}
#next10 .next10_inner .read {
  overflow: visible;
  margin: clamp(40px, 6vw, 80px) auto;
  text-align: center;
  color: var(--common_R);
}
#next10 .next10_inner .read .read-blob {
  --next10-read-size: clamp(300px, min(100vw, 90vh), 900px);
  width: var(--next10-read-size);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  animation: mv-photo-in 2s 1.5s both;
}
#next10 .next10_inner .read .read-stack {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
}
#next10 .next10_inner .read .read-layer {
  position: absolute;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  will-change: auto;
}
#next10 .next10_inner .read .read-layer-A {
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 95%;
  height: 95%;
  padding: clamp(24px, 4vw, 40px);
  background: rgba(255, 255, 255, 0.8);
  animation: round_anime_read_A 72s linear infinite;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
}
#next10 .next10_inner .read .read-layer-B {
  z-index: 2;
  width: 97%;
  height: 97%;
  background:  rgba(255, 255, 255, 0.5);
  animation:
    round_anime_read_B 108s linear -36s infinite,
    read_rotate_B 180s linear infinite;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));

}
#next10 .next10_inner .read .read-layer-C {
  z-index: 1;
  width: 100%;
  height: 100%;
  background:  rgba(250, 250, 250, 0.25);
  animation:
    round_anime_read_C 90s linear -18s infinite,
    read_rotate_C 240s linear infinite reverse;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));

}
#next10 .read-blob.is-paused .read-layer {
  animation-play-state: paused !important;
}
@keyframes round_anime_read_A {
  0%   { border-radius: 36% 64% 56% 44% / 36% 42% 58% 64%; }
  50%  { border-radius: 62% 38% 34% 66% / 48% 64% 32% 52%; }
  100% { border-radius: 36% 64% 56% 44% / 36% 42% 58% 64%; }
}
@keyframes round_anime_read_B {
  0%   { border-radius: 40% 60% 48% 52% / 38% 32% 54% 58%; }
  50%  { border-radius: 58% 42% 36% 64% / 52% 66% 30% 48%; }
  100% { border-radius: 40% 60% 48% 52% / 38% 32% 54% 58%; }
}
@keyframes round_anime_read_C {
  0%   { border-radius: 38% 62% 54% 46% / 40% 46% 54% 60%; }
  50%  { border-radius: 56% 44% 38% 62% / 46% 58% 36% 54%; }
  100% { border-radius: 38% 62% 54% 46% / 40% 46% 54% 60%; }
}
@keyframes read_rotate_B {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes read_rotate_C {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#next10 .next10_inner .read h2 {
  font-size: clamp(1.8rem, 2.5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.8;
}
#next10 .next10_inner .read h2 span {
  display: inline;
  font-size: inherit;
}
#next10 .next10_inner .read p {
  margin-top: 1.5em;
}

#next10 section.column {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 5vw, 48px);
  margin-top: clamp(40px, 6vw, 80px);
}
#next10 section.column figure {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

#next10 section.column figure img {
  display: block;
  width: var(--next10-col-img-size);
  height: auto;
}
#next10 section.column .column_txtwrap {
  position: relative;
  z-index: 1;
  background: #ffffffdd;
  border-radius: var(--radius-S);
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
  padding: clamp(28px, 5vw, 48px);
  box-sizing: border-box;
}
#next10 section.column .column_txtwrap h3.title {
  color: var(--common_R);
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 1em;
}
#next10 section.column .column_txtwrap p {
  color: #000;
  font-weight: 300;
  margin: 0;
}
/* ---------------------------
PC */
@media only screen and (min-width: 901px){
  #next10 .inner.sheet {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

  #next10 .next10_inner .hero {
    margin-top: -200px;
    flex-direction: unset;
    justify-content: flex-end;
  }

  #next10 section.column .column_txtwrap {
    flex: 0 0 70%;
    width: 70%;
  }
  #next10 section.column figure {
    flex: 0 0 auto;
    margin-top: -200px;/*コラムの下部に画像を被せる*/
    margin-left: auto;
    margin-right: calc(var(--next10-col-img-size) * -0.2);
  }
  #next10 .inner.sheet > section.column:nth-child(2n) {
    flex-direction: row-reverse;
  }
  #next10 .inner.sheet > section.column:nth-child(2n) figure {
    margin-left: calc(var(--next10-col-img-size) * -0.2);
  }
  #next10 .next10_inner .hero .next10-round-hero {
    margin-right: calc(var(--next10-hero-size) * -0.2);
  }
}

#next10 section.epilogue {
  overflow: visible;
  text-align: center;
  color: var(--common_R);
  margin: clamp(60px, 8vw, 100px) auto 0;
  background: #ffffffd9;
  padding: clamp(1em, 4vw, 6em);
  border-radius: 2em;
}
#next10 section.epilogue h3.titles {
  font-size: clamp(1.8rem, 2.5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 1em;
  color: var(--common_R);
}
#next10 section.epilogue p {
  font-weight: 300;
  margin: 0;
  color: var(--common_R);
}

/* next10 赤い道（load_all 1本） */
#next10 .next10-road {
  position: absolute;
  top: 150vh;
  right: 0;
  z-index: -100;
  pointer-events: none;
  width: 100vw;
  margin-right: calc(100vw * -0.2);
}
#next10 .next10-road svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  overflow: visible;
}
/* ---------------------------
SP */
@media only screen and (max-width: 768px){
  #next10 .next10-road {
    top: 50vh;
    bottom: 0;
    height: auto;
    margin-right: auto;
  }
  #next10 .next10-road svg {
    width: 400%;
    height: 100%;
    transform: scaleY(1.6); 
  }
}


/* ============================================================================


  project / プロジェクトストーリー


=============================================================================== */
#project #main_visual{
  position: absolute;
  height: auto;
  min-height: auto;
}
#project #main_visual #main_catch h1 {
  padding: 0em .5em;
  color: #fff;
}
main#project #main_contents {
  margin-top: 116px;
}
/* ---------------------------
SP */
@media only screen and (max-width: 1000px){
  main#project #main_contents {
    margin-top: 62px;
  }
}  



#project .project_inner {
  --vd-col: min(900px, 90vw);
  --vd-sheet-pad: clamp(28px, 5vw, 48px);
  --vd-hero-h: clamp(50vh, calc(50vh + (100vw - 400px) / 880px * 40vh), min(90vh, 1000px));
  background: var(--BG_gradinet);
  margin-top: 0;
  padding-bottom: 60px;
}
#project .project_inner .hero {
  position: relative;
  width: 100vw;
  max-height: var(--vd-hero-h);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
#project .project_inner .hero-img {
  display: block;
  width: 100%;
  height: var(--vd-hero-h);
  object-fit: cover;
  object-position: center top;
}
#project .project_inner .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #3a667c8c 0%, transparent 55%);
  pointer-events: none;
}

/*リード文*/
#project .project_inner .read {
  max-width: var(--vd-col);
  margin: 0 auto;
  padding: var(--vd-sheet-pad);
  background: #fff;
  border-radius: var(--radius-S);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.025));
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  margin-top: -150px;

}
#project .project_inner .read h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  text-align: left;
  line-height: 1.5;
  color: var(--common_R);
  font-weight: 200;
}

#project .project_inner .inner{
  padding-top: 0;
}

/*プロフィール*/
#project .outline_wrap .inner{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 5%;
}
/* ---------------------------
SP */
@media only screen and (max-width: 1000px){
  #project .outline_wrap .inner {
    display: block;
    margin-top: 1em;
  }
} 

#project .outline_wrap .outline_txtwrap{
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 2em; 
}
/* ---------------------------
PC */
@media only screen and (min-width: 901px){
  #project .outline_wrap .outline_txtwrap{
    max-width: 50%;
  }
}  


#project .project_inner .outline_wrap{
  background: var(--common_R);
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-top: 250px;
  color: #fff;
}
#project .project_inner .outline_wrap h3{
  font-family: var(--font-en);
  font-size: clamp(3.6rem, 5vw, 4.8rem);
  line-height: 1.2;
  text-align: left;
  margin: 0;
  color: #fff;
}
#project .project_inner .outline_wrap .name{
  font-size: 2em;
  margin-right: .5em;
}
#project .project_inner .cut{/*写真カットの角丸*/
  border-radius: var(--radius-M);
}

/*PROLOGUEエリア*/
#project .prologue {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 650px;
  margin: 100px auto;
}
#project .prologue h3 {
  text-align: center;
}
#project .prologue figure{
  margin:50px 0;
}
/*PROLOGUEエリア*/
#project .epilogue {
  max-width: 900px;
  margin: 100px auto 0 auto;
}

/*メインコラムエリア*/
#project .project_inner .inner.sheet {
  overflow: visible;
}

/* SCENE バッジ */
#project .scene_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 17vw, 200px);
  aspect-ratio: 204 / 197;
  background: url(../project/images/scene_bg_mark.png) no-repeat center / contain;
  color: #fff;
  margin-bottom: clamp(16px, 3vw, 28px);
  line-height: 1.1;
  text-align: center;
}

#project .scene_wrap .scene_name {
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 1.8vw, 3.2rem);
  font-weight: 200;
  letter-spacing: 0.08em;
}

#project .scene_wrap .scene_step {
  font-family: var(--font-en);
  font-size: clamp(4rem, 5.5vw, 6.4rem);
  font-weight: 200;
  line-height: 0.95;
}

/* テキスト＋右写真（写真は画面右にはみ出し） */
#project section.column {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: max(5vw, calc((100vw - 1024px) / 2));
  box-sizing: border-box;
  margin-top: clamp(48px, 8vw, 96px);
  overflow: visible;
}

#project section.column .column_main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 48px);
  width: 100%;
}

/* ---------------------------
PC */
@media only screen and (min-width: 901px){
  /* 偶数 column：写真左・本文右（左端はビューポートに合わせる） */
  #project section.column:nth-child(even) {
    margin-left: calc(50% - 50vw);
    padding-left: 0;
    padding-right: max(5vw, calc((100vw - 1024px) / 2));
  }
  #project section.column:nth-child(even) .column_main {
    flex-direction: row-reverse;
  }
  #project section.column:nth-child(even) figure {
    margin-right: 0;
    margin-left: -50px;
  }
  #project section.column:nth-child(even) figure img {
    border-radius:var(--radius-M);
  }
}  


#project section.column .column_txtwrap {
  flex: 0 1 550px;
  max-width: 550px;
  width: 100%;
}

#project section.column .column_txtwrap .scene_wrap {
  margin-left: auto;
  margin-right: auto;
}

#project .title {
  color: var(--common_R);
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 1em;
  text-align: left;
}

#project section.column .column_txtwrap p {
  color: #555;
  line-height: 2;
  margin: 0;
}

#project section.column figure {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  margin-top: 230px;
}

/* 奇数 column：写真は右端へ（gap を侵さない） */
#project section.column:nth-child(odd) figure {
  margin-right: -50px;
}

#project section.column figure img {
  display: block;
  width: 100%;
  min-height: clamp(240px, 32vw, 420px);
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-M);
}

/* ---------------------------
SP */
@media only screen and (max-width: 900px) {
  #project section.column {
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 100px;
    gap: clamp(24px, 5vw, 40px);
  }

  #project section.column .column_main {
    flex-direction: column;
    gap: clamp(24px, 5vw, 40px);
  }

  #project section.column .column_txtwrap {
    flex: none;
    max-width: none;
    width: 100%;
  }

  #project section.column:nth-child(odd) figure,
  #project section.column:nth-child(even) figure {
    width: 100%;
    margin: auto;
    margin-top: 0;
  }

  #project section.column figure img {
    min-height: auto;
    border-radius: var(--radius-M);
  }
}


/* ============================================================================


  job / 社員紹介


=============================================================================== */

#job_index section .inner {
  margin-top: 0;
}

#job_index ul,
#job_detai ul{
list-style: none;
}
/* ========================================================
社員index
=========================================================== */

#job_index #main_contents ul.matrix{
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
}

#job_index h2 {
  color: var(--common_R);
  font-size: clamp(2.8rem, 4vw, 4.8rem);
  font-weight: 300;
  text-align: left;
  border-top: #eee 1px solid;
  margin-top: 30px;
  padding-top: 30px;
}

/*部門リスト*/
#job_index ul.department_list{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#job_index ul.department_list li{
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
#job_index ul.department_list img.mark{
  width: clamp(70px, 10vw, 118px);
  filter: drop-shadow(0 0 8px rgb(0 0 0 / 25%));
}
#job_index .department_list h3{
  color: var(--common_GR);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}
#job_index .department_list p{
  line-height: 1.8;
  margin: auto;
}

/*社員リスト*/
#job_index .voice_card{
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: clamp(20px, 3vw, 40px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow:0 5px 40px rgb(0 0 0 / 20%);
  transition: transform .5s ease, box-shadow .25s ease;
}
#job_index .voice_card:hover{
  transform: translateY(-4px);
  box-shadow:0 0px 20px rgb(0 0 0 / 25%);
}
#job_index .voice_card__img img{
  display: block;
  width: 100%;
  height: clamp(220px, 25vw, 360px);
  object-fit: cover;
  object-position: center;
}
#job_index .voice_card__body{
  position: relative;
  padding: clamp(20px, 2.5vw, 30px);
  padding-bottom: clamp(70px, 7vw, 80px); /* 右下の赤丸分 */
  min-height: 170px;
}
#job_index .voice_card__body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 5%;
  top: 5%;
  background: url(../job/images/name_bg_mark.png) no-repeat;
  background-size: 110px;
  z-index: -1;
}
#job_index .voice_card__name{
  margin: 0;
  font-size: clamp(2.8rem, 4vw, 3.6rem);
  font-weight: 200;
  line-height: 1.5;
  letter-spacing: .04em;
}
#job_index .voice_card__meta{
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.6;
}
#job_index .voice_card__text{
  margin: 1.2em 0 0;
  font-size: 1.4rem;
  line-height: 1.8;
}
#job_index .voice_card__arrow{
  position: absolute;
  right: clamp(16px, 2vw, 22px);
  bottom: clamp(16px, 2vw, 22px);
}
/* 既存 .arrow_circle をカード用に少し小さく */
#job_index .voice_card__arrow::after{
  width: 50px;
  height: 50px;
  font-size: 2rem;
}
/* ---------------------------
SP */
@media only screen and (max-width: 900px){
  #job_index #main_contents ul.matrix{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #job_index .voice_card__arrow::after{
    width: 48px;
    height: 48px;
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 600px){
  #job_index #main_contents ul.matrix{
    grid-template-columns: 1fr;
  }
}


/* ========================================================
社員詳細ページ
=========================================================== */
#job_detail #main_visual{
  height: 50vh;
  min-height: 500px;
}
/* ---------------------------
SP */
@media only screen and (max-width: 900px){
  #job_detail #main_visual{
    height: 20vh;
    min-height: 300px;
  }
}

.profile_qa_wrap{
  max-width: 95%;
}
/* 社員インタビュー詳細（.voice-detail 配下のショートクラス） */
#job_detail .voice-detail {
  --vd-col: min(900px, 90vw);
  --vd-sheet-pad: clamp(28px, 5vw, 48px);
  /* ヒーロー高さ：幅が狭いほど ~50vh、広いほど ~90vh（400〜1280px の間で線形。外側は clamp で固定） */
  --vd-hero-h: clamp(
    50vh,
    calc(50vh + (100vw - 400px) / 880px * 40vh),
    min(90vh, 1000px)
  );
  background: var(--BG_gradinet);
  margin-top: 0;
  padding-bottom: 60px;
}
#job_detail .voice-detail .hero {
  position: relative;
  width: 100vw;
  max-height: var(--vd-hero-h);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
#job_detail .voice-detail .hero-img {
  display: block;
  width: 100%;
  height: var(--vd-hero-h);
  object-fit: cover;
  object-position: center top;
}
#job_detail .voice-detail .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 55%);
  pointer-events: none;
}
#job_detail .voice-detail .hero .catch {
  position: absolute;
  left: max(5vw, calc((100vw - var(--vd-col)) / 2));
  right: clamp(20px, 4vw, 40px);
  bottom: clamp(50px, 5vw, 60px);
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 2.8vw, 4.8rem);
  font-weight: 200;
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
#job_detail .voice-detail .sheet.inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 56px);
  margin-top: -40px;
  margin-bottom: 0;
  margin-left: max(5vw, calc((100vw - var(--vd-col)) / 2));
  margin-right: 0;
  max-width: none;
  width: calc(100vw - max(5vw, calc((100vw - var(--vd-col)) / 2)));
  box-sizing: border-box;
  padding: var(--vd-sheet-pad) 0 clamp(40px, 6vw, 64px) var(--vd-sheet-pad);
  background: #fff;
  border-radius: clamp(20px, 4vw, 40px) 0 0 clamp(20px, 4vw, 40px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}
/* 従来どおりビューポート中央のカラム幅に収める（シート右端は画面右に密着） */
#job_detail .voice-detail .profile_qa_wrap > * {
  max-width: var(--vd-col);
  width: 100%;
  box-sizing: border-box;
  padding: clamp(20px, 4vw, 40px);
}
#job_detail .voice-detail .header {
  position: relative;
  margin: 0;
  padding: clamp(20px, 4vw, 40px) 0;
}
#job_detail .voice-detail .header::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  background: url(../job/images/name_bg_mark.png) no-repeat;
  background-size: contain;
  transform: scale(90%);
  z-index: -1;
}
#job_detail .voice-detail .name {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0.25em;
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  font-weight: 200;
  line-height: 1.2;
  text-align: left;
}
#job_detail .voice-detail .role {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.6;
}
#job_detail .voice-detail .profile {
  padding: clamp(20px, 4vw, 28px) clamp(20px, 4vw, 32px);
  background: var(--common_R);
  border-radius: var(--radius-S);
  color: #fff;
}
#job_detail .voice-detail .profile-label {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  font-weight: 100;
}
#job_detail .voice-detail .profile-text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.8;
}
/* Q&A：汎用 h3 を避けるため .qa-title / .panel-title で上書き */
#job_detail .voice-detail .profile_qa_wrap .qa {
  margin: 0;
  padding: 40px 0;
}
#job_detail .voice-detail .qa-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 12px;
  margin-bottom: 1em;
}
#job_detail .voice-detail .qa-num {
  font-family: var(--font-en);
  font-size: clamp(6rem, 10vw, 16rem);
  font-weight: 300;
  line-height: 1;
  color: var(--common_R);
}
#job_detail .voice-detail .qa-sep {
  display: inline-block;
  width: 1px;
  height: clamp(28px, 5vw, 40px);
  background: var(--common_R);
  flex-shrink: 0;
}
#job_detail .voice-detail .qa-title {
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 300;
  color: var(--common_R);
  border: none;
  padding: 0;
}
#job_detail .voice-detail .qa-body p {
  margin: 0 0 1em;
  line-height: 2;
}
#job_detail .voice-detail .qa-body p:last-child {
  margin-bottom: 0;
}
#job_detail .voice-detail .embed {
  margin: 0;
  padding: clamp(20px, 4vw, 40px) 0;
  overflow: hidden;
}
#job_detail .voice-detail .embed img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
  border-radius: var(--radius-S);
}
#job_detail .voice-detail .panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 40px);
  padding: clamp(24px, 4vw, 36px);
  background: var(--common_R);
  border-radius: var(--radius-S);
  margin-top: 50px;
  color: #fff;
}
#job_detail .voice-detail .panel-title {
  margin: 0 0 1em;
  font-size: clamp(2.1rem, 2vw, 3.2rem);
  font-weight: 300;
  color: #fff;
  border: none;
  padding: 0;
}
#job_detail .voice-detail .schedule,
#job_detail .voice-detail .career,
#job_detail .voice-detail .txtonly {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.4rem;
  line-height: 1.75;
}
#job_detail .voice-detail .schedule::before,
#job_detail .voice-detail .career::before {
  content: "";
  display: block;
  position: absolute;
  left: 73px;
  top: 0;
  height: 100%;
  width: 1px;
  background: #fff;
  opacity: .3;
}

#job_detail .voice-detail .schedule li,
#job_detail .voice-detail .career li,
#job_detail .voice-detail .txtonly li {
  display: flex;
  margin-bottom: 0.65em;
}
#job_detail .voice-detail .schedule li:last-child,
#job_detail .voice-detail .career li:last-child,
#job_detail .voice-detail .txtonly li:last-child
 {
  margin-bottom: 0;
}
#job_detail .voice-detail .schedule li > span.time,
#job_detail .voice-detail .career li > span.time {
  display: block;
  min-width: 4.2em;
  margin-right: 2em;
  font-weight: 700;
  text-align: right;
}
#job_detail .voice-detail .schedule li > span.text,
#job_detail .voice-detail .career li > span.text {
  display: block;
}
#job_detail .voice-detail .career-year {
  display: inline-block;
  min-width: 5.5em;
  margin-right: 0.35em;
  font-weight: 700;
}
#job_detail .voice-detail .actions.inner {
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 40px;
  padding-bottom: 20px;
  max-width: 900px;
}
#job_detail .voice-detail .btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  background: var(--common_R);
  color: #fff !important;
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}
#job_detail .voice-detail .btn-back:hover {
  opacity: 0.88;
}
@media only screen and (max-width: 900px) {
  #job_detail .voice-detail .panels {
    grid-template-columns: 1fr;
  }
}




/* ============================================================================


  talk / 座談会


=============================================================================== */
#talk .talk_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#talk .talk_inner .inner {
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}
#talk section.column {
  overflow: visible;
}
#talk .column_bg {/*メインコラム全体の背景グレー*/
  background: #eee;
  width: 100%;
}


#talk .talk_inner .read h2{
  font-size: clamp(1.8rem, 2.5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.8;
  text-align: center;
  color: var(--common_R);
  margin: 3em 0;
}

#talk .talk_inner .outline_wrap {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-bottom: 100px;
  background: var(--common_R);
  color: #fff;
}
#talk .talk_inner .outline_wrap .inner {
  padding-top: 0;
}
#talk .outline_wrap .outline_txtwrap:has(ul.profile) {
  max-width: 100%;
  font-size: 1.4rem;
}
#talk .talk_inner .outline_wrap h3 {
  font-family: var(--font-en);
  font-size: clamp(3.6rem, 5vw, 4.8rem);
  line-height: 1;
  color: #fff;
  text-align: center;
  margin: 2em auto;
}
#talk .talk_inner .outline_wrap .name {
  font-size: 2em;
  margin-right: .5em;
}
#talk ul.profile {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 6vw, 60px);
  width: 100%;
}
#talk ul.profile li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
}
#talk ul.profile li img {
  border: #fff 3px solid;
  border-radius: 50%;
  filter: drop-shadow(0px 0px 2px white);
}
#talk ul.profile li > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  line-height: 1.8;
}
#talk ul.profile .name {
  display: block;
  margin-bottom: 0.25em;
}
#talk ul.profile .role {
  display: inline-block;
  margin: 0 0 0.75em;
  padding: 0.15em 0.6em;
  border: 1px solid #fff;
  border-radius: var(--radius-S);
  line-height: 1.5;
}
@media only screen and (max-width: 900px) {
  #talk ul.profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#talk .talk_inner .cut{/*写真カットの角丸*/
  border-radius: var(--radius-M);
}
#talk .talk_inner .hero {
  max-width: 1000px;
  box-sizing: border-box;
  padding-inline: 20px;
}
#talk .talk_inner .hero-img.cut {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}



#talk .column_txtwrap{/*カラム内のテキストエリアのマージン*/
  margin: 100px auto;
}
/* =================================
  各column　TALK見出し（マーク＋タイトル）
================================= */
#talk .scene_catch_wrap{
  display: flex;
  align-items: center; /* scene_mark_wrap と h3.title を天地中央 */
  gap: 1em;
  margin: clamp(10px, 7vw, 100px) auto;
}

#talk .scene_mark_wrap{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  width: clamp(150px, 17vw, 200px);
  aspect-ratio: 204 / 197;
  background: url(../talk/images/talk_bg_mark.png) no-repeat center / contain;
  color: #fff;
  line-height: 1.1;
  text-align: right;
  justify-content: flex-end;
  align-items: center;
  padding-right: 1em;
}

#talk .scene_mark_wrap .talk_name{
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 1.8vw, 3.2rem);
  font-weight: 200;
  letter-spacing: 0.08em;
}

#talk .scene_mark_wrap .talk_name::after{
  content: ".";
}

#talk .scene_mark_wrap .scene_step{
  font-family: var(--font-en);
  font-size: clamp(4rem, 5.5vw, 6.4rem);
  font-weight: 200;
  line-height: 0.95;
}

#talk .scene_catch_wrap .title{
  margin: 0;
  color: var(--common_R);
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
}

#talk .scene_catch_wrap .title > span{
  display: block;
  color: #333;
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
  margin-bottom: 0.2em;
}

/* =================================
  各column　顔アイコンなど
================================= */
#talk .column .p_jt{  background: url("../talk/images/icon_jt.png") no-repeat top left; background-size:50px;}
#talk .column .p_jt:before{ content: "J.T."; font-size: 1.2rem;}

#talk .column .p_kiw{  background: url("../talk/images/icon_kiw.png") no-repeat top left; background-size:50px;}
#talk .column .p_kiw:before{ content: "K.IW."; font-size: 1.2rem;}

#talk .column .p_kit{  background: url("../talk/images/icon_kit.png") no-repeat top left; background-size:50px;}
#talk .column .p_kit:before{ content: "K.IT."; font-size: 1.2rem;}

#talk .column .p_in{  background: url("../talk/images/icon_in.png") no-repeat top left; background-size:50px;}
#talk .column .p_in:before{ content: "I.N."; font-size: 1.2rem;}

#talk .column .p_ak{  background: url("../talk/images/icon_ak.png") no-repeat top left; background-size:50px;}
#talk .column .p_ak:before{ content: "A.K."; font-size: 1.2rem;}

#talk .column .p_kn{  background: url("../talk/images/icon_kn.png") no-repeat top left; background-size:50px;}
#talk .column .p_kn:before{ content: "K.N."; font-size: 1.2rem;}

#talk .column .f_icon{position: relative; margin-top: 20px; }
#talk .column .f_icon:before{ top:50px; left: 14px;position: absolute;}
#talk .column p{ line-height: 1.8; margin: 10px; }

#talk .column .txt_wrap{ overflow: hidden;}

#talk .column .balloon_m {
  position: relative;
  display: inline-block;
  margin-left: 70px;
  padding: 7px 10px;
  width: calc(100% - 70px);
  font-size: 16px;
  background: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  filter: drop-shadow(1px 1px 10px rgba(0,0,0,.01));
}
#talk .column .balloon_m:before {
  content: "";
  position: absolute;
  top: 32px;
  left: -25px;
  margin-top: -15px;
  border: 10px solid transparent;
  border-right: 20px solid #fff;
}

#talk .column .txt_wrap{ /*overflow: hidden;*/}
/*偶数は顔アイコンやセリフを右に*/
#talk .column .txt_wrap:nth-of-type(even) .p_jt,
#talk .column .txt_wrap:nth-of-type(even) .p_kiw,
#talk .column .txt_wrap:nth-of-type(even) .p_kit,
#talk .column .txt_wrap:nth-of-type(even) .p_in,
#talk .column .txt_wrap:nth-of-type(even) .p_ak,
#talk .column .txt_wrap:nth-of-type(even) .p_kn{  background-position: top right;}

#talk .column .txt_wrap:nth-of-type(even) .balloon_m {margin-left: 0; margin-right: 70px;}
#talk .column .txt_wrap:nth-of-type(even) .balloon_m:before {
  left:98%;
  right: -25px;
  border-right: none;
  border-left: 20px solid #fff;
}
#talk .column .txt_wrap:nth-of-type(even) .f_icon:before{ left: auto; right: 16px;}/*吹き出し右の名前位置*/

#talk .img_last{
  margin: 100px auto;
}


/*========座談会 PC========*/
@media screen and (min-width:768px){
  main#talk.ca_index .common_bg_wrap:before{
    height:90vh;
  }
  main#talk .column_first{
    height: 90vh;
    margin-top: 0;
    margin-bottom: 50px;
  }
  #talk #catch_wrap{margin: 310px auto 0 auto;    text-align: center;}
  #talk #catch_wrap h3#catch img{width: 50%;}
  #talk #profile_wrap ul.profile {flex-direction: row;}
  #talk #profile_wrap ul.profile li{ width: 22%;}
  #talk .column .txt_wrap:nth-of-type(even) .balloon_m:before {left:99.5%;}

  #talk .column {padding: 20px; max-width: 1000px; margin: 0 auto;}
  main#talk .h3_wrap h3{
    font-size: 300%;
  }

  /*========吹き出し 顔サムネイル========*/
  #talk .column .p_jt,
  #talk .column .p_kiw,
  #talk .column .p_kit,
  #talk .column .p_in,
  #talk .column .p_ak,
  #talk .column .p_kn,
  #talk .column .p_all {background-size:130px; min-height: 155px;}

  #talk .column .f_icon:before{ top:130px; left: 54px; position: absolute;}
  #talk .column p{font-size: 1.4rem; line-height: 2; margin: 20px;}

  #talk .column .balloon_m {
  margin-left: 160px;
  margin-top: 20px;
  width: calc(100% - 160px);
  }
  /*偶数は顔アイコンやセリフを右に*/
  #talk .column .txt_wrap:nth-of-type(even) .p_jt,
  #talk .column .txt_wrap:nth-of-type(even) .p_kiw,
  #talk .column .txt_wrap:nth-of-type(even) .p_kit,
  #talk .column .txt_wrap:nth-of-type(even) .p_in,
  #talk .column .txt_wrap:nth-of-type(even) .p_ak,
  #talk .column .txt_wrap:nth-of-type(even) .p_kn{background-size:130px;}

  #talk .column .txt_wrap:nth-of-type(even) .balloon_m {margin-left: 0; margin-right: 70px;}
  #talk .column .txt_wrap:nth-of-type(even)  .f_icon:before{ left: auto; right: 58px;}

  #talk .column .short{ width: 35%;}

  #talk .column .cut_bottom_margin{margin-bottom: 50px;}/*写真カットが入る吹き出しの下に、次の人が続かないようマージンで調整*/

}


/* ============================================================================


  environment / 働く環境


=============================================================================== */
#environment .cut{ border-radius: var(--radius-M); }
#environment .hero {
  max-width: 1000px;
box-sizing: border-box;
padding-inline: 20px;
}

#environment .environment_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(48px, 8vw, 100px);
}
#environment .environment_inner .inner {
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}
#environment section.column {
  overflow: visible;
}
#environment .column_bg {
  background: linear-gradient(to bottom, #eee 0%, #fff 100%);
  width: 100%;
  margin-top: clamp(40px, 6vw, 80px);
  padding: clamp(48px, 8vw, 100px) 0 clamp(64px, 10vw, 120px);
}
#environment .column_bg .inner.sheet {
  padding-top: 0;
  padding-bottom: 0;
}
#environment .column_txtwrap > p {
  margin: 0 0 clamp(32px, 5vw, 48px);
  text-align: center;
}
#environment .welfare_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 32px);
}
#environment .welfare_list > li {
  background: #fff;
  border-radius: var(--radius-S);
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.05));
  padding: clamp(24px, 4vw, 40px);
  box-sizing: border-box;
}
#environment .welfare_list > li h3.title {
  color: var(--common_R);
  font-size: clamp(2rem, 2vw, 3rem);
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 1em;
}
#environment .welfare_list > li p {
  margin: 0;
  color: #000;
  font-weight: 300;
}
#environment .welfare_list > li > ul {
  margin: 1em 0 0;
  padding-left: 1.5em;
}
#environment .welfare_list > li > ul li {
  margin-top: 0.5em;
}

#environment .environment_inner h2{
  font-size: clamp(1.8rem, 2.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.8;
  text-align: center;
  color: var(--common_R);
  margin: 0 0 1.5em;
}
#environment .environment_inner h2:not(:first-child){
  margin:4.5em 0 1.5em 0;
}



/* ============================================================================


  recruit / 採用情報


=============================================================================== */
#recruit .inner{
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
#recruit h3{
font-size: clamp(2rem, 2vw, 3rem);
border-top: #eee 1px solid;
margin-top: 30px;
padding-top: 30px;
}
#recruit .lead{
  text-align: center;
}

/* 募集要項アコーディオン */
#recruit .accordion_GP .option{
  margin-bottom: 1em;
}
#recruit .accordion_GP .title{
  display: block;
  position: relative;
  background: var(--common_R);
  border-radius: 80px;
  padding: 1.2em 3.5em 1.2em 2em;
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  line-height: 1.5;
  color: #fff;
  margin-top: 0;
  box-sizing: border-box;
}
#recruit .accordion_GP .title:hover{
  background: var(--common_GR);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.35);
}
#recruit .accordion_GP .title::after,
#recruit .accordion_GP .title::before{
  right: 1.6em;
}
#recruit .accordion_GP .content{
  display: block;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.6s ease;
}
#recruit .accordion_GP .toggle:checked + .title + .content{
  max-height: 5000px;
  transition: max-height 1s ease;
}
#recruit .accordion_GP .content-inner{
  padding: 1em 0 1.5em;
}
#recruit .accordion_GP .content-inner .listTABLE{
  margin: 0;
}
@media only screen and (max-width: 900px){
  #recruit .accordion_GP .title{
    padding: 1em 2.8em 1em 1.2em;
  }
}



/* ============================================================================


  etc / 汎用ページ


=============================================================================== */

.etc #main_catch #catch {
  color: var(--common_GR);
}
.etc .page_menu .inner {
  padding: 0;
}
.etc .inner {
  padding: 50px 0;
}
.etc .first_column {
  padding-top: 80px;
}
.etc .first_column .inner {
  padding-top: 0px;
}
.etc h2{
  font-size: clamp(2rem, 3vw, 4rem);
  position: relative;
  margin: 1em auto .5em auto;
  max-width: 1024px;
  line-height: 1.5;
  color: var(--common_R);
}
.etc h3{
  font-size: clamp(1.5rem, 2vw, 3rem);
  color: var(--common_R);
  line-height: 2;
  margin-bottom: auto;
}


/* ---------------------------
PC */
@media only screen and (min-width: 901px){
  .etc h2{
    font-size: 3em;
  }
}


/* ---------------------------
SP */
@media only screen and (max-width: 900px){

  .etc .main_column .inner {
    padding: 40px 0;
  }
  .etc .first_column .inner {
    padding-top: 0px;
  }
}


/*========================================
 アニメーション類
========================================*/
/* スクロールで表示されるアニメーション */
section {
  overflow: hidden;
  position: relative;
  transition: 
  opacity 1s,
  transform 1s;
  background: transparent;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, -50, 0); 
}
section.scrollin{
  opacity: 1;
  transition-delay: .5s;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

/* スクロールで表示されるアニメーション ※「数字で見る」は下から */
.co_num section {
  overflow: hidden;
  position: relative;
  transition: 1s;
  background: transparent;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 50); 
}
.co_num section.scrollin{
  opacity: 1;
  transition-delay: .5s;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

/*写真など出現アニメ*/
section img {
  overflow: hidden;
  position: relative;
  transition: 1s;
  background: transparent;
  opacity: 0;
}
section img.scrollin {
  animation: mask-size 1s cubic-bezier(0.8, 0, 0.1, 1);
  animation-fill-mode: forwards; /* アニメーション完了後の状態を維持 */

}

/*社員紹介の質問吹き出しアニメ*/
#co_interview section h3.q_catch img.scrollin {
  animation: pop 1s cubic-bezier(0.8, 0, 0.1, 1.5);
  animation-fill-mode: forwards; /* アニメーション完了後の状態を維持 */
  animation-delay: .5s; /* 2秒後にアニメーションを開始 */
}