* {
	margin: 0;
	padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
	scroll-behavior: smooth; /* safariとIE未対応 */
}

body {
	margin: 0;
	background-color: #ceeb8e;
}

section {
	display: block;
}

img {
	vertical-align: bottom;
}

#main {
	position: relative;
	overflow: hidden;
}

h1 {
	position: absolute;
	top: 0%;
	left: 0%;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.image_main01 {
	background: url(/image/main/image_01.png) no-repeat;
	background-size: 100%;
	padding-top: 25%;
}

.image_bar01 {
	background: url(/image/main/image_02.png) no-repeat;
	background-size: cover;
	position: relative;
	padding-top: 10%;
}

.image_03 {
	position: absolute; 
	top: 15%;
	left: 5%;
	width: 35%;
}

.image_04 {
	position: absolute;
	top: 20%;
	left: 44.5%;
	width: auto;
	height: 60%;
}

.image_05 {
	position: absolute;
	top: 20%;
	left: 61.3%;
	width: auto;
	height:60%;
}

.image_06 {
	position: absolute;
	top: 20%;
	left: 82%;
	width: auto;
	height:60%;
}

#nav_base {
	position:relative;
	width:70%;
	margin: 0 auto;
}

.nav {
	width:100%;
	position:relative;
	padding-top:25%;
	margin-bottom:20%;
}

.nav_btn {
	position:absolute;
}

.image_07 {
	width:20%;
	bottom:0%;
	left:0%;
}

.image_07:hover {
	bottom:5%;
}

.image_08 {
	width:25%;
	bottom:0%;
	left:24%;
}

.image_08:hover {
	bottom:5%;
}

.image_09 {
	width:25%;
	bottom:0%;
	left:51%;
}

.image_09:hover {
	bottom:5%;
}

.image_10 {
	width:21%;
	bottom:1%;
	left:79%;
}

.image_10:hover {
	bottom:6%;
}

#bg_tree {
	background:url(/image/main/image_32.png) no-repeat;
	background-size:100%;
}

#bg_tree2 {
	background:url(/image/main/image_39.png) no-repeat;
	background-size:100%;
}

.image_11 {
	position:absolute;
	width:60%;
	top:-13%;
	left:20%;
}

.image_12 {
	position:absolute;
	width:10%;
	top:20%;
	left:95%;
}

.image_13 {
	position:absolute;
	width:20%;
	top:50%;
	left:-13%;
}

.news {
	position:relative;
	/* width:70%;
	margin:0 auto;
	margin-bottom:15%;
	background-color:#fff;
	border-radius:15px;
	border:solid #0088ff 1px; */
	background:url(/image/main/image_40.png) no-repeat;
	background-size:100%;
	margin-left:15%;
	margin-right:15%;
	padding-top:55%;
}

.twitter {
	position: absolute;
	top:0%;
	left:0%;
	padding-bottom: 50.25%;
	height:0;
	/* overflow:hidden; */
	overflow-y: scroll;
	margin:7% 5% 2% 5%;
	width:90%;
}

.story {
	position:relative;
	width:70%;
	margin:0 auto;
	margin-bottom:2%;
	background-color:#fff;
	border-radius:15px;
	border:solid #faac58 3px;
}

.image_14 {
	position:absolute;
	width:60%;
	top:-11%;
	left:20%;
}

.image_15 {
	position:relative;;
	width:100%;
	margin:10% 0% 13% 0%;
}

.image_16 {
	position:absolute;
	width:40%;
	top:85%;
	left:30%;
	cursor:pointer;
}

.image_17, .image_21 {
	width:100%;
	margin-top:5%;
}

.introduction {
	position:relative;
}

.image_18, .image_19, .image_20{
	width:90%;
	margin:5% 0% 0% 5%;
}

.movie {
	width:70%;
	margin:5% auto;
	position:relative;
}

.image_22 {
	width:102%;
	margin-left:-2%;
}

.footer {
	position:relative;
	width:100%;
	padding-top:85%;
}

.image_23 {
	position:absolute;
	top:0%;
	left:15%;
	width:70%;
}

.image_24 {
	position:absolute;
	top:31%;
	left:25%;
	width:50%;
	z-index:1;
}

.image_25 {
	position:absolute;
	top:40%;
	left:32%;
	width:8%;
	z-index:1;
}

.image_26 {
	position:absolute;
	top:40%;
	left:45%;
	width:8%;
	z-index:1;
}

.image_27 {
	position:absolute;
	top:40%;
	left:58%;
	width:8%;
	z-index:1;
}

.image_28 {
	position:absolute;
	top:54%;
	left:27%;
	width:25%;
	z-index:1;
}

.image_29 {
	position:absolute;
	top:54%;
	left:55%;
	width:17%;
	z-index:1;
}

.image_30 {
	position:absolute;
	top:61%;
	left:20%;
	width:60%;
	z-index:1;
}

.image_31 {
	position:absolute;
	top:40%;
	left:0%;
	width:100%;
}

.image_33 {
	position:absolute;
	top:11.5%;
	left:2%;
	width:98%;
}

.image_34 {
	position:fixed;
	bottom:5%;
	left:83%;
	width:15%;
}

.app_store_btn {
	position:absolute;
	top:18.5%;
	left:37.5%;
	width:11.5%;
	height:5%;
}

.google_play_btn {
	position:absolute;
	top:18.5%;
	left:51.5%;
	width:13.5%;
	height:5%;
}

.sp {
	display:none;
}

.image_35, .image_36 {
	width:60%;
	margin:5% 20% 0% 20%;
}

#footer {
	position:relative;
}

.image_37 {
	position:absolute;
	top:15%;
	left:42.5%;
	width:15%;
}

.image_38 {
	position:absolute;
	top:30%;
	left:25%;
	width:50%;
}

.image_31_p {
	width:100%;
}

.image_41 {
	display:none;
	width:90%;
	margin:0 auto;
	margin-top:-13%;
	margin-bottom:6%;
}

.image_42 {
	display:none;
	width:40%;
	margin:5% auto;
	cursor:pointer;
}

.i-movie-section {
	text-align:center;
	position: relative;
	padding: 2% 0 8%;
	background-color: #6DB732;
}
.i-movie-frame {
	border-radius: 10px;
	width: 90%;
	margin: 0 auto;
	padding: 1% 0;
	background-color: white;
}
.i-movie {
	border: 3px solid #F4AEAE;
	border-radius: 10px;
	width: 98%;
	text-align: center;
	display: inline-block;
	padding: 0 3%;
}
.i-movie video {
	width: 98%;
	padding: 4% 0 1%;
}
.i-movie-signboard {
	position: absolute;
	text-align: initial;
	left: 2%;
	bottom: 0%;
	z-index: 1;
}
.i-movie-signboard img{
	width:35%
}

@media (orientation: landscape){
	.i-movie-signboard {
		bottom: 6%;
	}
	.i-movie-signboard img{
		width:45%
	}
}

@media screen and (max-width: 1920px) {

	.image_main01 {
		background: url(/image/main/image_01.png) no-repeat;
		background-size: 135%;
		background-position: 40% 0%;
		padding-top: 34%;
	}
	
	.twitter iframe {
		min-height:750px !important;
		width:960px !important;
	}

	@media screen and (max-width: 1024px) {
	
		.image_main01 {
			background: url(/image/main/sp/image_01_2.png) no-repeat;
			background-size: 100%;
			padding-top: 40%;
		}
		
		@media screen and (max-width: 750px) {
		
			.image_main01 {
				background: url(/image/main/sp/image_01_1.png) no-repeat;
				background-size: 100%;
				padding-top: 39%;
			}
			
			.image_bar01 {
				padding-top: 20%;
			}
			
			.image_04 {
				position:absolute;
				top:15%;
				left:5.5%;
				width:auto;
				height:70%;
			}
			
			.image_04b {
				position:absolute;
				top:25%;
				left:9%;
				width:35%;
			}
			
			.image_05 {
				position:absolute;
				top:15%;
				left:48%;
				width:auto;
				height:70%;
			}
			
			.image_05b {
				position:absolute;
				top:25%;
				left:48%;
				width:42.5%;
			}
			
			.image_03, .image_06 {
				display:none;
			}
			
			.news {
				/* width:90%; */
				margin-left:5%;
				margin-right:5%;
				padding-top:70%;
			}
			
			.image_13 {
				width:15%;
				top:60%;
				left:-5%;
			}
			
			.story {
				width:90%;
			}
			
			#bg_tree {
				background:url(/image/main/sp/image_32.png) no-repeat;
				background-size:100%;
			}
			
			#bg_tree2 {
				background:url(/image/main/sp/image_39.png) no-repeat;
				background-size:100%;
			}
			
			.image_17 {
				width:130%;
				margin-left:-15%;
			}
			
			.image_18, .image_19, .image_20{
				width:100%;
				margin:5% 0% 0% 0%;
				position:absolute;
			}
			
			.footer {
				padding-top:110%;
			}
			
			.image_24 {
				top:45%;
			}
			
			.image_25, .image_26, .image_27 {
				top:53.5%;
			}
			
			.image_23 {
				top:0%;
				left:5%;
				width:90%;
			}
			
			.image_28, .image_29 {
				top:65%;
			}
			
			.image_30 {
				top:70%;
			}
			
			.image_31 {
				top:54%;
			}
			
			.image_33 {
				position:absolute;
				top:20.6%;
				left:0%;
				width:100%;
			}
			
			.image_34 {
				left:79%;
				width:20%;
			}
			
			.image_35, .image_36 {
				width:90%;
				margin:5% 5% 0% 5%;
			}
			
			.image_37 {
				left:37.5%;
				width:25%;
			}
			
			.image_38 {
				left:20%;
				width:60%;
			}
			
			.movie {
				width:90%;
			}
			
			.pc {
				display:none;
			}
			
			.sp {
				display:block;
			}
			
			.twitter {
				/* overflow:auto; */
				overflow-y: scroll;
				-webkit-overflow-scrolling: touch;
				padding-bottom:35.25%;
			}
			
			.twitter iframe {
				width:470px !important;
			}
			
			.introduction {
				padding-top:210%;
			}
			
			.image_18 {
				top:0%;
				left:0%;
			}
			
			.image_19 {
				top:25%;
				left:0%;
			}
			
			.image_20 {
				top:47%;
				left:0%;
			}
			
			.image_35t {
				position:absolute;
				top:57%;
				left:30%;
				width:40%;
			}
		
		}
		
	}

}