/* ==========================================================================
   全体設定
   ========================================================================== */
*{
   box-sizing: border-box;
}

header{
   padding:0.5% 4%;
   position: fixed;
   top: 0;
   width: 100%;
   background-color: #fff;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index:999;
}

.scrapr_head {
    display: flex !important;
    justify-content: space-between !important; /* 左のロゴと右のメニューを分ける */
    align-items: center !important;
    padding: 0 4% !important;
    height: 80px !important;
    width: 100%;
}

.telop1{
  background: linear-gradient(to right, #f5a500, #eccd52);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.white-space{
  display: block;
  height: 20px;
}
.container_n{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  margin-top:4%;
}

.container_n img{
    display: block;
}

.container_n2{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #eee;
}

.container_n2 img{
    display: block;
}
.btntab,
a.btntab,
button.btntab {
  margin: 0 auto;
  font-size: 1.4rem;
  width:55%;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding:3%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  margin-top:8%;
}

a.btn_22011 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    font-size: 150%;
    margin: auto;
    width: 30%;
    padding: 1rem 4rem;
    font-weight: bold;
    border: 2px solid #F08419;
    background: linear-gradient(to right, #F08419, #EC6917);
    color: #fff;
    border-radius: 50px;
    transition: 0.3s;
    margin-top: 3%;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    white-space: nowrap;
}

a.btn_22011:hover {
    background: #fff;
    border-radius: 50px;
    color: #F08419;
}
a.btn_22012 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	font-size:150%;
	margin: auto;
    width:30%;
	padding: 1rem 4rem;
	font-weight: bold;
	background: linear-gradient(to right, #2C9BD7, #104691);
	color: #fff;
        border: 2px solid #2C9BD7;
	border-radius:50px;
	transition: 0.3s;
	animation: move_a 2s infinite;
    margin-top:3%;
   font-family: 'Zen Kaku Gothic New', sans-serif;
}

a.btn_22012:hover {
    color: #2C9BD7;
background: #fff;
     color: #2C9BD7;
}


a.btntab-border {
  margin-bottom: 12px;
  padding: 10px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 2px solid #000;
  background: -webkit-radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%),
    -webkit-radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%), #fc0;
  background: radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%),
    radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%), #fc0;
  background-position: 0 0, 6px 6px;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: 12px 12px;
}

a.btntab-border span{
  position: relative;
  display: block;
  padding: 1.25rem 3rem;
  color: #000;
  border: 2px solid #000;
  border-radius: 0.5rem;
  background: #fff;
}

.marquee{
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  background: #f8f8f8;
  margin-top:30%;
}

.marquee-inner {
  display: flex;
  white-space: nowrap;
}
.ti_pm{
  position:absolute;
  top:95%;
  border-radius:20px;
  background-color:#f8f8f8;
  width:100%;
  padding-bottom:5%;
  height: 1000px;
}
.marquee-text{
  white-space: nowrap;
  font-weight: bold;
  letter-spacing: 0.05em;
  font-family: 'Bitcount Prop Double', sans-serif !important;
  font-size:500%;
  background: linear-gradient(90deg, #FFD54F, #FFEB3B);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 3%;
}

.tab-ttl{
    font-family: 'Zen Kaku Gothic New', sans-serif;
    text-align:center;
    margin: 0 auto;
    padding:5% 5%;
    width:80%;
    padding-bottom:3%;
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 1.8s ease-out, transform 1.8s ease-out;
    background-color: #f8f8f8;
}

.shake-circle {
  width: 15px;
  height: 15px;
  background-color: #FFD700;
  border-radius: 50%;
  animation: circles 2s ease-in-out infinite;
}

.tab-fl2{
    display: flex;
}
@keyframes circles {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-2px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

.tab-ttl.active{
  opacity: 1;
  transform: translateY(0);
}

.tab-ti{
    background-color: #f8f8f8;
}


.tab-ttl3{
   font-size:130%; 
}

.tab-ttl4{
    font-size:300%;
    font-weight: 900;
    margin-top: 3%;
}


.white-bg{
    background-color: white;
  padding: 0.3em 0.8em;
  display: inline-block;
  border-radius: 6px;
    border-bottom: 6px solid #f5a500; 
}
.tab-ttl1{
    padding-top:5%;
    padding-bottom: 5%;
}

.tab-ttl2{
    font-size:110%;
    padding-top:4%;
}

a.btntab-border:hover{
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}


a.btntab-border2 {
  margin-bottom: 12px;
  padding: 10px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 2px solid #000;
  background: -webkit-radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%),
    -webkit-radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%), #fc0;
  background: radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%),
    radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%), #fc0;
  background-position: 0 0, 6px 6px;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: 12px 12px;
}

a.btntab-border2 span{
  position: relative;
  display: block;
  padding: 1.25rem 3rem;
  color: #000;
  border: 2px solid #000;
  border-radius: 0.5rem;
  background: #fff;
}

a.btntab-border2:hover{
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}


.ziboxtab{
    width:100%;
    margin: 0 auto;
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

.profile-flower {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 200px;
  height: 200px;
}

.person-image {
  width: 100%;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  display: block;
}

.flower-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.petal {
  transform-origin: 0 0;
  opacity: 0;
  transform: scale(0) translateY(0);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.center {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.profile-flower:hover .petal {
  opacity: 1;
  transform: scale(1) translateY(-10px);
}

.profile-flower:hover .center {
  opacity: 0.8;
}
 .image-tab {
            width:70%;
            height:280px;
            overflow: hidden;
            border-radius: 2%;
            margin: 0 auto;
            margin-top: 5%;
        }
 .image-tab img {
            width: 100%;
            height: auto;
            transition: transform 0.5s ease;
        }

.image-tab:hover img {
            transform: scale(1.1);
        }

.arched-date {
    display: block;
    margin: 0 auto;
    padding: 0;
    line-height: 1;
  }

  .arched-date svg {
    display: block;
    margin: 0 auto;
    padding: 0;
    line-height: 1;
    height: 50px;
  }

.zii_tda svg{
  display: block;
  margin: 0 auto;
  padding: 0;
  line-height: 1;
}
.zii_tda{
    font-weight:bold;
    font-size:130%;
    text-align: center;
    display: block;
    margin-top:10%;
}

.tab_ti{
    font-weight: bold;
    font-size:120%;
    width:70%;
    margin: 0 auto;
}

.tab-fl01{
   width:38%;
    padding-right:14px;  
}

.tab-fl02{
   width:40%;
}


.tab-item{
  flex: 1;
}

.tab-item:first-child {
  border-right: 1px solid #eeeeee;
  margin-right: 14px;
}


.tab-fl{
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.tab-ik{
    background-color:#fff;
    border-radius:10px;
    width:90%;
    position: relative;
    padding:5%;
    padding-top:2%;
    margin: 0 auto;
}
.tab-iwa{
    background-color:#fccd33;
    padding:8%;
    position: relative;
    z-index: 1;
    padding-bottom: 5%;
}

.tab-ko1{
    text-align: center;
    margin: 0 auto;
    font-weight:bold;
    color:#fccd33;
    margin-top:5%;
}

.tab-ko2{
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size:150%;
    font-weight:bold;
    text-align: center;
    margin: 0 auto;
    padding-top:3%;
    padding-bottom:5%;
}

.tab-ko3{
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size:200%;
    font-weight:bold;
    text-align: center;
    margin: 0 auto;
    padding-top:11%;
}
 
.tab-ik::before {
 content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 500px;
  background-color: #fff;
  border-top-left-radius: 500px;
  border-top-right-radius: 500px;
  border-bottom: none;
  z-index: -1;
}
.tab-buttons{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1em;
    flex-wrap: wrap;
    margin-top:5em;
  }

  .tab-button{
  font-family: 'Zen Kaku Gothic New', sans-serif;
   width: calc(100% / 4 - 2%);
  height: 46px;
  background-color: #FFF;
  line-height: 40px;
  font-size: 1.5rem;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  border-top: 5px solid #d9d9d9;
	border-radius: 100px;
	cursor: pointer;
  margin: 0 1% 4% 1%;
  position: relative;
overflow: hidden;
  }

.tab-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: shine 2s infinite;
  pointer-events: none;
}

@keyframes shine {
  0% { left: -50%; }
  100% { left: 150%; }
}
  .tab-button.active{
     color: #FFF;
  background: #ff66b2;
  border-top: 0;
  border-bottom: 5px solid #cc4d91;
  background-position: 100% 0;
  box-shadow: 0 0 8px #fff;
  }

  .tab-content{
    display: none;
    font-family: 'Zen Kaku Gothic New', sans-serif;
  }

  .tab-content.active{
    display: block;
  }
.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tab_label {
  color: #13c3ac;
  font-weight: bold;
  border: solid 2px #13c3ac;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  padding: 5px 0;
  margin: 0 5px; 
}

.tab_label:hover {
  opacity: 0.75;
}

.tab_content {
  flex: 100%;
  display: none;
  overflow: hidden;
}

.fade-spa{
    margin-top:2%;
    margin-bottom:2%;
    text-align: center;
}
.fade-text {
  position: relative;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 3rem;
  color: #aaa;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

.fade-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  transition: width 2s ease-out;
  pointer-events: none;
}

.fade-text.active::after {
  width: 100%;
}
    .spacer {
      height:10vh;
    }
input[name="tab_switch"] {
  display: none;
}

.tabs input:checked + .tab_label {
  color: #fff;
  background-color: #13c3ac;
}
.tabs input:checked + .tab_label::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #13c3ac transparent transparent transparent;
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
}

#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content {
  display: block;
}

.tab_content{
  position: relative;
  animation: fadeIn 1s ease;
}
  .interview-item{
    border: 1px solid #ddd;
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 8px;
    background: #fff;
  }
/* 2. ロゴ部分：左端に固定 */
.top_log {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important; /* 幅を自動にして固定 */
    padding-right: 3%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}

.top_log img {
    width: auto !important;
    height: 40px !important; /* ロゴの高さを固定してぼけを防止 */
    margin: 1% 0;
}
/* 3. 右側のナビゲーション＋コンタクトボタンをまとめる枠 */
.top_na {
    display: flex !important;
    width: auto !important; /* 幅を30%などの固定ではなく自動(auto)にする */
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 30px !important; /* メニューとボタンの間隔を確保 */
    flex: 1 !important; /* ロゴ以外の余白をすべて埋めて右に寄せる */
}

.css-mail{
    display:inline-block;
    position:relative;
    width:27px;
    height:16px;
    padding:0;
    background:#fff;
    border-radius:2px;
    text-align: center;
}
.css-mail:before, .css-mail:after{
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}
.css-mail:before{
    border: 14px solid transparent;
    border-top-color: #fcc800;
}
.css-mail:after{
    left: 2px;
    border:12px solid transparent;
    border-top-color: #fff;
}

.custom-post.post-1 { background-color: #f9d5d3; }
.custom-post.post-2 { background-color: #fce5cd; }
.custom-post.post-3 { background-color: #d9ead3; }
.custom-post.post-4 { background-color: #cfe2f3; }
.custom-post.post-5 { background-color: #ead1dc; }
.custom-post.post-6 { background-color: #fff2cc; }
.custom-post.post-7 { background-color: #d0e0e3; }
.custom-post.post-8 { background-color: #f4cccc; }
.custom-post.post-9 { background-color: #e0f7fa; }
.custom-post.post-10 { background-color: #fde9d9; }

#hamburger{ display: none; }

/* 5. コンタクトボタン：位置ズレを解消 */
a.top_btn_01 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 120px !important;
    height: 46px !important;
    margin: 0 !important; /* 以前のmargin-right: -20pxなどをリセット */
    font-size: 14px !important;
    font-weight: bold !important;
    background: #fcc800 !important;
    color: #fff !important;
    border-radius: 4px !important;
    transition: 0.5s;
    text-decoration: none;
    gap: 5px !important; /* ★アイコンと文字の間にスペースを追加 */
}

a.top_btn_01:hover {
    background: #e6b200 !important;
}
.top_ul li {
    flex: none !important;
    white-space: nowrap !important; /* 改行を防ぐ */
}

/* 4. 「働く」「各社のインタビュー」のリスト */
.top_ul {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px !important; /* 項目同士の間隔 */
}
.top_li a {
    text-decoration: none;
    color: #000;
}

.top_ul li + li {
        position: relative;
        margin-left: 30px !important; /* ★ここの数値で間隔を調整してください */
    }
/* 縦線「|」の設定 */
    .top_ul li + li::before {
        content: "";
        display: block;
        height: 1em;
        border-left: 1px solid #999;
        position: absolute;
        top: 0;
        bottom: 0;
        left: -15px; /* 「|」の位置 */
        margin: auto;
        
        /* ★ ここに右側の余白を追加（各社インタビューとの距離） */
        padding-right: 15px !important; 
    }

.pc-nav { display: flex; }

body{
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


.dgi_om{
    padding:5%;
    padding-top:3%;
    display:flex;
    justify-content: space-between;
}


.omi{
    margin-top:8%;
    margin-bottom:8%;
    width:100%;
}



.omi2{
    width:100%;
    background-color:#fae8a8;
    padding-top:4%;
    padding-bottom:8%;
}

.dgi_p{
    font-weight:bold;
    text-align:left;
    width: 20%;
    font-size: 32px;
    color: #333;
    padding-top:7%;
    border-bottom: 3px solid #ef7c00;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
    position: relative;
    padding-left:3%;
    padding-right:3%;
    padding-bottom:5%;
    background-color: #fff;
}

.dgi_di{ width:100%; }
 
.zi_box{
background-color:#ffffff;
width: 30%;
padding:3%;
border:2px solid black;
text-align: center;
border-radius: 15px;
transition: transform 0.3s;
z-index: 1;
}


.zi_km2{
    font-weight:bold;
    border-radius: 30px;
    border:solid 3px #333;
    padding: 2%;
    background-color: #fcc800;
}
.zi_km{
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 2px solid #333;
    color: #333333;
    font-weight:bold;
    display: block;
    font-size:110%;
}

.zi_km::before,
.zi_km::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.zi_km::before { background-color: #333; }

.zi_km::after {
    bottom: -11px;
    background-color: #fff;
}


.news a, .spe a,  .tit a{
display:block;
text-decoration:none;
color:#403f3f;
}
.spe_l{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
width:100%;
margin-bottom:10%;
}

.spe_l .zibox{
    width: 20%;
    transition: border 0.3s ease;
    text-align: center;
    padding:3%;
    margin: 0 auto;
    border: 1px solid #333;
}

.spe_l2{
    display:flex;
    justify-content: flex-end;
    background-color:#fae8a8;
}

 .rounded-image { border-radius:3%; }

 .image-container {
            width:100%;
            height:160px;
            overflow: hidden;
            border-radius: 3%;
            margin-bottom: 10%;
        }
 .image-container img {
            width: 100%;
            height: auto;
            transition: transform 0.5s ease;
        }

.image-container:hover img { transform: scale(1.1); }

 .image-cari {
            width:70%;
            height:300px;
            overflow: hidden;
            border-radius: 3%;
        }
 .image-cari img {
            width: 100%;
            height: auto;
            transition: transform 0.5s ease;
        }

.image-cari:hover img { transform: scale(1.1); }

.zibox2{
    width:19%;
    padding: 3%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}

.ziboxari{
    width:50%;
    display: flex;
    margin: 0 auto;
    justify-content: center;
  align-items: center; 
}

.spe_l .zibox:hover {
    background-color: #eeeeee;
    border-radius: 15px;
}


.d_kz{
position: relative;
  display: inline-block;
  margin-top:10%;
    font-size:200%;
    font-weight: 900;
}
.d_kz:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color:#dc2d20;
  border-radius: 2px;
}


.btn,
a.btn,
button.btn {
  font-size:1rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 5%;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color:#fff;
 margin-top:3%;
}
.dgi_ps{
margin-top:7%;
color:#ef7c00;
font-size:40%;
font-weight: normal;
line-height:-5px;
letter-spacing: -0.5px;
display: block;
background-color: #fff;
}
.zi_ha{
    margin-top:5%;
display: block;
font-weight:bold;
font-size:120%;
text-align: left;
padding-left:5%;
}
 .container {
            position: relative;
            width: 100%;
            height: 100%;
            margin-top:4%;
        }

 .image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

 .image2 {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
.box_top{
    position: absolute;
    bottom: -290px;
    width:55%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin:0 auto;
    margin-bottom:8%;
    background-color:#fcc800;
    border-radius:200px;
    padding:3.5%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 4s ease;
}
.box_top.show{ opacity: 1; }




.box_ce{
z-index: 2;
flex:none;
position: absolute;
top:80px;
}

.box_ce1{
    font-size:100%;
    font-weight:bold;
    color:#fff;
    text-align: center;
    background-color: #fff;
    padding:2%;
    color:#4e72b0;
    margin-bottom:6%;
}

.box_ce2{
    font-size:300%;
    font-weight:bold;
    color:#fff;
    text-align: center;
    margin-top:3%;
}
    
.non-flex-item{
    flex:none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height:50%;
            z-index: 0;
            border-bottom: -1000px;
}
 .non-flex-item svg {
            width: 100%;
            height: auto;
        }
.zi_mi{
    position: relative;
  display: inline-block;
  margin-bottom:1.5em;
  font-weight:bold;
   margin-top:0.5em;
    letter-spacing:3px;
}
.zi_mi:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 45px;
  height: 4px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius:40px;
}

.zi_mi2{
    position: relative;
  display: inline-block;
  font-weight:bold;
    letter-spacing:1px;
}

.zi_mfo{ font-size:160%; }

.zi_mfo2{ font-size:120%; }

.zi_cs{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top:3%;
} 


.zi_cs img{
    width: 100%;
    height: auto;
    display: block;
     transition: border-radius 1s ease;
}



.custom-title, .zi_spedate {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px 5px;
    font-size:80%;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.custom-title { bottom: 0; }

.zi_spedate {
    bottom: 30px;
    letter-spacing:1.5px;
}


.zi_cs img:hover{ border-top-left-radius:10%; }

.zi_slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.zi_slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
   width: 100%;
}
.zi_slide { min-width: 100%; }
.zi_slide img {
    width: 100%;
    height: auto;
    display: block;
}


.prev, .next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    color: rgba(0, 0, 0, 0.5);
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    border-radius:70px;
}

.prev { left: 10px; }

.next { right: 10px; }

.zibutton-10 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: 1em 2em;
    overflow: hidden;
    border: none;
    border-radius:40px;
    background-color: #fcc800;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 5%;
    margin-top: 5%;
}

.zibutton-10::before {
    display: block;
    position: absolute;
    top: -50%;
    left: -30%;
    transform: rotate(30deg);
    width: 70px;
    height: 100px;
    content: '';
    background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    animation: animation-button-10 2s infinite linear;
}

@keyframes animation-button-10 {
    17% { left: 120%; }
    100% { left: 120%; }
}

.zibutton-10::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    content: '';
}

.zibutton-10:hover { background-color: #fdd22b; }


.zibutton-30{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin:0 auto;
    padding: .9em 2em;
    overflow: hidden;
    border: 1px solid #333;
    border-radius:40px;
    background-color: #fff;
    color: #333;
    font-size: 1em;
    font-weight: bold;
}

.zibutton-30:hover {
    background-color: transparent;
    color: #fff;
}

.zibutton-30::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #333;
    content: '';
    transition: width .3s ease;
}

.zibutton-30:hover::before { width: 100%; }

.zibutton-30::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    content: '';
}

.carousel-wrapper {
  overflow-x: auto;
  width:100%;
  margin-top:3%;
    margin-bottom:15%;
}


.carousel-wrapper2 {
  overflow-x: auto;
  width:100%;
  margin-top:3%;
    margin-bottom:5%;
}

.carousel-track{
  display:flex;
 transition: transform 0.5s ease;
  will-change: transform;
}
.zi_dsn a {
  color: #333;
  text-decoration: none;
}

.item {
  margin-right: 10px;
  text-align: center;
  flex: 0 0 20%;
  box-sizing: border-box;
  padding: 10px;
}


.button-29:hover::after { border-color: #fff; }

a { text-decoration: none; }

.popup {
    display: none;
    position: fixed;
    z-index:1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
     background-color: rgb(0,0,0);
     background-color: rgba(0,0,0,0.4);
}

.popup-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.zii_spedate{
    background-color:#333;
    color:#fff;
    padding:1.5% 0;
    width:55%;
    border-radius: 20px;
    margin-bottom: 15px;
    display: block;
    text-align: center;
    font-size:80%;
}

.spe_tito{ font-weight: bold; }


.spe_tito:hover {
            color: #999;
            opacity: 0.7;
        }

.spe_titoari{
    font-weight: bold;
    font-size:120%;
    border:1px solid #333;
    width:90%;
    padding-right: 3%;
}


.spe_titoari:hover {
            color: #999;
            opacity: 0.7;
        }



a.btn-flat {
  overflow: hidden;
　padding: 1.5rem 6rem;
　color: #fff;
  border-radius: 0;
  background: #000;
　font-size:90%;
}

a.btn-flat span { position: relative; }

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 500%;
  content: "";
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
  background: #ef7c00;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

     .zi_box3{
            border-radius: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
}
        .zi_box3 img {
            width: 100%;
            display: block;
             height: auto;
             border-radius: 20px;
        }
        .zi_box3 .zi_dsn {
            padding:5%;
            text-align: center;
        }

.auto-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width:100%;
}

.auto-scroll-container::-webkit-scrollbar { display: none; }

.auto-scroll-container > div {
  flex: 0 0 auto;
  width: 15%;
  margin-right: 10px;
}
.omi_w{ width:100%; }
.dgi_w{
    width:100%;
    margin: 0 auto;
}


.ziwk_date{
    padding-left:5%;
    margin-bottom: 10px;
    display: block;
    text-align: left;
    font-size:90%;
    margin-top: 5%;
}
.ziwk_ka{
    background-color:#f5ae18;
    color:#fff;
    display: inline-block;
    padding: 8px 10px;
    border-radius: 20px;
    display: block;
    text-align: center;
    font-size:80%;
    font-weight: bold;
    margin-top:12%;
}

.mi_work{
    padding-top:5%;
    margin: 0 auto;
}

.mi_work2{
    display:flex;
  align-items: center;
    justify-content: center;
}



.ziwk_ka:hover {
            color: #fff;
            opacity: 0.7;
        }


.spe_tw{
    font-weight: bold;
    text-align: left;
    font-size:110%;
    padding-bottom: 5%;
}


.spe_tw:hover {
            color: #999;
            opacity: 0.7;
        }

.ziwk_fl{
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top:3%;
}

.spe_wk{
            width:100%;
            height:auto;
}


a.mi_view {
  color: #000;
  transition: color 0.3s;
}

a.mi_view:hover { color: rgba(0, 0, 0, 0.5); }
.btn102,
a.btn102,
button.btn102{
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
a.btn--circle {
  width: 60px;
  height: 60px;
  padding: 0;
  background: #fff;
  border-radius: 50%;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

a.btn--circle i {
  font-size: 150%;
  line-height: 60px;
  -webkit-transition: all .3s;
  transition: all .3s;
  letter-spacing: 0;
}
a.btn--circle:hover i { line-height: 55px; }

    
a.btn_18 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    font-size:200%;
    margin: auto;
    width:40%;
    padding: 1rem 4rem;
    font-weight: bold;
    border: 2px solid #003ca0;
    background-color: #003ca0;
    color: #fff;
    border-radius:50px;
    transition: 0.5s;
    margin-top:3%;
    font-size:160%;
}

a.btn_18:hover {
    color:#003ca0;
    background: #fff;
}

.ad-bai{
    padding-bottom:5%;
    background-color:#fccd33;
    padding-top:3%;
}

.ad-banner {
  text-align:center;
  padding-top:5%;
  padding-bottom:4%;
}

.fade-in-on-scroll{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.fade-in-on-scroll.visible{
  opacity: 1;
  transform: translateY(0);
}


.large-text {
  font-size: 36px;
  font-weight: bold;
  margin-top:2%;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.small-text {
  font-size: 18px;
  color: #b3d9ff;
  font-weight: 900;
  text-align: center;
}

.ad-sh{
    margin: 0 auto;
    width:60%;
    border-radius:30px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(90deg, #003a94, #00aaff);
    padding-bottom: 4%;
    background-color: rgba(255, 255, 255, 0.6);
  border:5px solid #ffffff;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

a.btn_19 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	font-size:200%;
	margin: auto;
    width:40%;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #ca151d;
	background-color: #ca151d;
	color: #fff;
	border-radius:50px;
	transition: 0.5s;
    margin-top:3%;
    font-size:160%;
}

a.btn_19:hover {
	color: #ca151d;
	background: #fff;
}
.ad-flb{
   display: flex;
  justify-content: center;
  align-items: center;
   width:80%;
   margin: 0 auto;
}

.ad-babo{
   font-size: 30px;
  font-weight: bold;
  margin: 0 auto;
  text-align:center;
  margin-top:2%;
  background:#fccd33;
  padding-top:5%;
}

.human-story { padding: 60px 20px; }

.human-story .section {
  text-align: center;
  padding: 60px 20px;
  width: 100%;
  margin: 0 auto;
}

.human-story .section h2 {
  font-size: 28px;
  color: #1a73e8;
  margin-bottom: 10px;
}

.human-story .section p {
  font-size: 16px;
  color: #333;
  margin-bottom: 40px;
}

.human-story .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.human-story .card {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  width: 13%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  z-index: 1;
}

.human-story .card img {
  width: 100px;
  height: auto;
  margin-bottom: 10px;
  background-color: #dbe9ff;
  border-radius: 5px;
}

.human-story .card h3 {
  font-size: 13px;
  color: #1a73e8;
  margin-bottom: 10px;
}

.human-story .card p {
  font-size: 13px;
  color: #333;
  margin-bottom: 20px;
}

.human-story .card button {
  background-color: #1a73e8;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 5px;
}

.human-story .card button:hover { background-color: #155dbb; }

.gradient-bg {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  z-index: 0;
}



.tab_ca{
    font-size:90%;
    width:95%;
    margin: 0 auto;
}

.list-btn {
    display: inline-block;
    margin: 40px auto 0;
    padding: 8px 16px;
    background-color: #eee;
    color: #333;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
}

.list-btn:hover{
    background-color:#000000;
    color: #fff;
}

.sns{margin-bottom:20px;display:flex;justify-content: flex-end;
width:20%;margin:0 auto;margin-top:15px;}

.sns div{
padding-right:3px;
padding-bottom:20px;
}

.pprint{
padding-top:5px;
padding-right:30px;
}
.tab-ikind{
    background-color:#fff;
    border-radius:10px;
    width:90%;
    position: relative;
    padding:5%;
    padding-top:2%;
    margin: 0 auto;
    margin-top:5%;
}
.tab-ikind::before {
 content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 500px;
  background-color: #fff;
  border-top-left-radius: 500px;
  border-top-right-radius: 500px;
  border-bottom: none;
  z-index: -1;
}


.image-tab2 {
            width:70%;
            height:500px;
            overflow: hidden;
            border-radius: 2%;
            margin: 0 auto;
            margin-top: 5%;
        }
 .image-tab2 img {
            width: 100%;
            height: auto;
            transition: transform 0.5s ease;
        }

.image-tab2:hover img { transform: scale(1.1); }

.tab-ko12{
    text-align: center;
    margin: 0 auto;
    font-weight:bold;
    color:#fccd33;
    margin-top:3%;
}

.arched-date2 {
    display: block;
    margin: 0 auto;
    padding: 0;
    line-height: 1;
  }

  .arched-date2 svg {
    display: block;
    margin: 0 auto;
    padding: 0;
    line-height: 1;
    height: 50px;
  }

.zii_tda2 svg{
  display: block;
  margin: 0 auto;
  padding: 0;
  line-height: 1;
}
.zii_tda2{
    font-weight:bold;
    font-size:130%;
    text-align: center;
    display: block;
    margin-top:5%;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.tab-ik::before {
    width: 700px;
    height: 350px;
  }

.fade-spa {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }

  .fade-text {
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .tab-ko2 {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-top: 1rem;
  }
 .arched-date {
    left: 90%;
    transform: translateX(-50%);
  }


.btntab, a.btntab, button.btntab 
{ width:80%; }

a.btn_22012 { width:80%; }


a.btn_22011 { width:80%; }
.ad-sh{ width:80%; }

 .box_top2 {
        font-size: 12px;
        width:80%;
    }
}

.page-layout {
    font-family: "Inter", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-between;
    margin: 0 auto;
}

.zibutton-10{ margin-bottom: 3%; }
#grid-container {
    width: 100%;
    border-radius: 0.75rem;
}

#grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 1.5rem;
    width:80%;
    margin: 0 auto;
}

.box {
    padding: 1rem 2rem;
    color: white;
    font-size: 1rem;
    font-weight: 800;
    border-radius: 0.5rem;
    width:95%;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom:1.5%;
    box-sizing: border-box;
}

.zi_box {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
   margin-bottom:0.5%;
}

.box:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.spe_l{ margin-bottom:3%; }

.zi_km{padding: .1em .7em .2em; }

.inwrapper {
    padding-top: clamp(72px, 14vw, 110px);
}

/* ヒーローセクションの高さを抑える */
.zi-lead-hero {
    padding-bottom: 0 !important; /* 下のマージンをリセット */
    height: auto !important;
}

.zi-lead-hero__img {
    height: 40vh !important; /* 画像を画面の40%程度に抑える（PC/スマホ共通） */
    object-fit: cover;
}
.zi-lead-hero__image .zi-lead-hero__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    vertical-align: bottom;
}
/* 説明枠を画像の下ではなく、画像に少し被る程度に引き上げる */
.zi-lead-hero .zi-lead-hero__caption.box_top2 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 90% !important;
    margin: -30px auto 20px !important; /* 画像に30pxだけ被せて上に引き上げる */
    padding: 20px !important;
    border-radius: 20px !important; /* アーチを緩やかにして高さを節約 */
}
.zi-lead-hero .zi_mi2 {
    display: block;
    margin-bottom: 0.75rem;
}
.zi-lead-hero .zi_mibu {
    font-size: clamp(0.8125rem, 1.6vw, 0.9375rem) !important;
    line-height: 1.75;
    text-align: center;
    margin: 0;
    padding: 0;
}

.menu-toggle { display: none; }

.logo-link img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   スマホ版の設定 (767px以下)
   ========================================================================== */
@media screen and (max-width: 767px) {
/* ① 不要なエリアを消す */
    .mi_view2 {
        display: none !important;
    }

    /* ② 白いカード（各社インタビュー）のタイトルを右寄せに整える */
    .dgi_p {
        width: 92% !important; /* 少し幅を広げて右寄せを強調 */
        font-size: 22px !important;
        line-height: 1.5 !important;
        text-align: right !important; /* ★右寄せに変更 */
        padding: 25px 20px !important; /* 右側に少しだけ余白を残す */
        margin: 0 auto !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        border-bottom: 5px solid #ef7c00 !important;
        background-color: #fff !important;
        display: block !important;
    }

    /* ボタンも右側に寄せる */
    .dgi_p .btn-flat {
        padding: 10px 25px !important;
        margin-top: 15px !important;
        font-size: 13px !important;
        width: auto !important;
        display: inline-block !important;
        margin-left: auto; /* 右寄せを確実にする */
    }

    /* オレンジ色の補足テキストも右寄せに */
    .dgi_ps {
        font-size: 11px !important;
        line-height: 1.6 !important;
        margin-top: 12px !important;
        color: #ef7c00 !important;
        display: block !important;
        text-align: right !important; /* ★ここも右寄せ */
        letter-spacing: 0 !important;
    }

    /* セクション全体の余白 */
    .omi2 { padding-top: 25px !important; }

    /* ③ 他セクションの余白維持 */
    .btn_22012 {
        margin-bottom: 50px !important;
    }
    
     /* --- ヘッダー調整 --- */
    .scrapr_head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 10px !important;
        height: 70px !important;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 999;
        background: #fff;
    }

    /* 左側：ロゴの枠（枠線を維持しつつサイズを固定） */
    .top_log {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important; /* 広がらないように固定 */
        padding: 4px 8px !important;
        margin: 0 !important;
        width: fit-content !important;
    }

    .top_log img {
        height: 32px !important; /* 画像の高さを抑えてバランスを取る */
        width: auto !important;
    }

    /* 右側：三本線とコンタクトをまとめる枠 */
    .top_na {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important; /* 三本線とボタンの間の距離 */
        flex: 0 0 auto !important; /* 幅を中身に合わせる */
        width: auto !important;
        margin-left: auto !important;
    }


    /* コンタクトボタン（黄色いボタン）の調整 */
a.top_btn_01 {
        display: flex !important;
        justify-content: center !important; /* 左右中央 */
        align-items: center !important;     /* 上下中央 */
        
        /* PC版の影響をリセット */
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;   /* PC版のpaddingをゼロに */
        margin: 0 !important;    /* PC版のmarginをゼロに */
        gap: 0 !important;       /* PC版のgap(5px)をゼロに */
        font-size: 0 !important; /* 文字を完全に消す */
        
        background: #fcc800 !important;
        border-radius: 50% !important;
        text-decoration: none;
        order: 2 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* アイコン（メールアイコン）自体のズレを強制リセット */
    .css-mail {
        display: inline-block !important;
        position: relative !important;
        
        /* PC版や共通設定で付いている可能性のある余白を全リセット */
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        
        /* アイコン自体の中心を取るための微調整 */
        transform: none !important; 
        flex-shrink: 0 !important;
    }

    /* メールの羽部分（疑似要素）の微調整 */
    .css-mail:before {
        left: 0 !important;
    }
    .css-mail:after {
        left: 2px !important; /* ここの数値（2px）だけで左右位置を微調整できます */
    }
    
        /* アイコン（メール）のサイズと位置を微調整 */
    a.top_btn_01::before, 
    .css-mail {
        margin: 0 !important;
        font-size: 18px !important; /* アイコンを適切な大きさに */
        display: block !important;
            }

/* --- ヘッダー：3本線の枠を消す --- */
    .menu-toggle {
        display: block !important;
        width: 30px !important;
        height: 25px !important;
        position: relative !important;
        z-index: 2000 !important;
        margin: 0 !important;
        order: 1 !important;
        flex: none !important;
        
        /* ★枠線を完全に消す設定 */
        border: none !important;
        outline: none !important;
        background: none !important; /* 背景色も念のため透明に */
        box-shadow: none !important; /* 影がついている場合も考慮 */
        padding: 0 !important;
    }
    /* 以前お伝えした「×」ボタンの設定（こちらにも z-index が効くようになります） */
    .menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: #333;
        position: absolute;
        left: 0;
        transition: all 0.3s ease;
    }

    .menu-toggle span:nth-child(1) { top: 0; }
    .menu-toggle span:nth-child(2) { top: 10px; }
    .menu-toggle span:nth-child(3) { top: 20px; }

    /* ★ここが重要：クリックされて .active がついた時に「×」にする設定 */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg) !important;
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg) !important;
    }
    .pc-nav {
        display: block !important;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: #fff;
        z-index: 1050;
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        padding: 100px 20px 40px;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        overflow-y: auto;
    }

    .pc-nav.is-active { right: 0; }

    .top_ul {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0;
        list-style: none;
    }

    .top_li a {
        display: block;
        font-size: 16px;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        text-decoration: none;
        color: #333;
        text-align: left;
    }

    .top_btn_01 {
        font-size: 10px;
        padding: 5px 10px;
        z-index: 1001;
        line-height: 1.2;
        text-align: center;
    }

    /* --- ヒーローセクション --- */
    .zi-lead-hero {
        position: relative;
        padding-bottom: 210px;
    }
    
    .zi-lead-hero__img { height: 300px; }

    .zi-lead-hero .zi-lead-hero__caption.box_top2 {
        position: absolute;
        top: 45%; 
        left: 50%;
        transform: translateX(-50%);
        width: 94%;
        background-color: #fcc800;
        box-sizing: border-box;
        padding: 44px 12px 32px 16%;
        border-radius: 9999px 0 0 9999px;
        margin: 0;
        z-index: 10;
        opacity: 1;
    }

    .zi-lead-hero .zi_mi2 { font-size: 1.2rem; }
    .zi-lead-hero .zi_mfo { font-size: 110%; }
    .zi-lead-hero .zi_mibu {
        font-size: 0.85rem !important;
        line-height: 1.75;
        text-align: left;
        word-break: break-word;
    }

    /* --- グリッド・コンテンツ --- */
    #grid-wrapper {
        grid-template-columns: 1fr;
        width: 90%;
        gap: 1rem;
    }

    .box { width: 100%; padding: 1.2rem; }

    .inwrapper { padding-top: 60px; }

    .dgi_om { margin-bottom: 50px; }

    .tab-ik::before {
        width: 110vw;
        height: 220px;
        border-top-left-radius: 110vw;
        border-top-right-radius: 110vw;
        top: -80px;
    }

    .tab-ik {
        overflow-x: hidden;
        padding: 0 5%;
    }

    .tab-iwa { padding: 7% 2%; }

    .tab-fl {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .tab-fl01, .tab-fl02 { width: 100%; padding-right: 0; }

    .tab-item:first-child {
        border-right: none;
        margin-right: 0;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 20px;
    }

    .tab-ko1 { font-size: 22px; text-align: center; padding-top: 20px; }
    .fade-text { font-size: 14px; text-align: center; padding: 0 5%; }
    .tab-ko2 { font-size: 13px; text-align: center; padding: 0 6%; }
    .tab-fl01 > img { margin-top: 30px; }

    .btntab { min-width: 240px; padding: 8px 24px; }
    a.btntab-border span { padding: 20px 10px; }

    .image-tab { height: 200px; }
    a.btntab-border2 span { padding: 20px 10px; }

    /* --- ★「働く人の声・インタビュー一覧」のタイトルサイズ調整 --- */
    .tab-ko3 { 
        font-size: 1.5rem !important;
        padding-top: 2.5rem !important; 
        margin-top: 5% !important;
        line-height: 1.3;
    }

    /* --- タブボタン：スマホ横並び調整 --- */
    .tab-buttons { 
        display: flex !important;
        flex-direction: row !important;
        justify-content: center;
        gap: 12px; 
        margin-top: 2rem; 
        margin-bottom: 1.5rem; 
        flex-wrap: nowrap;
    }

    .tab-button { 
        flex: 1;
        min-width: 140px; 
        font-size: 0.95rem; 
        margin: 0 !important;
    }

    /* --- その他セクション調整 --- */
    #carouselTrack { gap: 16px; }
    .human-story .card {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 240px;
        max-width: 280px;
        padding: 16px;
    }
    .human-story .card img { width: 80px; }
    .item {
        flex: 0 0 auto !important;
        width: 260px;
        max-width: 260px;
    }

    a.btn_22011, a.btn_22012 {
        width: 90%;
        font-size: 110%;
        padding: 0.9rem 1.5rem;
    }

    /* --- 掲載企業募集セクションのスマホ最適化 --- */
    .ad-sh {
        width: 94%;
        padding: 30px 15px 40px;
        border-width: 3px;
    }

    .ad-sh .large-text {
        font-size: clamp(20px, 6vw, 28px);
        line-height: 1.4;
        margin-top: 15px;
        padding: 0 10px;
    }

    .ad-sh .small-text {
        font-size: 15px;
        letter-spacing: 0.05em;
    }

    .ad-sh .ad-flb {
        flex-direction: column;
        width: 100%;
        gap: 15px;
        margin-top: 25px;
    }

    .ad-sh a.btn_18, 
    .ad-sh a.btn_19 {
        width: 85%;
        font-size: 18px;
        padding: 12px 0;
        margin: 0 auto;
    }

    /* --- 各社インタビューセクションのスマホ最適化 --- */
    .omi2 {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .spe_l2 {
        flex-direction: column;
        align-items: center;
        background-color: #fae8a8;
        padding: 20px 0;
    }

    .dgi_p {
        width: 90% !important;
        font-size: 24px !important;
        text-align: center !important;
        padding: 15px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        margin-bottom: 25px !important;
        border-bottom: 4px solid #ef7c00 !important;
    }

    .dgi_p .btn-flat {
        padding: 10px 20px !important;
        margin-top: 15px !important;
        font-size: 14px !important;
    }

    .dgi_ps {
        font-size: 12px !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    .spe_l2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 20px 10px;
    }

    .zibox2 {
        width: 92% !important;
        max-width: 380px;
        margin: 0 auto !important;
        padding: 15px !important;
        border-radius: 10px;
    }

    .image-container {
        height: 200px !important;
        margin-bottom: 15px !important;
    }

    .zii_spedate {
        width: auto !important;
        display: inline-block !important;
        padding: 5px 15px !important;
        margin-bottom: 10px !important;
        font-size: 11px !important;
    }

    .spe_tito {
        font-size: 16px !important;
        line-height: 1.5 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* --- Work Your Way セクション調整 --- */
    /* ★日付のアーチ調整（サイズアップ & 下部マージン調整） */
    .arched-date svg {
        height: 60px !important;
        width: 100% !important;
        max-width: 360px;
    }

    .arched-date text {
        font-size: 30px !important;
    }

    .zii_tda {
        margin-top: 5% !important;
        margin-bottom: -10px !important; /* ★見出しに近づけるためにネガティブマージン */
        font-size: 1.3rem !important;
    }

    .image-tab {
        width: 90% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        margin-top: 20px !important;
        border-radius: 12px !important;
    }

    /* ★見出しタイトルの調整（日付に近づける） */
    .tab_ti {
        font-size: 1.25rem !important;
        line-height: 1.6 !important;
        width: 90% !important;
        margin: 5px auto 15px !important; /* ★上部マージンを5pxに縮小 */
        display: block;
        color: #222;
        font-weight: 700;
        text-align: center;
    }

    .btntab {
        width: 85% !important;
        padding: 0 !important;
        margin-top: 25px !important;
    }

    a.btntab-border span,
    a.btntab-border2 span {
        padding: 1.2rem 1rem !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }


}

 /* ==========================================================================
   【最終統合】ヒーローセクション説明枠（.box_top2）の設定
   ========================================================================== */

/* 1. PC版の設定 */
.zi-lead-hero .zi-lead-hero__caption.box_top2 {
    position: absolute !important;
    
    /* 1. 位置の基準を画像の下端（100%）から中央寄り（60%）に変更 */
    top: 40% !important; 
    left: 50% !important;
    
    /* 2. 自身の高さの半分だけ戻して、きれいに中央配置 */
    transform: translate(-50%, -50%) !important; 
    
    z-index: 20 !important;

    /* 3. 横幅を絞る（以前の指示を継続） */
    width: 90% !important;
    max-width: 1000px !important; 
    margin: 0 auto !important;

    /* 4. 角丸を強く（カプセル状） */
    border-radius: 9999px !important; 
    padding: 35px 50px !important;
    background-color: #fcc800 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    
    /* 5. 表示の余韻 */
    opacity: 1 !important; /* テスト用に一旦1にしていますが、js制御なら適宜調整してください */
    transition: opacity 3s ease, transform 2s ease-out !important;
    
    text-align:center;
}

/* クラス「show」がついた時に表示させる */
.zi-lead-hero .zi-lead-hero__caption.box_top2.show {
    opacity: 1 !important;
}

/* 中のテキスト調整（重なり防止） */
.zi-lead-hero .zi-lead-hero__caption.box_top2 .zi_mibu {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    text-align: center !important;
    margin-top: 10px !important;
}

@media screen and (max-width: 767px) {
    .zi-lead-hero {
        /* 黄色い枠を下にはみ出させるために、セクション自体の余白を確保 */
        padding-bottom: 120px !important;
        position: relative;
    }

    .zi-lead-hero .zi-lead-hero__caption.box_top2 {
        /* 1. 位置：画像の下端（100%）に配置し、少しだけ（30px）上に持ち上げて被せる */
        position: absolute !important;
        top: 48% !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translate(-50%, -30px) !important; /* -30pxで被り具合を調整 */

        /* 2. サイズ：高さを抑えるため上下の余白を最小限に */
        width: 92% !important;
        max-width: none !important;
        padding: 20px 15px !important;
        
        /* 3. デザイン：角丸を少し抑えて情報を凝縮 */
        border-radius: 25px !important;
        z-index: 30 !important;
    }

    /* キャッチコピー：さらにコンパクトに */
    .zi-lead-hero .zi_mi2 {
        font-size: 1.0rem !important;
        margin-bottom: 5px !important;
    }
    
    /* リード文：読みやすさを維持しつつ最小サイズに */
    .zi-lead-hero .zi_mibu {
        line-height: 1.0 !important;
        text-align: justify !important; /* 左右を揃えて美しく */
        padding: 0 5px !important;
    }
    .zi_mibu {
       /* 最小11px 〜 最大13px の間で可変 */
        font-size: clamp(0.6875rem, 3vw, 0.8125rem) !important;
        line-height: 1.5 !important;
        text-align: center;
        
        /* もしこれでも大きく感じる場合は、少しだけ縮小をかける */
        display: block;
        transform: scale(0.95); 
        transform-origin: center;       /* 改行させたくない場合に指定 */
    }
    .dgi_om {
    /* もし style="margin-top:0" がHTMLに残っているなら !important が必要です */
    margin-top: 12px !important; 
}
}

/* PCでは余白なし */
.zi-hero-container {
    margin-top: 0;
}

/* スマホ用（767px以下）の設定 */
@media screen and (max-width: 767px) {
    .zi-hero-container {
        /* 数値はお好みで調整してください */
        margin-top: 40px; 
    }
}

@media screen and (max-width: 767px) {
    /* ハンバーガーメニュー内のリストの縦線を消す */
    .top_ul li + li::before {
        display: none !important;
        content: none !important;
        border-left: none !important;
    }

    /* リスト項目のマージンやパディングもリセットしてスッキリさせる */
    .top_ul li + li {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    .dgi_om{
    box-shadow: none;
}
.dgi_om > * {
     box-shadow: none;
}
}

.zi_km2{
  margin-top:10px;
}
.dgi_om {
    /* 他の要素との描画の干渉を断ち、独立したレイヤーにする */
    isolation: isolate; 
    position: relative;
    z-index: 10;

    /* ブラウザに描画のヒントを与えつつ、チラつきを抑える */
    will-change: transform;
    
    /* 消失を物理的に防ぐための保険 */
    opacity: 1 !important;
    visibility: visible !important;

    /* レイアウトの維持 */
    margin-top: 20px !important;
    overflow: visible !important;
}

/* 子要素への一括加速（重すぎる原因になりやすい）は、一旦完全に消してください */
.zi_km {
    position: relative;
    display: block;
    font-weight: bold;
    color: #333333;
    font-size: 110%;
    
    /* 1. 下のコンテンツ（写真やスライダー）との距離を広げる */
    margin-bottom: 1em !important; 
    
    /* 2. 文字と下線の間の隙間を調整（余韻を作る） */
    padding: 0.5em 0.7em 0.8em !important; 
    
    /* 既存の下線設定 */
    border-bottom: 2px solid #333;
}
.box {
    box-shadow: none !important;
}
.zi_box3 {
    box-shadow: none !important;
}