@charset "UTF-8";

/* structure
====================================================================================================================================== */
html,
body {
  width: 100%;
}

html {
  height: 100%;
}

body {
  color: var(--black);
	background: var(--white);
  overflow-y: scroll;
  overflow-x: hidden;
    width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

#container {
  width: 100%;
  font-size: 1rem;
  line-height: 1.8;
	overflow: hidden;
}

.wrapper {
  overflow: visible;
margin: 0;
padding-left: 20px;
padding-right: 20px;
width: auto !important;
}

.wrapper:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}


/* header
====================================================================================================================================== */
#header {
	position:fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 70px;
	background: var(--black);
	text-align: center;
	z-index: 100;
}
#header, #header a {
	color: var(--white);
}
#header.coupon_header {
	height: 105px;
}

#header .header_attention {
	position: absolute;
	left: 0; bottom: 0;
	width: 100%;
	background: var(--red);
	padding: 0.3em 0;
	font-size: 0.9em;
	font-weight: bold;
}
#header .header_attention:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -10px; left: 50%;
	width: 0px;
	height: 0px;
	margin-left: -3.5px;
	border-style: solid;
	border-width: 10px 7px 0 7px;
	border-color: var(--red) transparent transparent transparent;
}

#container {
	margin-top: 70px;
}
#container.page_coupon {
	margin-top: 85px;
}

#header #site_title {
	margin: 0.6em auto 0;
}


#header #site_title img {
	height: 50px;
	width: auto;
}
#header #site_title.text_in {
	position: relative;
	width: 100%;
	padding-top: 0;
	font-size: 1.3em;
}
#header #site_title.text_in img {
	position: absolute;
	left: 10px;
	top: -3px;
	width:52px;
	height: auto;
}

#header .tit {
	padding-top: 0.5em;
	display: inline-block;
}

#header .tit.column02 {
	padding-top: 0;
	font-size: 0.9em;
	line-height: 1.25;
}

@media screen and (min-width: 768px) {
	#header .tit.column02 {
		margin-top: -0.1em;
	}
}

#header .header_menu_wrap {
	position: absolute;
	right: 4px;
	top: 10px;
	z-index: 1;
}
#header .header_menu_wrap.menu_left {
  right: auto;
  left: 6px;
}

#header .header_menu_wrap .header_menu {
	float: right;
	position: static;
	margin: 0;
}

#header .howto {
	position: absolute;
	right: 0;
	bottom: 0;
}

#header .header_btn {
	display: inline-block;
	width: 60px;
	height: auto;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 34px auto;
	background-image: url("../images/icon/icon_hatena.webp");
	text-indent: 0;
	padding: 35px 0 5px;
	line-height: 1.2;
	font-size: 0.7em;
	font-weight: bold;
	vertical-align: bottom;
}
#header .header_btn.story {
	background-image: url("../images/icon/icon_book.webp");
}
#header .header_btn.back {
	background-image: url("../images/icon/icon_back.webp");
}
#header .tooltip {
	bottom: auto;
	top: 55px;
	right: 6px;
	color: var(--black);
}
#header .tooltip:before {
	bottom:auto;
	top:-10px;
	border-width: 0px 7px 10px 7px;
border-color: transparent transparent var(--white) transparent;
}

/* status */
#header .head_status {
	position: absolute;
	right: 5px;
top: 3px;
display: flex;
float: right;
	font-size: 0.65em;
	line-height: 1.4;
}
#header .head_status:before {
	content: "";
	display: block;
	position: absolute;
	left: 10px;
	bottom: 16px;
	width: calc(100% - 20px);
	border-top: solid 2px var(--gray-text);
}
.head_status li {
	position: relative;
    margin: 0 2.5px;
    display: inline-block;
}
.head_status li p {
	margin: 0;
	font-weight: bold;
	opacity: 0;
}
.head_status li .icon {
	display: inline-block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: solid 1px var(--gray-text);
	background: var(--black) url("../images/item/status/scop_no_head.webp") no-repeat center center;
	background-size: 90% 90%;
}
.head_status li.get .icon {
	border-color:var(--white);
	background-color: var(--white);
}
/* icon */
.head_status li.map .icon { background-image: url("../images/item/status/map_no_head.webp"); }
.head_status li.flower .icon { background-image: url("../images/item/status/flower_no_head.webp"); background-size: 100% 100%; }

/* get */
.head_status.scop .scop p, .head_status.map .map p { opacity: 1; }
.head_status li.get .icon { background-image: url("../images/item/status/scop.webp"); }
.head_status li.map.get .icon { background-image: url("../images/item/status/map.webp"); }
.head_status li.flower.get .icon { background-image: url("../images/item/status/flower.webp"); background-size: 100% 100%; }



/* ヘッダー真下 */
.header_bottom {
	position: relative;
	width: 100%;
	padding: 0.4em 1em 0.3em;
	margin: 0;
	background: var(--blue-dark);
	font-size: 0.85em;
	color: var(--white);
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
}





/* contents
====================================================================================================================================== */
#conts {
  padding: 1.5em 0 0;
	overflow: hidden;
}
.page_nazo #conts, .page_quiz #conts {
  padding-top: 0;
}
.page_coupon #conts {
	padding-top: 3em;
}
.page_score .header_bottom {
    font-size: 0.75em;
}
.page_score #conts {
	padding-top: 0;
	overflow: visible;
}
.head_visual #conts, .page_quiz_answer #conts {
	position: relative;
	overflow: visible;
}
.head_visual #conts:before, .page_quiz_answer #conts:before {
	content: "";
	display: block;
	width: 100%;
	height: 12px;
	position: absolute;
	left: 0;
	top: -11px;
	background: url("../images/bg_top.webp") repeat-x left bottom;
	background-size: auto 100%;
	z-index: 10;
}


/* footer
====================================================================================================================================== */
#footer {
	background: var(--black);
	color: var(--white);
	padding: 3em 0;
	text-align: center;
}
#footer .tit {
	margin-bottom: 1.2em;
}

#footer small {
  font-size: 0.8em;
	line-height: 1.6;
display: block;
}

/* side_fixed_box
====================================================================================================================================== */
.top_page {
  display: block;
  position: fixed;
  right: 10px;
  bottom: 20px;
	background: url("../images/icon/arrow_top_w.svg") no-repeat center center;
	background-size: 50% auto;
	background-color: var(--black);
	width: 52px;
	height: 52px;
  z-index: 900;
	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}


/* 出題画面
====================================================================================================================================== */

.nazo_wrap {
  text-align: center;
  background: url("../images/bg_stripe.webp");
  background-size: 60px auto;
  margin: 0 -20px 3em;
  padding: 1.5em 20px 2em;
  border-bottom: solid 3px var(--black);
}

.nazo_box {
	position: relative;
	padding: 3px;
	margin: 0 0 0.2em;
	overflow: visible;
}
.nazo_box .nazo_text {
	position: relative;
	padding: 9vw 6vw;
	margin: 0 auto 1em;
	background: var(--white);
	border: solid 4px var(--black);
	text-align: center;
	overflow: hidden;
	font-size: 1.4em;
	line-height: 1.6;
	font-weight: bold;
	border-radius: 14px;
	box-shadow: 6px 6px 0 rgba(0,0,0,0.1);
	overflow: visible;
}
.nazo_box .nazo_text img {
	margin-bottom: -0.5em !important;
}
.nazo_text:before, .nazo_text:after {
	content: "";
	position: absolute;
	bottom: -20px; left: 50%;
	margin-left: -12px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 20px 12px 0 12px;
	border-color: var(--black) transparent transparent transparent;
	z-index: 1;
}
.nazo_text:after {
	border-color: var(--white) transparent transparent transparent;
	transform: translate(0, -7px);
}



/* 回答 */
form.nazo_answer fieldset {
	position: relative;
	background: var(--black);
	color: var(--white);
	padding: 1em;
	margin: 0 auto 1em;
	border-radius: 12px;
	text-align: left;
	font-size: 1.2em;
}
form.nazo_answer fieldset:before {
	content: "";
	display: block;
	position: absolute;
	left: 4px;
	top: 4px;
	width: calc( 100% - 12px);
height: calc( 100% - 12px);
	border: solid 2px var(--white);
	border-radius: 10px;
}
form.nazo_answer .answer_select {
	position: relative;
	display: block;
	border-bottom: dotted 2px var(--gray-line);
	line-height: 1.5;
}
form.nazo_answer .answer_select:last-child {
	border-bottom: 0;
}
form.nazo_answer .answer_select label {
	display: block;
	margin: 0;
	padding: 0.75em 0.6em;
	padding-left: 45px;
	font-weight: bold;
}
.answer_select label img {
    width: 2.25em;
    margin-right: 0.2em;
    margin-bottom: -0.15em;
}
form.nazo_answer .answer_select input {
	opacity: 0;
	position: absolute;
	left: 1.6em;
	top: 1.2em;
}
/* select */
form.nazo_answer .answer_select input:checked + label {
	background: rgba(255,255,255,0.2);
	color: var(--yellow);
}
form.nazo_answer .answer_select input + label:before, form.nazo_answer .answer_select input:checked + label:after {
	content: "";
	display: block;
	position: absolute;
	left: 13px;
	top: 50%;
	margin-top: -11px;
	width: 18px;
	height: 18px;
	border: solid 3px var(--gray-line);
	z-index: 10;
	border-radius: 50%;
	overflow: hidden;
}
form.nazo_answer .answer_select input:checked + label:before {
	border-color: var(--yellow);
}
form.nazo_answer .answer_select input:checked + label:after {
	left: 19px;
	margin-top: -5px;
	width: 12px;
	height: 12px;
	background: var(--yellow);
	border: 0;
}

.nazo_answer_help {
  font-size: 0.9em;
  font-weight: bold;
  margin: 0 auto 0.1em;
}
form.form_nazo input[type=text] {
	border: solid 3px var(--black);
font-weight: bold;
font-size: 1.2em;
padding: 1em;
	  margin-bottom: 0.6em;
	width: 88vw;
  max-width: 400px;
border-radius: 8px;
}
form.form_nazo input[type=text]::placeholder {
	color: #aaa;
}


.btn_form_box {
	padding-top: 0.5em;
	text-align: center;
}

#conts .btn_answer {
	padding-right: 65px;
	background-image: url("../images/icon/oval_check_w.webp");
	background-position:right 20px center;
	background-repeat: no-repeat;
	background-size: 34px auto;
	margin-bottom: 2em;
}

.nazo_answer_back {
	margin: 7em 0 2em;
}
.nazo_answer_back .btn {
	min-width: 0;
}


/* イラストMAP */
.map_illust {
	border-top: solid 3px var(--black);
	margin: 0 -20px;
}
.map_illust img {
	width: 100%;
}

.map_iframe {
	height: 75vw;
	border-bottom: solid 3px var(--black);
	margin-bottom: 1.5em;
}
.map_iframe iframe {
	width: 100%;
	height: 100%;
}



/* レベルアップ */
.level_wrap {
	border-bottom: solid 3px var(--black);
	background: var(--yellow-light);
	border-left: 0; border-right: 0;
	margin: 0 -20px 2em;
	padding: 0 20px;
}
.level_wrap .score_box .score_data {
	width: auto;
background: var(--orange);
display: inline-block;
padding-right: 2.5em;
padding-left: 2.5em;
}



/* SNS */
.share_wrap, .about_wrap  {
	text-align: center;
	padding: 2.5em 20px;
	margin: 0 -25px;
}

.share_wrap {
	padding: 0;
	margin: 0 0 2em;
}
.share_wrap > p {
	font-weight: bold;
	margin: 0;
}
.share_wrap > p:before {
	content: "＼";
	margin-right: 0.2em;
}
.share_wrap > p:after {
	content: "／";
}
.share_wrap li {
	display: inline;
}
.share_wrap a {
	display: inline-block;
	margin: 0 0.25em;
	width: 40px;
}

/* 概要 */
.about_wrap {
	background: var(--sumi-black);
	color: var(--white);
	padding-top: 0;
	margin: 0 -20px;
	overflow: hidden;
}
.about_wrap .main_visual {
	margin: 0 -20px 1.5em;
}
.about_wrap .main_visual img {
	width: 100%;
}
.paper_wrap_img {
	margin-left: -20px;
	margin-right: -20px;
}

/* story */
.mission {
	line-height: 1.7;
}
.story .img_box {
	margin-top: 1.5em;
	margin-bottom: 2em;
}
.story .img_box img {
	width: 100%;
}
.img_box img {
	width: 100%;
}

.over_time {
	position: relative;
	margin: 0.5em auto 1.5em;
}
.over_time, .over_time:before, .over_time:after {
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	background: var(--gray-line);
	border-radius: 50%;
	overflow: visible;
}
.story .over_time, .story .over_time:before, .story .over_time:after {
	background: #666;
}
.over_time:before, .over_time:after {
	content: "";
	position:absolute;
	left: 0;
}
.over_time:before {
	top: -1em;
}
.over_time:after {
	bottom: -1em;
}

.chara_message {
	font-weight: bold;
	line-height: 1.6;
	font-size: 0.9em;
}
.chara_message img {
	position: relative;
	float: left;
	max-width: 40vw;
	margin: -3em 0 -3em -2em;
	z-index: 10;
}
.chara_message p {
	overflow: hidden;
}
.chara_message .font_la {
	display: inline-block;
	margin-top: 0.25em;
	font-size: 1.3em;
}

/* lead story */
.lead_story {
	position: relative;
}
.lead_story .map img {
	width: 100%;
}

/* spot title */
.lead_story.spot_tit {
	background: url("../images/bg_quiz.png") repeat-x center bottom;
	background-size: cover;
	padding: 9vw 20px 13vw;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
}
.spot_tit .spot_name {
	position: relative;
	font-size: 3.2em;
	line-height: 1.4;
padding-top: 0.3em;
	-webkit-text-stroke:10px #fff;
}
.spot_tit .spot_name .fuchi_over {
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 100%;
	-webkit-text-stroke:0;
}


.lead_story.score {
	background: url("../images/bg_stage.webp") repeat-x center bottom;
	background-size: auto 56vw;
	padding: 10vw 20px 15vw;
}
.lead_story.score .spot_name {
	font-size: 1.5em;
}

/* ページ上部の見出し */
.tit_top_wrap {
  border-top: solid 3px var(--black);
  margin: 0px -20px;
  position: relative;
	text-align: center;
}
.tit_top_wrap .tit_wrap {
	position: absolute;
left: 0;
bottom: -0.33px;
	width: 100%;
	margin: 0;
padding: 0;
line-height: 1;
}
.tit_top_wrap .tit_wrap:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 3px;
	width: 100%;
	height: 6px;
	background: rgba(0,0,0,0.15);
}
.tit_top_wrap h2 {
	position: relative;
  display: inline-block;
  background: var(--white);
  padding: 0.65em 1.2em 0;
	margin: 0;
  border: solid 3px var(--black);
  border-bottom: 0;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	font-size: 1em;
	line-height: 1.1;
	min-width: 8em;
}
.page_nazo .tit_top_wrap h2, .page_quiz .tit_top_wrap h2 {
  background: url("../images/bg_stripe.webp");
  background-size: 60px auto;
}


/* 使い方
====================================================================================================================================== */
.flow_list {
	line-height: 1.6;
}
.flow_list li {
	position: relative;
	font-weight: bold;
	margin: 0;
}
.flow_list li:before {
	content: "";
	position: absolute;
	left: 35px;
	bottom: -2px;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 18px 0 18px;
	border-color: var(--gray-line) transparent transparent transparent;
}
.flow_list li .text_box {
	display: block;
	border-bottom: dotted 2px var(--gray-line);
	padding: 15px 0;
	margin: 0;
}
.flow_list li .nazo_number {
	background: var(--black);
	margin-top: 0;
}
.flow_list li .nazo_number .num {
	color: var(--yellow);
}
.flow_list li:last-child {
	border-bottom: dotted 2px var(--gray-line);
	padding-bottom: 0;
	margin-bottom: 1.5em;
}
.flow_list li:last-child .text_box {
	border: 0;
}
.flow_list li:last-child:before {
	display: none;
}
.flow_list li .img_box, .flow_caution .img_box {
	float: left !important;
	margin: 0 10px 1em 0 !important;
	width: 110px;
}
.flow_caution p {
	overflow: hidden;
	line-height: 1.7;
margin-bottom: 0;
}


/* クリア画面
====================================================================================================================================== */

.item_wrap {
	position: relative;
  background: url("../images/bg_stripe_blue.webp");
  background-size: 60px auto;
	padding: 12vw 6vw 9vw;
	margin-bottom: 1em;
	min-height: 95vw;
	overflow: hidden;
}
.item_wrap:after {
	content: "";
	display: block;
	pointer-events: none;
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 13vw;
  background: url("../images/cloud_bottom.webp") no-repeat center bottom;
	background-size: 100% auto;
	z-index: 50;
}
.item_wrap img {
	width: 100%;
}
.item_wrap .img_correct img.text {
	height: 100%;
	width: auto;
}

/* title */
.big_title {
	position: absolute;
	left: 0;
	top: 15.5vw;
	width: 100%;
}
.big_title img {
	width: 80%;
}

.big_title img {
	position: absolute;
	left: 10vw;
	top: 6vw;
	width: 80vw;
	z-index: 1;
}

.clear_spot {
	position: absolute;
left: 0;
	top: 12vw;
width: 100%;
	text-align: center;
font-size: 4.9vw;
line-height: 1.5;
	z-index: 10;
}
.clear_spot .name {
	display: inline-block;
}
.clear_spot .name:before, .clear_spot .name:after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(../images/item/star.webp) no-repeat center center;
  background-size: cover;
  margin: 0.15em 0.4em 0;
	vertical-align: top;
}

/* lock*/
.lock_wrap {
  width: 50vw;
  margin: 0 auto;
}
.lock_wrap .lock_top {
	position: relative;
	height: 19.5vw;
	object-fit: cover;
	object-position: top;
}
.lock_wrap .lock_bottom {
	height: 56vw;
	object-fit: cover;
	margin-top: -19vw;
}

.lock_wrap .lock {
	position: absolute;
position: absolute;
left: 34.1%;
top: 53.6%;
width: 35%;
height: 16.1%;
	text-align: center;
}
.lock_wrap .lock span {
	display: inline-block;
	width: 25%;
height: 100%;
	margin-left: -0.5vw;
	float: left;
	opacity: 0;
}
.lock_wrap .lock span.clear {
	background: var(--pink);
	color: var(--white);
	border: solid 2px var(--black);
	border-width: 0.6vw;
	line-height: 8.5vw;
	clear: none;
	opacity: 1;
	font-size: 5.3vw;
}


/* chara */
.item_wrap .chara img, .lead_story .chara img, .item_wrap .chara .text {
	position: absolute;
	width: 40vw;
left: -9vw;
	bottom: -12vw;
}
.lead_story .chara img {
	bottom: -22vw;
}
.item_wrap .chara:not(.last_message) img, .lead_story .chara img {
	transform: rotate(10deg);
}
/*.item_wrap .chara img.josu {
	left: auto;
	right: -21vw;
width: 31vw;
bottom: 18vw;
	transform: rotate(-30deg);
}*/
.item_wrap .chara.last_message {
	text-align: center;
}
.item_wrap .chara.last_message img {
  width: 52vw;
  left: 50%;
  bottom: -50vw;
  margin-left: -26vw;
}
.item_wrap .chara.last_message .text {
	left: 0;
	bottom: 9.5vw;
	width: 100%;
	font-weight: bold;
	font-size: 1.5em;
}

.get_message {
	position: relative;
	z-index: 60;
}

.get_message .item_space {
	width: 90vw;
	height: 90vw;
	margin-top: -20vw;
}

/* chara-item */
.item_space {
	transform: translate(100%, 6%);
	width: 54%;
	margin-left: -30%;
}
.no_item_get .item_space {
	filter: blur(4px);
}

/* 不正解の時 */
.item_wrap.incorrect {
	background: var(--gray-base);
	text-align: center;
}
.item_wrap.incorrect img {
	width: 60vw;
	max-width: 300px;
	height: auto;
	margin: 0 auto;
}



.nazo_box.answer_img { margin-top: 0; }

/* 答え */
.img_correct {
	height: 64vw;
	position: relative;
	text-align: center;
	z-index: 1;
}
#conts .img_correct {
    z-index: 0;
}

.img_correct .bg_img {
	position: absolute;
	left: 50%;
	top: -30%;
	display: block;
	width: 84vw;
	height: 84vw;
	margin: 0 0 0 -42vw;
}
.img_correct .kirakira {
  position: absolute;
	left: 0;
	top: 30vw;
  width: 100%;
  height: 370px;
  /*margin-top: -78%;*/
}
.img_correct .kirakira img {
	position: absolute;
	width: 3vw;
}
.img_correct .kirakira img:first-child, .img_correct .kirakira img:last-child {
	width: 6vw;
}
.img_correct .kirakira img:first-child {
	left: 12vw;
top: 20vw;
}
.img_correct .kirakira img:nth-child(2) {
	left: 19vw;
top: 16vw;
}
.img_correct .kirakira img:nth-child(3) {
	left: 21vw;
top: 34vw;
}
.img_correct .kirakira img:nth-child(4) {
	left: 72vw;
top: 22vw;
}
.img_correct .kirakira img:nth-child(5) {
	left: 65vw;
top: 32vw;
}
.img_correct .kirakira img:nth-child(6) {
	left: 66vw;
top: 15vw;
}



/* score space */
.score_box .box p.remaining_hint {
	display: none;
	margin-right: 1em;
	margin-left: 1em;
}
.score_box .box:first-child p.remaining_hint {
	margin-left: 0;
}
.score_box .box:last-child p.remaining_hint {
	margin-right: 0;
}
/* 最短の賞の残り数だけ出す */
.score_box .box p.remaining_hint:nth-child(3) {
	display: block;
}

h2.clear_text, .clear_text {
	letter-spacing: 0;
	font-size: 1.2em;
	margin-bottom: 0.5em;
}


/* 答え合わせ
====================================================================================================================================== */
.answer_text .answer_end {
    display: inline-block;
    margin: 0 auto 0.5em;
    padding: 0.3em 2em;
    border: solid 2px var(--red);
    color: var(--red);
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 2em;
}


/* ラストステージ
====================================================================================================================================== */
.last_stage {
	padding-top: 63vw;
	background-color: var(--black);
}
.last_stage.tobira {
	padding-top: 64vw;
}
.last_stage img {
	width: 100%;
}
.flower_bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.flower_bg img {
	height: 100%;
	object-fit: cover;
}

/* 樹木で覆う */
.wood_cover { background: #000; }
.back_tree .tree01, .back_tree .tree02 {
	position: absolute;
	left: 90vw;
	top: 0;
	width: 100vw;
	height: 100%;
	background: #000;
	overflow: visible;
}

.back_tree img {
	margin-left: -100vw;
	width: 100%;
	height: 100%;
}

.back_tree .tree02 {
	left:-100vw;
}
.back_tree .tree02 img {
	margin-left: 100vw;
	transform: scale(-1, 1);
}





/* スコア画面
====================================================================================================================================== */
/* score */
.score_box {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1.5em;
	line-height: 1.2;
}
.page_score .score_box {
	margin-bottom: 0.5em;
}
.score_box .box {
	width: 100%;
	margin: 0 3%;
	text-align: center;
}
.score_box .box p {
	margin: 0;
}
.score_box .box .tit {
	background: url("../images/title/status_tit.webp") no-repeat center center;
	background-size: contain;
	padding: 0.6em 0 0.5em;
	margin: 0 auto 0.35em;
	font-size: 0.8em;
	font-weight: bold;
}
.score_box .score_data {
	background: rgba(0,145,191,0.5);
	padding: 4px;
	line-height: 1;
	border-radius: 1.5em;
	overflow: hidden;
}
.score_box .score_data .inner {
	padding: 0.1em 0 0.05em;
}
.score_box .now {
	padding-right: 0.2em;
	color: var(--white);
	font-size: 1.5em;
	font-weight: bold;
}

.remaining_hint {
	position: relative;
	background: var(--black);
	color: var(--white);
	padding: 0.75em;
	margin-top: 12px !important;
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.3;
	border-radius: 6px;
}
.remaining_hint:before {
	content: "";
	display: block;
	position: absolute;	
	top:-8px;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -3px;
	border-style: solid;
	border-width: 0px 6px 8px 6px;
border-color: transparent transparent var(--black) transparent;
}

.caution_box {
	padding: 1em;
	margin-bottom: 1em;
	border: solid 2px var(--red);
	line-height: 1.5;
}

/* map */
.map_box {
	position: relative;
	margin-bottom: 1.5em;
}

/* map position */
.map_area {
	position: relative;
	width: 100%;
	height: 75vw;
	background: url("../images/map.png") no-repeat center center;
	background-size: cover;
	margin: 0 0 1em;
	border: solid 3px var(--black);
	border-radius: 1em;
	overflow: hidden;
}
.map_area .area {
	position: absolute;
	width: 7%;
}
.map_area .area img {
	width: 100%;
	max-width: none;
}

.map_image {
	border: solid 3px var(--black);
	border-radius: 1em;
	overflow: hidden;
}
.map_image img {
	width: 100%;
}

/* エリア別 */
.map_area .q01 { left:38%; top: 9%; }
.map_area .q02 { left: 7%; top: 22%; }
.map_area .q03 { left: 29%; top: 42%; }
.map_area .q04 { left:38%; top: 60%; }
.map_area .q05 { left: 2%; top: 50%; }

.map_area .extra_area {
  left: 61%;
  top: 79%;
  width: 43%;
}

.score_list_wrap {
	position: relative;
	margin: 0 -20px 0;
	padding: 0 20px 2em;
	overflow: visible;
}

#score_quiz h2.bar { margin-bottom: 0; }

/* tab */
.tab {
	display: flex;
	text-align: center;
	width: auto;
	margin: 0 -20px;
	background: var(--black);
	border-top: solid 3px var(--black);
	overflow: visible;
}
.tab li {
	display: inline-block;
	height: 4.5em;
	flex: 1;
	padding: 0;
	margin: 0;
	border-right: dotted 2px var(--white);
	overflow: visible;
}
.tab li:last-child {
	border-right:0;
}
.tab li a {
	display: block;
	position: relative;
	padding: 0.5em 0 0.2em;
	margin: 0.5em 0 0;
	font-weight: bold;
	vertical-align: bottom;
	color: var(--white);
	vertical-align: bottom;
}
.tab li.select a {
	background: var(--white);
	border-top: solid 7px #F7E794;
	color: var(--black);
	margin-top: 0;
	padding-bottom: 10px;
}
.tab li .icon {
	display: block;
	width: 46px;
	height: 46px;
	background: var(--black) url("../images/icon/icon_hatena.webp") no-repeat center center;
	background-size: 90% auto;
	margin: -1em auto -0.5em;
	border-radius: 50%;
}
.tab li .icon.present {
	background-image: url("../images/icon/icon_present.webp");
}
.tab li .icon.book {
	background-image: url("../images/icon/icon_book.webp");
}
.tab li.select .icon {
	margin-top: -1.5em;
	margin-bottom: 0;
}
.badge {
    background: var(--red);
    font-size: 0.7em;
    font-weight: normal;
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    right: calc(50% - 30px);
    top: -5px;
    color: var(--white);
}
.tab_content { padding-top: 2em; }

/* spot list */
.nazo_spot .coupon_btn { margin-top: 0.5em; }
.nazo_spot { text-align: center; }
.go_spot {
	display: inline-block;
	width: 90%;
	text-align: center;
	font-weight: bold;
	padding: 0;
	margin: 0 5% 2em;
	line-height: 32px;
	background: url("../images/line_dot.webp") repeat left top;
	background-size: auto 32px;
}
.go_spot.font_la {
	margin-bottom: 1em;
}
.next {
	background: url("../images/next.webp") no-repeat center top;
	background-size: 27px auto;
	padding: 60px 0 0;
	margin: 0 0 1em;
	text-align: center;
	font-weight: bold;
	line-height: 1.5;
}

.area_block {
	margin-bottom: 3em;
}

/* エリアマップ */
.area_map {
  margin: 0 -21px;
  margin-bottom: 1em;
}
.area_map img {
	width:100%;
}
.area_map p {
	margin-bottom: 0.5em;
}


/* スポット一覧 */
.spot_list {
	margin-bottom: 0.5em;
}
.spot_list li {
	position: relative;
width: auto;
background: var(--white);
padding: 0;
margin: 0 0 1em;
text-align: left;
color: var(--gray-text);
line-height: 1.5;
font-weight: bold;
overflow: visible;
	clear: both;
}

.spot_list li a, .spot_list li .box {
  display: block;
  position: relative;
  color: var(--black);
  background: var(--white);
  border: solid 3px var(--gray-base);
  overflow: hidden;
  z-index: 1;
	border-radius: 12px;
}
.spot_list li a:after, .spot_list li .box:after {
	content: "";
	display: block;
	clear: both;	
	}
.spot_list li.clear a, .spot_list li.challenge a {
	border-color: var(--black);
	border-bottom-width: 6px;
	overflow: visible;
	}
.spot_list li.clear a:before {
	content: "";
	display: block;
	position: absolute;
	left:-8px;
	top:-8px;
	width: 32px;
	height: 32px;
	background: url("../images/icon/oval_check_red.webp") no-repeat center center;
	background-size: cover;
	z-index: 10;
}
.spot_list li .img_box {
	position: relative;
	float:left;
	width: 90px;
	height: 90px;
	padding: 0.7em;
	z-index: 1;
	overflow: hidden;
}
.spot_list li .img_box img, .spot_list li .img_box .text {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}
.spot_list li .img_box .text {
	background: var(--gray-base);
	color: var(--white);
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
}
.spot_list li.clear .img_box .text, .spot_list li.challenge .img_box .text {
	background: var(--baige);
	color: var(--black);
}
.spot_list li .text_box {
	padding: 0.7em;
	padding-left: 0;
	padding-right: 70px;
	overflow: hidden;
}
.spot_list li span {
	display: block;
}
.spot_list li .tit {
	padding-top: 0.35em;
	line-height: 1.4;
	color: var(--gray-text);
}
.spot_list li.clear .tit, .spot_list li.challenge .tit {
	color: var(--black);
}
.nazo_number {
	display: inline-block !important;
	background: var(--gray-line);
	color: var(--white);
	padding: 0.2em 0.8em;
	margin-top: 0.7em;
	line-height: 1.1;
	font-size: 0.8em;
	border-radius: 1em;
	font-weight: bold;
}
.nazo_number .num {
	display: inline;
	font-size: 1.2em;
}
/* クリア時の色変え */
.spot_list li.clear .nazo_number, .spot_list li.challenge .nazo_number {
	background: var(--black);
}
.spot_list li.clear .nazo_number .num, .spot_list li.challenge .nazo_number .num {
	color: var(--yellow);
}
.spot_list li .status {
	position: absolute;
	right: 1em;
	top: 50%;
	width: 4.4em;
	height: auto;
	margin-top: -25px;
	font-size: 0.8em;
	line-height: 1.2;
	text-align: center;
	overflow: hidden;
	transform: rotate(-10deg);
}
.spot_list li.clear .status, .spot_list li.challenge .status {
	margin-top: -15px;
	background: var(--yellow);
	padding: 0.4em 0;
	border-radius: 7px;
}
.spot_list li.clear .status {
	background: none;
	color: var(--red);
	border: solid 3px var(--red);
}


.spot_list li .btn {
	display: inline-block;
	min-width: 0 !important;
	padding: 0.5em;
	margin: 0;
	font-size: 1em;
	border-radius: 8px;
	border-bottom-width: 5px;
	line-height: 1.3;
}
.spot_list li .tit .btn {
	display: block;
	min-width:11em !important;
	font-size: 0.8em;
	margin-top: 0.2em;
	margin-bottom: 0;
}


/* clear */
.spot_list li.clear, .spot_list li.challenge, .spot_list li.interrupt {
	overflow: visible;
}
.spot_list li.interrupt {
  opacity: 0.6;
}
.spot_list li.challenge .img_box, .spot_list li.clear .img_box, .spot_list li.interrupt .img_box {
	border-color: var(--black);
}

/* all clear */
.all_clear {
	position: relative;
	text-align: center;
	aspect-ratio: 1 / 1;
	max-width: 500px;
	margin: -4vw -20px -15vw;
}

@media screen and (min-width: 500px) {
.all_clear {
	margin-left: auto;
	margin-right: auto;
}
}

.all_clear .bg_shine {
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	height: 100%;
}
.all_clear .stamp {
	position: absolute;
  left: 17%;
	width: 66%;
	margin: 15% auto 0;
	transform: rotate(-10deg);
}
.all_clear .stamp img {
	width: 100%;
}
.all_clear p {
	position: absolute;
	left: 0;
	top: 3vw;
	width: 100%;
	text-align: center;
}

/* present status */
.pr_space { margin-bottom: 1.5em; }
.pr_space a:not(.icon_link) { display: block; width: 100%; }
.pr_space a img { margin-bottom: 0.75em; }


/* tab present */
.present_form .tab li {
	width: 20%;
	height: 3.5em;
}
.present_form .tab li.first_member a {
	line-height: 1.1;
}


.present_list li {
	position: relative;
	margin-bottom: 1em;
	text-align: center;
	padding-bottom: 10px;
}
.present_list li:last-child:before {
	display: none;
}
.present_list li button {
	width: 100%;
}

#score_present .btn, #score_present .present_status {
	display: block;
	margin: 0 auto 0.5em;
	text-align: center;
}
.present_status {
	position: relative;
	border: solid 3px var(--black);
	width: 94%;
	padding: 0.5em 0.6em;
	color: var(--black);
	line-height: 1.5;
	font-weight: bold;
}
.present_status:not(.challenge):before {
	content: "";
	display: block;
	position: absolute;
	left:-8px;
	top:-8px;
	width: 30px;
	height: 30px;
	background: url("../images/icon/oval_check_red.webp") no-repeat center center;
	background-size: cover;
}
.present_status.challenge {
	border: solid 3px var(--gray-base);
	color: var(--gray-text);
	border-radius: 3em;
}
.present_list .icon_link {
    position: absolute;
    right: 0.5em;
    bottom: -0.5em;
    text-align: right;
}
.present_form .btn_answer {
    max-width: 15em !important;
	line-height: 1.3 !important;
padding-bottom: 0.66em !important;
}


/* クーポン一覧
====================================================================================================================================== */
.coupon_list li {
	margin-bottom: 2.5em;
	line-height: 1.7;
}

.coupon_yet .coupon_list:before {
  content: "※2022年8月6日から有効";
  display: block;
  text-align: center;
  font-weight: bold;
  color: var(--red);
  margin-bottom: 0.5em;
  font-size: 1.2em;
}

.coupon_yet .coupon_list li {
	opacity: 0.3;
}

.coupon_list li:after { content: "."; display: block;  clear: both; height: 0; visibility: hidden; }
.coupon_list .coupon {
	position: relative;
	background: var(--white);
	border: solid 3px var(--black);
	margin: 0 0 0.7em;
	border-radius: 14px;
}
.coupon_list .coupon:before, .coupon_list .coupon:after {
	content: "";
	display: block;
	position: absolute;
	right: 40px;
	top: -3px;
	width: 16px;
	height: 9px;
	background: url("../images/coupon_kiritori.webp") no-repeat;
	background-size: cover;
	z-index: 10;
}
.coupon_list .coupon:after {
	top: auto;
	bottom: -3px;
	transform: rotate(180deg);
}
.coupon_list .coupon .inner {
	background: var(--yellow-light);
	margin: 4px;
	padding: 2.4em 50px 0.3em 0.7em;
	border-radius: 10px;
}
.coupon_list .coupon_catch {
	position: relative;
	background: var(--gray-base);
	border: solid 2px var(--white);
	font-weight: bold;
	padding: 0.5em 0.8em;
	margin: 0 0 0.85em;
	font-size: 0.9em;
	line-height: 1.6;
	border-radius: 8px;
}
.coupon_list .coupon_catch:before, .coupon_list .coupon_catch:after {
	content: "";
	display: block;
	position: absolute;
	bottom: -9px; left: 50px;
	width: 0px;	height: 0px;
	border-style: solid;
	border-width: 9px 7px 0 7px;
	border-color: transparent;
	border-top-color: var(--white);
}
.coupon_list .coupon_catch:after {
	bottom: -6px; left: 52px;
	border-width: 7px 5px 0 5px;
	border-top-color: var(--gray-base);
}

@media screen and (max-width: 540px) {
	.coupon_list .coupon.big_coupon .inner {
		padding-top: 3.5em;
	}
}
.coupon_list .coupon p {
	margin: 0;
}
.coupon_list .coupon .store {
	position: absolute;
	left: -10px;
	top:8px;
	background: var(--black);
	color: var(--white);
	padding: 0.4em 0.6em;
	font-weight: bold;
	line-height: 1.3;
	margin-right: 40px;
}
.coupon_list .coupon .service_item {
	margin-bottom: 0.1em;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.2;
	padding: 0 0 0.15em;
}
.coupon_list .coupon .limited {
	line-height: 1.2;
padding: 0.1em 0 0;
}
.coupon_list .coupon .store, .coupon_list .coupon .limited, .coupon_list .coupon_caution, .coupon_list .coupon_info {
	font-size: 0.85em;
}

.coupon_list .coupon .decoration {
	display: block;
	position: absolute;
	right: 0; top: 0;
	width: 49px;
	height: 100%;
	background: url("../images/coupon_kiritori_text.webp") no-repeat center center;
	background-size: 14px auto;
	border-left: dotted 2px var(--black);
}

.coupon_list .coupon_info {
	border: dotted 2px var(--black);
	border-left: 0;
	border-right: 0;
	padding: 0.5em 0;
	margin: 0;
	line-height: 1.5;
	overflow: hidden;
}

.coupon_list .coupon_info a {
	font-weight: bold;
}

.coupon_img {
	float: left;
	width: 90px;
	height: 90px;
object-fit: cover;
	margin: 0 12px 0 0;
	border-radius: 6px;
}

.coupon_caution {
	margin-bottom: 0.8em;
	line-height: 1.5;
}



/* 応募フォーム
====================================================================================================================================== */
.present_select { }

.btn.back {
	display: block;
	min-width: 0;
	margin: 0 auto 1.5em;
	font-size: 0.75em;
}


/* ポップアップ
====================================================================================================================================== */
#popup_back.menu_opened {
	z-index: 1000;
}
.popup_message {
    background: var(--white);
    padding: 1.4em 1.8em;
    z-index: 1000000;
    position: fixed;
    left: 10vw;
    width: 80vw;
    top: 10vh;
	margin-bottom: 80px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.popup_message p {
	margin-bottom: 0.5em;
}

.popup_close {
	display: block;
	max-width: 50%;
	margin: 1em auto 0;
	padding: 0.5em 2em;
	background: var(--gray-text);
	color: var(--white);
	font-weight: bold;
	border-radius: 3em;
	text-align: center;
	cursor: pointer;
}

#popup_back.menu_opened::after {
    content: "閉じる";
    position: absolute;
    left: 35%;
    bottom: 15%;
    width: 30%;
    display: block;
    border: solid 2px #fff;
    border-radius: 2em;
    text-align: center;
    color: #fff;
    font-weight: bold;
    background: rgba(0,0,0,0.3);
}


/* 最後の戦い
====================================================================================================================================== */
.last_flower {
	margin: 0 auto 3em;
	text-align: center;
	font-weight: bold;
 }

.last_flower .tobira {
	display: inline-block;
	position: relative;
	width: 46vw;
	margin: -50vw auto 0;
	z-index: 1;
}

.last_flower p {
	margin: 0 0 0.5em;
	font-size: 1.2em;
}


/* タブレット用 */
@media screen and (max-width: 768px) {

}


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

}