@charset "utf-8";
/* ワイシステムサービス サイト用 追加カスタムCSS
   テンプレート(tp_mix2)の style.css / theme.css の後に読み込みます。 */

/* ===== コーポレートカラーの微調整（旧サイトの青系に寄せる） ===== */
:root{
	--primary-color:#0d3f66;      /* 濃紺ブルー */
	--accent-color:#2e7bc4;       /* アクセントブルー */
	--primary-light-color:#eaf1f8;
}

/* ===== テキストロゴ ===== */
header .logo a{
	display:flex; align-items:baseline; gap:.55rem; line-height:1.1;
	color:var(--primary-color); font-size:1rem;
}
header .logo .mark{
	font-family:var(--accent-font),sans-serif; font-weight:700;
	font-size:1.55rem; letter-spacing:.02em; color:var(--accent-color);
	white-space:nowrap;
}
header .logo .name{ display:flex; flex-direction:column; }
header .logo .name .ja{ font-weight:700; font-size:1.02rem; color:var(--primary-color); }
header .logo .name .en{ font-family:var(--accent-font),sans-serif; font-size:.62rem; letter-spacing:.14em; color:#7a8aa0; }
@media (max-width:900px){
	/* SP：会社ロゴを大きく（横幅およそ200px） */
	header .logo .name .ja{ font-size:1.08rem; white-space:nowrap; }
	header .logo .name .en{ font-size:0.62rem; letter-spacing:.1em; }
}

/* ===== 写真ギャラリー（工場紹介） ===== */
.gallery{
	display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.gallery a{ display:block; overflow:hidden; border-radius:6px; aspect-ratio:1/1; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; display:block; }
.gallery a:hover img{ transform:scale(1.08); }
@media (max-width:900px){ .gallery{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .gallery{grid-template-columns:repeat(2,1fr); gap:6px;} }

/* ===== 納入実績カードの製品カテゴリバッジ ===== */
.cat-badge{
	display:inline-block; background:var(--accent-color); color:#fff;
	font-size:.72rem; font-weight:700; padding:.2em .8em; border-radius:99px; margin-bottom:.6rem;
}
.list2 .list .image img{ aspect-ratio:4/3; object-fit:cover; width:100%; }

/* ===== 会社概要テーブル ===== */
table.company-table{ width:100%; border-collapse:collapse; }
table.company-table th,table.company-table td{
	text-align:left; padding:1rem 1.2rem; border-bottom:1px solid #e2e8f0; vertical-align:top;
}
table.company-table th{ width:26%; background:var(--primary-light-color); color:var(--primary-color); white-space:nowrap; font-weight:700; }
@media (max-width:600px){
	table.company-table th,table.company-table td{ display:block; width:auto; border-bottom:none; padding:.6rem 1rem; }
	table.company-table th{ border-radius:4px; }
	table.company-table td{ border-bottom:1px solid #e2e8f0; padding-top:.3rem; padding-bottom:1rem; }
}

/* ===== 沿革（タイムライン） ===== */
dl.history{ margin:0; }
dl.history dt{
	font-family:var(--accent-font),sans-serif; font-weight:700; color:var(--accent-color);
	font-size:1.02rem; margin:0; border-top:1px solid #e2e8f0; padding-top:1rem;
}
dl.history dd{ margin:0 0 1.2rem; padding-bottom:.2rem; }
@media (min-width:768px){
	dl.history{ display:grid; grid-template-columns:10rem 1fr; column-gap:1.5rem; align-items:start; }
	/* dtとddを同じ行で同じ上端に揃える（ズレ防止） */
	dl.history dt{ grid-column:1; padding:1rem 0 1rem; border-top:1px solid #e2e8f0; }
	dl.history dd{ grid-column:2; margin:0; padding:1rem 0 1rem; border-top:1px solid #e2e8f0; }
}

/* ===== 事業紹介・人員体制 ===== */
.staff-box{ background:var(--primary-light-color); border-radius:8px; padding:2rem; }
.staff-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; text-align:center; }
.staff-grid .num{ font-family:var(--accent-font),sans-serif; font-size:2.4rem; font-weight:700; color:var(--accent-color); line-height:1; }
.staff-grid .num small{ font-size:1rem; }
.staff-grid .lbl{ margin-top:.4rem; font-size:.92rem; }
@media (max-width:560px){ .staff-grid{ grid-template-columns:1fr; } }

/* ===== 連絡先ハイライト（お問い合わせ） ===== */
.contact-lead{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2.5rem; }
@media (max-width:760px){ .contact-lead{ grid-template-columns:1fr; } }
.contact-card{ background:var(--primary-light-color); border-radius:10px; padding:2rem; text-align:center; }
.contact-card .ico{ font-size:2rem; color:var(--accent-color); margin-bottom:.6rem; }
.contact-card h3{ margin:.2rem 0 .8rem; }
.contact-card .tel{ font-family:var(--accent-font),sans-serif; font-size:2.1rem; font-weight:700; color:var(--primary-color); line-height:1.1; }
.contact-card .note{ font-size:.85rem; color:#5a6b80; margin-top:.5rem; }

/* 仮情報の注意表示（納品後に削除してください） */
.tp-todo{ background:#fff6e5; border:1px dashed #e0a800; color:#8a6100; font-size:.82rem; padding:.5rem .8rem; border-radius:6px; display:inline-block; margin-top:.5rem; }

/* テンプレートCSSが対象外にしている input 型を補完（tel等をフル幅に） */
.contact-form-inner input[type="tel"],
.contact-form-inner input[type="number"],
.contact-form-inner input[type="url"]{
	width:100%; box-sizing:border-box;
	padding:.9rem 1rem; border:1px solid #cfd6e0; border-radius:6px;
	font-size:1rem; font-family:inherit; background:#fff;
}
/* フッターのテキストロゴが折り返さないように */
footer .logo .mark{ white-space:nowrap; }

/* ===== 納入実績：画像スライダー ＋ ライトボックス ===== */
.pslider{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:6px; background:#e9eef4; }
.pslider .pslides{ position:absolute; inset:0; }
.pslider .pslides img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	opacity:0; transition:opacity .4s ease; cursor:zoom-in;
}
.pslider .pslides img.active{ opacity:1; }
.pslider .pnav{
	position:absolute; top:50%; transform:translateY(-50%);
	width:38px; height:38px; border:none; border-radius:50%;
	background:rgba(13,63,102,.55); color:#fff; font-size:1.4rem; line-height:1;
	cursor:pointer; display:flex; align-items:center; justify-content:center;
	transition:background .2s; z-index:2;
}
.pslider .pnav:hover{ background:rgba(13,63,102,.85); }
.pslider .pprev{ left:8px; } .pslider .pnext{ right:8px; }
.pslider .pcount{
	position:absolute; right:8px; bottom:8px; z-index:2;
	background:rgba(0,0,0,.55); color:#fff; font-size:.72rem;
	padding:.15em .6em; border-radius:99px; font-family:var(--accent-font),sans-serif;
}
.pslider .pdots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; z-index:2; }
.pslider .pdots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; }
.pslider .pdots span.active{ background:#fff; }
.pslider.single .pnav,.pslider.single .pcount,.pslider.single .pdots{ display:none; }

/* ライトボックス */
#lightbox{
	position:fixed; inset:0; z-index:9999; display:none;
	background:rgba(10,20,32,.92); align-items:center; justify-content:center;
}
#lightbox.open{ display:flex; }
#lightbox .lb-stage{ max-width:92vw; max-height:86vh; display:flex; flex-direction:column; align-items:center; }
#lightbox img{ max-width:92vw; max-height:78vh; object-fit:contain; border-radius:4px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
#lightbox .lb-caption{ color:#fff; margin-top:.9rem; font-size:.95rem; text-align:center; }
#lightbox .lb-caption .lb-count{ font-family:var(--accent-font),sans-serif; color:#9fc0e0; margin-left:.6rem; }
#lightbox .lb-nav{
	position:absolute; top:50%; transform:translateY(-50%);
	width:56px; height:56px; border:none; border-radius:50%;
	background:rgba(255,255,255,.12); color:#fff; font-size:2rem; cursor:pointer;
	display:flex; align-items:center; justify-content:center; transition:background .2s;
}
#lightbox .lb-nav:hover{ background:rgba(255,255,255,.28); }
#lightbox .lb-prev{ left:3vw; } #lightbox .lb-next{ right:3vw; }
#lightbox .lb-close{
	position:absolute; top:20px; right:24px; width:44px; height:44px; border:none; border-radius:50%;
	background:rgba(255,255,255,.12); color:#fff; font-size:1.6rem; cursor:pointer;
}
#lightbox .lb-close:hover{ background:rgba(255,255,255,.28); }
@media (max-width:560px){
	#lightbox .lb-nav{ width:44px; height:44px; font-size:1.5rem; }
	#lightbox .lb-prev{ left:2vw; } #lightbox .lb-next{ right:2vw; }
}

/* ===== トップ：静止メインビジュアル（スライドショーなし） ===== */
.hero-static{ position:relative; width:100%; overflow:hidden; background:#0d3f66; }
.hero-static > img{
	display:block; width:100%; height:clamp(340px,56vw,640px); object-fit:cover;
}
.hero-static .hero-text{
	position:absolute; top:50%; left:5vw; transform:translateY(-50%);
	max-width:min(90%,820px); color:#fff; text-align:left;
}
.hero-static .hero-text h2{
	font-size:clamp(1.9rem,5.2vw,3.6rem); font-weight:700; line-height:1.25; margin:0 0 .8rem;
	color:#fff;
	/* 視認性向上のためのフチ（アウトライン）＋ドロップシャドウ */
	text-shadow:
		-2px -2px 0 rgba(13,40,64,.9),  2px -2px 0 rgba(13,40,64,.9),
		-2px  2px 0 rgba(13,40,64,.9),  2px  2px 0 rgba(13,40,64,.9),
		 0    3px 10px rgba(0,0,0,.45);
}
.hero-static .hero-text p{
	font-size:clamp(.95rem,1.7vw,1.2rem); line-height:1.9; margin:0; color:#fff;
	text-shadow:
		-1px -1px 0 rgba(13,40,64,.9), 1px -1px 0 rgba(13,40,64,.9),
		-1px  1px 0 rgba(13,40,64,.9), 1px  1px 0 rgba(13,40,64,.9),
		 0    2px 8px rgba(0,0,0,.5);
}
@media (max-width:600px){
	/* SP：メインビジュアルのテキストを中央寄せ */
	.hero-static .hero-text{ left:6vw; right:6vw; max-width:none; text-align:center; }
}

/* ===== フッターのロゴ（ヘッダーと同じ社名ロゴに統一） ===== */
footer .logo{ max-width:none; }
footer .logo .name{ display:inline-flex; flex-direction:column; line-height:1.15; }
footer .logo .name .ja{ font-weight:700; font-size:1.15rem; color:#2c3242; letter-spacing:.02em; }
footer .logo .name .en{ font-family:var(--accent-font),sans-serif; font-size:.66rem; letter-spacing:.16em; color:#2c3242; margin-top:.15rem; }

/* ===== トップ：流れる画像（slideimg2）のサイズを統一 ===== */
.slideimg2 .img > div img{
	display:block; width:100%; height:clamp(120px,14vw,180px);
	object-fit:cover; border-radius:4px;
}

/* ===== SP：納入実績カードを縦積みにして画像を横幅いっぱいに ===== */
@media (max-width:680px){
	.list2 .list, .list2 .list.reverse{ flex-direction:column; }
	.list2 .list .image{ width:100%; }
	.list2 .list .text{ width:100%; }
}

/* ===== 事業紹介・技術者体制：人数内訳なし（分野名のみ） ===== */
.staff-grid.nonum{ grid-template-columns:repeat(3,1fr); }
.staff-grid.nonum .lbl{
	background:#fff; border:1px solid #d7e2ef; border-radius:8px;
	padding:1rem .8rem; margin:0; font-weight:700; color:var(--primary-color);
}
@media (max-width:560px){ .staff-grid.nonum{ grid-template-columns:1fr; } }