@charset "UTF-8";

html body {
	margin: 0px;
	padding: 0px;
	width: 100%;
}

#wrapper {
  width:100%;
  overflow:hidden;
}
div#bar{
	width: 100%;
	display: flex;
	position: relative;
}

#menu{
	position: absolute;
	left: 40px;
	padding-top: 40px;
	
}

#logo{
	position: absolute;
	left: 190px;
	padding-top: 40px;
}
#kara{
	background-color: blue;
}

#gif{
	margin-top: 200px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
#gif img{
	width: 100%;
	text-align: center;
}

div#message{
  position: relative;
	width: 100%;
}
div#title img{
	width: 60%;
	text-align: center;
	
}

div#title {
	text-align: center;
	padding-top: 300px;
}

#title p{
	padding-top: 30px;
	font-size: 10px;
}

div#honbun{
	display: flex;
  	flex-wrap: wrap;
	padding-left: 30px;
	padding-top: 40px;
	line-height: 5.5em;
	width: 100%;
	font-size: 10px;
}


p {font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: 200;
	letter-spacing: 0.5em;
	}


#honbun img{
	margin-left: 0px;
}
#left {	
	text-align: right;
	font-feature-settings: "palt";
}

#right {
	
}
#readmore{
	text-align: center;
}
#readmore img{
	filter: drop-shadow(17px 6px 20px rgba(0,0,0,0.6));
}

#tree {
	background-image: url("img/tree.png");
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	height: 1150px;
	position: relative;
	}
#treetitle p{
	font-weight: 900;
	font-size: 24px;
	padding-top: 350px;
	line-height: 1.8em;
	padding-left: 30px;
	
}
#explain{
	position: absolute; 
	left: 50px;
	top: 700px;
}
#explain p{
	font-size: 12px;
	line-height: 2.5em;
	text-align: end;
	font-weight: 600;
	letter-spacing: 0.3em;
}
#readmore2 {
	margin-left: 220px;
	margin-top: 520px;
}

#readmore2 img{
	filter: drop-shadow(17px 6px 20px rgba(0,0,0,0.6));
}

#kokodake {
	background-image: url("img/surasura.png");
	background-repeat: no-repeat;
	background-size: contain;
	height: 2000px;
	width: 100%;
}

#kokodake {
	position: relative;
}

#kokodake >img{
	padding-bottom: 100px;
}
/*.contents p{
	font-size: 30px;
	font-weight: 600;
	text-align: start;
	line-height: 2.5em;
}*/

.kokodake_ttl{
	width: 	270px;
	margin-left: 0px; 
	margin-bottom: 0px;
}

.kokodake_ttl p{
	font-size: 20px;
	font-weight: 700;
	line-height: 2em;
	text-align: left;

}
.contents {
	width: 350px;
}

.flex {
	display: flex;
	padding-bottom: 20px;
	padding-top: 20px;
}



.readmore3{
	padding-top: 120px;
	padding-top: 120px;
	padding-right: 100px;
}

.readmore3 img{
	filter: drop-shadow(17px 6px 20px rgba(0,0,0,0.6));
}
#matome {
	position: absolute;
	left: 100px;
}

.slider{
	overflow: hidden;
}

.slider ul {
    height: 100px;
}
.slider img {
    width: 100%;
}

#scroll{
	width: 100%;
	position: relative;
	margin-bottom: 100px;
}
#yajirushi{
 	position: absolute;
	left: 160px;
}
#tell {
	margin: 0 auto;
	width: 300px;
}

#tell>img {
	width: 100%;
}

#sns {
	margin: 0 auto;
	width: 300px;
}

#sns>img {
	width: 100%;
}

#slide {
	/*width: 799px;*/
}

#form {
	padding-bottom: 50px;
}

#endbar-fix{
	min-height: 100vh;
	position: relative;/*←相対位置*/
	padding-bottom: 100px;
}

#end {
	position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

#end>img{
	width: 100%;
}

#variation{
	position: relative;
	padding-bottom: 300px;
	width: 300px;
	margin: 0 auto;
}
#5var{
	position: absolute;
	margin-left: 100px;
	width: 200px;
}

#temoto{
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-align: center;
	line-height: 2em;
}
#top{
	margin-right: 20px;
 }