body,input,textarea,select,button{
  font-family: 'Kiwi Maru', sans-serif;
  font-size: 16px;
  color: #111;
}
body{
  overflow: hidden;
}
header{
  width: calc(100% - 50px);
  position: fixed;
  top: 0;
  left:25px;
  display: flex;
  padding: 30px 0;
  justify-content: space-between;
  z-index: 1000;
}
section{
  padding: 120px 0;
}
a{
  color: #1e90ff;
}
.wrap{
  width: calc(100% - 70px);
  max-width: 1200px;
  margin: 0 auto;
}
.ofi{
  object-fit: cover;
}
.anim{
  transition: .3s all ease;
}
#head_logo{
  width: 200px;
  transition: .5s all ease;
}
#head_logo{
  fill: #000;
}
#head_logo:hover{
  fill: tomato;
}
#head_menubt{
  width: 50px;
  height: 20px;
  position: relative;
  transition: .4s ease all;
}
#head_menubt:hover{
  height: 30px;
}
#head_menubt::before,#head_menubt::after{
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  transition: .4s ease all;
}
#head_menubt::before{
  border-top: 2px solid #000;
  top: 0;
}
#head_menubt::after{
  border-top: 2px solid #000;
  bottom: 0;
}
#head_menubt:hover::before,#head_menubt:hover::after{
  border-color: tomato;
}
.title_area{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.title_area h2,.title_area h3{
  font-family: 'Poppins','Kiwi Maru', sans-serif;
  font-weight: normal;
}
.dog_title .cls-1{
  fill:#fff;
}
.dog_title,.work_title{
  width: calc(100% - 80px);
  max-width: 600px;
  margin: 0 auto;
}
.dog_title h3,.work_title h3{
  font-size: 300%;
}
.dog_title svg,.work_title svg{
  width: 30%;
}
.work_title h3{
  margin: 10px 0;
}

.plant1 .cls-1,.plant2 .cls-1,.plant3 .cls-1,.plant4 .cls-1{
  fill:#332114;
}
.plant1 .cls-2,.plant3 .cls-3,.plant4 .cls-2{
  fill:#fff;
}
.plant3 .cls-2{
  fill:#733280;
}
.plant4 .cls-3{
  fill:yellow;
}

/* サイトマップ */
#sitemap{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2000;
  left:0;
  top: -100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#menu_close{
  position: fixed;
  right: -100%;
  top: 40px;
  transition: .5s all ease;
  width: 60px;
  height: 60px;
  display: block;
  background: #331907;
  border-radius: 50%;
}
#menu_close::before,#menu_close::after{
  position: absolute;
  content: "";
  border-top: 2px solid #fff;
  width: 40px;
  height: 1px;
  top: calc(50% - 1px);
  left: calc(50% - 20px);
  transition: .3s all ease;
}
#menu_close::before{
  transform: rotate(45deg);
}
#menu_close::after{
  transform: rotate(-45deg);
}
#sitemap.active #menu_close{
  right: 40px;
}
#menu_close:hover{
  background: tomato;
}
#menu_close:hover::before{
  transform: rotate(-45deg);
  top: calc(0% + 14px);
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
  border-right: 2px #fff solid;
}
#menu_close:hover::after{
  transform:rotate(-90deg);
}
#menu_area{
  width: 50%;
}
#menu_area .title{
  display: flex;
  flex-direction:column;
  margin: 0 auto;
  width: 50%;
}
#menu_area .title h2{
  font-size: 400%;
  text-align: center;
  margin: 16px 0;
}
#menu_area .title svg{
  display: block;
  margin: 0 auto;
}
#menu_title_foot{
  transform: rotate(180deg);
}
#menu_area nav ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 30px 0;
}
#menu_area nav li{
  width: calc(28%);
  padding: 25px 0;
  margin: 10px 2.5%;
  text-align:center;
  position: relative;
  transition: .3s ease all;
  background-image: url(../images/menu_frame_l.svg), url(../images/menu_frame_r.svg);
  background-position:left 0% center,right 0% center;
  background-repeat: no-repeat,no-repeat;
}
#menu_area nav li:hover{
  color: #b8860b;
}
#menu_area nav li a{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  z-index: 1;
}
#menu_area nav li h3{
  font-size: 150%;
}
#menu_area nav li small{
  font-size: 70%;
}

/* loading */
#loading{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999;
  background: #fff;
  top:0;
  left:0;
}
#loading .top,#loading .foot{
  position: absolute;
  width: 100%;
  left:0;
  height: 50%;
}
#loading .top{
  top:0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
#loading svg{
  fill: #000;
}
#loading .top svg{
  width: 80px;
}
#loading svg .cls-1{
  fill:none;
}
#loading .foot{
  height: 50%;
  bottom:0;
}
#loading .foot span{
  display: block;
  margin-top: 25px;
  text-align:center;
  font-size: 30px;
  font-family: 'Reenie Beanie', cursive;
  letter-spacing: .2rem;
  font-weight: bold;
}
#loading .foot_area{
  width: 51%;
  height: 50%;
  top:50%;
  right: 0%;
  position: fixed;
  overflow: hidden;
}
#loading .foot img{
  width: 20%;
  position: absolute;
  top:0;
}
#loading_bar1{
  left: -20%;
}
#loading_bar2{
  left: -40%;
}
#loading_bar3{
  left: -60%;
}
#loading_bar4{
  left: -80%;
}
#loading_bar5{
  left: -100%;
}
#loading_bar6{
  left: -120%;
}

.col2{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.text_box{
}
.text_box h4{
  font-size: 150%;
  line-height: 260%;
  margin-bottom: 30px;
}
.text_box p{
  line-height: 220%;
  font-size: 110%;
}
.text_box .bt_area{
  margin-top: 30px;
}
.frame_1{
  clip-path: polygon(38% 0, 100% 3%, 91% 54%, 96% 93%, 63% 98%, 3% 97%, 4% 43%, 2% 3%);
}
.frame_2{
  clip-path: polygon(71% 0, 100% 8%, 96% 71%, 98% 99%, 34% 96%, 6% 94%, 1% 26%, 4% 4%);
}
.frame_3{
  clip-path: polygon(57% 3%, 93% 0, 100% 41%, 99% 92%, 61% 99%, 4% 100%, 7% 55%, 2% 2%);
}
.frame_4{
  clip-path: polygon(30% 2%, 99% 5%, 98% 63%, 96% 99%, 30% 96%, 11% 98%, 6% 85%, 0 10%);
}
.frame_5{
  clip-path: polygon(67% 7%, 93% 1%, 100% 21%, 94% 94%, 60% 100%, 3% 100%, 1% 40%, 4% 2%);
}
.frame_6{
  clip-path: polygon(56% 8%, 99% 0, 94% 57%, 100% 99%, 28% 97%, 0 95%, 1% 21%, 1% 2%);
}
.bt_area a,.bt_area button,.bt_area a::before,.bt_area button::before,
.bt_area a::after,.bt_area button::after{
  transition: .3s all ease;
}

.bt_area a,.bt_area button{
  padding: 10px 20px;
  text-align:center;
  position: relative;
  font-weight: bold;
  color: #331907;
  display: inline-block;
  font-size: 130%;
  border: 2px solid #331907;
  border-radius: 50px;
  margin-right: 15px;
  margin-top: 10px;
  overflow: hidden;
  vertical-align:top;
}
.bt_area a:hover,.bt_area button:hover{
  background: #331907;
  color: #fff;
}

/* 背景アニメーション */
.backanim{
  position: relative;
  overflow: hidden;
  padding: 200px 0;
}
.backanim_head svg,.backanim_foot svg{
  width: 10%;
  position: absolute;
}
.backanim_head,.backanim_foot,.backanim_color{
  position: absolute;
  width: 100%;
  left:0;
}
.backanim_head,.backanim_color{
  top:0;
}
.backanim_foot{
  bottom: 0;
}
.backanim_head,.backanim_foot{
  height: 10%;
  z-index: -1;
}
.backanim_head svg,.backanim_foot svg{
  transition: .5s all ease;
}
.backanim_color{
  height: 100%;
  z-index: -2;
}
.backanim_head svg{
  transform: rotate(180deg);
}
.backanim_head.monofade svg{
  top: -1000%;
}
.backanim_foot.monofade svg{
  bottom: -1000%;
}
.backanim_foot svg,.backanim_foot.monofade.monoact svg{
  bottom: 0;
}

/* インスタ表示 */
.insta_area ul{
  display: flex;
  width: calc(100% - 80px);
  max-width: 1200px;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 50px auto 20px;
}
.insta_area li{
  width: calc(25% - 30px);
  position: relative;
  margin-right: 40px;
  margin-bottom: 40px;
  overflow: hidden;
}
.insta_area li:nth-child(4n+4){
  margin-right:0;
}
.insta_area li::before{
  width: 100%;
  padding-top: 100%;
  content: "";
  display: block;
}
.insta_area li img,.insta_area li a{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
.insta_area li a{
  z-index: 2;
}
.insta_area li img{
  z-index: 1;
  transition: .8s all ease;
}
.insta_area li:hover > img{
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  top: -15px;
  left: -15px;
}
.insta_area li:nth-child(9){
  display: none;
}

footer{
  background: #331907;
  padding: 100px 0;
  color: #fdf5e6;
}
footer a{
  color: #fdf5e6;
  transition: .3s all ease;
}
footer a:hover{
  color: #87cefa;
}
footer .wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer_box{
  width: calc(25% - 20px);
}
#footer_logo{
  width: calc(100% - 40px);
  fill:#fdf5e6;
}
.footer_box h3{
  font-size: 110%;
  padding-bottom: 20px;
  border-bottom: 1px solid #fdf5e6;
  margin-bottom: 20px;
}
.footer_box li{
  margin: 10px 0;
}
#copyright{
  font-size: 70%;
  color: #fdf5e6;
  opacity: .5;
}
#footer_head{
  width: 100%;
  position: relative;
  background: #fff;
}
#footer_anim_dog{
  position: absolute;
  width: 8%;
  bottom: 0;
  right: 10%;
  overflow: hidden;
}
#footer_anim_dog::before{
  padding-top: 155%;
  content: "";
  display: block;
}
#footer_anim_dog svg{
  position: absolute;
}
#footer_anim_dog svg .cls-2{
  fill:#fff;
}
#footer_anim_dog svg .cls-1{
  fill:#331907;
}
#footer_anim_dog .dogsvg_16{
  z-index: 2;

  width: 80%;
  left: 10%;
  top: 0%;
}
#footer_anim_dog .dogsvg_2{
  bottom: -5%;
  left: 0;
  z-index: 3;

}
#footer_anim_dog .dogsvg_19{
  z-index: 1;
  width: 8%;
  left: 30%;
  animation: footanim1 0.8s infinite linear;
}


#footer_anim_dog .dogsvg_20{
  width: 8%;
  left: 50%;
  z-index: 1;
  animation: footanim3 1s infinite linear;

}
#footer_anim_dog .dogsvg_21{
  z-index: 1;
  width: 8%;
  left: 65%;
  animation: footanim2 0.9s infinite linear;

}

@keyframes footanim1{
  0% {
    top:5%;
  }
  80% {
    top:70%;
  }
}
@keyframes footanim2{
  10% {
    top:5%;
  }
  90% {
    top:70%;
  }
}
@keyframes footanim3{
  20% {
    top:5%;
  }
  100% {
    top:70%;
  }
}

.subtitle{
  text-align:center;
}
.subtitle h3{
  font-size: 200%;
}
.subtitle svg{
  display: block;
  width: 120px;
  margin: 5px auto 0;
}

#err_section{
  text-align:center;
  font-size: 200%;
}
#err_section h2{
  margin-bottom: 40px;
}

/* 画像のスライドショー */

.img_slideshow{
  width: 100%;
  overflow: hidden;
  position: relative;
}
.img_slideshow img{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 1s;
}
.img_slideshow img.active{
  opacity: 1;
}
.img_slideshow::before{
  content: "";
  display: block;
}

/* タイトルと文章で構成されたコンテンツ */
.list_text{
  margin-top: 40px;
}
.list_text li{
  background: #f5f5f5;
  padding: 20px 30px;
  margin: 10px auto 0;
}
.list_text li .subtitle h3{
  font-size: 160%;
}
.list_text li .subtitle{
  margin-bottom: 10px;
}
.list_text li .subtitle svg{
  width: 90px;
}
.list_text li .subtitle svg .cls-1{
  fill: #555;
}

.list_text li p{
  font-size: 110%;
  margin: 10px 0;
}
.list_text li .bt_area a{
  display: block;
  width: calc(100% - 40px);
  max-width: 300px;
  margin: 20px auto 0;
  text-align:center;
}

/* お問い合わせの冒頭 */
#contact_head .wrap{
  margin-top: 40px;
}
#contact_head .wrap p{
  text-align:center;
}
#contact_head .wrap ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
}
#contact_head .wrap li{
  width: calc(33% - 20px);
  background: #f5f5f5;
  padding: 30px;
  text-align:center;
}
#contact_head .wrap li:first-child{
  display: none;
}
#contact_head .wrap li h4{
  font-size: 140%;
  margin-bottom: 10px;
}
#contact_head .wrap li strong{
  font-size: 140%;;
}
#contact_head .wrap li dl{
  margin-top: 10px;
}
#contact_head .wrap li dt{
  font-size: 80%;
  color: #a0522d;
}
#contact_head .wrap li p{
  text-align:left;
}
#contact_head .wrap li img{
  height: 150px;
  margin-top: 7px;
}
#contact_head .wrap li .bt_area{
  margin-top: 10px;
}

.form_area input[type="radio"],.form_area input[type="checkbox"]{
  display: none;
}
.form_area input[type="radio"] + label,.form_area input[type="checkbox"] + label{
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
  background: #777;
  display: inline-block;
  cursor: pointer;
  margin: 0 5px 5px 0;
}
.form_area input[type="radio"]:hover + label{
  background: #87ceeb;
}
.form_area input[type="radio"]:checked + label{
  background: #1e90ff;
}

.form_area input[type="checkbox"]:hover + label{
  background: #90ee90;
}
.form_area input[type="checkbox"]:checked + label{
  background: #3cb371;
}
.form_area input[type="text"],.form_area input[type="number"],.form_area input[type="tel"],.form_area input[type="email"],.form_area input[type="date"],.form_area textarea{
  background: #fff;
  padding: 5px 10px;
  border: 1px solid #aaa;
  display: block;
}
.form_area textarea{
  width: 100%;
  height: 100px;
}
.form_area dl{
  padding: 20px 0;
  border-top: 1px solid #aaa;
  width: 100%;
  max-width: 800px;
  margin: 0px auto;
  display: flex;
  align-items: center;
}
.form_area dt{
  width: 30%;
}
.form_area dt.hissu::after{
  content: "※";
  color: red;
  font-size: 70%;
  margin-left: 3px;
}
.form_area dd{
  width: 70%;
}
.form_area dd p{
  color: #444;
  font-size: 90%;
  margin: 4px 0;
}
.form_area dd p strong{
  color: #e00;
}
.form_area dt span.nini,.form_area dt span.hissu{
  display: block;
}
.form_area dt span.nini::before,.form_area dt span.hissu::before{
  display: block;
  width: 60px;
  padding: 3px 0;
  text-align:center;
  color: #fff;
  font-size: 70%;
  margin-top: 5px;
}
.form_area dt span.nini::before{
  background: #777;
  content: "任意";
}
.form_area dt span.hissu::before{
  background: #c00;
  content: "必須";
}

.form_area small{
  color: #555;
  font-size: 80%;
  display: block;
  margin-top: 5px;
}

.close_bt{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: block;
  position: fixed;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: none;
  transition: .3s ease all;
}
.close_bt:hover{
  background: #fffacd;
}
.close_bt::before,.close_bt::after{
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 15px);
  width: 30px;
  height: 3px;
  background: #331907;
}
.close_bt::before{
  transform:rotate(45deg);
}
.close_bt::after{
  transform:rotate(-45deg);
}

.line_geji{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin : 20px auto;
}
.line_geji svg{
  width: 20%;
}
.line_geji .cls-1{
  fill: #d2b48c;
}
#poricy_section h2{
  font-size: 160%;
  text-align:center;
}
#poricy_section li{
  list-style-type: disc;
  margin: 15px 0 15px 20px;
}