@charset "UTF-8";
/*
Theme Name: nakadashokai
Theme URI: https://www.nakada-shokai.jp/
Author: nakadashokai
Author URI: https://www.nakada-shokai.jp/
Description: 有限会社中田商会 公式サイト用オリジナルテーマ
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: nakadashokai
*/
:root { 
  --main-green: #DFFF00; /* ライムグリーン */ 
  --text-color: #333; 
  --bg-light: #F9F8F0; /* 薄いベージュ */ 
  --font-serif: "Shippori Mincho", serif; 
  --green :#00914d;
  --darkgreen:#254;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-padding-top: 80px; scroll-behavior: smooth; overflow-x: clip; }
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; color: var(--text-color); line-height: 1.8;  letter-spacing:0.04rem; background-color: #fff; overflow-x: clip; }
body.page, body.single, body.archive, body.page-template, body.error404 { background:var(--bg-light); }
.pc_no, .pc_no2, .dis_no { display: none; }
.sp_no { display: block; }
span.sp_no { display: inline; }
br.sp_no { display: inline; }
br.sp_no2 { display: inline; }
.tc { text-align: center; }
.tr { text-align: right; }
.img_pc { display: block; }
.img_sp { display: none; }
.clearfix { display: block; }
.clearfix:after { content: ""; display: block; clear: both; }
.clearfix:before { content: ""; display: block; clear: both; }
.f_s { font-size: clamp(0.75rem, 1.4vw, 0.875rem); }
.f_m { font-size: clamp(0.875rem, 1.6vw, 1rem); }
.f_l { font-size: clamp(1rem, 2vw, 1.25rem); }
img { max-width: 100%; height: auto; vertical-align: bottom; }
.flex { display: flex; flex-flow: row wrap; justify-content: space-between; position: relative; }
.flex.rowre { flex-flow: row-reverse wrap; }
.flex.jcfs { justify-content: flex-start; }
.flex.jcc { justify-content: center; }
.flex.aic { align-items: center; }
.flex.aifs { align-items: flex-start; }
.flex.aife { align-items: flex-end; }
.flex .fg1 { flex-grow: 1; }
.gap20 { gap: 20px; }
.mb0 { margin-bottom: 0 !important; }
.mb4 { margin-bottom: 0.25rem !important; }
.mb8 { margin-bottom: 0.5rem !important; }
.mb16 { margin-bottom: 1rem !important; }
.mb24 { margin-bottom: 1.5rem !important; }
.mb32 { margin-bottom: 2rem !important; }
.mb48 { margin-bottom: 3rem !important; }
.mb64 { margin-bottom: 4rem !important; }
.mr0 { margin-right: 0 !important; }
.mr4 { margin-right: 0.25rem !important; }
.mr8 { margin-right: 0.5rem !important; }
.mr16 { margin-right: 1rem !important; }
.mr24 { margin-right: 1.5rem !important; }
.mr32 { margin-right: 2rem !important; }
.mr48 { margin-right: 3rem !important; }
.mt0 { margin-top: 0 !important; }
.mt4 { margin-top: 0.25rem !important; }
.mt8 { margin-top: 0.5rem !important; }
.mt16 { margin-top: 1rem !important; }
.mt24 { margin-top: 1.5rem !important; }
.mt32 { margin-top: 2rem !important; }
.mt48 { margin-top: 3rem !important; }
.mt-8 { margin-top: -0.5rem !important; }
.ma { margin: auto; }
.w100 { width: 100%; margin-right: 0 !important; margin-left: 0 !important; }
.w99 { width: 99%; }
.w98 { width: 98%; }
.w97 { width: 97%; }
.w96 { width: 96%; }
.w95 { width: 95%; }
.w94 { width: 94%; }
.w93 { width: 93%; }
.w92 { width: 92%; }
.w91 { width: 91%; }
.w90 { width: 90%; }
.w89 { width: 89%; }
.w88 { width: 88%; }
.w87 { width: 87%; }
.w86 { width: 86%; }
.w85 { width: 85%; }
.w84 { width: 84%; }
.w83 { width: 83%; }
.w82 { width: 82%; }
.w81 { width: 81%; }
.w80 { width: 80%; }
.w79 { width: 79%; }
.w78 { width: 78%; }
.w77 { width: 77%; }
.w76 { width: 76%; }
.w75 { width: 75%; }
.w74 { width: 74%; }
.w73 { width: 73%; }
.w72 { width: 72%; }
.w71 { width: 71%; }
.w70 { width: 70%; }
.w69 { width: 69%; }
.w68 { width: 68%; }
.w67 { width: 67%; }
.w66 { width: 66%; }
.w65 { width: 65%; }
.w64 { width: 64%; }
.w63 { width: 63%; }
.w62 { width: 62%; }
.w61 { width: 61%; }
.w60 { width: 60%; }
.w59 { width: 59%; }
.w58 { width: 58%; }
.w57 { width: 57%; }
.w56 { width: 56%; }
.w55 { width: 55%; }
.w54 { width: 54%; }
.w53 { width: 53%; }
.w52 { width: 52%; }
.w51 { width: 51%; }
.w50 { width: 50%; }
.w49 { width: 49%; }
.w48 { width: 48%; }
.w47 { width: 47%; }
.w46 { width: 46%; }
.w45 { width: 45%; }
.w44 { width: 44%; }
.w43 { width: 43%; }
.w42 { width: 42%; }
.w41 { width: 41%; }
.w40 { width: 40%; }
.w39 { width: 39%; }
.w38 { width: 38%; }
.w37 { width: 37%; }
.w36 { width: 36%; }
.w35 { width: 35%; }
.w34 { width: 34%; }
.w33b { width: 33.33%; }
.w33 { width: 33%; }
.w32 { width: 32%; }
.w31 { width: 31%; }
.w30 { width: 30%; }
.w29 { width: 29%; }
.w28 { width: 28%; }
.w27 { width: 27%; }
.w26 { width: 26%; }
.w25 { width: 25%; }
.w24 { width: 24%; }
.w23 { width: 23%; }
.w22 { width: 22%; }
.w21 { width: 21%; }
.w20 { width: 20%; }
.w19 { width: 19%; }
.w18 { width: 18%; }
.w17 { width: 17%; }
.w16b { width: 16.66%; }
.w16 { width: 16%; }
.w15 { width: 15%; }
.w14 { width: 14%; }
.w13 { width: 13%; }
.w12 { width: 12%; }
.w11 { width: 11%; }
.w10 { width: 10%; }
.w9 { width: 9%; }
.w8 { width: 8%; }
.w7 { width: 7%; }
.w6 { width: 6%; }
.w5 { width: 5%; }
.w4 { width: 4%; }
.w3 { width: 3%; }
.w2 { width: 2%; }
.w1 { width: 1%; }
a { color:var(--text-color);}
h2 { font-size: clamp(2rem, 6vw, 3.5rem); margin-bottom: clamp(0.75rem,2.5vw,1.5rem); line-height:1.5; }
h3 { font-size: clamp(1.75rem, 4vw, 2.5rem); color:var(--green); margin-bottom:clamp(0.75rem,2.5vw,1.5rem); line-height:1.5; }
h4 { font-size: clamp(1.5rem, 2.5vw, 1.5rem); margin-bottom:clamp(0.25rem,0.8vw,0.5rem); line-height:1.5; }
h5 { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom:clamp(0.25rem,0.8vw,0.5rem); line-height:1.5; }
.material-symbols-outlined {font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0,'opsz' 24; align-self:middle; vertical-align:middle;}


/* ヘッダー */
.header { height: 70px; position: sticky; width: 100%; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; }
.header-inner { width: 100%; max-width: 150rem; margin: 0 auto; padding-top: 0; padding-left:clamp(1rem,3vw,2rem); padding-right: 0; position: relative; /* ロゴの配置基準にする */ display: flex; justify-content: space-between; /* ナビを右に寄せる */ align-items: center; }
.logo a { text-decoration: none; color: inherit; display: flex; flex-direction: column; line-height: 1.1; }
.logo { /*position: absolute; left: 4%; top: 50%; transform: translateY(-50%);*/ display: flex; flex-direction: column; line-height: 1.1; z-index: 110; /* ヘッダーより上に */ width: 18rem; }
.logo a img { width: 100%; }

/* メインの英語ロゴ */
.main-text { font-size: 40px; color: var(--darkgreen); /* 深緑 */ font-weight: 500; font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-style: normal; }
.sub-text { font-size: 11px; color: #333; font-weight: normal; margin-top: 5px; /* ヘッダーの高さ(80px)を越えるように配置を調整 */ padding-left: 2px; }
.nav { display: flex; align-items: center; height: 100%; }
.nav ul { display: flex; list-style: none; margin:0; padding-right:clamp(0.75rem,1.6vw,1.25rem); }
.nav ul li { margin:0; }
.nav ul li a { text-decoration: none; color: var(--text-color); font-size:clamp(1rem,1.8vw,1.125rem); font-weight: bold; display: block; padding:clamp(0.75rem,1.6vw,1.25rem); position:relative; transition:0.2s; }
.nav ul li a::after { transition:0.2s; }
.nav ul li a:hover::after,.btn-contact:hover::after { content:""; display:block; border-bottom:5px solid var(--green); position:absolute; bottom:0; left:1rem; right:1rem;}
.btn-contact { display: flex; align-items: center; justify-content: center; background: var(--main-green); padding: 1rem 2rem; height: 70px; text-decoration: none; color: #333; font-weight: bold; font-size:clamp(1rem,1.8vw,1.125rem); position:relative; }
.main-fv { position: relative; }

/* メインビジュアル（静止画バージョン） */
.mv-static { position: relative; height: auto; /*aspect-ratio: 3000 / 1718;*/ min-height: 0; overflow: hidden; padding: 150px 4% 80px; display: flex; align-items: center; }
.mv-static .mv-bg { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 0; }
.mv-static .mv-overlay { display: none; }
.mv-static .mv-content { position: relative; z-index: 2; max-width: 1100px; width: 100%; margin-top: -150px; }
.mv-catch-img { margin-bottom: 30px; max-width: 800px; }
.mv-catch-img img { width: 100%; height: auto; display: block; }
.mv-static .mv-sub { font-size: clamp(14px, 1.4vw, 18px); line-height: 2; color: #fff; margin-bottom: 0; text-shadow: 0 0 6px rgba(0, 0, 0, 1); }
.mv-bottom { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.mv-static .mv-btn { position: absolute; left: 4%; bottom: 60px; z-index: 3; }
.mv-instagram { position: absolute; right: -10px; bottom: -10px; z-index: 3; display: block; width: 12rem; transition: transform 0.3s, opacity 0.3s; }
.mv-instagram img { width: 100%; height: auto; display: block; }
.mv-instagram:hover { transform: translateY(-3px); opacity: 0.85; }
@media (max-width: 768px) {
  .mv-instagram { right: 0; bottom: -1rem; width: 8rem; }
}
@media (max-width: 768px) {
  .mv-static { height: auto; min-height: 0; padding: 0; padding-bottom: 30px; display: block; position: relative; overflow: visible; }
  .mv-static .mv-overlay { display: none; }
  .mv-static .mv-content { position: relative; margin-top: 20px; padding: 0 4%; max-width: none; }
  .mv-catch-img { display: none; }
  .mv-static .mv-sub { display: none; }
  .mv-bottom { display: none; }
  .mv-static .mv-btn { position: relative; left: auto; bottom: -10px; margin: 20px 4% 0; width: calc(100% - 8% - 110px); display: inline-flex; justify-content: space-between; padding: 28px 24px; }
  .mv-static .mv-instagram { position: absolute; right: 4%; bottom: 30px; width: 90px; }
}

/* メインビジュアル */
.main-visual { margin-top: 0; height: 100vh; position: relative; display: flex; padding: 0 4%; padding-top: 150px; overflow: hidden; }
.mv-slider { position: absolute; inset: 0; z-index: 0; }
.mv-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; transform: scale(1.145); }
.mv-slide.active { opacity: 1; animation: mvZoom 6s ease-in-out forwards; }
@keyframes mvZoom {
  from { transform: scale(1.05); }
  to { transform: scale(1.15); }
}
.mv-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(137, 192, 220, 0.45) 0%, rgba(137, 192, 220, 0.3) 50%, rgba(25, 84, 82, 0.0) 65%); }
@media (max-width: 768px) {
  .main-visual .mv-slide:nth-child(1), .main-visual .mv-slide:nth-child(2) { background-position: right center; }
  .main-visual .mv-slide:nth-child(2) { background-size: auto 100%; background-position: 75% center; }
}
.mv-content { position: relative; z-index: 2; max-width: 900px; color: #fff; }
@media (max-width: 768px) {
  .mv-content { margin-top: -120px; }
}
.mv-content h2 { font-size: clamp(28px, 4.5vw, 50px); line-height: 1.5; margin-bottom: 30px; color: #fff; font-weight: 700; letter-spacing: 0.02em; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; }
.mv-underline { background-image: linear-gradient(var(--main-green), var(--main-green)); background-size: 92% 3px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 6px; padding-left: 1px; padding-right: 1px; }
.mv-sub { font-size: clamp(14px, 1.4vw, 17px); line-height: 2; color: #fff; margin-bottom: 40px; }
.mv-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; background: var(--main-green); color: #000; text-decoration: none; font-weight: bold; font-size: 1.4rem; padding: 26px 36px; min-width: 360px; transition: transform 0.3s, opacity 0.3s; /*margin-left: 8%;*/ }
.mv-btn:hover { transform: translateY(-2px); opacity: 0.9; }
@media (max-width: 1000px) {
  .mv-btn { margin-top: 5%; }
}
.mv-btn-arrow { font-size: 1.25rem; line-height: 1;padding-bottom: 0.25rem; }
@media (max-width: 768px) {
  .mv-content h2 { font-size: 26px; line-height: 1.5; margin-bottom: 80px; }
  .mv-sub { font-size: 13px; line-height: 1.8; margin-bottom: 20px; }
 .mv-btn { min-width: 200px; padding: 1.25rem 1.5rem; gap: 20px; margin-top: 36px; margin-left: 0; }
}

/* お知らせ */
section { position: relative; padding:5rem 0 2rem 0;}
.news { /*background-color: var(--bg-light);*/ /*padding: 100px 0;*/ margin-top: 30px; mix-blend-mode: multiply; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 4%; }
.news-layout { display: grid; grid-template-columns: 1fr 3fr; gap: 3rem; }
.news-layout .section-title {}
.news-list { list-style: none; /*min-height: 420px;*/ }
.news-list li { padding: 0; border-bottom: 1px solid #ddd; display: flex; align-items: center; }
.news-list li a { display: flex; text-decoration: none; flex-flow: row nowrap; align-items: flex-start; color: #666; position: relative; gap: 1rem; padding: 1.25rem 0; }
.news-list li a p { margin: 0; flex: 1; }
.news-list li a p:hover { text-decoration: underline; }
.news-list li a .date { width:clamp(4.5rem,8vw,5rem); /*font-weight: bold;*/ font-size: clamp(0.75rem,1.4vw,0.875rem); padding:0; display: flex; align-items: center; height: 1.8rem; }
@media (max-width: 768px) {
.news-layout .section-title { display: flex; justify-content: space-between;}
.news-layout h3 { margin-bottom: 0;}
.news-layout { gap:1rem;}
.news-list { min-height:0; }
}

/* お知らせタブ */
.news-tabs { display: flex; gap: 30px; border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 0; }
.news-tab { background: none; border: none; padding: 12px 4px; font-size: 0.95rem; color: #999 !important; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; position: relative; transition: color 0.2s; font-family: inherit; }
.news-tab:hover { color: #666; }
.news-tab.active { color: #666 !important; font-weight: bold; }
.news-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #666; }
.tab-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tab-dot-all { background: #666; }
.tab-dot-info { background: #00914d; }
.tab-dot-blog { background: #BEF009; }

/* NEWバッジとカテゴリドット */
.news-item[data-category="blog"] .news-badge { background: #BEF009; }
.news-badge { background: #00914d; color: #fff; font-size: 0.7rem; font-weight: bold; border-radius: 50%; width:2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin:-0.25rem -10px; }
.news-cat-dot { width:1rem; height: 1rem; border-radius: 50%; display: inline-block; flex-shrink: 0; margin:0.4rem 0; }
.news-cat-info { background: #00914d; }
.news-cat-blog { background: #BEF009; }



/* 丸いボタン */
.view-more-circle { display: inline-flex; align-items: center; text-decoration: none; color: var(--text-color); /*margin-top: 20px;*/ }
.view-more-circle::after { content: "→"; background: var(--main-green); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-left: 10px; padding: 0 0 3px 0;box-sizing: border-box;}

/* 企業情報 */
.company { padding: 100px 0; }
.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.company-image img { width: 100%; border-radius: 15px; }
@media (max-width: 1500px) {
  .main-visual { height: 60vh; }
}
@media (max-width: 1200px) {
  .main-visual { height: 65vh; }
}

/* レスポンシブ (スマホ対応) */
@media (max-width: 768px) {
	.main-visual { height: 55vh; }
	.news { padding: 50px 0; }
	.nav { display: none; /* 本来はハンバーガーメニュー等に置き換え */ }
	.news-layout { gap:1rem;}
	.news-layout .section-title { display: flex; justify-content: space-between; align-items:center; }
	.news-layout, .company-grid { grid-template-columns: 1fr; }
	.news-list { min-height:0; }
	.news-list li .date { /*margin-right: 10px;*/ }
}

/* レイアウトの基本設定 */
.tri-layout { padding: 80px 0; background-color: #fff; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.container02 { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.container03 { margin-left: 8%; margin-right: 8%; }
@media (max-width: 1000px) {
  .container03 { margin-left: 4%; margin-right: 4%; }
}


.tri-grid { display: flex; gap: clamp(1rem,3vw,2rem); /* 要素間の隙間 */ align-items: flex-start; /* 上揃え */ }
.tri-item { flex: 1; /* 3つの要素を均等幅に */ }
.tri-item.text-content { flex: 1.5; }
.tri-item-center, .tri-item-right { flex: 0.85; }

/* 画像のスタイル */
.tri-img { width: 100%; height: auto; display: block; border-radius: 8px; /* 角を少し丸く */ object-fit: cover; margin-bottom:clamp(1rem,3vw,2rem); }
.tri-item-center { margin-top: 7rem; }
.tri-item-right { margin-top: 0; }

/* テキスト部分のスタイル */
.text-content { text-align: left; }
.tri-title { font-size: 24px; line-height: 1.4; margin-bottom: 20px; font-weight: bold; }
.tri-desc { font-size: 15px; color: #666; margin-bottom: 25px; line-height: 1.8; }

/* ボタン（画像のデザインに寄せています） */
.view-more-btn { display: inline-flex; align-items: center; text-decoration: none; color: #333; font-weight: bold; font-size: 14px; }
.view-more-btn::after { content: "→"; background: #DFFF00; /* ライムグリーン */ width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-left: 10px; }
.tri-layout { position: relative; /* 子要素の基準点にする */ /*padding: 170px 0 100px; background-color: #fff;*/ overflow: hidden; /* 画像が画面からはみ出しても横スクロールが出ないようにする */ }
.container { position: relative; z-index: 8; /* コンテンツを背景より上に */ }


/* 背景装飾のスタイル */
.bg-decoration { position: absolute; bottom: -20px; /* 下からの位置（デザインに合わせて調整） */ left: 0; /* 左からの位置（デザインに合わせて調整） */ width: 50%; /* 画像のサイズ */ z-index: 1; /* コンテンツの後ろ、背景色より前 */ opacity: 0.9; /* 少し透かせたい場合 */ pointer-events: none; /* 画像がリンクなどのクリックを邪魔しないようにする */ mix-blend-mode:multiply; }
.bg-decoration img { width: 100%; height: auto; }

/* --- ハンバーガーボタンのスタイル --- */
.hamburger { display: none; /* PCでは非表示 */ background: none; border: none; width: 30px; height: 24px; position: relative; cursor: pointer; z-index: 200; margin-right: 1rem; }
.hamburger span { display: block; position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--darkgreen); transition: all 0.4s ease; }
.hamburger span:nth-child(1) { top: 2px; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { bottom: 2px; }

/* クリック時のアニメーション（×印に変形） */
.hamburger.open span:nth-child(1) { top: 0; transform: translateY(11px) rotate(-45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { bottom: 0; transform: translateY(-11px) rotate(45deg); }


@media (max-width: 768px) {
 .hamburger { display: block; /* スマホで表示 */ }
 .nav { position: fixed; top: 70px; right: -100%; /* 画面外に待機 */ width: 100%; /* 全画面メニュー */ height: calc(100vh - 70px); background: rgba(255, 255, 255, 0.98); display: flex; flex-direction: column; /*justify-content: center;*/ align-items: center; transition: right 0.5s ease; z-index: 150; }
 .nav.open { right: 0; /* 画面内にスライド */ }
 .nav ul { flex-direction: column; text-align: center; margin: 2rem 0; padding:0; }
 .nav ul li { margin:0; }
 .nav ul li a { padding:1rem; }

 /* ロゴのはみ出し微調整（スマホ時） */
 .sub-text { color: var(--darkgreen); /* スマホでは背景が白くなるので色を濃く */ }
}

/* --- 事業紹介 (Business) --- */
.business { padding: 100px 0 200px; position: relative; /*overflow: hidden;*/ margin-bottom: 150px; z-index: 0; }
.business-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 5; }
.business-card { display: flex; flex-flow: column;  /*background: #fff; border: 1px solid #eee6; border-radius: 10px;*/ overflow: hidden; padding: 20px; /*align-items: center;*/ }
.card-center { grid-column: 1 / 3; width: 50%; margin: 0 auto; }
.card-body { flex: 1; /*padding-right: 15px;*/ }
.card-body h3 { /*font-size: 18px;*/ margin-bottom: 10px; color: #333; }
.card-body p { /*font-size: 13px;*/ color: #666; line-height: 1.6; }
.card-body ul { list-style: none; padding: 0; margin:0 0 1rem 0; }
.card-body ul li { /*font-size: 14px;*/ color: #666; padding-left: 1.25rem; position: relative; }
.card-body ul li::before { content: "●"; color: var(--darkgreen); position: absolute; left: 0; }
.business-partners { margin-top: 40px; text-align: center; }
.business-partners h4 { font-size: 1.5rem; color: #666666; margin-bottom: 25px; }
.business-partners ul { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; max-width: 800px; text-align: left; }
.business-partners ul li { font-size: 1.2rem; color: #666; line-height: 1.8; padding-left: 1.25rem; position: relative; }
.business-partners ul li::before { content: "●"; color: var(--darkgreen); position: absolute; left: 0; }
.partners-etc { font-size: 14px; color: #666; margin-top: 5px; padding-left: 1.2rem; }
.card-img { flex: 1.2; }
.card-img img { width: 100%; border-radius: 5px; }

/* 背景装飾：ライムグリーンの曲線 */
.bg-decoration-line { position: absolute; bottom: -3rem; right: 0; width: 60%; height: auto; z-index:-1; mix-blend-mode: multiply; }
.bg-text-intro { position: absolute; bottom: -3rem; left: 100px; font-size: 115px; color: #f1f1f1; z-index: 2; white-space: nowrap; font-family: "Zalando Sans", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; font-variation-settings: "wdth"100; letter-spacing: -2px; mix-blend-mode:multiply; line-height:1; }

/* --- 採用情報 (Recruit) --- */
.recruit { /*padding: 100px 0 50px; background-color: #f8f7f2;*/ /* 薄いベージュ背景 */ }
.recruit-white-box, .white-box { background: #fff; border-radius:2rem; padding:clamp(1rem,5vw,3rem); box-shadow:0 1rem 0.5rem -0.75rem rgba(0,0,0,0.05); margin-bottom:clamp(1.5rem,5vw,3rem); }
.recruit-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap:clamp(0.5rem,1.6vw,2rem); max-width: 800px; margin: clamp(-7rem,-11vw,-6rem) auto clamp(2rem,6vw,4rem); /*padding: 0 4%;*/ }
.recruit-nav-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; background-color: #fff; /*background-image: linear-gradient(#FCFFE3 , #DFFF00);*/ border-radius: 0; padding:clamp(0.5rem,2vw,1.25rem); text-decoration: none; /*color: var(--darkgreen); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);*/box-shadow:0 1rem 0.5rem -0.75rem rgba(0,0,0,0.05); transition: transform 0.3s, box-shadow 0.3s; text-align: center; /*border-radius: 10px;*/ }
.recruit-nav-card:hover { transform: translateY(-4px); box-shadow: 0 8px 10px rgba(0, 0, 0, 0.12); background-image: linear-gradient(#FCFFE3, #DFFF00); }
.recruit-nav-icon { font-size: clamp(2.5rem,5vw,3rem) !important; color: var(--green); }
.recruit-nav-label { font-size:clamp(0.675rem,1.6vw,1.25rem); font-weight: bold; /*color: var(--darkgreen);*/ line-height:1.5; }
@media (max-width: 768px) {
	.white-box { margin-left:-0.5rem; margin-right:-0.5rem;}
  .recruit-nav { /*grid-template-columns: repeat(2, 1fr); gap: 15px;*/ margin-left:-0.5rem; margin-right:-0.5rem; }
  .recruit-nav-card { /*padding: 20px 10px;*/ }
  .recruit-nav-icon { /*font-size: 2.5rem !important;*/ }
  .recruit-nav-label { /*font-size: 0.85rem;*/ letter-spacing:normal; }
}
.recruit-sub-icon { display: block !important; text-align: center; font-size: 3rem !important; color: var(--green); }
.recruit-sub-title { text-align: center;  color:var(--text-color);/*font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem); margin-bottom: 50px; color: #666666;*/ }
.job-list-box { /*margin-bottom:3rem;*/ }
.job-list-grid { display: grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; /*max-width: 900px;*/ margin: 0 auto; }
.job-item { /*border-bottom: 1px solid #ddd;*/ padding-bottom: 30px; }
.job-category { /*font-size: 1.2rem; margin-bottom: 15px; font-weight: bold;*/ color: var(--darkgreen); }
.job-image { margin-bottom: 20px; }
.job-image img { width: 100%; height: auto; border-radius: 16px; object-fit: cover; aspect-ratio: 4 / 3; }

/* スタッフページ v2 (staff2.html) */
.staff-page-v2 { /*background: #fff;*/ }
.staff-page-v2 .container { max-width: 1200px; }
.staff2-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 0; align-items: start; position: relative; z-index: 1; }
.staff-page-v2 { position: relative; overflow: hidden; }
.staff2-bg { position: absolute; pointer-events: none; z-index: 0; }
.staff2-bg img { width: 100%; height: auto; display: block; }
.staff2-bg-gr02 { width: 60vw; left: 0; top: 400px; }
.staff2-bg-gr02 img { object-position: left center; }
.staff2-bg-green { width: 60vw; right: 0; top: 1300px; mix-blend-mode:multiply; }
.staff2-bg-green img { object-position: right center; }
.staff2-grid > .staff-card-box { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .staff2-bg-gr02 { width: 35vw; top: 700px; }
  .staff2-bg-green { width: 35vw; top: 1700px; }
}
.staff2-grid > .staff-card-box { margin-bottom: 40px; }

/* 右カラム（偶数番目）を下にずらす */
/*.staff2-grid > .staff-card-box:nth-child(even) {
    margin-top: 100px;
}*/

/* タイトルとケース番号を白枠の外に出す */
.staff-page-v2 .staff-card-box.recruit-white-box { background: transparent; padding: 0; box-shadow: none; border-radius: 0; }
.staff-page-v2 .staff-header { border-bottom: none; padding-bottom: 0; margin-bottom: 25px; display: flex; flex-direction: column; gap: 15px; align-items: flex-start; }
.staff-page-v2 .staff-header-info { width: 100%; }
.staff-page-v2 .staff-header-info .staff-name-sub, .staff-page-v2 .staff-header-info .staff-meta { display: none; }
.staff-page-v2 .staff-name { margin-bottom: 0; }

/* 画像エリアを白枠化 */
.staff-page-v2 .staff-image-area { background: #fff; border-radius: 16px; margin-bottom: 30px; }
.staff-page-v2 .staff-image-area .staff-image { width: 100%; margin-bottom: 0; aspect-ratio:3/2; }
.staff-page-v2 .staff-image-area .staff-image img { border-radius: 12px; width: 100%; height: auto; object-fit:cover; object-position:top center; }
.staff-page-v2 .staff-image-info { right: 0; bottom: 0; width: 35%; padding: 12px 0 0 18px; }

/* インタビュー部分を白枠化 */
.staff-page-v2 .staff-interview { background: #fff; padding:1.5rem; border-radius:1.5rem; /*box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);*/ box-shadow:0 1rem 0.5rem -0.75rem rgba(0,0,0,0.05); }
@media (max-width: 768px) {
  .staff2-grid { grid-template-columns: 1fr; }
  .staff2-grid > .staff-card-box:nth-child(even) { margin-top: 0; }
  .staff-page-v2 .staff-image-info { position: relative; right: auto; bottom: auto; width: 100%;  padding:1rem 0 0 0 ; }
}

/* 社員インタビュー目次 */
.staff-toc { list-style: none; padding: 30px 40px; margin: 0 auto 60px; max-width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.staff-toc li { list-style: none; }
.staff-toc a { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #333; padding: 8px 4px; border-bottom: 1px solid #ddd; transition: color 0.2s; }
.staff-toc a:hover { color: var(--darkgreen); }
.staff-toc a::after { content: "→"; margin-left: auto; color: var(--darkgreen); font-weight: bold; }
.staff-toc-no { display: inline-block; background: var(--main-green); color: #000; font-family: "Roboto Condensed", sans-serif; font-size: 0.8rem; font-weight: bold; letter-spacing: 0.05em; padding: 4px 10px; flex-shrink: 0; }
.staff-toc-title { font-size: 0.95rem; font-weight: bold; line-height: 1.4; }
@media (max-width: 768px) {
  .staff-toc { grid-template-columns: 1fr; padding: 20px 20px; gap: 8px; }
  .staff-toc-title { font-size: 0.85rem; }
}
.staff-card-box .staff-image { margin-bottom: 20px; width: 50%; }
.staff-card-box .staff-image img { width: 100%; height: auto; border-radius: 16px; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 768px) {
  .staff-card-box .staff-image { width: 100%; }
}

/* スタッフ画像 + 情報カード */
.staff-image-area { position: relative; margin-bottom: 20px; width: 100%; }
.staff-image-area .staff-image { width: 100%; margin-bottom: 0; }
.staff-image-info { position: absolute; right: 0; bottom: 0; width: 38%; background: #fff; padding: 16px 20px; border-radius: 18px 0 0 0; /*box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);*/ z-index: 2; }
.staff-info-tag { font-size: 0.85rem; color: #333; /*margin-bottom: 10px;*/ display: flex; align-items: center; gap: 6px; }
.staff-info-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #1a4a3a; }
.staff-info-name { font-size:clamp(1rem,2vw,1.25rem); font-weight: bold; color: var(--darkgreen); /*margin-bottom:0.5rem; line-height: 1.5;*/ }
.staff-info-meta { font-size: 0.85rem; color: #666; line-height: 1.6; }
@media (max-width: 768px) {
  .staff-image-area { margin-bottom: 20px; width: 100%; }
  .staff-image-area .staff-image { width: 100%; }
  .staff-image-info { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 15px; padding: 0 26px; }
}
.job-detail { margin-bottom: 10px; }
.job-label { /*font-size: 0.9rem;*/ font-weight: bold; color: #333; margin-bottom: 5px; }
.job-text { /*font-size: 0.9rem;*/ color: #666; line-height: 1.6; }
.job-qualification { list-style: none; padding: 0; margin: 0; }
.job-qualification li { /*font-size: 0.9rem;*/ color: #666; line-height: 1.8; padding-left: 1.2em; position: relative; }
.job-qualification li::before { content: "・"; position: absolute; left: 0; }
.job-note { font-size: 0.8rem; color: #999; margin-top: 5px; line-height: 1.6; }
.values-grid { display: flex; justify-content: space-around; gap: 30px; margin-bottom: 60px; }
.value-item { flex: 1; text-align: center; }
.value-item .icon { width: 60px; }
.value-item h4 { font-size: 1.8rem; }
.value-item p { font-size: 14px; color: #666; line-height: 1.6; }
.founder-message { background-color: #f2f2e8; border-radius: 15px; padding: 30px; display: flex; gap: 30px; align-items: flex-start; }
.founder-label { background: none; font-weight: bold; font-size: 18px; white-space: nowrap; padding-top: 5px; }
.founder-text p { font-size: 15px; color: #555; margin-bottom: 10px; }

/* ボックス間の余白 */
.second-box, .third-box { margin-top: 40px; }

/* --- 求める人材 --- */
.person-grid { display: flex; align-items: center; gap: 50px; }
.person-list { flex: 1; list-style: none; }
.person-list li { display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid #eee; font-size: 18px; font-weight: bold; color: #444; }
.person-list li:last-child { border-bottom: none; }
.icon-green { width: 30px; margin-right: 20px; display: flex; justify-content: center; }
.person-image { flex: 1.2; }
.person-image img { width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); }

/* --- 待遇・制度 --- */
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; /*padding: 0 30px;*/ }
.benefit-item { text-align: left; padding: 0 1rem; position: relative; }

/* 縦の仕切り線（最後以外） */
.benefit-item:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 0; height: 100%; width: 1px; background-color: #fff; border-left: 2px dotted #ccc; }
.benefit-item:first-child::before { content: ""; position: absolute; left: -10px; top: 0; height: 100%; width: 1px; background-color: #fff; border-left: 2px dotted #ccc; }
.benefit-icon { /*width: 50px; margin-bottom: 20px;*/ }
.benefit-icon .material-icons-sharp, .benefit-icon .material-symbols-outlined { font-size: 50px; color: var(--green); line-height: 1; }
.benefit-item h4 { /*font-size: 18px; margin-bottom: 20px;*/ color: #333; }
.benefit-item ul { list-style: none; text-align: left; display: inline-block; }
.benefit-item ul li { font-size: 16px; color: #666; margin-bottom: 8px; position: relative; padding-left: 16px; }
.benefit-item ul li::before { content: "・"; position: absolute; left: 0; color: #177339; font-weight: bold; }

/* ボックスの間隔 */
.white-box:last-child {  /*margin-bottom: 100px;*/ /* 最後のセクションなので下を広めに */ }

/* インタビューグリッド */
.interview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }

/* カードのデザイン */
a.interview-card { text-decoration: none; color: inherit; display: block; }

/* インタビュー スライダー */
.interview-slider { position: relative; /*max-width: 1100px;*/ margin:0; padding: 0; }
.interview-viewport { overflow: hidden; }
.interview-track { display: flex; gap: 20px; transition: transform 0.5s ease; }
.interview-track > .interview-card { flex: 0 0 calc((100% - 60px) / 4); max-width: calc((100% - 60px) / 4); }
.interview-prev, .interview-next { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid #b5b5b5; background: #fff; color: #555; font-size: 26px; font-weight: 300; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 0 4px 0; transition: all 0.2s; margin:0; }
.interview-prev:hover, .interview-next:hover { border-color: var(--darkgreen); color: var(--darkgreen); background: #fff; }
.interview-prev { left: -1rem; }
.interview-next { right: -1rem; }
.interview-dots { display: flex; justify-content: center; gap: 10px; margin:1.5rem 0; }
.interview-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: #ccc; cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; }
.interview-dots button.active { background:var(--green); transform: scale(1.3); }
@media (max-width: 1200px) {
  .interview-track > .interview-card { flex: 0 0 calc((100% - 40px) / 3); max-width: calc((100% - 20px) / 3); }
}
@media (max-width: 768px) {
  .interview-slider { padding: 0;  margin: 0 calc(50% - 50vw); }
  .interview-viewport { overflow: hidden; }
  .interview-track > .interview-card { flex: 0 0 100%; max-width: 100%; }
  .interview-prev { left: 0; }
  .interview-next { right: 0; }
 .interview-track > .interview-card { flex: 0 0 calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
}
@media (max-width: 480px) {
 .interview-track > .interview-card { flex: 0 0 calc((100% - 20px) / 1.5); max-width: calc((100% - 20px) / 1.5); }
}
.interview-card { position: relative; border-radius: 25px; overflow: hidden; /* 画像の角を丸める */ background: #000; /* 画像が読み込まれるまでの背景 */ aspect-ratio: 3 / 4; /* カードの縦横比を固定 */ }
.interview-img { width: 100%; height: 100%; position: relative; }
.interview-img img { width: 100%; height: 100%; object-fit: cover; /* 画像を枠いっぱいに広げる */ transition: transform 0.5s ease; }

/* ホバー時に画像を少し大きくする演出 */
.interview-card:hover .interview-img img { transform: scale(1.05); }

/* テキストの重なり部分 */
.interview-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding:clamp(0.75rem,1.6vw,1rem); background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) 40%); color: #fff; }
.interview-message { /*font-size: 14px;*/ line-height: 1.6; font-weight: bold; margin-bottom: 8px; }
.interview-profile { font-size: 12px; opacity: 0.8; }

/* ボックス間隔 */
.fifth-box { margin-top: 40px; }

/* タイムライン全体のコンテナ */
.timeline-container { max-width: 800px; margin: 0 auto; position: relative; /* 垂直線の位置を基準にするため、左側に余白を確保 */ padding-left: 0; }

/* 垂直なライン（位置を固定） */
.timeline-container::before { content: ''; position: absolute; left: 100px; /* 左から100pxの位置に線を引く */ top: 1rem; bottom:0; width: 2px; background-color: #DFFF00; /* ライムグリーン */ z-index: 1; }
.timeline-item { display: flex; margin-bottom:2.5rem; position: relative; align-items: flex-start; }
.timeline-item:last-child { margin-bottom:0; }
.timeline-img img { border-radius:1rem; }
.timeline-img, .timeline-text { width: 50%; }

/* 時間ラベル部分 */
.time-label { width: 100px; /* 線までの幅と合わせる */ text-align: left; /*padding-top: 5px;*/ line-height:1.5; }
.time { font-size: 1.5rem; font-weight: bold; color: #333; display:block; }
.timeline-text h4 { font-size: 1.2rem; margin-bottom: 10px; }
.timeline-text { color: #666; }

/* タイムライン上の点（線の中央にぴったり重ねる） */
.dot { width: 12px; height: 12px; background-color: var(--darkgreen); /* 深緑 */ border-radius: 50%; position: absolute; left: 101px; /* 線(100px) + 線の太さの半分(1px) - ドットの半径(6px) = 95px 付近で微調整 */ transform: translateX(-50%); /* 自分の幅の半分だけ左に戻して中心を合わせる */ top: 14px; /* 時間の文字の高さに合わせる */ z-index: 2; }

/* コンテンツ部分 */
.timeline-content { flex: 1; display: flex; align-items: flex-start; gap: 30px; padding-left: 40px; padding-top: 5px; }

/* --- お問い合わせセクション --- */
.contact-section { padding:0; /*padding: 60px 0 100px; background-color: #f8f7f2;  採用セクションと同じ背景色 */ }
.contact-cta-box { background-image: linear-gradient(#d2ff02, #7fbf26 60%); border-radius:2rem; padding:clamp(2rem,6vw,4rem); text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); }
.contact-cta-box h2 { font-size: 32px; color: var(--darkgreen); /* 深緑 */ margin-bottom: 20px; }
.contact-cta-box p { font-size: 16px; color: var(--darkgreen); margin-bottom: 40px; }
.contact-cta-box::after { content: ""; display: block; background: var(--darkgreen); position: absolute; left:calc(50% - 50vw); right:calc(50% - 50vw); top:6rem; bottom:0; z-index: -1;}


body.page-id-18 .contact-section,
body.page-id-20 .contact-section, 
body.page-id-68 .contact-section, 
body.single .contact-section { display:none; }


/* ボタンレイアウト */
.cta-button-group { display: flex; justify-content: center; gap: 20px; }
.btn-white, .btn-mint { display: block; width: 280px; padding:1.5rem; border-radius:4rem; text-decoration: none; font-weight: bold; font-size: 16px; transition: all 0.3s ease; line-height: 0.8; }

/* 白背景ボタン */
.btn-white { background-color: #fff; color: var(--darkgreen); }
.btn-white:hover { background-color: #fff8; transform: translateY(-3px); }

/* 枠線ボタン */
.btn-mint { background-color: #DFFF00; color: var(--darkgreen); }
.btn-mint:hover { background-color: #DFFF0088; transform: translateY(-3px); }

/* --- フッター --- */
.footer { background-color:var(--darkgreen); /* ダークグリーンの背景 */ color: #fff; padding:3rem 0; }
.footer-container { max-width: 1400px; margin: 0 auto; padding: 0 4%; display: flex; justify-content: space-between; align-items: flex-end; /* 下揃え */ }
.footer a { color:#fff;}
.footer-logo-text { font-size: 28px; margin-bottom: 15px; }
.footer-address { font-style: normal; }
.footer-address p { font-size:1rem; opacity: 0.8; /*margin-bottom: 5px;*/ }
.footer-contact-details { opacity: 0.8; }
.footer-contact-details span.tel, .tel { font-size:1.5rem; display:inline-flex; align-items:center; }
.tel .material-symbols-outlined { margin-right:0.25rem; }
.footer-copy-area { text-align: right; }
.footer-catchphrase { font-size:clamp(1.125rem,2vw,1.25rem); font-weight: bold; line-height: 1.6; margin-bottom: 20px; }
.copyright { font-size: 12px; opacity: 0.6; }
.tc { text-align: center; }

/* レスポンシブ対応（スマホ表示） */
.recruit_title { background: url('./assets/img/recruit_fv.jpg') no-repeat center center / cover; padding:clamp(2.5rem,8vw,5rem) 0; }
.recruit_title h2 { margin-bottom: 0;}
@media (max-width: 960px) {
  .pc_no { display: block; }
  br.pc_no, span.pc_no { display: inline; }
  .sp_no, br.sp_no { display: none; }
  span.sp_no { display: none; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); /* タブレットで2列 */ gap: 40px; }
  .benefit-item:nth-child(2)::after { display: none; /* 2列時の仕切り線調整 */ }

}
@media (max-width: 768px) {
  .text-content { /*  order: -1;  スマホの時だけテキストを一番上にしたい場合はこれ */ /*text-align: center;*/ }
  .bg-decoration { width: 80%; left: 0; bottom: 0; }
 .tri-grid { flex-flow: row wrap; /* 上1列・下2列に */ gap: 20px; }
 .tri-item-center { margin-top: 15vw; }
 .tri-item-right { margin-top: 0; }
 .tri-img { margin-bottom: 20px; }
 .tri-grid .text-content { flex: 0 0 100%; /* 上段：テキストを全幅に */ }
 .tri-grid .text-content a { color: var(--text-color);}
 .tri-grid .tri-item-center, .tri-grid .tri-item-right { flex: 1; /* 下段：画像2列を均等に */ }
  .business-grid, .values-grid { grid-template-columns: 1fr; display: block; }
  .business-card { flex-direction: column; margin-bottom: 20px; padding: 1rem 0; }
  .card-center { width: 100%; }
  .card-body { padding-right: 0; margin-bottom: 15px; }
  .founder-message { flex-direction: column; gap: 15px; }
  .bg-text-intro { font-size: 50px; left: 1.25rem; bottom:0; }
  .recruit { /*padding-top: 50px;*/ }
  .value-item .icon { width: 30px; }
  .value-item h4 { font-size: 1.3rem; }
  .person-grid { flex-direction: column; }
  .person-list { width: 100%; }
  .person-list li { padding: 12px 0 12px 10px; }
  .benefits-grid { grid-template-columns: 1fr; /* スマホで1列 */ }
  .benefit-item::after { display: none; /* スマホでは仕切り線を消す */ }
  .benefit-item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #eee; padding:0 0 1rem 0; margin-bottom: 1rem; }
  .benefits-grid { gap: 20px; padding: 0; }
  .benefit-icon { /*width: 40px;*/ margin-right: 10px; margin-bottom:0; }
  .benefit-item ul { width: 100%; }
  .benefit-item:last-child { border-bottom: none; }
  .benefit-item:first-child::before { display: none; }
  .timeline-container::before { left: 66px; /* スマホでは線を左に寄せる */ }
  .time-label { width: 60px; }
  .dot { left: 67px; /* 線の位置に合わせてドットも移動 */ }
  .timeline-content { padding-left: 30px; flex-wrap: wrap; }
  .timeline-img, .timeline-text { width: 100%; }
  .time { font-size: 1.25rem; padding-top:0.25rem; }
  .cta-button-group { flex-direction: column; align-items: center; }
  .btn-main-white, .btn-outline-white { width: 100%; max-width: 300px; }
  .job-list-grid { grid-template-columns: 1fr; }
  .footer-container { flex-direction: column; align-items: flex-start; gap: 40px; }
  .footer-copy-area { text-align: left; }
  .recruit-white-box { /*padding: 30px 10px;*/ margin:0 -0.5rem 2rem -0.5rem; }
  .fourth-box { margin-bottom: 50px; }
  .recruit-sub-title { margin-bottom: 25px; }
  .value-item p { margin-bottom: 20px; }
  .bg-decoration-line { width: 90%; bottom:0; }
  .business { padding-bottom: 100px; margin-bottom: 50px; padding-top: 50px; }
}
.interview-prev, .interview-next { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; border: 1px solid #b5b5b5; }

/* スタッフページ */
.staff-page, .temp-page { padding: 2rem 0; /*background-color: var(--bg-light);*/ }
.staff-card-box { margin-bottom: 40px; }
.staff-header { display: flex; align-items: center; gap: 30px; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px solid #1a4a3a; }
.staff-header-info { flex: 1; }
.staff-case-no { display: inline-block; background: var(--main-green); color: #000; font-family: "Roboto Condensed", sans-serif; font-size: 1rem; font-weight: bold; letter-spacing: 0.05em; padding: 8px 18px; align-self: flex-start; flex-shrink: 0; }
.staff-name { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); color: var(--darkgreen); margin-bottom: 10px; line-height: 1.4; }
.staff-name-sub { font-size: 1rem; color: #666; font-weight: bold; margin-bottom: 12px; }
.staff-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.staff-meta-tag { display: inline-block; background: #1a4a3a; color: #fff; font-size: 0.8rem; padding: 4px 14px; border-radius: 20px; }
.staff-interview { display: flex; flex-direction: column; gap: 30px; }
.staff-qa-section { margin-bottom: 10px; }
.staff-section-heading { font-size: 1.1rem; color: var(--darkgreen); padding-left: 15px; border-left: 4px solid #1a4a3a; margin-bottom: 20px; }
.staff-qa { margin-bottom: 20px; /*padding-left: 20px;*/ }
.staff-question { font-size:1.125rem; font-weight: bold; color: #333; margin-bottom: 8px; position: relative; padding-left: 1.5em; }
.staff-question::before { content: "Q."; color: var(--darkgreen); font-weight: bold; position: absolute; left: 0; }
.staff-answer { /*font-size: 0.95rem;*/ color: #666; padding-left: 1.5em; position: relative; }
.staff-answer::before { content: "A."; color: #ca5; font-weight: bold; position: absolute; left: 0; }
.staff-message-box { background: #f0f6f3; border-left: 4px solid #1a4a3a; padding: 20px 25px; border-radius: 0 10px 10px 0; margin-top: 10px; }
.staff-message-box p { font-size: 1rem; color: #333; font-weight: bold; line-height: 1.8; }
.hissu { display: inline-block; background: #c35; color: #fff; font-size: 0.7rem; padding: 0.1rem 0.25rem; vertical-align: middle; position: relative; margin: -0.1rem 0.25rem 0.25rem 0; /* border-radius: 0.25rem; */ line-height: 1.5; }
.hissu::before { content: "必須"; }

/*-- FORM/ --*/
.contact-page form { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: middle; background: transparent; }
.contact-page form label { vertical-align: middle; }
.contact-page select, input, textarea, button { width: auto; max-width: 100%; -webkit-appearance: none; vertical-align: middle; position: relative; line-height: 1.5; font-size: clamp(1rem, 1.8vw, 1.2rem); margin: 0 5px 0 0; padding: 0.5rem 0.75rem; border: 1px solid #777; box-shadow: none; z-index: 0; box-sizing: border-box; /*border-radius: 0.25rem;*/ background: rgba(255, 255, 255, 0.5); }
.contact-page input[type="text"] { margin: 0 0.25rem 0 0; }
.contact-page input.long { width: 100%; margin: 0; position: relative; }
.contact-page button, a.btn, .contact-page input[type="button"], .contact-page input[type="submit"]:not(.adminbar-button) { display: inline-block !important; vertical-align: middle; -webkit-appearance: none; overflow: visible; width: auto; min-width: 9rem; line-height: 1.6rem; letter-spacing: 0.1rem; margin: 0.5rem 0.25rem 0.5rem 0; color: #fff !important; position: relative; text-decoration: none; transition: all .2s; box-sizing: border-box; cursor: pointer; /*border-radius: 0.25rem;*/ padding: 0.5rem 2rem; background: var(--green) url(./assets/img/i_arrow_rw.svg) left 0.75rem center /1rem no-repeat; 
 border:1px solid var(--green);}
.contact-page input::placeholder, .contact-page textarea::placeholder { color: #777; }
.contact-page button.b_back, a.btn.b_back, .contact-page input[type="button"].back_button { background: #fff url(./assets/img/i_arrow_l.svg) left 0.75rem center /1rem no-repeat !important; color: var(--black) !important; /*margin-top: 2rem;*/ background:#ccc; }
.contact-page .b_back::after { content: ""; position: absolute; display: inline-block; left: 10px; top: 18px; width: 10px; height: 10px; border-top: 2px solid var(--black); border-right: 2px solid var(--black); transform: rotate(45deg); box-sizing: border-box; }
.contact-page button:hover, .contact-page a.btn:hover, .contact-page input[type="button"]:hover, .contact-page input[type="submit"]:hover { text-decoration: none; filter: brightness(85%); color: #fff; }
.contact-page button[disabled], a.btn[disabled], .contact-page .button[disabled], .contact-page input[type="button"][disabled], .contact-page input[type="submit"][disabled], button[disabled]:hover, a.btn[disabled]:hover, .contact-page .button[disabled]:hover, input[type="button"][disabled]:hover, .contact-page input[type="submit"][disabled]:hover { background: #ddd; border: none; color: #fff; opacity: 1.0; cursor: default; position: relative; border-radius: 4rem; }
.contact-page a.btn { padding-right: 2rem; position: relative; }
.contact-page a.btn[target='_blank']::after { right: -0.5rem; background: url(./assets/img/i_blank_w.svg) center bottom /100% no-repeat !important; }
.contact-page button.mini, .button.mini { min-width: 0; }
.contact-page input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 3px var(--main-green); border: 1px solid var(--main-green); }
.contact-page input.button { width: 15rem; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; position: relative; white-space: nowrap; margin: 0 auto; padding: 0.5rem 2rem; background: var(--orange) url("./assets/img/arrow_rw.svg") right 0.75rem center /1.25rem no-repeat; color: #fff; border-radius: 0.25rem; }
.contact-page input.button:hover { background: var(--orange) url("./assets/img/arrow_rw.svg") right 0.75rem center /40px no-repeat; }
.contact-page .Form-Item { margin-bottom: 1.5rem; }
.contact-page .notice { background: var(--bg-light); padding: 1rem 1.5rem; border-radius: 1rem; }
@media (max-width: 768px) {
  .staff-page { /*padding: 110px 0 40px;*/ }
  .staff-header { flex-direction: column; align-items: flex-start; gap: 15px; padding-bottom: 10px; margin-bottom: 18px; }
  .resp100 { width: 100%; }
  .resp95 { width: 95%; }
  .resp90 { width: 90%; }
  .resp85 { width: 85%; }
  .resp80 { width: 80%; }
  .resp75 { width: 75%; }
  .resp70 { width: 70%; }
  .resp65 { width: 65%; }
  .resp60 { width: 60%; }
  .resp55 { width: 55%; }
  .resp50 { width: 50% !important; }
  .resp48 { width: 48% !important; }
  .resp49 { width: 49% !important; }
  .resp45 { width: 45%; }
  .resp40 { width: 40%; }
  .resp35 { width: 35%; }
  .resp30 { width: 30%; }
  .resp25 { width: 25%; }
  .resp20 { width: 20%; }
  .resp15 { width: 15%; }
  .resp10 { width: 10%; }
  .resp05 { width: 5%; }
  .index_box.sdgs { width: 100%; }
  .resp_no { display: none; }
  .resp_ma { margin: auto; }
  .resp_tc { text-align: center; }
}

/* ページの上部に戻るボタン */
.scroll-top { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--main-green); border: none; cursor: pointer; z-index: 99; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease; padding: 0; }
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transform: translateY(-2px); }
.scroll-top:focus-visible { outline: 2px solid #1a4a3a; outline-offset: 2px; }
.scroll-top-arrow { display: block; width: 14px; height: 14px; border-top: 3px solid #1a4a3a; border-right: 3px solid #1a4a3a; transform: rotate(-45deg); margin-top: 5px; }
@media (max-width: 768px) {
  .scroll-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
  .scroll-top-arrow { width: 12px; height: 12px; border-width: 2.5px; margin-top: 4px; }
}