@charset "utf-8";

/*===========================================================
	フォント読み込み
===========================================================*/

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Noto+Serif+JP:400,700&display=swap');

/*===========================================================
	基本設定
===========================================================*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	color: #333333;
	font-family: 'Noto Serif JP', serif;
	font-size: 1.4rem;
	line-height: 1.4;
}

img {
	max-width: 100%;
	vertical-align: bottom;
}

a {
	text-decoration: none;
}

ul,
li {
	list-style: none;
}

.sp_br {
	display: none;
}

.text_right {
	text-align: right;
}

/*===========================================================
	ヘッダー
===========================================================*/

header {
	min-width: 1040px;
	background-color: rgba(0,163,182,1);
	color: #ffffff;
}

#header_inner {
	margin: 0 auto;
	padding: 0 20px;
	width: 1040px;
	overflow: hidden;
}

#header_inner p {
	margin-top: 36px;
	font-size: 1.4rem;
	line-height: 1;
}

#header_inner h1 {
	margin-top: 20px;
	margin-bottom: 36px;
	font-size: 3.4rem;
	line-height: 1;
}

#header_inner h1 a {
	color: #ffffff;
}

#header_image {
	width: 100%;
	height: 270px;
	background: url("../images/common/header_image.jpg") no-repeat center center;
	background-size: cover;
}

/*===========================================================
	ナビ開閉ボタン
===========================================================*/

#menu_button {
	display: none;
}

/*===========================================================
	グローバルナビ
===========================================================*/

nav {
	margin: 55px auto 0;
	padding: 0 20px;
	width: 1040px;
}

nav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

nav ul::before,
nav ul::after {
	content: "";
	display: block;
	border-bottom: solid 3px rgba(0,163,182,1);
}

nav ul::before {
	flex: 0 0 1em;
}

nav ul::after {
	flex: 1 0 auto;
}

nav li {
	flex: 0 0 auto;
	overflow: hidden;
}

nav a {
	padding: 0.7em 2em;
	min-width: 180px;
	display: block;
	border: solid 1px rgba(0,163,182,1);
	border-bottom-width: 3px;
	border-top-right-radius: 10px;
	color: #333333;
	font-size: 1.8rem;
	text-align: center;
	transition: background 0.3s;
}

nav a:hover {
	background-color: #fff5e1;
}

#message nav .message,
#member nav .member,
#area_list nav .area_list,
#division nav .area_list {
	border-top-right-radius: 10px;
}

#message nav .message a,
#member nav .member a,
#area_list nav .area_list a,
#division nav .area_list a {
	padding-top: 0.7em;
	padding-bottom: 1em;
	background-color: rgba(0,168,182,0.07);
	border-width: 0;
	border-top-width: 7px;
	border-top-right-radius: 0;
}

/*===========================================================
	メインコンテンツ
===========================================================*/

main {
	padding: 0 20px;
}

#main_inner {
	margin: 0 auto;
	padding: 40px 50px 80px;
	width: 1000px;
	background-color: rgba(0,168,182,0.07);
	border-bottom: solid 3px rgba(0,163,182,1);
}

#main_content {
}

.content_head01 {
	padding-top: 1em;
	color: rgba(0,163,182,1);
	font-size: 3rem;
}

#area_list .content_head01 {
	background: url("../images/index/heading_bg01.svg") no-repeat center right;
	background-size: 400px;
}

#message .content_head01 {
	background: url("../images/message/heading_bg01_message.svg") no-repeat center right;
	background-size: 160px;
}

#member .content_head01 {
	background: url("../images/member/heading_bg01_member.svg") no-repeat center right;
	background-size: 163px;
}

/*===========================================================
	ページトップへ戻るボタン
===========================================================*/

#return_top {
	position: fixed;
	bottom: 45px;
	right: 30px;
	border-radius: 50%;
	overflow: hidden;
}

#return_top a {
	padding-top: 45%;
	width: 52px;
	height: 52px;
	display: block;
	background: url("../images/common/return_top_bgimage.svg") no-repeat center top 20% rgba(0,163,182,1);
	background-size: 13px;
	color: #ffffff;
	font-size: 1rem;
	text-align: center;
	opacity: 0.6;
	transition: opacity 0.3s;
}

#return_top a:hover {
	opacity: 1;
}

/*===========================================================
	フッター
===========================================================*/

footer {
	margin-top: 50px;
}

#footer_inner {
	margin: 0 auto;
	padding: 0 20px;
	width: 1040px;
}

#return_home_button {
	margin-bottom: 30px;
	text-align: center;
}

#return_home_button p {
	display: inline-block;
	padding: 1em 3em;
	background: url("../images/common/message_link_bgimage.svg") no-repeat center right 10px #ffffff;
	background-size: 14px;
	border: solid 1px rgba(0,163,182,1);
	border-radius: 5px;
	color: #333333;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	transition: background 0.3s;
}

#return_home_button a:hover p {
	background-color: #e5f6f8;
}

#guideline {
	padding: 1em;
	border: dotted 1px rgba(0,163,182,1);
	text-align: center;
}

#guideline p {
	font-size: 1.6rem;
	font-weight: bold;
}

#guideline ul {
	margin-top: 10px;
	display: inline-block;
	text-align: left;
}

#guideline li {
	margin-top: 5px;
}

#footer_inner2 {
	margin-top: 35px;
	padding: 1em 0;
	min-width: 1040px;
	background-color: #f3f4ea;
}

#footer_flex {
	margin: 0 auto;
	padding: 0 20px;
	width: 1040px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

#footer_flex p {
	flex: 0 0 auto;
}

#footer_address {
	padding-left: 5em;
	position: relative;
	font-size: 2rem;
}

#footer_address span {
	position: absolute;
	left: 1em;
}

#copyright {
	font-size: 1.2rem;
}

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

	.sp_br {
		display: inline;
	}

	/*===========================================================
		ヘッダー
	===========================================================*/

	header {
		min-width: auto;
	}

	#header_inner {
		padding: 0 10px;
		width: 100%;
		overflow: hidden;
	}

	#header_inner p {
		margin-top: 18px;
		font-size: 1rem;
		line-height: 1.3;
	}

	#header_inner h1 {
		margin-top: 10px;
		margin-bottom: 18px;
		font-size: 2rem;
		line-height: 1.3;
	}

	#header_image {
		height: 100px;
	}

	/*===========================================================
		ナビ開閉ボタン
	===========================================================*/

	#menu_button {
		display: block;
		width: 50px;
		height: 50px;
		position: fixed;
		top: 0;
		right: 0;
		background-color: rgba(0,163,182,1);
		z-index: 100;
		cursor: pointer;
		pointer-events: auto;
	}

	#menu_bar{
		width: 34px;
		height: 28px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

	#menu_bar span{
		width: 100%;
		height: 4px;
		background-color: #ffffff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform-origin: center center;
		transform: translateX(-50%) translateY(-50%);
		transition: width 0.3s;
	}

	#menu_bar::before,
	#menu_bar::after {
		content: "";
		display: block;
		width: 100%;
		height: 4px;
		background-color: #ffffff;
		position: absolute;
		transition: all 0.3s;
	}

	#menu_bar::before {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	#menu_bar::after {
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.on #menu_bar span {
		width: 0;
	}

	.on #menu_bar::before {
		top: 50%;
		transform: translateX(-50%) translateY(-50%) rotateZ(-45deg);
	}

	.on #menu_bar::after {
		bottom: 50%;
		transform: translateX(-50%) translateY(50%) rotateZ(45deg);
	}

	/*===========================================================
		グローバルナビ
	===========================================================*/

	nav {display: none;
		margin: 0 auto;
		padding: 0;
		width: 100%;
		position: fixed;
		top: 50px;
		right: 0;
		left: 0;
	}

	nav ul {
		padding: 1em;
		display: block;
		background-color: rgba(255,255,255,0.95);
	}

	nav ul::before,
	nav ul::after {
		display: none;
	}

	nav li {
		overflow: hidden;
		border-bottom: dotted 1px #cccccc;
	}

	nav a {
		padding: 0.7em 2em;
		min-width: auto;
		border: none;
		border-top-right-radius: 0;
		color: #333333;
		font-size: 1.5rem;
	}

	nav a:hover {
		background-color: transparent;
	}

	#message nav .message,
	#member nav .member,
	#area_list nav .area_list,
	#division nav .area_list {
		border-top-right-radius: 0;
	}

	#message nav .message a,
	#member nav .member a,
	#area_list nav .area_list a,
	#division nav .area_list a {
		padding: 1em;
		background-color: transparent;
		border-width: 0;
		border-top-width: 0;
		border-top-right-radius: 0;
	}

	/*===========================================================
		メインコンテンツ
	===========================================================*/

	main {
		margin-top: 25px;
		padding: 0 10px;
	}

	#main_inner {
		margin: 0 auto;
		padding: 30px 10px;
		width: 100%;
		display: block;
	}

	#main_content {
	}

	.content_head01 {
		padding-top: 0;
		font-size: 2rem;
	}

	#area_list .content_head01 {
		background-position: bottom right;
		background-size: auto 60%;
	}

	#message .content_head01 {
		background-position: bottom right;
		background-size: auto 60%;
	}

	#member .content_head01 {
		background-position: bottom right;
		background-size: auto 60%;
	}

	/*===========================================================
		ページトップへ戻るボタン
	===========================================================*/

	#return_top {
		bottom: 0;
		right: 0;
		border-radius: 0;
	}

	#return_top a {
		opacity: 1;
	}

	/*===========================================================
		フッター
	===========================================================*/

	footer {
		margin-top: 25px;
	}

	#footer_inner {
		padding: 0 10px;
		width: 100%;
	}

	#return_home_button {
		margin-bottom: 20px;
	}

	#return_home_button p {
		font-size: 1.5rem;
		font-weight: bold;
	}

	#return_home_button a:hover p {
		background-color: transparent;
	}

	#guideline p {
		font-size: 1.5rem;
	}

	#guideline ul {
		margin-top: 5px;
	}

	#guideline li {
		margin-top: 2px;
	}

	#footer_inner2 {
		margin-top: 30px;
		min-width: 100%;
	}

	#footer_flex {
		padding: 0 15px;
		width: 100%;
		display: block;
	}

	#footer_address {
			font-size: 1.5rem;
			text-indent: 0;
			text-align: center;
		padding-left: 0;
	}

	#footer_address span {
		position: relative;
		left: auto;
	}

	#copyright {
		margin-top: 10px;
		font-size: 1rem;
		text-align: center;
	}

}