@charset "utf-8";

/* コラムのページ（一覧・記事）の色。決まりは ~/Sites/TROBZ/ops/insourcing/DESIGN-RULES.md
   2026-11-03 畔栁さん：真っ黒を基調にすると圧迫感があるので白と淡い面を基調に柔らかい色で組む
   配色は3案から「生成りと木の色」に決定 */
body.msCol {
    --t-text: #3b3530;
    --t-sub: #665e53;
    --t-soft: #f7f4ee;
    --t-foot: #efeae0;
    --t-line: #e5dfd3;
    --t-pale: #e9e2d5;
    --t-main: #7d6549;
    --t-hov: #695339;
    --ink: var(--t-text);
    --fg: var(--t-text);
    --fg-2: var(--t-sub);
    --ln: var(--t-line);
    --paper: var(--t-soft);
    --night-3: var(--t-pale);
    --ms-ink: var(--t-text);
    --ms-g2: var(--t-text);
    --ms-g: var(--t-sub);
    --ms-soft: var(--t-soft);
    --ms-line: var(--t-line);
    --ms-btn: var(--t-main);
    --ms-hover: var(--t-hov);
    color: var(--t-text);
}

.msCol .areaNewsDetail,
.msCol .areaPostNews {
    --ink-soft: var(--t-sub);
    --line: var(--t-line);
    --bg-soft: var(--t-soft);
}

/* 記事の部品の色 */
html:not(#tzk-x) body.msCol:not(#tzk-y) {
    --tzk-kh-ink: var(--t-text);
    --tzk-kh-gold: var(--t-main);
    --tzk-kh-pale: var(--t-pale);
    --tzk-kh-bar: var(--t-main);
    --tzk-kh-soft: var(--t-soft);
    --tzk-kh-line: var(--t-line);
    --tzk-kh-muted: var(--t-sub);
    --tzk-ink: var(--t-text);
    --tzk-deep: var(--t-main);
    --tzk-gold: var(--t-main);
    --tzk-gold-dark: var(--t-main);
    --tzk-soft: var(--t-soft);
    --tzk-line: var(--t-line);
    --tzk-muted: var(--t-sub);
    --tzk-text2: var(--t-sub);
    --tzk-btn-bg: var(--t-main);
}

html:not(#tzk-x) body.msCol:not(#tzk-y) .tzk:is(#tzk#tzk#tzk, .tzk) {
    --tzk-ink: var(--t-text) !important;
    --tzk-deep: var(--t-main) !important;
    --tzk-gold: var(--t-main) !important;
    --tzk-gold-dark: var(--t-main) !important;
    --tzk-soft: var(--t-soft) !important;
    --tzk-line: var(--t-line) !important;
    --tzk-muted: var(--t-sub) !important;
    --tzk-text2: var(--t-sub) !important;
    --tzk-btn-bg: var(--t-main) !important;
    --tzk-on-soft: var(--t-text) !important;
    --tzk-mi: var(--t-text) !important;
    --tzk-ms: var(--t-soft) !important;
    --tzk-mb: var(--t-main) !important;
    --tzk-mpb: var(--t-main) !important;
    --tzk-mpbf: #fff !important;
}

/* ヘッダーとボタン */
.msCol #header.is-solid .menuContact .mail a,
body.msCol.fixed #header .menuContact .mail a,
.msCol .msBtn,
.msCol .fixBar .mail {
    background: var(--t-main);
    color: #fff;
}

.msCol .fixBar {
    background: var(--t-main);
}

.msCol .msBtn:hover,
.msCol #header.is-solid .menuContact .mail a:hover {
    background: var(--t-hov);
}

/* 一覧の最初の面は記事の題名と同じ淡い面 */
.msCol .pageTitle {
    justify-content: flex-start;
    min-height: 0;
    padding: 136px 0 44px;
    border-bottom: 1px solid var(--t-line);
    background: var(--t-soft);
    color: var(--t-text);
    text-align: left;
}

.msCol .pagePhoto {
    display: none;
}

.msCol .pageTitle .inner {
    width: 100%;
}

.msCol .pageTitle .titleEn,
.msCol .pageTitle .titleJp {
    text-shadow: none;
    animation: none;
}

/* 下の案内は一文と電話番号・フォームの入口だけ */
.msCol .topContact {
    min-height: 0;
    padding: 52px 0;
    background: var(--t-soft);
    color: var(--t-text);
}

.msCol .contactPhoto,
.msCol .contactTitle {
    display: none;
}

.msCol .contactIn {
    align-items: center;
}

.msCol .contactLead {
    margin: 0;
    font-size: clamp(18px, 1.7vw, 21px);
    font-weight: 500;
    text-shadow: none;
}

.msCol .contactWay {
    border-color: var(--t-line);
}

/* フッターは白に近い面 */
.msCol #footer {
    --ft: var(--t-sub);
    --ft-strong: var(--t-text);
    --ft-link: var(--t-sub);
    --ft-copy: var(--t-sub);
    --ft-line: var(--t-line);
    background: var(--t-foot);
}

.msCol #footer .ftLogo img {
    filter: brightness(0) opacity(.74);
}

@media (max-width: 768px) {
    .msCol .pageTitle {
        padding: 100px 0 28px;
    }

    .msCol .topContact {
        padding: 32px 0;
    }

    .msCol .contactLead {
        font-size: 17px;
    }
}

/* 記事の図解（2026-11-03 作り直し・img.ms-zukai）。スマホでは字が 10px 前後残る幅（680px）で出し、横に送って見る
   2026-11-03 畔栁さん「横送りにする」 */
@media (max-width: 767px) {
    .boxContentNewsDetail p:has(> img.ms-zukai) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-inline: -20px;
        padding: 0 20px 4px;
        scrollbar-width: thin;
    }
    .boxContentNewsDetail img.ms-zukai {
        display: block;
        width: 680px;
        max-width: none;
        height: auto;
    }
    .boxContentNewsDetail p:has(> img.ms-zukai)::after {
        content: "横に動かして全体を見られます";
        position: sticky;
        left: 0;
        display: block;
        width: calc(100vw - 40px);
        margin-top: 8px;
        color: var(--t-sub, #665e53);
        font-size: 12px;
        text-align: center;
        letter-spacing: .04em;
    }
}