@charset "UTF-8";

/*--------------------------------------------*/
* { box-sizing:border-box; scroll-behavior:smooth; }
body,input,textarea {
	font-family: "M PLUS Rounded 1c", sans-serif;
}
body {
	position:relative;
	margin:0;
	padding:0;
	font-size:100%;
	color:#333;
}

h1 { font-size:200%; margin:0; }
h2 { font-size:180%; }
h3 { font-size:160%; }
h4 { font-size:120%; }
h5 { font-size:120%; }
h6 { font-size:100%; }
h2,h3,h4,h5,h6 { line-height:1.3em; margin:.5em 0; }
dl { margin:1em 0; } p,dt,dd,th,td { line-height:1.7em; }
ul { margin:1em 0; padding:0 0 0 2em; } li { line-height:1.3em; margin:0 0 .5em; }
i,em { font-style:normal; } u { text-decoration:none; } sup,sub { font-size:60%; }
small { font-size:70%; }
/*************/
header a   , footer a    { color:#333; text-decoration:none; display:inline-block; }
header ul  , footer ul   { margin:0; padding:0; list-style:none outside; }
header li  , footer li   { margin:0; padding:0; line-height:1.2em; }
header li a, footer li a { display:block; }
header img , footer img  { display:block; width:100%; }

.l { text-align:left; }
.r { text-align:right; }
.c { text-align:center; }

/* table */
table     { border-collapse:collapse; margin:.5em 0 1em 1em; }
thead th,
thead td  {}
th,td     { position:relative; padding-left:1.2em; vertical-align:text-top; }
th        { padding:.5em 1em .5em .5em; text-align:left; color:#08a; }
td        { padding:.5em; }

th:before   { position:absolute; left:0; color:#333; }
th:after    { position:absolute; right:0; content:":"; }
th b        { position:relative; white-space:nowrap; }
th b:before { position:absolute; bottom:0; left:0; content:""; width:100%; height:10px; background:#0db; z-index:-100; }

/*
.num { list-style:none; text-indent:-1em; }

.num li:nth-child( 1):before, tr:nth-child( 1) th:before { content:"\02460"; }
.num li:nth-child( 2):before, tr:nth-child( 2) th:before { content:"\02461"; }
.num li:nth-child( 3):before, tr:nth-child( 3) th:before { content:"\02462"; }
.num li:nth-child( 4):before, tr:nth-child( 4) th:before { content:"\02463"; }
.num li:nth-child( 5):before, tr:nth-child( 5) th:before { content:"\02464"; }
.num li:nth-child( 6):before, tr:nth-child( 6) th:before { content:"\02465"; }
.num li:nth-child( 7):before, tr:nth-child( 7) th:before { content:"\02466"; }
.num li:nth-child( 8):before, tr:nth-child( 8) th:before { content:"\02467"; }
.num li:nth-child( 9):before, tr:nth-child( 9) th:before { content:"\02468"; }
.num li:nth-child(10):before, tr:nth-child(10) th:before { content:"\02469"; }
.num li:nth-child(11):before, tr:nth-child(11) th:before { content:"\02470"; }
.num li:nth-child(12):before, tr:nth-child(12) th:before { content:"\02471"; }
.num li:nth-child(13):before, tr:nth-child(13) th:before { content:"\02472"; }
.num li:nth-child(14):before, tr:nth-child(14) th:before { content:"\02473"; }
.num li:nth-child(15):before, tr:nth-child(15) th:before { content:"\02474"; }
.num li:nth-child(16):before, tr:nth-child(16) th:before { content:"\02475"; }
.num li:nth-child(17):before, tr:nth-child(17) th:before { content:"\02476"; }
.num li:nth-child(18):before, tr:nth-child(18) th:before { content:"\02477"; }
.num li:nth-child(19):before, tr:nth-child(19) th:before { content:"\02478"; }
.num li:nth-child(20):before, tr:nth-child(20) th:before { content:"\02479"; }
*/

table .non th:before,
table .non th:after { content:""; }

/* table inner small */
tr small { display:block; margin:.5em 0; line-height:1.5em; }
#baseControll tr small { display:inline; }

/* table inner li */
table tr li  { margin:.5em 0; }

/* inner Table */
tr tr:nth-child(n) th:before { content:"\025b7"; }
tr tr th b:before { background:#7de; }

/* th,td = block */
.tabl-block th,
.tabl-block td       { display:block; }
.tabl-block th       { padding-top:1.1em; padding-bottom:0; }
.tabl-block th:after { display:none; }

tr tr th,
tr tr td,
.tabl-block tr tr th, 
.tabl-block tr tr td { display:table-cell; padding-top:.1em; padding-bottom:.1em; }


/* * */
ul.aster, ol.aster { list-style:none; padding-left:0; }
.ast:before,
.aster > *:before { content:"※"; }
.aster > *,
.ast { padding-left:1em; text-indent:-1em; font-size:80%; }

/* -------------------------------------------- */
a:hover { opacity:.5; text-decoration:none; }
/* --------------------------------------------*/

main,
.inner {
	display:block; position:relative; clear:both; width:1200px;
	padding-left:20px; padding-right:20px; margin-left:auto; margin-right:auto;
}

/* flexBox *
.flexBox      { display:flex; }
.flexBox.jcsb { justify-content:space-between; }
.flexBox.jcsb > * { flex:1; }
.flexBox.wrap { flex-wrap:wrap; }
.flexBox.aic  { align-items:center; }

/* btn ********** *
.btn ul, ul.btn { display:flex; justify-content:center; align-items:center; padding:0; list-style:none; }
.btn li, li.btn { margin:0; }
.btn a  {
	display:inline-block; margin:0 .5em; padding:.6em 2em;
	background:#0064B4; border-radius:1.25em;
	text-align:center; font-weight:bold; color:#FFF; text-decoration:none; line-height:1;
}
.btn .steam   a, .btn a.steam   { background:none; padding:0 1em 0 0; border-right:1px solid #333; border-radius:0; }
.btn .x       a, .btn a.x       { background:#000; }
.btn .youtube a, .btn a.youtube { background:#F00; }

.sns a { white-space:nowrap; }


/* header ================= */
header        { position:fixed; width:100%; background:rgba(8, 178, 218, .9); z-index:100; }
header .inner,
header ul     { display:flex; justify-content:space-between; align-items:center; }
h1            { width:20%; }
header nav    { width:78%; }

/* lang-switch (nav内アイテムとして配置) */
.lang-switch-item  { margin-left:auto; }
.lang-switch       { display:inline-flex; align-items:center; gap:2px; font-size:13px; background:rgba(0,0,0,.15); border-radius:3px; padding:2px 4px; white-space:nowrap; }
.lang-switch a     { display:inline; padding:1px 5px; color:#fff; text-decoration:none; font-weight:bold; border-radius:2px; }
.lang-switch a:hover { background:rgba(255,255,255,.2); opacity:1; }
.lang-switch .current { color:#ffd; font-weight:bold; padding:1px 5px; }
header small  { display:block; }
header a      { display:block; text-align:center; line-height:1.2em; color:#FFF; }


/* mv ********** */
#mv          { background:url(../../common/img/bg02.png) no-repeat center right / cover; margin-top:0; }
#mv .mvBox   { background:url(../../common/img/bg03.png) no-repeat left bottom / contain; margin:0 2em; padding:2em 0; }
#mv .mvTitle {
	width:60%; margin:0 0 0 40%; padding:1em;
	background:rgba(255,255,255,.5); border-radius:40px;
	text-align:center;
}
#mv h2       { background:#78d9ed; border:0; line-height:1; margin:0; }
#mv h2 img   { width:100%; }
#mv p        { font-size:240%; margin:.5em; color:#0064B4; border:double #0064B4; border-width:3px 0; text-align:center; }


/* youTubeBox */
.youTubeBox        { margin:60px 0; text-align:center; }
.youTubeBox iframe { width:900px; height:calc( 900px * 0.5625 ); }


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

/* secBox ********** */

/* col */
.col2     , .col3     { display:flex; gap:2%; flex-wrap:wrap; padding:0; list-style:none; }
.col2 p   , .col3 p   { margin-top:.5em; }

.col2 > * { width:49%; margin:0; }
.col3 > * { width:32%; margin:0; }

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


/* main ================= #7de #6bc / #08a */
main    { padding-top:6em; }
section { padding:4.5em 0 0; }

main img { display:block; width:100%; }

main h2        { background:#08a; border:3px solid #08a; color:#fff; border-radius:15px; margin:0 0 1em; }
main h2 span   { background:#08a; border:3px solid #fff; padding:10px; border-radius:15px; padding:1.5em 0; display:block; text-align:center; }

main h3        { background:#6bc; border:3px solid #6bc; color:#fff; border-radius:12px; margin:0 0 1em; }
main h3 span   { background:#6bc; border:2px solid #fff; padding:5px 10px; border-radius:12px; padding:.6em 0; display:block; text-align:center; }

main h4        { background:#7de; color:#08a; padding:.5em; text-align:center; }

main h5        { position:relative; display:inline-block; color:#08a; }
main h5:before { position:absolute; bottom:0; content:""; width:100%; height:10px; background:#7de; z-index:-100; }
main li h5     { margin:0; }

main p  { margin:1em; text-align:justify; }

main li { margin:1em 0; }

/*
main ol               { margin:0; padding:0; list-style:none; }
main ol li            { display:flex; }
main ol strong        { display:inline-block; width:10em; color:#08a; }
main ol span          { position:relative; padding:0 0 0 1em; }
main ol span:before   { position:absolute; left:0; content:":"; }

/**
main ol strong        { position:relative; display:inline-block; width:10em; margin:0 .5em; font-weight:bold; color:#08a; }
main ol span          { position:relative; }
main ol span:before   { position:absolute; bottom:0; content:""; width:100%; height:10px; background:#7de; z-index:-100; }


/* page0 */
#page0 ul { display:flex; flex-wrap:wrap; justify-content:space-between; padding:0; list-style:none; }
#page0 li { width:49%; margin:.5em 0; border:5px solid #7de; }
#page0 h4 { margin:0; padding:.5em 0; background:#7de; color:#08a; }


/* pagetop */
.pagetop     { text-align:right; }
.pagetop a   { width:80px; display:inline-block; }
.pagetop img { width:100%; }


/* footer ================= */
footer   { background:#6bc; color:#FFF; }
footer a { text-decoration:none; color:white; }

/* copyright ********** */
.copyright { margin:0; text-align:center; }


/*------------------------------------------------------------
	レスポンシブ
------------------------------------------------------------*/
#hmb_check, #hmb_btn, #hmb_bg,
#hmb_content li ul,
.sp { display:none; }
@media (max-width: 768px){
	#hmb_btn, #hmb_bg,
	.sp { display:inline-block; }
	.pc { display:none; }
	.c  { text-align:left; }

	/* ******** hmb_menu ******** */
	#hmb_btn, #hmb_bg { cursor:pointer; }
	#hmb_btn { /* ボタン：メニューOFF・アイコンON */
		position:absolute; top:5px; right:20px;
		display:block; width:40px; height:40px; min-width:40px; margin:0; z-index:1002;
		background:#038 url(../../common/img/icon/hmb_btnOn.svg) no-repeat center / 20px; border-radius:5px;
	}
	#hmb_bg {
		display:none; width:100%; height:100%;
		position:fixed; left:0; top:0; z-index:1000;
		background:#000; opacity:.5;
		transition:.3s;
	}
	#hmb_content {
		display:block; width:80%; height:100%; margin-right:-100%; padding:60px 0 0 0;
		position:fixed; top:0; right:0; z-index:1001;
		background:rgba(150, 190, 255, .9); opacity:0; overflow:auto;
		transition:.3s;
	}
	#hmb_check:checked + #hmb_btn {/* ボタン：メニューON・アイコンOFF */
		background-image:url(../../common/img/icon/hmb_btnOff.svg);
	} 
	#hmb_check:checked ~ #hmb_bg      { display:block; }
	#hmb_check:checked ~ #hmb_content { margin-right:0; opacity:1; }
	/* ******** hmb_menu ******** */


	/* table */
	table { margin:.5em 0 1em 0; }
	.tabl-block tr tr th, 
	.tabl-block tr tr td,/**/
	th,td    { display:block; }
	th       { padding-top:1em; padding-bottom:0; }
	th:after { display:none; }
	.tabl-block-non th, .tabl-block-non td { display:table-cell; }


	/* btn */
	.sns { font-size:60%; }
	.sns img { width:70%; }


	#hmb_content li ul,
	header .inner,
	header ul { display:block; }
	/* header ********** */
	h1        { width:50%; margin:3px 0; }

	header a     { text-align:left; }
	header ul    { margin:0 1em; border-bottom:1px solid #FFF; font-size:120%; }
	header li    { border-top:1px solid #FFF; }
	header li a  { padding:.5em; padding-right:0; }
	header li ul { margin:0 0 0 1em; border:none; }

	/* lang-switch (SP: ハンバーガーメニュー内) */
	.lang-switch-item { margin:1.5em 0 .5em; text-align:center; border:none !important; }
	.lang-switch      { font-size:16px; padding:6px 12px; background:rgba(0,0,0,.2); }
	header li li { font-size:70%; border-top-style:dashed; }

	/* mv ********** */
	#mv .mvTitle { width:100%; margin:70% 0 0 0; }
	#mv .mvBox   { margin:0; padding:1em; }
	#mv p        { font-size:120%; }


	/* inner */
	main,
	.inner { width:auto; }


	/* news ********** */

	/* youTubeBox */
	.youTubeBox iframe { width:100%; height:auto; min-height:250px; }


	/* ------------ */
	/* secBox */
	.secBox h2        { min-width:auto; }
	.secBox h2 strong { font-size:120%; }
	.secBox h2 span   { font-size: 55%; line-height:1; }

	/* main ================= */
	main h3 { font-size:120%; }

	/* first */
	#page0 ul { display:block; }
	#page0 li { width:auto; margin:1em 0; }

	/* col */
	.col2,
	.col3 { display:block; }
	.col2 > *,
	.col3 > * { width:auto; }
	/* ------------ */


	/* pagetop ********** */
	.pagetop a { width:60px; margin:1em auto 0; }


	/* footer ********** */
	footer {  }
}