/*
 * WEBサポートパック内のcontainerだけに適用
 *
 * 会社ホームページの他ページへ
 * CSSが影響しないようにします。
 */
.web_support_page .container {

    width: min(
        var(--max),
        calc(100% - 40px)
    );

    margin: auto;
}

/*
 * ==================================================
 * WEBサポートパック共通設定
 *
 * 必ず .web_support_page 配下だけに適用します。
 * 既存ホームページへのCSS干渉を防ぎます。
 * ==================================================
 */

.web_support_page {
    --primary: #0f4c81;
    --primary-dark: #0a355a;
    --accent: #eaf3fb;
    --text: #1d2733;
    --muted: #66717e;
    --line: #d9e1e8;
    --bg: #f7f9fb;
    --white: #fff;
    --warn: #fff6df;
    --radius: 14px;
    --shadow: 0 8px 24px rgba(15, 76, 129, .08);
    --max: 1180px;

    color: var(--text);
    background: var(--white);
    line-height: 1.7;
}


/*
 * WEBサポートパック内だけ
 */
.web_support_page a {
    color: inherit;
}


.web_support_page img {
    max-width: 100%;
    display: block;
}


.web_support_page .container {
    width: min(
        var(--max),
        calc(100% - 40px)
    );

    margin-left: auto;
    margin-right: auto;
}

.hero{
    padding:72px 0 54px;
    background:linear-gradient(180deg,#fff 0,#f6f9fc 100%)
}

.hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;gap:56px;
    align-items:center
}

.eyebrow{
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
    color:var(--primary);
    text-transform:uppercase
}

.hero h1{
    font-size:clamp(34px,4vw,56px);
    line-height:1.3;
    margin:12px 0 20px
}

.hero .lead{
    font-size:18px;
    color:var(--muted);
    max-width:700px
}

.price-callout{
    display:inline-flex;
    gap:14px;
    align-items:center;
    margin:18px 0 24px;
    padding:12px 16px;
    background:var(--accent);
    border-radius:999px;
    font-weight:800
}

.price-callout strong{
    font-size:24px;
    color:var(--primary)
}

.actions{
    display:flex;gap:12px;
    flex-wrap:wrap
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    text-decoration:none;
    font-weight:800;
    border:1px solid var(--primary);
    padding:13px 22px;
    transition:.2s
}

.btn-primary{
    background:var(--primary);
    color:#fff
}

.btn-primary:hover{
    background:var(--primary-dark)
}

.btn-outline{
    background:#fff;
    color:var(--primary)
}

.hero-visual{
    border:1px solid var(--line);
    background:#fff;
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:26px
}

.device-stage{
    height:320px;
    border-radius:14px;
    background:linear-gradient(135deg,#eef3f7,#fff);
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden
}

.device{
    width:70%;
    aspect-ratio:16/10;
    border:10px solid #2a3540;
    border-radius:8px;
    background:#fff;
    position:relative
}

.device:after{
    content:"";
    position:absolute;
    width:22%;
    height:38%;
    right:-16%;
    bottom:-10%;
    border:7px solid #2a3540;
    border-radius:10px;
    background:#fff
}

.section{
    padding:72px 0
}

.section.alt{
    background:var(--bg)
}

.section-title{
    font-size:32px;
    line-height:1.35;
    margin:0 0 12px
}

.section-lead{
    color:var(--muted);
    margin:0 0 34px
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:0 3px 12px rgba(0,0,0,.03)
}

.icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--accent);
    display:grid;
    place-items:center;
    color:var(--primary);
    font-size:22px;
    font-weight:800;
    margin-bottom:15px
}

.card h3{
    margin:0 0 8px;
    font-size:19px
}

.card p{
    margin:0;
    color:var(--muted)
}

.plans{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    align-items:stretch
}

.plan{
    position:relative
}

.plan.recommended{
    border:2px solid var(--primary);
    transform:translateY(-8px)
}

.badge{
    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%);
    background:var(--primary);
    color:#fff;
    border-radius:999px;
    padding:5px 14px;
    font-size:12px;
    font-weight:800
}

.plan-name{
    font-size:22px;
    font-weight:800
}

.plan-price{
    font-size:34px;
    font-weight:900;
    color:var(--primary);
    margin:8px 0
}

.plan-price small{
    font-size:14px;
    color:var(--muted);
    font-weight:600
}

.plan ul{
    padding-left:20px;
    color:var(--muted);
    min-height:210px
}

.plan .btn{
    width:100%
}

.include-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
}

.include-box{
    border-radius:var(--radius);
    padding:28px;
    background:#fff;
    border:1px solid var(--line)
}

.include-box h3{
    margin-top:0
}

.checklist{
    list-style:none;padding:0;
    margin:0
}

.checklist li{
    padding:8px 0 8px 30px;
    position:relative;
    border-bottom:1px dashed var(--line)
}

.checklist li:last-child{
    border-bottom:0
}

.checklist li:before{
    position:absolute;
    left:0;
    font-weight:900
}

.yes li:before{
    content:"✓";
    color:#21804f
}

.no li:before{
    content:"×";color:#b44949
}

.template-card .preview{
    height:190px;
    border-radius:10px;
    background:linear-gradient(135deg,#f0f3f6,#fff);
    border:1px solid var(--line);
    display:grid;place-items:center;
    color:var(--muted);
    margin-bottom:18px;
    position:relative
}

.template-card .preview:before{
    content:"PC";
    position:absolute;
    left:12px;top:10px;
    font-size:11px;
    font-weight:800;
    color:var(--primary)
}

.template-card .preview:after{
    content:"SP";
    position:absolute;
    right:18px;
    bottom:12px;
    width:42px;
    height:82px;
    border:4px solid #4b5966;border-radius:8px;
    display:grid;
    place-items:center;
    font-size:10px;
    color:#4b5966
}

.steps{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px
}

.step{
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px
}

.step-num{
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:900;
    margin-bottom:12px
}

.faq-item{
    border-bottom:1px solid var(--line)
}

.faq-q{
    width:100%;
    border:0;
    background:#fff;
    text-align:left;
    font-weight:800;
    padding:18px 0;
    display:flex;
    justify-content:space-between;
    gap:16px;
    font-size:16px
}

.faq-a{
    display:none;
    padding:0 0 18px;
    color:var(--muted)
}

.faq-item.open .faq-a{
    display:block
}

.contract-note{
    background:var(--warn);
    border:1px solid #ecd596;
    border-radius:var(--radius);
    padding:22px
}

.form-wrap{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:30px
}

.form-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
    background:#fff
}

.required{
    color:#b44949;
    font-size:12px;
    margin-left:4px
}


/*
 * ==================================================
 * WEBサポートパック フォーム
 * ==================================================
 */

.web_support_page .form-row {
    margin-bottom: 22px;
}


.web_support_page .form-row > label:not(.checkbox) {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}


.web_support_page .form-row input[type="text"],
.web_support_page .form-row input[type="email"],
.web_support_page .form-row input[type="tel"],
.web_support_page .form-row input[type="url"],
.web_support_page .form-row select,
.web_support_page .form-row textarea {

    width: 100%;

    padding: 12px 14px;

    color: var(--text);

    background: #fff;

    border: 1px solid #bfc9d3;

    border-radius: 9px;

    font: inherit;
}


.web_support_page .form-row textarea {
    min-height: 150px;
    resize: vertical;
}


.web_support_page .form-help {
    margin-top: 6px;
    margin-bottom: 0;

    color: var(--muted);

    font-size: 13px;
}


.web_support_page .required {
    margin-left: 5px;

    color: #b44949;

    font-size: 12px;
}


.web_support_page .checkbox {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-size: 14px;
}


.web_support_page .checkbox input[type="checkbox"] {

    width: auto;

    margin-top: 5px;

    flex-grow: 0;
}


.checkbox{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px
}

.checkbox input{
    margin-top:5px
}

.summary-box{
    background:var(--bg);
    border-radius:var(--radius);
    padding:22px
}

.flow-mini{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap
}

.flow-mini span{
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px 12px;
    font-weight:700
}

.sticky-mobile{
    display:none
}

.page-hero{
    padding:54px 0;
    background:var(--bg);
    border-bottom:1px solid var(--line)
}

.page-hero h1{
    margin:0 0 8px;
    font-size:36px
}

.notice{
    padding:16px 18px;
    background:var(--accent);
    border-left:4px solid var(--primary);
    border-radius:8px
}

.center{
    text-align:center
}

.muted{
    color:var(--muted)
}

.legal{
    max-width:900px
}

.legal h2{
    margin-top:34px
}

.legal table{
    width:100%;
    border-collapse:collapse
}

.legal th,.legal td{
    padding:12px;
    border-bottom:1px solid var(--line);
    text-align:left
}

.legal th{
    width:32%;
    background:var(--bg)
}




@media(max-width:900px){
    .nav{
        display:none;
        position:absolute;
        top:72px;
        left:0;
        right:0;
        background:#fff;
        border-bottom:1px solid var(--line);
        padding:18px 20px;
        flex-direction:column;
        align-items:stretch
    }
    
    .hero-grid,.form-wrap{
        grid-template-columns:1fr
    }
    
    .grid-4{
        grid-template-columns:repeat(2,1fr)
    }
    
    .grid-3,.plans{
        grid-template-columns:1fr
    }
    
    .plan.recommended{
        transform:none
    }
    
    .include-grid{
        grid-template-columns:1fr
    }
    
    .steps{
        grid-template-columns:1fr 1fr
    }
    
    .sticky-mobile{
        display:grid;
        grid-template-columns:1fr 1fr;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:60;
        background:#fff;
        border-top:1px solid var(--line);
        padding:8px;
        gap:8px
    }
    
    .sticky-mobile .btn{
        padding:10px 8px
    }
    
    .footer{
        padding-bottom:92px
    }
    
    .device-stage{
        height:260px
    }
}



@media(max-width:560px){
    .container{
        width:min(100% - 28px,var(--max))
    }
    
    .hero{
        padding:48px 0 34px
    }
    
    .hero h1{
        font-size:34px
    }
    
    .price-callout{
        border-radius:14px;
        display:block
    }
    
    .price-callout strong{
        font-size:22px
    }
    
    .grid-4{
        grid-template-columns:1fr 1fr;
        gap:12px
    }
    
    .card{
        padding:18px
    }
    
    .section{
        padding:52px 0
    }
    
    .section-title{
        font-size:26px
    }
    
    .steps{
        grid-template-columns:1fr
    }
    
    .actions .btn{
        width:100%
    }
    
    .header-inner{
        min-height:64px
    }
    
    .nav{
        top:64px
    }
    
    .page-hero h1{
        font-size:30px
    }
}