@charset "utf-8";

.site__main { margin-bottom: 150px; }
@media screen and (max-width: 667px) {}
@media only screen and (min-width: 668px) and (max-width: 1024px) {}

.video-commentary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  position: relative;
  width: 1015px;
}
@media screen and (max-width: 667px) {
.video-commentary {
  margin: 0 auto;
  width: 95%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.video-commentary {
  margin: 0 auto;
  width: 90%;
}
}

.video-commentary:after {
  bottom: -1.2em;
  content: '※この動画に音声はありません';
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  left: 0;
  position: absolute;
}
@media screen and (max-width: 667px) {
.video-commentary:after {
  font-size: 13px;
  line-height: 1.2;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.video-commentary:after { font-size: 14px; }
}

.movie-waku {
  margin: 0;
  width: 640px;
}
@media screen and (max-width: 1024px) {
.movie-waku {
  aspect-ratio: 16 / 9;
  width: 100%;
}
}

.movie-waku iframe {
  width: 100%;
  height: 100%;
}

.seek-waku {
  height: 360px;
  position: relative;
  width: 360px;
}
@media screen and (max-width: 667px) {
.seek-waku {
  height: auto;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.seek-waku {
  height: auto;
  width: 100%;
}
}

.seek-headline {
  background-color: #eee;
  font-size: 15px;
  font-weight: 500;
  line-height: 2.5em;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 667px) {}
@media only screen and (min-width: 668px) and (max-width: 1024px) {}

.seek-wrap {
  height: 360px;
  overflow: auto;
  padding: 0 15px 0 0;
  position: relative;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
.seek-wrap {
  display: flex;
  padding: 0;
  width: 100%;
}
}
@media screen and (max-width: 320px) {
.seek-wrap { height: 150px; }
}
@media only screen and (min-width: 321px) and (max-width: 375px) {
.seek-wrap { height: 160px; }
}
@media only screen and (min-width: 376px) and (max-width: 414px) {
.seek-wrap { height: 170px; }
}
@media only screen and (min-width: 415px) and (max-width: 768px) {
.seek-wrap { height: 230px; }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.seek-wrap { height: 240px; }
}

.seek-list {
  align-items: center;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  height: 90px;
  padding: 0 5px;
  transition: .3s;
}
@media only screen and (max-width: 1024px) {
.seek-list {
  align-items: unset;
  border-bottom: none;
  border-right: 1px solid #ddd;
  flex-wrap: wrap;
  height: auto;
  padding: 0 5px;
}
}
@media screen and (max-width:320px) {
.seek-list { width: 30%; }
}
@media only screen and (min-width: 321px) and (max-width: 375px) {
.seek-list { width: 32%; }
}
@media only screen and (min-width: 376px) and (max-width: 414px) {
.seek-list { width: 32%; }
}
@media only screen and (min-width: 415px) and (max-width: 768px) {
.seek-list { width: 32%; }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.seek-list { width: 32%; }
}

.seek-list:last-child { border-bottom: none; }

.seek-list:hover { background-color: #f0f0f0; }

.seek-list-figure {
  display: block;
  width: 100px;
}
@media screen and (max-width: 667px) {
.seek-list-figure { width: 100%; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.seek-list-figure { width: 100%; }
}

.seek-list-body { width: 215px; }
@media screen and (max-width: 1024px) {
.seek-list-body { margin: .5em auto 0; }
}
@media screen and (max-width: 320px) {
.seek-list-body { width: 80px; }
}
@media only screen and (min-width: 321px) and (max-width: 375px) {
.seek-list-body { width: 100px; }
}
@media only screen and (min-width: 376px) and (max-width: 414px) {
.seek-list-body { width: 110px; }
}
@media only screen and (min-width: 415px) and (max-width: 768px) {
.seek-list-body { width: 200px; }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.seek-list-body { width: 190px; }
}

.seek-list-heading {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 1024px) {
.seek-list-heading {
  height: 4em;
  line-height: 1.3;
}
}
@media only screen and (max-width: 414px) {
.seek-list-heading { font-size: 12px; }
}
@media only screen and (min-width: 415px) and (max-width: 768px) {
.seek-list-heading { font-size: 16px; }
}

.seek-seconds {
  background-color: #1a5098;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin: .5em 0 0;
  padding: 0 1em;
}
@media screen and (max-width: 667px) {}
@media only screen and (min-width: 668px) and (max-width: 1024px) {}

.help-text {
  bottom: -1.7em;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: right;
  width: 100%;
}
@media screen and (max-width: 667px) {
.help-text {
  bottom: -2.4em;
  text-align: left;
}
}

.help-text-link {
  color: #1a5098;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  padding: 0 0 0 20px;
  position: relative;
  text-decoration: none;
}
@media screen and (max-width: 667px) {
.help-text-link {
  font-size: 13px;
  line-height: 16px;
}
}

.help-text-link:before {
  content: '\f13a';
  font-family: 'Font Awesome 5 Free';
  font-size: 17px;
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 667px) {
.help-text-link:before { font-size: 16px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {}