/*===============================================
　SP
===============================================*/
@media (max-width:761px) {
	
	/* =========================================================================
 	main_ttl_wrap
	===========================================================================*/
	
	#main_ttl_wrap{
		width: 100%;
		height:240px;
		overflow:hidden;
		position:relative;
		background: linear-gradient( to right,  #7a3334 0%,#a1383a 50%, #c9675e 100% );
	}

	#main_ttl_wrap .bg_img{
		width: 200vw;
		position:absolute;
		left: 68%;
		top:0;
		opacity: 0.15;
		transform: translate(-50%,-50%);
	}

	#main_ttl_wrap .bg_eng_txt{
		display:none;
	}

	#main_ttl_wrap .h_txt_box{
		position:absolute;
		left: 6%;
		bottom: 30px;
	}

	#main_ttl_wrap  .main_ttl{
		font-family: 'Noto Serif JP', serif;
		font-weight:300;
		font-size: 3.8rem;
		letter-spacing: 0.7rem;
		font-feature-settings: 'palt';
		color:#fff;
		line-height:1.4;
	}

	#main_ttl_wrap  .main_ttl span{
		display:inline-block;
		font-size:2.4rem;
		border-left:1px solid #fff;
		line-height:1;
		letter-spacing: 0.2rem;
		padding:0 0 3px 16px;
		margin:0 0 0 10px;
	}
	
	/* =========================================================================
 	common scroll
	===========================================================================*/
	
	.scroll_v{
			/* z-index: 9; */
			width: 50px;
			position: fixed;
			top: calc(100vh - 100px);
			right: -2px;
			transform:translate(-50%, -50%);
	}

	.scroll_v a {
			display:block;
			font-family: 'Roboto', sans-serif;
			font-weight: 300;
			font-size: 1.4rem;
			color: #fff;
			letter-spacing: 2px;
	}

	.scroll_v a span{
			display: block;
			width: 1px;
			background: rgba(255,255,255,0.8);
			padding: 70px 0px;
			margin: 0 0 0 30px;
			text-align: center;
			position: relative;
	}
		
	.scroll_v a span:before {
  			position: absolute;
  			top: 0px;
  			right: -3px;
  			content:"";
  			width: 7px;
  			height: 7px;
  			border-radius: 50%;
  			background-color: #ffffff;
  			animation: sdb 3s infinite;
  	}

}
/* ============================================================
loading
==============================================================*/
@media (max-width:761px) {
	#loading{
		width:100vw;
		height:100vh;
		position:relative;
		background: #c82f27;
	}

	.loadci{
		display:block;
		position: absolute;
		top:calc(50% - 30px);
		left: 50%;
		transform:translate(-50%, -50%);
		filter: brightness(0) invert(1);
		width: 20vw;
	}

	.loadci img{
		animation: loadcia 2.0s cubic-bezier(0, 0, 0.15, 1);
	}
	
	.loader,
	.loader:before,
	.loader:after {
	  border-radius: 50%;
	  width: 1.0em;
	  height: 1.0em;
		position: absolute;
		top:calc(50% + 10px);
		left:0;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  -webkit-animation: load7 1.8s infinite ease-in-out;
	  animation: load7 1.8s infinite ease-in-out;
	}
	.loader {
	  color: #ffffff;
	  font-size: 10px;
	  margin: 0 auto;
	  position: relative;
	  text-indent: -9999em;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
	}
	.loader:before,
	.loader:after {
	  content: '';
	  position: absolute;
	  top: 0;
	}
	.loader:before {
	  left: -2.5em;
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
	}
	.loader:after {
	  left: 2.5em;
	}

	.load_txt {
		display:block;
		font-size: 1.2rem;
		color: #fff;
		position: absolute;
		top:calc(50% + 65px);
		left: 50%;
		transform:translate(-50%, -50%);
		animation: loadtxt 1.5s infinite ease-in-out;
	}
}