@charset "utf-8";
/* ssi/ssi-flow.php用追加CSS 各レターで使用中のCSSに設定がある場合、読み込みの必要はありません。*/

/* -------------------------------------- アコーディオンコンテンツ */
.title {
  display: block;
  margin: 0 2vw;
  padding: 1em .5em 1em 0;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 2px #271100;
  background-color: #602B00;
  position: relative;
}
.toggle {
display: none;
}
.title,
.tglbox {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}
.title::after,
.title::before {
  content: "";
  position: absolute;
  right: 6vw;
  top: calc(50% - 1rem);
  width: 2px;
  height: 2rem;
  background-color: #FFFFFF;
  box-shadow: 0 2px 2px #271100;
  transition: all 0.3s;
}
.title::before {
  transform: rotate(90deg);
  box-shadow: 2px 0 2px #271100;
}
.tglbox {
  max-height: 0;
  overflow: hidden;
  transition: all .5s;
}
.tglbox p {
  margin: 0;
  padding: .5em 0 0;
  font-size: 0.9em;
  line-height: 1.5;
}
.tglbox p:last-child {
  padding: .5em 0;
}
.toggle:checked + .title + .tglbox {
  max-height: 2000px;
  transition: all 1.5s;
}
.toggle:checked + .title::after {
  transform: rotate(90deg) !important;
}
/* -------------------------------------- オンライン視聴について .flow-online  */
.flow {
  width: 96vw;
  margin: 0 2vw 1em;
  border: 1px solid #0170B9;
}
.flow .toggle + .title {
  width: 96vw;
  margin: -1px 0 0;
  padding: .5em .5em .5em 0;
  background-color: #0170B9;
  background-image: url("/img/online-info/ic_online.svg");
  background-repeat: no-repeat;
  background-size: 56px 48px;
  background-position: left 2vw center;
  text-shadow: 0 2px 2px rgba(0,51,67,0.70);
  position: relative;
  left: calc(50% - 48vw);
}
.flow .toggle + .title::after,
.flow .toggle + .title::before {
  box-shadow: 0 2px 2px rgba(0,51,67,0.70);
}
.flow .toggle + .title::before {
  transform: rotate(90deg);
  box-shadow: 2px 0 2px rgba(0,51,67,0.70);
}
.flow .toggle + .title:hover {
  opacity: .7;
}
.tglbox.flow-online {
  padding: 0 4vw;
}
.tglbox.flow-online h3 {
  margin-top: .5em;
  padding-left: .5em;
  color: #0170B9;
  font-weight: bold;
  text-align: left;
  border-top: none;
  border-bottom: none;
  border-left: 5px solid #0170B9;
}
.tglbox.flow-online p {
  padding: 0;
  font-size: 1em;
  line-height: 1.4;
}
.tglbox.flow-online .mark_ylw {
  background:linear-gradient(transparent 60%, #ffe500 60%);
}
.tglbox.flow-online .w70 {
  width: 70%;
}
.tglbox.flow-online .txt_c {
  margin: .5em 0;
}
.tglbox.flow-online .limit-info {
  display: block;
  margin: 0 0 1em;
  padding: 0;
  font-size: .8em;
}
.tglbox.flow-online .yasu {
  margin-bottom: .5em;
  position: relative;
}
.tglbox.flow-online .yasu::before {
  content: "";
  width: 112.5px;
  height: 115.625px;
  background-image: url("/img/online-info/ol_yasu-img.gif");
  background-size: 112.5px auto;
  background-position: left top;
  position: absolute;
  right: -5vw;
  top: -30px;
}
@media screen and (min-width:480px){
/* -------------------------------------- アコーディオンコンテンツ */
.title {
  margin: 0 auto;
}
.title:hover {
  cursor: pointer;
}
.title::after,
.title::before {
  right: 50px;
}
.tglbox p {
  padding: 1em 0 0;
  font-size: 1em;
}
.tglbox p:last-child {
  padding: 1em 0;
}
/* -------------------------------------- オンライン視聴について .flow-online  */
.flow {
  width: 780px;
  margin: 0 auto 60px;
}
.flow .toggle + .title {
  width: 780px;
  padding: 1.5em 0;
  font-size: 24px;
  line-height: 1;
  left: calc(50% - 390px);
}
.tglbox.flow-online {
  padding: 0 45px;
}
.tglbox.flow-online h3 {
  margin: 1em 0;
  font-size: 24px;
  text-align: left;
  border-top: none;
  border-bottom: none;
  border-left: 8px solid #0170B9;
}
.tglbox.flow-online p {
  padding: .5em 0;
}
.tglbox.flow-online img {
  max-width: 504px;
}
.tglbox.flow-online .w70 {
  width: 430px;
}
.tglbox.flow-online .txt_c {
  margin: 1em 0;
}
.tglbox.flow-online .limit-info {
  display: block;
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: 16px;
}
.tglbox.flow-online .yasu {
  width: 550px;
  margin: 0 auto 1em;
  padding: 50px 0;
}
.tglbox.flow-online .yasu::before {
  width: 180px;
  height: 185px;
  background-size: 180px 185px;
  background-position: left top;
  right: 0;
}
.toggle:checked + .title + .tglbox.flow-online {
  max-height: 2680px;
}
}