@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 目次
** 1. 全体（ヘッダー・余白・リンク）
** 2. 共通パーツ（コンテンツ幅・見出し）
** 3. トップページの各セクション
**    社長挨拶 / 会社概要 / ニュース / 拠点 / 背景色
** 4. 記事ページ（投稿）
** 5. アーカイブ・一覧ページ
************************************/


/************************************
** 1. 全体
************************************/

/* ▼ PC ヘッダーナビ影 ▼ */
#header-container {
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
}
/* ▲ PC ヘッダーナビ影 ▲ */

/* ▼ コンテンツ左右・上の空きリセット ▼ */
.main {
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}
@media screen and (max-width: 834px) {
	main.main,
	div.sidebar {
		padding-left: 0;
		padding-right: 0;
	}
}
/* ▲ コンテンツ左右・上の空きリセット ▲ */

/* ▼ ヘッダーとコンテンツ間の空きを消す ▼ */
.no-sidebar .content .main {
	border-top: 0;
}
.content {
	margin-top: 0;
}
.entry-content {
	margin-top: 0;
}
/* ▲ ヘッダーとコンテンツ間の空きを消す ▲ */

/* ▼ 不要な表示を隠す（Cocoon標準のタイトル・日付） ▼ */
.entry-title,
.post-date,
.date-tags {
	display: none;
}
/* ▲ 不要な表示を隠す ▲ */

/* ▼ 追随ヘッダーナビでの被り回避 ▼ */
html {
	scroll-padding-top: 100px;
}
/* ▲ 追随ヘッダーナビでの被り回避 ▲ */

/* ▼ グローバルナビ ▼
   項目幅を文字数に合わせて自動にする（Cocoon初期値の固定幅を解除）。
   メニューが増えて収まらないときだけ2段目に回る。
   項目の間隔は padding の 24px で調整する */
#navi .navi-in > ul {
	flex-wrap: wrap;
	justify-content: center;
}
#navi .navi-in > ul > li {
	width: auto;
	min-width: 0;
}
#navi .navi-in > ul > li > a {
	padding: 0 24px;
	white-space: nowrap;
}
#navi .navi-in a:hover {
	color: #a0a0a0;
	text-decoration: none;
}
/* ▲ グローバルナビ ▲ */

/* ▼ 基本リンク色 ▼ */
a {
	color: #222;
	text-decoration: none;
}
a:link,
a:visited {
	color: #222;    /* 通常時・訪問済みの色 */
}
a:hover {
	color: #a0a0a0;    /* ホバー時の色 */
	text-decoration: underline;
}
/* ▲ 基本リンク色 ▲ */

/* ▼ リード ▼ */
#site-lead {
	margin: 40px auto 80px;
	text-align: center;
	font-size: 24px;
	font-weight: 500;
}
/* ▲ リード ▲ */

/* ▼ 見出しリセット ▼ */
.article h2 {
	background-color: transparent;
}
.article h3 {
	border-left: none;
	border-top: none;
	border-right: none;
	border-bottom: 1px dotted #235994;
	text-align: center;
	color: #235994;
}
.article h6 {
	padding: 0;
}
/* ▲ 見出しリセット ▲ */


/************************************
** 2. 共通パーツ
************************************/

/* ▼ コンテンツ横幅 ▼ */
.article .wrap_content {
	margin: 80px auto 0;
	width: 920px;
}
/* タブレット大 */
@media (min-width: 481px) and (max-width: 1023px) {
	.article .wrap_content {
		width: 80%;
	}
}
/* スマホ：見出しと中身の間は狭くする */
@media (max-width: 480px) {
	.article .wrap_content {
		width: 88%;
		margin-top: 40px;
	}
}
/* ▲ コンテンツ横幅 ▲ */

/* ▼ セクション見出し（.title_wrap） ▼ */
.article .title_wrap {
	margin: 120px auto 0;    /* セクション間の余白 */
	width: 100%;
}
.article .title_wrap h2 {
	padding: 0;
	position: relative;
	font-size: 30px;
	text-align: center;
}
.article .title_wrap h2:before {
	position: absolute;
	content: '';
	background: #235994;
	bottom: 0;
	width: 100px;
	height: 5px;
	left: 50%;
	top: 80px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
.article .title_wrap h2 span {
	padding-bottom: 16px;
	text-indent: 0;
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: #235994;
}
/* スマホ：セクション間の余白を狭くする（上のルールより後ろに置くことで上書き） */
@media screen and (max-width: 480px) {
	.article .title_wrap {
		margin-top: 48px;
	}
	/* 最初の見出し（社長挨拶）はヒーロー画像の直後なのでさらに狭く */
	#message {
		margin-top: 24px;
	}
}
/* ▲ セクション見出し ▲ */


/************************************
** 3. トップページの各セクション
************************************/

/* ▼ 社長挨拶 ▼ */
#msg_wrap {
	margin: 0 auto;
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#msg_text {
	width: 60%;
}
#president {
	width: 32%;
}
#president dl {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.article #president dl {
	margin-top: 15px;
}
.article #president dl dt {
	font-size: 16px;
}
.article #president dl dd {
	margin-left: 0;
	font-size: 20px;
	font-weight: bold;
}
@media screen and (max-width: 480px) {
	#msg_wrap {
		display: block;
	}
	#msg_text,
	#president {
		margin: 0 auto;
	}
	#msg_text {
		width: 96%;
	}
	#president {
		width: 80%;
	}
	.article #president dl dt {
		font-size: 14px;
	}
}
/* ▲ 社長挨拶 ▲ */

/* ▼ 会社概要（スマホ：表を縦積みにする） ▼ */
@media screen and (max-width: 480px) {
	/* テーブル全体をブロック要素にして、幅をいっぱいに広げる */
	.wp-block-table table,
	.wp-block-table tbody,
	.wp-block-table tr,
	.wp-block-table th,
	.wp-block-table td {
		display: block;
		width: 100% !important;
	}
	.wp-block-table table {
		border: none;
	}
	/* セル同士の間に少し隙間を作る */
	.wp-block-table tr {
		margin-bottom: 10px;
	}
	/* 見出しセルを目立たせる */
	.wp-block-table th {
		background-color: rgba(0, 0, 0, 0.1);
		padding: 10px;
		font-weight: bold;
	}
	.wp-block-table td {
		padding: 10px;
		text-align: center;
	}
	.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
		background-color: #fff;
	}
	/* 表の下の余白を、次のセクション見出しに任せる */
	.article .wp-block-table {
		margin-bottom: 0;
	}
}
/* ▲ 会社概要 ▲ */

/* ▼ ニュース一覧 ▼
   functions.php のショートコード [news_list count="3"] が出力する
   「日付＋カテゴリー枠＋タイトル」の1行リスト。
   投稿が増えても同じデザインで縦に並ぶ */
.article .news_wrap ul.news_list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #ddd;
	background-color: #f7f7f7;
}
.article .news_wrap ul.news_list li {
	margin: 0;
	padding: 22px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
	border-bottom: 1px solid #ddd;
}
.article .news_wrap ul.news_list li:hover {
	background-color: #fff;
}
.article .news_wrap ul.news_list time {
	flex-shrink: 0;
	min-width: 9em;
	font-size: 16px;
	color: #666;
}
.article .news_wrap .news_cat {
	flex-shrink: 0;
	min-width: 8em;
	padding: 3px 14px;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: #fff;
	background-color: #235994;
}
.article .news_wrap ul.news_list li a {
	font-size: 17px;
	font-weight: 500;
}
@media screen and (max-width: 480px) {
	.article .news_wrap ul.news_list li {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding: 18px 12px;
	}
	.article .news_wrap ul.news_list time {
		min-width: 0;
	}
	.article .news_wrap ul.news_list li a {
		width: 100%;
	}
}
/* ▲ ニュース一覧 ▲ */

/* ▼ 拠点 ▼
   ※ .acsess は旧スペル。HTMLを .access に直すまで両方を有効にしている */
.access_wrap {
	margin: 50px auto;
	width: 920px;
	display: flex;
	justify-content: space-between;
}
.map {
	width: 55%;
}
/* 地図のiframeを枠幅いっぱいにする（PCでのはみ出し対策） */
.map iframe {
	width: 100%;
	height: 450px;
	vertical-align: bottom;
}
.acsess,
.access {
	width: 40%;
}
.article .acsess dl dt,
.article .access dl dt {
	font-weight: 600;
}
.article .acsess dl dd,
.article .access dl dd {
	margin-left: 0;
}
@media screen and (max-width: 959px) {
	.access_wrap {
		width: 90%;
		display: block;
	}
	.map,
	.map iframe,
	.acsess,
	.access {
		width: 100%;
	}
	.map {
		text-align: center;
	}
}
/* ▲ 拠点 ▲ */

/* ▼ 背景色（セクションを囲む用） ▼ */
.bg_01,
.bg_02 {
	margin: 0 auto;
	padding: 1px 0 50px;
	width: 100%;
}
.bg_01 {
	background-color: #f0f0f0;
}
.bg_02 {
	background-color: #eaeff3;
}
/* ▲ 背景色 ▲ */


/************************************
** 4. 記事ページ（投稿）
************************************/

/* ▼ 本文の幅・ヘッダーとの間 ▼ */
.single .article {
	width: 92%;
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}
.single .content {
	margin-top: 24px;    /* ヘッダーの影が本文に隠れないようにする */
}
/* ▲ 本文の幅・ヘッダーとの間 ▲ */

/* ▼ タイトル・日付・アイキャッチ ▼ */
.single .article h2 {
	padding-left: 0;
	margin-bottom: 8px;
}
.single .article .nr-date {
	margin-top: 0;
	margin-bottom: 20px;
}
.single .eye-catch-wrap img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: none;
	margin: 0 auto;
}
/* ▲ タイトル・日付・アイキャッチ ▲ */

/* ▼ 記事ページ：カテゴリーのリンクを非表示 ▼
   【理由】ニュースはトップページ（/#news）の3件から記事へ入る導線にしており、
          記事下・写真上のカテゴリーリンクから、未整備のカテゴリー一覧へ
          飛ばしたくないため。
   【戻す時】記事が増えて、カテゴリー別一覧を整えたら、このブロックを削除する。
   【日付】2026-10-13 */
.single .entry-categories-tags,
.single .cat-label {
	display: none;
}
/* ▲ 記事ページ：カテゴリーのリンクを非表示 ▲ */
/* ▼ 記事本文内の追加画像 ▼ */
.single .entry-content figure.news-inline-image {
  width: 400px;
  max-width: 100%;
  margin: 32px auto;
}

.single .entry-content figure.news-inline-image img {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
}
/* ▲ 記事本文内の追加画像 ▲ */
/************************************
** 5. アーカイブ・一覧ページ
************************************/

/* ▼ 幅 ▼
   ※ カードの見た目（日付・抜粋の表示）は未整備。記事が増えたら整える */
.archive #main,
.blog #main {
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}
/* ▲ 幅 ▲ */