@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');

/* color-------------------------------------------------------------------- */
body{color:#5a4c4e;
    background-color:#FFF5EE;}

.txt_color_nomal {color: #5a4c4e;}
.txt_color1,.hvr_txt_color1:hover{color: #dc8585} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #ffd5dc} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #eda58e} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #FFB6C1} /* アクセントカラー2 */
/* background-color */
.bg_color1,.hvr_bg_color1:hover{background-color: #dc8585} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #ffd5dc} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #eda58e} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #FFB6C1} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #dc8585}
.border_color2,.hvr_border_color2:hover{border-color: #ffd5dc}
.border_color3,.hvr_border_color3:hover{border-color: #eda58e}
.border_color4,.hvr_border_color4:hover{border-color: #FFB6C1}

.button:hover::after { box-shadow: inset 0 0 0 15em #dc8585 !important;}
.button2:hover { box-shadow: 0 0 20px #dc8585 inset;}
.txt_shadow-b { text-shadow: 0 5px 10px #eda58e inset;}
header{background:#ffede0 !important;}
#main_menu ul li a:hover {color: #eda58e;}



/*linkStyle*/
a.linkStyle {
    color: #dc8585;
    transition: 0.5s;
}
a.linkStyle:hover {
    color: #dc8585;
}
#main_menu ul li a,.contact_bt a, .tel_bt a { color: #dc8585;}
.contact_bt a, .tel_bt a {
    color: #eda58e;
    border-color: #eda58e}
#main_menu ul li a::before{background-color: #eda58e}
.contact_bt a:hover, .tel_bt a:hover {border-color: #dc8585;}


.free_bt a { color: #f9f6f4;
            background:#eda58e;
            border-color:#eda58e;
            z-index: 2;}
.free_bt a:hover {border-color: #eda58e;
                  z-index: 0;}
.free_bt_a:hover::after { box-shadow: inset 0 0 0 15em #eda58e !important;}

div#contents3 p {color: #5a4c4e;}
div#contents3 p.con_no {color: #eda58e !important;}
div#contents3 h3 {color: #dc8585;}
ul.cate_list li a,ul.pager li a,section#page10 ul li a {
    border-radius: 5px;
    background: #FFF5EE;
    border: dotted 1px;}

section#page10 ul li a:hover {
    border-radius: 5px;
    background: #dc8585 !important;
    border: dotted 1px;
}

/* color-------------------------------------------------------------------- */


/* font---------------------------------------------------------------------*/

.font_14 {font-size: 15px;}
/*.txt2, .txt4, .txt5, .txt7,.txt4_a {font-weight: 700;}*/
/*.box_title1{font-weight:600;}*/

body{font-family:'Zen Kaku Gothic Antique',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}
.font_en,#main_menu ul li a,h1,h2,h3,h4,h5,h6,#cms_2-c .box_txt1,.cate_title,.topcms_about_type1 .number::before,.topcms_about_type1 p,.kiwi{
    font-family: 'Kiwi Maru','Zen Kaku Gothic Antique',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}

#main_menu ul li a{font-size:16px;}
/* font---------------------------------------------------------------------*/

/*border-radius----------------------------------------------------------------*/
.normal_img img, .rectangle_img, square_img,.box_wrap, ul.pager li a,section#page10 ul li a,#contact_mail a,#contact_tel a { border-radius: 5px;}
ul.cate_list li a,.contact_bt a,.more a,.foot_tel_bt a,.free_bt a{border-radius: 5px;}
/*border-radius----------------------------------------------------------------*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
body#body {overflow: hidden;}
/*装飾に便利なposi_rel*/
#contents_box,div#contents2,div#contents4,#contents1 {position: relative;}
.con1_outer, .con2_outer, .con3_outer {position: relative;}
.img5, .img6, .img7 {position: relative;}
/*装飾に便利なposi_rel*/

/*装飾に便利な疑似クラス設定*/
#main_img::before, #main_img::after, #contents_box::before, .con1_outer::after, #attach::before, .con2_outer::before, #page_title .title_img::after,article .width_1280-max::before,div#contents1::before,div#contents1::after,div#contents3::before,div#contents2::before,div#contents4::before {
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}
.img5::before, .img6::before, .img7::before {
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;}
/*装飾に便利な疑似クラス設定*/

#main_img::before{
        background: url(dup/img/catch.png);
        width: 41vw;
        height: 38vh;
        top: 50%;
        left: 50%;
        transform: translate(-57%,-52%);
        z-index: 5;
        background-size: contain;
        background-repeat: no-repeat;
}
div#contents3 {
    background: url(dup/img/bg_img.png);
}

.con1_outer::after {
    width: 101%;
    height: 48px;
    background-image: url(./Dup/img/item01.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: -47px;
    left: 0;
    transform: scale(-1,-1);
    z-index: 2;
}

.con2_outer::before {
    width: 101%;
    height: 48px;
    background-image: url(./Dup/img/item01.png);
    background-repeat: no-repeat;
    background-size: cover;
    top: -48px;
    left: -1px;
}

/*.inst_banner {width: 40vw;}*/
#attach {height: 400px;}

div#contents2::before {
    background: url(dup/img/item02.png);
    width: 8vw;
    height: 15vh;
    right: 0%;
    bottom: 0%;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 6% 6% 0;
}

a.inst_banner, .rec_banner {width: 40%;}
.bnr{transform: translate(-50%,-60%);}



/*犬*/
div#contents2::before{animation: poyooon 1s infinite;}

@keyframes poyooon {
  0%,100% {bottom: 4%;transform: scale(1);}
  /*30% {bottom: 4%; transform: scale(1,1);}*/
  /*60% {transform: scale(1);}*/
  50% {bottom: 5%;transform: scale(1,1);}}
/*犬*/

/*1600*/
@media screen and (max-width: 1600px){
div#contents2::before {
    width: 7vw;
    height: 13vh;
    margin: 0 2% 3% 0;    }
}

/*足跡犬----------------------------------------------------------------*/
.stepsTrigger{
	opacity:0;
}

.stepsTrigger.steps {
    bottom: 4%;
    position: absolute;
    right: 2%;
    z-index: 5;
    transform: scale(1.3);
}

.steps{
  width: 200px;/*1フレーム分の横幅*/
  height: 200px;/*1フレーム分の縦幅*/
  background: url("dup/img/steps.png") no-repeat;/*背景画像の読み込み*/
  animation: stepsline 1s steps(3) forwards;
	/*stepsline→アニメーション名
    1s→アニメーションをする時間
    step→（）の中には、アニメーション制作コマ数-1の値を入れる（例：4コマ-1コマ=3コマ）
    forwards→最後の形を維持*/
}


@keyframes stepsline {
  0% {
    opacity:0;
    background-position: 0 0;
  }
  100% {
    opacity:1;
    background-position: -600px 0;/*アニメーション制作コマ数から1コマ分引いた横幅を指定。
（例：今回は1フレーム横幅100pxで制作しているので全体の400px-100px=300px⇒-300px）を指定。*/
  }
}
/*足跡犬----------------------------------------------------------------*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.page_inner {
    background: url(dup/img/bg_img.png);
    padding: 5%;
    position: relative;
    border-radius: 5px;
    background-attachment: fixed;
}


#cms_3-c .cate {
    background: #fff5ee;
    padding: 20px;
    border-radius: 5px;
    border: solid #ffefe4;
}

#page_title .title_img {background-position: center bottom 33%;}

.page_box p {border-bottom: dotted 2px;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.fa-external-link:before {content: "\f35d";}

.line_banner a {
    color: #06c755;
    background: #FFF5EE;}
.line_banner a:hover {
    color: #FFF5EE;
    background: #06c755;}
    
.line_banner a {
    font-size: 17px;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*タブレット*/
@media screen and (max-width: 768px){
    
header #logo {
    padding: 0 10px;
    max-width: 290px;}
section#page_title {padding-top: 8px;}

ul.cate_list {
    justify-content: left;
    align-items: flex-start;}

.main_box {padding-top: 77px;}
.main_box_top {padding-top: 95px;}

#main_img img {
    max-height: 85vh;
    min-height: 85vh;
    position: relative;
    object-fit: contain;
}
#main_img::before {
    width: 64vw;
    height: 24vh;
    transform: translate(-52%,-70%);}

.stepsTrigger.steps {
    bottom: 4%;
    right: 0%;
    transform: scale(1);}

#attach {height: 280px;}

.con1_outer::after { bottom: -30px;}    
.con2_outer::before {top: -38px;}

div#contents2::before {
    width: 12vw;
    height: 10vh;
    margin: 0px 4% 10% 0;
}

a.inst_banner, .rec_banner {width: 50%;}
.bnr {transform: translate(-48%,-63%);}

header .head_banner {
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 50%;
    border-radius: 0;
}

.line_banner {
    left: auto !important;
    right: 0 !important;
}


header .head_banner a {
    border-radius: 0;
    border-top: solid 2px #eda58e;
}
header .head_banner a:hover {
    border-radius: 0;
    border-top: solid 2px #dc8585;
}

.line_banner a {border-top: solid 1px #06c755 !important;}

header .head_banner a {font-size:15px;
                        padding-bottom: 12px;
}
}

/*スマホ*/
@media screen and (max-width: 667px){
.font_14 {font-size: 13px;}
header #logo {
    padding: 0 10px;
    max-width: 220px;}

.main_box {padding-top: 58px;}
.main_box_top {padding-top: 78px;}

#main_img img {
    max-height: 70vh;
    min-height: 70vh;
    position: relative;
    object-fit: contain;
}
#main_img::before {
    width: 73vw;
    height: 21vh;
    transform: translate(-52%,-79%);}

.stepsTrigger.steps {
    bottom: 4%;
    right: -12%;
    transform: scale(0.5);}
    
#attach {height: 200px;}

    
h2.logo {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
}    

a.inst_banner, .rec_banner {width: 90%;}
#attach {height: 260px;}
a.inst_banner {padding-left: 40px;}

.bnr {transform: translate(-54%,-55%);}
header .head_banner a {
    font-size: 13px;
    padding-bottom: 12px !important;}
    
#cms_2-a div#cate2 {
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}
}




/*20220610*/
div#attach::before {
    background: #fff5ee52;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    z-index: 0;
}