@charset "utf-8";

/*----------------------------------------------------------------------------------------------------

  Newsletter Parts / ニュースレターの設定

----------------------------------------------------------------------------------------------------　*/


.anchor{
  width: 1000px;
  margin: 30px auto 15px;
}

.anchor ul{
  display: flex;
}

.anchor ul li{
  width: 24%;
  margin: 0px 0.5%;
}

.anchor ul li a{
  position: relative;
  display: block;
  padding: 7.5px 0px;
  color: #202020;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  border: 1px #dfdfdf solid;
  border-radius: 5px;
  background: #efefef;
}

.anchor ul li a:hover{
  color: #fff;
  background: #f39600;
}

.anchor ul li a::after{
  position: absolute;
  top: 6px;
  left: 25px;
  margin: 0px;
  color: #888;
  font-size: 1.8rem;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
  content: '\f103';
}

.anchor ul li a:hover::after{
  color: #fff;
}

@media only screen and ( max-width: 1019px ){
  .anchor{
    width: auto;
    margin: 30px 25px 15px;
  }

  .anchor ul li a::after{
    top: auto;
    bottom: -15px;
    left: 48%;
  }
}

@media only screen and ( max-width: 1019px ){
  .anchor{
    margin: 30px 15px 15px;
  }

  .anchor ul{
    flex-wrap: wrap;
  }

  .anchor ul li{
    width: 48%;
    margin: 1.5% 1%;
    font-size: 1.45rem;
  }

  .anchor ul li a::after{
    top: 8px;
    left: 20px;
    font-size: 1.7rem;
  }
}



/*
  オーナーの呟き
*/

.owner{
  margin: 50px 0px 0px;
  padding: 80px 0px;
}

.ownerbox{
  width: 1000px;
  margin: 100px auto 0px;
  padding: 0px 75px 30px;
  border: 2px #dfdfdf solid;
  border-radius: 5px;
  text-align: left;
  box-shadow: 7px 7px 0px 0px #f39600;
}

.ownerbox h3{
  position: relative;
  width: 100%;
  margin: -28px 0% 30px;
  padding: 0px 25px;
  font-size: 2.4rem;
  line-height: 1.3;
  background: #fff;
}

.ownerbox h3::after {
  position: absolute;
  content: '';
  width: calc( 100% - 30px );
  height: 5px;
  left: 0;
  bottom: -5px;
  margin: 0px 15px;
  background: repeating-linear-gradient(-45deg, #f39600, #f39600 2px, white 2px, white 4px);
}

.ownerbox h3 span{
  display: block;
  color: #6f6f6f;
  font-size: 1.8rem;
  font-weight: normal;
}

.ownerbox p{
  margin: 20px 25px 0px;
}


@media only screen and ( max-width: 1019px ){
  .owner{
    margin: 50px 25px 0px;
  }

  .ownerbox{
    width: auto;
    margin: 80px 0px 0px;
    padding: 0px 40px 30px;
  }
}


@media only screen and ( max-width: 640px ){
  .owner{
    margin: 50px 15px 0px;
  }

  .ownerbox{
    padding: 0px 15px 30px;
    box-shadow: 5px 5px 0px 0px #f39600;
  }

  .ownerbox h3{
    padding: 0px 15px;
    font-size: 1.8rem;
  }

  .ownerbox h3 span{
    font-size: 1.6rem;
  }

  .ownerbox p{
    margin: 20px 10px 0px;
    font-size: 1.5rem;
  }
}



/*
  スタッフの部屋
*/

.staffroom{
  margin: 70px 0px 0px;
  padding: 80px 0px;
  background: #f9f9f9;
}

.theme{
  width: 1000px;
  margin: 100px auto 0px;
  padding: 0px;
  border: 1px #dfdfdf solid;
  border-radius: 5px;
  background: #fff;
  box-shadow: 5px 5px 0px 0px #f39600;
}

.theme h3{
  margin: -25px 15% 0px;
  width: 70%;
  padding: 7.5px 0px;
  color: #fff;
  font-size: 2.2rem;
  border-right: 2px #fff solid;
  border-radius: 5px;
  background: #f39600;
}

.theme .themebox{
  display: flex;
  align-items: center;
  margin: 50px 25px 0px;
  padding: 0px 15px 60px;
  border-bottom: 1px #dfdfdf solid;
}

.theme .themebox:last-of-type{
  border-bottom: none;
}

.theme .themebox .photo{
  position: relative;
  width: 25%;
}

.theme .themebox .photo p{
  position: absolute;
  display: block;
  width: 80%;
  margin: -25px 10% 0px;
  padding: 3px 0px;
  color: #202020;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  border-radius :5px;
  border: 1px #dfdfdf solid;
  background: #fff;
  z-index: 1;
}

.theme .themebox .photo p span{
  display: block;
  color: #f39600;
  font-size: 1.3rem;
}

.theme .themebox .photo img{
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.theme .themebox .text{
  width: 75%;
  text-align: left;
}

.theme .themebox .text p{
  margin: 15px 25px;
  line-height: 1.6;
}


@media only screen and ( max-width: 1019px ){
  .staffroom{
    margin: 50px 0px 0px;
    padding: 50px 0px;
    background: #f9f9f9;
  }

  .theme{
    width: auto;
    margin: 80px 25px 0px;
  }

  .theme h3{
    margin: -25px 10% 0px;
    width: 80%;
  }

  .theme .themebox{
    margin: 30px 25px 0px;
    padding: 0px 15px 40px;
  }

  .theme .themebox .photo{
    width: 30%;
  }

  .theme .themebox .text{
    width: 70%;
  }

  .theme .themebox .text p{
    font-size: 1.6rem;
  }
  }


@media only screen and ( max-width: 640px ){
  .staffroom{
    margin: 70px 0px 0px;
    padding: 80px 0px;
  }

  .theme{
    margin: 80px 15px 0px;
  }

  .theme h3{
    margin: -25px 7.5% 0px;
    width: 85%;
    padding: 10px 0px;
    font-size: 1.7rem;
  }

  .theme .themebox{
    flex-direction: column;
    margin: 30px 15px 0px;
    padding: 0px 15px 15px;
  }

  .theme .themebox .photo{
    width: 100%;
    margin-bottom: 30px;
  }

  .theme .themebox .photo p{
    font-size: 1.7rem;
  }

  .theme .themebox .text{
    width: 100%
  }

  .theme .themebox .text p{
    margin: 15px 0px;
  }

  .theme .themebox .text p br{
    display: none;
  }
}


/*
  お客様の部屋
*/

.customer .customerbox{
  width: 1000px;
  display: flex;
  align-items: center;
  margin: 30px auto 0px;
  padding: 15px;
  border: 1px #dfdfdf solid;
  border-radius: 5px;
  box-shadow: 5px 5px 0px 0px #dfdfdf;
}

.customer .customerbox:first-of-type{
  margin: 70px auto 0px;
}

.customer .customerbox figure{
  width: 300px;
}

.customer .customerbox figure img{
  width: 100%;
  height: auto;
  border: 1px #dfdfdf solid;
  border-radius: 5px;
}

.customer .customerbox .text{
  width: calc( 100% - 300px );
  text-align: left;
}

.customer .customerbox .text p{
  margin: 15px 20px 0px;
  font-size: 1.6rem;
}

.customer .customerbox .text p.name{
  margin: 15px;
  padding: 10px 10px 0px;
  color: #202020;
  font-weight: bold;
  border-top: 1px #9f9f9f dotted;
  text-align: right;
}


@media only screen and ( max-width: 1019px ){
  .customer .customerbox{
    width: auto;
    margin: 30px 25px 0px;
  }

  .customer .customerbox:first-of-type{
    margin: 70px 25px 0px;
  }
}

@media only screen and ( max-width: 640px ){
  .customer .customerbox{
    flex-direction: column;
    margin: 30px 15px 0px;
    padding: 15px;
  }

  .customer .customerbox:first-of-type{
    margin: 50px 15px 0px;
  }

  .customer .customerbox figure{
    width: 100%;
  }

  .customer .customerbox .text{
    width: 100%;
  }

  .customer .customerbox .text p{
    margin: 15px 0px 0px;
    font-size: 1.5rem;
  }
}



.customer2 .customer-slick{
  width: 972px;
  margin: 30px auto 0px;
}

.customer2 .customer-slick .customerbox{
  display: flex !important;
  align-items: center;
  margin: 30px auto 0px;
  padding: 15px;
  border: 1px #dfdfdf solid;
  border-radius: 5px;
  box-shadow: none;
}

.slick-dots{ display: block; width: 100%; margin: 10px 0px; text-align: center; }
.slick-dots li{ position: relative; display: inline-block; width: 50px; height: 7px; margin: 0px 7px; cursor: pointer; }
.slick-dots li button{ display: block; width: 50px; height: 7px; color: transparent; font-size: 0; line-height: 0; border: 0; outline: none; background: transparent; cursor: pointer; }
.slick-dots li button:hover::before, .slick-dots li button:focus::before{ background: #f39600; opacity: 1; transition: 0.3s; }
.slick-dots li button::before{ position: absolute; top: 0; left: 0; width: 50px; height: 7px; content: ''; opacity: .25; background: #4f4f4f; }
.slick-dots li.slick-active button::before{ opacity: 1; background: #f39600; }

.slick-prev, .slick-next{ position: absolute; display: block; top: 50%; padding: 0; font-size: 0; line-height: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; z-index: 100; }

.slick-next{ right: -14px; }
.slick-prev{ left: -14px; }
.slick-prev:before, .slick-next:before{ font-size: 4.6rem; font-family: "Font Awesome 5 Free"; content: '\f104'; color: #f39600; font-weight: 900; }
.slick-next:before{ content: "\f105"; }

.slick-slider{ position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus{ outline: none; }
.slick-list.dragging{ cursor: pointer; cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: ranslate3d(0, 0, 0); }
.slick-track{ position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before,.slick-track:after{ display: table; content: ''; }
.slick-track:after{ clear: both; }
.slick-loading .slick-track{ visibility: hidden; }
.slick-slide{ display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide{ float: right; }
.slick-slide img{ display: block; }
.slick-slide.slick-loading img{ display: none; }
.slick-slide.dragging img{ pointer-events: none; }
.slick-initialized .slick-slide{ display: block; }
.slick-loading .slick-slide{ visibility: hidden; }
.slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden{ display: none; }


@media only screen and ( max-width: 1019px ){
  .customer2 .customer-slick{
    width: auto;
    margin: 30px 25px 0px;
  }
}

@media only screen and ( max-width: 640px ){
  .customer2 .customer-slick{
    margin: 30px 15px 0px;
  }

  .customer2 .customer-slick .customerbox{
    flex-direction: column;
  }
}






.pet{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1000px;
  margin: 0px auto;
}

.pet h2{
  width: 100%;
}

.pet .petbox{
  position: relative;
  width: 48%;
  margin: 100px 0px 0px;
  padding: 15px 0px;
  border: 1px #dfdfdf solid;
  border-radius: 5px;
  box-shadow: 5px 5px 0px 0px #dfdfdf;
}

.pet .petbox figure{
  margin: -50px 15px 0px;
}

.pet .petbox figure img{
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.pet .petbox dl{
  position: absolute;
  width: 80%;
  margin: -60px 10% 0px;
  padding: 10px;
  border-radius: 5px 5px 0px 0px;
  background: rgba( 255, 255, 255, 0.8);
  z-index: 999;
}

.pet .petbox dl dt{
  color: #f39600;
  font-weight: bold;
  line-height: 1.3;
}

.pet .petbox dl dd{
  color: #6f6f6f;
}

.pet .petbox p{
  margin: 15px 20px 0px;
  font-size: 1.6rem;
  text-align: left;
}

.pet .petbox p.name{
  margin: 15px 15px 0px;
  padding: 10px 10px 0px;
  color: #202020;
  font-weight: bold;
  border-top: 1px #9f9f9f dotted;
  text-align: right;
}


@media only screen and ( max-width: 1019px ){
  .pet{
    width: auto;
    margin: 0px 25px;
  }

  .pet h2{
    margin-bottom: 30px;
  }

  .pet .petbox{
    width: 48.5%;
    margin: 70px 0px 0px;
  }

  .pet .petbox dl{
    width: 85%;
    margin: -50px 7.5% 0px;
  }

  .pet .petbox dl dt{
    font-size: 1.6rem;
  }

  .pet .petbox dl dd{
    font-size: 1.5rem;
  }

  .pet .petbox p{
    margin: 15px 20px 0px;
    font-size: 1.6rem;
  }

  .pet .petbox p:first-of-type{
    margin: 30px 20px 0px;
  }
}


@media only screen and ( max-width: 640px ){
  .pet{
    flex-direction: column;
    margin: 0px 15px;
  }

  .pet .petbox{
    width: 100%;
    margin: 80px 0px 0px;
  }

  .pet .petbox p{
    font-size: 1.5rem;
  }
}