@charset "UTF-8";

/*
 * iseeit.jp トップページ リデザイン用CSS
 * ─────────────────────────────────────────
 * 既存の common4g.css・top-page.css を上書きするたたき台です。
 * 読み込み順：common4g.css → top-page.css → このファイル
 * クラス名・PHP・WordPressクエリには一切手を入れていません。
 *
 * カテゴリカラー（落ち着いた色調に統一）
 *   finance      : #2a7a3a（深緑）
 *   ict          : #1a6fc4（青）
 *   feature      : #b04080（ローズ）
 *   finance-ict  : #7040b0（紫）
 *   notice       : #7a6a30（ベージュ系）
 *   rss          : #505878（グレーブルー）
 * ─────────────────────────────────────────
 */

/* ══════════════════════════════════════════
   ベースリセット補正
══════════════════════════════════════════ */
body {
    background-color: #f4f5f7;
    color: #1c2235;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

/* ══════════════════════════════════════════
   グローバルナビゲーション
══════════════════════════════════════════ */
.globalNavigationWrapper {
/*    background-color: #1c2235;*/
    font-size: 13px;
}

.banner {
/*    background-color: #1c2235;*/
    padding: 10px 8px 0 8px;
}

.globalSearch {
    background-color: #2a3248;
    padding: 18px 8px;
    width: 280px;
}

/* ナビゲーションボタン */
.globalNavigation li {
    background-color: #1c2235;
    padding: 0 2px 2px 0;
}

.globalNavigation li a {
    background: #2a3a6a;
    background: linear-gradient(to bottom, #354a80, #2a3a6a);
    border-top: 1px solid #4a5a90;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: none;
    -webkit-box-shadow: none;
    color: #c8d6e8;
    font-size: 13px;
    padding: 9px 4px;
    width: 110px;
    text-shadow: none;
}

.globalNavigation a:hover {
    background: #1a6fc4;
    color: #ffffff;
    border-top-color: #4a9ae0;
}

.globalNavigation .current {
    background: #1a4a96;
    color: #ffffff;
    border-top-color: #4a7ac8;
}

/* ══════════════════════════════════════════
   レイヤードナビゲーション
══════════════════════════════════════════ */
.layeredNavigationWrapper {
    background-color: #2a3248;
/*    padding: 6px 8px;*/
    font-size: 13px;
    color: #c8d6e8;
}

.layeredNavigationWrapper a {
    color: #a0b8d8;
    padding: 2px 4px;
    border-radius: 3px;
}

.layeredNavigationWrapper a:hover {
    color: #ffffff;
    background-color: #1a6fc4;
}

/* ══════════════════════════════════════════
   コンテンツWrapper（flex化）
   ─────────────────────────────────────────
   既存の display:box / inline-block 方式を
   flexbox に置き換え。折り返し・整列を改善。
══════════════════════════════════════════ */
.contentsWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 4px 4px 0 4px;
    background-color: #f4f5f7;
    box-sizing: border-box;
}

/* FixedBlock各サイズ：flex-item化 */
/* 310px → 最小280px・最大1/4以上で折り返し */
.FixedBlock310Wrapper {
    display: block;          /* inline-block → block */
    flex: 1 1 280px;         /* 成長・縮小可・最小280px */
    max-width: 340px;
    min-width: 260px;
    padding: 6px;
    box-sizing: border-box;
    vertical-align: top;
    margin: 0 auto;
}

/* 550px帯（noticeエリア等）*/
.FixedBlock550Wrapper {
    display: block;
    flex: 2 1 300px;         /* noticeは広め */
    max-width: 600px;
    min-width: 280px;
    padding: 6px;
    box-sizing: border-box;
    vertical-align: top;
    margin: 0 auto;
}

/* 470px帯 */
.FixedBlock470Wrapper {
    display: block;
    flex: 1 1 300px;
    max-width: 500px;
    min-width: 270px;
    padding: 6px;
    box-sizing: border-box;
    margin: 0 auto;
}

/* 390px帯 */
.FixedBlock390Wrapper {
    display: block;
    flex: 1 1 300px;
    max-width: 420px;
    min-width: 260px;
    padding: 6px;
    box-sizing: border-box;
    margin: 0 auto;
}

/* ══════════════════════════════════════════
   カテゴリカラム共通スタイル
   ─────────────────────────────────────────
   .header / .title / .detail の
   余白・フォント・角丸を共通化
══════════════════════════════════════════ */

/* 全カラム共通：外枠の角丸・影 */
.sub1-Column,
.sub2-Column,
.sub3-Column,
.sub4-Column,
.sub5-Column,
.sub6-Column,
.sub7-Column,
.rss-Column {
    border-radius: 6px;
    overflow: hidden;
    margin: 6px 2px 6px 2px;
    box-shadow: 0 1px 6px rgba(0,0,0,.10);
    background-color: #ffffff;
}

/* ヘッダー共通 */
.sub1-Column .header,
.sub2-Column .header,
.sub3-Column .header,
.sub4-Column .header,
.sub5-Column .header,
.sub6-Column .header,
.sub7-Column .header,
.rss-Column .header {
    padding: 10px 8px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    letter-spacing: .02em;
}

.sub1-Column .header a,
.sub2-Column .header a,
.sub3-Column .header a,
.sub4-Column .header a,
.sub5-Column .header a,
.sub6-Column .header a,
.sub7-Column .header a {
    color: #ffffff;
    text-decoration: none;
}
.sub1-Column .header a:hover,
.sub2-Column .header a:hover,
.sub3-Column .header a:hover,
.sub4-Column .header a:hover,
.sub5-Column .header a:hover,
.sub6-Column .header a:hover,
.sub7-Column .header a:hover {
    opacity: .85;
    text-decoration: underline;
}

/* タイトル（子カテゴリ名）共通 */
.sub1-Column .title,
.sub2-Column .title,
.sub3-Column .title,
.sub4-Column .title,
.sub5-Column .title,
.sub6-Column .title,
.sub7-Column .title {
    margin: 6px 6px 2px 6px;
    padding: 16px 8px;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    color: #ffffff;
    border-top: none;
    border-bottom: none;
    border-radius: 3px;
    letter-spacing: .04em;
}

/* 記事リスト（detail）共通 */
.sub1-Column .detail,
.sub2-Column .detail,
.sub3-Column .detail,
.sub4-Column .detail,
.sub5-Column .detail,
.sub6-Column .detail,
.sub7-Column .detail {
    margin: 1px 6px 1px 6px;
    padding: 32px 8px 4px;
    font-size: 13px;
    background-color: #ffffff;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #eaeaea;
    line-height: 1.5;
}

.sub1-Column .detail:last-child,
.sub2-Column .detail:last-child,
.sub3-Column .detail:last-child,
.sub4-Column .detail:last-child,
.sub5-Column .detail:last-child,
.sub6-Column .detail:last-child,
.sub7-Column .detail:last-child {
    border-bottom: none;
    margin-bottom: 6px;
}

/* detail 内のリンク */
.sub1-Column .detail a,
.sub2-Column .detail a,
.sub3-Column .detail a,
.sub4-Column .detail a,
.sub5-Column .detail a,
.sub6-Column .detail a,
.sub7-Column .detail a {
    color: #1a6fc4;
    text-decoration: none;
}
.sub1-Column .detail a:hover,
.sub2-Column .detail a:hover,
.sub3-Column .detail a:hover,
.sub4-Column .detail a:hover,
.sub5-Column .detail a:hover,
.sub6-Column .detail a:hover,
.sub7-Column .detail a:hover {
    text-decoration: underline;
    color: #0e4d96;
}

/* ══════════════════════════════════════════
   カテゴリ別カラー設定
══════════════════════════════════════════ */

/* --- finance（深緑）--- */
.sub1-Column {
    border: 1px solid #2a7a3a;
}
.sub1-Column .header {
    background-color: #2a7a3a;
}
.sub1-Column .title {
    background-color: #3a9a4a;
}

/* --- ict（青）--- */
.sub4-Column {
    border: 1px solid #1a6fc4;
}
.sub4-Column .header {
    background-color: #1a6fc4;
}
.sub4-Column .title {
    background-color: #2a80d8;
}

/* --- feature（ローズ）--- */
.sub5-Column {
    border: 1px solid #b04080;
}
.sub5-Column .header {
    background-color: #b04080;
}
.sub5-Column .title {
    background-color: #c05090;
}

/* --- finance-ict（紫）--- */
.sub7-Column {
    border: 1px solid #7040b0;
}
.sub7-Column .header {
    background-color: #7040b0;
}
.sub7-Column .title {
    background-color: #8050c0;
}

/* --- notice（ベージュ系）--- */
.sub6-Column {
    border: 1px solid #7a6a30;
}
.sub6-Column .header {
    background-color: #7a6a30;
}
.sub6-Column .title {
    background-color: #9a8a50;
    color: #ffffff;
}

/* ══════════════════════════════════════════
   notice エリア（最新情報）
══════════════════════════════════════════ */
.sub6-Column .asset-name a {
    color: #1a6fc4;
    font-size: 15px;
}
.sub6-Column .asset-meta {
    font-size: 11px;
    color: #8a94a6;
    margin: 0 8px;
}
.sub6-Column .asset-content {
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.75;
}
.sub6-Column .asset-footer-link {
    padding: 6px 10px 10px;
}

/* Previous / Next ボタン */
a.link_button {
    display: inline-block;
    padding: 4px 14px;
    margin: 0 4px 0 0;
    font-size: 12px;
    color: #ffffff;
    background-color: #1a6fc4;
    border-radius: 4px;
    text-decoration: none;
    transition: background .2s;
}
a.link_button:hover {
    background-color: #0e4d96;
}

/* ══════════════════════════════════════════
   RSS カラム
══════════════════════════════════════════ */
.rss-Column {
    border: 1px solid #505878;
    margin: 6px 2px;
}
.rss-Column .header {
    background-color: #505878;
    color: #ffffff;
}
.rss-Column .title {
    margin: 0;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: bold;
    background-color: #606888;
    color: #ffffff;
    text-align: left;
    border-radius: 0;
}
.rss-Column .title a {
    color: #ffffff;
    text-decoration: none;
}
.rss-Column .list {
    padding: 6px 10px 10px 10px;
    font-size: 13px;
}
.rss-Column .list dd {
    margin: 4px 0 4px 0;
    padding: 4px 0;
    border-bottom: 1px solid #f0f2f5;
    line-height: 1.6;
}
.rss-Column .list dd:last-child {
    border-bottom: none;
}
.rss-Column .list a {
    color: #1a6fc4;
    text-decoration: none;
}
.rss-Column .list a:hover {
    text-decoration: underline;
    color: #0e4d96;
}

/* ══════════════════════════════════════════
   leftFixedSide / centerBlockMain
══════════════════════════════════════════ */
.leftFixedSide,
.rightFixedSide {
    background-color: #f0f2f5;
    border-right: 1px solid #e2e6ea;
    margin: 8px 8px 8px 0;
    padding: 8px;
    border-radius: 4px;
}

.centerBlockMain {
    padding: 8px 12px;
}

/* ══════════════════════════════════════════
   管理・フッターナビゲーション
══════════════════════════════════════════ */
.administrativeNavigationWrapper {
    background-color: #2a3248;
    color: #c8d6e8;
    font-size: 12px;
/*    padding: 10px 12px;*/
}

.administrativeNavigationWrapper a {
    color: #a0b8d8;
    padding: 2px 6px;
    border-radius: 3px;
}

.administrativeNavigationWrapper a:hover {
    color: #ffffff;
    background-color: #1a6fc4;
}

.copyright {
    background-color: #1c2235;
    color: #8a94a6;
    font-size: 12px;
    padding: 10px 0;
}

/* ══════════════════════════════════════════
   スマホ対応補足
   ─────────────────────────────────────────
   310px固定が崩れる幅（〜320px）で
   全幅に広げる
══════════════════════════════════════════ */
@media screen and (max-width: 640px) {

    .contentsWrapper {
        flex-direction: column;
        padding: 4px;
    }

    .FixedBlock310Wrapper,
    .FixedBlock550Wrapper,
    .FixedBlock390Wrapper,
    .FixedBlock470Wrapper,
    .FixedBlock630Wrapper,
    .FixedBlock710Wrapper,
    .FixedBlock790Wrapper {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        padding: 4px;
    }

    .rss-Column {
    	width: 100%;
        float: none;
        margin: 4px 0;
    }

    .globalNavigation li a {
        width: 80px;
        font-size: 12px;
        padding: 8px 2px;
    }

    .globalSearch {
        width: 100%;
        float: none;
    }

    .leftFixedSide,
    .rightFixedSide {
        width: 100%;
        float: none;
        margin: 4px 0;
    }
}