@charset "utf-8";

/* ==========================================
   5. 2枚の画像配置（修正箇所）
   ========================================== */
/* 写真を囲んでいる親要素（PC向けの基本設定） */
.colum205-box {
    display: flex;
    justify-content: center;
    gap: 75px;
    /* PCでの画像の隙間 */
}

/* 写真自体に対する設定 */
.colum205-box img {
    /* ★ここを修正：固定幅から柔軟な設定に変更 */
    width: 100%;
    /* 親要素の幅に合わせて縮むようにする */
    max-width: 400px;
    /* でも最大幅は400pxに制限（PC用） */
    height: auto;
    margin-bottom: 20px;
}

/* ★追加：colum205-box用のスマートフォン向け調整 */
@media (max-width: 768px) {
    .colum205-box {
        flex-direction: column;
        /* スマホでは縦並びに切り替える */
        align-items: center;
        /* 縦並びの際に中央揃えにする */
        gap: 20px;
        /* スマホでは隙間を狭める */
    }
}


/* 2. スムーズなアニメーションの共通化 */
a,
button,
input[type="submit"],
figure,
img,
.btn1,
.btn2,
.btn3,
.btn4,
.btn5,
.btn6,
.btn7,
.btn8,
.btn9,
.btn10,
.btn11,
.btn12 {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 3. ボタンのモダン化（立体感とホバーアクション） */
[class^="btn"],
[class*=" btn"] {
    border-bottom: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
    font-weight: bold !important;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}

[class^="btn"]:hover,
[class*=" btn"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15) !important;
    opacity: 1 !important;
}

/* 特定のボタン色の微調整（グラデーション） */
.btn1,
.btn4,
.btn5 {
    /* 赤系 */
    background: linear-gradient(135deg, #ff5b5b, #e62222) !important;
}

.btn2,
.btn3 {
    /* 青系（濃） */
    background: linear-gradient(135deg, #1c92e0, #1068a8) !important;
}

.btn6,
.btn7,
.btn9,
.btn10,
.btn12 {
    /* 水色系 */
    background: linear-gradient(135deg, #4ad4ff, #15a5da) !important;
    color: #fff !important;
}

/* 4. ボックス・カードのシャドウと角丸（ふんわりとした浮遊感） */
figure,
.colum15-box,
.colum22-box,
.colum61-box3,
.colum18-smallbox,
.colum25-smallbox,
.colum71-smallbox {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04) !important;
    background: #fff !important;
    overflow: hidden;
}

figure:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
    opacity: 1 !important;
}

/* 画像自体の角丸 */
img {
    border-radius: 8px;
}

/* 5. 見出し（h1, h2, h3, h4）の洗練 */
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0.05em;
}

/* h3の下線をグラデーションに */
h3::before {
    background: linear-gradient(90deg, #31c5fc, #1068a8) !important;
    height: 4px !important;
    border-radius: 2px !important;
}

/* h4の青背景をモダンな角丸に */
h4 {
    border-radius: 8px !important;
    border-left: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* 6. テーブル（表）のモダン化 */
table {
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

table th,
table td {
    border: 1px solid #f2f2f2 !important;
}

table caption {
    background: linear-gradient(135deg, #2ea3f2, #1479c2) !important;
    font-weight: bold;
    letter-spacing: 0.1em;
}

table thead th,
.subgroup {
    background-color: #f7f9fb !important;
    color: #333 !important;
}

/* 7. 入力フォームの洗練 */
input[type="text"],
select,
textarea {
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    background-color: #fafafa !important;
    transition: all 0.3s ease !important;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
    background-color: #fff !important;
    border-color: #31c5fc !important;
    box-shadow: 0 0 0 4px rgba(49, 197, 252, 0.2) !important;
}