/* Unchanged */
@charset "UTF-8";
/****************************************************************************
　sp_common.css
--------------------------------------------------------
   Author : Yasuo Tominaga @ penpengusa
   Group : http://www.penpengusa.com
   Creation date : 2017.09.07
   Last up date   : 2017.09.07
****************************************************************************/

/* CSS Document */

@media screen and (max-width:768px) {
	body {
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
		-webkit-text-size-adjust: 100%;
		text-decoration: none;
	}
	li {
		list-style-type: none
	}
	a:link,
	a:visited {
		color: #000;
		text-decoration: none;
	}
	a:hover {
		color: #2F77C2;
		text-decoration: none;
	}
	a:link,
	a:visited img {
		border-width: 0px;
		border: none;
	}
	a:link img {
		border: none;
	}
	.clearfix:after {
		content: ".";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
	.clearfix {
		min-height: 1px;
	}
	* html .clearfix {
		height: 1px;
		/*\*/
		/*/
  height: auto;
  overflow: hidden;
  /**/
	}
	/*要素のフォントサイズやマージン・パディングをリセットしています
	html,
	body,
	div,
	span,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	abbr,
	address,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	samp,
	small,
	strong,
	sub,
	sup,
	var,
	b,
	i,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section,
	summary,
	time,
	mark,
	audio,
	video {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}*/
	
	/*行の高さをフォントサイズと同じにしています*/
	body {
		line-height: 1.4;
	}
	/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
		display: block;
	}
	/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
	/*nav ul {
    list-style:none;
}*/
	ol,
	ul {
		list-style: none;
	}
	/*引用符の表示が出ないようにしています*/
	blockquote,
	q {
		quotes: none;
	}
	/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
		content: '';
		content: none;
	}
	/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
	a {
		margin: 0;
		padding: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
	ins {
		background-color: #ff9;
		color: #000;
		text-decoration: none;
	}
	/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
	mark {
		background-color: #ff9;
		color: #000;
		font-style: italic;
		font-weight: bold;
	}
	/*テキストに打ち消し線が付くようにしています*/
	del {
		text-decoration: line-through;
	}
	/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
	abbr[title],
	dfn[title] {
		border-bottom: 1px dotted;
		cursor: help;
	}
	/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
	hr {
		display: block;
		height: 1px;
		border: 0;
		border-top: 1px solid #cccccc;
		margin: 1em 0;
		padding: 0;
	}
	/*縦方向の揃え位置を中央揃えに指定しています*/
	input,
	select {
		vertical-align: middle;
	}
	/*画像を縦に並べたときに余白が出てしまわないように指定しています*/
	img {
		vertical-align: top;
		font-size: 0;
		line-height: 0;
	}
	html {
		font-size: 62.5%;
	}
	body {
		font-size: 10px;
		font-size: 1.0rem;
		color: #333333;
	}


/* --- 共通設定 --- */
section {
	width: 100%;
	display: block;
}
section#title {
	text-align: center;
	display: block;
	width: 100%;
	max-height: 200px;
	overflow: hidden;
}
section#title h2 {
	font-size: 30px;
	font-family: 'Zilla Slab', serif;
	line-height: 1.0;
	font-weight: bold;
	padding-bottom: 5px;
	display: block;
	margin-bottom: 10px;
	letter-spacing: 0.2em;
}
section#title h3 {
	font-size: 32px;
	font-family: 'Zilla Slab', serif;
	line-height: 1.0;
	font-weight: bold;
	padding-bottom: 5px;
	display: inline-block;
	margin-bottom: 10px;
}
section#title h5 {
	font-size: 14px;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	line-height: 1.0;
}
section.colorA { background: #2F77C2; }
section.colorA h2 { color: #CFEBFE; }
section.colorA h3 { color: #FFF; border-bottom: 3px solid #FFF; }
section.colorA h5 { color: #CFEBFE; }
section.colorB { background: #CFEBFE; }
section.colorB h3 { color: #2F77C2; border-bottom: 3px solid #2F77C2; }
section.colorB h5 { color: #3FA2EE; }

section.typeA {
	padding: 95px 0 30px 0;
}
section.typeB {
	padding: 95px 0 30px 0;
}
section.typeC {
	padding: 70px 0 15px 0;
}




/* --- 共通ヘッダ --- */
header {
	width: 100%;
	height: 60px;
	background: #FFF;
	padding: 0 0 0 0;
	margin: 0;
	position:fixed;
	display:dsiplay;
	z-index:10000;
}
header h1 {
	position: absolute;
	left: 10px;
	top: 13px;
}
header h1 img {
	height: 35px;
}
/* Toggle(Button) */
#navToggle {
	display: none;
	position:absolute;/*to body*/
	right:20px;
	top:20px;
	width:30px;
	height:25px;
	cursor:pointer}
#navToggle div {position:relative}
#navToggle span {
	display:block;
	position:absolute;/*to div*/
	width:100%;
	border-bottom:solid 3px #000;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out}
#navToggle span:nth-child(1) {top:0}
#navToggle span:nth-child(2) {top:11px}
#navToggle span:nth-child(3) {top:22px}

header nav {
	position:absolute;
	right:0;
    top:-300px; /*通常時はビュー外*/
	background:rgba(255,255,255,.9);
    width:80%;
	padding:0 10px;
	-webkit-transition:.5s ease-in-out;
	-moz-transition:.5s ease-in-out;
	-o-transition:.5s ease-in-out;
	transition:.5s ease-in-out;
	text-align:left}
header ul {
	margin:0;
	font-size: 16px;
}
header ul li {
	display:block;margin:0;border-bottom:dotted 1px #CCC; line-height:3;
	font-family: 'Zilla Slab', serif;
}
header ul li span {
	display: inline-block;
	padding-top: 8px;
	float: right;
	font-size: 12px;
	font-family: "メイリオ", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku GothicPro", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
header ul li a {display:block}
header ul li::after {content:''}
header ul li:last-child {border-bottom:none}
/* Toggle(Button) */
#navToggle {display: block}
/* Click Toggle(Button) */
.openNav #navToggle span:nth-child(1) {
	top: 11px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg)}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
	top: 11px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg)}
/*header menu*/
.openNav nav {
	-moz-transform: translateY(351px);
	-webkit-transform: translateY(351px);
	transform: translateY(351px)
}




header .pcBox ul li {
	float: left;
	padding: 0;
	margin: 0 0 0 80px;
	font-family: 'Zilla Slab', serif;
	line-height: 1.0;
	display: inline-block;
	font-size: 20px;
	text-align: center;
}
header .pcBox ul li span{
	float: left;
	padding: 15px 0 0 0;
	font-family: "メイリオ", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku GothicPro", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	line-height: 1.0;
	font-size: 12px;
	display: block;
	text-align: center;
	width: 100%;
}

/* --- pagetop --- */

.pagetop {
	bottom: 50px;
	z-index:1000;
}

.pagetop a {
	width: 50px;
	height: 50px;
}



.pcLayer,
img.pcImg {
	display: none;
}
.spLayer, 
img.spImg {
	display: block;
}





} /**** END media screen *****/