/*!/wp-content/themes/trobz/assets/css/common.css*/@charset "utf-8";

/*! base.css v1.1 */

/* ==========================================================================
   HTML5 display definitions
   KhangTQQ Editor
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}
/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}
/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}
/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html, button, input, select, textarea {
    font-family: "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
}
/**
 * Address margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
    font-family: "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
}
/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a {
    text-decoration: none;
    color: #000;
}
a:focus {
    outline: none;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active, a:hover {
    outline: 0;
}
/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    margin: 0em;
}
/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b, strong {
    font-weight: bold;
}
blockquote {
    margin: 1em 40px;
}
/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}
/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}
/**
 * Address styling not present in IE 6/7/8/9.
 */

mark {
    background: #ff0;
    color: #000;
}
/**
 * Address margins set differently in IE 6/7.
 */

p, pre {
    margin: 0;
}
/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code, kbd, pre, samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}
/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
/**
 * Address CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}
/**
 * Address `quotes` property not supported in Safari 4.
 */

q:before, q:after {
    content: '';
    content: none;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
/* ==========================================================================
   Lists
   ========================================================================== */

/**
 * Address margins set differently in IE 6/7.
 */

dl, menu, ol, ul {
    margin: 0;
}
dd {
    margin: 0;
}
/**
 * Address paddings set differently in IE 6/7.
 */

menu, ol, ul {
    padding: 0;
}
/**
 * Correct list images handled incorrectly in IE 7.
 */

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}
/**
 * All browser
 */

ul {
    list-style: none;
}
/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: 0;
    /* 1 */
    -ms-interpolation-mode: bicubic;
    /* 2 */
}
/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}
/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}
/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}
/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0;
    padding: 0;
}
/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0;
    /* 1 */
    padding: 0;
    white-space: normal;
    /* 2 */
    *margin-left: 0;
    /* 3 */
}
/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button, input, select, textarea {
    font-size: 100%;
    /* 1 */
    margin: 0;
    /* 2 */
    vertical-align: baseline;
    /* 3 */
    *vertical-align: middle;
    /* 3 */
}
/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button, input {
    line-height: normal;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button, select {
    text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button, html input[type="button"],
/* 1 */

input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
    *overflow: visible;
    /* 4 */
}
/**
 * Re-set default cursor for disabled elements.
 */

button[disabled], html input[disabled] {
    cursor: default;
}
/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
    *height: 13px;
    /* 3 */
    *width: 13px;
    /* 3 */
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    /* 2 */
    box-sizing: content-box;
}
/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto;
    /* 1 */
    vertical-align: top;
    /* 2 */
}
/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/**
 * REMOVE BACKGROUND INPUT CONFIRM
 */

input.clear_css:-webkit-autofill, textarea.clear_css:-webkit-autofill {
    -webkit-box-shadow: 0 1px 3px #c9c9c9 inset !important;
    transition: background-color 10s ease-in-out 0s;
}
input.clear_css:-webkit-autofill.wpcf7c-conf, textarea.clear_css:-webkit-autofill.wpcf7c-conf {
    -webkit-box-shadow: 0 0 0px 1000px #f7f9f6 inset !important;
    transition: background-color 10s ease-in-out 0s;
}

input, textarea{
    border-radius: 0;
/*    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;*/
}
/**
 * CLEAR BOTH
 */

.clearfix:after {
    display: block;
    clear: both;
    content: "";
}
/**
 * HOVER OPACITY A
 */

.hover {
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
}
.hover:hover {
    opacity: 0.8;
}


/***************************************************************************
 *
 * COMMON STYLE
 *
 ***************************************************************************/

@font-face {
    font-family: 'ヒラギノ角ゴ W6 JIS2004';
    font-weight: Bold;
    src: url(//wf.typesquare.com/3/tsst/dist/ja/ts?condition=e0c1b7ecf1946334213a77e778523b01&onetime_condition=&eid=5ad00062415c46a09fd67fd7ac1e024a&bw[name]=Chrome&bw[ftf]=0&bw[os]=Windows&location=trobz.co.jp%2F&fonts[id]=2533&fonts[str]=Li8wMTM%2FQkVJTU5PUFJTVFVXWFpiZGVvcnPjgIHjgILjgIzjgYTjgYjjgYrjgYvjgY3jgZLjgZPjgZTjgZXjgZfjgZnjgZvjgZ%2FjgaHjgaPjgabjgafjgajjganjgarjgavjga7jga%2Fjgbjjgbnjgb7jgoHjgoLjgoTjgonjgorjgovjgozjgo%2FjgpLjgqPjgqTjgqfjgqjjgqvjgq%2FjgrDjgrHjgrPjgrXjgrbjgrfjgrjjgrnjgr3jgr%2Fjg4Pjg4Tjg4bjg4fjg4jjg4rjg4vjg47jg4%2Fjg5Pjg5bjg5fjg5rjg5vjg57jg6Djg6Xjg6fjg6njg6rjg6vjg6zjg63jg7Pjg7zkuIDkuIrku4rkvIHkvJrkvZzkvb%2FkvqHlhYjlh7rliJ3liLblip%2Fli5nlkIjlkYrllY%2Fln7rloLHlpInlp4vlr77lvrnlv4PmhI%2FmiJDmiKbmib%2Fmj5Dmj7TmkLrmlK%2FmlpnmlrDmnIDmnJ%2FmnKzmoYjmpJzmpa3mrKHmr5TmsYLmsr%2FnlaXnmbrnmoTnpL7nq4vnq6%2FnrZbnsKHntKLogIXopo%2FopqfoqZXoq4vorZjos4fovIPpgZXpganpgbjplbfplovplqLpm4bpp4bvvIE%3D);
 font-display:swap;}

.hiraginoW6 {
    font-family: 'ヒラギノ角ゴ W6 JIS2004';
}

@font-face {
    font-family: 'ヒラギノ角ゴ W3 JIS2004';
    font-weight: Bold;
    src: url(//wf.typesquare.com/3/tsst/dist/ja/ts?condition=e0c1b7ecf1946334213a77e778523b01&onetime_condition=&eid=5ad00062415c46a09fd67fd7ac1e024a&bw[name]=Chrome&bw[ftf]=0&bw[os]=Windows&location=trobz.co.jp%2F&fonts[id]=2530&fonts[str]=MOOBhOOBiuOBi%2BOBk%2BOBm%2BOBoeOBr%2BOCieOCj%2BWQiOWVjw%3D%3D);
 font-display:swap;}

@font-face {
    font-family: "Tazugane Gothic StdN Thin";
    src: url("/wp-content/themes/trobz/assets/css/../font/tazugane/Tazugane Gothic StdN Thin.eot");
    src: url("/wp-content/themes/trobz/assets/css/../font/tazugane/Tazugane Gothic StdN Thin.eot?#iefix")format("embedded-opentype"),
        url("/wp-content/themes/trobz/assets/css/../font/tazugane/Tazugane Gothic StdN Thin.woff2")format("woff2"),
        url("/wp-content/themes/trobz/assets/css/../font/tazugane/Tazugane Gothic StdN Thin.woff")format("woff"),
        url("/wp-content/themes/trobz/assets/css/../font/tazugane/Tazugane Gothic StdN Thin.ttf")format("truetype"),
        url("/wp-content/themes/trobz/assets/css/../font/tazugane/Tazugane Gothic StdN Thin.svg")format("svg");
 font-display:swap;}

.tazugane {
    font-family: "Tazugane Gothic StdN Thin";
}

@font-face {
    font-family: "FuturaLTProLight";
    src: url(/wp-content/themes/trobz/assets/css/../font/futura/FuturaLTProLight.eot);
    src: url("/wp-content/themes/trobz/assets/css/../font/futura/FuturaLTProLight.eot?#iefix")format("embedded-opentype"),
        url(/wp-content/themes/trobz/assets/css/../font/futura/FuturaLTProLight.woff2)format("woff2"),
        url(/wp-content/themes/trobz/assets/css/../font/futura/FuturaLTProLight.woff)format("woff"),
        url(/wp-content/themes/trobz/assets/css/../font/futura/FuturaLTProLight.ttf)format("truetype"),
        url(/wp-content/themes/trobz/assets/css/../font/futura/FuturaLTProLight.svg)format("svg");
 font-display:swap;}

.futura {
    font-family: "FuturaLTProLight";
    font-weight: 300;
}

.hiraginoW3 {
    font-family: 'ヒラギノ角ゴ W3 JIS2004';
}

.montserrat {
    font-family: "Montserrat", sans-serif;
}

.notoSans {
    font-family: "Noto Sans JP", sans-serif;
}

.animate {
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInUp {
    animation: fadeInUp 0.8s ease forwards;
}

.typewriter .ghost {
    display: none;
}

body {
    background-color: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
    color: #292929;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 300;
}

a {
    color: #292929;
}

body.fixed {
    overflow: hidden;
}

/* サイト共通の色（2026-09-19）。ヘッダー・フッター・お問い合わせの帯が、ここの値を使う */
:root {
    --ink: #242428;              /* 墨色：ヘッダー・フッター・色の帯の地 */
    --ink-rgb: 36, 36, 40;       /* 同じ色を半透明で使うとき rgba(var(--ink-rgb), .96) */
    --ink-deep: #1B1B1F;         /* 一段沈めた墨色：コピーライトの帯 */
    --ink-raise: #2C2C31;        /* 一段明るい墨色：ヘッダーのサブメニュー */
    --ink-line: #35353B;         /* 墨色の上の区切り線 */
    --gold: #C9A551;             /* 差し色。見出しの三角（#BD9F00）の系統 */
    --gold-light: #E8D39A;
}

.inner {
    max-width: 1340px;
    width: 100%;
    padding: 0 30px;
    margin: 0 auto;
}

.innerBig {
    max-width: 1884px;
    width: 100%;
    padding: 0 30px;
    margin: 0 auto;
}

/*VALIDATE CONTACT*/
.error {
    display: block;
    font-size: 12px;
    color: red;
}

body {
    position: relative;
}

/* body::before {
    content: "";
    position: fixed;
    background: url(/wp-content/themes/trobz/assets/css/../images/common/main-company-photo.webp) no-repeat;
    background-size: cover;
    height: 553px;
    width: 100%;
    top: -28px;
    left: 0;
    z-index: 0;
} */

/* HEADER */
#header {
    width: 100%;
    padding: 48px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(102, 102, 102, 0) 100%);
}

#header .inner {
    max-width: 1860px;
    width: 100%;
    padding: 0 20px;
}

#header .wrapHeader {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;

}

#header .wrapHeader .headerBar {
    width: 198px;
    margin-right: 20px;
}

#header .wrapHeader .headerBar .logo {
    width: 100%;
}

#header .wrapHeader .headerBar .logo a {
    display: block;
}

#header .wrapHeader .headerBar .logo a img {
    width: 100%;
}

/* 2026-09-24 最後の項目（CONTACT）だけ左の余白を 0 にしていたため、COMPANY の下向きの印と CONTACT が詰まって見えた。
   ほかの項目と同じ間隔にする（右端だけ 0） */

/* start - main 251231 */

#main {
    padding: 369px 0 0;
    position: relative;
    /* height: 100vh; */
}

/* FB251225 */
#main {
    padding: 0;
    overflow: hidden;
}

/* #main .inner {
    max-width: 1244px;
} */

#main .inner {
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 30px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#main .wrapMain.pageChild .inner {
    position: initial;
    width: 1340px;
}

#main .wrapMain .wrapTitleTop .typingLine {
    color: #333333;
    font-size: clamp(32px, 2.5vw, 48px);
    margin-bottom: 18px;
    font-weight: bold;
    min-height: clamp(100px, 7.5vw, 144px);
}

#main .wrapMain .wrapTitleTop .afterNewline {
    font-size: clamp(20px, 1.5vw, 28px);
    font-weight: normal;
}

#main .wrapMain .wrapTitleTop .desTypingMain {
    display: inline;
    white-space: pre-wrap;
}

#main .wrapMain .wrapTitleTop .caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: #000000;
    animation: blink .7s steps(1) infinite;
    margin-left: 2px;
    vertical-align: middle;
}

#main .wrapMain .wrapTitleTop #subVision .caret {
    vertical-align: middle;

}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

#main .wrapMain .wrapMainLeft {
    display: flex;
}

#main .wrapMain .wrapMainLeft .afterBetween {
    position: relative;
    width: 30px;
    margin: 0 20px;
}

#main .wrapMain .wrapMainLeft .afterBetween::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: #cccccc;
}

#main .wrapMain .wrapMainLeft .afterBetween::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 1px;
    top: 50%;
    left: 0;
    background: #000000;
    transform: translate(0, -50%);
    transition: transform .5s ease;
    z-index: 2;
}

#main .wrapMain .wrapMainLeft.mission .afterBetween::before {
    transform: translate(0, -50%);
    background: #000000;
}

#main .wrapMain .wrapMainLeft.vision .afterBetween::before {
    transform: translate(15px, -50%);
    background: #000000;
}

#main .wrapMain .wrapMainLeft .txtMain {
    color: #cccccc;
    font-size: clamp(14px, 1vw, 18px);
    font-weight: bold;
}

#main .wrapMain .wrapMainLeft .txtMission {
    color: #292929;
}

#main .wrapMain .wrapMainLeft.mission .txtMission {
    color: #292929;
}

#main .wrapMain .wrapMainLeft.vision .txtMission {
    color: #cccccc;
}

#main .wrapMain .wrapMainLeft.vision .txtVision {
    color: #292929;
}

#main .wrapMain .mainPhoto {
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(600px, 46%, 883px);
}

#main .wrapMain .mainPhoto img {
    width: 100%;
    height: auto;
    /* 読み込み前から場所を取っておく（遅延読み込みの間に高さ 0 → 読み込みで伸びて画面がずれていた。2026-09-27） */
    aspect-ratio: 200.53 / 218.45;
}

/* END FB251225 */

#main .wrapMain {
    position: relative;
    height: 100%;
}

#main .wrapMain:before {
    content: "";
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.28) 100%);
    height: 275px;
    width: 100%;
    bottom: 0;
    left: 0;
}

/* FB251225 */
#main .wrapMain .wrapTitleTop {
    margin-bottom: 0;
    width: 52%;
    margin-left: 8.3vw;
}

/* END FB251225 */

#main .wrapMain .wrapTitleTop .titleTop {
    font-size: 62px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: -1px;
    letter-spacing: 7.3px;
    line-height: 1.2;
}

#main .wrapMain .wrapTitleTop .TitleTopEn {
    font-size: 20px;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: 1.3px;
}

#main .wrapMain .boxMain {
    position: relative;
    padding-bottom: 13vh;
}

#main .wrapMain .boxMain .titleMissionTop {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
}

#main .wrapMain .boxMain .subMissionTop {
    font-size: 30px;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: 1.8px;
    margin-bottom: 27px;
}

#main .wrapMain .boxMain .txtMissionTop {
    font-size: 14px;
    font-weight: normal;
    color: #ffffff;
    line-height: 1.55;
    letter-spacing: 0.9px;
    text-align: justify;
}

#main .wrapMain .txtScroll {
    display: flex;
    width: auto;
    writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    position: absolute;
    right: 47px;
    top: 114px;
    height: 70%;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
}

#main .wrapMain .txtScroll:before {
    content: "";
    position: absolute;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    height: 89%;
    width: 1px;
    top: 90px;
    right: 50%;
    transform: translateX(-50%);
}

#main .mainSlider {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.71) 71%, rgba(255, 255, 255, 1) 100%);
    padding: 25px 0 172px;
}

#main .mainSlider .iframeSlider {}

#main .mainSlider .iframeSlider .sliderPhoto {
    width: 302px;
}

#main .mainSlider .iframeSlider .sliderPhoto .mainPhoto {
    margin: 0 15px;
    box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.1);
}

#main .mainSlider .iframeSlider .sliderPhoto:nth-child(2n) .mainPhoto {
    margin-top: 59px;
    margin-bottom: 10px;
}

#main .mainSlider .iframeSlider .sliderPhoto .mainPhoto img {
    aspect-ratio: 300/202;
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}

/* end - main 251231 */

/* CONTENT */
#content {
    width: 100%;
    position: relative;
    z-index: 1;
}

/* MAIN */

.wrapTitlePage {
    padding: 174px 0 175px;
    z-index: 9;
}

.wrapTitlePage .titleEn {
    font-size: 72px;
    font-weight: normal;
    color: #ffffff;
    margin-bottom: 7px;
    word-break: break-all;
    word-break: auto-phrase;
}

.wrapTitlePage .titleJp {
    font-size: 28px;
    font-weight: normal;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: 1.2px;
}

.wrapTitle {}

.wrapTitle .titleBig {
    font-size: 64px;
    font-weight: normal;
    color: #292929;
    word-break: break-all;
    padding-left: 20px;
    position: relative;
    line-height: 1;
    margin-bottom: -2px;
}

.wrapTitle .titleBig:before {
    content: "";
    position: absolute;
    background: #bd9f00;
    height: 99%;
    width: 8px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.wrapTitle .titleSmall {
    font-size: 12px;
    font-weight: normal;
    color: #6A6A6A;
    padding-left: 25px;
    letter-spacing: 1px;
}

/* サービスの見出し（サービス一覧・トップのサービス欄）。
   2026-09-19 左上の金色の三角（.itemTitle::before）と、三角のぶん空けていた左の余白（8px）は、畔栁さんの指示で外した */
.itemTitle {
    font-size: 48px;
    /* font-weight: normal; */
    line-height: 1.2;
    position: relative;
    word-break: break-all;
}

.itemTitle .smallTitle {
    font-size: 12px;
    line-height: 1.4;
    display: block;
    letter-spacing: 1.3px;
}

/* areaNews */
.areaNews {
    /* background-color: #f8f7f6; */
    padding: 96px 0;
}

.areaNews .newsTitle {
    text-align: center;
    font-size: 36px;
    font-weight: normal;
    margin-bottom: 19px;
}

.areaNews .newsCat {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 59px;
}

.areaNews .newsCat li {
    margin: 0 5px;
}

.areaNews .newsCat li a {
    /* 指で押せる高さを確保する（下線の位置は変えたくないので、余白は上下に付ける） */
    display: inline-block;
    padding: 9px 2px;
    font-size: 14px;
    font-weight: normal;
    color: #313131;
    border-bottom: solid 1px #EEEEEE;
}

.areaNews .newsList {
    display: flex;
    flex-wrap: wrap;
}

.areaNews .newsList>li {
    width: calc(100%/3 - 20px);
    margin-bottom: 25px;
}

.areaNews .newsList>li:not(:nth-child(3n)) {
    margin-right: 24px;
}

.areaNews .newsList>li a {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
    padding: 24px 24px 23px;
    background-color: #fff;
    /* カーソルを合わせたときの傾きは、このファイルの最後の「カードの傾き」 */
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s cubic-bezier(.22, .61, .36, 1);
}

.areaNews .newsList>li a .newsPhoto {
    margin-bottom: 23px;
}

.areaNews .newsList>li a .newsPhoto img {
    width: 100%;
    aspect-ratio: 318/180;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
}

.areaNews .newsList>li a .listCat {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 5px;
}

.areaNews .newsList>li a .listCat li {
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.6px;
    background: #bd9f00;
    padding: 3px 12px;
    margin: 0px 6px 6px 0px;
    border-radius: 80px;
}

.areaNews .newsList>li a .newsName {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 23px;
    letter-spacing: 0.8px;
    line-height: 1.63;
}

.areaNews .newsList>li a .newsUpload {
    color: #aaaaaa;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.7px;
}

.areaNews.areaKnowled .newsList>li a .listCat li.orange {
    background-color: #ee881a;
}

.areaNews.areaKnowled .newsList>li a .listCat li.blue {
    background-color: #1e5a9f;
}

.areaNews.areaKnowled .newsList>li a .listCat li.pink {
    background-color: #d94848;
}

.areaNews.areaKnowled .newsList>li a .listCat li.green {
    background-color: #2ec111;
}

.areaNews.areaKnowled .newsCat li a {
    font-weight: normal;
    color: #000;
}

/* areaNews */
/* areaNextPage */

/* FOOTER */
#footer {
    width: 100%;
    background: #000000;
    padding: 96px 0 0;
    position: relative;
}

#footer .inner {
    max-width: 1244px;
}

#footer .wrapFooter {}

#footer .wrapFooter .ftMenu {
    display: flex;
    flex-wrap: wrap;
    padding: 0 33px 26px 33px;
    justify-content: space-between;
}

#footer .wrapFooter .ftMenu .logoFooter {
    width: 199px;
    margin-right: 11px;
}

#footer .wrapFooter .ftMenu .logoFooter a {
    display: block;
}

#footer .wrapFooter .ftMenu .logoFooter a img {
    width: 100%;
}

#footer .wrapFooter .ftMenu .listMenu {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr;
    gap: 26px 24px;
    align-items: start;
    width: 100%;
    /* 旧 calc(100% - 485px) を解除 */
    margin-top: 0;
}

#footer .wrapFooter .ftMenu .listMenu>li {
    display: block;
    margin-bottom: 0;
}

#footer .wrapFooter .ftMenu .listMenu>li>a {
    display: block;
    min-width: 0;
    margin-right: 0;
    font-size: 12px;
    letter-spacing: .14em;
    padding-bottom: 9px;
    margin-bottom: 13px;
}

#footer .wrapFooter .ftMenu .listMenu>li .listMenuChild+a {
    margin-top: 26px;
}

#footer .wrapFooter .ftMenu .listMenu>li .listMenuChild {
    display: block;
    width: 100%;
}

#footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li {
    margin: 0 0 8px;
}

#footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li:last-child {
    margin-right: 0;
}

/* 1列目の会社情報 */
#footer .wrapFooter .ftMenu .listMenu>li.brandcell .logoFooter {
    margin: 0 0 16px;
}

#footer .wrapFooter .ftMenu .listMenu>li.brandcell .logoFooter img {
    width: 140px;
    display: block;
}

#footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp {
    font-size: 11.5px;
    line-height: 1.95;
    margin: 0;
}

#footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp b {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 5px;
}

/* 受付時間。住所からひと呼吸おいて表示する */
#footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp .tel {
    display: block;
    margin-top: 9px;
    font-size: 11.5px;
    letter-spacing: .02em;
}

/* 規約リンク行（03_footer-policy.php で <p> から <div> に変更しています） */
#footer .policyFt {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 38px;
    padding-top: 18px;
}

#footer .policyFt a {
    font-size: 11.5px;
    letter-spacing: .06em;
    transition: color .15s ease;
}

/* ---- 2. 配色 ／ チャコールグレー -----------------------------------
   純黒 #000 は硬く、ロゴの白が浮くため明度を上げる。
   コピーライト帯だけ一段沈めて階層をつくる。 */

#footer {
    background: #3B3B42;
    /* 旧 #000 */
    border-top: 1px solid #4E4E57;
}

#copyright {
    background: #313138;
    /* 旧 #000。一段沈める */
    color: #8A8A93;
    /* 旧 #fff */
}

#footer .wrapFooter .ftMenu .listMenu>li>a {
    color: #9A9AA4;
    /* 旧 #fff。見出しは控えめに */
    border-bottom: 1px solid #4E4E57;
}

#footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li a {
    color: #DCDCE0;
}

/* 旧 #C3C3C3 */
#footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li a:hover {
    color: #fff;
}

#footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp {
    color: #A8A8B2;
}

#footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp b {
    color: #EDEDF0;
}

#footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp .tel {
    color: #C8C8D2;
}

#footer .policyFt {
    border-top: 1px solid #4E4E57;
}

#footer .policyFt a {
    color: #9A9AA4;
}

#footer .policyFt a:hover {
    color: #fff;
}

/* ---- 3. レスポンシブ ------------------------------------------------ */

@media (max-width:980px) {
    #footer .wrapFooter .ftMenu .listMenu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:600px) {
    #footer .wrapFooter .ftMenu .listMenu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #footer .policyFt {
        gap: 6px 16px;
    }
}

@media (max-width: 1250px) and (min-width: 769px) {
    #footer .wrapFooter .ftMenu .listMenu {
        width: calc(100% - 35vw);
    }
}

@media (max-width: 1170px) and (min-width: 769px) {
    #footer .wrapFooter .ftMenu .listMenu {
        width: calc(100% - 30vw);
    }
}

@media (max-width: 1140px) {
    .itemTitle {
        font-size: 40px;
    }
}

@media (max-width: 1030px) and (min-width: 769px) {
    #footer .wrapFooter .ftMenu .logoFooter {
        width: 179px;
        margin-right: 11px;
    }

    #footer .wrapFooter .ftMenu .listMenu {
        width: calc(100% - 220px);
    }

    #footer .wrapFooter .ftMenu .listMenu>li>a {
        min-width: 100px;
        font-size: 12px;
        letter-spacing: 2px;
    }

    #footer .wrapFooter .ftMenu .listMenu>li .listMenuChild {
        width: calc(100% - 120px);
    }

    #footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li {
        margin-right: 13px;
    }

    #footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li a {
        font-size: 12px;
        letter-spacing: 1px;
    }
}

@media (max-width: 1085px) and (min-width: 769px) {
    #footer .wrapFooter .ftMenu {
        flex-direction: column;
    }

    #footer .wrapFooter .ftMenu .logoFooter {
        margin-bottom: 50px;
    }

    #footer .wrapFooter .ftMenu .listMenu {
        width: 618px;
    }

    #footer .wrapFooter .policyFt {
        text-align: left;
        padding: 0 33px;
    }

    #copyright {
        text-align: left;
        padding: 6px 63px 20px;
    }

}

@media (max-width: 1000px) and (min-width: 769px) {

    .wrapTitle .titleBig {
        font-size: clamp(54px, 6vw, 60px);
    }
}

@media (max-width: 965px) and (min-width: 769px) {
    #header .wrapHeader .headerBar {
        width: 188px;
        margin-right: 20px;
    }
}

@media(max-width: 900px) {
    .areaNews .newsList>li {
        width: calc(100%/2 - 15px);
        margin-bottom: 30px;
    }

    .areaNews .newsList>li:not(:nth-child(3n)) {
        margin-right: 0;
    }

    .areaNews .newsList>li:not(:nth-child(2n)) {
        margin-right: 30px;
    }
}

@media (max-width: 850px) and (min-width: 769px) {
    #header .wrapHeader .headerBar {
        width: 170px;
        margin-right: 20px;
    }
}

/* SHOW HIDE PC SP */
@media (min-width: 769px) {
    .hover:hover {
        opacity: 0.6;
    }

    .sp {
        display: none;
    }

    .areaNews .inner {
        max-width: 1220px;
    }

    .areaNews .newsCat li a:hover {
        opacity: 0.8;
    }

    #footer .wrapFooter .ftMenu .listMenu li a:hover,
    #footer .wrapFooter .policyFt a:hover {
        opacity: 0.6;
    }
}

/* STYLE MOBILE */
@media (max-width: 768px) {
    .pc {
        display: none;
    }

    .hover:hover {
        opacity: 1;
    }

    .inner {
        width: 100%;
        padding: 0 4%;
        padding: 0 24px;
    }

    .innerBig {
        padding: 0 24px;
    }

    body:before {
        height: 100%;
        background-position: 50%;
        width: 100%;
        top: 0vw;

    }

    /* MENU */

    #header {
        padding: clamp(24px, 6.4vw, 26px) 0;
    }

    #header .inner {
        padding: 0px 24px;
    }

    #header .wrapHeader {}

    #header .wrapHeader .headerBar {
        width: 100%;
        margin-right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #header .wrapHeader .headerBar .logo {
        width: clamp(200px, 53.3vw, 250px);
    }

    #header .wrapHeader .headerBar .logo a {}

    #header .wrapHeader .headerBar .logo a img {}

    /*
     * スマホのメニューの一番下に置く規約リンク（header.php の li.sp が3つ）。
     * 2026-09-20 まで、この指定が「最後の1つだけ」を出していたため、
     * PRIVACY POLICY と TROPUS PRIVACY POLICY が消え、3つ目だけが大きな帯で出ていた。
     * li.sp の3つをまとめて出し、文字は小さめ・行間を詰めて並べる。
     */

    /* 規約リンクのまとまり（3つ）に、薄い地を敷く。以前は最後の1つだけに敷いていた */

    #main .wrapMain .mainPhoto {
        width: 96%;
    }

    .wrapTitlePage {
        padding: 23vw 0 20.4vw;
    }

    .wrapTitlePage .titleEn {
        margin-bottom: 3px;
        font-size: clamp(40px, 10.6vw, 64px);
    }

    .wrapTitlePage .titleJp {
        margin-bottom: 20px;
        letter-spacing: 1.2px;
        font-size: clamp(18px, 4.8vw, 24px);
    }

    .wrapTitle .titleBig {
        padding-left: 20px;
        line-height: 1;
        margin-bottom: -2px;
        font-size: clamp(28px, 7.4vw, 32px);
    }

    .wrapTitle .titleBig:before {
        height: 99%;
        width: 8px;
        top: 50%;
        left: 0;
    }

    .wrapTitle .titleSmall {
        font-size: clamp(12px, 3.2vw, 14px);
        padding-left: 25px;
        letter-spacing: 1px;
    }

    .itemTitle {
        font-size: clamp(36px, 8vw, 46px);
    }

    .itemTitle .smallTitle {
        font-size: clamp(12px, 2.2vw, 15px);
    }

    /* CONTENT */
    #content {
        width: 100%;
    }

    .areaNews {
        padding: 47px 0 48px;
    }

    .areaNews .newsTitle {
        font-size: clamp(24px, 5vw, 34px);
        margin-bottom: clamp(19px, 5vw, 25px);
    }

    .areaNews .newsCat {
        margin-bottom: clamp(34px, 9vw, 50px);
    }

    .areaNews .newsCat li a {
        font-size: clamp(12px, 2.2vw, 14px);
    }

    .areaNews .newsList>li a .newsPhoto img {
        object-fit: scale-down;
    }

    .areaNews .newsList>li a .listCat {
        margin-bottom: clamp(18px, 4.6vw, 25px);
    }

    .areaNews .newsList>li a .listCat li {
        font-size: clamp(14px, 2.5vw, 18px);
        padding: 0.7vw 3.3vw 0.7vw;
    }

    .areaNews .newsList>li a .newsName {
        font-size: clamp(14px, 2.5vw, 18px);
        line-height: 1.6;
        margin-bottom: clamp(22px, 6vw, 30px);
    }

    .areaNews .newsList>li a .newsUpload {
        font-size: clamp(14px, 2.5vw, 18px);
    }

    .areaNews.areaKnowled {
        padding-bottom: 48px;
    }

    #footer .inner {
        max-width: 1244px;
    }

    #footer .wrapFooter {}

    #footer .wrapFooter .ftMenu {
        flex-direction: column;
        padding: 0 0 26px;
    }

    #footer .wrapFooter .ftMenu .logoFooter {
        width: 200px;
        margin-right: 0;
        margin-bottom: 47px;
    }

    #footer .wrapFooter .ftMenu .logoFooter a {
        display: block;
    }

    #footer .wrapFooter .ftMenu .logoFooter a img {
        width: 100%;
    }

    #footer .wrapFooter .ftMenu .listMenu {
        width: 100%;
        margin-top: 0;
    }

    #footer .wrapFooter .ftMenu .listMenu>li {
        margin-bottom: 13px;
    }

    #footer .wrapFooter .ftMenu .listMenu>li>a {
        width: clamp(120px, 32vw, 140px);
        font-size: clamp(14px, 3.7vw, 16px);
        letter-spacing: 2px;
        margin-right: 10px;
    }

    #footer .wrapFooter .ftMenu .listMenu>li .listMenuChild {
        width: calc(100% - clamp(120px, 32vw, 140px) - 10px);
        transform: translateY(0.4vw);
    }

    #footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li {
        margin-right: 19px;
        margin-bottom: 4px;
    }

    #footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li:last-child {
        margin-right: 0;
    }

    #footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li a {
        letter-spacing: 1.8px;
        font-size: clamp(12px, 3.2vw, 14px);
        /* 指で押す部分を広げる。行の間隔はそのぶん詰めるので、見た目の並びは変わらない */
        display: inline-block;
        padding: 6px 0;
    }

    #footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li {
        margin-bottom: -6px;
    }

    #footer .wrapFooter .policyFt {
        text-align: left;
    }

    #footer .wrapFooter .policyFt a {
        font-size: clamp(12px, 3.2vw, 14px);
        letter-spacing: 1.8px;
        /* 指で押す部分を広げる（行の間隔はそのぶん詰める） */
        display: inline-block;
        padding: 7px 0;
        margin-bottom: -7px;
    }

    #copyright {
        text-align: left;
        padding: 5px 24px 20px;
        letter-spacing: 0.5px;
        font-size: clamp(10px, 2.6vw, 12px);
    }
}

@media (max-width: normalpx) {
    #footer .wrapFooter .ftMenu .listMenu>li {
        flex-direction: column;
        margin-bottom: 16px;
    }

    #footer .wrapFooter .ftMenu .listMenu>li>a {
        margin-bottom: 4px;
    }

    #footer .wrapFooter .ftMenu .listMenu>li .listMenuChild {
        flex-direction: column;
    }
}

@media(max-width: 430px) {
    .areaNews .newsList>li {
        width: 100%;
    }

    .areaNews .newsList>li:not(:nth-child(2n)) {
        margin-right: 0;
    }

    .areaNews .newsList>li:not(:last-child) {
        margin-bottom: 31px;
    }
}
/* ==========================================================
   フッターのメニュー幅（2026-09-17）
   フッターは5列（スマホ2列）のグリッドに変わっているが、以前の
   「見出しの右にメニューを並べる」並べ方の幅指定がスマホ・タブレット用に
   残っていて、メニュー欄が約22pxまで細くなっていた。
   日本語のメニュー名が1文字ずつ縦に折り返されていたのはこのため。
   タブレット〜小さめのPC（769〜1250px）でも、フッター全体の幅を
   狭める古い指定が残っていて、メニュー名が2〜3行に折り返していた。
   古い指定を打ち消す。全画面幅に効かせるため、ファイルの最後に置く。
   ========================================================== */
#footer .wrapFooter .ftMenu .listMenu {
    width: 100%;
}

#footer .wrapFooter .ftMenu .listMenu>li>a {
    width: auto;
    min-width: 0;
    margin-right: 0;
}

#footer .wrapFooter .ftMenu .listMenu>li .listMenuChild {
    width: 100%;
    transform: none;
}

#footer .wrapFooter .ftMenu .listMenu>li .listMenuChild li {
    margin-right: 0;
}

/* ==========================================================
   スクロール後のヘッダー（2026-09-17）
   ヘッダーは上から透明になるグラデーションなので、スクロールすると
   下の文字やロゴが透けて重なって見えていた（フッターで TROBZ が二重に見える等）。
   少しでもスクロールしたら黒い背景を敷き、上下の余白も少し詰める。
   is-scrolled は assets/js/script.js で付け外ししている。
   ========================================================== */
#header {
    /* padding は 2026-09-18 に transition から外した。
       余白（レイアウト）を0.3秒かけて変えると、その間ずっと画面全体の
       再計算が走り、スマホのスクロールがガタついていた。
       背景色は見た目に効くので残している。 */
    transition: background-color .3s ease;
}

#header.is-scrolled {
    background-color: rgba(0, 0, 0, .9);
    background-image: none;
    padding-top: 22px;
    padding-bottom: 22px;
}

@media (max-width: 768px) {
    #header.is-scrolled {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* フッター：スマホ（2列）のときの並び（2026-09-18）
   ・会社の署名は左から右まで1枚で使う。住所が「名駅3-／4-10」と途中で折り返していた
   ・署名が横いっぱいになる分 CORPORATE が下がり、空いていたメディアの右に CREATIVE が入る */
@media (max-width: 600px) {
    #footer .wrapFooter .ftMenu .listMenu>li.brandcell {
        grid-column: 1 / -1;
    }

    #footer .wrapFooter .ftMenu .listMenu>li.mediacell {
        order: 4;
    }

    #footer .wrapFooter .ftMenu .listMenu>li.creativecell {
        order: 5;
    }
}

/* フッター：スマホ（2列）の会社の署名（2026-09-19、畔栁さんが6案から D-1 を選び、下の端もそろえる形に）
   左の列：ロゴ・会社名・受付時間／右の列：住所4行。下のメニュー（CORPORATE｜MARKETING）と同じ2列にそろえる
   （subgrid。未対応のブラウザは同じ幅の2列で代用）。住所は左の列と同じ高さに伸ばし、
   1行目を「TROBZ」の文字の上端、4行目を受付時間の行にそろえて、その間に均等に並べる */
#footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp .nw {
    white-space: nowrap;
}
@media (max-width: 600px) {
    #footer .wrapFooter .ftMenu .listMenu>li.brandcell {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-columns: subgrid;
        grid-template-rows: auto auto auto;
        column-gap: 24px;
        row-gap: 0;
        align-items: start;
    }

    #footer .wrapFooter .ftMenu .listMenu>li.brandcell .logoFooter {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        margin: 0 0 18px;
    }

    #footer .wrapFooter .ftMenu .listMenu>li.brandcell .logoFooter img {
        width: 100%;
        max-width: 130px;
    }

    /* 会社名・住所・受付時間を、そのまま2列の中に置く */
    #footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp {
        display: contents;
    }

    #footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp b {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 4px;
    }

    #footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp .tel {
        grid-column: 1;
        grid-row: 3;
        margin-top: 0;
    }

    /* 1行目の文字の頭を、ロゴの「TROBZ」の文字の上端にそろえる（マークの菱形だけが上に出て、ロゴが一番高くなる）。
       「TROBZ」の上端はロゴ画像の高さの約28%（130px幅で約9px）下。行の上の余白（約5px）を引いて 4px */
    #footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp .addr {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 4px;
    }

    #footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp .addr br {
        display: none;
    }

    #footer .wrapFooter .ftMenu .listMenu>li.brandcell .corp .addr .ln {
        display: block;
    }
}

/* =====================================================
 * 2026-09-19 ヘッダーとフッターの色を墨色 #242428 にそろえる（畔栁さんが3案から C）
 * 旧：ヘッダー 黒90%、フッター PC #3B3B42・スマホ #000 と、場所ごとに違っていた。
 * 黒ほど硬くなく、グレーほど軽くない色。PCとスマホの両方に効くよう、メディアクエリの外に置く
 * ===================================================== */
#header.is-scrolled {
    background-color: rgba(var(--ink-rgb), .96);
}

/* ぶら下がりの箱は、パソコンの落ちてくるメニューだけ。
   スマホのメニューは白地に墨色の文字なので、ここで地を敷くと文字が読めなくなる
   （2026-09-22 畔栁さんの指摘。SERVICE を開くと墨色の箱に墨色の文字が乗っていた）。
   スマホ側は @media (max-width: 768px) で background: transparent にしてある */

#footer {
    background: var(--ink);
    border-top-color: var(--ink-line);
}

#copyright {
    background: var(--ink-deep);
}

/* =====================================================
 * お問い合わせの帯（template-parts/cta-band.php、2026-09-19）
 * 見た目は2種類。ページごとに選ぶ（is-orbit / is-spotlight）。動きは assets/js/cta-band.js
 * 帯の外側の余白は置く側で決める。内側の上下はここで持つ
 * ===================================================== */
.ctaBand {
    --spot-x: 70%;
    --spot-y: 40%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: var(--ink);
    padding: clamp(80px, 8.4vw, 124px) 0;
}

.ctaBandBody {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

/* 見出し（Get in touch. ／ CONTACT）の大きさは2種類で共通。スマホは下のメディアクエリ */
.ctaBandTitle {
    margin: 0;
    font-size: clamp(52px, 6.4vw, 96px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.01em;
}

.ctaBandLead {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.95;
    letter-spacing: .06em;
    color: #CFCFD8;
}

.ctaBandArrow {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- is-orbit：文字の輪が回る丸いボタン ---- */
.ctaBand.is-orbit {
    background: radial-gradient(120% 90% at 85% 50%, #2E2E33 0%, var(--ink) 55%, var(--ink-deep) 100%);
}

.ctaBandEyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    font-size: 13px;
    letter-spacing: .4em;
    color: var(--gold-light);
}

.ctaBandEyebrow::before {
    content: "";
    width: 48px;
    height: 1px;
    background: var(--gold);
}

.ctaBand.is-orbit .ctaBandTitle {
    margin-bottom: 28px;
}

.ctaBandOrbit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.ctaBandOrbitCircle {
    position: relative;
    display: grid;
    place-items: center;
    width: 240px;
    height: 240px;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.ctaBandRing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: ctaBandSpin 22s linear infinite;
}

.ctaBandRing text {
    font-family: "FuturaLTProLight", sans-serif;
    font-size: 13.2px;
    letter-spacing: 3.6px;
    fill: rgba(255, 255, 255, .72);
}

@keyframes ctaBandSpin {
    to { transform: rotate(360deg); }
}

.ctaBandCore {
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink-deep);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 50px rgba(201, 165, 81, .25);
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .35s;
}

.ctaBandCore .ctaBandArrow {
    width: 34px;
    height: 34px;
    transition: transform .45s;
}

.ctaBandLabel {
    font-size: 13px;
    letter-spacing: .12em;
    color: #BDBDC6;
}

.ctaBandOrbit:hover .ctaBandCore,
.ctaBandOrbit:focus-visible .ctaBandCore {
    transform: scale(1.08);
    background: var(--gold-light);
}

.ctaBandOrbit:hover .ctaBandCore .ctaBandArrow {
    transform: rotate(-45deg);
}

.ctaBandOrbit:hover .ctaBandRing {
    animation-duration: 8s;
}

/* ---- is-spotlight：カーソルの周りだけ光る点の方眼 ---- */
.ctaBandGlow,
.ctaBandDots {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.ctaBandDots {
    background-image: radial-gradient(rgba(255, 255, 255, .55) 1.1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(280px circle at var(--spot-x) var(--spot-y), #000 0%, transparent 70%);
    mask-image: radial-gradient(280px circle at var(--spot-x) var(--spot-y), #000 0%, transparent 70%);
}

.ctaBandGlow {
    background: radial-gradient(420px circle at var(--spot-x) var(--spot-y), rgba(201, 165, 81, .16), transparent 70%);
}

.ctaBand.is-spotlight .ctaBandBody {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

.ctaBand.is-spotlight .ctaBandTitle {
    line-height: .95;
    background: linear-gradient(100deg, #fff 30%, var(--gold-light) 60%, #fff 80%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: ctaBandShine 8s ease-in-out infinite;
}

@keyframes ctaBandShine {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0 0; }
}

.ctaBandSub {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
    font-size: 13px;
    letter-spacing: .3em;
    color: #A9A9B3;
}

.ctaBandSub::before {
    content: "";
    width: 40px;
    height: 1px;
    background: var(--gold);
}

.ctaBandLink {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 36px;
    padding: 26px 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    font-size: 20px;
    letter-spacing: .1em;
    color: #fff;
}

.ctaBandLink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width .6s cubic-bezier(.22, .61, .36, 1);
}

.ctaBandLink i {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    transition: background .35s, color .35s, border-color .35s;
}

.ctaBandLink:hover::after,
.ctaBandLink:focus-visible::after {
    width: 100%;
}

.ctaBandLink:hover i,
.ctaBandLink:focus-visible i {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink-deep);
}

/* ---- スマホ ---- */
@media (max-width: 768px) {
    .ctaBandBody,
    .ctaBand.is-spotlight .ctaBandBody {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .ctaBandLead {
        font-size: 14.5px;
    }

    .ctaBandTitle {
        font-size: clamp(44px, 13vw, 56px);
    }

    .ctaBand.is-orbit .ctaBandTitle {
        margin-bottom: 20px;
    }

    .ctaBandOrbit {
        justify-self: center;
    }

    .ctaBandOrbitCircle {
        width: 200px;
        height: 200px;
    }

    .ctaBandCore {
        width: 110px;
        height: 110px;
    }

    .ctaBandLink {
        margin-top: 8px;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ctaBandRing,
    .ctaBand.is-spotlight .ctaBandTitle {
        animation: none;
    }

    .ctaBandOrbitCircle,
    .ctaBandCore,
    .ctaBandLink::after {
        transition: none;
    }
}
/* =====================================================
 * 丸いボタン（inc/template-helpers.php の trobz_pill_button()、2026-09-19）
 * カーソルを合わせると、ふちを金色の線が一周なぞる（畔栁さんが5案から A5）。
 * 線は conic-gradient の角度（--pill-sweep）を 0 → 360deg に動かして描く。
 * この角度を動かすには @property の宣言が要る。無いと、線がすぐ全部出てしまう（一周しない）。
 * 2026-09-19 の整理で誤って消してしまい、09-20 に戻した。消さないこと。
 * ===================================================== */
@property --pill-sweep {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.pillButton {
    max-width: 265px;
    margin: 0 auto;
}

.pillButton > a,
.pillButton > button,
.areaContact .btnSubmit button {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 15px 24px;
    border: 1px solid #c7c7c7;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: #292929;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .08em;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .45s cubic-bezier(.22, .61, .36, 1), border-color .45s cubic-bezier(.22, .61, .36, 1), transform .2s;
}

/* 送信ボタンは、フォームの中で中央に置く（外側の .btnSubmit は text-align: center） */
.areaContact .btnSubmit button {
    display: inline-block;
    max-width: 265px;
}

/* 金色の線。ふちに重ねて、線の太さのぶんだけ見せる */
.pillButton > a::before,
.pillButton > button::before,
.areaContact .btnSubmit button::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from -90deg, var(--gold) var(--pill-sweep), transparent 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    transition: --pill-sweep .9s cubic-bezier(.65, 0, .35, 1);
}

/* カーソルを合わせたとき・キーボードで選んだとき */
@media (hover: hover) {
    .pillButton > a:hover,
    .pillButton > button:hover,
    .areaContact .btnSubmit button:hover {
        border-color: transparent;
        background-color: #FBF8F1;
    }

    .pillButton > a:hover::before,
    .pillButton > button:hover::before,
    .areaContact .btnSubmit button:hover::before {
        --pill-sweep: 360deg;
    }
}

.pillButton > a:focus-visible,
.pillButton > button:focus-visible,
.areaContact .btnSubmit button:focus-visible {
    outline: none;
    border-color: transparent;
}

.pillButton > a:focus-visible::before,
.pillButton > button:focus-visible::before,
.areaContact .btnSubmit button:focus-visible::before {
    --pill-sweep: 360deg;
}

/* スマホ：カーソルが無いので、押した瞬間に少し沈むだけ */
@media (hover: none) {
    .pillButton > a:active,
    .pillButton > button:active,
    .areaContact .btnSubmit button:active {
        transform: scale(.97);
    }
}

@media (max-width: 768px) {
    .pillButton > a,
    .pillButton > button,
    .areaContact .btnSubmit button {
        font-size: 13px;
    }
}

/* =====================================================
 * カードの傾き（assets/js/card-tilt.js、2026-09-19）
 * ニュース・ナレッジのカード（.areaNews .newsList）。カーソルの位置に合わせて立体的に傾き、光がカーソルを追う
 * （畔栁さんが5案から B2）。傾きの角度と光の位置は js が --tilt-x / --tilt-y / --glare-x / --glare-y に入れる。
 * 使っている場所：トップページ（NEWS・KNOWLEDGE HUB）、ニュース一覧、ナレッジハブ一覧、カテゴリー・タグなどの一覧
 * 旧：影が消えて右下へ10px沈む（PCだけ）
 * ===================================================== */
.areaNews .newsList>li a.is-tilting {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .35), 0 0 22px rgba(0, 0, 0, .08);
    /* カーソルに素早く付いていく。離れたときは上の .5s でゆっくり戻る */
    transition: transform .12s linear, box-shadow .5s cubic-bezier(.22, .61, .36, 1);
}

/* 光 */
.areaNews .newsList>li a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, .5), rgba(201, 165, 81, .08) 40%, transparent 70%);
    mix-blend-mode: soft-light;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}

.areaNews .newsList>li a.is-tilting::after {
    opacity: 1;
}

/* スマホ：カーソルが無いので、押した瞬間に少し沈むだけ */
@media (hover: none) {
    .areaNews .newsList>li a:active {
        transform: scale(.985);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pillButton > a::before,
    .pillButton > button::before,
    .areaContact .btnSubmit button::before {
        transition: none;
    }

    .areaNews .newsList>li a.is-tilting {
        transform: none;
    }
}

/* =====================================================
 * 罫線が引かれる（assets/js/draw-in.js、2026-09-19）
 * 下層ページの最初の画面の現れ方。畔栁さんが5案から「2 罫線が引かれる」を選んだ（見本 ops/design/company-hero-preview.html）。
 * 細い線が左から引かれ、文字はその場で現れる（文字は動かさない）。
 *   .drawIn         まとまり。画面に入ると js が .is-in を付ける
 *   .drawIn-fade    その場で現れる。順番は --d（秒）で決める
 *   .drawIn-rule    見出しの下に引く細い線
 *   .drawIn-table   表。行（tr）ごとに --d をずらすと、上の行から順に区切り線が引かれ、その行の文字が現れる
 *   .drawIn-draw    線画（SVG）。線が1本ずつ描かれる。長さは js が測って入れる
 *   .drawIn-mist    写真用。うっすらぼやけた状態から、静かにくっきりする（霧が晴れる）。位置は動かさない。
 *                   代表の写真に使う（畔栁さんが「静かな5案」から3。見本 ops/design/company-photo-quiet-preview.html）
 * 今は会社概要（page-company.php）だけ。ほかのページに広げるときは、同じクラスを付けて $GLOBALS['trobz_draw_in'] = true;
 * 旧：見出しは1文字ずつ打ち込み、表と地図は下から持ち上がりながら浮かび上がる（animate.css の fadeInUp）
 * ===================================================== */
.drawIn .drawIn-fade {
    opacity: 0;
    transition: opacity .8s ease;
    transition-delay: var(--d, 0s);
}

.drawIn.is-in .drawIn-fade {
    opacity: 1;
}

.drawIn-rule {
    display: block;
    width: 320px;
    max-width: 70vw;   /* 見出しのまとまりは文字の幅に縮むので、% ではなく固定の長さにする */
    height: 1px;
    background: #222;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s cubic-bezier(.65, 0, .35, 1) .1s;
}

.drawIn.is-in .drawIn-rule {
    transform: none;
}

/* 表の区切り線：見出しのセル（th）→ 中身のセル（td）の順に、1本の線として左から引く */
.drawIn-table th,
.drawIn-table td {
    background: linear-gradient(#E3E3E6, #E3E3E6) left top / 0 1px no-repeat;
}

.drawIn .drawIn-table th {
    transition: background-size .2s linear;
    transition-delay: var(--d, 0s);
}

.drawIn .drawIn-table td {
    transition: background-size .5s cubic-bezier(.3, 0, .35, 1);
    transition-delay: calc(var(--d, 0s) + .2s);
}

.drawIn.is-in .drawIn-table th,
.drawIn.is-in .drawIn-table td {
    background-size: 100% 1px;
}

/* 表の文字は、その行の線が引かれてから */
.drawIn .drawIn-table .drawIn-fade {
    transition-duration: .6s;
    transition-delay: calc(var(--d, 0s) + .3s);
}

/* 線画が描かれる。長さ（--len）は draw-in.js が測って入れるので、ここでは書かない。
   js が動かないときは線が最初から見えている（描かれないだけ）ので、中身は必ず読める */
.drawIn .drawIn-draw svg > * {
    stroke-dashoffset: var(--len, 0);
    transition: stroke-dashoffset 1.15s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--d, 0s);
}

.drawIn.is-in .drawIn-draw svg > * {
    stroke-dashoffset: 0;
}

/* 霧が晴れる（写真）。ぼかしのにじみが枠の外に出ないよう、まとまり（.drawIn）の側で切る */
.drawIn:has(> .drawIn-mist) {
    overflow: hidden;
}

.drawIn .drawIn-mist {
    opacity: 0;
    filter: blur(5px);
}

.drawIn.is-in .drawIn-mist {
    animation: drawInMist 1.9s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: var(--d, 0s);
}

@keyframes drawInMist {
    from { opacity: 0; filter: blur(5px); }
    40% { opacity: 1; }
    to { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .drawIn .drawIn-fade,
    .drawIn-rule,
    .drawIn .drawIn-table th,
    .drawIn .drawIn-table td {
        transition: none;
    }

    .drawIn .drawIn-fade {
        opacity: 1;
    }

    .drawIn .drawIn-draw svg > *,
    .drawIn.is-in .drawIn-draw svg > * {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        transition: none;
    }

    .drawIn .drawIn-mist,
    .drawIn.is-in .drawIn-mist {
        opacity: 1;
        filter: none;
        animation: none;
    }

    .drawIn-rule {
        transform: none;
    }

    .drawIn-table th,
    .drawIn-table td {
        background-size: 100% 1px;
    }
}

/* =====================================================
 * ページ下のほかのページへの案内（template-parts/more-links.php、2026-09-19）
 * 旧：写真の帯（.areaNextPage。「NEXT / NEWS」と白いボタン）。畔栁さんが5案から「1 文字と細い線」を選んだ
 * （見本 ops/design/next-page-b-preview.html）。細い線の下に「MORE」と行き先を3つ。
 * カーソルを合わせた列の下に金の線が伸び、矢印が進む。すぐ下にお問い合わせの帯（.ctaBand）が続く
 * ===================================================== */
.moreLinks {
    padding: 0 0 clamp(16px, 2vw, 24px);
    background: #fff;
}

.moreLinksBody {
    border-top: 1px solid #E3E3E6;
}

.moreLinksLabel {
    padding: 26px 0 8px;
    font-size: 13px;
    letter-spacing: .32em;
    color: #A8812F;
}

.moreLinksList {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.moreLinksList a {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
    padding: 22px 28px 26px 0;
    color: #292929;
}

.moreLinksList li + li a {
    padding-left: 28px;
    border-left: 1px solid #E3E3E6;
}

.moreLinksName b {
    display: block;
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 300;
    line-height: 1;
    color: #222;
}

.moreLinksName em {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 13px;
    letter-spacing: .1em;
    color: #666;
}

.moreLinksList i {
    font-style: normal;
    font-size: 18px;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), color .45s;
}

/* カーソルを合わせた列の下に伸びる金の線 */
.moreLinksList a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 28px;
    bottom: 12px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.moreLinksList li + li a::after {
    left: 28px;
}

@media (hover: hover) {
    .moreLinksList a:hover::after {
        transform: scaleX(1);
    }

    .moreLinksList a:hover i {
        transform: translateX(6px);
        color: #A8812F;
    }
}

.moreLinksList a:focus-visible {
    outline: none;
}

.moreLinksList a:focus-visible::after {
    transform: scaleX(1);
}

/* スマホ：縦に3つ。区切りは横の線 */
@media (max-width: 768px) {
    .moreLinksList {
        grid-template-columns: minmax(0, 1fr);
    }

    .moreLinksList li + li a {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #E3E3E6;
    }

    .moreLinksList li + li a::after {
        left: 0;
    }

    .moreLinksList a {
        padding: 20px 4px 24px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .moreLinksList a::after,
    .moreLinksList i {
        transition: none;
    }
}

/* ---------- サービスのロゴ（inc/template-helpers.php の trobz_brand_logo_img が出す img） ----------
 * ロゴごとに、画像の中の「字面（文字の上下）」の大きさと位置が違う。そのまま高さをそろえると
 * 文字の大きさも中心もばらついて凸凹に見えるので、測った値で補正する。
 *   --k  … 字面の高さを1としたときの、画像全体の高さ（1 ÷ 字面の割合）
 *   --dy … 画像の中心と字面の中心のずれ（＝(--mb − --mt) ÷ 2）
 *   --mt … 字面の上にある透明な余白（字面の高さを1としたときの量）
 *   --mb … 字面の下にある透明な余白（同上）
 *
 *   ロゴ            字面/画像   字面の中心   上の余白   下の余白
 *   トロパス          .870        .495        .075      .075
 *   フォーカスAIO     .632        .655        .539      .043
 *   Locina MEO       .461        .459        .086      .264   ← 2026-09-20 に新しいロゴへ差し替えて測り直した
 *   フォーカスSEO     .667        .664        .500      .000
 *   （2026-09-20 に実測。ロゴ画像を差し替えたら測り直すこと）
 *
 * 使う側は「字面の高さ」--brand-size を決めるだけでよい。当て方は2通り。
 *   横に並べるとき（例: assets/css/mission.css）… 中心をそろえる
 *     height: calc(var(--brand-size) * var(--k));
 *     transform: translateY(calc(var(--brand-size) * var(--dy)));
 *   縦に積むとき（例: assets/css/service.css・index.css）… 余白を打ち消して、字面の上下を基準にする
 *     height: calc(var(--brand-size) * var(--k));
 *     margin-top: calc(var(--brand-size) * var(--mt) * -1);
 *     margin-bottom: calc(<空けたい間隔> - var(--brand-size) * var(--mb));
 */
.serviceBrand {
    --k: 1;
    --dy: 0;
    --mt: 0;
    --mb: 0;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.serviceBrand--tropus    { --k: 1.15; --dy: .006;  --mt: .075;  --mb: .075; }
.serviceBrand--focusaio  { --k: 1.58; --dy: -.245; --mt: .539;  --mb: .043; }
.serviceBrand--locinameo { --k: 2.17; --dy: .089;  --mt: .086;  --mb: .264; }
.serviceBrand--focusseo  { --k: 1.50; --dy: -.246; --mt: .500;  --mb: 0; }

/* =====================================================
 * 本文の中のリンクを、指で押しやすくする（2026-09-20）
 * 記事・規約の本文に出てくるリンクは文字と同じ高さ（14〜15px）しかなく、
 * スマホでは押しにくい。行の折り返しを壊さないよう display は変えず、
 * 上下の余白だけを足して、指で触れる範囲を広げる。
 * ===================================================== */
.detailContent a,
.entry-content a,
.tropusLegal a,
.areaKnowledDetail .detailContent a {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* お知らせ・ナレッジの絞り込み（カテゴリー）も押しやすく */
.detailIntro .introCat li a {
    display: inline-block;
    padding: 6px 2px;
}

/* =====================================================
 * 「もっと読む」（2026-09-22、畔栁さんが5案から「4 先頭2行＋もっと読む」）
 *
 * 狭い画面で、長い説明をはじめの2行だけにする。ボタンは assets/js/read-more.js が足す。
 * 2行に収まる文には何も起きない。JSが動かないときは全文が出るだけ。
 *   data-readmore …… まとまり   .rmText …… 畳む文   .rmBtn …… 足されるボタン
 * ===================================================== */
.rmBtn {
    display: none;
}

@media screen and (max-width: 768px) {
    .rmOn .rmText {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .rmOn.is-open .rmText {
        -webkit-line-clamp: unset;
    }

    .rmOn .rmBtn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        padding: 6px 0;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: 12.5px;
        line-height: 1;
        color: var(--gold-deep, #A8812F);
        cursor: pointer;
    }

    /* ＋ と − は飾りなので、文字ではなくこちらで足す */
    .rmOn .rmBtn::after {
        content: "＋";
        font-size: 11px;
    }

    .rmOn.is-open .rmBtn::after {
        content: "−";
    }
}

/* =====================================================
 * お問い合わせの帯：下の線を、狭い画面では文字の幅に合わせる（2026-09-22 畔栁さんの指示）
 * それまでは丸い矢印まで含めた横いっぱいに引かれていて、間のりが広く見えていた。
 * 線をリンク全体から文字だけに移す。
 * ===================================================== */
@media screen and (max-width: 768px) {
    .ctaBandLink {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .ctaBandLink > span {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, .35);
    }

    /* カーソルを合わせたときの金色の線は、指で触る画面では使わない */
    .ctaBandLink::after {
        display: none;
    }
}