﻿
@charset "utf-8";
/* CSS Document */
/* color */
.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #d7bd82} /* メインカラー */
.txt_color2{color: #522e0c} /* サブカラー */
.txt_color3{color: #fdb927} /* アクセントカラー1 */
.txt_color4{color: #ffdfa6} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #eedcb3} /* メインカラー */
.bg_color2{background-color: #522e0c} /* サブカラー */
.bg_color3{background-color: #fdb927} /* アクセントカラー1 */
.bg_color4{background-color: #ffdfa6} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #eedcb3}
.border_color2{border-color: #522e0c}
.border_color3{border-color: #fdb927}
.border_color4{border-color: #ffdfa6}


/* hover ---------------------------------------------------------------------------------------------*/
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #eedcb3} /* メインカラー */
.hvr_txt_color2:hover{color: #522e0c} /* サブカラー */
.hvr_txt_color3:hover{color: #fdb927} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #ffdfa6} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #eedcb3} /* メインカラー */
.hvr_bg_color2:hover{background-color: #522e0c} /* サブカラー */
.hvr_bg_color3:hover{background-color: #522e0c} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #ffdfa6} /* アクセントカラー2 */

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #eedcb3}
.hvr_border_color2:hover{border-color: #522e0c}
.hvr_border_color3:hover{border-color: #522e0c}
.hvr_border_color4:hover{border-color: #ffdfa6}

#logo img{
    width: 100%;
    max-width: 300px;
}

.trans_logo img{
    width: 150%;
    max-width: 150px;
}

.trans_logo {
    padding-right: 100px;
    background-color: rgb(255 255 255 / 83%);
}

#contents3 p{
    color: #522e0c;
}

h2  {
    color: #8fb776;
    font-weight: bold;
}

.contents_wrap .contents_bg {
    /* border-radius: 47% 31% 0 44%; */
    border-bottom-right-radius: 1000px inherit200px;
    border-bottom-right-radius: 1000px 1000px;
}

#pc_nav a{
    font-weight: bold;
    color: #333;
}

.Clover1{
    vertical-align: bottom;
    width: 50%;
    height: auto;
    position: relative;
    position: absolute;
    z-index: 0;
    right: 47%;
    /* left: -17%; */
    top: -2%;
    background-repeat: no-repeat;
}

.Clover{
    vertical-align: bottom;
    width: 35%;
    height: auto;
    position: relative;
    position: absolute;
    z-index: 1;
    right: 1%;
    /* left: -17%; */
    top: 49%;
    background-repeat: no-repeat;
}

#contents3 .con3_left {
    z-index: 9;
}

#contents3 p{
    font-weight: bold;
    text-shadow: 0 2px 0 rgb(255 255 255 / 20%), 0 3px 0 rgb(255 255 255 / 20%), 0 4px 5px rgb(255 255 255 / 20%);
        font-size: 17px;
}

#contents2 p{
     font-weight: bold;
    text-shadow: 0 2px 1px rgb(226 226 226 / 40%), 0 3px 1px rgb(226 226 226 / 40%), 0 4px 5px rgb(226 226 226 / 40%);
    color: #522e0c;
        font-size: 17px;
}

#contents1 p{
     font-weight: bold;
     text-shadow: 0 2px 1px rgb(226 226 226 / 40%), 0 3px 1px rgb(226 226 226 / 40%), 0 4px 5px rgb(226 226 226 / 40%);
     color: #522e0c;
         font-size: 17px;
}

.frame1{
    vertical-align: bottom;
    width: 56%;
    height: auto;
    position: relative;
    position: absolute;
    z-index: 1;
    right: 5%;
    /* left: -17%; */
    top: 98%;
    background-repeat: no-repeat;
}

#contents2 .con2_left {
    z-index: 2;
}

#footer .footer_bottom {
    background-color: #c1b0a0;
}

.under_page #footer {
    background-color: #c1b0a0;
}

#footer a{
    color: #ffffff;
}

#page_title h2 {
    color: #522e0c;
    font-weight: bold;
}

.cate_list a{
    color: #522e0c;
}

.cate_box h4{
        color: #522e0c;
        font-weight: bold;
}

#foot_banner {
    font-size: 16px;
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
    max-width: 177px;
    z-index: 20;
    bottom: 8px;
    right: 93px;
}

.frame1{
    display: none;
}


.contents_wrap .contents_bg {
    background: rgb(246,236,214);
    background: rgb(238,220,179);
    background: linear-gradient(139deg, rgba(238,220,179,1) 0%, rgba(246,236,214,1) 50%);}
    
    
.Clover {
    width: 31%;
    height: auto;
    right: 1%;
    /* left: -17%; */
    top: 44%;
    opacity: 0.5;
    mix-blend-mode: screen;}

/*  ---------------------------------------------------------------------------------------------*/
.con1_right{position: relative;}
div.con1_right::before {
    background-image: url(dup/img/item01.png);
    width: 93%;
    height: 136px;
    background-size: 100%;
    top: -2%;
    left: 3%;
    background-position: top;
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}

div.con1_right::after{
    background-image: url(dup/img/item02.png);
    width: 93%;
    height: 100px;
    background-size: 100%;
    bottom: 118px;
    left: 3%;
    background-position: top;
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}



.con2_left{position: relative;}
.con2_left:before,.con2_left:after{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}
.con2_left:before {
    background-image: url(dup/img/Clover1.png);
    height: 214px;
    width: 22%;
    background-size: 100%;
    left: -14%;
    background-position: top;
    background-repeat: no-repeat;
    top: -18%;
}
.con2_left:after {
    background-image: url(dup/img/Clover2.png);
    height: 254px;
    width: 25%;
    background-size: 98%;
    left: 77%;
    background-position: top;
    background-repeat: no-repeat;
    bottom: -34%;
}




#footer a {
    color: #522e0c;
}


header .menu_stick span{
   background-color: #522e0c!important;
}

.page_title_box p {
    font-weight: bold;
}

#top_cms .more span {
    background-color: #522e0c!important;
}

#top_info .more span {
    background-color: #522e0c!important;
} 

/*  ---------------------------------------------------------------------------------------------

.con1_left{position: relative;}
.con1_left:before,.con2_left:after{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}
.con1_left:before{
background-image: url(dup/img/item01.png);
 width: 102%;
    height: 104px;
    background-size: 100%;
    bottom: -2%;
    left: -1%;
}
.con1_left:after{
background-image: url(dup/img/item02.png);
 width: 102%;
    height: 104px;
    background-size: 100%;
    bottom: -2%;
    left: -1%;
}*/

/* hover ---------------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px){
.con1_title h2 {
    font-size: 19px;
}

.frame1 {
    vertical-align: bottom;
    width: 46%;
    height: auto;
    position: relative;
    position: absolute;
    z-index: 1;
    right: 10%;
    /* left: -17%; */
    top: 74%;
    background-repeat: no-repeat;
}

.Clover {
    vertical-align: bottom;
    width: 70%;
    height: auto;
    position: relative;
    position: absolute;
    z-index: 1;
    right: 18%;
    /* left: -17%; */
    top: 78%;
    background-repeat: no-repeat;
}
div.con1_right::before {
    background-image: url(dup/img/item01.png);
    width: 62%;
    height: 100px;
    background-size: 100%;
    top: 1%;
    left: 18%;
    background-position: top;
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}

div.con1_right::after{
    background-image: url(dup/img/item02.png);
    width: 62%;
    height: 100px;
    background-size: 100%;
    top: 17%;
    left: 18%;
    background-position: top;
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}



}

#top_info .mg_b-30px{
    margin-bottom: 0px!important;
}

@media screen and (max-width: 667px){
#contents1 .con1_right,#contents2 .con2_wrap,#contents3 .con3_wrap{
    padding-right: 30px;
    padding-left: 30px;
}
    .con1_title h2{
    font-size: 14px;
}
    
.frame1 {
    vertical-align: bottom;
    width: 78%;
    height: auto;
    position: relative;
    position: absolute;
    z-index: 1;
    right: 13%;
    /* left: -17%; */
    top: 64%;
    background-repeat: no-repeat;
}

.Clover1 {
    vertical-align: bottom;
    width: 76%;
    height: auto;
    position: relative;
    position: absolute;
    z-index: 0;
    right: 13%;
    /* left: -17%; */
    top: -1%;
    background-repeat: no-repeat;
}

.Clover {
    vertical-align: bottom;
    width: 48%;
    height: auto;
    position: relative;
    position: absolute;
    z-index: 1;
    right: 52%;
    /* left: -17%; */
    top: 2%;
    background-repeat: no-repeat;
}


div.con1_right::after {
    background-image: url(dup/img/item02.png);
    width: 63%;
    height: 100px;
    background-size: 100%;
    top: 17%;
    left: 18%;
    background-position: top;
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}    

div.con1_right::before {
    background-image: url(dup/img/item01.png);
    width: 62%;
    height: 100px;
    background-size: 100%;
    top: 4%;
    left: 18%;
    background-position: top;
    content: "";
    position: absolute;
    background-repeat: no-repeat;
}

}

/*2023/1/11*/
#logo,#logo span,#logo2,.page_title_bg {
    background-color: #fff;
}
#logo2 img {max-width:250px}
/*2023/1/27*/
#map,#page07 .info_map{
    display: none;
}
#top_info {
    background-color: #fcfcfc;
}
#top_info .info_left{
        width: 100%!important;
}
@media screen and (max-width: 768px){
#top_info {
    background-color: #f7f7f7;
}
}
@media screen and (max-width: 667px){
.con1_left {
    background-position: top;
}
}