@charset "UTF-8";
/* CSS Document */
/*font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;*/


/* スマホ用(縦) CSS */
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: fixed;
  width: 30px;
  height: 26px;
  /*margin-top:13px;*/
	top: 20px;
  right:20px;
  z-index:1000;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color:#000000;
  border-radius: 4px;
  
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 12px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

#nav_button:hover{
	cursor: pointer;
}



.nav_menu_style{
	position:fixed;
	z-index:999;
	top: 0px;
	background-color:#fff;
	width:100%;
	height:100vh;
	padding-top: 80px;
	overflow: scroll;
	-ms-overflow-style: none;
}
.nav_menu_style::-webkit-scrollbar {
    display:none;
}
.nav_menu_style li{
  font-family : Noto Sans JP;
  font-size : 12px;
  line-height : 28.84px;
  letter-spacing : 0.72px;
  color : #505050;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-bottom: 30px;
}


.nav_menu_style a{
	text-decoration: none;
}
.nav_menu_style p{
	font-family: 'Noto Sans JP', sans-serif;
	order: 2;
	margin-left: 20px;
}

.ohanashi-pc{
	display: none;
}
.ohanashi-sp{
	padding-top: 20px;
}
.ohanashi-sp p{
  font-size : 10px;
  line-height : 22px;
  letter-spacing : 0.7px;
  color : #000000;
	order: 1;
	margin-left: 0;
	margin-right: 10px;
}
.ohanashi-sp img{
	width: 16px !important;
	transform: rotate(-90deg);
	order: 2;
}
.sns-pc{
	display: none;
}
.sns-sp{
	position: relative;
	margin-top: 80px;
	padding-bottom: 100px;
}
.sns-sp p{
  font-family : Noto Serif JP;
  font-size : 10px;
  line-height : 22px;
  letter-spacing : 0.5px;
  color : #000000;
	position: absolute;
	margin-left: 0;
	top: -30px;
}
.sns-sp img{
	width: 33px;
	transform: rotate(-90deg);
	margin: 0 14px;
}




.yajirushi{
	position: absolute;
	top:500px;
	left: 50%;
	z-index: 9;
}

.yajirushi span {
  display: block;
  width: 2px;
  height: 80px;
  background-color: #FFA02E;
  position: relative;
  transform: scale(1, 0);
transform-origin: top left;
animation: arrow01 4s ease-in-out infinite forwards;
}
@keyframes arrow01 {
    0% { transform: scale(1, 0); }
    30% { transform: scale(1, 0); }
    40% { transform: scale(1, 1); }
    85% { transform: scale(1, 1); opacity: 1;}
    90% { transform: scale(1, 1); opacity: 0; }
    100% { transform: scale(1, 1); opacity: 0; }
}
.yajirushi span::after {
content: "";
display: block;
width: 8px;
height: 15px;
border-right: 2px solid #FFA02E;
transform: rotate(-45deg) scale(1, 0);
transform-origin: right bottom;
position: absolute;
bottom: 2px;
right: 1px;
animation: arrow02 4s ease-in-out infinite forwards;
}
@keyframes arrow02 {
    0% { transform: rotate(-45deg) scale(1, 0); }
45% { transform: rotate(-45deg) scale(1, 0); }
55% { transform: rotate(-45deg) scale(1, 1); }
    85% { transform: rotate(-45deg) scale(1, 1); opacity: 1;}
    90% { transform: rotate(-45deg) scale(1, 1); opacity: 0; }
    100% { transform: rotate(-45deg) scale(1, 1); opacity: 0; }
}	












/*メニューを左からスライドさせるための記述*/
#nav_menu{
	left: 100%;
	opacity: 0.3;
	transition: all 0.8s ease;
}
#nav_menu.swing{/*クリック後の表示の記述（要素の右端が右にくっついている時、０）*/
	left: 0px;
	opacity: 0.95;
}
/*#scroll{
	overflow: scroll;
}
#scroll.scroll{
	overflow: hidden;
}
*/




.menu-trigger.active span:nth-of-type(1),
.menu-trigger.active span:nth-of-type(3) {
  width: 12px;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translate(-4px,8px) rotate(-45deg);
  transform: translate(-4px,8px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translate(-4px,-8px) rotate(45deg);
  transform: translate(-4px,-8px) rotate(45deg);
}







/* スマホ用(横)  CSS */
@media (min-width: 480px) {/* 画面サイズが480px以下の時、{　}内のCSSを追加するメディアクエリ */  
}



/* タブレット用  CSS */
@media (min-width: 768px) {/* 画面サイズが768px以下の時、{　}内のCSSを追加するメディアクエリ */
.menu-trigger,
.menu-trigger span {
  display: none;

}

	

.nav_menu_style{
	position:fixed;
	z-index:999;
	top: 0px;
	background-color:transparent;
	width:100%;
	height: auto;
	padding-top: 40px;
	overflow: scroll;
	-ms-overflow-style: none;
	text-align: right;
}

.nav_menu_style li{
  font-family : Noto Sans JP;
  font-size : 12px;
  line-height : 28.84px;
  letter-spacing : 0.72px;
  color : #505050;
	list-style: none;
	display: inline-block;
	text-align: center;
	margin: 0 35px 0 0;
}
.nav_menu_style li:hover::after{
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	border: dotted 1px #4d4d4d;
	border-radius: 50%;
	position: relative;
	left: 50%;
	transform: translate(-50%,0);
	margin-top: 5px;
}

.nav_menu_style a{
	text-decoration: none;
}
	.nav_menu_style a:hover{
		opacity: 0.5;
		transition: all 0.3s 0s ease;
	}	
.nav_menu_style p{
	font-family: 'Noto Sans JP', sans-serif;
	margin-left: 0px;
}
/*.nav_menu_style li img{
	width: 30px;	
}*/

.ohanashi-sp{
	display: none !important;
}
.sns-sp{
	display: none !important;
}




/*メニューを左からスライドさせるための記述*/
#nav_menu{
	left: 0px;/*右に隠す*/
	opacity: 1;
	transition: all 0.8s ease;
}
#nav_menu.swing{/*クリック後の表示の記述（要素の右端が右にくっついている時、０）*/
	left: 0px;
	opacity: 1;
}


.sns-pc{
	display: block;
	position: fixed;
	/*top: 30%;*/
	top:400px;
	left: 40px;
	z-index: 999;
}	
.sns-pc p{
  font-size : 10px;
  line-height : 22px;
  letter-spacing : 0.5px;
  color : #000000;
	writing-mode:vertical-rl;
	padding-left: 3px; 
	padding-bottom: 12px;
}	
.sns-pc img{
	width: 25px;
	display: block;
	padding: 2px 0;
}	
	.sns-pc a img:hover{
		opacity: 0.5;
		transition: all 0.3s  0s ease;
	}	
	


	
.ohanashi-pc{
	display: block;
	position: fixed;
	top:400px;
	right: 20px;
	z-index: 999;
}	
.ohanashi-pc p{
  font-family : Noto Sans JP;
  font-size : 10px;
  line-height : 22px;
  letter-spacing : 0.7px;
  color : #000000;
	transform: rotate(90deg);
}		
.ohanashi-pc img{
	width: 26px;
	position: relative;
	top:35px;
	left:24px
}
.ohanashi-pc a{
	text-decoration: none;
}
.ohanashi-pc:hover{
	opacity: 0.5;
	transition: all 0.3s 0s ease;
}		

	
	
.yajirushi{
	position: absolute;
	top:650px;
	left: 50px;
}	
.yajirushi span {
  display: block;
  width: 2px;
  height: 80px;
  background-color: #FFA02E;
  position: relative;
  transform: scale(1, 0);
transform-origin: top left;
animation: arrow01 4s ease-in-out infinite forwards;
}	
	
	
	
	
	
	
	



}










/* PC用  CSS */
@media (min-width: 992px) {/* 画面サイズが992px以下の時、{　}内のCSSを追加するメディアクエリ */


.yajirushi{
	position: absolute;
	z-index: 999;
	top: 610px;
	left: 70px;
}	
.yajirushi span {
  display: block;
  width: 2px;
  height: 100px;
  background-color: #FFA02E;
  position: relative;
  transform: scale(1, 0);
transform-origin: top left;
animation: arrow01 4s ease-in-out infinite forwards;
}
	

	
	
	
  
}

/* PC用  CSS */
@media (min-width: 1200px) {/* 画面サイズが1200px以下の時、{　}内のCSSを追加するメディアクエリ */

.sns-pc{
	display: block;
	position: fixed;
	/*top: 50%;*/
	top:340px;
	left: 60px;
	z-index: 999;
}	
.sns-pc p{
  font-size : 10px;
  line-height : 22px;
  letter-spacing : 0.5px;
  color : #000000;
	writing-mode:vertical-rl;
	padding-left: 3px; 
	padding-bottom: 12px;
}	
.sns-pc img{
	width: 25px;
	display: block;
	padding: 2px 0;
}	
	.sns-pc a img:hover{
		opacity: 0.5;
		transition: all 0.3s  0s ease;
	}	
	


	
.ohanashi-pc{
	display: block;
	position: fixed;
	top:340px;
	right: 45px;
	z-index: 999;
}	
.ohanashi-pc p{
  font-family : Noto Sans JP;
  font-size : 10px;
  line-height : 22px;
  letter-spacing : 0.7px;
  color : #000000;
	transform: rotate(90deg);
}		
.ohanashi-pc img{
	width: 26px;
	position: relative;
	top:35px;
	left:24px
}
.ohanashi-pc a{
	text-decoration: none;
}
.ohanashi-pc:hover{
	opacity: 0.5;
	transition: all 0.3s 0s ease;
}	
	
	
	
  
}