body {
  margin: 0;
}
#main {
  width: 100%;
  margin: 0;

  .pc {
    display: block;
  }
  .top_img {
    width: 100%;
    position: relative;
    img {
      width: 100%;
      display: block;
    }
    .reservation_button {
      position: absolute;
      bottom: 10%;
      right: 10%;
      padding: 30px 30px;
      background-color: #ff6f61;
      color: white;
      border-radius: 100%;
      text-decoration: none;
      font-size: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s, box-shadow 0.3s;
      &:hover {
        background-color: #e65c50;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
      }
    }
  }
  .contents_title {
    position: relative;
    width: 100%;
    .contents_title_bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #252525; /* 任意の背景色 */
      z-index: -1;
    }
    .title {
      text-align: center;
      font-size: 30px;
      padding: 30px;
      color: #ffffff;
    }
  }
  .brand {
    width: 100%;
    .contents_brand {
      width: 100%;
      max-width: 980px;
      margin: 50px auto;
      .brand_img {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        a {
          width: 45%;
          margin: 10px;
          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
  }
  .movie {
    width: 100%;
    .contents_movie {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin: 50px auto;
      .movie_img {
        width: 100%;
        max-width: 980px;
        position: relative;
        display: flex;
        .youtube_container {
          position: relative;
          width: 48%;
          padding-top: 27%;  /* 16:9 アスペクト比 */
          margin: 20px 10px;
          overflow: hidden;
          iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
          .youtube_overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            text-align: center;
            opacity: 0;
            transition: opacity 0.3s;
            cursor: pointer;
          }
          &:hover .youtube-overlay {
            opacity: 1;
          }
        }
      }
    }
  }
  .news {
    width: 100%;
    .contents_title {
      .title {
        a {
          text-decoration: none;
          color: #ffffff;
        }
      }
    }
    .contents_news {
      width: 100%;
      max-width: 980px;
      margin: 50px auto;
      .news_box {
        text-align: center;
        font-size: 26px;
        .news_item {
          padding: 40px 0;
          .news_item_link {
            text-decoration: none;
            .news_item_img {
              width: 60%;
              height: auto;
              object-fit: cover;
            }
            .news_item_title {
              font-size: 20px;
              color: #252525;
              padding: 20px 0;
            }
          }
        }
      }
    }
  }
  .founder {
    width: 100%;
    .contents_founder {
      width: 100%;
      max-width: 980px;
      margin: 50px auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .founder_img {
        width: 45%;
        .contents_header {
          width: 100%;
          max-width: 980px;
          margin: 30px auto;
          background: linear-gradient(to bottom, #E70012, #FCBF53);
          border-radius: 3px;
          color: #ffffff;
          .title {
            font-family: 'Helvetica LT Narrow', sans-serif;
            font-size: 3rem;
            font-weight: bold;
            margin: 0;
            text-align: center;
            letter-spacing: 0.5rem;
            -webkit-text-stroke: 1px #ffffff;
            span {
              font-size: 2.5rem;
            }
          }
        }
        img {
          width: 100%;
        }
      }
      .founder_sns {
        width: 45%;
        a {
          margin: 10px;
          img {
            width: 150px;
          }
        }
        .sns_box1 {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .sns_box2 {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .recruit {
    width: 100%;
    .contents_recruit {
      width: 100%;
      max-width: 980px;
      margin: 50px auto;
      .recruit_img {
        display: flex;
        justify-content: space-around;
        align-items: center;
        a {
          width: 45%;
          text-decoration: none;
          text-align: center;
          font-size: 1.5rem;
          color: #000000;
          img {
            width: 100%;
            height: 300px;
            object-fit: cover;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
#main {
    .pc {
      display: none;
    }
    .top_img {
      position: static;
      img {
        width: 100%;
        display: block;
      }
      .reservation_button {
        position: static;
        margin: 20px;
        display: flex;
        justify-content: center;
        border-radius: 30px;
        padding: 10px;
      }
      &:hover {
        background-color: #e65c50;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
      }
    }
    .brand {
      .contents_brand {
        width: 100%;
        max-width: 980px;
        margin: 50px auto;
        .brand_img {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          a {
            width: 40%;
            margin: 10px;
            img {
              width: 100%;
              height: auto;
            }
          }
        }
      }
    }
    .movie {
      .contents_movie {
        .movie_img {
          display: block;
          .youtube_container {
            width: 90%;
            padding-top: 56.25%; /* 16:9 アスペクト比 */
            margin: 20px auto;
          }
        }
      }
    }
    .news {
      .contents_news {
        .news_box {
          .news_item {
            .news_item_link {
              .news_item_img {
                width: 90%;
                height: auto;
              }
            }
          }
        }
      }
    }
    .founder {
      .contents_founder {
        display: block;
        .founder_img {
          width: 90%;
          margin: 0 auto;
          .contents_header {
            border-radius: 3px;
            margin: 10px auto 20px auto;
            color: #ffffff;
            .title {
              font-size: 1.8rem;
              letter-spacing: 0.5rem;
              -webkit-text-stroke: 1px #ffffff;
              span {
                font-size: 1.5rem;
              }
            }
          }
        }
        .founder_sns {
          width: 90%;
          margin: 0 auto;
          a {
            img {
              width: 100px;
            }
          }
        }
      }
    }
    .recruit {
      .contents_recruit {
        .recruit_img {
          display: block;
          margin: 10px;
          a {
            display: block;
            width: 100%;
            img {
              width: 90%;
              height: auto;
              padding: 10px;
              display: flex;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
}