@charset "utf-8";

body,p,td,li, h5,h6 {
    font-family: "Noto Sans JP", "Roboto", sans-serif;
    font-optical-sizing: auto;
	font-weight: 400;
    font-style: normal;
	font-size:1rem;
	line-height:1.8em;
}
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
	line-height:1.5em;
}

.font-g {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
	font-weight: 400;
    font-style: normal;
}
.font-m {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


.set_color { color:#a97d56; }

.set_text { color: #efefef; }

.bold {
	font-weight:700;
}
.ex-bold {
    font-weight:800;
}
.libre-baskerville-regular {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
}
.libre-baskerville-bold {
    font-family: "Libre Baskerville", serif;
    font-weight: 700;
    font-style: normal;
}
.genkaimincho {
    font-family: genkaimincho, sans-serif;
    font-style: normal;
    font-weight: 800;
}

.container {
	max-width: 1164px;
}
@media (max-width: 1199.98px) {
    #main .container,
    #globalFooter .container {
        padding-right: calc(var(--bs-gutter-x) * 1.5);
        padding-left: calc(var(--bs-gutter-x) * 1.5);
    }
}


/* 文字サイズ
==================================================== */
h1 { font-size:1.5rem; }

@media (min-width: 576px) {
	h1 { font-size:1.8rem;letter-spacing:2px; }
}
@media (min-width: 768px) {
	h1 { font-size:1.8rem; }
}
@media (min-width: 1200px) {
	h1 { font-size:2rem;letter-spacing:2px; }
}
@media (min-width: 1400px) {
	h1 { font-size:2.2rem;letter-spacing:2px; }
}

@media (min-width: 768px) and (max-width: 1050.98px) {
	.top_square .top_text { font-size:0.8rem; }
}
@media (max-width: 767.98px) {
	.top_text { font-size:1rem; }
}

.fs-18px {
    font-size: clamp(1rem, 0.939rem + 0.26vw, 1.125rem);
}
.fs-20px {
    font-size: clamp(1rem, 0.877rem + 0.52vw, 1.25rem);
}
.fs-22px {
    font-size: clamp(1.125rem, 1.002rem + 0.52vw, 1.375rem);
}
.fs-38px {
    font-size: clamp(1.625rem, 1.352rem + 1.36vw, 2.375rem);
}


/* マージン、パディング
==================================================== */
.mt-40, .my-40 { margin-top:40px; }
.mb-40, .my-40 { margin-bottom:40px; }
.ms-40, .mx-40 { margin-left: 40px; }
.me-40, .mx-40 { margin-right: 40px; }
.pt-40, .py-40 { padding-top:40px; }
.pb-40, .py-40 { padding-bottom:40px; }
.ps-40, .px-40 { padding-left:40px; }
.pe-40, .px-40 { padding-right:40px; }
.mt-80, .my-80 { margin-top:80px; }
.mb-80, .my-80 { margin-bottom:80px; }
.ms-80, .mx-80 { margin-left:calc(80 / 1140 * 100vw); }
.me-80, .mx-80 { margin-right:calc(80 / 1140 * 100vw); }
.pt-80, .py-80 { padding-top:80px; }
.pb-80, .py-80 { padding-bottom:80px; }
.ps-80, .px-80 { padding-left:calc(80 / 1140 * 100vw); }
.pe-80, .px-80 { padding-right:calc(80 / 1140 * 100vw); }
.mt-110, .my-110 { margin-top:110px; }
.mb-110, .my-110 { margin-bottom:110px; }
.pt-110, .py-110 { padding-top:110px; }
.pb-110, .py-110 { padding-bottom:110px; }
.ps-110, .px-110 { padding-left: 110px; }
.pe-110, .px-110 { padding-right: 110px; }

@media (max-width: 767.98px) {
	.mt-40, .my-40, .mt-80, .my-80 { margin-top:30px; }
	.mb-40, .my-40, .mb-80, .my-80 { margin-bottom:30px; }
	.mt-110, .my-110 { margin-top:60px; }
	.mb-110, .my-110 { margin-bottom:60px; }
    .ms-40, .mx-40, .ms-80, .mx-80 { margin-left: 30px; }
    .me-40, .mx-40, .me-80, .mx-80 { margin-right: 30px; }
	.pt-40, .py-40, .pt-80, .py-80 { padding-top:30px; }
	.pb-40, .py-40, .pb-80, .py-80 { padding-bottom:30px; }
    .ps-40, .px-40, .ps-80, .px-80 { padding-left:30px; }
    .pe-40, .px-40, .pe-80, .px-80 { padding-right:30px; }
	.pt-110, .py-110 { padding-top:60px; }
	.pb-110, .py-110 { padding-bottom:60px; }
	.ps-110, .px-110 { padding-left:40px; }
	.pe-110, .px-110 { padding-right:40px; }
}

.lh-1 { line-height: 1em; }
.lh-2 { line-height: 2em; }
.lh-3 { line-height: 3em; }


/* リンク
==================================================== */
a {
    color: #a97d56;
}
#globalFooter a {
    color: #FFF;
}
a.fax {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}
@media (min-width: 992px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

/* Loading
==================================================== */
#loading {
    width: 100svw;
    height: 100svh;
    transition: all 1s;
    background-color: #060b0f;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
}
#loading.is-active {
    opacity: 0;
    visibility: hidden;
}
#loadingAnimation {
    width: 100svw;
    height: 100svh;
    transition: all 1s;
    background-color: #c5171e;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}
#loadingAnimation.is-active {
    opacity: 1;
    visibility: visible;
}


/* Header
==================================================== */
:root {
    --header-height:50px;
}
@media (min-width: 992px) {
    :root {
        --header-height:100px;
    }
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}
body {
    color: #322F30;
    padding-top: var(--header-height);
}
body.page-index {
    background-color: #322F30;
}
#globalHeader {}
#globalHeader .navbar {
    height: var(--header-height);
    transition: all .3s;
}
#globalHeader .navbar-brand {
    width: calc(330 / 750 * 100vw);
    max-width: 330px;
    transition: all .3s;
}
#globalHeader .navbar-icons {
    transition: all .3s;
}
#globalHeader .navbar-tel {
    width: 18px;
}
#globalHeader .navbar-mail {
    width: 28px;
}
#globalHeader .navbar-cart {
    width: 30px;
}
#globalHeader .navbar-toggler {
    width: 30px;
}
@media (min-width: 992px) {
    body.page-index:not(.is-active) {
        padding-top: 170px;
    }
    body.page-index:not(.is-active) #globalHeader .navbar {
        height: 170px;
    }
    body.page-index:not(.is-active) #globalHeader .navbar-icons {
        align-self: flex-start;
        padding-top: 30px;
    }
    #globalHeader .navbar-brand {
        width: calc(294 / 1140 * 100vw);
        max-width: 294px;
    }
    #globalHeader .navbar-tel {
        width: 35px;
    }
    #globalHeader .navbar-mail {
        width: 47px;
    }
    #globalHeader .navbar-cart {
        width: 48px;
    }
    #globalHeader .navbar-toggler {
        width: 46px;
    }
}

#globalHeader .offcanvas {
    --bs-offcanvas-color:#efefef;
}
#globalHeader .btn-close {
    --bs-btn-close-color:#efefef;
    --bs-btn-close-opacity:1;
}
#globalHeader .offcanvas .navbar-nav {
    --bs-nav-link-color:#efefef;
    --bs-nav-link-hover-color:rgba(255,255,255,0.6);
}

/* Main
==================================================== */
body.page-index #wrapper.is-show #main {
    padding-top: var(--header-height);
}

/* Footer
==================================================== */
#globalFooter {}


/* トップへ戻る
==================================================== */
a.page-top {
	position:fixed;
	bottom:60px;
	right:10px;
	opacity:0.5;
	color:#0064f2;
	display:block;
}
a.page-top:hover {
	opacity:0.7;
}


/* TOP page
==================================================== */
#firstview {}
#firstview__img {
    height: 100svh;
}

/* 縦書き */
.tategaki {
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    display: inline-block;
    hanging-punctuation: allow-end;
}

/* 横書き */
.yokogaki {
    -webkit-writing-mode: horizontal-tb;
    -moz-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    display: inline-block;
    
}

/* タイピング */
.typing {
    font-size:clamp(1.875rem, 1.197rem + 3.39vw, 4.375rem);
    /*filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));*/
}
.typing-effect {
    --letters:5;
    --delay:1s;
    display: block;
    height: calc(var(--letters) * 1em);
    white-space: nowrap;
    overflow: hidden;
    visibility: hidden;
}
html.wf-active .carousel-item.active .typing-effect,
html.wf-active #loadingAnimation.is-active .typing-effect {
    animation: typing calc(var(--letters) * 0.07s) forwards steps(var(--letters)) var(--delay);
}
@keyframes typing {
    from {
        height: 0;
        visibility: hidden;
    }
    to {
        height: calc(var(--letters) * 1em);
        visibility: visible;
    }
}

/* 横書きタイピング */
/* タイピング親 */
.typing-yokogaki {
    font-size: clamp(1.875rem, 1.197rem + 3.39vw, 4.375rem);
    display: inline-block;
    line-height: 1.4;
    text-align: left;         /* 文字は左揃え */
    position: absolute;        /* 右下固定 */
    bottom: 2rem;
    right: 2rem;
    width: 45%;            /* 折り返し幅 */
    white-space: normal;       /* 折り返し有効 */
}

/* 各行の span */
.typing-effect-x {
    display: block;            /* 行ごとに改行 */
    width: 0;                  /* タイピング開始時は幅0 */
    overflow: hidden;
    white-space: nowrap;
    box-sizing: content-box;
    text-align: left;          /* 左揃え */
}

/* タイピングアニメーション */
html.wf-active .carousel-item.active .typing-effect-x {
    animation: typing-x 0.7s forwards steps(var(--letters)) var(--delay);
}

@keyframes typing-x {
    from { width: 0; }
    to   { width: 100%; }       /* span 内の文字全部を表示 */
}

/* スマホ横位置 */
@media (orientation: landscape) and (max-width: 991.98px) {
    #firstview .logo {
        width: 150px;
    }
    #firstview .typing {
        font-size: 1.25rem;
    }
}


.line {
  width: 100%;
  height: 4em;
  display: block;
  position: absolute;
  overflow: hidden;
  left: 25px;
  bottom: 0;
  width: 10px;
}
.line:before {
  content: '';
  height: 100%;
  border-left: solid 1px #000;
  position: absolute;
  -webkit-animation: wrap_on 1s ease-in-out 1.5s forwards;
          animation: wrap_on 1s ease-in-out 1.5s forwards;
}
.line:after {
  content: '';
  height: 100%;
  border-left: solid 1px #fff;
  position: absolute;
  z-index: 1;
  -webkit-animation: scroll_border 2.5s ease-in-out 2.5s infinite;
          animation: scroll_border 2.5s ease-in-out 2.5s infinite;
}
@-webkit-keyframes scroll_border {
  0%,
  100%,
  52% {
    top: 0;
    opacity: 1;
  }
  25% {
    top: 100%;
    opacity: 1;
  }
  26% {
    top: 100%;
    opacity: 0;
  }
  27% {
    top: -100%;
    opacity: 0;
  }
}
@keyframes scroll_border {
  0%,
  100%,
  52% {
    top: 0;
    opacity: 1;
  }
  25% {
    top: 100%;
    opacity: 1;
  }
  26% {
    top: 100%;
    opacity: 0;
  }
  27% {
    top: -100%;
    opacity: 0;
  }
}

/* テキスト表示アニメーション */
.animeTitle {
    overflow: hidden;
    transform: translate(-100%, 0);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
    transition-delay: 1s;
}
.animeTitle span {
    display: block;
    transform: translate(100%, 0);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
    transition-delay: 1s;
}
.animeTitle.is-show,
.animeTitle.is-show span {
    transform: translate(0, 0);
}
.animeSentence {
    overflow: hidden;
    transform: translate(-100%, 0);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
    transition-delay: 1s;
}
.animeSentence span {
    display: block;
    transform: translate(100%, 0);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
    transition-delay: 1s;
}
.animeSentence.is-show,
.animeSentence.is-show span {
    transform: translate(0, 0);
}

/* パララックス */
.parallax {
    width: 100%;
    min-height: 35vh;
    overflow: hidden;
    position: relative;
}
.parallax .parallax__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
}
.parallax .parallax__img .parallax__img--photo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    object-position: ;
}

/* ボーダーアニメーション */
.border-anim {
    position: relative;
    padding-bottom: 10px;
    --border-anim-color:#a97d56;
}
.border-anim.is-show::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: solid 1px var(--border-anim-color);
    animation-name: borderAnim;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    animation-delay: 1.8s;
}
@keyframes borderAnim {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}

/* 矢印 */
.arrow {
    display: inline-block;
    width: 1.375em !important;
    height: 0.25em !important;
    margin-left: 0.2em;

    -webkit-mask-image: url(../img/common/arrow.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    mask-image: url(../img/common/arrow.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    /*変更したい色をここに書く*/
    background-color: #040000;
}

/* ボタン */
.btn-danger {
    --bs-btn-bg: #851d21;
    --bs-btn-border-color: #851d21;
    --bs-btn-disabled-bg: #851d21;
    --bs-btn-disabled-border-color: #851d21;
}
.btn-lg {
    --bs-btn-font-size:1.5rem;
    --bs-btn-padding-y:0.7rem;
}


/* 1枚画像の横スクロール */
@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
}
.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
}
.scroll-infinity__list--left {
    animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
    width: auto;
    height: 130px;
}
.scroll-infinity__item>img {
    width: auto;
    height: 100%;
}
@keyframes infinity-scroll-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}
.scroll-infinity__list--right{
    animation :infinity-scroll-right 80s infinite linear 0.5s both;
}
@media (min-width: 768px) {
    .scroll-infinity__item {
        height: 250px;
    }
}


/* 下層ページ
==================================================== */
#pageHeader {
}
.pageTitle {
}
.pageTitle span {
}
.pageTitle__en {
}
.pageTitle__ja {
}


/* Swiper
==================================================== */
/* スライダーのwrapper */
.infinite-slider .swiper-wrapper {
    transition-timing-function: linear;
}
/* スライド */
.infinite-slider .swiper-slide {
    width: 358px !important;
    height: auto !important;
}
@media (min-width: 768px) {
    .infinite-slider .swiper-slide {
        width: 494px !important;
    }
}
#firstview .infinite-slider .swiper-slide {
    width: 80vw !important;
    max-width: 324px !important;
}
#firstview .infinite-slider .swiper-slide {
    width: 80vw !important;
    max-width: 324px !important;
}
.item-slider .swiper-slide {
    width: 240px !important;
    height: auto !important;
    margin-right: 20px;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

/* inview
==================================================== */
.fadeIn {
    opacity: 0;
}
.fadeIn.is-show {
    animation-name:fadeInAnime;
    animation-duration:.8s;
    animation-fill-mode:forwards;
    animation-timing-function:ease;
    animation-delay: 1.2s;
}
@keyframes fadeInAnime{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeUp {
    opacity: 0;
}
.fadeUp.is-show {
    animation-name:fadeUpAnime;
    animation-duration:.8s;
    animation-fill-mode:forwards;
    animation-timing-function:ease-out;
    animation-delay: 1.2s;
}
@keyframes fadeUpAnime{
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Q&A
==================================================== */
.accordion {
    --bs-accordion-color:#153373;
    --bs-accordion-btn-bg:transparent;
    --bs-accordion-bg:transparent;
    --bs-accordion-border-color:#153373;
    --bs-accordion-btn-color:#153373;
    --bs-accordion-btn-icon-width:2rem;
    --bs-accordion-active-bg:transparent;
    --bs-accordion-btn-padding-y:1.5rem;
}
.accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzE1MzM3MyIgY2xhc3M9ImJpIGJpLXBsdXMtbGciIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTggMmEuNS41IDAgMCAxIC41LjV2NWg1YS41LjUgMCAwIDEgMCAxaC01djVhLjUuNSAwIDAgMS0xIDB2LTVoLTVhLjUuNSAwIDAgMSAwLTFoNXYtNUEuNS41IDAgMCAxIDggMiIvPg0KPC9zdmc+");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzE1MzM3MyIgY2xhc3M9ImJpIGJpLWRhc2gtbGciIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTIgOGEuNS41IDAgMCAxIC41LS41aDExYS41LjUgMCAwIDEgMCAxaC0xMUEuNS41IDAgMCAxIDIgOCIvPg0KPC9zdmc+");
}
.accordion-button:focus {
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    box-shadow: none;
}


/* メディアクエリ
==================================================== */
/*
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
*/
@media (min-width: 576px) {}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {}


/*// X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {}

/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {}

/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {}

/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {}

/*// X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {}