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

body{
    background-image: url(background_2.png);
    background-size: cover;
	background-repeat: no-repeat;
	background-color: #3B6639;
}


.fadeIn{
animation-name:fadeInAnime;
animation-duration:4s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeUpTrigger{
opacity: 0;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:1.7s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.wrapper{
}

/* テキスト関連 */
p,h2,h3,h4{
    font-family: vdl-v7marugothic, sans-serif;
    font-weight: 800;
    font-style: normal;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.35);
}

p,a{
    font-family: vdl-v7marugothic, sans-serif;
    font-weight: 600;
    font-style: normal;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.35);
    font-size: 20px;
}

h2{
    font-size: 48px;
}

a {
    text-decoration: none;
    color: white;
}
    
/* ヘッダー */
#header {
    width: 96%;
}

#header ul{
    display: flex;
    justify-content: flex-end;
    margin-top: 45px;
}
#header li{
    margin-left: 32px;
}
#header a{
    font-size: 18px;

}




/* メインビジュアル */
#MV img{
    margin-top: 300px;
    margin-bottom: 360px;
    width: 540px;
}
#MV {
    text-align: center;
    margin-bottom: 200px;
}



/* コピー */
#copy {
    text-align: center;
    margin-bottom: 250px;
    line-height: 180%;
}
#copy h2{
    line-height: 140%;
    margin-bottom: 80px;
}
#copy p:first-of-type{
    margin-bottom: 30px;
}



/* アバウト */
#about {
    position: relative;
    width: 970px;
    margin: 0 auto;
    height: 1340px;
}

#about img{
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    width: 470px;
	height: 264px;
	
}

.about_relax{
    display: flex;
    justify-content: space-between;
    margin-bottom: 810px;
    
}
.about_sound_p{
    margin: auto ;
}
.about_sound_img{
    
}
.about_sound_img_2{
    position: absolute;
    left: 4px;
    top: 227px;
}

.about_time{
    text-align: center;
}

.about_time{
    position: absolute;
    left: 329px;
    top: 430px;
}

.about_time_img {
    margin-bottom: 42px;
}

.about_sleep_bottom {
    display: flex;
    justify-content: space-between;
    
}
.about_sleep_text{
    
    margin: 140px auto 0 auto;
}

.about_sleep_img {
    position: absolute;
    top: 907px;

}


/* マップの紹介 */
#map {
    display: flex;
    width: 100%;
}
.about_map{
	 width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 3) ;
  width : calc(100% / 3) ;
}

.map_h2 {
    text-align: center;
    font-size: 40px;
    margin-top: 233px;
    margin-bottom: 50px;
}

.tate{
    font-size: 32px;
    letter-spacing: 12px;
	line-height: 50px;
    writing-mode: vertical-rl;
    position: absolute;
    left: 23px;
    top: 718px;
    z-index: 1;
}

.tate_time {
    position: absolute;
    left: 859px;
    top: 306px;
}


#faq {
    width: 970px;
    margin: 200px auto 150px auto;
}
#faq .Q{
    margin-top: 25px;
    font-size: 16px;
    color: #76BDFF;
    font-weight: 600;
    
}
#faq .Q:first-of-type{
    margin-top: 45px;

}
#faq p{
    font-size: 14px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
#faq {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.faq_h2{
    text-align: center;
    
}

.answer {
   
    margin-bottom: 20px;
}







#footer{
	text-align: center;
	background:rgba(0,0,0,0.3);
	
}

#footer img{
	width: 220px;
	padding-top: 40px;
}

.footer_nav{
	display: flex;
	margin-top: 35px;
	padding-bottom: 40px;
	justify-content: center;
}


.footer_nav a{
	font-size: 14px;
	margin-right: 14px;
}

.footer_nav a:last-child{
	margin-right: 0;
}