:root {
  --radius: 60px; }

html {
  font-size: min(0.8vw, 62.5%);
  background: #2F2929; }
  @media screen and (max-width: 799px) {
    html {
      font-size: calc(1000vw / 390); } }

body {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0;
  font-size: 2rem;
  color: #fff;
  margin: 0 auto; }
  @media screen and (max-width: 799px) {
    body {
      font-size: 1.6rem; } }

.inner {
  width: 90%;
  margin: 0 auto; }
  @media screen and (max-width: 799px) {
    .inner {
      width: 92.8%; } }

a {
  color: #fff;
  transition: color .2s; }
  a:hover {
    color: #A8331E; }

.rectangle_btn {
  display: block;
  padding: 2rem 6rem;
  border: 1px solid #fff;
  transition: background 0.2s, border 0.2s;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content; }
  .rectangle_btn:hover {
    background: #A8331E;
    border: 1px solid #A8331E;
    color: #fff; }
  @media screen and (max-width: 799px) {
    .rectangle_btn {
      padding: 2.2rem 7.2rem; } }

p {
  line-height: 1.5;
  letter-spacing: 0; }
  p:last-child {
    margin-bottom: 0; }

header {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  padding: 3rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  header .h_logo {
    display: block;
    width: 10rem;
    height: 10rem; }
  header .h_r ul {
    display: flex; }
    header .h_r ul li {
      margin-right: 4rem; }
      header .h_r ul li:last-child {
        margin-right: 0; }
  header .h_r a {
    font-size: 2.4rem;
    font-weight: bold; }
  @media screen and (max-width: 799px) {
    header {
      padding: 2rem 0;
      flex-direction: column; }
      header .h_logo {
        width: 4rem;
        height: 4rem;
        margin-bottom: 2rem; }
      header .h_r {
        width: 80%; }
        header .h_r ul {
          display: flex; }
          header .h_r ul li {
            width: calc(100% / 3);
            text-align: center;
            margin-right: 0; }
        header .h_r a {
          font-size: 2rem; } }

main {
  margin-bottom: 20rem; }
  @media screen and (max-width: 799px) {
    main {
      margin-bottom: 10rem; } }

.fv {
  position: relative;
  margin-bottom: 16rem; }
  .fv .fv_contents {
    position: absolute;
    top: 47%;
    left: 6%;
    transform: translate(0, -50%); }
  .fv .fv_main_txt {
    font-size: 8.8rem;
    font-weight: bold;
    line-height: 1.25; }
  .fv .fv_sub_txt {
    display: block;
    font-size: 3.2rem;
    margin-bottom: 6rem; }
  .fv .fv_img {
    width: 90%;
    height: 100vh;
    margin-left: auto;
    border-radius: 0 0 0 16vw;
    overflow: hidden; }
    .fv .fv_img picture {
      width: 100%;
      height: 100%; }
    .fv .fv_img img {
      object-fit: cover;
      object-position: 80% center;
      width: 100%;
      height: 100%; }
  @media screen and (max-width: 799px) {
    .fv {
      min-height: 54rem;
      margin-bottom: calc(16rem + 5rem); }
      .fv .fv_contents {
        top: inherit;
        bottom: -16rem;
        left: 54%;
        transform: translate(-50%, 0);
        text-align: center;
        width: 92.8%;
        min-height: 70rem;
        height: 100vh;
        padding-top: 32%; }
      .fv .fv_main_txt {
        font-size: 4.6rem; }
      .fv .fv_sub_txt {
        font-size: 1.6rem;
        margin-bottom: 0;
        line-height: 1.25; }
      .fv .rectangle_btn {
        position: absolute;
        bottom: 8rem;
        left: 50%;
        transform: translate(-50%, 50%);
        white-space: nowrap; }
      .fv .fv_img {
        height: calc(100vh - 16rem);
        min-height: 54rem; }
        .fv .fv_img img {
          object-position: 76% top; } }

.page .page_title {
  margin-top: 20rem; }
@media screen and (max-width: 799px) {
  .page .page_title {
    margin-top: 16rem; } }

.page_title {
  font-size: 4.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10rem; }
  .page_title::before {
    content: "";
    display: block;
    height: 1rem;
    width: auto;
    background: url("../img/page_title_dot.svg") no-repeat center/contain;
    margin-bottom: 1rem; }
  @media screen and (max-width: 799px) {
    .page_title {
      font-size: 2.8rem;
      margin-bottom: 5rem; }
      .page_title::before {
        height: .6rem;
        margin-bottom: .6rem; } }

.films {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rem; }
  .films:last-child {
    margin-bottom: 0; }
  .films .poster {
    width: 40%;
    position: relative; }
    .films .poster img {
      position: sticky;
      top: 5rem; }
  .films .flex_wrap {
    width: 56%;
    padding-top: 5rem; }
  .films .movie_title {
    font-size: 8rem;
    margin-bottom: 1rem; }
    .films .movie_title::before {
      content: "";
      display: block;
      height: 1rem;
      width: 10rem;
      background: #A8331E;
      margin-bottom: 2rem; }
  .films .movie_category {
    display: block;
    font-size: 3.2rem;
    font-weight: bold;
    margin-bottom: 6rem; }
  .films .poster_sp {
    display: none; }
  .films .movie_thumb {
    display: block;
    width: 56%;
    min-width: 40rem;
    margin-bottom: 3rem; }
  .films .movie_caption {
    margin-bottom: 6rem; }
  .films .movie_credit {
    margin-bottom: 6rem; }
    .films .movie_credit li {
      display: flex; }
      .films .movie_credit li.margin {
        margin-bottom: 2.4rem; }
      .films .movie_credit li:last-child {
        margin-bottom: 0; }
      .films .movie_credit li span {
        line-height: 1.5; }
    .films .movie_credit .credit_item {
      font-weight: bold; }
      .films .movie_credit .credit_item::after {
        content: "/";
        margin: 0 .8rem; }
  .films .movie_photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem 1%;
    margin-bottom: 6rem; }
    .films .movie_photos.margin {
      margin-bottom: 0; }
    .films .movie_photos li {
      width: 24%; }
  .films .awards h4 {
    font-size: 4.2rem;
    margin-bottom: 1rem; }
  .films .awards .awards_logos {
    padding: 4rem 6%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: calc((100% - 12% * 7) / 6);
    background: #827F7F; }
    .films .awards .awards_logos li {
      width: 12%; }
  @media screen and (max-width: 799px) {
    .films {
      flex-direction: column;
      margin-bottom: 10rem; }
      .films .poster {
        display: none; }
      .films .flex_wrap {
        width: 100%;
        padding-top: 0; }
      .films .movie_title {
        font-size: 4.7rem;
        margin-bottom: 1rem; }
        .films .movie_title::before {
          height: .6rem;
          width: 5.6rem;
          margin-bottom: 1rem; }
      .films .movie_category {
        font-size: 1.6rem;
        margin-bottom: 4rem; }
      .films .poster_sp {
        display: block;
        width: 90%;
        margin: 0 auto 6rem; }
      .films .movie_thumb {
        width: 100%;
        min-width: inherit;
        margin-bottom: 2rem; }
      .films .movie_caption {
        margin-bottom: 6rem; }
      .films .movie_credit {
        margin-bottom: 6rem; }
        .films .movie_credit li {
          flex-direction: column;
          margin-bottom: 1rem; }
          .films .movie_credit li.margin {
            margin-bottom: 2.4rem; }
        .films .movie_credit .credit_item::after {
          margin: 0; }
        .films .movie_credit .credit_name {
          padding-left: 1rem; }
      .films .movie_photos {
        gap: 1.4rem;
        margin-bottom: 6rem; }
        .films .movie_photos li {
          width: calc(50% - .7rem); }
      .films .awards h4 {
        font-size: 2rem;
        text-align: center; }
      .films .awards .awards_logos {
        padding: 2rem 3.867%; } }

.f_panel {
  display: flex;
  gap: 1px;
  padding: 1px;
  background: #fff; }
  .f_panel .panel_link {
    display: block;
    width: 50%;
    position: relative; }
    .f_panel .panel_link:first-child {
      width: calc(50% - 1px); }
    .f_panel .panel_link .panel_txt {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 4.2rem;
      font-weight: bold; }
    .f_panel .panel_link::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #2F2929;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .7;
      transition: .2s; }
    .f_panel .panel_link:hover::before {
      opacity: .85; }
  @media screen and (max-width: 799px) {
    .f_panel {
      flex-direction: column; }
      .f_panel .panel_link {
        width: 100%; }
        .f_panel .panel_link:first-child {
          width: 100%; }
        .f_panel .panel_link .panel_txt {
          font-size: 2rem; } }

.footer_contents {
  background: #241C1C;
  padding: 10.6rem 0;
  position: relative; }
  .footer_contents .f_links {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto; }
    .footer_contents .f_links .f_logo {
      display: block;
      width: 10rem;
      height: 10rem;
      position: absolute;
      top: 50%;
      left: -8rem;
      transform: translate(-100%, -50%); }
    .footer_contents .f_links .sns_link {
      position: absolute;
      top: 50%;
      right: -6rem;
      transform: translate(100%, -50%);
      display: flex;
      gap: 2rem; }
      .footer_contents .f_links .sns_link li {
        width: 4.2rem;
        height: 4.2rem; }
  .footer_contents .copy {
    font-size: 1.6rem;
    color: #827F7F;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translate(-50%, 0); }
  @media screen and (max-width: 799px) {
    .footer_contents {
      padding: 6rem 0 12rem; }
      .footer_contents .f_links {
        position: inherit;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem; }
        .footer_contents .f_links .f_logo {
          width: 5rem;
          height: 5rem;
          position: inherit;
          top: inherit;
          left: inherit;
          transform: none; }
        .footer_contents .f_links .sns_link {
          position: inherit;
          top: inherit;
          right: inherit;
          transform: none;
          display: flex;
          gap: 2rem; }
          .footer_contents .f_links .sns_link li {
            width: 4.2rem;
            height: 4.2rem; }
      .footer_contents .copy {
        font-size: 1.6rem;
        color: #827F7F;
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translate(-50%, 0); } }

.bio_title {
  margin-bottom: 10rem; }
  @media screen and (max-width: 799px) {
    .bio_title {
      margin-bottom: 4rem; } }

.bio_contents {
  position: relative; }
  .bio_contents .bio_img {
    width: 55vw;
    position: absolute;
    top: -4%;
    left: 0;
    z-index: -1; }
  .bio_contents .flex_wrap {
    width: 42.7%;
    margin-left: 50%; }
  .bio_contents h3 {
    font-size: 7rem;
    margin-bottom: 3rem;
    line-height: 1.25; }
  .bio_contents p {
    margin-bottom: 2rem; }
    .bio_contents p a {
      text-decoration: underline; }
    .bio_contents p.margin {
      margin-bottom: 4rem; }
  @media screen and (max-width: 799px) {
    .bio_contents .bio_img {
      width: 96.41%;
      position: inherit;
      top: inherit;
      left: inherit;
      z-index: 1;
      margin-bottom: 3rem; }
    .bio_contents .flex_wrap {
      width: 92.8%;
      margin: 0 auto;
      text-align: center; }
    .bio_contents h3 {
      font-size: 3.8rem;
      margin-bottom: 2rem;
      line-height: 1.25; }
    .bio_contents .rectangle_btn {
      margin: 0 auto; } }

.contact_contents {
  max-width: 60rem; }
  .contact_contents .form_item {
    display: flex;
    flex-direction: column;
    margin-bottom: 6rem; }
    .contact_contents .form_item.margin {
      margin-bottom: 10rem; }
    .contact_contents .form_item input {
      width: 100%;
      background: #fff;
      padding: .8rem 1rem;
      line-height: 1.25; }
  .contact_contents label {
    margin-bottom: 1rem;
    line-height: 1.25; }
  .contact_contents textarea {
    width: 100%;
    resize: vertical;
    background: #fff;
    padding: .8rem 1rem;
    line-height: 1.25;
    min-height: calc(2rem * 1.25 * 4 + 1.6rem); }
  .contact_contents .submit_btn {
    color: #fff;
    margin: 0 auto; }