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

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

	#main_ttl_wrap .bg_eng_txt{
		font-family: 'Noto Serif JP', serif;
		font-weight: 100;
		font-size: 11.5rem;
		letter-spacing: 0.5rem;
		font-feature-settings: 'palt';
		color:#fff;
		opacity: 0.05;
		line-height: 1.1;
		position:absolute;
		left: 8%;
		top: -22px;
	}

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

	#main_ttl_wrap  .main_ttl{
		font-family: 'Noto Serif JP', serif;
		font-weight:300;
		font-size:4.2rem;
		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.6rem;
		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;
  	}
	
	
}

/* =========================================================================
 	inview anime
===========================================================================*/
	.lazy_fadein {
		opacity: 0;
	}
	.lazy_fadein_act {
		opacity: 1;
		transition: all 0.5s cubic-bezier(0, 0, 0, 0);
	}
	.lazy_fadeinLeft {
		opacity: 0;
		transform: translate(-50px, 0);
	}
	.lazy_fadeinRight {
		opacity: 0;
		transform: translate(50px, 0);
	}
	.lazy_fadeinLeft_active, .lazy_fadeinRight_active {
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate(0, 0);
		opacity: 1;
	}
	.lazy_fadeinUp, .lazy_fadeinUpA, .lazy_fadeinUpB, .lazy_fadeinUpC, .lazy_fadeinUpD {
		opacity: 0;
		transform: translate(0, 10px);
	}
	.lazy_fadeinUp_active {
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate(0, 0);
		opacity: 1;
	}
	.lazy_fadeinDownA, .lazy_fadeinDownB, .lazy_fadeinDownC, .lazy_fadeinDownD {
		opacity: 0;
		transform: translate(0, -10px);
	}
	.lazy_fadeinDown_active {
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate(0, 0);
		opacity: 1;
	}
	.lazy_fadeinUpCenter {
		opacity: 0;
		transform: translate(-50%, 10%);
	}
	.lazy_fadeinUpCenter_active {
		transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate(-50%, 0);
		opacity: 1;
	}
	.lazy_fadeinScaleA, .lazy_fadeinScaleB, .lazy_fadeinScaleC, .lazy_fadeinScaleD {
		opacity: 0;
		transform: scale(1.2);
	}
	.lazy_fadeinScale_active {
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: scale(1);
		opacity: 1;
	}

	
/* ============================================================
loading
==============================================================*/
@media (min-width: 762px) {
	#loading{
		width:100vw;
		height:100vh;
		position:relative;
		background: #fff;
	}

	.loadci{
		display:block;
		position: absolute;
		top: calc(50% - 40px);
		left: 50%;
		transform:translate(-50%, -50%);
		width: 104px;
	}

	.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% + 25px);
	  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: #c83127;
	  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: #c83127;
		position: absolute;
		top: calc(50% + 82px);
		left: 50%;
		transform:translate(-50%, -50%);
		animation: loadtxt 1.5s infinite ease-in-out;
	}
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes loadcia {
	0% {
		transform: translate(0, 30px);
		opacity: 0;
	}
	30% {
		transform: translate(0, 30px);
		opacity: 0;
	}
	100% {
		transform: translate(0,0);
		opacity: 1;
	}
}
@keyframes loadtxt {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
/* ============================================================
keyframe
==============================================================*/
@keyframes sdb {
	0% {
		transform: translate(0, -10px);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 140px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}