/* Scss Document */

html:not(.responsive) {
    min-width: 1100px;
    /* viewport */
}


/*=============================================
 * body
 *=============================================*/

body {
    color: #bbbbbb;
    font-family: 'Noto Serif JP', serif;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0.02em;
    min-width: inherit;
    min-height: inherit;
    max-height: 100%;
    background: url("../img/shared/bg.jpg");
    font-weight: 300;
}

@media screen and (min-width: 767px) {
    body {
        font-size: 16px;
        line-height: 32px;
        letter-spacing: 1.5px;
    }
}


/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/

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

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

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

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

.fnt-notos {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}

.fnt-shi {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 500;
}

.fnt-geo {
    font-family: 'Georgia', "游明朝", YuMincho, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body.navopen {
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

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

body.navopen .hamburger,
body.navopen .menu-toggle,
body.navopen .menu-toggle *,
body.navopen .remodal-is-opened,
body.navopen .remodal-is-opened * {
    pointer-events: visible !important;
    -ms-touch-action: auto !important;
    touch-action: auto !important;
}

.remodal-is-locked body.navopen,
.remodal-is-locked body.navopen *,
.remodal-is-locked body.navopen *:hover,
.remodal-is-locked body.navopen *:focus,
.remodal-is-locked body.navopen *:active {
    pointer-events: visible !important;
    -ms-touch-action: auto !important;
    touch-action: auto !important;
}

.remodal-is-locked .remodal-is-opened,
.remodal-is-locked .remodal-is-opened * {
    pointer-events: visible !important;
    -ms-touch-action: auto !important;
    touch-action: auto !important;
}


/*=============================================
 * <main>
 *=============================================*/

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


/*=============================================
 * header header header header header header
 *=============================================*/

header {
    position: relative;
    z-index: 99;
    width: 100%;
}

header .wrap {
    padding: 0;
}

header .logo {
    width: 60%;
    max-width: 300px;
    margin: 0 auto 5%;
    z-index: 10;
}

header .logo img {
    opacity: 1 !important;
}

header h1 {
    font-size: 10px;
    line-height: 1.4;
    z-index: 10;
    padding-top: 10px;
    padding-left: 5%;
    color: #7a7373;
    width: 80%;
    margin-bottom: 10vw;
}

#keyvisual {
    position: relative;
    width: 100%;
}

header .menu-toggle {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url("../img/shared/bg_menu.jpg");
    background-position: center top;
    background-repeat: repeat;
    transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    z-index: 11;
    overflow: auto;
    text-align: center;
}

.navopen header .menu-toggle {
    opacity: 1;
    visibility: visible;
}

header .menu-toggle .nav {
    list-style-type: none;
    list-style-position: outside;
    text-align: center;
    padding: 0vw 0 2vw;
    max-width: 310px;
    min-width: 300px;
    margin: 0 auto;
}

.btn-fix-right {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 180px;
    right: 0;
    z-index: 88;
}

.btn-fix-right p+p {
    margin-top: 20px;
    text-align: center;
}

.hamburger {
    position: fixed;
    top: 0;
    right: 0;
    width: 55px;
    height: 69px;
    opacity: 1;
    visibility: visible;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    z-index: 456;
}

.hamburger-inner {
    background-image: url("../img/shared/menu_btn.png");
    background-color: #000000;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    height: 69px;
}

.navopen .hamburger-inner {
    background-position: center bottom;
    background-color: #000!important;
}

.nav-outside {
    text-align: center;
}

.header-nav {
    padding-top: 20vw;
    padding-bottom: 15vw;
}



.nav li {
    color: #7a7373;
    font-size: 16px;
    padding: 15px 0;
}

.nav li span {
    font-size: 22px;
    font-family: 'Georgia', 'Lucida Grande', 'sans-serif';
    display: block;
    color: #ddd;
    position: relative;
    letter-spacing: 2.5px;
    line-height: 1;
}
.nav-fixed .nav li span {
	 color: #dddddd;
}

.nav li span::before {
    content: "";
    background-color: #7a7373;
    width: 55px;
    position: absolute;
    top: -7px;
    right: 0;
    left: 0;
    margin: 0 auto;
    height: 1px;
    display: none;
}

.nav li a:hover span::before,
.nav li a.active span::before {
    display: block;
}

.nav-fixed .nav li a:hover span::before, .nav-fixed .nav li a.active span::before {
	display: none;
}

.nav li a:hover span,
.nav li a.active span {
    color: #7a7373;
}

.nav-fixed .nav li a span {
    color: #737373;
}

.nav-fixed .nav li a:hover span,
.nav-fixed .nav li a.active span {
    color: #dddddd;
}


.header-nav .btn-tel,
.header-nav .ico-line {
    display: none;
}

.header-nav .nav-btn .icon-ins {
    width: 30px;
    margin: 0 auto;
}

.nav-btn {
    padding-top: 15px;
}

.nav-fixed {
    visibllelity: hidden;
    height :0;
    pointer-event : none;
}

@media screen and (min-width: 767px) {
    header h1 {
        font-size: 12px;
        line-height: 1.4;
        z-index: 10;
        padding-top: 22px;
        padding-left: 50px;
        color: #7a7373;
        width: auto;
        margin-bottom: 11px;
    }
    .nav-fixed {
        background: url("../img/shared/bg_fix.jpg");
        display: block;
        opacity: 0;
        visibility: hidden;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 88;
		height: 78px;
    }

		.nav li span {
			color: #737373;
		}
		.nav-fixed .nav li span {
			 color: #dddddd;
		}
	
    .has-nav .nav-fixed {
        opacity: 1;
        visibility: visible;
    }
    .nav-fixed .col-r,
    .nav-fixed .nav {
        display: flex;
    }
    header .menu-toggle .nav {
        max-width: 100%;
        min-width: 260px;
        padding: 0 0 32px;
    }
    .nav li {
        letter-spacing: 2px;
        color: #7a7373;
        line-height: 1;
        text-align: center;
        font-size: 13px;
        padding: 22px 10px;
    }
    .nav li:first-child {
        padding-right: 0;
    }
    .nav li span {
        font-size: 18px;
        font-family: 'Georgia', 'Lucida Grande', 'sans-serif';
        display: block;
        color: #7a7373;
        position: relative;
    }
    .has-nav .nav li {
        padding: 22px 25px 22px 21px;
    }
    .has-nav .nav li:first-child {
        padding-left: 0;
    }
    .has-nav .nav li:last-child {
        padding-right: 0;
        padding-left: 8px;
    }
    .btn-tel {
        text-align: center;
        color: #ddd;
    }
    .btn-tel dt {
        font-size: 14px;
        line-height: 1;
    }
    .btn-tel dd {
        font-size: 30px;
        background: url(../img/shared/icon_tel.png) no-repeat 18px 8px;
        font-weight: bold;
        letter-spacing: 2px;
        padding-left: 34px;
    }
    .nav-fixed .btn-tel {
        padding-top: 15px;
        border-top: none;
    }
    .has-nav .btn-fix-right {
        opacity: 1;
        visibility: visible;
    }
    .hamburger {
        display: none;
    }
    .navopen header .menu-toggle {
        opacity: 0;
        visibility: hidden;
    }
    header .menu-toggle {
        position: relative;
        width: 285px;
        right: auto;
        left: auto;
        top: auto;
        opacity: 1;
        visibility: visible;
        bottom: auto;
        background: none;
        overflow: hidden;
        margin: 0 auto;
    }
    .header-nav {
        padding-top: 0;
		padding-bottom: 0;
    }
    .nav li span::before {
        width: 34px;
    }
    .header-nav .nav-outside .nav li {
        padding: 14px 0 13px;
    }
    .header-nav .nav-outside li a {
        font-size: 13px;
        color: #dddddd;
    }
	
	.header-nav .nav-outside li a:hover,
	.header-nav .nav-outside li a.active {
		color: #7a7373;
	}
	
    .header-nav .nav-outside li span {
        font-size: 18px;
        font-family: 'Georgia', 'Lucida Grande', 'sans-serif';
        display: block;
        position: relative;
        padding-bottom: 4px;
        letter-spacing: 3.5px;
		color: #dddddd;
    }
    .header-r {
        position: absolute;
        width: 285px;
        right: 0;
        top: 72px;
    }
    header .logo {
        width: 284px;
        margin: 0 auto 27px;
    }
    .header-nav .btn-tel,
    .header-nav .ico-line {
        display: block;
    }
    .btn-tel {
        border-top: 1px solid #74726f;
        width: 257px;
        margin: 0 auto;
        padding: 13px 0 17px;
    }
    .nav-btn {
        width: 259px;
        margin: 0 auto;
        border-top: 1px solid #74726f;
        padding: 0px 0 0px;
    }
    .nav-btn .ico-line {
        display: block;
        font-size: 16px;
        padding: 11px 0 9px;
        border-bottom: 1px solid #74726f;
        margin-bottom: 34px;
        text-align: left;
    }
    .nav-btn .ico-line a {
        display: block;
        position: relative;
        font-weight: bold;
        color: #dddddd;
        padding-left: 57px;
        letter-spacing: 3px;
    }
    .nav-btn .ico-line a:hover {
        opacity: .7;
    }
    .nav-btn .ico-line a::before {
        content: "";
        background: url("../img/shared/icon_cal.png") no-repeat top center;
        width: 27px;
        height: 25px;
        position: absolute;
        top: 0;
        left: 21px;
    }
    .nav-btn .ico-line a::after {
        content: "";
        background: url("../img/shared/arrow02.png") no-repeat top center;
        width: 11px;
        height: 15px;
        position: absolute;
        top: 7px;
        right: 13px;
    }
    .nav-btn .icon-ins {
        margin: 0 auto;
    }
    .header-nav .nav-btn .icon-ins {
        width: 34px;
    }
}


@media only screen and (max-width: 1100px) and (min-width: 768px)  {
    .header-r {
        right: -1vw;
    }
}
@media screen and (min-width: 1100px) {

}
@media screen and (min-width: 1200px) {
    .header-r {
        right: -7vw;
    }
}

@media screen and (min-width: 1300px) {
    .header-r {
        right: -10vw;
    }
}
@media screen and (min-width: 1400px) {
    .header-r {
        right: -12vw;
    }
}
@media screen and (min-width: 1500px) {
    .header-r {
        right: -13vw;
    }
}

@media screen and (min-width: 1600px) {
    .header-r {
        right: -14vw;
    }
}
@media screen and (min-width: 1700px) {
    .header-r {
        right: -17vw;
    }
}
@media screen and (min-width: 1800px) {
    .header-r {
        right: -19vw;
    }
}
/*=============================================
 * <footer>
 *=============================================*/

.copied {
    pointer-events: none;
}

footer {
    padding: 10vw 0 18vw;
    position: relative;
    z-index: 9;
    background-color: #141312;
}

footer .sns-ft {
    padding: 6vw 0 8vw;
}

footer .cookies-link {
    text-align: center;
    font-size: 12px;
}

footer .cookies-link a {
    border-bottom: 1px solid;
}

footer address {
    font-size: 12px;
    line-height: 24px;
}

#pagetop {
    right: 5px;
    bottom: 18vw;
    width: 45px;
}

.navopen #pagetop {
    opacity: 0;
}

@media only screen and (min-width: 767px) {
    footer {
        padding: 88px 0 54px 0;
    }
    footer .sns-ft {
        padding: 18px 0 0;
    }
    footer .cookies-link {
        text-align: center;
        font-size: 15.5px;
    }
    footer .cookies-link a {
        border-bottom: 1px solid;
        transition: all 0.3s ease;
    }
    footer .cookies-link a:hover {
        border-bottom: 1px solid rgba(255, 255, 255, 0);
    }
    footer address {
        font-size: 12.5px;
        line-height: 20px;
        letter-spacing: 1.4px;
        padding: 4px 0 1px;
    }
    #pagetop {
        right: 10px;
        bottom: 10px !important;
        width: 58px;
    }
}


/*====================== ft-fixed ====================== */

#ft-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
	opacity: 1;
	visibility: visible;
    z-index: 98;
    color: #000;
    width: 100%;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
}

#ft-fixed ul {
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    background: url("../img/shared/bg_fix.jpg");
    position: relative;
    z-index: 10;
    display: flex;
}

#ft-fixed ul li {
    position: relative;
    cursor: pointer;
}

#ft-fixed ul li::before {
    content: "";
    opacity: 0;
    visibility: 0;
    background-color: #615f5c;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0px;
    bottom: 5px;
    left: 0;
    z-index: 2;
}

#ft-fixed ul li+li::before {
    opacity: 1;
    visibility: visible;
}

#ft-fixed ul li .is-active:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: url("../img/shared/fix_sp_mn_on.jpg") no-repeat center;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}


/* iPhone X */

@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: #fff;
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
        z-index: 99;
    }
    #ft_fixed {
        bottom: calc(env(safe-area-inset-bottom) - 0px);
    }
    #pagetop {
        bottom: calc(env(safe-area-inset-bottom) + 90px);
    }
}


/* iPhone XR */

@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: #fff;
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
        z-index: 99;
    }
    #ft_fixed {
        bottom: calc(env(safe-area-inset-bottom) - 0px);
    }
    #pagetop {
        bottom: calc(env(safe-area-inset-bottom) + 90px);
    }
}


/* IPAD*/

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    footer:after {
        background: none;
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
        z-index: 99;
    }
}

@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
    footer:after {
        background: none;
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
        z-index: 99;
    }
}


/* IPAD AIR*/

@media all and (device-width: 820px) and (device-height: 1180px) and (orientation:portrait) {
    footer:after {
        background: none;
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
        z-index: 99;
    }
}

@media all and (device-width: 820px) and (device-height: 1180px)and (orientation:landscape) {
    footer:after {
        background: none;
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
        z-index: 99;
    }
}


/* iPhone 11 */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    footer:after {
        background: url(../img/shared/bg_fix.jpg);
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
        z-index: 99;
    }
	#ft-fixed {
		bottom: 10px;
	}
    #ft_fixed {
        bottom: calc(env(safe-area-inset-bottom) - 10px);
    }
    #pagetop {
        bottom: calc(env(safe-area-inset-bottom) + 90px);
    }
}

@media screen and (min-width: 767px) {
    #ft-fixed {
        opacity: 0;
        visibility: hidden;
    }
}


/*=============================================
 * style custom
 *=============================================*/

.bg-parallax {
    position: relative;
    z-index: 0;
}

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

.img-parallax img {
    width: 100% !important;
    height: 100vh !important;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    object-fit: cover;
    z-index: 0;
    transform: translateZ(0);
}

.slick-dots {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    width: 100%;
}

.slick-dots li {
    width: 10px;
    height: 10px;
    margin: 0 8px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.slick-dots li button {
    width: 100%;
    height: 100%;
    line-height: 0;
    font-size: 0;
    background: none;
    border: 1px solid #514f4e;
    background-color: #514f4e;
    border-radius: 50%;
    cursor: pointer;
}

.slick-dots li.slick-active button {
    background: #fff;
    border: 1px solid #fff;
}

.sp {
    display: block;
}

.pc {
    display: none;
}

@media screen and (min-width: 768px) {
    .sp {
        display: none;
    }
    .pc {
        display: block;
    }
    .slick-dots li {
        width: 11px;
        height: 11px;
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.animated {
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

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


.botan1 a {
   width: 400px;
   margin: 20px auto 20px auto;
   padding: 10px 0;
   display: block;
   color: #fff;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
   text-align: center;
   text-decoration: none;
   font-size: 18px;
   background-color: #7f1010;
   border-bottom: 2px solid #4A4A4A;
   box-sizing: border-box;
   font-weight: bold;
}

@media (max-width: 768px) {
	.botan1 a {
   width: 95%;
   margin: 20px auto 20px auto;
   padding: 10px 0;
   display: block;
   color: #fff;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
   text-align: center;
   text-decoration: none;
   font-size: 18px;
   background-color: #7f1010;
   border-bottom: 2px solid #4A4A4A;
   box-sizing: border-box;
   font-weight: bold;
}
	}