@charset "utf-8";

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: #f1f1f1 !important;
  color: #333;
  font-size: 1.6rem;
  line-height: 1.6;
}

#wrap {
  width: 100%;
  text-align: left;
}
section {
  position: relative;
  margin: 0 auto;
}
a.reload {
  display: block;
  border-radius: 5px;
  background: #ff9000;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
a.reload i {
  margin-right: 5px;
}
dt {
  margin-top: 20px;
  padding: 10px 15px;
  background: #1e1e1e;
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
}
dd {
  margin-bottom: 10px;
  padding: 66px 0 0;
  position: relative;
  border-bottom: 1px solid #707070;
}
dd span {
  padding: 6px 10px;
  display: block;
  position: absolute;
  top: 20px;
  left: 0;
  background-color: #0079d2;
  color: #fff;
  font-weight: bold;
}
.noinfo {
  padding: 30px 0;
  text-align: center;
  border: 1px solid #ccc;
}
.info-update p {
  text-align: right;
  font-size: 1.4rem;
}

@media only screen and (min-width: 675px) {
  a.reload {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 10px;
  }
  a.reload:hover {
    background: #0ab1e9;
  }
  .noinfo {
    padding: 50px 0;
  }
  dd {
    line-height: 1.6;
  }
}

@media only screen and (max-width: 674px) {
  a.reload {
    margin: 0 0 10px;
    padding: 10px;
    text-decoration: none;
    text-align: center;
  }
  .detail p {
    text-align: right;
  }
  dd span {
    top: 15px;
  }
  dd {
    padding: 60px 0 0;
  }
}

/*header
----------------------------------------*/
header h1 {
  margin: 0;
  padding: 13px 0;
  background: #333;
  text-align: center;
}
header h1 img {
  height: 22px;
}
header p {
  font-weight: bold;
}

@media only screen and (min-width: 751px) {
  header h1 {
    min-width: 1500px;
  }
}

@media screen and (min-width: 751px) and (max-width: 1500px) {
  header h1 {
    min-width: 1100px;
  }
}

/*お知らせ表示部*/
.head_news {
  min-width: 1080px;
  border-bottom: 1px solid #ccc;
  background: #fff;
}
.head_news_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: calc(1280px + 100px);
  margin: 0 auto;
  padding: 10px 50px;
}
.head_news_list li {
  display: table;
  margin: 10px 0 0;
}
.head_news_list li:first-child {
  margin: 0;
}
.head_news_list li:after {
  content: "";
  display: block;
  clear: both;
}
.head_news_list li .cate {
  float: left;
}
.head_news_list li h4 {
  overflow: hidden;
  zoom: 1;
}
.head_news_list li p {
  font-size: 1.4rem;
  font-weight: normal;
}

@media only screen and (min-width: 751px) {
  header p {
    padding: 10px;
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 750px) {
  header p {
    padding: 3%;
    font-size: 1.4rem;
  }
  a.link_portal {
    width: 100%;
  }
  /*お知らせ表示部*/
  .head_news {
    min-width: 100%;
  }
  .head_news_list {
    padding: 15px 3%;
  }
}

/*wrap
----------------------------------------*/
#top_wrap {
  margin: 0 auto;
  padding: 30px 0;
  position: relative;
  text-align: center;
}
.main-container {
  width: 100%;
  margin: 30px auto 0;
}

li.article_block {
  -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 25%);
  box-shadow: 0 0 10px rgb(0 0 0 / 25%);
}

@media only screen and (min-width: 751px) {
  #top_wrap {
    width: 1500px !important;
  }
  .main-container {
    width: 1500px;
  }
  .main-container ul.main_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  li.article_block {
    width: 60%;
    margin: 0 40px;
    padding: 50px 20px 80px;
    background: #fff;
  }
  li.right_block,
  li.left_block {
    width: 20%;
    height: 100%;
    position: sticky;
    top: 30px;
  }
}

@media screen and (min-width: 751px) and (max-width: 1500px) {
  #top_wrap {
    width: 1100px !important;
  }
  .main-container {
    width: 1100px;
  }
}

@media only screen and (max-width: 750px) {
  #top_wrap {
    width: 100%;
    padding: 15px 3% 30px;
  }
  .main-container ul.main_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  li.article_block {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  li.left_block {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  li.right_block {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
}

/*section
----------------------------------------*/
section#movie {
  margin-bottom: 80px;
}
#l_list iframe {
  width: 100%;
}
section h1 {
  margin: 0 0 30px;
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
section h1:after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: 4px auto 0;
  background-color: #0079d2;
}
ul.top_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}
ul.top_link li {
  font-weight: bold;
  font-size: 1.8rem;
}
ul.top_link li:nth-child(2) {
  margin: 0 0 0 60px;
}
a.link_portal,
a.link_info {
  display: block;
  padding: 28px 30px;
  border-radius: 5px;
  background: #ff9000;
  background-size: 30px auto;
  position: relative;
  text-decoration: none;
  color: #fff;
  text-align: center;
}
a.link_info {
  background: #1e1e1e;
}
.fa-caret-right {
  margin-top: -7px;
  position: absolute;
  top: 50%;
  right: 10px;
  display: inline-block;
}
.btn-radiko {
  padding: 28px 30px;
  border-radius: 5px;
  background: #00a6e8;
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
}
.btn-radiko img {
  margin: 0 1px 8px;
  height: 22px;
  vertical-align: bottom;
}
p.top_link_text {
  max-width: 740px;
  margin: 10px auto 0;
  padding: 0 10px;
}
a.link_portal a,
.btn-radiko a,
a.link_info a {
  position: relative;
}
a.link_portal,
.btn-radiko,
a.link_info {
  position: relative;
}
a.link_portal:before,
.btn-radiko:before,
a.link_info:before {
  display: block;
  content: "\e905";
  color: #fff;
  font-family: "icomoon";
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

@media only screen and (min-width: 751px) {
  a.link_portal,
  .btn-radiko {
    width: 340px;
    min-height: 80px;
  }
  a.link_info {
    display: none;
  }
  ul.top_link {
    max-width: 740px;
  }
  .link_portal:hover,
  .btn-radiko:hover {
    opacity: 0.6;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
  }
}

@media only screen and (max-width: 750px) {
  section {
    padding: 20px 0;
  }
  section h1 {
    margin: 0 0 20px;
    padding: 0 3%;
    font-size: 2.4rem;
  }
  ul.top_link {
    display: block;
    width: 100%;
  }
  ul.top_link li:nth-child(2) {
    margin: 10px 0;
  }
  a.link_portal,
  .btn-radiko,
  a.link_info {
    padding: 15px 30px;
  }
  section#movie {
    margin-bottom: 40px;
  }
  /*section#l_list {
		height: 500px;
		overflow-y: scroll;
	}*/

  p.top_link_text {
    padding: 0;
  }
}

/*#movie
----------------------------------------*/
#movie {
  text-align: center;
}
.movie-container {
  width: 100%;
  margin: 0 auto;
}
.movie-container .inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie-container iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.movie-container .vjs-device-mobile,
.movie-container video {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 751px) and (max-width: 1500px) {
  li.article_block {
    width: 540px;
  }
}

@media only screen and (max-width: 750px) {
  li.article_block {
    margin-bottom: 30px;
    padding: 30px 3% 0;
    background-color: #fff;
  }
}

/* weather
----------------------------------------*/
#weather-map {
  margin: 20px 0;
  width: 100%;
  border: 1px solid #ccc;
  position: relative;
}
div#map {
  width: 100%;
  height: 500px;
}

@media only screen and (min-width: 751px) {
  div#control {
    padding: 10px;
    height: 60px;
    background-color: #eee;
    position: relative;
    overflow: hidden;
  }
  div.playbtn {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  div#slider {
    width: 525px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 20px;
  }
  div#bar {
    position: relative;
    height: 3px;
    top: 19px;
    background: #ccc;
  }
  input#button {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
  }
}

@media only screen and (max-width: 750px) {
  div#map {
    width: 100%;
    height: 300px;
  }
  div#control {
    padding: 5px;
    height: auto;
    text-align: center;
  }
  div.yolp-noprint,
  div#slider {
    display: none;
  }
  div.yolp-ymapbanner {
    top: 10px !important;
  }
}

/* side
----------------------------------------*/
.side_article {
  background: #fff;
}

.side_article:not(:last-child) {
  margin-bottom: 30px;
}

.side_article ul a {
  display: block;
  padding: 10px 30px 10px 15px;
  text-decoration: none;
  color: #000;
  position: relative;
}

.side_article ul a:before {
  display: block;
  content: "\e905";
  color: #000;
  font-family: "icomoon";
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.side_article ul {
  text-align: left;
}

.c-accordion__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 30px 10px 15px;
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 1.6;
  color: #fff;
  text-align: left;
}

.c-accordion__trigger::after {
  display: block;
  content: "\e905";
  color: #fff;
  font-family: "icomoon";
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translate(0, -50%) rotate(90deg);
  -ms-transform: translate(0, -50%) rotate(90deg);
  transform: translate(0, -50%) rotate(90deg);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  -o-transition: transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.c-accordion__trigger.open::after {
  -webkit-transform: translate(0, -50%) rotate(-90deg);
  -ms-transform: translate(0, -50%) rotate(-90deg);
  transform: translate(0, -50%) rotate(-90deg);
}

.c-accordion__trigger.-black {
  background: #1e1e1e;
}

.c-accordion__trigger.-light_blue {
  background: #00a6e8;
}

@media only screen and (min-width: 751px) {
  .side_article ul a:hover {
    opacity: 0.6;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
  }
  
  .c-accordion__trigger::after {
    -webkit-transform: translate(0, -50%) rotate(-90deg);
    -ms-transform: translate(0, -50%) rotate(-90deg);
    transform: translate(0, -50%) rotate(-90deg);
  }
  .c-accordion__trigger.open::after {
    -webkit-transform: translate(0, -50%) rotate(90deg);
    -ms-transform: translate(0, -50%) rotate(90deg);
    transform: translate(0, -50%) rotate(90deg);
  }  
}

.tw_page_plugin iframe {
  width: 100% !important;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  border-left: 1px solid #dedede;
}

@media only screen and (max-width: 750px) {
  .side_block {
    padding: 0 3% 30px;
  }
  .right_block {
    padding: 0 0 30px;
  }

  .side_article:not(:last-child) {
    margin-bottom: 20px;
  }
}

/* footer
----------------------------------------*/
footer {
  padding: 20px 0 !important;
  clear: both;
  font-size: 1.2rem;
  text-align: center;
  color: #000;
  background: #fff !important;
}

@media only screen and (min-width: 751px) {
  footer {
    min-width: 1500px;
  }
}

@media screen and (min-width: 751px) and (max-width: 1500px) {
  footer {
    min-width: 1100px;
  }
}

/* オプトイン専用 */
#gdpr_wrap {
  letter-spacing: 0 !important;
}

@media all and (-ms-high-contrast: none) and (min-width: 751px) and (max-width: 972px) {
  #gdpr_wrap {
    height: 150px !important;
  }
  #gdpr_message {
    height: calc(100% - 50px) !important;
  }
}

@media all and (-ms-high-contrast: none) and (min-width: 973px) {
  #gdpr_wrap {
    height: 120px !important;
  }
}

/* 画面回転
----------------------------------------*/
@media (orientation: landscape) and (min-width: 751px) {
  .js-accordion__content {
    display: block;
  }
}

@media (orientation: portrait) and (max-width: 750px) {
  .js-accordion__content {
    display: none;
  }
}