@charset "UTF-8";

/*--------------------------------------------------------------*/
/* CSS and Graphics are released under Creative Commons Licence */
/* https://www.webplus.jp/                                      */
/* Copyright (C) Kiyonobu Horita @ WEBPLUS Inc.                 */
/* 　　　　　　　　　　　　　                                     */
/* Browsers: last 4 version                                     */
/* 　　　　　　　　　　　　　                                     */
/* ***** single styles *****                                    */
/* 　　　　　　　　　　　　　                                     */
/*--------------------------------------------------------------*/


/* ========================================================

　Grobal Setting

=========================================================== */

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

html {
    font-size: 62.5%; /* 1.0rem = 10px */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    color: rgba(51, 51, 51, 1.00);
    font: normal 400 1.6rem / 150% 'YakuHanJP', 'Zen Maru Gothic', sans-serif;
    /*-webkit-font-feature-settings: "palt";
    font-feature-settings: "palt"; */
    word-wrap: break-all;
    overflow-x: hidden;
}

/* メニューオープン時にコンテンツのスクロールを停止 */
body.active {
    height: 100%;
    overflow: hidden;
}


/* ========================================================

　Default Link Color

=========================================================== */

a,
a:visited,
a img {
    color: rgba(10, 5, 0, 1.00);
    outline: none;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

a:hover,
a:focus {
    color: rgba(10, 5, 0, 0.70);
}

a:active {
    color: rgba(57, 16, 0, 1.00);
}

/* 電話番号（発信） */
article a[href*="tel:"] {
    color: rgba(10, 5, 0, 1.00);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    cursor: default;
}

/* メールアドレス */
article a[href*="mailto:"] {
    color: rgba(10, 5, 0, 1.00);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

@media only screen and (min-width: 751px) {

    a[href*="tel:"] {
        text-decoration: none;
        pointer-events: none;
    }

}


/* ========================================================

　Typography

=========================================================== */

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0;
    line-height: 100%;
}

/* 最後から２番目より以前 */
p:nth-of-type(n+2),
li:nth-of-type(n+2),
dd:nth-of-type(n+2) {
    margin-top: 0.5rem;
}

dt,
th {
    font-weight: 500;
}


/* ========================================================

　nav

=========================================================== */

#navigation {
    display: none;
    -webkit-animation: fadein 0.5s ease-in-out 0.5s normal backwards;
    animation: fadein 0.5s ease-in-out 0.5s normal backwards;
}

/* toggle = on */
body.active #navigation {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 160;
}

/*　背景
----------------------------------------------------------- */
#background {
    position: fixed;
    left: -5.0rem;
    bottom: -5.0rem;
    width: 10.0rem;
    height: 10.0rem;
    border-radius: 50%;
    background-color: rgba(250, 240, 225, 1.00);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    z-index: 150;
}

/* toggle = on */
body.active #background {
    -webkit-transform: scale(60);
    -ms-transform: scale(60);
    transform: scale(60);
    -webkit-transition: -webkit-transform 1.0s ease-in-out;
    transition: -webkit-transform 1.0s ease-in-out;
    -o-transition: transform 1.0s ease-in-out;
    transition: transform 1.0s ease-in-out;
    transition: transform 1.0s ease-in-out, -webkit-transform 1.0s ease-in-out;
}

/*　ナビゲーション
----------------------------------------------------------- */
#navigation h2 {
    position: fixed;
    top: 0.65rem;
    left: 0.5rem;
    z-index: 200;
}

#navigation h2 img {
    width: calc(100% - 7.5rem);
    height: auto;
}

#navigation .nav-scl {
    position: fixed;
    width: 100%;
    height: calc(100dvh - 6.0rem);
    padding-bottom: 2.0rem;
    background-image: url("../img/deco_pacino-----.png"), url("../img/navigation_deco01.png"), url("../img/navigation_deco02.png");
    background-position: right 1.0rem bottom 1.0rem, left top, right bottom;
    background-size: 24.0vw auto, 70.0vw auto, 70.0vw auto;
    background-repeat: no-repeat;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 170;
}

#navigation dt {
    margin-bottom: min(5.0vw, 3.0rem);
    color: rgba(57, 16, 0, 1.00);
    font-family: 'Rubik Dirt', cursive;
    font-size: min(10.0vw, 4.8rem);
    text-transform: uppercase;
}

#navigation dd {
    color: rgba(57, 16, 0, 1.00);
    text-align: justify;
    line-height: 120%;
}

/* PRODUCTS */
#navigation .menu {
    width: calc(100% - 8.0rem);
    margin: 8.0rem 1.5rem 0 1.5rem;
}

#navigation .menu dd:nth-of-type(n+2) {
    margin-top: 1.0rem;
}

#navigation .menu a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    border-radius: 3.0rem;
    color: rgba(57, 16, 0, 1.00);
    font-size: min(6.4vw, 3.0rem);
    font-weight: 500;
    text-decoration: none;
}

#navigation .menu a:hover {
    background-color: rgba(210, 175, 165, 0.25);
    color: rgba(57, 16, 0, 0.50);
}

#navigation .menu a::before {
    display: inline-block;
    width: 6.0rem;
    height: 6.0rem;
    margin-right: 1.0rem;
    border: 0.1rem solid rgba(165, 145, 125, 1.00);
    background-color: rgba(255, 255, 255, 1.00);
    background-position: center;
    background-size: 5.0rem 5.0rem;
    background-repeat: no-repeat;
    content: "";
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#navigation .menu a:hover::before {
    border: 0.1rem solid rgba(57, 16, 0, 1.00);
    border-radius: 3.0rem;
    background-color: rgba(255, 255, 255, 1.00);
    background-size: 5.5rem 5.5rem;
}

#navigation .menu dd:nth-of-type(1) a::before {
    background-image: url("../img/menu_products01_thumbnail.jpg");
}

#navigation .menu dd:nth-of-type(2) a::before {
    background-image: url("../img/menu_products02_thumbnail.jpg");
}

#navigation .menu dd:nth-of-type(3) a::before {
    background-image: url("../img/menu_products03_thumbnail.jpg");
}

#navigation .menu dd:nth-of-type(4) a::before {
    background-image: url("../img/menu_products04_thumbnail.jpg");
}

#navigation .menu dd:nth-of-type(5) a::before {
    background-image: url("../img/menu_products05_thumbnail.jpg");
}

/* ONLINE SHOP */
#navigation .shop {
    width: calc(100% - 8.0rem);
    margin: 3.0rem 1.5rem 0 1.5rem;
}

#navigation .shop dt {
    margin-bottom: min(5.0vw, 1.5rem);
}

#navigation .shop dd {
    width: 100%;
    max-width: 48.0rem;
}

#navigation .shop dd:nth-of-type(n+2) {
    margin-top: 1.0rem;
}

#navigation .shop a {
    display: block;
    position: relative;
}

#navigation .shop img {
    width: 100%;
    height: auto;
}

#navigation .shop img:nth-of-type(n+2) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

#navigation .shop a:hover img:nth-of-type(n+2) {
    opacity: 1.0;
}

/* submenu */
#navigation .submenu {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 6.0rem;
    background-color: rgba(165, 145, 125, 0.25);
    z-index: 170;
}

#navigation .submenu ul {
    margin: 0 1.5rem;
    padding: 0.75rem 0;
    font-size: 0;
}

#navigation .submenu li {
    display: inline-block;
    margin-top: 0;
    font-size: 1.5rem;
    line-height: 100%;
}

#navigation .submenu li:nth-of-type(even)::before {
    position: relative;
    top: 0.2rem;
    margin-right: 0.75rem;
    margin-left: 0.75rem;
    color: rgba(57, 16, 0, 1.00);
    font-family: 'Bootstrap-icons';
    content: "\f657";
}

#navigation .submenu a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

#navigation .submenu a::after {
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0.1rem;
    background-color: rgba(57, 16, 0, 0.50);
    content: '';
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
}

#navigation .submenu a:hover::after {
    width: 100%;
}

/* SNSボタン */
#navigation ul.sns {
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 170;
    -webkit-animation: fadein 1.0s ease-in-out 0s normal backwards;
    animation: fadein 1.0s ease-in-out 0s normal backwards;
}

/* toggle = on */
body.active #navigation ul.sns {
    display: block;
    position: absolute;
}

#navigation ul.sns,
#contents.scrolled #navigation ul.sns {
    top: 6.5rem;
    right: 1.5rem;
}

#navigation ul.sns li:nth-of-type(n+2) {
    margin-top: 1.0rem;
}

#navigation ul.sns a {
    display: -ms-inline-grid;
    display: inline-grid;
    place-items: center;
    width: 4.0rem;
    height: 4.0rem;
    padding: 0;
    padding-left: 0.05rem;
    padding-bottom: 0.1rem;
    border: 0.1rem solid rgba(165, 145, 125, 1.00);
    border-radius: 50%;
}

#navigation ul.sns a:hover {
    background-color: rgba(255, 255, 255, 1.00);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

#navigation ul.sns i {
    color: rgba(165, 145, 125, 1.00);
    font-size: 2.4rem;
}

@media only screen and (min-width: 375px) {

    #navigation h2 {
        top: 0.55rem;
    }

    #navigation .nav-scl {
        background-size: 36.0vw auto, 70.0vw auto, 70.0vw auto;
    }

    /* PRODUCTS */
    #navigation .menu {
        margin-top: 9.0rem;
    }

    /* submenu */
    #navigation .submenu ul {
        width: 29.0rem;
    }

    #navigation .submenu li {
        font-size: 1.6rem;
    }

    /* SNSボタン */
    #navigation ul.sns,
    #contents.scrolled #navigation ul.sns {
        top: 7.0rem;
    }

}

@media only screen and (min-width: 576px) {

    #navigation h2 {
        top: 0.95rem;
    }

    #navigation h2 img {
        width: auto;
        max-height: 6.0rem;
    }

    #navigation .nav-scl {
        background-position: right 20.0% bottom 50.0%, left top, right bottom;
    }

    /* PRODUCTS */
    #navigation .menu {
        width: calc(100% - 12.0rem);
        margin-top: 10.0rem;
    }

    /* ONLINE SHOP */
    #navigation .shop {
        width: calc(100% - 12.0rem);
        margin-top: 4.0rem;
    }

    /* submenu */
    #navigation .submenu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    #navigation .submenu ul {
        width: auto;
        height: 3.0rem;
    }

    #navigation .submenu li:nth-of-type(even)::before {
        content: none;
    }

    #navigation .submenu li:nth-of-type(n+2)::before {
        position: relative;
        top: -0.1rem;
        margin-right: 1.0rem;
        margin-left: 1.0rem;
        color: rgba(57, 16, 0, 1.00);
        font-family: 'Bootstrap-icons';
        font-size: 1.0rem;
        content: "\f287";
    }

    /* SNSボタン */
    #navigation ul.sns a {
        width: 6.0rem;
        height: 6.0rem;
    }

    #navigation ul.sns,
    #contents.scrolled #navigation ul.sns {
        top: 9.0rem;
    }

    #navigation ul.sns li:nth-of-type(n+2) {
        margin-top: 1.75rem;
    }

    #navigation ul.sns i {
        font-size: 3.6rem;
    }

}

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

    #navigation h2 {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    #navigation h2 img {
        max-height: 10.0rem;
    }

    #navigation .nav-scl {
        background-size: 20.0rem auto, 58.0rem auto, 58.0rem auto;
        background-position: right 14.0vw bottom 5.0vh, left top, right bottom;
    }

    /* PRODUCTS */
    #navigation .menu {
        width: calc(100% - 14.0rem);
        margin-top: 16.0rem;
    }

    #navigation .menu dd {
        display: inline-block;
    }

    #navigation .menu dd:nth-of-type(even) {
        margin-left: 2.25rem;
    }

    #navigation .menu a {
        width: 30.0rem;
    }

    /* ONLINE SHOP */
    #navigation .shop {
        width: calc(100% - 14.0rem);
        margin-top: 8.0rem;
    }

    #navigation .shop dt {
        margin-bottom: 3.0rem;
    }

    #navigation .shop dd:nth-of-type(1) {
        margin-bottom: 1.5rem;
        max-width: 100%;
    }

    #navigation .shop dd:nth-of-type(2) {
        margin-right: 1.0rem;
    }

    #navigation .shop dd:nth-of-type(n+2) {
        display: inline-block;
        width: 48.75%;
    }

    /* submenu */
    #navigation .submenu li:nth-of-type(n+2)::before {
        margin-right: 2.0rem;
        margin-left: 2.0rem;
    }

    /* SNSボタン */
    #navigation ul.sns,
    #contents.scrolled #navigation ul.sns {
        top: 11.0rem;
    }

    #navigation ul.sns li:nth-of-type(n+2) {
        margin-top: 2.0rem;
    }

    #navigation ul.sns a {
        width: 8.0rem;
        height: 8.0rem;
    }

    #navigation ul.sns i {
        font-size: 4.8rem;
    }

}

@media only screen and (min-width: 960px) {

    #navigation h2 {
        top: 1.0rem;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    #navigation h2 img {
        position: relative;
        left: -0.5rem;
        max-width: 54.0rem;
        max-height: inherit;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

}

@media only screen and (width: 960px) and (height: 600px) {

    /* SNSボタン */
    #navigation ul.sns a {
        width: 6.0rem;
        height: 6.0rem;
    }

    #navigation ul.sns,
    #contents.scrolled #navigation ul.sns {
        top: 9.0rem;
    }

    #navigation ul.sns li:nth-of-type(n+2) {
        margin-top: 1.75rem;
    }

    #navigation ul.sns i {
        font-size: 3.6rem;
    }

}

@media only screen and (min-width: 992px) {

    /* PRODUCTS */
    #navigation .menu {
        width: calc(100% - 16.0rem);
        margin: 20.0rem 2.0rem 2.0rem;
    }

    #navigation .menu dd:nth-of-type(even) {
        margin-left: 3.75rem;
    }

    #navigation .menu dd:nth-of-type(n+3) {
        margin-top: 2.5rem;
    }

    #navigation .menu a {
        width: 39.0rem;
        font-size: 3.6rem;
    }

    #navigation .menu a::before {
        width: 10.0rem;
        height: 10.0rem;
        margin-right: 2.0rem;
        background-size: 8.0rem 8.0rem;
    }

    /* ONLINE SHOP */
    #navigation .shop {
        width: calc(100% - 16.0rem);
        margin: 8.0rem 2.0rem 2.0rem;
    }

    #navigation .shop dd:nth-of-type(1) {
        font-size: 1.8rem;
    }

    #navigation .shop dd:nth-of-type(2) {
        margin-right: 5.0rem;
    }

    #navigation .shop dd:nth-of-type(n+2) {
        width: 46.65%;
    }

    /* SNSボタン */
    #navigation ul.sns,
    #contents.scrolled #navigation ul.sns {
        right: 3.0rem;
    }

    #navigation ul.sns a {
        padding-left: 0.1rem;
        border: 0.2rem solid rgba(165, 145, 125, 1.00);
    }

}

@media only screen and (min-width: 1200px) {

    #navigation dt {
        margin-bottom: 3.0rem;
        text-align: center;
    }

    /* PRODUCTS */
    #navigation .menu {
        width: 86.0rem;
        margin: 20.0rem auto 0;
    }

    #navigation .menu dd:nth-of-type(even) {
        margin-left: 7.5rem;
    }

    #navigation .menu a {
        border-radius: 5.0rem;
    }

    #navigation .menu a:hover::before {
        border-radius: 5.0rem;
        background-size: 10.5rem 10.5rem;
    }

    /* ONLINE SHOP */
    #navigation .shop {
        width: 86.0rem;
        margin: 8.0rem auto 0;
        text-align: center;
    }

    #navigation .shop dl {
        margin: 0 auto;
    }

    #navigation .shop dd {
        text-align: center;
    }

    /* submenu */
    #navigation .submenu li {
        font-size: 2.0rem;
    }

}

@media only screen and (min-width: 1400px) {

    #navigation .nav-scl {
        background-size: 24.0rem auto, 58.0rem auto, 58.0rem auto;
        background-position: left 2.5vw bottom 5.0vh, left top, right bottom;
    }

    #navigation ul.sns li:nth-of-type(n+2) {
        margin-top: 2.5rem;
    }

}

@media only screen and (min-width: 1920px) {

    /* PRODUCTS */
    #navigation .menu {
        width: 138.0rem;
    }

    #navigation .menu dd:nth-of-type(even) {
        margin-left: inherit;
    }

    #navigation .menu dd:nth-of-type(n+2) {
        margin-left: 10.0rem;
    }

    #navigation .menu dd:nth-of-type(4) {
        margin-left: inherit;
    }

    /* ONLINE SHOP */
    #navigation .shop {
        width: 138.0rem;
    }

    #navigation .shop dd:nth-of-type(n+2) {
        width: 30.0%;
    }

}

/*　トグル
----------------------------------------------------------- */
#toggle {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
    z-index: 200;
}

#toggle > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 6.0rem;
    height: 6.0rem;
}

/* ハンバーガーボタン（外枠） */
#toggle > div:first-of-type {
    border: 0.2rem solid rgba(166, 147, 124, 1.00);
    border-radius: 50%;
    -webkit-transition: border 0.3s ease-in-out;
    -o-transition: border 0.3s ease-in-out;
    transition: border 0.3s ease-in-out;
}

body.active #toggle > div:first-of-type {
    border: 0.2rem solid rgba(166, 147, 124, 0);
}

/* ハンバーガーボタン（内側の●） */
#toggle > div:first-of-type div {
    width: 5.0rem;
    height: 5.0rem;
    border-radius: 50%;
    background-color: rgba(166, 147, 124, 1.00);
    -webkit-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

body.active #toggle > div:first-of-type div {
    background-color: rgba(166, 147, 124, 0);
}

/* バー */
#toggle span {
    display: inline-block;
    position: absolute;
    left: 25.0%; /*（ボックスサイズ - 線の基本長）÷ 2 */
    width: 50.0%; /* 線の基本長 */
    height: 0.3rem; /* 線の幅 */
    border-radius: 2px;
    background-color: rgba(250, 240, 225, 1.00);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body.active #toggle span {
    background-color: rgba(166, 147, 124, 1.00);
}

/* １本目のバー */
#toggle span:nth-of-type(1) {
    top: 30.0%;
}

body.active #toggle span:nth-of-type(1) {
    top: 50.0%;
    left: 50.0%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ２本目のバー */
#toggle span:nth-of-type(2) {
    top: 50.0%;
    width: 35.0%;
    -webkit-transform: translateY(-50.0%);
    -ms-transform: translateY(-50.0%);
    transform: translateY(-50.0%);
}

body.active #toggle span:nth-of-type(2) {
    opacity: 0;
}

/* ３本目のバー */
#toggle span:nth-of-type(3) {
    bottom: 30.0%;
    width: 20.0%;
}

body.active #toggle span:nth-of-type(3) {
    bottom: 50.0%;
    left: 50.0%;
    width: 50.0%;
    -webkit-transform: translate(-50%, 50%) rotate(45deg);
    -ms-transform: translate(-50%, 50%) rotate(45deg);
    transform: translate(-50%, 50%) rotate(45deg);
}

/* ホームに戻るボタン */
body.home #toggle > div:last-of-type,
body.active #toggle > div:last-of-type {
    display: none;
}

#toggle > div:last-of-type {
    width: 5.0rem;
    height: 5.0rem;
    margin-top: 1.0rem;
    margin-left: 0.5rem;
}

#toggle > div:last-of-type a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 5.0rem;
    height: 5.0rem;
    border-radius: 50%;
    background-color: rgba(166, 147, 124, 1.00);
    color: rgba(250, 240, 225, 1.00);
    font-family: 'Rubik Dirt', cursive;
    font-size: min(3.6vw, 1.8rem);
    text-decoration: none;
    text-transform: uppercase;
}

#toggle > div:last-of-type a:hover {
    background-color: rgba(250, 240, 225, 1.00);
    color: rgba(166, 147, 124, 1.00);
}

@media only screen and (min-width: 375px) {

    /*　トグル
    ----------------------------------------------------------- */
    #toggle {
        top: 1.0rem;
    }

}

@media only screen and (min-width: 576px) {

    /* ハンバーガーボタン（外枠） */
    #toggle > div:first-of-type {
        width: 8.0rem;
        height: 8.0rem;
    }

    /* ハンバーガーボタン（内側の●） */
    #toggle > div:first-of-type div {
        width: 7.0rem;
        height: 7.0rem;
    }

    /* ホームに戻るボタン */
    #toggle > div:last-of-type {
        width: 7.0rem;
        height: 7.0rem;
    }

    #toggle > div:last-of-type a {
        width: 7.0rem;
        height: 7.0rem;
    }

}

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

    /* ハンバーガーボタン（外枠） */
    #toggle > div:first-of-type {
        width: 10.0rem;
        height: 10.0rem;
    }

    /* ハンバーガーボタン（内側の●） */
    #toggle > div:first-of-type div {
        width: 9.0rem;
        height: 9.0rem;
    }

    /* バー */
    #toggle span {
        height: 0.4rem;
    }

    /* ホームに戻るボタン */
    #toggle > div:last-of-type {
        width: 9.0rem;
        height: 9.0rem;
    }

    #toggle > div:last-of-type a {
        width: 9.0rem;
        height: 9.0rem;
    }

}

@media only screen and (width: 960px) and (height: 600px) {

    /* ハンバーガーボタン（外枠） */
    #toggle > div:first-of-type {
        width: 8.0rem;
        height: 8.0rem;
    }

    /* ハンバーガーボタン（内側の●） */
    #toggle > div:first-of-type div {
        width: 7.0rem;
        height: 7.0rem;
    }

    /* ホームに戻るボタン */
    #toggle > div:last-of-type {
        width: 7.0rem;
        height: 7.0rem;
    }

    #toggle > div:last-of-type a {
        width: 7.0rem;
        height: 7.0rem;
    }

}

@media only screen and (min-width: 992px) {

    /*　トグル
    ----------------------------------------------------------- */
    #toggle {
        right: 1.0rem;
    }

    body.scrolled #toggle {
        right: 1.0rem;
    }

    body.active #toggle {
        right: 2.0rem;
    }

    /* ホームに戻るボタン */
    #toggle > div:last-of-type {
        position: fixed;
        top: 0.5rem;
        left: calc(50% + 1.0rem);
    }

}

@media only screen and (width: 1024px) and (height: 768px) {

    /*　トグル
    ----------------------------------------------------------- */
    /* ホームに戻るボタン */
    #toggle > div:last-of-type {
        left: calc(50% + 0.5rem);
    }

}

@media only screen and (min-width: 1920px) {

    /*　トグル
    ----------------------------------------------------------- */
    /* ホームに戻るボタン */
    #toggle > div:last-of-type {
        position: static;
        top: inherit;
        left: inherit;
        margin-top: 2.0rem;
    }

    body.scrolled #toggle > div:last-of-type {
        left: inherit;
    }

}


/* ========================================================

　footer

=========================================================== */

footer {
    position: relative;
    height: 100vh;
    height: 100lvh;
    padding-top: 3.0rem;
    padding-bottom: 3.0rem;
    background-color: rgba(57, 16, 0, 1.00);
    background-position: center top 55%;
    background-size: 14.0rem auto;
    background-repeat: no-repeat;
    color: rgba(215, 195, 180, 1.00);
    z-index: 140;
}

footer a,
footer a:visited {
    color: rgba(250, 240, 225, 1.00);
    text-decoration: none;
}

footer a:hover {
    color: rgba(255, 255, 255, 1.00);
    -webkit-transform: translateY(-0.75rem);
    -ms-transform: translateY(-0.75rem);
    transform: translateY(-0.75rem);
}

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

/* タイトル */
footer dt {
    margin-bottom: 1.0rem;
    font-family: 'Rubik Dirt', cursive;
    font-size: min(6.25vw, 3.6rem);
    text-transform: uppercase;
}

/* リスト */
footer dd {
    font-size: min(5.0vw, 2.4rem);
    text-align: justify;
    line-height: 120%;
}

footer dd:nth-of-type(n+2) {
    margin-top: 0.75rem;
}

/* ONLINE SHOP */
footer .shop dd {
    margin-top: 2.0rem;
    margin-left: 0.5rem;
}

footer .shop img {
    width: auto;
    max-width: 100%;
    max-height: 3.6rem;
    opacity: 0.7;
}

footer .shop a:hover img {
    opacity: 1.0;
}

footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer li {
    display: inline-block;
}

/* SNSボタン */
footer .row > div:nth-last-of-type(2) {
    position: absolute;
    bottom: 40.0vw;
}

footer .sns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

footer .sns li:nth-of-type(n+2) {
    margin-top: 0;
    margin-left: 0.75rem;
}

footer .sns a {
    display: -ms-inline-grid;
    display: inline-grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    border: 0.1rem solid rgba(165, 145, 125, 1.00);
    border-radius: 50%;
}

footer .sns a:hover {
    border: 0.1rem solid rgba(255, 255, 255, 1.00);
}

footer .sns i {
    color: rgba(165, 145, 125, 1.00);
    font-size: 2.4rem;
    -webkit-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

footer .sns a:hover i {
    color: rgba(255, 255, 255, 1.00);
}

/* submenu */
footer .row > div:last-of-type {
    position: absolute;
    bottom: 18.0vw;
}

footer .submenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 29.5rem;
    margin: 0 auto;
}

footer .submenu li {
    display: inline-block;
    margin-top: 0;
    line-height: 100%;
}

footer .submenu li:nth-of-type(even)::before {
    position: relative;
    top: 0.2rem;
    margin-right: 0.75rem;
    margin-left: 0.75rem;
    font-family: 'Bootstrap-icons';
    content: "\f657";
}

/* copyright */
footer aside {
    position: absolute;
    bottom: 1.0rem;
    width: 100%;
    color: rgba(250, 240, 225, 1.00);
    text-align: center;
}

footer aside img {
    -webkit-transform: translateY(-0.2rem);
    -ms-transform: translateY(-0.2rem);
    transform: translateY(-0.2rem);
    width: 14.0rem;
    height: auto;
    margin-right: 2.0rem;
}

@media only screen and (min-width: 576px) {

    footer {
        padding-top: 5.0rem;
        padding-bottom: 5.0rem;
        background-size: 24.0rem auto;
    }

    /* ONLINE SHOP */
    footer .shop img {
        max-width: 20.0rem;
    }

    /* SNSボタン */
    footer .row > div:nth-last-of-type(2) {
        bottom: 16.0rem;
    }

    footer .sns li:nth-of-type(n+2) {
        margin-left: 1.5rem;
    }

    footer .sns a {
        width: 6.0rem;
        height: 6.0rem;
    }

    footer .sns i {
        font-size: 3.6rem;
    }

    /* submenu */
    footer .row > div:last-of-type {
        bottom: 8.0rem;
    }

    footer .submenu {
        width: 100%;
    }

    footer .submenu li:nth-of-type(even)::before {
        content: none;
    }

    footer .submenu li:nth-of-type(n+2)::before {
        position: relative;
        top: -0.1rem;
        margin-right: 1.0rem;
        margin-left: 1.0rem;
        font-family: 'Bootstrap-icons';
        font-size: 1.0rem;
        content: "\f287";
    }

}

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

    footer {
        padding-top: 10.0rem;
        padding-bottom: 10.0rem;
        background-size: auto 30.0rem;
    }

    /* SNSボタン */
    footer .sns li:nth-of-type(n+2) {
        margin-left: 2.0rem;
    }

    footer ul.sns a {
        width: 8.0rem;
        height: 8.0rem;
    }

    footer ul.sns i {
        font-size: 4.8rem;
    }

}

@media only screen and (min-width: 992px) {

    footer {
        padding-top: 5.0rem;
        background-position: center top 50%;
        background-size: auto 24.0rem;
    }

    /* SNSボタン */
    footer .sns li:nth-of-type(n+2) {
        margin-left: 2.0rem;
    }

    footer ul.sns a {
        width: 8.0rem;
        height: 8.0rem;
    }

    footer ul.sns i {
        font-size: 4.8rem;
    }

    /* submenu */
    footer .submenu {
        font-size: 1.8rem;
    }

}

@media only screen and (min-width: 1200px) {

    footer {
        background-position: center top 45%;
    }

    footer dl {
        width: 99.0rem;
        margin: 0 auto;
    }

    footer dl > * {
        display: inline-block;
    }

    /* タイトル */
    footer dt {
        width: 17.0rem;
        margin-right: 5.0rem;
        font-size: 2.4rem;
        text-align: right;
    }

    /* リスト */
    footer dd {
        font-size: 1.8rem;
    }

    /* PRODUCTS */
    footer .menu dd:nth-of-type(n+2)::before {
        position: relative;
        top: 0.2rem;
        margin-right: 1.0rem;
        margin-left: 1.0rem;
        font-family: 'Bootstrap-icons';
        content: "\f657";
    }

    /* ONLINE SHOP */
    footer .shop {
        margin-top: 3.0rem;
    }

    footer .shop dd:nth-of-type(n+2) {
        margin-left: 5.0rem;
    }

    footer .shop img {
        max-width: 30.0rem;
    }

    /* SNSボタン */
    footer .row > div:nth-last-of-type(2) {
        bottom: 18.0rem;
    }

    footer .sns li:nth-of-type(n+2) {
        margin-left: 2.0rem;
    }

    footer .sns li:nth-of-type(n+2) {
        margin-left: 3.0rem;
    }

    /* submenu */
    footer .row > div:last-of-type {
        bottom: 12.0rem;
    }

    /* copyright */
    footer aside {
        bottom: 5.0rem;
    }

}

@media only screen and (min-width: 1920px) {

    footer {
        background-size: auto 30.0rem;
        background-position: center;
    }

    footer dl {
        width: 130.0rem;
    }

    /* タイトル */
    footer dt {
        width: 25.5rem;
        font-size: 3.6rem;
    }

    /* リスト */
    footer dd {
        font-size: 2.4rem;
    }

    /* PRODUCTS */
    footer .menu dd:nth-of-type(n+2)::before {
        top: 0.3rem;
    }

}


/* ========================================================

　other

=========================================================== */

/*　#copyright
----------------------------------------------------------- */
#copyright {
    padding: 1.0rem;
    background-color: rgba(255, 0, 0, 1.00);
}

#copyright p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 1.00);
    font-size: 87.5%;
    line-height: 130%;
    text-align: justify;
}

@media only screen and (min-width: 992px) {

    #copyright p {
        text-align: center;
    }

    #copyright p span {
        display: block;
    }

}

/*　#scroll-to-top
----------------------------------------------------------- */
#scroll-to-top {
    display: none;
    position: fixed;
    right: 1.0rem;
    bottom: 1.0rem;
    z-index: 140;
}

#scroll-to-top a,
#scroll-to-top a:visited {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 5.0rem;
    height: 5.0rem;
    border-radius: 50%;
    background: rgba(250, 240, 225, 0.50);
    font-size: 3.0rem;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#scroll-to-top a:hover,
#scroll-to-top a:focus {
    background: rgba(250, 240, 225, 1.00);
    opacity: 1.0;
}

#scroll-to-top i {
    color: rgba(210, 175, 165, 1.00);
}

@media only screen and (min-width: 576px) {

    #scroll-to-top a,
    #scroll-to-top a:visited {
        width: 7.0rem;
        height: 7.0rem;
        font-size: 4.2rem;
    }

}

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

    #scroll-to-top a,
    #scroll-to-top a:visited {
        width: 9.0rem;
        height: 9.0rem;
        font-size: 4.8rem;
    }

}

@media only screen and (width: 960px) and (height: 600px) {

    #scroll-to-top a,
    #scroll-to-top a:visited {
        width: 7.0rem;
        height: 7.0rem;
        font-size: 4.2rem;
    }

}

@media only screen and (min-width: 992px) {

    #scroll-to-top {
        right: 1.5rem;
    }

}

/*　selection color
----------------------------------------------------------- */
*::-moz-selection {
    background-color: rgba(250, 240, 225, 1.00);
    color: rgba(57, 16, 0, 1.00);
}

*::selection {
    background-color: rgba(250, 240, 225, 1.00);
    color: rgba(57, 16, 0, 1.00);
}

/*　Placeholder color
----------------------------------------------------------- */
*::-webkit-input-placeholder {
    opacity: 0.8;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

*::-moz-placeholder {
    opacity: 0.8;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

*::-ms-input-placeholder {
    opacity: 0.8;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

*:-ms-input-placeholder {
    opacity: 0.8;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

*::placeholder {
    opacity: 0.8;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/*　Pseudo-hide placeholders when in focus
----------------------------------------------------------- */
*:focus::-webkit-input-placeholder {
    color: transparent;
}

*:focus::-moz-placeholder {
    color: transparent;
}

*:focus::-ms-input-placeholder {
    color: transparent;
}

*:focus:-ms-input-placeholder {
    color: transparent;
}

*:focus::placeholder {
    color: transparent;
}


/* ========================================================

　animation set

=========================================================== */

@-webkit-keyframes zoomin {

    0% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

    100% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
    }

}

@keyframes zoomin {

    0% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

    100% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
    }

}

@-webkit-keyframes zoomout {

    0% {
        opacity: 0;
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
    }

    100% {
        opacity: 1.0;
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

}

@keyframes zoomout {

    0% {
        opacity: 0;
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
    }

    100% {
        opacity: 1.0;
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

}

@-webkit-keyframes fadein {

    0% {
        opacity: 0;

    }

    100% {
        opacity: 1.0;
    }

}

@keyframes fadein {

    0% {

        opacity: 0;
    }

    100% {
        opacity: 1.0;
    }

}

@-webkit-keyframes fadeout {

    0% {
        opacity: 1.0;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }

}

@keyframes fadeout {

    0% {
        opacity: 1.0;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }

}

@-webkit-keyframes bounce {

    0% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

    30% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 1.0;
    }

}

@keyframes bounce {

    0% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

    30% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 1.0;
    }

}

@-webkit-keyframes expansion {

    0% {
        -webkit-transform: scale(0.25);
        transform: scale(0.25);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 1.0;
    }

}

@keyframes expansion {

    0% {
        -webkit-transform: scale(0.25);
        transform: scale(0.25);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 1.0;
    }

}

@-webkit-keyframes ripples {

    0% {
        -webkit-transform: translate(-50%, -50%) scale(1.0, 1.0);
        transform: translate(-50%, -50%) scale(1.0, 1.0);
        background-color: rgba(232, 56, 40, 0.30);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(5.0, 5.0);
        transform: translate(-50%, -50%) scale(5.0, 5.0);
        background-color: rgba(232, 56, 40, 0.00);
    }

}

@keyframes ripples {

    0% {
        -webkit-transform: translate(-50%, -50%) scale(1.0, 1.0);
        transform: translate(-50%, -50%) scale(1.0, 1.0);
        background-color: rgba(232, 56, 40, 0.30);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(5.0, 5.0);
        transform: translate(-50%, -50%) scale(5.0, 5.0);
        background-color: rgba(232, 56, 40, 0.00);
    }

}


/* break point --------------------------------------------
	<576px(None), >=576px(540px) , =>768px(720px) , =>992px(960px) , =>1200px(1140px) , =>1400px(1320px)
	iPhone5 320x568
	iPhone6-8 375x667 *
	iPhone6-8Plus 414x736
	iPhoneX 375x812
	iPad（iPad Mini）768x1024 *
	iPadPro 1024x1366
	Pixel2 411x731
	Pixel2 XL 411x823
	PC lg 992 *
	PC xl 1200 *
	PC xxl 1400 *
----------------------------------------------------------- */

/* branc --------------------------------------------------
	1-0.25rem
	2-0.5rem
	3-1.0rem
	4-1.5rem
	5-3.0rem
----------------------------------------------------------- */

/* Zen Maru Gothic ----------------------------------------
	Light 300
	Regular 400
	Medium 500
	Bold 700
    Black 900
----------------------------------------------------------- */

/* Zen Old Mincho -----------------------------------------
	Regular 400
	Medium 500
	SemiBold 600
	Bold 700
    Black 900
----------------------------------------------------------- */

/* Montserrat ---------------------------------------------
	Light 300
	Regular 400
	Medium 500
	SemiBold 600
	Bold 700
	ExtraBold 800
    Black 900
----------------------------------------------------------- */

/* Fredericka the Great -----------------------------------
	Regular 400
----------------------------------------------------------- */

/* Rubik Dirt ---------------------------------------------
	Regular 400
----------------------------------------------------------- */


/* ---- End of file --------------------------------------- */