.pcOnly {
		display: inline-block!important;
}
.spOnly {
	display: none!important;
}

a {
    color: #505050;
}

@media only screen and (max-width: 768px) {
	.pcOnly {
		display: none!important;
	}
	.spOnly {
		display: inline-block!important;
	}
}


/* ↓↓↓↓↓　ヘッダ部  */

.ec-layoutRole__header {
    height: 50px;
}
.ec-headerRole {
    background-color: unset;
}

body.scrolled .ec-headerRole {
    background-color: #FFF;
}

.ec-headerRole {
    height: 50px;
    padding-left: 15px;
    padding-right: 15px;
}

.ec-drawerButton {
	display: block;
    width: 50px;
    height: 50px;
    padding: 12px;
    z-index:1001;
}

.have_curtain .ec-drawerButton .burger:before, 
.have_curtain .ec-drawerButton .burger:after {
    background-color: #000;
}

.ec-drawerButton .burger,
.ec-drawerButton .burger:before, 
.ec-drawerButton .burger:after,
body.scrolled.have_curtain .ec-drawerButton .burger:before, 
body.scrolled.have_curtain .ec-drawerButton .burger:after
{
    background-color: #505050;
}


.logo {
    width: 16%;
    padding: 1%;
}

.giftLink {
    background: #999999;
    margin: 0;
    padding: 9px;
}

.giftLink  a {
    color: #fff;
}

@media only screen and (max-width: 768px) {
	.logo {
	    width: 50%;
	    padding: 4%;
	}
}

/* ↑↑↑↑↑　ヘッダ部  */

/* ↓↓↓↓↓　SPメニュー */

.ec-drawerRole {
    display: unset;
    max-width: 400px;
    height: 100%;
    top: 0;
}

.ec-drawerRole .menu {
	margin: 70px 0 0 30px;
}

.ec-drawerRole .menu p{
}
.ec-drawerRole img {
    width: 60%;
    margin: 80px 0 50px;
}


.ec-drawerRole .menu a{
    color: #505050;
}

.ec-drawerRole .menu .ec-drawerMenu__item a:after {
    font-family: "Material Icons";
    content: "\e5e1";
    position: absolute;
    right: 0px;
    padding-top: 3px;
    font-size: 20px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.ec-drawerRole .menu a.sub {
	border-bottom:solid 2px #44CDE0;
	margin-left: 30px;
}

.menu p.giftLink {
    text-align: center;
    margin: 50px auto;
    width: 100%;
    padding: 30px 0;
    font-weight: bolder;
}
.menu p.giftLink a{
    color: #fff;
    font-size: 18px;
}

@media only screen and (max-width: 768px) {
	.ec-drawerRole .menu {
		margin: 70px 0 0 10px;
	}
}


/* ↑↑↑↑↑　SPメニュー */


/* ↓↓↓↓↓　Fotter */

.ec-footerRole {
    color: #fff;
    background-color: #44CDE0;
}
/* ↑↑↑↑↑　Fotter */

.ec-pickupRole .subtitle {
    margin: 10px 0 0;
}

.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 98%;
    margin-bottom: 5%;
}
.container .item {
	width: 33%;
	padding: 1%;
}
.container .item img {
    margin-bottom: 1em;
    border-radius: 15px;
}

.container .item p.title {

}
.container .item p.description {

}

/* wrap */

.hero {
	top: -100px;
	position: relative;
	margin-bottom: -100px;
}

/* video */

.video-box {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* overlay */

.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}


.video-box div {
    font-family: Helvetica!important;
	position: absolute;
	left: 45%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index:1000;
}

/* text */
.video-box-logo {
	top: 25%;
}
.video-box-logo img {
    width: 150%;
}

.video-box-en {
	top: 55%;
}

.video-box-jp {
	top: 50%;
}

.video-box p {
	font-family: Helvetica;
	font-size: 96px;
	font-weight: bold;
	line-height: 1.2;
	padding: 0 50px;
	text-align: center;
	opacity:50%;
	color: #fff;
}

.video-box p.size20 {
	font-size: 66px;
}


.video-box .video-box-jp p{
    font-size: 22px;
}

.bg-white {
    background-color: #FFF!important;
    padding: 5% 5%;
}

.bg-white p{
  text-align: center;
  color: #505050;
}

.bg-white p.title {
	font-size: 20px;
}

.bg-white p.title:nth-child(n+2) {
	margin-top: 50px
}

.business .title {
	font-size: 120%;
}

.video-box-en a{
    border-radius: 25px;
    background-color: #fff;
    padding: 15px 35px 15px 35px;
    font-size: 18px;
}

.video-box-en p.close-btn {
    padding-top: 100px;
}

@media only screen and (max-width: 768px) {

	.video-box-logo img {
	    width: 100%;
	}

	.video-box-logo {
		top: 20%;
	}
	.video-box-en {
		top: 60%;
	}


	.video-box-en a{
	    font-size: 14px;
	    padding: 15px 35px 15px 35px;
	}

	.video-box-jp {
		top: 40%;
	}
	
	.video-box p {
	  font-size: 40px;
      margin-bottom: 86px;
	}

	.video-box p.size20 {
		font-size: 30px;
	}

	.video-box .video-box-jp p{
	    font-size: 14px;
	}

	.bg-white {
	    padding: 10% 5%;
	}

	.bg-white p.title {
		font-size: 20px;
	}
	.bg-white p.title:nth-child(n+2) {
		margin-top: 50px
	}

	.slide-items .slick-list {
	  padding: 0 12% 0 0!important;	
	}

	.container .item {
		width: 100%
	}
	.container .item p.description {
		margin-bottom: 15%;
	}


	.slide-items li{
		margin: 0 5px;
	}

	.lead {
		margin: 7% 5%;
	}
	.lead p{
		font-size: 14px;
	}
	.t-container p.title{
		top: 10%;
		left: 5%;
		font-size: 50px!important;
	}
}

@media (max-aspect-ratio: 16/9) {
  video {
    height: 100%;
    left: 90%;
    transform: translateX(-50%);
  }
}



/*=================================
.TOPページ H2アニメーション
=================================*/
.ec-secHeading .ec-secHeading__en {
    display: inline-flex;
}



/*** 下から登場するアニメーション ***/
@keyframes updown-anim{
  0%{
    transform: translateY(110%); /*表示範囲外から*/
  }
  100%{
    transform: translateY(0); /*通常の位置へ*/
  }
}

/*** アニメーションさせる要素 ***/
.updown{
  display: flex;
  overflow: hidden;
}
.updown span{
  transform: translateY(110%); /*下（範囲外）に隠しておく*/
  display: block; /*ブロック要素に変更*/
}

/*** スクロールで画面に入った場合 ***/
.updown.active span{
  animation: 0.35s updown-anim linear forwards; /*一度だけのアニメーション（終了時点で固定）*/
}