@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Amiri');

/* common
----------------------------------------------------------------------------------*/

body {
	margin: 0;
	padding: 0;
	font-size: 18px;
    font-family: 'Amiri', serif;
	/*font-family: "Times New Roman", Times, "serif";*/
	line-height: 1.4;
	color: #333;
	vertical-align: top;
	background: url(../img/bg.gif) repeat 0 0;
	-webkit-text-size-adjust: 100%;
}

a:link   {color: #0063c6;text-decoration: none;}
a:visited{color: #0063c6;text-decoration: none;}
a:hover  {color: #ff6400;text-decoration: none;}
a:active {color: #0063c6;text-decoration: none;}


/*.min{
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}*/


/* structure
----------------------------------------------------------------------------------*/
#container{
	width: 1020px;
	margin: 0 auto;
}
@media only screen and (max-width: 640px){
#container{
	width: auto;
	padding: 0 20px;
}
}
@media only screen and (max-width: 320px){
#container{
	padding: 0 10px;
}
}




/* header
----------------------------------------------------------------------------------*/
#header{
	margin: 10px 0 20px;
    overflow: hidden;
}
#header h1{
    float: left;
}
@media only screen and (max-width: 640px){
    #header h1{
        float: none;
        width: 200px;
        margin: 0 auto;
    }
    #top #header h1{
        float: left;
    }
}

/* top
----------------------------------------------------------------------------------*/
/* slideshow */
#top-slide-wrap{
	position: relative;
	min-width: 1020px;
	height: 600px;
	margin: 0 0 30px;
	overflow: hidden;
}
#top-slide-wrap .copy{
    display: block;
	width: 100%;
    height: 600px;
    line-height: 600px;
    vertical-align: middle;
    z-index: 2900;
	/*top: 275px;*/
    text-align: center;
}
#top-slide-wrap .copy img{
    display: inline;
    vertical-align: middle;
}
#top-slide-wrap .copy:hover img{
    opacity: 1;
}
#top-slide-wrap #bxslider li{
	height: 600px;
	-webkit-background-size: cover!important;
	background-size: cover!important;
}
#top-slide-wrap #bxslider li.slide01{background: url(../../img/slide01.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide02{background: url(../../img/slide02.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide03{background: url(../../img/slide03.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide04{background: url(../../img/slide04.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide05{background: url(../../img/slide05.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide06{background: url(../../img/slide06.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide07{background: url(../../img/slide07.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide08{background: url(../../img/slide08.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide09{background: url(../../img/slide09.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide10{background: url(../../img/slide10.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide11{background: url(../../img/slide11.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide12{background: url(../../img/slide12.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide13{background: url(../../img/slide13.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide14{background: url(../../img/slide14.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide15{background: url(../../img/slide15.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide16{background: url(../../img/slide16.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide17{background: url(../../img/slide17.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide18{background: url(../../img/slide18.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide19{background: url(../../img/slide19.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide20{background: url(../../img/slide20.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide21{background: url(../../img/slide21.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide22{background: url(../../img/slide22.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide23{background: url(../../img/slide23.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide24{background: url(../../img/slide24.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide25{background: url(../../img/slide25.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide26{background: url(../../img/slide26.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide27{background: url(../../img/slide27.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide28{background: url(../../img/slide28.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide29{background: url(../../img/slide29.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide30{background: url(../../img/slide30.jpg) center 0 no-repeat;}
#top-slide-wrap #bxslider li.slide31{background: url(../../img/slide31.jpg) center 0 no-repeat;}
#top-slide-wrap .bx-pager{
	bottom : 10px;
	z-index: 5000;
}
#top-slide-wrap .bx-wrapper .bx-pager.bx-default-pager a{
	width: 40px;
	height: 7px;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	background: #FFF;
}

#top-slide-wrap .bx-wrapper .bx-pager.bx-default-pager a:hover, #top-slide-wrap .bx-wrapper .bx-pager.bx-default-pager a.active{background: #ff3333;}
@media only screen and (max-width: 640px){
#top-slide-wrap{min-width: inherit;height: 200px;}
#top-slide-wrap .copy{
    height: 200px;
    padding: 0 10px;
    line-height: 200px;
}
#top-slide-wrap #bxslider li{
	width: 100%!important;
	height: 200px;
}
#top-slide-wrap .bx-wrapper .bx-pager.bx-default-pager a{
	width: 8px;
	height: 5px;
    margin: 0 2px;
}
}

/* award */
#award{
	margin: 30px 0 0;
	padding: 20px 0;
	border-top: 1px solid #95989A;
	border-bottom: 1px solid #95989A;
}
#award h2{
	margin: 0 0 15px;
	font-size: 20px;
	text-align: center;
	line-height: 1.4;
}
#award h2 .mr{margin-right: 5px;}
#award ul{
	text-align: center;
}
#award ul li{
	display: inline-block;
	padding: 0 10px;
}
#award ul li a{
	display: inline-block;
	min-width: 245px;
	padding: 10px;
	color: #646464;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
	border: 1px solid #95989A;
}
#award ul li a:hover{
	color: #fff;
	background: #95989A;
}
@media only screen and (max-width: 640px){
	#award h2 span{display: block;}
	#award h2 .mr{margin-right: 0;}
}

/* top-sns */
.top-sns{
    float: right;
    margin: 30px 0 0;
}
.top-sns ul{
    text-align: right;
}
.top-sns ul li{
    display: inline-block;
}
.top-sns ul li:first-child{
    margin-right: 10px;
    padding-right: 12px;
    border-right: 1px solid #000;
}
@media only screen and (max-width: 640px){
    .top-sns{
        margin: 20px 0 0;
    }
    .top-sns ul{
        text-align: center;
    }
}

/* top-facebook */
/*.top-facebook{
	margin: 100px 0;
    text-align: center;
}
.top-facebook a{
    display: block;
    max-width: 250px;
    margin: 0 auto;
}
.top-facebook p{
    margin: 10px 0 0;
    color: #395893;
    font-size: 16px;
    text-align: center;
}
@media only screen and (max-width: 640px){
    .top-facebook p{
        font-size: 14px;
    }
}*/

/* top-list */
#top-list{
	position: relative;
	margin: 50px -10px 0;
	letter-spacing: -0.4em;
	z-index: 10;
}
#top-list li{
	display: inline-block;
	width: 33.333%;
	margin: 0 0 20px;
	padding: 0 10px;
	letter-spacing: normal;
	vertical-align: top;
}
#top-list li a{
	display: block;
	min-height: 405px;
	padding: 15px;
	color: #666;
	text-decoration: none;
	background: #fff;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	-webkit-box-shadow: 5px 5px 10px #666;
	-moz-box-shadow: 5px 5px 10px #666;
	box-shadow: 5px 5px 10px #666;
}
#top-list li a:hover{
    opacity:0.50;
    filter: alpha(opacity=50);
}
#top-list li a:hover img{
    opacity:1;
    filter: alpha(opacity=100);
}
#top-list li a figure{text-align: center;}
#top-list li a span{
	display: block;
	font-size: 16px;
}
#top-list li a .name{margin: 5px 0;}
#top-list li a .name strong{
	color: #633;
	font-weight: bold;
}
#top-list li a .catch{
	margin: 0 0 10px;
	color: #333;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
}
#top-list li a .text{
	color: #333;
}
.top-map{
	margin: 20px 0 0;
	/*margin: -200px 0 0;*/
	text-align: right;
}
@media only screen and (max-width: 640px){
#top-list{
	margin: 50px 0;
	padding: 0;
	background: none;
}
#top-list li{
	display: block;
	width: auto;
	padding: 0;
}
#top-list li a{min-height: inherit!important;padding: 20px;}
#top-list li a .name,
#top-list li a .catch{text-align: left;}
}
@media only screen and (max-width: 320px){
#top-list li a{padding: 10px;}
}



/* slideshow
----------------------------------------------------------------------------------*/
#slideshow{
	position: relative;
	overflow: hidden;
}
#slider{
	height: 573px;
	overflow: hidden;
}
#bxslider li{
	width: 100%!important;
}
#bx-pager{
	margin: 15px -15px 40px 0;
	overflow: hidden;	
}
#bx-pager a{
	float: left;
	width: 20%;
	padding: 0 15px 0 0;
}
#bx-pager .active span{
	display: block;
	width: 182px;
	border: 5px solid #ee002f;
}
@media only screen and (max-width: 640px){
#slideshow{
	margin: 0 0 30px;
}
#slider{
	height: auto;
	max-height: 348px;
	overflow: hidden;
}
#bx-pager{
	display: none;
	margin: 10px -10px 40px 0;
}
#bx-pager a{
	padding: 0 10px 0 0;
}
}


/* article
----------------------------------------------------------------------------------*/
.copy{
	margin: 0 0 30px;
	text-align: center;
}
.prolog{
	margin: 0 0 20px;
	font-size: 20px;
}
#pttl{
	margin: 0 0 20px;
	padding: 10px;
	font-size: 26px;
	line-height: 1.3;
	border: 1px solid #666;
	background: #fff;
}
.wraparound .section .text{
    overflow: hidden;
}
.section{
	margin: 0 0 60px;
	overflow: hidden;
}
.left .images{
	float: left;
	width: 670px;
    margin: 0 30px 30px 0;
}
/*.left .text{
	float: right;
	width: 320px;
}*/
.right .images{
	float: right;
	width: 670px;
    margin: 0 0 30px 30px;
}
/*.right .text{
	float: left;
	width: 320px;
}*/
.section .images iframe{
	height: 404px;
}
.section .date{
	margin: 0 0 5px;
	font-size: 18px;
}
.section .date span{
	color: #633;
}
.section .ttl{
	margin: 0 0 20px;
	color: #333;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
}
.section .btn{
	margin: 20px 0 0;
	text-align: center;
}
.section .note{
    font-size: 14px;
    vertical-align: top;
}
.section .caption{
	margin: 10px 0 0;
    font-size: 16px;
}

#info{
	margin: 0 0 60px;
	padding: 25px;
	font-size: 14px;
	border: 3px solid #966;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
#info h2{
	margin: 0 0 20px;
	color: #fff;
	background: #966;
}

#info div{
	float: left;
}
#info #image{
	width: 295px;
	margin-right: 25px;
	text-align: center;
}
#info #detail{
	width: 324px;
	margin-right: 25px;
}
#info #map{
	width: 295px;
}
#info #map iframe{
	height: 370px;
}
#info #detail #company dt{
	float: left;
	width: 8em;
}
#info #detail #company dd{
	padding: 0 0 0 8em;
}
/*#info #detail #works dt{
	float: left;
	width: 5em;
}*/
#info #detail #works dd{
	padding: 0 0 0 1em;
}
#info #detail #works dd:after{
	content: ".";  
	display: block;  
	visibility: hidden;  
	height: 0.1px;  
	font-size: 0.1em;  
	line-height: 0;  
	clear: both;  
}
.pager {
    clear: both;
	margin: 0 0 60px;
	text-align: center;
}
.pager a, .pager span {
    border: 1px solid #646464;
    margin: 2px;
    padding: 6px 10px;
	color: #fff;
    text-decoration: none;
	vertical-align: middle;
	background: #646464;
}
.pager a:hover, .pager span.current {
	color: #646464;
    border-color: #646464;
	background: none;
}

@media only screen and (max-width: 640px){
#pttl{
	font-size: 20px;
}
.left .images,
.left .text,
.right .images,
.right .text{
	float: none;
	width: auto;
}
.section .images{
	margin: 0 0 10px;
}
.section .images iframe{
	height: 250px;
}
#info{
	padding: 10px;
}
#info div{
	float: none;
}
#info #image,
#info #detail,
#info #map{
	width: auto;
	margin: 0;
}
#info #image,
#info #detail{
	margin: 0 0 20px;
}
#info #map iframe{
	height: 200px;
}
}


/* archive
----------------------------------------------------------------------------------*/

#archive h2{
	margin: 30px 0 20px;
	padding: 0 0 5px;
	text-align: center;
	border-bottom: 3px solid #999;
}
#archive ul{
	margin: 0 -5px;
	letter-spacing: -0.4em;
}
#archive .bn li{
	display: inline-block;
	width: 20%;
	margin: 0 0 20px;
	padding: 0 5px;
	letter-spacing: normal;
	vertical-align: top;
}
#archive .bn li a{
	display: block;
	min-height: 174px;
	padding: 10px;
	color: #666;
	text-decoration: none;
	background: #fff;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	-webkit-box-shadow: 5px 5px 10px #666;
	-moz-box-shadow: 5px 5px 10px #666;
	box-shadow: 5px 5px 10px #666;
}
#archive .bn li a:hover{
    opacity:0.50;
    filter: alpha(opacity=50);
}
#archive .bn li a:hover img{
    opacity:1;
    filter: alpha(opacity=100);
}
#archive .bn li a figure{text-align: center;}
#archive .bn li a span{
	display: block;
	font-size: 11px;
}
#archive .bn li a .name{margin: 5px 0;}
#archive .bn li a .name strong{
	color: #633;
	font-weight: bold;
}
#archive .bn li a .catch{
	margin: 0 0 10px;
	color: #333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
}
#archive .bn li a .text{
	color: #333;
}
@media only screen and (max-width: 640px){
#archive .bn li{
	width: 50%;
}
#archive .bn li a{
	min-height: 175px;
}
}
@media only screen and (max-width: 480px){
#archive ul{
	margin: 0 -5px;
}
#archive .bn li{
	padding: 0 5px;
}
#archive .bn li a{padding: 10px;}
}

/* footer
----------------------------------------------------------------------------------*/
#footer{
	margin: 60px 0 0;
	font-size: 12px;
}
#footer address span{
	margin-left: 20px;
}
#copyright{
	margin: 5px 0 0;
	padding: 5px 0;
	text-align: center;
	border-top: 3px solid #999;
}
@media only screen and (max-width: 640px){
#footer address{
	text-align: center;
}
#footer address span{
	display: block;
	margin: 0;
}
}