:root {
--max: 750px;
--gap: 16px;
--cta: #23a455;
--ink: #0d1321;
--muted: #6b7280;
--animate-duration: 1.1s;
} *,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: #fff;
color: var(--ink);
font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Segoe UI", "Hiragino Kaku Gothic ProN",  "Yu Gothic", Meiryo, sans-serif
}
img {
display: block;
max-width: 100%;
height: auto;
}
.stage {
display: flex;
justify-content: center;
background: #f6f7fb;
}
.hidden {
display: none;
}
.phone {
width: 100%;
max-width: var(--max);
background: #fff;
overflow: hidden;
margin: 0 auto;
padding-top: 57px;
} @media (min-width: 768px) {
body{
background: transparent; }
body::before{
content: "";
position: fixed;
inset: 0;
background-color: #b2d4e799;
background-image: url(https://purism-jp.com/hiroo/wp-content/uploads/2025/12/stone-bg-scaled.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-blend-mode: overlay;
z-index: -1; pointer-events: none; }
.phone {
max-width: 480px;
box-shadow: 0px 10px 35px #d1d1d1;
}
}
h2{
font-size: 26px;
font-weight: bold;
text-align: center;
padding: 40px 0 60px;
}
h2 span{
display: block;
font-size: 18px;
} section.block {
user-select: none
}
.block {
position: relative;
}
.block img {
width: 100%;
height: auto;
display: block;
}
a:hover {
opacity: .8;
}
.cta{
background: #f0fbfb;
} .floating-cta{
position: fixed;
left: 50%;
bottom: 8px;
transform: translateX(-50%) translateY(16px) scale(.98);
width: min(340px, 92vw);
z-index: 9999;
opacity: 0;
pointer-events: none;
transition:
transform .38s cubic-bezier(.22,.75,.25,1),
opacity   .28s ease;
will-change: transform, opacity;
} .floating-cta.show{
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
pointer-events: auto;
} .floating-cta.show.animate-in{
animation: cta-in .42s cubic-bezier(.2,.8,.2,1) 1 both;
}
@keyframes cta-in {
0%   { transform: translateX(-50%) translateY(18px) scale(.96); opacity:.0; }
60%  { transform: translateX(-50%) translateY(-2px) scale(1.015); opacity:1; }
100% { transform: translateX(-50%) translateY(0) scale(1); }
} @media (prefers-reduced-motion: reduce){
.floating-cta, .floating-cta.show { 
transition: none; animation: none; 
}
} .block{ position: relative; }
.cta-btn{
position: absolute;
left: 50%;
bottom: 30px;    
transform: translateX(-50%);
width: min(650px, 90%);
z-index: 10;
}
.cta-btn img{ display:block; width:100%; height:auto; } .faq-section {
font-family: '游明朝', 'Yu Mincho', YuMincho, serif;
flex: 1;
padding: 60px 0px 0px;
max-width: 480px;
margin: 0 auto;
width: 100%;
}
.faq-header {
text-align: center;
margin-bottom: 40px;
}
.faq-subtitle {
color: #00bab3;
font-size: 18px;
font-weight: 900;
letter-spacing: 0.05em;
margin-bottom: 15px;
}
.faq-title {
color: #111111;
font-size: 36px;
font-weight: 400;
letter-spacing: 0.1em;
} .faq-items {
display: flex;
flex-direction: column;
padding: 0px 20px 30px;
gap: 20px;
}
.faq-item {
background-color: #00bab3;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-question {
width: 100%;
padding: 20px;
background: none;
border: none;
cursor: pointer;
text-align: left;
display: flex;
align-items: flex-start;
gap: 15px;
color: #ffffff;
font-family: '游明朝', 'Yu Mincho', YuMincho, serif;
font-size: 18px;
line-height: 1.6;
font-weight: 400;
transition: opacity 0.2s ease;
}
.faq-question:hover {
opacity: 0.9;
}
.faq-q-label {
font-size: 32px;
font-weight: 700;
flex-shrink: 0;
line-height: 1.2;
}
.faq-q-text {
flex: 1;
padding-top: 3px;
font-weight: bold;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.6s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0 20px;
opacity: 0;
}
.faq-answer-content {
display: flex;
gap: 15px;
color: #ffffff;
font-size: 16px;
line-height: 1.8;
padding-bottom: 0;
}
.faq-a-label {
font-size: 32px;
font-weight: 700;
flex-shrink: 0;
line-height: 1.2;
}
.faq-a-text {
flex: 1;
padding-top: 3px;
}
.faq-item.active .faq-answer {
max-height: 500px;
padding: 0 20px 20px 20px;
opacity: 1;
} .access-section {
background-color: #f0f8f8;
padding: 20px;
font-family: '游明朝', 'Yu Mincho', YuMincho, serif;
}
.access-header {
text-align: center;
margin-bottom: 40px;
}
.access-title {
color: #00bab3;
font-size: 32px;
font-weight: bold;
letter-spacing: 0.15em;
padding: 0;
} .carousel {
max-width: 480px;
margin: 0 auto 40px;
}
.carousel-container {
position: relative;
overflow: hidden;
border-radius: 0;
background-color: #ffffff;
}
.carousel-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-slide {
min-width: 100%;
aspect-ratio: 16/10;
}
.carousel-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #00bab46b;
color: #ffffff;
border: none;
width: 25px;
height: 100%;
font-size: 25px;
cursor: pointer;
transition: background-color 0.3s ease;
z-index: 10;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-button-prev {
left: 0;
}
.carousel-button-next {
right: 0;
}
.carousel-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #d0d0d0;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
padding: 0;
}
.carousel-dot.active {
background-color: #00bab3;
} .store-info {
max-width: 480px;
margin: 0 auto;
}
.store-name {
background-color: #00bab3;
color: #ffffff;
text-align: center;
padding: 15px;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.05em;
margin-bottom: 20px;
}
.store-details {
display: flex;
flex-direction: column;
gap: 10px;
}
.store-address {
padding: 20px;
line-height: 1.4;
}
.store-postal {
font-size: 18px;
margin-bottom: 8px;
}
.store-location {
font-size: 18px;
margin-bottom: 5px;
}
.store-building {
font-size: 18px;
}
.store-map {
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
overflow: hidden;
}
.store-map iframe {
display: block;
border-radius: 4px;
}
footer {
padding: 20px var(--gap) 100px;
color: #fff;
margin-top: -5px;
background: #00bab3;
text-align: center;
}
footer p {
margin: .25rem 0
}
#btn_animation .btn {
max-width: 380px;
bottom: 0;
border-radius: 50px;
overflow: hidden;
}
#btn_animation .btn:hover {
text-decoration: none;
color: #fbfbfb;
}
#btn_animation .btn::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fbfbfbb9;
animation: btn_animation 4.5s ease-in-out infinite;
}
@-webkit-keyframes btn_animation {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
} .reveal { opacity: 1; } .js .reveal { opacity: 0; } .js .reveal.revealed { opacity: 1; }
.title_img{
padding:40px 0px 30px!important;
}
.sec01{
background: #f0fbfb;
padding: 20px 0px 40px;
}
.sec01 img, .sec02 img{
padding: 0 20px 30px;
width: 100%;
} .site-header {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
z-index: 1000;
background: #ffffff;
box-shadow: 0 0 0 rgba(0,0,0,0);
transition: box-shadow .25s ease, background-color .25s ease;
max-width: inherit;
}
.site-header__inner {
max-width: var(--max);
margin: 0 auto;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
transition: padding .25s ease;
}
.site-logo img {
display: block;
height: auto;
transition: transform .25s ease;
}
.site-header.is-scrolled {
background-color: rgba(255,255,255,0.98);
box-shadow: 0 6px 18px rgba(15,23,42,0.08);
}
.site-header.is-scrolled .site-header__inner {
padding: 6px 16px;
}
.site-header.is-scrolled .site-logo img {
transform: scale(0.9);
} .nav-toggle {
display: none;
} .hamburger {
width: 28px;
height: 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.hamburger span {
display: block;
height: 2px;
border-radius: 999px;
background-color: #111827;
transition: transform .25s ease, opacity .25s ease;
} .nav-toggle:checked + .hamburger span:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
.nav-toggle:checked + .hamburger span:nth-child(2) {
opacity: 0;
}
.nav-toggle:checked + .hamburger span:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
} .global-nav {
position: absolute;
left: 0;
right: 0;
top: 100%;
background-color: #ffffff;
border-bottom: 1px solid #e5e7eb;
max-height: 0;
overflow: hidden;
box-shadow: 0 0 0 rgba(15, 23, 42, 0);
transition: max-height .28s ease, box-shadow .28s ease;
}
.nav-toggle:checked ~ .global-nav {
max-height: 70vh;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
.global-nav ul {
list-style: none;
margin: 0;
padding: 12px 20px 16px;
}
.global-nav li {
border-bottom: 1px solid #f1f5f9;
}
.global-nav li:last-child {
border-bottom: none;
}
.global-nav a {
display: block;
padding: 10px 0;
font-size: 14px;
color: #111827;
text-decoration: none;
}
.global-nav a:hover {
opacity: 0.8;
}
.global-nav .nav-item--cta {
padding-top: 6px;
}
.global-nav .nav-item--cta a {
display: inline-block;
margin-top: 8px;
padding: 10px 18px;
border-radius: 999px;
background-color: #00bab3;
color: #ffffff;
font-size: 14px;
font-weight: 600;
text-align: center;
}  .store-list{
margin: 50px auto;
}
.store-list__title{
margin: 0 0 40px;
padding: 16px 0;
text-align: center;
background: #00bab3;
color: #fff;
font-size: 20px;
font-weight: 600;
}
.store-list__lead{
margin: 18px 0 26px;
text-align: center;
}
.store-list__map-wrap{
position: relative;
}
.store-list__map{
position: relative;
}
.store-list__map img{
width: 100%;
height: auto;
} .map-area-btn{
font-family: '游明朝', 'Yu Mincho', YuMincho, serif;
position: absolute;
background: #ffffffeb;
border: none;
padding: 2px 10px;
border-radius: 5px;
font-size: 14px;
color: #00bab3;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
cursor: pointer;
} .map-area-btn[data-target="#area-kanto"]{ top: 60%; left: 62%; }
.map-area-btn[data-target="#area-chubu"]{ top: 55%; left: 36%; }
.map-area-btn[data-target="#area-chugoku"]{ top: 64%; left: 13%; }
.map-area-btn[data-target="#area-shikoku"]{ top: 76%; left: 18%; }
.map-area-btn[data-target="#area-kyushu"]{ top: 86%; left: 2%; }
.map-area-btn[data-target="#area-kansai"]{ top: 69%; left: 39%; }
.map-area-btn[data-target="#area-tohoku"]{ top: 42%; left: 67%; }
.map-area-btn[data-target="#area-hokkaido"]{ top: 12%; left: 80%; }
.map-area-btn[data-target="#area-okinawa"]{ top: 88%; left: 35%; }
.map-area-btn.store-none{
background: #b7b7b7a6;
color: #fdfdfd;
cursor: default;
}
.area-accordion{
margin-top: 20px;
}
.area-item{
background: #fff;
border-radius: 5px;
overflow: hidden;
margin-bottom: 10px;
}
.area-head{
font-family: '游明朝', 'Yu Mincho', YuMincho, serif;
font-size: 100%;
width: 100%;
border: 0;
color: #00bab3;
background: #fff;
padding: 16px 14px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
cursor: pointer;
}
.pref-head {
margin: 20px 0 10px;
padding-left: 10px;
border-left: 4px solid #00bab3;
color: #00bab3;
font-weight: 700;
font-size: 14px;
line-height: 1.4;
}
.area-panel .pref-head:first-child {
margin-top: 0;
}
.plus{
font-size: 24px;
line-height: 1;
transition: transform .3s ease;
}
.area-panel{
padding: 0 14px 0px; 
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.area-item.is-open .area-panel{
max-height: 1200px; }
.area-item.is-open .plus{ transform: rotate(45deg); }
.salon-card{
border-top: 1px solid #eee;
padding: 12px 0;
}
.salon-name{ font-weight: 600; }
.salon-address{ font-size: 14px; color: #333; margin-top: 6px; }
.salon-btn{
display: block;
margin-top: 10px;
padding: 6px 14px;
text-align: center;
background: #00bab3;
color: #fff;
border-radius: 3px;
text-decoration: none;
} .salon-card.is-coming-soon .salon-btn {
background-color: #ccc;
color: #666;
pointer-events: none;
cursor: not-allowed;
box-shadow: none;
}
.salon-card.is-coming-soon .salon-btn:hover {
background-color: #ccc;
color: #666;
}