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


/*TEST用*/
div.test { display:none;}
body.test div.test { display:block; }


/*校正用追加 ヘッダメニュー用*/
body.test {}



/* ------ html & body */
html { height: 100%; background-position: center; }
body { /* min-width: 1200px; *//* background: #f0f0f0; */ height: 100%; width: 100%; /* overflow-x: hidden; */ box-sizing: border-box; }
body:before { /* position: fixed; content: ""; top: 0; left: 0; height: 100%; width: 4rem; background: #ffec00; z-index: -1; */ }
body:after { /* position: fixed; content: ""; top: 0; right: 0; height: 100%; width: 4rem; background: #ffec00; z-index: -1; */ }
div.wrapper { padding-top: 8rem; }
div.contents-wrapper { box-sizing: border-box; overflow: hidden; /* margin-bottom: 6rem; */ }
div.inner { /* width: 1000px; */ width: 100%; max-width: 120rem; margin-left: auto; margin-right: auto; }
ol { padding-left:2rem;}


/* ------------------------------------------------------------------------------------------------------------------------------ header */
header { width: 100%; position: fixed; z-index: 9999; background: #fff; /* border-bottom: 2px solid #000; *//* position: relative; */ height: 8rem; top: 0; }
header.opacity { background-color: rgba(255, 255, 255, 0.75); transition: 0.1s all; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }
header.opacity:before { width: 100%; background: #fff; height: 0; position: absolute; content: ""; top: 0; left: 0; transition: 0.1s all; z-index: 0; }
header:hover.opacity { opacity: 1; }
header:hover.opacity:before { /* height: 130px; */ height: 8rem; }

body.customize-support header { top:32px; }

/* header:hover.opacity nav ul:before { width: 0; } */
header > div.inner { max-height: 8rem; position:relative; }
header ul.utility { text-align: right; float: right; display:flex; flex-flow:row wrap; align-items:center;  }
header ul.utility li { display: inline-block; padding:0.5rem 0; }
header ul.utility li a { font-size: 1.4rem; position: relative; padding:0 0.7rem; color: #000; text-decoration: none; }
header ul.utility li a:hover { color: #a3835f; }
header ul.utility li a::before { }
header ul.utility li a span { color: #a3835f; vertical-align: middle; font-size:2.4rem; padding-right: 0.25rem; margin-top:-0.25rem;}
header ul.utility li a img { width: 2.2rem; }
header ul.utility li a.sns-icon { display:block; padding:0 0.7rem; }
header ul.utility li.english { padding:0 0.7rem;}
header ul.utility li.english a { background: #000; color: #fff; display:block; padding-left: 2rem; padding-right: 2rem; border-radius: 1000rem; position: relative; border: 0.125rem solid #000; transition: 0.25s all; }

header ul.utility li.english a:hover { color: #000; background: #fff; border: 0.125rem solid #000; }
header div.logo { z-index: 1000; width: 22.5vw; max-width: 28rem; float: left; transition: 0.25s all; }
header div.logo a img { width: 22.5vw; max-width: 28rem; transition: 0.25s all; }

/* --------------------------------------------------------------------------- body.top */
body.top header div.logo { width: 22.5vw; max-width: 28rem; transition: 0.25s all; }
body.top header div.logo a img { width: 22.5vw; max-width: 28rem; transition: 0.25s all; }
body.top header.opacity div.logo, body.top header.opacity div.logo a img { width: 15.0vw; max-width: 15rem; height: auto; transition: 0.25s all; }

/* --------------------------------------------------------------------------- */
header div.logo a { display: block; text-decoration: none; position: relative; transition: 0.25s all; }
header div.logo a img { width: 15.0vw; max-width: 28rem; display: block; position: absolute; top: 0.6rem; left: 1rem; transition: 0.25s all; }
header.opacity div.logo, header.opacity div.logo a img { width: 15.0vw; max-width: 15rem; height: auto; }

/* ------------------------------------------------------------------------------------------------------------------------------- nav */
header div.menu-button { display: none; }
nav { /* background: #ffffff; */ position: relative; height: 100%; float: right; /* width: calc(120rem - 30rem); */ }
nav ul { /* display: table; */ text-align: center; width: 100%; height: 100%; font-size: 0; white-space: nowrap; display: flex; }
nav ul li { position: relative; display: block; height: 6rem; vertical-align: middle; }
nav ul > li::after { position: absolute; z-index: 9999; bottom: 0; left: 0; width: 0; height: 0.20rem; content: ''; transition: all .25s ease-in-out; background: #a3835f; }
nav ul > li:hover::after { width: 100%; }
nav ul li a { font-size: clamp(1.2rem, 1.2vw, 1.6rem); font-weight: bold; position: relative; display: block; box-sizing: border-box; width: 100%; padding: 1rem 1.25rem; text-align: center; color: #333; text-decoration: none; letter-spacing: 1px; line-height: 1.25; top: 50%; transform: translateY(-50%); /* top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); */ }
nav ul li:last-child a { /* padding-right: 0; */ }
nav ul li.current a { color: #003e6c; }
nav ul li.current:after { position: absolute; content: ""; bottom: 0; width: 25%; height: 3px; left: 50%; background: #a3835f; transform: translate(-50%, 0); }
nav ul li a:hover { color: #a3835f; }
nav ul li a::after { /* position: absolute; top: 1.2em; right: 0; width: 1px; height: 15px; content: ''; background: #e9e9e9; */ }
nav ul li:first-child a::before { /* position: absolute; top: 1.2em; left: 0; width: 1px; height: 15px;  content: ''; background: #e9e9e9; */ }

/* nav ul li a:before { position: absolute; bottom: -0.25rem; width: 0; left: 50%; transform: translateX(-50%); content: ""; height: 3px; background: #a3835f; transition: 0.25s all; }
nav ul li a:hover:before { width: 80%; } */

.hm { height:auto; position:absolute; top:4rem; right:0; z-index:10000; }
.hm ul { text-align: center; display: flex; }
.hm > ul > li { position: relative; display: block; height: 4rem; vertical-align: middle; }
.hm > ul > li::after { position: absolute; z-index: 9999; bottom: 0; left: 0; width: 0; height: 0.20rem; content: ''; transition: all .25s ease-in-out; background: #a3835f; }
.hm > ul > li:hover::after { width: 100%; }
.hm ul li a { font-size: clamp(1.2rem, 1.2vw, 1.6rem); font-weight: bold; position: relative; display: block; box-sizing: border-box; width: 100%; padding: 1rem 1.25rem; text-align: center; color: #333; text-decoration: none; letter-spacing: 1px; line-height: 1.25; }
.hm ul li:last-child a {}
.hm ul li.current a { color: #003e6c; }
.hm ul li.current:after { position: absolute; content: ""; bottom: 0; width: 25%; height: 3px; left: 50%; background: #a3835f; transform: translate(-50%, 0); }
.hm ul li a:hover { color: #a3835f; }
.hm ul li a::after { }
.hm ul li:first-child a::before {}

.hm li .sub { visibility: hidden; opacity: 0; position:absolute; top:calc(100% - 0.5rem); left:calc(50% - 12.5rem); width:25rem; z-index:100000; box-shadow:0 1rem 2rem rgba(0,0,0,0.07); transition:0.25s; }
.hm li.hm_event .sub { left:calc(50% - 8rem); width:18rem; }
.hm li:hover .sub { visibility: visible; opacity:1; top:100%; }
.hm li .sub > ul { display:flex; flex-flow:column wrap; margin:0; padding:0 1.25rem; text-align: width:100%; box-shadow:0 0 0.25rem -0.75rem rgba(34,34,34,0.05); list-style: none; border: 1px solid rgba(0,0,0,0.5); background: rgba(255,255,255,1);  }
.hm li .sub ul li { width: 100%; margin: 0; padding:0; }
.hm li .sub ul li a { display: block; width:100%; padding:1rem 1.5rem 1rem 0; text-align: left; text-decoration: none; position:relative; line-height: 1.5; border-bottom:1px solid rgba(0,0,0,0.2); box-sizing:border-box; }
.hm li .sub ul li a:after { position: absolute; top:calc(50% - 0.4rem); right:0; display: block; width: 0.8rem; height: 0.8rem; content: ''; transition: all .2s ease-in-out;  transform: rotate(45deg); border-top: 0.1rem solid #000; border-right: 0.1rem solid #000; background: none; }

.hm li .sub ul li:last-of-type a { border-bottom:1px solid rgba(0,0,0,0); }
.hm li .sub ul li a:hover { background-color:rgba(255,255,255,0.5); color:#a3835f; }
.hm li .sub ul li ul { list-style: none; padding-left:1.25rem; margin-bottom:0.5rem; }
.hm li .sub ul li ul li a::before { content:""; display: block; position: absolute; top:50%; left:-0.5rem; width: 1rem; border-top: 1px solid rgba(34,34,34,0.2); }

.hm li.m_search, .hm li.m_lang, .hm li.m_sug { display: none; }
.hm > ul > li.sp { display: none; }

.mean-container .mean-nav > ul > li.hm_cr > a:after,
.mean-container .mean-nav > ul > li.hm_ct > a:after,
.mean-container .mean-nav ul li ul li a:after
{ position: absolute; top:calc(50% - 0.5rem); right: 18px; left: inherit; display: block; width: 1rem; height: 1rem; content: '';transition: all .2s ease-in-out; transform:rotate(45deg); border-top: 1px solid #000; border-right: 1px solid #000; background:none; }

/*ヘッダメニューのサイクルトレイン公開まで非表示*/
/*.hm ul li.hm_ct,
.mean-container .mean-nav > ul > li.hm_ct { display:none; }*/



/* ------------------------------------------------------------------------------------------------------------------------------- */
section.main-visual { position: relative; /* padding-top: 56.25%;  max-height: 67.6rem; *//* margin-top: 3.5rem; *//* border-radius: 0.5rem; */ overflow: hidden; padding: 0; }
section.main-visual div.inner { max-width: 100%; }
section.main-visual div.main-visual-copy { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 2000; /* background: rgba(255, 255, 255, 1.0); */ width: 50vw; max-width: 50rem; /* border: 2px solid #000; */ box-sizing: border-box; }
section.main-visual div.main-visual-copy img { max-width: 30rem; width: 30vw; margin-left: auto; margin-right: auto; display: block; padding-top: 10%; padding-bottom: 10%; }

/* --------------------------------------------- */
section.main-visual div.inner {}
section.main-visual div.main-visual-slider { /* position: absolute; top: 0; left: 50%; transform: translateX(-50%);  */ margin-left: auto; margin-right: auto; /* max-width: 120rem; */ width: calc(100vw - 20vw); max-width: 135rem; z-index: 1000; background: none; height: calc(100vh - 8rem); max-height: 67.596rem; }
section.main-visual div.main-visual-slider div#slider { height: calc(100vh - 8rem); max-height: 67.596rem; background: none; }
section.main-visual div.main-visual-slider div#slider ul.slides {}
section.main-visual div.main-visual-slider div#slider ul.slides li { position: relative; padding-top: 56.33%; }
section.main-visual div.main-visual-slider div#slider img { position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(0); /* width: auto !important;  max-width: auto !important; */ height: calc(100vh - 8rem); max-height: 67.596rem; z-index: 1000; width: auto !important; max-width: auto !important; }

/* --------------------------------------------- */
/* スライド の コピー */
section.main-visual div.main-visual-slider div#slider ul.slides li div.slide-copy { position: absolute; top: 17.5%; right: 0; z-index: 2000; text-align: right; }
section.main-visual div.main-visual-slider div#slider ul.slides li div.slide-copy div.main-copy { width: 0; overflow: hidden; transition: 1s all; letter-spacing: 2px; }
section.main-visual div.main-visual-slider div#slider ul.slides li div.slide-copy div.sub-copy { width: 0; overflow: hidden; transition: 1s all; letter-spacing: 2px; }
section.main-visual div.main-visual-slider div#slider ul.slides li.flex-active-slide div.slide-copy div.main-copy { width: 100%; font-weight: bold; }
section.main-visual div.main-visual-slider div#slider ul.slides li.flex-active-slide div.slide-copy div.sub-copy { width: 100%; }
section.main-visual div.main-visual-slider div#slider ul.slides li div.slide-copy div.main-copy span { font-size: 4rem; /* font-size: 2vw; */ white-space: nowrap; display: inline-block; background: rgba(255, 255, 255, 0.85); padding-left: 1rem; padding-right: 1rem; }

/* 色 */
/* section.main-visual div.main-visual-slider div#slider ul.slides li:nth-child(1) div.slide-copy div.main-copy span { background: #fff; color: #33bcfe; }
section.main-visual div.main-visual-slider div#slider ul.slides li:nth-child(2) div.slide-copy div.main-copy span { background: #5acfde; color: #192444; }
section.main-visual div.main-visual-slider div#slider ul.slides li:nth-child(3) div.slide-copy div.main-copy span { background: #9dacd2; color: #eee; }
section.main-visual div.main-visual-slider div#slider ul.slides li:nth-child(4) div.slide-copy div.main-copy span { background: #1c869d; color: #192444; }
section.main-visual div.main-visual-slider div#slider ul.slides li:nth-child(5) div.slide-copy div.main-copy span { background: #5acfde; color: #192444; } */
section.main-visual div.main-visual-slider div#slider ul.slides li div.slide-copy div.sub-copy span { font-size: 2.4rem; white-space: nowrap; display: inline-block; background: rgba(255, 255, 255, 0.85); /* color: #997c61; */
 color: #000; padding-left: 1rem; padding-right: 1rem; }

/* --------------------------------------------- */
/* section.main-visual div.main-visual-visual { position: absolute; top: 0; left: 0; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; z-index: 1000; }
section.main-visual div.main-visual-visual img { border-radius: 0.5rem; overflow: hidden; } */
/* section.main-visual div.main-video { width: 100%; padding-top: 56.25%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; max-width: 100%; z-index: 0; }
section.main-visual div.main-video video { ; }
section.main-visual div.main-video video { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; max-width: 100%; z-index: 0} */
section.main-visual div.scroll-arrow { width: 6rem; height: 6rem; box-sizing: border-box; border-radius: 100rem; display: block; left: 2rem; position: absolute; bottom: 0; /* */
 z-index: 1000; transform: translateY(-100%); /* transform: translateX(-50%); *//* background: #fff; *//* border: 1px solid #8e8866; */ background: #f6ec54; }

/* section.main-visual div.scroll-arrow { opacity: 0; }
section.main-visual div.scroll-arrow { opacity: 1; } */
section.main-visual div.scroll-arrow:after { width: 1.5rem; height: 1.5rem; border-right: 1px solid #5354bc; border-top: 1px solid #5354bc; content: ""; left: 50%; top: 70%; /* */
 display: block; position: absolute; transform: translateX(-50%) translateY(-50%) rotate(135deg); transition: all 0.2s ease-in-out 0s; }
section.main-visual div.scroll-arrow:before { /* width: 50px; height: 50px; display: block; left: 50%; position: absolute; content: ""; top: 50%; z-index: 100000; transform: translateX(-50%) translateY(-50%); border: 1px solid #1e2e53; box-sizing: border-box; border-radius: 1000px; z-index: 0; animation-iteration-count: infinite; animation-duration: 2s; animation-fill-mode: both; animation-name: circle; */ }
section.main-visual div.scroll-arrow span { position: relative; display: block; width: 100%; }
section.main-visual div.scroll-arrow span:after { width: 1px; position: absolute; content: ""; height: 30px; background: #5354bc; display: block; left: 50%; transform: translateX(-50%); bottom: -4rem; animation-iteration-count: infinite; animation-duration: 2s; animation-fill-mode: both; animation-name: slideInDown; }
section.main-visual div.scroll-arrow span:before { content: "SCROll"; letter-spacing: 1px; font-size: 1.0rem; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); /* rotate(-90deg); */ color: #5354bc; white-space: nowrap; z-index: 1; /* font-weight: bold; */ font-family: 'Oswald', sans-serif; }

/* ------------------------------------------ -- */
@keyframes slideInDown { 
 0% { height: 1rem; transform: translateX(-50%) translateY(-50%); visibility: visible; opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; }
 100% { height: 0; transform: translateX(-50%) translateY(0); opacity: 0; }
}

.slideInDown { animation-name: slideInDown; }

/* ------------------------------------------------------------------------------------------------------------------------------- */
div.top-note { text-align: center; max-width: 60%; margin-left: auto; margin-right: auto; border: 0.2rem solid #000; line-height: 1.5; padding-top: 2rem; padding-bottom: 2rem; padding-left: 2rem; padding-right: 2rem; box-sizing: border-box; }
div.top-note div.heading { font-size: 2.4rem; font-weight: bold; margin-bottom: 1.5rem; letter-spacing: 0.125rem; }
section { padding-top: 6rem; padding-bottom: 6rem; }
div.title { font-size: 3rem; margin-bottom: 4rem; font-weight: bold; text-align: center; }
div.title div.en { font-size: 6rem; line-height: 1.25; text-align: center; }
div.title div.ja { font-size: 1.8rem; letter-spacing: 4px; }
section div.link { position: relative; }
section div.link a { display: block; margin-left: auto; margin-right: auto; position: relative; background: #000; max-width: 30%; color: #fff; padding: 1rem; box-sizing: border-box; text-align: center; text-decoration: none; border: 1px solid #000; transform: 0.25s all; }
section div.link a:after { position: absolute; top: 50%; right: 1rem; display: block; width: 1.0rem; height: 1.0rem; content: ''; transition: all .2s ease-in-out; transform: translateY(-50%) rotate(45deg);  border-top: 1px solid #fff; border-right: 1px solid #fff; }
section div.link a:before { position: absolute; top: 50%; right: 0.8rem; width: 2rem; height: 0.1rem; content: ""; background: #fff; transform: translateY(-50%); }
section div.link a span { position: relative; display: block; transform: 0.25s all; }
section div.link a span:after { border: 1px solid #000; /* background: #fff; */ margin-left: -1rem; margin-right: -1rem; margin-top: -1rem; margin-bottom: -1rem; padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; width: 100%; height: 100%; pointer-events: none; position: absolute; content: ""; top: 0.5rem; left: 0.5rem; z-index: -1; background: #fff; transform: 0.25s all; }

/* hover */
section div.link a:hover { background: #fff; color: #000; border: 1px solid #000; }
section div.link a:hover:after { right: 0.5rem; border-top: 1px solid #000; border-right: 1px solid #000; }
section div.link a:hover:before { right: 0.3rem; background: #000; width: 3rem; }
section div.link a:hover span:after { border: 1px solid #000; background: #000; }

/* ------------------------------------------------------------------------------------------------------------------------------- */
section.lead { position: relative; padding-top: 8rem; /* background: #23b7fe; */ z-index: -1; }
section.lead div.inner { position: relative; z-index: 1; /* mix-blend-mode: overlay; */ }

/* deco */
/* ブルー */
section.lead:before { position: absolute; content: ""; width: 2.5rem; height: 100%; top: 0; right: 8vw; transform: translateY(-50%) skewX(-30deg); /* background: #6ed1ff; *//* background: #24b9ff; */ /*background: #00bcf3;*//* background: #b307c7; */
 opacity: 1; pointer-events: none; transition: 0.5s all; z-index: -1; /* opacity: 0.80; *//* mix-blend-mode: overlay; */ /* border-left: 1.5rem solid #ccc; */ background: linear-gradient(to bottom, #00bcf3 100%); }
/* オレンジ */
section.lead:after { position: absolute; content: ""; width: 2.5rem; height: 100%; top: 0; left: 8vw; transform: translateY(50%) skewX(-30deg); /* background: #ee8651; *//* background: #f06722; */ background: #eb2f56; pointer-events: none; transition: 0.5s all; z-index: -1; opacity: 0.80; /* mix-blend-mode: overlay; */ }
/* グリーン */
section.lead div.inner:before { position: absolute; content: ""; width: 2.5rem; height: 200%; top: 0; right: -12vw; transform: translateY(-50%) skewX(-30deg); /* background: #5dc9d6; */ background: #67f1c0; pointer-events: none; transition: 0.5s all; z-index: -1; opacity: 0.80; /* mix-blend-mode: overlay; */ }
/* 黄色 */
section.lead div.inner:after { position: absolute; content: ""; width: 2.5rem; height: 200%; top: 0; left: 0; transform: translateY(-50%) skewX(-30deg); /* background: #fde159; */ /* background: #fdd823; */ background: #f6ec54; opacity: 1; pointer-events: none; transition: 0.5s all; z-index: -1; /* opacity: 0.80; */ /* mix-blend-mode: overlay; */ }

/* */
section.lead div.lead-copy-wrap { text-align: center; }
section.lead div.lead-copy { font-size: 5.0rem; font-weight: bold; margin-bottom: 4rem; letter-spacing: 0.5rem; /* color: #23b7fe; */ color: #000; }
section.lead div.lead-copy span { font-size: 4.2rem; }
section.lead div.lead-en { display: inline-block; background: #ddd364; /* background: #4748a1; */ background: #a7a7a7; color: #fff; font-family: "Oswald", sans-serif; padding: 0.25rem 1rem; margin-bottom: 4rem; }
section.lead div.lead-description { font-size: 1.6rem; font-weight: bold; line-height: 1.75; letter-spacing: 0.5rem; opacity: 0.825; color: #000; }

/* ------------------------------------------------------------------------------------------------------------------------------- */
/* */
div.root-list { position: relative; z-index: 2; }
div.root-list ul li { overflow: hidden; width: 30.33%; margin-right: 4.5%; float: left; margin-bottom: 6rem; position: relative; box-sizing: border-box; /* border: 1px solid #000; */ }
body.top div.root-list ul li:nth-child(n+7) { display: none; }
div.root-list ul li div.number { width: 4rem; height: 4rem; position: absolute; z-index: 1; background: #000; }
div.root-list ul li div.number span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: "Oswald", sans-serif; font-size: 2rem; color: #fff; }
div.root-list ul li:nth-child(3n) { margin-right: 0; }
div.root-list ul li a { text-decoration: none; }

/* */
/* サムネイル け っ て い ば ん */
div.root-list ul li a div.thumbnail { overflow: hidden; width: 100%; margin-bottom: 1.5rem; }
div.root-list ul li a div.thumbnail span { display: block; width: 100%; padding-top: 75%; position: relative; background: #f8f8f8; }
div.root-list ul li a div.thumbnail span img { /* max-height: 100%; */ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; }
div.root-list ul li a:hover div.thumbnail span img { opacity: 0.75; /* max-height: 100%; */ }
div.root-list ul li div.course-name { font-size: 2.0rem; margin-bottom: 1.5rem; font-weight: bold; }
div.root-list ul li div.course-comment { margin-bottom: 1.5rem; }
div.root-list ul li.course-01 div.course-name { border-bottom: 0.2rem solid #880e4f; }
div.root-list ul li.course-02 div.course-name { border-bottom: 0.2rem solid #a62715; }
div.root-list ul li.course-03 div.course-name { border-bottom: 0.2rem solid #e65000; }
div.root-list ul li.course-04 div.course-name { border-bottom: 0.2rem solid #f9a825; }
div.root-list ul li.course-05 div.course-name { border-bottom: 0.2rem solid #ffd602; }
div.root-list ul li.course-06 div.course-name { border-bottom: 0.2rem solid #817717; }
div.root-list ul li.course-07 div.course-name { border-bottom: 0.2rem solid #558b2f; }
div.root-list ul li.course-08 div.course-name { border-bottom: 0.2rem solid #087137; }
div.root-list ul li.course-09 div.course-name { border-bottom: 0.2rem solid #006063; }
div.root-list ul li.course-10 div.course-name { border-bottom: 0.2rem solid #01579b; }
div.root-list ul li.course-11 div.course-name { border-bottom: 0.2rem solid #1a227e; }
div.root-list ul li.course-12 div.course-name { border-bottom: 0.2rem solid #673bb7; }
div.root-list ul li.course-13 div.course-name { border-bottom: 0.2rem solid #4e342f; }
div.root-list ul li.course-14 div.course-name { border-bottom: 0.2rem solid #795548; }
div.root-list ul li.course-15 div.course-name { border-bottom: 0.2rem solid #f48fb1; }
div.root-list ul li.course-16 div.course-name { border-bottom: 0.2rem solid #eda29b; }
div.root-list ul li.course-17 div.course-name { border-bottom: 0.2rem solid #ffcc80; }
div.root-list ul li.course-18 div.course-name { border-bottom: 0.2rem solid #ea3323; }

/* ---------------------------------------------------- 共通 */
div.course-information { /* padding: 1.5rem; */ }
div.course-information div.course-data { clear: both; overflow: hidden; margin-bottom: 0.25rem; white-space: nowrap; color: #000; }
div.course-information div.course-data > div { float: left; }
div.course-information div.course-data > div.class { width: 20.00%; position: relative; }
div.course-information div.course-data div.class {}
div.course-information div.course-data div.class span.class { font-size: 1.4rem; background: #f0f0f0; padding-left: 1rem; padding-right: 0.5rem; height: 2rem; margin-right: 1rem; display: inline-block; line-height: 1.35; margin-left: 1rem; border-radius: 0.25rem; position: relative; top: 0.5rem; left: inherit; transform: none; }

/* */
div.details-course-information div.course-information div.course-data div.class span.class { position: absolute; top: inherit; bottom: 1rem; transform: translateY(0);font-size: 2rem; height: 3rem; padding-left: 1.5rem; left: 0.5rem; }
div.details-course-information div.course-information div.course-data div.class span.class::before { width: 21px; height: 21px; }

/* ------------------------------------------------------- 初級者 */
div.course-information div.course-data div.class span.class.beginner:after { background: #fff; width: 5px; height: 5px; content: ""; position: absolute; transform: translateX(0) translateY(-50%); left: -0.20rem; top: 50%; border-radius: 100rem; }
div.course-information div.course-data div.class span.class.beginner { background: #006229; color: #fff; }
div.course-information div.course-data div.class span.class.beginner:before { background: #006229; width: 15.5px; height: 15.5px; content: ""; position: absolute; transform: translateX(-50%) translateY(-50%) rotate(-45deg); left: 0.1rem; top: 50%; border-radius: 0.25rem; }

/* ------------------------------------------------------- 中級者 */
div.course-information div.course-data div.class span.class.intermediate:after { background: #fff; width: 5px; height: 5px; content: ""; position: absolute; transform: translateX(0) translateY(-50%); left: -0.20rem; top: 50%; border-radius: 100rem; }
div.course-information div.course-data div.class span.class.intermediate { background: #05258a; color: #fff; }
div.course-information div.course-data div.class span.class.intermediate:before { background: #05258a; width: 15.5px; height: 15.5px; content: ""; position: absolute; transform: translateX(-50%) translateY(-50%) rotate(-45deg); left: 0.1rem; top: 50%; border-radius: 0.25rem; }

/* ------------------------------------------------------- 上級者 */
div.course-information div.course-data div.class span.class.advanced:after { background: #fff; width: 5px; height: 5px; content: ""; position: absolute; transform: translateX(0) translateY(-50%); left: -0.20rem; top: 50%; border-radius: 100rem; }
div.course-information div.course-data div.class span.class.advanced { background: #da0000; color: #fff; }
div.course-information div.course-data div.class span.class.advanced:before { background: #da0000; width: 15.5px; height: 15.5px; content: ""; position: absolute; transform: translateX(-50%) translateY(-50%) rotate(-45deg);  left: 0.1rem; top: 50%; border-radius: 0.25rem; }

/* ------------------------------------------------------- @end */
div.course-information div.course-data div span.label { font-size: 1.2rem; background: #000; color: #fff; padding-left: 0.5rem; padding-right: 0.5rem; margin-right: 1rem; display: inline-block; position: relative; top: -2px; }
div.course-information div.course-data div.distance { font-family: "Oswald", sans-serif; font-size: 2rem; width: 40%; text-align: right; }
div.course-information div.course-data div.elevation { font-family: "Oswald", sans-serif; font-size: 2rem; width: 40%; text-align: right; }
div.course-information div.course-data div.distance span.unit, div.course-information div.course-data div.elevation span.unit { font-size: 1.4rem; }
div.course-information { font-size: 1.4rem; }
div.course-information table.start-goal { border-top: 1px solid #ccc; width: 100%; border-collapse: collapse; font-size: 1.4rem; /* color: #ccc; */ }
div.course-information table.start-goal th { width: 30%; font-family: "Oswald", sans-serif; white-space: nowrap; background: #f6f6f6; }
div.course-information table.start-goal th, div.course-information table.start-goal td { border-bottom: 1px solid #ccc; vertical-align: middle; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
div.course-information table.start-goal td { text-align: right; white-space: nowrap; }
div.course-information table.start-goal th span, div.course-information table.start-goal td span { vertical-align: middle; font-size: 1.4rem; padding: 0.1rem; position: relative; top: -1.5px; background: #000; color: #fff; border-radius: 0.25rem; }
div.course-information table.start-goal tr:last-child td img { max-width: 10rem !important; }
div.course-information table.start-goal tr:last-child td div.qr { display: inline-block; position: relative; padding-top: 1.5rem; }
div.course-information table.start-goal tr:last-child td div.qr:before { position: absolute; content: "RIDE WITH GPS"; top: 0; left: 0; font-weight: bold; font-family: "Oswald", sans-serif; white-space: nowrap; text-align: center; width: 100%; }
div.course-information table.start-goal tr:last-child td div.qr:nth-child(2):before { content: "Google MAP"; }

/* 詳細画面 */
div.details-course-information div.course-information { width: 44%; margin-right: 4%; float: left; }
div.details-course-information div.course-information div.course-data > div:first-child { float: left; width: 20.00%; }
div.details-course-information div.course-information div.course-data div.distance { font-size: 5rem; width: 35.00%; text-align: right; }
div.details-course-information div.course-information div.course-data div.elevation { font-size: 5rem; width: 45.00%; text-align: right; }
div.details-course-information div.course-visual { width: 52%; float: left; box-sizing: border-box; }


/*特定の記事でコースデータ非表示*/
div.root-list ul li#post-1470 div.course-data,
div.root-list ul li#post-1470 div.course-information table.start-goal,
div.root-list ul li#post-1477 div.course-data,
div.root-list ul li#post-1477 div.course-information table.start-goal { display:none; }
div.root-list ul li#post-1779 div.course-data,
div.root-list ul li#post-1779 div.course-information table.start-goal { display:none; }
div.root-list ul li#post-1732 div.course-data,
div.root-list ul li#post-1732 div.course-information table.start-goal { display:none; }
div.root-list ul li#post-1754 div.course-data,
div.root-list ul li#post-1754 div.course-information table.start-goal { display:none; }
div.root-list ul li#post-1915 div.course-data,
div.root-list ul li#post-1915 div.course-information table.start-goal { display:none; }
div.root-list ul li#post-2072 div.course-data,
div.root-list ul li#post-2072 div.course-information table.start-goal { display:none; }
div.root-list ul li#post-2118 div.course-data,
div.root-list ul li#post-2118 div.course-information table.start-goal { display:none; }
div.root-list ul li#post-2371 div.course-information div.course-data div.distance span.unit { display:none; }
div.root-list ul li#post-2435 div.course-information div.course-data div.distance span.unit { display:none; }

/* ------------------------------------------------------------------------------------------------------------------------------- */
/* トップページ と カテゴリー一覧では スタート / ゴールを表示しない */
/* div.root-list table.start-goal { display: none; } */
div.root-list ul li div.area { width: 6rem; height: 4rem; position: absolute; z-index: 1; background: #000; }
div.root-list ul li div.area span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 1.6rem; letter-spacing: 0.1rem; font-weight: bold; color: #fff; white-space: nowrap; }
div.root-list ul li.course-01 div.area { background: #880e4f; }
div.root-list ul li.course-02 div.area { background: #a62715; }
div.root-list ul li.course-03 div.area { background: #e65000; }
div.root-list ul li.course-04 div.area { background: #f9a825; }
div.root-list ul li.course-05 div.area { background: #ffd602; }
div.root-list ul li.course-06 div.area { background: #817717; }
div.root-list ul li.course-07 div.area { background: #558b2f; }
div.root-list ul li.course-08 div.area { background: #087137; }
div.root-list ul li.course-09 div.area { background: #006063; }
div.root-list ul li.course-10 div.area { background: #01579b; }
div.root-list ul li.course-11 div.area { background: #1a227e; }
div.root-list ul li.course-12 div.area { background: #673bb7; }
div.root-list ul li.course-13 div.area { background: #4e342f; }
div.root-list ul li.course-14 div.area { background: #795548; }
div.root-list ul li.course-15 div.area { background: #f48fb1; }
div.root-list ul li.course-16 div.area { background: #eda29b; }
div.root-list ul li.course-17 div.area { background: #ffcc80; }
div.root-list ul li.course-18 div.area { background: #ea3323; }
div.root-list ul li div.course-information { position: relative; padding-top: 3rem; }
div.root-list ul li div.course-description { /* border-top: 0.1rem solid #000; border-bottom: 0.1rem solid #000; */ padding: 0.25rem 1.5rem; margin-bottom: 1rem; color: #000; /* font-weight: bold; *//* border-radius: 0.5rem; *//* margin-top: 1rem; *//* border-top: 0.125rem dotted #000; */ }
div.root-list ul li div.course-description { /* border-top: 0.1rem solid #f6ea61; border-bottom: 0.1rem solid #eb5c79; */ }
div.root-list ul li div.course-description { position: absolute; top: 0; left: 0; }
div.root-list ul li div.course-description:before { width: 0.1rem; height: 1.5rem; position: absolute; content: ""; top: 50%; left: 0.5rem; transform: translateY(-50%) rotate(-30deg); background: #000; }
div.root-list ul li div.course-description:after { width: 0.1rem; height: 1.5rem; position: absolute; content: ""; top: 50%; right: 0.5rem; transform: translateY(-50%) rotate(30deg); background: #000; }
div.root-list ul + h3 + ul li div.course-description { /* border-top: 0.1rem solid #27bdf0; border-bottom: 0.1rem solid #8df2ce; */ }
div.root-list div.extra-link { position: absolute; top: 0.75rem; right: 0.75rem; margin-top: 0; letter-spacing: 0; z-index: 1000; border-radius: 1000rem; background: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }
div.root-list div.extra-link a { display: block; padding: 0.5rem 3rem 0.5rem 0.75rem; font-size: 1.4rem; color: #000; position: relative; transition: all .2s ease-in-out; }
div.root-list div.extra-link a:hover { opacity: 0.5; }
div.root-list div.extra-link a:after { position: absolute; top: 50%; right: 1rem; display: block; width: 0.5rem; height: 0.5rem; content: ''; transition: all .2s ease-in-out; transform: translateY(-50%) rotate(45deg);  border-top: 1px solid #a3835f; border-right: 1px solid #a3835f; }
div.root-list div.extra-link a:before { position: absolute; top: 50%; right: 1.1rem; width: 1rem; height: 0.1rem; content: ""; background: #a3835f; transform: translateY(-50%); transition: all .2s ease-in-out; }
div.root-list div.extra-link a:hover:after { right: 0.5rem; border-top: 1px solid #a3835f; border-right: 1px solid #a3835f; }
div.root-list div.extra-link a:hover:before { right: 0.4rem; background: #a3835f; width: 1.75rem; }
div.root-list div.extra-link a span { font-size: 1.8rem; position: relative; top: -0.1rem; margin-right: 0.25rem; color: #a3835f; }

/* */
/* ------------------------------------------------------------------------------------------------------------------------------- */
div.sections { /* background: #f0f0f0; *//* background: #23b7fe; *//* background: #b307c7; */ background: #33bcfe; position: relative; z-index: 0; }
div.sections:after { position: absolute; content: ""; width: 50%; height: 100%; /* background: #333333; *//* background: #4748a1; background: #3739bc; */ background: #4b4cbc; top: 0; left: 0; z-index: -1; }
div.sections div.inner { overflow: hidden; clear: both; }
section.support { width: 46%; margin-right: 8%; float: left; position: relative; z-index: 1; overflow: hidden; }

/* deco */
/* ブルー */
/* section.support:before { position: absolute; content: ""; width: 20rem; height: 100%; top: 0; right: -50%; transform: translateY(-50%) skewX(-30deg); background: #6ed1ff; background: #24b9ff; opacity: 1; pointer-events: none; transition: 0.5s all; z-index: -2; }
/*オレンジ */
/*section.support:after { position: absolute; content: ""; width: 20rem; height: 100%; top: 0; left: 8vw; transform: translateY(50%) skewX(-30deg); background: #ee8651; background: #f06722; opacity: 1; pointer-events: none; transition: 0.5s all; z-index: -2; } */
div.sections section.support div.title div.en { color: #f8e56d; color: #f6ec54; }
div.sections section.support div.title div.ja { color: #f8e56d; color: #f6ec54; }
section.support div.support-list {}
section.support div.support-list ul {}
section.support div.support-list ul li { float: left; width: 21.5%; margin-right: 4.6666%; margin-bottom: 4rem; }
section.support div.support-list ul li:nth-child(4n) { margin-right: 0; }
section.support div.support-list ul li a { display: block; text-decoration: none; }

/* サムネイル け っ て い ば ん */
section.support div.support-list ul li a div.thumbnail { overflow: hidden; width: 100%; margin-bottom: 0.5em; }
section.support div.support-list ul li a div.thumbnail span { display: block; width: 100%; padding-top: 100%; position: relative; /* background: #f8f8f8; */ }
section.support div.support-list ul li a div.thumbnail span img { /* max-height: 100%; */ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; border-radius: 0.5rem; overflow: hidden; }
section.support div.support-list ul li a:hover div.thumbnail span img { opacity: 0.75; /* max-height: 100%; */ }
section.support div.support-list ul li a div.headline { font-size: 1.35rem;  white-space: nowrap; text-align: center; color: #fff; }

/* @end サムネイル */
section.support div.link { position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); width: 100%; }
section.support div.link a { width: 100%; max-width: 60%; margin-left: auto; /* */
 margin-right: auto; /* */ }

/* ------------------------------------------------------------------------------------------------------------------------------- */
section.rental { width: 46%; float: left; position: relative; }
section.rental div.rental-bg { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; z-index: -1; pointer-events: none; }
section.rental div.rental-bg img { max-width: 50rem; max-height: 50rem; opacity: 0.125; }

/* グリーン */
/* section.rental:before { position: absolute; content: ""; width: 10rem; height: 200%; top: 0; right: -12vw; transform: translateY(-50%) skewX(-30deg); background: #5dc9d6; opacity: 1; pointer-events: none; transition: 0.5s all; z-index: -1; opacity: 0.80; }*/
/*黄色*/
/*section.rental:after { position: absolute; content: ""; width: 10rem; height: 200%; top: 0; left: 0; transform: translateY(-50%) skewX(-30deg); background: #fde159; background: #fdd823; opacity: 1; pointer-events: none; transition: 0.5s all; z-index: -1; opacity: 0.80; } */
/* */
div.sections section.rental div.title div.en { color: #eee; }
div.sections section.rental div.title div.ja { color: #eee; }
section.rental div.rental-list {}
section.rental div.rental-list ul {}
section.rental div.rental-list ul li {}
section.rental div.rental-list ul li a { display: block; }

/* サムネイル け っ て い ば ん */
section.rental div.rental-list a div.thumbnail { overflow: hidden; width: 100%; margin-bottom: 0.5em; }
section.rental div.rental-list a div.thumbnail span { display: block; width: 100%; padding-top: 75%; position: relative; background: #f8f8f8; }
section.rental div.rental-list a div.thumbnail span img { /* max-height: 100%; */ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; }
section.rental div.rental-list a:hover div.thumbnail span img { opacity: 0.75; /* max-height: 100%; */ }

/* @end サムネイル */
section.rental div.description { font-size: 1.8rem; color: #eee; font-weight: bold; margin-bottom: 4rem; text-align: center; }
section.rental div.link { position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); width: 100%; }
section.rental div.link a { width: 100%; max-width: 60%; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------------------------------------------------------------------- */
section.feature div.feature-list { max-width: 100rem; margin-left: auto; margin-right: auto; }
/* body.top section.feature div.feature-list { max-width: 100rem; margin-left: auto; margin-right: auto; } */
section.feature {}
section.feature div.feature-list {}
section.feature div.feature-list ul {}
section.feature div.feature-list ul li { float: left; margin-right: 4%; width: 48%; margin-bottom: 4rem; }
section.feature div.feature-list ul li:nth-child(2n) { margin-right: 0; }
section.feature div.feature-list ul li a { display: block; text-decoration: none; position: relative; }
section.feature div.feature-list ul li a div.new { position: absolute; width: 6rem; height: 6rem; content: ""; background: #000; z-index: 10; border-radius: 100rem; color: #fff; top: -1rem; left: -1rem; }
section.feature div.feature-list ul li a div.new span { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fed500; position: absolute; font-family: "Oswald", sans-serif; font-size: 2rem; }

/* サムネイル け っ て い ば ん */
section.feature div.feature-list ul li a div.thumbnail { overflow: hidden; width: 100%; margin-bottom: 0.5em; }
section.feature div.feature-list ul li a div.thumbnail span { display: block; width: 100%; padding-top: 75%; position: relative; background: #f8f8f8; }
section.feature div.feature-list ul li a div.thumbnail span img { /* max-height: 100%; */ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; }
section.feature div.feature-list ul li a:hover div.thumbnail span img { opacity: 0.75; /* max-height: 100%; */ }

/* @end サムネイル */
section.feature div.feature-list ul li div.update { color: #000; font-size: 1.8rem; }
section.feature div.feature-list ul li div.update span { font-size: 2.4rem; }
section.feature div.feature-list ul li div.update span.date span { font-size: 1.8rem; }
section.feature div.feature-list ul li div.headline { font-size: 2.1rem; }

/* ------------------------------------------------------------------------------------------------------------------------------- */
section.event { position: relative; }
section.event:after { position: absolute; content: ""; width: 100%; height: 100%; /* background: #333333; *//* background: #9d7d61; *//* background: #c4a467; */ background: #a88668; top: 0; left: 0; z-index: -2; }
section.event div.title div.en { color: #e4f2d8; }
section.event div.title div.ja { color: #e4f2d8; }
section.event div.event-list { max-width: 100rem; margin-left: auto; margin-right: auto; }
section.event div.event-list {}
section.event div.event-list ul {}
section.event div.event-list ul li { float: left; margin-right: 4%; width: 48%; margin-bottom: 4rem; }
section.event div.event-list ul li:nth-child(2n) { margin-right: 0; }
section.event div.event-list ul li a { display: block; text-decoration: none; position: relative; }
section.event div.event-list ul li a div.new { position: absolute; width: 6rem; height: 6rem; content: ""; background: #000; z-index: 10; border-radius: 100rem; color: #fff; top: -1rem; left: -1rem; }
section.event div.event-list ul li a div.new span { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fed500; position: absolute; font-family: "Oswald", sans-serif; font-size: 2rem; }

/* サムネイル け っ て い ば ん */
section.event div.event-list ul li a div.thumbnail { overflow: hidden; width: 100%; margin-bottom: 0.5em; }
section.event div.event-list ul li a div.thumbnail span { display: block; width: 100%; padding-top: 75%; position: relative; background: #f8f8f8; }
section.event div.event-list ul li a div.thumbnail span img { /* max-height: 100%; */
 position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; }
section.event div.event-list ul li a:hover div.thumbnail span img { opacity: 0.75; /* max-height: 100%; */ }
section.event div.event-list ul li div.update { color: #000; font-size: 1.8rem; }
section.event div.event-list ul li div.update span { font-size: 2.4rem; }
section.event div.event-list ul li div.update span.date span { font-size: 1.8rem; }
section.event div.event-list ul li div.headline { font-size: 2.1rem; }

/* ------ 一覧画面 でも 使用 ------ */
div.event-information-list { background: #fff; margin-top: 2rem; margin-bottom: 2rem; padding: 2rem; clear: both; overflow: hidden; }
div.event-information-list div.article { width: 100%; margin-right: 0; float: none; }
div.event-information-list div.article:nth-child(2n) { margin-right: 0; }
div.event-information-list div.article > div.clearfix { border-bottom: 0.1rem solid #ccc; padding: 2rem 1rem; display: block; text-decoration: none; transition: 0.25s all; position: relative; }
div.event-information-list div.article > div.clearfix:hover { background: #f8f8f8; }
div.event-information-list div.article:first-child > div.clearfix /* , div.event-information-list div.article:nth-child(2) a */
 { border-top: 0.1rem solid #ccc; }
div.event-information-list div.article > div.clearfix:before { /* position: absolute; top: 50%; right: 1rem; left: inherit; display: block; width: 1rem; height: 1rem; content: ''; transition: all .2s ease-in-out;  transform: translateY(-50%) rotate(45deg); border-top: 0.1rem solid #000; border-right: 0.1rem solid #000; background: none; */ }
div.event-information-list div.article > div.clearfix div.day { font-size: 1.4rem; }
div.event-information-list div.article > div.clearfix div.event-title { font-weight: bold; overflow: hidden; box-sizing: border-box; padding-right: 1rem; font-size: clamp(1.4rem, 2.0vw, 2.0rem); margin-bottom: 1rem; padding-bottom: 1rem; padding-top: 0.5rem; border-bottom: 0.1rem solid #f0f0f0; }
div.event-information-list div.article > div.clearfix div.thumbnail { position: relative; overflow: hidden; border-radius: 0.5rem; float: left; width: 28%; margin-right: 2%; background: #f1f4f7; box-sizing: border-box; }
div.event-information-list div.article > div.clearfix div.thumbnail span { display: block; padding-top: 75%; position: relative; }
div.event-information-list div.article > div.clearfix div.thumbnail span img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-width: 100%; height: auto; width: 100%; }
div.event-information-list div.article div.event-description {}
div.event-information-list div.article > div.clearfix div.details-information { line-height: 1.5; float: left; width: 70%; /* float: left; width: 70%; 
 */
 font-size: clamp(1.4rem, 1.6vw, 1.6rem); }
div.event-information-list div.article > div.clearfix div.details-information table { font-size: 1.4rem; color: #666; width: 100%; }
div.event-information-list div.article > div.clearfix div.details-information table th { padding-right: 1rem; white-space: nowrap; color: #444; vertical-align: top; }
div.event-information-list div.article > div.clearfix div.details-information table td { text-align: left; vertical-align: top; }
div.event-information-list div.article > div.clearfix div.details-information table td a { color: #666; }

/* ------------------------------------------------------------------------------------------------------------------------------- */
.google-maps { border: 2px solid #c3c3c3; overflow: hidden; border-radius: 1.25rem; }
.google-maps iframe { border: none; display: block; }
table.support-table { border-collapse: collapse; width: 100%; font-size: 1.4rem; }
table.support-table thead { background: #4d6a79; color: #fff; }
table.support-table th { border: 2px solid #c3c3c3; padding: 0.5rem 1rem; font-weight: normal; }
table.support-table tr:nth-child(even) { background: #f4f4f4; }
table.support-table .number { text-align: center; display: none; }
table.support-table td { border: 2px solid #c3c3c3; padding: 0.5rem 1rem; position: relative; }


table.support-table td div.star { position: absolute; transform: translateX(-250%) translateY(-50%); height: 100%; pointer-events: none; top: 50%; left: 0; vertical-align: middle; }

table.support-table td div.star span.star-inner { position: absolute; transform: translateX(-2rem) translateY(-50%); pointer-events: none; top: 50%; left: 0; display: block; }



/* ------------------------------------------------------------------------------------------------------------------------------- */
section.category-list {}
section.category-list ul {}

/* columns2 */
section.category-list ul li { width: 32%; margin-right: 2%; float: left; }
section.category-list ul li:nth-child(3n) { margin-right: 0; }

/* サムネイル け っ て い ば ん */
section.category-list ul li a div.thumbnail { overflow: hidden; width: 100%; margin-bottom: 0.5em; }
section.category-list ul li a div.thumbnail span { display: block; width: 100%; padding-top: 75%; position: relative; background: #f8f8f8; }
section.category-list ul li a div.thumbnail span img { /* max-height: 100%; */
 position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; }
section.category-list ul li a:hover div.thumbnail span img { opacity: 0.75; /* max-height: 100%; */ }

/* ------------------------------------------------------------------------------------------------------------------------------- 詳細画面 */
/* ------------------------------------------------------------------------ */
div.course-data {}
div.course-data div.qr {}
div.course-data div.elevation {}

/* ------------------------------------------------------------------------ recommended-spot */
div.recommended-spot {}
div.recommended-spot ul li { float: left; width: 31%; margin-right: 3.5%; margin-bottom: 4rem; }
div.recommended-spot ul li:nth-child(3n) { margin-right: 0; }
div.recommended-spot ul li a { display: block; text-decoration: none; position: relative; }

/* number */
div.recommended-spot ul li a div.number { position: absolute; width: 4rem; height: 4rem; content: ""; /* background: #f248b6; */
 background: #673ab7; z-index: 10; /* border-radius: 100rem; */
 color: #fdd000; top: -1rem; left: -1rem; }
div.recommended-spot ul li a div.number span { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fff; position: absolute; font-family: "Oswald", sans-serif; font-size: 2.1rem; }

/* */
/* サムネイル け っ て い ば ん */
div.recommended-spot ul li a div.thumbnail { overflow: hidden; width: 100%; margin-bottom: 0.5em; }
div.recommended-spot ul li a div.thumbnail span { display: block; width: 100%; padding-top: 75%; position: relative; background: #f8f8f8; }
div.recommended-spot ul li a div.thumbnail span img { /* max-height: 100%; */
 position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; }
div.recommended-spot ul li a:hover div.thumbnail span img { opacity: 0.75; /* max-height: 100%; */ }
div.recommended-spot ul li a div.headline { font-size: 1.6rem; margin-bottom: 0.25rem; }
div.recommended-spot ul li a div.description { font-size: 1.4rem; }

/* */
/* ------------------------------------------------------------------------------------------------------------------------------- */
div.scroller { /* background: #000; */
 bottom: 0; display: block; height: 20rem; position: fixed; right: 0; width: 20rem; z-index: 10000; pointer-events: none; }
div.scroller.active { pointer-events: auto; }
div.scroller div.button { height: 20rem; position: absolute; top: 0; width: 20rem; overflow: hidden; }
div.scroller div.button a { display: block; height: 20rem; position: relative; width: 20rem; transition: 0.25s all; top: 20rem; }
div.scroller div.button a::before { /* border-right: 1px solid #fff; border-top: 1px solid #fff; content: ""; display: block; height: 2rem; left: 50%; position: absolute; top: 60%; 
 transform: translateX(-50%) translateY(-50%) rotate(-45deg);  transition: all 0.2s ease-in-out 0s; width: 2rem; */
 position: absolute; bottom: 0; right: 1rem; /* left: 50%; transform: translateX(-50%); */
 content: "鳥取県マスコットキャラクター\Aサイクリングトリピー"; font-size: 0.9rem; white-space: pre; text-align: right; text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF; }
div.scroller div.button a img { position: relative; transition: 0.25s all; }
div.scroller.active div.button a { top: 0; }
footer { padding: 3rem 0; background: #000; color: #aaa; }
footer div.logo { /* max-width: 15rem; */
 max-width: 20rem; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 2.5rem; }
footer a { /* color: #fff; */
 color: #aaa; text-decoration: none; }

/* ------------------------------------------------------------------------------------ */
div.banner { width: 1000px; margin-left: auto; margin-right: auto; padding-top: 40px; padding-bottom: 40px; }
div.banner ul { text-align: center; font-size: 0; }
div.banner ul li { display: inline-block; width: 25%; }
div.banner ul li a { display: block; }
div.banner ul li img { width: 90%; display: block; margin-left: auto; margin-right: auto; }
.topicPath { font-size: 1.2rem; display: block; }
.topicPath ul { padding: 1rem; list-style: none; text-align: right; }
.topicPath ul li { display: inline; }
.topicPath ul li a { font-size: 1.2rem; text-decoration: underline; position: relative; padding: 0 1em; color: #000; }
.topicPath ul li:first-child a { padding-left: 0; }
.topicPath ul li span { padding: 0 1em; }
.topicPath ul li a:before { width: 4px; height: 4px; position: absolute; top: 50%; right: 0; content: ""; border-top: 1px solid #000; border-right: 1px solid #000;  transform: translateY(-50%) rotate(45deg); transition: all .2s ease-in; }
.topicPath ul li a:hover { text-decoration: none; }

/* */
div.category-title-wrap { /* padding-top: 2rem; padding-bottom: 2rem; */ }
div.category-title-wrap div.category-title { max-width: 120rem; margin-left: auto; margin-right: auto; text-align: center; }
div.category-title-wrap div.category-title div.en { font-size: 6rem; }
div.category-title-wrap div.category-title div.ja { font-size: 1.8rem; letter-spacing: 4px; }
div.page-title-wrap { padding-top: 4rem; padding-bottom: 4rem; }
div.page-title-wrap div.page-title { max-width: 120rem; margin-left: auto; margin-right: auto; text-align: center; }
div.page-title-wrap div.page-title h1 { font-size: 3.6rem; /* transform: translateY(5rem); */ }
div.page-title-wrap div.description { text-align: center; margin-top: 1rem; /* transform: translateY(-5rem); */ }
div.page-title-wrap div.update { text-align: center; margin-top: 2rem; }
div.page-title-wrap div.update span { font-size: 2.4rem; }
div.page-title-wrap div.update span.date span { font-size: 1.8rem; }

/* ------------------------------------------------------------------------------------------------------------------------------- */
div.contents { max-width: 100rem; margin-left: auto; margin-right: auto; }
div.contents div.inner { max-width: 100rem; margin-left: auto; margin-right: auto; }

/* loading */
.loader-bg { background: #fff; height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 100000; }

/* deco */
.loader-bg div.loader-deco, .loader-bg div.loader-deco div { height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 100000; }
/* ブルー */
div.loader-deco:before { position: fixed; content: ""; width: 2.5rem; height: 100%; height: 0; top: 0; right: 0; transform: translateY(-70%) skewX(-30deg); /* background: #00bcf3; *//* background: #b307c7; *//* background: #24b9ff; */ background: #00bcf3; pointer-events: none; transition: 1s ease-in-out all; z-index: 10001; opacity: 0.0; /* mix-blend-mode: overlay; *//* border-left: 10px solid #ccc; background: linear-gradient(to bottom, #6ed1ff 90%, #fff 10%); */ }
/* オレンジ */
div.loader-deco:after { position: fixed; content: ""; width: 2.5rem; height: 100%; height: 0; top: 0; left: 0; transform: translateY(70%) skewX(-30deg); background: #eb2f56; /* background: #f06722; */ pointer-events: none; transition: 1s ease-in-out all; z-index: 10001; opacity: 0.0; /* mix-blend-mode: overlay; */ }
/* グリーン */
div.loader-deco div:before { position: fixed; content: ""; width: 2.5rem; height: 100%; height: 0; bottom: 0; right: 20vw; transform: translateY(70%) skewX(-30deg); background: #67f1c0; pointer-events: none; transition: 1s ease-in-out all; z-index: 10001; opacity: 0.0; /* mix-blend-mode: overlay; */ }

/* 黄色 */
div.loader-deco div:after { position: fixed; content: ""; width: 2.5rem; height: 100%; height: 0; top: 0; left: 20vw; transform: translateY(-70%) skewX(-30deg); background: #fde159; background: #f6ec54; pointer-events: none; transition: 1s ease-in-out all; z-index: 10001; opacity: 0.0; /* mix-blend-mode: overlay; */ }

/* active の とき */
/* ブルー */
div.loader-deco.active:before { height: 100%; opacity: 0.8; }
/* オレンジ */
div.loader-deco.active:after { height: 100%; opacity: 0.8; }
/* グリーン */
div.loader-deco.active div:before { height: 100%; opacity: 0.8; }
/* 黄色 */
div.loader-deco.active div:after { height: 100%; opacity: 0.8; }

/* */
.loader-bg div.loading-wrap { position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 10000; display: block; width: 200px; height: 200px; background: url("../img/character_get-off.png"); background-size: 200px 200px; }
.loader-bg div.loading-wrap div.loading { width: 200px; height: 0; top: 0; position: absolute; overflow: hidden; transition: 1s; opacity: 1 !important; }
.loader-bg div.loading-wrap div.loading.active { height: 200px; background: #fff; }
.loader-bg div.loading-wrap div.loading.active {}

@media print { 
header { display: none; }
 body { width: 1200px; padding-left: 4rem; padding-right: 4rem; }
 div.scroller { display: none; }
 .js-inview li { opacity: 1 !important; }
 section.main-visual div.main-visual-slider { width: 100%; }
}

/* */
div.extra-link { text-align: center; font-weight: bold; letter-spacing: 0.25rem; background: #ff8200; margin-top: 4rem; }
div.extra-link span { font-size: 4rem; color: #fff; vertical-align: middle; margin-right: 1rem; transform: scaleX(-1); }
div.extra-link a { color: #fff; }

/* Google Calendar */
#calendar table { background: #fff; }
#calendar table thead { background: #1e2b37; color: #fff; }
#calendar table thead a { color: #fff; cursor: auto; pointer-events: none; text-decoration: none; }
#calendar table a { text-decoration: none; cursor: auto; pointer-events: none; }
#calendar table a[href] { cursor: pointer; pointer-events: auto; text-decoration: underline; }
#calendar table a.calendar_1 { background-color: #3c8ad5 !important; border: 1px solid #3c8ad5 !important; }
#calendar table a.calendar_2 { background: #ff8a00 !important; border: 1px solid #ff8a00 !important; } /* --------------------------------------------------------------------------- 交通ルールページ追加 */
ul.rule-check-list {}
div.mark-article { clear: both; overflow: hidden; border-bottom: 0.2rem dotted #ccc; padding-top: 1rem; padding-bottom: 1rem; }
div.mark-article:first-child { border-top: 0.2rem dotted #ccc; }
div.mark-article div.heading { font-weight: bold; margin-top: 1rem; margin-bottom: 1rem; }
div.mark-article div.mark { float: left; width: 15rem; margin-right: 4%; font-size: 1.2rem; text-align: center; }
div.mark-article div.mark img { width: 10rem; display: block; margin-left: auto; margin-right: auto; }
div.mark-article div.description { float: left; width: calc(96% - 20rem); }
div.orange-bg { text-align: center; font-weight: bold; letter-spacing: 0.25rem; background: #ff8200; margin-top: 4rem; }
div.orange-bg span { font-size: 4rem; color: #fff; vertical-align: middle; margin-right: 1rem; transform: scaleX(-1); }
div.orange-bg div { color: #fff; }
div.color-bg { position: fixed; padding-top: 8rem; /* background: #23b7fe; */
 z-index: -1; width: 100vw; left: 50%; height: 100vh; transform: translateX(-50%); }
div.color-bg div.inner { position: relative; z-index: 1; /* mix-blend-mode: overlay; */ }

/* deco */
/* ブルー */
div.color-bg:before { position: absolute; content: ""; width: 2.5rem; height: 100%; top: 0; right: 8vw; transform: translateY(-50%) skewX(-30deg); /* background: #6ed1ff; *//* background: #24b9ff; *//*background: #00bcf3;  background: #b307c7; */opacity: 1; pointer-events: none; transition: 0.5s all; z-index: -1; /* opacity: 0.80; *//* mix-blend-mode: overlay; *//* border-left: 1.5rem solid #ccc; */ background: linear-gradient(to bottom, #00bcf3 100%); }
/* オレンジ */
div.color-bg:after { position: absolute; content: ""; width: 2.5rem; height: 100%; top: 0; left: 8vw; transform: translateY(50%) skewX(-30deg); /* background: #ee8651; */
 /* background: #f06722; */
 background: #eb2f56; pointer-events: none; transition: 0.5s all; z-index: -1; opacity: 0.80; /* mix-blend-mode: overlay; */ }
/* グリーン */
div.color-bg div.color-bg-inner:before { position: absolute; content: ""; width: 2.5rem; height: 200%; top: 0; right: -12vw; transform: translateY(-50%) skewX(-30deg); /* background: #5dc9d6; */
 background: #67f1c0; pointer-events: none; transition: 0.5s all; z-index: -1; opacity: 0.80; /* mix-blend-mode: overlay; */ }
/* 黄色 */
div.color-bg div.color-bg-inner:after { position: absolute; content: ""; width: 2.5rem; height: 200%; top: 0; left: 0; transform: translateY(-50%) skewX(-30deg); /* background: #fde159; *//* background: #fdd823; */
 background: #f6ec54; opacity: 1; pointer-events: none; transition: 0.5s all; z-index: -1; /* opacity: 0.80; *//* mix-blend-mode: overlay; */ }

/* */
div.white-bg { background: rgba(255, 255, 255, 0.8); }

/* */
div.sns-widget { margin-bottom: 8rem; }
div.sns-widget > div.inner { max-width: 100rem; }
div.sns-widget > div.inner > div { width: 49%; float: left; margin-right: 0; }
div.sns-widget > div.inner > div.title { width: 100%; float: none; margin-right: 0; }
div.sns-widget div.title img { width: 3rem; position: relative; top: -0.75rem; }
div.sns-widget div.facebook-widget-inner { width: 100%; margin-bottom: 2rem; }
div.sns-widget > div.inner > div > div.title { margin-bottom: 1rem; }
div.sns-widget > div.inner > div > div.title .en { font-size: 4rem; }
div.sns-widget div.facebook-widget-inner > .fb-page { width: 100% !important; }
div.sns-widget div.facebook-widget-inner > .fb-page > span, div.sns-widget div.facebook-widget iframe { height: 500px !important; width: 100% !important; }
div.sns-widget div.facebook-widget-inner img { width: 100% !important; display: block !important; }
div.sns-widget > div.inner > div.instagram-widget { /* background: #f5f6f7; */ margin-right: 2%; }
div.instagram-widget #sb_instagram { /* width: calc(100%) !important; margin: 0; */ }
div.instagram-widget #sb_instagram.sbi_col_6 #sbi_images .sbi_item { /* width: 33.33% !important; padding: 1rem !important; box-sizing: border-box !important; */ }
div.instagram-widget #sb_instagram #sbi_images .sbi_item { /* padding: 1vw !important; */ }
#sb_instagram-widget #sbi_images .sbi_item.sbi_transition { /* opacity: 1 !important; max-height: inherit !important; */ }
div.instagram-widget a.sbi_photo { /* height: auto !important; padding-bottom: 100%; */ }

/* */
div.digital-map { position: relative; padding-top: 65%; margin-bottom: 4rem; max-width: 100rem; margin-left: auto; margin-right: auto; border-radius: 1rem; overflow: hidden; }
div.digital-map iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
div.feature-title { font-size: 3.6rem; font-weight: bold; text-align: center; margin-top: 6rem; }

/* ------------------------------------------------------------------------ */
div.category-list { margin-top: 2rem; padding-left:clamp(0.5rem,3vw,4rem); padding-right:clamp(0.5rem,3vw,4rem); }
div.category-list ul li:first-child a { border-top: 0.1rem solid #000; }
div.category-list ul li a { display: block; color: #303030; text-decoration: none; position: relative; padding: 1rem 4rem 1rem 1rem; border-bottom: 0.1rem solid #000; transition: 0.25s all; }
div.category-list ul li a:hover { background: #f0f0f0; }
div.category-list ul li a:after { position: absolute; top: 50%; right: 1rem; left: inherit; display: block; width: 1rem; height: 1rem; content: ''; transition: all .2s ease-in-out;  transform: translateY(-50%) rotate(45deg); border-top: 0.1rem solid #000; border-right: 0.1rem solid #000; background: none; }
div.category-list ul li a div.category-list-details {}
div.category-list ul li a div.category-list-details div.label-wrap { display: block; width: 20rem; float: left; white-space: nowrap; }
div.category-list ul li a div.category-list-details div.label-wrap > div { display: inline-block; vertical-align: middle; font-size: 1.4rem; white-space: nowrap; }
div.category-list ul li a div.category-list-details div.label-wrap > div.category { background: #000; color: #fff; padding-left: 1rem; padding-right: 1rem; }
div.category-list ul li a div.category-list-details div.heading { float: left; width: calc(100% - 20rem); }

/* ページャー */
.pager { clear: both; position: relative; overflow: hidden; /* margin-top: px; *//* margin-bottom: px; */ width: 100%; margin-top: 4rem; margin-bottom: 4rem; }
.pager .pagenavi { font-size: 1.5rem; font-weight: bold; list-style: none; position: relative; text-align: center; }
.pager .pagenavi > span, .pager .pagenavi > a { margin-left: 0.5rem; margin-right: 0.5rem; position: relative; display: inline-block; width: 4rem; height: 4rem; line-height: 4rem; text-align: center; background-color: #caccd8; text-decoration: none; color: #fff; vertical-align: middle; transition: 0.25s all; }

/* ------------------------- "前へ"と"次へ" */
.pager .pagenavi > .prev, .pager .pagenavi > .next, .pager .pagenavi > .prev, .pager .pagenavi > .next { background: #a88668; width: 4rem; height: 4rem; display: inline-block; transition: all 0.2s ease-in-out; vertical-align: middle; }
.pager .pagenavi > .prev:hover, .pager .pagenavi > .prev:active, .pager .pagenavi > .next:hover, .pager .pagenavi > next:active { background: #f8f8f8; color: #c6d542; text-decoration: none; }

/* ------------------------- a:hover と a:active */
.pager .pagenavi > a:hover, .pager .pagenavi > a:active { background: #a88668 !important; color: #fff !important; text-decoration: none; }
.pager .pagenavi > a.next::after, .pager .pagenavi > span.next::after { position: absolute; top: 50%; right: 1.75rem; left: inherit; display: block; width: 0.75rem; height: 0.75rem; margin-top: 0; content: ''; transition: all .2s ease-in-out;  transform: translateY(-50%) rotate(45deg); border-top: 0.1rem solid #fff; border-right: 0.1rem solid #fff; }
.pager .pagenavi > a.prev:after, .pager .pagenavi > span.prev::after { position: absolute; top: 50%; ; left: 1.75rem; display: block; width: 0.75rem; height: 0.75rem; margin-top: 0; content: ''; transition: all .2s ease-in-out; transform: translateY(-50%) rotate(-135deg); border-top: 0.1rem solid #fff; border-right: 0.1rem solid #fff; }

/* @end */
.pager .pagenavi span.current { background: #000; color: #fff; }

/* --------------------------------------------------------------------------- */
div.sns-widget > div.inner > div.instagram-banner { float: none; width: 50%; margin-left: auto; margin-right: auto; margin-top: 6rem; }
div.instagram-banner a { width: 100%; margin-left: auto; margin-right: auto; display: block; border: 0.15rem solid #ccc; border-radius: 1rem; position: relative; height: 10rem; }
div.instagram-banner a img { position: absolute; top: 50%; transform: translateY(-50%); left: 2rem; width: 6rem; }
div.instagram-banner div.heading { position: absolute; top: 50%; transform: translateY(-50%); left: 10rem; white-space: nowrap; font-size: 1.8rem; font-weight: bold; }
div.instagram-banner a::after { position: absolute; top: 50%; right: 1.5rem; left: inherit; display: block; width: 1.5rem; height: 1.5rem; content: ''; transition: all .2s ease-in-out;  transform: translateY(-50%) rotate(45deg); border-top: 0.2rem solid #000; border-right: 0.2rem solid #000; background: none; }


.video-wrap {}
.video-wrap iframe { aspect-ratio: 16/9; width: 100%; height: 100%;}

.root-list li#post-1029 .course-data,
.root-list li#post-1029 .start-goal { display:none;}

.anchor { height:8rem; margin-top:-8rem; position:relative; z-index:-10; width:1px; display:inline-block; }
body.logged-in.anchor { height:calc(8rem + 32px); margin-top:calc(-8rem - 32px);}

/*-- サイクルトレイン用CSS --*/

/*-- サイクルトレイン メイン --*/
.ct_main { position:relative; }
.ct_logo { position:absolute; bottom:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.8); display:flex; align-items:center; flex-flow:row nowrap;justify-content:space-between; }
.ct_logo img { width:clamp(21rem,50vw,40rem);}
.ct_date { /*position:absolute; bottom:0; right:0;*/ color:#014190; z-index:1500; padding:0.5rem clamp(0.75rem,1.6vw,1.5rem) 0.5rem 0.5rem; line-height:1.4; font-size:clamp(1rem,3vw,2rem); font-weight:bold; text-align:right;}
.ct_date strong { font-size:clamp(1.25rem,4vw,2.5rem); }


/*-- サイクルトレイン コース --*/
.cycletrain .material-icons, .contents .cycletrain .material-symbols-outlined { vertical-align:middle; margin-top:-0.3rem; margin-right:0.5rem; }
.cycletrain .course_data { font-family: "Oswald", sans-serif; }
.cycletrain .spot { padding:1rem; position:relative; text-align:center;}
.cycletrain .ct { position:relative }
.cycletrain .ct .box { padding:1rem; position:relative; text-align:center; padding:0.5rem 1rem; border-radius: 0.5rem; background:#014190; color:#fff; font-weight:bold; width:16rem; margin:1rem auto; z-index:10;}
.cycletrain .distance { position:relative; }
.cycletrain .distance .box {padding:0.5rem; position:relative; text-align:center; font-family: "Oswald", sans-serif; margin:1rem auto; width:9rem; background:#eee; border-radius: 3rem; z-index:10;}
.cycletrain .distance .lunch { position:absolute; right:0; top:0; background:#ffd602; padding:0.5rem 1rem; border-radius: 0.5rem; }
.cycletrain .distance .lunch::before { content:""; position:absolute; top:calc(50% - 2px); left:-10rem; width:10rem; border-top:4px solid #ffd602;} 
.cycletrain .ct::after, .cycletrain .distance::after { content:""; width:2rem; position:absolute; left:calc(50% - 1rem); top:-1rem; bottom:-1rem; background:#eee; z-index:1; }

.cycletrain .m, .accordion-item .m, .m { position:relative; padding-right:4rem;}
.cycletrain .m::after, .accordion-item .m::after, .m::after { content:"+"; position:absolute; right:1.5rem; font-size:3rem; top:calc(50% - 1.5rem); line-height:1; transition:0.5s; font-weight:normal; }
.cycletrain .m.i_close::after, .m.i_close::after { transform:rotate(45deg);}

.cycletrain .plan00 h4 { background:#014190; color:#fff; padding:1rem 6rem 1rem 2.5rem; }

div.contents .cycletrain div.link.plan01_rsv a,
div.contents .cycletrain div.link.plan02_rsv a { background:#014190; }

.cycletrain .plan01 h4, .accordion-item h4 { background:rgba(0,98,41,1); color:#fff; padding:1rem 6rem 1rem 2.5rem; }
.cycletrain .plan01 .material-icons, .cycletrain .plan01 .material-symbols-outlined { color:rgba(0,98,41,1); }
.cycletrain .plan01 .spot { background:rgba(0,98,41,0.2); }

.cycletrain .plan02 h4 { background:rgba(121,85,72,1); color:#fff; padding:1rem 6rem 1rem 2.5rem; }
.cycletrain .plan02 .material-icons, .cycletrain .plan02 .material-symbols-outlined { color:rgba(121,85,72,1);}
.cycletrain .plan02 .spot { background:rgba(121,85,72,0.2); }
.cycletrain .plan01 .ct .material-symbols-outlined, .cycletrain .plan02 .ct .material-symbols-outlined { color:#fff; }

.cycletrain .map_hanrei { margin-top:1rem;}
.cycletrain .map_hanrei ul li { display:flex; flex-flow:row wrap; align-items:center; }
.cycletrain .map_hanrei ul li::before {content:""; display:inline-block; width:15%; height:6px; margin-right:1rem; vertical-align:middle; }
.cycletrain .map_hanrei ul li:nth-of-type(1)::before { background:#0288d1;}
.cycletrain .map_hanrei ul li:nth-of-type(2)::before { background:#a52714;}

.cycletrain .comment ruby rt { margin-bottom:-0.4rem; }



.cycletrain h5 { font-size:2rem; position:relative; display:flex; flex-flow:row wrap; align-items:center; }
.cycletrain h5::after { content:""; flex-grow:1; border-top:2px solid #333; margin-left:1rem; }
.contents .cycletrain h5 .material-symbols-outlined { margin-top:0rem; }
@media only screen and (max-width: 768px) { 
.cycletrain .plan02 h5 { font-size:1.6rem; }
}

/*-- サイクルトレイン コーススライダー --*/
.contents .cycletrain .flexslider .comment { padding-top:1rem; padding-bottom:5rem; letter-spacing:0.1rem;}
.contents .cycletrain .flexslider .flex-control-paging li a { background:#eee;}
.contents .cycletrain .flexslider .flex-control-paging li a.flex-active { background:#a3835f;}

/*-- サイクリングルート追加260212 --*/
.navlink a{
		max-width: 100%!important; 
		background: #01579b!important;
	}
	
	.navlink a:hover{
		background: #fff!important;
	}
/* アコーディオン全体の設定 */
.accordion-item {
    overflow: hidden;
}

/* ヘッダーをホバーしたとき */
.accordion-header:hover {
    background-color: #eee;
}

/* コンテンツ部分（開閉する中身）の設定 */
.accordion-content {
    /* 初期状態は高さを0にして非表示 */
    max-height: 0;
    padding: 0 15px; /* 左右のパディングは維持 */
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out; 
}

.accordion-content p, 
.accordion-content ul {
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0;
}

/* チェックボックスがチェックされた（開いている）状態のとき */
.accordion-toggle:checked ~ .accordion-header {
    background-color: #e0e0e0; /* 開いたときのヘッダー背景色 */
}

/* チェックボックスがチェックされた（開いている）状態のとき、コンテンツを表示 */
/* max-heightを十分大きな値に設定することでコンテンツの高さを表現 */
.accordion-toggle:checked ~ .accordion-content {
    max-height: 10000px; /* コンテンツの高さより十分大きな値（コンテンツに合わせて調整） */
    padding: 10px 15px 15px; /* 開いたときに上下のパディングを設定 */
}

/* ヘッダーにアイコン（例: 矢印）を追加 */
.accordion-header h3::after {
    content: '▼';          /* 閉じたときのアイコン */
    float: right;          /* 右寄せ */
    font-size: 0.8em;
    margin-left: 10px;
	margin-top: 5px;
    transform: rotate(0deg);
    transition: transform 0.3s;
}

/* チェックされたらアイコンを回転させて上向きにする */
.accordion-toggle:checked ~ .accordion-header h3::after {
    transform: rotate(180deg);
}
/* topページ追加 */
div.hm ul li span{vertical-align: middle;}
.mean-container .mean-nav ul li a span{vertical-align: middle;}
.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    padding: .9em 2em;
    border: 2px solid #000000;
    border-radius: 5px;
    background-color: #c2e0f4;
    color: #000000;
    font-size: 1.2em;
	text-decoration: none;
}

.button-1::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    content: '';
}

/* イベントカレンダー用 */
table.support-table02 thead {
    background: #78d9ff;
}

table.support-table02 th {
    border: 2px solid #c3c3c3;
    padding: 0.5rem 1rem;
    font-weight: normal;
}


table.support-table02 .number {
    text-align: center;
    display: none;
}

table.support-table02 td {
    border: 2px solid #c3c3c3;
    padding: 0.5rem 1rem;
    position: relative;
}

table.support-table02 td div.star {
    position: absolute;
    transform: translateX(-250%) translateY(-50%);
    height: 100%;
    pointer-events: none;
    top: 50%;
    left: 0;
    vertical-align: middle;
}

table.support-table02 td div.star span.star-inner {
    position: absolute;
    transform: translateX(-2rem) translateY(-50%);
    pointer-events: none;
    top: 50%;
    left: 0;
    display: block;
}
/* 左から4番目と5番目の列（tdとth）をすべて塗りつぶす */
table.support-table02 td:nth-child(4), 
table.support-table02 th:nth-child(4),
table.support-table02 td:nth-child(5), 
table.support-table02 th:nth-child(5)
{
  background-color: #fffa64;
}
	.support-table02 tr.endgray,.support-table02 tr.endgray td{
		background-color: #9b9b9b;
	}