@charset "UTF-8";

/* =========================================================================
   column.css — コラム記事（長文）のための追加分
   -------------------------------------------------------------------------
   旧テーマ由来の CSS は 1 バイトも変えていない。
   コラム記事の本文（.news_detail）の中だけに効く指定をここに置く。

   なぜ必要か:
     layout.css は
       ・h1〜h6 の margin を 0 にしている（44 行目付近）
       ・ul li / ol li の list-style を none にしている（68 行目付近）
       ・strong / b の font-weight を normal にしている（80 行目付近）
     お知らせ 1 段落〜数段落なら問題にならないが、見出しで章を分ける
     長文のコラムでは、章の区切りも箇条書きも強調も画面上で判別できない。
     ここではそれを .news_detail の内側に限って戻している。

   記事の見出しの構造:
     h2 … 記事タイトル（旧テーマの information.css が水色の線を付ける）
     h3 … 章見出し
     h4 … 章の中の小見出し

   読み込むページ:
     コラム記事のみ（/information/wordpress-to-ai/ など）
     既存のお知らせ・コラムは読み込んでいないため見た目は変わらない。
   ========================================================================= */


/* 記事タイトル（.news_detail h2）の飾り線がはみ出す件は、同じ形の見出しが
   サイト全体にあるため a11y.css の (4) にまとめた。ここには置かない。 */


/* --- 章見出し ------------------------------------------------------------
   左に水色の線を立てて、記事タイトル（h2 は右に水色の線が伸びる）と
   区別できるようにしている。色は旧テーマの #00afdf。 */
.news_detail h3 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.6;
	color: #333333;
	margin: 46px 0 16px 0;
	padding-left: 14px;
	border-left: 4px solid #00afdf;
}
.news_detail h4 {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	color: #333333;
	margin: 30px 0 10px 0;
}

/* --- 箇条書き ------------------------------------------------------------
   list-style: none を戻す。padding-left は記号の分の字下げ。 */
.news_detail ul,
.news_detail ol {
	margin: 0 0 1.5em 0;
	padding-left: 1.6em;
}
.news_detail ul li {
	list-style: disc outside;
}
.news_detail ol li {
	list-style: decimal outside;
}
.news_detail ul li,
.news_detail ol li {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 0.4em;
}

/* --- 強調 ---------------------------------------------------------------- */
.news_detail strong,
.news_detail b {
	font-weight: 600;
}

/* --- 本文中のリンク ------------------------------------------------------
   旧テーマは a に色を付けないため、長文だとリンクが本文に埋もれる。 */
.news_detail p a,
.news_detail li a {
	text-decoration: underline;
}
.news_detail p a:hover,
.news_detail li a:hover {
	color: #001db3;
}

/* --- 図版 ----------------------------------------------------------------
   旧テーマには img の指定が 1 つも無く（WordPress が px 幅を直接
   書き出していたため）、幅の広い画像は狭い画面で本文からはみ出す。
   figure は layout.css の margin リセットの対象に入っていないので、
   ブラウザ既定の margin: 1em 40px を明示的に打ち消している。 */
.news_detail img {
	max-width: 100%;
	height: auto;
}
.column_figure {
	margin: 0 0 1.8em 0;
}
.column_figure img {
	display: block;
	width: 100%;
}
.column_figure figcaption {
	margin: 8px 0 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: #777777;
}
/* リード画像は本文の 1 段落目との間を少し広めに取る。 */
.column_hero {
	margin-bottom: 2.4em;
}


/* --- 署名 ---------------------------------------------------------------- */
.column_sign {
	margin: 50px 0 0 0;
	font-size: 14px;
	text-align: right;
}


/* --- 記事末尾の研修のご案内 ---------------------------------------------
   本文（背景 #f3f3f3）から浮かせるため白地にし、上辺だけ水色の線を引く。 */
.column_pr {
	margin: 50px 0 0 0;
	padding: 30px 36px 36px 36px;
	background-color: #ffffff;
	border-top: 4px solid #00afdf;
}
.column_pr h3 {
	margin-top: 24px;
}
.column_pr h3:first-child {
	margin-top: 0;
}
.column_pr .column_cta {
	margin: 26px 0 0 0;
	text-align: center;
}


/* --- スマートフォン ------------------------------------------------------ */
@media all and (max-width: 767px) {
	.news_detail h3 {
		font-size: 17px;
		margin: 36px 0 14px 0;
		padding-left: 10px;
	}
	.column_pr {
		padding: 24px 20px 28px 20px;
	}
}