﻿/* all page */
/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #160a0a;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
.txt_color1{color: #7eab33;} /* メインカラー */
.txt_color2{color: #e6e6e6} /* サブカラー */
.txt_color3{color: #ED784A;} /* アクセントカラー1 */
.txt_color4{color: #c9baa9} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #7eab33;} /* メインカラー */
.bg_color2{background-color: #eff4e9;} /* サブカラー */
.bg_color3{background-color: #ED784A;} /* アクセントカラー1 */
.bg_color4{background-color: #c9baa9} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #7eab33;}
.border_color2{border-color: #bcd2a2;}
.border_color3{border-color: #ED784A;}
.border_color4{border-color: #c9baa9}

.hvr_txt_color3:hover {color: #ED784A;}
.hvr_bg_color3:hover {background-color: #ed784a;}
.hvr_border_color3:hover {border-color: #ED784A;}

/* top ----------------*/

/* header */
#logo{
    max-width: 150px;
}

/* main img */
.main_img_txt {
    max-width: 250px;
}

/* main */

/* intro */
#s_content1{
    background-image: url('./Dup/img/intro_bg.png');
    background-position: bottom left;
    background-size: 100%;
    background-repeat: no-repeat;
}
.intro_item h2{
    text-align: center;
    position: relative;
}
.intro_item h2::before {
    content: "";
    background-image: url('./Dup/img/intro_title.png');
    background-position: top left;
    background-size: 230px;
    background-repeat: no-repeat;
    width: 230px;
    height: 170px;
    position: absolute;
    top: -110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.intro_img div {
    color: #ed784a;
}

/* contents */
#s_content2 .c2_box_txt_wrap{
    background-image: url('./Dup/img/con_yoko.png'), url('./Dup/img/con_tate.png');
    background-position: top left,bottom left;
    background-size: contain, contain;
}
#s_content2 .c2_box_txt{
    background-image: url('./Dup/img/con_bg.png');
    background-position: top left;
    background-size: contain;
}
#s_content2 .c2_box_txt .more_btn{
    padding: 60px 0;
    background-color: rgba(255,255,255,0.6);
}

/* topcms */
.cms_box .cms_box_bg{
    background-image: url('./Dup/img/cms_bg.png');
    background-position: bottom left;
    background-size: 100%;
    background-repeat: no-repeat;
    top: 0;
    height: 100%;
}
.top_cms_title{
    position: relative;
}
.top_cms_title::before {
    content: "";
    background-image: url('./Dup/img/cms_title.png');
    background-position: top left;
    background-size: 160px;
    background-repeat: no-repeat;
    width: 160px;
    height: 110px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.cms_2-b .cate_box{
    background-color: #fff;
    margin-bottom: 15px;
}

/* footer */
#sf .sf_contact {
    margin-top: 0;
    width: 100%!important;
    position: relative;
}
#sf .sf_contact::before {
    content: "";
    background-image: url('./Dup/img/con_yoko.png');
    background-position: center left;
    background-size: contain;
    width: 100%;
    height: 11px;
    position: absolute;
    bottom: -11px;
    left: 0;
}
#sf .sf_contact .sf_contact_box {
    padding: 100px 50px;
    max-width: 50%;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(5px);
}
#sf .sf_contact_box h3 {
    position: relative;
}
#sf .sf_contact_box h3::before {
    content: "";
    background-color: #ED784A;
    width: 50px;
    height: 2px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
#sf .sf_contact_box h3::after {
    content: "";
    background-image: url('./Dup/img/cms_title.png');
    background-position: top left;
    background-size: 120px;
    background-repeat: no-repeat;
    width: 120px;
    height: 110px;
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}


/* under page */
#page3 #cms_6-a .cate_box, #page5 #cms_2-b .cate_box{
    background-color: #eff4e9;
    margin-bottom: 15px;
}
.cate_list li a{
    font-size: 1rem;
    padding: 5px 10px;
}
.page_wrap{
    padding-bottom: 150px;
    background-image: url('./Dup/img/cms_bg.png');
    background-position: bottom left;
    background-size: 100%;
    background-repeat: no-repeat;
}
.page_wrap.page08_wrap,  .page_wrap.page10_wrap{
    background-size: 100% 130%;
}
#s_footer #logo2{
    text-align: center;
}

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    .main_img_txt {
        max-width: 150px;
    }
    #s_content1 {
        background-size: auto;
    }
    .intro_item h2 {
        margin-top: 40px;
    }
    .intro_item h2::before {
        background-size: 190px;
        width: 190px;
        height: 140px;
        top: -90px;
    }
    .cms_box .cms_box_bg {
        top: -5%;
        height: 110%;
    }
    .top_cms_title::before {
        background-size: 120px;
        width: 120px;
        height: 110px;
        top: 5px;
    }
    #sf .sf_contact .sf_contact_box {
        padding: 110px 20px;
        max-width: 70%;
    }
    .cms_box .cms_box_bg, #sf .sf_contact::before {
        background-size: auto;
    }
    .page_wrap{
        padding-bottom: 100px;
        background-size: auto;
    }
    .page_wrap.page08_wrap,  .page_wrap.page10_wrap{
        background-size: auto;
    }
    
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .overlay {
        top: 0;
    }
    #logo{
        max-width: 100px;
    }
    .button_container.active .top, .button_container.active .bottom {
        background: #7eab33;
    }
    .main_img_txt {
        max-width: 240px;
    }
    #sf .sf_contact .sf_contact_box {
        padding: 70px 20px;
        max-width: 80%;
    }
    .page_wrap{
        padding-bottom: 40px;
    }
    
}

/* IE */
@media all and (-ms-high-contrast: none){
    .more_btn > span, .more_btn > a{
        padding: 10px 10px 7px!important;
    }
    .cate_list li a{
        padding: 10px 10px 5px!important;
    }
    #page3 #cms_6-a .cate_box .box_title1, #page5 #cms_2-b .cate_box .box_title1{
        padding-top: 5px;
    }
    footer ul li{
        padding-bottom: 5px;
    }
    
}


