﻿
@media screen and (max-width: 768px){
}
@media screen and (max-width: 667px){
}

/*下層ページ ------------------------------------------------------*/
.cate_list li a{
     overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
article.page_wrap{
    padding: 50px 5%;
    margin: 50px 10% 100px;
    background: #fffef4;
    background: radial-gradient(circle, rgba(255,254,244,1) 93%, rgba(251,249,239,1) 95%, rgba(244,240,231,1) 98%, rgba(235,229,221,1) 100%);
}
#page_title{position: relative;}
#page_title .page_box{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 50%;
    padding: 20px 0;
    z-index: 1;
    background: rgba(255, 254, 244, 0.7);
}
#page_title .page_box p{
    color: #482606;
    padding: 5px 10px;
    text-shadow: 0px 0px 3px #fff, 0px 0px 5px #fff;
    font-weight: 700;
}
#page_title .title_img{height: 300px;}

@media screen and (max-width: 768px){
    article.page_wrap{
        padding: 50px 5%;
        margin: 50px 5% 100px;
    }
    #page_title .title_img{height: 210px;}
    #page_title .page_box{width: 60%;}
}
@media screen and (max-width: 667px){
    article.page_wrap{
        padding: 50px 7%;
        margin: 50px 7% 50px;
    }
    #page_title .page_box{
        width: 90%;
        padding: 10px 0;
        background: rgba(255,255,255,0.6);
    }
    #page_title .page_box h2{
        font-size: 20px;
        text-shadow: 0px 0px 3px #fff, 0px 0px 5px #fff, 0px 0px 8px #fff;
    }
    #page_title .page_box p{
            background: transparent;
    }
}

/*main img ---------------------------------------------------------*/
.scroll_bt{
    bottom: 0px;
    left: 5%;
}
.catch {
    z-index: 3;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0%);/* X横 Y縦 始点が要素の中心になる */
    width: 40%;
    max-width: 550px;
    min-width: 470px;
    
    opacity: 0;
    animation-name: fadeInAnime;
    animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
    animation-duration: 11s; /* アニメーション時間 */
    animation-delay: 1.3s; /* 〇秒後に変化 */
}
@keyframes fadeInAnime{
  0% {
    filter: blur(10px);
    opacity: 0;
    
  }
  20% {
    filter: blur(0px);
    opacity: 1;
  }

  80% {
    filter: blur(0px);
    opacity: 1;
  }


  100% {
    filter: blur(10px);
    opacity: 0;
  }
}


.catch img, .dec4 img, .dec5 img{
    min-height: auto!important;
}
.dec4{
    max-width: 500px;
    width: 30%;
    top: 0px;
    left: 0;
}
.dec5{
    max-width: 500px;
    width: 30%;
    top: 0px;
    right: 0;
}
@media screen and (max-width: 768px){
    .catch{
        bottom: 10px;
        width: 35%;
        min-width: auto;
    }
}

@media screen and (max-width: 667px){
    .catch{
        width: 45%;
        bottom: 5px;
        animation-duration: 7s; /* アニメーション時間 */
    }
    
}
/*contents ------------------------------------------------------------*/
.frame{position:absolute;}
.frame1{
    background-image: url(./Dup/img/dec06.png);
    background-size: 250px;
    background-repeat: repeat-x;
    width: 100%;
    height: 10px;
    left: 0;
    top: 0;
    transform: rotateZ(0deg);
}
.frame2{
    background-image: url(./Dup/img/dec06_r.png);
    background-size: 10px;
    background-repeat: repeat-y;
    width: 10px;
    height: 100%;
    right: 0;
    top: 0;
}
.frame3{
    background-image: url(./Dup/img/dec06_b.png);
    background-size: 250px;
    background-repeat: repeat-x;
    width: 100%;
    height: 10px;
    left: 0;
    bottom: -1px;
}
.frame4{
    background-image: url(./Dup/img/dec06_l.png);
    background-size: 10px;
    background-repeat: repeat-y;
    width: 10px;
    height: 100%;
    left: 0;
    top: 0;
}


#contents3 .txt_color3{
    color: #ffffff;
}
.dec7::before{
background-image: url(./Dup/img/dec07.png);
background-size: 400px;
width: 100%;
height: 150px;
left: 0;
top: -1px;
content: "";
display: block;
position: absolute;
}
.dec7_p::before{
background-image: url(./Dup/img/dec07_p.png);
background-size: 400px;
width: 100%;
height: 150px;
left: 0;
bottom: -140px;
content: "";
display: block;
position: absolute;
z-index: 1;
}

.cms_title, .cate_wrap, .box_wrap{
    position: relative;
    z-index: 1;
}



#contents2{
    background: linear-gradient(0deg,#fffcf1 20%, rgb(255 254 244 / 90%) 70%, rgb(255 254 244 / 80%) 80%, rgba(251,251,251,0.0) 100%);
}

#main_img{
    background: #fbfbfb;
}
#top_cms{
    background: transparent;
}
.top_cms_box{position:relative;}
.top_cms_box{
    background: #fffef4;
    background: radial-gradient(circle, rgba(255,254,244,1) 80%, rgba(251,249,239,1) 85%, rgba(244,240,231,1) 90%, rgba(235,229,221,1) 100%);
    margin: 50px 10% 100px;
}
.top_cms_box:nth-child(1){
    margin: 200px 10% 100px;
}

main.main_box_top{
    background: transparent;
}
footer{background: rgba(245,245,245,1);}

.txt2, .txt4,
.cms_title h2{
    text-shadow:0px 0px 4px rgba(149, 84, 29, 0.4);
}

#contents1,footer{position:relative;}
#contents1:before,
.page_wrap:before
/*,footer:before*/
{
    content: " ";
    position: fixed;
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(./Dup/img/bg1.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    left: 0px;
    top: 0px;
    z-index: -2;
}
#contents1 .con_no::before{display:none;}
#contents1 .bg{
    padding: 20px 5%;
    background: #fffef4;
    border-radius: 20px;
}
#contents1 p{
    padding: 0;
    display: block;
    text-align: center;
}
#contents1 h2{
    text-align: center;
}
.dec1{
    max-width: 300px;
    width: 30%;
    bottom: -70px;
    right: 2%;
}
.dec2,.dec03{
    width: 100%;
    margin: 20px 0;
}
.dec2 img,.dec3 img{
    display: block;
    width: 50%;
    margin: 20px auto 10px;
}
@media screen and (max-width: 768px){
#contents2{
    background: linear-gradient(0deg,#fffcf1 20%, rgb(255 254 244 / 90%) 70%, rgb(255 254 244 / 80%) 90%, rgba(251,251,251,0.0) 100%);}
    .dec1{bottom: -50px;}
}
@media screen and (max-width: 667px){
    .dec1{width: 55%;bottom: -50px;}
    .dec2 img,.dec3 img{width: 60%;}
    #contents2{background:linear-gradient(0deg,#fffcf1 5%, rgb(255 254 244 / 90%) 70%, rgb(255 254 244 / 80%) 95%, rgba(251,251,251,0.0) 100%);}
    .top_cms_box{ margin: 50px 8% 50px;}
    #top_cms > .box{padding: 50px 8%;}
    .top_cms_box:nth-child(1){margin: 150px 8% 50px;}
    #contents1 .bg{padding: 50px 5%;}
}

/*下層ページトップ------------------------------*/
#page_title .title_img{
    background-position: center top;
}
/*メニュー -------------------------------------*/
/*バナー*/
.btn_container{
    display: block;
    text-align: right;
    padding: 20px 0 0;
}
.btn_container a {
    background-color: #d9b6bb;
    color: #fff;
    /*max-width: 300px;*/
    text-align: center;
    padding: 10px;
    font-size: 20px;
    border-radius: 5px;
     /*overflow: hidden;*/
     /*text-overflow: ellipsis;*/
     /*white-space: nowrap;*/
     display: block;
}
@media screen and (max-width: 667px){
    .btn_container a{
        text-align: left;
        font-size: 14px;
    }
}
/*配色 ------------------------------------------*/

/*茶色*/
body, .txt_color_nomal{color: #603106;}
.txt_color1{color: #854810;}
.txt_color3{color: #cdb094;}
#contents3 .txt_white, .txt3{color: #482b0d;}

/*ベージュ*/
.bg_color4{background-color: #fffef4;}

/*くすみグレー*/
.border_color3{    border-color: #d9cecf;}

/*くすみピンク*/
.bg_color1{background-color: #ecdcde;}
.bg_color3{background-color: #d9b6bb;}

/*くすみあお*/
.button:hover::after{box-shadow:inset 0 0 0 15em #b6bed9;}
.hvr_bg_color1:hover{background-color: #b6bed9;}

/* 自動リンク設定 */
.linkStyle{
	color:#d5a9ae;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color:#d5a9ae;
	opacity: 0.7;
	text-decoration: none;
}

/*文字・文字間・空間 ----------------------------------*/
p,a{
    font-family: 'Zen Maru Gothic', sans-serif;
    /*font-family: 'Zen Old Mincho', serif;*/
}

h2.font_en, .txt5, .txt7, #cms_1-a .box_title1, .cate_title {
    /*font-family: 'Klee One', cursive;*/
    /*font-family: 'Zen Maru Gothic', sans-serif;*/
    font-family: 'Zen Old Mincho', serif;
    font-weight: 600;
}

.con_no, p.font_en, .more a{
    /*font-family: 'Kaisei Opti', serif;*/
    /*font-family: 'Klee One', cursive;*/
    font-family: 'Yuji Syuku', serif;
}
#contents1{padding: 100px 10% 160px;}
#contents3{padding: 0 10% 50px;}

#cms_2-a .cate_box{
    margin-top: 0px;
}
#cms_2-a .box_title1{
    padding-top: 0px;
}
#cms_2-a .box_item{
    padding: 0 2%;
}
#cms_4-a .cate{
    margin-bottom: 0px;
}

#page7 .box_item h3, #page7 .box_item p, .box_txt1, .txt3, #contents2 p, .txt6, .txt8{
    letter-spacing: 0.07em;
}
#page7 .box_item p, .box_txt1, .txt3, #contents2 p, .txt6, .txt8{
    line-height: 1.7em;
}
#contact_tel{min-width: 300px;}
.fa-line{display: block;}
.fa-line:before{font-size: 36px;}

@media screen and (max-width: 768px){
    .main_box{padding-top: 70px;}
    #contents1{padding: 100px 10% 140px;}
    #page7 .box_item.grid_3{width:30%!important;}
    #page7 .box_item.grid_9{width:70%!important;}
    #page8 #tel_txt h3{width: 15%!important;}
    #page8 #tel_txt p{width: 65%!important;}
    header .head_banner{width: 256px;}
    .fa-line{display: inline;}
    .fa-line:before{font-size: 36px;}
    .head_banner a{font-size: 22px;}

}

@media screen and (max-width: 667px){
    .main_box{padding-top: 56px;}
    #contents1{padding: 50px 10% 80px;}
    #contents2{padding: 50px 10% 150px;}
    #page7 .box_item.grid_3,#page7 .box_item.grid_9{width: 100%!important;}
    #page8 #tel_txt h3, #page8 #tel_txt p{width: 100%!important;}
    #cms_3-b .cate_box{padding:0;}
    .btn_container{max-width: 300px;}
    #contact_tel{min-width: 228px;}
    #contact_tel a{font-size: 18px;}
}

/*テンプレート*/
.fa-envelope:before{content: "\f086";}
@media screen and (max-width: 667px){
    .more a{
        width: 180px;
    }
    footer{padding: 100px 10% 80px;}
}


/*2024.03.19追加*/
#map{
    display: none;
}
footer .info{
    margin: 20px auto;
    text-align: center;
}