/*
Theme Name: sydney-child
Theme URI: http://athemes.com/theme/sydney
Author: aThemes
Author URI: http://athemes.com
Template: sydney
Version: 2.14
*/


/*--------------------------------------------------------------
保有機一覧・サービス対応履歴一覧・請求履歴一覧 共通
--------------------------------------------------------------*/

/* 保有機(PC),サービス対応履歴(PC,Tablet,Mobile),請求履歴 の項目名 */
.myproduct-pc, .mysupport-caption, .mysupport-caption-tablet, .mysupport-caption-mobile, .mybill-caption {
  display: flex;
  background-color: #EEEDED;
  border-bottom: 0;
  padding: 6px;
}

/* 保有機(Mobile), 請求履歴(Mobile) の項目名 */
.myproduct-mobile, .mybill-caption-mobile {
  display: flex;
  background-color: #EEEDED;
  border-bottom: 0;
  padding: 6px 20px 6px 20px ;
  justify-content: space-between;
}

/* 保有機一覧・サービス対応履歴一覧・請求履歴一覧の行 -> 下線あり */
.myproduct, .mysupport, .mysupport-mobile, .mysupport-tablet, .mybill, .mybill-mobile {
  display: flex;
  border-bottom: 1px solid #CCCCCC;
  padding: 10px 6px 10px 6px;
}

/* 保有機一覧 Mobile時の修理申込ボタン列を138pxで固定 */
.myproduct-mobile .mypage-request {
  width: 138px;
  text-align: center;
}


/*--------------------------------------------------------------
保有機一覧 (mypage)
--------------------------------------------------------------*/

/* 列幅: 機種50%, 保証20%, 保守契約15%, 修理申込15% */
.mypage-product {
  width: 50%;
}

.mypage-category {
  width: 20%;
}
.mypage-mainte, .mypage-request {
  width: 15%;
}

/* 下部のその他修理・すべての対応履歴リンク */
.mypage-bottom {
  display: flex;
  margin-top: 50px;
}

/*　下部”すべての対応履歴”*/
.mypage-bottom-left  {
  width: 78%;
}

.mypage-product-product.a  {
  font-weight: bold;
}

/* カテゴリ2, 機番, 経過年数 の文字色をグレー */
.mypage-category2, .mypage-product-serial, .mypage-ym-ym {
  color: #707070;
}

/* 保有機一覧 のブレイクポイントは480px */

/* 481px以上 -> Mobile用の項目行を非表示 */
@media screen and (min-width:481px){
  .myproduct-mobile {
    display: none;
  }
}
/* 480px以下 -> PC用の項目行を非表示 */
@media screen and (max-width:480px){
  .myproduct-pc {
    display: none;
  }
}
/* 480px以下 -> 保有機一覧行内の要素は垂直報告に並べ替え */
@media screen and (max-width:480px){
  .myproduct {
    flex-direction: column;
    padding: 10px 20px 10px 20px;
  }
}
/* 480px以下 -> 保有機一覧行内の要素幅をAutoに変更 */
@media screen and (max-width:480px){
  .mypage-category, .mypage-product, .mypage-mainte, .mypage-request {
    width: auto;
  }
}
/* 480px以下 -> 修理申込ボタンを右寄せ */
@media screen and (max-width:480px) {
  .mypage-request-request {
    text-align: right;
  }
}


/*--------------------------------------------------------------
サービス対応履歴 (support)
--------------------------------------------------------------*/

/* 完了日, 機番, 担当者, 処置内容 の文字色をグレー */
.mysupport-product-serial, .mysupport-type-ce, .mysupport-content-act {
  /* //  .mysupport-date-end, .mysupport-product-serial, .mysupport-type-ce, .mysupport-content-act { */
  color: #707070;
}


/* ブレイクポイントは 576px,990px */

/* 575px以下 -> mobile表示 */
@media screen and (max-width:575px){
	.mysupport-tablet {display: none;}
	.mysupport {display: none;}
	.mysupport-caption-tablet {display: none;}
	.mysupport-caption {display: none;}
}
/* 576px以上 990px以下 -> tablet表示 */
@media screen and (min-width:576px) and (max-width:989px){
	.mysupport-mobile {display: none;}
	.mysupport {display: none;}
	.mysupport-caption-mobile {display: none;}
	.mysupport-caption {display: none;}
}
/* 991px以上 -> pc表示 */
@media screen and (min-width:990px){
	.mysupport-mobile {display: none;}
	.mysupport-tablet {display: none;}
	.mysupport-caption-mobile {display: none;}
	.mysupport-caption-tablet {display: none;}
}

/* 内容・処置部分の列幅 -> 100% */
/* .mysupport-content {
  width: 100%;
} */

/* 区分・担当部分の列幅 -> 100% */
.mysupport-type {
  width: 100%;
}
/* mobile時の列幅(内容・処置を除く) -> 40% */
.mysupport-mobile .mysupport-date, .mysupport-caption-mobile  .mysupport-date {
  width: 40%;
}
/* tablet時の列幅(内容・処置を除く) -> 30% */
.mysupport-tablet .mysupport-date, .mysupport-caption-tablet .mysupport-date {
  width: 30%;
}
/* PC時の列幅(内容・処置を除く) -> 30% */
.mysupport-date, .mysupport-product, .mysupport-content {
  width: 30%;
}


/*--------------------------------------------------------------
請求履歴 (bill)
--------------------------------------------------------------*/

/* 列幅 (番号, 請求日, 内容, 金額, 確認) -> 20% */
.bill-content {
  width: 30%;
}

/* 列幅 (番号, 請求日, 内容, 金額, 確認) -> 20% */
.bill, .bill-cap {
  width: 15%;
}

/* 480px以下 -> mobile表示 */
@media screen and (max-width:480px) {
  .mybill-caption {display: none;}
  .mybill {display: none;}
  .mybill-mobile {display: block;}
  .mybill-mobile .bill {display: flex;}
}
@media screen and (max-width:480px) {
  .mybill-caption-mobile .bill {width: auto;}
  .mybill-mobile .bill {
    width: auto;
    padding: 6px 20px 6px 20px;
  }
}
/* 481px以上 -> PC表示 */
@media screen and (min-width:481px) {
  .mybill-caption-mobile {display: none;}
  .mybill-mobile {display: none;}
}


/*--------------------------------------------------------------
新規ユーザ登録リンクを非表示
--------------------------------------------------------------*/
span.link-text-register {
    display: none;
}


/*--------------------------------------------------------------
ログイン・プロフィールページ
--------------------------------------------------------------*/

/* 入力フォーム全体の幅を指定 */
#wpmem_login, #wpmem_reg {
  width: 100%;
}

/* 項目の縦位置調整 */
#wpmem_login .div_text, #wpmem_reg .div_text {
  margin: 0 0 34px 0;
}

/* 入力欄の背景色を薄いグレーに */
#wpmem_reg input[type=text], #wpmem_reg input[type=email], #wpmem_login input[type=text], #wpmem_login input[type=password] {
  background-color: #fafafa;
}

/* プロフィール編集ページの最下部「必須項目」を非表示（＊→必須に変更したので説明文は不要） */
#wpmem_reg .req-text {
  display: none;
}

/* 必須項目の「＊」の後に「必須」を表示させるので、、、 */
#wpmem_reg .req {
  color: #FFFFFF;
  font-size: 16px;
  line-height: 100%;
}

/* 「必須」表示 */
#wpmem_reg .req::after {
  content: "必須";
  color: #ffffff;
  background: #cc0000;
  font-size: 0.5em;
  padding: 0.3em;
  border-radius: 0.3em;
  margin-left: 1em;
  vertical-align: text-bottom;
}

/* 小見出しを調整 */
#wpmem_login legend, #wpmem_reg legend {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 40px;
  border-bottom: 0;
}

/* ボタンを少し大きく、角丸 */
#wpmem_reg input.buttons {
  width: 240px;
  border-radius: 4px;
}

/*
ログインボタン
「ログイン情報を保存...」: 左寄せ
ログインボタン:右寄せ
*/

/*混在させるので親要素をflexに*/
@media screen and (min-width:480px) {
  #wpmem_login .button_div {
    display: flex;
    position: relative;
    align-items: baseline;
  }
}

/*子:ログイン状態保存のチェックボックス*/
@media screen and (min-width:480px) {
  input#rememberme {
    /*position: absolute;*/
    /*left: 0;  右寄せ*/
  }
}

/*子:ログイン状態保存のラベル*/
@media screen and (min-width:480px) {
  #wpmem_login .button_div label {
    /*position: absolute;*/
    /*left: 24px; 右寄せ*/
  }
}

/*子:ログインボタン*/
@media screen and (min-width:480px) {
  #wpmem_login input.buttons {
    position: absolute;
    right:0;
    width: 240px;
    border-radius: 4px;
  }
}

/*パスワードリセット上の余白調整*/
#wpmem_login .link-text {
  margin-top: 40px;
}


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

/* タイトル(保有機の一覧) -------------------- */
.mypage-title {
  margin: 60px 0px 20px 0px;
}

.mypage-title span {
  font-weight: bold;
}

/* 保有機の一覧 -------------------- */
/*
table.mypage {
    border-spacing: 0px;
}

table.mypage th {
    background-color: #EEEDED;
    padding: 4px 8px 4px 8px;
    text-align: left;
    vertical-align: top;
    color: #666;
    font-weight: normal;
    border: 0px;
}

table.mypage td {
    border-color: #CCC;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}
*/

/* 上段の下線無し -------------------- */
/*
table.mypage td.my-cate1, table.mypage td.my-name, table.mypage td.task-start, table.mypage td.task-product,
table.mypage td.task-type {
    border-bottom: 0px;
}
*/

/* 下段をグレー、パディング調整 -------------------- */
/*
table.mypage td.my-cate2, table.mypage td.my-serial, table.mypage td.task-end, table.mypage td.task-serial, table.mypage td.task-ce {
    color: #707070;
    padding-top: 0;
}
*/

/* 修理申込ボタン列センタリング -------------------- */
/*
table.mypage th.center {
    text-align: center;
}

table.mypage td.my-request {
    text-align: center;
    vertical-align: middle;
}
*/

/* 修理申込ボタン */
button.my-buttons {
  padding: 6px 40px 6px 40px;
  border-radius: 4px;
}

/* 対応履歴の担当者列幅固定 -------------------- */
/*
table.mypage th.user {
    width: 120px;
}
*/


/* ----------------------------------------
MW-WP-Formカスタマイズ (修理申込フォーム)
---------------------------------------- */

/* 項目行間調整 -------------------- */
.mwwpf-form-section {
  margin-bottom: 30px;
}

/* 項目グレー -------------------- */
.mwwpf-form-section span {
  color: #707070;
}

/* 入力黒 -------------------- */
input.mwwpf-input-text, select.mwwpf-input-text {
  width: 100%;
  color: #1d1d1f;
}

.mwwpf-textarea {
  width: 100%;
  line-height: normal;
  color: #1d1d1f;
}

@media screen and (min-width:480px) {
  input.mwwpf-input-zip, select.mwwpf-input-text {
    width: 30%;
    color: #1d1d1f;
  }
}

/* 入力補助を少し小さく -------------------- */
p.form-msg {
  margin-top: 4px;
  color: #707070;
  font-size: 0.9em;
}

/* 必須マーク -------------------- */
.mw_wp_form_input span.Required::after {
  content: "必須";
  color: #ffffff;
  background: #cc0000;
  font-size: 0.7em;
  padding: 0.3em;
  border-radius: 0.3em;
  margin-left: 1em;
  vertical-align: text-bottom;
}

/* 確認画面では入力補助を非表示 -------------------- */
.mw_wp_form_confirm .form-msg {
  display: none;
}

/* 下部のボタンはセンタリング -------------------- */
.mwwpf-btn-section {
  text-align: center;
}

/* ボタンの形状は角丸で -------------------- */
input.mwwpf-btn {
  width: 240px;
  /*margin-left: 12px;*/
  /*margin-right: 12px;*/
  margin: 12px;
  border-radius: 4px;
}

/* マイページへ戻るボタンを他のボタンとそっくりに */
#mypage-btn {
  /*margin-left: 12px;*/
  /*margin-right: 12px;*/
  margin: 12px;
  width: 240px;
  height: 50px;
  vertical-align: top;
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
  background-color: #d65050;
  border: 1px solid #d65050;
  position: relative;
  display: inline-block;
  line-height: 24px;
  color: #fff;
  cursor: pointer;
}

#mypage-btn:hover {
  background: transparent;
  color: #d65050;
}

/* マイページへ戻るボタンは確認画面で非表示 */
.mw_wp_form_confirm #mypage-btn {
  display: none;
}

/* 入力エラーは背景色ピンク → 入力すると解除 */
.error-pink > input.mwwpf-input-text:placeholder-shown {
  background-color: pink;
}

.error-pink > textarea.mwwpf-textarea:placeholder-shown {
  background-color: pink;
}

input.mwwpf-btn {
    border-radius: 4px !important;
}

.mw_wp_form .horizontal-item + .horizontal-item {
  margin-left: 0px ;
}