@charset "UTF-8";
*{
  --tc: #623126;

  --header-height: 100px;

  --zindex-header: 100;
  --zindex-gmenu: 1000;
  --zindex-humberger: 1001;

  --fs-page-heading: clamp(14px,1.6vw,20px);
  --fs-page-heading-ENG: clamp(20px,8vw,90px);

  --ff-Copperplate: copperplate, serif;

  box-sizing: border-box;
}
html{
  scrollbar-gutter: auto;
}
body{
  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: var(--zindex-header);

  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: fixed;
  z-index: var(--zindex-humberger);
  top: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--header-height);
  height: var(--header-height);

  text-align: center;
  font-family: var(--ff-Copperplate);

  p.gmenu-before{
    display: inline-block;
  }
  p.gmenu-after{
    display: none;
  }
  .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) label#humMenu{
  p.gmenu-before{
    display: none;
  }
  p.gmenu-after{
    display: inline-block;
  }
  .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 16px;
  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;
      font-family: var(--ff-Copperplate);
      font-weight: 700;
      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-family: "montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}
/*gmenu*/
#gmenu-cb{
  display: none;
}
div#gmenu{
  display: none;

  background: transparent;
  transition: 0.3s all linear;
}
body:has(#gmenu-cb:checked){
  overflow: hidden;
}
#gmenu-cb:checked ~ div#gmenu{
  position: fixed;
  z-index: var(--zindex-gmenu);

  display: block;
  width: 100%;
  height: 100dvh;

  background: #333;
  transition: 0.3s all linear;

  @starting-style {
    background: transparent;
  }
}
div#gmenu-inner{
  display: none;

  width: 50%;
  min-height: 100dvh;
  margin-left: auto;
}
body:has(#gmenu-cb:checked) div#gmenu-inner{
  display: flex;
  flex-direction: column;
  justify-content: center;

  background: #F0EFE2;

  transition: 0.5s 0.3s all linear;

  @starting-style {
    background: transparent;
  }
  
  >*{
    width: 400px;
    margin-inline: auto;
  }
  .gmenu-logo{
    margin-bottom: 96px;
  }
}
div#gmenu-inner nav{
  display: none;
  grid-template-rows: 0fr;

  ul{
    overflow: hidden;
    opacity: 0;

    >*+*{
      margin-block-start: 32px;
    }
  }
}
body:has(#gmenu-cb:checked) div#gmenu-inner nav{
  display: grid;
  grid-template-rows: 1fr;

  transition: 0.45s 1s all ease-in;

  @starting-style {
    grid-template-rows: 0fr;
  }
  ul{
    animation: anime-gmNav 0.5s ease-in forwards;
    animation-delay: 1.75s;
  }
}
@keyframes anime-gmNav{
  0%{
    opacity: 0;
    pointer-events: none;
  }
  100%{
    opacity: 1;
    pointer-events: all;
  }
}
div#gmenu-inner #gmenu-btn{
  /*お問合せ*/
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  width: 180px;
  min-width: 180px;
  padding: 16px;

  color: #fff;
  line-height: 1;

  background: var(--tc);
}
/*single.php*/
body:has(#single) main{
  padding-top: var(--header-height);
  background: #F0EFE2;
}
body:has(#single) div#page-eyecatch{
  position: relative;

  width: 100%;
  padding: 40px 16px;

  picture{
    img{
      width: 100%;
      max-width: unset;
      border-radius: 16px;
    }
  }
  .h2-wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    color: #fff;

    .h2-ENG{
      font-size: min(40px,7vw);
      font-family: var(--ff-Copperplate);
      text-align: center;
    }
    h2{
      font-size: min(18px,3.6vw);
      text-align: center;
    }
  }
}
#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;

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

  color: #fff;

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

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

    .heading-ENG{
      padding-right: 0;

      font-size: var(--fs-page-heading-ENG);
      font-family: var(--ff-Copperplate);
      font-weight: 700;
      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;
        font-family: var(--ff-Copperplate);
        font-weight: 700;

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

  .link-animated{
    position: relative;
  
    display: inline-block;
    padding-bottom: 4px;
    padding-right: 1em;
  
    font-size: min(42px,7.5vw);
    font-family: var(--ff-Copperplate);
    font-weight: 700;
  
    border-bottom: solid 2px #333;
  }
  .link-animated::before,
  .link-animated::after{
    content: '';
    position: absolute;
    z-index: 2;
  
    height: 2px;
  
    background: #333;
    transition: 0.3s all linear;
  }
  .link-animated::before{
    right: 0;
    bottom: -2px;
  
    display: inline-block;
    width: var(--aniamted-pr);
  }
  .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{
    .link-animated:hover::before{
      right: calc(var(--aniamted-pr) * -1);
    
      transition: 0.3s all linear;
    }
    .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){
  div#gmenu,
  #gmenu-cb:checked ~ div#gmenu{
    transition: none;
  }
  #gmenu-cb:checked ~ div#gmenu{
    background: transparent;
  }
  div#gmenu-inner{
    width: 100%;
    min-height: 100dvh;
    margin-left: 0;
  }
  body:has(#gmenu-cb:checked) div#gmenu-inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
  
    background: #F0EFE2;
  
    transition: 0.5s 0.3s all linear;
  
    @starting-style {
      background: transparent;
    }
    
    >*{
      width: 400px;
      margin-inline: auto;
    }
    .gmenu-logo{
      margin-bottom: 96px;
    }
  }
  div#gmenu-inner nav{
    display: none;
    grid-template-rows: 0fr;
  
    ul{
      overflow: hidden;
      opacity: 0;
  
      >*+*{
        margin-block-start: 32px;
      }
    }
  }
  body:has(#gmenu-cb:checked) div#gmenu-inner nav{
    display: grid;
    grid-template-rows: 1fr;
  
    transition: 0.45s 1s all ease-in;
  
    @starting-style {
      grid-template-rows: 0fr;
    }
    ul{
      animation: anime-gmNav 0.5s ease-in forwards;
      animation-delay: 1.75s;
    }
  }
  @keyframes anime-gmNav{
    0%{
      opacity: 0;
      pointer-events: none;
    }
    100%{
      opacity: 1;
      pointer-events: all;
    }
  }
  div#gmenu-inner #gmenu-btn{
    /*お問合せ*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 180px;
    min-width: 180px;
    padding: 16px;
  
    color: #fff;
    line-height: 1;
  
    background: var(--tc);
  }
  div.SC-contact-wrap{
    padding: 0;
  }
}
@media (max-width : 599px){
  *{
    --header-height: 64px;
  }
  header{
    height: var(--header-height);
    div.header-inner{
      >a{
        width: 50%;
        margin-inline: auto;
      }
    }
  }
  label#humMenu{
    font-size: 12px;

    .hum-wrap{
      width: 32px;
      height: 15px;
      margin-bottom: 4px;
  
      span{
        width: 32px;
        height: 2px;
      }
    }
  }
  footer .footer-top{
    address{
      a{
        font-size: 7vw;
      }
    }
  }
  footer nav{
    ul.nav-list{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;

      li a.list-heading{
        display: block;
        text-align: center;
      }
    }
  }
  footer p.copyright{
    font-size: 3vw;
  }
  body:has(#gmenu-cb:checked) div#gmenu-inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    padding-top: var(--header-height);
    
    >*{
      width: 100%;
      margin-inline: auto;
    }
    .gmenu-logo{
      margin-bottom: 96px;
    }
  }
  div.SC-contact{
    padding: 32px 16px 48px;

    border-radius: 16px;
  
    .heading-wrap{
      margin-bottom: 64px;
    }
    div.content{
      display: flex;
      flex-direction: column;
      gap: 40px;
      justify-content: initial;
      align-items: center;
  
      .blockToForm{
        display: flex;
        flex-direction: column;
        align-items: center;
  
        font-size: 5vw;
        font-weight: 700;
  
        p{
          margin-bottom: 24px;
        }
      }
      .blockToCall{
        p.heading{
          font-size: 5vw;
        }
        a{
          display: inline-block;
  
          font-size: 7vw;
          font-family: var(--ff-Copperplate);
  
          color: #fff;
        }
      }
    }
  }
}