/* ==========================================================
   0. Base & Animation
========================================================== */
html {
 scroll-behavior: smooth;
}

@keyframes slideInBike {
 0% {
  opacity: 0;
  transform: translateX(100px);
 }

 100% {
  opacity: 1;
  transform: translateX(0);
 }
}

.sp_sticky_header {
 display: none;
}

.map:has(img[src=""]) {
 display: none;
}

/* ==========================================================
   1. Common Components
========================================================== */
aside.outer_aside .outer_li-entry a {
 background: linear-gradient(135deg, rgb(155 195 20), rgb(125 165 5));
 box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
 transition: all .3s ease;
}

aside.outer_aside .outer_li-entry a:hover {
 background: linear-gradient(135deg, rgb(170 215 30), rgb(140 184 8));
 box-shadow: 0 6px 12px rgba(0, 0, 0, .15);
 transform: translateY(-2px);
}

aside.outer_aside .outer_ul li a[href="/info/"].is-active .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/info/"].is-current .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/info/"].is-hovered .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/info/"]:hover .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li.is-current a[href="/info/"] .outer-col2_inner .col1 img {
 content: url("/assets/img/common/v2/icon_info_active.svg");
}

aside.outer_aside .outer_ul li a[href="/course/"].is-active .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/course/"].is-current .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/course/"].is-hovered .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/course/"]:hover .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li.is-current a[href="/course/"] .outer-col2_inner .col1 img {
 content: url("/assets/img/common/v2/icon_cycle_active.svg");
}

aside.outer_aside .outer_ul li a[href="/rider-agreement/"].is-active .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/rider-agreement/"].is-current .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/rider-agreement/"].is-hovered .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/rider-agreement/"]:hover .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li.is-current a[href="/rider-agreement/"] .outer-col2_inner .col1 img {
 content: url("/assets/img/common/v2/icon_join_active.svg");
}

aside.outer_aside .outer_ul li a[href="/volunteer/"].is-active .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/volunteer/"].is-current .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/volunteer/"].is-hovered .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/volunteer/"]:hover .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li.is-current a[href="/volunteer/"] .outer-col2_inner .col1 img {
 content: url("/assets/img/common/v2/icon_volunteer_active.svg");
}

aside.outer_aside .outer_ul li a[href="/access/"].is-active .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/access/"].is-current .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/access/"].is-hovered .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a[href="/access/"]:hover .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li.is-current a[href="/access/"] .outer-col2_inner .col1 img {
 content: url("/assets/img/common/v2/icon_access_active.svg");
}

#page_index #NewsIndex-v2 .outer-col2 .col1 a,
#page_index #Partner .outer_title>.inner a {
 transition: all .3s ease;
}

#page_index #NewsIndex-v2 .outer-col2 .col1 a.is-hoverd,
#page_index #NewsIndex-v2 .outer-col2 .col1 a:hover,
#page_index #Partner .outer_title>.inner a.is-hovered,
#page_index #Partner .outer_title>.inner a:hover {
 background-color: rgb(140 184 40);
 color: #fff;
 transform: none;
}

#page_index #NewsIndex-v2 .outer-col2 .col1 a img,
#page_index #NewsIndex-v2 .outer-col2 .col1 a svg,
#page_index #Partner .outer_title>.inner a img {
 transition: transform .3s ease;
}

#page_index #NewsIndex-v2 .outer-col2 .col1 a.is-hoverd img,
#page_index #NewsIndex-v2 .outer-col2 .col1 a:hover img,
#page_index #Partner .outer_title>.inner a.is-hovered img,
#page_index #Partner .outer_title>.inner a:hover img {
 filter: brightness(0) invert(1);
 transform: translateX(4px);
}

#page_index #NewsIndex-v2 .outer-col2 .col1 a.is-hoverd svg,
#page_index #NewsIndex-v2 .outer-col2 .col1 a.is-hoverd svg *,
#page_index #NewsIndex-v2 .outer-col2 .col1 a:hover svg,
#page_index #NewsIndex-v2 .outer-col2 .col1 a:hover svg * {
 fill: #fff;
 stroke: #fff;
 transform: translateX(4px);
}

aside.outer_aside .outer_ul li a.is-current,
aside.outer_aside .outer_ul li.is-current a {
 background-color: rgb(248 253 232);
}

aside.outer_aside .outer_ul li .outer-col2 {
 position: relative;
}

aside.outer_aside .outer_ul li .outer-col2::before {
 background-color: #8cb808;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 content: "";
 transform: scaleY(0);
 transform-origin: bottom;
 transition: transform .3s ease;
 width: 4px;
}

aside.outer_aside .outer_ul li .outer-col2:hover::before,
aside.outer_aside .outer_ul li a.is-current::before,
aside.outer_aside .outer_ul li a.is-hovered::before,
aside.outer_aside .outer_ul li.is-current a::before {
 transform: scaleY(1);
}

aside.outer_aside .outer_ul li .outer-col2 .outer-col2_inner .col1 img {
 transition: transform .3s ease;
}

aside.outer_aside .outer_ul li .outer-col2:hover .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a.is-current .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li a.is-hovered .outer-col2_inner .col1 img,
aside.outer_aside .outer_ul li.is-current a .outer-col2_inner .col1 img {
 transform: translateY(-3px);
}

aside.outer_aside .outer_ul li .outer-col2 .col2 img {
 transition: transform .3s ease;
}

aside.outer_aside .outer_ul li .outer-col2:hover .col2 img,
aside.outer_aside .outer_ul li a.is-current .col2 img,
aside.outer_aside .outer_ul li a.is-hovered .col2 img,
aside.outer_aside .outer_ul li.is-current a .col2 img {
 transform: translateY(-3px);
}

aside.outer_aside .outer_pc-only .outer_small-links li a.is-hovered img,
aside.outer_aside .outer_pc-only .outer_small-links li a:hover img {
 transform: translateY(-3px);
}

aside.outer_aside .outer_pc-only .outer_social img {
 filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
 transition: all .3s ease;
}

aside.outer_aside .outer_pc-only .outer_social img.is-hovered,
aside.outer_aside .outer_pc-only .outer_social img:hover {
 filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2));
 transform: translateY(-4px);
}

footer.footer-v2 .outer_middle .outer-col4 .el_link,
footer.footer-v2 .outer_middle .outer-col4 a.el_h,
footer.footer-v2 .outer_middle .outer-col4 h4.el_h,
footer.footer-v2 .outer_middle .outer-col4 ul .el_link {
 transition: color .3s ease;
}

footer.footer-v2 .outer_middle .outer-col4 .el_link img,
footer.footer-v2 .outer_middle .outer-col4 a.el_h img,
footer.footer-v2 .outer_middle .outer-col4 h4.el_h img,
footer.footer-v2 .outer_middle .outer-col4 ul .el_link img {
 transition: transform .3s ease;
}

footer.footer-v2 .outer_middle .outer-col4 .el_link:hover,
footer.footer-v2 .outer_middle .outer-col4 a.el_h:hover,
footer.footer-v2 .outer_middle .outer-col4 ul .el_link:hover {
 color: #8cb808;
}

footer.footer-v2 .outer_middle .outer-col4 .el_link:hover img,
footer.footer-v2 .outer_middle .outer-col4 a.el_h:hover img,
footer.footer-v2 .outer_middle .outer-col4 h4.el_h:hover img,
footer.footer-v2 .outer_middle .outer-col4 ul .el_link:hover img {
 transform: translateY(-2px);
}

footer.footer-v2 .outer_middle .outer-col4 .el_h .arrow {
 display: none;
}

footer.footer-v2 .outer_middle .outer-col4 ul .el_link {
 padding: 8px 0;
}

@media (max-width: 767px) {
 footer.footer-v2 .outer_middle .outer-col4 .el_h {
  align-items: center;
  border-bottom: 1px solid #cbcbcb;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  height: 44px;
  margin: 0;
  padding: 0 28px;
 }
}

@media (min-width: 768px) {
 footer.footer-v2 .outer_middle .outer-col4 .el_h {
  border-bottom: 1px solid #e0e0e0;
  height: auto;
  margin-bottom: 12px;
  padding: 0 0 8px;
 }

 footer.footer-v2 .outer_middle .outer-col4 a.el_h {
  align-items: center;
  display: flex;
  cursor: pointer;
  gap: .5rem;
  text-decoration: none;
 }

 footer.footer-v2 .outer_middle .outer-col4 a.el_h>img {
  display: none !important;
 }

 footer.footer-v2 .outer_middle .outer-col4 a.el_h .arrow {
  display: block;
  line-height: 0;
 }

 footer.footer-v2 .outer_middle .outer-col4 a.el_h .arrow img {
  display: inline-block;
  width: 7px;
 }
}

/* === Page Link Buttons === */
.c_outer-bg-green .outer_col-5 {
 display: grid;
 gap: 20px;
 grid-template-columns: repeat(5, minmax(0, 1fr));
}

.c_outer-bg-green .outer_col-5 a {
 background-color: #fff;
 border-top: 4px solid #8dc63f;
 color: #333;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 padding: 16px 0;
 text-decoration: none;
 transition: background-color .3s, color .3s;
}

.c_outer-bg-green .outer_col-5 a.current,
.c_outer-bg-green .outer_col-5 .no-active.current {
 background: linear-gradient(to bottom, #aadd55, #8dc63f);
 color: #fff;
 pointer-events: none;
}

.c_outer-bg-green .outer_col-5 a:not(.current):hover {
 background-color: #8dc63f;
 color: #fff;
}

.outer_bottom-nav {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 z-index: 9999;
}

.outer_bottom-nav nav {
 -webkit-backdrop-filter: blur(8px);
 backdrop-filter: blur(8px);
 background-color: rgba(255, 255, 255, .9);
 box-sizing: border-box;
 margin-bottom: 0;
 padding: 0;
 transition: margin-bottom .3s ease;
}

.outer_bottom-nav nav.is-ty-0 {
 margin-bottom: 0;
}

.outer_bottom-nav nav.is-ty-full {
 margin-bottom: -100px;
}

.outer_bottom-nav nav>.inner a {
 align-items: center;
 background: linear-gradient(135deg, rgb(155 195 20), rgb(125 165 5));
 border-radius: 8px;
 box-sizing: border-box;
 color: #fff;
 display: flex;
 justify-content: center;
 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .1));
 font-weight: bold;
 height: 56px;
 line-height: 1;
 margin: 0 auto;
 text-decoration: none;
 transition: filter .2s ease;
 width: 90%;
}

.outer_bottom-nav nav>.inner a:active {
 filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)) brightness(.9);
}

.newstyle2026 .breadcrumb {
 align-items: center;
 display: flex;
 gap: 8px;
 color: #666;
 font-size: 13px;
 list-style: none;
 margin: 0 0 12px;
 padding: 0;
}

.newstyle2026 .breadcrumb a {
 color: #8bc34a;
 font-weight: bold;
 text-decoration: none;
}

.newstyle2026 .breadcrumb li {
 align-items: center;
 display: flex;
 flex-shrink: 0;
}

.newstyle2026 .breadcrumb li:not(:last-child)::after {
 color: #666;
 content: ">";
 margin-left: 8px;
}

.newstyle2026 .breadcrumb li:last-child {
 flex-shrink: 1;
 min-width: 0;
}

.newstyle2026 .breadcrumb li:last-child span {
 display: block;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.newstyle2026 .home_link {
 align-items: center;
 display: flex;
 color: #8bc34a;
 font-weight: bold;
 gap: 4px;
 text-decoration: none;
}

.newstyle2026 .home_link::before {
 background: url('/assets/img/common/2026/breadcrumb_home.svg') no-repeat center center / contain;
 content: "";
 display: inline-block;
 height: 14px;
 width: 14px;
}

.level_badge {
 background-color: #fff;
 border: 1px solid currentColor;
 border-radius: 12px;
 box-sizing: border-box;
 display: inline-block;
 font-size: 14px;
 font-weight: bold;
 line-height: 23px;
 padding: 0 12px;
 text-align: center;
 white-space: nowrap;
 width: auto;
}

.level_high {
 color: #f00000;
}

.level_mid {
 color: #ff9500;
}

.level_low {
 color: #8cb808;
}

.star_rating {
 background-image: url('/assets/img/course/2026/star_blank_icon.svg'), url('/assets/img/course/2026/star_blank_icon.svg'), url('/assets/img/course/2026/star_blank_icon.svg'), url('/assets/img/course/2026/star_blank_icon.svg'), url('/assets/img/course/2026/star_blank_icon.svg');
 background-position: 0 center, 22px center, 44px center, 66px center, 88px center;
 background-repeat: no-repeat;
 background-size: 18px 18px;
 height: 18px;
 position: relative;
 width: 106px;
}

.star_rating::before {
 background-position: inherit;
 background-repeat: inherit;
 background-size: inherit;
 position: absolute;
 inset: 0;
 content: "";
}

.level_high_wrap .star_rating::before {
 background-image: url('/assets/img/course/2026/star_red_icon.svg'), url('/assets/img/course/2026/star_red_icon.svg'), url('/assets/img/course/2026/star_red_icon.svg'), url('/assets/img/course/2026/star_red_icon.svg'), url('/assets/img/course/2026/star_red_icon.svg');
}

.level_mid_wrap .star_rating::before {
 background-image: url('/assets/img/course/2026/star_orange_icon.svg'), url('/assets/img/course/2026/star_orange_icon.svg'), url('/assets/img/course/2026/star_orange_icon.svg'), url('/assets/img/course/2026/star_orange_icon.svg'), url('/assets/img/course/2026/star_orange_icon.svg');
}

.level_low_wrap .star_rating::before {
 background-image: url('/assets/img/course/2026/star_green_icon.svg'), url('/assets/img/course/2026/star_green_icon.svg'), url('/assets/img/course/2026/star_green_icon.svg'), url('/assets/img/course/2026/star_green_icon.svg'), url('/assets/img/course/2026/star_green_icon.svg');
}

.star_rating.rate-0::before {
 width: 0;
}

.star_rating.rate-1::before {
 width: 18px;
}

.star_rating.rate-1_5::before {
 width: 32px;
}

.star_rating.rate-2::before {
 width: 40px;
}

.star_rating.rate-3::before {
 width: 62px;
}

.star_rating.rate-4::before {
 width: 84px;
}

.star_rating.rate-5::before {
 width: 106px;
}

/* ==========================================================
   2. Course List Page
========================================================== */
#SubpageTitle {
 overflow: hidden;
}

#SubpageTitle .inner {
 border-bottom: 4px solid #e0e0e0;
 box-sizing: border-box;
 height: 180px;
}

#SubpageTitle .outer_title {
 padding: 0;
}

#SubpageTitle.newstyle2026 .title_wrap {
 align-items: flex-end;
 display: flex;
 justify-content: space-between;
 box-sizing: border-box;
 height: 100%;
 margin: 0 auto;
 max-width: 940px;
 padding: 0 70px;
 position: relative;
 text-align: left;
 width: 100%;
}

#SubpageTitle.newstyle2026 .title_wrap::after {
 background-color: #8bc34a;
 position: absolute;
 bottom: -4px;
 left: 70px;
 content: "";
 height: 4px;
 width: 100px;
}

#SubpageTitle.newstyle2026 .el_h {
 border: none;
 color: #333;
 font-size: 32px;
 font-weight: bold;
 line-height: 1.2;
 margin: 0;
 padding: 0;
}

.newstyle2026 .bike_icon {
 animation: slideInBike .8s ease-out .2s both;
 position: absolute;
 right: 70px;
 bottom: 26px;
 display: block;
 height: auto;
 width: 70px;
 z-index: 2;
}

.c_outer .course_list {
 align-items: stretch;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 list-style: none;
 margin: 0 auto 40px;
 max-width: 800px;
 padding: 0;
 width: 100%;
}

.c_outer .course_item {
 background-color: #333;
 background-position: center;
 background-size: cover;
 box-sizing: border-box;
 color: #fff;
 display: flex;
 flex-direction: column;
 margin: 0 0 24px !important;
 padding: 24px;
 position: relative;
 width: calc(50% - 12px);
 z-index: 1;
}

.c_outer .course_list .course_item::before {
 -webkit-backdrop-filter: blur(2px);
 backdrop-filter: blur(2px);
 background-color: rgba(0, 0, 0, .5);
 background-image: none;
 border: none;
 position: absolute;
 top: 0;
 left: 0;
 content: "" !important;
 display: block;
 height: 100%;
 width: 100%;
 z-index: -1;
}

.c_outer .course_title {
 font-size: 24px;
 font-weight: bold;
 margin: 0 0 12px;
 text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.c_outer .course_level_wrap {
 align-items: center;
 display: flex;
 gap: 8px;
 margin-bottom: 16px;
}

.c_outer .course_info_text {
 display: flex;
 font-size: 14px;
 gap: 16px;
 margin-bottom: 24px;
 text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.c_outer .location {
 background: url('/assets/img/course/2026/start_icon.svg') no-repeat left center / 16px auto;
 padding-left: 20px;
}

.c_outer .aid {
 background: url('/assets/img/course/2026/aid_icon.svg') no-repeat left center / 16px auto;
 padding-left: 20px;
}

.c_outer .course_stats {
 background-color: rgba(0, 0, 0, .5);
 margin: auto -24px 24px;
 padding: 16px 24px;
 text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.c_outer .stat_row {
 align-items: center;
 display: flex;
 font-size: 14px;
 margin-bottom: 8px;
}

.c_outer .stat_label {
 width: 60px;
}

.c_outer .stat_bar_wrap {
 background-color: #fff;
 border-radius: 3px;
 flex-grow: 1;
 height: 6px;
 margin: 0 12px;
 position: relative;
}

.c_outer .stat_bar {
 background-color: #0090ff;
 border-radius: 3px;
 height: 100%;
}

.c_outer .stat_bar_elevation {
 background-color: transparent;
 background-image: repeating-linear-gradient(-45deg, #8cb828, #8cb828 4px, #a0c84b 4px, #a0c84b 8px);
}

.c_outer .stat_value {
 margin-left: auto;
 text-align: right;
 width: 50px;
}

.c_outer .btn_detail {
 background-color: #fff;
 border: 2px solid #8cb828;
 border-radius: 8px;
 color: #8cb828;
 display: block;
 font-size: 16px;
 font-weight: bold;
 line-height: 44px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 transition: all .3s cubic-bezier(.25, .8, .25, 1);
 width: 100%;
}

.c_outer .btn_detail::after {
 background: url('/assets/img/course/2026/arrow_icon.svg') no-repeat center center / contain;
 position: absolute;
 top: 50%;
 right: 16px;
 content: "";
 height: 14px;
 transform: translateY(-50%);
 transition: transform .3s ease;
 width: 14px;
}

@media (hover: hover) {
 .c_outer .btn_detail:hover {
  background-color: #8cb828;
  box-shadow: 0 0 0 #8cb828;
  color: #fff;
  transform: translateY(4px);
 }

 .c_outer .btn_detail:hover::after {
  filter: brightness(0) invert(1);
  transform: translate(4px, -50%);
 }
}

/* ==========================================================
   3. Course Detail Page
========================================================== */
.course_detail_hero {
 align-items: center;
 background-position: center;
 background-size: cover;
 display: flex;
 height: 180px;
 position: relative;
}

.course_detail_hero::before {
 background-color: rgba(0, 0, 0, .4);
 position: absolute;
 inset: 0;
 content: "";
}

.course_detail_hero .inner {
 box-sizing: border-box;
 margin: 0 auto;
 max-width: 940px;
 padding: 0 70px;
 position: relative;
 width: 100%;
}

.course_detail_hero .detail_breadcrumb {
 background-color: #fff;
 border-radius: 20px;
 box-sizing: border-box;
 display: inline-flex;
 margin-bottom: 16px;
 max-width: 100%;
 padding: 8px 18px;
}

.course_detail_title {
 color: #fff;
 font-size: 30px;
 font-weight: bold;
 line-height: 1.2;
 margin: 0 0 16px;
}

.course_detail_hero .course_level_wrap {
 align-items: center;
 display: flex;
 gap: 8px;
 margin-bottom: 0;
}

/* === Course Summary Grid === */
.course_summary_grid {
 box-sizing: border-box;
 display: grid;
 gap: 24px;
 grid-template-columns: repeat(3, 1fr);
 list-style: none;
 margin: 40px auto 0;
 max-width: 940px;
 padding: 0;
}

.course_summary_grid .summary_item {
 background-color: #f7f7f7;
 border: 1px solid #e0e0e0;
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 0 !important;
 padding: 18px 14px !important;
}

.course_summary_grid .summary_item::before {
 content: none;
}

.summary_item .icon_circle {
 background-color: #8cb828;
 background-position: center;
 background-repeat: no-repeat;
 background-size: 28px auto;
 border-radius: 50%;
 flex-shrink: 0;
 height: 56px;
 width: 56px;
}

.course_summary_summary {
 -webkit-user-select: none;
 align-items: center;
 display: flex;
 flex-direction: column;
 background-color: #f7f7f7;
 border: 1px solid #e0e0e0;
 color: #8cb828;
 cursor: pointer;
 font-size: 16px;
 font-weight: bold;
 gap: 4px;
 letter-spacing: .05em;
 list-style: none;
 padding: 16px 20px;
 text-align: center;
 transition: all .3s ease;
 user-select: none;
}

.course_summary_summary:hover {
 background-color: #eee;
}

.course_summary_summary::-webkit-details-marker {
 display: none;
}

.course_summary_summary::after {
 background-image: url("/assets/img/common/v2/chevron-right-solid--green.svg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: contain;
 content: "";
 height: 16px;
 opacity: .8;
 transform: rotate(90deg);
 transition: transform .4s cubic-bezier(.4, 0, .2, 1);
 width: 16px;
}

.course_summary_summary:hover::after {
 transform: translateY(2px) rotate(90deg);
}

.course_summary_details[open] .course_summary_summary::after {
 opacity: 1;
 transform: rotate(270deg);
}

.course_summary_details[open] .course_summary_summary:hover::after {
 transform: translateY(-2px) rotate(270deg);
}

.course_summary_details[open] .course_summary_table_wrap {
 animation: smoothOpen .8s cubic-bezier(.4, 0, .2, 1) forwards;
 border: 1px solid #e0e0e0;
 border-top: none;
 overflow: hidden;
 transform-origin: top;
}

@keyframes smoothOpen {
 0% {
  max-height: 0;
  opacity: 0;
 }

 100% {
  max-height: 800px;
  opacity: 1;
 }
}

.summary_item .icon_distance {
 background-image: url('/assets/img/course/2026/icon_distance.svg');
}

.summary_item .icon_elevation {
 background-image: url('/assets/img/course/2026/icon_elevation.svg');
}

.summary_item .icon_aid {
 background-image: url('/assets/img/course/2026/icon_aid_white.svg');
}

.summary_item .icon_start {
 background-image: url('/assets/img/course/2026/icon_start_white.svg');
}

.summary_item .icon_time {
 background-image: url('/assets/img/course/2026/icon_time.svg');
}

.summary_item .icon_limit {
 background-image: url('/assets/img/course/2026/icon_limit.svg');
}

.summary_text {
 display: flex;
 flex-direction: column;
}

.summary_label {
 color: #666;
 font-size: 13px;
 margin-bottom: 4px;
}

.summary_value {
 font-family: "Unbounded", sans-serif;
 font-size: 20px;
 font-weight: bold;
 line-height: 1.2;
}

.summary_note {
 font-size: 13px;
 font-weight: normal;
 margin: 0 auto 24px;
 max-width: 940px;
}

.course_map_ph {
 align-items: center;
 display: flex;
 justify-content: center;
 background-color: #f0f0f0;
 margin: 40px auto;
 width: 80%;
}

.course_description {
 font-size: 15px;
 line-height: 1.8;
 margin: 0 auto 60px;
 max-width: 940px;
}

.course_summary_table_wrap {
 margin: 0 auto 12px;
 max-width: 940px;
}

.course_summary_table {
 background-color: #f7f7f7;
 border-collapse: collapse;
 overflow: hidden;
 width: 100%;
}

.course_summary_table th,
.course_summary_table td {
 border-bottom: 1px solid #e0e0e0;
 font-size: 15px;
 padding: 16px 24px;
 text-align: left;
}

.course_summary_table tr:last-child th,
.course_summary_table tr:last-child td {
 border-bottom: none;
}

.course_summary_table th {
 background-color: #f0f0f0;
 font-weight: normal;
 vertical-align: top;
 width: 200px;
}

.course_summary_table td {
 font-weight: bold;
}

/* ==========================================================
   4. Layout & Sidebar
========================================================== */
.course_detail_layout {
 align-items: flex-start;
 display: flex;
 gap: 40px;
 margin: 0 auto 60px;
 max-width: 940px;
 /*4/9公開版対応*/
 margin-bottom: 0;
}

.course_sidebar {
 flex-shrink: 0;
 position: sticky;
 top: 24px;
 z-index: 10;
 margin: auto;
 width: 280px;
 /*4/9公開版対応*/
 width: 400px;

}

.sidebar_box {
 background-color: #f7f7f7;
 border: 1px solid #e0e0e0;
 margin-bottom: 24px;
 overflow: hidden;
 padding: 24px;
}

.sidebar_title {
 font-size: 20px;
 font-weight: bold;
 margin: 0 0 12px;
}

.sidebar_box .course_level_wrap {
 align-items: center;
 display: flex;
 gap: 4px;
 margin-bottom: 16px;
}

.btn_gps {
 background-color: #8cb828;
 border-radius: 4px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
 color: #fff;
 display: block;
 font-weight: bold;
 line-height: 40px;
 margin-bottom: 24px;
 position: relative;
 text-align: center;
 text-decoration: none;
 transition: transform .1s, box-shadow .1s;
 width: 100%;
}

.btn_gps:active {
 box-shadow: none;
 transform: translateY(2px);
}

.btn_gps::after {
 position: absolute;
 right: 16px;
 content: ">";
}

.sidebar_nav {
 background-color: #fff;
 margin: 0 -24px -24px;
 padding: 24px;
}

.sidebar_nav .nav_list {
 position: relative;
 list-style: none;
 margin: 0;
 padding: 0;
}

.sidebar_nav .nav_list::before {
 background-color: #d9d9d9;
 position: absolute;
 top: 10px;
 bottom: 10px;
 left: 69px;
 content: "";
 width: 4px;
 z-index: 1;
}

.sidebar_nav li {
 position: relative;
 margin-bottom: 8px;
 z-index: 2;
}

.sidebar_nav a {
 align-items: center;
 display: flex;
 background-color: #fff;
 border: 1px solid #8cb828;
 border-radius: 4px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
 box-sizing: border-box;
 font-size: 13px;
 font-weight: bold;
 min-height: 44px;
 padding: 10px 12px;
 text-decoration: none;
 transition: background-color .2s ease, color .2s ease;
 /*4/9公開対応*/
 pointer-events: none;
}

.sidebar_nav a:hover,
.sidebar_nav li.is-current a,
.sidebar_nav a.is-current {
 background-color: #8cb828;
 color: #fff;
}

.sidebar_nav li:last-child a {
 background-color: #8cb828;
 color: #fff;
}

.sidebar_nav li:last-child .nav_dot {
 background-color: #fff;
 border-color: #fff;
}

.sidebar_nav a:hover .nav_dot,
.sidebar_nav li.is-current .nav_dot,
.sidebar_nav a.is-current .nav_dot,
.sidebar_nav li:last-child a:hover .nav_dot,
.sidebar_nav li:last-child.is-current .nav_dot {
 background-color: #f00000;
 border-color: #fff;
}

.sidebar_nav .nav_list:not(:has(.is-current)) li:first-child a {
 background-color: #8cb828;
 color: #fff;
}

.sidebar_nav .nav_list:not(:has(.is-current)) li:first-child .nav_dot {
 background-color: #f00000;
 border-color: #fff;
}

.nav_dist {
 margin-right: 16px;
 text-align: right;
 width: 32px;
}

.nav_dot {
 background-color: #999;
 border: 2px solid #fff;
 border-radius: 50%;
 height: 20px;
 margin-right: 12px;
 position: relative;
 transition: background-color .2s ease, border-color .2s ease;
 width: 20px;
 z-index: 2;
}

.nav_name {
 flex: 1;
}

.sidebar_related {
 display: block;
 margin-top: 24px;
 opacity: 1;
 visibility: visible;
}

.sidebar_related.is-hidden {
 opacity: 0;
 visibility: hidden;
 /*4/9公開対応*/
 display: none;
}

.related_title {
 font-size: 14px;
 margin: 0 0 12px;
}

.sidebar_course_card {
 border: 1px solid #e0e0e0;
}

/* ==========================================================
   5. Timeline
========================================================== */
.course_main_content {
 position: relative;
 flex: 1;
 min-width: 0;
 padding-left: 20px;
 /*4/9公開版対応*/
 display: none;
}

.timeline_container {
 list-style: none;
 margin: 0;
 padding: 0;
}

.timeline_item {
 position: relative;
 margin-bottom: 40px;
 scroll-margin-top: 24px;
 z-index: 1;
}

.timeline_item::before {
 background-color: #d9d9d9;
 position: absolute;
 top: 0;
 bottom: -40px;
 left: 38px;
 content: "";
 width: 10px;
 z-index: -1;
}

.timeline_item:last-child::before {
 bottom: 0;
}

.item_content {
 background-color: #f7f7f7;
 border-left: 5px solid #808080;
 box-sizing: border-box;
 padding: 32px;
}

.timeline_item:last-child .item_content {
 border-left-color: #8cb828;
}

.timeline_item.is-current .item_content,
.timeline_item:last-child.is-current .item_content {
 border-left-color: #f00000;
 box-shadow: none;
 outline: none;
}

.timeline_container:not(:has(.is-current)) .timeline_item:first-child .item_content {
 border-left-color: #f00000;
 box-shadow: none;
 outline: none;
}

.item_title {
 align-items: center;
 display: flex;
 font-size: 20px;
 font-weight: bold;
 gap: 16px;
 margin: 0 0 24px;
}

.badge_dist {
 background-color: #fff;
 border: 1px solid #ccc;
 border-radius: 12px;
 font-size: 12px;
 font-weight: normal;
 padding: 2px 12px;
}

.item_body {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.item_img_ph {
 aspect-ratio: 3/2;
 background-color: #e0e0e0;
 height: auto;
 margin: 0;
 width: 100%;
}

.item_desc {
 font-size: 14px;
 line-height: 1.8;
}

.aid_food_box {
 display: flex;
 flex-direction: column;
 gap: 16px;
 background-color: #f2ebe3;
 margin-top: 32px;
 padding: 32px;
}

.aid_img_ph {
 aspect-ratio: 3/2;
 background-color: #d9d9d9;
 height: auto;
 margin: 0;
 width: 100%;
}

/* ==========================================================
   6. Other Courses
========================================================== */
.other_courses_area {
 margin: 60px 0;
 /*4/9公開版対応*/
 margin-top: 20px;
}

.other_courses_title {
 font-size: 18px;
 font-weight: bold;
 margin: 0 0 16px;
}

.other_courses_container {
 background-color: #f7f7f7;
 padding: 18px 12px;
}

.other_course_list {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 list-style: none;
 margin: 0;
 padding: 0;
}

.other_course_list li {
 width: calc(33.333% - 11px);
}

.other_course_card {
 align-items: center;
 display: flex;
 justify-content: space-between;
 background-color: #fff;
 box-sizing: border-box;
 height: 100%;
 padding: 12px;
 text-decoration: none !important;
 transition: box-shadow .3s ease, transform .3s ease;
}

@media (hover: hover) {
 .other_course_card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  transform: translateY(-4px);
 }

 .other_course_card:hover::after {
  transform: translateX(4px);
 }
}

.other_course_card::after {
 background-image: url("/assets/img/common/v2/chevron-right-solid--green.svg");
 background-position: center right;
 background-repeat: no-repeat;
 background-size: 12px auto;
 flex-shrink: 0;
 content: "";
 height: 32px;
 margin-left: 4px;
 transition: transform .3s ease;
 width: 32px;
}

.other_course_card .card_info {
 flex: 1;
 min-width: 0;
}

.other_course_card .card_name {
 align-items: baseline;
 display: flex;
 font-size: 18px;
 font-weight: bold;
 margin: 0 2px 8px 0;
}

.other_course_card .card_name .name_text {
 flex-shrink: 1;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.other_course_card .card_name small {
 flex-shrink: 0;
 font-size: 12px;
 font-weight: normal;
 margin-left: 4px;
}

.other_course_card .course_level_wrap {
 align-items: center;
 display: flex;
 gap: 4px;
 margin-bottom: 0;
}

.other_course_card .level_badge {
 font-size: 12px;
 line-height: 24px;
 margin-right: 4px;
 padding: 0 12px;
 width: auto;
}

/* ==========================================================
   7. Event Table
========================================================== */
.table-container {
 font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
 margin: 20 0;
 overflow-x: auto;
}

.event-table {
 border-collapse: collapse;
 color: #333;
 font-size: 14px;
 line-height: 1.4;
 width: 100%;
}

.event-table th,
.event-table td {
 border: 1px solid #ccc;
 padding: 12px 8px;
 vertical-align: middle;
}

.event-table thead th {
 background: linear-gradient(to bottom, #74a01e, #5c8018);
 border-color: #5c8018;
 color: #fff;
 font-weight: 700;
 text-align: center;
}

.event-table tbody tr:nth-child(even) {
 background-color: #f9f9f9;
}

.event-table td {
 text-align: center;
}

.event-table .text-left {
 text-align: left;
}

.event-table .text-right {
 text-align: right;
}

.event-table .row-total {
 background-color: #eee;
 font-weight: 700;
}

/* ==========================================================
   8. Responsive
========================================================== */
@media screen and (max-width: 1199px) {

 #SubpageTitle.newstyle2026 .el_h {
  font-size: 26px;
 }

 .c_outer-bg-green .outer_col-5 {
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
 }

 .c_outer-bg-green .outer_col-5 a {
  font-size: 12px;
  padding: 12px 4px;
 }

 .course_detail_layout {
  display: flex !important;
  align-items: stretch !important;
  flex-direction: column !important;
  gap: 40px;
  margin-bottom: 20px;
  padding: 0;
  margin-bottom: 0;
  /*4/9公開版対応*/
 }

 .course_sidebar,
 .course_main_content {
  padding-left: 0 !important;
  width: 100% !important;
 }

 .course_sidebar {
  position: static;
  margin: auto;
  /*4/9公開版対応*/
 }

 .course_summary_grid {
  gap: 8px;
 }

 .course_summary_grid .summary_item {
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 16px 4px !important;
  text-align: center;
 }

 .summary_item .icon_circle {
  background-size: 20px auto;
  height: 40px;
  width: 40px;
 }

 .summary_text {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
 }

 .summary_text .summary_label {
  font-size: 10px;
  white-space: nowrap;
 }

 .summary_text .summary_value {
  font-size: 14px;
  font-weight: bold;
 }

 .course_summary_table_wrap {
  box-sizing: border-box;
  margin-right: auto;
  padding: 0;
 }

 .course_map_ph,
 .course_detail_hero .inner,
 .other_courses_container {
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
 }

 .course_map_ph {
  padding: 0;
  width: 100%;
 }

 .course_summary_table th,
 .course_summary_table td {
  display: block;
  box-sizing: border-box;
  padding: 12px 16px;
  width: 100%;
 }

 .course_summary_table th {
  background-color: #f0f0f0;
  border-bottom: none;
  color: #333;
  font-size: 14px;
 }

 .course_summary_table td {
  font-size: 16px;
  font-weight: bold;
 }

 .sidebar_box {
  border-top: none;
  box-sizing: border-box;
  width: 100% !important;
 }

 .sidebar_box .sidebar_title,
 .sidebar_box .course_level_wrap {
  display: none;
 }

 .sp_sticky_header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  background-color: #f7f7f7;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
  padding: 16px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
 }

 .sp_sticky_header.is-stuck {
  margin: 0 -20px;
 }

 .sidebar_title,
 .c_outer .course_level_wrap {
  margin: 0 0 8px;
 }

 .sidebar_related {
  background-color: rgba(255, 255, 255, .95);
  bottom: 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .1);
  box-sizing: border-box;
  left: 0;
  margin-top: 0 !important;
  opacity: 1;
  padding: 16px 32px 24px;
  position: fixed !important;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.25, .8, .25, 1), opacity .4s ease, visibility .4s;
  visibility: visible;
  width: 100% !important;
  z-index: 1000;
 }

 .sidebar_related.is-hidden {
  opacity: 0;
  transform: translateY(100%);
  visibility: hidden;
 }

 .c_outer .course_item {
  width: 100% !important;
 }

 .other_course_list li {
  width: calc(50% - 8px);
 }

 .other_courses_area {
  /*4/9公開版対応*/
  margin-top: 20px;
 }
}

@media screen and (max-width: 768px) {
 #SubpageTitle .inner {
  height: 140px;
 }

 #SubpageTitle.newstyle2026 .title_wrap {
  padding: 0 20px;
 }

 #SubpageTitle.newstyle2026 .title_wrap::after {
  left: 20px;
 }

 .newstyle2026 .bike_icon {
  right: 20px;
  width: 60px;
 }

 .course_summary_grid .summary_item {
  gap: 12px;
  padding: 16px 12px !important;
 }

 .summary_item .icon_circle {
  background-size: 20px auto;
  height: 40px;
  width: 40px;
 }

 .c_outer .course_item {
  background-position: center 30%;
  padding: 16px !important;
 }

 .c_outer .course_stats {
  margin: auto -16px 16px;
  padding: 12px 16px;
 }

 .c_outer .course_info_text {
  margin-bottom: 16px;
 }

 .summary_label {
  font-size: 12px;
 }

 .summary_value {
  font-size: 16px;
 }

 .other_course_list li {
  width: 100%;
 }

 .course_main_content {
  /*4/9公開版対応*/
  display: none;
 }

 .event-table,
 .event-table thead,
 .event-table tbody,
 .event-table tr,
 .event-table th,
 .event-table td {
  display: block;
  width: 100%;
 }

 .event-table thead {
  display: none;
 }

 .event-table tr {
  border: 1px solid #ccc;
  margin-bottom: 24px;
  padding: 8px 0;
 }

 .event-table td {
  align-items: center;
  border: none;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  text-align: right !important;
 }

 .event-table td::before {
  color: #5c8018;
  content: attr(data-label);
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
 }

 .event-table td:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
 }

 .event-table .text-left,
 .event-table .text-right {
  text-align: center;
 }

 .event-table .row-total {
  display: none;
 }

 footer.footer-v2 .outer_middle .outer-col4 ul .el_link {
  padding-left: 30px;
  padding-right: 30px;
 }
}