@charset "UTF-8"; /* ===== * FONTS =================================================================== */ @keyframes rotate-left {0% {transform: rotate(360deg);}100% {transform: rotate(0deg);}} @keyframes rotate-right {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}} @keyframes pathmove {0% {height: 0;bottom: 100%;}50% {height: 100%;bottom: 0;}100% {height: 100%;bottom: -100%;}} /* ===== * MODULE =================================================================== */ /* ===== * LAYOUT :: ALL DEVICE =================================================================== */ #Contents {position: relative;z-index: 2;background: var(--grad-05);transition: opacity var(--easing) 1500ms;} #Contents::before {position: fixed;top: 0;left: 0;width: 100%;height: 100%;content: "";background: url("../img/common/bg_01.webp") repeat 0 0;} #Contents.staging {opacity: 1!important;} #Main {position: relative;} p, ul, ol, li, dl, dd, table {margin-bottom: 1em;} * > *:last-child {margin-bottom: 0;} sup {font-size: 10px;vertical-align: super;} img {display: block;width: 100%;height: auto;} a.btn {display: block;text-decoration: none;} figure[data-caps] {position: relative;} figure[data-caps]::after {content: attr(data-caps)"";position: absolute;bottom: 0;right: 0;line-height: 1;font-size: 10px;padding: 1em;z-index: 2;color: #fff;} figure[data-caps].invert::after {color: #333;} .fadeIn.observe {position: relative;opacity: 0;transform: scale(1.05) translateY(30px);transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;} .fadeIn.append {opacity: 1;transform: scale(1) translateY(0);} .appear.observe {position: relative;opacity: 0;-webkit-backface-visibility: hidden;backface-visibility: hidden;} .appear.append {opacity: 1;transition: opacity ease-out 600ms 200ms;} .transitionend .typeWriter > span {opacity: 1;} .typeWriter > span {opacity: 0;} .typeWriter > span:nth-child(1) {transition: opacity ease-in 1000ms;} .typeWriter > span:nth-child(2) {transition: opacity ease-in 1000ms 50ms;} .typeWriter > span:nth-child(3) {transition: opacity ease-in 1000ms 100ms;} .typeWriter > span:nth-child(4) {transition: opacity ease-in 1000ms 150ms;} .typeWriter > span:nth-child(5) {transition: opacity ease-in 1000ms 200ms;} .typeWriter > span:nth-child(6) {transition: opacity ease-in 1000ms 300ms;} .typeWriter > span:nth-child(7) {transition: opacity ease-in 1000ms 350ms;} .typeWriter > span:nth-child(8) {transition: opacity ease-in 1000ms 400ms;} .typeWriter > span:nth-child(9) {transition: opacity ease-in 1000ms 450ms;} .typeWriter > span:nth-child(10) {transition: opacity ease-in 1000ms 500ms;} .typeWriter > span:nth-child(11) {transition: opacity ease-in 1000ms 550ms;} .typeWriter > span:nth-child(12) {transition: opacity ease-in 1000ms 600ms;} .typeWriter > span:nth-child(13) {transition: opacity ease-in 1000ms 650ms;} .typeWriter > span:nth-child(14) {transition: opacity ease-in 1000ms 700ms;} .typeWriter > span:nth-child(15) {transition: opacity ease-in 1000ms 750ms;} .typeWriter > span:nth-child(16) {transition: opacity ease-in 1000ms 800ms;} .typeWriter > span:nth-child(17) {transition: opacity ease-in 1000ms 850ms;} .typeWriter > span:nth-child(18) {transition: opacity ease-in 1000ms 900ms;} .typeWriter > span:nth-child(19) {transition: opacity ease-in 1000ms 950ms;} .typeWriter > span:nth-child(20) {transition: opacity ease-in 1000ms 1000ms;} .typeWriter > span:nth-child(21) {transition: opacity ease-in 1000ms 1050ms;} .typeWriter > span:nth-child(22) {transition: opacity ease-in 1000ms 1100ms;} .typeWriter > span:nth-child(23) {transition: opacity ease-in 1000ms 1150ms;} .typeWriter > span:nth-child(24) {transition: opacity ease-in 1000ms 1200ms;} .typeWriter > span:nth-child(25) {transition: opacity ease-in 1000ms 1250ms;} .typeWriter > span:nth-child(26) {transition: opacity ease-in 1000ms 1300ms;} .typeWriter > span:nth-child(27) {transition: opacity ease-in 1000ms 1350ms;} .typeWriter > span:nth-child(28) {transition: opacity ease-in 1000ms 1400ms;} .typeWriter > span:nth-child(29) {transition: opacity ease-in 1000ms 1450ms;} .typeWriter > span:nth-child(30) {transition: opacity ease-in 1000ms 1500ms;} .typeWriter > span:nth-child(31) {transition: opacity ease-in 1000ms 1550ms;} .typeWriter > span:nth-child(32) {transition: opacity ease-in 1000ms 1600ms;} .typeWriter > span:nth-child(33) {transition: opacity ease-in 1000ms 1650ms;} .typeWriter > span:nth-child(34) {transition: opacity ease-in 1000ms 1700ms;} .typeWriter > span:nth-child(35) {transition: opacity ease-in 1000ms 1750ms;} .typeWriter > span:nth-child(36) {transition: opacity ease-in 1000ms 1800ms;} .typeWriter > span:nth-child(37) {transition: opacity ease-in 1000ms 1850ms;} .typeWriter > span:nth-child(38) {transition: opacity ease-in 1000ms 1900ms;} .typeWriter > span:nth-child(39) {transition: opacity ease-in 1000ms 1950ms;} .typeWriter > span:nth-child(40) {transition: opacity ease-in 1000ms 2000ms;} .tbl-list {display: table;} .tbl-list > * {display: table-cell;vertical-align: top;} .ttl-style-01 {font-size: 125%;font-family: var(--serif);text-align: center;letter-spacing: 0.3em;color: #fff;} .ttl-style-01 span {display: block;margin-bottom: 0.25em;background: var(--grad-04);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 150%;line-height: 1;color: var(--color-01);} .ttl-style-02 {position: relative;border-bottom: 1px solid #eee;margin-bottom: 1em;padding-bottom: 0.25em;font-size: 100%;font-family: var(--serif);letter-spacing: 0.3em;color: var(--color-01);} .ttl-style-02 span {margin-right: 1em;font-size: 150%;color: var(--color-01);} .ttl-style-02::before {content: "";position: absolute;top: 100%;left: 0;width: 1em;height: 1px;background-color: var(--color-01);} .lead {font-family: var(--serif);text-align: center;line-height: 2.5;letter-spacing: 0.2em;} .lead > span {display: inline-block;white-space: nowrap;} .grad {display: inline-block;background: var(--grad-03);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} .loader {position: fixed;top: calc(50% - 32px);left: calc(50% - 32px);width: 64px;height: 64px;z-index: -1;} .loader div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;box-sizing: border-box;opacity: .8;} .one {border-top: 1px solid #8FB259;animation: rotate-left 1s linear infinite;} .two {border-right: 1px solid #CCCC52;animation: rotate-right 1s linear infinite;} .three {border-bottom: 1px solid #FFD933;animation: rotate-right 1s linear infinite;} .four {border-left: 1px solid #FF7F00;animation: rotate-right 1s linear infinite;} .pathmove {position: relative;overflow: hidden;background-color: var(--color-02);width: 1px;height: 2em;margin: 0 auto;} .pathmove span {animation: pathmove 1.5s both cubic-bezier(.15, .31, .24, .88) infinite;position: absolute;bottom: 0;right: 0;z-index: 2;background-color: #fff;width: 1px;text-indent: -999em;} .venogallery {position: relative;} .venogallery::before {content: "";position: absolute;top: 0;right: 0;width: 2em;height: 2em;background: #fff url("../img/common/icon_search.svg") no-repeat 50% / 50% auto;filter: invert(1);opacity: 0.8;} .figlio {max-width: 1200px!important;margin: 0 auto;} /* ----- * Header -------------------------------------- */ #GlobalHeader h1 a {text-indent: 100%;white-space: nowrap;overflow: hidden;background: transparent url("../img/common/logo_01_invert.svg") no-repeat 0 50%;background-size: contain;} #GlobalHeader h1 a::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: transparent url("../img/common/logo_01.svg") no-repeat 0 50% / contain;transition: opacity ease 200ms;opacity: 0;} #GlobalHeader .container::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgb(255 255 255 / 80%);z-index: -1;opacity: 0;transition: opacity var(--easing) 400ms;} #GlobalHeader.standby h1 a::before {opacity: 1;} #GlobalHeader.standby .container::after {opacity: 1;} /* ----- * Navigation -------------------------------------- */ #GlobalNavigation {position: fixed;top: 0;left: 0;right: 0;bottom: 0;overflow-y: scroll;transition: opacity linear 400ms, z-index linear 1ms 400ms;background: var(--grad-05);opacity: 0;z-index: -1;} #GlobalNavigation::-webkit-scrollbar{display: none;} #GlobalNavigation nav {padding: 2em;box-sizing: border-box;min-height: 100%;} #GlobalNavigation h2 {width: calc(100% - 4em);max-width: 260px;margin: 0 auto 3em;} #GlobalNavigation ul {display: flex;flex-wrap: wrap;} #GlobalNavigation ul li.disabled a {pointer-events: none;cursor: default;opacity: 0.2;} #GlobalNavigation ul.main li {margin: 1em 0;} #GlobalNavigation ul.main li a span {display: block;font-size: 200%;font-family: var(--serif);line-height: 1.2;letter-spacing: 0.15em;} #GlobalNavigation ul.main li a {position: relative;letter-spacing: 0;font-size: 75%;} #GlobalNavigation ul.sub {border-top: 1px solid rgb(255 255 255 / 10%);border-bottom: 1px solid rgb(255 255 255 / 10%);padding: 1em 0;} #GlobalNavigation ul.sub li {margin: 1em 0;} #GlobalNavigation ul.sub li a {position: relative;font-size: 87.5%; color: #fff;} #GlobalNavigation ul.sub li a[data-icon="・"]::after {content: "";display: inline-block;width: 1em;height: 0.66em;margin-left: 0.25em;background: transparent url("../img/common/icon_arrow_right.svg") no-repeat 100% 50% / contain;filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(81deg) brightness(106%) contrast(106%);} #GlobalNavigation ul.cv li a {display: block;background-color: rgba(156,114,103,0.2);height: 5em;position: relative;font-family: var(--serif);font-size: 100%;color: #fff;} #GlobalNavigation ul.cv li a span {display: block;position: absolute;top: 50%;left: 0;right: 0;text-align: center;transform: translateY(-50%);line-height: 1.2;} #GlobalNavigation ul.cv li a::after {content: "";position: absolute;top: 50%;left: 1em;transform: translateY(-50%);width: 1em;height: 1em;filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(59deg) brightness(104%) contrast(101%);} #GlobalNavigation ul.cv li.login a {background: #ff5032 url("../img/common/bg_01.webp") no-repeat 80% 0 / 200% auto;background-blend-mode: screen;} #GlobalNavigation ul.cv li.login a::after {background: transparent url("../img/common/icon_desktop.svg") no-repeat 0 50% / contain;} #GlobalNavigation ul.cv li.request a {background: var(--grad-06);} #GlobalNavigation ul.cv li.request a::after {background: transparent url("../img/common/icon_email.svg") no-repeat 0 50% / contain;} #GlobalNavigation ul.cv li.reserve a {background: var(--grad-01);} #GlobalNavigation ul.cv li.reserve a::after {background: transparent url("../img/common/icon_calendar.svg") no-repeat 0 50% / contain;} #GlobalNavigation ul.banner {display: none;} #GlobalNavigation ul.banner li a {position: relative;} #GlobalNavigation ul.banner li a:before {content: ""; display: block;position: absolute;top: 0;right: 0;bottom: 0;left: 0;} #GlobalNavigation ul.banner li:nth-child(1) a:before {background: transparent url("../img/common/sic_premier.webp") no-repeat 50%;background-size: 100% auto;z-index: 2;} #GlobalNavigation ul.banner li:nth-child(2) a:before {background: transparent url("../img/common/sic_simple.webp") no-repeat 50%;background-size: 100% auto;z-index: 2;} #GlobalNavigation h3 {margin-top: 1.5em;font-weight: bold;font-size: 75%;} #GlobalNavigation h3 + p {text-align: center;font-size: 75%;line-height: 1.4;letter-spacing: 0;} #GlobalNavigation h3 + p a {text-decoration: none;white-space: nowrap;} #GlobalNavigation h3 + p span {white-space: nowrap;display: inline-block;} #GlobalNavigation h3 + p strong {display: block;margin: 0.1em 0;font-family: var(--serif);font-weight: normal;font-size: 400%;line-height: 1;letter-spacing: 0.1em;} /*#GlobalNavigation h3 + p strong::before {content: "";display: inline-block;vertical-align: bottom;width: 1em;height: 1em;background: transparent url("../img/common/icon_freedial.svg") no-repeat 0 50%;background-size: contain;filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(59deg) brightness(104%) contrast(101%);}*/ #Switch .toggle {display: block;width: 1.5em;height: 1em;padding: 1.25em 1em 0.75em 1em;cursor: pointer;position: relative;z-index: 101;} #Switch .toggle > span {display: block;position: relative;height: 100%;transform: scale(1.5);} #Switch .toggle > span span {display: block;position: absolute;height: 1px;width: 100%;background: #fff;left: 0;transition: all var(--easing) 200ms;} #Switch .toggle > span span:nth-child(1) {top: 0;} #Switch .toggle > span span:nth-child(2) {top: 50%;margin-top: -1px;} #Switch .toggle > span span:nth-child(3) {bottom: 0;} body.open.mac {overflow: hidden;} body.open #Switch .toggle > span span:nth-child(1) {top: 50%;left: 50%;transform-origin: 50% 50%;transform: translate(-50%, -50%) rotate(315deg);} body.open #Switch .toggle > span span:nth-child(2) {width: 0;left: 50%;} body.open #Switch .toggle > span span:nth-child(3) {bottom: 50%;left: 50%;transform-origin: 50% 50%;transform: translate(-50%, 50%) rotate(-315deg);} body.open #GlobalNavigation {z-index: 4;opacity: 1;transition: opacity var(--easing) 400ms;} #GlobalNavigation ul li a[data-icon="NEW"]::before {content: attr(data-icon)"";display: block;position: absolute;top: -0.5em;left: 0;transform: translateY(-100%);padding: 0 1.5em;background-color: brown;line-height: 1.25;color:#fff;font-family: var(--serif);font-size: 10px;} #GlobalNavigation ul li a[data-icon="期間限定"]::before {content: attr(data-icon)"";position: absolute;top: -0.5em;left: 0;transform: translateY(-100%);border: 1px solid #dfc6a1;padding: 0 0.75em;font-size: 10px;color: #dfc6a1;} #GlobalNavigation ul li a[data-icon="期間限定"]::after {content: "";display: inline-block;width: 1em;height: 0.66em;margin-left: 0.25em;background: transparent url("../img/common/icon_external.svg") no-repeat 100% 50% / contain;filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(81deg) brightness(106%) contrast(106%);} /* ----- * Pagetop -------------------------------------- */ #Pagetop > p {position: fixed;bottom: 0;right: 0;opacity: 0;transition: opacity ease 500ms;z-index: 3;font-size: 87.5%;width: 3.5em;background-color: rgba(83, 115, 136 ,0.8);} #Pagetop.standby > p {opacity: 1;} #Pagetop.staging > p a {cursor: default;pointer-events: none;} #Pagetop > p img {transform: scale(0.5);filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(48deg) brightness(108%) contrast(100%);} #Billboard.staging + #Pagetop.standby > p {opacity: 0;} /* ----- * Main -------------------------------------- */ #Main .block-common-01 h3 {position: relative;} #Main .block-common-01 h3 strong {display: inline-block;background: var(--grad-04);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 150%;color: var(--color-01);} #Main .block-common-01 h3::before {content: "";position: absolute;top: 0.75em;left: 0;right: calc(50% + 11em);height: 1px;background-color: var(--color-01);} #Main .block-common-01 h3::after {content: "";position: absolute;top: 0.75em;right: 0;left: calc(50% + 11em);height: 1px;background-color: var(--color-01);} #Main .block-common-01 h4 {font-size: 10px;letter-spacing: 0.15em;} #Main .block-common-01 .swiper-container {margin-top: 0.3em;margin-right: 1.5em;height: calc(100% - 0.3em);} #Main .block-common-01 .swiper-wrapper, #Main .block-common-01 .swiper-slide {height: 100%;position: relative;} #Main .block-common-01 .swiper-slide img:nth-child(1) {object-fit: cover;height: 100%;} #Main .block-common-01 .swiper-slide img:nth-child(2) {position: absolute;bottom: 1em;right: 1em;width: calc(100% - 2em);max-width: 345px;} #Main .block-common-01 .swiper-slide::before {content: "image";position: absolute;top: 0;right: 0;line-height: 1;font-size: 10px;padding: 1em;z-index: 2;color: #fff;} #Main .block-common-01 .grid-list ul {display: flex;} #Main .block-common-01 .grid-list ul li {flex: 1;margin: 0;} #Main .block-common-01 .grid-list .door {width: 100%;} #Main .block-common-01 .grid-list .flooring {width: 100%;margin-top: 1em;} #Main .block-common-01 .grid-list .tatami {width: 33.33%;margin-top: 1em;} #Main .block-common-01 .grid-list .plate {width: 33.33%;margin-top: 1em;} #Main .block-common-01 .grid-list .panel {width: 66.67%;margin-top: 1em;} #Main .block-common-01 .grid-list .caps {width: 66.67%;margin-top: 1em;} #Main .block-common-01 .grid-list .caps p {padding-top: 1.5em;padding-left: 1.5em;font-size: 10px;} /* ----- * Footer -------------------------------------- */ .pageCaption {position: relative;padding: 1.5em 1em;border-bottom: 1px solid rgb(106 136 156 / 10%);} .pageCaption p {font-size: 75%;line-height: 1.5;margin: 0;letter-spacing: 0;} #Colophon {position: relative;background-color: #fff;} #Colophon address h3, #Colophon address .tel p, #Colophon address .tel a, #Colophon address .owner a, #Colophon address .seller a {color: #272f33;} #Colophon .copyright {color: #00344e;text-align: center;font-size: 75%;font-family: var(--serif);letter-spacing: 0.1em;padding: 1em 0;line-height: 1.5;} #Colophon .copyright span {white-space: nowrap;display: inline-block;} /* ===== * LAYOUT :: PC =================================================================== */ @media only screen and (min-width:769px) { /* ----- * Module -------------------------------------- */ #Contents .container {width: 100%;max-width: 1260px;padding: 0 2em;margin-left: auto;margin-right: auto;box-sizing: border-box;} a[href^="tel:"] {pointer-events: none;} a.btn {transition: opacity var(--easing) 200ms;cursor: pointer;} a.btn:hover {opacity: 0.75;} .cf:after, .cf::after {content: "";display: table;clear: both;} .cf > .left {float: left;} .cf > .right {float: right;} .grid-list-wrap {overflow: hidden;} .grid-list {display: flex;align-items: stretch;flex-direction: row;flex-wrap: wrap;} .column-list-wrap {overflow: hidden;} .column-list {display: flex;flex-wrap: nowrap;justify-content: space-between;} /* ----- * Header -------------------------------------- */ #GlobalHeader {height: 4em;margin-bottom: -4em;} #GlobalHeader .container {max-width: 100%;position: fixed;top: 0;left: 0;padding: 0 21.5em 0 1em;display: flex;justify-content: space-between;flex-wrap: wrap;z-index: 4;} #GlobalHeader h1 {font-size: 100%;width: 18.75em;} #GlobalHeader h1 a {position: relative;line-height: 4;background: transparent url("../img/common/logo_01_invert.svg") no-repeat 0 50% / contain;} #GlobalHeader nav > ul {display: flex;align-items: center;height: 100%;} #GlobalHeader nav > ul > li {margin: 0;} #GlobalHeader nav > ul > li a {display: block;margin: 0 1em 0 0;white-space: nowrap;font-size: 75%;font-family: var(--serif);-webkit-font-smoothing: subpixel-antialiased;line-height: 1;color: #fff;transition: color var(--easing) 400ms;} #GlobalHeader nav > ul > li a span {display: inline-block;border: 1px solid #fff;padding: 0.5em;margin-right: 1em;vertical-align: middle;font-size: 100%;} #GlobalHeader nav > ul > li a::after {content: "〉";margin-left: 0.5em;} #GlobalHeader.standby nav > ul > li a {color: #0a141f;} body:not(.open) #GlobalHeader.standby h1 a {color: #fff;} body:not(.open) #GlobalHeader.standby h1 a:nth-child(2) {color: slategrey;} body:not(.open) #GlobalHeader.standby h1 a:nth-child(2)::before {background-color: slategrey;} body:not(.open) #GlobalHeader.standby + #Switch::after {color: #fff;} body:not(.open) #GlobalHeader.standby + #Switch .toggle > span span {background-color: #fff;} #Conversion {position: fixed;top: 0;right: 3.5em;z-index: 4;} #Conversion ul {display: flex;align-items: center;} #Conversion ul > li {margin: 0;background-color: #fff;} #Conversion ul > li a {display: block;background-color: rgba(156,114,103,0.2);height: 4em;width: 9em;position: relative;font-family: var(--serif);font-size: 100%;color: #fff;} #Conversion ul > li a span {display: block;position: absolute;top: 50%;left: 0;right: 0;text-align: center;font-size: 87.5%;transform: translateY(-50%);line-height: 1.2;} #Conversion ul > li.login a {background: #ff5032 url("../img/common/bg_01.webp") no-repeat 80% 0 / 200% auto;background-blend-mode: screen;} #Conversion ul > li.request a {background: var(--grad-06);} #Conversion ul > li.reserve a {background: var(--grad-01);} #Conversion ul > li.tel {display: none;} /* ----- * Navigation -------------------------------------- */ #Switch {position: fixed;top: 0;right: 0;z-index: 5;background: var(--grad-02);} #Switch::after {content: "MENU";display: block;transform-origin: 50% 0;transform: scale(0.8);padding-bottom: 0.6em;text-align: center;line-height: 1;font-size: 10px;color: #fff;transition: color var(--easing) 400ms;} #GlobalNavigation nav {display: flex;flex-direction: column;justify-content: center;align-items: center;} #GlobalNavigation ul {max-width: 71.5em;width: calc(100% - 3em);} #GlobalNavigation ul.main li {width: calc(25% - 0.5em);} #GlobalNavigation ul.sub {justify-content: space-between;} #GlobalNavigation ul.cv {justify-content: center;} #GlobalNavigation ul.cv li {width: calc(33.33% - 1em);margin: 1em 0 0;} #GlobalNavigation ul.banner {justify-content: space-between;} #GlobalNavigation ul.banner li {max-width: 35.25em;width: calc(50% - 0.5em);} /* ----- * Bread -------------------------------------- */ #Breadcrumb {position: relative;border-top: 1px solid rgb(106 136 156 / 20%);border-bottom: 1px solid rgb(106 136 156 / 20%);background-color: rgb(0 0 0 / 16%);} #Breadcrumb ul {overflow: hidden;position: relative;z-index: 2;} #Breadcrumb ul li {position: relative;float: left;margin: 0;padding: 1em;font-size: 75%;line-height: 1;color: #fff;} #Breadcrumb ul.col-05-list li:nth-child(3) {max-width: 17em;} #Breadcrumb ul.col-07-list li:nth-child(3),#Breadcrumb ul.col-07-list li:nth-child(5) {max-width: 10em;} #Breadcrumb ul li a {display: block;overflow: hidden;white-space: nowrap;text-decoration: none;text-overflow: ellipsis;} #Breadcrumb ul li a svg {width: 1em;height: 1em;fill: #cedae8;} #Breadcrumb ul li.separator {height: 1em;padding: 1em 0.5em;} #Breadcrumb ul li.separator::before {position: absolute;top: 50%;right: 0.5em;z-index: 2;display: block;content: "";border-right: 1px solid rgb(255 255 255 / 20%);width: 1px;height: 50%;transform: skew(-25deg);} #Breadcrumb ul li.separator::after {position: absolute;bottom: 50%;right: 0.5em;z-index: 2;display: block;content: "";border-right: 1px solid rgb(255 255 255 / 20%);width: 1px;height: 50%;transform: skew(25deg);} #Breadcrumb ul li span,#Breadcrumb ul li .icon-angle-right {display: none;} /* ----- * Main -------------------------------------- */ #Main .block > .container {padding-top: 5em;padding-bottom: 5em;width: calc(100% - 4em);} #Main .anchor {margin-top: -6.775em;padding-top: 6.775em;} #Main .block-common-01 .container {padding-top: 0;} #Main .block-common-01 .column-list > div {width: 50%;} /* ----- * Footer -------------------------------------- */ #Colophon .container {overflow: hidden;} #Colophon nav, #Colophon address {padding: 1em 0;border-bottom: 1px solid rgb(106 136 156 / 10%);} #Colophon nav ul {display: table;} #Colophon nav ul li {display: table-cell;margin: 0;vertical-align: middle;} #Colophon nav ul li.cv a {display: block;background-color: rgba(156,114,103,0.2);height: 3em;width: 10em;position: relative;font-family: var(--serif);font-size: 100%;color: #fff;} #Colophon nav ul li.cv a span {display: block;position: relative;top: 50%;left: 0;right: 0;text-align: center;line-height: 1.2;font-size: 87.5%;transform: translateY(-50%);} #Colophon nav ul li.login a {background: #ff5032 url("../img/common/bg_01.webp") no-repeat 80% 0 / 200% auto;background-blend-mode: screen;} #Colophon nav ul li.request a {background: var(--grad-06);} #Colophon nav ul li.reserve a {background: var(--grad-01);} #Colophon nav ul li:not(.cv) a {display: inline-block;white-space: nowrap;font-size: 70%;font-family: var(--serif);line-height: 1;color: #333;} #Colophon nav ul li:not(.cv) a span {display: inline-block;border: 1px solid var(--color-02);padding: 0.5em;margin-right: 1em;vertical-align: middle;font-size: 75%;} #Colophon nav ul li:not(.cv) a::after {content: "〉";margin-left: 0.5em;margin-right: 1em;} #Colophon address h3 {font-weight: bold;font-size: 75%;} #Colophon address .tel a, #Colophon address .owner a, #Colophon address .seller a {text-decoration: none;color: #272f33;} #Colophon address .tel p, #Colophon address .owner p, #Colophon address .seller p {font-size: 10px;line-height: 1.4;letter-spacing: 0;} #Colophon address .tel p span, #Colophon address .owner p span, #Colophon address .seller p span {white-space: nowrap;display: inline-block;} #Colophon address .tel strong {display: block;font-family: var(--serif);font-weight: normal;font-size: 400%;line-height: 1;letter-spacing: 0.1em;} /*#Colophon address .tel strong::before {content: "";display: inline-block;vertical-align: bottom;width: 1em;height: 1em;background: transparent url("../img/common/icon_freedial.svg") no-repeat 0 50%;background-size: contain;}*/ #Colophon address .owner a {display: flex;justify-content: space-between;align-items: center;gap: 1em;} #Colophon address .owner p {max-width: 30em;} #Colophon address .seller a {display: flex;justify-content: space-between;gap: 1em;} #Colophon address .seller p {max-width: 30em;} } @media only screen and (min-width: 769px) and (max-width: 1140px) { #GlobalHeader h1 a small {line-height: 1.225;} #GlobalHeader nav > ul {flex-direction: column;justify-content: center;align-items: end;} #GlobalHeader nav > ul li + li a {margin-top: 0.75em;} #GlobalNavigation ul.main li {width: calc(33.33% - 0.5em);} #GlobalNavigation ul.sub li:nth-child(1) {width: 10em;} #GlobalNavigation ul.sub li:nth-child(2) {width: calc(100% - 10em);} #GlobalNavigation ul.sub li:nth-child(3) {width: 16em;} #GlobalNavigation ul.sub li:nth-child(4) {width: calc(100% - 16em);} } /* ===== * LAYOUT :: TAB =================================================================== */ @media only screen and (min-width: 769px) and (max-width: 1024px) { body {min-width: 1024px;} #GlobalHeader, #Colophon nav, #Switch, #Conversion {font-size: 87.5%;letter-spacing: 0;} #Conversion ul > li a {width: 7em;} #GlobalHeader .container {padding-right: 24.5em;} #Colophon address .left {border-bottom: 1px solid rgba(156,114,103,0.2);padding-bottom: 1em;margin-bottom: 1em;} #Colophon address .left, #Colophon address .right {float: none;} #Colophon address .tel {text-align: center;} #Colophon address .owner {max-width: calc(50% - 1em);margin: 0 auto;} #Colophon address .seller {max-width: calc(50% - 1em);margin: 0 auto;} } /* ===== * LAYOUT :: SP =================================================================== */ @media only screen and (max-width:768px) { body {font-size: 4vw;} #Contents {padding: 0 0 5em;} .cf > .left, .cf > .right {float: none;} .tbl-style-01 {display: block;border-top: 3px solid #eaf1f3;background-color: transparent;} .tbl-style-01 tr {display: block;border-bottom: 3px solid #eaf1f3;} .tbl-style-01 thead {display: none;} .tbl-style-01 tbody {display: block;} .tbl-style-01 tr th {display: block;font-weight: 600;text-align: center;padding: 0;background-color: transparent;} .tbl-style-01 tr td {display: block;position: relative;min-height: 1.5em;font-weight: 200;border-bottom: 1px solid rgba(156,114,103,0.2);background-color: #fff;padding: 1em;width: auto;text-align: right;} .tbl-style-01 tr td:first-child {text-align: left;background-color: #678b9c;color: #fff;} .tbl-style-01 tr td:last-child {border-bottom: 0 none transparent;} .tbl-style-01 tr td::before {content: attr(aria-label);font-weight: 600;display: block;position: absolute;top: 1em;left: 1em;} .tbl-style-01 tr td:nth-child(2)::before {color: #0058a2;} .tbl-style-01 tr td:nth-child(3)::before {color: #0089cb;} .ttl-style-01 {margin-bottom: 0.75em;letter-spacing: 0;} .ttl-style-01 span {font-size: 125%;} .ttl-style-02 {padding-bottom: 0.25em;margin-bottom: 0.5em;letter-spacing: 0;} .ttl-style-02 span {display: block;} .lead {line-height: 2.0;} .scroller {overflow-x: scroll;position: relative;} .scroller::before {content: "";display: block;transition: opacity var(--easing) 500ms;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: transparent url("../img/common/icon_swipe.svg") no-repeat 50% 50%;background-size: 20% auto;z-index: 3;} .scroller::after {content: "";display: block;transition: opacity var(--easing) 500ms;position: absolute;top: 0;left: 0;bottom: 0; background-color: rgba(0, 0, 0, 0.2);width: 150%;padding: 3%;z-index: 2;} .scroller.on::before,.scroller.on::after {opacity: 0;} .scroller img {width: 150%;padding: 3%;opacity: 0.5;transition: opacity var(--easing) 100ms;} .scroller.on img {opacity: 1;} .scroller::-webkit-scrollbar {-webkit-appearance: none !important;height: 10px !important;background: #eaeaea !important;} .scroller::-webkit-scrollbar-thumb {background: #cdcdcd !important;} /* ----- * Header -------------------------------------- */ #GlobalHeader .container {position: fixed;top: 0;left: 0;right: 0;min-height: 0%;overflow: hidden;transition: min-height var(--easing) 100ms;z-index: 4;} #GlobalHeader h1 a {background-position: 50%;background-size: auto 90%;height: 2em;transform: scale(0.7);} #GlobalHeader h1 a::before {background-position: 50%;background-size: auto 90%;} #GlobalHeader nav {display: none;} #Conversion {position: fixed;bottom: 0;left: 0;z-index: 4;} #Conversion ul {display: flex;} #Conversion ul > li {width: 20vw;height: 5em;margin: 0;padding: 0;} #Conversion ul > li a {position: relative;padding: 1em 0;height: 100%;box-sizing: border-box;display: flex;justify-content: space-between;flex-direction: column;flex-wrap: nowrap;align-items: center;} #Conversion ul > li a span {display: block;font-size: 10px;letter-spacing: 0;color: #fff;} #Conversion ul > li.tel {background: var(--grad-01);} #Conversion ul > li.tel a svg {display: block;width: auto;height: 1.5em;} #Conversion ul > li.tel a::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;width: 1px;background-color: rgb(255 255 255 / 20%);} #Conversion ul > li.tel a::after {content: "TEL";text-align: center;line-height: 1;font-size: 10px;color: #fff;} #Conversion ul > li.login a, #Conversion ul > li.request a, #Conversion ul > li.reserve a {text-align: center;line-height: 1.2;} #Conversion ul > li.login a::before, #Conversion ul > li.request a::before, #Conversion ul > li.reserve a::before {content: "";display: block;width: 1.5em;height: 1.5em;margin: 0 auto;filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(81deg) brightness(106%) contrast(106%);} #Conversion ul > li.login {background: transparent url("../img/common/bg_01.webp") no-repeat 50% 0 / 200% auto;} #Conversion ul > li.login a::before {background: transparent url("../img/common/icon_desktop.svg") no-repeat 50% / contain;} #Conversion ul > li.login span {transform: translateY(30%);} #Conversion ul > li.request {background: var(--grad-02);} #Conversion ul > li.request a::before {background: transparent url("../img/common/icon_email.svg") no-repeat 50% / contain;} #Conversion ul > li.request span {transform: translateY(30%);} #Conversion ul > li.reserve {background: var(--grad-01);} #Conversion ul > li.reserve a::before {background: transparent url("../img/common/icon_calendar.svg") no-repeat 50% / contain;} /* ----- * Pagetop -------------------------------------- */ #Pagetop > p {bottom: 6.45em;right: 0.74em;} /* ----- * Navigation -------------------------------------- */ #Switch {position: fixed;bottom: 0;right: 0;z-index: 5;background: #0a141f url(../img/common/bg_01.webp) no-repeat 0 100% / 400% auto;background-blend-mode: overlay;width: 20vw;height: 5em;} #Switch .toggle {box-sizing: border-box;width: 100%;height: 100%;padding: 1.25em 0 1em;display: flex;justify-content: space-between;flex-direction: column;flex-wrap: wrap;align-items: center;} #Switch .toggle span {width: 1.5em;height: 1em;} #Switch .toggle::after {content: "MENU";display: block;text-align: center;line-height: 1;font-size: 10px;color: #fff;} #GlobalNavigation {padding-bottom: 5em;} #GlobalNavigation h3 {text-align: center;} #GlobalNavigation h3 + p {font-size: 10px;} #GlobalNavigation h3 + p strong {margin: 0.1em -0.25em;} #GlobalNavigation ul {display: block;} #GlobalNavigation ul.main li {margin: 0 0 2em;} #GlobalNavigation ul.main li a span {line-height: 1;} /* ----- * Bread -------------------------------------- */ #Breadcrumb {position: relative;background-color: #fff;border-top: 1px solid rgba(156,114,103,0.2);border-bottom: 1px solid rgba(156,114,103,0.2);} #Breadcrumb ul {overflow: hidden;} #Breadcrumb ul li {position: relative;float: left;margin: 0;padding: 1em;overflow: hidden;line-height: 1;white-space: nowrap;text-overflow: ellipsis;} #Breadcrumb ul.col-05-list li:nth-child(5), #Breadcrumb ul.col-07-list li:nth-child(7) {max-width: 12em;} #Breadcrumb ul.col-07-list li:nth-child(3), #Breadcrumb ul.col-07-list li:nth-child(5) {max-width: 3.5em;} #Breadcrumb ul li a {display: block;overflow: hidden;white-space: nowrap;text-decoration: none;text-overflow: ellipsis;color: #259b3a;} #Breadcrumb ul li a svg {width: 1em;height: auto;fill: rgba(5, 18, 37, 0.5);} #Breadcrumb ul li.separator {height: 1em;padding: 1em 0.5em;} #Breadcrumb ul li.separator::before {position: absolute;top: 1px;right: 1px;z-index: 1;display: block;border-color: transparent transparent transparent #fff;border-style: solid;border-width: 1.5em 0 1.5em 1em;content: "";} #Breadcrumb ul li.separator::after {position: absolute;top: 1px;right: 0;display: block;border-color: transparent transparent transparent rgba(156,114,103,0.2);border-style: solid;border-width: 1.5em 0 1.5em 1em;content: "";} #Breadcrumb ul li span, #Breadcrumb ul li .icon-angle-right {display: none;} /* ----- * Main -------------------------------------- */ #Main .block > .container {padding: 1.5em 0;margin: 0 1.5em;} #Main .anchor {margin-top: -2em;padding-top: 2em;} #Main .block-common-01 h4 {letter-spacing: 0;} #Main .block-common-01 .swiper-container {margin-right: 0;margin-bottom: 1em;} #Main .block-common-01 .grid-list {display: flex;align-items: stretch;flex-direction: row;flex-wrap: wrap;} /* ----- * Footer -------------------------------------- */ #Colophon nav {display: none;} #Colophon address h3 {font-weight: bold;font-size: 75%;text-align: center;} #Colophon address .left {border-bottom: 1px solid rgba(156,114,103,0.2);padding: 1em;} #Colophon address .right {overflow: hidden;padding: 1em;} #Colophon address .tel {text-align: center;} #Colophon address .tel a, #Colophon address .owner a, #Colophon address .seller a {text-decoration: none;} #Colophon address .tel p, #Colophon address .owner p, #Colophon address .seller p {font-size: 10px;line-height: 1.4;letter-spacing: 0;} #Colophon address .tel strong {display: block;font-family: var(--serif);font-weight: normal;font-size: 360%;line-height: 1;letter-spacing: 0.1em;} /*#Colophon address .tel strong::before {content: "";display: inline-block;vertical-align: bottom;width: 1em;height: 1em;background: transparent url("../img/common/icon_freedial.svg") no-repeat 0 50%;background-size: contain;}*/ #Colophon address .owner a h4 img {width: auto;height: 2.4em;margin: 0.5em auto 0.75em;} #Colophon address .seller a h4 img {width: auto;height: 2.4em;margin: 0.5em auto 0.75em;} } @media only screen and (max-width:768px) and (orientation: landscape) {} @media only screen and (max-width: 640px) {} @media only screen and (max-width: 480px) { #Colophon address .owner, #Colophon address .seller{float: none;width: 100%;text-align: center;} #Colophon address .owner p::before, #Colophon address .seller p::before {background-position: 50% 100%;} #Colophon address .seller{margin-top: 1em;} #Colophon address .tel p span, #Colophon address .owner p span, #Colophon address .seller p span {white-space: nowrap;display: inline-block;} #Colophon .copyright {line-height: 1.2;padding: 1.4em 5em 1.4em 0;} } /* ===== * LAYOUT :: 改行調整 =================================================================== */ #Contents br.sp, #Contents br.tb, #Contents br.pc {display: none;} @media only screen and (min-width:1025px) {#Contents br.pc { display: inherit!important; }} @media only screen and (min-width: 769px) and (max-width: 1024px) {#Contents br.tb { display: inherit!important; }} @media only screen and (max-width:768px) {#Contents br.sp { display: inherit!important; }}