@charset "utf-8";

/* フリー教材（/opendoc/）の追加分。
   ページの外枠は旧テーマの layout.css と freeitem.css に任せている。
   ここで足すのは、アンケートの入力欄まわりだけ。

   入力欄は public/js/opendoc_form.js が parts/opendoc/*.html から
   実行時に差し込む。その中身は bulma のクラス（.field / .control /
   .input / .label / .button）で書かれているため、このページだけ
   bulma.min.css を layout.css より先に読み込んでいる。
   先に読むことで、見出しや本文などページ全体の体裁は layout.css が勝つ。 */

/* (1) 差し込み先の退避用。見た目には出さないが、要素自体は必要。
       消すとフォームが無言で壊れる（CLAUDE.md 参照）。
       bulma が div に display を当てても隠れたままにする。 */
[hidden] {
	display: none !important;
}

/* (2) アンケートの領域 */
.opendoc_form {
	margin-top: 10px;
}

/* parts/opendoc/form_head.html と form_body.html の中の見出し。
   「アンケート」「質問」が素のままだと本文と区別がつかない。 */
.freeitem_contents .opendoc_form h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 36px 0 12px;
	padding-left: 12px;
	border-left: 4px solid #00afdf;
	line-height: 1.5;
}
.freeitem_contents .opendoc_form h3:first-child {
	margin-top: 0;
}

.opendoc_form p {
	line-height: 1.8;
}

/* 個人情報の取り扱いの囲み（bulma の .message）。
   bulma の既定は青が強いので、サイトの色に寄せる。 */
.opendoc_form .message.is-info .message-header {
	background-color: #00afdf;
}
.opendoc_form .message.is-info .message-body {
	border-color: #00afdf;
	color: #555;
}

/* (3) 送信・戻るボタン。bulma の既定色をサイトの配色に合わせる */
.opendoc_form .button.is-info {
	background-color: #00afdf;
	border-color: #00afdf;
}
.opendoc_form .button.is-info:hover {
	background-color: #0090b8;
	border-color: #0090b8;
}
.opendoc_form .field.is-grouped.is-grouped-centered {
	margin-top: 36px;
}

/* (4) 狭い画面。bulma の .field.is-horizontal は 769px 未満で
       縦並びになるが、項目名と入力欄の間が詰まりすぎるので空ける。 */
@media all and (max-width: 768px) {
	.opendoc_form .field.is-horizontal {
		margin-bottom: 20px;
	}
	.opendoc_form .field-label {
		margin-bottom: 6px;
	}
}