@charset "UTF-8";
/*========= 背景動画設定のCSS ===============*/
/*header設定*/
#main-wrap {
  position: relative;
  /*ローディング画像などを表示す際の基点とするため指定*/
  height: 60vh;
  /*高さを全画面にあわせる*/
  text-align: center;
  color: #fff;
  /*ローディング画面時＆動画が表示されないときに表示する背景画像のレスポンシブ化*/
  background: url("../img/movie.jpg") no-repeat;
  background-size: cover;
  z-index: -1; }
  @media (min-width: 992px) {
    #main-wrap {
      background: url("../img/movie.jpg") no-repeat center center;
      background-size: cover;
      height: 80vh; } }
  #main-wrap:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url(../img/bg_wave01.svg) no-repeat;
    background-size: auto;
    background-position: 0 bottom; }

/* ローディングアイコン設定 */
#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold; }

/*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/
#loading.disappear {
  display: none; }

/* youtube設定 */
#youtube-area {
  position: fixed;
  z-index: 1;
  /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0; }

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
  animation-name: PageAnimeAppear;
  animation-duration: .5s;
  animation-fill-mode: forwards; }

@keyframes PageAnimeAppear {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
#youtube {
  /*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh;
  /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw;
  /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%; }

/*youtubeがクリックされないためのマスク*/
#youtube-mask {
  position: absolute;
  z-index: 2;
  /*下から2番目に表示*/
  top: 0;
  width: 100%;
  height: 100%; }

/*youtube 上のロゴ */
.top-lead {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 3.4rem;
  letter-spacing: .05em;
  line-height: 1.0;
  font-weight: bold;
  color: #fff;
  font-style: italic;
  white-space: nowrap; }
  @media (min-width: 992px) {
    .top-lead {
      font-size: 6.8rem; } }

#container {
  position: relative;
  /*relativeを指定してfixed指定をした#youtube-areaの上に表示*/
  z-index: 3;
  padding: 0 0 10%;
  /*一番上に表示*/
  background: #fff; }
  #container .more-btn {
    margin: 1.0em auto 0; }

.mcn-content {
  padding: 1.0em;
  margin: 0 auto 3.5em;
  font-size: 1.2rem;
  line-height: 2.0;
  color: #999; }
  @media (min-width: 992px) {
    .mcn-content {
      width: 60%;
      margin: 0 auto 6.5em; } }
  .mcn-content .page-title {
    text-align: center;
    font-size: 5.0rem; }
    @media (min-width: 992px) {
      .mcn-content .page-title {
        font-size: 10.0rem; } }
  .mcn-content .sm {
    font-size: 1.2rem; }
  .mcn-content .lead {
    margin: 0 0 2.0em;
    font-size: 1.6rem;
    color: #333; }
    @media (min-width: 992px) {
      .mcn-content .lead {
        text-align: center; } }

/*# sourceMappingURL=index.css.map */