@charset "utf-8";
/* ==========================================================================
/partner/ 簡易レスポンシブ（流体化）オーバーライド ― Redmine #34428 案B+
--------------------------------------------------------------------------
2017年制作・固定幅800pxの純レガシー構成に対し、レイアウトを作り直さずに
スマートフォン表示を整える上書きシート。
案B（横スクロール解消のみの最小上書き）に対し、案B+ では「横スクロールは
消えたが見た目が崩れている」状態を解消するため、以下を追加で整える:
・装飾用背景画像（800px基準で位置がズレ見切れる）の無効化
・ヘッダー（タイトル／リード画像）の float 解除と中央寄せ
・グローバルナビをタップしやすい縦積みボタンへ
・本文の過大な固定左右マージン(50〜85px)を圧縮し文字詰まりを解消
・詳細ページ(exshop/gp/gpvc/gaiheki/contest)の float 段組み・絶対配置の縦積み化
・フォーム(form/supplier)の固定幅要素(.law / h2.privacy / p.txt / textarea 等)流体化
各ページの では既存CSS（base.css 等）より前で読み込まれるため、
既存の固定幅・float 指定を確実に打ち消せるよう主要規則は !important 指定とする。
========================================================================== */
@media screen and (max-width: 820px) {
/* 0) 装飾背景画像の無効化（800px基準でズレ・見切れの原因）。背景色は維持 */
html { background-image: none !important; }
body { background-image: none !important; }
/* 1) コンテナの固定幅(800px)を解除し画面内に収める */
#container,
article#content {
width: auto !important;
max-width: 100% !important;
}
/* 2) 子要素が画面幅を超えないようにする安全網（横スクロール防止の要） */
#container * {
max-width: 100% !important;
}
/* 3) 画像を流体化（width/height 属性のゆがみ防止） */
#container img {
max-width: 100% !important;
height: auto !important;
}
/* 4) ヘッダー（タイトル＋リード）を float 解除し縦積み・中央寄せ */
.page-title {
height: auto !important;
padding: 12px 12px 8px !important;
background-image: none !important;
text-align: center;
}
.page-title_ttl,
.page-title_txt {
float: none !important;
margin: 8px 0 16px !important;
}
/* 5) グローバルナビをタップしやすい縦積みボタンへ */
.nav-menu {
margin: 0 8px 16px !important;
padding: 10px !important;
text-align: center;
}
.nav-menu_item {
float: none !important;
display: block;
margin: 0 0 12px 0 !important;
.nav-menu_logo {
padding: 13px 0!important;
}
}
.nav-menu_item--gp .nav-menu_logo,
.nav-menu_item--gaiheki .nav-menu_logo {
padding-top: 9px !important;
height: 70px !important;
}
.nav-menu_item--gaiheki {
margin-bottom: 0 !important;
}
.nav-menu_btn {
width: auto !important;
max-width: 320px;
margin: 0 auto !important;
}
/* 縦積み時に位置が破綻する吹き出し(::after)は非表示にする */
.nav-menu_item--exshop-active::after,
.nav-menu_item--gp-active::after,
.nav-menu_item--vc-active::after,
.nav-menu_item--gaiheki-active::after {
display: none !important;
}
/* 5-2) 色付きリンクボタンの色をボタン端まで届かせる（Redmine #34428 緑枠対策）
base.css の固定幅(exshop/gaiheki:240px, gp:118px+vc:120px)が、
流体化した .nav-menu_btn(最大320px)より狭いため右側に下地が見え、
「色が端まで届いていない」状態になる。リンクをボタン幅いっぱいに広げて解消する。 */
.nav-menu_link,
.nav-menu_link-item {
float: none !important;
width: 100% !important;
}
.nav-menu_item--exshop .nav-menu_link-item a,
.nav-menu_item--gaiheki .nav-menu_link-item a {
width: 100% !important;
box-sizing: border-box !important;
text-align: center;
}
/* ガーデンプラスは「提携店」「VC店」の2ボタン横並びのため半分ずつで全幅を埋める */
.nav-menu_item--gp .nav-menu_link-item {
float: left !important;
width: 50% !important;
}
.nav-menu_item--gp .nav-menu_link-item a,
.nav-menu_link-item--gp a,
.nav-menu_link-item--vc a {
width: 100% !important;
box-sizing: border-box !important;
text-align: center;
}
/* 5-3) exshop ロゴと直下リンクの重なり解消（Redmine #34428 note-100 案A）
note-70 の #container*{box-sizing:border-box}(:357-359) 化により、base.css:156-159 の
.nav-menu_item--exshop .nav-menu_logo{height:52px;padding-top:13px} がパディング込みの
ボーダーボックスとなり、コンテンツ領域が 52-13=39px に縮む。一方 #container img{height:auto}(:38-41)
でロゴ画像は本来比率の実寸 45px でレンダリングされるため、下辺から 6px はみ出し、直下の兄弟要素
.nav-menu_link と重なる（exshop のみ padding-top が突出して大きく発生。gp/gaiheki は現状収まる
ため対象外）。固定高さを撤廃し画像高＋パディングの実寸に箱を追従させて解消する。responsive.css は
base.css より前に読まれるため !important 必須。PC(820px超)は本メディアクエリ無効のため不変。 */
.nav-menu_item--exshop .nav-menu_logo {
height: auto !important;
}
/* 6) 本文テキストの過大な左右マージン(50px等)を圧縮し文字詰まりを解消 */
article#content p {
margin-left: 16px !important;
margin-right: 16px !important;
}
.m1 {
margin: 24px 12px 16px !important;
}
/* 7) トップ(top.css)の右420px 2カラムを1カラムへ */
section#exshop,
section#gp,
section#gpvc,
section#gaiheki {
margin: 0 12px 24px !important;
padding-bottom: 20px !important;
}
section#exshop div,
section#gp div,
section#gpvc div,
section#gaiheki div {
float: none !important;
width: auto !important;
}
section#exshop p,
section#gp p,
section#gpvc p,
section#gaiheki p {
margin-left: 0 !important;
margin-right: 0 !important;
}
article p#bnr_contest {
margin: 0 12px !important;
}
/* 7-2) トップ：応募ボタン(.btn)と直下の写真画像の間に余白を設ける（Redmine #34428 journal #631601 ①）
SP では section div の float が解除され「ボタン画像 → 写真画像」が縦積みで密着するため、
div 内最終子の p.btn に下マージンを付け間隔を確保する。top.css の section p 余白を確実に
上書きするため !important。PC(820px超)は本メディアクエリ無効のため影響なし。 */
section#exshop p.btn,
section#gp p.btn,
section#gpvc p.btn,
section#gaiheki p.btn {
margin-bottom: 32px !important;
}
/* 8) 詳細ページ(exshop/gp/gpvc/gaiheki/contest)の float 段組み・絶対配置を縦積み化 */
article#content div,
article#content section,
article#content table {
float: none !important;
width: auto !important;
}
/* 業務／ご登録までの流れ(ol.flow) */
ol.flow {
margin: 0 0 24px !important;
}
ol.flow li,
ol.flow li.construction {
width: auto !important;
}
ol.flow li .work {
float: none !important;
width: auto !important;
padding-right: 0 !important;
}
ol.flow li img {
float: none !important;
display: block;
margin: 0 auto 8px !important;
}
/* 8-2) ol.flow の下向き矢印背景を SP で左右中央へ（Redmine #34428 journal #631601 ②）
base.css L358-363 で background-position が 64px 100%（左64px固定）のため、SP で本文・
イラストが中央寄せになる中、矢印だけ左に取り残される。位置のみ中央へ上書き（URL・
no-repeat は base.css のまま）。base.css より前に読まれるため !important 必須。 */
ol.flow li div.responsible {
background-position: center bottom !important;
}
/* 8-3) ol.flow li.construction の下向き矢印背景を SP で左右中央へ（Redmine #34428 note-93）
base.css L382-386 で li.construction の background-position が 73px 100%（左73px固定）の
ため、8-2（div.responsible）と同様に、SP で本文・イラストが中央寄せになる中、施工フロー
(li.construction)の下向き矢印だけ左に取り残される。位置のみ中央へ上書きする（画像URL・
no-repeat は base.css のまま）。background そのものを none にしている
li.construction.start / li.start / div.end には画像が無いため本指定の影響は無い。
responsive.css は base.css より前に読まれるため !important 必須。PC(820px超)は本
メディアクエリ自体が無効のため不変。 */
ol.flow li.construction {
background-position: center bottom !important;
}
ul.notes li {
width: auto !important;
}
/* 各詳細ページの固定幅 dl / ol を流体化 */
section dl,
section#ex-merit dl,
section#ex-business ol {
width: auto !important;
margin-left: 12px !important;
margin-right: 12px !important;
padding-left: 1.2em !important;
}
ul.request {
margin-left: 1.4em !important;
}
/* 8-4) gpvc: 業務内容の注釈(ul.notes)とメリット(ul.merit)の過大な固定左マージンを圧縮
（Redmine #34428 note-107 案A / journal #632093）
gpvc.css の section#gp-business ul.notes{margin-left:52px} / ul.merit{margin-left:85px} は
PC固定幅(800px)前提の装飾インデント。SP流体化後もこの固定pxが残り、本文p(左16px)より
+36px / +69px 右へ寄り「右に寄りすぎ」状態になる。ペアの ul.request(:221-223) と同様に圧縮し
本文の左リズムに揃える。ul.notes は右も本文と対称化して左右の偏りを解消する。responsive.css は
gpvc.css より前に読まれるため !important 必須。PC(820px超)は本メディアクエリ無効のため不変。
対象2セレクタは gpvc 固有のため他ページへの波及なし。 */
section#gp-business ul.notes {
margin-left: 16px !important;
margin-right: 16px !important;
}
ul.merit {
margin-left: 1.4em !important;
}
/* 8-5) contest: 受賞作写真(ul.winner)の固定左マージンによる右寄り・float継続による
写真間の密着、および受賞コメント見出し(article h3)の過大な固定左右マージンを是正
（Redmine #34428 note-114 / journal #632201）
contest.css は PC固定幅(800px)前提で以下を敷く:
・ul.winner li{float:left} + li.main{margin-left:38px} / li.sub01{margin-left:84px}
・article h3{margin:2em 47px 1.2em}
SP流体化後もこれらの固定pxが残り、li.main / li.sub01 は本文(左16px)より大きく右へ寄り
（+22px / +68px）「右に寄りすぎ」状態になる。さらに float 継続のため li.sub01 と li.sub02 が
縦積みでも上下マージン無しに密着する。h3 も左右47pxで本文より内側に食い込む。
float を解除して縦積みにし、左右マージンを本文リズム(16px)へ揃え、li.sub02 に上マージンを
与えて写真間の間隔を確保、h3 の左右も16pxへ圧縮する。
ul.winner / li.main / li.sub01 / li.sub02 は contest 固有クラス、h3 は article#content 直下(>)で
contest のみ該当（他詳細ページの h3 は section 内に入れ子のため不該当）のため波及なし。
responsive.css は contest.css より前に読まれるため !important 必須。PC(820px超)は本
メディアクエリ無効のため不変。 */
ul.winner li {
float: none !important;
width: auto !important;
margin-left: 16px !important;
margin-right: 16px !important;
}
ul.winner li.sub02 {
margin-top: 16px !important;
}
article#content > h3 {
margin-left: 16px !important;
margin-right: 16px !important;
}
/* 8-6) gpvc: 求めるもの(ul.request)・メリット(ul.merit)の右余白確保とマーカー内側化
（Redmine #34428 journal #632660）
両リストは base.css のリセットで padding:0、SP では margin-left:1.4em(≈20px)のみのため、
list-style-position の初期値 outside では decimal 番号が li ボックスの外（左マージン領域）に
描画され、番号が画面左端にほぼ密着する。また margin-right:0 のまま本文が画面右端まで達する。
番号を inside 化して li ボックス内に収め、右余白を本文リズム(16px)に揃えて確保する。
list-style-position は li への直接指定のため、後読みの各ページCSSの ul への
list-style ショートハンド（outside リセット）に負けない。
ul.request は gp/exshop/gaiheki の同名リストにも適用され同一症状が同時に解消される
（ul.merit は gpvc 固有）。gp.css の ul.request{width:700px} が右余白を無効化するため
width:auto も併せて敷く。responsive.css は各ページCSSより前に読まれるため !important 必須。
PC(820px超)は本メディアクエリ自体が無効のため不変。 */
ul.request,
ul.merit {
width: auto !important;
margin-right: 16px !important;
}
ul.request li,
ul.merit li {
list-style-position: inside !important;
}
#application {
margin: 24px 12px 0 !important;
}
/* 詳細ページ(exshop/gp/gpvc/gaiheki)のタイトルロゴ・サイトリンクの絶対配置を解除
（Redmine #34428 note-79 案A）。
各詳細ページの .{page}-title .logo / .{page}-title-site-link は PC 固定幅(800px)前提で
position:absolute(top/right 指定)により h1.ttl-form の右上へ重ねて配置している。
モバイル流体化後はタイトル帯が縮むため、絶対配置のロゴが h1.ttl-form の画像に
重なって表示される（gaiheki で .ttl-form img と .logo img が重なる報告の主因）。
exshop と同様に通常フロー(static)へ戻して縦並びにし、重なりを解消する。
※gpvc は .gp-title クラスを共用するため gp 指定で同時に解消される。 */
article#content .exshop-title .logo,
article#content .exshop-title-site-link,
article#content .gp-title .logo,
article#content .gp-title-site-link,
article#content .gaiheki-title .logo,
article#content .gaiheki-title-site-link {
position: static !important;
display: inline-block;
margin-bottom: 8px !important;
}
/* タイトル帯の色を画面端まで届かせる（Redmine #34428 緑枠対策 / 案A）。
各ページの h1.ttl-form は「下地色 + 下端の装飾画像(bg_*.png)」で構成され、
装飾画像は800px・高さ64px前後を前提とするため、モバイルでは引き伸ばし／
本文への被りで上部が崩れる（form 上部の崩れ報告の主因）。
そこで装飾画像のみ無効化し、background-color だけを画面端まで均一に敷くことで
「色が端まで届かない」状態と form 上部の崩れを同時に解消する。
下地色は background-color として残るため各ページの色は保持される
（exshop=#FFE3E3 / gp・gpvc=#D8ECB0 / gaiheki=#fff0f7 / form・supplier=#F0F0F0）。 */
h1.ttl-form {
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 16px !important;
padding: 16px 12px !important;
box-sizing: border-box !important;
background-image: none !important;
}
/* ページ内アンカー(絶対配置)を通常フローへ */
ul.page-menu {
position: static !important;
top: auto !important;
left: auto !important;
margin: 8px 12px !important;
}
ul.page-menu li {
float: none !important;
display: inline-block;
margin: 0 12px 6px 0 !important;
}
/* 9) 画面外固定要素の手当て（base.css の 800px 右マージン等） */
p#pagetop {
margin-left: 0 !important;
right: 12px;
}
footer small {
position: static !important;
width: auto !important;
padding: 16px !important;
}
/* 10) フォーム(form/supplier 共通 table#form)を縦積み化＋固定幅要素を流体化 */
table#form,
table#form tbody,
table#form tr,
table#form th,
table#form td {
display: block !important;
width: auto !important;
}
table#form th {
border-bottom: 0 !important;
}
table#form td input[type="text"],
table#form td input:not([type]),
table#form td select,
table#form textarea {
width: 100% !important;
box-sizing: border-box;
}
textarea.content-another {
width: 100% !important;
box-sizing: border-box;
}
/* 10-2) 分割入力欄(郵便番号・電話番号・FAX番号・携帯番号)の横並び維持
（Redmine #34428 note-123 案A / 直前コメント「縦並びになるので横並びにしたい」）
直上 (:339-345) の table#form td input:not([type]){width:100% !important} は、
会社名・氏名・住所・メール等「1セル=1入力欄」を画面幅いっぱいに広げる目的の規則。
ところが郵便番号(zip_1/zip_2)・電話番号(tel_1〜3)・FAX番号(fax_1〜3)・携帯番号(tel2_1〜3)
のように 1 セル内へ複数の入力欄をハイフン区切りで並べるフィールドまで 100% 幅になり、
各入力欄が 1 行を占有して縦積み表示になってしまう（form / supplier 共通の指摘）。
これら分割欄のクラス(.content-zip1 / .content-zip2 / .content-s)のみ 100% 指定を打ち消し、
inline-block ＋ 比率幅で 1 行に収める。max-width は PC 実寸(zip1:50 / zip2:70 / s:100px)を
上限とし、狭幅では比率で縮小して 320px 級の端末でも改行させず横並びを保つ。
本ブロックは直上の section 10 規則より後方に置き、同詳細度・!important 同士で
ソース順により確実に上書きする。type 属性を持たない入力欄のみが対象で、他の
単独入力欄(content-l / content-m 等)は :not([type]) 規則のまま 100% 幅を維持する。
PC(820px超)は本メディアクエリ自体が無効のため従来表示のまま不変。 */
table#form td input.content-zip1,
table#form td input.content-zip2,
table#form td input.content-s {
display: inline-block !important;
box-sizing: border-box !important;
vertical-align: middle;
}
table#form td input.content-s {
width: 28% !important;
max-width: 100px !important;
}
table#form td input.content-zip1 {
width: 30% !important;
max-width: 50px !important;
}
table#form td input.content-zip2 {
width: 38% !important;
max-width: 70px !important;
}
/* 10-3) チェックボックス／ラジオのラベル固定幅を SP で content 幅へ緩和
（Redmine #34428 note-130 案A / 直前コメント「table#form td label で崩れが発生します」）
form.css:66-70 は table#form td label{display:inline-block; width:120px}、
supplier.css:132-137 は同 label{display:inline-block; width:125px; font-size:12px} と、
PC 固定幅(800px)でチェックボックス群を等幅で桝目状に揃えるための固定幅を敷いている。
section 10(:328-335) で td が display:block・全幅化した SP では、この 120/125px 固定幅が
残るため「チェックボックス＋120/125px ラベル」の組が狭い td 内で 2 個ほどで折り返り、
直後の
（form の item/cad 群）や float:left の （supplier の item 群）と競合して
2個→1個…とラガーな不揃いの段組みになり、ラベル列が崩れる（form / supplier 共通の指摘）。
ラベル幅を content 幅(auto)へ戻し、組同士の間隔を margin-right で確保して自然な詰め込み・
改行に委ねる。各組はチェックボックスとラベルの間に空白文字が無い（例: