@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  
**/

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

    Webgrows Wp Form 

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

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

    Layout - defaulut (by Konoha)

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

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

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

.webg-form .form-outer {
    /* background-color: #FDF2DF; */
    /* border-radius: 20px; */
    /* padding: 50px; */
}

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

.webg-form .form-inner {
    margin-bottom: 20px;
    /* background-color: #FFEBC7; */
}

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

.webg-form form table {
    width: 100%;
    /* border-top: 1px solid #9C5300; */
    /* border-bottom: 1px solid #9C5300; */
}
.webg-form form table tr {
    /* border-bottom: 1px dashed #9C5300; */
    position: relative;
    display: flex;
    /* align-items: center; */
}
.webg-form form table tr:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #9C5300;
    bottom: 0;
    left: 0;
}
.webg-form form table tr:last-child:after {
    /*display: none;*/
}
.webg-form form table tr th,
.webg-form form table tr td {
    padding-top: 10px;
    padding-bottom: 10px;
    /* padding-left: 15px; */
    /* padding-right: 15px; */
}
.webg-form form table tr th {
    width: 230px;
    min-width: 230px;
    vertical-align: top;
    vertical-align: middle;
    padding-top: calc(10px + 10px);
}
.webg-form form table tr td {width: 100%;font-size: var(--f-size-table);font-weight: var(--f-wght-mid);}
.webg-form form table tr th > .inr,
.webg-form form table tr td > .inr {}
.webg-form form table tr th > .inr {
    text-align: right;
    display: flex;
    /* justify-content: flex-end; */
    align-items: center;
    /* position: relative; */
    gap: 10px;
}
.webg-form form table tr td > .inr {
    position: relative;
}
.webg-form form table tr th > .inr .t,
.webg-form form table tr td > .inr .t {
    color: var(--col-f-Gray2);
    font-size: var(--f-size-table);
    font-weight: var(--f-wght-mid);
}
.webg-form form table tr th > .inr .t {
    padding-left: 10px;
    position: relative;
}
.webg-form form table tr th > .inr .t:before {
    position: absolute;
    content: "";
    width: 5px;
    height: 12px;
    left: 0;
    background: var(--col-f-RosyGreen);
    top: calc(50% + 1px);
    transform: translateY(-50%);););););););););
}
.webg-form form table tr td > .inr .t {
    color: inherit;
    color: #231F20;
    font-weight: normal;
    font-size: 16px;
}
.webg-form form table tr td > .inr .t .pc {
    display: inline;
}
.webg-form form table tr td > .inr .t .sp {
    display: none;
}

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

.webg-form form table .inr .req {
    font-size: var(--f-size-label);
    width: 40px;
    height: 20px;
    display:  inline-block;
    text-align: center;
    background-color: var(--col-f-wht);
    color: var(--col-f-Red);
    border: 1px solid var(--col-f-Red);
    border-radius: 5px;
    font-weight: normal;
    line-height: 11px;
    /* position: absolute; */
    padding: 3px 0 0;
    margin-top: 2px;
}
.webg-form form table .inr .req.non {
    opacity: 0;
}

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

.webg-form .input-note {}

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

.webg-form .red {
    color: #CC1717;
}

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

    Error

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

.webg-form .error {
    background-color: #009C65;
    color: #FFFF00;
    position: absolute;
    z-index: 1;
    padding: 0 18px;
    line-height: 30px;
    border-radius: 30px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.webg-form .error {
    background-color: transparent;
    color: var(--col-f-Red);
    position: relative;
    z-index: 1;
    padding: 0 18px;
    line-height: 2;
    /* border-radius: 30px; */
    right: auto;
    top: auto;
    transform: none;
    padding-left: calc(18px + 1.2em);
    padding-left: 1.2em;
    z-index: 0;
}
.webg-form .error:before {
    position: absolute;
    content: "\25B2";
    left: 18px;
    left: 0;
}
.webg-form .input-text,
.webg-form .input-email {
    position: relative;
}
.webg-form .input-email .error {
    /* transform: none; */
    /* top: calc(100% - 15px); */
}
.webg-form .check ~ .error {
    /* top: calc(50% + 28px); */
}
.webg-form .item-textarea ~ .error {
    transform: none;
    top: calc(100% - 25px);
}
.webg-form .item-tel-group ~ .error {
    transform: none;
    top: calc(100% - 15px);
}

.g-recaptcha-outer > .error {
    display: inline-block;
}

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

    Item Group

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

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


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

    Other Item

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

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

    Form Footer

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

.webg-form .form-footer {}

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

    Privacy Text

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

.webg-form .privacy-text {
    text-align: center;
    line-height: 2;
    margin-bottom: 50px;
}

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

    Buttons

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

.webg-form .btn-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.webg-form .btn-outer button,
.webg-form .btn-outer a {
    border: none;
    width: 100%;
    max-width: 230px;
    line-height: 60px;
    border-radius: 60px;
    color: #FFF;
    background-color: #CCC;
    font-size: var(--f-size-table);
    /* font-weight: bold; */
    position: relative;
    text-align: left;
    padding: 0 50px;
}
.webg-form .btn-outer button .i_arw,
.webg-form .btn-outer a .i_arw {
    position: absolute;
    content: "";
    width: 30px;
    aspect-ratio: 1 / 1;
    top: calc(50% + 0px);
    right: 15px;
    transform: translateY(-50%);
    background-image: url(../img/btn-arrow.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

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

.webg-form .btn-outer button.btn-submit,
.webg-form .btn-outer a.btn-send {
    background-color: var(--col-f-RosyGreen);
    position: relative;
}
.webg-form .btn-outer button.btn-submit:after,
.webg-form .btn-outer a.btn-send:after,
.webg-form .btn-outer a.btn-cansel:after {
    position: absolute;
    content: "";
    display: inline-block;
    vertical-align: middle;
    color: var(--col-f-RosyGreen);
    line-height: 1;
    width: 10px;
    height: 10px;
    border: 2px solid var(--col-f-wht);
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    top: calc(50% + 1px);
    right: 30px;
    transform: translateY(-50%) rotate(45deg);
}
.webg-form .btn-outer a.btn-send,
.webg-form .btn-outer a.btn-cansel {
    max-width: 160px;
    padding: 0 0 0 40px;
    margin-bottom: 0;
}
.webg-form .btn-outer a.btn-cansel {
    border: 1px solid var(--col-f-RosyGreen);
    background-color: var(--col-f-wht);
    /* font-weight: normal; */
    color: var(--col-f-RosyGreen);
    text-align: right;
    padding: 0 40px 0 0;
}
.webg-form .btn-outer a.btn-cansel:after {
    border-top-color: var(--col-f-RosyGreen);
    border-right-color: var(--col-f-RosyGreen);
    transform: translateY(-50%) rotate(-135deg);
    right: auto;
    left: 30px;
}


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

    Input

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

.webg-form input[type="text"], 
.webg-form input[type="email"], 
.webg-form input[type="password"] {
    width: 100%;
    border: 1px solid var(--col-bdr-Gray);
    border-radius: 5px;
    height: 45px;
    padding: 14px 16px 14px;
    font-size: var(--f-size-table);
}

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

    Text

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

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

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

    Email

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

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

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

    Passwprd

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

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

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

    Tel

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

.webg-form .item-tel-group {
    display: flex;
    align-items: center;
    gap: 5px
}
.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"] {
    max-width: 140px;
}
.webg-form .item-tel-group .tel-hyphen {
    width: 20px;
    position: relative;
    opacity: 1;
    text-indent: -1000000px;
}
.webg-form .item-tel-group .tel-hyphen:after {
    position: absolute;
    content: "";
    width: 80%;
    height: 1px;
    background-color: #87888A;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}


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

    Textarea

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

.webg-form .item-textarea {}
.webg-form .item-textarea textarea {
    font-size: var(--f-size-table);
    width: 100%;
    border: 1px solid var(--col-bdr-Gray);
    border-radius: 5px;
    padding: 14px 16px 14px;
    min-height: 150px;
}


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

    Radio Button

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

.webg-form .radio-group {
    display: flex;
    align-items: center;
    gap: 25px;
}
.webg-form .radio_item {
    /* display: inline-block; */
    vertical-align: middle;
    /* padding: 0 20px 2px 0; */
    padding-top: 4px;
}
.webg-form .radio_item:hover {
    opacity: 0.8;
}
.webg-form .radio_item > label {
    cursor: pointer;
    display: flex;
	align-items: center;
	gap: 10px;
}
.webg-form .radio_item > label input[type="radio"] {
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
}
.webg-form .radio_item > label .radio {
    min-width: 40px;
    height: 40px;
    border: 1px solid #9C5300;
    background-color: #FFF;
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 50%;
    box-sizing: border-box;
}
.webg-form .radio_item > label .radio > span {
    border-right: none;
    border-bottom: none;
    transform: none;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: transparent;
    background-image: url(../img/checkbox-on.svg);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
}
.webg-form .radio_item > label input[type="radio"]:checked ~ .radio {}
.webg-form .radio_item > label input[type="radio"]:checked ~ .radio > span {
    opacity: 1;
}


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

    Checkbox

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

.webg-form .check {
    position: relative;
}
.webg-form .check:hover {
    opacity: 0.8;
}
.webg-form .check label.checkbox-item {
    width: auto;
    display: flex;
    height: auto;
    position: relative;
    cursor: pointer;
    align-items: center;
    gap: 5px;
}
.webg-form .check label.checkbox-item input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: auto;
}
.webg-form .check label.checkbox-item .checkbox {
    width: 30px;
    height: 30px;
    border: 1px solid var(--col-bdr-Gray);
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    background-color: #FFFFFF;
    vertical-align: text-top;
    border-radius: 5px;
}

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

.webg-form .check label.checkbox-item .checkbox span.css-check {
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 12px;
    height: 24px;
    position: relative;
    display: block;
    bottom: auto;
    top: calc(50% + -5%);
    left: calc(50% + -30%);
    transform: rotate(45deg) translateX(-50%) translateY(-50%);
}
.webg-form .check .checkbox-item input[type=checkbox]:checked ~ .checkbox {
    /* border-color: #68B300; */
    background-color: var(--col-f-Gray2);
}

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

.webg-form .check label.checkbox-item .checkbox span.img-check {
    border-right: none;
    border-bottom: none;
    transform: none;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: transparent;
    background-image: url(../img/checkbox-on-blk.svg);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    filter: var(--filter-White);
    /* background-color: #000; */
}
.webg-form .check .checkbox-item input[type=checkbox]:checked ~ .checkbox > span {
    opacity: 1;
}


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

    Selectbox

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

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

    Selectbox to Custom

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

.selectToCustom {}
.selectToCustom * {
    transition: all 0.3s;
}
.selectToCustom .selectbox {
    display: inline-block;
    position: relative;
    width: 100%;
}

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

.selectToCustom button.btn-selectbox {
    font-size: var(--f-size-table);
    font-weight: normal;
    background-color: #FFF;
    /* min-width: 280px; */
    width: 100%;
    border-radius: 5px;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--col-bdr-Gray);
    cursor: pointer;
    color: var(--col-f-nml);
    box-sizing: border-box;
    padding: 14px 16px 14px;
    text-align: left;
    transform: rotate(0.05deg);
    position: relative;
    display: block;
}
.selectToCustom button.btn-selectbox:hover {
    opacity: 0.8;
}
/*
.selectToCustom button.btn-selectbox:after {
    position: absolute;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-top: 12px solid #009C65;
    border-bottom: 0;
    top: calc(50% + 1px);
    transform: translateY(-50%);
    right: 15px;
}
*/
.selectToCustom button.btn-selectbox:after {
    position: absolute;
    content: "";
    display: inline-block;
    vertical-align: middle;
    color: var(--col-f-RosyGreen);
    line-height: 1;
    width: 10px;
    height: 10px;
    border: 2px solid var(--col-f-nml);
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    top: calc(50% + -2px);
    right: 15px;
    transform: translateY(-50%) rotate(135deg);
}

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

.selectToCustom .selectbox-menu {
    display: none;
    position: absolute;
    background-color: #FFF;
    z-index: 1;
    width: auto;
    min-width: 100%;
    border-radius: 0px 0px 10px 10px;
    /* padding: 5px; */
    border: 1px solid var(--col-bdr-Gray);
    top: calc(100% - 3px);
}
.selectToCustom.open .selectbox-menu {
    display: block;
}
.selectToCustom .selectbox-menu {}
.selectToCustom .selectbox-menu .selectbox-item {
    font-size: var(--f-size-table);
    font-weight: normal;
    background-color: transparent;
    white-space: nowrap;
    cursor: pointer;
    color: #666666;
    padding: 14px 16px 14px;
    text-align: left;
    display: block;
    width: auto;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--col-bdr-LightGray);
    line-height: 1;
}
.selectToCustom .selectbox-menu .selectbox-item:last-child {
    border: none;
}
.selectToCustom .selectbox-menu .selectbox-item:hover {
    background-color: var(--col-f-Red);
    color: var(--col-f-wht);
    opacity: 1;
}

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

    Item Group - Zip

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

.webg-form .item-zip-group {
    display: flex;
    align-items: center;
    gap: 5px;
}
.webg-form .item-zip-group .zip-mark {
}
.webg-form .item-zip-group .input-zip.input-zip-1 {
    width: 75px;
}
.webg-form .item-zip-group .zip-haifun {}
.webg-form .item-zip-group .input-zip.input-zip-2 {
    width: 75px;
}
.webg-form .item-zip-group .search {
    margin-left: 0.5em;
}
.webg-form .item-zip-group .search .link-search-address {
    color: var(--col-f-Gray2);
    font-size: var(--f-size-label);
    text-decoration: underline;
}

.webg-form .column:has(.item-zip-group) .item-group {
    margin-bottom: 14px;
}

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

    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: #FFF9B2; */
}

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

    END

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