@charset "UTF-8";
#maincontent {
  background-color: #FFF100; }

.title {
  padding-top: 100px; }
  @media only screen and (max-width: 767px) {
    .title {
      padding-top: 50px; } }
  .title .inr {
    text-align: center; }
    .title .inr h2 {
      font-size: 2em;
      font-family: "EB Garamond", serif;
      letter-spacing: .2em; }
      @media only screen and (max-width: 767px) {
        .title .inr h2 {
          font-size: 1.4em; } }
      .title .inr h2 span {
        display: block;
        margin-top: 5px;
        font-family: "Noto Sans", sans-serif;
        font-size: .4em;
        letter-spacing: .1em; }
        @media only screen and (max-width: 767px) {
          .title .inr h2 span {
            font-size: .6em; } }
    .title .inr p span {
      display: block;
      margin-top: 10px;
      padding-top: 60px;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .title .inr p span {
          padding-top: 40px;
          margin-top: 5px;
          font-size: .9em; } }
      .title .inr p span::before {
        content: '';
        display: inline-block;
        width: 160px;
        height: 15px;
        background-image: url(../../img/arrow_black.png);
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%); }

.movie {
  padding-top: 100px;
  padding-bottom: 120px; }
  @media only screen and (max-width: 767px) {
    .movie {
      padding-top: 50px;
      padding-bottom: 60px; } }
  .movie .inr .youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%; }
    .movie .inr .youtube iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%; }
  .movie .inr .back {
    font-size: 1.1em;
    font-family: "EB Garamond", serif;
    font-style: italic;
    margin: 40px 0; }
    @media only screen and (max-width: 767px) {
      .movie .inr .back {
        margin-top: 20px; } }
    .movie .inr .back a {
      position: relative;
      display: block; }
      .movie .inr .back a::before {
        content: '';
        display: inline-block;
        width: 54px;
        height: 49px;
        background-image: url(../img/back_icon.png);
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
        margin-right: 10px;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; }
      .movie .inr .back a:hover::before {
        background-image: url(../img/back_icon_hover.png);
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s; }