@charset "utf-8";

/*header
----------------------------------------------------*/
header {
    position: relative;
    z-index: 20;
}

.pc_header{
    padding:5px 0 5px ;
    background-color:rgba(255,255,255,0.8);
    animation-delay: 3s;
    transition: .6s;
    position: relative;
    max-height: 100px;
}

/*以下フェードイン表示の指定*/
.fadein {
    opacity: 0;
    animation: fadein 3s ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}

.scrolled{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: .6s;
}

/*clone*/
.cloneHeader{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    transform: translateY(-100%);
}

.cloneHeader.scrolled{
    background-color:rgba(255,255,255,0.9);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
    transform: translateY(0);
}
.cloneHeader .fadein .header_logo{
    padding: 1%;
}
.pc_header_inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.pc_header .l_box{
    width:60% ;
    display: flex;
    justify-content: space-between;
}

.pc_header .r_box{
    width:40% ;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.pc_header .headMenu{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto;
}

.pc_header .headMenu a{
    display: block;
    overflow: hidden;
}

.pc_header .headMenuText dt{
    color: #432800;
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
}

.pc_header .headMenuText dt::after{
    position: absolute;
    bottom: 0;
    left: -1px;
    content: '';
    width: 0;
    border-bottom: solid 2px #432800;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.pc_header .headMenulist a:hover dt::after{
    width: 100%;
}

.pc_header .headMenuText dd{
    color: #19812f;
    font-size: 1.3rem;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.pc_header .headMenuText dd{
    color: #19812f;
    font-size: 1.3rem;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.pc_header .headSnsbtn{
    display: flex;
    justify-content: space-between;
}

.pc_header .headSnsbtn li{
    margin: 0 1rem;
}

.pc_header .headSnsbtn li img:hover{
    opacity: 0.6;
}

.pc_header .headBlog img{
    transition: .4s;
    max-width: 130px;
}

.pc_header .headBlog img:hover{
    opacity: 1;
    transform: rotate(10deg);
}

.pc_header .headContactBtn{
    text-align: center;
}

.pc_header .headContactBtn a{
    display: block;
    background: #19812f;
    padding: 10px 2% 16px;
    width: 180px;
    border: solid 1px #19812f;
    transition: .3s;
}

.pc_header .headContactBtn a:hover{
    background:#3db11e ;
}

.pc_header .headContactBtn a:hover img{
    opacity: 1;
}


/*-pc_header高さ調整-*/
div.pc_header .header_logo img{max-width: 75px; }


@media only screen and (max-width: 1200px) {
    .header_nav ul li {
        text-align: center;
        flex-grow: 1;
        margin: 0 4px;
        width: auto;
    }

    /*clone調整*/
    .cloneHeader .fadein .header_logo{
        max-width: 90px;
    }

    .cloneHeader .headMenu {
        width: 80%;
    }

    .cloneHeader.scrolled .headMenuText dt {
        color: #432800;
        font-size: 1.1rem;
        font-weight: bold;
        position: relative;
        letter-spacing: 0;
    }

    .cloneHeader.scrolled .headBlog {
        width: 100px;
        padding: 0 2%;
    }

    .cloneHeader.scrolled .headBlog img{
        width: 100%;
    }

    .cloneHeader.scrolled .headContactBtn a {
        padding:5px 6% 16px;
        width: 130px;
    }

}

@media only screen and (max-width: 880px) {
    .cloneHeader .headSnsbtn{
        display: none;
    }
    .pc_header .l_box {
        width: 70%;
        display: flex;
        justify-content: space-between;
    }
}

@media only screen and (max-width: 768px) {
    body {
        min-width: inherit;
    }

    .inner_in {
        width: 96%;
        margin: 0 auto;
    }

    .pc_header {
        display: none;
    }

    .header_nav {
        display: none;
    }



    /* ===== header ===== */
    header .utility-sp {
        position: relative;
        top: 0;
        left: 0;
        z-index: 200;
        background:url(../img/common/commonbg.png);
        width: 100%;
        height: 64px;
        padding: 0;
    }

    .sub-header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        background-color: #fff;
        background-image: url(../../img/head-top-bg-repeat.png);
        width: 100%;
    }

    .header-sp-logo {
        transform: translate(5%,18%);
        width: 240px;
    }

    .header-sp-logo a{
        display: block;
    }

    .header-sp-logo img {}

    .utility-sp {
        position: relative;
        width: 100%;
    }

    .btn-menu {
        position: absolute;
        display: inline-block;
        top: 0;
        right: 0;
    }

    ul.head-left-nav-ul {
        display: inline-flex;
        justify-content: flex-start;
        width: 100%;
        margin: 0 0 8%;
    }

    .btn-menu {
        position: absolute;
        display: inline-block;
        top: 0;
        right: 0;
    }

    .menu-trigger {
        position: relative;
        width: 64px;
        height: 64px;
        background-color: #b8e6fe;
        padding: 0 15px;
        top: 0;
        right: 0;
    }


    /* ハンバーガーメニュー */
    .menu-trigger, .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
    }

    .menu-trigger {
        position: relative;
        width: 64px;
        height: 64px;
        background-color: #432800;
        padding: 0 15px;
        top: 0;
        right: 0;
        z-index: 1000;
    }

    .active_f_menu .btn-menu .menu-trigger {
        display: none;
    }

    .active .menu-trigger {
        background-color: transparent;
        position: fixed;
    }

    .menu-trigger span {
        position: absolute;
        height: 2px;
        background-color: #fff;
        left: 20px;
        width: 25px;
    }

    .active .menu-trigger span {
        background-color: #19812f;
    }

    .menu-trigger span:nth-of-type(1) { top: 22px;}
    .menu-trigger span:nth-of-type(2) { top: 31px;}
    .menu-trigger span:nth-of-type(3) { bottom:22px;}

    .active .menu-trigger span{
        left: 22px;
    }
    .active .menu-trigger span:nth-of-type(1) {
        -webkit-transform: translateY(10px) rotate(-45deg);
        transform: translateY(10px) rotate(-45deg);
        width: 24px;
    }

    .active .menu-trigger span:nth-of-type(2) { opacity: 0;}

    .active .menu-trigger span:nth-of-type(3) {
        -webkit-transform: translateY(-7px) rotate(45deg);
        transform: translateY(-7px) rotate(45deg);
        width: 24px;
    }

    #g-nav-sp {
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        background-image: url(../img/common/commonbg.png);
        width: 100%;
        height: 100vh;
    }

    #g-nav-sp .bg-blue-nav{
        background: #0586cc;
        color: #fff;
        cursor: pointer;
        position: relative;
        border-bottom: solid #b8e6fe 1px;
        transition: .4s;
    }

    #g-nav-sp .bg-blue-nav a{
        padding: 0;
    }

    #g-nav-sp .bg-blue-nav::after{
        background: url(../img/top/slide-squer01@2x.png)no-repeat center /contain;
        width: 22px;
        height: 17px;
        content: "";
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 50%;
        margin: -7px 0 0;
        transition:all .4s;
    }

    #g-nav-sp .active-nav::after{
        background: url(../img/top/slide-squer01@2x.png)no-repeat center/contain;
        width: 22px;
        height: 17px;
        content: "";
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 50%;
        margin: -7px 0 0;
        transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
    }



    #g-nav-sp .toggle-nav-set{
        width: 100%;
        display: none;
    }

    #g-nav-sp .toggle-nav-set a{
        display: block;
        background: #fff;
        color: #0586cc;
        font-size: 1.5rem;
        font-weight: bold;
        padding: 10px 2%;
        border-bottom: solid 1px #0586cc;
        box-sizing: border-box;
    }

    #g-nav-sp .toggle-consal{
        display: none;
    }

    #g-nav-sp .in-sq{
        position: relative;
    }

    #g-nav-sp .in-sq::after{
        background:url("../img/top/slide-squer02@2x.png")no-repeat center/contain;
        width: 22px;
        height: 17px;
        content: "";
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 50%;
        margin: -7px 0 0;
        transition: .3s;

    }
    /* ハンバーガーメニュー openのときの中 */
    .dropmenu{
        width: 90%;
        margin: 0 auto;
    }

    .sp_menu_logo{
        text-align: center;
        padding-top: 30px;
        padding-bottom: 20px;
        border-bottom: dotted 2px #19812f;
        margin-bottom: 20px;
    }

    .sp_menu_logo img{
        width: 166px;
        height: 139px;
    }

    .open_navi_ul{
display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto 20px;
    width: 310px;
    -webkit-transform: translate(-50%, -50%);
    transform: translateX(2%);
    }

    .open_navi_ul *{
        font-family: fot-tsukuardgothic-std, sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #000;
        font-size: 1.4rem;
		letter-spacing: 0;
    }

    .open_navi_ul::after{
        display: block;
        content: "";
        width: 50%;
    }

    .open_navi_ul li{
        position: relative;
        padding-left: 20px;
        padding-bottom: 10px;
        width: 50%;
    }

    .open_navi_ul li::before{
        content: "";
        display: inline-block;
        background: url(../img/common/spmenuicon@2x.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 14px;
        height: 14px;
        position: absolute;
        left: 0;
        top: 6px;
    }


    .rel_title{
        text-align: center;
        color: #fff;
        background: #0287d2;
        padding: 3px 0;
        max-width: 460px;
        margin: 0 auto 20px;
    }

    .open_commu_ul *{
        color: #000;
    }

    .open_commu_ul{
        max-width: 460px;
        margin: 0 auto 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .open_commu_ul li{
        padding-bottom: 10px;
    }

    .open_sns_ul{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 290px;
        margin: 0 auto 30px;
    }

    .open_sns_ul li{
        width: 15%;
        text-align: center;
    }

    .open_info_btn{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        max-width: 334px;
        margin: 0 auto;
    }

    .open_info_btn li{
        text-align: center;
        width: 48%;
    }

    .banner_contact_sp{
        padding-bottom: 30px;
        max-width: 360px;
        margin: 0 auto;
    }


}

@media only screen and (max-width: 340px) {

.open_navi_ul {
    transform: translateX(2%);
}
}