html{
	margin:0;
	padding:0;
	font-family: 'Noto Serif JP', "Yu Mincho",  serif;
}
body{
	margin:0;
	padding:0;
}
body a:hover{
	opacity: 0.6;
	outline: none;
}
.cf{
	clear:both;
}
.white {
	color: #fff;
}

/*** resp_autowrap **********************************/
.resp_autowrap {
	display: inline-block;
 vertical-align: bottom;
 word-spacing: normal;
 margin: 0em;
}

/* アンカー移動のズレを調整　ハック ***************************************/
span.anchorlink {
	position: relative;
	top: -160px;
	display: block;
}
@media screen and (max-width: 920px) {
span.anchorlink {
	top: -200px; 
}
}
@media screen and (max-width: 768px) {
span.anchorlink {
	top: -130px; 
}
}
@media screen and (max-width: 480px) {
span.anchorlink {
	top: -100px; 
}
}

#top{
	padding-top: 60px;
}

/*************************************************************************************************************/
.sp{
	display:none;
}
h1,h2,h3,h4{
	margin: 0;
	padding: 0;;
}
p{
	font-size: 16px;
	margin: 0;
	padding: 0;
}
ul{
	margin: 0;
	padding: 0;
}
ul li{
	list-style: none;
}
img{
	width:100%;
	height:auto;
}
a {
	text-decoration: none;
}

@media screen and (max-width: 768px) {
.pc{
	display:none;
}
.sp{
	display: block;
}
h3{
	font-size: 32px;
}
}
@media screen and (max-width: 480px) {
	h3{
	font-size: 24px;
}
p{
	font-size: 14px;
}
}


/*************************************************************
topへ戻る用
returnToTop
*************************************************************/
#returnToTop {
	position: fixed;
	bottom: 0px;
	right: 40px;
	display: none;
	font-size: 10px;
	z-index:100;
}
#returnToTop a {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 6px 6px 0 0;
	background-color:rgba(31,39,92,0.9);
	text-decoration: none;
	color: #ffffff;
	text-align: center;
	line-height: 40px;
	-webkit-transition: .1s ease-in-out;
	-moz-transition: .1s ease-in-out;
	-o-transition: .1s ease-in-out;
}
#returnToTop a:hover {
	padding-bottom: 8px;
}
@media screen and (max-width: 768px) {
#returnToTop {
	right: 20px;
}
}


/*************************************************************************************************************

header

*************************************************************************************************************/
header{
	height: 60px;
	margin-top: -60px;
	padding: 0;
	display: flex;
	align-content: center;
	background-color: #fff;
	position: fixed;
	left: 0;
	right:0;
	z-index: 100;
	box-shadow: 0 1px 8px 0 rgba(20,20,20,0.2);
}
header .header-wrap {
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header .header-wrap ul{
	height: 60px;
	display: flex;
	padding: 0;
	margin: 0;
}
header .header-wrap ul li{
	display: flex;
	max-width: 180px;
	box-sizing: border-box;
	margin: 0;
	position:relative;/*絶対値指定の親要素に必要*/
}
header .header-wrap ul li a{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #44829c;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-align: center;
	width: 100%;
	/*liから移動*/padding: 20px 18px;
	font-family: "Marion Bold", "Marion Regular", Garamond, "Garamond Bold";
}
header .header-wrap ul li:before {
	content:"";
	position:absolute;
	right: 0%; /*横位置の指定*/
	top: 38%; /*縦位置の指定*/
	background: #44829c;/*線の色指定*/
	width: 1px;/*線の幅指定*/
	height: 14px;/*線の高さ指定*/
}
header .header-wrap ul li:last-child{
	margin-right: 0;
}
header .header-wrap ul li a:hover{
	background-color: rgba(68,130,156,1.00);
	color: #fff;
	opacity: 0.9;
	}

@media screen and (max-width: 920px) {
header{
	height: 100px;
	}
header .header-wrap ul{
	height: 100px;
	flex-wrap: wrap;
	width: min(100%, 800px);
	margin-right: 20px;
}
header .header-wrap ul li{
	width: calc(100% / 4);
	max-width: 200px;
	justify-content: space-between;
}
header .header-wrap ul li:before {
	top: 38%; /*縦位置の指定*/
	width: 1px;/*線の幅指定*/
	height: 12px;/*線の高さ指定*/
}
header .header-wrap ul li a{
	margin: 0 auto;
	padding: 14px 20px;
	text-align: center;
}
header .header-wrap ul li:nth-child(5),
header .header-wrap ul li:nth-child(6),
header .header-wrap ul li:nth-child(7),
header .header-wrap ul li:nth-child(8),
header .header-wrap ul li:last-child{
/*	width: calc(100% / 5);*/
	/*max-width: 200px;*/
	}
}
@media screen and (max-width: 768px) {
header .pc {
	display: none;
}
}

header .twitter{
	margin-top: 6px;
	margin-right: 20px;
}
header .header-wrap .twitter a{
	text-decoration: none;
	vertical-align: middle;
}
header .header-wrap .twitter img{
	width:100%;
	max-width: 32px;
	height: auto;
}
@media screen and (max-width: 920px) {
header .header-wrap .twitter img{
	max-width: 36px;
	height: auto;
}
}

/**************************************************

ハンバーガーメニュー

**************************************************/
@media screen and (max-width: 768px) {
header{
	height: 60px;
	margin-top: -60px;
	}
header .twitter{
	position: absolute;
	top: 12%;
	left: 20px;
	z-index: 100;
}
header .twitter img{
	width:100%;
	max-width: 34px;
	height: auto;
}

header .logo{
	position: absolute;
	width: 160px;
	top: 14%;
	left: calc(50% - 80px);
	z-index: 100;
}
header .logo img{
	width:100%;
	max-width: 200px;
	height: auto;
}
	
/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
	top:11px;
	right: 24px;
	z-index: 9999;/*ボタンを最前面に*/
	cursor: pointer;
	width: 40px;
 height:40px;
}
	
/*×に変化*/	
 .openbtn span{
 display: inline-block;
 transition: all .6s;
	position: absolute;
	right: 0;
	left: 12px;
 height: 2px;
 border-radius: 2px;
	background-color: #44829c;
 width: 70%;
}

 .openbtn span:nth-of-type(1) {
	top:8px;	
}
 .openbtn span:nth-of-type(2) {
	top:18px;
}
 .openbtn span:nth-of-type(3) {
	top:28px;
}
 .openbtn.active span:nth-of-type(1) {
	top: 14px;
 left: 6px;
 transform: translateY(6px) rotate(-45deg);
 width: 70%;
}
 .openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
 .openbtn.active span:nth-of-type(3){
	top: 27px;
 left: 6px;
 transform: translateY(-6px) rotate(45deg);
 width: 70%;
}
	
/**************************************************

背景が左から

**************************************************/

/*========= ナビゲーションのためのCSS ===============*/
#g-nav{
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position:fixed;
	z-index: 99;
	/*ナビのスタート位置と形状*/
	top:0;
 right: -120%;
	width:100%;
 height: 100vh;/*ナビの高さ*/
	background: rgba(255,255,255,1.0);
 /*動き*/
	transition: all 0.6s;
}
	
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
	right: 0;
}

/*ナビゲーションの縦スクロール*/
 #g-nav-list{
	display: none;/*はじめは表示なし*/
	/*ナビの数が増えた場合縦スクロール*/
 position: fixed;
 z-index: 999; 
 width: 100%;
	height: 100vh;
 overflow: auto;
	-webkit-overflow-scrolling: touch;
}
 #g-nav.panelactive #g-nav-list{
	display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
 #g-nav ul {
		opacity: 0;/*はじめは透過0*/
		/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
		position: absolute;
		z-index: 999;
		top: 12%;
		left: 0;
		right: 0;
		transform: translate(0%,-12%);
		margin: 0 auto;
		padding: 0 0 16px;
		
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
}	

/*背景が出現後にナビゲーションを表示*/
 #g-nav.panelactive ul {
	opacity:1;
		border-top: 1px solid rgba(68,130,156,0.6);
}
/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
 #g-nav.panelactive ul li{
	animation-name:gnaviAnime;
	animation-duration:1s;
	animation-delay:.2s;/*0.2 秒遅らせて出現*/
	animation-fill-mode:forwards;
	opacity:0;
}

 #g-nav li{
	width: 50%;
	/*margin: 0 auto 24px;*/
	text-align: center; 
	list-style: none;
	font-size: 1.4rem;
	font-size: 14px;
	border-bottom: 1px solid rgba(68,130,156,0.6);
	position: relative;
	}
	#g-nav li:nth-child(2n+1)::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(68,130,156,0.6);
}
/*	#g-nav li:first-child{
		width: 100%;
	}*/
 #g-nav li a{
		display: block;
		text-decoration: none;
		padding: 12px 0;
		text-transform: uppercase;
		line-height: 3em;
		letter-spacing: 0.1em;
		color: #44829c;
		opacity: 1.0;
}
	#g-nav li a:hover{
		color: #ededed;
		background-color: #44829c;
	}
}

@media screen and (max-width: 480px) {
 #g-nav ul {
		top: 106px;
}	
 #g-nav li{
	font-size: 13px;
}
}

@keyframes gnaviAnime{
0% { opacity: 0; }
100% { opacity: 1; }
}


/*************************************************************************************************************

footer

*************************************************************************************************************/
footer{
	height: 30px;
	background-color:	#fff;
	padding: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}
footer p{
	font-size: 10px;
	text-align: center;
}
footer p a{
	color: #000;
}
@media screen and (max-width: 480px) {
footer{
	padding: 10px;
}
}