@charset "UTF-8";
/* ######################################################################################

　フォーム　パーツ

###################################################################################### */

.commentOut {display: none !important;}
.redText {color: #DC0000;}

/* ====================================================
パンくず非表示
==================================================== */
@media screen and (max-width: 767px) {
    .pageVolunteer.entry .topicPath,
    .pageVolunteer.confirm .topicPath,
    .pageVolunteer.thanks .topicPath{display: none;}

}



/* ====================================================
button
==================================================== */
.button.white{background: #fff;}
.pageVolunteer .button.green,
.pageVolunteer .button.white{
    font-size: 1.6rem;
    font-family: Arial,"游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino kaku Gothic ProN", "メイリオ", sans-serif;
}


/* ====================================================
file
==================================================== */
label.inputButton {
    display:flex;
    border:1px solid #babed1;
    border-radius:0.25em;
    align-items:center;
    align-content:center;
    line-height:1;
    font-size: 1.4rem;
    margin-bottom:2em;
}
label.inputButton:after{
    content:"ファイルを選択";
    padding:1em;
    background:#f6f6f6;
    width:11em;
    margin-left:auto;
    border:none;
    border-radius:0 0.25em 0.25em 0;
    border-left:1px solid #babed1;
    order:3;
    cursor:pointer;
    transition:background 0.5s ease;
    white-space: nowrap;
}
label.inputButton:hover:after {background:#ccc;}
label.inputButton input[type="file"]::file-selector-button { display:none;}

label.inputButton span {order:1; display:none;}
label.inputButton input[type="file"] {
    order:2;
    display:flex;
    align-content:center;
    align-items:center;
    border-radius:0.25em 0 0 0.25em;
    white-space:nowrap;
    min-width:20em;
    font-size:100%;
    padding:0 1em;
    color:#444;

}
label.inputButton input[type="file"]::placeholder {color:#babed1;}
@media screen and (max-width: 767px) {
  label.inputButton input[type="file"]{min-width:14em;}
}
/* ====================================================
greenBgTitle
==================================================== */
.greenBgTitle.large{padding: 0.7em 0.6em;}
@media print, screen and (min-width: 768px) {
    .greenBgTitle.large{font-size: 1.8rem;}
    * + .greenBgTitle.large{margin-top: 30px; margin-bottom: 10px; }
}
@media screen and (max-width: 767px) {
}


/* ====================================================
titleLeftLine
==================================================== */
.titleLeftLine {
    margin-bottom: 1.25em;
    position: relative;
    color: #009944;
}
.titleLeftLine span {
    position: relative;
    display: inline-block;
    padding-left: 0.75em;
    border-left: 3px solid #009935;
    border-left-style: solid;
    text-decoration:none;
}

@media print, screen and (min-width: 768px) {
	.titleLeftLine{font-size: 2.0rem;}
    * + .titleLeftLine{margin-top: 75px;}
}
@media screen and (max-width: 767px) {
	.titleLeftLine{font-size: 1.8rem;}
	.titleLeftLine em{display: block; margin-top: 0.25em; margin-left: 1.4em;}
    * + .titleLeftLine{margin-top: 60px;}
}




/* ====================================================
radioButtonList
==================================================== */
.radioButtonList{align-items: center;}
.radioButtonList + *{margin-top: 1em;}
.radioButtonList input[type="radio"] + label, .radioButtonList input[type="radio"] + span{display: inline-block;}
.radioButtonList input[type="radio"] + label:before, .radioButtonList input[type="radio"] + span:before{
    width: 26px;
    height: 26px;
}
.radioButtonList input[type="radio"] + label:after, .radioButtonList input[type="radio"] + span:after{
    width: 14px;
    height: 14px;
}
.radioButtonList input[type="radio"]:checked + label:before, .radioButtonList input[type="radio"]:checked + span:before{border-color: #0060C1;}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
    .radioButtonList.spVertical{flex-direction: column;}
    .radioButtonList.spVertical .radioButtonList__item{width: 100%; margin-right: 0;}
    .radioButtonList.spVertical .radioButtonList__item + .radioButtonList__item{margin-top: 0.75em;}
}

/* radioボタンと入力枠の横並び */
@media print, screen and (min-width: 768px) {
    .radioButtonWarp .radioButtonList + .radioButtonList{margin-top: 0; margin-left: 30px;}
    .radioButtonWarp{display: flex;}
    .radioButtonWarp .radioButtonList{display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center;}
    .radioButtonWarp .radioButtonList__item {
        padding-top: 0.6em;
        height: 100%;
        min-height: 0%;
        width: 100%;
        margin: 0;
        display: flex;
        align-items: flex-start;
    }
    .radioButtonWarp .radioButtonList__item + .radioButtonList__item{margin-top: 1em;}
    .radioButtonWarp .radioButtonList__item label{padding-bottom: 0.25em;}
    .radioButtonWarp .radioButtonList.text .radioButtonList__item{padding-top: 0;}
}
@media screen and (max-width: 767px) {
    .radioButtonWarp .radioButtonList__item{width: 100%;}
    .radioButtonWarp .radioButtonList__item.empty{display: none;}
    .radioButtonWarp .radioButtonList.text{margin-top: 0;}
}

/*確認画面*/
.pageVolunteer.confirm .radioButtonList{align-items: flex-start;}

/* ====================================================
checkButtonList
==================================================== */
.checkButtonList__item{margin-bottom: 1em;}
.radioButtonList input[type="checkbox"] + label, .radioButtonList input[type="checkbox"] + span{display: inline-block;}
.checkButtonList input[type="checkbox"]:checked + label:after, .checkButtonList input[type="checkbox"]:checked + span:after {
    content: "";
    left: 1px;
    background: url(../img/contents/share/ico-check.svg) center no-repeat;
    background-size: 60%;
    background-color: #004BB1;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    border: 1px solid #004BB1;
}
.checkButtonList__item .small{font-size: 1.3rem;}

@media print, screen and (min-width: 768px) {
    .checkButtonList__item{padding-top: 0.25em; margin-right: 3em;}
}
@media screen and (max-width: 767px) {
}


.checkButtonList input[type="checkbox"] + label:before,
.checkButtonList input[type="checkbox"] + label:after,
.checkButtonList input[type="checkbox"] + span:before,
.checkButtonList input[type="checkbox"] + span:after{
    top: -0.1em;
    transform: none;
}



/* vertical
-------------------------------------*/
.checkButtonList.vertical{flex-direction: column;}
.checkButtonList.vertical .checkButtonList__item{padding-top: 0; margin-bottom: 0.25em; margin-right: 0;}
.checkButtonList.vertical .checkButtonList__item label{padding-top: 0.35em; padding-bottom: 0.35em;}
.checkButtonList.vertical label{display: inline-block; width: 100%;}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}

/* disabled
-------------------------------------*/
form .disabled{
    position: relative;
    pointer-events: none;
    background: #F8F8F8;
    color: #BABED1;
    display: inline-block;
}
form .disabled input[type="text"],
form .disabled input[type="radio"] + span:before,
form .disabled input[type="checkbox"] + span:before,
form .disabled textarea,
form .disabled select,
form .select.disabled select{
    background: #F8F8F8;
}
form .select.disabled{
    display: inline;
}

.formItem input[type="text"] + input[type="text"],
.formItem input[type="email"] + input[type="email"],
.formItem input[type="email"] + div.input {margin-top: 1em;}


.memberBox {display: none;}
.memberBox.active {display: block;}
@media print, screen and (min-width: 768px) {
    .memberBox {margin-top: 75px;}
}
@media screen and (max-width: 767px) {
    .memberBox {margin-top: 60px;}
}


/* ====================================================
formProcess
==================================================== */
.formProcess__text{font-size: 1.4rem; color: #CC0000;}

@media print, screen and (min-width: 768px) {
    .pageRunner .main .formProcess__text,
    .formProcess__text {margin-bottom: 1.5em;}
    .formProcess + *{margin-top: 60px;}
}
@media screen and (max-width: 767px) {
    .pageRunner .main .formProcess__text,
    .formProcess__text {margin-bottom: 1.5em;}
    .formProcess + *{margin-top: 40px;}
}

/* ====================================================
フォームレイアウト
==================================================== */
/* formItem
-------------------------------------*/
.formItemWarp{border-top: 1px solid #CDD6DD;}
.formItem{border-bottom: 1px solid #CDD6DD;}
.formItem.noBd{border-bottom: none;}
.formItem__title{font-weight: bold; display: block; font-size: 1.6rem; line-height: 1.625;}
.formItem__title .small{font-size: 1.3rem;}
.formItem__parts{font-size: 1.5rem;}

@media print, screen and (min-width: 768px) {
    .formItemWarp{padding-top: 20px;}
    .formItem{padding-bottom: 20px; margin-bottom: 20px; display: flex; justify-content: space-between;}
    .formItem__title{width: 180px; padding-top: 0.5em;}
    .formItem__title.pt0{padding-top: 0;}
    .formItem__title__guide{float: right; font-size: 1.3rem;}
    .formItem__parts{width: calc(100% - 200px);}
}
@media screen and (max-width: 767px) {
    .formItemWarp{padding-top: 15px;}
    .formItem{padding-bottom: 15px; margin-bottom: 15px;}
    .formItem__title,
    .formItem__parts{width: 100%;}
    .formItem__title{margin-bottom: 0.5em;}
}

/*** 参加希望日 ***/
.formItem__parts .flex {display: flex;}
.formItem__parts .items.period {padding-left: 1.5em;}
.formItem__parts .items.period .item {
    min-height: 37.5px;
    margin-bottom: 0.25em;
    padding-top: 5px;
}
.formItem__parts .items.period .item.gray span:not(.redText) {
    display: inline-block;
    background: #F8F8F8;
    color: #BABED1;
}

/*** 活動区分 ***/
.formItem__parts .items.activity {padding-left: 1.5em;}
.pageVolunteer.confirm .formItem__parts .items.activity {display: none;}
.formItem__parts .items.activity .item {
    min-height: 30.5px;
    margin-bottom: 0.25em;
}


.pageVolunteer.confirm .formItem__parts .flex {display: block;}
.pageVolunteer.confirm .formItem__parts .items.period,
.pageVolunteer.confirm .formItem__parts .items.period .item {min-width: none; height: 0; overflow: hidden;}



/* 縦並びリスト
-------------------------------------*/
.formVerticalList__item + .formVerticalList__item{margin-top: 0.5em;}

/* 氏名
-------------------------------------*/
.nameInputList{max-width: 580px; display: flex; justify-content: space-between;}
.nameInputList__item{width: 48.27%;}
.nameInputList__item input{width: 100%;}

/* select　タイトル
-------------------------------------*/
.selectLable{margin-bottom: 0.25em; font-weight: bold; font-size: 1.5rem;}


/* memberArea 表示非表示
-------------------------------------*/
.memberArea{display: none;}
.memberArea.show {display: block;}


/* ====================================================
フォームサイズ
==================================================== */
@media print, screen and (min-width: 768px) {
    .input-size-ss{width: 4em;}
    .input-size-s{width: 180px;}
    .input-size-m{width: 280px;}
    .input-size-l{width: 580px;}

    .select.input-size-l,
    .select.input-size-l select{width: 580px;}
}
@media screen and (max-width: 767px) {
    .input-size-ss{width: 4em;}
    .input-size-s{width: 180px;}
    .input-size-m{width: 280px;}
    .input-size-l{width: 100%;}

    .select.input-size-l,
    .select.input-size-l select{width: 100%;}
}


.mw_wp_form .error{
    font-size: 1.5rem;
    font-weight: bold;
    color: #DC0000;
}
.mw_wp_form .error::before{
    content: "※";
}

/* ====================================================
必須
==================================================== */
.required{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 0;
    background: #DC0000;
    border-radius: 3px;
    padding: 0.5em;
    margin-left: 0.5em;
    line-height: 1;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
}

/* ====================================================
任意
==================================================== */
.optional{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 0;
    background: #BABED1;
    border-radius: 3px;
    padding: 0.5em;
    margin-left: 0.5em;
    line-height: 1;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
}



/* ====================================================
formInlineText
==================================================== */
@media print, screen and (min-width: 768px) {
    .formInlineText{display: inline-block; margin-left: 0.5em;}
}
@media screen and (max-width: 767px) {
    .formInlineText{display: block; margin-top: 0.25em;}
}


/* ====================================================
注意書き　formGuide
==================================================== */
.formGuide{margin-bottom: 0; font-size: 1.3rem; font-feature-settings: "palt";}
* + .formGuide{margin-top: 0.5em;}
.formGuide + *{margin-top: 0.5em;}

.formGuide.redBorder{
    padding: 1em 1.5em;
    border: 1px solid #CC0000;
    color: #CC0000;
    font-size: 1.4rem;
    line-height: 1.85;
}
.formGuide.redBorder + *{margin-top: 1.5em;}
.formItemWarp + .formGuide.redBorder{margin-top: 30px;}


/* ====================================================
注意書き　formAttention
==================================================== */
.formAttention p{margin-bottom: 2em; font-size: 1.4rem; line-height: 1.85; word-break: break-all;}
.formAttention .grayBgTitle{margin-bottom: 1.25em; font-size: 1.8rem;}
.formAttention a{color: #004BB1;}
@media print, screen and (min-width: 768px) {
    .formAttention{margin-top: 80px;}
}
@media screen and (max-width: 767px) {
    .formAttention{margin-top: 60px;}
}

/* ====================================================
同意ボタン
==================================================== */

.buttonBox.form .checkButtonList{justify-content: center; align-items: center; margin-bottom: 2em;}

/* ====================================================
フォームボタン
==================================================== */
.buttonBox.form ul{display: flex; justify-content: space-between; max-width: 480px; margin-left: auto; margin-right: auto;}
.buttonBox.form ul li{width: 47.8%;}
.buttonBox.form ul li .button{width: 100%; }

@media print, screen and (min-width: 768px) {
    .buttonBox.form{margin-top: 60px;}
    .buttonBox.form.narrow{margin-top: 30px;}
}
@media screen and (max-width: 767px) {
    .buttonBox.form{margin-top: 60px; margin-bottom: 60px;}
    .buttonBox.form.narrow{margin-top: 30px; margin-bottom: 30px;}
}


/* ====================================================
入力画面
==================================================== */
.formmailer.input .formGuide.confirm{display: none;}
.formmailer.input .buttonBox.form ul{justify-content: center;}
.formmailer.input .buttonBox .back{display: none;}

/* ====================================================
確認画面
==================================================== */
.formmailer.confirm .formGuide,
.formmailer.confirm .fontUsually,
.formmailer.confirm .inputOnly,
.formmailer.confirm label.select:after{display: none;}
.formmailer.confirm .formGuide.confirm{display: block;}
.formmailer.confirm .nameInputList{justify-content: flex-start;}
.formmailer.confirm .nameInputList__item{width: auto;}
.formmailer.confirm .selectLable{display: inline-block;}
.formmailer.confirm .radioButtonWarp{display: block;}
.formmailer.confirm .radioButtonWarp .radioButtonList__item.empty{display: none;}
.formmailer.confirm .radioButtonWarp .radioButtonList.text .radioButtonList__item{margin: 0;}

@media print, screen and (min-width: 768px) {
    .formmailer.confirm .formItem{padding-bottom: 15px; margin-bottom: 15px;}
    .formmailer.confirm .formItem.topBd{padding-top: 15px;}
    .formmailer.confirm .formItem__title{padding-top: 0; width: 200px;}
    .formmailer.confirm .formItem__parts{width: calc(100% - 230px);}
    .formmailer.confirm .formVerticalList.confirmHorizon .formVerticalList__item{display: inline-block; margin-top: 0;}
}
@media screen and (max-width: 767px) {
    .formmailer.confirm .formItem__title{}
    .formmailer.confirm .radioButtonWarp .radioButtonList__item br.sp{display: none;}
}



/* ====================================================
完了画面
==================================================== */
.formThanks__mailTitle{
    padding: 0.5em 1em;
    border: 1px solid #009944;
    color: #009944;
    font-weight: bold;
}
.mw_wp_form.mw_wp_form_send_error {
    margin-bottom: 2em;
    padding: 1.5em 0.5em;
    background: #FFE6E6;
    border: 3px solid #DD0404;
    text-align: center;
    color: #E01818;
    font-weight: bold;
}
.formThanks .boldTitle.red{
    color: #CC0000;
}

@media print, screen and (min-width: 768px) {
    .formThanks + *{margin-top: 90px;}
    .formThanks .boldTitle{margin-bottom: 1.5em; text-align: center; font-size: 2.6rem;}
    .formThanks p{text-align: center; margin-bottom: 2em; font-size: 1.6rem;}
    .formThanks .formThanks__mailTitle{font-size: 1.8rem;}
}
@media screen and (max-width: 767px) {
    .formThanks .boldTitle{margin-bottom: 1.5em; text-align: center; font-size: 2.0rem; line-height: 1.5;}
    .formThanks .boldTitle.spLeft{text-align: left;}
    .formThanks + *{margin-top: 60px;}
    .formThanks .formThanks__mailTitle{font-size: 1.6rem;}
}




/* ######################################################################################

　ボランティア参加申込フォーム　.pageVolunteer.provisional

###################################################################################### */
/* ====================================================
WEB(個人・グループ、ファミリー)申込みの手順
==================================================== */
/* stepList
-------------------------------------*/
.stepList__item{position: relative;}
.stepList__item__img{margin-bottom: 0.75em; text-align: center;}
.stepList__item__img img{max-width: 300px;}
.stepList__item__text{text-align: center; margin-bottom: 0; font-size: 1.6rem; font-weight: bold;}

@media print, screen and (min-width: 768px) {
    .stepList{margin-bottom: 45px; display: flex; justify-content: space-between;}
    .stepList__item{position: relative; width: 31.25%; width: calc(calc(100% - 60px) / 3);}
    .stepList__item + .stepList__item:before{
        content: "";
        position: absolute;
        top: 35%;
        left: -1.35em;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 7px 0 7px 14px;
        border-color: transparent transparent transparent #cc0000;
    }
}
@media screen and (max-width: 767px) {
    .stepList{margin-bottom: 60px;}
    .stepList__item{width: 100%;}
    .stepList__item + .stepList__item{margin-top: 50px;}
    .stepList__item + .stepList__item:before{
        content: "";
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-25%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 14px 7px 0 7px;
        border-color: #cc0000 transparent transparent transparent;
    }
}


/* stepLead
-------------------------------------*/
.stepLead{
    background: #F2FAF4;
    border: 2px solid #009944;
    border-radius: 6px;
}
h3.stepLead__title{
    margin-top: 0;
    text-align: center;
    color: #009944;
    font-weight: bold;
}
.stepLead__way{
    display: flex;
    justify-content: center;
}
.stepLead__way__item{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.stepLead__way__item + .stepLead__way__item:before{
    content: "OR";
    position: absolute;
    font-weight: 900;
}
.stepLead__way__item p{
    margin-bottom: 0;
    margin-top: 0.5em;
    font-weight: bold;
}

@media print, screen and (min-width: 768px) {
    .stepLead{
        margin-bottom: 4em;
        padding: 1.75em;
    }
    h3.stepLead__title{
        font-size: 2.2rem;
    }
    .stepLead__text{
        text-align: center;
        font-size: 1.5rem;
        line-height: 2.133;
    }
    .stepLead__way__item + .stepLead__way__item{
        margin-left: 4em;
    }
    .stepLead__way__item + .stepLead__way__item:before{
        top: 15%;
        left: -3em;
        font-size: 2.2rem;
    }
    .stepLead__way__item p{font-size: 1.4rem;}
}
@media screen and (max-width: 767px) {
    .stepLead{
        margin-bottom: 4em;
        padding: 1.5em 1.25em;
    }
    h3.stepLead__title{
        font-size: 1.8rem;
    }
    .stepLead__text{
        text-align: left;
        font-size: 1.4rem;
        line-height: 1.8;
    }
    .stepLead__way{padding-right: 1.25em;}
    .stepLead__way__item + .stepLead__way__item{
        margin-left: 2.5em;
    }
    .stepLead__way__item + .stepLead__way__item:before{
        top: 20%;
        left: -2.75em;
        font-size: 1.8rem;
    }
    .stepLead__way__item p{font-size: 1.3rem;}
}



/* newStepList
-------------------------------------*/
.newStepList{}
.newStepList__item__box{border: 1px solid #BABED1;}
.newStepList__item.active .newStepList__item__box{background: rgba(89, 204, 200, 0.2);}
.newStepList__item__box .text .text-red,
.newStepList__item__text .text-red{
    display: block;
    font-weight: bold;
    color: #CC0000;
}
.newStepList__item__box .title,
.newStepList__item__title{
    position: relative;
    text-align: center;
    font-weight: bold;
}
.newStepList__item__title .num{
    position: absolute;
}
.newStepList__item__box .text,
.newStepList__item__text{
    text-align: center;
    line-height: 1.6;
}

@media print, screen and (min-width: 768px) {
    .newStepList{
        margin-bottom: 4em;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .newStepList:after{
        content: "";
        display: block;
        width: calc(calc(100% - 74px) / 3);
    }
    .newStepList__item{
        position: relative;
        width: calc(calc(100% - 74px) / 3);
    }
    .newStepList__item__title{
        margin-bottom: 0.5em;
        font-size: 1.6rem;
    }
    .newStepList__item__title .num{
        left: 0.35em;
        top: 0.25em;
        font-size: 3rem;
    }
    .newStepList__item__box{
        margin-bottom: 0.5em;
    }
    .newStepList__item__text{
        font-size: 1.4rem;
    }

    .newStepList__item:nth-of-type(1),
    .newStepList__item:nth-of-type(2),
    .newStepList__item:nth-of-type(3){margin-bottom: 2em;}

    .newStepList__item:nth-of-type(1):after,
    .newStepList__item:nth-of-type(2):after,
    .newStepList__item:nth-of-type(4):after,
    .newStepList__item:nth-of-type(5):after,
    .newStepList__item:nth-of-type(7):after{
        content: "";
        position: absolute;
        top: 40%;
        right: -1.65em;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 9px 0 9px 14px;
        border-color: transparent transparent transparent #cc0000;
    }
    .newStepList__item.pc:nth-of-type(5):after{
        display: none;
    }

    .newStepList__item:nth-of-type(3):after{
        content: "";
        position: absolute;
        right: 0;
        bottom: -1.75em;
        width: calc(300% + 74px);
        height: 3em;
        background-image: url(../img/contents/volunteer/form/step0/arrow.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .newStepList__item.pc:nth-of-type(4):before{
        content: "";
        position: absolute;
        bottom: 1.5em;
        right: 50%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 14px 9px 0 9px;
        border-color: #cc0000 transparent transparent transparent;
        transform: translateX(50%);
    }

    .newStepList__item.col2{width: calc(calc(100% - 74px) / 3 * 2 + 37px);}
    .newStepList__item.col2 .newStepList__item__box{position: relative;display: flex;justify-content: space-between;}
    .newStepList__item.col2 .newStepList__item__box .img{width: 48.25%;}
    .newStepList__item.col2 .newStepList__item__box .img + .img:before{
        content: "OR";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2.0rem;
        font-weight: 900;
    }
    .newStepList__item.col2 .newStepList__item__text{display: flex;}
    .newStepList__item.col2 .newStepList__item__text p{width: 50%;}
}
@media screen and (max-width: 767px) {
    .newStepList{
        margin-bottom: 6em;
        max-width: 302px;
        margin-left: auto;
        margin-right: auto;
    }
    .newStepList__item{
        position: relative;
    }
    .newStepList__item + .newStepList__item{
        margin-top: 3em;
    }
    .newStepList__item + .newStepList__item:before{
        content: "";
        position: absolute;
        top: -2em;
        right: 50%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 14px 9px 0 9px;
        border-color: #cc0000 transparent transparent transparent;
        transform: translateX(50%);
    }
    .newStepList__item__box .title{
        margin-top: 1.5em;
    }
    .newStepList__item__box .title,
    .newStepList__item__title{
        margin-bottom: 0.5em;
        font-size: 1.6rem;
    }
    .newStepList__item__title .num{
        left: 0.35em;
        top: 0.25em;
        font-size: 3rem;
    }
    .newStepList__item__box{
        margin-bottom: 0.5em;
    }
    .newStepList__item__box .text,
    .newStepList__item__text{
        font-size: 1.4rem;
    }
    .newStepList__item__box .or{
        margin-bottom: 0;
        text-align: center;
        font-size: 2.2rem;
        font-weight: 900;
    }
}


/* ====================================================
メールアドレス入力
==================================================== */
.pageVolunteer.provisional .greenUnderLineTitle{margin-bottom: 2.5em;}
.pageVolunteer.provisional .main > .greenUnderLineTitle:first-child{margin-top: 0;}
.mailBox{border: 4px solid #009944;}
.mailBox__inner{
    max-width: 762px;
    margin-left: auto;
    margin-right: auto;
}
.mailBox__button{text-align: center; margin-bottom: 1.5em;}

@media print, screen and (min-width: 768px) {
    .pageVolunteer.provisional .attention{text-align: center; margin-bottom: 20px; font-size: 1.6rem;}
    .mailBox__inner{padding: 70px 15px 20px;}
    .mailBox__text{margin-bottom: 2em; font-size: 1.6rem;}
    .formAttention{margin-top: 90px;}
}
@media screen and (max-width: 767px) {
    .pageVolunteer.provisional .attention{margin-bottom: 20px; font-size: 1.5rem;}
    .mailBox__inner{padding: 50px 15px 30px;}
    .mailBox__text{margin-bottom: 2em; font-size: 1.5rem;}
    .formAttention{margin-top: 60px;}
}


/* ====================================================
    errorBox
==================================================== */

.errorContainer {
    line-height: 2;
    font-size: 1.5rem;
}
.errorContainer p,
.errorContainer p.error {line-height: 2; font-size: 1.5rem;}
.errorContainer a {color: #004BB1;}
.errorContainer .errorBox {
    padding: 30px 30px 24px;
    border: 3px solid #CC0000;
}
.errorContainer .errorBox p.error {margin-bottom: 10px;}
.errorContainer .errorBox li {
    color: #B70000;
    font-size: 1.4rem;
    line-height: 1.8571;
}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}






/* ====================================================

==================================================== */
/*
-------------------------------------*/
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}