:root {
  --color-base: #dce4f9;
  --color-sub: #494a9d;
  --color-point: #e5443d;
  --color-red: #c00;
  --color-lightgray: #f5f6fd;
}


/*---------------------------------
reset
---------------------------------*/
*{ margin:0; padding:0; box-sizing: border-box; }
a, a::before, a::after{ text-decoration: none; transition: .5s all; }
img{ width:100%; }
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
ul ,li{ list-style-type:none; }

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}



/*---------------------------------
layout
---------------------------------*/
/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body{
  background-color: var(--color-base);
  color: #242424;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-feature-settings: "palt";
  letter-spacing: .08em;
  line-height: 1.6;
}

.container{
  background-color: #fff;
  /*border-radius: 10px;
  filter: drop-shadow(0px 0px 7px rgba(183, 175, 240, 0.6));*/
  overflow: hidden;
  margin:0 auto;
/*  width: calc( 100% - 24px);*/
  max-width: 520px;
}
.inr{
  margin: 0 auto;
  width: 90%;
}

h1{
  font-size: 140%;
}

.mt10{
  margin-top: 10px;
}
.mt20{
  margin-top: 20px;
}
.mt40{
  margin-top: 40px;
}
.mb10{
  margin-bottom: 10px;
}
.mb20{
  margin-bottom: 20px;
}
.mb40{
  margin-bottom: 40px;
}
.bg_gray{
  background-color: rgba(255, 255, 255, 0.7);
  background-image: url(../img/common/bg.png);
  background-size: cover; 
  background-position: center ecnter;
  background-attachment: fixed;
  /*background-repeat: repeat;*/
/*  background-blend-mode: lighten;*/

}
.center{
  text-align: center;
}

/*---------------------------------
element
---------------------------------*/

.link{
  color: var(--color-point);
  text-decoration: underline;
}
.texta_c{
  text-align: center;
}
.fz140{
  font-size: 140%;
}
.fz120{
  font-size: 120%;
}
.fz90{
  font-size: 90%;
}
.f-bold{
  font-weight: bold;
}

/*---------------------------------
top
---------------------------------*/
section#caution{
  padding: 20px;
  border-radius: 10px;
}
.lead{
  padding-bottom: 40px;
}
.lead em{
  display: block;
  font-style: normal;
  color: var(--color-point);
}
.note{
  background-color: #ffecf8;
  color: var(--color-point);
  padding: 40px 0;
}
.note h2{
  font-size: 160%;
}
.note h2 span{ 
  display: block;
  width: 50px;
  margin: 0 auto;
} 
.faq{
  padding-bottom: 40px;
  border-bottom: 1px solid #e6e6e6;
}
.contact p,
.contact h2,
.faq p{
  color: #636363;
}
section.way{
  padding-top: 40px;
}
section.way ol li{
  position: relative;
  background-color: #fff;
  padding: 20px 10px;
  border-radius: 5px;
}
section.way ol li .step + p{
  font-weight: bold;
  font-size: 110%;
  color: #5a5a5a;
}
section.way ol li .step{
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background-color: #5771b7;
  padding: 13px;
  border-radius: 30px;
}
section.way ol li .step img{
  display: block;
  margin: auto;
  height: 100%;
  width: auto;
}
section.way ol li figure{
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
}
/*---------------------------------
stamp
---------------------------------*/

figure.my-stamp {
    border: 1px solid #ccc;
    position: relative;
    width: 150px;
    height: 150px;
    margin: 20px auto 20px;
  padding: 10px;
    font-size: 20px;
    text-align: center;
}
.my-stamp img.stamp2  {
	display: inline-block;
	color: #c00;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.0;
	border: 1px solid #c00;
	border-radius: 50%;
	padding: 20px;
	/* スタンプアニメーションのための初期値 */
	visibility:hidden;
        animation: sample_anime02 2s paused both;
}
.my-stamp-on img.stamp2 {
  animation-play-state: running;
}

@keyframes sample_anime02 {
  0% {
       visibility:visible;
	opacity: 0;
	transform:  rotate(-30deg) scale(2.5);
  }
  30% {
       visibility:visible;
	opacity: 0.8;
	transform:  rotate(5deg) scale(1.04);
  }
  100% {
       visibility:visible;
	opacity: 1.0;
	transform: rotate(0deg);
  }
}



/*---------------------------------
btn
---------------------------------*/
.btn{
  background-color:  var(--color-point);
  border-radius: 100px;
  color: #fff;
  display: block;
  font-size: 110%;
  margin-right: auto;
  margin-left: auto;
  padding: 16px 20px;
  text-align: center;
  width: 90%;
}
.btn_white{
  background-color: #fff;
  border: 2px solid  var(--color-point);
  color:  var(--color-point);
}




/*---------------------------------
stamp-list
---------------------------------*/
.stmp_count{
  color: #626262;
  font-size: 200%;
  font-weight: bold;
  line-height: 1;
}
.stmp_count .get_stamp_n{
  color: var(--color-point);
  font-size: 200%;
  line-height: 1;
}
.stmp_list{
  display: flex;
  flex-wrap: wrap;
  background-color: var(--color-lightgray);
}
.stmp_list li{
  display: flex;
  align-items: center;
  justify-content: center;
/*  border-top: 5px solid var(--color-lightgray);*/
  border-bottom: 5px solid var(--color-lightgray);
  margin-top: -2px;
  height: 33vw;
  width: calc(100% / 3);
  padding: 5px;
  background-color: #fff;
}
.stmp_list li:not(:nth-child(3n)){
  border-right: 5px solid var(--color-lightgray);
}

/*---------------------------------
spot-list
---------------------------------*/
.wrapper{
  margin: 0 auto;
  width: 90%;

}

ul.area-list{
  margin: 10px 0px;
  display: flex;
  flex-wrap: wrap;
}

.area-list li{
  margin: 10px 0px;
}

ul.spot-list li {
  display: flex;
  padding: 10px;
  border-radius: 5px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
  margin: 0px 10px;
}

ul.spot-list li:last-child{
  border-bottom: none;
}

.spot-list li {
  margin-right: 15px;
}

.spot img {
  height: 75px;
  width: 75px;
  object-fit: cover;
  margin-right:15px;
  border-radius: 5px;
  vertical-align: top;
}

.spot-txt h2 a{
  color: #242424;
}

.add{
  position: relative;
  color:#818181;
  font-size: 14px;

}
.add::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 19px;
  margin-right: 3px;
  /* background-image: url(../img/add.png); */
  background-size: contain;
  vertical-align: sub;
}

p.add.fukagawa::before{
   background-image: url(../img/spot/fukagawa.png);
}
p.add.moseushi::before{
  background-image: url(../img/spot/moseushi.png);
}
p.add.chippubetsu::before{
  background-image: url(../img/spot/chippubetsu.png);
}
p.add.numata::before{
  background-image: url(../img/spot/numata.png);
}
p.add.hokuryu::before{
  background-image: url(../img/spot/hokuryu.png);
}
p.add.rumoi::before{
  background-image: url(../img/spot/rumoi.png);
}
p.add.mashike::before{
  background-image: url(../img/spot/mashike.png);
}
p.add.obira::before{
  background-image: url(../img/spot/obira.png);
}


.get{
  color: #989898;
  font-size: 12px;
  background: #f1f1f1;
  display: inline-block;

}

img.get-stamp{
  opacity: 0.5;
}

.spot {
  position: relative;
}

.spot-txt h2{
  color: #242424;
}

.stamp {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  left: 9%;
  width: 75px;
  height: 75px;
}

.list li{
  border-radius: 5px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
  margin: 10px 0px;
  padding: 0px 0px 10px;

}

.item{
  display: flex;
}
 
.list li:nth-child(even){
 margin-right: 0;
}

.item a{
  display: contents;
}
 
@keyframes test {
  0% {
   transform: scale(.1);
  }
  100% {
    transform: none;
  }
}

/* チェックボックスの装飾 */
.checkbox_input {
    display: none;
}

.checkbox_parts {
    padding-left: 25px;
    position: relative;
    margin-right: 20px;
}

.checkbox_parts::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #999;
    border-radius: 4px;
}

.checkbox_input:checked+.checkbox_parts::after {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 5px;
    width: 6px;
    height: 11px;
    transform: rotate(40deg);
    border-bottom: 3px solid #b6c247;
    border-right: 3px solid #b6c247;
}

.search_area {
    text-align: center;
}

.search_area div {
    margin-bottom: 10px;
}

/*絞り込み条件外のアイテム*/
.hide_item {
    display: none;
}

.area{
  display: none;
}

.nav-open{
  padding: 10px;
  margin-top: 10px;
  color: #fff;
  font-size: 16x;
  background: var(--color-point);
  position: relative;
}
.nav-open::before{/* 閉じている時 */
  content: "＋";
  position: absolute;
  right: 20px;
}
.nav-open.active::before{/* 開いている時 */
  content: "－";
}


/*---------------------------------
spot-detail
---------------------------------*/

.spotImg{
  position: relative;
}

.spotImg::before{
  content: "";
    display: block;
    padding-top: 70%;
    background-color: #fff;
}

.spotImg img{
  width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.spotContImg{
  position: absolute;
  height: 100%;
  object-fit: contain;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  display: none;
  opacity: 15%;
}

.spotCont{
  display: block;
}

.stampAnime{
  animation:stamp 1s;
}

@keyframes stamp {
      0%{
        opacity: 0;
      }
      55%{
        opacity:0;
        transform:scale(8);
      }
}

.spotName h2{
  font-size: 20px;
  text-align: center;
}

.spotName{
  margin: 40px 0 30px;
}

.spotDes{
  margin-bottom: 30px;
  font-size: 15px;
}

.stampZone{
  position: relative;
}

.spotInfo{
  margin-bottom: 40px;
  color: #636363;
  font-size: 14px;
}

.buttonArea{
  text-align: center;
  margin-top: 30px;
  margin-bottom: 50px;
}

.spotStamp{
  margin: 0 auto 35px;
  background-color: var(--color-point);
  color: #fff;
/*  font-weight: bold;*/
  padding: 22px 0;
  width: 80%;
  border-radius: 50px;
}

.buttonBack{
  width: 80%;
  color: #5a5a5a;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: 0 auto;
}

.buttonBack p::before {
  content: '';
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  border-top: solid 2px #5a5a5a;
  border-right: solid 2px #5a5a5a;
  margin-right: 10px;
  transform: rotate(-135deg);
}

.spotStamp:disabled {
  background-color: #ededed;
  color: #c1c1c1;
}


/* モーダルウィンドウ */
.modal-window,
.modal-window_logged,
.modal-window_er,
.modal-window_already,
.modal-window_er_route,
.modal-window_login {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 77%;
  max-width: 300px;
  background-color: var(--color-base);
  border-radius: 5px;
  z-index: 11;
  padding: 30px 20px;
  text-align: center;
}

.modal-window,
.modal-window_logged,
.modal-window_er,
.modal-window_already,
.modal-window_er_route,
.modal-window_login p{
  font-size: 20px;
  font-weight: bold;
  color:#494a9d;
}

.stampModal_cont{
  border-radius: 5px;
  background-color: #fff;
  padding: 10px 5px;
  margin-top: 10px;
}

.stampModal{
  height: 80vh;
  max-height: 250px;
}

.stampModal img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.modal-window_er,.modal-window_already .erDes{
  font-size: 16px;
  font-weight: inherit;
}


.erMark{
  border-radius: 50%;
  background-color: var(--color-point);
  text-align: center;
  width: 75px;
  height: 75px;
  line-height: 78px;
  margin: 15px auto;
  font-size: 50px;
  font-weight: bold;
  color: var(--color-base);
}

.stampModal{
  height: 80vh;
  max-height: 250px;
}

/* 閉じるボタン */
.button-close {
  width: 90%;
  padding: 15px 0;
  background-color: #bfc7de;
  color: #666a78;
  border-radius: 20rem;
  margin-top: 10px;
}
/* オーバーレイ */
.overlay ,
.overlay_er,
.overlay_er_route,
.login-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.caution{
  color: var(--color-sub);
  font-size: 120%;
  border: 1px solid;
  border-radius: 10px;
  padding: 10px;
}

.user_cd_modal{
  font-size: 100%;
  color: #333333;
  font-size: 100%;
  font-weight:normal;
  width: 100%;
  max-width: 330px;
}
.user_cd_modal .user_cd{
  font-weight: bold;
  color: #fff;
  margin: 10px 0;
  font-size: 180%;
  background: var(--color-point);
  border-radius: 10px;
  padding: 10px 0;
  border:5px solid ;
}
.user_cd_modal .user_cd + p{
  text-align: left;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
}


/*---------------------------------
benefit
---------------------------------*/
.intro{
  font-size: 120%;
  color:var(--color-point);
  position: relative;
}

.intro:before {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 4px;
  background-color: var(--color-point);
  border-radius: 2px;
}

.present img{
  max-width:220px;
  height: auto;
}

.present,.prize{
  text-align: center;
  margin-top: 40px;
}

.present h3{
  font-size: 120%;
  margin: 10px 0px;
  padding: 10px 0;
}

.disc{
  margin: 10px 0px;
}

ul.detail{
  font-size: 78%;
}

.entry_btn{
  margin-bottom:45px ;
  background-color: var(--color-point);
  color: #fff;
  padding: 22px 0;
  width: 80%;
  border-radius: 50px;
}

.not{
/*  margin: 20px auto 45px;*/
  background-color: #e6e6e6;
  color: #5a5a5a;
}
.not.mt40{
  margin-top: 40px;
}

.border{
  border: none;
  border-bottom: solid 1px #e6e6e6;
}

.prize_list{
  margin-top: 20px;
  font-size: 120%;
  font-weight: bold;
}



/*---------------------------------
faq
---------------------------------*/
.faq_sub_ttl{
  background-color: var(--color-point);
  margin: 20px 0 20px;
  padding: 10px;
  color: #fff;
  font-size: 140%;
}
.faq_list{
  background: rgba(255, 255, 255, 0.8);
  padding: 20px 10px;
}
.faq_list dt{
  color: var(--color-sub);
  font-size: 120%;
  position: relative;
  padding-left: 12px;
  font-weight: bold;
}
.faq_list dt::before{
  content: '';
  display: block;
  height: 1px;
  width: 10px;
  background-color: var(--color-sub);
  position: absolute;
  top: .7em;
  left: 0;
}
.faq_list dd{
  padding: 5px 0 5px 12px;
}
.faq_list dd:not(:last-child){
  border-bottom: solid 1px #e6e6e6;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.faq_kome{
  font-size: 90%;
  margin-top: 10px;
  color: var(--color-point);
  font-weight: bold;
}
.faq_kome li{
	padding-left:1em;
	text-indent:-1em;
}

.btn_faq_list{
  padding: 20px;
  background-color: #fff;
}
.btn_faq_list li:not(:last-child){
  margin-bottom: 10px;
}
.btn_faq{
  display: flex;
  align-items: center;
  font-size: 85%;
  width: auto;
}
.btn_faq::after{
  content: '';
  display: block;
  color: var(--color-point);
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border: 1px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: translateY(-25%) rotate(135deg);
}


/*---------------------------------
form
---------------------------------*/
.form label{
  color: #808080;
}

#msg ul{
  background-color: #ffe4e4;
  padding: 20px 20px 20px;
}
#msg ul::before{
  content: "入力エラー";
  color: var(--color-red);
  display: block;
  font-size: 110%;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}
#msg li{
  margin-top: 3px;
  position: relative;
  padding-left: 18px;
}
#msg li::before,
#msg li::after {
	content: "";
	position: absolute;
	top: .7em;
  left: 0;
	width: 16px;
	height: 3px;
	background-color: var(--color-red);
}
#msg li::before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#msg li::after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


/*reset*/
input,
button,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
  width: 100%;
}
input[type='number'] {
  min-width: 60px;
}
select {
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
  min-width: 60px;
}

textarea {
  min-height: 40px;
  max-height: 200px;
  resize: vertical;
}

.checkbox  {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/*custom*/
input[type='text'],
input[type='number'],
input[type='password'],
textarea{
  background-color: #fff;
  border-radius: 10px;
  padding: 16px 16px;
}
input::placeholder,
textarea::placeholder{
  color: #ccc;
}
input[type='text']:focus,
input[type='password']:focus,
textarea:focus {
  background-color: #ffffec;
}

select {
  background-color: #f2f2f2;
  border: 1px solid #b3b3b3;
  border-radius: 10px;
  font-size: 120%;
  padding: 5px 10px;
}

.sel_l{
  width: 60%;
}

.check_wrap{
  display: flex;
}
.checkbox {
  cursor: pointer;
  padding-left: 24px;
  position: relative;
}
.checkbox::before,
.checkbox::after {
  content: '';
  display: block;
  position: absolute;
}
.checkbox::before {
  background-color: #fff;
  border-radius: 0%;
  border: 1px solid #b3b3b3;
  border-radius: 4px;
  width: 18px;
  height: 18px;
  top: 2px;
  left: 0;
}
.checkbox:checked::before {
  background-color: #4cc052;
  border-color: #4cc052;
}
.checkbox:checked::after {
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  height: 5px;
  width: 10px;
  transform: rotate(-45deg);
  top: 6px;
  left: 3px;
}

.set_group{
  background-color: #f2f2f2;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 30px 5%;
}
.set_group.checked{
  background-color: #e2f5ce;
}


/*---------------------------------
footer
---------------------------------*/
.gnav{
  height: 80px;
}
.gnav ul{
  background-color: var(--color-sub);
  display: flex;
  font-size: 80%;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 70px;
}
.gnav li{
  width: 25%;
}
.gnav a{
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  width: 100%;
  height: 100%;
}
.gnav li:not(:last-child) a{
  border-right: 1px solid #fff;
}

.gnav a::before{
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  width: 26px;
  height: 26px;
  margin-bottom: 3px;
}
.gnav .nav_home a::before{
  background-image: url(../img/common/nav_home.png);
}
.gnav .nav_spot a::before{
  background-image: url(../img/common/nav_spot.png);
}
.gnav .nav_stamp a::before{
  background-image: url(../img/common/nav_stamp.png);
}
.gnav .nav_benefit a::before{
  background-image: url(../img/common/nav_benefit.png);
}
.gnav .nav_other a::before{
  background-image: url(../img/common/nav_other.png);
}

.gnav .nav_qa a::before{
  background-image: url(../img/common/nav_qa.png);
}



/*謎解き用追記*/
.easy,
.middle{
  background-color: #fff;
  border-radius: 10px;
}
.easy .head,
.middle .head{
/*  background-color: #494a9d;*/
 background-image: linear-gradient(135deg, rgba(20, 22, 106, 1), rgba(79, 81, 174, 1));
  padding: 20px 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.easy .head img{
  width: 80%;
}
.middle .head{
  padding-top: 40px;
}
.middle .head img{
  width: 75%;
}
.easy .wrap,
.middle .wrap{
  padding: 20px;
}
.start{
  display: inline-block;
  margin: 5px auto;
  background: #fff;
  padding: 0 20px 0 0;
  color: #4d499c;
  font-weight: bold;
  font-size: 125%;
}
.start span{
  display: inline-block;
  background: #d7d6f3;
  padding: 7px 15px;
  margin-right: 15px;
  font-size: 80%;
}
.junbi{
  color: var(--color-point);
  padding: 20px;
  border:4px solid;
  font-weight: bold;
}
.junbi em{
  display: block;
  font-size: 140%;
  font-style: normal;
  margin-bottom: 10px;
}
.yukimiku{
  background-image: linear-gradient(297deg, rgba(168, 202, 240, 1), rgba(233, 240, 250, 1) 79%);
  padding: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.yukimiku p{
  width: 90%;
  margin: -10px auto -20px;
}