@charset "UTF-8";

/**
 * Trytech Theme - Extras
 *
 * 旧サイトCSSに含まれていない、本WP化で追加した要素のスタイルのみ。
 * 旧サイトの style.css / trytech_style.css の後に読み込まれます。
 */

/* ============================================================
   言語スイッチャー（日本語/English）の統一スタイル
   静的HTMLとWordPress動的ページで見た目を同じにする
   ============================================================ */
/* 1220px以上（PC表示）: 右上に絶対配置 */
@media (min-width: 1220px) {
	#nav_lang {
		position: absolute;
		top: 16px;
		right: 30px;
		font-size: 0.9rem;
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
	}
	#nav_lang li {
		display: inline-block;
	}
	#nav_lang .nav-link {
		padding: 4px 10px;
		color: #000;
	}
	#nav_lang .nav-link.disabled {
		color: #808080;
	}
}

/* ============================================================
   ヘッダーが container 幅で中央寄せにならないよう、
   container-fluid を画面全幅にする
   旧style.cssの @media (min-width:1200px) で position:fixed が指定されているが、
   フォールバックとして全幅指定を強制
   ============================================================ */
#headmenu .container-fluid {
	width: 100%;
	max-width: 100%;
	background: #fff;
}

/* ============================================================
   PC表示時のヘッダーフォントサイズを旧サイトに合わせる
   ============================================================ */
@media (min-width: 1200px) {
	#nav_main .nav-link {
		font-size: 16px;
		padding: 0.5rem 1rem;
	}
	#nav_home .material-icons-outlined {
		font-size: 24px;
		color: #007bff;
	}
}

/* ============================================================
   ドロップダウンメニュー（マウスオーバー時）のフォント整形
   ============================================================ */
.dropdown-nav .dropdown-item {
	font-size: 14px;
	padding: 8px 16px;
	color: #212529;
}
.dropdown-nav .dropdown-item:hover {
	background: #f6faff;
	color: #007bff;
}

/* マウスオーバー時にドロップダウンを表示 */
@media (min-width: 1200px) {
	#nav_main .nav-item.dropdown:hover > .dropdown-nav {
		display: block;
	}
}

/* ============================================================
   ヘッダー領域とメインビジュアルの間隔調整
   #headmenu の height: 120px で既にヘッダー領域を確保しているため、
   メインビジュアル側に追加マージンは不要
   ============================================================ */
@media (min-width: 1200px) {
	body {
		padding-top: 0;
	}
	/* #home_carousel の上余白は不要。#headmenu の高さで自然に確保される */
}

/* ============================================================
   ニュースフィルター
   ============================================================ */
.news_filter {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.news_filter li a {
	display: inline-block;
	padding: 4px 16px;
	border: 1px solid #45a1f7;
	border-radius: 25px;
	color: #45a1f7;
	text-decoration: none;
	font-size: 90%;
	transition: all 0.3s ease;
}
.news_filter li a:hover,
.news_filter li.active a {
	background: #45a1f7;
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   ニュースメタ情報（詳細ページ）
   ============================================================ */
.news_meta {
	margin: 20px 0;
}
.news_meta time {
	margin-left: 10px;
	color: #666;
}

/* ============================================================
   ニュースカテゴリの色付け（旧style.css の news_IR を小文字スラッグでも適用）
   WordPressがスラッグを自動的に小文字化するため、news_ir として出力される
   ============================================================ */
.news_ir {
	display: inline-block;
	background: #1343bd;
	color: #fff;
	text-align: center;
	width: 6em;
	margin-right: 2em;
}
.news_media {
	display: inline-block;
	background: #394354;
	color: #fff;
	text-align: center;
	width: 6em;
	margin-right: 2em;
}

/* ============================================================
   ニュース一覧ページ（左サイドメニュー）レイアウト調整
   ============================================================ */
.page_news .container .row > aside.col-lg-3 {
	padding-top: 1em;
}
.page_news .container .row > article.col-lg-9 {
	padding-top: 0.5em;
}
.page_news .news_list {
	list-style: none;
	padding: 0;
	margin: 1em 0;
}
.page_news .news_list > li {
	padding: 0.8em 0;
	border-bottom: 1px solid #e5e5e5;
	line-height: 1.6;
}
.page_news .news_list > li:first-child {
	border-top: 1px solid #e5e5e5;
}
.page_news .page_title {
	font-size: 180%;
	font-weight: bold;
	margin-bottom: 0.5em;
}

/* ニュース一覧の各行: ラベル＋日付＋タイトル */
.page_news .news_list > li > span[class^="news_"] {
	display: inline-block;
	vertical-align: middle;
}
.page_news .news_list > li > a {
	color: #007bff;
	text-decoration: none;
	margin-left: 0.5em;
}
.page_news .news_list > li > a:hover {
	text-decoration: underline;
}

/* ============================================================
   動画エリア（タイトルと埋め込みの隙間を最小化・最終版）
   詳細度を上げて、style.css の .title_blue 影響を排除
   ============================================================ */
.col-md-7 div.movie_area,
.product-main div.movie_area,
div.movie_area {
	margin: 20px 0 0 0;
	padding: 0;
}
.col-md-7 div.movie_area:first-of-type,
div.movie_area:first-of-type {
	margin-top: 15px;
}
/* 動画タイトル: 高い詳細度で旧.title_blueの影響を完全排除 */
.col-md-7 .movie_area p.movie_title,
.product-main .movie_area p.movie_title,
.movie_area > p.movie_title,
p.movie_title {
	font-size: 100% !important;
	color: #3165b5 !important;
	font-weight: bold !important;
	margin: 0 0 4px 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	display: block !important;
}
.movie_area iframe,
.movie_area > iframe {
	max-width: 100% !important;
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	vertical-align: top !important;
}
/* wpautopによる空タグを除去 */
.movie_area > p:empty,
.movie_area > br,
.movie_area > br + br {
	display: none !important;
}

/* ============================================================
   キャッチコピー
   ============================================================ */
.catch {
	font-weight: bold;
	color: #45a1f7;
	margin-bottom: 15px;
}

/* ============================================================
   採用情報用テーブル間の余白
   ============================================================ */
.recruit_lead,
.recruit_extra {
	margin: 15px 0;
}

/* ============================================================
   ページネーション
   ============================================================ */
.pagination_wrap {
	margin: 30px 0;
}
.pagination_wrap .page-numbers {
	display: inline-block;
	padding: 6px 14px;
	margin: 0 3px;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #333;
	text-decoration: none;
}
.pagination_wrap .page-numbers.current,
.pagination_wrap .page-numbers:hover {
	background: #45a1f7;
	border-color: #45a1f7;
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   WordPress管理バー対策（管理者ログイン中の表示崩れ防止）
   ============================================================ */
.admin-bar #headmenu .container-fluid {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar #headmenu .container-fluid {
		top: 46px;
	}
}

/* ========================================================
   Contact Form 7 用カスタムスタイル（旧サイト準拠・修正版）

   旧サイトに合わせた配置:
   - ラベルはフィールドの上に配置（縦並び）
   - ラベルは normal weight（bold ではない）
   - 必須マークはラベルの右横
   ======================================================== */

/* ========================================================
   必須ラベル（赤バッジ）─ style属性で直書きしているので
   この CSS が無くても表示されるが、念のため定義
   ======================================================== */
.label-danger,
span.label-danger,
.label.label-danger,
.wpcf7 .label-danger,
.wpcf7 span.label-danger {
	color: #fff !important;
	background-color: #dc3545 !important;
	display: inline-block !important;
	padding: 0.25em 0.4em !important;
	font-size: 75% !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-align: center !important;
	white-space: nowrap !important;
	vertical-align: baseline !important;
	border-radius: 0.25rem !important;
}

.req {
	margin-left: 5px;
}

/* ========================================================
   フォーム全体のレイアウト（旧サイト準拠：ラベル上配置）
   ======================================================== */
.wpcf7 form {
	margin: 30px 0;
}

/* form-group: 縦並び（ラベルが上、フィールドが下） */
.wpcf7 .form-group {
	display: block;
	margin-bottom: 18px;
	padding-bottom: 0;
	border-bottom: none;
}

/* ラベル: 通常太さ、上配置 */
.wpcf7 .form-group .control-label,
.wpcf7 .form-group label.control-label {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin-bottom: 6px;
	font-weight: normal;
	text-align: left;
	line-height: 1.5;
	float: none;
}

/* 入力エリア: Bootstrap の col-md-X クラスを無効化 */
.wpcf7 .form-group > .col-md-8,
.wpcf7 .form-group > [class*="col-"] {
	display: block;
	width: 100%;
	max-width: 100%;
	flex: none;
	padding: 0;
	float: none;
}

/* ========================================================
   入力フィールド
   ======================================================== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ced4da;
	border-radius: 4px;
	background-color: #fff;
	font-size: 1rem;
	line-height: 1.5;
	color: #495057;
	box-sizing: border-box;
}

/* form-inline: 横並びにする小さなフィールド（郵便番号、TEL等） */
.wpcf7 .form-inline input[type="text"],
.wpcf7 .form-inline input[type="tel"] {
	width: auto;
	max-width: 300px;
}

/* フォーカス時 */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	outline: 0;
	border-color: #45a1f7;
	box-shadow: 0 0 0 0.2rem rgba(69, 161, 247, 0.25);
}

/* テキストエリア */
.wpcf7 textarea {
	min-height: 200px;
	resize: vertical;
}

/* セレクトボックス */
.wpcf7 select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 8px 10px;
	padding-right: 30px;
	appearance: none;
	-webkit-appearance: none;
}

/* ラジオボタン・チェックボックス */
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox {
	display: block;
}
.wpcf7 .wpcf7-list-item {
	display: inline-block;
	margin: 0 1em 0 0;
}
.wpcf7 .wpcf7-list-item-label {
	margin-left: 4px;
}

/* ファイル添付 */
.wpcf7 input[type="file"] {
	display: block;
	width: 100%;
	padding: 6px 0;
}

/* ========================================================
   送信ボタン
   ======================================================== */
.wpcf7 #mail-form-footer,
.wpcf7 .align_center {
	text-align: center;
	margin-top: 30px;
}

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	display: inline-block;
	background: #45a1f7;
	color: #fff;
	border: none;
	border-radius: 25px;
	padding: 12px 60px;
	font-size: 1.1rem;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	background: #1d2974;
}

.wpcf7 input[type="submit"]:disabled {
	background: #aaa;
	cursor: not-allowed;
}

/* ========================================================
   エラーメッセージ
   ======================================================== */
.wpcf7-not-valid-tip {
	color: #dc3545;
	font-size: 90%;
	margin-top: 4px;
}

.wpcf7 .wpcf7-response-output {
	margin: 20px 0;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 95%;
}

.wpcf7-mail-sent-ok {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.wpcf7-mail-sent-ng,
.wpcf7-aborted {
	background: #fff3cd;
	color: #856404;
	border: 1px solid #ffeeba;
}

/* スピナー（送信中） */
.wpcf7 .wpcf7-spinner {
	margin-left: 8px;
	vertical-align: middle;
}

/* WordPress標準入力欄を上書き */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}