@charset "UTF-8";

/* 各発表
◇社心拡大、縮小、浮き上がるホバー(トランスフォーム)
◇オープニングアニメーションをHTMLに　アニメーションをcssに入れる
◇背景のグラデーション
◇文字太くするタグ＝ストロングタグ */



* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    background-color: #0A0017;
}

.icon {
    width: 7%;
    height: 2.5vw;
    padding-top: 2%;
    margin-left: auto;
    margin-right: 9.5%;
    font-size: 1.5vw;
    color: #ffffff;
}


/* ↓ここからheader部分 */
.header-box {
    display: flex;
}

header {
    width: 100%;
    height: 50vw;
    margin-bottom: 5%;
    background-image: url(../images/header-photo.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: aliceblue;
}

header h1 {
    width: 5%;
    margin-left: 5%;
    margin-right: 10%;
}

header h1 a img {
    width: 100%;
    vertical-align: bottom;
}

header nav {
    width: 60%;
    height: 5vw;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff33;
    
}

header nav ul {
    display: flex;
    list-style-type: none;
}

header nav ul li {
    width: 25%;
    line-height: 5vw;
}

header nav ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 1.2vw;
    color: #ffffff;
}

nav ul li a:hover {
   text-decoration: underline;
   text-underline-offset: 8px;
   transition: 3s;
}

header p {
    margin-top: 4%;
    margin-left: auto;
    font-size: 3vw;
    writing-mode: vertical-lr;
    color: #ffffff;
}

header p:nth-of-type(1) {
    margin-right: 25%;
}

header p:nth-of-type(2) {
    margin-right: 45%;
}

header p:nth-of-type(3) {
    margin-right: 65%;
}
/* ↑ここまで */

/* ここからsection部分 */

/* ここから温泉 */
.bath {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding-top: 15vw;
    padding-bottom: 15vw;
    background-image: url(../images/section-bath.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.bath h2 {
    width: 25vw;
    height: 25vw;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    border: 2px solid #ffffff;
    writing-mode: vertical-lr;
    line-height: 25vw;
    font-size: 3vw;
    text-align: center;
}

.bath h2:hover {
    filter: brightness(0);
    transition: 1s;

}

.bath h2 a {
    text-decoration: none;
    color: #ffffff;
}

/* ↑ここまで */

/* ここからお部屋 */

.room-box {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    text-align: center;
    color: #ffffff;
}

.room-box h2 {
    line-height: 3;
    text-align: center;
    font-size: 2vw;

}

.room-box h2 a {
    text-decoration: none;
    color: #ffffff;
}

.room-box h2:hover {
    filter: brightness(70%);
    transition: 1s;

}

.room {
    display: flex;
    width: 100%;
}

.room img {
    width: 100%;
    height: 35vw;

}

.room :hover {
    filter: brightness(1.5);
    transition: 1s;
}

.room h3 {
    text-align: center;
    font-size: 1vw;
    color: #ffffff;
}

.room ul {
    display: flex;
    list-style-type: none;
}

.room ul li {
    width: 100%;
    margin-top: 2%;
    text-align: center;
    border-top: 0.2vw solid #202020;
    border-left: 0.2vw solid #202020;
    border-bottom: 0.2vw solid #202020;
    line-height: 2;
    font-size: 1vw;
    color: #ffffff;
}

.room-box1 {
    width: 14%;
    background-color: black;
    margin-left: 0.35%;
    margin-right: 0.2%;
}

.room-box2 {
    width: 14%;
    background-color: black;
    margin-right: 0.2%;
}

.room-box3 {
    width: 14%;
    background-color: black;
    margin-right: 0.2%;
}
.room-box4 {
    width: 14%;
    background-color: black;
    margin-right: 0.2%;

}.room-box5 {
    width: 14%;
    background-color: black;
    margin-right: 0.2%;

}.room-box6 {
    width: 14%;
    background-color: black;
    margin-right: 0.2%;

}.room-box7 {
    width: 14%;
    background-color: black;
    margin-right: 0.2%;
}

/* ここからお食事 */
.dinig  {
    width: 90%;
    height: 50vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    background-image: url(../images/section-dinig.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

.dinig h2 {
    padding-top: 10%;
    text-align: center;
    font-size: 2vw;
    
}

.dinig h2 a {
    text-decoration: none;
    color: #ffffff;
}

.dinig .menu {
    display: flex;
    width: 68%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
}

.dinig .menu p {
    width: 18vw;
    height: 18vw;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 50%;
    background-color: #191970B3;
    writing-mode: vertical-lr;
    line-height: 18vw;
    font-size: 2vw;
    text-align: center;
    color: #ffffff;
}

.dinig .menu p:hover {
    filter: brightness(2.0);
    transition: 1s;
}


/* ↑ここまで */

/* ↓ここからカフェ */
.cafe {
    width: 90%;
    height: 50vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    background-image: url(../images/section-cafe.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.cafe img {
    width: 10%;
    padding-top: 18%;
    padding-left: 45%;
}

.cafe img:hover {
    filter: brightness(0);
    transition: 1s;

}
/* ↑ここまで */

/* ここから館内施設 */
.facility {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding-top: 15vw;
    padding-bottom: 15vw;
    background-image: url(../images/section-facility.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.facility h2 {
    width: 25vw;
    height: 25vw;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    border: 2px solid #ffffff;
    writing-mode: vertical-lr;
    line-height: 25vw;
    font-size: 3vw;
    text-align: center;
}

.facility h2 a {
    text-decoration: none;
    color: #ffffff;
}

.facility h2:hover {
    filter: brightness(0);
    transition: 1s;
}
/* ↑ここまで */

/* ここからっ交通案内 */
.traffic {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding-top: 15vw;
    padding-bottom: 15vw;
    background-image: url(../images/section-traffic.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.traffic h2 {
    width: 25vw;
    height: 25vw;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    border: 2px solid #ffffff;
    writing-mode: vertical-lr;
    line-height: 25vw;
    font-size: 3vw;
    text-align: center;
    color: #ffffff;
}

.traffic h2 a {
    text-decoration: none;
    color: #ffffff;
}

.traffic h2:hover {
    filter: brightness(0);
    transition: 1s;
}

/* ↑ここまで */
/* ↑section部分ここまで */

/* ↓ここからfooter部分 */
footer {
    width: 90%;
    margin-left: auto;
    margin-right: auto;

}

footer img {
    width: 5%;
    padding: 2% 4%;
}

footer .footer-rogo {
   margin-left: 4%;
   font-size: 1.2vw;
   color: #ffffff;
}

footer .footer-flexbox {
    display: flex;
}

address {
    width: 25%;
    margin-left: 4%;
    line-height: 1.7;
    font-style: normal;
    font-size: 1.1vw;
    color: #ffffff;
}

.footer-flexbox ul {
    display: flex;
    margin-left: auto;
    margin-bottom: 3%;
    list-style-type: none;
    
}

.footer-flexbox ul li {
    width: 10em;
}

.footer-flexbox ul li a {
    display: block;
    text-align: center;
    line-height: 2.5;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.2vw;
}

.footer-flexbox ul li a:hover {
   text-decoration: underline;
   text-underline-offset: 8px;
   transition: 3s;
}

footer  .copy {
    text-align: center;
    font-size: 1.2vw;
    color: #ffffff;
}