@charset "UTF-8";

.section-wrap {
    padding-bottom: 0;
}

.slider {
    margin-top: 40px;
    opacity: 0;
    transition: opacity 0.3s linear;
}

.slider.slick-initialized {
    opacity: 1;
}

.slider .slick-list {
    box-shadow: var(--img-shadow);
}

.slick-dots {
    margin: 24px 0 0 -4px;
    display: flex;
    justify-content: center;
}

.slick-dots li {
    width: 160px;
    margin-left: 4px;
    border: 2px solid var(--blue);
    transition: opacity 0.3s linear;
}

.slick-dots li:hover {
    cursor: pointer;
    opacity: 0.7;
}

.slick-dots .slick-active {
    opacity: 1;
    border: 2px solid var(--gold);
}

.slick-arrow {
    width: 60px !important;
    height: 60px !important;
    z-index: 2 !important;
}

.slick-arrow:before {
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    position: absolute;
    content: "" !important;
    top: 0;
    left: 0;
}

.slick-prev,
.slick-next {
    width: 20px;
    height: 20px;
    margin: auto;
    padding: 0;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    position: absolute;
    top: -95px;
    bottom: 0;
    display: block;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.slick-next {
    right: -56px !important;
}

.slick-prev {
    left: -56px !important;
}

.slick-next:before {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20icon-tabler%20icon-tabler-chevron-right%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%220.5%22%20stroke%3D%22%238f8f8f%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%20%3Cpolyline%20points%3D%229%206%2015%2012%209%2018%22%20%2F%3E%3C%2Fsvg%3E") !important;
    background-size: contain !important;
}

.slick-prev:before {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20icon-tabler%20icon-tabler-chevron-right%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%220.5%22%20stroke%3D%22%238f8f8f%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%20%3Cpolyline%20points%3D%229%206%2015%2012%209%2018%22%20%2F%3E%3C%2Fsvg%3E") !important;
    background-size: contain !important;
    transform: scale(-1, 1);
}

.slider .slick-img {
    width: 100%;
    height: 560px;
    position: relative;
    overflow: hidden;
}

.slider .slick-img img,
.slider .slick-img iframe {
    width: 100%;
    height: 560px;
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: cover;
    text-align: center;
    transform: translateY(-50%) translateX(-50%);
    object-position: center center;
}

.section-maisonette .slick-dots li:nth-child(6) img,
.section-maisonette .slick-dots li:nth-child(7) img {
    display: none;
}

.section-maisonette .slick-dots li:nth-child(6) {
    background: url(../img/with-dog/section-maisonette_img06.png) no-repeat center top / cover;
}

.section-maisonette .slick-dots li:nth-child(7) {
    background: url(../img/with-dog/section-maisonette_img07.png) no-repeat center top / cover;
}

/*================================================================
# ページタイトル
================================================================ */
.room-details-page-title {
    width: 100vw;
    height: 620px;
    background: url(../img/with-dog/page-title_bg.png) repeat center top;
}

.room-details-page-title .img {
    width: 80vw;
    height: 620px;
    margin: auto;
    position: absolute;
    right: 0;
    overflow: hidden;
    z-index: 0;
}

.room-details-page-title .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-details-page-title .page-title-box {
    width: 520px;
    min-height: 400px;
    padding: 40px 24px;
    background-color: var(--black);
    box-shadow: var(--img-shadow);
    position: relative;
    top: 140px;
    bottom: 0;
    left: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
}

.room-details-page-title .page-title-box .sub-title {
    font-family: var(--mincho);
    font-size: 16px;
    line-height: 1.618;
}

.room-details-page-title .page-title-box .title {
    margin-top: 8px;
    font-family: var(--mincho);
    font-size: 28px;
    line-height: 1.618;
}

.room-details-page-title .page-title-box .en-title {
    margin-top: 0px;
    font-family: var(--text-en);
    font-size: 14px;
    line-height: 1.618;
    color: var(--logo-color);
}

.room-details-page-title .page-title-box .text {
    margin-top: 24px;
}

.room-details-page-title .page-title-box .label {
    margin-top: 16px;
}

.room-details-page-title .page-title-box .label ul {
    display: flex;
    justify-content: center;
}

.room-details-page-title .page-title-box .label ul li+li {
    margin-left: 16px;
}

/*================================================================
# point
================================================================ */
.section-point {
    padding: 80px 0;
    background: url(../img/with-dog/section-point_bg.png) no-repeat center top / cover;
}

.section-point .box {
    display: flex;
    justify-content: center;
    text-align: center;
}

.section-point .box .box__title {
    font-size: 20px;
}

.section-point .box .box__note li {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.618;
    color: var(--gray);
    letter-spacing: 0.05em;
}

.section-point .box .gold-btn {
    width: 400px;
    margin: 24px auto 0;
}

.section-point .card-wrap {
    margin: 64px 0 0 -24px;
    display: flex;
    flex-wrap: wrap;
}

.section-point .card {
    width: calc(33% - 24px);
    margin-left: 24px;
}

.section-point .card:nth-of-type(3n + 1) {
    margin-top: 120px;
}

.section-point .card:nth-of-type(3n + 2) {
    margin-top: 60px;
}

.section-point .container {
    display: flex;
}

.section-point .title-en {
    margin-right: 8px;
    font-family: var(--text-en);
    font-size: 20px;
    line-height: 1.618;
    color: var(--logo-color);
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-font-feature-settings: "pkna";
    font-feature-settings: "pkna";
}

.section-point .img {
    width: 310px;
}

.section-point .text {
    margin-top: 24px;
}

.section-point .note {
    font-size: 12px;
    color: var(--gray);
    letter-spacing: 0.05em;
}

/*================================================================
# section-maisonette
================================================================ */
.section-maisonette {
    margin-top: 80px;
}

.section-maisonette .wrap {
    position: relative;
}

.section-maisonette .wrap::before {
    width: calc(50vw + 50% - 160px);
    height: 800px;
    filter: var(--img-invert);
    mix-blend-mode: var(--blend-mode);
    background: #fff url(../../common/img/section01_bg.png) no-repeat right top;
    position: absolute;
    content: "";
    top: 0;
    left: calc(-50vw + 50%);
    display: block;
    z-index: -1;
}

.section-maisonette .inner {
    padding: 80px 0 40px;
}

.section-maisonette .text-area {
    text-align: center;
}

.section-maisonette .sub-title {
    font-family: "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 0.3em;
}

.section-maisonette .title {
    margin: 0;
    font-family: var(--mincho);
    font-size: 32px;
    line-height: 1.618;
    letter-spacing: 0.2em;
}

.section-maisonette .text {
    margin-top: 24px;
}

/*================================================================
# section-premium
================================================================ */
.section-premium {
    margin-top: 80px;
}

.section-premium .wrap {
    position: relative;
}

.section-premium .wrap::before {
    width: calc(50vw + 50% - 160px);
    height: 800px;
    filter: var(--img-invert);
    mix-blend-mode: var(--blend-mode);
    background: #fff url(../../common/img/section02_bg.png) no-repeat left top;
    position: absolute;
    content: "";
    top: 0;
    right: calc(-50vw + 50%);
    display: block;
    z-index: -1;
}

.section-premium .inner {
    padding: 80px 0 40px;
}

.section-premium .text-area {
    text-align: center;
}

.section-premium .sub-title {
    font-family: "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 0.3em;
}

.section-premium .title {
    margin: 0;
    font-family: var(--mincho);
    font-size: 32px;
    line-height: 1.618;
    letter-spacing: 0.2em;
}

.section-premium .text {
    margin-top: 24px;
}

/*================================================================
# section-relaxation
================================================================ */
.section-relaxation {
    margin-top: 80px;
}

.section-relaxation .wrap {
    position: relative;
}

.section-relaxation .wrap::before {
    width: calc(50vw + 50% - 160px);
    height: 800px;
    filter: var(--img-invert);
    mix-blend-mode: var(--blend-mode);
    background: #fff url(../../common/img/section03_bg.png) no-repeat right top;
    position: absolute;
    content: "";
    top: 0;
    left: calc(-50vw + 50%);
    display: block;
    z-index: -1;
}

.section-relaxation .inner {
    padding: 80px 0 40px;
}

.section-relaxation .text-area {
    text-align: center;
}

.section-relaxation .sub-title {
    font-family: "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 0.3em;
}

.section-relaxation .title {
    margin: 0;
    font-family: var(--mincho);
    font-size: 32px;
    line-height: 1.618;
    letter-spacing: 0.2em;
}

.section-relaxation .text {
    margin-top: 24px;
}

/*================================================================
# section-little-garden
================================================================ */
.section-little-garden {
    margin-top: 80px;
}

.section-little-garden .wrap {
    position: relative;
}

.section-little-garden .wrap::before {
    width: calc(50vw + 50% - 160px);
    height: 800px;
    filter: var(--img-invert);
    mix-blend-mode: var(--blend-mode);
    background: #fff url(../../common/img/section04_bg.png) no-repeat left -400px top -200px;
    position: absolute;
    content: "";
    top: 0;
    right: calc(-50vw + 50%);
    display: block;
    z-index: -1;
}

.section-little-garden .inner {
    padding: 80px 0 40px;
}

.section-little-garden .text-area {
    text-align: center;
}

.section-little-garden .sub-title {
    font-family: "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 0.3em;
}

.section-little-garden .title {
    margin: 0;
    font-family: var(--mincho);
    font-size: 32px;
    line-height: 1.618;
    letter-spacing: 0.2em;
}

.section-little-garden .text {
    margin-top: 24px;
}

/*================================================================
# section-universal
================================================================ */
.section-universal {
    margin-top: 80px;
}

.section-universal .wrap {
    position: relative;
}

.section-universal .wrap::before {
    width: calc(50vw + 50% - 160px);
    height: 800px;
    filter: var(--img-invert);
    mix-blend-mode: var(--blend-mode);
    background: #fff url(../../common/img/section05_bg.png) no-repeat right top;
    position: absolute;
    content: "";
    top: 0;
    left: calc(-50vw + 50%);
    display: block;
    z-index: -1;
}

.section-universal .inner {
    padding: 80px 0 40px;
}

.section-universal .text-area {
    text-align: center;
}

.section-universal .sub-title {
    font-family: "游ゴシック Medium", "YuGothic,YuGothicM", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 0.3em;
}

.section-universal .title {
    margin: 0;
    font-family: var(--mincho);
    font-size: 32px;
    line-height: 1.618;
    letter-spacing: 0.2em;
}

.section-universal .text {
    margin-top: 24px;
}

/*================================================================
# バナー
================================================================ */
.walkthrough {
    margin-top: 64px;
}

.walkthrough a {
    width: 80%;
    margin: auto;
    display: block;
}

.walkthrough a img {
    filter: saturate(80%);
    transition: 0.3s;
}

.walkthrough a:hover img {
    filter: saturate(120%);
    transform: scale(1.01);
}