@charset "utf-8";

/*------------------------------------------
reset
------------------------------------------*/
*{
	margin: 0;
	padding: 0;
}

p,div,ul,h1,h2,h3,h4,h5{
	margin: 0;
	padding: 0;
}

/*------------------------------------------
common parts
------------------------------------------*/
img{
	border: none;
	max-width: 100%;
	height: auto;
}

li{
	list-style: none;
}

.clearfix:after{
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
	overflow: hidden;
	line-height: 0;
	content: ".";
}

#headerinner a:hover img,
#linkinner a:hover img{
	opacity: 0.7;
	filter:alpha(opacity=70);
}

a:link{
	color: #211715;
	text-decoration: underline;
	background: transparent;
}

a:visited{
	color: #211715;
	text-decoration: underline;
	background: transparent;
}

a:hover{
	color: #a4bcc9;
	text-decoration: underline;
	background: transparent;
}

.set{
	text-indent: -1em;
	padding-left: 1em;
}

#pagetop{
	width: 50px;
	height: 50px;
	display: none;
	position: fixed;
	z-index: 2500;
	right: 0;
	bottom: 0;
	cursor: pointer;
}

/*-----------------------
list
-------------------------*/
.disc li{
	list-style-type: disc;
	margin-left: 1.4em;
}

/*-----------------------
icon
-------------------------*/
.icon-double-circle{
	background: url(../images/common/icon-double-circle.png) no-repeat 0 50%;
	padding-left: 6.6666%;
}

.icon-double-circle-long{
	background: url(../images/common/icon-double-circle.png) no-repeat 0 12%;
	padding-left: 6.6666%;
}

.icon-package{
	color: #ffffff;
	font-size: 75%;
	text-align: center;
	border-radius: 3px;
	background-color: #728b38;
	padding: 5px;
	white-space: nowrap;
}

.icon-cloud{
	color: #ffffff;
	font-size: 75%;
	text-align: center;
	border-radius: 3px;
	background-color: #d28b0d;
	padding: 5px;
	white-space: nowrap;
}
	

/*-----------------------
text
-------------------------*/
.red{
	color: #ff0000;
}

.al-center{
	text-align: center;
}

.al-right{
	text-align: right;
}

.txt-point{
	font-size: 113%;
	font-weight: bold;
	color: #ff0000;
}

.f12{
	font-size: 77%;
}


/*------------------------------------------
PC
------------------------------------------*/
@media print, screen and (min-width: 641px){
	body{
		font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size: 100%;
		color: #211715;
		background-color: #ffffff;
		margin: 0;
		padding: 0;
		line-height: 1.7em;
	}
	
	/* index.html header-area */
	#ind-header-area{
		width: 100%;
		max-height: 70px;
		background: url(../images/common/bg-header.png) repeat-x;
		position: absolute;
		z-index: 2001;
	}
	
	/* index.htmlを除く header-area */
	#header-area{
		width: 100%;
		/*max-height: 70px;*/
		background-color: #ffffff;
	}
	
	#headerinner{
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
		font-size: 88%;
		padding: 1.0204% 0%;
	}
	
	#header-logo{
		width: 25.5102%;
		max-width: 250px;
		float: left;
	}
	
	#header-info{
		display: table;
		width: 50.9183%;
		float: right;
	}
	
	#header-info ul{
		display: table-cell;
		width: 60%;
		max-width: 300px;
		vertical-align: middle;
		padding-right: 3.8076%;
	}
	
	#header-info ul li{
		height: 1.7346%;
		background: url(../images/common/icon-red-circle-arrow.png) no-repeat 0 5px;
		white-space: nowrap;
		padding-left: 20px;
		margin-right: 3.3333%;
		float: left;
	}
	
	#header-info ul li:last-child{
		margin-right: 0;
	}
	
	#header-info ul li a:link{
		color: #211715;
		text-decoration: none;
		background: transparent;
	}

	#header-info ul li a:visited{
		color: #211715;
		text-decoration: none;
		background: transparent;
	}
	
	#header-info ul li a:hover{
		color: #a4bcc9;
		text-decoration: none;
		background: transparent;
	}

	#header-info div{
		display: table-cell;
		width: 100%;
		max-width: 180px;
		text-align: right;
	}
	
	#gnav-area{
		width: 100%;
		height: 100%;
		max-height: 50px;
		background-color: #d80d18;
	}
	
	.gnavinner{
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
		position: relative;
	}
	
	.gnavinner > li{
		display: block;
		width: 20%;
		max-height: 50px;
		float: left;
	}
	
	.pseudo-nav:hover{
		cursor: pointer;
	}
	
	.child{
		display: none;
		width: 100%;
		box-sizing: border-box;
		top: 100%;
		left: 0;
		position: absolute;
		z-index: 2003;
		background-color: #ffffff;
		padding: 3.0612% 2.0408%;
		border-bottom: solid 2px #d80d18;
		border-left: solid 2px #d80d18;
		border-right: solid 2px #d80d18;
	}
	
	.childinner{
		display: block;
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
	}
		
	.child-head{
		width: 15.3061%;
		max-width: 150px;
		font-size: 122%; /* 17px */
		font-weight: bold;
		color: #d80d18;
		vertical-align: top;
		float: left;
	}
	
	.childnav{
		display: block;
		width: 84.6938%;
		max-width: 830px;
		float: right;
	}
	
	.childnav li{
		margin: 0 auto;
		text-align: center;
		float: left;
	}
	
	.childnav li img{
		-moz-transition: -moz-transform 0.5s linear;
	    -webkit-transition: -webkit-transform 0.5s linear;
	    -o-transition: -o-transform 0.5s linear;
	    -ms-transition: -ms-transform 0.5s linear;
	    transition: transform 0.5s linear;
	 }
	 
	 .childnav li img:hover{
	 	-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
	    -o-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	    transform: scale(1.1);
	 }
	
	.container{
		width: 100%;
		max-width: 980px;
		font-size: 88%;
		margin: 0 auto;
		padding: 3.0612% 0;
	}
	
	.section-name{
		display: block;
		text-align: center;
		margin-bottom: 3.0612%;
	}
	
	.about-area{
		width: 50%;
		background: url(../images/common/bg-dotted.png) repeat;
		margin: 3.0612% auto 0% auto;
		padding: 3.0612%;
		font-size: 88%;
	}
	
	.about-area p{
		text-align: center;
	}
	
	.bank{
		text-align: center;
	}
	
	.bank span{
		display: inline-block;
		vertical-align: middle;
	}
	
	.bank p{
		display: inline-block;
		text-align: left;
		padding-left: 1.0204%;
	}
	
	#link-area{
		width: 100%;
		background-color: #e9e9e9;
		margin-top: 3.0612%;
	}
	
	#linkinner{
		display: table;
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
		padding: 3.0612% 0%;
	}
	
	#linkinner li{
		display: table-cell;
	}
	
	#footer{
		width: 100%;
		padding-top: 3.0612%;
	}
	
	#footnavinner{
		display: table;
		width: 100%;
		max-width: 980px;
		font-size: 88%;
		margin: 0% auto 3.0612% auto;
	}
	
	#footnavinner .col{
		display: table-cell;
		width: 32.653%;
		max-width: 320px;
	}
	
	#footnavinner .col ul li{
		font-size: 93%;
		margin-bottom: 1.0204%;
	}
	
	#footnavinner .col .set{
		text-indent: -1em;
		padding-left: 2em;
	}

	
	#footnavinner .footnav-name{
		margin-bottom: 2.0408%;
		font-size: 100%;
		font-weight: normal;
	}
	
	#footcopy{
		width: 100%;
		background-color: #d80d18;
		padding: 3.0612% 0%;
	}
	
	#footcopyinner{
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
		color: #ffffff;
	}
	
	#footcopyinner p{
		width: 46.9387%;
		max-width: 460px;
		font-size: 82%;
		float: left;
	}
	
	#footcopyinner ul{
		width: 33.6734%;
		max-width: 330px;
		float: right;
	}
	
	#footcopyinner ul:after{
		display: block;
		clear: both;
		height: 0px;
		visibility: hidden;
		content: ".";
	}
	
	#footcopyinner ul li{
		height: 1.7346%;
		background: url(../images/common/icon-white-circle-arrow.png) no-repeat 0 50%;
		white-space: nowrap;
		font-size: 82%;
		padding-left: 6.6666%;
		margin-right: 3.3333%;
		float: left;
	}
	
	#footcopyinner ul li:last-child{
		margin-right: 0;
	}
	
	#footcopyinner ul li a:link{
		color: #ffffff;
		text-decoration: none;
		background: transparent;
	}

	#footcopyinner ul li a:visited{
		color: #ffffff;
		text-decoration: none;
		background: transparent;
	}
	
	#footcopyinner ul li a:hover{
		color: #a4bcc9;
		text-decoration: none;
		background: transparent;
	}
	
	/*-----------------------
	btn
	-------------------------*/
	.btn-area{
		text-align: center;
	}

	a.btn-red{
		display: block;
		max-width: 230px;
		background-color: #d80d18;
		background-image: url(../images/common/icon-white-arrow.png);
		background-repeat: no-repeat;
		background-position: 92% 50%;
		text-decoration: none;
		margin: 3.0612% auto 0% auto;
		padding: 10px 20px;
		border-radius: 3px;
		font-size: 88%;
		text-align: center;
		color: #ffffff;
	}

	a.btn-red:visited{
		text-align: center;
		color: #ffffff;
		text-decoration: none;
	}


	a.btn-red:hover{
		text-align: center;
		color: #ffffff;
		text-decoration: none;
		opacity: 0.7;
	}
	
	a.btn-white{
		display: block;
		max-width: 230px;
		background-color: #ffffff;
		background-image: url(../images/common/icon-black-arrow.png);
		background-repeat: no-repeat;
		background-position: 92% 50%;
		text-decoration: none;
		margin: 3.0612% auto 0% auto;
		padding: 10px 20px;
		border-radius: 3px;
		border: solid 1px #d80d18;
		font-size: 88%;
		text-align: center;
		color: #211715;
	}

	a.btn-white:visited{
		text-align: center;
		color: #211715;
		text-decoration: none;
	}


	a.btn-white:hover{
		text-align: center;
		color: #211715;
		text-decoration: none;
		opacity: 0.7;
	}
	
	a.btn-white-txtlink{
		display: block;
		max-width: 230px;
		background-color: #ffffff;
		background-image: url(../images/common/icon-txtlink.png);
		background-repeat: no-repeat;
		background-position: 92% 50%;
		text-decoration: none;
		margin: 3.0612% auto 0% auto;
		padding: 10px 20px;
		border-radius: 3px;
		border: solid 1px #d80d18;
		font-size: 88%;
		text-align: center;
		color: #211715;
	}

	a.btn-white-txtlink:visited{
		text-align: center;
		color: #211715;
		text-decoration: none;
	}


	a.btn-white-txtlink:hover{
		text-align: center;
		color: #211715;
		text-decoration: none;
		opacity: 0.7;
	}
	
	.txtlink{
		background: url(../images/common/icon-black-arrow.png) 100% 50% no-repeat;
		text-decoration: none;
		margin: 3.0612% 0 0 2.0408%;
		padding: 0 20px 0 0;
		text-align: center;
		color: #211715;
	}

	/*-------------------
	parts
	---------------------*/
	.mt20{
		margin-top: 2.0408%;
	}
	
	.mb20{
		margin-bottom: 2.0408%;
	}
	
	.mb40{
		margin-bottom: 4.0816%;
	}
	
	.pb10{
		padding-bottom: 1.0204%;
	}
	
	/*-------------------
	display none
	---------------------*/
	.sp-btn,
	#sp-nav,
	#sp-footnavinner{
		display: none;
		visibility: hidden;
	}
}

/*------------------------------------------
sp
------------------------------------------*/
@media only screen and (max-width: 640px){
	body{
		font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size: 100%;
		color: #211715;
		margin: 0;
		padding: 0;
		line-height: 1.7em;
	}
	
	#ind-header-area{
		width: 100%;
		box-sizing: border-box;
		border-top: solid 5px #d80d18;
		position: relative;
		padding: 1.5625%;
	}
	
	#header-area{
		width: 100%;
		box-sizing: border-box;
		border-top: solid 5px #d80d18;
		position: relative;
		padding: 1.5625%;
	}
	
	#heder-logo{
		width: 39.0625%;
		max-width: 250px;
		float: left;
	}
	
	/* ハンバーガーアイコン & 動作 */
	.sp-btn{
		width: 30px;
		height: 30px;
		display: block;
		position: absolute;
		right: 10px;
		top: 7px;
	}
	
	.sp-btn i{
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 3px;
		background: #d80d18;
		-webkit-transition: background 0.5s;
		transition: background 0.5s;
		position: relative;
		left: 5px;
		top: 14px;
	}
	
	.sp-btn i:before,
	.sp-btn i:after{
		content: "";
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 3px;
		background: #d80d18;
		position: absolute;
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: all 0.3s !important;
		transition: all 0.3s !important;
	}
	
	.sp-btn i:before{
		-webkit-transform: translateY(8px);
		-ms-transform: translateY(8px);
		transform: translateY(8px);
	}
	
	.sp-btn i:after{
		-webkit-transform: translateY(-8px);
		-ms-transform: translateY(-8px);
		transform: translateY(-8px);
	}
	
	.is-open i{
		background: #ffffff;
	}
	
	.is-open i:after{
		-webkit-transform: translateY(0px) rotate(-45deg);
		-ms-transform: translateY(0px) rotate(-45deg);
		transform: translateY(0px) rotate(-45deg);
	}
	
	.is-open i:before{
		-webkit-transform: translateY(0px) rotate(45deg);
		-ms-transform: translateY(0px) rotate(45deg);
		transform: translateY(0px) rotate(45deg);
	}
	
	.sp-btn p{
		display: block;
		position: relative;
		top: 70%;
		font-size: 79%;
	}
	
	/* アコーディオンメニュー */
	#sp-nav{
		display: none;
		width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 9999;
	}
	
	#sp-nav > ul{
		width: 100%;
		/*box-sizing: border-box;
		padding: 3.125%;*/
		background-color: rgba(255,255,255,0.85);
	}
	
	#sp-nav > ul > li{
		font-size: 88%;
		font-weight: bold;
		text-align: left;
		border-bottom: dotted 1px #afb0b0;
		margin: 0 auto;
		padding: 3.125% 7.8125%;
	}
	
	#sp-nav > ul > li:last-child{
		border: none;
	}
	
	#sp-nav ul li a:link{
		display: block;
		width: 100%;
		color: #211715;
		text-decoration: none;
		background: transparent;
	}

	#sp-nav ul li a:visited{
		color: #211715;
		text-decoration: none;
		background: transparent;
	}
	
	#sp-nav ul li a:hover{
		color: #a4bcc9;
		text-decoration: none;
		background: transparent;
	}
	
	.category-name{
		display: block;
		background: url(../images/common/icon-red-open.png) no-repeat 95% 45%;
		color: #211715;
	}
	
	.category-name.active{
		display: block;
		background: url(../images/common/icon-red-close.png) no-repeat 95% 45%;
		color: #211715;
	}
	
	.category{
		display: none;
		margin-top: 3.125%;
	}
	
	.category li{
		font-size: 88%;
		text-align: left;
		padding: 3.125% 7.8125%;
		border-bottom: dotted 1px #afb0b0;
	}
	
	.category li:last-child{
		border: none;
	}
	
	.container{
		width: 100%;
		box-sizing: border-box;
		font-size: 88%;
		margin: 0 auto;
		padding: 7.8125% 3.125%;
	}
	
	.section-name{
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 4.6875%; /* 30px */
	}
	
	.about-area{
		width: 90%;
		box-sizing: border-box;
		background: url(../images/common/bg-dotted.png) repeat;
		margin: 4.6875% auto 0% auto;
		padding: 4.6875%;
	}
	
	.about-area p{
		font-size: 88%;
		text-align: center;
	}
	
	.bank{
		text-align: center;
	}
	
	.bank span{
		display: block;
		text-align: center;
	}
	
	.bank p{
		display: block;
		text-align: center;
		padding-top: 1.0204%;
	}
	
	#link-area{
		width: 100%;
		background-color: #e9e9e9;
		margin-top: 3.125%;
	}
	
	#linkinner{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding:3.125%;
		text-align: center;
	}
	
	#linkinner li{
		display: block;
		margin-bottom: 3.125%;
	}
	
	#linkinner li:last-child{
		margin-bottom: 0;
	}
	
	#footer{
		width: 100%;
		padding-top: 3.0612%;
	}
	
	#sp-footnavinner{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding:3.125%;
	}
	
	#sp-footnavinner .col{
		display: block;
		width: 100%;
	}
	
	#sp-footnavinner .footnav-name{
		margin-bottom: 2.0408%;
		font-size: 75%;
		font-weight: normal;
	}
	
	#footcopy{
		width: 100%;
		background-color: #d80d18;
		padding: 3.0612% 0%;
	}
	
	#footcopyinner{
		width: 100%;
		text-align: center;
		color: #ffffff;
	}
	
	#footcopyinner p{
		width: 100%;
		font-size: 63%;
	}
	
	/*-----------------------
	btn
	-------------------------*/
	.btn-area{
		text-align: center;
	}

	a.btn-red{
		display: block;
		width: 100%;
		box-sizing: border-box;
		background-color: #d80d18;
		background-image: url(../images/common/icon-white-arrow.png);
		background-repeat: no-repeat;
		background-position: 92% 50%;
		text-decoration: none;
		margin: 3.0612% auto 0% auto;
		padding: 10px;
		border-radius: 3px;
		text-align: center;
		color: #ffffff;
		font-size: 88%;
	}

	a.btn-red:visited{
		text-align: center;
		color: #ffffff;
		text-decoration: none;
	}


	a.btn-red:hover{
		text-align: center;
		color: #ffffff;
		text-decoration: none;
		opacity: 0.7;
	}
	
	a.btn-white{
		display: block;
		width: 100%;
		box-sizing: border-box;
		background-color: #ffffff;
		background-image: url(../images/common/icon-black-arrow.png);
		background-repeat: no-repeat;
		background-position: 92% 50%;
		text-decoration: none;
		margin: 3.0612% auto 0% auto;
		padding: 10px;
		border-radius: 3px;
		border: solid 1px #d80d18;
		text-align: center;
		color: #211715;
		font-size: 88%;
	}

	a.btn-white:visited{
		text-align: center;
		color: #211715;
		text-decoration: none;
	}


	a.btn-white:hover{
		text-align: center;
		color: #211715;
		text-decoration: none;
		opacity: 0.7;
	}
	
	a.btn-white-txtlink{
		display: block;
		width: 100%;
		box-sizing: border-box;
		background-color: #ffffff;
		background-image: url(../images/common/icon-txtlink.png);
		background-repeat: no-repeat;
		background-position: 92% 50%;
		text-decoration: none;
		margin: 3.0612% auto 0% auto;
		padding: 10px;
		border-radius: 3px;
		border: solid 1px #d80d18;
		text-align: center;
		color: #211715;
		font-size: 88%;
	}

	a.btn-white-txtlink:visited{
		text-align: center;
		color: #211715;
		text-decoration: none;
	}


	a.btn-white-txtlink:hover{
		text-align: center;
		color: #211715;
		text-decoration: none;
		opacity: 0.7;
	}
	
	.txtlink{
		display: block;
		text-decoration: none;
		margin: 3.0612% auto 0% auto;
		color: #211715;
		font-size: 88%;
	}
	
	.txtlink a:link{
		background: url(../images/common/icon-black-arrow.png) 100% 50% no-repeat;
		padding-right: 25px;
	}

	/*-------------------
	parts
	---------------------*/
	.mt20{
		margin-top: 3.125%;
	}
	
	.mb20{
		margin-bottom: 3.125%;
	}
	
	.mb40{
		margin-bottom: 6.25%;
	}
	
	.pb10{
		padding-bottom: 1.5625%;
	}

	
	/*-------------------
	display none
	---------------------*/
	#header-info,
	#gnav-area,
	#footcopyinner ul,
	#footnavinner{
		display: none;
		visibility: hidden;
	}
	
}