@charset "utf-8" ;
/* =======================================================
	CSS構成: 全頁共通レイアウト
	-----------------------------------------------------
	Last Modified: [ 2017/06/21 ]

	【TOC】
	01 : 
	02 : ヘッダー部分
	03 : フッター部分
	04 : .container
	05 : #main
	06 : #sub
	07 : .container_foot
	08 : #pankuzu
	09 : .movie
	10 : .tab
======================================================= */





/*	01 : 
---------------------------------------------------------------------- */
#header,
#gnavi,
.container,
#pageup,
#footer {
	width: 970px;
	margin: 0 auto;

	clear: both;
	overflow: hidden;
}




/*	02 : ヘッダー部分
---------------------------------------------------------------------- */
#header_wrap {
	background: #FFF;
	border-bottom: 1px solid #CCC;
	padding: 14px 0 0;
}
/* #header */
#header {}
#header .clearfix:first-child {
	margin-bottom:25px;
}
#header .clearfix h1 {
	float: left;
}
#header .clearfix h2 {
	float: right;
	margin: 13px -1px 0 0;
}

/* #gnavi */
#gnavi {}
#gnavi li,
#gnavi li.products > a img {
	float: left;
	padding-bottom: 10px;
}
#gnavi li#active,
#gnavi li.products > a img#active {
	background: url(../images/gn_active.png) bottom center no-repeat;
}
#gnavi li.home { margin-right: 57px; }
#gnavi li.products {
	margin-right: 78px;
	padding-bottom: 4px;
	}
#gnavi li.products > img {
	float: left;
	margin-right: 20px;
	padding-right: 27px;
	border-right: 1px solid #CCC;
}
#gnavi li.products a {
	float: left;
	display: block;
	margin-right: 24px;
}
#gnavi li.products a:nth-child(3) {
	margin-right: 25px;
}
#gnavi li.products a:last-child { margin-right: 0; }
#gnavi li.nc { margin-right: 59px; }
#gnavi li.woa { margin-right: 60px; }
#gnavi li.contact {}





/*	03 : フッター部分
---------------------------------------------------------------------- */
/* pageup */
#pageup {
	margin-top: 30px;
}
#pageup a {
	float: right;
	display: block;
}

/* footer_wrap */
#footer_wrap {
	border-top: 1px solid #CCC;
}

/* footer */
#footer_wrap #footer {
	margin-top: 30px;
}

/* fgnavi */
#footer_wrap #footer #fgnavi {
	clear: both;
	overflow: hidden;
}
#footer_wrap #footer #fgnavi > li {
	float: left;
	font-size: 1.2em;
	font-weight: bold;
	margin-right: 30px;
}
#footer_wrap #footer #fgnavi > li > a {
	background: url(../images/list.png) left 5px no-repeat;
	padding: 0 0 3px 17px ;
}

#footer_wrap #footer #fgnavi > li.home {
	margin-right: 25px;
}
#footer_wrap #footer #fgnavi > li.home a {
	background: none;
	padding: 0;
}

#footer_wrap #footer #fgnavi > li.topics > a {
	border-bottom: 2px solid #579AD7;
	display: block;
	width: 62px;
}

#footer_wrap #footer #fgnavi > li.products > a {
	border-bottom: 2px solid #579AD7;
	display: block;
	width: 64px;
}

#footer_wrap #footer #fgnavi > li.nc > a {
	border-bottom: 2px solid #579AD7;
	display: block;
	width: 122px;
}

#footer_wrap #footer #fgnavi > li.woa > a {
	border-bottom: 2px solid #579AD7;
	display: block;
	width: 225px;
}

#footer_wrap #footer #fgnavi > li.trial > a {
	border-bottom: 2px solid #579AD7;
	display: block;
	width: 64px;
}

#footer_wrap #footer #fgnavi > li.other {
	margin-right: 0;
	margin-top: -15px;
}
#footer_wrap #footer #fgnavi > li.other a {
	background: url(../images/list.png) left 5px no-repeat;
	padding: 0 0 3px 17px ;
}
#footer_wrap #footer #fgnavi > li.other > ul li {
	font-size: 0.9em;
	font-weight: normal;
	margin-top: 15px;
}


#footer_wrap #footer #fgnavi > li > ul {
	float: left;
	margin-right: 30px;
}
#footer_wrap #footer #fgnavi > li > ul:last-child {
	margin-right: 0;
}
#footer_wrap #footer #fgnavi > li > ul li {
	font-size: 0.9em;
	font-weight: normal;
	line-height: 1;
	margin-top: 20px;
}

/* logo */
#footer_wrap #footer #logo {
	line-height: 1;
	margin: 50px auto 10px;
	text-align: center;
}

/* copy */
#footer_wrap #footer #copy {
	color: #A6A3A0;
	line-height: 1;
	margin-bottom: 50px;
	text-align: center;
}





/*	04 : .container
---------------------------------------------------------------------- */
.container {}
.container #header {
	margin-top: 15px;
}
.container #header .clearfix {
	margin-bottom: 25px;
}





/*	05 : #main
---------------------------------------------------------------------- */
#main {
	float: left;
	width: 730px;
}





/*	06 : #sub
---------------------------------------------------------------------- */
#sub {
	float: right;
	width: 210px;
}

#sub div {
	margin-bottom: 10px;
}
#sub div:last-child {
	margin-bottom: 0;
}

#sub {}
#sub #snav {
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	padding: 0 15px;
}
#sub #snav > div {
	margin: 0 0 0 -16px;
}
#sub #snav > dl {}
#sub #snav > dl dt,
#sub #snav > dl dd {
	line-height: 1;
}
#sub #snav > dl dt {
	border-bottom: 1px solid #CCC;
	font-size: 1.4em;
	padding: 20px 0 15px;
}


#sub #snav > dl dd {
	background: url(../images/line01.png) bottom left repeat-x;
	font-size: 1.2em;
	padding: 15px 0;
}
#sub #snav > dl dd:last-child {
	background: none;
}
#sub #snav > dl dd > a {
	background-position: left 5px;
	background-repeat: no-repeat;
	line-height: 1.4;
	padding-left: 18px;
	display: block;
}
#sub #snav > dl dd > ul {
	background: url(../images/line01.png) top left repeat-x;
	padding-top: 5px;
	margin-top: 15px;
}
#sub #snav > dl dd > ul > li {
	margin: 10px 0 0 18px;
}
#sub #snav > dl dd > ul > li > a {
	background-position: left center;
	background-repeat: no-repeat;
	display: block;
	padding-left: 10px;
}



/*	07 : .container_foot
---------------------------------------------------------------------- */
.container_foot {
	margin: 0 auto;
	width: 970px;

	background: url(../images/line01.png) left top repeat-x;
	margin-top: 30px;
	padding-top: 30px;

	clear: both;
	overflow: hidden;
}
.container_foot li {
	float: left;
}
.container_foot li:nth-child(2) {
	margin: 0 20px;
}
.container_foot li a:hover {
	text-decoration: none;
}

.container_foot02 {
	margin: 0 auto;
	width: 970px;

	clear: both;
	overflow: hidden;
}
.container_foot02 li {
	float: left;
}
.container_foot02 li:nth-child(2) {
	margin: 0 20px;
}
.container_foot02 li a:hover {
	text-decoration: none;
}



/*	08 : #pankuzu
---------------------------------------------------------------------- */
#pankuzu {
	margin-bottom: 25px;
	padding: 10px 0 5px;

	clear: both;
	overflow: hidden;
}
#pankuzu li {
	float: left;
}
#pankuzu li:after {
	content: ">";
	padding: 0 3px;
}
#pankuzu li:last-child:after {
	content: "";
	padding: 0;
}
#pankuzu li a {
	font-weight: bold;
}

/*	09 : .movie
---------------------------------------------------------------------- */
.movie {
	margin: 15px 0 0;
}
.movie li {
	margin-bottom: 20px;
	width: 440px;
	float: left;
}
.movie li.movie_r {
	margin-left: 38px;
}
.movie li p {
	font-size: 1.3em;
}

@media only screen and (max-width: 470px) {
	
	.movie li .movie_inner {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 100%;
		overflow: hidden;
	}
	.movie li .movie_inner iframe,  
	.movie li .movie_inner object,  
	.movie li .movie_inner embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
}

.movie02 {
	margin: 50px auto 0;
	width: 970px;
}
.movie02 li {
	margin-bottom: 20px;
	width: 466px;
	float: left;
}
.movie02 li.movie02_r {
	margin-left: 38px;
}
.movie02 li p {
	font-size: 1.3em;
}

@media only screen and (max-width: 470px) {
	
	.movie02 li .movie02_inner {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 100%;
		overflow: hidden;
	}
	.movie02 li .movie02_inner iframe,  
	.movie02 li .movie02_inner object,  
	.movie02 li .movie02_inner embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
}

/*	09 : .tab
---------------------------------------------------------------------- */
.tab {
	cursor: pointer;
	display: table;
	table-layout: fixed;
	text-align: center;
	width: 100%;
	border-spacing: 2px;
	margin-bottom: 20px;
	font-size: 120%;
	color: #666;
	margin-top: 50px;
}
	.tab li {
		display: table-cell;
		transition: all .3s;
		vertical-align: middle;
		padding: 8px 10px;
		border: 1px solid #aaa;
	}
	.tab li:hover {
		color: #fff;
		background: #47a5d1;
		border: 1px solid #47a5d1;
	}

	.tab .select {
		color: #fff;
		background: #47a5d1;
		position: relative;
		border: 1px solid #47a5d1;
	}

.hide {
	display: none;
}