@charset "utf-8";

:root {
  --font_mincho:
    "TsukuMinPr6N-L", "TsukuMinPr6-L", "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN", "MS PMincho", serif;
  --font_kosugi_family: "Kosugi Maru", sans-serif;
  --font_kosugi_weight: 400;
  --font_kosugi_style: normal;
  --main_text_color: #333;

  /*メニューカテゴリーの色*/
  --dot_color: #d3d3d4;
  --concerns_color: #ee858c;
  --works_color: #6c9bd2;
  --locale_color: #d3a358;
  --green_color: #8ec54a;

  /*Works共通項目*/
  --works_border: solid 1px #231916;
  --works_div_images_height: 465px;
  --works_footer_position_top: 640px;
  --works_footer_padding_top: 40px;
  --works_footer_padding_bottom: 30px;
}

html {
  overflow-y: scroll;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  padding: 0px;
  margin: 0px auto;
  background-color: #fff;
}

body * {
  color: var(--main_text_color);
  font-family:
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,
    Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  border: none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  line-height: 1.5;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

header,
article,
footer,
section {
  width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6,
a {
  line-height: 0;
}

a {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  outline: none;
}

div#container {
  width: 100%;
  margin: 0px auto;
}

header {
  --gap: 7.5px;
  --font-size: 1.3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 10px;
  position: fixed;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.93);
  transition: box-shadow 0.4s ease;
  &.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  & div.dot {
    width: 100%;
    height: auto;
    overflow-x: hidden;
    &::after {
      content: var(--repeat-text);
      letter-spacing: var(--gap);
      color: var(--dot_color);
      font-size: var(--font-size);
    }
  }
  & div:first-of-type {
    /*反転*/
    transform: rotateY(180deg);
  }
  & nav {
    & > ul {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      list-style: none outside none;
      padding: 0 var(--gap);
      gap: var(--gap);
      & > li {
        &#concerns {
          & > a > span:first-of-type {
            color: var(--concerns_color);
          }
          & > a > span:last-of-type:hover {
            color: var(--concerns_color);
          }
        }
        &#works {
          & > a > span:first-of-type {
            color: var(--works_color);
          }
          & > a > span:last-of-type:hover {
            color: var(--works_color);
          }
        }
        &#locale {
          & > a > span:first-of-type {
            color: var(--locale_color);
          }
          & > a > span:last-of-type:hover {
            color: var(--locale_color);
          }
        }
        &#green {
          & > a > span:first-of-type {
            color: var(--green_color);
          }
          & > a > span:last-of-type:hover {
            color: var(--green_color);
          }
        }
        & > a {
          > span {
            &:first-of-type {
              font-size: var(--font-size);
            }
            &:last-of-type {
              color: var(--dot_color);
              font-size: calc(var(--font-size) - 0.2rem);
              font-weight: bold;
              letter-spacing: 1px;
              position: relative;
              top: -1px;
              &::before {
                content: "\02009";
              }
            }
          }
        }
      }
    }
  }
}
footer {
  &.common {
    & > div:first-of-type {
      text-align: center;
      font-size: 2.5rem;
      @media screen and (min-width: 660px) {
        padding: 10px 0px 25px;
      }
      @media screen and (max-width: 659px) {
        padding: 0px;
      }
    }
    & div#works_footer {
    }
    & > div:last-of-type {
      display: grid;
      @media screen and (min-width: 660px) {
        grid-template-columns: repeat(3, auto);
        grid-template-rows: auto;
        column-gap: 20px;
        justify-content: center;
        & > div {
          position: relative;
          left: -32px;
        }
      }
      @media screen and (max-width: 659px) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        /* row-gap: 10px; */
        justify-items: center;
        & > div {
          position: static;
        }
      }

      & > div.mail_tel {
        font-size: 3.2rem;
        font-family:
          "Noto Sans JP", sans-serif, "Segoe UI", "Helvetica Neue", Arial,
          "Hiragino Sans", "Meiryo";
        font-optical-sizing: auto;
        font-weight: 280;
        font-style: normal;
        /* 文字の間隔をわずかに調整して読みやすくする */
        letter-spacing: 0.03em;
      }
      & > div#moshikuha {
        display: grid;
        align-items: center;
        justify-items: center;
        background-color: #000;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        /* @media screen and (min-width: 660px) {
          position: relative;
          top: -23px;
        }
        @media screen and (max-width: 659px) {
          position: static;
        } */
        & > span {
          color: #fff;
          font-size: 1.2rem;
          font-weight: bold;
        }
      }
    }
  }
}

@media screen and (min-width: 820px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

strong {
  color: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-family: inherit;
}
section.page_header {
  padding: 75px 0px 30px;
  & > h2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    @media screen and (min-width: 340px) {
      font-size: 3rem;
    }
    @media screen and (max-width: 339px) {
      font-size: 2.5rem;
    }
    & > span {
      line-height: 1.2;
    }
  }
}