@charset "UTF-8";

main.contents {
padding: 0;
}


.salon-title {
position: absolute;
z-index: 5;
top: 14rem;
left: 5.3%;
color: #fff;
}

.salon-jp {
margin: 0;
opacity: 0;
width: 24rem;
}



.salon-catch {
position: absolute;
z-index: 5;
bottom: 12.5rem;
right: 5.3%;
color: #fff;
font-size: 4.5rem;
line-height: 1.7;
letter-spacing: 0.3em;
text-align: end;
font-family: 'Noto Serif JP', serif;
font-weight: 400;
margin: 0;
visibility: hidden;
}

.salon-catch .text-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
}

.salon-catch .letters {
display: block;
}

.salon-catch .letter {
display: inline-block;
line-height: 1.4;
}

.splide__slide img {
width: 100%;
height: 100vh;
object-fit: cover;
object-position: top center;
}

.slide-img-wrapper {
overflow: hidden;
width: 100%;
height: 100vh;
}

.slide-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
will-change: transform;
animation-play-state: paused;
animation-fill-mode: forwards;
animation-duration: 15s;
animation-timing-function: linear;
}


.splide__slide.is-active .slide-img {
animation-play-state: running;
}


.slide-img-zoom-in {
animation-name: kenburns-zoom-in;
}

@keyframes kenburns-zoom-in {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}


.slide-img-move-right {
animation-name: kenburns-move-right;
}

@keyframes kenburns-move-right {
0% {
transform: scale(1.1) translateX(-3%);
}
100% {
transform: scale(1.1) translateX(3%);
}
}


.slide-img-zoom-out {
animation-name: kenburns-zoom-out;
}

@keyframes kenburns-zoom-out {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

/* ===== ヘッダー表示/非表示 ===== */

.inc_reformq_header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
transform: translateY(-100%);
overflow: visible;
}

.inc_reformq_header.header-hidden {
transform: translateY(-100%);
transition: transform 0.3s ease;
visibility: hidden;
pointer-events: none;
}

.inc_reformq_header.header-visible {
transform: translateY(0);
transition: transform 0.3s ease;
visibility: visible;
pointer-events: auto;
}

.inc_reformq_header.header-hidden .dropdown-menu {
display: none !important;
}

.inc_reformq_header.header-hidden .dropdown {
overflow: hidden !important;
}



/* ===== ハンバーガーメニュー ===== */
@media screen and (max-width: 1280px) {
.inc_reformq_header .global-navi {
transition: transform 0.5s ease;
}

.inc_reformq_header .global-navi.no-transition {
transition: none !important;
}

#DRAWER-MENU:checked ~ .global-navi {
transition: transform 0.5s ease;
}

.drawer-close {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
background: rgba(0, 0, 0, 0);
transition: background 0.5s ease;
}

#DRAWER-MENU:checked ~ .drawer-close {
pointer-events: auto;
background: rgba(0, 0, 0, 0.3);
}
}

.floating-button-wrapper {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: visible !important;
z-index: 10000 !important;
transform: none !important;
transition: none !important;
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
pointer-events: none !important;
}

.floating-button-wrapper .floating-button {
z-index: 10000 !important;
}

.floating-button-wrapper .floating-button,
.floating-button-wrapper .floating-button * {
transition: opacity 0.4s ease !important;
}

.floating-button-wrapper.floating-hidden .floating-button,
.floating-button-wrapper.floating-hidden .floating-button * {
opacity: 0 !important;
pointer-events: none !important;
}

.floating-button-wrapper.floating-visible .floating-button,
.floating-button-wrapper.floating-visible .floating-button * {
opacity: 1 !important;
pointer-events: auto !important;
}

/* アトリエ */




.parallax-block{
position: relative;
padding: 6rem 0;
width: 100%;
height: 250vh;
display: flex;
justify-content: center;
justify-content: space-between;
overflow: clip;
background-image: url('/reformq/img/meguro/backimg01.avif');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}

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


}

.parallax-block .message{
position: sticky;
top: 0;
left: 0;
right: 0;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
z-index: 150;
}


.message-inner{
position: absolute;
top: 0;
margin: 0;
width: 44rem;
height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
color: #fff;
z-index: 10;  
filter: drop-shadow(0.2rem 0.2rem 0.5rem rgba(0,0,0,1));
}

.parallax-block .message h2 {
margin: 0;
/*font-size: 4.2rem;*/
font-size: min(max(3.2rem, calc(3.2rem + ((1vw - 0.48rem) * 1.9231))), 4.2rem);
line-height: 1.6;
font-family: 'Noto Serif JP', serif;
font-weight: 400;

text-shadow: 0.1rem 0 0.8rem #000;
}

.parallax-block .message p:nth-child(2) {
font-size: 1.6rem;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
margin: 3.9rem 0 3.5rem;
text-shadow: 0.1rem 0 0.8rem #000;
line-height: 2.5;
}

.parallax-block .message p:nth-child(3) {
font-size: 1.6rem;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
margin: 0;
text-shadow: 0.1rem 0 0.8rem #000;
line-height: 2.5;
}

.parallax-block .parallax-image {
position: relative;
margin: 0;
padding: 13vh 2rem 0;
width: calc(50% - 12rem);
max-width: 64rem;
display: flex;  
flex-direction: column;
align-items: center;
gap: 4rem;
}

.parallax-block .rellax{
position: relative;
display: block;
}

.parallax-block .aspect-640-440{ aspect-ratio: 640 /440;}
.parallax-block .aspect-310-440{ aspect-ratio: 310 /440;}


.parallax-block .image01{
align-self: flex-end;
width: 80%;
}

.parallax-block .image02{
top: -5%;
width: 45%;
align-self: flex-start;
}

.parallax-block .image03{
top: -10%;
left: 15%;
width: 52%;
}

.parallax-block .image04{
width: 76%;
align-self: flex-start;
}

.parallax-block .image05{
top: -10%;
left: -5%;
width: 44%;
align-self: flex-end;
}

.parallax-block .image06{
top: 0;
left: -5%;
width: 50%;
}

.parallax-block .image07{
left: -5%;
width: 60%;
}

.parallax-block .image08{
top: -5%;
width: 60%;
align-self: flex-end;
}

.parallax-block .image09{
top: -10%;
width: 37%;
align-self: flex-start;
z-index: 100;
}

.parallax-block .image10{
top: -5%;
left: 2%;
width: 80%;
align-self: flex-start;
}

.parallax-block .image11{
top: 0;
left: -5%;
width: 40%;
align-self: flex-end;
}

.parallax-block .image12{
width: 60%;
align-self: flex-start;
}


/* ============================================
タブレット以下（1024px以下）
============================================ */
@media screen and (max-width: 1024px) {

/* --- 全体レイアウトを縦並びに --- */
.parallax-block {
flex-direction: column;
align-items: center;
height: auto;
padding: 4rem 0;
}

/* --- 画像エリア --- */


.parallax-block .parallax-image {
position: relative;
margin: 0 auto;
padding: 5vh 0 25vh;
width: 98%;
max-width: 98%;
height: auto;
display: flex;  
flex-direction: row;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
gap: 3%;
}

.parallax-block .parallax-image:last-child { padding: 20vh 0 10vh;}

.parallax-block .image01{
top: 0;
left: 0;
width: 65%;
order: 1;
}

.parallax-block .image02{
top: 20vh;
right: 0;
left: 0%;
width: 34%;
order: 3;
}

.parallax-block .image03{
top: 30vh;
left: inherit;
right: 0;
width: 30%;
order: 2;
}

.parallax-block .image04{
width: 74%;
max-width: 42rem;
order: 6;
}

.parallax-block .image05{
left: inherit;
width: 24%;
order: 4;  
display: none;
}

.parallax-block .image06{
top: 15%;
left: 5%;
width: 40%;
order: 5;
}

/*
.parallax-block .image01{
top: 0;
left: 0;
width: 54%;
order: 1;
}

.parallax-block .image02{
top: 20vh;
right: 0;
width: 26%;
order: 3;
}

.parallax-block .image03{
top: 30vh;
left: inherit;
right: 23%;
width: 24%;
order: 2;
}


.parallax-block .image04{
top: 20vh;
right: 0;
width: 50%;
order: 6;
}

.parallax-block .image05{
top: 50vh;
left: inherit;
width: 24%;
order: 4;
}

.parallax-block .image06{
top: 50vh;
left: 3%;
width: 33%;
order: 5;
}
*/

.parallax-block .image07{
left: -5%;
width: 40%;
order: 1;
}

.parallax-block .image09{
top: 0;
right: -5%;
width: 28%;
z-index: 100;
order: 2;
}

.parallax-block .image08{
top: 5vh;
width: 64%;
order: 3;
}

.parallax-block .image11{
top: 15vh;
left: inherit;
width: 30%;
order: 4;
}

.parallax-block .image10{
top: 10vh;
left: inherit;
width: 74%;
max-width: 42rem;
order: 5;
}

.parallax-block .image12{
width: 50%;
order: 6;
display: none;
}

.parallax-block .message{
position: relative;
top: 0;
left: 0;
right: 0;
margin: 0;
width: 100%;
height: auto;
}

.message-inner{
position: relative;
top: 0;
margin: 0;
width: 100%;
height: auto;
}



/* --- メッセージエリア：マージンだけ --- */
.parallax-block .message {
position: relative;
margin: 0 3rem;
width: auto;
}


}/* End 1024 */

.parallax-block .rellax img {
width: 100%;
height: auto;
display: block;
}


/* ============================================
スマホ（600px以下）
============================================ */
@media screen and (max-width: 600px) {



/* --- メッセージエリア：マージン微調整のみ --- */
.parallax-block .message {
margin: 0 1.5rem;
}

/* iOS Safari対策 */

/*
.parallax-block {
background-attachment: scroll;
}
*/
}

.FLOOR {
background-color: #2e2d2d;
padding-top: 20rem;
}

.FLOOR h2{
font-size: min(max(4rem, calc(4rem + ((1vw - 0.48rem) * 3.8462))), 6rem);
text-align: center;
font-family: 'Inter', sans-serif;
font-weight: 500;
display: block;
color: #fff;
line-height: 1.4;
margin: 0;
}

.FLOOR h2 span {
font-size: min(max(1.4rem, calc(1.4rem + ((1vw - 0.48rem) * 1.1538))), 2rem);
text-align: center;
display: block;
color: #fff;
}

.floor-1f,
.floor-2f,
.floor-3f,
.floor-rf {
color: #fff;
max-width: 140rem;
margin: 6rem auto 0;
width: calc(100% - 4rem);
}

.floor-exterior {
color: #fff;
max-width: 140rem;
margin: 6rem auto 0;
width: calc(100% - 4rem);
padding-bottom: 15rem;
}

.floor-exterior .floor-section .floor-main {
display: flex;
justify-content: space-between;
padding: 5rem 0 0;
gap: 4.9rem;
width: 100%;
}

.floor-section {
display: flex;
justify-content: space-between;
border-top: solid 1px #cbcaca;
gap: 5.4rem;
position: relative;
}

.floor-side {
width: 16%;
flex-shrink: 0;
position: sticky;
top: 0;
align-self: flex-start;
height: auto;
transition: top 0.3s ease;
}

.floor-side h3 {
margin: 0;
font-family: 'Inter', sans-serif;
font-weight: 500;
  margin-top: 1rem;
}

.floor-side h3 span:nth-child(1) {
display: block;
font-size: 4.8rem;
}

.floor-side h3 span:nth-child(2) {
font-size: 1.8rem;
}

.floor-main {
display: flex;
justify-content: space-between;
padding: 5rem 0 4.8rem;
gap: 4.9rem;
width: 100%;
}

.floor-main-wrap .floor-txt,
.floor-txt {
width: 41%;
}

.floor-img {
width: 55%;
}

.floor-img img {
opacity: 0;
transform: translateY(60px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.floor-img img.is-visible {
opacity: 1;
transform: translateY(0);
}

.floor-txt-en {
font-size: 1.8rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
margin: 0;
}

.floor-txt h4 {
font-size: 2.4rem;
font-family: 'Noto Serif JP', serif;
font-weight: 400;
margin: 4.8rem 0 2.3rem;
}

.floor-txt-jp {
font-size: 1.4rem;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
margin: 0;
}


.floor-section-wrap {
display: flex;
justify-content: flex-start;
gap: 5.4rem;
border-top: solid 1px #cbcaca;
position: relative;
}

.floor-section-wrap .floor-side {
width: 16%;
flex-shrink: 0;
position: sticky;
top: 0;
align-self: flex-start;
}

.floor-main-wrap {
flex: 1;
min-width: 0;
}

.floor-main-wrap .floor-main {
display: flex;
justify-content: space-between;
padding: 5rem 0 4.8rem;
gap: 4.9rem;
}



.showroom-main {
border-top: solid 1px #cbcaca;
}

.office-img,
.exterior-img {
display: flex;
gap: 2.3rem;
align-items: flex-start;
width: 55%;
}

.office-img img,
.exterior-img img {
width: calc((100% - 2.3rem) / 2);
object-fit: cover;
}

.floor-exterior .floor-side h3 span:nth-child(1) {
font-size: 3.8rem;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
white-space: nowrap;
}

.contact {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
position: relative;
}

.contact .contact-back {
width: 100%;
height: 56vh;
aspect-ratio: 192 / 67;
object-fit: cover;
overflow: hidden; 
}

.contact-inner {
width: 94%;
max-width: 98rem;
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
}
.contact-inner h2 {
font-size: 2.4rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #fff;
margin: 0;
}

.contact-inner p {
font-size: 1.4rem;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
color: #fff;
letter-spacing: 0.022em;
line-height: 1.6;
margin: 2.2rem 0 0;
}

.contact-inner a {
color: #fff;
margin-bottom: 0.5rem;
border-bottom: solid 1px #fff;
}


.access {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
position: relative;
}

.access-img {
width: 100%;
height: 88vh;
object-fit: cover;
overflow: hidden;
aspect-ratio: 16 / 10;
}

.access-inner {
width: 94%;
max-width: 116rem;
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
color: #fff;
}

.access-box {
display: flex;
justify-content: space-between;
width: 100%;
gap: 3rem;
align-items: center;
}

.access-txt {
width: 44%;
}

.access-map {
width: 56%;
max-width: 49rem;
margin-top: 4.5rem;
}

.access-inner h2 {
margin: 0;
font-size: 1.6rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
}

.access-inner a {
color: #fff;
border-bottom: solid 1px #fff;
font-size: 1.4rem;
}



.access-inner .address {
font-size: 2.2rem;
margin: 4.5rem 0 2.7rem;
line-height: 1.4;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
}

.access-inner p {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
font-size: 1.4rem;
}

.access-inner ul {
margin: 4.7rem 0 2.8rem;
font-size: 1.4rem;
}

.access-inner ul li {
list-style-type: disc;
list-style-position: inside;
}

.map-link::after {
content: '';
display: inline-block;
width: 0.8rem;
height: 0.8rem;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
margin-left: 0.5rem;
vertical-align: middle;
}

@media screen and (max-width: 1024px) {
.floor-exterior .floor-section .floor-main,
.floor-main {
flex-direction: column;
}

.floor-main-wrap .floor-txt,
.floor-txt,
.office-img,
.exterior-img,
.floor-img {
width: 100%;
}

.floor-main > div:nth-child(1) { order: 2; }
.floor-main > div:nth-child(2) { order: 1; }
}


@media screen and (max-width: 768px) {
.salon-catch {
font-size: 3rem;
}

.floor-section,
.floor-section-wrap {
gap: 3.4rem;
}

.floor-side,
.floor-section-wrap .floor-side {
width: 27%;
}

.floor-side h3 span:nth-child(1) {
font-size: 3.8rem;
}
.floor-side h3 span:nth-child(2) {
font-size: 1.6rem;
}

.floor-exterior .floor-side h3 span:nth-child(1) {
line-height: 2;
font-size: 3rem;
}

.floor-txt-jp br {
  display: none;
}

.access-inner {
align-items: center;
}

.access-inner h2 {
width: 100%;
max-width: 40rem;
}

.access-box {
flex-direction: column;
gap: 1rem;
}

.access-box {
flex-direction: column;
gap: 1rem;
}

.access-txt {
width: 100%;
max-width: 40rem;
}

.access-map {
margin: 0;
width: 100%;
max-width: 40rem;
}
}


@media screen and (max-width: 660px) {
.floor-side h3 span:nth-child(2) {
display: none;
}

.floor-side,
.floor-section-wrap .floor-side {
width: 16%;
}

.floor-side h3 {
line-height: 0.75;
margin-top: 3rem;
}

.floor-exterior .floor-side h3 span:nth-child(1) {
line-height: 1.1;
}

.floor-main,
.floor-main-wrap .floor-main,
.floor-exterior .floor-section .floor-main {
padding: 3rem 0 4.8rem;
}

}

@media screen and (max-width: 425px) {
.salon-catch {
font-size: 2.5rem;
}

.floor-side,
.floor-section-wrap .floor-side {
width: 19%;
}

.floor-section,
.floor-section-wrap {
gap: 2rem;
}
}