@charset "UTF-8";

.form{ padding: 52px 0;}
.form article{ padding: 0 0 68px;}
.form form > h2{ margin: 2em 0 0; font-weight: 400; font-size: 18px;}
.form article h3{ margin: 2em 0 0; color: #f00; text-align: center; font-weight: 400; font-size: 18px;}
.form article .order th{ width: 300px;}
.form article .order th.sub{ width: 115px;}
.form article .order td{ width: auto;}
.form article .order select{ padding: .25em .5em;}
.form article .order input[type="text"],
.form article .order input[type="email"],
.form article .order input[type="tel"]{ padding: .25em .5em; width: 60%;}
.form article .order input[type="text"].datepicker{ width: 25%; cursor: pointer;}

td dt{ margin: 1em 0 0;}
td dd{ padding: .25em 0 0;}

.list1{ display: flex; margin: -.5em -.25em 0; flex-wrap: wrap;}
.list1 > li{ padding: .5em .25em 0; width: calc(100% / 3);}

.form article .order3{ line-height: 1.5;}
.form article .order3 thead th{ padding: .5em 0; width: 19%; text-align: center; line-height: 1.25;}
.form article .order3 thead tr > th:first-child{ padding: .5em; width: 5%;}
.form article .order3 tbody th{ padding: .5em; width: 5%; text-align: center; white-space: nowrap; letter-spacing: .1em; writing-mode: vertical-rl;}
.form article .order3 tbody th span{ writing-mode: vertical-rl;}
.form article .order3 tbody td{ width: 19%; vertical-align: top;}

.list2s{ padding: 0 0 2em;}
.list2 > li + li{ margin: .5em 0 0;}

.cb_label{ position: relative; display: block; cursor: pointer;}
.cb_label input{ position: absolute; opacity: 0;}
.cb_label span{ display: flex; padding: .5em; width: 100%; border: 1px solid #fff; background: #fff; color: #333; text-align: center; font-size: 90%; line-height: 1.5; justify-content: center;}
.cb_label:hover input ~ span,
.cb_label input:focus ~ span{ border: 1px solid #b28c39; color: #b28c39;}
.cb_label input:checked ~ span{ border: 1px solid #b28c39; color: #b28c39;}
.cb_label:hover input:not([disabled]):checked ~ span,
.cb_label input:checked:focus ~ span{ border: 1px solid #b28c39; color: #b28c39;}

@media screen and (max-width: 768px){

    /* --------------------------------------------------
     common
    --------------------------------------------------- */
    body{ min-width: 0;}
    .pc{ display: none;}
    .sp{ display: block;}

    /* --------------------------------------------------
     form
    --------------------------------------------------- */
    .form{ padding: 15px;}
    .form article{ margin: 0; padding: 0 0 40px; width: 100%; background: url("/sp/img/blt.gif") no-repeat bottom center / contain;}
    .form article header{ padding: 45px 0 15px; height: auto; background: url("/sp/img/blt.gif") no-repeat top center / contain;}
    .form article header h1{ display: block; color: #b28c39; text-align: center; letter-spacing: .15em; font-size: 20px; font-family: "Noto Serif JP", serif; line-height: 1.5;}
    .form article header .lead2{ margin: 30px -15px 0; padding: 30px 15px; background: #f1ede6; text-align: center; font-size: 12px; line-height: 1.5;}
    .form article header .lead2 .list{ display: inline-block; margin: 0 0 0 1.5em; line-height: 1.5;}
    .form article header .lead2 .list > li{ list-style: disc; text-align: left;}
    .form article header .lead2 .list > li + li{ margin: .5em 0 0;}
    .form .fin{ margin: 30px 0 0; padding: 15px 0; border: 1px solid; color: #f00; text-align: center; font-size: 14px; line-height: 1.75;}
    .form article .note{ margin: 15px 0 0;}
    .form form > h2{ margin: 2em 0 0; font-size: 14px;}
    .form article h3{ text-align: center; font-size: 14px;}

    .form article table{ margin: 30px 0 0; width: 100%; border: 1px solid #e0c898; border-collapse: collapse; border-top: none; font-size: 12px; line-height: 1.75;}
    .form article table:first-child,
    .form article h2 + table{ margin: 15px 0 0;}
    .form article table th{ display: block; padding: 1em; width: 100%; border: none; border-collapse: collapse; border-top: 1px solid #e0c898; background: #f1ede6; text-align: left; font-weight: normal;}
    .form article table td{ display: block; padding: 1em; width: 100%; border: none; border-collapse: collapse;}
    .form article table td div{ padding: 0 0 1em;}

    .form article .order{ border-top: 1px solid #e0c898;}
    .form article .order th{ padding: .5em 1em; width: 100%; border-top: none;}
    .form article .order th.sub{ display: flex; width: 25%; align-items: center;}
    .form article .order td{ padding: 1em; width: 100%; vertical-align: middle;}
    .form article .order th.sub + td{ display: table-cell; width: 75%;}
    .form article .order .size{ padding: 0 15px 15px;}
    .form article .order a{ color: #b28c39; text-decoration: underline;}
    .form article .order a:hover{ text-decoration: none;}
    .form article .order input[type="text"],
    .form article .order input[type="email"],
    .form article .order input[type="tel"]{ width: 100%;}
    .form article .order input[type="radio"]{ vertical-align: text-bottom;}
    .form article .order input[type="text"].datepicker{ width: 100%; cursor: pointer;}
    .form article .order input.short{ width: 25%;}
    .form article .order input.short2{ width: 15%;}
    .form article .order input[type="text"].md{ display: block; margin: .5em 0 0;}
    .form article .order input.long{ width: 60%;}
    .form article .order select{ display: inline-block;}
    .form article .order select.long{ display: block; width: 100%;}
    .form article .order select.md{ display: inline; width: 25%;}
    .form article .order td label{ display: flex; width: 100%; align-items: center; flex-wrap: wrap;}
    .form article .order td .ex{display: block; margin: .5em 0 0; }
    .form article .order td .exp{ margin: .5em 0 0;}
    .form article .order2{ border-bottom: none;}
    .form article .order2 tr{ display: flex; flex-wrap: wrap;}
    .form article .order2 tr th{ width: 100%; border-bottom: 1px solid #e0c898;}
    .form article .order2 tr td{ padding: 1em; width: 100%; border-bottom: 1px solid #e0c898;}
    .form article .order2 tr td + td{ padding: 1em; width: 60%; border-left: 1px solid #e0c898;}
    .form article .order2 tr td > select{ display: block; margin: 0; width: 100%;}
    .form article textarea{ box-sizing: border-box; padding: 10px; width: 100%; line-height: 1.5;}
    
    .form article .agree{ margin: 30px 0 0; padding: 0; border: none; border-collapse: collapse; font-size: 12px; line-height: 1.75;}
    .form article .agree h2{ font-size: 12px;}
    .form article .agree p{ margin: 1em 0 0; font-size: 12px;}
    .form article .agree ul{ margin: 0 0 0 1.5em;}
    .form article .agree li{ list-style: disc;}
    .form article .agree table{ border: 1px solid #e0c898; border-top: none;}
    
    .form article .submit{ display: flex; margin: 15px 0 0; text-align: center; justify-content: space-between;}
    .form article button{ display: flex; width: 48%; height: 40px; border: none; background: #b28c39; color: #fff; font-size: 12px; line-height: 1; justify-content: center; align-items: center;}
    .form article button:hover,
    .form article button:active{ background: #fff; color: #b28c39;}

    .form article .thanks{ margin: 30px 0 0; text-align: center;}
    .form article .thanks h2{ padding: 0 0 1em; text-align: center; font-weight: 600; font-size: 16px;}
    .form article .thanks p{ margin: 1em 0 0; text-align: left; font-size: 12px; line-height: 1.75;}
    .form article .thanks .btn{ margin: 30px auto 0; text-align: center;}
    .form article .thanks .btn a{ display: flex; margin: 0 auto; width: 48%; height: 40px; background: #b28c39; color: #fff; font-size: 12px; line-height: 1; justify-content: center; align-items: center;}
    
    .list1{ flex-direction: column; margin: 0;}
    .list1 > li{ padding: 0; width: 100%;}
    .list1 > li + li{ margin: .5em 0 0;}

    .form article .order3{ margin: 0; line-height: 1.5;}
    .form article .order3 th{ display: table-cell; padding: .5em; width: auto;}
    .form article .order3 td{ display: table-cell; width: auto;}
    .form article .order3 thead th{ padding: .5em; width: auto; height: auto; border: 1px solid #e0c898; text-align: center; white-space: nowrap; line-height: 1.5;}
    .form article .order3 thead tr > th:first-child{ padding: .5em; width: auto;}
    .form article .order3 tbody th{ padding: 1em; width: auto; border: 1px solid #e0c898; text-align: left; letter-spacing: .1em; writing-mode: vertical-rl;}
    .form article .order3 tbody td{ width: auto; border: 1px solid #e0c898; vertical-align: top;}
    
    .wrap-table{ overflow-x: scroll; -webkit-overflow-scrolling: touch; margin: 15px 0 0;}
    .form article .wrap-table table:first-child{ margin: 0;}
    .wrap-table::-webkit-scrollbar{ height: 6px;}
    .wrap-table::-webkit-scrollbar-thumb{ border-radius: 3px; background: #777;}
    .wrap-table::-webkit-scrollbar-track{ background: #ddd;}
    .sticky{ position: sticky; left: 0; z-index: 10;white-space: nowrap; }
    .sticky:before{ position: absolute; top: 0; left: -1px; width: calc(100% + 2px); height: 100%; border-right: 1px solid #e0c898; border-left: 1px solid #e0c898; content: "";}

    .list2s{ padding: 0 0 1.5em;}
    .list2 > li + li{ margin: .5em 0 0;}
    
    .cb_label span{ padding: .5em 1em; white-space: nowrap; font-size: 90%;}
}