/*******************************************************************************
 "All Post Contact Form"'s CSS File
 Created by RainbowLink Inc.
 
 ###    Modified by You!  ###
 ###    Modify this file!  ###
 
 * CSS for /wp-content/plugins/allpost-contactform/allpost-contactform-core.php *
 
 #--------------- How to Modify this File -------------------------------
 https://www.rainbow-link.com/FAQ.htm?&faq_id=383&link_id=wp
 -----------------------------------------------------------------------#
 #--------------- このファイルの編集方法 ------------------------------------
 https://jp.Rainbow-Link.com/FAQ.htm?&faq_id=382&link_id=wp
 -----------------------------------------------------------------------#
 ******************************************************************************/

/*---------------------------------------------------
 OutLine ｜ ページ全体
 --------------------------------------------------*/
.apcf_outline {
    width: 100%;
}
div.apcf-container {
    margin: 0.5em;
    width: auto;
}
div.apcf-container:nth-child(even){
    padding: 0.5em;
    background:#ededed;
}
div.apcf-container:nth-child(odd){
    padding: 0.5em;
    background:#fbfbfb;
}
div.apcf-container div.apcf-container_inner div.apcf-container_content {
    display: flex;
}
div.apcf-container div.apcf-container_inner div.apcf-container_content .apcf-content-key {
    width: 30%;
    padding: 0.5em ! important;
}
div.apcf-container div.apcf-container_inner div.apcf-container_content .apcf-content-value {
    width: 70%;
    padding: 0.5em ! important;
}
div.apcf-hiddens {
    display: none;
}

/*---------------------------------------------------
 Confirmation Window ｜ 確認画面
 --------------------------------------------------*/
.apcf_outline #window_confirmation {
    width: 100%;
}
#apcf_even {
    background: #ededed ! important;
}
#apcf_odd {
    background: #fbfbfb ! important;
}
h2.confirmation {
    color: #000;
    font-size: 100%;
}
.confirmation_message {
    color: #000;
    font-size: 90%;
}
#window_confirmation .apcf-content-key { /* Align the left-side (item) to the right  | 左辺（項目）を右寄せにする */
    text-align: right;
}
/******************************************************** Align the left-side (item) to the left  | 左辺（項目）を左寄せにする:  https://www.rainbow-link.com/FAQ.htm?&faq_id=445
#window_confirmation .apcf-content-key {  
    text-align: left;
}
*********************************************************/
#apcf_confirmation_btn {  /*  submit button | 送信ボタン  */
    padding: 10px;
}
.btn_confirm {  /*  submit button | 送信ボタン  */
    /*  Example |  例  */
    /*
     border: 1px solid #000;
     display: inline-block;
     min-width: 160px;
     padding: .9em;
     height: 50px;
     text-align: center;
     color: #fff;
     font-style: normal;
     letter-spacing: 1px;
     margin: 0;
     font-size: 0.975rem;
     font-weight: 300;
     margin-top: 30px;
     background: #7f0cad;
     box-shadow: 0px 3px 2px 0px rgba(8, 8, 8, 0.35);
     border-radius: 3px;
     */
}


/*---------------------------------------------------
 Submission Window  ｜ 送信完了画面
 --------------------------------------------------*/
.apcf_outline #window_submission {
    width: 100%;
}
h2.submission {
    color: #000;
    font-size: 100%;
}
.submission_message {
    color: #000;
    font-size: 90%;
}
#window_submission .apcf-content-key { /* Align the left-side (item) to the right  | 左辺（項目）を右寄せにする */
    text-align: right;
}
/******************************************************** Align the left-side (item) to the left  | 左辺（項目）を左寄せにする:  https://www.rainbow-link.com/FAQ.htm?&faq_id=445
#window_submission .apcf-content-key {  
    text-align: left;
}
*********************************************************/
.apcf_disp_gototop {
     margin-top: 2em;
     display: flex;
     justify-content: center;
     align-items: center;
}
/*
.btn_gototop {

}
*/