@charset "UTF-8";
/* カラー設定 */
/*  */
/* 透ける背景用設定 */
/* 基本テキスト色 */
/* font関係 */
/**/
/* 角丸 */
/*
$border-radius:10px;

/* margin-bottom 


$margim-bottom-L:30px;
$margim-bottom-M:20px;
$margim-bottom-S:15px;
*/
/* screenサイズ */
/* ブレイクポイント */
/* カラー設定 */
/*  */
/* 透ける背景用設定 */
/* 基本テキスト色 */
/* font関係 */
/**/
/* 角丸 */
/*
$border-radius:10px;

/* margin-bottom 


$margim-bottom-L:30px;
$margim-bottom-M:20px;
$margim-bottom-S:15px;
*/
/* screenサイズ */
/* ブレイクポイント */
/* CSS Transition Easing */
nav {
  position: absolute;
  width: 100vw;
  right: 0 !important;
}
nav h1 {
  display: none;
}

/*スマホ*/
@media only screen and (max-width: 750px) {
  nav {
    top: calc( 40px + ( 810   / 750 * 100vw) );
  }
  nav div ul {
    text-align: center !important;
  }
}
/*PC*/
@media only screen and (min-width: 751px) {
  nav {
    top: calc((685 + 40 ) / 1440 * 100vw);
  }
}
#common-contents {
  background: none;
}
#common-contents #contents-main {
  background-size: cover !important;
}
#common-contents #contents-banner a {
  display: block;
  opacity: 0;
}
#common-contents #contents-banner a.active {
  animation: fadeIn 0.4s ease-out 1;
  opacity: 1;
}
#common-contents #contents-news {
  background: url("../common/css/common-class/triangle_right.png") no-repeat;
}
#common-contents #contents-news > div h2 {
  opacity: 0;
}
#common-contents #contents-news > div h2.active {
  animation: slideLeft 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  opacity: 1;
}
#common-contents #contents-news > div div p {
  opacity: 0;
  color: #fff;
}
#common-contents #contents-news > div div p.active {
  animation: slideLeft 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  opacity: 1;
}
#common-contents #contents-news > div div p time {
  display: block;
  font-weight: 700;
}

#contents-latest-video {
  position: absolute;
  z-index: 1006;
  background: url("../common/css/common-class/triangle_left.png") no-repeat;
  width: 100vw;
}
#contents-latest-video h2, #contents-latest-video ul li {
  opacity: 0;
}
#contents-latest-video h2.active, #contents-latest-video ul li.active {
  animation: slideLeft 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  opacity: 1;
}

@media only screen and (max-width: 750px) {
  #common-contents #contents-main {
    width: 100%;
    height: calc(810 / 750 * 100vw);
    margin-bottom: calc(100 / 750 * 100vw);
    background: url("common-contents/contents-main_sp.jpg") no-repeat;
  }
  #common-contents #contents-banner,
  #common-contents #contents-news {
    width: calc(670 / 750 * 100vw);
    margin: 0 auto;
  }
  #common-contents #contents-banner {
    margin-bottom: calc(25 / 750 * 100vw);
  }
  #common-contents #contents-banner a img {
    width: calc(670 / 750 * 100vw);
  }
  #common-contents #contents-news {
    margin-bottom: calc(60 / 750 * 100vw);
    background-size: calc(500 / 750 * 100vw);
  }
  #common-contents #contents-news > div h2 {
    padding-top: calc(20 / 750 * 100vw);
    padding-bottom: calc(20 / 750 * 100vw);
  }
  #common-contents #contents-news > div h2 img {
    width: calc(290 / 750 * 100vw);
  }
  #common-contents #contents-news > div div p {
    padding-right: calc(10 / 750 * 100vw);
    font-size: 3.2vw;
  }
  #common-contents #contents-news > div div p time {
    border-top: #fff solid calc(3 / 750 * 100vw);
  }

  #contents-latest-video {
    position: relative !important;
    left: calc(-60 / 750 * 100vw);
    margin-bottom: calc(60 / 750 * 100vw);
    padding-top: calc(20 / 750 * 100vw);
    padding-bottom: calc(20 / 750 * 100vw);
    background-size: calc(500 / 750 * 100vw);
    width: 100%;
    overflow: hidden;
  }
  #contents-latest-video > div {
    width: 100%;
    position: relative;
  }
  #contents-latest-video > div h2 {
    padding-left: calc(200 / 750 * 100vw);
  }
  #contents-latest-video > div h2 img {
    width: calc(290 / 750 * 100vw);
  }
  #contents-latest-video > div ul {
    position: relative;
    width: 100%;
    text-align: right;
  }
  #contents-latest-video > div ul li {
    width: calc(520 / 750 * 100vw);
    padding-bottom: calc(20 / 750 * 100vw);
    right: 0vw;
    display: inline-block;
  }
  #contents-latest-video > div ul li:nth-child(2) {
    margin-right: calc(50 / 750 * 100vw);
  }
  #contents-latest-video > div ul li:nth-child(3) {
    margin-right: calc(100 / 750 * 100vw);
  }
  #contents-latest-video > div ul li a {
    width: calc((520 - 4) / 750 * 100vw);
    position: relative;
  }
  #contents-latest-video > div ul li a img {
    width: 100%;
    height: auto;
  }
}
@media only screen and (min-width: 751px) {
  #common-contents {
    font-size: 0;
    padding-bottom: calc(50 / 1440 * 100vw);
  }
  #common-contents #contents-main {
    width: 100%;
    height: calc(690 / 1440 * 100vw);
    margin-bottom: calc(100 / 1440 * 100vw);
    background: url("common-contents/contents-main_pc.jpg") no-repeat;
  }
  #common-contents #contents-banner {
    float: left;
    width: calc(700 / 1440 * 100vw);
    padding: 0;
    margin: 0;
    padding-left: calc(30 / 1440 * 100vw);
  }
  #common-contents #contents-banner a {
    margin-bottom: calc(10 / 1440 * 100vw);
    display: block;
  }
  #common-contents #contents-banner a img {
    width: calc(675 / 1440 * 100vw);
  }
  #common-contents #contents-news {
    margin: 0;
    float: right;
    width: calc(700 / 1440 * 100vw);
    min-height: calc(400 / 1440 * 100vw);
    padding: 0;
    padding-top: calc(30 / 1440 * 100vw);
    background-size: calc(500 / 1440 * 100vw);
  }
  #common-contents #contents-news > div h2 {
    padding-bottom: calc(20 / 1440 * 100vw);
  }
  #common-contents #contents-news > div h2 img {
    width: calc(290 / 1440 * 100vw);
  }
  #common-contents #contents-news > div div p {
    padding-right: calc(10 / 1440 * 100vw);
    font-size: 1.6666666667vw;
  }
  #common-contents #contents-news > div div p time {
    border-top: #fff solid calc(3 / 1440 * 100vw);
  }

  #contents-latest-video {
    top: calc(565 / 1440 * 100vw);
    left: calc(-60 / 1440 * 100vw);
    width: calc(1000 / 1440 * 100vw);
    background-size: calc(500 / 1440 * 100vw);
    padding-top: calc(7 / 1440 * 100vw);
  }
  #contents-latest-video > div h2 {
    padding-left: calc(200 / 1440 * 100vw);
  }
  #contents-latest-video > div h2 img {
    width: calc(290 / 1440 * 100vw);
  }
  #contents-latest-video > div ul {
    padding-left: calc(80 / 1440 * 100vw);
    font-size: 0;
    text-align: left;
  }
  #contents-latest-video > div ul li {
    display: inline-block;
    margin-right: calc(10 / 1440 * 100vw);
  }
  #contents-latest-video > div ul li a img {
    width: calc(290 / 1440 * 100vw);
  }
}