@charset "utf-8";
/* ---------------------------------------------------------------------------------------------- */
/*01.共通
/* ---------------------------------------------------------------------------------------------- */

/* ボックスサイズの指定 */
* {
box-sizing: border-box;
}

/* 背景の指定 */
body {
background: #dddddd url("img/bg001.png");
margin: 5px 0px;
}

/* 標準のフォント */
* {
color: #000000;
font-size: 20px;
font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}

/* 標準の画像 */
img {
border: 0px;
margin: 0px;
}

/* リンクの設定 */
a {
text-decoration: none;
}

/* ---------------------------------------------------------------------------------------------- */
/*02.レイアウト大
/* ---------------------------------------------------------------------------------------------- */

/* ページ全体枠 */
#space {
margin: 0px auto;
width: 480px;
height: 840px;

}

/* ---------------------------------------------------------------------------------------------- */
/*03.レイアウト中
/* ---------------------------------------------------------------------------------------------- */

#ue { /* 上 */
display: flex;
flex-direction: column;
width: 480px;
height: 120px;
background: #ffeeee;
border-radius: 20px 20px 0px 0px;
}

#naka { /* 中 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 480px;
height: 700px;
background: #ffffff;
img {
width: 160px;
height: 228px;
}
}

#shita { /* 下 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 480px;
height: 20px;
background: #ffffff;
border-radius: 0px 0px 20px 20px;
}

/* ---------------------------------------------------------------------------------------------- */
/*04.レイアウト小
/* ---------------------------------------------------------------------------------------------- */

div.card { /* カード枠 */
width: 160px;
height: 260px;
}

div.button { /* ボタン枠 */
width: 160px;
height: 260px;
background: #ffffff;
}

div.line { /* カード中ライン */
width: 140px;
height: 240px;
border: 1px solid #663333;
border-radius: 5px;
margin: 4px;
}

div.o_line { /* カード外ライン */
width: 150px;
height: 250px;
border: 1px solid #663333;
border-radius: 5px;
margin: 5px;
}

#card_a { /* カードボタンＡ */
visibility:visible;
}

#card_b { /* カードボタンＢ */
visibility:visible;
}

#card_c { /* カードボタンＣ */
visibility:visible;
}

/* ---------------------------------------------------------------------------------------------- */
/*05.解説レイアウト
/* ---------------------------------------------------------------------------------------------- */

#field { /* 大枠 */
margin-top: 0;
margin-left: 0;
}

div.kaisetsu { /* 解説ページレイアウト */
margin: 0px auto;
width: 480px;
background: #ffffff;
border-radius: 20px;
}

div.face { /* キャラ画像 */
width: 480px;
height: 768px;
background: #ffffff;
border-radius: 20px 20px 0px 0px;
}

div.c_name { /* キャラ名 */
width: 480px;
height: 27px;
font-size: 22px;
background: #ffffee;
padding: 0px 5px;
}

div.p_name { /* 作品名 */
width: 480px;
height: 23px;
font-size: 17px;
background: #ffffee;
padding: 0px 5px;
}

div.honbun_a-5 { /* 本文a */
width: 480px;
height: 748px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_a-4 { /* 本文a */
width: 480px;
height: 778px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_a-3 { /* 本文a */
width: 480px;
height: 808px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_a-2 { /* 本文a */
width: 480px;
height: 838px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_a-1 { /* 本文a */
width: 480px;
height: 868px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_a { /* 本文a */
width: 480px;
height: 898px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_b { /* 本文b */
width: 480px;
height: 928px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_c { /* 本文c */
width: 480px;
height: 958px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_d { /* 本文d */
width: 480px;
height: 988px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_e { /* 本文e */
width: 480px;
height: 1018px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_f { /* 本文f */
width: 480px;
height: 1048px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_g { /* 本文g */
width: 480px;
height: 1078px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_h { /* 本文h */
width: 480px;
height: 1108px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_i { /* 本文i */
width: 480px;
height: 1138px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_j { /* 本文j */
width: 480px;
height: 1198px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

div.honbun_k { /* 本文k */
width: 480px;
height: 1228px;
padding: 5px;
background: #ffffff;
line-height: 1.5;
}

span.pre { /* メッセージ */
font-weight: bold;
}

div.migi { /* 右寄せ */
text-align: right;
}

span.cap { /* キャプション */
color: #0000ff;
font-weight: bold;
font-size: 26px;
}

div.clo_c { /* 閉じるボタンレイアウト */
width: 480px;
height: 50px;
text-align: center;
margin: 10px;
border-radius: 0px 0px 20px 20px;
}

/* ---------------------------------------------------------------------------------------------- */
/*06.タイトル
/* ---------------------------------------------------------------------------------------------- */

#title_lo { /* タイトルレイアウト */
display: flex;
flex-direction: row;
width: 480px;
height: 80px;
border-radius: 20px;
}

#title1 { /* タイトル左 */
width: 280px;
height: 80px;
font-size: 46px;
border-radius: 20px 0px 0px 0px;
background: #ffdddd;
text-align: right;
color: #99ff99;
padding: 9px 0px 0px 0px;
text-shadow:
-2px 0px 0px #339933, -2px 2px 0px #339933,
0px 2px 0px #339933, 2px 2px 0px #339933,
2px 0px 0px #339933, 2px -2px 0px #339933,
0px -2px 0px #339933, -2px -2px 0px #339933;
}

#title2 { /* タイトル中 */
width: 110px;
height: 80px;
font-size: 52px;
background: #ffdddd;
text-align: center;
color: #cc66cc;
font-weight: bold;
padding: 5px 0px 0px 0px;
}

#title3 { /* タイトル右 */
width: 90px;
height: 80px;
font-size: 36px;
border-radius: 0px 20px 0px 0px;
background: #ffdddd;
text-align: left;
color: #ff6666;
padding: 24px 0px 0px 0px;
}

#title4 { /* サブタイトル */
width: 480px;
height: 30px;
font-size: 18px;
background: #ffffee;
text-align: center;
}

#sf { /* シャッフル */
width: 480px;
height: 50px;
text-align: center;
margin-top: 7px;
}

#butt { /* シャッフルボタン */
display: inline-block;
border-radius: 10px;
text-align: center;
font-size: 17px;
cursor: pointer;
padding: 2px 10px;
background : #ffddaa;
transition: .3s;
border: 1px solid #ffaa00;
}

#butt:hover {/* シャッフルボタンにカーソルが乗ったとき */
box-shadow: none;
color: #ffffff;
background: #ff9933;
border: 1px solid #ff9900;
}

#info1 { /* 案内1 */
width: 480px;
height: 30px;
font-size: 22px;
visibility: visible;
border: 1px solid #ffffee;
border-radius: 20px;
background: #ffffee;
text-align: center;
-webkit-animation: blink 4s ease infinite;
animation: blink 4s ease infinite;
}
@-webkit-keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}

#info2 { /* 案内2 */
width: 480px;
height: 30px;
font-size: 21px;
visibility: hidden;
border: 1px solid #ffffee;
border-radius: 20px;
background: #ffffee;
text-align: center;
-webkit-animation: blink 4s ease infinite;
animation: blink 4s ease infinite;
}
@-webkit-keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}

/* ---------------------------------------------------------------------------------------------- */
/*07.閉じるボタン
/* ---------------------------------------------------------------------------------------------- */

div.clo { /* 閉じるボタンレイアウト */
width: 480px;
height: 50px;
text-align: center;
margin-top: 80px;
}

input.clo_b { /* 閉じるボタン */
display: inline-block;
border-radius: 10px;
text-align: center;
font-size: 17px;
cursor: pointer;
padding: 2px 10px;
background : #cccccc;
transition: .3s;
border: 1px solid #666666;
}

/* ---------------------------------------------------------------------------------------------- */
/*08.作者
/* ---------------------------------------------------------------------------------------------- */

div.auther { /* 作者表示 */
width: 480px;
height: 50px;
font-size: 22px;
text-align: right;
background: #ffffff;
line-height: 1.0;
padding: 0px 5px;
border-radius: 0px 0px 20px 20px;
}