@charset "utf-8";

/** 
    
	 
	Settings	 

	 
			  **/
			  

*{
	background-repeat:no-repeat;
	line-height:140%;
	font-family:Arial,  "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",   "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	margin:0;
	padding:0;
	outline: none
}

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}/* Non count border size */
 
a {text-decoration:none; overflow:hidden; color:#333}
a:hover {color:#666}

img {border: none; line-height:0; vertical-align:bottom;max-width: 100%}
img[data-echo]{ 
	min-width:50px; 
	min-height:50px; 
	background-image:url(../images/common/preloader-30-w.gif); 
	background-position:center center;
	border:solid 1px #ddd;
	border-radius:5px
}
img[data-echo].loaded{background-image:none}


.clear{clear:both; height:0; line-height:0; font-size:0}

.space10 {height: 10px}
.space20 {height: 20px}
.space30 {height: 30px}
.space40 {height: 40px}
.space100 {height: 100px}

.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}

.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}

.ml10{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml40{margin-left:40px}
.ml50{margin-left:50px}

.mr10{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr40{margin-right:40px}
.mr50{margin-right:50px}

.font10{font-size:10px}
.font12{font-size:12px}
.font14{font-size:14px}

.bold{font-weight:bold}

.txt-left{text-align:left}
.txt-center{text-align:center}
.txt-right{text-align:right}

.red{color:#C00}

.left {float:left}
.center{float:left}
.right {float:right}

p{line-height:160%}

li{list-style: none;}

.alpha{
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.alpha:hover{
	filter: alpha(opacity=70);
	-moz-opacity:0.75;
	opacity:0.75;
}

.transition-01{ 
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.transition-02{ 
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.transition-03{ 
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}


.bd-01{background: linear-gradient(transparent 60%, rgba(252,238,33,.6) 0%); font-weight: bold}
.bd-02{background: linear-gradient(transparent 60%, rgba(228,0,3,.4) 0%); font-weight: bold}
.bd-03{background: linear-gradient(transparent 60%, rgba(0,65,219,0.50)  0%); font-weight: bold}


.r-corner{-webkit-border-radius: 100%;-moz-border-radius:100%;border-radius:100%;}

.cursor{cursor:pointer; cursor:hand}

th,td{text-align:left}

input[type="text"]:focus {outline: 0;}
button:focus {outline: 0;-webkit-appearance: none;border-radius: 0;}

#back-top {
	position: fixed;
	bottom: 30px;
	right:0;
	z-index:9999
}


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

.clearfix { display: inline-table; }
.clearfix{zoom:1}/** for IE7 **/

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.link a{color:#29abe2}
.link a:hover{color:#ffb700}


#ie-notice{background-color: #fff; padding: 10px; text-align: center; font-size: 16px; font-weight: bold; color:red}

/** ***********************************************

Common Style

*********************************************** **/



.cols-2{font-size:0;}
.cols-2 .col{font-size:14px; display: inline-block; vertical-align: top; width :50%}

.cols-3{font-size:0;}
.cols-3 .col{font-size:14px; display: inline-block; vertical-align: top; width :33.33333%; width : -webkit-calc((100%) / 3) ; width : calc((100%) / 3)}

.cols-4{font-size:0;}
.cols-4 .col{font-size:14px; display: inline-block; vertical-align: top; width :25%}



.tr{display:table;table-layout: fixed;border-collapse: collapse;width: 100%}
.td{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;}
.th{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;font-weight:bold}

.reset{ font-size:0; letter-spacing:.5}
.reset li{font-size:14px; letter-spacing:normal}

.full{width:100%; height:auto}

.hr-list{letter-spacing: -0.5em}
.hr-list li{display:inline-block; vertical-align:top;letter-spacing: normal}

.table-style-01{width:100%}
.table-style-01 table{width:100%;border-collapse:separate;border-spacing:1px;}
.table-style-01 th{padding:10px; text-align:right;}
.table-style-01 td{padding:10px;}


.table-style-02{width:100%;background-color:#ccc}
.table-style-02 table{width:100%;border-collapse:separate;border-spacing:1px;}
.table-style-02 th{text-align:right; padding:8px 10px; vertical-align:top; white-space:nowrap;background:#eee}
.table-style-02 td{ padding:8px 10px; background-color:#fff}

.bt-blue a{color:#fff; display:block; padding:15px 10px; text-align:center; background-color:#269FE0;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px; border-bottom:solid 3px #069}
.bt-blue a:hover{background-color:#CCC;border-bottom:none; margin-top:11px!important}

.bt-blue-02 a{color:#fff; display:block; padding:10px 10px; text-align:center; background-color:#269FE0;-webkit-border-radius: 4px;-moz-border-radius:4px;border-radius:4px}
.bt-blue-02 a:hover{background-color:#CCC}

.bt-orange a{color:#fff; display:block; padding:15px 10px; text-align:center; background:#F90;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px; border:solid 1px #fff;
	background: -moz-linear-gradient(top ,#F90, #F60);
    background: -webkit-gradient(linear, left top, left bottom, from(#F90), to(#F60));
    background: linear-gradient(to bottom, #F90, #F60);
}
.bt-orange a:hover{background:#F60}

body{-webkit-text-size-adjust: 100%;word-break: break-all;}
.inner{width:100%; max-width: 1024px; margin:0 auto; position:relative}





h1{background-color: #666; color:#fff; text-align: center; font-weight: normal;padding: 20px 0}
h1 img{width:80%; max-width: 400px; height: auto; vertical-align: middle}



#gnavi{border-bottom:solid 1px #ccc; text-align: center; padding: 20px}
#gnavi li{display: inline-block; vertical-align: top; margin: 0 30px; font-weight: bold}




#top-sec-01{text-align: center; padding: 50px}
#top-sec-01 h2{font-size: 40px;}
#top-sec-01 p{font-size: 30px; margin-top: 20px}


#top-menu{margin-top: 50px}
#top-menu li{height: 400px; background-position: center; background-size: cover;position: relative; cursor:pointer; cursor:hand}
#top-menu li:hover{opacity: .8}
#top-menu li a{color:#fff; font-size: 30px; position: absolute; text-align: left;}

#top-menu li:nth-of-type(1) a{top:20px; left: 20px}
#top-menu li:nth-of-type(2) a{bottom:20px; right: 30px}
#top-menu li:nth-of-type(3) a{top:20px; left: 20px}
#top-menu li:nth-of-type(3) .cap{position: absolute; bottom:10px ;right: 10px; color:#fff; font-size: 12px}
#top-menu li:nth-of-type(4) a{bottom:20px; left: 20px}


#top-sec-02{text-align: center; padding: 50px}
#top-sec-02 h3{font-size: 40px; margin-bottom: 30px; font-weight: normal}
#top-sec-02 h3 br{display: none}
#top-sec-02 a:hover{opacity: .8}


footer{text-align: center; background-color: #ccc; padding: 50px 0 10px}
#f-logo{width: 80%; max-width: 120px; margin: 0 auto 30px;}


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


#gnavi{padding: 20px 10px}
#gnavi li{margin: 0 20px}
#gnavi li a{font-size: 14px}

#top-sec-01 h2{font-size: 7vw}
#top-sec-01 p{font-size: 4.5vw}

#top-sec-01{padding: 50px 20px}
#top-menu li{width:100%; height: 400px}


#top-sec-02{padding: 50px 20px}
#top-sec-02 h3{font-size: 6vw}
#top-sec-02 h3 br{display: block}

footer{padding: 50px 10px 10px}
footer small{font-size: 11px}

} 

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



#gnavi li:first-child{display:none}
#gnavi li a{font-size: 14px}

}






#page-title{font-size: 40px; text-align: center; font-weight: normal; margin: 30px; color:#666}

#gal-sec-01 .item{padding: 30px 0 50px;border-bottom:solid 1px #ddd; margin-bottom: 30px}
#gal-sec-01 .item:nth-of-type(5){margin-bottom:50px;border-bottom:none}

#gal-sec-01 .col:nth-of-type(1){width: 30%; padding-right: 20px}
#gal-sec-01 .col:nth-of-type(1) a:hover{opacity:.8}
#gal-sec-01 .col:nth-of-type(2){width: 70%}

#gal-sec-01 h3.title{font-size: 34px; text-align: center; font-weight: normal}


#gal-sec-01 .slide{width: 100%; height: auto; overflow: hidden; margin-bottom: 10px; position: relative;background-color: #000; }
#gal-sec-01 .slide li{display: inline-block; position: relative; vertical-align: middle;  text-align: center}
#gal-sec-01 .slide li img{vertical-align: middle;}



#gal-sec-01 .thumb {overflow: hidden}
#gal-sec-01 .thumb li{display: inline-block; padding: 0 2px; cursor:pointer; cursor:hand;text-align: center}
#gal-sec-01 .thumb img{vertical-align: middle; border:solid 2px #fff; max-height:85px}
#gal-sec-01 .thumb .slick-current img{border:solid 2px #e25a24}

.slick-prev{position: absolute; top:50%; left: 5px; z-index: 999; color:#eee; font-size: 30px; margin-top: -15px}
.slick-next{position: absolute; top:50%; right: 5px; z-index: 999; color:#eee; font-size: 30px; margin-top: -15px}
.fa-search-plus{color:#eee; font-size: 14px!important; position: absolute; bottom:10px; right:10px; z-index: 999}


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

#gal-sec-01 h3.title{font-size: 7vw}

#gal-sec-01 .col:nth-of-type(1){width: 100%; padding: 20px; text-align: center}
#gal-sec-01 .col:nth-of-type(2){width: 100%; padding: 20px}
#gal-sec-01 .col:nth-of-type(1) img{max-height: 250px}


} 






#angle-sec-01 h3.title{font-size: 34px; text-align: center; font-weight: normal; margin-bottom: 20px}

#angle-sec-01 .item{padding: 30px; width: 80%; margin: 0 auto;padding-bottom: 50px;border-bottom:solid 1px #ddd; }
#angle-sec-01 .item:nth-of-type(5){margin-bottom:50px;border-bottom:none}

#angle-sec-01 .slide{width: 100%; height: auto; overflow: hidden; margin-bottom: 10px; position: relative}
#angle-sec-01 .slide li{display: inline-block; position: relative}
#angle-sec-01 .slide p{position: absolute; top:10px; left: 10px; font-size: 24px; color:#fff; z-index: 999; text-shadow: 2px 2px 2px #666}


#angle-sec-01 .thumb li{display: inline-block; border:solid 3px #fff; cursor:pointer; cursor:hand; vertical-align: top}
#angle-sec-01 .thumb p{text-align: center; font-size: 14px}
#angle-sec-01 .thumb img{vertical-align: middle; border:solid 2px #fff; }
#angle-sec-01 .thumb .slick-current img{border:solid 2px #e25a24}



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

#angle-sec-01 .item{padding: 30px 20px 50px; width: 100%}
#angle-sec-01 .slide p{font-size: 18px}

} 

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

#page-title{font-size: 30px}
#angle-sec-01 .thumb p{font-size: 10px}

} 



#modal{position: fixed; width: 100%; height: 100%; top:0; left: 0; z-index: 9999; background-color: rgba(0,0,0,1); display: none}
#modal .col{width:auto!important;  margin: 0 auto!important; text-align: center; padding: 20px 0 0!important}
#modal .slide img{height:auto; width: auto}
#modal .thumb{padding:10px 0; margin: 0 auto}
#modal .thumb img{max-height: 80px;}
#modal .bt-close{font-size: 40px; color:#eee; position: absolute; top:10px; right:30px}
#modal .thumb img{vertical-align: middle; border:none}
#modal .thumb .slick-current img{border:none}
#modal .thumb li{border:none!important; margin: 0 5px}
#modal .thumb li p{display:none!important}

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

#modal .col{width: 100%!important;}
#modal .col img{max-height:inherit!important; height: auto!important}
#modal .slide img{height:auto; width: auto}
#modal .bt-close{font-size: 50px; color:#ddd; position: absolute; top:10px; right:10px}

}