:root {
    --font-size: 1rem;
    --line-height: 2.8;
    --margin-bottom: 7rem;
    --border-radius: 1rem;
    --box-shadow: 0 0 .3rem #00000090;
}

html.murasakiHpTop {
    font-size: 1vw;
}

.murasakiHpTop__body {
    position: relative;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 500;
    font-style: normal;
    background-color: #fff;

    margin:auto;
    width: 100%;
}

.murasakiHpTop__body:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: .5;
    pointer-events: none;
}

.wrapper {
    width: 100%;
}

.content {
    margin: auto;
    width: 100%;
    max-width: 1350px;
    padding-inline: 5%;
}

/* img {
    filter: contrast(143%) grayscale(12%) hue-rotate(7deg) saturate(140%) sepia(18%);
} */

.top__h2 {
    padding-block: 10rem 7rem;
    font-size: 3rem;
    text-align: center;
}

/***************
言語切り替え
***************/

#loading {
    position: fixed;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 1;
}

#loading img {
    width: 8%; 
    aspect-ratio: 244/957;
}

#loading.hidden {
    opacity: 0;
    pointer-events: none;
    z-index: -100;
}

/***************
言語切り替え
***************/

#murasakiHpTop__body__langButton {
    position: fixed;
    z-index: 101;
    top: 100em;
    right: 28em;
    width: 60em;
    aspect-ratio: 383 / 375;
    font-size: 1px;
}

#murasakiHpTop__body__langButton img {
    top: 0;
    position: absolute;
    width: 100%;
    aspect-ratio: 383 / 375;
}

.ja,
.en {
    display: none;
}

.ja.visible,
.en.visible {
    display: block;
}

/***************
header
***************/

.murasakiHpTop__body__PcHeader {
    padding-block: 1rem .8rem;
    background-color: #fff;
    /* background: linear-gradient(114deg, #fff 0%, #fff 37%, rgb(238 207 245) 37%, rgba(105, 0, 131, 1) 100%); */
}

.pcHeader__h1 {
    margin-right: 5%;
    font-size: 1.3rem;
    text-align: right;
}

/***************
ファーストビュー
***************/

#top__fv {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.top__fv__div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 10%;
}

.top__fv__div__logo {
    width: 38%;
    aspect-ratio: 159/808;
    margin: 0;
}

.top__fv__pic {
    position: relative;
    width: 89%;
    max-height: 600px;
    margin: 0;
}

.top__fv__pic img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 2400/1215;
    -o-object-fit: cover;
       object-fit: cover;
}

.top__fv__div__info {
    line-height: 2;
    margin-left: 1rem;
}

/***************
むらさき湯について
***************/

.top__about__div {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-block: 7rem 4rem;
    background: url('../img/icon/1.png') right +19% bottom +4rem/10rem no-repeat;
}


.top__about__div__pic {
    position: relative;
    width: 71%;
    max-height: 600px;
    aspect-ratio: 140 / 95;
    overflow: hidden;
}

.top__about__div__pic img {
    height: calc(100% + 16px);
    aspect-ratio: 140/95;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 2;
}

.top__about__p {
    position: relative;
    right: -5%;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: auto;
    font-size: var(--font-size);
    line-height: var(--line-height);
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
}

.top__about__p.en {
    right: 0;
    top: -7rem;
    width: 22%;
    -webkit-writing-mode: inherit;
        -ms-writing-mode: inherit;
            writing-mode: inherit;
    text-orientation: inherit;
    -webkit-font-feature-settings: inherit;
            font-feature-settings: inherit;
}

/*ギャラリー*/

.gallery {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 32.8% 32.8% 32.8%;
    grid-template-columns: 32.8% 32.8% 32.8%;
    -ms-grid-rows: 24.4% 24.4% 24.4% 24.4%;
    grid-template-rows: 24.4% 24.4% 24.4% 24.4%;
        grid-template-areas:
        "A B C"
        "D B E"
        "D G H"
        "F G H";
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-line-pack: justify;
        align-content: space-between;
    width: 74%;
    aspect-ratio: 1 / .8;
    margin: 6rem auto 0;
    padding: 0;
}

.gallery img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-filter: brightness(1.1);
            filter: brightness(1.1);
}

.gallery_imgA {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: A;
    -o-object-position: top;
       object-position: top;
    aspect-ratio: 4/3;
}
.gallery_imgB {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
    grid-area: B;
    -o-object-position: top;
       object-position: top;
    aspect-ratio: 3/4;
}
.gallery_imgC {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: C;
    -o-object-position: bottom;
       object-position: bottom;
    aspect-ratio: 4/3;
}
.gallery_imgD {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    grid-area: D;
    -o-object-position: top;
       object-position: top;
    aspect-ratio: 3/4;
}
.gallery_imgE {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    grid-area: E;
    -o-object-position: top;
       object-position: top;
    aspect-ratio: 500/427;
}
.gallery_imgF {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    grid-area: F;
    -o-object-position: bottom;
       object-position: bottom;
    aspect-ratio: 4/3;
}
.gallery_imgG {
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
    grid-area: G;
    aspect-ratio: 400/471;
}
.gallery_imgH {
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3;
    grid-area: H;
    -o-object-position: bottom;
       object-position: bottom;
    aspect-ratio: 400/533;
}

/***************
施設案内
***************/

.top__guide {
    background:
    url(../img/icon/2.png) right +7% top +46.6rem / 15rem no-repeat,
    url(../img/icon/3.png) left +7% top +88rem / 9rem no-repeat,
    url(../img/icon/4.png) right +7% top +129.3rem / 12.4rem no-repeat,
    url(../img/icon/5.png) left +7% top +174rem / 10rem no-repeat,
    url(../img/icon/6.png) right +8% top +215rem / 14rem no-repeat
}

.top__guide__div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: var(--margin-bottom);
    /* box-shadow: var(--box-shadow); */
}

.top__guide__div:last-child {
    margin-bottom: 0;
    padding-bottom: 9rem;
}

.top__guide__div:nth-child(2n) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.top__guide__slider {
    position: relative;
    width: 61%;
    aspect-ratio: 14/9;
    overflow: hidden;
}

.top__guide__slider img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: bottom;
       object-position: bottom;

}

.slick-arrow {
    z-index: 2;
    aspect-ratio: 40 / 59;
    width: auto;
    height: 6rem;
  }

  .slick-arrow:before{
    content:""!important;
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
}
.slick-prev {
  left: 0;
}
.slick-next {
  right: 0;
}
.slick-next:before{
    background: url(../img/common/next_pc.png)!important;
    background-size: contain!important;
}

.slick-prev:before{
    background: url(../img/common/prev_pc.png)!important;
    background-size: contain!important;
}
.slick-dots {
    z-index: 2;
    bottom: 0;
}
.slick-dots li button:before {
    color: #867972;
}
.slick-dots li.slick-active button:before {
    color: #fff;
}
.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.top__guide__div__text {
    position: relative;
    top: -3rem;
    width: 29%;
    margin: auto;
}



.guide__h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    text-align: center;
}

.guide__h3 img {
    width: auto;
    height: 7rem;
}

.guide__p {
    line-height: 2;
}

.top__guide__last {
    position: relative;
    width: 100%;
    height: 56rem;
}

.top__guide__last__p {
    position: absolute;
    z-index: 1;
    left: 7rem;
    top: 9rem;
    font-size: var(--font-size);
    line-height: var(--line-height);
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
}

.top__guide__last__p.en {
    left: 2rem;
    top: 19rem;
    -webkit-writing-mode: inherit;
        -ms-writing-mode: inherit;
            writing-mode: inherit;
    text-orientation: inherit;
    -webkit-font-feature-settings: inherit;
            font-feature-settings: inherit;
}


.top__guide__last__pic {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 82%;
    max-height: 100%;
    aspect-ratio: 1727 / 1314;
}

.top__guide__last__pic img {
    width: 100%;
    height: 100%;
}

/***************
営業時間
***************/

.main__bg {
    background: url(../img/common/logo4.png) left +2% bottom +3rem / 3% no-repeat fixed;
}

.top__hour__div {
    position: relative;
    width: 52%;
    height: 5rem;
    margin: auto;
}

.top__hour.en .top__hour__div {
    width: 60%;
}

.top__hour__div * {
    position: absolute;
}

.top__hour__div p:nth-child(1) {
    top: 0;
    bottom: 0;
    left: 3rem;
    margin: auto;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    font-size: 1.9rem;
}

.top__hour__div p:nth-child(2) {
    top: 0;
    right: 9rem;
    font-size: 1.8rem;
}

.top__hour__div small:nth-child(3) {
    right: 3rem;
    bottom: 0;
    font-size: 1rem;
}

.top__calendar {
    display: block;
    width: 70%;
    height: 470px;
    margin: 3rem auto 0;
    border: none;
    border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

/***************
料金
***************/

.top__fee__div {
    position: relative;
    width: 77%;
    height: 13rem;
    margin: auto;
}

.top__fee__div p {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    width: 44%;
    line-height: 1.1;
    border-bottom: .2rem solid #000;
}

.top__fee__div p:nth-child(1) {
    top: 0;
    left: 0;
}
.top__fee__div p:nth-child(2) {
    top: 5rem;
    left: 0;
}
.top__fee__div p:nth-child(3) {
    top: 10rem;
    left: 0;
}
.top__fee__div p:nth-child(4) {
    top: 3rem;
    right: 0;
    width: 46%;
    border-bottom: none;
}
.top__fee__div small:nth-child(5) {
    position: absolute;
    top: 6.6rem;
    right: 0;
    width: 46%;
    font-size: 1.2rem;
}

/*「大人」*/
.top__fee__div p span:nth-child(1) {
    font-size: 1.7rem;
}
/*「◯◯◯円」*/
.top__fee__div p span:nth-child(2) {
    font-size: 2.4rem;
}

/***************
アクセス
***************/

.top__access {
    font-size: 1.4rem;
    padding-bottom: 7rem;
}

.top__access__text {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: auto;
}

.top__access__map {
    display: block;
    width: 70%;
    height: auto;
    aspect-ratio: 1 / .6;
    margin: auto;
    border: none;
    border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}

.top__access__details {
    width: 71%;
    position: relative;
    height: 32.4rem;
    margin: 2rem auto;
}

.access__public {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 61%;
    padding-block: 1rem;
    border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    background-color: #fff;
}

.access__public__p {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    padding-inline: 1rem;
    margin: 0 auto 1rem;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    border-bottom: .1rem solid #000;
}

.access__car {
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    background-color: #fff;
}

.access__car__pic img {
    width: 100%;
    aspect-ratio: 700/973;
}

.access__addr,
.access__tel {
    position: absolute;
    left: 0;
    bottom: 16rem;
    width: 61%;
    padding-block: 1rem;
    font-weight: 700;
    text-align: center;
    border-radius: var(--border-radius);
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
    background-color: #fff;
}

.access__tel {
    bottom: 10.5rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    padding-inline: 1.5rem;
    text-align: left;
}

.access__tel.en {
    bottom: 7rem;
}

/***************
SNS
***************/

.top__sns__div {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1% 1fr 1% 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1%;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 98%;
    margin: auto;
}

.top__sns__div * {
    width: 100% !important;
    max-width: none !important;
    min-width: unset !important;
    height: auto !important;
    max-height: none !important;
    min-height: unset !important;
    aspect-ratio: 1 / 1.5;
}

div._2p3a {
    width: auto !important;
}

/* フッター */
.murasakiHpTop__footer {
    margin-bottom: 2rem;
    padding-block: 6rem 4rem;
    border-bottom: .1rem solid #000;
}

.murasakiHpTop__footer img {
    width: 8%;
    aspect-ratio: 1/1;
    margin: auto;
}


/*コンテンツフェードイン*/

.fade__animation {
    opacity: 0;
    -webkit-transition: opacity 1000ms 0.5s;
    -o-transition: opacity 1000ms 0.5s;
    transition: opacity 1000ms 0.5s;
}

.fade__animation.visible {
    opacity: 1;
}

.move__animation {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: top 1000ms 0.5s;
    -o-transition: top 1000ms 0.5s;
    transition: top 1000ms 0.5s;
}

.fade__animation.visible .move__animation.active {
    top: -16px;
}

@media screen and (min-width:1350px) {   
    html.murasakiHpTop {
        font-size: 13.5px;
    }
}

@media screen and (max-width:980px) {

    .content {
        padding-inline: 0;
    }

    .top__guide {
        background:
        url(../img/icon/2.png) right +7% top +49.6rem / 15rem no-repeat,
        url(../img/icon/3.png) left +7% top +93rem / 9rem no-repeat,
        url(../img/icon/4.png) right +7% top +140.3rem / 12.4rem no-repeat,
        url(../img/icon/5.png) left +7% top +187rem / 10rem no-repeat,
        url(../img/icon/6.png) right +8% bottom +8rem/ 14rem no-repeat;
    }

}