@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:display=swap);
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://use.fontawesome.com/releases/v5.13.0/css/all.css);
@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans:ital@1&display=swap);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,th,td{margin:0;padding:0;}
p{margin-bottom: 0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

html{scroll-behavior: smooth;}

body{
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #fff;
	background: #000;
}

a{
	color: #fff;
	text-decoration: none;
}
.margin_area_small{
	height: 20px;
}
.margin_area_medium{
	height: 50px;
}
.margin_area_big{
	height: 80px;
}

a:hover, .active{
    text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}

.font_style h3{
	font-size: 2.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
}

.font_style_en h3{
	font-size: 2.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
}

.place_block_center{
	display: grid;
	place-content: center;
	place-items: center;
}

.place_inline_center{
	text-align: center;
}

/* ヘッダー
------------------------------------------------------------*/
:root{
	--headerimgheight: 630px;
}

#mainnav a{
	color: #fff;
}

#mainImg{
	position: relative;
	width: 100%;
	height: 100svh;
	z-index: -100;
}
#mainImg2{
	position: relative;
	width: 100%;
	height: 50vh;
	margin: auto;
	z-index: -100;
}
#mainVideo{
	position: relative;
	margin: 0 auto;
	display: block;
	width: 80vw;
	aspect-ratio: 1920/1080;
}
#eventLogo{
	position: relative;
	height: 130px;
	aspect-ratio: 64/33;
	margin: 0 auto 20px;
}

.topSlide-slide{
	z-index: -100;
}
#mainImg .topSlide-slide__img{
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: 100svh;
}
#mainImg2 img{
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: 70vh;
}
#mainVideo .inner-mainvideo, #mainVideo object, #mainVideo embed{
	position: absolute;
	object-fit: contain;
	top: 0;
	left: 0;
}
#eventLogo img{
	position: absolute;
	object-fit: cover;
}

/* fontstyle */
.colorgreen{
	color: rgb(162, 255, 22);
	transition: all .5s;
}
.colorred{
	color: rgb(255, 54, 121);
	transition: all .5s;
}
.colorpink{
	color: #ff38d1;
}
.colorblue{
	color: #1DA1F2;
}
.colorblack{
	color: rgba(255, 255, 255, 0);
	transition: all .5s;
}
.coloryellow{
	color: #ffd52c;
}

.colorblack:hover{
	filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
}
.colorgreen:hover{
	filter: drop-shadow(0px 0px 8px rgba(162, 255, 22, 1));
}
.colorred:hover{
	filter: drop-shadow(0px 0px 8px rgba(255, 54, 121, 1));
}


/* 前のページに戻るボタン */
.container_button_language{
	position: fixed;
	top: 15px;
	right: 15px;
	display: block;
	place-content: center;
	place-items: center;
	margin: 0 auto;
	text-align: center;
}
.container_button_language a{
	display: inline-block;
	width: 140px;
	padding: 10px;
	border:#fff 1px solid;
	border-radius: 30px;
	background-color: transparent;
	color: #fff;
	text-decoration: none;
	transition: 0.8s;
}
.container_button_language a::before{
	display: inline-block;
	content: "";
	width: 10px;
	height: 10px;
	border-right: 0.15rem solid #fff;
	border-bottom: 0.15rem solid #fff;
	-webkit-transform: translate(-20px) rotate(-45deg);
	transform: translate(-20px) rotate(-45deg);
}
.container_button_language a:hover{
	background-color: rgba(71, 71, 71, 0.531);
	border:transparent 1px solid;
	transition: 0.35s;
	transform: scale(1.1);
}

@media (max-width: 599px){
	.container_button_language{
		top: 15px;
		right: 15px;
	}
}
@media (min-width: 600px) and (max-width: 1024px){
	.container_button_language{
		top: 35px;
		right: 35px;
	}
}
@media (min-width: 1025px){
	.container_button_language{
		top: 40px;
		right: 40px;
	}
}

.titlestyle{
	font-family: 'Roboto', sans-serif;
	font-style: italic;
	font-weight: 700;
	background: #000;
}

.fontsize-catchcopy{
	font-size: 5rem;
}
.fontsize16{
	font-size: 1.6rem;
}
.fontsize-servicecolor{
	font-size: 4.0rem
}
.fontsize18{
	font-size: 1.8rem;
	font-weight: 700;
}
.fontsize-servicewhite{
	font-size: 2.2rem;
}

.stroke{
	-webkit-text-stroke: 0.1rem #FFF;
	text-stroke: 0.1rem #FFF;
}
/* //fontstyle */

.paddingtop50{
	padding-top: 50px;
}

.service_message{
	line-height: 3.5rem;
	padding-bottom: 30px;
}


/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 50px 10px 50px 0;
	margin-top: 20px;
	text-align: center;
	font-size: 12px;
}

/* 改行設定
------------------------------------------------------------*/
@media screen and (min-width: 0px){
	.br-1400 {display: none; }
	.br-1200 {display: none; }
	.br-1000 {display: none; }
	.br-800 {display: none; }
	.br-600 {display: none; }
	.br-400 {display: none; }
	.br-0 {display: block; }

	.bk-0 {display: inline; }
	.bk-400 {display: none; }
	.bk-600 {display: none; }
}

@media screen and (min-width: 400px){
	.br-1400 {display: none; }
	.br-1200 {display: none; }
	.br-1000 {display: none; }
	.br-800 {display: none; }
	.br-600 {display: none; }
	.br-400 {display: block; }
	.br-0 {display: none; }

	.bk-0 {display: none; }
	.bk-400 {display: inline; }
	.bk-600 {display: none; }
	.ov3_inner{
		left: 0px;
	}
}

@media screen and (min-width: 600px){
	.br-1400 {display: none; }
	.br-1200 {display: none; }
	.br-1000 {display: none; }
	.br-800 {display: none; }
	.br-600 {display: block; }
	.br-400 {display: none; }
	.br-0 {display: none; }

	.bk-0 {display: none; }
	.bk-400 {display: none; }
	.bk-600 {display: inline; }
	.ov3_inner{
		left: 0px;
	}
}

@media screen and (min-width: 800px){
	.br-1400 {display: none; }
	.br-1200 {display: none; }
	.br-1000 {display: none; }
	.br-800 {display: block; }
	.br-600 {display: none; }
	.br-400 {display: none; }
	.br-0 {display: none; }

	.bk-0 {display: none; }
	.bk-400 {display: none; }
	.bk-600 {display: none; }
	.ov3_inner{
		left: 20px;
	}
}

@media screen and (min-width: 1000px){
	.br-1400 {display: none; }
	.br-1200 {display: none; }
	.br-1000 {display: block; }
	.br-800 {display: none; }
	.br-600 {display: none; }
	.br-400 {display: none; }
	.br-0 {display: none; }

	.bk-0 {display: none; }
	.bk-400 {display: none; }
	.bk-600 {display: none; }
	.ov3_inner{
		left: 20px;
	}
}

@media screen and (min-width: 1200px){
	.br-1400 {display: none; }
	.br-1200 {display: block; }
	.br-1000 {display: none; }
	.br-800 {display: none; }
	.br-600 {display: none; }
	.br-400 {display: none; }
	.br-0 {display: none; }

	.bk-0 {display: none; }
	.bk-400 {display: none; }
	.bk-600 {display: none; }
	.ov3_inner{
		left: 10px;
	}
}

@media screen and (min-width: 1400px){
	.br-1400 {display: block; }
	.br-1200 {display: none; }
	.br-1000 {display: none; }
	.br-800 {display: none; }
	.br-600 {display: none; }
	.br-400 {display: none; }
	.br-0 {display: none; }

	.bk-0 {display: none; }
	.bk-400 {display: none; }
	.bk-600 {display: none; }
	.ov3_inner{
		left: 30px;
	}
}

/* 文章改行設定---------------------------------- */
@media (max-width: 599px){
	p{
		text-align: left;
		margin-top: 2rem;
		margin-left: 2rem;
		margin-right: 2rem;
	}
	.br-sp{
		display: block;
	}
	.br-tab{
		display: none;
	}
	br{
		display: none;
	}
}
@media (min-width: 600px) and (max-width: 1024px){
	p{
		text-align: center;
	}
	.br-sp{
		display: none;
	}
	.br-tab{
		display: block;
	}
	br{
		display: none;
	}
}
@media (min-width: 1025px){
	.br-sp{
		display: none;
	}
	.br-tab{
		display: none;
	}
}


/* 共通
------------------------------------------------------------*/
.scroll{
	position: fixed;
	display: flex;
	z-index: 5;
	width: 150px;
	height: 30px;
	bottom: 0;
	right: 0;
	padding-top: 10px;
	padding-right: 10px;
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transition: 0.5s;
	transform: translate(40%,-10vh) rotate(90deg);
}
.hide{
	opacity: 0;
	visibility: hidden;
	transition: 0.5s;
}
.scroll a{
	text-decoration: none;
}
#display{
	display: flex;
}
.scroll-arrow-box{
	display: flex;
	width:10%;
	height: 60px;
	position: relative;
	transform: translate(40px,-18px) rotate(-90deg);
} 
.scroll-arrow-box:before{
	content: '';
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 20px;
}
/* スクロール矢印 */
/*スクロールダウン全体の場所*/
.side-scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position: absolute;
	top:0%;
	left:0%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove-side 2s ease-in-out infinite;
}
/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove-side{
	0%{bottom:0rem;}
	50%{bottom:1rem;}
	100%{bottom:0rem;}
}
/* 矢印の描写 */
.side-scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #eee;
    transform: skewX(-31deg);
}
.side-scrolldown:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom: 0;
	right: 0;
    /*矢印の形状*/
	width:1px;
	height: 50px;
	background:#eee;
}

img{
	max-width: 100%;
	height: auto;
}

.header-logo{
	position: absolute;
	width: 100%;
	height: 100%;
}

.header-logo_img{
	position: absolute;/*fixedを設定して固定*/
	width: 300px;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}

section{
	clear:both;
	padding-top: 70px;
}

section h2{
	font-family: 'Roboto', sans-serif;
	font-style: italic;
	width: 80%;
	margin: 90px auto 20px;
	font-size: 2.5em;
	font-weight:normal;
	text-align: center;
	background: url(../img/borderWhite.png) repeat-x 0 50%;
	background-size: 1px 1px;
}

.titlepadding {
	padding: 0 70px;
}

.innerOverviewcol3{
	width: 70%;
	margin: 0 auto;
	/* padding-bottom: 50px; */
}

.innerContact{
	width: 100%;
	height: 700px;
}

.contact-click{
	font-family: 'Josefin Sans', sans-serif;
	font-style: italic;
}

.container-serviceimg-spmock{
	flex-grow: 0;
	width: 20%;
}

.title-case{
	font-size: 2.2rem;
	padding-top: 20px;
	padding-bottom: 8px;
}
@media screen and (max-width: 400px){
	.fontsize-catchcopy{
		font-size: 4.0rem;
	}
	.title-case{
		font-size: 1.7rem;
	}
}
.margintop-movie{
	margin-top: 50px;
}

/* arrow style -------------------------------------------*/

.container-serviceimg-arrow {
	position: relative;
	display: block;
	flex-grow: 0;
	margin: 0 auto;
	height: 10%;
	width: 10%;
	transform: rotate(-90deg);
}
.container-serviceimg-arrow .arrow {
	display: block;
	position: absolute;
	top: -16px;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	opacity: 0;
	box-sizing: border-box;
}
.container-serviceimg-arrow .arrow:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.container-serviceimg-arrow .arrow:nth-of-type(2) {
	top: 0px;
	-webkit-animation-delay: .15s;
	animation-delay: .15s;
}
.container-serviceimg-arrow .arrow:nth-of-type(3) {
	top: 16px;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}
@-webkit-keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* スクロール設定（共通）
------------------------------------------------------------*/
#stamp , #quiz , #tweet{
	display: block;
	margin-top: 5px;
	padding-top: -5px;
}

/* service-pictures
------------------------------------------------------------*/
.container-serviceimg{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	width: 55%;
	padding: 10px 0 10px;
	aspect-ratio: 20/9;
	object-fit: contain;
	left: 0;
	right: 0;
	margin: 0 auto;
}
@media only screen and (max-width: 1200px){
	.container-serviceimg{
		width: 70%;
	}
}
@media only screen and (max-width: 1000px){
	.container-serviceimg{
		width: 80%;
	}
}

.container-serviceimg-screen{
	flex-grow: 1;
	right: 0;
	height: 100%;
	margin: auto;
	z-index: 10;
}

.item-sp{
	display: flex;
	align-items: center;
	height: 100%;
	aspect-ratio: 1/2.1;
	margin: auto;
	max-width: 100%;
}

.innerMap{
	width: 80vw;
	aspect-ratio: 45/22;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.innerMap .item{
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
}

.container-serviceimg-arrow{
	transform: rotate(-90deg);
}

@media (max-width: 599px){
	.text_justify{
		margin: 0 auto;
		text-align: justify;
		text-justify: inter-word;
		width: 100%;
	}
}
@media (min-width: 600px){
	.text_justify{
		margin: 0 auto;
		text-align: center;
		width: 100%;
	}
}
.font_style{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	font-size: 1.4rem;
}

@media (max-width: 599px){
	.text_justify_en{
		margin: 0 auto;
		text-justify: inter-word;
		width: 100%;
	}
}
@media (min-width: 600px){
	.text_justify_en{
		margin: 0 auto;
		text-align: center;
		width: 100%;
	}
}
.font_style_en{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	font-size: 1.4rem;
}

.overview-3contents{
	padding-top: 5px;
	width: 80%;
	margin: 0 auto;
	padding-bottom: 80px;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	font-size: 1.4rem;
}
.ov3_inner{
	position: relative;
	display: inline-block;
	text-align: left;
}
.button_overview{
	font-family: 'Josefin Sans', sans-serif;
	text-align: center;
	padding: 0;
	margin: 0 auto;
	font-weight: bold;
}

/* SEC04 BRAND
------------------------------------------------------------*/
.col3{
	text-align: center;
}

.col3 .circle{
	display: block;
	margin-bottom: 40px;
	position: relative;
	border-radius: 50%;
	margin: 0 auto;
	width: 10vw;
	height: 10vw;
	line-height: 0 !important;
	transition: all .5s;
}
.circle:hover{
	transform: scale(1.1);
}

.col3 li{
	line-height: 2.0;
	text-align: center;
	margin: 0 auto;
	/* margin: 0 auto 40px; */
	font-size: 1.5rem;
	font-weight: normal;
	display: inline-block;
	width: 28%;
	padding: 0 2%;
	/* padding: 0 2% 50px; */
	vertical-align: top;
}

.col3 p{
	line-height: 2.2rem;
	margin-top: 25px;
}
.col3 span{
	line-height: 2.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

.bg_under_overview{
	background: url(../img/under_overview_v02.webp) no-repeat 100% 100% fixed;
	background-size: cover;
	-webkit-background-size: cover;
	background-position: center;
	text-align: center;
	padding: 100px 20px;
}

.bg_under_overview img{
	width: auto;
}

#sec04_02{
	background: url(../img/under_services_v02.webp) no-repeat 100% 100% fixed;
	background-size: cover;
	-webkit-background-size: cover;
	background-position: center;
	text-align: center;
	padding: 100px 20px;
}

#sec04_02 img{
	width: auto;
}

/* @media (min-width: 600px){
	.comingsoon{
		display: none;
	}
} */


/* SEC05 COMPANY
------------------------------------------------------------*/
#sec05 p{
	margin-bottom: 5px;
}

.col2 li{
	display: inline-block;
	width: 100%;
	margin: 20px 0;
}



/* button style */

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;/*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding: 1rem 4rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0s;
	transition: all 0s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	border-radius: 0.5rem;
}

a.btn-flat-demo {
	overflow: hidden;
	padding: 1.5rem 7.5rem;
	color: #fff;
	border-radius: 0;
	background: #000;
	border: 0.05rem solid #FF38D1;
}

a.btn-flat-demo:hover {
	color: #000;
	border: 0.05rem solid #fff20000;
}

a.btn-flat-demo span {
	position: relative;
	left: 0.5rem;
}

/* 斜め装飾デザイン */
a.btn-flat-demo:before {
	position: absolute;
	top: 0;
	left: 30px;
	width: 800px;
	height: 500px;
	content: '';
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	-webkit-transform: translateX(-600px) translateY(-80%) rotate(135deg);
	transform: translateX(-600px) translateY(-80%) rotate(135deg);
	background: #FF38D1;
}

a.btn-flat-demo:hover:before {
	-webkit-transform: translateX(-150px) translateY(-28.5%) rotate(135deg);
	transform: translateX(-150px) translateY(-28.5%) rotate(135deg);
}

/* ハートアイコン */
a.btn-custom-demo:after {
	font-family: "Font Awesome 5 Free";
	font-size: 2rem;
	font-weight: normal;
	line-height: 1;
	position: absolute;
	top: calc(50% - 1rem);
	left: 2.5rem;
	margin: 0;
	padding: 0;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	content: "\f004";
}

a.btn-custom-demo:hover:after {
	content: "\f004";	
	font-weight: 900;
}

a.btn-flat {
	overflow: hidden;
	padding: 1.5rem 7.5rem;
	color: #fff;
	border-radius: 0;
	background: #000;
	border: 0.05rem solid #fff100;
}

a.btn-flat:hover {
	color: #000;
	border: 0.05rem solid #fff20000;
}

a.btn-flat span {
	position: relative;
	left: 0.5rem;
}

/* 斜め装飾デザイン */
a.btn-flat:before {
	position: absolute;
	top: 0;
	left: 30px;
	width: 140%;
	height: 500%;
	content: '';
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	-webkit-transform: translateX(-82%) translateY(-80%) rotate(135deg);
	transform: translateX(-82%) translateY(-80%) rotate(135deg);
	background: #fff100;
}

a.btn-flat:hover:before {
	-webkit-transform: translateX(-17%) translateY(-23.5%) rotate(135deg);
	transform: translateX(-17%) translateY(-23.5%) rotate(135deg);
}

/* 封筒アイコン */
a.btn-custom01:after {
	font-family: "Font Awesome 5 Free";
	font-size: 2rem;
	font-weight: normal;
	line-height: 1;
	position: absolute;
	top: calc(50% - 1rem);
	left: 2.5rem;
	margin: 0;
	padding: 0;
	content: "\f0e0";
}

a.btn-custom01:hover:after {
	content: "\f2b6";
	-webkit-transform: translate(0rem, -0.2rem);
	transform: translate(0rem, -0.2rem);
	
}

/* 外部リンク矢印 */
@media (width < 600px){
	.btn-arrow{
		position: absolute;
		display: inline-block;
		content: '';
		right: 2rem;
		top: 22px;
		width: 10px;
		height: 10px;
		border-top: 3px solid #fff;
		border-right: 3px solid #fff;
		transform: rotate(45deg);
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
	}
}
@media (600px <= width < 1250px){
	.btn-arrow{
		position: absolute;
		display: inline-block;
		content: '';
		right: 2rem;
		top: 2.3rem;
		width: 10px;
		height: 10px;
		border-top: 3px solid #fff;
		border-right: 3px solid #fff;
		transform: rotate(45deg);
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
	}
}
@media (1250px <= width){
	.btn-arrow{
		position: absolute;
		display: inline-block;
		content: '';
		right: 2rem;
		top: 2.3rem;
		width: 10px;
		height: 10px;
		border-top: 3px solid #fff;
		border-right: 3px solid #fff;
		transform: rotate(45deg);
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
	}
}

a.btn-custom01:hover .btn-arrow{
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
a.btn-custom-demo:hover .btn-arrow{
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

/* お問い合わせ矢印 */
/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:100%;
	right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 2s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
	0%{bottom:0rem;}
	50%{bottom:1rem;}
	100%{bottom:0rem;}
}

/* 矢印の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 25px;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #eee;
    transform: skewX(-31deg);
}

.scrolldown:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:25px;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 50px;
	background:#eee;
}

.contact-arrow-box{
	width:100%;
	height: 100px;
	position: relative;
} 

.contact-arrow-box:before{
	content: '';
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 20px;
}

.copyright{
		clear: both;
		padding-bottom: 140px;
		text-align: center;
		font-size: 12px;
}

/* --------------------------------
スライドショーTOP
-------------------------------- */

/* ------ slide image ------- */
.topSlide-slide__img {
	animation-duration: 54s;
	animation-iteration-count: infinite;
	animation-name: slideAnimeTOP;
	animation-timing-function: ease;
	display: block;
	object-fit: cover;
	opacity: 0;
	height: 100%;
	filter: brightness(70%);
}

.topSlide-slide__item:nth-of-type(1) .topSlide-slide__img {
	animation-delay: 0s;
}

.topSlide-slide__item:nth-of-type(2) .topSlide-slide__img {
	animation-delay: 6s;
}

.topSlide-slide__item:nth-of-type(3) .topSlide-slide__img {
	animation-delay: 12s;
}

.topSlide-slide__item:nth-of-type(4) .topSlide-slide__img {
	animation-delay: 18s;
}

.topSlide-slide__item:nth-of-type(5) .topSlide-slide__img {
	animation-delay: 24s;
}

.topSlide-slide__item:nth-of-type(6) .topSlide-slide__img {
	animation-delay: 30s;
}

.topSlide-slide__item:nth-of-type(7) .topSlide-slide__img {
	animation-delay: 36s;
}

.topSlide-slide__item:nth-of-type(8) .topSlide-slide__img {
	animation-delay: 42s;
}

.topSlide-slide__item:nth-of-type(9) .topSlide-slide__img {
	animation-delay: 48s;
}

@keyframes slideAnimeTOP {
	0% {
		opacity: 0;
	}

	4% {
		opacity: 1;
	}

	11.11% {
		opacity: 1;
	}

	15.11% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

  /* ------ hero erea ------- */
.topSlide__inner {
	position: relative;
	margin: 0 auto;
	height: 100%;
	background-size: contain;
}
.topSlide-logo{
	z-index: 2;
	position: absolute;
	width: 300px;
	height: 100px;
}

.topSlide-slide__item {
	position: absolute;
	width: 100%;
	height: auto;
}

/* --------------------------------
スライドショーSTAMP Screen
-------------------------------- */

/* ------ slide image ------- */
.stampScreenSlide-slide__img {
	animation-duration: 18s;
	animation-iteration-count: infinite;
	animation-name: slideAnimeSTAMP;
	animation-timing-function: ease;
	display: block;
	opacity: 0;
	height: 100%;
	width: 100%;
}

.stampScreenSlide-slide__item:nth-of-type(1) .stampScreenSlide-slide__img {
	animation-delay: 0s;
}

.stampScreenSlide-slide__item:nth-of-type(2) .stampScreenSlide-slide__img {
	animation-delay: 9s;
}

@keyframes slideAnimeSTAMP {
	0% {
		opacity: 0;
	}

	4% {
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	54% {
		opacity: 0;
	}

	100%{
		opacity: 0;
	}
}

  /* ------ hero erea ------- */
.stampScreenSlide {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.stampScreenSlide-slide{
	height: 100%;
	width: 100%;
}

.stampScreenSlide-slide__item {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
}

/* --------------------------------
スライドショーTWEET sp
-------------------------------- */

/* ------ slide image ------- */
.tweetSlide-slide__img {
	animation-duration: 18s;
	animation-iteration-count: infinite;
	animation-name: slideAnimeTWEETsp;
	animation-timing-function: ease;
	display: block;
	object-fit: contain;
	opacity: 0;
	height: 100%;
	width:  100%;
}

.tweetSlide-slide__item:nth-of-type(1) .tweetSlide-slide__img {
	animation-delay: 0s;
}

.tweetSlide-slide__item:nth-of-type(2) .tweetSlide-slide__img {
	animation-delay: 9s;
}

@keyframes slideAnimeTWEETsp {
	0% {
		opacity: 0;
	}

	4% {
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	54% {
		opacity: 0;
	}

	100%{
		opacity: 0;
	}
}

  /* ------ hero erea ------- */
.tweetSlide {
	position: relative;
	height: 100%;
	width: 100%;
}

.tweetSlide-slide{
	height: 100%;
	width: 100%;
}

.tweetSlide-slide__item {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
}

/* --------------------------------
スライドショーTWEET Screen
-------------------------------- */
/* ------ slide image ------- */
.tweetScreenSlide-slide__img {
	animation-duration: 18s;
	animation-iteration-count: infinite;
	animation-name: slideAnimeTWEET;
	animation-timing-function: ease;
	display: block;
	object-fit: cover;
	opacity: 0;
	height: 100%;
	width: 100%;
}

.tweetScreenSlide-slide__item:nth-of-type(1) .tweetScreenSlide-slide__img {
	animation-delay: 0s;
}

.tweetScreenSlide-slide__item:nth-of-type(2) .tweetScreenSlide-slide__img {
	animation-delay: 6s;
}

.tweetScreenSlide-slide__item:nth-of-type(3) .tweetScreenSlide-slide__img {
	animation-delay: 12s;
}

@keyframes slideAnimeTWEET {
	0% {
		opacity: 0;
	}

	4% {
		opacity: 1;
	}

	33% {
		opacity: 1;
	}

	37% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

  /* ------ hero erea ------- */
.tweetScreenSlide {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.tweetScreenSlide-slide {
	height: 100%;
	width: 100%;
}

.tweetScreenSlide-slide__item {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
}

/* --------------------------------
スライドショーQUIZ sp
-------------------------------- */

/* ------ slide image ------- */
.quizSlide-slide__img {
	animation-duration: 36s;
	animation-iteration-count: infinite;
	animation-name: slideAnimeQUIZsp;
	animation-timing-function: ease;
	display: block;
	object-fit: contain;
	opacity: 0;
	height: 100%;
	width: 100%;
}

.quizSlide-slide__item:nth-of-type(1) .quizSlide-slide__img {
	animation-delay: 0s;
}

.quizSlide-slide__item:nth-of-type(2) .quizSlide-slide__img {
	animation-delay: 12s;
}

.quizSlide-slide__item:nth-of-type(3) .quizSlide-slide__img {
	animation-delay: 24s;
}

@keyframes slideAnimeQUIZsp {
	0% {
		opacity: 0;
	}

	4% {
		opacity: 1;
	}

	33% {
		opacity: 1;
	}

	37% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

  /* ------ hero erea ------- */
.quizSlide {
	position: relative;
	height: 100%;
	width: 100%;
}

.quizSlide-slide {
	height: 100%;
	width: 100%;
}

.quizSlide-slide__item {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
}


/* --------------------------------
スライドショーQUIZ Screen
-------------------------------- */

/* ------ slide image ------- */
.quizScreenSlide-slide__img {
	animation-duration: 36s;
	animation-iteration-count: infinite;
	animation-name: slideAnimeQUIZ;
	animation-timing-function: ease;
	display: block;
	object-fit: cover;
	opacity: 0;
	height: 100%;
	width: 100%;
}

.quizScreenSlide-slide__item:nth-of-type(1) .quizScreenSlide-slide__img {
	animation-delay: 0s;
}

.quizScreenSlide-slide__item:nth-of-type(2) .quizScreenSlide-slide__img {
	animation-delay: 6s;
}

.quizScreenSlide-slide__item:nth-of-type(3) .quizScreenSlide-slide__img {
	animation-delay: 12s;
}

.quizScreenSlide-slide__item:nth-of-type(4) .quizScreenSlide-slide__img {
	animation-delay: 18s;
}

.quizScreenSlide-slide__item:nth-of-type(5) .quizScreenSlide-slide__img {
	animation-delay: 24s;
}

.quizScreenSlide-slide__item:nth-of-type(6) .quizScreenSlide-slide__img {
	animation-delay: 30s;
}

@keyframes slideAnimeQUIZ {
	0% {
		opacity: 0;
	}

	4% {
		opacity: 1;
	}

	16.67% {
		opacity: 1;
	}

	20.67% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

  /* ------ hero erea ------- */
.quizScreenSlide {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.quizScreenSlide-slide {
	height: 100%;
	width: 100%;
}

.quizScreenSlide-slide__item {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
}


/* --------------------------------
スライドショーVisibby-map
-------------------------------- */

/* ------ slide image ------- */
.mapSlide-slide__img {
	animation-duration: 18s;
	animation-iteration-count: infinite;
	animation-name: slideAnimeMAP;
	animation-timing-function: ease;
	display: block;
	object-fit: contain;
	opacity: 0;
	height: 100%;
	width: 100%;
}

.mapSlide-slide__item:nth-of-type(1) .mapSlide-slide__img {
	animation-delay: 0s;
}

.mapSlide-slide__item:nth-of-type(2) .mapSlide-slide__img {
	animation-delay: 9s;
}

@keyframes slideAnimeMAP {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	60% {
		opacity: 0;
	}

	100%{
		opacity: 0;
	}
}

  /* ------ hero erea ------- */
.mapSlide {
	position: relative;
	width: 100%;
	height: 100%;
}

.mapSlide-slide {
	width: 100%;
	height: 100%;
}

.mapSlide-slide__item {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;

}



/* --------------------------------
スライドショーTB
-------------------------------- */

/* ------ slide image ------- */
.TBSlide-slide__img {
	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-name: slideAnimeTB;
	animation-timing-function: ease;
	display: block;
	object-fit: cover;
	opacity: 0;
	height: 100%;
}

.TBSlide-slide__item:nth-of-type(1) .TBSlide-slide__img {
	animation-delay: 0s;
}

.TBSlide-slide__item:nth-of-type(2) .TBSlide-slide__img {
	animation-delay: 6s;
}

.TBSlide-slide__item:nth-of-type(3) .TBSlide-slide__img {
	animation-delay: 12s;
}

.TBSlide-slide__item:nth-of-type(4) .TBSlide-slide__img {
	animation-delay: 18s;
}

.TBSlide-slide__item:nth-of-type(5) .TBSlide-slide__img {
	animation-delay: 24s;
}

.TBSlide-slide__item:nth-of-type(6) .TBSlide-slide__img {
	animation-delay: 30s;
}

.TBSlide-slide__item:nth-of-type(7) .TBSlide-slide__img {
	animation-delay: 36s;
}

.TBSlide-slide__item:nth-of-type(8) .TBSlide-slide__img {
	animation-delay: 42s;
}

.TBSlide-slide__item:nth-of-type(9) .TBSlide-slide__img {
	animation-delay: 48s;
}

.TBSlide-slide__item:nth-of-type(10) .TBSlide-slide__img {
	animation-delay: 54s;
}

@keyframes slideAnimeTB {
	0% {
		opacity: 0;
	}

	4% {
		opacity: 1;
	}

	10% {
		opacity: 1;
	}

	14% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

  /* ------ hero erea ------- */
.TBSlide {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	overflow: hidden;
}

.TBSlide__inner {
	position: relative;
	margin: 0 auto;
	width: 100vw;
	height: auto;
}

.TBSlide-slide__item {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
}

.container-video{
	position: relative;
	margin: 0 auto;
	display: block;
	width: 80vw;
	aspect-ratio: 16/9;
}
@media (max-width: 599px){
	.container-video{
		width: 100%;
	}
}
@media (min-width: 600px) and (max-width: 1024px){
	.container-video{
		width: 100%;
	}
}
@media (min-width: 1025px) and (max-width: 1399px){
	.container-video{
		width: 80%;
	}
}
@media (min-width: 1400px) and (max-width: 1919px){
	.container-video{
		width: 70%;
	}
}
@media (min-width: 1920px){
	.container-video{
		width: 60%;
	}
}


/* RESPONSIVE 設定
------------------------------------------------------------*/
/* PC
------------------------------------------------------------*/
@media only screen and (min-width: 1200px){
	.inner{
		width: 1024px;
	}
}

@media only screen and (min-width: 800px){
	body{
		font-size:14px;
	}

	a#menu{
		display:none;
	}

	.panel{
		display:block !important;
	}

	#mainnav li{
		display: inline-block;
		padding: 50px 25px;
		font-size: 15px;
	}


	#footer{
		padding: 30px 10px 70px 0;
	}
}

/* MOBILE 設定
------------------------------------------------------------*/
@media only screen and (min-width: 600px){
	.innerCatchcopy{
		width: 100%;
		margin: 0 auto;
		text-align: center;
		font-size: 3.5rem;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		padding-bottom: 20px;
		letter-spacing: 0.02em;
		line-height: 1.3em;
	}
	.titlepadding {
		padding: 0 60px;
	}
	section h2{
		font-family: 'Roboto', sans-serif;
		font-style: italic;
		width: 70%;
	}
}

@media only screen and (min-width: 800px){
	.innerCatchcopy{
		width: 85%;
		margin: 0 auto;
		text-align: center;
		font-size: 3.5rem;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		padding-bottom: 20px;
		letter-spacing: 0.02em;
		line-height: 1.3em;
	}
	section h2{
		font-family: 'Josefin Sans', sans-serif;
		width: 70%;
		background: url(../img/borderWhite.png) repeat-x 0 50%;
	}

	#header{
		display: none;
	}

}


/* //MOBILE/SMARTPHONE 設定 */

/* MOBILE/TABLET(iPad mini) 設定
------------------------------------------------------------*/
@media only screen and (max-width: 799px){


	/* 固定ヘッダー 設定
	------------------------------------------------------------*/
/*　下に下がる動き　*/
	#header{
		position: fixed;
		top:-100px;
		background-color: rgba(0, 0, 0, 0.5);
	}
	#header.fixed{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 70px;
		animation: DownAnime 0.5s forwards;
	}
	#header img{
		position: absolute;
		width: 150px;
		height: auto;
		padding-left: 4%;
		padding-top: 20%;
		padding-bottom: 20%;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	@keyframes DownAnime{
	from {
		opacity: 0;
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
	}

	/* --headerimgheight */
	:root{
		--headerimgheight: 100svh;
	}

	@media (max-width: 599px){
		:root{
			--headerimgheight: 100svh;
		}
	}
	@media (min-width: 600px) and (max-width: 1024px){
		:root{
			--headerimgheight: 100svh;
		}
	}
	@media (min-width: 1025px){
		:root{
			--headerimgheight: 100svh;
		}
	}

	#stamp , #quiz , #tweet{
		display: block;
		margin-top: -65px;
		padding-top: 65px;
	}

	#header h1{
		padding-top: 10px;
	}

	#header h1 img{
		position: absolute;
		top: 400px;
		margin-top: 3px;
		max-height: 45px;
		width: auto !important;
	}

	a#menu{
		display: inline-block;
		position: relative;
		width: 40px;
		height: 40px;
		margin: 10px;
	}

	#menuBtn{
		display: block;
		position: absolute;
		top: 60%;
		left: 50%;
		width: 18px;
		height: 2px;
		margin: -1px 0 0 -7px;
		background: #fff;
		transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 18px;
		height: 2px;
		background: #fff;
		transition: .3s;
	}

	#menuBtn:before{
		margin-top: -7px;
	}

	#menuBtn:after{
		margin-top: 5px;
	}

	a#menu .close{
		background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
		margin-top: 0;
	}

	a#menu .close:before{
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: 0;
		z-index: 100;
	}

	#mainnav{
		position: absolute;
		top: 0;
		width: 100%;
		text-align: right;
		z-index:500;
	}

	#mainnav ul{
		border-bottom: 1px solid #ccc;
		background: #000;
		text-align: left;
	}

	#mainnav li a{
		position: relative;
		display:block;
		padding:15px 25px;
		border-bottom: 1px solid #ccc;
		color: #fff;
		font-weight: 400;
	}

	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#mainImg{
		z-index: -100;
	}
	.mapSlide__inner{
		z-index: -100;
	}
	#mainVideo{
		width: 100vw;
	}


	.col3{
		margin: auto;
		text-align: center;
		width: 100%;
	}
	.col3 li{
		width: 30%;
	}

	.col3 .circle{
		margin: 0 auto;
		width: 21vw;
		height: 21vw;
	}

	section{
		padding-top: 50px;
	}

	.innerOverviewcol3{
		width: 90%;
		margin: 0 auto;
	}

	/* Service 幅設定 */
	section h2{
		width: 90%;
	}
	.container-serviceimg{
		width: 85%;
	}
	.innerMap{
		width: 85%;
	}
	/* //Service 幅設定 */


	.mapSlide__inner {
		width: 80vw;
	}
}


/* MOBILE/SMARTPHONE 設定
------------------------------------------------------------*/
@media only screen and (max-width: 599px){
	.innerCatchcopy{
		width: 100%;
		margin: 0 auto;
		text-align: center;
		font-size: 2em;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		line-height: 1.5em;
		padding-bottom: 20px;
	}
	.titlepadding {
		padding: 0 15px;
	}
	#header.fixed{
		height: 60px;
	}

	.titlecolor1{
		color: rgb(162, 255, 22);
		font-size: clamp(3.5rem,9vw,5.7rem);
	}
	.titlecolor2{
		color: rgb(255, 54, 121);
		font-size: clamp(3.5rem,9vw,5.7rem);
	}
	.titlecolor4{
		color: rgba(255, 255, 255, 0);
		font-size: clamp(3.5rem,9vw,5.7rem);
		-webkit-text-stroke: 1px #FFF;
		text-stroke: 1px #FFF;
	}

	.overview-3contents{
		width: 87%;
	}

	.col3{
		margin: 0 auto;
		width: 80%;
	}
	.col3 li{
		width: 32%;
	}
	.col3 .circle{
		margin: 0 auto;
	}

	.fontsize-servicecolor{
		font-size: 3.0rem;
	}

	.fontsize-servicewhite{
		font-size: 1.6rem;
	}

	#gallery li{
		float: none;
		width: 100%;
	}
	#map iframe{
		width: 96% !important;
		left: 2%;
	}
	
	#sec04_01{
		padding: 50px 20px;
	}
	#sec04_01 img{
		width: auto;
	}

	#sec04_02{
		padding: 50px 20px;
	}
	#sec04_02 img{
		width: auto;
	}

	.innerOverviewcol3{
		width: 100%;
		margin: 0 auto;
	}

	/* Service 幅設定 */
	section h2{
		width: 95%;
	}

	.container-serviceimg{
		width: 100%;
	}
	.innerMap{
		width: 100%;
	}
	.text_justify{
		width: 85%;
	}
	.overview-3contents{
		width: 95%;
	}
	/* //Service 幅設定 */
	.text_justify_en{
		width: 85%;
	}

	.mapSlide__inner {
		width: 100vw;
	}

}

/* CASE
------------------------------------------------------------*/
.case-section{
	display: grid;
}
.case-container{
	display: grid;
	position: relative;
	justify-content: center;
	grid-template:
	"area1 area2" 40vw
	"area3 area4" 40vw
	/ 40vw 40vw;
	grid-gap: 12px;
	margin: 0 auto;
	padding: 5px;
	width: 95%;
	height: 100%;
	text-align: center;
}
.case-container a{
	cursor: pointer;
}
.case{
	position: relative;
	padding: 2px;
	filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.5));
	cursor: pointer;
}
.case::after{
	content: "";
	z-index: -20;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border: 0.1px solid #fff;
}
.case img{
	width: 100%;
}
@media screen and (min-width:516px) {
  .case-container {
		grid-template:
			"area1 area2 area3" 22vw
			"area4 area5 area6" 22vw
			/ 22vw 22vw 22vw;
		padding: 15px;
		grid-gap: 1rem;
  }
}@media screen and (min-width:768px) {
  .case-container {
		grid-template:
			"area1 area2 area3" 20vw
			"area4 area5 area6" 20vw
			/ 20vw 20vw 20vw;
		padding: 15px;
		grid-gap: 2rem;
  }
	.case{
		filter: drop-shadow(0px 0px 7px rgba(255, 255, 255, 0.7));
		transition: all .5s;
	}
	.case:hover{
		transform: scale(1.08);
	}
}@media screen and (min-width:992px) {
  .case-container {
		grid-template:
			"area1 area2 area3 area4" 160px
			/ 160px 160px 160px 160px;
    width: 70%;
		padding: 25px;
		grid-gap: 2rem;
  }
	.case{
		filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.7));
	}
}@media screen and (min-width:1200px) {
  .case-container {
		grid-template:
			"area1 area2 area3 area4" 200px
			/ 200px 200px 200px 200px;
    width: 60%;
		padding: 35px;
		grid-gap: 3rem;
  }
	.case{
		filter: drop-shadow(0px 0px 9px rgba(255, 255, 255, 0.7));
	}
}

.tb2preeve {
	grid-area: area1;
	width: 100%;
	height: 100%;
	background: url(../img/tb2preeve/bg-tb2preeve.webp);
	background-size: cover;
	background-position: center;
}
.tb2preeve img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: contain;
}
.expojpn {
	position: relative;
	grid-area: area2;
	width: 100%;
	height: 100%;
}
.expojpn::after{
	content: "";
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
	width: 100%;
	height: 100%;
	background: url(../img/expojpn/bg-expojpn.webp);
	background-size: cover;
	background-position: center;
	filter: brightness(70%);
}
.expojpn img{
	position: absolute;
	width: 400px;
	height: auto;
	top: -5px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.gbwc {
	position: relative;
	grid-area: area3;
	width: 100%;
	height: 100%;
}
.gbwc::after{
	content: "";
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
	width: 100%;
	height: 100%;
	background: url(../img/gbwc/bg-gbwc.webp);
	background-size: cover;
	background-position: center;
	filter: brightness(70%);
}
.gbwc img{
	position: absolute;
	width: 400px;
	height: auto;
	top: -5px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	padding: 10px;
}
.getup-getlive-neta1 {
	position: relative;
	grid-area: area2;
	width: 100%;
	height: 100%;
}
.getup-getlive-neta1::after{
	content: "";
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
	width: 100%;
	height: 100%;
	background: url(../img/getup-getlive/bg-getup-getlive.webp);
	background-size: cover;
	background-position: center;
	filter: brightness(70%);
}
.getup-getlive-neta1 img{
	position: absolute;
	width: 400px;
	height: auto;
	top: 0px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.comingsoon{
	position: relative;
	background: rgb(27, 27, 27);
}
.comingsoon a{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	white-space: noWrap; 
}

#related-contents{
	margin-top: 100px;
}
.relatedcontents{
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	grid-gap: 50px;
}
.relatedcontents-left{
	width: 220px;
	transition: all .5s;
}
.relatedcontents-right{
	width: 220px;
	transition: all .5s;
}
.relatedcontents-left:hover{
	transform: scale(1.2);
}
.relatedcontents-right:hover{
	transform: scale(1.2);
}
@media screen and (min-width:516px) {
  .relatedcontents {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		grid-gap: 50px;
  }
	.relatedcontents-left{
		width: 250px;
	}
	.relatedcontents-right{
		width: 250px;
	}
}@media screen and (min-width:768px) {
  .relatedcontents {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		grid-gap: 50px;
  }
}@media screen and (min-width:992px) {
  .relatedcontents {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		grid-gap: 80px;
  }
}@media screen and (min-width:1200px) {
  .relatedcontents {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		grid-gap: 100px;
  }
}

.container-features{
	display: grid;
	place-content: center;
	place-items: center;
}

.featurecomparison {
	width: 100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	border: 1px solid #ddd;
  }
  
  /* Style table headers and table data */
  th, td {
	text-align: center;
	padding: 16px;
  }
  
  th:first-child, td:first-child {
	text-align: left;
  }
  
  /* Zebra-striped table rows */
  tr:nth-child(even) {
	background-color: #000000;
	white-space: nowrap;
	text-align: left;
  }
  
  .fa-check {
	color: green;
  }
  
  .fa-remove {
	color: red;
  }