@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@layer foundation, vendor, layout, component, project, page, utilities;
:root {
  --sans-serif: "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  --serif: "Noto Serif JP", serif;
  --en-sans: "", sans-serif;
  --en-serif: "", serif;
  --base: #fff;
  --main: #000;
  --accent: #d81b60;
  --sp-base-fs: 4vw;
  --sp-pad: 4vw;
}

@layer foundation {
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  dl,
  dt,
  dd,
  ol,
  ul,
  figure {
    all: unset;
    display: revert;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  img {
    vertical-align: middle;
  }
}
@layer foundation {
  html {
    height: 100%;
    scroll-behavior: smooth;
  }
  @media screen and (max-width: 1200px) and (min-width: 767px) {
    html {
      font-size: 1.3265306122vw;
    }
  }
  body {
    text-size-adjust: 100%;
    font-feature-settings: "palt" 1;
    font-family: var(--sans-serif);
    line-height: 1.8;
    min-width: 320px;
    color: var(--main);
    background: var(--base);
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  :focus-visible {
    outline: none;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.5;
  }
  img,
  svg,
  iframe,
  video,
  picture {
    max-width: 100%;
  }
  img {
    letter-spacing: 0;
    font-size: 12px;
    height: auto;
  }
  a {
    text-decoration: none;
    word-break: break-all;
    color: currentColor;
  }
  @media screen and (min-width: 768px) {
    a[href^="tel:"] {
      display: inline-block;
      pointer-events: none;
    }
  }
  small {
    font-size: 80%;
  }
  button,
  input[type=button],
  input[type=submit] {
    cursor: pointer;
    font: inherit;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  label {
    cursor: pointer;
    display: inline-block;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.5;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  summary {
    list-style: none;
    display: block;
    cursor: pointer;
    user-select: none;
  }
}
@layer layout {}
@layer layout {
  .l-footer {
    background: #FF9907;
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.625rem 1.875rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer {
      padding: 1.1111111111svh 2.2222222222svh;
    }
  }
  @media screen and (max-width: 767px) and (orientation: portrait) {
    .l-footer {
      padding: 2.6666666667vw;
    }
  }
  .l-footer a {
    color: #fff;
  }
  .l-footer a img {
    width: 0.6875rem;
    vertical-align: top;
    position: relative;
    top: 0.375rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer a img {
      top: 0.9333333333vw;
      width: 1.8666666667vw;
    }
  }
  @media screen and (max-width: 767px) and (orientation: landscape) {
    .l-footer a img {
      top: 0.9333333333vh;
      width: 1.8666666667vh;
    }
  }
  .l-footer__name {
    font-size: 0.875rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer__name {
      font-size: 2.1333333333vw;
    }
  }
  @media screen and (max-width: 767px) and (orientation: landscape) {
    .l-footer__name {
      font-size: 2.1333333333vh;
    }
  }
  .l-footer__copyright {
    font-size: 0.75rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer__copyright {
      font-size: 1.6vw;
    }
  }
  @media screen and (max-width: 767px) and (orientation: landscape) {
    .l-footer__copyright {
      font-size: 1.6vh;
    }
  }
}
@layer layout {
  .l-header {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1.25rem;
    line-height: 1.1;
  }
  @media screen and (max-width: 767px) {
    .l-header {
      padding: 1.3333333333vw 2.6666666667vw;
    }
  }
  @media screen and (max-width: 767px) and (orientation: landscape) {
    .l-header {
      padding: 0.5333333333vh 5.3333333333vh;
    }
  }
  .l-header__logo {
    width: 18.5rem;
  }
  @media screen and (max-width: 767px) {
    .l-header__logo {
      width: 48vw;
    }
  }
  @media screen and (max-width: 767px) and (orientation: landscape) {
    .l-header__logo {
      width: 33.3333333333vh;
    }
  }
}
@layer layout {}
@layer layout {
  .l-nav.is-expanded .l-nav__body {
    visibility: visible;
    right: 0;
  }
  .l-nav__btn {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .l-nav__btn[aria-expanded=true] .l-nav__line.is-1 {
    opacity: 0;
  }
  .l-nav__btn[aria-expanded=true] .l-nav__line.is-2 {
    rotate: 45deg;
  }
  .l-nav__btn[aria-expanded=true] .l-nav__line.is-3 {
    opacity: 0;
  }
  .l-nav__btn[aria-expanded=true] .l-nav__line.is-4 {
    rotate: -45deg;
  }
  .l-nav__btn svg {
    width: 2.3125rem;
    height: 2.3125rem;
  }
  @media (orientation: landscape) {
    .l-nav__btn svg {
      width: 4.9333333333vh;
      height: 4.9333333333vh;
    }
  }
  .l-nav__line {
    transform-origin: center center;
    transition-property: opacity, rotate;
    transition-duration: 0.25s;
    fill: #EE8A00;
  }
  .l-nav__body {
    width: 400px;
    height: calc(100dvh - 7.75rem);
    display: block;
    visibility: hidden;
    position: fixed;
    top: 5.25rem;
    right: -110%;
    overflow: auto;
    overscroll-behavior-y: contain;
    transition: 0.3s ease-in;
    z-index: 99;
  }
  @media screen and (max-width: 767px) {
    .l-nav__body {
      width: 100%;
      top: 13.3333333333vw;
      height: calc(100dvh - 9.3333333333vw);
    }
  }
  @media screen and (max-width: 767px) and (orientation: landscape) {
    .l-nav__body {
      width: 26vw;
      top: 8.1333333333vh;
      min-height: calc(100dvh - 14.4vh);
    }
  }
  .l-nav__list {
    min-height: calc(100dvh - 7.75rem - 17.5rem);
    padding: 3.75rem 3.125rem 13.75rem 3.125rem;
    background: #9ecff0 url("/torakichiland/assets/img/cotent/nav_bg.jpg") 0 100%/100% auto no-repeat;
  }
  @media screen and (max-width: 767px) and (orientation: landscape) {
    .l-nav__list {
      padding: 2.1333333333vw 3.4666666667vw 16vw 3.4666666667vw;
      min-height: calc(100dvh - 28vh);
    }
  }
  .l-nav__item:not(:last-child) a {
    padding-bottom: 1.125rem;
  }
  @media screen and (max-width: 767px) {
    .l-nav__item:not(:last-child) a {
      padding-bottom: 2.4vw;
    }
  }
  @media screen and (max-width: 767px) and (orientation: landscape) {
    .l-nav__item:not(:last-child) a {
      padding-bottom: 1.3333333333vh;
    }
  }
  .l-nav__link {
    display: block;
  }
}
@layer layout {}
@layer project {
  .p-holizontal {
    display: block;
    width: 100vw;
    height: 100vh;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    display: none;
    transition: 0.1s opacity;
    pointer-events: none;
  }
  @media (orientation: portrait) {
    .p-holizontal {
      display: block;
    }
  }
  .p-holizontal.is-hide {
    opacity: 0;
  }
  .p-holizontal img {
    position: absolute;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
    width: 80vw;
  }
}
@layer utilities {
  .u-hide {
    display: none;
  }
  .u-hidden {
    opacity: 0.01;
    will-change: opacity;
    transform: translateZ(0);
  }
  .is-visible {
    opacity: 1;
    visibility: visible;
  }
}
@layer utilities {
  .screen-reader-text,
  .u-screen-reader {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    word-wrap: normal;
  }
}