/* 全体設定 */
@font-face {
  font-family: NotoSansJP;
  src: url("../font/NotoSansJP-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: NotoSerifJP;
  src: url("../font/NotoSerifJP-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}

:root {
  scroll-behavior: smooth;
  scroll-padding-top: calc(80px + 1rem);
  font-size: 14px;
  --white: #ffffff;
  --black: #333333;
  --main: #55a544;
  --sub: #c2c837;
  --sub2: #F8F9E7;
  --gray: #cccccc;

  @media(min-width: 576px) {
    font-size: 16px;
  }
}

body > div {
  width: 100%;
  container-type: inline-size;
}

body > div > div {
  width: 100cqi;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--white);
  color: var(--black);
  font-weight: normal;
  font-style: normal;
  font-family: NotoSansJP;
  text-decoration: none;
  text-align: start;
  line-height: 1.2;
  font-size: 1rem;

  * {
    color: var(--color, inherit);
    font-size: var(--fs, 1em);
    font-weight: var(--fw, inherit);
    font-style: inherit;
    font-family: inherit;
    text-decoration: inherit;
    text-align: inherit;
    line-height: var(--lh, inherit);
    margin: 0;
    padding: 0;
  }

  a {
    display: block;
  }

  a:hover {
    color: var(--color, inherit);
  }

  ul,
  ol {
    list-style: none;
  }

  button {
    display: block;
    border: none;
    background-image: none;
  }

  .wbr {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: keep-all;
  }

  .nobr {
    white-space: nowrap;
  }

  .sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
  }

  .all-revert {
    all: revert !important;
  }

  .serif,
  .title,
  .title-c {
    font-family: NotoSerifJP;
  }

  .title,
  .title-c {
    font-size: 1.5rem;
  }

  .title-c {
    text-align: center;
  }

  .dropshadow {
    filter: drop-shadow(1px 1px 5px #0005);
  }

  .imglist {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);

    @media(min-width: 768px) {
      gap: 2rem;
    }

    @media(min-width: 992px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .imglist_item {
    div {
      width: 100%;
      height: auto;
      aspect-ratio: 1/1;
      background-color: var(--gray);
      position: relative;
    }

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-position: center;
      object-fit: cover;
    }

    h2,
    h3,
    p {
      text-align: center;
      padding: 1rem 0.5rem;

      @media(min-width: 768px) {
        padding-block: 2rem;
      }
    }
  }

  a.imglist_item {
    @media(any-hover:hover) {
      &:hover {
        img {
          filter: brightness(1.2);
        }

        h2,
        h3,
        p {
          color: var(--main);
        }
      }
    }
  }

  .columnlist {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem 1rem;

    @media(min-width: 576px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media(min-width: 768px) {
      gap: 2rem;
    }

    @media(min-width: 992px) {
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem;
    }
  }

  .columnlist:has(.columnlist_item:nth-child(4)) .columnlist_item {
    border-bottom: solid 2px var(--gray);
  }

  .columnlist_item {
    &:has(+&) {
      border-bottom: solid 2px var(--gray);

      @media(min-width: 992px) {
        border-bottom: none;
      }
    }

    @media(any-hover:hover) {
      &:hover {
        img {
          filter: brightness(1.2);
        }

        h2,
        h3,
        time {
          color: var(--main);
        }
      }
    }

    div {
      width: 100%;
      height: auto;
      aspect-ratio: 4/3;
      background-color: var(--gray);
      position: relative;
    }

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-position: center;
      object-fit: cover;
    }

    h2,
    h3 {
      padding: 2rem 0.5rem 0;
    }

    time {
      display: flex;
      justify-content: end;
      align-items: center;
      padding: 0.5rem 0.5rem 2rem;
    }
  }

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

  .max-800 {
    max-width: 800px;
    margin-inline: auto;
  }

  .max-1000 {
    max-width: 1000px;
    margin-inline: auto;
  }

  .max-1200 {
    max-width: 1200px;
    margin-inline: auto;
  }

  .pi-auto {
    padding-inline: 1rem;

    @media(min-width: 768px) {
      padding-inline: 2rem;
    }
  }

  .m {
    --m: 0;
    margin: var(--m);
  }

  .my {
    --my: 0;
    margin-top: var(--my);
    margin-bottom: var(--my);
  }

  .mx {
    --mx: 0;
    margin-right: var(--mx);
    margin-left: var(--mx);
  }

  .mt {
    --mt: 0;
    margin-top: var(--mt);
  }

  .mr {
    --mr: 0;
    margin-right: var(--mr);
  }

  .mb {
    --mb: 0;
    margin-bottom: var(--mb);
  }

  .ml {
    --ml: 0;
    margin-left: var(--ml);
  }

  .p {
    --p: 0;
    padding: var(--p);
  }

  .py {
    --py: 0;
    padding-top: var(--py);
    padding-bottom: var(--py);
  }

  .px {
    --px: 0;
    padding-right: var(--px);
    padding-left: var(--px);
  }

  .pt {
    --pt: 0;
    padding-top: var(--pt);
  }

  .pr {
    --pr: 0;
    padding-right: var(--pr);
  }

  .pb {
    --pb: 0;
    padding-bottom: var(--pb);
  }

  .pl {
    --pl: 0;
    padding-left: var(--pl);
  }

  .mi {
    --mi: 0;
    margin-inline: var(--mi);
  }

  .mb {
    --mb: 0;
    margin-block: var(--mb);
  }

  .mis {
    --mis: 0;
    margin-inline-start: var(--mis);
  }

  .mie {
    --mie: 0;
    margin-inline-end: var(--mie);
  }

  .mbs {
    --mbs: 0;
    margin-block-start: var(--mbs);
  }

  .mbe {
    --mbe: 0;
    margin-block-end: var(--mbe);
  }

  .pi {
    --pi: 0;
    padding-inline: var(--pi);
  }

  .pb {
    --pb: 0;
    padding-block: var(--pb);
  }

  .pis {
    --pis: 0;
    padding-inline-start: var(--pis);
  }

  .pie {
    --pie: 0;
    padding-inline-end: var(--pie);
  }

  .pbs {
    --pbs: 0;
    padding-block-start: var(--pbs);
  }

  .pbe {
    --pbe: 0;
    padding-block-end: var(--pbe);
  }
}

/* header */

#header {
  position: sticky;
  top: 0;
  background-color: var(--white);
  z-index: 2;
}

#header_content {
  display: grid;
  grid-template-rows: 80px;
  grid-template-columns: 100px 1fr;

  @media(min-width: 576px) {
    grid-template-columns: 150px 1fr;
  }
}

#header_logo {
  position: relative;
  width: 100%;

  a {
    position: absolute;
    width: 100%;
    aspect-ratio: 150/160;
    inset: 0;
    display: grid;
    place-content: center;
    background-color: var(--white);
    container-type: inline-size;

    @media(any-hover:hover) {
      &:hover {
        background-image: linear-gradient(to bottom, var(--sub) 2px, #fff0 0, #fff0 calc(100% - 2px), var(--sub) 0), linear-gradient(to right, var(--sub) 2px, #fff0 0, #fff0 calc(100% - 2px), var(--sub) 0);
      }
    }
  }

  h1,
  div {
    width: 82cqi;
    height: auto;
    aspect-ratio: 123.07/107.6;
    position: relative;
  }

  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

#header_items {
  display: flex;
  justify-content: end;
  align-items: center;
}

#header_links {
  display: none;

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

  > li {
    display: block;
    height: 100%;
    position: relative;
  }

  a {
    padding-inline: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;

    @media(any-hover:hover) {
      &:hover {
        background-color: var(--sub);
      }
    }
  }

  > li:has(a:hover) > ul {
    @media(any-hover:hover) {
      clip-path: inset(0 0 0);
    }
  }

  ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: fit-content;
    clip-path: inset(0 0 100%);
    transition-property: clip-path;
    transition-duration: calc(var(--menu-num) * 0.1s);
    transition-timing-function: ease;

    li {
      border-top: solid 1px var(--main);
      background-color: white;

      a {
        padding-block: 0.5em;
        white-space: nowrap;
      }
    }
  }
}

.tel {
  padding: 0.5rem 1.5rem;
  background-color: var(--main);
  color: var(--white);

  @media(any-hover:hover) {
    &:hover {
      background-color: var(--sub);
      color: var(--black);
    }
  }

  dl {
    display: contents;
  }

  dt {
    margin-right: 0.5rem;
  }
}

#header_tel {
  display: flex;

  @media(min-width: 1200px) {
    display: none;
  }
}

#header_menubtn {
  margin-left: 0.75rem;
  width: 55px;
  aspect-ratio: 1/1;
  background-color: var(--white);
  container-type: size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  @media(min-width: 1200px) {
    display: none;
  }

  @media(any-hover:hover) {
    &:hover {
      --main: var(--sub);
    }
  }

  div {
    width: 75cqi;
    height: 10cqb;
    background-color: var(--main);
    transition-property: opacity;
    transition-duration: 0.5s;

    &:nth-child(n + 1):nth-child(n - 3) {
      opacity: 1;
    }

    &:nth-child(2) {
      margin-block: 17.5cqb;
    }

    &:nth-child(n + 4):nth-child(n - 5) {
      position: absolute;
      opacity: 0;
    }

    &:nth-child(4) {
      rotate: 45deg;
    }

    &:nth-child(5) {
      rotate: -45deg;
    }
  }

  &.open div {
    &:nth-child(n + 1):nth-child(n - 3) {
      opacity: 0;
    }

    &:nth-child(n + 4):nth-child(n - 5) {
      opacity: 1;
    }
  }
}

#sidemenu {
  position: sticky;
  top: 90px;
  left: 0;
  width: 100%;
  height: calc(100svh - 90px - 4.5rem);
  margin-top: calc(-100svh + 90px + 4.5rem);
  z-index: 1;
  pointer-events: none;
  grid-template-rows: auto 1fr;
  gap: 10px;

  display: none;

  @media(min-width: 768px) {
    display: grid;
  }


  > div {
    display: flex;
    justify-content: end;
    align-items: center;
  }

  a {
    background-color: var(--main);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 0.75rem 2.5rem;
    border-radius: 1.25rem 0 0 1.25rem;
    color: var(--white);
    pointer-events: auto;

    @media(any-hover:hover) {
      &:hover {
        background-color: var(--sub);
        color: var(--black);
      }
    }
  }

  svg {
    width: 2.25rem;
    height: auto;

    path {
      fill: currentColor;
    }
  }

  #sidemenu_tel a {
    flex-direction: row;
    padding-block: 0.75rem;
    display: none;

    @media(min-width: 1200px) {
      display: flex;
    }

    svg {
      margin-right: 0.5rem;
    }

    span {
      display: block;
    }
  }

  #sidemenu_towebform p {
    margin-top: 0.5rem;
    writing-mode: vertical-rl;
  }
}

#totop {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  margin-top: -100svh;
  z-index: 1;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: end;

  a {
    text-decoration: none;
  }

  * {
    margin: 0;
    padding: 0;
  }

  #totop1 {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    flex-shrink: 0;
    width: 3.5rem;
    height: auto;
    aspect-ratio: 1/1;
    background-color: var(--main);
    color: var(--white);
    border-radius: 100lvmax;
    display: grid;
    place-content: center;
    font-size: 1.5rem;
    pointer-events: auto;

    @media(any-hover:hover) {
      &:hover {
        background-color: var(--sub);
        color: var(--black);
      }
    }
  }

  #totop2 {
    position: absolute;
    bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.5rem;
    background-color: var(--main);
    color: var(--white);
    padding-inline: 1.5rem;
    border-radius: 1.25rem;
    pointer-events: auto;

    @media(min-width: 768px) {
      display: none;
    }

    @media(any-hover:hover) {
      &:hover {
        background-color: var(--sub);
        color: var(--black);
      }
    }

    svg {
      fill: currentColor;
      height: 1.5rem;
      width: auto;
      margin-right: 0.5rem;
    }
  }
}

#foldmenu {
  width: calc(100% + 5px);
  height: 100lvh;
  background-color: var(--white);
  position: sticky;
  margin-top: -100lvh;
  top: 0;
  left: 0;
  z-index: 1;
  padding-top: calc(160px + 1rem);
  padding-bottom: calc(100lvh - 100svh + 1rem);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  translate: 100%;
  transition-property: translate;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  border-left: solid 5px #0001;
}

:has(#header_menubtn.open) #foldmenu {
  translate: -5px;
}

#foldmenu_links {
  display: contents;

  li {
    display: contents;
  }

  a,
  button {
    padding-block: 0.75rem;
    width: 100%;
    text-align: center;
    background-color: #fff0;

    @media(any-hover:hover) {
      &:hover {
        background-color: var(--sub);
        color: var(--black);
      }
    }
  }

  > li:has(.active) > ul {
    translate: -100%;
  }

  ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100lvh;
    padding-top: calc(160px + 1rem);
    padding-bottom: calc(100lvh - 100svh + 1rem);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    display: flex;
    flex-direction: column;
    transition-property: translate;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    background-color: white;
  }
}

/* front */

#front_video {
  display: flex;
  justify-content: center;

  div {
    width: 100%;
    height: fit-content;
    max-width: 1600px;
    container-type: inline-size;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  video,
  img {
    width: 100cqi;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 3cqi;
    background-color: var(--gray);
    position: relative;
  }

  p {
    font-size: clamp(1.25rem, 3cqi, 2.5rem);
    position: absolute;
    text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white;
    text-align: center;
  }
}

#front_concept {
  div {
    display: flex;
    gap: 2rem;
    flex-direction: column;

    @media(min-width: 768px) {
      gap: 3rem;
      flex-direction: row;
    }
  }

  h2 {
    flex-shrink: 0;
    text-align: center;

    @media(min-width: 768px) {
      text-align: start;
      margin-top: calc(-0.1em + 0.75rem);
    }
  }

  p {
    line-height: 2.5;
  }
}

#front_bnr > div > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;

  @media(min-width: 576px) {
    grid-template-columns: 1fr 1fr;
  }

  @media(min-width: 768px) {
    gap: 2rem;
  }

  a {
    @media(any-hover:hover) {
      &:hover {
        filter: brightness(1.1);
      }
    }
  }

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

.front_link {
  display: flex;
  justify-content: end;
  align-items: start;

  a {
    display: flex;
    align-items: center;
    justify-content: center;

    @media(any-hover:hover) {
      &:hover {
        p {
          color: var(--main);
        }

        div {
          color: var(--black);
          background-color: var(--sub);
        }
      }
    }
  }

  p {
    padding-inline: 0.75rem;
  }

  div {
    flex-shrink: 0;
    width: 3.5rem;
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--main);
    color: var(--white);
    border-radius: 100lvmax;
    display: grid;
    place-content: center;
    font-size: 1.5rem;
    pointer-events: auto;
  }
}

/* page */

#page_header {
  width: 100%;
  height: 240px;
  background-color: var(--gray);
  position: relative;

  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
  }
}

#page_title {
  font-family: NotoSerifJP;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;

  b {
    font-size: 1.75rem;

    @media(min-width: 576px) {
      font-size: 2rem;
    }
  }

  span {
    margin-top: 0.25rem;
    font-size: 1.25rem;
  }
}

#page_pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;

  > * {
    padding: 0.5rem 0.75rem;
    border: solid 2px var(--main);
    border-radius: 0.5rem;
  }

  .current {
    background-color: var(--main);
    color: var(--white);
  }

  a {
    @media(any-hover:hover) {
      &:hover {
        background-color: var(--sub);
      }
    }
  }

}

#page_postimg {
  width: 100%;
  height: auto;
}

#why-choose-us {

  b,
  em {
    font-weight: bold;
  }
}

#corporate-clients #cc_nav {
  display: grid;
  box-shadow: inset 0px 3px 6px #00000029, 3px 3px 5px #00000029;
  place-items: center;
  grid-template-columns: 1fr;

  @media(min-width: 1200px) {
    grid-template-columns: 1fr 3px 1fr 3px 1fr 3px 1fr 3px 1fr;
  }

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 2rem;
    width: 100%;
    --c: var(--main);

    @media(any-hover:hover) {
      &:hover {
        background-color: var(--sub);
        --c: var(--black);
      }
    }
  }

  svg {
    margin-right: 0.5rem;

    polygon {
      fill: var(--c);
    }
  }

  div {
    background-color: #00000029;
    width: min(calc(100% - 2rem), 30ic);
    height: 1.5px;

    @media(min-width: 1200px) {
      background-color: var(--main);
      max-width: none;
      width: 3px;
      height: calc(100% - 2rem);
    }
  }
}

#corporate-clients #cc_reason {
  background-color: var(--sub2);
  padding-block: 3rem;

  div:has(>a) {
    position: relative;
    margin-bottom: 5px;
    margin-inline: auto;
    font-size: 1.25rem;
    width: 100%;
    max-width: 20ic;

    a,
    div {
      border-radius: 0.75rem;
    }

    a {
      position: relative;
      width: 100%;
      color: var(--white);
      background-color: var(--main);
      padding: 0.75rem 2ic;
      transition-property: translate;
      transition-duration: 0.25s;
      transition-timing-function: ease;
      text-align: center;

      @media(any-hover:hover) {
        &:hover {
          translate: 0 5px;
        }
      }
    }

    div {
      position: absolute;
      inset: 0;
      background-color: #446035;
      translate: 0 5px;
    }
  }
}

#corporate-clients #cc_service {
  h3 {
    background-color: var(--sub2);
    font-size: 1.25rem;
    font-family: NotoSerifJP;
    width: 100%;
    max-width: 25ic;
    text-align: center;
    margin-inline: auto;
    padding: 0.5rem;
  }
}

#corporate-clients .cc_service_box {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  flex-direction: column;

  @media(min-width: 992px) {
    flex-direction: row;

    &:nth-child(2n of &) {
      flex-direction: row-reverse;
    }
  }

  dl {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
  }

  dt,
  dd {
    padding: 0.5rem;
    border-bottom: solid 1px var(--main);
  }

  dt {
    padding-right: 1rem;
    font-size: 1.125em;
    font-weight: bold;
  }

  img {
    aspect-ratio: 331/192;
    object-fit: cover;
    width: 100%;

    @media(min-width: 992px) {
      width: 300px;
    }
  }
}

#corporate-clients #cc_flow {
  > div {
    margin-inline: auto;
    max-width: 600px;
  }

  h3 {
    font-size: 1.25rem;
    font-family: NotoSerifJP;
    margin-top: 2rem;
  }

  p {
    margin-top: 1rem;
  }
}

#corporate-clients #cc_flow_contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;

  @media(min-width: 576px) {
    gap: 2rem;
  }

  a {
    background-color: var(--main);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding-block: 1rem;

    @media(any-hover:hover) {
      &:hover {
        background-color: var(--sub);
        color: var(--black);
      }
    }
  }

  svg {
    max-width: 2rem;
    max-height: 2rem;
    height: auto;
    width: auto;

    path {
      fill: currentColor;
    }
  }
}

#corporate-clients #cc_faq {
  background-color: var(--sub2);
}

#corporate-clients .cc_faq {
  background-color: var(--white);
  padding-block: 1.5rem;

  & + & {
    margin-top: 2rem;
  }

  h3 {
    font-size: 1.25rem;
    color: var(--main);
    border-left: solid 0.75rem;
    padding-inline: 0.75rem 1.5rem;
    padding-block: 0.5rem;
  }

  p {
    padding-top: 0.5rem;
    padding-inline: 1.5rem;
  }
}

#delivery-service {
  p {
    line-height: 1.5;
  }

  h3 {
    font-size: 1.25rem;
    font-family: NotoSerifJP;
    text-align: center;
  }

  :not(h1) > b {
    font-weight: bold;
  }
}

#company {
  line-height: 1.5;

  ol {
    counter-set: ol-counter;

    li {
      counter-increment: ol-counter;
      display: flex;
      margin-block: 0.5rem;

      &::before {
        content: counter(ol-counter) ".";
        margin-right: 0.25rem;
        flex-shrink: 0;
      }
    }
  }

  ul {
    &.ul-row {
      display: flex;
      flex-wrap: wrap;
    }

    li {
      margin-right: 1rem;
      margin-bottom: 0.5rem;
      display: flex;

      &::before {
        content: "";
        display: block;
        width: 1lh;
        height: 1lh;
        background-color: var(--main);
        clip-path: circle(0.15lh at 50% 50%);
        flex-shrink: 0;
      }
    }

    ul {
      padding-left: 0.5rem;

      li {
        &::before {
          --r: 0.2lh;
          --x: calc(var(--r) * cos(60deg));
          --y: calc(var(--r) * sin(60deg));
          clip-path: polygon(calc(50% - var(--x)) calc(50% - var(--y)),
              calc(50% + var(--r)) 50%,
              calc(50% - var(--x)) calc(50% + var(--y)));
        }
      }
    }
  }

  table {
    width: 100%;
    border-bottom: solid 1px var(--gray);
    border-right: solid 1px var(--gray);

    th,
    td {
      padding: 0.5rem;
      border-top: solid 1px var(--gray);
      border-left: solid 1px var(--gray);
    }

    th {
      text-align: center;
      background-color: var(--sub2);
    }
  }

  h3 {
    font-family: NotoSerifJP;
    font-size: 1.25rem;
  }

  iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    margin-top: 1rem;
  }
}

#privacy-policy {
  p {
    margin-top: 1rem;
  }

  h2 {
    margin-top: 2rem;
  }
}

.editor {
  color: inherit;
}

.snow-monkey-form {
  position: relative;
  z-index: 0;
}

#order-form_menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em;
}

#order-form_menu img {
  width: 100%;
  height: atuo;
  aspect-ratio: 1/1;
  object-fit: contain;
  object-position: center;
}

#order-form_menu > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#order-form .snow-monkey-form {
  h2 {
    font-family: NotoSerifJP;
    font-size: 1.5rem;
    text-align: center;
    margin-block: 2rem;
  }

  h2 + .smf-item {
    border-top: 1px solid #ddd;
  }

  .smf-item + p {
    margin-block: 2rem;
    line-height: 1.5;
  }
}

.smf-item__label__text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: start;
  align-items: center;
}

.smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
  content: '必須';
  color: #fff;
  width: 40px;
  height: 22px;
  display: grid;
  place-items: center;
  background: #DD3234;
  border-radius: 4px;
  font-size: 12px;
}

/* footer */

#info_list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);

  @media(min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  @media(min-width: 1200px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.info_list_item {

  > div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 1rem;

    div {
      width: 0.1em;
      height: 1.2em;
      background-color: var(--black);

      &:nth-child(1 of div) {
        rotate: -30deg;
        margin-right: 0.5rem;
      }

      &:nth-child(2 of div) {
        rotate: 30deg;
        margin-left: 0.5rem;
      }
    }
  }

  a {
    background-color: var(--main);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.5rem;
    gap: 0.75rem;

    @media(any-hover:hover) {
      &:hover {
        background-color: var(--sub);
        color: var(--black);
      }
    }
  }

  svg {
    max-width: 2rem;
    max-height: 2rem;
    height: auto;
    width: auto;

    path {
      fill: currentColor;
    }
  }

  p {
    padding-block: 1rem;
    text-align: center;

    &:has(+p) {
      padding-block-end: 0;
    }

    & + p {
      padding-block-start: 0.25rem;
    }
  }
}

#footer {
  background-color: var(--main);
  color: var(--white);
}

#footer_logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  a {
    width: fit-content;
    height: fit-content;

    @media(any-hover:hover) {
      &:hover {
        background-color: var(--sub);
      }
    }
  }

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

#footer_address {
  text-align: center;
  padding-top: 1.5rem;

  @media(any-hover:hover) {
    a:hover {
      color: var(--black);
    }
  }
}

#footer_pages {
  display: grid;
  padding-block: 5rem;
  gap: 2rem 0.5rem;
  grid-template-columns: repeat(1, 1fr);
  justify-items: center;

  @media(min-width: 576px) {
    grid-template-columns: repeat(2, 1fr);
    justify-items: start;
  }

  @media(min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media(min-width: 992px) {
    grid-template-columns: repeat(4, 1fr);
  }

  > div {
    width: fit-content;

    @media(min-width: 576px) {
      display: contents;
    }

    > div {
      width: fit-content;

      @media(min-width: 576px) {
        width: auto;
      }

      & + div {
        margin-top: 2rem;

        @media(min-width: 576px) {
          margin-top: 0;
        }
      }
    }
  }

  b {
    font-size: 1.25rem;
  }

  ul {
    margin-top: 1rem;
    padding-left: 1ic;
  }

  li :is(a, p) {
    padding-block: 0.25rem;
  }

  a,
  p {
    width: fit-content;
  }

  a {
    @media(any-hover:hover) {
      &:hover {
        color: var(--black);
      }
    }
  }
}

#footer_hr {
  border-top: solid 2px var(--white);
}

#footer_small {
  display: block;
  text-align: center;
  padding-top: 2rem;
}

/* others */

.grecaptcha-badge {
  bottom: 5.5rem !important;
  display: none !important;
}

:has(#order-form, #order-form2) .grecaptcha-badge {
  display: block !important;
}