@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:190%; color:#0064B4; }
h3 { font-size:130%; }
h4 { font-size:120%; }
h5 { font-size:100%; }
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.5em; }
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; }
thead th,
thead td {}
th,td    {}
th       { padding:.5em 1em .5em 0; white-space:nowrap; }
td       { padding:.5em 0 .5em 1em; }

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

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

.inner {
	display:block; position:relative; clear:both; 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 ********** */
.btnBox,
.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; }

.btn.bnr ul  { margin:2em 0; flex-wrap:wrap; }
.btn.bnr a   { margin:.5em; padding:0; background:none; display:block; }
.btn.bnr img { width:100%; }
.btn.bnr      li { width:650px; }
.btn.bnr.col2 li { width:50%; }
.btn.bnr.col3 li { width:33%; }

.btn.big a  { font-size:200%; padding:1em; }


/* header ================= */
header        { position:fixed; width:100%; background:rgba(150, 190, 255, .9); z-index:100; }
header .inner { display:flex; align-items:center; }
header ul     { display:flex; justify-content:space-between; align-items:center; }
h1            { width:15%; min-width:150px; flex-shrink:0; }
header nav    { flex:1; min-width:0; }

/* lang-switch (headerのinnerフレックス末尾に配置) */
header .lang-switch { order:99; flex-shrink:0; display:inline-flex; align-items:center; gap:2px; font-size:13px; background:rgba(0,0,0,.15); border-radius:3px; padding:2px 6px; margin-left:8px; white-space:nowrap; }
header .lang-switch a     { display:inline; padding:1px 5px; color:#fff; text-decoration:none; font-weight:bold; border-radius:2px; }
header .lang-switch a:hover { background:rgba(255,255,255,.2); opacity:1; }
header .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; }


/* main ================= */
section { padding:30px 0; }


/* mv ********** */
#mv          { background:url(../img/bg02.png) no-repeat fixed center right / cover; padding-bottom:0; margin-bottom:0; }
#mv .inner   { background:url(../img/bg03.png) no-repeat left top / 60%; padding:5px 20px; }
#mv .aniRead {
	width:47%; margin:240px 0 170px 52%; padding:1em 0 2em;
	background:rgba(255,255,255,.5); border-radius:40px;
	text-align:center;
}
.aniRead > * { padding:0 0 0 .2em; letter-spacing:.2em; }
#mv h2       { font-size:300%; font-weight:100; margin:0 0 .1em; }
#mv p        { line-height:1em; }
#mv strong   { display:block; margin:.5em; font-size:170%; color:#0064B4; }

/* animation */
.aniRead h2, .aniRead p, .aniRead strong {
	animation-name:fadeIn;
	animation-fill-mode:backwards;
	animation-duration:2s;
	animation-iteration-count:1;
	animation-timing-function:ease-in-out;
	animation-direction:normal;
}
.aniRead h2             { animation-name:fadeInBottom; }
.aniRead p:nth-child(2) { animation-delay:0.2s; }
.aniRead p:nth-child(3) { animation-delay:0.4s; }
.aniRead p:nth-child(4) { animation-delay:0.8s; }
.aniRead p:nth-child(5) { animation-delay:1.0s; }
.aniRead strong         { animation-delay:1.6s; }
.aniRead p:nth-child(7) { animation-delay:0.6s; }
.aniRead p:nth-child(8) { animation-delay:1.2s; }

@keyframes fadeIn {
	0%   { opacity:0; filter:blur(1em); }
	100% { opacity:1; filter:none; }
}
@keyframes fadeInBottom {
	/* 対象のタグに position:relative; 入れてください */
	0%   { opacity:0; filter:blur(1em); top:2em; }
	100% { opacity:1; filter:none; top:0; }
}


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


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


/* news */
.news h2   { margin:1.5em 0; text-align:center; }
.news ul   { margin:2.5em 0; padding:0; list-style:none; }
.news li   { border-top:1px dashed #999; padding:1em 0 0 0; margin:1em 0 0 0; }
.news li:first-child { border:none; padding:0; margin:0; }
.news a    { display:flex; align-items:center; text-decoration:none; color:#333; }
.news time { margin:0 1em 0 0; color:#999; font-size:.75em; }
.news h4   { font-size:1rem; }


/* ------------------------------------------------ */
/* secBox ********** */

.secBox h2        { min-width:1200px; padding:1em 0; text-align:center; color:#4bb0ff; }
.secBox h2 *      { display:block; padding:.1em; padding-right:0; }
.secBox h2 strong { font-size:180%; letter-spacing:.1em; }
.secBox h2 span   { font-size: 80%; letter-spacing:.2em; font-weight:normal; }

main h3 { margin:0 0 2em; font-size:180%; text-align:center; }
main h3,
li p {
	color:#FFF;
	letter-spacing:.1em; /* 文字間を空けないと縁が前の文字に重なる */
	paint-order: stroke; /* 重ね順：縁を文字の下に */
	-webkit-text-stroke: 10px #5bcbff;
	text-shadow:    1px 1px 0 #5bcbff; /* 複合パスを塞ぐため */
}
li p {
	letter-spacing:.2em; /* 文字間を空けないと縁が前の文字に重なる */
}
main h3 img { width:100%; }

/* bgBox */
.bgBox { position:relative; padding:0 0 80px; background:url(../img/bg/blue-s.png) center; }
.bgBox:after {
	content:""; left:0; bottom:0; display:block; width:100%; height:100%;
	background:url(../img/bg/bg-after.png) no-repeat center bottom / 100%;
}
.bgBox h2 {
	margin-bottom:1em;
	background:url(../img/bg/bg-h2.png) no-repeat center bottom / 100%;
}

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

.col2 li  { width:49%; }
.col3 li  { width:32%; }

body .w100 { width:100%; }

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


/* products */
#products.bgBox {}
#products h2 {}
#products h3 {}

#products .logo img { width:15em; }

.msgBox {
	display:block; width:900px; margin:0 auto; padding:.5em;
	background:rgba(255,255,255,1); border:3px double #0064B4;
	font-size:120%; line-height:1.8em; text-align:center;
}


/* character */
#character h2 { padding-bottom:0; }
.chaBgBox {
	display:flex; justify-content:center; padding:40px 0;
	background:url(../img/bg02.png) right no-repeat; background-size:cover;
}
.chaBgBox img                { width:100%; }
.chaBgBox > div:nth-child(1) { width:15%; }
.chaBgBox > div:nth-child(2) { width:45%; position:relative;
	margin:5em 2em 2em 3em; padding:3em 1em 1em;
	background:rgba(0,160,255,.4);
}
#character h3       { font-size:450%; position:absolute; top:-80px; left:-40px; }
#character h3 small { font-size: 40%; line-height:1; display:block; }
#character p,
#character li {
	color:#FFF;
	letter-spacing:.1em; /* 文字間を空けないと縁が前の文字に重なる */
	paint-order: stroke; /* 重ね順：縁を文字の下に */
	-webkit-text-stroke: 5px #5bcbff;
	text-shadow:    1px 1px 0 #5bcbff; /* 複合パスを塞ぐため */
}
#character ul { /*display:flex; justify-content:space-between;*/ padding:0 0 0 1.5em; }


/* coordination */
#coordination.bgBox { background-image:url(../img/bg/green-s.png); }
#coordination h2 { color:#51d7bb; }
#coordination h3,
#coordination li p { 
	-webkit-text-stroke-color:#2baf93;
	text-shadow:    3px 3px 0 #2baf93;
}


/* itazura */
#itazura.bgBox {}
#itazura h2 { color:#ff9c00; }
#itazura h3,
#itazura li p { 
	-webkit-text-stroke-color:#ff9c00;
	text-shadow:    3px 3px 0 #ff9c00;
}


/* sexy */
#sexy.bgBox { background-image:url(../img/bg/pink-s.png); }
#sexy h2 { color:#ff8dc7; }
#sexy h3,
#sexy li p { 
	-webkit-text-stroke-color:#d5599a;
	text-shadow:    3px 3px 0 #d5599a;
}


/* system */
#system .inner { display:flex; justify-content:space-between; align-items:center; }
#system small strong { font-size:140%; }


/* pagetop */
.pagetop     {}
.pagetop a   { width:80px; display:block; }
.pagetop img { width:100%; }


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

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


/*------------------------------------------------------------
	レスポンシブ
------------------------------------------------------------*/
#hmb_check, #hmb_btn, #hmb_bg,
.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(../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(../img/icon/hmb_btnOff.svg);
	} 
	#hmb_check:checked ~ #hmb_bg      { display:block; }
	#hmb_check:checked ~ #hmb_content { margin-right:0; opacity:1; }
	/* ******** hmb_menu ******** */

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

	.btnBox > *,
	.btnBox iframe,
	.btnBox img { width:100%; }


	header .inner,
	header ul     { display:block; }
	/* header ********** */
	h1        { width:50%; margin:3px 0; }
	header ul { font-size:120%; }
	header li { margin:1.2em 0; }

	/* lang-switch (SP: ヘッダー右上) */
	header .lang-switch { position:absolute; top:10px; right:70px; font-size:14px; padding:4px 10px; background:rgba(0,0,0,.2); margin-left:0; }


	/* mv ********** */
	#mv .inner   { background-position:center bottom; background-size:cover; }
	#mv .aniRead { width:auto; margin:350px 0 20px; padding:.5em 0 1em; }
	#mv h2       { font-size:200%; }
	#mv p        { font-size:70%; }
	#mv strong   { font-size:110%; }


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


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

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

	/* news */
	.news a { display:block; }


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

	main h3 { font-size:120%; }

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


	/* products */
	.msgBox { width:auto; text-align:justify; }


	/* character */
	.chaBgBox > div:nth-child(1) { width:30%; }
	.chaBgBox > div:nth-child(2) { width:60%; margin:2em 0 0; padding:1.5em 1em 0em; }
	#character h3 { font-size:250%; top:-40px; left:-20px; }
	#character ul { display:block; }


	/* system */
	#system .inner   { display:block; }
	#system tr small { display:block; }


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


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