@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&family=Noto+Sans+JP:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('reset.css');

/* ==========================================================
   デザイントークン（CSS カスタムプロパティ）
   ========================================================== */
:root {
    --text-color: #212121;

    --base_color1: #F3CC51;
    --base_color2: #FF9044;
    --base_color3: #52ACF1;
    --base_color4: #73CC80;
    --base_color5: #F97B87;

    --main_color1: #E99A17;
    --main_color2: #EF4F0F;
    --main_color3: #166AB3;
    --main_color4: #2D8C3B;
    --main_color5: #E01E3F;

    --dark_color1: #6C3817;
    --dark_color2: #7E2710;
    --dark_color3: #144878;
    --dark_color4: #1E4926;
    --dark_color5: #871432;

    --light_color1: #FEFAEC;
    --light_color2: #FFF6ED;
    --light_color3: #F2F7FD;
    --light_color4: #F2FBF3;
    --light_color5: #FFF1F1;

    --font-base: 'Noto Sans JP', sans-serif;
    --font-base_en: 'Poppins', sans-serif;
    --font-base_maru: "Kiwi Maru", serif;
}

/* ==========================================================
   ベーススタイル
   ========================================================== */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: 1em;
  color: var(--text-color);
  line-height: 1.8;
  background-color: #fff;
  overflow: hidden;
}

#container{
    width: 100%;
    position: relative;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ========================================
   Header
======================================== */

.site-header {
  /*position: fixed;*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 11;
}

.side_nav_show .site-header {
  position: fixed;
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1140px;
  height: 6rem;
  margin: 0 auto;
  position: relative;
}

.site-header__logo {

}

.site-header__logo a {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header__logo p {

}

.h_logo {
  width: 11.25rem;
}

.logo_h_kamuri {
  width: 8rem;
  position: absolute;
  top: 2rem;
  right: 10.5rem;
}

main{
  /*
  padding-top: 6rem;
  */
}
  

/* ==========================================================
   サイトフッター
   ========================================================== */
.site-footer {

}

.site-footer__header {
}

.site-footer__header_logo_contact{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
    gap: 2rem;
}

.logo_f_kamuri {
  width: 15rem;
}

.f_contact {

}

.f_contact_tel {
  margin-bottom: 2rem;
}

.f_contact_tel dt {
  font-weight: 500;
  margin-bottom: 0.3em;
}

.f_contact_tel dd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

  .f_contact_tel dd::before{
    content: "";
    width: 3.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--text-color);
    background-image: url(../shared/icon_tel_w.png);
    background-size: 1.5rem auto;
    background-repeat: no-repeat;
    background-position: center;
  }

.tel_number_time {
  line-height: 1;
}

.tel_number {
  font-family: var(--font-base_en);
  font-weight: 700;
  font-size: 3rem;
}

.tel_number a {

}

.tel_time {

}

.f_contact_mail {
  display: flex;
  justify-content: flex-start;
}

.f_contact_mail a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--text-color);
  color: #fff;
  border-radius: 100vh;
  padding: 1rem 2rem;
  transition: all 0.3s ease;
}

.f_contact_mail a:hover {
  background-color: var(--base_color1);
  color: var(--text-color);
}

  .f_contact_mail a::before{
    content: "";
    width: 1.5rem;
    aspect-ratio: 1;
    background-image: url(../shared/icon_mail.png);
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
  }

  .f_contact_mail a:hover::before{
    filter: invert(1);
  }

.f_contact_mail .lbl {

}

.yano_contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  background-image: url(../shared/bg_yano_contents.jpg);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 4rem 0;
}

.yano_contents__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.yano_contents__header h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.yano_contents__header .lbl_en {
    font-family: var(--font-base_en);
    font-weight: 700;
    font-size: 3rem;
}

  .yano_contents__header .lbl_en a{
    position: relative;
    display: inline-block;
  }

    .yano_contents__header .lbl_en a::after{
      box-sizing: border-box;
      content: "";
      display: inline-block;
      width: 2rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: #fff;
      background-size: 1rem auto;
      background-repeat: no-repeat;
      background-position: left calc(50% + 1px) center;
      background-image: url(../shared/icon_arrow_b_r.png);
      transition: all 0.3s ease;
      position: absolute;
      right: -3.5rem;
      top: 0.5rem;
    }

    .yano_contents__header .lbl_en a:hover::after{
      transform: translateX(0.25rem);
      background-color: var(--base_color1);
    }

    

.yano_contents__body {

}

.yano_contents__body ul {
  display: flex;
  gap: 1rem;
}

.yano_contents__body li {

}

.yano_contents__body li a {
  width: 15rem;
  height: 3.5rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100vh;
  color: var(--text-color);
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
}

.yano_contents__body li a:hover {
  background-color: var(--base_color1);
}

.yano_contents__body li a::before{
  content: "";
  width: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--text-color);
  background-image: url(../shared/icon_arrow_w.png);
  background-size: 1rem auto;
  background-position: left calc(50% + 1px) center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0.75rem;
  left: 1rem;
}



.yano_contents__body li a:hover {

}

.site-footer__body_bottom{
  background-image: url(../shared/bg_footer.png);
  background-size: 1920px auto;
  padding: 3.5rem 0;
}

.site-footer__body {

}

/* ----------------------------------------
   Footer Navigation
---------------------------------------- */

.f_nav {
  border-bottom: 2px solid rgba(0,0,0,0.2);
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}

.f_nav ul {
  display: flex;
  justify-content: center;
  gap: 2em;
}

.f_nav li {

}

.f_nav a:hover {
  text-decoration: underline;
}

/* ----------------------------------------
   Company Info
---------------------------------------- */

.f_company {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  margin-bottom: 3rem;
}

.f_site_title {
  width: 11.25rem;
}

.f_site_title a {
  display: block;
}

.f_company_info {

}

.f_company_info p {

}

.lbl_addr {

}

.lbl_tel_fax {

}

.lbl_tel_fax a {

}

/* ========================================
   Bottom Area
======================================== */

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
}

.sns {

}

.sns ul{
    display:flex;
    gap:1.125rem;
}

.sns ul li{
    width:2.25rem;
}

  .sns ul li a{
    display:block;
    transition:.3s all ease;
  }

  .sns ul li a:hover{
    opacity:0.8;
  }

.copyright {

}

.cr_year {

}



/*ページトップ*/
.pagetop{
    width:4rem;
    height:4rem;
    position:fixed;
    bottom:3rem;
    right:1rem;
     transform:translateY(100px);
    transition:.3s all ease;
    opacity:0;
    z-index: -1;
}

.pagetop.show{
    transform:translateY(0);
    opacity:1;
    z-index:9;
}

    .pagetop a{
        box-sizing: border-box;
        display:flex;
        justify-content: center;
        align-items: center;
        transition:.5s all ease;
        width:100%;
        height:100%;
        text-decoration:none;
        border-radius: 50%;
        background: var(--text-color);
        padding-bottom: 0.2rem;
    }
    
    .pagetop a:hover{
        filter: brightness(1.1);
    }


    .pagetop a:before{
        font-family: FontAwesome;
        content:"\f106";
        color: #fff;
        font-size: 2.4rem;
    }

/*ヘッダ固定によるアンカーずれ対応*/
*[id^="anc_"]{
    scroll-margin-top: 150px;
}

/*
a[id]{
    padding-top: 150px;
    margin-top:-150px;
}
*/

.nav_oc{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 11;
}

  .nav_oc button,
  .site_search button{
    width: 6rem;
    aspect-ratio: 1;
    border:none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: .3s all ease;
    cursor: pointer;
  }

  .nav_oc button{
    background: var(--text-color);
    color: #fff;
  }

  .nav_oc button:hover{
    filter: brightness(1.2);
  }

    .menu-trigger{
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background: var(--color-dark-btn);
        border: none;
        cursor: pointer;
        outline: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: .3s all ease;
    }

        .menu-trigger .lines{
            position: relative;
            display: block;
            width: 1.5rem;
            height: 1.375rem;
            margin-bottom: 0.75rem;
            transition: .3s all ease;
        }

        .menu-trigger .lines span{
            display: inline-block;
            transition: all .4s;
            box-sizing: border-box;
            background-color: #fff;
            position: absolute;
            width: 1.5rem;
            left: 0;
            height: 2px;
        }

        .menu-trigger .lines span:nth-of-type(1) {
            top: 0;
            transform-origin: left top;
        }

        .menu-trigger .lines span:nth-of-type(2) {
            top: calc(50% - 1px);
            width: 0.75rem;
            left: 0.375rem;
        }

        .menu-trigger .lines span:nth-of-type(3) {
            bottom: 0;
            transform-origin: left bottom;
        }

        .menu-trigger.active .lines span:nth-of-type(1){
            transform: rotate(36deg) scaleX(1.4);
        }

        .menu-trigger.active .lines span:nth-of-type(2) {
            opacity: 0;
        }

        .menu-trigger.active .lines span:nth-of-type(3){
            transform: rotate(-36deg) scaleX(1.4);
        }

        .menu-trigger .lbl{
            font-size: 0.8rem;
        }

    html.side_nav_show{
        overflow-y: hidden;
    }
    
    .side_nav{
        box-sizing: border-box;
        position: fixed;
        top: 0;
        right: 0;
        z-index: -1;
        opacity: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        transition: .3s all ease;
        background: rgba(0,0,0,0);
    }

    .side_nav.active{
        z-index: 10;
        opacity: 1;
        background: rgba(0,0,0,0.75);
        overflow-y: auto;
    }

        .side_nav_box_wrapper{
            width: 100vw;
            height: 100vh;
        }

        .side_nav_box{
            box-sizing: border-box;
            width: 100%;
            min-height: 100%;
            height: auto;
            background: var(--base_color1);
            padding-top: 8rem;
        }

            .side_nav_box > .box_header{
                display: flex;
                justify-content: center;
                margin-bottom: 1em;
            }

                .side_nav_box > .box_header a{
                    display: flex;
                    align-items: flex-end;
                    gap: 1rem;
                }

        .side_nav_box > .box_inner{
            display: flex;
            justify-content: center;
            gap: 7vw;
        }

          .sgn{
            display: flex;
            flex-direction: column;
            gap: 3em;
          }

          .sgn > li.sp{
            display: none;
          }

          .sgn > li > a{
            font-size: 1.4rem;
            display: flex;
            flex-direction: column;
            font-weight: 700;
            line-height: 1.4;
            padding: 0 0.5em 0.3em 0;
          }

            .sgn > li > a .lbl_en{
              font-size: 0.75em;
              font-family: var(--font-base_en);
            }

            .sgn .child_nav{
              margin-top: 1.5em;
              margin-left: 1em;
              font-weight: 500;
              font-size: 0.94rem;
            }

              .sgn .child_nav ul{
                display: flex;
                flex-direction: column;
                gap: 0.6em;
              }

              .sgn .child_nav ul li{
                position: relative;
                padding-left: 1.3em;
              }

              .sgn .child_nav ul li::before{
                font-family: FontAwesome;
                content:"\f111";
                display: inline-block;
                position: absolute;
                top: 0;
                left: 0;
              }

              .sgn a{
                position: relative;
              }

              .sgn .child_nav ul li a{
                display: inline-block;
              }

              .sgn a::before{
                content: "";
                display: block;
                width: 100%;
                border-bottom: 1px solid var(--text-color);
                position: absolute;
                bottom: 0;
                left: 0; 
                transition: .3s all ease;
                opacity: 0;
              }

              .sgn a:hover::before{
                opacity: 1;
              }

              #menu-nav_business li:nth-child(1),
              #menu-nav_business-1 li:nth-child(1) {
                display: none;
              }


  .sgn_sns {
      display:flex;
      gap:1.125rem;
      margin: 5rem 0 0 0;
  }

  .sgn_sns li{
      width:2.25rem;
  }

    .sgn_sns li a{
      display:block;
    }

.sgn_contact{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
    gap: 2rem;
}

.sgn_logo_kamuri {
  width: 15rem;
}

.sgn_contact_tel {
}

.sgn_contact_tel dt {
  font-weight: 500;
  margin-bottom: 0.3em;
}

.sgn_contact_tel dd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

  .sgn_contact_tel dd::before{
    content: "";
    width: 3.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--text-color);
    background-image: url(../shared/icon_tel_w.png);
    background-size: 1.5rem auto;
    background-repeat: no-repeat;
    background-position: center;
  }

.sgn_tel_number_time {
  line-height: 1;
}

.sgn_tel_number {
  font-family: var(--font-base_en);
  font-weight: 700;
  font-size: 3rem;
}

.sgn_contact_mail {
  display: flex;
  justify-content: flex-start;
}

.sgn_contact_mail a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--text-color);
  color: #fff;
  border-radius: 100vh;
  padding: 1rem 2rem 1rem 1rem;
}

  .sgn_contact_mail a::before{
    content: "";
    width: 1.5rem;
    aspect-ratio: 1;
    background-image: url(../shared/icon_mail.png);
    background-size: contain;
    background-repeat: no-repeat;
  }

.site_search{
  position: fixed;
  top: 6rem;
  right: 0;
  z-index: 11;
  display: flex;
  background: var(--base_color1);
}

.site_search.active{
  box-shadow: 0 0 8px 0 rgba(0,0,0,0.15);
  background: #fff;
}

  .site_search .search-trigger{
    background: var(--base_color1);
  }

  .site_search .search-trigger:hover{
    filter: brightness(1.05);
  }

  .site_search.active  .search-trigger,
  .side_nav_show .site_search .search-trigger{
    background: #fff;
  }

    .site_search .search-trigger .icon{
      width: 2rem;
      margin-bottom: 0.5rem;
    }

    .site_search .search-trigger .lbl{
      font-size: 0.8rem;
    }

    .site_search_form{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      opacity: 0;
      width: 0;
      overflow: hidden;
      transition: .3s all ease;
    }

    .site_search.active .site_search_form{
      opacity: 1;
      width: 22rem;
    }

    .site_search_form_caption{
      font-size: 0.9rem;
      width: 0;
      text-align: center;
      white-space: nowrap;
    }

    .site_search.active .site_search_form_caption{
      width: auto;
    }

    .site_search_form form{
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      padding: 0.5rem;
      gap: 0.125rem;
      width: 100%;
    }

      .site_search_form form .site_search_form_input{
        flex: 1;
      }

        .site_search_form form .site_search_form_input input[type="text"]{
          box-sizing: border-box;
          padding: 0.5em;
          font-size: 1em;
          border: none ;
          background: #fff;
          width: 100%;
          border-radius: 100vh 0.25rem 0.25rem 100vh;
          background-color: #eee;
        }

          .site_search_form form .site_search_form_input input[type="text"]::placeholder {
            font-size: 0.9em;
          }

      .site_search_form form .site_search_form_submit{
        display: flex;
        justify-content: center;
      }

      .site_search_form form .site_search_form_submit input[type="submit"]{
        font-size: 1em;
        border-radius: 0.25rem 100vh 100vh 0.25rem;
        color: var(--text-color);
        background-color: var(--base_color1);
        padding: 0.6em 1em 0.5em 1.1em;
        line-height: 1;
        border: none;
        cursor: pointer;
        font-weight: 500;
        letter-spacing: 0.1em;
        transition: .3s all ease;
      }

      .site_search_form form .site_search_form_submit input[type="submit"]:hover{
        background-color: var(--main_color3);
        color: #fff;
      }


br.sp{
  display: none;
}

a[href^="tel:"]{
  pointer-events: none;
}

/*1340px以下*/
@media screen and (min-width:1px) and (max-width:1340px){
  .logo_h_kamuri{
    left: auto;
    right: 6.5rem;
  }
  
}

/*1280px以下*/
@media screen and (min-width:1px) and (max-width:1280px){

}

/*1280px以下*/
@media screen and (min-width:1px) and (max-width:1280px){

}


/*1180px以下*/
@media screen and (min-width:1px) and (max-width:1180px){
  .site-header__inner{
    padding-left: 3vw;
  }

}

/*1080px以下*/
@media screen and (min-width:1px) and (max-width:1080px){

}

/*ipad*/
@media screen and (min-width:1px) and (max-width:1024px){
  html {
      font-size: 1.4vw;
  }

  .site-header__inner{
    max-width: 100%;
    padding-left: 3vw;
    padding-right: 0;
  }

  .logo_h_kamuri{
    right: 8rem;
  }

  .site-nav > ul{
    padding-right: 1vw;
  }

  .site-footer__bottom{
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

/* ##########印刷用########## */
@media print{
    html{
        width: 1024px;
    }
    
    header{
        position:relative;
    }
   
    
    .contents{
        padding-top: 0;
    }
    
    .pagetop{
        display: none;
    }
    
}