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

  --z-index-contact-fixed: 200;

  box-sizing: border-box;
}
body{
  --header-height: 100px;
  width: 100%;
  color: #333;
  background: #fff;

  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%;
}
.m-b-4{
  margin-bottom: 4px;
}
.m-b-8{
  margin-bottom: 8px;
}
.m-b-16{
  margin-bottom: 16px;
}
.m-b-24{
  margin-bottom: 24px;
}
.m-b-32{
  margin-bottom: 32px;
}
.m-b-40{
  margin-bottom: 40px;
}
.m-b-48{
  margin-bottom: 48px;
}
.m-b-56{
  margin-bottom: 56px;
}
.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;

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

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

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

  width: 100%;
  height: var(--header-height);
  padding: 0 2%;

  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

  h1 img{
    display: block;
    width: min(140px,50vw);
  }
  .header-right{
    display: flex;
    align-items: center;
  }
}
header .header-right nav{
  ul.nav-list{
    display: flex;

    border-left: solid 1px #ccc;
  }
  ul.nav-list li.list-item{
    font-weight: 700;

    border-right: solid 1px #ccc;
  }
  ul.nav-list li.list-item >*:is(span,a){
    display: inline-block;
    padding: 8px 24px;
  }
}
header .header-right #nav-tel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin-left: min(3vw,60px);

  a{
    font-size: 28px;
    font-weight: 700;
    color: var(--tc);
  }
  span{
    display: inline-block;
    padding: 4px 32px;

    color: #fff;

    background: var(--tc);
    border-radius: 20px;
  }
}
header #nav-li-hover{
  position: relative;

  span{
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 4px;

    transition: 0.3s all linear;
  }
  span picture{
    /*arrow*/
    transition: 0.3s all linear;
  }
}
.hover-menu{
  display: none;
}
main{
  padding-top: var(--header-height);
}
footer{
  background: #ECF8EF;
  #footer-hero{
    width: 100%;
  }
  #footer-hero img{
    width: 100%;
  }
  p.copyright{
    padding-right: 16px;

    line-height: 2;
    text-align: right;
    color: #fff;

    background: var(--tc);
  }
}
footer .footer-content{
  width: min(1120px,100%);
  padding: 32px 16px;
  margin-inline: auto;

  nav .column{
    font-size: 15px;
  }
  nav .column>*+*{
    margin-block-start: 8px;
  }
  .nav-column-wrap{
    display: flex;
    gap: 40px;
  }
  .nav-heading{
    display: inline-block;
    font-weight: 700;
  }
  .nav-heading:has(picture){
    /*ブログアイコン*/
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 4px;
    align-items: center;

    p{
      display: inline;
    }
  }
  .nav-link::before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 2px;

    margin-right: 8px;
    font-weight: 700;
    background: var(--tc);
  }
}
footer .logo-wrap{
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 56px;
}
.forsp{
  display: none;
}
/*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;
  }
}
#header-navhum{
  display: none;
}
/*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;
  }
}
/*fixed btn*/
#contact-fixed{
  position: fixed;
  top: clamp(calc(var(--header-height) * 1.5),16dvh,200px);
  right: 0;
  z-index: var(--z-index-contact-fixed);

  .contact-fixed-inner{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    row-gap: 8px;
    justify-content: center;
    align-items: center;

    padding: 12px 12px 16px;

    background: #333;
    border-radius: 10px 0 0 10px;

    p{
      vertical-align: middle;
      color: #fff;

      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      margin-inline: auto;

      font-family: "Noto Serif JP", serif;
      font-optical-sizing: auto;
      font-weight: 500;
    }
  }
}
@media (min-width : 1200px){
  .btn:hover{
    opacity: 0.8;
    transition: 0.3s all linear;

    background-image: url(../img/btn-bg.png);
    background-size: cover;
  }
  #nav-li-hover:hover{
    color: var(--tc);

    span picture{
      /*arrow*/
      transform: rotate(180deg);
      transition: 0.3s all linear;
    }
  }
  #nav-li-hover:hover .hover-menu{
    position: absolute;
    z-index: 101;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;

    width: 22em;
    padding: 16px 16px;

    background: #E6FFED;
    border: solid 1px var(--tc);

    >*+*{
      margin-block-start: 8px;
    }
    a{
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      column-gap: 4px;
      padding: 0 4px;

      color: #333;
    }
    a:hover{
      background: #fff;
    }
  }
}
@media (max-width : 1200px){
  body{
    --header-height: 60px;
  }
  header{
    padding-right: 0;

    h1 img{
      width: auto;
      height: 36px;
    }
    .header-right{
      display: none;
    }
  }
  #header-navhum{
    display: inline-block;
    width: var(--header-height);
    height: var(--header-height);

    .navhum-inner{
      position: relative;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 100%;

      span{
        display: inline-block;
        width: 32px;
        height: 2px;

        background: #333;
      }
    }
  }
  body:has(#gmenu-cb:checked) #header-navhum .navhum-inner{
    span:nth-child(1){
      position: absolute;

      top: 50%;
      transform: translateY(-50%)rotate(30deg);
    }
    span:nth-child(2){
      background: transparent;
    }
    span:nth-child(3){
      position: absolute;

      top: 50%;
      transform: translateY(-50%)rotate(-30deg);
    }
  }
  #contact-fixed{
    display: none;
  }
}
@media (max-width : 599px){
  .forsp{
    display: block;
  }
  footer{
    p.copyright{
      padding-right: 0px;

      font-size: 12px;
      text-align: center;
    }
  }
  footer .footer-content{
    .nav-column-wrap{
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
  }
  footer .logo-wrap{
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
  }
}