/**
 * ==========================================================
 * ご当地MAPでGO
 * encyclopedia.css
 * ----------------------------------------------------------
 * キャラクター図鑑
 * ==========================================================
 */

/* =========================
   図鑑パネル
========================= */

#gg-book-panel{

	position:fixed;

	left:0;

	bottom:-80%;

	width:100%;

	height:75%;

	background:white;

	border-radius:25px 25px 0 0;

	z-index:10000;

	box-shadow:0 -5px 20px rgba(0,0,0,.3);

	transition:.4s;

	overflow:auto;

}


/* 開いた状態 */

#gg-book-panel.open{

	bottom:0;

}


/* ヘッダー */

.gg-book-header{

	height:55px;

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:0 20px;

	font-size:20px;

	font-weight:bold;

	border-bottom:1px solid #ddd;

}


.gg-book-header button{

	border:none;

	background:none;

	font-size:30px;

}

/* ================================
   ゲストコード
================================ */

.gg-guest-code-box {

	margin: 0 0 20px;

	padding: 14px;

	border-radius: 12px;

	background: #f5f5f5;

	text-align: center;

}


.gg-guest-code-title {

	margin-bottom: 8px;

	font-size: 13px;

	font-weight: bold;

}


.gg-guest-code {

	padding: 8px;

	border-radius: 6px;

	background: #ffffff;

	font-size: 16px;

	font-weight: bold;

	letter-spacing: 1px;

	word-break: break-all;

}


.gg-guest-code-box p {

	margin: 8px 0 0;

	font-size: 12px !important;

	line-height: 1.5;

	color: #666666;

}
/* ゲストコード説明 */
.gg-guest-code-notice{

    margin: 18px 0 8px;

    padding: 12px;

    background: #fff3cd;

    border: 2px solid #ffc107;

    border-radius: 8px;

    color: #664d03;

    font-size: 15px;

    font-weight: bold;

    line-height: 1.6;

}


/* 補足説明 */
.gg-guest-code-sub{

    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.5;

}

/* ================================
   図鑑本体
================================ */

#gg-encyclopedia {

	width: 100%;

}


#gg-encyclopedia h2 {

	margin: 0 0 15px;

	font-size: 20px;

	text-align: center;

}


/* ================================
   キャラクター一覧
================================ */

.gg-book-list {

	display: grid;

	grid-template-columns: repeat(2, 1fr);

	gap: 12px;

}


/* ================================
   キャラクターカード
================================ */

.gg-book-card {

	padding: 8px;

	border-radius: 12px;

	background: #ffffff;

	text-align: center;

	box-shadow:

		0 2px 8px rgba(

			0,

			0,

			0,

			0.12

		);

}


/* ================================
   キャラクター画像
================================ */

.gg-book-card img {

	width: 100%;

	max-width: 90px;

	height: 105px;

	object-fit: contain;

	display: block;

	margin: 0 auto 6px;

}


/* ================================
   未発見キャラクター
================================ */

.gg-hidden-character {

	width: 90px;

	height: 105px;

	background: #eeeeee;

	border-radius: 8px;

}


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

#gg-encyclopedia .gg-book-card h3 {

	margin: 4px 0;

	font-size: 16px;

	line-height: 1.3;

}


/* ================================
   キャラクター説明
================================ */

#gg-encyclopedia .gg-book-card p {

	margin: 4px 0 0;

	font-size: 14px;

	line-height: 1.4;

	color: #555555;

}


/* ================================
   取得率
================================ */

.gg-complete {

	margin-top: 20px;

	padding: 12px;

	border-radius: 10px;

	background: #f5f5f5;

	text-align: center;

	font-weight: bold;

}


/* ================================
   リセットボタン
================================ */

#gg-reset-book {

	margin-top: 15px;

	padding: 10px 15px;

	border: none;

	border-radius: 8px;

	background: #eeeeee;

	cursor: pointer;

}


/* ================================
   PC
================================ */

@media screen and (min-width: 768px) {

	.gg-book-list {

		grid-template-columns: repeat(3, 1fr);

	}

}
/* ==================================================
   コンプリート特典
================================================== */

.gg-reward-box {

    margin: 20px 0;

    padding: 20px;

    text-align: center;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.15);

}


/* 特典画像 */

.gg-reward-image img {

    display: block;

    width: 100%;

    max-width: 240px;

    height: auto;

    margin: 15px auto;

    border-radius: 10px;

}


/* コンプリート前 */

.gg-reward-locked {

    border: 2px solid #ddd;

    opacity: 0.9;

}


.gg-reward-locked
.gg-reward-status {

    margin-top: 15px;

    padding: 10px;

    border-radius: 8px;

    background: #f1f1f1;

    color: #666;

}


/* コンプリート後 */

.gg-reward-complete {

    border: 3px solid #f0b400;

    background: #fffbea;

}


.gg-reward-complete h2 {

    margin-top: 0;

    font-size: 24px;

}


/* 特典を使うボタン */

.gg-reward-use-button {

    display: block;

    width: 100%;

    margin-top: 20px;

    padding: 14px;

    border: none;

    border-radius: 10px;

    background: #e67e22;

    color: #fff;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

}


.gg-reward-use-button:hover {

    opacity: 0.85;

}


/* 使用済み */

.gg-reward-used {

    border: 2px solid #999;

    opacity: 0.7;

}


.gg-reward-used-status {

    margin-top: 15px;

    padding: 12px;

    border-radius: 8px;

    background: #eee;

    color: #555;

    font-weight: bold;

}