@charset "utf-8";

html {
	overflow-y: scroll;
	color: #333;
}
body {
	height: 100%;
	background-color: #f2e5d9;
	-webkit-text-size-adjust: 100%;
}
p,dt,dd {
	line-height: 160%;
}
a {
	transition: all .3s;
	text-decoration: none;
	color: #333;
}
img{
	width: 100%;
	height: auto;
}
#wrapper {
	width: 100%;
	max-width: 1400px;
	/*min-width: 1024px;*/
	/*margin: 0 auto;*/
	position: relative;
}
#sp_menu{
	display: none;
}
/*webfont*/
.poiret{
	font-family: 'Poiret One', cursive;
	font-weight: bold;
	letter-spacing: 2px;
}
/*header*/
header{
	width:100%;
	height:auto;
	position: fixed;
	background: rgba(255,255,255,.8);
	z-index: 1000;
}
header h1{
	text-align: center;
	/*margin-bottom: 220px;*/
	width:120px;
	/*padding: 0 15px;*/
	position: absolute;
	top: 0;
	left: 2%;
	animation-duration: 5s;
	animation-name: anime1;
}
@-webkit-keyframes anime1 {
  from {
    opacity:0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes anime1 {
  from {
    opacity:0;
  }
  to {
    opacity: 1;
  }
}
header nav{
	text-align: right;
	/*padding-top: 80vh;
	animation-duration: 4s;
  	animation-name: anime2;*/
}
header nav ul li{
	display: inline-block;
	margin-right: 30px;
	text-align: center;
}
header nav ul li:last-child {
	margin-right: 0;
}
header nav ul li a{
	display:inline-block;
	width: 5em;
	color: #333;
	text-decoration: none;
	font-family: 'Poiret One', cursive;
	font-size: 112.5%;
	font-weight: bold;
	letter-spacing: 2px;
	padding: 20px 10px;
	position: relative;
}
header nav ul li a:hover{
	color: #8dd0d5;
	-webkit-transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
}
#contents {
	width: 1024px;
	margin: 30px auto;
}
h2{
	font-family: 'Poiret One', cursive;
	font-size: 200%;
	text-align: center;
	padding: 15px 0;
	border-bottom: 1px solid #333;
	letter-spacing: 0.4em;
	margin-bottom: 50px;
	background: url(../images/flag_icon.png) no-repeat left bottom;
}
/*left,right*/
#contents #left_side{
	width: 764px;
	float: left;
}
#contents #right_side{
	width: 220px;	
	float: right;
}
/*右カラムのサイトメニュー*/
#contents #right_side #menutitle{
	border: 1px solid #333;
	text-align: center;
	line-height: 50px;
	font-size: 112.5%;
	margin-bottom: 30px;
}
#contents #right_side #menutitle span{
	background: url(../images/heart_iconb.png) no-repeat left center;
	display: inline-block;
	padding-left: 25px;
}
/*右カラムのコンテンツ紹介部分*/
#contents #right_side #intro{
	background: #FFF;
	padding: 20px;
	margin-bottom: 30px;
}
#contents #right_side #intro h4{
	font-size: 125%;
	font-family: 'Poiret One', cursive;
	font-weight: bold;
	text-align: center;
	letter-spacing: 2px;
	border-bottom: 1px solid #666;
	padding-bottom: 7px;
}
#contents #right_side #intro .icon{
	margin: 15px auto;
}
#contents #right_side #intro .comment{
	font-size: 87.5%;
}
/*footer*/
footer{
	color: #FFF;
	background: #333;
	text-align: center;
	padding: 30px;
	position: relative;
	margin-top: 40px;
}
footer ul li a{
	color: #FFF;
}
footer p small {
	font-size: 87.5%;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;	
	display: inline-block;
	padding: 7px 20px;
}
footer .pagetop {
	color: #FFF;
	font-family: 'Poiret One', cursive;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 120%;
	background: #333;
	width: 50px;
	height: 46px;
	border-radius: 25px;
	padding-top: 4px;
	position: fixed;
	bottom: 30px;
	right: 30px;
}
footer .pagetop:hover{
	cursor: pointer;
	color: #333;
	background: #FFF;
	transition: all .3s;
}
/* カレント設定 */
.japan header nav ul .japan a,
#world header nav ul .world a,
.cinetrip header nav ul .cinetrip a,
#about header nav ul .about a{
	color: #8dd0d5;
	border-bottom: 3px solid #8dd0d5;
}

@media screen and (max-width: 1024px){
	header h1{

	}
	header nav{

	}
	
	#contents{
		width: 96%;
		margin: 30px auto;
	}
	#contents #left_side{
		width: 75%;
	}
	#contents #right_side{
		width: 22%;
	}
	#contents #instagram {
		width: 100%;
		
	}
}
/*tablet+sp_menu*/
@media screen and (max-width: 768px){
	header{
		position: static;
	}
	header nav{
		display: none;
	}

	/*sp_menu*/
	#sp_menu{
		display: block;
		position:fixed;
		top:0;
		left:0;
		z-index:100;
		width:100%;
	}
	.trigger,
	.trigger span {
		display: inline-block;
		transition: all .3s;
		box-sizing: border-box;
	}
	.trigger {
		position: relative;
		width: 30px;
		height: 22px;
		/*background: rgba(235,216,198,.7);*/
	}
	.trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color:#42210b;
	}
	.trigger span:nth-of-type(1) { top: 0px; }
	.trigger span:nth-of-type(2) { top: 10px; }
	.trigger span:nth-of-type(3) { bottom: 0px; }
	
	.trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
	}
	.trigger.active span:nth-of-type(2) { opacity: 0; }
	
	.trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
	}
	#sp_menu .btn {
		position: absolute;
		top:20px;
		right:20px;
		z-index:2000;
	}
	#sp_menu .drawer {
		display: none;
		background-color:rgba(255,253,247,.8);
		position: absolute;
		top:0;
		right:0;
		width:80%;
		padding:60px 10% 0 10%;
		z-index: 1000;
	}
	#sp_menu .drawer ul {
		overflow: hidden;
	}
	#sp_menu .drawer ul li a{
		display:block;
		width:100%;
		/*height:60px;*/
		line-height:400%;
		text-align:center;
		font-family: 'Poiret One', cursive;
		font-size:150%;
		letter-spacing:1px;
		color:#42210b;
		text-decoration: none;
	}
	#sp_menu .drawer ul li a:hover{
		background: rgba(235,216,198,.7);
	}
	/*sp_menuのカレント設定*/
	#home #sp_menu ul .sp_home a,
	.japan #sp_menu ul .sp_japan a,
	#world #sp_menu ul .sp_world a,
	.cinetrip #sp_menu ul .sp_cinetrip a,
	#about #sp_menu ul .sp_about a {
		border-bottom: 2px solid #333;
		background: url(../images/heart_icon.png) no-repeat left center;
	}
	#contents #left_side,
	#contents #right_side{
		float: none;
		width: 100%;
		margin-bottom: 30px;
	}
	#contents #right_side{
		background: url(../images/line1.png) repeat-x top;
		padding-top: 38px;
	}
	#contents #right_side .banner{
		width: 32%;
	}

}
/*mobile*/
@media screen and (max-width: 420px){
	h2{
		font-size: 150%;
		border-top: 1px solid #333;
		padding-top: 15px;
		background: none;
		line-height: 130%;
	}
}