@charset "UTF-8";
/*
# =================================================================
# 汎用パーツのデザイン
# =================================================================
*/
.br_mob{display:none!important;}
.box_scroll{
display: flex;
align-items: center;
justify-content: start;
gap: 2rem;
position:relative;
width:100%;
padding:0;
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
overflow-x: scroll;
white-space: nowrap;
box-sizing:border-box;
overflow-y:hidden;
}
.items_c{align-items: center;}
.items_b{align-items: end;}
.gap05{gap:5px;}
.gap10{gap:10px;}
.gap15{gap:15px;}
.gap20{gap:20px;}
.gap25{gap:25px;}
/*********************
* 会話ふきだし
[say name="サルワカくん" img="画像URL"]ここに文章[/say]
[say name="サルワカくん" img="画像URL" from="right"]ここに文章2[/say]
*********************/
.say {
display: table;
overflow: hidden;
width: 100%;
margin: 1.5em 0
}
.faceicon {
display: table-cell;
width: 100px;
padding-right: 20px;
text-align: center;
vertical-align: top
}
.faceicon img {
width: 100%;
height: auto;
border: solid 3px #eaedf2;
border-radius: 50%
}
.faceicon span {
font-size: 11px;
font-weight: 700;
margin-top: 8px;
line-height: 1.4;
display: block
}
.chatting {
display: table-cell;
position: relative;
width: calc(100% - 100px);
font-size: .95em;
vertical-align: top
}
.sc {
display: inline-block;
text-align: left;
padding: 13px;
border: solid 2px #d5d5d5;
border-radius: 12px;
background: #fff;
word-break: break-word
}
.sc:before {
display: inline-block;
position: absolute;
top: 18px;
left: -23px;
border: 12px solid transparent;
border-right: 12px solid #d5d5d5;
content: ""
}
.sc:after {
display: inline-block;
position: absolute;
top: 18px;
left: -20px;
border: 12px solid transparent;
border-right: 12px solid #fff;
content: ""
}
.sc p {
margin: 5px 0;
padding: 0
}
.right {
text-align: right
}
.right .faceicon {
padding: 0 0 0 20px
}
.right .sc:after,.right .sc:before {
right: -23px;
left: auto;
border: 12px solid transparent;
border-left: 12px solid #d5d5d5
}
.right .sc:after {
right: -20px;
border-left-color: #fff
}
@media only screen and (min-width: 768px){
.sc {
padding: 20px;
}
}
@media only screen and (min-width: 481px){
.sc:after, .sc:before {
top: 30px;
}
.sc:after, .sc:before {
top: 30px;
}
.chatting {
padding-top: 15px;
width: calc(100% - 130px);
}
}
/*ボタン共通*/
.btn {
display: inline-block;
padding: 14px 32px;
font-size: 1rem;
font-weight: 500;
text-align: center;
text-decoration: none;
line-height: 1.5;
border-radius: 4px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
box-sizing: border-box;
}
.btn:hover {
text-decoration: none;
}
/* btn01: プライマリ（塗りつぶし → ホバーで浮き上がり＋影） */
.btn01 {
background: #333;
border: 2px solid #333;
color: #fff;
}
.btn01:hover {
background: #555;
border-color: #555;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.btn01:active {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
/* btn02: アウトライン（枠線 → ホバーで塗りつぶし） */
.btn02 {
background: transparent;
border: 2px solid #333;
color: #333;
}
.btn02:hover {
background: #333;
color: #fff;
}
.btn02:active {
background: #222;
border-color: #222;
}
/* btn03: スライドイン（ホバーで左から背景スライド） */
.btn03 {
background: #fff;
border: 2px solid #333;
color: #333;
z-index: 1;
}
.btn03::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #333;
transition: width 0.3s ease;
z-index: -1;
}
.btn03:hover {
color: #fff;
}
.btn03:hover::before {
width: 100%;
}
/* ボタンサイズバリエーション */
.btn-sm {
padding: 10px 20px;
font-size: 0.875rem;
}
.btn-lg {
padding: 18px 40px;
font-size: 1.125rem;
}
/* ボタン幅100% */
.btn-block {
display: block;
width: 100%;
}
/* カラーバリエーション */
.btn-blue {
background: #0066cc;
border-color: #0066cc;
color: #fff;
}
.btn-blue:hover {
background: #0052a3;
border-color: #0052a3;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}
.btn-green {
background: #28a745;
border-color: #28a745;
color: #fff;
}
.btn-green:hover {
background: #218838;
border-color: #218838;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
}
.btn-red {
background: #dc3545;
border-color: #dc3545;
color: #fff;
}
.btn-red:hover {
background: #c82333;
border-color: #c82333;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3);
}
.box_flex00{
display:flex;
}
.box_flex01{
display:flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
justify-content:center;
}
.box_flex02{
display:flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
justify-content:space-between;
}
.box_flex03{
display:flex;
-webkit-flex-wrap: wrap; /* Safari etc. */
-ms-flex-wrap : wrap; /* IE10 */
flex-wrap : wrap;
justify-content:flex-start;
}
.box_flex04{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
/*必須項目・警告・エラーの文字色*/
.required{
display: inline-block;
padding: 5px 10px;
margin-left:5px;
border:1px solid #eb3b54;
color: #eb3b54;
font-size: 10px;
font-weight:bold;
line-height: 1.0;
}
.label_yellow{
font-weight:bold;
background:linear-gradient(transparent 60%, #ff6 60%);
}
.bdr,.bdr_gray{ border: 1px solid #ccc; }/*灰*/
.bdr_red{ border: 1px solid #e00000; }/*赤*/
.bdr_blue{ border: 1px solid #0329ce; }/*青*/
.bdr_green{ border: 1px solid #01995e; }/*緑*/
.bdr_yellow{ border: 1px solid #ffe400; }/*黄*/
.bdr_navy{ border: 1px solid #133d94; }/*紺*/
.bdr_orange{ border: 1px solid #eca100; }/*橙*/
.bdr_pink{ border: 1px solid #eb67b5; }/*ピンク*/
.bdr_lime{ border: 1px solid #2abe0d; }/*黄緑*/
.bdr_aqua{ border: 1px solid #0baedd; }/*水色*/
.bdr_black{ border: 1px solid #000; }/*黒*/
/*角丸*/
.bdr_r4{ border-radius: 4px; }
.bdr_r8{ border-radius: 8px; }
.bdr_12{ border-radius: 12px; }
/*文字の横位置*/
.al_l{ text-align: left!important; }
.al_r{ text-align: right!important; }
.al_c{ text-align: center!important; }
.al_f{ display: flex;justify-content: center;align-items: center;text-align:left;}
.al_j{ text-align: justify!important;;}
.al_o{ text-align: left!important;display:inline-block!important;}
.al_t{ margin: auto!important;display:table!important;}
/*使い方：ここに左寄せ中央配置したいテキスト
*/
/*使い方：ここに左寄せ中央配置したいテキスト
ここに左寄せ中央配置したいテキスト
タグへの対応）
================================================================= */
/* フォーム内の自動pタグをリセット */
.inquiry-form p {
margin: 0;
padding: 0;
}
/* ラベル内のbrを無効化（横並び維持） */
.form-label p {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0;
}
.form-label p br {
display: none;
}
/* セクションヘッダー内のpタグ */
.form-section-header p {
margin: 0;
display: flex;
align-items: center;
}
/* 住所入力欄のbrを無効化 */
.form-address-row p {
display: flex;
align-items: center;
gap: 16px;
margin: 0;
width: 100%;
}
.form-address-row p br {
display: none;
}
.form-address-row .wpcf7-form-control-wrap {
flex: 1;
}
/* チェックボックス・ラジオのpタグ */
.form-checkbox-group p,
.form-radio-group p,
.purpose-group p {
margin: 0;
width: 100%;
}
/* 目的選択グリッド - 横並びフル幅 */
.purpose-group {
width: 100%;
}
.purpose-group p {
width: 100%;
}
.purpose-group .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.purpose-group .wpcf7-checkbox {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
width: 100%;
}
.purpose-group .wpcf7-list-item {
margin: 0 !important;
width: 100%;
}
.purpose-group .wpcf7-list-item label {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 20px 12px;
background: #fff;
border: 3px solid #e0e4e8;
border-radius: 12px;
text-align: center;
font-size: 1rem;
font-weight: 700;
min-height: 70px;
cursor: pointer;
transition: all 0.2s ease;
box-sizing: border-box;
}
.purpose-group .wpcf7-list-item label:hover {
background: #f0f7ff;
border-color: #0080ff;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 128, 255, 0.15);
}
.purpose-group .wpcf7-list-item:has(input:checked) label {
background: linear-gradient(135deg, #0080ff 0%, #0066cc 100%);
border-color: #0080ff;
color: #fff;
box-shadow: 0 6px 20px rgba(0, 128, 255, 0.3);
transform: translateY(-2px);
}
.purpose-group .wpcf7-list-item input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* 通常のチェックボックス・ラジオ */
.form-checkbox-group .wpcf7-checkbox,
.form-checkbox-group .wpcf7-radio,
.form-radio-group .wpcf7-checkbox,
.form-radio-group .wpcf7-radio {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.form-checkbox-group .wpcf7-list-item,
.form-radio-group .wpcf7-list-item {
margin: 0 !important;
}
.form-checkbox-group .wpcf7-list-item label,
.form-radio-group .wpcf7-list-item label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: #f5f7fa;
border: 2px solid #e0e4e8;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.9375rem;
font-weight: 500;
}
.form-checkbox-group .wpcf7-list-item label:hover,
.form-radio-group .wpcf7-list-item label:hover {
background: #fff;
border-color: #0080ff;
box-shadow: 0 2px 8px rgba(0, 128, 255, 0.1);
}
.form-checkbox-group .wpcf7-list-item:has(input:checked) label,
.form-radio-group .wpcf7-list-item:has(input:checked) label {
background: #0080ff;
border-color: #0080ff;
color: #fff;
box-shadow: 0 2px 8px rgba(0, 128, 255, 0.25);
}
/* 入力フィールド */
.inquiry-form .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.inquiry-form input[type="text"],
.inquiry-form input[type="tel"],
.inquiry-form input[type="email"],
.inquiry-form select,
.inquiry-form textarea {
width: 100%;
padding: 14px 16px;
font-size: 1rem;
border: 2px solid #d0d5dd;
border-radius: 8px;
background: #fff;
transition: all 0.2s ease;
box-sizing: border-box;
}
.inquiry-form input[type="text"]:focus,
.inquiry-form input[type="tel"]:focus,
.inquiry-form input[type="email"]:focus,
.inquiry-form textarea:focus {
outline: none;
border-color: #0080ff;
box-shadow: 0 0 0 4px rgba(0, 128, 255, 0.12);
}
/* 郵便番号フィールド */
.inquiry-form .p-postal-code {
max-width: 180px !important;
}
/* 自動入力フィールド */
.inquiry-form .p-region,
.inquiry-form .p-locality {
background: #f8f9fa;
}
/* 住所入力ブロック */
.form-address {
display: flex;
flex-direction: column;
gap: 12px;
background: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.form-address-label {
flex-shrink: 0;
width: 110px;
font-size: 0.875rem;
font-weight: 600;
color: #333;
}
/* レスポンシブ */
@media (max-width: 767px) {
/* フォームイントロ */
.form-intro {
padding: 24px 16px;
}
.form-intro-title {
font-size: 1.375rem;
}
/* STEPバッジをブロック表示 */
.form-section-header {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.form-section-header p {
display: block;
}
.form-step {
display: block;
width: 100%;
text-align: center;
padding: 10px 14px;
border-radius: 8px;
}
.form-section-title {
text-align: center;
}
/* 目的選択 */
.purpose-group .wpcf7-checkbox {
grid-template-columns: 1fr !important;
}
.purpose-group .wpcf7-list-item label {
flex-direction: row !important;
min-height: auto;
padding: 14px 16px;
}
/* 住所入力 */
.form-address-row p {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.form-address-label {
width: 100%;
}
.inquiry-form .p-postal-code {
max-width: 100% !important;
}
/* CTAボタン中央配置 */
.cta-button-group {
display: flex;
flex-direction: column;
align-items: center;
}
.cta-btn-main,
.cta-btn-secondary {
width: 100%;
max-width: 320px;
justify-content: center;
}
}