@charset "UTF-8";
@import url("global.css");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400&display=swap");
#top_movie {
  margin: -60px auto 60px; }
  #top_movie .movie_box {
    background: #464343;
    padding: 15px 15px 5px;
    display: inline-block;
    width: 640px; }
    #top_movie .movie_box iframe {
      width: 100%;
      height: 360px; }
  #top_movie .movie_txt {
    display: none; }
  #top_movie .movie_img {
    display: inline-block; }

#area {
  background-color: #f7f7f7;
  position: relative; }
  #area .textarea {
    padding: 80px 0 80px 85px;
    position: relative;
    z-index: 1; }
    #area .textarea .lead {
      font-size: 34px;
      font-weight: bold;
      line-height: 1.6;
      margin-bottom: 20px; }
    #area .textarea .sub {
      font-weight: bold; }
    #area .textarea .areabox {
      margin-top: 50px; }
      #area .textarea .areabox dt {
        font-weight: bold;
        color: #fff;
        padding: 3px 15px;
        background-color: #1F1F1F;
        margin-bottom: 15px;
        display: inline-block; }
  #area figure {
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0; }
    #area figure img {
      object-position: left top;
      font-family: 'object-position: left top;'; }

.common-title {
  line-height: 1.6;
  font-size: 34px;
  font-weight: bold;
  margin-bottom: 70px;
  text-align: center; }

#intro {
  margin-top: 150px; }
  #intro .common-title span {
    display: block;
    font-size: 20px;
    margin-bottom: 15px; }
  #intro .text {
    text-align: center; }
  #intro .box {
    position: relative;
    margin-top: 80px;
    padding: 140px; }
    #intro .box .textarea {
      background-color: #fff;
      box-sizing: border-box;
      padding: 80px 60px;
      width: 46%;
      position: relative;
      z-index: 2; }
      #intro .box .textarea .logo {
        width: 130px;
        margin: 0 auto; }
      #intro .box .textarea .catch {
        font-weight: bold;
        font-size: 20px;
        margin: 30px 0;
        text-align: center; }
    #intro .box figure {
      height: 100%;
      position: absolute;
      right: 0;
      top: 0; }

#promise {
  margin-top: 150px; }
  #promise .inner {
    position: relative;
    padding-left: 38%; }
    #promise .inner .textarea .box {
      margin-bottom: 60px; }
      #promise .inner .textarea .box:last-child {
        margin-bottom: 0; }
      #promise .inner .textarea .box .titlebox {
        display: -webkit-flex;
        display: flex;
        align-items: flex-end;
        margin-bottom: 40px; }
        #promise .inner .textarea .box .titlebox .num {
          font-family: "Barlow Condensed", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
          font-size: 88px;
          font-weight: 400;
          margin-right: 30px;
          line-height: 1; }
        #promise .inner .textarea .box .titlebox .title {
          font-weight: bold;
          font-size: 21px; }
      #promise .inner .textarea .box .btn {
        display: inline-block;
        margin-top: 30px; }
        #promise .inner .textarea .box .btn a {
          display: block;
          border: 1px solid #C8C8C8;
          padding: 20px 60px;
          min-width: 500px;
          box-sizing: border-box;
          position: relative;
          text-align: center; }
          #promise .inner .textarea .box .btn a:hover {
            background-color: #1F1F1F;
            border-color: #1F1F1F;
            color: #fff; }
            #promise .inner .textarea .box .btn a:hover::after {
              border-color: #fff; }
          #promise .inner .textarea .box .btn a::after {
            content: "";
            width: 24px;
            height: 5px;
            border-bottom: 1px solid #1F1F1F;
            border-right: 1px solid #1F1F1F;
            position: absolute;
            top: 50%;
            right: 20px;
            -webkit-transform: skew(45deg) translateY(-50%);
            transform: skew(45deg) translateY(-50%); }
    #promise .inner .image {
      position: absolute;
      left: 0;
      top: 0;
      height: calc(100% - 30px);
      margin-top: -30px;
      width: 33%; }
      #promise .inner .image p {
        height: 50%;
        margin-top: 30px; }

#money {
  margin-top: 150px; }
  #money .text {
    width: 70%;
    margin: 0 auto;
    text-align: center; }
  #money .image {
    margin-top: 60px;
    text-align: center; }

#asahikawa {
  margin-top: 150px; }
  #asahikawa .text {
    text-align: center; }
  #asahikawa .award {
    margin: 30px auto 50px;
    text-align: center; }
  #asahikawa .image {
    text-align: center;
    width: 100%; }
    #asahikawa .image img {
      width: 100%; }
    #asahikawa .image .cap {
      display: block;
      margin-top: 15px; }

#reason {
  margin-top: 100px;
  display: -webkit-flex;
  display: flex;
  align-items: center; }
  #reason .textarea {
    width: 70%;
    padding-right: 5%; }
    #reason .textarea .title {
      font-weight: bold;
      font-size: 24px;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #C8C8C8; }
    #reason .textarea p {
      margin-top: 15px; }
  #reason .image {
    width: 40%; }

#zaisan {
  margin-top: 150px; }
  #zaisan .lead {
    font-weight: bold;
    margin-bottom: 40px;
    font-size: 21px;
    text-align: center; }
  #zaisan .text {
    max-width: 960px;
    margin: 0 auto;
    text-align: center; }
  #zaisan figure {
    margin-top: 60px;
    width: 100%; }
    #zaisan figure img {
      width: 100%; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1400px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1400px) {
  #top_movie {
    margin: -60px auto 60px; }
    #top_movie .movie_box {
      background: #464343;
      padding: 15px 15px 5px;
      display: inline-block;
      width: 50vw; }
      #top_movie .movie_box iframe {
        width: 100%;
        height: 28vw; }
    #top_movie .movie_img {
      width: 35vw; }

  #area .textarea {
    padding: 50px 0 50px 60px; }
    #area .textarea .lead {
      font-size: 28px; }
    #area .textarea .sub {
      padding-right: 50%; }
    #area .textarea .areabox {
      margin-top: 40px; }
  #area figure img {
    object-position: center top;
    font-family: 'object-position: center top;'; }

  #intro .text {
    text-align: left; }
    #intro .text br {
      display: none; }
  #intro .box {
    padding: 50px 0; }
    #intro .box figure {
      width: 80%; }
    #intro .box .textarea {
      padding: 60px 30px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #top_movie {
    margin: 0px auto 60px; }
    #top_movie .movie_box {
      padding: 10px 10px 0px;
      width: 44vw; }
      #top_movie .movie_box iframe {
        height: 25vw; }
    #top_movie #top_movie .movie_img {
      width: 32vw; }

  #area figure {
    position: static;
    width: 100%; }
  #area .textarea {
    padding: 45px 30px 35px;
    text-align: center; }
    #area .textarea .lead {
      font-size: 24px; }
    #area .textarea .sub {
      padding-right: 0; }
    #area .textarea .areabox {
      margin-top: 30px; }
      #area .textarea .areabox dl dd {
        text-align: left; }
        #area .textarea .areabox dl dd br {
          display: none; }

  #intro {
    margin-top: 80px; }
    #intro .common-title span {
      font-size: 17px; }
    #intro .box {
      margin-top: 30px; }
      #intro .box .textarea {
        padding: 50px 30px;
        width: 90%;
        margin: 0 auto; }
        #intro .box .textarea .logo {
          width: 100px; }
        #intro .box .textarea .catch {
          font-size: 18px; }
      #intro .box figure {
        width: 100%; }

  .common-title {
    font-size: 26px;
    margin-bottom: 40px; }
    .common-title span {
      font-size: 18px;
      margin-bottom: 10px; }

  #promise {
    margin-top: 80px; }
    #promise .inner {
      padding-left: 0; }
      #promise .inner .textarea .box {
        margin-bottom: 40px; }
        #promise .inner .textarea .box .titlebox {
          align-items: center;
          margin-bottom: 30px;
          justify-content: center; }
          #promise .inner .textarea .box .titlebox .num {
            font-size: 70px;
            margin-right: 20px; }
          #promise .inner .textarea .box .titlebox .title {
            font-size: 18px; }
        #promise .inner .textarea .box .btn {
          display: block;
          margin-top: 20px; }
          #promise .inner .textarea .box .btn a {
            min-width: auto;
            padding: 15px 40px; }
    #promise figure {
      display: none; }

  #money {
    margin-top: 80px; }
    #money .text {
      width: 100%;
      text-align: start; }

  #asahikawa {
    margin-top: 80px; }
    #asahikawa .award {
      margin: 20px auto 40px;
      width: 200px; }

  #reason {
    margin-top: 50px;
    display: block; }
    #reason .textarea {
      width: auto;
      padding-right: 0; }
      #reason .textarea .title {
        font-size: 18px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        text-align: center; }
    #reason figure {
      width: 80%;
      margin: 30px auto 0; }

  #zaisan {
    margin-top: 80px; }
    #zaisan .lead {
      font-size: 16px;
      margin-bottom: 25px; }
    #zaisan figure {
      margin-top: 25px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #top_movie {
    margin: -60px auto 30px; }
    #top_movie .movie_box {
      display: block;
      margin: 60px 5vw 0;
      padding: 10px 10px 5px;
      width: auto; }
      #top_movie .movie_box iframe {
        width: 100%;
        height: 47vw; }
    #top_movie .movie_txt {
      display: block;
      margin: 10px 5px;
      font-size: 14px; }
      #top_movie .movie_txt span {
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 18px;
        color: #003876; }
    #top_movie .movie_img {
      display: none; }

  #area .textarea {
    padding: 40px 25px 25px; }
    #area .textarea .lead {
      font-size: 19px; }
      #area .textarea .lead br {
        display: none; }
    #area .textarea .sub {
      font-weight: normal; }
    #area .textarea .areabox {
      margin-top: 25px; }
      #area .textarea .areabox dt {
        padding: 3px 10px;
        font-size: 12px; }
      #area .textarea .areabox dd {
        font-size: 12px; }

  .common-title {
    font-size: 21px;
    margin-bottom: 25px; }

  #intro {
    margin-top: 60px; }
    #intro .common-title span {
      font-size: 16px;
      margin-bottom: 10px; }
    #intro .box .textarea {
      padding: 35px 30px;
      width: 95%; }
      #intro .box .textarea .logo {
        width: 80px; }
      #intro .box .textarea .catch {
        font-size: 16px;
        margin: 25px 0 20px; }
        #intro .box .textarea .catch br {
          display: none; }

  #promise {
    margin-top: 60px; }
    #promise .inner .textarea .box .titlebox {
      display: block;
      text-align: center; }
      #promise .inner .textarea .box .titlebox .num {
        font-size: 42px;
        margin-right: 0;
        margin-bottom: 15px; }
      #promise .inner .textarea .box .titlebox .title {
        font-size: 16px; }
    #promise .inner .textarea .box .btn a {
      padding: 15px 55px 15px 15px;
      font-size: 14px;
      text-align: left; }

  #money {
    margin-top: 80px; }
    #money .text {
      width: 100%;
      text-align: start; }
      #money .text .sp_none {
        display: none; }
    #money .image {
      margin-top: 40px; }

  #asahikawa {
    margin-top: 60px; }
    #asahikawa .text {
      text-align: left; }
    #asahikawa .image .cap {
      font-size: 12px;
      margin-top: 10px; }

  #reason {
    margin-top: 40px; }
    #reason .textarea .title {
      font-size: 16px;
      text-align: left;
      margin-bottom: 15px;
      padding-bottom: 10px; }

  #zaisan {
    margin-top: 60px; } }