@charset "UTF-8";
@import url(blog.css);

/*=== reset ===*/
* { margin: 0; padding: 0; box-sizing: border-box;}
html { scroll-padding-top: var(--header-height);}
body {
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
body.active { height: 100vh; overflow: hidden;}
section { padding: 40px 0;}
ul, ol { list-style-type: none;}
h1, h2, h3, h4 { font-size: 1rem; font-weight: normal;}
p { line-height: 2; word-break: auto-phrase;}
a { color: var(--text); text-decoration: none;}
a, a::before, a::after, a:hover, a:hover:before, a:hover:after { transition: all 0.5s ease;}
a:hover { opacity: 0.7;}
img { width: 100%; height: auto; vertical-align: bottom;}
section { padding: 120px 0; margin: auto;}
iframe { width: 100%; vertical-align: bottom;}


/*=== フォント指定 ===*/
.tsukuaoldmin{
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
}

/*=== カラー・余白指定 ===*/
:root{
    --main: #c0c241;
    --sub: #008510;
    --text: #080808;
    --white: #ffffff;
    --gray: #f2f2f2;
    --yellowGreen: #b8ba2a;
    --mainBlack: #080808;
    --bold: 700;
    --content-width: 1440px;
    --content-inner-width: 1200px;
    --header-height: 100px;
    --header-height-sp: 60px;
}

.serif { font-family: "fot-tsukuaoldmin-pr6n", sans-serif; font-weight: 300; font-style: normal; line-height: 1;}


/*=== header・footer ===*/
.serif { font-family: "fot-tsukuaoldmin-pr6n", sans-serif; font-weight: 300; font-style: normal; line-height: 1;}
.sec-inner { width: var(--content-inner-width); max-width: 90%; margin: auto;}
.sec-title { font-size: 32px; margin-bottom: 40px; font-weight: var(--bold); text-align: center;}
.btn {
    display: inline-block;
    min-width: 300px;
    padding: 24px;
    background-color: var(--gray);
    border-bottom: 3px solid var(--text);
    font-weight: var(--bold);
    position: relative;
}
.sec-goods .btn{background-color: #fff;}
.btn::after {
    content: "";
    width: 8px;
    height: 16px;
    background: url(../img/icon-btn.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0; bottom: 0; right: 24px;
    margin: auto;
}

.header-sp-wrap,.sp-icon-wrap{ display: none; }
.header { display: flex; width: 90%; justify-content: space-between; position: absolute; top: 0; left: 5%; z-index: 15; letter-spacing: 0.05em;}
.header .logo { min-width: 250px; width: 20%; padding-right: 5%; padding-top: 16px;}
.header-nav-area { width: 80%; max-width: 1200px;}
.header-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: var(--white);
    padding: 8px 2%;
    border-radius: 0 0 10px 10px;
}
.header-nav { width: 100%; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin-top: 16px;}
.search { display: flex;}
.search select { background-color: var(--main); color: var(--white); border:none; padding: 4px 8px; border-radius: 5px 0 0 5px;}
.search span { display: flex; align-items: center; border: 1px solid var(--main); border-radius: 0 5px 5px 0; position: relative; padding-right: 40px;}
.search input { padding: 4px 8px; border: none;}
.search span::after { 
    content: "";
    background: url(../img/icon-search.png) no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0; bottom: 0; right: 16px;
    margin: auto;
}
.header-tel { display: flex; letter-spacing: 0;}
.header-tel-info { font-size: 12px; font-weight: var(--bold); display: flex; align-items: center;}
.header-tel-info .info-item { display: flex; margin-right: 16px;}
/* .header-tel-info .info-item + .info-item { margin-top: 2px;} */
.header-tel-info .info-text{ white-space: nowrap; }
.info-label {
    width: 5em;
    background-color: var(--sub);
    color: var(--white);
    padding: 0 4px;
    border-radius: 5px;
    text-align: center;
    margin-right: 8px;
    font-weight: 700;
}
.header-tel-no a { font-size: 40px; display: flex; align-items: center;}
.header-tel-no a::before { content: ""; width: 22px; height: 30px; background: url(../img/icon-tel.png) no-repeat; background-size: contain; margin-right: 8px;}
.nav-menu, .nav-user { display: flex; padding: 16px 2%; border-radius: 10px; letter-spacing: 0; white-space:nowrap;}
.nav-menu { background-color: var(--white); flex-grow: 1;justify-content: center;}
.nav-menu a { display: block; padding: 4px 1vw; border-left: 1px dotted #a2a2a2; font-size: clamp(12px, 0.83vw, 16px);}
.nav-menu .home a { color: var(--sub);}
.nav-menu li:first-child a { padding-left: 0; border: none;}
.nav-menu li:last-child a { padding-right: 0;}
.nav-user { background-color: var(--main);}
.nav-user a { color: var(--white); display: inline-block; width: 100%; padding: 4px 16px; border-left: 1px dotted var(--white); font-size: clamp(12px, 0.83vw, 16px);}
.nav-user li:first-child a { padding-left: 0; border: none;}
.nav-user li:last-child a { padding-right: 0;}


.footer { background-color: var(--gray); padding: 48px 5% 64px; display: flex; align-items: center; justify-content: space-between; position: relative;}
.footer-left { width: 15%;}
.footer-address { font-size: 14px; margin-top: 32px; white-space:nowrap;}
.footer-tel-sp-block{ display: none; }
.footer-nav-user {
    display: flex;
    background-color: var(--main);
    padding: 16px 2%;
    border-radius: 0 0 10px 10px;
    letter-spacing: 0;
    white-space:nowrap;
    position: absolute;
    top: 0;
    right: 5%;
}
.footer-nav-user a { color: var(--white); display: inline-block; width: 100%; padding: 4px 16px; border-left: 1px dotted var(--white);}
.footer-nav-user li:first-child a { padding-left: 0; border: none;}
.footer-nav-user li:last-child a { padding-right: 0;}
.footer-tel { display: flex; justify-content: flex-end; letter-spacing: 0; padding-top: 64px; align-items: center;}
.footer-right { text-align: right;}
.footer-tel-info { font-size: 12px; font-weight: var(--bold);}
.footer-tel-info .info-item { display: flex; margin-right: 16px;}
.footer-tel-info .info-item + .info-item { margin-top: 2px;}
.footer-tel-no a { font-size: 40px; display: flex; align-items: center;}
.footer-tel-no a::before { content: ""; width: 22px; height: 30px; background: url(../img/icon-tel.png) no-repeat; background-size: contain; margin-right: 8px;}

.footer-nav{ margin: 0 0 16px; }
.footer-nav-menu { display: flex; font-size: clamp(12px, 0.72vw, 14px); margin-top: 48px;}
.footer-nav-menu a { display: block; padding: 0 1.5em;}
.footer-nav-menu li:last-child a { padding-right: 0;}
.copy { background-color: var(--sub); color: var(--white); font-size: 12px; padding: 8px; text-align: center;}

/*=== ページトップリンク ===*/
#pagetop{
    position: fixed;
    bottom: 20px;
    right: 5.2vw;
    min-width: 60px;
    width: 4.16vw;
    z-index: 5;
    transition: initial;
}
#pagetop:hover{ opacity: .8; }
#pagetop>a{ display: block; }
#pagetop img{ width: 100%; object-fit: cover; }
body.active #pagetop{ display: none; }

/*=== パンくずリスト ===*/
.breadcrumbs_text .home{
    margin-right: 11px;
}
.breadcrumbs_middle{
    margin: 0 11px;
}
.breadcrumbs_middle:last-of-type{
    margin-left: 11px;
}
@media screen and ( min-width: 781px ) and ( max-width: 1240px ){
    .sec-inner{ max-width: 80%; }
}
@media screen and ( max-width: 1240px ){
    .header{ margin-top: 15px; align-items: center; }
    .header-nav-area{ display: none; }
    .sp-icon-wrap{
        position: absolute;
        right: 123px;
        display: flex;
        gap: 10px 13px;
    }
    .sp-icon-wrap .sp-icon-a{ display: block; }
    .header-sp-wrap{ display: block; }
    #ham_btn{
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        border-radius: 10px;
        padding: 0;
        width: 100px;
        height: 100px;
        background-color: #fff;
    }
    #ham_btn.active{ border-radius: 10px 10px 0 0; }
    #ham_btn span{
        position: absolute;
        left: 28%;
        width: 44%;
        height: 3px;
        background-color: #000;
        transition: all .3s ease;
    }
    #ham_btn::before{
        content: "MENU";
        position: absolute;
        bottom: 15px;
        left: 50%;
        line-height: 1;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 16px;
        font-weight:700;
        color: var(--sub);
        transform: translateY(0%) translateX(-50%);
        -webkit-transform: translateY(0%) translateX(-50%);
        transition: all .3s;
        animation: ham_menu_a_after_m .75s forwards;
        white-space: nowrap;
    }
    #ham_btn.active::before{ content: "閉じる"; }
    #ham_btn span:first-of-type{ top: 28%; animation: ham_btn_span01 .75s forwards; }
    #ham_btn span:nth-of-type(2){ top: 44%; transition: all .25s .25s; opacity: 1; }
    #ham_btn span:last-of-type{ top: 60%; animation: ham_btn_span03 .75s forwards; }
    #ham_btn.active span:first-of-type{ top: 45%; transform: rotate(45deg); }
    #ham_btn.active span:nth-of-type(2){ display: none; }
    #ham_btn.active span:nth-of-type(3){ top: 45%; transform: rotate(-45deg); }
    .ham-nav{
        position: absolute;
        top: 100px;
        right: 0;
        border-radius: 10px 0 10px 10px;
        padding: 20px 0 46px;
        display: none;
        width: 100%;
        height: fit-content;
        background-color: #fff;
        transition: .5s ease 0s;
        z-index: 10;
        box-shadow: 0px 5px 15px 0px rgba(134, 134, 134, 0.35);
    }
    .menu_active{ display: block; }
    .ham-nav-ul{ margin: 20px auto 65px; padding-left: 0; width: 90%; }
    .ham-nav-li{ border-bottom: 1px dashed #a2a2a2; }
    .ham-nav-a{
        padding: 20px 15px;
        display: flex;
        width: 100%;
        font-size: 22px;
        font-weight: 500;
        color: #060606;
        align-items: center;
    }
    .search{ justify-content: center; }
    .search select{ padding: 10px 25px; font-size: 24px; }
    .search span{ padding: 10px 15px; }
    .search input{ font-size: 24px; }
    .ham-tel-conBtn-wrap,.ham-biz-info-box{ margin: 0 auto; width: 90%; }
    .ham-tel-conBtn-wrap{ display: flex; gap: 10px 35px; align-items: center;}
    .ham-tel-conBtn-wrap .header-tel-no{ font-size: 48px; }
    .ham-conBtn{
        border-radius: 10px;
        padding: 2.01vw 0;
        display: block;
        width: 230px;
        font-size: 22px;
        font-weight: 500;
        color: #fff;
        text-align: center;
        background-color: var(--main);
    }
    .ham-biz-info-box{
        margin: 10px auto 0;
        display: flex;
        flex-direction: column;
        gap: 10px 15px;
    }
    .ham-biz-info-box .info-item{ display: flex; }
    .ham-biz-info-box .info-label{ padding: 0 0; width: 80px; }
    .footer-nav-menu{ flex-wrap: wrap; justify-content: end;}
    .footer-nav-menu li:last-child a{ padding: 0 1.5em; }
}
@media screen and ( max-width: 780px ){
    .header{ position: absolute; left: 50%; margin: 15px auto 0; width: 95%; transform: translateY(0%) translateX(-50%); -webkit-transform: translateY(0%) translateX(-50%); z-index: 11; }
    .header .logo{ padding: 0 0; max-width: 270px; width: 45%; min-width: initial; }
    .sp-icon-wrap{ right: 15.76vw; }
    .sp-icon{ min-width: 40px; width: 7.69vw; }
    #ham_btn{
        min-width: 55px;
        width: 12.82vw;
        min-height: 55px;
        height: 12.82vw;
    }
    #ham_btn::before{ bottom: 1.92vw; font-size: clamp(10px, 2.05vw, 16px); }
    .ham-nav{ top: 12.82vw; }
    .ham-nav-a{ padding: 2.56vw 15px; font-size: clamp(16px, 2.82vw, 22px); }
    .search{ margin: 0 auto;  width: 90%; }
    .search select,.search input{ font-size: clamp(16px, 3.07vw, 24px); }
    .search select{ padding: 10px 7.69vw 10px 4.1vw; }
    .search input{ width: 100%; }
    .search span{ width: 55.5%; }
    .search span::after{ min-width: 15px; width: 4.23vw; min-height: 15px; height: 4.23vw; }
    .ham-nav-ul,.ham-tel-conBtn-wrap,.ham-biz-info-box{ max-width: 600px; }
    .ham-tel-conBtn-wrap{ gap: 15px 45px; flex-wrap: wrap; justify-content: center; }
    .ham-biz-info-box{ margin: 20px auto 0; flex-direction: initial; flex-wrap: wrap; }
    .header-tel-no a{ font-size: clamp(32px, 6.15vw, 48px); }
    .header-tel-no a::before{ min-width: 18px; width: 3.58vw; min-height: 28px; height: 4.87vw; }
    .ham-conBtn{ padding: 3.2vw 0; font-size: clamp(16px, 2.82vw, 22px); }

    .footer{ padding: 48px 5% 45px; }
    .footer-nav-user,.footer-right{ display: none; }
    .footer-left{ width: 100%; }
    .footer .logo{ margin: 0 auto; min-width: 190px; width: 46%; }
    .footer-address{ font-size: clamp(13px, 2.82vw, 22px); text-align: center; }
    .footer-tel-sp-block{ margin-top: 35px; display: block; }
    .footer-tel-no a{ font-size: clamp(28px, 6.15vw, 48px); justify-content: center; }
    .footer-tel-no a::before{ min-width: 20px; width: 3.58vw; min-height: 30px; height: 4.87vw; }

    /*=== ページトップリンク ===*/
    #pagetop{
        right: 2.56vw;
        min-width: 45px;
        width: 10.25vw;
    }
    #pagetop:hover{ opacity: 1; }
}
@media screen and ( max-width: 400px ){
    .sp-icon-wrap { right: 65px; padding-bottom: 3px; gap: 10px 5px;}
    .ham-nav{ top: 55px; padding: 20px 0 11.5vw; }
    .ham-nav-ul{ margin: 15px auto 30px; }
    .ham-tel-conBtn-wrap{ justify-content: center; }
}