学生、会社員、個人事業主、経営者に分けてクアドラを解説

/* ============================================================
使い方
① 下の「CF7 フォームコード」をContact Form 7の
「フォーム」タブにそのまま貼り付ける
② 下の「CSS」を外観 > カスタマイズ > 追加CSS、
または Shortcoder などでページに挿入する
③ 生成されたショートコードを記事に貼り付ける
============================================================ */

/* ============================================================
CF7 フォームコード（CF7管理画面の「フォーム」タブに貼り付け）
============================================================ */

/*

*/

/* ============================================================
CSS（外観 > カスタマイズ > 追加CSS に貼り付け）
============================================================ */

.soc-form-wrap {
max-width: 640px;
margin: 0 auto;
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-size: 14px;
color: #2d2d2d;
}

.soc-form-section {
margin-bottom: 22px;
}

.soc-form-label {
font-size: .8rem;
font-weight: 700;
color: #1e3a5f;
margin-bottom: 7px;
display: flex;
align-items: center;
gap: 6px;
}

.soc-form-label .req {
font-size: .65rem;
background: #e63946;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
font-weight: 700;
}

.soc-form-label .opt {
font-size: .65rem;
background: #9ca3af;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
font-weight: 700;
}

/* テキスト・メール・テキストエリア */
.soc-form-wrap .wpcf7-form-control.wpcf7-text,
.soc-form-wrap .wpcf7-form-control.wpcf7-email,
.soc-form-wrap .wpcf7-form-control.wpcf7-textarea,
.soc-form-wrap .wpcf7-form-control.wpcf7-select {
width: 100%;
padding: 11px 14px;
border: 1.5px solid #dce6f0;
border-radius: 8px;
font-size: .9rem;
font-family: inherit;
color: #2d2d2d;
background: #fff;
transition: border-color .2s, box-shadow .2s;
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}

.soc-form-wrap .wpcf7-form-control.wpcf7-text:focus,
.soc-form-wrap .wpcf7-form-control.wpcf7-email:focus,
.soc-form-wrap .wpcf7-form-control.wpcf7-textarea:focus,
.soc-form-wrap .wpcf7-form-control.wpcf7-select:focus {
border-color: #3d7ebf;
box-shadow: 0 0 0 3px rgba(61,126,191,0.12);
}

/* セレクト矢印 */
.soc-form-wrap .wpcf7-form-control.wpcf7-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233d7ebf' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}

/* ラジオボタン */
.soc-radio-group .wpcf7-radio .wpcf7-list-item {
display: block;
margin: 0 0 8px 0;
}

.soc-radio-group .wpcf7-radio .wpcf7-list-item label {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1.5px solid #dce6f0;
border-radius: 8px;
cursor: pointer;
font-size: .88rem;
line-height: 1.5;
transition: all .2s;
background: #fff;
}

.soc-radio-group .wpcf7-radio .wpcf7-list-item label:hover {
border-color: #3d7ebf;
background: #f0f6ff;
}

.soc-radio-group .wpcf7-radio .wpcf7-list-item input[type="radio"] {
margin-top: 2px;
accent-color: #3d7ebf;
flex-shrink: 0;
width: 16px;
height: 16px;
}

.soc-radio-group .wpcf7-radio .wpcf7-list-item input[type="radio"]:checked + span,
.soc-radio-group .wpcf7-radio .wpcf7-list-item:has(input:checked) label {
border-color: #3d7ebf;
background: #edf4ff;
font-weight: 700;
color: #1e3a5f;
}

/* チェックボックス */
.soc-check-group .wpcf7-checkbox .wpcf7-list-item {
display: block;
margin: 0 0 8px 0;
}

.soc-check-group .wpcf7-checkbox .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 10px;
font-size: .88rem;
cursor: pointer;
}

.soc-check-group .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"] {
accent-color: #3d7ebf;
width: 16px;
height: 16px;
flex-shrink: 0;
}

/* プライバシー同意 */
.soc-form-privacy {
font-size: .8rem;
color: #6b7280;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}

.soc-form-privacy a {
color: #3d7ebf;
text-decoration: underline;
}

.soc-form-privacy .wpcf7-acceptance {
display: inline-flex;
align-items: center;
}

.soc-form-privacy input[type="checkbox"] {
accent-color: #3d7ebf;
width: 15px;
height: 15px;
}

/* 送信ボタン */
.soc-form-submit .wpcf7-submit {
display: block;
width: 100%;
padding: 15px;
background: #1e3a5f;
color: #fff;
font-size: 1rem;
font-weight: 700;
border: none;
border-radius: 8px;
cursor: pointer;
letter-spacing: .06em;
transition: background .2s, transform .1s;
box-shadow: 0 4px 0 #0f1e33;
font-family: inherit;
}

.soc-form-submit .wpcf7-submit:hover {
background: #2a5282;
transform: translateY(-1px);
}

.soc-form-submit .wpcf7-submit:active {
transform: translateY(1px);
box-shadow: 0 2px 0 #0f1e33;
}

/* バリデーションエラー */
.soc-form-wrap .wpcf7-not-valid-tip {
font-size: .75rem;
color: #e63946;
margin-top: 5px;
display: block;
}

.soc-form-wrap .wpcf7-not-valid {
border-color: #e63946 !important;
}

/* 送信完了メッセージ */
.soc-form-wrap .wpcf7-response-output {
margin-top: 16px;
padding: 12px 16px;
border-radius: 8px;
font-size: .85rem;
border: none !important;
}

.soc-form-wrap .wpcf7-mail-sent-ok {
background: #ecfdf5;
color: #065f46;
border-left: 4px solid #10b981 !important;
}

.soc-form-wrap .wpcf7-validation-errors,
.soc-form-wrap .wpcf7-mail-sent-ng {
background: #fff1f2;
color: #9f1239;
border-left: 4px solid #e63946 !important;
}

/* スマートフォン対応 */
@media (max-width: 480px) {
.soc-radio-group .wpcf7-radio .wpcf7-list-item label {
font-size: .82rem;
padding: 10px 12px;
}
}

Δ