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

@media only screen and (max-width: 1200px) {
div.inner { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; }
}

@media only screen and (max-width: 1000px) {
body:before { display: none; }
body:after { display: none; }
}

@media only screen and (max-width: 1500px) {
section.main-visual div.main-visual-slider { min-width: 120rem; }
}
@media only screen and (max-width: 1200px) {
section.main-visual div.main-visual-slider { min-width: 100%; }
section.main-visual div.main-visual-slider div#slider ul.slides li div.slide-copy div.main-copy span { font-size: 3.5vw; }
section.main-visual div.main-visual-slider div#slider ul.slides li div.slide-copy div.sub-copy span { font-size: 2.5vw; }
}
@media only screen and (max-width: 768px) {
section.main-visual div.main-visual-slider div#slider ul.slides li div.slide-copy { top: inherit; bottom: 0; }
section.main-visual div.main-visual-slider div#slider ul.slides li div.slide-copy div.sub-copy { display: none; }
section.main-visual div.scroll-arrow { width: 4rem; height: 4rem; }
section.main-visual div.scroll-arrow span:before { content: "SCROll"; top: 0.75rem; font-size: 0.6rem; }
section.main-visual div.scroll-arrow span:after { width: 1px; height: 1.0rem; bottom: -3.0rem; }
section.main-visual div.scroll-arrow:after { width: 0.75rem; height: 0.75rem; }
}


@media only screen and (max-width: 1000px) {
/* -------------------------------------------------------- header */
div.wrapper { padding-top: 9.6rem; }
header, header.opacity { /*width: 100%; height: auto; position: relative;*/ background:#fff; }
header > div.inner { height: auto; padding: 0; max-height: none; }
header div.top { display: none; }
body.top header div.logo, header div.logo { float: none; padding: 0 0 0.5rem 0.5rem; /* margin-bottom: 1.0rem; */ width: 12.5rem; max-width: 12.5rem; }
	
body.top header.opacity::before, header.opacity::before { display:none;}
body.top header div.logo a img, header div.logo a img,
body.top header.opacity div.logo a img, body.top header.opacity div.logo a img,
header.opacity div.logo a img, header.opacity div.logo a img { height: auto; display: block; position: relative; top: 0.25rem; /*width: 12.5rem; max-width: 12.5rem;*/ }

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

.hm { display:none;}
	
footer div.logo a img { height: auto; display: block; position: relative; top: 0.25rem; }
/* -------------------------------------------------------- header ul.utility */
header > div.inner.clearfix > div.fr { float: none; }
header ul.utility { background: #f0f0f0;  padding:0;   float:none;   justify-content:center; }
header ul.utility { width: 100%; text-align: center; }
header ul.utility li a {/* font-size: 1.1rem; white-space: nowrap; padding: 0 0.2em; position: relative;*/ }
header ul.utility li a::before { border: none; content: ""; height: auto; left: 0; margin: 0; position: relative; top: 0; transform: none; width: auto; }
header ul.utility li.english a { top: 0; }
/* -------------------------------------------------------- header nav */
header nav { left: 0; overflow: visible; width: 100%; }
header nav div.inner { width: 100%; padding: 0; }
header nav ul { display: block; overflow: hidden; width: 100%; max-height: 0; margin: 0 auto; transition: all .5s ease-in-out; }
header nav ul.active { max-height: 1000px; }
header nav ul li { font-size: 1.6rem; display: block; /* border-bottom: 1px solid #e6e6e6; */ height: 100%; }
header nav ul li:first-child { /* border-top: 1px solid #e6e6e6; */}
header nav ul li:last-child { border-bottom: none; }
header nav ul li a { font-weight: bold; position: relative; display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 1.8rem 2.0rem; text-align: left; font-size: 1.6rem; border-bottom: 1px solid #ccc;   transform: none; }
header nav ul li a br { display: none; }
header nav ul li:last-child a { /* border-bottom: none; */}
header nav ul li a:after { position: absolute; top: 50%; right: 15px; left: inherit; display: block; width: 1rem; height: 1rem; /* margin-top: -5px; */ content: ''; transition: all .2s ease-in-out; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); border-top: 1px solid #000; border-right: 1px solid #000; background: none; }
header nav ul li:first-child a {}
header nav ul.active li:first-child a { /*border-top: 1px solid #ccc; */}
header nav ul li:first-child a::before { position: relative; top: auto; left: 0; width: auto; height: auto; margin-top: 0; content: ''; background: none; }
/* header nav ul li a::after { position: relative;   z-index: 9999; bottom: 0;  left: 0; width: 0; height: auto; content: '';  background: none; }*/
nav ul li a:hover::after { }
nav ul li.current a { color: #333; }
nav ul li.current:after { position: relative; content: ""; bottom: 0; width: auto; height: 0; left: 0; background: none; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
nav ul li a:before { display: none; }
/* -------------------------------------------------------- menu-button */
header div.menu-button { position: absolute; top: 0; right: 0; display: block; width: 40px; height: 40px; z-index: 9999; }
header div.menu-button div.menu-trigger { display: block; cursor: pointer; }
header div.menu-button div.menu-trigger > div { position: relative; display: block; width: 40px; height: 40px; margin: 0 auto; }
header div.menu-button div.menu-trigger > div div.label { font-size: 1.0rem; font-weight: bold; position: absolute; box-sizing: border-box; width: 40px; /* color: #f35955; */ color: #333; bottom: -0.5em; text-align: center; }
header div.menu-button div.menu-trigger > div div.label::before { content: 'MENU'; }
header div.menu-button div.menu-trigger > div div.label.open::before { content: 'CLOSE'; }
header div.menu-button div.menu-trigger > div div.hamburger { position: relative; width: 40px; height: 40px; }
header div.menu-button span { position: absolute; left: 0; display: inline-block; box-sizing: border-box; width: 20px; height: 2px; transition: all .4s; /* background: #f35955; */ background: #333; }
header div.menu-button span:nth-of-type(1) { top: 13px; left: 10px; }
header div.menu-button span:nth-of-type(2) { top: 19px; left: 10px; }
header div.menu-button span:nth-of-type(3) { bottom: 13px; left: 10px; }
header div.menu-button.active span:nth-of-type(1) { transform: translateY(6px) rotate(-45deg); }
header div.menu-button.active span:nth-of-type(2) {
opacity: 0; }
header div.menu-button.active span:nth-of-type(3) { transform: translateY(-6px) rotate(45deg); }
/* --------------------------------- common */
section { padding-top: 4rem; padding-bottom: 4rem; }
section div.link a { width: 100%; max-width: 30rem; }
}

@media only screen and (max-width: 1200px) {
section.main-visual div.main-visual-slider { width: 100%; height: auto; }
section.main-visual div.main-visual-slider div#slider { height: auto; max-height: inherit; }
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: 0; }
section.main-visual div.main-visual-slider div#slider img { position: relative; top: inherit; left: inherit; transform: none; height: auto; max-height: inherit; width: 100%; max-width: 100%; }
}

@media only screen and (max-width: 1000px) {
section.main-visual {}
section.main-visual div.inner { padding-left: 0; padding-right: 0; }
section.lead { padding-top: 4rem; padding-bottom: 0; }
section.lead div.lead-copy { font-size: 3rem; }
section.lead div.lead-copy span { font-size: 2.0rem; }
/* ブルー */
section.lead:before { width: 2.5rem; opacity: 0.25; }
/* オレンジ */
section.lead:after { width: 2.5rem; left: 20vw; opacity: 0.25; }
/* グリーン */
section.lead div.inner:before { width: 2.5rem; right: 0; opacity: 0.25; }
/* 黄色 */
section.lead div.inner:after { width: 2.5rem; opacity: 0.25; }
}

@media only screen and (max-width: 1000px) {
section.root div.root-list ul li { width: 49%; float: left; margin-right: 2%; }
section.root div.root-list ul li:nth-child(3n) {
margin-right: 2%; }
section.root div.root-list ul li:nth-child(2n) {
margin-right: 0; }
}

@media only screen and (max-width: 768px) {
section.root {}
section.root div.root-list {}
}

@media only screen and (max-width: 640px) {
div.course-information div.course-data > div.class { float: none; width: 100%; text-align: right; }
div.course-information div.course-data div.class span.class { top: 0; }
div.course-information div.course-data div.distance { width: 100%; }
div.course-information div.course-data div.elevation { width: 100%; }
}

@media only screen and (max-width: 480px) {
section.root {}
section.root div.root-list {}
section.root div.root-list ul li { width: 100%; float: none; }
section.root div.root-list ul li:nth-child(3n) {
margin-right: 0; }
div.course-information div.course-data > div.class { float: left; width: 20%; text-align: right; }
div.course-information div.course-data div.class span.class { top: 0.5rem; }
div.course-information div.course-data div.distance { width: 40%; }
div.course-information div.course-data div.elevation { width: 40%; }
}

@media only screen and (max-width: 1000px) {
section.support div.link { position: relative; bottom: inherit; left: inherit; transform: none; width: 100%; }
}
@media only screen and (max-width: 768px) {
div.sections::after { display: none;  }
/* div.sections::after { background: none; }	 */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ 
section.support { float: none; width: 100%; /*margin-right: 0; padding-bottom: 0; */ background: #5354bc; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
section.support div.support-list {}
section.support div.support-list ul li { /* width: 49%; float: left; margin-right: 2%; */ }
section.support div.support-list ul li:nth-child(2n) {
/* margin-right: 0; */ }
section.support div.support-list ul li a div.thumbnail span { overflow: hidden; border-radius: 0.5rem; }
section.support div.support-list ul li a div.thumbnail span img { /* max-width: 15rem !important; */ display: block; }
section.support div.link a { max-width: 30rem; width: 100%; }
}
@media only screen and (max-width: 480px) {
section.support {}
section.support div.support-list {}
section.support div.support-list ul li { /* width: 100%; float: none; margin: 0; */ }
section.support div.support-list ul li:nth-child(3n) {
margin-right: 2%; }
section.support div.support-list ul li { width: 49%; float: left; margin-right: 2%; }
section.support div.support-list ul li:nth-child(2n) {
margin-right: 0; }
section.support div.support-list ul li a div.thumbnail span img { max-width: 15rem !important; display: block; }
}

@media only screen and (max-width: 1000px) {
section.rental div.link { position: relative; bottom: inherit; left: inherit; transform: none; width: 100%; }
}


@media only screen and (max-width: 768px) {
section.rental { float: none; width: 100%; }
section.rental div.rental-list {}
section.rental div.rental-list ul li { /* width: 49%;  float: left; margin-right: 2%; */ }
section.rental div.link a { max-width: 30rem; width: 100%; }
section.feature {}
section.feature div.feature-list {}
section.feature div.feature-list ul li {}
section.event {}
section.event div.event-list {}
section.event div.event-list ul li {}
}
@media only screen and (max-width: 480px) {
section.rental {}
section.rental div.rental-list {}
section.rental div.rental-list ul li { width: 100%; float: none; /* margin: 0; */ }
section.rental div.rental-list ul li:nth-child(3n) { margin-right: 0; }
section.feature {}
section.feature div.feature-list {}
section.feature div.feature-list ul li { width: 100%; float: none;  }
section.feature div.feature-list ul li:nth-child(3n) { margin-right: 0; }
section.event {}
section.event div.event-list {}
section.event div.event-list ul li { width: 100%; float: none;}
section.event div.event-list ul li:nth-child(3n) {
margin-right: 0; }
}
@media only screen and (max-width: 640px) {
div.scroller { height: 12.5rem; width: 12.5rem; }
div.scroller div.button { height: 12.5rem; width: 12.5rem; }
div.scroller div.button a { height: 12.5rem; width: 12.5rem; }
div.scroller div.button a::before { }
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* 詳細画面 */
@media only screen and (max-width: 1000px) {
.topicPath ul { text-align: left; }

div.page-title-wrap div.page-title h1 { font-size: 2.4rem; }
div.recommended-spot ul li { margin-bottom: 2rem; margin-right: 2%; width: 49%; }
div.recommended-spot ul li:nth-child(3n) { margin-right: 2%; }
div.recommended-spot ul li:nth-child(2n) { margin-right: 0; }
div.details-course-information div.course-information div.course-data > div:first-child { float: none; width: 100%; text-align: right; }
div.details-course-information div.course-information div.course-data div.class { text-align: right; width: 100%; }
div.details-course-information div.course-information div.course-data div.class span.class { position: relative; bottom: 0; left: 0; top: inherit; transform: translateY(0); }
div.details-course-information div.course-information div.course-data div.distance { text-align: right; width: 100%; }
div.details-course-information div.course-information div.course-data div.elevation { text-align: right; width: 100%; margin-top: -1.75rem; }
/* div.page-title-wrap div.page-title h1 { 	transform: translateY(6rem); }
div.page-title-wrap div.description { 	transform: translateY(-6rem); } */
}

@media only screen and (max-width: 640px) {
div.recommended-spot {}
div.details-course-information div.course-information div.course-data div.class {}
div.details-course-information div.course-information div.course-data div.class span.class {}
div.details-course-information div.course-information div.course-data > div:first-child {}
div.details-course-information div.course-information div.course-data div.distance { font-size: 2.25rem; }
div.details-course-information div.course-information div.course-data div.elevation { font-size: 2.25rem; margin-top: 0; }
}

@media only screen and (max-width: 480px) {
div.recommended-spot ul li { width: 100%; margin-right: 0; }
div.recommended-spot ul li:nth-child(3n) {
margin-right: 0; }
div.recommended-spot ul li:nth-child(2n) {
margin-right: 0; }
div.details-course-information div.course-information div.course-data div.class { width: 16%; float: left; }
div.details-course-information div.course-information div.course-data div.class span.class { top: 0.8rem; }
div.details-course-information div.course-information div.course-data > div:first-child {}
div.details-course-information div.course-information div.course-data div.distance { font-size: 2.25rem; float: left; width: 42%; text-align: center; }
div.details-course-information div.course-information div.course-data div.elevation { font-size: 2.25rem; float: left; width: 42%; text-align: center; }
div.details-course-information div.course-information { float: none; margin-right: 0; width: 100%; margin-bottom: 2rem; }
div.details-course-information div.course-visual { float: none; width: 100%; }
/* */ 
div.details-course-information div.course-information div.course-data div.class span.class { position: relative; bottom: 0; top: 0.8rem; transform: translateY(0); font-size: 1.4rem; height: 2rem; padding-left: 1rem; left: inherit; }
div.details-course-information div.course-information div.course-data div.class span.class::before { width: 15.5px; height: 15.5px; }
}

@media only screen and (max-width: 768px) {
div.category-title-wrap div.category-title div.en { font-size: 4rem; }
div.recommended-spot ul li a div.headline { font-size: 1.4rem; }
div.recommended-spot ul li a div.description { font-size: 1.2rem; }
/* number */
div.recommended-spot ul li a div.number { width: 2rem; height: 2rem; top: 0; left: 0; }
div.recommended-spot ul li a div.number span { font-size: 1.2rem; }
div.banner { width: 100%; }
div.banner ul { display: flex; flex-wrap: wrap; }
div.banner ul li { width: 50%; box-sizing: border-box; padding-left: 1rem; padding-right: 1rem; }
div.banner ul li img { width: auto; }
div.event-information-list { padding: 0; }
div.event-information-list div.article { width: 100%; margin-right: 0; float: none; }
div.event-information-list div.article:nth-child(2) a { border-top: none; }
div.event-information-list div.article > div.clearfix div.thumbnail { float: none; width: 100%; margin-right: 0; margin-bottom: 1rem; }
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.details-information { float: none; width: 100%; }
div.event-information-list div.article > div.clearfix::before { display: none; }
div.event-information-list div.article > div.clearfix div.details-information table th { display: block; }
div.event-information-list div.article > div.clearfix div.details-information table td { word-break: break-all; display: block; }

/* 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 .fc-view-harness { height: calc(100vh - 10rem) !important; }

div.sns-widget { margin-bottom: 4rem; }
div.sns-widget > div.inner > div { width: 100%; float: none; margin-right: 0; margin-bottom: 2rem; }
div.sns-widget div.inner div.facebook-widget-inner { margin-bottom: 4rem; }
div.sns-widget > div.inner > div:nth-child(2) { margin-right: 0; }
/* div.sns-widget div.facebook-widget { 	width: 100%; margin-bottom: 2rem; }
div.sns-widget div.facebook-widget > .fb-page { 	width: 100% !important; }
div.sns-widget div.facebook-widget > .fb-page > span, div.sns-widget div.facebook-widget iframe { 	height: 500px !important; width: 100% !important; }
div.sns-widget div.facebook-widget img { 	width: 100% !important; display: block !important; }
 */
div.top-note { max-width: 90%; text-align: left; }
div.top-note div.heading { text-align: center; }
div.feature-title { font-size: 2.4rem; }
div.category-list ul li a div.category-list-details div.label-wrap, div.category-list ul li a div.category-list-details div.heading { float: none; width: 100%; margin-bottom:0.5rem; }
div.sns-widget > div.inner > div.instagram-banner { width: 100%; }
div.instagram-banner a img { left: 2rem; width: 4rem; }
div.instagram-banner div.heading { left: 8rem; font-size: 1.4rem; }
}
@media screen and (max-width: 768px) {
body.customize-support header { top:46px;}
}
@media screen and (max-width: 600px) {
 #wpadminbar { position: fixed !important; }
}