html:not(.responsive) {
    width: 100%
}

:root {
    --padding-wrap: 4vw;
    --prim: #b48d30;
    --bg-bd: url("../img/shared/bg_bd.jpg") repeat center top;
    --bg1: url("../img/shared/bg1.jpg") repeat center top;
    --bg2: url("../img/shared/bg2.jpg") repeat center top;
    --bg3: url("../img/shared/bg3.jpg") repeat center top;
    --ft-iphone: #000
}

.bg1 {
    background: var(--bg1);
    color: #fff
}

.bg2 {
    background: var(--bg2)
}

.bg3 {
    background: var(--bg3)
}

.prim {
    color: var(--prim)
}

@font-face {
    font-family: "Noto Serif JP", serif;
    src: url("../font/NotoSerifJP-Regular.ttf");
    font-weight: 400;
    font-display: fallback
}

@font-face {
    font-family: "Noto Serif JP", serif;
    src: url("../font/NotoSerifJP-Medium.ttf");
    font-weight: 500;
    font-display: fallback
}

body {
    text-align: justify;
    min-width: inherit;
    min-height: inherit;
    max-height: 100%;
    background: var(--bg-bd);
    font-size: 14px;
    line-height: 2.25;
    letter-spacing: .05em;
    font-weight: 700;
    color: #000;
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}

#feed a:hover {
    text-decoration: underline
}

.print_map a:hover {
    text-decoration: underline
}

i {
    font-weight: normal
}

.text-center {
    text-align: center
}

.navOpen #pagetop {
    opacity: 0 !important;
    visibility: hidden !important
}

.word-br {
    word-break: break-all
}

.txt-center {
    text-align: center
}

.break-all {
    word-break: break-all
}

.copied {
    pointer-events: none
}

.rss-img:hover {
    opacity: .7
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {

    .btn-over img,
    .over-img img,
    img.over,
    img:not(.btn):not(.non-over),
    button img,
    .btn {
        opacity: 1;
        transform: none !important;
        -moz-transform: none !important;
        -webkit-transform: none !important;
        transition: opacity .3s ease;
        -moz-transition: opacity .3s ease;
        -webkit-transition: opacity .3s ease
    }

    .btn {
        transition: none !important;
        -moz-transition: none !important;
        -webkit-transition: none !important
    }

    .over-img img:hover,
    img.over:hover,
    a:hover img:not(.btn):not(.non-over),
    button:hover img {
        cursor: pointer;
        opacity: .8;
        transform: none !important;
        -moz-transform: none !important;
        -webkit-transform: none !important
    }

    .img-parallax img {
        height: auto !important
    }
}

body.navOpen,
body.navOpen *,
body.navOpen *:hover,
body.navOpen *:focus,
body.navOpen *:active {
    touch-action: none !important;
    pointer-events: none !important
}

body.navOpen .hamburger,
body.navOpen #navigation,
body.navOpen #navigation *,
body.navOpen #brandlist_menu * {
    touch-action: auto !important;
    pointer-events: visible !important
}

.navOpen {
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: none !important;
    pointer-events: none !important
}

.fnt-mincho {
    font-family: "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: normal
}

.fnt-shi {
    font-family: "Shippori Mincho", serif;
    font-weight: bold
}

.fnt-daw {
    font-family: "Dawning of a New Day", cursive
}

.fnt-meiryo {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}

.fnt-ami {
    font-family: "Amiri", serif
}

.fnt-gothic {
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}

.fnt-noto {
    font-family: "Noto Serif JP", serif
}

.fnt-san {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400
}

.fnt-zen {
    font-family: "Zen Old Mincho", serif;
    font-weight: 500
}

.fnt-jost {
    font-family: "Jost", sans-serif;
    font-weight: 400
}

.fr {
    float: right
}

.fl {
    float: left
}

.object-fit-cover {
    position: relative
}

.object-fit-cover img {
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%
}

.hs-copie {
    pointer-events: none
}

a {
    text-decoration: none;
    transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -webkit-transition: opacity .3s ease
}

a:hover {
    text-decoration: none
}

main {
    clear: both;
    width: 100%;
    position: relative
}

.ovh {
    overflow: hidden
}

header {
    position: relative
}

.cookies-link a:hover {
    text-decoration: none
}

.socialbuttons .fb-like>span {
    width: 100px !important
}

.socialbuttons .fb-like>span iframe {
    left: 50%;
    transform: translateX(-50%)
}

.socialbuttons {
    line-height: 10px;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    padding: 20px 0 0
}

.rss_img {
    transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -webkit-transition: opacity .3s ease
}

.rss_img:hover {
    opacity: .8
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: rgba(0, 0, 0, 0);
    cursor: pointer
}

.i-custom {
    cursor: pointer;
    display: block;
    position: relative;
    line-height: 50px;
    margin-bottom: 40px
}

.i-custom input {
    opacity: 0;
    position: absolute
}

.i-custom .ico {
    padding-left: 60px;
    position: relative;
    display: inline-block
}

.i-custom .ico:before,
.i-custom .ico:after {
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    transition: all .3s ease
}

.i-custom input[type=radio] .ico:before,
.i-custom input[type=radio] .ico:after {
    border-radius: 100%
}

.i-custom .ico:before {
    width: 50px;
    height: 50px;
    left: 0;
    background: #fff;
    border: 1px solid #333;
    box-sizing: border-box;
    border-radius: 8px
}

.i-custom .ico:after {
    background: url(../img/shared/check.png) no-repeat 0 0;
    background-size: 100%;
    width: 16px;
    height: 15px;
    margin: 0;
    position: absolute;
    top: 17px;
    left: 17px;
    opacity: 0
}

.i-custom:hover .ico:after {
    opacity: .5;
    transform: scale(1)
}

.i-custom input:checked~.ico:after {
    opacity: 1;
    transform: scale(1)
}

@media screen and (max-width: 999px) {
    .i-custom .ico {
        padding-left: 51px
    }

    .i-custom .ico:before {
        width: 36px;
        height: 36px
    }

    .i-custom {
        font-size: 16px;
        line-height: 36px;
        margin-bottom: 30px
    }

    .i-custom .ico:after {
        width: 12px;
        top: 12px;
        left: 12px
    }
}

@keyframes fadeInZoom {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(1.2)
    }
}

.fadeInZoom {
    animation-name: fadeInZoom;
    animation-duration: 8.5s;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -20%, 0);
        opacity: 0;
        transform: translate3d(0, -20%, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInDown {
    animation-name: fadeInDown
}

.fadeInUp {
    animation-name: fadeInUp
}

.animated {
    animation-duration: 1.2s;
    animation-fill-mode: both
}

.animated.infinite {
    animation-iteration-count: infinite
}

.fadeInLeftTop {
    animation-name: fadeInLeftTop
}

@keyframes fadeInLeftTop {
    from {
        opacity: 0;
        transform: translate3d(-20%, -20%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@media(prefers-reduced-motion) {
    .animated {
        animation: unset !important;
        transition: none !important
    }
}

@media only screen and (min-device-width: 375px)and (min-device-height: 812px)and (-webkit-device-pixel-ratio: 3)and (orientation: portrait) {
    footer:after {
        background: var(--ft-iphone);
        content: "";
        position: fixed;
        bottom: 0px;
        left: 0;
        right: 0px;
        height: 36px;
        z-index: 998
    }

    .ft_bnr_fixed {
        bottom: calc(env(safe-area-inset-bottom) - 0px) !important
    }

    #pagetop {
        bottom: calc(env(safe-area-inset-bottom) + 80px) !important
    }
}

@media only screen and (min-device-width: 414px)and (min-device-height: 896px)and (-webkit-device-pixel-ratio: 2)and (orientation: portrait) {
    footer:after {
        background: var(--ft-iphone);
        content: "";
        position: fixed;
        bottom: 0px;
        left: 0;
        right: 0px;
        height: 36px;
        z-index: 998
    }

    .ft_bnr_fixed {
        bottom: calc(env(safe-area-inset-bottom) - 0px) !important
    }

    #pagetop {
        bottom: calc(env(safe-area-inset-bottom) + 80px) !important
    }
}

@media only screen and (device-width: 414px)and (device-height: 896px)and (-webkit-device-pixel-ratio: 2)and (device-width: 375px)and (device-height: 812px)and (-webkit-device-pixel-ratio: 3)and (device-width: 414px)and (device-height: 896px)and (-webkit-device-pixel-ratio: 3) {
    footer:after {
        background: var(--ft-iphone);
        content: "";
        position: fixed;
        bottom: 0px;
        left: 0;
        right: 0px;
        height: 36px;
        z-index: 998
    }

    .ft_bnr_fixed {
        bottom: calc(env(safe-area-inset-bottom) - 0px) !important
    }

    #pagetop {
        bottom: calc(env(safe-area-inset-bottom) + 80px) !important
    }
}

@media screen and (min-width: 768px) {
    #footer:after {
        display: none !important
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    animation-name: fadeIn
}

@keyframes fadeInLeft {
    0% {
        -webkit-transform: translate3d(-20%, 0, 0);
        opacity: 0;
        transform: translate3d(-20%, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInRight {
    0% {
        -webkit-transform: translate3d(30%, 0, 0);
        opacity: 0;
        transform: translate3d(30%, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes heartBeat {
    0% {
        transform: scale(1)
    }

    14% {
        transform: scale(1.3)
    }

    28% {
        transform: scale(1)
    }

    42% {
        transform: scale(1.3)
    }

    70% {
        transform: scale(1)
    }
}

@keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3)
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }

    100% {
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes rubberBand {
    0% {
        transform: scaleX(1)
    }

    30% {
        transform: scale3d(1.25, 0.75, 1)
    }

    40% {
        transform: scale3d(0.75, 1.25, 1)
    }

    50% {
        transform: scale3d(1.15, 0.85, 1)
    }

    65% {
        transform: scale3d(0.95, 1.05, 1)
    }

    75% {
        transform: scale3d(1.05, 0.95, 1)
    }

    100% {
        transform: scaleX(1)
    }
}

.rubberBand {
    animation-name: rubberBand
}

.bounceIn {
    animation-duration: .75s;
    animation-duration: calc(var(--animate-duration)*.75);
    animation-name: bounceIn
}

.heartBeat {
    animation-duration: 1.3s;
    animation-duration: calc(var(--animate-duration)*1.3);
    animation-name: heartBeat;
    animation-timing-function: ease-in-out
}

.fadeInRight {
    animation-name: fadeInRight
}

.fadeInLeft {
    animation-name: fadeInLeft
}

.fadeInUp {
    animation-name: fadeInUp
}

.animated {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-duration: 1s;
    animation-fill-mode: both
}

.animated.infinite {
    animation-iteration-count: infinite
}

.animated.delay-1s {
    animation-delay: 1s
}

.animated.delay-2s {
    animation-delay: 2s
}

.animated.delay-3s {
    animation-delay: 3s
}

.animated.delay-4s {
    animation-delay: 4s
}

.animated.delay-5s {
    animation-delay: 5s
}

.animated.fast {
    animation-duration: .8s
}

.animated.faster {
    animation-duration: .5s
}

.animated.slow {
    animation-duration: 2s
}

.animated.slower {
    animation-duration: 3s
}

@media(prefers-reduced-motion) {
    .animated {
        -webkit-animation: unset !important;
        -webkit-transition: none !important;
        animation: unset !important;
        transition: none !important
    }
}

a {
    opacity: 1;
    transition: opacity .3s
}

a:hover {
    opacity: .8
}

.logo a:hover,
.logo2 a:hover {
    opacity: 1 !important
}

.box-parallax {
    position: relative
}

.img-parallax {
    clip: rect(0, auto, auto, 0);
    margin-bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}

.img-parallax img {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 0
}

.txt-vertical {
    cursor: vertical-text;
    writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: upright;
    word-wrap: break-word
}

.box_style1 {
    position: relative;
    overflow: hidden;
    display: inline-block
}

.box_style1::before {
    background: #1b1b1b;
    width: 10px;
    height: 0;
    transition: height .3s cubic-bezier(0.25, 0.1, 0.25, 1), width 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) .3s, left .3s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: 2
}

.box_style1[style*=visible]:before {
    height: 100%;
    width: 100%;
    left: 100%
}

.box_style1[style*=visible]>* {
    opacity: 1 !important;
    height: 100%
}

.box_style1_png {
    position: relative;
    overflow: hidden;
    display: inline-block
}

.box_style1_png::before {
    background: url("../img/index/sec3_img1.png") no-repeat left top;
    width: 20px;
    height: 20px;
    transition: height .3s cubic-bezier(0.25, 0.1, 0.25, 1), width 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) .3s, left .3s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: 2;
    filter: invert(50%) sepia(0%) saturate(208%) hue-rotate(245deg) brightness(109%) contrast(45%) brightness(0.3)
}

.box_style1_png[style*=visible]:before {
    height: 100%;
    width: 100%;
    left: 100%
}

.box_style1_png[style*=visible]>* {
    opacity: 1 !important;
    height: 100%
}

.wrap {
    padding: 0 var(--padding-wrap);
    position: relative
}

.not-scroll {
    overflow: hidden
}

.obj-cover {
    position: relative
}

.obj-cover img {
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    width: 100%
}

.is-invert #top>*:not(.logo) {
    opacity: 0
}

.is-invert #top>*:not(.logo, #belt) {
    filter: blur(30px)
}

.is-invert #top .logo {
    filter: invert(100%);
    z-index: 999;
    transition: filter 5000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2600ms
}

.is-invert.load_top #top>*:not(.logo) {
    opacity: 1;
    transition: opacity 5000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2600ms, filter 5000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2600ms
}

.is-invert.load_top #top>*:not(.logo, #belt) {
    filter: blur(0)
}

.is-invert.load_top #top .logo {
    filter: invert(0)
}

.img-shadow img {
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, .2392156863)
}

[data-scroll-zoom-wrap] {
    overflow: hidden
}

[data-scroll-zoom] {
    scale: 1.3;
    transition: 1s
}

.remodal-overlay {
    z-index: 99999999999
}

.remodal-wrapper {
    z-index: 9999999999999
}

.upper {
    text-transform: uppercase
}

.fwb {
    font-weight: bold
}

@media(max-width: 767px) {
    .txt-vertical-sp {
        cursor: vertical-text;
        writing-mode: vertical-rl;
        -o-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -moz-writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        text-orientation: upright;
        word-wrap: break-word
    }

    .hidden-sp {
        opacity: 0;
        visibility: hidden
    }

    img {
        width: 100%;
        height: auto
    }

    .pc {
        display: none
    }
}

.txt-shadow {
    text-shadow: 0 0 5px rgba(0, 0, 0, .5)
}

.nowrap {
    white-space: nowrap
}

.txt-right {
    text-align: right
}

@media(min-width: 768px) {
    .txt-vertical-pc {
        cursor: vertical-text;
        writing-mode: vertical-rl;
        -o-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -moz-writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        text-orientation: upright;
        word-wrap: break-word
    }

    .d-flex-pc {
        display: flex
    }

    .sp {
        display: none !important
    }

    .wrap {
        padding: 0;
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative
    }

    body {
        font-size: 16px
    }
}


.remodal2 {
    background: url(../img/shared/bg_bd.jpg) repeat;
    color: #000;
    text-align: center;
  }
  .remodal2 .bg {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    margin: 5vw 10%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    gap: 6vw;
  }
  
  .remodal2 h3 {
    --scale: 1.4;
  }
  
  .remodal2 .txt-center {
    color: #241200;
    font-weight: 500;
  }
  
  @media screen and (min-width: 768px) {
    .remodal2 .remodal-close {
      width: 58px;
      height: 29px;
      top: 57px;
      right: 50px;
    }
    .remodal2 .bg {
      margin: 65px auto 75px;
      width: 698px;
      height: 245px;
      flex-direction: row;
      justify-content: center;
      gap: 100px;
      text-align: left;
      box-sizing: border-box;
      padding-top: 33px;
    }
    .remodal2 h3 {
      margin-bottom: 30px;
    }
  }

.text_box{
	width:700px;
	margin:40px auto 40px auto;
	padding:20px 0;
    background: #FFF;
    box-shadow: 0px 0px 0px 6px #FFF;
    border: double 3px #000;
}
.text_box p.ttl{
	font-size:24px;
	margin-bottom: 10px;
	letter-spacing: 2px;
	text-align:center;
	line-height:40px;
	color:#000;
	font-weight: bold;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.text_box p.txt{
	text-align:center;
	font-size:16px;
	line-height:30px;
	color:#000;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
@media screen and (max-width: 768px) {
	
.text_box{
	width:95%;
	margin:20px auto 20px auto;
	padding:20px 0;
    background: #FFF;
    box-shadow: 0px 0px 0px 6px #FFF;
    border: double 3px #000;
}
.text_box p.ttl{
	font-size:20px;
	margin-bottom: 5px;
	letter-spacing: 2px;
	text-align:center;
	line-height:40px;
	color:#000;
	font-weight: bold;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.text_box p.txt{
	text-align:left;
	padding: 0 10px;
	font-size:15px;
	line-height:26px;
	color:#000;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
}