/* === Axxeio Components === */
/*
  Sections:
  1. Very Wide (10+ pages: .container, .nav-toggle, .btn, .hero, .cta-section, .deliverables, .step, .steps)
  2. Wide (5-9 pages: .price, .step-num, .label, .section, .section-title, .step-content, .value, .faq-item, .note, .step-label)
  3. Multi-Page (2-4 pages: 50 classes)
  4. Single-Page (104 classes - page-specific, do not move)
  5. Unused/Deprecated (removed in Phase 2)
*/


.error-section{
min-height:60vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:80px 0
}
.error-inner{
max-width:640px
}
.error-code{
font-family:'Noto Serif JP',serif;
font-size:120px;
font-weight:700;
color:var(--navy);
line-height:1;
margin-bottom:16px;
opacity:0.12
}
.error-title{
font-family:'Noto Serif JP',serif;
font-size:26px;
font-weight:700;
color:var(--navy);
margin-bottom:12px;
line-height:1.5
}
.error-desc{
font-size:15px;
color:var(--text-muted);
margin-bottom:40px;
line-height:1.9
}
.error-links{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
text-align:center
}
.error-links a{
display:block;
background:#fff;
border:1px solid var(--border);
border-radius:8px;
padding:24px 20px;
transition:all .3s;
box-shadow:var(--shadow)
}
.error-links a:hover{
border-color:var(--gold);
box-shadow:var(--shadow-hover);
transform:translateY(-3px)
}
.error-links a h3{
font-family:'Noto Serif JP',serif;
font-size:16px;
font-weight:700;
color:var(--navy);
margin-bottom:6px
}
.error-links a p{
font-size:13px;
color:var(--text-muted);
margin:0;
line-height:1.8
}
@@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(20px)}
to{
opacity:1;
transform:translateY(0)}
}

.cta-links{
display:flex;
gap:24px;
font-size:13px;
margin-top:4px
}
.cta-links a{
color:var(--navy);
font-weight:500;
border-bottom:1px solid var(--gold);
padding-bottom:1px;
transition:border-color .2s
}
.cta-links a:hover{
border-color:var(--navy)
}
.compare-wrap{
overflow-x:auto;
margin-top:32px;
overflow-x:auto
}
.compare-table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:var(--shadow);
min-width:600px
}
.compare-table th,.compare-table td{
padding:16px 20px;
text-align:left;
font-size:14px;
line-height:1.8;
border-bottom:1px solid var(--border)
}
.compare-table thead th{
background:var(--navy);
color:#fff;
font-weight:600;
font-size:14px;
white-space:nowrap
}
.compare-table thead th:first-child{
border-radius:8px 0 0 0
}
.compare-table thead th:last-child{
border-radius:0 8px 0 0
}
.compare-table tbody tr:hover{
background:rgba(200,169,110,0.04)
}
.compare-table tbody th{
background:rgba(15,43,70,0.03);
color:var(--navy);
font-weight:600;
white-space:nowrap
}
.compare-table td{
color:var(--text-muted)
}
.compare-table td.highlight{
color:var(--navy);
font-weight:500
}
.compare-table tbody tr:last-child td,.compare-table tbody tr:last-child th{
border-bottom:none
}
.service-links{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:36px
}
.service-link-card{
background:#fff;
border:1px solid var(--border);
border-radius:8px;
padding:28px 24px;
text-align:center;
transition:all .3s;
cursor:pointer;
display:block;
color:var(--text)
}
.service-link-card:hover{
border-color:var(--gold);
box-shadow:var(--shadow-hover);
transform:translateY(-3px)
}
.service-link-card h3{
font-family:'Noto Serif JP',serif;
font-size:17px;
font-weight:700;
color:var(--navy);
margin-bottom:10px
}
.service-link-card p{
font-size:13px;
color:var(--text-muted);
margin-bottom:16px;
line-height:1.8
}
.service-link-card .link-arrow{
font-size:13px;
color:var(--gold);
font-weight:600;
letter-spacing:0.04em
}
.price-card{
background:linear-gradient(135deg,var(--navy) 0%,#163a5c 100%);
border-radius:var(--radius);
padding:36px 40px;
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-bottom:40px;
box-shadow:0 8px 32px rgba(15,43,70,.15)
}
.price-card .price-label{
font-size:12px;
font-weight:500;
color:var(--gold-light);
letter-spacing:.1em;
text-transform:uppercase;
margin-bottom:6px
}
.price-card .price-value{
font-family:'Noto Serif JP',serif;
font-size:28px;
font-weight:700;
color:var(--gold);
letter-spacing:.02em
}
.price-card .price-meta{
font-size:13px;
color:rgba(255,255,255,.7);
margin-top:4px
}
.price-card .target-badge{
display:flex;
flex-direction:column;
align-items:flex-end;
text-align:right
}
.price-card .target-badge .badge{
display:inline-block;
padding:6px 16px;
background:rgba(200,169,110,.15);
border:1px solid rgba(200,169,110,.3);
border-radius:40px;
font-size:12px;
font-weight:500;
color:var(--gold-light);
white-space:nowrap
}
.features-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-bottom:48px
}
.feature-item{
display:flex;
gap:14px;
padding:20px 24px;
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
transition:all .2s
}
.feature-item:hover{
border-color:var(--gold-light);
box-shadow:0 4px 16px rgba(200,169,110,.08)
}
.feature-item .feature-icon{
flex-shrink:0;
width:36px;
height:36px;
background:var(--gold-bg);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
color:var(--gold);
font-weight:700
}
.feature-item .feature-text{
font-size:14px;
color:var(--text-mid);
line-height:1.7
}
.feature-item .feature-text strong{
color:var(--text);
font-weight:600
}
.deliverables h4{
font-family:'Noto Serif JP',serif;
font-size:15px;
font-weight:700;
color:var(--navy);
margin-bottom:16px;
display:flex;
align-items:center;
gap:8px
}
.deliverables h4::before{
content:'';
display:inline-block;
width:4px;
height:18px;
background:var(--gold);
border-radius:2px
}
.deliverables ul{
list-style:none;
padding:0;
margin:0
}
.deliverables ul li{
font-size:14px;
color:var(--text-mid);
line-height:1.8;
padding:6px 0 6px 20px;
position:relative;
border-bottom:1px solid var(--border)
}
.deliverables ul li:last-child{
border-bottom:none
}
.deliverables ul li::before{
content:'';
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:6px;
height:6px;
background:var(--gold);
border-radius:50%
}
.ba-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-bottom:48px
}
.ba-card{
padding:28px;
border-radius:var(--radius);
border:1px solid var(--border)
}
.ba-card h4{
font-size:14px;
font-weight:600;
margin-bottom:12px;
display:flex;
align-items:center;
gap:8px
}
.ba-card ul{
list-style:none;
padding:0;
margin:0
}
.ba-card ul li{
font-size:14px;
color:var(--text-mid);
line-height:1.8;
padding:4px 0 4px 20px;
position:relative
}
.ba-card ul li::before{
content:'';
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:6px;
height:6px;
border-radius:50%
}
.ba-before{
background:#FEF2F2;
border-color:#FECACA
}
.ba-before h4{
color:#991B1B
}
.ba-before ul li::before{
background:#EF4444
}
.ba-after{
background:#F0FDF4;
border-color:#BBF7D0
}
.ba-after h4{
color:#166534
}
.ba-after ul li::before{
background:#22C55E
}
.steps{
display:flex;
gap:0;
position:relative;
margin-bottom:48px
}
.steps::before{
content:'';
position:absolute;
top:28px;
left:60px;
right:60px;
height:2px;
background:var(--border);
z-index:0
}
.step{
flex:1;
text-align:center;
position:relative;
z-index:1
}
.step-circle{
width:56px;
height:56px;
background:#fff;
border:2px solid var(--gold);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 16px;
font-family:'Noto Serif JP',serif;
font-size:16px;
font-weight:700;
color:var(--gold)
}
.step-label{
font-size:13px;
font-weight:600;
color:var(--navy);
margin-bottom:4px
}
.step-desc{
font-size:12px;
color:var(--text-light);
line-height:1.6;
padding:0 8px
}
.faq-list{
max-width:720px;
margin:0 auto
}
.faq-item{
border-bottom:1px solid var(--border)
}
.faq-item:first-child{
border-top:1px solid var(--border)
}
details summary{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 0;
font-size:14px;
font-weight:600;
color:var(--navy);
cursor:pointer;
list-style:none;
gap:16px;
-webkit-user-select:none;
user-select:none
}
details summary::-webkit-details-marker{
display:none
}
details summary::after{
content:'＋';
flex-shrink:0;
width:28px;
height:28px;
background:var(--gold-bg);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
font-weight:700;
color:var(--gold);
transition:all .25s
}
details[open] summary::after{
content:'−';
background:var(--gold);
color:#fff
}
details .faq-answer{
padding:0 0 20px;
font-size:14px;
color:var(--text-mid);
line-height:1.85
}
@media(max-width:768px){
.container{
padding:0 20px
}
header .container{
height:auto;
padding:14px 20px;
flex-direction:column
}
nav a{
font-size:12px
}

.section{
padding:48px 0
}
.price-card{
flex-direction:column;
text-align:center;
padding:28px 24px
}
.price-card .target-badge{
align-items:center;
text-align:center
}
.features-grid,.ba-grid{
grid-template-columns:1fr;
gap:12px
}
.domain-cards{
grid-template-columns:repeat(2,1fr);
gap:8px
}
.steps{
flex-direction:column;
gap:24px;
align-items:center
}
.steps::before{
display:none
}
.step{
width:100%;
max-width:280px;
text-align:left;
display:flex;
align-items:center;
gap:16px
}
.step-circle{
flex-shrink:0;
margin:0
}
footer .container{
flex-direction:column;
text-align:center
}
footer nav{
justify-content:center
}
}
.section-header{
text-align:center;
margin-bottom:48px
}
.section-header h2{
font-family:'Noto Serif JP',serif;
font-size:26px;
font-weight:700;
color:var(--navy);
margin-bottom:12px;
letter-spacing:0.03em
}
.section-header .line{
width:40px;
height:3px;
background:var(--gold);
margin:0 auto;
border-radius:2px
}
.company-table{
max-width:580px;
margin:0 auto;
background:#fff;
border-radius:4px;
box-shadow:var(--shadow);
overflow:hidden
}
.company-table .row{
display:flex;
padding:18px 32px;
border-bottom:1px solid var(--border);
align-items:flex-start
}
.company-table .row:last-child{
border-bottom:none
}
.company-table .label{
width:160px;
font-weight:700;
font-size:14px;
color:var(--navy);
flex-shrink:0;
padding-top:1px
}
.company-table .value{
font-size:15px;
color:var(--text);
font-weight:500
}
.profile-card{
max-width:680px;
margin:0 auto;
background:#fff;
border-radius:4px;
box-shadow:var(--shadow);
overflow:hidden
}
.profile-card-top{
background:var(--navy);
padding:36px 40px;
color:#fff
}
.profile-card-top h3{
font-family:'Noto Serif JP',serif;
font-size:22px;
font-weight:700;
margin-bottom:4px
}
.profile-card-body{
padding:36px 40px
}
.profile-card-body p{
font-size:15px;
line-height:1.9;
margin-bottom:20px;
color:var(--text)
}
.specialty-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:8px
}
.specialty-tag{
display:inline-block;
font-size:13px;
font-weight:500;
color:var(--navy);
background:rgba(200,169,110,0.12);
border:1px solid rgba(200,169,110,0.25);
padding:4px 14px;
border-radius:4px
}
.credentials-section{
margin-top:28px;
padding-top:24px;
border-top:1px solid var(--border)
}
.credentials-section .cred-title{
font-size:13px;
font-weight:700;
color:var(--navy);
margin-bottom:12px;
letter-spacing:0.04em
}
.credentials-list{
list-style:none;
padding:0;
margin:0
}
.credentials-list li{
position:relative;
padding-left:20px;
font-size:14px;
line-height:1.8;
color:var(--text)
}
.credentials-list li::before{
content:'';
position:absolute;
left:0;
top:9px;
width:8px;
height:8px;
background:var(--gold);
clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)
}
.credentials-list + .cred-title{
margin-top:20px
}
.bordered-list{
max-width:580px;
margin:0 auto
}
.bordered-item{
padding:18px 24px;
margin-bottom:12px;
background:#fff;
border-left:3px solid var(--gold);
border-radius:0 4px 4px 0;
box-shadow:var(--shadow);
font-size:15px;
font-weight:500;
color:var(--text);
transition:transform 0.2s,box-shadow 0.2s
}
.bordered-item:hover{
transform:translateX(4px);
box-shadow:0 6px 32px rgba(0,0,0,0.1)
}
.excluded-list{
max-width:580px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:12px
}
.excluded-item{
padding:14px 20px;
background:#fff;
border-radius:4px;
box-shadow:var(--shadow);
font-size:14px;
font-weight:500;
color:var(--text-muted);
text-align:center;
border:1px solid var(--border)
}
.section-note{
text-align:center;
max-width:560px;
margin:0 auto 16px;
font-size:15px;
color:var(--text-muted)
}
@media (max-width:768px){
header .container{
flex-direction:column;
height:auto;
padding:16px 24px;
gap:8px
}
header nav{
flex-wrap:wrap;
gap:12px 20px;
justify-content:center
}
.hero{
padding:48px 0 40px
}
.hero h1{
font-size:24px
}
.section{
padding:48px 0
}
.section-header h2{
font-size:22px
}
.company-table .row{
flex-direction:column;
padding:16px 24px;
gap:4px
}
.company-table .label{
width:auto
}
.profile-card-top,.profile-card-body{
padding:28px 24px
}
.profile-card-top h3{
font-size:18px
}
.excluded-list{
grid-template-columns:repeat(2,1fr)
}
.partner-grid{
grid-template-columns:1fr
}
footer .container{
flex-direction:column;
text-align:center
}
footer nav{
justify-content:center
}
}
.section-title{
font-family:'Noto Serif JP',serif;
font-size:26px;
font-weight:700;
margin-bottom:12px;
text-align:center;
color:#0F2B46;
line-height:1.4
}
.section-subtitle{
text-align:center;
font-size:15px;
color:rgba(15,43,70,0.6);
margin-bottom:40px
}
.detail-list{
max-width:680px;
margin:0 auto;
list-style:none;
padding:0
}
.detail-list li{
padding:14px 0 14px 36px;
font-size:15px;
position:relative;
line-height:1.7;
border-bottom:1px solid rgba(15,43,70,0.06)
}
.detail-list li:last-child{
border-bottom:none
}
.detail-list li::before{
content:'';
position:absolute;
left:0;
top:18px;
width:20px;
height:20px;
background:rgba(200,169,110,0.15);
border-radius:50%
}
.detail-list li::after{
content:'✓';
position:absolute;
left:5px;
top:16px;
color:#C8A96E;
font-weight:700;
font-size:12px
}
.prep-items{
max-width:640px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
gap:10px 16px;
justify-content:center
}
.prep-item{
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 16px;
background:rgba(200,169,110,0.06);
border:1px solid rgba(200,169,110,0.12);
border-radius:20px;
font-size:13px;
color:#0F2B46
}
.steps-flow{
max-width:780px;
margin:0 auto;
display:flex;
align-items:flex-start;
gap:0;
flex-wrap:wrap;
justify-content:center
}
.step-item{
text-align:center;
flex:1;
min-width:80px;
max-width:110px;
position:relative
}
.step-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:50%;
background:#0F2B46;
color:#C8A96E;
font-size:15px;
font-weight:700;
margin-bottom:8px
}
.step-label{
font-size:12px;
color:rgba(15,43,70,0.7);
line-height:1.5
}
.step-arrow{
display:flex;
align-items:center;
color:#C8A96E;
font-size:18px;
padding-top:6px;
min-width:20px;
justify-content:center
}
.info-note{
max-width:640px;
margin:24px auto 0;
padding:18px 24px;
background:rgba(200,169,110,0.08);
border-left:4px solid #C8A96E;
border-radius:4px;
font-size:14px;
color:rgba(15,43,70,0.7);
line-height:1.8;
text-align:left
}
.exclusion-note{
max-width:640px;
margin:0 auto;
padding:24px;
background:rgba(239,68,68,0.03);
border:1px solid rgba(239,68,68,0.1);
border-radius:6px
}
.exclusion-note ul{
list-style:none;
padding:0;
margin:12px 0 0
}
.exclusion-note ul li{
padding:6px 0 6px 24px;
font-size:14px;
color:rgba(15,43,70,0.65);
position:relative;
line-height:1.6
}
.exclusion-note ul li::before{
content:'✕';
position:absolute;
left:0;
color:#EF4444;
font-size:11px;
font-weight:700
}
.exclusion-note .exclusion-add{
font-size:13px;
color:rgba(15,43,70,0.5);
margin-top:12px;
line-height:1.6
}
.consult-list{
max-width:680px;
margin:16px auto
}
.consult-item{
padding:18px 24px 18px 48px;
border-bottom:1px solid rgba(15,43,70,0.06);
font-size:15px;
position:relative;
line-height:1.7;
transition:background .2s
}
.consult-item:hover{
background:rgba(200,169,110,0.04)
}
.consult-item:last-child{
border-bottom:none
}
.consult-item::before{
content:'';
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
width:20px;
height:20px;
border-radius:50%;
background:rgba(200,169,110,0.12)
}
.consult-item::after{
content:'→';
position:absolute;
left:21px;
top:50%;
transform:translateY(-50%);
color:#C8A96E;
font-size:11px;
font-weight:700
}
.form-wrap{
max-width:640px;
margin:32px auto;
background:#fff;
border:1px solid rgba(15,43,70,0.08);
border-radius:4px;
padding:40px;
box-shadow:0 4px 24px rgba(0,0,0,0.06)
}
.form-group{
margin-bottom:24px
}
.form-group>label{
display:block;
font-size:14px;
font-weight:600;
margin-bottom:8px;
color:#0F2B46
}
.form-group label .req{
color:#C8A96E;
font-size:11px;
font-weight:500;
margin-left:4px
}
.form-group input[type="text"],.form-group input[type="email"],.form-group input[type="tel"],.form-group select,.form-group textarea{
width:100%;
padding:12px 16px;
border:1.5px solid rgba(15,43,70,0.15);
border-radius:4px;
font-size:15px;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color:#1A1A2E;
background:#FAFBFC;
transition:border-color .25s,box-shadow .25s
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
outline:none;
border-color:#C8A96E;
box-shadow:0 0 0 3px rgba(200,169,110,0.12)
}
.form-group textarea{
min-height:140px;
resize:vertical;
line-height:1.7
}
.form-group select{
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%230F2B46'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 16px center;
padding-right:40px
}
.checkbox-group{
display:flex;
flex-wrap:wrap;
gap:8px 16px;
margin-top:8px
}
.checkbox-item{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
font-weight:400;
cursor:pointer;
padding:8px 14px;
border-radius:4px;
border:1px solid rgba(15,43,70,0.08);
transition:all .2s
}
.checkbox-item:hover{
background:rgba(200,169,110,0.06);
border-color:rgba(200,169,110,0.2)
}
.checkbox-item input{
width:18px;
height:18px;
accent-color:#C8A96E;
cursor:pointer
}
.checkbox-label{
display:flex;
align-items:flex-start;
gap:10px;
font-weight:400;
font-size:14px;
cursor:pointer;
line-height:1.6
}
.checkbox-label input{
width:18px;
height:18px;
accent-color:#C8A96E;
cursor:pointer;
margin-top:3px;
flex-shrink:0
}
.checkbox-label .req{
color:#C8A96E
}
.form-submit{
text-align:center;
margin-top:32px
}
.form-submit .btn{
min-width:260px;
padding:16px 40px
}
.footer-note{
text-align:center;
font-size:12px;
color:rgba(15,43,70,0.35);
margin-top:0;
padding:24px 0;
background:#fff
}
@media(max-width:768px){
header .container{
flex-direction:column;
height:auto;
padding:16px 24px
}
.hero{
padding:56px 0 48px
}
.hero h2{
font-size:24px
}
section{
padding:48px 0
}
.section-title{
font-size:22px
}
.form-wrap{
padding:24px;
margin:24px auto
}
.checkbox-group{
flex-direction:column;
gap:6px
}
.checkbox-item{
padding:8px 12px
}
footer .container{
flex-direction:column;
text-align:center
}
footer nav{
justify-content:center
}
.steps-flow{
flex-direction:column;
align-items:center;
gap:4px
}
.step-arrow{
transform:rotate(90deg);
padding:0
}
.prep-items{
flex-direction:column;
align-items:center
}
}
.progress-badge{
display:inline-flex;
align-items:center;
gap:8px;
background:rgba(200,169,110,0.15);
border:1px solid rgba(200,169,110,0.3);
border-radius:20px;
padding:8px 20px;
margin-top:24px;
font-size:13px;
color:#C8A96E;
font-weight:500
}
.progress-badge svg{
flex-shrink:0
}
.target-list{
max-width:640px;
margin:0 auto;
list-style:none;
padding:0
}
.target-list li{
padding:12px 0 12px 32px;
font-size:15px;
position:relative;
line-height:1.7;
border-bottom:1px solid rgba(15,43,70,0.06)
}
.target-list li:last-child{
border-bottom:none
}
.target-list li::before{
content:'→';
position:absolute;
left:4px;
top:12px;
color:#C8A96E;
font-weight:700;
font-size:13px
}
.check-items{
max-width:600px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
gap:10px 20px;
justify-content:center
}
.check-item{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px;
background:rgba(200,169,110,0.06);
border:1px solid rgba(200,169,110,0.15);
border-radius:20px;
font-size:14px;
color:#0F2B46;
font-weight:500
}
.check-item::before{
content:'✓';
color:#C8A96E;
font-weight:700;
font-size:12px
}
.steps-flow{
max-width:680px;
margin:0 auto;
display:flex;
align-items:flex-start;
gap:0;
flex-wrap:wrap;
justify-content:center
}
.step-item{
text-align:center;
flex:1;
min-width:100px;
max-width:140px;
position:relative
}
.step-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:50%;
background:#0F2B46;
color:#C8A96E;
font-size:16px;
font-weight:700;
margin-bottom:8px
}
.step-label{
font-size:13px;
color:rgba(15,43,70,0.7);
line-height:1.5
}
.step-arrow{
display:flex;
align-items:center;
color:#C8A96E;
font-size:20px;
padding-top:8px;
min-width:24px;
justify-content:center
}
.info-note strong{
display:block;
font-size:15px;
color:#0F2B46;
font-weight:600;
margin-bottom:4px
}
.no-sales-note{
max-width:640px;
margin:24px auto 0;
padding:18px 24px;
background:rgba(59,130,246,0.04);
border-left:4px solid #3B82F6;
border-radius:4px;
font-size:14px;
color:rgba(15,43,70,0.7);
line-height:1.8;
text-align:center
}
.result-items-list{
max-width:600px;
margin:0 auto;
list-style:none;
padding:0;
counter-reset:result-counter
}
.result-items-list li{
padding:12px 0 12px 40px;
font-size:15px;
position:relative;
line-height:1.7;
border-bottom:1px solid rgba(15,43,70,0.06)
}
.result-items-list li:last-child{
border-bottom:none
}
.result-items-list li::before{
counter-increment:result-counter;
content:counter(result-counter);
position:absolute;
left:0;
top:12px;
width:26px;
height:26px;
border-radius:50%;
background:rgba(200,169,110,0.12);
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:700;
color:#C8A96E
}
.recommend-list{
max-width:640px;
margin:0 auto
}
.recommend-item{
padding:18px 24px;
border-bottom:1px solid rgba(15,43,70,0.08);
font-size:15px;
display:flex;
align-items:center;
gap:12px;
transition:background .2s
}
.recommend-item:hover{
background:rgba(200,169,110,0.04)
}
.recommend-item:last-child{
border-bottom:none
}
.recommend-icon{
width:28px;
height:28px;
border-radius:50%;
background:rgba(200,169,110,0.12);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
color:#C8A96E;
font-size:14px;
font-weight:700
}
.benefit-list{
max-width:680px;
margin:0 auto;
list-style:none;
padding:0
}
.benefit-list li{
padding:14px 0 14px 36px;
border-bottom:1px solid rgba(15,43,70,0.06);
font-size:15px;
position:relative;
line-height:1.7
}
.benefit-list li:last-child{
border-bottom:none
}
.benefit-list li::before{
content:'';
position:absolute;
left:0;
top:18px;
width:20px;
height:20px;
background:rgba(200,169,110,0.15);
border-radius:50%
}
.benefit-list li::after{
content:'✓';
position:absolute;
left:5px;
top:16px;
color:#C8A96E;
font-weight:700;
font-size:12px
}
.example-box{
background:#fff;
border:1px solid rgba(15,43,70,0.08);
border-radius:4px;
padding:24px;
margin-bottom:16px;
box-shadow:0 4px 24px rgba(0,0,0,0.06);
transition:transform .2s,box-shadow .2s;
position:relative;
overflow:hidden
}
.example-box::before{
content:'';
position:absolute;
top:0;
left:0;
width:4px;
height:100%;
background:#C8A96E
}
.example-box:hover{
transform:translateY(-2px);
box-shadow:0 8px 32px rgba(0,0,0,0.1)
}
.example-box p{
font-size:14px;
margin-bottom:0;
color:rgba(15,43,70,0.65);
padding-left:12px;
line-height:1.7
}
.download-cta-section{
text-align:center
}
.download-cta-section p{
font-size:15px;
color:rgba(15,43,70,0.65)
}
.download-cta-section a{
color:#0F2B46;
font-weight:600;
border-bottom:1px solid #C8A96E;
transition:border-color .2s
}
.download-cta-section a:hover{
border-bottom-width:2px;
color:#0F2B46
}
.assurance-copy{
background:rgba(200,169,110,0.08);
border-left:4px solid #C8A96E;
border-radius:4px;
padding:18px 24px;
margin:0 auto 32px;
max-width:640px;
font-size:14px;
color:rgba(15,43,70,0.7);
line-height:1.7
}
.assurance-copy strong{
display:block;
font-size:15px;
margin-bottom:4px;
color:#0F2B46;
font-weight:600
}
.form-wrap{
max-width:600px;
margin:32px auto;
background:#fff;
border:1px solid rgba(15,43,70,0.08);
border-radius:4px;
padding:40px;
box-shadow:0 4px 24px rgba(0,0,0,0.06)
}
.form-group input[type="text"],.form-group input[type="email"],.form-group select{
width:100%;
padding:12px 16px;
border:1.5px solid rgba(15,43,70,0.15);
border-radius:4px;
font-size:15px;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color:#1A1A2E;
background:#FAFBFC;
transition:border-color .25s,box-shadow .25s
}
.form-group input[type="text"]:focus,.form-group input[type="email"]:focus,.form-group select:focus{
outline:none;
border-color:#C8A96E;
box-shadow:0 0 0 3px rgba(200,169,110,0.12)
}
.form-group .checkbox-group label{
display:flex;
align-items:center;
gap:10px;
font-weight:400;
margin-bottom:8px;
font-size:14px;
cursor:pointer;
padding:8px 12px;
border-radius:4px;
transition:background .15s
}
.form-group .checkbox-group label:hover{
background:rgba(200,169,110,0.06)
}
.form-group .checkbox-group input{
width:18px;
height:18px;
accent-color:#C8A96E;
cursor:pointer
}
.result-card{
background:#fff;
border:2px solid #0F2B46;
border-radius:4px;
padding:40px 32px;
text-align:center;
margin-bottom:32px;
box-shadow:0 8px 40px rgba(15,43,70,0.12);
position:relative;
overflow:hidden
}
.result-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,#0F2B46,#C8A96E)
}
.result-type-badge{
display:inline-block;
background:#0F2B46;
color:#C8A96E;
font-size:13px;
font-weight:600;
padding:6px 20px;
border-radius:20px;
margin-bottom:20px;
letter-spacing:0.05em
}
.result-title{
font-family:'Noto Serif JP',serif;
font-size:26px;
font-weight:700;
color:#0F2B46;
margin-bottom:16px
}
.result-desc{
font-size:15px;
color:rgba(15,43,70,0.65);
margin-bottom:20px;
line-height:1.8
}
.result-service{
background:#F0F2F5;
border-radius:4px;
padding:20px;
margin-bottom:12px;
text-align:left;
border-left:4px solid #C8A96E
}
.result-service h4{
font-family:'Noto Serif JP',serif;
font-size:15px;
font-weight:700;
margin-bottom:6px;
color:#0F2B46
}
.result-service p{
font-size:14px;
margin-bottom:0;
color:rgba(15,43,70,0.65);
line-height:1.7
}
.result-cta-wrap{
margin-top:32px
}
@media(max-width:768px){
header .container{
flex-direction:column;
height:auto;
padding:16px 24px
}
.hero{
padding:56px 0 48px
}
.hero h2{
font-size:24px
}
section{
padding:48px 0
}
.section-title{
font-size:22px
}
.form-wrap{
padding:24px;
margin:24px auto
}
.result-title{
font-size:22px
}
.result-card{
padding:28px 20px
}
footer .container{
flex-direction:column;
text-align:center
}
footer nav{
justify-content:center
}
.domain-cards{
grid-template-columns:1fr
}
.steps-flow{
flex-direction:column;
align-items:center;
gap:4px
}
.step-arrow{
transform:rotate(90deg);
padding:0
}
.check-items{
flex-direction:column;
align-items:center
}
}
.resource-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:32px;
max-width:760px;
margin:32px auto 0
}
.resource-card{
background:#fff;
border:1px solid rgba(15,43,70,0.08);
border-radius:4px;
padding:32px 28px;
box-shadow:0 4px 24px rgba(0,0,0,0.06);
transition:transform .25s,box-shadow .25s;
position:relative;
overflow:hidden
}
.resource-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,#0F2B46,#C8A96E)
}
.resource-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 40px rgba(0,0,0,0.12)
}
.resource-icon{
width:48px;
height:48px;
border-radius:4px;
background:rgba(200,169,110,0.1);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
position:relative
}
.resource-icon::before{
content:'';
display:block;
width:20px;
height:24px;
border:2px solid #C8A96E;
border-radius:2px;
position:relative
}
.resource-icon::after{
content:'';
position:absolute;
bottom:-6px;
left:50%;
transform:translateX(-50%);
width:0;
height:0;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #C8A96E
}
.resource-card h3{
font-family:'Noto Serif JP',serif;
font-size:17px;
font-weight:700;
margin-bottom:10px;
color:#0F2B46
}
.resource-card>p{
font-size:14px;
color:rgba(15,43,70,0.6);
margin-bottom:16px;
line-height:1.7
}
.resource-card ul{
font-size:13px;
color:rgba(15,43,70,0.55);
padding-left:0;
list-style:none;
line-height:1.8
}
.resource-card ul li{
padding-left:20px;
position:relative;
margin-bottom:2px
}
.resource-card ul li::before{
content:'';
position:absolute;
left:0;
top:10px;
width:8px;
height:8px;
border-radius:50%;
background:rgba(200,169,110,0.3)
}
.content-list{
max-width:600px;
margin:16px auto
}
.content-list div{
padding:14px 0 14px 32px;
border-bottom:1px solid rgba(15,43,70,0.06);
font-size:15px;
position:relative;
line-height:1.7
}
.content-list div:last-child{
border-bottom:none
}
.content-list div::before{
content:'';
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:20px;
height:20px;
border-radius:50%;
background:rgba(200,169,110,0.12)
}
.content-list div::after{
content:'✓';
position:absolute;
left:5px;
top:50%;
transform:translateY(-50%);
color:#C8A96E;
font-weight:700;
font-size:11px
}
.form-group .checkbox-label{
display:flex;
align-items:flex-start;
gap:10px;
font-weight:400;
font-size:14px;
cursor:pointer;
line-height:1.6
}
.form-group .checkbox-label input{
width:18px;
height:18px;
accent-color:#C8A96E;
cursor:pointer;
margin-top:2px;
flex-shrink:0
}
.form-group .checkbox-label .req{
color:#C8A96E
}
.content-wrapper{
max-width:720px;
margin:0 auto;
padding:0 0 80px
}
.faq-category{
margin-bottom:40px
}

.faq-question{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
padding:20px 0;
cursor:pointer;
font-size:15px;
font-weight:700;
color:var(--navy);
line-height:1.7;
transition:color 0.2s;
-webkit-user-select:none;
user-select:none
}
.faq-question:hover{
color:var(--gold)
}
.faq-icon{
flex-shrink:0;
width:20px;
height:20px;
position:relative;
margin-top:2px
}
.faq-icon::before,.faq-icon::after{
content:'';
position:absolute;
background:var(--gold);
border-radius:1px;
transition:transform 0.3s ease
}
.faq-icon::before{
width:12px;
height:2px;
top:9px;
left:4px
}
.faq-icon::after{
width:2px;
height:12px;
top:4px;
left:9px
}
.faq-item.open .faq-icon::after{
transform:rotate(90deg)
}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.35s ease
}
.faq-answer-inner{
padding:0 0 20px;
font-size:15px;
line-height:1.9;
color:var(--text)
}
.cta-bottom{
text-align:center;
margin-top:56px;
padding-top:40px;
border-top:1px solid var(--border)
}
.maturity-table{
width:100%;
max-width:720px;
margin:0 auto;
border-collapse:collapse;
background:#fff;
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--card-shadow)
}
.maturity-table th,.maturity-table td{
padding:16px 24px;
text-align:left;
border-bottom:1px solid var(--border);
font-size:14px
}
.maturity-table th{
background:var(--navy);
color:#fff;
font-weight:600;
font-size:13px;
letter-spacing:.04em
}
.maturity-table td{
color:var(--text-mid);
line-height:1.7
}
.maturity-table tr:last-child td{
border-bottom:none
}

.result-table-wrap{
max-width:720px;
margin:40px auto 0
}
.result-table-wrap .maturity-table{
margin:0
}
.result-note{
font-size:12px;
color:var(--text-light);
text-align:center;
margin-top:12px
}
@media(max-width:768px){
.container{
padding:0 20px
}
header .container{
height:auto;
padding:14px 20px;
flex-direction:column
}
nav a{
font-size:12px
}

.section{
padding:48px 0
}
.price-card{
flex-direction:column;
text-align:center;
padding:28px 24px
}
.price-card .target-badge{
align-items:center;
text-align:center
}
.features-grid,.ba-grid{
grid-template-columns:1fr;
gap:12px
}
.steps{
flex-direction:column;
gap:24px;
align-items:center
}
.steps::before{
display:none
}
.step{
width:100%;
max-width:280px;
text-align:left;
display:flex;
align-items:center;
gap:16px
}
.step-circle{
flex-shrink:0;
margin:0
}
footer .container{
flex-direction:column;
text-align:center
}
footer nav{
justify-content:center
}
}

.testimonial-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-top:36px
}

.cta-diagnosis{
background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%)
}
.progress-badge{
display:inline-flex;
align-items:center;
gap:8px;
background:rgba(200,169,110,0.15);
border:1px solid rgba(200,169,110,0.3);
border-radius:20px;
padding:8px 20px;
margin-top:24px;
font-size:13px;
color:var(--gold);
font-weight:500
}
.section-title{
font-family:'Noto Serif JP',serif;
font-size:26px;
font-weight:700;
margin-bottom:12px;
text-align:center;
color:var(--navy);
line-height:1.4
}
.assurance-copy{
background:rgba(200,169,110,0.08);
border-left:4px solid var(--gold);
border-radius:4px;
padding:18px 24px;
margin:0 auto 32px;
max-width:640px;
font-size:14px;
color:rgba(15,43,70,0.7);
line-height:1.7
}
.assurance-copy strong{
display:block;
font-size:15px;
margin-bottom:4px;
color:var(--navy);
font-weight:600
}
.form-wrap{
max-width:700px;
margin:32px auto;
background:#fff;
border:1px solid var(--border);
border-radius:4px;
padding:40px;
box-shadow:var(--shadow)
}
.form-group{
margin-bottom:28px
}
.form-group>label{
display:block;
font-size:14px;
font-weight:600;
margin-bottom:8px;
color:var(--navy)
}
.form-group label .req{
color:var(--gold);
font-size:11px;
font-weight:500;
margin-left:4px
}
.form-group input[type="text"],.form-group input[type="email"],.form-group select{
width:100%;
padding:12px 16px;
border:1.5px solid rgba(15,43,70,0.15);
border-radius:4px;
font-size:15px;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color:var(--text);
background:var(--bg);
transition:border-color .25s,box-shadow .25s
}
.form-group input[type="text"]:focus,.form-group input[type="email"]:focus,.form-group select:focus{
outline:none;
border-color:var(--gold);
box-shadow:0 0 0 3px rgba(200,169,110,0.12)
}
.question-block{
background:var(--bg);
border:1px solid var(--border);
border-radius:6px;
padding:20px 24px;
margin-bottom:20px
}
.question-block .q-title{
font-size:14px;
font-weight:600;
color:var(--navy);
margin-bottom:12px;
display:flex;
gap:8px;
align-items:flex-start
}
.question-block .q-num{
background:var(--navy);
color:var(--gold);
width:24px;
height:24px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:700;
flex-shrink:0;
margin-top:1px
}
.question-block .radio-group label{
display:flex;
align-items:center;
gap:10px;
font-weight:400;
margin-bottom:6px;
font-size:14px;
cursor:pointer;
padding:6px 10px;
border-radius:4px;
transition:background .15s
}
.question-block .radio-group label:hover{
background:rgba(200,169,110,0.06)
}
.question-block .radio-group input{
width:18px;
height:18px;
accent-color:var(--gold);
cursor:pointer
}
.result-card{
background:#fff;
border:2px solid var(--navy);
border-radius:4px;
padding:40px 32px;
text-align:center;
margin-bottom:32px;
box-shadow:0 8px 40px rgba(15,43,70,0.12);
position:relative;
overflow:hidden
}
.result-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,var(--navy),var(--gold))
}
.result-type-badge{
display:inline-block;
background:var(--navy);
color:var(--gold);
font-size:13px;
font-weight:600;
padding:6px 20px;
border-radius:20px;
margin-bottom:20px;
letter-spacing:0.05em
}
.result-title{
font-family:'Noto Serif JP',serif;
font-size:26px;
font-weight:700;
color:var(--navy);
margin-bottom:16px
}
.result-score{
font-size:48px;
font-weight:700;
color:var(--gold);
margin-bottom:4px;
font-family:'Noto Serif JP',serif
}
.result-score-label{
font-size:13px;
color:var(--text-muted);
margin-bottom:24px
}
.result-service{
background:var(--bg-alt);
border-radius:4px;
padding:20px;
margin-bottom:12px;
text-align:left;
border-left:4px solid var(--gold)
}
.result-service h4{
font-family:'Noto Serif JP',serif;
font-size:15px;
font-weight:700;
margin-bottom:6px;
color:var(--navy)
}
@media(max-width:768px){
header .container{
flex-direction:column;
height:auto;
padding:16px 24px
}
.hero{
padding:56px 0 48px
}
.hero h2{
font-size:24px
}
section{
padding:48px 0
}
.section-title{
font-size:22px
}
.form-wrap{
padding:24px;
margin:24px auto
}
.result-title{
font-size:22px
}
.result-card{
padding:28px 20px
}
.meters{
grid-template-columns:1fr
}
footer .container{
flex-direction:column;
text-align:center
}
footer nav{
justify-content:center
}
}
.pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-top:40px
}
.pricing-card{
background:#fff;
border:1px solid var(--border);
border-radius:8px;
overflow:hidden;
box-shadow:var(--shadow);
transition:all .3s;
position:relative
}
.pricing-card:hover{
box-shadow:var(--shadow-hover);
transform:translateY(-4px)
}
.pricing-card-header{
background:var(--navy);
padding:28px 28px 24px;
color:#fff;
position:relative
}
.pricing-card-header h3{
font-family:'Noto Serif JP',serif;
font-size:18px;
font-weight:700;
margin-bottom:8px
}
.pricing-card-header .price{
font-family:'Noto Serif JP',serif;
font-size:28px;
font-weight:700;
color:var(--gold);
line-height:1.2
}
.pricing-card-header .price-note{
font-size:13px;
color:rgba(255,255,255,0.6);
margin-top:4px
}
.pricing-card-body{
padding:28px
}
.pricing-card-body .target{
font-size:13px;
color:var(--text-muted);
margin-bottom:16px;
padding:10px 14px;
background:var(--bg-alt);
border-radius:4px;
line-height:1.7
}
.pricing-card-body h4{
font-size:14px;
font-weight:700;
color:var(--navy);
margin-bottom:10px;
margin-top:20px;
padding-left:10px;
border-left:3px solid var(--gold)
}
.pricing-card-body h4:first-child{
margin-top:0
}
.pricing-card-body ul{
padding-left:18px;
margin-bottom:8px
}
.pricing-card-body ul li{
font-size:14px;
color:var(--text-muted);
margin-bottom:6px;
line-height:1.8
}
.pricing-card-body .process{
font-size:14px;
color:var(--text-muted);
line-height:1.9
}
.pricing-card-body .excluded{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:8px
}
.pricing-card-body .excluded span{
font-size:12px;
color:var(--text-muted);
background:rgba(15,43,70,0.03);
padding:3px 10px;
border-radius:12px;
border:1px solid var(--border)
}
.pricing-card-body .badge{
display:inline-block;
font-size:12px;
font-weight:600;
color:var(--gold-dark);
background:rgba(200,169,110,0.1);
padding:3px 12px;
border-radius:12px;
margin-top:12px
}
.common-list{
max-width:680px;
margin:28px auto 0
}
.common-item{
padding:18px 0 18px 20px;
border-bottom:1px solid var(--border);
font-size:16px;
position:relative;
line-height:1.9
}
.common-item::before{
content:'';
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:3px;
height:60%;
background:var(--gold);
border-radius:2px
}
.common-item:last-child{
border-bottom:none
}
.faq-list{
max-width:760px;
margin:32px auto 0
}
.faq-item{
background:#fff;
border:1px solid var(--border);
border-radius:8px;
margin-bottom:12px;
overflow:hidden
}
.faq-q{
padding:18px 24px;
font-size:15px;
font-weight:600;
color:var(--navy);
cursor:pointer;
position:relative;
display:flex;
align-items:center;
gap:12px
}
.faq-q::after{
content:'+';
font-size:20px;
color:var(--gold);
margin-left:auto;
flex-shrink:0;
transition:transform .2s
}
.faq-item.open .faq-q::after{
content:'−'
}
.faq-a{
padding:0 24px 18px;
font-size:14px;
color:var(--text-muted);
line-height:1.9;
display:none
}
.faq-item.open .faq-a{
display:block
}
.estimate-table-wrap{
overflow-x:auto;
margin-top:32px;
overflow-x:auto
}
.estimate-table{
width:100%;
border-collapse:separate;
border-spacing:0;
background:#fff;
border:1px solid var(--border);
border-radius:8px;
overflow:hidden;
box-shadow:var(--shadow)
}
.estimate-table thead{
background:var(--navy)
}
.estimate-table thead th{
padding:14px 18px;
font-size:13px;
font-weight:600;
color:#fff;
text-align:left;
letter-spacing:0.04em;
white-space:nowrap
}
.estimate-table thead th:first-child{
padding-left:24px
}
.estimate-table tbody td{
padding:18px;
font-size:14px;
line-height:1.9;
color:var(--text-muted);
border-bottom:1px solid var(--border);
vertical-align:top
}
.estimate-table tbody td:first-child{
padding-left:24px
}
.estimate-table tbody tr:last-child td{
border-bottom:none
}
.estimate-table tbody td strong{
color:var(--navy);
font-weight:600
}
.estimate-table .tag-service{
display:inline-block;
font-size:12px;
font-weight:600;
color:var(--gold-dark);
background:rgba(200,169,110,0.1);
padding:2px 10px;
border-radius:12px;
margin-bottom:4px
}
.estimate-table .tag-price{
display:inline-block;
font-size:13px;
font-weight:700;
color:var(--navy);
white-space:nowrap
}
.estimate-note{
margin-top:24px;
font-size:14px;
color:var(--text-muted);
line-height:1.9;
max-width:800px;
margin-left:auto;
margin-right:auto
}
.estimate-note strong{
color:var(--text);
font-weight:600
}
.estimate-cta{
margin-top:36px;
text-align:center
}
@media(max-width:768px){
.estimate-table,.estimate-table thead,.estimate-table tbody,.estimate-table th,.estimate-table td{
display:block;
width:100%
}
.estimate-table thead{
display:none
}
.estimate-table tbody tr{
padding:18px 20px;
border-bottom:1px solid var(--border)
}
.estimate-table tbody tr:last-child{
border-bottom:none
}
.estimate-table tbody td{
padding:4px 0;
border-bottom:none
}
.estimate-table tbody td::before{
content:attr(data-label);
display:block;
font-size:11px;
font-weight:600;
color:var(--navy);
margin-bottom:2px;
letter-spacing:0.04em
}
.estimate-table tbody td:first-child{
padding-left:0
}
.estimate-table .tag-price{
display:block;
margin-top:4px
}
}
.policy-section{
padding:32px 0;
border-bottom:1px solid var(--border)
}
.policy-section:first-of-type{
padding-top:0
}
.policy-section:last-of-type{
border-bottom:none
}
.policy-section h2{
font-family:'Noto Serif JP',serif;
font-size:18px;
font-weight:700;
color:var(--navy);
margin-bottom:16px;
padding-left:16px;
border-left:3px solid var(--gold);
line-height:1.5
}
.policy-section p{
font-size:15px;
line-height:1.9;
margin-bottom:14px;
color:var(--text)
}
.policy-section ul{
padding-left:0;
list-style:none;
margin-bottom:14px
}
.policy-section ul li{
font-size:15px;
line-height:1.8;
padding:8px 0 8px 24px;
position:relative;
color:var(--text);
border-bottom:1px solid var(--border)
}
.policy-section ul li:last-child{
border-bottom:none
}
.policy-section ul li::before{
content:'';
position:absolute;
left:0;
top:16px;
width:8px;
height:8px;
background:var(--gold);
border-radius:50%
}
.policy-section p.note{
background:var(--bg-alt);
padding:16px 20px;
border-radius:4px;
font-size:14px;
color:var(--text-muted)
}
.steps{
max-width:680px;
margin:32px auto 0
}
.step{
display:flex;
align-items:flex-start;
padding:20px 0;
border-bottom:1px solid var(--border)
}
.step:last-child{
border-bottom:none
}
.step-num{
flex-shrink:0;
width:40px;
height:40px;
background:var(--navy);
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:15px;
margin-right:20px;
margin-top:2px;
font-family:'Noto Serif JP',serif
}
.step-content{
font-size:15px;
line-height:1.7
}
.step-content strong{
display:block;
margin-bottom:4px;
font-size:16px;
color:var(--text)
}
@media (max-width:480px){
.hero h1{
font-size:22px
}
}
@media (max-width:480px){
.hero h1{
font-size:22px
}
}
@media(max-width:768px){
.nav-toggle-label{
display:flex
}
.nav-toggle:checked ~ nav{
max-height:600px
}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(1){
transform:rotate(45deg)
}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(2){
opacity:0
}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(3){
transform:rotate(-45deg)
}
nav a{
font-size:15px;
padding:14px 32px;
border-bottom:1px solid var(--border);
display:block
}
nav a::after{
display:none
}
header .container{
flex-wrap:wrap
}
}
.section-title{
font-family:'Noto Serif JP',serif;
font-size:24px;
color:var(--navy);
margin-bottom:32px;
text-align:center
}
.section-title::after{
content:'';
display:block;
width:48px;
height:3px;
background:var(--gold);
margin:12px auto 0
}
.agenda{
font-size:14px
}
.agenda-row{
display:flex;
border-bottom:1px solid var(--border);
padding:10px 0
}
.agenda-row:last-child{
border-bottom:none
}
.agenda-time{
width:100px;
flex-shrink:0;
font-weight:600;
color:var(--navy)
}
.agenda-content{
flex:1
}
.budget-table{
width:100%;
border-collapse:collapse;
font-size:13px
}
.budget-table th{
background:var(--navy);
color:var(--white);
padding:8px 12px;
text-align:left;
font-weight:500
}
.budget-table td{
padding:8px 12px;
border-bottom:1px solid var(--border)
}
.budget-table tr:nth-child(even){
background:#f7f8fa
}
.budget-table .negative{
color:#c0392b
}
.cf-table{
width:100%;
border-collapse:collapse;
font-size:12px
}
.cf-table th{
background:var(--navy);
color:var(--white);
padding:6px 8px;
font-weight:500
}
.cf-table td{
padding:6px 8px;
border-bottom:1px solid var(--border);
text-align:right
}
.cf-table td:first-child{
text-align:left;
font-weight:600;
color:var(--navy)
}
.cf-table .positive{
color:#27ae60
}
.cf-table .negative{
color:#c0392b
}
.cta-section .btn-primary{
background:var(--gold);
color:var(--navy)
}
.cta-section .btn-primary:hover{
background:var(--gold-light)
}
.cta-section .btn-outline{
background:transparent;
color:var(--gold);
border:1.5px solid var(--gold)
}
.cta-section .btn-outline:hover{
background:var(--gold);
color:var(--navy)
}

.deliverables .note{
font-size:12px;
color:var(--text-light);
margin-top:12px;
line-height:1.7;
border-top:1px solid var(--border);
padding-top:12px
}

.step-circle{
width:56px;
height:56px;
background:#fff;
border:2px solid var(--gold);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 16px;
font-family:'Noto Serif JP',serif;
font-size:16px;
font-weight:700;
color:var(--gold);
transition:all .25s
}
.step:hover .step-circle{
background:var(--gold);
color:#fff;
box-shadow:0 4px 16px rgba(200,169,110,.3)
}

details{
border:none;
padding:0;
margin:0
}
details summary{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 0;
font-size:14px;
font-weight:600;
color:var(--navy);
cursor:pointer;
list-style:none;
gap:16px;
transition:color .2s;
-webkit-user-select:none;
user-select:none
}
details summary:hover{
color:var(--gold)
}
@media(max-width:768px){
.container{
padding:0 20px
}
header .container{
height:auto;
padding:14px 20px;
flex-direction:column
}
nav a{
font-size:12px
}

.hero-pills{
gap:8px
}
.hero-pills a{
font-size:12px;
padding:8px 14px
}
.section{
padding:48px 0
}

.price-card{
flex-direction:column;
text-align:center;
padding:28px 24px
}
.price-card .target-badge{
align-items:center;
text-align:center
}
.price-card .price-value{
font-size:24px
}
.features-grid{
grid-template-columns:1fr;
gap:12px
}
.steps{
flex-direction:column;
gap:24px;
align-items:center
}
.steps::before{
display:none
}
.step{
width:100%;
max-width:280px;
text-align:left;
display:flex;
align-items:center;
gap:16px
}
.step-circle{
flex-shrink:0;
margin:0
}
.step-label{
margin-bottom:0
}
.step-desc{
padding:0
}

footer .container{
flex-direction:column;
text-align:center
}
footer nav{
justify-content:center
}
}
@media(max-width:480px){

.feature-item{
padding:16px
}
}
.thanks-section{
padding:80px 0 64px;
text-align:center
}
.thanks-card{
max-width:640px;
margin:0 auto;
background:#fff;
border:2px solid #0F2B46;
border-radius:4px;
padding:48px 40px;
box-shadow:0 8px 40px rgba(15,43,70,0.12);
position:relative;
overflow:hidden
}
.thanks-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,#0F2B46,#C8A96E)
}
.thanks-icon{
font-size:56px;
color:#C8A96E;
margin-bottom:20px
}
.thanks-title{
font-family:'Noto Serif JP',serif;
font-size:26px;
font-weight:700;
color:#0F2B46;
margin-bottom:16px;
line-height:1.4
}
.thanks-desc{
font-size:15px;
color:rgba(15,43,70,0.65);
line-height:1.8;
margin-bottom:8px
}
.thanks-desc strong{
color:#0F2B46
}
.prep-section{
padding:48px 0 64px
}
.prep-section .section-title{
font-family:'Noto Serif JP',serif;
font-size:22px;
font-weight:700;
margin-bottom:20px;
text-align:center;
color:#0F2B46;
line-height:1.4
}
.prep-list{
max-width:560px;
margin:0 auto;
list-style:none;
padding:0
}
.prep-list li{
padding:16px 0 16px 40px;
border-bottom:1px solid rgba(15,43,70,0.06);
font-size:15px;
position:relative;
line-height:1.7;
color:rgba(15,43,70,0.75)
}
.prep-list li:last-child{
border-bottom:none
}
.prep-list li::before{
content:'';
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:24px;
height:24px;
border-radius:50%;
background:rgba(200,169,110,0.12)
}
.prep-list li::after{
content:'→';
position:absolute;
left:6px;
top:50%;
transform:translateY(-50%);
color:#C8A96E;
font-size:12px;
font-weight:700
}
.prep-note{
font-size:13px;
color:rgba(15,43,70,0.45);
text-align:center;
margin-top:16px
}
@media(max-width:768px){
header .container{
flex-direction:column;
height:auto;
padding:16px 24px
}
.thanks-section{
padding:56px 0 48px
}
.thanks-card{
padding:32px 24px
}
.thanks-title{
font-size:22px
}
.prep-section{
padding:32px 0 48px
}
footer .container{
flex-direction:column;
text-align:center
}
footer nav{
justify-content:center
}
}
.cta-section .cta-primary{
margin-bottom:24px
}
.cta-section .cta-primary p{
font-size:15px;
color:rgba(15,43,70,0.65);
margin-bottom:16px
}
.cta-section .cta-secondary p{
font-size:14px;
color:rgba(15,43,70,0.5);
margin-bottom:16px
}
@media(max-width:768px){
header .container{
flex-direction:column;
height:auto;
padding:16px 24px
}
.thanks-section{
padding:56px 0 48px
}
.thanks-card{
padding:32px 24px
}
.thanks-title{
font-size:22px
}
footer .container{
flex-direction:column;
text-align:center
}
footer nav{
justify-content:center
}
}
.download-section{
padding:48px 0 64px
}
.download-section .section-title{
font-family:'Noto Serif JP',serif;
font-size:22px;
font-weight:700;
margin-bottom:24px;
text-align:center;
color:#0F2B46;
line-height:1.4
}
.download-list{
max-width:560px;
margin:0 auto;
list-style:none;
padding:0
}
.download-list li{
background:#fff;
border:1px solid rgba(15,43,70,0.08);
border-radius:4px;
padding:20px 24px;
margin-bottom:16px;
box-shadow:0 2px 12px rgba(0,0,0,0.04);
position:relative;
overflow:hidden
}
.download-list li::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:3px;
background:linear-gradient(90deg,#0F2B46,#C8A96E)
}
.download-list li a{
display:flex;
align-items:center;
gap:12px;
font-size:15px;
font-weight:600;
color:#0F2B46
}
.download-list li a:hover{
color:#C8A96E
}
.download-list li .dl-icon{
width:36px;
height:36px;
border-radius:4px;
background:rgba(200,169,110,0.1);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:18px;
color:#C8A96E
}
.download-list li .dl-info{
flex:1
}
.download-list li .dl-info span{
display:block;
font-size:12px;
color:rgba(15,43,70,0.45);
font-weight:400;
margin-top:2px
}
@media(max-width:768px){
header .container{
flex-direction:column;
height:auto;
padding:16px 24px
}
.thanks-section{
padding:56px 0 48px
}
.thanks-card{
padding:32px 24px
}
.thanks-title{
font-size:22px
}
.download-section{
padding:32px 0 48px
}
footer .container{
flex-direction:column;
text-align:center
}
footer nav{
justify-content:center
}
}