@charset "UTF-8";

@media screen and (max-width: 568px) {

/* L4 ---------------------------------------- ソート選択 ---------------------------------------- */

fieldset.sort div.wrapper {
	font-size: 1.2rem !important;
}

fieldset.sort label span {
	padding: 0 5px;
}

fieldset.sort ul {
	padding-right: 5px;
	border-right: none;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
}

fieldset.sort ul li {
	margin: 0 0.8em 0.5em 0.8em;
}

fieldset.sort select {
	top: 0;
	margin-top: 0.5em;
	margin-left: 0;
	font-size: 16px;
	transform: scale(0.875);
}

}

/* L1 ######################################## iPad より大きいモニタ要設定 ######################################## */

@media screen and (max-width: 768px) {

/* L3 ======================================== ODスキル ======================================== */

div.diver dl dd.od-skill ul li {
	font-size: 1.0rem;
}

div.diver dl dd.od-skill ul li img {
	width: 60px;
	height: 60px;
}

}

@media screen and (max-width: 414px) {
/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# スマホ 設定 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */

/* L1 ######################################## Twitterステータス ######################################## */

#twitter-status {
	font-size: 1.1rem;
}

#twitter-status img {
	width: 18px;
	height: 18px;
}

/* L1 ######################################## 検索項目 ######################################## */

/* L2 **************************************** 共通項目 **************************************** */

/* L3 ======================================== 見出し ======================================== */

div.search > h3 {
	font-size: 2.4rem;
	padding-top: 0.2em;
}
div.search > h3::after {
	font-size: 1.1rem;
}

/* L3 ======================================== 検索条件（開始） ======================================== */

div.search div.group::before {
	width: 28px;
}

div.search div.group > h4 {
	padding-left: 40px;
	padding-right: 3%;
}

div.search ul.nav li {
	font-size: 1.2rem;
}

/* L3 ======================================== fieldset デザイン ======================================== */

fieldset legend {
	margin-left: 3%;
}

fieldset label span {
	font-size: 1.2rem !important;
}

/* L4 ---------------------------------------- 属性選択 ---------------------------------------- */

fieldset.attr label span {
	padding: 0 6px;
}

fieldset.attr img {
	height: 25px;
}

/* L4 ---------------------------------------- レアリティ選択 ---------------------------------------- */

fieldset.rarity label span {
	cursor: pointer;
	display: block;
}

fieldset.rarity label span::before {
	display: none;
}

/* L4 ---------------------------------------- テキスト入力フォーム ---------------------------------------- */

#input {
	margin: 1em 0;
}

#input input[type="text"] {
	position: relative;
	left: -12.5%;
	width: 125%;
	font-size: 16px;
	transform: scale(0.8);
	box-sizing: border-box;
}

/* L2 **************************************** ODスキル **************************************** */

#od-skill div.group ul li img {
	width: 35px;
	height: 35px;
}

/* L1 ######################################## スペシャルリンク ######################################## */

#special-links li {
	font-size: 1.2rem;
}

/* L1 ######################################## 検索結果 ######################################## */

/* L2 **************************************** メッセージ関連 **************************************** */

/* L3 ======================================== 検索条件 ======================================== */

p.search-cond {
	padding-left: 1.8em;
	font-size: 1.4rem;
	text-indent: -1.55em;
}

/* L2 **************************************** 広告 **************************************** */

#result p.ad img {
	max-width: 300px;
}

/* L1 ######################################## ダイバー一覧（サムネイル） ######################################## */

#thumb ul.nav {
	padding: 0 2%;
}

#thumb ul.nav.prev,
#thumb ul.nav.next {
	display: block;
}

#thumb ul.nav.next {
	margin-top: 0;
}

/* L2 **************************************** サムネイル **************************************** */

/* L3 ======================================== figure 要素周り ======================================== */

#thumb figure::before {
	width: 50px;
	height: 50px;
}
#thumb figure::after {
	width: 50px;
	height: 50px;
}

#thumb figure img {
	width: 50px;
	height: 50px;
}

#thumb figcaption {
	display: none;
}

/* L1 ######################################## ダイバー ######################################## */

/* L2 **************************************** 注意書き **************************************** */

div.diver p.caution {
	text-align: left;
	margin-bottom: 1em;
}


/* L2 **************************************** ダイバーデータ **************************************** */

div.diver dl {
	padding-left: 0;
}

div.diver dl.has-words {
	margin-top: 0;
}

/* L3 ======================================== ダイバー名 ======================================== */

div.diver dl dt {
	margin-bottom: 0.2em;
	padding-right: 10px;
	font-size: 1.6rem;
}
div.diver dl dt:after {
	border-radius: 5px;
}

div.diver dl dt img {
	top: -1px;
	width: 21px;
	height: 21px;
}

div.diver dl dt img:nth-child(2) {
	left: -7px;
	margin-right: -7px;
}

/* L3 ======================================== ダイバーID ======================================== */

div.diver dl dd.id {
	position: relative;
	top: 0;
	right: auto;
	width: auto;
	padding: 0 5px 0 0;
	font-family: "Trebuchet MS";
	font-size: 1.2rem;
	text-align: right;
	line-height: 1.0;
	border: none;
	background: none;
}

div.diver dl dd.id::before {
	content: "DiverID:";
	display: inline-block;
	font-size: 1.2rem;
}

/* L4 ---------------------------------------- ダイバー追加ボタン ---------------------------------------- */

div.diver dl dd.id span.add-diver {
	display: inline-block;
	top: 0;
	width: 3em;
	margin-left: 1em;
}

/* L3 ======================================== セリフ ======================================== */

div.diver dl dd.words {
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 80px;
	margin-top: 5px;
	margin-bottom: -20px;
	padding-top: 22px;
	font-size: 0.9rem;
}

/* L3 ======================================== アイコン ======================================== */

div.diver dl dd.icon {
	position: relative;
	margin: 0 auto;
}

/* L3 ======================================== 進化 ======================================== */

div.diver dl dd.evolution {
	position: relative;
	top: 0;
	width: auto;
	margin-top: 0.2em;
	text-align: center;
}

div.diver dl dd.evolution ul {
	text-align: center;
}

div.diver dl dd.evolution li {
	display: inline-block;
	width: 5em;
	margin-left: 2px;
	margin-right: 2px;
}


/* L3 ======================================== パラメータ ======================================== */

div.diver dl dd.data {
	margin-top: 1em;
	padding-left: 0;
}

div.diver dl dd.data ul:nth-child(1) {
	padding-right: 0;
}

div.diver dl dd.data ul:nth-child(1) li {
	font-size: 1.2rem;
}

/* L3 ======================================== スキル関連 ======================================== */

div.diver dl dd[class*="skill"] {
	padding-left: 0;
}

div.diver dl dd[class*="skill"] p {
	padding-left: 4%;
	padding-right: 4%;
}

div.diver dl dd[class*="skill"] p.name {
	font-size: 1.1rem;
	padding-left: 9.4em;
}

div.diver dl dd[class*="skill"] p.name::after {
	width: 8.5em;
	padding-top: 0.2em;
}

/* L3 ======================================== ODスキル ======================================== */

div.diver dl dd.od-skill ul li {
	font-size: 1.0rem;
}

div.diver dl dd.od-skill ul li img {
	width: 50px;
	height: 50px;
}

/* L3 ======================================== プロフィール ======================================== */

div.diver dl dd.profile {
	margin-left: 0;
}

div.diver dl dd.profile p.words {
	font-size: 1.3rem;
	letter-spacing: 0;
}

/* L3 ======================================== メモ ======================================== */

div.diver dl dd.memo {
	margin-left: 45px;
}

div.diver dl dd.memo::before {
	left: -45px;
	width: 30px;
}

/* L3 ======================================== OD対象ダイバー / OD専用アイテム ======================================== */

div.diver dl dd[class^="overdive-"] ul li {
	width: 50px;
}

div.diver dl dd[class^="overdive-"] ul li::after {
	width: 50px;
	height: 50px;
}

div.diver dl dd[class^="overdive-"] ul li figure::before {
	width: 50px;
	height: 50px;
}
div.diver dl dd[class^="overdive-"] ul li figure::after {
	width: 50px;
	height: 50px;
}

div.diver dl dd[class^="overdive-"] ul li figure img {
	width: 50px;
}

/* L3 ======================================== コメント ======================================== */

div.diver dl dd.comments {
	margin-left: 0;
}

div.diver dl dd.comments div.form {
	display: block;
}

div.diver dl dd.comments div.form span {
	display: block;
	text-align: center;
}

div.diver dl dd.comments div.form span.A {
	margin-bottom: -0.25em;
}

div.diver dl dd.comments div.form span.B {
	width: 100%;
}

div.diver dl dd.comments div.form textarea {
	position: relative;
	top: -0.5em;
	left: -23.525%;
	width: 147.05%;
	margin-bottom: -0.5em;
	font-size: 16px;
	border-radius: 7.3525px;
	transform: scale(0.6875);
}

div.diver dl dd.comments ul li.info {
	padding-left: 2%;
	padding-right: 2%;
	text-align: left;
}

/* L1 ######################################## pagination ######################################## */

#pagination ul {
	padding: 0 2%;
}

/* L1 ######################################## カスタムリスト ######################################## */


#custom-list h2 {
	padding-left: 1.8em;
	font-size: 1.4rem;
	text-indent: -1.55em;
}

#custom-list input {
	position: relative;
	left: -12.5%;
	width: 125%;
	font-size: 16px;
	transform: scale(0.8);
	box-sizing: border-box;
}

#notice {
	font-size: 1.1rem;
	text-align: left;
}

/* L1 ######################################## iphone 5より大きいモニタ要設定 ######################################## */

@media screen and (min-width: 321px) {

div.diver dl dd.words {
	padding-top: 22px;
	font-size: 1.0rem;
}

}

/* L1 ######################################## iphone 5より小さいモニタ要設定 ######################################## */

@media screen and (max-width: 320px) {

fieldset.sort ul {
	padding-right: 0;
	border-right: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

fieldset.sort ul li {
	margin-bottom: 0.5em;
}

fieldset.sort select {
	top: 0;
	display: block;
	margin: 5px auto 0 auto;
	text-align: center;
}

}

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# スマホ 設定 ここまで #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */
}

