@charset "utf-8"; /*============================================================================== 【common】 ================================================================================*/ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; scroll-padding-top: var(--header-height, 0px); /*scroll-behavior: smooth;*/ /*margin: 0 auto; max-width: 1920px;*/} body { background: #fff; color:#2D2D2D; font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))), 16px); font-family: "Noto Sans JP", sans-serif; font-weight: 400; line-height: 1.5; margin:0 auto; padding:0; text-size-adjust: 100%; overflow-x: hidden; position:relative; width:100%; -webkit-text-size-adjust: 100%;} /*------------------------------------------------ グローバルメニューの開始幅で設定 ------------------------------------------------*/ @media screen and (min-width: 0px) and (max-width: 1250px){ html,body { overflow-x: hidden;} html, body, #app { touch-action: pan-y; overscroll-behavior-x: contain;} body.menu-open { overflow: hidden; position: relative; height: 100vh;} } img, picture, video, canvas, svg { display: block; height: auto; min-width: 0; max-width: 100%;} ul, ol, li { list-style:none; padding:0; margin:0; } a, a:active, a:focus, a:hover { color: #2D2D2D; text-decoration: none;} a img { border-style:none; backface-visibility:hidden;} a:hover img { text-decoration: none;} input, button, textarea, select, fieldset { font-family: inherit; font-size: 100%; margin: 0;} button, input[type="button"], input[type="submit"] { cursor: pointer;} .clearfix:before, .clearfix:after { content:" "; display:table; } .clearfix:after { clear:both; } /*------------------------------------------------------- hover時の基本の挙動 -------------------------------------------------------*/ a, img { transition: 0.3s ease-in-out; } a:hover img { opacity: 0.8; } /*------------------------------------------------------- Bootstrapのガター調整 -------------------------------------------------------*/ .no-gutter { margin-left: 0; margin-right: 0;} .no-gutter > [class*="col-"] { padding-left: 0; padding-right: 0;} /*------------------------------------------------------- 【文字色の指定】 -------------------------------------------------------*/ .color_blue { color: #1877F2;} /*「ビジネス」*/ .color_orange { color: #FF3B00;} /*「エンタメ」*/ .color_lightblue { color: #1C91FF;} /*------------------------------------------------------- 地図の比率を維持させながらレスポンシブさせる処理 ・使用例：
※アスペクト比は600x450の想定なので4/3 -------------------------------------------------------*/ .map_wrap { aspect-ratio: 4 / 3; position: relative; width: 100%;} .map_wrap iframe { border: 0; height: 100%; position: absolute; top: 0; left: 0; width: 100%;} /*------------------------------------------------ 下層の背景 ------------------------------------------------*/ body#bizwaveLower { background: #F2F4F9; } /*================================================================================ 【基本のレイアウト】 ================================================================================*/ /*メインカラムとサイドバーを横並びにする*/ .main-sidebar { display: flex; align-content: flex-start; gap: 24px;} /*メインカラム*/ #main_column { flex: 894; /*max-width: 894px;*/} /*サイドバー*/ #sidebar { flex: 282; /*max-width: 282px;*/} /*トップページでは非表示*/ @media screen and (max-width: 991px) { /*総合トップでは非表示に（コンテンツの並びが異なる為）*/ #bizwaveTop #sidebar {display: none;} /*下層ではメインカラムの後ろに付ける*/ #bizwaveLower .main-sidebar { display: flex; align-content: flex-start; flex-direction: column; gap: 24px;} } /*================================================================================ 【コンテンツ用の見えない内枠】 ================================================================================*/ .cont_wrap1200 { margin: 0 auto; padding: 38px 10px; max-width: 1200px; width: 100%;} @media (max-width: 991px) { .cont_wrap1200 { padding: 20px 15px;} /*LRのpaddingを無効にしたい場合*/ .not_LR_padding { padding-right: 0; padding-left: 0;} } /*============================================================================== 【ヘッダー】 [header] 　├[header_up] 　｜　　└[header_left] ── [header_center] ── [header_right] 　｜　　　└ロゴ　　　　　　　└テキストメニュー　└SNSと検索フォーム 　└[header_bottom] 　　　　└[ul.scroll_links] 　　　　└横スクロールメニュー ※ハンバーガーメニューの「三」は見た目はheaderの上に乗せていますが、 制御しやすいようにheaderの外に置いてあります。 ==============================================================================*/ header { background: #fff; border-bottom: 1px solid #eee; margin: 0 auto; padding: 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; flex-wrap: wrap; transition: transform 0.3s ease;} /*headerはブラウザをスクロールすると基本隠れて、 少しでも上に戻るとまた出てくる仕様です 挙動はcommon.js内に記述しています。 -------------------------------------------------------*/ /*スクロールしたら上に隠す*/ header.is-hide { transform: translateY(-100%); } /*headrの外で管理しているハンバーガーメニューのボタンも隠す*/ button#menu_trigger.is-hide { display: none; } /*======================================================= 【ヘッダー上部】 「ロゴ」「テキストメニュー」「SNS・検索フォーム」を囲っている枠 =======================================================*/ .header_up {display: flex; align-items: center; justify-content: center; margin: 0 auto; padding: 12px 0; max-width: 1920px;} @media (max-width: 1250px) { .header_up {display: flex; align-items: center; justify-content: space-between; } } /*======================================================= 【ヘッダー上部】【左端】ロゴの大枠 =======================================================*/ .header_left { display: flex; align-items: center; padding: 0 0 0 12px; } /*【左端】ロゴ -------------------------------------------------------*/ .header_left h1 { margin: 0;} .header_left h1 img { height: 41px; width: auto;} /*テキスト*/ .header_left h1 span { display: block; font-family: "a-otf-gothic-mb101-pr6n", sans-serif; font-size: 12px; font-weight: 600; line-height: 1; margin: 8px 0 0 0; padding: 0;} /*SPでは少し小さく*/ @media (max-width: 991px) { .header_left h1 img { height: 35px; width: auto;} .header_left h1 span { font-size: 10px; } } @media (max-width: 630px) { .header_left h1 img { height: 30px; width: auto;} .header_left h1 span { font-size: 8.6px; } } @media (max-width: 320px) { .header_left h1 img { height: 22px; width: auto;} } /*======================================================= 【ヘッダー上部】【真ん中】テキストメニューの大枠 =======================================================*/ .header_center { display: flex; align-items: center; flex: 1; justify-content: center; } @media (max-width: 1250px) { .header_center { display: none; } } /*【真ん中】テキストメニュー -------------------------------------------------------*/ nav ul.nav_links { display: flex; gap: 40px; margin: 0; padding: 0; } /*1460で縮める*/ @media (max-width: 1460px) { nav ul.nav_links { gap: 18px;} } nav ul.nav_links li { } nav ul.nav_links li span {font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))), 16px); font-weight: 500; line-height: 1; } /*======================================================= 【ヘッダー上部】【右】SNSと検索フォームの大枠 gapはSNSと検索フォームの間の隙間、 padding-rightは「三」のサイズ（30px）とデザイン上の隙間の40pxの合計で70px =======================================================*/ .header_right { display: flex; align-items: center; justify-content: flex-end; gap: 28px; padding-right: 70px; } /*1460で縮める*/ @media (max-width: 1460px) { .header_right { gap: 14px; padding-right: 55px; } } /*【右】ハンバーガーメニュー展開前かつPCでだけ表示する枠 …この場合はSNSリンクと検索フォームの2つ -------------------------------------------------------*/ .pc_only { display: flex; align-items: center; gap: 40px; } /*1460で縮める*/ @media (max-width: 1460px) { .pc_only { gap: 20px; } } @media (max-width: 1250px) { .pc_only { display: none; } } /*【右】SNSリンク -------------------------------------------------------*/ ul.sns_links { display: flex; justify-content: center; gap: 13px; } /*1460で縮める*/ @media (max-width: 1460px) { ul.sns_links { gap: 7px; } } ul.sns_links li {} ul.sns_links li span {} /*【右】検索フォーム -------------------------------------------------------*/ form.searchform { font-size: 13px; line-height: 1; margin: 0; padding: 0; position: relative; max-width: 255px; width:100%; } /*入力欄*/ form.searchform input.searchfield { background: #fff; border: 2px solid #2D2D2D; border-radius: 28px; padding: 8px 36px 8px 14px; width: 100%; } /*focusしてもアウトラインを出さない*/ form.searchform input.searchfield:focus, form.searchform input.searchfield:focus-visible {outline: none;} /*focesしたらplacehoplderを消す*/ form.searchform input.searchfield:focus::placeholder { color: transparent;} /*検索ボタン*/ form.searchform button.searchsubmit { background: transparent; border: none; cursor: pointer; display: block; padding: 0; position: absolute; right: .75em; top: 50%; transform: translateY(-50%); transition: 0.3s;} form.searchform button.searchsubmit:hover { opacity: .6; } /*======================================================= 【ヘッダー最下部】 [header] 　├[header_up] 　｜　　└[header_left] ── [header_center] ── [header_right] 　｜　　　└ロゴ　　　　　　　└テキストメニュー　└SNSと検索フォーム 　└[header_bottom]　←【★これです】 　　　　└[ul.scroll_links] 　　　　└横スクロールメニュー 「ヘッダーメニューがハンバーガーメニュー化した以降で表示される 横スクロールできるメニューバー」を囲っている枠 =======================================================*/ .header_bottom { border-top: 1px solid #EEF7FF; margin: 0; padding: 0;} /*======================================================= 【一番下】SP用の横スクロールできるメニューバー =======================================================*/ ul.scroll_links { display: none;} /*ハンバーガーメニュー化以降のみで表示*/ @media (max-width: 1250px) { ul.scroll_links { display: flex; gap: 25px; flex: 0 0 100%; flex-wrap: nowrap; margin: 0; overflow-x: auto; padding: 12px; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: max-content; } ul.scroll_links li { flex: 0 0 auto; } ul.scroll_links a { color: #333; display: block; font-size: 14px; font-weight: 500; text-decoration: none; } /*スクロール出来る感を出すためにバーに色を付ける スクロールバー自体が不要であればJSのほうも削除してください -------------------------------------------------------*/ /*ブラウザ基準のバーは非表示に*/ .header_bottom::-webkit-scrollbar, ul.scroll_links::-webkit-scrollbar { display: none; } /*バーの位置*/ .header_bottom .os-scrollbar-horizontal{ margin: 0; height: 6px; width: 100%; } /*バーの背景色*/ .header_bottom .os-scrollbar-track { background: #eee !important;} /*バーの目立つほうの色*/ .header_bottom .os-scrollbar-handle { background: #94CBFF !important; border-radius: 60px !important;} } /*======================================================= 【右端】ハンバーガーメニューの開閉ボタン ハンバーガーメニューの「三」は見た目はheaderの上に乗せていますが、 制御しやすいようにheaderの外に独立してあります。 =======================================================*/ button#menu_trigger { background: none; border: none; cursor: pointer; display: flex; align-items: center; flex-direction: column; justify-content: center; height: 40px; position: fixed; right: 12px; top: 20px; width: 30px; z-index: 130; } /*focusしてもアウトラインを出さない*/ button#menu_trigger:focus { outline: none;} button#menu_trigger:focus-visible { outline: none;} /*「三」の部分 -------------------------------------------------------*/ .hamburger_line { background: #1C91FF; border-radius: 30px; height: 3px; transition: 0.3s; width: 30px; } /*真ん中の線にmarginを取らせる*/ .line_2 { margin: 8px 0; } /*展開時は「×」になるように -------------------------------------------------------*/ .is_active .line_1 { transform: translateY(10px) rotate(205deg); } .is_active .line_2 { opacity: 0; } .is_active .line_3 { transform: translateY(-12px) rotate(-205deg); } /*============================================================================== 【ハンバーガーメニュー展開先】 挙動はcommon.js内に記述しています。 ==============================================================================*/ /*スクロールバー分コンテンツがガタつくのを防止する*/ body.no_scroll { overflow-y: scroll; position: fixed; width: 100%; } /*大枠*/ #fullscreen_menu { background: rgba(231, 241, 250, 0.95); border-top: 1px solid #eee; display: flex; flex-direction: column; justify-content: flex-start; height: calc(100vh - var(--header-height)); left: 0; opacity: 0; overflow-y: auto; position: fixed; top: var(--header-height); transform: translateY(-10px); transition: all 0.3s ease; visibility: hidden; width: 100%; z-index: 999;} /*メニューを展開したら見えるようにする*/ #fullscreen_menu.is_active { opacity: 1; transform: translateY(0); visibility: visible; } /*内枠*/ .menu_inner { margin: 0 auto; padding: 50px 10px; text-align: center; max-width: 800px; width: 100%; } @media (max-width: 991px) { /*iOS Safariの為に下部は多めにとる*/ .menu_inner { margin: 0 auto; padding: 20px 10px 50px 10px; text-align: left;} } /*------------------------------------------------------- 【ハンバーガーメニュー内の基本のタイトル】 ▼PCの時 ┌ここは中段揃え┐ アイコン タイトル 　サブタイトル └　中央揃え　┘ ▼SPの時 ┌ここは中段揃え┐ アイコン タイトル サブタイトル └左揃えで文頭がアイコンに来るように 　ただしアイコン画像には余白があるので少しずらす -------------------------------------------------------*/ /*PCは中央揃え*/ h2.headMenu_ttl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 0 27px 0;} /*左寄せにする*/ @media (max-width: 991px) { h2.headMenu_ttl { justify-content: flex-start; margin: 0 0 17px 0;} } /*メインタイトル*/ h2.headMenu_ttl span.main_text { font-size: 25px; font-weight: 700; line-height: 1; } /*サブタイトル*/ h2.headMenu_ttl span.sub { color: #1C91FF; display: block; flex-basis: 100%; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600; line-height: 1; margin: 0; position: relative; } /*左寄せになったのでアイコン画像の余白分のmarginを取る*/ @media (max-width: 991px) { h2.headMenu_ttl span.sub { margin: 0 0 0 6px;} } /*末尾の「＞」*/ h2.headMenu_ttl span.sub::after { background: url("../images/headermenu_text_arrow.svg") no-repeat; background-size: contain; content: ""; height: 10px; display: inline-block; margin: 0 0 1px 8px; vertical-align: middle; width: 5px; transition: transform 0.5s ease;} /*Aタグを全枠扱いに*/ h2.headMenu_ttl a { display: contents; } /*hover時に少し動く*/ h2.headMenu_ttl a:hover span.sub::after { transform: translateX(4px); } /*------------------------------------------------------- 【ハンバーガーメニュー】基本の枠 -------------------------------------------------------*/ .headPurpBox {margin: 0 0 50px 0;} /*------------------------------------------------------- 【ハンバーガーメニュー】タグ一覧 -------------------------------------------------------*/ ul.headMenu_tag { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px 16px;} ul.headMenu_tag li { background: #fff; border-radius: 4px; padding: 5px; overflow-wrap: break-word; word-break: normal;} ul.headMenu_tag li a { color: #A1A1A1; } ul.headMenu_tag li a:hover { color: #2D2D2D; } @media (max-width: 991px) { ul.headMenu_tag { justify-content: left; gap: 12px 16px;} } /*------------------------------------------------------- 【ハンバーガーメニュー】SNSとロゴとサブメニューの順序を任意で変えられるやつ PCはHTMLに書いた順で通常表示されるので、 SPの時にしたい順序のclassを振ればその順序になります -------------------------------------------------------*/ /*大枠*/ .headMenuAdjustBox { display: flex; flex-direction: column; margin: 0; } @media (max-width: 991px) { .order_sp1 { order: 1; } .order_sp2 { order: 2; } .order_sp3 { order: 3; } .order_sp4 { order: 4; } .order_sp5 { order: 5; } } /*------------------------------------------------------- 【ハンバーガーメニュー】SNS -------------------------------------------------------*/ /*大枠*/ .headMenuSocialBox { margin: 0 0 30px 0; } /*------------------------------------------------------- 【ハンバーガーメニュー】ロゴ -------------------------------------------------------*/ /*大枠*/ .headMenuLogoBox { margin: 0 0 50px 0; text-align: center; } @media (max-width: 991px) { .headMenuLogoBox { margin: 0; text-align: center; } } .headMenuLogoBox img { height: 41px; margin: 0 auto 8px auto; width: auto;} .headMenuLogoBox span { font-family: "a-otf-gothic-mb101-pr6n", sans-serif; font-size: 12px; font-weight: 600; line-height: 1;} /*------------------------------------------------------- 【ハンバーガーメニュー】サブメニュー -------------------------------------------------------*/ /*大枠*/ .headMenuSubBox { margin: 0 0 50px 0; } ul.headMenu_submenu { display: flex; align-items: center; justify-content: center; gap: 10px 44px;} ul.headMenu_submenu li { } ul.headMenu_submenu li a { color: #868484; } ul.headMenu_submenu li span { font-size: 12px; font-weight: 500; line-height: 1; } /*末尾の「＞」*/ ul.headMenu_submenu li span::after { background: url("../images/headermenu_submenu_arrow.svg") no-repeat; background-size: contain; content: ""; height: 10px; display: inline-block; margin: 0 0 1px 8px; vertical-align: middle; width: 5px; transition: transform 0.5s ease;} /*hover時に少し動く*/ ul.headMenu_submenu li a:hover span::after { transform: translateX(4px); } @media (max-width: 991px) { ul.headMenu_submenu { display: flex; align-items: flex-start; flex-direction: column; justify-content: left; gap: 44px 0;} /*SPの方がフォントサイズが大きい*/ ul.headMenu_submenu li span { font-size: 15px; font-weight: 500; line-height: 1; } } /*============================================================================== 【共用パーツ】 ================================================================================*/ /*===================================================================== 【パンくずリスト】 =======================================================================*/ nav.bcBox { margin: 0 auto 20px auto; padding: 0; max-width: 1200px; width: 100%;} /*リストの枠*/ nav.bcBox ol { display: flex; align-items: flex-start; gap: 0 12px;} /*テキストと＞を並べる*/ nav.bcBox ol li { display: flex; align-items: center; gap: 0 12px;} /*リンクがある文字とない文字で微妙に高さのズレが出るのを防ぐ*/ nav.bcBox ol li a { line-height: 0;} /*テキスト*/ nav.bcBox ol li a span { color: #A4B1CF; } nav.bcBox ol li span { color:#607099; font-size: clamp(10px, calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320))), 14px); font-weight: 500; line-height: 1.2; } /*末尾の「＞」*/ nav.bcBox ol li::after { background: url("../images/nav_arrow.svg") no-repeat; content: ""; height: 8px; display: block; margin: 2px 0 0 0; width: 5px; transition: transform 0.5s ease;} /*最後は付けない*/ nav.bcBox ol li:last-child::after { display: none;} /*===================================================================== 【1記事あたりの中身】 基本の構成 この一式を別途ulで囲って記事リスト化しています =====================================================================*/ dl.post_item { display: block; margin: 0; padding: 0;} /*アイキャッチ -------------------------------------------------------*/ dl.post_item dt { margin: 0 0 20px 0;} dl.post_item dt .eyecatchBox { margin: 0;} /*画像サイズを16:9に */ dl.post_item dt img { aspect-ratio: 16 / 9; border-radius: 6px; height: auto; object-fit: cover; object-position: center; width: 100%;} /*テキストまわりの大枠 -------------------------------------------------------*/ dl.post_item dd { margin: 0; padding: 0; overflow-wrap: break-word; word-break: normal;} /*タイトル 基本はh2、トップページのみ構造上の理由でh3を使用 -----------------------------------------*/ dl.post_item dd .single_ttl { font-size: 17px; font-weight: 500; line-height: 1.5; margin: 0 0 15px 0; padding: 0; } /*高さをシビアにするための処理。 ※不要なら無くしても問題ありません。*/ dl.post_item dd .single_ttl a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} /*================================================================================ 【注目トピック】のレイアウト ▼PCの時 [　　　] [　２　] [　１　] [　３　] [　　　] [　４　] ▼SPの時 [　１　] …以降スライダーになる ================================================================================*/ /*Dwでエラー出ますが正しい記述です*/ ul.topics_list { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, auto); margin: 0; padding: 0; overflow-wrap: break-word; word-break: normal;} ul.topics_list li:nth-child(1) { max-width: 586px; } ul.topics_list li:not(:first-child) { max-width: 564px; } /*1件目のみ …すべて左カラムに配置 -------------------------------------------------------*/ ul.topics_list li:nth-child(1) { grid-column: 1; grid-row: 1 / 4; } /*1件目以外全部 …すべて右カラムに配置 -------------------------------------------------------*/ ul.topics_list li:not(:first-child) { grid-column: 2; } @media (max-width: 991px) { ul.topics_list { display: block; margin: 0 0 40px 0; } ul.topics_list li:nth-child(1), ul.topics_list li:not(:first-child) { max-width: 100%; } /*スライダーを矯正*/ .slick-dots { display: block; text-align: center; margin: 0 5px; padding: 0; width: 100%; } .slick-dots li { display: inline-block !important; vertical-align: middle; margin: 0 5px; padding: 0; border-radius: 10px; width: auto !important; } .slick-dots li button { background: #94CBFF; border: none; border-radius: 10px; color: transparent; cursor: pointer; display: block; font-size: 0; line-height: 0; outline: none; padding: 0; height: 5px !important; width: 25px !important; } .slick-dots li.slick-active button { background: #1C91FF; width: 53px !important; } .slick-list { overflow: hidden; } } /*-------------------------------------------------------------------------------- 【1記事あたりの中身】基本の構成を 【注目トピック】用に矯正する ▼主な処理 ・1件目を全体的に大きく出す ・SPでスライダー化したら横並びをやめる　など --------------------------------------------------------------------------------*/ /*1記事目だけ大きく出す*/ ul.topics_list li:first-child dl.post_item { display:block; } ul.topics_list li:first-child dl.post_item dd .single_ttl { font-size: clamp(20px, calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320))), 30px); font-weight: 700;} ul.topics_list li:first-child dl.post_item dt { margin: 0 0 20px 0; } .topics_forPC { display: block;} .topics_forSP { display: none;} /*2記事目以降*/ ul.topics_list li:not(:first-child) dl.post_item {display: flex; gap: 23px;} ul.topics_list li:not(:first-child) dl.post_item dt { margin: 0; } ul.topics_list li:not(:first-child) dl.post_item dt img { min-width: 282px; max-width: 282px;} @media (max-width: 1160px) { ul.topics_list li:not(:first-child) dl.post_item dt img { min-width: 240px; max-width: 240px;} } /*スライダーになったら*/ @media (max-width: 991px) { .topics_forPC { display: none;} .topics_forSP { display: block;} /*横並びをやめる*/ ul.topics_list li dl.post_item, ul.topics_list li:first-child dl.post_item, ul.topics_list li:not(:first-child) dl.post_item { display: block; gap: 0; } /*幅を100％の枠にする*/ ul.topics_list li dl.post_item dt, ul.topics_list li:first-child dl.post_item dt, ul.topics_list li:not(:first-child) dl.post_item dt{ margin: 0 0 20px 0; width: 100%;} ul.topics_list li:not(:first-child) dl.post_item dt img {min-width: 100%; max-width: 100%;} /*内側に隙間を取る*/ ul.topics_list li dl.post_item dd { padding: 0 17px; } /*タイトルは再び大きくする*/ ul.topics_list li dl.post_item dd .single_ttl, ul.topics_list li:first-child dl.post_item dd .single_ttl { font-size: clamp(20px, calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320))), 30px); font-weight: 700;} } /*================================================================================ 【トップの記事のリスト】のレイアウト トップのカテゴリ別の記事一覧など、記事をひたすら並べる用に使用しています。 ▼PCの時 [　１　] [　２　] [　３　] [　４　] [　５　] [　６　] ▼SPの時 [　１　] [　２　] [　３　] [　４　] ================================================================================*/ ul.normal_list { display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 25px 0; } ul.normal_list li { width: calc((100% - 44px) / 3);} @media screen and (max-width: 991px) { ul.normal_list li { width: calc((100% - 22px) / 2);} } @media screen and (max-width: 768px) { ul.normal_list { gap: 12px; } ul.normal_list li { width: calc((100% - 12px) / 2);} } @media screen and (max-width: 340px) { ul.normal_list li { width: 100%;} } /*-------------------------------------------------------------------------------- 【1記事あたりの中身】基本の構成を 【通常のリスト】用に矯正する ▼主な処理 ・「.firstBig」が付与されたらSP時のみ1件目を大きく出す ▼PCの時 [　１　] [　２　] [　３　] [　４　] [　５　] [　６　] ▼SPの時 　 　[　　　] 　 　[　１　]　　　←でかい 　 　[　　　] [　２　] [　３　]　←ふつう ・表示件数がPCとSPで異なる場合は、PCの数で出力してSPはCSSで非表示にする --------------------------------------------------------------------------------*/ @media (max-width: 991px) { ul.normal_list li:first-child dl.post_item { display:block; } /*最初の1記事目を大きく出したい場合「.firstBig」を付与*/ ul.normal_list.firstBig li:nth-child(1) { width: 100%;} /*「.firstBig」が付与されてるときはタイトルも大きく*/ ul.normal_list.firstBig li:first-child dl.post_item dd .single_ttl { font-size: clamp(20px, calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320))), 30px); font-weight: 700;} ul.normal_list.firstBig li:first-child dl.post_item dt { margin: 0 0 20px 0; } /*5件目までの表示にする場合「.show5」を付与*/ ul.normal_list.show5 li:nth-child(n+6) { display: none;} /*6件目までの表示にする場合「.show6」を付与*/ ul.normal_list.show6 li:nth-child(n+7) { display: none;} } @media screen and (max-width: 340px) { ul.normal_list.firstBig { gap: 8px; } ul.normal_list.firstBig li { width: 100%;} } /*============================================================================== 【共用】カテゴリーのアイコンのリスト ==============================================================================*/ ul.cat_badge { display: flex; justify-content: flex-start; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 5px; margin: 0 0 8px 0; } ul.cat_badge li { border-radius: 2px; padding: 0 7px 1px 7px; width: auto !important; white-space: nowrap;} ul.cat_badge li a { color: #fff; transition: all .3s;} ul.cat_badge li span { font-size: 13px; font-weight: 500; line-height: 1; } /*------------------------------------------------------- カテゴリーの帯色 -------------------------------------------------------*/ .cat_japan { background: #54AFB2;} /*国内*/ .cat_overseas { background: #684EDE;} /*海外*/ .cat_history { background: #0B5C56;} /*歴史*/ .cat_youtube {background: #DE0000;} /*Youtube*/ .cat_trend { background: #DC599B;} /*SNS・トレンド*/ .cat_recommend {background: #E6A56F;} /*編集部おすすめ*/ /*============================================================================== 【共用】タグのアイコンのリスト ==============================================================================*/ ul.tag_label { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 5px; margin: 0 0 8px 0; } ul.tag_label li { background: #fff; border-radius: 2px; padding: 0 7px 2px 7px; width: auto !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ul.tag_label li a { color: #A1A1A1; transition: all .3s;} ul.tag_label li span { font-size: 13px; font-weight: 500; line-height: 1; } /*-------------------------------------------------------------------------------- 【注目トピック】の時 --------------------------------------------------------------------------------*/ /*2件目以降はタグを表示しない*/ ul.topics_list li:nth-child(n+2) ul.tag_label { display: none; } /*スライダーになったら表示する*/ @media (max-width: 991px) { ul.topics_list li:nth-child(n+2) ul.tag_label { display: block; } } /*============================================================================== 【共用】アバターと投稿日などをまとめる枠 記事一覧の中で投稿者名などを表示する場合の枠 ==============================================================================*/ .authorBox { display: flex; align-items: center; column-gap: 15px; } /*投稿者 -------------------------------------------------------*/ .avatar { } .avatar img { border: 1px solid #ddd; border-radius: 50%; height: 40px; object-fit: cover; object-position: center; width: 40px;} .avatar_name { } .avatar_name span { display: block; font-size: 13px; font-weight: 500; line-height: 1; } /*投稿時刻 -------------------------------------------------------*/ .time_view { color: #A1A1A1; font-size: 13px; font-weight: 500; line-height: 1; overflow-wrap: break-word; word-break: normal;} /*============================================================================== 【共用】「もっと見る」ボタン版 主にトップページで使用 ==============================================================================*/ .button_more { background: #fff; border-radius: 86px; box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.10); margin: 0 auto; text-align: center; width: 335px;} @media screen and (max-width: 991px) { .button_more { width: 280px;} } .button_more a { display: block; line-height: 1; padding: 18px; } /*テキスト*/ .button_more span { display: inline-block; font-size: 17px; line-height: 1; font-weight: 500; vertical-align: middle;} /*テキスト末尾の「＞」*/ .button_more span::after { background: url("../images/button_arrow.svg") no-repeat; background-size: contain; content: ""; height: 13px; display: inline-block; margin: 0 0 3px 20px; width: 8px; transition: transform 0.5s ease; vertical-align: middle;} /*hover時に少し動く*/ .button_more a:hover span::after { transform: translateX(4px); } /*============================================================================== 「もっと見る」テキストリンク版 文字位置の右寄せなどは基本テンプレートの方にBootstrap4形式で直書き ==============================================================================*/ .text_more {margin: 0 auto;} .text_more a { color: #6E6E6E; padding: 0;} /*テキスト*/ .text_more span { display: inline-flex; align-items: center; font-size: 15px; line-height: 1.2; font-weight: 500; position: relative; } /*下線をアイコンまで引く都合で疑似要素で付与*/ .text_more span::before { background: #6E6E6E; content: ""; height: 1px; position: absolute; left: 0; bottom: -4px; width: 100%; transition: all 0.5s ease;} /*テキスト末尾の「＞」*/ .text_more span::after { background: url("../images/text_arrow.svg") no-repeat; content: ""; height: 13px; display: block; margin: 0 0 0 10px; width: 13px; transition: transform 0.5s ease;} /*hover時に少し動く*/ .text_more a:hover span::after { transform: translateX(4px); } .text_more a:hover span::before { display: none; } /*============================================================================== 【共用】コーナータイトルやカテゴリタイトルに付くアイコン画像の一覧 トップ、下層、ハンバーガーメニューなどでも共用 ==============================================================================*/ /*注目記事*/ .icon_magnify::before { background: url("../images/icon_magnify.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*新着記事*/ .icon_newest::before { background: url("../images/icon_newest.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*カテゴリタイトル -------------------------------------------------------*/ /*国内*/ .icon_japan::before { background: url("../images/icon_japan.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*海外*/ .icon_overseas::before { background: url("../images/icon_overseas.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*企業の歴史*/ .icon_history::before { background: url("../images/icon_history.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*YouTube*/ .icon_youtube::before { background: url("../images/icon_youtube.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*SNS・トレンド*/ .icon_trend::before { background: url("../images/icon_trend.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*編集部おすすめ*/ .icon_recommend::before { background: url("../images/icon_recommend.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*特集記事*/ .icon_feature::before { background: url("../images/icon_feature.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*ランキング*/ .icon_ranking::before { background: url("../images/icon_ranking.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*タグ一覧*/ .icon_tag::before { background: url("../images/icon_tag.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*関連記事一覧*/ .icon_ringlink::before { background: url("../images/icon_ringlink.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*ライター一覧*/ .icon_writer::before { background: url("../images/icon_writer.svg") no-repeat center / contain; content: ""; height: 45px; margin-right: 2px; width: 45px; } /*================================================================================ 【メインカラム】 ================================================================================*/ /*-------------------------------------------------------------------------------- 【波型の100％背景】 --------------------------------------------------------------------------------*/ .bg_wave { background: #F2F4F9; margin: 78px 0 0 0; position: relative; width: 100%; } .bg_wave:before { background: url("../images/bg_wave.png") repeat-x top center; content: ""; position: absolute; top: -78px; left: 0; height: 78px; width: 100%; z-index: 1;} /*-------------------------------------------------------------------------------- 【記事リストの大枠】 --------------------------------------------------------------------------------*/ .articleBox { margin: 0 auto 50px auto; } @media screen and (max-width: 991px) { .articleBox { margin: 0 auto 30px auto; } } /*-------------------------------------------------------------------------------- 【共用】【メインカラムの基本のタイトル】 基本はh2、下層の関連記事などはh3 ▼PCの時 ┌　　　全体は中段揃え　　　┐ アイコン タイトル サブタイトル 　　　　└ ここだけ下段揃え ┘ ▼SPの時 ┌ここは中段揃え┐ アイコン タイトル サブタイトル └文頭がアイコンに来るように 　ただしアイコン画像には余白があるので少しずらす --------------------------------------------------------------------------------*/ /*コーナータイトル （SP版のためにgapを使わずに処理）*/ .corner_ttl { display: flex; align-items: center; font-size: 25px; font-weight: 700; line-height: 1; margin: 0 0 20px 0; } /*タイトルとサブタイトルのみ下段揃えにする枠*/ .corner_ttl span.ttl_text { display: flex; align-items: baseline; } /*サブタイトル*/ .corner_ttl span.sub { color: #1C91FF; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600; line-height: 1; margin: 0 0 0 10px; } @media screen and (max-width: 991px) { /*折り返し要素に変更する*/ .corner_ttl { display: flex; flex-wrap: wrap;} /*枠の扱いを拡大*/ .corner_ttl span.ttl_text { display: contents; } /*100％の幅を確保させて改行と同じ効果にする アイコンのSVG画像に余白がある分をmarginでずらす*/ .corner_ttl span.sub { flex-basis: 100%; margin: 3px 0 0 6px; } } /*-------------------------------------------------------------------------------- 【共用】バナー サイドバーでも共用 --------------------------------------------------------------------------------*/ .bnrBox { margin: 0 0 31px 0; padding: 0; overflow-wrap: break-word; word-break: normal;} .bnrBox img { margin: 0 auto; } /*PR表記が必要な時に使用*/ .bnrBox span.prMark {display: block; font-size: 13px; font-weight: 400; line-height: 1; margin: 0 0 5px 0; text-align: right;} /*バナーにテキストが付く時に使用*/ .bnrBox span.prTxt {display: block; font-size: 13px; font-weight: 400; line-height: 1; margin: 5px 0 0 0; text-align: left;} /*================================================================================ 【注目トピック】 「いま読むべき、ビジネス×エンタメの注目トピック」 ================================================================================*/ /*大枠*/ .newTopicsBox { margin: 0 auto 50px auto; } /*タイトル 「いま読むべき、ビジネス×エンタメの注目トピック」 -------------------------------------------------------*/ h2.topics_ttl { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 31px; font-family: toppan-bunkyu-midashi-go-std, sans-serif; font-weight: 900; line-height: 1; letter-spacing: 5.27px; margin: 0 0 48px 0; } /*タイトルの間にあるでっかい「×」 画像で出しています。 -------------------------------------------------------*/ h2.topics_ttl .separator { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 71'%3E%3Cline x1='1.41418' y1='0' x2='70.5858' y2='69.5858' stroke='%23A1A1A1' stroke-width='2'/%3E%3Cline x1='70.5858' y1='0' x2='1.41418' y2='69.5858' stroke='%23A1A1A1' stroke-width='2'/%3E%3C/svg%3E") no-repeat center center; background-size: contain; display: inline-block; height: 69px; width: 69px;} /*「ビジネス」・「エンタメ」*/ h2.topics_ttl strong { font-size: 40px; font-weight: 900;} /*SPではまるごと非表示*/ @media (max-width: 991px) { h2.topics_ttl { display: none;} } /*================================================================================ 【SPでだけ登場する、注目トピックを全部並べるリスト】 スライダーの中身を縦並びで出しているコーナーです。 順序を2→3→4→1で表示させる挙動はPHPの方に書いています。 ================================================================================*/ .articleBox_topics { display: none; } @media screen and (max-width: 991px) { .articleBox_topics { display: block; margin: 0 auto 50px auto; } .articleBox_topics ul.topics_list_forSP { display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 25px 0; } .articleBox_topics ul.topics_list_forSP li { width: 100%; } /*タイトルは全部大きくする*/ .articleBox_topics ul.topics_list_forSP li dl.post_item dd .single_ttl { font-size: clamp(20px, calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320))), 30px); font-weight: 700;} } /*================================================================================ 【特集】 「いま注目のテーマをまとめて読む」 ================================================================================*/ /*大枠*/ .featureBox { margin: 0 auto 50px auto; } ul.feature_list { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0 0 46px 0; overflow-wrap: break-word; word-break: normal; } /*gapの24pxの半分を引く*/ ul.feature_list li { flex: 0 0 calc(50% - 12px);} ul.feature_list li img { aspect-ratio: 16 / 9; border-radius: 6px; height: auto; margin: 0 auto; object-fit: cover; object-position: center; width: 100%; } ul.feature_list li span { display: block; font-size: 15px; font-weight: 500; line-height: 1.6; margin: 8px 0 0 0; } @media screen and (max-width: 768px) { ul.feature_list { gap: 15px 0; } ul.feature_list li { flex: 0 0 100%; } } /*================================================================================ 【サイドバー】 ================================================================================*/ /*-------------------------------------------------------------------------------- 【サイドバーの基本のタイトル】 基本はh3 ▼PC/SPの時 ┌ここは中段揃え┐ アイコン タイトル サブタイトル └文頭がアイコンに来るように 　ただしアイコン画像には余白があるので少しずらす ※変な書き方をしていますが、メインカラムのh2と扱い方を揃えています。 --------------------------------------------------------------------------------*/ /*コーナータイトル*/ .sidebar_ttl { display: flex; flex-wrap: wrap; align-items: center; font-size: 25px; font-weight: 700; line-height: 1; margin: 0 0 18px 0; } /*タイトルとサブタイトルのみ下段揃えにする枠*/ .sidebar_ttl span.ttl_text { display: contents; align-items: baseline; } /*サブタイトル*/ .sidebar_ttl span.sub { color: #1C91FF; flex-basis: 100%; margin: 3px 0 0 4px; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600; line-height: 1; } /*【サイドバー】ランキング一覧 中身のCSSは「parts_ranking.php」に直に記載 --------------------------------------------------------------------------------*/ .sidebarRankingBox {margin: 0 0 31px 0;} /*トップページかつSP表示の時*/ @media (max-width: 991px) { #bizwaveTop .sidebarRankingBox {margin: 0 0 50px 0;} } /*【サイドバー】タグ一覧 「parts_tag.php」で使用 --------------------------------------------------------------------------------*/ .sidebarTagBox {margin: 0 0 31px 0;} /*トップページかつSP表示の時*/ @media (max-width: 991px) { #bizwaveTop .sidebarTagBox {margin: 0 0 50px 0;} } ul.sidebar_tag { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;} ul.sidebar_tag li { background: #fff; border-radius: 4px; padding: 5px; overflow-wrap: break-word; word-break: normal;} ul.sidebar_tag li a { color: #A1A1A1; } ul.sidebar_tag li a:hover { color: #2D2D2D; } /*============================================================================== 【下層】 ==============================================================================*/ /*============================================================================== 【記事単独ページ】single.php ==============================================================================*/ /*大枠*/ .singleBox {} /*【記事単独ページ】投稿概要 -------------------------------------------------------*/ .single_intro {} /*タイトル*/ .single_intro h2.single_ttl {font-size: clamp(20px, calc(20px + (37 - 20) * ((100vw - 320px) / (1920 - 320))), 37px); font-weight: 500; line-height: 1.2; margin: 0 0 10px 0; padding: 0;} /*投稿者一式の間隔を矯正*/ .single_intro .authorBox { margin: 0 0 15px 0; } /*アイキャッチの間隔を矯正*/ .single_intro .eyecatchBox { margin: 0 0 15px 0;} /*【記事単独ページ】本文 -------------------------------------------------------*/ /*大見出し（角丸の青背景に白文字）*/ .single_main h2 { background: #1C91FF; border-radius: 4px; color: #fff; font-size: clamp(17px, calc(17px + (20 - 17) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 500; margin: 0 0 20px 0; padding: 10px 15px;} /*小見出し（文頭に青の縦線）*/ .single_main h3 { font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 500; margin: 0 0 18px 0; padding: 0 0 0 13px; position: relative;} /*縦線*/ .single_main h3::before { background: #3b82f6; border-radius: 4px; content: ""; height: 100%; position: absolute; top: 0; left: 0; width: 4px; } /*基本のテキスト*/ .single_main p { font-size: 16px; font-weight: 400; line-height: 1.8; margin: 0 0 18px 0; } /*投稿内ではリストのCSSを復活させる*/ .single_main ol { list-style: decimal; margin: 1em 0 1.5em 0; padding: 0 0 0 40px;} .single_main ol li { list-style: decimal; margin: 1em 0;} .single_main ul { list-style: disc; margin: 1em 0 1.5em 0; padding: 0 0 0 40px;} .single_main ul li { list-style: disc; margin: 1em 0;} /*======================================================= 【記事単独ページ】目次 記事単独ページ内でプラグイン「Table of Contents Plus」で出力されるものを矯正 =======================================================*/ /*大枠*/ div#toc_container { border-radius: 4px; margin: 0 0 30px 0; padding: 38px 48px; width: 100%; } /*「目次」*/ div#toc_container p.toc_title { color: #1C91FF; font-size: 20px; font-weight: 700; line-height: 1; margin: 0 0 20px 0; text-align: left; } /*大見出し（文頭に数字が付く青文字）のmargin*/ div#toc_container ul { list-style: none !important;} div#toc_container ul li { list-style: none !important; margin: 0 0 20px 0 !important; } div#toc_container ul li:last-of-type {margin: 0 !important; } /*小見出し（文頭に「─」が付く）のmargin*/ div#toc_container ul li ul li {margin: 0 0 13px 0; } /*hover時の挙動を矯正*/ #toc_container a:hover { text-decoration: none; } /*大見出し（文頭に数字が付く青文字） -------------------------------------------------------*/ ul.toc_list li { font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320))), 18px); font-weight: 500; line-height: 1.4; } /*レイアウトの矯正*/ ul.toc_list > li > a { display: flex; align-items: flex-start; text-decoration: none;} /*プラグインの設定で付与される数字 -------------------------------------------------------*/ /*サイズと色*/ ul.toc_list li span.toc_number { color: #1C91FF; flex-shrink: 0; margin-right: 8px; min-width: 16px;} /*数字の末尾に「.」を付ける*/ ul.toc_list li span.toc_number::after {content: ".";} /*小見出しでは数字を表示しない*/ ul.toc_list > li > ul > li span.toc_number {display: none; } /*小見出し（文頭に「─」が付く） -------------------------------------------------------*/ #toc_container ul ul { margin: 13px 0 0 0 !important; } ul.toc_list li ul li { font-size: 16px; font-weight: 400; line-height: 1.4;} ul.toc_list li ul li a { display: flex; align-items: flex-start; padding: 0; } /*文頭に「─」を付ける*/ ul.toc_list li ul li a::before { content: "─"; color: #828282; display: inline-block; flex-shrink: 0; width: 26px;} /*hover時も線は出さない*/ #toc_container a:hover, ul.toc_list li a:hover, ul.toc_list li ul li a:hover { text-decoration: none !important;} /*======================================================= 【記事単独ページ】投稿者の情報 ▼PCの時 [画像] [この記事を書いた人] 　　　 [著者名] 　　　 [紹介文] ▼SPの時 [画像] [この記事を書いた人] 　　　 [著者名] [紹介文　　　　　　　　　 ]　←折り返して100％ =======================================================*/ .author_profile { display: flex; align-items: center; gap: 16px; margin: 70px 0; } @media screen and (max-width: 991px) { .author_profile { flex-wrap: wrap; margin: 30px 0; } } /*著者の画像の大枠*/ .author_img { flex-shrink: 0; width: 230px; } .author_img img { border: 1px solid #ddd; border-radius: 50%; display: block; height: 230px; object-fit: cover; object-position: center; width: 100%; } @media screen and (max-width: 991px) { .author_img { width: 110px; } .author_img img { height: 110px;} } /*テキストの大枠*/ .author_right { flex: 1; } @media screen and (max-width: 991px) { .author_right { display: contents; } } /*テキスト上段 -------------------------------------------------------*/ .author_righ_head { margin: 0 0 16px; } @media screen and (max-width: 991px) { .author_right_head { flex: 1; margin: 0; } } /*「この記事を書いた人」*/ .author_label { color: #6E6E6E; font-size: 14px; font-weight: 400; line-height: 1; margin: 0 0 8px 0; } /*著者名*/ .author_name { font-size: 20px; font-weight: 500; line-height: 1; margin: 0 0 10px 0; } /*テキスト下段 -------------------------------------------------------*/ .author_right_foot {} .author_right_foot p { font-size: 16px; font-weight: 400; line-height: 1.8; margin: 0 0 16px 0; } .author_right_foot p:last-of-type { margin: 0 0 48px 0; } @media screen and (max-width: 991px) { .author_right_foot { width: 100%; } /*SPのみ「もっと見る」をcenter寄せ*/ .author_right_foot .text_more { text-align: center;} } /*===================================================================== 【ページネーション】前後の記事への導線 single.phpでも使用 page_prd.phpでも使用 =======================================================================*/ #pagination { margin: 24px auto 50px auto;} #pagination ul.page-numbers { display: flex; align-items: center; justify-content: center; column-gap: 24px; padding: 0;} #pagination ul.page-numbers li { margin: 0 5px; } #pagination ul.page-numbers li a, #pagination ul.page-numbers li span { color: #868686; display: block; font-size: 13px; font-weight:400; line-height:1; padding: 8px 6px; text-decoration: none;} /*該当ページの時*/ #pagination ul.page-numbers li span.current { border-bottom: 1px solid #1C91FF !important; color: #2D2D2D; display: block;} /*hover時の挙動*/ #pagination ul.page-numbers li a.page-numbers { border-bottom: 1px solid transparent; transition: border-bottom-color 0.3s ease-in-out;} #pagination ul.page-numbers li a.page-numbers:hover { border-bottom-color: #1C91FF; color: #2D2D2D;} /*「前へ」と「次へ」のhoverを制御したい時用*/ #pagination ul.page-numbers li a.next.page-numbers:hover, #pagination ul.page-numbers li a.prev.page-numbers:hover {} /*============================================================================== タグ一覧を全部出す時のリスト page_tag_list.php ==============================================================================*/ ul.tag_label_forList { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px; margin: 0 0 8px 0; } ul.tag_label_forList li { width: auto !important; white-space: nowrap; } ul.tag_label_forList li a { background: #fff; border-radius: 2px; padding: 0 7px 2px 7px; color: #A1A1A1; transition: all .3s;} ul.tag_label_forList li span { color: #A1A1A1; font-size: 13px; font-weight: 500; line-height: 1; } /*============================================================================== ライター紹介の詳細 ==============================================================================*/ .author_detail { margin: 0 0 20px 0; padding: 20px 0; } /*区切り線*/ hr.author_line { border: 0; border-top: 1px solid #ddd; margin: 16px 0;} .border_radius_blue { border: 1px solid #1C91FF; border-radius: 3px; } .margin_bottom_50 {margin: 0 0 50px 0 !important;} .padding_20 { padding: 20px !important; } .author_detail dl { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 0;} /*著者の画像の大枠*/ .author_detail dt { flex-shrink: 0; width: 180px; } .author_detail dt img { border: 1px solid #ddd; border-radius: 4px; display: block; height: 180px; object-fit: cover; object-position: center; width: 100%; } @media screen and (max-width: 991px) { .author_detail dt { width: 110px; } .author_detail dt img { height: 110px;} } @media screen and (max-width: 576px) { .author_detail dt { width: 68px; } .author_detail dt img { height: 68px;} } /*テキストエリア*/ .author_detail dd { margin: 0;} .author_detail dd .author_detail_txt { margin: 0 0 20px 0; } /*名前*/ .author_detail dd .author_detail_txt strong { display: block; font-size: 20px; font-weight: 500; line-height: 1; margin: 0 0 15px 0; padding: 0;} /*肩書き*/ .author_detail dd .author_detail_txt span { display: block; font-size: 14px; font-weight: 500; line-height: 1; margin: 0 0 15px 0; padding: 0;} /*紹介文*/ .author_detail dd .author_detail_txt p { display: block; font-size: 16px; font-weight: 500; line-height: 1.4; margin: 0 0 15px 0; padding: 0;} .author_detail dd .author_detail_txt p:last-of-type {margin: 0;} /*============================================================================== ライター紹介に載せるSNSのリスト ==============================================================================*/ .authorSNS { display: flex; justify-content: flex-start; column-gap: 10px; margin: 0; padding: 0} .authorSNS img { width: 30px} .margin_bottom_20 {margin: 0 0 20px 0 !important;} /*============================================================================== 関連リンクをiframeで出したいとき ==============================================================================*/ .iframeBox { margin: 0 auto 20px auto } .iframeBox iframe { border: none; height: auto; margin: 0 auto; padding: 0; width: 100%} /*============================================================================== 【汎用の固定ページ】page_basicpage.php ==============================================================================*/ /*大枠*/ .basicPageBox {} #basicPage_intro {} /*タイトル*/ #basicPage_intro h2.single_ttl { background: none; border-radius: 0; color: inherit; font-size: clamp(20px, calc(20px + (37 - 20) * ((100vw - 320px) / (1920 - 320))), 37px); font-weight: 500; line-height: 1.2; margin: 0 0 20px 0; padding: 0;} #basicPage_intro .eyecatchBox { margin: 0 0 20px 0;} /*画像サイズを16:9に */ #basicPage_intro .eyecatchBox img { aspect-ratio: 16 / 9; border-radius: 6px; height: auto; object-fit: cover; object-position: center; width: 100%;} /*大見出し（角丸の青背景に白文字）*/ .basicPageBox h2 { background: #1C91FF; border-radius: 4px; color: #fff; font-size: clamp(17px, calc(17px + (20 - 17) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 500; margin: 0 0 20px 0; padding: 10px 15px;} /*小見出し（文頭に青の縦線）*/ .basicPageBox h3 { font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 500; margin: 0 0 18px 0; padding: 0 0 0 13px; position: relative;} /*縦線*/ .basicPageBox h3::before { background: #3b82f6; border-radius: 4px; content: ""; height: 100%; position: absolute; top: 0; left: 0; width: 4px; } /*基本のテキスト*/ .basicPageBox p { font-size: 16px; font-weight: 400; line-height: 1.8; margin: 0 0 18px 0; } /*固定ページ内ではリストのCSSを復活させる*/ .basicPageBox ol { list-style: decimal; margin: 1em 0 1.5em 0; padding: 0 0 0 40px;} .basicPageBox ol li { list-style: decimal; margin: 1em 0;} .basicPageBox ul { list-style: disc; margin: 1em 0 1.5em 0; padding: 0 0 0 40px;} .basicPageBox ul li { list-style: disc; margin: 1em 0;} /*============================================================================== 【ライター募集】 contact7の矯正用CSSは/css/contact7.cssにあります。 ==============================================================================*/ .writer_cautionBox {background: #fff; margin: 0 0 10px 0; padding: 15px 20px;} .writer_cautionBox strong { display: block; margin: 0 0 10px 0;} ul.writer_cautionList { margin: 0; padding: 0 0 0 20px;} ul.writer_cautionList li { margin: 0 0 10px 0; padding: 0;} /*============================================================================== 【フッター】 ==============================================================================*/ #footer { background: #2F2F2F; color: #fff; padding: 0; width: 100%;} /*ヘッダーの高さ80px＋デザイン上の隙間72px*/ #footer .wrap { padding: 80px 0 0 0;} @media (max-width: 991px) { #footer { padding: 0; width: 100%;} #footer .wrap { padding: 0;} /*非表示にしないときは80px 0 0 0*/ } /*ここだけbootstrapを矯正*/ @media (min-width: 1200px) { #footer .container { max-width: 1140px;} } @media (max-width: 991px) { #footer .container { max-width: 100%; } } /*タブレット以下でまるごと非表示にする用*/ @media (max-width: 991px) { .all_hidden { display: none !important;} } /*------------------------------------------------------------------------------ フッターロゴ ------------------------------------------------------------------------------*/ #footer h2 { margin: 0; text-align: left;} #footer h2 img { margin: 0; object-fit: contain; max-width: 232px; width: 100%; } #footer h2 span { display: block; font-family: "a-otf-gothic-mb101-pr6n", sans-serif; font-size: 12px; font-weight: 600; line-height: 1; margin: 8px 0 0 0; padding: 0 0 0 0;} /*少し小さく*/ @media (max-width: 1200px) { #footer h2 img { height: 35px; width: auto;} #footer h2 span { font-size: 10px; } } /*991px以下で非表示している場合は不要*/ @media (max-width: 991px) { #footer h2 {text-align: center;} #footer h2 img { margin: 0 auto;} } @media (max-width: 630px) { #footer h2 img { height: 30px; width: auto;} #footer h2 span { font-size: 8.6px; } } @media (max-width: 320px) { #footer h2 img { height: 22px; width: auto;} } /*------------------------------------------------------------------------------ フッターロゴ下のSNSセット ------------------------------------------------------------------------------*/ #footer .snsBox { display: block; margin: 25px 0 0 0;} #footer .snsBox ul { display: flex; gap: 13px;} @media (max-width: 991px) { #footer .snsBox ul { display: flex; justify-content: center; gap: 20px;} } /*------------------------------------------------------------------------------ フッター大メニュー 【並びを自由にできるリスト】 ------------------------------------------------------- 【概要】 ------------------------ [1] [4] [5]　 [2] 　 [6]　 [3] 　 [7]　[8] ------------------------ みたいな謎並びを要求されたとしても対応出来るリストです。 col：列…ブロック（縦の部分） row：行…ブロックの中の順番 入れた数字の位置に来るようになっています。10行まで増やせます。 【考え方】 ------------------------------------------------------- ------------------------ 　[1]　 [4]　 [5]　　　　row_1 　[2]　 　　[6]　　　　row_2 　[3]　 　　[7]　 [8]　row_3 └─┘└─┘└─┘└─┘ col_1 col_2 col_3 col_4 ------------------------ [3]なら「.col_1 .row_3」と書く⇒1ブロック目の3行目に表示 [8]なら「.col_4 .row_3」と書く⇒4ブロック目の3行目に表示（1～2行目は空欄になります） 【今回】 ビズウェーブでは1ブロック目はメニュー全体のタイトルとして使用しています。 また「.hide_sp」はSPでは非表示にするものに付与してください。 そういうデザインだったので全部に付与されています。 【今後ありそうな例】 ------------------------------------------------------- ▼カテゴリが増えてきたので横2列のリストに伸ばしたい 1. 現状の「.col_3」を「.col_4」に変更 2. 新しい3ブロックに入れたいカテゴリ名を入れる 3. 「.footer_nav li」のmin-widthを変更（必須です）※デザイン上、広めにしているので適宜縮めてください
  • 経済・ビジネス
  • 企業の歴史
  • YouTube
  • SNS・トレンド
  • 編集部オススメ
  • 特集一覧
  • ライター一覧
  • ライター募集
    • ------------------------------------------------------- みたいな感じです。 とはいえ4ブロックまでが限界だと思います。 これ以上増やす場合は適宜改修をお願いします。 ------------------------------------------------------------------------------*/ /*大枠*/ /*Dwでエラー出ますが正しい記述です*/ ul.footer_nav { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, min-content); row-gap: 14px; margin: 0 0 54px 0;} @media (max-width: 991px) { ul.footer_nav { display: flex; flex-direction: column; row-gap: 20px; margin: 0 0 40px 0;} } /*フッターメニューのサイズ感 ※ブロックを増やした時は少し縮めてください -------------------------------------------------------*/ .footer_nav li { min-width: 260px;} @media (max-width: 1200px) { .footer_nav li { min-width: 200px;} } @media (max-width: 991px) { .footer_nav li { text-align: center; min-width: 100%;} } /*タイトルが必要な時*/ .footer_nav li span.catTtl { color: #868484; display: block; font-size: 15px; font-weight: 400; line-height: 1; margin: 0 24px 0 0; text-align: right;} /*リンク色*/ .footer_nav li a { color: #fff; display: block; font-size: 15px; font-weight: 400; line-height: 1; } .footer_nav li a:hover, .footer_nav li a:focus { color: #868484;} /*------------------------------------------------------- ブロックの指定 　[1]　 [4]　 [5]　　　　row_1 　[2]　 　　[6]　　　　row_2 　[3]　 　　[7]　 [8]　row_3 └─┘└─┘└─┘└─┘ col_1 col_2 col_3 col_4　←ここ -------------------------------------------------------*/ .col_1 { grid-column: 1; } .col_2 { grid-column: 2; } .col_3 { grid-column: 3; } .col_4 { grid-column: 4; } .col_5 { grid-column: 5; } /*------------------------------------------------------- ブロックの中身の行の指定 　[1]　 [4]　 [5]　　　　row_1┐ 　[2]　 　　[6]　　　　row_2│←ここ 　[3]　 　　[7]　 [8]　row_3┘ └─┘└─┘└─┘└─┘ col_1 col_2 col_3 col_4 -------------------------------------------------------*/ .row_1 { grid-row: 1; } .row_2 { grid-row: 2; } .row_3 { grid-row: 3; } .row_4 { grid-row: 4; } .row_5 { grid-row: 5; } .row_6 { grid-row: 6; } .row_7 { grid-row: 7; } .row_8 { grid-row: 8; } .row_9 { grid-row: 9; } .row_10 { grid-row: 10; } /*SPでは非表示にする項目に付与*/ @media (max-width: 991px) { .hide_sp { display: none !important;} } /*------------------------------------------------------------------------------ フッターサブメニュー 「運営会社」「利用規約」などの小さいリンクの並んでいるところ ------------------------------------------------------------------------------*/ /*大枠*/ ul.footer_sub { display: flex; align-items: center; align-content: center; justify-content: center; column-gap: 53px; margin: 0 0 38px 0;} /*991以下を非表示にしている場合は不要*/ @media (max-width: 991px) { ul.footer_sub { display: flex; flex-wrap: wrap; gap: 15px; margin: 0 0 20px 0;} } ul.footer_sub li { color: #868484; font-size: 12px; line-height: 1;} /*リンク*/ /*flex-endの方がSVGと位置が揃うのでそうしています*/ ul.footer_sub li a { color: #868484; display: inline-flex; align-items: flex-end; position: relative; } ul.footer_sub li a::after { background: url("../images/footer_sub_arrow.svg") no-repeat; background-size: contain; content: ""; display: inline-block; height: 10px; margin-left: 10px; width: 5px; transition: transform 0.5s ease;} /*hover時に少し動く*/ ul.footer_sub li a:hover::after { transform: translateX(4px); } /*コピーライト -------------------------------------------------------*/ #footer p { font-size: 13px; line-height: 1; margin: 0; padding: 13px 0; text-align: center;} /*============================================================================== 基本のテーブル ==============================================================================*/ .wp-block-table table { border-collapse: collapse; width: 100%;} .wp-block-table thead {border-bottom: 2px solid #CFCFCF;} .wp-block-table table th, .wp-block-table table td { border: 1px solid #CFCFCF; padding: 15px 24px; } /*項目名 -------------------------------------------------------*/ .wp-block-table table th { color: #fff; text-align: center; min-width: 250px; width: 250px;} .wp-block-table table th span { color: #fff; font-size: 16px; font-weight: 700; line-height: 1;} /*内容 -------------------------------------------------------*/ .wp-block-table table td { text-align: left; } .wp-block-table table td span { font-size: 14px; font-weight: 400; line-height: 1.4;} /*内容の方は背景を交互に*/ .wp-block-table table tr:nth-child(odd) td { background: #f5f5f5;} .wp-block-table table tr:nth-child(even) td { background: #fff;} /*メディアクエリまとめ*/ @media (max-width: 767px) { .wp-block-table table, tbody, .wp-block-table table tr, .wp-block-table table th, .wp-block-table table td { display: block; width: 100%;} .wp-block-table table tr { margin-bottom: 10px;} .wp-block-table table th { text-align: left; } .wp-block-table table tr:nth-child(odd) td, .wp-block-table table tr:nth-child(even) td { background: #fff;} } /*============================================================================== 【表示・非表示の矯正用】 ==============================================================================*/ .forPC { display: block; } .forSP { display: none; } .forPC_991 { display: block;} .forSP_991 { display: none;} .forSP_340 { display: none;} @media (max-width: 991px) { .forPC { display: none; } .forPC_991 { display: none;} .forSP_991 { display: block;} } @media (max-width: 767px) { .forPC { display: none; } .forSP { display: block; } } @media (max-width: 340px) { .forSP_340 { display: block;} }