/* CSS Remedy */
*,::after,::before{box-sizing:border-box}html{line-sizing:normal}body{margin:0}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.17rem}h4{font-size:1rem}h5{font-size:.83rem}h6{font-size:.67rem}h1{margin:.67em 0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle;max-width:100%}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}
h1,h2,h3,h4,p {margin:0;}
img {width:100%;height:auto;}
a {color: #0000ff;text-decoration: underline;}
a:visited, a:active {color:#0000ff;text-decoration: underline;}
a.link-bold {font-weight:700;}

body {
    margin: 0;
    background-color: #f0f0f0;
    font-family: 'Noto Sans JP', sans-serif, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    color: #000000;
    line-height: 1.5;
    font-feature-settings: 'palt' 1;
    letter-spacing: 0.03em;
}
.wrap-width {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
}
.form-main {
    min-height: 100vh;
    padding-bottom: 5%;
    background-color: #ffffff;
}
.main-title {
    padding: 5%;
    font-size: clamp(20px, 6vw, 30px);
    text-align: center;
    line-height: 1.3;
}
.steps-block {
    display: flex;
    align-items: center;
    margin: 0 5% 5%;
    background-color: #cccccc;
    border-radius: 5px;
    overflow: hidden;
    font-size: clamp(12px, 3.2vw, 16px);
    font-weight: 700;
    color: #ffffff;
}
.steps-step {
    width: 33.3%;
    padding: 2% 0;
    text-align: center;
    border-right: 2px solid #ffffff;
}
.steps-step.current {
    background-color: #e95506;
}
.steps-step:last-child {
    border-right: none;
}
.form-block, .form-confirm-result-block > div {
    margin: 0 5% 5%;
    padding: 2% 3%;
}
.form-title-block {
    border-left: 5px solid #d0d0d0;
}
.form-top-title {
    border-left: 5px solid #e95506;
    background-color: #f3f3f3;
}
.form-title {
    font-size: clamp(15px, 4vw, 20px);
}
.form-description {
    margin-top: 1%;
    font-size: clamp(10.5px, 2.8vw, 14px);
    color: #666666;
}
.form-item-title {
    font-size: clamp(12px, 3.2vw, 16px);
}
.form-item-text {
    font-size: clamp(12px, 3.2vw, 16px);
}
.form-complete-thanks {
    font-size: clamp(15px, 4vw, 20px);
}
.form-complete-text {
    margin-top: 5%;
    font-size: clamp(12px, 3.2vw, 16px);
    font-weight: 500;
}
input[type="text"], select {
    margin-top: 2%;
    font-size: clamp(12px, 3.2vw, 16px);
    padding: 2%;
    border: 1px solid #aaaaaa;
    border-radius: 5px;
}
input[type="text"]::placeholder {
    color: #aaaaaa;
}
input[type="text"]:focus, select:focus {
    background-color: #fffce3;
    outline: 1px solid #ffea52;
}
button.btn-zip {
    padding: 2% 3%;
    background-color: #4f4f4f;
    color: #ffffff;
    border-radius: 5px;
    border: none;
    font-size: clamp(9px, 2.4vw, 12px);
}
input[type="radio"] {
    inline-size: clamp(10px, 2.6vw, 13px);
    block-size: clamp(10px, 2.6vw, 13px);
    margin: 0 2% 0 0;
    accent-color: #1d9bf0;
}
input[type="text"].input-number {
    width: 50%;
}
input[type="text"].input-large {
    width: 100%;
}
.label-radio {
    font-size: clamp(12px, 3.2vw, 16px);
}
.radio-block {
    margin-top: 1%;
}
.radio-button-line, .radio-block label {
    display: inline-flex;
    align-items: baseline;
    margin-top: 3%;
    width: 100%;
}
.radio-block input:checked + div {
    color: #e95506;
}
.submit-button {
    display: block;
    margin: auto;
    font-size: 22px;
    font-size: clamp(16.5px, 4.4vw, 22px);
    padding: 3%;
    width: 80%;
    background-color: #e95506;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: background-color 400ms;
}
.submit-button:disabled {
    background-color: #cccccc;
}
a.submit-button:visited, a.submit-button:active {
    color: #ffffff;
    text-decoration: none;
}
.back-button {
    display: block;
    margin: 6% auto 0;
    padding: 3%;
    width: 80%;
    border: 1px solid #666666;
    background-color: #ffffff;
    font-size: clamp(12px, 3.2vw, 16px);
    color: #666666;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
}
a.back-button:visited, a.back-button:active {
    color: #666666;
    text-decoration: none;
}
.confirm-text {
    font-size: clamp(15px, 4vw, 20px);
}
.privacy-block {
    text-align: center;
}
.privacy-title {
    margin-bottom: 4%;
    font-size: clamp(13.5px, 3.6vw, 18px);
}
.privacy-link, .privacy-link:active, .privacy-link:visited {
    color: #000000;
    text-decoration: underline;
}

.privacy-checkbox-block {
    display: flex;
    align-items: center;
    width: 29%;
    margin: auto;
}
.privacy-checkbox {
    appearance: none;
    height: clamp(15px, 4vw, 20px);
    width: clamp(15px, 4vw, 20px);
    margin: 0 6% 0 0;
    border: 1px solid #666666;
    border-radius: 4px;
}
.privacy-checkbox:checked {
    border: 1px solid #1d9bf0;
    background-color: #1d9bf0;
}
.privacy-checkbox:checked::before {
    content: "";
    display: block;
    position: relative;
    left: 30%;
    top: 11%;
    width: 45%;
    height: 73%;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.privacy-checkbox:focus-visible {
    outline: 2px solid #1d9bf0;
    outline-offset: 2px;
}
footer {
    margin-top: 10% 0 5%;
    text-align: center;
    font-size: clamp(9px, 2.4vw, 12px);
}
.form-error {
    font-size: clamp(12px, 3.2vw, 16px);
    color: #ff0000;
}
.other-block {
    margin: 0 5%;
    padding: 2% 0%;
    text-align: right;
}
a.logout-link {
    color: #000000;
    text-decoration: underline;
    font-size: clamp(10.5px, 2.8vw, 14px);
}