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

/*校正用CSS*/
div.test, span.test, li.test, body.test .test_no { display:none;}
body.test div.test { display:block; }
body.test span.test { display: inline; }
body.test li.test { display: list-item; }


/*校正追加20260227*/
body.test section.study ul li { width: 49%; margin-bottom: 2%; }



/* ---------------------------- 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: 10.5rem; }
body.top div.contents-wrapper { box-sizing: border-box; overflow: hidden; background: #fff; }
div.contents-wrapper { box-sizing: border-box; overflow: hidden; background: #f8f8f8;/* padding-top: 1rem; *//* padding-bottom: 1rem; */}
div.inner { /* width: 1000px; */ width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }

/* ---------------------------- header */
header { width: 100%; position: fixed; z-index: 9999; background: #fff; top: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);/* box-shadow: 0 0 0 2px #fff inset, 5px 5px 25px #e7ecf1; *//* box-shadow: 5px 5px 25px #e7ecf1; */}
header > div.inner { /* overflow: hidden; */ max-height: 100px; max-width: 100%; padding-top: 1rem; padding-bottom: 1rem; }
header div.header-top {/* background: #f0f0f0; padding-bottom: 0.25rem; */}
header div.header-top div.inner { max-width: 100%; }

header ul.utility { text-align: right; font-size: 0; }
header ul.utility li { display: inline-block; }
header ul.utility li a { font-size: 1.3rem; position: relative; padding: 0 0 0 3rem; color: #fff; text-decoration: none; background: #fbf7ee; display: block; padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 2rem; padding-right: 2rem; margin-left: 0.1rem; margin-right: 0.1rem; transition: 0.25s all; }
header ul.utility li:nth-child(1) a { color: #303030; }
header ul.utility li:nth-child(2) a { background: #e8a8b7; }
header ul.utility li:nth-child(3) a { background: #e8ab7a; }
header ul.utility li:nth-child(4) a { background: #a8cc66; }
header ul.utility li a:hover { opacity: 0.75; }
header ul.utility li a:hover {/* color: #8dc031; */}
header ul.utility li a::before {/* position: absolute; top: 50%; left: 1rem; width: 4px; height: 4px; margin: auto; content: ''; transform: translateY(-50%) rotate(45deg); border-top: 1px solid #8dc031; border-right: 1px solid #8dc031; */}
header div.logo { /* margin-bottom: 1.5rem; */ position: relative; float: left; width: 25%; margin-right: 2.5%; /* top: -0.5rem; */ top: -0.15rem; }
header div.logo h1 { }
header div.logo a { display: block; padding: 0; color: #000; text-decoration: none; float: left; font-size: 3rem; white-space: nowrap; }
header div.logo a img { display: block; width: 30rem; /* */ max-width: 25rem; margin-left: auto; margin-right: auto; transition: all 0.4s ease 0s; }
header div.logo div.film-commission { float: right; font-size: 1.6rem; text-align: right; }
header div.logo div.film-commission span.en { font-size: 1.0rem; display: block; letter-spacing: 0.1rem; color: #666; font-weight: normal; }

/* ---------------------------- nav */
header div.menu-button { display: none; }
nav { background: #fff; position: relative; height: 100%;/* background: #f1deb4; border-top: 0.1rem solid #e9ebec; border-bottom: 0.2rem solid #f3f3f3; */ width: 70%; float: left; }
nav ul { width: 100%; height: 100%; white-space: nowrap; }

nav ul.utility { display: none; }
nav ul li { position: relative; display: inline-block; /* height: 80px; */ vertical-align: middle; width: 20%;/* padding-top: 2rem; padding-bottom: 2rem; */}
nav ul li:after { position: absolute; content: ""; top: 50%; right: 0; transform: translateY(-50%); width: 0.1rem; height: 2rem; background: #cacaca; }
nav ul li:first-child:before { position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-50%); width: 0.1rem; height: 2rem; background: #cacaca; }
/* nav > div.inner > ul > li > a::after { position: absolute; z-index: 9999; bottom: 0; left: 0; width: 0; height: 3px; content: ''; transition: all .1s ease-in-out; background: #003e6c; } */
nav > div.inner > ul > li > a:hover::after {/* left: 0; width: 100%; */}
nav ul li a { font-size: 1.4rem; /* font-weight: bold; */ line-height: 1.2; position: relative; display: block; box-sizing: border-box; width: 100%; /* padding: 0.125rem 1.5rem; */ text-align: center; white-space: nowrap; text-decoration: none; color: #303030; letter-spacing: 0.4rem; transition: 0.25s all; }
nav ul li a span.material-icons { font-size: 3.6rem; color: #8dc031; }
/* nav ul li.current a { }
nav ul li.current:after { position: absolute; content: ""; bottom: 0; width: 25%; height: 3px; left: 50%; background: #003e6c; transform: translate(-50%, 0); } */
nav ul li a:hover { /* color: #5e82a6; color: #848484; color: #fff; background: #ff8cb3; */ opacity: 0.75; }
nav ul li a::after { }
nav ul li:first-child a::before { }

/* ---------------------------- */
a.anchor { position: absolute; top: -6rem; }
section { font-size: 1.8rem; line-height: 2; padding-top: 4rem; padding-bottom: 4rem; /* border-top: 0.1rem solid #ccc; */ }
section div.inner { max-width: 100rem; margin-left: auto; margin-right: auto; }
section div.title { text-align: center; margin-bottom: 4rem;/* margin-top: -10rem; */}
section div.title h2 { font-size: 3.0rem; font-weight: normal; letter-spacing: 0.25rem; color: #000; position: relative; }
section div.title h2 span { background: #fff; display: inline-block; position: relative; z-index: 1000; padding-left: 3rem; padding-right: 3rem; color: #828d82; }
section div.title h2:after { top: 50%; position: absolute; height: 0.1rem; width: 75%; /* background: #8dc031; */ background: #828d82; content: ""; left: 50%; transform: translateX(-50%) translateY(-50%); }
section div.title span.material-icons { display: block; color: #000; font-size: 4rem; }
section div.title span.en { /* display: none; */ color: #9b9b9b; font-size: 2rem; transform: scaleY(0.95); display: block; }
div.link a { display: block; border: 0.2rem solid #8dc031; padding-top: 1rem; padding-bottom: 1rem; box-sizing: border-box; text-align: center; color: #8dc031; text-decoration: none; font-weight: bold; position: relative; background: #fff; transition: 0.25s all; border-radius: 0.5rem; }
div.link a:before { border-right: 0.2rem solid #8dc031; border-top: 0.2rem solid #8dc031; content: ""; display: block; height: 1rem; right: 1rem; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transition: all 0.2s ease-in-out 0s; width: 1rem;/* border-color: #000 transparent transparent; border-style: solid; border-width: 0.75rem 0.75rem 0; content: ""; height: 0; top: 50%; right: 1rem !important; position: absolute; width: 0; z-index: 0; transform: translateX(0) translateY(-50%) rotate(-90deg); transition: 0.25s all; */}
div.link a:hover { background: #8dc031; color: #fff; }
div.link a:hover:before { border-right: 2px solid #fff; border-top: 2px solid #fff;/* border-color: #fff transparent transparent; transform: translateX(1rem) translateY(-50%) rotate(-90deg); */}
div.link a.active { background: #8dc031; color: #fff; pointer-events: none; }
div.link a.active:hover:after { display: none; }
div.link a.active:after { display: none; }

/* */
div.music-player { position: fixed; left: 1rem; bottom: 1rem; z-index: 10000; /* */ transition: 0.25s all; }
div.music-player audio { display: block; }
div.music-player div.music-player-label { position: absolute; top: 0; white-space: nowrap; transform: translateY(-100%); padding: 0.25rem 2rem; width: 100%; box-sizing: border-box; font-size: 1.4rem; }
/* div.music-player div.status { position: absolute; left: 3rem; top: 50%; width: 6rem; height: 6rem; background: #fff; transform: translateX(-50%) translateY(-50%); border-radius: 1000rem; z-index: 0; }
div.music-player div.status:before { position: absolute; content: ""; left: 50%; top: 50%; width: 5rem; height: 5rem; background: #8dc031; transform: translateX(-50%) translateY(-50%); border-radius: 1000rem; z-index: 100; }
div.music-player div.status span { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); border-radius: 1000rem; z-index: 100; color: #fff; }
div.music-player div.play-button-label { position: absolute; top: 50%; transform: translateY(-50%); left: 6rem; } */

/* ---------------------------- */
section.main-visual { position: relative; /* margin-top: 3.5rem; *//* border-radius: 0.5rem; */ overflow: hidden; /* margin-bottom: 4rem; */ border: none; width: 100%; margin-left: auto; margin-right: auto; padding: 0; /* padding-top: 35.08%; height: calc(100vh - 11rem); */ height: 60rem; }
/* */

section.main-visual-slider { display: block; padding: 0; height: 63rem; /* 鳥取県マスコットキャラクター トリピー */ overflow: hidden; position: relative; }
div.toripy { position: absolute; top: 50%; right: 0; width: 15rem; height: 15rem; z-index: 10000; transform: translateY(-50%); transition: 10s all; animation: 2s ease-in-out infinite forwards running fly-toripy; }
div.toripy.move {/* right: 100rem; transform: translateX(100rem); */}
/* */

@keyframes fly-toripy {
0% { opacity: 1; transform: translateY(3rem); }
50% { opacity: 1; transform: translateY(1rem); }
100% { opacity: 1; transform: translateY(3rem); }
}

section.main-visual-slider ul.slides, section.main-visual-slider ul.slides li { position: relative; height: 60rem; }
section.main-visual-slider .flexslider .slides img { /* 
	max-height: 49.2rem; */ width: 100%; max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) scale(1.125); transition: 5s all; }
section.main-visual-slider .flexslider .flex-active-slide img { transform: translateX(-50%) translateY(-50%) scale(1); }
section.main-visual-slider div.copy { /* width: 25%; */ background: #fff; padding: 1rem 2rem; box-sizing: border-box; border-radius: 5rem; text-align: center; letter-spacing: 0.5rem; font-size: 1.8rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); white-space: nowrap; width: 28rem; height: 10rem; }
section.main-visual-slider div.copy:before { position: absolute; bottom: -1rem; right: 25%; transform: translateX(0) rotate(0); border-color: #fff transparent transparent; border-style: solid; border-width: 2rem 1.5rem 0; content: ""; height: 0; width: 0; z-index: 0; }
section.main-visual-slider div.copy { position: absolute; right: 1rem; top: 40%; transform: translateX(0); bottom: 2rem; z-index: 200; transition: 1s all; color: #303030; opacity: 0; }
section.main-visual-slider a div.copy {/* transform: translateX(-50%) translateY(50%); */	}
section.main-visual-slider .flex-active-slide a div.copy { opacity: 1; transform: translateX(0) translateY(0); }
section.main-visual-slider div.copy span { color: #8dc031; font-weight: bold; }
section.main-visual-slider div.name { position: absolute; bottom: 1rem; left: 2rem; color: #fff; }
section.main-visual-slider div.note { font-size: 1.3rem; text-align: right; }
/* 
section.main-visual div.visual img { width: 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); min-width: 140rem; max-width: 140rem; }
section.main-visual div.inner { height: 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100rem; max-width: 120rem; }
section.main-visual div.inner div.copy { width: 25%; background: #fff; padding: 1rem 2rem; box-sizing: border-box; border-radius: 5rem; text-align: center; letter-spacing: 0.5rem; font-size: 1.4rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); white-space: nowrap; min-width: 25rem; }
section.main-visual div.inner div.copy:before { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%) rotate(180deg); border-color: #fff transparent transparent; border-style: solid; border-width: 2rem 1.5rem 0; content: ""; height: 0; width: 0; z-index: 0; }
section.main-visual div.inner div.copy.left { position: absolute; left: 0; bottom: 2rem; z-index: 100; }
section.main-visual div.inner div.copy.center { position: absolute; left: 50%; transform: translateX(-50%); bottom: 2rem; z-index: 200; }
section.main-visual div.inner div.copy.right { position: absolute; right: 0; bottom: 2rem; z-index: 300; }
section.main-visual div.inner div.copy span { color: #8dc031; font-weight: bold; }
section.main-visual-slider { display: none; } 
*/

/* - - - - - - ---------------------- */
section.welcome {/* border-left: 1rem solid #8dc031; */}
section.welcome ul { max-width: 120rem; margin-left: auto; margin-right: auto; border-radius: 0.5rem; overflow: hidden; }
section.welcome ul li { float: left; /* width: calc(50% - 0.4rem); */ width: 32%; margin-right: 2%; margin-bottom: 2rem; /* border: 0.2rem solid #f3f3f3; */ box-sizing: border-box; border-radius: 0.5rem; border: 0.1rem solid #ccc; overflow: hidden; }
section.welcome ul li:nth-child(3n) { margin-right: 0; }
section.welcome ul li:nth-child(n+3) { margin-bottom: 0; }
section.welcome ul li:nth-child(1) { float: left; /* width: calc(50% + 0.4rem); border-right: 0.4rem solid #fff; */ box-sizing: border-box;/* border-radius: 0.5rem; */}
section.welcome ul li:nth-child(2) {/* border-bottom: 0.3rem solid #fff; */}
section.welcome ul li a { display: block; text-align: center; transition: 0.25s all; }
section.welcome ul li a:hover { opacity: 0.75; }
section.welcome ul li a[href$=".pdf"]:after { display: none; }

/* ---------------------------- */
section.study {/* border-left: 1rem solid #8dc031; */}
section.study ul { max-width: 120rem; margin-left: auto; margin-right: auto; border-radius: 0.5rem; overflow: hidden; display: flex; flex-flow: row wrap; gap:2%; }
section.study ul li { /*float: left; width: calc(50% - 0.4rem); */ width: 32%; /*margin-right: 2%;*/ margin-bottom: 0; /* border: 0.2rem solid #f3f3f3; */ box-sizing: border-box; border-radius: 0.5rem; /* border: 0.2rem solid #f3f3f3; border: 0.2rem solid #eee; */ border: 0.1rem solid #ccc; overflow: hidden; }
section.study ul li:nth-child(3n) { margin-right: 0; }
section.study ul li:nth-child(1) { /*float: left; width: calc(50% + 0.4rem); border-right: 0.4rem solid #fff; border-radius: 0.5rem; */}
section.study ul li:nth-child(2) {
/* border-bottom: 0.3rem solid #fff; */}
section.study ul li a { display: block; text-align: center; transition: 0.25s all; }
section.study ul li a:hover { opacity: 0.75; }

/* ---------------------------- */
section.popular { position: relative; /* border-top: 1px solid #46bfdd; */ background: #fff; }
section.popular div.inner { /* padding-top: 4rem; padding-bottom: 4rem; */ max-width: 120rem; }
section.popular:after {/* position: absolute; content: ""; width: 33.33%; top: -1px; left: 0; height: 1px; background: #89b837; */}
section.popular:before {/* position: absolute; content: ""; width: 33.33%; top: -1px; right: 0; height: 1px; background: #eaafbd; */}
section.popular div.title h2 span { background: #fff; }
section.popular ul { background: #fff; border: 0.1rem solid #f3f3f3; border-radius: 0.5rem; }
section.popular ul li:nth-child(1) { width: 50.70%; float: left; border-right: 0.1rem solid #f3f3f3; }
section.popular ul li:nth-child(2) { border-right: 0.1rem solid #f3f3f3; border-bottom: 0.1rem solid #f3f3f3; }
section.popular ul li:nth-child(3) { border-bottom: 0.1rem solid #f3f3f3; }
section.popular ul li:nth-child(4) { border-right: 0.1rem solid #f3f3f3; }
section.popular ul li { width: 24.65%; float: left; box-sizing: border-box; }
section.popular ul li a { position: relative; display: block; padding: 1rem; transition: 0.25s all; }
section.popular ul li a:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);/* transform: scale(1.1); z-index: 9999; background: #fff; */}
section.popular ul li:nth-child(1) div.thumbnail { /* height: 32.3rem; */ padding-top: 75.00%; }
section.popular ul li div.thumbnail { /* height: 15.0rem; height: 32.3rem; */ padding-top: 76.00%; position: relative; overflow: hidden; /* background: #e8e5e0; */ background: #f8f8f8; }
section.popular ul li div.thumbnail span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 100%; height: 100%; text-align: center; }
section.popular ul li div.thumbnail span img { height: 100%; max-width: inherit; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
section.popular ul li div.number { position: absolute; top: -0.5rem; left: -0.5rem; z-index: 1000; background: #fff; width: 4rem; height: 4rem; border-radius: 0.25rem; font-family: oswald; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
section.popular ul li:nth-child(1) div.number { background: #aed071; color: #fff; }
section.popular ul li:nth-child(2) div.number { background: #a5d4ed; color: #fff; }
section.popular ul li:nth-child(3) div.number { background: #eaafbd; color: #fff; }
section.popular ul li:nth-child(4) div.number { background: #6eba85; color: #fff; }
section.popular ul li:nth-child(5) div.number { background: #a6b6d5; color: #fff; }
section.popular ul li div.number span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); /* color: #8dc031; */ font-size: 2.0rem; }
section.popular ul li:first-child div.number { width: 5rem; height: 5rem; }
section.popular ul li:first-child div.number span { font-size: 2.4rem; z-index: 1; }
/* 
section.popular ul li:first-child div.number span.material-icons { opacity: 0.1; z-index: 0; font-size: 4.25rem; color: #000; }
section.popular ul li div.number span.material-icons { opacity: 0.1; z-index: 0; font-size: 3.25rem; color: #000; }
*/
section.popular ul li div.page-name { position: absolute; bottom: 1rem; left: 1rem; z-index: 1000; white-space: nowrap; /* background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75)); */ background: #689d38; width: calc(100% - 2rem); height: 3rem; box-sizing: border-box; }
section.popular ul li div.page-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.4rem; color: #fff; padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; width: 100%; display: block; }

/* ---------------------------- */
section.topics { position: relative; background: #fff; }
body.top section.topics {/* border-left: 1rem solid #8dc031; position: relative; border-top: 1px solid #46bfdd; background: #fff; */}
body.top section.topics:after {/* position: absolute; content: ""; width: 33.33%; top: -1px; left: 0; height: 1px; background: #89b837; */}
body.top section.topics:before {/* position: absolute; content: ""; width: 33.33%; top: -1px; right: 0; height: 1px; background: #eaafbd; */}
div.topics-list ul { margin-bottom: 4rem; position: relative; margin-left: auto; margin-right: auto; max-width: 90rem; }
/* body.top div.article-list ul:before { position: absolute; right: 0; top: -3rem; content: "Recent Articles"; white-space: nowrap; font-size: 2.4rem; } */
div.topics-list ul li { }
div.topics-list ul li:first-child a { border-top: 0.1rem solid #cacaca; }
div.topics-list ul li a { color: #000; display: block; padding-top: 1.25rem; padding-bottom: 1.25rem; border-bottom: 0.1rem solid #cacaca; font-size: 1.6rem; position: relative; width: 100%; padding-right: 4rem; padding-left: calc(10rem + 6rem); box-sizing: border-box; transition: 0.125s all; }
div.topics-list ul li a:before {/* background: #d6d6d6; content: ""; height: 2px; right: 0; margin: auto; position: absolute; top: 50%; transform: translateY(-50%); width: 2rem; z-index: 0; transition: 0.125s all; */}
div.topics-list ul li a:after {/* border-bottom: 0.649519rem solid #d6d6d6; border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent; content: ""; right: -0.5rem; position: absolute; top: 50%; transform: translateY(-50%) rotate(90deg); z-index: 0; transition: 0.125s all; */}
div.topics-list ul li a div.update, div.topics-list ul li a div.headline { position: relative; z-index: 1; }
div.topics-list ul li a div.label { /* float: left; */ width : 7.0%; border: 0.1rem solid #000; text-align: center; box-sizing: border-box; margin-right: 4rem; font-size: 1.4rem; position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; /* min-width: 10rem; */ left: 7.5rem; height: 3rem; }

/* label */
div.topics-list ul li a div.new { width : 7.0%; position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; left: 0; border: 0.1rem solid #ed7c96; color: #ed7c96; box-sizing: border-box; height: 3rem; line-height: 3rem; text-align: center; font-size: 1.4rem; }
div.topics-list ul li a div.label.recommend { border: 0.1rem solid #8dc031; color: #fff; background: #8dc031; }
div.topics-list ul li a div.label.attention { border: 0.1rem solid #f74b4b; color: #fff; background: #f74b4b; }
div.topics-list ul li a div.label.none { border: 0.1rem solid #fff; color: #fff; background: #fff; opacity: 0; min-height: 3rem; }
div.topics-list ul li a div.update { float: left; width : 10%; margin-right: 4rem; font-size: 1.4rem; position: relative; top: 0.1rem; white-space: nowrap; }
div.topics-list ul li a div.headline { float: left;/* width : calc(75% - 8rem); */}
div.topics-list ul li a:hover { background: #f3f3f3; text-decoration: underline; }
div.topics-list ul li a:hover:before {/* background: #00325d; right: -1rem; */}
div.topics-list ul li a:hover:after {/* border-bottom: 0.649519rem solid #00325d; border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent; right: -1.5rem; */}

/* ---------------------------- */
section.download { background: #8dc031;/* border-left: 1rem solid #8dc031; */}
section.download div.inner { max-width: 120rem; }
section.download div.title h2:after { display: none; }
section.download div.download-figure { max-width: 75%; margin-right: auto; }
section.download div.titles-wrap { max-width: 60%; box-sizing: border-box; position: absolute; top: 50%; right: 0; transform: translateX(0) translateY(-50%); background: #fff; padding: 4rem; }
section.download div.titles-wrap div.title h2 { line-height: 1.5; font-size: 2.6rem; padding-bottom: 4rem; border-bottom: 0.1rem solid #cacaca; }
section.download div.titles-wrap div.description { margin-bottom: 4rem; }
section.download ul li { float: left; width: 32.00%; margin-right: 2%; border: 0.2rem solid #8dc031; box-sizing: border-box; border-radius: 0.5rem; }
section.download ul li:last-child { margin-right: 0; }
section.download ul li a { display: block; font-size: 1.4rem; text-align: center; line-height: 1.5; text-decoration: none; color: #8dc031; box-sizing: border-box; height: 100%; padding-top: 1rem; padding-bottom: 1rem; transition: 0.125s all; }
section.download ul li a span.material-icons { font-size: 4rem; }
section.download ul li a:hover { background: #8dc031; color: #fff; }

/* ---------------------------- */
div.scroller { background: #8dc031; bottom: 1rem; display: block; height: 6rem; position: fixed; right: 1rem; width: 6rem; z-index: 2000; border-radius: 0.5rem; }
div.scroller div.button { height: 6rem; position: absolute; top: 0; width: 6rem; }
div.scroller div.button a { display: block; height: 6rem; position: relative; width: 6rem; }
div.scroller div.button a::before { border-right: 2px solid #fff; border-top: 2px 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; }
footer { padding-top: 2rem; padding-bottom: 4rem; background: rgba(36, 49, 60, 0.9); color: #fff; text-align: center; z-index: 1000; position: relative; }
footer div.logo { margin-left: auto; margin-right: auto; max-width: 30rem; margin-bottom: 2rem; }
footer a { color: #fff; text-decoration: underline; }
footer a span { font-size: 3rem; }

/* ---------------------------- */
div.article-list-wrap { }
div.article-list-wrap h3 { padding: 0; padding-bottom: 1.0rem; margin-bottom: 1.5rem; border-bottom: 0; border-bottom: 0.2rem solid #8dc031; letter-spacing: 0.75rem; text-align: center; }
div.article-list { }
div.article { box-sizing: border-box; font-size: 1.6rem; line-height: 1.5; text-decoration: none; vertical-align: top; width: 49%; margin-right: 2%; float: left; border: 0.2rem solid #ddd; margin-bottom: 1.25rem; border-radius: 0.25rem;/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09); */ background: #fff; }
div.article:nth-child(2n) { margin-right: 0; }
div.article a { display: block; position: relative; padding: 1.0rem 2.0rem 1.0rem 1.0rem; color: #303030; transition: all 0.2s; }
div.article a:hover { background: #f8f8f8; }
div.article a:before { border-right: 0.2rem solid #8dc031; border-top: 0.2rem solid #8dc031; content: ""; display: block; height: 1rem; position: absolute; right: 1rem; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transition: all 0.2s ease-in-out 0s; width: 1rem; }
div.article a div.thumbnail { display: block; float: left; position: relative; text-align: center; z-index: 1; width: 12rem; background: #303030; height: 9rem; border-radius: 0.25rem; overflow: hidden; margin-right: 1.5rem; }
div.article a div.thumbnail img { height: auto; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
div.article a div.information-wrap { float: left; width: calc(100% - 13.5rem); box-sizing: border-box; padding-right: 1.5rem; }
div.article a div.information-wrap div.headline { margin-bottom: 0.25rem; font-weight: bold; }
div.article a div.information-wrap div.description { font-size: 1.4rem; }
div.article a div.information-wrap div.description div.term { margin-bottom: 0.5rem; }
div.article a div.information-wrap div.description div.number { border-radius: 100rem; border: 0.1rem solid #f0f0f0; display: inline-block; padding-left: 1rem; padding-right: 1rem; background: #f8f8f8; white-space: nowrap; }
div.article a div.information-wrap div.description span.material-icons { color: #8dc031; font-size: 1.8rem; vertical-align: middle; position: relative; top: -0.1rem; }

/* ---------------------------- topicPath */
.topicPath { font-size: 1.2rem; display: block; /* margin: 0 auto 40px; background: #4568DC; background: background: linear-gradient(to right, #B06AB3, #4568DC); background: #f8f8f8; */ background: #f2f2f0; text-align: left; }
.topicPath ul { padding: 1rem; /* padding-left: 0.5em; padding-right: 0.5em;	 */ list-style: none; }
.topicPath ul li { display: inline; }
.topicPath ul li a { font-size: 1.2rem; /* font-weight: bold; */ position: relative; padding-right: 1rem; padding-left: 1rem; color: #689d38; /* color: #003e6c; */ font-weight: bold; text-decoration: underline; }
.topicPath ul li:first-child a { padding-left: 0; }
.topicPath ul li span { padding-right: 1rem; padding-left: 1rem; }
.topicPath ul li a:before { width: 0.4rem; height: 0.4rem; position: absolute; top: 50%; right: 0; content: ""; /* border-top: 1px solid #003e6c; border-right: 1px solid #003e6c; */ border-top: 1px solid #689d38; border-right: 1px solid #689d38; transform: translateX(-50%) translateY(-50%) rotate(45deg); transition: all .2s ease-in; }
.topicPath ul li a:hover { text-decoration: none; }

/* ---------------------------- div.page-title */
div.page-title {/* margin-top: 2rem; margin-bottom: 2rem; */ padding-top: 1rem; padding-bottom: 1rem; background: #8dc031; }
div.page-title div.title { /* border: 0.2rem solid #8dc031; */ padding-top: 2rem; padding-bottom: 2rem; text-align: center; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);/* border-top: 1rem solid #a4d4ed; border-right: 1rem solid #cba5bd; border-bottom: 1rem solid #e9afbd; border-left: 1rem solid #aed071; */ }
div.page-title div.title h1 { font-size: 3.0rem; letter-spacing: 0.5rem; font-weight: normal; }
div.page-title div.title h1 div { display: inline-block; }
div.page-title div.title h1 span { color: #8dc031; display: inline-block; }
div.page-title div.description h2 { background: #fff; font-weight: normal; text-align: center; padding-bottom: 1rem; }
div.page-title div.update { background: #f8f8f8; color: #8dc031; text-align: center; font-size: 1.4rem;/*font-family: oswald; */}
div.page-title div.description div.number { border-radius: 100rem; border: 0.1rem solid #f0f0f0; display: inline-block; padding-left: 1rem; padding-right: 1rem; background: #f8f8f8; white-space: nowrap; }
div.page-title div.description span.material-icons { color: #8dc031; font-size: 1.8rem; vertical-align: middle; position: relative; top: -0.1rem; }

/* ---------------------------- div.map */
div.anchor-wrap { position: relative; }
div.anchor-wrap a { position: absolute; top: -8rem; }
div.areamap { max-width: 76.8rem; margin-left: auto; margin-right: auto; }
div.areamap img { width: 76.8rem; }
/* */
div.menu-select { padding-top: 4rem; padding-bottom: 4rem; }
div.menu-select ul li { width: 48%; float: left; margin-right: 4%; }
div.menu-select ul li:nth-child(2) { margin-right: 0; }