@charset "utf-8";
/* カレンダー登録QRコード・ICSファイル作成 専用CSS
 * 読み込んでいるのは cgi/calendar-qr-code.php だけ。
 * ★変更したら参照側の ?v= を必ず上げる（CSSは30日キャッシュなので届かない）。
 *
 * ★素の要素セレクタ（body / button / h1 / input …）を書かないこと。
 *   このファイルはページ全体に読み込まれるので、ヘッダー・サイドバー・
 *   フッターまで巻き込む（CLAUDE.md B-13。実際に2ページで事故っている）。
 *   すべて #clqWrap の中に閉じてある。
 *
 * ★表組み・入力欄・プルダウン・チェックボックスの印は
 *   cgi/css/tool-form.css が #inputBlock の子孫に当てている。
 *   ここで同じものを書き直さない（二重管理になる）。
 *   上書きが要るところだけ **id を2つ**（#clqWrap #inputBlock）で書いて
 *   詳細度で勝たせる（共通側は .wrapper .block #inputBlock で id が1つ）。
 */

/* ---------- 入力欄の並べ方 ---------- */
#clqWrap .form-group {
	margin-bottom: 20px;
	font-size: 14px;
}

/* ★共通CSSの label は inline-block ＋ white-space:nowrap。
     入力欄の上に置く見出しとして使うので block ＋ 折り返しありに戻す。
     id を2つにしないと (0,1,2,1) に負ける。 */
#clqWrap #inputBlock .form-group > label,
#clqWrap #inputBlock .form-col > label {
	display: block;
	margin: 0 0 5px;
	font-weight: 700;
	white-space: normal;
}

#clqWrap .form-row-wrap {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

#clqWrap .form-col {
	display: flex;
	flex-direction: column;
	font-size: 14px;
}

#clqWrap .form-col.clq-col-wide {
	flex: 1 1 260px;
	min-width: 220px;
}

/* ---------- チェックボックスの行 ---------- */
/* 印そのものは tool-form.css が戻してくれる（17px・accent-color:#23ac38）。
   ★ただし共通CSSの label は white-space:nowrap なので、
     「ステルス（SSIDを公開していない）ネットワーク」のような長い文は
     スマホで画面からはみ出す。ここだけ折り返しありに戻す。 */
#clqWrap .clq-chk {
	display: flex;
	align-items: flex-start;
	margin-top: 10px;
}

#clqWrap #inputBlock .clq-chk label {
	margin: 0;
	font-weight: 400;
	white-space: normal;
	line-height: 1.5;
}

#clqWrap #inputBlock .clq-chk input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 2px;
}

/* 使われない欄を伏せるとき（終日を選んだ・繰り返さないとき） */
#clqWrap #inputBlock input:disabled {
	background-color: #eee;
	color: #999;
	border-color: #bbb;
}

/* ---------- 色の指定 ---------- */
/* ★contents.css の全体リセット（input に appearance:none / border:0）で
     色見本が平らな箱になり、幅と高さを指定しないと 0×0 で消える
     （CLAUDE.md B-8 と同じ形。チェックボックスだけの話ではない）。 */
#clqWrap #inputBlock input[type="color"] {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	width: 64px;
	height: 40px;
	padding: 2px;
	border: 2px solid #333;
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
}

/* ---------- プルダウンの矢印 ---------- */
/* ★矢印は select の ::after では出ない（select は置換要素なので
     擬似要素が描かれない）。包みの側に付ける。 */
#clqWrap .clq-select {
	position: relative;
	display: block;
	width: 100%;
}

#clqWrap .clq-select::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -3px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid #333;
	pointer-events: none;
}

/* 矢印と文字が重ならないだけの余白をとる */
#clqWrap #inputBlock .clq-select select {
	padding-right: 34px;
}

/* ---------- 作るボタン ---------- */
#clqWrap .clq-btn-wrap {
	margin: 0 0 10px;
	text-align: center;
}

/* ★共通CSSの .btn_form は float:left なので、中央に置くために解除する。
   ★幅はサイトの既存の変種 .btn_submit.long（240px）を使う。
     素の .btn_submit は 168px で、そこに左右24pxの padding を足すと
     box-sizing:border-box のため**中身が120pxしか残らない**。
     「QRコードを作る」の実測が**ちょうど120px**で、書体や丸めがわずかに
     変わるだけで2行に折り返す（2026-10-30 に利用者の画面で実際に折れた）。
   ★padding は足さない。足したぶん中身が減る。 */
#clqWrap .clq-btn-wrap .btn_form {
	float: none;
	margin: 0;
	white-space: nowrap;
}

/* ---------- 知らせ（エラー・警告） ---------- */
#clqWrap #clqMessages {
	margin: 16px 0 0;
}

#clqWrap .clq-msg {
	margin: 0 0 8px;
	padding: 12px 14px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.6;
}

#clqWrap .clq-msg-error {
	background-color: #fdecea;
	border-left: 5px solid #cc0000;
	color: #8a1c13;
}

#clqWrap .clq-msg-warn {
	background-color: #fff6e0;
	border-left: 5px solid #e8a33d;
	color: #7a5312;
}

/* ---------- 結果 ---------- */
#clqWrap #clqResultBlock {
	width: 100%;
	clear: both;
	margin-top: 20px;
}

#clqWrap #clqCodeOutput {
	margin: 20px 0;
	text-align: center;
}

#clqWrap #clqCodeOutput img {
	max-width: 100%;
	height: auto;
	border: 1px solid #ccc;
}

#clqWrap .clq-size-info {
	text-align: center;
	font-size: 13px;
	color: #666;
	margin: 0 0 10px;
}

/* ---------- QRコードとICSファイルの中身 ---------- */
#clqWrap .clq-ics-wrap {
	margin-top: 24px;
	padding: 14px 16px;
	background-color: #f5f7fa;
	border: 1px solid #dde3ea;
	border-radius: 4px;
}

#clqWrap .clq-ics-wrap h4 {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: #333;
}

/* ★pre なので、既定では折り返さずに横へ伸びる。
     iCalendar は十数行あり1行も長いので、折り返さないと
     親の幅をはみ出して**ページ全体に横スクロールが出る**。
     pre-wrap と anywhere の両方が要る（長い英数字の連なりは
     pre-wrap だけでは折れない）。 */
#clqWrap .clq-ics {
	margin: 0 0 8px;
	white-space: pre-wrap;
	max-height: 420px;
	overflow-y: auto;
	background: none;
	border: 0;
	padding: 0;
	font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
	font-size: 13px;
	line-height: 1.7;
	word-break: break-all;
	overflow-wrap: anywhere;
	color: #1a1a1a;
}

#clqWrap .clq-ics-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: #66707f;
}

/* ---------- 解説（親ページから使う図表） ---------- */
#clqGuide .clq-tbl-wrap {
	overflow-x: auto;
	margin: 12px 0 20px;
}

#clqGuide .clq-tbl {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 14px;
}

#clqGuide .clq-tbl th,
#clqGuide .clq-tbl td {
	padding: 10px 12px;
	border: 1px solid #dde3ea;
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
}

#clqGuide .clq-tbl th {
	background-color: #eef2f7;
	font-weight: 700;
	white-space: nowrap;
}

#clqGuide .clq-tbl code {
	font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
	font-size: 13px;
	word-break: break-all;
}

/* 書式の見本（左に太線を入れた枠） */
#clqGuide .clq-code {
	margin: 12px 0 20px;
	padding: 12px 16px;
	background-color: #f5f7fa;
	border-left: 5px solid #1e3a5f;
	font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
	font-size: 13px;
	line-height: 1.8;
	word-break: break-all;
	overflow-wrap: anywhere;
}

/* 注意の囲み */
#clqGuide .clq-note {
	margin: 12px 0 20px;
	padding: 12px 16px;
	background-color: #fff6e0;
	border-left: 5px solid #e8a33d;
	font-size: 14px;
	line-height: 1.7;
	color: #5a4312;
}

@media screen and (max-width: 600px) {
	#clqWrap .form-row-wrap { gap: 12px; }
	#clqWrap .form-col.clq-col-wide { flex: 1 1 100%; }
	#clqGuide .clq-tbl { min-width: 420px; }
}

/* ---------- ダウンロードのボタン ---------- */
/* ★共通CSSの `.lowerCommon .btn_form` は **float: left**。
     解除しないと、包み（#clqDownloadWrap）の高さが**0に潰れて**、
     次の「QRコードの中身」の枠がボタンに重なる（本番で実測）。
     2026-10-30 に `contact-qr-code` で発覚し、同じ作りのここも直した。 */
#clqWrap #clqDownloadWrap .btn_form {
	float: none;
	margin: 0;
	white-space: nowrap;
}

#clqWrap .clq-ics-wrap {
	clear: both;
}

/* ボタンを2つ縦に並べる。★包みごとに float を解除する（.btn_form は float:left）。
     1つ目だけ解除して2つ目を忘れると、2つ目だけ左に寄って重なる
     （CLAUDE.md の btn-float-check.js が見ているのと同じ形）。 */
#clqWrap .clq-dl-wrap {
	margin: 0 0 10px;
	text-align: center;
	overflow: hidden;
}

/* ★共通CSSの `.lowerCommon .btn_form` は **float: left**。
     解除しないと包みの高さが**0に潰れて**、次の「ICSの中身」の枠がボタンに重なる。
   ★`text-align: center` は float が効いている間は意味を持たない。
     解除して初めて中央に来る（CLAUDE.md B・btn-float-check.js）。 */
#clqWrap .clq-dl-wrap .btn_form {
	float: none;
	margin: 0;
	white-space: nowrap;
}

#clqWrap .clq-dl-wrap:last-child {
	margin-bottom: 0;
}

/* 終日のときだけ出す注記 */
#clqWrap .clq-note {
	margin: -8px 0 20px;
	font-size: 12px;
	line-height: 1.6;
	color: #66707f;
}