@charset "UTF-8";

/* =========================================================
   ベース設定
========================================================= */
body {
    font-family: Arial, "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

/* =========================================================
   ヘッダー・フッター (PC用ベース - 元のcountry.css準拠)
========================================================= */
header {
    height: 120px;
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
}
header .comapany_logo_c {
    display: block;
    width: 133px;
    height: 64px;
    margin: 0 auto;
    padding: 29px 0;
    background: url(https://www.agc-chemicals.com/file.jsp?id=7662) no-repeat center;
    text-indent: -9999px;
}

footer {
    overflow: hidden;
    padding: 15px 20px;
    border-top: 1px solid #e5e5e5;
    margin-top: 60px; /* メインコンテンツとの余白 */
}
.l_side {
    float: left;
}
.r_side {
    float: right;
}
.copy_right {
    margin: 7px 0 0;
    font-size: 1.3rem;
}

/* =========================================================
   メインコンテンツ (新しいカード型レイアウト - PC用)
========================================================= */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* 薄いグレーのセクションタイトル */
.section-title {
    background-color: #f4f7f9;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 15px 0;
    margin: 30px 0 30px;
    text-align: center;
    color: #333;
}
/* 2つ目のセクションタイトルのマージントップを50pxに変更 */
.selection-section + .selection-section .section-title {
    margin-top: 50px;
}
/* ボタンを並べるグリッド */
.grid-layout {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* ボタン(カード)の基本デザイン */
.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 230px; /* 画像のように幅を揃える */
    min-height: 80px;
    padding: 15px;
    border: 1px solid #0068b6;
    text-decoration: none;
    color: #0068b6;
    font-size: 1.6rem;
    line-height: 1.4;
    transition: background-color 0.2s;
    text-align: center;
    box-sizing: border-box;
    background-color: #fff;
}
.card:hover {
    background-color: #f0faff;
}
.card .sub-text {
    font-size: 1.4rem;
    text-decoration: underline;
    margin-top: 5px;
}

/* 下段(グループ会社)用のボタン幅調整と矢印装飾 */
.bottom-grid .card {
    width: 260px;
    font-size: 1.6rem;
    position: relative;  /* 矢印の絶対配置の基準にする */
    padding-right: 35px; /* 右側に矢印用の余白を確保 */
}

/* 疑似要素で「く」の字型の右向き矢印を作成 */
.bottom-grid .card::after {
    content: "";
    position: absolute;
    right: 20px; /* 右端からの位置 */
    top: 50%;    /* 縦方向の中央に配置 */
    width: 8px;
    height: 8px;
    border-top: 2px solid #0068b6;   /* 上の線 */
    border-right: 2px solid #0068b6; /* 右の線 */
    transform: translateY(-50%) rotate(45deg); /* 中央揃え ＋ 45度回転して右向きに */
    transition: right 0.2s ease; /* ホバー時の動きを滑らかにする */
}

/* ホバー時に矢印を少しだけ右に動かす */
.bottom-grid .card:hover::after {
    right: 15px;
}


/* =========================================================
   スマートフォン用レイアウト (元のcountry_sp.css準拠 + 新レイアウト対応)
========================================================= */
@media (max-width: 767px) {
    body {
        -webkit-text-size-adjust: 100%;
    }

    /* --- ヘッダー (スマホ固定表示) --- */
    header {
        position: fixed;
        width: 100%;
        height: 50px;
        top: -1px;
        padding: 0;
        border-bottom: 1px solid #e5e5e5;
        background-color: #fff;
        z-index: 10001;
    }
    header .comapany_logo_c {
        float: left;
        padding: 8px 0 7px 5px;
        width: 73px;
        height: 35px;
        background: url(https://www.agc-chemicals.com/file.jsp?id=7665) no-repeat center;
        background-size: 73px 35px;
        margin: 0;
    }

    /* --- メインコンテンツ (スマホ用調整) --- */
    .container {
        padding-top: 60px; /* 固定ヘッダーの被りを防ぐ */
    }
    .section-title {
        font-size: 1.8rem;
        margin: 30px 0 20px;
        padding: 12px 0;
    }
    /* 2つ目のセクションタイトルのマージントップを50pxに変更 */
    .selection-section + .selection-section .section-title {
        margin-top: 50px;
    }
    .grid-layout {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .card, .bottom-grid .card {
        width: 95%;
        min-height: 60px;
        padding: 12px;
    }
    
    /* スマホでも矢印の余白を維持 */
    .bottom-grid .card {
        padding-right: 35px; 
    }

    /* --- フッター (スマホ用) --- */
    footer {
        padding: 15px 10px;
        margin-top: 40px;
    }
    .r_side {
        float: none;
        padding: 0 13px;
        overflow: hidden;
    }
    .copy_right {
        float: right;
        padding-top: 10px;
        font-size: 1.0rem;
        margin: 0;
    }
}