/* 英語版ページ専用の上書きCSS。/en/ ページでのみ import.css の後に読み込まれる。 */

/* キービジュアルの見出し・キャッチコピー（.ttl.v_02のラベル、.txt01、
   .txt02）: 日本語版は短いタイトル向けに幅の制約がなく、右隣の
   .icon-wrapper（商品写真）はposition:absoluteで独立して配置されて
   いるだけなので、テキストが長い英語版（特にprofarm.phpの長い
   タイトル・キャッチコピー）だと折り返されずそのまま写真の裏まで
   伸びてしまう。最大幅を決めて折り返すようにする。 */
.key-visual .main-content .ttl.v_02 span,
.key-visual .main-content .txt01,
.key-visual .main-content .txt02 {
  max-width: 460px;
}

/* JP/EN言語切替ボタンのCSSはJP/EN共通なのでimport.cssに移動済み。 */

footer .main-footer > div:not(:last-child) {
  margin-right: 15px;
}

/* ヘッダー（上部バー）: アイコンは行の中央揃えが綺麗だが、電話番号
   (p.phone-num)は「電話番号のピル」＋「営業時間の小さいテキスト」の
   2行分の高さがあるため、そのままalign-items:centerにすると2行ぶんの
   塊ごと中央揃えされ、ピル自体がアイコン・ボタンの中心からずれてしまう。
   営業時間をposition:absoluteで通常の高さ計算から外して解決を試みたが、
   親のp.phone-numにheightを明示しないと、absolute要素のtop:100%が
   計算不能になり（親の高さがauto→top:100%も事実上autoとして扱われる
   というCSS仕様の挙動）、結局もとの2行ぶんの高さに戻ってしまっていた。
   heightを明示（ピルの実測40px）することでこの問題を解消。widthも
   実測値(359px)で固定し、営業時間を抜いても横幅が変わらない
   （＝右寄せの.right-content全体が右にずれない）ようにしてある。 */
.sub-nav-wrapper .right-content {
  align-items: center;
}

.sub-nav-wrapper .right-content p.phone-num {
  position: relative;
  width: 359px;
  height: 40px;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  text-align: center;
}

.sub-nav-wrapper .right-content p.phone-num span.phone {
  margin-bottom: 0;
}

/* p.phone-numには右側にpadding-right:35px（本体CSS側の指定）があり、
   これを含めた全幅(359px)を基準に中央揃えすると、営業時間の文字が
   ピル本体の中心より右に寄って見える。right:35pxでその余白ぶんを
   除いた、ピルと同じ幅の範囲内で中央揃えする。 */
.sub-nav-wrapper .right-content span.time {
  position: absolute;
  top: 100%;
  left: 0;
  right: 35px;
  margin-top: 2px;
  white-space: nowrap;
  text-align: center;
  display: block;
}

.sub-nav-wrapper .right-content p.contact {
  margin-top: 0;
}

/* ヘッダー: Instagram/Facebookのアイコンは正方形(100x100)だが、YouTubeの
   元画像は横長(829x710)。width指定だけだとYouTubeだけ縦が縮んで、
   上揃えのせいで他の2つより高い位置にずれて見える。3つとも同じ正方形の
   箱に揃える。サイズも日本語版に近い27pxに統一（スクロール時のバーの
   アイコンと同じサイズ）。 */
.sub-nav-wrapper .right-content p.icon-fb img {
  width: 27px;
  height: 27px;
  max-width: none;
  object-fit: contain;
}

/* スクロール時のバー: アイコンを囲むp.icon-snsの幅がwidth:7%で頭打ちに
   なっており、Instagram/Facebookは本来のwidth:32pxより縮み、YouTube
   （元画像が横長）はまた別のサイズになってしまう。この親要素の制限に
   関係なく、3つとも同じ明示サイズに固定する。 */
#navbar .inner-nav .sub-g-nav .right-content p.icon-sns {
  width: auto;
}

#navbar .inner-nav .sub-g-nav .right-content p.icon-sns img {
  width: 27px;
  height: 27px;
  max-width: none;
  object-fit: contain;
}

/* スクロール時のバー: 以前は「Company Profile / Recruit」を中央揃えに
   すると下の「Service List」メニュー行と重なっていたが、営業時間を
   position:absoluteで高さ計算から外したことで行自体の高さが安定した
   ため、他の項目（アイコン・電話番号・ボタン）と同じ中央揃えに戻せる。 */
#navbar .inner-nav .sub-g-nav .left-content {
  align-self: center;
}

/* ヘッダー（スクロール時のバー）: 英語のお問い合わせボタンの文字は
   放っておくと2行に折り返ってしまう。また営業時間表示の縦paddingが
   %指定（padding: 3% ...）で、これは電話番号ボックス自身の「幅」を
   基準に計算されるため、英語の長い時間表記で幅が広がると、それに伴い
   電話番号ピルの高さも増し、結果として下の「Maintenance & Support /
   Column」のメニュー行に食い込み、そのメニュー行自身のflexの配分を通じて
   さらに「Company Profile / Recruit」を固定ロゴやアイコンに押し込んで
   いた。以前は営業時間の行自体を消して回避していたが、上部バーと同じ
   手法（p.phone-numにheightを明示し、営業時間をposition:absoluteで
   高さ計算から外す）に変えることで、営業時間を表示したままこの連鎖を
   断ち切れる。 */
#navbar .inner-nav .sub-g-nav .right-content {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

#navbar .inner-nav .sub-g-nav .right-content p.phone-num {
  position: relative;
  height: 25px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 12px;
}

/* お問い合わせボタンだけ本体CSS側にmargin-bottom:1%（幅基準の%指定）が
   付いており、他の項目よりわずかに上にずれて見えていた。 */
#navbar .inner-nav .sub-g-nav .right-content p.contact {
  margin-bottom: 0 !important;
}

/* 上部バーと同じく、右側のpadding-right(20px)ぶんを除いた、ピルと
   同じ幅の範囲内で営業時間を中央揃えする。実測でブラウザ検証済み。 */
#navbar .inner-nav .sub-g-nav .right-content span.time {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 35px;
  margin-top: 1px;
  font-size: 8px;
  white-space: nowrap;
  text-align: center;
}

/* スクロール時のバー: 「Service List / Choose by Purpose / Column」が
   見えず押せなくなっていた本当の原因。#navbar .inner-nav .sub-g-nav
   （「Company Profile / Recruit」とアイコン・電話番号・ボタンの2つを
   まとめている箱）にはヘッダー自体と全く同じ背景色(#222)が設定されて
   おり、見た目上は別レイヤーとして区別がつかないが、実際にはflexの
   内容ぶんの幅（約800px、2つの間の余白部分も含む）に広がった状態で
   下のg-navメニューの上に重なって描画されていた。これによりメニューの
   文字の大半が隠れ、クリックもこのパネルに奪われていた。唯一「Maintenance
   & Support」の折り返し2行目（「Support」の部分）だけがこの箱からはみ出て
   見えていたため、原因の特定が非常にわかりにくくなっていた。背景を透明化
   してメニューが透けて見えるようにし、この箱自体のpointer-eventsを切る
   ことでクリックがこの見えないパネルではなく下のメニューリンクに届く
   ようにした。left-content/right-contentの箱全体にpointer-eventsを
   戻すと同じ問題が一段階下で再発する - right-content自身の箱は実際に
   見えているアイコン・電話番号・ボタンよりも横に広く、その余白部分が
   「Column」の上に乗ってまた塞いでしまうため。実際のリンク要素だけに
   絞ってpointer-eventsを戻すようにしている。 */
#navbar .inner-nav .sub-g-nav {
  background: transparent;
  pointer-events: none;
}

#navbar .inner-nav .sub-g-nav .left-content a,
#navbar .inner-nav .sub-g-nav .right-content a {
  pointer-events: auto;
}

/* メニュー（「Service List」「Choose by Purpose」「Maintenance &
   Support」）: 元CSSの各<li>はwidth:25%＋float:leftで、JP版の4項目
   構成が前提になっている。英語版は「Column」を削除して3項目のため、
   そのままだと25%×3=75%ぶんしか埋まらず、右側に余白が残って項目が
   左に寄って見える（「Choose by Purpose」も中央に来ない）。flexboxに
   変えて幅を項目数に応じて自動で均等配分すれば、3項目でもきちんと
   全幅に広がり、中央の項目が本当に中央に来る。スクロール前・後の
   どちらの状態でも同じ問題が起きるため、.sticky-header限定にせず
   常に適用する。（長い英語ラベルが2行に折り返って上の行と重なって
   しまう問題も、nowrapの1行レイアウトなので合わせて防げる。） */
#navbar .g-nav > ul {
  display: flex !important;
  flex-wrap: nowrap !important;
}

#navbar .g-nav > ul > li {
  float: none !important;
  width: auto !important;
  flex: 1 1 0 !important;
}

/* スクロール時のメニュー項目はすべて1行に収める。「Maintenance & Support」
   だけが長すぎて2行に折り返り、上の行と重なってしまっていた項目 -
   header.php/header_toppage.php側で「Maintenance & 」の部分を
   <span class="nav-label-full">で囲み、スクロール時はそのspanを消して
   「Support」のみ（1行に収まる）を表示するようにしている。 */
body.sticky-header #navbar .g-nav > ul > li > a {
  white-space: nowrap !important;
}

body.sticky-header #navbar .g-nav > ul > li .nav-label-full {
  display: none !important;
}

/* 最後のメニュー項目には右側の閉じ罫線が付く（import.css側の
   ".nav-wrapper>nav ul>li:last-child"）。これは日本語版の5項目構成を
   閉じるためのものだが、英語版は4項目しかないため、何もない場所に
   余分な区切り線が浮いて見えてしまう。 */
#navbar .g-nav > ul > li:last-child {
  border-right: none;
}