body.page-template-templates_camera,
body.parent-pageid-11657{
	vertical-align:top;
	background-color: #116a53;
	color: #fff;}

body.parent-pageid-11657 header.entry-header h1.entry-title,
body.parent-pageid-11657 h4.wp-block-heading {
	color: #fff;}
	
/*---------------------------------*/
/*ご利用前の注意事項*/
/*---------------------------------*/
ul#before_use { }

ul#before_use li{
	padding: 1em; 
	background: #fff; 
	color: #000; 
	border: none; 
	border-radius: 1em; 
	font-size: 1.1em;
	margin-bottom: 0.9em; 
	}

ul#before_use li ul{
	border-top: dotted 1px #000;
	margin: 0.9em 0;  
	}

ul#before_use li ul li{
	padding: 0.5em; 
	background: #fff; 
	color: #000; 
	border: none; 
	border-radius: 0; 
	font-size: 0.9em;
	margin: 0;
	border-bottom: dotted 1px #000; 
	}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}


.status {
	margin-top: 1em;
	text-align: center;}

.overlay-btn {
	width: 200px;
	margin: 0 auto;
	position: absolute;
	bottom: 3%;
	left:0;
	right:0;
	border-radius: 15px;
	text-align: center;}

.target {
	position: absolute !important;
	width: 90%;
	height: auto;
	top: 115px !important;
	left:5%;
	right:5%;
	padding: 0% 5% 2% 5%;
	font-size: 110%;
	background-color: rgba(255,255,255,0.8);
	display: hidden;
    /*z-index: 1;*/
	font-family: "Helvetica Neue",
	Arial,
	"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",
	Meiryo,
	sans-serif;
}

.target span#present {
	position: absolute !important;
	bottom: 15px;
	right: 15px;
	background-color: #fff;
	background-image: url("../../images/camera/present.png");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	width: 30px;
	height: 30px;
	border-radius: 150px;
	z-index: 999;
	}

.target h3 {
	font-size: 130%;
	text-align: center;
	margin:10px 0 0 0;
	padding:3px;
	border-bottom: 1px solid #000;}

.target img {
	display: block;
	width: 80%;
	height: auto;
	margin: 10px auto;}

.target>.detail {
    padding: 3% 0;
    text-align: center;
    width: 92%;
    color: #fff;
    background-color: rgba(1, 1, 1, 0.6);
    margin: 4%;
}

/*---------------------------------*/
/*コントロールメニュー*/
/*---------------------------------*/
.spot-html,
#checkpoint {
	width:90%;
	padding: 1em 0!important;
	margin:0 auto!important;
	font-size: 16px;
	font-family: sans-serif;
    }

@media screen and (min-width: 769px){
.spot-html .inner{
	width:70% !important;
	margin:0 auto ;
	text-align:left !important;
    }}

@media screen and (max-width: 770px){
.spot-html .inner{
	width:100% !important;
	margin:0 auto ;
	text-align:left !important;
    }}

.spot-html .inner p{
	width:100% !important;
	margin:0 auto !important;
	padding:0 auto !important;
	text-align:left !important;
	font-size:120% !important;
	line-height:1.6 !important;
    }

#menu{
	width : 100% !important;
	display: flex;
	flex-wrap:wrap;/* 改行許可 */
	justify-content: center;
	color: #fff;
	background-color: transparent;
	z-index: 999;
	margin:0 0 30px 0 !important;
	padding:0 !important;
	text-align:center !important;
    }

@media screen and (min-width: 769px){
#menu{
	margin:0 auto 30px auto !important;
	width : 60% !important;}}

#menu li{
	flex: 1;
	padding:0 0 0 3%!important;
	margin:0 !important;
	text-align:center !important;}

@media screen and (max-width: 770px){
#menu li:nth-child(1){
	padding:0 0 0 8%!important;}}

#menu li button {
	border-style: none;
	background-color: transparent;}

#menu li .btn,
#menu li a.btn,
#menu li button{
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
  display: block;
      width: 100%;
  padding:0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: #212529;
  border-radius: 0.5rem;
}


#location #menu li a.btn-c,
body#camera #menu li a.btn-c,
#checkpoint #menu li a.btn-c{
	position: relative;
	padding: 2px 0 45px 0 !important;
	margin:0 !important;
	color: #666;
	background: #ccc;
	-webkit-box-shadow: 0 5px 0 #999;
	box-shadow: 0 3px 0 #999;
	text-shadow: 1px 1px 2px #fff;
}

#location #menu li:nth-child(1) a.btn-c,
body#camera #menu li:nth-child(2) a.btn-c,
#checkpoint #menu li:nth-child(1) a.btn-c{
	position: relative;
	padding: 2px 0 45px 0 !important;
	margin:0 !important;
	color: #fff;
	background: #32b16c;
	-webkit-box-shadow: 0 5px 0 #2c9d60;
	box-shadow: 0 3px 0 #2c9d60;
	text-shadow: 1px 1px 2px #2c9d60;
}


#menu li a.btn-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  color: #fff;
  background: #38c578;
  -webkit-box-shadow: 0 2px 0 #2c9d60;
  box-shadow: 0 2px 0 #2c9d60;
}

#menu li a.btn-c:hover:before {
  left: 2rem;
}

#menu li a span{
	font-size: 14px;
	line-height: 2;
	font-weight: normal;
	display: block;
	color: #000;
	background-color: #fff;
	border-radius: 2rem;
	text-shadow: 1px 1px 2px #fff;
	width: 80%;
	margin: -20px auto 5px auto !important;	
}


.spot-html h3{
	font-size: 18px;
	color: #fff;
	margin:2em 0;
	position: relative;
	padding: 1.2em 1.8em;
	border-top: solid 2px #fff;
	border-bottom: solid 2px #fff;
}
.spot-html h3:before,
.spot-html h3:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #fff;
}
.spot-html h3:before {left: 10px;}
.spot-html h3:after {right: 10px;}
.spot-html h3 span {
    margin: 0; 
    padding: 0;
}

.spot-html h2 span{
	font-size: 12px !important;
	font-weight: normal!important;
	display: block!important;}

#checkpoint .spot-html h2 span{
	font-size: 16px !important;
	font-weight: normal!important;
	display: block!important;}

.spot-html span.to_hp a{
	display: block;
	border-radius: 30px;
	color: #fff;
	width: 80%;
	background-color: black;
	margin: 15px auto 100px auto;
	padding: 10px 0;
	text-decoration: none;
	text-align: center;}

/*/////////////////////////////////////////////////*/
/* YAOTSU MALL 山里であそぶ チェックポイントガイド */
/*/////////////////////////////////////////////////*/
#location{
	font-family: sans-serif;
	padding-bottom: 2em;}

#location .status { margin: 2em; }

#location .spot-html{
	margin-top:8em;
	padding: 0;
	background-color: transparent; }

#location .spot-html .inner{ width:90%; margin:0 auto; }

#location .spot-html .inner h2,
main.login-required h2,
.checkpoint-html h2{
	font-size: 160%; 
	margin: 0;
	padding : 0.5em 0;
	display: block;
	text-align: center;
	font-weight: bold;
	color:#fff;}

main.login-required p{
	text-align: center;}

.checkpoint-html h2 em{
	text-align: center;
	font-style: normal;
	font-weight: normal;
	font-size: 60%;
	display: block;
	padding : 0.5em 0;
	}

.checkpoint-html h2 span{
	text-align: center;
	font-style: normal;
	font-weight: normal;
	display: block;
	padding : 0.5em 0;
	}

#location .spot-html .inner p.button_explanation{
	font-size: 80% !important; 
	text-align: center !important;
	margin: 0 0 1.5em 0 !important;
	display: block !important;
	color:#fff;}

#location .spot-html img.spotHtml_icon{
	width:90%;
	text-align:center;
	margin: 0 auto;
	display: block; }

#location .spot-html img.spotHtml_icon{
	width:45%;
	text-align:center;
	margin: 0 auto;
	display: block; }

#location .btn-wrap{ text-align: center;}

#location .btn-wrap ul.main_btn{ text-align: center;}

#location .btn-wrap ul.main_btn li{ display: inline-block;}

#location .btn-wrap ul.main_btn li:first-child{ display: block; margin-bottom: 10px;}

/* 「開始」ボタンを、btn_stroll_around と同じ見た目にする */
#location .btn-wrap button#startBtn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;
  width: 170px;
  height: 80px;
  border-radius: 39px;

  background-color: #63d4db;
  color: #001933;
  text-align: center;

  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;

  font-size: 130% !important;
  line-height: 1.15 !important;
	font-family: sans-serif;
  	transition: .2s;
	margin: 30px auto 0 auto;
}

/* ボタン内の小さい行 */
#location .btn-wrap button#startBtn em{
  display: block;
  font-style: normal;
  font-size: 65% !important;
  line-height: 1.2;
  margin-top: 4px;
}

/* 波紋アニメ（a版と同様） */
#location .btn-wrap button#startBtn::before,
#location .btn-wrap button#startBtn::after{
  content: "";
  position: absolute;
  inset: 0;               /* top/left/width/height の代わり */
  border-radius: 39px;
  background: #a6f9ff;

  z-index: -1;            /* 背面に回す */
  pointer-events: none;
  transform: translate3d(0,0,0);
}

#location .btn-wrap button#startBtn::before{
  animation: anime 1s ease-out infinite;
}
#location .btn-wrap button#startBtn::after{
  animation: anime 1s ease-out 1s infinite;
}

/* もし親要素の背景で ::before/::after が隠れる場合の保険 */
#location .btn-wrap button .btn-wrap,
#location .btn-wrap button .main-btn,
#location .btn-wrap button .main-btn li{
  position: relative;
  z-index: 0;
}










#location .btn-wrap button.restartBtn, 
#location .btn-wrap ul.main-btn li span a{
      display: inline-block; 
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	margin: 0em auto;
	padding: 0.5rem 1rem;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #666;
	background-color: #fff;
	border: #666 1px solid;
	border-radius: 1rem;
    }

#location .info-btn-row, 
main.login-required .info-btn-row{
	text-align: center;}

#location .info-btn-row02 span.member a.info-btn, 
main.login-required .info-btn-row span.member a.info-btn{
	display: block !important;
	width:230px; 
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	margin: 0em auto;
	padding: 1.2rem 1rem;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #13123a;
	background-color: #81d1d9;
	border-style: none !important;
	border-radius: 1rem;
    }

#location .info-btn-row02 span.guest a.info-btn,
main.login-required .info-btn-row span.guest a.info-btn{
	display: block !important;
	width:230px; 
	font-size: 1rem !important;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	margin: 0.5em auto;
	padding: 0.5rem 0;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0em;
	color: #fff;
	border-style: none !important;
	background-color:transparent;
    }

#location .info-btn-row02 span.member a.info-btn em,
#location .info-btn-row02 span.guest a.info-btn em,
main.login-required .info-btn-row a.info-btn em{
	display:block;
	font-size: 12px;
	font-style:normal;
	font-weight:normal;
	margin-top:0.3rem;
	letter-spacing: 0;
	}

/* 注意事項＋進捗：同デザインで横並び */
@media screen and (min-width: 769px){
#location .info-btn-row{
	width: 50%;
	margin: 30px auto 0 auto;
	display: flex;
	gap: 12px;
}}

@media screen and (max-width: 770px){
#location .info-btn-row{
	width: 90%;
	margin: 30px auto 0 auto;
	display: flex;
	gap: 12px;
}}

#location .info-btn-row .info-btn{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  text-decoration: none;

  padding: 0.6rem 0.8rem;
  border-radius: 1.2rem;

  font-weight: 700;
  letter-spacing: 0.08em;

  color: #000;
font-weight: normal;
  background: #fff;
  border: 1px solid #666;

  box-sizing: border-box;
  min-height: 56px;
}

/* 画面が狭い端末は縦並びに */
@media (max-width: 360px){
  #location .info-btn-row{ flex-direction: column; }
}

#location{
	width:100% !important;}

#location .btn-wrap ul.main-btn, 
#location .btn-wrap ul.main-btn li{ margin: 0; padding: 0;}

#location .btn-wrap li em{ font-weight: normal; font-style: normal; font-size: 0.9rem; display: block; letter-spacing: 0em;}

#location .info-btn-row a em{
  display: inline-block !important;
  font-style: normal;
  font-weight: normal;
  font-size: 0.75rem;
  letter-spacing: 0;
}

#location .demo {text-align:center; margin: 0; padding: 3em;}

#location .demo p {margin:0px;}

#location .loading{
	font-size:48px;
	position:relative;
	height:1em !important;
	padding-left: 0.48em !important;
	width: 1em !important;              /* 0.55em だと回転の軸がズレやすい */
	transform-origin: 50% 50% !important;
	overflow:visible;
	margin:0 auto;
	animation: loader-wheel-rotate 0.8s linear infinite !important;
	will-change: transform;}

#location .loading i {
	display:block;
	position:absolute;
	height:0.3em;
	width:0.06em;
	border-radius:0.03em;
	background:#fff;
	opacity:0.8;
	transform:rotate(-30deg);
	transform-origin: 50% 0.48em !important;}

@keyframes loader-wheel-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


#resetBtn { 
	display: block;
	width: 150px;
	margin: 2em auto 1em auto; 
	padding: 1em; 
	background: #f33; 
	color: #fff; 
	border: none; 
	border-radius: 1em; 
	font-size: 0.9em; 
	cursor: pointer;}

#resetBtn:hover { background: #a00; }







    .checkpoint-html {
      margin-top: 100px;
      padding: 0;
    }

    .checkpoint-html h2 {
	color : #fff;
      display: block;
      text-align: center;
      margin-top: 0 !important;
    }

    .checkpoint-html h2 span {
      text-align: center;
      font-style: normal;
      font-size: 60%;
      font-weight: normal;
      display: block;
      margin: 0;
    }

    .checkpoint-html ul {
      border-top: 1px solid #eee;
      list-style: none;
      margin: 20px 0 0 0;
      padding: 15px 0 0 0;
    }

    .checkpoint-html ul li {
      margin-bottom: 12px;
      border-radius: 8px;
      background: #fff;
      transition: 0.3s;
    }

    .checkpoint-html ul li.reached {
      padding-bottom: 15px;
      padding-right: 30px;
      margin-bottom: 15px;
      background: #fff;
    }

    .checkpoint-html ul li.unreached {
      padding: 2% 3.5% 2% 3.5%;
      background: #f0f0f0;
      color: #333;
    }

    li.reached p {
      color: #333;
      position: relative;
      font-size: 100%;
      padding: 0;
      margin: 0;
    }

    .checkpoint-html ul li h3 {
      margin: 0 0 5px 0;
      font-size: 110%;
	font-weight: bold;
      padding: 0;
    }

    .checkpoint-html ul li.unreached h3 {
      display: inline-block !important;
      font-weight: normal;
      font-size: 95%;
      float: left;
    }

@media screen and (max-width: 770px){
    .checkpoint-html ul li.unreached h3 {
      display: block !important;
      font-weight: normal;
      font-size: 95%;
      float: none;
    }}

    .unreached-link {
      display: none;
    }

    .unreached-link a {
      color: #666 !important;
      font-size: 70% !important;
      text-decoration: none !important;
	width: 150px !important;
      margin: 0px !important;
      display: inline-block;
      float: right;
    }

@media screen and (max-width: 770px){
    .unreached-link a {
      color: #666 !important;
      font-size: 70% !important;
      text-decoration: none !important;
	width: 150px !important;
      margin: 0px !important;
      display: block;
      float: none;
    }}

    .checkpoint-html ul li.unreached a em{
	display: inline-block !important;
	padding: 3% 6% 2% 6%;
	background: #000;
	color: #fff;
	margin-right:5px;
	font-size:80%;
	border-radius: 8px;
	font-style:normal;
    }

    .details {
      display: none;
      margin: 0px;
      padding: 2% 2% 0.8% 2%;
      position: relative;
    }

    .details figure {
      display: block;
      float: left;
      width: 35%;
      margin: 0px;
      padding: 0px;
    }

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

    .details {
      display: none;
      margin: 0px;
      padding: 8% 8% 3% 8%;
      position: relative;
    }

    .details figure {
      display: block;
      float: none;
      width: 100%;
      margin: 0px auto 10px auto;
      padding: 0px;
    }}

    .details figure img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 8px;
    }

    .details .details_content {
      display: block;
      float: right;
      width: 60%;
      margin: 0px;
      padding: 0px;
    }

@media screen and (max-width: 770px){
    .details .details_content {
      display: block;
      float: none;
      width: 100%;
      margin: 0px;
      padding: 0px;
    }}

    .details a {
      text-decoration: none !important;
      display: block !important;
    }

    .details a::before {
      content: '';
      position: absolute;
      top: 50%;
      right: -4%;
      transform: translateY(-50%);
      width: 15px;
      height: 15px;
      background-color: transparent;
      border: 3px solid #bbb;
      border-radius: 50%;
    }

    .details a::after {
      content: '';
      position: absolute;
      top: calc(50% - 3px);
      right: calc(-4% + 9px);
      transform: rotate(45deg);
      width: 4px;
      height: 4px;
      border-width: 2px 2px 0 0;
      border-style: solid;
      border-color: #333 #333 transparent transparent;
    }

    .details a:hover::before {
      border: 3px solid #ceb849;
    }

    .details a:hover::after {
      border-color: #ceb849 #ceb849 transparent transparent;
    }

    li.unreached .unreached-link {
      display: block;
    }

    li.reached .unreached-link {
      display: none !important;
    }

    li.reached .details {
      display: block !important;
    }

    a {
      display: inline-block;
      color: #32b16c;
    }

    button {
      display: block;
      font-size: 18px;
      padding: 35px 16px;
      margin-bottom: 20px;
      border: none;
      border-radius: 6px;
      background-color: #32b16c;
      border-radius: 150px;
      color: white;
      cursor: pointer;
      margin: 0 auto;
      width: 80%;
      max-width: 400px;
    }

    button span {
      display: block;
      font-size: 60%;
    }

    button:hover {
      background-color: #0056b3;
    }

    #unlockAudio {
      display: block;
      background: #ff9800;
      color: #fff;
      padding: 12px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin: 35px auto;
    }

    #unlockAudio.active {
      background: #4caf50;
      color: #fff;
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
    
    .reached-timestamp {
      display: block;
      font-size: 80% !important;
      color: #32b16c;
      margin-top: 10px !important;
      font-weight: normal;
    }

    .progress-summary {
      text-align: center;
      padding: 20px;
      background: #fff;
      border-radius: 8px;
      margin-bottom: 20px;
      border: 2px solid #32b16c;
    }

    .progress-summary h3 {
      margin: 0 0 10px 0;
      color: #32b16c;
    }

    .progress-bar {
      width: 100%;
      height: 30px;
      background: #f0f0f0;
      border-radius: 15px;
      overflow: hidden;
      margin-top: 10px;
    }

    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #32b16c, #4caf50);
      transition: width 0.5s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }

/* 追記：info-btn を <button> にも適用して同じ見た目にする */
#location .info-btn-row button.info-btn{
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #666;
  background: #fff;
  color: #666;

  cursor: pointer;
  width: 100%;
  text-decoration: none;
  font: inherit;
  line-height: 1.2;
}

#location .info-btn-row button.info-btn:active{
  transform: translateY(1px);
}



/*/////////////////////////////////////////////////*/
/* 八百津の歩き方　お知らせ新着一覧 */
/*/////////////////////////////////////////////////*/
main.login-required section.checkpoint-news,
body.page-template-templates_camera section.checkpoint-news,
#checkpoint section.checkpoint-news{
	padding: 5px 0;
	margin-bottom: 65px;
	font-family: "Helvetica Neue",
	Arial,
	"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",
	Meiryo,
	sans-serif;}

main.login-required section.checkpoint-news h3,
body.page-template-templates_camera section.checkpoint-news h3,
#checkpoint section.checkpoint-news h3{
	display: block;
	font-size: 18px !important;
	margin: 0 !important;
	padding:3px 0;
	color: #fff !important;}

section.checkpoint-news span.title a{
	color: #fff !important;}

main.login-required section.checkpoint-news ul.checkpoint-news-list,
body.page-template-templates_camera section.checkpoint-news ul.checkpoint-news-list,
#checkpoint ul.checkpoint-news-list{
	margin: 0;
	padding: 0;
	border-top: 1px solid #fff;}

main.login-required section.checkpoint-news ul.checkpoint-news-list li,
body.page-template-templates_camera section.checkpoint-news ul.checkpoint-news-list li,
#checkpoint ul.checkpoint-news-list li{
	color: #fff !important;
	font-size: 16px !important;
	margin: 0;
	padding: 5px 0;
	background-color: transparent;
	border-bottom: 1px dotted #fff;
	border-radius: 0px;}

main.login-required section.checkpoint-news ul.checkpoint-news-list li span.title,
body.page-template-templates_camera section.checkpoint-news ul.checkpoint-news-list li span.title,
#checkpoint ul.checkpoint-news-list li span.title{
	color: #fff !important;}

main.login-required section.checkpoint-news ul.checkpoint-news-list li span.date,
body.page-template-templates_camera section.checkpoint-news ul.checkpoint-news-list li span.date,
#checkpoint ul.checkpoint-news-list li span.date{
	color: #fff !important;
	display: inline-block;	
	font-size: 80%;
	margin: 0 5px 0 0;
	padding: 0;}


@media screen and (max-width: 770px){
main.login-required section.checkpoint-news ul.checkpoint-news-list li span.date,
body.page-template-templates_camera section.checkpoint-news ul.checkpoint-news-list li span.date,
#checkpoint ul.checkpoint-news-list li span.date{
	color: #fff !important;
	display: block;	
	font-size: 80%;
	margin: 5px 0 0 0;
	padding: 0;}}