/*
Theme Name: LIG WordPress Template
Version: 0.2.0
Text Domain: lig-wordpress-template
*/

/***************************************************************
Generic class
***************************************************************/
.mt-0 {
	margin-top: 0!important
}

.mt-15 {
	margin-top: 15px!important;
}

.mb-15 {
	margin-bottom: 15px!important;
}

.flex {
	display: flex;
	align-content: center;
	margin-bottom: 10px
}

.flex > * + * {
	margin-left: 5px;
	margin-top: 0
}

.bold {
	font-weight: 600;
}

.mt-0 {
	margin-top: 0!important;
}

.mt-15 {
	margin-top: 15px!important;
}

.mb-15 {
	margin-bottom: 15px!important;
}

@media(max-width: 768px) {
	.flex {
		display: flex;
		flex-direction: column;
		width: 100%
	}
	
	.flex > * + * {
		margin-top: 5px;
		margin-left: 0
	}
}

.standard-table {
	width: 100%
}

.standard-table  th {
	text-align: left
}

.standard-table  tr > td {
	vertical-align: top
}

.standard-table  th, 
.standard-table  tr > td {
	padding-left: 5px;
}

.standard-table  tr > th:first-child {
	width: 10%
}

.standard-table, .standard-table th, .standard-table td {
	border: 1px solid #000
}

/***************************************************************
Colors & Font Size
***************************************************************/

.green {
	color: #2fba2d
}

.blue {
	color: #2a9ef5
}

.size-medium {
	font-size: 24px
}

@media(max-width: 768px) {
	.size-medium {
		font-size: 16px;
	}
}

/***************************************************************
Style for YouTube video text on STRIX ENGINE and Unity SDK page
***************************************************************/
.video-explaination_list {
	display: flex;
	justify-content: center;
	position: relative;
}
.video-explaination-unity-sdk_list {
	display: flex;
	justify-content: center;
	position: relative;
	padding: 100px 0 0;
}
.video-explaination_subject {
	font-size: 19px;
	letter-spacing: 0.05em;
	line-height: 1.7;
	font-weight: 700;
	margin: -25px 0 0 -25px;
}
.video-explaination_subject::after {
	content: "";
	display: block;
	position: relative;
	-webkit-box-flex: 1;
	height: 1px;
	margin-left: 1rem;
	top: 14px;
	background: #dcdcdc;
}
@media only screen and (max-width: 768px) {
	.video-explaination_list {
		position: relative;
	}
	.video-explaination-unity-sdk_list {
		position: relative;
	}
	.video-explaination_subject {
		font-size: 17px;
		letter-spacing: 0.05em;
		line-height: 1.7;
		font-weight: 700;
		text-align: center;
		position: absolute;
		max-width: 600px;
		bottom: 25px;
		margin: 0 auto;
	}
	.video-explaination_subject::after {
		content: "";
		display: block;
		position: relative;
		-webkit-box-flex: 1;
		height: 1px;
		margin-left: 1rem;
		top: 10px;
		right: 10px;
		background: #dcdcdc;
	}
}

/**********************************************************
Style for YouTube video on STRIX ENGINE and Unity SDK page
**********************************************************/
.strix-engine-container {
	max-width: 800px;
	margin: 0 auto 50px auto;
	padding: 50px 0 0;
}
.unity-sdk-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 50px 0 0;
}
.video-responsive {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	padding-bottom: 56.25%;
}
.video-responsive iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 768px) {
	.strix-engine-container {
		display: block;
		margin: 0;
		padding: 0;
	}
	.unity-sdk-container {
		display: block;
		margin: 0 8px 0;
		padding: 20px 0 0;
	}
	.video-responsive {
		padding-top: 56.25%;
		padding-bottom: 0;
	}
	.video-responsive iframe {
		top: 0;
	}
}

/***************************************************************
Style for YouTube video text on Unreal SDK page
***************************************************************/
.video-explaination-unreal-sdk_list {
	display: flex;
	justify-content: center;
	position: relative;
	padding: 50px 0 50px;
}
.video-explaination-unreal-sdk_subject {
	font-size: 19px;
	letter-spacing: 0.05em;
	line-height: 1.7;
	font-weight: 700;
	margin: -25px 0 0 -25px;
}
.video-explaination-unreal-sdk_subject::after {
	content: "";
	display: block;
	position: relative;
	-webkit-box-flex: 1;
	height: 1px;
	margin-left: 1rem;
	top: 14px;
	background: #dcdcdc;
}
@media only screen and (max-width: 768px) {
	.video-explaination-unreal-sdk_list {
		position: relative;
	}
	.video-explaination-unreal-sdk_subject {
		font-size: 17px;
		letter-spacing: 0.05em;
		line-height: 1.7;
		font-weight: 700;
		text-align: center;
		position: absolute;
		max-width: 600px;
		bottom: 25px;
		margin: 0 auto;
	}
	.video-explaination-unreal-sdk_subject::after {
		content: "";
		display: block;
		position: relative;
		-webkit-box-flex: 1;
		height: 1px;
		margin-left: 1rem;
		top: 10px;
		right: 10px;
		background: #dcdcdc;
	}
}

/******************************************
Style for YouTube video on Unreal SDK page
******************************************/
.unreal-sdk-container {
	max-width: 1200px;
	margin: 0 auto;
}
.unreal-sdk-video-responsive.one {
	position: relative;
	float: left;
	overflow: hidden;
	padding: 0 20px;
}
.unreal-sdk-video-responsive.two {
	position: relative;
	float: left;
	overflow: hidden;
	padding: 0 20px;
}
.unreal-sdk-video-responsive iframe {
	width: 560px;
	height: 315px;
}
.clear {
	clear: both;
}

@media only screen and (max-width: 768px) {
	.unreal-sdk-container {
		display: inline-block;
		margin-left: 50%;
		transform: translatex(-50%);
		-ms-transform: translatex(-50%);
	}
	.unreal-sdk-video-responsive.one {
		width: 100%;
		height: 100%;
		margin-bottom: 15px;
		padding: 0;
	}
	.unreal-sdk-video-responsive.two {
		width: 100%;
		height: 100%;
		margin-bottom: 15px;
		padding: 0;
	}
	.unreal-sdk-video-responsive iframe {
		width: 360px;
		height: 230px;
		padding-top: 27px;
	}
}

.faq__category-title {
	font-size: 35px;
	font-weight: bold;
	margin-top: 50px;
}

.faq__category-title:first-child {
	margin-top: 0px;
}

@media only screen and (max-width: 768px) {
	.faq__category-title {
		font-size: 25px;
		font-weight: bold;
		margin-top: 50px;
	}
}

/****************************************
Style for pick-up video on Tutorial page
*****************************************/
.tutorial-mv.strix-study {
	width: 100%;
	height: 100%;
	background-image: none;
	background-position: 0;
	position: relative;
}
.pickup__container {
	width: 1200px;
	margin: 0 auto;
	margin-top: 15px;
}
.pickup__inner {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
}
.pickup__title {
	display: webkit box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	margin-bottom: 15px;
}
.pickup__title-svg {
	width: 140px;
	height: 45px;
	margin-right: 20px;
}
.pickup__title-text {
	font-size: 13px;
	letter-spacing: 0.08em;
	line-height: 1.7;
	font-weight: 400;
}
.pickup__text-container {
	display: inline-block;
	width: 500px;
	margin-right: 65px;
	vertical-align: top;
}
.pickup__title-explaination {
	font-size: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	font-weight: inherit;
}
.pickup__video-container {
	display: inline-block;
	width: calc(100% - 575px);
}
.pickup__video-responsive {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	padding-bottom: 56.25%;
	z-index: 1;
}
.pickup__video-responsive iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}
.pickup-text__link {
	display: inline-block;
	color: blue;
	-webkit-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	transition: color 0.3s ease;
}
.pickup-text__link:hover {
	color: red;
}

@media only screen and (max-width: 768px) {
	.pickup__container {
		display: block;
		width: calc(100% - 30px);
		margin: 0 auto;
		margin-top: 50px;
	}
	.pickup__text-container {
		width: 100%;
		margin-bottom: 15px;
	}
	.pickup__title-explaination {
		width: 100%;
		padding: 5px;
	}
	.pickup__video-container {
		width: 100%;
	}
	.tutorial-tutorials__title-ja {
		width: 90%;
		margin: 0 auto;
	}
}

.tutorial-tutorials__body-text a:hover {
	color: #8a11bb;
	-webkit-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	transition: color 0.3s ease;
}
.mw_wp_form .vertical-item {
	text-align: center;
}

/****************************************
Style change for Tutorial video list
*****************************************/
@media only screen and (max-width: 768px) {
	.tutorial-tutorials__item {
		margin: 0 auto;
	}
}

/****************************************
Style for Blog Button on Tutorial page
*****************************************/
.tutorial-tweet {
	max-width: 1185px;
	margin: 50px auto 0;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	flex-wrap: wrap;
}
.single-blog iframe {
	display: block;
	margin: 0 auto;
}
.blog__text-container {
	width: 556px;
	margin: 0 auto;
}
.blog__title {
	display: webkit box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	margin-bottom: 15px;
	position: relative;
	left: -15px;
}
.blog__title-svg {
	width: 140px;
	height: 50px;
	margin-right: 20px;
}
.blog__title-text {
	font-size: 13px;
	letter-spacing: 0.08em;
	line-height: 1.7;
	font-weight: 400;
}
.blog__title-explaination {
	-webkit-transition: background-color 0.5s ease, color 0.4s ease;
	-ms-transition: background-color 0.5s ease, color 0.4s ease;
	transition: background-color 0.5s ease, color 0.4s ease;
	background-color: hsla(0, 0%, 100%, 0.8);
	color: black;
	padding: 15px;
	font-size: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	font-weight: inherit;
	text-align: center;
}
.blog__title-explaination:hover {
	background-color: #999999;
	color: white;
}
.blog__twitter-container {
	display: inline-block;
	width: calc(100% - 575px);
}
.blog__twitter-responsive {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	padding-bottom: 56.25%;
}

body.jp .tutorial-blog__subtitle {
	font-size: 26px;
	letter-spacing: 0.12em;
	line-height: 1.5;
	font-weight: 700;
	margin-bottom: 15px;
}
@media (max-width: 767px) {
	body.jp .tutorial-blog__subtitle {
		font-size: 18px;
		line-height: 1.6;
		margin-bottom: 0;
	}
}

.tutorial-blog__subtitle {
	opacity: 0;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	color: #ff03af;
	background-image: linear-gradient(30deg, #0a39fa, #17d9a5);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-font-smoothing: antialiased;
	margin-top: 25px;
}
.is-ScrollActive .tutorial-blog__subtitle {
	opacity: 1;
	-webkit-transition: all 1s cubic-bezier(0.17, 0.67, 0.64, 0.82);
	transition: all 1s cubic-bezier(0.17, 0.67, 0.64, 0.82);
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.cmn-button--blog {
	background: linear-gradient(30deg, #0a39fa, #17d9a5);
	color: #fff;
}

@media only screen and (max-width: 768px) {
	.blog__container {
		display: block;
		width: 350px;
		margin: 0 auto;
		margin-top: 15px;
	}
	.blog__text-container {
		width: 360px;
		margin: 0 auto 75px;
	}
	.blog__title-explaination {
		width: 360px;
	}
	.blog__video-container {
		width: 100%;
	}

	.tutorial-blog__subtitle {
		margin-top: 15px;
	}
}

.tutorial-tutorials__body-text a: {
	line-height: 0;
}

.tutorial-tutorials__body-text a:hover {
	color: red;
}

/****************************************
Style for Demo Button on Tutorial page
*****************************************/
.tutorial-demo {
	padding: 86px 0 166px;
	position: relative;
	/*opacity: 1;*/
	-webkit-transform: translatey(20px);
	transform: translatey(20px);
}
.tutorial-demo__body {
	width: 540px;
	background-color: #fff;
	margin: auto;
	position: relative;
	text-align: center;
	padding: 19px 0 24px;
	z-index: 1;
}
.tutorial-demo__title {
	font-size: 25px;
	letter-spacing: 0.1rem;
	color: #ff03af;
}
.tutorial-demo__link {
	width: 330px;
	margin: 10px auto 0;
}

.tutorial-cv__body {
	margin-top: 0px !important;
}

.tutorial-cv__bg {
	top: -100px;
}
.tutorial-mv__outer {
	position: relative;
}

@media only screen and (max-width: 768px) {
	.tutorial-demo {
		padding: 86px 0 66px;
	}
	.tutorial-demo__body {
		width: calc(100% - 30px);
		position: absolute;
		bottom: 450px;
		left: 15px;
	}
	.tutorial-demo__title {
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.03rem;
	}
	.tutorial-demo__link {
		width: 299px;
		margin: 19px auto 0;
	}
}

/****************************************
Style for News Classes
*****************************************/
.cmn-news-list__time {
	margin-right: 100px;
}

/***************************************************************
Style for News Pricing Table
***************************************************************/
.pricingTableAndArrowContainer {
	display:flex;
}

.pricingTableContainer {
	width:100%;
}

.pricingTableContainer.before {
	max-width: 200px;
}

.pricingTableContainer.after {
	max-width: 100%;
}

.pricingTableContainer.before,
.pricingTableContainer.after,
.pricingTableContainer.dev-support {
	line-height:1.5
}

table.priceTable,
table.originalPriceTable {
	background-color: #fff;
	width: 100%;
	text-align:center;
}

table.priceTable {
	background-image: linear-gradient(0deg,#adf9aa 50%,#59e8c9 100%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

table.priceTable thead {
	background-color: #fff;
}

table.priceTable thead tr {
	border: 1px solid #fff;
}

table.priceTable a {
	text-decoration:none
}

table.priceTable tbody tr,
table.priceTable tbody tr td,
table.originalPriceTable tbody tr,
table.originalPriceTable tbody tr td{
  border:1px solid #bdbdbd
}

table.priceTable td, table.priceTable th,
table.originalPriceTable td, table.originalPriceTable th {
  padding: 6px 2px;
}

table.priceTable tbody td:first-child,
table.originalPriceTable tbody td:first-child {
  text-align:center;
}


table.priceTable tbody td,
table.originalPriceTable tbody td {
  font-size: 13px;
  text-align:center;
}

table.priceTable tr:nth-child(2) td:nth-child(1) {
	width: 15px
}

table.priceTable tr:nth-child(2) td:nth-child(2),
table.priceTable tr:nth-child(3) td:nth-child(2),
table.priceTable tr:nth-child(4) td:nth-child(2) {
  text-align: left;
  padding-left: 12px;
}

table.priceTable tr:nth-child(1) td:nth-child(2),
table.priceTable tr:nth-child(1) td:nth-child(3),
table.priceTable tr:nth-child(1) td:nth-child(4) {
	width: 130px;
}

body.en table.priceTable tr:nth-child(1) td:nth-child(2),
body.en table.priceTable tr:nth-child(1) td:nth-child(3),
body.en table.priceTable tr:nth-child(1) td:nth-child(4) {
	width: 135px;
	height: 89.94px;
}


table.priceTable tr:nth-child(1) td:nth-child(2),
table.priceTable tr:nth-child(1) td:nth-child(3),
table.priceTable tr:nth-child(1) td:nth-child(4),
table.priceTable tr:nth-child(2) td:nth-child(2),
table.priceTable tr:nth-child(3) td:nth-child(2),
table.priceTable tr:nth-child(4) td:nth-child(2),
table.originalPriceTable tr:nth-child(1) td:nth-child(1),
table.originalPriceTable tr:nth-child(1) td:nth-child(2) {
	background-color:#f0f0f0
}

table.priceTable tr:nth-child(1) td:nth-child(4),
table.priceTable tr:nth-child(1) td:nth-child(5),
table.priceTable tr:nth-child(1) td:nth-child(6),
table.priceTable tr:nth-child(2) td:nth-child(3),
table.priceTable tr:nth-child(2) td:nth-child(5),
table.priceTable tr:nth-child(2) td:nth-child(6),
table.priceTable tr:nth-child(3) td:nth-child(3),
table.priceTable tr:nth-child(3) td:nth-child(5),
.pricingTableContainer.dev-support table.originalPriceTable tr:nth-child(1) td:nth-child(1),
.pricingTableContainer.dev-support table.originalPriceTable tr:nth-child(2) td:nth-child(1) {
  color:red;
}

table.priceTable tr:nth-child(2) td:nth-child(3),
table.priceTable tr:nth-child(3) td:nth-child(3),
table.priceTable tr:nth-child(4) td:nth-child(3) {
  text-align:center;
}

table.priceTable tr:nth-child(2) td:nth-child(3),
table.priceTable tr:nth-child(2) td:nth-child(4),
table.priceTable tr:nth-child(2) td:nth-child(5),
table.priceTable tr:nth-child(3) td:nth-child(3),
table.priceTable tr:nth-child(3) td:nth-child(4),
table.priceTable tr:nth-child(3) td:nth-child(5),
table.priceTable tr:nth-child(4) td:nth-child(3) {
  background-color:#fff
}

.pricingTableContainer.dev-support {
	max-width: 130px;
	margin-top: 57px;
	margin-left: 8px;
}

body.en .pricingTableContainer.dev-support {
	margin-top: 35.5px;
}

table.originalPriceTable tr:nth-child(2) td:nth-child(1),
table.originalPriceTable tr:nth-child(3) td:nth-child(1),
table.originalPriceTable tr:nth-child(4) td:nth-child(1),
.pricingTableContainer.dev-support table.originalPriceTable tr:nth-child(1) td:nth-child(1) {
  text-align:center;
  height:52px;
}

body.en table.priceTable tr:nth-child(2) td:nth-child(2) {
	height: 52px;
}

.pricingTableContainer.dev-support table.originalPriceTable tr:nth-child(2) td:nth-child(1) {
	height: 156px;
}

body.en .pricingTableContainer.dev-support table.originalPriceTable tr:nth-child(1) td:nth-child(1) {
	height: 89.94px;
}

body.en .pricingTableContainer.dev-support table.originalPriceTable tr:nth-child(2) td:nth-child(1)  {
	height: 117px;
}

body.en table.originalPriceTable tr:nth-child(2) td:nth-child(1),
body.en table.originalPriceTable tr:nth-child(3) td:nth-child(1),
body.en table.originalPriceTable tr:nth-child(4) td:nth-child(1){
  height:auto;
}

table.priceTable thead th,
table.originalPriceTable thead th {
  font-size: 15px;
  font-weight: bold;
  border-left: 2px solid #fff;
}

table.originalPriceTable thead th {
    color: #000;
    background-color:#e7e7e7
}

table.priceTable thead th:first-child,
table.originalPriceTable thead th:first-child {
  border: none;
  width:30px;
}

table.originalPriceTable thead th:first-child {
  text-align:center;
  background-color:rgba(0,0,0,0);
}

table.priceTable thead th:first-child {
  background:#fff;
}

table.priceTable thead th {
  border:1px solid #fff;
  border-bottom:none;
}

table.priceTable thead th:nth-child(2),
table.priceTable thead th:nth-child(3){
  text-align:center;
  color:red;
  border:none
}

table.originalPriceTable thead th:nth-child(2) {
    background-color:#e7e7e7
}

table.supportTable {
  width: 100%;
  margin-bottom: 10px;
  text-align:left;
  border-collapse: separate;
  background-image: linear-gradient(25deg,#008dff,#1190cf 0%,#17dca4 50%,#1190cf 100%,#008dff);
  background-origin: border-box;
  border-spacing: 1px;
  border: 0 solid transparent;
}

table.supportTable tbody tr,
table.supportTable tbody tr td{
  padding: 1em 1.2em;
  background-color: #fff;
}

table.supportTable tbody tr td:nth-child(2){
  font-size: 13px;
  line-height: 1.6;
}

table.supportTable tr:first-child td:first-child,
table.supportTable tr:nth-child(2) td:first-child {
	width:125px
}

table.supportTable tr:first-child td:first-child,
table.supportTable tr:nth-child(2) td:first-child {
	font-weight:600;
	text-align:center
}

.arrow {
	/* more triangle */
	position: relative;
	height: 0px; 
	width: 0px;
	border: 12px solid;
	border-color: 
		red
		red
		transparent
		transparent;
	transform: rotate(225deg); 
	margin: 0
}

/* Arrow holder */
.arrowed {
	position: relative;
	max-width: 50px;
	width:100%;
}

/* Just centering the examples */
.arrowed div {
	position: absolute;
	top: 35px; 
	bottom: 0; 
	left: 0; 
	right: 0;
	margin: auto;
}

/* Arrow */
.arrow:before {
	content: '';
	position: absolute;
	top: 0px; 
	right: 0px;
	display: block;
	height: 12px; width: 16px;
	background-color: red;
	transform: 
		rotate(-45deg) 
		translate(2px, 1px);
}

/* Styling for smartphone text */
.news-product-support-sp-title {
	font-size:18px!important;
}

.news-product-support-sp-subtitle {
	font-size: 16px!important
}

.news-product-support-sp-container {
	margin: 10px 0 30px;
}

.news-product-support-sp-container p {
	margin: 5px!important;
}

.news-product-support-sp-container.price-revision p:first-child {
	margin-bottom: 20px!important
}

.product-title__price-revision {
	margin-bottom:0!important
}

/****************************************
Style for Blog images
*****************************************/
.apollo-blog__image {
	width: 15%;
	margin: 0 auto;
}
.apollo-blog__image figcaption {
	text-align: center;
}
.blog-list__title-en {
	position: relative;
	left: 0;
	width: 10rem;
	height: auto;
}
@media only screen and (max-width: 768px) {
	.apollo-blog__image {
		width: 40%;
	}
	.blog-list__title-en {
		width: 8rem;
		height: auto;
	}
}

/*****************************************
 * Style for Blog Video (2 column)
 *****************************************/
.blog_cmn-2-column--compare {
	position: relative;
	z-index: 1;
}

.blog_sdk-features__items {
}

.blog_sdk-features_item {
}

.blog_cmn-2-column__label {
	font-family: Heebo, sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.06em;
	position: absolute;
	top: 50%;
	left: -57px;
	font-size: 12px;
	letter-spacing: 0.3rem;
	-webkit-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
	color: #fff;
	background-color: #1c1c1c;
	padding: 0 20px 0 17px;
	line-height: 1.9;
}

.blog_cmn-2-column__label--right {
	left: auto;
	right: -57px;
}

.blog_sdk-features__item-video {
}

.blog_cmn-2-column__items {
	padding: 0px 0px;
	min-width: 400px;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	max-width: 1360px;
	min-width: 100px;
	margin: auto;
}

.blog_cmn-2-column__item {
	margin: 10px 5px;
	list-style: none;
}

@media (max-width: 767px) {
	.blog_cmn-2-column__items {
		display: block;
	}
	.blog_cmn-2-column__item {
		margin-left: 0;
	}
	.blog_cmn-2-column__label--right {
		top: 65%;
	}
	.blog_cmn-2-column__label--left {
		top: 50px;
	}
	.blog_cmn-2-column__label {
		font-size: 10px;
		padding: 0 12px 0 10px;
		line-height: 1.3;
		letter-spacing: 0.25rem;
	}
	.blog_cmn-2-column--compare {
		position: relative;
		z-index: 1;
		width: 80vm;
		min-width: auto;
		padding: 0;
	}
}

/***************************************
 *CSS for Demo Section on Tutorial Page 
 **************************************/

.demo__title {
	display: webkit box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	margin-top: 25px;
	margin-bottom: 15px;
}
.demo__title-svg {
	width: unset;
	height: 45px;
	margin-right: 20px;
	position: relative;
	left: -12px;
}
.demo__title-text {
	font-size: 13px;
	letter-spacing: 0.08em;
	line-height: 1.7;
	font-weight: 400;
	margin-left: 25px;
}
.tutorial-demo__subtitle {
	font-size: 18px;
	letter-spacing: 0.12em;
	line-height: 1.5;
	font-weight: 700;
	margin-bottom: 15px;
	opacity: 0;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	color: #ff03af;
	background-image: linear-gradient(30deg, #0a39fa, #17d9a5);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-font-smoothing: antialiased;
	margin-top: 0;
}
.is-ScrollActive .tutorial-demo__subtitle {
	opacity: 1;
	-webkit-transition: all 1s cubic-bezier(0.17, 0.67, 0.64, 0.82);
	transition: all 1s cubic-bezier(0.17, 0.67, 0.64, 0.82);
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.tutorial-demo__image {
	opacity: 0;
	position: relative;
}
.is-ScrollActive .tutorial-demo__image {
	opacity: 1;
	-webkit-transition: all 1s cubic-bezier(0.17, 0.67, 0.64, 0.82);
	transition: all 1s cubic-bezier(0.17, 0.67, 0.64, 0.82);
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.tutorial-blog__button {
	margin-top: 20px !important;
}
.overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	transition: all 0.3s ease;
	opacity: 0;
	background-color: #fff;
}
.tutorial-demo__image:hover .overlay {
	opacity: 0.2;
	cursor: pointer;
}

@media (max-width: 767px) {
	.demo__title {
		display: block;
	}
	.demo__title-text {
		margin-left: 5px;
	}
}

.company-overview td {
	padding: 5px 15px;
}

/**************************
Strix Cloud Document Body
**************************/
.fix__inner {
	padding: 177px 0 0px !important;
}

.document__body {
	padding: 120px 0 50px 0 !important;
}

.document-strix-cloud__body {
	width: 820px;
	margin: 0 auto;
	padding: 0 0 120px 0;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: center;
	z-index: 1;
	position: relative;
}
.document__section--strix_cloud .document__links-title {
	width: 240px;
}
body.jp .document__section--technical_faq .document__links-title {
    width: 230px;
}
.document__section--technical_faq .document__links-title {
    width: 310px;
}
/************************************************
New Vertical Position for Unity and Unreal Logos
************************************************/

.document__bg-unity {
	top: 350px !important;
}

.document__bg-unreal {
	top: 350px !important;
}

/***************************
Responsive for Strix Cloud
***************************/

@media (max-width: 767px) {
	.fix__inner {
		padding: 150px 0 100px !important;
	}
	.document-strix-cloud__body {
		width: auto;
		padding: 50px 0 0 0;
		display: block;
		margin: auto;
	}
	.document__section--strix_cloud .document__links-title {
		width: 180px;
	}
	body.jp .document__section--technical_faq .document__links-title {
		width: 175px;
	}
	.document__section--technical_faq .document__links-title {
		width: 240px;
	}
	.document__bg-unity {
		top: 300px !important;
	}
	.document__bg-unreal {
		top: 725px !important;
	}
}

/*******************************
Style for No Post on Blog Page
*******************************/

.cmn-blog-posts__no-posts {
	padding: 0 90px;
}
@media (max-width: 767px) {
	.cmn-blog-posts__no-posts {
		padding: 0 20px;
	}
}

/***********************************
CSS for Text Area Added to Projects
***********************************/
.index-works__copyright {
	margin: 15px 0;
	font-weight: 200;
	font-size: 0.8em;
}

/***************************************
Style for Summer Research Project Page
***************************************/
.tutorial-mv.strix-study {
	width: 100%;
	height: 100%;
	background-image: none;
	background-position: 0;
	position: relative;
}
.pickup__container.strix-study {
	max-width: 1000px;
	width: 100%;
	margin-top: 0;
	margin-bottom:190px
}
.strix-study__staff-container {
	background-color: #fff;
	padding: 60px 25px 30px;
}
.strix-study__staff__list {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	gap: 5px;
}
.strix-study__staff__list-item {
	width: 100%;
	max-width: 225px;
}
.strix-study__staff__list-img img {
	border-radius: 50%;
	-moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
}
.strix-study__participants__list {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: 25px;
	margin: 20px;
}
.strix-study__participants__list-item {
	width: 100%;
	max-width: 200px;
}
.strix-study__participants__list-img {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 2px;
	position: relative;
}
.strix-study__participants__list-img:before {
	content: "";
	background: rgba(255, 251, 150, 0.8);
	width: 75px;
	height: 15px;
	position: absolute;
	top: -12px;
	left: 60px;
}
.strix-study__participants__list-img img {
	width: 196px;
	height: 130px;
	object-fit: cover;
	margin: 0 auto;
	padding: 7px;
}
.strix-study__event__list {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	gap: 5px;
}
.strix-study__event__list-item {
	width: 100%;
	max-width: 280px;
	margin-bottom:0;
}

.strix-study__event-main-container {
	background-color: #fff;
	padding: 30px 30px 0;
}
.strix-study__event-container {
	background-color: #fff;
	padding: 20px;
}
.strix-study__event-container:last-child {
	padding-bottom: 45px;
}
.strix-study__event-content {
	margin-left: 30px;
	padding: 2px 15px;
	width: 100%;
	font-weight: 600;
	font-size: 1.2rem;
	color: #000;
}
.strix-study__event-content-note {
	margin-left: 30px;
	padding: 2px 15px;
	width: 100%;
	font-weight: 200;
	font-size: 1rem;
	color: #000;
}
.strix-study__event-item {
	display: -webkit-box;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.strix-study__event-category {
	width: 100%;
	max-width: 125px;
	-webkit-box-align: center;
	align-items: center;
	flex-shrink: 0;
	font-weight: 600;
	font-size: 1.5rem;
	background-color: #bdd7ee;
	text-align: center;
	padding: 0 10px;
}
.strix-study__survey-container {
	background-color: #fff;
	padding: 70px 40px;
}
.strix-study__survey__list {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
.strix-study__survey__list-item {
	width: 48%;
	display: flex;
	align-items: center;
	position: relative;
	margin: 0 18px 48px 0;
}
.strix-study__survey__img-container {
	position: absolute;
	width: 26%;
	padding: 7px;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 2px;
	transform: rotate(5deg);
	margin-bottom: 62px;
	box-shadow: 3px 3px 3px rgb(0 0 0 / 15%);
	z-index: 1;
}
.strix-study__survey__img-container-02 {
	margin-bottom: 147px;
}
.strix-study__survey__name {
	font-size: 12px;
	text-align: center;
	padding-top: 5px;
}
.strix-study__survey__text-container {
	border: 1px solid rgba(0, 0, 0, 0.2);
	font-size: 1.1em;
	width: 100%;
	line-height: 1.4;
	margin-left: 40px;
}
.strix-study__survey__text-container.yellow-container {
	background-color: #fff2a8;
}
.strix-study__survey__text-container.purple-container {
	background-color: #eeb6fc;
}
.strix-study__survey__text-container.blue-container {
	background-color: #9bdbff;
}
.strix-study__survey__text-container.green-container {
	background-color: #a6fdb4;
}
.strix-study__survey__text-question {
	padding: 10px 10px 10px 85px;
}
.strix-study__survey__underline {
	width: 95%;
	margin-left: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.strix-study__survey__partition {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.strix-study__survey__text-answer {
	font-weight: 600;
	padding: 10px 10px 10px 85px;
}
.strix-study__survey__text-answer-margin-bottom {
	margin-bottom: 21px;
}
.pickup__inner.strix-study {
	margin-bottom: 15px;
	display: -webkit-box;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
.pickup__inner.strix-study > * {
	margin-bottom: 15px;
}
.pickup__inner.strix-study_contact {
	display: flex;
	display: -webkit-box;
	justify-content: space-evenly;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto 45px auto;
	z-index: 1;
}
.pickup__title.strix-study {
	justify-content: center;
}
.pickup__title.strix-study.contact-form {
	flex-direction: column;
	background-color: transparent;
	border: 0;
}
.pickup__title-svg.strix-study.online-game__svg {
	width: 85%;
	height: auto;
	padding: 15px 0;
	margin-right: 0;
}
.pickup__title-svg.strix-study.lecture-video__svg {
	width: 31.75%;
	height: auto;
	padding: 15px 0;
	margin-right: 0;
}
.pickup__title-svg.strix-study.event-images__svg {
	width: 62.01%;
	height: auto;
	padding: 15px 0;
	margin-right: 0;
}
.pickup__title-svg.strix-study.survey__svg {
	width: 34.556%;
	height: auto;
	padding: 15px 0;
	margin-right: 0;
}
.pickup__title-svg.strix-study.lecture-staff__svg {
	width: 28.69%;
	height: auto;
	padding: 15px 0;
	margin-right: 0;
}
.pickup__title-svg.strix-study.event-info__svg {
	width: 39.6%;
	height: auto;
	padding: 15px 0;
	margin-right: 0;
}
.pickup__title-svg.strix-study.participation-form__svg {
	width: 50%;
	height: auto;
	margin-right: 0;
}
.pickup__text-container.strix-study {
	display: inline-block;
	width: 100%;
	margin-right: 0 !important;
	vertical-align: top;
	background-color: #0c62d3;
	padding: 10px;
	border-radius: 5px;
	z-index: 1;
}
.pickup__text-container.strix-study_contact {
	display: block;
	width: 100%;
	background-color: #f9ba15;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 15px !important;
}
.pickup__title-explaination.strix-study,
.video__title-explaination.strix-study {
	font-size: 1rem;
	letter-spacing: inherit;
	line-height: 2rem;
	font-weight: inherit;
	background-color: #fff;
	color: #000;
}
.pickup__title-explaination.strix-study.lecture {
	margin: 35px 25px 10px;
}
.pickup__title-explaination.strix-study.staff {
	padding: 25px;
}
.video__title-explaination.strix-study {
	text-align: center;
	padding-bottom: 25px;
}
.pickup__title-explaination-container.strix-study {
	background-color: #fff;
	padding: 25px;
}
.pickup__title-explaination-container__img.strix-study {
	float: right;
	display: block;
	shape-outside: ellipse(50% 50%);
	margin-left: 10px;
}
.pickup__title-explaination__img-background {
	padding: 10px;
	margin: 5px;
}
.pickup__title-explaination__img-01.strix-study {
	width: 100%;
	transform: rotate(15deg);
	outline: 1px solid lightgray;
	position: relative;
	margin: 5px;
	box-shadow: 7px 5px 10px rgb(0 0 0 / 50%);
}
.pickup__title-explaination__img-02.strix-study {
	width: 100%;
	transform: rotate(350deg);
	outline: 1px solid lightgray;
	position: relative;
	margin: 5px;
	box-shadow: 7px 5px 10px rgb(0 0 0 / 50%);
}
.pickup__title-explaination.strix-study.note {
	font-size: 0.9rem;
	letter-spacing: inherit;
	line-height: 1.8rem;
	font-weight: inherit;
	background-color: #fff;
	padding: 15px 28px;
	color: #000;
}
.pickup__title-explaination.strix-study.note.event-images {
	text-align: center;
}
.pickup__title-explaination.strix-study.contact-note {
	font-size: 1.5rem;
	letter-spacing: inherit;
	line-height: 1.8rem;
	font-weight: inherit;
	background-color: transparent;
	padding: 15px 30px 0;
	color: #000;
}
.strix-study__text-red-bold {
	color: red;
	font-weight: 600;
}
.map-responsive {
	overflow: hidden;
	padding-bottom: 75%;
	position: relative;
	height: 0;
	margin-top: 15px;
}
.map-responsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}
.event-info__important {
	color: red;
}

.form-error {
	display: none;
    width: 100%;
	font-size:1.5rem;
	font-weight:600;
    margin-right: 0 !important;
	text-align: center;
    vertical-align: top;
    background-color: #f9ba15;
    padding: 10px;
    border-radius: 5px;
    z-index: 1;
}

.form-error > div > p {
	font-size:1.5rem;
	color: #ff0000;
	line-height:2rem;
	font-weight:200
}

.form-error.error__show {
	display:inline-block
}

.form-btn {
	width: 100%;
    max-width: 200px;
	position: fixed;
	z-index: 5;
	bottom: 60px;
	right: -1px;
	filter: drop-shadow(3px 2px 5px rgba(0 0 0 / 35%));
	transition: all 0.3s ease-in-out;
}

@media (max-width: 767px) {
	.form-btn {
		max-width: 135px
	}
}

.form-btn-active {
	transform: translatex(230px)
}

@media (hover: hover) and (pointer: fine) {
	.form-btn:hover {
		-webkit-backface-visibility: hidden;
		-ms-transform: translate3d(-8px, 0, 0) scale(1.1);
		-webkit-transform: translate3d(-8px, 0, 0) scale(1.1);
		transform: translate3d(-8px, 0, 0) scale(1.1);
	}
}

.map-container {
	width:60%;
	margin:0 auto;
}

#question_02_text {
	display:none;
	margin-top:0
}

.textbox__show {
	display:block!important;
}

.contact-form__row.strix-study:nth-child(3) p {
	position:relative
}

.fas.fa-angle-down {
	pointer-events: none;
	position:absolute;
	top:35px;
	right:25px;
	font-size:25px
}

@media only screen and (max-width: 768px) {
	.strix-study__event-main-container {
		background-color: #fff;
		padding: 30px 10px 0;
	}
	.strix-study__event-container {
		background-color: #fff;
		padding: 30px 10px;
	}
	.strix-study__event__list-item {
		margin-bottom:5px;
	}
	.strix-study__event-item {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.strix-study__event-content {
		margin-left: 0;
		font-size: 1rem;
	}
	.strix-study__event-content-note {
		margin-left: 0;
		font-size: 0.9rem;
	}
	.sp-image__size {
		width: 1000px;
		position: absolute;
		right: calc(100% - 800px);
	}
	.tutorial-mv.strix-study {
		width: 100%;
		height: 100%;
		background-image: none;
		background-position: 0;
	}
	.pickup__container.strix-study {
		max-width: 95%;
		margin-bottom:90px
	}
	.pickup__title-explaination-container__img.strix-study {
		display: none;
	}
	.pickup__title-explaination.strix-study.note {
		padding: 15px;
	}
	.pickup__title-explaination.strix-study.contact-note {
		width: fit-content;
	}
	.pickup__inner.strix-study_contact {
		width: 100%;
	}
	.pickup__text-container.strix-study {
		width: 100%;
	}
	.pickup__title-explaination.strix-study {
		width: 100%;
		padding: 15px;
	}
	.pickup__video-container.strix-study {
		width: 100%;
	}
	.pickup__title-svg.strix-study.online-game__svg {
		width: 90%;
	}
	.pickup__title-svg.strix-study.lecture-video__svg {
		width: 33.6%;
	}
	.pickup__title-svg.strix-study.event-images__svg {
		width: 67%;
	}
	.pickup__title-svg.strix-study.survey__svg {
		width: 36.6%;
	}
	.pickup__title-svg.strix-study.lecture-staff__svg {
		width: 30.4%;
	}
	.pickup__title-svg.strix-study.event-info__svg {
		width: 41.9%;
	}
	.pickup__title-svg.strix-study.participation-form__svg {
		width: 70%;
	}
	.pickup__title-explaination.strix-study.contact-note {
		font-size: 0.9rem;
	}
	.strix-study__participants__list {
		justify-content: center;
		gap: 0;
		margin: 0;
	}
	.strix-study__participants__list-item {
		max-width: 33%;
		border: 1px solid #fff;
	}
	.strix-study__participants__list-img {
		border: none;
		border-radius: none;
	}
	.strix-study__participants__list-img:before {
		content: none;
	}
	.strix-study__participants__list-img img {
		width: 100%;
		height: auto;
		padding: 0;
	}
	.strix-study__staff__list-item {
		margin-bottom: 20px;
	}
	.strix-study__survey-container {
		padding: 70px 15px 0;
	}
	.strix-study__survey__list-item {
		width: 90%;
		margin: 0 0 55px 25px;
	}
	.strix-study__survey__list-item:last-child {
		width: 90%;
		margin: 0 0 70px 25px;
	}
	.strix-study__survey__img-container {
		width: 90px;
		top: -40px;
		left: -25px;
		margin-bottom:0
	}
	.strix-study__survey__text-container {
		width: 100%;
		margin: 0;
		padding-bottom:20px
	}
	.strix-study__survey__text-question {
		padding: 10px 10px 10px 75px;
	}
	.strix-study__survey__text-answer {
		padding: 10px 10px 10px 74px;
	}
	.strix-study__survey__text-answer-margin-bottom {
		margin: 0;
	}
	.strix-study__survey__underline {
		margin-left: 13px;
	}
	.pickup__title-explaination.strix-study.lecture {
		margin:0
	}
	.map-container {
		width:100%
	}
	.fas.fa-angle-down {
		top:30px;
		right:20px;
	}
}
/**********************************************
 * Changes Made from app.css for 21summer Page
 * *******************************************/

.tutorial-story__bg.strix-study {
	top: 120vw;
	z-index: 0;
}

.tutorial-tutorials__bg.strix-study {
	top: 250vw;
	z-index: 0;
}

.tutorial-cv__wrapper.strix-study {
	overflow: inherit;
	background-color: #fff;
}

.tutorial-characters__name.strix-study {
	font-weight: 600;
	font-size: 1.6rem;
	margin-top: 5px;
}
.tutorial-characters__text.strix-study {
	text-align: center;
	font-size: 1rem;
	line-height: 1.5rem;
}
.page__inner.strix-study {
	width: 100%;
	max-width:100%;
	padding: 0 0 100px 0;
	background-color: #fff;
	margin: 0;
}
.page__inner.strix-study::before {
	content: none;
}

@media (max-width: 767px) {
	.tutorial-cv__bg.strix-study {
		top: -250px;
	}
}

/*****************************************************
 * CSS for Contact Form on 21summer Page
 * **************************************************/
.contact-form.strix-study {
	padding: 30px 50px;
	background-color: #fff;
	font-size: 1rem;
	text-align: left;
}
.contact-form__row.strix-study {
	display: -webkit-box;
	display: flex;
	padding: 15px 0;
	-webkit-box-align: start;
	align-items: center;
	border: 0;
}
.contact-form__row.strix-study.participate p {
	display: flex;
	justify-content: space-evenly;
	align-content: center;
	align-items:center;
	flex-wrap: wrap;
}
#strix-study-confirm .contact-form__row.strix-study.participate p {
	justify-content:flex-start
}
#strix-study-confirm .fas.fa-angle-down{
	display:none
}
.contact-form__pc-spec-container {
	display: flex;
	flex-wrap:wrap;
    justify-content: flex-start;
    border: 2px solid #000;
    padding: 15px;
	margin: 15px 0
}
.contact-form__pc-spec-instructions {
	font-size: 16px;
	line-height:1.7;
	margin: 10px 0 25px;
}
.contact-form__pc-spec-instructions p:first-child {
	font-weight: 200!important;
	font-size:16px!important;
}
.contact-form__pc-spec-instructions p:nth-child(2),
.contact-form__pc-spec-instructions p:nth-child(4),
.contact-form__pc-spec-instructions.smart-phone p:nth-child(3),
.contact-form__pc-spec-instructions.smart-phone p:nth-child(5) {
	margin-left:18px
}
.contact-form__pc-spec-instructions.smart-phone p:nth-child(2),
.contact-form__pc-spec-instructions.smart-phone p:nth-child(4) {
	margin-left:0
}
.contact-form__pc-spec-title {
	min-width:150px
}
.contact-form__pc-spec-image-container div p:first-child {
	font-size:1rem
}

.contact-form__pc-spec-image-container div p:nth-child(2) {
	flex-direction:row
}

.contact-form__pc-spec-image-container div p:nth-child(2) input {
	margin-top: 0;
	border:none;
	padding:0
}
.contact-form__row.strix-study.survey {
	flex-wrap: wrap;
}
.contact-form__row.strix-study.survey p {
	width: 100%;
	word-break: break-word;
}
.contact__form-heading.strix-study {
	background: #fff;
	padding: 30px 15px;
	margin: 25px 0 30px;
	text-align: center;
}
.contact-form__label.strix-study {
	width: 205px;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	flex-shrink: 0;
	font-weight: 600;
	font-size: 1.5rem;
	align-items: flex-start;
	align-content: flex-start;
	flex-direction: column;
}
.contact-form__label.strix-study.survey {
	margin: 15px 0;
	width: 100%;
	border-top: 3px solid #f9ba15;
    font-size: 2em;
    padding-top: 15px;
    align-items: center;
}
.contact-form__label.strix-study::before {
	content: none;
}
.contact-form__label-question-en {
	font-size: 1.2rem;
}

.contact-form__row.strix-study input {
	border: 2px solid black;
	margin-top: 15px;
	width: 100%;
	font-weight: 600;
	padding: 10px;
}
.contact-form__input.strix-study {
	border: 2px solid #000;
	margin-top: 15px;
	padding: 10px 15px;
	width: 100%;
	font-weight: 600;
	font-size: 1.2rem;
	color: #000;
}
.contact-form__row.strix-study .mwform-checkbox-field-text {
	font-size: 1.2rem;
}
.contact-form__bottom.strix-study {
	padding: 35px 0 0;
	letter-spacing: 0.05rem;
}
.contact-form__input.strix-study.phone-number {
	width: 25%;
}
.contact-form__question-section {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.contact-form__question {
	margin-bottom: 20px;
	width: 100%;
}

.contact-form__question p:first-child {
	font-weight: 600;
	font-size: 1.2rem;
}

.contact-form__question p:last-child {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-content: center;
}

.contact-form__row.strix-study.survey input {
	width: inherit;
}

.contact-form__question.pc-spec-instructions p {
	display:block;
}

.contact-form__question.pc-spec-instructions p input {
	border: none;
}

.contact-form__question p:last-child span:first-child label {
	margin-left: 10px;
}

.contact-form__row.strix-study .mwform-checkbox-field-text {
	font-size: 1.2rem;
}

.contact__steps.strix-study {
	width: 100%;
	border-bottom: 2px solid;
	-webkit-border-image: none;
	border-image: none;
	padding: 30px 0 20px 0;
	font-size: 1rem;
}

.contact__step.strix-study {
	color: #7a7a7a;
}
.contact__step.strix-study.is-active {
	color: #000;
}
.contact__step.strix-study + .contact__step.strix-study:before {
	filter: brightness(0.2);
}
.tutorial.strix-study__background {
	background-color: #fff;
}
.contact.strix-study.page {
	background-color: #fff;
}
.contact-form__label-question {
	font-size: 1.2rem;
	font-weight: 600;
}
.contact__label-en {
	font-size: 0.8rem;
	font-weight: 200;
}
@media (max-width: 767px) {
	.contact-form.strix-study {
		margin-top: 20px;
		padding: 15px;
	}
	.contact-form__row.strix-study {
		display: block;
	}
	.contact-form__row .contact-form__label {
		margin-bottom:13px
	}
	.contact-form__label.strix-study {
		font-size: 1rem;
	}
	.contact-form__label.strix-study.grade {
		width: 75px;
		margin-left: 0;
		margin-top: 20px;
		font-size: 0.9rem;
	}
	.contact-form__label.strix-study {
		width: auto;
	}
	.contact-form__row.strix-study input {
		padding-left: 10px;
	}
	.contact-form__input.strix-study {
		font-size: 0.9rem;
	}
	.contact-form__row.strix-study .mwform-checkbox-field-text {
		font-weight: 600;
		font-size: 0.9rem;
	}
	.contact-form__label.strix-study.survey {
		font-size:1.8rem
	}
}

/*************************************
 * Fun Hunt
 * **********************************/
.fun-hunt__image {
	width: 324px;
	height: 140px;
	margin: 0 auto;
}
@media only screen and (max-width: 768px) {
	.fun-hunt__image {
		width: 100%;
	}
}
/*************************************
 * Sync Image
 * **********************************/
.sync__image {
	width: 372px;
	height: 196px;
	margin: 0 auto;
}
@media only screen and (max-width: 768px) {
	.sync__image {
		width: 100%;
	}
}

/*********************************************************
 * Classes Used for Adjusting Images Sizes on News, etc.
 * ******************************************************/
.blog-image__small {
	width: 25%;
	height: auto;
	margin: 0 auto;
}
.blog-image__medium {
	width: 50%;
	height: auto;
	margin: 0 auto;
}
.blog-image__large {
	width: 75%;
	height: auto;
	margin: 0 auto;
}

.news-image__auto {
	max-width: 100%;
	width: auto;
	height: auto;
}

.news-image__small {
	width: 25%;
	height: auto;
}
.news-image__medium {
	width: 50%;
	height: auto;
}
.news-image__large {
	width: 75%;
	height: auto;
}

.news-image__flex-three {
	width: 33%;
}

.news-image__center {
	margin: 0 auto;
}
@media only screen and (max-width: 768px) {
	.blog-image__small,
	.blog-image__medium,
	.blog-image__large,
	.news-image__small,
	.news-image__medium,
	.news-image__large,
	.news-image__flex-three {
		width: 100%;
	}
}

@media only screen and (max-width: 500px) {
	.news-image__auto{
		width: 100%;
	}
}

/*********************************************************
 * Adjusts Tutorial Page's Body Text
 * ******************************************************/
.tutorial-tutorials__body-text a {
	line-height: 1;
	color: blue;
	-webkit-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	transition: color 0.3s ease;
}
@media (max-width: 767px) {
	.tutorial-tutorials__body-text a {
	}
}

/******************************
 * CSS for top page animation
 * ***************************/


/* Top animation */
.top-animation {
	position: relative;
    margin: 25px auto 0;
    text-align: center;
	z-index: 1;
}

/* Top animation - Title and subtitle */
.top-animation .top-animation-head {
    margin-bottom: 15px;
	font-weight: 200;
    letter-spacing: 0;
	line-height: 1.6
}

body.en .top-animation-head,
body.ko-KR .top-animation-head {
	max-width: 1200px;
	margin:0 auto;
}

.top-animation .top-animation-head .top-animation-title {
    font-size: clamp(1.8em, 5vw, 3em);
    font-weight: 600;
	margin-bottom: 20px
}

.top-animation .top-animation-head .top-animation-subtitle {
    font-size: 20px;
	margin-top: 25px;
}

body.en .top-animation .top-animation-head .top-animation-subtitle,
body.ko-KR .top-animation .top-animation-head .top-animation-subtitle {
    max-width: 850px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.top-animation .top-animation-head .top-animation-title {
		text-align: left
	}
	
	body.en .top-animation-head,
	body.en .top-animation .top-animation-head .top-animation-subtitle,
	body.ko-KR .top-animation-head,
	body.ko-KR .top-animation .top-animation-head .top-animation-subtitle {
		max-width: 100%;
	}
}

@media screen and (max-width: 768px) {
    .top-animation .top-animation-head {
        padding: 0 12px;
        padding-top: 55px;
    }

    .top-animation .top-animation-head .top-animation-subtitle {
        font-size: 1.2em;
		text-align:left
    }
}

/* Top animation - Slider */
.top-animation .top-animation-slider {
	margin-top:40px;
    margin-bottom: -120px;
    z-index: 2;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .top-animation .top-animation-slider {
        margin-bottom: -126px;
    }
}

/* top animation - Slider items  */
.top-animation .top-animation-slider .top-animation-slider-item {
    position: relative;
    width: 400px;
    height: 380px;
    overflow: visible;
}

.top-animation .top-animation-slider .top-animation-slider-item:focus {
    outline: none;
}

@media screen and (max-width: 768px) {
    .top-animation .top-animation-slider .top-animation-slider-item {
        width: 330px;
        height: 320px;
    }
}

/* Top animation - Slider images */
.top-animation .top-animation-slider-item picture {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.top-animation .before-image picture, .top-animation .after-image picture {
    max-height: 360px;
    z-index: 2;
}

.top-animation .after-owl picture {
    width: 95px;
    z-index: 2;
}
.top-animation .after-owl-eyes picture {
    width: 95px;
    z-index: 2;
}

.top-animation .after-bg picture {
    width: 460px;
	left:-33px;
	bottom:100px;
	z-index:0
}

.top-animation .top-animation-slider-item.item-02 .after-bg picture {
	left:-15px
}

.top-animation .top-animation-slider-item.item-03 .after-bg picture {
	left:-10px
}

.top-animation .top-animation-slider-item.item-06 .after-bg picture {
	left:-10px
}

@media screen and (min-width: 769px) {
    .slick-slide .sp {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .slick-slide .pc {
        display: none;
    }

    .top-animation .after-owl picture {
        width: 65px;
    }
	
	.top-animation .after-owl-eyes picture {
		width: 65px;
	}

    .top-animation .after-bg picture {
        width: 370px;
		left:-22px;
    }
	
	.top-animation .top-animation-slider-item.item-02 .after-bg picture {
		width: 380px;
		left:-25px;
		bottom:65px
	}

	.top-animation .top-animation-slider-item.item-03 .after-bg picture {
		width: 380px;
		left:-25px;
		bottom:65px
	}
	
	.top-animation .top-animation-slider-item.item-05 .after-bg picture {
		width: 380px;
		left:-25px;
		bottom:65px
	}

	.top-animation .top-animation-slider-item.item-06 .after-bg picture {
		width: 380px;
		left:-25px;
		bottom:65px
	}
}

/* Top animation - Before slider images */
.top-animation .top-animation-slider-item.item-01 .before-image picture {
    width: 250px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

.top-animation .top-animation-slider-item.item-02 .before-image picture {
    width: 200px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

.top-animation .top-animation-slider-item.item-03 .before-image picture {
    width: 200px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

.top-animation .top-animation-slider-item.item-04 .before-image picture {
    width: 210px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

.top-animation .top-animation-slider-item.item-05 .before-image picture {
    width: 260px;
	bottom:-20px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

.top-animation .top-animation-slider-item.item-06 .before-image picture {
    width: 140px;
	bottom:10px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

@media screen and (max-width: 768px) {
    .top-animation .top-animation-slider-item.item-01 .before-image picture {
		width:220px;
        right: 0px;
		bottom: 0;
    }

    .top-animation .top-animation-slider-item.item-02 .before-image picture {
		width:165px;
        right: 7px;
        bottom: 0;
    }

    .top-animation .top-animation-slider-item.item-03 .before-image picture {
		width:180px;
        right: 10px;
        bottom: 0;
    }

    .top-animation .top-animation-slider-item.item-04 .before-image picture {
		width:180px;
        right: 0;
        bottom: 0;
    }
	
	.top-animation .top-animation-slider-item.item-05 .before-image picture {
		width:240px;
		right: 10px;
		bottom: -20px;
	}
	
	.top-animation .top-animation-slider-item.item-06 .before-image picture {
		width:140px;
		right: 10px;
		bottom: 10px;
	}
}

.top-animation .top-animation-slider-item.item-01 .before-text picture {
	width : 325px;
    bottom: 95px;
    left: 25px
}

body.en .top-animation .top-animation-slider-item.item-01 .before-text picture {
    bottom: 100px;
}

.top-animation .top-animation-slider-item.item-02 .before-text picture {
	width : 325px;
    bottom: 80px;
    left: 27px
}

.top-animation .top-animation-slider-item.item-03 .before-text picture {
    width : 325px;
    bottom: 115px;
    left: 27px
}

.top-animation .top-animation-slider-item.item-04 .before-text picture {
	width : 325px;
    bottom: 115px;
    left: 27px
}

.top-animation .top-animation-slider-item.item-05 .before-text picture {
    width : 325px;
    bottom: 115px;
    left: 27px
}

.top-animation .top-animation-slider-item.item-06 .before-text picture {
    width : 325px;
    bottom: 115px;
    left: 27px
}

@media screen and (max-width: 768px) {
	.top-animation .top-animation-slider-item.item-01 .before-text picture {
		width:325px;
		bottom:60px;
		left:-25px
	}
	
    .top-animation .top-animation-slider-item.item-02 .before-text picture {
        width:325px;
		bottom:50px;
        left:-35px
    }

    .top-animation .top-animation-slider-item.item-03 .before-text picture {
        width:325px;
		bottom:75px;
        left:-30px
    }

    .top-animation .top-animation-slider-item.item-04 .before-text picture {
        width:325px;
		bottom:80px;
        left:-15px
    }
	
	.top-animation .top-animation-slider-item.item-05 .before-text picture {
        width:325px;
		bottom:75px;
        left:-30px
	}
	
	.top-animation .top-animation-slider-item.item-06 .before-text picture {
        width:325px;
		bottom:90px;
        left:-30px
	}
	
	body.en .top-animation .top-animation-slider-item.item-01 .before-text picture {
		width:295px;
		bottom:95px;
		left:0
	}
	
    body.en .top-animation .top-animation-slider-item.item-02 .before-text picture {
		width:295px;
		bottom:70px;
        left:-10px
    }

    body.en .top-animation .top-animation-slider-item.item-03 .before-text picture {
		width:295px;
		bottom:95px;
        left:-25px
    }

    body.en .top-animation .top-animation-slider-item.item-04 .before-text picture {
		width:295px;
		bottom:95px;
        left:0
    }
	
	body.en .top-animation .top-animation-slider-item.item-05 .before-text picture {
		width:295px;
		bottom:95px;
        left:-25px
	}
}

/* top animation - After slider images */
.top-animation .top-animation-slider-item.item-01 .after-image picture {
    width: 228px;
	bottom: 22px;
    right: 0;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

.top-animation .top-animation-slider-item.item-02 .after-image picture {
    width: 255px;
    right: -20px;
    bottom: 30px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

.top-animation .top-animation-slider-item.item-03 .after-image picture {
    width: 265px;
    right: 0;
    bottom: 20px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

.top-animation .top-animation-slider-item.item-04 .after-image picture {
    width: 280px;
    right: 0;
    bottom: 15px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

.top-animation .top-animation-slider-item.item-05 .after-image picture {
    width: 245px;
    right: -40px;
    bottom: 20px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

.top-animation .top-animation-slider-item.item-06 .after-image picture {
    width: 150px;
    right: -40px;
    bottom: 10px;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, 0.3));
}

@media screen and (max-width: 768px) {
    .top-animation .top-animation-slider-item.item-01 .after-image picture {
        width: 210px;
        bottom: 21px;
        right: -65px;
        left: -51px;
    }

    .top-animation .top-animation-slider-item.item-02 .after-image picture {
        width: 235px;
        bottom: 17px;
        right: -40px;
        left: -51px;
    }

    .top-animation .top-animation-slider-item.item-03 .after-image picture {
        width: 225px;
        bottom: 17px;
        right: -40px;
        left: -51px;
    }

    .top-animation .top-animation-slider-item.item-04 .after-image picture {
        width: 225px;
        bottom: 17px;
        right: -40px;
        left: -35px;
    }

    .top-animation .top-animation-slider-item.item-05 .after-image picture {
        width: 200px;
        bottom: 17px;
        right: -50px;
        left: -51px;
    }
	
    .top-animation .top-animation-slider-item.item-06 .after-image picture {
        width: 150px;
        bottom: 17px;
        right: -50px;
        left: -51px;
    }
}

.top-animation .top-animation-slider-item.item-01 .after-text picture {
    bottom: 130px;
    width: 325px;
    left: 20px;
    margin: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-02 .after-text picture {
    bottom: 145px;
    width: 325px;
    left: 35px;
    margin: 0;
	z-index:1
}

body.en .top-animation .top-animation-slider-item.item-02 .after-text picture {
	width:295px;
    bottom: 145px;
    left: 65px
}

.top-animation .top-animation-slider-item.item-03 .after-text picture {
    bottom: 155px;
    width: 325px;
    left: 50px;
    margin: 0;
	z-index:1
}

body.en .top-animation .top-animation-slider-item.item-03 .after-text picture {
    bottom: 130px;
    left: 80px
}

.top-animation .top-animation-slider-item.item-04 .after-text picture {
    bottom: 135px;
    width: 325px;
    left: 80px;
    margin: 0;
	z-index:1
}

body.en .top-animation .top-animation-slider-item.item-04 .after-text picture {
    left: 40px
}

.top-animation .top-animation-slider-item.item-05 .after-text picture {
    bottom: 125px;
    width: 325px;
    left: 50px;
    margin: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-06 .after-text picture {
    bottom: 40px;
    width: 418px;
    left: 15px;
    margin: 0;
	z-index:1
}

body.en .top-animation .top-animation-slider-item.item-05 .after-text picture {
    bottom: 130px;
    left: 80px
}

@media screen and (max-width: 768px) {
    .top-animation .top-animation-slider-item.item-01 .after-text picture {
        left: 0;
        right: 30px;
        bottom: 110px;
        margin-left: auto;
        width: 295px
    }

    .top-animation .top-animation-slider-item.item-02 .after-text picture {
        left: 0;
        right: 30px;
        bottom: 115px;
        margin-left: auto;
        width: 295px
    }

    .top-animation .top-animation-slider-item.item-03 .after-text picture {
        left: 0;
        right: -15px;
        bottom: 110px;
        margin-left: auto;
        width: 295px
    }

    .top-animation .top-animation-slider-item.item-04 .after-text picture {
        left: 0;
        right: 5px;
        bottom: 105px;
        margin-left: auto;
        width: 295px
    }

    .top-animation .top-animation-slider-item.item-05 .after-text picture {
        left: 0;
        right: 25px;
        bottom: 80px;
        margin-left: auto;
        width: 295px
    }
	
    .top-animation .top-animation-slider-item.item-06 .after-text picture {
        left: 0;
        right: -10px;
        bottom: 80px;
        margin-left: auto;
        width: 340px
    }
	
	body.en .top-animation .top-animation-slider-item.item-01 .after-text picture {
        left: 0;
        right: 50px;
        bottom: 135px;
        margin-left: auto;
        width: 250px
    }

    body.en .top-animation .top-animation-slider-item.item-02 .after-text picture {
        left: 0;
        right: 35px;
        bottom: 125px;
        margin-left: auto;
        width: 250px
    }

    body.en .top-animation .top-animation-slider-item.item-03 .after-text picture {
        left: 0;
        right: 15px;
        bottom: 130px;
        margin-left: auto;
        width: 250px
    }

    body.en .top-animation .top-animation-slider-item.item-04 .after-text picture {
        left: 0;
        right: 50px;
        bottom: 135px;
        margin-left: auto;
        width: 250px
    }

    body.en .top-animation .top-animation-slider-item.item-05 .after-text picture {
        left: 0;
        right: 50px;
        bottom: 115px;
        margin-left: auto;
        width: 250px
    }
}

@media screen and (max-width: 350px) {
    .top-animation .top-animation-slider-item.item-03 .after-text picture {
        width: 123px;
        bottom: 189px;
        left: unset;
        right: -10px;
    }
	
	.top-animation .top-animation-slider-item.item-05 .after-text picture {
		width: 123px;
		bottom: 189px;
		left: unset;
		right: -10px;
	}
	
	.top-animation .top-animation-slider-item.item-06 .after-text picture {
		width: 123px;
		bottom: 189px;
		left: unset;
		right: -10px;
	}
}

.top-animation .top-animation-slider-item.item-01 .after-owl picture {
	width: 18%;
    bottom: 245px;
    right: 0;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-02 .after-owl picture {
	width: 18%;
    bottom: 245px;
    right: 5px;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-03 .after-owl picture {
	width: 18%;
    bottom: 245px;
    right: 0;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-04 .after-owl picture {
	width: 18%;
    bottom: 245px;
    right: 0;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-05 .after-owl picture {
	width: 18%;
    bottom: 245px;
    right: 0;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-06 .after-owl picture {
	width: 18%;
    bottom: 245px;
    right: 0;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-01 .after-owl-eyes picture {
	width: 11%;
    bottom: 209px;
    right: 17px;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-02 .after-owl-eyes picture {
	width: 11%;
    bottom: 209px;
    right: 22px;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-03 .after-owl-eyes picture {
	width: 11%;
    bottom: 209px;
    right: 17px;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-04 .after-owl-eyes picture {
	width: 11%;
    bottom: 209px;
    right: 17px;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-05 .after-owl-eyes picture {
	width: 11%;
    bottom: 209px;
    right: 17px;
    margin-right: 0;
}

.top-animation .top-animation-slider-item.item-06 .after-owl-eyes picture {
	width: 11%;
    bottom: 209px;
    right: 17px;
    margin-right: 0;
}

@media screen and (max-width: 768px) {
    .top-animation .top-animation-slider-item.item-01 .after-owl picture {
        bottom: 250px;
        right: -5px;
    }

    .top-animation .top-animation-slider-item.item-02 .after-owl picture {
        bottom: 220px;
        right: 10px;
    }

    .top-animation .top-animation-slider-item.item-03 .after-owl picture {
        bottom: 220px;
        right: 10px;
    }

    .top-animation .top-animation-slider-item.item-04 .after-owl picture {
        bottom: 250px;
        right: 0;
    }

    .top-animation .top-animation-slider-item.item-05 .after-owl picture {
        bottom: 220px;
        right: 10px;
    }
	
    .top-animation .top-animation-slider-item.item-06 .after-owl picture {
        bottom: 220px;
        right: 10px;
    }
	
	.top-animation .top-animation-slider-item.item-01 .after-owl-eyes picture {
		bottom: 207px;
		right: 9px;
	}

    .top-animation .top-animation-slider-item.item-02 .after-owl-eyes picture {
		bottom: 177px;
		right: 25px;
    }

    .top-animation .top-animation-slider-item.item-03 .after-owl-eyes picture {
		bottom: 177px;
		right: 24px;
    }

    .top-animation .top-animation-slider-item.item-04 .after-owl-eyes picture {
		bottom: 208px;
		right: 14px;
    }

    .top-animation .top-animation-slider-item.item-05 .after-owl-eyes picture {
		bottom: 177px;
		right: 24px;
    }
	
    .top-animation .top-animation-slider-item.item-06 .after-owl-eyes picture {
		bottom: 177px;
		right: 24px;
    }
}

.top-animation .top-animation-slider-item.item-01 .after-star-01 picture {
    width: 50px;
    bottom: 220px;
    left: 125px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-01 .after-star-02 picture {
    width: 30px;
    bottom: 175px;
    left: 95px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-01 .after-star-03 picture {
    width: 35px;
    bottom: 150px;
    left: 275px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-02 .after-star-01 picture {
    width: 50px;
    bottom: 215px;
    left: 115px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-02 .after-star-02 picture {
    width: 30px;
    bottom: 225px;
    left: 265px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-02 .after-star-03 picture {
    width: 35px;
    bottom: 100px;
    left: 245px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-03 .after-star-01 picture {
    width: 50px;
    bottom: 145px;
    left: 115px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-03 .after-star-02 picture {
    width: 30px;
    bottom: 255px;
    left: 75px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-03 .after-star-03 picture {
    width: 35px;
    bottom: 280px;
    left: 165px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-04 .after-star-01 picture {
    width: 50px;
    bottom: 250px;
    left: 60px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-04 .after-star-02 picture {
    width: 30px;
    bottom: 85px;
    left: 75px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-04 .after-star-03 picture {
    width: 35px;
    bottom: 148px;
    left: 266px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-05 .after-star-01 picture {
    width: 50px;
    bottom: 220px;
    left: 165px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-05 .after-star-02 picture {
    width: 30px;
    bottom: 260px;
    left: 95px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-05 .after-star-03 picture {
    width: 35px;
    bottom: 70px;
    left: 140px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-06 .after-star-01 picture {
    width: 50px;
    bottom: 230px;
    left: 125px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-06 .after-star-02 picture {
    width: 30px;
    bottom: 165px;
    left: 275px;
    margin-left: 0;
	z-index:1
}

.top-animation .top-animation-slider-item.item-06 .after-star-03 picture {
    width: 35px;
    bottom: 95px;
    left: 140px;
    margin-left: 0;
	z-index:1
}

@media screen and (max-width: 768px) {
    .top-animation .top-animation-slider-item.item-01 .after-star-01 picture {
        width: 40px;
        bottom: 205px;
        left: 100px
    }
	
	.top-animation .top-animation-slider-item.item-01 .after-star-02 picture {
		width: 25px;
		bottom: 165px;
		left: 85px
	}

	.top-animation .top-animation-slider-item.item-01 .after-star-03 picture {
		width: 30px;
		bottom: 162px;
		left: 222px
	}
	
	.top-animation .top-animation-slider-item.item-02 .after-star-01 picture {
		width: 45px;
		bottom: 175px;
		left: 70px;
		margin-left: 0;
		z-index:1
	}

	.top-animation .top-animation-slider-item.item-02 .after-star-02 picture {
		width: 25px;
		bottom: 190px;
		left: 215px;
		margin-left: 0;
		z-index:1
	}

	.top-animation .top-animation-slider-item.item-02 .after-star-03 picture {
		width: 35px;
		bottom: 80px;
		left: 192px;
		margin-left: 0;
		z-index:1
	}

	.top-animation .top-animation-slider-item.item-03 .after-star-01 picture {
		width: 45px;
		bottom: 125px;
		left: 85px;
		margin-left: 0;
		z-index:1
	}

	.top-animation .top-animation-slider-item.item-03 .after-star-02 picture {
		width: 25px;
		bottom: 215px;
		left: 35px;
		margin-left: 0;
		z-index:1
	}

	.top-animation .top-animation-slider-item.item-03 .after-star-03 picture {
		width: 35px;
		bottom: 235px;
		left: 115px;
		margin-left: 0;
		z-index:1
	}
	
	.top-animation .top-animation-slider-item.item-04 .after-star-01 picture {
		width: 45px;
		bottom: 215px;
		left: 55px
	}

	.top-animation .top-animation-slider-item.item-04 .after-star-02 picture {
		width: 25px;
		bottom: 87px;
		left: 65px
	}

	.top-animation .top-animation-slider-item.item-04 .after-star-03 picture {
		width: 30px;
		bottom: 120px;
		left: 220px
	}
	
	.top-animation .top-animation-slider-item.item-05 .after-star-01 picture {
		width: 45px;
		bottom: 175px;
		left: 125px;
		margin-left: 0;
		z-index:1
	}

	.top-animation .top-animation-slider-item.item-05 .after-star-02 picture {
		width: 25px;
		bottom: 205px;
		left: 55px;
		margin-left: 0;
		z-index:1
	}

	.top-animation .top-animation-slider-item.item-05 .after-star-03 picture {
		width: 35px;
		bottom: 50px;
		left: 100px;
		margin-left: 0;
		z-index:1
	}
	
	.top-animation .top-animation-slider-item.item-06 .after-star-01 picture {
		width: 45px;
		bottom: 190px;
		left: 70px;
		margin-left: 0;
		z-index:1
	}

	.top-animation .top-animation-slider-item.item-06 .after-star-02 picture {
		width: 25px;
		bottom: 135px;
		left: 215px;
		margin-left: 0;
		z-index:1
	}

	.top-animation .top-animation-slider-item.item-06 .after-star-03 picture {
		width: 35px;
		bottom: 85px;
		left: 95px;
		margin-left: 0;
		z-index:1
	}
}

/* Top animation - Slider background */
.slider-bg-container{
	position:relative;
	height:135px;
	background:#9ce9f1;
	margin-top: 25px
}

@media (max-width:767px) {
	.slider-bg-container{
		margin-top: 5px
	}
}

/****************************************
 * CSS for logo banner
 * **************************************/
.logo-banner {
	position: relative;
	background: #fff;
	z-index: 1;
}

.logo-banner.platforms {
	max-width: 820px;
	margin: 50px auto 0
}

.page-strix-cloud .logo-banner.platforms,
.page-strix-engine .logo-banner.platforms{
	margin: 0 auto
}

.logo-title {
	background-color: #60C1DF
}

.logo-title h2 {
	text-align: center;
	font-size: 22px;
	color: #fff;
	padding: 5px
}

.logos-container {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: 0 auto;
	padding: 15px 0
}

.logo-banner.platforms .logos-container {
	justify-content: center;
	padding: 25px
}

.logo-image {
	width: 180px;
	height: 100%;
	image-rendering: -webkit-optimize-contrast;
	position: relative;
}

.logo-banner.platforms .logo-image:last-child::after {
	content: "*";
	position: absolute;
	top: 0;
	right: 0;
}

body.jp .logo-banner.platforms .logo-image:last-child::after {
	content: "※";
}

body.en .logo-image:last-child::after,
body.ko-KR .logo-image:last-child::after {
	font-size: 16px;
}

.logo-banner.platforms .logos-container .logo-image {
	max-width: 140px;
	width: 100%;
	height: 60px;
	margin: 10px 10px
}

.logo-banner.platforms .logos-container .logo-image.ex-mg {
	margin: 10px 20px;
}

@media (max-width:767px) {
	.logo-title h2 {
		font-size: 18px
	}
	
	.logo-image {
		width: 150px
	}
	
	.logo-banner.platforms .logos-container .logo-image {
		max-width: 70px;
		width: 100%;
		height: 30px;
		margin: 10px
	}
}

/****************************************
 * CSS for video section on Top Page
 * **************************************/
.index-about__title-small {
	font-size: clamp(20px, 3vw, 45px);
}
.index-about-video {
	position:relative;
}
@media (max-width:1200px) {
	.index-about-video {
		margin-top:0;
	}
}
.index-about-video__container {
	position:relative
}
.side-banner__container {
	width: 100%;
    max-width: 180px;
	position: fixed;
	z-index: 5;
	bottom: 25px;
	right: -1px;
	filter: drop-shadow(3px 2px 5px rgba(0 0 0 / 35%));
	z-index:99999;
	transition: all 0.3s ease-in-out;
}
body.jp .side-banner__container.webgl {
	width: 237px;
}
.side-banner-close-btn {
	width: 15px;
	float: right;
	margin-right: 5px;
	transition: all 0.3s ease-in-out;
}
.side-banner-close-btn:hover {
	cursor: pointer;
}
.side-banner-close {
	display: none;
}
.side-banner-strix-cloud-btn {
	display:inline-block;
	position: relative;
	transition: all 0.3s ease-in-out;
}
.side-banner-text {
	width: 100%;
	position: absolute;
	bottom: 50px;
	text-align: center;
    color: #fff;
    font-size: 18px;
	font-weight: 600;
    line-height: 150%;
}
.side-banner-text span {
	color: #f8ff78;
}
.side-banner-text.webgl {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	font-size: 13px;
	text-align: left;
	padding: 5px 8px;
    background-image: linear-gradient(to left, #ff007c, #ff0799);
}
.side-banner__img {
	max-width: 105px;
	padding: 5px;
}
@media (max-width: 767px) {
	.side-banner__container {
		max-width: 135px;
		bottom: 0;
	}
	.side-banner__container.webgl {
		max-width: 245px
	}
	.side-banner-text {
		bottom: 42px;
		font-size: 14px;
	}
	.side-banner-text.flex {
		font-size: 12px;
	}
}

.side-banner-active {
	transform: translatex(250px)
}

/* @media (hover: hover) and (pointer: fine) {
	.side-banner-strix-cloud-btn:hover {
		cursor:pointer;
		-webkit-backface-visibility: hidden;
		-ms-transform: translate3d(-8px, 0, 0) scale(1.1);
		-webkit-transform: translate3d(-8px, 0, 0) scale(1.1);
		transform: translate3d(-8px, 0, 0) scale(1.1);
	}
} */
.index-about-promo__container {
	position:relative;
	background-image: linear-gradient(to right, #c4f4fc 0%, #d4f8ee 90%, transparent 90%, transparent 100%);
	padding-bottom:1px;
}
.index-about-promo__container.container-2 {
	background-image: linear-gradient(to right, transparent 0%, transparent 3%, #d4f8ee 3%, #c4f4fc 100%);
}
.index-about-promo__container.container-3 {
	background-image: linear-gradient(to right, #c4f4fc 0%, #d4f8ee 90%, transparent 90%, transparent 100%);
	background-size: 100% 85%;
    background-repeat: no-repeat;
	margin-bottom:120px;
}
.index-about-promo__text,
.index-about-promo__title--webgl {
	font-size:clamp(25px, 3vw, 32px);
	font-weight:600;
	line-height:1.6;
	text-align:center;
	padding: 15px 0;
	margin-bottom: 15px;
    background: linear-gradient(to right,rgb(152 203 208) 0%,rgb(152 219 205) 47%,rgb(152 203 208) 100%) left bottom no-repeat;
    background-size: 100% 4px;
}
.index-about-video__description {
	width: 75%;
    margin: 25px auto;
    background-color: #fff;
    padding: 15px;
	border: 1px solid #6ad9d3;
}
.index-about-video__description p {
	font-size:16px;
}
.index-about-promo-graph-video__container {
	width: 75%;
    margin: 25px auto;
    padding: 15px;
	display: flex;
    align-items: center;
    gap: 17px;
}
.index-about-promo-graph-video__container div {
	width:50%;
}
.index-about-promo-graph-video__container .gallery-popup p {
	font-size: clamp(20px, 1.5vw, 26px);
    margin-top: 60px;
    margin-bottom: 10px;
    text-align: center;
}
.index-about-video__description.video__description-2 {
	margin-bottom:0;
}
.index-about-promo__extra {
	width: 75%;
    margin: 0px auto 25px;
    padding: 15px 0;
	color: #7d7d7d;
}
.index-about-promo-btn__container {
	position:relative;
	width: 40%;
    margin: 0 auto;
    text-align: center;
    background-image: linear-gradient(to right,#168ee1,#fc0899);
    padding: 22px 15px;
    font-size: clamp(16px, 2vw, 40px);
}
.index-about-promo-btn__container:after {
	content: "";
    display: block;
    position: absolute;
    background: #fff;
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    top: 8px;
    left: 8px;
    border-radius: inherit;
}
.index-about-promo-btn__container div {
	position:relative;
	z-index:1;
}
.index-about-promo-btn__container div h4 {
	line-height:180%;
}
.which-strix-text {
	font-size: clamp(20px, 3.5vw, 55px);
}
.index-about-promo-btn__container div div {
	width: 40%;
	min-width:175px;
    margin: 15px auto 0;
    padding: 6px 15px;
	color:#fff;
	font-weight:600;
    background-image: linear-gradient(to right,#168ee1,#fc0899);
	font-size: clamp(15px, 1.8vw, 22px);
}
body.jp .l-header,
body.ko .l-header,
body.jp .l-header.is-not-fixed,
body.ko .l-header.is-not-fixed {
}
/* body.front-page.jp .header-menu__text {
	color:#1c1c1c;
}
body.front-page.jp .header-menu__link--parent:after {
	border-left-color:#1c1c1c;
}
body.front-page.jp .header-logo__link .logo-7 {
	fill: #1c1c1c;
}

body.front-page.jp .hamburger .hamburger-line,
body.front-page.jp .hamburger:before,
body.front-page.jp .hamburger:after {
	background-color: #1c1c1c;
} */
@media (max-width:767px) {
	.index-about-promo__container {
		position:relative;
		background-image: linear-gradient(to right, #c4f4fc 0%, #d4f8ee 98%, transparent 98%, transparent 100%);
	}
	.index-about-promo__container.container-2 {
		background-image: linear-gradient(to right, transparent 0%, transparent 3%, #d4f8ee 3%, #c4f4fc 100%);
	}
	.index-about-promo__text {
		font-size:24px;
		text-align:left;
		background-size:98% 4px;
	}
	.index-about-video__description {
		width: 90%;
	}
	.index-about-promo-graph-video__container {
		width:95%;
		margin-left: auto;
   		margin-right: 12px;
		flex-direction:column;
	}
	.index-about-promo-graph-video__container div {
		width:100%;
	}
	.index-about-promo__extra {
		width: 89%;
	}
	.index-about-promo__container.container-3 {
		background-size: 108% 85%;
	}
	.index-about-promo-btn__container {
		width:90%;
		font-size:clamp(15px, 4.5vw, 30px);
	}
	.which-strix-text {
		font-size: clamp(20px, 7vw, 45px);
	}
}
@media (max-width:425px) {
	.index-about-promo__text {
		font-size:22px;
	}
}
.index-about-promo-text__container {
	position:relative;
	width: 50%;
	margin:0 auto;
}
.index-about-video__video {
	position:relative;
    width:100%;
	margin: 0 auto;
	-moz-box-shadow: 12px 8px 10px -5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 12px 8px 10px -5px rgb(0 0 0 / 30%);
    -ms-box-shadow: 12px 8px 10px -5px rgba(0, 0, 0, 0.3);
    box-shadow: 12px 8px 10px -5px rgb(0 0 0 / 30%);
}
@media (max-width:767px) {
	.index-about-promo-text__container {
		width: 95%;
	}
	.index-about-promo-text__container.text__container-2 {
		margin-left:auto;
		margin-right:0;
	}
	.index-about-video__video, body.en .index-about-video__video {
		max-width:95%;
	}
}
.index-about-video__video-responsive {
	position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    padding-bottom: 56.25%;
	z-index:1
}
.index-about-video__video-responsive iframe{
	position: absolute;
	width: 100%;
	height: 100%;
}
.index-about-video__img {
	width:45%;
	position:absolute;
	top:90px;
	left:640px
}
@media (max-width:1200px) {
	.index-about-video__img {
		display:none
	}
}
@media (max-width:767px) {
	.index-about-promo-graph-video__container div.play-btn {
		max-width: 20%;
	}
}
/************************************************
 * Video Popup
 * **********************************************/
#video-popup {
  width:75%;
  margin:0 auto;
}

#video-popup iframe{
  width:100%;
  margin:0 auto;
}

.play-btn {
	max-width:140px;
	width: 20%;
    color: #eb4b5a;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	-webkit-filter: drop-shadow(5px 5px 5px rgb(0 0 0 / 45%));
    filter: drop-shadow(5px 5px 5px rgb(0 0 0 / 45%));
    z-index: 100;
}

.video-bubble {
	position:absolute;
	top: 50%;
    left: -300px;
    transform: translateY(-50%);
}

#video-popup_btn > div > picture > img {
	transition: .3s ease-in-out
}

#video-popup_btn:hover > div > picture > img {
	transform: scale(1.2)
}

.embed-responsive {
	position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive::before {
	display: block;
	content: "";
}

.embed-responsive iframe {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.embed-responsive_aspect-ratio::before {
	padding-top: 56.25%;
}

.mfp-bg {
	background: rgba(255, 255, 255)!important;
	opacity: 0.9!important;
	z-index: 99999!important
}

.mfp-wrap {
	z-index: 99999!important
}

.mfp-close {
	color: #000!important;
	font-size: 35px!important
}

@media (max-width: 767px) {
	.embed-responsive_aspect-ratio::before {
		padding-top: 56.325%;
	}
}

/****************************************
Style for Blog Interviews
*****************************************/
.interview__container {
	border-bottom: none
}
.interview__title {
	position: relative;
	padding-left: 20px;
	font-weight: 700
}
#interview__title {
	font-size: 22px
}
#interview-question {
	font-size: 18px;
	margin: 20px 0 0 0
}
.interview__title:before {
	content: "";
	background: #000;
	width: 5px;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translatey(-50%)
}
.interview__container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start
}
.interview-img-name__container {
	width: 93px
}
.interview-img-name__container img {
	display: inline-block;
	border-radius: 50%
}
.interview-img-name__container span {
	display: block;
    font-size: 16px;
    font-weight: 700;
	margin-top: 12px;
    line-height: 1;
	text-align: center
}
.interview__body {
    width: calc(100% - 138px);
    text-align: left;
	border-bottom: 1px solid #dfdfdf
}
#interview__body p {
    margin: 0
}

#interview__body-sp p {
    margin: 20px 0
}

.interview-video {
	border-bottom: 1px solid #cccccc;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.interview-video iframe {
	width: 100%;
	height: 100%;
	position: absolute
}

@media(max-width: 768px) {
	.interview {
		border-bottom: 1px solid #cccccc;
	}
	.interview__container {
		border-bottom: none
	}
	.interview__video-container {
		margin-bottom: 30px
	}
	.interview-img-name__container {
		width: 63px
	}
	.interview-img-name__container span {
		margin-top: 8px;
		font-size: 12px;
	}
	.interview__body {
		display: flex;
		flex-direction: column;
		width: calc(100% - 66px);
		border-bottom: none
	}
	#interview__body-sp p {
		margin: 0
	}
}

/*********************
 * reCAPTCHA Badge
 * ******************/
.grecaptcha-badge {
	z-index:9999
}

/*********************
 * Terms of Use Link
 * ******************/
.terms-of-use__link {
	display:inline-block;
	color:#008dff
}

/************************************************
 * Strix Messenger
 * **********************************************/
.strix-mv.strix-messenger:before {
	content: none
}

.strix-features--messenger {
	position: relative
}

.strix-features--messenger:before,
.strix-features--messenger:after {
	content: "";
    display: block;
    position: absolute;
    width: 100vw;
    height: 650px;
    background: #fff;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: skewY(23deg) translateY(-100px);
    transform: skewY(23deg) translateY(-100px);
    z-index: 1;
}

.strix-features--messenger:before {
	top: 220px
}

.strix-features--messenger:after {
	top: 3910px
}

.strix-features--messenger.strix-license:before {
	top: 910px;
	height: 350px
}

.strix-features--messenger.strix-license:after {
	content: none
}
	
.strix-messenger__title-details--container {
	display: block;
    position: relative;
    width: 1040px;
    margin: 25px auto 50px;
}

.strix-messenger__title-details--item {
	text-align: center;
    font-size: 18px;
    color: #fff;
    background-image: linear-gradient(45deg, #6700da, #004fdf);
    width: 30%;
    z-index: 1
}

.strix-messenger__title-details--item-text {
	color: #fff;
}

.strix-messenger__title-details--description {
	color: #643400;
    background: #fff;
    width: 700px;
    padding: 20px 25px;
    text-align: left;
    margin-left: 20px;
}

.strix-feature__item-description.strix-messenger {
	max-width: 485px;
	width: 100%;
	color: #0064D2
}

.strix-use-case__item:nth-child(2) .strix-feature__item-description.strix-messenger,
.strix-use-case__item:nth-child(4) .strix-feature__item-description.strix-messenger {
	right:-325px
}

.strix-features-messenger {
	position: relative
}

.strix-feature__container {
	width: 100%;
    max-width: 730px;
    margin: 30px auto 0
}

.strix-feature__item {
	margin-bottom: 30px
}

.strix-feature__item:last-child {
	margin-bottom: 0
}

.strix-features-03__item-title.strix-messenger {
	font-size: 19px
}

.strix-features-sub_description.strix-messenger {
	margin: 0
}

.strix-features-messenger-subtitle__bottom {
	max-width: 880px;
	width: 100%;
	margin: 60px auto 0;
	position: relative;
}

.strix-features-messenger-subtitle__bottom-description {
	width: 105%;
	padding: 15px 25px;
    background: linear-gradient(30deg,#008dff,#1190cf 12%,#17dca4 55%,#1190cf 64%,#008dff);
    position: relative;
	z-index: 1
}

.strix-features-messenger-subtitle__bottom-description:after {
	content: "";
    display: block;
    position: absolute;
    background: #fff;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: 1px;
    left: 1px;
    border-radius: inherit;
}

.strix-features-messenger__svg-container {
	position: relative;
    width: 50%;
    top: -30px;
    right: -785px;
}

.strix-messenger__item-text {
	position: relative;
	z-index: 1
}

.strix-messenger__item-text > .strix-feature__item {
	margin-bottom: 10px
}

.strix-messenger__item-text > .strix-feature__item:last-child {
	margin-bottom: 0
}

body.jp .strix-messenger__item-text {
	font-size: 15px;
	letter-spacing: .08em;
	line-height: 2;
	font-weight: 400
}

body.en .strix-messenger__item-text {
	font-size: 16px;
	letter-spacing: .04em;
	line-height: 1.7;
	font-weight: 400
}

.strix-feature__item--image {
	width: 100%;
	max-width: 450px;
	margin: 15px auto 0
}

.strix-projects__container {
	max-width: 815px;
    width: 100%;
    margin: 50px auto;
}

.strix-projects__title.strix-messenger {
	max-width: none;
	margin: unset
}

.strix-projects__title.strix-messenger:after {
	width: 60%;
	left: 455px
}

body.en .strix-projects__title.strix-messenger:after {
	width: 48%;
	left: 560px
}

.strix-use-case__item--cloud:nth-child(4) .strix-use-case__item-text.strix-messenger:before {
	-webkit-transform: translateX(50px) rotate(60deg);
    transform: translateX(50px) rotate(60deg);
}

.strix-use-case__item--cloud:nth-child(4) .strix-use-case__item-text.strix-messenger:after {
	-webkit-transform: translateX(50px) rotate(60deg);
	transform: translateX(50px) rotate(60deg);
}

.strix-features-03__item-description {
	font-size: 16px
}

.strix-features__body--engine--01.strix-messenger {
	margin-bottom: 0
}

.strix-item__header.strix-messenger {
	margin: 89px auto 100px
}

.strix-license.strix-messenger {
	margin-top: 180px
}

@media (max-width: 1366px) {
	.strix-mv__body.strix-messenger {
		right:100px!important
	}
	
	.strix-features-messenger__svg-container {
		top:5px;
		right:-255px
	}
}

@media (max-width: 767px) {
	.strix-mv__body.strix-messenger {
		top:0!important;
		right:0!important
	}
	
	.strix-messenger__title-details--container {
		width: 85vw;
    	margin: 30px auto;
	}

	.strix-messenger__title-details--item {
		font-size: 18px;
		width: 300px;
		top: -4px;
		left: 0;
	}

	.strix-messenger__title-details--item-text {
		color: #fff;
	}

	.strix-messenger__title-details--description {
		width: 95%;
		padding: 20px
	}
	
	.strix-features-messenger-subtitle__bottom-description {
		width: 90vw
	}
	
	.strix-features-messenger__svg-container {
		position: initial;
		width: 100%;
		margin: 30px auto 0;
	}
	
	.strix-messenger__item-text > .strix-feature__item {
		margin-bottom: 15px
	}
	
	body.jp .strix-messenger__item-text {
		font-size: 14px;
		line-height: 1.4
	}
	
	body.en .strix-messenger__item-text {
		font-size: 15px
	}
	
	.strix-projects__title.strix-messenger:after {
		display: none
	}
	
	.strix-features--messenger:before {
		top: 90px
	}
	
	.strix-features--messenger:after {
		top: 4115px
	}
	
	.strix-features--messenger.strix-license:before {
		top: 690px
	}
	
	.strix-features-03__item-description {
		font-size: inherit
	}
	
	.strix-features__body--engine--01.strix-messenger {
		margin-bottom: 110px
	}
	
	.strix-license.strix-messenger {
		margin-top: 0
	}
}

/************************************************
 * Strix Cloud Line for Price Revision
 * **********************************************/
hr.strix-price-table--over-detail__line {
    width: 100%;
    display: block;
    color: gray;
    border-style: inset;
    border-width: 1px;
    margin: 0 0 0.5em;
}

@media (max-width: 767px) {
	hr.strix-price-table--over-detail__line,
	body.en hr.strix-price-table--over-detail__line{
		margin: 0 0 1em;
	}
	body.en hr.strix-price-table--over-detail__line {
		width: 85%;
	}
}

/************************************************
 * Technical FAQ
 * **********************************************/
.technical-faq__title {
	width: 583px;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.technical-faq__title {
		width: 300px;
		margin-bottom: 15px;
	}
}

/************************************************
 * Addition for loading animation for top page JP
 * **********************************************/
.index-loading {
	background-color:#fff
}

body.jp .index-mv__right-wrapper,
body.jp .index-mv__news {
	opacity:1!important;
	animation: none;
}

.news-link-center {
	text-align: center;
}

body.jp .index-mv__video-inner:before {
	opacity: 0!important;
}

body.front-page.en .index-about .index-about__inner,
body.front-page.ko .index-about .index-about__inner {
	padding: 110px 0 0
}

body.front-page .header-register__link.sign-up {
	margin: 35px auto 20px!important;
}

@media only screen and (max-width: 1366px){
	body.front-page .header-register__link.sign-up {
		max-width: 210px;
	}
}

.strix-tutorial_title {
	font-size: clamp(15px, 5vw, 25px);
    max-width: 1000px;
    margin: 30px auto 0;
	padding:0 12px;
    line-height: 145%;
}

body.front-page.en .sdk-video__title,
body.front-page.ko .sdk-video__title {
	font-size:clamp(15px, 2vw, 20px)
}

.tutorial-video-container {
	display: flex;
	height: auto;
	max-width: 1400px;
	margin: 0 auto 30px;
	padding: 15px;
}

.tutorial-video-container > * + * {
	margin-left: 15px!important;
}

.tutorial-video-container .video-container {
	max-width: 100%;
	width: 100%
}

.tutorial-video-container .video-container .video-responsive iframe {
	top:0;
	left:0;
}

@media (max-width: 768px) {
	.tutorial-video-container {
		flex-direction:column;
		margin-bottom: 0;
	}
	
	.tutorial-video-container > * + * {
		margin-left: 0!important;
	}
}

body.front-page .strix-engine-start-cv__body,
body.front-page.strix-engine-start-cv__body {
	margin-top: 0!important;
	margin-bottom:50px!important
}

body.front-page .strix-engine-start-cv__link,
body.front-page .strix-engine-start-cv__link {
	display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 515px;
    margin: 30px auto 0;
}

body.front-page.ja .strix-engine-start-cv__link,
body.front-page.ja .strix-engine-start-cv__link {
    max-width: 535px;
}

body.front-page .strix-engine-start-cv__link > * + *,
body.front-page .strix-engine-start-cv__link > * + * {
	margin-left: 15px;
}

body.front-page .strix-engine-start-cv__link .cmn-button__text:after,
body.front-page .strix-engine-start-cv__link .cmn-button__text:after {
	content: none
}

.strix-slideshow__title {
	color: #fff;
	font-size: clamp(15px, 5vw, 25px);
    max-width: 1000px;
    margin: 30px auto;
    line-height: 145%;
	text-align: center
}

.projects-slideshow div {
	margin: 0 15px
}

.projects-slideshow img {
	filter: brightness(0.5);
	transition: all 0.3s ease-in-out
}

.projects-slideshow .slick-center img {
	filter: brightness(1);
	transform: scale(1.09)
}

.strix-platform-list__container {
	max-width: 1200px;
    margin: 60px auto 0;
	padding: 0 25px
}

.strix-platform-list__container .sdk-about__platform-list {
	width: 100%;
	height: 100%;
	padding: 50px 100px
}

.strix-platform-list__container .sdk-about__platform-list .sdk-about__platform-items {
	top: 0;
    transform: translatey(0);
}

.strix-platform-list__container .sdk-about__platform-list .sdk-about__platform-items img {
	width: 100%
}

.sdk-about__platform-title {
	margin: 0 auto 15px!important;
}

@media (max-width: 768px) {
	.projects-slideshow {
		max-width: 100%;
	}
	
	.strix-platform-list__container {
		padding: 0
	}
	
	.strix-platform-list__container .sdk-about__platform-list {
		max-width: 100%;
		padding: 35px;
		margin: 0
	}
	
	.strix-platform-list__container .sdk-about__platform-list .sdk-about__platform-items img {
		max-width: 529px;
		width: 100%;
		margin: 0 auto
	}
	
	.strix-tutorial_title,
	.strix-slideshow__title {
		text-align: left
	}
}

/************************************************
 * reCAPTCHA text on contact page
 * **********************************************/
.grecaptcha-badge { 
    visibility: hidden;
}
.contact__form-heading.recaptcha {
	margin-bottom: 0;
}
.contact__form-text.recaptcha {
	text-align: center;
	color: #7d7d7d;
	font-size: 12px;
}


.contact-form__row.survey p {
	display: flex;
	flex-direction: column;
}

.contact-form__row.survey p .mwform-checkbox-field + .horizontal-item {
	margin-left: 0;
}


/************************************************
 * Strix WebGL Page
 * **********************************************/
 .strix-webgl {
	position: relative;
	z-index: 2;
 }

 .strix-mv__inner.webgl {
	max-width: 1100px;
 }

 .strix-mv__header.webgl {
	position: initial;
 }

 .strix-mv__header.webgl > .strix-mv__title {
	line-height: 1.2;
	margin-bottom: 15px;
	padding-left: 0;
 }

 .strix-mv__header.webgl > .strix-mv__description {
	padding-left: 0;
 }

 .strix-mv__body.webgl {
	position: initial;
	height: auto;
 }

 .strix-mv__header-description {
	margin-top: 30px;
	font-size: clamp(14px, 3vw, 18px);
	display: flex;
	align-items: center;
	gap: 50px;
}

.strix-mv__header-text-container {
	width: 100%;
}

.strix-webgl__mv {
	width: 100%;
	height: inherit;
}

 .strix-mv__header-text-container h2 {
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1.6;
}

 .strix-mv__header-text-container h3 {
	font-size: clamp(18px, 3vw, 26px);
}

.index-about-promo__container.webgl .index-about-promo-text__container {
	width: 65%;
}

.index-about-promo-text__container hr {
	background: #e7e7e7;
    width: 100%;
    height: 2px;
	margin: 14px 0;
}

 .strix-mv__header-description p {
	margin-top: 25px;
}

.index-about-promo__container.webgl {
	background-image: linear-gradient(-45deg, #00eba6 0%, #00caab 33%, #00a1b9 66%, #0068dc 100%);
}

.index-about-promo__container.container-2.webgl {
	margin-top: 80px;
	background-image: linear-gradient(-45deg, #0068dc 0%, #00a1b9 33%, #00caab 66%, #00cd91 100%);
}

.index-about-promo__title--webgl {
	color: #fff;
	font-size: clamp(25px, 3vw, 30px);
	background: none;
	margin-bottom: 0;
	padding-top: 35px;
	padding-bottom: 0;
}

.index-about-promo__note--webgl {
	margin: 0px auto 25px;
    color: #fff;
    text-align: center;
    padding: 0px 15px;
}

.index-about-promo__webgl-img-container {
	display: flex;
    align-items: center;
    align-content: center;
	justify-content: center;
    margin-bottom: 45px;
	gap: 15px;
	padding-top: 15px;
}

.index-about-promo__webgl-logo {
	max-width: 400px;
    width: 100%;
    flex: 1;
}

.index-about-promo__img {
	max-width: 485px;
	width: 100%;
	/* margin: 0 auto; */
	flex: 1;
}

.index-about-webgl-sample__container {
	width: 100%;
    height: auto;
    max-width: 1000px;
    margin: 0 auto 30px;
    padding: 15px;
}

.index-about-webgl-sample__container div {
	position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding-bottom: 67.25%;
}

.index-about-webgl-sample__container iframe {
	position: absolute;
    width: 100%;
    height: 100%;
}

.webgl-controls-table {
	margin: 25px auto 15px;
    text-align: center;
	border-collapse: collapse;
    width: 100%;
    max-width: 700px;
    table-layout: fixed;
}

.webgl-controls-table tbody {
	background: #fff;
}

.webgl-controls-table tbody tr,
.webgl-controls-table tbody td{
	border: 1px solid black
}

.webgl-controls-table tbody th {
	background-color: #f4f4f4;
}

.index-strix-cloud__title {
	color: #000;
    font-size: clamp(22px, 3vw, 35px);
    line-height: 1.6;
}

.strix-cloud__title-pink {
	color: #ff0095;
}

.index-engine.webgl {
	padding-bottom: 0;
}

.index-engine.webgl::before {
	content: "";
    display: block;
    position: absolute;
    top: -15px;
    width: 100vw;
    height: 620px;
    background: #fff;
    -webkit-transform: skewY(-30deg) translateY(-100px);
    transform: skewY(-30deg) translateY(-100px);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.index-engine__items.webgl  .index-engine__item-text {
	padding: 12px 40px 18px;
}

@media (max-width: 768px) {
	.strix-mv__svg--webgl {
		padding-top: 70px;
	}

	.strix-mv__title.webgl {
		margin-top: 35px;
	}

	.strix-mv__header.webgl {
		padding: 0;
	 }

	 .strix-mv__header-description {
		padding-left: 0;
	}

	.index-about-promo__container.webgl .index-about-promo-text__container {
		width: 95%;
	}

	.index-about-promo__container.webgl {
		background-image: linear-gradient(-45deg, #00eba6 0%, #00caab 33%, #00a1b9 66%, #0068dc 100%);
	}
	
	.index-about-promo__container.container-2.webgl {
		margin-top: 80px;
		background-image: linear-gradient(-45deg, #0068dc 0%, #00a1b9 33%, #00caab 66%, #00cd91 100%);
	}

	.index-about-promo__title--webgl {
		text-align: center;
	}

	.index-about-promo__webgl-img-container {
		flex-direction: column;
		padding: 0 15px;
	}

	.index-about-promo__webgl-logo {
		max-width: 290px;
		margin-bottom: 30px;
	}

	.index-about-promo__img {
		width: 100%;
	}

	.index-about-promo__note--webgl {
		font-size: 16px;
	}

	.index-about-webgl-sample__container div {
		width: 95%;
	}

	.index-engine.webgl  .index-engine__inner {
		padding-top: 60px;
	}

	.index-engine.webgl::before {
		top: 75px;
	}

	.index-engine__items.webgl {
		max-width: 375px;
		width: 90%;
		display: flex;
	}

	.index-engine__items.webgl  .index-engine__item-container {
		display: block;
	}

	.index-engine__items.webgl  .index-engine__item-img {
		max-width: 290px;
		width: 75%;
		padding: 22px 15px 15px;
	}

	.index-engine__items.webgl  .index-engine__text-btn div {
		margin: 15px auto 35px;
	}

	.strix-features-webgl__container {
		width: 95%;
		margin: 0 auto;
	}

	body.en .index-engine.webgl {
		padding: 0;
	}
}

.other-blog__btn {
	width: 500px;
	padding: 0 90px;
	margin-top: 30px;
}

@media (max-width: 768px) {
	.other-blog__btn {
		width: 80%;
		margin: 30px auto;
		padding: 0;
	}
}

body.ko-KR div.cmn-news-list__title.price-revision {
	font-family: Heebo, sans-serif;
}