@charset "utf-8";

/* ==========================================
Contact Form Premium Style
申込フォームと統一デザイン
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:
"Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;

background:
radial-gradient(circle at 20% 30%, rgba(224,242,254,.7) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(240,249,255,.8) 0%, transparent 60%),
linear-gradient(135deg,#f4faff 0%,#e6f4fe 100%);

background-size:200% 200%;
animation:bg-glow 15s ease infinite alternate;

padding:80px 20px;
min-height:100vh;

color:#2c3e50;
line-height:1.8;
}

@keyframes bg-glow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:50% 100%;}
}

/* ==========================================
フォーム本体
========================================== */

#mailformpro{

width:100%;
max-width:960px;

margin:0 auto;

padding:60px !important;

background:rgba(255,255,255,.85);

backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.6);

border-radius:32px;

box-shadow:
0 20px 60px rgba(0,114,188,.05),
0 1px 2px rgba(255,255,255,.5) inset;

}

/* ==========================================
タイトル
========================================== */

.form-title{

display:table;

margin:0 auto 20px;

padding:12px 60px;

font-size:1.6rem;
font-weight:700;

color:#0072bc;

background:#ffffff;

border:3px solid #0093e9;

border-radius:50px;

letter-spacing:.15em;

box-shadow:
0 4px 18px rgba(0,147,233,.15);

}

.form-lead{

text-align:center;

color:#718096;

margin-bottom:50px;

font-size:14px;

}

/* ==========================================
各項目
========================================== */

.form-row{
margin-bottom:28px;
}

.form-row > label{

display:block;

margin-bottom:10px;

font-weight:700;

color:#2c3e50;

}

/* ==========================================
必須
========================================== */

.required{

display:inline-block;

margin-left:8px;

padding:3px 10px;

font-size:11px;

font-weight:700;

color:#ffffff;

background:#d63031;

border-radius:20px;

}

/* ==========================================
入力欄
========================================== */

#mailformpro input[type="text"],
#mailformpro input[type="email"],
#mailformpro input[type="tel"],
#mailformpro textarea{

display:block;

width:100% !important;

padding:12px 15px;

font-size:15px;

color:#2c3e50;

background:#ffffff;

border:1px solid #dcdfe3;

border-radius:8px;

transition:.25s;

}

#mailformpro textarea{

min-height:220px !important;

resize:vertical;

}

/* フォーカス */

#mailformpro input:focus,
#mailformpro textarea:focus{

outline:none;

border-color:#0093e9;

box-shadow:
0 0 0 3px rgba(0,147,233,.15);

}

/* ==========================================
ラジオボタン
========================================== */

.radio{

display:inline-flex !important;

align-items:center;

margin-right:25px;

font-weight:400 !important;

color:#2c3e50;

}

.radio input{

margin-right:8px;

accent-color:#0093e9;

}

/* ==========================================
確認チェック
========================================== */

.confirm{

padding:20px;

background:#f8fafc;

border:1px solid #e2e8f0;

border-radius:10px;

}

.confirm label{

display:flex;

align-items:center;

gap:10px;

}

/* ==========================================
送信ボタン（パステル・明るい発光版）
========================================== */

.submit-area{

margin-top:40px;

text-align:center;

}

.submit-area button,
#mailformpro button[type="submit"],
#mailformpro input[type="submit"]{

display:inline-block;

width:auto;

min-width:260px;

padding:12px 60px;

font-size:1.6rem;

font-weight:700;

letter-spacing:.15em;

/* 文字色は白だとボケる可能性があるため、少しだけ引き締めた濃いめの水色に */
color:#4a7c9d;

/* 中心が白に近く、外側にかけて爽やかなパステル水色になるグラデーション */
background: radial-gradient(circle, #ffffff 0%, #e3f2fd 40%, #b3e5fc 100%);
background-size: 200% 200%;
background-position: center;

/* 枠線もパステル調の明るい水色に */
border:3px solid #b3e5fc;

border-radius:50px;

cursor:pointer;

/* 影は明るい光が漏れ出ているようなふんわり感に */
box-shadow:
0 4px 20px rgba(179, 229, 252, 0.5);

transition: all 0.4s ease;

}

.submit-area button:hover,
#mailformpro button[type="submit"]:hover,
#mailformpro input[type="submit"]:hover{

/* ホバー時に背景の倍率を変え、中心の白い光が外側に「ぱぁっと」広がって明るくなる */
background-size: 130% 130%;
transform: translateY(-3px);
opacity: 1;

/* ホバー時に影の発光感を強めて、ボタン全体が優しく光っているように見せる */
box-shadow:
0 8px 30px rgba(179, 229, 252, 0.8), 0 0 15px rgba(255, 255, 255, 0.6);

}
/* ==========================================
スマホ
========================================== */

@media screen and (max-width:768px){

body{

padding:20px 10px;

background:#f7fafc;

animation:none;

}

#mailformpro{

padding:25px !important;

border-radius:20px;

}

.form-title{

display:block;

font-size:1.1rem;

padding:10px 15px;

letter-spacing:.05em;

}

.radio{

display:block !important;

margin-bottom:12px;

}

#mailformpro input[type="text"],
#mailformpro input[type="email"],
#mailformpro input[type="tel"],
#mailformpro textarea{

font-size:16px;

}

.submit-area button,
#mailformpro button[type="submit"],
#mailformpro input[type="submit"]{

display:block;

width:100%;

min-width:0;

font-size:18px;

padding:16px 0;

border-radius:12px;

}

}