@charset "utf-8";

/*PC・タブレット・スマホ共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #333;
	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/*フォント種類*/
	font-size: 16px;
	/*文字サイズ*/
	line-height: 2;
	/*行間*/
	-webkit-text-size-adjust: none;
	background: #fff;
	/*背景色*/
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
li,
dl,
dt,
dd,
form,
figure,
form {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	font-weight: normal;
}

ul {
	list-style-type: none;
}

ol {
	padding-left: 40px;
	padding-bottom: 15px;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

table {
	border-collapse: collapse;
	font-size: 100%;
	border-spacing: 0;
}

iframe {
	width: 100%;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #333;
	/*リンクテキストの色*/
	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;
	/*同上*/
}

a:hover {
	color: #d46291;
	/*マウスオン時の文字色*/
	text-decoration: none;
	/*マウスオン時にリンクの下線を消す設定*/
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
	background: #fff url(../images/header_bg.jpg) no-repeat right center/50%;
	/*背景色*/
}

header .inner {
	height: 100px;
	/*ヘッダーの高さ*/
	position: relative;
}

/*ロゴ画像*/
#logo img {
	width: 320px;
	/*画像幅*/
	position: absolute;
	left: 3%;
	/*左から3%の場所に配置*/
	top: 30px;
	/*上から30pxの場所に配置*/
}

@media screen and (max-width: 768px) {
	#logo img {
		width: 300px;
		/*画像幅*/
	}
}

/*ロゴ右側のアイコン類*/
header .h-nav {
	position: absolute;
	margin-left: 3%;
	left: 340px;
	/*左から340pxの場所に配置。上のロゴの幅より少し大きな数字にすればOK。*/
	top: 34px;
	/*上から34pxの場所に配置*/
}

/*ロゴ右側のアイコン類（１個あたり）*/
header .h-nav li {
	float: left;
	margin-left: 10px;
	/*アイコン間の余白*/
}

/*ロゴ右側のアイコン類（画像）*/
header .h-nav li img {
	display: block;
	width: 30px;
	/*幅*/
	height: 30px;
	/*高さ*/
	background: #fff;
	/*背景色*/
	border-radius: 4px;
	/*角丸のサイズ。50%にすると正円になる。*/
}

/*文字サイズ変更ボタン（※文字サイズを「小」にした時の設定はchange.cssで行う）
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#fsize {
	position: absolute;
	right: 3%;
	/*ヘッダーブロックに対して右から3%の場所に配置*/
	top: 0px;
	/*ヘッダーブロックに対して上から0pxの場所に配置*/
	width: 230px;
	/*ブロック幅*/
	height: 50px;
	/*大小のボタン画像の高さに合わせる*/
	background: #fff url(../images/fsize_bg.png) no-repeat 15px center;
	/*背景色、虫眼鏡の背景画像読み込み*/
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.15は透明度15%の事。*/
	border-radius: 0px 0px 10px 10px;
	/*角丸のサイズ。左上、右上、右下、左下への順。*/
}

/*「文字サイズ」のテキスト*/
#fsize p {
	float: left;
	padding: 0 0 0 50px;
	color: #000;
	/*文字色*/
	line-height: 50px;
	font-size: 16px;
}

/*文字サイズボタン１個あたり*/
#fsize ul li {
	float: left;
	/*左に回り込み*/
}

#fsize ul a {
	overflow: hidden;
	display: block;
	text-indent: -9999px;
}

/*「小」ボタン設定*/
#fsize ul li#small a {
	background: url(../images/fsize_on.png) left center;
	/*背景画像として「小」を読み込む。これは「オフ」の状態。*/
	height: 50px;
	/*ボタン画像の高さ*/
	width: 40px;
	/*ボタン画像の幅*/
}

#fsize ul li#small a:hover {
	background: url(../images/fsize_on.png) left center;
	/*マウスオン時の背景画像。マウスオン用なので常に「オン」*/
}

/*「大」ボタン設定*/
#fsize ul li#large a {
	background: url(../images/fsize.png) right center;
	/*背景画像として「大」を読み込む。これは「オン」の状態。*/
	height: 50px;
	/*ボタン画像の高さ*/
	width: 50px;
	/*ボタン画像の幅*/
}

#fsize ul li#large a:hover {
	background: url(../images/fsize_on.png) right center;
	/*マウスオン時の背景画像。マウスオン用なので常に「オン」*/
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar {
	background: #091a71;
	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#0e28ac, #091a71);
	/*背景色。グラデーション*/
	overflow: hidden;
	padding-left: 3%;
}

#menubar ul {
	border-left: 1px solid #fff;
	/*左の線の幅、線種、色（古いブラウザ用）*/
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	/*左の線の幅、線種、色。255,255,255は白の事で0.3は透明度30%の事。*/
	overflow: hidden;
	margin: 10px 0px;
	letter-spacing: 0.2em;
}

/*メニュー１個あたりの設定*/
#menubar li {
	float: left;
}

#menubar li a {
	text-decoration: none;
	display: block;
	padding: 5px 20px;
	border-right: 1px solid #fff;
	/*右の線の幅、線種、色（古いブラウザ用）*/
	border-right: 1px solid rgba(255, 255, 255, 0.3);
	/*右の線の幅、線種、色。255,255,255は白の事で0.3は透明度30%の事。*/
	color: #fff;
	/*文字色*/
}

/*マウスオン時と、現在表示中メニュー*/
#menubar li a:hover,
#menubar li.current a {
	background: #fff;
	/*背景色*/
	color: #000;
	/*文字色*/
}

/*小さい端末用(画面幅800px以下)メニューを表示させない*/
#menubar-s {
	display: none;
}

/*３本バーアイコンを表示させない*/
#menubar_hdr {
	display: none;
}

/*パンくずナビ
---------------------------------------------------------------------------*/
#pan {
	margin-bottom: 15px;
}

#pan li {
	display: inline;
}

#pan li a {
	background: url(../images/arrow1.png) no-repeat right center;
	/*矢印画像の読み込み*/
	padding-right: 20px;
	margin-right: 10px;
}

/*コンテンツ（メイン、サブブロックを囲むボックス）
---------------------------------------------------------------------------*/
#contents {
	clear: both;
	margin: 0 auto;
	overflow: hidden;
	margin: 15px 10% 30px;
	/*上、左右、下へのボックス内の余白*/
}

@media screen and (max-width: 1500px) {
	#contents {
		margin-left: 3%;
		margin-right: 3%;
	}
}

/*トップページでのコンテンツ*/
#top #contents {
	margin-top: 30px;
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
/*メインコンテンツブロック*/
#main {
	float: right;
	/*右に回り込み*/
	width: 72%;
	/*ボックス幅*/
}

/*メインコンテンツのh2タグ*/
#main h2 {
	clear: both;
	margin-bottom: 20px;
	padding: 8px 20px;
	/*上下、左右への余白*/
	background: #091a71 url(../images/mark1.png) no-repeat right center;
	/*背景色と背景画像の読み込み（古いブラウザ用）*/
	background: url(../images/mark1.png) no-repeat right center, linear-gradient(#0e28ac, #091a71);
	/*背景画像の読み込みとグラデーション*/
	color: #fff;
	/*文字色*/
	font-weight: bold;
	font-size: 1.2em;
}

#main h2::first-letter {
	border-left: 3px solid #fff;
	/*左側のアクセントラインの幅、線種、色*/
	padding-left: 10px;
}

/*メインコンテンツのh3タグ*/
#main h3 {
	clear: both;
	margin-bottom: 20px;
	padding: 8px 20px;
	/*上下、左右への余白*/
	background-color: #ff8409;
	/*背景色（古いブラウザだとここの色のみが出ます）*/
	/*グラデーション*/
	background-image: -webkit-linear-gradient(#ff9831, #ff8409 100%);
	/*同上*/
	color: #fff;
	/*文字色*/
	font-weight: bold;
	font-size: 1.1em;
}

#main h3::first-letter {}

/*メインコンテンツの段落タグ*/
#main p {
	padding: 0px 20px 20px;
	/*上、左右、下への余白*/
}

#main h2+p,
#main h3+p {
	margin-top: -10px;
}

/*info.htmlに置いているボックス
---------------------------------------------------------------------------*/
/*各ボックスの設定（共通）*/
.list {
	background: #fff;
	/*背景色*/
	position: relative;
	overflow: hidden;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	/*影の設定。右へ、下へ、広げる幅、0,0,0は黒で0.2は透明度20%の事。*/
	margin: 0 20px 20px;
	/*ボックスの外に空けるスペース。上、左右、下の順。*/
	padding: 20px;
	/*ボックス内の余白*/
	border: 1px solid #ccc;
	/*枠線の幅、線種、色*/
}

/*ボックスにリンク指定をした場合の設定*/
.list a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	margin: -20px;
	/*上の.listのpaddingをリセットするために設定*/
	padding: 20px;
	/*ボックス内の余白*/
}

/*マウスオン時のボックス*/
.list a:hover {
	background: #fef8bf;
	/*背景色*/
}

/*画像の設定*/
.list img.img {
	float: left;
	/*画像を左に回り込み*/
	width: 25%;
	/*画像の幅*/
}

/*h4見出しタグの設定*/
.list h4 {
	color: #d46291;
	/*文字色*/
	font-size: 140%;
	/*文字サイズ*/
	margin-left: 27%;
	/*上の画像のwidthの数字より少しだけ大きくする。下の.list pと数字を揃える。*/
}

/*pタグの設定*/
.list p {
	padding: 0 !important;
	margin-left: 27%;
	/*上の画像のwidthの数字より少しだけ大きくする。上の.list h4と数字を揃える。*/
}

/*サブコンテンツ
---------------------------------------------------------------------------*/
/*メインコンテンツブロック*/
#sub {
	float: left;
	/*左に回り込み*/
	width: 24%;
	/*幅*/
}

/*subコンテンツ内のh2タグ設定*/
#sub h2 {
	color: #fff;
	/*文字色*/
	background: #333;
	/*背景色*/
	padding: 10px 15px;
	/*上下、左右へのボックス内の余白*/
}

/*navの直後にnavとh2が続いた場合と、navタグの直後にh2が続いた場合に、h2の上のラインを消す設定*/
#sub nav+nav h2,
#sub nav+h2 {
	border-top: none;
}

/*subコンテンツ内のpタグ設定*/
#sub p {
	padding: 15px;
}

/*サブコンテンツ内のメニュー
---------------------------------------------------------------------------*/
/*メニュー全体の設定*/
#sub ul.submenu {
	border-top: 1px solid #ccc;
	/*上の線の幅、線種、色*/
	margin-bottom: 20px;
}

/*h2タグの直後にsubmenuが入った場合にsubmenuの上のラインを消す設定*/
#sub h2+ul.submenu {
	border-top: none;
}

/*メニュー１個ごとの設定*/
#sub ul.submenu li a,
#sub ul.submenu li.none

/*20220121*/
	{
	text-decoration: none;
	display: block;
	padding: 5px 15px;
	/*メニュー内の余白*/
	border-bottom: 1px solid #ccc;
	/*下の線の幅、線種、色*/
	border-left: 1px solid #ccc;
	/*左の線の幅、線種、色*/
	border-right: 1px solid #ccc;
	/*右の線の幅、線種、色*/
}

/*マウスオン時*/
#sub ul.submenu li a:hover {
	background: #fef8bf;
	/*背景色*/
	color: #000;
	/*文字色*/
}

/*「>」マーク*/
#sub ul.submenu li a::before,
#sub ul.submenu li.none::before

/*20220121*/
	{
	display: block;
	float: left;
	/*右側に配置*/
	padding-right: 10px;
	content: ">";
	/*このテキストを表示させる。変更してもOKですが機種依存文字は使わないように。*/
	color: #ccc;
	/*文字色*/
}

/*マウスオン時の「>」マーク*/
#sub ul.submenu li a:hover::before {
	color: #000;
	/*文字色*/
}

/*subブロック内のアイコン類
---------------------------------------------------------------------------*/
#sub .h-nav {
	overflow: hidden;
}

/*アイコン類（１個あたり）*/
#sub .h-nav li {
	width: 29%;
	/*幅*/
	float: left;
	/*左に回り込み*/
	margin: 0 2% 20px;
	/*上、左右、下へのアイコンの外にとるスペース*/
}

/*アイコン類（画像）*/
#sub .h-nav li img {
	border-radius: 10px;
	/*角丸のサイズ*/
}

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
	clear: both;
}

#pagetop a {
	text-decoration: none;
	text-align: center;
	display: block;
	float: right;
	margin-right: 3%;
	color: #fff;
	/*文字色*/
	font-size: 20px;
	/*文字サイズ*/
	padding: 0px 30px;
	/*上下、左右へのボックス内余白*/
	background: #ff8409;
	/*背景色*/
	border-radius: 4px 4px 0px 0px;
	/*角丸のサイズ。左上、右上、右下、左下。*/
}

/*マウスオン時*/
#pagetop a:hover {
	background: #999;
	/*背景色*/
	color: #fff;
	/*文字色*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	background: #091a71;
	/*背景色*/
	color: #fff;
	/*文字色*/
	text-align: center;
}

footer a {
	color: #fff;
	text-decoration: none;
}

footer a:hover {
	color: #fff;
}

footer .pr {
	display: block;
	font-size: 80%;
}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
	padding-left: 15px;
	margin-bottom: 30px;
	height: 240px;
	/*高さ*/
	overflow: auto;
	/*高さの設定を超えるとスクロールが自動で出る設定。全部表示させていたいならこの行と上の行を削除。*/
}

/*日付設定*/
#new dt {
	font-weight: bold;
	/*太字にする設定。標準がいいならこの行削除。*/
	float: left;
	width: 8em;
}

/*記事設定*/
#new dd {
	padding-left: 8em;
}

/*テーブル ta1
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1 {
	width: 96%;
	margin: 0 2% 20px;
	background: #fff;
	/*背景色*/
}

.ta1,
.ta1 td,
.ta1 th {
	border: 1px solid #ccc;
	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;
	/*ボックス内の余白*/
	word-break: break-all;
}

/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;
	/*左よせ*/
	background: #eee;
	/*背景色*/
}

/*ta1の左側ボックス*/
.ta1 th {
	width: 140px;
	/*幅*/
	text-align: center;
	/*センタリング*/
}

/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img {
	width: 100%;
}

/*テーブル内でリストタグを使った場合の設定*/
.ta1 ul.disc {
	padding-bottom: 0;
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #f00;
	/*背景色*/
	color: #fff;
	/*文字色*/
	font-size: 70%;
	/*文字サイズ*/
	line-height: 1.5;
	padding: 0 5px;
	border-radius: 2px;
	margin: 0px 5px;
	display: inline-block;
	vertical-align: text-top;
}

/*お問い合わせページの緊急連絡先(TEL)用のボックス
---------------------------------------------------------------------------*/
.tel {
	border: 5px solid #ffc257;
	/*枠線の幅、線種、色*/
	padding: 20px !important;
	/*枠内の余白*/
	background: #fff1b9 url(../images/icon_tel.png) no-repeat 96% center;
	/*背景色、背景画像の読み込み、左から96%、天地中央に配置。*/
	margin-bottom: 20px;
	/*ボックス下に空けるスペース*/
}

/*その他
---------------------------------------------------------------------------*/
.look {
	color: #fff;
	background: #666;
	padding: 5px;
	border-radius: 4px;
}

.mb15,
.mb1em {
	margin-bottom: 15px;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb50 {
	margin-bottom: 50px !important;
}

.mbnone {
	margin-bottom: 0px !important;
}

.mt15,
.mt1em {
	margin-top: 15px;
}

.mt30 {
	margin-top: 30px !important;
}

.mt50 {
	margin-top: 50px !important;
}

.mtnone {
	margin-top: 0px !important;
}

.clear {
	clear: both;
}

ul.disc {
	padding: 0em 25px 1em;
	list-style: disc;
}

.color1 {
	color: #ff0000;
}

.pr {
	font-size: 10px;
}

.wl {
	width: 96%;
}

.ws {
	width: 50%;
}

.w30p {
	width: 30%;
}

.c {
	text-align: center !important;
}

.r {
	text-align: right !important;
}

.l {
	text-align: left !important;
}

.fr {
	float: right;
	margin-left: 3%;
	margin-bottom: 15px;
}

.fl {
	float: left;
	margin-right: 3%;
	margin-bottom: 15px;
}

.big1 {
	font-size: 30px;
	letter-spacing: 0.2em;
}

.mini1 {
	font-size: 11px;
}

.sh {
	display: none;
}

.dn {
	display: none;
}

.p0 {
	padding: 0 !important;
}

.frame1 {
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	border: 5px solid #fff;
}

.banner {
	padding: 0px !important;
	margin-bottom: 20px;
}

.bold {
	font-weight: bold;
}

.maru {
	border-radius: 10px;
}

.img28 {
	height: 283px;
}

/* 透過用ロールオーバー用 */
.hover {
	transition: opacity 0.2s;
}

.hover:hover {
	opacity: 0.7;
}

/* youtube */
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* テーブルの設定 */
@media screen and (max-width: 1300px) {
	.table-scroll {
		overflow: auto;
		/*スクロールさせる*/
		white-space: nowrap;
		/*文字の折り返しを禁止*/
	}

	.table-scroll table {}

	.table-scroll table th,
	.table-scroll table td {
		font-weight: normal;
		border-right: #ccc solid 1px;
		border-bottom: #ccc solid 1px;
		font-size: 12px;
	}

	.table-scroll::before {
		content: "この表は横にスクロールできます。";
		color: #f00;
	}
}

.table-design01 {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.table-design01 tr:nth-child(2n + 1) {
	background: #f0fbff;
}

.table-design01 th {
	padding: 10px;
	background: #778ca3;
	border-right: solid 1px #778ca3;
	color: #ffffff;
}

.table-design01 th:last-child {
	border-right: none;
}

.table-design01 td {
	padding: 10px;
	border-right: solid 1px #778ca3;
}

.table-design01 td:last-child {
	border-right: none;
}

@media screen and (max-width: 1300px) {

	.table-design01 th,
	.table-design01 td {
		font-size: 12px;
	}
}

/*リスト1*/
ul.iconlist1 {
	counter-reset: list;
	list-style-type: none;
	padding: 0 10px 10px 10px;
}

ul.iconlist1 li {
	position: relative;
	padding: 0 0 0 20px;
	margin: 0 0 7px 0px;
	line-height: 25px;
}

ul.iconlist1 li:before {
	counter-increment: list;
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	height: 15px;
	width: 15px;
	border-radius: 50%;
	background: #f7b400;
	top: 50%;
	transform: translateY(-50%);
}

ul.iconlist1 li:after {
	content: "";
	display: block;
	position: absolute;
	left: 6px;
	height: 0;
	width: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid #fff;
	top: 50%;
	transform: translateY(-50%);
}

/*リスト2*/
ul.iconlist2 {
	counter-reset: list;
	list-style-type: none;
	padding: 0 10px 10px 10px;
}

ul.iconlist2 li {
	position: relative;
	padding: 0 0 0 20px;
	margin: 7px 0 7px 0px;
	line-height: 30px;
	border-bottom: dashed 1px #cccccc;
}

ul.iconlist2 li:before {
	counter-increment: list;
	content: "";
	display: block;
	position: absolute;
	left: 0px;
	height: 15px;
	width: 15px;
	border-radius: 50%;
	background: #333;
	top: 50%;
	transform: translateY(-50%);
}

ul.iconlist2 li:after {
	content: "";
	display: block;
	position: absolute;
	left: 6px;
	height: 0;
	width: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid #fff;
	top: 50%;
	transform: translateY(-50%);
}

ul.iconlist2 li a {}

/*リスト3*/
ul.iconlist3 {
	padding: 0.5em 0.2em 0.5em 1.2em;
	position: relative;
}

ul.iconlist3 li {
	line-height: 20px;
	padding: 0.5em 0;
	list-style-type: none !important;
}

ul.iconlist3 li:before {
	content: "●";
	position: absolute;
	left: 1em;
	/*左端からのアイコンまで*/
	height: 10px;
	color: #666;
	/*アイコン色*/
	font-size: 5px;
}

/*数字リスト*/

ol.list_number {
	padding: 0.3em 0.5em;
	list-style-type: none;
	border: none;
	counter-reset: number;
}

ol.list_number li {
	position: relative;
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.6em;
}

ol.list_number li:before {
	position: absolute;
	font-family: "Quicksand", sans-serif;
	content: counter(number);
	counter-increment: number;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ee8992;
	color: white;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	line-height: 22px;
}

/*枠*/
.box01 {
	position: relative;
	margin: 3em 0;
	padding: 0.5em 1em;
	border: solid 3px #ee8992;
}

.box01 .box-title {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #ee8992;
	color: #ffffff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}

.box01 p {
	margin: 15px 0 0;
	padding: 0;
}

/* 画像横並び */
.row {
	display: flex;
	flex-wrap: wrap;
}

.row.jc_sb {
	justify-content: space-between;
}

.row.jc_c {
	justify-content: center;
}

.row.jc_fe {
	justify-content: flex-end;
}

.row.ai_c {
	align-items: center;
}

.row .col.grid1of2 {
	margin-right: 5.08%;
	width: 47.458%;
}

.row .col.grid1of2:nth-child(even) {
	margin-right: 0;
}

@media screen and (max-width: 768px) {
	.row .col.grid1of2 {
		margin-top: 20px;
		margin-right: 0;
	}

	.row .col.grid1of2:first-child {
		margin-top: 0;
	}
}

.row .col.grid1of3 {
	margin-right: 4.237%;
	width: 30.509%;
}

.row .col.grid1of3:nth-child(3n) {
	margin-right: 0;
}

@media screen and (max-width: 768px) {
	.row .col.grid1of3 {
		margin-top: 20px;
		margin-right: auto;
		margin-left: auto;
	}

	.row .col.grid1of3:nth-child(1) {
		margin-top: 0;
	}

	.row .col.grid1of3:nth-child(3n) {
		margin-right: auto;
	}

	.row .col.grid1of3 img {
		width: 100%;
	}
}

.row .col.grid1of3-2 {
	margin-right: 4.237%;
	width: 30.509%;
	margin-bottom: 10px;
}

.row .col.grid1of3-2:nth-child(3n) {
	margin-right: 0;
}

@media screen and (max-width: 768px) {
	.row .col.grid1of3-2 {
		margin-right: 1% !important;
		width: 49.458% !important;
	}

	.row .col.grid1of3-2:nth-child(even) {
		margin-right: 0 !important;
	}
}

.row .col.grid1of4 {
	margin-right: 3.37%;
	width: 22.458%;
}

.row .col.grid1of4:nth-child(4n) {
	margin-right: 0;
}

@media screen and (max-width: 768px) {
	.row .col.grid1of4 {
		margin-top: 20px;
		margin-right: 0;
	}

	.row .col.grid1of4:nth-child(1) {
		margin-top: 0;
	}

	.row .col.grid1of4 img {
		width: 100%;
	}
}

.row .col.grid1of5 {
	margin-right: 20px;
	width: 184px;
}

.row .col.grid1of5:nth-child(5n) {
	margin-right: 0;
}

@media screen and (max-width: 768px) {
	.row .col.grid1of5 {
		margin-right: 0;
	}

	.row .col.grid1of5 img {
		width: 100%;
	}

	.row .col.grid1of5.sp_grid1of2 {
		margin-right: 3%;
		width: 48.5% !important;
	}

	.row .col.grid1of5.sp_grid1of2:nth-child(even) {
		margin-top: 3%;
		margin-right: 0;
	}

	.row .col.grid1of5.sp_grid1of2:nth-child(odd) {
		margin-top: 3%;
	}

	.row .col.grid1of5.sp_grid1of2:first-child,
	.row .col.grid1of5.sp_grid1of2:nth-child(2) {
		margin-top: 0;
	}
}

.row .col.gridmain {
	width: 780px;
}

.row .col.gridmain .grid1of2 {
	margin-right: 36px;
	width: 372px;
}

.row .col.gridmain .grid1of2:nth-child(even) {
	margin-right: 0;
}

.row .col.gridmain .grid1of2 img {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.row .col.gridmain .grid1of2 {
		margin: 0;
	}

	.row .col.gridmain .grid1of2:first-child {
		margin-top: 0;
	}
}

@media screen and (max-width: 768px) {
	.row .col.gridmain {
		width: 100%;
	}
}

.row .col.gridside {
	width: 300px;
}

@media screen and (max-width: 768px) {
	.row .col.gridside {
		width: 100%;
	}
}

.row .col.gridfull {
	width: 100%;
}

@media screen and (max-width: 768px) {
	.row .col {
		width: 100% !important;
	}

	.row .col .noreset {
		width: inherit !important;
	}

	.row .col.sp_half {
		margin-right: 4%;
		width: 48% !important;
	}

	.row .col.sp_half:nth-child(even) {
		margin-right: 0;
	}
}

/*FAQ*/
.qaContainer dt {
	padding: 10px 10px 10px 35px;
	border-radius: 5px;
	background: #f0f7e1;
	text-indent: -25px;
}

.qaContainer dt:before {
	content: "Q.";
	font-weight: bold;
	margin-right: 7px;
}

.qaContainer dd {
	margin: 20px 10px 40px 35px;
	text-indent: -25px;
}

.qaContainer dd:before {
	content: "A.";
	color: #8cb134;
	font-weight: bold;
	margin-right: 7px;
}

/* 透過用ロールオーバー用 */
.hover:hover {
	-moz-opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: alpha(opacity=60);
	opacity: 0.6;
	transition: all 0.3s;
}

/*ボタン*/
a.btn_blue {
	display: block;
	max-width: 350px;
	margin: 0 auto;
	padding: 1rem 2.2rem;
	background-color: #b7dbff;
	border-radius: 8px;
	box-sizing: border-box;
	text-decoration: none;
	transition: 0.3s;
}

a.btn_blue span.bl__text {
	display: block;
	position: relative;
	color: #000;
	font-size: 16px;
	text-align: center;
	padding-left: 30px;
}

a.btn_blue span.bl__text:before {
	content: "";
	width: 20px;
	height: 20px;
	background: #ffffff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}

a.btn_blue span.bl__text:after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 3px solid #b7dbff;
	border-right: 3px solid #b7dbff;
	box-sizing: border-box;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	left: 5px;
	bottom: 0;
	margin: auto;
	transition: 0.3s;
}

a.btn_blue:hover {
	background-color: #a4d1ff;
	color: #fff !important;
}

a.btn_blue:hover span.bl__text:after {
	border-top: 3px solid #a4d1ff;
	border-right: 3px solid #a4d1ff;
}

@media (max-width: 736px) {
	a.btn_blue {
		max-width: 350px;
		padding: 1rem 2.2rem;
		margin-bottom: 20px;
	}

	a.btn_blue span.bl__text {
		font-size: 16px;
	}
}

/*お問い合わせ
---------------------------------------------------------------------------*/

span.hissu {
	color: #fff;
	background-color: #930;
	padding: 0 3px 1px 3px;
	font-size: 0.8em;
	margin-left: 5px;
	border-radius: 3px;
	/* CSS3草案 */
	-webkit-border-radius: 3px;
	/* Safari,Google Chrome用 */
	-moz-border-radius: 3px;
	/* Firefox用 */
}

/*inputボタン
---------------------------------------------------------------------------*/
input {
	font-size: 16px;
	line-height: 150%;
}

input[type="submit"],
input[type="button"],
input[type="reset"] {
	width: 250px;
	/*ボタン幅*/
	padding: 10px;
	/*ボタン内の余白*/
	margin-bottom: 20px;
	border: none;
	border-radius: 10px;
	/*角丸のサイズ*/
	background-color: #f90;
	/*背景色（古いブラウザだとここの色のみが出ます）*/
	color: #fff;
	/*文字色*/
	font-size: 16px;
	/*文字サイズ*/
	letter-spacing: 0.1em;
	/*文字間隔を少し広めにとる設定。*/
}

/*ボタンのマウスオン時の設定*/
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	background-color: #dd6f00;
}

textarea {
	font-size: 16px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/*フォント種類*/
}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 800px) {

	/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
	header {
		border-bottom: 1px solid #999;
	}

	/*ロゴ右側のアイコン類*/
	header .h-nav {
		display: none;
		/*非表示にする*/
	}

	/*文字サイズ変更ボタン（※文字サイズを「小」にした時の設定はchange.cssで行う）
---------------------------------------------------------------------------*/
	/*ボタンブロック全体*/
	#fsize {
		right: 13%;
		/*ヘッダーブロックに対して右から13%の場所に配置*/
		top: 24px;
		/*ヘッダーブロックに対して上から24pxの場所に配置*/
		width: 180px;
		/*ブロック幅*/
		border-radius: 10px;
		/*角丸のサイズ*/
	}

	#fsize span {
		display: none;
	}

	/*メインメニュー
---------------------------------------------------------------------------*/
	/*メニューブロックの設定*/
	#menubar-s {
		display: block;
		/*小さい端末用(画面幅800px以下)メニューを非表示から表示に切り替える*/
		background: #091a71;
		/*背景色*/
		overflow: hidden;
	}

	/*メニュー１個あたりの設定*/
	#menubar-s li {
		float: left;
		width: 50%;
		/*幅*/
	}

	#menubar-s li a {
		text-decoration: none;
		display: block;
		text-align: center;
		line-height: 50px;
		/*行間（高さ）*/
		color: #fff;
		/*文字色*/
		border-bottom: 1px solid #fff;
		/*下の線の幅、線種、色*/
		border-right: 1px solid #fff;
		/*右の線の幅、線種、色*/
	}

	/*偶数番目のメニュー*/
	#menubar-s li:nth-child(even) a {
		border-right: none;
		/*右の線を消す*/
	}

	/*大きな端末用(画面幅801px以上)メニューを非表示にする*/
	#menubar {
		display: none;
	}

	/*３本バーアイコン設定
---------------------------------------------------------------------------*/
	/*３本バーブロック*/
	#menubar_hdr {
		display: block;
		z-index: 4;
		position: absolute;
		top: 25px;
		/*上から25pxの場所に配置*/
		right: 3%;
		/*右から3%の場所に配置*/
		width: 30px;
		/*幅*/
		border: 1px solid #fff;
		/*枠線の幅、線種、色*/
		padding: 12px 10px 5px;
		/*上、左右、下へのボックス内余白*/
		background: #091a71;
	}

	/*３本のバー（1本あたり）*/
	#menubar_hdr span {
		display: block;
		border-top: 3px solid #fff;
		/*枠線の幅、線種、色*/
		margin-bottom: 7px;
		/*バー同士の余白*/
	}

	/*main,subコンテンツ
---------------------------------------------------------------------------*/
	#main,
	#sub {
		float: none;
		width: auto;
	}

	/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
	section#new h2.open {
		background: url(../images/btn_minus.png) no-repeat right center/34px 34px, linear-gradient(#d46291, #b44e79);
	}

	section#new h2.close {
		background: url(../images/btn_plus.png) no-repeat right center/34px 34px, linear-gradient(#d46291, #b44e79);
	}

	/*その他
---------------------------------------------------------------------------*/
	body.s-n #sub {
		display: none;
	}

	.fr,
	.fl {
		float: none;
		margin: 0;
		margin-bottom: 10px;
		width: 100%;
		text-align: center;
	}
}

/*新着情報追加
---------------------------------------------------------------------------*/
.news_list {
	display: flex;
	gap: 1em;
	margin-bottom: 0.8em;
}

.news_list dt {
	min-width: 220px;
	line-height: 1.6;
}

.news_list dd {
	line-height: 1.6;
}

.news_list .action {
	background-color: #dd6f00;
	color: #fff;
	margin-right: 10px;
	padding: 0.1em 1em;
	border-radius: 2px;
}

.news_list a {
	text-decoration: none;
}

.news_list a:hover {
	color: #ff8409;
}

/*新着ページタブ
---------------------------------------------------------------------------*/
#tabs {
	border: 1px solid #f7dfc8;
}

#tabs ul {
	display: flex;
	align-items: center;
}

#tabs ul li {
	flex-grow: 1;
	margin-right: 3px;
	text-align: center;
}

#tabs ul li a {
	background-color: #f7dfc8;
	display: block;
	padding: 0.5em 0;
	text-decoration: none;
	font-weight: bold;
	color: #333;
}

#tabs ul li a:hover {
	color: #ff8409;
}

#tabs ul li:last-child {
	margin-right: 0;
}

#tabs ul li a.active {
	background: #fff;
	color: #ff8409;
}

#tabs .panel {
	padding: 1em;
}

#tabs figure {
	text-align: center;
	padding-bottom: 20px;
	margin-top: -10px;
}

#tabs .panel article {
	padding-bottom: 20px;
}

.submenu_year li {
	border-bottom: 1px dotted #ccc;
	padding: 5px 15px;
}

.submenu_year li a {
	vertical-align: middle;
	text-decoration: none;
}

.submenu_year li a:hover {
	color: #ff8409;
}

.submenu_year li img {
	margin-right: 10px;
	vertical-align: middle;
}

/*ページhtml内のCSS
---------------------------------------------------------------------------*/
.calc2 {
	width: calc(100% / 2);
	height: auto;
	margin: 10px;
}

.calc_img {
	height: 220px;
}

.page_h4 {
	font-weight: bold;
	margin-top: 50px;
	margin-bottom: 10px;
}

.warp {
	flex-wrap: nowrap;
}

.box {
	display: flex;
}

.box_ex {
	display: flex;
	margin: 20px 0;
}

.box_ex_title {
	display: flex;
	margin: 20px 0;
	align-items: center;
}

.box_ex_title>h4 {
	font-weight: bold;
	font-size: 24px;
	margin-left: 30px;
}

.box_ex>.answer {
	height: 59px;
}

.box_ex>.te-ma {
	height: 39px;
}

.box_end {
	display: flex;
}

.box_end>img {
	width: 50%;
}

.page_img {
	width: 50%;
}


.flex {
	display: flex;
	gap: 20px;
	align-items: center;
}

.flex figure,
.flex .flex-text {
	flex: 1;
}

#tabs .flex>figure {
	margin-top: 0;
}
.area {
	text-align: left;
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	align-items: flex-start;
}

#main .area p {
	padding: 10px;
	border: 1px solid #ccc;
	display: inline-block;
}
@media screen and (max-width: 980px) {
	.area{
		flex-direction: column;
	}
		.area-details {
			max-width:340px;
		}
}
.area-date{
	border: 2px solid palevioletred;
	padding: 10px;
	font-size: 14px;
	flex: 1;
	max-width: 400px;
	margin: 0 auto;
}
.area-date dt {
	display: inline-block;
	width:18%;
	font-weight: bold;
}
.area-date dd{
	display: inline-block;
	width: 80%;
}
.area-details{
	max-width: 400px;
	width: 100%;
	margin: 0 auto;
}
#tabs .area-details>ul{
	border: 2px dashed palevioletred;
	padding: 10px;
	font-size: 14px;
}
.area-details ul li{
	text-align: left !important;;
}
#tabs .area-details span {
	font-size: 12px;
	line-height: 1;
}
.bousaikyouiku{
	margin: 0 0 20px 40px;
}
.bousaikyouiku th{
	border: 1px solid grey;
}
.bousaikyouiku td {
	border: 1px solid grey;
}
/*画面幅620px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 620px) {

	/*文字サイズ変更ボタン（※文字サイズを「小」にした時の設定はchange.cssで行う）
---------------------------------------------------------------------------*/
	/*ボタンブロック全体*/
	#fsize {
		display: none;
		/*非表示にする*/
	}

	.warp {
		flex-wrap: wrap;
	}

	.box,
	.box_end {
		flex-direction: column;
	}

	.page_img {
		width: 100%;
	}

	.box_ex_title>h4 {
		font-size: 14px;
		margin-left: 15px;
	}

	.flex {
		flex-direction: column;
	}
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {

	/*全体の設定
---------------------------------------------------------------------------*/
	body {
		font-size: 13px;
		/*文字サイズ*/
		line-height: 1.4;
		/*行間*/
	}

	/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
	/*ロゴ画像*/
	#logo img {
		width: 200px;
		/*画像幅*/
		top: 36px;
		/*上から36pxの場所に配置*/
	}

	/*テーブル
---------------------------------------------------------------------------*/
	/*テーブル内の左側*/
	.ta1 th {
		width: 90px;
		padding: 5px;
	}

	/*テーブル内の右側*/
	.ta1 td {
		width: auto;
		padding: 5px;
	}

	/*その他
---------------------------------------------------------------------------*/
	.ws,
	.wl {
		width: 95%;
	}

	.sh {
		display: block;
	}

	.pc {
		display: none;
	}

	.banner {
		width: 100%;
	}

	.news_list {
		flex-direction: column;
		gap: 0.5em;
	}
}