@charset "UTF-8";
*{
  --tc: #0FB48D;
  --ff-2: Cormorant Infant;
  --header-height: 100px;

  box-sizing: border-box;
}
html{
  scrollbar-gutter: auto;
}
body{
  --header-height: 100px;
  width: 100%;
  color: #333;
  background: #F0EFE2;

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
}
a{
  text-decoration: none;
}
img,svg{
  max-width: 100%;
  height: auto;
}
address{
  font-style: normal;
}
.jcc{
  display: flex;
  justify-content: center;
  width: 100%;
}
.jcr{
  display: flex;
  justify-content: right;
  width: 100%;
}
.btn{
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 188px;
  padding: 12px 28px;

  color: #fff;
  background: var(--tc);
  transition: 0.3s all linear;
  user-select: none;
  
  -webkit-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);

  picture{
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
  }
}

/*header*/
header{
  position: fixed;
  z-index: 100;

  width: 100%;
  height: var(--header-height);

  background: #F0EFE2;
  border-bottom: solid 2px #333;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

  div.header-inner{
    position: relative;

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

    width: 100%;
    height: 100%;
  }
  label#humMenu{
    position: absolute;
    right: 16px;

    text-align: center;
    font-weight: 700;

    .hum-wrap{
      position: relative;
      display: inline-block;
      width: 50px;
      height: 29px;
      margin-bottom: 4px;

      span{
        position: absolute;

        display: inline-block;
        width: 50px;
        height: 2px;

        background: #333;

        transition: 0.3s all linear;
      }
      span.top{
        top: 0;
        left: 0;
      }
      span.middle{
        top: 50%;
        transform: translateY(-50%);
        left: 0;
      }
      span.bottom{
        bottom: 0;
        left: 0;
      }
    }
  }
}
body:has(#gmenu-cb:checked) header label#humMenu{
  .hum-wrap{
    span.top{
      top: 50%;
      transform: translateY(-50%);

      transform: rotate(30deg);
    }
    span.middle{
      background: transparent;
    }
    span.bottom{
      top: 50%;
      transform: translateY(-50%);

      transform: rotate(-30deg);
    }
  }
}
main{
  padding-top: var(--header-height);
}

footer{
  width: 100%;
  padding: 0 24px;
  padding-top: 64px;
  padding-bottom: 16px;

  color: #fff;
  
  background: #623126;
  border-radius: 40px 40px 0 0;
}
footer .footer-content{
  width: min(1120px,100%);
  margin-inline: auto;
}
footer .footer-top{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
  margin-bottom: 112px;

  .logo-wrap{
    margin-bottom: 16px;
  }
  p.company-name{
    margin-bottom: 12px;

    font-weight: 700;
  }
  address{
    text-align: center;

    p.address{
      margin-bottom: 4px;
    }
    a{
      display: inline-block;

      font-size: 36px;
      line-height: 1;
      color: #fff;
    }
  }
}
footer nav{
  margin-bottom: 32px;

  ul.nav-list{
    display: flex;
    justify-content: space-between;

    li a{
      display: inline-block;
      color: #fff;
    }
    li a.list-heading{
      font-weight: 700;
    }
    li a.list-branch{
      position: relative;
      padding-left: 1em;
      margin-top: 4px;
    }
    li a.list-branch::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0.4em;

      display: inline-block;
      width: 3px;
      height: 3px;

      background: #fff;
      border-radius: 50%;
    }
    li a.list-branch:hover::before{
      /*check*/
      width: 8px;
      height: 8px;

      transition: 0.3s;
    }
  }
}
footer p.copyright{
  margin-bottom: 8px;

  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
/*gmenu*/
#gmenu-cb{
  display: none;
}
div#gmenu{
  display: none;
}
body:has(#gmenu-cb:checked){
  overflow: hidden;
}
#gmenu-cb:checked ~ div#gmenu{
  position: fixed;
  z-index: 95;

  display: block;
  width: 100%;
  height: 100dvh;
}
div#gmenu-inner{
  width: 100%;
  min-height: 100dvh;

  padding: 20px 5.5vw;
  padding-top: calc(20px + var(--header-height));
  background: #fff;
}
div#gmenu-inner nav{
  ul.gmenu-list,
  ul.gmenu-list li.gmenu-item{
    width: 100%;
    line-height: 1;
  }
  ul.gmenu-list{
    margin-bottom: 3dvh;
  }
  ul.gmenu-list li.gmenu-item:nth-child(1){
    border-top: solid 1px var(--tc);
  }
  ul.gmenu-list li.gmenu-item{
    font-size: 2.5dvh;
    font-weight: 700;

    border-bottom: solid 1px var(--tc);

    >a{
      display: block;
      padding: 3vh 0;
      text-align: center;
    }
  }
  .nav-works-list-wrap{
    display: block;
    padding: 2.5dvh 0;

    text-align: center;

    >p{
      padding-bottom: 2.5dvh;
    }
  }
  .nav-works-list{
    font-size: 2dvh;
    font-weight: 400;
    text-align: left;

    li.nav-works-list-item a{
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 4px;
      padding-left: 2.8vw;
    }
  }
  .nav-works-list>*+*{
    margin-block-start: 3.3dvh;
  }
}
div#gmenu-inner #gmenu-btn{
  /*お問合せ*/
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  width: 50%;
  margin-inline: auto;
  margin-bottom: 3dvh;
  padding: 1.8dvh 0;

  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: 1;

  background: #333;
}
div#gmenu-inner #gmenu-tel{
  display: flex;
  flex-direction: column;
  align-items: center;

  line-height: 1;

  a{
    display: inline-block;
    margin-bottom: 1dvh;

    font-size: 7vw;
    color: var(--tc);
    font-weight: 700;
  }
  span{
    display: block;

    font-size: 3vw;
  }
}
/*single.php*/
#single .ariticle{
  width: min(1120px,100%);
  min-height: 48rem;
  padding: 64px 16px;
  margin-inline: auto;

  .title{
    padding-bottom: 8px;
    margin-bottom: 8px;
  
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
  
    border-bottom: solid 1px #B5B5B5;
  }
  time{
    display: block;
    margin-bottom: 16px;
    font-size: 15px;
    color: #B5B5B5;
  }
  .content{
    margin-bottom: 120px;
  
    line-height: 1.6;
    white-space: pre-wrap;
  }
}

div.SC-contact{
  /*--お問合せショートコード--*/
  width: min(1120px, 100%);
  padding: 32px 8% 48px;
  margin-bottom: 64px;
  margin-inline: auto;

  color: #fff;

  background: url(../img/SC-contact-2x.jpg);
  border-radius: 24px;

  .heading-wrap{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 48px;

    .heading-ENG{
      padding-right: 0;

      font-size: 100px;
      line-height: 1;
    }
  }
  :is(.heading-ENG,.blockToCall p,.blockToCall a){
    text-shadow: 0px 0px 10px #7B534A;
  }
  div.content{
    display: flex;
    justify-content: space-between;
    align-items: center;

    .blockToForm{
      display: flex;
      flex-direction: column;
      align-items: center;

      font-size: 22px;
      font-weight: 700;

      p{
        margin-bottom: 24px;
      }
    }
    .blockToCall{
      display: flex;
      flex-direction: column;
      align-items: center;

      p.heading{
        font-size: 22px;
        font-weight: 700;
      }
      a{
        display: inline-block;
        font-size: 36px;

        color: #fff;
      }
    }
  }
}
div.link-animated-wrap{
  --aniamted-pr: 16px;
  padding-right: calc(var(--aniamted-pr) + 8px);

  a.link-animated{
    position: relative;
  
    display: inline-block;
    padding-bottom: 4px;
    padding-right: 1em;
  
    font-size: 42px;
    font-weight: 500;
  
    border-bottom: solid 2px #333;
  }
  a.link-animated::before,
  a.link-animated::after{
    content: '';
    position: absolute;
    z-index: 2;
  
    height: 2px;
  
    background: #333;
    transition: 0.3s all linear;
  }
  a.link-animated::before{
    right: 0;
    bottom: -2px;
  
    display: inline-block;
    width: var(--aniamted-pr);
  }
  a.link-animated::after{
    right: calc(calc(2px * cos(45deg)) * -1);
    bottom: calc(calc(var(--aniamted-pr) * cos(45deg) / 2) - 2px);
  
    display: inline-block;
    width: var(--aniamted-pr);
  
    transform: rotate(45deg);
  }
}
@media (min-width : 1200px){
  div.link-animated-wrap{
    a.link-animated:hover::before{
      right: calc(var(--aniamted-pr) * -1);
    
      transition: 0.3s all linear;
    }
    a.link-animated:hover::after{
      right: calc(calc(calc(2px * cos(45deg)) * -1) + calc(var(--aniamted-pr) * -1));
    
      transition: 0.3s all linear;
    }
  }
}
@media (max-width : 1200px){
}
@media (max-width : 599px){
}