@charset "utf-8";
/* ================================================================================
色設定
================================================================================ */

/* 見出し */
h1.title {
  color: #fff;
}

/* ヘッダー */
header {
  box-shadow: 0px 1px 3px #333;
}
header p {
  color: #fff;
}

/* ナビゲーション */

ul.main_nav { border-right:1px solid #fff; border-left:1px solid #fff; }
ul.main_nav li { border-right:1px solid #fff; color: #fff; }
ul.main_nav li:last-child { border-right:none;}
ul.main_nav li a:link, ul.main_nav li a:visited { color:#fff; border-bottom:5px solid transparent; }
ul.main_nav li a:active, ul.main_nav li a:hover { color:#fcc800; border-bottom:5px solid #fcc800; }
.open {color:#fcc800; border-bottom:5px solid #fcc800;}


/* イントロ */
div.intro {
  box-shadow: inset 0 -1px 2px #ccc;
}

/* フッター */
footer p {
  color: #535353;
}

/* ================================================================================
汎用設定CSS
================================================================================ */

/* 画像 */
img.m_auto { margin:auto; }

/* 横幅 */
div.w {
  margin: auto;
  width: 960px;
}

/* 見出し */
h1.title {
  background-image: url("../img/header_back.png");
  border-radius: 10px;
  font-size: 2rem;
  font-weight: 600;
  padding: 10px 20px;
  position: relative;
  margin: 0 0 30px 0;
  z-index: 1;
}
h1.title::before {
  content: "";
  display: grid;
  position: absolute;
  bottom: -20px;
  left: 60px;
  height: calc(tan(60deg) * 60px / 2);
  width: 60px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background-image: url("../img/header_back.png");
  transform: rotate(180deg);
  z-index: -1;
}

/* ヘッダー */
header {
  background-image: url("../img/header_back.png");
  width:100vw;
  position: relative;
  z-index: 2;
}
div.header_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0 10px 0;
}

/* ナビゲーション */
ul.main_nav { display:flex; justify-content:space-between; align-items:flex-start; margin:10px 0 0 0; }
ul.main_nav li { box-sizing:border-box; font-size:17px; font-weight:600; width:137px; height:42px;}
ul.main_nav li a { box-sizing:border-box; display:block; text-align:center;margin-top: 6px; }


/* イントロ */
div.intro-top {
  background-image: url("../img/main_back.jpg");
  padding: 10px 0 20px;
}
div.intro {
  background-image: url("../img/main_back.jpg");
  height: 150px;
}
div.intro div.table {
  height: 150px;
}
div.intro div.intro_title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
div.intro div.intro_title hgroup {
  margin: 0 50px 0 0;
}
div.intro div.intro_title h1 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.25;
}
div.intro div.intro_title p {
  text-indent: 0.5rem;
}
div.intro_img img {
  height: 100px;
}

/* メイン */
main {
  padding: 60px 0;
}

/* フッター */
footer {
  background-image: url("../img/footer_back.jpg");
  padding: 30px 0 50px 0;
}
footer p {
  font-size: 1.4rem;
  line-height: 2.5;
}

footer div.foot_flex { display:flex; justify-content:center; align-items:flex-start; }
footer div.foot_flex div.foot_youtube { margin:0 0 0 20px; }

#pagenation { margin:30px auto; }

#pagenation:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#pagenation #pagenation-list li{
	float: left;
	background: none;
	list-style: none;
	padding: 0;
	margin: 0 5px 5px 0;
}
#pagenation #pagenation-list li:last-child{
	margin-left: 0;
}
#pagenation #pagenation-list a,#pagenation #pagenation-list span{
	background: none;
	display: block;
	margin: 0;
	padding: 6px 11px;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}
#pagenation #pagenation-list .current{
	background: #5B9737;
	color: #FFFFFF;
}
#pagenation #pagenation-list .omit{
	padding: 6px 2px;
	color: #777777;
}
#pagenation #pagenation-list li a{
	background: #D3E6C8;
	color: #333333;
	text-decoration: none;
}
#pagenation #pagenation-list a:hover{
	background: #5B9737;
	color: #FFFFFF;
	text-decoration: none;
}

