@charset "utf-8";


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込みAA
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");

/*フッター用css*/
@import url("footer.css");

/*メニューバー用css*/
@import url("menubar.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--primary-color: #fff;				/*主にテンプレートの背景色*/
	--primary-inverse-color: #323232;		/*primary-colorの対として使う色*/
	
	--accent-color: #323232;			/*テンプレートのアクセントとなる色*/
	--accent-inverse-color: #fff;		/*accent-colorの対として使う色*/

	--accent-color-rgb: 103,91,75;		/*accent-colorをrgb数値にしたもの。個別に透明度を調整して使い回す為のものです。*/

	--global-space: 10vw;				/*サイト内の余白の一括管理用。画面幅100%＝100vwです。*/
}



/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/* ================================ 
   ▼ 基本共通スタイル（モバイル基準）
   ================================ */

/* ----------------------------------------
   すべての要素（header内を除く）に box-sizing を border-box に設定。
   paddingやborderを含めて width を計算するようにする。
   ---------------------------------------- */
   body *:not(header):not(header *) {
	box-sizing: border-box;
  }
  
  /* ----------------------------------------
	 html と body の基本設定
	 ・フォントサイズ（13px：スマホ基準）
	 ・余白リセット
	 ・フォント指定
	 ・色、背景色の変数（:root で定義済み）を使用
	 ・フェードインアニメーション
	 ---------------------------------------- */
  html, body {
	font-size: 13px;
	font-family: "Shippori Mincho", "Hiragino Mincho Pro", serif;
	line-height: 2;
	margin: 0;
	padding: 0;
	color: var(--primary-inverse-color);
	background: var(--primary-color);
	animation: opa1 0.2s 0.5s both; /* 0.5秒後に0.2秒かけてフェードイン */
	-webkit-text-size-adjust: none; /* スマホの自動文字サイズ調整を無効化 */
	font-optical-sizing: auto;      /* フォントの太さ最適化 */
	font-weight: 400;               /* 標準の太さ */
	font-style: normal;             /* 通常の書体 */
  }
  
  /* ========================
	 ▼ リセット系スタイル
	 ======================== */
  
  /* ----------------------------------------
	 不要なマージン・パディングをリセット。
	 figure、dd、nav、ul、li、olなどに共通適用。
	 ---------------------------------------- */
  figure, dd, nav, ul, li, ol {
	margin: 0;
	padding: 0;
  }
  
  /* ----------------------------------------
	 ul・olリストの左マージンと下マージンを設定。
	 - 1.5rem：左インデント
	 - 1rem：下にスペースを空ける
	 ---------------------------------------- */
  ul, ol {
	margin-left: 1.5rem;
	margin-bottom: 1rem;
  }
  
  /* ----------------------------------------
	 nav内のulのリストマーカー（●など）を削除
	 ---------------------------------------- */
  nav ul {
	list-style: none;
  }
  
  /* ----------------------------------------
	 inputのフォントサイズを標準（1rem）に統一
	 ---------------------------------------- */
  input {
	font-size: 1rem;
  }
  
  /* ----------------------------------------
	 テーブルの罫線が二重にならないように collapse を指定
	 ---------------------------------------- */
  table {
	border-collapse: collapse;
  }
  
  /* ----------------------------------------
	 画像の初期スタイル：
	 - max-width: 親の幅を超えないように
	 - height: auto で比率を維持
	 - vertical-align: middle はinline要素との位置合わせ
	 ---------------------------------------- */
  img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
  }
  
  /* ----------------------------------------
	 video要素も画面に収まるように最大幅を設定
	 ---------------------------------------- */
  video {
	max-width: 100%;
  }
  
  /* ----------------------------------------
	 iframeも横幅100%にして、埋め込み時に飛び出さないように
	 ---------------------------------------- */
  iframe {
	width: 100%;
  }
  
/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: var(--primary-inverse-color);		/*リンクテキストの色。css冒頭のprimary-inverse-colorを読み込みます。*/
	transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}
a:hover {
	opacity: 0.8;	/*マウスオン時に色を80%にする*/
}
/*mainブロック
---------------------------------------------------------------------------*/
/*h2見出し*/
main h2 {
	position: relative;
	text-align: center;		/*テキストをセンタリング*/
	font-size: 2.5rem;		/*文字サイズ*/
	font-weight: normal;
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
}

/*h2の下が空きすぎるので続く要素がpもしくはh3の場合に少し上につめる*/
main h2 + p,
main h2 + h3 {
	margin-top: -4vw;
}

/*装飾用の小文字*/
main h2 .small {
	display: block;
	font-size: 0.6em;	/*文字サイズを親要素の50%に*/
	opacity: 0.5;		/*透明度。色が50%出た状態。*/
	padding:5px 0 20px;
}

/*h3見出し*/
main h3 {
	font-size: 1.4rem;		/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
}

/*list-free（レイアウトフリー用）
---------------------------------------------------------------------------*/
.list-free * {margin: 0;padding: 0;}

/*list-freeボックス*/
.list-free {
	display: flex;			/*直接の子要素を横並びに*/
    flex-direction: column;	/*一旦縦並びにしておく*/
	align-items: flex-start;/*子要素を上に揃える*/
	margin-bottom: 10vw;	/*ボックスの下（外側）に空けるスペース*/
	gap: 5vw;				/*子要素同士に空けるマージン的な要素。画面幅100%＝100vwです。*/
}

/*bg1背景の中にある最後のlist-freeの下マージンをなくす*/
.bg1 .list-free:last-of-type {
	margin-bottom: 0;
}

/*テキストブロック*/
.list-free .text {
    align-self: flex-start;
	flex: 1;
}

/*h3見出し*/
.list-free h3 {
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
	font-size: 1.5rem;		/*文字サイズを150%に*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	position: relative;	/*カギカッコを絶対配置する為に必要な指定*/
	padding: 0 1rem;	/*上下、左右へのh3内の余白*/
	margin: 0 auto;		/*左右の中央に配置*/
}

/*bg1背景の中にあるh3*/
.bg1 .list-free h3 {
	color: var(--accent-inverse-color);	/*文字色。css冒頭のaccent-inverse-colorを読み込みます。*/
}

/*h3見出しのカギカッコ装飾（共通設定）*/
.list-free h3::before,
.list-free h3::after {
	content: "";
	position: absolute;
	width: 20px;	/*カギカッコの幅。お好みで。*/
	height: 50px;	/*カギカッコの高さ。お好みで。*/
	border: 1px solid var(--primary-inverse-color);	/*枠線の幅、線種、varは色の事でcss冒頭で指定しているprimary-inverse-colorを読み込みます*/
}

/*bg1背景の中にあるh3*/
.bg1 .list-free h3::before,
.bg1 .list-free h3::after {
	border-color: var(--accent-inverse-color);	/*枠線の幅の上書き。css冒頭のaccent-inverse-colorを読み込みます*/
}

/*h3見出しの最初のカギカッコの設定*/
.list-free h3::before {
	top: -15px;		/*テキストからの距離。お好みで。*/
	left: -15px;	/*テキストからの距離。お好みで。*/
	border-right: none;		/*右の線は消す*/
	border-bottom: none;	/*下の線は消す*/
}

/*h3見出しの最後のカギカッコの設定*/
.list-free h3::after {
	bottom: -15px;	/*テキストからの距離。お好みで。*/
	right: -15px;	/*テキストからの距離。お好みで。*/
	border-left: none;	/*左の線は消す*/
	border-top: none;	/*上の線は消す*/
}

/*h4見出し*/
.list-free h4 {
	font-size: 1.3rem;
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	margin-bottom: 0.5em;
}

/*bg1背景の中にあるh4*/
.bg1 .list-free h4 {
	color: var(--accent-inverse-color);	/*文字色。css冒頭のaccent-inverse-colorを読み込みます。*/
}

/*画像ブロック*/
.list-free .image {
	box-shadow: 0px 10px 40px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.1は色が10%出た状態。。*/
}

/*画像ブロック内のdivタグ。テキストを囲むブロックです。*/
.list-free .image > div {
	background: var(--primary-inverse-color);	/*背景色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	color: var(--primary-color);				/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	font-size: 0.7rem;	/*文字サイズを70%*/
	padding: 1rem 2rem;	/*上下、左右への余白*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*list-freeボックス*/
	.list-free {
		flex-direction: row;	/*縦並びから横並びにする*/
	}
	
	/*h3見出し*/
	.list-free h3 {
		writing-mode: vertical-rl;	/*縦書きの指定。*/
		text-orientation: upright;	/*文字の向き*/
		padding: 1rem 0.5rem;	/*上下、左右へのh3内の余白*/
	}

	/*その他（汎用向け）お好みでもっと追加して使ってもOK*/
	.list-free .w1 {width: 30%;}
	.list-free .w2 {width: 50%;}
	.list-free .order1 {order: 1;}
	.list-free .order2 {order: 2;}
	.list-free .order3 {order: 3;}
	.list-free .mt1 {margin-top: 10vw;}
	.list-free .mt2 {margin-top: 20vw;}

	}/*追加指定ここまで*/


/*ボタン（btn）
---------------------------------------------------------------------------*/
.btn a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;		/*テキストをセンタリング*/
	background: var(--accent-color);	/*背景色。css冒頭のvar(accent-color)を読み込みます*/
	color: var(--accent-inverse-color);	/*文字色。css冒頭で指定しているaccent-inverse-colorを読み込みます*/
	padding: 0.5rem !important;		/*ボタン内の余白*/
	margin-top: 1rem !important;	/*ボタンの外（上）に空けるスペース*/
}


/*お知らせブロック
---------------------------------------------------------------------------*/
/* お知らせリスト全体 */
.news-item {
	background: #fff;              /* 背景を白 */
	border-radius: 10px;           /* 角を丸く */
	padding: 15px 20px;            /* 内側の余白 */
	margin-bottom: 20px;           /* 下に少し間を空ける */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* ほんのり影を付ける */
	transition: transform 0.2s ease, box-shadow 0.2s ease; /* マウス時にふわっと動かす用 */
  }
  
  /* ホバーしたときちょっと浮く演出 */
  .news-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

.news-header {
	display: flex;
	align-items: center;
	gap: 10px; /* 各項目の間隔 */
	flex-wrap: wrap; /* スマホ時折り返しOK */
	margin-bottom: 5px;
  }
  
  .news-date {
	color: #555;
	font-size: 1.2rem;
	white-space: nowrap;
  }
  
  /* タイトル枠 */
  .news-title-box {
	border: 2px solid var(--accent-color);
	border-radius: 6px;
	padding: 0.4rem 0.7rem;
	font-weight: bold;
	color: #222;
	text-align: center;
  }
  
  /* 内容テキスト */
  .news-content {
	font-size: 1.4rem;
	color: #444;
	text-align: left;
	line-height: 1.6;
  }
  
  /* プレビューボタン */
  .news-preview {
	text-align: right;
	font-size: 1.3rem;
  }
  
  .news-preview .btn {
	font-size: 0.9rem;
	padding: 4px 10px;
	border-radius: 6px;
  }
  
  /* カラーバッジ */
  /* 通常（青） */
.icon-bg1 {
	background: #007bff;  /* 明るめの青（Bootstrap標準） */
	color: #fff;
	border: none;
	padding: 0.4rem 0.7rem;
	border-radius: 4px;
  }
  
  /* 注意（黄） */
  .icon-bg2 {
	background: #ffc107;  /* 鮮やかな黄色 */
	color: #000;
	border: none;
	padding: 0.4rem 0.7rem;
	border-radius: 4px;
  }
  
  /* 重要（赤） */
  .icon-bg3 {
	background: #dc3545;  /* 赤 */
	color: #fff;
	border: none;
	padding: 0.4rem 0.7rem;
	border-radius: 4px;
  }
  
  /* 緊急（黒） */
  .icon-bg4 {
	background: #000;  /* 黒 */
	color: #fff;
	border: none;
	padding: 0.4rem 0.7rem;
	border-radius: 4px;
  }
  
  .carousel-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
  }
  
  .carousel-item {
	position: relative;
	display: none;
	float: left;
	width: 100%;
	transition: transform 0.6s ease-in-out;
  }
  
  .carousel-item.active {
	display: block;
  }
  
  /* 文章との間隔微調整 */
  .news-item .news-content {
	margin-top: 6px;
  }
  
  /* 画像全体のラッパー */
.news-images {
	display: flex;
	gap: 10px;
	margin: 10px 0;
	align-items: center;
	background: #fff;
  }
  
  .news-images img {
	width: 22%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
  }
  
  /* スマホ対応 */
  @media (max-width: 768px) {
	.news-images {
	  flex-wrap: wrap;
	}
  
	.news-images img{
	  width: 48%;
	  max-height: 250px;
	}
  }
/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 0.5rem 1rem;	/*ボックス内の余白*/
	background: var(--accent-color);		/*背景色*/
	color: var(--accent-inverse-color);	/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid #999;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 1rem;			/*テーブルの下に空けるスペース*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #999;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
}

	/*画面幅768px以上の追加指定*/
	@media screen and (min-width:768px) {

		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}

	}/*追加指定ここまで*/


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}

/*bg1背景
---------------------------------------------------------------------------*/
.bg1 {
	background: var(--accent-color);	/*背景色。css冒頭のaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。css冒頭のaccent-inverse-colorを読み込みます。*/
	padding: 80px 5%;		
}


/*bg2背景
---------------------------------------------------------------------------*/
.bg2 {
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒のことで0.2は色が20%出た状態。*/
	padding: 1.5rem;				/*ボックス内の余白。1.5文字分*/
}


/*marker（マーカー風スタイル）
---------------------------------------------------------------------------*/
.marker {
	display: inline-block;
	background: linear-gradient(transparent 80%, yellow 80%);
}

  
  
  
/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ffe400 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb5vw {margin-bottom: 5vw !important;}
.look {display: inline-block;padding: 0px 10px;background: #000;color: #fff;border-radius: 3px;margin: 5px 0; word-break: break-all;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅768px以上の追加指定*/
	@media screen and (min-width:768px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/