@charset "utf-8";

:root {
--color-strong:#C00;
--color-blue :#0F92D3;
--color-light-blue:#ECF9FE;
--color-light-gray:rgba(0,0,0,.03);
--color-light-pink:rgba(238,46,43,.05);
--w-max:1049px;
--w-min:1050px;
}

/* inquiry-box */

.inquiry-box__parent {
margin: 0 0 3em;
}
.inquiry-box__parent:not(.part-read){
text-align: left;
line-height: 220%;
}
.head + .inquiry-box__parent.part-read {
margin: -3em 0 5em;
}
.inquiry-box__parent.part-form {
margin: 0 0 5em;
}

@media screen and (max-width:1049px){
.inquiry-box__parent.part-read .container {
margin: 0 1.5em;
padding: 1em 0 0;
}
}

/* inquiry-box children */

.inquiry-box__parent .catch {
font-size: 140%;
line-height: 220%;
margin: 0 0 1.5em;
}
.inquiry-box__parent h3 {
margin: 0 0 1em;
}
.inquiry-box__parent a {
color:var(--color-blue);
text-decoration: underline;
}
.inquiry-box__parent em {
color:var(--color-strong);
}
.inquiry-box__child-ssl {
padding: 1em 2em;
margin: 0 0 1em;
border:1px dotted;
}

@media screen and (max-width:1049px){
.inquiry-box__parent .catch + .attention {
text-align: left;
}
.inquiry-box__child-ssl {
padding: 1em;
margin: 0 1.5em 1em;
}
.inquiry-box__child-attention {
margin: 0 1.5em;
}
}

/* inquiry-box__item-attention */

.inquiry-box__item-attention {
font-size: 90%;
}
.inquiry-box__item-attention .title::before {
content:"※";
color:var(--color-strong);
}
.inquiry-box__item-attention ul.attention {
color:var(--color-strong);
padding: 0 0 0 .7em;
counter-reset: attention;
}
.inquiry-box__item-attention ul.attention > li {
display: flex;
align-items: center;
counter-increment: attention;
}
.inquiry-box__item-attention ul.attention > li::before {
content:counter(attention);
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
font-size: 90%;
color:#FFF;
background: var(--color-strong);
width: 1.3em;
height: 1.3em;
border-radius: 3em;
margin: 0 .3em 0 0;
}

@media screen and (max-width:1049px){
.inquiry-box__item-attention ul.attention {
padding: .7em 0 0 ;
}
.inquiry-box__item-attention ul.attention > li {
line-height: 160%;
margin: 0 0 .3em;
padding: 0 0 .3em;
border-bottom:1px dotted #555;
}
}

/* input-area */

.input-area {
padding: 4em 10%;
border-radius: 6px;
background: var(--color-light-gray);
}
.input-area .form-items,
.input-area .form-items input,
.input-area .form-items textarea,
.input-area .form-items select {
font-size: 1.6rem;
}
.input-area input,
.input-area textarea,
.input-area select {
padding: .7em;
border:1px solid #DDD;
border-radius: 4px;
background: #FFF;
}
.input-area input,
.input-area textarea {
width: 100%;
}
.input-area textarea {
height: 12em;
}
.input-area input.zip {
width: 10em;
margin: 0 .2em;
}
.input-area .controller {
text-align: center;
}
.input-area button {
display: inline-flex;
align-items: center;
}
.input-area button.main-btn {
font-size: 115%;
padding: .7em 3em;
margin: 0 .15em;
border-radius: 3em;
}
.input-area button.sub-btn {
padding: .8em 1.5em;
border-radius: 3em;
}
.input-area .box-grade {
color:#FFF;
}
.input-area .company {
display: none;
}

@media screen and (max-width:1049px){
.input-area input.zip {
width: 6em;
}
.input-area button.main-btn,
.input-area button.sub-btn {
padding: .7em 1em;
}
}

/* button with-mark */

button[class*="with-mark"]::before{
content:"";
display: block;
width: .9em;
height: .9em;
flex-shrink: 0;
margin: 0 .4em 0 0;
}
.box-grade.with-mark__check::before {
background: url("../img/mark-check.svg")center/100% auto no-repeat;
}
.box-grade.with-mark__send::before {
background: url("../img/mark-mail.svg")center/100% auto no-repeat;
}
.box-gray.with-mark__back::before {
background: url("../img/mark-back.svg")center/100% auto no-repeat;
}

/* write conf box */

.write-box,
.conf-box {
display: none;
}
.write-box.appear,
.conf-box.appear {
display: block;
}

/* form-items */

.form-items {
margin: 1em 0 2em;
}
.form-items > dt {
color:var(--color-blue);
}
.form-items > dt .child {
display: flex;
align-items: center;
}
.form-items > dt .child button {
flex-shrink: 0;
width: 20px;
height: 20px;
margin: 0 0 0 .5em;
background: var(--color-blue);
}
.form-items > dd {
position: relative;
}
.form-items  .dd-child:not(:last-of-type) {
margin: 0 0 .3em;
}
.form-items em {
font-size: 120%;
vertical-align: middle;
}

@media screen and (max-width:1049px){
.form-items > dt {
padding: 10px 0 0;
border-top:1px dotted var(--color-blue);
}
.form-items > dd {
padding: 10px 0;
}
}

@media all and (min-width:1050px){
.form-items {
display: grid;
grid-template-columns: 14em 1fr;
border-top:1px dotted var(--color-blue);
}
.form-items > * {
border-bottom:1px dotted var(--color-blue);
}
.form-items > dt {
padding: 15px 0;
}
.form-items > dd {
padding: 15px 0 15px 1em;
}
}

/* explain-box__input-can */

.explain-box__input-can {
width: 0;
height: 0;
padding: 0 0 0 18px;
margin: 0 0 0 -18px;
border-radius: 5px;
position: absolute;
top:-10px;
left: 0;
z-index: -1;
opacity: 0;
overflow: hidden;
}
.explain-box__input-can.appear {
animation: explain_appear .7s linear forwards;
}
.explain-box__input-can > .button {
display: block;
width: 24px;
height: 24px;
position: absolute;
top:5px;
right: 5px;
z-index: 999;
}
.form-items > dt .child button,
.explain-box__input-can .close-btn {
font-weight: 600;
color:#FFF;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2em;
}
.explain-box__input-can .close-btn {
font-size: 120%;
width: 100%;
height: 100%;
background: #000;
}

@keyframes explain_appear {
0% {
width: 0;
height: 0;
opacity: 0;
z-index: -1;
}
50% {
width: 100%;
height: auto;
opacity: 0;
z-index: -1;
}
100% {
width: 100%;
height: auto;
opacity: 1;
z-index: 9999;
}
}

@media screen and (max-width:1049px){
.explain-box__input-can {
padding: 0;
margin: 0;
top:0;
}
}

/* explain-box__child */

.explain-box__child {
font-size: 90%;
padding: 1em;
background: var(--color-light-blue);
border:3px solid #FFF;
position: relative;
}
.explain-box__child .title {
color:var(--color-blue);
}
.explain-box__child .items,
.explain-box__child .items-child{
display: flex;
flex-wrap: wrap;
}
.explain-box__child .items-child {
padding: 0 .7em 0 0;
margin: 0 0 .5em;
}
.explain-box__child .items-child::before {
content:"●";
color:var(--color-blue);
}
.explain-box__child .items-child__with-children {
width: 100%;
flex-shrink: 0;
}
.explain-box__child .attention {
padding: .5em 0;
color:var(--color-strong);
}
.explain-box__child .attention > li::before {
content:"・";
}

@media all and (min-width:1050px){
.explain-box__child::before,
.explain-box__child::after {
content:"";
display: block;
width: 0;
height: 0;
position: absolute;
}
.explain-box__child::before {
border-right:18px solid #FFF;
border-top:16px solid transparent;
border-bottom:16px solid transparent;
top:21px;
left: -19px;
z-index: -1;
}
.explain-box__child::after {
border-right:15px solid var(--color-light-blue);
border-top:12px solid transparent;
border-bottom:12px solid transparent;
top:25px;
left: -15px;
}
}

/* .explain-box__child address */

.explain-box__child.address .items > li {
padding: 0 0 0 1em;
}


/* error */

.input.error {
border:1px solid var(--color-strong)!important;
background: var(--color-light-pink)!important;
}
.form-items dd::before {
display: block;
font-size: 90%;
color:var(--color-strong);
margin: .3em 0 0;
}
.form-items dd.error101::before {
content:"必須項目を入力してください。";
}
.form-items dd.error102::before {
content:"使用できない文字の使用、形式と異なる書き方などの不具合があります。";
}
.form-items dd.category.error102::before {
content:"値が改ざんされた恐れがあります。";
}
.form-items dd.error103::before {
content:"「メールアドレス」と「メールアドレス（確認）」が一致していません。";
}


/* recaptchaArea */

.recaptcha-box {
text-align: center;
padding: 0 0 1.5em;
}

#recaptchaArea {
display: inline-block;
}


/* loading */

.loading {
display: flex;
justify-content: center;
align-items: center;
width: 0;
height: 0;
position: fixed;
top: 50%;
left: 50%;
z-index: -1;
opacity: 0;
transform: translate(-50%,-50%);
}
.loading.appear {
width: 100%;
height: 100%;
z-index: 999999999999;
opacity: 1;
background: rgba(255,255,255,.6);
}
.loading .mark {
display: block;
text-align: left;
width: 80px;
aspect-ratio:1/1;
background: url("../img/mark-loading.svg")center/100% auto no-repeat;
}
.loading.appear .mark {
animation: loading 2s linear infinite;
}

@keyframes loading {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}