body {
	background: url(images/bg-min.jpg);
	z-index: -5;
	color: #	color: #3d3d3d;;
}

header {
	background: #FFF;
}

.contents {
  position: relative;
  overflow: hidden;
  margin: 10px 0;
  padding: 80px 0;
}

.contents:before {
  content: '';
  position: absolute;
  top: 20;
  left: 0;
  width: 120%;
  height: 70%;
  margin: 0% -10% 0;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -1;
  background: url(images/bg_coupon-min.png);

}

#keihan_top img {
	width: 100%;
}

#intro {
	max-width: 765px;
	width: 100%;
	margin: 0 auto;
}

#intro img {
	width: 100%;	
}

#intro p {
	font-size: 1.1em;
	padding: 10px 10px 20px 10px;
	font-weight: 300;
}

#intro p.notice {
	color: red;
}

#about {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fae8e1+31,fee593+74&0+0,1+10,1+92,0+100 */
background: -moz-linear-gradient(top, rgba(250,232,225,0) 0%, rgba(250,232,225,1) 10%, rgba(250,232,225,1) 31%, rgba(254,229,147,1) 74%, rgba(254,229,147,1) 92%, rgba(254,229,147,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(250,232,225,0) 0%,rgba(250,232,225,1) 10%,rgba(250,232,225,1) 31%,rgba(254,229,147,1) 74%,rgba(254,229,147,1) 92%,rgba(254,229,147,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(250,232,225,0) 0%,rgba(250,232,225,1) 10%,rgba(250,232,225,1) 31%,rgba(254,229,147,1) 74%,rgba(254,229,147,1) 92%,rgba(254,229,147,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fae8e1', endColorstr='#00fee593',GradientType=0 ); /* IE6-9 */
}

#about_cloud {
	background: url(images/bg_about-min.png) repeat-x;	
}

.contents_inner {
  box-sizing: boder-box;
  width: 100%;
  max-width: 960px;
  height: 100%;
  margin: 0 auto;
  padding: 0 10px 150px;
  color: #363636;
  text-align: left;
}


.contents_inner h2,
.inner h2 {
	text-align: center;
	font-size: 4em;
	font-weight: 400;
	font-family: 'Lustria', serif;
}

#about h2 {
	padding: 80px 0 0 0;
	text-align: center;
	font-size: 4em;
	font-weight: 400;
	font-family: 'Lustria', serif;	
}

#about .inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

#about .inner img {
	float: left;
	padding: 0 0 80px 0;
}

#about .inner p {
	float: left;
	padding: 50px 20px;
	max-width: 370px;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 1.4;
}

#coupon img {
	float: right;
}

.contents_inner p {
	padding: 15px 10px;
	font-size: 1.2em;
	line-height: 1.6;
	font-weight: 300;
}

#place .inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

#place .inner .img_shape {
	float: right;
	-webkit-shape-outside: url('images/img_kyoto-min.png');
          shape-outside: url('images/img_kyoto-min.png');
  	-webkit-shape-image-threshold: 0.1;
          shape-image-threshold: 0.1;
  	-webkit-shape-margin: 10px;
          shape-margin: 10px;
}

#place .inner .img_shape2 {
	float: left;
	-webkit-shape-outside: url('images/img_osaka-min.png');
          shape-outside: url('images/img_osaka-min.png');
  	-webkit-shape-image-threshold: 0.1;
          shape-image-threshold: 0.1;
  	-webkit-shape-margin: 10px;
          shape-margin: 10px;
}

#place .inner h3 {
	padding: 100px 0 0 0;
	font-size: 2.8em;
	font-weight: 400;
	font-family: 'Lustria', serif;
	line-height: 1;
}

#place .inner h4 {
	padding: 0 0 5px 0;
	font-size: 1.6em;
	font-weight: 400;
	font-family: 'Lustria', serif;
}

#place .inner p {
	font-size: 1.1em;
	padding: 0 0 10px 0;
	font-weight: 300;
}

#place .inner h5 {
	font-size: 1.2em;
	font-weight: bolder;
	font-weight: 400;
}


#place .inner .osaka_block {
	text-align: right;
}

#place .inner .osaka_block h3 {
	padding: 270px 0 0 0;
}

.clear {
	clear: both;
}

#compare .inner {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 30px;
	background: #f2ecce;
}

.pass_block {
	float: left;
	width: 48%;
	margin: 1%;
}

.pass_block img {
	margin: 0 auto;
	display: block;
}

.pass_block h3 {
	text-align: center;
	font-size: 1.6em;
	font-weight: 400;
}

.pass_block hr {
	clear: both;
	border: 1px dashed #b9a95c;
}

.pass_block h4 {
	float: left;
	width: 25%;
	padding: 2% 3% 4% 0;
	text-align: right;
	font-size: 1em;
	line-height: 1.6;
	font-weight: 400;	
}

.pass_block p {
	float: left;
	padding: 2% 0 4% 0;
	line-height: 1.6;
	font-weight: 300;
}

.button-wrapper {
		display: block;
		margin: 0 auto;
		padding: 20px 30px;
	}

	.button {
		background: #fff;
		border: none;
		padding: 2px;
		cursor: pointer;
		display: block;
		position: relative;
		overflow: hidden;
		transition: all .35s ease-in-out .35s;
	    margin: 0 auto;
	    width: 260px;
	    text-align: center;
	}
	
	.dark-button .button,
	.dark-button .button span {
		background: #f25923;
		color: #fff;
	}
	.dark-button .button:after,
	.dark-button .button:before,
	.dark-button .button:hover span {
		background: #fff;
		color: #444;
	} 
	.dark-button-2 .button,
	.dark-button-2 .button span {
		background: #333;
		color: #fff;
	}
	.dark-button-2 .button:after,
	.dark-button-2 .button:before,
	.dark-button-2 .button:hover span {
		background: #fff;
		color: #444;
	} 
	.button span {
		display: block;
		padding: 20px 30px;
		background: #aea15b;
		z-index: 100;
		position: relative;
		transition: all .35s ease-in-out .35s;
	}
	
	.dark-button .button span {
		padding: 20px 60px;
		background: #f25923;
		font-size: 1.4em;
	}
		
	.button span a {
		text-decoration: none;
		color: #FFF;
	}

	.button:hover span {
		background: #cabf84;
		color: #fff;
		transition: all .35s ease-in-out .35s;
	}
	
	.dark-button .button:hover span {
		background: #f58158;
		color: #fff;
		transition: all .35s ease-in-out .35s;
	}	
	.button:after {
		bottom: -100%;
		right: -100%;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		background: #cabf84;
		transition: all .35s ease-in-out .5s;
	}
	.button:hover:after {
		right: 0;
		bottom: 0;
		transition: all ease-in-out .35s;
	}
	.button:before {
		top: -100%;
		left: -100%;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		background: #cabf84;
		transition: all .35s ease-in-out .5s;
	}
	.button:hover:before {
		left: 0;
		top: 0;
		transition: all ease-in-out .35s;
	}
	
/*===============================================
●For Tablet Max Width 1024px
===============================================*/
@media screen and (max-width: 1024px){
#coupon img {
	width: 50%;
	margin: -40px 0 0 0;
}

#intro img {
	display: block;
	margin: 0 auto;
	width: 95%;
}

#intro p {
	font-size: 1.1em;
	padding: 10px 20px 20px 40px;
	font-weight: 300;
}

#about .inner img {
	float: left;
	padding: 0 0 80px 0;
	width: 50%;
}

#about_cloud {
	background-size: 900px 400px;
}

.contents_inner h2,
.inner h2 {
	font-size: 3em;
}

#about h2 {
	padding: 40px 0 0 0;
	font-size: 3em;
}

#place .inner .img_shape,
#place .inner .img_shape2 {
	width: 100%;
  	-webkit-shape-image-threshold: 0.1;
          shape-image-threshold: 0.1;
  	-webkit-shape-margin: 20px;
          shape-margin: 20px;	
}

.city_description {
	padding: 20px 40px 40px 40px;
}

.pass_block img {
	width: 90%;
}

}
	
            
 /*===============================================
●For Mobile Max Width 640px
===============================================*/
@media screen and (max-width:640px){	
	
#coupon img {
	width: 100%;
	margin: -80px 0 0 0;
}

#about .inner img {
	float: none;
	padding: 0;
	width: 100%;
}

#about .inner p {
	float: none;
	padding: 10px 20px;
	max-width: 600px;
}

#about_cloud {
	background-size: 800px 350px;
}

.contents_inner h2,
.inner h2 {
	padding: 40px 0 0 0;
	font-size: 2.4em;
}

#about h2 {
	padding: 40px 0 0 0;
	font-size: 2.4em;
}

#place .inner h3 {
	padding: 30px 0 0 0;
	font-size: 2em;
}

#place .inner h4 {
	font-size: 1.3em;
}

.city_description {
	padding: 20px 20px 40px 20px;
}

#place .inner .osaka_block {
	text-align: left;
}

.pass_block {
	float: none;
	width: 97%;
	margin: 1.5% 1.5% 3% 1.5%;
}

.pass_block h3 {
	font-size: 1.4em;
}

.pass_block h4 {
	float: left;
	width: 30%;
	padding: 2% 3% 4% 0;
	font-size: 0.9em;
}

.pass_block p {
	float: left;
	width: 68%;
	font-size: 0.9em;
}


}