@charset "utf-8";


:root {
    --main-color: #fff2e5;
    /* #fdf9f7; */
    --moji-color-koi: #6c5b56;
}

header .icon a {
    display: inline-block;
    width: 2.2rem;
    margin-left: 1.6rem;
    transition: .5s;
}

header .icon a:hover {
    opacity: .5;
}

header .icon a:first-child{
    margin-left: 3rem;
}

header .icon a:nth-child(3){
    width: 1.52rem;
}

header .menu {
    display: flex;
}


.header-inner {
    background-color: var(--main-color);
    border-bottom:.1rem solid #dbc9b8;
    position: fixed;
    top: 0;
    height: 7.7rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ヘッダーの高さ分paddingで隙間を開けている */
main {
    padding-top: 7.7rem;
}

main .title {
    height: 20.5rem;
    border-bottom:.1rem solid #dbc9b8;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var( --moji-color-koi);
}

.shop-contents {
    display: flex;
    flex-direction: row-reverse;
    padding: 10.7rem 6rem;
}

.shop-item {
    margin-left: 9.8rem;
}

.shop-item .price-list {
    display: flex;
    justify-content: space-between;
    margin-top: .5rem;
}

.price-list a,
.namae {
    transition: .5s;
}

.price-list a:hover,
.namae:hover {
    opacity: .5;
}

.shop-item ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7.5rem 2.7rem;
    width: 95.7rem;
}

.shop-item ul li {
    font-size: 1.4rem;
    font-family: "kozuka-gothic-pr6n", sans-serif;
}

.shop-item .oya {
    overflow: hidden;
}

/* 商品画像を囲むaタグ */
.shop-item .oya a {
    width: 21.9rem;
    display: block;
    transition: .5s ease-in-out;
}

.shop-item .oya a:hover {
    transform: scale(1.1);
}

.shop-item .namae {
    margin-top: 2rem;
    display: block;
}

.shop-item .price-list img{
    width: 2.0rem;
}

aside h2{
    font-size: 2.6rem;
    border-bottom: .1rem solid #dbc9b8;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    color: var(--moji-color-koi);
}

aside li {
    font-size: 2.4rem;
}

aside li a {
    transition: .5s;
}

aside li a:hover {
    opacity: .5;
}

aside li:nth-child(6) {
    border-top: .1rem solid #dbc9b8;
    border-bottom: .1rem solid #dbc9b8;
    padding: 1rem 0;
    margin-top: 1rem;
}


/* ここからcontact */
.contact {
    width: 90%;
    max-width: 640px;
    margin: 7rem auto 10rem auto ;
    font-size: 1.4rem;
    font-family: "kozuka-gothic-pr6n", sans-serif;
}

.select-box {
    border: 1px solid #fff;
    font-size: 1.4rem;
}

.input-text,
.select-box,
.message {
    background-color: #fff;
    width: 100%;
}

.input-text,
.select-box {
    height: 4rem;
}

.input-text,
.message {
    padding: 1.5rem;
}

.message {
    height: 16rem;
}

.contact dd {
    margin-bottom: 4rem;
}

.contact dt {
    margin-bottom: .8rem;
}

.contact dt .required {
    position: relative;
}

/* ノートにまとめる######################### */
.contact dt .required::after {
    content: '※';
    position: absolute;
    top: -.3rem;
    padding: -1.1rem;
    color: red;
    font-size: 1rem;
    transform: scale(0.8);
    transform-origin: right top;
}

.submit-button {
    background-color: var(--moji-color-koi);
    color: #fff;
    width: 100%;
    line-height: 4rem;
    margin-top: 2rem;
    cursor: pointer;
}


/* ここからスマホ */
@media (max-width: 800px) {
    html {
        font-size: 1.25vw;
    }    

    header .site-menu {
        display: none;
        font-size: 5.4rem;
        text-align: center;
        padding: 14rem 0;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        /* logoを上に表示させるため９に */
        z-index: 9;
        background-color: #fff2e5F2;
    }

    header .site-menu.on {
        display: block;
    } 

    header .site-menu li {
        margin: 0 0 4rem 0;
    }

    header .instg {
        margin: 3rem 0 0 19rem;
        width: 4.2rem;
        position: relative;
    }

    header .instg::before {
        content: 'follow us';
        display: inline-block;
        position: absolute;
        bottom: .2rem;
        right: 7.3rem;
        white-space: nowrap;
        font-size: 4rem;
    }

    header .logo {
        z-index: 10;
        /* logoの位置をPC版より下に下げる */
        margin-top: 0rem;
    }

    .toggle {
        display: block;
    }

    .toggle {
        position: fixed;
        /*logoの位置に合わせた */
        top: 1.6rem;
        right: 4rem;
        width: 6rem;
        height: 3rem;
        /* background-color: #fff; */
        z-index: 10;
    }

    .toggle span,
    .toggle span::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: #6c5b56CC;
        transition: .5s;
        position: absolute;
    }

    .toggle span::after {
        top: 1.2rem;
    }
    
    .toggle.on span {
        transform: rotate(-45deg);
    } 

    .toggle.on span::after {
        transform: translateY(-1.2rem) rotate(90deg);
    }

    header .icon {
        margin-right: 10rem;
    }

    footer {
        color: var(--moji-color-koi);
        padding: 0 3rem;
    }

    .shop-contents {
        display: block;
        padding: 10.7rem 3rem;
    }

    .shop-item {
        margin-left: 0;
        margin-bottom: 8rem;
    }

    .shop-item ul {
        gap: 7.5rem 0;
        width: auto;
        justify-content: space-between;
    }

    aside li:nth-child(6) {
        border-bottom: none;
    }

}