/* ============================================ Tour de Tohoku 2026 / Course theme 各HTMLの #page_guide--details / コースボタンに course--xxxx を1つ付けるだけでコース色を切り替える ============================================ */
:root {
 --food-color: #ef6b45;
 --guide-green: #8fc31f;
 --next-color: #08afd0;
 --warning-color: #e50012;
}

.course--kesennuma-ooyakaigan {
 --course-color: #19963f;
 --point-nav-color: #147a34;
 --point-nav-soft: #eef8f1;
}

.course--minamisanriku {
 --course-color: #741c22;
 --point-nav-color: #741c22;
 --point-nav-soft: #f8eeee;
}

.course--kitakami {
 --course-color: #c83f91;
 --point-nav-color: #b93382;
 --point-nav-soft: #fbf0f7;
}

.course--kesennuma-oneway {
 --course-color: #f18a00;
 --point-nav-color: #b65b00;
 --point-nav-soft: #fff5e8;
}

.course--higashimatsushima {
 --course-color: #31a1da;
 --point-nav-color: #147da8;
 --point-nav-soft: #eef8fc;
}

.course--onagawa-ogatsu {
 --course-color: #173a83;
 --point-nav-color: #173a83;
 --point-nav-soft: #eef1f8;
}

/* TOP：6コースボタン */
#page_guide--index #NavGuide .course-btn {
 background-color: var(--course-color);
}

/* 下層：コース切替メニュー */
#page_guide--details #Info .outer_submenu .course-menu-link {
 background-color: var(--course-color);
 display: block;
 padding-top: 14px;
 padding-right: calc(100 / 375 * 16 * 1vw);
 padding-bottom: 14px;
 padding-left: calc(100 / 375 * 16 * 1vw);
}

#page_guide--details #Info .outer_submenu .course-menu-link:hover {
 filter: brightness(1.08);
}

#page_guide--details #Info .outer_submenu .course-menu-link .el_h {
 color: #fff;
 font-size: 20px;
 font-weight: 500;
 padding-right: 30px;
 padding-left: 30px;
 position: relative;
}

/* 遷移先コース：右向き矢印を右端に配置 */
#page_guide--details #Info .outer_submenu .course-menu-link .el_h .el_i {
 margin-left: 0;
 position: absolute;
 top: 50%;
 right: 0;
 transform: translateY(-50%);
}

@media (min-width: 768px) {
 #page_guide--details #Info .outer_submenu .course-menu-link {
  padding-right: 2rem;
  padding-left: 2rem;
 }

 #page_guide--details #Info .outer_submenu .course-menu-link .el_h {
  text-align: center;
 }
}

/* 現在コース：閉じている時は下、開いている時は上 */
#page_guide--details #Info .outer_top .el_h .el_i {
 display: inline-block;
 margin-left: 6px;
 transition: transform .2s ease;
}

#page_guide--details #Info .outer_top .el_h .el_i.is-open {
 transform: rotate(180deg);
}

/* 下層：コースカラー共通適用 */
#page_guide--details.course-page #Info .outer_top {
 background-color: var(--course-color);
}

#page_guide--details.course-page #Info .outer_bottom {
 border-color: var(--course-color);
}

#page_guide--details.course-page #Info .outer_bottom .el_dl>dt {
 background-color: var(--course-color);
}

#page_guide--details.course-page #Info .outer_bottom .el_dl>dd {
 color: var(--course-color);
}

#page_guide--details.course-page #Start .outer_col2 .col1 .outer_as {
 background-color: var(--course-color);
}

#page_guide--details.course-page #Start .outer_col2 .col1 .outer_as .el_name {
 color: var(--course-color);
}

#page_guide--details.course-page #Start .outer_col2 .col1 .outer_middle .outer_col2 .col1 .outer_distance {
 border-color: var(--course-color);
}

#page_guide--details.course-page #Start .outer_col2 .col1 .outer_middle .outer_col2 .col1 .el_distance {
 color: var(--course-color);
}

#page_guide--details.course-page #Start .outer_col2 .col1 .outer_middle .outer_col2 .col1 .el_modalicon {
 background-color: var(--course-color);
}

/* 縦線は色別SVGを持たず、course-colorから描画 */
#page_guide--details.course-page #Start .outer_col2 .col1 .outer_middle .outer_col2 .col1 .el_bg--line,
#page_guide--details.course-page #Example .outer_col2--wg5854ei .col2--xi1159ec .outer_col1--sy0940ky .outer_middle--tt3723rz .outer_col2--fh3855zj .col1 .el_bg--line,
#page_guide--details.course-page .outer_modal--example .el_bg--line {
 background-image: linear-gradient(to right,
  transparent calc(50% - 4px),
  var(--course-color) calc(50% - 4px),
  var(--course-color) calc(50% + 4px),
  transparent calc(50% + 4px));
 background-position: center;
 background-repeat: no-repeat;
}

/* 下向き矢印もcourse-colorから描画 */
#page_guide--details.course-page #Start .el_img--arrow,
#page_guide--details.course-page #Example .outer_col2--wg5854ei .col2--xi1159ec .outer_col1--sy0940ky .outer_middle--tt3723rz .outer_col2--fh3855zj .col1 .el_img--arrow,
#page_guide--details.course-page .outer_modal--example .el_img--arrow {
 background-color: var(--course-color);
 background-image: none;
 clip-path: polygon(0 0, 100% 0, 50% 100%);
 height: 17px;
 margin-right: auto;
 margin-left: auto;
 width: 33px;
}

/* 凡例内のコース色サンプル */
#page_guide--details.course-page #Example .outer_distance,
#page_guide--details.course-page .outer_modal--example .outer_distance--bz4049pf {
 border-color: var(--course-color);
}

#page_guide--details.course-page #Example .el_distance,
#page_guide--details.course-page .outer_modal--example .el_distance {
 color: var(--course-color);
}

#page_guide--details.course-page #Example .el_modalicon,
#page_guide--details.course-page .outer_modal--example .el_modalicon {
 background-color: var(--course-color);
}

#page_guide--details.course-page #Example .outer_as,
#page_guide--details.course-page .outer_modal--example .outer_as--gn3441om {
 background-color: var(--course-color);
}

#page_guide--details.course-page #Example .outer_as .el_label,
#page_guide--details.course-page .outer_modal--example .outer_as--gn3441om .el_label {
 color: var(--course-color);
}

/* 凡例 */
/* 外枠・見出しは全コース共通 */
#page_guide--details.course-page #Example .outer_col1--xe4137 {
 border-color: var(--guide-green);
}

#page_guide--details.course-page #Example .outer_col1--xe4137>.el_h {
 background-color: var(--guide-green);
}

/* 距離サンプル */
#page_guide--details.course-page #Example .outer_col2--wg5854ei .col2--xi1159ec .outer_col1--sy0940ky .outer_middle--tt3723rz .outer_col2--fh3855zj .col1 .outer_distance--bz4049pf {
 border-color: var(--course-color);
}

#page_guide--details.course-page #Example .outer_col2--wg5854ei .col2--xi1159ec .outer_col1--sy0940ky .outer_middle--tt3723rz .outer_col2--fh3855zj .col1 .el_distance {
 color: var(--course-color);
}

#page_guide--details.course-page #Example .outer_col2--wg5854ei .col2--xi1159ec .outer_col1--sy0940ky .outer_middle--tt3723rz .outer_col2--fh3855zj .col1 .el_modalicon {
 background-color: var(--course-color);
}

/* ASサンプル */
#page_guide--details.course-page #Example .outer_col2--wg5854ei .col2--xi1159ec .outer_col1--sy0940ky .outer_as--gn3441om {
 background-color: var(--course-color);
}

#page_guide--details.course-page #Example .outer_col2--wg5854ei .col2--xi1159ec .outer_col1--sy0940ky .outer_as--gn3441om .el_label {
 color: var(--course-color);
}

/* モーダル外枠・見出しも全コース共通 */
#page_guide--details.course-page .outer_modal--example .el_modal {
 border-color: var(--guide-green);
}

#page_guide--details.course-page .outer_modal--example .el_modal>.inner>.el_h {
 background-color: var(--guide-green);
}