@charset "utf-8";


/* =========================================================
   WATAPRO ログイン 共通レイアウト（楽天ログイン風）
   対象：
     /shop/customer/menu.aspx
     /shop/customer/forgotpass.aspx
     /shop/customer/loginb.aspx
   ※ HTMLは変更なし／CSSのみ
========================================================= */

/* 全体背景 */
body {
  background: #ffffff;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* ---------- ログインページ共通コンテナ ---------- */
.wrapper_ {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 0 80px;  /* 下はフッターぶん余白 */
  box-sizing: border-box;
}

.header_guide_link_list_ {list-style-type:none;} 
.contact-page .wrapper_ {
  max-width: 1000px !important;
	width: 1000px !important;
}


/* =========================================================
   1. ヘッダー：ロゴ中央＋右上 お問合せボタン
========================================================= */

#header {
  background: #ffffff !important;
  border-bottom: none !important;
  padding-top: 36px !important;
  text-align: center !important;
  position: relative;
}

/* ロゴ中央 */
#header .header_top_frame_ {
  background: none !important;
  box-shadow: none !important;
}
#header .header_logo_ {
  text-align: center;
  margin-bottom: 8px;
}
#header .header_logo_ img {
  height: 125px;
  width: auto;
	    display: inline-block;
}

/* 不要要素OFF */
#header .header_username_,
#header .header_nav_link_,
#header .header_bottom_frame_,
#header .header_search_ {
  display: none !important;
}

/* ご利用ガイド OFF */
#header .header_guide_link_ .guide {
  display: none !important;
}

/* お問合せボタンを右上に */
#header .header_guide_link_ {
  position: absolute;
  top: 14px;
  right: 16px;
}
#header .header_guide_link_ .contact a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: 12px;
  color: #374151;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}
#header .header_guide_link_ .contact a:hover {
  background: #e6f5ef;
  border-color: #00a86b;
}

/* ロゴの下にタイトル（デフォルト：会員専用） */
#header::after {
  content: "会員専用ログイン";
  display: block;
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  color: #00a86b;
}

/* =========================================================
   2. ログインブロック本体（楽天ログイン風）
========================================================= */

.login_.col1_ {
  position: relative;
  padding: 10px 0;
  text-align: left;
}

/* 左の縦ライン（楽天っぽい区切り線） */
.login_.col1_::before {
  
}

/* 元のH1は使わない（ロゴ下タイトルに統合） */
.login_.col1_ h1.common_headline1_ {
  display: none !important;
}

/* 見出し（会員の方 / 代理店の方など） */
.login_.col1_ h2.common_headline2_ {
  position: relative;
  margin-bottom: 20px;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}

/* 番号バッジ（左の丸） */
.login_.col1_ h2.common_headline2_::before {
  /*content: "??";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #00a86b;
  color: #ffffff;
  font-size: 12px;
  text-align: center;*/
}

/* 下線 */
.login_.col1_ h2.common_headline2_::after {
  /*content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: #e5e7eb;*/
}

/* テーブルレイアウト（2カラム） */
.login_.col1_ table.loginform_ {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
}
.login_.col1_ table.loginform_ th {
  width: 26%;
  font-size: 13px;
  color: #4b5563;
  padding: 8px 8px 8px 0;
  vertical-align: middle;
}
.login_.col1_ table.loginform_ td {
  width: 74%;
  padding: 6px 0;
}

/* 入力欄 */
.login_.col1_ input[type="text"],
.login_.col1_ input[type="password"] {
  width: 100%;
  padding: 11px 10px;
  border-radius: 4px;
  border: 1px solid #d4d4d8;
  background: #fafafa;
  font-size: 14px;
  box-sizing: border-box;
}
.login_.col1_ input[type="text"]:focus,
.login_.col1_ input[type="password"]:focus {
  border-color: #00a86b;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(0, 168, 107, 0.15);
}
.login_.col1_ input::placeholder {
  color: #9ca3af;
}

/* ログインボタン：画像は透明にしてCSSで見た目を作る */
.login_.col1_ .inputimage_ {
  margin-top: 18px;
  padding-left: 26%; /* 見出しと揃える */
  position: relative;
  max-width: 520px;
  box-sizing: border-box;
}

/* 画像ボタンはクリック判定用だけ */
.login_.col1_ .inputimage_ input[type="image"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  cursor: pointer;
}

/* 見た目のボタン（デフォルト：会員グリーン＋ログイン） */
.login_.col1_ .inputimage_::after {
  content: "ログイン";
  display: block;
  width: 100%;
  padding: 13px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  border-radius: 4px;
  background: #00a86b;
  color: #ffffff;
  box-sizing: border-box;
}
.login_.col1_ .inputimage_:hover::after {
  background: #008e5b;
}

/* 下部リンク（パス忘れ／代理店ログインなど） */
.login_.col1_ .forgotpass_,
.login_.col1_ .goto_loginb_ {
  padding-left: 26%;
  margin-top: 12px;
  font-size: 13px;
}
.login_.col1_ .forgotpass_ a,
.login_.col1_ .goto_loginb_ a {
  color: #1d4ed8;
  text-decoration: underline;
}

/* PC/SP切り替えトグル（右下の丸いボタン） */
.change_mode_ {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
  font-size: 12px;
  box-sizing: border-box;
}
.change_mode_ span {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.change_mode_ .mode_sp_ {
  background: transparent;
  color: #6b7280;
}
.change_mode_ .mode_pc_ {
  background: #00a86b;
  color: #ffffff;
  font-weight: 700;
}

/* =========================================================
   3. フッター：画面の下にぴったり＋楽天っぽく
========================================================= */

#footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
  padding: 12px 0 16px;
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  z-index: 50;
}
#footer .footer_frame_ {
  max-width: 960px;
  margin: 0 auto;
}
#footer .footer_logo_ {
  display: none;
}

/* 本文がフッターに隠れないよう下余白 */
.wrapper_wrapper_ .wrapper_ {
  padding-bottom: 80px;
}


/* =========================================================
   4. ページごとの色分け（:has で判定）
   - menu / forgotpass → 会員専用（グリーン）
   - loginb           → 代理店様（ブルー）
========================================================= */

/* ---------- 会員専用（menu / forgotpass） ---------- */

/* ロゴ下タイトル */
body:has(form[action*="menu.aspx"]) #header::after,
body:has(form[action*="forgotpass.aspx"]) #header::after {
  content: "会員専用ログイン";
  color: #00a86b;
}

/* 見出しバッジとボタンはデフォルト（グリーン）なので追加指定なし */


/* ---------- 代理店様ログイン（loginb） ---------- */

/* ロゴ下タイトルを青＆文言変更 */
body:has(form[action*="loginb.aspx"]) #header::after {
  content: "代理店様ログイン";
  color: #1d4ed8;
}

/* 番号バッジを青に */
body:has(form[action*="loginb.aspx"]) .login_.col1_ h2.common_headline2_::before {
  background: #1d4ed8;
}

/* ボタンも青に */
body:has(form[action*="loginb.aspx"]) .login_.col1_ .inputimage_::after {
  background: #1d4ed8;
}
body:has(form[action*="loginb.aspx"]) .login_.col1_ .inputimage_:hover::after {
  background: #143fab;
}

/* フッターは色共通でよいのでそのまま */


/* =========================================================
   5. スマホ調整
========================================================= */

@media (max-width: 640px) {
  .wrapper_ {
    padding: 24px 12px 80px;
  }

  #header {
    padding-top: 24px !important;
  }
  #header .header_logo_ img {
    height: 56px;
  }
  #header .header_guide_link_ {
    top: 10px;
    right: 10px;
  }

  .login_.col1_ h2.common_headline2_ {
    padding-left: 32px;
    margin-bottom: 16px;
    font-size: 16px;
  }
  .login_.col1_ h2.common_headline2_::before {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
  }

  .login_.col1_ table.loginform_ th,
  .login_.col1_ table.loginform_ td {
    display: block;
    width: 100%;
  }
  .login_.col1_ table.loginform_ th {
    padding-bottom: 2px;
  }

  .login_.col1_ .inputimage_,
  .login_.col1_ .forgotpass_,
  .login_.col1_ .goto_loginb_ {
    padding-left: 0;
  }
  .login_.col1_ .forgotpass_,
  .login_.col1_ .goto_loginb_ {
    text-align: center;
  }

  .change_mode_ {
    right: 10px;
    bottom: 12px;
    font-size: 11px;
  }

  .login_.col1_::before {
    left: -8px;
  }
}



/* =========================================================
   パスワード再設定（forgotpass.aspx）専用スタイル復活
   ========================================================= */

/* ▼ forgotpass だけ専用タイトル＆色 */
body:has(form[action*="forgotpass.aspx"]) #header::after {
  content: "パスワード再設定";
  font-size: 20px;
  font-weight: 700;
  color: #00a86b;  /* 会員専用と同じグリーン */
}

/* ▼ パス再設定の説明文（デフォルトの p, div を整える） */
body:has(form[action*="forgotpass.aspx"]) .login_.col1_ .form_text_ {
  padding-left: 40px;
  margin: 14px 0 22px;
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
}

/* ▼ 入力欄（メールアドレス1つの場合の縦レイアウト） */
body:has(form[action*="forgotpass.aspx"]) .login_.col1_ table.loginform_ th,
body:has(form[action*="forgotpass.aspx"]) .login_.col1_ table.loginform_ td {
  display: block;
  width: 100%;
  padding-left: 0;
}

body:has(form[action*="forgotpass.aspx"]) .login_.col1_ table.loginform_ th {
  padding: 6px 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
}

body:has(form[action*="forgotpass.aspx"]) .login_.col1_ table.loginform_ td {
  padding: 2px 0 12px;
}

/* ▼ ボタン「送信」に変更 */
body:has(form[action*="forgotpass.aspx"]) .login_.col1_ .inputimage_::after {
  content: "送信";
  background: #00a86b;
}

body:has(form[action*="forgotpass.aspx"]) .login_.col1_ .inputimage_:hover::after {
  background: #008e5b;
}

/* ▼ 下リンク（ログインに戻る）を中央寄せ */
body:has(form[action*="forgotpass.aspx"]) .login_.col1_ .goto_loginb_,
body:has(form[action*="forgotpass.aspx"]) .login_.col1_ .forgotpass_ {
  padding-left: 0 !important;
  text-align: center;
  margin-top: 18px;
}

body:has(form[action*="forgotpass.aspx"]) .login_.col1_ .goto_loginb_ a,
body:has(form[action*="forgotpass.aspx"]) .login_.col1_ .forgotpass_ a {
  color: #2563eb;
  text-decoration: underline;
}

/* =========================================================
   【forgotpass.aspx】パスワード再設定ページ専用デザイン
   ========================================================= */

/* ■ 全体レイアウトをログイン画面と揃える */
body:has(form[action*="forgotpass.aspx"]) .wrapper_ {
  max-width: 650px;
  margin: 0 auto;
  padding: 32px 0 80px;
  box-sizing: border-box;
}

/* ■ ヘッダー：ロゴ中央＋右上「お問い合わせ」＋タイトル変更 */
body:has(form[action*="forgotpass.aspx"]) #header {
  background: #ffffff !important;
  border-bottom: none !important;
  padding-top: 36px !important;
  text-align: center !important;
  position: relative;
}

body:has(form[action*="forgotpass.aspx"]) #header .header_top_frame_ {
  background: none !important;
  box-shadow: none !important;
}

/* ロゴ中央＆大きめ */
body:has(form[action*="forgotpass.aspx"]) #header .header_logo_ {
  text-align: center;
  margin-bottom: 8px;
}
body:has(form[action*="forgotpass.aspx"]) #header .header_logo_ img {
  height: 125px;
  width: auto;
}

/* 不要要素OFF（ユーザー名・ナビ・検索） */
body:has(form[action*="forgotpass.aspx"]) #header .header_username_,
body:has(form[action*="forgotpass.aspx"]) #header .header_nav_link_,
body:has(form[action*="forgotpass.aspx"]) #header .header_bottom_frame_ {
  display: none !important;
}

/* ご利用ガイドは非表示 */
body:has(form[action*="forgotpass.aspx"]) #header .header_guide_link_ .guide {
  display: none !important;
}

/* お問い合わせボタンを右上に */
body:has(form[action*="forgotpass.aspx"]) #header .header_guide_link_ {
  position: absolute;
  top: 14px;
  right: 16px;
}
body:has(form[action*="forgotpass.aspx"]) #header .header_guide_link_ .contact a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: 12px;
  color: #374151;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}
body:has(form[action*="forgotpass.aspx"]) #header .header_guide_link_ .contact a:hover {
  background: #e6f5ef;
  border-color: #00a86b;
}

/* ロゴの下に「WATAPRO パスワード再設定」 */
body:has(form[action*="forgotpass.aspx"]) #header::after {
  content: "WATAPRO パスワード再設定";
  display: block;
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  color: #00a86b;
}

/* ■ メインブロック（.customer_）を楽天風に */

body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ {
  position: relative;
  padding: 12px 0;
  text-align: left;
}

/* 左の縦ライン */
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_::before {
  /*content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #e5e7eb;*/
}

/* H1 をセクション見出しっぽく（番号付き） */
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ h1.common_headline1_ {
  position: relative;
  padding-left: 40px;
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  border: none;
}
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ h1.common_headline1_::before {
  /*content: "??";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #00a86b;
  color: #ffffff;
  font-size: 12px;
  text-align: center;*/
}
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ h1.common_headline1_::after {
  /*content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: #e5e7eb;*/
}

/* 説明文 */
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ p.message_ {
  margin: 18px 0 20px;
  padding-left: 40px;
  font-size: 14px;
  color: #374151;
  line-height: 1.8;
}

/* メール入力テーブル */
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ table.formdetail_.forgotpass_ {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ table.formdetail_.forgotpass_ th,
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ table.formdetail_.forgotpass_ td {
  padding: 6px 0;
}
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ table.formdetail_.forgotpass_ th {
  padding-left: 40px;
  width: 30%;
  font-size: 14px;
  color: #4b5563;
  text-align: left;
}
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ table.formdetail_.forgotpass_ td {
  width: 70%;
}

/* 入力欄（メールアドレス） */
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ table.formdetail_.forgotpass_ input[type="text"] {
  width: 100%;
  max-width: 320px;
  padding: 10px 10px;
  border-radius: 4px;
  border: 1px solid #d4d4d8;
  background: #fafafa;
  font-size: 14px;
  box-sizing: border-box;
}
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ table.formdetail_.forgotpass_ input[type="text"]:focus {
  border-color: #00a86b;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(0,168,107,0.15);
}

/* ■ 戻る＋送信ボタンエリア */

body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ .submit_ {
  margin-top: 20px;
  padding-left: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  max-width: 520px;
  box-sizing: border-box;
}

/* 戻るボタンは画像を消してテキストリンク化 */
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ .submit_ a img {
  display: none;
}
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ .submit_ a {
  font-size: 13px;
  color: #6b7280;
  text-decoration: underline;
	display: none;
}

/* 送信ボタン：画像を透明にしてCSSボタン表示 */
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ .submit_ input[type="image"] {
  position: absolute;
  right: 0;
  top: 0;
  width: 220px;
  height: 44px;
  opacity: 0;
  cursor: pointer;
  border: none;
}

/* 見た目の「送信」ボタン */
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ .submit_::after {
  content: "送信";
  position: absolute;
  right: 0;
  top: 0;
  width: 480px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  border-radius: 4px;
  background: #00a86b;
  color: #ffffff;
  box-sizing: border-box;
}
body:has(form[action*="forgotpass.aspx"]) .customer_.col1_ .submit_:hover::after {
  background: #008e5b;
}

/* ■ フッターもログイン画面と同じく下付けに */
body:has(form[action*="forgotpass.aspx"]) #footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
  padding: 12px 0 16px;
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  z-index: 50;
}
body:has(form[action*="forgotpass.aspx"]) #footer .footer_logo_ {
  display: none;
}

/* 下に隠れないよう少しだけ余白 */
body:has(form[action*="forgotpass.aspx"]) .wrapper_ {
  padding-bottom: 80px;
}






/* =========================================================
   【お問い合わせ】/shop/contact/contact.aspx 専用デザイン
   ========================================================= */

/* メインコンテナ（中央寄せ・縦ライン） */
.contact_.col1_ {
  max-width: 720px;
  margin: 40px auto 80px;
  padding: 0 16px 40px;
  box-sizing: border-box;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  position: relative;
}

/* 左の縦ライン（ログインとおそろい） */
.contact_.col1_::before {
  ontent: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #e5e7eb;
}

/* 見出し「お問い合わせ」＋番号バッジ風 */
.contact_.col1_ h1.common_headline1_ {
  position: relative;
  padding-left: 40px;
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  border: none;
}
.contact_.col1_ h1.common_headline1_::before {
  /*content: "1";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #00a86b; 
  color: #ffffff;
  font-size: 12px;
  text-align: center;*/
}
.contact_.col1_ h1.common_headline1_::after {
 /* content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: #e5e7eb;*/
}

/* 説明文 */
.contact_.col1_ p.message_ {
  margin: 20px 0 24px;
  padding-left: 40px;
  font-size: 14px;
  color: #374151;
  line-height: 1.8;
}

/* フォームテーブル全体 */
.contact_.col1_ table.formdetail_.contact_ {
  width: 100%;
  border-collapse: collapse;
}

/* 見出し列・入力列 */
.contact_.col1_ table.formdetail_.contact_ th,
.contact_.col1_ table.formdetail_.contact_ td {
  padding: 8px 0;
}

.contact_.col1_ table.formdetail_.contact_ th {
  padding-left: 40px;
  width: 30%;
  font-size: 14px;
  color: #4b5563;
  text-align: left;
  vertical-align: top;
}
.contact_.col1_ table.formdetail_.contact_ td {
  width: 70%;
	padding: 10px;
}

/* 必須マークのアイコンとテキストの間の余白 */
.contact_.col1_ table.formdetail_.contact_ th .must_ {
  vertical-align: middle;
  margin-right: 4px;
}

/* セレクトボックス・テキスト入力・テキストエリア共通デザイン */
.contact_.col1_ table.formdetail_.contact_ select,
.contact_.col1_ table.formdetail_.contact_ input[type="text"],
.contact_.col1_ table.formdetail_.contact_ textarea {
  padding: 9px 10px;
  border-radius: 4px;
  border: 1px solid #d4d4d8;
  background: #fafafa;
  font-size: 14px;
  box-sizing: border-box;
}

/* 幅調整：件名・メールは100%、注文番号などは適度に */
.contact_.col1_ table.formdetail_.contact_ select,
.contact_.col1_ table.formdetail_.contact_ input[name="s_"],
.contact_.col1_ table.formdetail_.contact_ input[name="mail"],
.contact_.col1_ table.formdetail_.contact_ input[name="cmail"],
.contact_.col1_ table.formdetail_.contact_ textarea {
  width: 100%;
  max-width: 420px;
}

/* 商品コードや電話、姓名は少し短め */
.contact_.col1_ table.formdetail_.contact_ input[name="goods"],
.contact_.col1_ table.formdetail_.contact_ input[name="tel"] {
  width: 240px;
}

/* 氏名（姓／名）入力欄 */
.contact_.col1_ table.formdetail_.contact_ input[name="name"],
.contact_.col1_ table.formdetail_.contact_ input[name="name2"] {
  width: 140px;
  margin-right: 6px;
}

/* テキストエリア */
.contact_.col1_ table.formdetail_.contact_ textarea {
  min-height: 120px;
  resize: vertical;
}

/* フォーカス時のアクセント */
.contact_.col1_ table.formdetail_.contact_ select:focus,
.contact_.col1_ table.formdetail_.contact_ input[type="text"]:focus,
.contact_.col1_ table.formdetail_.contact_ textarea:focus {
  border-color: #00a86b;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(0,168,107,0.12);
}

/* 注釈テキスト */
.contact_.col1_ table.formdetail_.contact_ .small_ {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}









/* スマホ調整 */
@media (max-width: 640px) {
  .contact_.col1_ {
    margin: 24px auto 72px;
    padding: 0 12px 40px;
  }

  .contact_.col1_ h1.common_headline1_ {
    padding-left: 34px;
  }
  .contact_.col1_ h1.common_headline1_::before {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
  }

  .contact_.col1_ p.message_ {
    padding-left: 34px;
  }

  .contact_.col1_ table.formdetail_.contact_ th,
  .contact_.col1_ table.formdetail_.contact_ td {
    display: block;
    width: 100%;
  }
  .contact_.col1_ table.formdetail_.contact_ th {
    padding-left: 34px;
    padding-bottom: 2px;
  }
  .contact_.col1_ table.formdetail_.contact_ td {
    padding-left: 34px;
  }


}






/* =========================================================
   【お問い合わせ】/shop/contact/contact.aspx  専用デザイン
   ========================================================= */

/* ページ判定：contact.aspx のときだけ適用 */
body:has(form[action*="contact/contact.aspx"]) #header::after {
    content: "お問い合わせ";
    font-size: 20px;
    font-weight: 700;
    color: #00a86b;
}

/* ロゴ中央＋右上お問い合わせボタン（ログイン統一） */
body:has(form[action*="contact/contact.aspx"]) #header {
    background: #fff !important;
    border-bottom: none !important;
    padding-top: 36px !important;
    text-align: center !important;
    position: relative;
}
body:has(form[action*="contact/contact.aspx"]) #header .header_logo_ img {
    height: 125px;
}
body:has(form[action*="contact/contact.aspx"]) #header .header_username_,
body:has(form[action*="contact/contact.aspx"]) #header .header_nav_link_,
body:has(form[action*="contact/contact.aspx"]) #header .header_bottom_frame_ {
    display: none !important;
}

/* ご利用ガイドを消す */
body:has(form[action*="contact/contact.aspx"]) .header_guide_link_ .guide {
    display: none !important;
}

/* お問い合わせリンクは右上では非表示（自分自身だから） */
body:has(form[action*="contact/contact.aspx"]) li.contact {
    display: none !important;
}


/* ---------------------------------------------------------
   メインフォーム
--------------------------------------------------------- */
body:has(form[action*="contact/contact.aspx"]) .contact_.col1_ {
    max-width: 720px;
    /*margin: 40px auto 100px;
    padding: 0 24px 40px;*/
    position: relative;
    box-sizing: border-box;
	
	    background: none; 
     border: none; 
     border-radius: 0; 
     box-shadow: none;
	
	
}

body:has(form[action*="contact/contact.aspx"]) h1.common_headline1_ {display:none;}


/* 左縦ライン */
body:has(form[action*="contact/contact.aspx"]) .contact_.col1_::before {
    /*content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: #e5e7eb;*/
}

/* 見出し */
body:has(form[action*="contact/contact.aspx"]) .contact_.col1_ h1.common_headline1_ {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-left: 40px;
    position: relative;
}

/* 説明文 */
body:has(form[action*="contact/contact.aspx"]) .contact_.col1_ p.message_ {
    padding-left: 40px;
    font-size: 14px;
    line-height: 1.8;
    color: #374151;
    margin: 10px 0 20px;
}

/* フォームテーブル */
body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ {
    width: 100%;
    border-collapse: collapse;
}

/* th / td */
body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ th,
body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ td {
    padding: 10px 0;
}

body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ th {
    width: 28%;
    padding-left: 40px;
    color: #4b5563;
    font-size: 14px;
    text-align: left;
    vertical-align: top;
}

/* 入力欄共通 */
body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ select,
body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ input[type="text"],
body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ textarea {
    padding: 10px 12px;
    border: 1px solid #d4d4d8;
    background: #fafafa;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
}

body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ textarea {
    min-height: 140px;
    resize: vertical;
}

/* フォーカス */
body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ input:focus,
body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ select:focus,
body:has(form[action*="contact/contact.aspx"]) table.formdetail_.contact_ textarea:focus {
    border-color: #00a86b;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(0,168,107,0.15);
}

/*

/* ---------------------------------------------------------
   フッター（ログインと統一）
--------------------------------------------------------- */
body:has(form[action*="contact/contact.aspx"]) #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 0 16px;
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
}

body:has(form[action*="contact/contact.aspx"]) #footer .footer_logo_ {
    display: none;
}











.contact_.col1_ .submit_ input[type="image"] {
    opacity: 10!important;
    width: auto;
    height: auto;
    cursor: pointer;
    display: inline-block;
}








.contact_.col1_ table.formdetail_ tr {
    background: 
 color-mix(in srgb, var(--panel) 92%, #fff);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none!important;
    border: 1px solid #CECECE;
}





/* =========================================================
   WATAPRO 共通フォームレイアウト
   対象：
   - /shop/biz/agree.aspx   （法人取引申請規約）
   - /shop/biz/entry.aspx   （法人取引申請）
   - /shop/contact/contact.aspx （お問い合わせ）
========================================================= */

/* ▼ 共通：ページ背景をうっすらグレーに */
body:has(form[name="agreebody"]),
body:has(table.formdetail_.entry_),
body:has(form[action*="contact.aspx"]) {
  /*background: #f5f7fb;*/
}

/* ▼ 共通：メインの白カード枠 */
body:has(form[name="agreebody"]) .customer_.col1_,
body:has(table.formdetail_.entry_) .customer_.col1_,
body:has(form[action*="contact.aspx"]) .wrapper_ {
  max-width: 960px;
  margin: 40px auto 60px;
  padding: 28px 32px 40px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.09);
  box-sizing: border-box;
  font-family: "Helvetica Neue", "Noto Sans JP", sans-serif;
}

/* ▼ 共通：ページタイトル（h1） */
body:has(form[name="agreebody"]) .common_headline1_,
body:has(table.formdetail_.entry_) .common_headline1_,
body:has(form[action*="contact.aspx"]) .common_headline1_ {
  font-size: 26px;
  font-weight: 700;
  color: #00a86b;
  border-left: 6px solid #00a86b;
  padding-left: 14px;
  margin: 0 0 16px;
}

/* ▼ 共通：h1直下の説明テキスト群 */
body:has(form[name="agreebody"]) .customer_.col1_ > p,
body:has(table.formdetail_.entry_) .customer_.col1_ > p,
body:has(form[action*="contact.aspx"]) .wrapper_ > p {
  font-size: 14px;
  line-height: 1.8;
  margin: 4px 0;
}
body:has(form[name="agreebody"]) .customer_.col1_ > p b,
body:has(table.formdetail_.entry_) .customer_.col1_ > p b,
body:has(form[action*="contact.aspx"]) .wrapper_ > p b {
  font-weight: 700;
}

/* ▼ 共通：送信ボタンまわり */
body:has(form[name="agreebody"]) .submit_,
body:has(table.formdetail_.entry_) .submit_,
body:has(form[action*="contact.aspx"]) .submit_ {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 32px;
}

/* ▼ 共通：画像ボタンの見栄え */
body:has(form[name="agreebody"]) .submit_ a img,
body:has(form[name="agreebody"]) .submit_ input[type="image"],
body:has(table.formdetail_.entry_) .submit_ a img,
body:has(table.formdetail_.entry_) .submit_ input[type="image"],
body:has(form[action*="contact.aspx"]) .submit_ a img,
body:has(form[action*="contact.aspx"]) .submit_ input[type="image"] {
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body:has(form[name="agreebody"]) .submit_ a img:hover,
body:has(form[name="agreebody"]) .submit_ input[type="image"]:hover,
body:has(table.formdetail_.entry_) .submit_ a img:hover,
body:has(table.formdetail_.entry_) .submit_ input[type="image"]:hover,
body:has(form[action*="contact.aspx"]) .submit_ a img:hover,
body:has(form[action*="contact.aspx"]) .submit_ input[type="image"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.26);
}

/* =========================================================
   ① 規約ページ（/biz/agree.aspx）専用
========================================================= */

/* 規約テキスト（textarea） */
body:has(form[name="agreebody"]) .block-member-terms--body {
  width: 100%;
  max-width: 100%;
  height: 520px;
  padding: 16px 18px;
  background: #fafafa;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  line-height: 1.9;
  font-size: 14px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  resize: none;
}

/* =========================================================
   ② 法人取引申請フォーム（/biz/entry.aspx）専用
========================================================= */

/* パンくず */
body:has(table.formdetail_.entry_) .navitopicpath_ {
  margin: 10px 0 14px;
  font-size: 12px;
  color: #6b7280;
}
body:has(table.formdetail_.entry_) .navitopicpath_ a {
  color: #2563eb;
  text-decoration: none;
}
body:has(table.formdetail_.entry_) .navitopicpath_ a:hover {
  text-decoration: underline;
}

/* 説明文（entry_） */
body:has(table.formdetail_.entry_) p.entry_ {
  margin: 12px 0 16px;
  font-size: 14px;
  line-height: 1.7;

}

/* ラジオ */
body:has(table.formdetail_.entry_) input[type="radio"] {
  margin-right: 4px;
}
body:has(table.formdetail_.entry_) label[for^="biz_entry_"] {
  margin-right: 18px;
  font-size: 14px;
}

/* 代理店コード説明 */
body:has(table.formdetail_.entry_) .text.text02 {
  margin: 6px 0 16px;
  font-size: 13px;
}

/* フォームテーブル（entry） */
body:has(table.formdetail_.entry_) table.formdetail_.entry_ {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 8px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #e5e7eb;
}

/* 行交互の背景 */
body:has(table.formdetail_.entry_) table.formdetail_.entry_ tr:nth-child(even) {
  background: #f9fafb;
}

/* 見出しセル */
body:has(table.formdetail_.entry_) table.formdetail_.entry_ th {
  width: 26%;
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 必須アイコン */
body:has(table.formdetail_.entry_) table.formdetail_.entry_ th .must_ {
  vertical-align: middle;
  margin-right: 4px;
}

/* 入力セル */
body:has(table.formdetail_.entry_) table.formdetail_.entry_ td {
  padding: 10px 16px;
  font-size: 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 補足テキスト */
body:has(table.formdetail_.entry_) table.formdetail_.entry_ .small_ {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* 入力・セレクト共通 */
body:has(table.formdetail_.entry_) table.formdetail_.entry_ input[type="text"],
body:has(table.formdetail_.entry_) table.formdetail_.entry_ select {
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid #d4d4d8;
  background: #f9fafb;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}
body:has(table.formdetail_.entry_) table.formdetail_.entry_ input[type="text"]:focus,
body:has(table.formdetail_.entry_) table.formdetail_.entry_ select:focus {
  border-color: #00a86b;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(0, 168, 107, 0.18);
}

/* 住所（建物名等）の nowrap を解除 */
body:has(table.formdetail_.entry_) table.formdetail_.entry_ td[style*="white-space: nowrap"] {
  white-space: normal !important;
}

/* 下の注意テキスト */
body:has(table.formdetail_.entry_) .customer_.col1_ > p:last-of-type {
  margin-top: 22px;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.8;
}

/* =========================================================
   ③ お問い合わせフォーム（/contact/contact.aspx）専用
========================================================= */

/* 説明文（「当店へのご要望は〜」など） */
body:has(form[action*="contact.aspx"]) .wrapper_ > p {
  margin-bottom: 16px;
}

/* お問い合わせフォームのテーブル想定
   ※ form 内の table.formlist_ を統一デザインに */
body:has(form[action*="contact.aspx"]) table.formlist_ {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 8px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #e5e7eb;
}

/* 行背景 */
body:has(form[action*="contact.aspx"]) table.formlist_ tr:nth-child(even) {
  background: #f9fafb;
}

/* 左側（項目名） */
body:has(form[action*="contact.aspx"]) table.formlist_ th {
  width: 26%;
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 必須アイコン */
body:has(form[action*="contact.aspx"]) table.formlist_ th img {
  vertical-align: middle;
  margin-right: 4px;
}

/* 右側（入力エリア） */
body:has(form[action*="contact.aspx"]) table.formlist_ td {
  padding: 10px 16px;
  font-size: 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 補足テキスト（小さめ） */
body:has(form[action*="contact.aspx"]) table.formlist_ .note,
body:has(form[action*="contact.aspx"]) table.formlist_ .small_ {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* 入力・セレクト・テキストエリア共通 */
body:has(form[action*="contact.aspx"]) table.formlist_ input[type="text"],
body:has(form[action*="contact.aspx"]) table.formlist_ input[type="email"],
body:has(form[action*="contact.aspx"]) table.formlist_ select,
body:has(form[action*="contact.aspx"]) table.formlist_ textarea {
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid #d4d4d8;
  background: #f9fafb;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}
body:has(form[action*="contact.aspx"]) table.formlist_ input[type="text"]:focus,
body:has(form[action*="contact.aspx"]) table.formlist_ input[type="email"]:focus,
body:has(form[action*="contact.aspx"]) table.formlist_ select:focus,
body:has(form[action*="contact.aspx"]) table.formlist_ textarea:focus {
  border-color: #00a86b;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(0, 168, 107, 0.18);
}

/* テキストエリアだけ少し大きめに */
body:has(form[action*="contact.aspx"]) table.formlist_ textarea {
  min-height: 160px;
  resize: vertical;
}

/* =========================================================
   共通：スマホレイアウト
========================================================= */
@media screen and (max-width: 768px) {
  /* 枠の余白調整 */
  body:has(form[name="agreebody"]) .customer_.col1_,
  body:has(table.formdetail_.entry_) .customer_.col1_,
  body:has(form[action*="contact.aspx"]) .wrapper_ {
    margin: 20px 10px 40px;
    padding: 18px 14px 28px;
    border-radius: 14px;
  }

  /* タイトルサイズ */
  body:has(form[name="agreebody"]) .common_headline1_,
  body:has(table.formdetail_.entry_) .common_headline1_,
  body:has(form[action*="contact.aspx"]) .common_headline1_ {
    font-size: 20px;
  }

  /* entry / contact のテーブルを縦積みに */
  body:has(table.formdetail_.entry_) table.formdetail_.entry_ th,
  body:has(table.formdetail_.entry_) table.formdetail_.entry_ td,
  body:has(form[action*="contact.aspx"]) table.formlist_ th,
  body:has(form[action*="contact.aspx"]) table.formlist_ td {
    display: block;
    width: 100%;
    border-bottom: none;
  }

  body:has(table.formdetail_.entry_) table.formdetail_.entry_ tr,
  body:has(form[action*="contact.aspx"]) table.formlist_ tr {
    border-bottom: 1px solid #e5e7eb;
  }

  body:has(table.formdetail_.entry_) table.formdetail_.entry_ td,
  body:has(form[action*="contact.aspx"]) table.formlist_ td {
    padding-top: 6px;
    padding-bottom: 10px;
  }

  body:has(table.formdetail_.entry_) table.formdetail_.entry_ input[type="text"],
  body:has(table.formdetail_.entry_) table.formdetail_.entry_ select,
  body:has(form[action*="contact.aspx"]) table.formlist_ input[type="text"],
  body:has(form[action*="contact.aspx"]) table.formlist_ input[type="email"],
  body:has(form[action*="contact.aspx"]) table.formlist_ select,
  body:has(form[action*="contact.aspx"]) table.formlist_ textarea {
    width: 100%;
  }

  /* ボタン縦並び */
  body:has(form[name="agreebody"]) .submit_,
  body:has(table.formdetail_.entry_) .submit_,
  body:has(form[action*="contact.aspx"]) .submit_ {
    flex-direction: column;
    gap: 18px;
  }

  body:has(form[name="agreebody"]) .submit_ a img,
  body:has(form[name="agreebody"]) .submit_ input[type="image"],
  body:has(table.formdetail_.entry_) .submit_ a img,
  body:has(table.formdetail_.entry_) .submit_ input[type="image"],
  body:has(form[action*="contact.aspx"]) .submit_ a img,
  body:has(form[action*="contact.aspx"]) .submit_ input[type="image"] {
    max-width: 80%;
    margin: 0 auto;
  }
}