@charset "UTF-8";

/* --- Free! WEBサイトCSS */

/* --- common settings */

* { color:#0064aa; font-size:16px; }

html, body {
	height: 100%; width:auto;
	margin:0;padding:0;
	display:block;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

.mt20{ margin-top:20px; }
.mt50{ margin-top:50px; }
.mt70{ margin-top:70px; }
.mr35{ margin-right:35px; }
.mb20{ margin-bottom:20px; }
.ml20{ margin-left:20px; }
.pl80{ padding-left:110px; }

.fs20{ font-size:20px; }

.w980imp{ width:980px !important; }
.w860{ width:860px; }
.w780{ width:780px; }
.w740{ width:740px; }
.w720{ width:720px; }
.w640{ width:640px; }
.w600{ width:600px; }
.w400{ width:400px; }
.w350{ width:350px; }
.important{ color: #FF0080;}

.cb { clear:both; }
.flt-l{ float:left; }
.flt-r{ float:right; }
.ta-c { text-align:center; }
.ta-l { text-align:left; }

.dn { display:none; }
.fc-wh{ color:#ffffff; }

.a-ul{ text-decoration:underline; }
.a-ul:hover{ text-decoration:none; }

.fw-b{ font-weight: bold; }
.img-hover-on{
	opacity: 0;
	transition: opacity 0.4s;
}
.img-hover-on:hover{
	opacity: 1;
/*
	opacity: 1;
	-moz-opacity: 1;
	-ms-filter: 'alpha(opacity=100)';
	transition: opacity 0.3s linear;
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
*/
}


/* --- content settings */
#body-bg-top {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
#body-bg-dtl {
	position: absolute;
	inset: 0;
	background-color: #FFF;
	pointer-events: none;
	z-index: 0;
}

#body-bg-top img,
#body-bg-dtl .body-bg-image img {
	object-fit: cover;
	object-position: 0 0;
	width: 100%;
	height: 100%;
}
#body-bg-top img {
	aspect-ratio: 16 / 9;
}
#body-bg-dtl .body-bg-image img {
	aspect-ratio: 560 / 703;
}

#body-bg-dtl .body-bg-image {
	position: fixed;
	width: 100%;
	min-width: 980px;
	height: 100%;
	opacity: .35;
}

#body-bg-dtl .body-bg-chara {
	position: absolute;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	inset: 0;
	width: 980px;
	margin-inline: auto;
}
#body-bg-dtl .body-bg-chara img {
	object-fit: contain;
	object-position: 0 0;
	width: 400px;
	height: 600px;
	aspect-ratio: 2 / 3;

	opacity: 0;
	transform: translateX(-100px);
	transition: .2s ease-out;
	transition-property: opacity, transform;
}
#body-bg-dtl .body-bg-chara.bg-chara-fadeIn img {
	opacity: .35;
	transform: translateX(-10px);
}

#body-wrapper {
}

#noscript {
	text-align: center;
	font-size: 117%;
	color: #3366ff;
	z-index: 9999;
	width: 100%;
	height: 100%;
}

/* ---------------------------
content setting
--------------------------- */
#content-wrapper {
	float:left;
	width:auto;
	overflow:hidden;
/*
	width: 100%;
	display: none;
	min-height: 100%;
	height: auto !important;
	height: 100%;
*/

}
#content-wrapper:after{
	width:1px;
	height:1px;
	float:right;
	clear:both;
}

#content-bg {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index: 1;
}

#idx-sidenav{
	width:300px;
}
#ul-idx-sidenav{
	width:300px;
	display:inline-block;
}

#ul-idx-sidenav li{
	width:180px;
	height:30px;
	overflow-hidden;
	background-image:url('/images/free-idx-sidenav-off.png');
	display: block;
	position: relative;
}

#ul-idx-sidenav li a {
display:block;
width:180px;
height:30px;

overflow:hidden;
background-image:url('/images/free-idx-sidenav-on.png');
-webkit-transition: All 0.1s ease-in;
-moz-transition: All  0.1s ease-in;
-o-transition: All  0.1s ease-in;
-ms-transition: All  0.1s ease-in;
transition: All  0.1s ease-in;
display: block;
position: relative;

}
#ul-idx-sidenav li a span{ display:none; }


#ul-idx-sidenav li{ margin:7px 0; /* border:1px solid #000000; */ }
#li-idx-sidenav-01{ background-position: 0px -4px;}
#li-idx-sidenav-02{ background-position: 0px 358px;}
#li-idx-sidenav-03{ background-position: 0px 324px;}
#li-idx-sidenav-04{ background-position: 0px 288px;}
#li-idx-sidenav-05{ background-position: 0px 252px;}
#li-idx-sidenav-06{ background-position: 0px 218px;}
#li-idx-sidenav-07{ background-position: 0px 182px;}
#li-idx-sidenav-08{ background-position: 0px 112px;}
#li-idx-sidenav-09{ background-position: 0px 146px;}
#li-idx-sidenav-10{ background-position: 0px 76px;}

#li-idx-sidenav-01 a{ background-position: 0px -4px;}
#li-idx-sidenav-02 a{ background-position: 0px 358px;}
#li-idx-sidenav-03 a{ background-position: 0px 324px;}
#li-idx-sidenav-04 a{ background-position: 0px 288px;}
#li-idx-sidenav-05 a{ background-position: 0px 252px;}
#li-idx-sidenav-06 a{ background-position: 0px 218px;}
#li-idx-sidenav-07 a{ background-position: 0px 182px;}
#li-idx-sidenav-08 a{ background-position: 0px 112px;}
#li-idx-sidenav-09 a{ background-position: 0px 146px;}
#li-idx-sidenav-10 a{ background-position: 0px 76px;}

#li-idx-sidenav-01 a:hover{ background-position: 210px -4px;}
#li-idx-sidenav-02 a:hover{ background-position: 210px 358px;}
#li-idx-sidenav-03 a:hover{ background-position: 210px 324px;}
#li-idx-sidenav-04 a:hover{ background-position: 210px 288px;}
#li-idx-sidenav-05 a:hover{ background-position: 210px 252px;}
#li-idx-sidenav-06 a:hover{ background-position: 210px 218px;}
#li-idx-sidenav-07 a:hover{ background-position: 210px 182px;}
#li-idx-sidenav-08 a:hover{ background-position: 210px 112px;}
#li-idx-sidenav-09 a:hover{ background-position: 210px 146px;}
#li-idx-sidenav-10 a:hover{ background-position: 210px 76px;}

.dl-whatsnew{
	width:235px;
	height: 150px;
	display:inline-block;
	overflow-y: auto;
}

.dl-whatsnew dt{
	width:215px;
	margin-bottom:3px;
	padding-bottom:2px;
	color:#ffffff;
	font-size:12px;
	line-height:1em;
	border-bottom: 1px solid #92C8E4;
}

.dl-whatsnew dd{
	width:210px;
	margin-bottom:10px;
	display:inline-block;
	font-size:14px;
	line-height:1.4em;
	color:#79FCFF;
}
.dl-whatsnew dd a{
	color:#00ffff;
	font-size:14px;
	font-weight: bold;
	text-decoration:underline;
}
.dl-whatsnew dd a:hover{
	text-decoration:none;
}

h1 {
	float: left;
	width: 300px;
}
h1 a {
	display: block;
	width: 230px;
	transition: 0.2s linear;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	-o-transition: 0.2s linear;
}
h1 a:hover {
	opacity: 0.6;
	-moz-opacity: 0.6;
	-ms-filter: 'alpha(opacity=60)';
	transition: opacity 0.3s linear;
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
}

.h4-subtitle{
	display:inline-block;
	font-weight:bold;
	border:0px solid #00b3ff;
	border-width:0 0 0 4px;
	padding-left:10px;
	margin-bottom:15px;
}

/* ---------------------------
global footer setting
--------------------------- */

#footer-wrapper{
	position:sticky;
	top: 100vh;
	height:155px;
	width:100%;
	background:url(/images/free-footer-bg-trans.png) left top repeat;
	overflow:hidden;
}
#footer{
}
/*
#footer-share{
	margin:20px 30px 0px 30px;
	padding-left:65px;
	width:auto;
	border:1px solid #ffffff;
	border-width: 0 0 1px 0;
	text-align:left;
	color:#eeeeee;
	background:url(/images/free-common-footer-share.png)left 3px no-repeat;
	display:block;
	height:27px;
}

#ul-common-socialtags{
	float:left;
	display:inline-block;
	margin: 0 0 1px 0;
	width:90%;
	height:27px;
	overflow:hidden;

}
#ul-common-socialtags:after{
	clear:both;
}
#ul-common-socialtags li{
	float:left;
	margin-left:10px;
	display:inline-block;
	overflow:hidden;
	vertical-align:baseline;
}

#socialtags-tw{ width:120px; }
#socialtags-fb{ width:120px; }
#socialtags-ht{ width:60px; }
#socialtags-gp{ width:80px; }
#socialtags-mx{ width:125px; }
 */

#footer-banner {
	margin:20px 30px 0 30px;
	width:auto;
	text-align:center;
}
#footer-banner a{
	display:inline-block;
	position:relative;
	text-align:center;
}
#footer-banner > a ~ a {
	margin-inline-start: 20px;
}
#footer-copy{
	display:inline-block;
	position:relative;
	text-align:center;
	width:100%;
	bottom:0;
	margin-top:20px;
}

#footer-kalogo{
	align:right;
	display:inline-block;
	position:relative;
	text-align:right;
	top:-20px;
	left:0;
	width:100%;
}

#footer-kalogo a{
margin-right:30px;
}