/* フォーム  初期設定 /////////////////////*/
input, textarea, select {
border: 0;
padding: 5px;
width: 100%;
font-size: 16px;
line-height: 1.3rem;
height: 2.5rem;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: #F6F6F6;
border: 2px #E6E6E6 solid;
outline: none;
}
input:-moz-read-only {
background: #FFF;
border: 2px #F6F6F6 solid;
}
input:read-only {
background: #FFF;
border: 2px #F6F6F6 solid;
}
/*
.sup{
input, textarea, 
select, .radio-text:before, .checkbox-text:before,{
border:2px @pink4 solid;
}
}
*/

/* フォーカス //////////////////*/
input:focus, textarea:focus, .select select:focus, input:hover, textarea:hover, .select select:hover {
outline: 0;
border: 2px #007CFD solid;
}
input:-moz-read-only::focus {
outline: 0;
border: 2px #F6F6F6 solid !important;
}
input:read-only::focus {
outline: 0;
border: 2px #F6F6F6 solid !important;
}
/*
.sup{
input:focus, textarea:focus, .select select:focus, input:hover, textarea:hover, .select select:hover{
outline: 0;
border:2px @focus solid;
}
}
*/

/* ラジオボタン //////////////////*/
.radio input {
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
        clip-path: inset(50%);
margin: -1px;
}

.radio-text {
cursor: pointer;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
padding: 5px 0 0 0;
}

.radio-text:before {
content: "";
display: inline-block;
width: 1.6em;
height: 1.6em;
border: 2px solid #ccc;
border-radius: 50%;
margin-right: 6px;
-ms-flex-negative: 0;
    flex-shrink: 0;
background: #F6F6F6;
}

.radio input:hover + .radio-text:before {
border: 2px solid #007CFD;
}

.radio input:checked + .radio-text:before {
border: 0.6rem solid #007CFD;
}

.radio input:focus-visible + .radio-text {
background: -webkit-gradient(linear, left top, left bottom, color-stop(90%, transparent), color-stop(90%, rgba(33, 150, 243, 0.3)));
background: linear-gradient(transparent 90%, rgba(33, 150, 243, 0.3) 90%);
}

/* チェックボックス //////////////////*/
.checkbox input {
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
        clip-path: inset(50%);
margin: -1px;
}

.checkbox label {
display: block;
}

.checkbox-text {
cursor: pointer;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
position: relative;
padding: 0;
line-height: 1.3rem;
}

.checkbox-text:before {
content: "";
display: inline-block;
width: 1.6rem;
height: 1.6rem;
border: 2px #CCC solid;
border-radius: 3px;
margin-right: 6px;
-ms-flex-negative: 0;
    flex-shrink: 0;
background: #F6F6F6;
}

.checkbox input:hover + .checkbox-text:before {
border: 2px solid #007CFD;
}

.checkbox input:checked + .checkbox-text:before {
border: 2px solid #007CFD;
background-color: #007CFD;
}

.checkbox input:checked + .checkbox-text:after {
content: "";
position: absolute;
border: solid #FFF;
border-width: 0 2px 2px 0;
left: 0.5rem;
top: -5px;
bottom: 0;
margin: auto;
width: 0.6rem;
height: 1rem;
-webkit-transform: translateY(-1px) rotate(45deg);
        transform: translateY(-1px) rotate(45deg);
}

.checkbox input:focus-visible + .checkbox-text {
background: -webkit-gradient(linear, left top, left bottom, color-stop(90%, transparent), color-stop(90%, rgba(33, 150, 243, 0.3)));
background: linear-gradient(transparent 90%, rgba(33, 150, 243, 0.3) 90%);
}


/* セレクトメニュー //////////////////*/
.select {
position: relative;
}

.select select {
cursor: pointer;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
padding: 10px 0 10px 15px;
}

.select:before {
content: "";
position: absolute;
z-index: 2;
top: -4px;
bottom: 0;
margin: auto;
right: 17px;
width: 10px;
height: 10px;
border-top: 2px solid #333;
border-right: 2px solid #333;
-webkit-transform: rotate(135deg);
        transform: rotate(135deg);
pointer-events: none;
background: #F6F6F6;
}

.select:after {
content: "";
position: absolute;
z-index: 1;
top: 5px;
bottom: 0;
right: 2px;
pointer-events: none;
height: 2rem;
aspect-ratio: 1;
background: #F6F6F6;
border-radius: 0 50% 50% 0;
-moz-border-radius: 0 50% 50% 0;
-webkit-border-radius: 0 50% 50% 0;
}

.select select::-ms-expand {
display: none;
}

.sup .select:before {
background: #F6F6F6;
}

.sup .select:after {
background: #F6F6F6;
}

/* レンジスライダー //////////////////*/
input[type=range] {
border: 0;
width: 100%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: #E6E6E6;
outline: none;
cursor: pointer;
height: 6px;
border-radius: 6px;
}


/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 1.3rem;
width: 1.3rem;
background-color: #007CFD;
border-radius: 50%;
}


/* Thumb: Firefox */
input[type=range]::-moz-range-thumb {
border: none;
height: 1.3rem;
width: 1.3rem;
background-color: #007CFD;
border-radius: 50%;
}

/* .password #look ///////////////////////*/
.password {
position: relative;
}

.password #look {
position: absolute;
width: 35px;
height: 25px;
right: 2px;
top: 0.5rem;
background: url(/image/icon/look-off.svg) no-repeat 50% 50%;
background-color: #F6F6F6;
background-size: contain;
}

.password .on {
background: url(/image/icon/look-off.svg) no-repeat 50% 50% !important;
background-color: #F6F6F6 !important;
background-size: contain;
}

.password .off {
background: url(/image/icon/look.svg) no-repeat 50% 50% !important;
background-color: #F6F6F6 !important;
background-size: contain;
}


/* フォーム  デザイン設定 ///////////////////////*/
textarea {
height: 10rem !important;
line-height: 1.5rem;
}

.nw textarea {
height: 5rem !important;
}

.short {
height: 5rem !important;
}

.long {
height: 20rem !important;
}

.nw input[type=text], .nw input[type=email], .nw textarea {
width: 49%;
margin-right: 2%;
}

.nw input[type=radio] {
margin: 0 5px;
}
::-webkit-input-placeholder {
color: #999;
}
::-moz-placeholder {
color: #999;
}
:-ms-input-placeholder {
color: #999;
}
::-ms-input-placeholder {
color: #999;
}
::placeholder {
color: #999;
}
label {
cursor: pointer;
}
label input[type=radio], label checkbox {
margin: 2px 5px 0 0;
}

.disabled input, .disabled textarea, .disabled select {
background: #FEFEFE !important;
-webkit-box-shadow: 0 0 0 2px #ffffff inset;
box-shadow: 0 0 0 2px #ffffff inset;
}


/* sup 必須マーク //////////////////////// */
form sup {
position: relative;
top: -5px;
color: #BF6565;
}


/* form small //////////////////////// */
form .table1 small {
display: block;
padding: 0 0 0.5rem 0;
}


/* red 入力エラー class="red" ///////////////////////*/
.red textarea, .red input, .red select, .red .checkbox-text:before, .red .radio-text:before {
outline: 0;
border: 2px #BF6565 solid;
}

.red small {
color: #BF6565;
}

.red .nw small {
width: 50%;
display: inline-block;
}


/* error エラー画面 ///////////////////////*/
.error {
/* 報告ボタン*/
}

.error small {
color: #BF6565;
max-width: 470px;
margin: 0 auto;
}

.error a {
display: block;
max-width: 470px;
margin: 1rem auto 0 auto;
border: 2px #BF6565 solid;
padding: 0.75rem;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.error a p {
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
color: #BF6565;
}


/* code コード入力画面 ///////////////////////*/
.code .box {
margin: 0 !important;
}

.code h4 p {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
padding: 0 0 1rem 0;
}

.code table {
width: 100%;
}


/* form code erro completer key 画面共通 ///////////////////////*/
.form .text,
.code .text,
.error .text,
.complete .text
.key .text {
padding: 1rem 0 2rem 0;
}

.form .text em,
.code .text em,
.error .text em, 
.complete .text em, 
.key .text em {
display: block;
text-align: center;
padding: 0 0 0.5rem 0;
}

.form .text em, 
.code .text em, 
.error .text em, 
.complete .text em, 
.key .text em, 
.form .text em span, 
.code .text em span, 
.error .text em span, 
.complete .text em span,
 .key .text em span {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
line-height: 1.6rem;
}

.form .image, 
.code .image, 
.error .image, 
.complete 
.image, 
.key .image {
margin: 0 auto;
max-width: 200px;
width: 60%;
padding: 0 0 2rem 0;
}

.form .box, 
.code .box, 
.error .box, 
.complete .box, 
.key .box {
text-align: center;
border: 2px #EDDAD3 solid;
padding: 1rem;
margin: 0 0 1rem 0;
}

.form .price, 
.code .price, 
.error .price, 
.complete .price, 
.key .price {
font-size: 1.75rem;
line-height: 1.75rem;
}

.form .price s, 
.code .price s, 
.error .price s, 
.complete .price s, 
.key .price s {
text-decoration: line-through;
}

.form .value_one, 
.code .value_one, 
.error .value_one, 
.complete .value_one, 
.key .value_one {
padding: 0.75rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.form .value_one span, 
.code .value_one span, 
.error .value_one span, 
.complete .value_one span, 
.key .value_one span {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
width: 10px;
}