@charset"UTF-8"; /**
 * Webgrows WP Form CSS
 * 
 * @author    Yusuke Shiuchi <shiuchi@webgrows.jp>
 * @Copyright 2024 WebGrows. All rights reserved.
 * @version   1.0
 * @create    2024/11/19
 * @update  
**/

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

/******************************************************************************************************

    Webgrows Wp Form 

*******************************************************************************************************/

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

    Layout - defaulut (by Konoha)

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

.webg-form {}
.webg-form form {}

/* Outter --------------------------------------------------------------------------------------------*/

.webg-form .form-outer {
    padding: 0;
    border-radius: 10px;
    padding-bottom: 0;
}

/* Inner ---------------------------------------------------------------------------------------------*/

.webg-form .form-inner {
    padding: 0;
    margin-bottom: 30px;
    padding-top: 14px;
}

/* Table ---------------------------------------------------------------------------------------------*/

.webg-form form table {
    display: block;
}
.webg-form form table tbody {
    display: block;
}
.webg-form form table tr {
    display: block;
}
.webg-form form table tr:after {}
.webg-form form table tr:last-child:after {}
.webg-form form table tr th,
.webg-form form table tr td {
    display: block;
    box-sizing: border-box;
    padding: 0;
    width: auto;
    min-width: auto;
    font-size: var(--f-size-form);
    line-height: var(--lht-s);
    font-weight: var(--f-wght-rglr-400);
}
.webg-form form table tr th {}
.webg-form form table tr td {}
.webg-form form table tr th > .inr,
.webg-form form table tr td > .inr {
    padding: 0 0px;
}
.webg-form form table tr th > .inr {
    /* justify-content: flex-end; */
    /* flex-direction: row-reverse; */
    padding: 7px 0px 7px;
    gap: 2px;
}
.webg-form form table tr td > .inr {padding-top: 7px;padding-bottom: 7px;min-height: 1.5em;}
.webg-form form table tr th > .inr .t,
.webg-form form table tr td > .inr .t {
    font-size: var(--f-size-form);
}
.webg-form form table tr th > .inr .t {
    /* font-size: 17px; */
}
.webg-form form table tr th > .inr .t:before {
    height: 14px;
}
.webg-form form table tr td > .inr .t {
    font-size: 12px;
}
.webg-form form table tr td > .inr .t .pc {
    display: none;
}
.webg-form form table tr td > .inr .t .sp {
    display: inline;
}

/* Req -----------------------------------------------------------------------------------------------*/

.webg-form form table .inr .req {
    /* font-size: 10px; */
    /* border-radius: 10px; */
    /* line-height: 15px; */
    /* height: auto; */
    /* width: auto; */
    /* padding: 0 5px; */
    margin-left: 5px;
}
.webg-form form table .inr .req.non {
    display: none;
}

/* Input Note ----------------------------------------------------------------------------------------*/

.webg-form .input-note {
    font-size: 10px;
    line-height: 1;
}
.webg-form form table tr td .input-note .t {
    font-size: 10px;
}

/* Color ---------------------------------------------------------------------------------------------*/

.webg-form .red {}

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

    Error

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

.webg-form .error {
    /* display: none; */
    font-size: 10px;
    line-height: 1.4;
    width: 100%;
    padding: 4px 10px;
    right: auto;
    /* left: -10px; */
    display: block;
    font-size: var(--f-size-form);
    padding-left: 1.2em;
    margin-top: 0px;
    left: 0px;
}
.webg-form .error.show {
    display: block;
}
.webg-form .selectToCustom ~ .error {
    left: 0;
    /* margin-top: 5%; */
}
.webg-form .input-text,
.webg-form .input-email {
    /* position: static; */
}
.webg-form .input-text .error {
    /* width: calc(100% + 20px); */
    /* margin-top: 8%; */
}
.webg-form .input-email .error {
    width: calc(100% + 20px);
    margin-top: 3%;
}
.webg-form .check ~ .error {
    /* left: 0; */
    /* margin-top: 5%; */
}
.webg-form .item-textarea ~ .error {
    left: 0;
    /* margin-top: 6%; */
}
.webg-form .item-tel-group ~ .error {
    left: 0;
    margin-top: 5%;
}

/* Button Error --------------------------------------------------------------------------------------*/

.webg-form .btn-error {
    position: absolute;
    width: 20px;
    height: 20px;
    text-align: center;
    background-color: #009C65;
    color: #FFFF00;
    border-radius: 30px;
    font-size: 20px;
    background-image: url(../img/icn_error.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 50%;
    top: calc(50%);
    right: 10px;
    transform: translateY(-50%);
    display: none;
}
.webg-form .error-on .btn-error {
    display: block;
    display: none;
}
.webg-form .selectToCustom ~ .btn-error {
    top: calc(50% - 6.75px);
    right: 40px;
}
.webg-form .input-text,
.webg-form .input-email {}
.webg-form .input-email .btn-error {}
.webg-form .radio-group ~ .btn-error {
    top: -25%;
    right: 20px;
    transform: none;
}
.webg-form .check ~ .btn-error {
   top: calc(50% - 10px);
   right: 20px;
   /* transform: none; */
}
.webg-form .item-textarea ~ .btn-error {
    top: calc(50% - 6.75px);
    right: 20px;
}
.webg-form .item-tel-group ~ .btn-error {
    top: calc(50% - 6.75px);
    right: 20px;
}


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

    Item Group

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

.webg-form .item-group {}
.webg-form .item-group > div {
    margin-bottom: 7px;
}
.webg-form .item-group > div:last-child {}


/******************************************************************************************************

    Other Item

*******************************************************************************************************/

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

    Form Footer

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

.webg-form .form-footer {}

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

    Privacy Text

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

.webg-form .privacy-text {
    font-size: 12px;
    padding: 0 0px;
    letter-spacing: 0.05em;
    margin-bottom: 35px;
}

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

    Buttons

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

.webg-form .btn-outer {
    margin-bottom: 30px;
}
.webg-form .btn-outer button,
.webg-form .btn-outer a {
    font-size: var(--f-size-form);
    /* letter-spacing: 0.1em; */
    /* max-width: 230px; */
    /* line-height: 40px; */
}
.webg-form .btn-outer button .i_arw,
.webg-form .btn-outer a .i_arw {
    width: 20px;
}

/* Button Submit -------------------------------------------------------------------------------------*/

.webg-form .btn-outer button.btn-submit,
.webg-form .btn-outer a.btn-send {}
.webg-form .btn-outer a.btn-cansel {}


/******************************************************************************************************

    Input

*******************************************************************************************************/

.webg-form input[type="text"], 
.webg-form input[type="email"], 
.webg-form input[type="password"] {
    border-radius: 5px;
    padding: 12px 10px 8px;
    font-size: var(--f-size-form);
}

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

    Text

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

.webg-form input[type="text"] {}

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

    Email

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

.webg-form input[type="email"] {}

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

    Passwprd

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

.webg-form input[type="password"] {}

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

    Tel

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

.webg-form .item-tel-group {}
.webg-form .item-tel-group .input-tel {}
.webg-form .item-tel-group .input-tel.input-tel-1 {}
.webg-form .item-tel-group .input-tel.input-tel-2 {}
.webg-form .item-tel-group .input-tel.input-tel-3 {}
.webg-form .item-tel-group .input-tel input[type="text"] {}
.webg-form .item-tel-group .tel-hyphen {}
.webg-form .item-tel-group .tel-hyphen:after {}


/******************************************************************************************************

    Textarea

*******************************************************************************************************/

.webg-form .item-textarea {}
.webg-form .item-textarea textarea {
    min-height: 240px;
    border-radius: 5px;
    font-size: var(--f-size-form);
    padding: 12px 10px 8px;
}


/******************************************************************************************************

    Radio Button

*******************************************************************************************************/

.webg-form .radio-group {
    gap: 30px;
}
.webg-form .radio_item {}
.webg-form .radio_item:hover {}
.webg-form .radio_item > label {
    gap: 5px;
}
.webg-form .radio_item > label input[type="radio"] {}
.webg-form .radio_item > label .radio {
    min-width: 40px;
}
.webg-form .radio_item > label .radio > span {
    background-size: 40%;
}
.webg-form .radio_item > label input[type="radio"]:checked ~ .radio {
}
.webg-form .radio_item > label input[type="radio"]:checked ~ .radio > span {}


/******************************************************************************************************

    Checkbox

*******************************************************************************************************/

.webg-form .check {}
.webg-form .check:hover {}
.webg-form .check label.checkbox-item {
    gap: 5px;
}
.webg-form .check label.checkbox-item input[type="checkbox"] {}
.webg-form .check label.checkbox-item .checkbox {
    border-radius: 5px;
}

/* CSS Border Check ----------------------------------------------------------------------------------*/

.webg-form .check label.checkbox-item .checkbox span.css-check {}
.webg-form .check .checkbox-item input[type=checkbox]:checked ~ .checkbox > span {}

/* Image Check ---------------------------------------------------------------------------------------*/

.webg-form .check label.checkbox-item .checkbox span.img-check {}
.webg-form .check .checkbox-item input[type=checkbox]:checked ~ .checkbox > span {}


/******************************************************************************************************

    Selectbox

*******************************************************************************************************/

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

    Selectbox to Custom

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

.selectToCustom {}
.selectToCustom * {}
.selectToCustom .selectbox {
    display: block;
}

/* Button Selectbox ----------------------------------------------------------------------------------*/

.selectToCustom button.btn-selectbox {
    min-width: auto;
    width: 100%;
    /* display: block; */
    /* position: static; */
    padding: 14px 10px 14px;
    font-size: var(--f-size-form);
    border-radius: 5px;
    background: var(--col-f-wht);
}
.selectToCustom button.btn-selectbox:hover {
    opacity: 1;
}
.selectToCustom button.btn-selectbox:after {
    right: 15px;
}

/* Selectbox Menu ------------------------------------------------------------------------------------*/

.selectToCustom .selectbox-menu {}
.selectToCustom.open .selectbox-menu {}
.selectToCustom .selectbox-menu {}
.selectToCustom .selectbox-menu .selectbox-item {
    font-size: 12px;
}
.selectToCustom .selectbox-menu .selectbox-item:hover {}

.selectToCustom select {
    display: block !important;
    /* opacity: 0; */
    /* visibility: visible; */
    position: absolute;
    /*left: -9999px; /* 必要に応じて */
    border: none;
    font-size: 0;
    background: transparent;
    color: #FFF;
}


/******************************************************************************************************

    Error On

*******************************************************************************************************/

.webg-form .column.error-on {}

/* Error On ------------------------------------------------------------------------------------------*/

/* Input */
.webg-form .column.error-on input[type="text"],
.webg-form .column.error-on input[type="email"], 
.webg-form .column.error-on input[type="password"],

/* Textarea */
.webg-form .column.error-on .item-textarea textarea,

/* Checkbox */
.webg-form .column.error-on .check label.checkbox-item .checkbox,

/* Radio */
.webg-form .column.error-on .radio_item > label .radio,

/* Selectbox */
.webg-form .column.error-on .selectToCustom button.btn-selectbox {
    background-color: var(--col-bg-PaleRed);
}


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

    End

------------------------------------------------------------------------------------------------------*/
}