@charset "UTF-8";
/*===============================================
トップページ
===============================================*/
.mvSlideWrap {
  width: calc(675 / 1366 * 100vw);
  margin-left: auto;
  position: relative; }
  .mvSlideWrap .arrows {
    position: absolute;
    right: calc(79 / 1366 * 100vw);
    top: calc(345 / 1366 * 100vw);
    display: flex;
    gap: calc(6 / 1366 * 100vw); }
    .mvSlideWrap .arrows .slick-prev,
    .mvSlideWrap .arrows .slick-next {
      position: relative;
      width: calc(28 / 1366 * 100vw);
      height: calc(28 / 1366 * 100vw);
      transform: none;
      border: 1px solid #000;
      border-radius: 50%;
      right: auto;
      left: auto; }
      .mvSlideWrap .arrows .slick-prev::before,
      .mvSlideWrap .arrows .slick-next::before {
        position: absolute;
        left: -1px;
        top: -1px;
        content: "";
        display: block;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        background: url(../img/common/icon_play.svg) no-repeat left top/cover; }
    .mvSlideWrap .arrows .slick-prev::before {
      transform: scaleX(-1); }
    .mvSlideWrap .arrows .mvStop {
      order: 1;
      display: block;
      width: calc(28 / 1366 * 100vw);
      height: calc(28 / 1366 * 100vw);
      font-size: 0;
      background: #000;
      border: 1px solid #000;
      border-radius: 50%;
      position: relative; }
      .mvSlideWrap .arrows .mvStop::before {
        position: absolute;
        left: -1px;
        top: -1px;
        content: "";
        display: block;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        background: url(../img/common/icon_stop.svg) no-repeat left top/cover; }

.mvSlider {
  display: none; }
  .mvSlider.slick-initialized {
    display: block; }
  .mvSlider .slide {
    width: calc(620 / 1366 * 100vw); }
  .mvSlider .slideInner {
    padding-right: calc(24 / 1366 * 100vw); }
  .mvSlider a {
    display: block; }
  .mvSlider .slideImg {
    border-radius: 20px;
    overflow: hidden;
    position: relative; }
    .mvSlider .slideImg::before {
      content: "";
      display: block;
      width: calc(84 / 1366 * 100vw);
      height: calc(84 / 1366 * 100vw);
      background: url(../img/common/icon_movie.svg) no-repeat center center/contain;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto; }
  .mvSlider .slideText {
    font-size: calc(18 / 1366 * 100vw);
    font-weight: 700;
    margin-top: .5em; }

.mvArea {
  background-image: url(../img/common/bg_wave_w.svg), url(../img/index/bg_mv.png);
  background-repeat: no-repeat, no-repeat;
  background-size: contain, cover;
  background-position: center bottom, center top;
  background-color: #eff8fd;
  font-size: calc(16 / 1366 * 100vw);
  padding: calc(50 / 1366 * 100vw) 0 calc(130 / 1366 * 100vw);
  position: relative;
  margin-bottom: 80px; }
  .mvArea::before {
    content: "";
    display: block;
    width: calc(107 / 1366 * 100vw);
    height: calc(110 / 1366 * 100vw);
    background: url(../img/common/deco_mv.png) no-repeat left top/contain;
    position: absolute;
    right: calc(37 / 1366 * 100vw);
    bottom: 0; }

.mvWrapper {
  display: flex;
  align-items: flex-start;
  margin: 0 auto;
  padding: 0 0 0 calc(100 / 1366 * 100vw); }

.mvBox {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: calc(335 / 1366 * 100vw);
  max-width: calc(570 / 1366 * 100vw);
  width: fit-content; }

.mvText {
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .045em; }

.mvSubttl {
  align-self: flex-start;
  color: #0257AB;
  font-weight: 700;
  letter-spacing: .02em; }

.mvTitle {
  color: #0257AB;
  font-size: calc(55 / 1366 * 100vw);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .4em; }

.supervision {
  margin-top: calc(55 / 1366 * 100vw);
  background: #FED11A;
  border-radius: calc(124 / 1366 * 100vw);
  font-size: calc(12 / 1366 * 100vw);
  font-weight: 700;
  letter-spacing: .045em;
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: wrap;
  line-height: 1.666;
  padding: 0.85em calc(32 / 1366 * 100vw) 0.95em;
  width: fit-content;
  min-width: calc(461 / 1366 * 100vw); }
  .supervision .name {
    flex-shrink: 0; }

.thumBox {
  background: #0257AB;
  border-radius: 10px;
  display: flex;
  flex-direction: column; }
  .thumBox .thumbnail {
    background: #EFF8FD;
    border-radius: 12px 12px 0 0;
    position: relative; }
    .thumBox .thumbnail::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: "";
      display: block;
      border: 4px solid #0257AB;
      border-bottom: 0;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      z-index: 1; }
  .thumBox .thumText {
    flex-grow: 1;
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .65em .2em .8em; }

.evenlyCol3To2 {
  display: flex;
  flex-wrap: wrap;
  gap: 43px calc(41 / 1088 * 100%); }
  .evenlyCol3To2 > * {
    width: calc(335 / 1088 * 100%); }

.topContents [class*="decoHead"] {
  position: relative; }
  .topContents [class*="decoHead"]::before {
    content: "";
    display: block;
    width: 116px;
    height: 123px;
    background: url(../img/common/deco_heading.png) no-repeat left top/contain;
    position: absolute; }
.topContents .decoHead1::before {
  top: -70px;
  left: -79px; }
.topContents .decoHead2::before {
  background-image: url(../img/common/deco_heading02.png);
  top: -153px;
  right: 36px; }

/*===============================================
w1250より縮んだら
===============================================*/
@media screen and (max-width: 1249px) {
  .topContents .decoHead1::before {
    left: 0; } }
/*===============================================
w940より縮んだら
===============================================*/
@media screen and (max-width: 939px) {
  .thumBox .thumText {
    font-size: 1.7rem; } }
/*===============================================
hoverをPCだけ
===============================================*/
@media screen and (min-width: 769px) {
  .mvSlideWrap .arrows button:hover {
    opacity: .7; }

  .mvSlider a:hover {
    opacity: .7; } }
/*===============================================
SP
===============================================*/
@media screen and (max-width: 768px) {
  /*===============================================
  トップページ
  ===============================================*/
  .mvSlideWrap {
    width: 100%;
    margin: calc(50 / 750 * 100vw) 0 0;
    padding-bottom: calc(30 / 750 * 100vw);
    overflow: hidden; }
    .mvSlideWrap .arrows {
      right: calc(40 / 750 * 100vw);
      top: calc(407 / 750 * 100vw);
      gap: calc(16 / 750 * 100vw); }
      .mvSlideWrap .arrows .slick-prev,
      .mvSlideWrap .arrows .slick-next {
        width: calc(60 / 750 * 100vw);
        height: calc(60 / 750 * 100vw); }
      .mvSlideWrap .arrows .mvStop {
        width: calc(60 / 750 * 100vw);
        height: calc(60 / 750 * 100vw); }

  .mvSlider {
    width: calc(690 / 750 * 100vw);
    margin: 0 auto; }
    .mvSlider .slick-list {
      overflow: visible !important; }
    .mvSlider .slideInner {
      padding: 0 calc(10 / 750 * 100vw); }
    .mvSlider .slideImg {
      border-radius: 10px; }
      .mvSlider .slideImg::before {
        width: calc(84 / 750 * 100vw);
        height: calc(84 / 750 * 100vw); }
    .mvSlider .slideText {
      font-size: calc(28 / 750 * 100vw);
      max-width: calc(454 / 750 * 100vw);
      margin-top: calc(25 / 750 * 100vw); }

  .mvArea {
    background-size: calc(1366 / 750 * 100vw), calc(1366 / 750 * 100vw);
    background-position: left bottom, left top;
    font-size: calc(25 / 750 * 100vw);
    padding: calc(60 / 750 * 100vw) 0 calc(130 / 750 * 100vw);
    margin-bottom: 0; }
    .mvArea::before {
      width: calc(107 / 750 * 100vw);
      height: calc(110 / 750 * 100vw);
      right: calc(62 / 750 * 100vw);
      bottom: calc(38 / 750 * 100vw); }

  .mvWrapper {
    display: block;
    padding: 0; }

  .mvBox {
    min-height: 0;
    max-width: 100%;
    width: 100%;
    padding: 0 calc(40 / 750 * 100vw); }

  .mvText {
    line-height: 1.6; }

  .mvSubttl {
    align-self: center;
    text-align: center; }

  .mvTitle {
    font-size: calc(50 / 750 * 100vw);
    margin-bottom: .4em;
    text-align: center; }

  .supervision {
    margin-top: calc(55 / 750 * 100vw);
    border-radius: calc(124 / 750 * 100vw);
    font-size: calc(18 / 750 * 100vw);
    letter-spacing: .02em;
    padding: 0.85em calc(32 / 750 * 100vw) 0.95em;
    width: 100%;
    min-width: 0;
    justify-content: center; }

  .thumBox {
    border-radius: 10px; }
    .thumBox .thumbnail {
      border-radius: 11px 11px 0 0;
      position: relative; }
      .thumBox .thumbnail::before {
        border-width: 2px;
        border-radius: 9px 9px 0 0; }
    .thumBox .thumText {
      font-size: 1.3rem;
      padding: .65em .2em .8em; }

  .evenlyCol3To2 {
    justify-content: space-between;
    gap: 15px 0; }
    .evenlyCol3To2 > * {
      width: calc(315 / 750 * 100vw); }

  .topContents [class*="decoHead"]::before {
    width: 58px;
    height: 62px; }
  .topContents .decoHead1::before {
    top: -48px;
    left: -14px; }
  .topContents .decoHead2 {
    margin-top: 85px; }
    .topContents .decoHead2::before {
      top: auto;
      right: 0;
      bottom: calc(100%); } }