@charset "UTF-8";

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# PC・スマホ 共通設定 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */

@keyframes spinOpen {
	0%   { transform: rotate(0); }
	100% { transform: rotate(180deg); }
}

@keyframes spinClose {
	0%   { transform: rotate(180deg); }
	100% { transform: rotate(0); }
}

/* L1 ######################################## ビューワーポイント ######################################## */

#viewer-point {
	position: relative;
	z-index: 1;
	margin: 2px;
	padding: 0.5em 0;
	text-align: center;
	background: #336699;
	border: 1px solid #ffffff;
	background: rgba(0, 128, 255, 0.5) linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.5));
}

/* L1 ######################################## サイトタイトル ######################################## */

h1::before {
	content: "Eighteen Event Viewer Beta";
}

/* L1 ######################################## メインビジュアル ######################################## */

/*
div.image a::after {
	cursor: pointer;
	content: "オモドリハ コチラカラ";
	position: absolute;
	bottom: 2px;
	right: 2px;
	z-index: 10;
	padding: 4px;
	font-size: 1.1rem;
	line-height: 1.0;
	border: 1px solid #333333
	;
	background: rgba(0, 0, 0, 0.8);
}
*/

/* L1 ######################################## h2要素 ######################################## */

h2 {
	display: none;
}

/* L1 ######################################## 検索項目 ######################################## */

#menu h2 {
	display: none;
}

/* L2 **************************************** 共通項目 **************************************** */

/* L3 ======================================== 枠 ======================================== */

div.search {
	position: relative;
	z-index: 1;
	margin: 2px;
}

div.search > div.wrapper {
	overflow: hidden;
	height: 0;
	margin: 0 2%;
	text-align: center;
	transition: height 0.5s ease-in-out;
}

/* L3 ======================================== 見出し ======================================== */

div.search > h3 {
	overflow: hidden;
	cursor: pointer;
	position: relative;
	padding: 0.2em 35px 0.4em 0.5em;
	font-size: 2.8rem;
	font-family: "Ubuntu Condensed", sans-serif;
	font-weight: normal;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid rgba(0, 128, 255, 1);
	background: rgba(0, 128, 255, 0.5) linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.5));
}
div.search > h3::before {
	content: "\f13a";
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 26px;
	height: 25px;
	font-family: "FontAwesome";
	font-size: 2.4rem;
	line-height: 1.0;
	text-indent: 3px;
}
div.search > h3::after {
	overflow: hidden;
	display: block;
	margin-left: 2.4em;
	padding-right: 35px;
	font-family: "メイリオ", "HiraKakuProN-W3", "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	font-size: 1.2rem;
}

div.search > h3 i {
	position: relative;
	top: -2px;
	margin-right: 3px;
	font-size: 75%;
}

div.search > h3.closed::before {
	animation: spinClose 0.3s linear forwards;
}
div.search > h3.opened::before {
	animation: spinOpen 0.3s linear forwards;
}

/* L3 ======================================== 検索条件（開始） ======================================== */

div.search div.group {
	position: relative;
	width: 100%;
	margin: 2px 0;
	line-height: 1.0;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #444444;
	box-sizing: border-box;
}
div.search div.group::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 2px;
	z-index: 10;
	width: 48px;
	height: 6px;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.9));
	border-radius: 0 3px 3px 0;
}

div.search div.wrapper div.group:first-child {
	margin-top: 1em;
}

div.search div.wrapper div.group:last-child {
	margin-bottom: 1em;
}

div.search div.group h4 {
	overflow: hidden;
	position: relative;
	width: 100%;
	padding: 0.8em 35px 0.8em 60px;
	font-weight: normal;
	text-align: left;
	line-height: 1.4;
	vertical-align: middle;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: #000000;
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-size: 4px 4px;
	box-sizing: border-box;
}
div.search div.group h4::before {
	position: relative;
	color: #ffffff;
	font-family: "FontAwesome";
	margin-right: 0.5em;
}
div.search div.group h4::before {
	content: "\f008";
}

div.search div.group h4::after {
	content: "\f13a";
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 23px;
	height: 20px;
	color: #ffffff;
	font-family: "FontAwesome";
	font-size: 2.0rem;
	line-height: 1.0;
	text-indent: 3px;
}
div.search div.group h4.closed::after {
	animation: spinClose 0.3s linear forwards;
}
div.search div.group h4.opened::after {
	animation: spinOpen 0.3s linear forwards;
}

div.search div.group h4 {
	cursor: pointer;
}

div.search div.group div.contents {
	position: relative;
	padding: 0 1em;
}

div.search div.group div.contents {
	overflow: hidden;
	height: 0;
	transition: height 0.5s ease-in-out;
}

div.search div.group div.contents div.inner {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

div.search div.group div.contents h5 {
	margin: 0.5em 0;
	padding: 0.4em 10px;
	font-weight: normal;
	text-align: left;
	background: #092642;
	border-radius: 15px;
	background-image: linear-gradient(45deg,  rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 75%), linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 75%);
	background-size: 8px 8px;
}
div.search div.group div.contents h5::before {
	content: "\f002";
	margin-right: 0.6em;
	font-family: "FontAwesome";
}

div.search ul.nav {
	position: relative;
	list-style-type: none;
	text-align: center;
	margin: 2px 0;
}

div.search ul.nav + ul.nav {
	margin-top: 6px;
}

div.search ul.nav li {
	cursor: pointer;
	position: relative;
	display: inline-block;
	margin: 4px 2px;
	padding: 0.5em;
	line-height: 1.0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.5) linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
	border-radius: 5px;
}

div.search ul.nav li.no-data {
	cursor: default;
	color: rgba(255, 255, 255, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.30);
	background: rgba(0, 0, 0, 0.4) linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
}
div.search ul.nav li.no-data::before {
	content: "\f023";
	position: absolute;
	top: -5px;
	left: -4px;
	z-index: 10;
	color: #cccc00;
	font-family: "FontAwesome";
	opacity: 1.0;
}

div.search ul.nav img {
	position: relative;
	top: -4px;
	height: 16px;
	margin-bottom: -6px;
}

/* L4 ---------------------------------------- テキスト入力フォーム ---------------------------------------- */

#user-name {
	position: relative;
	z-index: 10;
	margin: 2em 0 1.5em 0;
	text-align: center;
}

#user-name input[type="text"] {
	width: 250px;
	padding: 0.2em 10px;
	font-size: 1.8rem;
	text-align: center;
	line-height: 1.0;
	border-radius: 20px;
}

#user-name p.note {
	padding: 0.5em 0;
	font-size: 1.1rem;
}

/* L2 **************************************** ドリームマスターズ **************************************** */

#dream-masters h3::after {
	content: "ドリームマスターズ";
}

/* L2 **************************************** メインストーリー **************************************** */

#main-story-chapter1 h3::after {
	content: "メインストーリー 1章";
}

/* L2 **************************************** スペシャルイベント **************************************** */

#special-event h3::after {
	content: "スペシャルイベント";
}

/* L2 **************************************** ボイス付きダイバークエスト **************************************** */

#special-event_voice h3::after {
	content: "ボイス付きダイバークエスト";
}

/* L2 **************************************** サブストーリー **************************************** */

#sub-story h3::after {
	content: "サブストーリー";
}

/* L2 **************************************** 18の日特別クエスト **************************************** */

#eighteen-day h3::after {
	content: "18の日特別クエスト";
}

/* L1 ######################################## 検索結果 ######################################## */

#result {
	overflow: hidden;
	position: relative;
	z-index: 1;
	min-height: 250px;
	margin: 3em 2px;
	padding-bottom: 1em;
	border: 1px solid #444444;
	background: rgba(0, 0, 0, 0.4);
	/* transition: height 1.2s ease-out; */
}

#menu + #result {
	margin-top: 4em;
}

#result h2 {
	display: none;
}

/* L2 **************************************** 見出し **************************************** */

#result > h3 {
	position: relative;
	padding: 1em 2%;
	font-size: 1.8rem;
	font-weight: normal;
	line-height: 1.4;
	text-overflow: ellipsis;
	background: rgba(0, 128, 255, 0.5) linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.5));
}

#result > h3 > div {
	position: relative;
	margin-left: 30px;
}

#result > h3 > div::before {
	position: absolute;
	top: -2px;
	left: -30px;
	z-index: 10;
	content: "\f008";
	margin-right: 0.4em;
	font-family: "FontAwesome";
}


/* L2 **************************************** ステータス **************************************** */

#result > p.status {
	cursor: pointer;
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0.5em 0;
	color: #ffff00;
	text-align: center;
	text-decoration: underline;
	letter-spacing: 0;
	border-top: 1px solid #444444;
	background: rgba(0, 0, 0, 0.5);
	transition: letter-spacing 1s ease-out;
}

#result > p.status.last {
	color: #ffffff;
}

#result > p.status.loaded {
	display: block;
}

/* L2 **************************************** メッセージ関連 **************************************** */

/* L3 ======================================== ローディングメッセージ・他 ======================================== */

p.message {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 1em 0;
	font-size: 1.2rem;
	text-align: center;
}

p.loading {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 1em;
	margin: auto;
	line-height: 1.0;
	font-size: 1.2rem;
	text-align: center;
}

/* L1 ######################################## イベント ######################################## */

div.event {
	margin: 2em 0;
	
}

/* L2 **************************************** コンテンツ **************************************** */

div.event > div.contents {
	margin: 0 4%;
}

/* L2 **************************************** 場面 **************************************** */

div.event p.scene {
	overflow: hidden;
	display: none;
	height: 0;
	margin: 0 -2%;
	font-size: 1.8rem;
	line-height: 1.0;
	background: rgba(0, 128, 255, 0.5) linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.5));
	/* border-radius: 1.4em; */
	transition: height 0.5s linear, margin 0.5s linear;
}

div.event p.scene.opened {
	margin-bottom: 2em;
}

div.event p.scene strong {
	display: block;
	padding: 0.6em 20px;
	font-weight: normal;
}
div.event p.scene strong::before {
	content: "─";
	margin-right: 0.4em;
}

/* L2 **************************************** ダイアログ **************************************** */

div.event dl {
	cursor: pointer;
	display: none;
	overflow: hidden;
	position: relative;
	height: 0;
	max-width: 300px;
	margin: 0 auto;
	padding-left: 65px;
	padding-right: 65px;
	padding-bottom: 0;
	opacity: 0;
	transition: left 0.5s ease-out, right 0.5s ease-out, height 0.5s linear, padding 0.5s linear, opacity 0.5s linear;
}
div.event dl.L {
	left: -50px;
}
div.event dl.R {
	right: -50px;
}

div.event > div.contents > dl:last-child {
	cursor: default;
}

div.event dl.opened {
	padding-bottom: 4em;
	opacity: 1;
}
div.event dl.L.opened {
	left: 0;
}
div.event dl.R.opened {
	right: 0;
}

div.event dl.opened.clicked {
	cursor: default;
}

/* L3 ======================================== キャラクター名 ======================================== */

div.event dl dt {
	position: relative;
	font-size: 1.7rem;
	margin-bottom: 0.4em;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 1.5;
}
div.event dl dt::before {
	position: relative;
	z-index: 10;
	content: "\f101";
	margin-right: 0.4em;
	font-family: "FontAwesome";
}
div.event dl dt::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.8em;
	background-image: linear-gradient(0deg, #333333 25%, transparent 25%, transparent 50%, #333333 50%, #333333 75%, transparent 75%, transparent);
	background-size: 4px 4px;
	border-radius: 5px;
}

div.event dl dt.no-name {
	display: none;
}

div.event dl dt strong {
	position: relative;
	z-index: 1;
	font-weight: normal;
}

/* L3 ======================================== アイコン ======================================== */

div.event dl dd.icon {
	position: absolute;
	top: 0;
}
div.event dl.L dd.icon { left: 0; }
div.event dl.R dd.icon { right: 0; }

div.event dl dd.icon img {
	width: 52px;
	height: 52px;
	border: 1px solid #ffffff;
	transition: 1s ;
	transform: rotateY(-180deg);
}

div.event dl dd.icon.no-frame img {
	border: none;
}

div.event dl.opened dd.icon img {
	transform: rotateY(0deg);
}


/* L3 ======================================== 会話 ======================================== */

div.event dl dd.dialog {
	padding-left: 27px;
	padding-right: 10px;
}

/* L2 **************************************** メッセージ **************************************** */

div.event p.narration {
	overflow: hidden;
	height: 0;
	font-size: 1.8rem;
	text-align: center;
	transition: height 0.5s linear, margin 0.5s linear;
}
div.event p.narration.slow {
	transition: height 12s linear, margin 12s linear;
}

div.event p.narration.opened {
	margin-top: 6em;
	margin-bottom: 8em;
}


/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# PC・スマホ 共通設定 ここまで #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */