@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap");
/**
 * - Values.
 */
:root {
  --color-white: #fff;
  --color-white-a9: #fff9;
  --color-black: #232323;
  --color-black-a3: #23232333;
  --color-green: #86c140;
  --color-brown: #665752;
  --color-gray: #aaa;
  --font-general: "Zen Maru Gothic", sans-serif;
  --size-paragraph: 1rem;
}

/**
 * - Mixins.
 */
/**
 * - Tags.
 */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

body {
  color: var(--color-black);
  font-family: var(--font-general);
  line-height: 1.4;
}

/**
 * - Commons.
 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}
@media (min-width: 840px) {
  .container {
    padding: 16px 0;
  }
}

.bg__wood {
  background: url(../images/bg_wood.jpg) repeat center;
}

.button {
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  padding: 0.75em 1.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25em;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.button:hover {
  border-radius: 0;
}
.button::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  display: inline-block;
}

.section {
  padding: 64px 0 120px;
  overflow: hidden;
}
.section__title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-brown);
  font-size: 2.4rem;
  font-weight: bold;
  margin: 0 auto;
}
.section__subtitle {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-brown);
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0 auto;
}
.section__description {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-brown);
  text-align: center;
  margin: 0 auto;
}

* + .section__description {
  margin-top: 16px;
}

.display__none {
  display: none;
}

/**
 * -- Headers.
 */
.header {
  background: var(--color-green);
  padding: 16px 0;
}
@media (min-width: 840px) {
  .header {
    padding: 0;
  }
}
.header__title__link {
  width: 124px;
  color: var(--color-brown);
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 840px) {
  .header__title__link {
    width: 230px;
  }
}
.header__title__logo {
  width: 100%;
  aspect-ratio: 362/77;
}
@media (min-width: 840px) {
  .header__mobile_sns {
    display: none;
  }
}
.header__right_side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
@media (min-width: 840px) {
  .header__right_side {
    display: contents;
  }
}

.header .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header .nav__items {
  width: 100%;
  height: 100%;
  background: var(--color-green);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 48px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  translate: 120%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
}
@media (min-width: 840px) {
  .header .nav__items {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 32px;
    translate: 0;
    position: static;
    opacity: 1;
  }
}
@media (min-width: 840px) {
  .header .nav__item {
    position: relative;
  }
}
@media (min-width: 840px) {
  .header .nav__item:not(:last-of-type)::after {
    content: "";
    width: 2px;
    height: calc(100% + 1.5em);
    background: var(--color-white);
    display: block;
    position: absolute;
    top: 50%;
    right: -16px;
    translate: 0 -50%;
  }
}

/**
 * -- Footers.
 */
.footer {
  background: var(--color-green);
  padding: 16px 0 0;
}
@media (min-width: 840px) {
  .footer {
    padding: 0;
  }
}
.footer__title {
  font-size: 2.4rem;
}
.footer__title__link {
  color: var(--color-brown);
  text-decoration: none;
  position: relative;
}
.footer__title__link::before {
  content: "";
  width: 0;
  height: 2px;
  background: var(--color-brown);
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.footer__title__link:hover::before {
  width: 100%;
}
.footer .copyright {
  color: var(--color-white);
  background: var(--color-brown);
  text-align: center;
  margin-top: 24px;
  padding: 8px 0 16px;
  display: block;
}
@media (min-width: 840px) {
  .footer .copyright {
    margin-top: 0;
  }
}

.footer .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
@media (min-width: 840px) {
  .footer .container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "logo nav" "sns nav";
  }
}
.footer .footer__title {
  grid-area: logo;
}
.footer .footer__nav {
  grid-area: nav;
}
.footer .footer__sns {
  grid-area: sns;
}
.footer .nav__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
@media (min-width: 840px) {
  .footer .nav__items {
    display: grid;
    grid-template-columns: 1.5fr repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
  }
  .footer .nav__items .nav__item:nth-child(1) {
    grid-row: 1/2;
    grid-column: 1/2;
  }
  .footer .nav__items .nav__item:nth-child(2) {
    grid-row: 2/3;
    grid-column: 1/2;
  }
  .footer .nav__items .nav__item:nth-child(3) {
    grid-row: 3/4;
    grid-column: 1/2;
  }
  .footer .nav__items .nav__item:nth-child(4) {
    grid-row: 1/2;
    grid-column: 2/3;
  }
  .footer .nav__items .nav__item:nth-child(5) {
    grid-row: 2/3;
    grid-column: 2/3;
  }
  .footer .nav__items .nav__item:nth-child(6) {
    grid-row: 1/2;
    grid-column: 3/4;
  }
  .footer .nav__items .nav__item:nth-child(7) {
    grid-row: 2/3;
    grid-column: 3/4;
  }
}
.footer .nav__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.footer .nav__link::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  display: inline-block;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}

/**
 * -- Navs.
 */
.nav__flag {
  display: none;
}
.nav__flag:checked ~ .nav__button {
  position: sticky;
  z-index: 110;
}
.nav__flag:checked ~ .nav__button::before {
  translate: 0 8px;
  rotate: 45deg;
}
.nav__flag:checked ~ .nav__button::after {
  translate: 0 -14px;
  rotate: -45deg;
}
.nav__flag:checked ~ .nav__button > .nav__bar {
  opacity: 0;
}
.nav__flag:checked ~ .nav__items {
  opacity: 1;
  translate: 0;
}
.nav__button {
  width: 44px;
  aspect-ratio: 1/1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
@media (min-width: 840px) {
  .nav__button {
    display: none;
  }
}
.nav__button::before, .nav__button::after {
  content: "";
  width: 100%;
  height: 3px;
  background: var(--color-white);
  display: block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.nav__bar {
  width: 100%;
  height: 3px;
  background: var(--color-white);
  display: block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.nav__items {
  list-style: none;
}
.nav__link {
  color: var(--color-white);
  font-weight: bold;
  text-decoration: none;
  position: relative;
}
.nav__link::before {
  content: "";
  width: 0;
  height: 2px;
  background: var(--color-white);
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.nav__link:hover::before {
  width: 100%;
}
.nav__link__button {
  color: var(--color-green);
  background: var(--color-white);
}
.nav__link__button::after {
  display: none;
}

/**
 * -- SNS.
 */
.sns__items {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}
.sns__link {
  width: 34px;
  aspect-ratio: 1/1;
  color: var(--color-green);
  text-decoration: none;
  background: var(--color-white);
  border-radius: 50%;
  display: grid;
  place-content: center;
  place-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media (min-width: 840px) {
  .sns__link {
    width: 28px;
  }
}
.sns__link:hover {
  scale: 1.2;
  rotate: 360deg;
}

/**
 * - Top page.
 */
/**
 * -- Main.
 */
/**
 * --- Main Visual.
 */
.main_visual {
  width: 100%;
  aspect-ratio: 16/9;
  background: url("../images/mv_top.jpg") no-repeat center center;
  background-size: cover;
}
@media (min-width: 840px) {
  .main_visual {
    aspect-ratio: 16/4;
  }
}
.main_visual__lead {
  color: var(--color-brown);
  font-size: 2.4rem;
  line-height: 1.05;
  text-shadow: 1px 1px var(--color-white-a9), -1px 1px var(--color-white-a9), 1px -1px var(--color-white-a9), -1px -1px var(--color-white-a9);
  position: absolute;
  top: 50%;
  left: 10%;
  translate: 0 -50%;
}
@media (min-width: 840px) {
  .main_visual__lead {
    font-size: 3.2rem;
  }
}
.main_visual__lead__sub {
  font-size: 0.4em;
}
.main_visual .container {
  height: 100%;
}

/**
 * --- Live stream.
 */
.live_stream {
  background: url(../images/bg_wood.jpg) no-repeat center;
  background-size: cover;
}
.live_stream__title {
  text-align: center;
}
.live_stream__subtitle {
  margin-top: 48px;
}
.live_stream__youtube {
  width: 50%;
  height: auto;
  aspect-ratio: 16/9;
  margin: 32px auto 0;
  display: block;
}
.live_stream__youtube__bg {
  background: url(../images/pic_plate.webp) no-repeat center center;
  background-size: contain;
  aspect-ratio: 12/6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.live_stream__next_link {
  font-size: 1.2rem;
}
.live_stream__next_link__button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-white);
  font-size: 4.8rem;
  background: var(--color-green);
  border-radius: 16px;
  margin: 0 auto 16px;
  padding: 0.75em 0.75em 0.65em;
}
.live_stream__next_link__button::after {
  display: none;
}
.live_stream__archive {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 32px;
  margin-left: auto;
}
.live_stream__archive__link {
  color: var(--color-white);
  background: var(--color-brown);
}
.live_stream__other {
  margin-top: 16px;
}
.live_stream__other__button {
  width: 100%;
  color: var(--color-white);
  font-size: 1.8rem;
  background: var(--color-green);
}

/**
 * ---- Products.
 */
.product__items {
  list-style: none;
  margin-top: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px 4%;
}
@media (min-width: 840px) {
  .product__items {
    gap: 16px 2%;
  }
}
.product__item {
  width: 48%;
}
@media (min-width: 840px) {
  .product__item {
    width: 23%;
  }
}
.product__image {
  width: 100%;
}
.product__image__bin {
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.product__link {
  margin-top: 16px;
}
.product__link__button {
  width: 100%;
  color: var(--color-white);
  background: var(--color-brown);
}

/**
 * --- Archive.
 */
.archive {
  background: url(../images/bg_archive.jpg) no-repeat center;
  background-size: cover;
}
.archive__items {
  list-style: none;
  margin-top: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 24px;
}
@media (min-width: 840px) {
  .archive__items {
    gap: 48px 4%;
  }
}
.archive__item {
  width: 100%;
}
@media (min-width: 840px) {
  .archive__item {
    width: 48%;
  }
}
.archive__item__not {
  width: 100%;
  font-size: 1.2rem;
  text-align: center;
}
.archive__link {
  display: block;
  overflow: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.archive__link:hover {
  border-radius: 8px;
  scale: 1.05;
}
.archive__youtube {
  width: 100%;
  aspect-ratio: 16/9;
  vertical-align: middle;
}
.archive__thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  vertical-align: middle;
}

/**
 * --- Mika channel.
 */
.mika_channel {
  background: url(../images/bg_pattern.jpg);
}
.mika_channel__title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mika_channel__title::before {
  content: url(../images/icon_mika.png);
  width: 62px;
  aspect-ratio: 62/77;
  display: block;
}
.mika_channel__title::after {
  content: url(../images/icon_youtube_and_video.svg);
  width: 57px;
  aspect-ratio: 57/77;
  display: block;
}
.mika_channel__items {
  list-style: none;
  margin-top: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 24px;
}
@media (min-width: 840px) {
  .mika_channel__items {
    gap: 48px 1.3333333333%;
  }
}
.mika_channel__item {
  width: 100%;
}
@media (min-width: 840px) {
  .mika_channel__item {
    width: 24%;
  }
}
.mika_channel__link {
  margin-top: 32px;
}
.mika_channel__link__button {
  color: var(--color-white);
  font-size: 1.8rem;
  background: var(--color-green);
}
.mika_channel__movie {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.mika_channel__movie__link {
  color: var(--color-black);
  font-size: 1.05rem;
  text-decoration: none;
  display: block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mika_channel__movie__link:hover {
  scale: 1.05;
}
.mika_channel__movie__thumnail {
  width: 100%;
  aspect-ratio: 16/9;
  vertical-align: middle;
}

/**
 * --- Contact link.
 */
.contact_link__items {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}
@media (min-width: 840px) {
  .contact_link__items {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.contact_link__item {
  width: 100%;
}
@media (min-width: 840px) {
  .contact_link__item {
    width: calc(50% - 1px);
  }
}
.contact_link__banner {
  width: 100%;
  aspect-ratio: 16/6;
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  display: grid;
  place-content: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.contact_link__banner:hover {
  font-size: 2rem;
  background-size: 120% auto;
}
@media (min-width: 840px) {
  .contact_link__banner {
    font-size: 2rem;
  }
  .contact_link__banner:hover {
    font-size: 2.2rem;
  }
}
.contact_link__banner__kitchen {
  background: url(../images/banner_kitchen.jpg) no-repeat center;
  background-size: 100% auto;
}
.contact_link__banner__live {
  background: url(../images/banner_live.jpg) no-repeat center;
  background-size: 100% auto;
}

/**
 * - Lower page commons.
 */
/**
 * -- Main
 */
/**
 * --- Lower page visual.
 */
.lower_visual {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}
@media (min-width: 840px) {
  .lower_visual {
    aspect-ratio: 16/4;
  }
}
.lower_visual::after {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--color-black-a3);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.lower_visual__about {
  background: url("../images/mv_top.jpg") no-repeat center center;
  background-size: cover;
}
.lower_visual__studio_rental {
  background: url("../images/mv_kitchen.jpg") no-repeat center center;
  background-size: cover;
}
.lower_visual__studio_rental::after {
  display: none;
}
.lower_visual__streaming_shooting {
  background: url("../images/mv_live.jpg") no-repeat center center;
  background-size: cover;
}
.lower_visual__common {
  background: url("../images/mv_under.jpg") no-repeat center center;
  background-size: cover;
}
.lower_visual__lead {
  color: var(--color-white);
  font-size: 2.4rem;
  line-height: 1.2;
}
@media (min-width: 840px) {
  .lower_visual__lead {
    font-size: 3.2rem;
  }
}
.lower_visual__lead__sub {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.35em;
  margin: 0 auto;
  display: block;
  position: relative;
}
.lower_visual__lead__sub::before {
  content: "";
  width: 5em;
  height: 2px;
  background: var(--color-white);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  translate: calc(-100% - 0.5em) -50%;
}
.lower_visual__lead__sub::after {
  content: "";
  width: 5em;
  height: 2px;
  background: var(--color-white);
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  translate: calc(100% + 0.5em) -50%;
}

.lower_visual .container {
  height: 100%;
  display: grid;
  place-content: center;
  position: relative;
  z-index: 10;
}

.lower_visual__studio_rental .lower_visual__lead {
  display: none;
}

/**
 * --- Docments.
 */
.docments__wrap {
  background: var(--color-white);
  border-radius: 8px;
  padding: 64px 32px;
}
.docments__paragraph {
  line-height: 1.6;
}
.docments__ol {
  padding-left: 1.75em;
}
.docments__li:not(:first-of-type) {
  margin-top: 8px;
}
.docments__dl {
  max-width: 500px;
  border: 1px solid var(--color-black);
  margin-top: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.docments__dt, .docments__dd {
  padding: 0.75em 1.25em;
}
.docments__dt {
  width: 50%;
}
.docments__dt:not(:last-of-type) {
  border-bottom: 1px solid var(--color-black);
}
.docments__dd {
  width: calc(50% - 1px);
  border-left: 1px solid var(--color-black);
}
.docments__dd:not(:last-of-type) {
  border-bottom: 1px solid var(--color-black);
}

*:not(.display__none) + .docments__paragraph {
  margin-top: 16px;
}

* + .docments__subtitle {
  margin-top: 56px;
}

* + .docments__ol {
  margin-top: 32px;
}

.docments__li > .docments__ol {
  margin-top: 8px;
}

/**
 * - About page.
 */
/**
 * -- Main. 
 */
/**
 * --- About mika. 
 */
.about_mika {
  background: url(../images/bg_wood.jpg) center;
  background-size: cover;
}
@media (min-width: 840px) {
  .about_mika {
    padding: 184px 0 120px;
  }
}
.about_mika__main__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
@media (min-width: 840px) {
  .about_mika__main__wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.about_mika__main__text {
  color: var(--color-white);
  background: var(--color-brown);
  border-radius: 8px;
  margin-top: 64px;
  padding: 32px 1.5em 64px;
}
@media (min-width: 840px) {
  .about_mika__main__text {
    width: 60%;
    padding: 32px 1.5em 32px 64px;
  }
}
.about_mika__name {
  font-size: 1.2rem;
  border-bottom: 1px var(--color-white) solid;
  padding: 0 1em 16px;
}
.about_mika__profile {
  line-height: 1.6;
  margin-top: 16px;
  padding: 0 1em;
}
.about_mika__photo {
  width: 60%;
  margin: 0 auto;
}
@media (min-width: 840px) {
  .about_mika__photo {
    width: 32%;
    translate: 24% -16%;
  }
}
.about_mika__photo__bin {
  width: 100%;
  aspect-ratio: 3/4;
  -o-object-fit: cover;
     object-fit: cover;
}
.about_mika__sammary {
  width: 100%;
}
@media (min-width: 840px) {
  .about_mika__sammary {
    width: calc(50% - 16px);
  }
}
.about_mika__sammary__wrap {
  background: var(--color-white);
  border-radius: 8px;
  margin-top: 64px;
  padding: 32px 1.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 32px;
}
@media (min-width: 840px) {
  .about_mika__sammary__wrap {
    width: 80%;
    margin: 64px auto 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.about_mika__items {
  width: 100%;
  list-style: none;
}
@media (min-width: 840px) {
  .about_mika__items {
    width: calc(50% - 16px);
  }
}
.about_mika__item {
  margin-top: 16px;
}
.about_mika__works__items {
  list-style: none;
  padding-left: calc(12px + 0.25em);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  position: relative;
}
.about_mika__works__items::before {
  content: "";
  width: 10px;
  height: 14px;
  background: var(--color-black);
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
          clip-path: polygon(0 0, 0% 100%, 100% 50%);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.about_mika__works__item {
  position: relative;
}
.about_mika__works__item:not(:last-of-type)::after {
  content: "";
  width: 1px;
  height: 100%;
  background: var(--color-black);
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 8px -50%;
}
.about_mika__works__title {
  padding-left: calc(12px + 0.25em);
  position: relative;
}
.about_mika__works__title::before {
  content: "";
  width: 10px;
  height: 14px;
  background: var(--color-black);
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
          clip-path: polygon(0 0, 0% 100%, 100% 50%);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.about_mika__works__title::after {
  content: "";
  width: 7px;
  height: 10px;
  background: var(--color-white);
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
          clip-path: polygon(0 0, 0% 100%, 100% 50%);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 1px -50%;
}
.about_mika__works__detail {
  padding-left: calc(12px + 0.25em);
  position: relative;
}
.about_mika__works__detail::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--color-black);
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.about_mika__works__remark {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.8rem;
  margin-left: auto;
  display: block;
}
.about_mika__link {
  margin-top: 120px;
}
.about_mika__link__button {
  color: var(--color-white);
  font-size: 1.8rem;
  background: var(--color-green);
}

/**
 * --- About company. 
 */
.about_company {
  background: url(../images/bg_pattern.jpg) center;
}
.about_company__title {
  font-size: 1.4rem;
}
.about_company__items {
  list-style: none;
  margin-top: 64px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
@media (min-width: 840px) {
  .about_company__items {
    width: 50%;
    margin: 64px auto 0;
  }
}
.about_company__item {
  padding: 0 0 8px;
}
.about_company__item:not(:last-of-type) {
  border-bottom: 1px solid var(--color-black);
}
.about_company__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.about_company__content__title::after {
  content: ":";
  margin: 0 0.25em;
}
.about_company__content__link {
  color: var(--color-black);
  text-decoration: none;
}

/**
 * - Studio rental page.
 */
/**
 * -- Main.
 */
/**
 * --- Studio view.
 */
.studio_view__image {
  width: 100%;
  aspect-ratio: 4/3;
  background-color: var(--color-black-a3);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.studio_view__items {
  list-style: none;
  margin-top: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px;
}
.studio_view__item {
  width: calc((100% - 48px) / 4);
  overflow: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
@media (min-width: 840px) {
  .studio_view__item {
    width: calc((100% - 96px) / 7);
  }
}
.studio_view__item:hover {
  border-radius: 8px;
}
.studio_view__thumbnail {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}

/**
 * --- Studio rental.
 */
.studio_rental__facility {
  background: var(--color-white);
  border-radius: 8px;
  padding: 32px 16px;
}
@media (min-width: 840px) {
  .studio_rental__facility {
    width: calc(50% - 24px);
  }
}
.studio_rental__facility__subtitle {
  text-align: center;
  border-bottom: 1px solid var(--color-brown);
  padding-bottom: 8px;
}
.studio_rental__facility__wrap {
  margin-top: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 48px;
}
@media (min-width: 840px) {
  .studio_rental__facility__wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.studio_rental__facility__items {
  padding-left: 1.2em;
}
.studio_rental__facility__title::before {
  content: "<";
}
.studio_rental__facility__title::after {
  content: ">";
}
.studio_rental__description {
  width: 80%;
  margin: 32px auto 0;
}
.studio_rental__reserve_data {
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 8px;
  margin-top: 64px;
  padding: 32px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 840px) {
  .studio_rental__reserve_data {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.studio_rental__reserve_data__title {
  border-bottom: 1px dotted var(--color-white);
  padding: 1.25em 0.75em;
}
@media (min-width: 840px) {
  .studio_rental__reserve_data__title {
    width: 50%;
    border-bottom: 2px solid var(--color-white);
    display: grid;
    place-content: center;
  }
  .studio_rental__reserve_data__title:last-of-type {
    border-bottom: none;
  }
}
.studio_rental__reserve_data__detail {
  border-bottom: 2px solid var(--color-white);
  padding: 1.25em 0.75em;
}
@media (min-width: 840px) {
  .studio_rental__reserve_data__detail {
    width: calc(50% - 2px);
    border-left: 2px solid var(--color-white);
    display: grid;
    place-content: center;
  }
}
.studio_rental__reserve_data__detail:last-of-type {
  border-bottom: none;
}

* + .studio_rental__facility__contents {
  margin-top: 16px;
}

/**
 * --- Reservation status.
 */
/**
 * --- Calender.
 */
.calender {
  width: 100%;
  border: 2px solid var(--color-black);
  border-collapse: collapse;
  display: none;
}
.calender__wrap {
  margin-top: 32px;
}
.calender__show {
  display: table;
}
.calender__caption {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 16px;
}
.calender__head {
  width: 100%;
  background: var(--color-white);
  border-bottom: 2px solid var(--color-black);
}
.calender__body {
  width: 100%;
  background: var(--color-white);
}
.calender__row {
  width: 100%;
}
.calender__row:not(:last-of-type) {
  border-bottom: 1px solid var(--color-black);
}
.calender__cell {
  width: calc((100% - 6px) / 7);
  font-size: 1rem;
  vertical-align: top;
  padding: 0.75em 0.5em;
}
.calender__cell:not(:last-of-type) {
  border-right: 1px solid var(--color-black);
}
.calender__cell__close {
  background: var(--color-gray);
}
.calender__headcell {
  vertical-align: middle;
}
.calender__headcell__sun {
  color: #f66;
}
.calender__headcell__sat {
  color: #66f;
}
.calender__datacell {
  height: 96px;
}
.calender__reserve__button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 8px;
  margin-top: 8px;
  padding: 0.25em;
}
.calender__reserve__button::after {
  display: none;
}
.calender__reserve__button__close {
  background: var(--color-gray);
  pointer-events: none;
}
.calender__ctrl_button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: var(--color-white);
  background: var(--color-brown);
  border: none;
}
.calender__ctrl_button__wrap {
  margin-top: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.calender__ctrl_button__prev::before {
  content: "\f104";
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  display: inline-block;
}
.calender__ctrl_button__prev::after {
  display: none;
}
.calender__ctrl_button__off {
  background: var(--color-gray);
  pointer-events: none;
}

/**
 * --- Studio access.
 */
.studio_access {
  margin-top: 120px;
}
@media (min-width: 840px) {
  .studio_access__text__wrap {
    width: calc(50% - 24px);
  }
}
.studio_access__name {
  color: var(--color-brown);
}
.studio_access__address {
  font-style: normal;
  margin-top: 32px;
  padding: 0 1em 16px;
}
.studio_access__items {
  list-style: none;
}
.studio_access__item {
  border-top: 1px solid var(--color-brown);
  padding: 16px 1em;
}
.studio_access__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.studio_access__content__title {
  margin-right: 1.25em;
}
.studio_access__content__link {
  color: var(--color-brown);
  text-decoration: none;
}
.studio_access__map {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  margin-top: 48px;
}
@media (min-width: 840px) {
  .studio_access__map {
    width: calc(50% - 24px);
    margin-top: 0;
  }
}

@media (min-width: 840px) {
  .studio_access > .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 48px;
  }
}

/**
 * - Streaming shooting page.
 */
/**
 * -- Main. 
 */
/**
 * --- Streaming shooting. 
 */
.streaming_shooting__title {
  display: none;
}
.streaming_shooting__facility {
  background: var(--color-white);
  border-radius: 8px;
  margin-top: 48px;
  padding: 32px 16px;
}
@media (min-width: 840px) {
  .streaming_shooting__facility {
    width: calc(50% - 24px);
    margin: 48px auto 0;
  }
}
.streaming_shooting__facility__subtitle {
  text-align: center;
  border-bottom: 1px solid var(--color-brown);
  padding-bottom: 8px;
}
.streaming_shooting__facility__items {
  padding-left: 1.2em;
}
.streaming_shooting__facility__title::before {
  content: "<";
}
.streaming_shooting__facility__title::after {
  content: ">";
}
.streaming_shooting__facility__remarks {
  font-size: 0.9rem;
  margin-top: 32px;
}
.streaming_shooting__facility__link {
  margin-top: 64px;
}
.streaming_shooting__facility__link__button {
  width: 100%;
  color: var(--color-white);
  font-size: 1.8rem;
  background: var(--color-green);
}

* + .streaming_shooting__facility__contents {
  margin-top: 16px;
}

/**
 * - Inquiry page.
 */
/**
 * -- Main.
 */
/**
 * --- Inquiry.
 */
.inquiry__title {
  display: none;
}
.inquiry__link {
  margin-top: 32px;
}
.inquiry__link__button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-white);
  background: var(--color-brown);
  margin: 0 auto;
  padding: 0.75em 5em;
}
.inquiry__terms__wrap {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 8px;
  margin: 32px auto 0;
  padding: 32px calc(16px + 4rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
.inquiry__terms__check {
  width: 24px;
  aspect-ratio: 1/1;
  background: var(--color-white);
}
.inquiry__form {
  margin-top: 32px;
}
.inquiry__form__wrap {
  color: var(--color-brown);
  background: var(--color-white);
  border-radius: 8px;
  margin-top: 56px;
  padding: 32px 2.5em 64px;
}
.inquiry__form__title {
  font-size: 1.4rem;
}
.inquiry__form__description {
  font-size: 0.95rem;
  margin-top: 16px;
}
.inquiry__form__link {
  color: var(--color-green);
  text-decoration: none;
}
.inquiry__form__link:hover {
  text-decoration: underline;
}
.inquiry__form__remarks {
  font-size: 0.9rem;
  margin-top: 8px;
}
.inquiry__form__items {
  list-style: none;
}
.inquiry__form__item:not(:first-of-type) {
  margin-top: 24px;
}
.inquiry__form__subtitle {
  font-size: 1rem;
}
.inquiry__form__required::after {
  content: "*";
}
.inquiry__form__subtext {
  font-size: 0.8em;
  margin-left: 3em;
}
.inquiry__form__content {
  margin-top: 8px;
}
.inquiry__form__input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  border: 2px solid var(--color-brown);
  padding: 0.25em 0.75em;
}
.inquiry__form__select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  border: 2px solid var(--color-brown);
  border-right: 1.75em solid var(--color-brown);
  padding: 0.25em 0.75em;
}
.inquiry__form__select[name=reserve_start_time], .inquiry__form__select[name=reserve_end_time] {
  width: 12em;
}
.inquiry__form__select__wrap {
  display: inline-block;
  position: relative;
}
.inquiry__form__select__wrap::before {
  content: "\f078";
  color: var(--color-white);
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  translate: -0.25em -50%;
}
.inquiry__form__select__full {
  width: 100%;
}
.inquiry__form__select__tilda::after {
  content: "~";
  position: absolute;
  top: 50%;
  right: 0;
  translate: 18px -50%;
}
.inquiry__form__textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  border: 2px solid var(--color-brown);
  padding: 0.25em 0.75em;
  resize: none;
}
.inquiry__form__button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.2rem;
  color: var(--color-white);
  background: var(--color-green);
  border: none;
  margin: 64px auto 0;
  padding: 0.75em 5em;
  display: block;
}

.inquiry__form__select__wrap + .inquiry__form__select__wrap {
  margin-left: 24px;
}/*# sourceMappingURL=style.css.map */