@charset "UTF-8";


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

@keyframes anime1 {
	0% { width: 120%; opacity: 1;}
	25% { width: 100%; opacity: 1; }
	26% { width: 120%; opacity: 1; }
	100% { width: 120%; opacity: 1; }
}

@keyframes anime2 {
	0% { width: 120%; opacity: 0; }
	18% { width: 120%; opacity: 0; }
	23% { opacity: 1; }
	38% { width: 100%; opacity: 1; }
}

@keyframes anime3 {
	0% { transform:translateX(0%); opacity: 0; }
	30% { transform:translateX(0%); opacity: 0; }
	38% { opacity: 1; }
	58% { transform:translateX(-11%); opacity: 1; }
}

@keyframes anime4 {
	0% { transform:translateX(0%); opacity: 0; }
	50% { transform:translateX(0%); opacity: 0; }
	58% { opacity: 1; }
	70% { transform:translateX(-11%); opacity: 1; }
}

@keyframes anime5 {
	0% {opacity: 0;}
	65% { width: 150%; opacity: 0; }
	70% {opacity: 1; }
	85% { width: 100%; opacity: 1; }
}

@keyframes anime6 {
	0% { width: 100%; height: 110%; transform:translate(0, -6%); opacity: 0; }
	80% { width: 100%; height: 110%; transform:translate(0, -6%); opacity: 0; }
	85% { opacity: 1; }
	95% { opacity: 1; }
	100% { width: 100%; height: 110%; transform:translate(0, 2%); opacity: 0; }
}

.grBorder {
	height: 1px;
}

#lording {
	width: 100%; height: 100%;
	background-color: #000000;
	position: fixed;
	z-index: 999;
}

#lording img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}

/*************************************************/
/* パネルパーツ */
#contentsPane {
	width: 100%; height: auto;
	max-width: 900px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	color: #ffffff;
	font-size: 12px;
}


/*************************************************/
/* ヘッダー */
#header {
	padding: 10px 0px 10px 0px;

	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

.pcTitle span {
	width: auto;
	font-size: 12pt;
	margin-left: 10px;
	font-family: serif;
	display: none;
}

#spHeader {
	width: 100%; height: 55px;
}


#contactTel a {
	margin-left: 10px;
	padding: 0px 0px 0px 0px;
	border: none;
	text-decoration: none;
	display: block;
}

#contactTel a img {
	height: 42px;
	margin:0px;
	display: block;
}

#contactTel a:hover {
	color: #ffffff;
	background-color: #999999;
}



/*************************************************/
/* 内部パーツ */
.mobileTitle {
	width: 100%;
	font-size: 12pt;
	margin: 0px auto 0px auto;
	font-family: serif;
	text-align: center;

	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

.mobileTitle img {
	height: 15px;
}

h2 {
	width: 100%;
	text-align: center;
}

.h2txt {
	display:none;
}


.h2txtMobile {
	width: 90%;
	margin: 25px auto 30px auto;
	text-align: center;

	animation: fadeIn 5s ease 0s 1 normal;
    -webkit-animation: fadeIn 5s ease 0s 1 normal;
}

.h3title {
	margin: 12px auto 12px auto;
	text-align: center;

}

.h3title img {
	height: 35px;
	margin: 0px auto 0px auto;
	display: block;
}

/* system */
.systemPricePane {
	width: 100%; height: auto;
	margin: 40px auto 0px auto;
	padding: 0px 25px 0px 25px;
	font-size: 10pt;
	font-family: serif;
	box-sizing:border-box;

	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-flow: column nowrap;
	flex-flow: column nowrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-start;
	align-items: flex-start;

	transition: all 1.5s;
}

.systemPricePane:nth-child(2) {
	margin: 0px auto 30px auto;
}


/* system 料金 */
.systemPrice {
	width: 260px;
	margin: 0px auto 20px auto;
	padding: 0px 0px 0px 0px;
	opacity: 0;
	transition: all 1s;
}

.systemPrice dt {
	width: 100%;
	margin: 0px auto 20px auto;
	padding: 0px 0px 0px 0px;
	text-align: center;
}

.systemPrice dt img {
	height: 20px;
}

.systemPrice dd {
	width: 100%;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	line-height: 250%;
}

.systemPrice dd .priceList {
	width: 100%;

	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

.systemPrice dd .priceList span.icon {
	width: 130px;
	padding-left: 1.5em;

	background-image: url("../img/index/icon.png");
	background-repeat: no-repeat;
	background-position: top 0.8em left;
	background-size: auto 1em;
}


.systemPriceList {
	line-height: 250%;
	text-alogn: left;
}

.systemPriceList img {
	width: auto;
	height: 1em;
	margin-right: 0.2em;
	position: relative;
	top: 2px;
}

.systemLeftPane {
	width: 260px;
	margin: 0px auto 40px auto;
	opacity: 0;
	transition: all 1.5s;
}

.systemRightPane {
	width: 100%;
	margin: 0px auto 40px auto;
	padding:0px;
}

.systemRightPane img {
	width: 100%;
}


/* map */
#map {
	width: 90%; height: 350px;
	margin: 40px auto 20px auto;
}

#mapaddress {
	width: 90%; height: auto;
	margin: 0px auto 40px auto;
	text-align: center;
	font-size: 10pt;
}



/* スライドショー */
#slideImg {
	display: none;
}

#slideImgMobile {
	width: 100%; height: auto;
	padding: 0px 0px 0px 0px;
	box-sizing: border-box;
	margin-bottom: 30px;
	position: relative;
	display: block;
}


#mobileSvg {
	width: 100%; height: 0;
	padding-top: 86.4%;
	position: relative;
	overflow: hidden;
}

#mobileSvg #m_img01 {
	width: 120%; height: auto;
	opacity: 1;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}


#mobileSvg #m_img02 {
	width: 100%; height: auto;
	opacity: 0;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: 2;
}


#mobileSvg #m_img03 {
	width: auto; height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	z-index: 3;
}

#mobileSvg #m_img04 {
	width: auto; height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	z-index: 4;
}

#mobileSvg #m_img05 {
	width: 100%; height: auto;
	opacity: 0;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

#mobileSvg #m_img06 {
	width: auto; height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	z-index: 6;
}

#mobileSvg #m_img_logo {
	width: 100%; height: auto;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 7;
}


.fade_on {
    opacity: 1;
}


.moveImg01 {
	animation-name: anime1;
	animation-timing-function: linear;
	animation-duration: 25s;
	animation-delay: 0s;
}

.moveImg02 {
	animation-name: anime2;
	animation-timing-function: linear;
	animation-duration: 25s;
	animation-delay: 0s;
}

.moveImg03 {
	animation-name: anime3;
	animation-timing-function: linear;
	animation-duration: 25s;
	animation-delay: 0s;
}

.moveImg04 {
	animation-name: anime4;
	animation-timing-function: linear;
	animation-duration: 25s;
	animation-delay: 0s;
}

.moveImg05 {
	animation-name: anime5;
	animation-timing-function: linear;
	animation-duration: 25s;
	animation-delay: 0s;
}

.moveImg06 {
	animation-name: anime6;
	animation-timing-function: linear;
	animation-duration: 25s;
	animation-delay: 0s;
}


#mobileSvg img {
	animation-iteration-count: infinite;
}

/*************************************************/
/** pc（フロート）・スマートフォン（縦）**/
/** pc **/
/*************************************************/
@media screen and (min-width: 641px){
	#contentsPane {
		width: 100%; height: auto;
		min-width: 900px;
		max-width: 100%;
	}



	#header {
		width: 100%;
		min-width: 900px;
		padding: 10px 20px 10px 20px;

		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;

		-webkit-flex-flow: row nowrap;
		flex-flow: row nowrap;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;

		position: absolute;
		top: 0px;
		z-index: 10;

		background-color: rgb(0, 0, 0, 0.7);
	}


	.mobileTitle {
		display: none;
	}

	.pcTitle span {
		width: auto;
		font-size: 14pt;
		display: block;
	}

	#pcHeader {
		max-width: 100%;
	}

	#headerMenu {
		width: auto;
		margin: 0px 0px 0px auto;
		padding: 0px 0px 0px 0px;
		list-style-type: none;
		text-align: center;
		position: static;

		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;

		-webkit-flex-flow: row nowrap;
		flex-flow: row nowrap;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
		font-size: 10pt;
	}

	#headerMenu li {
		width: auto; height: auto;
		max-width: auto;
		padding: 0px 15px 0px 15px;
		border: none;
		cursor: pointer;
	}

	#headerMenu > li a {
		width: 100%; height: auto;
		padding: 0px 1em 0px 1em;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		color: #ffffff;
		display: block;
	}

	#headerMenu > li a:hover {
		color: #999999;
	}

	#footerPane {
		min-width: 900px;
	}

	#slideImg {
		width: 100%; height: auto;
		min-width: 900px;
		padding: 0px 0px 0px 0px;
		box-sizing: border-box;
		margin-bottom: 40px;
		position: relative;
		display: block;
	}

	#slideImgMobile {
		display: none;
	}

	.h2txt {
		width: 650px;
		height: auto;
		margin: 0px auto 40px auto;
		display: block;

		animation: fadeIn 2s ease 0s 1 normal;
    	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	}

	.h2txtMobile {
		display: none;
	}

	.h3title img {
		height: 46px;
		margin: 0px auto 0px auto;
	}

	.systemPricePane {
		width: 650px; height: auto;
		margin: 50px auto 0px auto;
		padding: 0px 0px 0px 0px;
		box-sizing: border-box;

		font-size: 12pt;

		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
	}

	.systemPricePane:nth-child(2) {
		margin: 30px auto 50px auto;
	}

	.systemPrice {
		width: 270px;
		margin-right: auto;
		margin-left: 0;
		opacity: 1;
	}

	.systemPrice:nth-child(2) {
		margin-right: 0;
		margin-left: auto;
	}

	.systemPrice dt {
		width: 100%;
		margin: 0px auto 30px auto;
		padding: 0px 0px 0px 0px;
	}

	.systemPrice dt img {
		height: 25px;
	}

	.systemPrice dd .priceList {
		line-height: 250%;
	}

	.systemPrice dd .priceList span.icon {
		width: 7em;
		background-image: url("../img/index/icon.png");
		background-repeat: no-repeat;
		background-position: top 0.8em left;
		background-size: auto 1em;
	}

	.systemLeftPane {
		width: 300px;
		margin-right: auto;
		margin-left: 0;
		opacity: 1;
	}

	.systemRightPane {
		width: 270px;
		margin-right: 0;
		margin-left: auto;
	}

	.systemPriceList {
		line-height: 250%;
	}


	/* map */
	#map {
		width: 650px; height: 400px;
		margin: 50px auto 30px auto;
	}

	#mapaddress {
		width: 650px; height: auto;
		margin: 0px auto 50px auto;
		text-align: center;
	}


	#pcSvg {
		width: 100%; height: 0;
		padding-top: 45.3%;
		position: relative;
		overflow: hidden;
	}

	#pcSvg #p_img01 {
		width: 120%; height: auto;
		opacity: 1;
		position: absolute;
		top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    z-index: 1;
	}

	#pcSvg #p_img02 {
		width: 100%; height: auto;
		opacity: 0;
		position: absolute;
		top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
		z-index: 2;
	}

	#pcSvg #p_img03 {
		width: auto; height: 100%;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: 3;
	}

	#pcSvg #p_img04 {
		width: auto; height: 100%;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: 4;
	}

	#pcSvg #p_img05 {
		width: 120%; height: auto;
		opacity: 0;
		position: absolute;
		top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    z-index: 5;
	}

	#pcSvg #p_img06 {
		width: auto; height: 100%;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: 6;
	}

	#pcSvg #p_img_logo {
		width: 100%; height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 7;
	}

	#pcSvg img {
		animation-iteration-count: infinite;
	}



}