@charset "utf-8";

/* ヘッダー：Lightning の固定は使わず、sticky で上部に固定 */
body.header_scrolled .site-header,
.site-header {
	position: sticky !important;
	top: var(--wp-admin--admin-bar--height, 0px) !important;
	z-index: 1000;
}
body.header_scrolled {
	padding-top: 0 !important;
}
/* スクロール時も見た目を変えない */
body.header_scrolled .site-header {
	animation: none;
}
body.header_scrolled .site-header-logo {
	display: block;
}
@media (min-width: 992px) {
	body.header_scrolled .site-header {
		box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
	}
	body.header_scrolled .site-header .global-nav--layout--float-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-left: auto;
		margin-right: 0;
	}
}

/* --- Contact をボタン化 --- */
.menu-item.cst-nav-cta > a {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  white-space: nowrap;
  background: var(--blue);
  color: var(--white);
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .52px;
  transition: opacity .2s ease;
}
/* 文字の後ろに紙飛行機 */
.menu-item.cst-nav-cta > a::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.9596 3.08142L12.8471 13.0439C12.6876 13.7469 12.2721 13.9219 11.6816 13.5909L8.46259 11.2189L6.9096 12.7129C6.7376 12.8849 6.5941 13.0284 6.2626 13.0284L6.4941 9.75042L12.4596 4.35992C12.7191 4.12892 12.4031 4.00042 12.0566 4.23192L4.6816 8.87592L1.5066 7.88192C0.816095 7.66642 0.803595 7.19142 1.6506 6.85992L14.0691 2.07542C14.6441 1.85992 15.1471 2.20292 14.9596 3.08142Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.9596 3.08142L12.8471 13.0439C12.6876 13.7469 12.2721 13.9219 11.6816 13.5909L8.46259 11.2189L6.9096 12.7129C6.7376 12.8849 6.5941 13.0284 6.2626 13.0284L6.4941 9.75042L12.4596 4.35992C12.7191 4.12892 12.4031 4.00042 12.0566 4.23192L4.6816 8.87592L1.5066 7.88192C0.816095 7.66642 0.803595 7.19142 1.6506 6.85992L14.0691 2.07542C14.6441 1.85992 15.1471 2.20292 14.9596 3.08142Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.menu-item.cst-nav-cta > a:hover,
.menu-item.cst-nav-cta > a:focus {
  background: var(--blue-hover);
  color: var(--white);
}

/* --- ヘッダー右側エリア --- */
/* グローバルナビを横並びにして、utils を右端へ */
.global-nav-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.global-nav-list > li.cst-nav-utils {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  padding-left: 24px;
  border: 0;
}
.global-nav-list > li.cst-nav-utils::before,
.global-nav-list > li.cst-nav-utils::after {
  content: none;
}
/* utils 内のリンクにナビ用の padding が効かないように */
.global-nav-list > li.cst-nav-utils a {
  padding: 0;
}

/* ナビの下線（アニメーション無し） */
.global-nav-list > li::before {
  border-bottom-color: var(--blue);
  transition: none;
}

/* 現在のページのメニュー項目 */
.global-nav-list .current_page_item > a,
.global-nav-list .current-menu-item > a,
.global-nav-list .current_page_parent > a,
.global-nav-list .current-menu-ancestor > a,
.global-nav-list .current_page_item > a:hover,
.global-nav-list .current-menu-item > a:hover,
.global-nav-list .current_page_parent > a:hover,
.global-nav-list .current-menu-ancestor > a:hover {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 0;
}

/* Contactボタンは現在のページでも白文字 */
.global-nav-list .cst-nav-cta.current_page_item > a,
.global-nav-list .cst-nav-cta.current-menu-item > a,
.global-nav-list .cst-nav-cta.current_page_parent > a,
.global-nav-list .cst-nav-cta.current-menu-ancestor > a,
.global-nav-list .cst-nav-cta.current_page_item > a:hover,
.global-nav-list .cst-nav-cta.current-menu-item > a:hover,
.global-nav-list .cst-nav-cta.current_page_parent > a:hover,
.global-nav-list .cst-nav-cta.current-menu-ancestor > a:hover {
  color: var(--white);
}

/* PC幅のみのヘッダー調整 */
@media (992px < width) {
	.device-pc .global-nav-list > li > a {
		padding: 0.6rem;
	}
	.device-pc .global-nav-list > li.cst-lang > a {
		display: inline;
		padding: 0;
		font-size: inherit;
		line-height: inherit;
	}
	/* メインメニュー */
	.device-pc .global-nav-list {
		--nav-gap: clamp(12px, 3vw - 18px, 40px);
		gap: var(--nav-gap);
	}
	/* Contact → 検索：項目間の1.5倍（1920pxで60px） */
	.device-pc .global-nav-list > li.cst-nav-utils {
		padding-left: calc(var(--nav-gap) * .5);
	}
	/* 検索 → EN/JP：項目間の半分（1920pxで20px） */
	.device-pc .global-nav-list > li.cst-lang {
		margin-left: calc(var(--nav-gap) * -.5);
	}
	.device-pc .cst-lang .cst-lang__link:not(.hd-is-current) {
		color: #999;
	}
	/* Contact ボタン */
	.device-pc .global-nav-list > li.cst-nav-cta > a {
		gap: 6px;
		padding: 12px 24px;
		border-radius: 4px;
	}
	/* 検索欄（Figma：下線80px・虫めがね15px） */
	.device-pc .cst-search {
		gap: 1px;
	}
	.device-pc .cst-search .cst-search__input {
		width: 80px;
		border-bottom-color: #999;
	}
	.device-pc .cst-search .cst-search__input:focus {
		border-bottom-color: var(--blue);
	}
	.device-pc .cst-search .cst-search__btn {
		color: #999;
		font-size: 15px;
	}
	.device-pc .cst-search .cst-search__btn:hover,
	.device-pc .cst-search .cst-search__btn:focus {
		color: var(--blue);
	}
	.device-pc .global-nav-list > li:not(.cst-nav-utils):not(.cst-nav-cta):not(.cst-lang) > a {
		padding-left: 0;
		padding-right: 0;
		color: #555;
		font-size: 16px;
		font-weight: 600;
		line-height: 21px;
		letter-spacing: 0;
	}
	.device-pc .global-nav-list .global-nav-name {
		font-size: inherit;
		font-weight: inherit;
	}
	.device-pc .global-nav-list > li:not(.cst-nav-utils):not(.cst-nav-cta):not(.cst-lang) > a:hover,
	.device-pc .global-nav-list > li:is(.current_page_item, .current-menu-item, .current_page_parent, .current-menu-ancestor):not(.cst-nav-cta):not(.cst-lang) > a {
		color: var(--blue);
	}
	/* リンクなしの親項目 */
	.device-pc .global-nav-list a[href="#"] {
		pointer-events: none;
		cursor: default;
	}
	/* Figma：1920pxで左右60px（比例）、1920px超は中央寄せで固定 */
	#site-header-container {
		max-width: var(--design-width);
		padding-left: min(calc(60 / 1920 * 100vw), 60px);
		padding-right: min(calc(60 / 1920 * 100vw), 60px);
	}
	/* 幅が狭くなってもロゴは縮小しない（Lightning の width:100% / margin-right:2em を打ち消す） */
	.site-header--layout--nav-float .site-header-logo {
		flex: 0 0 auto;
		width: auto;
		margin-right: 0;
	}
	/* SVG に幅・高さの指定がないため、Figma の 192×46 に合わせる */
	.site-header-logo img {
		width: auto;
		height: 46px;
		max-width: none;
		max-height: none;
	}
}
/* 1400px 未満：ロゴ・文字・Contact・検索欄を小さく */
@media (min-width: 992px) and (max-width: 1399.98px) {
	.site-header-logo img {
		width: 160px;
		height: auto;
		max-height: none;
	}
	.device-pc .global-nav-list > li:not(.cst-nav-utils):not(.cst-nav-cta):not(.cst-lang) > a {
		font-size: 15px;
	}
	.device-pc .global-nav-list > li.cst-nav-cta > a {
		padding: 10px 16px;
	}
	.device-pc .cst-search .cst-search__input {
		width: 64px;
	}
}
/* 1200px 未満：1200px の見た目から 992px（ハンバーガー）まで画面幅に応じて縮小 */
@media (min-width: 992px) and (max-width: 1199.98px) {
	/* 各値：992px の値 + 差分 × (画面幅 - 992px) / 208 */
	#site-header-container {
		padding-left: calc(20px + 17.5 * (100vw - 992px) / 208);
		padding-right: calc(20px + 17.5 * (100vw - 992px) / 208);
	}
	.site-header-logo img {
		width: calc(140px + 20 * (100vw - 992px) / 208);
	}
	.device-pc .global-nav-list {
		--nav-gap: calc(10px + 8 * (100vw - 992px) / 208);
	}
	.device-pc .global-nav-list > li:not(.cst-nav-utils):not(.cst-nav-cta):not(.cst-lang) > a {
		font-size: calc(14px + (100vw - 992px) / 208);
	}
	.device-pc .global-nav-list > li.cst-nav-cta > a {
		padding: 10px calc(13px + 3 * (100vw - 992px) / 208);
		font-size: calc(14px + (100vw - 992px) / 208);
	}
}
/* ===============================================
   検索フォーム
   =============================================== */

/* --- 共通リセット --- */
.wp-block-search,
.search-form,
.searchform {
	display: flex !important;
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: 320px;
	position: relative;
}

/* ラッパーが挟まる場合（コアの検索ブロック） */
.wp-block-search__inside-wrapper {
	display: flex !important;
	align-items: stretch;
	width: 100%;
	border: 0;
	padding: 0;
	position: static;
}

/* label が幅を潰さないように */
.search-form label,
.wp-block-search__label {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
	display: block;
}
.wp-block-search__label {
	display: none; 
}

/* --- 入力欄 --- */
.wp-block-search__input,
.search-form .search-field,
.searchform input[type="text"],
.searchform input[type="search"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #d5d8dd;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	background: #f5f6f8;
	font-size: 14px;
	line-height: 1.4;
	color: #222;
	box-sizing: border-box;
	position: static;
	appearance: none;
	-webkit-appearance: none;
}
.wp-block-search__input:focus,
.search-form .search-field:focus,
.searchform input[type="search"]:focus {
	outline: none;
	background: #fff;
	border-color: #16233d;
}

/* --- 送信ボタン --- */
.wp-block-search__button,
.search-form .search-submit,
.searchform button,
.searchform input[type="submit"] {
	flex: 0 0 auto;
	width: auto;
	min-width: 56px;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 0 4px 4px 0;
	background: #16233d;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 44px;
	cursor: pointer;
	position: static;
	appearance: none;
	-webkit-appearance: none;
	transition: opacity .2s;
}
.wp-block-search__button:hover,
.search-form .search-submit:hover,
.searchform button:hover {
	opacity: .85;
}

/* ボタン内にアイコンがある場合 */
.wp-block-search__button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	display: block;
	margin: 0 auto;
}

/* 言語切り替え */
.global-nav-list > li.cst-lang,
.cst-lang {
	display: flex;
	align-items: center;
	gap: 0.3em;
	font-size: 15px;
	font-weight: 500;
	line-height: 16.5px;
	letter-spacing: .66px;
	white-space: nowrap;
	color: #888;
}
/* 現在の言語ではない方 */
.cst-lang .cst-lang__link {
	color: #888;
}
/* 現在の言語 */
.cst-lang .cst-lang__link.hd-is-current {
	color: var(--blue);
}
.cst-lang .cst-lang__sep {
	color: #999;
}

/* --- モバイルでヘッダー右側エリアを表示 --- */
.cst-search {
	display: flex;
	align-items: center;
}
/* 入力欄は下線のみ */
.cst-search__input {
	order: 1;
	width: 96px;
	height: auto;
	margin: 0;
	padding: 4px 0;
	border: 0;
	border-bottom: 1px solid #9a9a9a;
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	color: #333;
	box-shadow: none;
}
.cst-search__input:focus {
	outline: none;
	border-bottom-color: var(--blue);
}
/* 検索欄：ブラウザ標準の部品を消して、文字の幅を確保 */
.cst-search__input {
	-webkit-appearance: none;
	appearance: none;
}
.cst-search__input::-webkit-search-decoration,
.cst-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	display: none;
}
/* 虫めがねは入力欄の右 */
.cst-search .cst-search__btn {
	order: 2;
	padding: 0;
	border: 0;
	background: transparent;
	color: #9a9a9a;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color .2s;
}
.cst-search .cst-search__btn:hover,
.cst-search .cst-search__btn:focus {
	border: 0;
	background: transparent;
	color: var(--blue);
}
@media (max-width: 991px) {
  .site-header-sub { display: block; }
  .cst-search__input,
  .cst-search__input:focus { width: 100%; }
}

/* ===============================================
   メガメニュー（About：メニュー項目のCSSクラス mega-menu）
   =============================================== */
@media (min-width: 992px) {
	/* パネルの位置の基準をヘッダーにする */
	#site-header-container {
		position: relative;
		overflow: visible;
	}
	/* Lightning がナビのリストを基準にしているので外す */
	.device-pc .global-nav-list {
		position: static;
	}
	/* 下方向に当たり判定を広げ、パネルへ移る途中で閉じないようにする */
	.device-pc .global-nav-list > li.mega-menu {
		position: static;
		padding-bottom: 30px;
		margin-bottom: -30px;
	}

	/* 下線は li ではなくリンク基準で描く、Lightning の三角は出さない */
	.device-pc .global-nav-list > li.mega-menu::before,
	.device-pc .global-nav-list > li.mega-menu::after {
		display: none;
	}
	.device-pc .global-nav-list > li.mega-menu > a {
		position: relative;
		flex-wrap: nowrap;
	}
	.device-pc .global-nav-list > li.mega-menu > a::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0;
		border-bottom: 1px solid var(--blue);
	}
	.device-pc .global-nav-list > li.mega-menu:hover > a::before,
	.device-pc .global-nav-list > li.mega-menu[class*="current"] > a::before {
		width: 100%;
	}

	/* 開閉の印（開くと反転） */
	.device-pc .global-nav-list > li.mega-menu > a::after {
		content: "▾";
		display: inline-block;
		margin-left: 2px;
		font-size: 9px;
		vertical-align: middle;
		transition: transform .2s;
	}
	.device-pc .global-nav-list > li.mega-menu:hover > a::after {
		transform: rotate(180deg);
	}

	/* パネル：全幅・中身は最大1280px（左右80px）
	   閉じている間は高さ0のため、上下の余白は中の項目側に持たせる */
	.device-pc .global-nav-list > li.mega-menu > ul.sub-menu {
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		margin-left: 0;
		padding: 0 max(80px, calc((100% - 1280px) / 2));
		display: grid;
		grid-template-columns: max-content;
		justify-content: start;
		row-gap: 2px;
		background: var(--white);
		box-shadow:
			inset 0 3px 0 var(--blue),
			inset 0 -1px 0 #e0e0e0,
			0 8px 28px rgba(0, 0, 0, .12);
		text-align: left;
	}

	/* 子ページ（Overview なし）：1列、左に縦の区切り線（高さ80px） */
	.device-pc .global-nav-list > li.mega-menu > ul.sub-menu::before {
		content: "";
		position: absolute;
		top: 50%;
		right: auto;
		bottom: auto;
		left: max(80px, calc((100% - 1280px) / 2));
		width: 0;
		height: 80px;
		margin: -40px 0 0;
		border: 0;
		border-left: 1px solid #ddd;
		transform: none;
	}
	.device-pc .global-nav-list > li.mega-menu > ul.sub-menu > li {
		padding-left: 32px;
	}
	.device-pc .global-nav-list > li.mega-menu > ul.sub-menu > li:first-child {
		padding-top: 31px;
	}
	.device-pc .global-nav-list > li.mega-menu > ul.sub-menu > li:last-child {
		padding-bottom: 29px;
	}

	/* Lightning の子メニューの見た目を打ち消す */
	.device-pc .global-nav-list > li.mega-menu .sub-menu li a {
		display: block;
		padding: 8px 12px;
		border-bottom: 0;
		border-radius: 3px;
		background: transparent;
		color: #555;
		font-size: 16px;
		font-weight: 600;
		line-height: 21px;
		white-space: nowrap;
		transition: background-color .12s;
	}
	.device-pc .global-nav-list > li.mega-menu .sub-menu li a:hover,
	.device-pc .global-nav-list > li.mega-menu .sub-menu li a:focus-within {
		background: #f0ebfa;
		color: var(--blue);
	}
}