@charset "utf-8"; /* =================================================================== サイト共通の追加スタイル（静的化で追加したもの。旧テーマの CSS の後に読み込む） ・全幅共通: スライダー、静的化で追加した部品（年別リンク・動画・地図リンク等） ・幅 1214px 以下: 左上の固定の星（#bg_star）を非表示 ・幅 767px 以下: スマートフォン用。旧テーマ（幅 987px 固定・float レイアウト）を 1 段組みに組み替える 旧テーマのデザインを変える指定はメディアクエリの中だけに書く（幅 1215px 以上の PC 表示は旧テーマのまま）。 =================================================================== */ /* ---- トップのスライダー（/common/slider.js）---- 旧プラグイン wp-cycle が全ページの に出力していた #rotator の指定をここへ移した */ #rotator { position: relative; width: 987px; height: 335px; margin: 0; padding: 0; overflow: hidden; } #rotator > * { position: absolute; top: 0; left: 0; transition: opacity 1s linear; /* 1 秒かけてフェード（旧: jquery.cycle の speed: 1000） */ } #rotator > * + * { opacity: 0; } /* スクリプトが動かない場合は 1 枚目だけを表示 */ #rotator.is-ready > * { opacity: 0; } #rotator.is-ready > .is-active { opacity: 1; } /* ---- ヘッダー: SNS アイコンを削除した跡の空要素（メニューの位置を保つため、アイコンと同じ高さ）---- */ .snsbox-spacer { display: inline-block; height: 24px; } /* ---- フッター: 「より大きな地図で Starchip を表示」のリンク ---- */ .map-link { color: #0000FF; text-align: left; } /* ---- 年別の記事一覧へのリンク（WHAT'S NEWS・SOCIETY INFORMATION の一覧）---- */ .year-archives { clear: both; padding-top: 20px; } .entry .year-archives h3 { font-size: 15px; margin-bottom: 10px; } .year-archives ul { list-style: none; margin: 0; padding: 0; } .year-archives li { display: inline-block; margin: 0 20px 8px 0; } /* ---- ページ送り（現在は未使用。今後使う場合のために残している）---- 旧プラグイン WP-PageNavi の pagenavi-css.css を移植（class 名は wp-pagenavi → pagenavi）。 書き方の例（右寄せは旧テーマの .entry .pagenav による）:
2 / 5«123»
*/ .pagenavi { clear: both; } .pagenavi a, .pagenavi span { text-decoration: none; border: 1px solid #BFBFBF; padding: 3px 5px; margin: 2px; } .pagenavi a:hover, .pagenavi span.current { border-color: #000; } .pagenavi span.current { font-weight: bold; } /* ---- YouTube 動画（ITMシステムの使い方）---- */ .video-embed { max-width: 560px; margin: 10px 0; } .video-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; } /* 左上の星（位置固定、左 10px・幅 86px で右端 96px）が #wrap（幅 1023px・中央寄せ）に重なる幅では非表示。 #wrap の左端 = (画面幅 - 1023) / 2 が 96px 未満になるのは画面幅 1215px 未満 */ @media screen and (max-width: 1214px) { #bg_star { display: none; } } @media screen and (max-width: 767px) { /* ---- 全体 ---- */ html { -webkit-text-size-adjust: 100%; } body { font-size: 14px; } img { max-width: 100%; height: auto; } /* ---- ヘッダー ---- */ #headerbox { height: auto; } header { width: auto; padding: 0 12px; } header h1 { float: none; padding-top: 14px; text-align: center; } header h1 img { width: 160px; } #header_detailbox { float: none; width: auto; } #snsbox { display: none; } .mainnav { padding: 8px 0 6px; text-align: center; } .mainnav ul { display: flex; flex-wrap: wrap; justify-content: center; } .mainnav ul li { float: none; } .mainnav li a, .mainnav li a:hover { display: block; padding: 6px 9px; font-size: 13px; } #headerbox br.clearfloat { display: none; } /* PC の回り込み解除用。1 行分の空きになるため非表示 */ /* ---- 本文の枠 ---- */ #wrap { width: auto; padding: 15px 12px 50px; } .infomation { width: auto; float: none; } #sidebar { width: auto; float: none; margin-top: 30px; } #sidebar p { text-align: center; } /* バナー（お電話・講習会）を中央に */ /* ---- トップ: スライダー（画面幅に合わせて縮小）---- */ #rotator { width: 100%; height: auto; aspect-ratio: 987 / 335; } #rotator img { width: 100%; height: auto; } /* ---- トップ: PICK UP（2 列） ---- */ .pickupbox { width: 50%; min-height: 0; padding: 0 5px 15px; box-sizing: border-box; } .pickupbox:nth-of-type(2n+1) { clear: left; } .pickupbox .edit { font-size: 11px; line-height: 1.5; } /* ---- トップ・一覧: 見出しと記事リスト ---- */ .view_btn { left: auto; right: 0; } .newsbox { padding: 0 0 25px; } .newsdetail .date, .newsdetail .title { float: none; width: auto; line-height: 1.6; } .newsdetail .date { border-bottom: none; padding-top: 8px; font-size: 12px; } .newsdetail .title { padding-bottom: 8px; } .newsdetail br.clearfloat { display: none; } .contents03 h2 { margin: 20px 0; } /* ---- 下層ページ: タイトル部分 ---- */ #page_titlebox { padding-bottom: 20px; } #page_titlebox .images, #page_titlebox .titlebox { float: none; width: auto; } #page_titlebox .titlebox { margin-top: 10px; } .titlebox .title { font-size: 20px; } .titlebox .sabtitle { font-size: 16px; } .titlebox02 .sabtitle { font-size: 18px; padding-top: 12px; } /* ---- 本文 ---- */ .entry { overflow-wrap: anywhere; } /* 「****…」など区切りのない長い文字列を折り返す */ .entry img { max-width: 100%; height: auto; } .entry table { max-width: 100%; } /* class なしの表は「文章＋写真」を横に並べるためのレイアウト用（会社概要・お客さまの声など）→ 縦に積む */ .entry table:not([class]), .entry table:not([class]) > tbody, .entry table:not([class]) > tbody > tr, .entry table:not([class]) > tbody > tr > td { display: block; width: auto !important; } .entry table:not([class]) > tbody > tr > td { padding: 0 0 10px !important; } /* 縦に積んだ表の写真（お客さまの声・会社概要）を中央に */ .entry table:not([class]) > tbody > tr > td > img { display: block; margin: 0 auto; } .entry iframe { max-width: 100%; } .pickupbox02 { width: 50%; min-height: 0; padding: 0 5px 15px; box-sizing: border-box; } .pickupbox03 .title01 { font-size: 15px; } /* ---- フッター ---- */ /* PC 用の背景画像 footer_bg.png（高さ 347px 固定・線入り）は縦に伸びたフッターに合わないため、 線を除いた footer_bg_l.png を縦横に繰り返し、線は CSS で描く ・上端: #000000 → #666666（各 1px。元画像の上端と同じ） ・コピーライトの上: #333333 → #222222（各 1px。address 側で描く） */ footer { height: auto; background: #3a3c3b url(../assets/images/footer_bg_l.png) repeat left top; /* このファイル（/common/）からの相対パス */ border-top: 1px solid #000; box-shadow: inset 0 1px 0 #666; } #footer_detail { width: auto; padding: 20px 12px 10px; } .footerbox { width: auto; height: auto; float: none; padding: 0 0 20px; } .footerbox table { width: 100%; } .footerbox iframe { width: 100%; } address { width: auto; padding: 0 12px; border-top: 1px solid #333; box-shadow: inset 0 1px 0 #222; } }