@charset "utf-8";

body { font-family: 'Noto Sans JP', sans-serif; /*font-family: 'Noto Serif JP', serif;*/ font-size: 16px; line-height: 1.2em; font-weight: normal; color: #333;}
/* ページトップボタン */
#page-top { position: fixed; right: 20px; }
#page-top a { display: block; width: 68px; height: 79px; background: url("../img/arrow.png")top no-repeat;}
.hyoji { display: none;}
/*アンカータグ用*/
.con_inner { padding-top: 30px; margin-top: -30px; overflow: hidden;}
* img { vertical-align: bottom;}
* { box-sizing: border-box;}
#wrap {}

/*header*/
header { width: 100%; min-width: 1100px; overflow: hidden; }
#head_menu_area { position: fixed; z-index: 100; width: 100%; border-top: solid 10px #A3CA20; background: #fff;}
#logo_menu { display: flex; align-items: center; justify-content: space-between; height: 90px; max-width: 1200px; min-width: 1100px;; width: 100%; margin: 0 auto; }
#logo { width: 461px; margin-left: 20px; }
#computer { display: flex; font-weight: bold; margin-right: 20px; }
#logo img { width: 100%; height: auto; }
/*pc*/
#computer a { color: #333; text-decoration: none; }
#computer li { margin-left: 30px;}
#computer li img { margin-left: 5px; margin-bottom: 1px; }
#computer li:first-child { margin-left: 0;}
#computer li a { position: relative; display: inline-block; margin-bottom: 1em; }
#computer li a:before { content: ''; position: absolute; left: 50%; bottom: -15px;/*線の上下位置*/ display: inline-block; width: 20px;/*線の長さ*/ height: 5px;/*線の太さ*/ -webkit-transform: translateX(-50%); transform: translateX(-50%);/*位置調整*/ background-color: #A4343A;/*線の色*/ transition: width 0.3s }
#computer li a:hover:before { width: 100%;}
/*mobile*/
#mobile { display: none; }
/*タイトル*/
.title_area { width: 100%; padding: 0 8%; margin-top: 100px; text-align: center; }
.titles  { max-width: 330px; width: 100%; padding: 44px 0.3em 0; margin: 0 auto; height: 60px; background: #fff; text-align: center; font-size: 24px; font-weight: bold; line-height: 0; letter-spacing: 2px; }
.titles span { background: linear-gradient(to top, #e1e8c6 0%, #e1e8c6 50%, #fff 50%, #fff 100%); padding: 0 0.3em;}
.titles2 { max-width: 330px; width: 100%; padding: 44px 0.3em 0; margin: 0 auto; height: 60px; background: #E1E8C6; text-align: center; font-size: 24px; font-weight: bold; line-height: 0; letter-spacing: 2px;}
.titles2 span { background: linear-gradient(to top, #fff 0%, #fff 50%, #e1e8c6 50%, #e1e8c6 100%); padding: 0 0.3em;}
.titles3 { max-width: 330px; width: 100%; padding: 44px 0.3em 0; margin: 0 auto; height: 60px; background: #F5F5F5; text-align: center; font-size: 24px; font-weight: bold; line-height: 0; letter-spacing: 2px;}
.titles3 span { background: linear-gradient(to top, #e1e8c6 0%, #e1e8c6 50%, #f5f5f5 50%, #f5f5f5 100%); padding: 0 0.3em;}


/*メインコンテンツ*/
main { margin: 80px auto 0 auto; min-width: 1100px;; }
/*footer*/
footer { background: #A3C636; padding: 12px 5%; min-width: 1100px;; }
#copy{ color: #fff; font-size: 13px; text-align: center; margin: 0 auto;}
	.kaigyou { display: none;}
	.kaigyou2 { display: none;}


@media screen and (max-width: 800px) {
	/*header*/
	header { min-width: auto; }
	#logo_menu { max-height: 90px; max-width: auto; min-width: auto; width: 100%; height: 80px; margin: 0; padding: 0 5%;}
	#logo { max-width: 260px; min-width: 66px; width: 100%;  margin-left: 0; margin-right: 65px; }
	#logo img { width: 100%; height: auto; }
	/*pc*/
	#computer { display: none; }
	/*ヘッダーイメージ*/
/*タイトル*/
	.title_area { margin-top: 50px}
	.titles  { max-width: 250px; width: 100%; padding-top: 0px; height: 50px; font-size: 24px; padding: 35px 0 0; margin: 0 auto;}
	.titles2 { max-width: 250px; width: 100%; padding-top: 0px; height: 50px; font-size: 24px; padding: 35px 0 0; margin: 0 auto; }
	.titles3 { max-width: 250px; width: 100%; padding-top: 0px; height: 50px; font-size: 24px; padding: 35px 0 0; margin: 0 auto; }
	.titles3 { max-width: 250px; width: 100%; padding-top: 0px; height: 50px; font-size: 24px; padding: 35px 0 0; margin: 0 auto; }
	 
	/*メインコンテンツ*/
	main { min-width: auto; width: 100%; margin: 30px 0 0 0; }
	/*footer*/
	footer { min-width: auto; }
	.kaigyou { display: none;}
	.kaigyou2 { display: block;}
	
	
}
@media screen and (max-width: 400px) {
	.kaigyou { display: block;}
	.kaigyou2 { display: block;}
}