@charset "utf-8";

/************	リセットCSS（sanitize.css）の読み込み	************/
@import url("https://unpkg.com/sanitize.css");

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

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

/************		高松　炉端　たつの落とし子	************/

/************	テーマカラーの定義（CSS変数）
ここのカラーコードを変更するだけで、テンプレートのテーマカラーが変わります。	************/
:root {
    --primary-color: #000bf1;
}
/************	

/************	全体の設定	************/
html,body {
	height: 100%;
	font-size: 18pt	/************	基準となるフォントサイズ。	************/
	font-color: red	/************	基準となるフォント色。	************/
}

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

	html, body {
		font-size: 14pt;	/************	基準となるフォントサイズ。	************/
	}

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


body {
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/************		フォント種類			************/
	-webkit-text-size-adjust: none;
	background: #fff;	/************		背景色		************/
	color: #777;		/************		文字色		************/
	line-height: 1.6;	/************		行間指定	（line-height	************/
}

/************	リセット	************/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/************	table全般の設定	************/
table {border-collapse:collapse;}

/************	画像全般の設定		************/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/************	videoタグ	************/
video {max-width: 100%;}

/************	iframeタグ	************/
iframe {width: 100%;}

/************	他	************/
input {font-size: 1rem;}
section + section {
	margin-top: 1.6rem;
}

/************	opa1のキーフレーム設定	************/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/************	リンクテキスト全般の設定	************/
a {
a:link { color: #0000ff; }		/************	文字色	************/
	font-weight: bold;		/****文字ウェイト	****/
	transition: 0.3s;		/************	hoverまでにかける時間。0.3秒。	************/
}

/************	マウスオン時	************/
a:hover {
	color: var(--primary-color);	/************	css冒頭で指定しているテーマカラーを読み込み	************/
}

/************	コンテナー（サイト全体を囲むブロック）	************/
#container {
	height: 100%;
	display: flex;		/************	flexボックスを使う指定*/
	flex-direction: column;	/************	子要素を縦並びにする*/
	justify-content: space-between;	/************	並びかたの種類の指定*/
	max-width: 1800px;	/************	サイトの最大幅。これ以上広がらない。*/
	margin: 0 auto;
	border-top: 5px solid var(--primary-color);	/************	上の線の幅、線種、varは色のことで、ここではcss冒頭で指定しているテーマカラーを読み込みます。*/
}

	/************	コンテンツ（フッター関連「以外」を囲むブロック）	************/
#contents {
	flex: 1;
	padding: 0 3%;	/************	コンテンツ内の余白	************/
}


/************	header（ロゴが入った最上段のブロック）	************/
/************	ヘッダーブロック	************/
header {
	padding: 3rem 0;	/************	上下、左右へのヘッダー内の余白。remというのは文字単位の事。3remは3文字分。	************/
	text-align: center;	/************	内容をセンタリング	************/
}

/************		ロゴ	************/
#logo img {
	width: 1920px;	/************	ロゴの幅	************/
}


/************	メニューブロック設定	************/
/************	メニューブロック		************/
#menubar ul {
	margin: 0;padding: 0;
	margin-bottom: 3rem;			/************	下に空けるスペース。３文字分。	************/
	display: flex;					/************	flexボックスを使う指定	************/
	justify-content: space-around;	/************	並びかたの種類の指定	************/
	border-top: 1px solid #ddd;		/************	上の線の幅、線種、色	************/
	border-bottom: 1px solid #ddd;	/************	下の線の幅、線種、色	************/
}

/************	メニュー１個あたりの設定	************/
#menubar li {
	flex: 1;
	line-height: 1.0;
	text-align: center;
}
#menubar a {
	text-decoration: none;display: block;
	color: inherit;
	padding: 0.7rem 0.5rem;		/************	上下、左右へのメニュー内の余白	************/
	background: #fff;
}

/************	マウスオン時	************/
#menubar a:hover {
	background: var(--primary-color);	/************	背景色。css冒頭で指定しているテーマカラーを読み込みます	************/
	color: #fff;						/************	文字色	************/
}


/************	スライドショー（slickを使用）	************/
/************	画像を囲むブロック	************/
.mainimg-slick {
	margin-bottom: 80px;	/************	画像の下に空けるスペース	************/
}

/************	丸いページナビボタン全体を囲むブロック*/
ul.slick-dots {
	margin:0;padding: 0;
	line-height: 1;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: -30px;	/************	下からの配置場所指定。ボタンを画像の下に移動します。	************/
}

/************	丸いページナビボタン１個あたりの設定	************/
ul.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/************	buttonタグ*	************/
ul.slick-dots li button {
	border: none;padding: 0;
	display: block;
	text-indent: -9999px;	/************	デフォルトで文字が出るので画面の外に追い出す指定************/
	width: 12px;			/************	ボタンの幅	************/
	height: 12px;			/************	ボタンの高さ	************/
	border-radius: 50%;		/************	丸くする指定	************/
	cursor: pointer;		
/************	クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。	************/
	background: #ccc;		/************	背景色。白。	************/
}

/************	buttonのアクティブ時（現在表示されている画像を示すボタン）	************/
ul.slick-dots li.slick-active button {
	background: var(--primary-color);	
/************	色。css冒頭で指定しているテーマカラーを読み込みます	************/
}


/************	mainブロック設定	************/
/************	mainブロック	************/
main h1{
	padding: 5%;	/************	ブロック内の余白	************/
}

/************	mainブロック内のh1	************/
main h2 {
	font-size: 24pt;		/************	文字サイズ*/
	font-weight: bold;		/****文字ウェイト	****/
	text-align: center;		/************	テキストをセンタリング*/
	letter-spacing: 0.2em;	/************	文字間隔を広くする指定	（letter-spacing）	************/
	line-height: 1.2;		/************		行間指定	（line-height	************/



/************	mainブロック内のh2	************/
main h2 {
	font-size: 18pt;		/************	文字サイズ*/
	font-weight: bold;		/****文字ウェイト	****/
	text-align: center;		/************	テキストをセンタリング*/
	letter-spacing: 0.2em;	/************	文字間隔を広くする指定	（letter-spacing）	************/
	line-height: 1.2;		/************		行間指定	（line-height	************/
	color: var(--primary-color);	
/************	文字色。css冒頭で指定しているテーマ・カラーを読み込みます*/
}

/************	mainブロック内のh3	************/
main h3 {
	font-size: 1.4rem;		/************	文字サイズ	************/
	font-weight: bold;		/****文字ウェイト	****/
	text-align: center;		/************	テキストをセンタリン	************/
	letter-spacing: 0.2em;	/************	文字間隔を広くする指定	************/
}

/************	*******mainブロック内のpタグ	************/
main p {
	margin: 1rem;		/************	pの外側にとるスペース	************/
}

/************		「お知らせ」ブロック	************/
/************		お知らせブロック	************/
.new {
	margin: 0;
	display: flex;	/************	flexボックスを使う指定	************/
	flex-wrap: wrap;	/************	折り返す指定	************/
	padding: 0 1rem;	/************	上下、左右へのボックス内の余白	************/
}

/************	日付(dt)、記事(dd)共通設定	************/
.new dt,
.new dd {
	padding: 5px 0;		/************	上下、左右へのボックス内の余白	************/
}

/************	日付(dt)設定	************/
.new dt {
	width: 8em;			/************	幅。8文字(em)分	************/
}

/************	記事(dd)設定	************/
.new dd {
	width: calc(100% - 8em);	/************	「8em」は上の「.new dt」のwidthの値です	************/
}


/************	フッター設定	************/
footer small {font-size: 100%;}
footer {
	font-size: 0.7rem;		/************	文字サイズ。bodyのfont-sizeの70%です。	************/
	text-align: center;		/************	内容をセンタリング	************/
	padding: 20px;			/************	ボックス内の余白	************/
	color: #fff;			/************	文字色*/
	background: var(--primary-color);		/************	背景色。css冒頭で指定しているテーマカラーを読み込みます	************/
}

/************	リンクテキスト	************/
footer a {color: inherit;text-decoration: none;}

/************	著作部分	************/
footer .pr {display: block;}


/************	メニューのご紹介ページの各ボックス	************/
/************	ボックス１個あたりの設定	************/
.list-simple {
	text-align: center;	/************	中身をセンタリング	************/
	max-width: n1920px;		/************	ボックスの幅	************/
	margin: 0 auto 1rem;	/************	ボックスの外側にとるスペース。上、左右、下。	************/
}

/************	ボックス内のh3	************/
.list-simple h3 {
	margin: 0;
}

/************	ボックス内のp	************/
.list-simple p {
	margin: 0;
	font-size: 0.85rem;	/************	文字サイズを85%に	************/
	line-height: 1.6;
}


/************	アクセスのマップ。コメント解説がある行以外はそのままで使って下さい。	************/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
/************	ここが高さになります。大きくすればよりマップの高さも増します。	************/
	position: relative;
	margin-bottom: 0.5rem;	/************	地図の下に空けるスペース。２文字分。	************/
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}







/****	見出しmds	左 ボーダー Green					****/
/****	https://pote-chil.com/html-maker/heading/				****/
.mds_001_g {
 	font-size: 18pt;				/************	基準となるフォントサイズ。	************/
text-align: left;
	font-weight: bold;				/****文字ウェイト	****/
  	 padding: 6px 10px 6px 30px;		/****	コンテンツ内の余白		****/
    border-left: 20px solid #005500;	/****	左縦線の配置			****/
    color: #333333;
}


/****	見出しmds	左 ボーダー Blue			-------------------------****/
/*	https://pote-chil.com/html-maker/heading/		-------------------------***/
.mds_001_b {
 	font-size: 16pt;				/************	基準となるフォントサイズ。	************/
	font-weight: bold;				/****文字ウェイト			****/
  	 padding: 6px 10px 6px 30px;		/****	コンテンツ内の余白		****/
text-align: left;
	 padding-left: 15px;
    border-left: 20px solid #0000CC;
    color: #0000CD;
}




/****	見出しmds	左 ボーダー Blue			-------------------------****/
/*	https://pote-chil.com/html-maker/heading/		-------------------------***/
.mds_001_bs {
 	font-size: 16pt;				/************	基準となるフォントサイズ。	************/
	font-weight: bold;				/****文字ウェイト			****/
  	 padding: 6px 10px 6px 30px;		/****	コンテンツ内の余白		****/
text-align: left;
	 padding-left: 15px;
    border-left: 16px solid #0000CC;
    color: #0000CD;
}

/****	見出しmds	左 ボーダー Orange			-------------------------****/
/****	https://pote-chil.com/html-maker/heading/		-------------------------****/
.mds_001_o {
 	font-size: 16pt;				/************	基準となるフォントサイズ。	************/
	font-weight: bold;			/****文字ウェイト			****/
  	 padding: 6px 10px 6px 30px;		/****	コンテンツ内の余白		****/
	text-align:	left;
	 padding-left:	15px;
    border-left: 20px solid #FF4F02;
	color: #050505;










/************	テーブル	************/
/************	テーブル１行目に入った見出し部分（※caption）	************/
.ta1 caption {
	font-weight: bold;		/************	太字に	************/
	padding: 1rem;			/************	ボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。	************/
	background: #555;		/************	背景色	************/
	margin-bottom: 15px;		/************	下に空けるスペース	************/
	border-radius: 5px;		/************	角を丸くする指定	************/
	color: #fff;				/************	文字色	************/
}






/************	ta1テーブルブロック設定	************/
.ta1 {
	border-top: 1px solid #666;	/************	テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 2em;		/************	最後の「2em」がテーブルの下に空けるスペースです*/
}

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

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

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


/************	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%;	/************	円形にする	************/
}

/************	その他		************/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !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;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

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

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

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