@charset "utf-8";


/*slide.cssと、lightbox.cssの読み込み
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@import url(slide.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);


/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
html { scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;
	color: #777;	/*全体の文字色*/
	font-family: "Helvetica Neue",            /* macOS/iOS/iPadOS 欧文 */
	             "Arial",                     /* Windows 欧文 */
	             "Hiragino Kaku Gothic ProN", /* macOS/iOS/iPadOS 和文 */
	             "Hiragino Sans",             /* macOS/iOS/iPadOS 和文 フォールバック */
	             "BIZ UDPGothic",             /* Windows 和文 */
	             "Meiryo",                    /* Windows 和文 フォールバック*/
	             sans-serif;                  /* 総称フォント Note that the generic name should not be quoted. */
	font-size: 1em;	/*文字サイズ*/
	line-height: 1.4;		/*行間*/
	background: #fff url(../images/bg1.jpg);	/*背景色、背景画像の読み込み*/
	/*-webkit-text-size-adjust: none;*/
	-webkit-text-size-adjust: 100%;
}

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

ul {
	list-style-type: none;
}

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: #777;		/*リンクテキストの色*/
	transition: 0.4s;	/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}

a:hover {
	color: #6be;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}


/*container。サイト全体を囲むブロック
---------------------------------------------------------------------------*/
#container {
	overflow: hidden;
	max-width: 1200px;		/*最大幅の制限。これ以上広がらない。ここはpxでの指定*/
	margin: 2em auto 0;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%ついた状態の事。*/
	padding: 2em;		/*ボックス内の余白*/
	background: #fff;	/*背景色*/
	border-radius: 30px;
}

/*headerブロック
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	position: relative;
}

/*header内のロゴ*/
header #logo {
	position: absolute;
	z-index: 1;
	left: 2%;	/*headerの左から2%の場所に配置*/
	top: 5%;	/*headerの上から15%の場所に配置*/
	width: 10%;	/*画像の幅*/
	background: rgba(0,0,0,0.5);	/*画像の背景色。0,0,0は黒の事で0.5は50%色がついた状態。*/
	border-radius: 20px;
}

/*contentsブロック。mainとsubブロックを囲むボックスです。
---------------------------------------------------------------------------*/
#contents {
	padding: 2em 0;	/*上下、左右へのコンテンツ内の余白*/
}

/*mainブロック
---------------------------------------------------------------------------*/
#main {
	overflow: hidden;
	float: right;		/*右に回り込み*/
	width: 70%;			/*ブロックの幅*/
}

/*h2タグ*/
#main h2 {
	clear: both;
	margin-bottom: 1.5em;	/*見出しの下(外側)に空けるスペース*/
	color: #fff;			/*文字色*/
	background: #63b2e3 url(../images/arrow1.png) no-repeat left center;	/*背景色と背景画像（古いブラウザ用）*/
	background: url(../images/arrow1.png) no-repeat left center, linear-gradient(#a4d4f0, #83c0e4 49%, #63b2e3 50%);	/*背景画像の読み込み、グラデーション*/
	border-radius: 15px;	/*角丸のサイズ*/
	padding: 0.5em 1em 0.5em 2.5em;	/*上、右、下、左への見出し内の余白*/
}

/*h3タグ*/
#main h3 {
	clear: both;
	margin-bottom: 1.5em;	/*見出しの下(外側)に空けるスペース*/
	color: #333;			/*文字色*/
	background: linear-gradient(#fff, #eee);	/*グラデーション*/
	border-radius: 15px;	/*角丸のサイズ*/
	padding: 0.3em 1em 0.3em 1em;
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

/*段落(p)タグ*/
#main p {
	padding: 0 0 1em 0;
}

/*他*/
#main h2 + p,
#main h3 + p {
	margin-top: -0.5em;
}

#main section + section {
	clear: both;
	padding-top: 1em;
}

/*Galleryページのサムネイル （Toshi 後日見直し)
---------------------------------------------------------------------------*/
/*写真全体を囲むブロック*/
.photo-block {
	overflow: hidden;
	margin: 0 20px 20px;	/*上、左右、下へのボックスの外側に空けるスペース*/
}

/*画像*/
.list figure {
	width: 25%;			/*画像幅*/
	float: left;		/*左に回り込み*/
	transition: 0.4s;	/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}

/*マウスオン時の画像*/
.list a:hover figure {
	opacity: 0.6;		/*画像の色を60%出す*/
}

/*円形にするスタイル*/
.list.circle figure img {
	border-radius: 50%;
}

/*subブロック
---------------------------------------------------------------------------*/
#sub {
	float: left;		/*左に回り込み*/
	width: 25%;			/*ブロックの幅*/
	text-align: center;	/*ブロック内を中央に*/
}

/*h2タグ*/
#sub h2 {
	background: #8c8c8c;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#cbcbcb, #949494 49%, #8c8c8c 50%);	/*背景グラデーション*/
	border-radius: 10px 10px 0px 0px;	/*角丸のサイズ。左上、右上、右下、左下への順番。*/
	padding: 0.5em;
	color: #fff;	/*文字色*/
}

/*メニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
#menubar {
	margin-bottom: 1em;	/*メニューブロックの下にあけるスペース*/
}

/*メニュー１個ごとの設定*/
#menubar li a {
	text-decoration: none;
	display: block;
	padding: 0.2em;	/*ボックス内の余白*/
	border-bottom: 2px dotted #ccc;	/*下の線の幅、線種、色*/
	text-align: left;	/*テキストを左寄せ*/
}

/*PCではスマホ用メニューを表示させない*/
#menubar-s {
	display: none;
}

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

/*footerブロック
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;
	padding-bottom: 2em;
}

footer a {
	text-decoration: none;
}

footer .pr {
	display: block;
}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
	/*padding: 0 1em;*/		/*上下、左右へのブロック内の余白*/
	margin-bottom: 1em;	/*ブロックの下(外側)に空ける余白*/
}

/*更新情報の日付の部分*/
#new dt {
	float: left;
	width: 9em;
	/*letter-spacing: 0.1em;*/
}

/*更新情報の記事の部分。日付部分と重なるので左にpaddingをとる*/
#new dd {
	padding-left: 9em;
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}

/*テーブル（ta1） （Toshi 後日見直し）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	background: #eee;		/*背景色*/
	font-weight: bold;		/*太字に*/
	padding: 1em;		/*ボックス内の余白*/
}

/*ta1設定*/
.ta1 {
	width: 100%;
	table-layout: fixed;
	margin-bottom: 20px;
}

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

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

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

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
@keyframes scroll {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {
	display: none;
}

/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	z-index: 100;
	position: fixed;
	animation-name: scroll;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	width: 100px;		/*ボタンの幅*/
	line-height: 100px;	/*ボタンの高さ*/
	bottom: 5px;		/*ウィンドウの下からxxの場所に配置*/
	right: 5px;			/*ウィンドウの右からxxの場所に配置*/
	color: #fff;		/*文字色*/
	border-radius: 50%;	/*角丸指定。50%にすると円形になる。四角形がいいならこの１行削除。*/
	background: rgba(144, 238, 144, 0.5);/*背景色*/
	font-size: 2em;
}

/*マウスオン時の背景色*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: rgba(153, 153, 153, 0.5);
}

/*"NEW"を赤色背景で（アイコンではなくて、new クラスで末尾にアイコン風にNEWを付加表示する）
---------------------------------------------------------------------------*/
.newtext::after {
	content: "NEW";
	background: #f00;
	color: #fff;
	font-size: 70%;
	padding: 0 0.2em 0 0.2em;
	margin: 0 0.2em 0 0.2em;
}

/*"工事中"を黄色背景で (Toshi追加)
---------------------------------------------------------------------------*/
.uctext::after {
	content: "工事中";
	background: #ff0;
	color: #000;
	font-size: 70%;
	padding: 0 0.2em 0 0.2em;
	margin: 0 0.2em 0 0.2em;
}

/*ul.disc,olタグ （後日見直し）
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 20px 20px 40px;
}

ol {
	padding: 0 20px 20px 45px;
}

/*checkブロック。赤い注意書きブロックです。 （後日見直し）
---------------------------------------------------------------------------*/
p.check {
	background: #ff0000;
	color:#fff;
	padding: 10px 25px !important;
	margin-bottom: 20px;
}

p.check a {color: #fff;}

/*その他　（後日見直し：クラス名を略しすぎ感あり。より再利用性のある命名にして、使いまわせるように）
---------------------------------------------------------------------------*/
.look {
	background: #222;
	padding: 5px 10px;
	border-radius: 4px;
	border: 1px solid #333;
	color: #fff;
}

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

.clear {
	clear: both;
}

.color1,
.color1 a {
	color: #63b2e3 !important;
}

.pr {
	font-size: 10px;
}

.wl {
	width: 96%;
}

.ws {
	width: 50%;
}

.c {
	text-align: center;
}

.r {
	text-align: right;
}

.l {
	text-align: left;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.big1 {
	font-size: 40px;
}

.mini1 {
	font-size: 11px;
	display: inline-block;
	line-height: 1.5;
}

.sh {
	display: none;
}


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

	/*container。サイト全体を囲むブロック
	---------------------------------------------------------------------------*/
	#container {
		margin: 1em 3%;	/*containerの外側にとるスペース*/
	}
}



/*------------------------------------------------------------------------------------------------------------------------------------------------------
画面幅820px以下の設定 (iPad縦持ちで810px)
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:820px) {

	/*container。サイト全体を囲むブロック
	---------------------------------------------------------------------------*/
	#container {
		box-shadow: none;
		padding: 1em;	/*ボックス内の余白。上、左右、下。*/
	}

	/*contentsブロック。mainとsubブロックを囲むボックスです。
	---------------------------------------------------------------------------*/
	#contents {
		padding: 2em 0;	/*上下、左右へのコンテンツ内の余白*/
	}

	/*メインメニュー
	---------------------------------------------------------------------------*/
	/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。
	透明(opacity: 0;)から色をつける(opacity: 1;)までの指定。*/
	@keyframes menubar {
		0% {opacity: 0;}
		100% {opacity: 1;}
	}
	
	/*スマホ用メニューブロック*/
	#menubar-s {
		display: block;
		overflow: hidden;
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		width: 20em;
		animation-name: menubar;		/*上のkeyframesの名前*/
		animation-duration: 1s;	/*アニメーションの実行時間。0.5秒。*/
		animation-fill-mode: both;	/*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
		background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態の事。*/
	}
	
	/*メニュー１個あたりの設定*/
	#menubar-s li a {
		display: block;
		text-decoration: none;
		padding: 5px 3%;	/*メニュー内の余白。上下、左右。*/
		color: #fff;		/*文字色*/
		font-size: 1em;	/*文字サイズ*/
		text-align: left;	/*テキストを左寄せ*/
		border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	}
	
	/*説明表記（飾り文字）*/
	#menubar-s li a span {
		display: block;
		font-size: 0.6em;/*文字サイズ*/
	}
	/*PC用メニューを非表示にする*/
	#menubar {display: none;}
	
	/*スマホ用リンクを非表示にする（すでに本物URLにいるはずなので）（Toshi追加）*/
	#nodisp {display: none;}


	/*３本バーアイコン設定
	---------------------------------------------------------------------------*/
	/*３本バーブロック*/
	#menubar_hdr {
		display: block;
		position: absolute;
		z-index: 3;
		top: 5px;	/*上からの配置場所*/
		right: 5px;	/*右からの配置場所*/
	}
	
	/*アイコン共通設定*/
	#menubar_hdr.close,
	#menubar_hdr.open {
		width: 50px;		/*幅*/
		height: 50px;		/*高さ*/
		border-radius: 50%;	/*円形にする*/
		border: 1px solid #fff;
		opacity: 0.7;
	}
	
	/*三本バーアイコン(Toshi 画像の上半分が三本線の画像だ）*/
	#menubar_hdr.close {
		background: #63b2e3 url(../images/icon_menu.png) no-repeat center top/50px;	/*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
	}
	/*閉じるアイコン（Toshi 画像の下半分が×の画像だ）このテクは何か意味があるのだろうか・・・*/
	#menubar_hdr.open {
		background: #63b2e3 url(../images/icon_menu.png) no-repeat center bottom/50px;	/*背景色背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
	}

	/*main,subブロック
	---------------------------------------------------------------------------*/
	#main,
	#sub {
		float: none;
		width: auto;
	}

	/*その他 (Toshi 後日見直し）
	---------------------------------------------------------------------------*/
	body.s-n #sub,body.s-n #footermenu,
	.m-n {
		display: none;
	}
	
	.big1 {
		font-size: 24px;
	}
	
	.fl {
		float: none;
	}
	
	.fr {
		float: none;
	}
	
	.sh {
		display:block;
	}
	
	.pc {
		display:none;
	}
}

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

	/*全体の設定
	---------------------------------------------------------------------------*/
	body {
		font-size: 0.8em;	/*文字サイズ*/
		background: #fff;	/*背景色*/
	}

	/*container。サイト全体を囲むブロック
	---------------------------------------------------------------------------*/
	#container {
		margin: 0.2em;
		border-radius: 0px;
		padding: 0.2em 0.2em;	/*ボックス内の余白。上、左右*/
		line-height: 1.3;	/*行間*/
	}

	/*contentsブロック。mainとsubブロックを囲むボックスです。
	---------------------------------------------------------------------------*/
	#contents {
		padding: 1em 0;	/*上下、左右へのコンテンツ内の余白*/
	}

	/*mainブロック
	---------------------------------------------------------------------------*/
	/*h2タグ*/
	#main h2 {
		font-size: 1.2em;	/*文字サイズ*/
		padding-left: 2em;	/*左側の余白の上書き*/
	}
	/*h3タグ*/
	#main h3 {
		font-size: 1.2em;	/*文字サイズ*/
	}

	/*トップページ内「更新情報・お知らせ」ブロック
	---------------------------------------------------------------------------*/
	/*ブロック全体の設定*/
	#new dl {
		padding: 0;
		font-size: 1em;
	}
	
	/*更新情報の日付の部分（デフォルトの改行する状態にする）*/
	#new dt {
		float: none;
		/*width: 9em; */
		/*letter-spacing: 0.1em;*/
	}
	
	/*更新情報の記事の部分。日付部分と重ならなくなるので左のpaddingは少しにする*/
	#new dd {
		padding-left: 2em;
		border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	}

	/*テーブル（ta1） （Toshi 後日見直し）
	---------------------------------------------------------------------------*/
	/*テーブル１行目に入った見出し部分（※caption）*/
	.ta1 caption {
		padding: 5px;	/*ボックス内の余白*/
	}
	.ta1,
	.ta1 td,
	.ta1 th {
		padding: 5px;	/*ボックス内の余白*/
	}
	
	/*ta1の左側ボックス*/
	.ta1 th {
		width: 100px;	/*幅*/
	}
	
	/*olタグ （Toshi 後日見直し）
	---------------------------------------------------------------------------*/
	ol {
		padding: 0 20px 20px 40px;
	}
	
	/*その他 （Toshi 後日見直し）
	---------------------------------------------------------------------------*/
	.ws,
	.wl {
		width: 94%;
	}
	
	.big1 {
		font-size: 18px;
		letter-spacing: normal;
	}
	
	img.fr,
	img.fl {
		float: none;
		margin: 0;
		width: 100%;
	}
	
	.sh {
		display:block;
	}
	
	.pc {
		display:none;
	}
}