@charset utf-8;

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


	jQueryお問い合わせ表示用jQuery

	@version 1.1   2018.6.19
    @version 2.0   2020.2.19 新プログラム対応
	@author        K.Sekioka of HEVIZ Co.,Ltd.


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


/** --------------------------------------------------------


    フォームタグのカスタマイズ


------------------------------------------------------------ **/


.contactForm input,
.contactForm textarea,
.contactForm select {

    display : inline-block;
    width : 100%;
    height : 30px;
    line-height : 28px;
    margin : 1px 0;
    padding : 0 0.5em;
    box-sizing : border-box;

    color : #231815;
    font-size : 14px;

    background-color : #ffffff;

    border : 1px solid #bbbbbb;
    box-shadow : 0px 0px 5px 2px #eeeeee inset;
    box-shadow: 0px 0px 0px 0px;
    border-radius : 0;

    -webkit-appearance : none;
    -moz-appearance: none;
    appearance : none;
}

.contactForm input::-ms-expand,
.contactForm textarea::-ms-expand,
.contactForm select::-ms-expand {
    display: none;
}

/* placeholder */
.contactForm input::-webkit-input-placeholder,
.contactForm textarea::-webkit-input-placeholder { color:#ccc; }

.contactForm input:-ms-input-placeholder,
.contactForm textarea:-ms-input-placeholder{ color:#ccc; }

.contactForm input::placeholder,
.contactForm textarea::placeholder{ color:#ccc; }

.contactForm input:focus,
.contactForm textarea:focus,
.contactForm select:focus {
    outline : none;
    border-color : #258fe9;
    background-color:#ffffff;
}

/* autofill */
.contactForm input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #f3f8fc inset;
    box-shadow: 0 0 0px 1000px #f3f8fc inset;
}

/* disabled */
.contactForm input[readonly],
.contactForm textarea[readonly],
.contactForm select[readonly] {
    background-color:#f0f0f0;
    border-color:transparent;
    cursor:not-allowed;
}

/* disabled */
.contactForm input[disabled],
.contactForm textarea[disabled],
.contactForm select[disabled] {
    color:#cccccc;
    background-color:#f0f0f0;
    border-color:transparent;
    cursor:not-allowed;
}



/** --------------------------------------------------------

	text

------------------------------------------------------------ **/



.contactForm input[type="text"] {
}



/** --------------------------------------------------------

	EMail

------------------------------------------------------------ **/



.contactForm input[type="email"] {
}



/** --------------------------------------------------------

	TEL

------------------------------------------------------------ **/



.contactForm input[type="tel"] {
}



/** --------------------------------------------------------

	PASSWORD

------------------------------------------------------------ **/



.contactForm input[type="password"] {
}



/** --------------------------------------------------------

	NUMBER

------------------------------------------------------------ **/



.contactForm input[type="number"] {
}

.contactForm input[type=number]::-webkit-inner-spin-button,
.contactForm input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}



/** ----------------------------------------------------------------------------

	File

-------------------------------------------------------------------------------- **/



.contactForm input[type="file"] {
    display:none;
}

.contactForm input[type="file"]+label {
    display : inline-block;
    height : 30px;
    line-height : 30px;
    margin : 0;
    padding : 0 20px;
    color : #ffffff;
    background-color : #222222;
    cursor:pointer;
}

.contactForm input[type="file"]+label:hover {
    background-color : #258fe9;
}

.contactForm input[type="file"][disabled]+label {
    color:#cccccc;
    background-color:#f0f0f0;
    border-color:#f0f0f0;
    cursor:not-allowed;
}



/** ----------------------------------------------------------------------------

	textarea

-------------------------------------------------------------------------------- **/



.contactForm textarea {
    height:10em;
    line-height:1.5;
    padding:5px 10px;
}



/** ----------------------------------------------------------------------------

	Select Box

    <select></select><label></label>

-------------------------------------------------------------------------------- **/


.contactForm select {
    vertical-align:middle;
    width: 100%;
    height:30px;
    line-height:28px;
	padding-right:30px;
}

.contactForm select+label {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    position:relative;
    width:0;
    height:100%;
    margin:0;
    padding:0;
    overflow:visible;

    background-color:#222222;
    transition:all 0.3s;
}

.contactForm select+label::before{
    content:"";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -8px 0 0 -20px;
    padding: 0;
    border:2px solid;
    border-color:#444444 #444444 transparent transparent;
    transform: rotate(135deg);
    transition: all 0.3s ease-out;
}

.contactForm select:focus+label::before{
    margin: -2px 0 0 -20px;
    transform: rotate(-45deg);
}



/** ----------------------------------------------------------------------------

	Checkbox with Label

-------------------------------------------------------------------------------- **/



.contactForm input[type="checkbox"] {
    display: none;
}

.contactForm input[type="checkbox"] + label {
    display:inline-block;
    position:relative;
    margin: 5px;
    padding:0 1em 0 28px;
    line-height:30px;
}

.contactForm input[type="checkbox"] + label:before {
    display: block;
    position: absolute;
    content: "";

    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin:-10px 0 0 0;

/*		box-shadow : 0px 0px 5px 2px #eeeeee inset; */
    border : 1px solid #dddddd;
    border-radius: 0;
    background-color:#ffffff;
    transition:all 0.3s;
}


.contactForm input[type="checkbox"] + label:after {
    display: block;
    position: absolute;
    content: "";

    left:5px;
    top:50%;
    width:10px;
    height:18px;
    margin:-15px 0 0 0;
    padding:0;

    border-right: 4px solid #333333;
    border-bottom: 4px solid #333333;
    transform: rotate(45deg);
    transition:opacity 0.2s;
    opacity:0;
}

/* checked */
.contactForm input[type="checkbox"]:checked + label:before {
}

.contactForm input[type="checkbox"]:checked + label:after {
    opacity:1;
}


/* disabled */
.contactForm input[type="checkbox"][disabled] + label {
    color:#aaaaaa;
}

.contactForm input[type="checkbox"][disabled] + label:before {
    box-shadow : 0px 0px 0px 0px;
    background-color:#f0f0f0;
    border-color : #f0f0f0;
    cursor:not-allowed;
}



/** ----------------------------------------------------------------------------

	Radio Button + Label

-------------------------------------------------------------------------------- **/



.contactForm input[type="radio"] {
    display: none;
}

.contactForm input[type="radio"] + label {
    display:inline-block;
    position:relative;
    margin: 5px;
    padding:0 1em 0 28px;
    line-height:30px;
}

.contactForm input[type="radio"] + label:before {
    display: block;
    position: absolute;
    content: "";

    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin:-10px 0 0 0;

/*		box-shadow : 0px 0px 5px 2px #eeeeee inset; */
    border : 1px solid #dddddd;
    border-radius:11px;
    background-color:#ffffff;
    transition:all 0.3s;
}

.contactForm input[type="radio"] + label:after {
    display: block;
    position: absolute;
    content: "";
    left:0;
    top:50%;
    width:14px;
    height:14px;
    margin:-6px 0 0 4px;
    padding:0;

    background-color:#333333;
    border-radius:7px;
    transition:opacity 0.2s;
    opacity:0;
}


/* checked */
.contactForm input[type="radio"]:checked + label:before {
}

.contactForm input[type="radio"]:checked + label:after {
    opacity:1;
}


/* disabled */
.contactForm input[type="radio"][disabled] + label {
    color:#aaaaaa;
}

.contactForm input[type="radio"][disabled] + label:before {
    box-shadow : 0px 0px 0px 0px;
    background-color:#f0f0f0;
    border-color : #f0f0f0;
    cursor:not-allowed;
}



/** ----------------------------------------------------------------------------

	Submit, Button

-------------------------------------------------------------------------------- **/



.contactForm input[type="submit"],
.contactForm input[type="button"] {
    display:block;
    width:auto;
    height:30px;
    line-height:28px;

    margin:0;
    padding:0 30px;

    color : #ffffff;
    background-color : #222222;
    box-shadow : 0px 0px 0px 0px;
    border : 1px solid #222222;
    cursor:pointer;
}

.contactForm input[type="submit"]::-webkit-search-decoration,
.contactForm input[type="button"]::-webkit-search-decoration {
    display: none;
}

.contactForm input[type="submit"]:hover,
.contactForm input[type="button"]:hover {
    outline : none;
    color : #ffffff;
    border-color : #258fe9;
    background-color:#258fe9;
}

.contactForm input[type="submit"]:focus,
.contactForm input[type="button"]:focus {
    outline : none;
    color : #231815;
    border-color : #258fe9;
    background-color:#f3f8fc;
}


/* disabled */
.contactForm input[type="submit"][disabled],
.contactForm input[type="button"][disabled] {
    color:#cccccc;
    background-color:#f0f0f0;
    border-color:#f0f0f0;
    cursor:not-allowed;
}



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

	Responsive for Smart Phone
    ※ zoom対応

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



@media all and (max-width:767px) {

	.contactForm input,
	.contactForm textarea,
	.contactForm select {
        font-size : 16px;
    }

}


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

	contactForm用CSS

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



.contactForm {
    display:block;
    position:relative;
    height: auto;
    min-height: 200px;
    margin:0;
    padding:0;
    overflow:hidden;
}



/* Reset ----------------------------------------------- */

.contactForm ul,
.contactForm ul li,
.contactForm dl,
.contactForm dl dt,
.contactForm dl dd {
    margin:0;
    padding:0;
    list-style-type:none;
}


/* 必須 ------------------------------------------------- */

.contactForm .necessary {
    color:#ff0000;
}


/* エラー ----------------------------------------------- */

.contactForm .inp-error {
    background-color:#ffeeee;
}

.contactForm .inp-error input,
.contactForm .inp-error select,
.contactForm .inp-error textarea {
    background-color:#ffeeee;
}

/* table common ---------------------------------------- */

.contactForm table {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 20px 0 0 0;
    padding: 0;

    border-collapse:collapse;
    border-spacing:0;
    border:0;
/*    border-bottom:1px dotted #aaa; */
}

.contactForm table caption {
    text-align: right;
}

.contactForm table th {
    position:relative;
    width:30%;
    margin:0;
    padding:10px 10px 10px 10px;
    box-sizing:border-box;

    vertical-align:top;
    font-weight:normal;
    text-align: right;

/*    border-top:1px dotted #aaa; */
}

.contactForm table td {
    position:relative;
    width:70%;
    margin:0;
    padding:5px 0 5px 0;
    box-sizing:border-box;

    vertical-align:top;
    font-weight:normal;

/*    border-top:1px dotted #aaa; */
}


/* form common ----------------------------------------- */

.contactForm .inp-namae input[type="text"]{
    width:50%;
}

.contactForm .inp-jphone input[type="tel"] {
    width:4em;
}
.contactForm .inp-jpostal input[type="tel"] {
    width:4em;
}


/* btns common ----------------------------------------- */

.contactForm .cbtns {
    display:block;
    position:relative;
    margin:20px 0 0 0;
    padding:0;
}

.contactForm .cbtns ul {
    display:block;
    position:relative;
    margin:0;
    padding:0;
    text-align:center;
    letter-spacing:-1em;
}

.contactForm .cbtns li {
    display:inline-block;
    letter-spacing:normal;
    position:relative;
    width:48%;
    margin:0 1%;
    padding:0;
}



/* Button common ------------------------------------------ */

.contactForm .cbtns a {
    display:block;
    position:relative;
    margin:0;
    padding:10px 20px;

    background-color:#075b9d;
    color:#ffffff;
    font-size:14px;
    font-weight:700;
    text-align: center;
    text-decoration: none;
    line-height: 1.3;

    cursor:pointer;
    transition: all 0.3s ease-out;
}

/* Hover */
.contactForm .cbtns a:hover {
    color:#ffffff;
    background-color: #cc0000;
}

/* back */
.contactForm .cbtns a.cback {
    background-color:#aaaaaa;
    color:#ffffff;
}



/* 画面 common ---------------------------------------------- */

.contactForm section {
    display: block;
    position: relative;
    margin: 0;
    padding: 20px 0;
    box-sizing: border-box;
}

.contactForm section > header {
    
}

.contactForm section > header h1 {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size:14px;
    font-weight: 700;
}

.contactForm .comment {
    margin: 20px;
}



/* 入力画面 ------------------------------------------------- */

.contactForm .contactInput {
    padding: 0;
}

.contactForm .contactInput table {
    margin: 0;
}

.contactForm .contactConfirm {
    display: block;
    position: absolute;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    overflow:auto;
}

.contactForm .contactConfirm table th {
    padding:15px 0.5em 15px 0;
}
.contactForm .contactConfirm table td {
    padding:15px 0 15px 0.5em;
}

.contactForm .contactSubmit,
.contactForm .contactError {
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    padding:20% 20px;
    background-color: #ffffff;
}

.contactForm .contactConfirm .comment,
.contactForm .contactSubmit .comment,
.contactForm .contactError .comment {
    text-align: center;
}


/* ローディング ----------------------------- **/

@keyframes vloadinganim {
    0% {
        opacity:0;
    }
    70% {
        opacity:1;
    }
}

.contactForm .contactLoading {
    display:block;
    position:absolute;
    left:0;
    top:100%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding:0;
    background-color: rgba(0,0,0,0.3);
}

.contactForm .contactLoading svg {
    display: block;
    position: absolute;
    width:40px;
    height: 40px;
    left: 50%;
    top:50%;
    margin: -20px 0 0 -20px;
    padding: 0;
    vertical-align: bottom;
}

.contactForm .contactLoading svg path {
    fill:#ffffff;
    animation-name: vloadinganim;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    opacity:1;
}
.contactForm .contactLoading svg path:nth-of-type(1)  { animation-delay: 0; }
.contactForm .contactLoading svg path:nth-of-type(2)  { animation-delay: 100ms; }
.contactForm .contactLoading svg path:nth-of-type(3)  { animation-delay: 200ms; }
.contactForm .contactLoading svg path:nth-of-type(4)  { animation-delay: 300ms; }
.contactForm .contactLoading svg path:nth-of-type(5)  { animation-delay: 400ms; }
.contactForm .contactLoading svg path:nth-of-type(6)  { animation-delay: 500ms; }
.contactForm .contactLoading svg path:nth-of-type(7)  { animation-delay: 600ms; }
.contactForm .contactLoading svg path:nth-of-type(8)  { animation-delay: 700ms; }
.contactForm .contactLoading svg path:nth-of-type(9)  { animation-delay: 800ms; }
.contactForm .contactLoading svg path:nth-of-type(10) { animation-delay: 900ms; }
.contactForm .contactLoading svg path:nth-of-type(11) { animation-delay: 1000ms; }
.contactForm .contactLoading svg path:nth-of-type(12) { animation-delay: 1100ms; }



/* 画面切り替え -------------------------------- */

.contactForm .contactInput {}
.contactForm .contactConfirm  { top:100%; }
.contactForm .contactSubmit   { top:100%; }
.contactForm .contactError    { top:100%; }
.contactForm .contactLoading  { top:100%; }

.contactForm.onLoad .contactInput    {}
.contactForm.onLoad .contactConfirm  { top: 100%; }
.contactForm.onLoad .contactSubmit   { top: 100%; }
.contactForm.onLoad .contactError    { top: 100%; }
.contactForm.onLoad .contactLoading  { top: 0; }

.contactForm.onInput .contactInput    { display: block; }
.contactForm.onInput .contactConfirm  { top: 100%; }
.contactForm.onInput .contactSubmit   { top: 100%; }
.contactForm.onInput .contactError    { top: 100%; }
.contactForm.onInput .contactLoading  { top: 100%; }

.contactForm.onConfirm .contactInput    { }
.contactForm.onConfirm .contactConfirm  { top: 0; }
.contactForm.onConfirm .contactSubmit   { top: 100%; }
.contactForm.onConfirm .contactError    { top: 100%; }
.contactForm.onConfirm .contactLoading  { top: 100%; }

.contactForm.onSubmit .contactInput    { }
.contactForm.onSubmit .contactConfirm  { top: 100%; }
.contactForm.onSubmit .contactSubmit   { top: 0; }
.contactForm.onSubmit .contactError    { top: 100%; }
.contactForm.onSubmit .contactLoading  { top: 100%; }

.contactForm.onError .contactInput    { }
.contactForm.onError .contactConfirm  { top: 100%; }
.contactForm.onError .contactSubmit   { top: 100%; }
.contactForm.onError .contactError    { top: 0; }
.contactForm.onError .contactLoading  { top: 100%; }




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

	Responsive for Tablet

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



@media all and (max-width:1024px) and (min-width:768px) {



    /* table common ---------------------------------------- */

    .contactForm table {
        display: block;
        border-bottom:0;
    }

    .contactForm table caption {
        display: block;
        width: auto;
        text-align: right;

    }
    .contactForm table tbody,
    .contactForm table tr,
    .contactForm table th,
    .contactForm table td {
        display:block;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .contactForm table th {
        padding:10px 0 0 0;
        font-weight: 700;
        border-top:0;
        text-align:left;
    }

    .contactForm table td {
        padding:0 0 10px 0;
        border-top:0;
    }

}



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

	Responsive for Smart Phone

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



@media all and (max-width:767px) {



    .contactForm {
    }

    /* 必須 ------------------------------------------------- */

    /* table common ---------------------------------------- */

    .contactForm table {
        display: block;
        border-bottom:0;
    }

    .contactForm table caption {
        display: block;
        width: auto;
        text-align: right;

    }
    .contactForm table tbody,
    .contactForm table tr,
    .contactForm table th,
    .contactForm table td {
        display:block;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .contactForm table th {
        padding:10px 0 0 0;
        font-weight: 700;
        border-top:0;
        text-align:left;
    }

    .contactForm table td {
        padding:0 0 10px 0;
        border-top:0;
    }


    /* form common ---------------------------------------- */

    .contactForm .inp-jphone input[type="tel"],
    .contactForm .inp-jpostal input[type="tel"] {
        width:33.3%;
    }


    /* btns common ---------------------------------------- */

    .contactForm .cbtns {
        margin:10px 0 0 0;
    }

    .contactForm .cbtns ul {
    }

    .contactForm .cbtns li {
        display:block;
        width:auto;
        margin:5px 0 0;
    }


    /* Button common ------------------------------------------ */


    /* 入力画面 ------------------------------------------------- */

    .contactForm .contactConfirm table td {
        padding:0 0 10px 0.5em;
    }
    
    .contactForm .contactConfirm table th {
        padding:10px 0 0 0;
    }

    
    /* ローディング ----------------------------- **/

    .contactForm .contactLoading svg {
        width:20px;
        height: 20px;
        margin: -10px 0 0 -10px;
    }

}