@charset "UTF-8";

/*--------------------------------------------------------------------------------
topimage
--------------------------------------------------------------------------------*/
div.parallax{
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	}

@media all and (max-width: 960px){
	.box{
		width:auto;
		}
	}
@media all and (max-width: 767px) {
	#topimage { margin-bottom: 20px; }
	#topimage .box{
		position: relative;
		margin: 0 auto;
	}
	#topimage .box h2{
		position: absolute;
		top: 20px;
		left: 0;
		right: 0;
		margin: auto;
	}
	#topimage .logo {
		width: 200px;
		height: 185px;
	}
}
@media screen and (min-width: 768px) {
	#topimage{
		height:800px;
	}
	.parallax_first_img{
		background:url(img/topimage.jpg);	
	}
	#topimage .box{
		max-width: 960px;
		margin: 0 auto;
	}
	#topimage .box h2{
		line-height: 600px;
		font-size: 60px;
		color: #fff;
		text-align: center;
		font-weight: bold;
		text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}
	#topimage .logo {
		width: 400px;
		height: 370px;
	}
}

/*----------------------------------------*----------------------------------------
about
----------------------------------------*----------------------------------------*/
#about h1 { font-size: 1.4rem; margin-bottom: 0px; }
#about h2 { font-size: 2rem; margin-bottom: 20px; }
#about h2 span { font-size: 1.2rem; }

@media all and (max-width: 767px) {
	#about { margin-bottom: 60px; }
}

@media screen and (min-width: 768px) {
	#about { padding-top: 80px;  padding-bottom: 80px;}
	#about h1 { font-size: 1.6rem; margin-bottom: 10px; }
	#about h2 { font-size: 3rem; margin-bottom: 40px; }
	#about h2 span { font-size: 1.8rem; }
}

/*----------------------------------------*----------------------------------------
gallery
----------------------------------------*----------------------------------------*/
#gallery { position: relative; padding: 40px 0 40px; background: url(common/img/bg_bl.gif); display: none; }
#gallery .mark {
	position: absolute;
	width: 40px;
	top: -36px;
	left: 0;
	right: 0;
	margin: auto;
}
#gallery .ht {
	background: url(img/gallery_ht.png) no-repeat left center;
	background-size: contain;
	width: 270px;
	height: 38px;
	margin: auto;
	margin-bottom: 40px;
}

@media all and (max-width: 767px) {
	#gallery  { overflow: hidden; padding: 20px 0 20px; }
	#gallery .mark { position: static; margin-bottom: 10px; }
}


#gallery .galleryBox { background: #fff; width: 300px; margin: 0 10px; padding-bottom: 10px; }
#gallery .galleryBox .pic { position: relative; width: 300px; height: 225px; background: #fafafa; }
#gallery .galleryBox .pic img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	}
#gallery .galleryBox .title { margin: 20px 10px; }
#gallery .galleryBox .cate { margin: 0 10px; }
#gallery .ribbon {    
    display: inline-block;
    position: absolute;
	z-index: 999;
    left: 0;
    top: 5px;
    box-sizing: border-box;
    padding: 0 12px;
    margin: 0;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: white;
    background: #70c7ff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
#gallery .ribbon:before {
    position: absolute;
    content: '';
    top: 0;
    left: -7px;
    border: none;
    height: 38px;
    width: 7px;
    background: #70c7ff;
    border-radius: 5px 0 0 5px;
}
#gallery .ribbon:after {
    position: absolute;
    content: '';
    bottom: -7px;
    left: -5px;
    border: none;
    height: 7px;
    width: 5px;
    background: #4d99ca;
    border-radius: 5px 0 0 5px;
}

#gallery .cate a {
	border: none;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	vertical-align: baseline;
	position: relative;
	font-size: 1rem;
	padding: 2px 7px;
	transition: all .2s linear;
	color: #333;
	border: 1px solid #00a0e9;
	border-radius: 3px;
	background: #fff;
}
#gallery .cate a:hover, #gallery .cate a:active {
	border-color: #00a0e9;
	color: #00a0e9;
	background: #ccecfb;
}


/*----------------------------------------*----------------------------------------
parallax
----------------------------------------*----------------------------------------*/
.parallax_second_img{
	height:400px;
	background:url(img/parallax_01.jpg);
	margin-bottom: 60px;
}

/*----------------------------------------*----------------------------------------
archive
----------------------------------------*----------------------------------------*/
@media screen and (min-width: 768px) {
#archive .container {background: url(img/archive_bg.gif) center repeat-y;}
}
#archive .slick { padding: 0 20px; }

#archive .archive_body { padding: 0 10px; }
#archive .archive_body:hover { opacity: 0.7 ; }
#archive .archive_body .date { color: #00a0e9; font-size: 1.5rem; margin: 20px 0 10px ; }
#archive .archive_body .title { color: #333; text-decoration: none; }

/*----------------------------------------
arrow
----------------------------------------*/

#archive .slick-prev, #archive .slick-next {
	z-index: 2;
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 95px;
	display: block;
	padding: 0;
	cursor: pointer;
	border: none;
	outline: none;
	margin-top: -30px;
	background: none;
}
#archive .slick-prev:hover, #archive .slick-next:hover { outline: none; }
#archive .slick-prev:before, #archive .slick-next:before {
	font-family: 'FontAwesome';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 20px;
	line-height: 1;
	color: #00a0e9;
}
#archive .slick-prev:before { content: '\f0d9'; }
#archive .slick-next:before { content: '\f0da'; }

/* outside */

@media all and (max-width: 767px) {
#archive .slick-prev, #archive .slick-next { margin-top: -20px; }
#archive .slick-prev:before, #archive .slick-next:before { font-size: 40px; }
#archive .slick-prev { left: 10px; }
#archive .slick-next { right: 10px; }

/* outside */

#archive .arrows-outside .slick-prev { left: -10px; }
#archive .arrows-outside .slick-next { right: -10px; }
}

@media print, screen and (min-width: 768px) {

#archive .slick-prev { left: 20px; }
#archive .slick-next { right: 20px; }

/* outside */

#archive .arrows-outside .slick-prev { left: -10px; }
#archive .arrows-outside .slick-next { right: -10px; }
}

/*----------------------------------------
news
----------------------------------------*/
#news .ht {
	background: url(img/news_ht.png) no-repeat left center;
	background-size: contain;
	width: 68px;
	height: 36px;
	margin: auto;
	margin-bottom: 40px;
}

/*----------------------------------------
blog
----------------------------------------*/
#blog .ht {
	background: url(img/blog_ht.png) no-repeat left center;
	background-size: contain;
	width: 66px;
	height: 36px;
	margin: auto;
	margin-bottom: 40px;
}