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

p{
	text-align: justify;
}

img{
	width: 100%;
	height: 100%;
	display: block;
}

h1,h2,h3{
	font-family: "Noto Serif JP", serif;
	font-weight: 300;
	color: #eee;
}
/*ヘッダー---------*/
header{
	position: fixed;
	z-index: 9999;
}
.header{
	height: 70px;
	width: 100%;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 9999;
	transition: background 0.6s ease-out;
}

#pc_hedaer{
	width: 40%;
	margin: 0 auto;
	position: relative;
}

@media screen and (min-width:768px){
	#pc_hedaer{
	width: 60%;
    margin: 0 30% 0 0;
	position: relative;
}
}
@media screen and (min-width:1004px){
	#pc_hedaer{
	width: 50%;
	margin: 0 auto;
	position: relative;
	max-width: 960px;
}
}

.header ul{
	display: flex;
	font-size: 14px;
	justify-content: space-between;
	}

#pc_hedaer ul li a {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  color: #eee;
  transition: color 0.3s;
  font-family: "Noto Serif JP", serif;
}

#pc_hedaer ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #eee;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease-in-out;
	opacity: 0.7;
}

#pc_hedaer ul li a:hover {
  color: #eee;
}

#pc_hedaer ul li a:hover::after {
 transform: scaleX(1);
  transform-origin: left;
}

.contactBtn{
	height: 100%;
	width: fit-content;
	padding: 0 25px;
	text-align: center;
	line-height: 70px;
	position: absolute;
	border: 1px solid #D0A900;
	color: #eee;
	font-size:clamp(16px, 18 / 1920 * 100vw, 18px);
	font-family: "Noto Serif JP", serif;
	transition: ease 0.5s;
}

@media screen and (min-width:1305px){
	.contactBtn{
		width: 18%;
	}
}


@media screen and (min-width:1440px){
	.contactBtn{
		width: 15%;
	}
}

.contactBtn:hover{
	background: #D0A900;
}

.header.headerColorScroll {
  background: #000;
  transition: 0.6s ease-out;
}

/*ハンバーガメニュー----------------*/
#burger{
	display: none;
}

#burger_menu{
	transform: translateX(100%);
	transition: transform 0.3s ease-in-out;
	position: fixed;
  top: 0;
  right: 0;
}
#burger_menu ul{
	display: flex;
	flex-flow: column;
	align-items: center;
	height: 100vh;
	width: 80vw;
	background: #161616;
}

#burger_menu ul li{
	margin-top: 70px;
}

#burger_menu ul li a{
	font-family: "Noto Serif JP", serif;
	font-size: 18px;
}
#burger_button{
	width: fit-content;
	height: 40px;
	z-index: 9999;
	background-color: transparent;
	border-color: transparent;
	cursor:pointer;
	top: 20px;
    right: 20px;
	position: fixed;
}

#burger_button span{
	width: 60px;
	background: #eee;
	height: 1px;
	display: block;
	transition: transform 0.3s;
}

#burger_button span:nth-child(2){
	width: 60px;
	background: #eee;
	height: 1px;
	margin-top: 10px;
	display: block;
	transition: transform 0.3s;
}

@media screen and (max-width:768px){
	.header{
		display: none;
	}
	
	.contactBtn{
		display: none;
	}
	
	
	#burger{
		display: block;
	}
	
	#burger_menu.active{
	transform: translateX(0%);
}

	#burger_button.close span:nth-child(1) {
  		transform: translateY(5px) rotate(-30deg);
}

#burger_button.close span:nth-child(2) {
  	transform: translateY(-5px) rotate(30deg)
}
}



/*フッター-------------------*/
footer{
	background: #000;
	position: relative;
}

footer::after{
	content: "";
	width: 1px;
	height: 75%;
	background: #eee;
	position: absolute;
	top: 11%;
	left: 15%;
}
footer .wrap{
	width: 83%;
	margin: 0 auto;
	padding-top: 80px;	
}

footer dt{
	color: #eee;
}

footer dd{
	color: #eee;
}

#footer_nav{
	display: flex;
}
.footer_nav{
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	height: 200px;
	margin-right: 150px;
}
.footer_nav li a,.footer_nav2 li a{
	font-size: 14px;
	font-family: "Noto Serif JP", serif;
}

.footer_nav2{
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	height: 200px;
}
footer th{
	text-align: left;
}
footer td,th{
	color: #eee;
	font-size: 14px;
	font-family: "Noto Serif JP", serif;
}

footer table tr:nth-child(n+2){
	margin-top:20px; 
}

footer table tr th{
	padding-right: 20px;
	padding-bottom: 20px;
}

.footer_logo{
	width: 150px;
	height: 91px;
	display: block;
	margin-top: -15px;
	margin-bottom: 15px;
	transition: opacity 0.4s;
}

.footer_logo a img{
	object-fit: contain;
}

.footer_logo:hover{
	opacity: 0.5;
}
.sns_icon{
	display: flex;
	justify-content: space-between;
	width: 70px;
}
.sns_icon li{
	width: 30px;
	height: 30px;
	color: #eee;
	display: block;
	position: relative;
}

footer p:last-child{
	font-size: 12px;
	color: #eee;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: "Noto Serif JP", serif;
}

footer p{
	font-size: 14px;
	color: #eee;
	text-align: center;
	padding-top: 50px;
}

#footer_nav ul li a{
	transition: opacity 0.3s;
}
#footer_nav ul li a:hover{
	opacity: 0.4;
}
@media screen and (max-width:768px){

	#footer_nav{
		justify-content: space-between;
	}
	.footer_nav{
		margin-right: 20px;
		height: 150px;
	}
	.footer_nav2{
		height: 150px;
	}
	footer::after{
		left: 5%;
	}
}

@media screen and (min-width:768px){
	footer .wrap{
		width: 80%;
		max-width: 1100px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding-top: 80px;
	}

	.footer_nav{
		margin-right: 50px;
	}

	footer::after{
		left: 5%;
	}
}

@media screen and (min-width:960px){
	footer .wrap{
		width:70%;
	}

}
@media screen and (min-width:1280px){
	.footer_logo{
		width: 180px;
	}

	footer .wrap{
		width: 55%;
	}

	.footer_nav{
		margin-right: 150px;
	}

	footer::after{
		left: 15%;
	}
}

/*フェードJQ*/
 .fade-in {
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

 	.fade-in2 {
      opacity: 0;
      transition: opacity 3s ease-in-out;
    }
    .visible {
      opacity: 1;
    }

 /*scroll時*/
.fadein {
  opacity: 0;
  transition: opacity 3s ease;
}

.fadein.is-visible {
  opacity: 1;                /* 表示する */  /* 元の位置に戻す */
}