/*
layout.css
for Mobile(SP)

note
サイト共有デザイン・レイアウトに関連するスタイル（メディア共通も含む）をここで設定
ページ・コンテンツ固有のものは別ファイルにて
メディアクエリの欄では画面の最大幅956pxまでのメディア（スマホ、小タブレットなど）向けを設定
*/

:root {
	/*
	[for SP]
	100vw = 375px
	10px / 375px * 100 = 2.666666vw
	*/
	--vw2px_s:0.533333vw;
	--vw4px_s:1.066666vw;
	--vw5px_s:1.333333vw;
	--vw6px_s:1.6vw;
	--vw8px_s:2.133333vw;
	--vw9px_s:2.4vw;
	--vw10px_s:2.666666vw;
	--vw11px_s:2.933333vw;
	--vw12px_s:3.2vw;
	--vw13px_s:3.466666vw;
	--vw14px_s:3.733333vw;
	--vw15px_s:4vw;
	--vw16px_s:4.266666vw;
	--vw17px_s:4.533333vw;
	--vw18px_s:4.8vw;
	--vw19px_s:5.066666vw;
	--vw20px_s:5.333333vw;
	--vw21px_s:5.6vw;
	--vw22px_s:5.866666vw;
	--vw24px_s:6.4vw;
	--vw25px_s:6.666666vw;
	--vw26px_s:6.933333vw;
	--vw28px_s:7.466666vw;
	--vw30px_s:8vw;
	--vw32px_s:8.533333vw;
	--vw34px_s:9.066666vw;
	--vw36px_s:9.6vw;
	--vw38px_s:10.133333vw;
	--vw40px_s:10.666666vw;
	--vw42px_s:11.2vw;
	--vw45px_s:12vw;
	--vw46px_s:12.266666vw;
	--vw48px_s:12.8vw;
	--vw50px_s:13.333333vw;
	--vw56px_s:14.933333vw;

	/*
	[for PC]
	100vw = 1440px
	10px / 1440px * 100 = 0.694444vw
	*/
	--vw2px:0.138888vw;
	--vw4px:0.277777vw;
	--vw5px:0.347222vw;
	--vw6px:0.42vw;
	--vw8px:0.555555vw;
	--vw10px:0.694444vw;
	--vw11px:0.763888vw;
	--vw12px:0.833333vw;
	--vw13px:0.902777vw;
	--vw14px:0.972222vw;
	--vw15px:1.041666vw;
	--vw16px:1.111111vw;
	--vw17px:1.180555vw;
	--vw18px:1.25vw;
	--vw19px:1.319444vw;
	--vw20px:1.388888vw;
	--vw21px:1.458333vw;
	--vw22px:1.527777vw;
	--vw24px:1.666666vw;
	--vw25px:1.736111vw;
	--vw26px:1.805555vw;
	--vw28px:1.944444vw;
	--vw30px:2.083333vw;
	--vw32px:2.222222vw;
	--vw36px:2.5vw;
	--vw38px:2.638888vw;
	--vw40px:2.777777vw;
	--vw42px:2.916666vw;
	--vw44px:3.055555vw;
	--vw45px:3.125vw;
	--vw46px:3.194444vw;
	--vw48px:3.333333vw;
	--vw56px:3.888888vw;

	/* イージング */
	--easeOutCirc:cubic-bezier(0, 0.55, 0.45, 1);
	--easeOutQuint:cubic-bezier(0.22, 1, 0.36, 1);
	--easeOutExpo:cubic-bezier(0.16, 1, 0.3, 1);
	--easeInOutCirc:cubic-bezier(0.85, 0, 0.15, 1);
	
	/*丸矢印*/
	--carrow_l:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M0,20A20,20,0,1,0,20,0,20,20,0,0,0,0,20ZM12.6,37.507A19.06,19.06,0,1,1,20,39,18.936,18.936,0,0,1,12.6,37.507Zm2.111-24.475,10.453,7.2L14.729,26.96l.542.841,11.07-7.134a.5.5,0,0,0,.013-.832l-11.07-7.626Z" transform="translate(40 40) rotate(180)"/></svg>');
	/*矢印*/
	--arrow_l:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.035 10.801"><path d="M5.518-13.018v.762L-4.854-7.617,5.518-2.979v.762l-11.035-5v-.8Z" transform="translate(5.518 13.018)"/></svg>');

	/*十字マーク*/
	--crs:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41"><g fill="%23000"><path d="M41,.5H0v-1H41Z" transform="translate(0 20.5)"/><path data-name="k" d="M.5,41h-1V0h1Z" transform="translate(20.5)"/></g></svg>');
}

/* --- [video] --- */
#video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	z-index: -2;
	background: #000;
}
#video iframe {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	cursor: none;
	pointer-events: none;
	z-index: -1;
}
#video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#videomask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 1;
	cursor: none;
	z-index: -1;
}
#videomask.stay {
	background-color: #000 !important;
	opacity: 0.2 !important;
}

/* --- [header] --- */
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display:-webkit-flex;
	-webkit-justify-content:space-between;
	-webkit-align-items:flex-start;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	z-index: 1000;
}

.lower header {
	position: relative;
	/*background: #fff;*/
}

.siteid,
.siteid-en {
	width: 42vw;
	height: var(--vw16px_s);
	background: url("../img/logo.svg") 0 0 no-repeat;
	background-size: auto 100%;
	text-indent: -9999px;
	overflow: hidden;
	margin: 8.266666vw 0 0 var(--vw26px_s);
}

header .siteid,
header .siteid-en {
	position: relative;
	z-index: 1;
}
header .siteid:hover,
header .siteid-en:hover {
	opacity: 0.8;
}

.lower header .siteid,
.lower header .siteid-en {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="173.467" height="18" viewBox="0 0 173.467 18"><path d="M98.107,47.559,92.493,41.8c-.3-.293-.135-.317-1.956-.317h-.65c-.617,0-.651-.013-.651.588v4.983c0,.6-.51.541-1.131.541h-.053c-.622,0-1.138.061-1.138-.541v-12.1c0-.6.516-.548,1.138-.548H88.1c.622,0,1.131-.055,1.131.548V39.22c0,.609.034.457.651.457h.721c1.741,0,1.612,0,1.933-.3L97.1,34.478c.437-.429.7-.58,1.492-.081.477.289.982.475.537.9L94.5,40.062c-.442.412-.437.726.021,1.124l5.616,5.46c.453.409-.033.622-.516.913a1.7,1.7,0,0,1-.847.33A1.017,1.017,0,0,1,98.107,47.559Zm21.965.08h-1.947c-3.092,0-2.874.16-4.158-1.077-1.144-1.132-1.177-1.225-1.177-1.819V34.952c0-.6.5-.548,1.117-.548h.06c.629,0,1.128-.055,1.128.548v7.342c0,.612.019,1.045.04,1.648a1.521,1.521,0,0,0,.513.912c.877.844.632.826,2.212.826h2.479c1.583,0,1.341.018,2.2-.826a1.54,1.54,0,0,0,.522-.912c.024-.6.038-1.036.038-1.648V34.952c0-.6.516-.548,1.128-.548h.063c.615,0,1.122-.055,1.122.548v9.792c0,.594-.041.687-1.184,1.819a2.632,2.632,0,0,1-2.627,1.084C121.207,47.646,120.709,47.64,120.072,47.64Zm-50.408-.385-4.107-9.327c-.12-.27-.756-.258-.875.007l-4.088,9.311c-.233.554-.708.36-1.423.36l-.02-.005c-.622,0-1.252,0-1-.56L63.184,35.66c.244-.559.6-.521,1.573-.521h.711c.972,0,1.335-.038,1.579.521l5.034,11.381c.244.56-.382.565-.994.565-.265,0-.521.038-.745.038A.633.633,0,0,1,69.663,47.254Zm124.359.338h-.015c-.611,0-1.117.147-1.117-.453V34.952c0-.6.505-.548,1.117-.548h.56c1.332,0,1.4.046,1.745.548l6.312,9.654c.345.5.626.888.626.888V34.867c0-.607.467-.463,1.089-.463h.015c.607,0,1.113-.144,1.113.463V47.052c0,.6-.506.541-1.113.541h-.563c-1.21,0-1.4-.038-1.749-.537l-6.3-9.673c-.347-.5-.614-.9-.614-.9V47.14c0,.4-.215.469-.546.469C194.417,47.608,194.228,47.593,194.022,47.593Zm-48.8,0h-.076c-.617,0-1.117.147-1.117-.453V36.835c0-.6-.321-.547-.938-.547h-3.466c-.619,0-.561-.522-.561-.946s-.058-.938.561-.938h11.014c.614,0,.555.521.555.938s.058.946-.555.946h-3.357c-.632,0-.952-.057-.952.547V47.14c0,.4-.226.469-.558.469C145.6,47.608,145.417,47.593,145.218,47.593Zm-101.177,0H43.98c-.618,0-1.123.061-1.123-.541V42.037c0-.6-.132-.556-.748-.556H35.063c-.614,0-.751-.048-.751.556v5.015c0,.6-.51.541-1.133.541h-.058c-.616,0-1.122.061-1.122-.541v-12.1c0-.6.506-.548,1.122-.548h.058c.622,0,1.133-.055,1.133.548v4.193c0,.6.137.542.751.542h7.045c.617,0,.748.062.748-.542V34.952c0-.6.505-.548,1.123-.548h.061c.622,0,1.131-.055,1.131.548v12.1c0,.5-.351.542-.827.542Zm123.534,0c-.618,0-.661-.033-.661-.633V35.048c0-.608.043-.645.661-.645h10.007c.623,0,.544.34.544.76s.079.751-.544.751h-7.606c-.623,0-.748.134-.748.742v2.487c0,.6.124.543.748.543h7.01c.674,0,.563.52.563.95s.111.843-.563.843h-7.01c-.623,0-.748.133-.748.735v3.127c0,.6.124.734.748.734h7.606c.623,0,.544.337.544.76s.079.755-.544.755ZM63.706,31.355a1.433,1.433,0,1,1,1.432,1.465A1.449,1.449,0,0,1,63.706,31.355Z" transform="translate(-32 -29.89)" fill="%23000" /></svg>');
}

/* --- [header nav] dwmenu --- */
header nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

#bodymask {
	display: none;
}

#dwmenu {
	box-sizing: border-box;
	width: 0;
	height: calc(var(--vh, 1vh) * 100);
	padding: var(--vw32px_s) 0;
	background: #000;
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	transition: right 400ms 0s ease;
}
#dwicon {
	position: absolute;
	top: var(--vw16px_s);
	right: var(--vw16px_s);
	left: auto;
	width: var(--vw48px_s);
	height: var(--vw48px_s);
	border: 1px solid #fff;
	border-radius: 100%;
	text-indent: -9999px;
	background: transparent;
}
#dwicon::before,
#dwicon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: auto;
	width: 8.533333vw;
	height: 1px;
	background: #fff;
	transition: transform 300ms 0s ease;
}
#dwicon::before {
	top: calc(50% - 0.8vw);
}
#dwicon::after {
	top: calc(50% + 0.8vw);
}
.lower #dwicon,
.pageloaded #dwicon {
	z-index: 1003;
}
.lower #dwmenu,
.pageloaded #dwmenu {
	z-index: 1002;
}
.lower #dwicon,
#dwicon.inversion {
	border: 1px solid #000;
}
.lower #dwicon::before,
.lower #dwicon::after,
#dwicon.inversion::before,
#dwicon.inversion::after {
	background: #000;
}
.navopen #dwicon {
	border: 1px solid #fff;
}
.navopen #dwicon::before {
	top: 50%;
	transform: rotate(30deg);
	background: #fff;
}
.navopen #dwicon::after {
	top: 50%;
	transform: rotate(-30deg);
	background: #fff;
}

/* --- [header footer nav] --- */
nav {
	font-family: 'Be Vietnam Pro', 'Noto Sans JP', sans-serif;
}
nav ul a {
	color: #fff;
	display: inline-block;
}

/* --- [header footer nav] category --- */
nav ul.category {
	font-size: var(--vw20px_s);
	font-weight: 700;
	line-height: 0.8em;
}
nav ul.category li {
	display: flex;
}
nav ul.category li + li {
	margin-top: var(--vw18px_s);
}

/* --- [header footer nav] btn --- */
nav ul.btn {
	margin-top: var(--vw25px_s);
}
nav ul.btn li a {
	display:-webkit-flex;
	-webkit-justify-content:center;
	-webkit-align-items:center;
	display:flex;
	justify-content:center;
	align-items:center;
	width: 100%;
	height: var(--vw48px_s);
	background: #fff;
	color: #000;
	font-size: var(--vw16px_s);
	font-weight: 200;
}

/* --- [header footer nav] media --- */
nav .media {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: var(--vw24px_s) 0;
	margin-top: var(--vw24px_s);
	font-size: var(--vw15px_s);
	font-weight: 700;
	line-height: 1;
}
nav .media p {
	color: #fff;
}
nav .media ul {
	display:-webkit-flex;
	-webkit-justify-content:space-between;
	-webkit-align-items:flex-start;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
nav .media li {
	flex: 1;
}
nav .media li + li {
	margin-left: 0.8vw;
}
nav .media a {
	display: block;
	width: 100%;
	height: var(--vw56px_s);
	background: transparent;
}
nav .media img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- [header footer nav] sub --- */
nav ul.sub {
	font-size: max(var(--vw11px_s), 10px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.1em;
}

/* --- [header footer av] sns --- */
nav ul.sns {
	display:-webkit-flex;
	-webkit-justify-content:flex-start;
	-webkit-align-items:flex-start;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
}
nav ul.sns li + li {
	margin-left: var(--vw8px_s);
}
nav ul.sns a {
	display: block;
	width: var(--vw32px_s);
	height: var(--vw32px_s);
	background:url("../img/sns_facebook.svg") 0 0 no-repeat;
	background-size: 100% auto;
	text-indent: -9999px;
	overflow: hidden;
}
nav ul.sns a.tw {
	background-image: url("../img/sns_twitter.svg");
}
nav ul.sns a.ig {
	background-image: url("../img/sns_instagram.svg");
}

/* --- [header footer nav] lang --- */
nav ul.lang {
	display:-webkit-flex;
	-webkit-justify-content:flex-start;
	-webkit-align-items:flex-start;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	padding-top: 2.133333vw;
	font-size: var(--vw13px_s);
	font-weight: 700;
}
nav ul.lang li {
	display:-webkit-flex;
	-webkit-justify-content:center;
	-webkit-align-items:center;
	display:flex;
	justify-content:center;
	align-items:center;
}
nav ul.lang li + li::before {
	content: "/";
	font-size: 2.4vw;
	margin:auto 1.25em;
}
nav ul.lang li .active {
	position: relative;
}
nav ul.lang li .active::before {
	content: "";
	position: absolute;
	top: -2.133333vw;
	left: 0;
	right: 0;
	margin: auto;
	width: 1.333333vw;
	height: 1.333333vw;
	border-radius: 100%;
	background: #fff;
}

/* --- footer --- */
footer {
	background: #000;
	color: #fff;
}
footer .copyright {
	font-size: var(--vw13px_s);
	font-weight: 700;
	line-height: 1;
}

/* --- [common] morebtn linkbtn --- */
.linkbtn,
.mblist a,
.morebtn {
	box-sizing: border-box;
	width: 36.533333vw;
	height: var(--vw38px_s);
	border: 1px solid #5c5c5c;
	border-radius: var(--vw24px_s);
	background: #fff;
	color: #000;
	font-family: 'Be Vietnam Pro', 'Noto Sans JP', sans-serif;
	font-size: var(--vw12px_s);
	font-weight: 200;
	text-decoration: none !important;
	display:-webkit-flex;
	-webkit-justify-content:center;
	-webkit-align-items:center;
	display:flex !important;
	justify-content:center;
	align-items:center;
	position: relative;
}
.linkbtn.active,
.mblist a.active,
.morebtn.active {
	color: #fff;
	background: #000;
}


/* --- GDPR --- */
#gdpr {
	box-sizing: border-box;
	width: 100%;
	min-height: 19.2vw;
	background: #000;
	color: #fff;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.866666;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 101;
}

#gdpr .container {
	box-sizing: border-box;
	height: 100%;
	padding: 0.5em 1em;
	display:-webkit-flex;
	-webkit-justify-content:space-between;
	-webkit-align-items:center;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
#gdpr .close {
	display: block;
	width: min(var(--vw30px_s), 30px);
	height: min(var(--vw30px_s), 30px);
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.707 16.707"><g fill="none" stroke="%23fff"><line x2="16" y2="16" transform="translate(0.354 0.354)" stroke-width="1"/><line x1="16" y2="16" transform="translate(0.354 0.354)" stroke-width="1"/></g></svg>') 50% 50% no-repeat;
	background-size: min(var(--vw17px_s), 17px) auto;
	cursor: pointer;
}
#gdpr p{
	width: 88%;
}
#gdpr a{
	color: #fff;
	text-decoration: underline;
}
#gdpr.closed {
	display: none;
}

/* ==============================
for SP
============================== */
@media screen and (max-width: 768px) {

body {
	font-size: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-size: var(--vw16px_s);
}

.pc {
	display: none !important;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

#cursor,
#scrbar,
#scrtabwrap {
	display: none;
}

/* --- [header footer nav] dwmenu --- */
body.navopen {
	width: 100%;
	position: fixed;
}
#dwmenu {
	transition: width 400ms 0s ease;
}
#dwmenu .other,
#dwmenu .category,
#dwmenu .btn,
#dwmenu .media {
	display: none;
}
.navopen #dwmenu .category,
.navopen #dwmenu .btn,
.navopen #dwmenu .media {
	display: block;
}
.navopen #dwmenu .other {
	display:-webkit-flex;
	display: flex;
}
.navopen #dwmenu {
	width: 100%;
	padding: var(--vw32px_s) var(--vw24px_s);
	overflow: auto;
	-webkit-overflow-scrolling:touch;
}
.navopen #dwicon {
	/*right: var(--vw16px_s);*/
}

#dwmenu .category a {
	position: relative;
}
#dwmenu .category a.active::before {
	content: "";
	position: absolute;
	top: calc(50% - 0.666666vw);
	margin-left: -0.5em;
	width: 1.333333vw;
	height: 1.333333vw;
	border-radius: 100%;
	background: #fff;
}

/* --- [header footer nav] --- */
header nav > ul {
	display: none;
}

nav ul.btn li + li {
	margin-top: var(--vw8px_s);
}

nav .media ul {
	margin-top: var(--vw12px_s);
}
footer nav,
nav .other .clm:first-child,
nav .other {
	display:-webkit-flex;
	-webkit-justify-content:flex-start;
	-webkit-align-items:flex-start;
	-webkit-flex-direction: column;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	flex-direction: column;
}
nav .other .clm:last-child {
	order: -1;
	margin-top: var(--vw24px_s);
}
nav ul.sub + ul.sub,
nav ul.sub li + li {
	margin-top: var(--vw13px_s);
}

/* --- [header footer] other clm --- */
footer nav .other,
header nav .other .clm:first-child {
	width: 100%;
	padding-top: var(--vw24px_s);
	margin-top: var(--vw24px_s);
	border-top: 1px solid #fff;
}
footer nav .other .sns,
header nav .other .clm:first-child .sns {
	order: -1;
}
footer nav .other .lang,
header nav .other .clm:first-child .lang {
	margin-top: var(--vw24px_s);
}

/* --- [footer] --- */
footer {
	padding: var(--vw34px_s) var(--vw24px_s) 0;
}
footer .siteid,
footer .siteid-en {
	margin: 0 0 var(--vw34px_s);
}
footer nav .category {order: 1;}
footer nav .clm {order: 2; width: 100%;}
footer nav .sub {
	order: 3;
	width: 100%;
	margin-top: var(--vw24px_s);
	padding-top: var(--vw24px_s);
	border-top: 1px solid #fff;
}
footer nav .other {order: 4;}
footer nav .copyright {
	box-sizing: border-box;
	width: 100%;
	padding: var(--vw38px_s) var(--vw24px_s);
	display:-webkit-flex;
	-webkit-justify-content:center;
	-webkit-align-items:center;
	display:flex;
	justify-content:center;
	align-items:center;
}
footer .container {
	position: relative;
}
footer .container #topagetop {
	content: "";
	display: block;
	width: 8.266666vw;
	height: 8.266666vw;
	border-radius: 100%;
	background: #fff url("../img/arrow.svg") 50% 50% no-repeat;
	background-size: 2vw auto;
	transform:rotate(-90deg);
	position: absolute;
	right: 0;
	top: 0;
}

}/* end of @media */