中身を1000pxに収める箱
* ここに見出し、本文、カード、ボタンを入れる
*
*
*
* ============================================================ */
.ta-faq {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
}
.ta-faq__item {
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
padding: var(--ta-space-l);
background: var(--ta-color-bg);
}
.ta-faq__inner {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-self: stretch;
flex: 1 1 auto;
gap: 10px;
padding-left: var(--ta-space-l);
border-left: 3px solid var(--ta-color-main);
}
.ta-faq__q,
.ta-faq__a {
display: flex;
align-items: flex-start;
gap: var(--ta-space-m);
width: 100%;
}
.ta-faq__label {
flex: 0 0 auto;
font-family: var(--ta-font-family-ja);
font-weight: 700;
font-size: 16px;
line-height: 1.7;
color: var(--ta-color-main);
white-space: nowrap;
}
.ta-faq__label--a {
color: var(--ta-color-sub-text);
}
.ta-faq__q-text {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font: var(--ta-type-h3-pc);
letter-spacing: var(--ta-letter-spacing-ja);
color: var(--ta-color-main);
}
.ta-faq__a-body {
flex: 1 1 auto;
min-width: 0;
font: var(--ta-type-body);
letter-spacing: var(--ta-letter-spacing-ja);
color: var(--ta-color-text);
}
.ta-faq__a-body p {
margin: 0;
}
.ta-faq__a-body p + p,
.ta-faq__a-body .ta-faq__section + .ta-faq__section {
margin-top: 27px;
}
.ta-faq__a-body strong,
.ta-faq__a-body .ta-faq__subtitle {
font-weight: 700;
color: var(--ta-color-primary);
}
.ta-faq__ol {
margin: 4px 0 4px 1.5em;
padding: 0;
font: var(--ta-type-caption);
letter-spacing: var(--ta-letter-spacing-ja);
color: var(--ta-color-sub-text);
text-align: left;
}
.ta-faq__ol--alpha {
list-style-type: lower-alpha;
}
.ta-faq .ta-faq__item .ta-faq__a-body .--note-list.--number {
margin: 4px 0 4px 1.5em;
padding: 0;
list-style: decimal;
}
.ta-faq .ta-faq__item .ta-faq__a-body .--note-list.--number,
.ta-faq .ta-faq__item .ta-faq__a-body .--note-list.--number > li,
.ta-faq .ta-faq__item .ta-faq__a-body .--note-list.--number .--list-title,
.ta-faq .ta-faq__item .ta-faq__a-body .--note-list.--number .--list-note {
font: var(--ta-type-caption);
letter-spacing: var(--ta-letter-spacing-ja);
color: var(--ta-color-sub-text);
}
.ta-faq .ta-faq__item .ta-faq__a-body .--note-list.--number .--list-note {
margin-top: 4px;
padding-left: 0;
}
.ta-faq__links {
display: flex;
flex-direction: column;
gap: var(--ta-space-m);
margin-top: var(--ta-space-m);
}
.ta-faq__link-row {
display: flex;
align-items: center;
gap: var(--ta-space-m);
}
.ta-faq__pdf-icon {
display: block;
flex-shrink: 0;
}
.ta-faq__link {
font: var(--ta-type-body);
letter-spacing: var(--ta-letter-spacing-ja);
color: var(--ta-color-main);
text-decoration: none;
border-bottom: 1px solid var(--ta-color-main);
white-space: nowrap;
}
@media (max-width: 768px) {
.ta-faq__link {
font-size: 12px;
white-space: nowrap;
}
}
.ta-faq__link:hover {
opacity: 0.8;
}
.ta-faq__more {
display: inline-flex;
align-items: center;
gap: var(--ta-space-m);
color: var(--ta-color-main);
text-decoration: none;
border-bottom: 1px solid var(--ta-color-main);
letter-spacing: var(--ta-letter-spacing-ja);
white-space: nowrap;
}
.ta-faq__more-text {
font-family: var(--ta-font-family-ja);
font-size: 20px;
font-weight: 700;
line-height: 1.7;
}
.ta-faq__more-arrow {
font-family: var(--ta-font-family-ja);
font-size: 16px;
font-weight: 500;
line-height: 1.7;
}
@media (max-width: 939px) {
.ta-faq__q-text {
font: var(--ta-type-h3-sp);
letter-spacing: var(--ta-letter-spacing-ja);
}
.ta-faq__a-body {
font: var(--ta-type-body-sp);
letter-spacing: var(--ta-letter-spacing-ja);
}
.ta-faq__ol {
font: var(--ta-type-caption-sp);
letter-spacing: var(--ta-letter-spacing-ja);
}
.ta-faq .ta-faq__item .ta-faq__a-body .--note-list.--number,
.ta-faq .ta-faq__item .ta-faq__a-body .--note-list.--number > li,
.ta-faq .ta-faq__item .ta-faq__a-body .--note-list.--number .--list-title,
.ta-faq .ta-faq__item .ta-faq__a-body .--note-list.--number .--list-note {
font: var(--ta-type-caption-sp);
letter-spacing: var(--ta-letter-spacing-ja);
}
}
/* =====================================================
共通ページヒーロー (.ta-hero)
-----------------------------------------------------
これは「青いページタイトル帯」。
使うページ: 通常の下層ページ。例: キャンペーン、メンテナンス、404など。
使わないページ: TOP、LP、商品メインビジュアルなど独自の絵があるページ。
hero文字で迷ったら見る場所:
- 高さ -> .ta-hero の min-height
- 文字サイズ -> .ta-hero__title の font-size
- 1行固定/改行 -> .ta-hero__title の white-space
- SPだけの調整 -> 下のSP用media (max-width: 939px)
注意:
今はタイトルを1行に寄せる設計。長いタイトルを自然改行させたい時は、
white-space / overflow / font-size をセットで見直す。1つだけ触ると崩れやすい。
===================================================== */
.ta-hero {
align-items: center;
background: linear-gradient(180deg, #3A82D4 0%, #3270C0 100%);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
/* PCのhero高さ。タイトル帯を低く/高くしたい時はここ。 */
min-height: 140px;
overflow: hidden;
padding: 0 20px;
position: relative;
/* 背景を画面いっぱいにする指定。親の幅が狭くても青帯は端まで伸びる。 */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.ta-hero__title {
color: #fff;
font-family: var(--ta-font-family-ja);
/* PC側の文字サイズ。clamp(最小, 画面幅に応じた値, 最大)。最大40px。 */
font-size: clamp(20px, 2.78vw, 40px);
font-weight: 700;
letter-spacing: 1px;
line-height: 1.7;
margin: 0;
/* タイトル文字の横幅。本文と同じ1000px基準にそろえる。 */
max-width: var(--content-width, 1000px);
text-align: center;
/* nowrap = 1行固定。2行にしたい場合は normal にする。 */
white-space: nowrap;
}
.ta-hero__lead {
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding: 40px 20px;
width: 100%;
}
.ta-hero__lead-text {
color: var(--primary-dark, #0A2463);
font-family: var(--ta-font-family-ja);
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1.7;
margin: 0;
max-width: 800px;
text-align: center;
}
/* SP */
@media screen and (max-width: 939px) {
.ta-hero {
/* SPのhero高さ。スマホで帯が窮屈ならここを見る。 */
min-height: 113px;
padding: 0 20px;
}
.ta-hero__title {
/* SP: (100vw - 40px padding) / 16chars — 実在する最長タイトル「リモートサポートサービスについて」に合わせた式 */
/* SP側の文字サイズ。長いタイトルを画面幅に合わせて少し縮める式。最大28px。 */
font-size: clamp(20px, calc((100vw - 40px) / 16), 28px);
white-space: nowrap;
max-width: 100%;
/* 1行固定で入りきらない文字を隠す指定。改行させるならここも見直す。 */
overflow: hidden;
}
.ta-hero__lead {
padding: 40px 20px;
}
.ta-hero__lead-text {
font-size: 18px;
max-width: none;
text-align: left;
}
}
/* ============================================================
* Site app baseline and migrated legacy dependencies
* ------------------------------------------------------------
* リニューアル共通CSS用。旧CSS全体は読まず、移行済みページが
* 既存デザイン維持に必要としている最小範囲だけをここに集約する。
* ============================================================ */
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.description__note--block {
font-size: 14px;
line-height: 2.8;
}
@media screen and (min-width: 940px) {
.description__note--block {
font-size: 16px;
}
}
.link__orange {
color: var(--ta-color-accent, #ff6800);
text-decoration: underline;
}
.link__orange:hover {
text-decoration: none;
}
.--maintenance {
color: var(--ta-color-text, #1a1a2e);
font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
}
.--maintenance .contents {
background: #fff;
}
.--maintenance main {
padding-top: 0;
}
.--maintenance .section__contents--block.--pages {
background: #fff;
padding: 40px 20px 80px;
}
@media screen and (min-width: 940px) {
.--maintenance .section__contents--block.--pages {
max-width: unset;
padding: 40px 20px 80px;
}
}
.--maintenance .section__contents--block.--pages .contents__block {
display: flex;
flex-direction: column;
gap: 40px;
margin: 0 auto;
max-width: 860px;
width: 100%;
}
.--maintenance .contents__block--title {
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
margin-bottom: 0;
padding: 0;
text-align: center;
}
.--maintenance .contents__block--title::after {
background-color: var(--ta-heading-accent-bar-color, #ffa54f);
content: "";
display: block;
height: var(--ta-heading-accent-bar-height, 2px);
margin: 12px auto 0;
width: var(--ta-heading-accent-bar-width, 100px);
}
.--maintenance .contents__block--title .--title-label {
display: block;
margin: 0;
}
.--maintenance .contents__block--title .--title-label span {
color: var(--ta-color-primary, #0a2463);
display: block;
font-size: 28px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1.7;
}
.--maintenance .contents__block--note {
color: var(--ta-color-text, #1a1a2e);
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
line-height: 1.7;
margin: 0;
}
.--maintenance .contents__block--note + .maintenance-table-scroll {
margin-top: 0;
}
.contents__block--note + .pages__section--block {
margin-top: 48px;
}
.contents__block--note.--pc-center br {
display: none;
}
@media screen and (min-width: 940px) {
.contents__block--note.--pc-center {
text-align: center;
}
.contents__block--note.--pc-center br {
display: block;
}
}
.pages__section--block:not(:last-of-type) {
margin-bottom: 60px;
}
.pages__section--block-title {
display: flex;
font-size: 22px;
font-weight: 700;
line-height: 1.27;
margin-bottom: 24px;
}
@media screen and (min-width: 940px) {
.pages__section--block-title {
margin-bottom: 36px;
}
.pages__section--block-title br {
display: none;
}
}
.pages__section--block-title::before {
background-color: var(--ta-color-accent, #ff6800);
content: "";
display: block;
height: 2px;
margin: 15px 10px 15px 0;
min-width: 9px;
width: 9px;
}
.--notfound .pages__section--block-title {
color: var(--ta-color-primary, #0a2463);
}
.--notfound .pages__section--block-title::before {
content: none;
display: none;
}
.--notfound .--title-primary,
.--notfound .--note-primary {
color: var(--ta-color-primary, #0a2463);
}
.--notfound .link__orange {
color: var(--ta-color-main, #1e5fad);
}
.--maintenance .maintenance-table-scroll {
filter: drop-shadow(0 4px 7px rgba(235, 243, 252, 0.48));
overflow-x: auto;
width: 100%;
}
.--maintenance .maintenance-table {
border: 1px solid var(--ta-color-border, #d4dce8);
border-collapse: separate;
border-radius: 6px;
border-spacing: 0;
color: var(--ta-color-text, #1a1a2e);
font-size: 16px;
font-weight: 500;
line-height: 1.7;
min-width: 820px;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
.--maintenance .maintenance-table th,
.--maintenance .maintenance-table td {
border: 0;
border-right: 1px solid var(--ta-color-border, #d4dce8);
border-top: 1px solid var(--ta-color-border, #d4dce8);
box-sizing: border-box;
padding: 16px 24px;
vertical-align: middle;
}
.--maintenance .maintenance-table th:last-child,
.--maintenance .maintenance-table td:last-child {
border-right: 0;
}
.--maintenance .maintenance-table thead th {
background: var(--ta-color-main, #1e5fad);
border-color: rgba(255, 255, 255, 0.75);
color: #fff;
font-size: 15px;
font-weight: 700;
height: 56px;
line-height: 1.4;
text-align: center;
}
.--maintenance .maintenance-table thead th.column-title-cell,
.--maintenance .maintenance-table thead th.time-cell-01,
.--maintenance .maintenance-table thead th.time-cell-02 {
background: var(--ta-color-primary, #0a2463);
}
.--maintenance .maintenance-table thead tr:first-child th {
border-top: 0;
}
.--maintenance .maintenance-table tbody th {
background: #f2f5f9;
color: var(--ta-color-primary, #0a2463);
font-size: 15px;
font-weight: 700;
height: 68px;
line-height: 1.4;
text-align: left;
}
.--maintenance .maintenance-table tbody tr:nth-child(even) th {
background: var(--ta-color-primary-pale, #ebf3fc);
}
.--maintenance .maintenance-table tbody td {
background: #fff;
text-align: center;
}
.--maintenance .maintenance-table tbody td.time-cell-01,
.--maintenance .maintenance-table tbody td.time-cell-02 {
color: var(--ta-color-primary-light, #3a82d4);
font-weight: 700;
}
.--maintenance .maintenance-table th.column-title-cell,
.--maintenance .maintenance-table td.column-title-cell,
.--maintenance .maintenance-table th.time-cell-01,
.--maintenance .maintenance-table td.time-cell-01,
.--maintenance .maintenance-table th.time-cell-02,
.--maintenance .maintenance-table td.time-cell-02 {
width: calc(100% / 3);
}
.--maintenance .maintenance-table th.empty-cell,
.--maintenance .maintenance-table td.empty-cell {
text-align: center;
}
@media screen and (max-width: 939px) {
.--maintenance .section__contents--block.--pages {
padding: 32px 20px 60px;
}
.--maintenance .section__contents--block.--pages .contents__block {
gap: 32px;
}
.--maintenance .contents__block--title .--title-label span {
font-size: 24px;
}
.--maintenance .contents__block--note {
font-size: 14px;
letter-spacing: 0;
}
.--maintenance .maintenance-table-scroll {
filter: none;
}
.--maintenance .maintenance-table {
font-size: 14px;
min-width: 640px;
}
.--maintenance .maintenance-table th,
.--maintenance .maintenance-table td {
padding: 12px;
}
.--maintenance .maintenance-table thead th,
.--maintenance .maintenance-table tbody th {
font-size: 13px;
}
}
/* ================================================================
WPテーマ triauto-blog（/triauto/blogs/）の記事コンテンツ保護（2026-07-18）
このテーマは app.css を自前ので先に読み込み、テーマ style.css の
「後勝ち」上書きを前提に設計されている（common.js も app.css を再注入しない。
/triauto/assets/js/common.js・/src/js/common.js の同期ブロック参照）。
それでも app.css のグローバル素地のうち、テーマ側に同一詳細度の上書きが無い
下記2点は記事表示を変えてしまうため、このテーマに限り既定へ戻す:
- main { display:flex } のレイアウト化 → block へ復元
- body:has(.global-header-reserve) の文字色/フォント（詳細度 0-1-1 で
テーマの body 指定に勝ってしまう）→ UA既定へ復元（このブロックは
body:has(...) ルールより後方に置くこと。同詳細度のため後勝ちで復元している）
共通ヘッダー/フッター/パンくずは直後のルールで色/フォントを自前確保する。
================================================================ */
body.triauto-blog main {
display: block;
flex: none;
}
body.triauto-blog {
color: initial;
font-family: initial;
}
/* 共通パーツ側は上の復元の影響を受けないよう、通常ページと同じ色/フォントを明示する
（.header-for-triauto--portal もこのスコープに含まれる） */
body.triauto-blog .header-for-triauto {
color: var(--ta-color-text);
font-family: var(--ta-font-family-ja);
}
/* フッターの文字色は .footer 自身の配色（濃紺地に近白 #f7f9fc、オレンジ見出し等）が
担っているため、ここで color を再指定してはいけない（再指定すると継承系の
テキスト＝登録番号・費用リスク・コピーライト等が濃色化する）。
body 復元(font-family: initial)の影響を受けないようフォントだけ明示する。
（.breadcrumbs__nav（footer内）もこのスコープに含まれる） */
body.triauto-blog .footer {
font-family: var(--ta-font-family-ja);
}
*
*
*
*
* Q
*
* 質問
*
* A
*
*
* 回答