/*------------------------------------*/ /*---------- サイト共通定義 ----------*/ /*------------------------------------*/ @charset "utf-8"; body { font-family:"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; font-size: 14px; color: #333; background-color:#fff; /* #2485 以前は min-width:1150px で、769〜1149px(タブレット縦・小さめの ノートPC)では本文が縮まずページ全体が横スクロールしていた。 下限を外し、本文(.container)の max-width に収まる範囲で縮ませる。 768px以下のSPレイアウトは従来どおり別のメディアクエリが受け持つ。 */ min-width: 0; position:relative; } textarea, input{ font-family:"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } @media screen and (max-width: 899px){ body { min-width: initial; font-size: 15px; } } /** デバイス切替 **/ .sp{ display: none; } .pc{ display: block; } @media screen and (max-width: 899px){ .sp{ display: block; } .pc{ display: none; } } /** material symbols **/ .material-symbols-outlined{ font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48 } /* リンクの基底色。Bootstrap 既定の青(#428bca)が残っており、 緑基調のサイトに彩度の高い青が点在していた。実際に文字として 見えていたのは「引取詳細」「評価点基準表はこちら」 「陸送サービスについて」等の本文中リンクで、他は画像リンク。 ブランド側の濃い緑に寄せる。(#2460) */ a { color: #2f7d20; text-decoration: none; word-break: break-all; outline: none; } a:focus, *:focus { outline:none; } /* キーボード操作時だけフォーカスを見せる (#2460) 上の `*:focus{outline:none}` がサイト全体のフォーカスリングを消しており、 Tab を14回押しても現在地が一度も見えない状態だった (トップ・一覧・会員情報・詳細の4ページで実測)。 :focus-visible はキーボード操作時のみ効くので、 マウスでクリックしたときの見た目は今までと変わらない。 詳細ページ(detail-common.css)には既に同じ形の指定があり、それに揃える。 輪郭は要素から 3px 離す。緑のボタンに緑の輪郭を密着させると 同系色で沈んで見えないが、間に地の色(白)が挟まると分離して見える。 */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--c-green-dark); outline-offset: 3px; border-radius: 2px; } ol{ list-style: none; } input, select { -webkit-appearance: none; appearance: none; color: #333; } input:-ms-input-placeholder { color: #888888; } textarea:-ms-input-placeholder { color: #888888; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; } h2{ font-size : 25px; } img{ max-width: 100%; width: auto; height: auto; } table{ border-collapse: collapse; } table th{ font-weight: normal; } table { border-collapse: collapse; border-spacing:0; width: 100%; } /* ______________________________________________________ radio スタイル */ input[type='radio'], input[type='checkbox']{ -webkit-appearance: auto; appearance: auto; } .radio{ padding:0; margin:0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .radio_label{ width: 50%; } address,em{ font-style: normal; } a img:hover{ opacity:0.7; } .clearfix:before, .clearfix:after { display: table; content: " " } .clearfix:after { clear:both } /*------------------------------------*/ /*---------- CSS指定クラス化 ---------*/ /*------------------------------------*/ .align-center{ text-align : center; } .align-right{ text-align : right; } .align-left{ text-align : left; } .blue{ color : blue; } .red{ color : red; } .text-danger{ margin-left: 10px; text-align: left; color: #b94a48; } .txt-red{ color: #f00; } .txt-bold{ font-weight: bold; } .bold{ font-weight: bold; } .strike{ text-decoration: line-through; text-decoration-color: #f00; } /* フレックスボックス */ .flex-box-col{ display:-webkit-box; display:-ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } /* 見出しスタイル */ .main_tt{ font-size: 24px; border-bottom: 2px solid #efefef; margin-bottom: 20px; padding: 0 0 5px 0; } .ttl-01{ font-weight: bold; color: #ffffff; text-align: center; font-size: 20px; padding:10px 20px; margin:0px auto 10px; background: rgb(97,173,53); } .ttl-02{ display: inline-block; margin-bottom: 8px; font-size: 26px; color: #e70012; padding-left: 40px; background: url(../img/midashi_bg.png) no-repeat left; } .ttl-03{ font-size: 20px; color: var(--c-green-dark); text-align: center; margin-bottom: 10px; } .ttl-04{ width: 100%; margin-bottom: 15px; /* 白文字を載せる面は濃い緑 (#2460) */ background: var(--c-green-dark); font-size: 18px; font-weight: bold; color: #ffffff; padding: 8px 10px; } .ttl-05{ font-size: 1.4rem; } .ttl-06{ font-size: 18px; font-weight: bold; border-left: solid 4px #b71c25; padding: 2px 0px 0px 5px; margin-bottom: 8px; } .ttl-07 { font-size: 18px; } .ttl-08 { margin-bottom: 10px; background: #e2e2e2; font-size: 16px; padding: 8px 10px; } @media screen and (max-width: 899px){ .main_tt{ font-size: 18px; } .ttl-02{ font-size: 18px; padding-left: 30px; background-size: auto 23px; } .ttl-05{ font-size: 1rem; } } .svg-icon-arrow{ position: relative; } .svg-icon-arrow:after{ content: ''; display: block; width: 20px; height: 20px; background: url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%223.404%2C2.051%208.354%2C7%203.404%2C11.95%205.525%2C14.07%2012.596%2C7%205.525%2C-0.071%20%22%2F%3E%3C%2Fsvg%3E); background-color: #D1D1D1; border-radius: 20px; background-position: center; background-repeat: no-repeat; position: absolute; right: 0; top: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); } /* テーブル */ .table-default{ border:solid 1px #dddddd; } .table-default tr:not(:last-child){ border-bottom:solid 1px #dddddd; } .table-default th{ border-right: solid 1px #dddddd; width: 250px; } .table-default th, .table-default td{ padding:10px; } @media screen and (max-width: 899px){ .table-default tr{ display: flex; display: flex; flex-direction: column; padding:10px; } .table-default th, .table-default td{ padding:0; } .table-default th{ font-weight: bold; border:none; text-align: left; } } .table-noborder{ max-width: 600px; margin: 0 auto; } /* _________________________________________ 背景 */ .head_bg{ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 95%, rgba(242,242,242,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(95%,rgba(255,255,255,1)), color-stop(100%,rgba(242,242,242,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 95%,rgba(242,242,242,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 95%,rgba(242,242,242,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 95%,rgba(242,242,242,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 95%,rgba(242,242,242,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */ } .gradient-w-to-g{ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(233,233,233,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(233,233,233,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(233,233,233,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(233,233,233,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(233,233,233,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(233,233,233,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9e9',GradientType=0 ); /* IE6-9 */ } .gradient-w-to-g:hover{ background: rgb(233,233,233); /* Old browsers */ background: -moz-linear-gradient(top, rgba(233,233,233,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(233,233,233,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(233,233,233,1) 0%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } .grandient-green{ background: rgb(151,194,10); /* Old browsers */ background: -moz-linear-gradient(top, rgba(151,194,10,1) 0%, rgba(122,176,4,1) 98%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(151,194,10,1)), color-stop(98%,rgba(122,176,4,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(151,194,10,1) 0%,rgba(122,176,4,1) 98%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(151,194,10,1) 0%,rgba(122,176,4,1) 98%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(151,194,10,1) 0%,rgba(122,176,4,1) 98%); /* IE10+ */ background: linear-gradient(to bottom, rgba(151,194,10,1) 0%,rgba(122,176,4,1) 98%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97c20a', endColorstr='#7ab004',GradientType=0 ); /* IE6-9 */ color: #fff; } .grandient-green:hover { background: rgb(122,176,4); /* Old browsers */ background: -moz-linear-gradient(top, rgba(122,176,4,1) 0%, rgba(151,194,10,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,176,4,1)), color-stop(100%,rgba(151,194,10,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(122,176,4,1) 0%,rgba(151,194,10,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(122,176,4,1) 0%,rgba(151,194,10,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(122,176,4,1) 0%,rgba(151,194,10,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(122,176,4,1) 0%,rgba(151,194,10,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ab004', endColorstr='#97c20a',GradientType=0 ); /* IE6-9 */ } .grandient-pink{ background: rgb(241,125,123); /* Old browsers */ background: -moz-linear-gradient(top, rgba(241,125,123,1) 0%, rgba(232,82,81,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,125,123,1)), color-stop(100%,rgba(232,82,81,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(241,125,123,1) 0%,rgba(232,82,81,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(241,125,123,1) 0%,rgba(232,82,81,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(241,125,123,1) 0%,rgba(232,82,81,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(241,125,123,1) 0%,rgba(232,82,81,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f17d7b', endColorstr='#e85251',GradientType=0 ); /* IE6-9 */ } .grandient-pink:hover{ background: rgb(232,82,81); /* Old browsers */ background: -moz-linear-gradient(top, rgba(232,82,81,1) 16%, rgba(241,125,123,1) 99%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,rgba(232,82,81,1)), color-stop(99%,rgba(241,125,123,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(232,82,81,1) 16%,rgba(241,125,123,1) 99%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(232,82,81,1) 16%,rgba(241,125,123,1) 99%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(232,82,81,1) 16%,rgba(241,125,123,1) 99%); /* IE10+ */ background: linear-gradient(to bottom, rgba(232,82,81,1) 16%,rgba(241,125,123,1) 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e85251', endColorstr='#f17d7b',GradientType=0 ); /* IE6-9 */ } .grandient-orange{ background: rgb(255,192,0); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,192,0,1) 0%, rgba(255,162,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,192,0,1)), color-stop(100%,rgba(255,162,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc000', endColorstr='#ffa200',GradientType=0 ); /* IE6-9 */ } /* _________________________________________ ボタン*/ .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select:none; box-sizing: border-box; } .btn:hover{ cursor: pointer; } /* Bootstrap 3 の擬似グラデ影(上辺の白いハイライト + 下の濃い影)は外す。 立体的な「押しボタン」の表現は今の画面の中で古く見え、 カードの薄い罫線や淡い影と語彙が合わなかった。影は --sh-1/--sh-2 の2段だけにする。 (#2460) */ .btn-01, .btn-02, .btn-03{ display: inline-block; width: calc(100% - 20px); padding: 15px 10px; box-sizing: border-box; font-weight: normal; color: #ffffff; border-radius: var(--r-sm); text-align: center; } .btn-01{ background: #556fb5; } .btn-01:hover { background: #465c99; } .btn-02{ background: #fe9201; } .btn-02:hover { background: #d50000; } .btn-03{ display: block; max-width: 380px; margin: 0 auto; font-size: 24px; color: #ffffff; background: #f38900; font-weight: bold; } .btn-03:hover{ opacity: 0.7; } /* 主要CTAの基準に合わせる。20px はサイトの他のボタンに無い大きさだった (#2460) */ .ad_btn{ font-size: 16px; font-weight: bold; max-width: 235px; width: 100%; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { color: #333; border-color: #adadad; } /* #2460 旧デザインの名残を落とす。 文字に影(text-shadow)を落とす表現と、23px という他に無い文字サイズ、 枠線の黄緑 #7da708 がサイトの語彙から外れていた。 主要CTAの基準(高さ44px前後・16px太字・濃い緑)に寄せる。 */ .btn_a{ max-width: 265px; width: 100%; border: 1px solid transparent; color: #fff; font-size: 16px; font-weight: bold; } .btn_b{ max-width: 215px; width: 100%; font-size: 14px; margin-left: 10px; } .btn_b:hover { background: #fafafa; } .btn_c{ max-width: 265px; width: 100%; border: 1px solid #ba7a00; color: #fff; font-size: 23px; font-weight: bold; text-shadow: 1px 1px 0px #ba7a00; } .btn_c:hover{ color: #fff; } /* 白文字を載せる面なので濃い側の緑 (#61ad35 はコントラスト 2.79)。 枠線の #79AF04FF もサイトに無い黄緑だった。 hover で明るくなる(押せなくなったように見える)のもやめ、 他の緑ボタンと同じく暗くする。 (#2460) */ .btn-success{ color: #fff; border: 1px solid transparent; background: var(--c-green-dark); } .btn-success:hover{ background: #26661a; } .btn-danger{ color: #fff; background-color: #df3950; border-color: #eb637c; } .btn-danger:hover{ background-color: #eb637c; } .btn-receipts{ border: 1px solid #ce3c3a; font-size: 12px; color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .panel-body .btn-default{ padding: 10px 20px 10px; background: rgb(108,151,193); /* Old browsers */ background: -moz-linear-gradient(top, rgb(201, 201, 201) 0%, rgb(209, 209, 209) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(209, 209, 209)), color-stop(100%,rgb(209, 209, 209))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgb(201, 201, 201) 0%,rgb(209, 209, 209) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgb(201, 201, 201) 0%,rgb(209, 209, 209) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgb(201, 201, 201) 0%,rgb(209, 209, 209) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgb(201, 201, 201) 0%,rgb(209, 209, 209) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccc', endColorstr='#ccc',GradientType=0 ); /* IE6-9 */ } #search_form_button{ font-weight: normal; padding: 8px 20px; background: #eeeeee; border: 2px solid #535353; border-radius: 20px; } /* #2460 Bootstrap の `.btn:focus { outline: 5px auto -webkit-focus-ring-color }` は外した。 ブラウザ既定の青い輪郭が出るうえ、詳細度が高くてサイト共通の :focus-visible(濃い緑2px)に勝ってしまい、入札ボタンなどだけ フォーカスの見え方が違っていた。 マウスクリックでも出てしまうのも :focus-visible に揃えたい理由。 */ .btn:active, .btn.active { background-image: none; outline: 0; /* 押し込みの内側シャドウも Bootstrap 由来。影は --sh-1/--sh-2 の2段に絞る */ } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; opacity: .65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow:none } .btn-default { color: #333; background-color: #fff; border-color:#ccc } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { color: #333; background-color: #ebebeb; border-color:#adadad } .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { background-image:none } .btn-default.disabled, .btn-default[disabled], fieldset[d0isabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: #fff; border-color:#ccc } .btn-group-xs > .btn { padding: 5px 10px; padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius:3px } .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius:3px } .btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius:6px } .btn-green { color: #fff; background-color: #5cb85c; background-image: linear-gradient(to bottom, #5cb85c 0, #419641 100%); width: 100%; max-width: 140px; text-align: center; border: 1px solid transparent; text-shadow: 0 -1px rgb(0 0 0 / 20%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 8%); } .btn-green:hover { background-color: #419641; } .panel-body .btn-primary{ padding: 10px 20px 10px; background: rgb(108,151,193); /* Old browsers */ background: -moz-linear-gradient(top, rgba(108,151,193,1) 0%, rgba(65,109,161,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(108,151,193,1)), color-stop(100%,rgba(65,109,161,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(108,151,193,1) 0%,rgba(65,109,161,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(108,151,193,1) 0%,rgba(65,109,161,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(108,151,193,1) 0%,rgba(65,109,161,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(108,151,193,1) 0%,rgba(65,109,161,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c97c1', endColorstr='#416da1',GradientType=0 ); /* IE6-9 */ } .panel-body .btn-primary:hover{ text-decoration:none; background: rgb(65,109,161); /* Old browsers */ background: -moz-linear-gradient(top, rgba(65,109,161,1) 0%, rgba(108,151,193,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,109,161,1)), color-stop(100%,rgba(108,151,193,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(65,109,161,1) 0%,rgba(108,151,193,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(65,109,161,1) 0%,rgba(108,151,193,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(65,109,161,1) 0%,rgba(108,151,193,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(65,109,161,1) 0%,rgba(108,151,193,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#416da1', endColorstr='#6c97c1',GradientType=0 ); /* IE6-9 */ } @media screen and (max-width: 899px){ .btn-03{ font-size: 18px; padding:10px; } .ttl-04{ font-size: initial; padding: 5px 10px; text-align: center; } .btn_c{ margin-bottom: 10px; max-width: 100%; } } /* アクション系 */ .col-md-5 { width: 41.66666666666667%; } .col-md-2,.col-xs-2 { width: 16.666666666666664%; } .col-xs-5 { width:41.66666666666667% } .col-md-5 { width: 41.66666666666667%; } .col-md-12 { width: 100%; } .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .fade.in { opacity: 1; } .collapse { position: relative; height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease; } .collapse.in { height: auto; } .fade { opacity: 0; -webkit-transition: opacity .15s linear; transition:opacity .15s linear } .fade.in { opacity:1 } .collapse { display:none } .collapse.in { display:block } .collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition: height .35s ease; transition:height .35s ease } .close { float: right; font-size: 20px; font-weight: bold; line-height: 20px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); } .close:hover, .close:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); } button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } /* _________________________________________ ボタン　検索フォーム 検索ボタン・条件クリアボタンエリア　*/ .form-control { display: block; width: 100%; box-sizing: border-box; padding: 10px 15px 10px 4px; background-color: #fff; /* 枠線はサイトの基準に揃える。Bootstrap 既定の #ccc のままだった (#2460) */ border: 1px solid var(--c-border); border-radius: var(--r-sm); /* #2460 Bootstrap 由来の内側の影は外した。 入力欄がへこんで見える表現は今の平坦なデザインと語彙が合わず、 影の種類も増やしていた(全入力欄で10種類の内訳を占めていた)。 */ -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s } .btnArea.flex-box-col{ justify-content: center; align-items: stretch; } .btnArea.flex-box-col .btn_b{ display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 899px){ .btnArea.flex-box-col{ flex-direction: column; } .btnArea.flex-box-col .btn_a, .btnArea.flex-box-col .btn_b{ width: 100%; max-width: 100%; margin:0; } .btnArea.flex-box-col .btn_a{ margin-bottom: 15px; } } /* _________________________________________ ボタン　グループ*/ .btn-group, .btn-group-vertical { position: relative; display: inline-block; vertical-align:middle } .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius:3px } .btn-toolbar > .btn + .btn, .btn-toolbar > .btn-group + .btn, .btn-toolbar > .btn + .btn-group, .btn-toolbar > .btn-group + .btn-group { margin-left:5px } .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius:0; border-right:none; border-left: none; } .btn-group > .btn:first-child { margin-left:0 } .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius:0 } .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius:0 } .btn-group > .btn-group { float:left } .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius:0 } .dropup .btn-default .caret { border-bottom-color:#333 } .btn-group-justified { display: table; width: 100%; border-collapse: separate; table-layout:fixed; margin-bottom: 20px; } .btn-group-justified .btn { display: table-cell; width: 1% } @media screen and (max-width: 899px){ .btn-group-lg > .btn{ padding: 6px 2px; font-size: 12px; text-align: center; white-space: initial; } } /* _________________________________________ カラム*/ .col-xs-1 { width:8.333333333333332% } .col-xs-2 { width:16.666666666666664% } .col-xs-3 { width:25% } .col-xs-4 { width:33.33333333333333% } .col-xs-5 { width:41.66666666666667% } .col-xs-6 { width:50% } .col-xs-7 { width:58.333333333333336% } .col-xs-8 { width:66.66666666666666% } .col-xs-9 { width:75% } .col-xs-10 { width:83.33333333333334% } .col-xs-11 { width:91.66666666666666% } .col-xs-12 { width:100% } /* _________________________________________ フォーム*/ .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align:middle } .form-inline .form-control { display:inline-block } .form-inline .radio, .form-inline .checkbox { display: inline-block; padding-left: 0; margin-top: 0; margin-bottom: 0 } .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: none; margin-left:0 } /* _________________________________________ アラート*/ .alert h4 { margin-top: 0; color:inherit } .alert .alert-link { font-weight:bold } .alert > p, .alert > ul { margin-bottom:0 } .alert > p + p { margin-top:5px } .alert-dismissable { padding-right:35px } .alert-dismissable .close { position: relative; top: -2px; right: -21px; color:inherit } /* #2460 お知らせ・警告の配色を4段階に揃える。 Bootstrap 2.x の配色がそのまま残っており、文字が地色に近く読みにくかった (警告の #c09853 は背景 #fcf8e3 に対してコントラスト 2.6 しかない)。 文字は本文と同じ濃さにし、種類は左の色帯と地色で示す。 色は 危険=赤 / 警告=橙 / 案内=緑 の3つだけ。 (info は success と同じ「案内」なので同じ見た目にする) */ /* Blade は `×` のあとに本文のテキストノードを置く。 テキストノードは flex アイテムにできず扱いづらいので、 ここは flex ではなく float で×を右に逃がす。 */ .alert{ padding: 13px 15px; margin-bottom: 19px; border: 1px solid transparent; border-left-width: 4px; border-radius: var(--r-md); color: var(--c-text); font-size: 14px; line-height: 1.6; text-align: left; } .alert::after{ content: ''; display: block; clear: both; } .alert .close{ float: right; margin-left: 12px; /* --c-text-weak(#757575) は淡い地色の上で 4.25 と基準に届かない (#2460) */ color: var(--c-text-sub); font-size: 18px; line-height: 1.4; text-decoration: none; } .alert .close:hover{ color: var(--c-text); } .alert-success, .alert-info { background-color: var(--c-info-bg); border-color: var(--c-info-line); border-left-color: var(--c-green); } .alert-success .alert-link, .alert-info .alert-link { color: var(--c-green-dark); } .alert-warning { background-color: var(--c-warn-bg); border-color: var(--c-warn-line); border-left-color: #e8a33d; } .alert-warning .alert-link { color: var(--c-hover-text); } .alert-danger { background-color: var(--c-danger-bg); border-color: var(--c-danger-line); border-left-color: var(--c-danger); } .alert-danger .alert-link { color: var(--c-danger); } .has-warning .help-block, .has-warning .control-label { color:#c09853 } .has-warning .form-control { border-color: #c09853; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075) } .has-warning .form-control:focus { border-color: #a47e3c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e } .has-warning .input-group-addon { color: #c09853; background-color: #fcf8e3; border-color:#c09853 } .has-error .help-block, .has-error .control-label { color:#b94a48 } .has-error .form-control { border-color: #b94a48; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075) } .has-error .form-control:focus { border-color: #953b39; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392 } .has-error .input-group-addon { color: #b94a48; background-color: #f2dede; border-color:#b94a48 } .has-success .help-block, .has-success .control-label { color:#468847 } .has-success .form-control { border-color: #468847; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075) } .has-success .form-control:focus { border-color: #356635; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b } .has-success .input-group-addon { color: #468847; background-color: #dff0d8; border-color:#468847 } /*--bs継承*/ .ime-mode-inactive { ime-mode: inactive; } table.view{ margin-bottom : 10px; border : 1px solid #E6E6FA; } table.view > tr{ border : 1px solid #E6E6FA; } .view_title{ background-color : #DDEBF7; border : 1px solid #000000; padding-top : 5px; padding-bottom : 5px; } .view_value{ border : 1px solid #000000; padding-top : 5px; padding-bottom : 5px; } .col-xs-nopadding{ padding-left :0; padding-right :0; } div.pagination_box{ text-align : center; } .container{ width: calc(100% - 20px); margin: 0 auto; max-width: 1150px; box-sizing: border-box; } .narrow{ max-width: 976px; margin: 0 auto; } .bk_ulColor{ height:78px; background:#efefef; width:100%; } .well{ padding : 15px 20px; } .ime-disabled { ime-mode : disabled; } div.sellout { padding-top: 20px; } .hr_green{ clear:both; width:100%; height:2px; background:#66CC00; margin-bottom:0.5em; } p.aori{ color:#ff0000; font-weight:bold; text-align:right; margin-bottom:0.3em; } p.aori-small { font-size: 85%; color:#ff0000; text-align:right; margin-bottom:0.3em; } p.scrap_caution { color: #ff0000; font-weight: bold; text-align: left; margin-bottom: 0.3em; } .index_title{ font-size:17px; font-weight:bold; color:#E89A3C; border-left:3px solid #E89A3C; text-indent: 0.5em } .nav:before, .nav:after { display: table; content: " " } .nav:after { clear:both } .nav:before, .nav:after { display: table; content: " " } .nav:after { clear:both } .nav > li { position: relative; display:block } .nav > li > a { position: relative; display: block; padding:10px 15px } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color:#eee } .nav > li.disabled > a { color:#999 } .nav > li.disabled > a:hover, .nav > li.disabled > a:focus { color: #999; text-decoration: none; cursor: not-allowed; background-color:transparent } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #eee; border-color:#428bca } .nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color:#e5e5e5 } .nav > li > a > img { max-width:none } form > button.btn_logout{ margin-top:5px; color:#ffffff; font-weight:bold; background:#d2d5bd; } table > tbody > tr > td.document_title { padding: 5px; } .top_button a p.title{ font-size : 1.0em; font-weight : bold; text-align : left; line-height : 2; border-bottom : 1px dashed #CCCCCC; padding-left : 10px; } .top_button a p.content{ font-size : .8em; text-align : left; line-height : 1.5; padding-left : 10px; width : 100%; } .selectwidthauto{ width:auto; } p.contact_tel{ margin-top : 5px; margin-bottom : 0; font-size : 25px; } p.contact_mail{ margin-top : 0; line-height : 2.5; } /* _________________________________________ -new-ご注意点*/ .foot_text { width: 100%; margin: 55px auto 0; padding: 55px 0; background: #61ad35; } .foot_text .foot_text-inner { max-width: 976px; margin: 0 auto; padding: 22px 50px; box-sizing: border-box; background: #ffffff; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; } .foot_text .foot_text-inner h2 { display: inline-block; margin: 0 auto 19px; padding: 0 0 3px 0; font-size: 19px; border-bottom: 2px solid #000000; } .foot_text .foot_text-inner ul { font-size: 14px; text-align: left; } .foot_text .foot_text-inner ul > li { line-height: 1.3; position: relative; padding-left: 18px; } .foot_text .foot_text-inner ul > li:not(:last-child){ margin-bottom: 14px; } .foot_text .foot_text-inner ul > li::before { content: " "; display: block; width: 14px; height: 14px; background: #000000; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 0; left: 0; } @media screen and (max-width: 899px){ .foot_text { margin: 25px auto 0; padding: 25px 0; } .foot_text .foot_text-inner { width: 95%; padding: 20px; } .foot_text .foot_text-inner h2 { display: inline-block; margin: 0 auto 15px; font-size: 14px; } .foot_text .foot_text-inner ul { font-size: 12px; text-align: left; } .foot_text .foot_text-inner ul > li { font-size: 1.2em; } } body > .navbar{ margin-bottom:0px; background:#fff; height:67px; } .navbar-nav>li>h4{ padding : 0 0 0 10px; margin : 15px 10px 15px 15px; border-left : 2px solid #E83423; color : #E83423; } .content_tt{ font-size:16px; padding:10px; background:#ececec; border-bottom:1px solid #c6c6c6; margin-bottom:15px; } .content_tt_s{ font-size:14px; } /* #2415 終了車両一覧の表示条件の注記 (件数の右横) */ .content_tt_note{ font-size:13px; color:#666; margin-left:12px; } .bt_text{ font-size:13px; margin-bottom:2px; } .nav > li > a:hover{ background:#fafafa; } /****************訂正ボックス*****************/ .teisei_wrap{ margin-bottom:20px; border:1px solid #e0e3e3; padding:10px; } .teisei_tt{ font-size:16px; font-weight:bold; color:#e60c16; text-align:left; margin:0px 0px 10px 0px; } .teisei_box{/* width:1120px; padding:15px 15px 25px 15px; */ font-size:14px;/* border:1px solid #e0e3e3; */ max-height: 120px; overflow-y: scroll; } @media screen and (max-width: 899px){ .teisei_box{ font-size: 12px; max-height: 100px; } } /****************訂正ボックス*****************/ /*********************************************** ログイン **********************************************/ .login_wrap{ position:relative; width:100%;/* min-height: 300px; */ } .alert-warning{ width:100%; } .no_login .alert{ display:none; } .login_wrap p{ font-size: 35px; font-weight: bold; color:#ee0000; text-shadow: #ffffff 1px 1px 0px, #ffffff -1px 1px 0px, #ffffff 1px -1px 0px, #ffffff -1px -1px 0px; } #customer_login{ width:1120px; height:500px; background:url('../img/top_bk01.jpg') 0px 0px no-repeat; overflow:hidden; margin: 0px auto 22px; } #login_inner_box p{ width:296px; font-size:15px; line-height: 1; margin:0px auto 0px; padding:0px; text-align: center; } #login_inner_box p a{ color:#ff0000; text-decoration:underline; } #login_inner_box .col-xs-2{ float: none; } #login_inner_box dd{ line-height:1; margin-bottom: 15px; } #login_inner_box .submit{ text-align: center; margin-bottom: 10px; } .login_wrap .well{ min-height: 20px; padding: 5px 20px; margin-bottom: 0px; background-color:rgba(0, 0, 0, 0); border:none; border-radius:none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0) inset; } .login_wrap table{ width:531px; margin-bottom:18px; } .login_wrap .control-label{ width:17px;; padding:0px; margin:0; } .login_wrap tr{ border:1px solid #d9d9d9; } .login_wrap tr th{ height:77px; background:#eaeaea; width:154px; text-align:center; font-size:18px; font-weight:bold; } .login_wrap tr td{ width:375px; background:#fff; } .login_wrap .form-control{ font-size:1.2em; height:2.5em; border-radius: 5px; /* CSS3草案 */ -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } .login_wrap .login_btn:hover{ border:solid 1px #9E2C2C; text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); border:none; background: rgb(203,5,5); /* Old browsers */ background: -moz-linear-gradient(top, rgba(203,5,5,1) 0%, rgba(234,42,42,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,5,5,1)), color-stop(100%,rgba(234,42,42,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(203,5,5,1) 0%,rgba(234,42,42,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(203,5,5,1) 0%,rgba(234,42,42,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(203,5,5,1) 0%,rgba(234,42,42,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(203,5,5,1) 0%,rgba(234,42,42,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb0505', endColorstr='#ea2a2a',GradientType=0 ); /* IE6-9 */ } .form_left{ float: left; width:575px; font-size: 14px; margin-left: 25px; } .form_right{ float: right; width:475px; font-size:16px; margin-right:25px; } .form_left.new_trader_form{ float: left; width:760px; } .form_right.new_trader_form{ float: right; width:300px; } .inner_left{ float: left; width:400px; margin-right: 30px; margin-bottom: 10px; } .inner_right{ float: left; width:300px; } .login_faq_box{ padding-bottom: 5px; border-bottom:dotted 1px #cccccc; margin-bottom: 10px; font-size:1.2em; } .login_faq_box .login_q:before{ content:'Q'; color:#86B81B; margin-right: 5px; } .login_faq_box .login_a:before{ content:'A'; color:#D60077; margin-right: 5px; } .required_item{ float: right; font-size: 12px; color: #ffffff; background: #B71C25; padding: 4px 4px 2px; font-size: 11px; font-weight: normal; } #form_sub_title{ position:relative; width:11em; padding:5px 0px; } .ninni_item{ float: right; font-size:12px; color:#ffffff; background:#999999; padding:2px 3px; } .form_right textarea{ margin-bottom: 10px; } .error_msg{ color:#b71c25; font-size:12px; } .back_top_box{ max-width: 1120px; margin: 0 auto 20px; text-align: right; } .login_btn{ border:1px solid #BC1F07; background: rgb(253,48,10); background: -moz-linear-gradient(top, rgba(253,48,10,1) 0%, rgba(226,41,9,1) 100%); background: -webkit-linear-gradient(top, rgba(253,48,10,1) 0%,rgba(226,41,9,1) 100%); background: linear-gradient(to bottom, rgba(253,48,10,1) 0%,rgba(226,41,9,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd300a', endColorstr='#e22909',GradientType=0 ); } .login_btn:hover{ text-shadow:0px 0px 0px rgba(0, 0, 0, 0); background: rgb(226,41,9); background: -moz-linear-gradient(top, rgba(226,41,9,1) 0%, rgba(253,48,10,1) 100%); background: -webkit-linear-gradient(top, rgba(226,41,9,1) 0%,rgba(253,48,10,1) 100%); background: linear-gradient(to bottom, rgba(226,41,9,1) 0%,rgba(253,48,10,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e22909', endColorstr='#fd300a',GradientType=0 ); } .forgetPass_btn{ background: #106DB0; border-bottom: solid 2px #0B4066; box-shadow: inset 0 2px 0 rgb(255 255 255 / 20%), 0 2px 2px rgb(0 0 0 / 19%); } .forgetPass_btn:hover{ text-shadow:0px 0px 0px rgba(0, 0, 0, 0); background: rgb(14,87,140); background: -moz-linear-gradient(top, rgba(14,87,140,1) 0%, rgba(16,109,176,1) 100%); background: -webkit-linear-gradient(top, rgba(14,87,140,1) 0%,rgba(16,109,176,1) 100%); background: linear-gradient(to bottom, rgba(14,87,140,1) 0%,rgba(16,109,176,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e578c', endColorstr='#106db0',GradientType=0 ); } .kobutsusho_text { color: red; font-size: 15px; } #new_trader_button_box input[type='checkbox'] { transform: scale(1.2); cursor: pointer; } /* #2484 新規会員登録はサイト内のどこでも同じオレンジにする。 白文字を載せるので濃い側 (#f38900 は白文字でコントラスト2.50、 #c05600 なら4.59)。auctions.css を読まないページ (新規会員登録など) はここが効く */ .signup_btn{ background: #f07c00; border-bottom: solid 2px #a85000; border:solid 2px #f07c00; } .signup_btn:hover{ background:#d86e00; } .login_btn, .signup_btn, .forgetPass_btn{ width: 100%; max-width: 370px; font-weight: bold; font-size: 20px; -webkit-text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.4); text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.4); color:#ffffff; padding:5px 0px; border-bottom-width: 2px; box-shadow: inset 0 2px 0 rgb(255 255 255 / 20%), inset 0 -2px 0 rgb(0 0 0 / 5%); } /*********************************************** アバウトページ **********************************************/ .about_wrap_1{ position:relative; font-size:13px; color:#151515; } .about_wrap_1 p{ margin-top:20px; line-height:21px; } /*********************************************** 応札保証一覧ページ **********************************************/ .reserve_price_table{ margin:20px 0 50px; } .reserve_price a img:hover{ opacity:0.7; } .reserve_price_table tr th{ width:160px; background:#F6F6F6; height:64px; border:1px solid #ddd; text-align:center; } .reserve_price_table tr td{ width:440px; background:#fff; border:1px solid #ddd; padding-left:15px; } .reserve_table tr td{ font-size:15px; } .reserve_table tr .area_font{ font-size:12px; } .reserve_price_table tr td a{ margin-right:12px; } .area_top_link{ text-align:right; margin-bottom:20px; } .table_wrap{ width:1120px; } .scrapAuctions .table_wrap tr th{ border:1px solid #e4e4e4; /* #7f7f7f に白文字はコントラスト 4.00 で基準(4.5)に届かない (#2460) */ background:#6e6e6e; color:#fff; font-size:11px; height:40px; } .table_wrap tr th a{ color:#fff; text-decoration:underline; font-size:11px; } .table_wrap tr th a:hover{ text-decoration:none; } .table_wrap tr td{ border:1px solid #e4e4e4; height:74px; } .negotiations .btn-primary{ width:111px; height:36px; padding-top:9px; color:#322e25; border:1px solid #ffa200; text-shadow:1px 1px 0px #ffdd88; background: rgb(255,192,0); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,192,0,1) 0%, rgba(255,162,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,192,0,1)), color-stop(100%,rgba(255,162,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc000', endColorstr='#ffa200',GradientType=0 ); /* IE6-9 */ } .negotiations .btn-primary:hover{ background: rgb(255,162,0); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,162,0,1) 1%, rgba(255,192,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,162,0,1)), color-stop(100%,rgba(255,192,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,162,0,1) 1%,rgba(255,192,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,162,0,1) 1%,rgba(255,192,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,162,0,1) 1%,rgba(255,192,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,162,0,1) 1%,rgba(255,192,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa200', endColorstr='#ffc000',GradientType=0 ); /* IE6-9 */ } /* _________________________________________ リユース分*/ p.caution { padding: 0 0 0 15px; } .icon_td{ width:60px; } .icon_td span[class*="icon_"]{ display:inline-block; width:36px; color:#FFF; padding:2px 0; margin: 3px auto; text-align:center; } .icon_deadline{ color: #ffffff; background-color:#ff0000; display: inline-block; padding: 4px 3px 2px; font-size: 12px; } .icon_new_exhibit{ display: inline-block; padding: 4px 3px 2px; font-size: 12px; color: #ffffff; background-color:#ff0000; } .icon_popular{ display: inline-block; padding: 4px 3px 2px; font-size: 12px; color: #ffffff; background-color:#F39C12; } /* #2319 終了車両バッジ */ .icon_finished{ display: inline-block; padding: 4px 3px 2px; font-size: 12px; color: #ffffff; background-color:#7f8c8d; } /* #2319 終了車両の「落札なし」「集計中」表示 (金額より小さめ・青文字) */ .auctions_window_buyout_price strong.now_amount_status{ font-size: 18px; color: #2980b9; } #biddable_box p{ line-height:20px; border-bottom:1px dotted; vertical-align:middle; } #biddable_box p span{ padding-left:15px; } .underline_color{ display:inline-block; line-height:1em; border-bottom:solid 2px #FF8C00; } #for_successful_trader_form_carnext{ margin-bottom: 10px; } #for_successful_trader_form_carnext img{ width: 100%; height: auto; } /* おすすめ車両 */ #recommend_vertical { float: right; width: 195px; } #recommend_vertical h4 { text-align: center; font-weight: bold; background-color: #FD7A2B; color: #FFF; margin: 0 0 10px 0; padding: 5px 0; } #recommend_vertical ul { margin: 0; padding: 0; border: 1px solid; max-height: 570px; overflow: scroll; overflow-x: hidden; overflow-y: hidden; } #recommend_vertical ul li { list-style: none; border-bottom: 1px solid; text-align: center; padding: 5px; } #recommend_vertical ul li p { margin: 0; padding: 0; } #recommend_vertical ul li:last-child { border-bottom: 0; } #recommend_vertical ul li p.recommend_photo { margin-bottom: 5px; } #recommend_vertical img { width: 100%; max-height: 122px; } #recommend_vertical .recommend_scroll_down, #recommend_vertical .recommend_scroll_up { float: left; width: 100%; text-align: center; border: 1px solid; font-size: 150%; background-color: #CCCCCC; } #recommend_vertical .recommend_scroll_down { border-top: 0; } #recommend_vertical .recommend_scroll_up { border-bottom: 0; } #recommend_vertical .recommend_scroll_down a, #recommend_vertical .recommend_scroll_up a { display: inline-block; width: 100%; border-radius: 0; text-decoration: none; color: #000; font-weight: bold; } #recommend_vertical .recommend_photo_image { display: inline-block; width: 183px; height: 122px; background-size: contain; background-repeat: no-repeat; background-position: center; } #recommend_horizontal{ position: relative; margin-bottom: 20px; overflow: hidden; } #recommend_horizontal h4 { text-align: left; font-weight: bold; background-color: #fd7a2b; color: #fff; margin: 0px 0px 10px 0px; padding: 5px; } #recommend_horizontal .recommend_scroll_left, #recommend_horizontal .recommend_scroll_right { position:absolute; width: 26px; line-height: 210px; text-align: center; border: 1px solid; font-size: 150%; background-color: #ccc; bottom:0px; z-index:100; } #recommend_horizontal .recommend_scroll_left { border-right: 0; left:0px; } #recommend_horizontal .recommend_scroll_right { border-right: 0; right:0px; } #recommend_horizontal .recommend_slider { width: 100%; overflow: hidden; } #recommend_horizontal .recommend_scroll_left a, #recommend_horizontal .recommend_scroll_right a { display: block; height:100%; border-radius: 0; text-decoration: none; color: #000; font-weight: bold; } #recommend_horizontal ul { float: left; margin: 0; padding: 0; border-top: 1px solid; width: 1068px; max-height: 210px; overflow: scroll; overflow-x: hidden; overflow-y: hidden; } #recommend_horizontal ul li { display: inline-block; width: 193px; list-style: none; border-right: 1px solid; text-align: center; padding: 5px; } #recommend_horizontal .bx-wrapper{ border-right: 1px solid; border-bottom: 1px solid; } #recommend_horizontal ul li a{ display: block; height: 100%; overflow-y:none; } #recommend_horizontal ul li p { margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #recommend_horizontal ul li p.recommend_photo { margin-bottom: 5px; } #recommend_horizontal img { width: 100%; max-height: 122px; } #recommend_horizontal .recommend_photo_image { display: inline-block; width: 183px; height: 122px; background-size: contain; background-repeat: no-repeat; background-position: center; } /* _________________________________________ 新規登録・ログイン・IDパスワード忘れ */ .subscribe_left, .subscribe_right{ width:48%; margin-bottom: 40px; } .subscribe .table-default th, .login_new_trader_form th{ max-width: 150px; } @media screen and (max-width: 899px){ .subscribe{ flex-direction: column; } .subscribe_left, .subscribe_right{ width: 100%; max-width: 414px; margin: 0 auto 40px; } .required_item{ float: left; margin:0px 5px 5px 0 ; } } .sales_point{ height:620px; padding:0 20px; } .sales_point_left, .sales_point_right{ float:left; width:47%; height:100%; padding:5px 15px; font-size: 14px; } .sales_point_left h5, .sales_point_right h5{ font-size:22px; font-weight:bold; } .sales_point_right h5 span{ font-size: 0.8em; } .sales_point_left{ background-color:#faffbd; font-size: 18px; } .sales_point_right{ background-color:#fed98a; margin-left:3%; } .sales_point table{ font-size:16px; border:1px solid #000 !important; margin-bottom: 5px !important; } #sales_point_right_text{ font-size:0.5em; font-weight: normal; text-align: right; } .sales_point table th, .sales_point table td{ border:1px solid #000 !important; padding-top: 1px !important; } .subscribe_right p:nth-child(2){ margin-bottom: 30px; } .new_trader_form_title.attend_text span{ position:absolute; right:0px; top:0px; font-size:0.6em; line-height:1.2; color:#000000; padding:2px 5px; } /* _________________________________________ プライバシーポリシー */ #privacy #privacy_infomation { border: solid 1px #666666; padding: 15px; } /* _________________________________________ LPコンテンツ*/ section.lp_contents { text-align: center; margin-bottom: 40px; } /* _________________________________________ LPメインバナー*/ p.prbnr { margin: 42px auto; text-align: center; } .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius:.25em } .label-info { background-color: #31b0d5; } .label-primary { background-color: #428bca; } /* _________________________________________ スライダーの位置とサイズ調整 */ .slider { width:100% !important; max-width: 1120px !important; margin:0 auto; } /* _________________________________________ スライダー 画像サイズ調整 */ .slick_img { width:100%; } .slick-slide { height: auto !important; } /* _________________________________________ スライダー 矢印表示 */ .slick-next { right: 0 !important; } .slick-prev { left: 0 !important; } .slick-arrow { z-index: 2 !important; } .slider-box { padding: 10px 8px 10px 8px; } /* _________________________________________ 電話でのお問合せ/メールでのお問合せ */ .Contact { padding: 20px 30px; background: #f5f4f0; border: 4px solid #61ad35; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; } .Contact .Contactl { float: left; width: 50%; border-right: 1px solid #aaaaaa; background: url(../img/icon-phone.png) no-repeat top left; } .Contact .Contactr { float: right; width: calc(50% - 22px); background: url(../img/icon-mail.png) no-repeat top left; } .Contact .Contactl h3,.Contact .Contactr h3 { font-size: 21px; color: var(--c-green-dark); } .Contact .Contactl p,.Contact .Contactr p { font-size: 14px; color: #303030; } .Contact .Contactl h3,.Contact .Contactr h3, .Contact .Contactl p,.Contact .Contactr p{ margin: 0 0 10px 100px; } .Contact .Contactl .Contact_tel { width: calc(100% - 22px); } .Contact .Contactl .Contact_tel, .Contact .Contactr .Contact_mail{ background: #ffffff; font-size: 22px; font-weight: bold; color: var(--c-green-dark); text-align: center; border: 1px solid #cccccc; padding:10px 4px; line-height: 1; } .Contact .Contactl .Contact_tel img, .Contact .Contactr .Contact_mail img { width: 22px; margin-right: 5px; vertical-align: middle; } @media screen and (max-width: 899px){ .Contact{ padding: 3% 2%; } .Contact .Contactl { width: 100%; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #aaaaaa; background-size: 34px; border-right: none; } .Contact .Contactl h3, .Contact .Contactr h3 { margin: 0 0 5px 40px; font-size: 15px; color: var(--c-green-dark); } .Contact .Contactl p, .Contact .Contactr p { margin: 0 0 10px 40px; font-size: 12px; color: #303030; } .Contact .Contactl .Contact_tel { width: 100%; } .Contact .Contactr { width: 100%; background-size: 34px; } .Contact .Contactr .Contact_mail { font-size: 17px; } } /* _________________________________________ 規約マニュアル*/ .dl_pdf, .sample_pdf{ display: inline-block; padding: 0 0 0 24px; } .dl_pdf{ background: url(../img/sample_icon1.gif) no-repeat scroll 0 0 transparent; margin-right: 10%; } .sample_pdf{ background: url(../img/sample_icon2.gif) no-repeat scroll 0 2px transparent; } /* _________________________________________ ヘッダー 共通（ログイン/未ログイン/ログアウト） */ /* ヘッダー高さは --head-h に一元化する (#2460)。 本文側の .head_height が同じ変数を参照するため、ここを変えれば重なりは起きない。 ログイン後は常設グローバルナビ(48px)が乗るぶん高くなる。 */ :root{ --head-h: 100px; /* 未ログイン時 (従来値) */ --head-gnav-h: 48px; /* 常設グローバルナビの高さ */ /* #2460 PC のコンテンツ幅。ヘッダ・本文・お問い合わせ・ご注意点・フッターの 左右端をこの1本で揃える。値を変えるときはここだけ直す。 */ --content-w: 1540px; /* ============================================================ #2460 デザイントークン 部品ごとに値を直書きしてきた結果、角丸が16種類・影が3系統・ 緑が4種類に増えていた。ここを唯一の出所にする。 新規実装はこの変数を使い、生の値を書かない。 ============================================================ */ /* -- 色: ブランド -- */ --c-green: #61ad35; /* 基調色。枠線・アイコン・件数・小さい面 */ --c-green-dark: #2f7d20; /* 白文字を載せる面。CTA・現在地・主要導線 */ --c-green-hover: #4f9429; /* 緑の面の hover (#559a2e と2種あったのを統一) */ --c-green-tint: #f1f8ec; /* 緑の淡い地色。選択状態の背景 */ /* -- 色: hover (オレンジ) -- 緑=押せる主要動線 / オレンジ=今ホバーしている、と役割を分ける */ --c-hover-bg: #fff6e8; --c-hover-border: #f0c99a; --c-hover-text: #d97d00; /* -- 色: 文字 -- */ --c-text: #333; /* 本文 */ --c-text-sub: #555; /* 補助・ラベル */ /* 注記・キャプション。#777 は白地でコントラスト 4.48 と 基準(4.5)をわずかに下回るため、見分けの付かない範囲で1段暗くした (4.61) */ --c-text-weak: #757575; /* -- 色: 線と地 -- */ --c-border: #dcdfd9; /* 入力欄・白ボタンの枠 */ --c-border-light: #e3e6e0; /* カードの枠・区切り線 */ --c-bg-subtle: #f7f8f6; /* カード内の薄い地色 */ --c-bg-gray: #f2f3f0; /* セクションの地色 */ /* -- 色: 状態 -- 赤は「締切が近い」「エラー」だけに使う。主要導線には使わない */ --c-danger: #d10000; --c-danger-bg: #fdecec; --c-danger-line: #e9c6c6; --c-warn-bg: #fff8ec; --c-warn-line: #f0dcb8; --c-info-bg: #f1f8ec; --c-info-line: #cfe3c0; /* -- 角丸: 3段に集約 (2/3/5/8/9/10/11/12/14/16/20/25/32px が混在していた) -- */ --r-sm: 4px; /* ボタン・入力欄・バッジ */ --r-md: 6px; /* カード・パネル */ --r-pill: 999px; /* 条件チップだけ */ /* -- 影: 2段だけ。Bootstrap3 の擬似グラデ(inset ハイライト)は使わない -- */ --sh-1: 0 1px 2px rgba(20, 28, 16, .06); /* 静止 */ --sh-2: 0 4px 12px rgba(20, 28, 16, .10); /* hover・浮いている面 */ /* -- 余白: 4の倍数 -- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; } .head_bg{ position:fixed; width:100%; height: var(--head-h); top:0px; left:0px; z-index:200; } /* ログイン後は緑帯を出さず、白ベース + 常設グロナビ (デザイン案) */ .head_bg:not(.no_login){ --head-h: calc(70px + var(--head-gnav-h)); background: #fff; /* 下線はグロナビ(.head_gnav)側で引く。ここで引くと二重線になる */ } .head_bg:not(.no_login) .h1-container{ /* h1 は SEO 上 DOM に残し、視覚的にのみ隠す */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .h1-container{ background: #61ad35; } .head_bg h1{ font-size: 12px; color: #ffffff; font-weight: normal; padding: 6px 0 4px; } .head_bg .container{ position: relative; } .head_bg .head_logoArea{ height: 70px; display: flex; flex-direction: row; align-items: center; } /* ロゴのガイドライン: ロゴの上下左右にロゴの高さの 50% の余白を空ける。 ロゴの大きさは --logo-h (表示高さ) 1本で決め、余白はリンクの padding として そこから計算する。大きさを変えるときは --logo-h だけ直せば余白も追従する。 PC はヘッダー行 70px に「高さ x2」が収まる 34px (幅 291px)。 */ .head_bg{ --logo-h: 34px; } .head_logo_img_div{ /* 右のボタン群に押されてロゴや余白が縮まないようにする */ -ms-flex-negative: 0; flex-shrink: 0; } .head_logo_img_div a{ display: block; padding: calc(var(--logo-h) / 2); } .head_logo_img_div img{ display: block; width: auto; max-width: none; height: var(--logo-h); } .head_right_div{ margin-left: auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; } .head_bg #login_btn_box.primary_ul a{ color: initial; } .header_market_price_btn{ position: relative; display: inline-block; } .header_market_price_btn .btn-outline, .btn-market-price{ display: inline-flex; align-items: center; gap: 10px; position: relative; user-select: none; color: #ffffff; background: linear-gradient(180deg, #182B54 0%, #0B1730 100%); border: 1px solid rgba(229, 179, 75, 0.5); border-radius: 10px; padding: 10px 18px; white-space: nowrap; box-shadow: 0 6px 16px rgba(11, 23, 48, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .header_market_price_btn .btn-outline:hover, .btn-market-price:hover{ transform: translateY(-1px); filter: brightness(1.1); color: #ffffff; box-shadow: 0 10px 22px rgba(11, 23, 48, 0.45), 0 0 0 1px rgba(229, 179, 75, 0.7) inset; } .header_market_price_btn .btn-outline:active, .btn-market-price:active{ transform: translateY(0); } .header_market_price_btn .btn-outline_icon, .btn-market-price_icon{ display: inline-flex; align-items: center; justify-content: center; color: #E5B34B; } .header_market_price_btn .btn-outline_icon svg, .btn-market-price_icon svg{ width: 22px; height: 22px; color: #E5B34B; } .header_market_price_btn .btn-outline_text, .btn-market-price_text{ display: inline-flex; align-items: center; text-align: left; } .header_market_price_btn .btn-outline_title, .btn-market-price_title{ font-size: 16px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; color: #ffffff; } .head_bg .primary_ul li:not(:first-child){ border-left: 1px solid #e0e3e3; padding-left: 8px; margin-left: 8px; margin-right: 8px; } .menu_btn_wrap { width: 100px; height: auto; margin: 0 5px; justify-content: flex-end; } /* #2460 ログイン後の PC は常設グロナビ内に MENU があるため、上段のハンバーガーは出さない。 SP は常設グロナビを出さないので、従来どおりここに表示する（下の SP 用メディアクエリで復帰）。 未ログイン時はそもそも上段に出ないため対象外。 */ .head_bg:not(.no_login) .menu_btn_wrap { display: none; } .menu_btn_wrap img{ width: 70px; height: auto; margin: 0 5px; } @media screen and (max-width: 899px){ /* SP は常設グロナビを出さない (従来どおりハンバーガー) ため高さを戻す */ :root{ --head-gnav-h: 0px; } .head_bg{ margin-bottom: 10px; height: 70px; } .head_bg:not(.no_login){ --head-h: 70px; /* SP はグロナビを出さないため、下線はヘッダー側で引く */ border-bottom: 1px solid #dfe3df; } .head_gnav{ display: none; } /* 上段の業者情報は SP では出さない（従来どおりハンバーガー内に表示される）。 .pc の非表示指定より詳細度が高いため、ここで明示的に打ち消す。 */ .head_trader_info.pc{ display: none; } /* SP は常設グロナビが無いため、上段のハンバーガーを従来どおり表示する */ .head_bg:not(.no_login) .menu_btn_wrap{ display: flex; } .head_bg h1{ font-size: 10px; padding: 3px 0 2px; } .head_bg .head_logoArea{ height: 60px; } /* 幅 197px。余白込みで高さ 46px となり、ログイン後の 60px 行に収まる */ .head_bg{ --logo-h: 23px; } } /* _________________________________________ ヘッダー　ナビ*/ .main_nav_menu , .main_nav_menu_wrap, .main_nav_menu .main_navWrapItem { display: flex; } .main_nav_menu{ position: relative; display: none; } /* display:none の要素は hover できないため :hover 単体では開かない。 #2460 で MENU ボタン側のホバー(.is-menu-hover)からも開くようにしている。 */ .main_nav_menu:hover, .main_nav_menu.menu_hover, .main_nav_menu.is-menu-hover{ display: flex; } .main_nav_menu_wrap { margin: 0 auto; width: 100%; height: 240px; background-color: #ffffff; border: #f5f4f0 solid 1px; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; padding: 10px 20px; justify-content: center; } .main_nav_menu .coner_wrap_left ul:not(.sns_links), .main_nav_menu .coner_wrap_right ul:not(.sns_links) { width: 200px; } .main_nav_menu .coner_wrap_left ul li, .main_nav_menu .coner_wrap_right ul li{ padding: 5px 0 5px 20px; } .main_navItem a{ color: initial; } .main_navItem a:hover{ opacity: 0.7; } .main_navItem p{ font-weight: bold; } .main_navItem+.sns_links{ width: 130px; display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end; } .sns_links img { width: 45px; height: auto; } .main_nav_menu .coner_wrap_right{ border-left: #a0a0a0 solid 1px; padding-left: 50px; } /* _________________________________________ スマホナビゲーション */ @media screen and (max-width: 899px){ .main_navi2, .main_navWrapItem, .main_navItem, .main_nav_menu { flex-direction: column; } .main_nav_menu_wrap { width: 0; height: 0; padding: 0; } .main_nav_menu .coner_wrap_left ul, .main_nav_menu .coner_wrap_right ul, .main_nav_menu .coner_wrap_left ul:not(.sns_links), .main_nav_menu .coner_wrap_right ul:not(.sns_links) { width: 100%; } .main_nav_menu .coner_wrap_left ul li, .main_nav_menu .coner_wrap_right ul li{ padding: 10px 0 10px 20px; } .main_navItem p{ display: inline-block; background-color: black; width: 100%; height: 40px; line-height: 40px; color: #fff; padding-left: 10px; vertical-align: middle; } .main_navItem li{ border-bottom: #f5f4f0 solid 1px; } .sns_links { padding-right: 10px; } .hamburger{ width: 60px; height: 60px; z-index: 100; } .hamburger img { width: 60px; height: auto; position: absolute; /* 画像内のアイコン (上下に透明の余白あり) の中心をロゴの中心 (上から 30px) に揃える。 -5px ではアイコンが 4px 上に寄っていた */ top: -1px; right: 0; } .coner_wrap_left, .coner_wrap_right{ flex-direction: column; } .main_nav_menu .coner_wrap_right{ border: none; padding: 0 } .sideMenu { background-color: #fff; height: 100vh; overflow-y: auto; padding-top: 10px; padding-bottom: 150px; position: fixed; left: calc(-100% - 40px); transition: all 0.4s; top: 0; width: 200px; z-index: 200; width: calc(100% - 20px); max-width: 300px; } /* メニューが開いた時のCSS */ .nav-open .sideMenu { background-color: #fff; left: 0; } .nav-open .overlay { opacity: 0.8; visibility: visible; } .overlay { background-color: #000; cursor: pointer; height: 100vh; left: 0; opacity: 0; position: fixed; top: 0; transition: all 0.4s; visibility: hidden; width: 100vw; z-index: 100; } } /* パンクズ */ .bread_list{ margin: 0 auto 30px; font-size: 12px; padding-top: 10px } /* _________________________________________ 未ログイン/ログイン共通コンテナ */ .both_login_container { max-width: 1150px; width: 100%; } /* _________________________________________ 未ログイン　ヘッダー */ #login_btn_box.primary_ul a{ font-size: 14px; } /* #2460 ヘッダーの高さは --head-h に追従させる (ログイン後はグロナビぶん高い) */ .head_height{ margin-top: calc(70px + var(--head-gnav-h)); } .head_height.no_login { margin-top: var(--head-h); padding: 0; max-width: 100%; } .head_bg.no_login .container #login_btn_box .btn-xs{ font-size:1.2em; } @media screen and (max-width: 899px){ #login_btn_box.primary_ul a{ font-size: 12px; } .head_height.no_login { margin-top: 70px; } .head_bg.no_login{ position: static; /* #2485 MV をヘッダーに密着させる。 .head_bg の margin-bottom:10px が SP で隙間になっていた (ログイン後は本文が白地なので従来どおり10pxのまま) */ margin-bottom: 0; } .head_height.container.no_login{ margin-top: 0; } } /* _________________________________________ 未ログイン　トップ　メインビジュアル・ログイン */ .mainVisual { width: calc(100% + 20px); margin-left: -10px; padding-top: 20px; background: url(../img/mv_bg.jpg) center top repeat-x; } /* #2485 スライド化したときは、土台の背景写真が2枚目の裏にも残り 「写真が切り替わらない」ように見えていた。 背景は1枚目(.mainVisual-inner)だけが持つようにする */ .mainVisual.hero_slider.slick-initialized{ background-image: none; padding-top: 0; /* 素の .mainVisual は calc(100% + 20px) と -10px で左右にはみ出す作りだが、 スライダーでは矢印を内側(16px)に置くためはみ出しを戻す */ width: 100%; margin-left: 0; } .mainVisual.hero_slider.slick-initialized .mainVisual-inner{ background: url(../img/mv_bg.jpg) center top repeat-x; padding-top: 20px; } .mainVisual .mainVisual-inner{ max-width:1050px; margin: 0px auto; } .mainVisual .mainVisual-inner #mainVisual_left{ max-width: 400px; width: 100%; padding: 90px 40px; background: #ffffff; -webkit-border-radius: 10px; border-radius: 10px; margin-bottom: 30px; } @media screen and (max-width: 899px){ .mainVisual{ background-size: cover; } .mainVisual .mainVisual-inner:not(.hero_slider--scaled *){ flex-direction: column; align-items: center; width: 100%; } .mainVisual .mainVisual-inner #mainVisual_right:not(.hero_slider--scaled *){ width: calc(100% - 20px); margin-bottom: 20px; } .mainVisual .mainVisual-inner #mainVisual_right img:not(.hero_slider--scaled *){ margin: 0 auto; display: block; } .mainVisual .mainVisual-inner #mainVisual_left:not(.hero_slider--scaled *){ order: 1; padding: 0; border-radius: 0; max-width: 100%; padding-bottom: 10px; margin-bottom: 0; } .mainVisual .mainVisual-inner #mainVisual_left ul:not(.hero_slider--scaled *){ padding: 0 10px; } .mainVisual .mainVisual_bnr:not(.hero_slider--scaled *){ background-color: #333; line-height: 0; margin-bottom: 15px; } .mainVisual .mainVisual_bnr img:not(.hero_slider--scaled *){ max-width: 500px; width: calc(100% - 20px); line-height: 0; padding: 10px 0; } } /*********************************************** トップページスタイル **********************************************/ .main_img{ padding-top:45px; margin-bottom:20px; } .top_content { } .top_content .new_exhibit:before{ content:'新着'; position:absolute; color:#e83423; font-size:24px; font-weight: bold; text-shadow:1px 1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff; -webkit-text-shadow:1px 1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff; -moz-text-shadow:1px 1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff; top:0px; left:-12px; transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -moz-transform:rotate(-15deg); z-index:9999; } .bt_left{ width:323px; float:left; margin-top: 27px; } .bt_right{ width:763px; float:right; } .bt_right p{ font-size:15px; } .bt_right .bd_bt{ border-bottom:1px solid #d8d8d8; padding:10px 0 10px 0; margin:0 0 5px 0; } .bt_right .b_text{ font-size:36px; font:Verdana, Geneva, sans-serif; font-weight:bold; } .bt_right .b_text span{ display:inline-block; margin-left:20px; font-size:16px; vertical-align:4px; font-weight:normal; font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } /* _________________________________________ 未ログイン　トップ　モーダル　新規会員登録*/ .modal-signup .narrow{ max-width: 820px; } .modal-signup th{ padding-right: 10px; } .modal-signup th, .modal-signup td{ padding-bottom: 10px; } @media screen and (max-width: 899px){ .modal-signup .ttl-01{ font-size: 14px; padding: 8px 0; margin-bottom: 10px; } .modal-signup .narrow{ font-size: 12px; margin-bottom: 5px; } .modal-signup th{ padding-bottom: 0; } .modal-signup th, .modal-signup td{ text-align: left; } } /* _________________________________________ モーダル　ログイン */ form#UserLoginForm input[type="text"],form#UserLoginForm input[type="password"] { padding: 0; border: 1px solid #cccccc; border-radius: 0; outline: none; background: #ffffff; width: 100%; height: 50px; padding: 5px; box-sizing: border-box; -webkit-border-radius: 3px; border-radius: 3px; } .login__wrap { text-align: center; } .login__wrap h2 { display: inline-block; margin: 0 auto 15px; font-size: 20px; text-indent: 24px; text-align: center; background: url(../img/auc_icon.png) no-repeat left; } .login__wrap .login__wrap__box { margin: 0 auto 10px; } /*会員登録モーダル*/ #login_new_trader_form input[type="text"],#login_new_trader_form input[type="password"] { padding: 0; border: 1px solid #cccccc; border-radius: 0; outline: none; background: #ffffff; width: 100%; padding: 8px; box-sizing: border-box; -webkit-border-radius: 3px; border-radius: 3px; } /* _________________________________________ 未ログイン　トップ　すべての車両一覧を確認するにはログインが必要です */ .top_login-btn { max-width: 774px; } .top_login-btn p { font-size: 18px; padding: 25px 0 15px 0px; background: url(../img/arrow_bk.png) no-repeat center top; } .top_login-btn ul li { width: 49%; } .top_login-btn .login_btn:hover { background: #e30202; } .top_login-btn .signup_btn:hover, .signup .signup_btn:hover { background: #da7c02; } /* _________________________________________ 未ログイン　トップ　Smartオークションとは？ */ .member_xhibit_head{ max-width: 860px; margin-bottom: 50px; } .member_xhibit_head dl{ margin-bottom: 15px; background-color: #fff; padding: 15px 10px; } .member_xhibit_head dl dt{ font-size: 27px; font-weight: bold; } .member_xhibit_head dl dd{ font-size: 18px; } .member_xhibit_head ul li{ font-size: 22px; color: #fff; max-width: 774px; width: 100%; margin: 0 auto 12px; padding: 3px 0; background: #61ad35; border-radius: 10px; } @media screen and (max-width: 899px){ .member_xhibit_head dl dt{ font-size: 20px; } .member_xhibit_head dl dd, .member_xhibit_head ul li{ font-size: initial; } } /* _________________________________________ 未ログイン　トップ　選ばれる理由*/ .reasonbox { padding: 40px 0; background: #f5f4f0; } .reasonbox ul { flex-wrap: wrap; align-items: stretch; } .reasonbox ul li { width: calc(100% / 2 - 5px); margin-bottom: 18px; border: 1px solid #e9e8e5; background: #ffffff; } .reasonbox ul li .reason1, .reasonbox ul li .reason2, .reasonbox ul li .reason3, .reasonbox ul li .reason4{ display: block; height: 103px; margin-bottom: 10px; } .reasonbox ul li span.reason1 { background: #61ad35 url(../img/reason01.png) no-repeat center; } .reasonbox ul li span.reason2 { background: #448aca url(../img/reason02.png) no-repeat center; } .reasonbox ul li span.reason3 { background: #ea68a2 url(../img/reason03.png) no-repeat center; } .reasonbox ul li span.reason4 { background: #f39800 url(../img/reason04.png) no-repeat center; } .reasonbox ul li h4 { font-size: 20px; color: #303030; margin-bottom: 5px; } .reasonbox ul li h4 span { font-size: 26px; color: #ff0000; } .reasonbox ul li p { padding: 0 10px 20px; } @media screen and (max-width: 899px){ .reasonbox ul{ width: 100%; } .reasonbox ul li h4, .reasonbox ul li h4 span{ font-size: initial; } .reasonbox ul li span.reason1 { background-size: 90px auto; } .reasonbox ul li span.reason2 { background-size: 130px auto; } .reasonbox ul li span.reason3 { background-size: 130px auto; } .reasonbox ul li span.reason4 { background-size: 150px auto; } } @media screen and (max-width: 414px){ .reasonbox ul{ flex-direction: column; } .reasonbox ul li{ width: 100%; } } /* _________________________________________ 未ログイン　トップ　主な機能*/ .functionbox ul { flex-wrap: wrap; } .functionbox ul li { width: calc(100% / 3 - 10px); margin-bottom: 18px; border-radius: 5px; border: 1px solid #e9e8e5; background: url(../img/functionlist_bg.jpg) no-repeat top left/cover; } .functionbox ul li h4 { font-size: 20px; color: #ffffff; padding: 10px; } .functionbox ul li h4:before{ content: ''; display: block; width: 50px; height: 50px; margin:0 auto 5px; } .functionbox ul li h4.function1:before{background: url(../img/function01.png) no-repeat top center/contain;} .functionbox ul li h4.function2:before{background: url(../img/function02.png) no-repeat top center/contain;} .functionbox ul li h4.function3:before{background: url(../img/function03.png) no-repeat top center/contain;} .functionbox ul li h4.function4:before{background: url(../img/function04.png) no-repeat top center/contain;} .functionbox ul li h4.function5:before{background: url(../img/function05.png) no-repeat top center/contain;} .functionbox ul li h4.function6:before{background: url(../img/function06.png) no-repeat top center/contain;} .functionbox ul li p { padding: 10px 0; background: #ffffff; } @media screen and (max-width: 899px){ .functionbox ul { align-items: stretch; } .functionbox ul li{ width: calc(100% / 2 - 5px); overflow: hidden; } .functionbox ul li h4{ font-size: 16px; } .functionbox ul li p{ height: 100%; } } /* _________________________________________ 未ログイン　トップ　メディア*/ .mediabox { width: 100%; padding: 30px 0; background: url(../img/media_bg.gif) repeat; } .mediabox ul.flex-box-col { flex-wrap: wrap; } .mediabox ul li { width: calc(100% / 2 - 6px); background: #ffffff; border: 1px solid #e9e8e5; margin-bottom: 12px; } .mediabox ul li.flex-box-col { align-items: center; } .mediabox h4 { font-size: 20px; position: relative; background: #f5f4f0; padding: 40px 0; max-width: 300px; width: 100%; border: 1px solid #e9e8e5; } .mediabox h4::before { content: " "; display: block; width: 24px; height: 19px; position: absolute; top: 5px; left: 5px; } .mediabox h4.media-tv::before { background: url(../img/icon_tv.png) no-repeat; } .mediabox h4.media-news::before { background: url(../img/icon_news.png) no-repeat; } .mediabox ul li.flex-box-col p{ width: 100%; } @media screen and (max-width: 899px){ .mediabox ul.flex-box-col{ flex-direction: column; width: 100%; } .mediabox li.flex-box-col{ align-items: center; width: 100%; padding: 5px; } .mediabox h4{ padding: 30px 0; font-size: initial; } .mediabox ul li.flex-box-col p{ text-align: left; padding-left: 10px; } } /* _________________________________________ 未ログイン　トップ　FAQ*/ .topfaq { padding: 30px 0; background: #f5f4f0; } .topfaq .container{ max-width: 976px; } .topfaq dl dt { padding: 8px 10px 8px 10px; font-size: 18px; font-weight: bold; color: #ffffff; background: #535353; border-radius: 5px; } .topfaq dl dd { width: 100%; padding: 10px 0 0 0; margin-bottom: 20px; } .topfaq dl dd span { display: inline-block; padding: 3px 5px; background: #ffff00; } @media screen and (max-width: 899px){ .topfaq dl dt{ font-weight: normal; font-size: initial; } } /* _________________________________________ 未ログイン　トップ　入会までの流れ*/ .signup { max-width: 976px; background-color: #f5f4f0; padding-bottom: 25px; } .signup .signup-header { width: 100%; background: #61ad35; border-radius: 10px 10px 0 0; position: relative; margin-bottom: 40px; } .signup .signup-header::after, .signup .signup-flow::after{ content: " "; position: absolute; bottom: -22px; left: 0; right: 0; width: 33px; height: 22px; margin: 0 auto; background: url(../img/signup-arrow.png) no-repeat; } .signup .signup-header ul li { width: calc(100% / 3 ); color: #ffffff; position: relative; padding:10px 10px 20px; } .signup .signup-header ul li:nth-child(2) { border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; box-sizing: border-box; } .signup .signup-header ul li:before{ content: ''; max-width: 300px; height: 80px; margin: 0 auto; display: block; } .signup .signup-header ul li.feature1:before { background: url(../img/signup01.png) no-repeat center / auto; } .signup .signup-header ul li.feature2:before { background: url(../img/signup02.png) no-repeat center; } .signup .signup-header ul li.feature3:before { background: url(../img/signup03.png) no-repeat center / auto; } .signup .signup-flow { max-width: 656px; margin: 0 auto 40px; position: relative; } .signup .signup-flow ul { font-size: 20px; } .signup .signup-flow ul li { padding: 15px; margin-bottom: 25px; background: #61ad35; color: #ffffff; -webkit-border-radius: 25px; border-radius: 10px; position: relative; } .signup .signup-flow ul li:not(:last-child)::after { content: " "; display: block; position: absolute; bottom: -25px; left: 0; right: 0; margin: 0 auto; width: 2px; height: 25px; background: #959595; } @media screen and (max-width: 899px){ .signup .signup-header ul li.feature2:before { background: url(../img/signup02.png) no-repeat center / contain; } } @media screen and (max-width: 414px){ .signup .signup-header ul.flex-box-col{ display: block; } .signup .signup-header ul li{ width: 100%; } .signup .signup-header ul li:nth-child(2){ border:none; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; } .signup .signup-header ul li.feature2:before { background: url(../img/signup02.png) no-repeat center; } } /** ログインモーダル **/ .modal{ display: none; height: 100%; position: fixed; top: 0; width: 100%; z-index: 100; left: 0; } .modal__bg{ background: rgba(0,0,0,0.8); height: 100%; position: absolute; width: 100%; } .modal__content{ display: block; position: fixed; top: 0; z-index: 100; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); background-color: #ffff; border-radius: 10px; width: calc(100% - 30px); max-width: 500px; } #modal01 .modal__content { background-color: #fff; } #modal02 .modal__content { width: calc(100% - 20px); max-width: 1000px; background-color: #fff; } @media screen and (max-width: 899px){ .modal__content{ top: 50%; } } /** ログインモーダル END **/ /** クレーム申請ポップアップ **/ .detail_footer_colorbox{ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .detail_footer_colorbox .btn{ color: #fff; width: calc(100% / 3); margin:0 5px 20px; font-size: 1.2em; } .detail_footer_colorbox #document_detail_set_btn, .detail_footer_colorbox #detail_footer_colorbox_btn, .detail_footer_colorbox #car_number_set_btn{ width: 100%; } .detail_footer_colorbox #claim_btn_box .btn{ width: 100%; } .detail_footer_colorbox .btn.no_claim, .detail_footer_colorbox .btn.trader_auction_trade_end{ background-color: #279a27; } .detail_footer_colorbox .btn.yes_claim{ background-color: #cf193f; } .detail_footer_colorbox .btn.claim_check_now{ background-color: #176ecf; } #claim_box { padding: 15px; max-width: 700px; margin: 0 auto; } #claim_box p { text-align: center; font-weight: bold; font-size: 1.2em; margin-bottom: 10px; } #claim_box .form-control { max-width: 210px; margin: 0 auto 20px; } .claim_trade_date_box { width: 12em; margin: 0 auto 20px; } #claim_inner { text-align: center; margin-bottom: 20px; } #claim_inner.flex-box-col { justify-content: center; } #claim_inner .btn { width: calc(100% / 3); font-size: 1.2em; color: #ffffff; padding: 8px 2px; border: solid 1px; } #claim_select_box { display: inline-block; width: 30%; margin-right: 5%; } #claim_select_box:before, #claim_select_box:after{ top: 30%; } #claim_select_box { max-width: 100%; margin: 0 3%; } #claim_select_box .btn{ width: auto; } #claim_btn_box { display: inline-block; width: auto; } #claim_box #claim_remark_box { display: inline-block; width: 100%; } #claim_box #claim_remark_box input { max-width: 100%; } #claim_btn_box a { font-size: 1.2em; padding: 4px 3px; color: #ffffff; background: rgb(108, 151, 193); } @media screen and (min-width: 900px) { .detail_footer_colorbox .btn.no_claim:hover, .detail_footer_colorbox .btn.trader_auction_trade_end:hover { background-color: #217d21; } .detail_footer_colorbox .btn.yes_claim:hover { background-color: #aa1838; } .detail_footer_colorbox .btn.claim_check_now:hover{ background-color: #1a5ca8; } #claim_btn_box a:hover { text-decoration: none; background: rgb(65, 109, 161); } } @media screen and (max-width: 899px){ .detail_footer_colorbox{ width: 100%; margin: 0 0 10px; } .detail_footer_colorbox .btn{ width: 100%; margin: 0 0 10px; } #claim_inner .btn{ width: 100%; } .detail_footer_colorbox .flex-box-col{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 20px; } #claim_select_box, .form-control{ width: 100%; margin: 0; } #claim_select_box input{ max-width: 100%; margin: 0 0 20px; } #claim_box .form-control { max-width: 100%; } #claim_select_box .btn{ width: 100%; } .detail_footer_colorbox #claim_btn_box{ width: 100%; } .detail_footer_colorbox #claim_btn_box .btn{ display:inline-block; width: 100%; } .detail_footer_colorbox .flex-box-col:nth-child(2) .input.select, .form-control{ max-width: 100%; } .detail_footer_colorbox .flex-box-col:nth-child(2) input{ max-width: 100%; margin: 0 0 20px; } .detail_footer_colorbox .flex-box-col:nth-child(2) .btn{ width: 100%; } } /** クレーム申請ポップアップ END **/ .bd_line{ height:10px; background:#fff; margin-top:-2px; position:relative; z-index:100; } /* _________________________________________ フッター */ .footer-wrap { background: #f5f4f0; border-top: 6px solid #ebe9e2; padding-top: 20px; } .footer-wrap .flex-box-col{ justify-content: center; } .footer-wrap .col-xs-2{ width:550px; overflow:hidden; } .footer-wrap .copy{ padding-bottom: 15px; font-size: 12px; } .footer-nav li{ padding: 10px 10px 0px; position: relative; font-weight:bold; } .footer-nav li:not(:first-child) a:before{ content: '|'; position: absolute; left: -2px; color: #888; } .footer-nav li a { color: #000; text-align: center; display: inline-block; } .footer-inner.flex-box-col { align-items: center; padding-bottom: 20px; } .footer-inner { } .footer-inner > img { margin-right: 20px; } .footer-inner address { margin-right: 20px; } .footer-inner table{ float: right; width:135px; margin:0; } /** グループリンク **/ .group-section { max-width: 1150px; margin: 20px auto; } .group-title { margin-bottom: 0; font-size: 18px; } .group-link { position: relative; display: inline-block; margin-top: 0.5em; padding-right: 1em; } .group-link:last-child::after { display: none; } .group-link::after { position: absolute; right: 0; content: ''; width: 1px; height: 100%; margin-right: .3em; background-color: #333; } @media (max-width: 899px) { .group-section { text-align: left; } .group-section { padding: 0 10px 30px; } .group-link { display: block; margin-top: .75em; line-height: 1.5; } .group-link::after { display: none; } } @media screen and (max-width: 899px){ .footer-wrap .flex-box-col:not(.footer-inner){ flex-direction: column; width: 100%; } .footer-nav li:not(:first-child) a:before{ display: none; } .footer-nav li:not(:first-child):before{ content: ''; border-bottom:1px solid #aaaaaa; display: block; } .footer-nav{ position: relative; } .footer-nav li{ width: 100%; padding:0; } .footer-nav li a{ padding: 10px 5px 10px 24px; box-sizing: border-box; text-align: left; display: block; width: 100%; background: url(../img/spfootnavarrow.png) left 5px center / 13px auto no-repeat; } .footer-nav:before{ content: ''; border-top: 1px solid #aaaaaa; display: block; position: absolute; top: 0; width: 100%; } .footer-group-site-span { text-align: left; margin: 5px 5px; } .footer-groups{ border-bottom: 1px solid #aaaaaa; } .footer-inner{ display: grid; } .footer-inner > img { margin-right: 0; grid-row: 1 / 2; grid-column: 1 / 2; width: 80%; height: auto; } .footer-inner address{ font-size: 12px; margin-right: 0; grid-row: 1 / 2; grid-column: 2 / 3; display: inline-block; vertical-align: middle; } .footer-inner table{ grid-row: 2 / 3; grid-column: 1 / 3; float: initial; width: 100%; margin-top: 20px; } } /* _________________________________________ フッター　固定バナー*/ .footer_fixed { position:fixed; bottom: 0; right: 2%; } .footer_fixed img { width:180px; } /* _________________________________________ ログイン後のホーム */ /* _________________________________________ TOPページの人気車種ランキング*/ .top_todaystrade h3{ font-size: 28px; display: inline-block; position: relative; margin-bottom: 20px; } .top_todaystrade h3:after{ content: ''; border-bottom: 4px dashed #FEC807; display: block; position: relative; top: -5px; } .top_todaystrade h3 span{ color: #06BD0E; } .top_todaystrade br{ display: none; } .rankingWrap{ margin-bottom: 50px; } .rankingItem{ width: calc(100% / 3 - 20px); } .rankingTtl p{ font-size: 1.2em; margin-left: 20px; } .rankingTtl img{ vertical-align: middle; height: 25px; } .rankingDesc{ } .rankingTtl{ -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 5px; } .rankingDesc{ -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .rankingDesc .rankingImgMask{ max-width: 180px; width: 100%; height: 130px; overflow: hidden; position: relative; margin-right: 10px; } .rankingDesc .rankingImgMask img{ position: absolute; max-width: 120%; top: 0; left: 50%; -webkit-transform: translateY(0%) translateX(-50%); transform: translateY(0%) translateX(-50%); } .ranking_price_icon{ display: inline-block; background: #FFC807; color: #ffffff; padding: 2px 4px 1px; margin-bottom: 4px; font-size: 12px; border-radius: 3px; } .ranking_price { font-size: 1.6rem; font-weight: bold; line-height: 1; color: #FF0000; } @media screen and (max-width: 899px){ .rankingWrap{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 25px; margin-bottom: 10px; } .top_todaystrade h3{ display: inline; font-size: 18px; border-bottom: 3px dashed #FEC807; padding-bottom: 0px; line-height: 2; } .top_todaystrade h3:after{ display: none; } .top_todaystrade br{ display: block; } .rankingItem{ width: 100%; margin-bottom: 15px; } .rankingTtl p{ font-size: initial; } .rankingDesc .rankingImgMask{ max-width: 150px; height: 100px; } .rankingDesc{ -webkit-box-align: initial; -ms-flex-align: initial; align-items: initial; } .ranking_price{ font-size: 20px; } } /* _________________________________________ ログイン後のホーム　新着情報 */ .top_content_wrap{ margin: 0 auto 30px; } .newsArea { width: 100%; padding: 15px; background: #f5f4f0; color: #535353; } .newsArea .news_titleArea{ border-bottom: 2px solid #333; margin-bottom: 12px; padding-bottom: 4px; } .newsArea .news_title { } .newsArea .news_backnumber { display: inline-block; width: 110px; padding: 3px 2px 2px; font-size: 12px; color: #ffffff; text-align: center; background: #535353; border-radius: 3px; } .newsArea .pc ul{ overflow: auto; height: 140px; } .newsArea .sp ul{ overflow: auto; height: 300px; } .newsArea li{ -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .newsArea li:not(:last-child){ margin-bottom: 8px; } .newsArea li a{ } .news_cat_icon_a, .news_cat_icon_b, .news_cat_icon_c{ font-size: 11px; margin: 0; color: #fff; padding: 2px 5px 2px; text-align: center; margin-right: 10px; display: inline-block; width:100px; } .news_cat_icon_a{ background:#dd6565; } .news_cat_icon_b{ background:#a6c056; } .news_cat_icon_c{ background:#8d6c9f; } .newsArea .published_date { max-width: 90px; width: 100%; } @media screen and (max-width: 899px){ .top_content_wrap{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .newsArea{ -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .newsArea li{ display: block; } .news_cat_icon_a, .news_cat_icon_b, .news_cat_icon_c{ font-size: 10px; padding: 1px 5px 1px; vertical-align: top; } .newsArea li:not(:last-child){ margin-bottom: 15px; } .newsArea li a { display: block; } } /* _________________________________________ ログイン後のホーム　【車両検索】【落札管理】【出品する】エリア */ .top_content_right { max-width: 350px; width: 100%; padding-left: 15px; } .top_content_right a{ color: #000000; } .top_content_right ul li{ } .top_content_right ul li a { background: #fee408; border-bottom: solid 3px #d9c308; border-radius: 5px; padding: 10px; box-sizing: border-box; min-height: 66px; margin-bottom: 6px; align-items: stretch; justify-content: center; font-weight: bold; } .top_content_right ul li a .acu_nav, .top_content_right ul li a .acu_nav_text{ align-items: center; justify-content: center; } .top_content_right ul li a .acu_nav{ width: 100px; font-size: 18px; margin-right: 10px; /* border-right: 1px solid #333; */ } .top_content_right ul li a .acu_nav_text{ } @media screen and (max-width: 899px){ .top_content_right { padding-left:0; max-width: 100%; margin-bottom: 20px; } } .action_box { max-width: 976px; width: 100%; margin: 0 auto 30px; } .action_box a{ color: #000000; } .action_box { gap: 10px; } .action_box a { background: #fee408; padding: clamp(6px, 3vw, 15px); box-sizing: border-box; font-weight: bold; width: calc(100% / 3 - 10px); font-size: clamp(10px, 3vw, 18px); color: #333333; box-shadow: inset 0 2px 0 rgb(255 255 255 / 20%), 0 2px 2px rgb(0 0 0 / 19%); border-radius:4px; } .action_box.action_box-cols-4 a { width: calc(100% / 4 - 8px); } .action_box a:hover { opacity: 0.7; } .action_box a .acu_nav, .action_box a .acu_nav_text{ justify-content: center; } /* _________________________________________ ログイン後のホーム おすすめ特集 */ .eventbox { max-width: 976px; width: 100%; } .eventbox .flex-box-col { flex-wrap: wrap; } .eventbox ul > li { width: calc(100% / 2 - 9px); margin-bottom: 18px; padding: 0; text-align: center; box-sizing: border-box; } @media screen and (max-width: 899px){ .eventbox ul > li{ width: 49%; } } /* _________________________________________ ログイン後のホーム/未ログインのホーム共通 【自社車両を出品しませんか？】 */ .member_xhibit { padding: 20px 0; background: #f5f4f0; width: calc(100% - 20px); } .member_xhibit .member_xhibit_body li{ padding:0px 20px; } .member_xhibit .member_xhibit_body li strong{ display: block; font-size: 1.2rem; text-decoration: underline; margin-top: 5px; } .member_xhibit .member_xhibit_foot { padding: 15px; box-sizing: border-box; background: #ffffff; } .member_xhibit .member_xhibit_foot_item{ width: calc(100% / 3 - 10px); font-size: initial; margin-bottom: 15px; } .member_xhibit .member_xhibit_foot_item dl{ margin-bottom: 10px; text-align: left; } .member_xhibit .member_xhibit_foot_item dt{ font-weight: bold; background: url(../img/checkbg.png) left no-repeat; padding-left: 22px; } .member_xhibit .member_xhibit_note{ display: block; font-size: 12px; } @media screen and (max-width: 899px){ .member_xhibit{ width: calc(100% - 20px); } .member_xhibit .member_xhibit_body{ flex-direction: column; align-items: center; } .member_xhibit .member_xhibit_body li{ padding:0; } .member_xhibit .member_xhibit_body li strong{ font-size: 18px; margin-bottom: 20px; } .member_xhibit .member_xhibit_body li a img{ width: calc(100% - 40px); margin: 0 auto; display: block; } .member_xhibit_foot_inner{ flex-direction: column; } .member_xhibit .member_xhibit_foot_item{ width: 100%; } .member_xhibit .member_xhibit_foot_item dt{ text-align: left; } } /* _________________________________________ ニュースリリース　一覧 */ .archive_newsItem{ -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 15px 0; border-bottom:solid 1px #dddddd; } .archive_date_cat{ max-width: 260px; width: 100%; display: flex; } .archive_date { margin-right: 5px; width: 45%; } .archive_ttl{ width: calc(100% - 260px); } .archive_ttl a { display: block; } .archive_ttl a:hover{ opacity: 0.8; } p.lead{ font-size : 12px; margin : 5px 0 0 ; } @media screen and (max-width: 899px){ .archive_newsItem{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .archive_date_cat, .archive_ttl{ width: 100%; max-width: 100%; } .archive_date { width: 35%; } } /* _________________________________________ ナビゲーション　タブ　各種設定 /traders/edit- */ .nav-tabs{ justify-content: flex-start; border-bottom: 1px solid #ddd; padding-left: 7px; } .nav-tabs .content_tab{ margin-bottom: -1px; } .nav-tabs .content_tab:not(:last-child){ margin-right: 10px; } .nav-tabs .content_tab a{ display: block; border-radius: 4px 4px 0 0; background: #eee; padding: 15px 12px; color: #428bca; font-size: 14px; border: 1px solid #eeeeee; border-bottom: 1px solid #eee; box-sizing: border-box; } .nav-tabs .content_tab a:focus { text-decoration: none; background-color: #eee; } .nav-tabs .content_tab a:hover { background: #fafafa; border-color: #ddd #ddd #fff; } .nav-tabs .content_tab.active a{ color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; } .nav-tabs .svg-icon-arrow:after{ display: none; } @media screen and (max-width: 899px){ .nav-tabs{ padding-left: 0; flex-wrap: wrap; border: 1px solid #ddd; border-radius: 4px; } .nav-tabs .content_tab:not(:last-child){ margin-right: initial; } .nav-tabs .content_tab{ margin-bottom: 0; width: 100%; } .nav-tabs .content_tab.active a, .nav-tabs .content_tab a{ border:none; border-radius: 0; } .nav-tabs .content_tab a{ padding: 8px; } .nav-tabs .content_tab:first-child a{ border-radius: 4px 4px 0 0; } .nav-tabs .content_tab:nth-child(4) a{ border-radius: 0 0 4px 4px; } .nav-tabs .content_tab:not(:nth-child(n+4)){ border-bottom: 1px solid #ddd; } .nav-tabs .svg-icon-arrow:after{ display: block; } } /* _________________________________________ エリア別で最低応札価格を確認 guaranteed_prices */ /* ボタンデザイン */ .btn_orange { color: #fff; font-weight: bold; background-color: #E94623; padding: 20px; font-size: 20px; max-width: 450px; /* outline: none !important は外した。 キーボードでフォーカスしても現在地が見えなくなり、 サイト共通の :focus-visible(濃い緑2px)も潰していた (#2460) */ white-space:initial; } .btn_orange:hover { background: #f56500; } .btn_sell { color: #fff; font-weight: bold; background-color: #f00; padding: 15px; font-size: 24px; max-width: 360px; border-radius: 32px; /* outline: none !important は外した (上と同じ理由) (#2460) */ } .btn_sell:hover { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; } .area_main_box { padding: 2.5em; color: #434345; background: #f5f5f5; max-width: 700px; margin: 20px auto 100px; } .btn-div { margin: 40px 0 40px 0; text-align: center; } .display_none { display: none; } /* 最低保証価格のテキスト */ .guaranteed_price_text { margin: 40px auto; font-size: 28px; text-align: center; max-width: 500px; } /* mylist本日の見積依頼 */ .has-mitsumori { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 899px){ .has-mitsumori{ } .has-mitsumori > div{ width: 100%; margin-bottom: 10px; } .has-mitsumori #search_form_button{ } } @media screen and (max-width: 414px){ .has-mitsumori{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .has-mitsumori .btn-green{ max-width: 100%; } } /* _________________________________________ 陸送・代行必須お知らせ/顧客満足度 */ .evalute_flex{ display: flex; } .evaluation_agreement_news_header { text-align: center; font-weight: bold; font-size: 24px; line-height: 64px; color: #ffffff; border-radius: 10px 10px 0 0; background: rgb(129,173,97); } .evaluation_agreement_news_text{ margin: 30px auto; align-items: center; display: flex; flex-direction: column; width: 65%; justify-content: center; } .evaluation_agreement_news_text p { font-size:15px; line-height: 1.9em; } .evaluation_agreement_news_text .inquiry_text{ margin-top:15px; text-align: center; font-weight: bold; } #evaluation_agreement_btn_box{ padding-top:50px; width:100%; text-align: center; } #evaluation_agreement_btn{ display: inline-block; font-weight: bold; line-height: 1.46; background: #f38900; color: #ffffff; border-radius: 10px; border-right: solid 4px #f38900; border-bottom: solid 4px #f38900; width: 70%; border-left: 0px; border-top: 0px; padding: 10px 26px; font-size:18px; } @media screen and (max-width: 899px){ .sp-evalute_flex{ display: flex; } .evalute_border_bottom{ padding-top: 0 !important; } .evaluation_agreement_news_text{ width: 80%; margin: 15px auto; } .evaluation_agreement_news_text p { font-size:14px; line-height: 1.7; } #evaluation_agreement_btn_box{ padding-top:20px; } } /* _____________________________________________________________ */ /* _________________________________________ モーダル共通*/ #colorbox{ margin-top: -100px; } /* _________________________________________ モーダル共通 END*/ /* _________________________________________ 頻出スタイル*/ /*ココより下には頻出スタイル以外追加禁止*/ .P6_0{ padding: 6px 0; } .PT_20{ padding-top:20px; } .PA0{ padding:0; } .PL0{ padding-left:0; } .PR0{ padding-right:0; } .mb0{ margin: 0; } .mb10{ margin-bottom:10px; } .mb20{ margin-bottom:20px; } .mb30{ margin-bottom:30px; } .wi_255{ width:255px; } .wi_110{ width:110px; } .wi_700 .form-group{ width:700px; } .wi_700{ width:700px; height:64px; position:relative; text-align:left; } .w-100-p{ width:100%; } .fo_200{ width:200px; } .fo_500{ width:500px; } .fo_63{ width:63px; } .font-14{ font-size: 14px; } .hover_opacity01:hover{opacity:0.1;} .hover_opacity02:hover{opacity:0.2;} .hover_opacity03:hover{opacity:0.3;} .hover_opacity04:hover{opacity:0.4;} .hover_opacity05:hover{opacity:0.5;} .hover_opacity06:hover{opacity:0.6;} .hover_opacity07:hover{opacity:0.7;} .hover_opacity08:hover{opacity:0.8;} .hover_opacity09:hover{opacity:0.9;} .pb-3{ padding-bottom:1rem!important } @media screen and (max-width: 899px){ p.estimate_price_box { padding : 0 3px; word-break: normal; } } /** ログイン後トップ デフォルト表示ヒーロー (#2406) **/ /* 画面全幅に敷くため .container の外に出す前提のラッパ。 下の .head_height が持つ margin-top:100px を旧バナー同様に負マージンで吸収する */ .top_hero_wrap { width: 100%; margin: calc(70px + var(--head-gnav-h)) 0 -60px; } /* #2484 MV とピックアップの間が 194px も空いていた。 内訳は本文コンテナの margin-top:118px + padding-top:36px と、 slick が .slick-dotted に与える margin-bottom:30px。 MV が出るトップだけ、これらを詰めて間隔を無くす。 (本文の margin-top はヘッダの逃げなので、MV がある時だけ負で吸う) */ .top_hero_wrap.slick-dotted{ margin-bottom: 0; } body:has(.top_hero_wrap) .head_height.container, body:has(.mainVisual) .head_height.container{ margin-top: 0; } /* #2460 ただしログイン前は MV (.mainVisual) がこの本文コンテナの中にあるため、 上の指定で固定ヘッダーの逃げ (70px) まで 0 になり、MV の上端 70px がヘッダーの下に潜って キャンペーン告知スライドの見出し「期間限定 出品・成約キャンペーン」が見えなくなっていた。 PC はヘッダーが固定なので逃げを戻す (SP はヘッダーが static なので不要) */ @media screen and (min-width: 900px){ body:has(.mainVisual) .head_height.no_login.container{ margin-top: var(--head-h, 70px); } } .top_hero { position: relative; overflow: hidden; background: #eef5ea; min-height: 375px; } .top_hero__bg { position: absolute; inset: 0; display: block; } .top_hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; /* #2484 背景写真を左右反転する */ -webkit-transform: scaleX(-1); transform: scaleX(-1); } /* 写真の上に左から淡緑をかぶせて、テキストの可読性を確保する */ .top_hero__bg::after { content: ""; position: absolute; inset: 0; /* #2463: 車写真は素の濃さで見せたいので、全面に白をかけない。 文字が乗る中央付近だけ弱くかけて可読性を確保する (左端は 0 にして車を薄くしない) */ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .06) 12%, rgba(255, 255, 255, .18) 26%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, 0) 60%); } /* テキストは .container と同じ幅・位置に揃え、写真だけを全幅に見せる */ .top_hero__body { position: relative; z-index: 1; width: calc(100% - 20px); max-width: var(--content-w); margin: 0 auto; /* #2484 中身は左寄せなので、左に余白を入れないと スライドの左端に文字が貼り付いて見える */ /* #2484 文字を大きくしたぶん (見出しが2行になった) 上下の余白を詰める。 ボタンの文字を 32px にしたときに MV 全体が 10px 伸びたので、上をさらに 10px 詰める */ padding: 62px 0 56px 56px; box-sizing: border-box; } /* #2484 1枚目の文字は全体的に大きくする (約 1.2〜1.4 倍)。 SP はこのスライドを PC レイアウトのまま約 1/3 に縮めて見せるため (.hero_slider--scaled)、ここの大きさがそのまま SP の読みやすさになる */ .top_hero__lead { margin: 0 0 4px; line-height: 1.25; font-size: 24px; font-weight: 700; color: #1c1c1c; /* 写真を薄くせずに可読性を確保する (#2463) */ text-shadow: 0 1px 3px rgba(255, 255, 255, .95), 0 0 12px rgba(255, 255, 255, .85); } .top_hero__ttl { margin: 0 0 24px; /* #2484 1行 (38px) では小さかったので、「出品コストを気にせず、／まずは1台。」の 2行にして大きくする。以前は右に選手を置いていたため 38px に抑えていた (#2463)。 vw で決めると縮小表示 (SP) では画面が狭いほど最小値に張り付くため px で持つ */ font-size: 52px; line-height: 1.2; font-weight: 700; letter-spacing: .01em; color: #1c1c1c; white-space: nowrap; /* 写真を薄くせずに可読性を確保する (#2463) */ text-shadow: 0 1px 3px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .9); } .top_hero__ttl-nb { display: block; white-space: nowrap; } .top_hero__ttl em { font-style: normal; color: var(--c-green-dark); font-size: 1.4em; font-weight: 700; line-height: 1; } /* 見出し下の装飾線（デザイン実測 幅210px / 太さ3px） */ .top_hero__ttl::after { content: ""; display: block; width: 2em; margin-top: 4px; border-bottom: 3px solid #61ad35; } .top_hero__merit { display: flex; /* #2484 中身の幅に合わせる (文字を大きくしたので固定幅 656px では収まらない) */ width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 100%; align-items: center; gap: 36px; margin: 0 0 24px; padding: 24px 36px; list-style: none; background: rgba(255, 255, 255, .82); border-radius: 4px; } .top_hero__merit li { display: flex; align-items: center; gap: 14px; line-height: 1.4; color: #1c1c1c; } .top_hero__merit li + li { padding-left: 32px; border-left: 1px solid #d5e3cf; } .top_hero__merit-sub { display: block; font-size: 22px; font-weight: 700; } .top_hero__merit strong { font-size: 32px; font-weight: 700; color: var(--c-green-dark); } .top_hero__merit-text { white-space: nowrap; font-size: 24px; font-weight: 700; } .top_hero__merit-icon { flex: 0 0 auto; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 50%; } .top_hero__merit-icon img { width: 62px; height: 62px; } .top_hero__merit-icon-yen { gap: 1px; align-items: baseline; font-weight: 700; color: var(--c-green-dark); line-height: 1; } /* デザインどおり ¥ は小さく、0 を大きく見せる */ .top_hero__yen-mark { font-size: 40px; } .top_hero__yen-num { font-size: 58px; } .top_hero__btn { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-width: 440px; padding: 16px 36px; /* MVの主要導線。白文字のコントラストを確保するため、 基調色(#61ad35)ではなく暗い側の緑を使う（統一色の濃淡違い） */ background: var(--c-green-dark); color: #ffffff; /* 角丸はサイトの基準(4px)。ここだけ直角で、他のボタンと語彙が違っていた */ border-radius: var(--r-sm); /* #2484 業務の指定で大きくする (26px → 32px。3枚目の「出品車両を見る」33px とほぼ揃う) */ font-size: 32px; /* #2484 業務の指定で太字にする (500 → 700。他のスライドのボタンと同じ太さ) */ font-weight: 700; text-decoration: none; box-sizing: border-box; transition: background .15s ease; } .top_hero__btn::after { content: ""; width: 11px; height: 11px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(45deg); } /* hover は opacity で薄くするのではなく面の色を変える。 薄くすると「押せなくなった」ように見え、他の緑ボタンとも動きが違った */ .top_hero__btn:hover { background: #26661a; color: #ffffff; text-decoration: none; } @media screen and (max-width: 899px) { /* #2460 SP のヘッダーは高さ 70px の固定表示。80px だと MV との間に 10px の白い帯が出ていた */ .top_hero_wrap { margin: 70px 0 -70px; } /* SPはテキスト全体（リード〜ボタン）の背景を車の写真にする */ .top_hero:not(.hero_slider--scaled *) { min-height: 0; } .top_hero__bg img:not(.hero_slider--scaled *) { object-position: 62% center; } /* #2463: 車写真を薄くしないよう白をかなり弱める。 文字の可読性は text-shadow 側で担保している */ .top_hero__bg:not(.hero_slider--scaled *)::after { background: linear-gradient(to bottom, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .26) 55%, rgba(255, 255, 255, .18) 100%); } .top_hero__body:not(.hero_slider--scaled *) { width: 100%; max-width: none; padding: 24px 16px 26px; } .top_hero__lead:not(.hero_slider--scaled *) { margin-bottom: 6px; font-size: 14px; } .top_hero__ttl:not(.hero_slider--scaled *) { margin: 0 0 14px; font-size: 24px; line-height: 1.35; white-space: normal; } .top_hero__ttl:not(.hero_slider--scaled *)::after { margin-top: 10px; } /* メリット2項目は横並びに保つ */ .top_hero__merit:not(.hero_slider--scaled *) { display: flex; flex-direction: row; align-items: center; width: 100%; gap: clamp(2px, 1.3vw, 6px); margin-bottom: 16px; padding: 12px 8px; } .top_hero__merit li:not(.hero_slider--scaled *) { flex: 1 1 0; min-width: 0; gap: clamp(4px, 1.8vw, 7px); } .top_hero__merit li + li:not(.hero_slider--scaled *) { padding-left: clamp(8px, 3.4vw, 14px); border-left: 1px solid #d5e3cf; } /* 区切り線に文字が接触しないよう右側に余白を持たせる */ .top_hero__merit li:first-child:not(.hero_slider--scaled *) { padding-right: clamp(6px, 2.6vw, 10px); } .top_hero__merit-sub:not(.hero_slider--scaled *) { font-size: clamp(10px, 2.82vw, 13px); } .top_hero__merit strong:not(.hero_slider--scaled *) { font-size: clamp(14px, 4.15vw, 19px); } .top_hero__merit-text:not(.hero_slider--scaled *) { font-size: clamp(11px, 3.33vw, 15px); white-space: nowrap; } .top_hero__merit-icon:not(.hero_slider--scaled *) { width: clamp(28px, 8.5vw, 38px); height: clamp(28px, 8.5vw, 38px); } .top_hero__merit-icon img:not(.hero_slider--scaled *) { width: 60%; height: 60%; } .top_hero__yen-mark:not(.hero_slider--scaled *) { font-size: clamp(11px, 3.1vw, 14px); } .top_hero__yen-num:not(.hero_slider--scaled *) { font-size: clamp(16px, 4.6vw, 21px); } .top_hero__btn:not(.hero_slider--scaled *) { width: 100%; min-width: 0; padding: 15px 20px; font-size: 17px; } } /** ログイン後トップ ヒーロー 侍ジャパン提携ビジュアル (#2463) **/ /* SPの権利表記帯の高さ。帯が折り返す幅では値を増やして 選手の顔に帯がかからないようにする（Issue #2463 の指定） */ .top_hero { --top-hero-note-h: 72px; } /* 車写真の上に「筆背景 → 選手 → 権利表記帯」を重ねる。 テキスト(.top_hero__body)は基準幅(--content-w)の中央寄せで、見出し類は その左端から最大656px。選手の枠は画面中央から左へ105pxまでとし、 顔に文字がかからないようにしている(#2460 で本文が1540pxに広がっても テキストは左寄せなので、この枠の左端より手前で終わる) */ /* #2484 侍ジャパンの応援ビジュアルは専用スライド (.cp_support) へ移したため、 以下 .top_hero__samurai 系は現在どの Blade からも使われていない。 ヒーローに戻す判断があり得るので残しているが、不要と決まったら消してよい */ .top_hero__samurai { position: absolute; top: 0; right: 0; bottom: 0; /* 画面中央から左へ105pxの位置から右端まで。 選手はこの枠を越えないので、見出しやメリット帯に顔が隠れない */ width: calc(50% - 105px); /* min-width は付けない。付けると枠が左に伸びてテキストに被る */ /* 筆背景だけ左へはみ出させるため、枠では切らない。 選手は枠幅いっぱいの img なのではみ出さない */ overflow: visible; pointer-events: none; } /* 筆背景。左端を斜めに透過させて車写真へなじませる */ .top_hero__samurai-brush { position: absolute; top: 0; right: 0; bottom: 0; /* #2463: 背景(筆)だけは左へ食い込んでよい。選手は枠内に留める */ left: -120px; display: block; } .top_hero__samurai-brush img { width: 100%; height: 100%; /* 素材の左端はアルファで抜けており、そこで車写真へ溶け込む設計。 cover だと左が切れてそのグラデが消え、境界が硬くなる。 fill で必ず全幅を表示する（抽象的な筆模様なので縦伸びは気にならない） */ object-fit: fill; display: block; } /* 選手。下端を切らずに見せたいので bottom 合わせ */ .top_hero__samurai-players { position: absolute; right: 0; /* #2463: 選手をできるだけ大きく見せる。帯の高さぶんだけ上に逃がす。 width:100% + contain なので、描画される選手画像は枠の横幅いっぱいになり 帯を枠基準で中央寄せすれば「選手画像の左右中央」と一致する */ bottom: var(--top-hero-note-h); width: 100%; height: calc(100% - var(--top-hero-note-h)); /* contain で縦横比を保ったまま枠内に収める（潰さない） */ object-fit: contain; object-position: center bottom; display: block; } /* 権利表記の帯。支給素材(テキスト＋ロゴ一体)をそのまま置く */ .top_hero__samurai-note { position: absolute; /* #2463: 選手画像の左右中央に置く */ left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 2; margin: 0; width: min(560px, calc(100% - 40px)); line-height: 0; } .top_hero__samurai-note-img { display: block; width: 100%; height: auto; } /* 権利表記。帯の下に小さく添える */ .top_hero__samurai-copy { position: absolute; /* #2463: 帯と同じく左右中央 */ left: 50%; transform: translateX(-50%); bottom: -14px; font-size: 10px; font-weight: 400; line-height: 1; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); white-space: nowrap; } /* #2485 ログイン後トップの侍ジャパンバナー下の権利表記。 ヒーロー内(.top_hero__samurai-copy)と違い白背景に置くため文字色を落とす */ .samurai_bnr_copy { margin: 4px 0 0; font-size: 10px; font-weight: 400; line-height: 1; color: #666; } /* テキストは筆背景の下に潜らせない。 #2463: 右側(選手)を大きく見せるため、見出しは縮小して幅も詰める。 見出しは white-space:nowrap なので max-width では収まらない。 幅を持たせたうえで font-size 側で収まる大きさにしている。 #2484 選手は応援スライドへ移り右側が空いたので、文字を大きくしたぶん 800px まで広げる */ .top_hero__lead, .top_hero__ttl, .top_hero__merit, .top_hero__btn { max-width: 800px; } /* 中間幅(〜1500px)はテキスト右の余白が狭いので選手を小さくして逃がす。 幅の式はPCと同じ（見出し右端より右だけを使う）まま、min-width だけ緩める */ @media screen and (max-width: 1500px) { .top_hero__samurai-players { height: calc(100% - 58px); } .top_hero__samurai-note { bottom: 14px; width: min(440px, calc(100% - 28px)); } } /* 1200px以下は帯を少し小さくして選手に被る量を減らす */ @media screen and (max-width: 1200px) and (min-width: 900px) { .top_hero__samurai-note:not(.hero_slider--scaled *) { width: min(380px, calc(100% - 28px)); } } @media screen and (max-width: 899px) { /* SPは選手を「文字の下」に帯として置く。 顔は上端から出るため、テキスト側に padding-bottom を足して 文字が顔にかからないようにしている (Issue #2463 の指定) */ .top_hero__samurai:not(.hero_slider--scaled *) { top: auto; right: 0; left: 0; bottom: 0; /* PC側の width:calc()/min-width を打ち消して画面幅に収める */ width: 100%; min-width: 0; max-width: none; /* 選手の高さ＋帯の高さ。帯が顔にかからないよう帯の分だけ確保する */ height: calc(104px + var(--top-hero-note-h)); } .top_hero__samurai-brush img:not(.hero_slider--scaled *) { object-position: center center; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 14%, #000 34%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 14%, #000 34%); } .top_hero__samurai-players:not(.hero_slider--scaled *) { right: 0; left: 0; /* 帯より上に選手を置く。contain なので縦横比は保たれる */ bottom: var(--top-hero-note-h); width: 100%; height: 104px; object-position: center bottom; } /* 選手帯の分だけ本文の下に余白を作る（顔に文字がかからないように） */ .top_hero__body:not(.hero_slider--scaled *) { padding-bottom: calc(114px + var(--top-hero-note-h)); } .top_hero__samurai-note:not(.hero_slider--scaled *) { bottom: 18px; width: calc(100% - 16px); } /* SPは帯の下に小さく添える（左右中央） */ .top_hero__samurai-copy:not(.hero_slider--scaled *) { bottom: -12px; font-size: 9px; } } /* 狭い幅では帯のテキストが3行になり高くなるため、確保する高さを増やす */ @media screen and (max-width: 420px) { .top_hero:not(.hero_slider--scaled *) { --top-hero-note-h: 60px; } } @media screen and (max-width: 360px) { .top_hero:not(.hero_slider--scaled *) { --top-hero-note-h: 74px; } } /* ============================================================ #2460 デザインリニューアル : ログイン後ヘッダー - 上段: 業者名 / 顧客対応満足度 / お問い合わせ - 下段: 常設グローバルナビ (PC のみ。SP は従来のハンバーガー) ============================================================ */ /* ---- 上段: 業者情報エリア ---- */ .head_trader_info{ display: flex; align-items: center; gap: 16px; margin-left: auto; } .head_trader_name{ font-size: 13px; line-height: 1.4; color: #333; white-space: nowrap; } .head_trader_name a{ color: #333; } .head_trader_name a:hover{ text-decoration: underline; } .head_evaluation{ padding: 0 16px; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; font-size: 12px; line-height: 1.5; white-space: nowrap; } .head_evaluation dl{ display: flex; flex-direction: column; gap: 2px; margin: 0; } .head_evaluation dt{ color: var(--c-text-weak); font-weight: normal; } .head_evaluation dd{ display: flex; align-items: center; gap: 8px; margin: 0; } .head_evaluation_stars{ display: inline-flex; gap: 1px; } .head_evaluation_stars img{ width: 14px; height: 14px; display: block; } .head_evaluation_value{ font-size: 14px; font-weight: bold; color: #333; } /* 「未評価」はエラーではなく、まだ評価が付いていないという状態。 全ページのヘッダーに常時赤字で出ており、赤の希少性を削いでいた (本当に注意が必要な赤が埋もれる)。中立のグレーにする。 (#2460) */ .head_evaluation_value.text-danger{ font-size: 12px; color: var(--c-text-weak); font-weight: normal; } .head_contact_btn{ display: inline-flex; align-items: center; gap: 6px; background: #222; color: #fff; border-radius: 4px; padding: 9px 18px; font-size: 13px; white-space: nowrap; } .head_contact_btn:hover{ background: #000; color: #fff; text-decoration: none; } /* ---- 下段: 常設グローバルナビ ---- */ .head_gnav{ height: var(--head-gnav-h); border-top: 1px solid #eceeec; /* ナビ全体の下線。ヘッダーと本文の区切りにする */ border-bottom: 1px solid #dfe3df; background: #fff; /* メガメニュー(.gnav_mega)の絶対配置の基準 */ position: relative; box-sizing: border-box; } .head_gnav_inner{ display: flex; align-items: stretch; height: 100%; margin: 0 auto; padding: 0; list-style: none; } .head_gnav_inner > li{ /* 等幅(1 1 0)だと 1024px 以下で「落札・受注管理」だけ2行に折れていた。 文字幅ぶんを確保した上で余りを均等に配る */ flex: 1 1 auto; } .head_gnav_inner > li > a{ display: flex; align-items: center; justify-content: center; gap: 7px; height: 100%; padding: 0 8px; white-space: nowrap; font-size: 13px; color: #333; border-bottom: 3px solid transparent; position: relative; /* このサイトの既定は content-box のため、border 3px ぶん高さが増えて ナビ下端をはみ出す（現在地の下線がメガメニューに重なる）。ここだけ border-box にする */ box-sizing: border-box; } /* ホバーはオレンジ系（既存の #ffa200 に合わせる）。 現在地の緑と色を分けることで「今いる場所」と「触れている場所」を区別する。 */ .head_gnav_inner > li > a:hover{ color: #d97d00; text-decoration: none; background: #fff6e8; } /* メガメニューを開いている間は親項目もホバー状態のまま見せる */ .head_gnav_inner > li.has_megamenu:hover > a, .head_gnav_inner > li.has_megamenu:focus-within > a{ color: #d97d00; background: #fff6e8; } .head_gnav_inner > li > a .gnav_icon{ width: 18px; height: 18px; flex: none; } /* 現在地 */ .head_gnav_inner > li > a.is-current{ color: var(--c-green-dark); font-weight: bold; border-bottom-color: #61ad35; } /* お知らせバッジ (TOPモーダルの該当案件数。0件なら出力しない) */ .gnav_badge{ position: absolute; top: 6px; right: 50%; transform: translateX(26px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e60012; color: #fff; font-size: 11px; font-weight: bold; line-height: 17px; text-align: center; } /* ---- 車両を探す: メガメニュー (#2460) ---- ボタン自体はリユース車両コーナーへのリンク。マウスオーバー/フォーカスで4コーナーを出す。 ヘッダーは position:fixed のため、メガメニューは絶対配置で下に垂らす。 */ .head_gnav_inner > li.has_megamenu{ position: static; /* メガメニューを画面幅いっぱいに出すため */ } .gnav_caret{ margin-left: 2px; opacity: .6; transition: transform .15s; } .gnav_mega{ position: absolute; left: 0; right: 0; top: 100%; /* 背景は敷かず、項目（ボタン）部分だけ出す。パネル自体は当たり判定のみ */ background: transparent; pointer-events: none; /* 既定は隠す。transition のために visibility + opacity を使う */ visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 210; } /* .is-open はタッチで親項目をタップしたとき (Layout/default.blade.php) */ .head_gnav_inner > li.has_megamenu:hover .gnav_mega, .head_gnav_inner > li.has_megamenu:focus-within .gnav_mega, .head_gnav_inner > li.has_megamenu.is-open .gnav_mega{ visibility: visible; opacity: 1; transform: translateY(0); } .head_gnav_inner > li.has_megamenu:hover .gnav_caret, .head_gnav_inner > li.has_megamenu:focus-within .gnav_caret, .head_gnav_inner > li.has_megamenu.is-open .gnav_caret{ transform: rotate(180deg); } .gnav_mega_inner{ display: flex; gap: 0; margin: 0 auto; padding: 0; list-style: none; /* 親項目の真下から並べる。--mega-col は 0 始まりの列番号、 1列 = ナビ全体幅 / 項目数。項目数はログイン種別で変わるため --gnav-cols をコンポーネント側から渡す。 */ padding-left: calc(var(--mega-col, 0) * (100% / var(--gnav-cols, 8))); } /* 項目数が少ないとき（出品する=2件）に間延びしないよう、1枠の幅を揃える。 4件のときはコンテナ幅に収まり、2件のときは左寄せになる。 */ .gnav_mega_inner > li{ flex: 0 1 auto; min-width: 250px; /* 白ベタはパネル全体ではなく項目側に持たせる */ background: #fff; border-right: 1px solid #f0f2f0; box-shadow: var(--sh-2); pointer-events: auto; /* 親の pointer-events:none を打ち消す */ } .gnav_mega_inner > li:first-child{ border-left: 1px solid #f0f2f0; } .gnav_mega_inner > li:last-child{ border-right: 1px solid #f0f2f0; } .gnav_mega_inner > li > a{ display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; height: 100%; color: #333; border-bottom: 3px solid transparent; /* padding/border ぶんの高さ増加を防ぐ（サイト既定が content-box のため） */ box-sizing: border-box; } .gnav_mega_inner > li > a:hover{ background: #fff6e8; color: #d97d00; text-decoration: none; } .gnav_mega_inner > li > a.is-current{ color: var(--c-green-dark); font-weight: bold; border-bottom-color: #61ad35; background: #f6faf3; } .gnav_mega_label{ font-size: 14px; } .gnav_mega_note{ font-size: 11px; color: #888; } .gnav_mega_inner > li > a:hover .gnav_mega_note{ color: #c08a3e; } /* ---- MENU の中身をメガメニュー仕様に寄せる (#2460 / PC のみ) ---- SP は従来のサイドメニュー表示のままにするため、900px 以上でのみ適用する。 (899px 以下はサイト全体を SP 表示にしている) */ @media screen and (min-width: 900px){ .main_nav_menu_wrap{ /* 影と枠をメガメニューに揃える。高さは中身なりにする */ height: auto; min-height: 0; border: none; border-bottom: 1px solid #f0f2f0; box-shadow: var(--sh-2); padding: 0; } .main_nav_menu .sideMenu{ /* container 幅に揃えて中央寄せ（グロナビと左端を合わせる）。 #2460 右寄せにしたので、基準幅未満でもグロナビと同じ「画面幅 − 左右10px」にして 右端を MENU ボタンの右端に揃える (100% だと 10px 外へ出ていた) */ width: calc(100% - 20px); max-width: var(--content-w); margin: 0 auto; padding: 22px 0 24px; gap: 0; align-items: stretch; /* #2460 MENU ボタンはグロナビの右端にあり、左寄せだと開いた一覧がマウスから遠かった (業務の指摘)。中身は右に寄せ、右端を MENU ボタンの右端 (= container の右端) に揃える */ -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /* 左右ブロックとも中身なりの幅にし、余りは左側の余白として残す (上の右寄せ) */ .main_nav_menu .coner_wrap_left, .main_nav_menu .coner_wrap_right{ flex: 0 1 auto; min-width: 0; } /* 右ブロックは 落札車両管理 / その他 を横に並べ、SNS だけ下段に回す。 既存の padding-left:50px は仕切り線から離れすぎるため打ち消す （列間の余白は各列の padding 22px で揃える）。 */ .main_nav_menu .coner_wrap_right{ padding-left: 0; } .main_nav_menu .coner_wrap_right > ul:not(.sns_links){ flex: 0 0 auto; } .main_nav_menu .coner_wrap_left, .main_nav_menu .coner_wrap_right{ display: flex; align-items: stretch; gap: 0; } /* 見出し + リンクの塊を、メガメニューの1枠と同じ見た目にする */ .main_nav_menu .coner_wrap_left ul:not(.sns_links), .main_nav_menu .coner_wrap_right ul:not(.sns_links){ width: auto; min-width: 210px; padding: 0 22px; border-right: 1px solid #f0f2f0; } /* 各列は中身なりの幅にし、余白は右端へ逃がす。 「お気に入り・入札　終了車両」を1行に収めるため 3列目だけ広めに取る。 */ .main_nav_menu .coner_wrap_left ul:not(.sns_links){ min-width: 0; } .main_nav_menu .coner_wrap_left ul:not(.sns_links):nth-of-type(1){ min-width: 195px; } .main_nav_menu .coner_wrap_left ul:not(.sns_links):nth-of-type(2){ min-width: 210px; } .main_nav_menu .coner_wrap_left ul:not(.sns_links):nth-of-type(3){ min-width: 235px; } .main_nav_menu .coner_wrap_right ul:not(.sns_links){ min-width: 195px; } /* 右端の区切り線は出さない */ .main_nav_menu .coner_wrap_right ul:not(.sns_links):last-of-type{ border-right: none; } .main_navItem p{ margin: 0 0 10px; padding-bottom: 8px; font-size: 12px; font-weight: bold; color: var(--c-green-dark); letter-spacing: .04em; border-bottom: 1px solid #ecefe9; } .main_nav_menu .coner_wrap_left ul li, .main_nav_menu .coner_wrap_right ul li{ padding: 0; } .main_nav_menu .main_navItem li a{ display: block; padding: 7px 10px; border-radius: 4px; font-size: 13px; line-height: 1.5; color: #333; /* 1項目1行に収める（「お気に入り・入札　終了車両」等の途中改行を防ぐ）。 Notes on using は
で明示的に改行しているため影響しない。 */ white-space: nowrap; } /* ホバーはグロナビ・メガメニューと同じオレンジ系に揃える */ .main_nav_menu .main_navItem li a:hover{ background: #fff6e8; color: #d97d00; opacity: 1; text-decoration: none; } /* SNS は列として扱わず、「その他」列の下に小さく添える。 右端からはみ出さないよう、列の幅が広がったぶんはここで吸収する。 */ /* SNS は「その他」列の右隣・見出しと同じ高さに置く */ .main_nav_menu .main_navItem+.sns_links{ width: auto; min-width: 0; flex: 0 0 auto; border-right: none; /* #2460 PC は LINE / X を縦に並べる (SP のハンバーガーメニュー内は横並びのまま) */ flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0 22px; gap: 12px; } /* SNS の li は上のリンク用指定(width/padding)の影響を受けるため、ここで戻す */ .main_nav_menu .sns_links li{ width: auto; flex: none; } .main_nav_menu .sns_links li a{ display: inline-block; padding: 0; } .main_nav_menu .sns_links li a:hover{ background: none; } .main_nav_menu .sns_links img{ display: block; width: 30px; height: 30px; } } /* #2460 1170px 未満は 5列 + SNS が横に収まらず、列が縮んで区切り線が「お気に入り・入札　終了車両」に かかり、1100px 未満では列どうしが重なり SNS が画面外へ出ていた (899px 以下はハンバーガー)。 文字は縮めず、過去車両一覧 (2項目) を 出品する (2項目) の下に積んで 1列減らす。 入札する (6項目) と 出品する + 過去車両一覧 の高さがほぼ揃う。落札車両管理 / その他 / SNS は 1170px 以上と同じ。 出品専用業者は 入札する が無いので、出品する + 過去車両一覧 の 1列になる (左ブロックの ul は後ろから数えて 3つ目を 入札する とみなすので、有無に左右されない) */ @media screen and (min-width: 900px) and (max-width: 1169px){ .main_nav_menu .coner_wrap_left{ display: grid; grid-auto-columns: auto; /* 1段目は 出品する の高さぴったりにし、過去車両一覧を直下に置く (余りは 2段目へ) */ grid-template-rows: auto 1fr; row-gap: 22px; } .main_nav_menu .coner_wrap_left > ul:not(.sns_links){ grid-column: 1; } /* 入札するがあるときは 1列目を縦に通し、出品する / 過去車両一覧 を 2列目に積む */ .main_nav_menu .coner_wrap_left > ul:nth-last-of-type(3){ grid-row: 1 / span 2; } .main_nav_menu .coner_wrap_left > ul:nth-last-of-type(3) ~ ul{ grid-column: 2; } /* 列の最小幅は 1段表示で揃えるためのもの。積んだ列は中身なりにして幅を空ける */ .main_nav_menu .coner_wrap_left ul:not(.sns_links):nth-of-type(n), .main_nav_menu .coner_wrap_right ul:not(.sns_links){ min-width: 0; } /* 積んだ 2つの ul は縦線を引かない (途中で途切れる)。列の区切りは 入札する の右と右ブロックの左で出る */ .main_nav_menu .coner_wrap_left > ul:not(.sns_links):nth-last-of-type(-n+2){ border-right: none; } } /* ============================================================ #2460 Phase B : ログイン後TOP ============================================================ */ /* ---- クイックアクセス ---- */ .quick_access{ display: flex; gap: 12px; margin: 0 0 24px; } .quick_access_item{ flex: 1 1 0; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border: 1px solid #e3e6e3; border-radius: 6px; color: #333; box-sizing: border-box; transition: border-color .15s, background .15s; } .quick_access_item:hover{ background: #fff6e8; border-color: #f0c99a; color: #d97d00; text-decoration: none; } .quick_access_item .gnav_icon{ /* デザイン案どおり大きめの緑アイコン（塗りベースのため stroke は使わない） */ width: 34px; height: 34px; flex: none; color: var(--c-green-dark); } .quick_access_item:hover .gnav_icon{ color: #d97d00; } .quick_access_body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; } .quick_access_title{ font-size: 15px; font-weight: bold; line-height: 1.3; color: #333; } /* #888 は白地でコントラスト 3.54 と基準(4.5)に届かない (#2460) */ .quick_access_note{ font-size: 11px; color: var(--c-text-weak); line-height: 1.4; } .quick_access_item:hover .quick_access_note{ color: #c08a3e; } /* ---- お知らせ横の案内カード ---- */ /* お知らせと案内カードを横並びにし、高さを揃える */ /* #2460 以前は stretch でカード側をニュース欄の高さまで引き伸ばしていたが、 中身の少ないカードに大きな空白ができていた。上端だけ揃える。 */ .top_content_wrap.flex-box-col:has(.info_cards){ align-items: flex-start; } .top_content_wrap .newsArea{ flex: 1 1 auto; min-width: 0; } .info_cards{ display: flex; flex-direction: column; gap: 12px; flex: 0 0 300px; margin-left: 20px; } /* #2460 カードを引き伸ばして隣のニュース欄と高さを揃えていたが、 中身が2行しかないカードに 83〜105px の空白ができ、 ボタンだけが底に張り付いて見えていた。 高さは中身に任せ、余ったぶんは下に空ける(揃えるのは上端だけでよい)。 */ .info_cards .info_card{ flex: 0 0 auto; justify-content: flex-start; padding: 14px 16px; gap: 8px; } /* 見出しが1行のカードと2行のカードでボタンの高さがずれるので、 本文とボタンの間だけを伸縮させて下端を揃える */ .info_cards .info_card .info_card_text{ flex: 1 1 auto; } .info_cards .info_card_text{ font-size: 11px; line-height: 1.5; } .info_card{ display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: #fff; border: 1px solid #e3e6e3; border-radius: 6px; box-sizing: border-box; } .info_card_head{ display: flex; align-items: center; gap: 8px; } .info_card_head .gnav_icon{ width: 20px; height: 20px; flex: none; color: var(--c-green-dark); } .info_card_title{ font-size: 14px; font-weight: bold; color: #333; } .info_card_text{ margin: 0; font-size: 12px; line-height: 1.6; color: #666; } .info_card_btn{ display: inline-block; align-self: flex-start; padding: 7px 16px; border: 1px solid #61ad35; border-radius: 4px; font-size: 12px; color: var(--c-green-dark); background: #fff; transition: background .15s ease, border-color .15s ease, color .15s ease; } /* hover はオレンジ。緑のベタ反転はサイトの他の白ボタンと語彙が違っていた */ .info_card_btn:hover{ background: var(--c-hover-bg); border-color: var(--c-hover-border); color: var(--c-hover-text); text-decoration: none; } @media screen and (max-width: 899px){ /* SP は縦積みにする */ .quick_access{ flex-wrap: wrap; gap: 8px; } .quick_access_item{ flex: 1 1 calc(50% - 4px); padding: 12px; gap: 8px; } .quick_access_item .gnav_icon{ width: 22px; height: 22px; } .quick_access_title{ font-size: 13px; } .quick_access_note{ display: none; /* SP は説明文を省いて2列に収める */ } .info_cards{ flex: 1 1 100%; margin-left: 0; margin-top: 16px; order: 2; /* 既存の .newsArea が order:1 を持つため明示する */ } } /* ============================================================ #2460 フッター周辺（ログイン前後で共通） デザイン案 07_login.png のフッターに合わせる。 掲載情報・リンク構成は現行を正とし、レイアウトと配色のみ合わせる。 ============================================================ */ /* ---- ご注意点: 黄緑ベタをやめ、左に見出し・右に2列の箇条書き ---- */ .foot_text{ margin-top: 40px; /* 下に余白を取らないとフッターと密着する */ padding: 0 0 40px; background: #fff; } .foot_text .foot_text-inner{ display: flex; align-items: flex-start; gap: 40px; max-width: 1150px; margin: 0 auto; padding: 30px 40px; /* 外側が白のため、少し濃いめの地色＋罫線で面を見せる */ background: #f2f3f0; border: 1px solid #e4e7e2; border-radius: 4px; text-align: left; } .foot_text .foot_text-inner h2{ flex: 0 0 auto; display: block; margin: 0; /* 見出しと内容を縦罫で区切る（お問い合わせと同じ意匠） */ padding: 2px 40px 2px 0; border-right: 1px solid #dfe3df; align-self: stretch; font-size: 15px; color: #333; border-bottom: none; white-space: nowrap; } .foot_text .foot_text-inner ul{ flex: 1 1 auto; /* デザイン案どおり2列に流す */ columns: 2; column-gap: 48px; margin: 0; } .foot_text .foot_text-inner ul > li{ /* #2460 文字が小さく読みづらいとの指摘で1.5倍(12px -> 18px)にしている */ font-size: 18px; line-height: 1.9; color: #555; break-inside: avoid; } /* ---- お問い合わせ欄: 緑の細枠（デザイン案準拠） ---- */ .Contact{ padding: 18px 24px; background: #fff; border: 1px solid #61ad35; border-radius: 4px; } .Contact .Contactl{ border-right-color: #dfe3df; } /* ---- フッター: ロゴ左 / リンク中央 / 会社情報右 ---- */ .footer-wrap{ background: #f2f2f0; border-top: 1px solid #e3e3df; padding-top: 0; } .footer-wrap .footer-main{ display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; max-width: 1150px; margin: 0 auto; padding: 22px 0 18px; text-align: left; } .footer-wrap .footer-main > *{ margin: 0; } .footer-wrap .footer-logo{ flex: 0 0 auto; width: auto; text-align: left; } .footer-wrap .footer-logo p{ margin: 0 0 6px; font-size: 12px; color: #555; } .footer-wrap .footer-logo img{ max-width: 210px; } .footer-wrap .footer-nav-area{ flex: 1 1 auto; min-width: 0; padding-top: 18px; } /* リンクは横並びで折り返す（既存の flex-box-col が縦積みになるのを打ち消す） */ .footer-wrap .footer-nav-area .footer-nav{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; width: auto; max-width: none; padding: 0; } .footer-wrap .footer-nav-area .footer-nav > li{ white-space: nowrap; } .footer-wrap .footer-company{ flex: 0 0 auto; font-size: 12px; line-height: 1.7; color: #555; text-align: left; } @media screen and (max-width: 899px){ .foot_text .foot_text-inner{ flex-direction: column; gap: 14px; padding: 22px 20px; } /* SPは縦積みのため、縦罫ではなく横罫で区切る */ .foot_text .foot_text-inner h2{ border-right: none; border-bottom: 1px solid #dfe3df; align-self: stretch; padding: 0 0 12px; } .foot_text .foot_text-inner ul{ columns: 1; } .footer-wrap .footer-main{ flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 20px 16px; } .footer-wrap .footer-logo, .footer-wrap .footer-company{ text-align: center; } .footer-wrap .footer-nav-area{ padding-top: 0; } } /* ============================================================ #2460 フッター周辺をデザイン案に合わせて整える（ログイン前後共通） ============================================================ */ /* ---- お問い合わせ: 間延びを詰め、番号を見出しの右に横並びにする ---- */ .Contact{ max-width: var(--content-w); margin-left: auto; margin-right: auto; padding: 16px 24px; } .Contact .Contactl, .Contact .Contactr{ /* 見出し・本文の右にアイコン、下に連絡先の枠を敷く（旧デザインの構成を踏襲） */ display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-items: start; column-gap: 16px; background-position: left top 2px; background-size: 62px auto; padding-left: 78px; min-height: 62px; box-sizing: border-box; min-height: 0; } .Contact .Contactl h3, .Contact .Contactr h3{ grid-column: 1; grid-row: 1; margin: 0 0 10px; font-size: 22px; } .Contact .Contactl p, .Contact .Contactr p{ grid-column: 1; grid-row: 2; margin: 0; font-size: 15px; line-height: 1.85; } /* 電話番号・メールアドレスは枠を外して右側に置く */ /* 連絡先は本文の下に、白地＋枠線の帯として幅いっぱいに敷く（旧デザインの構成）。 アイコンぶんの padding-left を打ち消し、アイコンの下も含めて全幅に広げる */ .Contact .Contactl .Contact_tel, .Contact .Contactr .Contact_mail{ grid-column: 1; grid-row: 3; /* #2460 アイコンぶんの padding-left を打ち消して全幅に広げる。 値を直書きすると PC で padding を 56px に変えたときに食い違い、 帯が枠の外へ 56px はみ出していた。 引き出し量は親 (.Contactl / .Contactr) が --contact-indent で決める。 */ margin-left: calc(var(--contact-indent, 112px) * -1); margin-right: 0; margin-top: 12px; background: #fff; border: 1px solid #dcdfd9; border-radius: 4px; padding: 11px 8px; font-size: 26px; font-weight: bold; color: var(--c-green-dark); text-align: center; line-height: 1.2; white-space: nowrap; } /* メール側はアドレスが長いぶん少しだけ小さくする */ .Contact .Contactr .Contact_mail{ font-size: 24px; } /* ---- ご注意点: お問い合わせと同じ幅に揃える ---- */ .foot_text .foot_text-inner{ max-width: var(--content-w); } /* ---- フッター: 3カラムを均等に、リンクは2段に収める ---- */ .footer-wrap .footer-main{ max-width: var(--content-w); align-items: flex-start; } .footer-wrap .footer-logo img{ max-width: 230px; } .footer-wrap .footer-nav-area .footer-nav{ gap: 2px 0; } /* カーネクストのロゴは出さない（デザイン案はテキストのみ） */ .footer-wrap .footer-company img{ display: none; } .footer-wrap .footer-company address{ margin: 0; font-style: normal; font-size: 12px; line-height: 1.7; } .footer-wrap .footer-company .copy{ margin: 4px 0 0; font-size: 11px; /* フッターの地色(#f2f2f0)の上では #777 はコントラスト 4.0 で基準に届かない。 白地より厳しくなるぶん一段暗くする (5.12) */ color: #666; text-align: left; } /* #2460 TOP/フッターの左右位置を全セクションで揃える（基準: --content-w） */ .Contact.container{ max-width: var(--content-w); } /* 枠は内側のカードで表現する */ /* 旧デザインと同じく、左右を1つの枠にまとめて中を縦罫で区切る。 アイコンは padding 領域に置くため、枠の左右余白はアイコンが窮屈にならない値にする */ .Contact{ background: #fff; border: 1px solid #61ad35; border-radius: 5px; /* 旧デザインは上下が詰まっており、それが密度の良さになっていた */ padding: 18px 36px; display: flex; gap: 0; } .Contact .Contactl, .Contact .Contactr{ /* 連絡先の帯を引き出す量。padding-left と必ず同じ値にする (#2460) */ --contact-indent: 112px; float: none; width: auto; flex: 1 1 0; background-color: transparent; border: none; border-radius: 0; /* アイコン(92px)＋間隔(20px) ぶんだけ左に空ける。左右で同じ値にする。 旧デザインはアイコンが枠幅の約9%あり、これがメリハリになっていた */ padding: 0 0 0 112px; background-size: 92px auto; background-position: left top 0; box-sizing: border-box; } /* 左右の区切りは縦罫のみ（旧デザインは1つの枠を罫線で分ける） */ .Contact .Contactl{ border-right: 1px solid #dfe3df; margin-right: 32px; padding-right: 32px; } /* 左側の帯は区切り線に接しないよう、右に余白を残す。 既存の `width: calc(100% - 22px)` が効いて幅が固定されるため auto に戻す */ .Contact .Contactl .Contact_tel{ width: auto; margin-right: 0; } .Contact .Contactr{ /* 縦罫からの入りぶんだけ、アイコンの開始位置もずらす */ padding-left: 112px; } @media screen and (max-width: 899px){ /* SP はカードを縦積みにし、本文の nowrap も解除する */ .Contact{ flex-direction: column; gap: 12px; padding: 12px; } .Contact .Contactl, .Contact .Contactr{ /* PC の flex: 1 1 0 (基準 0) のまま縦積みにすると、中身の高さを確保できず 29px に潰れて左右のブロックが重なっていた。縦積みでは中身なりにする */ -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 0; grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 14px 14px 14px 68px; background-size: 44px auto; background-position: left 14px top 14px; } .Contact .Contactr p{ white-space: normal; } /* SPはアイコンぶんの padding が異なるため、帯の負マージンも合わせる。 PC用の width:auto / margin-right:-32px も打ち消す */ .Contact .Contactl .Contact_tel, .Contact .Contactr .Contact_mail{ /* auto だと内容なりに縮むため、SPでは枠いっぱいに広げる */ width: calc(100% + 68px); margin-left: -68px; margin-right: 0; } .Contact .Contactl .Contact_tel{ margin-right: 0; } /* SPは縦積みのため、左右を分ける縦罫は出さない */ .Contact .Contactl{ border-right: none; padding-right: 14px; border-bottom: 1px solid #dfe3df; padding-bottom: 14px; } .Contact .Contactl h3, .Contact .Contactr h3{ font-size: 15px; } .Contact .Contactl p, .Contact .Contactr p{ font-size: 12px; } /* 連絡先は本文の下に置く */ .Contact .Contactl .Contact_tel, .Contact .Contactr .Contact_mail{ grid-column: 1; grid-row: 3; justify-self: start; padding: 8px 0 0; font-size: 17px; white-space: normal; word-break: break-all; } } /* 連絡先の文字を大きくしたぶん、先頭のアイコンも合わせる */ .Contact .Contactl .Contact_tel img{ width: 28px; margin-right: 8px; } .Contact .Contactr .Contact_mail img{ width: 24px; margin-right: 8px; } /* #2460 ご注意点: 詰まって見えないよう行間と項目間にゆとりを持たせる */ .foot_text .foot_text-inner ul > li{ line-height: 1.9; } .foot_text .foot_text-inner ul > li:not(:last-child){ margin-bottom: 18px; } /* #2460 業者向けページ(ログイン前後とも)はコンテンツ幅を統一する。 ページ別CSS(auctions.css / marketprice.css)の読み込み有無に左右されないよう 全ページ共通の default.css に置く。 基準はフッター中身と同じ --content-w(1540px)。 ヘッダ(ロゴ・グロナビ)・本文・お問い合わせ・ご注意点・フッターの左右端を揃える。 以前は本文だけ 1150px でフッターより狭く、「フッターだけ幅が違う」ように見えていた。 管理画面(default_for_admin)には .head_bg が無いため、この指定は届かない。 */ body:has(.head_bg) .container, body:has(.head_bg) .narrow{ max-width: var(--content-w); } /* 本文の外枠（.head_height.container）も同じ幅 */ body:has(.head_bg:not(.no_login)) .head_height.container{ max-width: var(--content-w); } /* 本文は .head_height.container の直下に置かれており、 間に .container を挟まないページ（一覧など）もある。 フッター周辺を除いた本文ブロックをまとめて基準幅に収める。 */ body:has(.head_bg:not(.no_login)) .head_height.container > *:not(.Contact):not(.foot_text):not(.footer-wrap){ max-width: var(--content-w); margin-left: auto; margin-right: auto; } /* #2485 未ログイントップも本文幅を基準幅に統一する。 以前はセクションごとに 860px / 976px / 1865px と幅がばらついていた。 */ body:has(.head_bg.no_login) .lp_contents .container, body:has(.head_bg.no_login) .lp_contents .narrow{ max-width: var(--content-w); } /* 「Smartオークションとは？」だけ 860px と狭く、 中の訴求バーが負のマージン(-110px)で親からはみ出していた。 親を基準幅にして、はみ出しの打ち消しを不要にする。 */ body:has(.head_bg.no_login) .member_xhibit_head{ max-width: var(--content-w); } /* よくある質問は .topfaq .container{max-width:976px} で1人だけ狭い */ body:has(.head_bg.no_login) .topfaq .container{ max-width: var(--content-w); } /* ============================================================ #2460 フッター周辺の幅 ------------------------------------------------------------ お問い合わせ／ご注意点／フッター中身も本文と同じ基準幅に揃える。 ============================================================ */ .Contact, .Contact.container, .Contact.container.narrow, .foot_text .foot_text-inner{ max-width: var(--content-w); } /* .container 併用ページでは width:calc(100% - 20px) で左右に 10px ずつ空くため、 max-width をそのまま使わせて他要素と左右位置を揃える。 */ .Contact.container{ width: 100%; } .footer-wrap .footer-main{ max-width: var(--content-w); /* 画面が基準幅未満のとき中身が画面端に密着するため左右に余白を持たせる */ padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* #2485 グループ運営サービス(ログイン前のみ)。 グループ各社への参考リンクであり、サイト内の主要導線ではない。 以前は Bootstrap 既定の青(#428bca)・14px で、本体のフッターリンク (黒・太字・14px)より目立っていたため、一段弱い補足として整える。 */ .footer-wrap .group-section{ /* 3カラムの外に置き、フッター本体と同じ幅を使う */ max-width: var(--content-w); margin: 0 auto; padding: 12px 20px 18px; border-top: 1px solid #e3e3df; box-sizing: border-box; text-align: center; } .footer-wrap .group-title{ /* 「■」は装飾。見出しも本文より弱くする。 ただし地色(#f2f2f0)の上で #888 は 3.16 と基準に届かないため 弱く見える範囲でぎりぎり濃くする (#2460) */ font-size: 12px; font-weight: normal; color: #6e6e6e; margin-bottom: 4px; } /* リンクは流し込みにして、行ごとの隙間をなくす */ .footer-wrap .group-link{ margin-top: 0; padding-right: .9em; line-height: 1.9; } .footer-wrap .group-link a{ font-size: 12px; /* 地色(#f2f2f0)の上で #777 は 4.00 と基準に届かない (#2460) */ color: #666; text-decoration: none; } .footer-wrap .group-link a:hover{ color: var(--c-green-dark); text-decoration: underline; } /* 区切りの縦罫は文字が小さくなったぶん細く・薄くする */ .footer-wrap .group-link::after{ height: 1em; top: 50%; transform: translateY(-50%); margin-right: .25em; background-color: #d5d5d5; } /* #2485 フッターはログイン前後で同じ体裁にする。 以前は :not(.no_login) が付いており、ログイン前だけ狭いままで リンクが縦に積まれて間延びしていた。 */ .footer-wrap .footer-main{ max-width: var(--content-w); } /* #2460 基準幅未満の画面(1366px など)での左右余白。 お問い合わせ(#contact_to)は .head_height.container の外に置かれているが、 本文側の div が閉じ切らないページでは内側に入るなど、親の幅がページで変わる。 親に頼らず「画面幅 − 左右10px」を上限にして、.container(width:calc(100% - 20px)) と同じ左右位置に揃える。SP は従来の見せ方(お問い合わせ・フッターは全幅)を変えない。 */ @media screen and (min-width: 900px){ .Contact.container, .foot_text .foot_text-inner, .footer-wrap .footer-main, .footer-wrap .group-section{ width: min(var(--content-w), calc(100vw - var(--sbw, 0px) - 20px)); max-width: 100%; margin-left: auto; margin-right: auto; } /* 左右の余白は上の width で取るので、内側の padding は持たせない (持たせると 1920px でロゴの左端が本文より 20px 内側に入る) */ .footer-wrap .footer-main, .footer-wrap .group-section{ padding-left: 0; padding-right: 0; } } /* ---- フッターの地色を画面の横いっぱいまで塗る ---- .footer-wrap は基準幅(--content-w)の .head_height.container の内側にあるため、 そのままでは左右に地色が届かず白が残る。 ビューポート幅まで広げて中身だけ元の位置に戻す。 （--sbw はスクロールバー幅。ヘッダのJSで設定している） */ .footer-wrap{ width: calc(100vw - var(--sbw, 0px)); margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2); margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2); } /* ============================================================ #2460 Phase F 業者ページのトンマナ統一 一覧ページ（リユース等）で整えた語彙を、落札・受注管理 / 自社出品管理 / 見積依頼 / 入金一覧 / お知らせ / ダウンロード / 会員情報にも広げる。 ページごとのCSSに書くとそのCSSを読まないページだけ体裁が変わるため、 全ページで効かせたい指定はこのファイルに集約する（ガイドライン 4-4）。 ============================================================ */ /* ---- 見出し / 検索結果バー ---- .content_tt は全ページ共通の見出し。灰色のベタ塗り帯だったため ページ内で最も強い面になり、本文より目立っていた。 地色をやめて下罫線だけにし、強調は中の数字（緑・22px）に任せる。 */ .content_tt{ background: none; border-bottom: 1px solid #dcdfd9; padding: 0 0 8px; margin-bottom: 14px; font-size: 15px; font-weight: bold; color: #333; } /* 件数の数字は一覧ページと同じ見せ方に揃える（22px・緑）。 一覧ページは .reuse_auctions_content_tt 側で同じ指定を持っているが、 管理系ページは素の .content_tt のままだったため差が出ていた。 */ .content_tt .content_tt_s{ font-size: 22px; font-weight: bold; color: var(--c-green-dark); margin: 0 2px; } /* ---- 最低応札価格ページ（/guaranteed_prices） ---- このページだけ赤橙(#E94623)と真っ赤(#f00)のボタンで、 サイトのどの色とも揃っていなかった。主要動線なので緑に寄せる。 いずれも大きな面に白文字を載せるため、濃い側の緑でコントラストを確保する （#61ad35 に白文字はコントラスト2.79）。 */ .btn_orange{ background-color: #2f7d20; border-radius: 4px; font-size: 17px; padding: 14px 20px; } .btn_orange:hover{ background: #266617; } .btn_sell{ background-color: #2f7d20; border-radius: 4px; font-size: 20px; } /* 検索条件の枠を、他ページの検索バー（白地・枠線・角丸6px）に合わせる */ .area_main_box{ background: #fff; border: 1px solid #e3e6e3; border-radius: 6px; color: #333; } /* ---- 各種設定のタブ（/traders/edit ほか） ---- 非選択が灰色(#eee)・選択中が白という並びで、選択中のほうが弱く見えていた。 コーナータブや検索まわりと同じ語彙（白地・枠線 #dcdfd9・hoverはオレンジ、 現在地だけ緑で塗る）に揃える。白文字を載せるので濃い側の緑を使う。 */ .nav-tabs .content_tab a{ background: #fff; border: 1px solid #dcdfd9; border-bottom-color: #dcdfd9; color: #555; } .nav-tabs .content_tab a:hover{ background: #fff6e8; border-color: #f0c99a; color: #d97d00; } .nav-tabs .content_tab a:focus{ background-color: #fff; } .nav-tabs .content_tab.active a, .nav-tabs .content_tab.active a:hover, .nav-tabs .content_tab.active a:focus{ background-color: #2f7d20; border-color: #2f7d20; color: #fff; font-weight: bold; } /* ---- 上下の余白の基準（Phase F） ---- ヘッダは position:fixed で、.head_height の margin-top:100px は その逃げ分であって余白ではない。そのため本文の先頭要素は グローバルナビの帯にぴったり接していた（実測 ナビ下端 +0px）。 ページの区切りが読めるよう、先頭に余白を確保する。 本文幅に対して 36px は「詰まっていないが間延びもしない」量で、 見出し下の罫線(14px)・タイトル下(20px)と合わせて 「大きい余白＝章の始まり / 小さい余白＝章の中」の階層を作る。 先頭の子に margin-top を付ける方法は使えない。 .head_height.container の先頭には高さ0の link 要素が入っており、 :first-child がそれに当たってしまうため。コンテナ側に上パディングを持たせる。 */ body:has(.head_bg:not(.no_login)) .head_height.container{ padding-top: 36px; } /* TOPはメインビジュアルを画面幅いっぱいに見せるため、上余白を作らない。 #2484 ヒーロー(.top_hero_wrap)やログイン前MV(.mainVisual)がある トップも同じ扱いにする。付けたままだと MV とピックアップの間が空く */ body:has(.quick_access) .head_height.container, body:has(.top_hero_wrap) .head_height.container, body:has(.mainVisual) .head_height.container{ padding-top: 0; } /* 本文の終わりとお問い合わせの間。ページによって 0〜30px とばらついていた */ body:has(.head_bg:not(.no_login)) .head_height.container > .Contact{ margin-top: 40px; } /* 相場検索は .head_height.container が入れ子になっており、 ヘッダの逃げ分と上余白が二重にかかる。内側では打ち消す。 */ body:has(.head_bg:not(.no_login)) .head_height.container .head_height.container{ margin-top: 0; padding-top: 0; } /* ---- ページタイトルと「条件を変更する」ボタンの行 ---- タイトル(24px)とボタン(40px)がインライン要素の自然な並びに委ねられており、 文字の右端とボタンが密着し(実測0px)、縦位置も3pxずれていた。 flex で縦中央に揃え、間隔を明示する。 タイトルはテキストノードのままなので、flex ではなく行内の配置で揃える。 .main_tt を flex にすると、自社出品車両管理のように独自の左右分割 （.flex-box-col + width:-webkit-fill-available）を持つページが 2行に折り返れて崩れるため、display は変えない。 */ .main_tt{ line-height: 1.4; } /* ボタンはインライン要素として文字の隣に並ぶ。 文字の右端と密着していた(実測0px)ので間隔を持たせる。 縦位置はベースライン揃えだと 3px 上にずれるため中央に揃える。 */ .main_tt .search_bar_detail{ margin-left: 16px; vertical-align: middle; } /* ---- パンくずリスト ---- グローバルナビの下に現在地を出す。本文の一部ではなく「位置の表示」なので、 本文より一段小さく・淡くして、タイトルの手前に置く。 コンテナの上余白(36px)はパンくずの上に効くため、パンくず自身は 上を詰めて下にだけ余白を持たせ、タイトルとの間隔を作る。 */ .breadcrumb_nav{ margin: 0 0 14px; } .breadcrumb_list{ display: flex; align-items: center; flex-wrap: wrap; /* 区切り記号ぶんの間隔。行が折り返しても詰まらないようにする */ row-gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.5; color: #555; } .breadcrumb_list .breadcrumb_item{ display: flex; align-items: center; } /* 区切りは「>」。文字ではなく罫線で描いて字送りに左右されないようにする */ .breadcrumb_list .breadcrumb_item + .breadcrumb_item:before{ content: ""; width: 5px; height: 5px; margin: 0 9px; border-top: 1px solid #b9beb3; border-right: 1px solid #b9beb3; transform: rotate(45deg); } .breadcrumb_list .breadcrumb_item a{ color: #555; text-decoration: none; } .breadcrumb_list .breadcrumb_item a:hover{ color: #d97d00; text-decoration: underline; } /* 現在地は行き先が無いので色で区別する。ここだけ本文色にして終点を示す */ .breadcrumb_list .breadcrumb_item.is_current{ color: #333; font-weight: bold; } @media screen and (max-width: 899px){ .breadcrumb_nav{ margin: 0 0 12px; } .breadcrumb_list{ font-size: 11px; } .breadcrumb_list .breadcrumb_item + .breadcrumb_item:before{ margin: 0 7px; } } /* ---- リンクの折り返し ---- 基底の a{word-break:break-all} が全ページのリンクに効いており、 英数字が単語の途中で切れていた（Important Note / s Regarding …）。 日本語は任意の位置で折れてよいが、英単語やURLは単語単位で折るほうが読める。 break-all をやめて anywhere にする。長い連続文字（URL等）は はみ出す前に折り返すので、枠を割る心配は残らない。 */ a{ word-break: normal; overflow-wrap: anywhere; } /* ---- ご注意点の箇条書きマーカー ---- 直径14pxの黒丸が本文12pxより大きく、箇条書きの記号ではなく 「点」として悪目立ちしていた。さらに padding-left:18px に対して 14pxの円なので、文字との間隔が4pxしか残っていなかった。 文字サイズに対して自然な大きさ(5px)に絞り、色も本文より一段淡くする。 縦位置は top:0 固定だと行の上端に付くため、1行目の中心に合わせる。 */ .foot_text .foot_text-inner ul > li{ padding-left: 15px; } .foot_text .foot_text-inner ul > li::before{ width: 5px; height: 5px; background: #61ad35; /* 1行目の中心に合わせる。line-height:1.3・文字12px で実測して詰めた値 */ top: .74em; left: 2px; } /* ---- ページタイトルの見せ方 ---- 【】で囲んで強調していたが、記号に頼らず見出しだと分かるようにする。 左に緑の縦線を置き、下罫線と合わせて見出しの範囲を示す。 ボタンが隣に並ぶため、縦線は文字の高さぶんだけにして 行全体には伸ばさない（::before を絶対配置して行の高さに追従させない）。 */ .main_tt{ position: relative; /* 縦線(3px)＋文字との間隔。詰まって見えるとの指摘で広げた (#2460) */ padding-left: 17px; } .main_tt::before{ content: ""; position: absolute; left: 0; /* 1行目の文字の高さに合わせる。行送り(1.4)の上下の空きを除いた分 */ top: .22em; width: 3px; height: 1em; border-radius: 2px; background: #61ad35; } /* ---- メガメニューの項目に緑の横ライン (#2460) ---- 各項目の下端に緑のラインを引き、hover で左から右に伸ばす。 既存の border-bottom(3px transparent) の上に重ねる。 */ .gnav_mega_inner > li > a{ position: relative; overflow: hidden; } .gnav_mega_inner > li > a::before{ content: ""; position: absolute; left: 0; /* 既存の border-bottom(3px) の位置に重ねる */ bottom: 0; width: 100%; height: 3px; background: #61ad35; /* 既定は幅0（左端に畳んだ状態）。hover で右に伸ばす */ transform: scaleX(0); transform-origin: left center; transition: transform .2s ease; } .gnav_mega_inner > li > a:hover::before{ transform: scaleX(1); } /* 現在地は常に引いておき、色を濃い緑にして hover と区別する。 既存の border-bottom-color(#61ad35) と重なって線が2本に見えるため、 border 側は透明に戻して ::before の1本だけにする。 */ .gnav_mega_inner > li > a.is-current{ border-bottom-color: transparent; } .gnav_mega_inner > li > a.is-current::before{ transform: scaleX(1); background: #2f7d20; } /* 補足文の #888 は白地にコントラスト3.54で、11pxの小さな文字には 足りない。補助文字色 #555(7.46) に寄せる */ .gnav_mega_note{ color: #555; } /* ---- グロナビの文字を1.2倍にする (#2460) ---- 文字が小さく読みづらいとの指摘で、13px -> 15.6px にしている。 (1.5倍の 19.5px は大きすぎたため 1.2倍に落とした) 8項目を nowrap で1行に並べているため、画面が狭いときは縮め、 下限は従来の 13px とする。 アイコンは文字との比率(18px / 13px)を保つよう em で指定する。 */ .head_gnav_inner > li > a{ font-size: clamp(13px, 1.6vw, 15.6px); } .head_gnav_inner > li > a .gnav_icon{ width: 1.385em; height: 1.385em; } /* メガメニューも同じく1.2倍 (14px -> 16.8px / 11px -> 13.2px) */ .gnav_mega_label{ font-size: 16.8px; } .gnav_mega_note{ font-size: 13.2px; } /* _________________________________________ 未ログイン ヘッダー トンマナ統一 #2485 ログイン後(#2460)と同じ白ベースに揃える。 auctions.css はページ個別読み込みでヘッダーに届かないため default.css に置く。 _________________________________________ */ /* ---- ヘッダー ---- ログイン後は緑帯を出さず白ベース(70px)。未ログイン側だけ 緑帯(#61ad35)+100px が残っていたため揃える。 h1 は SEO 上 DOM に残す必要があるので、ログイン後と同じく視覚的にのみ隠す。 */ .head_bg.no_login{ --head-h: 70px; background: #fff; border-bottom: 1px solid #dfe3df; } /* #2485 --head-h はヘッダー要素に付けても、兄弟の .head_height には 届かない(:root の 100px を見てしまう)。本文の逃げ分が実際の ヘッダー高さ(70px)より30px大きく、MVの上に隙間ができていた。 未ログインの本文側にも同じ値を与える */ body:has(.head_bg.no_login) .head_height.no_login{ --head-h: 70px; } /* MV は画面幅いっぱいに見せる。 親の .container が width:calc(100% - 20px) のため左右に10pxずつ 白が残っていた。スクロールバーぶん(--sbw)を除いた全幅まで広げる */ body:has(.head_bg.no_login) .head_height.no_login > .mainVisual{ width: calc(100vw - var(--sbw, 0px)); max-width: none; margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2); margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2); } .head_bg.no_login .h1-container{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 緑帯が無くなるぶん、ロゴ行を 70px の中で縦中央に置く */ .head_bg.no_login .head_logoArea{ height: 70px; display: flex; flex-direction: row; align-items: center; } /* 未ログインのヘッダーボタン。ログイン後の .head_right_div の 「お問い合わせ」ボタンと同じ語彙(緑の塗り / 白抜き)に揃える */ .head_bg.no_login #login_btn_box{ gap: 8px; align-items: center; } .head_bg.no_login #login_btn_box a{ display: inline-block; padding: 8px 18px; border-radius: 4px; font-size: 14px; font-weight: bold; line-height: 1.2; text-decoration: none; } /* 新規会員登録 = 主要導線なので塗り */ /* #2484 新規会員登録はサイト内のどこでも同じオレンジにする。 白文字を載せるので濃い側 (#f38900 は白文字でコントラスト2.50) */ .head_bg.no_login #login_btn_box li:first-child a{ background: #f07c00; border: 1px solid #f07c00; color: #fff; } .head_bg.no_login #login_btn_box li:first-child a:hover{ background: #d86e00; border-color: #d86e00; } /* #2484 ログインは緑で統一する (下部固定バーと同じ)。 以前は「副次導線なので白抜き」としていたが、同じページ内で 白と緑が混在して見えるため揃えた */ .head_bg.no_login #login_btn_box li:last-child a{ background: #61ad35; border: 1px solid #61ad35; color: #fff; } .head_bg.no_login #login_btn_box li:last-child a:hover{ background: var(--c-green-hover); border-color: var(--c-green-hover); color: #fff; } @media screen and (max-width: 899px){ .head_bg.no_login{ --head-h: 70px; } .head_bg.no_login #login_btn_box a{ padding: 6px 10px; font-size: 12px; white-space: nowrap; } } /* 390px ではロゴ (200px) とボタン2つが 370px に収まらず、 ボタンが押し縮められて「新規会員/登録」「ログイ/ン」と折り返していた。 ロゴは幅 145px (余白込み 162px) */ @media screen and (max-width: 480px){ .head_bg.no_login{ --logo-h: 17px; } .head_bg.no_login #login_btn_box{ gap: 6px; -ms-flex-negative: 0; flex-shrink: 0; } .head_bg.no_login #login_btn_box a{ padding: 7px 9px; } } /* _________________________________________ ヒーロー スライドショー #2485 ヒーローをスライド化する。スライドが1枚のときは JS 側で slick を 掛けないため、以下は2枚以上のとき (.slick-initialized) だけ効く。 未ログイン(.mainVisual) / ログイン後(.top_hero_wrap) で中身は違うが 矢印・ドットの見た目は共通にする。 _________________________________________ */ .hero_slider.slick-initialized{ /* スライド中に高さが暴れないようにする。 slick-track は画面幅を超えて伸びるので、はみ出しはここで切る */ position: relative; overflow: hidden; } /* slick はスライドを display:block の直下に並べ替えるため、 中の .container が持っていた中央寄せが効かなくなる。 スライド自身を幅100%にして、中身側の中央寄せに任せる */ .hero_slider .slick-slide{ height: auto; } /* スライド化すると直下の子要素(.mainVisual-inner / .top_hero)自身が .slick-slide になる。slick が float を当てるため float:none に戻す。 #2484 以前はここで margin:auto も当てて中央寄せしていたが、 centerMode + flex では auto マージンが余white を全部吸ってしまい、 スライドが slick の計算幅(1152px)から 676px まで縮んでいた。 中央寄せは .slick-track の flex に任せるので margin は当てない。 */ .hero_slider .slick-slide{ float: none; } /* #2485 スライドは枠いっぱいに使う。 以前は1枚目の max-width(1050px) をスライド自体が受け継いでいたため、 1920px では 853px しか使えず、左右に土台(.mainVisual)の背景写真が 見えたままだった。2枚目(.top_hero)は全幅前提のデザインなので、 幅の制御は中身側(.mainVisual-inner)に持たせる。 #2484 centerMode にしたので、スライドの幅は slick が計算した値 (両端を覗かせるぶん狭い) をそのまま使う。以前ここで width:100% を !important で固定していたが、それをやると全スライドが画面幅に なってしまい両端が覗かなくなる */ /* #2484 slick は1枚目のスライドの margin を差し引いて全スライドの幅を決める。 管理画面のバナー (.mainVisual-inner) が1枚目に来ると、素の .mainVisual .mainVisual-inner{margin:0 auto} が横に並んだトラック内で 左右 3,000px 超に解決され、全スライドの幅が 0 になって縦に 3,600px 伸びていた。 スライダー内では margin を持たせない */ .mainVisual.hero_slider .slick-slide{ margin: 0; max-width: none; -webkit-box-sizing: border-box; box-sizing: border-box; } /* 1枚目は .mainVisual-inner 自身がスライドになる。 スライドを全幅にしたので、中身の中央寄せは内側の子で行う */ .mainVisual.hero_slider .mainVisual-inner{ display: flex; justify-content: center; } .mainVisual.hero_slider .mainVisual-inner > *{ max-width: 1050px; width: 100%; } /* #2484 管理画面から入稿するバナーのスライド。 画像1枚だけのスライドなので、他のスライドと天地を揃えて中央に置く */ .mainVisual.hero_slider .mainVisual-bnr{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 431px; padding: 20px 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .mainVisual.hero_slider .mainVisual-bnr img{ display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; } @media screen and (max-width: 899px){ .mainVisual.hero_slider .mainVisual-bnr:not(.hero_slider--scaled *){ min-height: 0; padding: 12px 0; } } /* #2484 centerMode では slick が横に並べるので、float:none にした スライドが縦に積まれないよう flex で並べ直す。 高さを揃えて、中央と両端の天地を合わせる */ .hero_slider.slick-initialized .slick-track{ display: flex; align-items: stretch; } /* 両端のスライドは主役ではないので、少し落として中央を目立たせる */ .hero_slider.slick-initialized .slick-slide{ opacity: .45; transition: opacity .4s; } .hero_slider.slick-initialized .slick-slide.slick-center{ opacity: 1; } /* #2484 矢印・ドットのデザイン。 白丸+影の矢印と slick 既定の文字ドットは野暮ったいと指摘を受けたため、 支給の参考デザインに合わせて作り直した。 - 矢印は地を敷かず、青い山形(シェブロン)だけを大きく細く置く - ドットは全て同じ大きさの塗り円。現在位置だけ青、他はグレー 色は参考デザインの実測値 (矢印 #1a5498 / 現在 #285e9e / 他 #7b7b7b) */ .hero_slider .slick-prev, .hero_slider .slick-next{ width: 34px; height: 44px; z-index: 2; background: none; border-radius: 0; box-shadow: none; } /* 上流の汎用ルール (.slick-prev{left:0 !important}) に負けて 矢印が画面の左右端に貼り付き、スライドの文字に重なっていた。 !important 同士で詳細度勝ちさせて内側に戻す */ .hero_slider .slick-prev{ left: 16px !important; } .hero_slider .slick-next{ right: 16px !important; } .hero_slider .slick-prev:hover, .hero_slider .slick-next:hover{ background: none; } /* slick 既定の矢印は絵文字。山形を自前で描くため消す */ .hero_slider .slick-prev:before, .hero_slider .slick-next:before{ content: ""; display: block; width: 17px; height: 17px; margin: 0 auto; border-top: 4px solid #fff; border-right: 4px solid #fff; opacity: 1; transition: border-color .15s; } .hero_slider .slick-prev:before{ -webkit-transform: translateX(3px) rotate(-135deg); transform: translateX(3px) rotate(-135deg); } .hero_slider .slick-next:before{ -webkit-transform: translateX(-3px) rotate(45deg); transform: translateX(-3px) rotate(45deg); } .hero_slider .slick-prev:hover:before, .hero_slider .slick-next:hover:before{ border-color: #e8e8e8; } /* 白い地の 1枚目でも写真の 2枚目以降でも読めるよう、黒い影を重ねる。 centerMode では両端の淡いスライドの上にも載るため、輪郭用の硬い影を 2本重ねて縁取りに近づけている */ .hero_slider .slick-prev:before, .hero_slider .slick-next:before{ -webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 2px rgba(0, 0, 0, .7)) drop-shadow(0 2px 5px rgba(0, 0, 0, .5)); filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 2px rgba(0, 0, 0, .7)) drop-shadow(0 2px 5px rgba(0, 0, 0, .5)); } /* 矢印は覗いているスライドの上に重なるので、最前面に置く */ .hero_slider .slick-prev, .hero_slider .slick-next{ z-index: 5; } .hero_slider .slick-dots{ bottom: 12px; line-height: 0; } .hero_slider .slick-dots li{ width: 18px; height: 18px; margin: 0 4px; vertical-align: middle; } .hero_slider .slick-dots li button{ width: 18px; height: 18px; padding: 0; } /* 塗り円で描く。slick 既定の「・」(文字) は使わない。 1枚目は白地・2枚目以降は写真と、載る地の明るさが逆になる。 白の濃淡で現在位置を示すと白地で見分けが付かなくなるため、 「現在 = 白の塗り + 濃い縁」「他 = 塗らず縁だけ」で形の差にした。 縁と影を黒で回すので、どちらの地でも輪郭が残る */ .hero_slider .slick-dots li button:before{ content: ""; display: block; width: 10px; height: 10px; margin: 4px; border-radius: 50%; background: transparent; border: 2px solid rgba(255, 255, 255, .95); -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 1; text-shadow: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .5); transition: background-color .15s; } /* 現在位置は中を濃く塗る。白で塗ると白地のスライドで 背景と同化して「どれが現在か」が分からなくなる。 白い縁は残すので、写真の上でも丸の形は保たれる */ .hero_slider .slick-dots li.slick-active button:before{ width: 12px; height: 12px; margin: 3px; background: #1f1f1f; border-color: #fff; } .hero_slider .slick-dots li button:hover:before{ background: rgba(31, 31, 31, .55); } .hero_slider .slick-dots li.slick-active button:hover:before{ background: #000; } @media screen and (max-width: 899px){ .hero_slider .slick-prev, .hero_slider .slick-next{ width: 26px; height: 36px; } .hero_slider .slick-prev{ left: 6px !important; } .hero_slider .slick-next{ right: 6px !important; } /* #2484 山形も一回り小さくする */ .hero_slider .slick-prev:before, .hero_slider .slick-next:before{ width: 13px; height: 13px; border-top-width: 3px; border-right-width: 3px; } .hero_slider .slick-dots li, .hero_slider .slick-dots li button{ width: 16px; height: 16px; } .hero_slider .slick-dots li{ margin: 0 3px; } .hero_slider .slick-dots li button:before{ width: 9px; height: 9px; margin: 3.5px; } .hero_slider .slick-dots li.slick-active button:before{ width: 10px; height: 10px; margin: 3px; } } /* #2484 SP / タブレットでは MV を PC のまま縮小しているため、スライドの上に矢印を 重ねると選手の顔にかかり (実測 390px で右端の選手)、押せる大きさも 26x36px しかない。 スライドの下に操作の行を設け、前へ / ドット / 次へ をそこに並べて 32px 角にする */ @media screen and (max-width: 899px){ /* ドットは通常の流れでスライドの下に置かれる (position: static)。 その行を 44px にして、矢印を同じ行に下端から揃える */ .hero_slider .slick-dots{ margin: 6px 0; } .hero_slider .slick-dots li, .hero_slider .slick-dots li button{ width: 32px; height: 32px; } .hero_slider .slick-dots li{ margin: 0; } .hero_slider .slick-dots li button:before{ margin: 11.5px; } .hero_slider .slick-dots li.slick-active button:before{ margin: 11px; } .hero_slider .slick-prev, .hero_slider .slick-next{ top: auto; bottom: 6px; width: 32px; height: 32px; -webkit-transform: none; transform: none; } /* 左端にあった停止ボタンを外したので、前へは左端に寄せて次へと左右対称にする */ .hero_slider .slick-prev{ left: 6px !important; } .hero_slider .slick-next{ right: 6px !important; } /* 写真の上ではなく白地に載るので、影で縁取らず青の山形にする */ .hero_slider .slick-prev:before, .hero_slider .slick-next:before{ border-color: #1a5498; -webkit-filter: none; filter: none; } .hero_slider .slick-prev:hover:before, .hero_slider .slick-next:hover:before{ border-color: #285e9e; } } /* _________________________________________ お問い合わせブロックの大きさ (#2460) 全ページの最下部に同じものが出るが、アイコン92px(本文14pxの6.5倍)・ 見出し21px・電話番号22px・全体234px と、業務画面の付属物としては大きすぎた。 実測で見積依頼の一覧では「お問い合わせ + ご注意点」だけで 画面の 40.8%、支払請求管理で 38.5% を占めていた。 情報は一切減らさず、寸法だけ本文との関係が自然な比率に整える。 緑の太枠(4px)も、ページ内で最も強い枠線になっていたのでやめる。 _________________________________________ */ @media screen and (min-width: 900px){ .Contact{ padding: 18px 24px; background: var(--c-bg-subtle); border: 1px solid var(--c-border-light); border-radius: var(--r-md); } /* アイコンは 92px → 40px。左に空けるぶんも 112px → 56px に詰める */ .Contact .Contactl, .Contact .Contactr{ background-size: 40px auto; background-position: 0 2px; padding-left: 56px; /* #2460 連絡先の帯を引き出す量も合わせる。 112px のままだと帯が枠の外へ 56px はみ出していた。 */ --contact-indent: 56px; } .Contact .Contactl{ padding-right: 28px; border-right-color: var(--c-border-light); } /* アイコンぶんの逃げは親の padding で取っているので、 中身の左マージン(100px)は不要 */ .Contact .Contactl h3, .Contact .Contactr h3, .Contact .Contactl p, .Contact .Contactr p{ margin-left: 0; } .Contact .Contactl h3, .Contact .Contactr h3{ margin-bottom: 6px; font-size: 16px; line-height: 1.5; } .Contact .Contactl p, .Contact .Contactr p{ margin-bottom: 10px; font-size: 13px; line-height: 1.7; color: var(--c-text-sub); } /* 連絡先は押せる面。ボタンの基準(高さ40px・角丸4px・枠 #dcdfd9)に寄せる */ .Contact .Contactl .Contact_tel, .Contact .Contactr .Contact_mail{ box-sizing: border-box; min-height: 40px; padding: 9px 12px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: 17px; line-height: 1.3; } .Contact .Contactl .Contact_tel img{ width: 20px; margin-right: 6px; } .Contact .Contactr .Contact_mail img{ width: 18px; margin-right: 6px; } } /* _________________________________________ 口座情報の入力幅 (#2460) 全項目に wi_310 が付いていたが、このクラスは定義が存在せず(wi_110 だけある)、 結果として maxlength=4 の銀行コードも maxlength=100 の名義人名も 同じ 600px になっていた。「何桁入れるのか」が形から分からない。 桁数に応じた幅にして、入力欄を見れば長さの見当が付くようにする。 高さ・角丸・枠線はサイトの入力欄の基準に合わせる。 _________________________________________ */ .wi_code3, .wi_code4, .wi_code7, .wi_name, .wi_name_long{ box-sizing: border-box; height: 40px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: 14px; } .wi_code3{ width: 110px; } /* 支店コード 3桁 */ .wi_code4{ width: 120px; } /* 銀行コード 4桁 */ .wi_code7{ width: 160px; } /* 口座番号 7桁 */ .wi_name{ width: 320px; } /* 銀行名・支店名 */ .wi_name_long{ width: 420px; } /* 口座名義人名(カナ) */ @media screen and (max-width: 899px){ /* SP は枠が狭いので、コード類以外は全幅にする */ .wi_name, .wi_name_long{ width: 100%; } .wi_code7{ width: 180px; } } /* ラジオ・チェックの色をブランドに合わせる (#2460) ブラウザ既定の青のままで、緑基調の画面に青だけが点在していた。 出品フォームで62個が該当。1行で全部に効く。 */ input[type="radio"], input[type="checkbox"]{ accent-color: var(--c-green-dark); } /* _________________________________________ ボタンの高さを3段に丸める (#2460) 目に見えるボタンの高さが 33/34/36/37/38/39/40/43/44/46/52px と散っていた。 同じ役割なのに画面ごとに1〜2pxずつ違う状態で、 「部品ごとに別々に作った」印象の元になっていた。 基準は 44px(主要CTA・一覧の主動線) / 40px(標準) / 32px(小さい操作)。 ここでは 33〜39px に散っているものを 40px に寄せる。 44px 以上のもの(入札ボタン46px・MVのCTA61px)は意図があるので触らない。 _________________________________________ */ .btn.btn-default, .sheet_open_btn, .info_card_btn, .fav_btn.watchlist_button, .btn.btn_exhibit_add, .reuse_photo_toggle, .reuse_bookmark_btn, .head_contact_btn, input.btn.btn-success, input.btn.btn_a{ box-sizing: border-box; min-height: 40px; } /* 中身を上下中央に置く。min-height だけだと文字が上に寄る */ .btn.btn-default, .sheet_open_btn, .info_card_btn, .btn.btn_exhibit_add, .reuse_photo_toggle, .reuse_bookmark_btn, .head_contact_btn{ display: inline-flex; align-items: center; justify-content: center; } /* TOPの案内カードのボタンは align-self:flex-start が付いており、 flex の子として縮められて min-height が効かなかった */ .info_card .info_card_btn{ align-self: stretch; } /* 入力欄の高さを基準(40px)に揃える (#2460) パスワード欄(42px)と口座種別のセレクト(38px)だけ端数だった。 並び替え・表示件数のセレクト(30px)と検索バー(44px)は ガイドラインで別の基準を持つので触らない。 */ .wi_193, .wi_110{ box-sizing: border-box; height: 40px; } /* wi_193 はクラス名が幅を示しているのに定義が無く、 既定の600pxまで伸びていた(口座情報の wi_310 と同じ状態)。 パスワードは桁数が決まっているので、それに見合う幅にする。 (#2460) */ .wi_193{ width: 280px; } /* 表も内容に合う幅にする。1540px まで伸ばすと右に大きな余白ができる */ .download_document .t_width:has(.wi_193){ max-width: 880px; } /* 「ご注意点」の見出しもセクション見出しの基準(16px)に揃える。 ここだけ15pxだった (#2460) その後、箇条書きを1.5倍にしたのに合わせて見出しも1.5倍(24px)にしている */ .foot_text .foot_text-inner h2{ font-size: 24px; } /* Blade に直書きされた純赤を補正する (#2460) views 内に style="color: red" / #ff0000 / #f00 / #dc143c などが 51箇所・8色あり、CSS に載っていないため一括で揃えられない状態だった。 文言や条件ごとに事情があり Blade の一括置換は危険なので、 「純赤だけをサイトの赤に寄せる」形で見た目を揃える。 新しく書くときは style ではなくクラス(.note--caution など)を使うこと。 */ [style*="color: red"], [style*="color:red"], [style*="color: #ff0000"], [style*="color:#ff0000"], [style*="color: #FF0000"], [style*="color:#FF0000"], [style*="color: #f00"], [style*="color:#f00"], [style*="color: #FE0000"], [style*="color:#FE0000"]{ color: var(--c-danger) !important; } /* ログイン前のパンくず (#2460) ログイン後(.breadcrumb_nav)と色・余白を揃える。 区切りは Blade が素の > を出しており flex では扱えないので、 文字の流れのまま色と間隔だけ整える。 9ページ(規約・プライバシー・反社・入会案内など)で共通のクラス。 */ .bread_list{ margin: 0 auto 14px; padding-top: 10px; font-size: 12px; line-height: 1.5; color: var(--c-text-sub); word-spacing: .2em; } .bread_list a{ color: var(--c-text-sub); font-size: 12px; text-decoration: none; } .bread_list a:hover{ color: var(--c-hover-text); text-decoration: underline; } /* カルーセル(slick)の送りボタンにもフォーカスを出す (#2460) ライブラリ側で outline:none が指定されており、 キーボードで送りボタンに来ても現在地が見えなかった。 slick.css / slick-theme.css はライブラリなので直接編集せず、 後から読まれるここで上書きする。 */ .slick-prev:focus-visible, .slick-next:focus-visible, .slick-dots li button:focus-visible{ outline: 2px solid var(--c-green-dark); outline-offset: 3px; } /* ---- #2460 お問い合わせの余白 ---- 本文の
を外しても枠が 1540px あるため、 1行が長くなりすぎて読みにくい。本文だけ読める幅に抑える。 「メールでのご質問・ご相談は24時間・365日受け付けております。」(約29.5文字)を 1行に収めたいので、30em ではなく 32em にしている。 */ @media screen and (min-width: 900px){ .Contact .Contactl p, .Contact .Contactr p{ max-width: 32em; } } /* 「受け付けておりますの / で、」のように助詞の途中で折れないようにする */ .Contact .Contactl p, .Contact .Contactr p{ line-break: strict; word-break: normal; overflow-wrap: break-word; } /* ---- #2460 お問い合わせの文字とアイコンを1.5倍にする (PC) ---- 文字が小さく読みづらいとの指摘で、隣のご注意点と同じく1.5倍にしている。 見出し 16 -> 24px / 本文 13 -> 19.5px / 連絡先 17 -> 25.5px。 その後、大きすぎたため文字だけ 95% に落としている (見出し 22.8px / 本文 18.5px / 連絡先 24.2px。アイコンは据え置き)。 丸アイコンは 40 -> 60px。左に空けるぶん(padding-left)と 連絡先の帯を引き出す量(--contact-indent)も 56 -> 80px に合わせる。 丸アイコンの元画像は 92px あるため拡大してもぼやけない。 SP は幅が狭くメールアドレスが折れるため据え置く。 */ @media screen and (min-width: 900px){ .Contact .Contactl, .Contact .Contactr{ background-size: 60px auto; padding-left: 80px; --contact-indent: 80px; } .Contact .Contactl h3, .Contact .Contactr h3{ font-size: 22.8px; } .Contact .Contactl p, .Contact .Contactr p{ font-size: 18.5px; } .Contact .Contactl .Contact_tel, .Contact .Contactr .Contact_mail{ font-size: 24.2px; } .Contact .Contactl .Contact_tel img{ width: 30px; margin-right: 9px; } .Contact .Contactr .Contact_mail img{ width: 27px; margin-right: 9px; } } /* 本文は文節ごとに span で包んであり、折り返しは文節の境目でだけ起こす。 「受け付けておりま / す。」のような語の途中の改行を防ぐ。 文節1つが枠より長い場合(SPの狭い幅)は、枠内で折れるよう max-width で抑える */ .Contact .Contact_phrase{ display: inline-block; max-width: 100%; } /* #2484 新規会員登録ページのログイン導線。 「無料登録をする」の下に、区切り線を挟んで置く。 新規登録と取り違えないよう、地味めの白ボタンにして主役を譲る */ .subscribe_login{ margin: 24px auto 0; /* 登録ボタン(370px)より狭くして、主役を譲る */ max-width: 240px; text-align: center; } /* 「─── 既にアカウントをお持ちの方 ───」の区切り線 */ .subscribe_login_sep{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--c-text-weak); font-size: 13px; white-space: nowrap; } .subscribe_login_sep::before, .subscribe_login_sep::after{ content: ""; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; height: 1px; background: var(--c-border-light); } .subscribe_login_btn{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 6px; margin: 0 auto; /* 登録ボタン(高43px/文字20px)より一回り小さくして控えめにする。 枠線も細くし、色は面ではなく文字だけに載せる */ padding: 7px 16px; position: relative; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: #fff; color: var(--c-text-sub); font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; } .subscribe_login_btn::after{ content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .subscribe_login_btn:hover{ border-color: var(--c-green-dark); background: var(--c-green-tint); color: var(--c-green-dark); } @media screen and (max-width: 899px){ .subscribe_login{ margin-top: 22px; } .subscribe_login_sep{ font-size: 12px; } } /* _________________________________________ トップ MV「仕入れのチャンス」スライド (#2484) ログイン前 (.mainVisual) とログイン後 (.top_hero_wrap) の両方に出す。 背景は支給素材 (写真 + 斜めの帯 + 検索画面のイラスト) を1枚に合成した画像を スライドいっぱいに敷き、左の白い帯の上に文字を置く。 寸法は支給デザイン (1293×545) をスライドの高さ 431px に合わせて 0.8 倍にしたもの。 濃紺はキャンペーンページの見出し色 (--cp-ink) と同じ #10205e。 */ .mv_stock{ position: relative; display: flex; align-items: center; min-height: 431px; overflow: hidden; border-radius: var(--r-md, 6px); background: #eef3f8; color: #10205e; box-sizing: border-box; } .mv_stock__bg{ position: absolute; inset: 0; z-index: 0; } .mv_stock__bg img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; /* #2484 文字を大きくすると見出し2行目が検索窓のイラストにかかるため、 写真を左端基準で拡大してイラストを右へ逃がす (左の白い帯はそのまま広がる) */ -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transform-origin: left center; transform-origin: left center; } .mv_stock__body{ position: relative; z-index: 1; /* 文字を大きくしたぶん上下は詰める (ログイン前はこのスライドの高さで MV 全体の高さが決まる) */ padding: 20px 0 20px 5.6%; max-width: 680px; box-sizing: content-box; } /* #2484 文字は全体的に大きくする (約 1.3〜1.45 倍)。 SP はスライドを PC レイアウトのまま約 1/3 に縮めて見せるため、 ここの大きさがそのまま SP の読みやすさになる。 見出しは左の白い帯に収まる大きさ (右の検索窓のイラストにかからない) にしている */ /* 小見出しの下に緑の短い線 */ .mv_stock__lead{ margin: 0 0 20px; padding-bottom: 14px; position: relative; font-size: 24px; font-weight: 700; line-height: 1.4; } .mv_stock__lead::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; background: var(--c-green-dark); } .mv_stock__ttl{ margin: 0 0 18px; font-size: 54px; font-weight: 700; line-height: 1.26; letter-spacing: .01em; color: #10205e; } .mv_stock__ttl em{ font-style: normal; color: var(--c-green-dark); } .mv_stock__text{ /* SP では PC 用の改行 (br.pc) が消えて1行になり、右のイラストにかかっていた。 幅で PC と同じ位置 (「〜出品車両から、」の後) で折り返させる */ max-width: 22em; margin: 0 0 24px; font-size: 22px; font-weight: 700; line-height: 1.6; } /* 語の途中で折れないよう、文節ごとの単位でだけ折り返す */ .mv_stock__text span{ display: inline-block; } /* ログイン前は MV が固定ヘッダー (70px) の下から始まり、上端がヘッダーに隠れる。 ほかのスライドは文字を下げて作ってあるので、このスライドもヘッダーぶん下げる */ .mainVisual.hero_slider .mv_stock{ padding-top: var(--head-h, 70px); } .mv_stock__btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; /* #2484 業務の指定でボタンを 1.5 倍にした (高さ 64→96 / 文字 22→33px)。 幅は固定 (660px) だと文字の左右に 214px ずつ空いていたので、 業務の指定で左右の余白を約 30% (64px) に減らし、幅は文字に合わせる。 右の余白 64px の中に「＞」(右から 39〜54px) が入る */ width: auto; max-width: 100%; min-height: 96px; padding: 0 64px; border-radius: var(--r-sm, 4px); background: #10205e; color: #fff; font-size: 33px; font-weight: 700; text-decoration: none; box-sizing: border-box; transition: background-color .15s; } /* 右端の「＞」 */ .mv_stock__btn::after{ content: ""; position: absolute; top: 50%; right: 39px; width: 15px; height: 15px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: translateY(-50%) rotate(45deg); } .mv_stock__btn:hover, .mv_stock__btn:focus-visible{ background: #1b3380; color: #fff; text-decoration: none; } @media screen and (max-width: 899px){ /* SP は縦長になるので、写真の左 (白い帯) を見せ、文字の後ろに白のぼかしを敷く */ .mv_stock:not(.hero_slider--scaled *){ min-height: 0; } /* 縦長になるので写真の中央寄り (車と検索画面) を見せ、 文字のある上側だけ白のぼかしを敷いて、下に車が見えるようにする */ .mv_stock:not(.hero_slider--scaled *){ align-items: flex-start; } .mv_stock__bg img:not(.hero_slider--scaled *){ object-position: 60% center; } .mv_stock:not(.hero_slider--scaled *)::before{ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .88) 48%, rgba(255, 255, 255, 0) 72%); } .mv_stock__body:not(.hero_slider--scaled *){ padding: 24px 20px 26px; max-width: none; } .mv_stock__lead:not(.hero_slider--scaled *){ margin-bottom: 14px; padding-bottom: 8px; font-size: 13px; } .mv_stock__ttl:not(.hero_slider--scaled *){ margin-bottom: 12px; font-size: 25px; } .mv_stock__text:not(.hero_slider--scaled *){ margin-bottom: 16px; font-size: 13px; } .mv_stock__btn:not(.hero_slider--scaled *){ width: 100%; min-height: 44px; font-size: 14px; } } /* ログイン前: MV の「出品車両を見る」でピックアップへ移動したとき、固定ヘッダーに隠れないようにする */ #pickup_list{ scroll-margin-top: calc(var(--head-h, 100px) + 16px); } /* _________________________________________ MV の縮小表示 (#2484) スライド幅が PC の基準 (1024px) より狭いときは、PC のレイアウトのまま縮小する。 JS (Layout の hero_slider 初期化) が .hero_slider--scaled と --hero-scale を付ける。 スライドは 1024px で組んで zoom で縮めるので、slick が書き込む幅 (= 実際の幅) と見た目が一致する。 スライド内の SP / タブレット用の指定は :not(.hero_slider--scaled *) で外してある。 矢印・ドット・停止ボタンはスライドの外なので縮めない (押せる大きさを保つ) */ .hero_slider.hero_slider--scaled .slick-slide{ width: 1024px !important; zoom: var(--hero-scale, 1); } /* adaptiveHeight は zoom 前の高さ (offsetHeight) を書き込むため、縮小表示では下に大きな空きが出る。 枠の高さは中身 (縮小後のスライド) に任せる */ .hero_slider.hero_slider--scaled .slick-list{ height: auto !important; } /* _________________________________________ SP のタップ領域 (#2460) 指で押すものは高さ 32px 以上にする。見た目の大きさは変えず、上下の余白で当たり判定だけ広げる。 実測 (390px) でロゴ 200x21 / パンくず「ホーム」17px / グループ運営サービスのリンク 17px / ヘッダーのボタン 28px だった */ @media screen and (max-width: 899px){ /* ロゴはガイドラインの余白 (高さの 50%) で当たり判定が足りる。 ロゴが小さい幅 (高さ 16px 未満) だけ上下を広げて 32px を確保する */ .head_bg .logo{ padding-top: max(calc(var(--logo-h) / 2), calc((32px - var(--logo-h)) / 2)); padding-bottom: max(calc(var(--logo-h) / 2), calc((32px - var(--logo-h)) / 2)); } .head_bg.no_login #login_btn_box a{ padding-top: 9px; padding-bottom: 9px; } .breadcrumb_list .breadcrumb_item a{ display: inline-block; padding: 8px 0; } /* 行間の代わりにリンク自身の余白で間隔を取る (見た目の行送りはほぼ同じ) */ .footer-wrap .group-link{ margin-top: 0; line-height: 1.5; } .footer-wrap .group-link a{ display: inline-block; padding: 7px 0; } /* フッター本体は縦積み + 左寄せ (align-items: flex-start) のため、 リンク一覧が中身の幅 (179px) まで縮んで左半分にだけ並んでいた */ .footer-wrap .footer-nav-area{ -ms-flex-item-align: stretch; align-self: stretch; } /* 会社情報は中央揃え・コピーライトだけ左揃えと食い違っていたので左に揃える。 住所は「グランフロント大阪タワ / ーB」と語の途中で折れていたため、空白の位置で折る */ .footer-wrap .footer-company, .footer-wrap .footer-company address{ text-align: left; } .footer-wrap .footer-company address{ word-break: keep-all; overflow-wrap: anywhere; } } /* _________________________________________ 900〜1023px のグロナビ (#2460) (899px 以下はグロナビを出さずハンバーガーにしたため、下限を 900px に上げた) 8項目を nowrap で並べると 13px でも 851px 必要で、800px では右端の「MENU」が 画面外 (783〜861px) に出て押せなかった (実測)。この幅ではアイコンを外して文字だけにする */ @media screen and (min-width: 900px) and (max-width: 1023px){ .head_gnav_inner > li > a .gnav_icon{ display: none; } .head_gnav_inner > li > a{ padding: 0 6px; gap: 4px; } } /* _________________________________________ SP のお問い合わせ枠 (#2460) 枠線が画面の左右端 (x=0 / 390) に貼り付いていたので、本文と同じく左右 10px 内側に置く。 上の .Contact.container{width:100%} より後ろに書く必要がある */ @media screen and (max-width: 899px){ .Contact.container{ width: auto; margin-left: 10px; margin-right: 10px; } } /* _________________________________________ 日本語の折り返し (#2460) 狭い画面で「キャンペ/ーン」「トランスミッショ/ン」「お気に/入り」「あ/と」のように 語の途中で折れていた。文節の区切りで折り返す (auto-phrase: Chrome / Edge 119 以降。 未対応のブラウザは従来どおりの折り返しになる)。 文節が行より長いときは、はみ出さずにその場で折る (overflow-wrap) */ body{ word-break: auto-phrase; overflow-wrap: break-word; } a{ word-break: auto-phrase; } /* SP ではタイトルの下の行に回るので、PC 用の左マージン (16px) が字下げに見えていた */ @media screen and (max-width: 899px){ .main_tt .search_bar_detail{ margin: 6px 0 0; } } /* SP の相場検索フォームは左右 10px はみ出させて灰色の地を敷く (marketprice.css)。 上の「本文ブロックを中央寄せ」(margin-left: auto) が margin-left: -10px を打ち消し、 右だけ画面端まで伸びて左右非対称になっていた */ @media screen and (max-width: 899px){ /* 相手は :not() を3つ重ねた詳細度 (0,7,1) なので !important で上書きする */ body:has(.head_bg:not(.no_login)) .head_height.container > form.search_wrap{ margin-left: -10px !important; } } /* _________________________________________ 769〜1279px のフッター (#2460) リンク間の「|」は各リンクの前 (本体) / 後ろ (グループ運営サービス) に擬似要素で付けている。 この幅では折り返すため「| プライバシーポリシー」のように行頭 (行末) に区切りが残っていた。 どこで折れるかは CSS で判定できないので、この幅では区切りをやめて間隔だけで分ける */ @media screen and (min-width: 900px) and (max-width: 1279px){ .footer-wrap .footer-nav li:not(:first-child) a:before, .footer-wrap .group-link::after{ content: none; display: none; } .footer-wrap .footer-nav-area .footer-nav{ -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; } .footer-wrap .group-link{ padding-right: 1.4em; } } /* 320〜360px (iPhone SE など) では、ロゴ 150px + ボタン2つでも 31px はみ出して横スクロールが出ていた。 ロゴは幅 111px (余白込み 124px)。ロゴの右の余白ぶん、ボタンの左右を詰める */ @media screen and (max-width: 360px){ .head_bg.no_login{ --logo-h: 13px; } .head_bg.no_login #login_btn_box a{ padding-left: 5px; padding-right: 5px; } } /* SP の「本日の見積依頼」(落札・受注管理): 見出しの緑線ぶんの padding-left (17px) の内側に 全幅で置かれるため、左 27px / 右 10px と左右非対称になっていた。本文の左右端に合わせる */ @media screen and (max-width: 899px){ .main_tt.has-mitsumori > a.btn{ width: calc(100% + 17px); margin-left: -17px; -webkit-box-sizing: border-box; box-sizing: border-box; } } /* 各種設定のタブ (769〜1279px): 6つのタブが少しずつ縮められ、 「パスワード設/定」「ログアウ/ト」とすべて2行に折れていた (実測 1024px)。 文字を少し小さくして1行に保ち、入りきらない幅ではタブごと次の行に送る */ @media screen and (min-width: 900px) and (max-width: 1279px){ .nav-tabs:has(> .content_tab){ -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 8px; } .nav-tabs .content_tab a{ padding-left: 10px; padding-right: 10px; font-size: 12.5px; white-space: nowrap; } } /* ダウンロードの推奨動作環境 (SP): ラベルのセルが 148px のまま縦に積まれ、 「インターネットエ/クスプローラー」と折れ、右半分が空いていた。 ラベルは全幅の帯にし、値にも左右の余白を付ける */ @media screen and (max-width: 899px){ .download_document .panel.spec_table td.panel-ttl{ width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .download_document .panel.spec_table td.panel-desc{ padding: 8px 10px 12px; -webkit-box-sizing: border-box; box-sizing: border-box; } } /* _________________________________________ SP のメニュー (#2460) 黒ベタの見出し帯と文字だけの行で、PC のグロナビ・MENU パネル (白地 / 濃い緑の小見出し / #333 の項目 / ホバーはオレンジ系) とトンマナが揃っていなかった。 項目と文言は変えず、PC の MENU パネルと同じ語彙で組み直す。 - 見出し: 濃い緑の小さい太字 + 細い罫線 (PC と同じ) - 項目: 押しやすい高さ (48px) + 右端の「>」 - 業者情報: 淡い地色のカードにまとめ、PC ヘッダーと同じ星の部品を使う - 閉じるボタンを右上に置く (背景を押しても閉じる) _________________________________________ */ @media screen and (max-width: 899px){ .main_nav_menu .sideMenu{ width: 86%; max-width: 340px; padding: 0 0 40px; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: 4px 0 24px rgba(0, 0, 0, .18); } /* 暗幕は黒 80% だと本文が見えず、どこに戻るのか分からない */ .nav-open .overlay{ opacity: .45; } /* ---- 閉じるボタン ---- */ .main_nav_menu .sideMenu_close{ position: absolute; top: 8px; right: 8px; z-index: 1; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; } .main_nav_menu .sideMenu_close::before, .main_nav_menu .sideMenu_close::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; border-radius: 1px; background: #555; } .main_nav_menu .sideMenu_close::before{ -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .main_nav_menu .sideMenu_close::after{ -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .main_nav_menu .sideMenu_close:hover{ background: #fff6e8; } /* ---- 業者情報 ---- */ .main_nav_menu .sideMenu_trader{ margin: 0 0 8px; padding: 20px 56px 16px 20px; background: #f5f7f4; border-bottom: 1px solid #e2e8e0; } .main_nav_menu .sideMenu_trader_name{ display: block; color: #333; font-size: 16px; font-weight: bold; line-height: 1.45; text-decoration: none; } .main_nav_menu .sideMenu_trader_cd{ display: block; margin-top: 2px; color: #666; font-size: 12px; font-weight: normal; } .main_nav_menu .sideMenu_trader_eval{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 0; } .main_nav_menu .sideMenu_trader_eval dt{ color: #666; font-size: 12px; font-weight: normal; } .main_nav_menu .sideMenu_trader_eval dd{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; margin: 0; } .main_nav_menu .sideMenu_trader_stars{ display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1px; } .main_nav_menu .sideMenu_trader_stars img{ display: block; width: 16px; height: 16px; } .main_nav_menu .sideMenu_trader_value{ color: #333; font-size: 13px; font-weight: bold; } /* 「未評価」は PC ヘッダー (.head_evaluation_value.text-danger) と同じく淡い文字色にする。 赤は警告の色で、評価がまだ無いだけの状態には強すぎる */ .main_nav_menu .sideMenu_trader_value.text-danger{ color: var(--c-text-weak); font-weight: normal; } /* ---- 見出し (PC の MENU パネルと同じ) ---- */ .main_nav_menu .sideMenu .main_navItem p{ display: block; width: auto; height: auto; margin: 0; padding: 18px 20px 8px; background: none; border-bottom: 1px solid #ecefe9; color: var(--c-green-dark); font-size: 12px; font-weight: bold; line-height: 1.4; letter-spacing: .04em; } /* ---- 項目 ---- */ .main_nav_menu .sideMenu .coner_wrap_left ul li, .main_nav_menu .sideMenu .coner_wrap_right ul li{ padding: 0; } .main_nav_menu .sideMenu .main_navItem:not(.sns_links) li{ border-bottom: 1px solid #f0f2ee; } .main_nav_menu .sideMenu .main_navItem:not(.sns_links) li a{ position: relative; display: block; padding: 14px 44px 14px 20px; color: #333; font-size: 15px; line-height: 1.4; text-decoration: none; } /* 右端の「>」。文字ではなく罫線で描く (サイト内のボタンと同じ) */ .main_nav_menu .sideMenu .main_navItem:not(.sns_links) li a::after{ content: ""; position: absolute; top: 50%; right: 22px; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid #b9beb3; border-right: 2px solid #b9beb3; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* 押したときはグロナビ・MENU パネルと同じオレンジ系 */ .main_nav_menu .sideMenu .main_navItem:not(.sns_links) li a:hover, .main_nav_menu .sideMenu .main_navItem:not(.sns_links) li a:active{ background: #fff6e8; color: #d97d00; opacity: 1; } .main_nav_menu .sideMenu .main_navItem:not(.sns_links) li a:hover::after{ border-color: #f0c99a; } /* 「Notes on using」の補足行は一段小さく淡くする */ .main_nav_menu .sideMenu .main_navItem li a span{ color: #666; font-size: 12px !important; } /* ---- SNS ---- */ .main_nav_menu .sideMenu .main_navItem.sns_links{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 14px; width: auto; margin: 0; padding: 20px 20px 0; border: none; } .main_nav_menu .sideMenu .sns_links li{ width: auto; border: none; } .main_nav_menu .sideMenu .sns_links li a{ display: block; padding: 0; } .main_nav_menu .sideMenu .sns_links img{ display: block; width: 40px; height: 40px; } } /* #2460 お問い合わせ (769〜1100px): 左右2列の1列が 270px ほどになり、 文節の塊が入りきらず「(月〜/金)」「なりま/す)」と割れ、メールアドレスは枠からはみ出していた */ @media screen and (min-width: 900px) and (max-width: 1100px){ .Contact .Contactl p, .Contact .Contactr p{ font-size: 13.5px; } .Contact .Contactl .Contact_tel{ font-size: 21px; } .Contact .Contactr .Contact_mail{ font-size: 18px; } .Contact .Contactl, .Contact .Contactr{ --contact-indent: 76px; padding-left: 76px; background-size: 60px auto; } .Contact .Contactl{ margin-right: 20px; padding-right: 20px; } } /* #2460 お問い合わせの電話番号・メールアドレスの枠: 上下に余白を持たせる (業務の指定)。 PC は 9px で窮屈、SP は「上 8px / 下 0」で文字が枠の下の線に付いていた。 上下を同じにして、PC 14px / SP 12px にする */ .Contact .Contactl .Contact_tel, .Contact .Contactr .Contact_mail{ padding-top: 14px; padding-bottom: 14px; } @media screen and (max-width: 899px){ .Contact .Contactl .Contact_tel, .Contact .Contactr .Contact_mail{ padding-top: 12px; padding-bottom: 12px; } } /* #2460 「お問い合わせ」で飛んだ先 (#contact_to) を固定ヘッダーの高さぶん上にずらす。 100px 固定 (元はタグに直書き) で、ログイン後の PC はヘッダーが 118px (70px + グロナビ 48px) あるため お問い合わせ枠の上端 18px がヘッダーに隠れていた。ログイン後は .head_height と同じ計算にする */ /* ログイン前のヘッダーは 70px (100px のままだと上に 30px 空いていた) */ #contact_to{ padding-top: 70px; margin-top: -70px; } /* 「お問い合わせ」を押したあとは、マウスが MENU の上に残っていても :hover で開き直さない (MENU ボタンに乗せ直すと外れる。Layout/default.blade.php) */ .main_nav_menu.is-menu-suppressed{ display: none; } body:has(.head_bg:not(.no_login)) #contact_to{ padding-top: calc(70px + var(--head-gnav-h)); margin-top: calc(-70px - var(--head-gnav-h)); } /* #2460 ホバーの無い端末 (タブレット等) では、タップ後も :hover / :focus-within が残って メガメニューが閉じなくなるため、開閉は .is-open (1回目のタップで付く) だけで行う */ @media (hover: none){ .head_gnav_inner > li.has_megamenu:not(.is-open):hover .gnav_mega, .head_gnav_inner > li.has_megamenu:not(.is-open):focus-within .gnav_mega{ visibility: hidden; opacity: 0; transform: translateY(-4px); } .head_gnav_inner > li.has_megamenu:not(.is-open):hover .gnav_caret, .head_gnav_inner > li.has_megamenu:not(.is-open):focus-within .gnav_caret{ transform: none; } }