@charset "utf-8";
/* ===================================================================
CSS information

 file name  :  concept.css
 style info :  スタイル指定
=================================================================== */


/* ----- common ----- */
/* head */
#service h3 {
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W2", "HiraMinProN-W2", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size:1.4em;
	color:#000;
	font-weight:normal;
	background:#d6edf3;
	padding:20px;
	margin:30px 0 80px;
}
#service h4 {
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W2", "HiraMinProN-W2", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size:1.5em;
	color:#000;
	font-weight:normal;
	margin-bottom:20px;
}
#service h4 span { font-size:0.6em; display:block; margin-bottom:10px;}
#service h5 {
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W2", "HiraMinProN-W2", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size:1.2em;
	color:#000;
	font-weight:normal;
	margin-bottom:20px;
	text-align:left;
}
p { font-size:0.95em; line-height:1.8; color:#000;}

/* layout */
#service .innerWrap { max-width:980px; margin:0 auto;}



#concept_bg {
	padding-top:230px;
	overflow:hidden;
}
#concept_bg img.fixImg {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:-1;
}

#service figcaption { text-align:right; color:#000; font-size:0.75em; margin:10px 0 0;}
#service .txt_bottom {font-size:0.75em;}
 




/* ----- tab ----- */
.tab li {
	display:inline-block;
	width:300px;
	margin-left:40px;
}
.tab li:first-child {
	margin-left:0;
}
.tab li a {
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W2", "HiraMinProN-W2", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	display:block;
	width:100%;
	padding:25px 10px;
	border:#20a9e4 1px solid;

	position: relative;
	font-size:0.95em;
}
.tab li a::before {
	position: absolute;
	top: 6px;
	bottom: 0;
	left: 10px;
	margin: auto;
	content: "";
	vertical-align: middle;
	
	width: 6px;
	height: 6px;
	border: 6px solid transparent;
	border-top: 6px solid #fff;
}

.tab li a:hover,
.tab li.current a {
	background:#7ebceb;
	border:0;	
	color:#fff;
}



/*-----before-----*/
#before {}
/*-----after-----*/
#after {}
/*-----change-----*/
#change {}

/*-----point-----*/

.point {
}
.point {
	background:url(../../../img/elements/point_bg.jpg) 0 0 repeat;
	max-width:980px;
	position:relative;
	border-radius:3px;
	-webkit-box-shadow: 0 1px 10px #777;
	-moz-box-shadow: 0 1px 10px #777;
	box-shadow: 0 1px 10px #777;
	color:#333;
	padding:40px 25px;
	margin:0 auto 80px;
	z-index:1;
}
.point p {
	text-align:left;
    font-size: 0.9em;
    letter-spacing: 0.08em;
    line-height: 2;
}
.point strong {
    display: block;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W2", "HiraMinProN-W2", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	text-align:center;
    font-size: 1.6em;
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 20px;
}
.point::before {
	content:'';
	display:block;
	width:27px;
	height:27px;
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	top:10px;
	left:10px;
	z-index:10;
}
.point::after {
	content:'';
	display:block;
	width:27px;
	height:27px;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	top:10px;
	right:10px;
	z-index:10;
}
.point p::before {
	content:'';
	display:block;
	width:27px;
	height:27px;
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	bottom:10px;
	right:10px;
	z-index:10;
}
.point p::after {
	content:'';
	display:block;
	width:27px;
	height:27px;
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	background: url(../../../img/elements/point_flame.png) no-repeat;
	position:absolute;
	bottom:10px;
	left:10px;
	z-index:10;
}

.point .twoColumn { overflow:hidden; max-width:880px; margin:0 auto 10px;}
.point .twoColumn .left { float:left; width:48.5%; text-align:left;}
.point .twoColumn .right { float:right; width:49%;}
	#service .point .twoColumn .left h4 { line-height:1.5; margin:40px 0;}
	.point .twoColumn .left figure img { width:75%; margin-bottom:20px;}
	#service .point .twoColumn .left figcaption { text-align:left;}



/* ----- fair ----- */
#service #fair { overflow:hidden; margin-bottom:50px;}
#service #fair .left { float:left; width:45%; text-align:left;}
#service #fair .right { float:right; width:50%;}


/* ----- original ----- */
#service #original { overflow:hidden; margin-bottom:70px;}
#service #original > div { padding:30px 10px; background:#fff;}
#service #original > div > div { display:inline-block; margin:0 10px; width:47.5%;}


/* ----- party ----- */
#service #party { overflow:hidden; margin-bottom:30px;}
#service #party .left { float:left; width:45%; text-align:left;}
#service #party .right { float:right; width:50%;}


/* ----- voice ----- */
#service #voice { margin:0 0 80px;}
#service #voice li { display:inline-block; margin:0 20px 20px;}


/* ----- ncc ----- */
#service #ncc { overflow:hidden; margin-bottom:30px;}
#service #ncc .left { float:left; width:45%; text-align:left;}
#service #ncc .right { float:right; width:50%;}

#service #nccConts { overflow:hidden; margin-bottom:30px;}
#service #nccConts .left { float:left; width:47.5%; text-align:left;}
#service #nccConts .right { float:right; width:47.5%;}

	#service #nccConts li { overflow:hidden; margin-bottom:10px;}
	#service #nccConts li .left { float:left; width:28%; text-align:left;}
	#service #nccConts li .right { float:right; width:72%; text-align:left;}

	#service #nccConts h4 { font-size:1.4em; border-bottom:1px solid #7dbceb; text-align:left; padding-bottom:10px; margin-top:30px;}
	#service #nccConts h5 { font-size:1.2em; font-weight:normal; text-align:left; margin-bottom:10px;}
	#service #nccConts p { text-align:left;}
	#service #nccConts p.caption { clear:both; font-size:0.75em; line-height:1.5;}
	

/* ----- nextPass10 ----- */
#service #nextPass10 { overflow:hidden; margin-bottom:30px; padding:50px 0;}
#service #nextPass10 .left { float:left; width:47.5%; text-align:left;}
#service #nextPass10 .right { float:right; width:47.5%; text-align:left;}
#service #nextPass10 p { margin-bottom:20px;}
#service #nextPass10 p.caption { font-size:0.75em; text-align:left; line-height:1.5;}



/* ----- changeList ----- */
#changeList li { display:inline-block; margin:0 20px 60px;}
#changeList2 { max-width:980px; margin:0 auto;}
#changeList2 li { display:inline-block; width:46%; margin:0 2% 50px;}
	#changeList2 li h4 { text-align:left; margin-bottom:20px;}
	#changeList2 li p { text-align:left; margin:0 0 20px;}
	#changeList2 li > div { padding:10px; background:#fff;}

.btn-block {
    margin: 60px auto 60px;
    width: 730px;
}

.btn-block .btn {
    border: solid 1px #7ebceb;
    width: 330px;
		color: #fff;
		font-size: 20px;
}

.btn-block .btn a {
    display: block;
    padding: 20px 0;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W2", "HiraMinProN-W2", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 20px;
    transition: all 0.3s;
}

.btn-block .btn a:hover {
    color: #FFF;
    background: #7ebceb;
}

.btn-block .btn-visit {
    background: #7ebceb;
    color: #FFF;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W2", "HiraMinProN-W2", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 20px;
    padding: 20px 0;
}

@media screen and (max-width: 1080px) {
	#concept_bg { padding-left:3%; padding-right:3%;}
	.tab {
		
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	
		-webkit-box-pack:justify;
		-moz-content: center;
		-ms-flex-pack:justify;
		-ms-justify-content: center;
		-webkit-justify-content: center;
		justify-content:  center; 
	
	}
	.tab li {
		width:31.3333333333%;
		margin-left:2%;
		margin-bottom:20px;
	}
	.tab li a {
		padding-left:15%;
		text-align:left;
		line-height:1.3;
		
	}
	#service #original > div > div { margin:0;}

}
@media screen and (max-width: 980px) {
	#service .point .twoColumn .left h4 br { display:none;}

	#service #nccConts li .left { width:38%;}
	#service #nccConts li .right { width:62%;}
	#service #nccConts p.caption { padding-top:30px;}

}
@media screen and (max-width: 767px) {
    .btn-block {
        width: 95%;
    }
    .btn-block .btn {
        width: 48%;
    }	
	#service h3 { padding:15px; margin-bottom:20px; text-align:left; line-height:1.3;}
	#service h4 { line-height:1.3; margin-bottom:10px;}
	.tab { display:block;}
	.tab li {
		width:100%;
		margin-left:0%;
		margin-bottom:5px;
	}
	.tab li a { margin:0; padding-left:10%; padding-top:15px; padding-bottom:15px;}
	.point strong { text-align:left;}
	.point .twoColumn .left { float:none; width:100%; margin-bottom:20px;}
	.point .twoColumn .left figure img { width:100%; margin-bottom:20px;}
	.point .twoColumn .right { float:none; width:100%; margin-bottom:40px;}
	
	#service .point .twoColumn .left h4 { margin:0 0 20px;}
	#service .point .twoColumn .left { float:none; width:100%; margin-bottom:20px; padding:0;}
	#service .point .twoColumn .right { float:none; width:100%;}
	
	/* ----- fair ----- */
	#service #fair { overflow:hidden; margin-bottom:50px;}
	#service #fair .left { float:none; width:100%; text-align:left; margin-bottom:20px;}
	#service #fair .right { float:none; width:100%;}
		
	
	/* ----- party ----- */
	#service #party { overflow:hidden; margin-bottom:30px;}
	#service #party .left { float:none; width:100%; text-align:left; margin-bottom:20px;}
	#service #party .right { float:none; width:100%;}
	
	/* ----- original ----- */
	#service #original { overflow:hidden; margin-bottom:20px;}
	#service #original > div { padding:30px 10px; background:#fff;}
	#service #original > div > div { display:inline-block; margin:0 10px; width:100%; margin-bottom:20px;}
	
	
	/* ----- ncc ----- */
	#service #ncc { overflow:hidden; margin-bottom:30px;}
	#service #ncc .left { float:none; width:100%; text-align:left; margin-bottom:20px;}
	#service #ncc .right { float:none; width:100%;}
	
	#service #nccConts { overflow:hidden; margin-bottom:30px;}
	#service #nccConts .left { float:none; width:100%; text-align:left; margin-bottom:20px;}
	#service #nccConts .right { float:none; width:100%;}
	
		#service #nccConts li { overflow:hidden; margin-bottom:10px;}
		#service #nccConts li .left { float:none; width:100%; text-align: center;}
		#service #nccConts li .right { float:none; width:100%; text-align:left;}
	
		#service #nccConts h4 { font-size:1.4em; border-bottom:1px solid #7dbceb; text-align:left; padding-bottom:10px; margin-top:30px;}
		#service #nccConts h5 { font-size:1.2em; font-weight:normal; text-align:center; margin-bottom:10px;}
		#service #nccConts p { text-align:left;}
		#service #nccConts p.caption { clear:both; font-size:0.75em; line-height:1.5;}
		
	
	/* ----- nextPass10 ----- */
	#service #nextPass10 { overflow:hidden; margin-bottom:30px; padding:50px 0;}
	#service #nextPass10 .left { float:none; width:100%; text-align:left;}
	#service #nextPass10 .right { float:none; width:100%; text-align:left;}
	#service #nextPass10 p { margin-bottom:20px;}
	#service #nextPass10 p.caption { font-size:0.75em; text-align:left; line-height:1.5;}
	
	/* ----- changeList ----- */
#changeList li { display:inline-block; margin:0 20px 60px;}
#changeList2 { max-width:980px; margin:0 auto;}
#changeList2 li { display:inline-block; width:100%; margin:0 2% 50px;}
	#changeList2 li h4 { text-align:left; margin-bottom:20px;}
	#changeList2 li p { text-align:left; margin:0 0 20px;}
	#changeList2 li > div { padding:10px; background:#fff;}


}
@media screen and (max-width: 640px) {
	#concept_bg {
		padding-top:150px;
	}
	/*-----before-----*/


}
@media screen and (max-width: 320px) {

}