@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda&family=Montserrat:wght@300&display=swap');

body{
    background-color:rgb(255, 255, 255) ;
}
main{
    color: rgb(255, 255, 255);
}
img{ pointer-events: none;
}

/*============================
	shutter
=============================*/
.shutter{
    width: auto;
    height: 100vh;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    background-color:rgb(0, 0, 0);
    background-image: url(../img/ofuro.jpg);
    background-size: cover;
    background-position: center center;
    z-index: 99;
    -webkit-animation: byeShutter 4.8s forwards;
    animation: byeShutter 4.8s forwards;
}
.logo {
    position: absolute;
    width: 120px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -webkit-animation: SlideIn 2.6s;
    animation: SlideIn 2.6s;
}
img{ pointer-events: none;
}

@keyframes SlideIn {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes byeShutter {
20% {
    opacity: 1;
}
100% {
    display: none;
    opacity: 0;
    z-index: -7;
}
}
@keyframes logo {
20% {
    opacity: 0;
    z-index: -1;
}
100% {
    opacity: 1;
}
}

/*============================
	header
=============================*/
.header-logomark {
    display: block;
    position: fixed;
    top: 0px;
    text-align:center;
    width: 100%;
    padding: 5px;
    background: rgba(0, 0, 0, 0.897);
    z-index: 10;
}
.header-logomark img {
    height: 55px;
    margin-top: 0.2em;
}
img{ pointer-events: none;
}
/*============================
	drawer
=============================*/
.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before {
    background-color: rgb(223, 223, 223);
    width: 22px;
    height: 1px;
}
.drawer-hamburger {
    background: rgba(0, 0, 0, 0);
    padding-top: 22px;
    padding-right: 20px;
    z-index: 12;
}
.drawer--right.drawer-open .drawer-hamburger {
    right: 0px;
}
.drawer-nav {
    background: rgba(0, 0, 0, 0.596);
    z-index: 10;
}
.drawer-overlay {
    background-color: rgba(0, 0, 0, 0.747);
    z-index: 9;
}
.drawer-menu a{
    color:rgb(223, 223, 223)
}
.drawer-menu-item {
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.18em;
}

/*============================
	mainvisual
=============================*/
.mainvisual {
    width: 100%;
    height: 100vh;
    display: block;
    text-align: center;
    text-shadow: 2px 1px 0 rgb(0, 0, 0),-1px 1px 0 rgba(255, 255, 255, 0),2px -2px 0 rgba(255, 255, 255, 0),-1px -1px 0 rgba(255, 255, 255, 0);
    font-size: 1.8em;
    font-family: 'Bodoni Moda', serif;
    padding-top: 12em;
    letter-spacing: 0.18em;
    background-color: rgba(255, 255, 255, 0.062);
    line-height: 115%;
    background-image: url(../img/2021-1117.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 0.5em;
}
img{ pointer-events: none;
}
/*============================
	swiper
=============================*/
.swiper-container {
    width: 100%;
    height: auto;
    margin-top: 0;
    margin-bottom: 3.5em;
    padding-left: 23px;
    color: rgb(0, 0, 0);
}
.swiper-container h2{
    font-size: 25px;
    font-family: 'Bodoni Moda', serif;
    letter-spacing: 0.05em;
    margin-bottom: 0.7em;
}
.swiper-container p{
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.18em;
    margin-bottom: 1em;
}
.swiper-container img{
    max-width: 100%;
    height: auto;
}
.swiper-slide {
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    letter-spacing: 0.18em;
    line-height: 155%;
    display: -webkit-box;
    display: -ms-flexbox;

    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide img{
    max-width: 100%;
    height: auto;
}
.swiper-slide:hover{
    opacity: 0.7;
}
img{ pointer-events: none;
}

/*============================
	contents
=============================*/
.flex-container{
    display: flex;
}
.flex-item {
    flex-basis: 50%;
}
.flex-item a{
    display: block;
    width: 100%;
    height: 0;
    text-align: left;
    text-shadow: 2px 1px 0 rgb(0, 0, 0),-1px 1px 0 rgba(255, 255, 255, 0),2px -2px 0 rgba(255, 255, 255, 0),-1px -1px 0 rgba(255, 255, 255, 0);
    font-size: 1.5em;
    font-family: 'Bodoni Moda', serif;
    /*padding-top: 120.754716981132075%;*/
    padding-top: 87.0833%;
    padding-bottom: 65px;
    padding-left: 23px;
    letter-spacing: 0.11em;
}
.flex-item a:hover{
    opacity: 0.7;
}
img{ pointer-events: none;
}

@media screen and (max-width: 620px) {
    .flex-container{flex-direction: column;}
    .flex-item{margin: 0;}
}

#topics1 a{
    background-image: url(../img/hopetext.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 90%;
    padding-bottom: 0;
}
#topics2 a{
    background-image: url(../img/hokuoyugge.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 90%;
    padding-bottom: 0;
}
#topics3 a{
    background-image: url(../img/0614-7681158.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#topics4 a{
    background-image: url(../img/0474-7681158.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#topics5 a{
    background-image: url("../img/korabo.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 90%;
    padding-bottom: 0;
}

#topics6 a{
    background-image: url(../img/onsen.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

#topics7 a{
    background-image: url(../img/saunahouse.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/*============================
	instagram

#instagram {
    margin-bottom: 4.3em;
    color: rgb(0, 0, 0);
}
.photogallery h2{
    font-size: 25px;
    font-family: 'Bodoni Moda', serif;
    letter-spacing: 0.05em;
    padding-left: 23px;
    margin-bottom: 0.7em;
}
.photogallery p{
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.18em;
    padding-left: 23px;
    margin-bottom: 1em;
}
.instagram img{
    max-width: 100%;
    height: auto;
}
.gallery{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.instagram-gallery{
    flex: 1 1 33.333%;
    -ms-flex: 1 1 33.333%;
}
img{ pointer-events: none;
}
=============================*/

/*============================
	footer
=============================*/
.footerbox {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    background-color: rgb(255, 255, 255);
    border-top: 0.01em solid rgba(151, 151, 151, 0.603);
    padding: 4em 3.4em 4em;
    letter-spacing: 0.2em;
    font-size: 0.6em;
    font-family: 'Montserrat', sans-serif;
    margin-top: 2.5em;
}
ul.footer-menu li {
    padding: 0.9em;
}
.footerbox p{
    color: rgb(138, 138, 138);
    padding: 4em 1em 3em;
}
.footerbox img{
    display: block;
    width: 30px;
    filter: contrast(0.1);
}
img{ pointer-events: none;
}