@charset "utf-8";
/* 資料ダウンロード パーツ（系統 A 版 PRJ-104）— 部品専用 CSS
   クラスはすべて dl / dl- 始まり。要素だけのセレクタ・リセットは書かず、:root での変数定義と !important も使わない（サイトの CSS を上書きしないため）。
   色などはサイトのページ CSS（例 download 直下の style-download）で dl, dl-btn, dl-pankuzu の --dl-* を上書きする。
   版を変えたら dl-view の DL_PARTS_VER を +1 する。 */

/*------------- 変数 -------------*/
.dl,
.dl-btn,
.dl-pankuzu {
    --dl-color-main: #2f5f8f;
    --dl-color-main-text: #fff;
    --dl-color-text: inherit;
    --dl-color-sub: #666;
    --dl-color-line: #c8c8c8;
    --dl-color-bg: #fff;
    --dl-color-error: #c62828;
    --dl-color-error-bg: #fdecea;
    --dl-font: inherit;
    --dl-fz-small: .875em;
    --dl-radius: 4px;
    --dl-max-w: 760px;
    --dl-gutter: 16px;
    --dl-sec-pad: clamp(40px, 8vw, 80px);
    --dl-box-pad: clamp(20px, 4vw, 40px);
    --dl-space: 1.5em;
}

/*------------- 外枠 -------------*/
.dl {
    position: relative;
    padding-block: var(--dl-sec-pad);
    padding-inline: 0;
    overflow: visible;
    color: var(--dl-color-text);
    font-family: var(--dl-font);
}

.dl-inner {
    box-sizing: border-box;
    max-width: var(--dl-max-w);
    margin-inline: auto;
    padding-inline: var(--dl-gutter);
}

/*------------- 見出し・文 -------------*/
.dl-heading {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.5;
}

.dl-text {
    margin: var(--dl-space) 0 0;
    line-height: 1.8;
}

.dl-strong {
    font-weight: bold;
}

.dl-small {
    font-size: var(--dl-fz-small);
}

.dl-text-sub {
    color: var(--dl-color-sub);
}

.dl-text-error {
    color: var(--dl-color-error);
}

/*------------- 箱 -------------*/
.dl-box {
    box-sizing: border-box;
    margin-top: var(--dl-space);
    padding: var(--dl-box-pad);
    border-width: 1px;
    border-style: solid;
    border-color: var(--dl-color-line);
    border-radius: var(--dl-radius);
    background-color: var(--dl-color-bg);
}

.dl-alert {
    box-sizing: border-box;
    margin-top: var(--dl-space);
    padding: 1em;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--dl-color-error);
    background-color: var(--dl-color-error-bg);
}

.dl-box > .dl-text:first-child,
.dl-alert > .dl-text:first-child {
    margin-top: 0;
}

.dl-list {
    margin: .5em 0 0;
    padding-left: 1.5em;
}

.dl-list-item {
    list-style-type: disc;
}

/*------------- フォーム -------------*/
.dl-hp {
    position: absolute;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
}

.dl-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
}

.dl-legend {
    padding: 0;
    font-weight: bold;
}

.dl-req,
.dl-opt {
    margin-left: .5em;
    font-size: var(--dl-fz-small);
}

.dl-req {
    color: var(--dl-color-error);
}

.dl-opt {
    color: var(--dl-color-sub);
}

.dl-choices {
    display: flex;
    flex-direction: column;
    gap: .75em;
    margin-top: .75em;
}

.dl-check {
    display: flex;
    align-items: flex-start;
    gap: .75em;
    cursor: pointer;
}

.dl-check-input {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    margin: .2em 0 0;
    accent-color: var(--dl-color-main);
}

.dl-fixed-list {
    margin: .75em 0 0;
    padding-left: 1.5em;
}

.dl-fixed-item {
    list-style-type: disc;
}

.dl-field {
    margin-top: var(--dl-space);
}

.dl-label {
    display: block;
    font-weight: bold;
}

.dl-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: .5em 0 0;
    padding: .75em;
    border-width: 1px;
    border-style: solid;
    border-color: var(--dl-color-line);
    border-radius: var(--dl-radius);
    background-color: var(--dl-color-bg);
    color: inherit;
    font-family: inherit;
    font-size: 16px; /* iOS の拡大防止 */
    line-height: 1.5;
}

.dl-input[aria-invalid="true"] {
    border-color: var(--dl-color-error);
}

.dl-input:focus-visible,
.dl-check-input:focus-visible,
.dl-btn:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--dl-color-main);
    outline-offset: 2px;
}

.dl-error {
    margin: .5em 0 0;
    color: var(--dl-color-error);
    font-size: var(--dl-fz-small);
    font-weight: bold;
}

.dl-agree-note {
    font-size: var(--dl-fz-small);
}

.dl-turnstile {
    margin-top: var(--dl-space);
}

.dl-actions {
    margin-top: var(--dl-space);
    text-align: center;
}

/*------------- ボタン -------------*/
.dl-btn {
    display: inline-block;
    box-sizing: border-box;
    width: min(100%, 20em);
    padding: 1em 2em;
    border-width: 1px;
    border-style: solid;
    border-color: var(--dl-color-main);
    border-radius: var(--dl-radius);
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    text-decoration-line: none;
    cursor: pointer;
    transition-property: opacity;
    transition-duration: .3s;
}

.dl-btn-primary {
    background-color: var(--dl-color-main);
    color: var(--dl-color-main-text);
}

.dl-btn-outline {
    background-color: transparent;
    color: var(--dl-color-main);
}

.dl-btn:hover {
    opacity: .8;
}

.dl-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.dl-link {
    overflow: visible;
    color: var(--dl-color-main);
    text-decoration-line: underline;
}

/*------------- 結果表示 -------------*/
.dl-summary {
    margin: 0;
}

.dl-summary-term {
    margin: 1em 0 0;
    color: var(--dl-color-sub);
    font-size: var(--dl-fz-small);
    font-weight: bold;
}

.dl-summary-term:first-child {
    margin-top: 0;
}

.dl-summary-desc {
    margin: .25em 0 0;
}

/*------------- パンくず -------------*/
.dl-pankuzu {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    box-sizing: border-box;
    max-width: var(--dl-max-w);
    margin: 1.5em auto 0;
    padding: 0 var(--dl-gutter);
    font-size: var(--dl-fz-small);
    list-style-type: none;
}

.dl-pankuzu-item {
    list-style-type: none;
}

.dl-pankuzu-item + .dl-pankuzu-item::before {
    content: '>';
    margin-right: .5em;
    color: var(--dl-color-sub);
}

.dl-pankuzu-link {
    color: var(--dl-color-main);
}