@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フォーム要素　＞　汎用
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.require {
    font-size: 13px;
    border-radius: 4px;
    padding: 3px 8px;
    margin: 0 13px 0 0;
    font-weight: normal;
    color: #fff;
    background: #fb8e5e;
}

.any {
    font-size: 13px;
    border-radius: 4px;
    padding: 3px 8px;
    margin: 0 13px 0 0;
    font-weight: normal;
    color: #fff;
    background: #62595a;
}

input, textarea, button {
    margin-bottom: 5px;
    box-sizing: border-box;
    border: none;
    padding: 8px 12px;
}

select {
    padding: 5px;
}

input[type="file"] {
    border: 0;
}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="file"],/* forIE(IEでは入力欄が表示されるため) */
textarea {
    width: 100%;
    background: #f5f5f5;
}

input.w50 {
    width: 50px;
}

input.w70 {
    width: 70px;
}

input.w100 {
    width: 100px;
}

input.w150 {
    width: 150px;
}

input.w200 {
    width: 200px;
}

input.w7 {
    width: 7em;
}

input.zip {
    width: 9em;
}

input#user_num {
    width: 30%;
}

.wpcf7-submit{
	background: #ffaa00;
	color:#fff;
	padding:10px 60px;
	border-radius:40px;
  margin: 0 auto;
  display: block;
}

.wpcf7-submit:hover{
	opacity:0.8;
	transition:0.3s;
}

.change01{
	margin-bottom:20px;
}

.wpcf7-previous{
	padding:10px 60px;
	border-radius:40px;
  margin: 0 auto 10px;
  display: block;
}

.wpcf7-previous:hover{
	opacity:0.8;
	transition:0.3s;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フォーム要素　＞　チェックボックスのカスタマイズ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* デフォルトのパーツを非表示に */
.ipt_custom input[type*="radio"], .ipt_custom input[type*="checkbox"] {
    display: none;
}

.ipt_custom input[type*="radio"] + span, .ipt_custom input[type*="checkbox"] + span {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 10px 10px 10px 40px;
    line-height: 1;
}

/* インプットの｢枠組み｣部分を作成 */

.ipt_custom input[type*="radio"] + span:before, .ipt_custom input[type*="checkbox"] + span:before {
    position: absolute;
    content: "";
    top: 0;
    left: 12px;
    width: 15px;
    height: 15px;
    margin-top: 12px;
    border: 1px solid #aaa;
    background: #fff;
    box-sizing: border-box;
}

/* 上記の｢丸｣バージョン（[class*="exclusive"]はコンタクトフォームで付与されるクラス） */
.ipt_custom input[type*="radio"] + span:before, .ipt_custom [class*="exclusive"] input[type*="checkbox"] + span:before {
    border-radius: 50%;
}

/* チェックマーク部分 */
.ipt_custom input[type*="radio"]:checked + span:after, .ipt_custom input[type*="checkbox"]:checked + span:after {
    position: absolute;
    content: "";
    top: 50%;
    left: 10px;
    width: 15px;
    height: 6px;
    margin-top: -7px;
    border-left: 4px solid #E71063;
    border-bottom: 4px solid #E71063;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 上記の｢丸｣バージョン（[class*="exclusive"]はコンタクトフォームで付与されるクラス） */
.ipt_custom input[type*="radio"]:checked + span:after, .ipt_custom [class*="exclusive"] input[type*="checkbox"]:checked + span:after {
    left: 15px;
    top: 2px;
    width: 9px;
    height: 9px;
    margin-top: 13px;
    border-radius: 50%;
    background: #1e73be;
    border-left: 0;
    border-bottom: 0;
    -webkit-transform: inherit;
    -ms-transform: inherit;
    transform: inherit;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WPプラグイン　＞　「コンタクトフォーム」
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
form {
    max-width: 1000px;
    margin: 0 auto;
}

.form_table th, .form_table td {
    padding: 15px 10px;
}
.form_table th {
    vertical-align: top;
    padding-right: 50px !important;
    padding-top: 23px;
    text-align: left;
	font-weight:normal !important;
    width: 40%;
}
#wpcf_comp_msg {
    background: #ffc;
    padding: 15px;
}
wpcf7-list-item {
    display: block;
}
.wpcf7 select {
    border-radius: 5px;
}

/*ローディングアイコンがでかくなってボタンの位置がずれる調整*/
.wpcf7 .ajax-loader {
    margin: 0;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WPプラグイン　＞　「コンタクトフォーム」　必須項目の表示をカスタマイズ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wpcf7-not-valid {
    border-color: #da7a7a!important;
    background-color: #fdf2f2!important;
}
wpcf7-not-valid .wpcf7-list-item-label:before {
    border-color: #da7a7a!important;
}

.wpcf7-checkbox {
    display: block;
}

@media (max-width: 750px) {
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
外部(コンタクトフォーム)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
	
	.form_table th {
/*         padding: 15px 0px 10px 0!important; */
			border:1px solid #ededed !important;
    }
	
	.form_table td {
        padding:15px 5px;
		background:#fff;
    }
	/* 追加修正2019-10-31tky */
    div.wpcf7 .ajax-loader {
        margin: 0 auto;
    }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
テーブルを１列に変型する（WPCFのスマホ最適化などに使用）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .change01 td, .change01 th {
        display: block;
        margin-top: -1px;
        width: auto!important;
    }
}