@charset "UTF-8";
/* =====================
  article1
===================== */
main .article[data-id="1"]{
    padding-top: 40px;
    padding-bottom: 40px;

}
main .article[data-id="1"] .inner{
    padding-left: 0;
    padding-right: 0;
}

/* ==== STEP ==== */
main .article[data-id="1"] .unit[data-id="1"]{
    display: flex;
    justify-content: center;
    background: linear-gradient(
        to bottom,
        #fff    0%,
        #fff    20%,
        #bdbdbd calc(20% + 1%),
        #bdbdbd 80%,
        #fff    calc(80% + 1%),
        #fff    100%
    );
}
main .article[data-id="1"] .unit[data-id="1"] .item{
    background: var(--doublegrey);
    color: var(--boldgrey);
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 50%;
    margin: 0 38px;
}
main .article[data-id="1"] .unit[data-id="1"] .item.on{
    background: var(--blue);
    color: var(--white);
    font-weight: bold;
}
/* 見出し */
main .article[data-id="1"] h1{
    margin-top: 60px;
}
main .article[data-id="1"] p{
    margin-top: 3em;
    text-align: center;
}

/* =====================
  article2
===================== */
main .article[data-id="2"] {
    margin-top: 1em;
}

/* ==== unit1 ==== */
main .article[data-id="2"] .unit[data-id="1"]{
    padding: 0 50px 60px;
}

/* ==== item1 ==== */
main .article[data-id="2"] .unit[data-id="1"] .item[data-id="1"]{
    font-size: 15px;
    margin-top: 0.5em;
}
main .article[data-id="2"] .unit[data-id="1"] .item[data-id="1"] .anchor + .anchor{
    margin-top: 0.25em;
}
main .article[data-id="2"] .unit[data-id="1"] .item[data-id="1"] a{
    color: var(--blue);
    text-decoration: underline;
}

/* =====================
  確認画面
===================== */
.contact_confirm-contents main .article[data-id="2"]{
    padding-bottom: 80px;
}
.contact_confirm-contents main .u-table .table-wrapper[data-setborderbottom="true"]{
    border-bottom: 1px solid #acacac;
    padding-bottom: 60px;
}

/* =====================
  完了画面
===================== */
/* articl2 */
.contact_complete-contents main .article[data-id="2"]{
    margin-top: 3em;
}
.contact_complete-contents main .article[data-id="2"] p{
    text-align: center;
    margin-top: 1em;
}
.contact_complete-contents main .article[data-id="3"] p + p{
    margin-top: 0;
}
/* articl3 */
.contact_complete-contents main .article[data-id="3"]{
    padding-bottom: 120px;
}
.contact_complete-contents main .article[data-id="3"]{
    margin-top: 5em;
}
.contact_complete-contents main .article[data-id="3"] p{
    text-align: center;
    margin-top: 1em;
}
.contact_complete-contents main .article[data-id="3"] .anchor{
    margin-top: 3em;
}
.contact_complete-contents main .article[data-id="3"] .anchor a{
    max-width: 490px;
    border-radius: 10px;
    position: relative;
    font-size: 25px;
    padding: 24px 70px;
    font-weight: bold;
    background: var(--pink);
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: var(--white);
    transition: all 250ms ease 0s;
    letter-spacing: 0.08em;
    box-shadow: 0px 7px 0px 0px rgb(151 0 31);
    text-align: center;
    overflow: hidden;
}
.contact_complete-contents main .article[data-id="3"] .anchor a:hover{
    transform: translateY(7px);
    box-shadow: 0px 0px 0px 0px rgb(151 0 31 / 0%);
}
.contact_complete-contents main .article[data-id="3"] .anchor a::before{
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    border-top: 3px solid var(--white);
    border-right: 3px solid var(--white);
    position: absolute;
    top: calc(50% + 4px);
    transform: translateY(-50%) rotate(45deg);
    right: 25px;
}
.contact_complete-contents main .article[data-id="3"] .anchor a::after {
    content: '';
    display: block;
    top: -180px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 780px;
    height: 238px;
    border-radius: 50%;
    background: #ffffff1a;
    pointer-events: none;
}

/* =====================
  メールアドレス確認用
===================== */
label[for="email_confirm"]{
    display: block;
}