@charset "UTF-8";
:root {
    --main-color: #5C5C5C;
    --color-text: #318437;
    --btn-color: #318437;
    --title-bg: #FFFFFF;
    --btn-bg: #FFFFFF;
    --font-size-base: 1rem;
    --font-size-h2: 2.25rem;/*36px*/
    --font-size-color-title: 1.5rem; /*24px*/
    --color-title-height: 1.7;
    --bg-color: #FDFBF0;

}

html {
    font-size: var(--font-size-base);
}

body {
    font-family: "Noto Serif JP", serif;
    color: var(--main-color);
    line-height: 1.68;
    font-weight: 300;
}

img {
    width: 100%;
    height: auto;
}

.l-kv {
    height: 254px;
    margin-bottom: 170px;
}

.bg {
    background-color: var(--bg-color);
}

.box {
    max-width: 1080px;
    /* margin: 0 10.46%; */
    padding: 0 24px;
    margin: 0 auto;

}
.contents {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.content__title {
    font-size: var(--font-size-color-title);
    color: var(--color-text);
    line-height: var(--color-title-height);
    font-weight: 600;
    margin-bottom: 41px;
}

.section-title {
    color: var(--color-text);
    font-size: var(--font-size-h2);
    line-height: 1.69;
    font-weight: 600;
    text-align: center;
}

.h2 {
    width: 600px;
    padding: 41px 0 35px 0;
    font-size: 1.875rem;
    line-height: 1.7;
    letter-spacing: 0.2em;
    color: var(--color-text);
    text-align: center;
    background-color: #FFFFFF;
    margin: 0 auto;
}

.mg-27 {
    margin-bottom: 27px;
}

.sp-only {
    display: none;
}

.br-sp {
    display: none;
}


@media screen and (max-width: 768px) {
.box {
    margin: 0 16px;
    padding: 0;
}

.l-kv {
    height: 100px;
    margin-bottom: 52px;
}

.h2 {
    width: 283px;
    padding: 23px 0 24px 0;
    font-size: 1.25rem;
    line-height: 2.05;
}

.br-pc {
    display: none;
}

.br-sp {
    display: block;
}

.pc-only {
    display: none;
}

.sp-only {
    display: block;
}
}
/* ==========
ボタン
============= */
.content__btn {
    width: 196px;
}

.content__btn a {
    display: block;
    width: 100%;
    color: var(--btn-color);
    line-height: 48px;
    font-weight: 600;
    background-color: var(--btn-bg);
    border: 1px solid #318437;
    box-sizing: border-box;
    position: relative;
    padding: 0 74px 0 32px;
    transition: .4s;
}

.content__btn a::after {
    display: block;
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 50%;
    right: 15.7px;
    transform: translateY(-50%);
    background: url(../imgs/arrow-gr.webp) no-repeat center;
    background-size: contain;
}

.content__btn a:hover {
    color: #FFFFFF;
    background-color: #318437;
    transition: .4s;
}

.content__btn a:hover::after {
    display: block;
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 50%;
    right: 15.7px;
    transform: translateY(-50%);
    background: url(../imgs/arrow-wh.webp) no-repeat center;
    background-size: contain;
}



/* ===========
ヘッダー
============= */
.header {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: absolute;
    padding: 15px 41px 18.5px 25px;
    z-index: 9999;
}

.h1 {
    max-width: 308px;
}

.h1 img {
    object-fit: cover;
}

.global__navigation {
    display: flex;
    align-items: center;
    gap: 22px;
}

.navigation__item {
    color: #FDFBF0;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;
    transition: .4s;
}
.header-inst {
	width: 20px;
}

.navigation__item:nth-child(1):hover,.navigation__item:nth-child(2):hover,.navigation__item:nth-child(3):hover {
    border-bottom: 1px solid #FFFFFF;
    transition: .4s;
}


.navigation__item:last-child a {
    border: 1px solid #FFFFFF;
    padding: 15px 37px 18.5px 55px;
    transition: .4s;
}

.navigation__item:last-child a:hover {
    background-color: rgb(255, 255, 255, 34%);
    transition: .4s;
}

.side-icon {
    display: block;
    position: relative;
    padding-left: 15px;
}

.side-icon::before {
    display: block;
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    background: url(../imgs/Icon-mail.webp) no-repeat center;
    background-size: contain;    
}

.ham-log {
    display: none;
}

@media screen and (max-width: 1024px) {
.header {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 16px;
    z-index: 9999;
}

.h1 {
    width: 14.24%;
}

.ham {
    position: relative;
    width: 51px;
    height: 51px;
    z-index: 9999;
    cursor: pointer;
}

.ham__line {
    position: absolute;
    width: 51px;
    height: 3px;
    background-color: #FFFFFF;
    border-radius: 8px;
}

.ham__line::before {
    display: block;
    content: "";
    position: absolute;
    width: 51px;
    height: 3px;
    top: 17px;
    left: 0;
    background-color: #FFFFFF;
    border-radius: 8px;
    transition: .4s;
}

.ham__line::after {
    display: block;
    content: "";
    position: absolute;
    width: 51px;
    height: 3px;
    bottom: 17px;
    left: 0;
    background-color: #FFFFFF;
    border-radius: 8px;
    transition: .4s;
}

.ham.open .ham__line {
    background-color: transparent;
}

.ham.open .ham__line::before {
    background-color: #318437;
    top: 8px;
    transform: translateY(0) rotate(45deg);
    transition: .4s;
}

.ham.open .ham__line::after {
    background-color: #318437;
    top: 8px;
    transform: translateY(0) rotate(-45deg);
    transition: .4s;

}

nav {
    position: fixed;
    top: -120%;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    z-index: 9998;
    transition: top .7s ease;
    background: #FFFFFF;
}

.ham-log {
    display: block;
    width: 20.23%;
    padding: 25px 0 0 26px;
}

.ham-log img {
    object-fit: cover;
}

.global__navigation {
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 90px 16px 0 16px;
}

.navigation__item {
    font-size: 1.625rem;
    line-height: 1.692;
    color: #318437;
    padding-right: 33px;
}

.navigation__item:last-child {
    width: 100%;
    position: relative;
}

.navigation__item:last-child a {
    display: block;
    border: 1px solid #318437;
    text-align: center;
    margin-top: 120px;
    margin-bottom: 28px;
    padding: 15px 0 18.5px 0;

}

.side-icon a {
    padding-left: 21px;
    display: inline-block;
}

.side-icon::before {
    display: block;
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    top: 71%;
    left: 40px;
    background: url(../imgs/icon-mail_gr.webp) no-repeat center;
    background-size: contain;    
}

nav.show {
    top: 0;
    transition: .7s;
}

}

@media screen and (max-width: 320px) {
.side-icon::before {
    display: block;
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    top: 65%;
    left: 28px;
    background: url(../imgs/icon-mail_gr.webp) no-repeat center;
    background-size: contain;    
}
}

/* =============
フッター 
================*/
footer {
    background: url(../imgs/footer-bg.webp) no-repeat center;
    background-size: cover;
    padding: 67px 0 15px 0;
    position: relative;
}

footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0, 0, 0, 26%);
    pointer-events: none;
}

.footer__list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, max-content);
    column-gap: 36px;
    row-gap: 12px;
    margin-bottom: 181px;
    position: relative;
    z-index: 100;
}

.footer__item {
    background-color: var(--btn-bg);
    border-radius: 10px;
    padding-bottom: 8px;
    box-sizing: border-box;
    transition: .4s;
}


.footer__item a {
    display: block;
    color: var(--btn-color);
    padding: 42px 0 42px 113px;
    text-align: center;

}

.footer__item:nth-child(4) a {
    padding-left: 53px;
} 

.footer__item-inner {
    display: flex;
    align-items: center;
    gap: 52px;
    position: relative;
}

.footer__item-inner::before {
    position: absolute;
    display: block;
    content: "";
    width: 31px;
    height: 31px;
    top: 50%;
    left: -48px;
    transform: translateY(-50%);
}

.footer__item-lead, .footer__item-text {
    font-family: "Noto Serif JP", serif;
    color: var(--color-text);
}

.footer__item-text {
    font-size: var(--font-size-color-title);
    line-height: var(--color-title-height);
    font-weight: 600;
    text-align: center;
}

.icon-cart, .icon-mail {
    position: relative;
    transition: .4s;

}

.icon-cart::before {
    position: absolute;
    background: url(../imgs/icon-cart.webp) no-repeat center;
    background-size: contain;
}

.footer__item:nth-child(1):hover .icon-cart::before, .footer__item:nth-child(2):hover .icon-cart::before {
    position: absolute;
    background: url(../imgs/icon-cart_wh.webp) no-repeat center;
    background-size: contain
    
}

.icon-mail::before {
    position: absolute;
    background: url(../imgs/icon-mail_gr.webp) no-repeat center;
    background-size: contain;
}

.footer__item:nth-child(3):hover .icon-mail::before {
    position: absolute;
    background: url(../imgs/Icon-mail.webp) no-repeat center;
    background-size: contain;
}

.footer__item:hover {
    background-color: #318437;
    transition: .4s;
}

.footer__item:hover .footer__item-lead, .footer__item:hover .footer__item-text {
    color: #FFFFFF;

}

.footer-log {
    max-width: 239px;
    margin-bottom: 8.5px;
    position: relative;
    z-index: 100;
}

.footer-log img, .footer-nav__icon img {
    object-fit: cover;
}

.footer__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 24.5px;
    border-top: 1px solid #FFFFFF;
    color: #FFFFFF;
    position: relative;
    z-index: 100;
}

.footer-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 100;
}

.footer-navigation__item {
    font-weight: 600;
    margin-right: 5%;
    margin-bottom: 28px;
    transition: .4s;
    border-bottom: 1px solid transparent;
}


.footer-navigation__item:nth-child(3) {
    margin-right: 43px;
}

.footer-navigation__item:nth-child(4), .footer-navigation__item:nth-child(6) {
    margin-right: 0;
}

.footer-navigation__item:nth-child(5) {
    margin-right: 23px;
}

.footer-navigation__item:hover {
    transition: .4s;
    border-bottom: 1px solid #FFFFFF;
}

.footer-nav__icon {
    width: 20px;
}

.small {
    font-size: 0.625rem;
    color: #FFFFFF;
    line-height: 1.7;
    text-align: center;
    position: relative;
    z-index: 100;
}

@media screen and (max-width: 1024px) {
.footer__list {
    grid-auto-flow: row;
    grid-template-rows: none;
    column-gap: 0;
    row-gap: 14px;
    padding-top: 35px;
}

.footer__item {
    width: 100%;
}
.footer__item-inner {
    gap: 0;
}

.footer__item-lead {
    font-size: 0.81rem;
    line-height: 1.769;
}

.footer__item-text {
    font-size: 1.25rem;
    line-height: 1.7;
    margin: 0 auto;
}

.footer__item a {
    padding: 25px 0 25px 66px;
}

.footer__item:nth-child(4) a {
    padding-left: 0;
} 

}


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


.footer-box {
    margin: 0 auto;
}

.footer-log {
    margin: 0 auto 14px;
}

.footer__content {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 0;
    border-top: none;
    margin: 0 auto;
}

address {
    display: block;
    width: 100%;
}
.address {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-bottom: 17.5px;
    padding-right: 15.7%;
}

.footer-navigation {
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 14.5px;
    border-top: 1px solid #FFFFFF;
    padding-right: 15.7%;
    margin-bottom: 16px;

}

.footer-navigation__item {
    margin-right: 0;
    margin-bottom: 14px;
}

.footer-navigation__item:nth-child(5) {
    margin-bottom: 28px;
}

.footer-navigation__item:nth-child(3) {
    margin-right: 0;
}

.footer-navigation__item:nth-child(5) {
    margin-right: 0;
}




}