@charset "utf-8";
/* -----------------------------------------------------------------------
    ページ固有スタイル
----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
PC
----------------------------------------------------------------------- */

/* メインビジュアル（PC）
----------------------------------------------------------------------- */
#top-visual h1 {background-image: url("../img/photo_head.jpg")}

/* フォーム固有（PC）
----------------------------------------------------------------------- */
/* お申込みにあたっての確認事項 */
#form-field #input-q_001 label[for="q_001"],
#form-field #input-q_002 label[for="q_002"],
#form-field #input-q_003 label[for="q_003"],
#form-field #input-q_004 label[for="q_004"] {
    margin: 25px auto 0;
    padding: 20px 40px 20px 65px;
    background: #fff09c;
    line-height: 1;
}

#form-field #input-q_001 label[for="q_001"]::before,
#form-field #input-q_002 label[for="q_002"]::before,
#form-field #input-q_003 label[for="q_003"]::before,
#form-field #input-q_004 label[for="q_004"]::before {left: 30px;}

#form-field #input-q_001 label[for="q_001"]::after,
#form-field #input-q_002 label[for="q_002"]::after,
#form-field #input-q_003 label[for="q_003"]::after,
#form-field #input-q_004 label[for="q_004"]::after {left: 39px;}

#form-field #input-q_001 .input-unit-data p,
#form-field #input-q_002 .input-unit-data p,
#form-field #input-q_003 .input-unit-data p,
#form-field #input-q_004 .input-unit-data p {font-size: 1.4rem;}

/* お申込み内容 */
#form-field #input-q_004 label[for="q_005"],
#form-field #input-q_004 label[for="q_006"] {flex: 0 1 100%;}

/* お名前/フリガナ */
[id^="input-name_"] .input-unit-data,
[id="input-deliver_name"] .input-unit-data,
[id="input-deliver_kana"] .input-unit-data {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

[id^="input-name_"] .input-unit-data label,
[id="input-deliver_name"] .input-unit-data label,
[id="input-deliver_kana"] .input-unit-data label {flex: 0 1 48%;}

/* ご使用番号 */
#form-field #input-q_007 {}
#form-field #input-q_007 label {}
#form-field .open-useNumber-modal {
    display: inline-block;
    float: right;
    margin-top: 5px;
    text-decoration: underline;
}

#form-field .open-useNumber-modal::after {
    content: '';
    display: block;
    clear: both;
}

/* 住所/提供先の住所・ご連絡先 */
#form-field #input-addr,
#form-field #input-deliver_addr {}

#form-field #input-addr .input-child,
#form-field #input-deliver_addr .input-child {padding: 0;border: none;}

#form-field #input-addr .input-child .input-child-head,
#form-field #input-addr .input-child .input-child-data,
#form-field #input-deliver_addr .input-child .input-child-head,
#form-field #input-deliver_addr .input-child .input-child-data {
    flex: 0 1 100%;
    padding: 0;
    background: transparent;
    border: none;
}

#form-field #input-addr .input-child .input-child-head,
#form-field #input-deliver_addr .input-child .input-child-head {font-weight: bold;}

#form-field #input-addr .input-child .input-child-data,
#form-field #input-deliver_addr .input-child .input-child-data {margin-bottom: 25px;}

#form-field #input-addr .input-child .input-child-data:last-of-type,
#form-field #input-deliver_addr .input-child .input-child-data:last-of-type {margin-bottom: 0;}

#form-field #input-addr #input-zip,
#form-field #input-deliver_addr #input-zip2 {display: flex;justify-content: flex-start;}

#form-field #input-addr [for="zip1"],
#form-field #input-addr [for="zip2"],
#form-field #input-deliver_addr [for="q_036"],
#form-field #input-deliver_addr [for="q_037"] {width: 9em;}

#form-field #input-addr [for="zip1"] + span,
#form-field #input-deliver_addr [for="q_036"] + span {padding: 0 1em;}

#form-field #input-addr [for="zip2"],
#form-field #input-deliver_addr [for="q_037"] {margin-right: 1em;}

#form-field #input-addr #zip-to-addr,
#form-field #input-deliver_addr #zip-to-addr2 {
    height: 57px;
    line-height: 57px;
    padding: 0 20px;
    background: var(--form-bg-color);
    border: 1px solid var(--form-border-color);
    border-radius: 4px;
    font-size: 1.4rem;
}

/* 住ミカタ会員の有無 */
#form-field #input-q_020 {}
#form-field #input-q_020 .input-unit-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#form-field #input-q_020 .input-unit-data p {flex: 0 1 100%;margin-bottom: 20px;}
#form-field #input-q_020 .input-unit-data .data-child {flex: 0 1 50%;}

/* さすガねっとの契約有無 */
#form-field #input-q_021 {}
#form-field #input-q_021 .input-unit-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#form-field #input-q_021 .input-unit-data p {flex: 0 1 100%;margin-bottom: 20px;}
#form-field #input-q_021 .input-unit-data .data-child {flex: 0 1 50%;}
#form-field #input-q_021 + .note-list {margin-top: 5px;}

/* サービスの提供先の住所について */
#form-field #input-q_030 {}
#form-field #input-q_030 .input-unit-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#form-field #input-q_030 .input-unit-data p {
    flex: 0 1 100%;
    margin-bottom: 20px;
}

#form-field #input-q_030 .input-unit-data .data-child {flex: 0 1 50%;}

/* 提供先の住所・ご連絡先 */
#form-field #input-deliver {
    display: none;
    overflow: hidden;
    height: 0;
    margin-bottom: 0;
}

#form-field #input-deliver.open {
    display: block;
    height: auto;
    margin-bottom: 55px;
}

/* -----------------------------------------------------------------------
TB/SP 共通 コンテンツサイズは最大950px 余白が必要なので+30px
----------------------------------------------------------------------- */
@media (max-width: 980px) {
    
    /* お申込みにあたっての確認事項 */
    #form-field #input-q_001 label[for="q_001"],
    #form-field #input-q_002 label[for="q_002"],
    #form-field #input-q_003 label[for="q_003"],
    #form-field #input-q_004 label[for="q_004"] {
        margin-top: 10px;
        padding: 20px 4% 20px 48px;
        line-height: 1.4;
    }
    
    #form-field #input-q_001 label[for="q_001"]::before,
    #form-field #input-q_002 label[for="q_002"]::before,
    #form-field #input-q_003 label[for="q_003"]::before,
    #form-field #input-q_004 label[for="q_004"]::before {left: 15px;}
    
    #form-field #input-q_001 label[for="q_001"]::after,
    #form-field #input-q_002 label[for="q_002"]::after,
    #form-field #input-q_003 label[for="q_003"]::after,
    #form-field #input-q_004 label[for="q_004"]::after {left: 24px;}
    
    /* お申込み内容 */
    
    /* お名前/フリガナ */
    [id^="input-name_"] .input-unit-data,
    [id="input-deliver_name"] .input-unit-data,
    [id="input-deliver_kana"] .input-unit-data {}
    
    [id^="input-name_"] .input-unit-data label,
    [id="input-deliver_name"] .input-unit-data label,
    [id="input-deliver_kana"] .input-unit-data label {flex: 0 1 48%;}
    
    /* ご使用番号 */
    #form-field #input-q_007 {}
    
    #form-field #input-q_007 label {}
    
    /* 住所/提供先の住所・ご連絡先 */
    #form-field #input-addr,
    #form-field #input-deliver_addr {}
    
    #form-field #input-addr .input-child,
    #form-field #input-deliver_addr .input-child {}
    
    #form-field #input-addr .input-child .input-child-head,
    #form-field #input-addr .input-child .input-child-data,
    #form-field #input-deliver_addr .input-child .input-child-head,
    #form-field #input-deliver_addr .input-child .input-child-data {
        flex: 0 1 100%;
        padding: 0;
        background: transparent;
        border: none;
    }
    
    #form-field #input-addr .input-child .input-child-head,
    #form-field #input-deliver_addr .input-child .input-child-head {font-weight: bold;}
    
    #form-field #input-addr .input-child .input-child-data,
    #form-field #input-deliver_addr .input-child .input-child-data {margin-bottom: 25px;}
    
    #form-field #input-addr .input-child .input-child-data:last-of-type,
    #form-field #input-deliver_addr .input-child .input-child-data:last-of-type {margin-bottom: 0;}
    
    #form-field #input-addr #input-zip,
    #form-field #input-deliver_addr #input-zip2 {display: flex;justify-content: flex-start;}
    
    #form-field #input-addr [for="zip1"],
    #form-field #input-addr [for="zip2"],
    #form-field #input-deliver_addr [for="q_036"],
    #form-field #input-deliver_addr [for="q_037"] {width: 8em;}
    
    #form-field #input-addr [for="zip1"] + span,
    #form-field #input-deliver_addr [for="q_036"] + span {padding: 0 1em;}
    
    #form-field #input-addr #zip-to-addr,
    #form-field #input-deliver_addr #zip-to-addr2 {}
    
    /* 住ミカタ会員の有無 */
    #form-field #input-q_020 {}
    #form-field #input-q_020 .input-unit-data {}
    #form-field #input-q_020 .input-unit-data p {}
    #form-field #input-q_020 .input-unit-data .data-child {flex: 0 1 100%;}
    
    /* さすガねっとの契約有無 */
    #form-field #input-q_021 {}
    #form-field #input-q_021 .input-unit-data {}
    #form-field #input-q_021 .input-unit-data p {flex: 0 1 100%;margin-bottom: 20px;}
    #form-field #input-q_021 .input-unit-data .data-child {flex: 0 1 100%;}
    
    /* サービスの提供先の住所について */
    #form-field #input-q_030 {}
    #form-field #input-q_030 .input-unit-data {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #form-field #input-q_030 .input-unit-data p {flex: 0 1 100%;margin-bottom: 20px;}
    #form-field #input-q_030 .input-unit-data .data-child {flex: 0 1 100%;}
    #form-field #q_030_deliver {display: none;}
    
}

/* -----------------------------------------------------------------------
TB (portrait)
----------------------------------------------------------------------- */
@media (min-width: 521px) and (max-width: 980px) {}

/* -----------------------------------------------------------------------
SP (portrait)
----------------------------------------------------------------------- */
@media (max-width: 520px) {}

/* -----------------------------------------------------------------------
印刷
----------------------------------------------------------------------- */
@media print {}

/* -----------------------------------------------------------------------
for Internet Explorer
----------------------------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}