@charset "UTF-8";
/*
 * WordPress化に伴う最小限の差分スタイル
 *
 * ⚠️ 旧サイトから移植した theme-legacy.css / cont.css は無改変で保つ方針のため、
 *    「WP側の都合でどうしてもマークアップが変わる箇所」だけをここで補正する。
 * ⚠️ 画像は cont.css と同じ相対参照（images_cont/）を使うため、
 *    このファイルはテーマ直下に置くこと（css/ へ移すとパスが壊れる）。
 *
 * 読み込みは functions.php の dohmiya_enqueue_assets()（cont.css の後）。
 */

/* --------------------------------------------
   お問い合わせ完了画面（送信後）で左の縦書きタイトル画像がはみ出す問題

   cont.css の仕組み: 見出し(h2)は float:left・幅220px の縦書き画像で、
   隣の本文(.h2_inner)は float していない（margin-leftで隣に配置するだけ）。
   そのため .cont_contact の高さは .h2_inner の中身の高さだけで決まり、
   h2画像のほうが高いと下にはみ出してフッターと重なる。
   （.cont_contact h2.{contact_tl,request_tl,both_tl} の height 参照）

   通常の入力フォーム画面は本文が長いため問題にならないが、
   送信後の完了画面は本文が短く、はみ出しが発生する。
   旧サイトは送信後に別ページへ即リダイレクトしており、この「短い完了画面」
   という状態自体が存在しなかったため、旧CSSはこのケースを考慮していない。
   → 完了画面でも h2 画像と同じ高さを確保するよう min-height を補う。
--------------------------------------------- */
.cont_contact h2.contact_tl + .h2_inner { min-height: 263px; }
.cont_contact h2.request_tl + .h2_inner { min-height: 220px; }
.cont_contact h2.both_tl + .h2_inner    { min-height: 440px; }

/* --------------------------------------------
   the_content() は <p> を出力するため、旧サイトで <p class="xxx"> だった
   箇所を <div class="xxx"> に置き換えている。旧CSSは p.xxx で効かせているので
   同じ指定を div にも当てる。
--------------------------------------------- */

/* よくあるご質問の回答（旧: ul.faq_main p.answer） */
ul.faq_main div.answer {
	padding: 10px 10px 5px 60px;
	line-height: 1.7;
	background: url(images_cont/faq_a.gif) 20px 13px no-repeat;
}
ul.faq_main div.answer p {
	margin: 0 0 1em;
}
ul.faq_main div.answer p:last-child {
	margin-bottom: 0;
}

/* お客様の声の本文（旧: .voice_kobestu p.comment_txt） */
.voice_kobestu div.comment_txt {
	overflow: hidden;
}
.voice_kobestu div.comment_txt p {
	margin: 0 0 1em;
}
.voice_kobestu div.comment_txt p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------
   本文の段落間隔（堂宮コラム・新着情報）

   旧サイトは1つの <p> の中を <br /><br /> で区切って「1行空け」にしていた。
   WordPress では the_content() が段落ごとに <p> を出力するが、
   旧CSSのリセットで p{margin:0} のため詰まって見える。
   本文の line-height は 1.5 なので、空行1つ分＝1.5em を段落下に空けて
   旧サイトと同じ行間にする。
--------------------------------------------- */
.column_box p,
.news_box .inner p {
	margin-bottom: 1.5em;
}
.column_box p:last-child,
.news_box .inner p:last-child {
	margin-bottom: 0;
}

/* 見出しと本文1行目のあいだを1行空ける（旧サイトの見た目に合わせる） */
.column_box h3 {
	margin-bottom: 1.5em;
}

/* --------------------------------------------
   本文内で align="left" の画像の後に続く文章の位置

   旧サイトは画像のあとに <br /> を十数個入れて、次の文章を画像の下に送っていた。
   WordPress では the_content() が段落を <p> に分けるため、その <br> の連続が消え、
   フロートした画像の**右横**に次の文章が回り込んでしまう。
   段落ごとに回り込みを解除して、旧サイトと同じ「画像の次の行から」に戻す。

   ⚠️ .column_box / .news_box .inner 自体に新しいBFCを作ること（下の overflow:hidden）。
   このテーマは h2{float:left} + .h2_inner{margin-left:260px} という
   本来意図された2カラム構成（左に見出し画像、右に本文をmargin-leftで並べる）。
   BFCを作らずに clear:both を段落に効かせると、本文中の画像ではなく
   ページ見出し(h2)のfloatまで巻き込んで解除してしまい、その段落が
   見出しの高さ分（220〜240px）下に押し下げられる不具合になる
   （p:first-of-typeだけ除外する対症療法は、2番目の段落に同じ問題が移るだけで不十分だった）。
   overflow:hidden で新しいBFCを作ることで、clear:both の対象を
   「.column_box / .inner の中にある floatだけ」に限定できる。
--------------------------------------------- */
.column_box,
.news_box .inner {
	overflow: hidden;
}

.news_box .inner p,
.column_box p {
	clear: both;
}

/* --------------------------------------------
   お問い合わせフォームのエラー表示
   旧サイト（liaise）はエラーを別ページに出していたが、
   新サイトは入力画面の上にまとめて出すため専用の見た目を足す。
--------------------------------------------- */
.mail_form .form_errors {
	margin: 0 0 20px;
	padding: 12px 15px;
	border: 1px solid #c00;
	background: #fff5f5;
	color: #c00;
}
.mail_form .form_errors p {
	margin: 0 0 5px;
	font-weight: bold;
}
.mail_form .form_errors ul {
	margin: 0;
	padding-left: 1.4em;
	list-style: disc;
}
.mail_form .form_errors li {
	line-height: 1.7;
}

/* --------------------------------------------
   WPが自動付与するクラスの調整
--------------------------------------------- */

/* アイキャッチ・本文内画像がカラム幅を超えないように */
.mainColumn img {
	max-width: 100%;
	height: auto;
}

/* キャプション付き画像 */
.wp-caption {
	max-width: 100%;
}
.wp-caption-text {
	font-size: 13px;
	text-align: center;
}

/* 配置クラス（旧本文の align 属性の代替） */
.alignleft {
	float: left;
	margin: 0 15px 10px 0;
}
.alignright {
	float: right;
	margin: 0 0 10px 15px;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}