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

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

#fireworks_top {
	background: url(../images/zekkei_summer_fireworks_page_top2.jpg) no-repeat center top;
	background-size:100% auto;
	padding: 60px 0 0 0;
}

#nakafurano_top {
	background: url(../images/zekkei_summer_nakafurano_page_top.jpg) no-repeat center top;
	background-size:100% auto;
	padding: 60px 0 0 0;
}

#miyakojima_top {
	background: url(../images/zekkei_summer_miyajima_page_top.jpg) no-repeat center top;
	background-size:100% auto;
	padding: 60px 0 0 0;
}

#lakemashu_top {
	background: url(../images/zekkei_summer_mashuko_page_top.jpg) no-repeat center top;
	background-size:100% auto;
	padding: 60px 0 0 0;
}

#akeno_top {
	background: url(../images/zekkei_summer_akeno_page_top.jpg) no-repeat center top;
	background-size:100% auto;
	padding: 60px 0 0 0;
}

#shirakamisanchi_top {
	background: url(../images/zekkei_summer_juniko_page_top.jpg) no-repeat center top;
	background-size:100% auto;
	padding: 60px 0 0 0;
}

#naoshima_top {
	background: url(../images/zekkei_summer_naoshima_page_top.jpg) no-repeat center top;
	background-size:100% auto;
	padding: 60px 0 0 0;
}

#niigata_top {
	background: url(../images/zekkei_summer_niigata_page_top.jpg) no-repeat center top;
	background-size:100% auto;
	padding: 60px 0 0 0;
}

.view_content {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
}

.breadcrumb {

}

.view_top h1 {
	font-size: 3em;
	color: #FFF;
	font-weight: 800;
    text-shadow: 0px 0px 3px #000000;
}

.view_top p {
	width: 100%;
	font-size: 1.4em;
	font-weight: 200;
	margin: 10px 0 40px 0;
	padding: 20px;
	color: #000;
	background: rgba(255,255,255,0.6);
}

.target-items3 h3 {
	font-size: 1em;
	padding: 0 0 2px 0;
}

.target-items3 p {
	padding: 0 0 15px 0;
	line-height: 1.4;
}

.target-items3 p span {
	padding: 3px 10px;
	background: #36c6f3;
	color: #FFF;
	font-weight: 100;
	font-size: 0.9em;
}


#route {
	padding: 30px 0;
}

#route h2 {
	margin: 0 0 30px 0;
	padding: 0 0 10px 0;
	text-align: center;
	font-size: 2em;
	font-weight: 300;
}

.view_content2 {
	max-width: 1234px;
	width: 100%;
	margin: 0 auto;
}

#hotel {
	padding: 30px 0;
	background: #f8f0e3;
}

#hotel h2 {
	margin: 0 0 30px 0;
	padding: 0 0 10px 0;
	text-align: center;
	border-bottom: 1px solid #999;
	font-size: 2em;
	font-weight: 300;
}

#hotel .view_content {
	position: relative;
}

.hotel_box {
	position: relative;
	left: 50%;
	float: left;
}

.hotel_block {
	position: relative;
	left: -50%;
	float: left;
	width: 250px;
	margin: 0 30px;
}

.hotel_block img {
	border: 1px solid #999;
}

.hotel_block h3 {
	text-align: center;
	padding: 5px 0;
}

.hotel_block p {
	line-height: 1.4;
}

.price {
	text-align: right;
	font-size: 1.6em;
	font-weight: 600;
	color: #cc0000;
}

.average {
	font-size: 14px;
	font-weight: 200;
	color: #666;
}

.clear {
	clear: both;
}

#activity {
	padding: 30px 0;
	background: #fdfaf5;
}

.activity_block {
	padding: 0 0 30px 0;
}

#activity h2 {
	margin: 0 0 30px 0;
	padding: 0 0 10px 0;
	text-align: center;
	border-bottom: 1px solid #999;
	font-size: 2em;
	font-weight: 300;
}

#activity h3 {
	margin: 0 0 15px 0;
	text-align: center;
	font-size: 1.6em;
	font-weight: 300;
}

.acticity_img {
	float: left;
	margin: 0 3% 0 0;
	width: 47%;
	border: 1px solid #999;
}

.activity_des {
	float: left;
	width: 50%;
}

.activity_des ul {
	margin: 0;
}

.activity_des ul li {
	padding: 0 0 13px 25px;
	line-height: 1.4;
	background: url(../images/icn_check.png) no-repeat 0 2px;
}

.btn_activity {
	margin: 20px 0;
	text-align: center;
}

.btn_activity a {
	padding: 15px 80px;
	background: #36c6f3;
	color: #FFF;
	text-decoration: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.btn_activity a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

#contact_block {
	width: 95%;
	background: #FFF;
	margin: 30px auto;
	padding: 20px;
	color: #22409a;
	border: 1px solid #22409a;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#call {
	float: left;
	width: 50%;
}

#call h4 {
	width: 200px;
	height: 35px;
	margin: 0 auto;
	text-align: center;
	font-weight: bolder;
}

#call h5 {
	text-align: center;
	font-size: 40px;
	font-style: italic;
	font-weight: 400;
	color: #22409a;
}

#call p {
	text-align: center;
	font-size: 84%;
	color: #22409a;
}

#email {
	float: left;
	width: 50%;
}

#email h4 {
	width: 235px;
	height: 35px;
	margin: 0 auto;
	text-align: center;
	font-weight: bolder;

}

#email p {
	margin: 20px 0 0 0;
	text-align: center;
}

#email a {
	padding: 15px 100px;
	color: #FFF;
	background: #00b3f0;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#email a:hover {
	background: #22409a;
	text-decoration: none;
}

.transportation img {
	float: left;
	margin: 0 10px 0 0;
}

.transportation p {
	padding: 20px 0 0 0;
}

.hours {
	clear: both;
	padding: 0 0 10px 0;
	color: #757575;
}

.hours img {
	margin: 0 12px 0 3px;
	float: left;
}

.hours p {
	padding: 10px 0 0 0;
}

#itinerary {
	width: 50%;
	float: left;
}

#map {
	width: 50%;
	float: left;
}


#list h2 {
	margin: 0 0 30px 0;
	padding: 0 0 10px 0;
	text-align: center;
	font-size: 2em;
	font-weight: 300;
}


#other_ranking {
	background: #f3f3f3;
	padding: 20px 0;
}

#other_ranking h2 {
	margin: 0 0 30px 0;
	padding: 0 0 10px 0;
	text-align: center;
	font-size: 2em;
	font-weight: 300;
}


           .gallery > ul {
              margin-bottom: 0;
            }
            .gallery > ul > li {
                float: left;
                margin-bottom: 15px;
                margin-right: 20px;
                width: 300px;
            }
            .gallery > ul > li a {
              border: 1px solid #FFF;
              display: block;
              overflow: hidden;
              position: relative;
              float: left;
            }
            .gallery > ul > 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%;
            }
            .gallery > ul > li a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .gallery > ul > li a:hover .gallery-poster > img {
              opacity: 1;
            }
            .gallery > ul > li a .gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .gallery > ul > li a .gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .gallery > ul > li a:hover .gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .gallery .justified-gallery > 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%;
            }
            .gallery .justified-gallery > a:hover > img {
              -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
            }
            .gallery .justified-gallery > a:hover .gallery-poster > img {
              opacity: 1;
            }
            .gallery .justified-gallery > a .gallery-poster {
              background-color: rgba(0, 0, 0, 0.1);
              bottom: 0;
              left: 0;
              position: absolute;
              right: 0;
              top: 0;
              -webkit-transition: background-color 0.15s ease 0s;
              -o-transition: background-color 0.15s ease 0s;
              transition: background-color 0.15s ease 0s;
            }
            .gallery .justified-gallery > a .gallery-poster > img {
              left: 50%;
              margin-left: -10px;
              margin-top: -10px;
              opacity: 0;
              position: absolute;
              top: 50%;
              -webkit-transition: opacity 0.3s ease 0s;
              -o-transition: opacity 0.3s ease 0s;
              transition: opacity 0.3s ease 0s;
            }
            .gallery .justified-gallery > a:hover .gallery-poster {
              background-color: rgba(0, 0, 0, 0.5);
            }
            .gallery .video .gallery-poster img {
              height: 48px;
              margin-left: -24px;
              margin-top: -24px;
              opacity: 0.8;
              width: 48px;
            }
            .gallery.dark > ul > li a {
              border: 3px solid #04070a;
            }
            .home .gallery {
              padding-bottom: 80px;
            }

            .gallery > ul > li div.view_ttl {
            	text-align: center;
				font-size: 1.2em;
				font-weight: 300;
				padding: 0 0 10px 0;
	        }

            .gallery > ul > li div.view_ttl a {
            	float: none;
            	text-align: center;
            }


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


#ishigaki_top {
	background-size: auto;
	padding: 20px; 0;

}

#takachiho_top {
	background-size: auto;
	padding: 20px; 0;
}

#fuji_top {
	background-size: auto;
	padding: 20px; 0;
}

#tazawa_top {
	background-size: auto;
	padding: 20px; 0;
}

#yakushima_top {
	background-size: auto;
	padding: 20px; 0;
}

#takeda_top {
	background-size: auto;
	padding: 20px; 0;
}

#contact_block {
	width: 96%;
}

.view_top h1 {
	font-size: 2.4em;
}

.view_top p {
	width: 100%;
	font-size: 1.4em;
	font-weight: 300;
	padding: 20px;
	font-size: 1.2em;
}

.hotel_box {
	position: relative;
	left: 0;
	float: none;
}

.hotel_block {
	position: relative;
	left: 0;
	float: none;
	width: 90%;
	margin: 0 auto;
	padding: 10px;
}

.hotel_block img {
	width: 100%;
}

.acticity_img {
	float: none;
	margin: 0 3% 0 0;
	width: 100%;
	border: 1px solid #999;
}

.activity_des {
	float: none;
	width: 100%;
	padding: 10px 20px;
}

#call {
	float: none;
	width: 96%;
}

#call h5 {
	font-size: 2em;
}

#call p {
	font-size: 74%;
}

#email {
	float: none;
	width: 96%;
	padding: 20px 0;
}

#lightgallery {
	margin: 0 auto;
}

.gallery > ul > li {
    width: 100%;
}

#itinerary {
	width: 100%;
	float: none;
	padding: 10px;
}

.transportation p {
	padding: 10px 0 0 0;
}

#map {
	width: 100%;
	float: none;
}

}