@charset "UTF-8";

/* --- ふ～ぐりそふと共通スタイル --- */
body {
    background-color: #e6f2ff;
    background-image: 
        linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent);
    background-size: 30px 30px;
    color: #555555;
    font-family: "MS PGothic", "Osaka", sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 15px 0;
    text-align: center;
}

a { color: #0088cc; text-decoration: none; }
a:hover { color: #ff6699; text-decoration: underline; }
img { border: none; }

/* 全体コンテナ */
.main-container {
    width: 1080px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #cceeff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(100, 150, 255, 0.1);
    text-align: left;
    overflow: hidden;
}

/* テーブルレイアウト */
.main-table { width: 100%; border-collapse: collapse; }
.main-table td { vertical-align: top; padding: 15px; }

/* ヘッダー */
.header-area {
    background-color: #ffffff;
    border-bottom: 3px solid #88ccff;
    padding: 30px 40px; 
    text-align: left;
    background-image: radial-gradient(#eef7ff 20%, transparent 20%);
    background-size: 10px 10px;
}
.header-logo { max-width: 100%; height: auto; max-height: 120px; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1)); }

/* --- 左カラム --- */
.menu-td { width: 230px; background-color: #f9fcff; border-right: 1px dotted #88ccff; text-align: center; }

ul.side-menu { list-style-type: none; padding: 0; margin: 0 0 20px 0; text-align: left; }
ul.side-menu li { margin: 0; border-bottom: 1px dashed #cceeff; }
ul.side-menu li a {
    display: block; padding: 8px 10px; color: #666; font-weight: bold;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPjxjaXJjbGUgY3g9IjIuNSIgY3k9IjIuNSIgcj0iMiIgZmlsbD0iIzg4Y2NmZiIvPjwvc3ZnPg==') no-repeat 5px center;
    padding-left: 15px;
}
ul.side-menu li a:hover, ul.side-menu li a.active { background-color: #e6f2ff; color: #0088cc; }

.counter-box {
    text-align: center; font-size: 10px; color: #88ccff; margin: 20px 0;
    padding: 10px; border: 1px dashed #cceeff; background: #fff; border-radius: 5px;
}
.side-banner-img { width: 200px; height: auto; margin-bottom: 5px; border: 1px solid #ddd; border-radius: 3px; }
.side-banner-img:hover { border-color: #88ccff; opacity: 0.8; }

/* --- 右カラム --- */
.banner-td { width: 230px; background-color: #f9fcff; border-left: 1px dotted #88ccff; text-align: center; }
.banner-header {
    font-size: 10px; color: #0088cc; margin: 15px 0 5px 0; font-weight: bold;
    text-align: left; padding-left: 15px; border-left: 3px solid #ff99cc;
}
.right-banner-list img {
    margin-bottom: 8px; border: 1px solid #ddd; width: 200px; height: 40px;
    border-radius: 3px; opacity: 0.9; transition: 0.2s; object-fit: cover;
}
.right-banner-list img:hover { opacity: 1; border-color: #88ccff; transform: scale(1.02); }

/* --- メインコンテンツ --- */
.content-td { background-color: #ffffff; }

h2 {
    font-size: 14px; color: #0088cc; border-bottom: 2px solid #cceeff;
    padding-bottom: 5px; margin-top: 0; margin-bottom: 20px;
}
h2::before { content: "♥ "; color: #ff99cc; }

/* 更新履歴 */
.info-box {
    border: 1px solid #cceeff; height: 200px; overflow-y: scroll; padding: 10px;
    margin-bottom: 25px; background-color: #fdfefe; font-size: 11px; line-height: 1.6; border-radius: 5px;
}
.date { color: #88ccff; font-weight: bold; margin-right: 5px; }
.new-mark { color: #ff6699; font-size: 9px; vertical-align: middle; border: 1px solid #ff6699; padding: 0 2px; border-radius: 3px; margin-right: 3px; }

/* 製品一覧 */
.product-item {
    border: 1px solid #ddd; padding: 10px; margin-bottom: 20px; background: #fdfdfd;
    border-radius: 5px; display: flex; gap: 15px;
}
.product-img { flex-shrink: 0; width: 150px; text-align: center; }
.product-img img { width: 140px; height: auto; border: 1px solid #ccc; padding: 2px; background: #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); }
.product-info { flex-grow: 1; }
.product-title { font-size: 16px; font-weight: bold; color: #ff6699; border-bottom: 1px dashed #ccc; padding-bottom: 5px; margin-bottom: 8px; }
.product-spec { font-size: 11px; color: #666; margin-bottom: 10px; background: #f0f8ff; padding: 5px; border-radius: 3px; }
.product-desc { font-size: 12px; line-height: 1.5; }

.btn-detail {
    display: inline-block; margin-top: 10px; font-size: 11px;
    background: #88ccff; color: #fff !important; padding: 3px 10px;
    text-decoration: none; border-radius: 3px;
}
.btn-detail:hover { background: #55aaff; }

/* 特大バナー・ピックアップ */
.big-banner {
    border: 3px solid #ffccdd; border-radius: 5px; margin-bottom: 25px; display: block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); max-width: 100%;
}
.big-banner:hover { border-color: #ff6699; opacity: 0.9; }

.pickup-box {
    border: 1px solid #cceeff; padding: 10px; border-radius: 5px; background: #fdfefe;
    display: flex; gap: 15px;
}

/* 求人テーブル */
.job-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.job-table th { background: #eef7ff; color: #555; padding: 8px; border-bottom: 1px solid #cceeff; width: 25%; text-align: left; }
.job-table td { padding: 8px; border-bottom: 1px solid #cceeff; }

/* フッター */
.footer-area { background-color: #88ccff; color: #ffffff; text-align: center; padding: 15px; font-size: 10px; font-weight: bold; }
.footer-area a { color: #fff; text-decoration: underline; }