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

  body{
    background: #fff;
  }
}


a{text-decoration: none;}
img{
	max-width:100%;
	display: block;
	margin: 0;
	padding:0;
	vertical-align: bottom;
}

.container{
	width: 100%;
	max-width: 100%;
	position: relative;
	overflow: hidden;
}



/* pcで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
@media screen and (max-width:767px){
	.pc { display: none !important; }
	.sp { display: block !important;}
}




h1{
  font-size: 40px;
  text-align: center;
  color: #fff;
  line-height: 150%;
  font-weight: 700;
  letter-spacing: 1px;
  font-feature-settings: 'palt' 1;
}

.txt-big h2{
    font-size: 40px;
    color: #232323;
    text-align: left;

}

p{
  font-size: 15px;
  line-height: 180%;
  margin: 0 auto;
  letter-spacing: 1px;
  font-weight: 400;
  color: #232323;
}

h2{
  font-size: 35px;
  text-align: center;
  line-height: 180%;
  font-weight: 500;
  color: #fff;
}


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

h1{
  font-size: 6vw;
  text-align: center;
  color: #fff;
  line-height: 160%;
  font-weight: 700;
  letter-spacing: 1px;
  font-feature-settings: 'palt' 1;
}
.txt-big h2{
    font-size: 5vw;
     color: #232323;

}


p{
  font-size: 3vw;
  line-height: 180%;
  padding: 0 2%;
  letter-spacing: 0px;
  color: #232323;
}

h2{
  font-size: 5vw;
  text-align: center;
  line-height: 180%;
  padding: 0 10px;
  font-weight: 500;
  color: #fff;
}


}





a.hover-btn img{
   transition:all 0.5s ease;
   }
a:hover.hover-btn img{
   opacity: 0.7;
   filter: alpha(opacity=70);
   }

   .header-icon {
   	transform-origin:center top;
   	animation:show 1s both;
   }

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


   a:hover.hover-btn img{
   opacity: 1;
   filter: alpha(opacity=70);
   }

  }

/* --------------------余白-------------------- */

   .space01{
    padding: 20px 0 0 0;
   }

    .space02{
      margin-top: 50px;
   }

    .space03{
      margin-top: 100px;
   }

    .space04{
      margin-top: 30px;
   }


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


   .space01{
    padding: 10% 0 0 0;
   }

    .space02{
      margin-top: 15%;
   }
   
       .space03{
      margin-top: 15%;
   }

    .space04{
      margin-top: 5%;
   }



  }

/* --------------------パンクズリスト-------------------- */

.breadcrumb-container {
    background-color: #f9f9f9; /* 背景を少しグレーにするとコンテンツと区別しやすくなります */
    padding: 15px 0;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-item {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
}

.breadcrumb-item a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb-item a:hover {
    color: #f9be00; /* ホバー時はサイトカラーの黄色に */
    text-decoration: underline;
}

/* 区切り文字「>」の設定 */
.breadcrumb-item:not(:last-child)::after {
    content: ">";
    margin: 0 10px;
    font-size: 10px;
    color: #ccc;
    font-family: serif; /* 記号を綺麗に見せるため */
}

/* 現在地（リンクがない最後の子要素）のスタイル */
.breadcrumb-item span {
    font-weight: 700;
    color: #333;
}

/* SP対応 */
@media screen and (max-width: 767px) {
    .breadcrumb-container {
        padding: 10px 0;
    }
    .breadcrumb-item {
        font-size: 11px;
    }
}



/* 記事 */

.news-section{
    background: url("../img/bg-parts/wh-bg.jpg");
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding:100px 0 0 0;
 
}

.news-innerframe{
    width: 900px;
    margin: 0 auto;
}

.news-img{
    width: 100%;
}

.news-title h2{
    font-size: 25px;
    text-align: left;
    color: #232323;
}

.news-date p{
    font-size: 15px;
}

.news-txt p{
    color: #232323;
}

.news-txt{
    padding: 50px 0 0 0;
}

@media screen and (max-width: 767px) {
.news-section{
    background: url("../img/bg-parts/wh-bg-sp.jpg");
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding:15% 0 0 0;
 
}

.news-innerframe{
    width: 90%;
    margin: 0 auto;
}


.news-title h2{
    font-size: 5vw;
    text-align: left;
    color: #232323;
}

.news-date p{
    font-size: 3vw;
}

.news-txt{
    padding: 10% 0 0 0;
}


}

/* --------------------mainvisual-------------------- */

.fv-main-txt p{
  font-size: 60px;
  line-height: 120%;
}

.fv-main-txt{
  position: absolute;
  top: 400px;
  left: 180px;
}

.fv-main-txt-y{
  font-size: 35px;
  color: #f9be00;
}


/* --- 1文字アニメーションの土台 --- */
.js-reveal {
    display: inline-block;
}

/* 分解された1文字ずつのスタイル */
.js-reveal span {
    display: inline-block; /* 1文字ずつ動かすために必須 */
    opacity: 0;
    transform: translateY(30px); /* 少し深めに下から浮かび上がる */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}

/* アニメーション実行時の状態 */
.js-reveal.is-visible span {
    opacity: 1;
    transform: translateY(0);
}

/* SPでの改行調整を維持 */
@media screen and (max-width: 767px) {
    .sp { display: block; }
}



/* --- 基本設定 --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    overflow-x: hidden; 
    width: 100%; 
    font-family: sans-serif;
}

/* --- 背景アニメーション --- */
/* ===============================================
   2. MV背景アニメーション（スクロールで一緒に動く）
   =============================================== */
.bg-animation-container {
    position: absolute; /* fixedから変更：スクロールに追従 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    overflow: hidden;
    pointer-events: none;
}

.floating-obj {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    animation: simple-float 10s ease-in-out infinite;
}

.obj-1 { 
    width: 400px; 
    top: 15%; 
    left: -10%; 
    animation: floating-pattern-1 15s ease-in-out infinite;
}

.obj-2 { 
    width: 100px; 
    bottom: 18%; 
    right: 70%; 
    animation: floating-pattern-2 20s ease-in-out infinite;
    animation-delay: -5s; 
}

@keyframes simple-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-40px); }
}

@keyframes floating-pattern-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%  { transform: translate(30px, 40px) rotate(2deg); }
    66%  { transform: translate(-20px, 20px) rotate(-1deg); }
}

@keyframes floating-pattern-2 {
    0%, 100% { transform: translate(0, 0); }
    50%  { transform: translate(-40px, -60px) scale(1.05); }
}

/* ===============================================
   3. Header Settings
   =============================================== */
/* --- Header Settings 修正版 --- */
/* --- Header Settings 決定版 --- */
.header { 
    position: fixed !important; 
    top: 20px; 
    left: 50%;
    /* 左右中央寄せ + 3D空間で手前に浮かせて clip-path を回避 */
    transform: translateX(-50%) translateZ(1px) !important;
    -webkit-transform: translateX(-50%) translateZ(1px) !important;
    
    width: 90%; 
    max-width: 1500px;
    height: 85px; 
    z-index: 999999 !important; 
    
    /* デザイン指定 */
    background: rgba(255, 255, 255, 0.8) !important; /* 白・不透明度80% */
    backdrop-filter: blur(10px); /* 背後をぼかす（より綺麗に見えます） */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px !important; /* 角丸 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 薄い白の縁取り（立体感） */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); /* 軽い影 */

    padding: 0 40px; 
    display: flex; 
    align-items: center; 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
    isolation: isolate;
}

/* スクロール時の変化（少し小さく、白を濃くする場合） */
.header.is-scrolled { 
    top: 10px;
    height: 65px; 
    background: rgba(255, 255, 255, 0.8) !important; 
    transform: translateX(-50%) translateZ(1px) !important;
}
/* --- 背景エリアの z-index をあえて下げる --- */
.animation-bg {
    position: relative;
    width: 100%;
    /* ここを 5 ではなく 1 に下げます */
    z-index: 1 !important; 
    background-color: #ffffff;
    clip-path: inset(0); 
    overflow: hidden;
}




.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo img { height: 35px; width: auto; display: block; transition: 0.3s; }
.header.is-scrolled .logo img { height: 28px; }

/* PC Menu (1025px+) */
@media (min-width: 1025px) {
    .menu-btn, .arrow { display: none; }
    .nav-wrapper { display: block !important; }
    .main-menu { display: flex; list-style: none; gap: 35px; }

    /* ★ここが重要：親要素に relative を追加 */
    .has-child {
        position: relative; 
    }

    .main-menu a { 
        text-decoration: none; 
        color: #232323; 
        font-weight: 700; 
        font-size: 14px; 
        transition: 0.3s; 
        display: block; /* クリックエリアを確保 */
        padding: 10px 0; /* マウスを合わせやすく調整 */
    }
    
    .main-menu a:hover { color: #005bab; }

    .sub-menu {
        position: absolute; 
        top: 100%; /* 親（has-child）のすぐ下に配置 */
        left: 50%; 
        transform: translateX(-50%); /* 親の中央に合わせる */
        background: #fff; 
        width: 220px; 
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        list-style: none; 
        padding: 15px 0; 
        border-radius: 15px;
        opacity: 0; 
        visibility: hidden; 
        margin-top: 15px; 
        transition: 0.3s;
        z-index: 10; /* 他の要素に埋もれないように */
    }

    /* マウスを乗せた時の挙動 */
    .has-child:hover .sub-menu { 
        opacity: 1; 
        visibility: visible; 
        margin-top: 0; 
    }

    /* サブメニュー内のリンク */
    .sub-menu a {
        padding: 10px 20px;
        font-weight: 500;
        border-bottom: none;
    }
}

/* PCでは隠す */
.sp-menu-logo {
    display: none;
}

/* SP Menu (1024px-) */
@media (max-width: 1024px) {

  .sp-menu-logo {
        display: block; /* SPで表示 */
        margin-bottom: 40px; /* メニュー項目との間隔 */
        padding-bottom: 20px;
    }

    .sp-menu-logo img {
        height: 30px; /* ヘッダーのロゴより少し大きくしても良いですね */
        width: auto;
        display: block;
    }

    /* nav-wrapperのパディングを少し調整してロゴの位置を整える */
    .nav-wrapper {
        padding: 40px 30px !important; /* 上の余白を少し詰める */
    }

    .header { 
        width: 95% !important; 
        padding: 0 20px !important; 
        height: 70px !important; 
        top: 15px !important; 
        justify-content: space-between;
    }

    .logo img { height: 28px !important; }

    .nav-wrapper {
        position: fixed; 
        top: 0; 
        right: -110%; 
        width: 100%; 
        height: 100vh;
        background: #fff; 
        padding: 100px 30px; 
        transition: 0.5s; 
        z-index: 999;
        overflow-y: auto; /* メニューが長い場合にスクロール可能にする */
    }

    .header.is-open .nav-wrapper { right: 0; }

    .main-menu {
        flex-direction: column;
        gap: 0; /* アコーディオン用に調整 */
        list-style: none;
        padding: 0;
    }

    /* 親メニュー項目 */
    .main-menu > li {
        border-bottom: 1px solid #f0f0f0;
    }

    .main-menu a {
        font-size: 20px;
        font-weight: 700;
        color: #232323;
        text-decoration: none;
        display: block;
        padding: 20px 0;
    }

    /* --- ここからアコーディオン用の追記 --- */

    /* サブメニューを持つ親に矢印を付与 */
    .has-child > a {
        position: relative;
    }

    .has-child > a::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 10px;
        height: 10px;
        border-top: 2px solid #232323;
        border-right: 2px solid #232323;
        transform: translateY(-50%) rotate(135deg); /* 下向き矢印 */
        transition: 0.3s;
    }

    /* 開いている時の矢印の向き */
    .has-child.is-active > a::after {
        transform: translateY(-20%) rotate(-45deg); /* 上向き矢印 */
    }

    /* サブメニュー：初期は非表示 */
    .sub-menu {
        position: static;
        display: none; /* JSで制御するため初期は隠す */
        list-style: none;
        padding: 0 20px 20px; /* 内側に余白 */
        margin: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
    }

    .sub-menu li a {
        font-size: 16px;
        font-weight: 500;
        padding: 10px 0;
        border-bottom: none;
    }

    /* --- アコーディオン用の追記ここまで --- */

    .menu-btn { 
        display: block !important;
        width: 28px; 
        height: 20px; 
        background: none; 
        border: none; 
        position: relative; 
        z-index: 1000; 
        cursor: pointer; 
    }

    .menu-btn span { position: absolute; left: 0; width: 100%; height: 2px; background: #232323 !important; transition: 0.3s; }
    .menu-btn span:nth-child(1) { top: 0; }
    .menu-btn span:nth-child(2) { top: 9px; }
    .menu-btn span:nth-child(3) { bottom: 0; }

    .header.is-open .menu-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .header.is-open .menu-btn span:nth-child(2) { opacity: 0; }
    .header.is-open .menu-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

/* ===============================================
   4. Main Visual Layout
   =============================================== */
/* --- メインビジュアル全体の重なり順を下げる --- */
.main-visual-position {
    position: relative;
    width: 100%;
    height: 1150px;
    z-index: 1 !important; /* 数値を 5 から 1 へ下げます */
}

.fv {
    background: url("../img/bg-parts/pc-bg.jpg");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    position: relative;
    z-index: 1; /* 親に合わせてここも低く設定 */

}



.main-visual {
    width: 60%; 
    aspect-ratio: 954 / 1308; 
    margin-left: auto;
    margin-right: -10%;
    position: relative;
    top: -100px; 
    overflow: visible !important; 
}

.mv-container { width: 100%; height: 100%; position: relative; overflow: visible !important; }

.mv-first-bg {
    position: absolute; bottom: -330px; left: 40%; transform: translateX(-50%); 
    width: 600px; height: 100%; z-index: 50; transition: 1.2s; pointer-events: none;
}
.mv-first-bg img { width: 100%; height: auto; object-fit: contain; object-position: bottom; }
.mv-first-bg.is-hidden { opacity: 0; }

.mv-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: 0.8s; }
.mv-slide.is-active { opacity: 1; z-index: 10; }

.slide-reveal-rect { width: 100%; height: 100%; position: relative; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.mv-slide.is-active .slide-reveal-rect { animation: hero_slide_reveal cubic-bezier(1, 0, 0, 1) 1.2s forwards; }

@keyframes hero_slide_reveal {
    0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    100% { clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%); }
}

/* --- Mask & Animation --- */
.clip-mask-layer {
    width: 90%; height: 90%; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); overflow: visible; z-index: 10;
}

.mask-wrap, .mask-overlay { position: absolute; inset: -1px; clip-path: url(#custom-mask); }
.mask-overlay { z-index: 2; }
.mask-overlay img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }

.mask-wrap img {
    width: 100%; height: 100%; object-fit: cover; transform: scale(1.2);
    animation: zoom-fix 20s infinite alternate ease-in-out;
}

@keyframes zoom-fix { 0% { transform: scale(1.2); } 100% { transform: scale(1.4); } }

/* --- Back Parts (Static) --- */
.mv-parts-back {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; z-index: 1; pointer-events: none;
    animation: none !important; /* アニメーション停止 */
}
.mv-parts-back img { width: 100%; height: 100%; object-fit: contain; filter: blur(1px); }

.parts-wh01 { position: absolute; bottom: -1px; left: 0; width: 100%; height: auto; z-index: 100; pointer-events: none; }

/* ===============================================
   5. Topics Area (Animation BG & Hover)
   =============================================== */
.animation-bg {
    position: relative;
    width: 100%;
    z-index: 5;
    background-color: #ffffff; /* 背景白固定 */
    clip-path: inset(0); 
    overflow: hidden;
}

.bg-parts-wrap {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
}

.bg-part { position: absolute; will-change: transform; opacity: 0.5; }
.p-01 { width: 300px; top: 10%; left: -5%; animation: float-v1 15s infinite; }
.p-02 { width: 220px; top: 40%; right: -2%; animation: float-v2 12s infinite; }
.p-03 { width: 250px; bottom: 10%; left: 5%; animation: float-v3 18s infinite; }

@keyframes float-v1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,30px)} }
@keyframes float-v2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,20px)} }
@keyframes float-v3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-20px)} }

.top-topics { position: relative; z-index: 10; width: 100%; padding: 100px 0; background: transparent; }

.topics-box {
    width: 100%; background-color: #f7f7f7; border-radius: 20px; text-align: left;
    padding: 15px 50px 15px 20px; box-sizing: border-box; position: relative;
    overflow: hidden; z-index: 1; transition: 0.3s; cursor: pointer;
}

.topics-box::before {
    content: ""; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%; background-color: #f9be00;
    transition: 0.5s ease; z-index: -1;
}

.topics-box:hover::before { left: 0; }

/* Arrow in Topics Box */
.topics-box::after {
    content: ""; position: absolute; right: 20px; top: 50%;
    width: 8px; height: 8px; border-top: 2px solid #232323; border-right: 2px solid #232323;
    transform: translateY(-50%) rotate(45deg); transition: 0.3s;
}

.topics-box:hover::after { right: 15px; border-color: #232323; }

.date-category p { font-size: 13px; color: #686868; margin-bottom: 5px; }
.category-color { background-color: #232323; color: #fff; padding: 2px 8px; border-radius: 4px; margin-left: 5px; }
.topics-box p { font-size: 14px; }

/* View More Button */
.view-more-btn {
    display: flex; align-items: center; justify-content: center;
    width: 280px; margin: 40px auto 0; padding: 15px 0;
    background-color: #f9be00; color: #fff; text-decoration: none;
    font-size: 24px; font-weight: 500; border-radius: 50px;
    border: 2px solid #f9be00; transition: 0.3s; box-sizing: border-box;
}

.btn-arrow {
    display: inline-block; width: 40px; height: 2px; background-color: #fff;
    margin-left: 20px; position: relative; transition: 0.3s;
}

.btn-arrow::after {
    content: ""; position: absolute; right: 0; top: -6px;
    width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff;
    transform: rotate(45deg); transition: 0.3s;
}

.view-more-btn:hover { background-color: #fff; color: #f9be00; }
.view-more-btn:hover .btn-arrow { background-color: #f9be00; }
.view-more-btn:hover .btn-arrow::after { border-color: #f9be00; }

/* ===============================================
   6. SP Settings (767px-) 初期数値への復元版
   =============================================== */
@media screen and (max-width: 767px) {
    /* --- メインビジュアルの高さ・位置を初期値へ --- */
    .main-visual-position {
        height: 80vh !important; /* 初期値 */
        min-height: 550px;
        overflow: visible !important;
        z-index: 5;
    }

    .fv {
        background: url("../img/bg-parts/sp-bg.jpg");
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: scroll;

        min-height: 85vh !important;
        position: relative;
        z-index: 5;
    }

    /* メインビジュアル画像エリア：数値を元通りに */
    .main-visual {
        width: 110%;         /* 初期値 */
        aspect-ratio: auto;
        height: 70vh;        /* 初期値 */
        top: 0;
        margin-right: -100px; /* 初期値 */
        margin-top: 0px; 
    }

    /* 人物などの前面画像：数値を元通りに */
    .mv-first-bg {
        width: 65% !important;        /* 初期値 */
        bottom: -70px !important;     /* 初期値 */
        left: 35% !important;         /* 初期値 */
        transform: translateX(-50%) !important;
    }

    /* メインテキスト：数値を元通りに */
    .fv-main-txt {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 130px;            /* 初期値 */
        text-align: left;
        width: 100%;
        padding: 0 15px;
    }

    .fv-main-txt p {
        font-size: 9vw;               /* 初期値 */
        line-height: 1.4;
    }

    .fv-main-txt-y {
        font-size: 6vw;               /* 初期値 */
    }

    /* --- 背景オブジェクト：スクロール追従の設定のみ維持 --- */
    .bg-animation-container {
        position: absolute; /* 追従のため absolute */
        height: 100%;
    }

    .obj-1 { 
        width: 200px; 
        top: 40%; 
        left: -20%; 
    }

    .obj-2 { 
        width: 40px; 
        bottom: 60%; 
        left: 80%; 
        animation-delay: -5s; 
    }

    /* --- トピックス部分のSP調整 --- */
    .contents-01 {
        position: relative;
        z-index: 10;
        padding: 0 0 10% 0;
        display: block !important;
        background: url("../img/contents01-bg.jpg") top repeat;
        background-size: cover;
    }

    .view-more-btn {
        width: 240px;
        font-size: 20px;
    }


    .parts-wh01 { position: absolute; bottom: -10%; left: 0; width: 100%; height: auto; z-index: 100; pointer-events: none; }

}










/* -------------------- ボディ 背景アニメーション -------------------- */


/* --- 背景アニメーションコンテナ（トピックスの親） --- */
.animation-bg {
    position: relative;
    width: 100%;
    /* FV(1) よりも大きく、ナビゲーション(999999)よりも小さい数値に */
    z-index: 10 !important; 
    background-color: #ffffff;
    clip-path: inset(0); 
    overflow: hidden;
}

/* 固定背景レイヤー */
.bg-parts-wrap {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* animation-bgの中だけで見えるように重なりを調整 */
    z-index: 1; 
    pointer-events: none;
}

/* 個別パーツ */
.bg-part {
    position: absolute;
    will-change: transform;
    opacity: 0.5;
}

/* 配置とアニメーション設定
   duration（速度）と delay（開始位置）をバラバラにしています
*/
.p-01 { 
    width: 100px; 
    top: 40%; 
    left: 10%; 
    animation: float-v1 3s ease-in-out infinite; 
    animation-delay: 0s; 
}
.p-02 { 
    width: 220px; 
    top: 40%; 
    right: -2%; 
    animation: float-v2 3s ease-in-out infinite; 
    animation-delay: -2s; /* 既に動いている状態から開始 */
}
.p-03 { 
    width: 200px; 
    bottom: 10%; 
    left: 2%; 
    animation: float-v3 5s ease-in-out infinite; 
    animation-delay: -5s; /* 既に動いている状態から開始 */
}

.p-04 { 
    width: 70px; 
    bottom: 50%; 
    left: 70%; 
    animation: float-v4 5s ease-in-out infinite; 
    animation-delay: -3s; /* 既に動いている状態から開始 */
}

/* --- コンテンツ本体 --- */
.top-topics {
    position: relative;
    z-index: 11; 
}

/* アニメーション定義
   移動距離（高さ）を 40px / 25px / 15px と変えることで奥行きを出します
*/
@keyframes float-v1 { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-25px); } 
}
@keyframes float-v2 { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-30px); } 
}
@keyframes float-v3 { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-30px); } 
}
@keyframes float-v4 { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-30px); } 
}


@media screen and (max-width: 767px) {
  /* --- 背景アニメーションコンテナ --- */
  .animation-bg {
      position: relative;
      width: 100%;
      z-index: 10 !important; 
      background-color: #ffffff;
      /* スクロール追従にするため clip-path を解除 */
      clip-path: none !important; 
      overflow: hidden;
  }

  /* 固定背景レイヤーを「絶対配置」に変更してスクロールに同期させる */
  .bg-parts-wrap {
      position: absolute; /* fixed から absolute に変更 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* 親要素(animation-bg)の高さ全体に広がる */
      z-index: 1; 
      pointer-events: none;
  }

  /* 個別パーツのサイズと配置をスマホ用に最適化 */
  .bg-part {
      position: absolute;
      will-change: transform;
      opacity: 0.4; 
  }

  .p-01 { 
      width: 80px; 
      top: 10%; 
      left: 5%; 
      animation: float-v1 4s ease-in-out infinite; 
  }
  .p-02 { 
      width: 150px; 
      top: 30%; 
      right: -5%; 
      animation: float-v2 5s ease-in-out infinite; 
      animation-delay: -1s;
  }
  .p-03 { 
      width: 120px; 
      bottom: -5%; 
      left: -5%; 
      animation: float-v3 6s ease-in-out infinite; 
      animation-delay: -2s;
  }
  .p-04 { 
      width: 60px; 
      top: 60%; 
      right: 10%; 
      animation: float-v4 4.5s ease-in-out infinite; 
      animation-delay: -3s;
  }

  /* 各アニメーションの高さもスマホに合わせて微調整（跳ねすぎ防止） */
  @keyframes float-v1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
  @keyframes float-v2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
  @keyframes float-v3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25px); } }
  @keyframes float-v4 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }


  }




/* -------------------- 背景アニメーション end -------------------- */



/* --------------------topics-------------------- */

/* 1. 日本語部分の親要素（ここをより具体的に書く） */
.subhead h1 .subhead-txt-s {
    display: inline-block !important;
    font-size: 18px !important; /* 強制的に18pxを適用 */
    color: #232323 !important;
    margin-left: 15px;
    vertical-align: middle;
}

.subhead h1 .subhead-txt-s02 {
    display: inline-block !important;
    font-size: 18px !important; /* 強制的に18pxを適用 */
    color: #fff !important;
    margin-left: 15px;
    vertical-align: middle;
}

/* 2. アニメーション用の1文字（span）の設定 */
.js-reveal-scroll span {
    display: inline-block;
    /* 親要素（h1や.subhead-txt-s）のサイズを強制的に引き継ぐ */
    font-size: inherit !important; 
    opacity: 0;
    transform: translateY(30px);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}


/* 3. 表示状態 */
.js-reveal-scroll.is-visible span {
    opacity: 1;
    transform: translateY(0);
}

/* スマホ版の調整も強力にする */
@media screen and (max-width: 767px) {
    .subhead h1 .subhead-txt-s {
        font-size: 5vw !important;
        display: block !important;
        margin: 5px 0 0 !important;
    }

    .subhead h1 .subhead-txt-s02 {
        font-size: 5vw !important;
        display: block !important;
        margin: 5px 0 0 !important;
    }
}




.contents-innerframe{
  width: 70%;
  margin: 0 auto;
}

.sub-title-01{
  width: 90%;
  margin: 0 auto;
}

.top-topics{
  padding: 0 0 50px 0;
}

.subhead h1{
  color: #232323;
  text-align: left;
  font-size: 60px;
}
/* --- トピックスエリア全体の調整 --- */
.topics-area {
  padding: 30px 0 0;
}

/* --- 各トピックスボックスの修正 --- */
.topics-box {
  width: 100%;
  background-color: #f7f7f7;
  border-radius: 20px;
  text-align: left;
  padding: 15px 50px 15px 20px; /* 右側に矢印用の余白(50px)を確保 */
  box-sizing: border-box;
  position: relative;          /* 矢印と背景の基準点 */
  overflow: hidden;            /* はみ出す背景アニメーションを隠す */
  z-index: 1;                  /* 背景より上にコンテンツを出すため */
  transition: color 0.3s ease; /* 文字色変化を滑らかに */
  cursor: pointer;             /* クリック可能に見せる */
  display: block;              /* aタグにする場合を想定 */
  text-decoration: none;       /* aタグにする場合を想定 */
  color: inherit;
}

/* --- 背景が流れるアニメーションの仕掛け --- */
.topics-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;                /* 最初は左側に隠しておく */
  width: 100%;
  height: 100%;
  background-color: #f9be00;  /* ホバー時の背景色 */
  transition: all 0.5s ease;  /* 流れるスピード */
  z-index: -1;                /* テキストの裏側に配置 */
}

/* --- ホバー時に背景を右へ流す --- */
.topics-box:hover::before {
  left: 0;                    /* 左から右へスライド */
}

/* --- 右端の矢印（疑似要素） --- */
.topics-box::after {
  content: "";
  position: absolute;
  right: 20px;                /* 右端からの距離 */
  top: 50%;
  transform: translateY(-50%);
  width: 8px;                 /* 矢印のサイズ */
  height: 8px;
  border-top: 2px solid #232323;    /* 矢印の線（上） */
  border-right: 2px solid #232323;  /* 矢印の線（右） */
  rotate: 45deg;              /* 45度回転させて「>」にする */
  transition: all 0.3s ease;
}

/* --- ホバー時に矢印を少し右に動かす（芸が細かい演出） --- */
.topics-box:hover::after {
  right: 15px;                /* 少し右にスライド */
  border-color: #fff;         /* 矢印の色を白に変える（お好みで） */
}

/* --- 文字色の調整（ホバー時） --- */
.topics-box:hover .date-category p,
.topics-box:hover p {
  color: #232323;             /* 背景が黄色になっても読みやすい色に */
}

/* --- 既存スタイルの維持・微調整 --- */
.date-category p {
  font-size: 13px;
  color: #686868;
  margin-bottom: 5px;         /* 日付と本文の間に少し隙間 */
  position: relative;
  z-index: 2;
}

.topics-box p {
  font-size: 14px;
  position: relative;
  z-index: 2;
  margin: 0;
}

.category-color {
  background-color: #232323;
  color: #fff;
  padding: 2px 8px;           /* 少し余白を調整 */
  margin-left: 5px;
  border-radius: 4px;         /* カテゴリタグも少し角丸にすると馴染みます */
  transition: 0.3s;
}

/* ホバー時にカテゴリタグの色を反転させる演出 */
.topics-box:hover .category-color {
  background-color: #fff;
  color: #232323;
}

/* --- view more ボタンの基本スタイル --- */
.view-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;               /* ボタンの横幅（適宜調整してください） */
    margin: 40px auto 0;        /* 上に余白を作り、中央配置 */
    padding: 15px 0;
    background-color: #f9be00;  /* 初期背景色 */
    color: #fff;                /* 初期テキスト色 */
    text-decoration: none;
    font-size: 24px;            /* 画像に近い大きめのサイズ */
    font-weight: 500;
    border-radius: 50px;        /* 完全な丸角 */
    border: 2px solid #f9be00;  /* 最初から縁取りと同じ色の線を引いておく */
    transition: all 0.3s ease;  /* アニメーションを滑らかに */
    box-sizing: border-box;
}

/* ボタン内の矢印パーツ */
.btn-arrow {
    display: inline-block;
    width: 40px;                /* 横線の長さ */
    height: 2px;
    background-color: #fff;     /* 初期矢印の色 */
    margin-left: 20px;
    position: relative;
    transition: all 0.3s ease;
}

/* 矢印の先端（> の部分） */
.btn-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -6px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

/* --- ホバー時の演出 --- */
.view-more-btn:hover {
    background-color: #fff;     /* 背景を白に */
    color: #f9be00;             /* テキストを黄色に */
    /* 縁取りは border ですでに #f9be00 が指定されているのでそのまま残ります */
}

/* ホバー時に矢印の色も黄色に変える */
.view-more-btn:hover .btn-arrow {
    background-color: #f9be00;
}

.view-more-btn:hover .btn-arrow::after {
    border-color: #f9be00;
}


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

  .subhead h1{
  color: #232323;
  text-align: left;
  font-size: 9vw;
}

.contents-innerframe{
  width: 90%;
  margin: 0 auto;
}
.view-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;               /* ボタンの横幅（適宜調整してください） */
    margin: 40px auto 0;        /* 上に余白を作り、中央配置 */
    padding: 15px 0;
    background-color: #f9be00;  /* 初期背景色 */
    color: #fff;                /* 初期テキスト色 */
    text-decoration: none;
    font-size: 5vw;            /* 画像に近い大きめのサイズ */
    font-weight: 500;
    border-radius: 50px;        /* 完全な丸角 */
    border: 2px solid #f9be00;  /* 最初から縁取りと同じ色の線を引いておく */
    transition: all 0.3s ease;  /* アニメーションを滑らかに */
    box-sizing: border-box;
}


}



/* --------------------topics end-------------------- */



/* --------------------about us-------------------- */

.parts-bk01 {
  position: absolute;
  bottom: -1px;
  left: 0; width: 100%;
  height: auto;
  z-index: 100;
  pointer-events: none; 
}


/* --- ABOUT US セクション全体 --- */
.top-about {
    position: relative;
    padding: 150px 0 0 0; /* 下パディングを0にして接地させる */
    z-index: 10;
}

.about-flex-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 40px;
    padding-bottom: 150px; /* 画像がはみ出す分の高さを確保 */
    position: relative;
}

/* --- テキスト枠（装飾付き） --- */
.about-text-frame {
    width: 65%;
    position: relative;
    border: 1px solid #ccc;
    padding: 60px;
    background: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    z-index: 5;
    margin-bottom: 100px;
}

/* 四隅の小さな正方形（共通設定） */
.about-text-frame::before,
.about-text-frame::after,
.frame-inner::before,
.frame-inner::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ccc;
    z-index: 2;
}

/* 左上・右上・左下・右下の配置 */
.about-text-frame::before { top: -4px; left: -4px; }
.about-text-frame::after { top: -4px; right: -4px; }
.frame-inner::before { bottom: -4px; left: -4px; }
.frame-inner::after { bottom: -4px; right: -4px; }

.about-text-frame h2 {
    font-size: 40px;
    font-weight: bold;
    color: #232323;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    text-align: left;
}

.about-text-frame p {
    font-size: 18px;
    line-height: 2.2;
    margin-bottom: 40px;
    color: #232323;
}

/* --- 画像エリア（右端・最下部固定） --- */
.about-image-area {
    width: 45%;
    position: absolute;
    right: 0;
    bottom: 0; /* セクションの底に接地 */
    z-index: 15;
    line-height: 0; /* 画像下の余白を排除 */
    display: flex;
    align-items: flex-end;
}

.ambassador-img {
    width: 80%;
    max-width: 550px;
    height: auto;
    display: block;
    margin-left: auto;
}

/* 縦書きテキスト（必要に応じて） */
.ambassador-name-v {
    writing-mode: vertical-rl;
    font-size: 13px;
    line-height: 1.5;
    color: #232323;
    font-weight: bold;
    margin-right: 15px;
    height: fit-content;
    white-space: nowrap;
}

/* --- スマホ調整（767px以下） --- */
@media screen and (max-width: 767px) {

  .top-about {
    position: relative;
    padding: 15% 0 0 0; /* 下パディングを0にして接地させる */
    z-index: 10;
}

    .about-flex-container {
        padding-bottom: 0;
        display: block; /* フレックス解除 */
    }
    .about-text-frame {
        width: 100%;
        padding: 40px 20px;
        margin-bottom: 0;
    }
    .about-text-frame h2 {
        font-size: 26px;
    }
    .about-image-area {
        position: relative;
        width: 100%;
        margin-top: 20px;
    }
    .ambassador-img {
        width: 90%;
        margin: 0 auto;
    }
    .ambassador-name-v {
        display: none; /* スマホでは非表示にすることが多い */
    }


    .about-text-frame h2 {
    font-size: 6vw;
    font-weight: bold;
    color: #232323;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    text-align: left;
}

.about-text-frame p {
    font-size: 4vw;
    line-height: 2.2;
    margin-bottom: 40px;
    color: #232323;
}



}




/* --------------------about us end-------------------- */



/* --------------------business-------------------- */


  .top-business{
    background: url("../img/bg-parts/bk-bg.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    padding:50px 0 0 0;
    position: relative;
    z-index: 10;
  }


  .subhead-wh h1{
    color: #fff;
  }

/* --- 事業部ボタンエリア全体 --- */

.business-btn-area{
  width: 80%;
  margin: 0 auto;
  padding: 50px 0 150px 0;
}

.business-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px; /* ボタンの高さ */
    background: #ffffff;
    border-radius: 20px; /* 楕円形の角丸 */
    margin-bottom: 25px;
    padding: 0 40px 0 15px; /* 左側に画像用の余白 */
    text-decoration: none;
    position: relative;
    overflow: hidden; /* ホバー色を閉じ込める */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    z-index: 1;
}

/* --- ホバーアニメーション（左から色が変わる） --- */
.business-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* 最初は左に隠す */
    width: 100%;
    height: 100%;
    background-color: #f9be00;
    transition: all 0.5s ease;
    z-index: -1;
}

.business-btn:hover::before {
    left: 0;
}

/* --- 左側の数字とパーツ画像エリア --- */
.business-num-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.business-parts-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 1;
}

.business-num {
    position: relative;
    z-index: 2;
    font-size: 32px;
    font-weight: bold;
    color: #232323;
    letter-spacing: 0.05em;
}

/* --- テキストエリア --- */
.business-name {
    font-size: 24px;
    font-weight: bold;
    color: #232323;
    margin-left: 30px;
    flex-grow: 1;
    transition: color 0.3s ease;
}

/* --- 右側の矢印 --- */
.business-btn::after {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 3px solid #232323;
    border-right: 3px solid #232323;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

/* --- ホバー時の変化 --- */
.business-btn:hover .business-name,
.business-btn:hover .business-num {
    color: #232323; /* 背景色に合わせた文字色（お好みで白など） */
}

.business-btn:hover::after {
    transform: translateX(5px) rotate(45deg);
}


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

  .top-business{
    background: url("../img/bg-parts/bk-bg-sp.jpg");
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding:50px 0 0 0;
  }

  .business-btn-area{
    width: 90%;
    margin: 0 auto;
    padding: 15% 0 25% 0;
  }

      .business-btn {
        height: 80px;
        padding: 0 20px 0 10px;
    }
    .business-num-wrap {
        width: 60px;
        height: 60px;
    }
    .business-num {
        font-size: 5vw;
    }
    .business-name {
        font-size: 4vw;
        margin-left: 15px;
    }


  }



/* --------------------business end-------------------- */


/* --------------------top-recruit-------------------- */


/* --- 採用ボタンエリア全体 --- */
.top-recruit {
    padding: 100px 0 200px 0;
    position: relative;
    z-index: 10;
}

.recruit-btn-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 50px 0 0 0;
}

/* --- ボタン本体（ここがグラデーションの枠になる） --- */
.recruit-btn {
    position: relative;
    display: block;
    width: 48%;
    height: 180px;
    border-radius: 20px;
    text-decoration: none;
    padding: 1px; /* この1px分が枠線として見えます */
    
    /* グラデーション枠（パステルカラー） */
    background: linear-gradient(135deg, #ffc4e1, #c5f1ff, #ccffdb, #fff6b1);
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    overflow: hidden;
}

/* --- ボタンの内側（白い背景） --- */
.recruit-btn-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffffff; /* 通常時は白 */
    border-radius: 19px; /* 外枠(20px)より少し小さく */
    overflow: hidden;
    z-index: 1;
}

/* --- ホバー演出（左から色が流れる） --- */
/* recruit-btn-innerの中に黄色い背景を忍ばせます */
.recruit-btn-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #f9be00;
    transition: all 0.5s ease;
    z-index: -1; /* 文字より後ろ */
}

.recruit-btn:hover .recruit-btn-inner::before {
    left: 0;
}

.recruit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- コンテンツ配置 --- */
.recruit-btn-content {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 50px;
}

.recruit-btn-text {
    font-size: 26px;
    font-weight: bold;
    color: #232323;
    letter-spacing: 0.1em;
}

.recruit-btn-arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 3px solid #232323;
    border-right: 3px solid #232323;
    transform: rotate(45deg);
    margin-left: 25px;
}

/* --- 背景装飾画像 --- */
.recruit-btn-img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}



/* --- 広報室リンクエリア --- */
.pr-link-area {
    padding: 20px 0;
    text-align: center;
    margin: 0 auto;
}

.pr-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    padding: 15px 30px;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

/* --- ホバー演出（左からブルーが流れる） --- */
.pr-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #719cc2; /* 指定のブルー */
    transition: all 0.5s ease;
    z-index: -1;
}

.pr-link:hover::before {
    left: 0;
}

/* --- テキスト --- */
.pr-link-text {
    font-size: 25px;
    font-weight: bold;
    color: #232323;
    letter-spacing: 0.05em;
    margin-right: 25px;
    transition: color 0.3s ease;
}

/* --- 円形アイコン部分 --- */
.pr-link-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid #232323;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

/* 矢印（>） */
.pr-link-arrow {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-top: 3px solid #232323;
    border-right: 3px solid #232323;
    transform: rotate(45deg);
    margin-left: -4px; /* 中心調整 */
    transition: all 0.3s ease;
}

/* --- ホバー時の変化 --- */
.pr-link:hover .pr-link-text {
    color: #ffffff; /* ホバー時は文字を白に（青背景で見やすく） */
}

.pr-link:hover .pr-link-circle {
    border-color: #ffffff;
    transform: translateX(10px); /* 円ごと少し右に動かす */
}

.pr-link:hover .pr-link-arrow {
    border-color: #ffffff;
}

.recruit-section03{
    background: url("../img/bg-parts/bk-bg.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    padding:100px 0 0 0;
    position: relative;
    z-index: 10;
}

.recruit-list-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch; /* 全カードの高さを一番高いものに合わせる */
}

.recruit-list-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 背面の全面背景画像 */
.card-full-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.card-full-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 前面のコンテンツ層（上下の画像パーツ含む） */
.card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* ここで背景画像の見え方を調整（上下の隙間） */
    padding: 80px 0 40px; 
}

/* パーツ画像の設定（隙間を徹底排除） */
.parts-top, .parts-bottom {
    width: 100%;
    line-height: 0; 
    font-size: 0;
}

.parts-top img, .parts-bottom img {
    width: 100%;
    height: auto;
    display: block;
}

/* 白背景のメインエリア */
.card-content {
    background-color: #fff;
    padding: 10px 15px 10px;
    flex-grow: 1; /* 中身が少なくても下パーツまで白背景を伸ばす */
    display: flex;
    flex-direction: column;
    /* 画像パーツとの微細な隙間を防ぐ */
    margin-top: -1px;
    margin-bottom: -1px;
}

.card-label {
    align-self: flex-start;
    background-color: #f9be00;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    margin-bottom: 20px;
}

.card-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 15px;
}

.card-text {
    font-size: 12px;
    line-height: 1.8;
    color: #333;
    flex-grow: 1; /* テキストエリアを広げてボタン位置を下に揃える */
}

/* --- 縁取りボタン（ホバーで塗りつぶし） --- */
.service-btn-wrap {
    margin-top: 20px;
}

.service-link-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid #f9be00;
    color: #f9be00;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 11px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.service-link-btn:hover {
    background-color: #f9be00;
    color: #fff;
}

.service-link-btn .arrow {
    margin-left: 8px;
}

/* SP対応 */
@media screen and (max-width: 1024px) {
    .recruit-list-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 767px) {
    .recruit-list-grid {
        grid-template-columns: 1fr;
        width: 80%;
        margin: 0 auto;
    }
    .card-body { padding: 40px 0 30px; }
}

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

    .recruit-section03{
    background: url("../img/bg-parts/bk-bg-sp.jpg");
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding:10% 0 0 0;
    position: relative;
    z-index: 10;
}

  .top-recruit {
    padding: 15% 0 20% 0;
    position: relative;
    z-index: 10;
}


    .recruit-btn-container { flex-direction: column; }
    .recruit-btn { width: 100%; height: 140px; }
    .recruit-btn-text { font-size: 20px; }
    .recruit-btn-content { padding-left: 30px; }

        .pr-link-text {
        font-size: 22px;
    }
    .pr-link-circle {
        width: 45px;
        height: 45px;
    }
    .pr-link-arrow {
        width: 10px;
        height: 10px;
    }

}

/* --------------------top-recruit end-------------------- */


/* --------------------top-media-------------------- */

  .top-media{
    background: url("../img/bg-parts/bk-bg.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    padding:100px 0 0 0;
    position: relative;
    z-index: 10;
  }

  .parts-bk02{
    width: 100%;
  }


  /* --- バナーエリア全体 --- */


.top-banners {
    padding: 60px 0;
    background-color: #f7f7f7; /* 背景色はデザインに合わせて調整してください */
}

.banner-flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    width: 70%;
    margin: 0 auto;
    padding: 50px 0 150px 0;

}

/* --- 各バナー共通 --- */
.banner-item {
    display: block;
    width: calc(50% - 10px); /* 上2つのバナーは横並び */
    text-decoration: none;
    transition: opacity 0.3s ease;
    line-height: 0; /* 画像下の余計な隙間を排除 */
}

.banner-item img {
    width: 100%;
    height: auto;
    border-radius: 4px; /* 必要に応じて角丸を設定 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* --- ホバー演出（少し白くなる） --- */
.banner-item:hover {
    opacity: 0.75; /* 数値が小さいほど白っぽくなります */
}

/* --- 下段の大きなバナー --- */
.banner-full {
    width: 100%;
    margin-top: 20px;
}

.banner-caption {
    line-height: 1.6;
    font-size: 14px;
    color: #fff;
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
}

/* --- スマホ調整（SP：縦一列） --- */
@media screen and (max-width: 767px) {

  .top-media{
    background: url("../img/bg-parts/bk-bg-sp.jpg");
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding:15% 0 0 0;
    position: relative;
    z-index: 10;
  }

    .banner-flex-container {
        flex-direction: column; /* 縦並び */
        width: 80%;
        margin: 0 auto;
        padding: 5% 0 15% 0;

    }

    .banner-item {
        width: 100%; /* 全幅 */
    }

    .banner-full {
        margin-top: 0; /* 隙間はgapで制御 */
    }
    
    .banner-caption {
        font-size: 12px;
        text-align: left; /* スマホでは左寄せが見やすい場合が多いです */
    }
}





/* --------------------top-media end-------------------- */


/* --------------------contact-------------------- */

.top-contact{
    padding: 100px 0;
}

/* --- お問い合わせセクション --- */

.contact-btn-area{
  width: 50%;
  margin: 0 auto;
  padding: 50px 0;
}



/* --- ボタン本体（グラデーション背景） --- */
.contact-btn {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 650px; /* 画像に近い横長サイズ */
    height: 100px;
    padding: 2px; /* ホバー時に「枠線」として見える太さ */
    border-radius: 50px;
    text-decoration: none;
    
    /* 鮮やかなグリーンのグラデーション */
    background: linear-gradient(90deg, #66d9ef, #66efb6, #88f199);
    
    box-shadow: 0 10px 30px rgba(102, 217, 239, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 100 !important;
}

/* --- ボタンの内側 --- */
.contact-btn-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 48px;
    background: transparent; /* 初期状態は透明（親のグラデが見える） */
    transition: background 0.4s ease;
}

/* --- テキストと矢印 --- */
.contact-btn-text {
    font-size: 32px;
    font-weight: bold;
    color: #232323; /* グラデーションの上でも読みやすい色 */
    letter-spacing: 0.1em;
    transition: color 0.4s ease;
}

.contact-btn-arrow {
    position: absolute;
    right: 40px;
    width: 25px;
    height: 2px;
    background-color: #ffffff; /* 初期状態は白 */
    transition: all 0.4s ease;
}

.contact-btn-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -6px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
}

/* --- ホバー時の演出（背景が白になり、枠線が残る） --- */
.contact-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(102, 217, 239, 0.4);
}

.contact-btn:hover .contact-btn-inner {
    background: #ffffff; /* 内側が白くなることで、親のグラデが「枠線」になる */
}

.contact-btn:hover .contact-btn-text {
    color: #232323; /* 白背景になっても文字色を維持（あるいはグラデ色に変更も可） */
}

.contact-btn:hover .contact-btn-arrow {
    background-color: #66efb6; /* 矢印の色をグラデーションの一部に合わせる */
    transform: translateX(10px);
}

.contact-btn:hover .contact-btn-arrow::after {
    border-color: #66efb6;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {

    .top-contact{
        padding: 15% 0;
    }

      .contact-btn-area{
      width: 90%;
      margin: 0 auto;
      padding: 10% 0;
    }

    .contact-btn {
        height: 70px;
    }
    .contact-btn-text {
        font-size: 20px;
    }
    .contact-btn-arrow {
        right: 20px;
        width: 15px;
    }
}




/* --------------------contact end-------------------- */


/* --------------------footer-------------------- */


/* --- フッター全体 --- */
.footer {
    background-color: #666666; /* 画像に合わせたグレー */
    padding: 60px 0 30px;
    color: #ffffff;
    position: relative;
    z-index: 10;
}

.footer-inner {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- 上部エリア（ナビとSNS） --- */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 区切り線 */
    margin-bottom: 30px;
}

/* ナビゲーション */
.footer-nav {
    display: flex;
    list-style: none;
    gap: 30px;
}

.footer-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    transition: opacity 0.3s;
}

.footer-nav a:hover {
    opacity: 0.7;
}

/* SNSアイコン */
.footer-sns {
    display: flex;
    gap: 20px;
}

.footer-sns a {
    display: block;
    width: 40px; /* サイズは画像に合わせて調整 */
    transition: transform 0.3s;
}

.footer-sns a:hover {
    transform: translateY(-3px);
}

.footer-sns img {
    width: 100%;
    height: auto;
}

/* --- 下部エリア（コピーライト） --- */
.footer-bottom {
    text-align: center;
}

.copyright {
    font-size: 13px;
    letter-spacing: 0.05em;
    color: #fff;
}

/* --- スマホ調整（SP：2枚目の画像レイアウト） --- */
@media screen and (max-width: 1024px) {
    .footer {
        padding: 50px 0 20px;
    }

    .footer-top {
        flex-direction: column; /* 縦並び */
        border-bottom: none;    /* SPでは線の位置が変わるか、無くても綺麗です */
        padding-bottom: 0;
    }

    /* メニューを中央揃え・2列または折り返し */
    .footer-nav {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px 25px;
        margin-bottom: 40px;
    }

    .footer-nav li {
        width: auto;
    }

    /* SNSを中央に大きく配置 */
    .footer-sns {
        justify-content: center;
        gap: 30px;
        margin-bottom: 40px;
        width: 100%;
        padding-top: 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.3); /* SP用の区切り線 */
    }

    .footer-sns a {
        width: 50px; /* SPでは少し押しやすく大きく */
    }
}


/* --------------------footer end-------------------- */







/* ===============================================
   ここから下層ページ
   =============================================== */


 /* --------------------about us-------------------- */

    .subpage-fv{
        padding: 0 0 0 0;
        
    }

    .subpage-bg{
    background: url("../img/bg-parts/wh-bg.jpg");
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding:100px 0 0 0;
    z-index: -100;
    }

    .parts-wh03{
      padding: 100px 0 0 0;
    }

   .subpage-title{
    width: 1200px;
    margin: 0 auto;
   }

    .subpage-title02{
    width: 1200px;
    margin: 0 auto;
   }


.subpage-animation-bg {
    position: relative;
    width: 100%;
    /* 重なりを1番下に */
    z-index: 0 !important; 
    clip-path: inset(0); 
    overflow: hidden;
    isolation: auto; /* isolateからautoに戻して重なりを柔軟に */
}

/* パーツも完全に幽霊化 */
.subpage-p-01, .subpage-p-02, .subpage-p-03, .subpage-p-04, .subpage-bg-parts-wrap {
    pointer-events: none !important;
    z-index: -1;
}

/* 以下、既存のアニメーション設定（変更なし） */
.subpage-p-01 { 
    width: 100px; 
    top: 40%; 
    left: 10%; 
    animation: float-v1 3s ease-in-out infinite; 
    animation-delay: 0s; 
}
.subpage-p-02 { 
    width: 220px; 
    top: 40%; 
    right: -2%; 
    animation: float-v2 3s ease-in-out infinite; 
    animation-delay: -2s;
}
.subpage-p-03 { 
    width: 200px; 
    bottom: 10%; 
    left: 2%; 
    animation: float-v3 5s ease-in-out infinite; 
    animation-delay: -5s;
}
.subpage-p-04 { 
    width: 70px; 
    bottom: 64%; 
    left: 70%; 
    animation: float-v4 5s ease-in-out infinite; 
    animation-delay: -3s;
}


/* 固定背景レイヤー */
.subpage-bg-parts-wrap {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* animation-bgの中だけで見えるように重なりを調整 */
    pointer-events: none;
}

/* 個別パーツ */
.subpage-bg-part {
    position: absolute;
    will-change: transform;
    opacity: 1;
}



.main-about-us{
    background-color: rgba(255, 255, 255, 0.6);
    padding: 50px 0 0 0;
}

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


    .main-about-us{
        background-color: rgba(255, 255, 255, 0.6);
        padding: 10% 0 0 0;
    }

    .subpage-bg{
    background: url("../img/bg-parts/wh-bg.jpg");
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding:15% 0 0 0;
    z-index: -100;
    }

    .parts-wh03{
      padding: 10% 0 0 0;
    }

   .subpage-title{
    width: 90%;
    margin: 0 auto;
   }
    .subpage-title02{
    width: 85%;
    margin: 0 auto;
   }

   .contents-txtframe{
    width: 90%;
    margin: 0 auto;
   }

    .subpage-bg-animation-bg {
      position: relative;
      width: 100%;
      z-index: 10 !important; 
      background-color: #ffffff;
      /* スクロール追従にするため clip-path を解除 */
      clip-path: none !important; 
      overflow: hidden;
  }

  /* 固定背景レイヤーを「絶対配置」に変更してスクロールに同期させる */
  .subpage-bg-parts-wrap {
      position: absolute; /* fixed から absolute に変更 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* 親要素(animation-bg)の高さ全体に広がる */
      pointer-events: none;
  }

  /* 個別パーツのサイズと配置をスマホ用に最適化 */
  .subpage-bg-part {
      position: absolute;
      will-change: transform;
      opacity: 1; 
  }

  .subpage-p-01 { 
      width: 80px; 
      top: 15%; 
      left: -5%; 
      animation: float-v1 4s ease-in-out infinite; 
  }
  .subpage-p-02 { 
      width: 100px; 
      top: 5%; 
      right: 5%; 
      animation: float-v2 5s ease-in-out infinite; 
      animation-delay: -1s;
  }
  .subpage-p-03 { 
      width: 120px; 
      bottom: -5%; 
      left: -5%; 
      animation: float-v3 6s ease-in-out infinite; 
      animation-delay: -2s;
  }
  .subpage-p-04 { 
      width: 80px; 
      top: 60%; 
      right: 10%; 
      animation: float-v4 4.5s ease-in-out infinite; 
      animation-delay: -3s;
  }

  /* 各アニメーションの高さもスマホに合わせて微調整（跳ねすぎ防止） */
  @keyframes float-v1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
  @keyframes float-v2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
  @keyframes float-v3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25px); } }
  @keyframes float-v4 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }


}

 /* ---link btn sectio--- */

 .parts-wh04{
    z-index: 500;
 }

/* --- セクション全体 --- */
.link-btn-section {
    padding: 0 0 0 0;
    /* CSSファイルがcssフォルダにある場合は ../ が必要 */
    background: url("../img/bg-parts/wh-bg.jpg"); 
    background-position: top;
    background-repeat: repeat;
    background-size: cover;
    position: relative;
    /* 内部のz-indexを独立させ、背景アニメーションより確実に手前に出す */
    isolation: isolate; 
    z-index: 100; 
    margin: 0 0 100px 0;
}

.link-btn-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    z-index: 100;
    padding: 50px 0 0 0;
}

.link-card {
    position: relative;
    display: block;
    width: 48%;
    height: 220px;
    border-radius: 25px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    
    /* アニメーションより確実に上に */
    z-index: 9999 !important; 
    
    /* 【超重要】親がnoneでも自分はautoにする */
    pointer-events: auto !important; 
    
    transition: transform 0.3s ease;
}

/* 背景レイヤー共通 */
.link-card-bg,
.link-card-bg-on {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* 画像の切り替えを滑らかにする */
    transition: opacity 0.5s ease, transform 0.8s ease;
}

/* 通常背景：一番下(1) */
.link-card-bg {
    z-index: 1;
    opacity: 1;
}

/* ホバー背景：通常背景の上(2) */
.link-card-bg-on {
    z-index: 2;
    opacity: 0;
}

/* 画像パス（環境に合わせて ../ を調整してください） */
.concept-btn .link-card-bg { background-image: url("../img/btn-parts/link-btn01.png"); }
.concept-btn .link-card-bg-on { background-image: url("../img/btn-parts/link-btn01-on.png"); }

.message-btn .link-card-bg { background-image: url("../img/btn-parts/link-btn02.png"); }
.message-btn .link-card-bg-on { background-image: url("../img/btn-parts/link-btn02-on.png"); }

/* --- 中央のテキスト：最前面(10) --- */
.link-card-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10; 
}

.link-card-text {
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.link-card-text::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    margin-left: 15px;
    vertical-align: middle;
}

/* --- ふわふわパーツ：背景と文字の間(5) --- */
.float-parts {
    position: absolute;
    pointer-events: none; /* パーツ自体はマウスを無視して下のボタンに届ける */
    z-index: 5; 
    opacity: 0.5;
}

/* --- ホバー時の動き --- */
.link-card:hover {
    transform: translateY(-5px);
}

/* 背景を切り替える最重要指定 */
.link-card:hover .link-card-bg-on {
    opacity: 1 !important;
}

.link-card:hover .link-card-bg,
.link-card:hover .link-card-bg-on {
    transform: scale(1.08); /* ズーム感を少し強調 */
}

/* ふわふわアニメーション */
.p1 { width: 110px; top: -5%; left: -7%; animation: card-float 17s infinite; }
.p2 { width: 80px; bottom: 0%; right: -5%; animation: card-float 15s infinite reverse; }
.p3 { width: 80px; bottom: 30%; left: -5%; animation: card-float 12s infinite; animation-delay: -3s; }

@keyframes card-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(15px, 20px) rotate(5deg); }
    66% { transform: translate(-10px, 10px) rotate(-5deg); }
}

/* スマホ調整 */
@media screen and (max-width: 767px) {

    .link-btn-container { 
        flex-direction: column; 
        padding: 10% 0 0 0;
        width: 80%;
        margin: 0 auto;
    }
    .link-card { width: 100%; height: 160px; }
    .link-card-text { font-size: 22px; }
}


/* ---company section--- */

.company-info-section{
    background-color: rgba(255, 255, 255, 0.7);
    padding: 50px 0 0 0;
}

.company-info-title h2{
    color: #232323;
    text-align: center;
}


.company-table-wrap {
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 20px;
    padding: 20px 40px;
}

.table-row {
    display: flex;
    padding: 30px 0;
    border-bottom: 1px solid #ccc; 
    align-items: flex-start;
}

.table-row:last-child {
    border-bottom: none; 
}

.table-row dt {
    width: 250px;
    font-weight: 700;
    font-size: 15px;
    color: #232323;
    flex-shrink: 0; 
}

.table-row dd {
    font-size: 15px;
    line-height: 1.8;
    color: #232323;
    margin: 0;
}

.access-box{
    width: 750px;
    margin: 0 auto;
    max-width: 85%;
}

.access-section {
    padding: 60px 0 100px;
    position: relative;
    z-index: 10;
}

/* ACCESSラベル（黒背景・白文字） */
.access-label {
    display: inline-block;
    background: #444; 
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    padding: 10px 20px;
    letter-spacing: 0.1em;
    margin-bottom: 0; 
    position: relative;
    z-index: 2;
}

/* マップ */
.map-wrapper {
    width: 100%;
    height: 250px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    line-height: 0; 
}

/* iframeをレスポンシブに対応させる */
.map-wrapper iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(20%); 
}

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

    .company-info-section{
    background-color: rgba(255, 255, 255, 0.6);
    padding: 10% 0 0 0;
    }

    .company-table-wrap {
    width: 80%;
    margin: 0 auto;
    border-radius: 20px;
    padding: 20px 40px;
}


    .access-label {
        font-size: 24px;
        padding: 8px 30px;
    }
    .map-wrapper {
        height: 300px; /* スマホでは高さを抑える */
    }
}
@media screen and (max-width: 767px) {
    .company-table-wrap {
        padding: 10px 20px;
        background: transparent; 
    }

    .table-row {
        flex-direction: column; 
        padding: 20px 0;
    }

    .table-row dt {
        width: 100%;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .table-row dd {
        width: 100%;
        font-size: 16px;
    }
}

 /* --------------------about us-------------------- */


  /* --------------------office section-------------------- */


 .top-loop-slider {
    position: relative;
    width: 100%;
    height: 60vh; /* 画面高さの60%程度。お好みで調整してください */
    overflow: hidden;
    background-color: #000;
}

/* 共通の画像設定 */
.slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* 初期状態は透明 */
    animation: imageLoopFade 15s infinite; /* 15秒かけてループ */
}

/* 各画像の設定 */
.item01 {
    background-image: url('../img/about-us/office/office-top01.jpg');
}
.item02 {
    background-image: url('../img/about-us/office/office-top02.jpg');
    animation-delay: 5s; /* 5秒遅らせて開始 */
}
.item03 {
    background-image: url('../img/about-us/office/office-top03.jpg');
    animation-delay: 10s; /* 10秒遅らせて開始 */
}


.item04 {
    background-image: url('../img/about-us/walfare/walfare-top01.jpg');
}
.item05 {
    background-image: url('../img/about-us/walfare/walfare-top02.jpg');
    animation-delay: 5s; /* 5秒遅らせて開始 */
}
.item06 {
    background-image: url('../img/about-us/walfare/walfare-top03.jpg');
    animation-delay: 10s; /* 10秒遅らせて開始 */
}


/* フェードアニメーションの定義 */
@keyframes imageLoopFade {
    0% { opacity: 0; transform: scale(1.0); }
    10% { opacity: 1; } /* じわっと表示 */
    33% { opacity: 1; } /* 表示維持 */
    43% { opacity: 0; transform: scale(1.1); } /* ズームしながら消える */
    100% { opacity: 0; }
}

/* 文字を読みやすくするための暗幕（必要に応じて） */
.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* 20%の黒幕 */
    z-index: 5;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
    .top-loop-slider {
        height: 40vh; /* スマホでは高さを抑える */
    }
}


  /* --------------------office section end-------------------- */



  /* --------------------top message section-------------------- */


  .parts-wh05{
    padding: 100px 0 0 0;
  }

  .topmessage-section{
    background: rgba(255, 255, 255, 0.6) ;
  }

  .topmessage-txt{
    width: 90%;
    margin: 0 auto;
  }


  .heading-vertical-line {
    padding-left: 20px; /* 縦線と文字の間の距離 */
    margin-bottom: 30px;
    position: relative;
    display: flex;
    align-items: center; /* 1行の時でも線が中央に来るように */
}

.heading-vertical-line h2{
    text-align: left;
}

/* 黄色の縦線本体 */
.heading-vertical-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;           /* 縦線の太さ */
    height: 100%;         /* 親要素の高さに合わせる */
    background-color: #f9be00; /* サイトカラーのイエロー */
    border-radius: 4px;   /* 角を丸くして柔らかい印象に */
}

.heading-text {
    font-size: 28px;      /* 画像に基づいたサイズ感 */
    font-weight: 800;
    color: #333;
    line-height: 1.4;     /* 2行になった時の行間 */
    margin: 0;
    letter-spacing: 0.02em;
}

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

    .topmessage-txt{
    width: 100%;
    margin: 0 auto;
  }

    .heading-vertical-line {
        padding-left: 15px;
    }
    .heading-text {
        font-size: 20px;   /* スマホで見やすいサイズに */
    }
    .heading-vertical-line::before {
        width: 6px;        /* 線も少し細く */
    }
}

  /* 背景アニメーション */


/* パーツも完全に幽霊化 */
.topmessage-p-01, .topmessage-p-02, .topmessage-p-03, .topmessage-p-04, .topmessage-p-05, .recruitpage-bg-parts-wrap {
    pointer-events: none !important;
    z-index: -1;
}

/* 以下、既存のアニメーション設定（変更なし） */
.topmessage-p-01 { 
    width: 200px; 
    top: 60%; 
    left: 0%; 
    animation: float-v3 5s ease-in-out infinite; 
     animation-delay: -4s;

}
.topmessage-p-02 { 
    width: 800px; 
    top: 20%; 
    right: 0%; 
}
.topmessage-p-03 { 
    width: 70px; 
    bottom: 0%; 
    right: 5%; 
    animation: float-v3 5s ease-in-out infinite; 
    animation-delay: -5s;
    z-index: 2;
}
.topmessage-p-04 { 
    width: 150px; 
    bottom: 55%; 
    right: -3%; 
    animation: float-v4 4s ease-in-out infinite; 
    animation-delay: -4s;
}

.topmessage-p-05 { 
    width: 300px; 
    bottom: 10%; 
    right: -5%; 
    animation: float-v4 5s ease-in-out infinite; 
    animation-delay: -3s;
}



/* 固定背景レイヤー */
.recruitpage-bg-parts-wrap {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* animation-bgの中だけで見えるように重なりを調整 */
    pointer-events: none;
}

/* 個別パーツ */
.topmessage-bg-part {
    position: absolute;
    will-change: transform;
}



.recruitpage-bg-part { position: absolute; will-change: transform; opacity: 1; }

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


  /* 個別パーツのサイズと配置をスマホ用に最適化 */

  .topmessage-p-01 { 
    width: 50px; 
    top: 1%; 
    left: 0%; 
    animation: float-v3 5s ease-in-out infinite; 
     animation-delay: -4s;
}

.topmessage-p-02 { 
    width: 250px; 
    top: 0.2%; 
    right: -10%; 
}
.topmessage-p-03 { 
    width: 30px; 
    bottom: 97%; 
    right: 5%; 
    animation: float-v3 5s ease-in-out infinite; 
    animation-delay: -5s;
    z-index: 2;
}
.topmessage-p-04 { 
    width: 130px; 
    bottom: 96%; 
    right: -10%; 
    animation: float-v4 4s ease-in-out infinite; 
    animation-delay: -4s;
}

.topmessage-p-05 { 
    width: 100px; 
    bottom: 80%; 
    right: 80%; 
    animation: float-v4 5s ease-in-out infinite; 
    animation-delay: -3s;
}



  /* 各アニメーションの高さもスマホに合わせて微調整（跳ねすぎ防止） */
  @keyframes float-v1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
  @keyframes float-v2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
  @keyframes float-v3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25px); } }
  @keyframes float-v4 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }


}


  /* --------------------top message section end-------------------- */


  /* --------------------philoshy section -------------------- */

  .philoshy-head-big01 p{
    font-size: 30px;
  }

  .philoshy-head-big02 p{
    font-size: 40px;
    color: #f9be00;
  }

 .philoshy-head-big03 p{
    font-size: 30px;
    color: #fff;
  }

  .vision-txt p{
    color: #fff;
  }
  .vision-section{
    background: url("../img/bg-parts/bk-bg.jpg");
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding:100px 0 0 0;
    z-index: -100;
    }


    .vision-img-positionbox{
        position: relative;
    }
    
    .vision-parts01{
        width: 150px;
        position: absolute;
        top: 0px;
        right: 50px;
        z-index: 1;
        animation: float-v3 5s ease-in-out infinite; 
        animation-delay: -4s;

    }

    .vision-parts02{
        width: 550px;
        position: absolute;
        top: -100px;
        z-index: 5;
        right: -300px;
        }

        .vision-parts03{
        width: 100px;
        position: absolute;
        bottom: -150px;
        right: -50px;
        z-index: 10;
        animation: float-v4 4s ease-in-out infinite; 
        animation-delay: -4s;

        }

        .culture-parts{
            width: 800px;
            padding: 50px 0 0 0;
        }


        @media screen and (max-width: 767px) {
            .philoshy-head-big01 p{
                font-size: 4vw;
            }

            .philoshy-head-big02 p{
                font-size: 6vw;
                color: #f9be00;
            }

            .philoshy-head-big03 p{
                font-size: 5vw;
                color: #fff;
            }

            .vision-txt p{
                color: #fff;
            }
            .vision-section{
                background: url("../img/bg-parts/bk-bg-sp.jpg");
                background-position: top;
                background-repeat: repeat;
                background-size: contain;
                background-attachment: scroll;
                padding:100px 0 0 0;
                z-index: -100;
            }

            .vision-parts01{
                width: 50px;
                position: absolute;
                top: -100px;
                right: 60px;
                z-index: 1;
                animation: float-v3 5s ease-in-out infinite; 
                animation-delay: -4s;

            }

            .vision-parts02{
            width: 220px;
            position: absolute;
            top: -150px;
            z-index: 5;
            right: -100px;
            }

            .vision-parts03{
            width: 30px;
            position: absolute;
            bottom: 380px;
            right: 0px;
            z-index: 10;
            animation: float-v4 4s ease-in-out infinite; 
            animation-delay: -4s;

            }


    }

    /* 7つの文化 */

.culture-container {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    width: 85%;
    margin: 0 auto;
}

.culture-menu {
    width: 40%;
    list-style: none;
    padding: 0;
}

.culture-item {
    font-size: 24px;
    font-weight: 800;
    padding: 30px 0;
    border-bottom: 2px solid #333;
    cursor: pointer;
    color: #333;
    position: relative;
    transition: 0.3s;
}

.culture-item span {
    font-size: 18px;
    margin-right: 20px;
}

.culture-item.active {
    color: #f9be00;
    border-bottom-color: #f9be00;
}

.culture-item.active::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 15px solid #f9be00;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.culture-display {
    width: 50%;
    position: relative;
}

.culture-img-wrap {
    display: none;
}

.culture-img-wrap.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.sp-only { display: none; }

/* --- SP版スタイル（左右チラ見せ＋ドットカスタム） --- */
@media screen and (max-width: 767px) {
    .pc-only { display: none; }
    .sp-only { display: block; }
    
    /* 1. スライダーの外側の高さを強制的にリセット */
    .culture-section {
        padding-bottom: 0 !important;
    }

    .culture-slider {
        padding: 20px 0 0 !important;
        margin-bottom: 0 !important;
        /* ここが重要：高さの自動計算を止める */
        height: auto !important; 
        min-height: 0 !important;
    }

    /* 2. Slickが内部で生成する「高さ固定用のラッパー」を強制上書き */
    .culture-slider .slick-list,
    .culture-slider .slick-track {
        height: auto !important; 
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 3. 各スライドの div と img の余白をゼロにする */
    .culture-slider .slide-item,
    .culture-slider div {
        padding: 0 10px !important;
        height: auto !important;
        margin: 0 !important;
        line-height: 0 !important; /* 画像の下の隙間を消す */
    }

    .culture-slider img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto !important;
        border-radius: 10px;
    }

    /* 4. ドットを「無理やり」画像の下に引き上げる */
    .culture-slider .slick-dots {
        position: relative !important; /* absoluteをやめて順番通りに並べる */
        top: -0px !important; /* マイナス値を大きくして画像に重ねる勢いで引き上げる */
        display: flex !important;
        justify-content: center;
        list-style: none;
        width: 100%;
        padding: 0;
        margin: 0 auto !important;
        z-index: 10;
    }

    .culture-slider .slick-dots li {
        margin: 0 5px;
        width: auto !important;
        height: auto !important;
    }

    .culture-slider .slick-dots button {
        font-size: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ccc;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .culture-slider .slick-dots li.slick-active button {
        background: #f9be00;
    }

} 

/* --------------------philoshy section end-------------------- */



 /* --------------------business-------------------- */


 /* service section */

.service-section {
    padding: 100px 0;
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* 全体の横幅を 800px に固定 */
    width: 100%;
    max-width: 800px; 
    margin: 0 auto;
    padding: 50px 0 0 0;
}

/* サービスアイテム：背景・アニメーションの土台 */
.service-item {
    position: relative;
    display: block;
    background: #fff;
    border-radius: 20px;
    text-decoration: none;
    padding: 40px 45px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.04);
    overflow: hidden;
    transition: background-color 0.4s ease, transform 0.3s ease;
    z-index: 1;
}

/* ホバー時の背景色変化 */
.service-item:hover {
    background-color: #ffe8a6;
    transform: translateY(-3px);
}

/* --- 鉤括弧（右上） --- */
.service-item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-top: 3px solid #f9be00;
    border-right: 3px solid #f9be00;
    border-top-right-radius: 20px;
    transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}

/* --- 鉤括弧（左下） --- */
.service-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-bottom: 3px solid #f9be00;
    border-left: 3px solid #f9be00;
    border-bottom-left-radius: 20px;
    transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}

/* ホバー時に鉤括弧を縮小（内側へ移動） */
.service-item:hover::before {
    top: 15px;
    right: 15px;
}
.service-item:hover::after {
    bottom: 15px;
    left: 15px;
}

.service-inner {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    position: relative;
    z-index: 5;
}

/* 数字画像：ボタンの高さ中央付近に来るよう調整 */
.service-num-img {
    width: 90px; /* 画像の大きさを少しアップ */
    flex-shrink: 0;
    margin-right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-num-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 事業部名 */
.service-name {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0;
    flex-grow: 1;
}

/* --- View More ボタン --- */
.service-btn {
    position: relative;
    width: 150px;
    height: 44px;
    border: 1px solid #f9be00;
    border-radius: 22px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: 0.4s;
}

/* ボタン背景のスライド */
.service-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #f9be00;
    transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.service-btn span {
    position: relative;
    z-index: 2;
    font-size: 13px;
    font-weight: 700;
    color: #f9be00;
    text-transform: uppercase;
    transition: 0.4s;
}

/* ホバー時のボタン変化 */
.service-item:hover .service-btn::before {
    left: 0;
}
.service-item:hover .service-btn span {
    color: #fff;
}

@media screen and (max-width: 767px) {
    .service-list {
        max-width: 92%;
        padding: 10% 0 0 0;
    }
    .service-item {
        padding: 40px 20px;
    }
    .service-inner {
        flex-direction: column;
        text-align: center;
    }
    .service-num-img {
        margin-right: 0;
        margin-bottom: 15px;
        width: 80px;
    }
    .service-name {
        font-size: 18px;
        margin-bottom: 25px;
    }
    .service-item::before, .service-item::after {
        width: 40px;
        height: 40px;
    }
}


  /* --------------------business end-------------------- */


  /* --------------------business01-------------------- */

.business01-section {
        padding: 80px 0 0 0;
    }

    .media-box{
        background: #fadd7d;
        width: 40%;
        padding: 10px 0 10px 20px;
        margin-top: 20px;
    }

    /* 上下の太いライン */
    .section-divider {
        width: 100%;
        height: 1px;
        background: #ccc;
        margin: 20px 0 40px 0;
    }

    /* 2カラムグリッド：ここを修正 */
    .business01-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 60px 40px;
        padding: 20px 0;
        width: 90%;
        margin: 0 auto;
        /* 要素を左に寄せる */
        justify-content: start; 
    }

    .business01-item {
        display: flex;
        flex-direction: column;
        /* 奇数番目の最後の要素が2列分広がらないように明示的に指定 */
        grid-column: span 1; 
    }

    .business01-img {
        width: 100%;
        margin-bottom: 25px;
        overflow: hidden;
        border-radius: 20px;
    }

    .business01-img img {
        width: 100%;
        height: auto;
        display: block;
        /* ホバーの動きを削除 */
    }

    /* テキスト情報 */
    .business01-info {
        flex-grow: 1;
    }

    .business01-title {
        font-size: 22px;
        font-weight: 800;
        color: #333;
        margin-bottom: 5px;
    }

    .business01-en {
        font-size: 14px;
        font-weight: 700;
        color: #f9be00;
        letter-spacing: 0.05em;
        margin-bottom: 20px;
    }

    .business01-desc {
        font-size: 15px;
        line-height: 1.7;
        color: #555;
        margin-bottom: 15px;
    }

    /* 各項目の下の細いライン */
    .item-divider {
        width: 100%;
        height: 1px;
        background: #ccc;
        margin-top: 20px;
    }

    .link-btn-wrap {
    text-align: center;
    width: 90%;
    margin: 20px auto;
}

    .btn-reputation {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        /* 画像に基づいたサイズ感 */
        width: 100%;
        max-width: 650px;
        padding: 18px 60px 18px 40px; 
        border: 2px solid #2e6cb5; 
        border-radius: 50px; 
        text-decoration: none;
        background-color: #fff;
        transition: all 0.3s ease;
    }

    .btn-reputation span {
        color: #2e6cb5;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    /* 右側の「＞」矢印アイコン */
    .btn-reputation::after {
        content: "";
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        /* 太めの「＞」をボーダーで作成 */
        width: 12px;
        height: 12px;
        border-top: 3px solid #2e6cb5;
        border-right: 3px solid #2e6cb5;
        transform: translateY(-50%) rotate(45deg);
        transition: all 0.3s ease;
    }

    /* ホバー時の演出：背景が青くなり、文字と矢印が白くなる */
    .btn-reputation:hover {
        background-color: #2e6cb5;
        box-shadow: 0 5px 15px rgba(46, 108, 181, 0.2);
    }

    .btn-reputation:hover span {
        color: #fff;
    }

    .btn-reputation:hover::after {
        border-color: #fff;
        right: 25px; /* 少し右に動くアニメーション */
    }

    @media screen and (max-width: 767px) {
      .media-box{
        background: #fadd7d;
        width: 100%;
        padding: 10px 0 10px 20px;
        margin-top: 20px;
    }

        .btn-reputation {
            padding: 15px 40px 15px 20px;
            max-width: 90%;
        }
        .btn-reputation span {
            font-size: 14px; 
        }
        .btn-reputation::after {
            right: 20px;
            width: 10px;
            height: 10px;
        }
        .business01-section {
            padding: 10% 0 0 0;
        }
        .business01-grid {
            grid-template-columns: 1fr; /* スマホでは全幅 */
            gap: 40px;
            width: 95%;
        }
        
        .business01-title {
            font-size: 5vw;
        }

        .business01-desc {
            font-size: 3.5vw;
            line-height: 1.7;
            color: #555;
            margin-bottom: 15px;
        }
        .business01-en {
            font-size: 4vw;
            font-weight: 700;
            color: #f9be00;
            letter-spacing: 0.05em;
            margin-bottom: 20px;
        }
    }


    /* 背景アニメーション */


    /* パーツも完全に幽霊化 */
    .business01page-p-01, .business01page-p-02, .business01page-p-03, .business01page-p-04, .business01page-bg-parts-wrap {
        pointer-events: none !important;
        z-index: -1;
    }

    /* 以下、既存のアニメーション設定（変更なし） */
    .business01page-p-01 { 
        width: 80px; 
        top: 10%; 
        left: 5%; 
        animation: float-v3 5s ease-in-out infinite; 
        animation-delay: -5s;

    }
    .business01page-p-02 { 
        width: 600px; 
        top: 0%; 
        right: 0%; 
    }
    .business01page-p-03 { 
        width: 50px; 
        top: 40%; 
        right: 10%; 
        animation: float-v3 5s ease-in-out infinite; 
        animation-delay: -5s;
    }
    .business01page-p-04 { 
        width: 70px; 
        bottom: 55%; 
        left: 78%; 
        animation: float-v4 5s ease-in-out infinite; 
        animation-delay: -3s;
    }

    /* 個別パーツ */
    .business01page-bg-part {
        position: absolute;
        will-change: transform;
        opacity: 1;
    }


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


    /* 個別パーツのサイズと配置をスマホ用に最適化 */
    .business01page-bg-part {
        position: absolute;
        will-change: transform;
        opacity: 0.4; 
    }

    .business01page-p-01 { 
        width: 50px; 
        top: 10%; 
        left: 0%; 
    }
    .business01page-p-02 { 
        width: 300px; 
        top: 0%; 
        right: -20%; 
    }
    .business01page-p-03 { 
        width: 30px; 
        top: 7%; 
        right: 13%; 
        animation: float-v3 6s ease-in-out infinite; 
        animation-delay: -2s;
    }
    .business01page-p-04 { 
        width: 30px; 
        top: 5%; 
        left: 70%; 
        animation: float-v4 4.5s ease-in-out infinite; 
        animation-delay: -3s;
    }


    }


    /* --------------------business01 end-------------------- */



  /* --------------------contact-------------------- */



.contact-bg{
padding:100px 0 0 0;
z-index: -100;
}

.contact-section p{
    text-align: center;
}

.contact-section {
    padding: 100px 0;
    position: relative;
    z-index: 10;
}

/* フォーム全体の白い角丸ボックス */
.contact-form-wrap {
    max-width: 700px; /* 事業部紹介ボタンと同じ幅 */
    margin: 0 auto;
    background: #f8f9fa; /* 画像に合わせた非常に薄いグレー/白 */
    padding: 60px 80px;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.form-group {
    margin-bottom: 35px;
}

/* ラベルとバッジ */
.form-label {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
    color: #333;
}

.badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 10px;
    color: #fff;
    font-weight: 700;
}

.badge.required { background-color: #f16272; } /* 必須：赤系 */
.badge.optional { background-color: #8c9094; } /* 任意：グレー系 */

/* 入力項目共通 */
.form-input, .form-textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 12px 15px;
    font-size: 16px;
    background: #fff;
    transition: border-color 0.3s ease;
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: #f9be00; /* ホバー色と統一 */
}

/* ラジオボタン */
.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.radio-item {
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 同意・送信エリア */
.form-agreement {
    text-align: center;
    margin: 40px 0 20px;
    font-size: 14px;
}

.form-submit {
    text-align: center;
}

.submit-btn {
    background-color: #009245; /* 送信ボタン：画像に合わせた緑 */
    color: #fff;
    border: none;
    width: 280px;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.submit-btn:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* プレースホルダ（例のテキスト）のスタイル */
.form-input::placeholder,
.form-textarea::placeholder {
    /* 以前より少し薄いグレー（#bbb）に設定 */
    color: #bbbbbb; 
    font-size: 14px;
    /* ブラウザによる透過度設定をリセット */
    opacity: 1; 
}

/* Internet Explorer 用（念のため） */
.form-input:-ms-input-placeholder,
.form-textarea:-ms-input-placeholder {
    color: #bbbbbb;
}

/* Edge 用 */
.form-input::-ms-input-placeholder,
.form-textarea::-ms-input-placeholder {
    color: #bbbbbb;
}


/* スマホ対応 */
@media screen and (max-width: 767px) {


    .contact-bg{
    padding: 15% 0 0 0;
    z-index: -100;
    }

    .contact-form-wrap {
        padding: 40px 20px;
        border-radius: 20px;
    }
    .submit-btn {
        width: 100%;
    }
}


  /* --------------------contact end-------------------- */


/* --------------------topics-------------------- */

.topics-section {
    padding: 100px 0 0 0;
}

/* タブメニュー */
.topics-tab-wrap {
    margin-bottom: 60px;
    text-align: center;
}

.topics-tab-list {
    display: inline-flex;
    gap: 30px; 
    list-style: none;
    padding: 20px 60px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border-radius: 5px;
}

.tab-item {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s;
}

/* 選択中の下線（イエロー） */
.tab-item.active {
    color: #f9be00;
}
.tab-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #f9be00;
    transition: width 0.3s;
}
.tab-item.active::after {
    width: 100%;
}

/* 記事一覧レイアウト */
.topics-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
}

/* 記事カード全体 */
.topic-card {
    position: relative; /* ★追加：全体リンクの基準点 */
    background: #fff;
    transition: opacity 0.4s, transform 0.3s, box-shadow 0.3s; 
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    cursor: pointer;
}

/* ★追加：タイトルのリンクをカード全体に広げる魔法 */
.topic-title a {
    text-decoration: none;
    color: inherit;
}

/* タイトルのリンクを疑似要素でカードの端まで広げる */
.topic-title a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* カード内の全要素（画像やテキスト）の上に透明な膜を張る */
}

/* ホバー時のカードの浮き上がり */
.topic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 非表示にする時のクラス */
.topic-card.is-hide {
    display: none;
}

/* 画像コンテナ */
.topic-img {
    position: relative;
    z-index: 1; /* リンク膜(10)より下に配置 */
    overflow: hidden;
    background: #fff; 
}

/* 画像本体 */
.topic-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease, opacity 0.4s ease, filter 0.4s ease;
}

/* ホバー時に白く光るアニメーション */
.topic-card:hover .topic-img img {
    transform: scale(1.05);     
    opacity: 0.8;               
    filter: brightness(1.1);    
}

.topic-content {
    padding: 20px 10px;
}

.topic-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.topic-label {
    background: #444;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
}

.topic-date {
    font-size: 12px;
    color: #999;
}

.topic-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: #333;
}

/* SP対応 */
@media screen and (max-width: 767px) {
    .topics-section {
        padding: 10% 0 0 0;
    }

    .topics-tab-wrap {
        position: relative;
        margin-bottom: 70px; 
        text-align: center;
    }

    .topics-tab-wrap::after {
        content: "";
        position: absolute;
        bottom: -35px; 
        left: 50%;
        width: 15px;
        height: 15px;
        border-right: 3px solid #f9be00; 
        border-bottom: 3px solid #f9be00;
        transform: translateX(-50%) rotate(45deg);
        animation: arrowMoveVertical 1.5s infinite; 
    }

    @keyframes arrowMoveVertical {
        0% { bottom: -35px; opacity: 0.5; }
        50% { bottom: -45px; opacity: 1; } 
        100% { bottom: -35px; opacity: 0.5; }
    }

    .topics-tab-list {
        gap: 15px;
        padding: 10px 15px;
        flex-wrap: wrap;
        justify-content: center;
        background: #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        display: inline-flex;
        border-radius: 5px;
    }

    .topics-list {
        width: 95%;
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin: 0 auto 50px;
    }

    .topic-card {
        position: relative; /* ★重要：SPでも全体リンクを有効化 */
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .topic-img {
        width: 100px;
        height: 70px;
        flex-shrink: 0;
        border-radius: 5px;
        overflow: hidden;
    }

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

    .topic-content {
        padding: 0;
        flex: 1;
    }

    .topic-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 5px;
    }

    .topic-label {
        font-size: 9px;
        padding: 1px 5px;
        border-radius: 2px;
    }

    .topic-date {
        font-size: 11px;
    }

    .topic-title {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: #333;
    }
}

/* ページネーション */
.topics-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.topics-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    color: #333;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s;
}

.topics-pagination .page-numbers:hover {
    background: #f9be00;
    color: #fff;
}

.topics-pagination .page-numbers.current {
    background: #f9be00;
    color: #fff;
    pointer-events: none;
}

.topics-pagination .prev,
.topics-pagination .next {
    font-size: 18px;
    font-weight: 400;
}

.topics-pagination .dots {
    background: none;
    box-shadow: none;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .topics-pagination {
        margin-top: 40px;
        gap: 6px;
    }

    .topics-pagination .page-numbers {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
}

/* --------------------topics end-------------------- */


/* --------------------recruit-------------------- */

.recruit-txttop01 p{
 text-align: center;
 font-size: 25px;
 padding-top: 50px;
}

.recruit-txttop02 p{
    text-align: center;
    font-size: 18px;
}

.message-section01{
    background: #fff;
    padding:0px 0 0 0;
    z-index: 100;
}

.message-section01-txttop01{
    width: 800px;
    margin: 0 auto;
    background: url("../img/bg-parts/wh-bg.jpg");
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding:50px;
    z-index: 100;
    margin-top: 50px;
}

.message-section01-txttop01 p{
    text-align: center;
}

.message-subhead h1{
  color: #232323;
  text-align: center;
  font-size: 60px;
}

.message-txt-l{
    font-size: 15px;
}



.recruit-section02 {
    padding: 100px 0 0 0;
    position: relative;
    overflow: hidden;
}

.recruit-block {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 120px;
    position: relative;
}

.recruit-block.reverse {
    flex-direction: row-reverse;
}

.recruit-block:last-child {
    margin-bottom: 0;
}

.recruit-img-box {
    width: 50%;
    flex-shrink: 0;
}

.recruit-img-box img {
    width: 100%;
    height: auto;
}

.recruit-text-box {
    width: 50%;
}

.recruit-sub-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    position: relative;
}

.recruit-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

.recruit-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.recruit-list li {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 10px;
    padding-left: 1em;
    text-indent: -1em;
}

.recruit-deco-num {
    position: absolute;
    top: -60px;
    left: 0;
    font-size: 200px;
    font-weight: 900;
    color: rgba(249, 190, 0, 0.1); 
    z-index: -1;
    font-family: 'Arial Black', sans-serif;
}


.recruit-link-btn-section{
    background: #fff;
    padding: 0 0 100px 0;
}

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

.recruit-section02 {
padding: 10% 0 0 0;
position: relative;
overflow: hidden;
}

.recruit-txttop01 p{
 text-align: center;
 font-size: 4vw;
 padding-top: 10%;
}

.recruit-txttop02 p{
    text-align: center;
    font-size: 3.3vw;
    padding-bottom: 15%;
}

.message-section01{
    background: #fff;
    padding:0 0 0 0;
    }

.message-section01-txttop01{
     width: 90%;
    background: url("../img/bg-parts/wh-bg.jpg");
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
    background-attachment: scroll;
    padding:5%;
    z-index: 100;
    margin-top: 10%;
    }

.message-subhead h1{
  color: #232323;
  text-align: center;
  font-size: 9vw;
}
.message-txt-l{
   font-size: 2.5vw;
   line-height: 140%;
}

.recruit-block, 
.recruit-block.reverse {
    flex-direction: column; 
    gap: 30px;
}
.recruit-block{
    width: 95%;
    margin: 0 auto;
}

.recruit-img-box, 
.recruit-text-box {
    width: 100%;
}

.recruit-sub-title {
    font-size: 24px;
    margin-bottom: 20px;
}

.recruit-sub-title {
    font-size: 5vw;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    position: relative;
}

.recruit-desc {
    font-size: 3vw;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}


.recruit-list li {
    font-size: 3.2vw;
    line-height: 1.8;
    color: #444;
    margin-bottom: 10px;
    padding-left: 1em;
    text-indent: -1em;
}

}



/* 背景アニメーション */

.recruitpage-animation-bg {
    position: relative;
    width: 100%;
    /* 重なりを1番下に */
    z-index: 0 !important;
    clip-path: inset(0);
}

/* パーツも完全に幽霊化 */
.recruitpage-p-01, .recruitpage-p-02, .recruitpage-p-03, .recruitpage-p-04, .recruitpage-bg-parts-wrap {
    pointer-events: none !important;
    z-index: -1;
}

/* 以下、既存のアニメーション設定（変更なし） */
.recruitpage-p-01 { 
    width: 1000px; 
    top: 10%; 
    left: -40%; 
}
.recruitpage-p-02 { 
    width: 1000px; 
    top: 0%; 
    right: -40%; 
}
.recruitpage-p-03 { 
    width: 50px; 
    bottom: 30%; 
    left: 18%; 
    animation: float-v3 5s ease-in-out infinite; 
    animation-delay: -5s;
}
.recruitpage-p-04 { 
    width: 70px; 
    bottom: 55%; 
    left: 78%; 
    animation: float-v4 5s ease-in-out infinite; 
    animation-delay: -3s;
}


/* 固定背景レイヤー */
.recruitpage-bg-parts-wrap {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* animation-bgの中だけで見えるように重なりを調整 */
    pointer-events: none;
}

/* 個別パーツ */
.recruitpage-bg-part {
    position: absolute;
    will-change: transform;
    opacity: 1;
}



.recruitpage-bg-part { position: absolute; will-change: transform; opacity: 0.5; }

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

    .recruitpage-bg-animation-bg {
      position: relative;
      width: 100%;
      z-index: 10 !important; 
      background-color: #ffffff;
      /* スクロール追従にするため clip-path を解除 */
      clip-path: none !important; 
      overflow: hidden;
  }

  /* 固定背景レイヤーを「絶対配置」に変更してスクロールに同期させる */
  .recruitpage-bg-parts-wrap {
      position: absolute; /* fixed から absolute に変更 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* 親要素(animation-bg)の高さ全体に広がる */
      pointer-events: none;
  }

  /* 個別パーツのサイズと配置をスマホ用に最適化 */
  .recruitpage-bg-part {
      position: absolute;
      will-change: transform;
      opacity: 0.7;
  }

  .recruitpage-p-01 { 
      width: 350px; 
      top: 70%; 
      left: -30%; 
  }
  .recruitpage-p-02 { 
      width: 400px; 
      top: -20%; 
      right: -30%; 
  }
  .recruitpage-p-03 { 
      width: 30px; 
      bottom: 40%; 
      left: 8%; 
      animation: float-v3 6s ease-in-out infinite; 
      animation-delay: -2s;
  }
  .recruitpage-p-04 { 
      width: 30px; 
      top: 25%; 
      left: 85%; 
      animation: float-v4 4.5s ease-in-out infinite; 
      animation-delay: -3s;
  }

  /* 各アニメーションの高さもスマホに合わせて微調整（跳ねすぎ防止） */
  @keyframes float-v1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
  @keyframes float-v2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
  @keyframes float-v3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25px); } }
  @keyframes float-v4 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }


}


/* リンクボタン */

.recruit-link-btn-section {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}


.recruit-link-btn-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    z-index: 100;
    padding: 0 0 0 0;
}

/* 背景レイヤー共通 */
.recruit-link-card-bg,
.recruit-link-card-bg-on,
.allrecruit-link-card-bg,
.allrecruit-link-card-bg-on,
.aboutus-link-card-bg,
.aboutus-link-card-bg-on {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* 画像の切り替えを滑らかにする */
    transition: opacity 0.5s ease, transform 0.8s ease;
}

/* 通常背景：一番下(1) */
.recruit-link-card-bg,
.allrecruit-link-card-bg,
.aboutus-link-card-bg {
    z-index: 1;
    opacity: 1;
}

/* ホバー背景：通常背景の上(2) */
.recruit-link-card-bg-on,
.allrecruit-link-card-bg-on,
.aboutus-link-card-bg-on {
    z-index: 2;
    opacity: 0;
}

/* 画像パス（環境に合わせて ../ を調整してください） */
.office-btn .recruit-link-card-bg { background-image: url("../img/btn-parts/link-btn03.png"); }
.office-btn .recruit-link-card-bg-on { background-image: url("../img/btn-parts/link-btn03-on.png"); }

.employeebenefits-btn .recruit-link-card-bg { background-image: url("../img/btn-parts/link-btn04.png"); }
.employeebenefits-btn .recruit-link-card-bg-on { background-image: url("../img/btn-parts/link-btn04-on.png"); }

.allrecruit-btn .allrecruit-link-card-bg { background-image: url("../img/btn-parts/link-btn05.png"); }
.allrecruit-btn .allrecruit-link-card-bg-on { background-image: url("../img/btn-parts/link-btn05-on.png"); }

.aboutus-btn .aboutus-link-card-bg { background-image: url("../img/btn-parts/link-btn06.png"); }
.aboutus-btn .aboutus-link-card-bg-on { background-image: url("../img/btn-parts/link-btn06-on.png"); }



/* --- ホバー時の動き --- */
.link-card:hover {
    transform: translateY(-5px);
}

/* 背景を切り替える最重要指定 */
.link-card:hover .recruit-link-card-bg-on,
.link-card:hover .allrecruit-link-card-bg-on,
.link-card:hover .aboutus-link-card-bg-on {
    opacity: 1 !important;
}

.link-card:hover .recruit-link-card-bg,
.link-card:hover .recruit-link-card-bg-on,
.link-card:hover .allrecruit-link-card-bg,
.link-card:hover .allrecruit-link-card-bg-on,
.link-card:hover .aboutus-link-card-bg,
.link-card:hover .aboutus-link-card-bg-on  {
    transform: scale(1.08); /* ズーム感を少し強調 */
}


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

    .recruit-link-btn-container { 
        flex-direction: column; 
        padding: 10% 0 0 0;
        width: 80%;
        margin: 0 auto;
    }
    .link-card { width: 100%; height: 160px; }
    .link-card-text { font-size: 22px; }
}




/* --------------------recruit end-------------------- */


/* --------------------recruit info-------------------- */

.recruit-info-section h3{
    text-align: center;
    font-size: 20px;
}

@media screen and (max-width: 767px) {
.recruit-info-section h3{
    text-align: center;
    font-size: 4vw;
}
}

/* ボタンの配置エリア */
.recruit-entry-wrap {
    text-align: center;
    margin-top: 60px; /* アコーディオンとの間隔 */
    padding-bottom: 40px;
}

/* 応募ボタン本体 */
.entry-btn {
    display: inline-flex;
    flex-direction: column; /* 英語と日本語を縦に並べる */
    align-items: center;
    justify-content: center;
    min-width: 320px;
    padding: 20px 40px;
    border: 2px solid #20ad20; /* 初期の枠線も緑に */
    border-radius: 5px; /* 特別感を出す長方形 */
    
    /* ★初期状態：塗りつぶし★ */
    background-color: #20ad20; /* 鮮やかなグリーン */
    color: #fff;               /* 文字は白 */
    
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease;
}

.entry-btn-en {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.2;
}

.entry-btn-jp {
    font-size: 14px;
    font-weight: 700;
    margin-top: 5px;
}

/* --- ホバーアニメーション（塗りつぶしから枠線へ） --- */
/* ::beforeを使い、緑色の背景をホバーで消す演出 */
.entry-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 最初は全幅 */
    height: 100%;
    background-color: #20ad20; /* 塗りつぶしの緑 */
    z-index: -1;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.entry-btn:hover {
    /* ★ホバー状態：枠線のみ★ */
    background-color: transparent; /* 背景を透明に */
    color: #20ad20;               /* 文字色を緑に */
    
    box-shadow: 0 10px 20px rgba(32, 173, 32, 0.2); /* 緑色の影 */
    transform: translateY(-3px); /* 少し上に浮き上がる */
}

/* ホバー時に緑色の背景を左へ引っ込める */
.entry-btn:hover::before {
    width: 0;
}

/* 注意書きテキスト */
.entry-note {
    font-size: 12px;
    color: #888;
    margin-top: 15px;
}

/* SP対応 */
@media screen and (max-width: 767px) {
    .recruit-entry-wrap {
        margin-top: 40px;
    }
    .entry-btn {
        min-width: 80%;
        padding: 15px 20px;
    }
    .entry-btn-en {
        font-size: 20px;
    }
    .entry-btn-jp {
        font-size: 12px;
    }
}

/* ボタンを包むコンテナ */
.service-btn-wrap {
    margin-top: 20px;
}

/* 縁取りボタンの基本スタイル */
.service-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* 背景は透明 */
    color: #f9be00;               /* 文字色は黄色 */
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 30px;            /* サイズ調整 */
    border: 2px solid #f9be00;    /* 黄色の縁取り */
    border-radius: 50px;          /* カプセル型 */
    position: relative;
    z-index: 1;
    overflow: hidden;             /* ホバー時の塗りつぶし用 */
    transition: all 0.3s ease;
}

.service-link-btn .arrow {
    margin-left: 10px;
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* --- ホバー時に色がつくアニメーション --- */
.service-link-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* 最初は幅ゼロ */
    height: 100%;
    background-color: #f9be00; /* ホバー時の背景色（黄色） */
    z-index: -1;
    transition: width 0.3s ease;
}

.service-link-btn:hover {
    color: #fff; /* 文字色を白に反転 */
}

.service-link-btn:hover::before {
    width: 100%; /* 左から右へ塗りつぶし */
}

.service-link-btn:hover .arrow {
    transform: translateX(5px); /* 矢印をスライド */
}

/* SPでの調整 */
@media screen and (max-width: 767px) {
    .service-link-btn {
        font-size: 13px;
        padding: 8px 20px;
        border-width: 1px; /* スマホでは線を少し細く */
    }
}

/* ブラウザ標準の矢印を消す */
summary::-webkit-details-marker {
    display: none;
}
summary {
    display: block; /* Firefox対策 */
    outline: none;
}

.info-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
}

.accordion-item {
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    list-style: none; /* 標準の矢印を消す */
}

.info-number {
    font-size: 18px;
    font-weight: 800;
    color: #f9be00;
    margin-right: 25px;
    border-right: 1px solid #eee;
    padding-right: 15px;
}

.info-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    flex: 1;
}

/* アイコン：プラス・マイナス */
.info-icon {
    width: 20px;
    height: 20px;
    position: relative;
}
.info-icon::before, .info-icon::after {
    content: "";
    position: absolute;
    background-color: #333;
    transition: 0.3s;
}
.info-icon::before { width: 100%; height: 2px; top: 9px; left: 0; }
.info-icon::after { width: 2px; height: 100%; top: 0; left: 9px; }

/* ★CSSのみで開閉状態を判定★ */
/* detailsに[open]属性がついた時のアイコン変化 */
.accordion-item[open] .info-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.content-inner {
    padding: 10px 30px 40px 90px;
    animation: fadeIn 0.5s ease; /* 開く時にふわっと出す */
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.detail-list dt {
    font-weight: 800;
    color: #f9be00;
    margin-bottom: 8px;
    font-size: 14px;
}
.detail-list dd {
    margin: 0 0 25px 0;
    font-size: 15px;
    line-height: 1.8;
}

@media screen and (max-width: 767px) {
    .accordion-header { padding: 20px; }
    .content-inner { padding: 10px 20px 30px 60px; }
}


/* --------------------recruit info end-------------------- */