@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: 86.39%;
	max-width: 691.15px;
	position: absolute;
	top: 29%;
	left: 2%;
	text-align: left;
}

#root01 svg {
	width: 100%;
	height: auto;
}

#image_root {
	stroke-dasharray:3000px;
  animation:line_move 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, .pin04, .pin06, .pin07 {
	display: block;
	position: absolute;
	width: 13.25%;
	max-width: 106px;
}

.pin03 {
	display: block;
	position: absolute;
	width: 15.25%;
	max-width: 122px;
}

.pin05 {
	display: block;
	position: absolute;
	width: 16.13%;
	max-width: 129px;
}

.pin02, .pin08, .pin09 {
	display: block;
	width: 6%;
	max-width: 48px;
	position: absolute;
}

.course_lead .map_area .pin01 {
	top: 16.25%;
	left: 70.25%;
}

.course_lead .map_area .pin02 {
	top: 27.75%;
	left: 67%;
}

.course_lead .map_area .pin03 {
	top: 47.13%;
	left: 63%;
}

.course_lead .map_area .pin04 {
	top: 21.63%;
	left: 36.88%;
}

.course_lead .map_area .pin05 {
	top: 44.5%;
	left: 37.5%;
}

.course_lead .map_area .pin06 {
	top: 30%;
	left: 23.5%;
}

.course_lead .map_area .pin07 {
	top: 52%;
	left: 16.13%;
}

.course_lead .map_area .pin08 {
	top: 38%;
	left: 13.5%;
}

.course_lead .map_area .pin09 {
	top: 48.13%;
	left: 8.38%;
}

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.4s 1 normal backwards;
}

span.animation_box_pin6 {
  animation: fadeIn .2s linear 1.5s 1 normal backwards;
}

span.animation_box_pin7 {
  animation: fadeIn .2s linear 1.6s 1 normal backwards;
}

span.animation_box_pin8 {
  animation: fadeIn .2s linear 1.7s 1 normal backwards;
}

span.animation_box_pin9 {
  animation: fadeIn .2s linear 1.8s 1 normal backwards;
}
 
@keyframes fadeIn {
  from {
    opacity: 1;
    transform: translateY(-1500%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pin02_spot {
	width: 3.75%;
	max-width: 30px;
	position: absolute;
	top: 35.25%;
	left: 68.13%;
}

.pin02_spot img {
	width: 100%;
	height:  auto;
}

.root_al {
	width: 4.5%;
	max-width: 36px;
	position: absolute;
	top: 51.75%;
	left: 1.13%;
}

.root_al img {
	width: 100%;
	height:  auto;
}

span.animation_box_al {
  animation: fadeIn2 .2s linear 2s 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 #f99;
}

.course_info .spot_image_c img {
	width: 400px;
	max-width: 80%;
	height: auto;
	border: 7px solid #fcc;
}




.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;
}

#s21 .spot_image_dtl {
	background-image: url("../img/courses2025/s21_ishii_dtl_0327.png");
}

#s23 .spot_image_dtl {
	background-image: url("../img/courses2025/s23_garachico_dtl.png");
}

#s24 .spot_image_dtl {
	background-image: url("../img/courses2025/s24_menagere_dtl.png");
}

#s25 .spot_image_dtl {
	background-image: url("../img/courses2025/s25_miyabi_dtl.png");
}

#s26 .spot_image_dtl {
	background-image: url("../img/courses2025/s26_minutes_dtl.png");
}

#s27 .spot_image_dtl {
	background-image: url("../img/courses2025/s27_amalight_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 #f99;
	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: #f99;
	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 #f99;
	width: 40%;
	text-align: left;
}

.animation_box_r {
	margin-top: -70px;
	margin-right: 60%;
	border-bottom: 3px solid #f99;
	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: center;
}

.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;
}

}