@charset "utf-8";
/* CSS Document */

/*===============================================
●For Desktop Min Width 769px
===============================================*/

#breadcrumb {
	padding: 5px 0;
}

#breadcrumb_content {
	max-width: 960px;
	margin: 0 auto;
	width: 100%;
}

#special_top {
  height: 350px;
  background:url(fall-top3.jpg) no-repeat 50% 50%;
  background-size: cover;
  text-align: center;
}


#special_top_en {
  height: 350px;
  background:url(images/bg_kinkakuji_snow.jpg);
  background-size: cover;
  text-align: center;
	background-repeat: no-repeat; 

}

#special_top h1 {
	margin: 0 auto;
	padding: 100px 0 0 0;
	color: #000;
	max-width: 1200px;
	font-family: 'Big Caslon','Baskerville','Times New Roman', serif;
	font-style: italic;
	font-size: 2em;
	font-weight: bolder;
	text-shadow: 1px 1px 10px black;
}

#special_top_en h1 {
	margin: 0 auto;
	padding: 130px 0 0 0;
	color: #FFF;
	max-width: 1200px;
	font-family: 'Big Caslon','Baskerville','Times New Roman', serif;
	font-style: italic;
	font-size: 3em;
	font-weight: bolder;
	text-shadow: 0 0 10px #000;
}

#special_top h1.japan {
	padding: 245px 0 0 0;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}


@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

#special_content {
	max-width: 960px;
	margin: 0 auto;
	width: 100%;
}

#top_description {
	text-align: center;
	padding: 20px 0;
	font-size: 1.2em;
}

ul#portfolio-filter{ margin: -20px 0; padding: 0; height: 64px; padding-left: 150px; line-height: 64px; background: transparent url(../images/icon-tag-green.png) left no-repeat; }
ul#portfolio-filter li{ display: inline; }
ul#portfolio-filter a{ margin-right: 0.5em; padding: 0.8em 2em; background: #FFF; color: #AAA; text-decoration: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
ul#portfolio-filter a:hover, ul#portfolio-filter a.current{ color: #888; }
ul#portfolio-filter a.current{ background-color: #DDD; }

#special_content > ul {
    margin-bottom: 0;
}

#special_content > ul#portfolio-list > li {
    float: left;
    margin-bottom: 15px;
    margin-right: 20px;
    width: 300px;
    min-height: 360px;
}

#special_content > ul#portfolio-list > li a {
    border: 1px solid #FFF;
    display: block;
    overflow: hidden;
    position: relative;
    float: left;
}

#special_content > ul#portfolio-list > li a > img {
    -webkit-transition: -webkit-transform 0.15s ease 0s;
    -moz-transition: -moz-transform 0.15s ease 0s;
    -o-transition: -o-transform 0.15s ease 0s;
    transition: transform 0.15s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    height: 100%;
    width: 100%;
}

#special_content > ul#portfolio-list > li a:hover > img {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
}

#special_content > ul#portfolio-list > li a:hover .gallery-poster > img {
    opacity: 1;
}


#special_content ul#portfolio-list li .bottom_des {
	clear: both;
	padding: 0 0 10px 0;
}



#special_content ul li .bottom_des h3 {
	font-size: 1.3em;
	padding: 5px 0;
}

#special_content ul li .bottom_des h3 a {
	text-decoration: underline;
}

#special_content ul li .bottom_des p {
	padding: 0 0 5px 0;
}

.clear {
	clear: both;
}


/*===============================================
●For Tablet Max Width 768px
===============================================*/
@media screen and (max-width: 768px){

#special_content > ul#portfolio-list > li {
    float: left;
    margin: 1%;
    width: 48%;
}

}

/*===============================================
●For Mobile Max Width 640px
===============================================*/
@media screen and (max-width:640px){

#special_top h1 {
	display: none;
	padding: 50px 0 0 0;
	font-size: 2em;
}

#special_top_en h1 {
	padding: 100px 0 0 0;
	text-shadow: #000 1px 0 10px;
}

#special_top h1.japan {
	padding: 50px 0 0 0;
	font-size: 2em;
}

#special_top,
#special_top_en {
  height: 300px;
  background-position: 50% 30%;
  text-align: center;
}

ul#portfolio-filter{ margin: -20px 0 0 0; padding: 0; height: 120px; padding-left: 10px; line-height: 54px; left no-repeat; }


#special_content > ul#portfolio-list > li {
    float: left;
    margin: 0 2.5% 2.5% 2.5%;
    width: 95%;
}

}