@charset "utf-8";
/* CSS Document */

/* ===================== spot_dtl ===================== */

/* headerのフローティング */
.is-fixed02 {
	padding-top: 140px;
}

/* スポット詳細　背景 */
.bg_b {
	width: 100%;
	background: rgba(0, 0, 0, 0.65);
}

.spot_dtl {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	background-color: #c4e5df;
	
}

/* スポット詳細　ヘッダー　モーダル内 */
nav .spot-header {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	background-color:#c4e5df;
	position: relative;
}

nav .spot-header .btn_area {
	position: absolute;
	top: 15px;
	right: 10px;
}

/* 閉じるボタン */
.btn-close {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;  /* 丸みの度合い */
  background: #fff; /* ボタンの背景色 */
}
 
.btn-close::before, .btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 21px;
  background: #c4e5df; /* バツ印の色 */
  border-radius: 1.5px;
}
 
.btn-close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
.btn-close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

.spot_dtl .ttl_area {
	text-align: center;
}

.spot_dtl .ttl_area h3 {
	font-size: 1.8em;
}

.spot_dtl .ttl_area .small {
	font-size: 1.4em;
}

.spot_dtl .ttl_area .h3_txt {
	font-size: 1em;
}

.spot_dtl .icon_area {
	width: 100%;
	padding: 10px 0;
	font-weight: bold;
	text-align: center;
}

.spot1a {
	color: #fff;
	background-color: #f96;
}

.spot1b {
	color: #f96;
	background-color: #fff;
}

.spot1c {
	color: #fff;
	background-color: #fc6;
}

.spot2a {
	color: #fff;
	background-color: #f99;
}

.spot2c {
	color: #fff;
	background-color: #fcc;
}

.spot3a {
	color: #333;
	background-color: #FFFF66;
}

.spot3c {
	color: #699;
	background-color: #fff;
}


/* スポット写真、テキスト */
.spot_dtl .img_area {
	text-align: center;
}

.spot_dtl .info_area {
	padding: 1em 1em 3em;
	box-sizing: border-box;
}

.spot_dtl .info_area h4 {
	font-size: 1.4em;
	line-height: 1.4em;
	text-align: center;
	margin-top: 1em;
}

.cl_1 {
color: #f96;
}

.cl_1c {
color: #fc6;
}

.cl_2 {
color: #f99;
}

.cl_2c {
color: #FFC6C6;
}

.cl_3 {
color: #fc0;
}

.cl_3c {
color: #699;
}

.spot_dtl .info_area .txt_area {
	padding: 1em 0;
}

.spot_dtl .info_area table {
	width: 100%;
	margin: 0 auto;
}

.spot_dtl .info_area table th {
	width: 5em;
	text-align: left;
	padding: 5px;
	box-sizing: border-box;
}

.spot_dtl .info_area table td {
	padding: 5px;
	box-sizing: border-box;
	pointer-events: none;
}


@media(max-width:820px){

.is-fixed02 {
	padding-top: 130px;
}

}