@charset "utf-8";

/* ------------------------------
   CssTemplate: common.css 
   ------------------------------
   TopPage Style
------------------------------ */

/*==================================================================
   TopPage Style
==================================================================*/
/*========== Opening Animation ==========*/
.opening_layer {display: flex;align-items: center;justify-content: center;
 position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;height: 100dvh;/* iOS用（dvh非対応ブラウザは上の100vh） */
 z-index: 9999;background-color: #000;
 transition: opacity 1.2s ease-out;}
.opening_layer video {width: 100%;height: 100%;object-fit: cover;}
.opening_layer.fade-out {
 opacity: 0;
 pointer-events: none;/* フェード中はクリックを透過 */}
 
/*========== top contents ==========*/
/*-- section 共通 --*/
*[class^="blc_"]:not(.blc_mv) {padding:9rem 4rem;}
*[class^="blc_"][data-theme="dark"] {color:#FFF;background-color: #151515;}

/*---------- blc_mv ----------*/
.blc_mv {position: relative;width: 100%;height:min(80vh, 100rem);overflow: hidden;}
.blc_mv .mv_catch{position: absolute;max-width:1000px;bottom: 5rem;left:max(4rem, 50% - 460px);right: max(4rem, 50% - 460px);z-index: 1;}
.blc_mv .mv_catch > h1{display: inline;color: #FFF;font-size: 4rem;font-weight: bold;text-align: left;padding: 0.5rem 2rem 1rem 2rem;line-height: 2.4;
background-image: linear-gradient(#000, #000);
background-repeat: no-repeat;
transition:background-size 1s;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;}

/*-- mv_catch マーカー風アニメーション --*/
@supports selector(:has(*)) { /* :has対応ブラウザでのみ発火 */
.blc_mv .mv_catch > h1{background-size: 0% 100%;}
.blc_mv:has(.mv_images.is-active) .mv_catch > h1{background-size: 100% 100%;}
}

/*-- mv_images 背景切替表示 --*/
.blc_mv .mv_images{position: relative;height: 100%;width: 100%;
 --slide-interval: 5s; /* 表示切替の間隔（30s ÷ 6枚） */
}
.blc_mv .mv_images > picture > .image {position: absolute;inset:0;opacity: 0;
 width: 100%;height: 100%;
 object-fit: cover;
 object-position: center center;
 transform: scale(1);
 animation-duration: 30s;
 animation-delay: calc(var(--i) * var(--slide-interval));
 animation-iteration-count: infinite;
 animation-play-state: paused; /* 初期状態は停止 */
}
.blc_mv .mv_images.is-active > picture > .image {animation-play-state: running;}
.blc_mv .mv_images > picture:nth-of-type(odd) > .image { animation-name: image-zoom-in; }
.blc_mv .mv_images > picture:nth-of-type(even) > .image { animation-name: image-zoom-out; }

/*-- 視差効果を減らす設定時は1枚目を静止表示・キャッチも即表示 --*/
@media (prefers-reduced-motion: reduce) {
.blc_mv .mv_images > picture > .image {animation: none;}
.blc_mv .mv_images > picture:first-of-type > .image {opacity: 1;}
.blc_mv .mv_catch > h1,
.blc_mv:has(.mv_images.is-active) .mv_catch > h1{background-size: 100% 100%;}
}

/*---------- blc_service ----------*/
.blc_service {background:url(../img/bg_hero_light01_sp.png) center top / cover no-repeat;}

/*---------- blc_philosophy ----------*/
.blc_philosophy ul.list_commitment {display:flex;flex-direction:column;gap:2rem 0;flex-wrap:wrap;justify-content:space-between;padding:4rem;margin:9rem -4rem 0 -4rem;background:#000000;overflow:hidden;}
.blc_philosophy ul.list_commitment > li{background:#3e3e3e;color:#FFF;font-size:3rem;font-weight:500;text-align:left;padding:3rem 4rem;line-height:1.8;border-left:0.5rem solid var(--site-color-blue01);
 word-break: keep-all;overflow-wrap: anywhere;/*wbr用*/
 display:flex;align-items:center;min-height:16.8rem;}

/*---------- blc_news ----------*/
.blc_news ul.list_news > li{border-bottom:1px solid #000;}
.blc_news ul.list_news > li:first-child{border-top:1px solid #000;}
/*---- details ----*/
/*-- summary --*/
.blc_news ul.list_news > li > details > summary::-webkit-details-marker{display:none;}/* Safari用 */
.blc_news ul.list_news > li > details > .news_summary{
 display:grid;grid-template-columns:17rem 1fr 4rem;grid-template-rows:auto auto;align-items:center;gap:0.5rem 2rem;padding:5rem 4rem;
 list-style:none;cursor:pointer}
.blc_news ul.list_news > li > details > .news_summary > .label{grid-row:1;grid-column:2;justify-self:start;color:var(--site-color-blue01);animation:heartBeat 1.5s ease-in-out infinite;}
.blc_news ul.list_news > li > details > .news_summary > .date{grid-row:1;grid-column:1;color:#c3c3c3;}
.blc_news ul.list_news > li > details > .news_summary > .ttl{grid-row:2;grid-column:1 / 3;transition:color 0.3s ease;word-break: keep-all;overflow-wrap: anywhere;/*wbr用*/}
.blc_news ul.list_news > li > details > .news_summary::after{grid-row:1 / 3;grid-column:3;
 content:"";width:2.1rem;height:2.1rem;
 background:url(../img/arrow_02.png) center / contain no-repeat;transition:transform 0.3s ease;}
.blc_news ul.list_news > li > details[open] > .news_summary::after{transform:rotate(90deg);}
/*-- news_body --*/
.blc_news ul.list_news > li > details > .news_body{padding: 0 4rem 5rem;}
.blc_news ul.list_news > li > details > .news_body a{color:var(--site-color-blue01)}
/*-- 開閉アニメーション用 --*/
/* 開いた時の到達値はJS（top.js）が本文の実測値を--news-body-hへ設定（JS失敗時は50rem） */
.blc_news ul.list_news > li > details::details-content{
 content-visibility:visible;/* 閉時も描画を維持（閉じるアニメーションと高さ計測のため） */
 max-block-size:0;overflow:hidden;
 transition:max-block-size 0.35s ease;}
.blc_news ul.list_news > li > details[open]::details-content{max-block-size:var(--news-body-h, 50rem);}
/* 閉時は本文へのフォーカス・読み上げを無効化（閉じるアニメーション完了後に不可視化） */
.blc_news ul.list_news > li > details:not([open]) .news_body{visibility:hidden;transition:visibility 0s 0.35s;}

/*---------- blc_recruit ----------*/
.blc_recruit{background:url(../img/top_bg_recruit_sp.jpg) center top / cover no-repeat;}

/*---------- blc_corporate ----------*/
.blc_corporate dl.corpo_info {display:grid;grid-template-columns:auto 1fr;gap:1.5rem 4rem;}
.blc_corporate dl.corpo_info dt {font-weight:500;}
.blc_corporate dl.access_info {display:grid;grid-template-columns:auto 1fr;gap:0.5rem 2rem;}
.blc_corporate dl.access_info dt {font-weight:500;}
.blc_corporate .map iframe {display:block;width:100%;height:50rem;margin-top:4rem;border:0.3rem solid #000;}

/*---------- blc_contact ----------*/
.blc_contact {background:url(../img/top_bg_contact_sp.jpg) center top / cover no-repeat;}


/*==================================================================
   Responsive Style 
==================================================================*/
/*========== 750px以上 ==========*/
@media screen and (min-width:750px) { /* 750px以上 */
/*-- section 共通 --*/
*[class^="blc_"]:not(.blc_mv) {padding:15rem max(4rem, (100% - 920px) / 2);}

/*--block--*/
.blc_mv{height:min(80rem, 100vh);}
.blc_mv .mv_catch > h1{font-size: 3.2rem;}
.blc_service {background-image:url(../img/bg_hero_light01_pc.png);}
.blc_philosophy ul.list_commitment {flex-direction:row;border-radius:1rem;margin:9rem 0 0 0;}
.blc_philosophy ul.list_commitment > li{width:calc(50% - 1rem);font-size:1.6rem;min-height:auto;}

/*-- blc_news：NEWラベルを左の独立カラムに --*/
.blc_news ul.list_news > li > details > .news_summary{grid-template-columns:9rem 1fr 4rem;padding:5rem 0;}
.blc_news ul.list_news > li > details > .news_summary > .label{grid-row:1 / 3;grid-column:1;justify-self:center;}
.blc_news ul.list_news > li > details > .news_summary > .date{grid-column:2;}
.blc_news ul.list_news > li > details > .news_summary > .ttl{grid-column:2;}
.blc_news ul.list_news > li > details > .news_body{padding-left:11rem;/* ラベル列9rem+列gap2rem */}
.blc_news ul.list_news > li:hover > details > .news_summary::after{transform:rotate(90deg);}
.blc_news ul.list_news > li:hover > details > .news_summary > .ttl{color:var(--site-color-blue01);}
@supports selector(:has(*)) {
/* NEWラベルが1件もない場合は余分な余白を調整 */
.blc_news .list_news:not(:has(.label)) .news_summary{grid-template-columns:auto 1fr 4rem;}
.blc_news .list_news:not(:has(.label)) .news_body{padding-left:2rem;}
}

.blc_recruit{background-image:url(../img/top_bg_recruit_pc.jpg);}

.blc_contact{background-image:url(../img/top_bg_contact_pc.jpg);}

/**/} /* 750px以上 End */
/*==================================================================
   Animation
==================================================================*/
/*-- FV_ズームインアニメーション --*/
@keyframes image-zoom-in {
  0% {opacity: 0;transform: scale(1);}
  2% {opacity: 1;transform: scale(1);}
  20% {opacity: 1;transform: scale(1.2);}
  22% {opacity: 0;transform: scale(1.2);}
  100% {opacity: 0;transform: scale(1.2); }
}
/*-- FV_ズームアウトアニメーション --*/
@keyframes image-zoom-out {
  0% {opacity: 0;transform: scale(1.2);}
  2% {opacity: 1;transform: scale(1.2);}
  20% {opacity: 1;transform: scale(1);}
  22% {opacity: 0;transform: scale(1);}
  100% {opacity: 0;transform: scale(1);}
}
/*-- heartBeat --*/
@keyframes heartBeat {
  0% {transform: scale(1);}
  14% {transform: scale(1.1);}
  28% {transform: scale(1);}
  42% {transform: scale(1.1);}
  70% {transform: scale(1);}
}
/*-- fadeInUP inview --*/
.animated_fadeInUp{opacity:0;}
.animated_fadeInUp.is-inview {opacity:1;animation: fadeInUp 0.8s ease-out;}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*-- fadeInRight inview --*/
.animated_fadeInRight{opacity:0;}
.animated_fadeInRight.is-inview {opacity:1;animation: fadeInRight 0.5s ease-out;}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*-- fadeIn inview --*/
.animated_fadeIn{opacity:0;}
.animated_fadeIn.is-inview {opacity:1;animation: fadeIn 0.5s ease-out;}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/*--視差効果を減らす設定時はinviewアニメーションを無効化--*/
@media (prefers-reduced-motion: reduce) {
  .animated_fadeInUp,
  .animated_fadeInRight {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .animated_fadeInUp.is-inview,
  .animated_fadeInRight.is-inview {
    animation: none;
  }
}