/*----------------------------------------------------------
	ehime pco ホームページ基礎的CSS
------------------------------------------------------------*/

/* *********************************
001: ソースのデフォルト設定
*********************************** */
body ,input ,textarea ,select {	/*入力欄にフォーカスが当たっても拡大しない*/
	font-size: 20px;		/*　文字のサイズ　*/
	line-height: 1.4em;
}
/*--画面サイズが767px以下の場合に可変--*/
@media screen and (max-width: 767px) {
body ,input ,textarea ,select{
	font-size: 18px;		/*　文字のサイズ　*/
	line-height: 1.2em;		/*　行間の調整　*/
}}

body {
	font-family: 'Noto Sans JP', sans-serif;	/*--ﾌｫﾝﾄの種類をｺﾞｼｯｸで設定--*/
	font-size: 100%;		/*--ﾌｫﾝﾄのサイズを設定--*/
		-webkit-text-size-adjust: 100%;	/*iPhoneのsafariでlandscapeにしたとき文字が大きくなるのを防ぐ*/
	color: #424242;			/*--ﾌｫﾝﾄの色(ﾀﾞｰｸｸﾞﾚｰ)を設定--*/
	height: 100%;			/*--縦幅を100％に設定--*/
	max-width: 1280px;
	width: 100%;
}
ul {
	list-style: none;		/*--リストの”・”を表示しない--*/
}
li {
	margin-top: 0.2em;		/*　外側の余白(上)　*/
	margin-bottom: 0.2em;		/*　外側の余白(上)　*/
}
a {
	color: inherit;
	text-decoration: none;		/*--装飾を元に戻す--*/
}
span {
	display: inline-block;		/*--改行しない範囲を指定--*/
}

video {
	margin: 0 auto;			/*　ﾋﾞﾃﾞｵの位置　*/
}
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,h7 {
	clear: both;
	font-weight: bold;		/*　文字の太さ　*/
}
/*--↓↓↓　<h1>ｿｰｽを使用した時の設定 ↓↓↓--*/
h1 {
}
/*--↓↓↓　<h2>ｿｰｽを使用した時の設定 ↓↓↓--*/
h2 {
	text-shadow: 1px 1px #000;	/*　文字の影　*/
}
/*--↓↓↓　<h3>ｿｰｽを使用した時の設定 ↓↓↓--*/
h3 {
	font-size: 22px;		/*　文字のｻｲｽﾞ　*/
	line-height: 1.4em;		/*　行間の調整　*/
}
h4 ,h5 ,h6 ,h7 {
	margin-top: 1px;		/*　外側の余白(上)　*/
	font-size: 24px;		/*　文字のｻｲｽﾞ　*/
	line-height: 1.4em;		/*　行間の調整　*/
}
/*--↓↓↓　<h4>ｿｰｽを使用した時の設定 ↓↓↓--*/
h4 {
	padding: 0.3em;			/*　内側の余白　*/
	background: #0000ff;		/*　背景の色(青色)　*/
	color: #fff;			/*　文字の色　*/
}
/*--↓↓↓　<h5>ｿｰｽを使用した時の設定 ↓↓↓--*/
h5 {
	margin-top: 1px;		/*　外側の余白(上)　*/
	padding: 0.3em;			/*　内側の余白　*/
	background: lightgreen;		/*　背景の色(うす緑色)　*/
	border-left: solid 5px blue;	/*　左側に線を引く　*/
	color: black; 			/*　文字の色　*/
}
h6 {
	color: darkblue;		/*　文字の色　*/
	font-style: oblique;		/*　文字を斜体にする　*/
	text-decoration: underline;	/*　下線を引く　*/
}
h7 {
	color: purple;			/*　文字の色　*/
}
/*--画面サイズが767px以下の場合に可変--*/
@media screen and (max-width: 767px) {
h3 {
	font-size: 20px;		/*　文字のｻｲｽﾞ　*/
	line-height: 1.2em;		/*　行間の調整　*/
}
h4 ,h5 ,h6 ,h7 {
	font-size: 22px;		/*　文字のｻｲｽﾞ　*/
	line-height: 1.2em;		/*　行間の調整　*/
}}
/* *********************************
002: クラスのデフォルト設定
*********************************** */
/*----------------------------------------------------------
	背景用画像の設定
------------------------------------------------------------*/
.background1 ,.background2 ,.background3 ,.background4 {
	top: 0;
	background-attachment: fixed;	/*--位置を固定する--*/
	background-position: center;	/*--位置を中央にする--*/
	z-index: -1;		/*--最背面に表示する--*/
}
.background1 {
	background-image: url("../img/back/back_01.png");
}
.background2 {
	background-image: url("../img/back/back_02.png");
}
.background3 {
	background-image: url("../leaflet/back.jpg");
}
.background4 {
	background-image: url("../img/back/back_2021.png");
}
/*--------------------------------------------------------
	ページコンテナ―の設定
----------------------------------------------------------*/
#container ,#basic-container ,.basic-container ,.information-content ,.end-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;			/*　要素自体中央に設定　*/
	padding: 0px;			/*　内側の余白なし　*/
	overflow: hidden;		/*　要素ボックス からはみ出た部分は表示しない。スクロールを禁止*/
	margin-top: 2px;		/*　外側の余白(上)　*/
}
.index_container {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;			/*　要素自体中央に設定　*/
	padding: 0px;			/*　内側の余白なし　*/
	overflow: hidden;		/*　要素ボックス からはみ出た部分は表示しない。スクロールを禁止*/
	margin-top: 1em;		/*　外側の余白(上)　*/
}
.index_container img {
	margin-bottom: 2px;		/*　外側の余白(上)　*/
}
.menu-container{	/*--表示領域--*/
	display: flex;
	-webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: center;
	-webkit-justify-content: center;
	width: 100%;
	inline-block: true;
}
.content {
	width: 100%;
	margin: 0 auto;
}
@media screen and (max-width: 1034px) {
.content {
	width: 99%;
}}
/*	ﾃﾞﾊﾞｲｽ縦向きの表示	 */
@media screen and (orientation:portrait){
#container ,#basic-container ,.basic-container ,.information-content ,.end-container {
	margin: 0px;			/*　外側の余白なし　*/
}}
/*----------------------------------------------------------
	tableの設定
------------------------------------------------------------*/
table {
	border-collapse: collapse;
	width: 100%;
	font-size: 100%;
	line-height: 1.4em;		/*　行間の調整　*/
}
table th,table td {
	padding: 3px;
	border: 1px solid #999;
	vertical-align: middle;
}
table th {
	background-color: #F3F2FF;
	text-align: center;
	width: 25%;
	text-justify: kashida;
}
table td {
	background-color: rgba(255,255,255,0.9);
	padding: 0.8em;
}
table td.tan {
	width: 18%;
}
table td.map {
	width: 100%;
	padding: 0;
}
/*--画面サイズが500px以下の場合に可変--*/
@media screen and (max-width: 500px) {
table th:nth-of-type(1) {
	width: 3em;		/*　文字のｻｲｽﾞ　*/
}}
/*----------------------------------------------------------
	バーの設定
------------------------------------------------------------*/
.titlebar {　/*--緑色タイトル設定--*/
	max-width: 100%;
	background: rgba(125,200,25,0.60);		/*　背景色(透過)　*/
	border-left: 10px solid rgba(125,200,25,0.50);	/*　左のライン色(透過)　*/
	border-right: 10px solid rgba(125,200,25,0.50);	/*　右のライン色(透過)　*/
	border-top: 5px solid rgba(216,255,25,0.40);	/*　上のライン色(透過)　*/
	border-bottom: 5px solid rgba(216,255,25,0.40);	/*　下のライン色(透過)　*/
	border-radius: 5px;		/*　角を丸くする　*/
	color: black;			/*　文字の色　*/
	font-size: 28px;		/*　文字のｻｲｽﾞ　*/
	font-weight: bold;		/*　文字の太さ　*/
	line-height: 1.0em;		/*　行間の調整　*/
	margin-top: 5px;		/*　外側の余白(上)　*/
	margin-bottom: 5px;		/*　外側の余白(下)　*/
	padding: 20px 0px 10px 20px;	/*　ﾎﾞｰﾀﾞｰ内余白(上、右、下、左)　*/
}
.titlebar span {
	font-size: 16px;		/*　文字のｻｲｽﾞ　*/
}
/*--画面サイズが767px以下の場合に可変--*/
@media screen and (max-width: 767px) {
.titlebar {
	font-size: 22px;		/*　文字のｻｲｽﾞ　*/
	padding: 15px 0px 10px 15px;	/*　ﾎﾞｰﾀﾞｰ内余白(上、右、下、左)　*/
}
.titlebar span {
	font-size: 11px;		/*　文字のｻｲｽﾞ　*/
}}
/*----------------------------------------------------------
	ボックスの設定
------------------------------------------------------------*/
.freebox ,.textbox ,.bluebox {	/*--透過ＢＯＸ設定--*/
	max-width: 100%;
	color: black;			/*　文字の色　*/
	font-weight: normal;		/*　文字の太さ　*/
	text-align: left;		/*　ﾃｷｽﾄ位置　*/
	margin-top: 0px;		/*　外側の余白(上)　*/
	margin-bottom: 1px;		/*　外側の余白(下)　*/
	padding-top: 10px;		/*　ﾎﾞｰﾀﾞｰ内余白(上)　*/
	padding-left: 1em;		/*　ﾎﾞｰﾀﾞｰ内余白(左)　*/
	padding-right: 1em;		/*　ﾎﾞｰﾀﾞｰ内余白(右)　*/
	padding-bottom: 20px;		/*　ﾎﾞｰﾀﾞｰ内余白(下)　*/
}
.textbox {	/*--透過白色ＢＯＸ設定--*/
	background: rgba(255,255,255,0.90);	/*　背景色(白色透過)　*/
}
.bluebox {	/*--透過青色ＢＯＸ設定--*/
	background: rgba(51,153,255,0.85);	/*　背景色（青色透過)	*/
	border-top: solid 2px blue;	/*　上側に線を引く　*/
	border-bottom: solid 2px white;	/*　下側に線を引く　*/
	color: white;			/*　文字の色　*/
}

.title {	/*--グラデーションタイトル--*/
	max-width: 100%;
	background: linear-gradient(90deg,rgba(2,0,36,1)0%,
	rgba(9,9,121,1)35%,
	rgba(0,212,255,1)100%);		/*　背景色（青色ｸﾞﾗﾃﾞｰｼｮﾝ）　*/
	border-top: solid 2px blue;	/*　上側に線を引く　*/
	border-bottom: solid 2px white;	/*　下側に線を引く　*/
	color: white; 			/*　文字の色　*/
	font-size: 20px;		/*　文字のｻｲｽﾞ　*/
	font-weight: bold;		/*　文字の太さ　*/
	text-align: center;		/*　ﾃｷｽﾄ位置　*/
	margin-top: 1px;		/*　外側の余白(上)　*/
	margin-bottom: 0px;		/*　外側の余白(下)　*/
	padding: 10px;			/*　ﾎﾞｰﾀﾞｰ内余白　*/
}
.double-box {/*--黒色二重線で囲まれた無色ＢＯＸ設定--*/
	max-width: 100%;
	border: double 5px rgba(0,0,0,0.80);	/*　囲み線の幅と色　*/
	margin-bottom:10px;
	padding:10px;
	align-self: center;
}
/*--無色ＢＯＸ設定--*/
.top1 {
	font-size: 24px;		/*　文字のｻｲｽﾞ　*/
	color: darkblue;		/*　文字の色　*/
	font-weight: bold;		/*　文字の太さ：太字　*/
	font-style: oblique;		/*　文字を斜体にする　*/
	inline-block: true;
	text-indent: 24px;		/*　インデント　*/
	margin-bottom: 10px;		/*　下側の余白　*/
	background: #819FF7;
}
/*--基本書き込みＢＯＸ設定--*/
ul.basicbox {
	max-width: 95%;
	margin-left: auto;		/*　左側の余白自動　*/
	margin-right: auto;		/*　右側の余白自動　*/
	margin-bottom: 5px;		/*　下側の余白　*/
	text-align: left;		/*　ﾃｷｽﾄ位置　*/
	padding-bottom: 10px;		/*　ﾎﾞｰﾀﾞｰ内余白(下)　*/
}
ul.basicbox li {
	max-width: 95%;
	margin-left: auto;		/*　左側の余白自動　*/
	margin-right: auto;		/*　右側の余白自動　*/
	text-align: left;		/*　ﾃｷｽﾄ位置　*/
	padding-bottom: 5px;		/*　ﾎﾞｰﾀﾞｰ内余白(下)　*/
}
.basicbox a {
	color: black;			/*　文字の色　*/
	text-indent: 1em;		/*　１行目インデント０文字分　*/
}
/*--画面サイズが767px以下の場合に可変--*/
@media screen and (max-width: 767px) {
.basicbox p {
	font-size: 16px;		/*　文字のｻｲｽﾞ　*/
}}

div.list {
	padding-left: 1em;		/*　ﾎﾞｰﾀﾞｰ内余白(左)　*/
}
div.list p.content {
	padding-left: 1em;		/*　ﾎﾞｰﾀﾞｰ内余白(左)　*/
}
/*----------------------------------------------------------
	テキストエリアの設定
------------------------------------------------------------*/
.freetext ,.bordertext ,.Bred-text{	/*--無色テキストエリア設定--*/
	max-width: 100%;
	color: black;			/*　文字の色　*/
	font-weight: normal;		/*　文字の太さ　*/
	text-align: left;		/*　ﾃｷｽﾄ位置　*/
	margin-top: 0px;		/*　外側の余白(上)　*/
	margin-bottom: 1px;		/*　外側の余白(下)　*/
	padding-top: 5px;		/*　ﾎﾞｰﾀﾞｰ内余白(上)　*/
	padding-left: 10px;		/*　ﾎﾞｰﾀﾞｰ内余白(左)　*/
	padding-right: 10px;		/*　ﾎﾞｰﾀﾞｰ内余白(右)　*/
	padding-bottom: 5px;		/*　ﾎﾞｰﾀﾞｰ内余白(下)　*/
}
.bordertext {	/*--黒線で囲まれたテキスト設定--*/
	border: solid 2px rgba(0,0,0,0.10);	/*　囲み線の幅と色　*/
}
.bluetext {	/*--透過青色テキスト設定--*/
	background: rgba(51,153,255,0.85);	/*　背景色（青色透過)	*/
	color: white;			/*　文字の色　*/
}
.Bred-text {	/*--赤線で囲まれた白色テキスト設定--*/
	background: rgba(255,255,255,1);	/*　背景色（白色）	*/
	border: solid 2px rgba(255,0,0,1);	/*　囲み線の幅と赤色　*/
	font-weight: bold;		/*　文字の太さ　*/
}
/*------色で囲まれた無色テキスト設定-------*/
.gray_b-text ,.green_b-text ,.red_b-text ,.blue_b-text {
	max-width: 95%;
	margin: 0.1em;		/*　左側の余白自動　*/
	padding: 1em;			/*　ﾎﾞｰﾀﾞｰ内余白　*/
	text-align: left;		/*　ﾃｷｽﾄ位置　*/
}
/*------色で囲まれた白色透過ＢＯＸ基本設定-------*/
.gray_b-box ,.green_b-box ,.red_b-box {
	max-width: 95%;
	margin: 0.1em;		/*　左側の余白自動　*/
	padding: 1em;			/*　ﾎﾞｰﾀﾞｰ内余白　*/
	background: rgba(255,255,255,0.85);	/*　背景白色（赤、緑、青、濃度）	*/
	text-align: left;		/*　ﾃｷｽﾄ位置　*/
}
/*--ボーダー灰色--*/
.gray_b-box ,.gray_b-text {
	border: solid 3px rgba(0,0,0,0.40);	/*　囲み線の幅と色（赤、緑、青、濃度）　*/
}
/*--ボーダー緑色--*/
.green_b-box ,.green_b-text {
	border: solid 3px rgba(0,255,0,0.85);	/*　囲み線の幅と色（赤、緑、青、濃度）　*/
}
/*--ボーダー赤色--*/
.red_b-box ,.red_b-text {
	border: solid 3px rgba(255,0,0,0.85);	/*　囲み線の幅と色（赤、緑、青、濃度）　*/
}
/*--ボーダー青色--*/
.blue_b-text {
	border: solid 3px rgba(0,0,255,0.85);	/*　囲み線の幅と色（赤、緑、青、濃度）　*/
}
/*--マウスが乗ったらボーダー青色--*/
.gray_b-box:hover ,.green_b-box:hover ,.red_b-box:hover {
	border: solid 3px rgba(0,0,255,1);	/*　囲み線の幅と色（赤、緑、青、濃度）　*/
}
/*----------------------------------------------------------
	各種ボタンの設定
------------------------------------------------------------*/
.white-btn ,.black-btn ,.green-btn ,.blue-btn ,.yellow-btn {
	max-width: 400px;
	min-width: 200px;
	text-align: center;		/*　ﾃｷｽﾄ位置（左右中央）　*/
	align-items: center;
	border-left: 5px solid rgba(255,255,255,0.30);	/*　左のライン色(透過)　*/
	border-right: 5px solid rgba(0,0,0,0.70);	/*　右のライン色(透過)　*/
	border-top: 3px solid rgba(255,255,255,0.60);	/*　上のライン色(透過)　*/
	border-bottom: 5px solid rgba(0,0,0,0.50);	/*　下のライン色(透過)　*/
	border-radius: 10px;		/*　角を丸くする　*/
	display: block;			/*　項目内全域をリンク可能にする */
	padding: 15px 5px 15px 5px;	/*　内側余白(上、右、下、左)　*/
	font-size: 20px;		/*　文字のｻｲｽﾞ　*/
	font-weight: bold;		/*　文字（太字）　*/
	text-shadow: 0.2px 0.2px #000;	/*　文字の影（下、右、色）　*/
	line-height: 1.0em;		/*　行間の調整　*/
}
.white-btn {
	background: white;		/*　ボタン背景（白）*/
	color: darkBlue; 		/*　文字(紺)　*/
}
.black-btn {
	max-width: 600px;
	min-width: 300px;
	height: 2em;
	background: black;		/*　ボタン背景（黒）*/
	color: white; 			/*　文字(白)　*/
}
.green-btn {
	background: green;		/*　ボタン背景（緑）*/
	color: white; 			/*　文字(白)　*/
}
.blue-btn {
	background: blue;		/*　ボタン背景(青) */
	color: white; 			/*　文字（白）　*/
}
.yellow-btn {
	background: yellow;		/*　ボタン背景（黄）	*/
	color: black; 			/*　文字（黒）　*/
}
/*--マウスが載ったときに適用--*/
.white-btn:hover {			/*　マウスが載ったときに適用 */
	background: lightgreen;		/*　ボタン背景（黄緑) */
}
.black-btn:hover {			/*　マウスが載ったときに適用 */
	color: yellow;			/*　文字(黄) */
}
.green-btn:hover {			/*　マウスが載ったときに適用 */
	background: darkgreen;		/*　ボタン背景（黄) */
	color: yellow;			/*　文字(深緑) */
}
.blue-btn:hover {			/*　マウスが載ったときに適用 */
	background: darkblue;		/*　ボタン背景（紺) */
	color: yellow;			/*　文字(黄) */
}
.yellow-btn:hover {			/*　マウスが載ったときに適用 */
	background: black;		/*　ボタン背景（黒) */
	color: yellow;			/*　文字(黄) */
}
/*--画面サイズが767px以下の場合に可変--*/
@media screen and (max-width: 767px) {
.white-btn ,.black-btn ,.green-btn ,.blue-btn ,.yellow-btn {
	font-size: 16px;		/*　文字のｻｲｽﾞ　*/
	margin: 0 auto;			/*　外側の余白　*/
}}
/*----------------------------------------------------------
	指定した時間で見えなくする設定
------------------------------------------------------------*/