@charset "utf-8";
/* ===================================================================
 style info : サイト内共通のモジュール設定
=================================================================== */

p,h1,h2,h3,h4,h5{	background-image:url(bg-p.gif);}

body {	height:100%; color: #333333;	background:#F9F9F7;	-webkit-text-size-adjust: none;/*webkitフォントサイズ対策*/}
body > *{	min-width:980px;}
body.touchDevice > *{	min-width:980px;}
@media screen and (max-width: 640px) {
	body.touchDevice > *,
	body > *{	min-width:320px;}
}
address{	display:block;	line-height:1.3em;	font-style:normal;	color:#333333;	font-size:108%;	white-space:nowrap; font-weight:bold;}
		address *{	display:block;	font-size:18px;	margin-top:5px;	color:#333333!important;}
		address p{	border-bottom:solid 1px #333333;	padding-bottom:9px;	margin-bottom:9px;}
/* ------------------------------------------------------ *
	logo & btn
 * ------------------------------------------------------ */
[class^="logo"]{display:block;	text-indent:110%;	white-space:nowrap;	overflow:hidden;}
	.logo01{	width:353px;	height:100px;	background:url(../img/logo01.png) no-repeat;	background-size:cover!important;}
	.logo02{	width:178px;	height:160px;	background:url(../img/logo02.png) no-repeat;	margin:30px auto 0;	background-size:contain;}
	
#fixed-box{	position:fixed;	left:50%;	bottom:-100;	margin-left:500px;	opacity:0;}
	#fixed-box a{	display:block;	width:50px;	height:50px;	background:url(../img/btn-totop.png) no-repeat;	text-indent:100%;	background-size:contain;	white-space:nowrap;	overflow:hidden;}

	#fixed-box.fixed{	bottom:40px;	z-index:+10;	opacity:1;	-webkit-transition:all 0.2s linear;	transition:all 0.2s linear;}

@media screen and (max-width: 640px) {
	.logo01{	background:url(../img/logo01@2x.png) no-repeat;	width:196px;	height:50px;	float:none;}
	#fixed-box{	left:auto;	right:10px;	margin-left:0;}
	#fixed-box a{	width:40px;	height:40px;}
	#fixed-box.fixed{	bottom:20px;}
}

/* ------------------------------------------------------ *
	header 
 * ------------------------------------------------------ */
@media screen and (min-width: 641px) {
#header{	width:100%;	box-shadow:0 0 5px rgba(0,0,0,.3);	position:relative;	z-index:+1;}	
	#header-inner{	width:980px;	margin:0 auto;	padding:25px 0;}	
	#header .logo01{	width:430px;	height:120px;	background:url(../img/logo01-02.png) no-repeat;}
	#header h1{	display:block; float:left;}
	#header address{	float:right;}
}

	#nav-switch{	display:none;}
	
@media screen and (max-width: 640px){
	#header{	overflow:visible;}
	#header-inner{	padding:10px;	position:relative;}
	#nav-switch{	display:block;	height:55px;	width:55px;	position:absolute;	right:0;	top:50%;	margin-top:-27px;	-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;	box-sizing:border-box;}
	#nav-switch.act{	}
		[class^="nav-switch-line"]{	display:block;	height:4px;	width:23px;	background:#000000;	position:absolute;	left:16px;	border-radius:2px;	-webkit-transition:all ease-in-out 0.2s;	transition:all ease-in-out 0.2s;}
		.nav-switch-line01{	top:20px;}
		.nav-switch-line02{	top:27px;}
		.nav-switch-line03{	top:34px;}
		.act .nav-switch-line01{	-moz-transform: rotate(40deg) translate(4px,5px);	-webkit-transform: rotate(40deg) translate(4px,5px);	-o-transform: rotate(40deg) translate(4px,5px);	-ms-transform: rotate(40deg) translate(4px,5px);	transform: rotate(40deg) translate(4px,5px);}
		.act .nav-switch-line02{	opacity:0;}
		.act .nav-switch-line03{	-moz-transform: rotate(-40deg) translate(5px,-6px);	-webkit-transform: rotate(-40deg) translate(5px,-6px);	-o-transform: rotate(-40deg) translate(5px,-6px);	-ms-transform: rotate(-40deg) translate(5px,-6px);	transform: rotate(-40deg) translate(5px,-6px);}
	.aftertext{	text-align:center;	line-height:20px;	background:#ACAC9A;	color:#FFF;	font-size:93%;}
}
/* ------------------------------------------------------ *
	nav
 * ------------------------------------------------------ */
@media screen and (min-width: 641px) {
.global-nav{	display:block;	width:100%;	height:50px;	margin:0;	border-bottom:solid 1px #FFF;	position:relative;	background:url(../img/bg-nav01.png) repeat;}
	.global-nav > ul{	display:block;	width:980px;	height:inherit; margin:0 auto; background:url(../img/bg-nav02.png) 0 -50px  no-repeat;}
	.global-nav > ul > li{	display:block;	list-style:none;	width:196px;	height:inherit;	float:left;	 zoom:1;	position:relative;}
	.global-nav > ul > li > a{	display:block;	height:inherit;	color:#333333;	text-indent:100%;	white-space:nowrap;	overflow:hidden; background:url(../img/bg-nav02.png)  no-repeat;}
		.global-nav > ul > li.n01 > a{	background-position:-196px 0;}
		.global-nav > ul > li.n02 > a{	background-position:-392px 0;}
		.global-nav > ul > li.n03 > a{	background-position:-588px 0;}
		.global-nav > ul > li.n04 > a{	background-position:-784px 0;}
		.global-nav > ul > li.n05 > a{	background-position:0 0;}
		.papercontainer .global-nav > ul > li.n01 > a,
		.package .global-nav > ul > li.n02 > a,
		.outline .global-nav > ul > li.n03 > a,
		.inquiry .global-nav > ul > li.n04 > a,
		.global-nav > ul > li:hover > a,
		.global-nav > ul > li > a:hover{	opacity:0;}

		
		.global-nav ul .below{	display:none;}
		.global-nav .below{		z-index:+100;	padding:15px 20px;	background:#FFF;	background:rgba(255,255,255,0.9);}
		.global-nav .below > li {	display:block;	width:100%;	border-bottom:solid 1px #DADAD6;	padding-bottom:5px;}
		.global-nav .below > li+li{	margin-top:10px;}
		.global-nav .below > li > a{	display:block;	color:#333;	font-size:108%;	}
		.global-nav > ul > li:hover .below{	display:block;}
}
@media screen and (max-width: 640px){
	.global-nav{	height:0;	overflow:hidden;	width:100%;	-webkit-box-sizing:border-box;	box-sizing:border-box;	padding:0;	background:rgba(255,255,255,.9);	position:absolute;	left:0;	z-index:+100;}
		.global-nav a{	display:inline-block;	color:#333;}
		.global-nav.act{	height:auto;	padding:30px 20px;	border-bottom:solid 20px #444;}
		.global-nav li{	display:block;	list-style:none;	text-align:center;}
		.global-nav > ul > li + li:before{	content:"";	display:block;	width:4px;	height:4px;	margin:15px auto;	background:#000;	-webkit-transform:rotate(45deg);	transform:rotate(45deg);}
		/*.global-nav > ul > li + li:before{	content:"";	display:block;	height:1px;	margin:15px auto 10px;	background:#ccc;}*/
		.global-nav > ul > li > a{	margin: 10px 0;	padding:0 0.3em 3px;	font-size:15px;	font-weight:normal;	color:#333;	text-align:center;	letter-spacing:0.1em;	border-bottom:solid 1px #444;}
		.global-nav .below{	margin:10px 0 10px;}
		.global-nav .below li{	margin:7px;	line-height:2em;	font-size:13px;}
	#close{	border:solid 1px #000;	display:block;	margin:50px auto;	width:150px;	text-align:center;	line-height:30px;	font-size:108%;	color:#000;	background:rgba(255,255,255,.6);	letter-spacing:0.1em;}
	.global-nav .sp a.btn-ghost01,
	.global-nav .sp a.logo03{	float:none;	margin:20px auto;	padding:0;}
}
/* ------------------------------------------------------ *
	contents
 * ------------------------------------------------------ */
#contents{	width:100%;	padding:0;	overflow:hidden;	position:relative;}
article{	padding:0 0 100px;	position:relative;}

#main{ display:block;}

@media screen and (max-width: 640px){
	#contents-inner{	width:100%;	padding:30px 10px 50px;}
	article{	padding:0 0 50px;	position:relative;}
}

/* ------------------------------------------------------ *
	footer
 * ------------------------------------------------------ */
#footer{ display:block;	clear:both;	width:100%;	background:#FFF;	border-top:solid 1px #ACAC9A;	padding:40px 0 30px;	position:relative;}
#footer:after{	content:url(../img/img-footer-before.png);	display:block;	width:20px;	height:10px;	margin:-7px 0 0 -10px;	position:absolute;	left:50%;	top:0;}
.footerInner{	max-width:980px;	margin:0 auto;	position:relative;}
	#footer h1{	float:left;}
	#nav-footer{	float:left;	margin:0 0 60px 70px;	width:550px;}
		#nav-footer li{	display:block;	list-style:none;}
		#nav-footer > li{	float:left;	width:25%;}
		#nav-footer li.n05{	width:14%;}
		#nav-footer > li > a{	font-size:123.1%;	margin-bottom:10px;}
		#nav-footer > li > ul > li a{	font-size:100%;	line-height:1.5em;	white-space:nowrap;}
		#nav-footer > li > ul > li a:before{	content:"・";}
		#nav-footer a{	display:block;	color:#333333;}
		#nav-footer a:hover{	text-decoration:underline;}
	#footer address{	width:100%;	max-width:320px;	margin:0 auto;	text-align:center;}
	#copyright{	display:block;	max-width:980px;	margin:40px auto 0;	font-size:108%;	color:#444444;	text-align:center;}

@media screen and (max-width: 640px){
	#footer{	background-color:transparent;	padding:0;}
	.footerInner{	padding:30px 10px;	background:#FFF;}
	.footerInner + .footerInner{	background:#F9F9F7;}
	#footer address{	max-width:260px;}
	#footer h1{	float:none;}
	#nav-footer{	float:none;	margin:0 auto;	width:84%;}
		#nav-footer > li{	width:48%;	text-align:left!important;}
		#nav-footer a{	white-space:nowrap;}
		#nav-footer > li > a{	border-left:solid 3px #ACAC9A;	padding-left:2px;}
		#nav-footer > li li>a{	padding-left:5px;}
		#nav-footer > li:nth-child(odd){	float:left;}
		#nav-footer > li:nth-child(odd) + li{	clear:both;}
		#nav-footer li.n05{	width:100%!important;}
		#nav-footer > li + li{	margin-top:30px;}
	#copyright{	margin: 0 0 5px;	font-size:77%;}
}


/* ------------------------------------------------------ *
	loader
 * ------------------------------------------------------ */
#loader{	position:fixed;	left:0;	top:0;	width:100%;	height:100%;	background:#FFF;	z-index:+200;}
.container1 > div, .container2 > div, .container3 > div {  background-color:#ACAC9A!important;}

.spinner {	margin:-50px 0 0 -50px;	width: 100px;	height:100px;	position:absolute;	top:50%;	left:50%;}
.container1 > div, .container2 > div, .container3 > div {	width: 30px;	height: 30px;	background-color: #0072AC;	border-radius: 100%;	position: absolute;	-webkit-animation: bouncedelay 1.2s infinite ease-in-out;	animation: bouncedelay 1.2s infinite ease-in-out;	-webkit-animation-fill-mode: both;	animation-fill-mode: both;}
.spinner .spinner-container {	position: absolute;	width: 100%;	height: 100%;}
.container2 {	-webkit-transform: rotateZ(45deg);	transform: rotateZ(45deg);}
.container3 {	-webkit-transform: rotateZ(90deg);	transform: rotateZ(90deg);}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {	-webkit-animation-delay: -1.1s;	animation-delay: -1.1s;}
.container3 .circle1 {	-webkit-animation-delay: -1.0s;	animation-delay: -1.0s;}
.container1 .circle2 {	-webkit-animation-delay: -0.9s;	animation-delay: -0.9s;}
.container2 .circle2 {	-webkit-animation-delay: -0.8s;	animation-delay: -0.8s;}
.container3 .circle2 {	-webkit-animation-delay: -0.7s;	animation-delay: -0.7s;}
.container1 .circle3 {	-webkit-animation-delay: -0.6s;	animation-delay: -0.6s;}
.container2 .circle3 {	-webkit-animation-delay: -0.5s;	animation-delay: -0.5s;}
.container3 .circle3 {	-webkit-animation-delay: -0.4s;	animation-delay: -0.4s;}
.container1 .circle4 {	-webkit-animation-delay: -0.3s;	animation-delay: -0.3s;}
.container2 .circle4 {	-webkit-animation-delay: -0.2s;	animation-delay: -0.2s;}
.container3 .circle4 {	-webkit-animation-delay: -0.1s;	animation-delay: -0.1s;}
@-webkit-keyframes bouncedelay {	0%, 80%, 100% { -webkit-transform: scale(0.0); } 40% { -webkit-transform: scale(1.0);}}
@keyframes bouncedelay {	0%, 80%, 100% {	transform: scale(0.0);	-webkit-transform: scale(0.0);} 40% {	transform: scale(1.0);	-webkit-transform: scale(1.0);}}