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

html{
	width:100%;
	height:100%;
	scroll-behavior: smooth;
}

/**　共通　**/
body{
	display: block;
	width: 100%;
	height: 100%;
    font-family:'游明朝','Yu Mincho',YuMincho,
	'Hiragino Mincho Pro',serif;
	color:#A5A079;
	scroll-behavior: smooth;
}
@media screen and (max-width: 480px) {
  body {
        width: 100%;
}
  img {
    max-width : 100%;
}
}
 
@media screen and (min-width:481px) and (max-width:1024px) {
  body {
        width: 100%;
}
}
@media screen and (max-width:1024px) {
  body {
        width: 100%;
 }
} 
 
/** header **/

#header_box{
	width:100%;
	height:auto;
	background-color: #D4F7C4;
}
#header_top{
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
}	
.top_logo{
	margin:30px 20px 20px;
}
.top_right{
	display: flex;
	justify-content: space-between;
	width: 50%;
	margin:10px 20px ;
}
nav ul{
	display: flex;
	justify-content: space-between;
	width: 40%;
}

nav ul li a{
	display: flex;
	text-decoration:none;
	color:#FFF;
	margin:20px  40px 0px;
	padding-bottom: 5px;
    position: relative; /*アンダーラインの位置を決めるための基準 */
}
/*ホバー　アンダーライン*/
nav ul li a::after {
	position: absolute; /*親要素であるaタグを基準に位置を指定*/
	left: 0;            /*アンダーラインを各メニュー（aタグ）の左端に指定*/
	content: ''; /*本来は擬似要素に入るテキストなどを’’内に指定。今回はアンダーラインなので記載なし*/
	width: 95%;        /*アンダーラインを各aタグの幅に合わせる*/
	height: 2px;        /*アンダーラインの高さ（太さ）*/
	background: #A5A079;/*アンダーラインの色*/
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
	transition: transform 0.3s;   /*変形の時間*/
}

nav ul li a:hover::after {
transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}

#header_main{
	display: flex;
	justify-content: space-between;
	width: 85%;
	margin: 0 auto;
	position: relative;
	height:100vh;
	
}
.main_left{
  position: absolute ;
}
#main_img_slider{
	display: block;
	width: 640px;
	height:420px;
	margin: 0 auto ;
}

h1{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:2.5vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.main_right{
	position:absolute;
	width:40%;
	height:500px;
	top:150px;
    right: 0;
	animation-name: fade;
    animation-duration: 5s;
	}
@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}	
.backg_img {
	z-index:1;
}
.main_right.view{
  opacity: 1;
}
.header_text{
	position:absolute;
	top:100px;
	z-index:2;
}
.header_text2{
	position:absolute;
	top:200px;
	z-index:2;
}