@charset "UTF-8";

/*

**************************************************************************

*	fields eva15 common.css

**************************************************************************/



/* --------------------------------------------------

		foundation

-------------------------------------------------- */

/* http://meyerweb.com/eric/tools/css/reset/

   v2.0 | 20110126

   License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}



* {

	box-sizing: border-box;

}

html {

	font-family: 'Noto Sans JP', sans-serif;

	font-size: 62.5%;

	word-wrap: break-word;

	-webkit-text-size-adjust: none;

	-webkit-font-smoothing: antialiased;

	overflow-y: scroll;

	height: 100%;

}

body {

	position: relative;

	overflow-x: hidden;

	font-size: 1.6rem;

	line-height: 1.8;

	color: #000000;

}

a {

	outline: none;

	color: #000000;

	text-decoration: none;

	-webkit-tap-highlight-color: rgba(0,0,0,0);

}

img {

	vertical-align: bottom;

	max-width: 100%;

}

[class*=js-fadeUp] {

	position: relative;

	z-index: 1;

	opacity: 0;

}



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

html.is-nav {

	overflow-y: auto;

}

img {

	max-width: none;

	width: 100%;

}

}





/* --------------------------------------------------

		layout

-------------------------------------------------- */

.l-wrap {

	position: relative;

}

.l-header {

	position: fixed;

	z-index: 100;

	top: 0;

	left: 0;

	width: 100%;

	height: 80px;

	background-color: #000000;

}

.l-header__content {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: space-between;

	height: 80px;

}

.l-header__logo {

	width: 153px;

}

.l-header__nav-toggle {

	display: none;

}

.l-nav__list {

	display: flex;

	margin-right: -20px;

}

.l-nav__list li {

	padding: 0 20px;

}

.l-nav__list li > * {

	position: relative;

	font-size: 1.6rem;

	color: #ffffff;

	display: block;

}

.l-nav__list li a:before {

	content: "";

	position: absolute;

	top: -30px;

	left: 0;

	width: 100%;

	height: 4px;

	background-color: #ffffff;

	pointer-events: none;

	transition: transform .3s ease;

}

.l-nav__list li a:hover:before,

.l-nav__list li a.is-active:before {

	transform: translateY(4px);

}

.l-nav__list li > * span {

	position: relative;

	display: inline-block;

}

.l-nav__list li .is-deactive {

	color: #333333;

}

.l-main {

	position: relative;

	padding-top: 80px;

	overflow: hidden;

}

.l-title {

	position: relative;

	padding: 13px 0;

	background-color: #505050;

	color: #ffffff;

}

.l-title:before {

	content: "";

	position: absolute;

	top: 50%;

	left: 0;

	height: 15px;

	width: 50vw;

	background-image: url(../img/line_01.png);

	background-position: right center;

	background-size: auto 15px;

	background-repeat: repeat-x;

	transform: translateY(-50%);

}

.l-footer {

	padding: 50px 0;

	background-color: #505050;

	background-image: url(../img/line_01.png);

	background-position: center bottom;

	background-size: auto 15px;

	background-repeat: repeat-x;

	color: #ffffff;

}

.l-footer__content {

	display: flex;

	align-items: center;

	justify-content: center;

}

.l-footer__copyright {

	font-size: 1.9rem;

	margin-right: 20px;

}

.l-footer__logo {

	display: flex;

	justify-content: center;

}

.l-footer__logo--bisty {

	position: relative;

	width: 98px;

	margin: 10px 10px 0;

}

.l-footer__logo--fields {

	width: 129px;

	margin: 0 10px 10px;

}
.l-footer__text {
	text-align: center;
}


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

.is-nav .l-wrap {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

}

.l-header__nav-toggle {

	position: absolute;

	z-index: 10;

	display: block;

	top: 22px;

	right: 2.083333333333333%;

	width: 35px;

	height: 35px;

	cursor: pointer;

}

.l-header__nav-toggle:before {

	content: "";

	position: absolute;

	top: 5px;

	left: 0;

	width: 100%;

	height: 2px;

	background-color: #ffffff;

	transition: top .2s ease,

				transform .2s ease;

}

.l-header__nav-toggle:after {

	content: "";

	position: absolute;

	bottom: 5px;

	left: 0;

	width: 100%;

	height: 2px;

	background-color: #ffffff;

	transition: top .2s ease,

				transform .2s ease;

}

.l-header__nav-toggle span {

	position: absolute;

	top: calc(50% - 1px);

	left: 0;

	width: 100%;

	height: 2px;

	background-color: #ffffff;

	transition: opacity .3s ease;

}

.is-nav .l-header__nav-toggle:before {

	top: calc(50% - 1px);

	transform: rotate(45deg);

}

.is-nav .l-header__nav-toggle:after {

	top: calc(50% - 1px);

	transform: rotate(-45deg);

}

.is-nav .l-header__nav-toggle span {

	opacity: 0;

}

.l-header__nav {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100vh;

	background-color: #000000;

	display: none;

}

.l-nav {

	height: 100%;

	padding: 70px 0 30px;

	overflow-y: auto;

	-webkit-overflow-scrolling: touch;

}

.l-nav__list {

	display: block;

	margin-right: 0;

	border-bottom: 1px solid #333333;

}

.l-nav__list li {

	padding: 0 0;

	border-top: 1px solid #333333;

}

.l-nav__list li > * {

	font-size: 2.25rem;

	padding: 15px 0 15px 60px;

}

.l-nav__list li a:before {

	top: calc(50% - 6px);

	left: -33px;

	width: 33px;

	background-color: #dd0507;

}

.l-nav__list li a.is-active:before {

	left: 0;

}

}



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

.l-header {

	height: 63px;

}

.l-header__content {

	justify-content: center;

	height: 63px;

}

.l-header__logo {

	width: 122px;

}

.l-header__nav-toggle {

	top: 14px;

}

.l-main {

	padding-top: 63px;

}

.l-title:before {

	content: none;

}

.l-footer {

	padding: 30px 0;

	background-size: auto 10px;

}

.l-footer__content {

	display: block;

}

.l-footer__copyright {

	font-size: 1.4rem;

	margin: 0 0 10px 0;

	text-align: center;

}

.l-footer__logo--bisty {

	width: 72px;

	margin-top: 6px;

}

.l-footer__logo--fields {

	width: 101px;

	margin-bottom: 0;

}
.l-footer__text {

	font-size: 1.2rem;

	margin: 10px 0;

	text-align: center;

}


}





/* --------------------------------------------------

		component

-------------------------------------------------- */

.c-h1__title {

	position: relative;

	z-index: 1;

	font-size: 2.4rem;

	line-height: 1.2;

	background-color: #505050;

	margin-left: -10px;

	padding-left: 10px;

}

.c-h2__title {

	background-color: #eeeeee;

	text-align: center;

	padding: 28px 0;

	position: relative;

	opacity: 1;

	overflow: hidden;

}

.c-h2__title .en {

	display: block;

	font-size: 2.2rem;

	letter-spacing: 0.05em;

	color: #e12325;

	position: relative;

	opacity: 0;

}

.c-h2__title .jp {

	display: block;

	font-size: 4.5rem;

	line-height: 1.2;

	position: relative;

	opacity: 0;

}

.c-h3__title {

	position: relative;

	z-index: 1;

	font-size: 4.5rem;

	letter-spacing: 0.1em;

	line-height: 1.2;

	padding-bottom: 10px;

	margin-bottom: 15px;

	display: inline-block;

}

.c-h3__title:after {

	content: "";

	position: absolute;

	left: 0;

	bottom: 0;

	width: 100%;

	height: 1px;

	background-color: #e12325;

}

.c-line--a {

	margin: 0 0;

	height: 1px;

	border: none;

	background: -webkit-linear-gradient(right, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);

	background: linear-gradient(to left, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);

}



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

.c-h1__title {

	font-size: 1.5rem;

	margin-left: 0;

	padding-left: 0;

}

.c-h2__title {

	padding: 18px 0;

}

.c-h2__title .en {

	font-size: 1.4rem;

}

.c-h2__title .jp {

	font-size: 2.5rem;

}

.c-h3__title {

	font-size: 2.5rem;

	margin-bottom: 10px;

}

}





/* --------------------------------------------------

		project

-------------------------------------------------- */

.p-movie a {

	position: relative;

	z-index: 1;

	display: block;

	transition: opacity .3s ease;

}

.p-movie a:after {

	content: "";

	position: absolute;

	top: calc(50% - 48px);

	left: calc(50% - 48px);

	width: 96px;

	height: 96px;

	background-image: url(../img/icon_play.png);

	background-repeat: no-repeat;

	background-size: contain;

	background-position: center center;

}

.p-movie a:hover {

	opacity: 0.8;

}

.p-movie-modal {

	position: relative;

}

.p-movie-modal__frame {

	position: relative;

	width: 100%;

	height: 0;

	padding-bottom: 56.25%;

	box-shadow: 0 0 8px rgb(0 0 0 / 60%);

}

.p-movie-modal__frame video {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}



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

.p-movie a:after {

	top: calc(50% - 24px);

	left: calc(50% - 24px);

	width: 48px;

	height: 48px;

}

.p-movie a:hover {

	opacity: 1;

}

}





/* --------------------------------------------------

		utility

-------------------------------------------------- */

.u-pc {

	display: block;

}

.u-sp {

	display: none;

}

.u-font--def {

	font-family: 'Noto Sans JP', sans-serif;

}

.u-font--en {

	font-family: 'Open Sans', cursive;

}

.u-cfx:after {

	content: "";

	display: table;

	clear: both;

}

.u-cts {

	position: relative;

}

.u-cts__wrap {

	position: relative;

}

.u-cts__inner {

	position: relative;

	max-width: 1366px;

	padding: 0 130px;

	margin: 0 auto;

}

.u-ancher {

	padding-top: 80px;

	margin-top: -80px;

}

.u-bold {

	font-weight: bold;

}

.u-center {

	text-align: center;

}

.u-left {

	text-align: left;

}

.u-right {

	text-align: right;

}



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

.u-cts__inner {

	padding: 0 9.516837481698389%;

}

}



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

.u-pc {

	display: none;

}

.u-sp {

	display: block;

}

.u-cts__inner {

	max-width: none;

	padding: 0 2%;

}

.u-ancher {

	padding-top: 63x;

	margin-top: -63px;

}

}





/* --------------------------------------------------

		magnificPopup

-------------------------------------------------- */

.mfp-movie.mfp-bg {

	background: #ffffff;

	opacity: 0.85;

	transition: all 0.3s ease-out;

}

.mfp-movie.mfp-bg.mfp-removing {

	opacity: 0;

}

.mfp-movie.mfp-wrap .mfp-content {

	transition: all 0.3s ease-out;

}

.mfp-movie.mfp-wrap.mfp-removing .mfp-content {

	opacity: 0;

}

.mfp-movie .mfp-inline-holder,

.mfp-movie .mfp-iframe-holder {

	padding: 10px 10px;

}

.mfp-movie .mfp-inline-holder .mfp-content,

.mfp-movie .mfp-iframe-holder .mfp-content {

	max-width: 960px;

	padding-top: 70px;

}

.mfp-movie .mfp-iframe-scaler {

	position: relative;

	overflow: visible;

}

.mfp-movie button.mfp-close {

	width: 180px;

	height: 50px;

	padding: 0 0;

	font-size: 0;

	opacity: 1;

	top: -60px;

	right: 0;

	background-image: url(../img/icon_close.png);

	background-size: 100% auto;

	background-repeat: no-repeat;

	background-position: center top;

}

.mfp-movie button.mfp-close:hover {

	background-position: center bottom;

}



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

.mfp-movie .mfp-inline-holder .mfp-content,

.mfp-movie .mfp-iframe-holder .mfp-content {

	padding-top: 35px;

}

.mfp-movie button.mfp-close {

	width: 90px;

	height: 25px;

	top: -30px;

}

.mfp-movie button.mfp-close:hover {

	background-position: center top;

}

}





/* --------------------------------------------------

		※※※※※

-------------------------------------------------- */



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

}