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

#grobal-nav { border-bottom: 2px solid #9ED236; padding-bottom: 15px; }
#main-img img { width: 100%; height: auto; }

.topicpath { width: 100%; font-size: 0.813em; line-height: 1.3em; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; }
.topicpath li::after { content: "＞"; margin: 0 3px; }
.topicpath li:last-child::after { display: none; }
.topicpath li a { color: #6A6969; text-decoration: none; }
.topicpath li a:hover { text-decoration: underline; }



h2 { font-family: "Rounded Mplus 1c"; width: 100%; background: url(../../images/bg_dot.png) repeat-x bottom; font-size: 1.625em; position: relative; padding: 10px 0 10px 20px; margin-top: 20px; }
h2::before { content: ""; background: url(../../images/bg_info.png) repeat-y; width: 8px; height: 70%; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; }
h3,.facility h4 { background: #D8EDAE; padding: 10px 15px; font-size: 1.063em; margin-top: 60px; font-weight: bold; font-family: "Rounded Mplus 1c"; }
h3 + p,.facility h4 + p { margin-top: 10px; }

main { margin-top: 40px; }
main p { font-size: 0.938em; line-height: 1.5em; }
main p + p { margin-top: 20px; }
h3 + p { margin-top: 10px; }
p + .disc { margin-top: 5px; }
.disc + p { margin-top: 20px; }
strong { font-weight: bold; }
aside { margin-top: 40px; }

.other + .other { margin-top: 50px!important; }


/* ---------------------------------------------------
施設
--------------------------------------------------- */
.facility h3 { background: none; padding: 0; font-size: 1.375rem; }
.facility h3::before { content: ""; display: inline-block; width: 16px; height: 16px; background: url(../../parkinfo/images/ic_arrow.png); margin-right: 10px; }
.facility p.btn { font-size: 0.813em; text-align: left; }
.facility p.btn img { margin-bottom: 3px; }

ul.img { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-top: 25px; }
ul.img li { width: 49%; }

dl.qa { line-height: 1.5em; font-size: 0.938em; }
dl.qa dt { margin-top: 25px; text-indent: -1em; margin-left: 1em; }
dl.qa dd { text-indent: -1em; margin-left: 1em; }

/* ---------------------------------------------------
お問い合わせ
--------------------------------------------------- */
#form table { font-size: 0.875em; margin-top: 30px; width: 100%; }
#form td,#form th { padding: 10px; border-bottom: 1px solid #D5D5D5; box-sizing: border-box; }
#form th { text-align: left; vertical-align: top; background: #F1F1F1; }
#form tr:last-child th,#form tr:last-child td { border: none; }
#form input[type=text],#form textarea { border: 1px solid #D5D5D5; padding: 5px 10px; font-size: 1em; width: 100%; box-sizing: border-box; }

#form th span { color: #F00; font-size: 0.750em; }

.btn { margin-top: 20px; text-align: center; }
.btn input[type=submit] { border: 1px solid #D5D5D5; font-size: 0.750em; border-radius: 5px; padding: 5px 10px; background: #F1F1F1; }


/* ---------------------------------------------------
ブログ・イベント
--------------------------------------------------- */
.blog section,.event section,.volunteer section { border: 1px solid #D0D0D1; padding: 15px; box-sizing: border-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
.blog section .img,.event section .img,.volunteer section .img { width: 170px; }
.blog section .txt,.event section .txt,.volunteer section .txt { width: calc(100% - 200px); }
.blog section .txt h3,.event section .txt h3,.volunteer section .txt h3 { background: none; padding: 0; margin-top: 10px; line-height: 1.3em; }
.blog section .txt h3 a,.event section .txt h3 a,.volunteer section .txt h3 a { color: #6A6969; text-decoration: none; }
.blog section .txt h3 a:hover,.event section .txt h3 a:hover,.volunteer section .txt h3 a:hover { text-decoration: underline; }
.blog section .txt h3 + p,.event section .txt h3 + p,.volunteer section .txt h3 + p  { border-top: 1px solid #D0D0D1; padding-top: 10px; margin-top: 20px }
.blog section + section,.event section + section,.volunteer section + section,.volunteer p + section { margin-top: 20px; }

main.blog .detail p.date { font-size: 0.875em; text-align: right; }
main.blog .detail .img { margin-top: 20px; }

.pagination { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin-top: 40px; }
.pagination li { width: 30px; margin: 0 5px; }
.pagination li a,.pagination li span { background: #b4b4b4; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; height: 30px; text-decoration: none; color: #FFF; }
.pagination li a:hover,.pagination li a.active { background: #9ed236; }

.event p.date,.volunteer p.date { position: relative; }
.event p.date::before,.volunteer p.date::before { width: 130px; text-align: center; display: inline-block; font-size: 0.857em; padding: 2px 10px; color: #FFF; margin-right: 10px; }
.event p.date::after,.volunteer p.date::after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 0; }
.info p.date::before { content: "イベント情報"; background: #F1F000; color: #6A6969; }
.info p.date::after{ border-color: #FB5850 transparent transparent transparent; } 
.guide p.date::before { content: "イベント案内"; background: #9ED236; }
.guide p.date::after { border-color: #FFD400 transparent transparent transparent; }
.report p.date::before { content: "イベント報告"; background: #FB5850; }
.report p.date::after { border-color: #9ED236 transparent transparent transparent; }
.schedule p.date::before { content: "イベントスケジュール"; background: #35B1FF; }
.schedule p.date::after { border-color: #F1F000 transparent transparent transparent; }
.event .detail p.date,.volunteer .detail p.date { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
.event .detail .img,.volunteer .detail .img { margin-top: 20px; }

.volunteer .info p.date::before { content: "ボランティア情報"; }
.volunteer .report p.date::before { content: "ボランティア報告"; }
.volunteer .guide p.date::before { content: "ボランティア募集"; }

.volunteer ul.link,ul.inquiry { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-top: 20px; }
.volunteer ul.link li { width: 31%; }
.volunteer ul.center { -webkit-justify-content: space-around; justify-content: space-around; margin-top: 50px; }


/* ---------------------------------------------------
予約フォーム
--------------------------------------------------- */
dl.use { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; line-height: 1.5em; font-size: 0.938em; }
dl.use dt { width: 5em; margin-top: 2px; }
dl.use dd { width: calc(100% - 5em); margin-top: 2px; }
dl.use dd ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
dl.use dd ul li { width: 45%; display: -webkit-flex; display: flex; }
dl.use dd ul li span { margin-left: auto; }
dl.use dd ul li::before { content: "○"; }
dl.use dd:nth-child(6),dl.use dd:nth-child(8) { width: 100%; }
dl.use dt:nth-child(7) { width: 6em; }

ul.inquiry li { width: 45%; font-size: 0.875em; line-height: 1.5em; }
ul.inquiry li img { margin-bottom: 10px; }


main h3:first-child { margin-top: 0; }
.disc { list-style: disc; margin-top: 20px; margin-left: 1.5em; font-size: 0.938em; line-height: 1.5em; }
.kome { margin-top: 10px; }
.kome li { text-indent: -1em; margin-left: 1em; font-size: 0.938em; line-height: 1.5em; } 
.kome + p { margin-top: 10px; }

.cal h4 { font-weight: bold; margin-top: 40px; }
.cal table { margin-top: 10px; }
.cal td { border-bottom: 1px solid #D0D0D1; padding: 10px; font-size: 0.688em; } 
.cal th { border-bottom: 1px solid #D0D0D1; background: #F1F1F1; padding: 10px; font-weight: bold; }
.gray { background: #F1F1F1; }
.cal { text-align: center; }
.cal .sun { color: #FF0000; }
.cal .sat { color: #0000FF; }
.cal strong,.cal a { font-size: 1.375em; margin-top: 10px; display: inline-block; color: #6a6969; text-decoration: none; }
.today { background: #eef7db; }

.cal ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-top: 20px; }
.cal ul li a { color: #6A6969; text-decoration: none; font-size: 0.875em; }
.cal ul li a:hover { text-decoration: underline; }

.barbecue #form table { margin-top: 20px; }
.barbecue #form { margin-top: 0; }

/* ---------------------------------------------------
アクセス
--------------------------------------------------- */
#map { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-top: 20px; }
#map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

dl.information { display: -webkit-flex; display: flex; margin-top: 40px; font-family: 0.875em; line-height: 1.5em; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
dl.information dt { background: #9ED236; border-bottom: 1px solid #FFF; color: #FFF; width: 135px; padding: 10px 10px; box-sizing: border-box; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
dl.information dd { border-bottom: 1px solid #000; width: calc(100% - 135px); padding: 10px 15px; box-sizing: border-box; }
dl.information dd:nth-child(2) { border-top: 1px solid #000; } 
dl.information dd .disc { margin-top: 0; }


.mtop15 { margin-top: 15px; }

ol.decimal { list-style: decimal; margin-left: 2em; font-size: 0.938em; line-height: 1.5em; }
ol.decimal li { margin-top: 20px; }

main a { color: #9ED236; text-decoration: none; }
main a:hover { text-decoration: underline; }

.link-btn { margin-top: 10px; }
.link-btn a { background: #f1f000; font-family: "Rounded Mplus 1c"; display: block; width: 230px; color: #6a6969; text-align: center; padding: 15px 0; position: relative; }
.link-btn a::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 0; border-color: #FB5850 transparent transparent transparent; }
.link-btn a:hover { text-decoration: none; background: rgba(240,241,0,0.55); transition: .3s; }

dl.flow dt { font-family: "Rounded Mplus 1c"; font-size: 1.500em; font-weight: bold; margin-top: 30px; }
dl.flow dd { font-size: 0.938em; line-height: 1.5em; margin-top: 10px; }
dl.flow dd img { margin-top: 5px; }
dl.flow dd .link-btn a { min-width: 340px; }
dl.flow dd .link-btn a.green { background: #9ed236; color: #FFF; }
dl.flow dd .link-btn a.green::before { border-color: #f1f000 transparent transparent transparent; }
dl.flow + p { margin-top: 40px; }

strong { font-weight: bold; }
.indent { text-indent: -1em; margin-left: 1em; }
.red { color: #F00; }

@media screen and (max-width:767px) {
	.topicpath { display: none; }

	aside ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
	aside ul li { width: 48%; }
	aside ul li:first-child { order: 1; }
	aside ul li:nth-child(2) { order: 2; }
	aside ul li:nth-child(3) { order: 3; }
	aside ul li:nth-child(4) { order: 8; width: 100%; }
	aside ul li:nth-child(5) { order: 5; }
	aside ul li:nth-child(6) { order: 4; }
	aside ul li:nth-child(7) { order: 6; }
	aside ul li:nth-child(8) { order: 7; }
}

@media screen and (max-width:568px) {
	aside { width: 320px; margin: 40px auto 0 auto; }	
	
	aside ul { display: block; height: auto; }
	aside ul li { width: 100%; }

/* ---------------------------------------------------
施設
--------------------------------------------------- */
	.facility p.btn { font-size: 0.813em; text-align: center; }
	.facility p.btn img { width: 320px; height: auto; }
	

/* ---------------------------------------------------
お問い合わせ
--------------------------------------------------- */	
	#form table { border: 1px solid #D5D5D5; }
	#form td,#form th { display: block; border: none; }
	#form th { width: 100%; }
	
	
/* ---------------------------------------------------
ブログ
--------------------------------------------------- */
	.blog section,.event section,.volunteer section { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
	.blog section .img,.event section .img,.volunteer section .img { width: 100%; text-align: center; margin-top: 20px; order: 1; }
	.blog section .txt,.event section .txt,.volunteer section .txt { width: 100%; margin-top: 15px; margin-top: 0; order: 0; }
	
	.volunteer ul.link,ul.inquiry { -webkit-flex-direction: column; flex-direction: column; }
	.volunteer ul.link li { width: 250px; margin-left: auto; margin-right: auto; }
	.volunteer ul.link li + li,ul.inquiry li + li { margin-top: 25px; }
	.volunteer ul.link li img,ul.inquiry li img { display: none; }
	.volunteer ul.link li img.sp,ul.inquiry li img.sp { display: inline-block; }
	
	ul.inquiry li { width: 288px; margin-left: auto; margin-right: auto; }
	

/* ---------------------------------------------------
アクセス
--------------------------------------------------- */
	dl.information { -webkit-flex-direction: column; flex-direction: column; }
	dl.information dt { display: block; width: 100%; border: none; }
	dl.information dd { display: block; width: 100%; border: none; }
	dl.information dd:nth-child(2) { border: none; } 
	
	
	dl.use dd ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
	dl.use dd ul li { width: 100%; }
	
}