@charset "UTF-8";
/*
Theme Name: PIAJ（日本フィジカルインターネットアカデミー）
Description: Cocoon を親テーマとする、日本フィジカルインターネットアカデミー（PIAJ）サイト用の子テーマ。見た目の微調整はこのファイルに記述する。
Template: cocoon-master
Author: KawasakiLab
Version: 1.0.0
Text Domain: piaj
*/

/* =========================================================
   協会サイト用の上書きスタイルはここに追記していく
   （親テーマ Cocoon のスタイルを継承したうえで調整する）
   ========================================================= */

/* =========================================================
   入会申込フォーム（CF7 / provision/join-form.txt）
   長い1列スクロールをやめ、セクション分け＋2カラムで
   入力しやすくするためのスタイル。.piaj-form 配下のみに効かせる。
   ========================================================= */
/* 主張しすぎない配色。青は送信ボタンと選択中の枠だけに使い、
   章番号はモノトーン、必須バッジは淡い赤にとどめる。
   フォームとニュースレター購読欄で共有するため :root に置く */
:root {
	--piaj-accent: #4a6b8a;
	--piaj-accent-dark: #3d5a75;
	--piaj-focus: rgba(74, 107, 138, .18);
	--piaj-ink: #4d4d4d;
	--piaj-line: #d4d7dc;
	--piaj-muted: #6b7280;
	--piaj-radius: 6px;       /* 入力欄・ボタン */
	--piaj-radius-box: 8px;   /* 選択カード・囲み */
	--piaj-req-bg: #f2e9e8;
	--piaj-req-fg: #8f4f48;
}

/* =========================================================
   共通部品（入力欄・送信ボタン）
   CF7 のフォームと MailPoet の購読欄は、どちらも「入力欄」と
   「送信ボタン」という同じ部品でできている。プラグインごとに同じ指定を
   書くと片方だけ直し忘れるため、見た目はここに一本化し、プラグインが
   吐くクラスはセレクタを併記して合流させるだけにする。
   幅・余白・文字サイズのように置き場所で変わるものだけ、各セクションで上書きする。
   ========================================================= */

.piaj-input,
.piaj-form input[type="text"],
.piaj-form input[type="email"],
.piaj-form input[type="tel"],
.piaj-form textarea,
.mailpoet_form input[type="email"],
.mailpoet_form input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: .6em .7em;
	border: 1px solid var(--piaj-line);
	border-radius: var(--piaj-radius);
	background: #fff;
	font-size: 16px; /* iOS で入力時に拡大されないサイズ */
	line-height: 1.5;
}

.piaj-input:focus,
.piaj-form input[type="text"]:focus,
.piaj-form input[type="email"]:focus,
.piaj-form input[type="tel"]:focus,
.piaj-form textarea:focus,
.mailpoet_form input[type="email"]:focus,
.mailpoet_form input[type="text"]:focus {
	outline: none;
	border-color: var(--piaj-accent);
	box-shadow: 0 0 0 3px var(--piaj-focus);
}

/* 枠は透明でも 1px 持たせる。入力欄と横に並べたときに高さが揃う */
.piaj-btn,
.piaj-form .wpcf7-submit,
.mailpoet_form .mailpoet_submit {
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: var(--piaj-radius);
	background: var(--piaj-accent);
	color: #fff;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color .15s;
}

.piaj-btn:hover,
.piaj-form .wpcf7-submit:hover,
.mailpoet_form .mailpoet_submit:hover {
	background: var(--piaj-accent-dark);
}

.piaj-form {
	max-width: 760px;
	margin: 0 auto;
	counter-reset: piaj-sec;
}

.piaj-form [hidden] {
	display: none !important;
}

/* --- セクション（fieldset）--- */
.piaj-form .piaj-sec {
	counter-increment: piaj-sec;
	margin: 0 0 1.5em;
	padding: 0;
	border: 0;
	min-width: 0; /* fieldset 内で grid が縮まないブラウザ挙動への対処 */
}

.piaj-form .piaj-sec__head {
	display: flex;
	align-items: center;
	gap: .5em;
	width: 100%;
	margin: 0 0 .6em;
	padding: 0 0 .5em;
	border-bottom: 1px solid var(--piaj-line);
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.4;
}

/* 章番号は手で書かず自動で振る。章を増減・並べ替えしても番号を直さなくてよい */
.piaj-form .piaj-sec__head::before {
	content: counter(piaj-sec);
	flex: none;
	color: var(--piaj-ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.piaj-form .piaj-sec__note {
	margin: 0 0 .9em;
	color: var(--piaj-muted);
	font-size: .85em;
	line-height: 1.6;
}

/* --- 必須／任意バッジ --- */
.piaj-form .piaj-badge {
	flex: none;
	margin-left: .5em;
	padding: .15em .5em;
	border-radius: 3px;
	background: #eef1f5;
	color: var(--piaj-muted);
	font-size: .7em;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .04em;
	vertical-align: middle;
}

.piaj-form .piaj-badge--req {
	background: var(--piaj-req-bg);
	color: var(--piaj-req-fg);
}

/* --- 入力欄のグリッド（6カラム基準）--- */
.piaj-form .piaj-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1em 1.1em;
}

.piaj-form .piaj-f {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
}

.piaj-form .piaj-f--full,
.piaj-form .piaj-corp { grid-column: span 6; }
.piaj-form .piaj-f--twothirds { grid-column: span 4; }
.piaj-form .piaj-f--half { grid-column: span 3; }
.piaj-form .piaj-f--third { grid-column: span 2; }

.piaj-form .piaj-f > label {
	display: flex;
	align-items: center;
	margin: 0 0 .35em;
	font-size: .87em;
	font-weight: 600;
	line-height: 1.4;
}

/* --- 入力欄（見た目は「共通部品」。ここは差分だけ）--- */
.piaj-form textarea {
	/* Cocoon が textarea に min-height を与えており、rows 指定が効かずに
	   間延びするため打ち消す */
	min-height: 0;
	height: 5.5em;
	resize: vertical;
}

.piaj-form input::placeholder,
.piaj-form textarea::placeholder {
	color: #a4acb9;
}

/* ラジオのすぐ下に入力欄が続く章（お問い合わせの「ご用件」など）の間隔 */
.piaj-form .wpcf7-form-control-wrap + .piaj-grid {
	margin-top: 1.1em;
}

/* --- 選択肢（ラジオ）をカード状に並べる --- */
.piaj-form .wpcf7-radio {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .7em;
}

.piaj-form .wpcf7-radio .wpcf7-list-item {
	margin: 0;
}

.piaj-form .wpcf7-radio .wpcf7-list-item > label {
	display: flex;
	align-items: center;
	gap: .55em;
	height: 100%;
	box-sizing: border-box;
	padding: .8em .9em;
	border: 1.5px solid var(--piaj-line);
	border-radius: var(--piaj-radius-box);
	background: #fff;
	font-size: .92em;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}

.piaj-form .wpcf7-radio .wpcf7-list-item > label:hover {
	border-color: var(--piaj-accent);
	background: #f6faff;
}

.piaj-form .wpcf7-radio .wpcf7-list-item > label:focus-within {
	border-color: var(--piaj-accent);
	box-shadow: 0 0 0 3px var(--piaj-focus);
}

.piaj-form .wpcf7-radio .wpcf7-list-item.is-selected > label {
	border-color: var(--piaj-accent);
	background: #eef5fd;
	box-shadow: inset 0 0 0 1px var(--piaj-accent);
}

.piaj-form .wpcf7-radio input[type="radio"] {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	margin: 0;
	accent-color: var(--piaj-accent);
}

/* --- 法人会員のときだけ出す追加欄 --- */
.piaj-form .piaj-corp {
	padding: .9em 1em 1.1em;
	border: 1px dashed var(--piaj-line);
	border-radius: var(--piaj-radius-box);
	background: #fafbfd;
}

.piaj-form .piaj-corp__note {
	margin: 0 0 .7em;
	color: var(--piaj-muted);
	font-size: .82em;
	line-height: 1.5;
}

/* --- スパム防止の簡易クイズ --- */
.piaj-form .piaj-quiz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .8em;
	margin: 1.2em 0 0;
}

.piaj-form .piaj-quiz__note {
	flex: 0 0 100%;
	color: var(--piaj-muted);
	font-size: .85em;
	line-height: 1.5;
}

/* CF7 は質問文と入力欄を label で包んで出力する */
.piaj-form .piaj-quiz label {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0;
	font-weight: 600;
	font-size: .95em;
}

.piaj-form .wpcf7-quiz-label {
	font-variant-numeric: tabular-nums;
}

.piaj-form input.wpcf7-quiz {
	width: 5em !important;
	text-align: center;
}

/* --- 送信 --- */
.piaj-form .piaj-submit {
	margin: 1.6em 0 .4em;
	text-align: center;
}

/* 見た目は「共通部品」。本文中の主要な操作なので、幅と文字だけ大きくする */
.piaj-form .wpcf7-submit {
	width: auto;
	min-width: 16em;
	padding: .85em 2.4em;
	font-size: 1.02em;
}

.piaj-form .piaj-submit__note {
	display: block;
	margin: .6em 0 0;
	color: var(--piaj-muted);
	font-size: .8em;
}

/* --- プライバシーポリシーへの同意 --- */
.piaj-form .piaj-consent {
	margin: 1.6em 0 0;
	font-size: .9em;
	line-height: 1.8;
	color: var(--piaj-ink);
}

.piaj-form .piaj-consent .wpcf7-list-item {
	margin: 0;
}

.piaj-form .piaj-consent a {
	color: var(--piaj-accent);
}

/* --- エラー表示 --- */
.piaj-form .wpcf7-not-valid-tip {
	margin-top: .3em;
	color: var(--piaj-req-fg);
	font-size: .8em;
}

.piaj-form .wpcf7-not-valid {
	border-color: var(--piaj-req-fg);
}

/* --- 狭い画面では1列に戻す --- */
@media screen and (max-width: 600px) {
	/* ほぼ1列に戻す。郵便番号だけは半分の幅にとどめ、
	   短い欄が画面幅いっぱいに間延びしないようにする */
	.piaj-form .piaj-f--full,
	.piaj-form .piaj-f--twothirds,
	.piaj-form .piaj-f--half {
		grid-column: span 6;
	}

	.piaj-form .piaj-f--third {
		grid-column: span 3;
	}

	.piaj-form .wpcf7-radio {
		grid-template-columns: minmax(0, 1fr);
		gap: .5em;
	}

	/* 画面が狭いぶん、余白と文字まわりを詰める */
	.piaj-form .piaj-sec {
		margin-bottom: 1.1em;
	}

	.piaj-form .piaj-sec__head {
		margin-bottom: .5em;
		padding-bottom: .4em;
	}

	.piaj-form .piaj-grid {
		gap: .7em .8em;
	}

	.piaj-form .wpcf7-radio .wpcf7-list-item > label {
		padding: .6em .75em;
	}

	.piaj-form .piaj-corp {
		padding: .7em .8em .8em;
	}

	.piaj-form .wpcf7-submit {
		width: 100%;
		min-width: 0;
	}
}

/* =========================================================
   Contact Form 7：送信中のローディング表示
   既定ではスピナーが送信ボタンの「外」（横幅いっぱいのボタンの場合は
   その下の左端）に離れて表示され、さらに非表示のあいだも領域を確保する
   ため、ボタンの中央寄せがずれたり下に余白が空いたりする。
   送信ボタンの中央に重ねる一般的な表示に置き換える。
   ========================================================= */

/* 送信中以外は領域を占有しない（ボタン下の余白・中央ずれを防ぐ） */
.wpcf7-form .wpcf7-spinner {
	display: none;
}

/* 基本形：ボタン直後に、上下中央をそろえて並べる。
   送信ボタンが段落で包まれていない独自マークアップでも破綻しない。 */
.wpcf7-form.submitting .wpcf7-spinner {
	display: inline-block;
	visibility: visible;
	margin: 0 0 0 12px;
	vertical-align: middle;
}

/* 送信ボタンが段落（CF7 の自動整形や .piaj-submit）で包まれている通常の形。
   その段落を基準にして、ボタンの中央にスピナーを重ねる。
   子結合子で「その段落の中のスピナー」だけに限定しているので、
   包む要素が無いフォームは上のインライン表示のままになる。 */
@supports selector(:has(*)) {
	.wpcf7-form p:has(> .wpcf7-submit) {
		position: relative;
	}

	.wpcf7-form.submitting p:has(> .wpcf7-submit) > .wpcf7-spinner {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 0;
		transform: translate(-50%, -50%);
	}

	/* 送信中はラベルを隠してスピナーだけを見せ、処理中であることを示す */
	.wpcf7-form.submitting p:has(> .wpcf7-submit) > .wpcf7-submit {
		color: transparent;
		cursor: progress;
	}
}

/* 入会申込フォームは濃い青のボタンなので、スピナーの配色を反転させる */
.piaj-form .wpcf7-spinner {
	background-color: #fff;
	opacity: 1;
}

.piaj-form .wpcf7-spinner::before {
	background-color: var(--piaj-accent);
}

/* =========================================================
   ニュースレター購読（MailPoet）
   サイドバーと、ニュース一覧の下（Cocoon の index-bottom）の両方で使う。
   素の MailPoet はボタンが淡い灰色の帯で押せると分かりにくいため、
   入力欄・ボタンはサイトのフォームと同じ見た目に揃える。
   MailPoet は #mailpoet_form_N 付きのCSSと style="width:100%" の
   インライン指定を吐くので、打ち消しに !important が要る。
   ========================================================= */

/* --- 入力欄とボタン（サイドバー／ニュース一覧下で共通）--- */
.mailpoet_form .mailpoet_paragraph {
	margin-bottom: .8em !important;
}

.mailpoet_form .mailpoet_paragraph:last-of-type {
	margin-bottom: 0 !important;
}

/* 見た目は「共通部品」。ここは MailPoet 固有の打ち消しと寸法だけ。
   MailPoet は入力欄・ボタンに style="width:100%" をインラインで吐くので
   !important でないと幅を制御できない */
.mailpoet_form input[type="email"],
.mailpoet_form input[type="text"] {
	width: 100% !important;
}

/* ボタンは入力欄と同じ幅・同じ高さにして、ひと続きの登録欄に見せる */
.mailpoet_form .mailpoet_submit {
	width: 100% !important;
	padding: .6em 2em;
	font-size: 16px;
}

/* =========================================================
   役員一覧の表（PIAJについて › 運営体制。content/about.html）
   役職の文言が長く氏名の列が圧迫されて「大森 峻一」が2行に折れるため、
   氏名は折り返さない。役職・所属は折り返してよい。
   ========================================================= */
.piaj-officers td:nth-child(2) {
	white-space: nowrap;
}

/* --- 囲み（サイドバー／ニュース一覧下で共通の見た目）--- */
.piaj-newsletter {
	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto;
	padding: 1.2em 1.3em 1.3em;
	border: 1px solid var(--piaj-line);
	border-radius: var(--piaj-radius-box);
	background: #f3f5f7;
}

/* 本文中は h2、サイドバーは h3。Cocoon がウィジェット見出しに付ける
   グレーの帯を打ち消して、囲みの中の小見出しとして見せる */
.piaj-newsletter h2,
.piaj-newsletter h3 {
	margin: 0 0 .35em;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.4;
}

.piaj-newsletter > p {
	margin: 0 0 .9em;
	color: var(--piaj-muted);
	font-size: .85em;
	line-height: 1.6;
}

/* 準備中の表示（functions.php）は登録フォームが無く、説明文で終わる */
.piaj-newsletter > p:last-child {
	margin-bottom: 0;
}

/* 入力欄とボタンを横並びにする。
   MailPoet はフォームの外側 div 自体を flex にしており、中の form が
   内容幅までしか伸びないので、まず幅いっぱいを使わせる。
   幅が足りないときは flex-wrap で自動的に縦積みに戻る。 */
.piaj-newsletter .mailpoet_form {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .5em;
}

/* 1つめの段落＝メールアドレス欄。余った幅を受け取る */
.piaj-newsletter .mailpoet_paragraph {
	flex: 1 1 8em;
	margin-bottom: 0 !important;
}

/* 2つめの段落＝登録ボタン。中身の幅だけ使う */
.piaj-newsletter .mailpoet_paragraph + .mailpoet_paragraph {
	flex: 0 0 auto;
}

.piaj-newsletter .mailpoet_submit {
	width: auto !important;
	min-width: 6.5em;
	padding: .6em 1.2em;
}

/* 送信後のメッセージは次の行に回す */
.piaj-newsletter .mailpoet_message {
	flex: 0 0 100%;
}

/* ニュース一覧の下に置くときだけ、記事一覧との間隔をあける */
.widget-index-bottom .piaj-newsletter {
	margin-top: 1em;
}