@charset "utf-8";
/*---------------------------------------------------------------
single.css
-----------------------------------------------------------------
table of contents

	1. Override
	2. Layout
	3. Media Queries
-----------------------------------------------------------------
/*===============================================================

	1.	Override

===============================================================*/
#gHeader{
	padding-bottom: 15px;
	margin-bottom: 0;
}
footer{
	bottom:0;
}
#container{
	margin-bottom: 0;
}
h2{
	margin: 0;
	background-image: none;
}
h3,h4{
	margin:0;
}
#gl_header {
	background-color:#FFF;
}
#gl_header #gl_nv .drop_down {
	z-index:10;
}
#gl_footer {
	position:absolute;
	bottom:0 !important;
	left:0;
	width:100%;
	z-index:0;
}
#move-page-li{
	width: 70px;
}
#sp_nav_wrap{
	display: none;
}

/*===============================================================

	2.	Layout

=================================detail==============================*/


/* title-area */
#contents-wrap{
	position: relative;
	border-top: 1px solid #dedede;
	height: auto;
}
#front-wrap{
	position: absolute;
	z-index: 10;
	width: 100%;
	min-width: 1040px;
	min-height: 100%;
	overflow: hidden;
	padding-bottom: 194px;
}
.bg{
	background-color: #000;
	width: 100%;
	min-width: 1040px;
	position: fixed;
	top:0;
	background-image:url('../images/common/bg_main.jpg');
	background-position: center 315px;
	background-repeat: repeat-y;
	display: none;
	height: 1000px;
}
.bg .top{
	height: 500px; /* correct height 315px */
	background-image:url('../images/common/single/bg_main_top.jpg');
	background-position: center -230px;
	background-repeat: no-repeat;
	width: 100%;
}
.bg .bottom{
	height: auto;
	width: 100%;
}
h2.title-sp{
	display: none;
}
#title-wrap{
	position: relative;
	padding-top: 40px;
}
#title-wrap .ol{
	position: absolute;
	top:10px;
	left: 50%;
	width: 600px;
	height: 150px;
	z-index: 10;
	cursor: pointer;
	margin-left: -300px;
}
#title-wrap .bg-sp{
	display: none;
}
.title-inner{
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
#title-wrap .ti-sub{
	margin-bottom: 13px;
}
#title-wrap h1{
	margin-bottom: 5px;
}
#title-wrap .ti_bottom_txt{
	margin-bottom: 77px;
}
#title-wrap .num-sp{
	display: none;
}

/* contents */
#contents{
	width: 100%;
	min-height: 550px;
	text-align: center;
	position: relative;
	padding-bottom: 45px;
}
#main-image{
	width: 100%;
	height: 190px;
	background-color: #0c0f11;
}
#main-image .wrap{
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	color: #9ba1a9;
	padding-top: 25px;
}
#main-image .wrap .title{
	font-size: 15px;
	margin-bottom: 13px;
	line-height: 15px;
	visibility: hidden;
}
#main-image .flow-wrap{
	position: relative;
	width: 100%;
}
#main-image .flow-wrap .line-flow{
	height: 1px;
	width: 0px;
	border-bottom: 1px solid #3c3e40;
	left: 177px;
	top:63px;
	display: block;
	position: absolute;
}
#main-image .flow-wrap ul{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 110px;
}
#main-image .flow-wrap li{
	display: block;
	height: 110px;
	float: left;
	text-align: center;
	position:relative;
}
#main-image .flow-wrap li .target{
	visibility: hidden;
}
#main-image .flow-wrap .flow1{
	margin-left: 105px;
	width: 130px;
}
#main-image .flow-wrap .flow2{
	margin-left: 135px;
	width: 61px;
}
#main-image .flow-wrap .flow3{
	margin-left: 115px;
	width: 161px;
}
#main-image .flow-wrap .flow-title{
	margin: 0;
	width: 100%;
}
#main-image .flow-wrap .bg-circle{
	position: absolute;
	z-index: 10;
	width: 20px;
	height: 24px;
	display: block;
	background-color: #0c0f11;
	left: 50%;
	bottom: 32px;
	margin-left: -10px;
}
#main-image .flow-wrap .icon-circle{
	background-image:url('../images/about/icon_circle.png');
	background-repeat: no-repeat;
	background-position: center top;
	position: relative;
	z-index: 20;
	width: 24px;
	height: 24px;
	display: block;
	margin-bottom: 12px;
	margin-right: auto;
	margin-left: auto;
}
#main-image .flow-wrap .flow1 .icon-flow1{
	background-image:url('../images/about/icon_flow1.png');
	background-repeat: no-repeat;
	background-position: center top;
	height: 38px;
	margin-bottom: 9px;
	margin-top: 5px;
}
#main-image .flow-wrap .flow1 .flow-title{
	background-image:url('../images/about/txt_flow1.png');
	background-repeat: no-repeat;
	background-position: left top;
	height: 12px;
	overflow: hidden;
	text-indent: -9999px;
}
#main-image .flow-wrap .flow2 .icon-flow2{
	background-image:url('../images/about/icon_flow2.png');
	background-repeat: no-repeat;
	background-position: center top;
	height: 40px;
	margin-bottom: 7px;
	margin-top: 5px;
}
#main-image .flow-wrap .flow2 .flow-title{
	background-image:url('../images/about/txt_flow2.png');
	background-repeat: no-repeat;
	background-position: left top;
	height: 12px;
	overflow: hidden;
	text-indent: -9999px;
}
#main-image .flow-wrap .flow3 .icon-flow3{
	background-image:url('../images/about/icon_flow3.png');
	background-repeat: no-repeat;
	background-position: center top;
	height: 31px;
	margin-bottom: 14px;
	margin-top: 7px;
}
#main-image .flow-wrap .flow3 .flow-title{
	background-image:url('../images/about/txt_flow3.png');
	background-repeat: no-repeat;
	background-position: left top;
	height: 12px;
	overflow: hidden;
	text-indent: -9999px;
}

#main{
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 50px;
	text-align: left;
}

#main h2{
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 25px;
}
#main #main-txt p{
	margin-bottom: 0;
}
#main #main-txt p.txt{
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 0.6px;
	margin-bottom: 30px;
}
#main #main-txt .credit{
	font-size: 14px;
	color: #77828e;
	margin-bottom: 60px;
}

/*===============================================================

	3.	Media Queries

===============================================================*/

@media (min-width: 641px) {

}

/* ～640px
** SmartPhone Mode
------------------------------------------ */
@media (max-width: 640px) {

	/*
	** override and layout
	*/
	body{
		min-width: 100%;
	}
	p{
		margin-bottom: 0;
	}
	#front-wrap{
		min-width: 100%;
		padding-bottom: 0;
	}
	#page-nav{
		display: none;
	}
	#contents{
		padding-bottom: 0;
	}
	/* title-area */
	#contents-wrap{
		padding-bottom: 15px;
	}
	/* title */
	.title-inner{
		width:100%;
		margin-right: auto;
		margin-left: auto;
		padding-bottom: 0;
		padding-top: 13px;
		position: relative;
		z-index: 2;
	}
	#main-image{
		background-image: none;
		height: auto;
		position: relative;
		z-index: 2;
	}
	.vol4.chapter1 #main-image{
		height: auto;
	}
	#main-image img{
		width: 100%;
	}
	h2{
		margin-bottom:0;
	}
	#title-wrap{
		padding-top: 0;
		padding-bottom: 0;
		position: relative;
		margin-bottom: 0;
	}
	#title-wrap .ol{
		width: 80%;
		margin-left: -40%;
		height: 60px;
	}
	#title-wrap .bg-sp{
		display: block;
		position: absolute;
		z-index: 1;
	}
	#title-wrap .bg-sp{
		width: 100%;
		z-index: 0;
	}
	#title-wrap .bg-sp img{
		width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		top:0;
	}
	#title-wrap h1{
		padding-bottom: 0;
		margin-bottom: 0;
		height: 18px;
		margin-left: 0;
	}
	#title-wrap h1 img{
		height: 18px;
	}
	#title-wrap .ti-sub{
		margin-bottom:12px;
		height: 9px;
	}
	#title-wrap .ti-sub img{
		height: 8.5px;
	}
	#title-wrap .ti_bottom_txt{
		margin-bottom: 0;
		height: 6px;
		display: inline-block;
	}
	#title-wrap .ti_bottom_txt img{
		height:5.3px;
		display: block;
	}
	#title-wrap .num-sp{
		display: block;
		line-height: 0;
		margin-right: 133px;
		margin-left: 133px;
		margin-top:-4px;
	}
	#title-wrap .num-sp span{
		display: inline-block;
		width: 100%;
		max-width: 70px;
	}
	#title-wrap .num-sp img{
		height: 30px;
		margin-top: -4px;
	}
	#move-page-li{
		position: relative;
		visibility:visible;
		display: block;
		bottom: 0 !important;
		width: 44px;
		height: 44px;
		left: 50%;
		margin-left: -22px;
	}
	#move-page-li li{
		width: 44px;
		height: 44px;
	}
	#move-page-li li.prev a{
		width: 44px;
		height: 44px;
		background-image:url('../images/common/single/icon_prev.png');
		background-size: 44px 44px;
		background-color: #000;
	}
	#move-page-li li.page-top a{
		width: 44px;
		height: 44px;
		background-image:url('../images/common/single/icon_pagetop.png');
		background-size: 44px 44px;
		background-color: #000;
	}
	#move-page-li li.next a{
		width: 44px;
		height: 44px;
		background-image:url('../images/common/single/icon_next.png');
		background-size: 44px 44px;
		background-color: #000;
	}

	/* #main-image */
	#main-image .wrap{
		width: 100%;
		padding-top:9px;
		height: 95px;
	}
	#main-image .wrap .title{
		font-size: 9px;
		margin-bottom: 2px;
	}
	#main-image .flow-wrap{
		width: 290px;
		margin-right: auto;
		margin-left: auto;
	}
	#main-image .flow-wrap ul{
		width: 290px;
		margin-right: auto;
		margin-left: auto;
		position: relative;
	}
	#main-image .flow-wrap li{
		height: 52px;
	}
	#main-image .flow-wrap .flow1{
		width: 87px;
		margin-left: 5px;
	}
	#main-image .flow-wrap .flow1 .icon-flow1{
		height: 21px;
		background-size: 13px 21px;
		margin-bottom: 6px;
		margin-top: 3px;
	}
	#main-image .flow-wrap .icon-circle{
		background-image:url('../images/about/icon_circle_sp.png');
		background-size: 12px 12px;
		width: 12px;
		height: 12px;
	}
	#main-image .flow-wrap .bg-circle{
		width: 10px;
		height: 12px;
		margin-left:-5px;
		bottom:11px;
	}
	#main-image .flow-wrap .flow1 .flow-title{
		background-size: 77px 7px;
	}
	#main-image .flow-wrap ul{
		height: 53px;
	}
	#main-image .flow-wrap .flow2{
		width: 38px;
		margin-left: 36px;
	}
	#main-image .flow-wrap .flow2 .icon-flow2{
		background-size: 23px 20px;
		height: 20px;
		margin-bottom: 5px;
		margin-top: 4px;
	}
	#main-image .flow-wrap .flow2 .flow-title{
		width: 36px;
		height: 7px;
		background-size: 36px 7px;
	}
	#main-image .flow-wrap .flow3{
		width: 87px;
		margin-left: 32px;
	}
	#main-image .flow-wrap .flow3 .icon-flow3{
		width: 23px;
		height: 16px;
		background-size: 23px 16px;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 9px;
		margin-top: 5px;
	}
	#main-image .flow-wrap .line-flow{
		top:34px;
		left: 50px;
	}
	#main-image .flow-wrap .flow3 .flow-title{
		background-size: 87px 7px;
		width: 87px;
		height: 7px;
	}


	/* #main */
	#main{
		padding-top: 20px;
		width: 100%;
		position: relative;
		z-index: 15;
	}
	#main p{
		line-height: 1.5em;
	}
	#main .sub-title{
		margin-bottom: 7px;
		line-height: 22px;
	}
	#main h2{
		font-size: 16px;
		margin-bottom: 8px;
	}
	#main #main-txt{
		margin-right: 15px;
		margin-left: 15px;
	}
	#main #main-txt p.txt{
		font-size: 14px;
		margin-bottom: 20px;
		line-height: 26px;
	}
	#main #main-txt p{
		line-height: 20px;
	}
	#main #main-txt .credit{
		margin-bottom: 20px;
	}

	#gl_footer {
	  position: relative;
	}

}