@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Marcellus&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* # root1 START # */
:root {
    --color01: #dd7994;
    --color02: #c4b7ba;
    --color03: #99dfdc;
    --color04: #87caea;
    --color05: #3b3b3b;
    --color06: #fff;
}
/* # root1 END # */

/* # root2 START # */
/* :root {
    --color01: #b68b63;
    --color02: #c4b7ba;
    --color03: #faa2c0;
    --color04: #fbd1df;
    --color05: #3b3b3b;
    --color06: #fff;
} */
/* # root2 END # */

/* # root3 START # */
/* :root {
    --color01: #186998;
    --color02: #96a8b2;
    --color03: #7ed088;
    --color04: #b8e1b5;
    --color05: #3b3b3b;
    --color06: #fff;
} */
/* # root3 END # */

/* ##### フォント font ##### */
.marcellus {
    font-family: "Marcellus", serif;
}

.roboto {
    font-family: "Roboto", sans-serif;
}

/* base.css上書き */
html {
    color: #5f3003;
    letter-spacing: 0.1em;
    background-color: white;
}

@media (max-width: 599px) {
  html{
    letter-spacing: 0;
  }
}

.map::after {
    padding-top: 80%;
}

/* ##### 共通使用 common ##### */
.content-wrap {
    padding-right: 100px;
}

.content-wrap,
.logo-header {
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.active .content-wrap,
.active .logo-header,
.active .h1 {
    -webkit-filter: blur(6px);
    filter: blur(6px);
    -webkit-transform: translate(calc(-40vw + 100px), 0);
    transform: translate(calc(-40vw + 100px), 0);
}

.h1 {
    width: calc(100% - 130px);
    margin-bottom: 10px;
    font-size: 12px;
    text-shadow: 1px 1px 2px rgb(255 255 255 / 80%);
    -webkit-transition: -webkit-transform 0.3s linear;
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: transform 0.3s linear, -webkit-transform 0.3s linear;
    pointer-events: auto;
}

.header-wrapper {
    display: inline-block;
    pointer-events: auto;
}

@media (max-width: 1024px) {
    .h1 {
        width: calc(100% - 110px);
    }
}

@media (max-width: 599px) {
    .h1 {
        width: calc(100% - 15px);
        display: none;
    }
}

.logo {
    width: 100%;
    max-width: 100px;
}

.logo a {
    display: block;
}

.logo a img {
    width: 100%;
}

/* footer .logo a img {
    filter: invert(1);
} */

.white-all * {
    color: white;
}

.fead-cover {
    position: relative;
}

.fead-cover::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--color02);
    -webkit-transition: 0.5s linear;
    transition: 0.5s linear;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.fead-cover.mv::before {
    width: 0;
}

.popup {
    display: none;
}

.popup-title {
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 22px;
    color: #5f3003;
    text-align: center;
}

.popup-list {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.modaal-container {
    border-radius: 15px;
}

.modaal-content {
    height: 100%;
}

.modaal-content-container {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.delay-1,
.delay-1::before {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.delay-2,
.delay-2::before {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.delay-3,
.delay-3::before {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.delay-4,
.delay-4::before {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
}

.delay-5,
.delay-5::before {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

.delay-6,
.delay-6::before {
    -webkit-transition-delay: 1.8s;
    transition-delay: 1.8s;
}

.delay-7,
.delay-7::before {
    -webkit-transition-delay: 2.1s;
    transition-delay: 2.1s;
}

.delay-8,
.delay-8::before {
    -webkit-transition-delay: 2.4s;
    transition-delay: 2.4s;
}

@media (max-width: 1024px) {
    .content-wrap {
        padding-right: 80px;
    }

    .active .content-wrap,
    .active .logo-header {
        -webkit-transform: translate(calc(-65vw + 80px), 0);
        transform: translate(calc(-65vw + 80px), 0);
    }

    .logo {
        max-width: 15vw;
    }
    
    .logo.logo-header{
      max-width: 70px;
    }
}

@media (max-width: 599px) {
  .h-scrolled .logo.logo-header{
    display: none;
  }
    .content-wrap {
        padding-right: 0;
    }

    .active .content-wrap,
    .active .logo-header {
        -webkit-filter: blur(0);
        filter: blur(0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .logo {
        max-width: 150px;
    }
}

/* ##### パーツ parts ##### */
.box-app {
    width: 320px;
    max-width: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    -ms-flex-align: end;
    padding: 2em;
    font-size: 14px;
    border-radius: 4em 0 4em 0;
    background-color: #f7ebe5;
    -webkit-box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.7);
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.7);
}

.box-app-content {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.box-app-img {
    width: 35%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: -4em;
    margin-right: calc(-2em - 1px);
}

.box-time {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: calc((100vw - 100px) / 2);
    max-width: 90%;
    margin-top: -5vh;
    margin-left: auto;
    padding: 50px;
    background-color: var(--color02);
    position: relative;
    z-index: 1;
}

.box-time-inner {
    position: relative;
    z-index: 1;
}

.box-float-01 {
    display: block;
}

.box-float-01::before,
.box-float-01:after {
    content: "";
    display: block;
    clear: both;
}

.box-float-01-img-01 {
    width: 38%;
    float: left;
    margin: 1%;
}

.box-float-01-img-02 {
    width: 46%;
    float: left;
    margin: 5% 1% 1% 5%;
}

.box-float-01-content {
    width: 58%;
    float: right;
    margin: 5% 1% 1%;
}

.box-deco-link {
    padding: 30px;
}

.box-deco-link a {
    display: block;
    padding-top: 50px;
    padding-left: 50px;
    position: relative;
}

.box-deco-link-title {
    padding: 0.5em;
    font-family: "Marcellus", serif;
    font-size: 4.5vw;
    line-height: 1;
    letter-spacing: 0.1em;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.box-deco-link-title-inner {
    position: relative;
}

.box-deco-link-title-inner::after {
    content: "";
    width: 13vw;
    height: 13vw;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: -25px;
    left: 50px;
    z-index: -1;
}

.box-deco-link-img {
    width: 85%;
    margin-left: auto;
    position: relative;
}

.box-deco-link-img::before {
    content: "";
    width: 90%;
    height: 90%;
    margin: auto;
    border: 1px solid white;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 1;
}

.box-deco-link-img::after {
    content: "";
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #5f3003;
    border-right: 1px solid #5f3003;
    position: absolute;
    top: 10px;
    left: 10px;
}

.box-deco-link-img .img::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
}

.box-deco-link-text {
    width: 80%;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 14px;
    color: white;
    position: absolute;
    bottom: 10%;
    left: 10%;
    z-index: 1;
}

.box-deco-link-text::after {
    content: "";
    width: 35%;
    height: 1em;
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    -webkit-transform: skew(45deg);
    transform: skew(45deg);
}

.pickup-01 {
    padding: 0 200px;
}

.box-pickup {
    min-height: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    padding: 60px 0;
    border-top: 1px solid rgb(255 255 255 / 40%);
    position: relative;
}

.box-pickup+.box-pickup {
    border-bottom: 1px solid rgb(255 255 255 / 40%);
}

.box-pickup-img {
    width: 25%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    z-index: 0;
}

.box-pickup:nth-of-type(odd) .box-pickup-img {
    left: -190px;
}

.box-pickup:nth-of-type(even) .box-pickup-img {
    right: -100px;
}

.box-pickup-txtbox {
    width: calc(100% - 220px);
    margin: 0 auto;
}

.box-pickup-title {
    margin-bottom: 40px;
    font-family: "Marcellus", serif;
    font-size: 4.5vw;
    color: white;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
}

.box-pickup-title .sub {
    display: block;
    margin-top: 10px;
    font-size: 12px;
}

.box-pickup-text {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 14px;
    color: white;
    text-align: center;
}

.box-pickup-text.ori{
  text-align: left;
}

@media (max-width: 1024px) {
    .pickup-01 {
        padding: 0 50px;
    }

    .box-pickup-txtbox {
        width: calc(100% - 150px);
        padding-left: 50px;
    }

    .box-pickup:nth-of-type(odd) .box-pickup-img {
        left: -50px;
    }

    .box-pickup:nth-of-type(even) .box-pickup-img {
        right: -50px;
    }
}

@media (max-width: 599px) {
    .pickup-01 {
        padding: 0 10px;
    }

    .box-pickup {
        padding: 20px 0;
    }

    .box-pickup-img {
        width: 60%;
        margin: 0 auto;
        -webkit-transform: inherit;
        transform: inherit;
        position: static;
    }

    .box-pickup-txtbox {
        width: 100%;
        margin-top: 20px;
        padding-left: 0;
    }

    .box-pickup-title {
        margin-bottom: 20px;
        font-size: 10vw;
    }
}

.box-products-01 {
    position: relative;
}

.box-products-01-img {
    width: 47%;
}

.box-products-01-content {
    width: 47%;
}

.box-products-01-content .text {
    margin-top: 50px;
}

.box-products-01-content-img .pic {
    width: calc(50% - 5px);
}

@media (max-width: 1024px) {
    .box-products-01-img {
        width: 69%;
    }

    .box-products-01-img .img:after {
        padding-top: 500px;
    }

    .box-products-01-content {
        width: 100%;
    }

    .box-products-01-content .text {
        margin-top: 40px;
    }

    .box-products-01-content-img {
        width: 30%;
        position: absolute;
        bottom: 100%;
        right: 0;
    }

    .box-products-01-content-img .pic {
        width: 100%;
    }

    .box-products-01-content-img .img:after {
        padding-top: 250px;
    }
}

@media (max-width: 599px) {
    .box-products-01-img .img:after {
        padding-top: 350px;
    }

    .box-products-01-content-img .img:after {
        padding-top: 175px;
    }
}

.list-products-img .img {
    height: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px;
    background: #fff;
}

.list-products-img .img img {
    width: auto;
    max-width: 100%;
    height: initial !important;
    max-height: 100%;
}

.list-products-txtbox {
    margin-top: 10px;
}

.list-products-tit {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}

.list-products-cate {
    text-align: center;
}

.list-products-amount {
    display: inline-block;
    font-size: 14px;
}

.list-products-yen {
    display: inline-block;
    font-size: 14px;
}

.list-products-yen:before {
    content: "/";
    display: inline-block;
    margin: 0 5px;
}

@media (max-width: 599px) {
    .list-products-tit {
        font-size: 16px;
    }
}

.box-menu {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.box-menu-item {
    padding: 100px 50px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
}

.ori .box-menu-item {
    padding: 0px;
}

.box-menu-item:nth-of-type(even) {
    background-color: #f5f1ee;
}

.box-menu-element {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box-menu-img {
    width: 100%;
    margin-bottom: 10px;
}

.ori .box-menu-img {
    width: 30%;
}

.box-menu-list {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0em;
}

.ori .box-menu-list {
    width: 65%;
    flex-grow: 0;
}

.box-menu-note {
    padding: 1em;
    border: 1px solid #dcdcdc;
    border-radius: 15px;
    background-color: white;
}

.box-white {
    padding: 50px;
    background-color: white;
}

.box-basic {
    padding: 30px;
    color: white;
    background-color: #5f3003;
}

.box-01 {
    padding: 30px;
    color: white;
    background-color: var(--color01);
}

.box-02 {
    padding: 30px;
    background-color: #f7f3ec;
}

.box-03 {
    padding: 30px;
    background-color: #f7ebe5;
}

.box-04 {
    padding: 30px;
    background-color: var(--color02);
}

.box-05 {
    padding: 30px;
    background-color: #f5f1ee;
}

.card.-white {
    background-color: white;
}

.card-img.-include-num {
    padding-bottom: 3vw;
    position: relative;
}

.card-img.-include-num .num {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 6vw;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    line-height: 1;
    position: absolute;
    bottom: -1vw;
    right: -1vw;
    z-index: 1;
}

.card .title-02{
  letter-spacing: 0;
}

.card-img.-include-text {
    position: relative;
}

.card-img.-include-text .card-text {
    padding: 1.5vw;
    font-family: Marcellus, serif;
        font-size: 28px;
    color: rgba(255, 255, 255, 0.8);
    position: absolute !important;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.card-img.-dark .img::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(128, 128, 128, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.card.-pattern-01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
}

.card.-pattern-01 .card-img {
    width: 30%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.card.-pattern-01 .card-img.-include-num {
    padding-top: 3vw;
    padding-bottom: 0;
}

.card.-pattern-01 .card-img.-include-num .num {
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.15);
    top: 0;
    bottom: auto;
    left: 0;
    right: auto;
}

.card.-pattern-01 .card-content {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 5%;
}

.card.-pattern-01 .card-content [class*=title] {
    font-size: 30px;
}

.card.-flip .flip-inner {
    width: 100%;
    height: 100%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: relative;

    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.card.-flip figcaption {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px;
    border: 2px solid #5f3003;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card.-flip .caption-img {
    width: 100.1%;
    z-index: 2;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card.-flip figure:hover .flip-inner,
.card.-flip figure:hover figcaption {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.caption-title {
    margin-top: 1em;
    font-weight: bold;
    font-size: 14px;
}

.caption-tag span {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 12px;
    color: white;
    line-height: 1.2;
    border-radius: 3px;
    background-color: #5f3003;
}

.caption-tag span+span {
    margin-left: 0.5em;
}

.bgc-01 {
    background-color: var(--color01);
}

.bgc-02 {
    background-color: #f7f3ec;
}

.bgc-03 {
    background-color: #f7ebe5;
}

.bgc-04 {
    background-color: var(--color02);
}

.bgc-05 {
    background-color: #f5f1ee;
}

.bgc-bottom {
    position: relative;
}

.bgc-bottom::after {
    content: "";
    width: 100%;
    height: 60%;
    display: block;
    background-color: var(--color02);
    position: absolute;
    bottom: 0;
    left: 0;
}

.bgc-left {
    position: relative;
}

.bgc-left::after {
    content: "";
    width: 85%;
    height: 100%;
    display: block;
    background-color: #f5f1ee;
    position: absolute;
    top: 0;
    left: 0;
}

.bgc-left.-max {
    background-color: #f5f1ee;
}

.bgc-left.-protruding-top {
    margin-top: -200px;
    padding-top: 150px;
}

.bgc-right {
    position: relative;
}

.bgc-right::after {
    content: "";
    width: 85%;
    height: 100%;
    display: block;
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: 0;
}

.bgc-diagonal.-right-to-left {
    position: relative;
}

.bgc-diagonal.-right-to-left::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: -webkit-gradient(linear, right bottom, left top, color-stop(50%, #f5f1ee), color-stop(50%, transparent));
    background: linear-gradient(to top left, #f5f1ee 50%, transparent 50%);
    position: absolute;
    top: 0;
    right: 0;
}

.bgc-diagonal.-left-to-right {
    position: relative;
}

.bgc-diagonal.-left-to-right::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, #f5f1ee), color-stop(50%, transparent));
    background: linear-gradient(to top right, #f5f1ee 50%, transparent 50%);
    position: absolute;
    top: 0;
    right: 0;
}

.bgc-white {
    background-color: white;
}

.bgc-white-transparent {
    background-color: rgba(255, 255, 255, 0.5);
}

[class*=bgc-]>* {
    position: relative;
    z-index: 1;
}

.slider-item {
    margin: 0 1px;
}

.slick-dots {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 30px;
}

.slick-dots li {
    margin: 0 0.8em;
}

.slick-dots li button {
    width: 20px;
    height: 20px;
    text-indent: -999rem;
    border: none;
    border-radius: 100%;
    background-color: #f7ebe5;
}

.slick-dots li.slick-active button {
    background-color: #5f3003;
}

.sign {
    margin-top: 1em;
    font-size: 120%;
    text-align: right;
}

.layout.-pattern-01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    -ms-flex-align: end;
}

.layout.-pattern-01 .item-img {
    width: 50vw;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.layout.-pattern-01.staff .item-img {
    width: 40%;
}

.layout.-pattern-01 .item-content {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-bottom: 2%;
    margin-left: -15%;
    padding: 50px;
    padding: 50px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

.is-bggray .layout.-pattern-01 .item-content {
    background-color: rgba(96,96,96,50%);
}

.layout.-pattern-02 .card-img {
    width: 90%;
}

.layout.-pattern-02 .card-content {
    width: 80%;
    margin-top: -1em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

.img-wrap {
    position: relative;
}

.img-wrap.-pattern-01 .img {
    overflow: hidden;
    border-radius: 0 80px 80px 0;
}

.img-wrap.-pattern-01 [class*=title] {
    max-width: 70%;
    margin: auto;
    position: absolute;
    top: 5%;
    left: 5%;
    z-index: 1;
}

.img-shadow {
    -webkit-box-shadow: 10px 10px 0px 0px rgba(206, 206, 206, 0.8);
    box-shadow: 10px 10px 0px 0px rgba(206, 206, 206, 0.8);
}

.text-catch {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 22px;
    line-height: 2;
    text-align: center;
}

.newmo {
    overflow: hidden;
    padding: 2em 4em;
    border-radius: 50px;
    background-color: white;
    -webkit-box-shadow: 20px 20px 60px var(--color02), -20px -20px 60px white;
    box-shadow: 20px 20px 60px var(--color02), -20px -20px 60px white;
}

.asterisk {
    padding-left: 1.2em;
    position: relative;
}

.asterisk::before {
    content: "※";
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
}

.link {
    display: inline-block;
    text-decoration: underline;
    position: relative;
}

/* .link::after {
    content: "\f0c1";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: inherit;
    line-height: 1;
    position: absolute;
    bottom: 0;
    right: 0;
} */

.stronger {
    font-weight: bold;
}

.marker {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #ff6));
    background: linear-gradient(transparent 60%, #ff6 60%);
}

@media (max-width: 1024px) {
    .box-app {
        width: 280px;
    }

    .box-time {
        padding: 35px;
    }

    .box-deco-link {
        padding: 20px;
    }

    .box-deco-link a {
        padding-top: 40px;
        padding-left: 40px;
    }

    .box-deco-link-text {
        font-size: 12px;
    }

    .box-menu {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .box-menu-item {
        padding: 80px 40px;
    }

    .box-menu-list {
        padding: 1.5em;
    }

    .box-white {
        padding: 40px;
    }

    .card.-pattern-01 .card-content [class*=title] {
        font-size: 24px;
    }

    .card.-flip figure .flip-inner,
    .card.-flip figure figcaption {
        -webkit-transition: none;
        transition: none;
        -webkit-transform: rotateY(0deg) !important;
        transform: rotateY(0deg) !important;
    }

    .card.-flip .caption-img {
        width: 100%;

        -webkit-backface-visibility: inherit;
        backface-visibility: inherit;
    }

    .card.-flip .caption-title {
        font-size: 12px;
        color: white;
    }

    .card.-flip figcaption {
        height: auto;
        max-height: 50%;
        border: none;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(35, 57, 81, 0)), color-stop(75%, rgba(9, 14, 20, 0.9)), to(rgba(0, 0, 0, 0.9)));
        background: linear-gradient(to bottom, rgba(35, 57, 81, 0) 0%, rgba(9, 14, 20, 0.9) 75%, rgba(0, 0, 0, 0.9) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startフットケア 爪のお悩みstr="#00233951", endフットケア 爪のお悩みstr="#e6000000", GradientType=0);
        position: absolute;
        top: auto;
        bottom: 0;
        z-index: 2;

        -webkit-backface-visibility: inherit;
        backface-visibility: inherit;
        padding: 5px;
    }

    .bgc-left.-protruding-top {
        margin-top: -160px;
        padding-top: 120px;
    }

    .slick-dots li {
        margin: 0 0.6em;
    }

    .slick-dots li button {
        width: 16px;
        height: 16px;
    }

    .layout.-pattern-01 {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .layout.-pattern-01 .item-img {
        width: 90%;
    }

    .img-wrap.-pattern-01 [class*=title] {
        max-width: 90%;
        max-height: 45%;
    }

    .layout.-pattern-01 .item-content {
        margin-top: -25%;
        margin-left: 5%;
        margin-right: 5%;
        padding: 40px;
        border-radius: 24px;
    }

    .layout.-pattern-01.staff .item-content {
        margin-top: 0;
        margin-left: -15%;
        margin-right: 0;
        padding: 30px;
        border-radius: 24px;
    }
    .layout.-pattern-01.staff .item-img {
        width: 50%;
    }

    .text-catch {
        font-size: 18px;
        text-align: left;
    }

    .newmo {
        padding: 1.5em 3em;
        border-radius: 40px;
    }
}

@media (max-width: 599px) {
    .layout.-pattern-01.staff .item-img {
        width: 90%;
    }
    .layout.-pattern-01.staff .item-content {
        margin-top: -25%;
        margin-left: 5%;
        margin-right: 5%;
        padding: 15px;
    }
    .box-menu-element {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .box-float-01-img-01 {
        width: 80%;
        float: none;
        margin: 0 0 0 20px;
    }

    .box-float-01-img-02 {
        width: 80%;
        float: none;
        margin: 0 0 0 auto;
    }

    .box-float-01-content {
        width: 90%;
        float: none;
        margin: -20px 0;
        position: relative;
        z-index: 1;
    }

    .box-deco-link-title {
        font-size: 10vw;
    }

    .box-deco-link-title-inner::after {
        width: 35vw;
        height: 35vw;
    }

    .box-menu-item{
        padding: 50px 10px;
    }

    .box-menu-list {
        width: 100%;
        padding: 0em;
    }

    .box-menu-img {
        width: 90%;
    }

    .box-white {
        padding-left: 30px;
        padding-right: 30px;
    }

    .card-img.-include-num .num {
        font-size: 20vw;
    }

    .card-img.-include-text .card-text {
           font-size: 16px;
    }

    .card.-pattern-01 {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .card.-pattern-01 .card-img {
        width: 85%;
    }

    .card.-pattern-01 .card-content {
        width: 90%;
        margin-top: -10%;
        padding: 1em;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.7);
        z-index: 1;
    }

    .card.-pattern-01 .card-content [class*=title] {
        font-size: 18px;
    }

    .bgc-bottom.-full\@sp::after {
        height: 100%;
    }

    .bgc-left.-protruding-top {
        margin-top: -120px;
        padding-top: 90px;
    }

    .layout.-pattern-01 .item-content {
        width: 80%;
    }

    .layout.-pattern-02 .card-img {
        width: 80%;
    }

    .text-catch {
        font-size: 15px;
    }

    .newmo {
        border-radius: 30px;
    }
}

.shake {
    -webkit-animation-name: shaking;
    animation-name: shaking;
    -webkit-animation-duration: 0.1s;
    animation-duration: 0.1s;
    -webkit-animation-iteration-count: 6;
    animation-iteration-count: 6;
}

@-webkit-keyframes shaking {
    0% {
        -webkit-transform: translate(0px, 0px) rotateZ(0deg);
        transform: translate(0px, 0px) rotateZ(0deg);
    }

    25% {
        -webkit-transform: translate(2px, 2px) rotateZ(1deg);
        transform: translate(2px, 2px) rotateZ(1deg);
    }

    50% {
        -webkit-transform: translate(0px, 2px) rotateZ(0deg);
        transform: translate(0px, 2px) rotateZ(0deg);
    }

    75% {
        -webkit-transform: translate(2px, 0px) rotateZ(-1deg);
        transform: translate(2px, 0px) rotateZ(-1deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotateZ(0deg);
        transform: translate(0px, 0px) rotateZ(0deg);
    }
}

@keyframes shaking {
    0% {
        -webkit-transform: translate(0px, 0px) rotateZ(0deg);
        transform: translate(0px, 0px) rotateZ(0deg);
    }

    25% {
        -webkit-transform: translate(2px, 2px) rotateZ(1deg);
        transform: translate(2px, 2px) rotateZ(1deg);
    }

    50% {
        -webkit-transform: translate(0px, 2px) rotateZ(0deg);
        transform: translate(0px, 2px) rotateZ(0deg);
    }

    75% {
        -webkit-transform: translate(2px, 0px) rotateZ(-1deg);
        transform: translate(2px, 0px) rotateZ(-1deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotateZ(0deg);
        transform: translate(0px, 0px) rotateZ(0deg);
    }
}

/* #### slickスライダー slick slider ##### */
/* ##### テーブル table ##### */
/* ##### タイトル title ##### */
.title-01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 80px;
}

.title-01 .main {
    font-family: "Marcellus", serif;
    font-size: 5vw;
}

.title-01 .sub {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    font-size: 14px;
}

.title-01 .sub::before {
    content: "";
    width: 3em;
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 0.5em;
    border-top: 1px solid #5f3003;
}

.title-02 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 30px;
    font-size: 22px;
}

.title-02 .sub {
    margin-bottom: 1em;
    font-size: 60%;
}

.title-03 {
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 20px;
}

.title-04 {
    margin-bottom: 1em;
    font-family: "Marcellus", serif;
    font-size: 5vw;
    letter-spacing: 0.1em;
}

.title-04 .sub {
    display: block;
    margin-left: 1em;
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
}

.title-05 {
    margin-bottom: 50px;
    font-size: 40px;
}

.title-06 {
    padding: 0.5em;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.5vw;
}

.title-07 {
    margin-bottom: 20px;
    padding-bottom: 0.2em;
    font-weight: bold;
    font-size: 24px;
    position: relative;
}

.title-07 .sub {
    margin-left: 1em;
    font-size: 50%;
}

.title-07::before,
.title-07::after {
    position: absolute;
    bottom: 0;
    left: 0;
}

.title-07::before {
    content: "";
    width: 30%;
    height: 2px;
    display: block;
    background-color: #5f3003;
    z-index: 1;
}

.title-07::after {
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    background-color: var(--color02);
}

.title-08 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    margin-bottom: 50px;
    font-family: "Marcellus", serif;
    font-size: 40px;
    letter-spacing: 0.1em;
}

.title-08 .sub {
    font-size: 40%;
}

.title-09 {
    margin-bottom: 50px;
    font-weight: bold;
    font-size: 34px;
}

.title-10 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 50px;
}

.title-10 .main {
    font-family: "Marcellus", serif;
    font-size: 40px;
}

.title-10 .sub {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    font-size: 14px;
}

.title-10 .sub::before {
    content: "";
    width: 3em;
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 0.5em;
    border-top: 1px solid #5f3003;
}

.title-11 {
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 28px;
}

.title-12 {
    margin: 0.5em;
}

[class*=bgc] .title-07::after {
    background-color: white;
}

@media (max-width: 1024px) {
    .title-01 {
        margin-bottom: 64px;
    }

    .title-02 {
        margin-bottom: 24px;
        font-size: 20px;
    }

    .title-03 {
        margin-bottom: 24px;
        font-size: 20px;
    }

    .title-05 {
        font-size: 32px;
    }

    .title-06 {
        font-size: 2vw;
    }

    .title-07 {
        font-size: 19px;
    }

    .title-08 {
        font-size: 32px;
    }

    .title-09 {
        margin-bottom: 30px;
        font-size: 27px;
    }

    .title-11 {
        font-size: 24px;
    }
}

@media (max-width: 599px) {
    .ori .box-menu-img,
    .ori .box-menu-list {
        width: 100%;
    }
    .title-01 .main {
        font-size: 10vw;
        text-align: center;
    }

    .title-01 .sub {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .title-04 {
        font-size: 9vw;
    }

    .title-06 {
        font-size: 3.5vw;
    }
    
    .title-07{
       font-size: 18px;
    }

    .title-08 {
        font-size: 24px;
    }

    .title-09 {
        font-size: 20px;
    }

    .title-11 {
        font-size: 20px;
    }
}

/* #### リスト list ##### */
.list-sns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.list-sns li a {
    display: block;
    font-size: 38px;
    line-height: 1;
}

.list-time {
    align-items: center;
}

.list-time dt {
    font-family: "Marcellus", serif;
    font-size: 160%;
    line-height: 1;
}

.list-app-wrap {
    width: 100%;
    max-width: 400px;
}

.list-dot li {
    padding-left: 1.3em;
    position: relative;
}

.list-dot li::before {
    content: "■";
    display: inline-block;
    color: inherit;
    line-height: 1;
    position: absolute;
    top: 0.3em;
    left: 0;
}

.list-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1.5em 1em;
}

.list-menu+.list-menu {
    border-top: 1px dashed #5f3003;
}

.list-menu dt,
.list-menu dd {
    font-size: 20px;
}

.list-menu dt {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-bottom: 10px;
    font-weight: bold;
}

.list-menu dd {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    align-items: flex-end;
    -ms-flex-align: end;
    margin-left: auto;
}

.list-menu dd.text {
    width: 100%;
    align-items: flex-start;
    margin-top: 10px;
    font-size: 14px;
    text-align: left;
}

.list-menu dd .price,
.list-menu dd .note {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.list-menu dd .note {
    display: block;
    font-size: 10px;
}

.list-inpage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.list-inpage li a {
    font-size: 16px;
}

.list-inpage li [class*=btn] {
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.list-inpage li [class*=btn] a {
    width: 100%;
    height: 100%;
    text-align: center;
}

.list-faq {
    overflow: hidden;
    border-radius: 30px;
    -webkit-transition: -webkit-box-shadow 0.3s linear;
    transition: -webkit-box-shadow 0.3s linear;
    transition: box-shadow 0.3s linear;
    transition: box-shadow 0.3s linear, -webkit-box-shadow 0.3s linear;
}

.list-faq dt {
    padding: 1.5em 3em 1em 3em;
    font-weight: bold;
    font-size: 24px;
    color: #5f3003;
    background-color: #f7f3ec;
    position: relative;
}

.list-faq dt:hover {
    cursor: pointer;
}

.list-faq dt::before {
    content: "Q";
    font-size: 200%;
    line-height: 1;
    position: absolute;
    top: 0.5em;
    left: 0.5em;
}

.list-faq dt::after {
    content: "\f078";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 150%;
    line-height: 1;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
    position: absolute;
    top: 1em;
    right: 1em;
}

.list-faq dd {
    padding: 2em 1em 2em 4em;
    background-color: white;
    position: relative;
}

.list-faq dd::before {
    content: "A";
    font-size: 200%;
    line-height: 1;
    position: absolute;
    top: 1em;
    left: 1em;
}

.list-faq.action {
    -webkit-box-shadow: 20px 20px 60px #e4e4e4, -20px -20px 60px white;
    box-shadow: 20px 20px 60px #e4e4e4, -20px -20px 60px white;
}

.list-faq.action dt::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.list-table {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.list-table+.list-table {
    border-top: 1px solid #5f3003;
}

.list-table dt,
.list-table dd {
    padding: 1.5em 1em;
}

.list-table dt {
    width: 25%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-weight: bold;
    background-color: var(--color02);
}

.list-table dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background-color: white;
}

.list-table-wrap {
    overflow: hidden;
    border: 1px solid #5f3003;
    border-radius: 30px;
}

.list-salon-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.list-salon-gallery li {
    width: calc((100% - 12px) / 4);
    margin: 1px;
}

.list-salon-gallery li:hover {
    cursor: pointer;
}

.inner-rec-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0.5em 0;
}

.inner-rec-list .m-text {
    width: 25%;
    padding-right: 1em;
    font-weight: bold;
    position: relative;
}

.inner-rec-list .m-text::after {
    content: "：";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
}

.inner-rec-list .text {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

@media (max-width: 1024px) {
    .list-menu {
        padding: 1em 1em;
    }

    .list-menu dt,
    .list-menu dd {
        font-size: 16px;
    }

    .list-inpage li [class*=btn] a {
        font-size: 14px;
    }

    .list-inpage li [class*=btn] a::after {
        bottom: -5px;
        right: -5px;
    }

    .list-faq {
        border-radius: 24px;
    }

    .list-faq dt {
        font-size: 19px;
    }

    .list-table dt {
        width: 30%;
    }

    .list-salon-gallery li {
        width: calc((100% - 8px) / 4);
    }
}

@media (max-width: 599px) {
    .list-01 li {
        width: 80%;
        margin: 0 auto;
    }

    .list-inpage li [class*=btn] a {
        padding: 1em 0.5em;
        font-size: 12px;
    }

    .list-inpage li [class*=btn] a::after {
        border-bottom: 1px solid #5f3003;
        border-right: 1px solid #5f3003;
    }

    .list-faq {
        border-radius: 18px;
    }

    .list-table dt,
    .list-table dd {
        width: 100%;
    }

    .list-table dt {
        padding: 1em;
    }

    .list-table dd {
        padding: 1em 1em 1.5em 2em;
    }

    .box-time {
        padding: 20px;
    }

    .list-time dt {
        font-size: 140%;
    }

    .list-flat>dd {
        font-size: 14px;
    }

    .list-salon-gallery li {
        width: calc((100% - 6px) / 2);
    }
    .inner-rec-list .m-text,
    .inner-rec-list .text {
        width: 100%;
    }
    .inner-rec-list .m-text::after {
        content: none;
    }
}

/* ##### ボタン button ##### */
.btn-01 {
    width: 220px;
    max-width: 90%;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

.btn-01 a,
.btn-01 button {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1em;
    font-family: "Marcellus", serif;
    font-weight: bold;
    font-size: 18px;
    color: #5f3003;
    line-height: 1.2;
    letter-spacing: 0.2em;
    border: 2px solid #5f3003;
    position: relative;
}

.btn-01 a::after,
.btn-01 button::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    border-bottom: 2px solid #5f3003;
    border-right: 2px solid #5f3003;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
    position: absolute;
    bottom: -8px;
    right: -8px;
    pointer-events: none;
}

.btn-01 a:hover,
.btn-01 button:hover {
    color: white;
    background-color: #5f3003;
    opacity: 1;
}

.btn-01 a:hover::after,
.btn-01 button:hover::after {
    bottom: -2px;
    right: -2px;
}

.btn-01 button {
    background-color: white;
}

.btn-01.-white a,
.btn-01.-white button {
    color: white;
    border: 2px solid white;
}

.btn-01.-white a::after,
.btn-01.-white button::after {
    border-bottom: 2px solid white;
    border-right: 2px solid white;
}

.btn-01.-white a:hover,
.btn-01.-white button:hover {
    color: #5f3003;
    background-color: white;
}

.btn-01.-back a::after,
.btn-01.-back button::after {
    border-left: 2px solid #5f3003;
    border-right: none;
    left: -8px;
}

.btn-01.-back a:hover::after,
.btn-01.-back button:hover::after {
    left: -2px;
}

.btn-02 {
    width: 180px;
    max-width: 90%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.btn-02 a,
.btn-02 button {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1em;
    font-weight: bold;
    color: #5f3003;
    line-height: 1.2;
    border: 2px solid #5f3003;
}

.btn-02 a:hover,
.btn-02 button:hover {
    color: white;
    background-color: #5f3003;
    opacity: 1;
}

.btn-wide {
    width: 500px;
    max-width: 90%;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
}

.btn-wide a,
.btn-wide button {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1em;
    font-family: "Marcellus", serif;
    font-size: 34px;
    color: #5f3003;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
    border: 2px solid #5f3003;
    border-radius: 10px;
    background-color: white;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    position: relative;
    z-index: 1;
}

.btn-wide a::before,
.btn-wide button::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #5f3003;
    -webkit-transition: -webkit-transform ease 0.3s;
    transition: -webkit-transform ease 0.3s;
    transition: transform ease 0.3s;
    transition: transform ease 0.3s, -webkit-transform ease 0.3s;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.btn-wide a:hover,
.btn-wide button:hover {
    color: white;
    opacity: 1;
}

.btn-wide a:hover:hover::before,
.btn-wide button:hover:hover::before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

@media (max-width: 1024px) {
    .btn-01 {
        margin-top: 40px;
    }

    .btn-01 a,
    .btn-01 button {
        padding: 0.8em;
    }

    .btn-wide {
        width: 400px;
    }

    .btn-wide a,
    .btn-wide button {
        font-size: 30px;
    }
}

@media (max-width: 1024px) {
    .btn-wide a,
    .btn-wide button {
        font-size: 24px;
    }
}

header {
    width: 100%;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
    pointer-events: none;
    position: fixed;
    top: 1vw;
    left: 2vw;
    z-index: 10;
}

header .logo {
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

.scrolled header .logo-header {
    opacity: 0.5;
}

/* ##### ナビ nav ##### */
nav {
    width: 40vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    background-color: var(--color01);
    -webkit-transition: right 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: right 1s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    position: fixed;
    top: 0;
    left: auto;
    right: calc(-40vw + 100px);
    z-index: 20;
}

.active nav {
    -webkit-box-shadow: -2px 0px 15px -5px #000;
    box-shadow: -2px 0px 15px -5px #000;
    right: 0;
}

.nav-bar {
    width: 100px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background-color: var(--color01);
}

.nav-bar .hamburger {
    width: 100%;
    position: relative;
}

.nav-bar .hamburger::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.nav-bar .hamburger .menu-trigger-wrap {
    padding: 30px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.nav-btn {
    width: 100%;
    position: relative;
}

.nav-btn-inner a {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.2em;
    padding: 30px 0;
    font-family: "Marcellus", serif;
    font-weight: bold;
    font-size: 14px;
    color: var(--color01);
    border: solid 1px;
    border-left: 0;
    border-right: 0;
    background-color: #f7f3ec;
}

.nav-btn-inner .con .text,
.nav-btn-inner .tel .icon-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-btn.type-a a .text {
    opacity: 1;
    animation: poyopoyo 2s ease-out infinite;
}
@keyframes poyopoyo {
    0%,
    40%,
    60%,
    80% {
        transform: scale(1.0);
    }
    50%,
    70% {
        transform: scale(0.95);
    }
}

.nav-btn.type-b a {
    overflow: hidden;
    position: relative;
}

.nav-btn.type-b a::before {
    content: "";
    width: 30px;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: reflection 3s ease-in-out infinite;
    animation: reflection 3s ease-in-out infinite;
    position: absolute;
    top: -180px;
    left: 0;
    z-index: 1;
}

@-webkit-keyframes reflection {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
    }

    80% {
        opacity: 0.5;
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
    }

    81% {
        opacity: 1;
        -webkit-transform: scale(4) rotate(45deg);
        transform: scale(4) rotate(45deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(50) rotate(45deg);
        transform: scale(50) rotate(45deg);
    }
}

@keyframes reflection {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
    }

    80% {
        opacity: 0.5;
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
    }

    81% {
        opacity: 1;
        -webkit-transform: scale(4) rotate(45deg);
        transform: scale(4) rotate(45deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(50) rotate(45deg);
        transform: scale(50) rotate(45deg);
    }
}

.nav-btn.-app {
    display: none;
}

.nav-sns {
    position: relative;
    z-index: 1;
}

.nav-sns .list-sns li {
    margin: 30px;
}

.nav-sns .list-sns li a {
    color: white;
}

.nav-sns .list-sns li a [class*=icon]::before {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.icon-fa-free-cart::before {
    font-size: 80%;
}

.nav-content {
    width: 10%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 20px;
}

.nav-header {
    width: 100%;
    z-index: 1;
}

.nav-header .logo {
    margin-left: auto;
    margin-right: auto;
}

.nav-header .address {
    font-size: 12px;
    color: #f7f3ec;
    text-align: center;
}

.nav-header .phone {
    font-family: "Marcellus", serif;
    font-weight: bold;
    font-size: 22px;
    color: #f7f3ec;
    text-align: center;
}

.list-nav {
    width: 100%;
    height: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 30px;
    z-index: 1;
}

.list-nav>li+li {
    margin-top: 1em;
}

.list-nav>li>a,
.list-nav>li>span {
    display: block;
    padding: 10px 15px;
    font-weight: 400;
    font-size: 18px;
    color: #f7f3ec;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

.list-nav>li>a:hover,
.list-nav>li>span:hover {
    background-color: rgba(247, 243, 236, 0.4);
    cursor: pointer;
}

.list-nav>li.current>a,
.list-nav>li.current>span {
    background-color: rgba(247, 243, 236, 0.4);
}

.list-nav .border-item a {
    padding-left: 2.5rem;
    position: relative;
}

.list-nav .border-item a::after {
    content: "";
    width: 1rem;
    height: 1px;
    background-color: #fff;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 1rem;
}

.is-bggray .list-nav .border-item a::after{
  background-color: var(--color01);
}

@media (max-width: 1024px) {
    nav {
        width: 65vw;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        right: calc(-65vw + 80px);
    }

    .nav-bar {
        width: 80px;
    }

    .nav-bar .hamburger .menu-trigger-wrap {
        padding: 20px;
    }

    .nav-sns .list-sns li {
        margin: 20px;
    }

    .nav-header .logo-nav {
        max-width: 100px;
    }

    .list-nav {
        width: 100%;
        height: auto;
        display: block;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        padding: 10px 50px;
    }

    .list-nav>li+li {
        margin-left: 0;
    }

    .list-nav>li>a,
    .list-nav>li>span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -ms-flex-align: center;
        padding: 10px;
        border-bottom: none;
    }

    .list-nav>li>a [class^=icon],
    .list-nav>li>span [class^=icon] {
        display: inline-block;
        margin-right: 0.5em;
    }

    .list-nav>li>a [class^=icon] img,
    .list-nav>li>span [class^=icon] img {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .list-nav>li.current>a,
    .list-nav>li.current>span {
        border-bottom: none;
    }

    .list-nav>li .megamenu-btn {
        display: none;
    }

    .list-nav>li .acc-btn_mobile {
        display: block;
        padding-right: 3em;
        position: relative;
    }

    .list-nav>li .acc-btn_mobile::after {
        content: "";
        width: 15px;
        height: 15px;
        display: block;
        border-bottom: 1px solid white;
        border-right: 1px solid white;
        -webkit-transition: 0.3s linear;
        transition: 0.3s linear;
        -webkit-transform: translate(0, -50%) rotate(45deg);
        transform: translate(0, -50%) rotate(45deg);
        position: absolute;
        top: 17px;
        right: 1em;
    }

    .list-nav>li .acc-btn_mobile.action::after {
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

    .list-nav>li .dropdown-box-list li a,
    .list-nav>li .dropdown-box-list li span {
        padding-left: 1.5em;
    }

    .list-nav>li .common-nav-list {
        width: 50%;
    }
}

@media (max-width: 599px) {
    .nav-btn-inner .con .text,
    .nav-btn-inner .tel .icon-box {
        flex-direction: row;
    }
    nav {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        top: initial;
        bottom: 0;
        right: -100vw;
    }

    .nav-bar {
        width: 100%;
        height: 60px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.2);
        -webkit-transform: translate(-100vw, 0);
        transform: translate(-100vw, 0);
    }

    .nav-bar .hamburger {
        width: 60px;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    .nav-bar .hamburger .menu-trigger-wrap {
        padding: 15px;
    }

    .nav-btn-wrap {
        width: 10%;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .nav-btn-wrap div {
        width: 100%;
        height: 100%;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
    }

    .nav-btn-inner a {
        display: block;
        font-size: 14px;
        border: solid 1px;
        border-top: 0;
        border-bottom: 0;
    }

    .nav-btn.type-b a {
        font-size: 14px;
    }

    .nav-btn.-app {
        width: 60px;
        display: block;
        border-right: 1px solid #f7f3ec;
    }

    .nav-btn.-app a {
        color: white;
        background-color: var(--color01);
    }

    .nav-sns {
        width: 70px;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    .nav-sns .list-sns li {
        margin: 12px;
    }

    .nav-sns .list-sns li a {
        font-size: 30px;
    }

    .nav-content {
        width: 100%;
        height: 10%;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .active .nav-bar {
        border-top: 1px solid #f7f3ec;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .list-nav {
        padding: 10px;
    }

    .list-nav li .common-nav-list {
        width: 100%;
    }
}

/* ##### フッター footer ##### */
footer {
    padding: 120px 0 0;
    background-color: var(--color01);
}

footer * {
    color: white;
}

footer .logo-footer {
    margin: 0 auto 30px;
}

.list-footer {
    width: 1200px;
    max-width: 96%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    align-items: flex-start;
    -ms-flex-align: start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    font-weight: bold;
}

.list-footer ul {
    width: calc(50% - 150px);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.list-footer ul:first-of-type {
    width: 190px;
}

.list-footer li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
}

.list-footer li.tit {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

.list-footer li.tit:before,
.list-footer li.tit:after {
    content: "";
    width: 30px;
    height: 1px;
    display: inline-block;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background: #fff;
}

.list-footer li.tit:before {
    margin-right: 10px;
}

.list-footer li.tit:after {
    margin-left: 10px;
}

.list-footer li a {
    letter-spacing: 0.1em;
}

.list-footer li+li {
    margin-top: 1.5em;
}

.copy {
    margin-top: 100px;
    padding: 100px 50px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border-top: 1px solid white;
}

@media (max-width: 1024px) {
    footer {
        padding: 96px 0 0;
    }

    .list-footer ul,
    .list-footer ul:first-of-type {
        width: calc(96% / 2);
    }
    
    .list-footer ul:last-of-type{
      margin-top: 50px;
    }

    .copy {
        margin-top: 80px;
        padding: 80px 40px;
    }
}

@media (max-width: 599px) {
    footer {
        padding: 72px 0 0;
    }

    footer .logo-footer {
        max-width: 70px;
    }

    .list-footer ul,
    .list-footer ul:first-of-type {
        width: 100%;
    }

    .list-footer ul+ul {
        margin-top: 50px;
    }

    .copy {
        margin-top: 60px;
        padding: 60px 30px 120px;
    }
}

/* ##### メインビジュアル hero section ##### */
.hero-section {
    position: relative;
}

.hero-section.-top {
    height: 105vh;
    background-color: #f7f3ec;
}

.hero-section-img {
    background-size: cover;
    background-repeat: no-repeat;
    /*     background-position: center center; */
}

.hero-section.-top .hero-section-img {
    width: calc(100% - (200px + 4vw));
    margin-left: auto;
    position: relative;
    z-index: 1;
}

.hero-section.-top .hero-section-img .img {
    width: 100%;
    position: relative;
}

.hero-section.-top .hero-section-img .img img {
    width: 100%;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    font-family: "object-fit: cover; object-position: 50% 50%;";
    position: absolute;
    top: 0;
    left: 0;
}

.hero-section.-top .hero-section-img .img::after {
    content: "";
    display: block;
    padding-top: 90vh;
}

.hero-section.-top .hero-catc {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
    position: absolute;
    top: 50%;
    left: 5%;
    z-index: 1;
}

.hero-section.-top .hero-catc .main {
    margin-bottom: 30px;
    font-size: 34px;
}

.hero-section.-top .hero-catc .sb {
    font-size: 26px;
}

.hero-section.-top .hero-section-title {
    padding-left: 1em;
    font-family: "Marcellus", serif;
    font-size: 7vw;
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.hero-section.-top .hero-section-title .sub {
    display: block;
    font-size: 22px;
}

.hero-section.-top .hero-section-content {
    width: 100%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    align-items: flex-end;
    -ms-flex-align: end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 30px;
    position: absolute;
    bottom: 15vh;
    left: 0;
    z-index: 1;
}

.hero-section.-lower .hero-section-img {
    overflow: hidden;
    border-radius: 0 0 0 100px;
}

.hero-section.-lower .img {
    display: block;
    overflow: hidden;
    border-radius: 0 0 0 100px;
    position: relative;
}

.hero-section.-lower .img::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-image: url('/import/tenant_1/162.43.90.168/B05/images/binding-dark.webp');
    background-color: var(--color02);
    opacity: 0.7;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hero-section.-lower .img::before {
    display: none;
}

.hero-section.-lower .img::after {
    content: "";
    display: block;
    padding-top: 40%;
}

.hero-section.-lower .img img {
    width: 100%;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    font-family: "object-fit: cover; object-position: 50% 50%;";
    position: absolute;
    top: 0;
    left: 0;
}

.hero-section.-lower .hero-section-content {
    width: 100%;
    padding: 30px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
}

.hero-section.-lower .hero-section-title {
    font-family: "Marcellus", serif;
    font-size: 3vw;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
    .hero-section.-top .hero-catc .main {
        font-size: 24px;
    }

    .hero-section.-top .hero-catc .sb {
        font-size: 20px;
    }
    .hero-section.-top .hero-section-img {
        width: 90%;
    }

    .hero-section.-top .hero-section-title {
        padding-left: 0;
    }

    .hero-section.-top .hero-section-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        align-items: flex-start;
        -ms-flex-align: start;
        margin-left: auto;
        padding: 0 15px;
    }

    .hero-section.-top .hero-section-content .box-app {
        -ms-flex-item-align: end;
        align-self: flex-end;
        margin-top: 5vw;
    }

    .hero-section.-lower .hero-section-img {
        overflow: hidden;
        border-radius: 0 0 0 80px;
    }

    .hero-section.-lower .img {
        border-radius: 0 0 0 80px;
    }

    .hero-section.-lower .img::after {
        padding-top: 45%;
    }

    .hero-section.-lower .hero-section-title {
        font-size: 5vw;
    }
}

@media (max-width: 599px) {
    .hero-section.-top .hero-catc .sb {
        font-size: 18px;
    }
    .hero-section.-top {
        height: 100%;
        min-height: 470px
    }
    
    .hero-section.-top .hero-catc{
      top: 45%;
    }

    .hero-section.-top .hero-section-img .img::after {
        padding-top: 70%;
    }

    .hero-section.-top .hero-section-title {
        font-size: 9vw;
    }

    .hero-section.-top .hero-section-content {
        padding: 5vw;
    }

    .hero-section.-top .hero-section-content .box-app {
        margin-top: 15vw;
    }

    .hero-section.-lower .hero-section-img {
        overflow: hidden;
        border-radius: 0 0 0 60px;
    }

    .hero-section.-lower .img {
        border-radius: 0 0 0 60px;
    }

    .hero-section.-lower .img::after {
        padding-top: 80%;
    }

    .hero-section.-lower .hero-section-title {
        font-size: 7vw;
                filter: drop-shadow(0px 0px 4px #fff)drop-shadow(0px 0px 4px #fff)drop-shadow(0px 0px 4px #fff);
    }
}

/* ##### カスタムコンテンツ custom contents ##### */
.date {
    font-family: "Roboto", sans-serif;
}

.category span {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 12px;
    color: white;
    line-height: 1.2;
    border-radius: 3px;
    background-color: #5f3003;
}

.category span+span {
    margin-left: 0.5em;
}

.list-cc-title {
    font-weight: bold;
    font-size: 18px;
}

.list-cc .text {
    font-size: 14px;
}

.list-cc.-style.up-col-4 li {
    width: calc(25% - 2px);
    margin: 1px;
}

.list-cc.-style li a:hover {
    opacity: 1;
}

.list-style dt {
    font-family: "Marcellus", serif;
    font-weight: bold;
    font-size: 26px;
}

.list-style dd {
    padding-left: 1em;
}

.image-thumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 1px;
}

.image-thumb li {
    width: calc((100% - 2px) / 3);
}

.image-thumb li img {
    opacity: 0.5;
}

.image-thumb li:hover {
    cursor: pointer;
}

.image-thumb li+li {
    margin-left: 1px;
}

.image-thumb li.active-img img {
    opacity: 1;
}

.box-side-item+.box-side-item {
    margin-top: 80px;
}

.box-side-list {
    padding-left: 1em;
}

.box-side-list li {
    padding-left: 1.5em;
    position: relative;
}

.box-side-list li+li {
    margin-top: 0.5em;
}

.box-side-list li::before {
    content: "";
    width: 1em;
    height: 2px;
    display: inline-block;
    background-color: var(--color02);
    position: absolute;
    top: 0.65em;
    left: 0;
}

.detail-heading-wrap h2 {
    margin: 1.5em 0 0.5em;
    padding: 0.2em 0.5em;
    font-weight: bold;
    font-size: 28px;
    line-height: 1.2;
    border-bottom: 2px solid #5f3003;
}

.detail-heading-wrap h3 {
    margin: 1.5em 0 0.5em;
    padding-left: 0.5em;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.2;
    border-left: 0.5em solid var(--color02);
}

.detail-heading-wrap h4 {
    margin: 1.5em 0 0.5em;
    font-weight: bold;
    font-size: 22px;
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .list-cc.-blog li .card-content .text {
        font-size: 14px;
    }

    .box-side {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 80px;
    }

    .box-side-item {
        width: 48%;
        margin: 1%;
    }

    .box-side-item+.box-side-item {
        margin-top: 1%;
    }

    .detail-heading-wrap h2 {
        font-size: 26px;
    }

    .detail-heading-wrap h3 {
        font-size: 22px;
    }

    .detail-heading-wrap h4 {
        font-size: 20px;
    }
}

@media (max-width: 599px) {
    .list-cc.-blog li .card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .list-cc.-blog li .card-img {
        width: 35%;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    .list-cc.-blog li .card-img a {
        height: 100%;
    }

    .list-cc.-blog li .card-img a .img {
        height: 100%;
    }

    .list-cc.-blog li .card-content {
        width: 10%;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        padding: 1em;
    }

    .list-cc.-blog li .card-content .text {
        font-size: 12px;
    }

    .list-cc.-style[class*=up-col-2] li {
        width: calc(50% - 2px);
    }

    .box-side-item {
        width: 98%;
    }

    .box-side-item+.box-side-item {
        margin-top: 50px;
    }
}

/* ##### 変化する要素にtransitionを追加 ##### */
/*
共通要素、善太的に使用するパーツ（背景色等）は個別に指定しています。
それ以外の個別に変化させる要素は汎用クラス名を用意しています。
/*

/* 背景色 */
body,
.nav-bar,
.bgc-01,
.bgc-02,
.bgc-03,
.bgc-04,
.bgc-05,
.box-white,
.bgc-bottom::after,
.bgc-left::after,
.bgc-right::after,
.bgc-diagonal.-right-to-left::after,
.bgc-diagonal.-left-to-right::after,
.bgc-texture-01,
.category span,
.nav-btn.-app a,
.for-bggray-bgc-gray,
.for-bggray-bgc-white,
.for-bggray-bgc-lightgray {
    -webkit-transition: background-color 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: background-color 2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 文字色 */
/* nav *,
.list-nav li a,
.list-nav li span,
.nav-btn.-app a,
[class*=title-],
.box-side-list li a,
.contact-item dt,
.contact-item dd.radiobtn label,
.for-bggray-c-gray,
.for-bggray-c-white {
    -webkit-transition: color 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: color 2s cubic-bezier(0.19, 1, 0.22, 1);
} */

/* border-top */
.menu-trigger span,
.title-01 .sub::before {
    -webkit-transition: border-top 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: border-top 2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* border-bottom */
.detail-heading-wrap h2 {
    -webkit-transition: border-bottom 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: border-bottom 2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ロゴ画像 */
.nav-header .logo-nav img,
.for-bg-gray-img img {
    -webkit-transition: -webkit-filter 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: -webkit-filter 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: filter 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: filter 2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ボタン */
[class*=btn-] {
    -webkit-transition: color 2s cubic-bezier(0.19, 1, 0.22, 1), border 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: color 2s cubic-bezier(0.19, 1, 0.22, 1), border 2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ニューモーフィズム */
.newmo {
    -webkit-transition: -webkit-box-shadow 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: -webkit-box-shadow 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: box-shadow 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: box-shadow 2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-box-shadow 2s cubic-bezier(0.19, 1, 0.22, 1);
}

.list-faq {
    -webkit-transition: -webkit-box-shadow 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: -webkit-box-shadow 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: box-shadow 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: box-shadow 2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-box-shadow 2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* メニュー */
.list-menu {
    -webkit-transition: color 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: color 2s cubic-bezier(0.19, 1, 0.22, 1);
}

.list-menu+.list-menu {
    -webkit-transition: border-top 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: border-top 2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* メールフォーム */
.contact-item dt .must {
    -webkit-transition: background-color 2s cubic-bezier(0.19, 1, 0.22, 1), color 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: background-color 2s cubic-bezier(0.19, 1, 0.22, 1), color 2s cubic-bezier(0.19, 1, 0.22, 1);
}

.contact-btns li button {
    -webkit-transition: color 2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: color 2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ##### 変化後 ##### */
/* 背景色（紺色） */
.is-bggray,
.is-bggray .for-bggray-bgc-gray {
    background-color: var(--color01);
}

/* 背景色（白） */
.is-bggray nav,
.is-bggray .nav-bar,
.is-bggray .category span,
.is-bggray .nav-btn.-app a,
.is-bggray .for-bggray-bgc-white {
    background-color: white;
}

/* 背景色（擬似要素） */
.is-bggray .bgc-bottom {
    position: relative;
}

.is-bggray .bgc-bottom::after {
    background-color: rgba(196, 183, 186, 0.5);
}

.is-bggray .bgc-left::after {
    background-color: rgba(245, 241, 238, 0.5);
    background-color: transparent;
}

.is-bggray .bgc-left.-max {
    background-color: rgba(245, 241, 238, 0.5);
}

.is-bggray .bgc-right::after {
    background-color: rgba(196, 183, 186, 0.5);
    background-color: transparent;
}

.is-bggray .bgc-diagonal.-right-to-left::after {
    background: -webkit-gradient(linear, right bottom, left top, color-stop(50%, rgba(245, 241, 238, 0.5)), color-stop(50%, transparent));
    background: linear-gradient(to top left, rgba(245, 241, 238, 0.5) 50%, transparent 50%);
}

.is-bggray .bgc-diagonal.-left-to-right::after {
    background: -webkit-gradient(linear, left bottom, right top, color-stop(50%, rgba(245, 241, 238, 0.5)), color-stop(50%, transparent));
    background: linear-gradient(to top right, rgba(245, 241, 238, 0.5) 50%, transparent 50%);
}

.is-bggray .bgc-texture-01 {
    background-color: rgba(255, 255, 255, 0.5);
}

.is-bggray .bgc-01 {
    background-color: rgba(35, 57, 81, 0.5);
}

.is-bggray .bgc-02 {
    background-color: rgba(247, 243, 236, 0.5);
}

.is-bggray .bgc-03 {
    background-color: rgba(247, 235, 229, 0.5);
}

.is-bggray .bgc-04 {
    background-color: rgba(196, 183, 186, 0.5);
    background-color: transparent;
}

.is-bggray .bgc-05 {
    background-color: rgba(245, 241, 238, 0.5);
}

/* 背景色（ナビのアクティブリンク） */
.is-bggray .list-nav>li.current>a,
.is-bggray .list-nav>li.current>span,
.is-bggray .list-nav>li>a:hover,
.is-bggray .list-nav>li>span:hover {
    background-color: rgba(35, 57, 81, 0.2);
}

/* 背景色（その他） */
.is-bggray .for-bggray-bgc-lightgray {
    background-color: lightgray;
}

.is-bggray .box-white {
    background-color: rgba(255, 255, 255, 0.9);
}

/*グレインの動く背景*/
.grain-box {
    overflow: hidden;
    position: relative;
}

.grain {
    width: 110%;
    height: 110%;
    opacity: 0.3;
    -webkit-animation: grain 0.5s steps(1) infinite;
    animation: grain 0.5s steps(1) infinite;
    position: absolute;
    top: -5%;
    left: -5%;
}

.is-bggray section .grain {
    display: none;
}

.grain-normal {
    background-image: url('/import/tenant_1/162.43.90.168/B05/images/3ab494e9f620c5e138d481d74d84c0ec.webp');
}

.grain-normal-top:before {
    content: "";
    background-image: url('/import/tenant_1/162.43.90.168/B05/images/3ab494e9f620c5e138d481d74d84c0ec.webp');
}

.grain-normal-bottom:before {
    content: "";
    width: 100%;
    height: 60%;
    display: block;
    background-image: url('/import/tenant_1/162.43.90.168/B05/images/3ab494e9f620c5e138d481d74d84c0ec.webp');
    opacity: 0.3;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.is-bggray .grain-normal-bottom:before {
    opacity: 0;
}

.grain:after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url('/import/tenant_1/162.43.90.168/B05/images/3ab494e9f620c5e138d481d74d84c0ec.webp');
    background-repeat: repeat;
    position: absolute;
    z-index: 0;
}

/* Film Animations */
@-webkit-keyframes grain {
    0%,
    100% {
        -webkit-transform: translate(0, 0, 0);
        transform: translate(0, 0, 0);
    }

    10% {
        -webkit-transform: translate(-1%, -1%);
        transform: translate(-1%, -1%);
    }

    20% {
        -webkit-transform: translate(1%, 1%);
        transform: translate(1%, 1%);
    }

    30% {
        -webkit-transform: translate(-2%, -2%);
        transform: translate(-2%, -2%);
    }

    40% {
        -webkit-transform: translate(3%, 3%);
        transform: translate(3%, 3%);
    }

    50% {
        -webkit-transform: translate(-3%, -3%);
        transform: translate(-3%, -3%);
    }

    60% {
        -webkit-transform: translate(4%, 4%);
        transform: translate(4%, 4%);
    }

    70% {
        -webkit-transform: translate(-4%, -4%);
        transform: translate(-4%, -4%);
    }

    80% {
        -webkit-transform: translate(2%, 2%);
        transform: translate(2%, 2%);
    }

    90% {
        -webkit-transform: translate(-3%, -3%);
        transform: translate(-3%, -3%);
    }
}

@keyframes grain {
    0%,
    100% {
        -webkit-transform: translate(0, 0, 0);
        transform: translate(0, 0, 0);
    }

    10% {
        -webkit-transform: translate(-1%, -1%);
        transform: translate(-1%, -1%);
    }

    20% {
        -webkit-transform: translate(1%, 1%);
        transform: translate(1%, 1%);
    }

    30% {
        -webkit-transform: translate(-2%, -2%);
        transform: translate(-2%, -2%);
    }

    40% {
        -webkit-transform: translate(3%, 3%);
        transform: translate(3%, 3%);
    }

    50% {
        -webkit-transform: translate(-3%, -3%);
        transform: translate(-3%, -3%);
    }

    60% {
        -webkit-transform: translate(4%, 4%);
        transform: translate(4%, 4%);
    }

    70% {
        -webkit-transform: translate(-4%, -4%);
        transform: translate(-4%, -4%);
    }

    80% {
        -webkit-transform: translate(2%, 2%);
        transform: translate(2%, 2%);
    }

    90% {
        -webkit-transform: translate(-3%, -3%);
        transform: translate(-3%, -3%);
    }
}

/* Simple Title Animation */
@-webkit-keyframes draw {
    0% {
        width: 0%;
    }

    100% {
        width: 110%;
    }
}

@keyframes draw {
    0% {
        width: 0%;
    }

    100% {
        width: 110%;
    }
}


@-webkit-keyframes draw-bottom {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}


@keyframes draw-bottom {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}


@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 文字色（紺色） */
.is-bggray nav *,
.is-bggray .nav-btn.-app a,
.is-bggray .list-nav li a,
.is-bggray .list-nav li span,
.is-bggray .category span,
.is-bggray .for-bggray-c-gray {
    color: var(--color01) !important;
}

/* 文字色（白色） */
.is-bggray [class*=title-],
.is-bggray .box-side-list li a,
.is-bggray .contact-item dt,
.is-bggray .contact-item dd.radiobtn label,
.is-bggray .for-bggray-c-white {
    color: white;
}

/* text-shadow */
.is-bggray .for-bggray-shadow-black {
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
}

/* border-top */
.is-bggray .menu-trigger span {
    border-top: 2px solid var(--color01);
}

.is-bggray.active .nav-bar {
    border-top: 1px solid var(--color01);
}

/* border-bottom */
.is-bggray .detail-heading-wrap h2 {
    border-bottom: 2px solid white;
}

.is-bggray .title-01 .sub::before,
.is-bggray .title-10 .sub::before {
    border-top: 1px solid white;
}

/* border-right */
.is-bggray .nav-btn.-app {
    border-right: 1px solid var(--color01);
}

/* 画像（紺色になる） */
.is-bggray .nav-header .logo-nav img,
.is-bggray .for-bg-gray-img img {
    -webkit-filter: invert(18%) sepia(47%) saturate(561%) hue-rotate(170deg) brightness(36%) contrast(92%);
    filter: invert(18%) sepia(47%) saturate(561%) hue-rotate(170deg) brightness(36%) contrast(92%);
}

/* ボタン */
.is-bggray .btn-01 a,
.is-bggray .btn-01 button,
.is-bggray .btn-02 a,
.is-bggray .btn-02 button {
    color: white;
    border: 2px solid white;
}

.is-bggray .btn-01 a:hover,
.is-bggray .btn-01 button:hover,
.is-bggray .btn-02 a:hover,
.is-bggray .btn-02 button:hover {
    color: var(--color01);
    background-color: white;
}

.is-bggray .btn-01 a::after,
.is-bggray .btn-01 button::after {
    border-bottom: 2px solid white;
    border-right: 2px solid white;
}

.is-bggray .btn-01.new a {
    color: #5f3003;
    border: 2px solid #5f3003;
}

.is-bggray .btn-01.new a:hover {
    color: #fff;
    background-color: #5f3003;
}

.is-bggray .btn-01.new a::after {
    border-bottom: 2px solid #5f3003;
    border-right: 2px solid #5f3003;
}

/* ニューモーフィズム */
.is-bggray .newmo {
    -webkit-box-shadow: 0px 0px 10px #969696, 0px 0px 10px rgba(87, 87, 87, 0.619);
    box-shadow: 0px 0px 10px #969696, 0px 0px 10px rgba(87, 87, 87, 0.619);
}

.is-bggray .list-faq.action {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* メニュー */
.is-bggray .list-menu {
    color: white;
}

.is-bggray .list-menu+.list-menu {
    border-top: 1px solid white;
}

/* メールフォーム */
.is-bggray .contact-item dt .must {
    color: var(--color01);
    background-color: white;
}

.is-bggray .contact-btns li button {
    color: var(--color01);
}

/* リスト */
.is-bggray .list-check li::before {
    color: white;
}

/* 変化させない */
.is-bggray .for-bggray-c-nochange {
    color: #5f3003 !important;
}

@media (max-width: 599px) {
    .is-bggray .for-bggray-c-nochange\@sp {
        color: #5f3003 !important;
    }
    .section-large.ori{
      padding: 0;
    }
}

.is-bggray .box-menu-item:nth-of-type(even) * {
    color: #5f3003;
}

.is-bggray .box-menu-item:nth-of-type(even) .list-menu+.list-menu {
    border-top: 1px solid #5f3003;
}



/* ##### カスタムコンテンツ custom conetents ##### */
/* ##### form ##### */
.must {
    display: inline-block;
    margin-top: 0.2em;
    padding: 3px 15px;
    font-size: 10px;
    color: white;
    line-height: 1.2;
    border-radius: 3px;
    background-color: var(--color01);
}

.contact-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.contact-item dt,
.contact-item dd {
    padding: 15px;
}

.contact-item dt {
    width: 30%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    -ms-flex-align: start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.contact-item dt .text-wrap {
    display: block;
}

.contact-item dt .text-wrap span {
    display: block;
}

.contact-item dt .text-wrap .sub {
    font-family: "Montserrat", sans-serif;
    font-size: 80%;
}

.contact-item dt .must {
    margin-left: 10px;
}

.contact-item dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.contact-item dd input,
.contact-item dd textarea {
    width: 100%;
    padding: 15px 10px;
    outline: none;
    border: none;
    background-color: #eee;
}

.contact-item dd textarea {
    min-height: 200px;
}

.contact-item dd.radiobtn label {
    display: inline-block;
    padding: 0 10px 0 30px;
    position: relative;
}

.contact-item dd.radiobtn label::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    border: 2px solid #dcdcdc;
    border-radius: 3px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
}

.contact-item dd.radiobtn label:hover {
    text-decoration: underline;
    cursor: pointer;
}

.contact-item dd.radiobtn input {
    display: none;
}

.contact-item dd.radiobtn input:checked+label {
    text-decoration: underline;
}

.contact-item dd.radiobtn input:checked+label::after {
    content: "\f00c";
    width: 0;
    height: 0;
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    color: var(--color01);
    line-height: 1;
    background-color: transparent;
    position: absolute;
    top: 0px;
    left: 2px;
}

.contact-item dd.radiobtn input+label {
    margin-left: 15px;
}

.contact-item dd .code-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    margin-bottom: 10px;
}

.contact-item dd .code-wrap span {
    display: inline-block;
}

.contact-item dd .code-wrap .input-code3 {
    width: 150px;
    max-width: 40%;
}

.contact-item dd .code-wrap .input-code4 {
    width: 200px;
    max-width: 50%;
}

.contact-item dd .code-wrap .hyphen {
    margin: 0 5px;
}

.contact-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 50px;
}

.contact-btns li {
    margin-left: 30px;
    margin-right: 30px;
}

.contact-btns li button {
    font-size: 16px;
}

@media (max-width: 1024px) {
    .contact-item dt,
    .contact-item dd {
        width: 100%;
        padding: 10px;
    }

    .contact-item dt {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .contact-item dd.radiobtn label {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .contact-btns {
        margin-top: 30px;
    }

    .contact-btns li {
        margin-top: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media (max-width: 599px) {
    .contact-item dd {
        padding-top: 0;
    }

    .contact-item dd.radiobtn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .contact-item dd.radiobtn label {
        margin-bottom: 20px;
    }

    .contact-item+.contact-item {
        margin-top: 10px;
    }

    .contact-btns li {
        margin-left: 5px;
        margin-right: 5px;
    }
}

/* ##### 見たまま編集画面 ##### */
[data-element-id] [data-ab-test-contents] {
    padding: 1.5em 0.2em 0.2em;
    border: 2px solid #8b008b;
    position: relative;
}

[data-element-id] [data-ab-test-contents]::before {
    content: "パターンA";
    width: 100%;
    display: block;
    padding: 0.5em 0.2em;
    font-size: 10px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: #8b008b;
    position: absolute;
    top: 0;
    left: 0;
}

[data-element-id] [data-ab-test-contents]+[data-ab-test-contents] {
    border: 2px solid #556b2f;
}

[data-element-id] [data-ab-test-contents]+[data-ab-test-contents]::before {
    content: "パターンB";
    background-color: #556b2f;
}

[data-element-id] header {
   position: relative;
    text-align: right;
    left: 0;
}

[data-element-id] header h1,
[data-element-id] .list-nav{
  text-align: left;
}

[data-element-id] nav {
    right: 0;
    position: relative;
    transition: none;
}

[data-element-id] .nav-btn.-app {
    display: block;
    padding: 2em 1em 1em;
    border: 2px solid green;
    position: relative;
}

[data-element-id] .nav-btn.-app::before {
    content: "スマホのみ";
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 10px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-element-id] .nav-btn.-app .nav-btn-inner {
    position: static;
}

[data-element-id] .nav-btn.-app a {
    color: white;
}


[data-element-id] .fead-cover::before {
    width: 0;
}

[data-element-id] .slider-01 [data-collection-list-content] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-y: scroll;
}

[data-element-id] .slider-01 [data-collection-list-content] .slider-item {
    width: 30%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 1%;
}

[data-element-id] .popup {
    max-width: 500px;
    display: block;
    margin: 30px auto;
    padding: 2em 1em 1em;
    border: 2px solid green;
    border-radius: 10px;
    background-color: white;
    position: relative;
}

[data-element-id] .popup::before {
    content: "公式アプリのポップアップです";
    width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 10px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-element-id] .popup .text {
    color: #5f3003;
}

[data-element-id] .list-inpage {
    -webkit-box-align: start;
    align-items: flex-start;
    -ms-flex-align: start;
}

[data-element-id] .list-inpage div[data-collection-filtered-content] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

@media (max-width: 1024px) {
    [data-element-id] nav {
        width: 65vw;
        margin-top: 80px;
        right: calc(-65vw + 80px);
    }

    [data-element-id] .content-wrap {
        padding-right: 80px;
    }
}

@media (max-width: 599px) {
    [data-element-id] nav {
        width: 100vw;
        right: -100vw;
    }

    [data-element-id] .content-wrap {
        padding-right: 0;
    }
}


/* 10/07 追記 */

@media only screen and (max-width: 599px) {
    .rising .hero-section-img {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: unset !important;
    }
}

/* news_blog_detail */
.detail-content-text h2 {
    margin-top: 50px;
    margin-bottom: 20px;
    padding: 0.5em;
    font-weight: bold;
    font-size: 22px;
    letter-spacing: 2px;
    border-bottom: 3px solid var(--color01);
}

.detail-content-text h3 {
    margin-top: 50px;
    margin-bottom: 20px;
    padding: 0.5em 1em;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    letter-spacing: 2px;
    background: var(--color01);
}

.detail-content-text h4 {
    margin-top: 50px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
    color: var(--color01);
    letter-spacing: 2px;
}
.detail-content-text ol {
    counter-reset: count 0;
}
.detail-content-text ol li {
    margin: 10px 0;
    padding-left: 20px;
    font-size: 16px;
    position: relative;
}
.detail-content-text ol li::before {
    content: counter(count) ". ";
    display: inline-block;
    counter-increment: count 1;
    color: var(--color01);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 0;
}
.detail-content-text ul li {
    margin: 10px 0;
    padding-left: 20px;
    font-size: 16px;
    position: relative;
}

.detail-content-text ul li::before {
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 50%;
    background: var(--color01);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 0;
}
.detail-content-text ol li marker {
    display: none;
}

.detail-content-text iframe[src*="youtube"] {
    height: auto;
    margin-top: 30px;

    aspect-ratio: 16 / 9;
}

.is-bggray .is-bggray .detail-content-text h2 {
    border-bottom: 3px solid var(--color01);
}

.is-bggray .detail-content-text h3 {
    color: var(--color01);
    background: #fff;
}

.is-bggray .detail-content-text h4 {
    color: #fff;
}
.is-bggray .detail-content-text ol {
    counter-reset: count 0;
}
.is-bggray .detail-content-text ol li::before {
    color: #fff;
}

.is-bggray .detail-content-text ul li::before {
    background: #fff;
}

.ttl-cmn02.sub:before {
    display: none;
}


.meta li::marker {
    color: transparent !important;
}

.meta li {
    margin-bottom: 10px;
}

.articledtl01 .ttl {
    margin-bottom: 50px;
}

.mti50 {
    margin-top: 50px !important;
}


/* 05/19 追記*/

.pti-0 {
    padding-top: 0px !important;
}

.mti-0 {
    margin-top: 0px !important;
}

.kijiwap.bloglist .dl {
    padding-bottom: 0px;
}

.mb20 {
    margin-bottom: 20px;
}

.bloglist .box h3,
.box-detail-content .box h3 {
    padding: 0 0px 10px 10px !important;
}

.mti-0 {
    margin-top: 0 !important;
}


.box-detail-content h3:first-child {
    margin-top: 0 !important;
}

.bloglist .box p,
.box-detail-content .box p {
    padding: 0px;
}

.my25 {
    margin: 25px 0px;
}

/* ##### パンくずリスト breadcrumbs ##### */
.breadcrumbs {
    padding: 30px 0;
    background-color: white;
}

.breadcrumbs-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
}

.breadcrumbs-list {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.breadcrumbs-list li {
    display: inline;
    font-size: 14px;
    letter-spacing: 1px;
}

.breadcrumbs-list li.breadcrumbs-home a,
.breadcrumbs-list li.breadcrumbs-prevpage a {
    font-weight: bold;
    color: var(--color01);
}

.breadcrumbs-list li+li::before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    margin: 0 10px 2px 5px;
    border-top: 1px solid var(--color01);
    border-right: 1px solid var(--color01);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media (max-width: 1024px) {
    .breadcrumbs {
        padding: 20px 0;
        font-size: 14px;
    }

    .breadcrumbs li+li::before {
        width: 8px;
        height: 8px;
        margin: 0 5px 1px;
    }
}

@media (max-width: 599px) {
    .breadcrumbs {
        padding: 15px 0;
        font-size: 12px;
    }

    .breadcrumbs li+li::before {
        width: 6px;
        height: 6px;
    }
}

/* ##### ページネーション pager ##### */
.pager {
    width: 100%;
    margin: 50px 0;
}

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

.pager-list li {
    width: 40px;
    height: 40px;
    margin: 0 10px;
}

.pager-list li a,
.pager-list li .now {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 5px;
    font-size: 20px;
    color: var(--color01);
    line-height: 1;
    border: 1px solid var(--color01);
    background-color: white;
    position: relative;
}
.pager-list li{
  border: solid 1px #fff;
}

.pager-list li a a:hover,
.pager-list li .now a:hover {
    color: inherit;
    background-color: var(--color01);
    opacity: 1;
}

.pager-list li a:focus,
.pager-list li .now:focus {
    outline: none;
}

.pager-list li a:hover,
.pager-list li .now {
    color: white;
    border: 1px solid var(--color01);
    background-color: var(--color01);
    opacity: 1;
}

.pager-list .arrow a::before {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    border-top: 2px solid var(--color01);
    border-right: 2px solid var(--color01);
}

.pager-list .arrow a:hover {
    color: white;
}

.pager-list .arrow a:hover::before {
    border-top: 2px solid white;
    border-right: 2px solid white;
}

.pager-list .arrow.-prev a::before {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.pager-list .arrow.-next a::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mockup {
    overflow: hidden;
    border-radius: 30px;
    position: relative;
}

.mockup .img {
    position: relative;
    z-index: 1;
}

.mockup .img02 {
    width: 95%;
    transform: translateX(-50%);
    position: absolute;
    top: 0;
    left: 50%;
}

@media (max-width: 1024px) {
    .mockup {
        border-radius: 25px;
    }
    .pager {
        margin: 30px 0;
    }

    .pager-list {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .pager-list li {
        margin: 0 5px;
    }
}

@media (max-width: 599px) {
    .mockup {
        border-radius: 45px;
    }
}

.line-area {
    margin-top: 50px;
}

.line-area a {
    overflow: hidden;
    border-radius: 30px;
}

.ac-box .ttl {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    font-size: 18px;
    border: solid 1px;
}

.ac-box .ic {
    margin-right: 10px;
    font-size: 30px;
}

.d-none-tb,
.d-none-sp {
    display: block;
}
.d-b-tb,
.d-b-sp {
    display: none;
}
@media (max-width: 1024px) {
    .d-b-tb {
        display: block;
    }
    .d-none-tb {
        display: none;
    }
}
@media (max-width: 599px) {
    .d-none-sp {
        display: none;
    }
    .d-b-sp {
        display: block;
    }
    .up-gapy-30>*:last-of-type{
      padding-bottom: 0;
    }
}

.uk-text-danger{
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
    font-weight: bold;
}


.l-clm__left{
  margin-bottom: 10px;
}

.h1-area{
  color: #fff;
  margin: 10px 0;
}

[data-element-id] .up-d-none {
    display: block;
    border: solid 4px black;
    position: relative;
}
[data-element-id] .up-d-none:after {
    content: "モバイル用";
    display: block;
    padding: 5px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: black;
}

[data-element-id] .up-sp-text {
    width: 100%;
    max-width: 375px;
    margin: auto;
}

[data-element-id] .hero-section.-lower .up-sp-text .hero-section-title {
    font-size: 26px;
}

[data-element-id] .up-sp-text .m-ttl .ja {
    font-size: 26px;
}

[data-element-id] .up-sp-text .title-04,
[data-element-id] .up-sp-text .title-01 .main,
[data-element-id] .up-sp-text .box-pickup-title {
    font-size: 34px;
}

[data-element-id] .up-sp-text .title-06 {
    font-size: 3.5vw;
}

[data-element-id] .up-sp-text .title-08 {
    font-size: 24px;
}

[data-element-id] .up-sp-text .title-09 {
    font-size: 20px;
}

[data-element-id] .up-sp-text .title-11 {
    font-size: 20px;
}

[data-element-id] .up-sp-text .title-02 {
    margin-bottom: 24px;
    font-size: 20px;
}

[data-element-id] .up-sp-text .title-03 {
    margin-bottom: 24px;
    font-size: 20px;
}

[data-element-id] .up-sp-text .title-05 {
    font-size: 32px;
}

[data-element-id] .up-sp-text .title-07 {
    font-size: 18px;
}

[data-element-id] .card.-pattern-01 .card-content .up-sp-text [class*=title] {
    font-size: 18px;
}

[data-element-id] .hero-section.-top .hero-catc .main {
    font-size: 24px;
}

[data-element-id] .hero-section.-top .hero-catc .sb {
    font-size: 18px;
}

[data-element-id] .card-img.-include-text .card-text .up-sp-text{
  font-size: 16px;
}

[data-element-id] .line-area .up-adb{
  position: relative;
}

.list-menu [data-hide-element]{
  width: 100%;
}

/* 2025/06/26 */
.schedule-list{
  display: flex;
  gap: 20px;
}

.schedule-list li {
  background-color: #f5f1ee;
  padding: 10px;
  position: relative;
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.schedule-list li:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: #f5f1ee;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  position: absolute;
  right: auto;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.schedule-list li:last-child:after {
  content: none;
}

@media(max-width:599px) {
.schedule-list{
  display: block;
}

.schedule-list li+li{
  margin-top: 20px;
}

.schedule-list li:after {
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  top: auto;
  bottom: -20px;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}
}

.list-new{
  width: fit-content;
  margin: 0 auto; 
}

.list-new li{
  padding-left: 1em;
  text-indent: -1em;
  text-align: left;
}

.list-new li::before{
  content: "●";
}

@media(max-width:599px) {
.list-new{
  gap: 0px;
}

.list-new li{
  width: 100%;
}    
}

.title-13{
  border-bottom: 1px solid;
  font-size: 1.2em;
  font-weight: bold;
  padding: 0.5em;
  margin-bottom: 0.5em;
  text-align: center;
}

.shaving_list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.shaving_list li {
  border: 1px solid;
  padding: 10px;
  position: relative;
  width: calc((100% - 80px) / 5);
}

.shaving_list li:after {
  content: "⁺";
  display: block;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
}

.shaving_list li:last-child:after {
  content: none;
}

.shaving_list li .txt {
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
}

.shaving_list li .txt .comment {
  font-size: 10px;
}

.is-bggray .shaving_list li{
    color: white;
}

@media(max-width:599px) {
.shaving_list{
  gap: 0px;
}

.shaving_list li {
  width: 100%;
}

.shaving_list li+li {
  margin-top: 20px;
}

.shaving_list li:after {
  top: auto;
  bottom: -40px;
  right: auto;
  left: 50%;
  transform: translate(-50%, 0);
}
}

/* 2025/07/01 */
.list-newnum{
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
}

.list-newnum li{
  width: calc( 100% / 3);
  background-color: #f5f1ee;
  padding: 20px;
}

.list-newnum li .num{
  font-size: 2em;
  font-weight: bold;
  color: #C8BBBE;
}

.list-newnum li .txt{
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.list-nav li.addtxt_item .addtxt{
  display: block;
  font-size: 60%;
}

.list-nav li.addtxt_item .addtxt::before{
  content: "-";
}

.icon-fa-brands-line.green{
  color: #01B900;
}

.nav-sns .list-sns.ver02 li {
  margin: 10px;
}

.snstxt{
  color: #dd7994;
  background-color: #fff;
  padding: 5px;
  font-weight: bold;
  position: relative;
}

.snstxt::before{
  content: "▼";
  color: #fff;
  position: absolute;
  bottom: -7.5px;
  left: 1em;
  z-index: 1;
}

@media (max-width: 1024px) {
.list-nav>li.addtxt_item>a{
  display: block;
}
}

@media(max-width:599px) {
.list-newnum li{
  width: 100%;
}

.nav-sns .list-sns.ver02 li a {
  width: 35px;
}

.snstxt{
  display: none;
}
}