@charset "utf-8";

@media screen and (max-width: 786px) {

/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	common css

/_/_/_/_/_/_/_/_/_/_/_/_/_/_/__/_/_/_/_/_/_/_/_/_/_/_/_/ */
body{
	font-size:14px;
	-webkit-text-size-adjust: 100%;　/*sp font*/
}

#container {
	background:url(../img/bg-main-sp.jpg) repeat-y;
	background-size:contain;
}

#contents {
	position:relative;
	padding-bottom:120px;
	z-index:8000;
}

#contents section {
	text-align:center;
}

#contents section h2 {
	margin:0 auto 50px;
	text-align:center;
	font-size:32px;
}

#contents section h2 .ja {
	display:block;
	padding-top:10px;
	font-size:45%;
}

#layerA {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:#000;
	z-index:9900;
}

a { color:#eeeea2; text-decoration:none; }
a:hover{ color:#eeeea2; text-decoration:underline; transition: all 0.3s ease-in-out; }


/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	Keyframes css

/_/_/_/_/_/_/_/_/_/_/_/_/_/_/__/_/_/_/_/_/_/_/_/_/_/_/_/ */
@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
} 

@keyframes fadeOut {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
} 

/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	Module css

/_/_/_/_/_/_/_/_/_/_/_/_/_/_/__/_/_/_/_/_/_/_/_/_/_/_/_/ */
.mediaPC { display:none; }
.mediaSP { display:block; }

.pt10 { padding-top:10px; }
.pt20 { padding-top:20px; }
.pb10 { padding-bottom:10px; }
.pb20 { padding-bottom:20px; }
.pb30 { padding-bottom:30px; }

.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.mb10 { margin-bottom:10px !important; }
.mb20 { margin-bottom:20px !important; }
.mb30 { margin-bottom:30px !important; }
.mb40 { margin-bottom:40px !important; }

.fontS { font-size:75%; }
.fontL { font-size:125%; }

.boxWidth { margin:0 auto; }
.boxWidth.w1100,
.boxWidth.w960,
.boxWidth.w860 { width:auto; padding:0 20px; }

.boxCol { overflow:hidden; }
.boxCol > .colL,
.boxCol > .colR { float:none; }

.txtRead {
	line-height:2.2em;
}

.linkBtn {
    width:100%;
    margin:0 auto;
}

/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	base css

/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ */

/* sp navi
================================================= */

#btnWrap { 
    width:28px; 
	height:28px; 
	cursor: pointer; 
	position: fixed; 
	top: 30px; 
	right: 30px; 
	z-index: 9100; 
}
	
#btnWrap .btnInr > div { 
	width:28px; 
	height:2px; 
	overflow: hidden; 
	margin-bottom:7px; 
	background-color:#FFF; 
	transition:all 0.3s; 
}
	
#btnWrap.active .btnInr { 
	position:relative; 
}
#btnWrap.active .btnInr > div { 
	position:absolute; 
	width:100%; 
	margin-bottom:0; 
}
#btnWrap.active .btnInr > div:nth-of-type(1) {
	-webkit-transform: translateY(11px) rotate(-315deg); 
	transform: translateY(10px) rotate(-315deg); 
	bottom:0; 
}
#btnWrap.active .btnInr > div:nth-of-type(2) { 
	display:none; 
}
#btnWrap.active .btnInr > div:nth-of-type(3) {
	-webkit-transform: translateY(11px) rotate(315deg); 
	transform: translateY(10px) rotate(315deg); 
	bottom:0;
}

/* header
================================================= */
header {
	position:fixed;
	top:0;
	right:0;
	left:0;
	height:100%;
	background-color:rgba(0,0,0,.9);
	z-index:9010; 
}

header #gNavi {
	display:block;
	overflow:hidden;
	margin-top:70px;
}

header #gNavi li {
	float:none;
	padding:0;
	text-align:center;
}

header #gNavi li s,
header #gNavi li a {
	display:block;
	padding:25px;
	border-bottom:solid 1px #ccc;
	color:#FFF;
}

header #gNavi li a:hover {
	text-decoration:none;
	background-color:rgba(255,255,255,.3);
}

#gNavi.active {
	overflow-y:scroll;
}


/* visual
 ==================================================== */
#contents #areaVisual {
	padding-top:30px;
    margin-top:0;
    background:url(../img/pic-chara-sp.jpg) no-repeat center;
    background-size:cover;
    padding-bottom:105vw;
}

#contents #areaVisual .colR,
#contents #areaVisual .colL {
	width:auto;
	margin-top:0;
}

#contents #areaVisual .boxTitle h1 {
	width:85vw;
	margin:0 auto 10px;
}

#contents #areaVisual .boxTitle .date {
	width:85vw;
	margin:0 auto;
}

#contents #areaVisual .boxChara {
	display:none;
}

/* news
 ==================================================== */
#contents .boxNewsList {
	padding:0 20px;
}

#contents .boxNewsList > ul > li {
	padding-bottom:15px;
	border-bottom:solid 1px #516671;
    margin-bottom:15px;
}

#contents .boxNewsList > ul > li > dl {
    overflow:hidden;
    text-align:left;
}

#contents .boxNewsList > ul > li > dl > dt {
	display:inline-block;
    float:none;
    padding:5px 10px;
    border-radius:2px;
    margin-bottom:3px;
    font-size:90%;
    font-weight:bold;
    line-height:1em;
    background-color:#FFF;
    color:#000;
}

#contents .boxNewsList > ul > li > dl > dd {
	margin-top:5px;
    margin-left:0;
    text-align:left;
}

/* area [Intro]
 ==================================================== */
#intro .txtRead{
	padding-right:15px;
}


/* area [Information]
 ==================================================== */
#contents #areaInfo {
	margin-top:140px;
}

#contents #areaInfo .boxInfoList > ul > li {
	padding:0 0 25px;
	border-bottom:solid 1px #516671;
    margin-bottom:25px;
}

#contents #areaInfo .boxInfoList > ul > li > dl {
    overflow:hidden;
    text-align:left;
}

#contents #areaInfo .boxInfoList > ul > li > dl > dt {
    float:none;
    margin-bottom:10px;
    line-height:1em;
}

#contents #areaInfo .boxInfoList > ul > li > dl > dt::before {
	display:inline;
	content:"";
	padding-left:5px;
    border-left:solid 12px #FFF;
}

#contents #areaInfo .boxInfoList > ul > li > dl > dd {
    margin-left:0;
}

/* area [Access]
 ==================================================== */
#contents #areaAccess {
	margin-top:140px;
}

#contents #areaAccess #mapWrap {
	display:none;
}


/* area [Author]
 ==================================================== */
#contents #areaAuthor {
	margin-top:120px;
}

#contents #areaAuthor #artistPic {
	width:150px;
	margin:0 auto 20px;
}

#contents #areaAuthor h3 {
	font-size:18px;
	margin-bottom:20px;
}


/* footer
================================================== */
footer {
	padding:20px 0;
}
/* surface
================================================== */
.surface { position:absolute; opacity:.3; transition:1s; }
.surface.eyes { top:0; }

#eyesA { width:115px; height:72px; background:url(../img/pic-eyes-01.png) no-repeat; background-size:cover; z-index:10; }
#eyesB { width:150px; height:64px; background:url(../img/pic-eyes-02.png) no-repeat; background-size:cover; z-index:11; }
#eyesC { width:125px; height:79px; background:url(../img/pic-eyes-03.png) no-repeat; background-size:cover; z-index:12; }
#eyesD { width:180px; height:110px; background:url(../img/pic-eyes-04.png) no-repeat; background-size:cover; z-index:13; }

}