/*
Theme Name: nirasaki_map
Text Domain: twentytwenty
Version: 1.8
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Document Setup
	2. 	Element Base
	3. 	Helper Classes
	4. 	Site Header
	5. 	Menu Modal
	6. 	Search Modal
	7. 	Page Templates
		a. 	Template: Cover Template
		c. 	Template: Full Width
	8.  Post: Archive
	9.  Post: Single
	10. Blocks
	11. Entry Content
	12. Comments
	13. Site Pagination
	14. Error 404
	15. Widgets
	16. Site Footer
	17. Media Queries

----------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */

/*	0. CSS Reset
/* -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Antique&display=swap');

html,
body {
	border: none;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}
a{
	outline-color: transparent!important;
}
a:focus,
a:focus-visible{
	outline: none!important;
}

.fancybox-close-small{
	display: none!important;
}
.btn-close-fancybox{
	width: 52px;
	height: 52px;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: -80px;
	margin: auto;
}
.btn-close-fancybox img{
	width: 100%;
}
.grecaptcha-badge{
	display: none!important;
}
/* -------------------------------------------------------------------------- */

/*	1. Map
/* -------------------------------------------------------------------------- */


.leaflet-container .leaflet-control-attribution{
	display: none;
}
.serif-jp {
	font-family: "Zen Antique", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

html{
	font-size: 62.5%;
	
}
html.a-fullscreen{
	/*
	position: relative!important;
	overflow: auto!important;
	*/
}
body *{
	font-family: "Noto Sans JP", serif;
	font-size: 16px;
	box-sizing: border-box;
}
#site-content {
	background: white;
	/*padding: 30px;*/
	
	display: flex;
	justify-content:space-between;
	height: 100vh;
	height: 100dvh;
}
.map-container{
	position:relative;
	width: 100%;
	height: 100%;
}
.page-container{
	position:fixed;
	z-index: 10;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	top: 0;
	left: 110vw;
	transition: 0.3s;
	background: white;
}
.page-container.open{
	left: 0;
	transition: 0.5s;
}
.page-container iframe{
	background:white;
}
.stamp-container{
	position:fixed;
	z-index: 10;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	top: 0;
	left: 110vw;
	transition: 0.3s;
	background: white;
}
.stamp-container.open{
	left: 0;
	transition: 0.5s;
}
.map-wrapper{
	position: relative;
	height: 100vh;
	height: 100dvh;
	padding: 1rem;
}
.block-toolbutton,
.block-toolbutton2{
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content:space-between;
	flex-wrap: wrap;
	padding: 1rem;
}

.block-toolbutton,
.block-toolbutton2{
	display: none;
}


.block-toolbutton #btn-stamp-list,
.block-toolbutton #btn-show-ar{
	width: 49%;
}
.block-toolbutton2  #btn-show-ar-long{
	width: 100%;
}
.block-toolbutton  #btn-stamp-list{
	width: 100%;
}

.btn-stamp-list,
.btn-ar,
.btn-map,
.btn-answer,
.btn-go-post,
.btn-post{
	width: 100%;
}
.btn-stamp-list.down,
.btn-ar.down,
.btn-map.down,
.btn-answer.down,
.btn-go-post.down,
.btn-post.down{
	display: none;
}

a:hover .btn-stamp-list,
a:hover .btn-ar,
a:hover .btn-map,
a:hover .btn-answer,
a:hover .btn-go-post,
a:hover .btn-post{
	display: none;
}
a:hover .btn-stamp-list.down,
a:hover .btn-ar.down,
a:hover .btn-map.down,
a:hover .btn-answer.down,
a:hover .btn-go-post.down,
a:hover .btn-post.down {
	display: inline-block;
}
/*
@media screen and (min-width:480px){
	#btn-stamp-list,
	#btn-show-ar{
		width: 49%;
	}
		
}
*/


.divicon{
	display:none;
	width: 100px;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
	margin-left: -57px;
	
}
.divicon p{
	display:inline-block;
	font-size:11px;
	text-align: center;
	line-height: 1;
	padding: 4px;
	background: rgba(255,255,255,0.7);
	border-radius: 4px;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}
.spot-name-active .divicon{
	display: flex;
}


#single-page{
	width: 100%;
	height: 100%;
	transition: 0s;
	opacity: 0;
}
#single-page.load{
	opacity: 1;
	transition: 1s;
}
.map-block { 
	position: absolute;
	top: 1rem;
	left: 1rem;
	right: 1rem;
	bottom: 105px;
	z-index: 0;
	border-radius: 1.5rem;
	border: 1px solid silver; 
	overflow: hidden;
}
.map-block-inner {
	position: relative;
	width: 100%;
	height: 100%;
}
#map {
	width: 100%;
	height: 100%;
}
.block-img-title{
	position: absolute;
	top: 2vh;
	z-index: 1;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	flex-direction: column;
	width: 90%;
	max-width: 210px;
	align-items: center;
}
.img-title{
	width: 100%; 
}
.img-sub-title{
	width: 100%; 
}
.block-debug{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 150px;
	background: whitesmoke;
}

.leaflet-marker-icon{
}
.blink{
	animation: fade 1s infinite alternate;
}

@keyframes fade { 
	from { 
		top: -20px;
		filter: hue-rotate(150deg);
	} 
  }
  
.btn-current-location{
	position: absolute;
	z-index: 30000;
	width: 45px;
	right: 10px;
	bottom: 100px;
}
.btn-current-location .off{
	display: inline-block;
}
.btn-current-location .on{
	display: none;
}
.btn-current-location:hover .off{
	display: none;
}
.btn-current-location:hover .on{
	display: inline-block;
}
.btn-google-roote{
	width: 60px;
}
.btn-google-roote .off{
	display: inline-block;
}
.btn-google-roote .on{
	display: none;
}
.btn-google-roote:hover .off{
	display: none;
}
.btn-google-roote:hover .on{
	display: inline-block;
}

.btn-show-legend{
  position: absolute;
  z-index: 30000;
  width: 46px;
  left: 5px;
  bottom: 5px;
}

.leaflet-touch .leaflet-bar a {
    width: 40px!important;
    height: 40px!important;
    line-height: 40px!important;

}

.leaflet-touch .leaflet-bar a:first-child {
    border-top-left-radius: 10px!important;
    border-top-right-radius: 10px!important;
}
.leaflet-touch .leaflet-bar a:last-child {
    border-bottom-left-radius: 10px!important;
    border-bottom-right-radius: 10px!important;
}
.leaflet-touch .leaflet-bar{
	border-radius: 10px!important;
}
.leaflet-touch .leaflet-bar a span{
	font-size: 40px!important;
    font-weight: 400!important;
}


.marker-legend-block{
	position: absolute;
	left: 0;
	bottom: -900px;
	z-index: 30001;
	transition: 0.3s;
}
.marker-legend-block.open{
	bottom: -5px;
	transition: 0.3s;
}
.marker-legend-block .inner{
	position: relative;
}

.marker-legend-block  .btn-close-legend{
	position: absolute;
	right: 10px;
	top: -5px;
	z-index: 30002;
	width: 45px;

}

.leaflet-div-icon{
	border:none!important;
}

/* -------------------------------------------------------------------------- */

/*	1. Spot Page
/* -------------------------------------------------------------------------- */
.container-spot{
	padding-bottom: 150px;
}
.spot-header-title-block{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(100,100,100,0.4);
}
.main-kv{
	position: relative;
	overflow: hidden;
	width: 100vw;
	height: calc( 100vw * 9 / 16 );
}
.main-kv img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.btn-back,
.btn-back-input-form{
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	width: 45px;
	height: 45px;
}
.btn-back img,
.btn-back-input-form img{
	width: 100%;
}
.btn-img-360{
	position: absolute;
	bottom: 30px;
	right: 10px;
	display: inline-block;
	width: 145px;
	height: 40px;
	background: url(./assets/img/btn_360view.png) no-repeat;
	background-size: contain;
}
.btn-img-360:hover,
.btn-img-360:focus{
	background: url(./assets/img/btn_360view_d.png) no-repeat;
	background-size: contain;
}

.block-contents{
	position: relative;
	background:white;
	padding: 3rem;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	margin-top: -20px;
}
.spot-title{
	display: block;
	font-size:2.6rem;
	font-weight: 500;
	/*border-bottom: 1px solid rgba(100,100,100,0.4);*/
	flex: 1;
	/*
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	*/
	line-height: 1.6;
	padding-left: 4rem;
	text-indent: -4.5rem;
	color: #3d3a39;
}
.spot-title::before{
	content: "";
	display: inline-block;
	width: 30px;
	height: 43px;
	background: url(./assets/img/title_icon_1.png) no-repeat;
	background-size: contain;
	margin-bottom: -10px;
}
.spot-title.spot_ico_1::before{
	width: 35px;
	height: 43px;
	background: url(./assets/img/title_icon_2.png) no-repeat;
	background-size: cover;
	margin-bottom: -10px;
}
.spot-title.spot_ico_2::before{
	width: 35px;
	height: 43px;
	background: url(./assets/img/title_icon_3.png) no-repeat;
	background-size: cover;
	margin-bottom: -10px;
}
.spot-title.spot_ico_3::before{
	width: 50px;
	height: 58px;
	background: url(./assets/img/ico_favo_marker.png) no-repeat;
	background-size: cover;
	margin-bottom: -15px;
}
.spot-title.spot_ico_4::before{
	width: 50px;
	height: 58px;
	background: url(./assets/img/ico_favo_marker_stamp.png) no-repeat;
	background-size: cover;
	margin-bottom: -15px;
}
.spot-title.spot_ico_5::before{
	width: 50px;
	height: 58px;
	background: url(./assets/img/ico_favo_marker_stamp_on.png) no-repeat;
	background-size: cover;
	margin-bottom: -15px;
}
.ico-title{
	width: 35px;
	margin-right: 10px;
	margin-bottom: -13px;
}
.spot-description{
	margin-top: 10px;
	font-size:1.8rem;
	line-height: 2;
	color:#3d3a39;
}

.block-slider{
	position: relative;
	width: 100%;
	height: 28vw;
	margin-top: 1rem;
}
.block-slider-wrapper{
	overflow: hidden;
	margin-top: 2rem;
	position: relative;
	margin-right: -3rem;
	margin-left: -3rem;
}

.slider-img-wrapper{
	position: relative;
	width: 32vw!important;
	height: calc( 32vw * 3 / 4 )!important;
	overflow: hidden;
	margin: 0 5px;
	
	border: 1px solid silver;
	border-radius: 8px;
}
.slider-img-wrapper:first-child{
	margin-left: 3rem;
}
.slider-img-wrapper > img{
	
	object-fit: cover;
	width: 100%;
	height: 100%;
	
}
.slider-img-wrapper::before{
	content: "";
	display: block;
	width: 19px;
	height: 19px;
	background: url(./assets/img/ico_zoom.png) no-repeat;
	background-size: cover;
	position: absolute;
	bottom: 0;
	right: 0;
}

.block-post-button{
	position: fixed;
	z-index: 2;
	left: 0;
	bottom: 0;
	background: white;
	padding: 1rem 3rem;
	box-shadow: 0px 0px 15px -5px #777777;
}
.btn-post{
	display: inline-block;
	width: calc( 100vw - 6rem );
	height: calc( ( 100vw - 6rem ) * 177 / 868 );
	background: url(./assets/img/btn_submit.png) no-repeat;
	background-size: contain;
}
.btn-post:hover,
.btn-post:focus{
	
	background: url(./assets/img/btn_submit.png) no-repeat;
	background-size: contain;
}

.btn-post.disabled{
	opacity: 0.7;
	pointer-events: none;
}
.title-post{
	color: #5d9929;
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	padding-left: 3rem;
}
.title-post:after{
	content: "";
	display: block;
	border-bottom: #5d9929 1.5px solid;
	width: 100%;
	height: 1px;
	margin-left: 10px;
	flex: 1;
}
.title-insta{
	color: #e682af;
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	padding-left: 3rem;
}
.title-insta:after{
	content: "";
	display: block;
	border-bottom: #e682af 1.5px solid;
	width: 100%;
	height: 1px;
	margin-left: 10px;
	flex: 1;
}

.slick-next{
	text-indent: -9999px;
	background: url(./assets/img/slide_next_green.png) no-repeat;
	background-size: cover;
	width: 18px;
	height: 18px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	z-index: 1;
	margin: auto;
}

.slick-prev{
	text-indent: -9999px;
	background: url(./assets/img/slide_next_green.png) no-repeat;
	background-size: cover;
	width: 18px;
	height: 18px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 5px;
	z-index: 1;
	margin: auto;
	transform: rotate(180deg);
}
.insta .slick-next,
.insta .slick-prev{
	background: url(./assets/img/slide_next_pink.png) no-repeat;
	background-size: cover;
}

.slick-disabled{
	display: none!important;
}


.block-360-img{
	position:fixed;
	z-index: 10;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	top: 0;
	left: 110vw;
	display: none;
	transition: 0.3s;
	background: white;
}
.block-360-img.open{
	display: block;
	left: 0;
	opacity: 1;
	transition: 0.5s;
}
.btn-close-360{
	position: fixed;
	z-index: 10;
	bottom: 5px;
	right: 5px;
	width: 40px;
	height: 40px;
}
.btn-close-360 img{
	width: 100%;
}

iframe{
	display: none;
	pointer-events: none;
}
.open iframe{
	display: block;
	pointer-events: auto;
}

.view-frame-360img{
	display: block;
	width: 100%!important;
	height: 100%;
}

/* -------------------------------------------------------------------------- */

/*	3. spot Page
/* -------------------------------------------------------------------------- */
.block-go-post-button{
	padding: 1rem 0;
	text-align: center;
}
/*
.btn-go-post{
	display: inline-block;
	width: calc( 100vw - 4rem );
	height: calc( ( 100vw - 4rem ) * 177 / 868 );
	background: url(./assets/img/btn_go_post.png) no-repeat;
	background-size: contain;
}
.btn-go-post:hover,
.btn-go-post:focus{
	
	background: url(./assets/img/btn_go_post_d.png) no-repeat;
	background-size: contain;
}
*/

.btn_goto_quiz img.off{
	display: inline-block;
}
.btn_goto_quiz img.on{
	display: none;
}
.btn_goto_quiz:hover img.off{
	display: none;
}
.btn_goto_quiz:hover img.on{
	display: inline-block;
}

.wrapper-prepost{
	position: relative;
	height: 100%;
	width: 100%;
}
.btn-close-prepost{
	width: 40px;
	position: absolute;
	top: 0px;
	right: 0px;
}

#post-notice{
	padding: 2rem;
	height: auto;
	background: transparent!important;

}
#post-notice .post-notice-wrapper{
	background: white;
	border-radius: 2rem;
	
}
#post-notice .post-body-wrapper{
	padding: 0;
	border-radius: 1rem;
	background: white;
}
#post-notice h2{
	display: block;
	padding: 1.5rem;
	text-align: center;
	font-size: 2.4rem;
	background: #ebebf0;
	border-top-left-radius: 2rem;
	border-top-right-radius: 2rem;
}
#post-notice  .post-notice-body{
	padding: 2rem;
}

#post-notice  .hr-notice{
	display: flex;
	width: 100%;
	align-items: center;
	margin: 1rem auto;
}
#post-notice  .hr-notice span{
	font-size: 1.8rem;
	font-weight: bold;
	display: inline-block;
	margin: 0 5px;
	color: #e83c3e;
}
#post-notice  .hr-notice img{
	width: 20px;
	margin-left: 5px;
}
#post-notice  .hr-notice:before,
#post-notice  .hr-notice:after{
	content: "";
	display: block;
	flex: 1;
	height: 1;
	border-bottom: 1px solid #e83c3e;
}
#post-notice hr{
	border-color: transparent;
	border-bottom-color: #e83c3e;
	margin: 1rem auto;
}

#post-notice .list-notice{
	padding-left: 2rem;
	margin-bottom: 1rem;
}
#post-notice .list-notice li{
	list-style: square;
	font-size: 1.5rem;
}
/*
#post-notice .fancybox-close-small {
    padding: 0px;
    right: 0;
    left: 0;
    bottom: -50px;
    margin: auto;
    top: auto;
	width: 50px;
	height: 50px;
	background: url(./assets/img/btn_close.png) no-repeat;
	background-size: cover;
}
*/


/* -------------------------------------------------------------------------- */

/*	4. post form
/* -------------------------------------------------------------------------- */
.block-post-form{
	position:fixed;
	z-index: 99994;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	top: 0;
	left: 110vw;
	transition: 0.3s;
	background: white;
	overflow: auto;
}
.block-post-form.open{
	left: 0;
	transition: 0.5s;
}

#block-post-form{
	background: #f9faf8;
}

#block-post-form h1{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	font-size: 2.5rem;
	border-bottom: 1px solid #bbe1f7;
	background: white;
}
#block-post-form .ico-edit{
	width: 30px;
	margin-right: 5px;
}

#block-post-form form{
	padding: 2rem;
	
}
#block-post-form .wrapper-preview{
	position: relative;
	border-radius: 1rem;
	aspect-ratio: 4/3;
	width: 100%;
	
}
#block-post-form .wrapper-preview #preview{
	border-radius: 1rem;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: none;
	overflow: hidden;
}
#block-post-form .wrapper-preview #preview.show{
	display: block;
}
#block-post-form .wrapper-preview #preview img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#block-post-form .wrapper-preview #preview .btn-reset-file-upload{
	position: absolute;
	bottom: 5px;
	right: 5px;
	display: none;
}
#block-post-form .wrapper-preview #preview .btn-reset-file-upload > img{
	width: 30px;
}
#block-post-form .wrapper-preview #preview.show .btn-reset-file-upload{
	display: block;
}
#block-post-form .img-file-upload{
	display: block;
	width: 100%;
	height: 100%;
	background: url(./assets/img/select_image.png) no-repeat;
	background-size: contain;
	position: relative;
	overflow: hidden;
}
#block-post-form #upload-img{
	position: absolute;
	top: -100px;
}
#block-post-form .form-required{
	color: #d75835;
	text-align: right;
	font-size: 1.5rem;
}

#block-post-form .form-label{
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}
#block-post-form .form-label img{
	width: 15px;
	margin-right: 1rem;
}
#block-post-form .form-label .form-required{
	font-size: 1.3rem;
}

#block-post-form .form-input{
	border: 1px solid silver;
	border-radius: 5px;
	padding: 1rem;
	width: 100%;
	margin-bottom: 2rem;
}



/* -------------------------------------------------------------------------- */

/*	5. Stamp List
/* -------------------------------------------------------------------------- */

.stamp-container{
	background:#e2f2fc;
	/*padding: 1rem;*/
	
}
.wrapper-stamp-list{
	position: relative;
	/*display: flex;*/
	width: 100%;
	height: calc( 100% - 155px );
	flex-direction: column;
	justify-content:space-between;
	
	padding: 1rem;
	overflow: auto;	
}
.block-stamp-tool-wrapper{
	position: absolute;
	bottom: 10px;
	left: 0;
	z-index: 1;
	width: 100%;
	background: url(./assets/img/sheet_base.png) no-repeat;
	background-size: 104%;
	background-position: center top;
}
.block-stamp-list{
	flex: 1;
	margin-bottom: 50px;
}
.block-stamp-tool{
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*background: #bbe1f7;*/
	padding: 0.5rem;
	margin: 0 -1rem -1rem -1rem;
}
.stamp-header{
	width: 82%;
	margin: 0 auto 0 50px;
}
.block-stamp-list hr{
	border: none;
	border-bottom: 3px dotted #ccc;
	color: transparent;
}
.rally-period{
	position: relative;
	display: flex;
	align-items: center;
	justify-content:center;

}
.label-stamp{
	width: 24%;
	margin-right: 10px;
}
.stamp-period{
	font-weight: bold;
	font-size: 1.8rem;
	color: #3d3a39;
}
.stamp-list-body{
	background: #ebf8ff;
	margin-left: -1rem;
	margin-right: -1rem;
}
.stamp-icons{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 2rem -2.5px 0 -2.5px;

	/*overflow: auto;*/
	/*
	max-height: 50dvh;
	flex: 1;
	*/
}
.block-stamp{
	position: relative;
	display: flex;
	align-items: center;
	justify-content:center;
	text-align: center;
	font-weight: bold;
	padding: 1rem 1.2rem;
	margin: 0 1.5px;
	aspect-ratio: 1;
	width: calc( ( 100% - 10px ) / 3 );
	background: url(./assets/img/stamp_img.png) no-repeat;
	background-size:contain;
	text-decoration: none;
	cursor: pointer;
}
.block-stamp > p{
	color:#4d4d4d;
	font-size: 2rem;
    line-height: 1.2;
}
.block-stamp.complete{
	color: white;
	background: url(./assets/img/stamp_img_complete.png) no-repeat;
	background-size:contain;
}
.block-stamp.active{
	color: white;
	background: url(./assets/img/stamp_img_active.png) no-repeat;
	background-size:contain;
	cursor: pointer;
}

.block-stamp.active > p,
.block-stamp.complete > p{
	color: white;
}
.block-stamp .btn-quiz{
	display: none;
}
.block-stamp.active .btn-quiz{
	display: block;
	height: 40px;
	width: 90%;
	background: url(./assets/img/btn_quiz.png) no-repeat;
	background-size:contain;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: -5px;
	margin: auto;

}

.block-stamp-result{
	width: 50%;
	margin-right: 1rem;
	padding: 10px 5px 10px 0;
	display: flex
;
    flex-direction: column;
    align-items: center;
}
.block-btn{
    flex: 1;
	padding: 2.5rem 2rem 0 0;
}
.stamp-result{
	background: rgba(255,255,255,0.57);
	font-weight: bold;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 80%;
    padding: 3px;
	margin-top: 5px;
}
.comp-count{
	font-size: 3rem;
	text-align: right;
}
.stamp-count{
	font-size: 2.4rem;
	text-align: right;
}

.stamp-rally-title{
	text-align: center;
	font-size: 2.8rem;
	margin-bottom: 10px;
	color: #1e2973;
}

.title-stamp-result{
	width: 80%;
}

/* -------------------------------------------------------------------------- */

/*	6. 3D movie
/* -------------------------------------------------------------------------- */
canvas.a-canvas{
	/*transform: scale(-1, 1)!important;*/
}
.movie-title-block{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
}
.movie-title{
	position: relative;
    display: flex;
	align-items: center;
    width: 100%;
	height: 50px;
    padding: 1rem;
    
}
.movie-title p{
	z-index: 1;
	font-size: 2rem;
	color: white;
}
.movie-title::after{
	content: "";
	display: block;
	height: 50px;
	width: 100px;
	position: absolute;
	right: 0;
	top: 0;
	background: url(./assets/img/drone_title_bk.png) no-repeat;
	background-size: cover;
    background-position: -250px 0;
}
.movie-title::before{
	content: "";
	display: block;
	height: 50px;
	position: absolute;
	left: 0;
	right: 98px;
	top: 0;
	bottom: 0;
	background:#622e8c;
}

.movie-container{
	position:fixed;
	z-index: 10;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	top: 0;
	left: 110vw;
	transition: 0.3s;
	background: white;
}
.movie-container.open{
	left: 0;
	transition: 0.5s;
}
.btn-close-movie{
	position: fixed;
	z-index: 10;
	bottom: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
}
.btn-close-movie img{
	width: 100%;
}
.movie-container iframe{
	background:white;
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------------- */

/*	7. Answer
/* -------------------------------------------------------------------------- */

#answer-container{
	border-radius:1rem;
	padding: 1rem;
	max-width: 95%;
	overflow: visible!important;
}
#answer-container h1{
	background:#e5f5ff;
	padding: 2rem 0 1rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
#answer-container .block-answer{
	background: rgba(166,170,191,0.18);
	padding: 1rem;
	margin: 5rem auto 1rem auto;
}
.inp-answer{
	padding: 15px;
	width: 100%;
	margin-top: 10px;
	border: 1px solid silver;
	border-radius:5px;
}

.animation-base-block{
	position: fixed;
	z-index: 199994;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
}
.animation-base-block.show{
	display: block;
}
.animation-base-block:after{
	content:"";
	display: block;
	width: 100%;
	height: 100%;
	background: #1a2a51;
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
}
.result-animation-block{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}
.result-animation.correct{
	display: none;
	width: 90%;
	z-index: 1;
	transform: scale(4);
	opacity: 0;
}
.result-animation.correct.active{
	display: block;
	animation: show_result 2s forwards alternate;
}
.result-animation.uncorrect{
	display: none;
	width: 90%;
	z-index: 1;
	transform: scale(1);
}
.result-animation.uncorrect.active{
	display: block;
	animation: show_result_uncorrect 1s forwards;
}

@keyframes show_result { 
	to { 
		transform: scale(1);
		opacity: 1;
	} 
}
@keyframes show_result_uncorrect { 
	10% { 
		transform: scale(1);
		opacity: 0;
	} 
	20% { 
		transform: scale(1.4);
	}
	30% { 
		transform: scale(1);
		opacity: 1;
	}
	40% { 
		transform: scale(1.4);
	}
	50% { 
		transform: scale(1);
	} 
	60% { 
		transform: scale(1.4);
	} 
	70% { 
		transform: scale(1);
	} 
}
  
  .get-stamp-block{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .get-stamp-block.active{
	display: flex;
    
  }
  .get-stamp-body{
	width: 95%;
	border-radius: 2rem;
	background:white;
	padding:1rem;

  }
  .get-stamp-body .stamp-base-block{
	margin:30px auto;
	width: 248px;
	height: 242px;
	background: url(./assets/img/stamp_base.png) no-repeat;
	background-size:contain;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
  }
  .get-stamp-body .get-stamp-name{
	font-size:40px;
	font-weight: bold;
	color: white;
	text-align: center;
	line-height: 1.1;
  }
  .get-stamp-body .block-stamp-result{
	padding: 1rem;
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #bbe1f7;
	border-bottom-left-radius: 2rem;
	border-bottom-right-radius: 2rem;
	
}
.get-stamp-body .stamp-result {
    padding: 0.5rem 3rem;
}
.btn-close-get-stamp{
	margin-top: 20px;
	width: 40px;
	height: 40px;
}
.btn-close-get-stamp img{
	width: 100%;
}

/* -------------------------------------------------------------------------- */

/*	8. privilege form
/* -------------------------------------------------------------------------- */

.btn-privilege-form .off{
	display: inline-block;
}
.btn-privilege-form .on{
	display: none;
}
.btn-privilege-form:hover .off{
	display: none;
}
.btn-privilege-form:hover .on{
	display: inline-block;
}

#rally-privilege-container{
	position: fixed;
	top: 0;
	right: -100vw;
	z-index: 12;
	width: 100vw;
	height: 100vh;
	overflow: auto;
	background: #fffbed;
	transition: 0.3s;
}
#rally-privilege-container.open{
	right: 0;
	transition: 0.3s;
}
#rally-privilege-container .inner{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 1.5rem 1rem;
}
#rally-privilege-container h2{
	text-align: center;

}
#rally-privilege-container h2 img{
	width: 60%;
}
#rally-privilege-container .privilege-desc{
	text-align: center;
	font-weight:600;
	margin-bottom: 10px;
}
#rally-privilege-container  .block-prize-list{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
}
#rally-privilege-container  .block-prize{
	box-sizing: border-box;
	width: 50%;
	padding: 10px;
}
#rally-privilege-container  .block-prize.active{
	opacity: 1;
}
#rally-privilege-container  .block-prize .btn-privilege-form{
	display: none;
}
#rally-privilege-container  .block-prize.active .btn-privilege-form{
	display: inline-block;
}
#rally-privilege-container .block-prize-list hr{
	width: 100%;
	margin: 0;
	color: transparent;
	border: none;
	border-top: 2px dotted #c5c4c4;
}
#rally-privilege-container  .block-prize.prize-a,
#rally-privilege-container  .block-prize.prize-c,
#rally-privilege-container  .block-prize.prize-e{
	border-right: 2px dotted #c5c4c4;
}

#rally-privilege-container .block-privilege-img{
	margin-bottom: 10px;
	border-radius: 10px;
	aspect-ratio: 429 / 275;
	width: 100%;
}

#rally-privilege-container .block-privilege-img .inner-img{
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	width: 100%;
	height: 100%;
}
#rally-privilege-container .block-privilege-img .inner-img img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#rally-privilege-container .block-privilege-img .inner-img .stamp-goal-count{
	position: absolute;
	bottom: 3px;
	right: 21px;
	color: white;
	text-align: right;
	font-weight: bold;
	z-index: 3;
}
#rally-privilege-container .block-privilege-img .inner-img:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background:url(./assets/img/prize_a.png) no-repeat;
	background-size: 100%;
	z-index: 1;
}

#rally-privilege-container .prize-b .block-privilege-img .inner-img:before{
	background:url(./assets/img/prize_b.png) no-repeat;
	background-size: 100%;
}
#rally-privilege-container .prize-c .block-privilege-img .inner-img:before{
	background:url(./assets/img/prize_c.png) no-repeat;
	background-size: 100%;
}
#rally-privilege-container .prize-d .block-privilege-img .inner-img:before{
	background:url(./assets/img/prize_d.png) no-repeat;
	background-size: 100%;
}
#rally-privilege-container .prize-e .block-privilege-img .inner-img:before{
	background:url(./assets/img/prize_e.png) no-repeat;
	background-size: 100%;
}

#rally-privilege-container .title-prize{
	text-align: center;
	margin-bottom:10px;
}
#rally-privilege-container .btn-close-privilege{
	position:absolute;
	bottom: -5px;
	left: 0;
	right: 0;
}


/* -------------------------------------------------------------------------- */

/*	9. comment view
/* -------------------------------------------------------------------------- */

#post-view{
	width: 90%;
	background: transparent;
	padding: 0 0 30px 0;
	
}
#post-view .inner{
	position:relative;
	width: 100%;
	height:100%;
	border-radius:10px;
	padding: 10px;
	background: white;
}
#post-view .btn-close-comment{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -25px;
	width: 60px;
	height: 60px;
	margin: auto;
}
#post-view .block-post-img{
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4/3;
	margin-bottom: 10px;
}
#post-view .block-post-img img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#post-view .form-label{
	display: flex;
	align-items: flex-start;
	justify-content:space-between;
	margin-top: 5px;
}
#post-view  .block-label{
	width: 35px;
	text-align: center;
}
#post-view hr{
	border: none;
	border-bottom: 1px solid silver;
}
#comment-name{
	font-size:20px;
}
#comment-body{
	min-height: 100px;
}

.post-proscess-layer{
	
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.7);
	display: none;
	z-index:100;
	align-items: center;
	justify-content:center;
}
.post-proscess-layer.active{
	display: flex;
}
.post-proscess-layer .ico-proccess{
	width:50px
}


/* -------------------------------------------------------------------------- */

/*	10. AR APP Launch page
/* -------------------------------------------------------------------------- */
#ar-app-launch{
	position: fixed;
	right: -110vw;
	
	background:url(./assets/img/bg_ar_launch.jpg) no-repeat;
	background-size: cover;
	transition: 0.3s;
	width: 100vw;
	height: 100vh;
	z-index: 11;
}
#ar-app-launch .wrapper{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
}
#ar-app-launch.open{
	right: 0;
	transition: 0.3s;
}

#ar-app-launch .inner{
	position: relative;
	padding: 1.5rem;
	padding-bottom: 70px;
}
#ar-app-launch .title-ar-launch{
	width: 70%;
	margin: auto;
}
#ar-app-launch .content-panel{
	background: white;
	border-radius: 15px;
	padding: 2rem;
	margin: 2rem auto;
	position: relative;
}
#ar-app-launch .ico-free{
	position: absolute;
	top: -30px;
	right: -5px;
	width: 60px;
}
#ar-app-launch .box{
	display: flex;
	justify-content: space-between;
}
#ar-app-launch .block-ios{
	width: 43%;
}
#ar-app-launch .block-android{
	width: 53%;
}
#ar-app-launch .titile-app{
	width: auto;
	height: 16px;
}
#ar-app-launch hr{
	border: none;
	border-bottom: 1px solid #ccc;
	color: white;
	margin: 2rem auto;
	width: 100%;
	display: block;
}
#ar-app-launch ul.notes{
	padding-left: 1.5rem;
	list-style: none;
}
#ar-app-launch ul.notes li:before{
	content: "※";
}
#ar-app-launch ul.notes li{
	text-indent: -1.4rem;
	font-size: 1.1rem;
	color: #3d3a39;
}

#ar-app-launch .btn-close-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 64px;
	z-index: 12;
}

.download_notes--text{
	font-weight: 600;
	color: #3d3a39;
	text-align: center;
}
.download_notes--text a {
	color: #043993;
	text-decoration: none;
}