@charset "UTF-8";

/* ==========================================================================
   ベース・リセット
   ========================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style:normal;
    font-weight: normal;
    font-size: 14px;
    line-height : 1.6;
    vertical-align: baseline;
    font-feature-settings : "pkna";
}

* html body { background: url(null.UNKNOWN) fixed; }

* { margin: 0; padding: 0; }

html { min-height: 100%; position: relative; }
body {
    font: 15px/1.8 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN',Meiryo,メイリオ,'YuGothic','游ゴシック',Helvetica,Arial,sans-serif;
    letter-spacing: 0.04em;
    margin: 0;
    min-width: 960px;
    height: 100%;
    margin-bottom: 0; /* フッター下の余白を無くす */
}

.clear { clear:both; }

h1 { font-size: 36px; margin-bottom: 8px; }
h2 { font-size: 18px; font-weight: normal; margin-bottom: 24px; letter-spacing: 0.08em; }
h3 { color: #354B99; font-size: 16px; font-weight: normal; line-height: 32px; }
h4 { font-size: 12px; }

/* コンテンツ部分共通 */
.wrap { margin: auto; max-width: 960px; }
.wrap-w { margin: auto; max-width: 1200px; }
#all-contents { position:relative; }

.disp_pc { display: block !important; background-color: #000; }
.disp_sp { display: none !important; background-color: #000; }
@media only screen and (max-width: 750px) {
    .disp_pc { display: none !important; background-color: #000; }
    .disp_sp { display: block !important; background-color: #000; }
}

/* ==========================================================================
   ヘッダー (PC版)
   ========================================================================== */
#fix-menu {
    width: 100%; min-width: 960px; margin: 0 auto;
    border-top: solid 8px #354B99; border-bottom: solid 2px #354B99;
    background-color: #FFF; height: 88px; position:relative;
}
.header-logo { position:absolute; left:36px; width: 240px; height: auto; margin-top: 8px; }
#fix-menu a:hover img { opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; }

#menu { right:36px; position:absolute; font-size: 16px; margin-top: 48px; color: #354B99; }
#menu li { display: block; float: left; margin-left: 16px; padding: 0 0 0 16px; border-left: 1px solid; }
#menu li:first-child { border-left: none; }
#menu li a { display: block; background: #FFF; color: #354B99; text-align: center; text-decoration: none; border-collapse: collapse; }
#menu li.last a { border-right: none; }
#menu li a:hover { opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; }

/* PC版ではハンバーガーアイコンを非表示にする */
#hamburger { display: none; }

/* ==========================================================================
   ニュース
   ========================================================================== */
.newsContents { margin: 0 auto; background: #354B99 none repeat scroll 0 0; color: #FFFFFF; padding-top: 60px; padding-bottom: 80px; }
.newsContents a { text-decoration: none; color: #FFFFFF; }
.newsContents a:hover { opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; color: #C1C1C1; }
.newsContents img, .newsContents .news_img_left, .newsContents .news_img_left a .note { transition: 0.4s ease-in-out; color: #ffffff; }
.newsContents p { color: #FFFFFF; }

.newsTitle { text-align: center; font-weight: bold; font-style: italic; }
.newsSubTitle { text-align: center; color: #FFFFFF; text-decoration: none; }

.newsList { margin: 0 auto; padding: 0; margin-top: 24px; width: 96%; }
.newsList li { border-bottom: 1px solid #FFFFFF; list-style: none; font-size: 16px; padding: 8px 0; }
.newsList li .link { display: flex; align-items: flex-start; padding: 16px 0; letter-spacing: normal; }

.newsList a, .newsList a .description { text-decoration: none; outline: none; }
.newsList a:hover, .newsList a:hover .description { text-decoration: underline; color: #FFFFFF; }
.newsList a:hover img { opacity: 0.5; filter: alpha(opacity=50); transition: all 0.4s ease-out; }
.newsList .text a:hover { text-decoration: underline; color: #5A80FB; }
.newsList li span { font-weight: normal; background: none; }

/* PC版のテキスト折り返しインデント揃え（ニュース・AllNews共通） */
.newsList .lavel, .newsList .label-meyer, .newsList .label-al, 
.newsList .label-optocore, .newsList .label-greengo, .newsList .label-timax,
.AllnewsContents .newsList .lavel, .AllnewsContents .newsList .label-meyer, .AllnewsContents .newsList .label-al, 
.AllnewsContents .newsList .label-optocore, .AllnewsContents .newsList .label-greengo, .AllnewsContents .newsList .label-timax {
    flex-shrink: 0; width: 112px; margin-left: 12px; margin-right: 24px;
    border-radius: 3px; text-align: center; display: inline-block; height: 24px; line-height: 24px; font-size: 12px; word-wrap: break-word; font-weight: bold; color: #FFFFFF;
}
.newsList .date, .AllnewsContents .newsList .date {
    flex-shrink: 0; width: 96px; margin-right: 24px; line-height: 26px; word-wrap: break-word; color: #FFFFFF;
}
.newsList .link > a, .newsList .link > span.note,
.AllnewsContents .newsList .link > a, .AllnewsContents .newsList .link > span.note {
    flex-grow: 1; line-height: 1.6; color: #FFFFFF;
}

/* ニュースラベルカラー */
.newsList .lavel { border: 1px solid #F98E00; background-color: #F98E00; }
.newsList .label-meyer { border: 1px solid #0073E5; background-color: #0073E5; }
.newsList .label-al { border: 1px solid #D33759; background-color: #D33759; }
.newsList .label-optocore { border: 1px solid #56A838; background-color: #56A838; }
.newsList .label-greengo { border: 1px solid #057239; background-color: #057239; }
.newsList .label-timax { border: 1px solid #9641cc; background-color: #9641cc; }
.newsList .hidden { display:none; }

/* ニュース一覧ページ */
.AllnewsContents { margin: 0; background: #FFFFFF none repeat scroll 0 0; width: 100%; color: #354B99; padding-top: 32px; padding-bottom: 40px; }
.AllnewsContents img { margin: 0 auto; padding: 0px; vertical-align: bottom; }
.AllnewsContents a:hover img { opacity: 0.5; filter: alpha(opacity=50); transition: all 0.4s ease-out; }
.AllnewsContents .newsTitle { text-align: center; font-weight: bold; font-style: italic; color: #354B99; }
.AllnewsContents .newsSubTitle { text-align: center; color: #354B99; }
.AllnewsContents .newsList { margin: 0 auto; padding: 0; margin-top: 16px; width: 96%; }
.AllnewsContents .newsList li { border-bottom: 1px solid #354B99; list-style: none; font-size: 16px; }
.AllnewsContents .newsList a, .AllnewsContents .newsList a .description { text-decoration: none; outline: none; color: #354B99; }
.AllnewsContents .newsList a:hover, .AllnewsContents .newsList a:hover .description { text-decoration: underline; color: #354B99; }
.AllnewsContents .newsList .date, .AllnewsContents .newsList .note, .AllnewsContents .newsList .description { color:#354B99; }

/* ==========================================================================
   ブランドリスト（トップページ）
   ========================================================================== */
.brandlistContents { display: inline-block; margin: 0 auto; background: #F9F9F9 none repeat scroll 0 0; width: 100%; color: #354B99; padding:0 0 80px 0; }
.brandlistTitle_wrap { display: inline-block; margin: 0 auto; background: #354B99 none repeat scroll 0 0; width: 100%; color: #F9F9F9; padding-top: 60px; padding-bottom: 40px; }
.brandlistTitle { text-align: center; font-weight: bold; font-style: italic; }
.brandlistSubTitle { text-align: center; }

#brandlistbox_wrap { width: 960px; margin: 0 auto; margin-top: 16px; background: #ffffff none repeat scroll 0 0; }
/* ▼追加：フロート解除（高さ確保） */
#brandlistbox_wrap::after { content: ""; display: block; clear: both; }

/* ▼追加：<ul>タグも横並びにする */
ul.brandlist { float: left; margin: 0; padding: 0; list-style: none; }

.brandlist-left, .brandlist-center, .brandlist-right {
    display: table-cell; float: left; width: 220px; height: 120px; line-height:120px; 
    list-style: none; text-align: center; vertical-align: middle; border:1px solid #eaeaea; background: #ffffff none repeat scroll 0 0; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); transition: all 0.3s ease;
}
.brandlist-left:hover, .brandlist-center:hover, .brandlist-right:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.brandlist-left   { margin:8px 8px 8px 9px; }
.brandlist-center { margin:8px 8px 8px 8px; }
.brandlist-right  { margin:8px 9px 8px 8px; }
.brandlist_image { width: 120px; vertical-align: middle; }
.brandlist a:hover img { opacity: 0.5; transition: all 0.3s ease-out; }

/* ==========================================================================
   メーカーリストページ（PC版）
   ========================================================================== */
.AllmakerListContents { margin: 0 auto; background: #FFFFFF none repeat scroll 0 0; width: 100%; color: #354B99; padding-bottom: 64px; }
.AllmakerListContents .brandlistTitle_wrap { display: inline-block; margin: 0 auto; background: #354B99 none repeat scroll 0 0; width: 100%; color: #F9F9F9; padding-top: 16px; padding-bottom: 20px; }
.AllmakerListContents .brandlistTitle { text-align: center; font-weight: bold; font-style: italic; }
.AllmakerListContents .brandlistSubTitle { text-align: center; }

.AllmakerListContents #brandlistbox_wrap { width: 960px; margin: 0 auto; margin-top: 32px; }
/* ▼追加：フロート解除（高さ確保） */
.AllmakerListContents #brandlistbox_wrap::after { content: ""; display: block; clear: both; }

/* ▼追加：<ul>タグも横並びにする */
.AllmakerListContents ul.brandlist { float: left; margin: 0; padding: 0; list-style: none; }

.AllmakerListContents .brandlist-left, .AllmakerListContents .brandlist-center, .AllmakerListContents .brandlist-right {
    display: table-cell; float: left; width: 220px; height: 120px; line-height:120px; list-style: none; text-align: center; vertical-align: middle; border:1px solid #eaeaea; background: #ffffff none repeat scroll 0 0; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); transition: all 0.3s ease;
}
.AllmakerListContents .brandlist-left:hover, .AllmakerListContents .brandlist-center:hover, .AllmakerListContents .brandlist-right:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); transform: translateY(-2px);
}
.AllmakerListContents .brandlist-left { margin:8px 8px 8px 9px; }
.AllmakerListContents .brandlist-center { margin:8px 8px 8px 8px; }
.AllmakerListContents .brandlist-right { margin:8px 9px 8px 8px; }
.AllmakerListContents .brandlist_image { width: 120px; vertical-align: middle; }
.AllmakerListContents .brandlist a:hover img { opacity: 0.5; transition: all 0.3s ease-out; }

/* ==========================================================================
   商品情報
   ========================================================================== */
.productsContents { display: inline-block; margin: 0 auto; background: #F9F9F9 none repeat scroll 0 0; width: 100%; color: #354B99; padding-top: 60px; padding-bottom: 80px; }
.productsTitle_wrap { display: inline-block; margin: 0 auto; background: #354B99 none repeat scroll 0 0; width: 100%; color: #F9F9F9; padding-top: 16px; padding-bottom: 20px; }
.productsTitle { text-align: center; font-weight: bold; font-style: italic; }
.productsSubTitle { text-align: center; }

.products-brand { width: 100%; margin-bottom:16px; text-align:center; }
.products-brand .line{ width: 100%; position:relative; display:inline-block; }
.products-brand .line:before, .products-brand .line:after{ content:""; display:block; width:360px; border-bottom:1px solid #cbcbcb; position:absolute; top:60%; }
.products-brand .line:before{left:0px;}
.products-brand .line:after{right:0px;}
.products-brandlist_image { margin:48px 0px 16px 32px ; width: 12%; }

.productsContents .products-listbox {
    display: table-cell; width:220px; height: 280px; position: relative; margin: 8px; float:left; background: #ffffff none repeat scroll 0 0; border: 1px solid #eaeaea; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); transition: all 0.3s ease;
}
.productsContents .products-listbox:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); transform: translateY(-4px); }
.productsContents .products-listbox a:hover img, .productsContents .products-listbox a:hover p { opacity: 0.5; transition: all 0.3s ease-out; }

.productsContents .products-title { position: absolute; top: 8%; color: #606060; width: 100%; max-width: 600px; padding: 0.5em 0em; z-index:99; }
.productsContents .products-title p { margin: 0; padding: 0 0.8em; text-align: center; font-size: 120%; line-height : 1.2 ; }
.productsContents .products-img { position: absolute; bottom:0; width: 100%; max-width: 600px; z-index:98; }
.productsContents .products-text { position: absolute; top: 24%; color: #606060; width: 100%; max-width: 600px; padding: 0.5em 0em; z-index:99; }
.productsContents .products-text p { margin: 0; padding: 0 0.8em; text-align: center; font-size: 80%; }

/* 背景画像指定 */
.productsContents-bg { margin: 0 auto; width: 960px; height: 320px; background-image: url(../image/Meyer-products.jpg); }
.timax-productsContents-bg { margin: 0 auto; width: 960px; height: 320px; background-image: url(../image/TiMax-products.jpg); }
.al-productsContents-bg { margin: 0 auto; width: 960px; height: 320px; background-image: url(../image/al-products.jpg); }
.greengo-productsContents-bg { margin: 0 auto; width: 960px; height: 360px; background-image: url(../image/greengo-products.jpg); }
.greengo-productsContents-subsub-bg { margin: 0 auto; width: 960px; height: 320px; background-image: url(../image/greengo-products-sub.jpg); }
.worksContents-bg { width: 100%; height: 320px; background-image: url(../image/Meyer-introduction.jpg); }
.greengo-worksContents-bg { margin:0 auto; width: 100%; height: 320px; background-image: url(../image/Greengo-introduction.jpg); }
.al-worksContents-bg { width: 100%; height: 320px; background-image: url(../image/al-introduction.jpg); }
.optocore-worksContents-bg { width: 100%; height: 320px; background-image: url(../image/optocore-introduction.jpg); }
.timax-worksContents-bg { margin: 0 auto; width: 960px; height: 320px; background-image: url(../image/TiMax-introduction_TTd4.jpg); }

/* ==========================================================================
   その他のページコンテンツ
   ========================================================================== */
/* 臨時コンテンツ */
.extraContents { margin: 0 auto; background: #FFFFFF none repeat scroll 0 0; width: 100%; color: #354B99; padding-top: 60px; padding-bottom: 80px; }
.extraTitle { text-align: center; font-weight: bold; font-style: italic; }
.extraSubTitle { text-align: center; }
.extrawrap { margin: 0 auto; display: block; width: 620px; }
.extraText { width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid #354B99; list-style: none; font-size: 16px; }

/* 会社概要 */
.companyContents { display: block; margin: 0 auto; background: #354B99 none repeat scroll 0 0; width: 100%; color: #354B99; padding-top:32px; padding-bottom:40px; }
.companyTitle { color: #ffffff; text-align: center; font-weight: bold; font-style: italic; }
.companySubTitle { color: #ffffff; text-align: center; }
.company_contents{ padding-top:32px; }
.company_table{ margin: 0 auto; display: table; width: 640px; text-align: center; vertical-align: middle; }
.company_table_item{ background: #ffffff none repeat scroll 0 0; display:table-cell; width: 160px; height: 80px; border:1px solid #354B99; padding-left: 20px; text-align: left; vertical-align: middle; }
.company_table_contents{ background: #ffffff none repeat scroll 0 0; display:table-cell; border:1px solid #354B99; font-size: 14px; padding-left: 20px; text-align: left; vertical-align: middle; }

/* アクセス Map */
.accessContents { display: block; margin: 0 auto; background: #F9F9F9 none repeat scroll 0 0; width: 100%; color: #354B99; }
.accessmap { padding-top: 32px; }
.accessTitle { font-size: 24px; text-align: center; font-weight: bold; padding-bottom: 24px; }
.accessSubTitle { font-size: 16px; text-align: center; padding-bottom: 24px; }

/* お問い合わせフォーム */
.formContents { display: block; margin: 0 auto; background: #ffffff none repeat scroll 0 0; width: 100%; color: #354B99; padding-top:32px; padding-bottom:40px; }
.formTitle { color: #354B99; text-align: center; font-weight: bold; font-style: italic; }
.formSubTitle { color: #354B99; text-align: center; }
#form label.type-text { display: inline-block; float:left; font-size: 14px; font-weight:bold; width: 300px; text-align: left; vertical-align: middle; margin-left:50px; }
#form ul { list-style: none; }
#form li.form_line { padding-top:20px; padding-bottom:20px; border-bottom:solid 1px #354B99; }
.form-control { background-color: #fff; border: 1px solid #ccc; border-radius: 1px; color: #555; display: inline-block; font-size: 14px; padding: 6px 12px; width: 50%; }
.form-control-contents { background-color: #fff; border: 1px solid #ccc; border-radius: 1px; color: #555; display: inline-block; font-size: 14px; height: 150px; padding: 6px 12px; width: 50%; }
.checkbox_group{ display: inline-block; }
input[type=checkbox] { display: none; }
.check_css { transition: background-color 0.2s linear; position: relative; display: inline-block; padding: 0 0 0 42px; vertical-align: middle; cursor: pointer; }
.check_css:after { position: absolute; top: 50%; left: 15px; display: block; margin-top: -10px; width: 16px; height: 16px; border: 2px solid #ccc; border-radius: 6px; content: ''; }
.check_css:before { position: absolute; top: 50%; left: 21px; display: block; margin-top: -7px; width: 5px; height: 9px; border-right: 3px solid #0171bd; border-bottom: 3px solid #0171bd; content: ''; opacity: 0; transform: rotate(45deg); }
input[type=checkbox]:checked + .check_css:before { opacity: 1; }
.btn { margin:0 auto; background-color: #354B99; color: #ffffff; cursor: pointer; display: block; font-size: 14px; padding: 8px 24px; margin-top: 50px; text-align: center; }

/* 採用・ENGLISH・商品詳細 */
.recruitContents, .englishContents, .productDescriptionContents { display: block; margin: 0 auto; background: #FFFFFF none repeat scroll 0 0; width: 100%; color: #354B99; padding-top:32px; padding-bottom:40px; }
.recruitTitle, .englishContents .contentsTitle { text-align: center; font-weight: bold; font-style: italic; }
.recruitContents .contensTitle { text-align: center; font-size:24px; font-weight:bold; margin:60px 0 16px 0; }
.recruitContents .contensSubText { text-align: center; font-size:16px; margin:8px 0 24px 0; }
.recruitContents table { border-collapse: collapse; width: 100%; }
.recruitContents table td { padding: 10px; color:#4D4D4D; border-bottom: 1px solid #354B99; }
.recruitContents table td:first-child{ font-weight: bold; color:#354B99; }
.englishContents .contensText { display: block; margin: 0 auto; width: 70%; }
.englishContents .contensText p { font-size:16px; }

/* ==========================================================================
   フッター (PC版・ベース)
   ========================================================================== */
.footer {
    background: #474747;
    box-sizing: border-box;
    color: #969696;
    font-size: 14px;
    width: 100%;
    padding: 40px 0;
    min-width: 960px;
}
.footer .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer a { text-decoration: none; color: #969696; transition: opacity 0.3s ease; }
.footer a:hover { opacity: 0.5; }

/* メニューとロゴ */
.footer-menu { width: 100%; }
.footer-menu ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; }
.footer-menu li { display: flex; align-items: center; }
.footer-menu li:not(:last-child)::after { content: "|"; color: #666; margin-left: 20px; }
.footer-logo img { max-width: 140px; height: auto; display: block; }

/* SNSリンク */
.Facebook_footer { display: flex; align-items: center; justify-content: center; gap: 15px; font-size: 14px; }
.footer .snslink_image { width: 30px; vertical-align: middle; }

/* ブランドリスト */
.footer-brandlist { width: 100%; }
.footer-brandlist ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.footer-brandlist li a { font-weight: bold; letter-spacing: 1px; font-size: 15px; }

/* 住所・コピーライト */
.footer-adress { width: 100%; text-align: center; line-height: 1.8; font-size: 13px; }
.footer-adress ul { display: flex; flex-direction: column; align-items: center; }
.footer-adress li { margin: 0; }
.footer-copyright { text-align: center; letter-spacing: 1px; color: #888; font-size: 13px; }


/* ==========================================================================
   PC用リセット：スマホの開閉メニューの影響を打ち消して常に表示する
   ========================================================================== */
@media screen and (min-width: 768px) {
    #menu { display: block !important; position: absolute !important; }
    #hamburger { display: none !important; }
}

/* ==========================================================================
   タブレット用レスポンシブ対応 (画面幅959px以下)
   ========================================================================== */
@media screen and (max-width: 959px) {
    /* フッター */
    .footer { min-width: 0; padding: 40px 10px; }
    .footer-menu ul { gap: 10px 16px; }
    .footer-menu li:first-child { width: 100%; justify-content: center; margin-bottom: 16px; }
    .footer-menu li::after { display: none !important; }
    .footer-brandlist ul { gap: 10px 16px; }
    
    /* フォーム */
    #form label.type-text { display: block; float: none; width: 100%; margin: 0 0 8px 0; }
    .form-control, .form-control-contents { width: 100%; box-sizing: border-box; }
    .checkbox_group { display: block; width: 100%; margin-top: 8px; }
    .check_css { margin-bottom: 12px; display: block; }
}

/* ==========================================================================
   スマートフォン用レスポンシブ対応 (画面幅767px以下)
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* --------------------------------------------------
       1. 基本設定
    -------------------------------------------------- */
    body { min-width: auto; margin-bottom: 0; }
    .wrap, .wrap-w, .extrawrap, .company_table, .englishContents .contensText { width: 100%; padding: 0 10px; box-sizing: border-box; }

    /* --------------------------------------------------
       2. ヘッダー・ハンバーガーメニュー
    -------------------------------------------------- */
    #fix-menu { width: 100%; min-width: 0; height: 60px; padding-bottom: 0; position: relative; z-index: 9999; }
    #menu-box { width: 100%; position: relative; height: 100%; }
    .header-logo { position: absolute; top: 15px; left: 15px; width: 150px; margin: 0; display: block; }
    
    #hamburger { display: block; position: absolute; top: 18px; right: 15px; width: 30px; height: 24px; cursor: pointer; z-index: 10000; }
    #hamburger span { display: block; position: absolute; width: 100%; height: 3px; background-color: #354B99; border-radius: 2px; transition: all 0.3s ease-in-out; }
    #hamburger span:nth-child(1) { top: 0; }
    #hamburger span:nth-child(2) { top: 10px; }
    #hamburger span:nth-child(3) { bottom: 0; }
    #hamburger.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    #hamburger.active span:nth-child(2) { opacity: 0; }
    #hamburger.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    #menu { display: none; position: absolute; top: 60px; left: 0; width: 100%; background-color: #FFF; margin: 0; padding: 0; border-top: 1px solid #eee; border-bottom: 2px solid #354B99; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 9998; }
    #menu li { width: 100%; margin: 0; border-left: none; border-bottom: 1px solid #eee; display: block; float: none; padding: 0; }
    #menu li:last-child { border-bottom: none; }
    #menu li a { display: block; padding: 16px; text-align: center; font-size: 15px; color: #354B99; text-decoration: none; }

    /* --------------------------------------------------
       3. ブランドロゴ（2列レイアウト）
       ※トップページとメーカーリストページのスマホ版
    -------------------------------------------------- */
    #brandlistbox_wrap, .AllmakerListContents #brandlistbox_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; padding: 0; box-sizing: border-box; }
    ul.brandlist, .AllmakerListContents ul.brandlist { width: 48%; margin: 0 0 4% 0; display: block; padding: 0; float: none; }
    ul.brandlist a { display: block; width: 100%; height: 100%; text-decoration: none; }
    
    .brandlist-left, .brandlist-center, .brandlist-right,
    .AllmakerListContents .brandlist-left, .AllmakerListContents .brandlist-center, .AllmakerListContents .brandlist-right {
        width: 100%; height: auto; aspect-ratio: 220 / 120; margin: 0; float: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 6px;
    }
    .brandlist_image, .AllmakerListContents .brandlist_image { width: 54.5%; max-width: 100%; height: auto; }

    /* --------------------------------------------------
       4. ニュースリスト
    -------------------------------------------------- */
    .newsList li .link, .AllnewsContents .newsList li .link { display: block; padding: 16px 10px; letter-spacing: normal; }
    .newsList .lavel, .newsList .label-meyer, .newsList .label-al, 
    .newsList .label-optocore, .newsList .label-greengo, .newsList .label-timax,
    .AllnewsContents .newsList .lavel, .AllnewsContents .newsList .label-meyer, .AllnewsContents .newsList .label-al, 
    .AllnewsContents .newsList .label-optocore, .AllnewsContents .newsList .label-greengo, .AllnewsContents .newsList .label-timax {
        display: inline-block; margin: 0 12px 8px 0; vertical-align: middle; border-radius: 3px; width: 90px; font-size: 11px; text-align: center;
    }
    .newsList .date, .AllnewsContents .newsList .date { display: inline-block; margin: 0 0 8px 0; vertical-align: middle; width: auto; font-size: 13px; }
    .newsList a, .newsList .note, .newsList .description,
    .AllnewsContents .newsList a, .AllnewsContents .newsList .note, .AllnewsContents .newsList .description {
        display: block; padding-left: 0; width: 100%; line-height: 1.6; margin-top: 4px;
    }

    /* --------------------------------------------------
       5. 製品情報
    -------------------------------------------------- */
    .productsContents h1.productsTitle { width: 100%; font-size: 28px; margin-bottom: 4px; text-align: center; }
    .productsContents h2.productsSubTitle { width: 100%; font-size: 14px; margin-bottom: 32px; text-align: center; }
    .productsContents .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .products-brand { width: 100%; text-align: center; margin-bottom: 24px; }
    .products-brand .line { width: 100%; display: block; position: relative; }
    .products-brand .line:before, .products-brand .line:after { width: 30%; top: 50%; }
    .products-brandlist_image { margin: 0; display: inline-block; width: auto; max-width: 35%; vertical-align: middle; }
    .clear { width: 100%; }

    .productsContents .products-listbox { width: 48%; margin: 0 0 16px 0; float: none; height: auto; box-sizing: border-box; border-radius: 6px; }
    .productsContents .products-listbox a { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 12px 6px; height: 100%; box-sizing: border-box; text-decoration: none; color: #606060; }
    .productsContents .products-title, .productsContents .products-text, .productsContents .products-img { position: static; width: 100%; max-width: 100%; padding: 0; background: none; }
    .productsContents .products-title p { font-size: 13px; margin-bottom: 8px; line-height: 1.2; }
    .productsContents .products-img { margin: 0 auto 12px auto; width: 90%; }
    .productsContents .products-text p { font-size: 11px; line-height: 1.4; }

    /* --------------------------------------------------
       6. その他・背景画像
    -------------------------------------------------- */
    .company_table, .company_table_item, .company_table_contents { display: block; width: 100%; height: auto; box-sizing: border-box; }
    .company_table_item { border-bottom: none; background: #f0f0f0; padding: 10px; }
    .company_table_contents { padding: 16px 10px; margin-bottom: -1px; }

    .productsContents-bg, .timax-productsContents-bg, .al-productsContents-bg, 
    .greengo-productsContents-bg, .worksContents-bg, .greengo-worksContents-bg, 
    .al-worksContents-bg, .optocore-worksContents-bg, .timax-worksContents-bg, 
    .greengo-productsContents-subsub-bg { width: 100%; background-size: cover; background-position: center; height: auto; padding: 40px 0; }
    .greengo-productsContents-sub-bg { width: 90%; }

    /* --------------------------------------------------
       7. フッター（スマホ時の微調整）
    -------------------------------------------------- */
    .footer { padding: 30px 10px; }
    .footer .wrap { gap: 20px; }
    .footer-logo img { max-width: 180px; margin: 0 auto; }
    .footer-brandlist li a { font-size: 13px; }
    .Facebook_footer { font-size: 12px; }
}