@charset "UTF-8";

/* 全体 */
html {
    font-size: 62.5%;
    /* 1rem = 10px;   100:x = 16:10*/
    scroll-behavior: smooth;
}

body {
    font-size: 1.6rem;
    font-family: 'HG正楷書体-PRO', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

img {
    /* 画像は親要素に合わせて調整される */
    width: 100%;
    height: auto;
}

a {
    color: #000000;
    text-decoration: none;
}

address {
    font-style: normal;
}

ul {
    list-style: none;
}

main {
    width: calc(100% - 15rem);
    margin: 0 0 0 auto;
}

.container {
    margin: 0 auto;
    width: 95%;
}

@media (max-width:1000px) {
    html {
        font-size: 50%;
        /* 1rem = 8px;*/
    }
}

/* slick */
.slick-prev {
    left: -35px !important;
}

.slick-prev:before,
.slick-next:before {
    font-size: 30px !important;
    color: #647000 !important;
    background: #FFFFFF !important;
}

/* ヘッダー */
.mask.open {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0;
    left: 0;
}

.header-left-area {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 15rem;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 2px -9px 30px 0 #000000;
    z-index: 200;

}

.header-left-area .hamburger {
    position: relative;
    top: 0;
    left: 0;
    background: #647000;
    width: 15rem;
    height: 15rem;
}

.header-left-area .hamburger .column-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 5rem;
    height: 5rem;
}

.header-left-area .hamburger .column-box span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 3rem;
    height: 0.1rem;
    background: #FFFFFF;
}

.header-left-area .hamburger .column-box:hover {
    cursor: pointer;
}

.header-left-area .hamburger .column-box span {
    display: flex;
}

.header-left-area .hamburger .column-box span:nth-child(1) {
    top: 1.6rem;
}

.header-left-area .hamburger .column-box:hover span:nth-child(1) {
    top: 1.8rem;
    transition: 0.3s all;
}

.header-left-area .hamburger .column-box span:nth-child(2) {
    top: 2.5rem;
}

.header-left-area .hamburger .column-box span:nth-child(3) {
    top: 3.4rem;
}

.header-left-area .hamburger .column-box:hover span:nth-child(3) {
    top: 3.2rem;
    transition: 0.3s all;
}

/* ハンバーガークリック後 -------------------------------------*/
.header-left-area .hamburger.active .column-box span:nth-child(1) {
    transform: translateX(-1.5rem) rotate(45deg);
    top: 45%;
}

.header-left-area .hamburger.active span:nth-child(2) {
    display: none;
}

.header-left-area .hamburger.active .column-box span:nth-child(3) {
    transform: translateX(-1.5rem) rotate(-45deg);
    top: 45%;
}

/*-----------------------------------------------------------*/

.header-left-area .hamburger .column-box .column-text {
    text-align: center;
    padding: 4rem 0 0 0;
    font-size: 1.35rem;
    line-height: 2.45rem;
    color: #FFFFFF;
}

.header-left-area .header-info01 .company h1 {
    margin: -4rem 0 0 0;
    text-align: center;
    line-height: 1;
}

.header-left-area .header-info01 .company h1 a {
    font-size: 1.5rem;
    color: #647000;
}

.header-info01 .company h1 span {
    font-size: 3rem;
    line-height: 0.5;
}

.header-info02 .wrap .tel a:hover {
    color: red;
}

.header-info02 .wrap .tel a {
    transition: all 0.3s;
}

.header-info02 .wrap .tel p {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.333;
}

.header-info02 .wrap .tel .tel-line {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    line-height: 1.333;
}

.header-info02 .wrap .tel .tel-line img {
    width: 1.6rem;
    height: 1.6rem;
}

.header-info02 .wrap .tel address {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 2.34rem;
}

.header-info02 .postage a img {
    display: block;
    margin: 0 auto;
    width: 10.9rem;
    transition: all 0.3s;
}

.header-info02 .postage a img:hover {
    opacity: 0.5;
}

.header-info02 .wrap .detail button {
    display: block;
    margin: 0 auto;
    padding: 0.2rem 0.2rem 0.2rem 0.2rem;
    width: 14rem;
    height: 2.85rem;
    font-size: 1.4rem;
    color: #FFFFFF;
    border-radius: 1rem;
    background: #647000;
    transition: all 0.3s;
}

.header-info02 .wrap .detail button:hover {
    background: red;
}

.header-hamburger-menu {
    position: fixed;
    z-index: 100;
    top: 0;
    left: -100%;
    width: 76.4rem;
    height: 100vh;
    background: rgba(100, 112, 0, 0.84);

}

/* ハンバーガークリック後---------------------------------------------- */
.header-hamburger-menu.active {
    left: 15rem;
}

/*------------------------------------------------------------------- */

.header-hamburger-menu .item {
    display: flex;
    justify-content: space-around;
    overflow-y: scroll;
    height: 75rem;
    white-space: nowrap;

}

.scroll .scroll-title .scroll-title-link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6rem 0 0 10.3rem;
    width: 52.6rem;
    height: 5.2rem;
    font-family: "UD Digi Kyokasho N-R", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 2.5rem;
    line-height: 1.6;
    text-decoration: none;
    color: #FFFFFF;
    border: 0.1rem #FFFFFF solid;
}

.gnav-list-up {
    margin: 10rem 0 0 0;
}

.gnav-list-middle {
    margin: 4.1rem 0 0 0;
}

.gnav-list-middle02 {
    margin: 7.1rem 0 0 0;
}

.gnav-list-middle03 {
    margin: 2.5rem 0 0 0;
}

.gnav-list .social {
    display: flex;
    margin: 1rem 0 0 3rem;
    padding: 0 0 3rem 0;
}

.gnav-list .social li {
    width: 5.9rem;
    margin: 0 1rem 0 0;
}

.gnav-title {
    font-size: 3rem;
    color: #000000;
    line-height: 1.333;
}

.gnav-text {
    font-size: 2.5rem;
    line-height: 1.6;
    color: #FFFFFF;
}

.gnav-indent {
    text-indent: 4rem;
}

.gnav-indent02 {
    text-indent: 10.3rem;
}

.gnav-indent03 {
    text-indent: 3rem;
}

.header-main-pic {
    position: relative;
    z-index: 1;
}

.slick-item .slick-itemlist img {
    height: 100vh;
    object-fit: cover;
}

.slick-box .main-pic-item-text {
    position: absolute;
    top: 23.5%;
    right: 13.3%;
    writing-mode: vertical-rl;
}

.slick-box .main-pic-item-text span {
    display: inline-block;
    padding: 1rem 0.5rem 1rem 0.5rem;
    font-size: 4.1rem;
    line-height: 1.195;
    background: #FFFFFF;
}

.slick-box .main-pic-item-text span:nth-of-type(2) {
    margin: 6.5rem 2rem 0 0;
}

.slick-box .main-pic-item-text span:nth-of-type(3) {
    margin: 13.8rem 2rem 0 0;
}

/* セレクション */
#selection {
    position: relative;
    margin: -2% 0 0 0;
    padding: 10.2rem 0 13.4rem 0;
    background-image: url(../images/ja-style-background.png);
}

.selection-area-setting {
    position: relative;
    z-index: 2;
    display: flex;
    width: 80%;
    height: auto;
    background: #F6F6F6;

}

.selection-area .selection-area-setting {
    margin: 0 0 0 auto;
}

.selection-area-title {
    writing-mode: vertical-rl;
}

.selection-area .feature-title img {
    position: absolute;
    top: -20rem;
    left: -13rem;
    width: 19.3rem;

}

.selection-area-title-p {
    padding: 5% 0 0 2%;
    font-size: 2rem;
    letter-spacing: 0.2em;
    white-space: nowrap;
    color: #D4A405;

}

.selection-area-title-h2 {
    margin: 6% 0 0 4%;
    font-size: 5.1rem;
    line-height: 1.196;
    letter-spacing: 0.2em;
    color: #000000;
}

.selection-area-button {
    width: 18.9rem;
    height: 5.5rem;
    background: #000000;
    font-size: 1.8rem;
    color: #FFFFFF;
    line-height: 1.167;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    transition: all 0.3s;
}

.selection-area .feature-title .selection-area-button {
    position: absolute;
    top: 27.5rem;
    left: -11.5rem;
}

.selection-area .selection-area-button:hover {
    background: #8f0116;
}

.selection-area .selection-item {
    margin: -3.3% auto 0 auto;

}

.item-array {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: -4.5rem auto 0 auto;
    width: 80%;

}

.common-box {
    position: relative;
    width: 22.5%;
    margin-bottom: 3rem;
    overflow: hidden;
    aspect-ratio: 1/1;

}

.common-expansion {
    transition: 0.3s all;
}

.common-box-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    padding: 0.5rem 1rem 0.5rem 1rem;
    font-size: 1.8rem;
    font-family: "UD Digi Kyokasho N-R", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    white-space: nowrap;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: 0.3s all;
}

.common-box:hover img {
    transform: scale(1.2, 1.2);
}

.common-box:hover .common-box-text {
    opacity: 1;
}

.empty {
    display: none;
}

.recommendation-area .selection-area-setting {
    flex-direction: row-reverse;
    margin: 25rem auto 0 0;
}

.recommendation-area .selection-item {
    margin: -3.3% auto 0 auto;
}

.recommendation-area .feature-title img {
    position: absolute;
    top: -21.5rem;
    right: -11%;
    width: 19.3rem;
}

.recommendation-area .feature-title .selection-area-title-h2 {
    margin: 6% 4% 0 0;

    white-space: nowrap;
}

.recommendation-area .feature-title .selection-area-title-p {
    padding: 30.5rem 1% 0 0;
    text-indent: -13.2em;
}

.recommendation-area .feature-title .selection-area-button {
    position: absolute;
    top: 40rem;
    right: -12rem;

}

/* お品書き */
#menu .menu-area {
    position: relative;
    background: #FFFBF0;
}

#menu .menu-up-pic {
    width: 100%;
}

.menu-area .menu-title {
    position: absolute;
    top: 0rem;
    left: 13%
}

.menu-area .menu-title .headline-title {
    position: relative;
    z-index: 3;
    margin: -11rem 0 0 13%;
    padding: 2rem 2rem 4rem 2rem;
    font-size: 5.1rem;
    letter-spacing: 0.4em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    color: #FFFFFF;
    background: #647000;
    box-shadow: 5px 3px 6px rgba(0, 0, 0, 0.43);
}

.menu-area .menu-title .back-square {
    content: "";
    position: absolute;
    z-index: 2;
    top: -84px;
    left: 30px;
    width: 9.2rem;
    height: 33.6rem;
    background: #E60707;
    opacity: 0.28;

}

.menu-area .product-box .common-box-text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 3.5rem;
    opacity: 1;
}

.menu-area .empty {
    display: block;
}

.menu-area .empty:last-child {
    display: none;
}

.menu-area .menu-merchandise {
    padding: 4rem 0 0 0;
    text-align: center;
}

#menu .menu-bottom-pic {
    width: 100%;
}

/* 人気ランキング */
.popular-area {
    position: relative;
    background-image: url(../images/ja-style-background.png);
    padding: 0 0 16.27rem 0;
}

.popular-area .popular-title img {
    display: block;
    margin: 0 auto 0 auto;
    padding: 10.5rem 0 0 0;
    width: 7.8rem;
}

.popular-area .popular-title img:nth-child(2) {
    position: absolute;
    top: -20rem;
    right: 13%;
    width: 19.3rem;
}

.popular-area .popular-title .headline-title {
    margin: 3.1rem 0 0 0;
    font-size: 5.1rem;
    font-family: "UD Digi Kyokasho N-R", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    text-align: center;
    line-height: 1.333;
}

.popular-area .popular-item {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 0 auto;
    width: 85%;
}

.rank-box .rank-mark {
    display: block;
    margin: 11.6rem auto 0 auto;
    width: 7.8rem;
}

.rank-text {
    margin: 1.6rem 0 0 0;
    text-align: center;
    font-size: 3.5rem;
    font-family: "UD Digi Kyokasho N-R", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.343;
}

.rank-box {
    width: 18%;
}

.rank-box .rank-pic {
    margin: 1.6rem 0 0 0;
    width: 100%;
    aspect-ratio: 1/1;
}

.rank-box .rank-pic img {
    display: block;
    margin: 0 auto 0 auto;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 3px solid rgba(212, 192, 0, 0.63);
    object-fit: cover;
}

.rank-box .product-name {
    margin: 2.3rem 0 0 0;
    text-align: center;
    font-size: 2rem;
    font-family: "UD Digi Kyokasho N-R", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.35;
    white-space: nowrap;
}

.rank-box .rank-price {
    margin: 1.6rem 0 0 0;
    text-align: center;
    font-size: 1.8rem;
    font-family: "UD Digi Kyokasho N-R", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.389;
}

/* 季節商品 */
#season {
    position: relative;
    padding: 0 0 30% 0;
    width: 100%;
    height: auto;
    background-image: url(../images/season-background.jpeg);
    background-size: 100%;
}

.season-area .season-title {
    position: absolute;
    top: 27%;
    left: 31.4%;
    font-size: 3.5rem;
    color: #000000;
    line-height: 1.196;
    letter-spacing: 0.3em;
    white-space: nowrap;
    writing-mode: vertical-rl;

}

.season-area .season-item .season-text {
    position: absolute;
    top: 32%;
    left: 40%;
    font-size: 2.5rem;
    line-height: 1.2;
    white-space: nowrap;
    color: #d4a405;
}

.season-area .season-item button {
    position: absolute;
    top: 48%;
    left: 55.5%;
    padding: 1.5rem 1.2rem 1.5rem 1.2rem;
    font-size: 2.5rem;
    line-height: 1.32;
    white-space: nowrap;
    color: #FFFFFF;
    border-radius: 10px;
    background: #647000;
}

/* 注目のラインアップ */
.attention-area {
    padding: 0 0 20.1rem 0;
    background-image: url(../images/ja-style-background.png);
}

.attention-area .attention-title {
    display: flex;
    padding: 18.67rem 0 0 0;
}

.attention-area .attention-title img {
    width: 43%;
    margin: 0 0 0 -17rem;
}

.attention-area .attention-title .headline-title {
    padding: 0 0 0 2.5rem;
    font-size: 5.1rem;
    line-height: 1.196;
    color: #000000;
}

.attention-area .attention-wrap {
    margin: 18.1rem auto 0 auto;
    width: 80%;
}

.various-box {
    position: relative;
}

.various-box .various-pic {
    margin: 0 auto;
    width: 90%;
    aspect-ratio: 3/2;
}

.various-box .various-pic img {
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
}

.various-box .various-pic .various-text {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding: 2% 0 2% 0;
    width: 90%;
    font-size: 1.8rem;
    line-height: 1.833;
    text-align: center;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.59);
}

/* お知らせとブログ */
#our-store {
    padding: 0 0 24.1rem 0;
    background-image: url(../images/ja-style-background.png);
}

.information-item {
    display: flex;
    justify-content: space-around;

}

.information-title {
    display: flex;
}

.information-title .information-title-wrap {
    position: relative;
    z-index: 2;
    background: #e60707;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.information-title .back-square {
    position: relative;
}

.information-title .back-square::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 2rem;
    left: -1.5rem;
    width: 5.4rem;
    height: 100%;
    background: #647000;
}

.common-attention-title {
    width: 5.4rem;
    height: 29.2rem;
}

.information-title .information-title-wrap .loudspeaker-pic img {
    display: block;
    padding: 0.95rem 0 0 0;
    margin: 0 auto;
    width: 3.4rem;
}

.information-title .information-title-wrap .headline-title {
    margin: 0.7rem auto 0 auto;
    font-size: 1.9rem;
    line-height: 1.211;
    letter-spacing: 0.2em;
    writing-mode: vertical-rl;
    color: #FFFFFF;
}

.information-box {
    padding: 3.4rem 0 2.5rem 0;
    background: #F9F9F9;
}

.information-box table tr {
    height: 4.1rem;

}

.information-box table tr td:nth-child(1) {
    width: 15rem;
    font-size: 1.8rem;
    line-height: 1.222;
    text-align: center;
    color: #000000;
}

.information-box table tr td:nth-child(2) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: normal;
    padding: 1rem 0 0 0;
    width: 35rem;
    font-size: 1.7rem;
    line-height: 1.176;
    text-align: left;
    color: #000000;


}

.information-box .notice {
    padding: 0 0 0 70%;
    white-space: nowrap;
}

.diary-item {
    display: flex;
    padding: 0 0 0 5rem;
}

.blog-title .blog-title-wrap {
    position: relative;
    z-index: 2;
    background: #EBC400;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.blog-title .back-square {
    position: relative;
}

.blog-title .back-square::before {
    position: absolute;
    content: "";
    z-index: 1;
    top: 2rem;
    left: -1.5rem;
    width: 100%;
    height: 100%;
    background: #E60707;
}

.blog-title .blog-title-wrap .note-pic img {
    display: block;
    padding: 0.95rem 0 0 0;
    margin: 0 auto;
    width: 3.2rem;
}

.blog-title .blog-title-wrap .headline-title {
    margin: 0.7rem auto 0 auto;
    font-size: 1.9rem;
    line-height: 1.211;
    letter-spacing: 0.2em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    color: #FFFFFF;
}

.blog-box {
    padding: 3.4rem 0 2.5rem 0;
    background: #F9F9F9;
}

.blog-box table tr {
    height: 4.1rem;
}

.blog-box table tr td:nth-child(1) {
    width: 15rem;
    font-size: 1.8rem;
    line-height: 1.222;
    text-align: center;
    color: #000000;
}

.blog-box table tr td:nth-child(2) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: normal;
    padding: 1rem 0 0 0;
    width: 35rem;
    font-size: 1.7rem;
    line-height: 1.176;
    text-align: left;
    color: #000000;

}

.blog-box .notice {
    padding: 0 0 0 70%;
    white-space: nowrap;
}

/* フッター */
#footer {
    margin: 0 0 0 auto;
    padding: 0 0 4rem 0;
    background: url(../images/footer.jpg);
    width: calc(100% - 15rem);

}

.footer-area {
    position: relative;
    display: flex;
    justify-content: space-around;
    margin: -8rem auto 0 auto;
    padding: 14.4rem 0 0 0;
    width: 70%;
}

.footer-area::before {
    content: "";
    position: absolute;
    top: -18%;
    left: -15%;
    width: 11rem;
    height: 25rem;
    background: url(../images/foot-cta-obj.png);
    background-size: 100% 25rem;
}

.footer-area .footer-box a img {
    width: 4.7rem;
}

.footer-area .footer-box li {
    padding: 0 0 4.1rem 0;
}

.footer-area .footer-box li a {
    font-size: 1.6rem;
    font-family: "UD Digi Kyokasho N-R", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.36;
    color: #000000;
}

.merchandise-while {
    padding: 0 0 1.8rem 0 !important;
}

.merchandise-text {
    font-size: 1.8rem !important;
}

.sns-setting {
    margin: -2rem 0 0 0;
    white-space: nowrap;
}

.sns-setting a {
    margin: 0 3.1rem 0 0;
}

.footer-copyright {
    text-align: center;
    font-size: 1.8rem;
    font-family: "UD Digi Kyokasho N-R", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.389;
    color: #000000;
}

.copyright-br {
    display: none;
}

@media (max-width:1300px) {

    /* セレクション */
    .selection-area .selection-item {
        margin: -6% auto 0 auto;
    }

    .selection-area .feature-title .selection-area-button {
        position: absolute;
        top: 29rem;
        left: -11.5rem;
    }

    .common-box {
        width: 30%;
    }

    .empty {
        display: block;
    }

    .recommendation-area .selection-item {
        margin: -6% auto 0 auto;
    }

    .recommendation-area .feature-title img {
        top: -21.5rem;
        right: -16%;
    }

    .recommendation-area .feature-title .selection-area-button {
        top: 41.5rem;
        right: -11rem;
    }

    /* お品書き */
    .menu-area .empty:last-child {
        display: block;
    }

    /* 季節商品 */
    .season-area .season-title {
        top: 25%;
        left: 31.2%;
        font-size: 2.5rem;
    }


    /* お知らせとブログ */
    .information-box table tr td:nth-child(1) {
        width: 12rem;
    }

    .information-box table tr td:nth-child(2) {
        width: 20rem;
    }

    .information-box .notice {
        padding: 0 0 0 60%;
    }

    .blog-box table tr td:nth-child(1) {
        width: 12rem;
    }

    .blog-box table tr td:nth-child(2) {
        width: 20rem;
    }

    .blog-box .notice {
        padding: 0 0 0 60%;
    }

    /* フッター */
    .sns-setting a {
        margin: 0 1rem 0 0;
    }

    .footer-area {
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 70%;
    }

    .footer-area::before {
        top: -10%;
        left: -25%;
    }

    .footer-box {
        width: 50%;
        padding: 3rem 0 0 0;
    }

    .footer-box:nth-child(1) {
        order: 1;
    }

    .footer-box:nth-child(2) {
        order: 3;
    }

    .footer-box:nth-child(3) {
        order: 2;
    }

    .footer-box:nth-child(4) {
        order: 4;
    }

}

@media (max-width:1000px) {

    /* 全体 */
    main {
        width: auto;
        margin: 0;
    }

    /* ヘッダー */
    .header-left-area {
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        height: 7.5rem;
    }

    .header-left-area .hamburger {
        width: 7.5rem;
        height: 7.5rem;
    }

    .header-left-area .header-info01 {
        margin: auto 0 auto 0;
    }

    .header-left-area .header-info01 .company h1 {
        margin: 0 0 0 0;

        margin: 0 0 0 10%;
        white-space: nowrap;
    }

    .header-info02 {
        margin: auto 3% auto auto;
    }

    .header-info02 .wrap {
        display: flex;
        align-items: center;
    }

    .header-info02 .wrap li {
        margin: 0 5% 0 0;
    }

    .header-info02 .wrap .tel p {
        white-space: nowrap;
    }

    .header-info02 .wrap .tel .tel-line {
        white-space: nowrap;
    }

    .header-info02 .wrap .detail button {
        margin: 0 2rem 0 0;
    }

    .header-hamburger-menu {
        top: 7rem;
        width: 100%;
    }

    .header-hamburger-menu .item {
        justify-content: space-around
    }


    /* ハンバーガークリック後---------------------------------------------- */
    .header-hamburger-menu.active {
        left: 0%;
    }

    /*------------------------------------------------------------------- */

    .scroll .scroll-title .scroll-title-link {
        width: 80%;
    }

    /* お品書き */
    .menu-area .menu-title .back-square {
        top: -65px;
        left: 27px;
    }

    /* 人気ランキング */
    .popular-area .popular-item {
        justify-content: space-around;
        flex-wrap: wrap;
        width: 80%;

    }

    .rank-box {
        width: 45%;

    }

    /* お知らせとブログ */
    .information-box table tr td:nth-child(2) {
        width: 18rem;
    }

    .information-box .notice {
        padding: 0 0 0 50%;
    }

    .blog-box table tr td:nth-child(2) {
        width: 18rem;
    }

    .blog-box .notice {
        padding: 0 0 0 50%;
    }

    /* フッター */
    #footer {
        width: auto;
        margin: 0;
    }

    .footer-copyright {
        padding: 3rem 0 0 0;
    }

}

@media (max-width:600px) {

    /* ヘッダー */
    .header-left-area .header-info01 {
        margin: 0 auto;
    }

    .header-left-area .header-info02 {
        display: none;
    }

    .header-hamburger-menu .item {
        justify-content: center;
        padding: 0 0 0 3rem;
    }

    .scroll .scroll-title .scroll-title-link {
        width: 68%;
    }

    .gnav-list .social {
        flex-wrap: wrap;
    }

    .gnav-list .social li {
        width: 5.9rem;
        margin: 1.5rem 1rem 0 0;

    }

    .gnav-title {
        font-size: 2.5rem;
    }

    .gnav-text {
        font-size: 2rem;
    }

    /* セレクション */
    .selection-area .selection-item {
        margin: -9.5% auto 0 auto;
    }

    .selection-area-title-p {
        display: none;

    }

    .common-box {
        width: 80%;
    }

    .empty {
        display: none;
    }


    .selection-area-title-p {
        padding: 16.5rem 0 0 1%;
    }

    .selection-area-title-h2 {
        margin: 17rem 0 0 10%;
    }

    .selection-area .feature-title img {
        top: -14.5rem;
        left: -9.5rem;
        width: 14rem;

    }

    .selection-area-button {
        width: 16rem;
        height: 4.5rem;
    }

    .selection-area .feature-title .selection-area-button {
        top: 42rem;
        left: -6rem;
    }

    .item-array {
        justify-content: center;
    }

    .recommendation-area {
        margin: 30% 0 0 0;
    }

    .recommendation-area .selection-item {
        margin: -9.5% auto 0 auto;
    }

    .recommendation-area .feature-title .selection-area-title-h2 {
        margin: 20.5rem 1.1% 0 0;
    }

    .recommendation-area .feature-title .selection-area-title-p {
        padding: 47rem 0.5% 0 0;
    }

    .recommendation-area .feature-title img {
        top: -15.5rem;
        left: auto;
        right: -10rem;
        width: 14rem;

    }

    .recommendation-area .feature-title .selection-area-button {
        top: 58rem;
        left: auto;
        right: -7.5rem;

    }

    /* お品書き */
    .menu-area .menu-title .headline-title {
        position: relative;
        z-index: 3;
        margin: -11rem 0 0 13%;
        padding: 2rem 1rem 2rem 1rem;
        font-size: 4rem;
    }

    .menu-area .menu-title .back-square {
        top: -75px;
        left: 23px;
        width: 6rem;
        height: 26.5rem;

    }

    .menu-area .empty {
        display: none;
    }

    .menu-area .empty:last-child {
        display: none;
    }

    /* 人気ランキング */
    .popular-area .popular-title img:nth-child(2) {
        left: 60%;
        width: 16rem;
    }

    .popular-area .popular-title .headline-title {
        font-size: 4rem;

    }

    .popular-area .popular-item {
        width: auto;
    }

    /* 季節商品 */
    .season-area .season-title {
        top: 33.3%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem;
        writing-mode: horizontal-tb;

    }

    .season-area .season-item .season-text {
        display: none;
    }

    .season-area .season-item button {
        top: 66.6%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 1rem 1rem 1rem 1rem;
        font-size: 2rem;

    }

    /* 注目のラインアップ */
    .attention-area {
        padding: 0 0 10rem 0;
    }

    .attention-area .attention-title {
        flex-direction: column;
        padding: 10rem 0 0 0;
    }

    .attention-area .attention-title img {
        width: 100%;
        margin: 0 0 0 -17rem;
    }

    .attention-area .attention-title .headline-title {
        margin: 10rem auto 0 auto;
        font-size: 3rem;
    }

    .attention-area .attention-wrap {
        margin: 10rem auto 0 auto;
    }

    /* お知らせとブログ */
    .information-item {
        flex-direction: column;
    }

    .information-box table tr td:nth-child(2) {
        width: 100%;
    }

    .diary-item {
        padding: 10rem 0 0 0;
    }

    .blog-box table tr td:nth-child(2) {
        width: 100%;
    }

    /* フッター */
    .copyright-br {
        display: block;
    }
}



/* blog.htmlの設定------------------------------------------------- */

/* blog-top */

.blog-top-area {
    position: relative;
    background: rgba(255, 0, 0, 0.09);

}

.blog-top-area .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 0 0;
    background: #FFFFFF;
    padding: 6.5rem 0 6.5rem 0;
    margin: -3rem 0 0 0;
}

.blog-top-item .bnav-box {
    display: flex;
    padding: 0 0 0 10rem;
}

.blog-top-item .bnav-box li {
    padding: 0 3rem 0 0;
    font-size: 2rem;
    font-family: "MS Mincho", 'HG正楷書体-PRO', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 4.95;
    white-space: nowrap;
}


.blog-top-item .bnav-box li a img {
    width: 1.6rem;
}

.blog-top-sns .snav-box {
    display: flex;
    padding: 0 4rem 0 0;
}

.blog-top-sns .snav-box li {
    padding: 0 1rem 0 0;
}

.blog-top-sns .snav-box li a img {
    width: 3.3rem;
}

/* blog-summary */

.summary-area {
    padding: 0 0 25rem 0;
    background: rgba(255, 0, 0, 0.09);

}

.summary-area .container {
    margin: 0 auto 0 0;
}

.summary-title {
    position: relative;
    padding: 6.4rem 0 7.8rem 10.9rem;
    font-size: 3.5rem;
    font-family: "MS Mincho", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.143;
    color: #000;

}

.summary-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 47rem;
    width: 30%;
    height: 3px;
    background: rgba(0, 0, 0, 0.16);

}

.summary-area .sumarray-item {
    background: #FFFFFF;
    display: flex;
    padding: 0 0 7rem 0;

}

.sumarray-item .feature-area {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-grow: 0;
    padding: 14.6rem 0 0 0;

}

.sumarray-item .feature-box {
    margin: 0 0 14.7rem 0;
    width: 26%;
    background: rgba(230, 7, 7, 0.61);

}

.sumarray-item .feature-box a {
    font-family: "MS Mincho", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.6;
    color: #FFFFFF;

}

.sumarray-item .feature-box a .feature-pic {
    aspect-ratio: 3/2;
}

.sumarray-item .feature-box a .feature-box-date {
    padding: 2.7rem 0 1.35rem 0;
    margin: 0 0 0 2rem;

}

.sumarray-item .feature-box a .feature-box-text {
    position: relative;
    margin: 0 0 0 2rem;
    padding: 1rem 0 3.3rem 0;
    line-height: 1.739;

}

.sumarray-item .feature-box a .feature-box-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 95%;
    height: 1px;
    background: #FFFFFF;

}

.sumarray-wrap {
    display: flex;
    justify-content: center;
    margin: -5.5rem 0 0 0;
}

.sumarray-wrap .move-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -10rem 0 0 0;
    width: 25%;
    font-size: 2.5rem;

}

.sumarray-wrap .move-btn li button {
    color: #647000;
    background: #FFFFFF;
}

.sumarray-wrap .move-btn li:first-child button {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 2rem;
    color: #FFFFFF;
    background: #647000;
    border-radius: 50%;

}

.sumarray-wrap .move-btn li:last-child button {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 2rem;
    color: #FFFFFF;
    background: #647000;
    border-radius: 50%;
}

.sumarray-item .right-item {
    flex-grow: 1;
    margin: 0 2rem 0 0;

}

.sumarray-item .right-item .right-title {
    padding: 14.6rem 0 0 0;
    font-size: 1.8rem;
    line-height: 1.611;
    text-align: center;
    color: #647000;
    white-space: nowrap;
}

.sumarray-item .right-item .profile {
    padding: 1.8rem 0 0 3.5rem;
    font-size: 1.8rem;
    font-family: "MS Mincho", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.611;
    color: #000000;

}

.sumarray-item .right-item .archives {
    padding: 14.3rem 0 0 0;
    text-align: center;
}

.sumarray-item .right-item .archives .archives-title {
    position: relative;
    padding: 0 0 1.2rem 0;
    font-size: 1.8rem;
    font-family: "MS Mincho", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.611;
    color: #000000;

}

.sumarray-item .right-item .archives .archives-title::before {
    content: "";
    position: absolute;
    top: 3.2rem;
    left: 32%;
    width: 37%;
    height: 3px;
    background: rgba(0, 0, 0, 0.16);

}

.sumarray-item .right-item .archives .past .past-text {
    font-size: 1.8rem;
    font-family: "MS Mincho", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.611;
    text-indent: 2rem;
    color: #000000;

}

.sumarray-item .right-item .archives .past .past-text:first-child {
    text-indent: -1em;

}

.month {
    text-indent: -3rem;
}

@media (max-width:1300px) {

    /* blog-summary */
    .sumarray-item .feature-area {
        width: 75%;

    }

    .sumarray-item .feature-box {
        width: 35%;

    }

    .sumarray-item .move-btn {
        width: 40%;
    }

    .sumarray-item .right-item {
        width: 25%;

    }

    .feature-area::after {
        content:"";
        display: block;
        width:30%;

    }



}

@media (max-width:1000px) {

    /*  blog-top */
    .blog-top-area .container {
        display: block;
        margin: -4rem 0 0 0;

    }

    .blog-top-item .bnav-box {
        justify-content: space-around;

    }

    .blog-top-sns .snav-box {
        justify-content: right;
    }


    /* blog-summary */
    .summary-title {
        padding: 6.4rem 0 7.8rem 0;
        text-align: center;

    }

    .summary-title::before {
        top: 65%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;

    }


    .sumarray-item .right-item {
        margin: 0 3rem 0 0;

    }


    @media (max-width:600px) {

        /*  blog-top */

        .blog-top-item .bnav-box {
            flex-wrap: wrap;
            padding: 0;
            margin: 0 auto;
            width: 55%;
        }

        .blog-top-item .bnav-box li {
            padding: 0 3rem 0 0;
            font-size: 2rem;
            font-family: "MS Mincho", 'HG正楷書体-PRO', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
            line-height: 2;
        }
    }

    /* blog-summary */
  
    .sumarray-item .feature-box {
        width: 80%;

    }

    .sumarray-item .right-item {
        margin: 0 0 0 0;
        width: 30rem;

    }

}




/* special.htmlの設定------------------------------------------------- */

/* 特集 */

.soba-area-up {
    position: relative;
    top: -3rem;
    left: 0;
    margin: -3rem 0 0 0;
    width: 100%;
    height: auto;
    background-image: url(../images/spe-background.jpg);
    background-size: 100%;

}

.soba-box {
    position: relative;
    display: flex;

}

.soba-box .soba-back-pic01 {
    padding: 16rem 0 0 0;
    margin: 0 auto;
    width: 75%;
    aspect-ratio: 5/3;

}

.soba-box .soba-back-pic01 img {
    margin: 0 auto;
    object-fit: cover;

}

.soba-box .soba-title {
    display: flex;
}

.soba-box .soba-title img {
    position: absolute;
    top: 8rem;
    left: 0;
    width: 15%;

}

.soba-box .soba-title .s-headline-title {
    margin: 24rem 0 0 0;
    font-family: "MS Mincho", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: 600;
    font-size: 6.8rem;
    letter-spacing: 0.2em;
    line-height: 1.324;
    writing-mode: vertical-rl;
    text-indent: -1.2em;
    white-space: nowrap;
    color: #000;

}

.b-soba-box {
    position: relative;

}

.b-soba-box .b-soba-back-pic01 {
    position: relative;
    margin: 18.6rem 0 25rem 0;
    width: 40%;
    aspect-ratio: 5/3;

}

.b-soba-box .b-soba-back-pic01 .soba-no3 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    object-fit: cover;

}

.b-soba-box .b-soba-wrap .soba-spe-back {
    position: absolute;
    z-index: -1;
    top: -28rem;
    left: 40%;
    width: 50%;
  
}

.b-soba-box .b-soba-wrap .b-soba-text {
    position: absolute;
    top: 67%;
    left: 30%;
    z-index: 2;
    padding: 5.9rem 7.5rem 5.9rem 7.5rem;
    font-size: 2rem;
    font-family: "MS Mincho", 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: 600;
    line-height: 2.5;
    white-space: nowrap;
    color: #000;
    background: #FFFFFF;

}

@media (max-width:1300px) {
    .b-soba-box .b-soba-back-pic01 {
        margin: 18.6rem 0 25rem 0;
        width: 60%;

    }

    .b-soba-box .b-soba-back-pic01 .soba-no3 {
        top: -33%;
        left: 30%;

    }

    .b-soba-box .b-soba-wrap .b-soba-text {
        top: 80%;
        left: 50%;
        transform: translateX(-50%);
        padding: 3rem 5rem 3rem 5rem;

    }
}