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


/* バッジ形式で横並びにするCSS */
.badge-list {
    /* リストマーカーを非表示 */
    list-style: none;
    /* バッジ要素を横並びにするために flexbox を使用 */
    display: flex;
    /* 複数行に折り返す設定 */
    flex-wrap: wrap;
    /* ul 自体の左右のパディングをリセット（必要に応じて） */
    padding-left: 0; 
    /* リスト項目の間に適切なスペースを確保 */
    gap: 10px; /* リスト項目間のスペース */
}

.badge-list li {
    /* 独自の背景とパディングを設定してバッジの形に */
    background-color: #f0f0f0; /* バッジの背景色（薄いグレーなど） */
    color: #333; /* 文字色 */
    padding: 5px 10px; /* 上下左右のパディング */
    border-radius: 15px; /* 角を丸くしてバッジ感を出す */
    /* li の余計なマージンをリセット */
    margin: 0;
    /* 文字列が長すぎる場合の折り返しを防ぐ */
    white-space: nowrap; 
    /* リンクが子要素にある場合は、a要素にもスタイルを適用 */
}

/* リンク（a要素）がある場合のスタイル調整 */
.badge-list li a {
    /* リンクの下線を非表示に */
    text-decoration: none;
    /* 親 li の文字色を継承 */
    color: inherit; 
    /* 元画像の色を参考に、必要であれば調整 */
    /* color: #964b63; */ /* 画像の文字色に近い色 */
}

/* ホバー時のスタイル（オプション） */
.badge-list li:hover {
    background-color: #e0e0e0; /* ホバーで少し色を変える */
    cursor: pointer;
}

/************************************
** お問い合わせフォームの入力
************************************/
#cf-tbl{
box-sizing: border-box;
width: 100%;
}

#cf-tbl table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
color: #444;
}

#cf-tbl table tr th,
#cf-tbl table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
vertical-align: middle;
}

#cf-tbl table tr th{
width: 35%;
background: #eee;
}

@media screen and (max-width:768px){
#cf-tbl{
width:auto
}


#cf-tbl table,
#cf-tbl table tbody,
#cf-tbl table tr,
#cf-tbl table tr th,
#cf-tbl table tr td{
display: block;
}

#cf-tbl table{
width: 100%;
border-width: 0 0 1px 0;
}

#cf-tbl table tr th,
#cf-tbl table tr td{
width: auto;
padding: 3% 3%;
}

#cf-tbl table tr td{
border-width: 0px 1px 0px 1px;
}
}
/*「必須」文字デザイン*/
.required{
font-size:.8em;
padding: 5px;
background: #b86752;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*「任意」文字デザイン*/
.optional{
font-size:.8em;
padding: 5px;
background: #1a7d8a;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/* 入力項目を見やすく */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 95%;
	padding: 8px 15px;
	margin:10px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
	background-color: #f8f8f8;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 「送信する」ボタン */
input.wpcf7-submit {
    display: block;
    padding: 15px;
    width: 400px;
    background: #ffaa56;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 2px;
    margin: 15px auto 0
}
@media screen and (max-width:768px){
input.wpcf7-submit {
box-sizing: border-box;
width: 100%;
}
}

input.wpcf7-submit:hover {
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
	transform: translateY(-4px);
	opacity:0.7;
}
/* エラーメッセージを見やすく */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}
/* reCAPTCHAアイコン非表示 */
.grecaptcha-badge {
	visibility: hidden;
}
/*未同意時に送信ボタングレーアウト*/
.wpcf7-submit:disabled {
	background-color: #999;
}
/* CF7チェックボックスを縦並びに */
.wpcf7-checkbox .wpcf7-list-item {
margin-top:5px;
display: block;
}
/*同意のチェックボックスと同意のテキストの間隔を空ける*/
span.wpcf7-form-control-wrap {
    margin: 0 10px 0 0;
}
/*同意のチェックボックスをセンターぞろえ*/
.chek-privacy {
    text-align: center;
    margin: 10px;
}
/*autozipの注釈非表示*/
div#autozip {
    visibility: hidden;
}