/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
:root {
  --viewport-width: min(100vw, 2000px);
  --b: calc(var(--viewport-width) / 160);
}

#front #hero {
  overflow: hidden;
}
#front #hero .hero__wrapper button.hero__scroll {
  position: absolute;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  right: 5%;
  bottom: 5%;
  gap: max(1rem, 10px);
}
@media screen and (max-width: 768px) {
  #front #hero .hero__wrapper button.hero__scroll {
    right: 50%;
    bottom: 90px;
    transform: translateX(50%);
  }
}
@media screen and (max-width: 550px) {
  #front #hero .hero__wrapper button.hero__scroll {
    bottom: 70px;
  }
}
#front #hero .hero__wrapper button.hero__scroll .scroll__text {
  color: #fff;
  font-family: YakuHanJP, "Jost", "Noto Sans JP", sans-serif;
  font-size: max(1vw, 16px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
#front #hero .hero__wrapper button.hero__scroll .scroll__arrow {
  width: 40%;
  height: auto;
  animation: 4s blink infinite ease-in-out;
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
#front #hero .hero__wrapper .hero__bg {
  transform: scale(1.05);
  transform-origin: center;
  filter: blur(15px);
  transition: 1.5s transform ease-out, 1.5s filter ease-out;
}
#front #hero .hero__wrapper .hero__content {
  position: absolute;
  top: unset;
  left: 10%;
  right: 10%;
  bottom: 20vh;
  width: auto;
  transform: translateY(0);
}
@media screen and (max-width: 768px) {
  #front #hero .hero__wrapper .hero__content {
    bottom: 50%;
    transform: translateY(50%);
  }
}
@media screen and (max-width: 550px) {
  #front #hero .hero__wrapper .hero__content {
    left: 5%;
    right: 5%;
  }
}
#front #hero .hero__wrapper .hero__content hgroup.hero__title {
  opacity: 0;
  transition: opacity 1.5s ease-out 0.2s;
}
#front #hero .hero__wrapper .hero__content hgroup.hero__title h2 {
  margin-bottom: max(3rem, 30px);
  color: #fff;
  font-family: "Shippori Mincho", sans-serif;
  font-size: max(4.1875vw, 67px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 550px) {
  #front #hero .hero__wrapper .hero__content hgroup.hero__title h2 {
    font-size: 16.4vw;
  }
}
#front #hero .hero__wrapper .hero__content hgroup.hero__title h2 span {
  text-shadow: 0 0 36px #000;
}
#front #hero .hero__wrapper .hero__content hgroup.hero__title h2 span.hero__title--small {
  font-size: max(2.7865vw, 43px);
  line-height: 1;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 550px) {
  #front #hero .hero__wrapper .hero__content hgroup.hero__title h2 span.hero__title--small {
    font-size: 10.5vw;
  }
}
#front #hero .hero__wrapper .hero__content hgroup.hero__title p {
  color: #fff;
  font-size: max(1vw, 16px);
  font-weight: 400;
  line-height: 2.7;
  letter-spacing: 0.1em;
  text-shadow: 0 0 36px #000;
}
@media screen and (max-width: 550px) {
  #front #hero .hero__wrapper .hero__content hgroup.hero__title p {
    font-size: 3.89vw;
  }
}
#front #hero.loaded .hero__bg {
  transform: scale(1);
  filter: blur(0);
}
#front #hero.loaded .hero__content hgroup.hero__title {
  opacity: 1;
}
#front #works {
  position: relative;
  z-index: 0;
}
#front #works .works__mask {
  position: absolute;
  inset: 0;
  z-index: -1;
}
#front #works .works__wrapper {
  padding-top: max(10rem, 70px);
  padding-bottom: max(10rem, 70px);
}
#front #works .works__wrapper .section-title__sub {
  color: rgba(255, 255, 255, 0.4);
}
#front #works .works__wrapper .section-title__main {
  color: #fff;
}
#front #works .works__wrapper .works__content .works__list {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  row-gap: max(6rem, 60px);
}
@media screen and (max-width: 1000px) {
  #front #works .works__wrapper .works__content .works__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  #front #works .works__wrapper .works__content .works__list {
    row-gap: max(10rem, 30px);
    grid-template-columns: 1fr;
  }
}
#front #works .works__wrapper .works__content .works__list .works__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: max(3rem, 30px);
}
#front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(1) {
  padding-right: max(6rem, 30px);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}
#front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(2) {
  padding: 0 max(6rem, 30px);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}
#front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(2) a figure .imageBox img {
  animation-delay: 0.3s;
}
#front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(3) {
  padding-left: max(6rem, 30px);
}
#front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(3) a figure .imageBox img {
  animation-delay: 0.6s;
}
#front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(4) {
  display: none;
}
@media screen and (max-width: 1000px) {
  #front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(odd) {
    padding: 0;
    padding-right: max(6rem, 30px);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
  }
  #front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(even) {
    padding: 0;
    padding-left: max(6rem, 30px);
    border: none;
  }
  #front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(4) {
    display: grid;
  }
  #front #works .works__wrapper .works__content .works__list .works__item a figure .imageBox img {
    animation-delay: 0s !important;
  }
}
@media screen and (max-width: 768px) {
  #front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(n + 1) {
    padding: 0;
    border-right: none;
  }
  #front #works .works__wrapper .works__content .works__list .works__item:not(:nth-of-type(1)) {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding-top: max(10rem, 30px);
  }
  #front #works .works__wrapper .works__content .works__list .works__item:nth-of-type(4) {
    display: none;
  }
}
#front #works .works__wrapper .works__content .works__list .works__item--more figure .imageBox {
  width: 100%;
  height: auto;
  aspect-ratio: 347/248;
  margin-bottom: max(2.5rem, 20px);
  transition: 2s box-shadow 2.5s;
  overflow: hidden;
}
#front #works .works__wrapper .works__content .works__list .works__item--more figure .imageBox.active {
  box-shadow: 0 0 46px rgba(0, 0, 0, 0.15);
}
#front #works .works__wrapper .works__content .works__list .works__item--more figure .imageBox img {
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease-in-out;
}
#front #works .works__wrapper .works__content .works__list .works__item--more figure figcaption .works__item-meta {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: max(1rem, 10px);
       column-gap: max(1rem, 10px);
  color: #fff;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
#front #works .works__wrapper .works__content .works__list .works__item--more figure figcaption .works__item-meta--num {
  font-family: YakuHanJP, "Jost", "Noto Sans JP", sans-serif;
  font-size: max(1.5rem, 13px);
}
#front #works .works__wrapper .works__content .works__list .works__item--more figure figcaption .works__item-meta--place {
  font-size: max(1.4rem, 12px);
}
#front #works .works__wrapper .works__content .works__list .works__item--more figure figcaption h3.works__item-title {
  color: #fff;
  font-size: max(1.6rem, 14px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-top: max(1rem, 10px);
}
#front #works .works__wrapper .works__content .works__list .works__item--more:hover figure .imageBox img {
  transform: scale(1.05);
}
#front #works .works__wrapper .works__content .works__list .works__item--category {
  display: flex;
  flex-wrap: wrap;
  gap: max(1rem, 10px);
}
#front #works .works__wrapper .works__content .works__list .works__item--category li {
  line-height: 1;
}
#front #works .works__wrapper .works__content .works__list .works__item--category li a {
  display: inline-block;
  color: #fff;
  font-size: max(1.3rem, 11px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  transition: text-shadow 0.4s ease-in-out, transform 0.4s ease-in-out;
}
#front #works .works__wrapper .works__content .works__list .works__item--category li a:hover {
  transform: scale(1.05);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
#front #works .works__wrapper .btn {
  text-align: right;
  margin-top: max(5.5rem, 50px);
}
#front #event {
  background: #fff;
}
#front #event .event__wrapper {
  display: flex;
  -moz-column-gap: max(10rem, 50px);
       column-gap: max(10rem, 50px);
  padding-top: max(13rem, 70px);
  padding-bottom: max(17.5rem, 100px);
}
@media screen and (max-width: 1000px) {
  #front #event .event__wrapper {
    align-items: start;
    flex-direction: column;
  }
}
#front #event .event__wrapper .btn-pc {
  display: block;
}
@media screen and (max-width: 1000px) {
  #front #event .event__wrapper .btn-pc {
    display: none;
  }
}
#front #event .event__wrapper .btn-sp {
  display: none;
}
@media screen and (max-width: 1000px) {
  #front #event .event__wrapper .btn-sp {
    display: block;
    text-align: right;
    margin-top: max(5.5rem, 50px);
  }
}
#front #event .event__wrapper .event__title {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
#front #event .event__wrapper .event__title .section-title {
  display: flex;
  flex-direction: row-reverse;
}
@media screen and (max-width: 1000px) {
  #front #event .event__wrapper .event__title .section-title {
    display: block;
  }
}
#front #event .event__wrapper .event__title .section-title__sub, #front #event .event__wrapper .event__title .section-title__main {
  writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
          text-orientation: mixed;
  white-space: nowrap;
}
@media screen and (max-width: 1000px) {
  #front #event .event__wrapper .event__title .section-title__sub, #front #event .event__wrapper .event__title .section-title__main {
    writing-mode: horizontal-tb;
    -webkit-text-orientation: initial;
            text-orientation: initial;
    white-space: normal;
  }
}
#front #event .event__wrapper .event__content {
  flex: 1;
}
@media screen and (max-width: 1000px) {
  #front #event .event__wrapper .event__content {
    width: 100%;
  }
}
#front #event .event__wrapper .event__content .event__list article.event__item:not(:last-of-type) {
  padding-bottom: max(3rem, 25px);
  margin-bottom: max(3rem, 25px);
  border-bottom: 1px solid rgba(59, 49, 40, 0.15);
}
#front #event .event__wrapper .event__content .event__list article.event__item a {
  display: flex;
  gap: max(6rem, 30px);
}
@media screen and (max-width: 550px) {
  #front #event .event__wrapper .event__content .event__list article.event__item a {
    flex-direction: column;
  }
}
#front #event .event__wrapper .event__content .event__list article.event__item a figure.event__item--image {
  display: flex;
  width: max(25rem, 200px);
  aspect-ratio: 5/3;
  overflow: hidden;
}
@media screen and (max-width: 550px) {
  #front #event .event__wrapper .event__content .event__list article.event__item a figure.event__item--image {
    width: 100%;
  }
}
#front #event .event__wrapper .event__content .event__list article.event__item a figure.event__item--image img {
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease-in-out;
}
#front #event .event__wrapper .event__content .event__list article.event__item a .event__item--detail {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#front #event .event__wrapper .event__content .event__list article.event__item a .event__item--detail ul.event__category {
  display: flex;
  gap: max(1rem, 10px);
}
#front #event .event__wrapper .event__content .event__list article.event__item a .event__item--detail ul.event__category li.event__category {
  padding: max(0.75rem, 7.5px) max(3rem, 20px);
  border: 1px solid #3b3128;
  border-radius: max(1.7rem, 15px);
  font-size: max(1.4rem, 12px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
}
#front #event .event__wrapper .event__content .event__list article.event__item a .event__item--detail ul.event__category li.event__category--primary {
  color: #fff;
  background: #3b3128;
}
#front #event .event__wrapper .event__content .event__list article.event__item a .event__item--detail ul.event__category li.event__category--reserve {
  color: #3b3128;
  background: #fff;
}
#front #event .event__wrapper .event__content .event__list article.event__item a .event__item--detail h3 {
  font-size: max(1.4rem, 12px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-top: max(2.5rem, 20px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
#front #event .event__wrapper .event__content .event__list article.event__item a .event__item--detail time.event__date {
  margin-top: auto;
  color: rgba(59, 49, 40, 0.4);
  font-family: YakuHanJP, "Jost", "Noto Sans JP", sans-serif;
  font-size: max(1.4rem, 12px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
#front #event .event__wrapper .event__content .event__list article.event__item a:hover .event__item--image img {
  transform: scale(1.05);
}
#front #about {
  background: #fff;
}
#front #about .about__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: max(8rem, 25px) max(13rem, 80px);
  padding-bottom: max(16.5rem, 65px);
}
@media screen and (max-width: 1000px) {
  #front #about .about__wrapper--primary {
    flex-direction: column;
  }
  #front #about .about__wrapper--secondary {
    flex-direction: column-reverse;
  }
}
#front #about .about__wrapper .about__image {
  align-self: stretch;
  width: max(67rem, 300px);
  height: auto;
  aspect-ratio: 67/51;
}
@media screen and (max-width: 1000px) {
  #front #about .about__wrapper .about__image {
    width: 100%;
    aspect-ratio: 5/3;
  }
}
#front #about .about__wrapper .about__image img {
  width: 100%;
  height: 100%;
}
#front #about .about__wrapper .about__text {
  flex: 1;
}
#front #about .about__wrapper .about__text .btn {
  margin-top: max(5.5rem, 50px);
  text-align: right;
}
#front #news {
  background: #fff;
}
#front #news .news__wrapper {
  display: flex;
  -moz-column-gap: max(14rem, 70px);
       column-gap: max(14rem, 70px);
  padding-bottom: max(16rem, 70px);
}
@media screen and (max-width: 1000px) {
  #front #news .news__wrapper {
    flex-direction: column;
  }
}
#front #news .news__wrapper .btn-pc {
  display: block;
}
@media screen and (max-width: 1000px) {
  #front #news .news__wrapper .btn-pc {
    display: none;
  }
}
#front #news .news__wrapper .btn-sp {
  display: none;
}
@media screen and (max-width: 1000px) {
  #front #news .news__wrapper .btn-sp {
    display: block;
    text-align: right;
    margin-top: max(5.5rem, 50px);
  }
}
#front #news .news__wrapper .news__title {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  flex-shrink: 0;
}
#front #news .news__wrapper .news__content {
  flex: 1;
}
#front #news .news__wrapper .news__content .news__list article.news__item:not(:last-of-type) {
  padding-bottom: max(4rem, 20px);
  margin-bottom: max(3.5rem, 15px);
  border-bottom: 1px solid rgba(59, 49, 40, 0.15);
}
#front #news .news__wrapper .news__content .news__list article.news__item a dl {
  display: flex;
  align-items: first baseline;
  gap: max(0.5rem, 5px) max(4rem, 30px);
}
@media screen and (max-width: 768px) {
  #front #news .news__wrapper .news__content .news__list article.news__item a dl {
    flex-direction: column;
    align-items: start;
  }
}
#front #news .news__wrapper .news__content .news__list article.news__item a dl dt time {
  min-width: max(9rem, 85px);
  color: rgba(59, 49, 40, 0.4);
  font-family: YakuHanJP, "Jost", "Noto Sans JP", sans-serif;
}
#front #news .news__wrapper .news__content .news__list article.news__item a dl dd {
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
#front #company {
  background: #fff;
}
#front #company .company__wrapper {
  display: flex;
  -moz-column-gap: max(8.4rem, 50px);
       column-gap: max(8.4rem, 50px);
  padding-bottom: max(16.5rem, 70px);
}
@media screen and (max-width: 1000px) {
  #front #company .company__wrapper {
    flex-direction: column;
  }
}
#front #company .company__wrapper .btnBox {
  width: 100%;
}
#front #company .company__wrapper .btnBox--pc {
  display: block;
}
@media screen and (max-width: 1000px) {
  #front #company .company__wrapper .btnBox--pc {
    display: none;
  }
}
#front #company .company__wrapper .btnBox--sp {
  display: none;
}
@media screen and (max-width: 1000px) {
  #front #company .company__wrapper .btnBox--sp {
    display: block;
    margin-top: max(10rem, 30px);
  }
}
#front #company .company__wrapper .btnBox .btn {
  width: 100%;
}
#front #company .company__wrapper .btnBox .btn:not(:first-of-type) {
  margin-top: max(4.5rem, 30px);
  padding-top: max(4.5rem, 30px);
  border-top: 1px solid rgba(59, 49, 40, 0.15);
}
#front #company .company__wrapper .btnBox .btn__link {
  width: 100%;
  justify-content: space-between;
}
#front #company .company__wrapper .company__text {
  flex: 1;
  display: flex;
  align-items: start;
  flex-direction: column;
  justify-content: space-between;
}
#front #company .company__wrapper .company__image {
  width: max(81rem, 300px);
  aspect-ratio: 81/50;
}
@media screen and (max-width: 1000px) {
  #front #company .company__wrapper .company__image {
    width: 100%;
    aspect-ratio: 5/3;
  }
}
#front #blog {
  background: #fff;
}
#front #blog .blog__wrapper {
  padding-bottom: max(17.5rem, 70px);
}
#front #blog .blog__wrapper .blog__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: max(10rem, 30px) max(5rem, 30px);
}
@media screen and (max-width: 1000px) {
  #front #blog .blog__wrapper .blog__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  #front #blog .blog__wrapper .blog__list {
    grid-template-columns: 1fr;
  }
}
#front #blog .blog__wrapper .blog__list .blog__item:nth-of-type(4) {
  display: none;
}
@media screen and (max-width: 1000px) {
  #front #blog .blog__wrapper .blog__list .blog__item:nth-of-type(4) {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  #front #blog .blog__wrapper .blog__list .blog__item:nth-of-type(4) {
    display: none;
  }
}
#front #blog .blog__wrapper .blog__list .blog__item a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#front #blog .blog__wrapper .blog__list .blog__item a figure.blog__item--image {
  flex: 1;
}
#front #blog .blog__wrapper .blog__list .blog__item a figure.blog__item--image .imageBox {
  aspect-ratio: 5/3;
  overflow: hidden;
}
#front #blog .blog__wrapper .blog__list .blog__item a figure.blog__item--image .imageBox img {
  width: 100%;
  height: 100%;
}
#front #blog .blog__wrapper .blog__list .blog__item a figure.blog__item--image figcaption {
  margin-top: max(1rem, 10px);
  margin-bottom: max(2rem, 20px);
}
#front #blog .blog__wrapper .blog__list .blog__item a time {
  margin-top: auto;
  color: rgba(59, 49, 40, 0.4);
  font-family: YakuHanJP, "Jost", "Noto Sans JP", sans-serif;
  font-size: max(1.6rem, 14px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
#front #blog .blog__wrapper .btn {
  margin-top: max(5.5rem, 50px);
  text-align: right;
}/*# sourceMappingURL=front.css.map */