@charset "utf-8"; /* ============================================================================ 旅行会社様向けページ（静的サイトから移管した 145 枚）を、企業サイトと同じ部品で描く CSS（2026-10-09）。 企業サイトの style.css の後に読む（lt-parts.php の lt_enqueue）。手で設計している（生成しない）。 08-19 の試作（lt-design.css ほか 5 本・却下と見比べの材料）とは別のファイルである。 骨組みは企業サイトの下層ページそのまま＝header.php → パンくず（Yoast）→ #main（650）＋ #side（300）→ footer.php。 2026-10-27 からパンくずと #main の間に旅行会社様向けのメニュー（.lt-nav・全幅）を置く（ラテラの要望）。 右欄（#side）はトップだけ。ほかのページは #main に lt-wide が付き、本文欄を全幅（1000px）で組む。 骨組み・頭・尾・パンくず・右欄（sideFrame）・題の h2・送信ボタンは style.css が描く。ここが描くのは、 旧デザインの本文の部品（65 種の class）を、企業サイトの同じ役割の部品の見た目に当てることだけである。 ページの題 .title h1 → h2（24px・水色・地球のアイコン・下罫） 節の見出し .topmain-title・.keisai-top → h3（20px・下罫の左 30% が水色） 小見出し .guideichiran-h2・.keisai-title → h4（左罫 2px の水色） 国名の帯 .mizuiro .white-15 → h5（青の帯・白文字・黄の左罫） 表 .two-rows → .tbl01（見出しの列は面 #f6f6f6・罫 #e6e6e6） お問い合わせ .topside-inner → .cvBox（水色 3px の枠） カートに入れる [lt_cartbtn] → input[type="submit"]（style.css の送信ボタン） 本文の HTML は変えていない（共通の塊 3 つを部品へ畳んだことを除く）。旧の飾り画像（見出しの帯・区切りの gif）は使わない。 値は style.css の語彙＝色 #01a0c8（アクセント）・#232323／#555（文字）・#e6e6e6／#d5d5d5（罫）・#f6f6f6（面）。 ============================================================================ */ /* ---- 器・共通 ------------------------------------------------------------- */ /* 行の高さは企業サイトの 1.8 より少し詰める。旧の本文は main.css の 1.3em を前提に
と空の段落で間隔を作っており、 1.8 のままだと間隔が旧の 1.4 倍に開く（2026-10-09 夕・福田「表示が崩れている」）。 */ #contents #lt-content { color: #555; line-height: 1.7; } #contents #lt-content #content { padding: 0; } /* 右欄の無いページ（トップ以外・lt_has_side）＝本文欄を全幅に。style.css の #contents #main（650px・左寄せ）を外す */ #contents #main.lt-wide { width: auto; float: none; } #contents #lt-content p { margin: 0 0 8px; } #contents #lt-content h1, #contents #lt-content h2, #contents #lt-content h3, #contents #lt-content h4 { line-height: 1.5; } #contents #lt-content ul { margin-top: 0; } #contents #lt-content img { max-width: 100%; height: auto; vertical-align: middle; } #contents #lt-content .clr, #contents #lt-content .clearfix { clear: both; } #contents #lt-content .clearfix:after, #contents #lt-content .box-inner:after { content: ""; display: block; clear: both; } #contents #lt-content .text-10 { font-size: 11px; } #contents #lt-content .text-14 { font-size: 14px; } #contents #lt-content .title17 { font-size: 17px; font-weight: bold; color: #232323; } #contents #lt-content .textaqua-14 { font-size: 14px; color: #01a0c8; } #contents #lt-content p.chuki { font-size: 12px; color: #777; } #contents #lt-content p.honbun { margin: 0 0 4px; } /* 旧デザインの区切り線（gif）＝1px の罫 */ #contents #lt-content img[src$="border530.gif"] { display: block; width: 100%; height: 0; margin: 14px 0; border-top: 1px solid #e6e6e6; } /* 旧デザインの 860px の器に合わせた固定幅を、本文欄（650px）に収める */ #contents #lt-content [style*="width"] { max-width: 100%; box-sizing: border-box; } #contents #lt-content table, #contents #lt-content table[width], #contents #lt-content table[style*="width"] { width: 100% !important; max-width: 100%; } #contents #lt-content table[style*="margin-left"], #contents #lt-content div[style*="margin-left"] { margin-left: 0 !important; } #contents #lt-content div[style*="height"] { height: auto !important; } /* 表のセル。企業サイトの init.css は全セルを左寄せにしており、旧の本文の align 属性（一覧の価格の列の右寄せ 81 か所ほか）が 効かない（属性は CSS に負ける）。旧の main.css はセルを上寄せにしていた。 */ #contents #lt-content td, #contents #lt-content th { vertical-align: top; } #contents #lt-content td[align="right"], #contents #lt-content th[align="right"] { text-align: right; } #contents #lt-content td[align="center"], #contents #lt-content th[align="center"] { text-align: center; } /* クリック領域つきの地図（トップ）は縮めない＝座標がずれる。狭いときは横に送る */ #contents #lt-content img[usemap] { max-width: none; } #contents #lt-content .topmain-inner-map { overflow-x: auto; } /* ---- 見出し --------------------------------------------------------------- */ /* 本文の h2 には style.css の「題の h2」（#contents #main h2）が効いてしまうので、いったん外してから役割ごとに当てる */ #contents #lt-content h2 { color: #232323; background: none; border: 0; padding: 0; margin: 0; font-size: 20px; } /* ページの題＝企業サイトの h2（style.css の #contents #main h2 と同じ値） */ #contents #lt-content .title h1, #contents #lt-content #content > .title:first-child > h2 { color: #01a0ca; font-size: 24px; font-weight: bold; line-height: 1.5; margin: 0 0 20px; padding: 0 0 10px 50px; border: 0; border-bottom: 1px solid #d5d5d5; background: url('images/icn_services.gif') no-repeat; box-sizing: border-box; } #contents #main h2.lt-page-title { margin-top: 0; } /* 節の見出し＝企業サイトの h3（下罫と、左 30% の水色の帯） */ #contents #lt-content .topmain-title h1, #contents #lt-content .topmain-title h2, #contents #lt-content .keisai-top h2, #contents #lt-content .title h3 { font-size: 20px; font-weight: bold; color: #232323; line-height: 1.5; padding: 5px 0; margin: 30px 0 16px; border: 0; border-bottom: 1px solid #e6e6e6; background: none; position: relative; box-sizing: border-box; } #contents #lt-content .topmain-title h1:after, #contents #lt-content .topmain-title h2:after, #contents #lt-content .keisai-top h2:after, #contents #lt-content .title h3:after { content: ""; display: block; width: 30%; border-bottom: 2px solid #01a0c8; position: absolute; left: 0; bottom: -1px; } #contents #lt-content .topmain-title:first-child h1 { margin-top: 0; } #contents #lt-content .topmain-title h2 .title { color: inherit; font-size: inherit; } /* 小見出し＝企業サイトの h4（左罫） */ #contents #lt-content h2.guideichiran-h2, #contents #lt-content .topside-title h3, #contents #lt-content p.m-title { font-size: 16px; font-weight: bold; color: #232323; line-height: 1.5; margin: 0 0 10px; padding: 0 0 0 10px; border: 0; border-left: 2px solid #01a0c8; background: none; position: static; } #contents #lt-content .topside-title h3:after { display: none; } /* 国名の帯＝企業サイトの h5（青の帯・白文字・黄の左罫） */ #contents #lt-content .mizuiro { margin: 24px 0 0 !important; } #contents #lt-content .mizuiro p, #contents #lt-content p.white-15 { font-size: 18px; font-weight: bold; line-height: 1.25; color: #fff; margin: 0; padding: 10px 10px 10px 16px; background: #449ec5; border-left: 10px solid #fbed56; box-sizing: border-box; } #contents #lt-content .mizuirobox { margin: 0 0 24px; } #contents #lt-content .mizuirobox-inner { padding: 12px 0 0; } /* ---- 表＝企業サイトの .tbl01 ---------------------------------------------- */ #contents #lt-content table.two-rows { border: 1px solid #e6e6e6; border-collapse: collapse; border-spacing: 0; line-height: 1.6; } #contents #lt-content table.two-rows th { padding: 10px; border: 1px solid #e6e6e6; background: #f6f6f6; text-align: left; vertical-align: middle; font-weight: bold; color: #232323; } #contents #lt-content table.two-rows td { padding: 10px 12px; border: 1px solid #e6e6e6; vertical-align: middle; } #contents #lt-content table.two-rows p { margin: 0; } /* ---- 商品詳細（#guide-detail・81 枚） ------------------------------------- */ #contents #guide-detail .box-inner { margin: 0 0 10px; } #contents #guide-detail .box-inner2 { overflow: hidden; } /* 商品詳細は右欄の無い全幅（1000px）で組む＝旧デザインと同じく書影 300px・右の列に説明と掲載内容（2026-10-27）。 右の列 660px（内幅 620px）なら現地情報の長い地名も折り返さない（字数からの推定で 0 枚・420px では 23 枚） */ #contents #guide-detail .left { float: left; width: 300px; } #contents #guide-detail .right { float: right; width: 660px; } #contents #guide-detail img.guidebook { width: 100%; border: 1px solid #e6e6e6; padding: 4px; background: #fff; box-sizing: border-box; } #contents #guide-detail img.button { margin: 10px 0 0; } #contents #guide-detail p.copy { color: #01a0c8; font-size: 18px; font-weight: bold; line-height: 1.5; margin: 0 0 10px; } #contents #guide-detail p.teisai { line-height: 2; margin: 0; } #contents #guide-detail .keisai-top { margin: 0; } #contents #guide-detail .keisai-back { background: #f6f6f6; padding: 16px 20px 12px; } #contents #guide-detail .keisai-back p { margin: 0; line-height: 1.75; } #contents #guide-detail p.keisai-title { font-size: 15px; font-weight: bold; color: #232323; margin: 16px 0 6px; padding: 0 0 0 8px; border-left: 2px solid #01a0c8; } #contents #guide-detail .keisai-back > p.keisai-title:first-child { margin-top: 0; } #contents #guide-detail table.keisai-table { border-collapse: collapse; } #contents #guide-detail table.keisai-table td { vertical-align: top; padding: 0; } #contents #guide-detail .keisai-back p.chuki { margin-top: 10px; } #contents #guide-detail .keisai-bottom { display: none; } /* かご＝数量欄は style.css の入力欄（幅 97%）を戻す。ボタンは style.css の送信ボタンのまま */ #contents #lt-content input[name="num"] { width: 5em; display: inline-block; margin: 0 4px; padding: 3px 8px; font-size: 14px; font-family: inherit; box-sizing: border-box; } #contents #lt-content form input[type="submit"] { margin: 14px 0 8px; } /* 検索窓（[lt_search]・商品の本文の後ろとトップ）。旧本文の inline style を部品へ移した */ #contents #main h3.lt-search-title { margin-top: 40px; } #contents #main .lt-search { margin: 0 0 30px; max-width: 560px; } #contents .gsc-input-box input.gsc-input { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; font-size: 16px; } #contents input.gsc-input, #contents .gsc-input-box, #contents .gsc-input-box-hover, #contents .gsc-input-box-focus { border-color: #d9d9d9; } #contents .gsc-search-button, #contents button.gsc-search-button-v2, #contents input.gsc-search-button { border-color: #01a0c8; background-color: #01a0c8; background-image: none; filter: none; } /* ---- 商品一覧（#guide-ichiran・海外・国内・営業所一覧） ------------------- */ #contents #guide-ichiran .guide-description { margin: 0 0 20px; } #contents #guide-ichiran .box0 { display: flex; border-top: 1px solid #e6e6e6; padding: 14px 0; margin: 0; } #contents #guide-ichiran .left0 { flex: 0 0 140px; width: 140px; } #contents #guide-ichiran .left0 h2.guideichiran-h2 { margin: 4px 0; } #contents #guide-ichiran .right0 { flex: 1 1 auto; min-width: 0; overflow: hidden; } #contents #guide-ichiran .left1, #contents #guide-ichiran .left2 { float: left; width: 48%; margin: 0 4% 0 0; } #contents #guide-ichiran .right1 { float: right; width: 48%; margin: 0; } #contents #lt-content table.guideichiran { border-collapse: collapse; } #contents #lt-content table.guideichiran td { padding: 6px 4px; border-bottom: 1px dotted #ddd; line-height: 1.5; vertical-align: top; } /* ---- 観光地図・コンテンツ（#kankoumap・観光地図 46 枚と一覧・変更情報ほか） ---- */ #contents #kankoumap .box-inner { margin: 0 0 16px; } #contents #kankoumap .box-inner[align="right"] p { margin: 0; } #contents #kankoumap .left, #contents #kankoumap .right { float: none; width: auto; } #contents #kankoumap .right { margin: 12px 0 0; } #contents #kankoumap ul.colArea, #contents #kankoumap ul.colArea2 { display: flex; flex-wrap: wrap; gap: 0 4%; margin: 0; padding: 0; list-style: none; } #contents #kankoumap li.col3, #contents #kankoumap li.col3-right, #contents #kankoumap li.col3-2, #contents #kankoumap li.col3-2-right { flex: 0 0 30.6%; list-style: none; margin: 0 0 12px; } /* 地図の見本（都市地図・詳細地図・周辺地図）＝見出しの帯と枠のカード（旧も灰色の帯＋罫の箱だった） */ #contents #kankoumap ul.colArea li .top { background: #f6f6f6; border: 1px solid #e6e6e6; border-bottom: 0; padding: 6px 12px; } #contents #kankoumap ul.colArea li .top p.title17 { font-size: 15px; margin: 0; } #contents #kankoumap ul.colArea li .bottom { border: 1px solid #e6e6e6; padding: 10px; text-align: center; } #contents #kankoumap ul.colArea li .bottom img { display: block; margin: 0 auto; } #contents #kankoumap ul.colArea2 li p { margin: 0 0 4px; } #contents #kankoumap .left1 { float: left; width: 48%; margin: 0 4% 0 0; } #contents #kankoumap .right1 { float: right; width: 48%; } #contents #kankoumap .left-sonota { float: left; width: 48%; } #contents #kankoumap .right-sonota { float: right; width: 48%; } /* ---- 旅行会社様向けトップ（.tw＝top.html・result.html） ------------------- */ /* 本文欄は主欄（検索・地図・お知らせ・TOPICS）だけ。#topside（お問い合わせ・バナー）は型が右欄へ移す（下の .lt-aside） */ #contents .tw #topmain { float: none; width: auto; } #contents #lt-content .topmain-inner { margin: 0 0 10px; } #contents #lt-content .topmain-inner-map { margin: 0 0 10px; } #contents #lt-content .topmain-inner-map p.chuki { margin: 10px 0 0; } #contents #lt-content .topmain-inner p.title { color: #232323; font-size: 15px; font-weight: bold; margin: 12px 0 2px; line-height: 1.6; } #contents #lt-content .topmain-inner p.title a { color: #01a0c8; } /* TOPICS の題は少し大きく（2026-10-27・ラテラの要望）。目印 .lt-topics は本文の箱に付けた（markup_fix.py） */ #contents #lt-content .topmain-inner.lt-topics p.title { font-size: 17px; } /* 右欄へ移した #topside＝企業サイトの右欄の語彙（題は #side h4・お問い合わせは sideFrame の罫の箱・バナーは sideBnr のように縦に） */ #contents #side .lt-aside { margin: 0 0 30px; } #contents #side .lt-aside #topside { float: none; width: auto; margin: 0; } #contents #side .lt-aside .topside-title h3 { color: #333; border-left: 3px solid #01a0ca; font-size: 22px; font-weight: bold; line-height: 1.5; margin: 0 0 10px; padding: 0 0 0 15px; } #contents #side .lt-aside .topside-inner { border: 1px solid #d5d5d5; padding: 6px 20px 18px; margin: 0 0 16px; box-sizing: border-box; } #contents #side .lt-aside .topside-inner p { margin: 0; line-height: 1.7; } #contents #side .lt-aside .topside-inner p.title { color: #232323; font-size: 15px; font-weight: bold; margin: 12px 0 0; } #contents #side .lt-aside .topside-inner p.honbun { color: #555; font-size: 15px; } #contents #side .lt-aside .topside-inner p img { display: block; margin: 16px auto 0; max-width: 100%; height: auto; } #contents #side .lt-aside #topside > a { display: block; margin: 0 0 12px; } #contents #side .lt-aside #topside > a img { display: block; margin: 0 auto; max-width: 100%; height: auto; } /* ---- その他・Q&A・サイトマップ（#other・#q-and-a・#privacy） --------------- */ #contents #other .box-inner { margin: 0 0 24px; } #contents #other .box-inner p.midashi { color: #232323; font-size: 15px; font-weight: bold; margin: 0 0 2px; line-height: 1.6; } #contents #other .box-inner p.midashi a { color: #01a0c8; } #contents #other #left { float: left; width: 42%; margin: 0 4% 0 0; } #contents #other #left2, #contents #other #right2 { float: left; width: 48%; margin: 0 4% 0 0; } #contents #other .q-box2 { margin: 16px 0 0 16px; } #contents #other .q-box3 { margin: 0 0 0 16px; font-size: 12px; } #contents #other .q-box, #contents #q-and-a .q-box { margin: 0 0 20px; } /* Q&A＝質問は面、答えは罫の箱（企業サイトの .tbl01 の th／td と同じ値） */ #contents #lt-content .question { margin: 0; font-weight: bold; color: #232323; background: #f6f6f6; padding: 10px 14px; border: 1px solid #e6e6e6; } #contents #lt-content .answer { margin: 0; padding: 10px 14px; border: 1px solid #e6e6e6; border-top: 0; } #contents #lt-content .answer p { margin: 0 0 4px; } /* サイトマップ＝見出しではなく、右欄と同じ ■付きのリスト（.sideList の値） */ #contents #privacy .q-box { margin: 0; } #contents #privacy .q-box h3 { font-size: 15px; font-weight: normal; margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid #ddd; display: list-item; list-style: square inside; color: #01a0c8; } #contents #privacy .q-box h3:after { display: none; } #contents #privacy .q-box p:empty { display: none; } /* ---- 旅行会社様向けのメニュー（lt_nav・パンくずの下に全幅・2026-10-27） ------------------ 4 項目（旧ナビの「会社案内」は企業サイトの「会社情報」と重なるので出さない）。旧デザインの頭の直下の横並び（#navi）に当たる。 企業サイトのグローバルナビ（#gnavi＝15px・細字・字間 2.5px・下罫 5px の水色・地なし）より目立たせる（同日夕・ラテラ 「もう少し目立たせたい・フォントの大きさを上げる、太字にする」）＝16px・太字・面 #f6f6f6・下罫 3px。地を付けて グローバルナビとは別の段と分かるようにする。いま居る項目は水色の字と下罫。 先頭は top.html への入口を兼ねる見出し「旅行会社様向け」（.lt-nav-home＝水色の地に白文字）。 */ #contents .lt-nav { margin: 4px 0 12px; } #contents .lt-nav ul { display: flex; gap: 0 10px; margin: 0; padding: 0; list-style: none; } #contents .lt-nav li { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; } #contents .lt-nav li a { display: block; padding: 13px 4px; text-align: center; font-size: 16px; font-weight: bold; letter-spacing: 1px; line-height: 1.5; color: #232323; background: #f6f6f6; text-decoration: none; border-bottom: 3px solid #d5d5d5; } #contents .lt-nav li a:hover { color: #01a0c8; border-bottom-color: #01a0c8; } #contents .lt-nav li.current a { color: #01a0c8; font-weight: bold; border-bottom-color: #01a0c8; } #contents .lt-nav li.lt-nav-home a { background: #01a0c8; color: #fff; font-weight: bold; border-bottom-color: #01a0c8; } #contents .lt-nav li.lt-nav-home a:hover { background: #0090b4; color: #fff; border-bottom-color: #0090b4; } /* ---- 右欄（sidebar-lt.php）＝企業サイトの sideFrame のまま。いま居る項目だけ太字 ---- */ #contents #side.lt-side .sideList li.current a { font-weight: bold; color: #232323; } /* ---- 幅が狭いとき（企業サイトの 800px の切り替えに合わせる） ----------------- */ @media (max-width: 800px) { #contents #guide-detail .left, #contents #guide-detail .right, #contents #guide-ichiran .left1, #contents #guide-ichiran .left2, #contents #guide-ichiran .right1, #contents #kankoumap .left1, #contents #kankoumap .right1, #contents #kankoumap .left-sonota, #contents #kankoumap .right-sonota, #contents #other #left, #contents #other #left2, #contents #other #right2 { float: none; width: auto; margin-left: 0; margin-right: 0; } #contents #guide-detail .left { max-width: 240px; margin: 0 auto 16px; } #contents #guide-ichiran .box0 { display: block; } #contents #guide-ichiran .left0 { width: auto; } #contents #kankoumap li.col3, #contents #kankoumap li.col3-right, #contents #kankoumap li.col3-2, #contents #kankoumap li.col3-2-right { flex-basis: 48%; } #contents #lt-content table.two-rows th, #contents #lt-content table.two-rows td { padding: 8px; } #contents .lt-nav ul { flex-wrap: wrap; gap: 8px 8px; } #contents .lt-nav li { flex: 1 1 40%; } #contents .lt-nav li a { padding: 10px 4px; font-size: 15px; letter-spacing: 0; } }