@charset "UTF-8";
/* NEWマーク
========================================== */
.new_ic {
  display: inline-block;
  position: relative;
}
#list_01 .new_ic > a {
  display: inline;
}
.new_ic::before {
  content: "";
  background: url(../../images/main/tz/new_icon.png) center center/contain no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 4rem;
  height: 4rem;
  transform: translate(-2.7rem, -3.2rem);
}
@media screen and (max-width: 999px) {
  .new_ic::before {
    left: 6em;
    transform: translateY(-100%);
  }
}

/* NEWSLIST
========================================== */
.info__news,
#news_block #list_01 {
  font-weight: 700;
}
.info__news table, .info__news tbody, .info__news th, .info__news td,
#news_block #list_01 table,
#news_block #list_01 tbody,
#news_block #list_01 th,
#news_block #list_01 td {
  display: block;
}
.info__news tr,
#news_block #list_01 tr {
  display: grid;
  grid-template-columns: 7em 1fr;
  grid-template-rows: 1fr auto 1fr;
  border-bottom: 1px solid #6f6f6f;
  min-height: 10rem;
  padding: 0.5em 0;
}
.info__news tr td,
#news_block #list_01 tr td {
  grid-area: 2/2/3/3;
}
.info__news tr td.day,
#news_block #list_01 tr td.day {
  grid-area: 2/1/3/2;
  color: #ff8b00;
}
.info__news a,
#news_block #list_01 a {
  color: inherit;
  text-decoration: inherit;
}
@media screen and (max-width: 999px) {
  .info__news tr,
  #news_block #list_01 tr {
    display: block;
  }
}

.info__news h3 {
  margin-bottom: 4rem;
}

/* Youtube
========================================== */
/*
  width = ウィンドウ幅 - 左右マージンの合計
  height = width * 9/16
  ※単位vwはスクロールバーを含めた値になるため、PCの場合は少しずれる。
  　スマホは問題ない。
*/
.read :not(.c-youtubeWrap) > iframe,
.read .c-youtubeWrap {
  margin: 1em 0;
}

.read :not(.c-youtubeWrap) > iframe {
  max-width: 640px;
  max-height: calc( 640px * 9 / 16 );
  width: calc( 100vw - 40px );
  height: calc( ( 100vw - 40px ) * 9 / 16 );
}

/* ページネーション（ネクストバック）
========================================== */
/* ネクストバックナビ */
.nb_navi {
  text-align: center;
  margin-top: 50px;
}

/* 件数表示 */
/* 件数件表示（数字） */
/* ページネーション（リスト） */
.page_navi > ul {
  margin: 0;
  display: flex;
  justify-content: center;
}

/* ページネーション（ページ数、前、次） */
/* ページネーション（前、次のみ） */
.page_navi li.nb_pre,
.page_navi li.nb_nex {
  margin: 0 1em;
}

/* ページネーション（ページ数のみ） */
.page_navi li.nb_crt,
.page_navi li.nb_link {
  margin: 0 .5em;
}

/* ページネーション（ページ数 カレント） */
/* ページネーション（リンク） */
.page_navi a {
  text-decoration: none;
}

/* ページネーション リンクなし */
.page_navi li > span {
  opacity: .2;
}

/* バナーユニット
========================================== */
[id^="bnu_001_"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 0 0;
}

[id^="bnu_001_"] > p {
  width: 100%;
  max-width: 350px;
  margin: 0 10px 10px;
}

/* ==========================================
*
*  mfp
*
========================================== */
.mfp-bg {
  background: rgba(0, 0, 0, 0.8) !important;
}

.mfp-fade.mfp-bg {
  opacity: 0;
  transition: .5s;
}

/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 1;
}

/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: .5s;
}

/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

/* コンテンツ
========================================== */
#wrapper {
  overflow: hidden;
}

/*コンテンツサイズ*/
#contents {
  padding-bottom: 4em;
}

section {
  position: relative;
  padding: 0 4rem;
  margin-bottom: 6em;
}
@media screen and (max-width: 600px) {
  section {
    padding: 0 1.5rem;
    margin-bottom: 4em;
  }
}

[class*="__wrap"] {
  max-width: 1600px;
  margin: auto;
}

[class*="__inner"] {
  max-width: 1000px;
  margin: auto;
}

/*コンテンツヘッダー*/
.contHead[data-color="blue"] {
  --headColor: #12a6ea;
}
.contHead[data-color="orange"] {
  --headColor: #ff8b00;
}
.contHead[data-color="pink"] {
  --headColor: #f02475;
}
.contHead[data-color="gray"] {
  --headColor: #7e7e7e;
}
.contHead[data-head="h2"] {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  margin: 2em 0 3em;
}
.contHead[data-head="h2"] h2 {
  grid-area: 2 / 1 / 3 / 2;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "Kaisei Opti", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: 5rem;
  line-height: 1;
  margin: 0;
  flex-wrap: wrap;
}
.contHead[data-head="h2"] h2 span {
  display: inline-block;
  padding: 1rem;
  margin-left: 0.8rem;
  border: solid #000000;
  border-width: 0 1px 1px 0;
  background: linear-gradient(to bottom right, #000000 50%, var(--headColor) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contHead[data-head="h2"] h2 span:first-child {
  margin-left: 0rem;
}
.contHead[data-head="h2"] h2 span:last-child {
  margin-right: 0;
}
.contHead[data-head="h2"] p {
  grid-area: 1 / 1 / 2 / 3;
  text-align: right;
  font-size: 1.74rem;
  letter-spacing: 0.84em;
  margin: 0 -0.84em 1.5rem 0;
  line-height: 1;
  color: #000000;
}
.contHead[data-head="h2"] div {
  position: relative;
  grid-area: 2 / 2 / 3 / 3;
  border-top: 1px solid;
  font-size: 1rem;
  line-height: 0;
}
.contHead[data-head="h2"] div::before {
  content: "";
  position: absolute;
  top: 1.0em;
  right: 0;
  width: 774px;
  max-width: 90%;
  height: 100%;
  background: url(../../images/main/tz/title_en.png) top right/contain no-repeat;
}
.contHead[data-head="h2"][data-align="right"] {
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
}
.contHead[data-head="h2"][data-align="right"] h2 {
  grid-area: 2 / 2 / 3 / 3;
}
.contHead[data-head="h2"][data-align="right"] h2 span {
  border-width: 0 0 1px 1px;
  background-image: linear-gradient(to top left, #000000 50%, var(--headColor) 50%);
}
.contHead[data-head="h2"][data-align="right"] p {
  grid-area: 1 / 1 / 2 / 3;
  text-align: left;
}
.contHead[data-head="h2"][data-align="right"] div.contHead__title {
  grid-area: 2 / 1 / 2 / 2;
}
.contHead[data-head="h2"][data-align="right"] div::before {
  right: auto;
  left: 0;
  background-position: top left;
}
.contHead[data-head="h2"][data-align="center"] {
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto;
}
.contHead[data-head="h2"][data-align="center"]::before {
  content: "";
  grid-area: 2 / 1 / 3 / 2;
  border-bottom: 1px solid #000000;
}
.contHead[data-head="h2"][data-align="center"]::after {
  content: "";
  grid-area: 2 / 3 / 3 / 4;
  border-top: 1px solid #000000;
}
.contHead[data-head="h2"][data-align="center"] h2 {
  grid-area: 2 / 2 / 3 / 3;
}
.contHead[data-head="h2"][data-align="center"] h2 span {
  border-width: 0 1px 1px 0;
  background-image: linear-gradient(to top left, var(--headColor) 50%, #000000 50%);
}
.contHead[data-head="h2"][data-align="center"] p {
  grid-area: 1 / 1 / 2 / 4;
  text-align: center;
}
@media screen and (max-width: 1200px) {
  .contHead[data-head="h2"][data-align="right"] div::before {
    background-image: url(../../images/main/tz/title_en_sp_left.png);
    background-position: center left;
  }
}
@media screen and (max-width: 999px) {
  .contHead[data-head="h2"] {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0vw;
    margin: 2vw 0 3vw;
  }
  .contHead[data-head="h2"][data-align="right"] {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
  }
  .contHead[data-head="h2"] h2 {
    font-size: 6.3vw;
    flex-wrap: wrap;
    column-gap: 1vw;
    row-gap: 1vw;
  }
  .contHead[data-head="h2"] h2 span {
    margin: 0;
  }
  .contHead[data-head="h2"] p {
    font-size: 1.4rem;
  }
  .contHead[data-head="h2"] div::before {
    top: 0;
    bottom: 0;
    max-height: 41px;
    margin: auto;
    background: url(../../images/main/tz/title_en_sp_right.png) center right/contain no-repeat;
  }
}
@media screen and (max-width: 500px) {
  .contHead[data-head="h2"] h2 {
    flex-wrap: wrap;
  }
  .contHead[data-head="h2"] h2 span {
    padding: 0.2em;
  }
  .contHead[data-head="h2"] p {
    font-size: 2vw;
  }
}
@media screen and (max-width: 767px) {
  .contHead[data-head="h2"][data-align="right"] p {
    grid-area: 1 / 1 / 2 / 4;
  }
  .contHead[data-head="h2"][data-align="right"] h2 {
    /* grid-area: 2 / 2 / 3 / 3; */
  }
  .contHead[data-head="h2"][data-align="right"] div {
    /* grid-area: 2 / 1 / 2 / 3; */
  }
}
.contHead[data-head="h3"] {
  display: flex;
  flex-direction: column;
  text-align: center;
  letter-spacing: 0.66em;
  font-size: 1.5rem;
  font-family: "Kaisei Opti", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMincho, serif;
  margin: 0 0 5rem;
}
.contHead[data-head="h3"] > * {
  margin: 0;
  border: solid;
}
.contHead[data-head="h3"] h3 {
  order: 2;
  font-size: 2em;
  border-width: 1px 1px 0 0;
  padding-top: .5rem;
}
.contHead[data-head="h3"] h3 span {
  display: inline-block;
  background: linear-gradient(to top left, #000000 50%, var(--headColor) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contHead[data-head="h3"] p {
  order: 1;
  border-width: 0 0 0 1px;
  padding-bottom: .5rem;
}

/*=============================================

  MOVIE

=============================================*/
.kv__movie {
  margin: 3em 0 0 0;
  position: relative;
  z-index: 0;
  /* overflow: hidden; */
  /* display: flex; */
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 5em;
  padding: 0 1.5rem;
}

.kv__movie h2 {
  margin: 0 auto 0.5em;
  letter-spacing: 0.5em;
  font-weight: 300;
}

.kv__movie .c-youtubeWrap > iframe,
.kv__movie .c-youtubeWrap > .js-replaceYoutube > img {
  position: static;
}

.playButton {
  cursor: pointer;
  /* width: 100%; */
  border: 1px solid #000;
  aspect-ratio: 16 / 9.25;
  padding: 1em;
}

.playButton::before, .playButton::after {
  content: "";
  position: absolute;
  top: 1em;
  bottom: 1em;
  left: 1em;
  right: 1em;
  z-index: 10;
  transition: .4s;
}

.playButton::before {
  /* background: url(../../images/main/common/bg_dot.png) top left repeat, #ff0052; */
  opacity: 0.2;
  mix-blend-mode: soft-light;
}

.playButton::after {
  display: block;
  width: min(100px, 20%);
  height: min(100px, 20%);
  margin: auto auto 5px 5px;
  background: url(../../images/main/tz/kv_playBtn.png) bottom left/contain no-repeat;
  transform-origin: bottom left;
}

.playButton:hover::before {
  opacity: 0;
}

.playButton:hover::after {
  transform: scale(1.5);
  opacity: 0.5;
}