@charset "utf-8";

/***************************************
Ver 2026.03.15-
メインの後、フレームの前に設置
<link href="../css/acc.css" rel="stylesheet"><script src="../js/acc.js" defer></script>
<link href="../css/メイン.css" rel="stylesheet">
<link href="../css/これ.css" rel="stylesheet">
<link href="../css/style-frame.css" rel="stylesheet">

*************************************** */
:root {
    --accent:           #d45a00;
    --border-base-color:#d45a0066;
    --bg-base-light:   #d45a0022;
}

.section-bg-gray{ background-color:#fafafa;}


/*---------------------------------
/*　こまごま
/*---------------------------------*/

a { color:var(--accent); text-decoration: underline; }
section strong{ font-weight: bold; color: var(--accent); }


/*---------------------------------
/*　画像関連
/*---------------------------------*/
.sp-img-clip{ max-width: var(--width-clip); margin: 2em auto ;}
.sp-img-clip-narrow{ max-width: var(--width-narrow); margin: 2em auto ;}



/*-----------------------------
 診断ボックス 
-----------------------------*/
.diag-container {
    width: 100%; max-width:var(--width-narrow);
    margin: var( --margin-top-large) auto; padding: 2.5em;
    background:var(--bg-white); border: 0.2em solid var(--accent); border-radius: 0.8em;
    font-size: 0.8em;
}
.diag-container h3 {
    font-size: 1.5em; margin-top: 0; margin-bottom: 1.2em;
    color:var(--accent); text-align: center;
}
/* チェックリスト */
.diag-container .diag-list { margin-bottom: 2em; }
.diag-container .diag-item { display: block; margin-bottom: 1em; cursor: pointer; }
.diag-container .diag-item input { transform: scale(1.2); margin-right: 0.8em; }

 /* 診断ボタン */
.diag-container .diag-submit {
    width: 100%; border: none; border-radius: 0.4em;
    color: var(--text-white); background:var(--accent);
    font-size: 1.2em; font-weight: bold; padding: 1em 2em;
    cursor: pointer; transition: background 0.3s;
}
.diag-container .diag-submit:hover { opacity: 0.9; }
.diag-container .result {font-size: 1.1em; color:var(--accent); font-weight: bold; }


/*-----------------------------
個別最適化
-----------------------------*/
dl.opti-list { max-width: var(--width-narrow); margin:var(--margin-top-large) auto; }
.opti-list dt { font-size: 1.1em; font-weight: bold; margin: 0 0 0.4em; }
.opti-list dt::before {
        display:inline-block; margin-left: -2em; margin-right: 1em;
        content: "●"; font-size: 0.8em; color:var(--accent); }
.opti-list dd { margin: 0; }
.opti-list dd.tips { font-size: 0.9em; color: var(--text-muted); }
.opti-list dd + dd { margin-top: 0.5em; }
.opti-list dd + dt { margin-top: 2.0em; }


/*-----------------------------
工程期間
-----------------------------*/
.section-policy-timeline h3{
    width: fit-content; margin-inline: auto; margin: 3em auto 0;
    font-size: 1.75em; font-weight: bold; text-align: center;
    border-bottom: 1px solid var(--base-navy);
}


/*-----------------------------
引き受け条件
<section class="sec-common section-commitments section-bg-gray ">
-----------------------------*/

.commitment-box {
    position: relative;
    max-width:var(--width-box); margin: 2em auto; padding: 3em calc( 2em + 2vw );
    border: 0.1em solid var(--border-color); border-radius: 1em; background-color:var(--bg-soft);
}
.commitment-box h2{ font-size: 1.4em !important; color: var(--base-color) !important; }

dl.promise-list { margin:calc( 2em + 1vw ) auto ; padding-left: 2em; }
.promise-list dt { font-size: 1.1em; color:var(--text-body); font-weight: bold; margin: 0 0 0.4em; }
.promise-list dt::before {
        display:inline-block; margin-left: -2em; margin-right: 1em;
        content: "●"; font-size: 0.8em; color:var(--accent);    
}
.promise-list dd { margin: 0; }
.promise-list dd.tips { font-size: 0.9em; color: var(--text-muted); }
.promise-list dd + dd { margin-top: 0.5em; }
.promise-list dd + dt { margin-top: 2.0em; }


/*-----------------------------
メッセージ
<section class="section-closing-message">
-----------------------------*/
.section-closing-message { padding:3em 1.5em 3em; }
.section-closing-message .message-frame {
    position: relative; max-width:var(--width-box); margin: 0 auto;
    text-align: left; padding: 3em 3em;
    background: var(--bg-accent);  border: 0.1em solid var(--accent); border-radius: 1.5em;
}
.message-frame h2 {
    position: absolute; top: -1em; left: 2em; border-radius: 2em;
    background:var(--accent); color: #fff;
    font-size: 0.9em; font-weight: bold; padding: 0.3em 1.5em;
}
.message-frame p { line-height: 1.8; text-align: justify; }
.message-frame p:last-of-type { margin-bottom: 0; }


/*-----------------------------
募集概要
<section class="common-section section-cta">
-----------------------------*/
.info-table{
    margin-top:var(--margin-top-large);
    width: 100%; max-width: var(--width-narrow); margin-left:auto; margin-right: auto; 
    box-shadow:var(--border-shadow); border-radius: 8px; overflow: hidden;
}
.info-table table { width: 100%; margin: 0; border-collapse: collapse; border-spacing: 0; }
.info-table th {
    color:var(--text-body); background:var(--bg-accent);
    padding: 1.2em 1.5em; border-bottom: 0.1em solid var(--border-light);
}
.info-table td { padding: 1.2em 1.5em; border-bottom: 0.1em solid var(--border-light); }
.info-table tr:last-child th,
.info-table tr:last-child td { border-bottom: none; }
.info-table td span.tips { display: block; margin-top: 0.75em; font-size: 0.8em; color: var(--text-muted); } 


/* ---------------------------
申し込みの流れ
色変更のみ
------------------------------*/

.box-flow h3{ color: var(--accent); }
.box-flow h3 span{ background: var(--accent); color: var(--bg-white); }