/![]()
assets; no divider between blocks.
========================================================= */
.renewal-location{
height:123.3rem;
min-height:123.3rem;
overflow:hidden;
background:#e9eaea;
color:#3e3d35;
}
.renewal-location__top{
position:relative;
display:block;
height:47.4rem;
min-height:0;
padding:0;
background:#e9eaea;
}
.renewal-location__intro{
position:absolute;
top:12.4rem;
left:calc(50% - 45.8rem);
width:53.3rem;
z-index:2;
}
.renewal-location .renewal-kicker{
margin:0;
font-family:var(--font-en);
font-size:4.2rem;
line-height:5.6rem;
letter-spacing:.10em;
font-weight:400;
color:#3e3d35;
text-align:left;
}
.renewal-location__intro h2{
margin:2.9rem 0 0;
width:53.3rem;
font-family:var(--font-ja);
font-size:2.6rem;
line-height:4.4rem;
letter-spacing:.10em;
font-weight:500;
color:#3e3d35;
text-align:left;
}
.renewal-location__map-overview{
position:absolute;
top:0;
left:calc(50% + 5rem);
width:47.2rem;
height:47.4rem;
margin:0;
overflow:hidden;
background:#e9eaea;
}
.renewal-location__map-overview img{
display:block;
width:100%;
height:100%;
max-width:none;
object-fit:fill;
}
.renewal-location__body{
position:relative;
display:block;
height:75.9rem;
min-height:0;
background-color:#e8e9e9;
background-image:url('../images/bg_location_map_detail.png');
background-repeat:no-repeat;
background-position:calc(50% - 22.9rem) top;
background-size:81.6rem 75.8rem;
}
.renewal-location__map-detail{
display:none;
}
.renewal-location__map-detail img{
display:block;
width:100%;
height:100%;
max-width:none;
object-fit:fill;
}
.renewal-location__activity{
position:absolute;
top:7.2rem;
left:calc(50% - 3rem);
width:61.8rem;
padding:0;
z-index:2;
background:transparent;
}
.renewal-location__activity > h3{
width:53.3rem;
margin:0 0 3.6rem;
font-family:var(--font-ja);
font-size:2.6rem;
line-height:4rem;
letter-spacing:.10em;
font-weight:500;
color:#3e3d35;
text-align:left;
}
.renewal-location__grid{
width:61.8rem;
display:grid;
grid-template-columns:repeat(3,19.4rem);
column-gap:1.8rem;
row-gap:3.1rem;
}
.renewal-activity-card{
width:19.4rem;
min-width:0;
}
.renewal-activity-card img{
display:block;
width:19.4rem;
height:11.3rem;
aspect-ratio:auto;
object-fit:cover;
border-radius:1rem;
}
.renewal-activity-card h4{
margin:1.6rem 0 0;
min-height:1.9rem;
font-family:var(--font-ja);
font-size:1.4rem;
line-height:1.9rem;
letter-spacing:.10em;
font-weight:700;
color:#3e3d35;
}
.renewal-activity-card:nth-child(2) h4,
.renewal-activity-card:nth-child(3) h4{
letter-spacing:0;
}
.renewal-activity-card p{
margin:.5rem 0 0;
font-family:var(--font-ja);
font-size:1.2rem;
line-height:1.6rem;
letter-spacing:.05em;
font-weight:500;
color:#3e3d35;
}
@media (max-width:1024px){
.renewal-location{
height:194rem;
min-height:194rem;
}
.renewal-location__top{
height:58.1rem;
min-height:0;
padding:0;
}
.renewal-location__intro{
top:2.4rem;
left:2.4rem;
width:32.1rem;
}
.renewal-location .renewal-kicker{
font-size:2.4rem;
line-height:5.6rem;
letter-spacing:0;
white-space:nowrap;
}
.renewal-location__intro h2{
width:32.1rem;
margin-top:.4rem;
font-size:2.4rem;
line-height:3.8rem;
letter-spacing:.10em;
font-weight:700;
}
.renewal-location__map-overview{
top:20.4rem;
left:0;
width:100%;
height:37.7rem;
background:#e9eaea;
}
.renewal-location__map-overview img{
width:100%;
height:100%;
object-fit:fill;
}
.renewal-location__body{
height:135.9rem;
min-height:0;
background:#e8e9e9;
background-image:none;
}
.renewal-location__map-detail{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:22.5rem;
margin:0;
overflow:hidden;
background:#e8e9e9;
}
.renewal-location__map-detail img{
width:100%;
height:100%;
object-fit:fill;
}
.renewal-location__activity{
top:22.5rem;
left:0;
width:100%;
padding:3.8rem 2.5rem 0;
box-sizing:border-box;
background:#e8e9e9;
}
.renewal-location__activity > h3{
width:32.6rem;
margin:0 0 2.1rem;
font-size:2.6rem;
line-height:4rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-location__grid{
width:32.5rem;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:1.44rem;
row-gap:2.6rem;
}
.renewal-activity-card{
width:auto;
min-width:0;
}
.renewal-activity-card img{
width:100%;
height:11.3rem;
object-fit:cover;
border-radius:1rem;
}
.renewal-activity-card h4{
margin-top:1rem;
min-height:1.9rem;
font-size:1.4rem;
line-height:1.68rem;
letter-spacing:.10em;
}
.renewal-activity-card:nth-child(2) h4,
.renewal-activity-card:nth-child(3) h4{
letter-spacing:0;
}
.renewal-activity-card p{
margin-top:.8rem;
font-size:1.2rem;
line-height:1.6rem;
letter-spacing:0;
}
}
/* SP activity text offsets match the Figma card groups. */
@media (max-width:1024px){
.renewal-activity-card h4{margin-top:.8rem;}
.renewal-activity-card:nth-child(1) h4{margin-top:2rem;}
.renewal-activity-card:nth-child(2) h4{margin-top:1rem;}
.renewal-activity-card:nth-child(5) h4,
.renewal-activity-card:nth-child(6) h4{margin-top:1.6rem;}
.renewal-activity-card:nth-child(1) p{margin-top:1.5rem;}
.renewal-activity-card:nth-child(5) p,
.renewal-activity-card:nth-child(6) p{margin-top:.7rem;}
.renewal-activity-card:nth-child(5),
.renewal-activity-card:nth-child(6){margin-top:-.5rem;}
}
/* ROOMS & FACILITIES — SP bottom clearance: Figma ≈ 69px. */
@media (max-width:1024px){
.renewal-rooms{
min-height:0;
}
}
/* =========================================================
FOR BUSINESS OWNERS — Figma final pass — 2026-08-31
PC section: 1326px / SP section: 1528px
========================================================= */
@media (min-width:1025px){
.renewal-business{
min-height:132.6rem;
padding:9.6rem 0 8.5rem;
background:linear-gradient(180deg,#242424 0%,#000 100%);
}
.renewal-business .renewal-section-inner{
width:min(112.4rem,calc(100% - 6.4rem));
}
.renewal-business .renewal-kicker{
font-family:var(--font-en);
font-size:4.2rem;
line-height:4.6rem;
letter-spacing:.10em;
font-weight:400;
}
.renewal-business .renewal-section-title{
margin-top:2.2rem;
font-family:var(--font-ja);
font-size:3.6rem;
line-height:6.4rem;
letter-spacing:.10em;
font-weight:700;
}
.renewal-business__lead{
margin-top:3.5rem;
font-family:var(--font-ja);
font-size:1.8rem;
line-height:3.6rem;
letter-spacing:.20em;
font-weight:500;
}
.renewal-business__grid{
margin-top:7.1rem;
grid-template-columns:repeat(3,1fr);
column-gap:4.6rem;
row-gap:0;
}
.renewal-business-card__en{
min-height:5rem;
padding:.3rem 1rem;
background:#d5b767;
color:#3e3d35;
font-family:var(--font-ja);
font-size:2rem;
line-height:4.4rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-business-card h3{
margin-top:1.6rem;
color:#d5b767;
font-family:var(--font-ja);
font-size:2.6rem;
line-height:5rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-business-card > p:last-child{
margin-top:1rem;
font-family:var(--font-ja);
font-size:1.4rem;
line-height:2.6rem;
letter-spacing:.10em;
font-weight:500;
text-align:center;
}
.renewal-business__discount{
box-sizing:border-box;
margin-top:7.3rem;
min-height:13.4rem;
padding:0;
border:2px solid #d5b767;
border-radius:1.7rem;
}
.renewal-business__discount strong{
font-family:var(--font-ja);
font-size:3.6rem;
line-height:5rem;
letter-spacing:.10em;
font-weight:700;
color:#d5b767;
}
.renewal-business__discount small{
width:34.4rem;
margin-top:.6rem;
margin-left:9.7rem;
align-self:flex-start;
font-family:var(--font-ja);
font-size:1.2rem;
line-height:2.6rem;
letter-spacing:.10em;
font-weight:500;
text-align:left;
}
.renewal-business__tax-note{
margin-top:1.9rem;
font-family:var(--font-ja);
font-size:1.2rem;
line-height:2.6rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-business > .renewal-cta{
margin-top:7.5rem;
}
.renewal-business > .renewal-cta .renewal-cta__notice{
margin:1.8rem 0;
font-family:var(--font-ja);
font-size:1.2rem;
line-height:2.6rem;
letter-spacing:.08em;
font-weight:500;
}
}
@media (max-width:1024px){
.renewal-business{
min-height:152.8rem;
padding:5.1rem 0 7.1rem;
background:linear-gradient(180deg,#242424 0%,#000 100%);
}
.renewal-business .renewal-section-inner{
width:32.6rem;
max-width:calc(100% - 4.8rem);
}
.renewal-business .renewal-kicker{
font-family:var(--font-en);
font-size:2.4rem;
line-height:4.6rem;
letter-spacing:.10em;
font-weight:400;
white-space:nowrap;
}
.renewal-business .renewal-section-title{
margin-top:1.4rem;
font-family:var(--font-ja);
font-size:2.4rem;
line-height:3.8rem;
letter-spacing:.10em;
font-weight:700;
}
.renewal-business__lead{
margin-top:2rem;
font-family:var(--font-ja);
font-size:1.6rem;
line-height:2.8rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-business__grid{
margin-top:2.3rem;
grid-template-columns:1fr;
gap:3rem;
}
.renewal-business-card__en{
min-height:5rem;
padding:.3rem 1rem;
background:#d5b767;
color:#3e3d35;
font-family:var(--font-ja);
font-size:2rem;
line-height:4.4rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-business-card h3{
margin-top:1.6rem;
color:#d5b767;
font-family:var(--font-ja);
font-size:2.6rem;
line-height:5rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-business-card > p:last-child{
margin-top:.4rem;
font-family:var(--font-ja);
font-size:1.6rem;
line-height:2.4rem;
letter-spacing:.10em;
font-weight:500;
text-align:center;
}
.renewal-business__discount{
box-sizing:border-box;
margin-top:4.9rem;
min-height:17.4rem;
padding:1.7rem 0 1.8rem;
justify-content:flex-start;
border:2px solid #d5b767;
border-radius:1.7rem;
}
.renewal-business__discount strong{
font-family:var(--font-ja);
font-size:2.6rem;
line-height:3.6rem;
letter-spacing:.10em;
font-weight:700;
color:#d5b767;
}
.renewal-business__discount small{
width:26.2rem;
margin-top:.6rem;
margin-left:2.2rem;
align-self:flex-start;
font-family:var(--font-ja);
font-size:1.2rem;
line-height:2.6rem;
letter-spacing:.10em;
font-weight:500;
text-align:left;
}
.renewal-business__tax-note{
width:33.1rem;
margin-top:1.6rem;
margin-left:-.5rem;
font-family:var(--font-ja);
font-size:1.2rem;
line-height:2rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-business > .renewal-cta{
margin-top:4.5rem;
}
.renewal-business > .renewal-cta .renewal-cta__notice{
margin:.9rem 0 1rem;
font-family:var(--font-ja);
font-size:.9rem;
line-height:1.6rem;
letter-spacing:0;
font-weight:500;
}
}
/* =========================================================
PROPERTY OVERVIEW — Figma sync / accordion initial closed
Old theme's dt/dd table pattern is reused inside native details.
========================================================= */
.renewal-overview{
box-sizing:border-box;
min-height:0;
padding:10.1rem 0 11.4rem;
background:#e9eaea;
color:#3e3d35;
}
.renewal-overview .renewal-section-inner--narrow{
width:min(89.5rem,calc(100% - 6.4rem));
}
.renewal-overview .renewal-kicker{
margin:0;
font-family:var(--font-en);
font-size:4.2rem;
line-height:4.6rem;
letter-spacing:.10em;
font-weight:400;
color:#3e3d35;
}
.renewal-overview__name{
margin-top:3.2rem;
font-family:var(--font-ja);
font-size:2.4rem;
line-height:4.6rem;
letter-spacing:.10em;
font-weight:500;
text-align:center;
color:#3e3d35;
}
.renewal-overview .renewal-badge{
box-sizing:border-box;
width:16.9rem;
min-width:16.9rem;
height:4.5rem;
margin:1.1rem auto 3.2rem;
padding:0;
border:0;
background:#3e3d35;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-ja);
font-size:2rem;
line-height:1;
letter-spacing:.10em;
font-weight:500;
}
.renewal-overview__ownership-row{
box-sizing:border-box;
min-height:5.3rem;
border-top:.5px solid rgba(62,61,53,.62);
border-bottom:.5px solid rgba(62,61,53,.62);
display:grid;
grid-template-columns:13.6rem 2.7rem 24.9rem 7.2rem minmax(0,1fr);
align-items:center;
font-family:var(--font-ja);
color:#3e3d35;
}
.renewal-overview__ownership-label{
grid-column:1;
font-size:1.6rem;
line-height:2.4rem;
letter-spacing:.12em;
font-weight:500;
text-align:left;
}
.renewal-overview__ownership-value{
grid-column:3;
font-size:1.2rem;
line-height:2rem;
letter-spacing:.12em;
font-weight:500;
text-align:right;
}
.renewal-overview__ownership-copy{
grid-column:5;
font-size:1.6rem;
line-height:2.9rem;
letter-spacing:.10em;
font-weight:700;
text-align:left;
white-space:nowrap;
}
.renewal-overview .renewal-accordion--overview{
margin-top:2.8rem;
border-top:0;
}
.renewal-overview .renewal-overview__details{
border-bottom:0;
color:#3e3d35;
}
.renewal-overview .renewal-overview__details > summary{
box-sizing:border-box;
min-height:6rem;
margin:0;
padding:1.5rem 4rem 1.5rem 0;
border-bottom:.5px solid rgba(62,61,53,.62);
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-ja);
font-size:1.6rem;
line-height:2.9rem;
letter-spacing:.10em;
font-weight:700;
text-align:center;
color:#3e3d35;
}
.renewal-overview .renewal-overview__details > summary::after{
right:0;
top:50%;
}
.renewal-overview .renewal-overview__details dl{
margin:0;
padding:0;
}
.renewal-overview__panel{
margin:0;
padding:0;
}
.renewal-overview__rows{
display:grid;
grid-template-columns:41rem 41rem;
column-gap:7.5rem;
width:100%;
margin:0;
}
.renewal-overview .renewal-overview__rows > .renewal-overview__row{
box-sizing:border-box;
min-height:4.3rem;
margin:0;
padding:.8rem 0 .7rem;
border-top:0;
border-bottom:.5px solid rgba(62,61,53,.62);
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:1.6rem;
font-family:var(--font-ja);
color:#3e3d35;
}
.renewal-overview__row dt{
flex:0 0 auto;
margin:0;
font-family:var(--font-ja);
font-size:1.6rem;
line-height:2.4rem;
letter-spacing:.12em;
font-weight:500;
text-align:left;
}
.renewal-overview__row dd{
min-width:0;
margin:0 0 .1rem;
font-family:var(--font-ja);
font-size:1.2rem;
line-height:2rem;
letter-spacing:.12em;
font-weight:500;
text-align:right;
}
.renewal-overview__rows--location > .renewal-overview__row:nth-child(1){grid-column:1 / 3;grid-row:1;}
.renewal-overview__rows--location > .renewal-overview__row:nth-child(2){grid-column:1;grid-row:2;}
.renewal-overview__rows--location > .renewal-overview__row:nth-child(3){grid-column:1;grid-row:3;}
.renewal-overview__rows--location > .renewal-overview__row:nth-child(4){grid-column:2;grid-row:2;}
.renewal-overview__rows--location > .renewal-overview__row:nth-child(5){grid-column:2;grid-row:3;}
.renewal-overview__row--address dd{
flex:1 1 auto;
letter-spacing:.05em;
white-space:nowrap;
}
.renewal-overview__rows--plan > .renewal-overview__row:nth-child(1){grid-column:1;grid-row:1;}
.renewal-overview__rows--plan > .renewal-overview__row:nth-child(2){grid-column:2;grid-row:1;}
.renewal-overview__rows--price > .renewal-overview__row:nth-child(1){grid-column:1;grid-row:1;}
.renewal-overview__rows--price > .renewal-overview__row:nth-child(2){grid-column:1;grid-row:2;}
.renewal-overview__rows--price > .renewal-overview__row:nth-child(3){grid-column:2;grid-row:1;}
.renewal-overview__rows--other > .renewal-overview__row:nth-child(1){grid-column:1;grid-row:1;}
.renewal-overview__rows--other > .renewal-overview__row:nth-child(2){grid-column:1;grid-row:2;}
.renewal-overview__rows--other > .renewal-overview__row:nth-child(3){grid-column:1;grid-row:3;}
.renewal-overview__rows--other > .renewal-overview__row:nth-child(4){grid-column:2;grid-row:1;}
.renewal-overview__rows--other > .renewal-overview__row:nth-child(5){grid-column:2;grid-row:2;}
.renewal-overview__rows--other > .renewal-overview__row:nth-child(6){grid-column:2;grid-row:3;}
.renewal-overview__rows--other > .renewal-overview__row:nth-child(7){grid-column:1;grid-row:4;}
.renewal-overview__rows--other > .renewal-overview__row:nth-child(8){grid-column:2;grid-row:4;}
@media (max-width:1024px){
.renewal-overview{
min-height:0;
padding:5.2rem 0 6.2rem;
background:#e9eaea;
}
.renewal-overview .renewal-section-inner--narrow{
width:32.6rem;
max-width:calc(100% - 4.8rem);
}
.renewal-overview .renewal-kicker{
font-size:2.4rem;
line-height:2.8rem;
letter-spacing:.10em;
}
.renewal-overview__name{
margin-top:2.4rem;
font-size:2.4rem;
line-height:4.6rem;
letter-spacing:.10em;
}
.renewal-overview .renewal-badge{
width:16.9rem;
min-width:16.9rem;
height:4.5rem;
margin:1.2rem auto 3.9rem;
font-size:2rem;
letter-spacing:.10em;
}
.renewal-overview__ownership-row{
min-height:6.6rem;
padding:.7rem 0 .8rem;
grid-template-columns:13.4rem minmax(0,1fr);
grid-template-rows:auto auto;
column-gap:0;
row-gap:.2rem;
}
.renewal-overview__ownership-label{
grid-column:1;
grid-row:1;
font-size:1.6rem;
line-height:1.8rem;
letter-spacing:0;
}
.renewal-overview__ownership-value{
grid-column:2;
grid-row:1;
font-size:1.2rem;
line-height:1.8rem;
letter-spacing:0;
text-align:right;
}
.renewal-overview__ownership-copy{
grid-column:1 / 3;
grid-row:2;
font-size:1.2rem;
line-height:2.9rem;
letter-spacing:.10em;
white-space:nowrap;
}
.renewal-overview .renewal-accordion--overview{
margin-top:2.8rem;
}
.renewal-overview .renewal-overview__details > summary{
min-height:7rem;
padding:.8rem 3.4rem .8rem .2rem;
justify-content:flex-start;
font-size:1.6rem;
line-height:2.6rem;
letter-spacing:.10em;
text-align:left;
}
.renewal-overview .renewal-overview__details > summary::after{
right:0;
}
.renewal-overview__rows{
display:block;
width:100%;
}
.renewal-overview .renewal-overview__rows > .renewal-overview__row{
min-height:4.3rem;
padding:.8rem 0 .7rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
}
.renewal-overview__row dt{
font-size:1.6rem;
line-height:2.4rem;
letter-spacing:0;
}
.renewal-overview__row dd{
margin:0;
font-size:1.2rem;
line-height:2rem;
letter-spacing:.05em;
}
.renewal-overview .renewal-overview__rows > .renewal-overview__row--address{
min-height:auto;
padding:1rem 0 .9rem;
flex-direction:column;
align-items:flex-start;
gap:.5rem;
}
.renewal-overview__row--address dd{
width:100%;
line-height:1.65;
letter-spacing:.02em;
text-align:left;
white-space:normal;
}
}
/* =========================================================
PROPERTY OVERVIEW — open-state spacing above accordion titles
Closed state remains unchanged. Figma open-state spacing only.
========================================================= */
@media (min-width:1025px){
.renewal-overview .renewal-accordion--overview > .renewal-overview__details:first-child[open]{
padding-top:.4rem;
}
.renewal-overview .renewal-accordion--overview > .renewal-overview__details:nth-child(n+2)[open]{
padding-top:3.8rem;
}
}
@media (max-width:1024px){
.renewal-overview .renewal-accordion--overview > .renewal-overview__details:first-child[open]{
padding-top:.2rem;
}
.renewal-overview .renewal-accordion--overview > .renewal-overview__details:nth-child(n+2)[open]{
padding-top:2.4rem;
}
}
/* =========================================================
FAQ — Figma open/closed state alignment — 2026-09-01
- Initial state remains all closed (HTML unchanged)
- Open rows follow Figma Q/A positions and compact heights
- Closed rows keep only the summary and collapse naturally
========================================================= */
.renewal-faq{
min-height:0;
padding:8.5rem 0 11.5rem;
background:linear-gradient(180deg,#242424 0%,#000 100%);
}
.renewal-faq .renewal-kicker{
font-size:4.2rem;
line-height:4.6rem;
letter-spacing:.10em;
}
.renewal-faq .renewal-section-title{
margin-top:1.6rem;
font-size:3.6rem;
line-height:4.6rem;
letter-spacing:.10em;
font-weight:400;
}
.renewal-accordion--faq{
margin-top:7.7rem;
}
.renewal-faq-item summary{
min-height:0;
padding:1.7rem 6rem 1rem 5rem;
font-family:var(--font-ja);
font-size:1.6rem;
line-height:2.9rem;
letter-spacing:.10em;
font-weight:500;
color:#fff;
}
.renewal-faq-item summary > span{
left:.4rem;
top:1.7rem;
color:#fff;
font-family:var(--font-en);
font-size:2.6rem;
line-height:3.6rem;
letter-spacing:.05em;
font-weight:400;
}
.renewal-faq-item summary::after{
right:2.7rem;
top:3.5rem;
width:1.6rem;
height:.7rem;
background-image:url('../images/btn_accordion_close_light.svg');
}
.renewal-faq-item[open] summary::after{
top:3.5rem;
background-image:url('../images/btn_accordion_open_light.svg');
}
.renewal-faq-item__answer{
position:relative;
display:block;
padding:0 6.1rem 2rem 5rem;
font-family:var(--font-sub-serif);
font-size:1.2rem;
line-height:2.2rem;
letter-spacing:.10em;
font-weight:300;
color:#fff;
}
.renewal-faq-item__answer > span{
position:absolute;
left:.4rem;
top:-.6rem;
color:#fff;
font-family:var(--font-en);
font-size:2.6rem;
line-height:3.6rem;
letter-spacing:.05em;
font-weight:400;
}
.renewal-faq-item__answer p{
margin:0;
padding:0;
}
@media (max-width:1024px){
.renewal-faq{
min-height:0;
padding:4.9rem 0 8.3rem;
background:linear-gradient(180deg,#242424 0%,#000 100%);
}
.renewal-faq .renewal-kicker{
font-size:2.4rem;
line-height:4.6rem;
letter-spacing:.10em;
}
.renewal-faq .renewal-section-title{
margin-top:0;
font-size:2.6rem;
line-height:4.6rem;
letter-spacing:.10em;
font-weight:400;
}
.renewal-accordion--faq{
margin-top:2.7rem;
}
.renewal-faq-item summary{
min-height:0;
padding:1.7rem 3.4rem 1.4rem 3.8rem;
font-size:1.6rem;
line-height:2.2rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-faq-item summary > span{
left:.4rem;
top:1.7rem;
font-size:2rem;
line-height:3.6rem;
letter-spacing:.05em;
}
.renewal-faq-item summary::after{
right:.9rem;
top:3.5rem;
width:1.4rem;
height:.7rem;
}
.renewal-faq-item[open] summary::after{
top:3.5rem;
}
.renewal-faq-item__answer{
padding:0 3.7rem 2.7rem 3.8rem;
font-size:1.2rem;
line-height:1.8rem;
letter-spacing:.10em;
font-weight:300;
}
.renewal-faq-item__answer > span{
left:.4rem;
top:-.6rem;
font-size:2rem;
line-height:3.6rem;
letter-spacing:.05em;
}
}
/* =========================================================
CONTACT FIGMA PASS — 2026-09-01
Figma source: PC 96:1402 / SP 193:1493
Default state: trial stay + individual selected.
========================================================= */
.renewal-contact {
min-height:172.7rem;
padding:10.5rem 0 13.3rem;
background:#262626;
}
.renewal-contact__inner {
width:68.4rem;
max-width:calc(100% - 4.8rem);
margin-inline:auto;
}
.renewal-contact .renewal-kicker {
font-family:var(--font-en);
font-size:4.2rem;
line-height:4.6rem;
letter-spacing:.10em;
font-weight:400;
}
.renewal-contact .renewal-section-title {
margin-top:1.6rem;
font-family:var(--font-ja);
font-size:3.6rem;
line-height:4.6rem;
letter-spacing:.10em;
font-weight:400;
}
.renewal-contact__speed {
margin-top:2.2rem;
color:#fff;
font-family:var(--font-ja);
font-size:1.8rem;
line-height:4.6rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-contact__form { margin-top:4.8rem; }
.renewal-form { color:#fff; }
.renewal-form .form-step2 { display:none; }
form.wpcf7-form.is-confirm .renewal-form .form-step1 { display:none; }
form.wpcf7-form.is-confirm .renewal-form .form-step2 { display:block; }
.renewal-form__heading {
margin:0;
padding:0;
border:0;
color:#fff;
text-align:center;
font-family:var(--font-ja);
font-size:2.6rem;
line-height:5rem;
letter-spacing:.04em;
font-weight:700;
}
.renewal-form__radios {
margin:0;
display:flex;
flex-wrap:nowrap;
align-items:center;
}
.renewal-form__radios .wpcf7-form-control,
.renewal-form__radios .wpcf7-radio {
display:flex;
align-items:center;
width:100%;
}
.renewal-form__radios .wpcf7-list-item { margin:0; }
.renewal-form__radios label {
display:flex;
align-items:center;
height:4.6rem;
margin:0;
cursor:pointer;
color:#fff;
font-family:var(--font-ja);
font-size:2rem;
line-height:4.6rem;
font-weight:500;
white-space:nowrap;
}
.renewal-form__radios input[type="radio"] {
appearance:none;
-webkit-appearance:none;
flex:0 0 2.6rem;
width:2.6rem;
height:2.6rem;
margin:0;
border:0;
border-radius:50%;
background:#d9d9d9;
position:relative;
}
.renewal-form__radios input[type="radio"]:checked::after {
content:'';
position:absolute;
inset:.6rem;
border-radius:50%;
background:#3e3d35;
}
.renewal-form__radios--request { margin-top:1rem; }
.renewal-form__radios--request .wpcf7-form-control { gap:3rem; }
.renewal-form__radios--request label { gap:1.1rem; letter-spacing:.20em; }
.renewal-form__trial { margin-top:3.8rem; }
.renewal-form__grid {
display:grid;
grid-template-columns:repeat(2, 33rem);
column-gap:2.4rem;
row-gap:3rem;
}
.renewal-form__field { margin:0; min-width:0; }
.renewal-form__label {
display:table;
position:relative;
height:2.3rem;
margin:0 0 .6rem;
color:#fff;
font-family:var(--font-ja);
font-size:1.6rem;
line-height:2.3rem;
letter-spacing:0;
font-weight:500;
}
.renewal-form__required {
position:absolute;
top:-1.6rem;
right:-.8rem;
color:#ff0000;
font-family:var(--font-sub-serif);
font-size:1.6rem;
line-height:2.4rem;
font-weight:400;
}
.renewal-form .wpcf7-form-control-wrap { display:block; width:100%; }
.renewal-form input[type="text"],
.renewal-form input[type="email"],
.renewal-form input[type="tel"],
.renewal-form input[type="date"],
.renewal-form input[type="number"],
.renewal-form select,
.renewal-form textarea {
display:block;
width:100%;
height:3.4rem;
min-height:3.4rem;
margin:0;
padding:0 1.2rem;
border:0;
border-radius:0;
outline:0;
background:#fff;
color:#3e3d35;
font-family:var(--font-sub-serif);
font-size:1.4rem;
line-height:2rem;
letter-spacing:0;
font-weight:400;
box-shadow:none;
}
.renewal-form input[type="number"]::-webkit-inner-spin-button,
.renewal-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.renewal-form input[type="number"] { -moz-appearance:textfield; }
.renewal-form input::placeholder,
.renewal-form textarea::placeholder { color:#a8a8a8; opacity:1; }
.renewal-form select {
appearance:none;
-webkit-appearance:none;
padding-right:4rem;
background:#fff;
}
.renewal-form__field--select { position:relative; }
.renewal-form__field--select::before,
.renewal-form__field--select::after {
content:'';
position:absolute;
z-index:2;
bottom:1.65rem;
width:1.05rem;
border-top:1px solid #3e3d35;
pointer-events:none;
}
.renewal-form__field--select::before { right:2.15rem; transform:rotate(38deg); }
.renewal-form__field--select::after { right:1.35rem; transform:rotate(-38deg); }
.renewal-form__trial-note {
width:100%;
margin:1.8rem 0 0;
color:#fff;
font-family:var(--font-ja);
font-size:1.2rem;
line-height:1.8rem;
letter-spacing:.10em;
font-weight:500;
}
.renewal-form__heading--customer { margin-top:6.2rem; }
.renewal-form__customer-fields { margin-top:.4rem; }
.renewal-form__customer-fields .renewal-form__field:nth-child(1) { margin-bottom:2.8rem; }
.renewal-form__customer-fields .renewal-form__field:nth-child(2) { margin-bottom:2.4rem; }
.renewal-form__customer-fields .renewal-form__field:nth-child(3) { margin-bottom:3.5rem; }
.renewal-form__customer-fields .renewal-form__field--message .renewal-form__label { margin-bottom:.7rem; }
.renewal-form textarea {
height:19.2rem;
min-height:19.2rem;
padding-top:.7rem;
padding-bottom:.7rem;
resize:none;
}
.renewal-form__heading--lead { margin-top:6.2rem; }
.renewal-form__radios--lead {
width:37.3rem;
margin:0 auto;
}
.renewal-form__radios--lead .wpcf7-form-control {
justify-content:flex-start;
gap:4.5rem;
}
.renewal-form__radios--lead .wpcf7-list-item {
flex:0 0 16.4rem;
width:16.4rem;
}
.renewal-form__radios--lead label { gap:2.2rem; letter-spacing:.20em; }
.renewal-form__error,
#form-error-message {
min-height:0;
margin:0;
color:#ff6c6c;
text-align:center;
font-family:var(--font-sub-sans);
font-size:1.3rem;
line-height:1.8;
}
.renewal-form__error:not(:empty),
#form-error-message:not(:empty) { margin:1.5rem 0 0; }
.renewal-form .wpcf7-not-valid-tip {
margin:.3rem 0 0;
color:#ff6c6c;
font-family:var(--font-sub-sans);
font-size:1.15rem;
line-height:1.5;
}
.renewal-form .wpcf7-response-output {
font-family:var(--font-sub-sans);
font-size:1.2rem;
}
.renewal-form__buttons { margin-top:5rem; text-align:center; }
.renewal-form .btn-to-confirm {
position:relative;
display:flex;
align-items:center;
width:37.9rem;
height:8.9rem;
min-height:8.9rem;
margin:0 auto;
padding:0 0 0 8.3rem !important;
border:1px solid #b99639 !important;
border-radius:4.45rem !important;
background-color:#d5b767 !important;
background-image:conic-gradient(from 77deg at 50% 50%, #6a400c 0%, #745323 32.2115%, #e39b00 65.8654%, #774303 100%) !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:100% 100% !important;
color:#fff !important;
text-shadow:none !important;
text-align:left;
font-family:var(--font-ja);
font-size:3.2rem;
line-height:3.4rem;
letter-spacing:.15em;
font-weight:700;
cursor:pointer;
}
.renewal-form .btn-to-confirm::after {
content:'';
position:absolute;
left:28.9rem;
top:50%;
width:3.8rem;
border-top:1px solid #fff;
}
.renewal-form .btn-to-confirm::before {
content:'';
position:absolute;
left:31.8rem;
top:calc(50% - .35rem);
width:1rem;
border-top:1px solid #fff;
transform:rotate(32deg);
transform-origin:right center;
}
/* Confirmation step keeps the legacy two-step behavior. */
.renewal-form__confirm-row {
display:grid;
grid-template-columns:18rem 1fr;
gap:2rem;
padding:1.5rem 0;
border-bottom:1px solid rgba(255,255,255,.25);
}
.renewal-form__confirm-label { color:var(--renewal-gold); }
.confirmation-value { white-space:pre-wrap; word-break:break-word; }
@media (max-width:1024px) {
.renewal-contact {
min-height:161rem;
padding:5rem 0 9.1rem;
}
.renewal-contact__inner {
width:32.6rem;
max-width:calc(100% - 4.8rem);
}
.renewal-contact .renewal-kicker {
font-size:2.4rem;
line-height:4.6rem;
letter-spacing:.10em;
}
.renewal-contact .renewal-section-title {
margin-top:1.6rem;
font-size:2.6rem;
line-height:3.6rem;
letter-spacing:.10em;
}
.renewal-contact__speed {
margin-top:.7rem;
font-size:1.8rem;
line-height:4.6rem;
letter-spacing:.10em;
}
.renewal-contact__form { margin-top:2.7rem; }
.renewal-form__heading {
font-size:2.6rem;
line-height:5rem;
letter-spacing:.04em;
}
.renewal-form__radios--request {
margin-top:.8rem;
display:block;
}
.renewal-form__radios--request .wpcf7-form-control {
display:block;
}
.renewal-form__radios--request .wpcf7-list-item {
display:block;
height:4.6rem;
}
.renewal-form__radios--request label {
gap:1.3rem;
font-size:2rem;
line-height:4.6rem;
letter-spacing:.10em;
}
.renewal-form__trial { margin-top:3.4rem; }
.renewal-form__grid {
width:33.2rem;
margin-left:-.2rem;
grid-template-columns:repeat(2, 16rem);
column-gap:1.2rem;
row-gap:3.2rem;
}
.renewal-form__label {
height:2.3rem;
margin-bottom:.6rem;
font-size:1.6rem;
line-height:2.3rem;
}
.renewal-form input[type="text"],
.renewal-form input[type="email"],
.renewal-form input[type="tel"],
.renewal-form input[type="date"],
.renewal-form input[type="number"],
.renewal-form select,
.renewal-form textarea {
height:3.4rem;
min-height:3.4rem;
font-size:1.4rem;
line-height:2rem;
}
.renewal-form__trial-note {
width:33.2rem;
margin-top:1.8rem;
margin-left:-.35rem;
font-size:1.2rem;
line-height:1.8rem;
letter-spacing:.10em;
}
.renewal-form__heading--customer { margin-top:3.6rem; }
.renewal-form__customer-fields { margin-top:2.4rem; }
.renewal-form textarea {
height:19.2rem;
min-height:19.2rem;
}
.renewal-form__heading--lead { margin-top:3.4rem; }
.renewal-form__radios--lead {
width:31.6rem;
margin:1rem 0 0;
}
.renewal-form__radios--lead .wpcf7-form-control {
display:flex;
justify-content:flex-start;
gap:3.2rem;
}
.renewal-form__radios--lead .wpcf7-list-item {
flex:0 0 14.2rem;
width:14.2rem;
}
.renewal-form__radios--lead label {
gap:.8rem;
font-size:2rem;
line-height:4.6rem;
letter-spacing:.10em;
}
.renewal-form__buttons { margin-top:3rem; }
.renewal-form .btn-to-confirm {
width:26.7rem;
height:6.3rem;
min-height:6.3rem;
padding-left:4.5rem !important;
border-radius:3.15rem !important;
background-image:conic-gradient(from 77deg at 50% 50%, #6a400c 0%, #745323 32.2115%, #e39b00 65.8654%, #774303 100%) !important;
font-size:2.4rem;
line-height:3.4rem;
letter-spacing:.15em;
}
.renewal-form .btn-to-confirm::after {
left:20.3rem;
width:2.8rem;
}
.renewal-form .btn-to-confirm::before {
left:22.3rem;
top:calc(50% - .3rem);
width:.8rem;
}
.renewal-form__confirm-row { grid-template-columns:1fr; gap:.5rem; }
.renewal-form .btn-back { margin:0 0 1.5rem; width:100%; }
}
/* =========================================================
CONTACT CONDITIONAL SPEC — corporate fields / 2026-09-01
Spec source: user-provided implementation notes.
Baseline CONTACT geometry remains the measured Figma pass above.
========================================================= */
.renewal-form__corporate {
margin-top:2.8rem;
}
.renewal-form__corporate-grid {
display:grid;
grid-template-columns:repeat(2, 33rem);
column-gap:2.4rem;
}
.renewal-form__corporate-uses {
margin-top:1.6rem;
}
.renewal-form__corporate-uses .renewal-form__label {
margin-bottom:.5rem;
}
.renewal-form__checks,
.renewal-form__checks .wpcf7-form-control {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.5rem 2.1rem;
margin:0;
}
.renewal-form__checks .wpcf7-list-item {
margin:0;
}
.renewal-form__checks label {
display:flex;
align-items:center;
gap:.7rem;
margin:0;
color:#fff;
font-family:var(--font-ja);
font-size:1.2rem;
line-height:2rem;
letter-spacing:0;
font-weight:500;
white-space:nowrap;
cursor:pointer;
}
.renewal-form__checks input[type="checkbox"] {
appearance:none;
-webkit-appearance:none;
flex:0 0 1.4rem;
width:1.4rem;
height:1.4rem;
margin:0;
border:0;
border-radius:0;
background:#fff;
position:relative;
}
.renewal-form__checks input[type="checkbox"]:checked::after {
content:'';
position:absolute;
left:.25rem;
top:.05rem;
width:.65rem;
height:1rem;
border-right:2px solid #3e3d35;
border-bottom:2px solid #3e3d35;
transform:rotate(42deg);
}
@media (max-width:1024px) {
.renewal-form__corporate {
width:33.2rem;
margin-top:2.5rem;
margin-left:-.2rem;
}
.renewal-form__corporate-grid {
grid-template-columns:repeat(2, 16rem);
column-gap:1.2rem;
}
.renewal-form__corporate-uses {
margin-top:1.5rem;
}
.renewal-form__checks,
.renewal-form__checks .wpcf7-form-control {
display:flex;
gap:.4rem 1.4rem;
}
.renewal-form__checks .wpcf7-list-item {
display:block;
margin:0;
}
.renewal-form__checks label {
gap:.55rem;
font-size:1.1rem;
line-height:1.9rem;
}
}
/* =========================================================
CONTACT FIGMA button asset fix — 2026-09-01
Figma: PC Group 324 (96:1962) / SP Group 324 (193:770)
Keep live HTML text for exact typography; SVG supplies the angular
gold fill, border and arrow so the button does not disappear in-browser.
========================================================= */
.renewal-form .form-step1 .renewal-form__buttons .btn-to-confirm {
display:flex !important;
width:37.9rem !important;
height:8.9rem !important;
min-height:8.9rem !important;
margin:0 auto !important;
padding:0 0 0 8.3rem !important;
border:0 !important;
border-radius:0 !important;
background-color:transparent !important;
background-image:url('../images/btn_form_confirm_pc.svg') !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:100% 100% !important;
color:#fff !important;
font-family:var(--font-ja) !important;
font-size:3.2rem !important;
line-height:3.4rem !important;
letter-spacing:.15em !important;
font-weight:700 !important;
text-align:left !important;
}
.renewal-form .form-step1 .renewal-form__buttons .btn-to-confirm::before,
.renewal-form .form-step1 .renewal-form__buttons .btn-to-confirm::after {
content:none !important;
display:none !important;
}
@media (max-width:1024px) {
.renewal-form .form-step1 .renewal-form__buttons .btn-to-confirm {
width:26.7rem !important;
height:6.3rem !important;
min-height:6.3rem !important;
padding-left:4.5rem !important;
background-image:url('../images/btn_form_confirm_sp.svg') !important;
font-size:2.4rem !important;
line-height:3.4rem !important;
letter-spacing:.15em !important;
}
}
/* =========================================================
CONTACT SP REAL-DEVICE SAFETY FIX — 2026-09-01
- Prevent duplicate confirm-button text over Figma SVG asset.
- Keep iOS Safari date controls inside the measured Figma columns.
Figma SP grid: 160px + 12px + 160px = 332px.
========================================================= */
.renewal-form .form-step1 .renewal-form__buttons .btn-to-confirm {
/* The Figma SVG already contains the visible label and arrow.
Keep the HTML text as the accessible name, but do not paint it twice. */
color:transparent !important;
font-size:0 !important;
line-height:0 !important;
letter-spacing:0 !important;
text-shadow:none !important;
overflow:hidden;
}
@media (max-width:1024px) {
.renewal-form__grid {
/* minmax(0, ...) prevents form controls with intrinsic widths
(notably iOS Safari input[type=date]) from expanding the grid track. */
grid-template-columns:minmax(0, 16rem) minmax(0, 16rem);
}
.renewal-form__grid > .renewal-form__field,
.renewal-form__grid > .renewal-form__field .wpcf7-form-control-wrap {
min-width:0;
max-width:100%;
}
.renewal-form input[type="date"] {
display:block;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
-webkit-box-sizing:border-box !important;
/* iOS Safari can preserve an intrinsic native date-field width unless
appearance is normalized. Tapping still invokes the native date picker. */
-webkit-appearance:none;
appearance:none;
overflow:hidden;
}
.renewal-form input[type="date"]::-webkit-date-and-time-value {
min-width:0;
width:100%;
margin:0;
text-align:left;
}
}
/* =========================================================
CONTACT CONFIRM STEP BUTTON LAYOUT FIX — 2026-09-01
- Step2 buttons were inheriting mixed legacy/mobile rules.
- Normalize the confirmation-step actions to match the intended
button sizes and clean alignment on both PC and SP.
========================================================= */
.renewal-form .form-step2 .renewal-form__buttons {
display:flex;
justify-content:center;
align-items:center;
gap:2rem;
}
.renewal-form .form-step2 .btn-back {
display:block;
flex:0 0 auto;
width:18rem !important;
height:5.8rem !important;
min-width:18rem !important;
min-height:5.8rem !important;
margin:0 !important;
}
.renewal-form .form-step2 .submit-btn-wrapper {
display:block;
flex:0 0 auto;
width:37.9rem;
}
.renewal-form .form-step2 .submit-btn-wrapper .wpcf7-submit {
display:block;
width:37.9rem !important;
height:8.9rem !important;
min-height:8.9rem !important;
margin:0 auto !important;
}
@media (max-width:1024px) {
.renewal-form .form-step2 .renewal-form__buttons {
flex-direction:column;
gap:1.8rem;
}
.renewal-form .form-step2 .btn-back {
width:16rem !important;
height:5.2rem !important;
min-width:16rem !important;
min-height:5.2rem !important;
margin:0 auto !important;
}
.renewal-form .form-step2 .submit-btn-wrapper {
width:26.7rem;
}
.renewal-form .form-step2 .submit-btn-wrapper .wpcf7-submit {
width:26.7rem !important;
height:6.3rem !important;
min-height:6.3rem !important;
}
}
/* =========================================================
CONTACT CONFIRM STEP REAL-DEVICE COMPAT FIX — 2026-09-01
1) Do not depend on flex-gap for vertical button spacing. Older iOS Safari
can ignore flexbox gap entirely. Use an explicit wrapper margin instead.
2) CF7 response-output is generated outside .renewal-form. Hide the empty /
pre-submit response box so the default blue CF7 border never appears.
========================================================= */
form.wpcf7-form.is-confirm .wpcf7-response-output,
form.wpcf7-form.init .wpcf7-response-output:empty,
form.wpcf7-form .wpcf7-response-output:empty {
display:none !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
min-height:0 !important;
}
@media (max-width:1024px) {
/* Safari compatibility: use margin, not flex gap, for the visible separation. */
form.wpcf7-form .renewal-form .form-step2 .renewal-form__buttons--confirm {
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:0 !important;
row-gap:0 !important;
}
form.wpcf7-form .renewal-form .form-step2 .renewal-form__buttons--confirm > .btn-back {
width:16rem !important;
height:5.2rem !important;
min-width:16rem !important;
min-height:5.2rem !important;
margin:0 auto !important;
}
form.wpcf7-form .renewal-form .form-step2 .renewal-form__buttons--confirm > .submit-btn-wrapper {
position:relative !important;
display:block !important;
width:26.7rem !important;
max-width:26.7rem !important;
margin:2.4rem auto 0 !important;
padding:0 !important;
}
form.wpcf7-form .renewal-form .form-step2 .renewal-form__buttons--confirm > .submit-btn-wrapper > .wpcf7-submit {
display:block !important;
width:26.7rem !important;
max-width:26.7rem !important;
height:6.3rem !important;
min-height:6.3rem !important;
margin:0 !important;
padding:0 !important;
}
}
/* =========================================================
CONTACT STEP2 DEFINITIVE SP FIX — 2026-09-01
CF7 may insert intermediary markup, therefore these rules intentionally
do not rely on direct-child selectors.
========================================================= */
@media (max-width:1024px) {
/* Prevent any renewal-LP child from creating a page-level horizontal scroller.
`hidden` is kept as the iOS Safari fallback; modern browsers may use clip. */
html,
body {
max-width:100%;
overflow-x:hidden;
}
.renewal-page {
width:100%;
max-width:100%;
overflow-x:hidden;
}
/* CF7 wrappers must never establish an intrinsic width wider than viewport. */
.renewal-contact .wpcf7,
.renewal-contact form.wpcf7-form,
.renewal-contact .renewal-form,
.renewal-contact .form-step1,
.renewal-contact .form-step2 {
width:100%;
max-width:100%;
min-width:0;
box-sizing:border-box;
}
/* Do not use flex-gap or DOM-child assumptions here.
The wrapper itself always exists because it is written in the CF7 form. */
form.wpcf7-form .renewal-form .form-step2 .renewal-form__buttons--confirm {
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
width:100% !important;
max-width:100% !important;
gap:0 !important;
row-gap:0 !important;
overflow:visible !important;
}
form.wpcf7-form .renewal-form .form-step2 .btn-back {
display:block !important;
width:16rem !important;
max-width:16rem !important;
min-width:16rem !important;
height:5.2rem !important;
min-height:5.2rem !important;
margin:0 auto !important;
padding:0 !important;
flex:none !important;
}
form.wpcf7-form .renewal-form .form-step2 .submit-btn-wrapper {
position:relative !important;
display:block !important;
width:26.7rem !important;
max-width:26.7rem !important;
min-width:0 !important;
margin:2.4rem auto 0 !important;
padding:0 !important;
flex:none !important;
box-sizing:border-box !important;
}
form.wpcf7-form .renewal-form .form-step2 .submit-btn-wrapper .wpcf7-submit {
display:block !important;
width:26.7rem !important;
max-width:26.7rem !important;
height:6.3rem !important;
min-height:6.3rem !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
}
/* Spinner must not change the layout width. */
form.wpcf7-form .renewal-form .form-step2 .submit-btn-wrapper .wpcf7-spinner {
position:absolute !important;
left:50% !important;
right:auto !important;
top:calc(100% + .8rem) !important;
transform:translateX(-50%) !important;
margin:0 !important;
}
/* Known measured SP form blocks are slightly wider than the 326px customer
field column, but remain inside the 375px Figma viewport. Keep them bounded
to the actual viewport so fluid-rem scaling cannot create horizontal scroll. */
.renewal-form__grid,
.renewal-form__trial-note,
.renewal-form__corporate,
.renewal-form__corporate-grid {
max-width:calc(100vw - 4.2rem) !important;
box-sizing:border-box !important;
}
}
/* =========================================================
CONTACT iOS FOCUS / SCROLL + REVEAL RESPONSIVENESS FIX — 2026-09-01
- Revert page-level overflow locking: on iOS it can make vertical scrolling
feel sticky because the root scrolling element changes behavior.
- Prevent Safari auto-zoom after focusing form controls (<16px text).
- Constrain date/number controls themselves instead of clipping the page.
- CONTACT is a CTA destination, so it must be immediately visible.
========================================================= */
@media (max-width:1024px) {
html,
body,
.renewal-page {
max-width:none !important;
overflow-x:visible !important;
}
.renewal-contact .wpcf7-form-control-wrap,
.renewal-form__grid > .renewal-form__field,
.renewal-form__grid > .renewal-form__field .wpcf7-form-control-wrap {
display:block;
width:100%;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}
.renewal-form input[type="date"],
.renewal-form input[type="number"] {
display:block;
width:100% !important;
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
-webkit-box-sizing:border-box !important;
overflow:hidden;
}
.renewal-form input[type="number"] {
-webkit-appearance:none;
appearance:textfield;
}
.renewal-form input[type="number"]::-webkit-inner-spin-button,
.renewal-form input[type="number"]::-webkit-outer-spin-button {
margin:0;
-webkit-appearance:none;
}
}
/* iPhone/iPad Safari zooms the viewport when a focused control is below 16px.
Keep the initial placeholder appearance close to Figma while ensuring the
actual control font is 16px on WebKit touch devices. */
@supports (-webkit-touch-callout: none) {
@media (max-width:1024px) {
.renewal-form input[type="text"],
.renewal-form input[type="email"],
.renewal-form input[type="tel"],
.renewal-form input[type="date"],
.renewal-form input[type="number"],
.renewal-form select,
.renewal-form textarea {
font-size:16px !important;
}
.renewal-form input::placeholder,
.renewal-form textarea::placeholder {
font-size:14px;
}
}
}
/* CTA destination must never wait for ScrollReveal after a long jump. */
.renewal-contact .anim {
visibility:visible !important;
opacity:1 !important;
transform:none !important;
transition:none !important;
}
/* =========================================================
CONTACT CF7 SUBMIT FEEDBACK FIX — 2026-09-01
The previous blue-border fix hid every CF7 response while Step2 was open,
which made mail/REST failures look like an unresponsive submit button.
Keep the response borderless, but show non-success errors and provide a
dedicated status line immediately below the Step2 action buttons.
========================================================= */
.renewal-form__submit-status {
min-height:0;
margin:1.8rem 0 0;
text-align:center;
font-family:var(--font-ja);
font-size:1.4rem;
line-height:1.8;
letter-spacing:.05em;
color:#fff;
}
.renewal-form__submit-status:empty { display:none; }
.renewal-form__submit-status.is-error { color:#ff8a8a; }
.renewal-form__submit-status.is-success { color:#fff; }
.renewal-form__submit-status.is-sending { color:#d5b767; }
/* Never bring back CF7's default blue bordered box. */
form.wpcf7-form .wpcf7-response-output {
margin:1.5rem 0 0 !important;
padding:0 !important;
border:0 !important;
min-height:0 !important;
text-align:center;
color:#ff8a8a;
font-family:var(--font-ja);
font-size:1.3rem;
line-height:1.8;
}
/* Override the earlier blanket `is-confirm { display:none }` only when CF7
has a real error/status to communicate. */
form.wpcf7-form.is-confirm.invalid .wpcf7-response-output,
form.wpcf7-form.is-confirm.unaccepted .wpcf7-response-output,
form.wpcf7-form.is-confirm.spam .wpcf7-response-output,
form.wpcf7-form.is-confirm.failed .wpcf7-response-output,
form.wpcf7-form.is-confirm.aborted .wpcf7-response-output {
display:block !important;
}
@media (max-width:1024px) {
.renewal-form__submit-status {
width:100%;
margin-top:1.6rem;
font-size:1.3rem;
}
}
/* =========================================================
CONTACT CF7 SINGLE ERROR MESSAGE — 2026-09-01
The renewal form has its own aria-live submit status. Hide CF7's separate
response output completely so mail_failed/spam/etc. are never duplicated.
Inline .wpcf7-not-valid-tip messages remain available for field errors.
========================================================= */
.wpcf7 form .wpcf7-response-output,
form.wpcf7-form .wpcf7-response-output,
form.wpcf7-form.is-confirm .wpcf7-response-output,
form.wpcf7-form.invalid .wpcf7-response-output,
form.wpcf7-form.failed .wpcf7-response-output,
form.wpcf7-form.spam .wpcf7-response-output,
form.wpcf7-form.aborted .wpcf7-response-output,
form.wpcf7-form.sent .wpcf7-response-output {
display:none !important;
}
/* =========================================================
CONTACT STEP2 PC ACTION BUTTON DEFINITIVE LAYOUT — 2026-09-01
Legacy contact.css still contains !important rules for CF7 wrappers.
On desktop, force the renewal confirmation actions into the intended
single-row geometry: 180px back + 20px gap + 379px submit = 579px.
SP rules are intentionally untouched.
========================================================= */
@media (min-width:1025px) {
form.wpcf7-form .renewal-form .form-step2 .renewal-form__buttons--confirm,
form.wpcf7-form .renewal-form .form-step2 .renewal-form__buttons {
display:grid !important;
grid-template-columns:18rem 37.9rem !important;
grid-template-rows:8.9rem !important;
column-gap:2rem !important;
row-gap:0 !important;
align-items:center !important;
justify-content:center !important;
width:57.9rem !important;
max-width:100% !important;
margin:5rem auto 0 !important;
padding:0 !important;
text-align:center !important;
box-sizing:border-box !important;
}
form.wpcf7-form .renewal-form .form-step2 .btn-back {
grid-column:1 !important;
grid-row:1 !important;
display:block !important;
width:18rem !important;
min-width:18rem !important;
max-width:18rem !important;
height:5.8rem !important;
min-height:5.8rem !important;
max-height:5.8rem !important;
margin:0 !important;
padding:0 !important;
align-self:center !important;
justify-self:start !important;
box-sizing:border-box !important;
}
form.wpcf7-form .renewal-form .form-step2 .submit-btn-wrapper {
grid-column:2 !important;
grid-row:1 !important;
position:relative !important;
display:block !important;
width:37.9rem !important;
min-width:37.9rem !important;
max-width:37.9rem !important;
height:8.9rem !important;
min-height:8.9rem !important;
margin:0 !important;
padding:0 !important;
align-self:center !important;
justify-self:start !important;
box-sizing:border-box !important;
}
form.wpcf7-form .renewal-form .form-step2 .submit-btn-wrapper .wpcf7-submit {
display:block !important;
width:37.9rem !important;
min-width:37.9rem !important;
max-width:37.9rem !important;
height:8.9rem !important;
min-height:8.9rem !important;
max-height:8.9rem !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
}
form.wpcf7-form .renewal-form .form-step2 .submit-btn-wrapper .wpcf7-spinner {
position:absolute !important;
left:50% !important;
right:auto !important;
top:calc(100% + .8rem) !important;
transform:translateX(-50%) !important;
margin:0 !important;
}
}
/* =========================================================
CONTACT STEP2 PC ACTIONS — REAL CF7 DOM FIX / 2026-09-01
CF7 can inject wrappers around controls. Make those wrappers layout-
transparent, then force both possible action containers into one row.
========================================================= */
@media (min-width:1025px) {
.renewal-form .form-step2 .renewal-form__buttons--confirm,
.renewal-form .form-step2 .renewal-form__buttons,
.renewal-form .form-step2 .contact__cta {
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:center !important;
gap:2rem !important;
width:57.9rem !important;
max-width:100% !important;
margin:5rem auto 0 !important;
padding:0 !important;
box-sizing:border-box !important;
}
/* Contact Form 7's wpautop may insert one or more paragraph wrappers.
`display:contents` lets the actual back/submit controls participate in
the flex row instead of stacking inside those paragraphs. */
.renewal-form .form-step2 .renewal-form__buttons--confirm > p,
.renewal-form .form-step2 .renewal-form__buttons > p,
.renewal-form .form-step2 .contact__cta > p {
display:contents !important;
margin:0 !important;
padding:0 !important;
}
.renewal-form .form-step2 .btn-back {
flex:0 0 18rem !important;
width:18rem !important;
min-width:18rem !important;
max-width:18rem !important;
height:5.8rem !important;
min-height:5.8rem !important;
max-height:5.8rem !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
}
.renewal-form .form-step2 .submit-btn-wrapper {
position:relative !important;
display:block !important;
flex:0 0 37.9rem !important;
width:37.9rem !important;
min-width:37.9rem !important;
max-width:37.9rem !important;
height:8.9rem !important;
min-height:8.9rem !important;
max-height:8.9rem !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
}
.renewal-form .form-step2 .submit-btn-wrapper .wpcf7-submit,
.renewal-form .form-step2 .wpcf7-submit.contact__submit {
display:block !important;
width:37.9rem !important;
min-width:37.9rem !important;
max-width:37.9rem !important;
height:8.9rem !important;
min-height:8.9rem !important;
max-height:8.9rem !important;
margin:0 !important;
padding:0 !important;
box-sizing:border-box !important;
}
}
/* CF7 response output is a sibling of