@charset "utf-8";

/* =========================================================================
 *
 * wp.css ― WordPress化にあたって追加したCSS
 *
 * 既存の destyle.css / main.css / style.css / sub.css には一切手を入れず、
 * 追加分だけをこのファイルにまとめている。
 * 元に戻すときは header.php からこの1行を外すだけでよい。
 *
 * 独自クラスにはプロジェクト固有の接頭辞 kjmk- を付けて既存クラスと衝突させない。
 * （.wp-pagenavi はプラグイン wp-pagenavi が出力する固定のクラス名）
 *
 *   1. 投稿本文（管理画面のエディタから入る内容） .kjmk-entry
 *   2. 前後記事ナビ                               .kjmk-newsNav
 *   3. ページ送り                                 .wp-pagenavi
 *
 * ========================================================================= */


/* =========================================================================
 * 1. 投稿本文
 *    destyle.css と main.css が p / ul / h* の margin を 0 にしているため、
 *    エディタで入力した内容が詰まって表示される。
 *    ここでは .kjmk-entry の中だけに余白を戻す。
 *    静的サイトの本文（news_s_box 内の <p class="mt60">）の見た目に合わせる。
 * ========================================================================= */

.kjmk-entry {
	font-size: 16px;
	line-height: 1.6em;
	letter-spacing: 0.08em;
	font-weight: 300;
	color: #333;
}

.kjmk-entry > *:first-child {
	margin-top: 0;
}

.kjmk-entry > *:last-child {
	margin-bottom: 0;
}

.kjmk-entry p {
	margin-bottom: 1.6em;
	line-height: 1.6em;
}

.kjmk-entry h2 {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.6;
	color: #195CD1;
	margin: 2.4em 0 0.8em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid #cccccc;
}

.kjmk-entry h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	color: #195CD1;
	margin: 2em 0 0.6em;
}

.kjmk-entry h4,
.kjmk-entry h5,
.kjmk-entry h6 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	margin: 1.8em 0 0.6em;
}

.kjmk-entry a {
	color: #195CD1;
	text-decoration: underline;
}

.kjmk-entry a:hover {
	opacity: 0.7;
}

.kjmk-entry strong,
.kjmk-entry b {
	font-weight: 700;
}

.kjmk-entry em,
.kjmk-entry i {
	font-style: italic;
}

.kjmk-entry ul,
.kjmk-entry ol {
	margin: 0 0 1.6em;
	padding-left: 1.6em;
}

.kjmk-entry ul {
	list-style: disc;
}

.kjmk-entry ol {
	list-style: decimal;
}

.kjmk-entry li {
	margin-bottom: 0.4em;
	line-height: 1.6em;
}

.kjmk-entry blockquote {
	margin: 0 0 1.6em;
	padding: 20px 24px;
	background: #EDF7FF;
	border-left: 3px solid #195CD1;
}

.kjmk-entry blockquote p:last-child {
	margin-bottom: 0;
}

.kjmk-entry img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.kjmk-entry figure {
	margin: 0 0 1.6em;
}

.kjmk-entry figure figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: #666;
}

.kjmk-entry .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.kjmk-entry .alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.kjmk-entry .alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.kjmk-entry .wp-caption {
	max-width: 100%;
}

.kjmk-entry table {
	width: 100%;
	margin: 0 0 1.6em;
	border-collapse: collapse;
}

.kjmk-entry table th,
.kjmk-entry table td {
	padding: 12px 16px;
	border: 1px solid #cccccc;
	line-height: 1.6em;
	vertical-align: top;
}

.kjmk-entry table th {
	background: #EDF7FF;
	font-weight: 700;
	text-align: left;
}

.kjmk-entry hr {
	border: none;
	border-bottom: 1px solid #cccccc;
	margin: 2em 0;
}

.kjmk-entry iframe,
.kjmk-entry video {
	max-width: 100%;
}


/* =========================================================================
 * 2. 前後記事ナビ（single.php）
 *    記事が無いときはリンクを消さず <span> に差し替えるので、
 *    3カラムの位置関係が崩れない。
 * ========================================================================= */

.kjmk-newsNav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.kjmk-newsNav-side {
	width: 25%;
}

.kjmk-newsNav-side--next {
	text-align: right;
}

.kjmk-newsNav-link {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	color: #195CD1;
	letter-spacing: 0.08em;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

.kjmk-newsNav-link .material-icons-outlined {
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

a.kjmk-newsNav-link:hover {
	opacity: 0.6;
}

.kjmk-newsNav-link.is-disabled {
	color: #cccccc;
	pointer-events: none;
}

.kjmk-newsNav-link.is-disabled .material-icons-outlined {
	color: #cccccc;
}


/* =========================================================================
 * 3. ページ送り（プラグイン wp-pagenavi）
 *    プラグインの「設定 → PageNavi」で出力されるマークアップに合わせている。
 *
 *      <div class="wp-pagenavi">
 *        <span class="pages">1 / 3</span>
 *        <a class="first">&laquo; 最初</a>
 *        <a class="previouspostslink">&laquo;</a>
 *        <span class="current">1</span>
 *        <a class="page larger">2</a>
 *        <span class="extend">...</span>
 *        <a class="nextpostslink">&raquo;</a>
 *        <a class="last">最後 &raquo;</a>
 *      </div>
 *
 *    プラグインが持っている pagenavi-css.css は
 *    「設定 → PageNavi → Use pagenavi.css」を OFF にしておくと衝突しない。
 *    ON のままでも、こちらの方が後に読み込まれるため上書きされる。
 * ========================================================================= */

.wp-pagenavi {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin-top: 60px;
	clear: both;
}

.wp-pagenavi a,
.wp-pagenavi span {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	min-width: 44px;
	height: 44px;
	margin: 6px 5px;
	padding: 0 10px;
	border: 1px solid #003591;
	background-color: #FFFFFF;
	color: #003591;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-decoration: none;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

.wp-pagenavi a:hover {
	background-color: #003591;
	color: #FFFFFF;
	opacity: 1;
}

.wp-pagenavi span.current {
	background-color: #003591;
	border-color: #003591;
	color: #FFFFFF;
	font-weight: 700;
}

/* 「1 / 3」表示。枠は付けない */
.wp-pagenavi span.pages {
	border: none;
	background: none;
	color: #333333;
	font-weight: 400;
}

/* 「…」。枠は付けない */
.wp-pagenavi span.extend {
	border: none;
	background: none;
	color: #003591;
	min-width: auto;
	padding: 0 4px;
}

/* 「« 最初」「最後 »」は文字数が多いので幅を緩める */
.wp-pagenavi a.first,
.wp-pagenavi a.last {
	padding: 0 16px;
}

@media screen and (max-width: 767px) {
	.wp-pagenavi {
		margin-top: 40px;
	}

	.wp-pagenavi a,
	.wp-pagenavi span {
		min-width: 38px;
		height: 38px;
		margin: 5px 4px;
		padding: 0 8px;
		font-size: 14px;
	}

	.wp-pagenavi a.first,
	.wp-pagenavi a.last {
		padding: 0 12px;
	}

	.wp-pagenavi span.pages {
		width: 100%;
		margin-bottom: 10px;
	}

	.kjmk-newsNav {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: column-reverse;
		        flex-direction: column-reverse;
	}

	.kjmk-newsNav .cmn-btn {
		margin-top: 30px;
	}

	.kjmk-newsNav-side {
		width: 100%;
		text-align: center;
		margin-top: 20px;
	}

	.kjmk-newsNav-side--next {
		text-align: center;
	}

	.kjmk-newsNav-link {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
}