/| / | elements stay in the DOM,
just laid out via CSS grid instead of a literal table.
================================================================== */
body#contact.input .mod-pagetitle{ display:none; }
body#contact .sec-form{
max-width: 840px;
margin: 0 auto;
padding: clamp(64px,9vw,128px) var(--pw-pad-x) clamp(96px,10vw,160px);
background: var(--pw-white);
font-family: var(--pw-font-jp-sans);
color: var(--pw-text-on-light);
}
body#contact .sec-form *{ box-sizing: border-box; }
body#contact .form-header{ margin-bottom:48px; padding-bottom:32px; border-bottom:1px solid var(--pw-line-light); }
body#contact .form-header h2.mod-heading-standard{
display:flex; flex-direction:column; gap:8px;
font-family: var(--pw-font-jp-serif); font-weight:500;
font-size: clamp(24px,2.8vw,32px); color: var(--pw-text-on-light);
}
body#contact .form-header h2.mod-heading-standard span{
order:-1;
font-family: var(--pw-font-en); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--pw-greige);
}
body#contact .form-header ul{ display:flex; list-style:none; margin:28px 0 0; padding:0; gap:40px; }
body#contact .form-header ul li{
font-family: var(--pw-font-en); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
color: var(--pw-greige); padding-bottom:12px; border-bottom:2px solid var(--pw-line-light);
}
body#contact .form-header ul li.active{ color: var(--pw-text-on-light); border-bottom-color: var(--pw-charcoal); }
body#contact .sec-form > p{ margin:32px 0 48px; font-size:14px; line-height:1.9; color: var(--pw-text-muted); }
/* Table -> CSS grid rows, DOM untouched */
body#contact .sec-form table{ display:block; width:100%; border-collapse:collapse; }
body#contact .sec-form table tbody{ display:block; }
body#contact .sec-form table tr{
display:grid; grid-template-columns: 200px 1fr; gap:16px 32px; align-items:start;
padding:28px 0; border-top:1px solid var(--pw-line-light);
}
body#contact .sec-form table tr:first-child{ border-top:none; }
body#contact .sec-form th, body#contact .sec-form td{ display:block; text-align:left; padding:0; border:none; background:none; font-weight:400; }
body#contact .sec-form th label{
display:inline-flex; align-items:center; gap:8px;
font-family: var(--pw-font-jp-sans); font-size:13.5px; letter-spacing:.02em; color: var(--pw-text-on-light);
padding-top:14px;
}
body#contact .sec-form th label span{
font-family: var(--pw-font-en); font-size:10px; letter-spacing:.06em;
color: var(--pw-ivory); background: var(--pw-charcoal); padding:3px 8px; border-radius:2px;
}
body#contact .sec-form input[type="text"],
body#contact .sec-form input[type="email"],
body#contact .sec-form input[type="tel"],
body#contact .sec-form textarea{
width:100%; background: var(--pw-ivory); border:1px solid var(--pw-line-light); border-radius:2px;
padding:14px 16px; font-family: var(--pw-font-jp-sans); font-size:15px; color: var(--pw-text-on-light);
box-shadow:none; -webkit-appearance:none; appearance:none;
transition: border-color .3s var(--pw-ease), background .3s var(--pw-ease);
}
body#contact .sec-form input[type="text"]:focus,
body#contact .sec-form input[type="email"]:focus,
body#contact .sec-form input[type="tel"]:focus,
body#contact .sec-form textarea:focus{
outline:none; border-color: var(--pw-charcoal); background: var(--pw-white);
}
body#contact .sec-form input::placeholder,
body#contact .sec-form textarea::placeholder{ color: var(--pw-greige); opacity:.8; }
body#contact .sec-form textarea{ min-height:200px; line-height:1.85; resize:vertical; }
/* Plain-text values on the confirm step (td with no input) */
body#contact.confirm .sec-form td{ padding-top:14px; font-size:15px; line-height:1.8; color: var(--pw-text-on-light); }
body#contact .sec-form .zipcode{ display:flex; align-items:center; gap:10px; }
body#contact .sec-form .zipcode input{ width:140px; flex:none; }
body#contact .sec-form .zipcode span{ font-size:12px; color: var(--pw-greige); }
body#contact .sec-form .label-flex{ display:flex; flex-wrap:wrap; gap:14px 24px; padding-top:12px; }
body#contact .sec-form .label-flex label{
display:inline-flex; align-items:center; gap:9px;
font-size:13.5px; color: var(--pw-text-on-light); cursor:pointer;
}
body#contact .sec-form input[type="checkbox"]{
appearance:none; -webkit-appearance:none;
width:18px; height:18px; flex-shrink:0; margin:0;
border:1px solid var(--pw-line-light); border-radius:2px; background: var(--pw-ivory);
position:relative; cursor:pointer;
transition: background .25s var(--pw-ease), border-color .25s var(--pw-ease);
}
body#contact .sec-form input[type="checkbox"]:checked{ background: var(--pw-charcoal); border-color: var(--pw-charcoal); }
body#contact .sec-form input[type="checkbox"]:checked::after{
content:""; position:absolute; left:5px; top:1px; width:5px; height:9px;
border:solid var(--pw-ivory); border-width:0 2px 2px 0; transform:rotate(45deg);
}
body#contact .sec-form .privacy-block{
margin-top:48px; padding: clamp(28px,3vw,40px); background: var(--pw-ivory); border:1px solid var(--pw-line-light);
}
body#contact .sec-form .privacy-block h3{
font-family: var(--pw-font-jp-serif); font-size:16px; font-weight:500; color: var(--pw-text-on-light); margin:0 0 16px;
}
body#contact .sec-form .privacy-block p{ font-size:12.5px; line-height:1.95; color: var(--pw-text-muted); margin:0; }
body#contact .sec-form .privacy-block .block{ margin-top:24px; padding-top:24px; border-top:1px solid var(--pw-line-light); }
body#contact .sec-form .privacy-block .block p{ margin-bottom:0; }
body#contact .sec-form .privacy-block label.center{
display:flex; align-items:center; justify-content:center; gap:10px; margin-top:20px;
font-size:14px; color: var(--pw-text-on-light); cursor:pointer;
}
body#contact .sec-form .btn-container{
margin-top:56px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
}
body#contact .sec-form input[type="submit"]{
appearance:none; -webkit-appearance:none; cursor:pointer;
min-width:280px; background: var(--pw-charcoal); color: var(--pw-ivory); border:1px solid var(--pw-charcoal);
padding:18px 40px; font-family: var(--pw-font-en); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
transition: background .3s var(--pw-ease), color .3s var(--pw-ease);
}
body#contact .sec-form input[type="submit"]:hover{ background: var(--pw-ivory); color: var(--pw-charcoal); }
body#contact .sec-form #backBtn{
appearance:none; -webkit-appearance:none; cursor:pointer;
background:transparent; color: var(--pw-text-on-light); border:1px solid var(--pw-line-light);
padding:18px 36px; font-family: var(--pw-font-en); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
transition: border-color .3s var(--pw-ease), background .3s var(--pw-ease);
}
body#contact .sec-form #backBtn:hover{ border-color: var(--pw-charcoal); background: var(--pw-ivory); }
/* Thanks step */
body#contact.thanks .sec-form p.center{
text-align:center; font-size:14.5px; line-height:2.1; color: var(--pw-text-muted); max-width:52em; margin:0 auto;
}
body#contact.thanks .sec-form p.center a{ color: var(--pw-text-on-light); text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 760px){
body#contact .sec-form table tr{ grid-template-columns:1fr; gap:8px; padding:22px 0; }
body#contact .sec-form th label{ padding-top:0; }
body#contact .form-header ul{ gap:24px; }
body#contact .sec-form .zipcode{ flex-wrap:wrap; }
body#contact .sec-form input[type="submit"],
body#contact .sec-form #backBtn{ width:100%; min-width:0; }
}
/* ---------- 23b. CONTACT hardening pass ----------
The theme ships an assets/css/styles.css that this checkout doesn't
contain a copy of, so the section above was verified against a page
with no legacy stylesheet loaded at all — it couldn't reveal where
styles.css still wins the cascade on production (old light-blue
step UI, a paper-plane icon, a red required badge, a pre-renewal
gothic font). Everything below re-asserts the same design with
!important and explicitly kills any ::before/::after/background-image
a legacy rule might be drawing, so this stylesheet always wins
regardless of styles.css's specificity. Still scoped to body#contact
only, and only in this stylesheet — styles.css itself, and every
name/id/value/class in the PHP, remain untouched. */
body#contact .sec-form,
body#contact .sec-form *{
font-family: var(--pw-font-jp-sans) !important;
}
body#contact .form-header h2.mod-heading-standard,
body#contact .form-header h2.mod-heading-standard *{
font-family: var(--pw-font-jp-serif) !important;
color: var(--pw-text-on-light) !important;
background:none !important; background-image:none !important;
}
body#contact .form-header h2.mod-heading-standard span{
font-family: var(--pw-font-en) !important;
color: var(--pw-greige) !important;
}
body#contact .form-header h2.mod-heading-standard::before,
body#contact .form-header h2.mod-heading-standard::after,
body#contact .form-header h2.mod-heading-standard span::before,
body#contact .form-header h2.mod-heading-standard span::after{
content:none !important; display:none !important; background:none !important;
}
body#contact .form-header ul,
body#contact .form-header ul li{
font-family: var(--pw-font-en) !important;
background:none !important; background-image:none !important;
box-shadow:none !important; border-radius:0 !important;
}
body#contact .form-header ul li{
color: var(--pw-greige) !important;
border:none !important; border-bottom:2px solid var(--pw-line-light) !important;
}
body#contact .form-header ul li.active{
color: var(--pw-text-on-light) !important; border-bottom-color: var(--pw-charcoal) !important;
}
body#contact .form-header ul li::before,
body#contact .form-header ul li::after{
content:none !important; display:none !important; background:none !important; box-shadow:none !important;
}
body#contact .sec-form th label span{
background: var(--pw-charcoal) !important; color: var(--pw-ivory) !important;
border:none !important; border-radius:2px !important; box-shadow:none !important;
font-family: var(--pw-font-en) !important;
}
body#contact .sec-form input[type="text"],
body#contact .sec-form input[type="email"],
body#contact .sec-form input[type="tel"],
body#contact .sec-form textarea,
body#contact .sec-form select{
font-family: var(--pw-font-jp-sans) !important;
color: var(--pw-text-on-light) !important;
background: var(--pw-ivory) !important;
border:1px solid var(--pw-line-light) !important;
border-radius:2px !important;
box-shadow:none !important;
}
body#contact .sec-form input[type="text"]:focus,
body#contact .sec-form input[type="email"]:focus,
body#contact .sec-form input[type="tel"]:focus,
body#contact .sec-form textarea:focus,
body#contact .sec-form select:focus{
border-color: var(--pw-charcoal) !important;
background: var(--pw-white) !important;
box-shadow:none !important; outline:none !important;
}
body#contact .sec-form input[type="checkbox"]{
-webkit-appearance:none !important; appearance:none !important;
background: var(--pw-ivory) !important; border:1px solid var(--pw-line-light) !important;
border-radius:2px !important; box-shadow:none !important;
}
body#contact .sec-form input[type="checkbox"]:checked{
background: var(--pw-charcoal) !important; border-color: var(--pw-charcoal) !important;
}
/* Privacy-block ("個人情報の利用目的") still showed the legacy light-blue
panel/border/link on production because styles.css's rule won the
cascade there too — reasserting the same ivory/charcoal palette with
!important, scoped to body#contact only. */
body#contact .sec-form .privacy-block{
background: var(--pw-ivory) !important; border:1px solid var(--pw-line-light) !important;
border-radius:0 !important; box-shadow:none !important; background-image:none !important;
}
body#contact .sec-form .privacy-block::before,
body#contact .sec-form .privacy-block::after{
content:none !important; display:none !important; background:none !important;
}
body#contact .sec-form .privacy-block h3{
font-family: var(--pw-font-jp-serif) !important; color: var(--pw-text-on-light) !important;
background:none !important; border:none !important;
}
body#contact .sec-form .privacy-block h3::before,
body#contact .sec-form .privacy-block h3::after{
content:none !important; display:none !important; background:none !important;
}
body#contact .sec-form .privacy-block p{ color: var(--pw-text-muted) !important; }
body#contact .sec-form .privacy-block p a{
color: var(--pw-text-on-light) !important; text-decoration:underline !important; text-underline-offset:3px !important;
}
body#contact .sec-form .privacy-block .block{
border-top:1px solid var(--pw-line-light) !important; background:none !important;
}
body#contact .sec-form .privacy-block label.center{ color: var(--pw-text-on-light) !important; }
body#contact .sec-form input[type="submit"]{
background: var(--pw-charcoal) !important; color: var(--pw-ivory) !important;
border:1px solid var(--pw-charcoal) !important; border-radius:0 !important;
box-shadow:none !important; background-image:none !important;
font-family: var(--pw-font-en) !important;
}
body#contact .sec-form input[type="submit"]:hover{
background: var(--pw-ivory) !important; color: var(--pw-charcoal) !important;
}
body#contact .sec-form input[type="submit"]::before,
body#contact .sec-form input[type="submit"]::after,
body#contact .sec-form .btn-container::before,
body#contact .sec-form .btn-container::after{
content:none !important; display:none !important; background:none !important;
}
body#contact .sec-form #backBtn{
background:transparent !important; color: var(--pw-text-on-light) !important;
border:1px solid var(--pw-line-light) !important; border-radius:0 !important;
box-shadow:none !important; font-family: var(--pw-font-en) !important;
}
body#contact .sec-form #backBtn:hover{
border-color: var(--pw-charcoal) !important; background: var(--pw-ivory) !important;
}
body#contact .form-header::before,
body#contact .form-header::after,
body#contact .mailform::before,
body#contact .mailform::after,
body#contact .sec-form > p::before,
body#contact .sec-form > p::after{
content:none !important; display:none !important; background:none !important;
}
/* The sitewide bottom-right fixed CTA is redundant on the page that
already is the contact form — hidden here only (body#contact),
every other page keeps it exactly as-is. */
body#contact .pw-fixed-cta{ display:none !important; }
/* ==================================================================
24. CO-CREATION — partner category grid (pages/co-creation.php)
Modeled directly on .pw-areas-grid's proven bordered-cell pattern,
just 2 columns instead of 3 so each of the 4 partner categories
gets more room for a name + jp + description line.
================================================================== */
.pw-partner-grid{
margin-top: clamp(40px,5vw,64px);
display:grid; grid-template-columns: repeat(2,1fr);
border-top:1px solid var(--pw-line-light); border-left:1px solid var(--pw-line-light);
}
.pw-partner-cell{
padding: clamp(32px,4vw,48px);
border-right:1px solid var(--pw-line-light); border-bottom:1px solid var(--pw-line-light);
}
.pw-partner-num{ font-family: var(--pw-font-en); font-size:14px; color: var(--pw-greige); }
.pw-partner-name{
margin-top:14px; font-family: var(--pw-font-en); font-weight:500;
font-size: clamp(22px,2.4vw,30px); text-transform:uppercase; color: var(--pw-text-on-light);
}
.pw-partner-jp{ margin-top:6px; font-family: var(--pw-font-jp-serif); font-size:16px; color: var(--pw-greige); }
.pw-partner-desc{ margin-top:18px; font-size:14px; line-height:1.9; color: var(--pw-text-muted); }
@media (max-width:760px){
.pw-partner-grid{ grid-template-columns:1fr; }
}
/* ==================================================================
25. AREAS — photo-forward grid (pages/areas.php only)
Replaces the old text-row list (area name + inline stats/description)
with a large-photo editorial grid. Distinct, page-scoped class names
(.pw-area-photo-*) so nothing here touches the unrelated HOME
component of the same era, .pw-areas-grid/.pw-area-cell (section 12,
index.php's small text-only area teaser) — that component and every
other page keep their current layout untouched. Everything below is
additionally scoped under body#areas as a second safeguard.
================================================================== */
body#areas .pw-area-photo-grid{
margin-top: clamp(40px,5vw,64px);
display:grid; grid-template-columns: repeat(3,1fr);
gap: clamp(40px,4.5vw,64px) clamp(28px,3vw,40px);
}
body#areas .pw-area-photo-card{ display:block; }
body#areas .pw-area-photo{
aspect-ratio: 4/3; overflow:hidden; background: var(--pw-stone);
}
body#areas .pw-area-photo img{
width:100%; height:100%; object-fit:cover; display:block;
transition: transform .6s var(--pw-ease);
}
body#areas a.pw-area-photo-card:hover .pw-area-photo img{ transform: scale(1.045); }
body#areas .pw-area-photo-name{
margin-top:18px; font-family: var(--pw-font-en); font-weight:500;
font-size: clamp(18px,1.8vw,22px); letter-spacing:.03em; text-transform:uppercase;
color: var(--pw-charcoal);
}
body#areas .pw-area-photo-jp{
display:block; margin-top:4px;
font-family: var(--pw-font-jp-serif); font-size:14px; letter-spacing:0; text-transform:none;
color: var(--pw-greige);
}
@media (max-width:1024px){
body#areas .pw-area-photo-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:640px){
body#areas .pw-area-photo-grid{ grid-template-columns: 1fr; }
}
/* ==================================================================
26. EXISTING contact confirm/thanks steps — visual restyle only
pages/contact/confirm.php (body#contact.confirm) and
pages/contact/thanks.php (body#contact.thanks) keep their existing
HTML exactly as-is — form fields, name attributes, action/method,
#backBtn, session/token PHP are untouched. This only restyles what
already renders, scoped to .confirm/.thanks specifically (never
bare body#contact, which is shared with the live input form at
pages/contact.php and must not be affected). The one new element,
.pw-confirm-photo, is an additive wrapper
already inserted in confirm.php next to the existing .mod-pagetitle
— .pw-photo itself is the same global photo component used
sitewide, so no new image styling is needed here.
================================================================== */
body#contact.confirm,
body#contact.thanks{ background: var(--pw-white); padding-top: 96px; padding-bottom: clamp(64px,7vw,112px); }
body#contact.confirm .mod-pagetitle,
body#contact.thanks .mod-pagetitle{
padding: 48px var(--pw-pad-x) 0; text-align:left; background:none;
}
body#contact.confirm .mod-pagetitle h1,
body#contact.thanks .mod-pagetitle h1{
font-family: var(--pw-font-jp-sans); font-size:12px; letter-spacing:.14em; color: var(--pw-greige);
text-transform:uppercase; font-weight:500;
}
body#contact.confirm .mod-pagetitle h1 span,
body#contact.thanks .mod-pagetitle h1 span{ font-family: var(--pw-font-en); margin-right:8px; }
body#contact.confirm .pw-confirm-photo{
max-width: 880px; margin: 32px auto 0; padding: 0 var(--pw-pad-x);
}
body#contact.confirm .pw-confirm-photo img{ width:100%; height:100%; }
body#contact.confirm .sec-form,
body#contact.thanks .sec-form{ max-width: 880px; margin: 0 auto; padding: 40px var(--pw-pad-x) 0; }
body#contact.confirm .form-header,
body#contact.thanks .form-header{ text-align:left; margin-bottom: clamp(40px,5vw,56px); }
body#contact.confirm .mod-heading-standard,
body#contact.thanks .mod-heading-standard{
font-family: var(--pw-font-jp-serif); font-weight:500; color: var(--pw-charcoal);
font-size: clamp(24px,3vw,32px); line-height:1.5; background:none; border:none; padding:0;
display:flex; flex-direction:column; gap:8px;
}
body#contact.confirm .mod-heading-standard span,
body#contact.thanks .mod-heading-standard span{
font-family: var(--pw-font-en); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
color: var(--pw-greige); order:-1;
}
body#contact.confirm .form-header ul,
body#contact.thanks .form-header ul{
display:flex; gap: clamp(20px,3vw,32px); margin-top: 28px; padding-top: 24px;
border-top: 1px solid var(--pw-line-light);
}
body#contact.confirm .form-header ul li,
body#contact.thanks .form-header ul li{
font-family: var(--pw-font-en); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
color: var(--pw-greige);
}
body#contact.confirm .form-header ul li.active,
body#contact.thanks .form-header ul li.active{ color: var(--pw-charcoal); }
/* Confirm: field table restyled to a label/value editorial pattern */
body#contact.confirm .sec-form table{ width:100%; border-collapse:collapse; }
body#contact.confirm .sec-form table tr{ border-top: 1px solid var(--pw-line-light); }
body#contact.confirm .sec-form table tr:last-child{ border-bottom: 1px solid var(--pw-line-light); }
body#contact.confirm .sec-form table th,
body#contact.confirm .sec-form table td{
padding: 20px 4px; vertical-align:top; text-align:left; background:none; border:none;
}
body#contact.confirm .sec-form table th{
width: 220px; font-family: var(--pw-font-en); font-size:11px; letter-spacing:.1em;
text-transform:uppercase; color: var(--pw-greige); font-weight:500;
}
body#contact.confirm .sec-form table th label{ font: inherit; color: inherit; }
body#contact.confirm .sec-form table td{
font-family: var(--pw-font-jp-sans); font-size:15px; line-height:1.9; color: var(--pw-charcoal);
white-space: pre-wrap; word-break: break-word;
}
/* Thanks: body copy */
body#contact.thanks .sec-form p.center{
font-family: var(--pw-font-jp-sans); font-size:15px; line-height:2; color: #2A2825;
text-align:left; max-width: 640px; margin: 0 auto;
}
body#contact.thanks .sec-form p.center a{
display:inline-block; margin-top: 32px; padding-bottom:3px;
font-family: var(--pw-font-en); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
color: var(--pw-charcoal); border-bottom: 1px solid var(--pw-greige);
transition: color .25s var(--pw-ease), border-color .25s var(--pw-ease);
}
body#contact.thanks .sec-form p.center a:hover{ color: var(--pw-greige); border-bottom-color: var(--pw-charcoal); }
/* Buttons: back / submit, shared shape */
body#contact.confirm .btn-container{
display:flex; gap:20px; margin-top: clamp(40px,5vw,56px); padding-top: 32px;
border-top: 1px solid var(--pw-line-light);
}
body#contact.confirm .btn-container #backBtn,
body#contact.confirm .btn-container input[type="submit"]{
flex:1; padding: 18px 36px; font-family: var(--pw-font-en); font-size:13px;
letter-spacing:.16em; text-transform:uppercase; text-align:center;
border-radius:0; cursor:pointer; transition: opacity .25s var(--pw-ease);
}
body#contact.confirm .btn-container #backBtn{
background: var(--pw-white); color: var(--pw-charcoal); border: 1px solid var(--pw-line-light);
}
body#contact.confirm .btn-container input[type="submit"]{
background: var(--pw-charcoal); color: var(--pw-ivory); border: 1px solid var(--pw-charcoal);
}
body#contact.confirm .btn-container #backBtn:hover,
body#contact.confirm .btn-container input[type="submit"]:hover{ opacity:.75; }
@media (max-width:640px){
body#contact.confirm,
body#contact.thanks{ padding-top:76px; }
body#contact.confirm .sec-form,
body#contact.thanks .sec-form{ padding-top:28px; }
body#contact.confirm .sec-form table th{ width:100%; display:block; padding-bottom:6px; }
body#contact.confirm .sec-form table td{ display:block; padding-top:0; }
body#contact.confirm .btn-container{ flex-direction:column; }
}
/* ---------- 26b. EXISTING contact confirm/thanks — hardening pass ----------
Written with no local copy of assets/css/styles.css (same known gap as
sections 22/22b and 23/23b above), so on production the legacy
stylesheet may still win the cascade for .mod-pagetitle, .mod-heading-standard,
the step list, the field table, and the buttons — reasserting the same
charcoal/ivory/greige design with !important and stripping any
::before/::after/background-image/box-shadow a legacy rule might still
draw, so this stylesheet always wins regardless of styles.css's
specificity. Scoped to body#contact.confirm / body#contact.thanks only
— never bare body#contact — so pages/contact.php (class="input") is
completely unaffected, and no HTML, form field, session, or routing
is touched. */
body#contact.confirm .mod-pagetitle,
body#contact.thanks .mod-pagetitle{
background:none !important; background-image:none !important; box-shadow:none !important;
}
body#contact.confirm .mod-pagetitle h1,
body#contact.thanks .mod-pagetitle h1{
font-family: var(--pw-font-jp-sans) !important; color: var(--pw-greige) !important;
background:none !important; border:none !important; text-shadow:none !important; font-weight:500 !important;
}
body#contact.confirm .mod-pagetitle h1::before,
body#contact.confirm .mod-pagetitle h1::after,
body#contact.thanks .mod-pagetitle h1::before,
body#contact.thanks .mod-pagetitle h1::after{
content:none !important; display:none !important; background:none !important;
}
body#contact.confirm .mod-heading-standard,
body#contact.thanks .mod-heading-standard{
font-family: var(--pw-font-jp-serif) !important; color: var(--pw-charcoal) !important;
background:none !important; background-image:none !important; box-shadow:none !important;
border:none !important; text-decoration:none !important; text-shadow:none !important;
}
body#contact.confirm .mod-heading-standard span,
body#contact.thanks .mod-heading-standard span{
font-family: var(--pw-font-en) !important; color: var(--pw-greige) !important;
}
body#contact.confirm .form-header ul li,
body#contact.thanks .form-header ul li{
font-family: var(--pw-font-en) !important; color: var(--pw-greige) !important;
background:none !important; border:none !important;
}
body#contact.confirm .form-header ul li.active,
body#contact.thanks .form-header ul li.active{ color: var(--pw-charcoal) !important; }
body#contact.confirm .form-header ul li::before,
body#contact.confirm .form-header ul li::after,
body#contact.thanks .form-header ul li::before,
body#contact.thanks .form-header ul li::after{
content:none !important; display:none !important; background:none !important;
}
body#contact.confirm .sec-form table,
body#contact.confirm .sec-form table tr,
body#contact.confirm .sec-form table th,
body#contact.confirm .sec-form table td{
background:none !important; background-image:none !important; box-shadow:none !important;
}
body#contact.confirm .sec-form table th{
font-family: var(--pw-font-en) !important; color: var(--pw-greige) !important; font-weight:500 !important;
}
body#contact.confirm .sec-form table td{
font-family: var(--pw-font-jp-sans) !important; color: var(--pw-charcoal) !important;
}
body#contact.thanks .sec-form p.center{
font-family: var(--pw-font-jp-sans) !important; color: #2A2825 !important;
}
body#contact.thanks .sec-form p.center a{
font-family: var(--pw-font-en) !important; color: var(--pw-charcoal) !important;
background:none !important; border:none !important; border-bottom: 1px solid var(--pw-greige) !important;
text-decoration:none !important; box-shadow:none !important; border-radius:0 !important;
}
body#contact.confirm .btn-container #backBtn,
body#contact.confirm .btn-container input[type="submit"]{
font-family: var(--pw-font-en) !important; border-radius:0 !important; box-shadow:none !important;
text-shadow:none !important; text-decoration:none !important;
}
body#contact.confirm .btn-container #backBtn{
background: var(--pw-white) !important; color: var(--pw-charcoal) !important;
border: 1px solid var(--pw-line-light) !important;
}
body#contact.confirm .btn-container input[type="submit"]{
background: var(--pw-charcoal) !important; color: var(--pw-ivory) !important;
border: 1px solid var(--pw-charcoal) !important;
}
/* ==================================================================
27. EXISTING privacy policy — visual restyle only
pages/privacy.php keeps its existing HTML exactly as-is — every
paragraph, heading, and list item of the policy text is untouched,
nothing is added, removed, or reworded. This only restyles what
already renders, scoped to body#privacy (unique to this page) or
its existing children (.mod-pagetitle, .sec-content). No other
page (including pages/terms.php, which shares the same old
.mod-pagetitle/.sec-content markup pattern) is targeted.
================================================================== */
body#privacy{ background: var(--pw-white); }
/* .mod-pagetitle becomes this page's hero title block: the existing
Privacy Policyプライバシーポリシー text is kept exactly
as-is, just given the site's eyebrow(EN)+serif-headline(JP) hero
typography instead of the old page-title banner look. */
body#privacy .mod-pagetitle{
background: var(--pw-ivory);
text-align:left;
padding: 130px var(--pw-pad-x) 56px;
border-bottom: 1px solid var(--pw-line-light);
}
body#privacy .mod-pagetitle h1{
font-family: var(--pw-font-jp-serif); font-weight:500; color: var(--pw-charcoal);
font-size: clamp(30px,4vw,48px); line-height:1.4;
}
body#privacy .mod-pagetitle h1 span{
display:block; margin-bottom:16px;
font-family: var(--pw-font-en); font-size:13px; letter-spacing:.24em; text-transform:uppercase;
color: var(--pw-greige);
}
/* .sec-content: the policy body. Constrained to a readable column,
numbered articles get generous top spacing + a hairline rule
as a section divider, the intro paragraph (before the first )
reads as a short lead separated by its own rule. */
body#privacy .sec-content{
max-width: 760px; margin: 0 auto;
padding: clamp(64px,7vw,96px) var(--pw-pad-x) clamp(96px,10vw,140px);
font-family: var(--pw-font-jp-sans); font-size:15.5px; line-height:2; color:#2A2825;
}
body#privacy .sec-content > p{ margin: 0 0 32px; }
body#privacy .sec-content > p:first-child{
font-size:16.5px; color: var(--pw-text-muted);
padding-bottom:40px; margin-bottom:56px; border-bottom:1px solid var(--pw-line-light);
}
body#privacy .sec-content h3{
margin: 56px 0 20px; padding-top:32px; border-top:1px solid var(--pw-line-light);
font-family: var(--pw-font-jp-serif); font-weight:500; color: var(--pw-charcoal);
font-size: clamp(18px,2vw,21px); line-height:1.6;
}
body#privacy .sec-content h3:first-of-type{ margin-top:0; }
body#privacy .sec-content ul{ margin:0 0 32px; padding-left:0; list-style:none; }
body#privacy .sec-content li{
position:relative; padding-left:1.5em; margin-bottom:14px; line-height:1.9;
}
body#privacy .sec-content li::before{
content:""; position:absolute; left:2px; top:0.85em;
width:5px; height:5px; background: var(--pw-champagne);
}
body#privacy .sec-content a{
color: var(--pw-charcoal); text-decoration:none; border-bottom:1px solid var(--pw-greige);
transition: color .25s var(--pw-ease), border-color .25s var(--pw-ease);
}
body#privacy .sec-content a:hover{ color: var(--pw-greige); border-bottom-color: var(--pw-charcoal); }
@media (max-width:640px){
body#privacy .mod-pagetitle{ padding-top:104px; padding-bottom:44px; }
body#privacy .sec-content{ font-size:15px; line-height:1.95; }
body#privacy .sec-content h3{ margin-top:48px; }
}
/* ---------- 27b. EXISTING privacy policy — hardening pass ----------
Written with no local copy of assets/css/styles.css (same known gap
as sections 22/26 above), so on production the legacy stylesheet may
still win the cascade for .mod-pagetitle and .sec-content's h3/p/ul/a.
Reasserts the same charcoal/ivory/greige design with !important and
strips any ::before/::after/background-image/box-shadow a legacy
rule might still draw. Scoped to body#privacy only — pages/terms.php
and every other page keep their current look untouched. */
body#privacy .mod-pagetitle{
background: var(--pw-ivory) !important; background-image:none !important; box-shadow:none !important;
}
body#privacy .mod-pagetitle h1{
font-family: var(--pw-font-jp-serif) !important; color: var(--pw-charcoal) !important;
background:none !important; border:none !important; text-shadow:none !important;
}
body#privacy .mod-pagetitle h1 span{
font-family: var(--pw-font-en) !important; color: var(--pw-greige) !important;
}
body#privacy .mod-pagetitle h1::before,
body#privacy .mod-pagetitle h1::after{
content:none !important; display:none !important; background:none !important;
}
body#privacy .sec-content,
body#privacy .sec-content > p{ color:#2A2825 !important; background:none !important; }
body#privacy .sec-content h3{
font-family: var(--pw-font-jp-serif) !important; color: var(--pw-charcoal) !important;
background:none !important; background-image:none !important; box-shadow:none !important;
border:none !important; border-top: 1px solid var(--pw-line-light) !important;
text-decoration:none !important; text-shadow:none !important;
}
body#privacy .sec-content h3::before,
body#privacy .sec-content h3::after{
content:none !important; display:none !important; background:none !important;
}
body#privacy .sec-content li{ background:none !important; }
body#privacy .sec-content li::marker{ content:none !important; }
body#privacy .sec-content a{
color: var(--pw-charcoal) !important; background:none !important;
border:none !important; border-bottom:1px solid var(--pw-greige) !important;
text-decoration:none !important; box-shadow:none !important;
}
/* ==================================================================
28. EXISTING terms of use — visual restyle only
pages/terms.php keeps its existing HTML exactly as-is — every
article, paragraph, list, link, and its wording/punctuation/order
is untouched. Same design system as section 27 (privacy policy)
above, scoped to body#terms (unique to this page) instead, so
body#privacy and every other page sharing .mod-pagetitle/.sec-content
(pages/privacy.php, 404.php) are completely unaffected. Adds h4
support (terms.php has "推奨環境について"/"ダウンロード"/"Soft関連商標
について" sub-headings that privacy.php doesn't have) as a visually
smaller step below h3, to keep the heading hierarchy readable.
================================================================== */
body#terms{ background: var(--pw-white); }
body#terms .mod-pagetitle{
background: var(--pw-ivory);
text-align:left;
padding: 130px var(--pw-pad-x) 56px;
border-bottom: 1px solid var(--pw-line-light);
}
body#terms .mod-pagetitle h1{
font-family: var(--pw-font-jp-serif); font-weight:500; color: var(--pw-charcoal);
font-size: clamp(26px,3.6vw,44px); line-height:1.4;
}
body#terms .mod-pagetitle h1 span{
display:block; margin-bottom:16px;
font-family: var(--pw-font-en); font-size:13px; letter-spacing:.24em; text-transform:uppercase;
color: var(--pw-greige);
}
body#terms .sec-content{
max-width: 760px; margin: 0 auto;
padding: clamp(64px,7vw,96px) var(--pw-pad-x) clamp(96px,10vw,140px);
font-family: var(--pw-font-jp-sans); font-size:15.5px; line-height:2; color:#2A2825;
}
body#terms .sec-content > p{ margin: 0 0 32px; }
body#terms .sec-content h3{
margin: 56px 0 20px; padding-top:32px; border-top:1px solid var(--pw-line-light);
font-family: var(--pw-font-jp-serif); font-weight:500; color: var(--pw-charcoal);
font-size: clamp(18px,2vw,21px); line-height:1.6;
}
body#terms .sec-content h3:first-of-type{ margin-top:0; }
body#terms .sec-content h4{
margin: 40px 0 16px;
font-family: var(--pw-font-jp-serif); font-weight:500; color: var(--pw-charcoal);
font-size: clamp(15.5px,1.6vw,17px); line-height:1.6;
}
body#terms .sec-content ul{ margin:0 0 32px; padding-left:0; list-style:none; }
body#terms .sec-content li{
position:relative; padding-left:1.5em; margin-bottom:10px; line-height:1.9;
}
body#terms .sec-content li::before{
content:""; position:absolute; left:2px; top:0.85em;
width:5px; height:5px; background: var(--pw-champagne);
}
body#terms .sec-content a{
color: var(--pw-charcoal); text-decoration:none; border-bottom:1px solid var(--pw-greige);
word-break: break-all;
transition: color .25s var(--pw-ease), border-color .25s var(--pw-ease);
}
body#terms .sec-content a:hover{ color: var(--pw-greige); border-bottom-color: var(--pw-charcoal); }
@media (max-width:640px){
body#terms .mod-pagetitle{ padding-top:104px; padding-bottom:44px; }
body#terms .sec-content{ font-size:15px; line-height:1.95; }
body#terms .sec-content h3{ margin-top:48px; }
body#terms .sec-content h4{ margin-top:32px; }
}
/* ---------- 28b. EXISTING terms of use — hardening pass ----------
Same reasoning as 27b: no local copy of assets/css/styles.css, so
this reasserts the design with !important and strips any legacy
::before/::after/background/box-shadow (the old blue headings, light
blue backgrounds, and heavy boxes the user reported). Scoped to
body#terms only — pages/privacy.php and every other page keep their
current look untouched. */
body#terms .mod-pagetitle{
background: var(--pw-ivory) !important; background-image:none !important; box-shadow:none !important;
}
body#terms .mod-pagetitle h1{
font-family: var(--pw-font-jp-serif) !important; color: var(--pw-charcoal) !important;
background:none !important; border:none !important; text-shadow:none !important;
}
body#terms .mod-pagetitle h1 span{
font-family: var(--pw-font-en) !important; color: var(--pw-greige) !important;
}
body#terms .mod-pagetitle h1::before,
body#terms .mod-pagetitle h1::after{
content:none !important; display:none !important; background:none !important;
}
body#terms .sec-content,
body#terms .sec-content > p{ color:#2A2825 !important; background:none !important; }
body#terms .sec-content h3{
font-family: var(--pw-font-jp-serif) !important; color: var(--pw-charcoal) !important;
background:none !important; background-image:none !important; box-shadow:none !important;
border:none !important; border-top: 1px solid var(--pw-line-light) !important;
text-decoration:none !important; text-shadow:none !important;
}
body#terms .sec-content h3::before,
body#terms .sec-content h3::after{
content:none !important; display:none !important; background:none !important;
}
body#terms .sec-content h4{
font-family: var(--pw-font-jp-serif) !important; color: var(--pw-charcoal) !important;
background:none !important; background-image:none !important; box-shadow:none !important;
border:none !important; text-decoration:none !important; text-shadow:none !important;
}
body#terms .sec-content li{ background:none !important; }
body#terms .sec-content li::marker{ content:none !important; }
body#terms .sec-content a{
color: var(--pw-charcoal) !important; background:none !important;
border:none !important; border-bottom:1px solid var(--pw-greige) !important;
text-decoration:none !important; box-shadow:none !important;
}
/* ==================================================================
29. SP (≤640px) overflow guards — HOME + shared footer
Everything here lives inside @media (max-width:640px), so PC and
tablet rendering is byte-for-byte unchanged. No body{overflow-x:hidden}
anywhere — each rule targets the element that can actually exceed the
viewport, so the content is made to fit rather than clipped.
================================================================== */
@media (max-width: 640px){
/* .pw-eyebrow is display:flex with three items: the "01" number, the
label text, and a 40px ::after rule. At 13px + .28em tracking the
longest labels on the site ("Avoiding Real Estate Mistakes" → ~481px,
"What are you looking for?" → ~415px, both uppercased) far exceed the
~335px of usable width at 375px, and the rule competes with them for
space on the same flex row. Applies to every page, not just HOME —
the longest labels live on the sub-pages. Allow the row to wrap,
tighten the tracking a little, and stop the rule being squeezed. */
.pw-eyebrow{ flex-wrap: wrap; letter-spacing: .18em; }
.pw-eyebrow::after{ flex: 0 0 32px; }
/* Long unbroken ASCII runs are the one thing CJK line-breaking can't
resolve on a narrow screen: the hero's service list, the CTA phone
line, and the footer address/tel/Map links. These wrap normally at
spaces but have no break opportunity inside a run like a phone
number or a postal code, so give them an explicit last resort. */
.pw-hero-scope,
.pw-cta-tel{ overflow-wrap: anywhere; }
}
/* Footer address block: shared by every page, and the reported overflow
(〒542-0086 / 大阪市中央区西心斎橋1-12-8 / 06-4708-8120) is entirely
ASCII runs with no break opportunity. Safe at every width — normal
Japanese text already had break points and is unaffected. */
.pw-footer-addr{ overflow-wrap: anywhere; }
/* ==================================================================
30. SP paragraph rhythm —
A long single often carries several distinct thoughts (catch line
→ explanation → next point → conclusion). On SP those need visible
breathing room, not just a line break, but splitting the into
several elements would change the HTML structure and the PC layout.
So: a break that also opens vertical space, and only on SP.
Hidden entirely above 640px, so PC/tablet line structure is untouched
(PC keeps using plain
/
). On SP it becomes a
block-level break with a top margin, which reads as a small paragraph
gap inside the existing . display:block on a
is what makes the
margin apply; if a browser ignored it the element would still perform
its normal line break, so the worst case is "no extra gap" rather than
broken text. Specificity (element+class) beats .pw-sp's display:inline,
so `class="pw-gap"` needs no companion class.
================================================================== */
br.pw-gap{ display: none; }
@media (max-width: 640px){
br.pw-gap{ display: block; margin-top: .95em; }
}
/* ==================================================================
31. Undo the legacy body{text-align:justify}
The production-only assets/css/styles.css (compiled SCSS, not present
in this checkout — read from the live site to confirm) sets on :
text-align: justify; letter-spacing: .1em; overflow-x: hidden;
`justify` is inherited by every descendant, so any heading or lead that
wraps to more than one line gets its non-final lines stretched to the
full column width. That is what pushed "Nationwide" and "Villa" to
opposite edges in HOME's AREAS heading ("Nationwide Villa Operations"
wrapping to two lines), and it silently spaces out every other wrapped
line in the pw-* design system too. Reset to left alignment for the
renewal components only — the `:is()` list is the same one section 2
uses to scope this design system, so legacy templates that still rely
on the justified look are untouched. Higher specificity than the bare
`body` selector, so no !important needed. Centred components keep
their own explicit `text-align:center` (defined later in the file and
more specific), so they are unaffected.
================================================================== */
NOTE: the actual declaration is NOT here — it lives in the section 2
base block near the top of this file (`text-align: left` alongside the
font-family reset). It has to be early: `text-align` inherits, so
setting it once on the component root covers every descendant, and
placing it early means every later, intentional `text-align:center`
(.pw-cta, .pw-section-head--center, .pw-numbers-grid, figcaption, …)
still wins the cascade. A late blanket reset would have silently
left-aligned all of those.
================================================================== */
/* ==================================================================
32. HOME AREAS section — SP layout
Scoped with :has() to the one section that contains .pw-areas-grid,
so no other HOME section or page shifts. All inside max-width:640px,
so PC/tablet is untouched.
================================================================== */
@media (max-width: 640px){
/* The 4 forced lines of the lead sat on line-height:2, which reads as
blank lines between phrases. Tighten the leading only here so the
same four lines read as one paragraph. */
body#top .pw-section:has(.pw-areas-grid) .pw-section-head .pw-lead{
line-height: 1.75;
}
/* Section top padding is var(--pw-pad-y) = 96px at this width; ~28%
tighter, still generous. Bottom padding gains clearance so the fixed
"ご相談はこちら" CTA does not sit on top of the last row of cards. */
body#top .pw-section:has(.pw-areas-grid){
padding-top: 70px;
padding-bottom: 104px;
}
}
/* ==================================================================
33. HOME "06 Our Experts" bio — collapse the doubled
Cause of the oversized gap inside each expert's bio on SP:
inc/experts-data.php stores each `desc` with a literal "\n\n" between
the two halves of the text (6 occurrences across the three people),
and index.php renders it through nl2br(). nl2br turns EACH newline
into a , so "\n\n" becomes " " — the second
generates its own empty line box, i.e. a full blank line (~26px at
this element's 13.5px/1.9 type) on top of the paragraph's own leading.
That is markup generated at runtime from the data file, so it can't be
fixed by editing the template, and the text itself must not change.
Fix without touching data or wording: make the SECOND of any
consecutive pair a zero-height block instead of an inline line-break.
It then still ends the line but no longer creates an empty line box,
and its margin supplies a deliberate, much smaller paragraph gap —
exactly the mechanism .pw-gap uses, so the rhythm matches the rest of
the site. Scoped to body#top per the request that only HOME change;
pages/experts.php renders the longer `bio` field through the same
nl2br() path and is intentionally left as-is.
================================================================== */
@media (max-width: 640px){
body#top .pw-expert-desc br + br{ display: block; margin-top: .45em; }
}
|