@charset "utf-8";
/* =============================================================================
   pc
   ========================================================================== */

body {
    overflow: hidden;
    width: 100%;
}

#header h1 .logoOn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    transition: all .5s ease-in-out;
    opacity: 0;
}

.headerChange #header h1 .logoOn {
    opacity: 1;
}

.no-scroll #header h1 .logoOn {
    opacity: 0;
}

.headerChange .hamburger__icon, .headerChange .hamburger__icon:before, .headerChange .hamburger__icon:after {
    background-color: #5a5a5a;
}

#topContents {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background-color: #000;
}

#topContents .inner {
	position: relative;
	max-width: 100%;
	width: 100%;
	height: 100%;
}

.scene {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	transition: all .8s;
	overflow: hidden;
}

.scene.none {
	display: none;
}

.scene .bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: matrix(1, 0, 0, 1, 0, 0);
	z-index: 0;
}

.scene .table {
	display: table;
	width: 100%;
	height: 100%;
}

.scene .tableCell {
	display: table-cell;
	vertical-align: middle;
}

.sceneInner {
	position: relative;
	z-index: 1;
}

.scene.sceneNow {z-index: 11 !important;}
#scene0 {z-index: 10;}
#scene1 {z-index: 9;}
#scene2 {z-index: 8;}
#scene3 {z-index: 7;}
#scene4 {z-index: 6;}
#scene5 {z-index: 5;}

#scene0 h1 img {
    position: relative;
    display: block;
    z-index: 1;
    max-width: 756px;
    width: 87.5%;
    margin: 0 auto;
    opacity: 0;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    transition-delay: 1.5s;
}
#scene0 .bg {
	background: rgb(0,22,52); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(0,22,52,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(0,22,52,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(0,22,52,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001634', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}

#scene1 .bg {}

#scene2 .bg {
	background: url(../../img/home/pc/bg_ceo.png) repeat center;
}

#scene3 .bg {
	background: url(../../img/home/pc/bg_company.jpg) no-repeat center / cover;
}

#scene4 .bg {}

#scene5 .bg {
	background: url(../../img/home/pc/bg_event.jpg) no-repeat center / cover;
}

#scene6 .bg {
	background: url(../../img/home/pc/bg_recruit.jpg) no-repeat center / cover;
}

.scene.float {
	transform: matrix3d(0.9, 0.00, 0, 0, 0.00, 0.9, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

.scene.rightup {
	transform: translate(47.7%, -200%) matrix3d(0.9, 0.00, 0, 0, 0.00, 0.9, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

.scene.leftdown {
	transform: translate(-47.7%, 200%) matrix3d(0.9, 0.00, 0, 0, 0.00, 0.9, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

#scene0 .bg video {
	position: absolute;
	min-height: 100%;
	min-width: 100%;
}

@media screen and (min-width: 769px) {
    #scene0 .bg video {
        height: auto!important;
    }
}


/* side navi */
#sideNav {
	position: fixed;
	top: 50%;
	right: 30px;
	transform: translate(0,-50%);
	z-index: 50;
}

.sideNavList li {
	width: 7px;
	height: 7px;
	position: relative;
}

.sideNavList li.active {
	pointer-events: none;
}

.sideNavList li + li {
	margin-top: 25px;
}

.sideNavList li a {
	display: block;
	position: absolute;
	width: 12px;
	height: 12px;
	overflow: hidden;
	border-radius: 50%;
	background-color: #FFF;
	text-indent: -9999px;
	transition: all .6s;
	border: solid 1px #4c5c71;
	box-sizing: border-box;
}

.sideNavList li.active a {
	background-color: #7ab8ac;
	border: solid 1px #7ab8ac;
}

.sideNavList li:before {
	display: block;
	opacity: 0;
	content: "";
	position: absolute;
	left: -2px;
	top: -2px;
	width: 16px;
	height: 16px;
	border: 2px solid #7ab8ac;
	box-sizing: border-box;
	border-radius: 50%;
	transform: scale(2);
	transition: all .6s;
}

.sideNavList li:hover:before {
	transform: scale(1);
	opacity: 1;
	border: 1px solid #7ab8ac;
}

.sideNavList li.active:before {
	transform: scale(1.1);
	opacity: 1;
	border: 1px solid #7ab8ac;
}




.mainTtl {
	text-align: center;
}

.mainTtl .ttl {}

.mainTtl .ttl ul {
	overflow: hidden;
	margin-bottom: 10px;
}

.mainTtl .ttl ul li {
	font-size: 36px;
	font-family: 'Amiri', serif;
	color: #fff;
	line-height: 1;
	letter-spacing: 2.5px;
	opacity: 0;
	display: inline-block;
}

.mainTtl .ttl h2 {
	opacity: 0;
	color: #fff;
	font-size: 14px;
	letter-spacing: 2px;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}

.mainTtl .bar {
	width: 1px;
	height: 0;
	margin: 30px auto;
	background: rgba(255,255,255,.5);
	z-index: 2;
	transition-duration: .6s;
	transition-timing-function: cubic-bezier(.82,.06,.23,1);
}

.sceneNow .mainTtl .ttl ul li {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .3s;
    -ms-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-name: slideIn_from_bottom;
    animation-name: slideIn_from_bottom;
    visibility: visible !important;
}

.sceneNow h2 {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .6s;
    -ms-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-name: mainFIU;
    animation-name: mainFIU;
    visibility: visible !important;
    opacity: 0;
}

.sceneNow .mainTtl .bar {
    height: 50px;
}

.content h3 {
	font-size: 24px;
	line-height: 1.75;
	margin-bottom: 15px;
}

.content p {
	font-size: 14px;
	line-height: 2.1428;
}

.content .toLink {
	color: #FFF;
	max-width: 160px;
	padding-right: 30px;
}

#scene1 .content {
	position: relative;
	/* max-width: 1440px; */
	width: calc(100% - 80px);
	aspect-ratio: 1360 / 590;
	margin: 50px auto 0;
	/* overflow: hidden; */
}

#scene1 .content > img {
    width: 100%;
    display: block;
}

#scene1 .linkBox {
	position: absolute;
	/* max-width: 325px; */
	width: calc(270 / 1360 * 100%);
}
#scene1 .linkBox._top {
	top: 0;
}
#scene1 .linkBox._bottom {
	bottom: 0;
}

#scene1 .linkBox a,
#scene1 .linkBox span {
    display: block;
    position: relative;
    cursor: pointer;
}

#scene1 .linkBox a.sp-bl,
#scene1 .linkBox span.sp-bl {
    display: none;
}

#scene1 .linkBox .soon .txt {
	opacity: .6 !important;
}

#scene1 .linkBox:nth-child(1) {
	left: 0;
}

#scene1 .linkBox:nth-child(2) {
	left: calc(470 / 1360 * 100%);
}

#scene1 .linkBox:nth-child(3) {
	left: calc(940 / 1360 * 100%);
}

#scene1 .linkBox:nth-child(4) {
	right: calc(940 / 1360 * 100%);
}

#scene1 .linkBox:nth-child(5) {
	right: calc(470 / 1360 * 100%);
}

#scene1 .linkBox:nth-child(6) {
	right: 0;
}

#scene1 .linkBox .txt {
	position: absolute;
	width: calc(220 / 270 * 100%);
	opacity: 0;
	transition-duration: .8s;
	transition-timing-function: cubic-bezier(0, 0.59, 0.36, 1);
}

#scene1 .linkBox:nth-child(-n+3) .txt {
	top: calc(40 / 310 * 100%);
	left: 85%;
}
#scene1 .linkBox:nth-last-child(-n+3) .txt {
	bottom: calc(40 / 310 * 100%);
	right: 85%;
}

#scene1 .linkBox .txt .num {
	font-family: amiri, serif;
	font-size: clamp(50px, 2.07rem + 2.74vw, 70px);
	letter-spacing: -0.02em;
	line-height: 1;
	color: rgba(255,255,255,.1);
	position: absolute;
	top: -30px;
	z-index: 1;
}
#scene1 .linkBox:nth-child(-n+3) .txt .num {
	right: -7%;
}
#scene1 .linkBox:nth-last-child(-n+3) .txt .num {
	left: -7%;
}

@media screen and (min-width: 769px) {
	#scene1 .linkBox .txt .num.sp {
		display: none !important;
	}
}

#scene1.sceneNow .linkBox .txt {
	opacity: 1;
}

#scene1 .linkBox:nth-child(1) .txt {
    transition-delay: 0s;
}
#scene1 .linkBox:nth-child(4) .txt {
    transition-delay: .15s;
}
#scene1 .linkBox:nth-child(2) .txt {
    transition-delay: .3s;
}
#scene1 .linkBox:nth-child(5) .txt {
    transition-delay: .45s;
}
#scene1 .linkBox:nth-child(3) .txt {
    transition-delay: .6s;
}
#scene1 .linkBox:nth-child(6) .txt {
    transition-delay: .75s;
}

#scene1.sceneNow .linkBox:nth-child(-n+3) .txt {
	left: calc(200 / 270 * 100%);
}
#scene1.sceneNow .linkBox:nth-last-child(-n+3) .txt {
	right: calc(200 / 270 * 100%);
}

#scene1 .linkBox .figure {
	opacity: .7;
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
}

#scene1 .linkBox a:hover .figure,
#scene1 .linkBox span:hover .figure {
	opacity: 1;
}

#scene1 .linkBox .soon:hover .figure {
    opacity: .7;
}

.newsBox {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    transition-delay: 2.5s;
}

#scene0.sceneNow .newsBox {
    transform: translateY(0);
}

.newsBox a {
    color: #FFF;
    background: rgba(0, 22, 52, 0.8);
    box-sizing: border-box;
    padding: 20px 30px;
    line-height: 1;
    display: block;
    transition: all .4s;
}

.newsBox a:hover {
    background: rgba(32, 81, 150, 0.8);
}

.newsBox .newsDl {
    width: 70%;
    box-sizing: border-box;
}

.newsBox .newsDl dt {
    text-align: left;
    vertical-align: top;
    font-size: 13px;
    float: left;
    padding-right: 12px;
}

.newsBox .newsDl dd {
    text-align: left;
    vertical-align: top;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.newsBox .newsDl dd .date {
    padding-right: 10px;
}

.newsBox .linkTxt {
    position: absolute;
    right: 30px;
    bottom: 20px;
    padding-right: 40px;
}

.newsBox .linkTxt .box-arrow {
	position:absolute;
	right: 10%;
	top: -1px;
	bottom: 0;
	width: 17px;
	height: 13px;
	margin-top: auto;
	margin-bottom: auto;
}
	.newsBox .linkTxt .box-arrow .line {
		width: 0px;
		height: 1px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin-top: auto;
		margin-bottom: auto;
		background:#fff;
		transition-duration: .25s;
		transition-timing-function: ease-in-out;
		transition-delay: 2s;
	}
	.newsBox .linkTxt .box-arrow .r-arrow {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin-top: auto;
		margin-bottom: auto;
		display: inline-block;
		width: 0;
		height: 13px;
		background:url(../../img/common/pc/to_link_arrow.png) no-repeat right center;
		background-size: 17px 13px;
		transition-duration: .5s;
		transition-timing-function: ease-in-out;
		transition-delay: 2.25s;
	}
	.sceneNow .newsBox .linkTxt .line {
		width: 17px;
	}
	.sceneNow .newsBox .linkTxt .r-arrow {
		width: 17px;
	}

#scene2 .mainTtl .ttl ul li,
#scene2 .mainTtl .ttl h2 {
	color: #001634;
}

#scene2 .tableCell {
	vertical-align: bottom;
}

#scene2 .content {
	max-width: 1440px;
	width: 100%;
	height: 85%;
	margin: 0 auto;
	color: #000;
}

#scene2 .floatBox .tableCell {
	vertical-align: middle;
	transition: all 1s;
	padding-bottom: 16%;
}

#scene2 .floatBox {
    /* max-width: 1200px; */
    margin: 0 auto;
}

#scene2 .floatBox .fl {
    float: left;
    /* max-width: 490px; */
    width: 40.8334%;
}

#scene2 .floatBox .fr {
    float: right;
    /* max-width: 690px; */
    width: 57.5%;
    padding: 0 3.3333%;
    box-sizing: border-box;
}

#scene2 .content .tableCell.img {
	width: 50%;
	vertical-align: bottom;
}

#scene2 .content .tableCell.txt {
	padding-right: 5%;
	padding-left: 5%;
}

#scene2 .content .toLink {
	margin-top: 40px;
	margin-left: 0;
}

#scene2 .content h3{
	max-width: 560px;
    margin-bottom: 40px;
}

.ceoName {
	/*font-size: 24px;
	font-family: 'Amiri', serif;
	text-align: right;*/
	max-width: 321px;
    margin-top: 20px;
    margin-left: 40%;
}

@media screen and (min-width: 768px) and (min-height: 1024px) {
	/* 横幅768px以上で、高さ1024px以上の場合（ipadの縦向きのみ） */
	.is_ipad #scene2 .tableCell {
	    vertical-align: middle;
	}
	.is_ipad #scene2 .content {
	    height: auto;
	}
	.is_ipad #scene2 .floatBox .fr {
	    float: none;
	    margin: 40px auto 0;
	    height: auto !important;
	    padding-bottom: 40%;
	    text-align: center;
	}
	.is_ipad #scene2 .floatBox .fl {
	    float: none;
	    height: auto !important;
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    margin: auto;
	}
	.is_ipad #scene2 .content .toLink {
	    margin-right: auto;
	    margin-left: auto;
	}
	.is_ipad .ceoName {
	    text-align: center;
	    padding-top: 20px;
	}
}

#scene3 .content {
	text-align: center;
	color: #FFF;
}

#scene3 .content .toLink {
	margin-top: 40px;
}

#scene4 .shopBox {
	width: 50%;
	height: 50%;
	float: left;
	position: relative;
	overflow: hidden;
}

#scene4 .shopBox:before {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}

#scene4 .shopBox:after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	opacity: .7;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

#scene4 #softbank:before {
	background: url(../../img/home/pc/bg_softbank.jpg) no-repeat center / cover;
}

#scene4 #eye-flash:before {
	background: url(../../img/home/pc/bg_eye-flash.jpg) no-repeat center / cover;
}

#scene4 #brillian-day-spa:before {
	background: url(../../img/home/pc/bg_brillian-day-spa.jpg) no-repeat center / cover;
}

#scene4 #littleseoul:before {
	background: url(../../img/home/pc/bg_littleseoul.jpg) no-repeat center / cover;
}

#scene4 #chanung:before {
	background: url(../../img/home/pc/bg_chanung.jpg) no-repeat center / cover;
}

#scene4 .shopBox a,#scene4 .shopBox > span {
	position: relative;
	z-index: 1;
	text-align: center;
}

#scene4 .shopBox .logo {
	max-width: 240px;
	margin: 0 auto;
	transform: translateY(40px);
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

#scene4 .shopBox .box-arrow {
	position: relative;
	width: 47px;
	height: 13px;
	margin: 30px auto 0;
	display: block;
}
	#scene4 .shopBox .box-arrow .line {
		width: 0px;
		height: 1px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin-top: auto;
		margin-bottom: auto;
		background: #000;
		transition-duration: .25s;
		transition-timing-function: ease-in-out;
	}
	#scene4 .shopBox .box-arrow .r-arrow {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin-top: auto;
		margin-bottom: auto;
		display: inline-block;
		width: 0;
		height: 13px;
		background: url(../../img/home/pc/icon_link_arrow.png) no-repeat right center;
		background-size: contain;
		transition-duration: .5s;
		transition-timing-function: ease-in-out;
		transition-delay: .25s;
	}
	#scene4 .shopBox a:hover .line {
		width: 46px;
	}
	#scene4 .shopBox a:hover .r-arrow {
		width: 8px;
	}

#scene4 .shopBox .more {
	display: block;
	font-size: 13px;
	margin-top: 15px;
	line-height: 1;
	opacity: 0;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

#scene4 .shopBox a:hover .more {
	opacity: 1;
}

#scene4 .shopBox a:hover .logo {
	transform: translateY(0);
}

#scene4 .shopBox a:hover:before {
	transform: scale(1.1);
}

.hexagonWrap {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	max-width: 600px;
	width: 20.8334%;
	transform: translateY(-50%);
	z-index: 1;
}

.hexagonInner {
	position: relative;
}

.hexagon {
    transform: rotate(360deg) scale(0);
    transition: all 1s;
}

.sceneNow .hexagon {
    transform: rotate(0) scale(1);
}

.hexagonWrap .mainTtl {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	transform: translateY(-40%);
}

.hexagonWrap .mainTtl .ttl ul li,
.hexagonWrap .mainTtl .ttl h2 {
	color: #001634;
}

#scene5 .content {
	text-align: center;
	color: #FFF;
}

#scene5 .content .toLink {
	margin-top: 40px;
}

#scene6 .tableCell {
	padding-bottom: 20%;
}

#scene6 .mainTtl {
	margin-bottom: 25px;
}

#scene6 .mainTtl .ttl ul li,
#scene6 .mainTtl .ttl h2 {
	color: #001634;
}

#scene6 .content {
	text-align: center;
	color: #001634;
}

#scene6 .content .toLink {
	margin-top: 30px;
}

#scene6 .content .img img {
	position: absolute;
	bottom: -20px;
	/* max-width: 320px; */
	width: 22.2223%;
	opacity: 0;
}

/* #scene6.sce {
	width: 22.2223%;
	opacity: 0;
} */

#scene6.sceneNow .content .img img {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .8s;
    -ms-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
    visibility: visible !important;
}

#scene6 .content .img .human1 {
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 0;
    animation-delay: 1.4s;
}

#scene6 .content .img .human2 {
    left: 26.3333%;
    z-index: 1;
    animation-delay: 1.7s;
}

#scene6 .content .img .human3 {
    right: 26.6111%;
    z-index: 1;
    animation-delay: 1.7s;
}

#scene6 .content .img .human4 {
    left: 15.7222%;
    z-index: 0;
    animation-delay: 2s;
}

#scene6 .content .img .human5 {
    right: 18.7083%;
    z-index: 0;
    animation-delay: 2s;
}

#scene6 .content .img .human6 {
    left: 1.7777%;
    z-index: 1;
    animation-delay: 2.3s;
}

#scene6 .content .img .human7 {
    right: 8.8055%;
    z-index: 1;
    animation-delay: 2.3s;
}

#scene6 .content .img .human8 {
    left: 0;
    z-index: 0;
    animation-delay: 2.6s;
}

#scene6 .content .img .human9 {
    right: 0;
    z-index: 1;
    animation-delay: 2.6s;
}


@media screen and (min-width: 1440px) and (max-height: 950px) {
	/* 横幅1440px以上で、高さ950px以下の場合 */
	#scene6 .tableCell {
		/* padding-bottom: 0;
		vertical-align: bottom; */
		padding-bottom: 0;
    /* vertical-align: bottom; */
    padding-top: 3%;
    display: block;
	}
	#scene6 .content .img {
		position: inherit;
	}
}


.scene .fadeup {
    visibility: visible !important;
    opacity: 0;
	transform: translate(0, 30px);
}

.sceneNow .fadeup {
    transition-duration: .8s;
    opacity: 1;
    transform: none;
}


.modal-body .clearBox {
	width: 388px;
	height: 1px;
}
.modal-body ul {
	width: 100%;
	max-width: 388px;
	margin-right: auto;
	margin-left: auto;
}
	.modal-body ul li {
		float: left;
		width: 48.5%;
		max-width: 188px;
	}
	.modal-body ul li + li {
		float: right;
	}
		.modal-body ul li a {
			display: block;
		}

.scroll {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    display: inline-block;
    transform: translate(-50%, -50%);
    text-decoration: none;
    padding-top: 55px;
    color: #FFF;
    opacity: 0;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
    transition-delay: 2.5s;
}
	.scroll span {
		position: absolute;
		top: 0;
		left: 50%;
		width: 30px;
		height: 50px;
		margin-left: -15px;
		border: 2px solid #fff;
		border-radius: 50px;
		box-sizing: border-box;
	}
	.scroll span::before {
		position: absolute;
		top: 10px;
		left: 50%;
		content: '';
		width: 6px;
		height: 6px;
		margin-left: -3px;
		background-color: #fff;
		border-radius: 100%;
		animation: scroll 2s infinite;
		box-sizing: border-box;
	}

.loaded #scene0 h1 img {
    opacity: 1;
}
.loaded .scroll {
    opacity: 1;
}
.mvEnd .scroll {
    transition-delay: 1s;
}


.floatingBnr {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    max-width: 280px;
    width: 60%;
    display: none;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.7);
		z-index: 50;
}

.floatingBnr .bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.floatingBnr .boxInner {
    position: relative;
}

.floatingBnr .boxInner .postLink {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	/* background: rgba(0, 0, 0, 0.6); */
	color: #FFF;
	box-sizing: border-box;
	/* padding: 20px; */
}

.floatingBnr .boxInner .postLink .newsUnder {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    background: rgba(0, 22, 52, 0.8);
    box-sizing: border-box;
    padding: 10px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.floatingBnr .boxInner .postLink .date {
    display: block;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1;
    text-align: left;
    margin-bottom: 5px;
}

.floatingBnr .boxInner .postLink .ttl {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1;
}

.floatingBnr .boxInner .postLink .newsTtl {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    opacity: .8;
    max-width: 124px;
    width: 44.2858%;
}

.floatingBnr .boxInner .postLink .more {
    display: block;
    font-size: 14px;
    line-height: 1;
    color: #111;
    text-align: center;
    box-sizing: border-box;
    padding: 15px 0 14px;
    background: rgba(255, 255, 255, 0.8);
    max-width: 180px;
    margin: 12px auto 0;
}

.newsMovieWrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}

#newsMovieBox {
    width: 100%;
    height: 100%;
}

.floatingBnr .boxInner .closeIcon {
	display: block;
    position: absolute;
    right: -10px;
    top: -10px;
    width: 30px;
}

.movieBox {
    position: relative;
    max-width: 800px;
    width: 100%;
    margin: 50px auto;
}

#iframeMovie {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}

.movieWrap .btn {
    margin-bottom: 30px;
}

.movieWrap .btn a {
    color: #FFF;
}

.remodal.bnr-news {
    background: rgba(255, 255, 255, 0.8);
}

/* 20211216追加 Youtube動画調整
---------------------------------------------- */
#wrapper_newsMovie{
	min-height: 0 !important;
	height: 0;
	padding-top: 56.25%;
}
	#wrapper_newsMovie iframe{
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
	}

/* =============================================================================
   sp
   ========================================================================== */

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

	body {
	    overflow-y: auto;
	}

	#header h1 .logoOn {
	    opacity: 0 !important;
	}

	.headerChange .hamburger__icon, .headerChange .hamburger__icon:before, .headerChange .hamburger__icon:after {
	    background-color: #FFF;
	}

	#sideNav {
	    display: none;
	}

	.scene {
	    position: inherit;
	}

	#topContents {
	    position: inherit;
	}

	.scene.float {
		transform: none;
	}

	.scene.rightup {
		transform: none;
	}

	.scene.leftdown {
		transform: none;
	}

	#scene0 {
		position: relative;
	}

	#scene0 h1 img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}

	.newsBox {
	    /* position: initial; */
	    transform: translateY(0);
	}

	#scene0 .bg video {
	    position: absolute;
	    width: auto;
	    min-height: auto;
	}

	.mainTtl .ttl ul {
		margin-bottom: 5px;
	}

	.mainTtl .ttl ul li {
	    opacity: 1;
	    animation: none !important;
	    font-size: 22px;
	    letter-spacing: 0;
	}

	.mainTtl .ttl h2 {
	    opacity: 1;
	    animation: none !important;
	    font-size: 12px;
	}

	.mainTtl .bar {
	    animation: none !important;
	    height: 20px;
	    margin: 15px auto;
	}

	.scene .fadeup {
	    opacity: 1;
	    transform: none;
	}

	.sceneInner {
	    padding: 70px 0;
	}

	.content h3 {
	    font-size: 18px;
	}
	#scene6 .content h3 {
	    font-size: 16px;
	}

	.content p {
	    text-align: left;
	}

	#scene0 .sceneInner {
	    padding: 0;
	}

	#scene0 .bg {
	    position: inherit;
	}

	#scene3 .content,
	#scene5 .content,
	#scene6 .content {
	    max-width: 560px;
	    width: 87.5%;
	    margin: 0 auto;
	}

	#scene0 .bg {
	    position: initial;
	    width: 100%;
	    height: 100%;
	}

	.scene .bar {
	    position: absolute;
	    bottom: calc(50px + 10vw);/* NEWSの高さ＋barの高さ */
	    color: #fff;
	    text-indent: -14px;
	    font-size: 12px;
	    opacity: 0;
	    transition-duration: .8s;
	    transition-timing-function: ease-in-out;
	    left: 50%;
	}
	.mvEnd .scene .bar {
		opacity: 1;
	}
	#scene3 .bar,
	#scene5 .bar {
	    position: static;
	}
	.scene .bar span {
	    width: 1px;
	    height: 0px;
	    position: absolute;
	    top: 1.4em;
	    right: auto;
	    left: 0;
	    margin: auto;
	    background: rgba(255,255,255,.5);
	    z-index: 2;
	    transition-duration: .6s;
	    transition-timing-function: cubic-bezier(.82,.06,.23,1);
	    transform-origin: top center;
	}
	.mvEnd .scene .bar span {
		height: 10vw;
		animation: bar 2s infinite;
	}

	.newsBox a {
	    padding: 20px 6.25%;
	}

	.newsBox .newsDl {}

	.newsBox .newsDl dt {
	    font-size: 11px;
	}

	.newsBox .newsDl dd {
	    font-size: 11px;
	}

	.newsBox .linkTxt {
	    font-size: 11px;
	    padding-right: 18px;
	}

	span.box-arrow {}

	.newsBox .linkTxt .box-arrow {
	    right: 0;
	    width: 13px;
	    height: 9px;
	}

	.newsBox .linkTxt .line {
	    width: 13px !important;
	}

	.newsBox .linkTxt .r-arrow {
	    width: 13px !important;
	}

	#scene1 .content {
		width: 100%;
		aspect-ratio: revert;
	}

	#scene1 .linkBox {
	    position: initial;
	    width: 50%;
	}

	#scene1 .linkBox .txt {
		width: 100%;
	    opacity: 1;
	}
	#scene1.sceneNow .linkBox:nth-child(-n+3) .txt {
    left: 85%;
	}
	#scene1.sceneNow .linkBox:nth-last-child(-n+3) .txt {
    right: 85%;
	}
	#scene1 .linkBox .txt .num {
		top: -22%;
	}

	#scene1 .linkBox a,
	#scene1 .linkBox span {
	    position: relative;
	    display: block;
	}

	#scene1 .linkBox:nth-child(2),
	#scene1 .linkBox:nth-child(4),
	#scene1 .linkBox:nth-child(6) {
	    margin-top: -40px;
	    margin-right: 0;
	    margin-left: auto;
	}

	#scene1 .linkBox:nth-child(3),
	#scene1 .linkBox:nth-child(5) {
	    margin-top: 40px;
	}

	#scene1 .linkBox:nth-child(2) .txt,
	#scene1.sceneNow .linkBox:nth-child(2) .txt {
		top: auto;
	    right: 85%;
		bottom: calc(40 / 310 * 100%);
		left: auto;
	}
	#scene1 .linkBox:nth-child(2) .txt .num {
		right: auto;
	    left: -7%;
	}

	#scene1 .linkBox:nth-child(5) .txt,
	#scene1.sceneNow .linkBox:nth-child(5) .txt {
	    top: calc(40 / 310 * 100%);
		right: auto;
		bottom: auto;
	    left: 85%;
	}
	#scene1 .linkBox:nth-child(5) .txt .num {
		left: auto;
	    right: -7%;
	}

	#scene2 .content {
	    height: auto;
	}

	#scene2 .floatBox .fl {
	    float: none;
	    width: 50%;
	    height: auto !important;
	    margin: 0 auto;
	}

	#scene2 .floatBox .fr {
	    float: none;
	    max-width: 560px;
	    width: 87.5%;
	    padding: 0;
	    margin: 30px auto;
	    height: auto !important;
	    text-align: center;
	}

	#scene2 .sceneInner {
	    padding-bottom: 0;
	}

	#scene2 .content .toLink {
	    margin: 20px auto 0;
	}

	#scene2 .floatBox .tableCell{
		padding-bottom: 0;
	}

	#scene2 .content h3{
		margin-top: 10px;
	    margin-bottom: 30px;
	    max-width: 420px;
	}

	.ceoName {
	    /*text-align: center;
	    margin-top: 10px;*/
	    width: 70%;
	    max-width: 260px;
	    margin-left: auto;
	    margin-bottom: 40px;
	}

	#scene4 .sceneInner {
	    padding: 0;
	}

	.hexagonWrap {
	    position: initial;
	    transform: translateY(0);
	    width: 100%;
	    background: url(../../img/home/pc/bg_ceo.png) repeat center;
	}

	.hexagonWrap .mainTtl {
	    position: initial;
	    transform: translateY(0);
	    padding: 40px 0 35px;
	}

	#scene4 .shopBox {
	    width: 100%;
	    height: 200px;
	    float: none;
	}

	#scene4 .shopBox .logo {
	    width: 40%;
	    transform: translateY(30px);
	}

	#scene4 .shopBox .box-arrow {
	    margin-top: 15px;
	}

	#scene6 .content .img img {
	    animation: none !important;
	    opacity: 1;
	}

	.modal {
	    width: 80%;
	}

	.modal-inset {
	    padding: 40px;
	}

	.modal-body ul li {
	    float: none;
	    width: 100%;
	    margin-right: auto;
	    margin-left: auto;
	}

	.modal-body ul li + li {
	    float: none;
	    margin-top: 15px;
	}

	#scene1 .linkBox a.sp-bl {
	    display: block;
	}

	.remodal {
			width: 87.5% !important;
		}
			.modal-wrap {
			    padding-top: 20px;
			}
				.modal-wrap li {
					width: 90%;
					max-width: 184px;
					margin-right: auto;
					margin-left: auto;
				}
				.modal-wrap li + li {
					margin-top: 15px;
				}
				.remodal-close {
				    margin-top: 30px !important;
				    width: 40px !important;
				}

		.modal-frame {
			overflow: hidden;
		}

	.is-sp .fi_sp {
	    opacity: 0;
	    -webkit-transition: all .5s;
	}

	.movieBox {
	    margin-top: 0;
	    margin-bottom: 35px;
	}

	.floatingBnr {
	    max-width: 225px;
	    width: 225px;
	}

	.floatingBnr .boxInner .postLink .newsTtl {
	    font-size: 12px;
	    margin-bottom: 10px;
	}

	.floatingBnr .boxInner .postLink .date {
	    font-size: 10px;
	}

	.floatingBnr .boxInner .postLink .ttl {
	    font-size: 14px;
	}

	.floatingBnr .boxInner .postLink .more {
	    font-size: 12px;
	    padding: 10px 0;
	}

}




@keyframes bounceInUp {
	0% { opacity: 0; transform: translateY(100px); }
	50% { transform: translateY(-20px); }
	75% { transform: translateY(15px); }
	100% { opacity: 1; transform: translateY(0); }
}


@keyframes scroll {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}


@keyframes bar {
	0% {
		transform: scaleY(0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		transform: scaleY(1);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}