@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* --- Arkheの既存変数を上書き（サイト全体に反映される） --- */
  --ark-title-main: #172242;/* タイトルカラー */
  --ark-color-text: #000;/* 通常テキストの色 */
  --ark-font-base: 'NotoSansJP', sans-serif; 
  
  /* --- 自分専用のオリジナル変数 --- 
      --ark-header_heightの代用      */
  --header-height: 64px;
}

/* 通常テキストや見出しに反映させる例 */
body {
  color: var(--ark-color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
}
h1, h2, h3 {
  color: var(--ark-color-text);
}
a{
  text-decoration: none;
  color: var(--ark-color-text);
}
blockquote{
  padding: 0;
    border: none;
  line-height: 1.6;
}
p{
  line-height: 1.6;
}
ul{
  list-style: none;
    padding-left: 0;
}
figure{
  font-size: 0;
}
img{
  width: 100%;
}
figcaption{
  margin-top: 0;
  opacity: 1;
}
section{
  padding-bottom: 40px;
}
.l-article{
  max-width: 100%;
}

.l-container{
  max-width: 1100px;
    /*padding: 0;*/
}
.l-content__body.l-container{
  max-width: 100%;
  padding: 0;
}

.title-template01{
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
  padding-bottom: 20px;
}
.title-template01 h2{
  font-size: 32px;
}

.title-template02.title-template01{
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
}

.color-orange{
  color: #F9A825;
}
.p-fixBtnWrap{
  display: none;
}
.home .l-content{
  margin-top: calc(var(--header-height) * -1);
  z-index: 2;
}

.shimmer{
  
}

/*----------------------
  [header]
-----------------------*/
.p-drawer{
  background: rgba(23, 34, 66, 0.95);
}
.c-drawerNav, .c-drawerNav .menu-item{
  border: none;
}
.c-drawerNav__a{
  display: flex;
    flex-direction: column;
    gap: 0px;
}
.c-drawerNav__a .__mainText{
  font-size: 28px;
    font-weight: bold;
}
.c-drawerNav__a .__subText{
  margin-left: 0;
    opacity: 1;
    font-size: 16px;
}
.drawernav-corporate{
  display: flex;
    justify-content: center;
}
.drawernav-corporate a{
  width: 100%;
    max-width: 378px;
    text-align: center;
    border: 3px solid #fff;
    color: #fff;
    padding: 12px 0;
    font-size: 16px;
  transition: .3s;
}
.drawernav-corporate a:hover{
  background-color: #fff;
    color: rgba(23, 34, 66, 1);
  border: 3px solid rgba(23, 34, 66, 1);
}
.drawernav-corporate a span{
  position: relative;
    padding-right: 30px;
}
.drawernav-corporate a span::after{
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: calc(50% + 2px);
  right: 0;
  transform: translateY(-50%);
  background: url("../img/icon/footer01.svg") no-repeat center/contain;
}
.drawernav-corporate a:hover span::after{
  background: url("../img/icon/footer02.svg") no-repeat center/contain;
}

.l-header{
  background: transparent;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.l-header.is-scrolled {
  background-color: rgba(255,255,255,.9) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 浮いた感じを出すための軽い影 */
}
[data-btns=r-l] .l-header__body{
  grid-template-areas: "search center left right menu";
}
.header-recruit-text{
  padding-left: 20px;
}
.header-btn-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-right: 20px;
}
/* ===================================================
   ヘッダーボタン専用：Shimmerデザイン
=================================================== */

/* 1. 全体コンテナの統合 */
.header-btn.shimmer {
    --transition: 0.25s;
    --spark: 1.8s;
    --cut: 0.1em;
    --active: 0;
    --scale: 0;
    
    position: relative;
    width: 200px;
    height: 50px;
    display: grid !important; /* 中央配置のため */
    place-items: center;
    padding: 0 !important;
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow var(--transition);
    transform: none !important;
}

/* 2. 背景色の出し分け（shimmerの計算用変数） */
.header-btn.-outline { 
  --bg: #f2f2f2;
  --bg-hover: #e6e6e6;
}
.header-btn.-fill{
  --bg: var(--ark-title-main);
  --bg-hover: #1a1a1a;
}

/* 3. 光の回転部分 (spark) */
.header-btn.shimmer .spark__container {
    position: absolute;
    inset: 0;
    border-radius: 5px;
}
.header-btn.shimmer .spark {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    rotate: 0deg;
    overflow: hidden;
    mask: linear-gradient(white, transparent 50%);
    animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}
.header-btn.shimmer .spark:before {
    content: "";
    position: absolute;
    width: 200%;
    aspect-ratio: 1;
    inset: 0 auto auto 50%;
    translate: -50% -15%;
    background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
    animation: rotate var(--spark) linear infinite both;
}

/* 4. 背景色の座布団 (backdrop) */
.header-btn.shimmer .backdrop {
    position: absolute;
    inset: var(--cut); /* 0.1em分だけ光を縁に見せる */
    background: var(--bg);
    border-radius: 5px;
    z-index: 0;
  transition: background 0.3s ease;
}
.header-btn.shimmer:hover .backdrop {
    background: var(--bg-hover);
}

/* 5. テキストとアイコンの統合設定 */
.header-btn.shimmer .text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    padding-left: 38px; /* アイコンのスペース */
    line-height: 1;
}

/* アイコン（疑似要素はここだけにする） */
.header-btn.shimmer .text::before {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* --- 個別スタイル（白背景） --- */
.header-btn.-outline .text { color: #000; }
.header-btn.-outline .text::before {
    background: url("../img/icon/header01.svg") no-repeat center/contain;
}

/* --- 個別スタイル（メインカラー背景） --- */
.header-btn.-fill .text { color: #fff; }
.header-btn.-fill .text::before {
    background: url("../img/icon/header02.svg") no-repeat center/contain;
}

/* ホバー時の挙動 */
.header-btn.shimmer:hover {
    --active: 1;
    --scale: 0;
}

/* --- アニメーション定義（一度書いてあれば重複不要） --- */
@keyframes flip { to { rotate: 360deg; } }
@keyframes rotate { to { transform: rotate(90deg); } }

/*----------------------
  [header]ここまで
-----------------------*/

/*----------------------
  [top]top-mainvisual
-----------------------*/
/* -------------------------------------------
   メインビジュアル大枠
------------------------------------------- */
.top-mainvisual {
  position: relative;
  width: 100%;
  height: 100vh; /* 画面いっぱいの高さ */
  min-height: 700px;
  overflow: hidden;
  background-color: #333;
}

/* -------------------------------------------
   ① 背景用Swiper（一番後ろ）
------------------------------------------- */
.top-bg-swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.top-bg-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------
   ② 斜めの帯用Swiper（中間層）
------------------------------------------- */
.diagonal-slide-wrap {
  position: absolute;
  bottom: 0%; 
  left: -10%; /* 画面外まで広げる */
  width: 120%; /* 斜めにしても画面端が見えないように長めにする */
  transform: rotate(-10deg); /* 角度（Figmaに合わせて調整してください） */
  transform-origin: center;
  z-index: 5;
  
  /* 半透明の帯と白線 */
  background: rgba(23, 34, 66, 0.8);
  /*border-top: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);*/
  padding: 50px 0;
  display: flex;
  align-items: center;
}
.diagonal-slide-wrap::before, 
.diagonal-slide-wrap::after{
  content: "";
  width: 100%;
  height: 5px;
  background-color: #fff;
  position: absolute;
  z-index: 1;
}
.diagonal-slide-wrap::before{
  top: 10px;
}
.diagonal-slide-wrap::after{
  bottom: 10px;
}

/* 「Building the Roads.」の白抜きテキスト */
.diagonal-text {
  /*position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  font-size: 8rem;
  font-weight: bold;*/
  color: transparent;
  -webkit-text-stroke: 2px rgba(23, 34, 66, 0.36);
  white-space: nowrap;
  pointer-events: none;
}
.diagonal-text h1{
  font-size: 80px;
    z-index: 5;
  position: absolute;
  color: transparent;
}
.diagonal-text h1.diagonal-text-before{
  bottom: calc(100% - 55px);
    /*left: calc(50% - 50vw + 100px);*/
  left: calc((100% - 1100px) / 2 - 80px);
}
.diagonal-text h1.diagonal-text-after{
  top: calc(100% - 80px);
    /*right: calc(50% - 50vw + 18px);*/
  right: calc((100% - 1100px) / 2 - 80px);
}

/* フィルムのコマ風スライド */
.top-diagonal-swiper {
  width: 100%;
  z-index: 2;
}
.top-diagonal-swiper .swiper-slide {
  width: 250px; /* 画像1枚の幅 */
}
.top-diagonal-swiper .img-frame {
  margin: 0;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.top-diagonal-swiper .img-frame img {
  width: 100%;
  height: 150px; /* 画像の高さ */
  object-fit: cover;
  display: block;
}

/* ★【重要】流れるアニメーションを止めない（等速にする）ためのCSS */
.top-diagonal-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* -------------------------------------------
   ③ テキスト部分（一番手前）
------------------------------------------- */
.top-mainvisual-text {
  position: absolute;
  top: 45%;
  left: calc((100% - 1100px) / 2);
  transform: translateY(-50%);
  z-index: 10;
}
.top-mainvisual-text h1 {
  font-weight: bold;
  line-height: 1.4;
  font-size: 60px;
    margin-bottom: 50px;
}
.top-mainvisual-text h1 .line {
  display: inline-block;
  background-color: var(--ark-title-main);
  color: #fff;
  padding: 5px 25px;
  margin-bottom: 10px;
}
.top-mainvisual-text .color-orange {
  color: #FFB300;
}
.top-mainvisual-text p {
  font-size: 18px;
    font-weight: 400;
  line-height: 1.8;
  margin: 0;
  /* 画像の上でも文字が読みやすいように、薄い白の光彩をつける */
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.9), 0px 0px 20px rgba(255, 255, 255, 0.9);
}
@media screen and (max-width: 1400px){
  .diagonal-text h1.diagonal-text-before{
    left: calc((100% - 1100px) / 2);
  }
  .diagonal-text h1.diagonal-text-after{
    right: calc((100% - 1100px) / 2);
  }
}
@media screen and (max-width: 1199px){
  .top-mainvisual-text{
    left: var(--ark-padding--container);
  }
  .top-mainvisual-text h1{
    font-size: 40px;
    margin-bottom: 30px;
  }
  .diagonal-text h1.diagonal-text-before{
    left: calc(50% - 50vw + 50px);
  }
  .diagonal-text h1.diagonal-text-after{
    right: calc(50% - 50vw + 50px);
  }
}

/* スマホ用の調整（必要に応じて） */
@media screen and (max-width: 767px) {
  .top-mainvisual-text h1 { font-size: 2rem; }
  .top-diagonal-swiper .swiper-slide { width: 150px; }
  .top-diagonal-swiper .img-frame img { height: 100px; }
  .diagonal-text { font-size: 4rem; }
  .diagonal-text h1{
    font-size: 60px;
  }
  .diagonal-text h1.diagonal-text-before{
    left: calc(50% - 50vw + 25px);
  }
  .diagonal-text h1.diagonal-text-after{
    right: calc(50% - 50vw + 25px);
  }
}
@media screen and (max-width: 499px){
  .top-mainvisual-text p {
    font-size: 16px;
  }
  .top-mainvisual-text {
    padding-right: var(--ark-padding--container);
  }
}

/*----------------------
  [top]top-mainvisualここまで
-----------------------*/

/*----------------------
  [information]お知らせ
-----------------------*/
.title-template01::after{
  content: "";
  width: 55px;
  height: 40px;
  background: url("../img/icon/icon-title.svg") no-repeat center/contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  
  animation: engineShake 0.1s infinite alternate steps(2);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.title-template01.is-active::after {
    opacity: 1;
}
@keyframes engineShake {
    0% {
        margin-top: -1px;
    }
    100% {
        margin-top: 1px;
    }
}
.information{
  padding-top: 40px;
  overflow: hidden;
}
.title-template01.js-pull-title {
  opacity: 0;
  /* 画面の左外に配置。あまり大きくしすぎると不自然なので、-150px程度が綺麗です */
  transform: translateX(-150px); 
  transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1), opacity .8s linear;
  position: relative;
}

/* 2. 画面領域に入った時の状態（元の位置に戻る） */
.title-template01.js-pull-title.is-active {
  opacity: 1;
  transform: translateX(0);
}
.top-information-list ul li{
  padding: 12px 0;
}
.top-information-list ul li:not(:last-child){
  border-bottom: 1px dashed #000;
}
.top-information-list ul li a{
  display: flex;
    flex-direction: column;
    gap: 5px;
}
.top-information-list ul li a .time-category{
  display: flex;
    align-items: center;
    gap: 15px;
}
.top-information-list ul li a .time-category .category{
  background-color: var(--ark-title-main);
    border-radius: 9999px;
    padding: 2px 25px;
  color: #fff;
}
.top-information-list ul li a .top-info-title span{
  display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

/*----------------------
  [information]お知らせここまで
-----------------------*/

/*----------------------
  [our culture]求める人物像
-----------------------*/
.culture-feature-bg{
  padding: 0;
  background-image: url("../img/top/culture-feature-bg.png");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.culture .title-template02.title-template01{
  flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.t-c-container-pc.l-container{
  padding: 0;
  position: relative;
    z-index: 1;
}
.top-culture-bg {
    position: relative;
    padding: 35px 0;
    background-color: var(--ark-title-main);
    color: #fff;
    overflow: hidden;
}
.culture .title-template01 h2, 
.top-culture-text h2{
  color: #fff;
}
.top-culture-text h2{
  font-size: 24px;
}
.top-culture-text blockquote{
  padding-top: 20px;
}
.culture .title-template01 h2{
  font-size: 30px;
}
.culture .title-template01::after{
  background: url("../img/icon/icon-title-white.svg") no-repeat center / contain;
  right: auto;
  left: 222px;
    /*transform: translate(50%, -50%);*/
}
.top-culture-bg::before {
    display: none;
}
.top-culture-bg::after{
  content: "";
  background: url("../img/icon/logo.png") no-repeat center/contain;
  width: 347px;
  height: 317px;
  position: absolute;
  left: 0;
  bottom: -5%;
  z-index: 0;
}
.top-culture-grid01 {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.top-culture-img {
  padding-left: 0;
  order: -1;
  padding-right: var(--ark-padding--container);
}
.top-culture-img img {
    width: 100%;
    height: auto;
    border-radius: 0 40px 40px 0;
}
.top-culture-text > h2 {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 15px;
}
.top-culture-grid02{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-top: 25px;
}
.top-culture-card{
  border: 1px solid var(--ark-title-main);
  text-align: center;
  display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 15px;
  background-color: #fff;
}
.top-culture-card figure{
  display: flex;
    justify-content: center;
    align-items: center;
}
.top-culture-card figure img{
  height: 120px;
    object-fit: contain;
}
.top-culture-card h6{
  font-size: 20px;
    line-height: 1.6;
    letter-spacing: 1%;
    font-weight: 500;
    padding-bottom: 15px;
    position: relative;
}
.top-culture-card h6::after{
  content: "";
  width: 85%;
  height: 1px;
  border-bottom: 1px solid #000;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.top-culture-card blockquote{
  text-align: start;
}
/*----------------------
  [our culture]求める人物像ここまで
-----------------------*/

/*----------------------
  [feature]特徴
-----------------------*/
.top-feature-img figure{
  display: flex;
    justify-content: center;
    position: relative;
}
.top-feature-img figure img{
  aspect-ratio: 1 / 1;
    width: 222px;
    border-radius: 9999px;
    object-fit: cover;
    object-position: center;
}
.top-feature-img figure figcaption{
  font-size: 80px;
    position: absolute;
    bottom: 0;
    right: calc(50% - 105px);
    transform: translateX(50%);
    line-height: 1;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
}
.top-feature-grid{
  display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.top-feature-text{
  display: flex;
    flex-direction: column;
    gap: 12px;
}
.top-feature-text h6{
  font-size: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #000;
}
.top-feature-flex{
  display: flex;
    flex-direction: column;
    gap: 30px;
}
.culture-h6-tab{
  display: none;
}
/*----------------------
  [feature]特徴ここまで
-----------------------*/


/*----------------------
  [people]インダストリーオカダの人
-----------------------*/
.people{
  position: relative;
  padding-top: 40px;
}
.people::before{
  content: "";
  background: url("../img/icon/logo02.png") no-repeat center/contain;
  width: 347px;
  height: 317px;
  position: absolute;
  right: -15%;
    top: -20px;
  z-index: 0;
}
.top-people-p br{
  display: none;
}

/* --- [共通・スマホ時] --- */
.top-people-swiper-outer {
  position: relative;
  margin-top: 40px;
}

.top-people-swiper {
  overflow: visible !important; /* 左右のはみ出しを見せる */
}

.p-card {
  background: #fff;
  transition: transform 0.4s ease;
  height: auto;
  border: 1px solid #cccccc;
}
.p-card:hover {
      transform: scale(1.03); /* 少し拡大 */
    }
    .p-card:hover .p-card__catch {
      background: #172242; /* 背景反転：紺 */
      color: #fff;         /* 文字反転：白 */
    }

/* 画像部分とキャッチコピー */
.p-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.p-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 縦書きテキストボックス */
.p-card__catch {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #fff; /* 初期：白背景 */
  color: #172242;    /* 初期：紺文字 */
  padding: 15px 10px;
  writing-mode: vertical-rl;
  font-weight: 600;
    font-size: 16px;
  letter-spacing: 0.1em;
  transition: all 0.4s ease;
  z-index: 2;
}

.p-card__catch p {
  margin: 0;
}

/* 下部プロフィール情報 */
.p-card__info {
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
    gap: 10px;
}

.p-card__name {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.p-card__meta {
  text-align: center;
    border-left: 1px solid #000;
    padding-left: 10px;
}

.p-card__label {
  display: inline-block;
  background: var(--ark-title-main);
  color: #fff;
  font-size: 15px;
    width: 100%;
  padding: 2px 12px;
  border-radius: 4px;
  margin-bottom: 5px;
}

.p-card__year {
  display: block;
  font-size: 15px;
}

/* --- 矢印カスタマイズ --- */
.p-swiper-prev,
.p-swiper-next {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  border: 1px solid var(--ark-title-main);
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url("../img/icon/people-arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transition: all 0.3s ease;
}


/* Swiperデフォルトの矢印（>）を消す */
.p-swiper-prev::after,
.p-swiper-next::after {
  display: none !important;
}

/* nextは右向きに反転させる */
.p-swiper-next {
  transform: rotate(180deg);
}

/* ホバー時に色を反転させるなど */
/*.p-swiper-prev:hover,
.p-swiper-next:hover {
  background-color: var(--ark-title-main);
  filter: brightness(0) invert(1);
}*/

/* --- モーダル基本設定 --- */
.p-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.p-modal.is-active {
  opacity: 1;
  visibility: visible;
}

.p-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(23, 34, 66, 0.8);
}

.p-modal__container {
  position: relative;
  width: 90%;
  max-width: 700px;
  max-height: 70vh;
  background: #fff;
  z-index: 1;
  overflow-y: auto;
  border-radius: 8px;
  /* 下から上にフェードインの初期状態 */
  transform: translateY(50px);
  transition: transform 0.4s ease;
}

.p-modal.is-active .p-modal__container {
  transform: translateY(0);
}

/* モーダル内部デザイン */
.p-modal__close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 10;
}
.p-modal__close span, .p-modal__close span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #333;
}
.p-modal__close span { transform: rotate(45deg); }
.p-modal__close span::before { transform: rotate(-90deg); }

.p-modal__content {
  padding: 40px 20px;
}

.p-modal__header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  border-bottom: 2px solid #f4f4f4;
  padding-bottom: 20px;
}

.p-modal__img {
  width: 150px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.p-modal__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.p-modal__profile {
  text-align: center;
}

.p-modal__name {
  font-size: 24px;
  margin: 10px 0;
}

.p-modal__body .p-modal__q {
  margin-bottom: 25px;
}

.p-modal__body h4 {
  color: var(--ark-title-main);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  border-left: 4px solid var(--ark-title-main);
  padding-left: 10px;
}

/* --- [タブレット・PC] --- */
@media screen and (min-width: 768px) {
  .p-modal__header {
    flex-direction: row;
    align-items: center;
  }
  .p-modal__img {
    margin: 0;
  }
  .p-modal__profile {
    text-align: left;
  }
  .p-modal__content {
    padding: 50px;
  }
}

/*----------------------
  [people]インダストリーオカダの人ここまで
-----------------------*/

/*----------------------
  [data]数字で知る
-----------------------*/
.data-welfare-bg {
    /* 背景色を下に敷く */
    background-color: #f7f9fb;

    /* 背景画像の設定 */
    background-image: url("../img/top/data-bg.webp");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain; /* 横幅いっぱいに収める */

    /* 背景の位置調整：
       横は中央(center)、縦はヘッダーの高さ分(var(--ark-header_height))下にずらす 
    */
    background-position: center calc(var(--ark-header_height));

    /* セクション自体の余白調整：
       画像が表示される領域を確保するため、上にヘッダー分＋画像高さ分のpaddingを持たせるか、
       中身のコンテンツ量に応じて調整してください。
    */
    /*padding-top: calc(var(--ark-header_height) + 50px); */
  padding-top: 40px; 
}
body.admin-bar .data-welfare-bg{
  background-position: center calc(var(--wp-admin--admin-bar--height) + var(--header-height));
}
.data{
  /*background-color: #f7f9fb;*/
}
.top-data-grid{
  display: grid;
  /*grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);*/
  grid-template-columns: 1fr;
  gap: 15px;
}

.top-data-card{
  border: 1px solid #d4d4d4;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 250px;
    gap: 20px;
    padding: 20px;
}
.top-data-card .data-contents{
  background-color: var(--ark-title-main);
    color: #fff;
    font-size: 20px;
    border-radius: 9999px;
    padding: 3px 15px;
}
.t-d-c-img{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.t-d-c-img figure img{
  aspect-ratio: 1 / 1;
    width: 80px;
    object-fit: contain;
}
.t-d-c-img span{
  font-size: 32px;
    font-weight: 400;
}
.top-data-card p{
  text-align: center;
}
.top-data-card01.top-data-card p br{
  display: none;
}

/*.top-data-card01 { grid-area: 1 / 1 / 2 / 2; }
.top-data-card02 { grid-area: 1 / 2 / 2 / 4; }
.top-data-card03 { grid-area: 2 / 1 / 3 / 3; }
.top-data-card04 { grid-area: 2 / 3 / 3 / 4; }
.top-data-card05 { grid-area: 3 / 1 / 4 / 2; }
.top-data-card06 { grid-area: 3 / 2 / 4 / 3; }
.top-data-card07 { grid-area: 3 / 3 / 4 / 4; }
.top-data-card08 { grid-area: 4 / 1 / 5 / 2; }
.top-data-card09 { grid-area: 4 / 2 / 5 / 3; }
.top-data-card010 { grid-area: 4 / 3 / 5 / 4; }*/

.t-d-c-text02-breakdown{
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

.t-d-c-text02-breakdown h6{
  text-align: center;
  font-weight: 400;
  border: 1px solid #000;
  width: fit-content;
  padding: 0 30px;
}

.t-d-c-text02-breakdown p{
  display: flex;
  flex-direction: column;
  width: fit-content;
  text-align: left;
}
.top-data-card.top-data-card02{
  height: 280px;
}
.top-data-card.top-data-card03{
  /*height: 250px;*/
}
.t-d-c-text02{
  display: flex;
    gap: 15px;
  justify-content: center;
}
.t-d-c-text03{
  text-align: center;
}
.t-d-c-text03 p{
  font-size: 20px;
    line-height: 1;
}
.t-d-c-text03 p span{
  font-size: 11px;
}
.top-data-card p.card04-p br{
  display: none;
}


/*----------------------
  [data]数字で知るここまで
-----------------------*/

/*----------------------
  [welfare]福利厚生
-----------------------*/
.welfare{
  /*background-color: #f7f9fb;*/
}
.top-welfare-flex{
  display: flex;
    flex-direction: column;
    gap: 20px;
}
.top-welfare-card{
  border: 1px solid #d4d4d4;
    border-radius: 5px;
    padding: 10px;
  background-color: #fff;
}
.top-welfare-grid{
  display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0;
}
.top-welfare-img figure{
  display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.top-welfare-img figure img{
  aspect-ratio: 1 / 1;
    object-fit: contain;
}
.top-welfare-text{
  display: flex;
    flex-direction: column;
    gap: 3px;
}
.top-welfare-text h6{
  font-size: 20px;
    font-weight: 400;
  position: relative;
  padding: 10px 0 10px 40px;
}
.top-welfare-text h6::before{
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.top-welfare-flex .top-welfare-card:first-child .top-welfare-text h6::before{
  background: url("../img/icon/icon-welfare01.svg") no-repeat center/contain;
}
.top-welfare-flex .top-welfare-card:nth-child(2) .top-welfare-text h6::before{
  background: url("../img/icon/icon-welfare02.svg") no-repeat center/contain;
}
.top-welfare-flex .top-welfare-card:nth-child(3) .top-welfare-text h6::before{
  background: url("../img/icon/icon-welfare03.svg") no-repeat center/contain;
}
.top-welfare-flex .top-welfare-card:nth-child(4) .top-welfare-text h6::before{
  background: url("../img/icon/icon-welfare04.svg") no-repeat center/contain;
}
.top-welfare-flex .top-welfare-card:nth-child(5) .top-welfare-text h6::before{
  background: url("../img/icon/icon-welfare05.svg") no-repeat center/contain;
}
.top-welfare-flex .top-welfare-card:last-child .top-welfare-text h6::before{
  background: url("../img/icon/icon-welfare06.svg") no-repeat center/contain;
}

/*----------------------
  [welfare]福利厚生ここまで
-----------------------*/

/*----------------------
  [job type]職種紹介
-----------------------*/
.job {
  background-color: #f7f9fb;
  background-image: url("../img/top/job-bg02.webp");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: 40px;
}
.job .title-template01 h2, .job .title-template01 span{
  color: #fff;
}
.job .title-template01::after {
  background: url(../img/icon/icon-title-white.svg) no-repeat center / contain;
}

.top-job-wrap{
  background-color: #f2f2f2;
  padding: 20px 15px;
}
.top-job-wrap.top-job-card01{
  margin-bottom: 50px;
}
.top-job-type-btn{
  text-align: center;
  padding-top: 25px;
}

.t-j-t-icon{
  position: relative;
  padding-left: 35px;
}
.t-j-t-icon::before{
  content: "";
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.top-job-type-btn .t-j-t-icon::before{
  background: url("../img/icon/icon-job01.svg") no-repeat center/contain;
}
.top-job-detail .top-job-text:nth-child(2) h6.t-j-t-icon::before{
  background: url("../img/icon/icon-job02.svg") no-repeat center/contain;
}
.top-job-detail .top-job-text:last-child h6.t-j-t-icon::before{
  background: url("../img/icon/icon-job03.svg") no-repeat center/contain;
}
.top-job-text h6{
  font-size: 20px;
}
.top-job-text h6.h6-nowrap{
  white-space: nowrap;
}
.top-job-type-sticky h4{
  font-size: 30px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
  padding-bottom: 20px;
}
.top-job-type-img{
  padding: 12px;
}
.top-job-type-img figure{
  position: relative;
  z-index: 3;
}
.top-job-type-img figure::before{
  content: "";
  width: 102%;
    height: 102%;
    /*background-color: var(--ark-title-main);*/
  background-color: #dddddd;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%) rotate(5deg);
}
.top-job-detail .top-job-text:first-child .top-job-img{
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.top-job-detail .top-job-text:first-child .top-job-img figure{
  display: flex;
    flex-direction: column;
    gap: 5px;
}
.top-job-detail .top-job-text:first-child .top-job-img figure figcaption{
  font-size: 18px;
}
.top-job-text ul{
  list-style: disc;
    padding: var(--ark-list-padding, 0 0 0 1.5em);
  padding-top: 20px;
  border-top: 1px solid #000;
}
.top-job-detail .top-job-text:last-child .top-job-img figure{
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.top-job-grid, .top-job-text{
  display: flex;
    flex-direction: column;
    gap: 15px;
}
.top-job-detail .top-job-text:not(:last-child){
  padding-bottom: 30px;
}
.top-job-detail .top-job-text:last-child .top-job-img{
  padding-top: 20px;
    border-top: 1px solid #000;
}



/* 基本設定と変数 */
.shimmer {
    --transition: 0.25s;
    --spark: 1.8s;
    --cut: 0.1em;
    --active: 0;
  --scale: 0;
    --bg: #f2f2f2;

    /* Arkheのデフォルト打ち消しと整形 */
    display: grid !important;
    place-items: center;
    position: relative;
    overflow: hidden;
    padding: 0.9em 1.3em !important;
    background: var(--bg) !important;
    color: transparent !important; /* テキストは.textで制御するため */
    border-radius: 100px;
    border: 0;
    text-decoration: none;
    box-shadow:
        0 0.05em 0 0 hsl(260 0% 50%) inset,
        0 -0.05em 0 0 hsl(260 0% 0%) inset;
    transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
    scale: calc(1 + (var(--scale) * 0.1));
}

.shimmer:hover {
    --active: 1;
  --scale: 0.3;
}

.shimmer:active {
    scale: 1;
}

/* 光のコンテナ */
.spark__container {
    position: absolute;
    inset: 0;
    border-radius: 100px;
}

/* 回転する光のベース */
.spark {
    position: absolute;
    inset: 0;
    border-radius: 100px;
    rotate: 0deg;
    overflow: hidden;
    mask: linear-gradient(white, transparent 50%);
    animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}

@keyframes flip {
    to { rotate: 360deg; }
}

/* 光の本体（擬似要素） */
.spark:before {
    content: "";
    position: absolute;
    width: 200%;
    aspect-ratio: 1;
    inset: 0 auto auto 50%;
    z-index: -1;
    translate: -50% -15%;
    background: conic-gradient(
        from 0deg,
        transparent 0 340deg,
        white 360deg
    );
    animation: rotate var(--spark) linear infinite both;
}

@keyframes rotate {
    to { transform: rotate(90deg); }
}

/* 背面レイヤー */
.backdrop {
    position: absolute;
    inset: var(--cut);
    background: var(--bg);
    border-radius: 100px;
    transition: background var(--transition);
    z-index: 0;
}

/* テキスト部分 */
.shimmer .text {
    position: relative;
    z-index: 1;
    color: #000;
    font-weight: 500;
  font-size: 18px;
}


/*----------------------
  [job type]職種紹介ここまで
-----------------------*/

/*----------------------
  [join]お試し入社
-----------------------*/
.join{
  background-color: rgba(204, 204, 204, .8);
    position: relative;
  padding: 40px 0;
}
.join::before, .join::after{
  content: "";
  width: 100%;
  height: 5px;
  background-color: #fff;
  position: absolute;
}
.join::before{
  top: 10px;
}
.join::after{
  bottom: 10px;
}
.join .join-container-pc.l-container{
  max-width: 100%;
    padding: 0;
}
.top-join-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.top-join-text{
  display: flex;
    flex-direction: column;
    gap: 20px;
}
.top-join-title{
  position: relative;
}
.top-join-title h1{
  font-size: 40px;
  line-height: 1.3;
}
.top-join-title h1 span{
  color: #f92525;
}
.top-join-title h5{
  position: absolute;
    top: 0;
    right: 5vw;
    text-align: center;
    background-color: var(--ark-title-main);
    color: #fff;
    border-radius: 50%;
    padding: 15px;
    font-size: 24px;
}
.top-join-flex{
  display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.top-join-flex span{
  background-color: #fff;
    font-size: 15px;
    padding: 5px 12px;
    border-radius: 3px;
}

/* スライダー全体のコンテナ */
.top-join-right {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 上段と下段の間隔 */
    overflow: hidden;
}

.swiper-join-container {
    width: 100%;
  pointer-events: none;
}

/* 画像のサイズ調整 */
.swiper-join-container .swiper-slide {
    width: 250px; /* 画像の表示幅 */
    height: auto;
}

.swiper-join-container .swiper-slide img {
    width: 100%;
    object-fit: cover;
  max-width: 250px;
    aspect-ratio: 3 / 2;
}

/* 流れを等速にするための魔法のCSS */
.swiper-join-container .swiper-wrapper {
    transition-timing-function: linear !important;
}

/*----------------------
  [join]お試し入社ここまで
-----------------------*/

/*----------------------
  [entry]エントリー
-----------------------*/
.entry{
  background: var(--ark-title-main);
  padding-top: 40px;
}
.entry .title-template01 h2, 
.entry .title-template01 span{
  color: #fff;
}
.entry .title-template01::after{
  background: url("../img/icon/icon-title-white.svg") no-repeat center / contain;
}
.entry .l-container > p{
  color: #fff;
}

.group-img{
  position: relative;
  padding: 30px 0 50px;
}
.group-img figure{
  position: relative;
}
.group-img figure::before{
  content: "";
  width: 100%;
  height: 100%;
  background-image: radial-gradient(closest-corner, rgba(255, 255, 255, 0.5), rgba(23, 34, 66, 1));
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(20px);
}
.group-img figure::after{
  content: "";
  width: 100%;
  height: 100%;
  background: url("../img/top/entry02.png") no-repeat top/contain;
  position: absolute;
  top: 100%;
  left: 0;
}
.group-img figure img{
  position: relative;
}
.group-img-text{
  color: #fff;
    font-size: 20px;
  /*-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  top: 0;
  right: 0;*/
}
.g-i-t-sp.group-img-text{
  text-align: center;
  position: relative;
    top: -10px;
}
.g-i-t-sp.group-img-text p span:not(.color-yellow){
  background-color: transparent;
  padding: 5px 5px 5px 10px;
}
.g-i-t-pc{
  display: none;
}
.g-i-t-pc.group-img-text p{
  white-space: nowrap;
  letter-spacing: 5px;
}
.group-img-text p span:not(.color-yellow){
  background-color: var(--ark-title-main);
  border: 1px solid #fff;
}
.group-img-text p span.color-yellow{
  color: #ffc700;
}

.top-entry-grid{
  display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}
.top-entry-card{
  position: relative;
  background-color: #fff;
  border: 1px solid #cccccc;
  padding: 30px 15px;
}
.top-entry-grid .top-entry-card:not(:last-child){
  
}
.top-entry-grid .top-entry-card:not(:last-child)::after{
  content: "";
  width: 40px;
  height: 40px;
  background: url("../img/icon/entry-arrow.svg")no-repeat center/contain;
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}
.top-entry-flex{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.t-e-f-img{
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  padding-bottom: 10px;
  position: relative;
  gap: 7px;
}
.t-e-f-img::after{
  content: "";
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #cccccc;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.t-e-f-img figure img{
  width: 60px;
    object-fit: contain;
}
.t-e-f-img span{
  font-size: 20px;
}
.t-e-f-text{
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.t-e-f-text blockquote{
  font-size: 16px;
}
.t-e-f-text a{
  background-color: var(--ark-title-main);
    color: #fff;
    font-size: 14px;
    padding: 10px 20px;
}
.top-entry-flow{
  padding-bottom: 35px;
}

/*----------------------
  [entry]エントリーここまで
-----------------------*/

/*----------------------
  [Snow Monkey Forms]エントリー
-----------------------*/
/*.snow-monkey-wrap{
  background-color: #fff;
}*/
.smf-form{
  display: flex;
    flex-direction: column;
    gap: 25px;
  background-color: #fff;
  padding: 30px var(--ark-padding--container);
}
.smf-item__label__text{
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}
.wp-block-snow-monkey-forms-item{
  display: flex;
    flex-direction: column;
    gap: 3px;
}
.smf-form input{
  border: 1px solid #cccccc;
    width: 100%;
    border-radius: 7px;
}
.smf-action{
  text-align: center;
    padding-top: 30px;
}
/* 1. ラジオボタンの構造を整える */
.smf-radio-buttons-control--horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* ボタン同士の間隔 */
}

/* 2. デフォルトの丸いボタンを隠す */
.smf-radio-button-control__control {
  display: none !important;
}

/* 3. ラベル（テキスト部分）をボタンのデザインにする */
.smf-radio-button-control__label {
  display: inline-block;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 18px;
  line-height: 1;
}

/* 4. マウスホバー時の動作 */
.smf-radio-button-control__label:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 5. 選択された時のデザイン（重要！） */
/* inputがチェックされている隣のラベルの色を変える */
.smf-radio-button-control__control:checked + .smf-radio-button-control__label {
  background-color: var(--ark-title-main); /* Arkheのメインカラーを適用 */
  color: #fff; /* テキストを白に */
  font-weight: bold;
}

/*----------------------
  [Snow Monkey Forms]エントリーここまで
-----------------------*/

/* --- ベース設定 --- */
.fixed-icon {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  text-align: center;
  overflow: visible !important;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.6s;
  isolation: auto !important;
}
.fixed-icon.is-show {
  visibility: visible;
}
.fixed-icon__link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 3px 0 10px;
  background-color: #F9A825;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}

.fixed-icon.is-show .fixed-icon__link {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fixed-icon__title {
  color: var(--ark-title-main);
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
}
.fixed-icon__title br { display: none; }
.fixed-icon__sub {
  background-color: var(--ark-title-main);
  color: #fff !important;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 20px;
}
.fixed-icon__text-sp {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding-top: 10px;
  background-color: #F9A825;
  font-weight: 500;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: #333;
}
.fixed-icon__text-sp .u-red {
  color: #e22727;
  font-size: 18px;
}
.fixed-icon__text-pc {
  display: none;
}
.svg-arch-text {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.svg-arch-text path {
  fill: #ffffff !important;
}
@media screen and (min-width: 1200px) {
  .fixed-icon {
    width: 180px;
    height: 180px;
    left: auto;
    right: 50px;
    bottom: 20px;
  }
  .fixed-icon__text-sp { display: none; }
  .fixed-icon__text-pc {
    display: block;
    position: absolute;
    top: -30px;
    left: 50%;
    width: 260px;
    z-index: 20;
    pointer-events: none;
    mix-blend-mode: difference !important;
    
    /* アニメーション */
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: opacity 0.6s, transform 0.6s;
  }
  .fixed-icon.is-show .fixed-icon__text-pc {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .fixed-icon__link {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }
  .fixed-icon__title { font-size: 35px; }
  .fixed-icon__title br { display: block; }
}

/*----------------------
  [Instagram]
-----------------------*/
.instagram{
  padding-top: 40px;
}
.instagram-wrap{
  max-width: 800px;
  margin: 0 auto;
}

/*----------------------
  [Instagram]ここまで
-----------------------*/

/*----------------------
  [footer]
-----------------------*/
.c-widget__title{
  display: none;
}
.footer-bg{
  background: url("../img/top/footer-bg.webp") no-repeat bottom/cover;
  position: relative;
  z-index: 0;
}
.footer-bg::after{
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(23,34,66,.2);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
.footer-grid{
  position: relative;
  z-index: 3;
}
footer .l-container:not(.footer-container){
  max-width: 100%;
  padding: 0;
}
.footer-grid{
  color: #fff;
  padding: 45px 0 45px;
  display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
.footer-text{
  display: flex;
    flex-direction: column;
    gap: 15px;
}
.footer-img{
  display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-img figure img{
  max-width: 176px;
}
.footer-img h6{
  font-size: 20px;
}
.footer-address{
  font-size: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.footer-sns{
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-sns a{
  position: relative;
  width: 20px;
  height: 20px;
}
.footer-sns a::after{
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.footer-sns a.insta::after{
  background: url("../img/icon/Instagram_Glyph_White.svg") no-repeat center/contain;
}
.footer-sns a.facebook::after{
  background: url("../img/icon/Facebook_Logo_white.svg") no-repeat center/contain;
}

.footer-company{
  text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-company a{
  width: 100%;
    max-width: 380px;
    background-color: var(--ark-title-main);
    border: 3px solid #fff;
    padding: 18px 0;
    font-size: 20px;
}
.footer-company a span{
  position: relative;
  padding-right: 28px;
}
.footer-company a span::after{
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: calc(50% + 2px);
  right: 0;
  transform: translateY(-50%);
  background: url("../img/icon/footer01.svg") no-repeat center/contain;
}
.l-footer__widgets{
  padding: 0;
}
.l-footer__foot{display: none;}
.f-copyright{
  padding-bottom: 30px;
}
.f-copyright p{
  text-align: center;
    font-size: 20px;
    font-weight: 300;
}

/*----------------------
  [footer]ここまで
-----------------------*/

/*----------------------------
  [共通]フェードインアニメーション
-----------------------------*/
/* --- 汎用アニメーション：初期状態 --- */
.u-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}

/* --- 実行状態（JSでクラスが付与された時） --- */
.u-fade-up.is-animated {
    opacity: 1;
    transform: translateY(0);
}

/* 任意：少し遅らせたい時用のオプション（class="u-fade-up delay-02" など） */
.u-fade-up.delay-02 { transition-delay: 0.2s; }
.u-fade-up.delay-04 { transition-delay: 0.4s; }

/*----------------------------
  [共通]フェードインアニメーションここまで
-----------------------------*/

/*----------------------
  [single]
-----------------------*/
.single .l-content__body{
  margin-top: 10px;
  margin-bottom: 10px;
}
.single-time-title p{
  font-size: 20px;
    font-weight: 500;
}
.single-title{
  padding-bottom: 15px;
}
.single-thumbnail{
  padding-bottom: 15px;
  display: flex;
  justify-content: center;
}
.single-thumbnail img{
  max-height: 500px;
  object-fit: contain;
}
.single-detail-text a{
  text-decoration: underline;
}
.single-btn{
  display: flex;
  justify-content: center;
    gap: 20px;
  margin-top: 35px;
}
.single-btn a{
  padding: 4px 15px;
  background-color: var(--ark-title-main);
    color: #fff;
  border-radius: 5px;
    font-size: 16px;
}
.single-btn .single-prev span, 
.single-btn .single-next span{
  position: relative;
}
.single-btn .single-prev span{
  padding-left: 12px;
}
.single-btn .single-next span{
  padding-right: 12px;
}
.single-btn .single-prev span::before, 
.single-btn .single-next span::after{
  content: "";
  width: 7px;
  height: 13px;
  background: url("../img/icon/single-arrow.svg") no-repeat center/contain;
  position: absolute;
  top: 7px;
  /*transform: translateY(-50%);*/
  z-index: 1;
}
.single-btn .single-prev span::before{
  left: 0;
} 
.single-btn .single-next span::after{
  right: 0;
  transform: rotate(180deg);
}
.single-prev a, .single-next a{
  position: relative;
    top: 5px;
}
.single-prev, .single-next{
  min-width: 75px;
}

.archive .l-content__body.l-container{
  margin-top: 10px;
  margin-bottom: 10px;
  max-width: 1100px;
  padding-left: var(--ark-padding--container);
    padding-right: var(--ark-padding--container);
}

/*----------------------
  [single]ここまで
-----------------------*/

/*----------------------
  [single]募集要項
-----------------------*/
/* --- [共通・スマホ時] --- */
.p-recruit-detail {
  padding: 10px 0 30px;
}

.p-recruit-sub-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ark-title-main);
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}

.p-recruit-sub-title span {
  font-size: 14px;
  color: #999;
  font-weight: 500;
  margin-top: 5px;
}

/* 募集要項テーブル */
.p-recruit-table {
  border-top: 1px solid #ccc;
  margin-bottom: 60px;
}

.p-recruit-table__row {
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}

.p-recruit-table__label {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
  color: #172242;
  position: relative;
  padding-left: 15px;
}

.p-recruit-table__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 4px;
  height: 1.2em;
  background: var(--ark-title-main);
}

.p-recruit-table__data {
  font-size: 15px;
  line-height: 1.8;
  margin-left: 0;
}

/* 記事本文エリア */
.p-recruit-entry {
  line-height: 2;
}

.p-recruit-entry h3 {
  font-size: 20px;
  margin-top: 40px;
  border-bottom: 2px solid #eee;
}

/* 戻るボタン */
.p-recruit-back {
  margin-top: 60px;
  text-align: center;
  display: flex;
    justify-content: center;
  flex-direction: column;
    gap: 20px;
}
.p-recruit-back a{
  width: 100%;
    /*max-width: 333px;*/
}

/* --- [タブレット時 (768px以上)] --- */
@media screen and (min-width: 768px) {
  .p-recruit-detail {
    padding: 10px 0 30px;
  }

  .p-recruit-table__row {
    display: flex;
    padding: 30px 0;
  }

  .p-recruit-table__label {
    width: 250px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .p-recruit-table__data {
    font-size: 16px;
  }
  
  .p-recruit-back{
    flex-direction: row;
  }
  .p-recruit-back a{
    max-width: 333px;
  }
}

/* --- [PC時 (1200px以上)] --- */
@media screen and (min-width: 1200px) {
  .p-recruit-container {
    max-width: 1000px; /* テーブルが広がりすぎないよう調整 */
    margin: 0 auto;
  }

  /*.p-recruit-detail {
    padding: 100px 0;
  }*/

  .p-recruit-sub-title {
    font-size: 32px;
  }
}

/*----------------------
  [single]募集要項ここまで
-----------------------*/