@charset "UTF-8";


/* html
------------------------------------------------- */
html {
    overflow-y: hidden;
}


/* header
------------------------------------------------- */
#header .logo img {
    opacity: 0;
}
.hbg #header .logo img {
    opacity: 1;
}


/* mainvisual
------------------------------------------------- */
.mainvisual {
    width: calc(100vw - var(--scrollbar));
    height: 100vh;
    min-height: 620px;
    background-color: #fff;
    position: relative;
}
.mainvisual .logobox {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    transition: 0.7s;
}
.mainvisual h2 {
    width: 4.6875em;
    margin: 0 auto;
    filter: blur(10px);
    opacity: 0;
    transition: 0.7s;
}
.mainvisual h2.is-show1 {
    filter: blur(0);
    opacity: 1;
}
.mainvisual h2.is-show2 {
    padding-bottom: 10em;
}
.mainvisual h2 img {
    transition: 1s;
}
.mainvisual h3 {
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 1.9;
    letter-spacing: 0.075em;
    color: #000;
    position: absolute;
    bottom: 0;
    filter: blur(10px);
    opacity: 0;
    transition: 0.7s;
}
.mainvisual h3 span {
    display: block;
    font-weight: 400;
}
.mainvisual h3.is-show2 {
    filter: blur(0);
    opacity: 1;
}
.mainvisual.is-wh h2 {
    background: url("../img/top/logo_tate_wh.webp") center top no-repeat;
    background-size: 100% auto;
}
.mainvisual.is-wh h2 img {
    opacity: 0;
}
.mainvisual.is-wh h3 {
    color: #fff;
}
.mainvisual .loadbox {
    opacity: 0;
}
.mainvisual .newsbox {
    width: 48.3125em;
    height: 3.75em;
    background-color: rgba(255,255,255,0.85);
    position: absolute;
    left: 50%;
    bottom: 4.1875em;
    transform: translateX(-50%);
    z-index: 2;
}
.mainvisual .newsbox h4 {
    width: 21.25em;
    letter-spacing: 0.1em;
    text-align: center;
    padding-top: 0.25em;
    position: relative;
}
.mainvisual .newsbox h4::after {
    content: '';
    width: 0.041em;
    height: 52%;
    background-color: #000;
    position: absolute;
    right: 0;
    top: 25%;
}
.mainvisual .newsbox h4 span {
    padding-right: 0.5em;
}
.mainvisual .newsbox .news-slider {
    width: 28.75em;
    padding-left: 4.25em;
    position: absolute;
    left: 15.9375em;
    top: 1.1em;
    box-sizing: border-box;
}
.mainvisual .newsbox .news-slider .swiper-slide dl a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.08em;
}
.mainvisual .newsbox .news-slider .swiper-slide dl dt {
    width: 20%;
}
.mainvisual .newsbox .news-slider .swiper-slide dl dd {
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mainvisual .main-slider {
    width: 100%;
    height: 100vh;
    min-height: 620px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.mainvisual .main-slider .swiper-slide {
    width: 100%;
    height: 100vh;
    min-height: 620px;
}
.mainvisual .main-slider .swiper-slide .sl {
    width: 100%;
    height: 100vh;
    min-height: 620px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
    transform: scale(1.1);
}
.mainvisual .main-slider .swiper-slide-active .sl,
.mainvisual .main-slider .swiper-slide-prev .sl,
.mainvisual .main-slider .swiper-slide-next .sl,
.mainvisual .main-slider .swiper-slide-duplicate-active .sl,
.mainvisual .main-slider .swiper-slide-duplicate-prev .sl,
.mainvisual .main-slider .swiper-slide-duplicate-next .sl {
	animation: zoomUp 12s linear 0s normal both;
}
.mainvisual .main-slider .swiper-slide .sl.main1 {
	background-image: url("../img/top/main-slider1.webp");
}
.mainvisual .main-slider .swiper-slide .sl.main2 {
	background-image: url("../img/top/main-slider2.webp");
}
.mainvisual .main-slider .swiper-slide .sl.main3 {
	background-image: url("../img/top/main-slider3.webp");
}
.mainvisual .main-slider .swiper-slide .sl.main4 {
	background-image: url("../img/top/main-slider4.webp");
}
.mainvisual .scroll {
    width: 1.03125em;
    height: 13.125em;
	position: absolute;
    left: 3.125em;
    bottom: 0;
    z-index: 2;
}
.mainvisual .scroll span {
    width: 1.5em;
    height: 4.35em;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: #fff;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    text-align: center;
}
.mainvisual .scroll b {
    width: 0.0625em;
    height: 8.5em;
    background-color: rgba(255,255,255,0.3);
    position: absolute;
    left: 50%;
    bottom: 0;
    overflow: hidden;
}
.mainvisual .scroll b::before {
    content: '';
    width: 100%;
    height: 0;
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    left: 0;
    top: 0;
    animation: scroll 3s infinite;
}
#snav {
    opacity: 0;
}
@media only screen and (min-width:751px){
.mainvisual .newsbox .news-slider .swiper-slide dl a:hover dd {
    text-decoration: underline;
}
}
@media only screen and (min-width:751px) and (max-height:900px){
.mainvisual .logobox {
    top: 45%;
}
.mainvisual h2.is-show2 {
    padding-bottom: 8em;
}
}
@media only screen and (min-width:751px) and (max-height:800px){
.mainvisual h2.is-show2 {
    padding-bottom: 6em;
}
}
@media only screen and (min-width:751px) and (max-height:700px){
.mainvisual h2 {
    width: 4em;
}
.mainvisual h2.is-show2 {
    padding-bottom: 4em;
}
.mainvisual h3 {
    bottom: -1.5em;
}
.mainvisual .newsbox {
    bottom: 3.5em;
}
}
@media only screen and (max-width:750px){
.mainvisual {
    height: 100svh;
    min-height: 120vw;
}
.mainvisual .logobox {
    top: 45%;
}
.mainvisual h2 {
    width: 14vw;
}
.mainvisual h2.is-show2 {
    padding-bottom: 40vw;
}
.mainvisual h3 {
    font-size: 4.83866vw;
    line-height: 2.4;
    bottom: 15vw;
}
.mainvisual h3 span {
    font-size: 4.004vw;
    line-height: 1.2;
}
.mainvisual .newsbox {
    width: 88vw;
    height: 17.33vw;
    bottom: 8vw;
}
.mainvisual .newsbox h4 {
    width: 100%;
    font-size: 2.66vw;
    padding-top: 1.25em;
    line-height: 1;
}
.mainvisual .newsbox h4::after {
    display: none;
}
.mainvisual .newsbox h4 span {
    font-size: 4.8vw;
    padding-right: 0.5em;
}
.mainvisual .newsbox .news-slider {
    width: 90%;
    margin: 0 auto;
    padding-left: 0;
    position: static;
}
.mainvisual .newsbox .news-slider .swiper-slide dl a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mainvisual .newsbox .news-slider .swiper-slide dl dt {
    width: 22%;
    font-size: 2.933vw;
    letter-spacing: 0.04em;
}
.mainvisual .newsbox .news-slider .swiper-slide dl dd {
    width: 78%;
    font-size: 2.933vw;
    letter-spacing: 0.02em;
}
.mainvisual .main-slider {
    height: 100svh;
    min-height: 120vw;
}
.mainvisual .main-slider .swiper-slide {
    height: 100svh;
    min-height: 120vw;
}
.mainvisual .main-slider .swiper-slide .sl {
    height: 100svh;
    min-height: 120vw;
}
.mainvisual .main-slider .swiper-slide .sl.main1 {
	background-image: url("../img/top/main-slider1_sp.webp");
}
.mainvisual .main-slider .swiper-slide .sl.main2 {
	background-image: url("../img/top/main-slider2_sp.webp");
}
.mainvisual .main-slider .swiper-slide .sl.main3 {
	background-image: url("../img/top/main-slider3_sp.webp");
}
.mainvisual .main-slider .swiper-slide .sl.main4 {
	background-image: url("../img/top/main-slider4_sp.webp");
}
.mainvisual .scroll {
    display: none;
}
}
@media only screen and (max-width:750px) and (min-height:135.5vw){
.mainvisual .logobox {
    top: 45%;
}
.mainvisual h2 {
    width: 15vw;
}
.mainvisual h2.is-show2 {
    padding-bottom: 45vw;
}
.mainvisual h3 {
    bottom: 15vw;
}
}
@media only screen and (max-width:750px) and (min-height:157vw){
.mainvisual .logobox {
    top: 49%;
}
.mainvisual h2 {
    width: 16vw;
}
.mainvisual h2.is-show2 {
    padding-bottom: 50vw;
}
.mainvisual h3 {
    bottom: 17vw;
}
.mainvisual .newsbox {
    bottom: 11vw;
}
}


/* about
------------------------------------------------- */
.about {
    padding: 5.625em 0 6em;
}
.about .con {
    width: 39.25%;
}
.about .con .headline1 {
    margin-bottom: 1em;
}
.about .con p {
    padding-bottom: 2em;
}
.about .photo {
    width: 51.66vw;
    margin-left: calc(37.5em - 50cqw);
}
@media only screen and (max-width:750px){
.about {
    padding: 13.33vw 0 15.33vw;
}
.about .con {
    width: 100%;
    margin-bottom: 10vw;
}
.about .con .headline1 {
    margin-bottom: 0.55em;
}
.about .con .headline1 span {
    padding-bottom: 0.35em;
}
.about .con p {
    padding-bottom: 1.25em;
}
.about .photo {
    width: 100vw;
    margin-left: -6vw;
}
}


/* gayu-an
------------------------------------------------- */
#gayu-an {
    margin: 5.5em auto;
}
@media only screen and (max-width:750px){
#gayu-an {
    margin: 15vw auto;
}
}


/* room
------------------------------------------------- */
.room {
    padding: 5.8125em 0;
}
.room .con {
    width: 35%;
    margin-left: 1.875em;
}
.room .con .headline1 {
    margin-bottom: 1em;
}
.room .con p {
    padding-bottom: 2em;
}
.room .photo {
    width: 47%;
}
@media only screen and (max-width:750px){
.room {
    padding: 15.33vw 0;
}
.room .con {
    width: 100%;
    margin: 0 0 10vw;
}
.room .con .headline1 {
    margin-bottom: 0.55em;
}
.room .con p {
    padding-bottom: 1.25em;
}
.room .photo {
    width: 100%;
}
}


/* cuisine
------------------------------------------------- */
.cuisine {
    padding: 6.25em 0 5em;
}
.cuisine .con {
    width: 37.5%;
}
.cuisine .con .headline1 {
    margin-bottom: 1em;
}
.cuisine .con p {
    padding-bottom: 2em;
}
.cuisine .photo {
    width: 53.866vw;
    margin-left: calc(37.5em - 50cqw);
}
@media only screen and (max-width:750px){
.cuisine {
    padding: 13.33vw 0 11vw;
}
.cuisine .con {
    width: 100%;
    margin-bottom: 10vw;
}
.cuisine .con .headline1 {
    margin-bottom: 0.55em;
}
.cuisine .con p {
    padding-bottom: 1.25em;
}
.cuisine .photo {
    width: 100vw;
    margin-left: -6vw;
}
}


/* wellness-activity
------------------------------------------------- */
.wellness-activity h3 {
    text-align: center;
    letter-spacing: 0.08em;
}
.wellness-activity p {
    text-align: center;
    line-height: 1.85;
    padding: 0.25em 0 2.75em;
}
.wellness-activity ul li {
    width: 33.333334%;
}
.wellness-activity ul li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    overflow: hidden;
    position: relative;
}
.wellness-activity ul li a::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
    transition: 0.4s;
}
.wellness-activity ul li a h4 {
    font-weight: 400;
    line-height: 1.5;
    position: absolute;
    left: 3em;
    bottom: 1.75em;
    z-index: 3;
}
.wellness-activity ul li a h4 span {
    display: block;
}
.wellness-activity ul li a img {
    transition: 0.4s;
}
@media only screen and (min-width:751px){
.wellness-activity ul li a:hover::before {
    opacity: 1;
}
.wellness-activity ul li a:hover img {
    transform: scale(1.05);
}
}
@media only screen and (max-width:750px){
.wellness-activity {
    width: 88%;
    margin: 0 auto;
}
.wellness-activity h3 {
    font-size: 6.4vw;
    text-align: left;
}
.wellness-activity p {
    text-align: left;
    padding: 0.2em 0 2em;
}
.wellness-activity ul li {
    width: 100%;
    margin-bottom: 4.266vw;
}
.wellness-activity ul li a h4 {
    font-size: 2.4vw;
    line-height: 1.4;
    left: 6vw;
    bottom: 4.8vw;
}
.wellness-activity ul li a h4 span {
    font-size: 6.4vw;
}
}


/* feature
------------------------------------------------- */
.feature {
    background-color: #000;
    color: #fff;
    padding: 4.75em 0 4em;
}
.feature h3 {
    text-align: center;
    line-height: 1.6;
}
.feature h3 img {
    display: block;
    width: 5em;
    margin: 0 auto;
}
.feature h3 span {
    letter-spacing: 0.08em;
}
.feature p {
    text-align: center;
    line-height: 1.2;
    padding-bottom: 4em;
}
.feature ul li {
    width: 48.11%;
}
.feature ul li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
}
.feature ul li a .cover {
    width: 100%;
    height: 24.375em;
    overflow: hidden;
    margin-bottom: 1.25em;
    position: relative;
}
.feature ul li a .cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;
}
.feature ul li a h4 {
    line-height: 1.5;
    transition: 0.4s;
}
.feature ul li a h4 span {
    display: block;
    padding-top: 0.25em;
}
@media only screen and (min-width:751px){
.feature ul li a:hover .cover img {
    transform: scale(1.05);
}
.feature ul li a:hover h4 {
    opacity: 0.6;
}
}
@media only screen and (max-width:750px){
.feature {
    padding: 10.66vw 0 5.33vw;
}
.feature h3 img {
    width: 17.6vw;
}
.feature h3 span {
    font-size: 6.4vw;
}
.feature p {
    font-size: 2.65vw;
    padding-bottom: 4.5em;
}
.feature ul li {
    width: 100%;
    margin-bottom: 10vw;
}
.feature ul li a .cover {
    height: 57.6vw;
    margin-bottom: 0.75em;
}
.feature ul li a h4 {
    font-size: 3.576vw;
}
.feature ul li a h4 span {
    font-size: 2.5vw;
    padding-top: 0.5em;
}
}


/* news
------------------------------------------------- */
.news {
    padding: 3.5em 0 4.5em;
}
.news h3 {
    text-align: center;
    letter-spacing: 0.08em;
    padding-bottom: 0.75em;
}
.news ul li {
    width: 31.5%;
    margin-right: 2.75%;
}
.news ul li:nth-child(3) {
    margin-right: 0;
}
.news ul li a {
    display: block;
    width: 100%;
    height: 100%;
}
.news ul li a .cover {
    width: 100%;
    height: 15.8125em;
    overflow: hidden;
    margin-bottom: 1em;
    position: relative;
}
.news ul li a .cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;
}
.news ul li a .cover span {
    width: 5.833em;
    height: 2.33em;
    background-color: #000;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
.news ul li a h4 {
    font-weight: 400;
    line-height: 1.5;
    transition: 0.4s;
}
@media only screen and (min-width:751px){
.news ul li a:hover .cover img {
    transform: scale(1.05);
}
.news ul li a:hover h4 {
    opacity: 0.6;
}
}
@media only screen and (max-width:750px){
.news {
    padding: 10.5vw 0 5.5vw;
}
.news h3 {
    font-size: 6.4vw;
    padding-bottom: 0;
}
.news ul li {
    width: 100%;
    margin: 0 0 9vw;
}
.news ul li:last-child {
    display: none;
}
.news ul li a .cover {
    height: 59.33vw;
    margin-bottom: 1em;
}
.news ul li a .cover span {
    font-size: 2.8vw;
    width: 18.66vw;
    height: 6.66vw;
}
.news ul li a h4 {
    font-size: 3.268vw;
}
}