@charset "UTF-8";
/* ==================================================================
CSS information
style info :共通（汎用クラス）
================================================================== */

html,body { -webkit-text-size-adjust: none; }

html { font-size: 62.5%; }
body { font-size: 1.4rem; }

/*img { max-width:100%; height:auto; }*/

div, h1, h2, h3, h4, h5, p { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#contents ul, #contents li, #contents dl, #contents dt, #contents dd, #contents a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#contents img { max-width: 100%; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
/*#contents div, #contents p, #contents ul, #contents dl, #contents h1, #contents h2, #contents h3, #contents h4, #contents h5 { position: relative; } */
div, ul, dl, li, h2, h3, h4, h5, p { position: relative; }

img {
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout: none;
}

@media screen and (max-width: 750px) {
#contents img { width: 100%; height: auto;}
}
/*
width : 98% ; IE8以下とAndroid4.3以下用フォールバック
width : -webkit-calc(100% - 20px) ;
width : calc(100% - 20px) ;
*/

/*テンプレート内にある記述*/
/*http://www.jp.square-enix.com/common/templates/css/template_rsp.css*/
body a:link,
body a:visited,
body a:hover,
body a:active {
	color:#fff;
}
body a:hover {
	text-decoration: none;
	color:#fff;
}

.pc { display: block; }
.sp { display: none; }
@media screen and (max-width: 750px) {
	.pc { display: none; }
	.sp { display: block; }
}

.mb-space {
	margin-bottom: 80px;
}
@media screen and (max-width: 750px) {
	.mb-space {
		margin-bottom: 0;
	}
}

/* ------------------------
　FONT設定
--------------------------*/
/* ドット文字 */
@font-face {
	font-family: 'dot-font';
	src: url('../font/dot.eot');
	src: url('../font/dot.eot?#iefix') format('embedded-opentype'),
	url('../font/dot.woff2') format('woff2'),
	url('../font/dot.woff') format('woff'),
	url('../font/dot.ttf') format('truetype');
}
/* 明朝 */
.F_mincho {
	font-family: 'Hiragino Mincho Pro','游明朝','Yu Mincho',YuMincho,serif;
}

/* ------------------------
　▼contents　コンテンツ
--------------------------*/
.cf:after{
content:"";
display:block;
clear:both;
}
#contents {
	margin: 0 auto;
	background: #000;
	color:#fff;
}
@media screen and (max-width: 750px) {
	#contents {
		width:100%;
		padding:0;
		margin: 0;
	}
}
/* ------------------------
　▲contents　コンテンツ
--------------------------*/

/*上記を上書き*/
#contents {
	width: 100%;
	position: relative;
}

#conSet {
	margin: 0 auto;
	max-width: 1000px;
}

#gN {
	width: 425px;
	margin-left: -488px;
	position: fixed;
	top: 70px;
	z-index: 9990;
}
#gN div {
	position: relative;
}
#gN div .base {
	height: 770px;
}
#gN div .logo {
	width: 260px;
	height: auto;
	position: absolute;
	top: 35px;
	left: 85px;
}
#gN div ul {
	width: 323px;
	/* max-height: 77vh;
	overflow: auto; */
	position: absolute;
	top: 125px;
	left: 40px;
	padding: 0 0 10px;
	height: 590px;
	overflow-y: scroll;
}
#gN ul li {
	margin-bottom: 6px;
}
#gN ul li img {
	width: 100%;
}
#gN .close2 {
	position: absolute;
	top: 31px;
	right: 28px;
	cursor: pointer;
}
#gNavI {
	position: fixed;
	width: 76px;
	top: 90px;
	z-index: 9991;
	cursor: pointer;
}

/* メニュー高さ調整（デバイスの高さによってスクロールできな為）*/
@media screen and (max-height: 720px) {
	#gN div ul {
		height: 72vh;
	}
}

@media screen and (max-width: 750px) {
	#gNSP {
		width: 100%;
		margin-left: 0;
		position: absolute;
		top: 0;
		z-index: 9990;
	}
	#gNSP div .logo {
    width: 100%;
    height: auto;
    position: absolute;
    top: 2.5%;
    left: 0;
    z-index: 0;
	}
	#gNSP div ul {
		width: 83%;
		position: absolute;
		top: 13.5%;
		left: 8%;
		overflow-y: scroll;
		height: 78%;
	}
	#gNSP ul li {
		margin-bottom: 2%;
	}
	#gNSP .close2 {
		position: absolute;
		top: 2%;
		right: 3%;
		cursor: pointer;
		width: 6%;
	}
	#gNavISP {
		position: absolute;
		width: 16%;
		top: 0;
		left: 0;
		z-index: 9991;
		cursor: pointer;
	}
}

/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#collectionBnr {
	padding: 50px 0 20px;
	width: 100%;
	background: rgba(255,255,255,0.05);
	text-align: center;
	position: relative;
}
#collectionBnr .wrap {
	max-width: 1070px;
	margin: 0 auto;
}
#collectionBnr .wrap ul {
	width: 100%;
	display: -webkit-box;
  display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
  -ms-flex-pack: justify;
	justify-content: space-between;
}

#collectionBnr .wrap ul li {
	width: 24%;
}
/* #collectionBnr ul li {
	float: left;
	margin-right: 50px;
}
#collectionBnr ul li:last-child {
	margin-right: 0;
} */
#collectionBnr p {
	margin-top: 25px;
	font-size: 13px;
}

@media screen and (max-width: 750px) {
	#collectionBnr {
		padding: 5% 0;
		width: 100%;
		position: relative;
	}
	#collectionBnr .wrap ul {
		margin: 0 auto;
		width: 95%;
		flex-wrap: wrap;
	}
	#collectionBnr .wrap ul li {
		width: 49%;
		margin-right: 2%;
	}
	#collectionBnr ul li:nth-child(even) {
		margin-right: 0;
	}
	#collectionBnr p {
		margin-top: 2%;
		font-size: 3vw;
	}
}

/* --------------------------------------------------------
著作物利用許諾条件
-------------------------------------------------------- */
.fbold {
	font-weight: bold;
	font-size: 16px;
}
.no li { margin-top: 10px; margin-left:1em; list-style:none; text-indent: -1em; }
.no li.n1:before { content:"①";color:#000; }
.no li.n2:before { content:"②";color:#000; }
.no li.n3:before { content:"③";color:#000; }
.no li.n4:before { content:"④";color:#000; }
.no li.n5:before { content:"⑤";color:#000; }
.no li.n6:before { content:"⑥";color:#000; }
.no li.n7:before { content:"⑦";color:#000; }
.no li.n8:before { content:"⑧";color:#000; }
.no li.n9:before { content:"⑨";color:#000; }
.no li.n10:before { content:"⑩";color:#000; }
.no li.n11:before { content:"⑪";color:#000; }
.no li.n12:before { content:"⑫";color:#000; }
.no li.n13:before { content:"⑬";color:#000; }
.no li.n14:before { content:"⑭";color:#000; }
.no li.n15:before { content:"⑮";color:#000; }

#mcon {
	width: 100%;
	height: 100%;
	background: rgba(0,0,9,0.8);
	position: fixed;
	top: 100%;
	left: 0;
	z-index: 15000;
}

#mcon .mcon_inner {
	padding: 25px;
	width: 80%;
	max-width: 900px;
	height: 550px;
	background: #fff;
	position: fixed;
	top: 100%;
	left: 0;
	z-index: 15001;
}
#mcon .mcon_inner .txt {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	font-size: 14px;
	line-height: 1.5;
}

#mcon .mcon_inner .txt p,
#mcon .mcon_inner .txt .t {
	margin-top: 20px;
}

#mcon .close2 {
  width: 40px;
  height: 40px;
  position: absolute;
  top: -44px;
  right: 0;
  cursor: pointer;
}

#mcon .close2::before, #mcon .close2::after {
  width: 40px;
  height: 2px;
  background: #fff;
  position: absolute;
  z-index: 20;
  top: 19px;
}

#mcon .close2::before {
  content: "";
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#mcon .close2::after {
  content: "";
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@media screen and (max-width: 750px) {
	.fbold {
		font-size: 14px;
	}
	#mcon .mcon_inner {
		padding: 5%;
		width: 80%;
		height: 60vh;
	}
	#mcon .mcon_inner .txt {
		font-size: 12px;
		line-height: 1.5;
	}
	#mcon .mcon_inner .txt p,
	#mcon .mcon_inner .txt .t {
		margin-top: 3%;
	}
	.no li { margin-top: 3%; margin-left:1em; list-style:none; text-indent: -1em; }
}

/* --------------------------------------------------------
PAGE TOP
-------------------------------------------------------- */
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
@media screen and (max-width: 750px) {
	#pageTop {
		width: 22%;
	}
}