body {
	top:100vh;
	width:100%;
	overflow:hidden;
	background: url(/dcms_media/image/top-back.jpg) no-repeat center center/cover #FFFFFF;
}
li {
	list-style: none;
}
img {
    max-width: 100%;
    height: auto;
}

.contents .contwrap {
	width:100%;
	overflow:hidden;
}

.wrap .logo {
	width:320px;
	position:fixed;
	right:40px;
	top:40px;
	z-index:1;
}

.wrap .contents {
	width:100%;
	height:100vh;
	max-width:100%;
	box-sizing:border-box;
	padding:100px;
	position:relative;
	display:grid;
	grid-template-rows:repeat(4,auto);
	align-content:center;
	background:rgba(0,0,0,.4);
}
.wrap .contents::before {
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	z-index:0;
	background:url(/dcms_media/image/bg_obj.png) no-repeat right center/auto 100%;
	mix-blend-mode:screen;
	transform: translate3d(0,0,0);
}

.wrap .contents .contwrap.tit {
	font-size:120px;
	line-height:1;
	/* overflow: visible; */
	margin-bottom:30px;
}
.wrap .contents h2 {
	will-change: transform;
	position:relative;
	font-size:inherit;
	line-height:1;
	margin:0;
	padding:0;
}
.wrap .contents h2 .tit {
	font-family: 'Bebas Neue', "Noto Sans JP",sans-serif;
	font-weight:100;
	color:rgba(255,255,255,.4);
	letter-spacing:.11em;
	display:inline-block;
}
.wrap .contents h2 .jp {
	font-size:24px;
	letter-spacing:.1em;
	display:block;
	margin-top:-1.5em;
	margin-left:.25em;
	position:relative;
	z-index:1;
	color:#FFFFFF;
}

#dcms_layoutPageBlockPasteArea .wrap .contents p.body {
	width:100%;
	max-width:100%;
	font-size:60px;
	color:#FFFFFF;
	letter-spacing:.05em;
	font-weight:500;
	line-height:1.4;
	margin-bottom:.75em;
	position:relative;
}
.wrap .contents .text {
	display:block;
	width:100%;
	margin-bottom:30px;
}
#dcms_layoutPageBlockPasteArea .wrap .contents p {
	will-change: transform;
	font-size:16px;
	color:#FFFFFF;
	line-height:2;
}
.wrap video {
	position:absolute;
	z-index:-1;
	min-width: 101%;
	min-height: 101%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	object-fit:cover;
}

.contents a.btn {
	background-color:#FFFFFF;
	box-sizing:border-box;
	width:270px;
	height:60px;
	border-radius:30px;
	display:grid;
	justify-content:center;
	align-items:center;
	transition:.3s;
	position: relative;
}
.contents a.btn:hover {
	background:#80ca7f;
	color:#FFFFFF;
}
.contents .btnwrap {
	display:grid;
	grid-template-columns:repeat(auto-fill,270px);
	justify-content:start;
	grid-gap:20px 20px;
}
.contents .btnwrap3 {
	display:grid;
	grid-template-columns:repeat(3,auto);
	justify-content:start;
	grid-column-gap:20px;
}


#dcms_layoutPageBlock:not(.loaded) section .wrap::before {
	opacity: 1;
}
#dcms_layoutPageBlock:not(.loaded) section .contents {
	background: none;
	pointer-events: none;
	opacity: 0;
}
#dcms_layoutPageBlock:not(.loaded) .wrap video {
	opacity: 0;
}
#dcms_layoutPageBlock section .wrap::before {
	background: url(/dcms_media/image/loading.gif) no-repeat center center/auto #FFFFFF;
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	z-index:0;
	transition:1s;
	opacity: 0;
}
.wrap video {
	transition:1s;
	opacity: 1;
}
#dcms_layoutPageBlock.loaded section .contents {
	opacity: 1;
    transition-delay: 1s;
    transition-duration: 1s;
}


/**
section01
**/
#section01 .scroll {
	height:70px;
	overflow:hidden;
	position:absolute;
	left:calc(50% - 1px);
	transform:translateX(-50%);
	bottom:0;
}
#section01 .scroll p {	
	font-family: 'Bebas Neue', "Noto Sans JP",sans-serif;
	font-size:1.2rem;
	line-height:1;
	color:#FFFFFF;
	letter-spacing:.3em;
}
#section01 .scroll::before {
	content:'';
	display:block;
	width:1px;
	height:45px;
	background-color:#FFFFFF;
	position:absolute;
	left:50%;
	bottom:0;
	animation: pathmove 1.4s ease-in-out infinite;
}
@keyframes pathmove{
  0%{
    height:0;
    top:15px;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:67px;
    opacity: 0;
  }
}
#section01 .wrap::before {
	/* content:'';
	display:block;
	width:180px;
	height:300px;
	background-color:#248C9B;
	position:absolute;
	right:0;
	bottom:0;
	transform-origin:right bottom;
	transform:skewX(-31deg);
	z-index:1; */
}

#section01 .wrap .contents {
	background:transparent;
}
#section01 .wrap .contents::before {
	content:none;
}
/**

**/
body.loading .scrollnav,
body.sec1 .scrollnav,
body.sec6 .scrollnav {
	bottom:-230px;
}
.scrollnav {
	height:220px;
	width:1px;
	background-color:#9b9b9b;
	position:fixed;
	right:50px;
	bottom:50px;
	z-index:1;
	transition-timing-function:cubic-bezier(.71,.04,.3,.97);
	transition-delay:1s;
	transition-duration:.5s;
}
.scrollnav::before {
	content: '';
	position: absolute;
	top: 0;
	left:0;
	width: 1px;
	height: 100%;
	background-color:#FFFFFF;
	animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


/**
pagemove
**/
section.active {
}
section .wrap {
	position:fixed;
	top:0;
	left:0;
    transform-origin: center center;
	width:100%;
}
section.active .wrap {
	top:0;
	left:0;
}
section.active.next .wrap {
	animation: nextcont 1.2s cubic-bezier(.72,.09,.33,.92);
}
section.active.prev .wrap {
	animation: prevcont 1.2s cubic-bezier(.72,.09,.33,.92);
}
section.active.next,
section.active.prev {
	animation: nextscale 1.2s cubic-bezier(.72,.09,.33,.92);
}

@keyframes nextcont {
  0% {
	transform:translate(-15vw,150vh);
  }
  100% {
	transform:translate(0,0);
  }
}
@keyframes prevcont {
  0% {
	transform:translate(15vw,-150vh);
  }
  100% {
	transform:translate(0,0);
  }
}
@keyframes nextscale {
  0% {
	transform:scale(.9);
  }
  50% {
	transform:scale(.9);
  }
  100% {
	transform:scale(1);
  }
}

section:not(.active) .wrap {
	transform:translate(-15vw,150vh);
}
section:not(.active).next .wrap {
	animation: scldown 1.2s cubic-bezier(.72,.09,.33,.92);
}
section:not(.active).prev .wrap {
	animation: sclup 1.2s cubic-bezier(.72,.09,.33,.92);
}
section:not(.active).next,
section:not(.active).prev {
	animation: slcscale 1.2s cubic-bezier(.72,.09,.33,.92);
}

@keyframes scldown {
  0% {
	transform:translate(0,0);
  }
  100% {
	transform:translate(15vw,-150vh);
  }
}
@keyframes sclup {
  0% {
	transform:translate(0,0);
  }
  100% {
	transform:translate(-15vw,150vh);
  }
}
@keyframes slcscale {
  0% {
	transform:scale(1);
  }
  50% {
	transform:scale(.9);
  }
  100% {
	transform:scale(.9);
  }
}

section.active.next .contwrap > * {
	transform:translateY(0%);
	animation: nextcont3 1.2s ease-out;
}
section.active.prev .contwrap > * {
	transform:translateY(0%);
	animation: prevcont3 1.2s ease-out;
}

@keyframes nextcont3 {
  70% {
	transform:translateY(100%);
  }
  100% {
	transform:translateY(0%);
  }
}
@keyframes prevcont3 {
  70% {
	transform:translateY(-100%);
  }
  100% {
	transform:translateY(0%);
  }
}

section:not(.active).next .contwrap > * {
	transform:translateY(-100%);
	animation: scldown2 1.2s ease-in;
}
section:not(.active).prev .contwrap > * {
	transform:translateY(100%);
	animation: sclup2 1.2s ease-in;
}

@keyframes scldown2 {
  0% {
	transform:translateY(0%);
  }
  40% {
	transform:translateY(-100%);
  }
}
@keyframes sclup2 {
  0% {
	transform:translateY(0%);
  }
  40% {
	transform:translateY(100%);
  }
}


.contbg1 {
	width:2px;
	height:100vh;
	background-color:#00AABC;
	position:fixed;
	top:0;
	left:10%;
	transform-origin:bottom center;
	transform:skewX(-31deg);
	z-index: -2;
}
.contbg1::before {
	content:'';
	display:block;
	width:1px;
	height:50vh;
	background-color:#00AABC;
	position:absolute;
	top:0;
	right:-30px;
}
.contbg2 {
	width:2px;
	height:100vh;
	background-color:#00AABC;
	position:fixed;
	top:0;
	right:10%;
	transform-origin:top center;
	transform:skewX(-31deg);
	z-index: -2;
}
.contbg2::before {
	content:'';
	display:block;
	width:1px;
	height:50vh;
	background-color:#00AABC;
	position:absolute;
	bottom:0;
	left:-30px;
}

/**MENU**/
body.loading .header .menu {
	display:none;
}
.header .menu {
	will-change: transform;
	position:fixed;
	z-index:10;
	left:-100%;
	top:0;
	width:100%;
	height:100%;
/* 	padding-top:200px; */
	box-sizing:border-box;
/* 	padding-right:40%; */
	overflow-y: auto;
	overflow-x:hidden;
    animation-delay:0s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.71,.04,.3,.97);
	display:grid;
	align-items:center;
}
.header .menu .menu_wrap {
	padding:1em 40% 1em 0;
}
.header .menu .mCustomScrollBox {
	width:100%;
	display:grid;
	align-items:center;
}
body.menuClose .header .menu {
    animation-name:menuClose;
}
body.menuOpen .header .menu {
	left:0;
    animation-delay:0s;
    animation-duration: .4s;
    animation-timing-function: cubic-bezier(.71,.04,.3,.97);
    animation-name:menuOpen;
}
@keyframes menuOpen {
    0% { left:-50%; }
    1% { left:-50%; }
    100% { left:0; }
}
@keyframes menuClose {
    0% { left:0; }
    99% { left:0%; }
    100% { left:-100%; }
}
.header .menu_bg {
	position:fixed;
	left:0;
	top:0;
	z-index:9;
}
.header .menu_bg::before {
	will-change: transform;
	content:'';
	display:block;
	width:100%;
	height:100%;
	background-color: rgb(128 202 127);
	position:fixed;
	left:-100%;
	opacity:0;
	top:0;
	transform-origin:left top;
	transform:translate3d(0,0,0);
	z-index:9;
}
body.menuClose .header .menu_bg::before {
    animation-delay:0s;
    animation-duration: 1s;
    left:-100%;
    opacity:0;
    animation-timing-function: cubic-bezier(.71,.04,.3,.97);
    animation-name:menubgClose;
}
body.menuOpen .header .menu_bg::before {
	left:calc(-40% + 250px);
    animation-delay:0s;
    animation-duration: .4s;
	opacity:1;
    animation-timing-function: cubic-bezier(.71,.04,.3,.97);
    animation-name:menubgOpen;
}
@keyframes menubgOpen {
    0% {left:calc(-100%);opacity:0; }
    100% { left:calc(-40% + 250px);opacity:1; }
}
@keyframes menubgClose {
    0% { left:calc(-40% + 250px);opacity:1; }
    30% { left:calc(-40% + 250px);opacity:1; }
    100% {left:-100%; opacity:0; }
}
.header .menu_bg::after {
	will-change: transform;
	content:'';
	display:block;
	width:170px;
	height:126px;
	background: url(/dcms_media/image/menu-bg.png) no-repeat center center/contain;
	position:fixed;
	left:0;
	top:0;
	z-index:9;
}

body:not(.menuOpen).move .header .menu_bg {
	opacity:0;
    animation-delay:0s;
    animation-duration: .2s;
    animation-timing-function: ease-in-out;
    animation-name:pagemove;
}
@keyframes pagemove {
    0% { opacity:1; }
    100% { opacity:0; }
}
body:not(.menuOpen).stay .header .menu_bg {
	opacity:1;
    animation-delay:0s;
    animation-duration: .2s;
    animation-timing-function: ease-in-out;
    animation-name:pagestay;
}
@keyframes pagestay {
    0% { opacity:0; }
    100% { opacity:1; }
}


.header .menubg  {
	will-change: transform;
	width:100%;
	height:100%;
	background-color:#000000;
	position:fixed;
	right:-100vw;
	transition:1s;
	top:0;
	opacity:0;
	transform-origin:right bottom;
	z-index:8;
	transition-timing-function:cubic-bezier(.71,.04,.3,.97);
	transition-delay:0s;
	transition-duration:1s;
	/* transform:skewX(-31deg); */
	overflow:hidden;
}
.header .menubg::before {
	content:'';
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	transform-origin:right bottom;
}
body.menuOpen .header .menubg {
	right:0;
	opacity:1;
}

.header .spbtn {
	will-change: transform;
	width:40px;
	height:40px;
	position:fixed;
	top:30px;
	left:25px;
	cursor:pointer;
	z-index:11;
}
.header .spbtn > .mbar {
	width:40px;
	height:30px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.header .spbtn > .mbar::before {
	content:'';
	display:block;
	width:100%;
	height:2px;
	position:absolute;
	top:0;
	left:0;
	background-color:#ffffff;
	transition-timing-function:ease-in-out;
	transition:.5s;
}
.header .spbtn > .mbar::after {
	content:'';
	display:block;
	width:100%;
	height:2px;
	position:absolute;
	bottom:0;
	right:0;
	background-color:#ffffff;
	transition-timing-function:ease-in-out;
	transition:.5s;
}
.header .spbtn > .mbar span {
	display:block;
	width:100%;
	height:2px;
	position:absolute;
	top:calc(50% - 1px);
	right:0;
	background-color:#ffffff;
	transition-timing-function:ease-in-out;
	transition:.5s;
}
.header .spbtn > .txt {
	font-size:18px;
	font-family: 'Bebas Neue', "Noto Sans JP",sans-serif;
	letter-spacing:.05em;
	display:block;
	width:40px;
	height:1em;
	overflow:hidden;
	text-align:center;
	position:absolute;
	left:0;
	bottom:-1.5em;
	color:#ffffff;
}
.header .spbtn > .txt span {
	display:block;
	line-height:1;
	position:absolute;
	width:100%;
	left:0;
	transition-timing-function:ease-in-out;
	transition:.5s;
}
.header .spbtn > .txt .open {
	top:0;
}
.header .spbtn > .txt .closed {
	top:-1em;
}
body.menuOpen .header .spbtn > .txt .open {
	top:1em;
}
body.menuOpen .header .spbtn > .txt .closed {
	top:0;
}
body.menuOpen .header .spbtn > .mbar::before {
	transform:translateY(14px) rotate(45deg);
}
body.menuOpen .header .spbtn > .mbar::after {
	transform:translateY(-14px)rotate(-45deg);
}
body.menuOpen .header .spbtn > .mbar span {
	opacity:0;
}


.header .menu .hmenu {
	will-change: transform;
	position:relative;
	transform-origin:left top;
	display:grid;
	justify-items:end;
}
.header .menu .hmenu li {
	will-change: transform;
	position:relative;
	margin-bottom:25px;
	text-align:right;
	transform-origin:left top;
	width: auto;
}
.header .menu .hmenu li:last-child {
	margin-bottom:0;
}
.header .menu .hmenu li .menu-item {
	/* will-change: transform; */
	transition:.3s;
	transform-origin:right center;
	cursor:pointer;
	overflow:hidden;
	display:grid;
	grid-template-columns:auto auto;
	justify-content:end;
	text-decoration: none;
}
body:not(.menuOpen) .header .menu .hmenu li .menu-item span {
	will-change: transform;
	opacity:0;
	transform:translateY(-1.1em);
    animation-delay:0s;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
/*     animation-iteration-count: infinite; */
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(1) .menu-item span {
    animation-name:menuClose1;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(2) .menu-item span {
    animation-name:menuClose2;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(3) .menu-item span {
    animation-name:menuClose3;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(4) .menu-item span {
    animation-name:menuClose4;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(5) .menu-item span {
    animation-name:menuClose5;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(6) .menu-item span {
    animation-name:menuClose6;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(7) .menu-item span {
    animation-name:menuClose7;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(8) .menu-item span {
    animation-name:menuClose8;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(9) .menu-item span {
    animation-name:menuClose9;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(10) .menu-item span {
    animation-name:menuClose10;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(11) .menu-item span {
    animation-name:menuClose11;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(12) .menu-item span {
    animation-name:menuClose12;
}
body:not(.menuOpen) .header .menu .hmenu li:nth-child(13) .menu-item span {
    animation-name:menuClose13;
}

@keyframes menuClose1 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose2 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose3 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose4 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose5 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose6 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose7 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose8 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose9 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose10 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose11 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose12 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}
@keyframes menuClose13 {
    0% { transform:translateY(0); opacity:1; }
    100% { transform:translateY(0); opacity:0; }
}

body.menuOpen .header .menu .hmenu li .menu-item span {
	transform:translateY(0);
    animation-delay:0s;
    animation-duration: 1.3s;
    animation-timing-function: ease-in-out;
	opacity:1;
}
body.menuOpen .header .menu .hmenu li:nth-child(1) .menu-item span {
    animation-name:menuOpen1;
}
body.menuOpen .header .menu .hmenu li:nth-child(2) .menu-item span {
    animation-name:menuOpen2;
}
body.menuOpen .header .menu .hmenu li:nth-child(3) .menu-item span {
    animation-name:menuOpen3;
}
body.menuOpen .header .menu .hmenu li:nth-child(4) .menu-item span {
    animation-name:menuOpen4;
}
body.menuOpen .header .menu .hmenu li:nth-child(5) .menu-item span {
    animation-name:menuOpen5;
}
body.menuOpen .header .menu .hmenu li:nth-child(6) .menu-item span {
    animation-name:menuOpen6;
}
body.menuOpen .header .menu .hmenu li:nth-child(7) .menu-item span {
    animation-name:menuOpen7;
}
body.menuOpen .header .menu .hmenu li:nth-child(8) .menu-item span {
    animation-name:menuOpen8;
}
body.menuOpen .header .menu .hmenu li:nth-child(9) .menu-item span {
    animation-name:menuOpen9;
}
body.menuOpen .header .menu .hmenu li:nth-child(10) .menu-item span {
    animation-name:menuOpen10;
}
body.menuOpen .header .menu .hmenu li:nth-child(11) .menu-item span {
    animation-name:menuOpen11;
}
body.menuOpen .header .menu .hmenu li:nth-child(12) .menu-item span {
    animation-name:menuOpen12;
}
body.menuOpen .header .menu .hmenu li:nth-child(13) .menu-item span {
    animation-name:menuOpen13;
}
@keyframes menuOpen1 {
    0% { transform:translateY(1.5em); }
    60% { transform:translateY(1.5em); opacity:0; }
    100% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen2 {
    0% { transform:translateY(1.5em); }
    55.5% { transform:translateY(1.5em); opacity:0; }
    95.5% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen3 {
    0% { transform:translateY(1.5em); }
    51% { transform:translateY(1.5em); opacity:0; }
    91% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen4 {
    0% { transform:translateY(1.5em); }
    46.5% { transform:translateY(1.5em); opacity:0; }
    86.5% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen5 {
    0% { transform:translateY(1.5em); }
    42% { transform:translateY(1.5em); opacity:0; }
    82% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen6 {
    0% { transform:translateY(1.5em); }
    37.5% { transform:translateY(1.5em); opacity:0; }
    77.5% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen7 {
    0% { transform:translateY(1.5em); }
    33% { transform:translateY(1.5em); opacity:0; }
    73% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen8 {
    0% { transform:translateY(1.5em); }
    28.5% { transform:translateY(1.5em); opacity:0; }
    68.5% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen9 {
    0% { transform:translateY(1.5em); }
    24% { transform:translateY(1.5em); opacity:0; }
    64% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen10 {
    0% { transform:translateY(1.5em); }
    19.5% { transform:translateY(1.5em); opacity:0; }
    59.5% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen11 {
    0% { transform:translateY(1.5em); }
    15% { transform:translateY(1.5em); opacity:0; }
    55% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen12 {
    0% { transform:translateY(1.5em); }
    7.5% { transform:translateY(1.5em); opacity:0; }
    47.5% { transform:translateY(0);	opacity:1; }
}
@keyframes menuOpen13 {
    0% { transform:translateY(1.5em); }
    0% { transform:translateY(1.5em); opacity:0; }
    40% { transform:translateY(0);	opacity:1; }
}



.header .menu .hmenu li .menu-item.active {
	transform:scale(2.2);
}
.header .menu .hmenu li span:not(.bar) {
	font-family: 'Bebas Neue', "Noto Sans JP",sans-serif;
	color:#FFFFFF;
	font-size:18px;
	letter-spacing:.15em;
	line-height:1.2;
}
.header .menu .hmenu li span:not(.bar) span:first-child {
	font-size:.875em;
	letter-spacing:.1em;
	margin-right:1em;
}
.header .menu .hmenu li .bar {
	will-change: transform;
	display:block;
	width:150px;
	height:1px;
	background:#FFFFFF;
	position:absolute;
	right:-180px;
	opacity:0;
	top:50%;
	transition:.5s;
	transform-origin:left center;
	transform:scaleX(0) translateX(-30px);
}

body.menuOpen .header .menu .hmenu li .menu-item.active + .bar {
	transform:scaleX(1) translateX(0);
	opacity:1;
    animation-delay:0;
    animation-name:barshow;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
}
@keyframes barshow {
    0% { transform:scaleX(0) translateX(-30px); }
    66% { transform:scaleX(0) translateX(-30px); }
    100% { transform:scaleX(1) translateX(0); }
}
body:not(.menuOpen) .header .menu .hmenu li .menu-item.active + .bar {
	transform:scaleX(0) translateX(-30px);
    animation-delay:0s;
    animation-name:barhide;
    animation-duration: .51s;
    animation-timing-function: ease-in-out;
}
@keyframes barhide {
    0% { transform:scaleX(1) translateX(0); }
    100% { transform:scaleX(0) translateX(-30px); }
}

body.menuOpen .header .menu .hmenu li .menu-item:not(.active):hover + .bar {
	transform:scaleX(1) translateX(0);
	opacity:1;
}

body.menuOpen #mCSB_1_scrollbar_vertical {
	opacity:1;
    animation-delay:0s;
    animation-name:sbhide;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
}
@keyframes sbhide {
    0% { opacity:0; }
    50% { opacity:0; }
    100% { opacity:1; }
}
body.menuClose #mCSB_1_scrollbar_vertical {
	opacity:0;
}

@media screen and (max-width:1200px){
	
.header .menu .hmenu li {
    margin-bottom: 22px;
}
.header .menu .hmenu li span:not(.bar) {
    font-size: 16px;
}

}


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

.wrap .contents {
	padding:60px;
}
.wrap .contents .contwrap.tit {
	font-size:80px;
}
.wrap .contents h2 .jp {
	font-size:20px;
}
#dcms_layoutPageBlockPasteArea .wrap .contents p.body {
	font-size:40px;
}
#dcms_layoutPageBlockPasteArea .wrap .contents p {
	font-size:15px;
}
.contents a.btn {
	width:250px;
	height:50px;
}
.contents .btnwrap {
	grid-template-columns:repeat(auto-fill,250px);
}

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

.header .menu .menu_wrap {
    padding: 1em 30% 1em 0;
}
body.menuOpen .header .menu_bg::before {
	left:0;
}
@keyframes menubgOpen {
    0% {left:-100%;opacity:0; }
    100% {left:0;opacity:1; }
}
@keyframes menubgClose {
    0% { left:0;opacity:1; }
    30% { left:0;opacity:1; }
    100% {left:-100%;opacity:0; }
}
.header .menu .hmenu li .menu-item.active {
    transform: scale(1.4);
}
.header .menu .hmenu li {
	/* margin-bottom: 30px; */
}

.header .menubg {
	display:none;
}

.wrap .contents {
	padding:20px;
}
.wrap .contents .contwrap.tit {
	font-size: 60px;
	margin-bottom: .3em;
}
.wrap .contents h2 .jp {
	font-size: 20px;
	margin-top: -1em;
}
#dcms_layoutPageBlockPasteArea .wrap .contents p.body {
	font-size: 30px;
}
.wrap .contents .text {
	margin-bottom:5vw;
}
#dcms_layoutPageBlockPasteArea .wrap .contents p {
	font-size:14px;
	line-height:1.7;
}
.contents a.btn {
	font-size:14px;
	width:210px;
	height:45px;
	border-radius:2em;
	transition:0s;
}
.contents a.btn:hover {
	background-color: #FFFFFF;
	color:#212529;
}
.contents .btnwrap {
	grid-template-columns:repeat(auto-fill,210px);
	grid-gap: 10px 10px;
}
	
}

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

.wrap .logo {
	width:min(calc(100% - 150px),240px);
	right:20px;
	top:15px;
}

.header .menu .menu_wrap {
    padding: 1em 100px 1em 0;
}
.header .menu_bg::before {
	width:100%;
}
body.menuOpen .header .menu_bg::before {
	transition-delay:0s;
	left:0;
}
@keyframes menubgOpen {
    0% {left:-100%;opacity: 0; }
    100% {left:0;opacity: 1; }
}
@keyframes menubgClose {
    0% { left:0;opacity: 1; }
    30% { left:0;opacity: 1; }
    100% {left:-100%;opacity: 0; }
}
.header .menu_bg::after {
	width:90px;
	height:67px;
	top:5px;
}
	
.header .spbtn {
	width:26px;
	height:26px;
	top:20px;
	left:10px;
}
.header .spbtn > .mbar {
	width:26px;
	height:20px;
}
.header .spbtn > .txt {
	font-size:12px;
	width:26px;
	bottom: -1.25em;
}
body.menuOpen .header .spbtn > .mbar::before {
	transform:translateY(9px) rotate(45deg);
}
body.menuOpen .header .spbtn > .mbar::after {
	transform:translateY(-9px)rotate(-45deg);
}
body.menuOpen .header .spbtn > .mbar span {
	opacity:0;
}

.header .menu .hmenu li {
	margin-bottom:20px;
}

.header .menu .hmenu li .menu-item.active {
	transform:scale(1.5);
}
.header .menu .hmenu li span:not(.bar) {
	font-size:15px;
	letter-spacing:.1em;
}
.header .menu .hmenu li span:not(.bar) span:first-child {
	margin-right:.75em;
}
.header .menu .hmenu li .bar {
	display:block;
	width:80px;
	height:1px;
	background:#FFFFFF;
	position:absolute;
	right:-120px;
	top:50%;
	transition:.5s;
	transform-origin:left center;
	transform:scaleX(0) translateX(-30px);
}

body.menuOpen .header .menu .hmenu li .menu-item.active + .bar {
	transform:scaleX(1) translateX(-30px);
}
@keyframes barshow {
    0% { transform:scaleX(0) translateX(-30px); }
    66% { transform:scaleX(0) translateX(-30px); }
    100% { transform:scaleX(1) translateX(-30px); }
}
@keyframes barhide {
    0% { transform:scaleX(1) translateX(-50px); }
    100% { transform:scaleX(0) translateX(-30px); }
}

}

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

}

@media (max-width: 768px) {

}