﻿@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap');
@font-face {
    font-family: 'NikumaruFont';
    font-style: normal;
    font-weight: 400;
    src: url('./Dup/img/Nikumaru.woff') format('woff'),
        url('./Dup/img/Nikumaru.eot')  format('eot');
    font-display: swap;
}


.font1,
body,
.en_font{
    font-family:'Zen Maru Gothic',  "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.font2,
#intro h2{
    font-family: 'Patrick Hand SC', cursive;
}
.font_niku,
#top_cms h3,
#page_title h2{
    font-family:'NikumaruFont','Zen Maru Gothic',  "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height:1.5;
}
.font_14{
    font-size:18px;
}
.width_250{
    width:250px;
}

.linkStyle{
    color:#f08354;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}

/*
#header{opacity: 1!important;;}
#wrap {padding-left: 300px!important;}
.fix_bnr,
#page-top{
    position:absolute!important;
}
.fix_bnr{
    right:0!important;
}
#body{
    overflow:hidden;
}
*/

/*--all page---------------------------
-------------------------------------*/
body{
    line-height:2;
    background-image: url(./Dup/img/bg.jpg);
    background-size:cover;
    background-attachment: fixed;
}
#wrap{
    padding-right:0;
}

#header h1{
    width: 65%;
    margin: auto;
    margin-bottom: 10px;
}
#header li{
    margin-bottom:5px;
}
.close_menu span{
    font-size:14px;
}
#main_wrap{
    background-color:transparent;
}
.sns_links.side_bar{
    z-index:2;
}
#footer{
    background: url(./Dup/img/wood.jpg) repeat-y;
    background-size: 100% 500px;
    padding: 50px 0;
    position:relative;
}
#footer:before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(35,24,20,0.3);
    top:0;
    left:0;
    z-index:1;
}
#footer #map{
    position:relative;
    z-index:2;
}
#footer_txt{
    position:relative;
    color:#fff;
    padding-right:50px;
    z-index:2;
}
#footer_txt .tel a{
    color: #f9e191;
}
#footer_txt .tel a:hover{
    transition:all 0.3s;
    transform:translateY(-3px);
}
.fix_bnr{
    position:fixed;
    bottom:90px;    
    z-index:99;
}
.fix_bnr a{
    width: 60px;
    line-height: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.open_menu{
    font-size:14px;
}
.more > div a:hover{
    color: #f08354;
    box-shadow:none;
}


/*--top page---------------------------
-------------------------------------*/
.maru{
    width: 30vw;
    height: 60vh;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    right: 0;
    margin: auto;
    z-index:1;
}
.catch_box{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    right: 0;
    margin: auto;
    text-align: center;
    z-index:2;
    text-shadow: 0 0 15px #d49e58;
}
.catch1{
    font-size:5rem;
}
.catch2{
    font-size:3rem;
}
/*ローディング後にフェードイン*/
.load-fade {opacity : 0; transition : all 2s/*処理にかかる時間*/;}
.load-fade.done{opacity : 0.5; ;}

/*ローディング後にポヨン*/
.poyoyon2{opacity:0;}
.poyoyon2.is-animated{
    opacity:1;
    animation: poyoyon2 1s ease-in-out 1 forwards;
}
 
@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform:scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform:scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
#intro{
    position:relative;
    background: url(./Dup/img/neko_bg.png) no-repeat;
    background-position: top right;
    background-size: 450px;
}
#intro figure{
    border-radius:20px;
}
.intro_txt_box{
    padding-left: 5%;
    padding-top:150px;
}
#intro h2:before,
#contents1 h4:before,
#contents2 h3:before{
    content:'';
    position:absolute;
    display:block;
    width:70px;
    height:70px;
    background:url(./Dup/img/shikaku1.png) no-repeat;
    z-index:2;
}
#intro h2:before{
    top:-80px;
    left:-100px;
}
.about_bnr a,
.menu_bnr a,
.contact_bnr a{
    border-radius:50px;
}
#contents1 h4{
    position:relative;
}
#contents1 h4:before{
    top:-60px;
    left:-80px;    
}
#contents2 h3:before{
    top:-60px;
    left:-80px;     
}
#contents1 .slick .square_img{
    border-radius:20px 0 0 20px;
}
.hito{
    margin-right: 0;
    margin-left: auto;
}
#contents2 > div{
    text-shadow: 0 0 15px #d49e58;
}
#contents2 .hito2{
    width:250px;
    right:100px;
    bottom:-30px;
    z-index:1;
}
#top_cms{
    background:url(./Dup/img/neko2_bg.png) no-repeat;
    background-size:300px;
    background-position:bottom -50px left;
}
.v_type3 .cate_box{border: 1px solid #c9baa9;}
.v_type3 .box_title1{color: #a67c52;}



/*--under page---------------------------
-------------------------------------*/
#page08 .tel_txt span{
    width:150px;
}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#header h1{
    max-width: 100px;
    padding-left:10px;
}
.maru {
    width: 50vw;
    height: 35vh;
}
#intro{
    background: url(./Dup/img/neko_bg_tb.png) no-repeat;    
    background-position: top 620px right;
    background-size: 350px;
}
#intro h2:before{
    left:-30px;
}
.intro_txt_box{
    padding-right: 5%;
    padding-top: 20px;
}
#contents1 .slick .square_img{
    border-radius:20px;
}
#contents1 h4:before {
    top: -80px;
    left: -60px;
}
.hito{
    width:220px;
}
#contents2 > div {
    background-color: rgba(222,144,76,0.5);
}
#contents2 h3:before {
    top: -80px;
    left: -40px;
}

#contents2 .hito2{
    width: 220px;
    right: 30px;
}

#footer_txt{
    padding-right:5%;
}
footer .logo img {
    max-width: 150px;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#header h1 {
    padding-left:20px;
}
.maru {
    width: 60vw;
    height: 30vh;
}
.catch1 {
    font-size: 2.5rem;
}
.catch2 {
    font-size: 1.5rem;
}
#intro h2:before {
    left: -10px;
}
#contents1 h4{
    font-size:26px;
    letter-spacing: 0px;
}
#contents1 h4:before {
    left: -30px;
}
.hito{
    width:180px;
}
#contents2 h3:before {
    left: -10px;
}
#contents2 .hito2 {
    width: 180px;
    right: 10px;
}
#top_cms{
    background-size:200px;
}
.fix_bnr{
    bottom:60px;
}
.fix_bnr a {
    width: 40px;
    line-height: 40px;
}
#footer_txt .tel a{
    font-size:36px;
}
.page3 #page_title h2{
    letter-spacing: 1px;
}
#page08 .tel_contact .font_14{
    font-size: 17px;    
}
#page08 .tel_txt .box{
    display:block;
}
#page08 .tel_contact h4{
    margin-right:0;
}
#page08 .tel_txt span{
    writing-mode: horizontal;
}
#page08 .tel_contact .box p{
    text-align:center;
}

.intro_txt_box{
    padding-right:50px;    
}
#contents1 .flex_order2_tb{
    padding-right:30px;
}
#contents2 > div{
    padding-right: 50px!important;
}
#contents2 h3{
    font-size: 1.7rem;
    letter-spacing: 0;
}

}







