も含めて美しく積む） */
.customer_ table.formdetail_.mailchange_ td {
background: #fff;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
/* フィールド（テキスト/パスワード） */
.customer_ table.formdetail_.mailchange_ input[type="text"], .customer_ table.formdetail_.mailchange_ input[type="password"] {
height: 38px;
padding: 8px 10px;
border: 1px solid #d9e3e0;
border-radius: 10px;
background: #fafafa;
outline: none;
transition: border-color .12s, background .12s, box-shadow .12s;
width: min(36rem, 100%);
}
.customer_ table.formdetail_.mailchange_ input[type="text"]:focus, .customer_ table.formdetail_.mailchange_ input[type="password"]:focus {
border-color: #b9e8d4;
background: #fff;
box-shadow: 0 0 0 3px #baf7d733;
}
/* 注意書き */
.customer_ table.formdetail_.mailchange_ .small_, .customer_ table.formdetail_.mailchange_ p.small_ {
color: #64748b;
font-size: 12px;
margin: 0;
}
/* ボタン行 */
.customer_ .submit_ {
display: flex;
gap: 10px;
justify-content: center;
margin: 12px 0 18px;
}
/* 戻る（画像リンク→ピル型に） */
.customer_ .submit_ a {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 8px 16px 8px 40px;
border: 1px solid #cfe9de;
border-radius: 999px;
background: #f0fdf4;
color: #0b7f57;
text-decoration: none;
font-weight: 800;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.customer_ .submit_ a img {
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.customer_ .submit_ a::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
opacity: .9;
background-repeat: no-repeat;
background-size: 16px 16px;
background-image: url("data:image/svg+xml;utf8,");
}
.customer_ .submit_ a::after {
content: "戻る";
}
.customer_ .submit_ a:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
background: #e8fbf0;
border-color: #b9e8d4;
}
.customer_ .submit_ a:focus {
outline: 3px solid #baf7d7;
outline-offset: 2px;
border-radius: 999px;
}
/* 変更する（input type=image をプライマリーボタン化） */
.customer_ .submit_ input[type="image"][name="submit"] {
/*appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: auto;
height: auto;
cursor: pointer;
border: 1px solid #0ea472;
border-radius: 999px;
background: #12b8861a;
padding: 10px 20px 10px 44px;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
color: transparent;
filter: opacity(0);*//* 元画像は視覚的に消す */
}
.customer_ .submit_ input[type="image"][name="submit"]::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
opacity: .9;
background-repeat: no-repeat;
background-size: 18px 18px;
background-image: url("data:image/svg+xml;utf8,");
}
.customer_ .submit_ input[type="image"][name="submit"]::after {
content: "変更する";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #0b7f57;
font-weight: 800;
letter-spacing: .02em;
}
.customer_ .submit_ input[type="image"][name="submit"]:hover {
transform: translateY(-1px);
/*box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
background: #e8fbf0;
border-color: #0b7f57;*/
}
.customer_ .submit_ input[type="image"][name="submit"]:focus {
outline: 3px solid #baf7d7;
outline-offset: 2px;
border-radius: 999px;
}
/* フォーカス/アクセシビリティ */
.customer_ a:focus, .customer_ input[type="text"]:focus, .customer_ input[type="password"]:focus {
outline: 3px solid #baf7d7;
outline-offset: 2px;
border-radius: 8px;
}
/* モバイル：縦カード化 */
@media (max-width: 900px) {
.customer_ table.formdetail_.mailchange_, .customer_ table.formdetail_.mailchange_ tbody, .customer_ table.formdetail_.mailchange_ tr, .customer_ table.formdetail_.mailchange_ th, .customer_ table.formdetail_.mailchange_ td {
display: block;
width: 100%;
}
.customer_ table.formdetail_.mailchange_ tr {
border-bottom: 1px solid #f1f5f9;
padding: 8px 0;
}
.customer_ table.formdetail_.mailchange_ th {
border-right: none;
border-bottom: none;
background: #f7fdfa;
color: #0b7f57;
border-radius: 8px;
padding: 8px 10px;
margin: 2px 0 6px;
width: auto;
}
.customer_ table.formdetail_.mailchange_ td {
padding: 0 2px 10px;
gap: 8px;
}
}
/* ダークモード */
/* =========================================================
パスワード変更（/shop/customer/passchange.aspx）
- .customer_ 配下のみ / HTML無改変
- テーブルをカード化、入力UI統一、ボタンをピル型に
========================================================= */
/* 本体テーブルをカード化 */
.customer_ table.formdetail_.passchange_ {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
overflow: hidden;
margin: 16px 0 22px;
table-layout: fixed;
font-size: 14px;
line-height: 1.5;
}
.customer_ table.formdetail_.passchange_ th, .customer_ table.formdetail_.passchange_ td {
border-bottom: 1px solid #f1f5f9;
padding: 12px;
vertical-align: middle;
}
.customer_ table.formdetail_.passchange_ tr:last-child th, .customer_ table.formdetail_.passchange_ tr:last-child td {
border-bottom: none;
}
/* ラベル列 */
.customer_ table.formdetail_.passchange_ th {
background: linear-gradient(180deg, #f7fdfa, #f2fbf7);
color: #0b7f57;
font-weight: 800;
text-align: left;
white-space: nowrap;
width: 16rem;
border-right: 1px solid #e6efe9;
}
/* 入力列：整列＆余白（注釈 .small_ も含めて美しく積む） */
.customer_ table.formdetail_.passchange_ td {
background: #fff;
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
/* テキスト/パスワード共通フィールド */
.customer_ table.formdetail_.passchange_ input[type="text"], .customer_ table.formdetail_.passchange_ input[type="password"] {
height: 38px;
padding: 8px 10px;
border: 1px solid #d9e3e0;
border-radius: 10px;
background: #fafafa;
outline: none;
transition: border-color .12s, background .12s, box-shadow .12s;
width: min(24rem, 100%); /* パスワード欄は適度な横幅に */
}
.customer_ table.formdetail_.passchange_ input[type="text"]:focus, .customer_ table.formdetail_.passchange_ input[type="password"]:focus {
border-color: #b9e8d4;
background: #fff;
box-shadow: 0 0 0 3px #baf7d733;
}
/* 注意書き */
.customer_ table.formdetail_.passchange_ .small_ {
color: #64748b;
font-size: 12px;
}
/* ボタン行 */
.customer_ .submit_ {
display: flex;
gap: 10px;
justify-content: center;
margin: 12px 0 18px;
}
/* 戻る（画像リンク→ピル型） */
.customer_ .submit_ a {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 8px 16px 8px 40px;
border: 1px solid #cfe9de;
border-radius: 999px;
background: #f0fdf4;
color: #0b7f57;
text-decoration: none;
font-weight: 800;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.customer_ .submit_ a img {
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.customer_ .submit_ a::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
opacity: .9;
background-repeat: no-repeat;
background-size: 16px 16px;
background-image: url("data:image/svg+xml;utf8,");
}
.customer_ .submit_ a::after {
content: "戻る";
}
.customer_ .submit_ a:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
background: #e8fbf0;
border-color: #b9e8d4;
}
.customer_ .submit_ a:focus {
outline: 3px solid #baf7d7;
outline-offset: 2px;
border-radius: 999px;
}
/* 変更する（input type=image をプライマリーボタン化） */
.customer_ .submit_ input[type="image"][name="submit"] {
/*appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: auto;
height: auto;
cursor: pointer;
border: 1px solid #0ea472;
border-radius: 999px;
background: #12b8861a;
padding: 10px 20px 10px 44px;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
color: transparent;
filter: opacity(0); *//* 元画像は視覚的に消す */
}
.customer_ .submit_ input[type="image"][name="submit"]::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
opacity: .9;
background-repeat: no-repeat;
background-size: 18px 18px;
background-image: url("data:image/svg+xml;utf8,");
}
.customer_ .submit_ input[type="image"][name="submit"]::after {
content: "変更する";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #0b7f57;
font-weight: 800;
letter-spacing: .02em;
}
.customer_ .submit_ input[type="image"][name="submit"]:hover {
transform: translateY(-1px);
/*box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
background: #e8fbf0;
border-color: #0b7f57;*/
}
.customer_ .submit_ input[type="image"][name="submit"]:focus {
outline: 3px solid #baf7d7;
outline-offset: 2px;
border-radius: 999px;
}
/* フォーカス/アクセシビリティ */
.customer_ a:focus, .customer_ input[type="text"]:focus, .customer_ input[type="password"]:focus {
outline: 3px solid #baf7d7;
outline-offset: 2px;
border-radius: 8px;
}
/* モバイル：縦カード化 */
@media (max-width: 900px) {
.customer_ table.formdetail_.passchange_, .customer_ table.formdetail_.passchange_ tbody, .customer_ table.formdetail_.passchange_ tr, .customer_ table.formdetail_.passchange_ th, .customer_ table.formdetail_.passchange_ td {
display: block;
width: 100%;
}
.customer_ table.formdetail_.passchange_ tr {
border-bottom: 1px solid #f1f5f9;
padding: 8px 0;
}
.customer_ table.formdetail_.passchange_ th {
border-right: none;
border-bottom: none;
background: #f7fdfa;
color: #0b7f57;
border-radius: 8px;
padding: 8px 10px;
margin: 2px 0 6px;
width: auto;
}
.customer_ table.formdetail_.passchange_ td {
padding: 0 2px 10px;
gap: 8px 10px;
}
}
/* ダークモード */
/* =========================================================
カード情報：現在の登録内容（空状態）
- .customer_ 配下限定 / HTMLはそのまま
========================================================= */
/* --- バグ修正：コンテナに付けたアイコンを全て無効化 --- */
.customer_ .cardedit_info_::before, .customer_ .cardedit_info_::after {
content: none !important;
}
/* カード枠と見出しはそのまま（以前のスタイルがあれば保持） */
.customer_ .cardedit_info_ {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
padding: 16px 16px 18px;
margin: 16px 0 24px;
color: #222;
font-size: 14px;
line-height: 1.6;
}
.customer_ .cardedit_info_ .common_headline2_ {
font-size: clamp(16px, 2vw, 18px);
font-weight: 800;
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 2px solid #e6efe9;
color: #0b7f57;
}
/* 空状態テキストを“帯”で強調（要素化されていなくても重ならない安全策） */
.customer_ .cardedit_info_ {
/* 見出しの下に帯風の背景を差し込む */
/*--_pad: 12px;
background:
linear-gradient(180deg, #f7fdfa, #f2fbf7) padding-box no-repeat left calc(1.2em + 10px) / 100% 44px; *//* 見出し直下に淡緑帯を敷く */
}
.customer_ .cardedit_info_ .small_ {
margin-top: 12px;
color: #64748b;
font-size: 12px;
}
/* ダークモード */
/* =========================================================
退会フォーム（/shop/customer/withdrawal.aspx）
- .customer_ 配下のみ / HTML無改変
- テーブルをカード化、入力UI統一
- 送信は“危険操作”の赤ボタン（画像の見た目だけ置換）
========================================================= */
/* 本体テーブルをカード化 */
.customer_ table.formdetail_.withdrawal_ {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
overflow: hidden;
margin: 16px 0 22px;
table-layout: fixed;
font-size: 14px;
line-height: 1.5;
}
.customer_ table.formdetail_.withdrawal_ th, .customer_ table.formdetail_.withdrawal_ td {
border-bottom: 1px solid #f1f5f9;
padding: 12px;
vertical-align: middle;
}
.customer_ table.formdetail_.withdrawal_ tr:last-child th, .customer_ table.formdetail_.withdrawal_ tr:last-child td {
border-bottom: none;
}
/* ラベル列 */
.customer_ table.formdetail_.withdrawal_ th {
background: linear-gradient(180deg, #f7fdfa, #f2fbf7);
color: #0b7f57;
font-weight: 800;
text-align: left;
white-space: nowrap;
width: 16rem;
border-right: 1px solid #e6efe9;
}
/* 入力列 */
.customer_ table.formdetail_.withdrawal_ td {
background: #fff;
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
.customer_ table.formdetail_.withdrawal_ input[type="text"], .customer_ table.formdetail_.withdrawal_ input[type="password"] {
height: 38px;
padding: 8px 10px;
border: 1px solid #d9e3e0;
border-radius: 10px;
background: #fafafa;
outline: none;
transition: border-color .12s, background .12s, box-shadow .12s;
width: min(36rem, 100%);
}
.customer_ table.formdetail_.withdrawal_ input[type="text"]:focus, .customer_ table.formdetail_.withdrawal_ input[type="password"]:focus {
border-color: #b9e8d4;
background: #fff;
box-shadow: 0 0 0 3px #baf7d733;
}
/* ボタン行 */
.customer_ .submit_ {
display: flex;
gap: 10px;
justify-content: center;
margin: 12px 0 18px;
}
/* 戻る（画像リンク→ピル型） */
.customer_ .submit_ a {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 8px 16px 8px 40px;
border: 1px solid #cfe9de;
border-radius: 999px;
background: #f0fdf4;
color: #0b7f57;
text-decoration: none;
font-weight: 800;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.customer_ .submit_ a img {
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.customer_ .submit_ a::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
opacity: .9;
background-repeat: no-repeat;
background-size: 16px 16px;
background-image: url("data:image/svg+xml;utf8,");
}
.customer_ .submit_ a::after {
content: "戻る";
}
.customer_ .submit_ a:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
background: #e8fbf0;
border-color: #b9e8d4;
}
.customer_ .submit_ a:focus {
outline: 3px solid #baf7d7;
outline-offset: 2px;
border-radius: 999px;
}
/* 退会する（input type=image を“危険操作”の赤ピルに） */
.customer_ .submit_ input[type="image"][name="submit"] {
/*/*appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: auto;
height: auto;
cursor: pointer;
border: 1px solid #b91c1c;*/ /* 赤系ボーダー */
/*border-radius: 999px;
background: #fee2e2; *//* 薄い赤背景 */
/*padding: 10px 20px 10px 46px;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
color: transparent;
filter: opacity(0);*/ /* 元画像は隠す（挙動維持） */
}
.customer_ .submit_ input[type="image"][name="submit"]::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
opacity: .95;
background-repeat: no-repeat;
background-size: 18px 18px;
/* 警告三角アイコン */
background-image: url("data:image/svg+xml;utf8,");
}
.customer_ .submit_ input[type="image"][name="submit"]::after {
content: "退会する";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #7f1d1d;
font-weight: 800;
letter-spacing: .02em;
}
.customer_ .submit_ input[type="image"][name="submit"]:hover {
/*transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
background: #fecaca;
border-color: #991b1b;*/
}
.customer_ .submit_ input[type="image"][name="submit"]:focus {
outline: 3px solid #fecaca;
outline-offset: 2px;
border-radius: 999px;
}
/* アクセシビリティ（共通） */
.customer_ a:focus, .customer_ input[type="text"]:focus, .customer_ input[type="password"]:focus {
outline: 3px solid #baf7d7;
outline-offset: 2px;
border-radius: 8px;
}
/* モバイル：縦カード化 */
@media (max-width: 900px) {
.customer_ table.formdetail_.withdrawal_, .customer_ table.formdetail_.withdrawal_ tbody, .customer_ table.formdetail_.withdrawal_ tr, .customer_ table.formdetail_.withdrawal_ th, .customer_ table.formdetail_.withdrawal_ td {
display: block;
width: 100%;
}
.customer_ table.formdetail_.withdrawal_ tr {
border-bottom: 1px solid #f1f5f9;
padding: 8px 0;
}
.customer_ table.formdetail_.withdrawal_ th {
border-right: none;
border-bottom: none;
background: #f7fdfa;
color: #0b7f57;
border-radius: 8px;
padding: 8px 10px;
margin: 2px 0 6px;
width: auto;
}
.customer_ table.formdetail_.withdrawal_ td {
padding: 0 2px 10px;
gap: 8px 10px;
}
}
/* ダークモード */
/* =========================================================
.customer_ が存在するページでは
#return・.compact-fab・.category-popup-btn を非表示に
========================================================= */
/* .customer_ が存在するページでは 3要素を隠す */
@supports selector(body:has(.customer_)) {
body:has(.customer_) #return, body:has(.customer_) .compact-fab, body:has(.customer_) .category-popup-btn {
display: none !important;
}
}
/* =========================================================
【わたプロ】配送先を選択（address.aspx）
- HTML変更なし / .order_.col1_ 配下のみ適用
- 旧float/inline-styleを上書き、カード＋レスポンシブ
========================================================= */
/* Enter送信用の透明imageを完全不可視（機能は保持） */
.order_.col1_ .hiddenEnter_ {
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
border: 0;
padding: 0;
margin: 0;
}
/* 外枠 */
.order_.col1_ .address_box_2_ {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
padding: 18px;
margin: 16px 0 24px;
}
/* 見出し */
.order_.col1_ .address_box_2_ .common_headline2_ {
margin: 0 0 12px;
font-weight: 800;
color: #0b7f57;
border-left: 6px solid #0b7f57;
padding-left: 10px;
}
/* 検索・新規登録の行をフレックス化（height inlineを上書き） */
.order_.col1_ .address_box_2_ .top_box_ {
height: auto !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
background: #fafafa;
border: 1px solid #eef2f1;
border-radius: 12px;
padding: 10px;
margin-bottom: 14px;
}
/* 旧float無効化 */
.order_.col1_ .address_box_2_ .leftfloat_, .order_.col1_ .address_box_2_ .rightfloat_ {
float: none !important;
}
/* 検索ボックス */
.order_.col1_ .address_box_2_ .search_box_ {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 360px;
}
.order_.col1_ .address_box_2_ .keyword_ {
flex: 1 1 260px;
min-width: 180px;
height: 38px;
padding: 8px 12px;
border: 1px solid #d9e3e0;
border-radius: 10px;
background: #fff;
outline: none;
transition: border-color .12s, box-shadow .12s, background .12s;
}
.order_.col1_ .address_box_2_ .keyword_:focus {
border-color: #b9e8d4;
box-shadow: 0 0 0 3px #baf7d733;
}
/* 検索ボタン（inline style上書き） */
.order_.col1_ .address_box_2_ .search_box_ input[type="submit"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #cfe9de !important;
background: #f0fdf4 !important;
color: #0b7f57 !important;
padding: 10px 16px !important;
height: 38px;
line-height: 18px;
border-radius: 999px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.order_.col1_ .address_box_2_ .search_box_ input[type="submit"]:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
background: #e8fbf0 !important;
border-color: #b9e8d4 !important;
}
/* 新規登録ボタン */
.order_.col1_ .address_box_2_ .move_button_ {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #0ea472;
border-radius: 999px;
background: #12b8861a;
color: #0b7f57 !important;
padding: 10px 18px;
height: 38px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.order_.col1_ .address_box_2_ .move_button_:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
background: #e8fbf0;
border-color: #0b7f57;
}
/* 一覧レイアウト：カードを自動列数グリッド */
.order_.col1_ .method_address_ {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* 各カード */
.order_.col1_ .address_item_ {
display: flex;
flex-direction: column;
gap: 10px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 14px 14px 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
transition: transform .12s, box-shadow .12s, border-color .12s;
}
.order_.col1_ .address_item_:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
border-color: #d9eee5;
}
/* タイトル（（法人登録住所）など）をバッジ調に */
.order_.col1_ .address_title_ {
align-self: flex-start;
background: #f0fdf4;
color: #0b7f57;
border: 1px solid #cfe9de;
border-radius: 999px;
padding: 4px 10px;
font-weight: 800;
font-size: 13px;
}
/* 住所本文 */
.order_.col1_ .address_item_ address {
font-style: normal;
color: #334155;
line-height: 1.7;
font-size: 14px;
}
/* 選択ボタン（inline style上書き） */
.order_.col1_ .address_item_ .address_select_ {
display: flex;
justify-content: flex-end;
margin-top: auto;
}
.order_.col1_ .address_item_ .address_select_ input[type="submit"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #0ea472 !important;
border-radius: 999px;
background: #12b8861a !important;
color: #0b7f57 !important;
padding: 10px 18px !important;
font-weight: 800;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.order_.col1_ .address_item_ .address_select_ input[type="submit"]:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
background: #e8fbf0 !important;
border-color: #0b7f57 !important;
}
/* 最下部の「戻る」imageボタン見た目を統一（画像は視覚的に隠すだけ） */
.order_.col1_ .submit_ {
display: flex;
gap: 10px;
justify-content: center;
margin: 14px 0 6px;
}
.order_.col1_ .submit_ input[type="image"].button_ {
appearance: none;
width: auto;
height: auto;
cursor: pointer;
/*border: 1px solid #cfe9de;
border-radius: 999px;
background: #f0fdf4;
padding: 10px 18px;*/
position: relative;
color: transparent;
filter: opacity(0); /* 元画像は見せない */
/*box-shadow: 0 2px 8px rgba(0, 0, 0, .06);*/
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.order_.col1_ .submit_ input[type="image"].button_::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: 16px 16px;
opacity: .9;
background-image: url("data:image/svg+xml;utf8,");
}
.order_.col1_ .submit_ input[type="image"].button_::after {
content: "戻る";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #0b7f57;
font-weight: 800;
}
.order_.col1_ .submit_ input[type="image"].button_:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
background: #e8fbf0;
border-color: #b9e8d4;
}
/* キーボードフォーカス */
.order_.col1_ :where(input, button, a)[type], .order_.col1_ :where(.move_button_, .keyword_, input[type="submit"]) {
outline: none;
}
.order_.col1_ :where(.keyword_, .move_button_, input[type="submit"], input[type="image"].button_):focus {
outline: 3px solid #baf7d7;
outline-offset: 2px;
}
/* スマホ最適化 */
@media (max-width: 720px) {
.order_.col1_ .address_box_2_ {
padding: 14px;
}
.order_.col1_ .address_box_2_ .top_box_ {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.order_.col1_ .address_box_2_ .move_button_ {
width: 100%;
}
.order_.col1_ .address_item_ .address_select_ input[type="submit"] {
width: 100%;
}
}
/* ダークモード */
/* ====== はみ出し防止パッチ（address.aspx / .order_.col1_ 配下） ====== */
/* グリッド：コンテンツ幅に引っ張られないよう minmax(0,1fr) を強制 */
.order_.col1_ .method_address_ {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* 列幅 */
}
@media (max-width: 720px) {
.order_.col1_ .method_address_ {
grid-template-columns: 1fr; /* スマホは1列固定で安全 */
}
}
/* グリッド子要素の“暗黙の最小幅”をゼロにしてオーバーフローを防止 */
.order_.col1_ .address_item_ {
min-width: 0; /* ← これが最重要 */
box-sizing: border-box; /* padding/境界込みで100%に収める */
}
/* テキストの折返し強化（郵便番号や長い氏名でもはみ出さない） */
.order_.col1_ .address_item_ address {
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
/* カード内ボタンが幅を押し広げないように */
.order_.col1_ .address_item_ .address_select_ {
min-width: 0;
}
.order_.col1_ .address_item_ .address_select_ input[type="submit"] {
max-width: 100%;
white-space: nowrap;
}
/* もしボックスシャドウが外に出て見える場合は最後の一押し（必要なら有効化） */
/* .order_.col1_ .address_box_2_{ overflow: hidden; border-radius:14px; } */
/* ================================
はみ出し完全ストッパー（address.aspx）
.order_.col1_ 配下限定
================================ */
/* 親ボックスは自分より外へ描画させない */
.order_.col1_ .address_box_2_ {
box-sizing: border-box;
max-width: 100%;
overflow: hidden; /* ← 最後の盾（影も内側に） */
}
/* グリッド容器は親幅を超えない */
.order_.col1_ .method_address_ {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* 列の最小幅=0で切る */
gap: 12px;
max-width: 100%;
box-sizing: border-box;
}
/* Gridの“暗黙min-width”と他CSSの幅指定を完全無効化 */
.order_.col1_ .address_item_ {
min-width: 0 !important; /* ← 最重要 */
width: auto !important; /* 既存の固定幅を打ち消す */
max-width: 100% !important; /* 親幅内に制限 */
justify-self: stretch; /* 列幅いっぱいに */
box-sizing: border-box;
overflow: hidden; /* 内側の長文でのはみ出し防止 */
}
/* テキストはどこでも折り返す */
.order_.col1_ .address_item_ address {
overflow-wrap: anywhere;
word-break: break-word;
white-space: normal;
min-width: 0;
}
/* ボタンが列幅を押し広げないように */
.order_.col1_ .address_item_ .address_select_ {
min-width: 0;
}
.order_.col1_ .address_item_ .address_select_ input[type="submit"] {
max-width: 100%;
white-space: nowrap;
}
/* 狭幅では1列に固定（安全運転） */
@media (max-width: 960px) {
.order_.col1_ .method_address_ {
grid-template-columns: 1fr;
}
}
/* =========================================================
【わたプロ】購入履歴テーブル（.formlist_.history_）
- HTML変更なし／BtoB上品モダン調
========================================================= */
.formlist_.history_ {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
overflow: hidden;
margin: 16px 0;
font-family: "Noto Sans JP", sans-serif;
font-size: 15px;
}
/* 見出し行 */
.formlist_.history_ th {
background: #f0fdf4;
color: #0b7f57;
border-bottom: 2px solid #cfe9de;
font-weight: 700;
text-align: center;
padding: 12px 10px;
white-space: nowrap;
}
/* 通常セル */
.formlist_.history_ td {
padding: 14px 12px;
border-bottom: 1px solid #e5e7eb;
color: #334155;
vertical-align: middle;
text-align: center;
}
/* 最終行の下線を消す */
.formlist_.history_ tr:last-child td {
border-bottom: none;
}
/* 空データ時（colspan=6）を中央カード風に */
.formlist_.history_ td[colspan] {
text-align: center;
padding: 40px 10px;
color: #64748b;
font-weight: 500;
background: #f9fafb;
border-radius: 0 0 14px 14px;
}
/* ホバー時（行にデータがある場合） */
.formlist_.history_ tr:hover td {
background: #f8fdfb;
}
/* レスポンシブ：スマホで縦積み */
@media (max-width: 720px) {
.formlist_.history_ {
font-size: 14px;
}
.formlist_.history_ th, .formlist_.history_ td {
padding: 10px 6px;
}
}
/* ダークモード */
/* =========================================================
【わたプロ】お気に入りグループ画面（CSSのみ）
========================================================= */
/* =========================================================
注文主（method_sender_） 見やすさ改善 + CSSだけで開閉
========================================================= */
/* 外枠 */
.method_sender_ {
--brand: #00a86b;
--ink: #1f2937;
--muted: #64748b;
--line: #e6efe9;
--bg: #fff;
max-width: 1090px;
margin: 24px auto;
padding: 20px 22px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
color: var(--ink);
box-sizing: border-box;
}
/* 上部ヘッダ */
.method_sender_ .headline_ {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
}
.method_sender_ .headline_title_ {
font-weight: 800;
color: var(--brand);
min-width: 84px;
}
.method_sender_ .headline_contents_ {
flex: 1;
line-height: 1.7;
}
.method_sender_ .saler_ {
font-weight: 700;
}
/* チェックと注釈 */
.method_sender_ #chkself {
accent-color: var(--brand);
transform: scale(1.06);
}
.method_sender_ label[for="chkself"] {
margin-left: 4px;
font-weight: 700;
color: var(--brand);
}
.method_sender_ .headline_contents_ > span {
margin-left: 8px;
font-size: .9rem;
color: var(--muted);
}
/* 区切り線 */
.method_sender_ .bar_ {
height: 1px;
background: linear-gradient(90deg, var(--brand), #dff3ec);
margin: 12px 0;
}
/* ===== CSSだけで開閉（:has） ===== */
.method_sender_ #sender_form {
display: none;
}
.method_sender_:has(#chkself:checked) #sender_form {
display: block;
animation: fadeIn .18s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-2px)
}
to {
opacity: 1;
transform: none
}
}
/* テーブル体裁 */
.method_sender_ table.formdetail_ {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 8px;
}
.method_sender_ table.formdetail_ th, .method_sender_ table.formdetail_ td {
padding: 10px 12px;
border-bottom: 1px solid #f1f4f3;
vertical-align: top;
}
.method_sender_ table.formdetail_ th {
width: 230px;
background: #f8faf9;
color: #0f172a;
font-weight: 700;
border-right: 1px solid var(--line);
}
.method_sender_ table.formdetail_ td {
background: #fff;
}
/* 入力部 */
.method_sender_ input[type="text"], .method_sender_ select {
border: 1px solid #d7e6e0;
border-radius: 8px;
padding: 7px 10px;
font-size: .95rem;
background: #fff;
color: var(--ink);
box-sizing: border-box;
transition: box-shadow .15s, border-color .15s;
}
.method_sender_ input[type="text"]:focus, .method_sender_ select:focus {
outline: 0;
border-color: var(--brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}
/* セレクトの矢印（上書き） */
.method_sender_ select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 18px 18px;
padding-right: 30px;
}
/* 補足テキスト・必須アイコン */
.method_sender_ .small_ {
font-size: .85rem;
color: var(--muted);
margin-left: 4px;
display: block;
}
.method_sender_ .must_ {
width: 12px;
height: 12px;
margin-right: 4px;
vertical-align: -2px;
}
/* よく使う幅（見切れ防止） */
.method_sender_ input[name="s_tel"], .method_sender_ input[name="s_zip"] {
width: 160px;
}
.method_sender_ input[name="s_name"], .method_sender_ input[name="s_name2"], .method_sender_ input[name="s_kana"], .method_sender_ input[name="s_kana2"] {
width: 180px;
}
.method_sender_ input[name="s_addr"], .method_sender_ input[name="s_addr2"], .method_sender_ input[name="s_addr3"], .method_sender_ input[name="s_comp"], .method_sender_ input[name="s_dept"] {
width: min(520px, 100%);
}
/* スマホ最適化 */
@media (max-width: 768px) {
.method_sender_ {
padding: 16px;
}
.method_sender_ table.formdetail_ th {
width: 100%;
display: block;
border-right: none;
border-radius: 6px 6px 0 0;
}
.method_sender_ table.formdetail_ td {
display: block;
border-radius: 0 0 6px 6px;
}
.method_sender_ input[type="text"], .method_sender_ select {
width: 100% !important;
}
}
/* ダークモード */
/* =========================================================
わたプロ｜配送先の新規登録（custdest_） 完全版スタイル
- 読みやすいカード風
- 入力幅の最適化／見切れ防止
- 画像ボタン(戻る/確認)もCSSでボタン化
- スマホ最適化／ダークモード
========================================================= */
/* 外枠（表そのものをカードに） */
table.formdetail_.custdest_ {
width: 100%;
max-width: 920px;
margin: 20px auto;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border: 1px solid #e6efe9;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
overflow: hidden;
}
/* 行 */
table.formdetail_.custdest_ tr + tr th, table.formdetail_.custdest_ tr + tr td {
border-top: 1px solid #f0f2f1;
}
/* 見出しセル */
table.formdetail_.custdest_ th {
width: 240px;
background: #f8faf9;
color: #0f172a;
font-weight: 700;
text-align: left;
padding: 12px 14px;
vertical-align: top;
border-right: 1px solid #e6efe9;
box-sizing: border-box;
}
/* 入力セル */
table.formdetail_.custdest_ td {
background: #fff;
padding: 12px 14px;
vertical-align: top;
box-sizing: border-box;
}
/* 入力部品の基本 */
table.formdetail_.custdest_ input[type="text"], table.formdetail_.custdest_ select {
border: 1px solid #d7e6e0;
border-radius: 8px;
padding: 7px 10px;
font-size: .95rem;
color: #1f2937;
background: #fff;
box-sizing: border-box;
transition: box-shadow .15s, border-color .15s;
}
table.formdetail_.custdest_ input[type="text"]:focus, table.formdetail_.custdest_ select:focus {
outline: 0;
border-color: #00a86b;
box-shadow: 0 0 0 3px rgba(0, 168, 107, .15);
}
/* セレクトの矢印を統一 */
table.formdetail_.custdest_ select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 18px 18px;
padding-right: 32px;
}
/* 必須アイコン・補足文 */
table.formdetail_.custdest_ .must_ {
width: 12px;
height: 12px;
margin-right: 6px;
vertical-align: -2px;
}
table.formdetail_.custdest_ .small_ {
font-size: .85rem;
color: #66757f;
margin-left: 6px;
}
/* よく使う幅（見切れ防止） */
table.formdetail_.custdest_ input[name="nickname"] {
width: min(340px, 100%);
}
table.formdetail_.custdest_ input[name="name"], table.formdetail_.custdest_ input[name="name2"], table.formdetail_.custdest_ input[name="kana"], table.formdetail_.custdest_ input[name="kana2"] {
width: 180px;
}
table.formdetail_.custdest_ input[name="tel"] {
width: 180px;
}
table.formdetail_.custdest_ input[name="zip"] {
width: 160px;
}
table.formdetail_.custdest_ select#pref {
width: min(260px, 100%);
}
table.formdetail_.custdest_ input[name="addr"], table.formdetail_.custdest_ input[name="addr2"], table.formdetail_.custdest_ input[name="addr3"], table.formdetail_.custdest_ input[name="comp"], table.formdetail_.custdest_ input[name="dept"] {
width: min(520px, 100%);
}
/* 画像の「Enter抑止」ボタンは非表示でOK */
table.formdetail_.custdest_ .hiddenEnter_ {
display: none !important;
}
/* 送信エリア */
.submit_ {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 16px auto 24px;
}
/* 戻る（a内のimgを隠してテキストボタン化） */
.submit_ a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
min-height: 42px;
padding: 10px 18px 10px 38px;
border: 1px solid #00a86b;
border-radius: 999px;
background: #e8fbf0;
color: #008c5e;
text-decoration: none;
font-weight: 700;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s;
}
.submit_ a img {
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.submit_ a::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: 16px 16px;
background-image: url("data:image/svg+xml;utf8,");
}
.submit_ a::after {
content: "戻る";
}
.submit_ a:hover {
background: #d9f7e8;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}
/* 確認（input[type=image]をCSSでボタン化） */
.submit_ input[type="image"][name="confirm"] {
/*appearance: none;
border: 1px solid #00a86b;
border-radius: 999px;
background: #00a86b;
cursor: pointer;
width: auto;
height: auto;
padding: 10px 20px 10px 40px;
position: relative;
filter: opacity(1); *//* 画像表示の代わりにテキストで表現 */
/*box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;*/
}
.submit_ input[type="image"][name="confirm"]::before {
/*content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-size: 18px 18px;
background-image: url("data:image/svg+xml;utf8,");*/
}
.submit_ input[type="image"][name="confirm"]::after {
content: "確認";
color: #fff;
font-weight: 800;
letter-spacing: .02em;
}
.submit_ input[type="image"][name="confirm"]:hover {
/*transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
background: #019d72;
border-color: #019d72;*/
}
/* キーボードフォーカス */
table.formdetail_.custdest_ :where(input, select, a, button)[tabindex], table.formdetail_.custdest_ :where(input, select, a, button):focus {
outline: 3px solid #baf7d7;
outline-offset: 2px;
border-radius: 10px;
}
/* スマホ最適化（th/tdを縦積み） */
@media (max-width: 768px) {
table.formdetail_.custdest_ {
border-radius: 12px;
}
table.formdetail_.custdest_ th {
width: 100%;
display: block;
border-right: none;
border-bottom: 1px solid #ecf1ef;
}
table.formdetail_.custdest_ td {
display: block;
padding-top: 10px;
}
/* フィールドは基本全幅 */
table.formdetail_.custdest_ input[type="text"], table.formdetail_.custdest_ select {
width: 100% !important;
}
/* 氏名・カナの［姓］［名］は改行で */
table.formdetail_.custdest_ td input[name="name"], table.formdetail_.custdest_ td input[name="name2"], table.formdetail_.custdest_ td input[name="kana"], table.formdetail_.custdest_ td input[name="kana2"] {
margin-top: 6px;
}
.submit_ {
flex-direction: column;
gap: 10px;
}
.submit_ a, .submit_ input[type="image"][name="confirm"] {
width: min(420px, 100%);
justify-content: center;
}
}
/* ダークモード */
/* =========================================================
わたプロ｜購入フロー：配送指定～決済（完成版CSS）
- カード化・余白最適化・表の整列
- セレクト/ラジオを見やすいUIに
- 画像ボタンをリッチなボタン風に
- スマホ最適化／ダークモード対応
========================================================= */
/* 共通トークン */ :root {
--brand: #00a86b;
--brand-strong: #019d72;
--ink: #1f2937;
--muted: #66757f;
--line: #e6efe9;
--panel: #ffffff;
}
/* セクション（カード） */
.method_box_ {
max-width: 980px;
margin: 20px auto;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
overflow: hidden;
}
.method_box_ > .common_headline2_ {
margin: 0;
padding: 14px 18px;
font-size: 1.15rem;
font-weight: 800;
color: var(--brand);
background: linear-gradient(180deg, #f9fbfa 0%, #ffffff 100%);
border-bottom: 1px solid var(--line);
}
.method_box_content_ {
padding: 16px 18px 18px;
}
/* 「配送指定」の最上段タイトル(h2)がカード外にある場合も整える */
h2.common_headline2_ {
max-width: 980px;
margin: 26px auto 10px;
font-size: 1.15rem;
color: var(--brand);
border-left: 6px solid var(--brand);
padding-left: 10px;
}
/* テーブル（配送先／商品明細／配送条件） */
.method_destlist_frame_ {
max-width: 980px;
margin: 0 auto 10px;
}
table.formlist_.method_destlist_ {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 0 0 10px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
}
table.formlist_.method_destlist_ th, table.formlist_.method_destlist_ td {
padding: 12px 14px;
border-bottom: 1px solid #f2f5f4;
vertical-align: top;
}
table.formlist_.method_destlist_ tr:last-child th, table.formlist_.method_destlist_ tr:last-child td {
border-bottom: none;
}
table.formlist_.method_destlist_ th {
width: 220px;
background: #f8faf9;
color: #0f172a;
font-weight: 800;
border-right: 1px solid var(--line);
}
/* 配送先ブロックの見栄え */
.method_destlist_ .dest_address_ {
font-size: .95rem;
}
.method_destlist_ .dest_address_ br {
line-height: 1.6;
}
/* 商品行（1行内で項目を整列） */
.method_destlist_ .goodsname_ > div, .method_destlist_ .qty_ > div, .method_destlist_ .amt_ > div {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.method_destlist_ .goodsname_ > div span {
color: #475569;
}
.method_destlist_ .goodsname_ > div .large_ {
font-weight: 800;
color: var(--brand);
}
.method_destlist_ .qty_ > div span, .method_destlist_ .amt_ > div span {
color: #475569;
}
.method_destlist_ .amt_ .large_ {
font-weight: 800;
color: var(--brand);
}
/* セレクト共通 */
select {
border: 1px solid #d7e6e0;
border-radius: 8px;
padding: 8px 12px;
font-size: .95rem;
color: var(--ink);
background: #fff;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 18px 18px;
padding-right: 36px;
}
select:focus {
outline: 0;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(0, 168, 107, .15);
}
/* 配送予定日の注釈 */
.method_destlist_ .delivery_date_ {
font-weight: 800;
color: var(--brand);
}
.method_destlist_ td.spec_ > span {
margin-left: 10px;
color: var(--muted);
}
/* ラジオボタン群（着日／時間帯） → ピル型ラベル */
.method_destlist_ input[type="radio"] {
position: absolute;
left: -9999px; /* 視覚的に隠す */
}
.method_destlist_ label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
margin: 4px 8px 4px 0;
border: 1px solid #d7e6e0;
border-radius: 999px;
background: #fff;
color: #0f172a;
font-weight: 700;
cursor: pointer;
transition: background .12s, border-color .12s, transform .12s, box-shadow .12s;
user-select: none;
}
.method_destlist_ input[type="radio"]:checked + label {
background: #e8fbf0;
border-color: var(--brand);
color: #008c5e;
box-shadow: 0 2px 8px rgba(0, 168, 107, .15);
}
.method_destlist_ label:hover {
transform: translateY(-1px);
}
/* クーポン・ポイント・発注書番号・注文コメント */
.method_box_content_ input[type="text"], .method_box_content_ textarea {
border: 1px solid #d7e6e0;
border-radius: 10px;
padding: 10px 12px;
font-size: .95rem;
color: var(--ink);
background: #fff;
width: min(620px, 100%);
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
}
.method_box_content_ textarea {
min-height: 108px;
resize: vertical;
}
.method_box_content_ input[type="text"]:focus, .method_box_content_ textarea:focus {
outline: 0;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(0, 168, 107, .15);
}
/* 支払い方法：ラジオをカードピル */
.method_box_ h2.common_headline2_ .must_ {
width: 14px;
height: 14px;
vertical-align: -2px;
margin-right: 6px;
}
.method_box_content_ > span {
display: inline-block;
margin: 4px 8px 4px 0;
}
.method_box_content_ input[type="radio"] {
position: absolute;
left: -9999px;
}
.method_box_content_ label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border: 1px solid #d7e6e0;
border-radius: 999px;
background: #fff;
cursor: pointer;
font-weight: 800;
color: #0f172a;
transition: background .12s, border-color .12s, transform .12s, box-shadow .12s;
}
.method_box_content_ input[type="radio"]:checked + label {
background: #e8fbf0;
border-color: var(--brand);
color: #008c5e;
box-shadow: 0 2px 8px rgba(0, 168, 107, .15);
}
.method_box_content_ label:hover {
transform: translateY(-1px);
}
/* 隠し送信（Enter抑止） */
.hiddenEnter_ {
display: none !important;
}
/* 送信エリア（戻る／次へ） */
.submit_ {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
max-width: 980px;
margin: 22px auto 28px;
}
.submit_ .button_ {
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
} /* 既存の画像そのものは隠す */
/* 画像inputをボタン風に置換表示（CSSだけで） */
.submit_ input[type="image"][name="back"], .submit_ input[type="image"][name="submit"] {
appearance: none;
position: relative;
width: auto;
height: auto;
padding: 11px 22px 11px 42px;
/*border-radius:999px;*/ /*border:1px solid var(--brand);*/
/*box-shadow:0 2px 10px rgba(0,0,0,.08);*/
cursor: pointer;
transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
/* 戻る */
.submit_ input[type="image"][name="back"] {
/*background: #e8fbf0;*/
}
.submit_ input[type="image"][name="back"]::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-size: 18px 18px;
background-image: url("data:image/svg+xml;utf8,");
}
.submit_ input[type="image"][name="back"]::after {
content: "戻る";
color: #008c5e;
font-weight: 800;
letter-spacing: .02em;
}
/* 次へ */
.submit_ input[type="image"][name="submit"] {
/*background: var(--brand);
border-color: var(--brand);*/
padding-left: 44px;
}
.submit_ input[type="image"][name="submit"]::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-size: 18px 18px;
background-image: url("data:image/svg+xml;utf8,");
}
.submit_ input[type="image"][name="submit"]::after {
content: "次へ";
color: #fff;
font-weight: 800;
letter-spacing: .02em;
}
/* ホバー */
.submit_ input[type="image"][name="back"]:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}
.submit_ input[type="image"][name="submit"]:hover {
transform: translateY(-1px); /*box-shadow:0 6px 16px rgba(0,0,0,.12);
background: var(--brand-strong); border-color: var(--brand-strong);*/
}
/* キーボードフォーカス */ :where(select, textarea, input[type="text"])::placeholder {
color: #94a3b8;
}
:where(select, textarea, input[type="text"]):focus-visible {
outline: none;
}
/* スマホ最適化 */
@media (max-width: 768px) {
.method_box_ {
border-radius: 12px;
}
table.formlist_.method_destlist_ th {
width: 100%;
display: block;
border-right: none;
}
table.formlist_.method_destlist_ td {
display: block;
}
.method_destlist_ .goodsname_ > div, .method_destlist_ .qty_ > div, .method_destlist_ .amt_ > div {
gap: 6px;
}
.submit_ {
flex-direction: column;
gap: 10px;
}
.submit_ input[type="image"][name="back"], .submit_ input[type="image"][name="submit"] {
width: min(440px, 100%);
justify-content: center;
}
}
/* ダークモード */
.submit_ input[type="image"] {
filter: none !important;
color: inherit !important;
width: auto !important;
height: auto !important;
opacity: 1 !important;
}
/* 擬似要素がクリックをブロックしないように */
.submit_ input[type="image"]::before, .submit_ input[type="image"]::after {
pointer-events: none !important;
}
/* 念のため、ボタン本体のクリックを有効化＆前面へ */
.submit_ input[type="image"] {
pointer-events: auto !important;
position: relative;
z-index: 10;
display: inline-block;
}
/* 可視化を戻したまま（前回の対処） */
.submit_ input[type="image"] {
filter: none !important;
color: inherit !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
}
/*注文確認*/
/* ==========================================
WATAPRO Order Block - Unified Style
対象:
─ 白カード + わたプロ共通っぽい落ち着いたトーン
========================================== */
.order_.spandual_ {
--brand: #15803d; /* わたプロっぽいグリーン系アクセント */
--ink: #111827;
--muted: #6b7280;
--border-soft: #e5e7eb;
--surface-sub: #f9fafb;
background: #ffffff;
border-radius: 16px;
border: 1px solid var(--border-soft);
padding: 28px 30px;
margin-top: 24px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
font-size: 15px;
line-height: 1.7;
color: var(--ink);
}
/* 上段2カラム（ご注文主様 / 金額周り） */
.order_.spandual_ .estimate_top_ {
width: 100%;
border-collapse: separate;
border-spacing: 0 0;
}
.order_.spandual_ .estimate_top_ > tbody > tr > td {
width: 50%;
vertical-align: top;
padding: 0 10px;
}
/* 共通テーブルスタイル（このブロック内だけ） */
.order_.spandual_ table {
width: 100%;
border-collapse: collapse;
}
.order_.spandual_ table th {
background: #f3f4f6 !important;
color: var(--ink) !important;
padding: 10px 12px;
font-weight: 600;
border-bottom: 1px solid var(--border-soft);
font-size: 14px;
}
.order_.spandual_ table td {
padding: 10px 12px;
border-bottom: 1px solid #f3f4f6;
vertical-align: top;
}
/* ご注文主様 テーブル */
.order_.spandual_ .formlist_.estimate_.host_ {
background: var(--surface-sub);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-soft);
}
/* 金額テーブル（右側） */
.order_.spandual_ .formdetail_.estimate_method_ {
background: #ffffff;
border-radius: 12px;
border: 1px solid var(--border-soft);
margin-bottom: 14px;
}
.order_.spandual_ .formdetail_.estimate_method_ th {
width: 45%;
}
.order_.spandual_ .formdetail_.estimate_method_ td {
text-align: right;
}
/* 大きい金額フォント */
.order_.spandual_ .large_ {
font-size: 18px;
font-weight: 700;
}
.order_.spandual_ .total_ .large_ {
font-size: 22px;
color: var(--brand);
}
/* 「送料はいただきません」などの文言 */
.order_.spandual_ .estimate_method_ td {
font-size: 14px;
}
/* ===============================
配送先 + 商品一覧ブロック
=============================== */
.order_.spandual_ .estimate_listframe_ {
margin-top: 28px;
}
/* 配送先カード */
.order_.spandual_ .dest_block_ {
background: var(--surface-sub);
border-radius: 14px;
border: 1px solid var(--border-soft);
padding: 18px 20px;
margin-bottom: 20px;
}
.order_.spandual_ .dest_block_ .formlist_.estimate_.dest_ {
background: transparent;
border-radius: 0;
border: 0;
}
/* 商品一覧ヘッダ */
.order_.spandual_ .destgoodslist_ {
margin-top: 14px;
background: #ffffff;
border-radius: 14px;
border: 1px solid var(--border-soft);
overflow: hidden;
}
.order_.spandual_ .destgoodslist_ th {
background: #ecfeff !important; /* ごく薄い青緑 */
color: #0f172a !important;
border-bottom: 1px solid #bae6fd;
}
/* 商品行 */
.order_.spandual_ .destgoodslist_ tr:nth-child(even) td {
background: #f9fafb;
}
.order_.spandual_ .estimate_goodsname_ .estimate_name_ {
font-size: 14px;
font-weight: 600;
display: block;
margin-bottom: 4px;
}
.order_.spandual_ .tax_class_name_ {
font-size: 12px;
color: var(--muted);
}
/* 商品右下の「価格：¥xxxx」 */
.order_.spandual_ .estimate_goodsname_ div[style*="text-align:right"] {
margin-top: 4px;
font-size: 13px;
color: var(--muted);
}
/* 延長保証などのオプションテーブル */
.order_.spandual_ .estimate_comments_ {
margin-top: 8px;
background: #f9fafb;
border-radius: 10px;
border: 1px solid #e5e7eb;
}
.order_.spandual_ .estimate_comments_ th {
width: 120px;
font-size: 12px;
}
.order_.spandual_ .estimate_comments_ td {
font-size: 13px;
color: #4b5563;
}
/* ===============================
代理店コメント・配送指定など
=============================== */
.order_.spandual_ .destspeclist_,
.order_.spandual_ .destspeclist2_ {
margin-top: 14px;
background: #ffffff;
border-radius: 12px;
border: 1px solid var(--border-soft);
}
.order_.spandual_ .destspeclist_ th,
.order_.spandual_ .destspeclist2_ th {
width: 20%;
}
/* ===============================
小計・税内訳（各配送先のまとめ）
=============================== */
.order_.spandual_ .subtotal_breakdown_ {
background: #f1f5f9;
border-radius: 12px;
padding: 10px 12px;
border: 1px solid #e2e8f0;
font-size: 14px;
}
.order_.spandual_ .subtotal_breakdown_ th {
background: transparent !important;
border-bottom: none;
padding: 4px 8px 4px 0;
}
.order_.spandual_ .subtotal_breakdown_ td {
border-bottom: none;
padding: 4px 0 4px 8px;
text-align: right;
}
/* ===============================
ページ下部：金額内訳ブロック
=============================== */
.order_.spandual_ .estimate_footer_total_ {
margin-top: 32px;
background: #f9fafb;
border-radius: 16px;
padding: 20px 22px;
border: 1px solid var(--border-soft);
}
.order_.spandual_ .estimate_footer_total_ h2 {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
color: var(--ink);
}
/* 金額内訳テーブル */
.order_.spandual_ .estimate_total_breakdown_list_ th {
width: 35%;
}
.order_.spandual_ .estimate_total_breakdown_list_ td {
text-align: right;
}
.order_.spandual_ .estimate_total_breakdown_list_ .subtotal_ th,
.order_.spandual_ .estimate_total_breakdown_list_ .subtotal_ td {
font-weight: 700;
}
/* 最終注文金額テーブル */
.order_.spandual_ .estimate_total_list_ {
margin-top: 12px;
}
.order_.spandual_ .estimate_total_list_ th {
width: 30%;
}
.order_.spandual_ .estimate_total_list_ td {
text-align: right;
}
.order_.spandual_ .estimate_total_list_ .estimate_total_ th,
.order_.spandual_ .estimate_total_list_ .estimate_total_ td {
font-size: 18px;
font-weight: 700;
color: var(--brand);
}
/* 備考テキスト（※今回の獲得ポイント〜） */
.order_.spandual_ .estimate_footer_total_ .small_ {
display: inline-block;
margin-top: 8px;
font-size: 12px;
color: var(--muted);
}
/* ===============================
「発注書番号」「注文コメント」テーブル
=============================== */
.order_.spandual_ > table.formlist_ {
margin-top: 20px;
border-radius: 12px;
border: 1px solid var(--border-soft);
overflow: hidden;
background: #ffffff;
}
.order_.spandual_ > table.formlist_ th {
font-size: 14px;
}
.order_.spandual_ > table.formlist_ td {
padding: 10px 12px;
}
/* ===============================
スマホ対応
=============================== */
@media (max-width: 768px) {
.order_.spandual_ {
padding: 18px 16px;
border-radius: 0;
box-shadow: none;
border-left: 0;
border-right: 0;
}
.order_.spandual_ .estimate_top_ > tbody > tr > td {
display: block;
width: 100%;
padding: 0;
margin-bottom: 18px;
}
.order_.spandual_ table th,
.order_.spandual_ table td {
font-size: 13px;
}
.order_.spandual_ .large_ {
font-size: 17px;
}
.order_.spandual_ .total_ .large_ {
font-size: 20px;
}
}
.order_header_ {
display: flex;
flex-direction: column; /* 縦並びに */
}
/* 順番を逆にする */
.order_header_ .common_headline1_ {
order: 1;
}
.order_header_ .order_flow_ {
order: 2;
}
/* ================================
法人/会員情報アップロード（.impcart_.col1_）わたプロ風
================================ */
/********************************************
WATAPRO「お気に入り」見出し × 白カード揃え
構造が別レイヤーでも左端を完全一致させるCSS
********************************************/
/* ▼ 白カードの横幅（わたプロ基準 980px） */
.impcart_.col1_ {
max-width: 980px;
margin: 0 auto 32px;
padding: 28px 32px 32px;
box-sizing: border-box;
background: #fff;
border-radius: 18px;
border: 1px solid rgba(148,163,184,0.25);
box-shadow: 0 18px 40px rgba(15,23,42,0.08);
}
/* ▼ 見出し（h2）を白カードの“左端”と完全に揃える */
.favorite_title_,
.common_headline2_,
.common_headline1_ {
/* 980px の中央寄せと同じ位置に左端を合わせる */
padding-left: calc(50% - 490px);
padding-right: calc(50% - 490px);
margin-top: 24px;
margin-bottom: 16px;
box-sizing: border-box;
font-size: 1.6rem;
font-weight: 700;
color: #1f2937;
}
/* ▼ スマホでは全幅に自然になじませる */
@media (max-width: 768px) {
.favorite_title_,
.common_headline2_,
.common_headline1_ {
padding-left: 16px;
padding-right: 16px;
}
.impcart_.col1_ {
margin: 0 12px 24px;
padding: 20px 16px 24px;
}
}
/* =========================================================
WATAPRO お気に入りグループ
・上部の「お気に入りグループ新規作成」リンク
・各 .bookmarkgroup_item_ カード
========================================================= */
/* ---------------------------------------------------------
1) 上部の「お気に入りグループ新規作成」リンク
--------------------------------------------------------- */
/* マイページ内の align="right" だけ狙い撃ち */
.customer_ > div[align="right"] {
text-align: right !important;
margin: 12px 0 18px;
}
/* ボタン風リンク（シンプルで読みやすく） */
.customer_ > div[align="right"] a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid #cfe9de;
background: #f0fdf4;
color: #0b7f57;
font-size: 13px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 2px 6px rgba(0,0,0,.06);
transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.customer_ > div[align="right"] a::before {
/*content: "＋";
font-size: 15px;
font-weight: 900;*/
}
.customer_ > div[align="right"] a:hover {
background: #e8fbf0;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.customer_ > div[align="right"] a:first-child {display:none;}
/* ---------------------------------------------------------
2) 各 お気に入りグループ .bookmarkgroup_item_
--------------------------------------------------------- */
.bookmarkgroup_item_ {
/*background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 14px 16px 12px;
margin: 0 0 18px;
box-shadow: 0 4px 12px rgba(0,0,0,.05);*/
}
/* 中のテーブルをリセット */
.bookmarkgroup_item_ table.formlist_ {
width: 100%;
border-collapse: collapse;
}
/* ---------- 上段：グループ名＆ボタン行 ---------- */
.bookmarkgroup_item_ .comment_ {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
padding-bottom: 10px;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 10px;
}
/* グループ名（comment_label_*）を大きく読みやすく */
.bookmarkgroup_item_ [id^="comment_label_"] {
font-size: 16px;
font-weight: 700;
color: #111827;
}
/* グループ名が空のときはスペースだけとる */
.bookmarkgroup_item_ #comment_label_100014:empty::before,
.bookmarkgroup_item_ [id^="comment_label_"]:empty::before {
content: "（名前未設定）";
color: #9ca3af;
font-weight: 400;
}
/* 名前編集リンク */
.bookmarkgroup_item_ a[id^="comment_"] {
font-size: 12px;
color: #2563eb;
text-decoration: underline;
}
/* エラーメッセージ */
.bookmarkgroup_item_ .error_ {
font-size: 11px;
color: #dc2626;
}
/* ---------- ボタン（買い物かごへ / 削除） ---------- */
/* 既存の image ボタン自体はそのまま使いつつ、周りを整える */
.bookmarkgroup_item_ input[type="image"] {
vertical-align: middle;
margin-left: 6px;
}
/* 買い物かごへ */
.bookmarkgroup_item_ input[type="image"][name="cart"] {
/* padding: 4px 0;
border-radius: 999px;
border: 1px solid #cfe9de;
background-color: #f0fdf4;*/
}
/* 削除 */
.bookmarkgroup_item_ input[type="image"][name^="del_"] {
/*padding: 4px 0;
border-radius: 999px;
border: 1px solid #fed7d7;
background-color: #fef2f2;*/
}
/* hoverで少しだけわかりやすく */
.bookmarkgroup_item_ input[type="image"][name="cart"]:hover {
background-color: #e8fbf0;
}
.bookmarkgroup_item_ input[type="image"][name^="del_"]:hover {
background-color: #fee2e2;
}
/* ---------------------------------------------------------
3) 下段：商品の行（画像＋テキストだけをシンプルに）
--------------------------------------------------------- */
/* 1行目(TH)は装飾無しでOK */
.bookmarkgroup_item_ table.formlist_ tr:first-child th {
border: none;
background: transparent;
padding: 0;
}
/* 2行目以降（商品行）のレイアウトを「画像 + テキスト」に */
.bookmarkgroup_item_ table.formlist_ tr + tr {
display: grid;
grid-template-columns: 60px 1fr;
gap: 12px;
align-items: flex-start;
padding-top: 8px;
}
/* 余計なTD（3列目以降）は非表示にしてスッキリ */
.bookmarkgroup_item_ table.formlist_ tr + tr td:nth-child(n+3) {
}
.bookmarkgroup_item_ table.formlist_ tr img {
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
/* 各セルの余白 */
.bookmarkgroup_item_ table.formlist_ td {
border: none !important;
background: transparent !important;
padding: 0;
width: auto;
}
/* 商品画像 */
.bookmarkgroup_item_ table.formlist_ tr + tr td:first-child img {
width: 100px;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
/* 商品名リンク */
.bookmarkgroup_item_ a.goods_name_ {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: #111827;
margin-bottom: 4px;
}
/* 価格表示 */
.bookmarkgroup_item_ .price_ {
font-size: 13px;
font-weight: 700;
color: #0b7f57;
}
.bookmarkgroup_item_ .price_ .large_ {
font-size: 17px;
}
/* ---------------------------------------------------------
4) モバイル（幅 640px 以下）の調整
--------------------------------------------------------- */
@media (max-width: 640px) {
.bookmarkgroup_item_ {
padding: 12px 12px 10px;
}
.bookmarkgroup_item_ .comment_ {
flex-direction: column;
align-items: flex-start;
}
.bookmarkgroup_item_ [id^="comment_label_"] {
font-size: 15px;
}
.bookmarkgroup_item_ table.formlist_ tr + tr {
grid-template-columns: 52px 1fr;
gap: 10px;
}
.bookmarkgroup_item_ table.formlist_ tr + tr td:first-child img {
width: 52px;
}
}
/* =========================================================
WATAPRO 法人/会員情報アップロード
対象：.impcart_.col1_ 内だけ
========================================================= */
/* 全体カード化 */
.impcart_.col1_ {
max-width: min(1120px, 94vw);
margin: 24px auto;
padding: 18px 18px 22px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Meiryo", sans-serif;
color: #1f2937;
}
/* 見出し */
.impcart_.col1_ h1.common_headline1_ {
font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.3;
font-weight: 700;
margin: 0 0 8px;
padding-bottom: 8px;
border-bottom: 2px solid #e6efe9;
}
/* 説明テキスト */
.impcart_.col1_ > p {
margin: 0 0 16px;
font-size: 13px;
color: #4b5563;
}
/* ログイン名カード */
.impcart_.col1_ .customer_status_ {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 10px 14px;
margin: 0 0 16px;
box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.impcart_.col1_ .customer_status_ .loginname_ {
font-size: 14px;
font-weight: 700;
color: #0b7f57;
}
/* インポート／エクスポート全体 */
.impcart_.col1_ form {
margin-top: 4px;
}
/* テーブル共通（インポート＆エクスポート） */
.impcart_.col1_ table.formlist_.import_,
.impcart_.col1_ table.formlist_.export_ {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 4px 0 14px;
font-size: 13px;
background: #fff;
border-radius: 12px;
border: 1px solid #e5e7eb;
overflow: hidden;
}
/* 見出しセル */
.impcart_.col1_ table.formlist_.import_ th,
.impcart_.col1_ table.formlist_.export_ th {
width: 160px;
padding: 10px 12px;
background: linear-gradient(180deg, #f7fdfa, #f2fbf7);
border-bottom: 1px solid #e6efe9;
border-right: 1px solid #e6efe9;
font-weight: 700;
color: #0b7f57;
text-align: left;
white-space: nowrap;
}
/* 入力セル */
.impcart_.col1_ table.formlist_.import_ td,
.impcart_.col1_ table.formlist_.export_ td {
padding: 10px 12px;
border-bottom: 1px solid #f1f5f9;
background: #ffffff;
vertical-align: middle;
}
/* 最終行の下線消し */
.impcart_.col1_ table.formlist_.import_ tr:last-child th,
.impcart_.col1_ table.formlist_.import_ tr:last-child td,
.impcart_.col1_ table.formlist_.export_ tr:last-child th,
.impcart_.col1_ table.formlist_.export_ tr:last-child td {
border-bottom: none;
}
/* ラジオボタン・ラベル */
.impcart_.col1_ table.formlist_.import_ input[type="radio"],
.impcart_.col1_ table.formlist_.export_ input[type="radio"] {
margin-right: 4px;
}
.impcart_.col1_ table.formlist_.import_ label,
.impcart_.col1_ table.formlist_.export_ label {
margin-right: 16px;
}
/* ファイル選択 */
.impcart_.col1_ input[type="file"] {
font-size: 13px;
padding: 4px 0;
}
/* レイアウト確認リンク */
.impcart_.col1_ a[href*="filelayout.aspx"] {
font-size: 13px;
color: #2563eb;
text-decoration: underline;
}
/* 情報メッセージ枠（.infomation_） */
.impcart_.col1_ .infomation_ {
margin: 10px 0 4px;
font-size: 12px;
color: #6b7280;
}
/* ボタンエリア共通 */
.impcart_.col1_ .submit_ {
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0 18px;
}
/* 画像ボタンをシンプルな pill ボタン風に */
.impcart_.col1_ .submit_ input[type="image"] {
/*appearance: none;
-webkit-appearance: none;
border: 1px solid #cfe9de;
border-radius: 999px;
background: linear-gradient(135deg, #00a86b, #05bf7f);
box-shadow: 0 6px 16px rgba(0, 168, 107, 0.28);
padding: 8px 40px;
cursor: pointer;
position: relative;*/
/* 元画像は見た目だけ薄くしておく */
/* filter: brightness(0) invert(1);*/
}
/* hover時のふわっと感 */
.impcart_.col1_ .submit_ input[type="image"]:hover {
box-shadow: 0 10px 22px rgba(0, 168, 107, 0.35);
transform: translateY(-1px);
}
/* altテキストをそのままボタンラベルに（CSV取込 / CSV出力） */
.impcart_.col1_ .submit_ input[type="image"]::after {
content: attr(alt);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
}
/* 2つ目のブロック上の説明テキスト少し余白 */
.impcart_.col1_ p + table.formlist_.export_ {
margin-top: 4px;
}
/* スマホ調整 */
@media (max-width: 640px) {
.impcart_.col1_ {
padding: 14px 12px 18px;
margin: 16px auto;
}
.impcart_.col1_ table.formlist_.import_ th,
.impcart_.col1_ table.formlist_.import_ td,
.impcart_.col1_ table.formlist_.export_ th,
.impcart_.col1_ table.formlist_.export_ td {
display: block;
width: 100%;
border-right: none;
}
.impcart_.col1_ table.formlist_.import_ th,
.impcart_.col1_ table.formlist_.export_ th {
border-radius: 10px 10px 0 0;
}
.impcart_.col1_ table.formlist_.import_ td,
.impcart_.col1_ table.formlist_.export_ td {
border-radius: 0 0 10px 10px;
}
.impcart_.col1_ .submit_ input[type="image"] {
width: 100%;
max-width: 320px;
}
}
/* ============================
WATAPRO風：customer_status_
============================ */
.customer_status_{
background:#fff;
border:1px solid #e5e7eb;
border-radius:14px;
box-shadow:0 6px 16px rgba(0,0,0,.06);
padding:14px 18px;
margin:18px 0;
font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;
color:#222;
}
.customer_status_ .loginname_{
font-size:16px;
font-weight:700;
color:#0b7f57; /* わたプロ緑 */
margin-bottom:4px;
}
.customer_status_ .biz_name_{
font-weight:600;
color:#444;
}
.customer_status_ span{
display:inline-block;
margin-right:6px;
}
/* =============================================
WATAPRO風：impcartlist_ テーブル全体カード化
============================================= */
table.formlist_.impcartlist_{
width:100%;
border-collapse:separate;
border-spacing:0;
background:#fff;
border:1px solid #e5e7eb;
border-radius:14px;
overflow:hidden;
font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;
box-shadow:0 6px 16px rgba(0,0,0,.06);
margin:20px 0;
}
/* ヘッダー */
table.formlist_.impcartlist_ th{
padding:12px 10px;
background:linear-gradient(180deg,#f7fdfa,#f2fbf7);
color:#0b7f57;
font-weight:700;
text-align:left;
border-bottom:1px solid #e6efe9;
font-size:14px;
white-space:nowrap;
}
/* 本文セル */
table.formlist_.impcartlist_ td{
padding:12px 10px;
border-bottom:1px solid #f1f5f9;
background:#fff;
vertical-align:middle;
font-size:14px;
color:#222;
}
/* 行ホバー */
table.formlist_.impcartlist_ tr:hover td{
background:#f9fefb; /* 薄いわたプロ緑 */
}
/* 価格強調 */
table.formlist_.impcartlist_ .large_{
font-size:18px;
font-weight:800;
color:#0b7f57;
}
/* 最終行のボーダー消す */
table.formlist_.impcartlist_ tr:last-child td{
border-bottom:none;
}
/* スマホ最適化（カード化） */
@media(max-width:800px){
table.formlist_.impcartlist_,
table.formlist_.impcartlist_ thead,
table.formlist_.impcartlist_ tbody,
table.formlist_.impcartlist_ th,
table.formlist_.impcartlist_ td,
table.formlist_.impcartlist_ tr{
display:block;
width:100%;
}
table.formlist_.impcartlist_ thead{display:none;}
table.formlist_.impcartlist_ tr{
border:1px solid #e5e7eb;
border-radius:12px;
margin-bottom:14px;
box-shadow:0 4px 12px rgba(0,0,0,.05);
overflow:hidden;
}
table.formlist_.impcartlist_ td{
border:none;
border-bottom:1px dashed #e3ece7;
padding:10px 14px 10px 46%;
position:relative;
font-size:14px;
}
table.formlist_.impcartlist_ td::before{
content: attr(data-label);
position:absolute;
left:14px;
top:12px;
font-size:12px;
font-weight:700;
color:#0b7f57;
white-space:nowrap;
}
table.formlist_.impcartlist_ tr:last-child td{
border-bottom:none;
}
}
/* =========================================================
お気に入りページ専用デザイン
Scope : .customer_ form[action*="/shop/customer/bookmark.aspx"]
========================================================= */
/* フォーム全体（カード風） */
.customer_ form[action*="/shop/customer/bookmark.aspx"] {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
padding: 20px 16px;
}
/* 一覧全体 */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_frame_ {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
/* 1件分のカード */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ {
display: grid;
grid-template-columns: 32px 88px minmax(0, 1fr);
gap: 12px;
align-items: flex-start;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid #e5e7eb;
background: #fff;
position: relative;
}
/* チェックボックス列 */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .cartgoods_ {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 4px;
}
/* サムネ画像 */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .img_ img {
width: 80px;
height: auto;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
}
/* 右側テキストエリア */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .desc_ {
display: flex;
flex-direction: column;
gap: 4px;
}
/* 商品名 */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .name1_ a {
font-size: 14px;
font-weight: 700;
color: #111827;
text-decoration: none;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .name1_ a:hover {
text-decoration: underline;
}
/* 価格・更新日 */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .spec_ {
font-size: 12px;
color: #6b7280;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .price_ {
font-weight: 700;
color: #0b7f57;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .price_ .large_ {
font-size: 16px;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .updt_ {
margin-top: 2px;
font-size: 11px;
color: #9ca3af;
}
/* メモ部分 */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .comment_ {
margin-top: 6px;
font-size: 12px;
color: #6b7280;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .comment_ a {
color: #0b7f57;
text-decoration: underline;
text-underline-offset: 2px;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .comment_ a:hover {
opacity: .85;
}
/* メモ textarea をカード幅いっぱいに */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ textarea {
width: 100% !important;
box-sizing: border-box;
margin-top: 6px;
font-size: 12px;
padding: 6px 8px;
border-radius: 6px;
border: 1px solid #d1d5db;
resize: vertical;
}
/* エラー・メッセージ */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ [id^="err_comment_"] {
color: #dc2626;
font-size: 11px;
}
/* 下部の「かごに入れる」「グループ作成」ボタン */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_buy_ {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin: 22px 0 8px;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_buy_ input[type="image"] {
border: none !important;
background: transparent !important;
padding: 0 !important;
border-radius: 999px !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
transition: transform .15s, box-shadow .15s, filter .15s;
vertical-align: middle;
display: inline-block;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_buy_ input[type="image"]:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(0, 0, 0, .20);
filter: saturate(1.05) brightness(1.02);
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_buy_ input[type="image"]:active {
transform: translateY(0);
box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
filter: brightness(.98);
}
/* 一番下の「戻る」リンクだけピルボタンに（他ページの .submit_ には影響させない） */
.customer_ form[action*="/shop/customer/bookmark.aspx"] .submit_ {
display: flex;
justify-content: center;
margin: 20px 0 4px;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .submit_ a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 160px;
height: 44px;
border-radius: 999px;
background: linear-gradient(180deg, #ffb84d, #f59e0b);
color: #fff;
font-weight: 700;
font-size: 14px;
text-decoration: none;
box-shadow: 0 6px 16px rgba(245, 158, 11, .35);
overflow: hidden;
transition: all .22s ease;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .submit_ a img {
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .submit_ a::after {
content: "戻る";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .submit_ a:hover {
background: linear-gradient(180deg, #ffc566, #f6ad2a);
box-shadow: 0 10px 20px rgba(245, 158, 11, .45);
transform: translateY(-2px);
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .submit_ a:active {
background: linear-gradient(180deg, #f6ad2a, #e59300);
transform: none;
box-shadow: 0 4px 10px rgba(245, 158, 11, .30);
}
/* スマホ調整 */
@media (max-width: 640px) {
.customer_ form[action*="/shop/customer/bookmark.aspx"] {
padding: 16px 10px;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ {
grid-template-columns: 28px 72px minmax(0, 1fr);
padding: 10px 12px;
}
.customer_ form[action*="/shop/customer/bookmark.aspx"] .bookmark_item_ .img_ img {
width: 72px;
}
}
/* ----------------------------------------------------
WATAPRO法人会員登録フォーム専用デザイン
form[action*="bizuserentry.aspx"] 内のみ適用
わたプロ風：白×ライトグレー×ブランドグリーン
---------------------------------------------------- */
/* フォーム外枠 */
form[action*="bizuserentry.aspx"] {
margin: 32px auto 64px;
padding: 32px 28px 40px;
background: #ffffff;
border-radius: 18px;
box-shadow: 0 8px 22px rgba(0,0,0,0.06);
border: 1px solid #e7e7e7;
box-sizing: border-box;
font-family: "Noto Sans JP", sans-serif;
}
/* 見出し（h2など） */
form[action*="bizuserentry.aspx"] .block-title,
form[action*="bizuserentry.aspx"] h2 {
position: relative;
padding-bottom: 10px;
margin-bottom: 24px;
font-size: 20px;
font-weight: 700;
color: #333;
}
form[action*="bizuserentry.aspx"] .block-title:after,
form[action*="bizuserentry.aspx"] h2:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 48px;
height: 3px;
border-radius: 3px;
background: #00a86b; /* WATAPRO GREEN */
}
/* テーブル全体 */
form[action*="bizuserentry.aspx"] .formdetail_ {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: 10px;
overflow: hidden;
margin-bottom: 32px;
border: 1px solid #e5e5e5;
}
/* 行 */
form[action*="bizuserentry.aspx"] .formdetail_ tr {
border-bottom: 1px solid #e9e9e9;
}
form[action*="bizuserentry.aspx"] .formdetail_ tr:last-child {
border-bottom: none;
}
/* 左側TH（項目名） */
form[action*="bizuserentry.aspx"] .formdetail_ th {
width: 32%;
background: #f7f9fb;
padding: 14px 18px;
color: #333;
font-weight: 600;
font-size: 14px;
border-right: 1px solid #e5e5e5;
box-sizing: border-box;
}
/* 右側TD（入力値） */
form[action*="bizuserentry.aspx"] .formdetail_ td {
padding: 14px 18px;
font-size: 14px;
color: #222;
line-height: 1.7;
}
/* 必須マーク */
form[action*="bizuserentry.aspx"] .must_ {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
color: #fff;
font-size: 11px;
border-radius: 4px;
}
/* 注意文メッセージ（緑背景） */
form[action*="bizuserentry.aspx"] .message_ {
background: linear-gradient(180deg, #f7fdfa, #f2fbf7);
border: 1px dashed #d6e7de;
border-radius: 12px;
padding: 14px 16px;
color: #334155;
font-weight: 600;
margin: 16px 0;
}
/* 送信ボタン */
form[action*="bizuserentry.aspx"] .submit_ {
margin-top: 40px;
text-align: center;
}
form[action*="bizuserentry.aspx"] .submit_ input[type="image"] {
max-width: 200px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
form[action*="bizuserentry.aspx"] .submit_ input[type="image"]:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
/* スマホ版 */
@media screen and (max-width: 768px) {
form[action*="bizuserentry.aspx"] {
margin: 16px 10px 48px;
padding: 20px 16px 30px;
}
form[action*="bizuserentry.aspx"] .formdetail_ th,
form[action*="bizuserentry.aspx"] .formdetail_ td {
display: block;
width: 100%;
border-right: none;
}
form[action*="bizuserentry.aspx"] .formdetail_ th {
border-bottom: 1px solid #e5e5e5;
}
form[action*="bizuserentry.aspx"] .submit_ input[type="image"] {
max-width: 240px;
}
}
/* =========================================
法人会員一覧：件数ナビ＋一覧テーブル（わたプロ風）
対象：.customer_ 内の .navipage_ と .formlist_.bizuserlist_
========================================= */
/* 件数ナビ */
.customer_ .navipage_ {
margin: 16px auto 8px;
text-align: right;
font-size: 13px;
}
.customer_ .navipage_sum_ {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: #f5f7fa;
border-radius: 999px;
border: 1px solid #e0e4ec;
color: #555;
}
.customer_ .navipage_sum_ strong {
font-size: 15px;
color: #00a86b; /* WATAPRO GREEN */
}
/* 一覧テーブル本体 */
.customer_ .formlist_.bizuserlist_ {
width: 100%;
margin: 8px auto 24px;
border-collapse: collapse;
border-radius: 12px;
overflow: hidden;
background: #fff;
border: 1px solid #e3e6ee;
box-shadow: 0 6px 18px rgba(0,0,0,0.04);
font-size: 13px;
}
/* ヘッダー */
.customer_ .formlist_.bizuserlist_ th {
padding: 10px 12px;
background: #f3f6fb;
color: #333;
font-weight: 600;
text-align: left;
border-bottom: 1px solid #dde2eb;
white-space: nowrap;
}
/* セル */
.customer_ .formlist_.bizuserlist_ td {
padding: 10px 12px;
border-bottom: 1px solid #eef1f7;
color: #222;
white-space: nowrap;
}
/* 最終行ボーダー削除 */
.customer_ .formlist_.bizuserlist_ tr:last-child td {
border-bottom: none;
}
/* 行ホバー */
.customer_ .formlist_.bizuserlist_ tbody tr:hover td {
background: #f0fbf5;
}
/* ストライプ（1件だけでも今後の拡張に備えて） */
.customer_ .formlist_.bizuserlist_ tbody tr:nth-child(even) td {
background-color: #fafbfe;
}
/* 氏名リンク（1列目） */
.customer_ .formlist_.bizuserlist_ td.name12_ a {
color: #006a4a;
font-weight: 600;
text-decoration: none;
}
.customer_ .formlist_.bizuserlist_ td.name12_ a:hover {
text-decoration: underline;
}
/* 状態・権限などの見やすさ */
.customer_ .formlist_.bizuserlist_ td.status_ {
font-weight: 600;
}
.customer_ .formlist_.bizuserlist_ td.auth_ {
color: #555;
}
/* 状態別の色（例：仮登録を少しオレンジ系で） */
.customer_ .formlist_.bizuserlist_ tr.user_status2_ td.status_ {
color: #e67e22; /* 仮登録など */
}
/* 更新者は少しトーンダウン */
.customer_ .formlist_.bizuserlist_ td.auth_upuser_nm_ {
color: #666;
}
/* スマホ対応：横スクロールに逃がす */
@media screen and (max-width: 768px) {
.customer_ .navipage_ {
margin: 12px 10px 4px;
text-align: left;
}
.customer_ .formlist_.bizuserlist_ {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
font-size: 12px;
}
.customer_ .formlist_.bizuserlist_ table {
width: 700px;
}
}