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

/* ----------------------------------------------------------------------
 reset css
---------------------------------------------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, /*table, */ caption, /*tbody, tfoot, thead, tr, th, td, */ article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: 300;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: #393939;
  transition: .3s ease-in-out;
}
/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input, select {
  vertical-align: middle;
}
strong {
  font-weight: bold;
}
/* ----------------------------------------------------------------------
 基本設定
---------------------------------------------------------------------- */

body {
  width: 100%;
  font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #393939;
  font-size: 16px;
  line-height: 160%;
  text-align: center;
  letter-spacing: 2px;
}
.box-m-b-80 {
  margin: 0 0 80px 0;
}
.clearfix::after {
  clear: both;
  content: "";
  display: block;
}
/*文字オプション*/
.smaller-text {
  font-size: 10px
}
.small-text {
  font-size: 14px
}
.bigger-text {
  font-size: 20px;
}
.none-text {
  text-transform: none
}
.strong-text {
  font-weight: 900
}
.lighter {
  font-weight: 300
}
.bolder {
  font-weight: 600
}
.lightGray {
  color: #848484;
}
.Gray {
  color: #393939;
}
.blue {
  color: #008bba;
}
.red {
  color: #e9545d;
}
.orange {
  color: #ef8200;
}
.white {
  color: #fff;
}
.pink {
  color: #ee848c;
}
.green {
  color: #009d95;
}
.purple {
  color: #796bae;
}
.text_space-2 {
  letter-spacing: 0;
}
.text-size00 {
  font-size: 0px;
}
.text-size16 {
  font-size: 16px;
}
.text-size32 {
  font-size: 32px;
}
.text-size50 {
  font-size: 50px;
}
.text-lineheight100 {
  line-height: 100px;
}
img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
img.alignright {
  margin: 0 0 20px 10px !important;
  display: inline;
}
img.alignleft {
  margin: 0 20px 10px 0 !important;
  display: inline;
}
.text_page_text img.alignright {
  margin: 0 -20px 20px 10px !important;
}
.text_page_text img.alignleft {
  margin: 0 20px 10px -20px !important;
}
.alignright {
  float: right;
}
.alignleft {
  float: left;
}
.pc_hide {
  display: none;
}
/* ----------------------------------------------------------------------
 告知バッジ
---------------------------------------------------------------------- */

#notification {
  position: absolute;
  right: 112px;
  top: 64px;
  text-indent: -999999px;
  overflow: hidden;
  display: block;
  background: url("../img/attention_badge.png") no-repeat;
  background-size: 220px 220px;
  width: 220px;
  height: 220px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/* ----------------------------------------------------------------------
 ヘッダー
---------------------------------------------------------------------- */
header {
  margin: 0 0 100px 0;
}
#top_header_inner {
  height: 472px;
  background-attachment: fixed;
  background-image: url(../img/top_main_img_18_7_v3.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  padding: 32px 0 96px;
}
#top_LogoText_inner {
  /*	background-color: rgba(50,50,50,0.6);
	width: 50%;
	margin: 0 auto; 
	border-radius: 30px; */
  padding: 44px;
}
#top_logo {
  font-size: 0px;
  height: 140px;
  width: 100%;
  background-image: url(../img/top_logo_w1000.png);
  background-size: 189px 140px;
  background-repeat: no-repeat;
  background-position: center center;
}
.homeLink {
  width: 330px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-decoration: none;
}
#under_logo {
  margin: 72px 0 62px;
  font-size: 0px;
  height: 70px;
  width: 100%;
  background-image: url(../img/under_logo_w660.png);
  background-size: 330px 70px;
  background-repeat: no-repeat;
  background-position: center center;
}
#under_header_inner {
  height: 110px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top center;
  padding: 100px 0;
}
.header_img_concept {
  background-image: url(../img/under_main_concept.png);
}
.header_img_news {
  background-image: url(../img/under_main_news.png);
}
.header_img_style {
  background-image: url(../img/under_main_style.png);
}
.header_img_report {
  background-image: url(../img/under_main_report.png);
}
.under_main_text {
  margin: 40px 0 0 0;
}
.top_main_text {
  margin: 0;
}
h2 {
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 2px #000;
}
.pages_title_32px {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  font-size: 32px;
  line-height: 120%;
  text-shadow: 0 0 5px #000;
}
header nav ul {
  margin: 0 auto;
  width: 1000px;
  display: block;
  text-align: center;
}
header nav li {
  font-weight: 700;
  float: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
header nav li a {
  text-decoration: none;
  padding: 40px 0 0 0;
  margin: 0;
  background-image: url(../img/nav_bg_off.png);
  background-repeat: no-repeat;
  background-position: center center;
  height: 56px;
  width: 200px;
  display: block;
  line-height: 1;
}
header nav li a span {
  font-size: 80%;
  font-weight: 700;
}
header nav li.nav_blue a:hover {
  background-image: url(../img/nav_bg_on_blue.png);
  color: #008bba;
}
header nav li.nav_red a:hover {
  background-image: url(../img/nav_bg_on_red.png);
  color: #e9545d;
}
header nav li.nav_orange a:hover {
  background-image: url(../img/nav_bg_on_orange.png);
  color: #ef8200;
}
header nav li.nav_blue_on {
  background-image: url(../img/nav_bg_on_blue.png);
  background-repeat: no-repeat;
  background-position: center center;
}
header nav li.nav_red_on {
  background-image: url(../img/nav_bg_on_red.png);
  background-repeat: no-repeat;
  background-position: center center;
}
header nav li.nav_orange_on {
  background-image: url(../img/nav_bg_on_orange.png);
  background-repeat: no-repeat;
  background-position: center center;
}
/* ----------------------------------------------------------------------
 フッター
---------------------------------------------------------------------- */

footer {
  color: #ffffff;
  background-color: #333333;
  padding: 40px 0;
}
footer #footer-nav ul {
  margin: 0 auto;
  width: 96%;
  max-width: 960px;
  display: block;
  text-align: center;
}
footer #footer-nav li {
  width: 16%;
  float: left;
  border-right: 1px solid #fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
/*footer #footer-nav li:first-Child {
	margin-left: 8%;
}*/
footer #footer-nav li.last-child {
  border-right: none;
}
footer #footer-nav li a {
  text-decoration: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
}
footer a:link {
  color: #fff;
}
footer a:visited {
  color: #fff;
}
footer a:hover {
  color: #ccc;
}
footer a:active {
  color: #fff;
}
footer .FooterLogo {
  margin: 30px 0;
}
footer small {
  margin: 30px 0 10px 0;
  font-size: 12px;
  font-weight: 100;
}
/* ----------------------------------------------------------------------
 ページトップ
---------------------------------------------------------------------- */

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 12px;
}
#page-top a {
  text-decoration: none;
  color: #ffffff;
  background-image: url(../img/arrow_top.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #e9545d;
  text-align: center;
  border-radius: 5px;
  padding: 30px 5px 5px;
  display: block;
}
#page-top a:hover {
  text-decoration: none;
  background-color: #eab7ba;
}
/* ----------------------------------------------------------------------
 コンテンツ
---------------------------------------------------------------------- */

.content {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
/* ----------------------------------------------------------------------
 パンくず
---------------------------------------------------------------------- */

#pankuzu-area {
  text-align: left;
  padding: 0 0 0 20px;
  margin: 20px 0;
}
#pankuzu-area a {
  color: #008bba;
}
#pankuzu-area a:hover {
  opacity: 0.4;
  -moz-opacity: 0.4;
  filter: alpha(opacity=40);
}
#pankuzu-area > span {
  /*float: left;*/
  margin-left: 2em;
  display: inline;
}
#pankuzu-area > span:before {
  content: ">";
  margin-right: 2em;
}
#pankuzu-area > span:first-child {
  display: none;
}
#pankuzu-area > span:nth-child(2) {
  margin: 0;
}
#pankuzu-area > span:nth-child(2):before {
  content: none;
}
/* ----------------------------------------------------------------------
コンテンツタイトル共通
---------------------------------------------------------------------- */

.content-title {
  font-size: 0px;
  height: 80px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
#leadcopy-area p {
  margin: 88px 0 88px;
  padding: 0 20px;
}
/* ----------------------------------------------------------------------
新着情報
---------------------------------------------------------------------- */

#area-news {
  margin: 0 auto 100px;
  width: 100%;
  max-width: 1000px;
  text-align: left;
}
#area-news .NewsList_wrapper {
  padding: 0 20px;
}
.area-news-title {
}
#area-news dl.NewsList {
  padding: 20px 0;
  border-bottom: 1px dashed #c4c4c4;
}
#area-news dt {
  font-size: 14px;
  width: 14%;
  margin: 0;
  padding: 0;
  display: block;
  float: left;
}
#area-news dt.NewsList_tag_orange {
  border-left: 24px solid #ef8200;
  text-indent: 10px;
}
#area-news dt.NewsList_tag_blue {
  border-left: 24px solid #008bba;
  text-indent: 10px;
}
#area-news dt.NewsList_tag_red {
  border-left: 24px solid #e9545d;
  text-indent: 10px;
}
#area-news dt.NewsList_tag_pink {
  border-left: 24px solid #ee848c;
  text-indent: 10px;
}
#area-news dt.NewsList_tag_gray {
  border-left: 24px solid #909090;
  text-indent: 10px;
}
#area-news dt.NewsList_Date {
  margin: 0 20px;
}
#area-news dd {
  width: 64%;
  width: calc( 100% - 14% - 24px );
  float: left;
  display: block;
}
#area-news dd.newsListReport {
  width: 64%;
}
.area-news-past {
  font-size: 12px;
  text-align: right;
}
#area-news a {
}
#area-news a:hover {
  opacity: 0.4;
  -moz-opacity: 0.4;
  filter: alpha(opacity=40);
}
/* ----------------------------------------------------------------------
三川STYLE
---------------------------------------------------------------------- */

#sansen-style {
}
#style-nav ul {
  /*font-size: 0px;*/
  margin: 0 auto 72px;
  width: 100%;
  max-width: 1000px;
  display: block;
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 640px) {
#style-nav ul {
  display: block;
}
}
#style-nav li.btn_sansenstyle {
  width: 33%;
}

@media screen and (min-width: 640px) {
#style-nav li.btn_sansenstyle {
  min-width: 330px;
}
}
/*#style-nav li.btn_activity {
	width: 33%;
}
#style-nav li.btn_event {
	width: 33%;
}*/
#style-nav li {
  float: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
/*#style-nav li.btn_marche a {
	background-image: url(../img/style_btn_marche.png);
}
#style-nav li.btn_activity a {
	background-image: url(../img/style_btn_activity.png);
}
#style-nav li.btn_event a {
	background-image: url(../img/style_btn_event.png);
}*/
#style-nav li a {
  background-repeat: no-repeat;
  background-size: 340px auto;
  background-position: center center;
  height: 160px;
  display: block;
  transition: .8s ease-in-out;
  text-decoration: none;
  text-shadow: 2px 2px 5px #000000, -1px -1px 2px #9A9A9A;
}
#style-nav li a {
  text-shadow: 3px 3px 3px #FFFFFF, -3px -3px 3px #FFFFFF, 3px -3px 3px #FFFFFF, -3px 3px 3px #FFFFFF;
  color: #e9545d;
  color: #444444;
}
#style-nav li a span.text-size16 {
  text-shadow: 1px 1px 1px #FFFFFF, -1px -1px 1px #FFFFFF, 1px -1px 1px #FFFFFF, -1px 1px 1px #FFFFFF;
}
/*#style-nav li.btn_marche a:hover {
	background-image: url(../img/style_btn_marche_cr.png);
}
#style-nav li.btn_activity a:hover {
	background-image: url(../img/style_btn_activity_cr.png);
}
#style-nav li.btn_event a:hover {
	background-image: url(../img/style_btn_event_cr.png);
}*/
#style-nav li a:hover {
  opacity: 0.7;	/*background-size: 340px 340px;*/
}
#sansen-style .sansen-style {
  background-image: url(../img/title_SansenStyle.png);
  background-size: 305px 80px;
  margin: 8px 0 24px;
}
#sansen-style p {
  padding: 0 20px;
  margin: 0 0 72px;
}
#style-nav li.btn_sansenstyle a {
  position: relative;
}
#style-nav li.btn_sansenstyle p {
  padding: 0 0 20px;
  background-color: hsla(0,0%,100%,0.70);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 4rem;
}
.sansenstyleEvent p {
  color: #008bba;
}
.sansenstyleInformation p {
  color: #e9545d;
}
#style-nav li.btn_sansenstyle p span {
  line-height: 1;
}
/* ----------------------------------------------------------------------
三川STYLE 記事
---------------------------------------------------------------------- */

#sansen-cont {
  text-align: left;
  width: 100%;
  max-width: 960px;
  margin: 0 auto 72px;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}

@media screen and (min-width: 769px) {
#sansen-cont::after {
  content: "";
  display: block;
  width: calc( 100% / 3 );
}
}
#sansen-cont img {
  width: auto;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.sansen-cont-element {
  /*  padding: 0;
  margin: 0 0 2%;
  display: inline-block;
  vertical-align: top;
  width: 32%;
  /*float: left;*/
  /*-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: thin solid #666666;*/
  padding: 0;
  margin: 0;
  display: inline-block;
  vertical-align: top;
  /*width: 32%;*/
  width: calc( 100% / 3 );
  /*float: left;*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.sansen-cont-element a {
  display: block;
  float: left;
  text-decoration: none;
  width: 100%;
}
.sansen-cont-element a:hover {
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter: alpha(opacity=80);
}
.sansen-cont-element ul {
  padding: 20px;
  background-color: #FEEFF9;
}
.sansen-cont-element ul.sansen-cont-bg-gray {
  background-color: #EBEBEB;
}

@media screen and (min-width:640px) and ( max-width:768px) {
.sansen-cont-element ul, .sansen-cont-element ul.sansen-cont-bg-gray {
  background-color: #FFFFFF;
}
}
.sansen-cont-element li {
  margin: 0 0 10px 0;
}
.sansen-cont-element li.last-child {
  margin: 0;
}
.sansen-cont-element-activity {
  background-color: #008bba;
  margin: 0;
  padding: 8px;
}
.sansen-cont-element-event {
  background-color: #e9545d;
  margin: 0;
  padding: 8px;
}
.sansen-cont-element-marche {
  background-color: #ef8200;
  margin: 0;
  padding: 8px;
}
.sansen-cont-element-area {
}
.sansen-cont-element-img {
  /*width: 280px;*/
  width: 100%;
  /*height: 168px;
  height: 232px;*/
  height: 220px;
  overflow: hidden;
  display: block;
  position: relative;
}
.sansen-cont-element-img img {
}
.sansen-cont-element-title {
}
.sansen-cont-element-title h3 {
}
.sansen-cont-element-date, .sansen-cont-element-sent {
  font-size: 14px;
}
/* ----------------------------------------------------------------------
トップ　淀川河川公園　一覧
---------------------------------------------------------------------- */
#yodogawa-park .yodogawa-park {
  background-image: url(../img/title_YodogawaPark.png);
  background-size: 350px 80px;
  margin: 8px 0 24px;
}
#yodogawa-park p {
  padding: 0 20px;
  margin: 0 0 72px;
}
#yodogawa-park-cont {
  text-align: left;
  width: 100%;
  max-width: 960px;
  margin: 0 auto 72px;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}
#yodogawa-park-cont::after {
  content: "";
  display: block;
  width: calc( 100% / 3 );
}
#yodogawa-park-cont img {
  width: auto;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.yodogawa-park-cont-element {
  padding: 0;
  margin: 0;
  display: inline-block;
  vertical-align: top;
  /*width: 32%;*/
  width: calc( 100% / 3 );
  /*float: left;*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.yodogawa-park-cont-element a {
  display: block;
  float: left;
  text-decoration: none;
  width: 100%;
}
.yodogawa-park-cont-element a:hover {
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter: alpha(opacity=80);
}
.yodogawa-park-cont-element ul {
  padding: 20px;
}
.yodogawa-park-cont-element ul {
  background-color: #E7F9FF;
}
.yodogawa-park-cont-element ul.yodogawa-park-cont-bg-gray {
  background-color: #EBEBEB;
}

@media screen and (min-width:640px) and ( max-width:768px) {
.yodogawa-park-cont-element ul, .yodogawa-park-cont-element ul.sansen-cont-bg-gray {
  background-color: #FFFFFF;
}
}
.yodogawa-park-cont-element li {
  margin: 0 0 10px 0;
}
.yodogawa-park-cont-element li.last-child {
  margin: 0;
}
.yodogawa-park-cont-element-activity {
  background-color: #008bba;
  margin: 0;
  padding: 8px;
}
.yodogawa-park-cont-element-event {
  background-color: #e9545d;
  margin: 0;
  padding: 8px;
}
.yodogawa-park-cont-element-marche {
  background-color: #ef8200;
  margin: 0;
  padding: 8px;
}
.yodogawa-park-cont-element-area {
}
.yodogawa-park-cont-element-img {
  /*width: 280px;*/
  width: 100%;
  /*height: 168px;
  height: 232px;*/
  height: 220px;
  overflow: hidden;
  display: block;
  position: relative;
}
.yodogawa-park-cont-element-img img {
}
.yodogawa-park-cont-element-title {
}
.yodogawa-park-cont-element-title h3 {
}
.yodogawa-park-cont-element-date, .yodogawa-park-cont-element-sent {
  font-size: 14px;
}
.yodogawa-park-cont-element .endinfo {
  margin: 10px 10px 0;
  font-size: 1rem;
  color: #D90000;
  font-weight: 600;
  text-align: center;
  border: 1px solid #D90000;
  border-radius: 5px;
  background: #FCEBEB;
}
/* ----------------------------------------------------------------------
各下層ページ　ページャー
---------------------------------------------------------------------- */

.media_list_pager {
  text-decoration: none;
}
.btn_pager_next_20 {
  text-decoration: none;
  display: block;
  width: 550px;
  height: 72px;
  background-image: url(../img/arrow_right.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 30px 20px;
  padding: 16px 0 0;
  margin: 100px auto 0;
  border: 5px solid #999;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.pagenavi {
}
.page, .previouspostslink, .nextpostslink, .current {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  padding: 10px 16px;
  margin: 20px 5px 150px 5px;
  background-color: #848484;
  border: thin solid #848484;
}
.current {
  background-color: #fff;
  color: #848484
}
.media_list_pager a:hover {
  color: #fff;
  background-color: #cbcbcb
}
/* ----------------------------------------------------------------------
エリアガイド
---------------------------------------------------------------------- */

#area-guide {
}
#area-guide .area-guide {
  background-image: url(../img/title_AreaGuide.png);
  background-size: 305px 80px;
  margin: 80px 0;
}
#area-guide ul.area-guide-List {
  font-size: 0px;
  line-height: 0px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
#area-guide li {
  background-size: 270px 90px;
}
#area-guide li.area-guide-Small {
  height: 100px;
  width: 25%;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
}
#area-guide li.area-guide-Big {
  height: 100px;
  width: 50%;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
}
#area-guide a {
  height: 100px;
  width: 100%;
  display: inline-block;
}
#area-guide a:hover {
  background-color: #ffffff;
  opacity: 0.4;
  -moz-opacity: 0.4;
  filter: alpha(opacity=40);
}
.city-Kyoto {
  background-color: #3c3273;
  background-image: url(../img/btn_city_kyoto.png);
}
.city-muko {
  background-color: #0064ff;
  background-image: url(../img/btn_city_muko.png);
}
.city-nagaokakyo {
  background-color: #338233;
  background-image: url(../img/btn_city_nagaokakyo.png);
}
.city-yawata {
  background-color: #463200;
  background-image: url(../img/btn_city_yawata.png);
}
.city-oyamasaki {
  background-color: #32b464;
  background-image: url(../img/btn_city_oyamasaki.png);
}
.city-kumiyama {
  background-color: #000096;
  background-image: url(../img/btn_city_kumiyama.png);
}
.city-hirakata {
  background-color: #b43333;
  background-image: url(../img/btn_city_hirakata.png);
}
.city-shimamoto {
  background-color: #5064b4;
  background-image: url(../img/btn_city_shimamoto.png);
}
.city-kyoto-pref {
  background-color: #503282;
  background-image: url(../img/btn_city_kyotoPref.png);
}
.city-osaka-pref {
  background-color: #0046f0;
  background-image: url(../img/btn_city_osakaPref.png);
}
/* ----------------------------------------------------------------------
アクセス
---------------------------------------------------------------------- */

#access-area {
}
#access-area .access-area {
  background-image: url(../img/title_Access.png);
  background-size: 305px 80px;
  margin: 80px 0 24px;
}
#access-area p {
  margin: 0 0 54px;
}
#access-area .access-google-map {
  margin: 0 auto 56px;
  position: relative;
  width: 100%;
  max-width: 1000px;
  padding-bottom: 450px;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
#access-area .access-google-map iframe, #access-area .access-google-map object, #access-area .access-google-map embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* ----------------------------------------------------------------------
コンセプト
---------------------------------------------------------------------- */

#concept-cont {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
#concept-cont ul {
  margin: 0 0 80px;
}
#concept-cont li a {
  text-decoration: none;
  display: block;
  height: 56px;
  padding: 32px 0 0;
}
#concept-cont li a:hover {
  opacity: 0.4;
  -moz-opacity: 0.4;
  filter: alpha(opacity=40);
}
#concept-cont li.concept_menu_left {
  float: left;
  width: 50%;
  background-color: #008bba;
}
#concept-cont li.concept_menu_right {
  float: left;
  width: 50%;
  background-color: #90cde1;
}
#concept-cont li.concept_menu_on {
  background-image: url(../img/arrow_bottom.png);
  background-repeat: no-repeat;
  background-size: 20px 30px;
  background-position: bottom center;
}
#concept-cont li.concept_img img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
dl.concept_view_box {
  display: block;
  text-align: left;
  width: 100%;
  max-width: 1000px;
  height: 350px;
  margin: 0 auto 20px;
  background-size: 350px 350px;
  background-repeat: no-repeat;
  background-position: top right;
}
dl.concept_bg_img_01 {
  background-image: url(../img/concept_view_001.png);
}
dl.concept_bg_img_02 {
  background-image: url(../img/concept_view_002.png);
}
dl.concept_bg_img_03 {
  background-image: url(../img/concept_view_003.png);
}
dl.concept_bg_img_04 {
  background-image: url(../img/concept_view_004.png);
}
dt.concept_view_name {
  font-size: 40px;
  line-height: 160%;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  padding: 40px 20px 20px;
}
dd.concept_view_text {
  width: 58%;
  padding: 20px;
}
dl.concept_base_box {
  display: block;
  text-align: left;
  width: 100%;
  max-width: 1000px;
  height: 400px;
  margin: 0 auto 120px;
  background-size: 400px 400px;
  background-repeat: no-repeat;
}
dl.concept_base_img_01 {
  background-image: url(../img/concept_base_001.png);
  background-position: top right;
}
dl.concept_base_img_02 {
  background-image: url(../img/concept_base_002.png);
  background-position: top left;
}
dl.concept_base_img_03 {
  background-image: url(../img/concept_base_003.png);
  background-position: top right;
}
dl.concept_base_img_04 {
  background-image: url(../img/concept_base_004.png);
  background-position: top left;
}
dt.concept_base_name {
  font-size: 40px;
  line-height: 160%;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  padding: 40px 20px 20px;
}
dt.concept_base_name_ml420 {
  font-size: 40px;
  line-height: 160%;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  padding: 40px 20px 20px;
  margin: 0 0 0 420px;
}
dd.concept_base_text {
  width: 52%;
  padding: 20px 0 0 20px;
}
dd.concept_base_text_ml420 {
  width: 52%;
  padding: 20px 0 0 20px;
  margin: 0 0 0 420px;
}
dd.concept_base_text a:hover {
  opacity: 0.4;
  -moz-opacity: 0.4;
  filter: alpha(opacity=40);
}
.concept_reple_area {
  width: 100%;
  max-width: 1000px;
  padding: 54px;
  margin: 0 auto 80px;
  background-color: #f7f7f7;
  border: 5px solid #008bba;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
/* ----------------------------------------------------------------------
利用規約
---------------------------------------------------------------------- */
#concept-cont.kiyaku h3 {
  font-size: 40px;
  line-height: 160%;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  padding: 0;
  margin: 0;
  color: #008bba;
}
#concept-cont.kiyaku h4 {
  font-size: 32px;
  line-height: 160%;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  padding: 0;
  margin: 30px 0;
}
#concept-cont.kiyaku p {
  text-align: left;
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph; /* 両端揃えの種類 */
}
#concept-cont.kiyaku .concept_reple_area {
  font-size: 20px;
  line-height: 160%;
  margin-top: 50px;
  padding: 50px;
}
#concept-cont.kiyaku .concept_reple_area p {
  text-align: center;
}
#concept-cont.kiyaku .concept_reple_area p span {
  padding-left: 0.5em;
}
#concept-cont.kiyaku .concept_reple_area.noteGuide {
  border: 5px solid #e9545d;
  padding-right: 0;
  padding-left: 0;
}
/* ----------------------------------------------------------------------
レスポンシブメニュー
---------------------------------------------------------------------- */

/* header */

/* Transition */
/*
#top-head,
#top-head .logo,
#global-nav ul li,
#global-nav ul li a {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
*/



/* Toggle Button */
#nav-toggle {
  display: none;
  position: absolute;
  right: 12px;
  top: 14px;
  width: 34px;
  height: 36px;
  cursor: pointer;
  z-index: 101;
}
#nav-toggle div {
  position: relative;
}
#nav-toggle span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #666;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 11px;
}
#nav-toggle span:nth-child(3) {
  top: 22px;
}
/* ----------------------------------------------------------------------
各記事ページ
---------------------------------------------------------------------- */

.left-content {
  width: 800px;
  margin: 0 30px 80px 0;
  float: left;
}
#left-page {
  text-align: left;
  width: 100%;
}
#left-page li {
  float: left;
}
#left-page li p {
  padding: 10px 10px 10px 30px;
}
.page_cont_category_new {
  width: 30%;
  background-color: #ee848c;
}
.page_cont_category_marche {
  width: 30%;
  background-color: #ef8200;
}
.page_cont_category_activity {
  width: 30%;
  background-color: #008bba;
}
.page_cont_category_event {
  width: 30%;
  background-color: #e9545d;
}
.page_cont_area {
  width: 70%;
  background-color: #f7f7f7;
}
.page_cont_date {
  width: 100%;
}
.page_cont_title {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  font-size: 32px;
  line-height: 120%;
  width: 100%;
  margin: 16px 0
}
p.text_page_date {
  background-color: #f7f7f7;
  padding: 20px;
  margin: 20px 0;
}
#left-page img {
  margin: 20px 0;
}
p.text_page_title {
  /*text-indent: 60px;*/
  padding: 15px 15px 15px 80px;
  margin: 20px 0;
  background-image: url(../img/blog_img/page_title_icon.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-color: #f7f7f7;
  clear: both;
}
p.text_page_title_mid {
  padding: 0 20px;
}
p.text_page_text, div.text_page_text {
  margin: 20px 0;
  padding: 0 20px;
}
.right-content {
  width: 150px;
  float: left;
}
#right-page {
  text-align: left;
  width: 100%;
}
#right-page li {
  background-color: #f7f7f7;
}
#right-page li.page_title {
  background-color: #333;
}
#right-page li.page_select {
  background-color: #848484;
}
#right-page li a {
  display: block;
  width: 150px;
}
#right-page a:hover {
  opacity: 0.4;
  -moz-opacity: 0.4;
  filter: alpha(opacity=40);
}
#right-page li p {
  padding: 16px 16px;
}
.twocolumn {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}
.twocolumn div {
  width: 48%;
  text-align: center;
}
.threecolumn {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}
.threecolumn div {
  width: 30.5%;
  text-align: center;
}
.comment {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

@media screen and (max-width: 1000px) {
.left-content {
  width: calc(100% - 150px - 30px);
}
}

@media screen and (max-width: 900px) {
dd.concept_view_text {
  width: calc(100% - 400px);
  padding: 20px;
}
}

@media screen and (max-width: 812px) {
header nav ul {
  width: 800px;
}
header nav li a {
  width: 160px;
}
}

@media screen and (max-width: 768px) {
header nav ul {
  width: 640px;
}
header nav li a {
  width: 128px;
}
/* ----------------------------------------------------------------------
新着情報
---------------------------------------------------------------------- */

#area-news {
  font-size: 14px;
}
.area-news-title {
}
#area-news dt {
  /*width: 16%;*/
  width: 10em;
}
#area-news dt.NewsList_Date {
  font-size: 12px;
}
.area-news-past {
  font-size: 10px;
}
/* ----------------------------------------------------------------------
三川STYLE 記事
---------------------------------------------------------------------- */

#sansen-cont {
}
.sansen-cont-element {
  width: 50%;
}
.sansen-cont-element ul.sansen-cont-bg-gray {
  background-color: #fff;
}
.sansen-cont-element-img {
  width: 100%;
  height: 26vw;
  overflow: hidden;
}
/* ----------------------------------------------------------------------
淀川河川公園 記事
---------------------------------------------------------------------- */

#sansen-cont {
  /*margin: 0 20px;*/
  width: 100%;
}
.yodogawa-park-cont-element {
  width: 50%;
}
.yodogawa-park-cont-element ul.yodogawa-park-cont-bg-gray {
  background-color: #fff;
}
.yodogawa-park-cont-element-img {
  width: 100%;
  height: 26vw;
  overflow: hidden;
}
/* ----------------------------------------------------------------------
アクセス
---------------------------------------------------------------------- */

#access-area .access-google-map {
  width: 96%;
}
/* ----------------------------------------------------------------------
コンセプト
---------------------------------------------------------------------- */

dl.concept_view_box {
  background-size: 280px 280px;
}
dd.concept_view_text {
  width: calc(100% - 320px);
  padding: 20px;
}
dl.concept_base_box {
  height: auto;
  background-size: 300px 300px;
}
dt.concept_base_name {
}
dt.concept_base_name_ml420 {
  margin: 0 0 0 320px;
}
dd.concept_base_text {
}
dd.concept_base_text_ml420 {
  margin: 0 0 0 320px;
}
/* ----------------------------------------------------------------------
利用規約
---------------------------------------------------------------------- */
#concept-cont.kiyaku p {
  width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* ----------------------------------------------------------------------
各記事ページ
---------------------------------------------------------------------- */

.left-content {
  width: 100%;
}
.right-content {
  display: none;
}
#left-page img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.text_page_text img.alignright {
  margin: 0 0 20px 10px !important;
}
.text_page_text img.alignleft {
  margin: 0 20px 10px 0 !important;
}
.twocolumn {
  display: -webkit-block; /* Safari */
  display: block;
}
.twocolumn div {
  width: calc(100% - 40px);
  margin: 20px 0;
  padding: 0 20px;
}
.threecolumn {
  display: -webkit-block; /* Safari */
  display: block;
}
.threecolumn div {
  width: calc(100% - 40px);
  margin: 20px 0;
  padding: 0 20px;
}
.image_size_original {
  display: inline;
}
.image_size_original img {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
}

@media screen and (max-width: 640px) {
.pc_hide {
  display: inline;
}
/* ----------------------------------------------------------------------
 告知バッジ
---------------------------------------------------------------------- */

#notification {
  display: none;
}
/* ----------------------------------------------------------------------
 ヘッダー
---------------------------------------------------------------------- */

#top_header_inner {
  background-image: url(../img/top_main_img_8_10_v3.jpg);
  height: auto;/*764px;*/
  padding: 80px 20px 56px;
}
#top_LogoText_inner {
  background-color: rgba(230,230,230,0.7);
  width: 70%;
  margin: 0 auto;
  border-radius: 30px;
  padding: 44px;
}
#top_logo {
  height: 200px;
  width: 100%;
  background-size: 270px 200px;
}
.homeLink {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
#under_logo {
  height: 64px;
  width: 100%;
  background-size: 300px 64px;
}
.top_main_text {
  margin: 16px 0 0;
}
h2 {
  font-size: 14px;
  color: #393939;
  text-shadow: 0 0 2px #fff;
}
.pages_title_32px {
  text-shadow: 0 0 5px #fff;
}
#top-head, .inner {
  width: 100%;
  padding: 0;
}
#top-head {
  top: 0;
  position: fixed;
  margin-top: 0;
  z-index: 999;
}
#mobile-head {
  background: #fff;
  width: 100%;
  height: 56px;
  z-index: 999;
  position: relative;
}
#global-nav {
  position: absolute;
  /* 開いてないときは画面外に配置 */
  top: -500px;
  background: #fff;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
header nav ul {
  position: static;
  width: 100%;
  right: 0;
  bottom: 0;
}
header nav li {
  float: none;
  position: static;
}
header nav li:after {
  display: none;
}
header nav ul li a, header.fixed nav ul li a {
  width: 100%;
  display: block;
  color: #333;
  border-top: 2px solid #999;
}
#nav-toggle {
  display: block;
}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-315deg);
  -moz-transform: rotate(-315deg);
  transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
  /* #global-nav top + #mobile-head height */
  -moz-transform: translateY(556px);
  -webkit-transform: translateY(556px);
  transform: translateY(556px);
}
.fa {
  display: inline !important;
}
/* ----------------------------------------------------------------------
フッター
---------------------------------------------------------------------- */

footer {
  color: #ffffff;
  background-color: #333333;
  padding: 0 0 40px 0;
}
footer #footer-nav ul {
  width: 100%;
}
footer #footer-nav li {
  width: 100%;
  float: none;
  border-right: none;
  border-top: 2px solid #848484;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
footer #footer-nav li:first-Child {
  margin-left: 0;
}
footer #footer-nav li.last-child {
  border-bottom: 2px solid #848484;
}
footer #footer-nav li a {
  padding: 16px 0 0 0;
  margin: 0;
  height: 40px;
  width: 100%;
  display: block;
}
/* ----------------------------------------------------------------------
 パンくず
---------------------------------------------------------------------- */

#pankuzu-area {
  font-size: 12px;
}
/* ----------------------------------------------------------------------
新着情報
---------------------------------------------------------------------- */

#area-news dt {
  font-size: 14px;
  /*width: 32%;*/
  width: 10em;
}
#area-news dd {
  margin: 20px 0 0;
  width: 100%;
}
/* ----------------------------------------------------------------------
三川STYLE
---------------------------------------------------------------------- */

#style-nav li.btn_sansenstyle {
  width: 100%;
}
#style-nav li {
  float: none;
}
#style-nav li a {
  background-size: 640px auto;
  height: 200px;
}
/*#style-nav li.btn_marche a {
	background-image: url(../img/style_btn_marche_w1200.png);
}
#style-nav li.btn_activity a {
	background-image: url(../img/style_btn_activity_w1200.png);
}
#style-nav li.btn_event a {
	background-image: url(../img/style_btn_event_w1200.png);
}*/
#style-nav li a:hover {
  background-size: 640px auto;
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter: alpha(opacity=80);
}
/*#style-nav li.btn_marche a:hover {
	background-image: url(../img/style_btn_marche_w1200.png);
}
#style-nav li.btn_activity a:hover {
	background-image: url(../img/style_btn_activity_w1200.png);
}
#style-nav li.btn_event a:hover {
	background-image: url(../img/style_btn_event_w1200.png);
}*/
.sansen-cont-element-img {
  width: 100%;
  height: 55vw;
  overflow: hidden;
}
/* ----------------------------------------------------------------------
三川STYLE 記事
---------------------------------------------------------------------- */

#sansen-cont {
  margin: 0;
  width: 100%;
}
.sansen-cont-element {
  width: 100%;
  border-style: none;
}
.sansen-cont-element ul.sansen-cont-bg-gray {
  background-color: #f7f7f7;
  background-color: #ebebeb;
}
/* ----------------------------------------------------------------------
淀川河川公園 記事
---------------------------------------------------------------------- */

#yodogawa-park-cont {
}
.yodogawa-park-cont-element {
  width: 100%;
}
.yodogawa-park-cont-element ul.yodogawa-park-cont-bg-gray {
  background-color: #f7f7f7;
}
.yodogawa-park-cont-element-img {
  width: 100%;
  height: 55vw;
  overflow: hidden;
}
/* ----------------------------------------------------------------------
各下層ページ　ページャー
---------------------------------------------------------------------- */

.btn_pager_next_20 {
  width: 90%;
  margin: 100px auto 150px;
}
.pagenavi {
}
.page {
  display: none;
}
/* ----------------------------------------------------------------------
エリアガイド
---------------------------------------------------------------------- */

#area-guide li {
  background-size: 208px 72px;
}
#area-guide li.area-guide-Small {
  width: 50%;
}
#area-guide li.area-guide-Big {
  width: 100%;
}
/* ----------------------------------------------------------------------
アクセス
---------------------------------------------------------------------- */

#access-area p {
  padding: 0 20px;
  text-align: left;
}
#access-area .access-google-map {
  width: 96%;
  padding-bottom: 350px;
}
/* ----------------------------------------------------------------------
コンセプト
---------------------------------------------------------------------- */

#concept-cont li.concept_menu_on {
  background-position: top center;
}
dl.concept_view_box {
  background-size: 210px 210px;
  background-position: top center;
}
dt.concept_view_name {
  padding: 240px 20px 20px;
}
dd.concept_view_text {
  width: 90%;
}
dl.concept_base_box {
  height: auto;
  background-size: 320px 320px;
  background-position: top center;
}
dt.concept_base_name_ml420, dt.concept_base_name {
  font-size: 32px;
  padding: 340px 20px 20px;
  margin: 0;
}
dd.concept_base_text_ml420, dd.concept_base_text {
  width: 90%;
  margin: 0;
}
/* ----------------------------------------------------------------------
各記事ページ
---------------------------------------------------------------------- */

p.text_page_title {
  text-indent: 0;
  padding: 72px 15px 15px;
  margin: 20px 0;
  background-image: url(../img/blog_img/page_title_icon.png);
  background-position: center top;
}
.page_cont_category_new, .page_cont_category_marche, .page_cont_category_activity, .page_cont_category_event, .page_cont_area {
  font-size: 16px;
  width: 50%;
}
}

@media screen and (max-width: 420px) {
#top_logo {
  background-size: 100% auto;
}
}
/* ----------------------------------------------------------------------
予約状況ページ
---------------------------------------------------------------------- */
#reservationList {
  width: 100%;
  max-width: 960px;
  margin: 0 auto 60px;
  font-size: 16px;
  line-height: 200%;
}
.reservationList {
  width: 100%;
}
.reservationList dl {
  width: 20%;
  float: left;
}
.reservationList dl.body4 {
  display: none;
}
.reservationList dl.body1,.reservationList dl.body2,.reservationList dl.body3 {
  width: calc( 80% / 3 );
}
.reservationList dt {
  height: 130px;
  padding: 16px 0 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #fff;
}
.reservationList dd .list-title-ampm {
  height: 100px;
}
.reservationList dd {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #fff;
  padding: 20px;
}
dl.head dd:nth-child(2n+1) {
  background-color: #f0f0f0;
}
dl.head dd:nth-child(2n) {
  background-color: #ffffff;
}
dl.body1 dt {
  background-color: #ea6d8d;
}
dl.body1 dd:nth-child(2n+1) {
  background-color: #fcebef;
}
dl.body1 dd:nth-child(2n) {
  background-color: #fef5f7;
}
dl.body1 dd:nth-child(2) {
  background-color: #f8cdd8;
}
dl.body2 dt {
  background-color: #009d95;
}
dl.body2 dd:nth-child(2n+1) {
  background-color: #d7f0ef;
}
dl.body2 dd:nth-child(2n) {
  background-color: #ebf7f7;
}
dl.body2 dd:nth-child(2) {
  background-color: #9cd9d6;
}
dl.body3 dt {
  background-color: #796bae;
}
dl.body3 dd:nth-child(2n+1) {
  background-color: #edebf4;
}
dl.body3 dd:nth-child(2n) {
  background-color: #f6f5fa;
}
dl.body3 dd:nth-child(2) {
  background-color: #d2cee4;
}
dl.body4 dt {
  background-color: #ef8200;
}
dl.body4 dd:nth-child(2n+1) {
  background-color: #fdeedc;
}
dl.body4 dd:nth-child(2n) {
  background-color: #fef6ed;
}
dl.body4 dd:nth-child(2) {
  background-color: #f9d4a7;
}
#reservationList .note {
  margin-top: 20px;
}

@media screen and (max-width: 420px) {
#reservationList_wrapper {
  width: 100%;
  overflow-x: scroll;
}
.reservationList {
  width: 200vw;
}
.reservationList dl {
  width: 40vw;
}
}
/* ----------------------------------------------------------------------
トップさくらまつりバナー
---------------------------------------------------------------------- */
.sakuramatsuri {
  width: 100%;
  margin: 40px auto 60px;
  max-width: 960px;
}
.sakuramatsuri img {
  width: 100%;
  height: auto;
}
.sakuramatsuri a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 960px) {
.sakuramatsuri {
  padding-left: 20px;
  padding-right: 20px;
  width: calc( 100% - 40px );
  margin: 20px auto 40px;
}
}
/* ----------------------------------------------------------------------
施設案内の写真
---------------------------------------------------------------------- */
ul.outlineImg {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  padding: 0 20px;
  flex-wrap: wrap;
}
ul.outlineImg li {
  -webkit-flex-basis: 48%; /* Safari */
  flex-basis: 48%;
}
ul.outlineImg li:first-child {
  margin-right: 4%;
}
ul.outlineImg li img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 640px) {
dl.concept_view_box {
  height: auto;
}
ul.outlineImg li {
  -webkit-flex-basis: 100%; /* Safari */
  flex-basis: 100%;
}
ul.outlineImg li:first-child {
  margin-right: 0;
}
ul.outlineImg li:nth-child(2) {
  margin-top: 20px;
}
}
/* ----------------------------------------------------------------------
ライブカメラ
---------------------------------------------------------------------- */
.topHeaderBanner {
  max-width: 960px;
  margin: -50px auto 50px;
  position: relative;
}
.livecamera {
 width: calc( 620 / 960 * 100% );
  max-width: 620px;
}
.livecamera a {
  display: block;
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.livecamera a:hover {
  opacity: 0.8;
}
.livecamera a div {
  position: absolute;
  /*right: 3.6%;
  top: 24%;
  width: 16%;*/
  right: 1.2%;
  top: 8%;
  width: 21%;
}
.livecamera a img {
  width: 100%;
  height: auto;
}
.headermarchebanner {
  position: absolute;
  top: 0px;
  right: 0px;
  max-width: 320px;
 width: calc( 320 / 960 * 100% );;
}
.headermarchebanner a:hover {
  opacity: 0.8;
}
.headermarchebanner img {
  width: 100%;
  height: auto;
}

/*@media screen and (max-width: 960px) {
.livecamera {
  padding-left: 20px;
  padding-right: 20px;
  width: calc( 100% - 40px );
  position: relative;
}
}*/

@media screen and (max-width: 640px) {
.livecamera {
  margin-bottom: 20px;
}
.livecamera, .headermarchebanner {
  width: 100%;
  max-width: 100%;
  position: static;
}
}
/* ----------------------------------------------------------------------
マルシェバナー
---------------------------------------------------------------------- */
.marchebanner img {
  max-width: 100%;
  height: auto;
}
.marchebanner a:hover {
  opacity: 0.8;
}
.marchebanner .msp {
  display: none;
}

@media screen and (max-width: 640px) {
.marchebanner img {
  width: 100%;
  height: auto;
}
.marchebanner .mpc {
  display: none;
}
.marchebanner .msp {
  display: inline;
}
}
.sansen-cont-element-date, .yodogawa-park-cont-element-date {
  display: none;
}

/* ----------------------------------------------------------------------
トップバナー
---------------------------------------------------------------------- */
.topBanner{
  max-width: 960px;
  margin: -80px auto 80px;
}
.topBanner img{
  width: 100%;
  height: auto;
}
.topBanner a:hover {
    opacity: 0.8;
}