@charset "UTF-8";
/*TOPページ*/

main > h2:first-of-type {
    background: url(../img/top/main.jpg) no-repeat center,rgb(86 54 42 / 45%);
    background-blend-mode: soft-light;
    height: 90vh;
    background-size:100% auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    font-size: 100px;
    text-shadow: 0 0 10px #401b06;
    letter-spacing: .7rem;
    font-weight: 400;
    line-height: 130%;
}

main > h2:first-of-type span {
    font-size: 28px;
    letter-spacing: .2rem;
    text-shadow: none;
}


@media screen and (max-width: 480px) {
    main > h2:first-of-type {
        background: url(../img/top/main.jpg) no-repeat center,rgb(86 54 42 / 45%);
        background-blend-mode: soft-light;
        height: 75vh;
        background-size:cover;
       font-size: 60px;
        line-height: 130%;
    }
    main > h2:first-of-type span {
        font-size: 20px;
    }
}
/**************************************************
concept
**************************************************/
#concept {
    background:url(../img/top/midashi.jpeg) no-repeat right center;
    background-size: 100% auto;
}
#concept .inner {
    max-width: 1080px;
    width: 90%;
    margin: 1rem auto 0;
    padding: 5rem 0;

}
#concept h2 {
    font-family: 'ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic',sans-serif; 
    font-weight: 500;
    font-size: 1.7rem;
    letter-spacing: .1rem;
    margin-bottom: 1rem;
}
#concept h2 span{
display: block;
color: #a78b26;
font-size: 70%;
}
#concept .inner p {
    line-height: 200%;
}
@media screen and (max-width: 1366px) {

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

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

}
@media screen and (max-width: 480px) {
    #concept {
        background:url(../img/top/midashi.jpeg) no-repeat 85% 115%;
        background-size: auto 45%;
    }
    #concept h2 {
        text-align: center;
        line-height: 140%;
    }
    #concept h2 span {
        font-size: 60%;
        letter-spacing: 0;
        margin-bottom: .5rem;
    }
    #concept .inner {
        padding-bottom: 13rem;
    }
    #concept .inner p {
        font-size:16px;
        text-align: center;
    }

}
/**************************************************
topic
**************************************************/
#topic {
    max-width: 1480px;
    width: 90%;
    margin: 5rem auto 0;
}
#topic h3 {
    font-size: 3rem;
    color: #c14a50;
    letter-spacing: .1rem;
    font-weight: 400;
    text-align: center;
}
#topic .inner {
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
}
#topic .inner ul {
    order: -1;
    display: flex;
    justify-content: space-between;
}
#topic .inner ul li {
    width: 32%;
}
#topic .inner p,
#topic .inner dl {
    width: 100%;
    max-width: 1230px;
    margin: 3.5rem auto 0;
    line-height: 190%;
}
#topic .inner dl {
    max-width: 1080px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#topic .inner dl dt {
    width: 25%;
    text-align: center;
    color: #b79b5b;
    border-right: 1px solid #b79b5b;
    font-size: 24px;
    align-self: center;
    padding:1rem 0;
}
#topic .inner dl dd {
    width: 70%;
    align-self: center;
    letter-spacing: .05rem;

}
#topic .inner p span {
    color: #c14a50;
}

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

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

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

}
@media screen and (max-width: 480px) {
    #topic {
        font-size: 16px;
    }
    #topic h3 {
        font-size: 2.2rem;
    }
    #topic .inner ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    #topic .inner ul li {
        width: 48%;
        margin: 0 1% 2%;
    }
    #topic .inner ul li:last-of-type {
        width: 100%;
    }
    #topic .inner ul li:last-of-type figure {
        width: 48%;
        margin: 0 auto;
    }
    #topic .inner dl dt {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #b79b5b;
        padding: 0 auto .5rem;
    }
    #topic .inner dl dt br {
        display: none;
    }
    #topic .inner dl dd {
        width: 100%;
        margin-top: 1rem;
    }

}

/**************************************************
products
**************************************************/
#products {
    background:#fcfbf8;
    margin-top: 6rem;
    padding: 4rem 0;
    font-family: 'ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic',sans-serif; 
}
#products > section {
    max-width: 940px;
    margin: 0 auto 3rem;
    width: 90%;
}

#products h4 {
    background: url(../img/common/under_dotteline.gif) no-repeat bottom center;
    text-align: center;
    font-weight: 500;
    padding-bottom: .5rem;
}
#products > section .inner {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin-top: 2rem;
}
#products > section .inner p {
    width: 32%;
    background:#f6f3e9;
    color: #a78b26;
    font-size: 16px;
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 10px;
    font-weight: 500;
}
#products > section .inner dl {
    width: 30%;
    font-size: 14px;
}
#products > section .inner dl dt {
    margin-bottom: .5rem;
    text-align: center;
    line-height: 120%;
    font-size: 16px;
}
#products > section .inner dl dd {
    color: #565656;
}
#products > section .inner dl dt strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
}
#products > section .inner dl figure {
    margin-bottom: .5rem;
}
@media screen and (max-width: 480px) {
    #products {
        margin-top: 3rem;
        padding-bottom: 1rem;
    }
    #products > section .inner p {
        width: 100%;
        padding: 1rem .5rem;
        margin-bottom: .5rem;
    }
    #products > section .inner p br {
        display: none;
    }
    #products > section .inner dl {
        position: relative;
        width: 100%;
        margin-bottom: 2rem;
    }
    #products > section .inner dl figure {
        position: absolute;
        left: 0;
        top: 0;
        width: 30%;
    }
    #products > section .inner dl dt {
        width: 65%;
        text-align: left;
        margin: 1.5rem auto 2rem 35%;
        color: #a78b26;
    }
    #products > section .inner dl dt strong {
        font-weight: normal;
    }
}