@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * メイン
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* -------------------------------------------------------------------------------------------------
   * セクショニング
/* ---------------------------------------------------------------------------------------------- */

#main {
  background: #e9e9e9;
}

#main > .section {
  padding-top: 60px;
  padding-bottom: 60px;
}

#main div.body {
  max-width: 1020px;
  padding: 0 10px;
  margin: 0 auto;
}

#main .column ~ .column {
  margin-top: 40px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:1100px) {

 #main div.body {
   max-width: 100%;
	 padding:0 10px;
	 margin: 0 auto;
	 overflow: hidden;
	}
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {

#main > .section {
  padding-top: 30px;
  padding-bottom: 30px;
}

#main div.body {
  max-width: 100%;
	padding:0 10px;
	margin: 0 auto;
	overflow: hidden;
}

#main .column ~ .column {
  margin-top: 20px;
}

}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 会員ページ
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.layout-body  {
  max-width: 1360px !important;
  margin: 0 auto;
}

/* 下層*/
.layout-lower
.layout-body  {
  max-width: 1200px;
  padding-top: 40px;
  padding-bottom: 80px;
}

.layout-lower
.layout-body .body {}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .layout-lower
  .layout-body #member .body {
    padding: 0 !important;
  }
}

/* ****************************************************************************************************
   * ログイン
**************************************************************************************************** */

.layout-body .section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

.layout-body .title {
  position: relative;
  font-size: 20px;
  border-bottom: 1px solid #000000;
}

/* ----------------------------------------------------------------------------------------------------
   * テキスト
/* ------------------------------------------------------------------------------------------------- */

.layout-body p.text {
  margin-top: 1em;
}

.layout-body p.text a {
  text-decoration: underline;
}
.layout-body p.text a:hover {
  text-decoration: none;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 会員登録がお済みのお客様
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.customer_form td {
  background: #fff;
}

/* ----------------------------------------------------------------------------------------------------
   * 郵便番号
/* ------------------------------------------------------------------------------------------------- */

.customer_form input#search_zipcode {
  background: #000;
  color:#fff;
  border-radius: 6px;
}

/* ----------------------------------------------------------------------------------------------------
   * ログインフォーム
/* ------------------------------------------------------------------------------------------------- */

/* * エラーメッセージ
/* ･････････････････････････････････････････････････････････････････････････････････････････････････ */

.layout-body #login-form .error {
  color: #f00;
}

/* * フォーム
/* ･････････････････････････････････････････････････････････････････････････････････････････････････ */

.layout-body #login-form div.form {
  padding: 30px;
  background: #fff;
  border-radius: 20px;
}

.layout-body #login-form div.form tr,
.layout-body #login-form div.form td {
  padding: 10px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {

.layout-body #login-form div.form tr,
.layout-body #login-form div.form td {
  padding: 10px;
  display: block;
}

}

.layout-body #login-form div.form table.data {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:1100px) {

.layout-body #login-form div.form table.data {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
}

/* メールアドレス */

.layout-body #login-form div.form input.loginmail {
  width: 100%;
}

/* パスワード */

.layout-body #login-form div.form input.loginpass {
  width: 100%;
}

/* パスワード再発行 */

.layout-body #login-form div.form .forgetmenot {
  text-align: center;
}

/* ログインボタン */

.layout-body #login-form div.form div.button {
  margin-top: 20px;
  text-align: center;
}

.layout-body #login-form div.form div.button input#member_login {
  width: 240px;
  padding: 20px 0;
  background-color: #ffbe2e;
  border-radius: 6px;
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));
  transition: background-color 0.3s ease-in-out 0.0s;

}
.layout-body #login-form div.form div.button input#member_login:hover {
  cursor: pointer;
  opacity: 0.7;
  transform: 0.3s;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 会員登録されていないお客様
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


.layout-body #register {
  padding-top: 60px;
}

.layout-body #wholesale .image {
  padding-bottom: 20px;
}

.layout-body #register div.register {
  padding: 30px;
  background: #fff;
}

/* ----------------------------------------------------------------------------------------------------
   * 会員登録ボタン
/* ------------------------------------------------------------------------------------------------- */

.layout-body #register div.register .button {
  text-align: center;
}

.layout-body #register div.register .button a {
  display: inline-block;
  width: 240px;
  padding: 20px 0;
  background-color: #ffbe2e;
}

.layout-body #register div.register .button a:hover {
  opacity:0.7;
}

/* ****************************************************************************************************
   * 新パスワード取得
**************************************************************************************************** */

.layout-body #lostpassword-form.section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * パスワード変更フォーム
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* ----------------------------------------------------------------------------------------------------
   * エラーメッセージ
/* ------------------------------------------------------------------------------------------------- */

.layout-body #lostpassword-form .error {
  color: #f00;
}

/* ----------------------------------------------------------------------------------------------------
   * フォーム
/* ------------------------------------------------------------------------------------------------- */

.layout-body #lostpassword-form div.form {
  padding: 30px;
  background: #fff;
  border-radius: 20px;
}

.layout-body #lostpassword-form div.form table.data {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.layout-body #lostpassword-form tr,
.layout-body #lostpassword-form td {
  padding: 10px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {

.layout-body #lostpassword-form div.form {
  padding: 20px;
  background: #fff;
}
.layout-body #lostpassword-form div.form table.data {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.layout-body #lostpassword-form tr,
.layout-body #lostpassword-form td {
  padding: 10px;
  display: block;
}

}

/* メールアドレス */

.layout-body #lostpassword-form div.form input.loginmail {
  width: 100%;
}

/* 新しいパスワードを取得ボタン */

.layout-body #lostpassword-form div.form div.button {
  margin-top: 20px;
  text-align: center;
}

.layout-body #lostpassword-form div.form div.button input#member_login {
  width: 240px;
  padding: 20px 0;
  background-color: #ffbe2e;
  border-radius: 6px;
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));
  transition: background-color 0.3s ease-in-out 0.0s;

}
.layout-body #lostpassword-form div.form div.button input#member_login:hover {
  cursor: pointer;
  opacity: 0.7;
  transform: 0.3s;
}

/* メールの内容にしたがってパスワードを変更してください。 */

.layout-body #lostpassword-form div.form .message {
  text-align: center;
}

/* ----------------------------------------------------------------------------------------------------
   * ログインボタン
/* ------------------------------------------------------------------------------------------------- */

.layout-body #lostpassword-form div.login {
  text-align: center;
}

.layout-body #lostpassword-form div.login .button a {
  display: inline-block;
  width: 240px;
  padding: 20px 0;
  background-color: #ffbe2e;
  border-radius: 6px;
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));
  transition: background-color 0.3s ease-in-out 0.0s;
}

.layout-body #lostpassword-form div.login .button a:hover {
  cursor: pointer;
  opacity: 0.7;
  transform: 0.3s;
}

/* ****************************************************************************************************
   * マイページ
**************************************************************************************************** */

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 会員情報
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* ----------------------------------------------------------------------------------------------------
   * テーブル
/* ------------------------------------------------------------------------------------------------- */

.layout-body #memberinfo table th {
  background: #dddddd;
}

.layout-body #memberinfo table td {
  background: #fff;
  padding: 10px;
}

/* ----------------------------------------------------------------------------------------------------
   * ボタン類
/* ------------------------------------------------------------------------------------------------- */

.layout-body #memberinfo div.button {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.layout-body #memberinfo .button {
  margin: 0;
}

.layout-body #memberinfo div.button .button a {
  display: inline-block;
  width: 240px;
  padding: 20px 0;
  background-color: #ffbe2e;
  border: 0;
  border-radius: 6px;
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));
  transition: background-color 0.3s ease-in-out 0.0s;
}

.layout-body #memberinfo div.button .button a:hover {
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {

.layout-body #memberinfo div.button {
  width: 100%;
  text-align: center;
  display: block;
  align-items: center;
  justify-content: center;
}
.layout-body #memberinfo div.button > * {
  margin-top: 20px;
}

.layout-body #memberinfo div.button .button {
  display: inline-block;
  width: 48%;
  margin: 0 1%;
}

.layout-body #memberinfo div.button .button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  background-color: #ffbe2e;
  border: 0;
  margin: 10px 0 0;
  font-size: 16px;
}

.layout-body #memberinfo div.button .button a:hover {
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s;
}

/* ログアウト*/
.layout-body #memberinfo div.button .logout.button {
  margin-top: 0 !important;
}


}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 購入履歴
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* ----------------------------------------------------------------------------------------------------
   * テーブル
/* ------------------------------------------------------------------------------------------------- */

.layout-body #history_head th {
  background: #dddddd;
}
.layout-body #history_head td {
  background: #ffffff;
}
#memberinfo #history_head th, #memberinfo .retail th {
  background: #dddddd;
}

/* ----------------------------------------------------------------------------------------------------
   * 一覧
/* ------------------------------------------------------------------------------------------------- */

.layout-body #history div.history-area {
  max-height: 800px;
  margin-bottom: 2.85714em;
  padding-right: 20px;
  overflow-y: auto;
}

.layout-body #history table {
  width: 100%;
  border-collapse: collapse;
}

.layout-body #history table th {
  padding: 5px;
  font-weight: normal;
  white-space: nowrap;
  border: 1px solid #ccc;
  background-color: #efefef;
}

.layout-body #history table td {
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
}

.layout-body #history table#history_head {
	margin-bottom: 5px;
}

.layout-body #history table#history_head ~ table#history_head {
	margin-top: 50px;
}

.layout-body #history table.retail td.thumbnail {
  width: 80px;
}

.layout-body #history table.retail td.productname {
  text-align: left;
}

.layout-body #history table.retail td.productname a {
  padding: 1em;
  text-decoration: none;
  vertical-align: top;
  display: inline-block;
}

.layout-body #history table.retail td.productname a:hover {
  color: #e72b1d;
}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 会員情報編集
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.layout-body #edit {
  margin-top: -90px;
  padding-top: 60px;
}


/* ----------------------------------------------------------------------------------------------------
   * エラーメッセージ
/* ------------------------------------------------------------------------------------------------- */

.layout-body #edit .error {
  color: #f00;
}

/* ----------------------------------------------------------------------------------------------------
   * テーブル
/* ------------------------------------------------------------------------------------------------- */

.layout-body #edit table.data th {
  background: #dddddd;
}
.layout-body #edit table.data td {
  background: #ffffff;
}

.layout-body #edit table.data input {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

/* 住所検索 */

.layout-body #edit table.data input.search-zipcode {
  padding: 0.5em 1em;
}

/* ----------------------------------------------------------------------------------------------------
   * ボタン類
/* ------------------------------------------------------------------------------------------------- */

.layout-body #edit div.button {
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* トップページへ戻る / 退会する */
.layout-body #edit div.button input.button {
  width: 240px;
  padding: 20px 0;
  background-color: #000;
  color: #fff;
  border:0;
  margin: 0 1% 20px;
  border-radius: 6px;
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));
  transition: background-color 0.3s ease-in-out 0.0s;
}

.layout-body #edit div.button input.button:hover {
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s;
}

/* 更新する*/
.layout-body #edit div.button input.editmember {
  width: 240px;
  padding: 20px 0;
  background-color: #ffbe2e;
  color: #000;
  border: 0;
}

.layout-body #edit div.button input.editmember:hover {
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {

/* トップページへ戻る / 退会する */
.layout-body #edit div.button input.button {
  width: 240px;
  padding: 20px 0;
  color: #fff;
  background-color: #000000;
  border:0;
  margin-bottom: 20px;
  font-size: 14px;
}
.layout-body #edit div.button input.button:hover {
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s;
}

/* 更新する*/
.layout-body #edit div.button input.editmember {
  width: 240px;
  padding: 20px 0;
  background-color: #ffbe2e;
  color: #000;
  border:0;
}

.layout-body #edit div.button input.editmember:hover {
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s;
}

}

/* ****************************************************************************************************
   * 新規入会フォーム
**************************************************************************************************** */

.layout-lower
.layout-body .body #member {
  background: #fff;
  padding: 40px;
  border-radius: 20px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .layout-lower
  .layout-body .body #member {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
  }
}

/* 必須マーク */

.layout-body #newmember-form .required,
.layout-body #newmember-form table.data th em {
  color: #f00;
}


.layout-body #newmember-form th {
  border-left: 0;
  border-right: 0;
}
.layout-body #newmember-form td {
  border-left: 0;
  border-right: 0;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .layout-body #newmember-form .customer_form tr {
    padding: 0.5em;
  }
}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * フォーム
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

input[name="custom_member[company]"],
input[name="custom_member[companykana]"] {
  width: 70%;
}


/* ----------------------------------------------------------------------------------------------------
   * エラーメッセージ
/* ------------------------------------------------------------------------------------------------- */

.layout-body #newmember-form .error {
  color: #f00;
}

/* ----------------------------------------------------------------------------------------------------
   * テーブル
/* ------------------------------------------------------------------------------------------------- */

.layout-body #newmember-form table.data input {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

/* 住所検索 */

.layout-body #newmember-form table.data input.search-zipcode {
  padding: 0.5em 1em;
	color:#333;
}

/* セレクトメニュー */

.layout-body #newmember-form table.data select {
  width: auto;
}

/* ----------------------------------------------------------------------------------------------------
   * 送信ボタン
/* ------------------------------------------------------------------------------------------------- */

.layout-body #newmember-form div.form div.button {
  margin-top: 40px;
  text-align: center;
}

.layout-body #newmember-form div.form div.button input[type=submit] {
  width: 240px;
  padding: 20px 0;
  background-color: #ffbe2e;
  border-radius: 6px;
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));
  transition: background-color 0.3s ease-in-out 0.0s;
}

.layout-body #newmember-form div.form div.button input[type=submit]:hover {
  cursor: pointer;
  opacity: 0.7;
  transform: 0.3s;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .layout-body #newmember-form div.form div.button {
    margin-top: 20px;
    text-align: center;
  }
}

/* ****************************************************************************************************
   * 登録完了ページ
**************************************************************************************************** */

.layout-body .membercompletion .section {
  width: 740px;
  margin-left: auto;
  margin-right: auto;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * ヘッダー
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.layout-body .membercompletion div.header .message {
  margin-bottom: 3em;
  font-size: 1.25em;
  margin-left: auto;
  margin-right: auto;
  display: table;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * ボタン類
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.layout-body .membercompletion div.button {
  text-align: center;
}

.layout-body .membercompletion div.button .button a {
	display: inline-block;
    padding: 1.071428em 2.14286em;
    text-decoration: none;
	background-color: #efefef;
	border: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: .3s ease all;
	-moz-transition: .3s ease all;
	-o-transition: .3s ease all;
	transition: .3s ease all;
}

.layout-body .membercompletion div.button .button a:hover {
	background-color: #ddd;
}

/* 20240710*/

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 自動継続課金情報
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.member_submenu a {
  background-color: #ffbe2e;
}
.member_submenu a:hover {
  background-color: #ffbe2e;
  opacity: 0.7;
}



.auto_billing_contents .data-table-wrap {
  padding: 10px;
}

.auto_billing_contents dt {
  background: #dddddd;
}
.auto_billing_contents dd {
  padding: 1em;
}

.auto_billing_contents .billing-year-select {
  position: relative;
  top: 0;
  text-align: right;
  margin-right: 0;
  margin-left: auto;
  margin-bottom: 10px;
}



/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * クレジットカード更新
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#wc_member_update_settlement {
  max-width: 1020px;
  margin: 0 auto;
  padding-top: 60px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 60px;
}

#wc_member_update_settlement .entry #memberpages {
  overflow: hidden;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:1100px) {

#wc_member_update_settlement {
  max-width: 1020px;
  margin: 0 auto;
  padding:60px 10px; 
}

#wc_member_update_settlement .entry #memberpages {
  max-width: 1020px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

}

/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

#wc_member_update_settlement .member_page_title {
  position: relative;
  font-size: 20px;
  border-bottom: 1px solid #000000;
  margin: 0;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * ボタン類
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#wc_member_update_settlement .send {}

/* ----------------------------------------------------------------------------------------------------
   * 更新ボタン
/* ------------------------------------------------------------------------------------------------- */

#wc_member_update_settlement input[type="button"] {
  display: inline-block;
  width: 240px;
  padding: 20px 0;
  color: #262626;
  background-color: #ffbe2e;
  border: 0;
  border-radius: 6px;
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));
  transition: background-color 0.3s ease-in-out 0.0s;
  margin: 10px 1% 0;
}


/* クレジットカード情報*/
/* ゼウス*/

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
#memberinfo .customer_form th {
  border: 1px solid #ccc;
  background-color: #efefef;
}
#memberinfo .customer_form td {
  border: 1px solid #e0e0e0;
  padding: 10px;
}