html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body {
  min-width: 100%;
}
body {
  background: #9fcee1;
  position: relative;
}
body .barBg {
  position: fixed;
  width: 100%;
  height: 20px;
  top: -20px;
  background: #9fcee1;
  z-index: 99;
}
.header {
  text-align: center;
  position: fixed;
  width: 100%;
  background: #9fcee1;
  z-index: 9;
  top: 0;
}
.header:before,
.header:after {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  background: #000;
  z-index: 1000;
}
.header:before {
  height: 1.764705882352941%;
  bottom: 1.764705882352941%;
}
.header:after {
  height: 0.882352941176471%;
  bottom: 0%;
}
.header .logo {
  height: 0;
  padding-bottom: 16%;
  position: relative;
  overflow: hidden;
}
.header .logo video,
.header .logo img {
  z-index: 999;
  position: absolute;
  top: -88%;
  left: 1%;
  right: 0;
  margin: 0 auto;
  height: 272%;
}
.header .logo img {
  z-index: 99;
}
.main {
  padding-top: 18.75%;
  width: 94.140625%;
  margin: 3.112033195020747% auto 0;
}
.main .article .article__ttl {
  width: 96.88796680497926%;
  margin: 0 auto 4.149377593360995%;
}
.main .article .article__ttl img {
  width: 100%;
}
.main .article .article__txt {
  width: 96.88796680497926%;
  margin: 0 auto 3.890041493775934%;
}
.main .article .article__txt img {
  width: 100%;
}
.main .article .article__items {
  font-size: 0;
  line-height: 0;
  margin: 0 0 9.336099585062241%;
}
.main .article .article__items li {
  cursor: pointer;
  leter-spacing: -0.4em;
  vertical-align: top;
  list-style-type: none;
  display: inline-block;
  width: 22.66597510373444%;
  height: 0;
  padding-bottom: 21.939834024896264%;
  background: #fff;
  margin: 0 3.112033195020747% 3.112033195020747% 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}
.main .article .article__items li:nth-of-type(4n) {
  margin-right: 0;
}
.main .article .article__items li .items__thumb,
.main .article .article__items li .items__txt {
  text-align: center;
  width: 93.13501144164759%;
  margin: 0 auto;
}
.main .article .article__items li .items__thumb img,
.main .article .article__items li .items__txt img {
  width: 100%;
}
.main .article .article__items li .items__thumb {
  position: relative;
  margin: 3.432494279176201% auto 6.407322654462242%;
}
.main .article .article__items li .items__thumb:after,
.main .article .article__items li .items__thumb:before {
  content: '';
  display: block;
  position: absolute;
}
.main .article .article__items li .items__thumb:after {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  top: 0;
  z-index: 1;
}
.main .article .article__items li .items__thumb:before {
  width: 38.82063882063882%;
  height: 0;
  padding-bottom: 21.375921375921376%;
  background: url("../img/thumb_playmovie.png");
  background-size: cover;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}
.main .article .article__items li .items__thumb.no-overlay:after {
  display: none;
}
.main .article .article__items li:before,
.main .article .article__items li:after {
  content: '';
  display: block;
  background: #000;
  position: absolute;
  bottom: -3px;
  right: -3px;
}
.main .article .article__items li:before {
  width: 3px;
  height: 15px;
}
.main .article .article__items li:after {
  width: 15px;
  height: 3px;
}
.modal {
  position: fixed;
  visibility: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: 0.2s opacity, 0.2s visibility;
  transition: 0.2s opacity, 0.2s visibility;
  opacity: 0;
  z-index: 2;
}
.modal .modal__close {
  width: 4.907306434023991%;
  height: 0;
  padding-bottom: 4.907306434023991%;
  position: absolute;
  top: 1.63576881134133%;
  right: 1.63576881134133%;
  background: url("../img/close_btn.png");
  background-repeat: no-repeat;
  background-size: 73.33333333333333% auto;
  background-position: center center;
  z-index: 3;
}
.modal .modal__inner {
  width: 100%;
  height: 100%;
  margin: 17.7734375% auto 0;
  padding-top: 1.46484375%;
  background: #9fcee1;
}
.modal .modal__yt {
  height: 0;
  width: 89.55078125%;
  padding-bottom: 50.390625%;
  margin: 0 auto;
  margin: 0 auto 0;
  position: relative;
  background: #000;
}
.modal .modal__yt .scTrack {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #000;
  display: none;
}
.modal .modal__yt .scTrack.visible {
  display: block;
}
.modal.open {
  visibility: visible;
  opacity: 1;
}