/* ============================================================
PC
==============================================================*/
@media (min-width: 762px) {
	
	/* =========================================================================
 	TTL
	===========================================================================*/
	
	.mv_ttl_wrap{
		position:absolute;
		top: 36%;
		left:calc(50% - 520px);
		transform:translate(0, -50%);
		z-index: 2;
	}

	.mv_ttl_wrap h1{
		font-feature-settings: 'palt';
		line-height: 1.2;
		color: #fff;
		position:relative;
		background: rgb(255,255,255,0.15);
		padding: 2px 20px 5px;
		border: 1px solid #fff;
	}
	.mv_ttl_wrap h1 .eng_txt{
		/* display:block; */
		font-family: 'Barlow', sans-serif;
		font-weight: 700;
		font-size: 4.6rem;
		letter-spacing: 0.1rem;
	}

	.mv_ttl_wrap h1 .jp_txt{
		/* display:block; */
		font-family: "Noto Sans SC", sans-serif;
		font-size: 2.0rem;
		font-weight: 500;
		letter-spacing: 0.1rem;
		margin: 0 0 0 38px;
	}

	.mv_ttl_wrap p{
		font-family: 'Barlow', sans-serif;
		font-weight: 600;
		font-size: 2.6rem;
		letter-spacing: 0.1rem;
		font-feature-settings: 'palt';
		line-height: 1.4;
		color: #fff;
		padding: 0 0 14px;
	}
	.mv_ttl_wrap p span{
		display: block;
		font-family: "Noto Sans SC", sans-serif;
		font-size: 1.4rem;
		font-weight: 400;
	}
	
	#main_wrap_sec .btn_view{
		position:absolute;
		bottom:0;
		right: 20%;
		z-index: 30;
	}
	#main_wrap_sec .btn_view a{
		background-color: #ffffff;
		width: 379px;
		padding: 15px 0px 15px 39px;
		font-size: 1.6rem;
		position: relative;
		color: #000;
		font-weight: 500;
		border: 2px solid #000;
		font-family: "Noto Sans SC", sans-serif;
	}
	
	#main_wrap_sec .btn_view a:before{
		content:"";
		background: url("/ch/global/img/icon_mail_b.svg") no-repeat;
		background-size: cover;
		position: absolute;
		width: 28px;
		height: 20px;
		top: 13px;
		left: 36px;
	}
	
	#main_wrap_sec .breadcrumb {
	  list-style: none;
	  padding: 6px 100px;
	  display: flex;
	  margin: 66px 0 0;
	  font-weight: 500;
	  font-size: 1.4rem;
	  position: relative;
	  z-index: 300;
	  background: #fff;
	  font-family: "Noto Sans SC", sans-serif;
	  border-top: 0.5px solid #ededed;
	}
	
	#main_wrap_sec .breadcrumb li + li::before {
	  content: "─────";
	  margin: 0px 0.5em;
	  color: #999;
	}
	
	#main_wrap_sec .breadcrumb a {
	  text-decoration: none;
	  color: #0066cc;
	}
	
	#main_wrap_sec .breadcrumb a:hover {
	  text-decoration: none;
	  color: #72a3d5;
	}
	
	#main_wrap_sec .breadcrumb li[aria-current="page"] {
	  color: #333;
	}

	
	/* =========================================================================
 	common scroll
	===========================================================================*/
	
	.scroll_v{
			z-index: 9;
			width: 50px;
			position: absolute;
			bottom: -53px;
			left: 24px;
			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;
			writing-mode: vertical-lr;
	}

	.scroll_v a span{
			display: block;
			width: 1px;
			background: rgba(255,255,255,0.3);
			padding: 54px 0;
			margin: 0 0 0 30px;
			text-align: center;
			position: relative;
	}
		
	.scroll_v a span:before {
  			position: absolute;
  			top: 5px;
  			right: 0;
  			content:"";
  			width: 1px;
  			height: 30px;
  			/* border-radius: 50%; */
  			background-color: #ffffff;
  			animation: sdb 3s infinite;
  	}
	
	/* =========================================================================
 	TTL_b
	===========================================================================*/
	
	.mv_ttl_wrap_b{
		position:absolute;
		top: 50%;
		left:calc(50% - 520px);
		transform:translate(0, -50%);
	}

	.mv_ttl_wrap_b h1{
		font-feature-settings: 'palt';
		line-height: 1.4;
		color: #fff;
		position:relative;
	}

	.mv_ttl_wrap_b  h1 .eng_txt{
		display:block;
		font-family: 'Barlow', sans-serif;
		font-weight: 600;
		font-size: 6.4rem;
		letter-spacing: 0.1rem;
	}

	.mv_ttl_wrap_b h1 .jp_txt{
		display:block;
		font-family: "Noto Sans SC", sans-serif;
		font-size: 2.0rem;
		font-weight: 500;
		letter-spacing: 0.1rem;
	}
	
	/* =========================================================================
 	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% - 30px);
		left: 50%;
		transform:translate(-50%, -50%);
		width:240px;
	}

	.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: #0096df;
	  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: #0096df;
		position: absolute;
		top:calc(50% + 65px);
		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, 100px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}