@charset "utf-8";

@media screen and (max-width: 480px) {
}

html {
   scroll-behavior: smooth;
  }
a {
    color: rgb(10, 10, 10);
    text-decoration: none;
}
.a1{
    color: #000;
    font-size: larger;
    font-weight: bold;
    text-decoration: underline;
}
@media screen and (max-width: 480px) {
  .a1 {
    font-size: 14px;
  }
}
.a2{
  color: #000;
  font-size: medium;
  text-decoration: underline;
  margin: 5px;
}
@media screen and (max-width: 480px) {
  .a2 {
    font-size: 14px;
  }
}
.a3 {
  color: rgb(255, 255, 255);
  text-decoration: none;
}
ul,
li{
    list-style: none;
    color: #f3f3f3;
}
tr,td,th{
  background-color: #f1f1f1;
}
.list_navi{
    display: flex;
}
main {
    background-color: #f1f1f1;
    height: 800px;
}
.main {
    margin: auto;
}
.h1 {
    margin: 0px ;
    padding-top: 50px;
    padding-left: 10px;
    font-size: x-large;
    text-decoration: underline;
}
  @media screen and (max-width: 480px) {
    .h1 {
      margin: 0px ;
      padding-top: 40px;
      padding-left: 10px;
      font-size: medium;
      text-decoration: underline;
    }
}
.h2{
  margin: 0px ;
  padding-top: 30px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  font-size: large;
}
@media screen and (max-width: 480px) {
  .h2{
    margin: 0px ;
    padding-top: 20px;
    padding-left: 10px;
    font-size: 14px;
  }
}


.h2_about {
    margin: 0px ;
    padding-top: 50px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 60px;
    font-size: large;
}
  @media screen and (max-width: 480px) {
    .h2_about  {
      margin: 0px ;
      padding-top: 30px;
      padding-left: 10px;
      padding-bottom: 30px;
      font-size: 14px;
    }
  }

.h3 {
    margin: 0px ;
    font-size: large;
    text-align:center;
    padding:20px 0;
}
  @media screen and (max-width: 480px) {
    .h3 {
      margin: 0px ;
      font-size: 15px;
      text-align:center;
      padding:10px 0;
    }
}
.h4 {
  margin: 0px ;
  padding:5px;
}
@media screen and (max-width: 480px) {
  .h4 {
    font-size: 14px;
  }
}
.h5 {
  padding:20px 0;
  text-align: center;
  font-size: 14px;
  color: #f8f8f8;
}

.h6 {
  padding:0;
  font-size: 18px;
  font-weight:bold;
}
.h7 {
  margin: 0;
  padding:0;
  font-size: 18px;
  font-weight:bold;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .h7 {
    font-size: 14px;
  }
}
.ttl{
    margin: 0px ;
    padding-top: 50px;
    padding-left: 10px;  
    font-size: large;
}
  @media screen and (max-width: 480px) {
    .ttl{
      margin: 0px ;
      padding-top: 30px;
      padding-left: 10px;  
      font-size: 15px;
    }
}
.imgtop{
    max-width: 100%;
}
th{
}
  @media screen and (max-width: 480px) {
    th{
      font-size: 14px;
  }
}
td{
    font-size: 16px;
}
  @media screen and (max-width: 480px) {
    td{
      font-size: 14px;
    }
}
img {
    max-width: 100%;
    max-height: 100%;
    vertical-align:top;
    border: 0;
}
.img2 {
    max-width: 100px;
    height: 100px;
    background-color: #f1f1f1;
    border : 1px solid rgb(102, 101, 101) ;
}
.img3 {
    max-width: 100px;
    height: 100px;
    background-color: #f1f1f1;
    border : 1px solid rgb(102, 101, 101) ;
}
.img4{
  align-items: flex-end;
}
.qrcode {
    max-width: 100px;
    height: 100px;
    background-color: #f1f1f1;
    border : 1px solid rgb(102, 101, 101) ;
 }
/*ヘッダー*/
header {
  background-color: rgb(50, 50, 51);
    max-width: 100%;
    height: 88px;
 
    }
    @media screen and (max-width: 530px) {
      header{
        max-width: 100%;
        height: 50px;
      }
    }
    .container{
      max-width: 1200px;
      height: 100%;
      margin: 0 auto;
  }
  .header_inner {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      height: 100%;
      }
      @media screen and (min-width: 400px) {
        .header__inner{
        }
            }
.menu-item {
  list-style: none;
  display: inline-block;
  padding: 10px;
}
.header_logo {
width: 25%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
  }
.logo{
}
.menu_group{
  padding: 0;
}

  @media screen and (max-width: 530px) {
.menu_group{
  display:none;
}
  }

  @media screen and (min-width: 531px) {
  #toggle-box{
      display:none;
    }
  }
nav{
  display: flex;
  justify-content: center;
  align-items: center;
}
.sita{
  width: 50px;
}
@media screen and (max-width: 480px) {
  .sita{
    width: 20px;
    }
  }
/* ----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------*/
#toggle {
  position: fixed;
  top: 25px;
  right: 25px;
}

#toggle-box {
  position: relative;
  width: 30px;
  height: 20px;
  cursor: pointer;
}

#toggle-box > span {
width: 100%;
height: 1.8px;
left: 0;
display: block;
background: #474747;
position: absolute;
transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease;
}

#toggle-box > span:nth-child(1) {
  top: 0;
}

#toggle-box > span:nth-child(2) {
  top: 50%;
  transform: translatey(-50%);
}

#toggle-box > span:nth-child(3) {
bottom: 0;
}

#toggle {
  z-index: 1000;
}
#main {
  position: relative;  
  z-index: 990;
}

#nav-content {
  z-index: 900;
  overflow: auto;
  width: 35%;
  height: 80%;
  background: rgb(50, 50, 51);
  color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  text-align: center;
  transform: translateX(100%);
  transition:  transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#nav-content ul {
padding: 20px;
}

#nav-content a {
display: block;
color: #fff;
text-decoration: none;
padding: 25px 0;
transition: opacity .6s ease;
}

#nav-content a:hover {
opacity: 0.6;
}

.is-open {
  overflow: hidden;
}

.is-open #toggle-box > span {
  background: #fff;
}

.is-open #toggle-box > span:nth-child(1) {
top: 50%;
transform: rotate(45deg) translatey(-50%);
}

.is-open #toggle-box > span:nth-child(2) {
width: 0;
}

.is-open #toggle-box > span:nth-child(3) {
top: 50%;
transform: rotate(-45deg) translatey(-50%);
}

.is-open #nav-content {
z-index: 999;
transform: translateX(0);
}

.overlay {
background: rgba(0, 0, 0, 0.5);
height: 100vh;
}




/* ----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------*/
  .top{
    background-color:  rgb(243, 243, 248);
    display: block;
    max-height: 890px;
  }
  @media screen and (max-width: 480px) {
    .top{
      max-height: 300px;
    }
  }
  .top_container{
    max-width: 1200px;
    max-height: 100%;
    padding: 0 40px;
    margin: 0 auto;
    position: relative;
  }
  @media screen and (max-width: 480px) {
    .top_container{
      max-width: 100%;
      height: 100%;
      padding: 0 20px;
      margin: 0 auto;
      position: relative;
    }
  }
  .top_logo{
    width: 30%;
    height: auto;
    position: absolute;
    top:25%;
    right: 10%;
    bottom: 50%;
     }
     @media screen and (max-width: 480px) {
      .top_logo{
        width: 30%;
        height: auto;
        position: absolute;
        top:20%;
        right: 15%;
       bottom: 50%;
         }
        }
  .about {
    background-color: rgb(247, 247, 247);
    max-height: 1000px;
    margin: 0 auto;
    border-top : 1px solid rgb(102, 101, 101) ;
    border-bottom : 1px solid rgb(102, 101, 101) ;
  }
    @media screen and (max-width: 400px) {
      .about{
        max-height: 2000px;
      }
  }

  .about_container{
    max-width: 1200px;
    margin: 0 auto;

    max-height: 100%;

    display: flex;

  }
  @media screen and (max-width: 480px) {
    .about_container{
      max-height: 100%;
        }
}
  .about_left{
    width: 20%; 
    padding: 10px;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
    @media screen and (max-width: 480px) {
      .about_left {
        padding: 5px;
      }
  }
  .about_center{
    max-width: 60%;
    max-height: 100%;

  }
    @media screen and (max-width: 480px) {
    .about_center{
    }
  }
  .about_right{
    width: 20%; 
    padding: 10px;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
    @media screen and (max-width: 480px) {
    .about_right{
      padding: 5px;
    }
  }
.aboutimg{

}





/* --menu1--------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------*/

  .menu {
    background-color: rgb(243, 243, 248);
    max-height: 3000px;
    margin: 0 auto;
  }
    @media screen and (max-width: 480px) {
      .menu{
        max-height: 4000px;
        margin: 0 auto;
      }
  }
  .menu_container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: rgb(247, 247, 247);
    max-height: 100%;
    padding: 40px 0px;
  }
    @media screen and (max-width: 480px) {
      .menu_container{
        max-width: 100%;
        margin: 0 auto;
  
        max-height: 100%;

      }
  }
  .menu_inner {
    max-width: 694px;
    padding: 0px 80px 30px 80px;
    margin: 0 auto;
    background-color:#f5bb58;
    max-height: 100%;
    border-radius: 20px;
    border:0;
  }
    @media screen and (max-width: 480px) {
      .menu_inner {
        max-width: 694px;
        padding: 10px;
        margin: 0 auto;

        max-height: 100%;
        border-radius: 20px;
        border:0;
      }
  }
  .menu_inner_in {
    max-width: 694px;
    padding: 10px 10px;
    margin: 0 auto;
    background-color: #f1f1f1;
    max-height: 95%;
    border:0;
    border-radius: 20px;
    border-spacing: 0
    }
    @media screen and (max-width: 480px) {
      .menu_inner_in{
        max-width: 100%;
        border:0;
        border-radius: 20px;
        border-spacing: 0;
        max-height: 100%; /* スクロール可能な最大高さ */
        }
      .table1 thead {
        position: sticky;   /* ヘッダー行を固定 */
       }
   
    }
    .table1{
      background: #f2f2f2;
      border-spacing: 0;
    }
  .menu_outline {
    }
  .menu_syurui{
    width: 52%; 
    background-color: rgb(243, 243, 248);
    border:0;
    border-bottom: 1px solid #000;
    padding:10px;
  } 
    @media screen and (max-width: 480px) {
      .menu_syurui{
        width: 52%; 

        border:0;
        border-bottom: 1px solid #000;
        padding:10px;
        font-size: 14px;
      } 
  }
 .menu_shampoo{
    text-align: center;
    width: 160px ; 
    background-color: rgb(243, 243, 248);
    border:0;
    border-bottom: 1px solid #000;
    padding: 5px;
  } 
  .menu_cut {
    text-align: center;
    width: 24%; 
    background-color: rgb(243, 243, 248);
    border:0;
    border-bottom: 1px solid #000;
    padding: 5px;
  } 
/* --menu2--------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------*/
.menu_container2 {
  max-width: 1200px;
  margin: 0 auto;
  background-color: rgb(247, 247, 247);
  max-height: 100%;
  padding: 40px 0px;
}
  @media screen and (max-width: 480px) {
    .menu_container2{
      max-width: 100%;
      margin: 0 auto;

      max-height: 100%;

    }
}
.menu_inner2 {
  max-width: 694px;
  padding: 0px 80px 30px 80px;
  margin: 0 auto;
  background-color:#707070;
  max-height: 100%;
  border-radius: 20px;
  border:0;
}
  @media screen and (max-width: 480px) {
    .menu_inner2 {
      max-width: 694px;
      padding: 10px;
      margin: 0 auto;

      height: 100%;
      border-radius: 20px;
      border:0;
    }
}
.menu_inner_in2 {
  max-width: 694px;
  padding: 10px 10px;
  margin: 0 auto;
  background-color: #f1f1f1;
  max-height: 95%;
  border:0;
  border-radius: 20px;
  border-spacing: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  @media screen and (max-width: 480px) {
    .menu_inner_in2{
      max-width: 100%;
      max-height: 95%;
      border:0;
      border-radius: 20px;
      border-spacing: 0
    }
  }
  .table2{
    background: #f2f2f2;
    border-spacing: 0;
    max-width: 1200px; 
  }
  .menu_syurui2{
    width: 300px; 
    background-color: rgb(243, 243, 248);
    border:0;
    border-bottom: 1px solid #000;
    padding:10px;
    text-align: left;
  } 
    @media screen and (max-width: 480px) {
      .menu_syurui2{
        border:0;
        border-bottom: 1px solid #000;
        padding:10px;
        font-size: 14px;
      } 
  }
  .menu_tanpin{
    text-align: right;
    max-width: 150px; 
    background-color: rgb(243, 243, 248);
    border:0;
    border-bottom: 1px solid #000;
    padding: 10px 0px;
  } 
.menu_tanpin{

}








/* --menu2--------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------*/
  .howto {
    background-color: #F5F5F5;
    max-height: 660px;
    margin: 0 auto;
    border-top : 1px solid rgb(102, 101, 101) ;
    border-bottom : 1px solid rgb(102, 101, 101) ;
    padding-bottom: 30px;
     }
     @media screen and (max-width: 480px) {
      .howto {
        max-height: 460px;
        margin: 30px auto;
         }
     }
 .calender {
    background-color: rgb(243, 243, 248);
    max-height: 863px;
    margin: 0 auto;
    border-bottom : 1px solid rgb(102, 101, 101) ;
  }
    @media screen and (max-width: 480px) {
      .calender {

        max-height: 100%;
        margin: 0 auto;
      }
   }
  .calender_container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: rgb(240, 240, 240);
    max-height: 863px; 
  }
    @media screen and (max-width: 480px) {
      .calender_container {
        max-width: 100%;
        margin: 0 auto;
        height: 100%; 
      }
   }
  .calender_inner{
    max-width: 800px;
    padding: 30px 40px;
    margin: 30px auto;
    background-color:rgb(50, 50, 51);
    height: 500px;
    border:0;
    border-spacing: 0 ;
    border-radius: 20px;
    }
    @media screen and (max-width: 480px) {
      .calender_inner{
        max-width: 90%;
        margin: 0px auto;
        padding: 20px;
        height: 100%;
        border:0;
        border-spacing: 0 ;
        border-radius: 20px;
        }
     }
  .access {
    background-color: rgb(255, 255, 255);
    margin: 0 auto;
    max-height: 1640px;
  }
    @media screen and (max-width: 480px) {
      .access {
        max-width: 480px;

        max-height: 1840px;
      }
  }
  .access_container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: rgb(75, 219, 75);
    max-height: 100%;
  }
    @media screen and (max-width: 480px) {
      .access_container {
        max-width: 400px;
        margin: 0 auto;
        background-color: rgb(75, 219, 75);
        max-height: 100%;
      }
  }
  .access_top {
    max-width: 1200px;
    padding: 20px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: rgb(235, 235, 235);
    max-height: 240px;
  }
    @media screen and (max-width: 480px) {
      .access_top  {
        max-width: 400px;
        padding-left: 2px;
        padding-right: 2px;

        max-height: 100%;
      }
  }
  .access_line {
    max-width: 900px;
    margin : 15px auto;
    background-color: rgb(255, 255, 255);
    max-height: 500px;
    border : 3px solid rgb(102, 101, 101) ;
  }
    @media screen and (max-width: 480px) {
      .access_line {
        width: 100%;
        margin : 0px;

        max-height: 500px;
        border : 0px ;
       }
  }
  .access_pic {
    max-width: 20%;
    padding: 10px 10px 10px 10px;
    margin : 10px 0px 10px 10px;
    background-color: rgb(235, 235, 235);
    flex-grow: 1;
  }
    @media screen and (max-width: 480px) {
        .access_pic {
        max-width: 35%;
        padding: 10px 10px 10px 10px;
        margin : 10px 0px 10px 10px;

        height: 115px;   
        flex-grow: 1; 
        }
    }
 .imgbox1{
  max-width: 30%;
  max-height: 60%;
  flex-grow: 1; 
  margin: 0 auto;
  text-align:center;
 }
 .imgbox2{
  max-width: 30%;
  max-height: 60%;
  flex-grow: 1; 
  margin: 0 auto;
  text-align:center;
 }
 .imgbox3{
  max-width: 30%;
  max-height: 60%;
  flex-grow: 1; 
  margin: 0 auto;
  text-align:center;
 }
 .line{
  max-width: 100%;
  max-height: 60%;
 }
.friend{

}
 @media screen and (max-width: 480px) {
  .friend{
    max-width: 70%;
  }
  }   
 
  .qr{
  max-width: 100%;
  max-height: 60%;
 }
 @media screen and (max-width: 480px) {
  .qr{
    max-width: 70%;
    max-height: 60%;
   }

 }



 .tel{
  max-width: 100%;
  max-height: 60%;
 }

  .access_google {
    max-width: 80%;
    padding: 10px;
    margin : 10px ;
    background-color: rgb(235, 235, 235);
    flex-grow: 2;
    }
    @media screen and (max-width: 480px) {
      .access_google {
       max-width: 50%;
       padding: 10px;
       margin : 10px ;

       height: 115px;
       flex-grow: 2;
      }
    }
.jyusho {
  margin: 10px auto;
  background-color:#f5bb58;
  max-height: 600px;
  padding: 5px;
}
  @media screen and (max-width: 480px) {
  }
    .flexbox{
      display: flex;
      width: 100%;
     }
      @media screen and (max-width: 480px) {
        .flexbox{
          display: flex;
        }
    }
.link {
  margin: 10px auto;
  background-color: rgb(235, 235, 235);
  max-height: 800px;
  padding: 5px;
}
    @media screen and (max-width: 480px) {
      .link {
      }
    }
.teikei_container{
  width: 1200px;
  height: 400px;
  padding: 30px;
  margin: auto;
}
      @media screen and (max-width: 480px) {
      }
  .footer {
    background-color: rgb(50, 50, 51);
    max-height: 150px;
  }
      @media screen and (max-width: 480px) {   
      }
  .footer_container{
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
  }
      @media screen and (max-width: 480px) {
      }
.googleCalendar{
  max-width: 100%;
  height: 40px;
}
      @media screen and (max-width: 480px) {
      }



.help{
  background-color: rgb(255, 255, 255);
  max-width: 100%;
    height: 1700px;
    padding: 5px;
    text-align:center;
}
.help_text{
  text-align: left;
}
.help_text2{
  text-align: left;
  font-weight: bold;
}

/* スマートフォンのレスポンシブデザインのみに表示するスタイル */
.calender_text {
  display: none;
}
@media screen and (max-width: 480px) {
  .calender_text {
      display: block; /* 表示 */
      text-align: center; /* テキストを中央揃え */
      margin: 10px 0 10px 0; /* 適切な余白を追加 */
  }
}
/* 通常のデザインでは非表示 */
.menu_notice {
  background-color: #ffe6cc;  /* 目立つ柔らかい背景色（オレンジ系） */
  color: #d14700;             /* 目立つ濃いオレンジ系の文字色 */
  font-size: 16px;            /* 少し大きめのフォントサイズ */
  font-weight: bold;          /* 太字にして目立たせる */
  text-align: center;         /* 中央揃え */
  border: 2px solid #d14700;  /* 文字色と同じ色のボーダーを追加 */
  padding: 15px;              /* 周りに余白を追加 */
  border-radius: 10px;        /* 角を丸めて柔らかい印象に */
  margin: 20px 0;             /* 上下に余白を追加して周りから目立たせる */
}

@media screen and (max-width: 480px) {
  .menu_notice {
      font-size: 14px;        /* モバイル用に少し小さく */
      padding: 10px;          /* モバイル画面用に余白を調整 */
  }
}

/* レスポンシブ時にのみスクロールを有効にする */
@media screen and (max-width: 480px) {
  .table1 tbody {
      display: block;
      max-height: 400px; /* スクロールを開始する高さ */
      overflow-y: auto;  /* 縦方向にスクロールを有効にする */
  }

  .table1 thead, .table1 tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
  }

  .table1 th, .table1 td {
      padding: 5px;
      font-size: 12px; /* モバイル用にフォントサイズを小さく */
  }
   /* 列の幅を調整して、重要な情報を優先的に表示 */
   .menu_syurui {
    width: 50%;  /* 犬種や種類の列に50%の幅を与える */
}
.menu_shampoo, .menu_cut {
  width: 25%;  /* シャンプーやカットの列に25%ずつの幅を与える */
  white-space: normal;  /* テキストが折り返されるように設定 */
  word-break: break-word;  /* テキストが長い場合でもセルの中で折り返す */
}
 /* テーブル全体を表示できるように調整 */
 .table1 {
  table-layout: fixed;  /* 列幅を固定し、バランスよく表示 */
  width: 100%;  /* テーブル全体の幅を100%に */
}
}
/* ----------------------------------------------------------------------------------*/
/* レスポンシブ時にのみスクロールを有効にする */
@media screen and (max-width: 480px) {
  .table2 tbody {
      display: block;
      max-height: 350px; /* スクロールを開始する高さ */
    }

  .table2 thead, .table2 tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
  }

  .table2 th, .table2 td {
      padding: 5px;
      font-size: 12px; /* モバイル用にフォントサイズを小さく */
  }
  .menu_tanpin, {

  }
  .menu_syurui2 {
    width: 70%;  /* 犬種や種類の列に50%の幅を与える */
}
 /* テーブル全体を表示できるように調整 */
 .table2 {
  table-layout: fixed;  /* 列幅を固定し、バランスよく表示 */
  width: 100%;  /* テーブル全体の幅を100%に */
}
/* ----------------------------------------------------------------------------------*/



}