/*
for large devices
 */

body{
    margin: 0;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

#header-title-bar{
    position: absolute;
    z-index: -1;
    display: flex;
    height: 160px;
    width: 100%;
    top: 60px;
    justify-content: center;
    align-items: center;
    background-repeat:repeat-x;
    background-image: url("/karaoke/form/images/shared/header_title_bar.png"), url("/karaoke-test/form/images/shared/header_title_bar.png");
    font-size:22px;
    color: #14297c;
    margin: 0;
}

#breadcrumb-container{
    position: absolute;
    top: 220px;
    display: flex;
    justify-content: center;
    width: 100%;
}

#breadcrumb-wrapper{
    position: relative;
    margin: auto;
    height: 80px;
    width:1100px;
    text-align: left;
    padding-top: 10px;
    font-size:12px;
}

.breadcrumb-parent{
    color: #14297c;
}

.breadcrumb-child{
    color: #acadae;
}

/**
コンテナー
 */
#container{
    /*position: absolute;*/
    position: relative;
    top: 300px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

#wrapper{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width:1100px;
    width: 100%;
    margin-bottom: 100px;

}


/**
フッター
 */
footer{
    position: relative;
}


/*
for small devices
*/
@media only screen and (max-width: 768px) {

    #header-kaji-logo{
        display:none !important;
    }

    #header-title-bar{
        font-size:18px;
        height: 70px;
    }

    #breadcrumb-container{
        top: 125px;
        /*margin-left: 15px;*/
        /*margin-right: 15px;*/
    }

    #breadcrumb-wrapper{
        height:auto;
        width : 98% ; /* IE8以下とAndroid4.3以下用フォールバック */
        width : -webkit-calc(100% - 30px) ;
        width : calc(100% - 30px) ;
        margin-left:0;
        margin-right:0;
    }

    #container{
        top:160px;
        margin-left: 15px;
        margin-right: 15px;
        width : 98% ; /* IE8以下とAndroid4.3以下用フォールバック */
        width : -webkit-calc(100% - 30px) ;
        width : calc(100% - 30px) ;
    }


}

@media only screen and (max-width: 1300px) {
    body{
        overflow-x:hidden
    }

    #header ul#main{
        display: none;
    }

    #header ul#hamburger{

    }

}


/**
個別ページ
 */

.cl-red{
    color:red;
}


.mute-gray{
    font-size:10px;
    color:#888888;
}

.small-black{
    font-size:10px;
    color:black;
}

.mt60{
    margin-top: 60px;
}

.mt30{
    margin-top: 30px;
}

.mb30{
    margin-bottom: 30px;
}

.mb60{
    margin-bottom: 60px !important;
}

.mb0{
    margin-bottom: 0 !important;
}

.mtpt0{
    margin-top: 0;
    padding-top: 0;
}

.wd100p{
    width: 100% !important;
}

.hidden{
    display: none !important;
}

.message{
    font-size: 16px;
}

/**
1ページ目
 */

#page-overview-top{
    text-align: center;
    width:100%;
    max-width:1100px;
    padding:0 0 25px;
    border-bottom:lightgray solid 1px;
    font-size: 1.5em;
}

.contact-menu-title{
    font-size: 18px;
    padding-top: 45px;
    padding-bottom: 24px;
    text-align: center;
	font-weight: bold;
    margin: 0;
}

.contact-menu-title.second{
    padding-top: 60px;
}

.select-form-type-wrapper{
    display: flex;
    justify-content: space-around;
    /*justify-content: center;*/
    flex-wrap: wrap;
    width: 100%;
}
.select-form-type-wrapper.second{
}
.select-form-type-wrapper.third{
    margin:auto;
}

@media only screen and (max-width: 1100px) {
    #select-form-type-wrapper{
        flex-wrap: wrap;
    }
}

.select-form-type{
    width: 180px;
    height: 120px;
    box-sizing:border-box;
    border: 2px solid #cccccc;
    padding: 40px 0;
    text-align: center;
    text-decoration: none;
    color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
    background-color:#11358c;
    /*margin: 0 10px;*/
}

.select-form-type:hover{
    background-color:#6495ED;
    color: white;
    opacity:1;

}

.select-form-type.dummy{
    border: none;
    display:none;
}

.select-form-type.dummy:hover{
    background-color: transparent;
}


@media only screen and (max-width: 1000px) {

    .select-form-type.dummy{

        display: block;
    }
}

/* second  */
.select-form-type-wrapper.second  .select-form-type.dummy{
    display: block;
}

@media only screen and (max-width: 1019px) {

    .select-form-type-wrapper.second .select-form-type.dummy{


    }
}

@media only screen and (max-width: 849px) {

    .select-form-type-wrapper.second .select-form-type.dummy{

        display: none;
    }
}


/* third  */
.select-form-type-wrapper.third .select-form-type.dummy{
    display: block;
    /*width: 85px;*/
}


@media only screen and (max-width: 1019px) {

    .select-form-type-wrapper.third .select-form-type.dummy{

        /*display: none;*/
        /*width: 85px;*/
    }
}

@media only screen and (max-width: 849px) {

    .select-form-type-wrapper.third .select-form-type.dummy{

        /*display: none;*/
    }
}



/**
短期見積もり
 */
#wrapper.form{
    width:780px;
    max-width: 100%;
}

#breadcrumb-wrapper.form{
    /*width:780px;*/
    width:1100px;
    max-width: 100%;
}

#contact-breadcrumb-container{
    background-color: #11358c;
    color: white;
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height:22px
}

#contact-breadcrumb-parent{

}

#contact-breadcrumb-arrow{
    margin: 0 10px;
    color: #7f92c1;
    font-size: 30px;
}

#contact-breadcrumb-subtitle{
    font-size: 18px;
    line-height:22px;
    font-weight: normal;
    margin: 10px 0;
    color: white;
}


#progress-bar-container{
    height:30px;
    width: 100%;
    background-color: #f3f4f7;
    margin-bottom:30px;
}
#progress-bar{
    height:30px;
    background-repeat: repeat-x ;
    background-image: url("/karaoke/form/images/shared/gage.png"), url("/karaoke-test/form/images/shared/gage.png");

}
#progress-bar.percent30{
    width:30%;
}
#progress-bar.percent50{
    width: 50%;
}
#progress-bar.percent70{
    width:70%;
}

#progress-bar.percent90{
    width:90%;
}

#progress-bar-label{
    float:right;
    color: #11358c;
    font-size: 12px;
    font-weight: bold;
}
#progress-bar-label-percent{
    font-size:18px;
    margin-right:10px;
    margin-left:7px;
}

/**
form
 */
.form-sub-title-container{
    height: 50px;
    display: flex;
    align-items: center;
    background:#f3f4f7;

}



.form-sub-title{
    font-size:18px;
    font-weight: bold;
    display:inline;
    margin-left:20px;
    margin-right:10px;
}
.form-sub-title-container .as-you-wish-tag{
    padding: 5px 12px;
    font-size:12px;
    background-color:#888888;
    color:white;
}


.form-item-container{
    display:flex;
    flex-wrap: wrap;
    padding:0 0px;
}

.form-item-wrapper{
    padding: 15px 20px 30px 20px;
    margin: 15px 0 0 0;
    letter-spacing: -.4em;
    width:100%;
    position: relative;
}

.form-item-wrapper.half-width{
    width: 390px;
    box-sizing: border-box;
}

.form-item-wrapper *{
    letter-spacing: normal;
}


.form-item-wrapper.error{
    background-color: #fbf0f2;
}
.form-item-wrapper.error::after{
"選択されていません"
}


.form-item-wrapper label{
    font-size:16px;
    line-height: 22px;
    display: block;
    margin-bottom: 3px;
    margin-top: 12px;
}

.form-item-wrapper label.inline{
    display: inline-block;
}

.form-item-wrapper label.label{
    display: flex;
}

.form-item-wrapper label.label .label-main{
    display: inline-block;
    margin-right:10px;
}


.form-item-wrapper label.show-name{
    display: inline-block;
    width: 270px;
}

.form-item-wrapper label.show-value{
    display: inline-block;
}


.form-item-wrapper .as-you-wish-tag{
    height:23px;
    width:50px;
    box-sizing: border-box;
    font-size:13px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    background-color:#888888;
    color:white;

}

.required-tag{
    height:23px;
    width:50px;
    box-sizing: border-box;
    font-size:13px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color:#c00021;
    color:white;
}



.form-item-box{
    display: inline-block;
    position: relative;
    letter-spacing: -.4em;
}

.form-item-box *{
    letter-spacing: normal;
}

.form-item-box.radio{
    width:185px;
}

.form-item-box.long{
    width:300px !important;
}

.baseline-top .form-item-box{
    vertical-align: top;
}

.form-item-sub-wrapper{
    display: flex;
    width: 100%;
    flex-wrap: wrap;

}

.form-item-box.checkbox{
    width: 148px;
}

.form-item-box.checkbox.type2{
    width: 185px;
}

.form-item-box.checkbox.type3{
    width: 300px;
}


/*.form-item-down-icon{*/
.form-item-box.date::after{
    content:"^";
    width:10px;
    height:10px;
    position:absolute;
    display: inline-block;
    left: 158px;
    top: 24px;
    transform: rotateX(180deg) scaleX(1.5);
    font-size: 22px;
    color: #11358c;
}

.form-item-box.time::after{
    content:"^";
    width:10px;
    height:10px;
    position:absolute;
    display: inline-block;
    left: 105px;
    top: 24px;
    transform: rotateX(180deg) scaleX(1.5);
    font-size: 22px;
    color: #11358c;
}


.form-item-box.zipcode{

}

.form-item-box.zipcode::before{
    content:"\3012";
    color:#b5b5b5;
    position: absolute;
    font-size: 18px;
    left: 10px;
    top: 8px;
}



.form-item{
    height: 40px;
    width:185px;
    font-size: 16px;
	border: 1px solid #ddd;
    padding: 10px 20px;
    box-sizing: border-box;
}

.form-item.disabled{
    background-color:lightgray;
}

.form-item.long{
    width:300px;
}

label.form-item{
    margin-bottom:0px;
}

.form-item.date{
    width:185px;
    margin-right:10px;
}

.form-item.time{
    width:135px;
}

.form-item.amount{
    width:210px;
}

.form-item.radio{
    display: inline-block;
    padding-left:40px;
    cursor:pointer;
	border: none;
}

.form-item.checkbox{
    display: inline-block;
    padding-left:40px;
    cursor:pointer;
	border: none;
}


.form-item.zipcode {
    margin-right: 15px;
    margin-bottom: 10px;
    padding-left:30px;
    width: 230px;
}

.form-item.select{
    background: white;
    border-radius: 0;
    -webkit-appearance: none;
    padding: 0 10px;
    border-color: #d0d2df;
}

/**
フリーテキスト
 */
textarea.form-item {
    height: 270px;
}

textarea.form-item.short{
    height:135px;
}

.zipcode-btn{
    width:100px;
    height:40px;
    font-weight:bold;
    text-align: center;
    vertical-align: top;
    background-color:#11358c;
    color: white;
    font-size: 13px;
    cursor: pointer;
}

.form-item.radio::before{
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 16px;
    border: 1px #d4d6e2 solid;
    background-color:white;
    position: absolute;
    left: 0;
    top: 7px;
}

.form-item.radio.selected::after{
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 16px;
    /* border: 4px white solid; */
    background-color: #11358c;
    position: absolute;
    left: 6px;
    top: 13px;
}

.form-item.checkbox::before{
    content: "";
    width: 30px;
    height: 30px;
    border: 1px #d4d6e2 solid;
    background-color:white;
    position: absolute;
    left: 0;
    top: 7px;
}

.form-item.checkbox.checked::after{
    background: url("/karaoke/form/images/shared/toggle-no-date.png"), url("/karaoke-test/form/images/shared/toggle-no-date.png");
    content: "";
    width: 30px;
    height: 30px;
    /* background-color: #11358c; */
    position: absolute;
    left: 1px;
    top: 8px
}

.SumoSelect{
    width: 236px;
    height: 40px;
    margin-right: 10px;
}

.CaptionCont.SelectBox{
    border: 1px solid #d0d2df;
    width: 236px;
    height: 40px;
    font-size: 18px;
    /* vertical-align: bottom; */
    padding: 7px 20px;
    box-sizing: border-box;
}
.CaptionCont.SelectBox:after{

    content: "^";
    width: 10px;
    height: 10px;
    position: absolute;
    display: inline-block;
    right: 20px;
    top: 24px;
    transform: rotateX(180deg) scaleX(1.5);
    font-size: 22px;
    color: #11358c;
}


.SumoSelect>.CaptionCont>label>i {
    background-image: none;
    /*background: url("/karaoke/form/images/shared/downallow.png") no-repeat;*/
    /*position: absolute;*/
    /*top: 17px;*/
    /*right: 16px;*/

}

#no-date-container{
    margin-left: 20px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    font-size: 18px;
    cursor:pointer;
    margin-bottom: 10px;
}

#toggle-no-date{
    /*background-color: #11358c;*/
    border: 1px #d4d6e2 solid;
    background-color:white;
    height:30px;
    width:30px;
    display: inline-block;
    margin-right:10px;
}

#toggle-no-date.checked{
    background: url("/karaoke/form/images/shared/toggle-no-date.png"), url("/karaoke-test/form/images/shared/toggle-no-date.png")
}

#input-no-date{
    display:none
}

#input-machine-screen-other{
    padding-left: 5px;
    width: 145px;
}

/* チェックボックス */
.checkbox-container{
    margin-left: 20px;
    /*margin-top: 5px;*/
    display: flex;
    align-items: center;
    font-size: 18px;
    cursor:pointer;
    margin-bottom: 10px;
}

.toggle-checkbox{
    /*background-color: #11358c;*/
    border: 1px #d4d6e2 solid;
    background-color:white;
    height:30px;
    width:30px;
    display: inline-block;
    margin-right:10px;
}

.toggle-checkbox.checked{
    background: url("/karaoke/form/images/shared/toggle-no-date.png"), url("/karaoke-test/form/images/shared/toggle-no-date.png")
}

.input-checkbox{
    display:none
}


/* ボタン系 */

.primary-btn{
    width: 160px;
    height: 40px;
    background-color: #11358c;
    color: white;
    font-size: 13px;
    position: relative;
    box-shadow: 6px 6px #eaeaea;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.primary-btn::after{
    content: ">";
    width: 14px;
    height: 15px;
    position: absolute;
    display: inline-block;
    left: 133px;
    top: 5px;
    transform: scaleY(1.5);
    font-size: 15px;
    color: white;
    z-index: 100;
}

.previous-btn{
    margin-right: 46px;
    width: 160px;
    height: 40px;
    background-color: #aaaaaa;
    color: white;
    font-size: 13px;
    position: relative;
    box-shadow: 6px 6px #eaeaea;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}
.previous-btn::after{
    content: "<";
    width: 14px;
    height: 15px;
    position: absolute;
    display: inline-block;
    left: 10px;
    top: 5px;
    transform: scaleY(1.5);
    font-size: 15px;
    color: white;
    z-index: 100;
}
#footer-btn-container{
    padding: 60.5px 0;
    display: flex;
    justify-content:center;

}
#footer-btn-wrapper{
    display: flex;
}


.validation-message{
    color:red;
    position:absolute;
    top: 15px;
    right: 16px;
}

#page-overview-top-last{
    height:80px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -30px 0 0 0;
}


#page-overview-top-thanks h2{
    font-size:18px;
    color:#111e73;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#page-overview-top-thanks{
    font-size: 13px;
    text-align: center;
}

.time-separator{
    width:45px;
    font-size:18px;
    display: inline-flex;
    justify-content: center;
}

#footer-privacy-agree-container{
    text-align: center;
}


/*
for small devices
768
1125
*/
@media only screen and (max-width: 768px) {
    footer{
        margin-left: -30px !important;
        margin-right: -30px !important;;
    }

    .smt30{
        margin-top: 30px;
    }

    .smb20{
        margin-bottom: 20px;
    }

    .smb30{
        margin-bottom: 30px;
    }

    .smb50{
        margin-bottom: 50px;
    }
    .contact-menu-title{
        padding-top:12px;
        padding-bottom: 12px;
    }

    .contact-menu-title.second{
        padding-top:50px;
        padding-bottom: 12px;
    }

    .select-form-type-wrapper{
        flex-direction: row;
    }

    .select-form-type{
        width:100%;
        font-size:13px;
        padding: 10px 0;
        height: 50px;
        margin-top: 10px;
    }

    .select-form-type br{
        display:none;
    }

    .select-form-type p{
        margin-top:0;
    }

    .select-form-type.dummy{
        display: none;
    }

    #contact-breadcrumb-container{
        height:auto;
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
        /*flex-wrap: wrap;*/
        display: block;
        padding: 0 30px;
    }

    #contact-breadcrumb-container div{
        display:inline;
    }

    #progress-bar-container{
        display: none;
    }

    #page-overview-top-last{
        margin-top: 30px;
    }


    #contact-breadcrumb-parent{
        display:inline-block;
        margin-top: 10px;
    }

    #contact-breadcrumb-arrow{
        display:inline-block;
    }

    #contact-breadcrumb-subtitle{
        display:inline-block;

    }

    .form-sub-title-container{
        width: calc(100% + 30px);
        margin-left: -15px;
        margin-right: -15px;
    }
    .form-sub-title-container:first-child{
        margin-top:60px;
    }

    .form-sub-title-container.s-confirm{
        margin-top: 25px
    }

    .form-item-wrapper{
        padding: 0 0 20px 0;
    }

    .form-item-wrapper:first-child{
        padding-top:15px;
    }

    label.form-item{
        margin-bottom: 10px;
    }

    #footer-btn-container{
        padding: 40px 0;
    }

    .primary-btn{
        width: 226px;
        margin-bottom: 30px;
    }

    .primary-btn::after{
        right: 10px;
        left: auto;
    }

    .previous-btn{
        width: 226px;
    }

    #footer-btn-wrapper {
        display: flex;
        flex-direction: column-reverse;
    }

    .validation-message {

        top: 10px;

    }
}

.my-link{
    color: #14297c;
}