@charset "utf-8";

/* ----------------------------------------------------------
    リセット / 新要素設定
------------------------------------------------------------- */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, form, fieldset, legend, table, th, td, caption, a, article, aside, nav, section, figure, figcaption, footer, header, main, audio, canvas, video, menu, details {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 100%;
    vertical-align: baseline;
}
fieldset, legend, img { border: 0; }
article, aside, nav, section, figure, figcaption, footer, header, main, menu, details { display: block; }
[hidden] { display: none; }

html {
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
}

/* ----------------------------------------------------------
    ベース(モノトーン基調)
------------------------------------------------------------- */
body {
    background: #f2f2f2;
    color: #1a1a1a;
    font: 15px/1.7 -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, Meiryo, sans-serif;
    letter-spacing: .02em;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: #111;
}
p { margin: 0 0 1em; }
a { color: #111; }
a:link, a:visited { text-decoration: underline; }
a:hover, a:active { text-decoration: none; opacity: .6; }

table {
    border-collapse: collapse;
    border-spacing: 0;
}
th, td { font-weight: normal; text-align: left; }

/* ----------------------------------------------------------
    フォーム部品(モダン化)
------------------------------------------------------------- */
input, textarea, select {
    margin: 0;
    font-family: inherit;
    font-size: 16px; /* iOSズーム防止 */
}
input, button { line-height: normal; vertical-align: middle; }

input[type=text],
input[type=password],
input[type=email],
input[type=tel],
textarea,
select {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    background: #fafafa;
    color: #111;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=tel]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #111;
    background: #fff;
}

textarea {
    min-height: 140px;
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

input[type=checkbox], input[type=radio] {
    cursor: pointer;
    accent-color: #111;
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

input[type=submit],
input[type=button] {
    cursor: pointer;
    border: none;
}

input[type=submit]:disabled,
input[type=button]:disabled,
input[type=checkbox]:disabled { cursor: default; opacity: .4; }

label { cursor: pointer; }

/* ----------------------------------------------------------
    汎用ユーティリティ(元のまま)
------------------------------------------------------------- */
.m0 { margin: 0 !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.p10 { padding: 10px !important; }
.p20 { padding: 20px !important; }
.w100per { width: 100% !important; }
.fl { float: left !important; }
.fr { float: right !important; }
.tal { text-align: left !important; }
.tar { text-align: right !important; }
.tac { text-align: center !important; }
.breakAll { word-break: break-all !important; }
.dispN { display: none !important; }
.dispB { display: block !important; }
.dispF { display: flex !important; }
.fontBold { font-weight: bold !important; }
.clearfix:before, .clearfix:after,
.cf:before, .cf:after { content: " "; display: table; }
.clearfix:after, .cf:after { clear: both; }

.button_box {
    clear: both;
    padding: 8px;
    text-align: center;
}

.left_txt { text-align: left; }

#txt_explain {
    color: #555;
    font-size: 14px;
}

/* ----------------------------------------------------------
    メインコンテンツ(モノトーン・モダン)
------------------------------------------------------------- */
#wrapper {
    width: 100%;
    max-width: 680px;
    margin: 40px auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.06);
    overflow: hidden;
}

#header {
    padding: 32px 32px 16px;
}

.red_txt {
    color: #d00000;
    font-size: 13px;
    margin-top: 8px;
}

#footer {
    margin-top: 40px;
    padding: 20px;
    background: #111;
    color: #999;
    text-align: center;
    font-size: 12px;
    letter-spacing: .08em;
}

#main { padding: 8px 32px 32px; }

.section { margin-bottom: 32px; }
.section:last-child { margin-bottom: 0; }

.section__ttl {
    padding: 0 0 16px;
    margin-bottom: 24px;
    font-weight: 700;
    font-size: 20px;
    color: #111;
    border-bottom: 2px solid #111;
    letter-spacing: .03em;
}

.section__body { padding: 0; }

.block { margin-bottom: 15px; }
.block:last-child { margin-bottom: 0; }
.block__ttl {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

/* フォームテーブル:カード風の縦積みラベル+入力 */
.table {
    width: 100%;
    margin-bottom: 15px;
    border: none;
}
.table, .table tbody, .table tr, .table th, .table td {
    display: block;
    width: 100%;
}
.table tr {
    padding: 18px 0;
    border-bottom: 1px solid #eee;
}
.table tr:first-child { padding-top: 0; }
.table tr:last-child { border-bottom: none; padding-bottom: 0; }

.table th {
    background: none;
    color: #333;
    border: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #666;
    padding: 0 0 8px;
}

.table td {
    background: none;
    border: none;
    color: #111;
    font-size: 15px;
    padding: 0;
}

/* 送信ボタン */
/*
.button_box input[type=submit] {
    width: 100%;
    max-width: 320px;
    padding: 14px 20px;
    background: #111;
    color: #fff;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .05em;
    transition: background .15s ease, transform .1s ease;
}
.button_box input[type=submit]:hover {
    background: #333;
}
.button_box input[type=submit]:active {
    transform: scale(.98);
}
*/

.button_box {
    clear: both;
    padding: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.button_box input[type=submit] {
    flex: 0 1 200px;
    padding: 14px 20px;
    background: #111;
    color: #fff;
    border: 1px solid #111;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .05em;
    transition: background .15s ease, transform .1s ease;
}
.button_box input[type=submit]:hover {
    background: #333;
}
.button_box input[type=submit]:active {
    transform: scale(.98);
}

/* 「戻る」ボタンだけ控えめな見た目に(value属性で判定) */
.button_box input[type=submit][value="戻る"] {
    background: #fff;
    color: #111;
}
.button_box input[type=submit][value="戻る"]:hover {
    background: #f2f2f2;
}

.button_box a {
    color: #666;
    font-size: 13px;
    text-decoration: none;
}
.button_box a:hover { color: #111; text-decoration: underline; }

/* ----------------------------------------------------------
    スマホ対応(さらに詰める)
------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    #wrapper {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    #header { padding: 24px 20px 12px; }
    #main { padding: 4px 20px 24px; }
    .section__ttl { font-size: 18px; }
}