#wpfront-notification-bar, #wpfront-notification-bar-editor { background: #fd8224; background: -moz-linear-gradient(top, #fd8224 0%, #fd8224 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fd8224), color-stop(100%,#fd8224)); background: -webkit-linear-gradient(top, #fd8224 0%,#fd8224 100%); background: -o-linear-gradient(top, #fd8224 0%,#fd8224 100%); background: -ms-linear-gradient(top, #fd8224 0%,#fd8224 100%); background: linear-gradient(to bottom, #fd8224 0%, #fd8224 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd8224', endColorstr='#fd8224',GradientType=0 ); background-repeat: no-repeat; flex-direction: column; } #wpfront-notification-bar div.wpfront-message, #wpfront-notification-bar-editor.wpfront-message { color: #ffffff; width: 100% } #wpfront-notification-bar a.wpfront-button, #wpfront-notification-bar-editor a.wpfront-button { background: #00b7ea; background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); background: linear-gradient(to bottom, #00b7ea 0%, #009ec3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); background-repeat: no-repeat; color: #ffffff; } #wpfront-notification-bar-open-button { background-color: #00b7ea; right: 10px; } #wpfront-notification-bar-open-button.top { background-image: url(https://musashino.ac/cms/wp-content/plugins/wpfront-notification-bar/images/arrow_down.png); } #wpfront-notification-bar-open-button.bottom { background-image: url(https://musashino.ac/cms/wp-content/plugins/wpfront-notification-bar/images/arrow_up.png); } #wpfront-notification-bar-table, .wpfront-notification-bar tbody, .wpfront-notification-bar tr { width: 100% } #wpfront-notification-bar div.wpfront-close { border: 1px solid #555555; background-color: #555555; color: #000000; } #wpfront-notification-bar div.wpfront-close:hover { border: 1px solid #aaaaaa; background-color: #aaaaaa; } #wpfront-notification-bar-spacer { display:block; }/* =================================================== WPFront Notification Bar 決定版レイアウトCSS =================================================== */ /* --- 1. 基本リセット＆タグの位置補正 --- */ #wpfront-notification-bar { box-sizing: border-box !important; } /* ボタンの親ラッパー：中央揃え */ .nb-container .or-but { text-align: center !important; margin-top: 14px !important; width: 100% !important; } /* ボタンリンク本体：右カラムの50%幅・中央寄せ */ .nb-container .or-but a, .or-but a { display: block !important; /* 幅指定とマージン中央寄せを効かせる */ width: 50% !important; /* 右カラム（親要素）に対して50%幅 */ min-width: 240px !important; /* 画面が狭くなった時に文字が潰れない最小幅 */ max-width: 360px !important; /* ワイド画面で間延びしすぎない最大幅 */ margin: 0 auto !important; /* 左右中央配置 */ padding: 12px 16px !important; background-color: #000000 !important; color: #ffffff !important; font-family: 'M PLUS 1', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; border-radius: 4px !important; box-sizing: border-box !important; white-space: nowrap !important; /* テキストの改行を防止 */ letter-spacing: 0.04em !important; box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important; transition: opacity 0.2s ease, transform 0.1s ease !important; } .nb-container .or-but a:hover, .or-but a:hover { opacity: 0.85 !important; color: #ffffff !important; text-decoration: none !important; transform: translateY(-1px) !important; } #wpfront-notification-bar table { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; border-collapse: collapse !important; } /* 「イベント」タグの引き上げ（マイナスマージン等）を無効化 */ #wpfront-notification-bar .adcat, .nb-container .adcat, p.adcat, span.adcat { position: static !important; top: auto !important; bottom: auto !important; transform: none !important; margin-top: 0 !important; display: inline-block !important; font-size: 18px !important; font-weight: 600 !important; padding: 10px 10px !important; border-radius: 3px !important; background-color: rgba(255, 255, 255, 0.28) !important; color: #ffffff !important; letter-spacing: 0.05em !important; margin-bottom: 10px !important; width: 50%; } /* =================================================== PC表示（769px以上）：画像35% / テキスト65% で完全固定 =================================================== */ @media screen and (min-width: 769px) { /* テーブルの各セル（左右カラム）を強制比率化 */ .nb-container { display: table !important; width: 100% !important; table-layout: fixed !important; /* 横幅の比率を厳密に固定 */ } /* 左側（バナー画像）：横幅35% */ .nb-container .left-col { display: table-cell !important; width: 35% !important; vertical-align: middle !important; padding: 12px 0 12px 16px !important; box-sizing: border-box !important; } .nb-desc { line-height: 150% !important; text-align: left !important; } h3.nb-title { font-size: 26px; font-weight: 800 !important; line-height: 150%; margin-top: 0.25em; } .nb-container .left-col img, .nb-container .left-col img.alignleft { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; float: none !important; margin: 0 auto !important; } /* 右側（テキストエリア）：横幅65% */ .nb-container .right-col { display: table-cell !important; width: 65% !important; vertical-align: middle !important; padding: 16px 28px 16px 32px !important; } } /* スマホ表示（768px以下）では押しやすいよう少し幅を広げる（約80%〜最大280px） */ @media screen and (max-width: 768px) { .nb-container .nb-container .or-but a, .or-but a { width: 80% !important; min-width: unset !important; max-width: 280px !important; font-size: 14px !important; padding: 11px 16px !important; } .nb-container .right-col .nb-title { margin-top: 0.25em !important; } .nb-container .right-col .nb-desc { margin-bottom: 0.75em !important; line-height: 150% !important; } .nb-container .right-col h3 br { display: none; } .nb-container .right-col { padding: 16px !important; } }