@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP');

body{
    font-family: 'Noto Serif JP', sans-serif;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* 大きい画面対応 */
@media screen and (min-width: 821px){
	.header{
		width: 100%;
	}
	#header_info{
		display: inline;
		font-weight: bold;
		float:right;
		font-size: 1em;
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
	}
	#header_icon_sma{
		display: none;
	}
	#header_tel_sma{
		display: none;
	}
	#header_title_sma{
		display: none;
	}
	.hamburger_menu{
		display:none;
	}
	/*メニューのCSS*/


	.menu_bar ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		background-color: #1b2538;
	}
	.menu_bar li {
		font-size: 1em;
		list-style-type: none;
		float: left;
		border-left: 0.1rem solid #bbbbbb;
	}
	.menu_bar li:first-child {
		border-left: none;
	} 
	#menu_bar_menu{
		display: block;
		color:black;	
		text-align: center;
		padding: 0.5rem 0.75rem;
		font-weight: bold;
	}
	.menu_bar li a {
		display: block;
		color:black;	
		text-align: center;
		padding: 0.5rem 0.75rem;
		font-weight: bold;
	}
	.menu_bar li a:hover:not(.active) {
		background-color: rgba(106, 168, 240, 0.877);
	}
	.active {
		background-color: rgba(106, 168, 240, 0.877);
	} 
	/*ここまでメニューバー*/

	/* アイコン */
	.top_pic{
		width:100%;
	}
	
	/* お知らせ＆主な業務 */
	.flex_containar_newsabout{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	/* 主な業務 */
	.flex_containar{
		display: flex;
		text-align: center;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.about h2{
		padding: 0.5em 0;/*上下の余白*/
		border-top: solid 3px #02b3b7;/*上線*/
		border-bottom: solid 3px #02b3b7;/*下線*/
		text-align: center;
	}
	.about h3{
		/* text-decoration:underline;
		text-decoration-color:#962329 */
		border-bottom: solid 3px #962329 ;
	}
	.mainWork {
		text-align: center;
	}



	/* お知らせ */
	.iframe1{
		width: 100%;
		text-align: center;
	}
	#iframe_news{
		width: 600px;
		height: 50em;
		text-align: center;
	}
	.news h2{
		width: 100%;
		text-align: center;
		padding: 0.5em 0;/*上下の余白*/
		border-top: solid 3px #02b3b7;/*上線*/
		border-bottom: solid 3px #02b3b7;/*下線*/
	}
	.news h3{
		text-align: center;
		padding: 0.5em 0;/*上下の余白*/
		border-bottom: solid 2px #02b3b7;/*下線*/
	}

	/* アクセス */
	.access h2{
		text-align: center;
		padding: 0.5em 0;/*上下の余白*/
		border-top: solid 3px #02b3b7;/*上線*/
		border-bottom: solid 3px #02b3b7;/*下線*/
	}
	.access h3{
		text-align: center;
		padding: 0.5em 0;/*上下の余白*/
		border-bottom: solid 2px #02b3b7;/*下線*/
	}

	.flex_containar1{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: space-around;
		margin-right: 2em;
	}
	#description{
		text-align: center;
	}
	#trian{
		text-align: center;
	}
	.access_title{
		border-bottom: solid 3px #962329 ;
	}
}


/* ーーーーーーーーーーーーーーーーーーーーーースマホ対応ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーースマホ対応ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーースマホ対応ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media screen and (max-width: 820px){
	.header{
		width: 100%;
	}
	#header_info{
		display: none;
	}
	#header_info p{
		display: none;
	}
	#header_title{
		display: none;
	}
	#header_tel_sma{
		width:100%;
		text-align: center;
	}
	#header_tel{
		display: none;
	}
	#header_title_sma{
		width: 80%;
	}
	@media screen and (max-width:550px){
		#header_title_sma{
			width: 80%;
			float: left;
		}
	}
	#header_icon_sma{
		text-align: center;
	}
	#header_info{
		display: inline;
		float:left;
		font-size: 1em;
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
	}
	#header_tel{
		width: 80%;
		float: left;
	}
	.menu_bar{
	    display: none;
    }
    .menu_bar_nav{
	    display:none;
    }
	/* input非表示 */
	.input-hidden{
		display: none;
	}
		/* label */
	.hamburger_switch{
		cursor: pointer;
		position: absolute;
		right: 1%;
		top: 0;
		z-index: 9999;
		width: 4em;
		height: 4em;
	}
	/* メニュー展開時にハンバーガーアイコンを固定 */
	#hamburger1:checked ~ .hamburger_switch{
		position: fixed;
	}
	/* 円を用いたハンバーガーデザイン */
		/* 外側の円 */
	.hamburger_switch:before{
		content: "MENU";
		color:#02b3b7;
		text-align: center;
		position: absolute;
		width: 3.5em;
		height:1.5em;
		top: 55%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 2px dotted #02b3b7; /* 外側の円（枠線）の色 */
	}
		/* 上下の線 */
	.hamburger_switch_circle:before, .hamburger_switch_circle:after{
		position: absolute;
		color: #fff;
		width: 20px;
		top: 50%;
		left: 50%;
		transition: .3s;
	}
	/* アイコン･アニメーション */
	#hamburger1:checked ~ .hamburger_switch .hamburger_switch_circle{
		height: 25px;
		border-radius: 50%;
	}
	#hamburger1:checked ~ .hamburger_switch .hamburger_switch_circle:before{
		width: 0;
	}
	#hamburger1:checked ~ .hamburger_switch .hamburger_switch_circle:after{
		width: 0;
	}
		/* 真ん中の×印 */
	.hamburger_switch:after{
		content: "";
		font-size: 0px;
		position: absolute;
		color: #02b3b7; /* ハンバーガーの"×"マークの色 */
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		transition: .2s;
	}
	#hamburger1:checked ~ .hamburger_switch:after{
		font-size: 25px;
	}
	/* メニューエリア */
	.hamburger_menuwrap{
		position: fixed;
		height: 100%;
		background: #fafafa; /* メニューエリアの背景色 */
		padding: 5em 3% 2em;
		z-index: 9998;
		transition: .3s;
		overflow-y: scroll; /* メニュー内容が多い場合に縦スクロール */
		top: 0;
		left: 100%;
		width: 70%;
	}
	/* メニューリスト */
	.hamburger_menulist{
		margin-right: 3%;
		padding-left: 5% !important; /* !important不要な場合あり */
		list-style: none;
	}
	.hamburger_menulist li{
		list-style: none;
	}

	.hamburger_menulist li a{
		text-decoration: none;
		color: #333; /* メニューエリアの文字色 */
		display: block;
	}
		/* 円を用いたメニューリスト */
	.hamburger_menulist_circle li{
		border: 1px solid;
		margin-bottom: 5px;
		border-radius: 2em;
	}
	.hamburger_menulist_circle li a{
		padding: .5em 2.5em .5em 1em;
		position: relative;
	}
	.hamburger_menulist_circle a:before{
		content: "";
		position: absolute;
		width: 1.5em;
		height: 1.5em;
		background: #02b3b7; /* メニューリスト矢印背景（円）の色 */
		border-radius: 50%;
		top: 50%;
		right: 2.0em;
		transform: translate(0, -50%);
	}
	.hamburger_menulist_circle a:after{
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border: 2.5px solid;
		border-color: #fff #fff transparent transparent; /* メニューリスト矢印の色（#fffのみ変更） */
		top: 50%;
		right: 2.0em;
		transform: translate(-80%, -50%) rotate(45deg);
	}
	/* メニューエリア･アニメーション */
		/* 右から */
	#hamburger1:checked ~ .hamburger_menuwrap{
		left: 30%;
	}
		/* コンテンツカバー */
	#hamburger1:checked ~ .hamburger_cover{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 9997;
		background: rgba(3,3,3,.5);
		display: block;
    	}


	/* アイコン */
	.top_pic{
		width:100%;
	  }
	  
	
	/* 主な業務 */
	.flex_containar{
		display: flex;
		text-align: center;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.about h2{
		padding: 0.5em 0;/*上下の余白*/
		border-top: solid 3px #02b3b7;/*上線*/
		border-bottom: solid 3px #02b3b7;/*下線*/
		text-align: center;
	  }
	.about h3{
		/* text-decoration:underline;
		text-decoration-color:#962329 */
		 border-bottom: solid 3px #962329 ;
	  }
	
	
	
	  /* お知らせ */
	#iframe_news{
		width: 100%;
		height: 20em;
		text-align: center;
	  }
	.news h2{
		text-align: center;
		padding: 0.5em 0;/*上下の余白*/
		border-top: solid 3px #02b3b7;/*上線*/
		border-bottom: solid 3px #02b3b7;/*下線*/
	  }
	.news h3{
		text-align: center;
		padding: 0.5em 0;/*上下の余白*/
		border-bottom: solid 2px #02b3b7;/*下線*/
	  }
	  .mainWork {
		text-align: center;
	}


	  /* アクセス */
	.access h2{
		text-align: center;
		padding: 0.5em 0;/*上下の余白*/
		border-top: solid 3px #02b3b7;/*上線*/
		border-bottom: solid 3px #02b3b7;/*下線*/
	}
	.access h3{
		text-align: center;
		padding: 0.5em 0;/*上下の余白*/
		border-bottom: solid 2px #02b3b7;/*下線*/
	}
	
	.flex_containar1{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: space-around;
		margin-right: 2em;
	}
	#description{
		text-align: center;
	}
	#trian{
		text-align: center;
	}
	.access_title{
		border-bottom: solid 3px #962329 ;
	}
}
/* ここまでトップページ */

/* フッター */
.footer{
	margin-top:3em;
	display: block;
}
.footer p{
	text-align: center;
	font-weight: bold;
	border-top: solid 2px black;
}