/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap');

@font-face {
    font-family: Helvetica;
    src: url('../fonts/Helvetica.woff2') format('woff2'),
        url('../fonts/Helvetica.woff') format('woff'),
        url('../fonts/Helvetica.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: A1MinchoStd;
    src: url('../fonts/A1MinchoStd-Bold-AlphaNum.woff2') format('woff2'),
        url('../fonts/A1MinchoStd-Bold-AlphaNum.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'mincho_stdbold';
    src: url('../fonts/A-OTF-A1MingChaoStd-Bold.woff2') format('woff2'),
         url('../fonts/A-OTF-A1MingChaoStd-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




* {
    -webkit-text-size-adjust: none !important; 
}


body {
	font-family: 'mincho_stdbold', serif;
	font-size: 14px;
	letter-spacing: 6px;
	
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'mincho_stdbold', serif;
	font-weight: 200;
}

h1 {
    color: #96241D;
    font-weight: 400;
    font-size: 3.5rem;
    letter-spacing: 10px;
    line-height: 3.5rem;
}

a:hover {
	color: #842C16;
}



#content p {
	line-height: 30px;
}

div#header-wrap {
    background: url('../img/jikon_layout_header_bg.jpg');
    background-position: top right;
	position: fixed !important;
  	top: 0;
	transition: top 0.7s;
    background-repeat: no-repeat;
    background-size: cover;
}

div#header-wrap > .container {
    padding-top: 0px;
    padding-bottom: 20px;
}

div#lang-switch, div#lang-switch * {
	font-family: 'Helvetica', serif;
	color: #1e1e1e;
    font-size: 12px;
    letter-spacing: 2px;
}




.xs-text {
	font-size: 9px;
	font-weight: 100;
	letter-spacing: 1px;
}

.helvetica {
	font-family: 'Helvetica', serif;
}



.menu-link {
	font-family: 'mincho_stdbold', serif;
    text-transform: none;
    color: #1e1e1e;
}


a.menu-link > div:nth-child(2) {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 6px;
}

.menu-item:hover > .menu-link, .menu-item.current > .menu-link {
    color: #842C16;
}


#header {
	border: none;
}

.header-row {
    align-items: flex-end;
}


.header-misc {
    margin-bottom: 20px;
}

.header-misc-icon > a {
    color: #842C16;
}

.header-misc-icon > a:hover {
    color: #1e1e1e;
}

div#lang-switch > a:hover {
    color: #842C16;
}





.swiper-pagination-custom {
    max-width: 1320px;
    width: 100%;
    text-align: right;
    margin: 0 auto;
    left: 0;
    right: 0;

    width: auto;
    display: inline;
    z-index: 999 !important;
    position: absolute;
    /*right: 5%;*/
    bottom: 35px;
    opacity: 0.5;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    font-family: 'Helvetica', serif;
    margin: 0px 20px;
    color: #FFF;
    letter-spacing: 1px;
}


.swiper-pagination-bullet-active {
	background: transparent;
	border-bottom: 1px solid #fff;
    padding-bottom: 3px;
    opacity: 0.8;
}



.content-wrap {
	padding: 0;
}


div#about {
	background: url('../img/jikon_layout_bg1.jpg');
	background-position: center;
    /*background-attachment: fixed;*/
}

div#btn-back, div#btn-next {
    cursor: pointer;
}


h2 {
	color: #E8D2B9;
	letter-spacing: 20px;
}

h2 span {
	font-family: 'Helvetica', serif;
	font-size: 10px;
	letter-spacing: 1px;
	color: #E8D2B9 !important;
	font-weight: 100;
	text-transform: uppercase;
}



div#menu {
	background: url('../img/jikon_layout_bg2.jpg');
	background-position: center;
}


div#menu h2, div#menu h2 span {
	color: #872C16 !important;
}


div#story-content {
    position: relative;
    min-height: 550px;
}


div#story-control-panel {
    position: absolute;
    bottom: 0;
    width: 100%
}


.owl-carousel 
{
    touch-action: manipulation; 
}


.owl-dots {
    display: none;
}


.owl-carousel .owl-nav [class*=owl-] {
	opacity: 1 !important;
	top: unset;
	border-radius: 0px;
	color: #872C16;
	border-color: #872C16;
	background: transparent;
    margin-right: 5px;
}


.owl-carousel .owl-nav .owl-next {
    right: 0 !important;
    bottom: -50px !important;
}

.owl-carousel .owl-nav [class*=owl-]:hover {
    background: #842c16 !important;
    color: #ffffff !important;
    border-color: #842c16 !important;
}

.owl-carousel .owl-nav .owl-prev {
    left: unset !important;
    right: 45px !important;
    bottom: -50px !important;
}

div#story-carousel.owl-carousel .owl-nav [class*=owl-] {
    color: #ffffff;
    border-color: #ffffff;
}


div#story-carousel.owl-carousel .owl-nav [class*=owl-]:hover {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-color: #FFFFFF !important;
}


/*
div#story-carousel.owl-carousel .owl-nav [class*=owl-] {
    opacity: 1 !important;
    top: 50%;
}

div#story-carousel.owl-carousel .owl-nav .owl-next {
    right: -50px !important;
}

div#story-carousel.owl-carousel .owl-nav .owl-prev {
    left: -50px !important;
}*/

div#story-carousel p {
    text-align: justify;
}




div#address {
	background: url('../img/jikon_layout_bg3.jpg');
	background-position: center;
}


div#address p {
	color: #96241D;
    letter-spacing: 1px;
}

ul#contact-info-list {
    list-style: none;
    color: #96241D;
}

ul#contact-info-list li {
    margin-bottom: 25px;
    white-space: nowrap;
}

.info-title {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    min-width: 100px;
    letter-spacing: 3px;
    vertical-align: middle;
    border-right: 1px solid #96261d;
}

.info-text {
    letter-spacing: 2px;
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
}










.horizontal-line {
    width: 300px;
    height: 1px;
    background: #96251d;
}


div#reservation {
	background: url('../img/jikon_layout_bg4.jpg');
	background-position: center;
}


.btn.btn-reservation {
    /*background: url(../img/jikon_layout_btnbg1.png);*/
    font-family: 'mincho_stdbold', serif !important;
    background: #78190ee0;
    color: #E8D2B9;
    padding: 20px 35px 20px 49px;
    border-radius: 0px;
    font-size: 1.8rem;
    letter-spacing: 14px;
    font-weight: 100;
    min-width: 250px;
}


.btn.btn-reservation:hover {
    background: #FFFFFF;
    color: #78190e;
    border-color: #78190e;
}

.btn.btn-reservation span {
	font-size: 8px !important;
}


div#reservation p {
	color: #96241D;
    letter-spacing: 1px;
}


.left-border {
	border-left: 1px solid #93241D;
}



.dark #footer, #footer.dark {
	border: none;
}



div#copyrights {
	background: url('../img/jikon_layout_footer_bg.jpg');
	background-position: center;
	background-size: cover;
}



div#copyrights p {
    font-size: 12px;
    letter-spacing: 3px;
}


div#copyrights a.logo {
    float: right;
    max-height: 80px;
}

div#copyrights a.logo img {
    max-height: 65px;
}









/*div#about:before {
    content: " ";
    width: 1px;
    height: 100px;
    background: #FFF;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 5%;
    opacity: 0.5;
}

#slider:after {
    content: " ";
    width: 1px;
    height: 100px;
    background: #FFF;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 5%;
    opacity: 0.5;
    z-index: 999;
}

#reservation:after {
    content: " ";
    width: 1px;
    height: 100px;
    background: #842004;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 5%;
    opacity: 0.5;
    z-index: 999;
}
*/
.hide {
	display: none;
}




div#btn-book-now {
    position: fixed;
    bottom: 0;
    left: 0;
    background: url('../img/btn-bg.png');
    width: 100%;
    z-index: 99;
    text-align: center;
}


div#btn-book-now a {
    color: #e1ccb2;
    padding: 20px 0px;
    display: block;
    cursor: pointer;
    font-size: 18px;
    letter-spacing: 12px;
    padding-left: 12px;
}



.nowrap {
    white-space: nowrap;
}



body.en {
    letter-spacing: 0px;
}

.en h2 {
    letter-spacing: 6px;
    font-size: 20px;
}

.en h1 {
    letter-spacing: 0px;
    font-size: 33px;
    line-height: 33px;
}

.en .info-title {
    letter-spacing: 0px;
    font-size: 13px;
    max-width: 100px;
    white-space: break-spaces;
}

.en .info-text {
    font-size: 13px;
    letter-spacing: 2px;
}


.en .btn.btn-reservation {
    font-size: 16px;
    letter-spacing: 4px;
    padding: 20px 35px 20px 38px;
}

.en div#btn-book-now a {
    font-size: 13px;
    letter-spacing: 6px;
    padding-left: 6px;
}


.en div#story-carousel p {
    text-align: left;
}



.jp .menu-link {
    font-size: 18px;
}


.menu-link-content {
    display: inline-block;
    margin-top: 20px;
}

.btn-menu {
    font-family: 'Noto Sans JP', sans-serif;
    display: inline-block;
    background: #78190ee0;
    color: #E8D2B9;
    padding: 10px 20px;
    border-radius: 0px;
    font-size: 16px;
    letter-spacing: 2px;
}

.btn-menu:hover {
    color: #FFF;
}


@media (min-width: 992px) {
	.menu-link {
    	padding: 63px 24px 15px 24px !important;
    }

    .swiper-pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets {
        max-width: 960px;
    }

}

@media (min-width: 1200px) {
    .menu-link {
        padding: 63px 35px 15px 35px !important;
    }

    .jp .menu-link {
        padding: 83px 40px 15px 40px !important;
    }

    .swiper-pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets {
        max-width: 1140px;
    }


}


@media (min-width: 1440px) {
    .menu-link {
        padding: 63px 45px 15px 45px !important;
    }

    .jp .menu-link {
        padding: 83px 45px 15px 45px !important;
    }

    .swiper-pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets {
        max-width: 1320px;
    }
}



@media (max-width: 992px) {
    
    .container {
        padding-right: 50px;
        padding-left: 50px;
    }
    

    header#header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
    }

    div#logo img {
        height: 65px !important;
    }

    img#btn-menu {
        height: 15px;
    }


    div#header-wrap {
		position: relative !important;
		top: 0 !important;
    	background: url('../img/jikon_layout_menu_bg.jpg');
	    background-size: cover;
	    background-position: top right;
    }

    div#header-wrap > .container {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .header-row {
        align-items: center;
    }

    .header-misc {
        margin-bottom: 0;
    }


    #menuModal .menu-container {
        display: block;
    }

    section#slider {
        display: none !important;
    }


    section#mobile-slider {
        margin-top: 85px;
    }

    /*header#header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
    }*/

    #copyrights {
        padding: 40px 0 100px 0px !important;
    }


    button.mfp-close {
        display: none;
    }


    .mfp-content, div#menuModal, div#menuModal > div {
        height: 100%;
    }

    .mfp-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    div#menuModal {
        background: url('../img/modal-bg.png');
        background-size: 100% 100%;
    }

    div#menuModal i {
        font-size: 16px;
        margin-right: 20px;
    }

    div#menuModal .modal-body {
        padding: 20px 20px 20px 40px;
    }


    img#img-modal-close {
        height: 25px;
    }




    div#menuModal .menu-item:not(:first-child) {
        border-top: none;
    }

    div#modal-menu-container {
        margin: 100px 0px 40px;
    }

    div#menuModal .menu-link span {
        font-family: 'Helvetica', serif;
        display: inline;
    }

    div#menuModal a.menu-link {
        padding-left: 0;
        padding-right: 0;
    }

    div#menuModal a.menu-link > div {
        font-size: 26px;
        font-weight: 100 !important;
        line-height: 40px;
    }

    div#menuModal .modal-footer {
        border: none;
        position: absolute;
        width: 100%;
        bottom: 60px;
        font-size: 9px !important;
    }


    #about h2 {
        margin-bottom: 0px;
        text-align: center;
        margin-right: -20px;
    }

    .vertical-line {
        width: 1px;
        height: 50px;
        background: #c6a489;
        margin: 10px auto;
    }

    div#menu h2 {
        padding-left: 30%;
    }

    #menu h2:before {
        content: "";
        display: inline;
        width: 45%;
        height: 1px;
        background: #882b17;
        position: absolute;
        top: 18px;
        left: -30%;
        z-index: 999;
    }

    #address h1:after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #882b17;
        position: absolute;
        margin-top: 15px;
    }

   

}

@media (max-width: 768px) {
    body {
        font-size: 12px;
        letter-spacing: 2px;
    }

	.left-border {
		border-left: none;
	}
	
	div#copyrights a.logo {
		float: none;
	}

    #reservation .col-lg-4:after {
        content: "";
        display: block;
        width: 1px;
        height: 100px;
        background: #882b17;
    }

    div#reservation:after {
        content: "";
        display: block;
        width: 1px;
        height: 135px;
        background: #882b17;
        margin: 0 auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }


    .menu-link-content {
        text-align: center;
        display: block;
        margin-top: 80px;
    }
    
    .btn-menu {
        display: block;
        max-width: 240px;
        text-align: center;
        margin: 20px auto;
        padding: 20px;
    }

}

@media (max-width: 480px) {
    ul#contact-info-list li {
        white-space: normal;
    }
    .info-title {
        border-right: none;
        display: block;
        max-width: 100% !important;
    }
    .info-text {
         display: block;
         padding-left: 0px;
    }

    div#about {
        background-position: 20%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }


}


@media (max-width: 375px) {
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0px 12px;
	}
	.header-misc {
		margin-left: 9px;
	}
	.header-misc-element, .header-misc-icon {
		margin: 0 3px;
	}
	div#story-content p {
		line-height: 24px;
	}
}