/* ========================================================================== * 自動翻訳（GTranslate）連携（SPEC §14） * inc/translate.php が、翻訳プラグインが有効なときだけ読み込む。 * 翻訳中は （inc/translate.php のインラインスクリプトが付ける）。 * ========================================================================== */ /* 翻訳スクリプトを読み込むための見えないウィジェット（フッター） */ .ki-gt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Google 翻訳のバナー・吹き出し・ハイライトを出さない */ body { top: 0 !important; } .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* -------------------------------------------------------------------------- * 翻訳中: 日本語の縦書き見出しを横書きにする（英字のラベル「(ABOUT US)」等は英語のままなので縦書きのまま） * -------------------------------------------------------------------------- */ html.is-translated .v-title, html.is-translated .sv-title, html.is-translated .recruit-vertical, html.is-translated .reason-key { writing-mode: horizontal-tb; } html.is-translated .about-titles > span, html.is-translated .oem-catch > span { writing-mode: horizontal-tb; white-space: normal; } /* トップ「私たちについて」: 縦書き用の位置指定（右から縦に並べる）をやめ、本文の上に見出しとして並べる */ html.is-translated .about-titles { display: block; margin: 0 0 56px; padding-right: 0; } html.is-translated .about-titles > span { position: static; display: block; line-height: 1.3; } html.is-translated .about-title-2 { margin-top: .25em; } /* 共創OEM FV のキャッチ（3行）: 同じ高さに右から並べていたのを、本文の上に縦に積む */ html.is-translated .oem-catch { display: block; margin: 0 0 40px; padding-right: 0; } html.is-translated .oem-catch > span { position: static; display: block; letter-spacing: .02em; } html.is-translated .oem-catch-2, html.is-translated .oem-catch-3 { margin-top: .15em; } /* 共創OEM「選ばれる理由」のキーワード: 右上の縦書きをやめ、番号の下に置く */ html.is-translated .reason-key { position: static; margin-top: 14px; letter-spacing: .08em; } html.is-translated .reason-title { padding-right: 0; } /* 採用バナーの「一緒に働く仲間を募集しています。」: 右上に右寄せで置く */ html.is-translated .recruit-vertical { max-width: 340px; text-align: right; letter-spacing: .02em; } /* スマホ（style.css と同じ 860px 以下）: 採用バナーの文は見出しのすぐ下に流し込む（縦書き用に空けていた余白を詰める） */ @media (max-width: 860px) { html.is-translated .recruit-vertical { position: relative; right: auto; top: auto; order: 1; max-width: none; margin-top: 20px; text-align: left; } html.is-translated .recruit-head { order: 0; } html.is-translated .recruit-desc { order: 2; margin-top: 28px; } html.is-translated .recruit-link { order: 3; } /* 左端の縦書きラベル（ABOUT US / CO-CREATION OEM）と英語の見出しが重ならないよう、見出しを少し右へ */ html.is-translated .about-titles, html.is-translated .oem-catch, html.is-translated .oem-fv-body { padding-left: 16px; } } /* パソコン・タブレット: 共創OEM FV の本文は、日本語では高さ0（縦書きの絶対配置）のキャッチの下に来る。 英語ではキャッチが本文の上に積まれるので、そのぶん上げて日本語と同じ位置にする */ @media (min-width: 861px) { html.is-translated .oem-fv-body { margin-top: 250px; } } /* 「人と物語」の見出し（一覧ページとトップ）: 縦書き2列を中央付近に段違いで置いていたのをやめ、 script.js が1つにまとめた見出しを他のページと同じく左寄せにし、英字ラベルをその下に置く */ html.is-translated .story-head { display: block; height: auto; } html.is-translated .story-title-1 { position: static; display: block; } html.is-translated .story-label { position: static; margin-top: 24px; } /* トップ「人と物語」: 日本語では縦書きの見出しの右に「物語一覧ページへ」を置いているが、英語では見出しが低くなり 同じ位置だとカードに重なるため、カードの下（右寄せ）に置き、見出しとカードの間を空ける */ html.is-translated .story .story-head { margin-bottom: 48px; } html.is-translated .story .story-more { position: static; display: block; width: -moz-fit-content; width: fit-content; margin: 36px 0 0 auto; } /* -------------------------------------------------------------------------- * 翻訳中: 枠線ボタンは英語だと文字が長くなるため、幅・高さを文字数に合わせて広げる（指摘 No.82・No.86） * -------------------------------------------------------------------------- */ html.is-translated .btn-line { width: -moz-fit-content; width: fit-content; min-width: 256px; max-width: 100%; height: auto; min-height: 52px; padding: 12px 28px; line-height: 1.5; letter-spacing: .04em; text-align: center; white-space: normal; } /* トップ「事業内容」のカード: 左右 50% の位置から中央寄せにしていると、英語の長いボタンが半分の幅で折り返されるため、 左右いっぱいを基準に中央へ置く */ html.is-translated .biz-card .btn-line { left: 0; right: 0; margin-inline: auto; transform: none; } /* トップ「事業内容」の見出し（店舗と通販・地域共創）: 英語は 2 行になり本文に重なるため、文字を小さくする */ html.is-translated .biz-title { padding: 0 6%; font-size: clamp(28px, 2.9vw, 42px); line-height: 1.3; } @media (max-width: 860px) { html.is-translated .btn-line { min-width: 230px; min-height: 48px; } }