@charset "UTF-8";

:root {
	--color-white: #fff;
	--color-title-triangle: #fff300;
	--fixed-head-topbar-bg: #49a7d8;
	--fixed-head-nav-bg: linear-gradient(90deg, rgba(30, 125, 214, 0.95), rgba(79, 194, 216, 0.95));
}

/*--------------------------------------------
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;
}

#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);
			}
		#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.webp") center 0/ cover no-repeat;*/
				/*padding-bottom: 34px;*/
				padding-top: 62px;
		}
		#header .enquete {
				margin-left: 40px;
				width: 224px;
		}
}


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

/*--------------------------------------------
NAV
---------------------------------------------*/
@media print, screen and (min-width: 1025px) {
		#nav {
			margin-bottom: 0;
			/*font-family: "DotGothic16", sans-serif;*/
		}
}
@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 - ( 115 * 100vw / 1024));
				left: 0;
				max-height: 0;
				overflow: hidden;
				overflow-y: scroll;
				position: fixed;
				top: calc( 115 * 100vw / 1024);
				transition: max-height .5s ease-in;
				width: 100%;
				will-change: max-height;
				z-index: 10;
				/*font-family: "DotGothic16", sans-serif;*/
		}
		#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-toggle {
			letter-spacing: .02em;
			font-weight: 600;
			font-size: 2.0rem;
			color: var(--color-white);
			margin: 0 0 0 auto;
			z-index: 1;
		}
		
		.lang-toggle ul {
			display: flex;
		}
		
		.lang-toggle input[type="radio"] {
			display: none;
		}
		
		.lang-toggle label {
			display: inline-block;
			padding: 6px;
			cursor: pointer;
		}
		
		#lang-switch input[type="radio"]:checked + label,
		#lang-switch_fh input[type="radio"]:checked + label {
			background-color: rgba(255, 255, 255, .2);
		}
		
		.lang-toggle li + li:before {
			content: '/';
		}
		/*#lang-switch {
				letter-spacing: .02em;
				font-weight: 600;
				font-size: 2.0rem;
				color: var(--text_gray);
				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, .2);
		}
		#lang-switch li+li:before {
				content: '/';
		}

		#lang-switch_fh {
				letter-spacing: .02em;
				font-weight: 600;
				font-size: 2.0rem;
				color: var(--text_gray);
				margin: 0 0 0 auto;
				z-index: 200;
		}
		#lang-switch_fh ul {
				display: flex;
		}
		#lang-switch_fh input[type="radio"] {
				display: none;
		}
		#lang-switch_fh label {
				display: inline-block;
				padding: 6px;
		}
		#lang-switch_fh input[type="radio"]:checked+label {
				background-color: rgba(255, 255, 255, .2);
		}
		#lang-switch_fh li+li:before {
				content: '/';
		}*/
}

@media screen and (max-width: 1024px) {
			#lang-switch {
					letter-spacing: .02em;
					font-weight: 600;
					font-size: 2.8rem;
					color: var(--color-white);
					margin-right: 0;
					margin-left: calc( 16 * 100vw / 1024);
					margin-top: 0;
					display: flex;
					align-items: center;
					line-height: 1;
					z-index: 200;
			}
			#lang-switch ul {
					display: flex;
					align-items: center;
			}
			#lang-switch input[type="radio"] {
					display: none
			}
			#lang-switch li {
					display: flex;
					align-items: center;
			}
			#lang-switch label {
					display: block;
					padding: calc( 12 * 100vw / 1024) calc( 16 * 100vw / 1024);
					line-height: 1;
					color: var(--color-white);
			}
			#lang-switch input[type="radio"]:checked+label {
					background-color: rgba(255, 255, 255, .2);
			}
			#lang-switch li+li:before {
					content: '/';
					display: block;
					margin: 0 calc( 4 * 100vw / 1024);
					line-height: 1;
					color: rgba(255, 255, 255, .85);
			}
	}


/*--------------------------------------------
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: var(--color-title-triangle) !important;
				font-weight: 500;
		}
}

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


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

#localNav {
		background: var(--fixed-head-nav-bg);
		margin: auto;
		padding: 10px;
		position:absolute;
		width:100%;
}

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


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


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

#sp-fixed-menu {
		position: fixed;
		width: 100%;
		bottom: 0px;
		font-weight: 600;
		z-index: 99;
		background: var(--fixed-head-topbar-bg);

}


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

#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 var(--color-white);
		border-bottom: 1px solid var(--color-white);
}


/*ボタンを調整*/

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


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

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

#sp-fixed-menu.is-hidden {
		display: none !important;
}


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



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

#footer {
		color: var(--color-white);
		position: relative;
}

#footer::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		
		z-index: 0;
}

#footer,
#footer a,
#footer .info,
#footer .copyright,
.foot-nav li a {
		text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

#footer .wrap {
		align-items: center;
		/*display: flex;*/
		/*flex-direction: column;*/
		/*width: 100%;*/
		position: relative;
		z-index: 1;
}

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

.foot-nav li a {
		align-items: baseline;
		color: var(--color-white);
		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;
		
}

#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.webp") center 0/ cover no-repeat;
				height: auto;
				min-height: calc( 400 * 100vw / 1024 );
				padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
				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;
				text-align: center;
		}
}

@media print, screen and (min-width: 1025px) {
		#footer {
				background: url("../images/common/bg_foot_pc.webp") center 0/ cover no-repeat;
				padding-top: 72px;
				height: 300px;
		}
		.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 {
				width: 1100px;	
		}
		#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;
				z-index: 100;
		}
}


/* 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;
		}
}