@charset "utf-8";
/* CSS Document */

/* ===================== course ===================== */

/* headerのフローティング */
.is-fixed02 {
	padding-top: 180px;
}

/* course一覧のヘッダー */
nav .courses-header,
.ft_menu .courses-header {
	width: 100%;
	height: 80px;
	margin: 0 auto;
	background-color:#fff;
}

nav .courses-header li,
.ft_menu .courses-header li {
	text-align: center;
}

nav .courses-header img,
.ft_menu .courses-header img {
	height: 80px;
	width: auto;
}

nav .courses-header ol,
.ft_menu .courses-header ol {
	display: flex;
	gap:1em;
	justify-content: center;
}



/* ===================== map_area ===================== */

/* course一覧の案内文 */
.course_lead {
	width: 100%;
	margin: 0 auto;
	background-color: #c4e5df;
}

.course_lead .map_area {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

#root01 {
	width: 80%;
	max-width: 642.58px;
	position: absolute;
	top: 28%;
	left: 8%;
	text-align: left;
}

#root01 svg {
	width: 100%;
	height: auto;
}

#image_root {
	stroke-dasharray:3000px;
  animation:line_move 3.5s 1s 1 backwards;
	
}

@keyframes line_move {
0% {
stroke-dashoffset:3000px;
}
100% {
stroke-dashoffset:0px;
}
}


.pin01 img, .pin02 img, .pin03 img, .pin04 img, .pin05 img, .pin06 img {
	width: 100%;
	height: auto;
}

.pin01, .pin02, .pin05, .pin07 {
	display: block;
	position: absolute;
	width: 13.25%;
	max-width: 106px;
}

.pin03 {
	display: block;
	width: 7.25%;
	max-width: 58px;
	position: absolute;
}

.pin04 {
	display: block;
	width: 15.25%;
	max-width: 122px;
	position: absolute;
}

.pin06, .pin08 {
	display: block;
	width: 6%;
	max-width: 48px;
	position: absolute;
}

.course_lead .map_area .pin01 {
	top: 19.88%;
	left: 59.88%;
}

.course_lead .map_area .pin02 {
	top: 11.13%;
	left: 47.75%;
}

.course_lead .map_area .pin03 {
	top: 31.75%;
	left: 35.13%;
}

.course_lead .map_area .pin04 {
	top: 25.63%;
	left: 12.5%;
}

.course_lead .map_area .pin05 {
	top: 52.38%;
	left: 2.63%;
}

.course_lead .map_area .pin06 {
	top: 60.88%;
	left: 13.5%;
}

.course_lead .map_area .pin07 {
	top: 45.5%;
	left: 15.5%;
}

.course_lead .map_area .pin08 {
	top: 34.13%;
	left: 69.25%;
}

span.animation_box_pin1 {
  animation: fadeIn .2s linear 1s 1 normal backwards;
}

span.animation_box_pin2 {
  animation: fadeIn .2s linear 1.1s 1 normal backwards;
}

span.animation_box_pin3 {
  animation: fadeIn .2s linear 1.2s 1 normal backwards;
}

span.animation_box_pin4 {
  animation: fadeIn .2s linear 1.3s 1 normal backwards;
}

span.animation_box_pin5 {
  animation: fadeIn .2s linear 1.5s 1 normal backwards;
}

span.animation_box_pin6 {
  animation: fadeIn .2s linear 1.6s 1 normal backwards;
}

span.animation_box_pin7 {
  animation: fadeIn .2s linear 1.7s 1 normal backwards;
}

span.animation_box_pin8 {
  animation: fadeIn .2s linear 1.9s 1 normal backwards;
}
 
@keyframes fadeIn {
  from {
    opacity: 1;
    transform: translateY(-1500%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pin01_spot {
	width: 3.75%;
	max-width: 30px;
	position: absolute;
	top: 36.75%;
	left: 64.63%;
}

.pin03_spot {
	width: 3.75%;
	max-width: 30px;
	position: absolute;
	top: 31.5%;
	left: 42.38%;
}

.pin08_spot {
	width: 3.75%;
	max-width: 30px;
	position: absolute;
	top: 41.63%;
	left: 70.38%;
}

.pin01_spot img,
.pin03_spot img,
.pin08_spot img {
	width: 100%;
	height:  auto;
}

.root_al {
	width: 4.63%;
	max-width: 37px;
	position: absolute;
	top: 35%;
	left: 84.75%;
}

.root_al img {
	width: 100%;
	height:  auto;
}

span.animation_box_al {
  animation: fadeIn2 .2s linear 2.4s 1 normal backwards;
}
 
@keyframes fadeIn2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.course_lead h1 {
	font-size: 1.6em;
	text-align: center;
}

.course_lead .txt_area {
	width: 92%;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 0;
	box-sizing: border-box;
}

.btn_map {
	display:block;
	width:90%;
	max-width:400px;
	padding:15px;
	margin:1em auto 3em;
	box-sizing:border-box;
	border-radius:60px;
	background-color:#099;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.65);
	color: #fff;
	text-align:center;
	font-weight:bold;
	background-image: url("../img/btn_bg_gm.gif");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}



/* ===================== course_info ===================== */

/* course一覧の背景 */

.contents_innner {
    padding-top: 260px;
    margin-top:-260px;
}

.course_info {
	text-align: center;
	background-image: url("../img/bg_road.gif");
	background-repeat: repeat-y;
	background-position: top center;
}

.course_info .ttl_area {
	width: 92%;
	max-width: 800px;
	margin: 0 auto 1em;
	border-top: 6px solid #333;
	border-bottom: 2px solid #333;
	padding: 20px 0;
	text-align: center;
	box-sizing: border-box;
}


/* スポットのタイトル */
.course_info .ttl_area h3 {
	font-size: 1.4em;
	line-height: 1.4em;
}

.course_info .ttl_area .h3_txt {
	font-size: 1em;
}

.course_info .icon_area {
	display: flex;
	width: 92%;
	max-width: 800px;
	margin: 0 auto;
	box-sizing: border-box;
}

.course_info .icon_area .course_no {
	font-size: 2.0em;
	font-weight: bold;
	text-align: center;
	
	border-radius: 100%;
	width: 1.8em;
	height: 1.8em;
}

.course1a {
	background-color: #f96;
}

.course1b {
	background-color: #fff;
	border: 2px solid #f96;
}

.course1c {
	background-color: #fc6;
}

.course2a {
	background-color: #f99;
}

.course2c {
	background-color: #fcc;
}

.course3a {
	background-color: #FFFF66;
}

.course3c {
	color: #699;
	background-color: #fff;
	border: 1px solid #699;
}

.course_info .icon_area .course_cat {
	font-weight: bold;
	padding: 1em 0 0 1em;
}


/* スポットの概要 */
.course_info .bg_spot {
	width: 820px;
	max-width: 100%;
	margin: 0 auto;
	background-image: url("../img/bg_course.gif");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 90%;
}

.course_info .bg_spot_c {
	width: 820px;
	max-width: 100%;
	margin: 0 auto;
}

.course_info .spot_image_a img {
	width: 400px;
	max-width: 80%;
	height: auto;
	border: 7px solid #ff6;
}

.course_info .spot_image_c img {
	width: 400px;
	max-width: 80%;
	height: auto;
	border: 7px solid #699;
}




.course_info .spot_image_dtl {
	width: 100%;
	height: 500px;
	padding-bottom: 50px;
	
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 80%;
	margin-top: -50px;
}

#s31 .spot_image_dtl {
	background-image: url("../img/courses2025/s31_palmed_dtl.png");
}

#s32 .spot_image_dtl {
	background-image: url("../img/courses2025/s32_akari_dtl.png");
}

#s34 .spot_image_dtl {
	background-image: url("../img/courses2025/s34_zebra_dtl.png");
}

#s35 .spot_image_dtl {
	background-image: url("../img/courses2025/s35_orange_dtl.png");
}

#s37 .spot_image_dtl {
	background-image: url("../img/courses2025/s37_gs_dtl.png");
}

.course_info .spot_txt_area {
	width: 350px;
	max-width: 80%;
	margin: 0 auto;
	padding: 40% 0 0;
	text-align: center;
	box-sizing: border-box;	
}

.course_info .spot_txt_area .spot_txt {
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
	text-shadow: 
	0px 0px 5px #333,0px 0px 5px #333,0px 0px 5px #333,0px 0px 5px #333,
	0px 0px 5px #333,0px 0px 5px #333,0px 0px 5px #333,0px 0px 5px #333,
	0px 0px 5px #333,0px 0px 5px #333,0px 0px 5px #333,0px 0px 5px #333;
}

.course_info .spot_msg {
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.4em;
	padding-bottom: 0.5em;
}

.btn_more {
	display:block;
	width:100%;
	padding:8px;
	margin:1em auto 0;
	box-sizing:border-box;
	border-radius:45px;
	background:rgba(0,0,0,0.65);
	border:5px solid #ff6;
	text-align:center;
	font-size: 1.1em;
	color: #FFF;
	font-weight:bold;
}

.btn_more_c {
	display:block;
	width:60%;
	max-width: 350px;
	padding:8px;
	margin:1em auto 80px;
	box-sizing:border-box;
	border-radius:45px;
	background-color: #699;
	box-shadow: 0 2px 4px #333;
	text-align:center;
	font-size: 1.1em;
	color: #FFF;
	font-weight:bold;
}

.btn_more a,
.btn_more a:hover,
.btn_more_c a,
.btn_more_c a:hover {
	color: #FFF;
}

.animation_box_l {
	margin-top: -70px;
	margin-left: 60%;
	border-bottom: 3px solid #ff6;
	width: 40%;
	text-align: left;
}

.animation_box_r {
	margin-top: -70px;
	margin-right: 60%;
	border-bottom: 3px solid #ff6;
	width: 40%;
	text-align: right;
}

.animation_box_l img,
.animation_box_r img {
	width: auto;
	height: 120px;
}

div.animation_box_l {
  opacity: 1;
  transform: translateX(0);
  transition: 1.5s ease;
}

div.animation_box_r {
  opacity: 1;
  transform: translateX(-0);
  transition: 1.5s ease;
}

.ft_menu .img_area {
	width: 500px;
	max-width: 80%;
	text-align: right;
}

.ft_menu img {
	height: 110px;
	width: auto;
}



@media(max-width:820px){

.is-fixed02 {
	padding-top: 120px;
}

nav .courses-header,
.ft_menu .courses-header {
	height: 60px;
}

nav .courses-header img,
.ft_menu .courses-header img {
	height: 60px;
}

.contents_innner {
    padding-top: 140px;
    margin-top:-140px;
}


.course_info .spot_image_dtl {
	height: 500px;
}

.course_info .bg_spot,
.course_info .spot_image_dtl {
	background-size: 80%;
}

.course_info .spot_txt_area {
	padding: 40% 0 0;
}

}

@media(max-width:540px){

.contents_innner {
    padding-top: 140px;
    margin-top:-140px;
}

.course_info .bg_spot,
.course_info .spot_image_dtl {
	background-size: 120%;
}


.course_info .spot_txt_area {
	padding: 60% 0 0;
}

.course_info .spot_image_dtl {
	height: 450px;
}

}







