@charset "UTF-8";
/*
Theme Name: Now And Then
Theme URI: https://lookat.co.jp
Author: Look At Inc.
Author URI: https://lookat.co.jp
Description: There will be an answer, let it be.
Version: 1.0.0
License: GNU General Public License v2 or later
*/

@import url("style-root.css");
@import url("https://lookat8.xsrv.jp/hidekky/wp-content/themes/nowandthen/style-nwmaster.css");
@import url("event-calendar.css");
/* デモサイト準拠フォント (Noto Sans JP + 数字用 Outfit)
   [2026-07-26 第2段階] CSS @import は描画をブロックするため header.php の <link> へ移設。
   ここには書き戻さないこと。design.md §4 参照。 */

/* type-modal */

.modal-card:hover {color:#000;}

.modal-card.modal-kabuse{
	border:1px solid #ccc;
	border-radius:1rem;
	padding:0;
	overflow: hidden;
	width: 100%;
}



.modal-card.modal-kabuse {
	display: grid;
	grid-template-rows: 1;
	grid-template-columns: 1;
}



.yes-shadow .modal-card{ box-shadow: var(--box-shadow);}
.no-radius .modal-card{ border-radius:0; }
.no-border .modal-card{ border:none; }




	
.modal-card.modal-kabuse .image-box {
	grid-column: 1;grid-row: 1;z-index:1;}
.modal-card.modal-kabuse .text-box {
	grid-column: 1;grid-row: 1;z-index:2;
	/*margin: 2rem 1rem 1rem 2rem;*/
	padding: 2rem;
	display: flex;
	flex-direction: column;
	width:100%;
}
.modal-card.modal-kabuse .text-box p{
	font-size:.8125rem;
	line-height: 1.5;
}



/* image-box 基本 */
.modal-card .image-box img {
	filter: brightness(0.9);
	height:100%;
	object-fit: cover;
	object-position: center;
	transition: all 0.5s ease;
}

/* モーダル ダーク */
.modal-card.dark .image-box img { filter: brightness(0.5);}
.modal-card.dark:hover .image-box img { filter: brightness(0.7);}
a:hover .modal-card.dark .image-box img { opacity: 1;} /* 通常のhover効果を無効化 */
/* モーダル ブラー */
.modal-card.blur .image-box img { opacity:1;filter: blur(2px);}
.modal-card.blur:hover .image-box img { opacity:1;filter: blur(0);}
a:hover .modal-card.blur .image-box img { opacity: 1;} /* 通常のhover効果を無効化 */
/* モーダル シール */
.modal-card.seal .image-box img { opacity:1;}
.modal-card.seal:hover .image-box img { opacity:.9;}
.modal-card.seal .text-box h5, 
.modal-card.seal .text-box p {background: rgba(255,255,255,.95);margin-bottom:0;padding:.25rem 1rem;}
/* モーダル セパレート (画像トリミングサイズ優先で、テキストボックス不揃い) */
.modal-card.separate {grid-template-rows: 1fr auto;}
.modal-card.separate .image-box {grid-row: 1/2;} /* autoheight版とここが違う */
.modal-card.separate .text-box {grid-row: -2/-1;} /* autoheight版とここが違う */
.modal-card.separate .text-box {flex-direction: column; justify-content: space-between; background: #fff;margin: auto 0 0;padding:.5rem 1rem;}
.modal-card.separate .text-box .text-group {display: flex; flex-direction: column;gap:.5rem;}
.modal-card.separate .text-box .text-group > * {margin:0;padding:0;}
.modal-card.separate .text-box button {flex: 0 0 3rem;margin:0.5rem 0;}
.modal-card.separate .text-box button {display: none0;}
/* モーダル セパレート・オートハイト (画像トリミングサイズに、テキストボックス内包) */
.modal-card.separate-autoheight .text-box {flex-direction: column; justify-content: space-between; background: #fff;margin: auto 0 0;padding:.5rem 1rem;}
.modal-card.separate-autoheight .text-box .text-group {display: flex; flex-direction: column;gap:.5rem;}
.modal-card.separate-autoheight .text-box .text-group > * {margin:0;padding:0;}
.modal-card.separate-autoheight .text-box button {flex: 0 0 3rem;margin:0.5rem 0;}
.modal-card.separate-autoheight .text-box button {display: none0;}
/* モーダル ズーム(ホバーで拡大) */
.modal-card.zoom:hover .image-box img {transform: scale(1.03);}
/* 文字を白く */
.modal-card.dark .text-box,
.modal-card.text-white .text-box {color:#fff;text-shadow: 0 2px 3px rgba(0, 0, 0, .8);}

.modal-card .text-box button {
	justify-self: flex-end;
	align-self: flex-end;
	margin-top: auto;
	margin-bottom: -1rem;
	margin-right: -1rem;
	
	display: grid;
	place-items: center;
	width:3rem;
	height:3rem;
	aspect-ratio:1/1;
	font-size: 2rem;
	/* padding:0 .55rem .4rem; */
	padding:0;
	line-height: 0;
	background: #353537;
	color:#d6d6d6;
	border-radius:50% !important;
}
.modal-card .text-box button i, .modal-card .text-box button svg {margin:0;}

.reveal-overlay .close-button {font-size:3rem; color: var(--extra-color);}
@media (max-width: 640px) {.reveal-overlay {top: 50px;}}

.right-menu .contact {background: var(--accent-c0lor;)}

.contact-menu a::before {content:"\f0e0";font-family:"Font Awesome\ 7 Pro";font-weight:600;color:var(--sub-color-dark);}

.kaisai_style {display:inline-block;padding:.125rem .5rem 0;border:3px solid #666;border-radius:8px;}
.kaisai_style.style_1 {border-color:#2E7D32;}
.kaisai_style.style_2 {border-color:#0091EA;}
.kaisai_style.style_3 {border-color:#D81B60;}

.jisshi_type {display:inline-block;padding:.125rem .5rem 0;border:3px solid #666;border-radius:8px;}
.jisshi_type.type_1 {border-color:#D81B60;}
.jisshi_type.type_2 {border-color:#2E7D32;}
.jisshi_type.type_3 {border-color:#0091EA;}



/* WordPress構築 */

/* intern詳細ページ */
.single-internship main {background: var(--main-color-light);}
.single-internship main section {background: #fff; border-radius: 1rem; border: 1px solid var(--main-color);margin-top:2rem; margin-bottom:2rem;padding:1rem;}
.single-internship main section h4 {margin-top:0;}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
デモサイト準拠 上書きスタイル (2026-07-11)
https://lookat8.xsrv.jp/shizuoka/demo/index.html の見た目に合わせる
nwmasterはいじれないため、ここで上書きする
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/************* 背景 (デモ: body薄緑 #F4FCF8) *************/
body {
	background: var(--white-color-dark); /* style-root.cssで#F4FCF8に定義済み */
}

/************* フォント *************/
body, h1, h2, h3, h4, h5, h6 {
	font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
/************* h1 の幅リセット *************/
/* [2026-08-16 SEO改修] style-nwmaster.css に `@media(max-width:640px){h1{max-width:40px}}` がある。
   これは「h1 = ヘッダーのロゴ」を前提にした指定で、スマホでロゴを40pxに詰めるためのもの。
   SEO改修で h1 を各ページの見出し(キャッチコピー/企業名/ページタイトル)に移したため、
   このままだとスマホで h1 が40px幅に潰れ、1文字ずつ縦に折り返す。
   個別に打ち消していた箇所(.page-hero h1 / .page-header-title)もあったが、
   h1 を増やすたびに同じ対処が要るので、ここでまとめて無効化する。
   **新しく h1 を作るときに width/max-width を書く必要はない(ここが効いている)。** */
@media screen and (max-width: 640px) {
	h1 {
		max-width: none;
		width: auto;
	}
}

/* 数字・日付・英字用 (デモ: Outfit) */
.time-stamp,
.en-num {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	letter-spacing: .03em;
}

/************* ヘッダー (デモ: 白背景+下辺ブランドグラデ2px+うっすら緑影) *************/
#header {
	background: var(--white-color-light); /* デモ同様、白背景は全幅のheaderに持たせる */
	box-shadow: 0 2px 16px rgba(30,160,120,.10);
	border-bottom: 2px solid transparent;
	border-image: var(--grad-main) 1;
}
/* デモの .header-inner 相当（最大幅を中央寄せ）。デモは1100pxだが本サイトは1280pxに拡張 */
#topbar {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* グローバルメニュー (デモ: 13px・緑hover・テキスト#3D6B52) */
#topbar .global-menu a {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--border-color-dark); /* デモ計測値 rgb(61,107,82) = #3D6B52 */
	transition: color .2s;
}
#topbar .global-menu a:hover {
	color: var(--main-color-dark);
}
/* お問い合わせボタン (デモ: btn-entry 緑グラデの丸ピル) */
#topbar .contact-menu a {
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: .375rem;
	background: var(--grad-button);
	color: var(--white-color-light) !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	height: auto;
	padding: 8px 20px; /* デモ .btn-entry と同値 (remだとrootサイズ縮小の影響を受けるためpx指定) */
	border-radius: 20px;
	box-shadow: 0 3px 12px rgba(15,168,150,.3);
	transition: opacity .2s, transform .15s;
}
/* 親(.right-menu/.contact-menu)がstretchでもボタンが縦に伸びないように */
#topbar .contact-menu {
	display: flex;
	align-items: center;
}
#topbar .contact-menu a:hover {
	opacity: .88;
	transform: translateY(-1px);
}
/* デモにアイコンなし → アイコンフォント指定を無効化 */
#topbar .contact-menu a::before,
.contact-menu a::before {
	content: none;
}
/* [2026-07-28] バグ修正: 外部CSS(style-nwmaster.css)側で #topbar が flex-wrap:wrap になっており、
   800〜1000px程度の中間幅(スマホ用ドロワーに切り替わる800px超〜デスクトップ未満)で
   ロゴ+ナビ+ボタンが1行に収まらず2行に折り返っていた。#header は sticky + 固定高さ
   (--header-pc-height)なので、はみ出した2行目がヘッダー外に露出しパンくずと重なっていた。
   1行に収める(nowrap)ことで解消。ナビ項目は元々 flex:auto + font-size clamp() で
   幅に応じて縮む設計のため、詰まっても重ならずに収まる。 */
#topbar {
	flex-wrap: nowrap;
}
/* [2026-07-28] バグ修正: 同じ外部CSSに `@media (max-width:1000px) { .contact-menu a span {display:none} }`
   があり、幅1000px以下でボタンの文字だけが消える仕様だった(本来はアイコンだけ残る想定)。
   このテーマは上でアイコンを `content:none` により無効化しているため、文字も消えると
   中身が空のピルになっていた。アイコンを使わない設計なので、文字は常に表示させる。 */
#topbar .contact-menu a span {
	display: inline;
}
/* [2026-07-30] バグ修正: 幅801〜1100px程度で、グローバルメニューの各項目(「インターンを探す」
   「よくある質問」など)が2行に折り返り、ヘッダーが窮屈に見えていた。
   nwmaster側は `font-size: clamp(.5rem, 1.25vw, 1rem)` で幅に応じて文字が縮む設計だったが、
   このテーマが `.8125rem` 固定で上書きしていたため縮まず、代わりに文字が折り返っていた
   (2026-07-28に #topbar を nowrap にした際のコメント「clamp()で縮む設計」は、この上書きを
   見落としていたので誤り)。この幅帯だけ nowrap + 文字サイズ/左右paddingを可変にして1行に収める。
   幅800px以下は nwmaster 側の `@media (max-width:800px){.global-menu{display:none}}` で
   ドロワーに切り替わるため対象外。1101px以上は元々1行に収まっている。 */
@media (min-width: 801px) and (max-width: 1100px) {
	#topbar .global-menu > ul > li > a {
		white-space: nowrap; /* 折り返し禁止。収まらない分は下のfont-size/paddingで吸収する */
		/* 下限10.5pxが実際に効くのは幅840px以下(=1.25vwが10.5pxを下回る)だけ。
		   841px以上は従来と同じ見た目のまま、下限側だけ余裕を作っている */
		font-size: clamp(10.5px, 1.25vw, 13px);
		padding: 0 clamp(4px, .7vw, .75rem);
	}
	/* この帯の下限(801px)では上の圧縮だけだと余りが4pxしかなく、フォント実測値のわずかな差で
	   また折り返しかねない。サイト名(ブランド)は縮めたくないので、「企業の皆さまへ」ボタンの
	   左右paddingを少しだけ詰めて12px稼ぎ、余裕を持たせる。 */
	#topbar .contact-menu a {
		padding: 8px 14px;
		white-space: nowrap; /* この帯ではボタン文字も「企業の皆さま/へ」と2行になっていた */
	}
}

/************* Ken Burnsの切り替えをスムーズに *************/
/* nwmasterの指定(回転あり・ease・scale1⇄1.2の完全往復)を上書き
   - 開始をscale(1.08)にして動きを途切れさせない(端も見えない)
   - linearで速度一定にしてフェード中の「戻り」を目立たなくする
   - 回転をやめて端のガタつきを防止、GPU合成でチラつき防止 */
.slider-area .slider-wrapper.ken-burns .swiper-slide img {
	transition: transform 14000ms linear;
	transition-delay: 0s;
	transform: scale(1.08) translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
}
.slider-area .slider-wrapper.ken-burns .swiper-slide-active img {
	transition-delay: 0s;
	transform: scale(1.2) translate(-1.5rem, 0) translateZ(0) rotate(0.001deg);
}

/************* スライダー (デモ: hero 紫→青→ティールのオーバーレイ) *************/
.slider-area .slider-wrapper::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: var(--hero-overlay);
}
.slider-area .catchcopy {
	z-index: 3;
	font-weight: 800;
	text-shadow: 0 2px 20px rgba(0,0,0,.15);
}

/************* 見出し (デモ: 濃色太字+ブランドグラデの短い下線) *************/
#frontpage h2 {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 800;
	color: var(--text-color);
}
#frontpage h2:after {
	background: var(--grad-main);
	height: 4px;
	border-radius: 2px;
}
#frontpage h2 span {
	color: var(--border-color-dark);
}

/************* お知らせ (デモ: news-section) *************/
.news-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.news-list li {
	display: flex;
	align-items: center;
	flex-wrap: nowrap; /* トップページの.news-itemと同様、長いタイトルは自身の枠内で折り返す(PC/タブレット) */
	gap: .25rem .75rem;
	padding: .625rem 0;
	border-bottom: 1px solid var(--border-color);
}
@media (max-width: 768px) {
	.news-list li {
		flex-wrap: wrap; /* スマホは日付・カテゴリーとタイトルを別行に */
	}
}
.news-list li:last-child {
	border-bottom: none;
}
.news-list .news-meta {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-shrink: 0;
}
.news-list .time-stamp {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: .75rem;
	font-weight: 600;
	color: var(--border-color-dark);
	white-space: nowrap;
	letter-spacing: .03em;
}
/* .news-categoryはsingle.php/sidebar.php/page-all-news.php等サイト全体で使われる共通ラベルのため、
   .news-list配下に限定せずグローバルに指定する。
   テーマ側に .news-meta .news-category (濃紺背景・line-height極小) が存在し、
   詳細度で負けないよう同じ .news-meta .news-category の形にしている */
.news-meta .news-category {
	display: inline-block;
	font-size: .625rem; /* トップページの新着一覧(.news-badge)と統一 */
	font-weight: 700;
	line-height: 1.6;
	padding: .125rem .5rem;
	border-radius: 4px;
	white-space: nowrap;
	letter-spacing: .04em;
	background: var(--extra-color-light);
	color: var(--extra-color-dark);
	border: 1px solid var(--extra-color);
	min-width: 3.5rem; /* トップページ同様、ラベル幅を揃える */
	text-align: center;
}
/* カテゴリー別の配色 (トップページの.news-badge.cat-*と統一) */
.news-meta .news-category.event {
	background: #FEF3E2;
	color: #D4820A;
	border: 1px solid #F5D08A;
}
.news-meta .news-category.column {
	background: #F0EBF8;
	color: #7B5EA7;
	border: 1px solid #D5C5ED;
}
/* .news-title は sidebar.php / news-ticker.php / news-list.php /
   news-tabcontent-{list,panel}.php が出力する。page-all-news.php は使っていない。 */
.news-list .news-title {
	font-size: .8125rem;
	color: var(--text-color);
	line-height: 1.5;
	transition: color .15s;
}
.news-list a:hover .news-title,
.news-list a:focus-visible .news-title {
	color: var(--sub-color-dark);
	text-decoration: underline;
}

/* [2026-08-06] ここには一時的に .news-list li > a / .news-list .news-item-title の指定があったが削除した。
   お知らせ一覧(page-all-news.php)が共通パーツ news-list.php を使う形になり、
   .news-list ではなく .fp-news / .news-item を出力するようになったため不要。
   残しておくと single.php のお知らせ欄(myphpfiles/news-list.php)にまで効いてしまう。
   新着情報の見た目は下方の「.news-section 〜」の一群が正。 */
/* お知らせ一覧そのものを白背景のカードに */
.news-list {
	background: var(--white-color-light);
	border-radius: 16px;
	padding: .5rem 1.5rem;
	box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

/************* ボタン (デモ: 角丸・太字・緑グラデ+影) *************/
.button {
	border-radius: 10px;
	font-weight: 700;
	border-width: 2px;
}
.button.fill {
	box-shadow: 0 3px 12px rgba(15,168,150,.3);
	transition: opacity .2s, transform .15s;
}
.button.fill:hover {
	opacity: .88;
	transform: translateY(-1px);
}
/* 丸ピル型にしたい時用 */
.button.pill {
	border-radius: 30px;
}

/************* カード (デモ: 白背景・薄緑枠・hoverでティール枠+浮き上がり) *************/
.modal-card,
.modal-card.modal-kabuse {
	border: 1.5px solid var(--border-color);
	border-radius: 14px;
	background: var(--white-color-light);
	transition: border-color .2s, box-shadow .2s, transform .15s;
}
a:hover .modal-card,
.modal-card:hover {
	border-color: var(--sub-color);
	box-shadow: 0 6px 28px rgba(15,168,150,.12);
	transform: translateY(-2px);
}

/************* パンくず (デモ: ティールのリンク) *************/
.breadcrumb-area {
	color: var(--border-color-dark);
}
.breadcrumb-area a {
	color: var(--sub-color-dark);
}
.breadcrumb-area a:hover {
	text-decoration: underline;
}

/************* フッター (デモ: 濃緑黒+上辺ブランドグラデ3px) *************/
footer {
	position: relative;
	overflow: hidden;
	text-align: center;
	font-size: .8125rem;
	line-height: 1.9;
}
footer::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--grad-main);
}
footer a:hover {
	color: var(--white-color-light);
}
/* フッター上部リンク行 (デモ準拠) */
.footer-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-links-left {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.footer-links-left a {
	color: rgba(255,255,255,.62);
	font-size: 12px;
	text-decoration: none;
	transition: color .2s;
	white-space: nowrap;
}
.footer-links-left a:hover { color: var(--white-color-light); }
.footer-links-right {
	display: flex;
	align-items: center;
	gap: 12px;
}
.footer-sns {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.25);
	color: rgba(255,255,255,.7);
	transition: color .2s, border-color .2s;
}
.footer-sns:hover { color: var(--white-color-light); border-color: var(--white-color-light); }
.footer-contact-link {
	color: rgba(255,255,255,.7);
	font-size: 13px;
	text-decoration: none;
	border: 1px solid rgba(255,255,255,.25);
	padding: 6px 16px;
	border-radius: 20px;
	transition: color .2s, border-color .2s;
	white-space: nowrap;
}
.footer-contact-link:hover { color: var(--white-color-light); border-color: var(--white-color-light); }
@media screen and (max-width: 640px) {
	.footer-links { flex-direction: column; align-items: center; }
	.footer-links-left { justify-content: center; gap: 12px 16px; }
}

.footer-credit {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .25rem;
}
.footer-credit h5 {
	color: var(--white-color-light);
	font-size: .9375rem;
	font-weight: 700;
	margin: 0 0 .625rem;
}
.footer-credit p {
	color: rgba(255,255,255,.78);
	font-size: .8125rem;
	line-height: 1.9;
	margin: 0;
}

/* バナーエリア (デモ: footer-banners 薄グレー帯・hoverで半透明) */
#banner-area {
	background: transparent;
}
#banner-area a {
	display: inline-block;
	transition: opacity .2s;
}
#banner-area a:hover {
	opacity: .75;
}
#banner-area img {
	object-fit: contain;
}

/* ページトップへ戻る (デモ配色: ティール) */
#goto_top {
	background: var(--sub-color-dark);
	color: var(--white-color-light);
	/* [2026-07-28] 元は border-radius:50% だったが、外部CSS(style-nwmaster.css)側で
	   #goto_top が幅100px×高さ40pxの矩形指定のため、50%指定だと円ではなく楕円になっていた。
	   角丸の四角(矩形)に修正 */
	border-radius: 8px;
	box-shadow: 0 3px 12px rgba(15,168,150,.35);
}

/************* フォーム (デモ: 薄緑背景・focusでティールリング) *************/
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="date"],
main input[type="number"],
main select,
main textarea {
	border: 1.5px solid var(--border-color);
	border-radius: 10px;
	background: #F4FCF8;
	color: var(--text-color);
	transition: border-color .2s, box-shadow .2s;
}
main input[type="text"]:focus,
main input[type="email"]:focus,
main input[type="tel"]:focus,
main input[type="date"]:focus,
main input[type="number"]:focus,
main select:focus,
main textarea:focus {
	border-color: var(--sub-color-dark);
	background: var(--white-color-light);
	box-shadow: 0 0 0 3px rgba(15,168,150,.12);
	outline: none;
}

/************* 汎用ユーティリティ (デモの部品を再現する時用) *************/
/* ブランドグラデ文字 (デモ: ロゴ・NEWSラベル等) */
.grad-text {
	background: var(--grad-main);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
/* コールアウト (デモ: form-info) */
.callout-demo,
main .form-info {
	background: var(--grad-subtle);
	border-left: 3px solid var(--sub-color-dark);
	border-radius: 10px;
	padding: .875rem 1rem;
	color: var(--sub-color-dark);
	line-height: 1.7;
}
/* タグ (デモ: tag-industry / tag-type / tag-period) */
.tag-demo {
	display: inline-block;
	padding: .1875rem .625rem;
	border-radius: 6px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .02em;
}
.tag-demo.teal   { background: var(--sub-color-light);   color: var(--sub-color-dark); }
.tag-demo.blue   { background: var(--extra-color-light); color: var(--extra-color-dark); }
.tag-demo.green  { background: var(--main-color-light);  color: var(--main-color-dark); }
.tag-demo.orange { background: var(--accent-color-light);color: var(--accent-color-dark); }
.tag-demo.new {
	background: var(--tag-new-bg);
	color: var(--white-color-light);
	box-shadow: var(--tag-new-shadow);
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
トップページ (front-page.php) デモ準拠スタイル
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/************* ヒーロー検索ボックス *************/
#frontpage #hero-zone {
	position: relative;
}
/* 管理画面のcatch-copyはhero-copy(front-page.php直書き)に置き換えたため非表示 */
#frontpage .slider-area .catchcopy {
	display: none;
}
/* キャッチコピー (デモ: hero h1 + hero-desc) */
#frontpage .hero-copy {
	position: absolute;
	top: auto;
	bottom: 250px; /* 検索ボックス(bottom:2.5rem+高さ約160px)のすぐ上 デモ準拠 */
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	width: min(92%, 780px);
	text-align: center;
	color: var(--text-color-white);
	pointer-events: none;
}
/* [2026-08-16 SEO改修] front-page.php で p → h1 に変更した(トップページの h1)。
   nwmaster の `h1 {font-size:1rem;margin:0;line-height:1;}` はここの指定が上書きするので
   見た目は変わらない。スマホの max-width 潰れは上の「h1 の幅リセット」で対処済み。 */
#frontpage .hero-copy-title {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-weight: 800;
	font-size: clamp(1.375rem, 3.8vw, 2.5rem);
	line-height: 1.3;
	color: var(--text-color-white);
	margin: 0 0 .75rem;
	text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
#frontpage .hero-copy-title em {
	font-style: normal;
	background: var(--hero-title-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* スマホ専用改行 (PCでは無効) */
.sp-only {
	display: none;
}
@media (max-width: 768px) {
	.sp-only {
		display: inline;
	}
}
#frontpage .hero-copy-desc {
	font-size: .9375rem;
	line-height: 1.9;
	color: rgba(255,255,255,.85);
	margin: 0;
	text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
#frontpage .hero-search {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 2.5rem;
	z-index: 5;
	/* [2026-07-26] 780pxだと開催地×開催期間×業種→検索するがPCで728px中741px分必要になり
	   検索するボタンだけ次の行に折り返していたため、780px→860pxに広げて1行に収めた。 */
	width: min(94%, 860px);
	background: rgba(255,255,255,.97);
	border-radius: 20px;
	padding: 1.625rem;
	box-shadow: 0 12px 48px rgba(0,0,0,.15), 0 2px 8px rgba(15,168,150,.1);
	backdrop-filter: blur(10px);
}
#frontpage .hs-row {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
#frontpage .hs-field {
	flex: 1;
	min-width: 10rem;
	display: flex;
	flex-direction: column;
	gap: .375rem;
}
/* [2026-07-26] 開催地×開催期間×業種→検索する、の掛け合わせイメージを示す区切りアイコン。
   スマホ(.hs-rowが縦積み)では意味が通らないため非表示にする(下の@mediaブロック参照)。 */
#frontpage .hs-field-sep {
	align-self: flex-end;
	margin-bottom: .875rem;
	font-size: .8125rem;
	color: var(--border-color-dark);
	flex: none;
}
#frontpage .hs-field-sep-arrow {
	color: var(--sub-color-dark);
}
#frontpage .hs-field label {
	font-size: .6875rem;
	font-weight: 700;
	color: var(--border-color-dark);
	letter-spacing: .07em;
	margin: 0;
}
#frontpage .hs-field select {
	border: 1.5px solid var(--border-color);
	border-radius: 10px;
	padding: .625rem .875rem;
	font-size: .875rem;
	color: var(--text-color);
	background: #F4FCF8;
	outline: none;
	margin: 0;
	height: auto;
	transition: border-color .2s, box-shadow .2s;
}
#frontpage .hs-field select:focus {
	border-color: var(--sub-color-dark);
	background: var(--white-color-light);
	box-shadow: 0 0 0 3px rgba(15,168,150,.12);
}
#frontpage .btn-hero-search {
	background: var(--grad-button);
	color: var(--white-color-light);
	border: none;
	padding: .75rem 2rem;
	border-radius: 10px;
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
	align-self: flex-end;
	white-space: nowrap;
	box-shadow: 0 4px 16px rgba(15,168,150,.35);
	transition: opacity .2s, transform .1s;
}
#frontpage .btn-hero-search:hover {
	opacity: .88;
	transform: translateY(-1px);
}
#frontpage .hs-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	align-items: center;
	font-size: .75rem;
	color: var(--border-color-dark);
}
#frontpage .hs-tag {
	background: var(--grad-subtle);
	color: var(--sub-color-dark);
	border: 1px solid #b0ddd0;
	padding: .25rem .8125rem;
	border-radius: 20px;
	font-size: .75rem;
	font-weight: 600;
	transition: all .15s;
}
#frontpage .hs-tag:hover {
	background: var(--grad-main);
	color: var(--white-color-light);
	border-color: transparent;
	transform: translateY(-1px);
}

/************* 統計バー *************/
#frontpage .stats-bar {
	background: var(--white-color-light);
	border-bottom: 1px solid var(--border-color);
}
#frontpage .stats-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 1.375rem 1.5rem;
	display: flex;
	gap: 2.5rem;
	justify-content: center;
	flex-wrap: wrap;
}
#frontpage .stat-item {
	display: flex;
	align-items: center;
	gap: .75rem;
}
#frontpage .stat-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--grad-subtle);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	color: var(--main-color-dark);
}
#frontpage .stat-num {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: 1.625rem;
	font-weight: 800;
	background: var(--stat-num-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
}
#frontpage .stat-num span {
	font-size: .875rem;
}
#frontpage .stat-label {
	font-size: .75rem;
	color: var(--border-color-dark);
	font-weight: 500;
	line-height: 1.4;
}

/************* サイト説明 *************/
#frontpage .about-section {
	background: var(--white-color-light);
	border-bottom: 1px solid var(--border-color);
	padding: 0;
}
#frontpage .about-inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 1.75rem 1.5rem;
	text-align: center;
}
#frontpage .about-title {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--main-color-dark);
	margin-bottom: .875rem;
	line-height: 1.4;
}
#frontpage .about-inner p {
	font-size: .875rem;
	line-height: 2;
	color: var(--border-color-dark);
	margin: 0;
}

/************* 締切が近いインターン *************/
/* [2026-07-26] 通常カード(.dl-card)の横スクロール版とtateカード版を比較していたが、
   tateカード版を正式採用したため .deadline-section(旧版・背景白)関連のCSSは削除した。
   背景は指定通り薄い緑(--main-color-light)にしている。 */
#frontpage .deadline-tate-section {
	background: var(--main-color-light);
	border-bottom: 1px solid var(--border-color);
	padding: 2rem 0;
}
/* [2026-07-26] .scroll-snap の下余白(28px、出どころ不明の外部/基底CSS由来)を、
   この締切セクションだけ0にする(他の.scroll-snap(関連インターン等)は変えない)。 */
#frontpage .deadline-tate-section .scroll-snap {
	padding-bottom: 0;
}
#frontpage .deadline-inner,
#frontpage .top-intern-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
#frontpage .deadline-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.125rem;
}
#frontpage .deadline-section-title {
	font-size: 1rem;
	font-weight: 800;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: .5rem;
}
#frontpage .deadline-more {
	font-size: .8125rem;
	color: var(--sub-color-dark);
	font-weight: 600;
	transition: opacity .2s;
}
#frontpage .deadline-more:hover {
	opacity: .7;
}

/************* インターン詳細: 検索に戻るボタン (デモ準拠) *************/
.single-article .back-to-search {
	max-width: 1200px;
	margin: 2.5rem auto;
	padding: 0 24px;
	text-align: center;
}
.single-article .back-to-search a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 32px;
	border: 2px solid var(--border-color);
	border-radius: 30px;
	color: var(--border-color-dark);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	background: var(--white-color-light);
	transition: border-color .2s, color .2s;
}
.single-article .back-to-search a:hover {
	border-color: var(--sub-color-dark);
	color: var(--sub-color-dark);
}

/************* インターン詳細: 上部ヘッダー (デモ intern-detail.html 準拠) *************/
.single-article .breadcrumb {
	background: var(--white-color-light);
	border-bottom: 1px solid var(--border-color);
}
.single-article .breadcrumb-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 24px;
	font-size: 12px;
	color: var(--border-color-dark);
}
.single-article .breadcrumb-inner a { color: var(--sub-color-dark); text-decoration: none; }
.single-article .breadcrumb-inner a:hover { text-decoration: underline; }
.single-article .page-header {
	background: var(--white-color-light);
	border-bottom: 1px solid var(--border-color);
	padding: 28px 0 24px;
	margin-bottom: 36px; /* タイトル下の余白 (デモの main margin 相当) */
}
.single-article .page-header-inner {
	position: relative; /* [2026-07-26] NEWの三角リボン(.card-new-ribbon)の基準位置 */
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.single-article .page-header-company {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	text-decoration: none;
	color: var(--border-color-dark);
	font-size: 13px;
	font-weight: 600;
	transition: color .2s;
}
.single-article .page-header-company:hover { color: var(--sub-color-dark); }
.single-article .company-mini-logo {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--white-color-light);
	border: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	overflow: hidden;
	flex-shrink: 0;
}
.single-article .company-mini-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* [2026-07-26] スマホでタイトルが1文字ずつ縦に折り返されるバグを修正。
   原因は特定できていない(外部CSS由来と思われ、幅が40px程度に潰れていた)が、
   width/max-width を明示的にリセットすると解消することを実機で確認済み。 */
.single-article .page-header-title {
	font-size: 22px;
	font-weight: 900;
	color: var(--text-color);
	line-height: 1.4;
	margin: 0 0 12px;
	width: auto;
	max-width: none;
}
.single-article .page-header-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.single-article .page-header-tags .tag {
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
}
/* [2026-07-26] 業種/実施形式/開催期間はカードと同じ配色にするため、.page-header-tags 専用の
   色指定はやめて .intern-tags(プレフィックス無し、カードと共通)側の色に揃えた。
   NEWはタグではなく右上の三角リボン(.card-new-ribbon)に変更したため削除。
   [2026-07-26 変更] 開催形式(tag-style)は開催地(tag-venue)に差し替えた。カードに無い項目のため
   ここだけ橙系で独自に定義する。 */
.single-article .page-header-tags .tag-venue { background: var(--accent-color-light); color: var(--accent-color-dark); }

/************* ページタイトルエリア (デモ .page-hero 準拠) *************/
.page-hero {
	background: var(--grad-main);
	padding: 40px 0 36px;
	position: relative;
	overflow: hidden;
}
.page-hero::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	pointer-events: none;
}
.page-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 1;
}
.page-hero h1 {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-weight: 800;
	font-size: 28px;
	color: #fff;
	margin: 0 0 6px;
	line-height: 1.3;
	/* [2026-07-28] スマホでタイトルが10数pxまで潰れ、1文字ずつ縦に折り返すバグを修正。
	   .single-article .page-header-title で2026-07-26に確認済みと同じ症状・同じ直し方
	   (外部CSS由来と思われる幅の潰れを width/max-width の明示リセットで解消)。
	   インターンを探す・企業一覧・検討リスト・固定ページ(よくある質問等)が共通で使う
	   .page-hero h1 全体に効くよう、ここに直接当てた。 */
	width: auto;
	max-width: none;
}
.page-hero p {
	font-size: 14px;
	color: rgba(255,255,255,.82);
	margin: 0;
}
/* デモ companies: 左下の装飾円 + 掲載企業数バッジ */
.page-hero::after {
	content: '';
	position: absolute;
	bottom: -40px;
	left: -40px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: rgba(255,255,255,.04);
	pointer-events: none;
}
/* [2026-07-26] .page-hero-count(ヒーロー内の件数バッジ)は廃止した。
   件数は本文側に出す(企業一覧の .companies-count / 検索結果の「該当 N 件」)。
   絞り込みUIより上に件数があると、条件と数字が離れて読めるため。 */
/* 検討リストのヒーローはデモ準拠のゴールド系グラデ (他ページと区別) */
#wishlist .page-hero {
	background: var(--wishlist-hero-bg);
}
/* 固定ページ用パンくず (デモ .breadcrumb 準拠) */
.page-breadcrumb {
	background: var(--white-color-light);
	border-bottom: 1px solid var(--border-color);
}
.page-breadcrumb .breadcrumb-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 24px;
	font-size: 12px;
	color: var(--border-color-dark);
}
.page-breadcrumb .breadcrumb-inner a { color: var(--sub-color-dark); text-decoration: none; }
.page-breadcrumb .breadcrumb-inner a:hover { text-decoration: underline; }

@media screen and (max-width: 640px) {
	.page-hero { padding: 24px 0; }
	.page-hero h1 { font-size: 20px; }
}

/************* 企業一覧 (デモ companies.html 準拠) *************/
/* [2026-07-26] 掲載件数。ヒーローのバッジ(.page-hero-count)から一覧の上へ移した。
   数字の見せ方は検索結果ページの「該当 N 件」に合わせている。 */
#companies .companies-count {
	max-width: 1200px;
	margin: 2.5rem auto 0;
	padding: 0 24px;
	font-size: .875rem;
	color: var(--border-color-dark);
}
#companies .companies-count p {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: .25rem;
}
#companies .companies-count strong {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--sub-color-dark);
	font-variant-numeric: tabular-nums;
}
/* [2026-07-26] 業種へのジャンプボタン。
   上の絞り込みパネル(.industry-filter)と同じ「白いパネル + ピル」の構成に揃えている。
   違いはピルが <a> でページ内移動する点だけ。絞り込みは残したまま併設している。 */
#companies .industry-jump {
	max-width: 1200px;
	margin: 1rem auto 0;
	padding: 20px 24px;
	background: var(--white-color-light);
	border: 1.5px solid var(--border-color);
	border-radius: 14px;
}
#companies .industry-jump-label {
	font-size: .75rem;
	font-weight: 700;
	color: var(--border-color-dark);
	margin: 0 0 .625rem;
}
#companies .industry-jump-list {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
}
#companies .industry-jump-item {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .3125rem .875rem;
	border-radius: 20px;
	border: 1.5px solid var(--border-color);
	background: var(--white-color-light);
	font-size: .75rem;
	font-weight: 600;
	color: var(--border-color-dark);
	transition: border-color var(--dur-base, .2s), color var(--dur-base, .2s), background-color var(--dur-base, .2s);
}
#companies .industry-jump-item:hover {
	border-color: var(--sub-color-dark);
	background-color: var(--sub-color-light);
	color: var(--sub-color-dark);
}
#companies .industry-jump-item:focus-visible {
	outline: 2px solid var(--sub-color-dark);
	outline-offset: 2px;
}
#companies .industry-jump-count {
	font-size: .6875rem;
	font-weight: 700;
	color: var(--border-color-dark);
	font-variant-numeric: tabular-nums;
}
/* ジャンプ先の見出しが sticky な #header の裏に隠れないよう、上に余白を確保する。
   #header の高さは --header-pc-height (= topbar + navi)。
   これが効くのはブラウザ標準のジャンプのときだけなので、リンク側に .js-native-anchor を付けて
   テーマのスクロールJS(template-parts/func-js.php)の対象から外している。 */
#companies .industry-section {
	scroll-margin-top: calc(var(--header-pc-height, 64px) + 1rem);
}

#companies .companies-list { max-width: 1200px; margin: 2.5rem auto 3rem; padding: 0 24px; }
/* 件数の直後に来る一覧は、上の余白を詰めて件数とひとまとまりに見せる */
#companies .companies-count + .companies-list { margin-top: .75rem; }
#companies .industry-section { margin-bottom: 40px; }
#companies .industry-title {
	font-size: 24px;
	font-weight: 800;
	color: var(--text-color);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid;
	border-image: var(--grad-main) 1;
	display: flex;
	align-items: center;
	gap: 8px;
}
#companies .industry-count {
	font-family: 'Outfit', sans-serif;
	font-size: 11px;
	font-weight: 700;
	background: var(--main-color-light);
	color: var(--sub-color-dark);
	padding: 2px 8px;
	border-radius: 10px;
}
/* minmax(0,1fr): 既定の 1fr は minmax(auto,1fr) のため、折り返せない長い語があると
   トラックが押し広げられて横スクロールが出る。企業名を全文表示にしたので明示する。 */
#companies .company-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#companies .company-card {
	background: var(--white-color-light);
	border-radius: 14px;
	border: 1.5px solid var(--border-color);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: border-color .2s, box-shadow .2s, transform .15s;
}
#companies .company-card:hover {
	border-color: var(--sub-color-dark);
	box-shadow: 0 6px 24px rgba(15,168,150,.12);
	transform: translateY(-3px);
}
/* [2026-07-30] 画像の高さを px 固定(130px)にしていたため、3カラム時のカード幅
   (約357px)に対して約2.7:1 となり、トップページのインターンカードより横長に見えていた。
   トップは .responsive-card.tate-only の画像が aspect-ratio:16/9 なので、
   企業カードも同じ比率にして見た目を揃える。
   px 固定ではなく比率で指定しているのは、カード幅がカラム数(3/2/1)で変わるため。
   px を揃えるとカラム数によって比率がずれ、結局トップと見た目が合わなくなる。 */
#companies .company-card-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	overflow: hidden;
	background: var(--grad-subtle);
	position: relative;
}
#companies .company-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
#companies .company-card:hover .company-card-thumb img { transform: scale(1.05); }
#companies .company-card-industry {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(13,35,24,.65);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 10px;
}
#companies .company-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
#companies .company-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#companies .company-logo-wrap {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	border: 1px solid var(--border-color);
	background: #fff;
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
#companies .company-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
#companies .company-logo-wrap .logo-emoji { font-size: 26px; }
#companies .company-name-wrap { flex: 1; min-width: 0; }
/* [2026-08-06] 企業名は長くても全文表示する。
   従来は white-space:nowrap + text-overflow:ellipsis で1行に切り詰めて「…」にしていたが、
   正式名称が途中で切れるのは企業情報として不適切なため折り返しに変更。
   日本語の社名は空白を含まないので overflow-wrap:anywhere が無いと折り返せない。
   カードは grid + flex-direction:column で、行内の他カードも同じ高さに伸びる。 */
#companies .company-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--text-color);
	line-height: 1.3;
	margin-bottom: 3px;
	overflow-wrap: anywhere;
	min-width: 0;
}
#companies .company-location { font-size: 11px; color: var(--border-color-dark); display: flex; align-items: center; gap: 4px; }
#companies .company-desc {
	font-size: 12px;
	line-height: 1.8;
	color: var(--border-color-dark);
	margin-bottom: 14px;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#companies .company-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px solid var(--border-color);
	margin-top: auto;
}
#companies .intern-count { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--border-color-dark); }
#companies .intern-count-num {
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 800;
	background: var(--grad-main);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
}
#companies .btn-company-detail {
	font-size: 12px;
	font-weight: 700;
	color: var(--sub-color-dark);
	display: flex;
	align-items: center;
	gap: 3px;
	transition: gap .15s;
}
#companies .company-card:hover .btn-company-detail { gap: 6px; }
@media (max-width: 900px) { #companies .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	#companies .company-grid { grid-template-columns: 1fr; }
	/* [2026-07-30] 高さの px 指定(110px)は撤去。aspect-ratio:16/9 のまま、
	   1カラムの幅に応じて高さが決まるようにする。 */
	#companies .industry-section { margin-bottom: 28px; }
}

/* 業種フィルター (デモ: side-form.php の search-label タグピル準拠) */
#companies .industry-filter {
	max-width: 1200px;
	margin: 24px auto 0;
	padding: 20px 24px;
	background: var(--white-color-light);
	border: 1.5px solid var(--border-color);
	border-radius: 14px;
}
#companies .industry-filter-list {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
}
#companies .industry-filter-item {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .3125rem .875rem;
	border-radius: 20px;
	border: 1.5px solid var(--border-color);
	background: var(--white-color-light);
	font-size: .75rem;
	font-weight: 600;
	color: var(--border-color-dark);
	cursor: pointer;
	transition: all .15s;
}
#companies .industry-filter-item:hover {
	border-color: var(--sub-color-dark);
	color: var(--sub-color-dark);
}
#companies .industry-filter-item input[type="checkbox"] {
	display: none;
}
#companies .industry-filter-item:has(input:checked) {
	background: var(--grad-main);
	border-color: transparent;
	color: var(--white-color-light);
}
#companies .industry-filter-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--border-color);
}
#companies .industry-filter-actions .button {
	font-size: 13px;
	padding: .5rem 1.5rem;
	margin: 0;
}
#companies .companies-empty {
	text-align: center;
	color: var(--border-color-dark);
	font-size: 14px;
	padding: 60px 24px;
}
@media screen and (max-width: 640px) {
	#companies .industry-filter { margin-top: 16px; padding: 16px; border-radius: 10px; }
	#companies .industry-jump { margin-top: 12px; padding: 16px; border-radius: 10px; }
	#companies .industry-filter-list { gap: 8px 12px; }
}

/************* 新着情報 *************/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * 新着情報 (共通パーツ news-list.php)
 * [2026-08-06] トップページ (front-page.php) と お知らせ一覧 (page-all-news.php) の
 * 両方が news-list.php を読み込むようになったため、従来の #frontpage スコープを
 * .news-section スコープに変更した。これで両ページの見た目が一致する。
 * 分岐は news-list.php 側で is_front_page() により行う (見出し「新着情報」と
 * 「お知らせ一覧 →」はトップのみ、ページャーは一覧のみ)。
 * .news-item は sidebar.php / news-tabcontent-panel.php でも使われるため、
 * 必ず .news-section を親に付けて限定すること。
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.news-section {
	background: var(--white-color-light);
	border-bottom: 1px solid var(--border-color);
	padding: 0 0 1.5rem;
}
/* [2026-08-06] grid(100px 1fr) から flex に変更。
   見出しラベル「新着情報」はトップページのみ出力されるため、grid のままだと
   お知らせ一覧でリストが1列目(100px)に入って極端に縦長になっていた。
   flex なら、ラベルが無いときは一覧が自然に全幅を使う。 */
.news-section .news-inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 1.75rem 1.5rem 0;
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}
.news-section .news-label { flex: 0 0 100px; }
.news-section .fp-news { flex: 1 1 auto; min-width: 0; }
.news-section .news-label {
	font-size: .8125rem;
	font-weight: 800;
	background: var(--grad-main);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: .06em;
	white-space: nowrap;
	padding-top: .125rem;
}
.news-section .fp-news {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.news-section .fp-news .news-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5625rem 0;
	border-bottom: 1px solid var(--border-color);
	text-indent: 0; /* テーマ側「li { text-indent: -0.9em }」がli自体に直接効くため、ul側でなくli側で打ち消し */
}
.news-section .fp-news .news-item:last-child {
	border-bottom: none;
}
/* NEW: 赤文字ラベルを日付の左に固定幅で配置。空でも幅を保持し、行ごとの日付・ラベル位置ずれを防ぐ */
.news-section .news-new-flag {
	flex-shrink: 0;
	width: 2.6em;
	text-align: center;
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .05em;
	color: #E5372A;
	line-height: 1;
	white-space: nowrap;
}
.news-section .news-date {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: .75rem;
	font-weight: 600;
	color: var(--border-color-dark);
	white-space: nowrap;
	letter-spacing: .03em;
}
.news-section .news-badge {
	display: inline-block; /* テーマ側のdisplay:blockを打ち消し */
	font-size: .625rem;
	font-weight: 700;
	line-height: 1.6;
	padding: .125rem .5rem;
	border-radius: 4px;
	white-space: nowrap;
	letter-spacing: .04em;
	background: var(--extra-color-light);
	color: var(--extra-color-dark);
	border: 1px solid var(--extra-color);
	flex-shrink: 0;
	min-width: 3.5rem; /* カテゴリーラベルの幅を揃える */
	text-align: center;
}
.news-section .news-badge.new {
	background: var(--grad-main);
	color: var(--white-color-light);
	border: none;
}
/* テーマ側(nwmaster)の::before{content:"NEW"}(赤バッジ)が二重表示されるため無効化 */
.news-section .news-badge.new::before {
	content: none;
}
/* カテゴリー別の配色 (スラッグに合わせて適宜追加) */
.news-section .news-badge.cat-event {
	background: #FEF3E2;
	color: #D4820A;
	border: 1px solid #F5D08A;
}
.news-section .news-badge.cat-column {
	background: #F0EBF8;
	color: #7B5EA7;
	border: 1px solid #D5C5ED;
}
/* [2026-08-06] 新着情報のタイトルは2通りで出力される (front-page.php の get_linkurl 分岐)
     リンクあり … <a href="…">タイトル</a>          ← プラグイン出力のため class が付かない
     リンクなし … <span class="news-item-title">…</span>
   文字の見た目は両方に当て、hover の下線と色変化は <a> のときだけにする。
   リンクでないテキストが hover で下線を出すと押せると誤解させるため。 */
.news-section .fp-news .news-item a,
.news-section .news-item-title {
	font-size: .8125rem;
	color: var(--text-color);
	line-height: 1.5;
}
/* リンクがある場合のみ hover / フォーカスで下線 */
.news-section .fp-news .news-item a {
	text-decoration: none;
	transition: color .15s;
}
.news-section .fp-news .news-item a:hover,
.news-section .fp-news .news-item a:focus-visible {
	color: var(--sub-color-dark);
	text-decoration: underline;
}
/* リンクが無い場合 (span) は hover しても下線・色変化を出さない */
.news-section .news-item-title,
.news-section .news-item-title:hover {
	text-decoration: none;
	cursor: default;
}
.news-section .news-more {
	text-align: center;
	margin-top: 1rem;
}
.news-section .news-more a {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--sub-color-dark);
}
.news-section .news-more a:hover {
	opacity: .7;
}

/************* 新着インターンカード *************/
#frontpage .top-intern-section {
	background: var(--white-color-dark);
	padding: 2.5rem 0;
}
/* セクション見出し「インターンシップ等の情報」: 中央寄せ＋中央下線バー */
#frontpage .top-intern-heading {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--text-color);
	text-align: center;
	margin: 0 0 1.75rem;
	padding-bottom: .75rem;
	position: relative;
}
#frontpage .top-intern-heading::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 52px;
	height: 3px;
	border-radius: 2px;
	background: var(--grad-main);
}
/* 絞り込みサイドバー (デモ: sticky) */
#frontpage .top-search-cell .search-area .search-form {
	position: sticky;
	top: calc(var(--topbar-pc-height) + 1rem);
}
/* 一覧ヘッダー (デモ: listing-header 件数グラデ数字)
   [2026-07-26] 右上の「詳細検索→」リンクを削除し、件数だけになったので中央揃えに変更。 */
#frontpage .listing-header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
	gap: .625rem;
}
#frontpage .listing-count {
	font-size: .875rem;
	color: var(--border-color-dark);
}
#frontpage .listing-count strong {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: 1.375rem;
	font-weight: 800;
	background: var(--grad-main);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-right: 2px;
}
/* サイドバー横は2カラム */
#frontpage .fp-cards.fp-cards-2col {
	grid-template-columns: repeat(2, 1fr);
}
#frontpage .fp-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
/* [2026-07-26] トップのカードを .article-item > .responsive-card.tate-only に統一した。
   カードの面・角丸・タグ・お気に入りボタンの定義は「インターンカード」ブロック側にあり、
   ここには「トップだけの上乗せ」しか置かない。
   削除した旧定義: .fp-card / .fp-card-link / .fp-card-thumb / .fp-card-body /
   .fp-card-company / .fp-card-title / .fp-card-tags / .fp-tag* / .fp-card-meta /
   .fp-card .favorite-btn-wrap …(すべて .article-item 側に同等のものがある) */

#frontpage .article-item .responsive-card.tate-only .image-box img {
	opacity: .92;
}
#frontpage .article-item:hover .responsive-card .image-box img {
	opacity: 1;
}
#frontpage .article-item .responsive-card .image-box {
	background: var(--grad-subtle);
	border-bottom: 1px solid var(--border-color);
}
#frontpage .article-item .responsive-card h3 {
	font-size: .9375rem;
}
/* カードホバー時のツールチップ。サムネイル中央に出す (トップのみ) */
#frontpage .article-item .card-stretch-link::before {
	content: 'くわしい情報を見る';
	position: absolute;
	top: 70px;
	left: 50%;
	transform: translate(-50%, -50%) scale(.96);
	background: rgba(38,38,40,.94);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	padding: 6px 14px;
	border-radius: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s, transform .18s, visibility .18s;
	pointer-events: none;
	z-index: 4;
}
#frontpage .article-item .card-stretch-link:hover::before {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

#frontpage .more-search-wrap {
	text-align: center;
	margin-top: 1.75rem;
}
.btn-more-search {
	display: inline-block;
	padding: .75rem 2.25rem;
	border-radius: 30px;
	border: 2px solid var(--sub-color-dark);
	color: var(--sub-color-dark);
	font-size: .875rem;
	font-weight: 700;
	transition: background .2s, color .2s, transform .15s;
	letter-spacing: .03em;
}
.btn-more-search:hover {
	background: var(--sub-color-dark);
	color: var(--white-color-light);
	transform: translateY(-2px);
}

/************* 企業の皆さまへ *************/
/* 共通パーツ: 静岡県内企業の皆さまへ (どのページでも使用) */
.biz-section {
	background: var(--biz-section-bg);
	border-top: 1px solid #DDD5EE;
	border-bottom: 1px solid #DDD5EE;
	padding: 2.25rem 1.5rem;
}
.biz-inner {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}
.biz-title {
	font-size: 1.125rem;
	font-weight: 800;
	color: #7B5EA7;
	margin-bottom: .875rem;
}
.biz-text {
	font-size: .875rem;
	line-height: 2;
	color: var(--border-color-dark);
	margin-bottom: 1.25rem;
}
.btn-biz {
	display: inline-block;
	padding: .6875rem 2.25rem;
	border-radius: 30px;
	background: var(--biz-button-bg);
	color: var(--white-color-light);
	font-size: .875rem;
	font-weight: 700;
	transition: opacity .2s, transform .15s;
	letter-spacing: .03em;
}
.btn-biz:hover {
	opacity: .85;
	transform: translateY(-2px);
	color: var(--white-color-light);
}

/************* バナーエリア *************/
#frontpage #banner-area {
	background: #f0f0f0;
	padding: 1.25rem 0;
}
#frontpage #banner-area .grid-x {
	align-items: center;
	/* [2026-08-05] 左寄せ。center だと、列数(medium以上で3列)で割り切れない最終行の
	   バナーが中央に寄って上の行と縦位置が揃わなくなる。 */
	justify-content: flex-start;
}

/************* イベント告知バナー (コメントアウト中のマークアップ用) *************/
#frontpage .event-banner-zone {
	background: var(--event-banner-bg);
	padding: 1rem 1.5rem;
}
#frontpage .event-banner-wrap {
	max-width: 820px;
	margin: 0 auto;
}
#frontpage .event-banner-inner {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	transition: background .2s;
}
#frontpage .event-banner-inner:hover {
	background: rgba(255,255,255,.10);
}
#frontpage .event-banner-icon {
	width: 48px;
	height: 48px;
	background: var(--biz-button-bg);
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.375rem;
	color: var(--white-color-light);
	flex-shrink: 0;
}
#frontpage .event-banner-text {
	flex: 1;
	min-width: 0;
}
#frontpage .event-banner-labels {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .3125rem;
	flex-wrap: wrap;
}
#frontpage .event-banner-badge {
	background: var(--biz-button-bg);
	color: var(--white-color-light);
	font-size: .625rem;
	font-weight: 800;
	padding: .125rem .625rem;
	border-radius: 10px;
	letter-spacing: .05em;
	white-space: nowrap;
}
#frontpage .event-banner-target {
	color: rgba(255,255,255,.5);
	font-size: .6875rem;
}
#frontpage .event-banner-title {
	color: var(--white-color-light);
	font-size: .9375rem;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: .375rem;
}
#frontpage .event-banner-meta {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	color: rgba(255,255,255,.75);
	font-size: .75rem;
}
#frontpage .event-banner-meta .free  { color: #7FDDBC; font-weight: 700; }
#frontpage .event-banner-meta .entry { color: #FFD580; font-weight: 700; }
#frontpage .event-banner-cta {
	flex-shrink: 0;
	background: var(--grad-button);
	color: var(--white-color-light);
	font-size: .8125rem;
	font-weight: 700;
	padding: .625rem 1.25rem;
	border-radius: 20px;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(61,170,110,.35);
}
/* バナー画像バージョン: 背景はサイトに馴染むグリーン系の淡いトーンに */
#frontpage .event-banner-image-ver {
	/* body(#F4FCF8)と差がつくよう、一段濃いめのグリーンに */
	background: linear-gradient(135deg, var(--main-color) 0%, var(--sub-color) 100%);
}
#frontpage .event-banner-image-ver .event-banner-img-link {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	transition: opacity .2s, transform .15s;
}
#frontpage .event-banner-image-ver .event-banner-img-link:hover {
	opacity: .88;
	transform: translateY(-1px);
}
#frontpage .event-banner-image-ver img {
	display: block;
	width: 100%;
	height: auto;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
インターン詳細ページ (single-article.php) デモ準拠スタイル
https://lookat8.xsrv.jp/shizuoka/demo/intern-detail.html
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/************* 基本フォントサイズ (デモは全体的にコンパクト) *************/
body {
	font-size: .9375rem;
}
.single-article main p,
.single-article main li {
	font-size: .875rem;
	line-height: 2;
}

/* タイトル見出し(白文字に白フチ8方向のtext-shadowが乗ってぼやけて見えるため無効化)
   通常投稿(お知らせ等)やページのタイトル帯にも共通で効かせる */
.title-area .title-text h2 {
	text-shadow: none;
}

/************* タイトルエリア (デモ: 白背景・濃色文字のスリム帯) *************/
body.single-article .title-area {
	background: var(--white-color-light);
	border-bottom: 1px solid var(--border-color);
	min-height: 0;
}
body.single-article .title-area .title-text h2 {
	color: var(--text-color);
	text-shadow: none;
	font-size: 1rem !important;
	font-weight: 800;
	margin: 1rem 0;
}

/************* 記事タイトルセクション (デモ: page-header) *************/
.single-article #article-title {
	background: var(--white-color-light);
	border-bottom: 1px solid var(--border-color);
	padding: 1.75rem 0 1.5rem;
	margin-bottom: 2rem; /* 下の薄緑エリアとの間隔 (デモ: main margin 36px) */
}
.single-article #article-title h3 {
	font-size: 1.375rem;
	font-weight: 900;
	color: var(--text-color);
	line-height: 1.4;
	margin: .75rem 0;
}
/* 企業ロゴ (デモ: 32px角丸ミニロゴ) */
.single-article #article-title img {
	height: 32px;
	width: auto;
	object-fit: contain;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background: var(--white-color-light);
	vertical-align: middle;
	margin-right: .5rem;
}

/************* ラベル (デモ: パステル塗りつぶしピル 枠線なし) *************/
.kaisai_style,
.jisshi_type {
	border: none;
	border-radius: 6px;
	padding: .1875rem .625rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .02em;
	background: var(--sub-color-light);
	color: var(--sub-color-dark);
	margin-right: .25rem;
}
/* 開催形式 (対面/オンライン/ハイブリッド) */
.kaisai_style.style_1 { background: #EAFAF1; color: #1A7A45; }
.kaisai_style.style_2 { background: #E8F4FB; color: #1A7FBB; }
.kaisai_style.style_3 { background: #FDECEF; color: #C2185B; }
/* 実施形式・期間など */
.jisshi_type.type_1 { background: #FDECEF; color: #C2185B; }
.jisshi_type.type_2 { background: #EAFAF1; color: #1A7A45; }
.jisshi_type.type_3 { background: #E8F4FB; color: #1A7FBB; }

/************* 本文セクションのカード化 (デモ: content-card) *************/
.single-article main .cell section {
	background: var(--white-color-light);
	border: 1px solid var(--border-color);
	border-radius: 14px;
	padding: 1.75rem;
	margin: 0 0 1.25rem;
}
.single-article main .cell section .grid-container {
	padding: 0;
}

/************* 見出し (デモ: section-title 絵文字アイコン+グラデ下線) *************/
/* [2026-08-16 SEO改修] 見出しレベルを1段ずつ繰り上げたため、CSSの対応表も丸ごと1段ずらした。
     旧 h3(セクション見出し) → 新 h2   … このブロック
     旧 h4(小見出し)        → 新 h3   … 下の「h3, h4」のブロック
     旧 h5                  → h5 のまま … さらに下のブロック
   カスタムフィールドのリッチテキスト(article_about / article_content 等)に入力された
   見出しはこちらで書き換えられないため、h3/h4/h5 のセレクタも残してある。
   結果、リッチテキスト側の見出しも一段下の見せ方になり、テンプレートの h2 と自然に階層が付く。
   **セクション見出しは今後 h2。h3 に戻すと小見出しと見た目が入れ替わる。** */
.single-article main .cell section h2 {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 17px; /* デモ .section-title 準拠 (rem×18pxroot回避のためpx) */
	font-weight: 800;
	color: var(--sub-color-deep); /* [2026-07-26] アイコン(--grad-main)より濃いティールで見出しらしく */
	margin: 0 0 1rem;
	padding-bottom: 10px;
	border-bottom: 2px solid;
	border-image: var(--grad-main) 1;
}
/* [2026-07-26] 各セクション見出しの絵文字アイコンは、Font Awesome の <i> をマークアップ側
   (single-article.php の各見出し直前)に移した。h2 は display:flex なので追加の余白調整は不要。 */
/* [2026-07-26→同日再変更] 見出しアイコンの色は、見出しの意味ではなくページの背景に合わせる。
   インターン詳細(背景は既定のうすい緑 --white-color-dark)はブランドのグリーン/ティール、
   企業詳細(背景はうすい紫 #F5F2FA。body.single-company 参照)は同じ紫系(--label-color1)に統一。
   見出しごとに色を出し分けない。
   [2026-07-26 追加、同日中に再変更] 見出し文字が濃い色(--sub-color-deep / --label-color1-deep)に
   なったため、アイコンに存在感を持たせたい。同系統の明るい vivid では差が弱かったため、
   インターン詳細(ティール系)だけは反対色に近い赤(--label-color3)にして、はっきり目立たせる。
   [2026-07-26 追加] Font Awesome は kit(JS) が <i class="fa-solid fa-xxx"> を
   <svg class="svg-inline--fa fa-xxx"> に実行時で置き換える(元の<i>はコメント化されて消える)。
   要素セレクタで i だけを指定していると、置き換え後は当たらなくなり見出しの色を継承してしまう
   (実際に「アイコンの色が変わらない」と報告があり、DOM確認で判明した)。
   以後、アイコンの色/装飾を i 要素セレクタで指定する箇所は必ず svg も含める。 */
.single-article main .cell section h2 i,
.single-article main .cell section h2 svg,
.single-article .company-content h2 i,
.single-article .company-content h2 svg {
	color: var(--label-color3);
}
/* [2026-07-26] インターン詳細と同じ考え方で、紫の反対色に近い金色系(--accent-color-dark)にして
   アイコンに存在感を持たせる。
   [2026-07-26 追加] 見出しレベルをインターン詳細と揃えるため h4 → h3 に変更した。 */
.single-company main .cell section h2 i,
.single-company main .cell section h2 svg,
#company-interns > .grid-container > h2 i,
#company-interns > .grid-container > h2 svg,
#company-industry-interns > .grid-container > h2 i,
#company-industry-interns > .grid-container > h2 svg {
	color: var(--accent-color-dark);
}
/* 小見出し (旧 h4)。テンプレート側の h3 と、リッチテキスト入力の h4 の両方に効かせる。
   nwmaster の `h3 {font-size:1.5rem;margin-bottom:2rem}` をここで打ち消しているので、
   font-size / margin の行を消すとセクション見出しより大きくなる。 */
.single-article main .cell section h3,
.single-article main .cell section h4 {
	font-size: 16px; /* デモ準拠 (px) */
	font-weight: 700;
	color: var(--text-color);
	margin: 1.25rem 0 1rem;
	padding: 2px 0 2px 10px;
	border-bottom: none; /* h2の下線・tableの罫線と紛らわしいので廃止 */
	border-left: 3px solid var(--sub-color-dark); /* 左アクセントバーで差別化 */
	line-height: 1.4;
}

.single-article main .cell section h5 {
font-size: 15px; /* デモ準拠 (px) */
color: var(--accent-color-dark);
}

/* [2026-08-05] 募集要項テーブルのセル内に入る h5 (「報酬・交通費」の
   「その他支給・手配」など、入力欄のリッチテキストから来る小見出し)。
   既定の h5 は margin-top:0 / margin-bottom:8px のため、直前の段落にくっつき
   直後の本文からは離れて見え、どの本文に掛かる見出しなのか分かりにくかった。
   上を空けて下を詰め、見出しと本文をひとまとまりに見せる。
   色は橙(--accent-color-dark)だとセル内で必要以上に目立つため、本文と同じ
   --text-color(#0D2318 ほぼ黒)に揃える。 */
.single-article main .cell section table td h5 {
	margin-top: .5rem;
	margin-bottom: .1875rem;
	/* inherit で td の文字サイズをそのまま引き継ぐ。数値で固定すると
	   テーブル側のサイズを変えたときにここだけ取り残される。 */
	font-size: inherit;
	color: var(--text-color);
}


/************* テーブル (デモ: req-table 横罫線のみ) *************/
.single-article main .cell section table {
	width: 100%;
	border-collapse: collapse;
	border: none;
	background: transparent;
	font-size: 13px; /* デモ .req-table 準拠 (px) */
	margin-bottom: 0;
}
/* Foundation等が付ける外枠・縞々を打ち消す */
.single-article main .cell section table thead,
.single-article main .cell section table tbody,
.single-article main .cell section table tfoot {
	border: none;
	background: transparent;
}
.single-article main .cell section table tbody tr:nth-child(even),
.single-article main .cell section table tbody tr:nth-child(odd) {
	background: transparent;
}
.single-article main .cell section table tr {
	border-bottom: 1px solid var(--border-color);
	background: transparent;
}
.single-article main .cell section table tr:last-child {
	border-bottom: none;
}
.single-article main .cell section table th {
	width: 120px;
	padding: .75rem 0;
	background: transparent;
	border: none;
	color: var(--border-color-dark);
	/* font-size: 13px; /* Foundationのth既定(.8125rem=14.6px)を打ち消しデモ準拠に */
	font-weight: 700;
	text-align: center;
	vertical-align: top;
	white-space: normal; /* 長いラベル(通知メールアドレス等)は折り返す */
}
.single-article main .cell section table td {
	padding: .75rem 0 .75rem 1rem;
	background: transparent;
	border: none;
	color: var(--text-color);
	/* font-size: 13px; /* Foundationのtd既定(.8125rem=14.6px)を打ち消しデモ準拠に */
	line-height: 1.8;
	vertical-align: top; /* THと縦位置を揃える */
}
.single-article main .cell section table a {
	color: var(--sub-color-dark);
}

/************* 応募・選考の流れ (デモ: steps風の番号付きリスト) *************/
#article-nagare ol {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	counter-reset: nagare;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
#article-nagare ol li {
	counter-increment: nagare;
	background: var(--grad-subtle);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: .5rem .875rem .5rem 3rem;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--border-color-dark);
	position: relative;
	line-height: 1.7;
}
#article-nagare ol li::before {
	content: counter(nagare);
	position: absolute;
	left: .75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--grad-main);
	color: var(--white-color-light);
	font-size: .6875rem;
	font-weight: 800;
	font-family: 'Outfit', sans-serif;
	display: grid;
	place-items: center;
	text-align: center;
	line-height: 1;
	text-indent: 0;
	padding: 0;
}

/************* サイドバー *************/
/* 締切ボックス (デモ: deadline-box)
   [2026-07-26] 残り日数に応じて3段階に配色(shizuoka_deadline_info()のtierをそのままクラス名に使用)。
   赤=urgent(残り3日以内・本日締切) / オレンジ=warning(残り4〜7日) / 緑=normal(残り8日以上・未設定)。 */
.single-article .deadline-box {
	border-radius: 8px;
	padding: .75rem 1rem;
	margin-bottom: .875rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .625rem;
}
.single-article .deadline-box.urgent {
	background: #FEF0EE;
}
.single-article .deadline-box.warning {
	background: #FDF3E4;
}
.single-article .deadline-box.normal {
	background: var(--main-color-light);
}
.single-article .deadline-box-label {
	font-size: .625rem !important;
	font-weight: 700;
	letter-spacing: .06em;
	margin: 0 0 2px;
	line-height: 1.2 !important;
}
.single-article .deadline-box strong {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.2;
}
.single-article .deadline-box.urgent .deadline-box-label,
.single-article .deadline-box.urgent strong {
	color: #C0392B;
}
.single-article .deadline-box.warning .deadline-box-label,
.single-article .deadline-box.warning strong {
	color: #B7770D;
}
.single-article .deadline-box.normal .deadline-box-label,
.single-article .deadline-box.normal strong {
	color: var(--main-color-dark);
}
/* 締切までの日数バッジ (デモ: deadline-box-remaining)。残り7日以内(本日締切含む)のみ表示される */
.single-article .deadline-box-remaining {
	font-size: .6875rem;
	font-weight: 700;
	color: var(--white-color-light);
	padding: .1875rem .625rem;
	border-radius: 20px;
	white-space: nowrap;
	flex-shrink: 0;
}
.single-article .deadline-box.urgent .deadline-box-remaining {
	background: #C0392B;
}
.single-article .deadline-box.warning .deadline-box-remaining {
	background: #B7770D;
}
/* 検討リストボタン: プラグイン出力(.simplefavorite-button)をデモ btn-favorite 風の全幅アウトラインに */
.single-article #article-side1 .simplefavorite-button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	background: var(--white-color-light) !important;
	color: var(--border-color-dark) !important;
	border: 1.5px solid var(--border-color) !important;
	border-radius: 10px;
	padding: 11px;
	font-size: 0; /* プラグイン既定テキストを非表示 */
	cursor: pointer;
	transition: border-color .2s, color .2s, background .2s;
}
.single-article #article-side1 .simplefavorite-button .ftooltip,
.single-article #article-side1 .simplefavorite-button .simplefavorite-button-count,
.single-article #article-side1 .simplefavorite-button i,
.single-article #article-side1 .simplefavorite-button span,
.single-article #article-side1 .simplefavorite-button svg,
.single-article #article-side1 .simplefavorite-button img {
	display: none !important;
}
.single-article #article-side1 .simplefavorite-button::before {
	content: '☆ 検討リストに追加';
	font-size: 13px;
	font-weight: 600;
}
.single-article #article-side1 .simplefavorite-button.active {
	background: #FFF9E7 !important;
	border-color: #F5B301 !important;
	color: #C88A00 !important;
}
.single-article #article-side1 .simplefavorite-button.active::before {
	content: '★ 検討リストに追加済み';
}
.single-article #article-side1 .simplefavorite-button:hover {
	border-color: var(--accent-color-vivid) !important;
	color: var(--accent-color-dark) !important;
	background: var(--accent-color-light) !important;
}
/* 応募ボタン (デモ: btn-apply-main 緑グラデ大) */
/* [2026-07-26] 他の塗りボタン(緑系)に埋もれないよう、主要CTAだけ橙にした。 */
/* [2026-07-28] ユーザー指示で赤系に変更。--accent-color-*(橙)は他の場所(タグ・FAQ等)でも
   広く使われている共用トークンのため、このボタンだけ個別の色を指定(トークン化はしない) */
.single-article .btn-apply-main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	width: 100%;
	padding: .9375rem;
	border-radius: 10px;
	font-size: 1rem;
	text-align: center;
	letter-spacing: .03em;
	background: #D0392B;
	border-color: #D0392B;
	color: var(--white-color-light);
	box-shadow: 0 4px 16px rgba(208,57,43,.35);
}
.single-article .btn-apply-sub {
	padding: .5rem .875rem;
	background: #F06292;
	border-color: #F06292;
}

/* 検討リストボタン (デモ: btn-favorite 白+hoverオレンジ) */
.single-article .btn-favorite {
	display: block;
	width: 100%;
	padding: .6875rem;
	border-radius: 10px;
	font-size: .8125rem;
	text-align: center;
	background: var(--white-color-light);
	color: var(--border-color-dark);
	border: 1.5px solid var(--border-color);
}
.single-article .btn-favorite::before {
	content: '♡ ';
}
.single-article .btn-favorite:hover {
	border-color: var(--accent-color-vivid);
	color: var(--accent-color-dark);
	background: var(--accent-color-light);
	opacity: 1;
}
.single-article #article-side1 p {
	margin-bottom: .625rem;
}
/* サイドバー見出し (デモ: グラデ文字の小見出し)
   [2026-08-16 SEO改修] 見出しレベル繰り上げに伴い h3 → h2。 */
.single-article #article-side2 h2,
.single-article #article-side3 h2 {
	display: block;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .06em;
	background: var(--grad-main);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	border-bottom: 1px solid var(--border-color);
	border-image: none;
	padding-bottom: .625rem;
	margin-bottom: .875rem;
}
/* [2026-07-26] 「職場の様子」「インターンシップの様子」はカード風のcallout(白背景+枠+余白)を
   やめ、その分だけ写真を大きく見せる。写真自体の角丸・枠は .orbit 側に残す(下の定義)。 */
:is(.single-article #article-side2, .single-company #company-photos) {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}
/* 写真スライダー(orbit): インターン詳細と企業詳細で共通スタイル */
/* [2026-07-26] 枠線は無し。角丸は画像部分(.orbit-wrapper)だけに掛け、
   下のドットエリア(.orbit-bullets)は角丸の対象から外す。 */
:is(.single-article #article-side2, .single-company #company-photos) .orbit-wrapper {
	border-radius: 12px;
	overflow: hidden;
}
/* 画像を隙間なく敷き詰め (テーマのli既定paddingを打ち消し) + デモ準拠の4:3 */
:is(.single-article #article-side2, .single-company #company-photos) .orbit-container { margin: 0; height: auto; }
:is(.single-article #article-side2, .single-company #company-photos) .orbit-slide {
	padding: 0 !important;
	margin: 0 !important;
	text-indent: 0 !important;
}
:is(.single-article #article-side2, .single-company #company-photos) .orbit-figure {
	margin: 0;
	aspect-ratio: 4 / 3;
}
:is(.single-article #article-side2, .single-company #company-photos) .orbit-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 矢印: デモ slider-btn 風 白丸 */
:is(.single-article #article-side2, .single-company #company-photos) .orbit-previous,
:is(.single-article #article-side2, .single-company #company-photos) .orbit-next {
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.88);
	color: var(--text-color);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	transition: background .15s, transform .15s;
	cursor: pointer; /* [2026-07-26] <button> はブラウザ既定でポインタにならないため明示 */
}
:is(.single-article #article-side2, .single-company #company-photos) .orbit-previous { left: 8px; }
:is(.single-article #article-side2, .single-company #company-photos) .orbit-next { right: 8px; }
:is(.single-article #article-side2, .single-company #company-photos) .orbit-previous:hover,
:is(.single-article #article-side2, .single-company #company-photos) .orbit-next:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.08);
	color: var(--text-color);
}
/* ドット: デモ slider-dots 風 (JSで生成) */
:is(.single-article #article-side2, .single-company #company-photos) .orbit-bullets {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 10px 0 4px;
	margin: 0;
	border: none;
	background: transparent;
}
:is(.single-article #article-side2, .single-company #company-photos) .orbit-bullets button {
	width: 7px;
	height: 7px;
	padding: 0;
	border-radius: 50%;
	background: var(--border-color);
	border: none;
	margin: 0;
	transition: background .2s, transform .2s;
	cursor: pointer;
}
:is(.single-article #article-side2, .single-company #company-photos) .orbit-bullets button.is-active {
	background: var(--sub-color-dark);
	transform: scale(1.3);
}
/* 募集要項(概要) デモはテーブルではなくsummary-list風なので罫線なしのリスト見た目に */
.single-article #article-side3 table tr {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	border-bottom: none;
	padding: .3125rem 0;
}
.single-article #article-side3 table th {
	width: auto;
	min-width: 64px;
	padding: 1px 0 0;
	font-size: .75rem;
	text-align: left;
	white-space: nowrap;
}
.single-article #article-side3 table td {
	padding: 0;
	font-size: .8125rem;
	line-height: 1.6;
}

/************* 関連インターン (デモ: related-section) *************/
.single-article main > section:not(.biz-section) {
	background: transparent;
	border: none;
}
/* [2026-07-26] .scroll-snap(インターン/企業詳細下部のカードスライダー)は土台CSS側の定義で
   overflow:hidden になっており、上の余白が無いと、カードホバー時の浮き上がり(-2px)で
   border-top・影がクリップされて消えて見える。
   [2026-07-26 変更] .scroll-snap 自体のpadding-topだと空間が漠然としていたため、
   実際にクリップ元となる li(スライド1枚ずつ)側にpadding-topを持たせる形に変更した。 */
.scroll-snap .slider__track > li {
	padding-top: 8px;
}
/* 他のインターン/同業種: トップの締切カルーセルと同じ横スクロール機構 */
.related-carousel .rel-scroll-wrap { position: relative; }
.related-carousel .grid-x {
	display: flex;
	flex-wrap: nowrap;
	gap: .875rem;
	margin: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 8px 2px .5rem;
	cursor: grab;
}
.related-carousel .grid-x::-webkit-scrollbar { display: none; }
.related-carousel .grid-x.dragging {
	cursor: grabbing;
	user-select: none;
	scroll-snap-type: none;
}
.related-carousel .article-item {
	flex: 0 0 240px;
	max-width: 240px;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
.related-carousel .rel-slide-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--white-color-light);
	border: 1.5px solid var(--border-color);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1rem;
	color: var(--text-color);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	transition: border-color .15s, transform .15s;
	z-index: 3;
	padding: 0;
}
.related-carousel .rel-slide-btn:hover {
	border-color: var(--sub-color-dark);
	transform: translateY(-50%) scale(1.08);
}
.related-carousel .rel-slide-btn.prev { left: -8px; }
.related-carousel .rel-slide-btn.next { right: -8px; }
/* 関連カルーセルの見出し。[2026-08-16 SEO改修] h3 → h2。
   カード見出しも h3 になったため、`>` で直下に限定している点が以前より重要。
   descendant セレクタに緩めるとカード名にまで下線付きの見出し装飾が付く。 */
.single-article main > section > .grid-container > h2 {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1rem;
	font-weight: 800;
	color: var(--text-color);
	padding-bottom: .625rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid;
	border-image: var(--grad-main) 1;
}
/* [2026-07-26] 絵文字🔎を虫めがねアイコンに置換。
   このセレクタが単一の見出しではなく詳細ページの複数の見出しに当たっているため、
   マークアップ側に <i> を足す方式だと当たっている全箇所を洗い出す必要がある。
   ::before を残したまま中身だけ差し替えるこの方法なら、当たり方は今までと変わらない。
   Font Awesome は kit(SVG+JS) 読み込みで CSS の content からは出せないので、
   Font Awesome Free 6.7.2 (magnifying-glass / CC BY 4.0) のSVGを --text-color で塗って埋めている。
   design.md §8 参照。 */
.single-article main > section > .grid-container > h2::before {
	content: '';
	flex: none;
	width: 1em;
	height: 1em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%230D2318'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/************* インターンカード (LoopItemarticle: 検索結果・関連で共通) *************/
/* 検討リスト/検索結果カード: カード全体リンク + 右下の星トグル (トップと同方針) */
.article-item { position: relative; }
.article-item .card-stretch-link { position: absolute; inset: 0; z-index: 1; }
.article-item .favorite-btn-wrap {
	position: absolute;
	right: .625rem;
	bottom: .625rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.article-item .favorite-btn-wrap .simplefavorite-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	cursor: pointer;
	font-size: 0;
	line-height: 1;
}
.article-item .favorite-btn-wrap .simplefavorite-button .ftooltip,
.article-item .favorite-btn-wrap .simplefavorite-button .simplefavorite-button-count,
.article-item .favorite-btn-wrap .simplefavorite-button i,
.article-item .favorite-btn-wrap .simplefavorite-button span,
.article-item .favorite-btn-wrap .simplefavorite-button svg,
.article-item .favorite-btn-wrap .simplefavorite-button img { display: none !important; }
.article-item .favorite-btn-wrap .simplefavorite-button::before {
	content: '☆';
	display: block;
	font-size: 26px;
	line-height: 1;
	color: #9aa0a6;
	transition: color .15s, transform .15s;
}
.article-item .favorite-btn-wrap .simplefavorite-button:hover::before { transform: scale(1.15); color: #F5B301; }
.article-item .favorite-btn-wrap .simplefavorite-button.active::before { content: '★'; color: #F5B301; }
.article-item .favorite-btn-wrap .simplefavorite-button::after {
	content: '検討リストに追加';
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	background: rgba(38,38,40,.94);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	padding: 4px 9px;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s, transform .15s, visibility .15s;
	pointer-events: none;
	z-index: 5;
}
.article-item .favorite-btn-wrap .simplefavorite-button.active::after { content: '検討リストから削除'; }
.article-item .favorite-btn-wrap .simplefavorite-button:hover::after { opacity: 1; visibility: visible; transform: translateY(0); }

/* 検討リスト: ツールバー(件数 + すべて削除) デモ .toolbar 準拠+件数を装飾 */
.wl-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 1.25rem;
}
.wl-count {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	color: var(--border-color-dark);
	background: var(--main-color-light);
	border: 1px solid var(--border-color);
	padding: 7px 16px;
	border-radius: 24px;
}
.wl-count .wl-count-icon {
	color: #F5B301;
	font-size: 15px;
	align-self: center;
}
.wl-count .wishlist-count-num {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: 20px;
	font-weight: 800;
	background: var(--grad-main);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
	margin: 0 1px;
}
.wl-count .wl-count-suffix { font-weight: 600; }
/* すべて削除 (デモ btn-clear-all 赤枠ピル) */
.wl-toolbar .simplefavorites-clear {
	font-size: 12px;
	color: #C0392B;
	font-weight: 700;
	background: none;
	border: 1.5px solid #EAB0AB;
	padding: 6px 16px;
	border-radius: 20px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.wl-toolbar .simplefavorites-clear:hover { background: #FDECEA; }

/* 検討リスト削除のUndoトースト */
.wl-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(20px);
	background: #262628;
	color: #fff;
	padding: 12px 16px 12px 18px;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0,0,0,.25);
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, transform .25s, visibility .25s;
	max-width: calc(100% - 32px);
}
.wl-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.wl-toast .wl-undo {
	background: none;
	border: none;
	color: #F5B301;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	padding: 4px 6px;
	white-space: nowrap;
}
.wl-toast .wl-undo:hover { text-decoration: underline; }

/* 検討リスト: サイドバーの締切カレンダー(page-wishlist.php)
   [2026-07-27] 元は page-wishlist.php 内の <style> にあったが、他ページと同じく
   style.css に集約。色は独自の変数(--green 等)ではなく、サイト共通トークンに置き換えている。 */
.sidebar-card {
	background: var(--white-color-light);
	border: 1px solid var(--border-color);
	border-radius: 14px;
	padding: 20px;
}
/* 締切カレンダー見出しをクイック検索・詳細検索と同じスタイルに統一 */
/* [2026-07-28] バグ修正: スマホ折りたたみ化(checkbox+label)でh4が.wl-deadline-headerの
   中に入り、直接の子(>)ではなくなったため、このセレクタがマッチしなくなっていた。
   子孫セレクタに変更して再び効くように修正 */
.sidebar-card h4 {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: var(--grad-main);
	color: var(--white-color-light);
	font-size: .875rem;
	font-weight: 800;
	margin: -20px -20px 1rem -20px;
	padding: 1rem 1.25rem;
	border-radius: 10px 10px 0 0;
}
/* [2026-07-28] バグ修正: 見出しの幅がおかしい(内容分の幅にしか広がらない)問題。
   Foundationの `[type=checkbox]+label{display:inline-block}` (詳細度0,1,1)が、
   直後の.wl-deadline-header(単一クラス、詳細度0,1,0)より強く効いていたため、
   labelがブロック化されずh4がその中で縮んでいた。2つクラスのセレクタで上書き。
   あわせてチェックボックス自体もデスクトップで見えてしまっていたため常に非表示に */
.sidebar-card .wl-deadline-header {
	display: block;
	/* Foundationの[type=checkbox]+labelがmargin-left:.5rem/margin-right:1remも
	   指定しており、それも打ち消さないと見出しバーの左右に余白が残ってしまう */
	margin: 0;
}
.sidebar-card .wl-deadline-toggle {
	display: none;
}
.sidebar-title {
	display: flex;
	align-items: center;
	gap: .375rem;
	font-size: 13px;
	font-weight: 800;
	color: var(--border-color-dark);
	letter-spacing: .05em;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-color);
	text-transform: uppercase;
}
.sidebar-title i,
.sidebar-title svg { color: var(--border-color-dark); }

.deadline-list + .deadline-list { margin-top: 10px; }
.deadline-item {
	/* [2026-07-27] 1行目=企業名(+ドット)、2行目=タイトル、3行目=締切(カードの
	   .course-item-statusと同じスタイル)の3段構成。 */
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border-color);
	text-decoration: none;
}
.deadline-list:last-child .deadline-item { border-bottom: none; padding-bottom: 0; }
.deadline-item-company {
	font-size: .6875rem;
	color: var(--border-color-dark);
	opacity: .75;
}
.deadline-item-title {
	font-size: .8125rem;
	font-weight: 700;
	color: var(--border-color-dark);
}

/* 締切カレンダーの締切(.course-item-status)は、詳細ページ/カードの
   shizuoka_render_article_card() と同じ見た目にするため、同じルールを流用する。
   カード側(.article-item .responsive-card .course-item-status)は
   style.css の別セクション(検索結果カード内の追加要素)を参照。 */
.deadline-item .course-item-status {
	display: flex;
	align-items: flex-start;
	font-size: .6875rem;
	color: var(--border-color-dark);
	font-weight: 700;
	margin-top: 2px;
}
.deadline-item .course-item-status strong { color: inherit; }
.deadline-item .course-item-status .deadline-date.urgent { color: #8A2115; }
.deadline-item .course-item-status .deadline-date.warning { color: #7A4C08; }
.deadline-item .course-item-status .deadline-value { flex: 1 1 auto; min-width: 0; }
.deadline-item .course-item-status .deadline-value p { margin: 0; }
.deadline-item .course-item-status .deadline-label {
	flex-shrink: 0;
	color: var(--icon-meta);
	font-weight: 600;
	margin-right: .25rem;
}
/* [2026-08-05] 既定色を --icon-deadline(#FF6A55 赤系)から normal と同じ緑に変更。
   締切日が登録されていない記事(備考のみ)には .deadline-date 自体が出力されず、
   下の :has() による3段階の色分けがどれも当たらないため、残り日数が計算できないのに
   アイコンだけ赤いままになっていた。緊急を示す赤は urgent/warning の上書きに任せる。 */
.deadline-item .course-item-status .deadline-label i,
.deadline-item .course-item-status .deadline-label svg {
	color: var(--main-color-dark);
	/* [2026-08-05] アイコンと「締切」を詰める。マークアップ側の半角スペース(約3px)は
	   削除済みなので、間隔はこの値だけで決まる。 */
	margin-right: .125rem;
}
.deadline-item .course-item-status .days-remaining {
	display: inline-block;
	font-size: .625rem;
	font-weight: 700;
	padding: .0625rem .5rem;
	border-radius: 20px;
	letter-spacing: .03em;
	margin-left: .25rem;
	vertical-align: middle;
}
.deadline-item .course-item-status .days-remaining.urgent {
	background: #FDECEA;
	color: #C0392B;
	border: 1px solid #F1948A;
}
.deadline-item .course-item-status .days-remaining.warning {
	background: #FEF9E7;
	color: #B7770D;
	border: 1px solid #F8C471;
}
/* [2026-07-28] 締切ラベルの時計アイコンも、日付/バッジと同じ3段階(赤=urgent/オレンジ=warning/
   緑=normal、.single-article .deadline-box と同じ配色)で色を変える。tierクラスは
   .deadline-date 側にしか付かないため :has() で親(.course-item-status)経由に見る。 */
.deadline-item .course-item-status:has(.deadline-date.urgent) .deadline-label i,
.deadline-item .course-item-status:has(.deadline-date.urgent) .deadline-label svg {
	color: #C0392B;
}
.deadline-item .course-item-status:has(.deadline-date.warning) .deadline-label i,
.deadline-item .course-item-status:has(.deadline-date.warning) .deadline-label svg {
	color: #B7770D;
}
.deadline-item .course-item-status:has(.deadline-date.normal) .deadline-label i,
.deadline-item .course-item-status:has(.deadline-date.normal) .deadline-label svg {
	color: var(--main-color-dark);
}

.article-item .responsive-card {
	background: var(--white-color-light);
	border: 1.5px solid var(--border-color);
	border-radius: 1rem;
	overflow: hidden;
	height: 100%;
	position: relative;
	transition: border-color .2s, box-shadow .2s, transform .15s;
	box-shadow: none;
}
.article-item:hover .responsive-card {
	border-color: var(--sub-color-dark);
	box-shadow: 0 4px 16px rgba(15,168,150,.12);
	transform: translateY(-2px);
}
/* [2026-07-26] 画像の高さ固定は「画像が上・テキストが下」の縦積みのときだけにする。
   土台CSS(style-pickup.css)は 600px 以上で .responsive-card を2カラム(画像左・テキスト右)にし、
   画像を height:100% / aspect-ratio:3/2 で左カラム一杯に伸ばす。
   そこに height:120px を当てると画像だけが縮んで左側に大きな余白ができる。
   縦積みなのは (1) .tate-only (詳細ページ下部の関連カード) と (2) 600px未満 の2つ。 */
.article-item .responsive-card .image-box img {
	width: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.article-item .responsive-card.tate-only .image-box img {
	aspect-ratio: 16 / 9;
	height: auto;
}
@media (max-width: 599px) {
	.article-item .responsive-card .image-box img {
		aspect-ratio: 16 / 9;
		height: auto;
	}
}
/* 2カラム(画像左・テキスト右)のときの調整 */
@media (min-width: 600px) {
	/* 画像の右側の角を落としてカードの角に合わせる
	   (土台CSS style-pickup.css が4隅とも1remにしているのを上書き) */
	.article-item .responsive-card:not(.tate-only) .image-box img {
		border-radius: 1rem 0 0 1rem;
	}
	/* 左右を必ず半分ずつにする。
	   土台CSS の grid-template-columns は「1fr 1fr」= minmax(auto,1fr) で、
	   auto の最小幅が中身(画像の実寸・テキストの最小幅)に左右される。
	   そのため画像が小さい記事(no-image.jpg は600x400)だけ左右の比率がずれることがある。
	   minmax(0,1fr) にすると中身によらず必ず等分になる。 */
	.article-item .responsive-card:not(.tate-only) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	/* 画像は列幅いっぱいに広げる(実寸比で決まらないようにする) */
	.article-item .responsive-card:not(.tate-only) .image-box img {
		width: 100%;
	}
}
.article-item:hover .responsive-card .image-box img {
	transform: scale(1.05);
}
.article-item .responsive-card .text-box {
	position: relative;
	padding: .75rem;
}
/* [2026-07-26] NEWは会社名の右側に空く余白を使い、右上の三角リボンで表示する。
   よくある「隅を斜めに切るリボン」の実装: 72×72の透明な箱で角に固定し、その中で
   帯を45deg回転させて box の外にはみ出す分を overflow:hidden で切り落とす。
   [2026-07-26 追加] .article-item プレフィックスを外した。インターン詳細ページの
   ページヘッダー(.page-header-inner)でも同じ .card-new-ribbon を使うため。
   [2026-07-30] カード内での置き場所を .text-box の中から .responsive-card 直下に移した
   (my-functions.php)。基準は .article-item .responsive-card{position:relative} 側になり、
   tateカードでは画像の右上、yokoカードでは従来と同じカード右上に出る。
   .text-box の中に置いていたときは、会社名が無い記事でタイトルがリボンに潜っていた。
   カードは overflow:hidden + border-radius:1rem なので、リボンは角丸で切り取られる。 */
.card-new-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	width: 4.5rem;
	height: 4.5rem;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
.card-new-ribbon span {
	position: absolute;
	top: .8125rem;
	right: -1.625rem;
	width: 6.5rem;
	padding: .1875rem 0;
	background: var(--tag-new-bg);
	color: var(--white-color-light);
	box-shadow: var(--tag-new-shadow);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
	transform: rotate(45deg);
}
/* [2026-07-26] 会社名の左にロゴを追加。企業一覧(#companies .company-card-header)と同じ
   「ロゴ／右に企業名+市町村」の構成にした。ロゴが無い企業は fa-building で代用する。 */
.article-item .responsive-card .card-company {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .25rem;
}
.article-item .responsive-card .card-company-logo {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	background: var(--white-color-light);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.article-item .responsive-card .card-company-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.article-item .responsive-card .card-company-logo i,
.article-item .responsive-card .card-company-logo svg {
	font-size: .9375rem;
	color: var(--border-color-dark);
}
.article-item .responsive-card .card-company-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.article-item .responsive-card .company-name {
	font-size: .8125rem;
	color: var(--border-color-dark);
	font-weight: 600;
	line-height: 1.3;
}
.article-item .responsive-card .company-location {
	font-size: .6875rem;
	color: var(--icon-meta);
	line-height: 1.3;
}
.article-item .responsive-card .company-location i,
.article-item .responsive-card .company-location svg {
	color: var(--label-color3);
	margin-right: .1875rem;
}
/* カードのプログラム名。[2026-08-16 SEO改修] h5 → h3 (my-functions.php の
   shizuoka_render_article_card())。カードが載るページはどれもセクション見出しが h2 のため、
   その1段下に揃えた。nwmaster の `h3 {font-size:1.5rem;font-weight:600;margin-bottom:2rem}` を
   ここで全部打ち消しているので、font-size/font-weight/margin の行は消さないこと。 */
.article-item .responsive-card h3 {
	font-size: .8125rem;
	font-weight: 700;
	color: var(--text-color);
	line-height: 1.4;
	margin: 0 0 .375rem;
}
/* 期間(日数)タグ = 見出し直後の、クラスの付いていない div
   [2026-07-26]
   ・:not([class]) を足した。検索結果カードでは見出しの次が .intern-tags なので、
     以前はタグの並び全体がこの緑の面に包まれてしまっていた。
   ・align-self:flex-start を足した。土台CSS(style-pickup.css)の .text-box が
     flex-direction:column のため、inline-block でも既定の stretch で全幅に伸びていた。
     詳細ページ下部の関連カードで日数ラベルが横一杯になっていたのはこれが原因。 */
.article-item .responsive-card h3 + div:not([class]) {
	display: inline-block;
	align-self: flex-start;
	background: var(--tag-green-bg);
	color: var(--tag-green-text);
	border-radius: 6px;
	padding: .1875rem .625rem;
	font-size: .6875rem;
	font-weight: 700;
	margin-bottom: .5rem;
}
.article-item .responsive-card h3 + div:not([class]):empty { display: none; }

/* 検索結果・検討リストのカード内タグ。
   [2026-07-26] これまでどのCSSにも定義が無く、素のテキストとして並んでいた。
   トップのカードもこの定義を使う (2026-07-26 に .fp-tag から統合)。
   業種タグにはアイコンが入る (§8-1 / §8-2)。
   [2026-07-26 追加] .article-item プレフィックスを外した。企業詳細ページのタイトル部分
   (single-company.php の業種タグ)でもカードと同じ .intern-tags をそのまま使い回すため。
   .intern-tags というクラス名はカード/タイトル部分以外では使っていない。 */
.intern-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	margin-bottom: .375rem;
}
.intern-tags .tag {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .1875rem .625rem;
	border-radius: 6px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
}
.intern-tags .tag-industry { background: var(--tag-teal-bg);  color: var(--tag-teal-text); }
.intern-tags .tag-type     { background: var(--tag-blue-bg);  color: var(--tag-blue-text); }
.intern-tags .tag-period   { background: var(--tag-blue-bg);  color: var(--tag-blue-text); }
/* [2026-07-28] 実施形式(tag-type)と開催期間(tag-period)は常にペアの情報なので、
   直後にtag-periodが続くときだけ隙間を詰めて1つの複合バッジに見せる。色も同系の青2トーンに
   揃え(type=薄地、period=濃地+白文字)、左右で「区分:値」の対に読めるようにした。 */
.intern-tags .tag-type:not(:empty):has(+ .tag-period:not(:empty)) {
	border-radius: 6px 0 0 6px;
}
.intern-tags .tag-type:not(:empty) + .tag-period:not(:empty) {
	background: var(--tag-blue-text);
	color: var(--white-color-light);
	border-radius: 0 6px 6px 0;
	margin-left: -.375rem;
}
/* [2026-07-28] 実施形式のうちオープン・カンパニー(type_3)/キャリア教育(type_4)は、
   インターンシップ(type_1/type_2、青)と見分けが付くよう紫系に変える。
   複合バッジの相方(tag-period)側も、直前のtag-typeの系統に合わせて紫の濃色にする。 */
.intern-tags .tag-type[data-slug="type_3"],
.intern-tags .tag-type[data-slug="type_4"] {
	background: var(--tag-purple-bg);
	color: var(--tag-purple-text);
}
.intern-tags .tag-type[data-slug="type_3"]:not(:empty) + .tag-period:not(:empty),
.intern-tags .tag-type[data-slug="type_4"]:not(:empty) + .tag-period:not(:empty) {
	background: var(--tag-purple-text);
}
.intern-tags .tag-new {
	background: var(--tag-new-bg);
	color: var(--white-color-light);
	box-shadow: var(--tag-new-shadow);
}
/* 空のタグ (該当タームが無いとき) は面だけ残らないよう畳む */
.intern-tags .tag:empty { display: none; }

/* ---------- 開催日 (カード内 .intern-date) ----------
   [2026-08-05] タグ(11px)・メタ情報(12px)より一段大きい14pxにして、
   タイトルの次に目に入る情報として扱う。太字は「いつ開催か」を拾いやすくするため。
   カレンダーアイコンは ::before で出す。マークアップ側に <i> を足す方法もあるが、
   .intern-date は本文テキストだけの要素なので、CSSだけで完結させている。
   f073 は Font Awesome 5 の fa-calendar-alt / 6 の fa-calendar-days と同じ字。 */
.intern-date {
	display: flex;
	align-items: baseline;
	gap: .3125rem;
	margin: 0 0 .25rem;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--text-color);
}
.intern-date::before {
	content: "\f073";
	/* kit(JS)が <i> を <svg> に置き換えるのは要素だけで、::before の字形は
	   webfont(all.css)から描画される。Pro / Free どちらでも出るよう順に指定。 */
	font-family: "Font Awesome 5 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	flex: 0 0 auto;
	font-size: .9em;
	color: var(--icon-date);
}
/* 空(開催日の登録が無い)ときは行ごと畳む。アイコンだけ残らないようにする */
.intern-date:empty { display: none; }

/* カード下部のメタ情報 (開催地・締切)。
   [2026-07-26] トップの .fp-card-meta をここへ移し、検索結果カードと共通にした。 */
/* [2026-07-26] 開催地・交通費・人数・参加資格。
   当初は1行に収めて長い値を … で省略していたが、開催地が「浜…」のように切れて
   どこで開催するのか読めなくなるため、省略はやめた。
   横に並べつつ、入りきらない項目は次の行へ送る(項目の途中では改行しない)。
   長い項目はその項目の中で折り返し、アイコンは1行目の先頭に置く。 */
.article-item .intern-metas {
	/* flex ではなく通常のインラインフロー。
	   flex だと1項目が1つの塊になり、狭い列では項目ごとに行を占有して縦積みに見える。
	   インラインなら文章と同じように流れ、行の途中からでも次の項目が続く。
	   アイコンの縦位置も、インライン要素どうしのベースライン揃えで自然に決まる
	   (flex + align-items だと行の高さに引っぱられて文字より上や下にずれる)。 */
	font-size: .75rem;
	line-height: 1.6;
	color: var(--border-color-dark);
	padding-right: 2.25rem; /* 右下固定の星ボタンと重ならないよう余白確保 */
	margin-bottom: .125rem;
}
.article-item .intern-metas > span {
	/* inline-block にすると、項目は横に流れつつ「1つの塊」として次の行へ送られる。
	   素の inline だと行末でアイコンだけ取り残されたり、値が1文字目で切れたりする
	   (日本語はほぼどこでも改行できるため)。
	   1項目だけで行幅を超える長文は、その項目の中で折り返す。 */
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	margin-right: 1rem;
}
.article-item .intern-metas > span:last-child {
	margin-right: 0;
}
.article-item .intern-metas > span > i,
.article-item .intern-metas > span > svg {
	margin-right: .25rem;
}
.article-item .intern-metas .meta-text {
	overflow-wrap: anywhere;
}
/* Types のフィールドが <p> で返ることがある。ブロックのままだと行が分かれてしまう */
.article-item .intern-metas .meta-text p {
	display: inline;
	margin: 0;
}
/* [2026-07-26→同日中に方針転換] 場所・交通費・人数・参加資格のアイコンは、最初は業種アイコンと
   見分けやすいよう1色(--icon-meta)に統一していたが、それぞれ色分けする方針に変更した。
   場所(fa-location-dot)・人数(fa-users)は他の画面と同じ識別色を使うため、
   下の共通マッピング(.icon-tint .fa-location-dot 等)にまかせてここでは何も指定しない。
   交通費(fa-coins)・参加資格(fa-user-check)の色も同じマッピングに追加済み。 */
/* [2026-07-26] ラベルと値をflexの別要素にする。値が複数行(備考が長い/改行を含む)になっても、
   折り返し先はラベルの下(左端)ではなく値の開始位置に揃う。 */
/* [2026-07-26] 締切日の文字は、普段(7日超)は赤くする必要が無いので通常の文字色にした。
   3日以内/7日以内のときだけ、下の .deadline-date.urgent/.warning でバッジより濃い色にする。 */
.article-item .responsive-card .course-item-status {
	display: flex;
	align-items: flex-start;
	/* [2026-07-28] ユーザー指示で13pxに調整。remだとスマホ(root 15px)で12.1875pxまで
	   縮んでしまうため、th同様(§4-4参照)pxで固定して常に13pxにする */
	font-size: 13px;
	color: var(--border-color-dark);
	font-weight: 700;
}
.article-item .responsive-card .course-item-status strong {
	color: inherit;
}
/* 締切日の文字色。バッジ(urgent #C0392B / warning #B7770D)より濃くして差をつける */
.article-item .responsive-card .course-item-status .deadline-date.urgent {
	color: #8A2115;
}
.article-item .responsive-card .course-item-status .deadline-date.warning {
	color: #7A4C08;
}
.article-item .responsive-card .course-item-status .deadline-value {
	flex: 1 1 auto;
	min-width: 0;
}
.article-item .responsive-card .course-item-status .deadline-value p {
	margin: 0;
}
/* [2026-07-26] 締切日の前に「応募締切」ラベル+アイコンを追加。強調色(赤)は日付側だけに残す。 */
.article-item .responsive-card .course-item-status .deadline-label {
	flex-shrink: 0;
	color: var(--icon-meta);
	font-weight: 600;
	margin-right: .25rem;
}
/* [2026-08-05] 既定色を緑に変更。理由は .deadline-item 側の同じ箇所のコメントを参照
   （締切日未登録＝残り日数が計算できない記事でアイコンだけ赤く残っていたため）。 */
.article-item .responsive-card .course-item-status .deadline-label i,
.article-item .responsive-card .course-item-status .deadline-label svg {
	color: var(--main-color-dark);
	/* [2026-08-05] アイコンと「締切」を詰める。理由は .deadline-item 側のコメント参照。 */
	margin-right: .125rem;
}
/* [2026-07-26] トップページの「締切が近いインターン」カードと同じ配色の「残り〇日」バッジ。
   通常のカードでは締切日の直後にインラインで置く。 */
.article-item .responsive-card .course-item-status .days-remaining {
	display: inline-block;
	font-size: .6875rem; /* [2026-07-28] 締切文字を大きくしたのに合わせて比率を維持 */
	font-weight: 700;
	padding: .0625rem .5rem;
	border-radius: 20px;
	letter-spacing: .03em;
	margin-left: .25rem;
	vertical-align: middle;
}
.article-item .responsive-card .course-item-status .days-remaining.urgent {
	background: #FDECEA;
	color: #C0392B;
	border: 1px solid #F1948A;
}
.article-item .responsive-card .course-item-status .days-remaining.warning {
	background: #FEF9E7;
	color: #B7770D;
	border: 1px solid #F8C471;
}
/* [2026-07-26] .normal(残り8日以上)はバッジ自体を表示しなくなったため未使用。tierは
   urgent/warningの2種類のみバッジ化される(shizuoka_deadline_info()参照)。 */

/* [2026-07-28] 締切ラベルの時計アイコンも、日付/バッジと同じ3段階(赤=urgent/オレンジ=warning/
   緑=normal、.single-article .deadline-box と同じ配色)で色を変える。tierクラスは
   .deadline-date 側にしか付かないため :has() で親(.course-item-status)経由に見る。 */
.article-item .responsive-card .course-item-status:has(.deadline-date.urgent) .deadline-label i,
.article-item .responsive-card .course-item-status:has(.deadline-date.urgent) .deadline-label svg {
	color: #C0392B;
}
.article-item .responsive-card .course-item-status:has(.deadline-date.warning) .deadline-label i,
.article-item .responsive-card .course-item-status:has(.deadline-date.warning) .deadline-label svg {
	color: #B7770D;
}
.article-item .responsive-card .course-item-status:has(.deadline-date.normal) .deadline-label i,
.article-item .responsive-card .course-item-status:has(.deadline-date.normal) .deadline-label svg {
	color: var(--main-color-dark);
}

/************* 詳細ページ レスポンシブ *************/
@media (max-width: 768px) {
	/* サイドバー(応募ボタン)を先に表示 デモ準拠 */
	.single-article main > .grid-container > .grid-x {
		flex-direction: column-reverse;
	}
	.single-article main .cell section {
		padding: .875rem;
		margin-bottom: .75rem;
	}
	.single-article #article-title h3 {
		font-size: 1rem;
	}
	.single-article main .cell section table th {
		width: 86px;
		/* [2026-07-28] 以前はここで.6875rem(11px)に縮めており、tdの13pxより小さく
		   読みにくかった。font-sizeの上書きをやめ、tdと同じ13px(通常時の指定)に揃える。 */
	}
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
企業詳細ページ (single-company.php) デモ準拠スタイル
https://lookat8.xsrv.jp/shizuoka/demo/company-detail.html
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.single-company main p,
.single-company main li {
	font-size: .875rem;
	line-height: 2;
}

/************* タイトルエリア (スリム白帯 記事ページと同様) *************/
body.single-company .title-area {
	background: var(--white-color-light);
	border-bottom: 1px solid var(--border-color);
	min-height: 0;
}
body.single-company .title-area .title-text h2 {
	color: var(--text-color);
	text-shadow: none;
	font-size: 1rem !important;
	font-weight: 800;
	margin: 1rem 0;
}

/************* 企業タイトルセクション (デモ: page-header ロゴ+メタ+社名) *************/
.single-company #company-title {
	background: var(--white-color-light);
	border-bottom: 1px solid var(--border-color);
	padding: 1.75rem 0 1.5rem;
	margin-bottom: 2rem;
}
.single-company .company-title-inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.single-company .company-logo-box {
	width: 72px;
	height: 72px;
	border-radius: 14px;
	background: var(--white-color-light);
	border: 1.5px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.single-company .company-logo-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px;
	margin: 0;
}
.single-company .company-title-body {
	flex: 1;
	min-width: 0;
}
.single-company .company-title-meta {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	font-size: .75rem !important;
	color: var(--border-color-dark);
	margin: .375rem 0 .5rem;
	line-height: 1.6 !important;
}
/* [2026-07-26] 所在地アイコンに色を付ける(カード側の .company-location i と同じ赤系)。 */
.single-company .meta-address i,
.single-company .meta-address svg {
	color: var(--label-color3);
}
/* [2026-07-26] 所在地/業種の絵文字アイコンは、Font Awesome の <i> をマークアップ側に移した。
   .meta-num はマークアップ側で使われていない(対応するspanが無い)ため、ルールごと削除した。 */
/* [2026-08-16 SEO改修] 企業名を h3 → h1 に変更(このページの h1)。
   nwmaster の `h1 {font-size:1rem;margin:0;line-height:1;}` はここが上書きするので見た目は同じ。
   スマホの max-width 潰れは上部の「h1 の幅リセット」で対処済み。 */
.single-company #company-title h1 {
	font-size: 1.375rem;
	font-weight: 900;
	color: var(--text-color);
	line-height: 1.3;
	margin: 0;
}
/* 社名下のタグ (デモ page-header-tags 準拠) */
.single-company .company-title-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.single-company .company-title-tags .tag {
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
}
.single-company .company-title-tags .tag-industry { background: var(--sub-color-light); color: var(--sub-color-dark); }
.single-company .company-title-tags .tag-area { background: var(--extra-color-light); color: var(--extra-color-dark); }

/************* 本文セクションのカード化 *************/
/* デモ準拠: 企業ページは body背景を薄紫にして区別。カードは白＋紫ボーダー */
body.single-company { background: #F5F2FA; }
.single-company main .cell section {
	background: var(--white-color-light);
	border: 1px solid #DDD5EE;
	border-radius: 14px;
	padding: 1.75rem;
	margin: 0 0 1.25rem;
}
/* カード内の罫線類も紫系に統一 */
.single-company main .cell section table tr { border-bottom-color: #E2DAF0; }
.single-company #company-photos h2 { border-bottom-color: #E2DAF0; }
.single-company main .cell section .grid-container {
	padding: 0;
}

/************* 見出し (絵文字+グラデ下線のsection-titleに。[2026-07-26] インターン詳細と
   見出しレベルを揃えるため h4 → h3 に変更。[2026-08-16 SEO改修] さらに h3 → h2 に繰り上げ)
   インターン詳細と同じく、CSSの対応表を丸ごと1段ずらしてある:
     旧 h3(セクション見出し) → 新 h2  … このブロック
     旧 h4以下(小見出し)     → 新 h3/h4 … 下のブロック
   企業紹介(conmay_content)のリッチテキストに入力された見出しも下のブロックで受ける。 *************/
.single-company main .cell section h2 {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 15px; /* インターン詳細の section-title と統一 (px) */
	font-weight: 800;
	color: var(--label-color1-deep); /* [2026-07-26] アイコン(--label-color1)より濃い紫で見出しらしく */
	margin: 0 0 1rem;
	padding-bottom: 10px;
	border-bottom: 2px solid;
	border-image: var(--grad-main) 1;
}
/* [2026-07-26] 企業紹介/会社概要の絵文字アイコンは、Font Awesome の <i> をマークアップ側
   (single-company.php の各見出し直前)に移した。 */
/* 小見出し (旧 h4以下)。企業紹介のリッチテキストに入力された h3/h4 を受ける。
   [2026-08-16 SEO改修] 以前は指定が無く nwmaster の `h3 {font-size:1.5rem;margin-bottom:2rem}`
   がそのまま効いていたため、セクション見出し(15px)より本文中の見出しの方が大きかった。
   見出しレベル繰り上げに合わせてここで階層を付ける。 */
.single-company main .cell section h3,
.single-company main .cell section h4 {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-color);
	margin: 1.25rem 0 .75rem;
	padding: 2px 0 2px 10px;
	border-bottom: none;
	border-left: 3px solid var(--label-color1); /* 企業ページの紫系アクセント */
	line-height: 1.4;
}

/* サイドバー(職場の様子)はグラデ文字の小見出し */
.single-company #company-photos h2 {
	display: block;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .06em;
	background: var(--grad-main);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	border-bottom: 1px solid var(--border-color);
	border-image: none;
	padding-bottom: .625rem;
	margin-bottom: .875rem;
}

/************* 会社概要テーブル (デモ: info-table 横罫線のみ) *************/
.single-company main .cell section table {
	width: 100%;
	border-collapse: collapse;
	border: none;
	background: transparent;
	font-size: 13px; /* インターン詳細と統一 (px) */
	margin-bottom: 0;
}
.single-company main .cell section table thead,
.single-company main .cell section table tbody,
.single-company main .cell section table tfoot {
	border: none;
	background: transparent;
}
.single-company main .cell section table tbody tr:nth-child(even),
.single-company main .cell section table tbody tr:nth-child(odd) {
	background: transparent;
}
.single-company main .cell section table tr {
	border-bottom: 1px solid var(--border-color);
	background: transparent;
}
.single-company main .cell section table tr:last-child {
	border-bottom: none;
}
.single-company main .cell section table th {
	width: 130px;
	padding: .75rem 0;
	background: transparent;
	border: none;
	color: var(--border-color-dark);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	vertical-align: top;
	white-space: normal;
}
.single-company main .cell section table td {
	padding: .75rem 0 .75rem 1rem;
	background: transparent;
	border: none;
	color: var(--text-color);
	font-size: 13px;
	line-height: 1.8;
	vertical-align: top;
}
.single-company main .cell section table a {
	color: var(--sub-color-dark);
	word-break: break-all;
}

/************* 関連インターンセクション (デモ: related-section) *************/
#company-interns,
#company-industry-interns {
	background: transparent;
	border: none;
}
/* [2026-08-16 SEO改修] h3 → h2。
   カード見出しも h5 → h3 になったため、descendant のままだとカード名にも
   下線付きの見出し装飾が付いてしまう。`> .grid-container >` で直下の見出しだけに限定する。
   **ここを緩めないこと。** */
#company-interns > .grid-container > h2,
#company-industry-interns > .grid-container > h2 {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1rem;
	font-weight: 800;
	color: var(--label-color1-deep); /* [2026-07-26] アイコン(--label-color1)より濃い紫で見出しらしく */
	padding-bottom: .625rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid;
	border-image: var(--grad-main) 1;
}
/* [2026-07-26] 「募集中のインターンシップ…」「業種：〇〇の…」の絵文字アイコンは、
   Font Awesome の <i> をマークアップ側(single-company.php)に移した。 */

/************* 企業ページ レスポンシブ *************/
@media (max-width: 768px) {
	.single-company main .cell section {
		padding: .875rem;
		margin-bottom: .75rem;
	}
	.single-company .company-title-inner {
		gap: .75rem;
	}
	.single-company .company-logo-box {
		width: 56px;
		height: 56px;
	}
	.single-company #company-title h1 {
		font-size: 1rem;
	}
	.single-company main .cell section table th {
		width: 86px;
		/* [2026-07-28] 以前はここで.6875rem(11px)に縮めており、tdの13pxより小さく
		   読みにくかった。font-sizeの上書きをやめ、tdと同じ13px(通常時の指定)に揃える。 */
	}
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
インターンを探す (article-search-results / side-form.php) デモ準拠スタイル
https://lookat8.xsrv.jp/shizuoka/demo/search.html
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/************* 検索パネル (デモ: search-panel 白カード+グラデヘッダー) *************/
.search-area .grid-container {
	padding: 0;
}
/* [2026-07-26] 左サイドバーの上端を、右カラムの「検索条件」の上端に揃える。
   side-form.php は <section class="search-area"> で始まるので、土台CSS(nwmaster)の
   section { padding-top:3rem } が効き、左だけ3rem下がっていた。
   外側の <section> がすでに上下の余白を持っているため、内側の分は要らない。
   トップページ(#frontpage)は別レイアウトなので対象にしない。 */
body#article-search-results .search-area {
	padding-top: 0;
}
.search-area .search-form {
	background: var(--white-color-light);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	overflow: hidden;
	padding-bottom: 1.25rem;
}
.search-area .search-form .search-form-toggle {
	display: none;
}
.search-area .search-form .search-form-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	background: var(--grad-main);
	color: var(--white-color-light);
	padding: 1rem 1.25rem;
	margin: 0 0 1rem;
	cursor: default;
}
.search-area .search-form .search-form-header h4 {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--white-color-light);
	font-size: .875rem;
	font-weight: 800;
	margin: 0;
}
/* [2026-07-26 C案] ::before の絵文字🔍を撤去し、アイコンは side-form.php の <i> で入れている。
   Font Awesome は kit(SVG+JS) で読み込んでおり、CSSの content ではアイコンを出せないため。
   design.md §8 参照。 */
/* 開閉矢印はスマホのみ表示 */
.search-area .search-form .sf-arrow {
	display: none;
	font-size: .75rem;
	transition: transform .2s;
}
.search-area .search-form > .biko,
.search-area .search-form > form {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
.search-area .search-form > .biko {
	font-size: .75rem;
	color: var(--border-color-dark);
	margin-bottom: .5rem;
}
/* [2026-07-26] トップページだけ、詳細検索フォームが長いので途中まで見せて「続きを見る」で
   全体を表示する(side-form.php の is_front_page() 分岐)。検索結果ページのサイドバーは対象外。 */
#tour-search .search-form-more-toggle {
	display: none;
}
#tour-search .search-form-more-toggle ~ .search-form-collapsible {
	max-height: 420px;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
}
#tour-search .search-form-more-toggle:checked ~ .search-form-collapsible {
	max-height: none;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}
#tour-search .search-form-more-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	margin-top: .75rem;
	padding: .625rem;
	border: 1.5px solid var(--border-color);
	border-radius: 10px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--sub-color-dark);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
#tour-search .search-form-more-btn:hover {
	border-color: var(--sub-color-dark);
	background: var(--sub-color-light);
}
/* [2026-07-30] Font Awesome は kit(SVG+JS)で読み込んでおり、<i> は実行時に <svg> へ
   置換される。要素型セレクタ `i` だけだと置換後にマッチせず、開いている状態でも
   アローが下向きのままだった。svg も対象に含める
   (JS実行前の一瞬は <i> のままなので、両方を指定しておく)。 */
#tour-search .search-form-more-btn i,
#tour-search .search-form-more-btn svg {
	font-size: .75rem;
	transition: transform .2s;
}
#tour-search .search-form-more-btn .less-text {
	display: none;
}
#tour-search .search-form-more-toggle:checked ~ .search-form-more-btn .more-text {
	display: none;
}
#tour-search .search-form-more-toggle:checked ~ .search-form-more-btn .less-text {
	display: inline;
}
#tour-search .search-form-more-toggle:checked ~ .search-form-more-btn i,
#tour-search .search-form-more-toggle:checked ~ .search-form-more-btn svg {
	transform: rotate(180deg);
}
/* グループ見出し (デモ: filter-section-label 右に罫線) */
.search-area .search-form h5 {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
	font-weight: 800;
	color: var(--text-color);
	letter-spacing: .04em;
	margin: 1.25rem 0 .5rem;
}
.search-area .search-form h5::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border-color);
}
/* 地域見出し */
.search-area .search-form h6 {
	display: flex;
	align-items: center;
	gap: .375rem;
	font-size: .75rem;
	font-weight: 700;
	color: var(--border-color-dark);
	margin: .5rem 0 .25rem;
}
/* チェックボックス項目 (デモ: check-item)
   [2026-07-26] 市町村名の折り返しを減らすため、文字サイズとチェックボックスとの間隔を少し詰めた。 */
.search-area .search-form label {
	display: flex;
	align-items: center;
	gap: .375rem;
	font-size: .75rem;
	color: var(--border-color-dark);
	cursor: pointer;
	padding: .1875rem 0;
	line-height: 1.4;
	transition: color .15s;
	margin: 0;
}
.search-area .search-form label:hover {
	color: var(--text-color);
}
/* [2026-07-26] フリーワード/企業名の入力欄。背景を薄いグレーに。 */
.search-area .search-form input.keyword-input {
	background: var(--gray-color-light);
	border: 1px solid var(--border-color-muted);
}
.search-area .search-form input[type="checkbox"] {
	accent-color: var(--sub-color-dark);
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	margin: 0;
	cursor: pointer;
}
.search-area .region-group {
	padding-left: .125rem;
}
/* [2026-07-26] 開催地(西部/中部/東部/伊豆)は、Foundationの grid-x/grid-margin-x だと
   ガター(隙間)がmargin+widthのcalcに埋め込まれていて自由に詰められなかったため、
   Foundationをやめて独自のCSS Gridにした(side-form.php の .venue-grid / .venue-grid-item)。 */
.search-area .search-form .venue-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}
.search-area .search-form .venue-grid-item--single {
	grid-column: 1 / -1;
}
@media (max-width: 768px) {
	.search-area .search-form .venue-grid {
		grid-template-columns: 1fr;
	}
}
/* [2026-07-26] 開催地の地域ブロック。
   「地域の全選択(h6)」と「その地域の市町(.region-group)」が地続きに並んでいて
   どこまでが1つの地域か読み取りにくかったため、薄い面で1つの箱として囲った。
   間隔は .venue-grid の gap が受け持つため、ここでは margin を持たない。 */
.search-area .search-form .region-block {
	background: var(--surface-muted);
	border: 1px solid var(--border-color-muted);
	border-radius: 10px;
	padding: .625rem .625rem .625rem;
}
/* 中に見出しを持たない箱 (オンライン開催) は下の余白を詰める */
.search-area .search-form .region-block--single {
	padding-bottom: .625rem;
}
.search-area .search-form .region-block h6 {
	margin: 0 0 .5rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--border-color-muted);
	color: var(--text-color);
	font-size: .8125rem;
	/* 地域名は太字にしない。囲みと区切り線でまとまりが分かるので、
	   太字まで足すと市町のラベルとの差が強くなりすぎる */
	font-weight: 400;
}

.search-area .search-form .biko {
	font-size: .6875rem;
	color: var(--border-color-dark);
	margin: .25rem 0 .5rem;
}
/* 期間・形式・業種はタグピル選択 (デモ: tag-btn) */
.search-area .search-label {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
}
.search-area .search-label label {
	padding: .3125rem .875rem;
	border-radius: 20px;
	border: 1.5px solid var(--border-color);
	background: var(--white-color-light);
	font-size: .75rem;
	font-weight: 600;
	color: var(--border-color-dark);
	transition: all .15s;
}
.search-area .search-label label:hover {
	border-color: var(--sub-color-dark);
	color: var(--sub-color-dark);
}
.search-area .search-label input[type="checkbox"] {
	display: none;
}
.search-area .search-label label:has(input:checked) {
	background: var(--grad-main);
	border-color: transparent;
	color: var(--white-color-light);
}
/* [2026-07-26] 開催月だけ4つずつ(4列)のグリッドに並べる。他の項目は文言の長さが揃わないため
   flex-wrapのまま、月だけ数字2文字前後で揃うのでグリッドの方が見やすい。 */
.search-area .search-label.month-labels {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.search-area .search-label.month-labels label {
	/* [2026-07-26] このlabelは .search-area .search-form label 側で display:flex になっており、
	   text-alignはflexの子要素配置に効かないため justify-content で中央寄せする。 */
	justify-content: center;
}
/* 検索ボタン (デモ: btn-search-main グラデ) */
.search-area .submit-button-area {
	margin-top: 1.25rem;
	text-align: center;
}
/* [2026-07-26 第2段階] 絵文字🔍を虫めがねアイコンに置換。
   <input> は置換要素で ::before を生成できないため background-image で入れている。
   SVGは Font Awesome Free 6.7.2 (magnifying-glass / CC BY 4.0) を白で塗ったもの。
   ボタン背景が #0FA896 固定・文字色が白のため、アイコン色もハードコードで問題ない。 */
.search-area .submit-search {
	width: 100%;
	background-color: var(--grad-main);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center left calc(50% - 5.5em);
	background-size: .95em .95em;
	color: var(--white-color-light);
	border: none;
	padding: .8125rem;
	border-radius: 10px;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .03em;
	box-shadow: 0 4px 16px rgba(15,168,150,.3);
	transition: opacity .2s, transform .15s;
	margin-bottom: .5rem;
}
.search-area .submit-search:hover {
	opacity: .88;
	transform: translateY(-1px);
}
.search-area .set-clear {
	font-size: .75rem;
	border-radius: 20px;
	padding: .375rem 1rem;
}

/************* 検索結果側 *************/
/* 検索条件の表示 (デモ: active-filters風の淡色ボックス) */
body#article-search-results .search-terms {
	background: var(--grad-subtle);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: .75rem 1rem;
	font-size: .75rem !important;
	color: var(--border-color-dark);
	line-height: 1.9 !important;
}
body#article-search-results .search-terms strong {
	color: var(--sub-color-dark);
	font-weight: 700;
}
body#article-search-results .search-terms .jyoken {
	display: inline-block;
	background: var(--grad-main);
	color: var(--white-color-light);
	font-size: .6875rem;
	font-weight: 800;
	padding: .125rem .625rem;
	border-radius: 20px;
	margin-right: .5rem;
}
/* [2026-07-27] 「該当N件」と並び替えセレクトを同じ行に。セレクトは幅いっぱいに伸ばさず
   (flex:none)、内容量なりの幅のまま右側に置く。 */
body#article-search-results .search-result-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem 0;
}
body#article-search-results .search-result-toolbar p {
	margin: 0;
}
body#article-search-results .search-result-toolbar #js-sort {
	flex: none;
	margin-bottom: 0;
}
/* 該当件数 (デモ: results-count グラデ数字) */
body#article-search-results span[style*="x-large"] {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: 1.375rem !important;
	font-weight: 800;
	background: var(--grad-main);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
}
/* 並び替えセレクト (デモ: sort-select) */
body#article-search-results #js-sort {
	border: 1.5px solid var(--border-color);
	border-radius: 8px;
	padding: .4375rem .75rem;
	font-size: .8125rem;
	color: var(--border-color-dark);
	background: var(--white-color-light);
	cursor: pointer;
	width: auto;
	margin-bottom: 1rem;
}

/************* 検索結果カード内の追加要素 *************/
.article-item .responsive-card .company-logo img {
	max-height: 32px;
	width: auto;
	object-fit: contain;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background: var(--white-color-light);
	margin: 0 0 .25rem;
}
.article-item .responsive-card .text-box p {
	font-size: .75rem;
	line-height: 1.7;
	margin: 0 0 .375rem;
	color: var(--border-color-dark);
}
.article-item .responsive-card .text-box hr {
	border: none;
	border-top: 1px solid var(--border-color);
	margin: .5rem 0;
}

/************* 検索ページ レスポンシブ *************/
@media (max-width: 768px) {
	.search-area .search-form {
		border-radius: 12px;
	}
	.search-area .region-group {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
ヘッダーメニュー・ハンバーガー・ドロワー (デモ準拠)
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/************* サイトロゴ・タイトル文字 (デモ: logo-text 17px/700+部分グラデ) *************/
/* [2026-08-16 SEO改修] ロゴは header.php で h1 → div に変更した(全ページのh1がサイト名に
   なっていたため。理由は header.php のコメント参照)。これで style-nwmaster.css の
   `h1 {font-size:1rem;margin:0;line-height:1;}` と `h1.site-title {color:...}` が
   当たらなくなるので、同じ値をここで明示する。**この4行を消すとロゴ位置がずれる。**
   なお nwmaster の `@media(max-width:640px){h1{max-width:40px}}` もロゴから外れるが、
   そちらは下の「h1 の max-width リセット」で全h1向けに無効化しているので影響しない。 */
#topbar .site-title {
	gap: .625rem;
	color: var(--text-color);
	font-size: 1rem;
	line-height: 1;
	margin: 0;
}
#topbar .site-title img.logo {
	height: var(--header-logo-height);
	width: auto;
	object-fit: contain;
}
#topbar .site-title-text {
	display: flex; /* nwmasterのdisplay:noneを打ち消し */
	flex-direction: column;
	white-space: nowrap;
}
/* 「【静岡県公式】」: グローバルメニューと同じ文字サイズ(.8125rem/13px) */
#topbar .site-title-official {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--text-color);
	line-height: 1.2;
}
/* 「しずおか若者インターンナビ」: 従来通りのサイズ・太さ */
#topbar .site-title-main {
	font-size: 1.3125rem; /* 17px→21px 少し大きく */
	font-weight: 700;
	color: var(--text-color);
	letter-spacing: .02em;
	line-height: 1.2; /* 2行になっても#topbarの高さ(64px)に収まるよう詰める */
}
#topbar .site-title-main span {
	background: var(--grad-main);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
@media (max-width: 480px) {
	#topbar .site-title-main {
		font-size: 1.0625rem; /* 14px→17px 少し大きく */
	}
}

/************* PCグローバルメニュー (デモ: 13px・500・緑hover) *************/
.global-menu > ul > li > a {
	font-size: .8125rem;
	font-weight: 500;
	padding: 0 .75rem;
	color: var(--topbar-text-color);
	transition: color .2s;
}
.global-menu > ul > li > a:hover {
	color: var(--main-color-dark);
}
/* nwmasterのhover下線バーは使わない */
.global-menu > ul > li:hover::after {
	content: none;
}
/* 現在ページ: 濃色+太字のテキスト + 下に少し離したグラデの丸バー */
.global-menu > ul > li.current > a {
	position: relative;
	color: var(--main-color-dark);
	font-weight: 700;
}
.global-menu > ul > li.current > a::after {
	content: '';
	position: absolute;
	left: .75rem;
	right: .75rem;
	bottom: -7px;
	height: 3px;
	border-radius: 3px;
	background: var(--grad-main);
}

/************* ハンバーガーボタン (デモ: 白ヘッダー上・角丸・hover薄緑) *************/
.openbtn {
	top: 7px; /* (topbar 64px - ボタン50px) / 2 */
	right: 10px;
	border-radius: 8px;
	background: var(--main-color-light); /* [2026-07-28] 元の--hamburger-color(transparent)だと白背景に埋もれて目立たないため追加 */
	transition: background .15s;
}
.openbtn:hover {
	background: var(--main-color-vivid);
}
/* PCではハンバーガー非表示 (デモ準拠 .global-menuの表示ブレークポイントに合わせる)
   PCでもドロワーを使いたい場合はこのブロックを削除 */
@media (min-width: 801px) {
	.openbtn {
		display: none;
	}
}

/************* ドロワー (デモ: 暗幕+右から280pxの白パネル) *************/
/* #bowa自体は全画面の暗幕にする */
#bowa {
	background: rgba(0,0,0,.45);
	backdrop-filter: blur(2px);
}
/* 中身のnarrowを白パネルにして右からスライドイン */
#bowa .narrow {
	position: absolute;
	top: 0;
	right: 0;
	width: 280px;
	max-width: 80vw;
	height: 100%;
	margin: 0;
	padding: 0 0 1.5rem;
	background: var(--drawer-bg-color);
	box-shadow: -4px 0 24px rgba(0,0,0,.15);
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.4,0,.2,1);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
#bowa.panelactive .narrow {
	transform: translateX(0);
}
/* ドロワー内ロゴ (デモ: 上部に左寄せ・下線) */
#bowa .logo-drawer,
#bowa .no-logo-drawer {
	margin: 0;
	padding: 1rem 1.25rem;
	text-align: left;
	height: auto;
	border-bottom: 1px solid var(--border-color);
	flex-shrink: 0;
}
#bowa .logo-drawer img {
	height: var(--drawer-logo-height);
	width: auto;
}
/* メインメニュー (デモ: 左寄せ・各項目下線・hover薄緑) */
#bowa ul.simple-menu {
	display: block;
	position: static;
	top: auto;
	left: auto;
	transform: none;
	margin: 0;
	padding: 0; /* [2026-07-28] 簡易検索の直下に来たため、間を空けずに密着させる */
}
#bowa.panelactive .simple-menu {
	margin-bottom: 0;
}
#bowa .simple-menu li {
	text-align: left;
}
#bowa .simple-menu li a {
	font-size: .9375rem;
	font-weight: 500;
	padding: .875rem 1.5rem;
	border-bottom: 1px solid var(--border-color);
	transition: background .15s, color .15s;
}
#bowa .simple-menu li a:hover {
	background: var(--white-color-dark);
	color: var(--main-color-dark);
}
/* サブメニュー (デモ: 小さめ・控えめ) */
#bowa ul.support-menu {
	display: block;
	position: static;
	transform: none;
	margin: auto 0 0; /* パネル下部に寄せる */
	padding: .75rem 0 0;
	border-top: 1px solid var(--border-color);
}
#bowa .support-menu li {
	text-align: left;
}
#bowa .support-menu li a {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--border-color-dark);
	padding: .5rem 1.5rem;
	transition: color .15s;
}
#bowa .support-menu li a:hover {
	color: var(--main-color-dark);
}
/* [2026-07-28] フッター系リンク(規約・プライバシーポリシー・サイトマップ・お問い合わせ)。
   メインメニュー(.simple-menu)と区別するため、.support-menuと同様に小さめ・控えめにし、
   パネル下部に固定(margin-top:auto)。SNSアイコンはさらにその下に横並びで配置 */
#bowa ul.drawer-footer-links {
	display: block;
	position: static;
	transform: none;
	margin: auto 0 0;
	padding: .75rem 0 0;
	border-top: 1px solid var(--border-color);
}
#bowa .drawer-footer-links li {
	text-align: left;
	list-style: none;
}
#bowa .drawer-footer-links li a {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--border-color-dark);
	padding: .5rem 1.5rem;
	transition: color .15s;
}
#bowa .drawer-footer-links li a:hover {
	color: var(--main-color-dark);
}
#bowa .drawer-sns {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .5rem 1.5rem 1.25rem;
}
#bowa .drawer-sns-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--white-color-dark);
	color: var(--border-color-dark);
	transition: color .15s, background .15s;
}
#bowa .drawer-sns-link:hover {
	color: var(--main-color-dark);
	background: var(--drawer-bg-color);
}



/************* トップページ レスポンシブ *************/
@media (max-width: 1023px) {
	#frontpage .fp-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	/* 検索ボックスはスライダーの下に静置
	   ※負のmargin-topでスライダーに重ねると、スライダー下端のアロー/ドットと被るため
	   　重ねずに少し離す */
	#frontpage .hero-search {
		position: static;
		transform: none;
		width: auto;
		margin: .75rem .75rem 1rem;
		border-radius: 12px;
		padding: .875rem;
		box-shadow: 0 2px 12px rgba(0,0,0,.07);
	}
	#frontpage .hs-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: .5rem;
	}
	/* 縦積みでは×/→の掛け合わせイメージが伝わらないため非表示 */
	#frontpage .hs-field-sep {
		display: none;
	}
	#frontpage .btn-hero-search {
		grid-column: 2;
		width: 100%;
	}
	/* キャッチコピー
	   スマホは検索ボックスがスライダーの下に静置され#hero-zone全体が高くなるため、
	   bottom%基準ではなくスライダーの高さ基準で配置する。
	   中央だと背景画像の顔にかぶるため、画像下端(検索ボックス手前)に寄せる */
	#frontpage .hero-copy {
		top: calc(min(var(--slider-height-mobile), var(--slider-max-height-mobile)) - 1.25rem);
		bottom: auto;
		transform: translate(-50%, -100%);
	}
	#frontpage .hero-copy-title {
		font-size: clamp(15px, 4.5vw, 19px);
		line-height: 1.6;
		margin-bottom: .625rem;
	}
	#frontpage .hero-copy-title em {
		white-space: nowrap;
	}
	#frontpage .hero-copy-desc {
		font-size: .8125rem;
		line-height: 1.7;
	}
	#frontpage .hero-copy-desc br {
		display: none;
	}
	/* 統計 */
	#frontpage .stats-inner {
		padding: .875rem 1rem;
		gap: .375rem;
		justify-content: space-around;
	}
	#frontpage .stat-item { gap: .375rem; }
	#frontpage .stat-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 8px; }
	#frontpage .stat-num { font-size: 1.25rem; }
	#frontpage .stat-label { font-size: .625rem; }
	/* サイト説明 */
	#frontpage .about-inner { text-align: left; padding: 1.25rem 1rem; }
	#frontpage .about-inner p br { display: none; }
	/* 新着情報 */
	.news-section .news-inner { flex-direction: column; gap: .625rem; padding: 1.25rem 1rem 0; }
	.news-section .news-label { flex: none; }
	.news-section .fp-news .news-item { flex-wrap: wrap; gap: .5rem; }
	/* [2026-08-06] リンクありの場合は <a>(classなし) で出力されるため、
	   .news-item-title だけに当てているとリンク付きの行だけ折り返しがずれる。 */
	.news-section .fp-news .news-item a,
	.news-section .news-item-title { width: 100%; }
	/* [2026-07-28] NEWバッジはPCでは日付の左だが、スマホでは日付・カテゴリーバッジより右
	   (タイトルの直前)に来るよう並び替え。マークアップの順序(NEW→日付→カテゴリー→タイトル)は
	   変えず、flexの order だけで見た目を変える。 */
	.news-section .news-date { order: 1; }
	.news-section .news-badge { order: 2; }
	.news-section .news-new-flag { order: 3; }
	.news-section .fp-news .news-item a,
	.news-section .news-item-title { order: 4; }
	/* カード */
	#frontpage .fp-cards,
	#frontpage .fp-cards.fp-cards-2col { grid-template-columns: 1fr; }
	/* 絞り込みサイドバーはスマホ非表示 (デモ準拠 ヒーロー検索と検索ページで代替) */
	#frontpage .top-search-cell { display: none; }
	/* 企業向け */
	.biz-section { padding: 1.5rem 1rem; }
	.biz-text br { display: none; }
	/* イベントバナー */
	#frontpage .event-banner-inner { flex-direction: column; align-items: flex-start; gap: .625rem; }
	#frontpage .event-banner-icon { display: none; }
	#frontpage .event-banner-cta { width: 100%; text-align: center; }
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
スマホ最適化 (全ページ共通の強化)
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media (max-width: 768px) {

	/************* iOSフォーカスズーム対策 (フォーム部品は16px以上) *************/
	#frontpage .hs-field select,
	.search-area .search-form select,
	main input[type="text"],
	main input[type="email"],
	main input[type="tel"],
	main input[type="date"],
	main input[type="number"],
	main select,
	main textarea {
		font-size: 16px;
	}

	/************* タップ領域の確保 (44px目安) *************/
	.button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	#frontpage .btn-hero-search,
	.search-area .submit-search,
	.single-article .btn-apply-main,
	.single-article .btn-favorite {
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.search-area .search-form label {
		padding: .4375rem 0;
	}
	.search-area .search-label label {
		padding: .5rem 1rem;
	}
	/* [2026-07-26] 開催月はスマホでも4列のままだと横幅に余裕があるので6列にする。
	   6列だと1rem横パディングでは収まらないため、月だけ狭めて折り返し(改行)を防ぐ。 */
	.search-area .search-label.month-labels {
		grid-template-columns: repeat(6, 1fr);
		gap: .25rem;
	}
	.search-area .search-label.month-labels label {
		padding: .5rem .125rem;
		white-space: nowrap;
		font-size: .6875rem;
	}
	#bowa .simple-menu li a {
		padding: 1rem 1.5rem;
	}

	/************* 検索パネルを折りたたみ式に (side-form.php) *************/
	.search-area .search-form {
		padding-bottom: 0;
	}
	.search-area .search-form .search-form-header {
		cursor: pointer;
		margin-bottom: 0;
		-webkit-tap-highlight-color: transparent;
	}
	.search-area .search-form .sf-arrow {
		display: block;
	}
	.search-area .search-form > .biko,
	.search-area .search-form > form {
		display: none;
	}
	.search-area .search-form .search-form-toggle:checked ~ .biko {
		display: block;
		margin-top: 1rem;
	}
	.search-area .search-form .search-form-toggle:checked ~ form {
		display: block;
		padding-bottom: 1.25rem;
	}
	.search-area .search-form .search-form-toggle:checked ~ .search-form-header .sf-arrow,
	.search-area .search-form:has(.search-form-toggle:checked) .sf-arrow {
		transform: rotate(180deg);
	}

	/************* ヒーロー検索 *************/
	#frontpage .hs-tags {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: .25rem;
	}
	#frontpage .hs-tags::-webkit-scrollbar {
		display: none;
	}
	#frontpage .hs-tag {
		white-space: nowrap;
		flex-shrink: 0;
	}

	/************* 見出し・フォント微調整 *************/
	#frontpage h2 {
		font-size: 1.125rem;
	}
	.breadcrumb-area {
		font-size: .6875rem;
	}

	/************* 詳細ページのラベル折り返し *************/
	.kaisai_style,
	.jisshi_type {
		display: inline-block;
		margin-bottom: .25rem;
	}

	/************* フッター *************/
	footer {
		padding: 1.5rem 1rem 1rem;
		font-size: .75rem;
	}
	.footer-credit {
		flex-direction: column;
		gap: .5rem;
	}
}

/************* 関連インターンのグリッドを横スクロールに (デモのhscroll風) *************/
@media (max-width: 640px) {
	.single-article main > section .grid-x[class*="small-up"],
	#company-interns .grid-x[class*="small-up"],
	#company-industry-interns .grid-x[class*="small-up"] {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: .75rem;
		padding-bottom: .5rem;
	}
	.single-article main > section .grid-x[class*="small-up"]::-webkit-scrollbar,
	#company-interns .grid-x[class*="small-up"]::-webkit-scrollbar,
	#company-industry-interns .grid-x[class*="small-up"]::-webkit-scrollbar {
		display: none;
	}
	.single-article main > section .grid-x[class*="small-up"] > .cell,
	#company-interns .grid-x[class*="small-up"] > .cell,
	#company-industry-interns .grid-x[class*="small-up"] > .cell {
		flex: 0 0 72%;
		max-width: 72%;
		width: auto;
		margin-left: 0;
		margin-right: 0;
		scroll-snap-align: start;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * [2026-07-26 C案] A案(トップの型)とB案(検索の常設化・アイコン統一)の統合
 * ---------------------------------------------------------------------------------------------
 * ・トップは A案 に戻す = ヒーロー画像の上に検索ボックスを重ねる。
 *   第3段階で入れていた #frontpage .hero-copy / .hero-search の再配置 CSS は削除した。
 *   ヒーロー高さトークンも style-root.css で 90vh/720px に復帰済み。
 * ・ヘッダー常設の検索バーは 全ページで廃止 した (C案-2)。CSSも削除済み。戻さないこと。
 *   検索の入口は「トップ = ヒーロー内」「下層 = 検索ページのサイドバー」「スマホ = ドロワー」の3つ。
 * ・「業種から探す」「地域から探す」はトップから外し、検索ページのサイドバーへ移設した。
 *   タイル型(上段アイコン / 下段テキスト)で、業種は全件表示。
 * ・アイコンは fa クラスごとに識別色を付ける (.icon-tint)。値は style-root.css の --icon-*。
 * design.md §2 / §8-2 / §10 参照。
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/************* ドロワー内 検索 (スマホ) *************/
/* トップではヘッダーの常設バーを出さないため、スマホの入口はここになる。
   ドロワー内はメニュー項目より先に置き、開いてすぐ検索できるようにする。 */
#bowa .drawer-search {
	/* [2026-07-28] 簡易検索がパネル最上部に来たため、ハンバーガーボタン(top:7px〜57px)と
	   重ならないよう上だけ広めに確保(topbarの高さ64pxに合わせる) */
	padding: 4rem 1.25rem 1rem;
	border-bottom: 1px solid var(--border-color);
	background: var(--sub-color-light);
}
#bowa .drawer-search .drawer-search-label {
	display: flex;
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--sub-color-dark);
	margin-bottom: .5rem;
}
#bowa .drawer-search select {
	width: 100%;
	height: 40px;
	margin: 0 0 .5rem;
	padding: 0 1.75rem 0 .75rem;
	font-size: .875rem;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	background-color: var(--white-color-light);
	color: var(--text-color);
}
#bowa .drawer-search .drawer-search-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	height: 40px;
	border: none;
	border-radius: 30px;
	background-color: var(--sub-color-dark);
	color: var(--white-color-light);
	font-size: .875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--dur-base, .2s), transform var(--dur-fast, .15s);
}
#bowa .drawer-search .drawer-search-btn:hover { background-color: var(--main-color-vivid); }
#bowa .drawer-search .drawer-search-btn:active { transform: translateY(1px); }
#bowa .drawer-search .drawer-search-btn:focus-visible,
#bowa .drawer-search select:focus-visible {
	outline: 2px solid var(--sub-color-dark);
	outline-offset: 2px;
}

/************* サイドバー 「業種から探す / 地域から探す」(検索ページ) *************/
/* 旧トップの find-section をサイドバー用に作り替えたもの。
   絞り込みフォーム(.search-form)を開かなくても主要な切り口に到達できるようにする入口。
   [2026-07-26 C案-2] 1行ピル型 → タイル型(上段アイコン / 下段テキスト)に変更。
   業種は畳まず全件出す。件数はタイル右上のバッジ。 */
.side-find {
	background: var(--white-color-light);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	overflow: hidden;
	padding-bottom: 1.125rem;
	margin-bottom: 1rem;
}
/* 見出しバーは下の「詳細検索」パネル(.search-form-header)と同じ作りにして、
   サイドバーに2つの箱が並んでいることが分かるようにする */
.side-find .side-find-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	background: var(--grad-main);
	color: var(--white-color-light);
	padding: 1rem 1.25rem;
	margin: 0 0 1rem;
}
.side-find .side-find-header h4 {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--white-color-light);
	font-size: .875rem;
	font-weight: 800;
	margin: 0;
}
.side-find .side-find-group {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
.side-find .side-find-label {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
	font-weight: 700;
	color: var(--border-color-dark);
	margin: 0 0 .625rem;
}
.side-find .side-find-label::after {
	content: '';
	flex: 1 1 auto;
	border-top: 1px solid var(--border-color);
}
.side-find .side-find-group + .side-find-group {
	margin-top: 1.125rem;
}
.side-find-chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(84px, 100%), 1fr));
	gap: .375rem;
}
.side-find-chip {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: .375rem;
	min-width: 0;
	padding: .625rem .375rem .5rem;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	background: var(--white-color-light);
	color: var(--text-color);
	text-align: center;
	/* [2026-07-26] ごく薄い浮き上がり感を出すためのbox-shadow */
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	transition: border-color var(--dur-base, .2s), background-color var(--dur-base, .2s), color var(--dur-base, .2s), box-shadow var(--dur-base, .2s);
}
.side-find-chip:hover {
	border-color: var(--sub-color-dark);
	background-color: var(--sub-color-light);
	color: var(--text-color);
}
.side-find-chip:focus-visible {
	outline: 2px solid var(--sub-color-dark);
	outline-offset: 2px;
}
/* 上段: アイコン (テキストより一回り大きく)
   [2026-07-26] Font Awesome kit(JS) が <i> を <svg> に置き換えるため、svg も対象にする。 */
.side-find-chip i,
.side-find-chip svg {
	flex: none;
	font-size: 1.25rem;
	line-height: 1;
}
/* 下段: 業種名・地域名 */
.side-find-chip .side-find-chip-name {
	display: block;
	min-width: 0;
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
/* [2026-07-26] 「コンサルティング・シンクタンク」だけ他より長く3行になるため、そこだけ文字を小さく。
   .625rem(10px)でもSafariでは3行のままだったため、さらに縮小。
   [2026-08-05] 名称の長い業種5つ(医療・福祉・介護 / 外食・フードサービス /
   広告・マスコミ・出版・印刷 / エンタメ・ゲーム・スポーツ / サービス・ブライダル・美容)も
   同じサイズに揃えた。タイル幅は共通なので、長い名称だけ字を落として行数を抑える。 */
.side-find-chip[data-slug="industry_5"]  .side-find-chip-name, /* 外食・フードサービス */
.side-find-chip[data-slug="industry_9"]  .side-find-chip-name, /* コンサルティング・シンクタンク */
.side-find-chip[data-slug="industry_11"] .side-find-chip-name, /* 広告・マスコミ・出版・印刷 */
.side-find-chip[data-slug="industry_12"] .side-find-chip-name, /* エンタメ・ゲーム・スポーツ */
.side-find-chip[data-slug="industry_14"] .side-find-chip-name, /* サービス・ブライダル・美容 */
.side-find-chip[data-slug="industry_15"] .side-find-chip-name  /* 医療・福祉・介護 */
{
	font-size: .5625rem;
}
/* 件数はタイル右上に小さく重ねる (2段の構成を崩さないため) */
.side-find-chip .side-find-chip-count {
	position: absolute;
	top: .25rem;
	right: .3125rem;
	font-size: .625rem;
	font-weight: 700;
	color: var(--border-color-dark);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* サイドバーは768px以下で本文の上に回り込む。横幅が広がるので列を増やす */
@media (max-width: 768px) {
	.side-find {
		border-radius: 12px;
		padding-bottom: 1rem;
	}
	.side-find .side-find-header {
		padding: .875rem 1rem;
	}
	.side-find .side-find-group {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.side-find-chips {
		grid-template-columns: repeat(auto-fill, minmax(min(92px, 100%), 1fr));
	}

	/* 検討リスト: 締切カレンダーをスマホで折りたたみ式に
	   (display:none/blockは幅の都合で.sidebar-card側に共通化済み。ここではモバイル固有の
	   クリック可能な見た目だけ) */
	.wl-deadline-header {
		cursor: pointer;
		margin: 0 -20px 0 -20px;
	}
	.wl-deadline-toggle:not(:checked) ~ .wl-deadline-content {
		display: none;
	}
}

/************* アイコンの識別色 *************/
/* [2026-07-26 C案-2] アイコンごとに色を変える。値は style-root.css の --icon-* が定義元。
   塗りボタンの中のアイコン(白抜き)まで着色しないよう、.icon-tint を付けた入れ物の中だけに効かせる。
   .icon-tint を新しい場所に付けるときは、その中のアイコンが白抜きでないことを確認すること。
   アイコンと色の対応表は design.md §8-2。 */
.icon-tint .fa-laptop-code       { color: var(--icon-it); }
.icon-tint .fa-industry          { color: var(--icon-maker); }
.icon-tint .fa-handshake         { color: var(--icon-trade); }
.icon-tint .fa-cart-shopping     { color: var(--icon-retail); }
.icon-tint .fa-utensils          { color: var(--icon-food); }
.icon-tint .fa-building-columns  { color: var(--icon-finance); }
.icon-tint .fa-helmet-safety     { color: var(--icon-realestate); }
.icon-tint .fa-train             { color: var(--icon-infra); }
.icon-tint .fa-lightbulb         { color: var(--icon-consult); }
.icon-tint .fa-graduation-cap    { color: var(--icon-hr); }
.icon-tint .fa-newspaper         { color: var(--icon-media); }
.icon-tint .fa-gamepad           { color: var(--icon-entame); }
.icon-tint .fa-plane             { color: var(--icon-travel); }
.icon-tint .fa-spa               { color: var(--icon-beauty); }
.icon-tint .fa-hand-holding-heart{ color: var(--icon-medical); }
.icon-tint .fa-scale-balanced    { color: var(--icon-legal); }
.icon-tint .fa-landmark          { color: var(--icon-public); }
.icon-tint .fa-building          { color: var(--icon-other); }
/* 地域・開催形式 */
.icon-tint .fa-video             { color: var(--icon-online); }
.icon-tint .fa-water             { color: var(--icon-izu); }
.icon-tint .fa-mountain          { color: var(--icon-east); }
.icon-tint .fa-city              { color: var(--icon-center); }
.icon-tint .fa-warehouse         { color: var(--icon-west); }
/* 汎用 (カードのメタ情報など) */
.icon-tint .fa-users             { color: var(--icon-people); }
.icon-tint .fa-location-dot      { color: var(--icon-place); }
.icon-tint .fa-clock             { color: var(--icon-deadline); }
.icon-tint .fa-clipboard-list    { color: var(--icon-count); }
.icon-tint .fa-coins             { color: var(--icon-reward); }
.icon-tint .fa-user-check        { color: var(--icon-qualify); }
/* 選択済みの業種チップは塗り(--grad-main)の上に載るため、アイコンは白に戻す
   [2026-07-26] Font Awesome kit(JS) が <i> を <svg> に置き換えるため、svg も対象にする。 */
#companies .industry-filter-item:has(input:checked) i,
#companies .industry-filter-item:has(input:checked) svg { color: var(--white-color-light); }

/* トップページ・カード内の単体アイコン。上と同じ考え方で、意味に応じた色を1つずつ当てる
   [2026-07-26] Font Awesome kit(JS) が <i> を <svg> に置き換えるため、svg も対象にする。 */
#frontpage .stat-item:nth-child(1) .stat-icon i,
#frontpage .stat-item:nth-child(1) .stat-icon svg { color: var(--icon-other); }
#frontpage .stat-item:nth-child(2) .stat-icon i,
#frontpage .stat-item:nth-child(2) .stat-icon svg { color: var(--icon-count); }
#frontpage .stat-item:nth-child(3) .stat-icon i,
#frontpage .stat-item:nth-child(3) .stat-icon svg { color: var(--icon-place); }
#frontpage .deadline-section-title i,
#frontpage .deadline-section-title svg { color: var(--icon-deadline); }
/* .page-hero h1 の中のアイコンは背景が濃色で文字が白のため、着色しない (白のまま) */

/* ================================================================
   印刷用 (@media print)
   [2026-07-26] print.css は旧テーマ(Norwegian Wood)の使い回しで、
   このサイト(しずおか若者インターンナビ)向けの中身が無かった。
   style.css は functions.php で media="screen" 限定で読み込まれていたため、
   ここに @media print を書いても効かなかった。functions.php 側を
   media="all" に変更した上で、このブロックを末尾に追加している。
   print.css 自体(style-root.css / style-nwmaster.css を print 用に@import)は
   そのまま残しているので、色トークン(var(--xxx))はそちらから供給される。
   ================================================================ */
@media print {

	/* ---------- 基本方針: ナビ・装飾・操作系のUIを消し、本文だけを残す ---------- */
	#header,
	.openbtn,
	#bowa,
	.footer-contact,
	footer,
	#goto_top {
		display: none !important;
	}

	/* URLは印刷しても分からないため、パンくずだけは残す */
	.page-breadcrumb,
	.breadcrumb,
	.breadcrumb-area {
		display: block !important;
	}

	/* スライダー・カルーセルの矢印やドット、検討リスト★、応募ボタンは紙面では操作できないため非表示 */
	.orbit-previous,
	.orbit-next,
	.orbit-bullets,
	.rel-slide-btn,
	.card-new-ribbon,
	.favorite-btn-wrap,
	.btn-favorite,
	.simplefavorite-button,
	.btn-apply-main,
	.card-stretch-link,
	#js-sort,
	.industry-filter-actions,
	.industry-jump,
	.side-find,
	.more-search-wrap,
	.deadline-more,
	.hs-tag-more {
		display: none !important;
	}

	/* インターンを探すページの検索サイドバー(絞り込みフォーム)は紙面では使えないため非表示。
	   検索結果の一覧だけを印刷対象にする。
	   [補足] .search-area は side-form.php 内の <section> で、.cell.medium-4 の「中」にある
	   (逆ではない)ため、サイドバー列自体を消すには body#article-search-results 側から
	   .cell.medium-4 を直接指定する。 */
	.search-area .search-form {
		display: none !important;
	}
	body#article-search-results .cell.medium-4 {
		display: none !important;
	}
	body#article-search-results .cell.medium-8 {
		width: 100% !important;
	}

	/* トップページのヒーロー・締切カルーセルは紙面では意味を持たないため非表示 */
	#hero-zone,
	#frontpage .deadline-tate-section {
		display: none !important;
	}

	/* ---------- 色・背景: インクを節約し、文字を確実に黒系で読めるようにする ---------- */
	* {
		background: transparent !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	body {
		color: #000;
		background: #fff !important;
	}
	a {
		color: #000;
		text-decoration: underline;
	}
	/* 締切の緊急度だけは色の情報が意味を持つので、印刷でも保つ */
	.course-item-status .deadline-date.urgent {
		color: var(--label-color3) !important;
	}
	.course-item-status .deadline-date.warning {
		color: #B7770D !important;
	}

	/* ---------- レイアウト: 画面前提の幅指定・sticky/fixedを解除して紙面いっぱいに ---------- */
	.grid-container,
	.page-header-inner,
	.deadline-inner,
	.top-intern-inner {
		max-width: 100% !important;
		padding: 0 !important;
	}
	* {
		position: static !important;
	}

	/* ---------- 改ページ: カードや見出しの途中で紙面が切れないようにする ---------- */
	.responsive-card,
	.article-item,
	.company-card,
	section {
		break-inside: avoid;
	}
	h1, h2, h3, h4, h5, h6 {
		break-after: avoid;
	}

	/* ---------- 画像: 装飾目的の大きな写真は紙面では省略し、内容に集中させる ---------- */
	.image-box img,
	.orbit-figure img {
		max-height: 6rem;
	}
}

/* =========================================================
   固定ページ「企業の皆さまへ」(/for-companies/) 専用スタイル
   元: https://intern.shizuoka.jp/index.html のレイアウトを
       nowandthen のカラーパレットで再現したもの。
   色はすべて style-root.css の変数を参照しているので、
   テーマの配色を変えればこのページも自動で追従します。

   マークアップはテーマの通常のページ構成に合わせ、
   ブロックごとに <section> を分け、中身は <div class="grid-container">
   （必要なら更に <div class="narrow">）で包む。他の固定ページ
   (page-all-news.php 等)や template-parts/event-report.php と同じ型。
   色つきセクションは template-parts/biz-section.php と同じく、
   <section> 自体に背景+上下ボーダーを付けた帯(edge-to-edge)にしている。
   ========================================================= */

/* 見出しの色。CTAボタン(--grad-button: #3DAA6E→#5DC48A)と色相を揃えるため
   teal(--sub-color-*)ではなく green(--main-color-dark, #2EAA72)に統一。 */
:root {
	--fc-teal: var(--main-color-dark);
	--fc-teal-solid: var(--main-color-dark);
}

/* ---------- ヒーロー (元ページ準拠: 富士山の背景写真 + 白のせ) ---------- */
.fc-hero {
	background-image:
		linear-gradient(170deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.78) 100%),
		/* [2026-08-18] 旧ドメイン(intern.shizuoka.jp)の画像を参照していたが、旧ドメインが
		   新サイトへの全面301リダイレクトになり、画像URLを叩くとHTMLが返るようになったため
		   背景が出なくなっていた。メディアライブラリに上げ直したファイルを参照する。
		   **旧ドメインのURLを新たに書かないこと（全パスがトップへ転送される）** */
		url("https://intern.pref.shizuoka.jp/wp-content/uploads/2026/08/bg-fuji.jpg");
	background-position: bottom left;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 2.5rem 0;
}
/* 元ページ左上の「静岡県」ロゴ行 */
.fc-hero-logo {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-color);
	margin-bottom: 1.25rem;
}
.fc-hero-logo img { width: 70px; }
.fc-badge {
	display: inline-block;
	background: var(--white-color-light);
	color: var(--fc-teal);
	font-size: .8125rem;
	font-weight: 700;
	padding: .375rem 1.125rem;
	border-radius: 20px;
	margin-bottom: 1rem;
	box-shadow: 0 2px 6px rgba(46,170,114,.12);
}
.fc-catch {
	font-size: 1.875rem;
	font-weight: 800;
	color: var(--text-color);
	line-height: 1.45;
	margin-bottom: 1.25rem;
	font-family: var(--font-display);
}
/* 「採用」だけオレンジで強調。小さい文字用の --accent-color-dark より
   鮮やかな --accent-color-orange を使う(大きな太字なのでコントラストは足りる) */
.fc-catch .fc-em { color: var(--accent-color-orange); }
/* 元ページの hero-info-box 準拠。背景写真の上でも読めるよう不透明度だけ上げてある */
.fc-infobox {
	background: rgba(255,255,255,.9);
	border-radius: 6px;
	padding: 1.25rem 1.125rem;
	box-shadow: 0 2px 10px rgba(13,35,24,.12);
}
.fc-infobox-t {
	font-size: 1rem;
	font-weight: 700;
	color: var(--fc-teal);
	line-height: 1.6;
	margin-bottom: .625rem;
}
.fc-infobox p {
	font-size: .85rem;
	line-height: 1.7;
	margin-bottom: .5rem;
	color: var(--text-color);
}
.fc-infobox p:last-child { margin-bottom: 0; }
/* hero2.jpg は 1000x1000 の正方形。元ページと同じく切り抜かずそのまま出す */
.fc-hero-img { border-radius: 8px; overflow: hidden; }
.fc-hero-img img { width: 100%; display: block; }

/* ---------- セクション (白 / 薄緑 / 薄青 の3トーンで交互に) ----------
   白カードが必ず色付きの面の上に乗るように配分している。
   .biz-section と同じく <section> 自体を帯にする(角丸なし、上下ボーダーのみ)。 */
.fc-sec-w { padding: 2.5rem 0; }
.fc-sec-g, .fc-sec-b {
	padding: 2.5rem 0;
}
.fc-sec-g {
	background: var(--main-color-light);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}
.fc-sec-b {
	background: var(--extra-color-light);
	border-top: 1px solid var(--extra-color);
	border-bottom: 1px solid var(--extra-color);
}
/* 見出し: 中央寄せ + 中央下線バー (front-page の型に合わせる) */
.fc-h {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--text-color);
	text-align: center;
	margin: 0 0 1.75rem;
	padding-bottom: .75rem;
	position: relative;
	border-bottom: none;
}
.fc-h::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 72px;
	height: 4px;
	border-radius: 2px;
	background: var(--grad-button);
}
.fc-lead {
	text-align: center;
	font-size: .9375rem;
	color: var(--border-color-dark);
	margin: -1rem 0 2rem;
}

/* ---------- 汎用カード ---------- */
.fc-card {
	background: var(--white-color-light);
	border: 1.5px solid var(--border-color);
	border-radius: 14px;
	padding: 1.375rem 1.25rem;
	height: 100%;
	box-shadow: 0 2px 10px rgba(13,35,24,.07);
}
.fc-card-t {
	font-size: 1rem;
	font-weight: 800;
	color: var(--fc-teal);
	line-height: 1.5;
	margin-bottom: .625rem;
}
.fc-card p {
	font-size: .875rem;
	line-height: 1.8;
	color: var(--text-color);
	margin-bottom: 0;
}

/* ---------- お悩みカード (チェックアイコン + 右下イラスト) ---------- */
.fc-prob .fc-card-t {
	padding-left: 1.75rem;
	position: relative;
	min-height: 3em;
}
.fc-prob .fc-card-t::before {
	content: '';
	position: absolute;
	left: 0;
	top: .25rem;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fc-teal-solid) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center / 14px no-repeat;
}
.fc-prob-body {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: .625rem;
}
.fc-prob-body p { flex: 1; }
.fc-prob-body img { width: 70px; flex-shrink: 0; }
.fc-prob-sum {
	text-align: center;
	margin-top: 2rem;
	font-size: 1.0625rem;
	line-height: 1.9;
	color: var(--text-color);
}
.fc-prob-sum .fc-em { color: var(--accent-color-dark); font-weight: 700; }

/* ---------- メリット (大きな連番) ---------- */
.fc-merit-t {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-size: 1rem;
	font-weight: 800;
	color: var(--fc-teal);
	line-height: 1.5;
	margin-bottom: .875rem;
}
.fc-num {
	font-size: 2.5rem;
	font-weight: 900;
	font-style: italic;
	color: var(--accent-color-dark);
	line-height: 1;
	flex-shrink: 0;
}
.fc-merit-img {
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: .875rem;
}
.fc-merit-img img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	display: block;
}
.fc-merit p {
	font-size: .875rem;
	line-height: 1.8;
	color: var(--text-color);
}
.fc-merit .fc-em { color: var(--accent-color-dark); font-weight: 700; }

/* ---------- 掲載フロー ---------- */
.fc-step {
	background: var(--white-color-light);
	border: 1.5px solid var(--border-color);
	border-radius: 14px;
	padding: 1.25rem .875rem;
	text-align: center;
	height: 100%;
	position: relative;
	box-shadow: 0 2px 10px rgba(13,35,24,.07);
}
.fc-step-head {
	border-bottom: 1px solid var(--border-color);
	padding-bottom: .75rem;
	margin-bottom: .875rem;
}
.fc-step-no {
	font-size: .75rem;
	font-weight: 700;
	color: var(--fc-teal);
	letter-spacing: .1em;
	margin-bottom: .25rem;
}
.fc-step-t {
	font-size: .9375rem;
	font-weight: 800;
	color: var(--fc-teal);
	line-height: 1.4;
}
.fc-step-t small {
	display: block;
	font-size: .75rem;
	margin-top: .125rem;
}
.fc-step-icon { margin-bottom: .75rem; }
.fc-step-icon img { max-width: 60px; max-height: 50px; }
.fc-step p {
	font-size: .8125rem;
	line-height: 1.7;
	text-align: left;
	color: var(--text-color);
	margin-bottom: 0;
}
.fc-step-arrow {
	position: absolute;
	right: -1.375rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--fc-teal);
	font-size: 1.25rem;
	z-index: 2;
	pointer-events: none;
}

/* ---------- FAQ ---------- */
.fc-faq {
	background: var(--white-color-light);
	border: 1.5px solid var(--border-color);
	border-radius: 14px;
	padding: 1rem 1.125rem;
	height: 100%;
	box-shadow: 0 2px 10px rgba(13,35,24,.07);
}
.fc-faq-q, .fc-faq-a {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	font-size: .875rem;
	line-height: 1.8;
}
.fc-faq-q {
	font-weight: 700;
	color: var(--fc-teal);
	margin-bottom: .5rem;
}
.fc-faq-a { color: var(--text-color); margin-bottom: 0; }
.fc-faq-q::before, .fc-faq-a::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--white-color-light);
	font-size: .75rem;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: .125rem;
}
.fc-faq-q::before { content: 'Q'; background: var(--fc-teal-solid); }
.fc-faq-a::before { content: 'A'; background: var(--accent-color-dark); }

/* ---------- 無料相談 ---------- */
.fc-consult {
	background: var(--white-color-light);
	border: 1.5px solid var(--border-color);
	border-radius: 14px;
	padding: 1.125rem 1.25rem;
	display: flex;
	align-items: flex-start;
	gap: .875rem;
	height: 100%;
	box-shadow: 0 2px 10px rgba(13,35,24,.07);
}
.fc-consult img { width: 100px; flex-shrink: 0; }
.fc-consult-body { flex: 1; }
.fc-consult-t {
	font-size: .9375rem;
	font-weight: 800;
	color: var(--fc-teal);
	line-height: 1.5;
	margin-bottom: .5rem;
}
.fc-consult p {
	font-size: .8125rem;
	line-height: 1.7;
	color: var(--text-color);
	margin-bottom: 0;
}
.fc-free { color: var(--accent-color-dark); font-size: 1.25em; }

/* ---------- CTA ボタン ---------- */
.fc-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .875rem;
	max-width: 620px;
	margin: 2rem auto 0;
	padding: 1.125rem 1.5rem;
	background: var(--grad-button);
	color: var(--white-color-light);
	border-radius: 10px;
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.4;
	box-shadow: 0 4px 12px rgba(45,170,114,.28);
	transition: opacity .2s, transform .15s;
}
.fc-cta:hover {
	color: var(--white-color-light);
	opacity: .9;
	transform: translateY(-2px);
}
.fc-cta-txt { flex-grow: 1; }

/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 63.9375em) {
	.fc-step-arrow { display: none; }
}
@media screen and (max-width: 39.9375em) {
	.fc-hero { padding: 1.5rem 0; }
	.fc-catch { font-size: 1.375rem; }
	.fc-hero-img { margin-top: 1.25rem; }
	.fc-h { font-size: 1.1875rem; }
	.fc-lead { text-align: left; }
	.fc-prob-sum { text-align: left; }
	.fc-sec-w, .fc-sec-g, .fc-sec-b { padding: 1.75rem 0; }
	.fc-cta { font-size: .875rem; padding: .875rem 1.125rem; }
}


/* =========================================================
   [2026-07-30] 固定ページ「よくある質問」(/faq/) 専用スタイル

   章立てを Foundation の Tabs、個別のQ&Aを Accordion で組んでいる。
   Foundation 6.4.3 と jQuery は既にテーマで読み込み済みで、
   jQuery(document).foundation(); も実行済みのため、
   このスタイルとマークアップのみで動作する。追加の読み込みは不要。

   マークアップ側の必須属性（Foundation の仕様）：
     タブ         : ul.tabs[data-tabs][id] と
                    div.tabs-content[data-tabs-content="同じid"] を対応させる
     アコーディオン: ul.accordion[data-accordion] >
                    li.accordion-item[data-accordion-item] >
                    a.accordion-title + div.accordion-content[data-tab-content]
     ※ a.accordion-title は accordion-item の直下に置く。
       Foundation はクリックを $item.children('a') に結ぶため、
       <h3> 等で囲むと開閉しなくなる。

   色はすべて style-root.css の変数を参照しているので、
   テーマの配色を変えればこのページも自動で追従する。
   Q/Aバッジの配色は「企業の皆さまへ」の .fc-faq-q / .fc-faq-a と揃えている。
   ========================================================= */

.faq-block { margin-bottom: 4rem; }
.faq-block .faq-lead {
	font-size: .9375rem;
	color: var(--text-color);
	margin-bottom: 1.5rem;
}

/* ---------- 章立て（縦タブ） ---------- */
/* 「学生・既卒者の方」「企業・事業者の皆さま」の2グループそれぞれを角丸のカードとして扱う。
   .faq-tabs 側に border-radius + overflow:hidden を掛ける方式では
   リストの先頭と末尾しか丸まらず、中間にある企業向け見出しが角丸にならないため、
   見出し(上側)と各グループ最後のタブ(下側)に個別に角丸を持たせている。
   グループの最後のタブには markup 側で .faq-group-end を付ける。 */
.faq-tabs {
	border: none;
	background: transparent;
}
.faq-tabs .tabs-title { border-bottom: 1px solid var(--border-color); }
.faq-tabs .tabs-title.faq-group-end { border-bottom: none; }
.faq-tabs .tabs-title.faq-group-end > a { border-radius: 0 0 12px 12px; }
.faq-tabs .tabs-title > a {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .875rem 1rem;
	background: var(--white-color-light);
	color: var(--text-color);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.5;
	transition: background-color .15s ease, color .15s ease;
}
/* キーボード操作用の focus 表示は残す（hover は使わない）。 */
.faq-tabs .tabs-title > a:focus-visible {
	outline: 2px solid var(--main-color-dark);
	outline-offset: -2px;
}
/* active は淡色地＋濃い文字のみで示す。
   背景は章色の14%ティント。--accent-color-light(#FEF9F0)が
   --main-color-light(#E8F8F1)よりかなり薄く、学生/企業で体感の濃さが揃わないため、
   両方とも同じ比率のティントで指定している。 */
.faq-tabs .tabs-title.is-active > a {
	background: rgba(46,170,114,.14);
	color: var(--text-color);
	font-weight: 700;
}
/* 番号は常に濃色地＋白文字（active/非activeで変えない）。 */
.faq-tab-num {
	flex: 0 0 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--main-color-dark);
	color: var(--white-color-light);
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: .8125rem;
	font-weight: 700;
}

/* タブ内の区切りラベル（学生向け／企業向け）。
   Tabs プラグインは .tabs-title のみを対象にするため、この li は JS 側で無視される。 */
.faq-tabs .faq-tabs-label {
	padding: .625rem 1rem;
	border-radius: 12px 12px 0 0;
	background: var(--main-color-dark);
	color: var(--white-color-light);
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
}
.faq-tabs .faq-tabs-label:not(:first-child) { margin-top: .75rem; }

/* ---------- タブパネル ---------- */
/* Foundation の .tabs-content / .tabs-content.vertical が付ける枠線と背景を消す。
   .tabs-content.vertical は詳細度 (0,2,0) なので、こちらも2クラスで受ける。 */
.tabs-content.faq-tabs-content,
.tabs-content.vertical.faq-tabs-content {
	border: 0;
	background: transparent;
}
.faq-tabs-content .tabs-panel { padding: 0; }
.faq-panel-head {
	display: flex;
	align-items: center;
	gap: .6875rem;
	margin: 0 0 1.25rem;
	padding-bottom: .875rem;
	border-bottom: 2px solid var(--main-color);
}
.faq-panel-num {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--main-color-dark);
}
.faq-panel-head h2 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--text-color);
}
/* 企業向けの章(9〜11)の配色は、このファイル下部の
   「企業向けの章(9〜11)」ブロックにまとめている。
   .faq-biz は該当する li.tabs-title と div.tabs-panel に付ける。 */

/* ---------- 個別のQ&A（アコーディオン） ---------- */
.faq-accordion {
	margin: 0;
	border: none;
	background: transparent;
	list-style: none;
}
.faq-accordion .accordion-item {
	position: relative;
	margin-bottom: .6875rem;
	border-radius: 10px;
	overflow: hidden;
	background: var(--white-color-light);
	box-shadow: 0 1px 3px rgba(13,35,24,.06);
}
/* Qバッジと質問文を flex の兄弟要素として並べ、align-items:center で揃える。
   絶対配置だとバッジと文字が別レイヤーになり、行数が変わったときに縦位置が合わない。
   左padding(1rem) + バッジ(1.625rem) + gap(.75rem) = 3.375rem となり、
   回答側 .accordion-content の padding-left と一致する（Q と A の文字が縦に揃う）。 */
.faq-accordion .accordion-title {
	position: relative;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 3.25rem 1rem 1rem;
	border: none;
	background: var(--white-color-light);
	color: var(--text-color);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.7;
}
.faq-accordion .accordion-title:hover,
.faq-accordion .accordion-title:focus { background: var(--main-color-light); }
.faq-accordion .accordion-title:focus-visible {
	outline: 2px solid var(--main-color-dark);
	outline-offset: -2px;
}
.faq-accordion .accordion-item.is-active > .accordion-title {
	background: var(--main-color-light);
	font-weight: 700;
}
/* Qバッジ。flex の1つ目のitemとして配置する。
   Foundation は .accordion-title::before を position:absolute の +/- インジケータ
   として定義しているため、position/right/top/margin-top を明示的に打ち消す。 */
.faq-accordion .accordion-title::before {
	content: 'Q';
	position: static;
	right: auto;
	top: auto;
	margin-top: 0;
	flex: 0 0 1.625rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 50%;
	background: var(--main-color-dark);
	color: var(--white-color-light);
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1;
}
/* 開閉アイコン（Foundation 既定の +/- は使わず山形にする） */
.faq-accordion .accordion-title::after {
	content: '';
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: .6875rem;
	height: .6875rem;
	margin-top: -.34375rem;
	border-right: 2px solid var(--main-color-dark);
	border-bottom: 2px solid var(--main-color-dark);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .2s ease;
}
.faq-accordion .accordion-item.is-active > .accordion-title::after {
	transform: rotate(-135deg);
}

/* 回答は白地。章の色分けは A バッジ・注意書きの左ライン・箇条書きの点で示す。 */
.faq-accordion .accordion-content {
	padding: 1.125rem 1.5rem 1.375rem 3.375rem;
	border: none;
	border-top: 1px solid var(--border-color);
	background: var(--white-color-light);
	font-size: .9375rem;
}
/* Aバッジ。回答は複数段落になるため、1行目に揃える。
   Q が「章色の地＋白文字」なのに対し、A は反転させて「淡い章色の地＋章色の文字」。 */
.faq-accordion .accordion-content::before {
	content: 'A';
	position: absolute;
	left: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 50%;
	background: var(--main-color-light);
	color: var(--main-color-dark);
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1;
}
.faq-accordion .accordion-content > *:first-child { margin-top: 0; }
.faq-accordion .accordion-content > *:last-child { margin-bottom: 0; }
.faq-accordion .accordion-content p { margin-bottom: .875rem; }
.faq-accordion .accordion-content ul,
.faq-accordion .accordion-content ol { margin: 0 0 1rem 1.25rem; }
.faq-accordion .accordion-content li { margin-bottom: .375rem; }
/* 箇条書きの区切り線。style-nwmaster.css が li に border-top を掛けており、
   各項目の「上」に線が出ていた。項目の「下」に出るよう付け替える。 */
.faq-accordion .accordion-content ul > li,
.faq-accordion .accordion-content ol > li {
	border-top: none;
	border-bottom: 1px solid var(--border-color);
}

/* 注意書き。回答内で目立たせるボックス。
   背景は薄いグレーに固定する。章の色(緑/橙)にすると質問バーの
   hover / is-active 背景と同じ色になり、押せる要素と紛らわしいため。
   章の色分けは左のラインで示す。 */
.faq-accordion .accordion-content .faq-note {
	margin: 1rem 0 0;
	padding: .8125rem 1rem;
	border-left: 3px solid var(--main-color-dark);
	border-radius: 0 6px 6px 0;
	background: var(--grey-color-light);
	font-size: .875rem;
}
/* 矢印フロー（応募から参加までの流れ 等）。
   .faq-note と同様、質問バーと紛らわしくならないよう背景は薄いグレーに固定する。 */
.faq-accordion .accordion-content .faq-flow {
	margin: 0 0 1rem;
	padding: .875rem 1rem;
	border-radius: 6px;
	background: var(--grey-color-light);
	color: var(--text-color);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 2;
}
/* 表（狭い画面では横スクロールさせ、ページ自体は横に伸ばさない） */
.faq-accordion .accordion-content .table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.faq-accordion .accordion-content table {
	margin-bottom: 1rem;
	background: var(--white-color-light);
	font-size: .875rem;
}
.faq-accordion .accordion-content th,
.faq-accordion .accordion-content td {
	padding: .5rem .6875rem;
	line-height: 1.7;
}
/* thead はテーマ既定(--thead-bg-color / --thead-text-color)に任せ、
   サイト内の他の表と見た目を揃える。 */

/* ---------- 企業向けの章(9〜11) ----------
   学生・既卒者向け(1〜8)は緑(--main-color-*)、
   企業・事業者向け(9〜11)は橙(--accent-color-*)で色の系統を分け、
   読者が切り替わったことが一目で分かるようにする。
   Aバッジとフローは両方の章で teal(--sub-color-*) に固定しているため、
   章の色(緑/橙)とぶつからない。 */
.faq-tabs .tabs-title.faq-biz > a .faq-tab-num {
	background: var(--accent-color-dark);
	color: var(--white-color-light);
}
.faq-tabs .tabs-title.faq-biz.is-active > a { background: rgba(212,130,10,.14); }
.faq-tabs .tabs-title.faq-biz > a:focus-visible { outline-color: var(--accent-color-dark); }
.faq-tabs .faq-tabs-label.faq-biz { background: var(--accent-color-dark); }

.faq-biz .faq-panel-head { border-bottom-color: var(--accent-color); }
.faq-biz .faq-panel-num { color: var(--accent-color-dark); }

.faq-biz .faq-accordion .accordion-title::before { background: var(--accent-color-dark); }
.faq-biz .faq-accordion .accordion-title:hover,
.faq-biz .faq-accordion .accordion-title:focus { background: var(--accent-color-light); }
.faq-biz .faq-accordion .accordion-item.is-active > .accordion-title { background: var(--accent-color-light); }
.faq-biz .faq-accordion .accordion-title:focus-visible { outline-color: var(--accent-color-dark); }
.faq-biz .faq-accordion .accordion-title::after {
	border-right-color: var(--accent-color-dark);
	border-bottom-color: var(--accent-color-dark);
}
/* 回答部分（白地は共通）。区切り線・Aバッジ・箇条書きの点を橙系にする。
   囲みボックスの背景は学生向けと同じ薄いグレーのままにし（質問バーとの
   混同を避けるため）、章の色は左のラインと箇条書きの点で示す。 */
.faq-biz .faq-accordion .accordion-content { border-top-color: var(--accent-color); }
.faq-biz .faq-accordion .accordion-content::before {
	background: var(--accent-color-light);
	color: var(--accent-color-dark);
}
.faq-biz .faq-accordion .accordion-content .faq-note {
	border-left-color: var(--accent-color-dark);
}
/* 箇条書きの点・番号（マーカー）。企業・事業者向けの章は橙にする。
   既定では style-nwmaster.css により teal(--sub-color-dark) になっている。 */
.faq-biz .faq-accordion .accordion-content ul > li::marker,
.faq-biz .faq-accordion .accordion-content ol > li::marker {
	color: var(--accent-color-dark);
}

/* ---------- レスポンシブ ---------- */
/* スマートフォンでは11章を縦積みにすると長くなるため、タブを2列のボタンに切り替える。 */
@media screen and (max-width: 39.9375em) {
	.faq-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: .375rem;
	}
	.faq-tabs .tabs-title,
	.faq-tabs .tabs-title.faq-group-end { border-bottom: none; }
	/* 小画面は1つずつ独立したカードなので、グループ末尾の角丸指定は打ち消す。 */
	.faq-tabs .tabs-title > a,
	.faq-tabs .tabs-title.faq-group-end > a {
		height: 100%;
		padding: .6875rem .625rem;
		border-radius: 8px;
		font-size: .8125rem;
		box-shadow: 0 1px 3px rgba(13,35,24,.06);
	}
	/* active もカードの影は他と同じ。区別は背景ティントと太字のみ。 */
	/* 見出しは小画面でも濃色地＋白文字。角丸だけ付ける
	   (.faq-tabs 側の overflow:hidden が効かないため)。 */
	.faq-tabs .faq-tabs-label {
		grid-column: 1 / -1;
		padding: .5rem .75rem;
		border-radius: 6px;
	}
	.faq-tabs .faq-tabs-label:not(:first-child) { margin-top: .375rem; }
	.faq-tabs-content { margin-top: 1.5rem; }
	/* 左側(padding-left + バッジ + gap)は desktop と同じ 3.375rem のままにして、
	   Q と A の文字の左端が揃った状態を保つ。詰めるのは右側と文字サイズのみ。 */
	.faq-accordion .accordion-title { padding: .875rem 2.625rem .875rem 1rem; font-size: .9375rem; }
	.faq-accordion .accordion-content { padding: 1rem 1.0625rem 1.125rem 3.375rem; }
}

/* =========================================================
   [2026-08-06] 固定ページ「サイトマップ」(/sitemap/) 専用スタイル

   テンプレートは page-sitemap.php（テンプレート階層で slug から自動適用）。
   人間向けの案内ページで、個別のインターンシップ情報・企業情報は載せない方針。

   色はすべて style-root.css の変数を参照しているので、
   テーマの配色を変えればこのページも自動で追従する。
   アイコンは Font Awesome の kit が <i> を <svg> に置き換えるため、
   色・サイズの指定は必ず `i, svg` の両方に書くこと（design.md §8）。
   ========================================================= */

.sitemap-page { padding: 2.5rem 0 4rem; }

.sitemap-lead {
	font-size: .9375rem;
	line-height: 1.9;
	color: var(--text-color);
	margin-bottom: 2.5rem;
}

/* グループは2カラム。カード同士の高さは揃えず、内容の分だけ積む(masonry風) */
.sitemap-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: start;
}
/* 「トップページ」と、項目の多いグループは横幅いっぱいに使う */
.sitemap-group-home { grid-column: 1 / -1; }

.sitemap-group {
	background: var(--white-color-light);
	border: 1.5px solid var(--border-color);
	border-radius: 1rem;
	padding: 1.5rem 1.5rem 1.25rem;
}
.sitemap-group > h2 {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--main-color-dark);
	margin: 0 0 1rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--main-color-light);
}
.sitemap-group > h2 i,
.sitemap-group > h2 svg {
	color: var(--main-color);
	font-size: 1rem;
	width: 1.125rem;
}
.sitemap-group-lead {
	font-size: .8125rem;
	line-height: 1.8;
	color: var(--border-color-dark);
	background: var(--main-color-light);
	border-radius: .5rem;
	padding: .75rem .875rem;
	margin: 0 0 1rem;
}

.sitemap-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* [2026-08-06 バグ修正] 外部CSS(nwmaster)が箇条書き用に li へ
   `text-indent: -.9em; padding-left: .9em` のぶら下げインデントを掛けており、
   それを子孫が継承して**各ブロックの1行目だけ左に約13.5px食い込んで**いた。
   結果、リンクのhover時に左の余白が無いように見え、説明文も2行目だけ字下げされていた。
   このページのリストはマーカーを使わないので、リセットする。 */
.sitemap-list,
.sitemap-list > li,
.sitemap-item,
.sitemap-item-label,
.sitemap-item-desc {
	text-indent: 0;
}
.sitemap-list > li { padding-left: 0; }
.sitemap-list > li + li { margin-top: .5rem; }

/* 1項目 = リンク名 + 説明文。ブロック全体をクリックできるようにする */
.sitemap-item {
	display: block;
	padding: .75rem .875rem;
	border-radius: .625rem;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color .15s, border-color .15s, transform .12s;
}
.sitemap-item:hover {
	background: var(--grad-subtle);
	border-color: var(--sub-color-dark);
	transform: translateX(2px);
	text-decoration: none;
}
.sitemap-item-label {
	display: block;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--sub-color-dark);
	line-height: 1.5;
}
.sitemap-item:hover .sitemap-item-label { color: var(--main-color-dark); }
/* 外部リンクの矢印アイコン */
.sitemap-item-label i,
.sitemap-item-label svg {
	color: var(--border-color-dark);
	font-size: .6875rem;
	margin-left: .25rem;
	vertical-align: baseline;
}
.sitemap-item-desc {
	display: block;
	font-size: .8125rem;
	line-height: 1.8;
	color: var(--text-color);
	margin-top: .25rem;
}

/* お知らせのカテゴリー等、項目の下にぶら下げる小さいリンク列 */
.sitemap-sublist {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0 0 0 .875rem;
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
}
.sitemap-sublist > li { padding-left: 0; text-indent: 0; }
.sitemap-sublist a {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .25rem .625rem;
	border: 1px solid var(--border-color);
	border-radius: 999px;
	background: var(--white-color-light);
	font-size: .75rem;
	color: var(--text-color);
	text-decoration: none;
	transition: border-color .15s, background-color .15s;
}
.sitemap-sublist a:hover {
	border-color: var(--sub-color-dark);
	background: var(--main-color-light);
	text-decoration: none;
}
.sitemap-sublist a i,
.sitemap-sublist a svg {
	color: var(--icon-meta);
	font-size: .6875rem;
}
/* スマホは1カラム。カードの余白も少し詰める */
@media (max-width: 734px) {
	.sitemap-page { padding: 1.75rem 0 3rem; }
	.sitemap-groups { grid-template-columns: 1fr; gap: 1rem; }
	.sitemap-group { padding: 1.25rem 1.125rem 1rem; }
	.sitemap-lead { margin-bottom: 1.75rem; }
}

/* [2026-08-06] フッターのコピーライト表記。他のクレジット行より一段小さく、控えめに置く */
.footer-credit .footer-copyright {
	margin-top: .75rem;
	opacity: .8;
}
.footer-credit .footer-copyright small { font-size: .75rem; }



/* --------------------------------------------------------------------------
   個人情報の取り扱いについて  /privacy/
   -------------------------------------------------------------------------- */
/* テーマ由来のリスト装飾を無効化 */
#page-privacy ul,
#page-privacy ol { list-style: none; }
#page-privacy ul > li,
#page-privacy ol > li { background-image: none; }
#page-privacy ul > li::before,
#page-privacy ol > li::before { content: none; }

#page-privacy {
	--navy: #003F8E;
	--navy-dark: #002C66;
	--orange: #F08300;
	--orange-dark: #D67400;
	--ink: #222;
	--line: #e2e6ec;
	--bg-soft: #f5f7fa;
  }
#page-privacy * { box-sizing: border-box; }
#page-privacy { scroll-behavior: smooth; }
#page-privacy {
	margin: 0;
	color: var(--ink);
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
	line-height: 1.9;
	font-size: 16px;
	background: #fff;
	-webkit-font-smoothing: antialiased;
  }
#page-privacy a { color: var(--navy); }
#page-privacy .article a[href^="http"] { word-break: break-all; }
#page-privacy .wrap {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 20px;
  }
#page-privacy .page-head {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
	color: #fff;
	padding: 40px 0 44px;
  }
#page-privacy .page-head .eyebrow {
	display: inline-block;
	background: var(--orange);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
  }
#page-privacy .page-head h1 {
	margin: 0;
	font-size: 27px;
	font-weight: 900;
	line-height: 1.5;
  }
#page-privacy main { padding: 40px 0 20px; }
#page-privacy .lead {
	margin-bottom: 34px;
	font-size: 15px;
  }
#page-privacy .doc-title {
	text-align: center;
	font-size: 19px;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 28px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--line);
  }
#page-privacy .article { margin-bottom: 30px; }
#page-privacy .article h2 {
	font-size: 17px;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 10px;
	padding-left: 12px;
	border-left: 4px solid var(--orange);
	line-height: 1.5;
  }
#page-privacy .article p { margin: 0 0 10px; }
#page-privacy ol.terms, #page-privacy ul.terms {
	margin: 0 0 10px;
	padding-left: 1.6em;
  }
#page-privacy ol.terms > li { margin-bottom: 8px; }
#page-privacy ul.terms { list-style: none; padding-left: 0; }
#page-privacy ul.terms > li {
	position: relative;
	padding-left: 1.2em;
	margin-bottom: 6px;
  }
#page-privacy ul.terms > li::before {
	content: "・";
	position: absolute;
	left: 0;
	color: var(--orange);
	font-weight: 700;
  }
#page-privacy .target-head { font-weight: 700; margin: 6px 0 4px; }
#page-privacy .revision {
	margin-top: 40px;
	padding-top: 18px;
	border-top: 2px solid var(--line);
	font-size: 15px;
	color: #555;
  }
#page-privacy .back-link {
	display: inline-block;
	margin: 30px 0 6px;
	padding: 12px 26px;
	border: 2px solid var(--navy);
	border-radius: 999px;
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
	transition: .2s;
  }
#page-privacy .back-link:hover { background: var(--navy); color: #fff; }
@media (max-width: 600px) {
  #page-privacy { font-size: 16px; }
  #page-privacy .page-head { padding: 30px 0 34px; }
  #page-privacy .page-head h1 { font-size: 21px; }
  #page-privacy main { padding: 28px 0 10px; }
  #page-privacy .article h2 { font-size: 16px; }
}


/* --------------------------------------------------------------------------
   登録のお願い  /register/
   -------------------------------------------------------------------------- */
/* テーマ由来のリスト装飾を無効化 */
#page-register ul,
#page-register ol { list-style: none; }
#page-register ul > li,
#page-register ol > li { background-image: none; }
#page-register ul > li::before,
#page-register ol > li::before { content: none; }

#page-register {
	--navy: #003F8E;
	--navy-dark: #002C66;
	--orange: #F08300;
	--orange-dark: #D67400;
	--ink: #2A2E35;
	--ink-soft: #4A5059;
	--line: #DCE3EC;
	--bg: #F4F7FB;
	--bg-card: #FFFFFF;
	--bg-tint: #EAF1FA;
  }
#page-register * { box-sizing: border-box; margin: 0; padding: 0; }
#page-register { scroll-behavior: smooth; }
#page-register {
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.9;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
  }
#page-register .wrap {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 20px;
  }
#page-register .hero {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
	color: #fff;
	padding: 56px 0 60px;
	text-align: center;
  }
#page-register .hero .eyebrow {
	display: inline-block;
	background: var(--orange);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 6px 18px;
	border-radius: 100px;
	margin-bottom: 22px;
	letter-spacing: 0.04em;
  }
#page-register .hero h1 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.01em;
  }
#page-register .hero h1 .accent { color: #FFD9A6; }
#page-register main { padding: 48px 0 64px; }
#page-register .lead {
	background: var(--bg-card);
	border-radius: 14px;
	padding: 32px 34px;
	box-shadow: 0 2px 16px rgba(0,63,142,0.06);
	margin-bottom: 40px;
	font-size: 17px;
	color: var(--ink-soft);
  }
#page-register .lead p + p { margin-top: 16px; }
#page-register .lead strong { color: var(--navy); font-weight: 700; }
#page-register .section {
	background: var(--bg-card);
	border-radius: 14px;
	padding: 36px 34px;
	box-shadow: 0 2px 16px rgba(0,63,142,0.06);
	margin-bottom: 28px;
  }
#page-register .section-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
  }
#page-register .section-num {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--bg-tint);
	color: var(--navy);
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
  }
#page-register .section h2 {
	font-size: 23px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.4;
  }
#page-register .section p { color: var(--ink-soft); }
#page-register .section p + p { margin-top: 14px; }
#page-register .note {
	margin-top: 18px;
	background: #FFF6EC;
	border-left: 4px solid var(--orange);
	border-radius: 0 8px 8px 0;
	padding: 14px 18px;
	font-size: 16px;
	color: var(--ink-soft);
  }
#page-register .cta {
	display: block;
	text-align: center;
	background: var(--orange);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	text-decoration: none;
	padding: 20px 24px;
	border-radius: 12px;
	margin-top: 24px;
	box-shadow: 0 4px 14px rgba(240,131,0,0.3);
	transition: background 0.2s, transform 0.1s;
	letter-spacing: 0.02em;
  }
#page-register .cta:hover { background: var(--orange-dark); }
#page-register .cta:active { transform: translateY(1px); }
#page-register .cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
#page-register .cta .arrow { margin-left: 8px; }
#page-register .examples {
	margin-top: 24px;
	background: var(--bg-tint);
	border-radius: 12px;
	padding: 22px 24px;
  }
#page-register .examples p.examples-title {
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 14px;
	font-size: 17px;
  }
#page-register .example-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
  }
#page-register .example-links a {
	flex: 1 1 200px;
	text-align: center;
	background: #fff;
	border: 2px solid var(--navy);
	color: var(--navy);
	text-decoration: none;
	font-weight: 700;
	padding: 14px 16px;
	border-radius: 10px;
	transition: background 0.2s, color 0.2s;
  }
#page-register .example-links a:hover { background: var(--navy); color: #fff; }
#page-register .example-links a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
#page-register .cat-intro { margin-bottom: 24px; }
#page-register .cat-intro > p { color: var(--ink-soft); margin-bottom: 14px; }
#page-register .cat-box {
	background: var(--bg-tint);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 18px 20px;
  }
#page-register .cat-list {
	list-style: none;
	display: grid;
	gap: 12px;
  }
#page-register .cat-list li {
	padding-bottom: 12px;
	border-bottom: 1px dashed #C3D2E6;
  }
#page-register .cat-list li:last-child {
	padding-bottom: 0;
	border-bottom: none;
  }
#page-register .cat-list .cat-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 2px;
  }
#page-register .cat-list .cat-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.65; }
#page-register .form-branch {
	margin-top: 26px;
	display: grid;
	gap: 18px;
  }
#page-register .form-card {
	border: 2px solid var(--navy);
	border-radius: 12px;
	padding: 22px 22px 24px;
	background: var(--bg-tint);
  }
#page-register .form-card .form-target {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 6px;
  }
#page-register .form-card .form-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.55;
	margin-bottom: 4px;
  }
#page-register .form-card .cta { margin-top: 16px; }
#page-register .form-card .example-link {
	display: inline-block;
	margin-top: 14px;
	color: var(--navy);
	font-weight: 700;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
  }
#page-register .form-card .example-link:hover { color: var(--orange-dark); }
#page-register .form-card .example-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
#page-register .branch-help {
	margin-top: 18px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-soft);
	line-height: 1.8;
  }
#page-register .flow-list {
	list-style: none;
	counter-reset: flow;
	margin-top: 8px;
  }
#page-register .flow-list li {
	position: relative;
	counter-increment: flow;
	padding: 0 0 24px 52px;
	color: var(--ink-soft);
  }
#page-register .flow-list li::before {
	content: counter(flow);
	position: absolute;
	left: 0;
	top: 0;
	width: 34px;
	height: 34px;
	background: var(--navy);
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
  }
#page-register .flow-list li::after {
	content: "";
	position: absolute;
	left: 16px;
	top: 38px;
	bottom: 4px;
	width: 2px;
	background: var(--line);
  }
#page-register .flow-list li:last-child { padding-bottom: 0; }
#page-register .flow-list li:last-child::after { display: none; }
#page-register .contact {
	background: var(--bg-card);
	color: var(--ink);
	border-radius: 14px;
	padding: 36px 34px;
	margin-top: 40px;
	box-shadow: 0 2px 16px rgba(0,63,142,0.06);
	border: 2px solid var(--navy);
  }
#page-register .contact h2 {
	font-size: 21px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--line);
  }
#page-register .contact-block { margin-bottom: 24px; }
#page-register .contact-block:last-child { margin-bottom: 0; }
#page-register .contact-org-head {
	font-size: 18px;
	font-weight: 700;
	color: var(--navy);
	background: var(--bg-tint);
	border-radius: 8px;
	padding: 12px 18px;
	margin-bottom: 22px;
  }
#page-register .contact-block .role {
	display: inline-block;
	background: var(--orange);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 6px;
	margin-bottom: 10px;
  }
#page-register .contact-block .org { font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--ink); }
#page-register .contact-block .mail { margin-top: 4px; color: var(--ink-soft); }
#page-register .contact-block .mail a { color: var(--navy); text-decoration: none; word-break: break-all; font-weight: 700; }
#page-register .contact-block .mail a:hover { text-decoration: underline; }
#page-register .contact-block .desc { font-size: 15px; color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 600px) {
  #page-register { font-size: 16px; }
  #page-register .hero { padding: 40px 0 44px; }
  #page-register .hero h1 { font-size: 23px; }
  #page-register .lead, #page-register .section, #page-register .contact { padding: 26px 22px; }
  #page-register .section h2 { font-size: 20px; }
  #page-register .section-num { width: 40px; height: 40px; font-size: 18px; }
  #page-register .cta { font-size: 17px; }
}


/* --------------------------------------------------------------------------
   セミナー告知  /seminar/
   -------------------------------------------------------------------------- */
/* テーマ由来のリスト装飾を無効化 */
#page-seminar ul,
#page-seminar ol { list-style: none; }
#page-seminar ul > li,
#page-seminar ol > li { background-image: none; }
#page-seminar ul > li::before,
#page-seminar ol > li::before { content: none; }

#page-seminar {
	--navy:#003F8E;
	--navy-dark:#002a60;
	--blue-mid:#2B6AB9;
	/* [2026-08-18] もとは --orange という名前だったが、ページごとに差し替える前提になったので
	   役割ベースの --accent に改名した（第1回 /seminar/ の値はオレンジのまま） */
	--accent:#F08300;
	--accent-dark:#d97400;
	--bg:#f4f7fb;
	--ink:#1a2433;
	--ink-soft:#48566b;
	--line:#dbe4ef;
	--white:#ffffff;
	/* [2026-08-18] 面の色をトークン化。ページごとにキービジュアルへ寄せられるようにするため
	   （値は従来のベタ書きと同じなので、既存の /seminar/ の見た目は変わらない） */
	--panel:#eef4fb;       /* 開催概要・アクセス情報のパネル */
	--panel-2:#eef3f9;     /* おすすめリスト・タイムラインの見出し */
	--panel-soft:#f1f6fc;  /* カードのグラデーションの淡い側 */
	--lbl-on-navy:#cfe0f3; /* 濃紺バッジの上のラベル文字 */
  }
#page-seminar * {box-sizing:border-box;margin:0;padding:0;}
#page-seminar {
	font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
	color:var(--ink);
	
	background:linear-gradient(180deg,#9cc2e8 0%,#a9cbec 22%,#bcd7f0 45%,#cfe2f4 70%,#dceaf7 100%);
	background-attachment:fixed;
	line-height:1.8;
	font-size:16px;
	-webkit-font-smoothing:antialiased;
  }
/* [2026-08-18] 最下部に細長い白帯が残る問題の修正。
   .wrap の margin-bottom:48px が #page-seminar の外側にすり抜けて(マージンの相殺)、
   グラデーション背景の下・フッターの上に48pxの素の背景色が見えていた。
   flow-root でブロック整形コンテキストを作り、子のマージンを内側に閉じ込める。
   (padding-bottom を足す方法だと 48px + 48px で余白が倍になる) */
#page-seminar {display:flow-root;}

/* --------------------------------------------------------------------------
   [2026-08-18] アクア版（9月8日のワークショップページ用）
   キービジュアルが薄いアクア(#C9F5F6)＋青(#2B6AB9/#004680)の配色なので、
   ページ全体をそこへ寄せる。オレンジは画像に無いが、CTA・見出しの目印として
   従来どおり使う（大魔王様の指示）。
   **第1回(/seminar/)はブルー系のキービジュアルのままにしたいので、
   このクラスが付いたときだけ効くようにしている。**
   -------------------------------------------------------------------------- */
#page-seminar.theme-aqua {
	--navy:#004680;
	--navy-dark:#00325C;
	--blue-mid:#2B6AB9;
	--lbl-on-navy:#D5EEF6;
	/* [2026-08-18] アクセントは暖色に戻す。一度サイトのブランドティールにしたが、
	   背景もアクア・見出しも紺・アクセントもティールで寒色一色になり寒々しかった。
	   値は style-root.css の --accent-color-orange と同じ #F5792A。
	   元の #F08300 よりわずかに赤寄りで、アクア(補色側)と並べたときに濁らない。
	   ※黄色寄り(色相34°の #F09419)も一度試したが、大魔王様の判断で取りやめ */
	--accent:#F5792A;
	--accent-dark:#D2600F;
	/* 面の色。ベージュは「開催概要・アクセス情報」と「得られること」のカードだけに絞り、
	   濃さも一段落とした(一度 #F5F1EA まで濃くしたら、面積が広く強すぎた)。
	   「こんな方におすすめ」とタイムラインの見出しはキービジュアル由来のアクアに戻し、
	   暖色の面と交互に出るようにして、どちらか一色に寄らないようにしている */
	--panel:#FAF6F0;       /* 開催概要・アクセス情報(淡いベージュ) */
	--panel-2:#E3F5F8;     /* おすすめリスト・タイムラインの見出し(アクア) */
	--panel-soft:#FDFBF7;  /* 「得られること」カードのグラデーションの淡い側 */
	--line:#DEE7E8;        /* 罫線はベージュ側・アクア側どちらにも乗るニュートラルな寒色寄り */
	background:linear-gradient(180deg,#C9F5F6 0%,#D6F7F8 30%,#E5FAFB 65%,#F2FDFD 100%);
  }
/* [2026-08-18] キービジュアル左上の水玉を、ページ下部の左端に再現する。
   画像から実測した値: 直径18px・ピッチ43.5px・色 #A1DFEE。
   ただしバナーは1600px幅の画像を最大1260pxで表示しているので、見た目の大きさを
   合わせるため 0.79倍した 直径14px(半径7px)・ピッチ34px を使う。
   .wrap(白いカード)より奥に置き、カードの陰から覗く形にしたいので、
   装飾は擬似要素にして .wrap 側を z-index で前に出している。
   下端に向かって濃く、上に向かってフェードアウトさせ、唐突に切れないようにした。
   画像では左上にある模様だが、ページ上ではキービジュアルと位置が重ならないよう右下に置いている。 */
#page-seminar.theme-aqua {position:relative;}
#page-seminar.theme-aqua::before {
	content:"";
	position:absolute;
	right:0;
	bottom:8px;
	width:520px;
	height:400px;
	background-image:radial-gradient(circle, #A1DFEE 7px, transparent 7.5px);
	background-size:34px 34px;
	/* グリッドを右下から積む。上から積むと最終行が中途半端に切れて、
	   スマホ(カードの下に28pxしか余白が無い)で欠けた円が並んでしまう。
	   右起点にしているのは、見せたいのが右端の列だから(左起点だと
	   幅が半端なときに右端が欠ける) */
	background-position:right bottom;
	-webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
	mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
	pointer-events:none;
	z-index:0;
  }
/* 白いカードを水玉より前面に。カードの外側(左右の余白)にだけ水玉が見える */
#page-seminar.theme-aqua .wrap {position:relative;z-index:1;}

/* [2026-08-18] セクションの区切り線を、右下の装飾と同じ色のドットの列に置き換える。
   1pxのベタ罫より軽く、キービジュアルの水玉ともつながる。
   装飾のドット(直径14px)をそのまま小さくすると間延びするので、
   罫線用は 直径4px・ピッチ14px にしてある。
   高さ4pxのタイルを repeat-x で敷いているだけなので、セクションの中身には影響しない。 */
#page-seminar.theme-aqua section.block {
	border-top:none;
	background-image:radial-gradient(circle, #A1DFEE 2px, transparent 2.5px);
	background-size:14px 4px;
	background-repeat:repeat-x;
	background-position:left top;
  }

/* ポイントバッジは画像の中間色→濃紺のグラデーションに。
   後方の「個別調整」ブロック(#page-seminar ul.points > li = 詳細度1,1,1)に勝つ必要がある */
#page-seminar.theme-aqua ul.points > li {
	background:linear-gradient(160deg,var(--blue-mid),var(--navy));
  }
/* 地図プレースホルダのピン（url()の中は変数を展開できないので丸ごと指定し直す） */
#page-seminar.theme-aqua .access-map {
	background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23004680' stroke-width='1.5'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center center no-repeat;
  }
#page-seminar img {max-width:100%;display:block;}
#page-seminar a {color:inherit;}
#page-seminar .wrap {
	max-width:920px;
	margin:0 auto 48px;
	padding:40px;
	background:var(--white);
	border-radius:16px;
	box-shadow:0 12px 40px rgba(0,42,96,.12);
  }
#page-seminar .hero {padding:24px 0 28px;}
#page-seminar .hero-banner {
	max-width:1300px;
	margin:0 auto;
	padding:0 20px;
  }
#page-seminar .hero-banner img {width:100%;height:auto;}
#page-seminar .intro {padding:8px 0 8px;}
#page-seminar .eyebrow {
	display:inline-block;
	background:var(--accent);
	color:#fff;
	font-weight:700;
	font-size:.82rem;
	letter-spacing:.04em;
	padding:6px 16px;
	border-radius:100px;
	margin-bottom:18px;
  }
#page-seminar .intro h1 {
	font-size:1.75rem;
	line-height:1.5;
	color:var(--navy);
	font-weight:800;
	letter-spacing:.01em;
  }
#page-seminar .intro h1 .sub {
	display:block;
	font-size:1.05rem;
	color:var(--ink-soft);
	font-weight:700;
	margin-bottom:8px;
  }
#page-seminar .lead {
	margin-top:22px;
	font-size:1.02rem;
	color:var(--ink);
  }
#page-seminar .lead p+p {margin-top:16px;}
/* [2026-08-18] セレクタ名が `.note-委託` になっており、実際のHTMLのクラス
   `.note-consign`(委託元の注記)に当たっていなかった。/seminar/ でもこの注記だけ
   本文と同じ大きさで出ていたため、クラス名に合わせて修正 */
#page-seminar .note-consign {
	margin-top:18px;
	font-size:.85rem;
	color:var(--ink-soft);
	padding:0 2px;
  }
#page-seminar .points {
	list-style:none;margin:28px 0 0;
	display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  }
#page-seminar .points li {
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:10px;text-align:center;
	background:linear-gradient(160deg,var(--navy),var(--navy-dark));
	color:#fff;border-radius:14px;padding:22px 12px;
	box-shadow:0 10px 24px rgba(0,42,96,.18);
  }
#page-seminar .points .num {
	font-size:1.9rem;font-weight:800;line-height:1;color:#fff;
	letter-spacing:.02em;
  }
#page-seminar .points .num small {font-size:.9rem;font-weight:700;margin-left:2px;}
/* [2026-08-18] 数字ではなく文言を入れるバッジ用(例:「ハイブリッド開催」)。
   .num のままだと1.9remで枠からはみ出すため、文字数に耐えるサイズに落とす */
#page-seminar .points .num-text {font-size:1.15rem;line-height:1.35;white-space:nowrap;}
#page-seminar .points .lbl {font-size:.78rem;color:var(--lbl-on-navy);line-height:1.4;font-weight:600;}
#page-seminar .summary {
	margin:36px 0 0;
	background:var(--panel);
	color:var(--ink);
	border:1px solid var(--line);
	border-radius:14px;
	padding:32px;
	box-shadow:0 8px 24px rgba(0,63,142,.08);
  }
#page-seminar .summary h2 {
	font-size:1.05rem;
	letter-spacing:.06em;
	color:var(--navy);
	margin-bottom:20px;
	padding-bottom:12px;
	border-bottom:1px solid var(--line);
  }
#page-seminar .summary dl {
	display:grid;
	grid-template-columns:120px 1fr;
	gap:14px 18px;
  }
#page-seminar .summary dt {
	font-weight:700;
	font-size:.92rem;
	color:var(--navy);
  }
#page-seminar .summary dd {font-size:.98rem;color:var(--ink);}
#page-seminar .summary .fee {color:var(--accent-dark);font-weight:800;}
#page-seminar section.block {padding:48px 0;border-top:1px solid var(--line);}
#page-seminar section.block:first-of-type {border-top:none;}
#page-seminar .sec-title {
	font-size:1.35rem;
	color:var(--navy);
	font-weight:800;
	margin-bottom:24px;
	position:relative;
	padding-left:16px;
  }
#page-seminar .sec-title::before {
	content:"";
	position:absolute;left:0;top:.18em;bottom:.18em;
	width:6px;border-radius:3px;background:var(--accent);
  }
#page-seminar .check-list {list-style:none;display:grid;gap:12px;}
#page-seminar .check-list li {
	background:var(--white);
	border:1px solid var(--line);
	border-radius:10px;
	padding:16px 18px 16px 50px;
	position:relative;
	font-weight:600;
  }
#page-seminar .check-list li::before {
	content:"✓";
	position:absolute;left:16px;top:50%;transform:translateY(-50%);
	width:24px;height:24px;border-radius:50%;
	background:var(--accent);color:#fff;
	font-size:.85rem;font-weight:800;
	display:flex;align-items:center;justify-content:center;
  }
#page-seminar .reco-list {list-style:none;display:grid;gap:12px;}
#page-seminar .reco-list li {
	background:var(--panel-2);
	border-radius:10px;
	padding:16px 18px 16px 44px;
	position:relative;
  }
#page-seminar .reco-list li::before {
	content:"";
	position:absolute;left:18px;top:1.55em;
	width:10px;height:10px;border-radius:50%;
	background:var(--navy);
  }
#page-seminar .timeline {display:grid;gap:18px;}
#page-seminar .tl-item {
	background:var(--white);
	border:1px solid var(--line);
	border-radius:12px;
	overflow:hidden;
  }
#page-seminar .tl-head {
	display:flex;align-items:center;gap:14px;
	background:var(--panel-2);
	padding:14px 20px;
  }
#page-seminar .tl-no {
	flex:none;
	width:34px;height:34px;border-radius:50%;
	background:var(--navy);color:#fff;
	font-weight:800;
	display:flex;align-items:center;justify-content:center;
  }
#page-seminar .tl-head h3 {font-size:1.05rem;color:var(--navy);}
#page-seminar .tl-head .dur {margin-left:auto;font-size:.82rem;color:var(--ink-soft);font-weight:700;flex:none;}
#page-seminar .tl-body {padding:16px 22px;}
#page-seminar .tl-body ul {list-style:none;display:grid;gap:8px;}
#page-seminar .tl-body li {padding-left:18px;position:relative;font-size:.96rem;}
#page-seminar .tl-body li::before {
	content:"";position:absolute;left:2px;top:.7em;
	width:7px;height:7px;border-radius:50%;background:var(--accent);
  }
#page-seminar .tl-note {font-size:.82rem;color:var(--ink-soft);margin-top:14px;}
#page-seminar .tl-note p {margin-top:4px;}
#page-seminar .perks {display:grid;gap:16px;grid-template-columns:1fr 1fr;}
#page-seminar .perk {
	background:linear-gradient(160deg,#ffffff,var(--panel-soft));
	border:1px solid var(--line);
	border-radius:12px;
	padding:22px;
  }
#page-seminar .perk h3 {color:var(--navy);font-size:1.05rem;margin-bottom:8px;}
#page-seminar .perk p {font-size:.95rem;color:var(--ink-soft);}
/* [2026-08-18] 9月8日のページ用。箇条書きが2ブロック続いて単調だったため、
   「持ち帰れるもの」を番号つきのカードに変えて情報の形を変えた。
   .perks は2列固定なので4枚で2x2に収まる */
#page-seminar .perks-4 {grid-template-columns:1fr 1fr;}
#page-seminar .perk-no {
	display:block;
	font-size:.78rem;
	font-weight:800;
	letter-spacing:.12em;
	color:var(--accent);
	margin-bottom:6px;
  }
/* 「こんな方におすすめ」を2列に。上のカードと粒度で差をつけるため1行の短い項目にする */
#page-seminar ul.reco-list-2col {grid-template-columns:1fr 1fr;}
#page-seminar .reco-note {
	margin-top:14px;
	font-size:.85rem;
	color:var(--ink-soft);
  }
#page-seminar .access {display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}
#page-seminar .access-info {
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:12px;
	padding:24px;
  }
#page-seminar .access-info .venue-name {
	font-weight:800;color:var(--navy);font-size:1.05rem;
	margin-bottom:16px;line-height:1.6;
  }
#page-seminar .access-dl {display:grid;gap:14px;}
#page-seminar .access-dl > div {display:flex;flex-direction:column;gap:4px;}
#page-seminar .access-dl dt {
	font-weight:700;font-size:.8rem;color:#fff;
	background:var(--navy);border-radius:4px;
	padding:3px 10px;width:fit-content;
  }
#page-seminar .access-dl dd {font-size:.94rem;color:var(--ink);}
#page-seminar .map-link {
	display:inline-block;margin-top:18px;
	color:var(--navy);font-weight:700;font-size:.92rem;
	text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;
  }
#page-seminar .map-link:hover {color:var(--accent-dark);}
#page-seminar .access-map {
	border-radius:12px;overflow:hidden;
	min-height:300px;border:1px solid var(--line);
	box-shadow:0 8px 24px rgba(0,63,142,.08);
	background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23003F8E' stroke-width='1.5'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center center no-repeat;
  }
#page-seminar .access-map iframe {display:block;width:100%;height:100%;min-height:300px;}
#page-seminar .speaker {
	display:flex;gap:24px;align-items:center;
	background:linear-gradient(135deg,var(--panel),#ffffff);
	border:1px solid var(--line);border-radius:12px;
	padding:24px 28px;
  }
#page-seminar .speaker .avatar {
	flex:none;width:104px;height:104px;border-radius:50%;
	object-fit:cover;border:3px solid #fff;
	box-shadow:0 6px 18px rgba(0,63,142,.18);
  }
#page-seminar .speaker .meta {display:flex;flex-direction:column;gap:4px;}
#page-seminar .speaker .name {font-size:1.3rem;font-weight:800;color:var(--navy);}
#page-seminar .speaker .name .read {font-size:.78rem;color:var(--ink-soft);font-weight:600;margin-left:6px;}
#page-seminar .speaker .org {font-size:.95rem;color:var(--ink-soft);}
#page-seminar .cta {
	margin:48px -40px -40px;
	border-radius:0 0 16px 16px;
	background:linear-gradient(135deg,var(--accent),var(--accent-dark));
	color:#fff;text-align:center;
	padding:52px 20px 56px;
	position:relative;
  }
#page-seminar .cta h2 {font-size:1.7rem;margin-bottom:8px;letter-spacing:.02em;}
#page-seminar .cta p {color:#fff;opacity:.95;margin-bottom:30px;font-weight:600;}
#page-seminar .cta .btn {
	display:inline-flex;align-items:center;gap:12px;
	background:#fff;
	color:var(--navy);
	font-size:1.3rem;
	font-weight:800;
	text-decoration:none;
	padding:22px 64px;
	border-radius:100px;
	box-shadow:0 12px 28px rgba(0,0,0,.22);
	transition:transform .15s ease, box-shadow .15s ease;
  }
#page-seminar .cta .btn .arrow {
	display:inline-flex;width:26px;height:26px;border-radius:50%;
	background:var(--accent);color:#fff;align-items:center;justify-content:center;
	font-size:.95rem;transition:transform .15s ease;
  }
#page-seminar .cta .btn:hover {transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.28);}
#page-seminar .cta .btn:hover .arrow {transform:translateX(3px);}
#page-seminar .cta .fee-tag {
	display:inline-block;margin-bottom:14px;
	color:#fff;font-weight:800;font-size:1rem;letter-spacing:.18em;
	position:relative;padding:0 4px;
  }
#page-seminar .cta .fee-tag::before, #page-seminar .cta .fee-tag::after {
	content:"";position:absolute;top:50%;width:24px;height:2px;
	background:rgba(255,255,255,.6);
  }
#page-seminar .cta .fee-tag::before {right:100%;margin-right:10px;}
#page-seminar .cta .fee-tag::after {left:100%;margin-left:10px;}
#page-seminar .cta .deadline {
	display:block;margin-top:20px;font-size:.86rem;color:#fff;opacity:.9;
  }
#page-seminar .cta-notice {
	margin:36px auto 0;max-width:680px;
	border-top:1px solid rgba(255,255,255,.35);
	padding-top:22px;text-align:left;
  }
#page-seminar .cta-notice-title {
	font-weight:700;font-size:.9rem;color:#fff;margin-bottom:8px;text-align:center;letter-spacing:.08em;
  }
#page-seminar .cta-notice p {
	font-size:.82rem;color:#fff;opacity:.92;line-height:1.7;margin:0;font-weight:500;
  }
#page-seminar .cta-notice p+p {margin-top:4px;}
@media (max-width:640px) {
  #page-seminar {font-size:15px;}
  #page-seminar .hero {padding:16px 0 18px;}
  #page-seminar .hero-banner {padding:0 12px;}
  #page-seminar .wrap {padding:24px 18px;margin:0 12px 28px;border-radius:12px;}
  #page-seminar .cta {margin:28px -18px -24px;border-radius:0 0 12px 12px;}
  #page-seminar .intro {padding:4px 0;}
  #page-seminar .intro h1 {font-size:1.4rem;}
  #page-seminar .summary {padding:24px;}
  #page-seminar .summary dl {grid-template-columns:1fr;gap:4px 0;}
  #page-seminar .summary dt {margin-top:12px;}
  #page-seminar .summary dt:first-child {margin-top:0;}
  #page-seminar .perks, #page-seminar .perks-4 {grid-template-columns:1fr;}
  #page-seminar ul.reco-list-2col {grid-template-columns:1fr;}
  #page-seminar .access {grid-template-columns:1fr;}
  #page-seminar .points {grid-template-columns:repeat(3,1fr);gap:8px;}
  #page-seminar .points li {padding:18px 10px;}
  #page-seminar .points .num {font-size:1.6rem;}
  /* スマホは1枠96px。「ハイブリッド」6文字が折り返さない大きさまで落とす */
  #page-seminar .points .num-text {font-size:.78rem;}
  #page-seminar .speaker {flex-direction:column;text-align:center;gap:16px;}
  #page-seminar .tl-head {flex-wrap:wrap;gap:10px;}
  #page-seminar .tl-head .dur {margin-left:0;width:100%;}
  #page-seminar .cta h2 {font-size:1.25rem;}
  #page-seminar .cta .btn {padding:18px 28px;font-size:1.1rem;justify-content:center;}
}


/* --------------------------------------------------------------------------
   入力例（インターンシップ／オープン・カンパニー共通）  /example-internship/  /example-opencompany/
   -------------------------------------------------------------------------- */
/* テーマ由来のリスト装飾を無効化 */
#page-example ul,
#page-example ol { list-style: none; }
#page-example ul > li,
#page-example ol > li { background-image: none; }
#page-example ul > li::before,
#page-example ol > li::before { content: none; }

#page-example * { box-sizing: border-box; }
#page-example, #page-example {
	margin: 0;
	padding: 0;
	background: #EDE7F6;
	color: #455A64;
	font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 16px;
	line-height: 1.7;
  }
#page-example .sf-form-cover {
	width: 100%;
	height: 160px;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
  }
#page-example .notice-bar {
	background: #FFF3E0;
	border-bottom: 2px solid #F08300;
	color: #8a4b00;
	text-align: center;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: bold;
  }
#page-example .title-band {
	padding: 32px 16px 28px;
  }
#page-example .title-inner {
	max-width: 608px;
	margin: 0 auto;
  }
#page-example .title-inner h2 {
	margin: 0 0 20px;
	font-size: 30px;
	font-weight: 400;
	color: #000;
	text-align: center;
  }
#page-example .title-inner p {
	margin: 0 0 12px;
	font-size: 16px;
	color: #455A64;
  }
#page-example .title-inner p strong {
	color: #455A64;
  }
#page-example .cat-red {
	color: #F44336;
	font-weight: bold;
  }
#page-example .content {
	max-width: 608px;
	margin: 0 auto;
	padding: 24px 16px 60px;
  }
#page-example hr {
	border: 0;
	border-top: 1px solid #CFD8DC;
	margin: 20px 0;
  }
#page-example .section-label {
	font-size: 16px;
	font-weight: 700;
	color: #244061;
	margin: 0 0 16px;
  }
#page-example .field {
	margin: 0 0 20px;
  }
#page-example .field-label {
	font-size: 16px;
	font-weight: 700;
	color: #000;
	margin-bottom: 8px;
  }
#page-example .field-hint {
	font-size: 13px;
	color: #455A64;
	margin: 4px 0 8px;
  }
#page-example .tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	border-radius: 4px;
	padding: 3px 4.8px;
	margin-left: 4px;
	vertical-align: middle;
  }
#page-example .tag-required { background: #F44336; }
#page-example .tag-optional { background: #607D8B; }
#page-example input[type=text].form-control, #page-example input[type=email].form-control, #page-example textarea.form-control, #page-example select.form-control {
	display: block;
	width: 100%;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 16px;
	color: #000;
	font-family: inherit;
  }
#page-example textarea.form-control {
	resize: vertical;
	min-height: 96px;
  }
#page-example ::placeholder { color: #999999; }
#page-example .choice-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
  }
@media (max-width: 480px) {
  #page-example .choice-grid { grid-template-columns: 1fr; }
}
#page-example .choice-box {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 4px;
	padding: 8px;
	font-size: 16px;
  }
#page-example .choice-box input[type=checkbox], #page-example .choice-box input[type=radio] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 1px solid #90A4AE;
	border-radius: 4px;
	background: #fff;
	flex-shrink: 0;
	position: relative;
	margin: 0;
  }
#page-example .choice-box input[type=radio] { border-radius: 50%; }
#page-example .choice-box input[type=checkbox]:checked, #page-example .choice-box input[type=radio]:checked {
	background-color: #00BCD4;
	border-color: #00BCD4;
  }
#page-example .choice-box input[type=checkbox]:checked::after {
	content: '';
	position: absolute;
	left: 6px; top: 2px;
	width: 6px; height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
  }
#page-example .choice-box input[type=radio]:checked::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 8px; height: 8px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
  }
#page-example .choice-box label { cursor: default; color: #000; }
#page-example .file-row {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 4px;
	padding: 8px 12px;
	background: #fff;
  }
#page-example .file-btn {
	display: inline-block;
	padding: 5px 12px;
	font-size: 13px;
	background: #f0f0f0;
	border: 1px solid #c6c6c6;
	border-radius: 3px;
	color: #333;
	white-space: nowrap;
  }
#page-example .file-name {
	font-size: 14px;
	color: #455A64;
  }
#page-example .file-name.empty { color: #9aa5b1; }
#page-example .agree-note {
	color: #F44336;
	font-weight: 700;
  }
#page-example .agree-desc {
	font-size: 14px;
	color: #455A64;
	margin: 6px 0 10px;
  }
#page-example .agree-desc a { color: #00BCD4; text-decoration: underline; }
#page-example a.agree-link {
	color: #F44336;
	text-decoration: underline;
  }
#page-example .btn-row {
	margin-top: 28px;
	display: flex;
	gap: 12px;
	justify-content: center;
  }
#page-example .btn {
	display: inline-block;
	padding: 12px 40px;
	font-size: 18px;
	border-radius: 4px;
	text-align: center;
  }
#page-example .btn-back {
	background: #fff;
	border: 2px solid #90A5AF;
	color: #7B919C;
  }
#page-example .btn-submit {
	background: #D6DDE2;
	border: 2px solid #D6DDE2;
	color: #fff;
  }
#page-example .recaptcha-row {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #d3d3d3;
	border-radius: 4px;
	padding: 10px 14px;
	max-width: 300px;
	font-size: 14px;
	color: #333;
  }
#page-example .sample-footer {
	text-align: center;
	font-size: 12px;
	color: #999;
	margin-top: 18px;
  }


/* --------------------------------------------------------------------------
   個別調整
   -------------------------------------------------------------------------- */

/* /register/ 「受付後の流れ」の丸数字
   テーマ側の ol li::before による位置指定を打ち消すため、
   セレクタの詳細度を上げたうえで必要な値をすべて明示する */
#page-register ol.flow-list {
  list-style: none;
  counter-reset: flow;
  margin: 8px 0 0;
  padding: 0;
}
#page-register ol.flow-list > li {
  position: relative;
  counter-increment: flow;
  display: block;
  margin: 0;
  padding: 0 0 24px 52px;
  text-indent: 0;
  list-style: none;
  background: none;
  color: var(--ink-soft);
}
#page-register ol.flow-list > li::before {
  content: counter(flow);
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  transform: none;
  width: 34px;
  height: 34px;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-register ol.flow-list > li::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: 4px;
  right: auto;
  margin: 0;
  transform: none;
  width: 2px;
  height: auto;
  background: var(--line);
}
#page-register ol.flow-list > li:last-child { padding-bottom: 0; }
#page-register ol.flow-list > li:last-child::after { display: none; }


/* /seminar/ 「セミナーでわかること」チェックリスト
   ※ `* { margin:0; padding:0 }` は擬似要素に適用されないため、
	  テーマ側の li::before の余白・行送り・表示形式を個別に打ち消す */
#page-seminar ul.check-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}
#page-seminar ul.check-list > li {
  position: relative;
  display: block;
  margin: 0;
  padding: 16px 18px 16px 50px;
  text-indent: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 600;
}
#page-seminar ul.check-list > li::before {
  content: "✓";
  box-sizing: border-box;
  position: absolute;
  left: 16px;
  top: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
  display: block;
}

/* /seminar/ 「こんな方におすすめ」 */
#page-seminar ul.reco-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}
#page-seminar ul.reco-list > li {
  position: relative;
  display: block;
  margin: 0;
  padding: 16px 18px 16px 44px;
  text-indent: 0;
  list-style: none;
  background: var(--panel-2);
  border-radius: 10px;
}
#page-seminar ul.reco-list > li::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 18px;
  top: 1.55em;
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  transform: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
  display: block;
}

/* /seminar/ タイムスケジュールの項目 */
#page-seminar .tl-body ul {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}
#page-seminar .tl-body ul > li {
  position: relative;
  display: block;
  margin: 0;
  padding: 0 0 0 18px;
  text-indent: 0;
  list-style: none;
  background: none;
  font-size: .96rem;
}
#page-seminar .tl-body ul > li::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 2px;
  top: .7em;
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  transform: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
}

/* /seminar/ 上部のポイントバッジ */
#page-seminar ul.points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
#page-seminar ul.points > li {
  position: relative;
  margin: 0;
  padding: 22px 12px;
  text-indent: 0;
  list-style: none;
  background: linear-gradient(160deg, var(--navy), var(--navy-dark));
}
#page-seminar ul.points > li::before,
#page-seminar ul.points > li::after { content: none; }


/* --------------------------------------------------------------------------
   テーマとの整合
   -------------------------------------------------------------------------- */

/* テーマが .page-hero でページタイトル帯を出力するため、
   移植コンテンツ側の見出し帯を非表示にし、h1 を1つに保つ。
   これにより /example-internship/ /example-opencompany/ と同じ構成になる */
#page-register > .hero,
#page-privacy > .page-head { display: none; }

/* 旧サイトのフッターを非表示（テーマのフッターを使用） */
#page-example > footer { display: none; }


/* ==========================================================
   静岡県企業オンライン合同座談会 告知記事 用スタイル
   ========================================================== */
#online-event0901 .introduction-box {
	font-weight: 600;
}
/* ---- セクション見出し(h3) ---- */
#online-event0901 .section-title {
	 margin: 56px 0 20px;
	 padding-left: 14px;
	 border-left: 6px solid #F08300;
	 color: #003F8E;
	 font-size: 22px;
	 font-weight: bold;
	 line-height: 1.4;
   }
   
/* ---- 本イベントのポイント ---- */
#online-event0901 .point-card {
  background: #ffffff;
  border: 2px solid #F08300;
  border-radius: 10px;
  padding: 28px 24px;
  height: 100%;
  box-sizing: border-box;
}
#online-event0901 .point-badge {
  display: inline-block;
  background: #F08300;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.05em;
  padding: 4px 16px;
  border-radius: 20px;
  margin-bottom: 14px;
}
#online-event0901 .point-title {
  color: #003F8E;
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.5;
}
#online-event0901 .point-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}
/* ---- 出展企業 ---- */
#online-event0901 .company-card {
  background: #ffffff;
  border: 1px solid #dde3ea;
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
}
#online-event0901 .company-logo {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}
#online-event0901 .company-name {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333333;
}
/* ---- 出展企業(ロゴなし・テキストのみ 2段組) ---- */
#online-event0901 .company-list-callout {
  border: 2px solid #003F8E;
  border-radius: 10px;
  background: #ffffff;
  padding: 32px 28px;
}
#online-event0901 .company-list {
  column-count: 2;
  column-gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#online-event0901 .company-list li {
  font-size: 18px;
  font-weight: bold;
  line-height: 2;
  padding-left: 30px;
  position: relative;
  break-inside: avoid;
}
#online-event0901 .company-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #F08300;
  border-radius: 50%;
}
/* ---- こんな方におすすめ ---- */
#online-event0901 .recommend-card {
  background: #ffffff;
  border: 2px solid #003F8E;
  border-radius: 10px;
  padding: 24px 20px;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
}
#online-event0901 .recommend-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 14px;
}
#online-event0901 .recommend-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #003F8E;
  font-weight: bold;
}

/* =========================================================
   [2026-08-18] トップページ・新着情報の上のバナー枠 (.top-banner-zone)

   Foundationのブロックグリッド(small-up-1 medium-up-2)で並べる。
   バナーが1枚のときも左寄せのまま(センタリングしない)。
   2枚目が入ったら自動的に2列になる。
   ========================================================= */
/* [2026-08-18] 上下の余白を揃える。
   このバナー枠はページ背景(--white-color-dark)の上に置かれ、
   上は「締切が近いインターン」の薄緑の帯、下は「新着情報」の白い帯に挟まれている。
   隣接セクションのpaddingは各帯の内側の余白なので、バナーの外側に見える余白は
   この枠自身のpaddingがそのまま出る。したがって上下同値にすればそのまま揃う
   (修正前は上2rem・下0で、白い帯にバナーが接していた)。 */
.top-banner-zone {
	padding: 2rem 0;
}
.top-banner-link {
	display: block;
	border-radius: .75rem;
	overflow: hidden;
	box-shadow: var(--box-shadow-light);
	transition: transform .15s ease, box-shadow .15s ease;
}
.top-banner-link:hover {
	transform: translateY(-2px);
	box-shadow: var(--box-shadow);
}
/* 画像は枠幅いっぱい。高さは元画像の比率のまま */
.top-banner-link img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 734px) {
	.top-banner-zone { padding: 1.5rem 0; }
}