@charset "UTF-8"; /* ============================================================ ltike-side.css 記事ページ サイドバー専用 ltike.css（おすすめ記事TOP用）から、サイドバーに関わる部分だけを 取り出したものです。記事ページで使うために2つ手を入れています。 1) CSSリセットを外しました html, body, div … への background:transparent、body{line-height:1}、 ul{list-style:none} など。これが記事本文の背景を消し、 ページが黒く見える原因でした。 2) すべてのルールを #article .contentBox .side で囲みました 記事ページは
で囲まれているため、 article.css の #article h2 のようなID付きセレクタのほうが強く、 .side だけでは負けて見出しに ▶ が付いたり文字が大きいままでした。 :root の変数だけは全体で使うのでそのままです。 ============================================================ */ /* ------------------------------------------------------------ 0. 記事本文用の装飾を、サイドバー内だけ打ち消す article.css は次のように書かれています（103〜136行目）。 #article .contentBox section h2:before { content:"➤"; } #article .contentBox section h2 { font-size:1.7em; border-bottom:#7F7F7F 3px solid; } #article .contentBox section { margin-bottom:4em; } aside { width:250px; margin-left:2em; } サイドバーの見出しも
の中にあるため、そのまま当たります。 打ち消し側は .side を1つ足して、確実に勝つようにしています。 （サイドバー自身のスタイルは .secTtl などクラス指定なので、さらに強く勝ちます） ------------------------------------------------------------ */ #article .contentBox .side h1::before, #article .contentBox .side h1::after, #article .contentBox .side h2::before, #article .contentBox .side h2::after, #article .contentBox .side h3::before, #article .contentBox .side h3::after, #article .contentBox .side h4::before, #article .contentBox .side h4::after, #article .contentBox .side p::before, #article .contentBox .side p::after, #article .contentBox .side li::before, #article .contentBox .side li::after { content: none; display: none; } #article .contentBox .side h1, #article .contentBox .side h2, #article .contentBox .side h3, #article .contentBox .side h4 { font-size: inherit; font-weight: inherit; color: inherit; background: none; background-image: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0; text-indent: 0; letter-spacing: normal; min-height: 0; max-width: none; position: static; float: none; } #article .contentBox .side section { margin-bottom: 0; } #article .contentBox .side p { margin-bottom: 0; line-height: 1.4; } #article .contentBox .side ul, #article .contentBox .side ol, #article .contentBox .side li { background: none; list-style: none; text-indent: 0; padding-left: 0; } /* はみ出し防止。中の検索窓は幅が足りないと横に膨らむため */ #article .contentBox .side { max-width: 100%; } #article .contentBox .side * { min-width: 0; } #article .contentBox .side img { max-width: 100%; } /* 記事本文用の #article .contentBox section img（width:100%／margin-bottom:.5em／ vertical-align:baseline）を、サイドバーでは持ち込まないようにします */ #article .contentBox .side .secTtl img { width:auto; margin:0; vertical-align:middle; } #article .contentBox .side table { width: 100%; } :root { --blue:#0074BE; --blue-link:#0074BD; --badge-bg:#E9F8FF; --pink:#D3136A; --ink:#000; --ink-sub:#616161; --ink-sub-sp:#5E5E5E; --line:#C9C9C9; --line-input:#DDDDDD; --card-shadow:0 1px 8px rgba(0,0,0,.2); --font:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif; --font-form:'Noto Sans JP',"Hiragino Kaku Gothic ProN",sans-serif; --title-lines:3; /* 記事ページのサイドバー幅。ここ1か所で変えられます */ --side-w:380px; /* 記事ページ全体の横幅。article.css の既定は1000pxです */ --content-w:1200px; /* 検索窓タブ（未選択）。文字は読みやすさのため濃さを保ち、 アイコンだけ淡くしています */ --tab-off-bg:#F2F5F8; --tab-off-ink:#616161; --tab-off-icon:#9AA6B2; } #article .contentBox .side .visuallyHidden { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #article .contentBox .side .secTtl { display:flex; align-items:center; gap:4px; padding:4px 0; border-bottom:.5px solid var(--blue); font-size:24px; line-height:36px; font-weight:600; margin:0 0 16px; } #article .contentBox .side .secTtl svg { width:30px; height:30px; flex:none; fill:var(--blue); display:block; } #article .contentBox .side .secTtl .ttlIcon { width:30px; height:30px; flex:none; object-fit:contain; display:block; } /* アイコン画像が見つからないとき、壊れた画像の枠を出さない */ #article .contentBox .side .secTtl .ttlIcon:not([src]), #article .contentBox .side .secTtl .ttlIcon[src=""] { display:none; } #article .contentBox .side .sec + .sec { margin-top:64px; } /* 検索窓などは .side__follow という別の入れ物に入っていて .sec + .sec が効かないため、同じ余白を明示します */ #article .contentBox .side .sec + .side__follow, #article .contentBox .side .side__follow > .sec + .sec { margin-top:64px; } #article .contentBox .side .secTtl { font-size:20px; line-height:30px; gap:8px; margin-bottom:12px; align-items:center; } /* 見出しの行の高さ（30px）に合わせます。24pxだと小さく見えていました。 一覧ページ（ltike.css）と同じ値です。 */ #article .contentBox .side .secTtl svg, #article .contentBox .side .secTtl .ttlIcon { width:28px; height:28px; display:block; margin:0; vertical-align:middle; align-self:center; } /* article.css の「#article .contentBox section img{ margin-bottom:.5em }」が サイドバーのアイコンにも当たり、8pxぶん下にずれていました。打ち消します。 */ #article .contentBox .side .secTtl svg, #article .contentBox .side .secTtl .ttlIcon { margin:0; vertical-align:middle; align-self:center; } @media (max-width:1023px) { #article .contentBox .side .secTtl { font-size:20px; line-height:30px; } #article .contentBox .side .secTtl svg, #article .contentBox .side .secTtl .ttlIcon { width:28px; height:28px; } #article .contentBox .side .sec + .sec, #article .contentBox .side .sec + .side__follow, #article .contentBox .side .side__follow > .sec + .sec { margin-top:40px; } } #article .contentBox .side { display:flex; flex-direction:column; align-self:stretch; } #article .contentBox .side .sec + .sec, #article .contentBox .side .sec + .side__follow, #article .contentBox .side .side__follow > .sec + .sec { margin-top:40px; } @media (min-width:1024px) { #article .contentBox .side__follow { position: sticky; top: var(--side-follow-top, 16px); bottom: auto; width: 100%; height: max-content; min-height: 0; flex: none; } } #article .contentBox .side .rank { list-style:none; margin:0; padding:16px 0 0; display:flex; flex-direction:column; gap:16px; } #article .contentBox .side .rank li { display:flex; gap:8px; padding-bottom:8px; border-bottom:.5px solid var(--line); } #article .contentBox .side .rank li:last-child { border-bottom:none; padding-bottom:0; } #article .contentBox .side .rank__medal { position:relative; width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center; } #article .contentBox .side .rank__medal svg { position:absolute; inset:0; width:30px; height:30px; } #article .contentBox .side .rank__medal span { position:relative; font-size:10px; line-height:13px; font-weight:600; letter-spacing:-.011em; } #article .contentBox .side .rank li:nth-child(1) .rank__medal svg { fill:#FABB00; } #article .contentBox .side .rank li:nth-child(1) .rank__medal span { color:#735600; } #article .contentBox .side .rank li:nth-child(2) .rank__medal svg { fill:#CCCCCC; } #article .contentBox .side .rank li:nth-child(2) .rank__medal span { color:#666666; } #article .contentBox .side .rank li:nth-child(3) .rank__medal svg { fill:#866F6F; } #article .contentBox .side .rank li:nth-child(3) .rank__medal span { color:#FFFFFF; } #article .contentBox .side .rank li:nth-child(n+4) .rank__medal svg { fill:#BDE5FF; } #article .contentBox .side .rank li:nth-child(n+4) .rank__medal span { color:#0098E5; } #article .contentBox .side .rank__ttl { font-size:14px; line-height:21px; font-weight:400; } @media (hover:hover) { #article .contentBox .side .rank__ttl:hover { color:var(--blue-link); text-decoration:underline; } } #article .contentBox .side .areaGrid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } #article .contentBox .side .areaTile { position:relative; display:block; aspect-ratio:152/101; border-radius:4px; overflow:hidden; } #article .contentBox .side .areaTile img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; } @media (hover:hover) { #article .contentBox .side .areaTile:hover img { transform:scale(1.06); } } #article .contentBox .side .areaTile::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.2); border-radius:4px; } #article .contentBox .side .areaTile span { position:absolute; left:12px; bottom:8px; z-index:1; color:#fff; font-size:20px; line-height:30px; font-weight:600; letter-spacing:-.011em; text-shadow:0 1px 4px rgba(0,0,0,.45); } #article .contentBox .side .areaTile span.is-long { font-size:18px; line-height:27px; } @media (max-width:1023px) { #article .contentBox .side .areaGrid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; } #article .contentBox .side .areaTile span { font-size:18px; line-height:27px; } #article .contentBox .side .areaTile span.is-long { font-size:16px; line-height:24px; } } #article .contentBox .side .widgetSlot .secTtl { border-bottom-color:#000; } #article .contentBox .side .fmock { display:flex; flex-direction:column; gap:24px; } #article .contentBox .side .fmock__radios { display:flex; gap:16px; } #article .contentBox .side .fmock__radio { display:flex; align-items:center; gap:8px; font-size:16px; line-height:24px; } #article .contentBox .side .fmock__radio i { width:18px; height:18px; border:1px solid #929292; border-radius:9999px; background:#fff; display:flex; align-items:center; justify-content:center; } #article .contentBox .side .fmock__radio.is-on i::before { content:""; width:12px; height:12px; border-radius:9999px; background:var(--blue); } #article .contentBox .side .fmock__fields { display:flex; flex-direction:column; gap:12px; } #article .contentBox .side .fmock__pair { position:relative; display:flex; gap:12px; } #article .contentBox .side .fmock__input { flex:1; min-width:0; height:44px; border:1px solid var(--line-input); border-radius:8px; background:#fff; display:flex; align-items:center; gap:10px; padding:0 12px; font-family:var(--font-form); font-size:14px; line-height:21px; letter-spacing:-.019em; } #article .contentBox .side .fmock__input svg { width:20px; height:20px; flex:none; fill:var(--blue); } #article .contentBox .side .fmock__input.is-placeholder { color:#999; } #article .contentBox .side .fmock__swap { position:absolute; left:50%; top:2px; transform:translateX(-50%); width:40px; height:40px; border-radius:9999px; background:var(--blue); border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; } #article .contentBox .side .fmock__swap svg { width:24px; height:24px; fill:#fff; } #article .contentBox .side .fmock__cta { height:45px; background:var(--pink); border-radius:4px; border:none; color:#fff; font-family:var(--font-form); font-size:14px; font-weight:700; letter-spacing:-.019em; cursor:not-allowed; } #article .contentBox .side .bnrGrid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } #article .contentBox .side .bnrGrid a, #article .contentBox .side .bnrGrid div { aspect-ratio:149/111.75; border-radius:4px; overflow:hidden; background:#eef2f5; display:flex; align-items:center; justify-content:center; color:#9bb0bd; font-size:11px; } #article .contentBox .side .bnrGrid img { width:100%; height:100%; object-fit:cover; } @media (max-width:1023px) { #article .contentBox .side .bnrGrid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } } #article .contentBox .side .searchTabs { display:flex; margin:1rem 0 0; } #article .contentBox .side .searchTab { flex:1; min-width:0; position:relative; z-index:1; height:2.875rem; margin-bottom:-1px; border:1px solid var(--line-input); border-bottom:1px solid var(--line-input); border-radius:0.5rem 0.5rem 0 0; background:var(--tab-off-bg); color:var(--tab-off-ink); font-family:var(--font); font-size:0.875rem; font-weight:600; letter-spacing:-.011em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:0.375rem; transition:background-color .15s ease, color .15s ease; } #article .contentBox .side .searchTab + .searchTab { margin-left:-1px; } #article .contentBox .side .searchTab svg { width:1.125rem; height:1.125rem; fill:var(--tab-off-icon); flex:none; } /* 選択中のタブだけ、アイコンも文字と同じ青にします */ #article .contentBox .side .searchTab[aria-selected="true"] svg { fill:var(--blue); } #article .contentBox .side .searchTab:hover { background:#E9EEF3; color:var(--tab-off-ink); } #article .contentBox .side .searchTab[aria-selected="true"] { z-index:2; background:#fff; color:var(--blue); font-weight:700; border-bottom-color:#fff; box-shadow:inset 0 3px 0 var(--blue); } #article .contentBox .side .searchTab:focus-visible { outline:3px solid #FABB00; outline-offset:-3px; } #article .contentBox .side .searchPanel { position:relative; padding:1rem 0.875rem; border:1px solid var(--line-input); border-radius:0 0 0.5rem 0.5rem; background:#fff; } #article .contentBox .side .searchPanel[hidden] { display:none !important; } #article .contentBox .side .widgetSlot ltike-widget-ph { display:block; width:100%; } #article .contentBox .side .widgetSlot ltike-widget-ph:not(:defined) { display:none; } #article .contentBox .side .fskel { display:flex; flex-direction:column; gap:0.75rem; } #article .contentBox .side .fskel__row { display:flex; gap:0.75rem; } #article .contentBox .side .fskel__row .fskel__bar { flex:1; min-width:0; } #article .contentBox .side .fskel__bar { display:block; height:2.75rem; border-radius:0.5rem; background:linear-gradient(90deg,#EEF2F6 25%,#F7FAFC 37%,#EEF2F6 63%); background-size:400% 100%; animation:fskelShine 1.4s ease infinite; } #article .contentBox .side .fskel__bar--radios { height:1.25rem; width:9rem; margin-bottom:0.25rem; border-radius:0.25rem; } #article .contentBox .side .fskel__bar--cta { height:2.8125rem; margin-top:0.5rem; border-radius:0.25rem; } #article .contentBox .side .searchPanel.is-widget-ready .fskel { display:none; } @media (prefers-reduced-motion:reduce) { #article .contentBox .side .fskel__bar { animation:none; background:#EEF2F6; } } #article .contentBox .side .fmock[hidden] { display:none !important; } #article .contentBox .side .searchPanel .fmock { gap:0.875rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] { margin:0; font-family:var(--font); } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-box { --main:#0074BE; --main-dark:#005a91; --main-soft:#E9F8FF; --accent:#D3136A; --border:#DDDDDD; max-width:none; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-hero { display:none; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-body { padding:0; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-form { gap:0.75rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-main-row { grid-template-columns:1fr 1fr !important; gap:0.75rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-main-row .hsw-field:nth-child(1), #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-main-row .hsw-field:nth-child(4) { grid-column:1 / -1; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-room-row, #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-ages { grid-template-columns:1fr !important; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-label { font-family:var(--font); font-size:0.625rem; font-weight:700; line-height:1; color:var(--blue); } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-input, #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-select { height:2.75rem; padding:0 0.75rem; border:1px solid var(--line-input); border-radius:0.5rem; font-family:var(--font-form); font-size:0.8125rem; font-weight:400; letter-spacing:-.019em; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-place { padding:0 2.25rem 0 2.25rem; background:url(https://img2.tour.l-tike.com/image/common/pc/icon_place_light_gray.svg) no-repeat 0.625rem center; background-size:1.25rem 1.25rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-input::placeholder { color:#999; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-clear { width:1.75rem; height:1.75rem; bottom:0.5rem; right:0.5rem; font-size:1rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-suggest { top:4rem; border-radius:0.5rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-suggest-status { font-size:0.75rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-name { font-size:0.8125rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-meta { font-size:0.6875rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-badge { min-width:2.5rem; padding:0.1875rem 0.375rem; font-size:0.625rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-guests { border:0; border-radius:0; background:transparent; overflow:visible; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-guests-toggle { height:2.75rem; padding:0 0.75rem 0 2.25rem; border:1px solid var(--line-input); border-radius:0.5rem; background:#fff url(https://img2.tour.l-tike.com/image/common/pc/icon_people.svg) no-repeat 0.625rem center; background-size:1.25rem 1.25rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-guests-toggle .hsw-label { display:none; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-guests-summary { font-family:var(--font-form); font-size:0.8125rem; font-weight:400; color:#222; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-toggle-mark { width:1.5rem; height:1.5rem; font-size:0.875rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-guests-panel { padding:0.75rem 0 0; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-room { padding:0.75rem; border-radius:0.5rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-room-title { font-size:0.75rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-room-note { margin:0; font-size:0.6875rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-actions { display:block; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-submit { height:2.8125rem; width:100%; max-width:none; border-radius:0.25rem; box-shadow:none; font-family:var(--font-form); font-size:0.875rem; font-weight:700; letter-spacing:-.019em; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-submit:hover { background:#b81059; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-error { font-size:0.75rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-foot { margin:0.625rem 0 0; text-align:left; font-size:0.6875rem; line-height:1.6; } @media (max-width:1023px) { #article .contentBox .side .searchTabs { margin-top:0.75rem; } } #article .contentBox .side [data-hotel-search-widget] .hsw-box { --main:#0068b7;--main-dark:#005291;--main-soft:#eef7fc;--accent:#f39800;--border:#d8dee5;--text:#222;--muted:#66717d;width:100%;max-width:1100px;margin:0 auto;background:#fff;color:var(--text) } #article .contentBox .side [data-hotel-search-widget] .hsw-hero { padding:0 0 12px;border-bottom:3px solid var(--main) } #article .contentBox .side [data-hotel-search-widget] .hsw-kicker { display:none } #article .contentBox .side [data-hotel-search-widget] .hsw-title { margin:0;font-size:24px;line-height:1.4;font-weight:700;color:#222 } #article .contentBox .side [data-hotel-search-widget] .hsw-lead { margin:5px 0 0;color:#555;font-size:14px;line-height:1.7 } #article .contentBox .side [data-hotel-search-widget] .hsw-body { padding:18px 0 0;background:#fff } #article .contentBox .side [data-hotel-search-widget] .hsw-form { display:grid;gap:14px } #article .contentBox .side [data-hotel-search-widget] .hsw-row { display:grid;gap:12px;align-items:end } #article .contentBox .side [data-hotel-search-widget] .hsw-main-row { grid-template-columns:minmax(250px,1.7fr) 1fr 1fr 130px } #article .contentBox .side [data-hotel-search-widget] .hsw-field { position:relative;display:grid;gap:6px;min-width:0 } #article .contentBox .side [data-hotel-search-widget] .hsw-label { color:#333;font-size:13px;font-weight:700 } #article .contentBox .side [data-hotel-search-widget] .hsw-input, #article .contentBox .side [data-hotel-search-widget] .hsw-select { width:100%;height:48px;border:1px solid #bfc7cf;border-radius:3px;background:#fff;padding:0 12px;color:#222;font:inherit;font-size:15px;font-weight:500;outline:0;box-shadow:none;appearance:auto } #article .contentBox .side [data-hotel-search-widget] .hsw-input:focus, #article .contentBox .side [data-hotel-search-widget] .hsw-select:focus { border-color:var(--main);box-shadow:0 0 0 2px rgba(0,104,183,.16) } #article .contentBox .side [data-hotel-search-widget] .hsw-place { padding-right:42px } #article .contentBox .side [data-hotel-search-widget] .hsw-clear { position:absolute;right:8px;bottom:8px;width:32px;height:32px;border:0;border-radius:50%;background:#edf1f4;color:#5b6670;font-size:18px;line-height:1;cursor:pointer } #article .contentBox .side [data-hotel-search-widget] .hsw-suggest { position:absolute;z-index:9999;left:0;right:0;top:72px;border:1px solid #bac6cf;border-radius:3px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.16);display:none;overflow:hidden } #article .contentBox .side [data-hotel-search-widget] .hsw-suggest.is-open { display:block } #article .contentBox .side [data-hotel-search-widget] .hsw-suggest-status { padding:9px 12px;background:#f5f7f9;color:#555;font-size:13px;border-bottom:1px solid #e2e7eb } #article .contentBox .side [data-hotel-search-widget] .hsw-suggest-list { max-height:300px;overflow:auto;margin:0;padding:0;list-style:none } #article .contentBox .side [data-hotel-search-widget] .hsw-suggest-btn { width:100%;display:flex;justify-content:space-between;gap:12px;border:0;border-top:1px solid #edf0f2;background:#fff;padding:11px 12px;text-align:left;cursor:pointer } #article .contentBox .side [data-hotel-search-widget] .hsw-suggest-btn:hover, #article .contentBox .side [data-hotel-search-widget] .hsw-suggest-btn.is-active { background:var(--main-soft) } #article .contentBox .side [data-hotel-search-widget] .hsw-name { display:block;color:#222;font-size:15px;font-weight:700 } #article .contentBox .side [data-hotel-search-widget] .hsw-meta { display:block;margin-top:2px;color:#687582;font-size:12px } #article .contentBox .side [data-hotel-search-widget] .hsw-badge { height:max-content;min-width:46px;text-align:center;border-radius:2px;padding:3px 7px;font-size:11px;font-weight:700 } #article .contentBox .side [data-hotel-search-widget] .hsw-badge.city { background:var(--main);color:#fff } #article .contentBox .side [data-hotel-search-widget] .hsw-badge.area { background:#fff5e6;color:#8d5600;border:1px solid #efc77c } #article .contentBox .side [data-hotel-search-widget] .hsw-guests { border:1px solid var(--border);border-radius:4px;background:#fff;overflow:hidden } #article .contentBox .side [data-hotel-search-widget] .hsw-guests-toggle { width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;border:0;background:#f5f8fa;padding:11px 14px;text-align:left;cursor:pointer } #article .contentBox .side [data-hotel-search-widget] .hsw-guests-summary { display:block;color:#222;font-size:15px } #article .contentBox .side [data-hotel-search-widget] .hsw-toggle-mark { display:grid;place-items:center;width:28px;height:28px;border:1px solid #c8d0d7;border-radius:50%;background:#fff;color:var(--main);font-size:18px;font-weight:700 } #article .contentBox .side [data-hotel-search-widget] .hsw-guests-panel { padding:14px } #article .contentBox .side [data-hotel-search-widget] .hsw-rooms { display:grid;gap:12px } #article .contentBox .side [data-hotel-search-widget] .hsw-room { min-width:0;margin:0;padding:12px 14px 14px;border:1px solid #dce2e7;border-radius:3px;background:#fff } #article .contentBox .side [data-hotel-search-widget] .hsw-room-title { padding:0 6px;color:var(--main);font-size:14px;font-weight:700 } #article .contentBox .side [data-hotel-search-widget] .hsw-room-row { display:grid;grid-template-columns:180px 180px 1fr;gap:12px;align-items:end } #article .contentBox .side [data-hotel-search-widget] .hsw-room-note { margin:0 0 14px;color:var(--muted);font-size:12px } #article .contentBox .side [data-hotel-search-widget] .hsw-ages { display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e7eb } #article .contentBox .side [data-hotel-search-widget] .hsw-age-field { display:grid;gap:6px;min-width:0 } #article .contentBox .side [data-hotel-search-widget] .hsw-age-label { font-size:12px;font-weight:700 } #article .contentBox .side [data-hotel-search-widget] .hsw-actions { display:flex;justify-content:center } #article .contentBox .side [data-hotel-search-widget] .hsw-submit { width:100%;max-width:360px;height:52px;border:0;border-radius:3px;background:var(--accent);color:#fff;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 2px 0 #c97800 } #article .contentBox .side [data-hotel-search-widget] .hsw-submit:hover { background:#df8600 } #article .contentBox .side [data-hotel-search-widget] .hsw-error { display:none;margin-top:12px;padding:10px 12px;border-left:4px solid #d92d20;background:#fff2f0;color:#b42318;font-size:13px } #article .contentBox .side [data-hotel-search-widget] .hsw-error.is-show { display:block } #article .contentBox .side [data-hotel-search-widget] .hsw-foot { margin:10px 0 0;color:#66717d;font-size:12px;text-align:center } #article .contentBox .side [data-hotel-search-widget] .hsw-preview-url { display:none;margin-top:10px;padding:10px;border:1px solid #dfe5e9;background:#f6f8fa;color:#596773;font-size:11px;word-break:break-all } #article .contentBox .side [data-hotel-search-widget] .hsw-preview-url.is-show { display:block } @media(max-width:860px) { #article .contentBox .side [data-hotel-search-widget] .hsw-main-row { grid-template-columns:1fr 1fr } #article .contentBox .side [data-hotel-search-widget] .hsw-field:first-child { grid-column:1/-1 } #article .contentBox .side [data-hotel-search-widget] .hsw-room-row { grid-template-columns:1fr 1fr } #article .contentBox .side [data-hotel-search-widget] .hsw-room-note { grid-column:1/-1 } #article .contentBox .side [data-hotel-search-widget] .hsw-ages { grid-template-columns:repeat(2,minmax(120px,1fr)) } } @media(max-width:560px) { #article .contentBox .side [data-hotel-search-widget] .hsw-title { font-size:20px } #article .contentBox .side [data-hotel-search-widget] .hsw-main-row, #article .contentBox .side [data-hotel-search-widget] .hsw-room-row, #article .contentBox .side [data-hotel-search-widget] .hsw-ages { grid-template-columns:1fr } #article .contentBox .side [data-hotel-search-widget] .hsw-field:first-child { grid-column:auto } #article .contentBox .side [data-hotel-search-widget] .hsw-guests-panel { padding:10px } #article .contentBox .side [data-hotel-search-widget] .hsw-submit { max-width:none } } /* ------------------------------------------------------------ 4. 2カラムのレイアウト（article.css の指定を上書き） article.css の既定 #article .inner { max-width:1000px; } #article .contentBox { display:flex; } 縦積みは830px以下 aside { width:250px; margin-left:2em; } 幅は :root の --content-w と --side-w だけ変えれば調整できます。 ------------------------------------------------------------ */ /* article.css の左右16pxは「画面1000px以下」のときだけの指定なので、 1000〜1200pxでは余白が無く、本文が画面の左端にくっついていました。 幅を広げたぶん、余白は常に入れておきます。 （box-sizing:border-box なので、広い画面では中身がちょうど --content-w になります） */ #article .inner, #article .breadclumb ul { max-width: calc(var(--content-w) + 32px); padding-left: 16px; padding-right: 16px; } @media only screen and (min-width: 831px) { #article .contentBox { display: flex; align-items: flex-start; gap: 40px; } #article .contentBox > main { flex: 1 1 auto; min-width: 0; width: auto; float: none; } #article .contentBox > aside.side { flex: 0 0 var(--side-w); width: var(--side-w); max-width: var(--side-w); margin-left: 0; float: none; } } @media only screen and (max-width: 830px) { #article .contentBox { display: block; } #article .contentBox > aside.side { width: 100%; max-width: 100%; margin-left: 0; margin-top: 40px; float: none; } } /* ------------------------------------------------------------ 5. 記事ヘッダーのカテゴリー表示 一覧ページの分類（ltike-articles.js の category）から自動で出します。 表示だけで、リンクにはしていません。 ------------------------------------------------------------ */ #article .contentBox .artCat { margin: 0 0 .6em; } #article .contentBox .artCat:empty { display: none; } #article .contentBox .artCat .artCat__label { display: inline-flex; align-items: center; padding: .3em 1em; border-radius: 9999px; background: var(--badge-bg); color: var(--blue-link); font-size: .8rem; font-weight: 700; line-height: 1.4; } /* 日付の欄は、どこを押してもカレンダーが開きます */ #article .contentBox .side [data-hotel-search-widget] .hsw-field--date{cursor:pointer} #article .contentBox .side [data-hotel-search-widget] .hsw-field--date .hsw-label{cursor:pointer} #article .contentBox .side [data-hotel-search-widget] .hsw-field--date .hsw-input{cursor:pointer} #article .contentBox .side [data-hotel-search-widget] .hsw-field--date .hsw-input::-webkit-calendar-picker-indicator{cursor:pointer} /* ------------------------------------------------------------ OS やブラウザがダークモードのとき、ネイティブの部品 （ラジオ・チェックボックス・日付欄・プルダウン）が 暗い配色で描かれます。このサイトは白地の前提なので、 明るい配色に固定します。 ------------------------------------------------------------ */ #article .contentBox .side { color-scheme: light; } #article .contentBox .side input, #article .contentBox .side select, #article .contentBox .side textarea { color-scheme: light; } /* ------------------------------------------------------------ サイドバー：同じカテゴリーの記事 人気エリアの下・追従する枠（検索窓＋バナー）の上に入ります。 サイドバー全体が本文より長くならないよう、入りきらないぶんは ltike-app.js が下から自動で減らします。 見出しの下の青い線を「1本目の区切り線」として使います。 以前は見出しの青線のすぐ下に、1件目の上のグレー線もあって 二重線に見えていたため、グレー線は2件目から（各行の下だけ）にしました。 見出しの下の余白も 0 にして、青線〜1件目の文字の間を グレー線〜次の文字の間（12px）と同じにしています。 ------------------------------------------------------------ */ #article .contentBox .side .relSec { padding-bottom:0; } #article .contentBox .side .relSec .secTtl { margin-bottom:0; } #article .contentBox .side .relSec .relMore { margin-bottom:0; } #article .contentBox .side .relList { list-style:none; margin:0; padding:0; } #article .contentBox .side .relList li { border-bottom:1px solid var(--line); } #article .contentBox .side .relList li:first-child { border-top:0; } #article .contentBox .side .relList a { display:block; padding:12px 0; font-size:14px; line-height:21px; color:var(--blue-link); text-decoration:none; } #article .contentBox .side .relList a:hover { text-decoration:underline; } #article .contentBox .side .relMore { display:inline-block; margin-top:12px; font-size:13px; font-weight:600; color:var(--blue-link); text-decoration:none; } #article .contentBox .side .relMore::after { content:" →"; } #article .contentBox .side .relMore:hover { text-decoration:underline; } #article .contentBox .side .relMore[hidden] { display:none; } /* サイドバー内の各セクションは通常フローで縦に並べます */ #article .contentBox .side .side__follow > .sec, #article .contentBox .side .side__follow > .relSec { position: relative; display: block; width: 100%; clear: both; } /* ------------------------------------------------------------ ホテル検索窓：宿泊日の欄とカレンダー（2026-09 追加） ブラウザ標準の日付欄は見た目を変えられないため、 ltike-app.js の「4-2」でサイト用のカレンダーに置き換えています。 欄は航空券の「行き／帰り」と同じ形（小さな青い見出し＋日付）、 カレンダーは航空券の日付パネルと同じ白地・同じ影にしています。 青 #0074BE 選んだ日・土曜・操作できるもの 薄い青 #E9F8FF 泊まる期間の帯 赤 #D0342C 日曜・祝日 グレー #C4CBD2 選べない日 ------------------------------------------------------------ */ #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay{ position:relative; display:block; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__box{ position:relative; display:flex; align-items:stretch; height:2.75rem; border:1px solid var(--line-input); border-radius:0.5rem; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay.is-open .hsw-stay__box{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(0,116,190,.14); } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__icon{ position:absolute; left:0.75rem; top:50%; width:1.25rem; height:1.25rem; margin-top:-0.625rem; fill:var(--blue); pointer-events:none; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__btn{ flex:1 1 0; min-width:0; margin:0; padding:0 0.5rem 0 2.625rem; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:0.1875rem; border:0; border-radius:0.5rem 0 0 0.5rem; background:transparent; color:#222; font-family:var(--font-form); text-align:left; cursor:pointer; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__btn + .hsw-stay__btn{ padding-left:0.75rem; border-left:1px solid #EEF1F4; border-radius:0; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__btn:hover{ background:#F7FBFE; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__btn.is-active{ background:#F1F8FD; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__btn:focus-visible{ outline:3px solid #FABB00; outline-offset:-3px; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__ttl{ font-size:0.625rem; font-weight:700; line-height:1; color:var(--blue); letter-spacing:0; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__val{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.8125rem; line-height:1.2; letter-spacing:-.019em; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__btn.is-active .hsw-stay__val{ color:var(--blue); font-weight:700; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__nights{ flex:none; align-self:center; margin:0 0.625rem 0 0.25rem; padding:0.1875rem 0.5rem; border-radius:9999px; background:var(--badge-bg); color:var(--blue); font-family:var(--font-form); font-size:0.6875rem; font-weight:700; line-height:1.2; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-stay__nights:empty{ display:none; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal{ position:absolute; z-index:60; left:0; right:0; top:calc(100% + 0.375rem); max-width:22rem; padding:0.75rem 0.75rem 0.625rem; background:#fff; border:1px solid var(--line-input); border-radius:0.5rem; box-shadow:0 0.5rem 2rem rgba(0,0,0,.22); font-family:var(--font-form); color:#222; animation:hswCalIn .14s ease-out; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal[hidden]{ display:none !important; } @keyframes hswCalIn{ from{ opacity:0; transform:translateY(-0.25rem); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal{ animation:none; } } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__head{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__month{ font-size:0.9375rem; font-weight:700; line-height:1.4; letter-spacing:-.011em; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__nav{ width:2rem; height:2rem; margin:0; padding:0 0 0.125rem; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-input); border-radius:9999px; background:#fff; color:var(--blue); font-size:1.125rem; line-height:1; cursor:pointer; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__nav:hover:not(:disabled){ background:#E9F8FF; border-color:#BFE3F7; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__nav:disabled{ color:#C4CBD2; cursor:default; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__nav:focus-visible, #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day:focus-visible, #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__close:focus-visible{ outline:3px solid #FABB00; outline-offset:-1px; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__guide{ margin:0.5rem 0 0.375rem; padding:0.3125rem 0.5rem; border-radius:0.25rem; background:#F4F7FA; color:#444; font-size:0.75rem; font-weight:600; line-height:1.4; text-align:center; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__week, #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__week{ padding:0.25rem 0; border-bottom:1px solid #EEF1F4; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__week span{ font-size:0.6875rem; line-height:1.4; color:#616161; text-align:center; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__week .is-sun{ color:#D0342C; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__week .is-sat{ color:var(--blue); } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__grid{ row-gap:0.125rem; margin-top:0.375rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day{ position:relative; height:2.375rem; margin:0; padding:0; display:flex; align-items:center; justify-content:center; border:0; border-radius:0; background:transparent; color:#222; font-family:var(--font-form); font-size:0.8125rem; line-height:1; cursor:pointer; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__num{ position:relative; width:2.125rem; height:2.125rem; display:flex; align-items:center; justify-content:center; border-radius:0.375rem; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-sun{ color:#D0342C; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-sat{ color:var(--blue); } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day:hover:not(:disabled) .hsw-cal__num{ box-shadow:inset 0 0 0 1px var(--blue); } /* 今日の印（小さな点） */ #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-today .hsw-cal__num::after{ content:""; position:absolute; left:50%; bottom:0.25rem; width:0.25rem; height:0.25rem; margin-left:-0.125rem; border-radius:9999px; background:currentColor; } /* 選べない日 */ #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day:disabled{ color:#C4CBD2; cursor:default; } /* 泊まる期間の帯。チェックイン日・チェックアウト日の半分まで伸ばして途切れないようにします */ #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-range{ background:#E9F8FF; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-in.has-range{ background:linear-gradient(90deg,transparent 50%,#E9F8FF 50%); } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-out{ background:linear-gradient(90deg,#E9F8FF 50%,transparent 50%); } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-in .hsw-cal__num, #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-out .hsw-cal__num{ background:var(--blue); color:#fff; font-weight:700; box-shadow:none; } /* チェックアウトを選んでいる途中の「仮の範囲」は薄めに */ #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-range.is-preview{ background:#F3FAFE; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-out.is-preview{ background:linear-gradient(90deg,#F3FAFE 50%,transparent 50%); } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__day.is-out.is-preview .hsw-cal__num{ background:#fff; color:var(--blue); box-shadow:inset 0 0 0 2px var(--blue); } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:0.5rem; margin-top:0.5rem; padding-top:0.5rem; border-top:1px solid #EEF1F4; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__note{ font-size:0.6875rem; line-height:1.5; color:#616161; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__noteMain{ display:block; color:#222; font-weight:700; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__noteSub{ display:block; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__close{ flex:none; margin:0; padding:0.3125rem 0.75rem; border:1px solid var(--line-input); border-radius:0.25rem; background:#fff; color:var(--blue); font-family:var(--font-form); font-size:0.75rem; font-weight:700; line-height:1.4; cursor:pointer; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-cal__close:hover{ background:#E9F8FF; } /* 目的地・人数の欄も、アイコンと文字の間を航空券の欄とそろえます （アイコン：左から0.75rem・幅1.25rem ／ 文字：左から2.625rem） */ #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-place{ padding-left:2.625rem; background-position:0.75rem center; } #article .contentBox .side .widgetSlot [data-hotel-search-widget] .hsw-guests-toggle{ padding-left:2.625rem; background-position:0.75rem center; } /* ------------------------------------------------------------ サイドバーの終わりを、本文の終わりにそろえる（PC・2カラムのとき） article.css の「#article .contentBox section { margin-bottom:4em }」で、 本文の最後の段落（参考・出典など）の下にも 4em の空きがあり、 サイドバーはその空きの下まで伸びていました。 最後の要素の下の空きを 0 にして、同じ 4em を2カラム全体の下に移します。 フッターまでの距離はこれまでと同じです。 ------------------------------------------------------------ */ @media only screen and (min-width: 831px) { #article .contentBox > main > article > :last-child, #article .contentBox > main > article > :last-child > :last-child, #article .contentBox > main > :last-child { margin-bottom:0; } #article .contentBox { padding-bottom:4em; } }