/**************************************** コンテンツ設定 ****************************************/
html,body {font-size:0.9vw;margin:0;padding:0;background:#000;}
body {font-family: "Roboto","Noto Sans Japanese","Helvetica",sans-serif;}
div,h1,h2,h3,h4,ul,li,dl,dt,dd,img {margin:0px; padding: 0px;}
ul {list-style: none; margin: 0px; padding:0px;}
p {margin: 0px; padding: 0px;}
a,a:visited {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: underline;}
a img {border-style:none;}
input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
* {box-sizing:border-box;}
/*SP*/
@media (max-width: 896px){
	html,body {font-size:3.5vw;}
}

/*共通*/
@media (max-width: 896px){ .pc {display:none !important;} }
@media (min-width: 897px){ .sp {display:none !important;} }

/*PCの場合*/
@media (min-width: 897px){
}
@media (min-width: 1200px){
}


/*横の場合*/
@media screen and (orientation: landscape) {
}
/*縦の場合*/
@media screen and (orientation: portrait) {
}

/*パソコン設定*/
@media (min-width: 897px){
.col {}
.collist {display:flex; flex-wrap:wrap;}
.collist .inner {justify-content:space-between;}
.col .inner {float:left;}
.col .inner.right {float:right;}
.col2 .inner {width:50%;} .col3 .inner {width:33.3%;} .col4 .inner {width:25%;} .col5 .inner {width:20%;}
.col6 .inner {width:16.6%;} .col7 .inner {width:14.2%;} .col8 .inner {width:12.5%;} .col9 .inner {width:11.1%;} .col10 .inner {width:10%;}

	/*横の場合*/
	@media screen and (orientation: landscape) {
	}
	/*縦の場合*/
	@media screen and (orientation: portrait) {
	}
}
section {}
.contentarea {padding:7vw 5vw;}
.content {width:65vw;max-width:100%;margin:0px auto;}
.content.wide {width:90vw;}
a.btn, span.btn {font-size:1.0rem;padding:1em 3em;border-radius:2rem;
	display:inline-block;text-decoration:none;background:#fff;border:solid #000 2px;color:#000;cursor:pointer;}
a.btn:hover, span.btn:hover {font-weight:bold;background:#000;color:#fff;border:solid #fff 2px;text-decoration:none;}

a.btn2, span.btn2 {font-size:1.0rem;padding:1em 3em;position:relative;background:#000;
	background:linear-gradient(90deg,#000,#112,#000);
	box-shadow:0 0 1rem #111;
	display:inline-block;text-decoration:none;color:#fff;cursor:pointer;}
a.btn2.on, span.btn2.on {box-shadow:0 0 1rem rgba(255,255,255,0.3);transition:1s;}
a.btn2:hover, span.btn2:hover {box-shadow:0 0 1rem rgba(255,255,255,0.7);color:#fff;text-decoration:none;transition:0.6s;}

/*SP*/
@media (max-width: 896px){
	.contentarea {padding:15vw 5vw;}
	.content {width:100%;}
}


/*inview設定*/
.inview {opacity:0;transform:translateY(5vw);}
.inview.active {opacity:1;transform:translateY(0px);transition:1s;}
.inviewfade {opacity:0;}
.inviewfade.active {opacity:1;transition:1s;}
.inviewleft {opacity:0;transform:translateX(-5vw);}
.inviewleft.active {opacity:1;transform:translateX(0vw);transition:1s;}
.inviewright {opacity:0;transform:translateX(5vw);}
.inviewright.active {opacity:1;transform:translateX(0vw);transition:1s;}
.inviewdown {opacity:0;transform:translateY(-5vw);}
.inviewdown.active {opacity:1;transform:translateY(0px);transition:1s;}
.clear {clear:both; }
/*SP*/
@media (max-width: 896px){
	.inviewleft {transform:translateX(0px) translateY(100px);}
	.inviewleft.active {transform:translateX(0px) translateY(0px);}
	.inviewright {transform:translateX(0px) translateY(100px);}
	.inviewright.active {transform:translateX(0px) translateY(0px);}
	.inviewdown {transform:translateY(100px);}
	.inviewdown.active {transform:translateY(0px);}
}

/**************************************** ヘッダー設定 ****************************************/
.globalmenu {position:fixed;top:1vh;right:1vh;width:8vh;height:8vh;z-index:8000;}
.globalmenu video {height:100%;width:100%;object-fit:cover;cursor:pointer;}
.globalmenu img {height:100%;width:100%;object-fit:cover;cursor:pointer;}

.menuwrap {position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:9000;display:flex;flex-wrap:wrap;
	padding:3rem;flex-direction:row-reverse;
transform:translateX(150vw) translateY(30vh) rotate(-45deg);filter:blur(3rem);opacity:0;transition:0.2s;}
.menuwrap.on {transform:translateX(0vw) translateY(0vh) rotate(0deg);filter:blur(0rem);opacity:1;transition:0.4s;}
.menuwrap .menuimage {position:absolute;top:3rem;right:3rem;}
.menuwrap img.menulogo {height:3vw;width:auto;margin-right:8rem;}
.menuwrap img.close {width:3vw;height:3vw;}
.menuwrap .menubox {display:flex;flex-wrap:wrap;}
.menuwrap .menubox1 {width:68%;}
	.menuwrap .menubox .menu {width:33.3333%;padding:0.2rem;}
	.menuwrap .menubox .menu.menu01 {width:66.6666%;}
	.menuwrap .menubox .menu.menu02 {}
	.menuwrap .menubox .menu .image {height:32vh;width:100%;background-color:#333;margin-bottom:0.5rem;background-repeat:no-repeat;background-position:center center;background-size:cover;}
	.menuwrap .menubox .menu.menu01 .image {background-image:url(../img/cmn/menuimg01.jpg);}
	.menuwrap .menubox .menu.menu02 .image {background-image:url(../img/cmn/menuimg02.jpg);}
	.menuwrap .menubox .menu.menu03 .image {background-image:url(../img/cmn/menuimg03.jpg);}
	.menuwrap .menubox .menu.menu04 .image {background-image:url(../img/cmn/menuimg04.jpg);}
	.menuwrap .menubox .menu.menu05 .image {background-image:url(../img/cmn/menuimg05.jpg);}
	.menuwrap .menubox .menu .text {color:#fff;font-size:1.2rem; }
.menuwrap .menubox2 {width:32%;padding-top:5vw;}
	.menuwrap ul {width:80%;text-align:left;margin-left:20%;}
	.menuwrap li {font-size:1.4rem;line-height:2.8em;color:#fff;position:relative;margin-bottom:1rem;
	border:solid #fff 1px;border-radius:0.4rem;}
	.menuwrap li a {color:#fff;display:block;width:100%;height:100%;padding-left:5rem;
	background:url(../img/cmn/menuicon.svg) no-repeat left 1rem center; background-size:2em;}
	.menuwrap li a:hover {color:#000;text-decoration:none;background:#fff url(../img/cmn/menuicon2.svg) no-repeat left 1rem center;background-size:2em;}

/*SP*/
@media (max-width: 896px){
	.menuwrap {display:block;overflow:scroll;}
	.menuwrap .menuimage {top:1rem;right:1rem;width:100%;text-align:right;}
	.menuwrap img.menulogo {position:absolute;top:0;left:50%;transform:translateX(-50%);height:10vw; }
	.menuwrap img.close {width:10vw;height:auto; }
	.menuwrap .menubox1 {width:100%;padding-top:10vw;display:block;}
	.menuwrap .menubox2 {width:100%;padding-top:15vw;}
	.menuwrap ul {margin-left:0;width:100%;}
	.menuwrap .menubox .menu {width:100%;padding:0 0 1.5rem 0;}
	.menuwrap .menubox .menu.menu01 {width:100%;}
	.menuwrap .menubox .menu .image {height:38vw;}
	.menuwrap .menubox .menu .text {font-size:1rem;}
}



/***************************************** フッター *****************************************/
.ctaarea {text-align:center;background:#000;padding:5vw 0vw;}
.ctaarea h3 {font-size:3rem;color:#fff;margin-bottom:0.3em; }
.ctaarea p {font-size:1.4rem;color:#fff;margin-bottom:3em;}
.ctaarea a {}

.footerwrap {display:flex;flex-wrap:wrap;padding:20vh 5vw 0 5vw;}
.footermenu {width:80%;text-align:left;}
.footermenu li {display:inline-block;}
.footermenu a {font-size:0.9rem;color:#fff;display:inline-block;padding:1em;}
.copyright {width:20%;position:relative;}
.copyright span {font-size:0.9rem;color:#fff;
position:absolute;bottom:1rem;right:0px;}
/*SP*/
@media (max-width: 896px){
	.ctaarea {padding:15vw 10vw;text-align:left;}
	.ctaarea h3 {font-size:1.6rem;}
	.ctaarea p {font-size:1.0rem;}
	.ctaarea a.btn {width:80%;text-align:center;}

	.footerwrap {display:block;padding:20vh 0vw 0 0vw;}
	.footermenu {width:100%;}
	.footermenu ul {display:flex;flex-wrap:wrap;}
	.footermenu li {display:block;width:50%;}
	.footermenu a {padding:1rem 1.5rem 1rem 0rem;}
	.copyright {width:100%;padding-top:10vh; }
	.copyright span {position:relative;bottom:auto;right:auto;}
}