@charset "utf-8";

@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}

:root {
  --gray: #323232;

  --screen-w: tan(atan2(var(--_w),1px)); /* screen width */
  --screen-h: tan(atan2(var(--_h),1px)); /* screen height*/

  --header-height: 98px;
  --header-z-index: 1000;

  --hamburger-color: #323232;
  --hamburger-color: #fff;
  --hamburger-line-width: 1px;
  --hamburger-line-gap: 6px;
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* 
デバッグ用
body::before {
  counter-reset: w var(--screen-w) h var(--screen-h);
  content: counter(w) "×" counter(h);
} */

html {
  /* font-size: 7px;

  @media (width > 1200px) {
    font-size: 8px;
  }

  @media (width > 1400px) {
    font-size: 9px;
  }

  @media (width > 1800px) {
    font-size: 10px;
  } */

  font-size: 10px;

  scroll-behavior: smooth;
  @media (width > 768px) {
    scroll-behavior: auto;
  }

}

body {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  /* font-feature-settings: "palt"; "Zen Old Mincho"には効果がない */
  /*-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
  /* text-spacing-trim: trim-start; */

  color: #323232;
  
  letter-spacing: .05em;
  font-size: 1.4rem;
  line-height: 2.2;

  width: 100%;
  overflow-x: hidden;

  /* scroll-snap-type: y proximity; */

  @media (width > 768px) {
    font-size: 1.5rem;
    line-height: calc(40 / 18);
  }

  @media (width > 900px) {
    font-size: 1.5rem;
  }

  @media (width > 1100px) {
    font-size: 1.5rem;
  }

  @media (width > 1300px) {
    font-size: 1.5rem;
  }

  @media (width > 1500px) {
    font-size: 1.6rem;
  }

  @media (width > 1600px) {
    font-size: 1.7rem;
  }

  @media (width > 1800px) {
    font-size: 1.8rem;
  }

  &.design-preview {

    @media (width > 768px) {

      .loading {
        display: none !important;
      }

      .kv-wrapper {
        background: url("../images/kv/kv-poster.jpg") center 0 no-repeat;
        background-size: cover;
        background-attachment: fixed;
      }

      .kv-bg {
        display: none !important;
      }

      .page {
        width: 1920px !important;
      }

      .kv-wrapper {
        height: 1058px !important;
        min-height: 0 !important;
      }

      .kv {
        height: 1080px !important;
        min-height: 0 !important;
      }

      .concept {
        height: 1080px !important;
        min-height: 0 !important;
      }

      .experience {
        height: 1140px !important;
        min-height: 0 !important;
      }

      .facility {
        min-height: 0 !important;
        font-size: inherit !important;
      }

      .facility-img {
        position: static !important;
        height: 700px !important;
        min-height: 0 !important;

        img {
          position: static !important;
          height: 700px !important;
          min-height: 0 !important;
        }
      }

      .facility-content {
        width: calc(1920px - 1042px) !important;
        height: 700px !important;
        min-height: 0 !important;
      }

      .community {
        height: 1080px !important;
        min-height: 0 !important;
      }

      .access {
        height: 1080px !important;
        min-height: 0 !important;
      }

      .recruit {
        min-height: 1080px !important;
        height: auto !important;
      }

    }

  }
}



:where(body) {

ul {
  list-style: disc;
  padding-left: 1em;
}

img {
  max-width: 100%;
  height: auto;
}

@media (any-hover: hover) {
  a:where(:any-link) {
    transition: opacity .25s ease-out;
  }
  a:where(:any-link):hover {
    opacity: .35; 
  }
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: revert;
    /* outline: auto;
    outline: auto -webkit-focus-ring-color; */
}

/* iPhoneでフォーカスが出てしまうので対応 */
@media (pointer: coarse) {
  *:focus {
    outline: none !important;
  }
}

.inner {
  width: 100%;
  box-sizing: border-box;
  padding-inline: calc(32 / 375 * 100vw);
  @media (width > 768px) {
    padding-inline: calc(80 / 1920 * 100vw);
  }
}

.content-ly1 {
  @media (width <= 768px) {
    padding-block: calc(96 / 375 * 100vw);
  }
  @media (width > 768px) {
    padding-block: calc(97 / 25 * 1em);
  }

  &:where(.recruit) {
    @media (width > 768px) {
      padding-block: calc(152 / 25 * 1em);
    }
  }
}

.content-ly2 {
  @media (width <= 768px) {
    padding-block: calc(56 / 375 * 100vw);
    :where(.facility) & {
      padding-bottom: calc(64 / 375 * 100vw);
    }
  }
}

.content-ly3 {
  @media (width <= 768px) {
    padding-block: calc(32 / 375 * 100vw);
    &:where(.acccess-content) {
      padding-bottom: 0;
    }
  }
}

.title {
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: .05em;
}

.sub-title {
  font-weight: normal;
  line-height: 1.5;
}

.text {
  @media (width <= 1000px) {
    /* word-break: auto-phrase; */
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  :where(.sns) & {
    @media (width <= 1400px) {
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
  }

  :where(.sns) & {
    @media (width <= 1400px) {
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
  }

  p + p {
    margin-top: 1em;

    @media (width > 768px) {
      margin-top: 1.1em;
    }
  }

  :where(.experience) & {
    p + p {
      @media (width <= 768px) {
        margin-top: 1.25em;
      }
    }
  }
}

wbr {
  @media (width > 1000px) {
    display: none;
  }
}

br.pc {
  display: none;
  @media (width > 1000px) {
    display: inline;
  }
  :where(.sns) & {
    @media (width > 1000px) {
      display: none;
    }
    @media (width > 1200px) {
      display: inline;
    }
  }
}

.yakuhan {
  display: inline-block;
  margin-right: -0.5em;
}

.num {
  display: inline-block;
  scale: .85 1;
  transform-origin: bottom left;
  letter-spacing: .07em;
  margin-right: -.4rem;
  @media (width > 768px) {
    margin-right: -.7rem;
  }
}

.logo-text {
  letter-spacing: .1em;
}

.logo-text-1 {
  letter-spacing: 0;
}

}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(infinity);
  background: #fff;

  @media (prefers-reduced-motion: reduce) {
    display: none !important;
  }
}

:where(.loading) {

  .loading-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -68%;
    opacity: 0;

    @media (width > 768px) {
      translate: -53.8% -59%;
    }

    @media (width <= 768px) {
      max-width: 56vw;
      height: auto;
    }
  }

}

/*
***************************** header *****************************
*/

.header {
  position: absolute;
  z-index: var(--header-z-index);
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 20px 24px;

  @media (width > 768px) {
    padding: 4.5rem min(67px, 8vw);
    padding-bottom: 0;
    gap: calc(38 / 18 * 1em);
  }

  &.before-fixed {
    opacity: 0;
    translate: 0 -20%;
    transition: translate .2s ease-out;
  }

  &.fixed {
    position: fixed;
    opacity: 1;
    translate: 0 0;
  }
}

:where(.header){

  .header-logo-img {
    display: block;
    aspect-ratio: 180 / 40;
    width: auto;
    height: 24px;
    @media (width > 768px) {
      width: 18.04rem;
      max-width: 16vw;
      height: auto;
    }

    .cls-1 {
      transition: fill 0.3s ease;
    }
  }

  .header-right {
    margin-left: auto;
  }

  &:not(.fixed){
    .header-right {
      @media (width > 768px) {
        display: none;
      }
    }
  }

  &.fixed.gray {
    .header-logo-img .cls-1 {
      fill: var(--gray);
    }
  }

  &.fixed {
    .hamburger-line {
      background-color: var(--gray) !important;
    }
  }

}

:root:has(dialog[open]) {
  .header-logo-img .cls-1 {
    fill: var(--gray) !important;
  }
  .hamburger-line {
    background-color: var(--gray) !important;
  }
}

:where(.gnav, .gnav-dialog){

  .gnav-item-link {
    text-decoration: none;
    color: inherit;
  }

}

.gnav {
  display: none;

  @media (width > 768px) {
    :where(.header:not(.fixed)) & {
      display: block;
    }
    :where(.header.fixed) & {
      display: none;
    }
  }
}

:where(.gnav){

  .gnav-list {
    display: flex;
    gap: calc(27 / 25 * 1em);
    font-size: inherit;
    @media (width > 768px) {
      gap: calc(19 / 18 * 1em);
      font-size: calc(17 / 18 * 1em);
      line-height: 1;
      margin: calc(3 / 18 * 1em) 0 0;
    }
  }

}

.gnav-dialog {
  position: relative;
}

:where(.gnav-dialog){

  .gnav-list {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: calc(27 / 25 * 1em);
    @media (width > 768px) {
      font-size: 1.8rem;
    }
  }

}

/*
***************************** kv *****************************
*/

.kv-wrapper {
  position: relative;
  height: calc(100svh + 150px + 40px);

  @media (width > 768px) {
    height: calc(100svh + 100px + 500px + 100px);
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    box-sizing: content-box;
    /* https://coliss.com/articles/build-websites/operation/css/using-easing-for-gradient-and-shadow.html */
    background-image: linear-gradient(
      hsl(0, 0%, 100%) 0%,
      hsla(0, 0%, 100%, 0.738) 19%,
      hsla(0, 0%, 100%, 0.541) 34%,
      hsla(0, 0%, 100%, 0.382) 47%,
      hsla(0, 0%, 100%, 0.278) 56.5%,
      hsla(0, 0%, 100%, 0.194) 65%,
      hsla(0, 0%, 100%, 0.126) 73%,
      hsla(0, 0%, 100%, 0.075) 80.2%,
      hsla(0, 0%, 100%, 0.042) 86.1%,
      hsla(0, 0%, 100%, 0.021) 91%,
      hsla(0, 0%, 100%, 0.008) 95.2%,
      hsla(0, 0%, 100%, 0.002) 98.2%,
      hsla(0, 0%, 100%, 0) 100%
    );
    rotate: 180deg;
    
    height: 150px;
    border-top: 40px solid #fff;
    @media (width > 768px) {
      height: 500px;
      border-top-width: 100px;
    }
    
  }
}

.kv {
  min-height: 100svh;
  box-sizing: border-box;
  position: relative;
}

:where(.kv) {

  .kv-bg {
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100svh;
  }

  .kv-video {
    width: 100%;
    height: 100svh;
    object-fit: cover;
  }

  .kv-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    z-index: 1;
    
    :where(.kv-bg.is-video-ready) & {
      display: none;
    }

    picture {
      display: block;
      width: 100%;
      height: 100svh;
    }
  }

  .kv-poster-img {
    width: 100%;
    height: 100svh;
    object-fit: cover;
  }

  .kv-logo {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1;
    
    @media (width > 768px) {
      translate: -55.75% -42%;
    }
    @media (width > 768px) {

    }

    img {
      max-width: 56vw;
      @media (width > 768px) {
        max-width: 40vw;
      }
    }
  }

  .kv-scroll {
    display: block;
    position: fixed;
    left: 50%;
    translate: -50% 0;
    bottom: calc(76 / 28 * 1em);
    font-size: calc(18 / 14 * 1em);
    line-height: 1;
    letter-spacing: .075em;
    text-align: center;
    z-index: 2;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    @media (width > 768px) {
      font-size: calc(20 / 18 * 1em);
      bottom: calc(76 / 20 * 1em);
    }

    span {
      display: block;
    }
  }

  .kv-scroll::after {
    content : '';
    display : block;
    position : absolute;
    background-color: #fff;
    right : 50%;
    bottom : -115px;
    transform : translateX(-50%);
    width : 1px;
    height : 100px;
    animation: scroll 1.5s infinite;
  }

}

/*
***************************** concept & about experience & community *****************************
*/

.page-content {
  background: #fff;
  position: relative;
  z-index: 1;
}

:is(.concept, .experience, .community) {
  text-align: center;
  letter-spacing: .05em;
  
  @media (width > 768px) {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: inherit;
  }
}

:where(.concept, .experience, .community) {

  .title {
    font-size: calc(40 / 25 * 1em);
    @media (width > 768px) {
      font-size: calc(30 / 18 * 1em);
    }
  }

  .text {
    @media (width > 768px) {
      letter-spacing: 0.18em;
    }
  }

}

/*
***************************** concept *****************************
*/

.concept {
  background: #fff;
  /* scroll-snap-align: start; */
}

:where(.concept) {

  .concept-title {
    font-size: calc(34 / 25 * 1em);
    margin: calc(4 / 34 * 1em) 0 calc(41 / 34 * 1em);
    letter-spacing: calc(2 / 34 * 1em);
    @media (width > 768px) {
      font-size: calc(30 / 18 * 1em);
      margin: 0 0 calc(49 / 30 * 1em);
    }
  }

  .concept-keyword {
    display: inline-block;
    margin: 0 0 0 calc(36 / 34 * 1em);
  }

  .concept-title-dash {
    display: inline-block;
    position: relative;
    top: calc(-5 / 34 * 1em);
  }

  .concept-title-word {
    display: inline-block;
    display: inline-block;
    margin: 0 calc(16 / 34 * 1em);
    letter-spacing: calc(9 / 34 * 1em);
  }

  .concept-sub-title {
    font-size: min(4.2vw, calc(35 / 25 * 1em));
    letter-spacing: 0.4em;
    margin: 0 0 calc(54 / 35 * 1em);
    @media (width > 768px) {
      font-size: calc(30 / 18 * 1em);
      margin: 0 0 calc(57 / 30 * 1em);
    }
  }

  .concept-text {
    @media (width > 768px) {
      line-height: calc(55 / 18);
    }
  }

}

/*
***************************** experience *****************************
*/

.experience {
  background: #fafafa;
}

:where(.experience) {

  .experience-title {
    margin: 0 0 calc(48 / 40 * 1em);
    margin-top: calc(13 / 40 * -1em); /* デザインとのずれ、text-box-trimの分と考えれられる */
    @media (width > 768px) {
      margin: 0 0 calc(51 / 30 * 1em);
    }
  }

  .experience-text {
    @media (width > 768px) {
      line-height: calc(40 / 18);
      p + p {
        margin-top: calc(40 / 18 * 1em);
      }
    }
  }

}

/*
***************************** community *****************************
*/

/* .community {
} */

:where(.community) {

  .community-title {
    letter-spacing: -0.16em;
    margin: 0 0 calc(51 / 40 * 1em);

    @media (width > 768px) {
      margin: 0 0 calc(53 / 30 * 1em);
    }

    > span:not([class]) {
      display: inline-block;
      margin-left: calc(10 / 51 * 1em);
    }
  }

}

/*
***************************** facilities *****************************
*/

/* .facilities {
} */

.facility {
  @media (width > 768px) {
    display: flex;
    font-size: calc(18 / 18 * 1em);
  }
}

:where(.facilities) {

  .facility-pic {
    @media (width > 768px) {
      flex: 1 1 0;
    }
  }

  .facility-pic-inner {
    display: none;
    @media (width > 768px) {
      display: block;
      min-height: 100dvh;
      position: sticky;
      top: 0;
      left: 0;
    }
  }

  .facility-img {
    @media (width > 768px) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0;
      overflow: hidden;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        height: 100dvh;
        object-fit: cover;
        object-position: center;
      }
    }
  }

  .facility-img-sp {
    @media (width > 768px) {
      display: none;
    }
  }

  .facility-zoom-btn {
    appearance: non;
    box-shadow: non;
    border: none;
    text-decoration: none;
    aspect-ratio: 1;
    width: 2.5em;
    cursor: pointer;
    position: absolute;
    bottom: 1.5em;
    right: 1.5em;

    @media (width <= 768px) {
      display: none;
    }

    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,.2);
      mix-blend-mode: difference;
      transition: background-color .2s ease-out;
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(../images/common/icons/icon-zoom.svg) center no-repeat;
      background-color: rgba(255,255,255,.15);
      background-size: 55% auto;
      opacity: .9;
      transition: opacity .2s ease-out, background-color .2s ease-out;
    }

    &:hover {
      opacity: 1 !important;
      
      &::before {
        background-color: transparent;
      }
      &::after {
        background-color: transparent;
        opacity: 1;
      }
    }
  }

  .facility-content {
    text-align: center;
    @media (width > 768px) {
      min-height: 100dvh;
      flex: 0 0 auto;
      /* width: 87.0rem; */
      width: 50vw;
      box-sizing: border-box;
      padding: 0 4em;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .inner {
        display: contents;
      }
    }
    @media (width > 1000px) {
      width: calc(620 / 18 * 1em);
    }
  }

  .facility-title {
    font-size: calc(38 / 25 * 1em);
    margin: 0 0 calc(30 / 38 * 1em);
    
    @media (width > 768px) {
      font-size: calc(30 / 18 * 1em);
      margin: 0 0 calc(34 / 30 * 1em);
      margin-top: calc(18 / 30 * -1em); /* text-box-trimの分 */
    }

    @media (width > 768px) {
      .num {
      }
    }
  }

  .facility-name {
    display: inline-block;
    letter-spacing: .057em;
    font-size: calc(45 / 38 * 1em);
    margin-left: calc(24 / 45 * 1em);
    @media (width > 768px) {
      font-size: calc(30 / 30 * 1em);
      margin-left: calc(18 / 30 * 1em);
    }
  }

  .facility-text {
    @media (width > 768px) {
      font-size: inherit;
      letter-spacing: .055em;
      line-height: calc(40 / 18);
    }
  }

}

/*
***************************** access *****************************
*/

.access {
  background: #fafafa;
  @media (width > 768px) {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
  }
}

:where(.access) {

  .access-title {
    text-align: center;
    font-size: calc(45 / 25 * 1em);
    letter-spacing: .05em;
    margin: 0 0 calc(56 / 45 * 1em);

    @media (width > 768px) {
      font-size: calc(30 / 18 * 1em);
      margin: calc(35 / 30 * -1em) 0 calc(143 / 30 * 1em);
    }
  }

  .access-row {
    @media (width > 768px) {
      display: flex;
      justify-content: center;
      gap: calc(40 / 18 * 1em);
    }
    @media (width > 1000px) {
      gap: 0;
    }
  }

  .acccess-content {
    @media (width > 768px) {
      flex: 0 0 auto;
      width: 40vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (width > 1200px) {
      width: calc(660 / 18 * 1em);
      justify-content: flex-start;
    }
  }

  .acccess-map {
    background: #fff;
  }

  .gmap {
    border: none;
    aspect-ratio: 800 / 500;
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    opacity: .8;
    transition: 0.4s;
    @media (any-hover: hover) {
      &:hover {
        filter: none;
        -webkit-filter: none;
        opacity: 1;
      }
    }
  }



  .access-data {
    @media (width > 768px) {
      font-size: inherit;
      letter-spacing: .0525em;
      /* margin-left: 12.9rem; */
      margin-left: min(4.5vw, calc(129 / 18 * 1em));
      margin-top: calc(18 / 18 * -1em);
    }
    @media (width > 768px) {
      margin-left: 0;
    }
    @media (width > 1200px) {
      margin-left: calc(129 / 18 * 1em);
    }
  }

  .access-data-item {
    display: flex;
  }

  .access-data-name {
    font-size: inherit;
    font-weight: normal;
    flex: 0 0 auto;
    margin-right: calc(12 / 14 * 1em);

    @media (width > 768px) {
      margin-right: calc(33 / 18 * 1em);
    }
  }
  
  .access-data-name:where(.access-data-shop-name) {
    @media (width > 768px) {
      margin-right: calc(7 / 18 * 1em);
    }
  }

  .access-data-value {
    font-size: inherit;
    flex: 1 1 0;
  }

}

/*
***************************** sns *****************************
*/

.sns {
  background: #fafafa;
  @media (width > 768px) {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

:where(.sns) {

  .sns-row {
    @media (width > 768px) {
      min-height: calc(877 / 18 * 1em);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row-reverse;
      max-width: 100%;
      width: calc(1748 / 18 * 1em);
      gap: calc(40 / 18 * 1em)
    }
    @media (width > 1000px) {
      gap: calc(72 / 18 * 1em)
    }
    @media (width > 1400px) {
      justify-content: space-between;
      gap: 0;
    }
  }

  .sns-content {
    text-align: center;
    @media (width > 768px) {
      flex: 1 1 auto;
      width: fit-content;
      box-sizing: border-box;
      max-width: 45%;
      /* width: calc(830 / 25 * 1em);
      max-width: calc(830 / (1748 - 52) * 100%); */
    }
    @media (width > 1600px) {
      max-width: none;
    }

  }

  .sns-content-inner {
    @media (width > 768px) {
      width: calc(830 / 18 * 1em);
      max-width: 100%;
      margin: calc(6 / 18 * -1em) 0 0;
    }
  }

  .sns-pic {
    padding-bottom: calc(32 / 375 * 100vw);
    @media (width > 768px) {
      padding: 0;
      flex: 0 1 auto;
      /* width: calc(100% - 35em);
      max-width: 811px; */
      width: 811px;
      max-width: 48%;
    }
  }

  .sns-pic-inner {
    display: flex;
    align-items: flex-start;
    width: 742px;
    max-width: 100%;
  }

  .sns-pic-item {
    display: block;
    height: auto;
    overflow: hidden;

    img {
      max-width: 100%;
      height: auto;
      /* scale: 1.1; */
    }
  }

  .sns-pic-item-1 {
    width: calc(372 / 742 * 100%);
  }

  .sns-pic-item-2 {
    width: calc(317 / 742 * 100%);
    margin-top: calc(193 / 742 * 100%);
    margin-left: calc(52 / 742 * 100%);
  }

  .sns-title {
    font-size: calc(35 / 25 * 1em);
    margin: 0 0 calc(52 / 35 * 1em);
    @media (width > 1600px) {
      font-size: calc(30 / 18 * 1em);
      margin: 0 0 calc(54 / 30 * 1em);
      margin-left: calc(5 / 30 * 1em);
    }
  }

  .sns-text {
    @media (width > 768px) {
      font-size: inherit;
      letter-spacing: .052em;

      p + p {
        margin-top: calc(40 / 18 * 1em);
      }
    }
    
  }

  .sns-info {
    border: 1px solid #d1d1d1;
    display: flex;
    align-items: center;
    text-align: left;
    width: fit-content;
    font-family: sans-serif;
    line-height: 1;
    margin: calc(74 / 14 * 1em) auto 0;
    padding: calc(20 / 14 * 1em) calc(30 / 14 * 1em) calc(20 / 14 * 1em) calc(26 / 14 * 1em);
    gap: calc(28 / 14 * 1em);
    font-size: 0.9rem;

    @media (width > 768px) {
      font-size: calc(14 / 18 * 1em);
    }
    /* @media (width > 1200px) {
      font-size: 1.4rem;
    } */
  }

  :where(.sns-info) {

    .sns-info-pic {
      width: calc(72 / 14 * 1em);
      @media (width > 768px) {
        width: calc(90 / 14 * 1em);
      }
    }

    .sns-data {
      display: table;
      table-layout: auto;
    }

    .sns-data-item {
      display: table-row;
    }

    .sns-data-title,
    .sns-data-value {
      display: table-cell;
      font-weight: normal;
      padding: calc(5 / 14 * 1em) 0;
    }

    .sns-data-title {
      padding-right: calc(16 / 14 * 1em);
    }

  }

}


/*
***************************** recruit *****************************
*/

.recruit {
  @media (width > 768px) {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    box-sizing: border-box;
  }
}

:where(.recruit) {

  .recruit-title {
    text-align: center;
    font-size: calc(40 / 25 * 1em);
    letter-spacing: .05em;
    margin: 0 0 calc(56 / 45 * 1em);

    @media (width > 768px) {
      margin: calc(16 / 30 * -1em) 0 calc(21 / 30 * 1em);
      font-size: calc(30 / 18 * 1em);
    }
  }

  .recruit-lead {
    text-align: center;
    text-decoration: underline;
    text-underline-offset: .375em;
    text-decoration-thickness: 1px;
    @media (width > 768px) {
      font-size: calc(23 / 18 * 1em);
    }
  }

  .recruit-detail-title {
    text-align: center;
    font-size: inherit;
    margin: calc(65 / 25 * 1em) 0 calc(42 / 25 * 1em);
    @media (width > 768px) {
      font-size: calc(23 / 18 * 1em);
      margin: calc(65 / 23 * 1em) 0 calc(30 / 23 * 1em);
    }
  }

  .recruit-row {
    @media (width > 768px) {
      width: 880px;
      max-width: 100%;
      margin-inline: auto;
    }
  }

  .recruit-col {
    background: #f0f0f0;
    padding: 3em;
    font-size: 12px;
    @media (width > 768px) {
      flex: 1 1 0;
      font-size: inherit;
      padding: 2.5em 3em;
      line-height: 2;
    }
  }

  .recruit-contact {
    text-align: center;
    margin: calc(64 / 25 * 1em) 0 0;
    letter-spacing: 0.01em;
    @media (width > 768px) {
      margin: calc(48 / 18 * 1em) 0 0;
    }
  }

  .recruit-contact-link {
    display: block;
    width: fit-content;
    margin: calc(16 / 25 * 1em) auto 0;
    color: #29abe2;
    font-size: inherit;
    @media (width > 768px) {
      line-height: 2;
    }
  }

  .recruit-contact-link:any-link {
    text-decoration: underline;
    text-underline-offset: .49em;
    text-decoration-thickness: 1px;
  }

}

/*
***************************** sns *****************************
*/

.footer {
  background: #fafafa;
  @media (width > 768px) {
    font-size: calc(20 / 18 * 1em);
  }
}

:where(.footer) {

  .footer-inner {
    width: 100%;
    padding: 0 max(calc(32 / 375 * 100vw), calc(80 / 1920 * 100vw));
    @media (width > 1200px) {
      padding: 0 64px;
    }
  }

  .footer-row {
    width: 100%;
    padding: calc(105 / 20 * 1em) 0 50px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    
    @media (width > 768px) {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      gap: calc(64 / 20 * 1em);
    }

    @media (width > 1200px) {
      align-items: flex-start;
      gap: calc(160 / 20 * 1em);
    }
  }

  .footer-main {
    display: contents;

    @media (width > 768px) {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    @media (width > 1200px) {
      display: contents;
    }
  }

  .footer-info {
    flex: 1 1 auto;
    box-sizing: border-box;
    @media (width > 768px) {
      max-width: 280px;
    }
    @media (width > 1800px) {
      max-width: 382px;
    }
  }

  .footer-info-content {
    width: fit-content;
    @media (width > 768px) {
      margin: 0 0 0 auto;
    }
    @media (width > 1800px) {
      margin: 0 auto;
    }
  }

  .footer-aside {
    @media (width > 768px) {
      text-align: right;
      margin-left: auto;
    }
  }

  .footer-logo {
    
    img {
      display: block;
      padding-bottom: calc(29 / 237 * 100%);
      max-width: 45vw;
      @media (width > 768px) {
        max-width: none;
      }
    }
  }

  .footer-address {
    line-height: 1.5;
    /* margin: calc(29 / 20 * 1em) 0 0; */
  }

  .footer-tel {
    margin: calc(12 / 20 * 1em) 0 0;
    @media (width > 768px) {
      margin: calc(7 / 20 * 1em) 0 0;
    }
  }

  .footer-menu {
    margin-right: auto;
    @media (width > 768px) {
      margin: calc(7 / 20 * -1em) 0 0;
    }
  }

  .footer-nav {

    @media (width > 1800px) {
      display: flex;
      gap: calc(96 / 20 * 1em);
    }

    a {
      display: block;
      margin: 8px 0 0;
      white-space: nowrap;
      @media (width > 768px) {
        margin: 0;
      }

      &:first-child {
        margin: 0;
      }
    }

  }

  .footer-nav-group {
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }

    @media (width > 1800px) {
      margin-bottom: 0;
    }
  }

  .footer-aside-link {
    display: block;
    width: fit-content;
    position: relative;
    padding-right: 1em;
    margin: 0;
    
    @media (width > 768px) {
      margin-left: auto;
    }

    &::after {
      content: '';
      display: block;
      aspect-ratio: 1;
      width: auto;
      height: .5em;
      background: url(../images/common/icons/icon-link.svg) center no-repeat;
      background-size: contain;
      position: absolute;
      right: 0;
      top: 50%;
      translate: 0 -50%;
    }
  }

  .footer-backtotop {
    display: none;
    @media (width > 768px) {
      display: block;
      margin-top: calc(24 / 20 * 1em);
      letter-spacing: 0.05em;
    }
  }

  .footer-corp-link {
    @media (width > 768px) {
      margin-top: calc(6 / 20 * 1em);
    }
  }

  .footer-aside-note {
    font-weight: bolder;
    font-size: calc(15 / 20 * 1em);
    letter-spacing: 0;
    line-height: 1.75;
    margin: calc(28 / 20 * 1em) 0 0;
    @media (width > 768px) {
      margin: calc(80 / 20 * 1em) 0 0;
      letter-spacing: 0.025em;
      line-height: inherit;
    }
  }

  .footer-copy {
    font-size: calc(16 / 20 * 1em);
    letter-spacing: 0.025em;
    margin: 2px 0 0;
    @media (width > 768px) {
      margin: calc(3 / 16 * 1em);
      line-height: 1;
    }
  }

}

.modaal-close:after, .modaal-close:before {
  width: 2px !important;
  border-radius: none !important;
}

.modaal-close {
  box-sizing: border-box !important;
  /* padding: 3px !important; */
  background-clip: content-box !important;
}

.modaal-close:focus, .modaal-close:hover {
  background-color: rgba(255,255,255,.15) !important;
}

.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
  background-color: #fff !important;
}

.modaal-container {
  vertical-align: middle !important;
}

.modaal-close {
  right: 30px !important;
}