@charset "UTF-8";

/*--------------------------------------------
FONTSIZE TO REM
---------------------------------------------*/

@media screen and (max-width: 1024px) {
		html {
				font-size: calc( 10 * 100vw / 1024);
		}
}

@media print, screen and (min-width: 1025px) {
		html {
				font-size: 10px;
		}
}

@media screen and (max-width: 1024px) {
		body {
				font-size: 2.7rem;
		}
}

@media print, screen and (min-width: 1025px) {
		body {
				font-size: 1.6rem;
		}
}


/*--------------------------------------------
BODY
---------------------------------------------*/

body {
		position: relative;
}


/*--------------------------------------------
WRAPPER
---------------------------------------------*/

@media screen and (max-width: 1024px) {
		.wrap {
				width: 100%;
				padding-left: calc( 30 * 100% / 1024);
				padding-right: calc( 30 * 100% / 1024);
		}
}

@media print, screen and (min-width: 1025px) {
		.wrap {
				width: 1100px;
				margin-left: auto;
				margin-right: auto;
		}
}


/*--------------------------------------------
HEADER
---------------------------------------------*/

#header {
		position: relative;
}

#header::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
}

.fixed-head {
		width: 100%;
		height: 0;
		position: fixed;
		top: 0;
		z-index: 20;
		align-items: baseline;
		justify-content: space-between;
		overflow: hidden;
		transition: .4s;
		will-change: background, padding;
}

.fixed-head.transform {
		/*background: url(../images/common/bg_fixed_head.png) center 0/ cover no-repeat;*/
		/*background: url(../images/home/bg_header.png) center 0/ cover no-repeat;*/
		background-blend-mode: lighten;
		background-color: rgba(19, 51, 141, 0.8);
}

.head-wrap {
		align-items: center;
		display: flex;
}

.head-wrap2 {
		align-items: center;
		display: flex;
}

#header .logo a {
		display: block;
}

#header .logo img {
		height: 100%;
		width: auto;
}

#header .links {
		align-items: center;
		justify-content: flex-end;
}

#header .enquete img {
		width: 100%;
}

@media screen and (max-width: 1024px) {
		#header {
				background: url("../images/common/bg_head_sp.png") center 0/ cover no-repeat;
				height: calc( 490 * 100vw / 1024);
				padding-top: calc( 102 * 100vw / 1024);
		}
		.fixed-head {
				padding-top: calc( 10.0 * 100vw / 1024);
				/*padding-bottom: calc( 13.5 * 100vw / 1024 );*/
		}
		.fixed-head.transform {
				height: calc( 120 * 100vw / 1024);
		}
		.head-wrap {
				height: calc( 105 * 100vw / 1024);
		}
		.head-wrap2 {}
		#header .logo {
				margin-left: calc( 10.7 * 100% / 1024);
		}
		#header .logo img {
				height: calc( 100 * 100vw / 1024);
		}
		#header .enquete {
				margin-top: calc( 42 * 100vw / 1024);
				width: calc( 519 * 100% / 1024);
		}
}

@media print, screen and (min-width: 1025px) {
		#header {
				background: url("../images/common/bg_head_pc.png") center 0/ cover no-repeat;
				padding-bottom: 34px;
				padding-top: 62px;
		}
		.fixed-head {
				/*padding-top: 24px;
		padding-bottom: 14px;*/
		}
		.fixed-head.transform {
				padding-top: 10px;
				/*padding-bottom: 14px; */
				height: 184px;
		}
		.head-wrap {
				justify-content: space-between;
				margin: 0 auto;
				max-width: 1440px;
				min-width: 1100px;
		}
		.head-wrap2 {
				justify-content: space-between;
				margin: 10px 0 0 0;
				min-width: 1100px;
				background-color: #231815;
		}
		#header .logo {
				width: 1100px;
				margin: auto;
		}
		#header .logo img {
				width: 100%;
		}
		#header .links {
				width: 1100px;
				height: 50px;
				margin: auto;
				padding: 10px;
		}
		#header .links img {
				height: 20px;
		}
		#header .scroll {
				align-items: center;
				display: flex;
		}
		#header .enquete {
				margin-left: 40px;
				width: 224px;
		}
}


/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/

@media screen and (max-width: 1024px) {
		#menuBtn {
				height: calc( 37 * 100vw / 1024);
				position: absolute;
				right: calc( 26 * 100% / 1024);
				top: calc( 42 * 100vw / 1024);
				width: calc( 70 * 100% / 1024);
				z-index: 12;
		}
		#menuBtn span {
				background-color: #fff;
				border-radius: calc( 3 * 100vw / 1024);
				display: block;
				height: calc( 5 * 100vw / 1024);
				left: 0;
				position: related;
				right: 0;
				top: calc( ( 100% - ( 5 * 100vw / 1024)) / 2);
				transition: .3s;
		}
		#menuBtn span:nth-child(1) {
				transform: translateY( -10px);
		}
		#menuBtn span:nth-child(3) {
				transform: translateY( 10px);
		}
		body.is-open {
				overflow: hidden;
		}
		body.is-open #menuBtn span:nth-child(1) {
				transform: rotate( 45deg);
		}
		body.is-open #menuBtn span:nth-child(2) {
				opacity: 0;
		}
		body.is-open #menuBtn span:nth-child(3) {
				transform: rotate( -45deg);
		}
}


/*--------------------------------------------
NAV
---------------------------------------------*/

@media screen and (max-width: 1024px) {
		body.is-open #nav {
				max-height: 100vh;
		}
		#nav {
				backface-visibility: hidden;
				background: linear-gradient( to bottom, rgba(46, 44, 40, .8), rgba(46, 44, 40, 1) 30%);
				height: calc( 100vh - ( 120 * 100vw / 1024));
				left: 0;
				max-height: 0;
				overflow: hidden;
				overflow-y: scroll;
				position: fixed;
				top: calc( 120 * 100vw / 1024);
				transition: max-height .5s ease-in;
				width: 100%;
				will-change: max-height;
				z-index: 10;
		}
		#nav .scroll {
				padding-bottom: calc( 80 * 100vw / 1024);
				padding-left: calc( 50 * 100% / 1024);
				padding-right: calc( 50 * 100% / 1024);
				padding-top: calc( 40 * 100vw / 1024);
		}
		#nav ul li {
				padding-bottom: calc( 40 * 100vw / 1024);
				padding-left: calc( 50 * 100% / 1024);
				padding-top: calc( 40 * 100vw / 1024);
		}
}


/*--------------------------------------------
LANGUAGE SWITCH
---------------------------------------------*/

@media print, screen and (min-width: 1025px) {
		#lang-switch {
				letter-spacing: .02em;
				font-weight: 600;
				font-size: 2.0rem;
				color: #fff;
				margin: 0 0 0 auto;
				z-index: 200;
		}
		#lang-switch ul {
				display: flex;
		}
		#lang-switch input[type="radio"] {
				display: none;
		}
		#lang-switch label {
				display: inline-block;
				padding: 6px;
		}
		#lang-switch input[type="radio"]:checked+label {
				background-color: rgba(255, 255, 255, .8);
		}
		#lang-switch li+li:before {
				content: '/';
		}
}

@media screen and (max-width: 1024px) {
		#lang-switch {
				letter-spacing: .02em;
				margin-left: calc( 20 * 100% / 1024);
				font-weight: 600;
				font-size: 2.8rem;
				color: #fff;
				margin-right: 0px;
				margin-left: 20px;
				margin-top: -5px;
				z-index: 200;
		}
		#lang-switch ul {
				display: flex;
		}
		#lang-switch input[type="radio"] {
				display: none
		}
		#lang-switch label {
				display: inline-block;
				padding-bottom: calc( 8 * 100vw / 1024);
				padding-left: calc( 18 * 100vw / 1024);
				padding-right: calc( 18 * 100vw / 1024);
				padding-top: calc( 14 * 100vw / 1024);
		}
		#lang-switch input[type="radio"]:checked+label {
				background-color: rgba(255, 255, 255, .4);
		}
		#lang-switch li+li:before {
				content: '/';
				/*margin-left: calc( 10 * 100vw / 1024 );*/
				/*margin-right: calc( 6 * 100vw / 1024 );*/
		}
}


/*--------------------------------------------
GLOBAL NAV
---------------------------------------------*/

#globalNav {
		display: flex;
}

#globalNav a .jp {
		font-weight: 700;
		letter-spacing: .08em;
}

#globalNav a .en {
		font-weight: 700;
		letter-spacing: .02em;
}

@media screen and (max-width: 1024px) {
		#globalNav {
				flex-direction: column;
		}
		#globalNav a {
				font-size: 4.0rem;
				height: calc( 100 * 100vw / 1024);
				color: #fff;
				font-weight: 500;
		}
}

@media print, screen and (min-width: 1025px) {
		#globalNav {
				justify-content: flex-end;
		}
		#globalNav a {
				font-size: 2.0rem;
				color: #fff;
				font-weight: 600;
		}
		#globalNav a .en {
				font-size: 2.0rem;
		}
		#globalNav li:not(:first-child) a {
				margin-left: 60px;
		}
}


/*--------------------------------------------
LOCAL NAV
---------------------------------------------*/

#localNav {
		background-color: var(--accentColor01);
		height: 50px;
		margin: auto;
		padding: 10px;
}

#localNav .scroll {
		align-items: center;
		display: flex;
}


/*--------------------------------------------
top footer fixed NAV
---------------------------------------------*/


/*メニューをページ下部に固定*/

#sp-fixed-menu {
		position: fixed;
		width: 100%;
		bottom: 0px;
		font-weight: 600;
		/*opacity: 0.9;*/
		z-index: 99;
		background-color: var(--accentColor01);
}


/*メニューを横並びにする*/

#sp-fixed-menu ul {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		padding: 0;
		margin: 0;
		width: 100%;
}

#sp-fixed-menu li {
		justify-content: center;
		align-items: center;
		width: 50%;
		padding: 0;
		margin: 0;
		font-size: 14px;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
}


/*ボタンを調整*/

#sp-fixed-menu li a {
		color: #fff;
		text-align: center;
		display: block;
		width: 100%;
		padding: 10px;
}


/*フッターまでスクロールしたら消す*/

.is-hidden {
		visibility: hidden;
		opacity: 0;
}


/*--------------------------------------------
MAIN
---------------------------------------------*/

#main {
		/*position: relative;*/
}

@media screen and (max-width: 1024px) {
		#main {
				/*background: url("../images/common/bg_geidai-game01_sp.svg") #fff 0 0/ calc( 150 * 100vw / 1024 ) no-repeat;*/
		}
}

@media print, screen and (min-width: 1024px) {
		#main {
				/*background: url("../images/common/bg_geidai-game01_pc.png") #fff 0 20px/ 294px 3048px no-repeat;*/
		}
}


/*--------------------------------------------
FOOTER
---------------------------------------------*/

#footer {
		color: #fff;
		position: relative;
}

#footer::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
}

#footer .wrap {
		align-items: center;
		display: flex;
		flex-direction: column;
		width: 100%;
}

.foot-nav {
		display: flex;
		justify-content: center;
}

.foot-nav li a {
		align-items: baseline;
		color: #fff;
		display: flex;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		justify-content: center;
		letter-spacing: .02em;
}

#footer .wrap>div {
		display: flex;
		justify-content: center;
}

#footer .logo a {
		display: block;
}

#footer .logo img {
		height: 100%;
		width: auto;
}

#footer .info {
		font-family: 'Noto Sans JP', sans-serif;
		letter-spacing: .02em;
		line-height: 1.5;
		font-weight: 700;
		z-index: 100;
}

#footer .info span {
		font-family: 'Noto Sans JP', sans-serif;
		letter-spacing: .02em;
		line-height: 1.5;
		font-weight: 700;
}

#footer .copyright {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		z-index: 100;
}

#footer .enquete {
		margin: 0 0 0 30px;
}

@media screen and (max-width: 1024px) {
		#footer {
				background: url("../images/common/bg_foot_sp.png") center 0/ cover no-repeat;
				/*height: calc( 865 * 100vw / 1024 );*/
				padding-bottom: calc( 20 * 100vw / 1024);
				padding-top: calc( 30 * 100vw / 1024);
		}
		.foot-nav {
				flex-direction: column;
				padding-bottom: calc( 50 * 100vw / 1024);
				width: 100%;
		}
		.foot-nav li {
				margin-bottom: calc( 26 * 100vw / 1024);
				margin-top: calc( 26 * 100vw / 1024);
		}
		.foot-nav li a {
				font-size: 5.7rem;
		}
		#footer .wrap>div {
				align-items: center;
				flex-direction: column;
				margin-bottom: calc( 32 * 100vw / 1024);
		}
		#footer .logo {
				margin-bottom: calc( 20 * 100vw / 1024);
		}
		#footer .logo img {
				height: calc( 116 * 100vw / 1024);
		}
		#footer .info {
				font-size: 2.4rem;
				text-align: center;
		}
		#footer .copyright {
				font-size: 1.9rem;
		}
}

@media print, screen and (min-width: 1025px) {
		#footer {
				background: url("../images/common/bg_foot_pc.png") center 0/ cover no-repeat;
				padding-top: 72px;
				height: 390px;
		}
		.foot-nav {
				margin-bottom: 63px;
		}
		.foot-nav li a {
				font-size: 2.8rem;
		}
		.foot-nav li:not(:first-child) a {
				margin-left: 30px;
		}
		#footer .wrap>div {
				align-items: flex-start;
				margin-bottom: 63px;
		}
		#footer .logo {
				/*width: 335px;*/
		}
		#footer .logo img {
				height: 80px;
		}
		#footer .info {
				font-size: 1.8rem;
				margin-left: 24px;
		}
		#footer .copyright {
				font-size: 1.5rem;
				letter-spacing: .02em;
				padding: 20px 0 20px 0;
		}
}


/* pc */

.pc {
		display: block !important;
}

.sp {
		display: none !important;
}


/* sp */

@media only screen and (max-width: 1024px) {
		.pc {
				display: none !important;
		}
		.pc_sq {
				display: none !important;
		}
		.sp {
				display: block !important;
		}
}