@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
    background: #ededed;
	color: #000;
	font-family: biz-udpgothic, sans-serif;
	font-weight: 400;
    font-style: normal;
	font-size: 62.5%;
    letter-spacing: 0.04em;
	line-height: 1.8em;
    position: relative;
    
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt";
    
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
a {
	outline: none;
    text-decoration: none;
}
a img {
	border: none;
    outline: none;
}
section, div, span, article, figure {
    box-sizing: border-box;
}
* img {
    width: 100%;
    height: auto;
    display: block;
}

body::-webkit-scrollbar {
    width: 16px;
}
body::-webkit-scrollbar-track-piece {
    background-color: #000;
}
body::-webkit-scrollbar-thumb {
    background-color: #ededed;

    border: 4px solid transparent;
    border-radius: 20px;
    background-clip: content-box;
}
html {
    scrollbar-color: #ededed #000;
    scrollbar-width: 16px;
}

::selection      { background: #ff308e; color: #fff; }
::-moz-selection { background: #ff308e; color: #fff; }




/* --- F A D E --- */

.FDwrap {
    width: 100vw;
    height: 100vh;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    pointer-events: none;
    background: #ededed;
    opacity: 0;
    
    will-change: opacity;
    transition: all 0.5s linear;
}
.FDwrap.WRtppg {
    transition: all 0.5s linear 0.5s;
}
body.bd_fade .FDwrap {
    opacity: 1;
}





/* --- L O A D I N G --- */

.loader {
	width: 100px;
	height: 100px;
    display: block;
    position: fixed;
	top: 50%;
	left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
	z-index: 21;
}
.loader.fadeout {
    opacity: 0;
}




/* --- S I D E  +  M E N U --- */

.Rside {
    width: 120px;
	height: auto;
	min-height: 100vh;
	display: block;
	margin: 0;
	padding-bottom: 200px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 5;
	
	/*background: rgba(255,255,255,0.2);*/
}
.Rmenu {
    width: 100%;
	height: auto;
	display: block;
	margin: 0;
	padding: 8vh 0 0 0;
}
.Rmenu figure {
    width: 100%;
	height: auto;
	margin: 0 0 45px 0;
	display: block;
	
	will-change: transform, opacity;
	transition: all 0.5s cubic-bezier(0, 0.7, 0.3, 1);
	transform: translateY(60px);
	opacity: 0;
}
.Rmenu figure span {
    width: 90px;
	height: auto;
	margin: 0 auto;
	display: block;
	position: relative;
	
	background: url("../img/mn-logo.png") no-repeat center center;
	background-size: 100% auto;
}
.Rmenu figure span::after {
    content: "";
	display: block;
	padding-bottom: 60%;
}
.Rmenu div {
    width: 100%;
	height: auto;
	margin: 0 0 40px 0;
	
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
	
	will-change: transform, opacity;
	transition: all 0.9s cubic-bezier(0, 0.7, 0.3, 1);
	transform: translateY(60px);
	opacity: 0;
}
.Rmenu div:nth-of-type(1) { transition-delay: 0.1s; }
.Rmenu div:nth-of-type(2) { transition-delay: 0.2s; }
.Rmenu div:nth-of-type(3) { transition-delay: 0.3s; }

.Rmenu div p {
    width: 1em;
    height: auto;
    display: block;
    margin: 0;
	position: relative;

    font-size: 1.08rem;
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
	letter-spacing: 0.05em;
	line-height: 1em;
	writing-mode: vertical-rl;
	color: #000;
	
    will-change: transform;
	transition: all 0.25s ease-in-out;
}
.Rmenu div p::after {
    content: "";
	display: block;
	margin: 0;
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #d1d1d1;
	
	will-change: transform;
	transition: all 0.25s ease-in-out;
	transform: scaleY(0);
}
.Rmenu div a:hover p {
    transform: translateX(5px);
}
.Rmenu div a:hover p::after {
    transform: scaleY(1) translateX(-5px);
}
.Rside.appr .Rmenu figure, .Rside.appr .Rmenu div {
    transform: translateY(0);
	opacity: 1;
}

.tp-scl {
    width: 1px;
    height: 200px;
    display: block;
    margin: 0;
    z-index: 8;
    position: absolute;
    bottom: 0;
    left: 50%;
	pointer-events: none;
	
	will-change: opacity;
	transition: all 0.8s linear 1.2s;
	opacity: 0;
}
.tp-scl div {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
	background: rgba(0,0,0,0.1);
	
	will-change: transform;
	transition: all 0.6s cubic-bezier(0, 0.7, 0.3, 1);
    transform: translateY(0);
}
.tp-scl div.fadeout {
    transform: translateY(100%);
}
.tp-scl div span {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    
    will-change: transform;
    animation: line-flow 4s ease-in-out infinite;
}
@keyframes line-flow {
    0%   { transform: scaleY(0);    transform-origin: top left; }
    35%  { transform: scaleY(100%); transform-origin: top left; }
    65%  { transform: scaleY(100%); transform-origin: bottom left; }
    100% { transform: scaleY(0);    transform-origin: bottom left; }
}
.Rside.appr .tp-scl {
    opacity: 1;
}
.arrow {
    width: 30px;
    height: 20%;
    display: block;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: calc(50% - 15px);
    z-index: 8;

    will-change: transform;
	transition: all 0.6s cubic-bezier(0, 0.7, 0.3, 1);
    transform: translateY(100%);
}
.arrow.appr {
    transform: translateY(0);
}
.arrow span {
    width: 1px;
    height: calc(100% + 10px);
    display: block;
    background: #000;
    position: absolute;
    top: 0;
    left: 15px;
    
    will-change: transform;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
}
.arrow span::before {
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background: #000;
    position: absolute;
    top: -1px;
    left: 6px;
    transform: rotate(135deg);
}
.arrow:hover span {
    transform: translateY(-10px);
}

.Lside {
    width: 120px;
	height: auto;
	min-height: 100vh;
	display: block;
	margin: 0;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
}
.cont-title-wrap {
    width: auto;
	height: auto;
	display: block;
	margin: 0;
	
	position: absolute;
	top: 0;
	left: 50%;
	
	will-change: transform, opacity;
	transition: all 0.8s cubic-bezier(0, 0.7, 0.3, 1);
	transform: translateY(-450px);
}
.Lside.appr .cont-title-wrap {
    transform: translateY(0);
}
.cont-title {
    width: 43px;
	height: auto;
	margin: 0;
	display: block;
	padding: 4em 0 4em 0;
	background: #000;
	
	position: absolute;
	top: 0;
	left: 0;
	
	will-change: transform;
	transition: all 0.6s cubic-bezier(0.7, 0, 0.3, 1);
	transform: translateY(-100%);
}
.cont-title::after {
    content: "";
	display: block;
	margin: 0;
	width: 1px;
	height: calc(100% + 80px);
	background: #000;
	position: absolute;
	left: 0;
	top: 0;
	
	will-change: transform;
	transition: all 0.8s cubic-bezier(0, 0.7, 0.3, 1) 0.4s;
	transform: translateY(-80px);
}
.cont-title div {
    width: auto;
	height: auto;
	margin: 0;
	
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
	overflow: hidden;
}
.cont-title h1 {
    width: 1em;
    height: auto;
    display: block;
    margin: 0 -0.1em 0 0;
	
    font-size: 1.68rem;
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
	letter-spacing: 0.02em;
	line-height: 1em;
	writing-mode: vertical-rl;
	color: #fff;
	
	will-change: transform;
	transition: all 0.2s ease-out;
	transform: translateX(calc(-100% - 10px));
}
.cont-title.appr {
    transform: translateY(0);
}
.cont-title.appr::after {
    transform: translateY(0);
}
.cont-title.appr h1 {
    transform: translateX(0);
}

.side-sns {
    width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 8vh 0;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
}
.side-sns div {
    width: 100%;
	height: auto;
	margin: 2em 0 0 0;
	
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	
	will-change: transform, opacity;
	transition: all 0.9s cubic-bezier(0, 0.7, 0.3, 1);
	transform: translateY(-50px);
	opacity: 0;
}
.side-sns div:nth-of-type(1) { transition-delay: 0.1s; }
.side-sns div:nth-of-type(2) { transition-delay: 0.2s; }
.side-sns div:nth-of-type(3) { transition-delay: 0.3s; }
.side-sns div:nth-of-type(4) { transition-delay: 0.4s; }
.side-sns div:nth-of-type(5) { transition-delay: 0.5s; }

.side-sns div i {
    display: inline-block;
	margin: 0;
	
    font-size: 1.2rem;
	line-height: 1em;
	letter-spacing: 0;
	color: #000;
	
	will-change: transform;
	transition: all 0.25s ease-in-out;
}
.side-sns div a:hover i {
    transform: translateX(-5px);
}
.Lside.appr .side-sns div {
    transform: translateY(0);
	opacity: 1;
}




/* --- C O M M O N --- */

.bg-logo {
    width: 100%;
	height: 100vh;
	display: block;
	margin: 0;
	position: fixed;
	top: 0;
	left: 0;
	background: url("../img/bg-logo.png") no-repeat center center;
	background-size: 65% auto;
	pointer-events: none;
	z-index: -5;
	
	will-change: transform, opacity, filter;
	transition: all 1.4s cubic-bezier(0, 0.7, 0.3, 1);
	filter: blur(30px);
	transform: scale(0.3);
	opacity: 0;
}
.bg-logo.appr {
    transform: scale(1);
    opacity: 0.65;
	filter: blur(0);
}
.bg-line {
    width: 70%;
	height: 100vh;
	display: block;
	margin: 0;
	position: fixed;
	top: 0;
	left: 15%;
	opacity: 0.5;
	pointer-events: none;
	z-index: -4;
}
.bg-line span {
    content: "";
	display: block;
	margin: 0;
	width: 1px;
	height: 100%;
	background: #d1d1d1;
	position: absolute;
	top: 0;
}
.bg-line span:nth-of-type(1) { left:  -2px; }
.bg-line span:nth-of-type(2) { right: -2px; }
.bg-line span:nth-of-type(3) { left:  50%; }


.main-wrap {
    width: 70%;
	height: auto;
	display: block;
	margin: 0 auto;
	position: relative;
	z-index: 0;
}

.plusTP, .plusBT {
    width: 100%;
	height: 100%;
	display: block;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}
.plusTP span, .plusBT span {
    width: 9px;
	height: 9px;
	display: block;
	margin: 0;
	position: absolute;
	background: url("../img/plus.gif") no-repeat center center;
	background-size: 100% auto;
	
	will-change: transform, opacity;
	transition: all 0.4s cubic-bezier(0, 0.7, 0.3, 1);
	opacity: 0;
}
.plusTP span {
    transform: translateY(-100px);
}
.plusBT span {
    transform: translateY(100px);
}
.plusTP span:nth-of-type(1) { top: -5px; left:  -6px; }
.plusTP span:nth-of-type(2) { top: -5px; right: -6px; }
.plusTP span:nth-of-type(3) { top: -5px; left: calc(50% - 4px); }

.plusBT span:nth-of-type(1) { bottom: -5px; left:  -6px; }
.plusBT span:nth-of-type(2) { bottom: -5px; right: -6px; }
.plusBT span:nth-of-type(3) { bottom: -5px; left: calc(50% - 4px); }

.plusTP span:nth-of-type(1) { transition-delay: 0; }
.plusTP span:nth-of-type(2) { transition-delay: 0.3s; }
.plusTP span:nth-of-type(3) { transition-delay: 0.15s; }

.plusBT span:nth-of-type(1) { transition-delay: 0.3s; }
.plusBT span:nth-of-type(2) { transition-delay: 0; }
.plusBT span:nth-of-type(3) { transition-delay: 0.15s; }

.plusTP.appr span, .plusBT.appr span {
    transform: translateY(0);
	opacity: 1;
}



/* --- T O P  [ M O V I E ] --- */

#opmv-wrap {
    width: 100%;
    height: 100vh;
    display: none;
    margin: 0;
	
	position: fixed;
    top: 0;
    left: 0;

    will-change: animation, filter;
    pointer-events: none;
    z-index: 15;
}
#opmv-wrap.fadeout {
    will-change: animation;
    animation: mv-fadeout 1s ease-out forwards;
}
@keyframes mv-fadeout {
    0%   { opacity: 1; filter: blur(0); }
    95%  { opacity: 0; filter: blur(30px); }
    100% { opacity: 0; filter: blur(30px); display: none;}
}
#opmv-wrap video#opmv {
    width: 100%;
    height: 100%;
    object-fit: cover;
	position: absolute;
    top: 0;
    left: 0;
}





/* --- A B O U T --- */

.about-main {
    width: 100%;
	height: auto;
	display: block;
	margin: 10vh auto 0 auto;
	padding: 70px 0;
	position: relative;
}
.about-main figure {
    width: 55%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.ab-logo {
    width: 78%;
	height: auto;
	display: block;
	margin: 0 auto;
	position: relative;
	
	will-change: transform, opacity;
	transition: all 0.8s cubic-bezier(0.15, 0.81, 0.22, 1);
	transform: scale(2.4);
	opacity: 0;
}
.ab-logo::after {
    content: "";
	display: block;
	padding-bottom: 59.2%;
}
.ab-logo i {
    width: 100%;
	height: 100%;
	margin: 0;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
.ab-logo i:nth-of-type(1) {
    background: url("../img/ab-logo_bl.png") no-repeat center top;
	background-size: 100% auto;
	z-index: 1;
	
	will-change: opacity;
	transition: all 0.5s ease-out 0.6s;
}
.ab-logo i:nth-of-type(2) {
    background: url("../img/ab-logo.png") no-repeat center top;
	background-size: 100% auto;
	z-index: 0;
}
.about-main.appr .ab-logo {
    transform: scale(1);
	opacity: 1;
}
.about-main.appr .ab-logo i:nth-of-type(1) {
    opacity: 0;
}

.ab-txt {
    width: 100%;
	height: auto;
	display: block;
	margin: 8% 0;
	position: relative;
	
	will-change: transform, opacity;
	transition: all 0.8s cubic-bezier(0, 0.7, 0.3, 1) 0.4s;
	transform: translateY(80px);
	opacity: 0;
}
.ab-txt::after {
    content: "";
	display: block;
	padding-bottom: 8.6%;
}
.ab-txt i {
    width: 100%;
	height: 100%;
	display: block;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	
	animation: abtxt 6.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes abtxt {
	45%  { transform: translateY(0); }
	50%  { transform: translateY(-16px); }
	55%  { transform: translateY(0); }
}
@keyframes abtxt_sp {
	45%  { transform: translateY(0); }
	50%  { transform: translateY(-9px); }
	55%  { transform: translateY(0); }
}

.ab-txt i:nth-of-type(1) {
    background: url("../img/ab-txt_01.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 0;
}
.ab-txt i:nth-of-type(2) {
    background: url("../img/ab-txt_02.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 0.12s;
}
.ab-txt i:nth-of-type(3) {
    background: url("../img/ab-txt_03.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 0.24s;
}
.ab-txt i:nth-of-type(4) {
    background: url("../img/ab-txt_04.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 0.36s;
}
.ab-txt i:nth-of-type(5) {
    background: url("../img/ab-txt_05.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 0.48s;
}
.ab-txt i:nth-of-type(6) {
    background: url("../img/ab-txt_06.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 0.60s;
}
.ab-txt i:nth-of-type(7) {
    background: url("../img/ab-txt_07.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 0.72s;
}
.ab-txt i:nth-of-type(8) {
    background: url("../img/ab-txt_08.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 0.84s;
}
.ab-txt i:nth-of-type(9) {
    background: url("../img/ab-txt_09.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 0.96s;
}
.ab-txt i:nth-of-type(10) {
    background: url("../img/ab-txt_10.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 1.08s;
}
.ab-txt i:nth-of-type(11) {
    background: url("../img/ab-txt_11.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 1.20s;
}
.ab-txt i:nth-of-type(12) {
    background: url("../img/ab-txt_12.png") no-repeat center center;
	background-size: 100% auto;
	animation-delay: 1.32s;
}

.about-main section {
    width: 100%;
	height: auto;
	display: block;
	margin: 0;
	padding: 0 1em;
	text-align: center;
	
	will-change: transform, opacity;
	transition: all 0.8s cubic-bezier(0, 0.7, 0.3, 1) 0.6s;
	transform: translateY(80px);
	opacity: 0;
}
.about-main section p {
	display: inline-block;
	margin: 0;
	
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 2.0em;
}
.about-main.appr .ab-txt, .about-main.appr section {
    transform: translateY(0);
	opacity: 1;
}




/* --- B A N N E R --- */

.bn-wrap {
    width: 100%;
	height: auto;
	margin: 10vh auto 0 auto;
	position: relative;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.bn-wrap div {
    width: 45%;
    height: auto;
    display: block;
    margin: 0 1.5%;
    
    will-change: transform, opacity;
	transition: all 0.6s cubic-bezier(0, 0.7, 0.3, 1);
	transform: translateY(50px);
	opacity: 0;
}
.bn-wrap.appr div {
    transform: translateY(0);
	opacity: 1;
}
.bn-wrap div span {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    
    will-change: opacity, transform;
    transition: all 0.25s ease-in-out;
}
.bn-wrap div a:hover span {
    transform: scale(1.04);
}






/* --- N E W S  I N D E X --- */

.newsIDX-main {
    width: 100%;
	height: auto;
	display: block;
	margin: 10vh auto 0 auto; /*margin: 20vh auto 0 auto;*/
	padding: 0;
	position: relative;
	
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: rgba(237,237,237,0.01);
}
.newsIDX-main::before, .newsIDX-main::after {
    content: "";
	display: block;
	margin: 0;
	width: calc(100% + 4px);
	height: 1px;
	background: #dedede;
	position: absolute;
	left: -2px
}
.newsIDX-main::before { top:    -1px; }
.newsIDX-main::after  { bottom: -1px; }

.newsIDX-main section {
    width: 100%;
	height: auto;
	display: block;
	margin: 0;
}
.newsIDX-main section div {
    width: calc(100% + 2px);
	height: auto;
	display: block;
	margin: 0 0 0 -1px;
	position: relative;
	overflow: hidden;
	
	will-change: transform, opacity;
	transition: all 0.8s cubic-bezier(0, 0.7, 0.3, 1);
	transform: translateY(70px);
	opacity: 0;
}
.newsIDX-main section div:nth-of-type(1) { transition-delay: 0; }
.newsIDX-main section div:nth-of-type(2) { transition-delay: 0.12s; }
.newsIDX-main section div:nth-of-type(3) { transition-delay: 0.24s; }
.newsIDX-main section div:nth-of-type(4) { transition-delay: 0.36s; }
.newsIDX-main section div:nth-of-type(5) { transition-delay: 0.48s; }
.newsIDX-main section div:nth-of-type(6) { transition-delay: 0.60s; }

.newsIDX-main section.appr div {
    transform: translateY(0);
	opacity: 1;
}
.newsIDX-main section div article {
    width: 100%;
	height: 100%;
	display: block;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.6); 
	z-index: -1;
	pointer-events: none;
	
	will-change: transform, animation;
	transform-origin: right center;
	animation: belt_hv-in 0.6s cubic-bezier(0.2,0.8,0.4,1) forwards;
}
.newsIDX-main section div a:hover article {
    transform-origin: left center;
    animation: belt_hv-out 0.2s cubic-bezier(0.2,0.8,0.4,1) forwards;
}
@keyframes belt_hv-in {
    from { transform: scale(1,1); }
    to   { transform: scale(0,1); }
}
@keyframes belt_hv-out {
    from { transform: scale(1,0); }
    to   { transform: scale(1,1); }
}

.newsIDX-main section div::after {
    content: "";
	display: block;
	margin: 0;
	width: 100%;
	height: 1px;
	background: #dedede;
	position: absolute;
	left: 0;
	bottom: 0;
	pointer-events: none;
}
.newsIDX-main section div span {
    width: 100%;
	height: auto;
	margin: 0;
	padding: 25px 40px;
	position: relative;
	
	display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.newsIDX-main section div span p {
    height: auto;
	margin: 0;
	display: block;
	position: relative;
    color: #000;
}
.newsIDX-main section div span p.nw-days {
    width: auto;
	padding: 0 30px 0 0;
	
	font-size: 1rem;
	letter-spacing: 0.06em;
	line-height: 1em;
	font-family: korolev, sans-serif;
    font-weight: 500;
    font-style: normal;
}
.newsIDX-main section div span p.nw-days::after {
    content: "";
	display: block;
	margin: -10px 0 0 0;
	width: 1px;
	height: 20px;
	background: #d1d1d1;
	position: absolute;
	right: 0;
	top: 50%;
}
.newsIDX-main section div span p.nw-hdtx {
    width: auto;
	padding: 0 calc(30px + 1em) 0 30px;
	
	font-size: 1rem;
	letter-spacing: 0.06em;
	line-height: 1.5em;
}
.newsIDX-main section div span i {
    width: 30px;
	height: 30px;
	margin: -15px 0 0 0;
	
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	
	position: absolute;
	right: 40px;
	top: 50%;
}
.newsIDX-main section div span i::after {
    content: "\f061";
	display: inline-block;
	font: var(--fa-font-light);
	margin: 0;
	font-size: 1.4rem;
	letter-spacing: 0;
	line-height: 1em;
	color: #000;
}
.newsIDX-main section div span p.nw-days::after,
.newsIDX-main section div span p.nw-hdtx,
.newsIDX-main section div span i::after {
    will-change: transform;
    transition: all 0.25s ease-in-out;
}

.newsIDX-main section div a:hover span p.nw-days::after {
    background: #000;
	transform: scaleY(0.6);
}
.newsIDX-main section div a:hover span p.nw-hdtx {
    transform: translateX(5px);
}
.newsIDX-main section div a:hover span i::after {
    transform: translateX(8px);
}

.lnkBT {
    width: 100%;
	height: 74px;
	display: block;
	margin: 0;
	position: relative;
	pointer-events: none;
	
	will-change: transform, opacity;
	transition: all 1.0s cubic-bezier(0, 0.7, 0.3, 1);
	transform: translateX(-80px);
	opacity: 0;
	z-index: 1;
}
.lnkBT.appr {
    transform: translateX(0);
	opacity: 1;
}
.lnkBT.mlt {
    margin-bottom: 1px;
}
.lnkBT article {
    width: calc(50% + 2px);
	height: 74px;
	margin: 0;
	padding: 0 calc(30px + 1em) 0 0;
	display: block;
	
	background: #000;
	pointer-events: auto;
	position: absolute;
	right: -2px;
	top: 0;
	z-index: 1;
}
.lnkBT article span {
    width: 100%;
	height: 100%;
	margin: 0;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.lnkBT article span p {
    display: inline-block;
	margin: 0;
	
	font-size: 1.2rem;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
	color: #ededed;
}
.lnkBT article span i {
    width: 30px;
	height: 30px;
	margin: -15px 0 0 0;
	
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	
	position: absolute;
	right: 40px;
	top: 50%;
}
.lnkBT article span i::after {
    content: "\f061";
	display: inline-block;
	font: var(--fa-font-light);
	margin: 0;
	font-size: 1.4rem;
	letter-spacing: 0;
	line-height: 1em;
	color: #ededed;
}
.lnkBT article, .lnkBT article span, .lnkBT article span p, .lnkBT article span i::after {
    will-change: transform, background, color;
    transition: all 0.25s ease-in-out;
}
.lnkBT.bt_GR a:hover article span { background: #a3f42b; }
.lnkBT.bt_BL a:hover article span { background: #1fd5e0; }
.lnkBT.bt_PK a:hover article span { background: #ff65aa; }

.lnkBT.JP article span p {
    margin: 0;
	padding: 0 calc(30px + 1em) 0 1em;
    font-size: 1.1rem;
	line-height: 1.4em;
    font-family: biz-udpgothic, sans-serif;
	font-weight: 400;
    font-style: normal;
}
.lnkBT.JP article span i {
	right: 15px;
}

.lnkBT a:hover article span {
	transform: translate(6px,-7px);
}
.lnkBT a:hover article span p {
    color: #000;
}
.lnkBT a:hover article span i::after {
    color: #000;
	transform: translateX(8px);
}




/* --- P R O J E C T --- */

.project-wrap {
    width: 100%;
	height: auto;
	display: block;
	margin: 0;
}
.project-main {
    width: 100%;
	height: auto;
	display: block;
	margin: 20vh auto 20vh auto;
	padding: 0;
	position: relative;
	
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: rgba(237,237,237,0.01);
}
.project-main::before, .project-main::after {
    content: "";
	display: block;
	margin: 0;
	width: calc(100% + 4px);
	height: 1px;
	background: #dedede;
	position: absolute;
	left: -2px
}
.project-main::before { top:    -1px; }
.project-main::after  { bottom: -1px; }

.prj-mv {
    width: calc(100% + 2px);
	height: auto;
	margin: 0 0 0 -1px;	
	padding: 40px 0 0 0;
	display: block;
	
	will-change: transform, opacity;
	transition: all 1.0s cubic-bezier(0, 0.7, 0.3, 1);
	transform: translateY(80px);
	opacity: 0;
}
.prj-mv.appr {
    transform: translateY(0);
	opacity: 1;
}
.prj-item {
    width: 100%;
	height: auto;
	display: block;
	margin: 0;
	/*本文追加時にactiveに*/
	/*border-bottom: 1px solid #dedede;*/
}
.prj-pic {
    width: 100%;
	height: auto;
	display: block;
	margin: 0;
}
.prj-pic article {
    width: 100%;
	height: auto;
	margin: 0;
	position: relative;
	display: block;
	overflow: hidden;
}
.prj-pic article::after {
    content: "";
	display: block;
	padding-bottom: 56.25%;
}
.prj-pic article span {
    width: 100%;
	height: 100%;
	display: block;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	
	will-change: transform;
	transition: all 0.25s ease-in-out;
}
.prj-pic article i {
    width: 100%;
	height: 100%;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	z-index: 2;
}
.prj-pic article i::before {
    content: "";
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-width: 0px;
	border-style: solid;
	border-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	
	will-change: border-width;
	transition: all 0.25s ease-in-out;
}
.prj-pic article i::after {
    content: "\f04b";
	display: inline-block;
	font: var(--fa-font-solid);
	margin: 0;
	font-size: 6rem;
	letter-spacing: 0;
	line-height: 1em;
	color: #fff;
	opacity: 0.75;
	text-shadow: 0px 3px 6px rgba(0,0,0,0);
	
	will-change: transform, opacity, text-shadow;
	transition: all 0.25s ease-in-out;
}
.prj-pic article p {
    width: 100%;
	height: 100%;
	display: block;
	margin: 0;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
	
	will-change: opacity;
	transition: all 0.25s ease-in-out;
}
.prj-pic a:hover article span {
    transform: scale(1.05);
}
.prj-pic a:hover article p {
    opacity: 0.25;
}
.prj-pic a:hover article i::before {
    border-width: 10px;
}
.prj-pic a:hover article i::after {
    transform: scale(1.2);
	opacity: 0.9;
	text-shadow: 0px 3px 6px rgba(0,0,0,0.35);
}

.prj-txt {
    width: 100%;
	height: auto;
	display: block;
	margin: 40px 0 0 0;
	text-align: center;
	background: rgba(255,255,255,0.35);
	position: relative;
	
	border-top:    1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
.prj-txt h2 {
    display: inline-block;
	margin: 0;
	padding: 1em 0;
	
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5em;
}
.prj-item p {
    width: 100%;
	height: auto;
	display: block;
	margin: 0;
	box-sizing: border-box;
	padding: 30px 40px;
	
	font-size: 1.0rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2.0em;
}





/* --- F O O T E R --- */

footer {
    width: 100%;
	height: 300px;
	margin: 0;
	position: relative;
	background: #000;
	
	display: flex;
    flex-wrap: wrap;
    align-content: center;
}
footer section {
    width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 0 70px;
	display: block;
}
footer section span {
    height: auto;
	display: block;
}
footer section span:nth-of-type(1) {
    width: 300px;
	margin: 0 0 30px 0;
}
footer section span:nth-of-type(2) {
    width: 90px;
	margin: 0 0 15px 0;
}
footer section span img {
    will-change: transform;
	transition: all 0.25s ease-in-out;
}
footer section span a img {
    cursor: pointer;
}
footer section span a:hover img {
    transform: scale(0.95);
}
footer section p {
    width: 100%;
	height: auto;
	margin: 0;
	display: block;
	
	font-size: 0.7rem;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1em;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-style: normal;
	color: #ededed;
}
.ftGRD {
    width: 195px;
    height: auto;
    display: block;
    margin: 0;
    background: linear-gradient(90deg, rgba(13,183,255,1) 0%, rgba(251,224,2,1) 95%);
    clip-path: polygon(0 30%, 100% 0, 100% 100%);
	
	position: absolute;
	right: 0;
	bottom: 0;
}
.ftGRD::after {
    content: "";
    display: block;
    padding-bottom: 220%;
}





/* --------- < 950px > --------- */

@media (max-width: 950px) {

.Rside, .Lside {
    width: 10%;
}
.Rmenu figure span {
    width: calc(100% - 20px);
}
.bg-line {
    width: 80%;
	left: 10%;
}
.main-wrap {
    width: 80%;
}

}





/* --------- < 800px > --------- */

@media (max-width: 800px) {

#opmv-wrap {
    background: linear-gradient(90deg, rgba(233,233,233,1) 0%, rgba(241,241,241,1) 40%, rgba(241,241,241,1) 60%, rgba(233,233,233,1) 100%);
}
#opmv-wrap video#opmv {
    width: 100%;
    height: 100%;
    object-fit: contain;
	position: absolute;
    top: -8%;
    left: 0;
}

.ab-logo {
	transform: scale(1.9);
}
.about-main figure {
    width: 70%;
}
.about-main section {
	text-align: left;
	padding: 0 2.5em;
}
.lnkBT.JP article span p {
    font-size: 0.9rem;
}

.br_pc { display: none; }

}





/* --------- < 700px > --------- */

@media (max-width: 700px) {

.newsIDX-main section div span {
	padding: 20px 30px;
}
.newsIDX-main section div span p.nw-days {
	padding: 0 20px 0 0;
	font-size: 0.9rem;
}
.newsIDX-main section div span p.nw-hdtx {
	padding: 0 calc(20px + 1em) 0 20px;
	font-size: 0.9rem;
}
.newsIDX-main section div span i {
    width: 20px;
	height: 20px;
	margin: -10px 0 0 0;
	
	right: 20px;
	top: 50%;
}
.newsIDX-main section div span i::after {
	font-size: 1.2rem;
}

}




/* --------- < 600px > --------- */

@media (max-width: 600px) {

.Rside {
    width: 40px;
	padding-bottom: 250px;
}
.Rmenu {
	display: none;
}
.tp-scl {
    height: 250px;
}
.arrow {
    height: 250px;
}
.arrow span::before {
    height: 12px;
    left: 4px;
}

.Lside {
    width: 40px;
}
.cont-title-wrap {
	left: 8px;
}
.cont-title {
    width: 24px;
	padding: 3em 0 3em 0;
}
.cont-title::after {
	height: calc(100% + 40px);
	transform: translateY(-40px);
}
.cont-title h1 {
    margin: 0 -0.1em 0 0;
    font-size: 1.2rem;
}
.side-sns {
	padding: 0 0 120px 0;
}
.side-sns div {
	margin: 15px 0 0 0;
}
.side-sns div i {
    font-size: 1.0rem;
}

.main-wrap {
    width: calc(100% - 80px);
}
.bg-logo {
	background-size: 75% auto;
}
.bg-line {
    width: calc(100% - 80px);
	left: 40px;
}

.about-main {
	margin: 40px auto 0 auto;
	padding: 40px 0;
}

.about-main figure {
    width: 90%;
}
.ab-logo {
	transform: scale(1.7);
}
.ab-txt {
	margin: 25px 0 20px 0;
}
.ab-txt i {
	animation: abtxt_sp 6.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.about-main section {
	padding: 0 2em;
}
.about-main section p {
	font-size: 0.9rem;
}

.bn-wrap {
	margin: 50px auto 0 auto;
}
.bn-wrap div {
    width: 100%;
    margin: 0;
}
.bn-wrap div:nth-of-type(n+2) {
    margin: 10px 0 0 0;
}

.newsIDX-main {
	margin: 50px auto 0 auto; /*margin: 100px auto 0 auto;*/
	
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.newsIDX-main section div span {
	padding: 20px 10px;
}
.newsIDX-main section div span p.nw-days {
	padding: 0 12px 0 0;
	font-size: 0.7rem;
	font-weight: 700;
}
.newsIDX-main section div span p.nw-days::after {
	margin: -8px 0 0 0;
	height: 16px;
}
.newsIDX-main section div span p.nw-hdtx {
    padding: 0 calc(10px + 1em) 0 12px;
	font-size: 0.8rem;
}
.newsIDX-main section div span i {
    width: 14px;
	height: 14px;
	margin: -7px 0 0 0;
	right: 10px;
}
.newsIDX-main section div span i::after {
    font-size: 0.9rem;
}
.lnkBT {
	height: 60px;
	transform: translateX(0) translateY(30px);
}
.lnkBT.appr {
    transform: translateX(0) translateY(0);
}
.lnkBT.mlt {
    margin-bottom: 1px;
}
.lnkBT article {
    width: calc(100% + 2px);
	height: 60px;
	padding: 0 calc(14px + 1em) 0 0;
	right: -1px;
}
.lnkBT article span p {
	font-size: 1.0rem;
}
.lnkBT article span i {
    width: 14px;
	height: 14px;
	margin: -7px 0 0 0;
	right: 12px;
}
.lnkBT article span i::after {
	font-size: 1.0rem;
}
.lnkBT.JP article {
	padding: 0 calc(14px + 1em) 0 0;
}

.lnkBT.JP article span p {
	padding: 0 calc(20px + 1em) 0 1em;
    font-size: 0.8rem;
	font-weight: 600;
}
.lnkBT.JP article span i {
	right: 12px;
}

.project-main {
	margin: 100px auto 100px auto;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.prj-mv {
	padding: 20px 0 0 0;
}
.prj-pic article i::after {
	font-size: 3.2rem;
	text-shadow: 0px 2px 4px rgba(0,0,0,0);
}
.prj-pic a:hover article i::before {
    border-width: 6px;
}
.prj-pic a:hover article i::after {
	text-shadow: 0px 2px 4px rgba(0,0,0,0.35);
}
.prj-txt {
	margin: 20px 0 0 0;
}
.prj-txt h2 {
	padding: 1em 1em;
	
	font-size: 0.9rem;
	letter-spacing: 0.03em;
}
.prj-item p {
	padding: 20px 20px;
	font-size: 0.8rem;
}

footer {
	height: 200px;
}
footer section {
	padding: 0 0 0 40px;
}
footer section span:nth-of-type(1) {
    width: 180px;
	margin: 0 0 20px 0;
}
footer section span:nth-of-type(2) {
    width: 70px;
	margin: 0 0 12px 0;
}
footer section p {
	font-size: 0.6rem;
}
.ftGRD {
    width: 130px;
}

}