@charset "UTF-8";

body {
    /* フォントを可愛いものを優先に整理 */
    font-family: "Hachi Maru Pop", "ヒラギノ角ゴ Pro W3", cursive, sans-serif;
    /* 背景を単色から、少しリッチなグラデーションへ */
    background-color: #F6D3D6;
    background-attachment: fixed; /* スクロールしても背景が固定される */
    text-align: center;
    color: #333;
    margin: 0;
    background-image:  linear-gradient(90deg, rgba(255,255,255,.5) 50%, transparent 50%),
                       linear-gradient(rgba(255,255,255,.5) 50%, transparent 50%);
    background-size: 50px 50px; /* チェックの大きさ */
}

/* 共通リンクボタン：幅を強制固定する */
.link {
    position: relative;
    display: block;      /* inline-blockからblockに変更（幅をきかせやすくするため） */
    margin: 0 auto;      /* 真ん中に寄せる */
    width: 280px !important; /* 絶対に280pxにする命令 */
    box-sizing: border-box;  /* 枠線や余白を幅に含める */
    
    text-decoration: none;
    color: #fff;
    background: linear-gradient(to right, #ff9a9e 0%, #fecfef 100%);
    padding: 15px 0 !important; /* 左右のpaddingは0にして幅を固定 */
    text-align: center;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
    transition: all 0.3s ease;
    font-family: "Hachi Maru Pop", cursive;
}

/* 戻るボタン専用のホバー設定 */
.link:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.5);
    background: linear-gradient(to right, #fecfef 0%, #ff9a9e 100%);
}

/* --- 戻るボタンにもハートの魔法を追加 --- */
.link::before, .link::after {
    content: "❤︎";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #fff;
    opacity: 0.8;
    animation: heartbeat 1.5s infinite; /* ドキドキアニメーション */
}

.link::before { left: 20px; } /* 左のハート */
.link::after { right: 20px; }  /* 右のハート */

/* マウスを乗せたらハートを赤くする */
.link:hover::before, .link:hover::after {
    color: #ff007f;
    opacity: 1;
}

/* ドキドキさせるためのアニメーション設定（まだ書いていなければ追加） */
@keyframes heartbeat {
    0% { transform: translateY(-50%) scale(1); }
    15% { transform: translateY(-50%) scale(1.3); }
    30% { transform: translateY(-50%) scale(1); }
    45% { transform: translateY(-50%) scale(1.3); }
    100% { transform: translateY(-50%) scale(1); }
}

/* ⚠️ ここが大事：a:hover 全体への指定は削除するか、a.noを優先させる */
/* さっきの a:hover { background-color: fuchsia; } は消すとロゴが綺麗に動きます */

/* ロゴの動きはこれでバッチリ！ */
a.no {
    display: inline-block;
    transition: transform 0.3s ease;
}

a.no:hover {
    background-color: transparent !important;
    transform: scale(1.1);
}

a.no:hover img {
    opacity: 1 !important;
    filter: none !important;
}

/* 戻るボタンの余白 */
.back-home {
    margin: 80px 0;
}

/* フッター */
footer {
    padding: 150px 0 50px;
    color: #888;
    font-size: 0.9rem;
}

@media screen and (max-width: 768px) {
    /* どんな要素も、画面の幅（100%）を超えないように強制する */
    section, div, table, form, input, textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 表（テーブル）を使っているなら、スマホでは縦に並べる */
    table, thead, tbody, th, td, tr {
        display: block !important;
        width: 100% !important;
    }
}

/* --- 会社概要ページ：スマホ対応・極上オーダーメイド --- */
@media screen and (max-width: 768px) {
    /* 1. 全体設定：横揺れを完全に防ぐ */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    body {
        background-size: 30px 30px; /* 背景のチェックをスマホ向けに小さく */
    }

    /* 2. 表（テーブル）を「カード形式」に組み替える */
    /* これではみ出しをゼロにし、読みやすさを爆上げします */
    table, thead, tbody, th, td, tr {
        display: block !important;
        width: 100% !important;
    }

    table {
        padding: 0 15px; /* 画面端に少し隙間を作る */
    }

    tr {
        margin-bottom: 25px; /* 項目ごとのまとまりに余白を作る */
        background: rgba(255, 255, 255, 0.8);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(255, 105, 180, 0.1);
        border: 2px solid #fff;
    }

    th {
        background-color: #ffb6c1 !important; /* 項目名（会社名など）の背景 */
        color: #fff !important;
        padding: 12px !important;
        font-size: 1rem;
        text-align: center;
    }

    td {
        padding: 20px !important;
        font-size: 0.95rem;
        line-height: 1.6;
        text-align: center;
        color: #555;
    }

    /* 3. 戻るボタンのサイズ調整 */
    .back-home {
        margin: 50px 0;
    }

    .link {
        width: 80% !important; /* 画面幅に合わせる */
        max-width: 280px;
        padding: 12px 0 !important;
        font-size: 1rem !important;
    }

    /* ハートの位置も少し微調整 */
    .link::before { left: 15px; }
    .link::after { right: 15px; }

    /* 4. フッターの余白をスマホ向けにスリム化 */
    footer {
        padding: 80px 0 30px;
    }
}