@charset "UTF-8";
@media (max-width:1023.008px) {
  html {
    font-size: calc(16 * (100vh / 1920) * 4);
  }
  .layout {
--content: auto;
--full-padding: var(--gap);
  }
  @media (hover: none){
    a[href^="tel:"] {
      pointer-events: auto;
    }
    :root{
        --hover-color: inherit;
    }
  }

  @media (orientation: portrait) {
    html {
      font-size: calc(16 * (100vw / 1920) * 3);
    }

    .layout {
      --gap: calc(20 * var(--bh));
      width: 100%;
      display: grid;
      gap: 0;
      grid-template-columns:
        [full-start] var(--full)
        /* [full-left-start] 0 */
        [full-padding-start] var(--full-padding)
        /* [feature-start] var(--feature)
    [popout-start] var(--popout) */
        /* [full-right-start] 0 */
        [content-start] var(--content) [content-end]
        /* var(--popout) [popout-end]
    var(--feature) [feature-end] */
        /* 0 [full-left-end] */
        var(--full-padding) [full-padding-end]
        /* 0 [full-right-end] */
        var(--full) [full-end];
    }
  }
}
  /* @media (max-width:768.008px) and (orientation: portrait) { */
/* @media (max-width:1023.008px) or (orientation: portrait) { */
@media (max-width:1023.008px)  {

  :root{
      --global-header-height: 0px;
  }
  .spcut {
    display: none;
  }

  .spblock {
    display: block;
  }
  main {
    width: min(100%,100vw);
    overflow: hidden;
  }

  #global-header {
    position: static;
    display: contents;
  }

  #global-header nav{
    position: fixed;
    inset: auto 0 0 0;
    padding: 10px 0 5px !important;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(10px);
    z-index: 100;
    border-radius: 26px 26px 0 0;
    width: 100%;
    overflow: hidden;
  }

  #global-header nav::after{
    width: calc(100% - 100px);
    height: 5px;
    background: rgba(56, 65, 74,1);
    content: "";
    display: block;
    inset: 0 0 auto;
    margin: 0 auto;
    position: absolute;
    border-radius: 0 0 100vh 100vh;
  }

  .scrolled #global-header nav{
    opacity: 1;
    pointer-events: auto;
    /* background: rgba(255,255,255,0.5); */
    background: rgba(56, 65, 74,0.9);
  }
  #global-header .logo,
  #global-header .sns-link{
    display: none;
  }
  .cmp #global-header nav{
    display: none;
  }
  .cmp #global-header .logo {
    width: 100%;
    display: block;
    margin-inline:auto;
    position: static;
    inset: 0 0 auto;
    background: inherit;
    box-shadow: inherit;
    padding: inherit;
  }

  #global-header nav{
    width: 100%;
    margin: 0;
  }
  #global-header nav ul{
    display: grid;
    /* grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-areas: 
    "tel tel"
    "contact calendar"; */
    gap: 0 5px;
    grid-template-columns: 1fr max(auto,1fr) 1fr;
    grid-template-areas: 
    "contact calendar tel";
  }
    #global-header nav ul li{
      height: 100%;
      position: relative;
    }
#global-header nav ul li::after{
  position: absolute;
  content: "";
  display: block;
  inset: 0 0 0 auto;
  margin: auto 0;
height: 80%;
/* background: rgba(56, 65, 74,1); */
background: rgba(255, 255, 255,0.2);
width: 1px;
translate: 4px 0;
}
#global-header nav ul li.tel::after{
  display: none;
}
  #global-header .tel {
    grid-area: tel;
    text-align: center;
    margin-right: 0;
    /* padding: 10px 0; */
  }
  #global-header .tel a {
    /* text-indent: -2000%; */
    position: relative;
    overflow: hidden;
    background: #80ba34;
    border-radius: 4px;
  }
  #global-header .tel a >b,
  #global-header .tel a >small{
    display: none;
  }
  #global-header .tel a span{
    /* position: absolute;
    inset: 0;
    margin: auto; */
    color: #fff;
  }
  #global-header .tel small{
    display: inline-block;
    vertical-align: 0.5em;
    margin-left: 10px;
  }
  #global-header .contact-link{
    grid-area: contact;
  }
  #global-header .calendar-link {
    grid-area: calendar;
  }
   #global-header .tel,
   #global-header .calendar-link,
   #global-header .contact-link{
    background: none !important;
    margin-right: 0;
   }

   #global-header .tel a,
   #global-header .calendar-link a,
   #global-header .contact-link a{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: max(11px,0.6875rem);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin: 0;
    border-radius: 4px;
    background: none !important;
  }
  #global-header .calendar-link a img,
  #global-header .contact-link a img {
    margin-right: 0;
  }
  #global-header .tel a span:first-of-type,
  .calendar-link a img,
  .contact-link a img{
    width: 3rem;
    height: auto;
    margin-bottom: 3px;
  }
  #global-header .tel a span:first-of-type img{
    width: 3rem;
    height: auto;
  }
  #global-header .tel a span:last-of-type{
  height: auto;
  display: block;
}
  #hero {
    overflow: hidden;
    max-width: 100vw;
    height: auto;
    min-height: 100svh;
    flex-direction: column;
    z-index: 1;
    box-sizing: border-box;
    padding: 20px 0;
  }

  #hero::after {
    content: "";
    display: block;
    width: 100%;
    height: 80%;
    position: absolute;
    inset: auto 0 0;
    background: linear-gradient(to top, #fff 50%, transparent);
    z-index: -1;
  }

  /* #hero::before { */
  #hero > figure {
    width: 100%;
    height: 100%;
    border-radius: 0 0 0 10px;
    background-position: left bottom;
    inset: 0 0 auto auto;
  }

  #hero > figure img {
    width: 100%;
    height: 70%;
    object-fit: cover;
  }

  #hero > p {
    -ms-writing-mode: unset;
    writing-mode: unset;
    margin-top: 0;
    /* background:linear-gradient(to bottom,#fff,transparent); */
    background: none;
    border-right: 0;
    /* margin:0 0 auto; */
    margin: auto 0 0;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: -1;
    color: #655139;
    font-weight: 700;
    position: relative;
    z-index: 2;
    --c: rgba(255, 255, 255, 0.25);
    text-shadow: var(--c) 2px 0px 0px, var(--c) 1.75517px 0.958851px 0px, var(--c) 1.0806px 1.68294px 0px, var(--c) 0.141474px 1.99499px 0px, var(--c) -0.832294px 1.81859px 0px, var(--c) -1.60229px 1.19694px 0px, var(--c) -1.97999px 0.28224px 0px, var(--c) -1.87291px -0.701566px 0px, var(--c) -1.30729px -1.51361px 0px, var(--c) -0.421592px -1.95506px 0px, var(--c) 0.567324px -1.91785px 0px, var(--c) 1.41734px -1.41108px 0px, var(--c) 1.92034px -0.558831px 0px;
  }

  #hero nav {
    margin: auto auto auto 0;
    width: fit-content;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 2rem 2rem;
    border-radius: 0 10px 10px 0;
    /*
   -webkit-mask-size: 150%;
   mask-size: 150%;
   -webkit-mask-position: right top;
   mask-position: right top;
   */
  }

  #hero .logo {
    /* padding: 12.5rem 0 1.25rem; */
    padding: 1.25rem 0;
  }

  #hero nav ul {
    margin-top: 0;
  }

  #concept {
    overflow: hidden;
    margin-top: 0;
    padding-bottom: 0;
    width: 100%;
  }

  #concept .section-copy {
    margin-top: 2rem;
    font-size: 1.5rem !important;
    text-align: center;
  }

  #concept .intro .inner {
    padding: 5rem 2rem 0;
    margin-left: 2rem;
    margin-right: 2rem;
  }

  #concept .intro {
    grid-column: full-start / full-end;
  }

  #concept .intro > img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  #concept .intro h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 1.5;
  }

  #concept .intro h3 em {
    font-size: 4rem;
    vertical-align: super;
    display: inline-block;
  }

   .concept-item {
    margin: 10rem 0;
    width: 100%;
    overflow: hidden;
  }

  .concept-item em {
    translate: 0 -150%;
    font-size: 5rem;
    display: block;
    width: 100%;
    text-align: center;
  }

  .concept-item figure img,
  .concept-item-wrapper .concept-item:nth-child(2n) figure img {
    border-radius: 10px;
  }

  .concept-item > .inner,
  .concept-item-wrapper .concept-item:nth-child(2n) > .inner {
    flex-direction: column;
    gap: 2rem;
  }

  .concept-item > .inner + .inner {
    margin-top: 2rem;
  }

  /* #concept01 .inner[data-layout="content"] + .inner[data-layout="content"]{
  margin-top: 0;
} */
  .concept-item > .inner h3 {
    text-align: center;
    -ms-writing-mode: unset;
    writing-mode: unset;
  }

  .concept-item > .inner h3 + .handwritten,
  .concept-item-wrapper .concept-item:nth-child(2n) > .inner h3 + .handwritten {
    inset: 0 auto auto 0;
    translate: 0 0;
  }

  .concept-before-after {
    margin: 5rem 0 0;
  }

  .inner:has(.concept-before-after):nth-child(2n-1) .paragraph img {
    translate: 25% 0;
  }

  .concept-before-after .item > figure figcaption.threed,
  .concept-before-after .item > figure figcaption.before,
  .concept-before-after .item > figure figcaption.after,
  #works .slider .main figcaption b.before,
  #works .slider .main figcaption b.after {
    inset: 0 auto auto 0;
    border-radius: 100vh 100vh 0 100vh;
    translate: -25% -50%;
    /* width: 6.875rem;
  height: 6.875rem;
  font-size: 1.75rem; */
    width: 4em;
    height: 4em;
    font-size: max(16px,1.5rem);
  }

  .concept-before-after .item::after,
  .inner:has(.concept-before-after):nth-child(2n-1) .concept-before-after .item:nth-child(2n-1):after {
    inset: 0 0 0 auto;
    margin: auto 0;
    scale: 1 -1;
    rotate: 80deg;
    translate: 55% 0;

  }

  .concept-item > .inner h3 br {
    display: block;
  }

  .inner:has(.concept-before-after) .paragraph {
    margin-bottom: 2em;
  }

  .inner:has(.concept-before-after) {
    display: block;
  }

  .concept-before-after .item {
    flex-direction: column;
    gap: 2.5rem;
  }

  #concept03 .gallery {
    font-size: calc(16 * (100vw / 1920));
    flex-direction: row !important;
  }

  #concept03 .gallery01 {
    grid-column: full-start / content-end;
  }

  #concept03 .gallery01 img:nth-child(1) {
    width: calc(836 / 1502 * 100%);
  }

  #concept03 .gallery01 img:nth-child(2) {
    width: calc(240 / 1502 * 100%);
  }

  #concept03 .gallery01 img:nth-child(3) {
    width: calc(340 / 1502 * 100%);
  }

  #concept03 .gallery02 {
    grid-column: content-start / content-end;
  }

  #concept03 .gallery02 img:nth-child(1) {
    width: calc(300 / 1100 * 100%);
  }

  #concept03 .gallery02 img:nth-child(2) {
    width: calc(220 / 1100 * 100%);
  }

  #concept03 .gallery02 img:nth-child(3) {
    width: calc(509 / 1100 * 100%);
  }


  #showroom .section-copy::before {
    /* width: 5rem;
  height: 5rem; */
    translate: 0 -95%;
    z-index: 1;
    scale: 0.5;
    transform-origin: right center;
  }

  .showroom-information h3 {
    font-size: 2rem;
  }

  .showroom-information .grid {
    display: flex;
    flex-direction: column;
    margin: 2rem;
  }

  #works .work-wrapper {
    padding: 3.125rem 0;
  }

  #works .work-wrapper::before,
  #works .work-wrapper::after {
    content: "";
    height: 7.3125rem;
  }

  /* #works .gallery-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, calc(900 * var(--bw))));
    gap: calc(40 * var(--bh));
  } */

  #works .work .grid {
    display: flex;
    flex-direction: column;
  }

  #works .work .grid h4 {
    width: 100%;
  }

  #works .slider {
    display: flex;
    flex-direction: column;
  }
  #works .slider .main{
    padding-bottom: 0;
  }

  #works .slider .main figcaption p {
    position: static;
    translate: 0 0;
    display: block;
  }

  #works .slider .thumbnails ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #other-works .swiper-slider li {
    --space: max(15px,0.75rem);
    padding: 0 max(20px,calc(20 * var(--bw)));
  }
  #other-works .swiper-slider li > *{
    padding: 0 var(--space) var(--space);
  }
  #other-works .swiper-slider li figure {
    margin-bottom: var(--space);
  }
  #other-works .swiper-slider li h4,
  #other-works .swiper-slider li p {
    margin-left: var(--space);
    margin-right: var(--space);
  }

  #other-works .swiper-slider li h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
    /* font-size: 1.1rem; */
    font-size: max(16px,1.1rem);
  }

  #other-works .swiper-slider li p {
    margin-bottom: 0;
    font-size: max(14px,0.8rem);
    line-height: 1.8;
    padding-bottom: 0;
  }

  #other-works .swiper-navigation-wrapper {
    padding: 0 calc(50 * var(--bw));
    flex-direction: column;
    align-items: flex-end;
  }

  #other-works .swiper-pagination-bullets {
    width: 100%;
    justify-content: center;
  }

  #other-works .swiper-pagination-bullets > * {
    flex: 1;
    width: 100%;
    max-width: 5rem;
  }

  #flow h2 + p {
    text-align: left;
  }

  #flow li {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    gap: calc(20 * var(--bw));
  }

  #flow li h3 {
    font-size: 1.5rem;
    padding-left: 5.9375rem;
  }

  #flow li h3::before {
    margin-left: 0;
    translate: 0 0;
  }

  #flow li p {
    margin-bottom: 1.25rem;
  }

  #flow li figure {
    width: 100%;
  }

  #flow .notes {
    padding: 2rem;
  }

  #contact {
    overflow: hidden;
  }
  #contact p.popup {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #contact p.popup::before, #contact p.popup::after, #contact .popup-inner::before, #contact .popup-inner::after {
    scale: 0.5;
  }

  #contact .tel-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #contact .form {
    padding: 2rem;
  }

  #contact .form dl div {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--bh));
  }

  #contact .form .submit:hover{
      background: #38414a;
  }

  #goPageTop {
    /* display: none; */
    position: relative;
    z-index: auto;
  }
  #goPageTop:hover{
    background: #38414a;
  }

  .footer-copyright{
    margin-bottom: var(--global-header-height);
  }
  #global-footer dl {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 0 2rem;
  }

  #global-footer dl dd {
    flex-direction: column;
    gap: 5px;
  }

  .footer-banners ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #showroom .section-copy + p,
  #works .work p,
  .movie {
    padding-left: 0;
    padding-right: 0;
  }

.cmp main{
  margin-top: 0;
}
.cmp section {
  padding: 4.375rem 0;
}
.cmp main p{
font-size: max(14px,1rem);
}
.button-link a{
line-height: 1.5;
font-size: max(14px,1rem);
}

  .section-title {
    font-size: 4rem;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  .section-title span {
    display: block;
  }

  .section-copy,
  .concept-item > .inner h3 {
    font-size: 2rem !important;
  }
  .caption{
    text-align: left;
  }
  
  /*=== layout ===*/
  *[data-layout="full-left"],
  *[data-layout="full-right"] {
    grid-column: content-start / content-end;
  }
}

/*
@media screen and (max-width: 768px) {
  .spcut {
    display: none !important;
  }

  .spblock {
    display: inline-block !important;
  }
}

@media (orientation: portrait) {
  #hero {
  height: calc(1020 * var(--bh));
  }
#hero::before {
  height: calc(840 * var(--bh));
}
#hero nav {
  font-size: calc(16 * var(--bh));
}

#goPageTop {
  display: flex;
  border-radius: 100vh;
  width: calc(70 * var(--bh));
  height: calc(70 * var(--bh));
  inset: auto calc(20 * var(--bh)) calc(20 * var(--bh)) auto;
  margin: auto 0 calc(20 * var(--bh)) auto;
}

}*/