/* --------------------------------------------------------------
FORM STYLES
----------------------------------------------------------------- */

/* Border-box box model FTW! */
#pardot-form,
#pardot-form *,
#pardot-form *:before,
#pardot-form *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Override form margin and padding set in the default stylesheet. Inherit font and color from page. */
#pardot-form {
    margin: 0;
    padding: 0;
    font: inherit;
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'sans-serif';
    color: inherit;
}

/* Override form field wrapper margin and padding set in the default stylesheet. */
#pardot-form .form-field,
#pardot-form .submit {
    margin: 15px 0 15px 0;
    padding: 0;
}

/* Remove top margin from first from field wrapper. */
#pardot-form .form-field:first-child {
    margin-top: 0;
}

/* Set default input style. */
#pardot-form input {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    color: #2c3e50;
    font-size: 16px;
    padding: 7px 15px;
    width: 100%;
}

/* When labels are not floated left, set width on text inputs, textareas, and selects to 100%. */
#pardot-form input.text,
#pardot-form input.date,
#pardot-form textarea,
#pardot-form select {
    width: 100%;
    font-family: inherit;
    color: inherit;
}

/* When labels are floated left, set width on field labels to a percentage of available width. In browsers that support calc(), use static label width instead and the form field will consume the remaining width. */
#pardot-form.label-left .field-label {
    width: 50%;
    width: calc(115px);
}

/* When labels are floated left, set width on text inputs, textareas, and selects to a percentage. In supported browsers, set width to 100% minus the width of the label instead. */
#pardot-form.label-left input.text,
#pardot-form.label-left input.date,
#pardot-form.label-left textarea,
#pardot-form.label-left select {
    width: 50%;
    width: calc(100% - 115px);
}

/* When labels are floated left, indent supporting form elements by the same amount as the field label. */
#pardot-form.label-left span.value,
#pardot-form.label-left .description,
#pardot-form.label-left .no-label>*,
#pardot-form.label-left .submit,
#pardot-form.label-left .error.no-label {
    margin-left: 50%;
    margin-left: calc(115px);
}

/* Remove unnecessary left padding on required radio/checkbox field labels when label alignment is set to above and the required symbol is set to default in form styling options. */
#pardot-form label.inline {
    padding-left: 0;
}

/* Backup styles in case padding is added to text inputs. */
#pardot-form input.date {
    padding-left: 20px;
    background-position: left center;
}

#pardot-form .submit input {
    background-color: #bb8e00;
    color: #fff;
}

/* エラーメッセージを横書きに固定し、幅を確保する */
#pardot-form .error {
    writing-mode: horizontal-tb !important;
    /* 強制的に横書きに指定 */
    display: block !important;
    /* ブロック要素として表示 */
    width: auto !important;
    /* 幅を自動（または100%）に */
    clear: both !important;
    /* 周囲の回り込みを解除 */
    margin-left: 0 !important;
    /* 左側の余白をリセット（必要に応じて調整） */
    padding-left: 0 !important;
    /* 左側のパディングをリセット */
    white-space: nowrap !important;
    /* 文字を折り返さない（長すぎる場合は削除してください） */
}

/* 特定のPardotエラーラベルの調整 */
#pardot-form p.error.no-label {
    margin-left: 0 !important;
    text-align: left !important;
}

/* 1. フォームの各行の「高さ制限」を解除して、中身に合わせて広がるようにする */
#pardot-form .form-field {
    height: auto !important;
    /* 高さを固定せず、中身に合わせる */
    overflow: visible !important;
    /* はみ出しを隠さず表示 */
    display: block !important;
    clear: both !important;
    /* 前後の要素の回り込みを完全に解除 */
    margin-bottom: 20px !important;
}

/* 2. ラベル（項目名）と入力エリアが横並びでぶつからないように調整 */
#pardot-form .form-field>label {
    float: none !important;
    /* 横並びを一旦解除 */
    width: 100% !important;
    /* 項目名を1行使う（または十分な幅を確保） */
    display: block !important;
    text-align: left !important;
    margin-bottom: 5px !important;
}

/* 3. チェックボックスが入っているエリアの幅を確保 */
#pardot-form .form-field .value {
    float: none !important;
    margin-left: 0 !important;
    /* ラベルの横に無理やり入り込ませない */
    width: 100% !important;
    display: block !important;
}

/* 4. チェックボックスとテキストが重ならないようにする */
#pardot-form .value span {
    display: block !important;
    /* 各選択肢を縦に並べる */
    position: relative !important;
    padding-left: 25px !important;
    /* 左側にチェックボックス用のスペースを作る */
    margin-bottom: 8px !important;
    height: auto !important;
}

/* 5. チェックボックス本体を左端に固定 */
#pardot-form .value input[type="checkbox"],
#pardot-form .value input[type="radio"] {
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    /* テキストの高さに合わせる */
    margin: 0 !important;
    width: auto !important;
}

/* 6. チェックボックス横のテキスト */
#pardot-form .value label.inline {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    vertical-align: top !important;
}

/* --------------------------------------------------------------
Pardotフォーム iframe の高さ（暫定対応）

※クロスオリジンのため親ページから中身の高さを取得できず、
  固定値で指定しています。画面幅が狭いほどフォームが縦に伸びるため、
  ブレークポイントごとに実測値（+余白）を指定しています。

※Pardotのレイアウトテンプレートに postMessage による高さ通知
  （_pardot/pardot-iframe-autoresize.html）を入れていただければ、
  information-download.js が自動で高さを合わせるため、
  このセクションは削除できます。
----------------------------------------------------------------- */
#pardot-form-iframe {
    display: block;
    width: 100%;
    height: 1180px;
    /* lg: >=1200px（実測 1180） */
}

/* md: 992-1199px → カラムが狭くなり縦に伸びる（実測 1210） */
@media (min-width: 992px) and (max-width: 1199px) {
    #pardot-form-iframe {
        height: 1210px;
    }
}

/* sm: 768-991px → 1カラム化して横幅が広がる（実測 1180） */
@media (min-width: 768px) and (max-width: 991px) {
    #pardot-form-iframe {
        height: 1180px;
    }
}

/* xs: 幅が狭いほど高くなるため段階的に指定 */
@media (max-width: 767px) {
    #pardot-form-iframe {
        height: 1190px;
    }
}

/* 実測 1180 */
@media (max-width: 540px) {
    #pardot-form-iframe {
        height: 1215px;
    }
}

/* 実測 1210 */
@media (max-width: 480px) {
    #pardot-form-iframe {
        height: 1250px;
    }
}

/* 実測 1228-1244 */
@media (max-width: 414px) {
    #pardot-form-iframe {
        height: 1265px;
    }
}

/* 実測 1260 */
@media (max-width: 375px) {
    #pardot-form-iframe {
        height: 1285px;
    }
}

/* 実測 1279 */
@media (max-width: 360px) {
    #pardot-form-iframe {
        height: 1340px;
    }
}

/* 実測 1336 */


/* --------------------------------------------------------------
テーマ差分（モディファイア）

既存のPardotページはページごとにレイアウトテンプレートが異なり、
見出しの色・サイズに2系統あります。
  ・基本（このCSSの標準）  : hotelmarket_202603 系（オレンジ #e56800）
  ・.theme-blue を付けた場合: markettrend / casestudy / paper 系（ブルー #4F7D9E）

使い方：<div class="editable theme-blue"> のように付与
※数値は既存Pardotページの実測値
----------------------------------------------------------------- */
.theme-blue .section-title {
    color: #4F7D9E;
    font-size: 24px;
    padding-top: 0;
}

.theme-blue .text02 {
    color: #4F7D9E;
    font-size: 18px;
}

/* casestudy / paper3 / paper4 系のテンプレートには .text01 の line-height 指定が
   なく、ブラウザ既定で表示されています（markettrend 系は基本と同じ 200%）。
   色の系統とは分かれるため、独立したモディファイアにしています。
   使い方：<div class="editable theme-blue text01-default-lh"> */
.text01-default-lh .text01 {
    line-height: 1.6;
}

/* 動画コンテンツ視聴ページ（movie系 14ページ）
   見出しはヘッダーと同じブルー、.text01 は line-height 指定なし（Bootstrap既定 1.428571）
   使い方：<div class="editable theme-movie"> */
.theme-movie .text02 {
    color: #5081a5;
    font-size: 18px;
}

.theme-movie .text01 {
    line-height: 1.428571429;
}


/* --------------------------------------------------------------
TEMPLATE DETAILS
----------------------------------------------------------------- */
/* header logo
   ヘッダーは2パターン。
   ・タイトル帯（.nav-content）ありページ … ロゴ帯グレー ＋ 青ロゴ（既定）
     参考：https://mk.ma.livable.jp/download/movie024/
   ・タイトル帯なしページ … ロゴ帯ブルー ＋ 白ロゴ
     参考：https://mk.ma.livable.jp/download/hotelmarket_202603/
     → そのページの <body> に .no-page-title を付与して切り替える

   ロゴ画像は白版(_n)・青版(_p)の2枚をヘッダーパーツに置き、
   ここで表示／非表示を切り替えています（_n は画像自体に #5081a5 の
   背景が入っているため、帯の色と一致させています）。 */
.logo {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 0;
    color: inherit;
    background-color: #eee;
}

.no-page-title .logo {
    background-color: #5081a5;
}

.logo img {
    height: 70px;
    width: auto;
    display: block;
}

/* 既定（タイトル帯あり）＝青ロゴ、.no-page-title＝白ロゴ
   ※ 上の .logo img より詳細度を高くするため .logo を付けています */
.logo .logo-img--on-blue,
.no-page-title .logo .logo-img--on-grey {
    display: none;
}

.no-page-title .logo .logo-img--on-blue {
    display: block;
}

@media (max-width: 767px) {
    .logo img {
        height: 45px;
    }
}

/* ページタイトルバー（casestudy / paper3 / paper4 / movie 系）
   ヘッダー直下に表示される青帯の h1
   ※ CSSは .nav-content h1 を対象にしています（.nav-content-title は既存HTMLの
     クラス名をそのまま踏襲していますが、スタイル指定はありません）

   flex は内側の .container に付けています。.nav-content 自体を flex にすると
   .container が flex アイテムになり、幅指定のない767px以下で中身なりの幅に
   縮んでしまうため（＝ロゴの左端とタイトルの左端がズレる）。
   これでロゴ・タイトルとも .container の左padding（15px）に揃います。 */
.nav-content {
    width: 100%;
    background-color: #5081a5;
}

.nav-content .container {
    display: flex;
    align-items: center;
    min-height: 50px;
}

/* 帯の見出しはページによって h1 / p と異なるため、
   タグ名に依存しないようまとめて指定する
   （資料DLは資料タイトルなので h1、動画は共通ラベルなので p） */
.nav-content h1,
.nav-content h2,
.nav-content p {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
}

.container .mainimage,
.container-fluid .mainimage {
    padding-right: 0px;
    padding-left: 0px;
    border-radius: 6px
}

.mainimage .container {
    max-width: 100%
}

/* title,text*/
.section-title {
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'sans-serif';
    color: #e56800;
    padding-top: 10px;
    font-size: 28px;
    font-weight: bold;
}

.text01 {
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'sans-serif';
    font-size: 16px;
    font-weight: bold;
    line-height: 200%
}

.text02 {
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'sans-serif';
    font-size: 20px;
    font-weight: bold;
    color: #e56800
}

.text03 {
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'sans-serif';
    font-size: 16px;
}

.text04 {
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'sans-serif';
    font-size: 12px;
}

/* Images do not extend containers */
img {
    max-width: 100%;
}

table img {
    width: 100%;
    max-width: 150px !important;
}

.sp-only {
    display: none;
}

/* Grey BG */
.grey {
    background-color: #5081a5;
}

/* Enable strong control over editable table cell widths */
table.editable-table {
    table-layout: fixed;
    width: 100%;
}

/* ※ 元テンプレートにあった .3col / .2col の指定は、CSSのクラス名が数字始まりで
      無効（ブラウザが解釈できない）かつ全ページで未使用のため削除しています */



/* --------------------------------------------------------------
footer
----------------------------------------------------------------- */
footer {
    width: 100%;
    bottom: 0;
}

footer .footer-inner {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .footer-inner .right-reserved-text {
    text-align: center;
    color: #FFF;
}

.footer-sol {
    background-color: #eee;
    padding-top: 60px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.footer-sol__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
    display: flex;
    /* 大きな2カラム作成 */
    justify-content: space-between;
}

/* --- 左側：30%幅 --- */
.footer-sol__left {
    width: 30%;
}

.footer-sol__logo {
    margin-bottom: 30px;
}

.footer-sol__logo img {
    width: 100%;
    max-width: 280px;
}

.footer-sol__contact-list {
    list-style: none;
    padding: 0;
}

.footer-sol__contact-list li {
    margin-bottom: 10px;
}

.footer-sol__contact-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    font-size: 15px;
    gap: 15px;
}

.btn-purchase a {
    background-color: #5081a5;
}

.btn-sell a {
    background-color: #5081a5;
}

.btn-other a {
    background-color: #5081a5;
}

/* --- 右側：65%幅（その中を3列に分割） --- */
.footer-sol__right {
    width: 65%;
}

.footer-sol__nav-group {
    display: flex;
    /* 右側の中でさらに列を作る */
    justify-content: space-between;
}

.footer-sol__nav-item {
    width: 33%;
    /* 3つ並べるための幅 */
}

.footer-sol__nav-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.footer-sol__nav-title a {
    text-decoration: none;
    color: inherit;
}

.footer-sol__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-sol__nav-list li {
    margin-bottom: 10px;
}

.footer-sol__nav-list li a {
    font-size: 12px;
    color: #666;
    text-decoration: none;
}

.footer-sol__nav-list li a:hover {
    text-decoration: underline;
}

.footer-sol__nav-list.no-title {
    margin-bottom: 30px;
}

/* --- 下部エリア --- */
.footer-sol__bottom {
    border-top: 1px solid #ddd;
    padding: 30px 0;
}

.footer-sol__bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.footer-sol__bottom-logo img {
    width: 130px;
    margin-right: 40px;
}

.footer-sol__bottom-links {
    display: flex;
    list-style: none;
    padding: 0;
}

.footer-sol__bottom-links li {
    margin-right: 20px;
    font-size: 11px;
}

.footer-sol__bottom-links a {
    color: #666;
    text-decoration: none;
}

.footer-sol__copyright {
    margin-left: auto;
    font-size: 10px;
    color: #999;
}

/* --------------------------------------------------------------
SPACING
----------------------------------------------------------------- */

/* make element edge to edge */
.flush {
    padding-left: 0;
    padding-right: 0;
}

/* vertical padding */
.vpadding {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* side padding only */
.hpadding {
    padding-left: 15px;
    padding-right: 15px;
}

/* top padding only */
.tpadding {
    padding-top: 20px;
    padding-bottom: 0px;
}

/* bottom padding only */
.bpadding {
    padding-top: 0px;
    padding-bottom: 20px;
}

/* --------------------------------------------------------------
SOCIAL
----------------------------------------------------------------- */

/* Social list spacing */
.social-list {
    padding-left: 5px;
}

/* Social list display next to one another */
.social-list li,
.social-list {
    display: inline;
}

/* Disable underlines on image link hover */
.social-list a:hover {
    text-decoration: none;
}

/* Share button image specific style */
#share-buttons img {
    width: 20px;
    border: 0;
    box-shadow: 0;
    display: inline;
}

/* --------------------------------------------------------------
RESPONSIVE
----------------------------------------------------------------- */
/* xs */
@media(max-width:767px) {
    .pull-right {
        float: none !important;
        text-align: center;
    }

    .social {
        text-align: center;
    }

    .edit-image {
        width: 290px;
        padding-bottom: 5px;
    }

    .sp-only {
        display: block;
        /* または flex, inline-block など */
    }

    .logo img {
        height: 45px;
        /* スマホでは小さく表示 */
    }

}

/* sm */
@media (max-width:768px) {
    #pardot-form.label-left .field-label {
        width: 100%;
        text-align: left;
    }

    #pardot-form.label-left input.text,
    #pardot-form.label-left input.date,
    #pardot-form.label-left textarea,
    #pardot-form.label-left select {
        width: 100%;
    }

    #pardot-form.label-left span.value,
    #pardot-form.label-left .description,
    #pardot-form.label-left .no-label>*,
    #pardot-form.label-left .submit,
    #pardot-form.label-left .error.no-label {
        width: 100%;
    }

    #pardot-form.label-left span.value,
    #pardot-form.label-left .description,
    #pardot-form.label-left .no-label>*,
    #pardot-form.label-left .submit,
    #pardot-form.label-left .error.no-label {
        margin-left: 0;
    }

    form.form p {
        margin-left: 0px !important;
        padding-left: 0px !important;
    }

    table.editable-table td {
        display: block;
        width: 100% !important;
    }

    .footer-sol__inner {
        flex-direction: column;
    }

    .footer-sol__left,
    .footer-sol__right {
        width: 100%;
    }

    .footer-sol__nav-group {
        flex-wrap: wrap;
    }

    .footer-sol__nav-item {
        width: 50%;
        margin-bottom: 30px;
    }

    .footer-sol__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-sol__copyright {
        margin-left: 0;
        margin-top: 15px;
    }
}

/* md */
@media(max-width:992px) {}

/* lg */
@media(min-width:1200px) {}

/* ==============================================================
   完了ページ（フォーム送信後の thank-you ページ）
   例：/solution/information/download/hotelmarket_202603/complete/
   参考：https://mk.ma.livable.jp/ad_download/complate/

   ★このブロックは完了ページ専用。クラス名はすべて complete- で始めており、
     既存21ページで使われているクラス（text01-04 / editable / nav-content /
     footer-sol__* など）とは一切重複しない。既存ページには影響しない。
     完了ページを触るときも、この 'complete-' 名前空間の外へ出ないこと。
   ============================================================== */

/* --- リード文（○○申込み完了） --- */
.complete-lead {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 15px 60px;
    text-align: center;
}

.complete-lead__title {
    font-size: 26px;
    font-weight: bold;
    margin: 0 0 30px;
}

.complete-lead__text {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 5px;
}

.complete-lead__note {
    font-size: 16px;
    margin: 0;
}

/* --- セクション共通 --- */
.complete-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px 60px;
}

.complete-section__title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 20px;
    padding-top: 20px;
    text-align: left;
}

/* --- お役立ちコンテンツ：2カラムのカード --- */
.complete-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.complete-card {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
    color: #333;
    text-decoration: none;
    transition: box-shadow .3s;
}

/* a要素なので hover/focus の下線を明示的に消す */
.complete-card:hover,
.complete-card:focus {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
    color: #333;
    text-decoration: none;
}

.complete-card__image {
    width: 35%;
    flex-shrink: 0;
    margin-right: 20px;
    overflow: hidden;
}

.complete-card__image img {
    display: block;
    width: 100%;
    height: auto;
}

.complete-card__text {
    flex-grow: 1;
}

/* 「＞」は参考ページではタイトル直後の文字。擬似要素で付けて本文を汚さない。
   right:0 で右端に飛ばすと参考ページと見た目が変わるので、絶対配置にしないこと */
.complete-card__title {
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #5580a3;
    color: #5580a3;
    font-size: 18px;
    font-weight: bold;
}

.complete-card__title::after {
    content: '　＞';
    font-weight: normal;
}

.complete-card__body {
    margin: 0;
    color: #999;
    /* 参考ページの実測値 */
    font-size: 14px;
    line-height: 1.6;
}

/* --- CV エリア（物件検索・お問い合わせ） --- */
.complete-cv {
    background-color: #f4f7f9;
    padding-top: 1px;
    /* 子要素の margin 相殺で背景が縮むのを防ぐ */
}

.complete-btns {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
}

.complete-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    transition: opacity .3s;
}

.complete-btn:hover,
.complete-btn:focus {
    color: #fff;
    text-decoration: none;
    opacity: .85;
}

.complete-btn--blue {
    background-color: #5580a3;
}

.complete-btn--orange {
    background-color: #e56800;
}

/* ボタン1つだけの行。flex:1 のままだと横幅いっぱいに伸びるのが正しい挙動 */
.complete-btns--single .complete-btn {
    flex: 1 1 100%;
}

/* --- 連絡先 --- */
.complete-contact {
    padding-top: 20px;
    padding-bottom: 40px;
}

/* 「こちら」のリンク色。参考ページの実測値 */
.complete-contact a {
    color: #0062B2;
}

/* --- SP --- */
@media (max-width: 767px) {
    .complete-lead {
        padding: 30px 15px 40px;
    }

    .complete-lead__title {
        font-size: 22px;
    }

    .complete-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* カードは画像が上、テキストが下 */
    .complete-card {
        flex-direction: column;
        padding: 15px;
    }

    .complete-card__image {
        width: 100%;
        margin: 0 0 10px;
    }

    .complete-btns {
        flex-direction: column;
        gap: 15px;
    }

    .complete-btn {
        font-size: 16px;
    }
}

.theme-lp .section-title {
    color: #5081a5;

    line-height: 1.1;
}

.theme-lp .text02 {
    color: #5081a5;
}

/* ==============================================================
   h1 化にともなう見た目の維持 — 2026-09-28
   資料タイトルを h1 にするにあたり、元の <p> / <h2> と同じ見え方に
   なるよう余白だけを合わせている。文字サイズ・色は既存指定のまま。
   ============================================================== */

/* タイトル帯：動画ページは h1 → h2 になったため、h1 と同じ指定を h2 にも */
.nav-content h2 {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
}

/* 元 <p class="section-title"> → <h1 class="section-title">（MRK_2）
   見出しになることで Bootstrap の margin-top:20px と
   line-height:1.1 が付くため、元の <p> と同じ値に戻す */
h1.section-title {
    margin-top: 0;
    line-height: 1.428571429;
}

/* h1 の中に入れた元 <h2 class="text02">（MRK_2）を h2 相当に */
h1.section-title .text02 {
    display: block;
    margin: 20px 0 10px;
    line-height: 1.1;
}

/* h1 の中に入れた元 <p class="section-title">
   （HTL_2 / CRE_1 / MA_1 / MA_2）を <p> 相当に。
   margin-top:10px は、元の見出しの margin-bottom 分 */
h1.text02 .section-title {
    display: block;
    margin: 10px 0 10px;
    line-height: 1.428571429;
}

/* theme-lp（CRE_1 / MA_1 / MA_2）は .theme-lp .section-title で
   line-height:1.1 を指定済みのため、元からその値。上書きしない */
.theme-lp h1.text02 .section-title {
    line-height: 1.1;
}

/* --------------------------------------------------------------
   ロゴのリンク範囲 — 2026-09-28 修正

   <a> はインラインだが中の <img> が display:block のため、
   ブラウザが匿名ブロックを作り、<a> の当たり判定が
   .container の横幅いっぱい（実測 1140px）に広がっていた。
   ＝ ロゴから離れた帯の余白をクリックしてもリンクが反応する状態。

   inline-block にしてロゴ画像の幅（実測 188px）に収める。
   vertical-align:top はインラインのベースライン分（+5px）で
   帯の高さが変わるのを防ぐため。
   ----------------------------------------------------------- */
.logo a {
    display: inline-block;
    vertical-align: top;
}

.theme-green .section-title,
.theme-green .text02 {
    color: #48A63F;
}