@charset "utf-8";
/*!
 * BIKODO — 共通ヘッダー・フッターの追加スタイル
 *
 * ヘッダーとフッターは全ページ共通（旧デザインのページも、新デザインの
 * 制作実績・デジタルページも同じもの）なので、そこに対する追加分は
 * 全ページで読み込むこのファイルに置きます。
 *
 * ※ legacy-add.css は旧デザインのページでしか読み込まれないため、
 *   ヘッダー関連をあちらに置くと、制作実績ページなどでスタイルが外れます。
 */


/* ==========================================================================
   6. グローバルナビの「NEW」バッジ
   ==========================================================================
   「デジタルサービス」を新設したので、しばらくのあいだ目立たせるための
   水色のラベルです。目立たせる必要がなくなったら、
   template-parts/legacy/pc-header.php と sp-header.php の
   <span class="head-new">NEW</span> を消すだけで外れます。

   ※ 2026-09-04：デジタル導線をナビから一旦外したため、いまはこの
     バッジは出ていません。戻したときにまた効くよう、指定は残しています。
   ========================================================================== */

.head-new {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.15em 0.6em;
	border-radius: 1em;
	background: #5AD2D2;          /* 現行サイトの背景アニメーションで使われている水色 */
	color: #0b4a51;
	font-family: "proxima-nova", sans-serif;
	font-weight: 800;
	font-size: 0.75em;
	letter-spacing: 0.06em;
	line-height: 1.5;
	vertical-align: 0.15em;
	white-space: nowrap;
}

/* ヘッダーのホバー下線は文字だけに効かせたいので、バッジ側は影響を受けないように */
#header nav ul li a .head-new {
	position: relative;
	z-index: 1;
}

/* 項目が1つ増えたぶん、PCナビの間隔を少しだけ詰めます。
   2026-09-04：デジタル導線を外して項目が元の数に戻ったので、この指定も止めています
   （legacy.css の 2vw に戻ります）。デジタル導線を戻すときは、
   下のコメントアウトも一緒に外してください。 */
/*
#header nav ul li {
	margin-right: 1.6vw;
}
*/

/* SPメニューでは英字が大きいので、バッジも合わせて少し小さく */
#g-nav ul li a .head-new {
	font-size: 0.5em;
	vertical-align: 0.5em;
	padding: 0.25em 0.8em;
}

/* ==========================================================================
   7. 旧デザインのページで、Arkheが担当していた分を補う
   ==========================================================================
   旧デザインのページでは Arkhe（親テーマ）のCSSを読み込んでいないため、
   Arkheが出力しているマークアップのうち、Arkhe側のCSSで見た目を
   整えていたものが素のまま出てしまいます。その分をここで補います。
   ========================================================================== */

/*
 * 「コンテンツへスキップ」リンク。
 * Arkhe が wp_body_open で出力していますが、隠すCSSはArkhe側にあるため、
 * そのままだとヘッダーの上に文字として出てしまい、その分ページが下にずれます。
 * 通常は隠し、キーボード操作でフォーカスしたときだけ表示します。
 */
.bkd-legacy .skip-link,
.bkd-legacy .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bkd-legacy .skip-link:focus {
	width: auto;
	height: auto;
	margin: 0;
	padding: 16px 24px;
	clip: auto;
	clip-path: none;
	top: 8px;
	left: 8px;
	z-index: 1000;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .3);
	color: #0091FF;
	font-size: 14px;
	font-weight: 700;
}

/*
 * 【背景色について】
 * 現行サイトでヘッダーの後ろに見えている色は、CSSの背景色ではなく
 * ファーストビューの動画（pc_fv_animation…webm）そのものです。
 * 動画が画面の上端まで伸びていて、ヘッダーの後ろにも回り込んでいます。
 *
 * ログイン中はWordPressの管理バーのぶんページ全体が32px下がるため、
 * 動画の上に隙間ができ、そこだけ地の色（白）が見えます。
 * ログアウト状態では隙間は出ません。
 * ここで背景色を足すと、動画とは違う色の帯が出てしまうので何もしません。
 */

/* ==========================================================================
   8. SPメニューを「固定値」から「流し込み」へ
   ==========================================================================
   旧サイトのSPメニューは、メールフォーム／TELのボタンを top:122vw、
   その下の案内文を top:135vw という固定値で置いていました。
   これはメニューが5項目だったときの位置なので、項目を1つ足しただけで
   最後の項目（CONTACT）とボタンが重なります。

   項目数が変わっても崩れないよう、絶対配置をやめて
   「ロゴ → メニュー → ボタン → 案内文」が順に流れる形にしています。
   見た目の並びは元のままです。
   ========================================================================== */

#g-nav-list {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: 12vw;
}

#g-nav ul {
	position: static;
	margin: 10vw 0 0 11vw;
}

/* メールフォーム・TELの2つを横並びのまとまりに */
.sp-menu-actions {
	display: flex;
	justify-content: center;
	gap: 14vw;
	margin-top: 12vw;
}

#g-nav #sp-menu-mail,
#g-nav #sp-menu-tel {
	position: static;
	top: auto;
	left: auto;
}

#g-nav #sp-menu-under-txt {
	position: static;
	top: auto;
	margin-top: 10vw;
}

/* ==========================================================================
   9. ナビの「Digital Solutions」
   ==========================================================================
   デジタルサービスは別ブランドという位置づけなので、他の項目と同じ文字ではなく
   ロゴで出しています。並びは「お知らせ」と「お問い合わせ」の間です。

   ロゴは 344×30 の画像です。高さを基準にして、ナビの文字（1vw）より
   少しだけ大きく見えるくらいに抑えています。

   ※ 2026-09-04：デジタル導線をナビから一旦外したため、いまは使われていません。
     戻したときにそのまま効くよう、指定は残しています。
   ========================================================================== */

.head-digital a {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}

.head-digital img {
	display: block;
	width: auto;
	/* 画面幅で伸縮しつつ、小さすぎ・大きすぎにならないよう上下限を付けます */
	height: clamp(15px, 1.35vw, 22px);
}

.head-digital a:hover img {
	opacity: .75;
	transition: opacity .25s ease;
}

/* ロゴが入ったぶん幅を取るので、この項目の前後だけ余白を詰めます */
#header nav ul li.head-digital {
	margin-right: 1.2vw;
	margin-left: .4vw;
}