@charset "Shift_JIS";
/* ----------------------------------------------------------
  TITLE : MIZUNO OFFICIAL ONLINE SHOPPING
  URI : www.mizunonetorder.com
  Copyright (C) MIZUNO8.
---------------------------------------------------------- */

/*----------------------------
    1. 初期設定
    2. 共通設定
    3. お客様情報の入力
    4. お届け先情報設定
    5. お支払い情報設定
    6. 注文内容確認
    7. 注文完了
    8. 注文進行中
    9. 注文履歴一覧
    10.会員情報登録
    11.規約確認
    12.規約（インラインフレーム）
------------------------------ */

/*   1. 基本設定
---------------------------------------------------- */
/* 基本レイアウト */
.register #layout #container {
    width: 980px;
    margin: 35px auto 0;
}

/* リンク設定 */
.register #layout #container a {
    color: #111;
}

.register #layout #container a:link {
    text-decoration: underline;
}

.register #layout #container a:visited {
    text-decoration: underline;
}

.register #layout #container a:hover {
    text-decoration: none;
}

.register #layout #container a:focus {
    text-decoration: none;
}

.register #layout #container a:active {
    text-decoration: underline;
}

/* 注意書き */
.register #layout #container .attent {
    color: #BF0101;
}

/*   2. 共通設定
---------------------------------------------------- */
/* テーブル共通設定 */
.register #layout #container table {
    border: 1px solid #b8b8b8;
}

.register #layout #container table th,
.register #layout #container table td {
    padding: 15px;
    border: 1px solid #b8b8b8;
}

.register #layout #container table td.subTotal {
    background: #f2f2f2;
}

.register #layout #container table th.tbl-detail {
    padding: 1px;
    border: 1px solid #b8b8b8;
    text-align: left;
}

.register #layout #container table details summary.dtl_sm_item {
    padding: 2px 2px 0px 5px;
    text-align: left;
    font-size: 10px;
    font-weight: bold;
    color: #757575;
    background: #f2f2f2;
}

.register #layout #container table details[open] summary.dtl_sm_item {

/*    border-bottom: 1px solid #b8b8b8; */
}

/* テーブルタイトル[ブルー] */
.register #layout #container table tr.tableTitle th {
    padding: 7px 5px 3px;
    letter-spacing: 0.2em;
    background: #757575;
    /* background: url(../images/parts/disp/title_bk_deep_blue.gif) repeat-x left top #5656bc! important; */
}

.register #layout #container table tr.tableTitle th h3 {
    /* width: 768px; */
    width: 968px;
    /* height: 19px; */
    /* background: #757575; */
    text-align: left;
}

.register #layout #container table tr.tableTitle th h3 span {
    /* border-left: 4px solid #fff; */
    padding: 0 0 0 5px;
    color: #fff;
    font-weight: bold;
}

/* テーブルタイトル[グレー] */
.register #layout #container table tr.tableTitleGray th {
    padding: 6px 5px 3px;
    letter-spacing: 0.2em;
    background: #e6e6e6! important;
}

.register #layout #container table tr.tableTitleGray th h3 {
    width: 700px;
    text-align: left;
    font-weight: bold;
    color: #3f3f3f;
}

/* セル内右寄せ */
.register #layout #container table td.cellRight {
    text-align: right;
}

/*   注文フロー
---------------------------------------------------- */
.register #layout #container ol.orderFlow {
    width: 780px;
    width: 980px;
    /* text-align: center; */
    margin: 15px 0 0 0;
    padding: 15px 0;
    background: url(../images/parts/disp/order_step_base.gif) no-repeat #f2f2f2;
}

.register #layout #container ol.orderFlow li {
    float: left;
    display: inline;
    margin: 0 20px;
}

/*   ご注文内容内訳表示
---------------------------------------------------- */
.register #layout #container .orderConfirm table {
    margin: 40px 0 0 0;
    width: 100%;
}

.register #layout #container .orderConfirm table tr.tableHead th {
    padding: 5px;
    text-align: center;
    font-size: 10px;
    /* color: #757575; */
    /* background: #f2f2f2; */
    background: #f5f5f5;
}

.register #layout #container .orderConfirm table tr.tableOrdNo th {
    padding: 5px;
    text-align: center;
    font-size: 10px;
    color: #757575;
    background: #eeffff;
}

/* 商品コード */
.register #layout #container .orderConfirm table td.code {
    width: 70px;
    text-align: center;
    white-space: nowrap;
}

/* 商品名 */
.register #layout #container .orderConfirm table td.product {
    width: 329px;
}

.register #layout #container .orderConfirm table td.product dl {
}

.register #layout #container .orderConfirm table td.product dl dt {
    float: left;
    clear: both;
}

.register #layout #container .orderConfirm table td.product dl dd {
    line-height: 1.2;
    margin: 0 0 0 50px;
}

.register #layout #container .orderConfirm table td.product dl dd p {
    width: 249px;
}

.register #layout #container .orderConfirm table td.product dl dd.option p {
    width: 249px;
    margin-top: 3px;
    font-size: 10px;
}

/* 単価（円） */
.register #layout #container .orderConfirm table td.unit {
    width: 90px;
    white-space: nowrap;
}

.register #layout #container .orderConfirm table td.unit span {
    font-size: 10px;
}

/* 個数（個） */
.register #layout #container .orderConfirm table td.stock {
    width: 45px;
}

/* 小計（円） */
.register #layout #container .orderConfirm table td.total {
    width: 90px;
    white-space: nowrap;
}

/* 送料・消費税 */
.register #layout #container .orderConfirm table td.expenses dl {
    width: 15em;
    margin: 0 0 0 auto;
    text-align: left;
}

.register #layout #container .orderConfirm table td.expenses dl dt {
    float: left;
    width: 8.5em;
    text-align: right;
    color: #8c8c8c;
}

.register #layout #container .orderConfirm table td.expenses dl dd {
    float: right;
    width: 6em;
    text-align: right;
}

.register #layout #container .orderConfirm table td.expenses dl dt.spendPoint,
.register #layout #container .orderConfirm table td.expenses dl dd.spendPoint {
    color: #ff0000;
}

/* 合計（税込） */
.register #layout #container .orderConfirm table td.totalPrice {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.register #layout #container .orderConfirm table td.totalPrice span {
    margin: 0 10px 0 0;
    color: #666;
    font-weight: bold;
}

/*   カートへ戻る共通
---------------------------------------------------- */
.register #layout #container table#backToCart {
    margin: -10px 0 0 0;
    width: 100%;
    border: 0;
}

.register #layout #container table#backToCart td{
    padding: 0;
    border: 0;
    text-align:right;
}

/*   フォームエリア共通
---------------------------------------------------- */
.register #layout #container .formArea table.utility {
    margin: 50px 0 0 0;
    width: 100%;
}

.register #layout #container .formArea table.utility th {
    width: 200px;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
    /* background: #f5f5f5; */
    /* background: #757575; */
}

.register #layout #container .formArea table.utility td.widthFixed {
    width: 577px;
}

/* 微調整 */
.register #layout #container .formArea table.utility td img {
    margin: 0 5px 0 0;
    vertical-align: middle;
}

.register #layout #container .formArea table.utility td p.notes {
    font-size: 10px;
    color: #bf0000;
    text-indent: -1.1em;
    margin-left: 1.2em;
}

.register #layout #container .formArea table.utility table.innerTable td p {
    padding: 3px 0 0 5px;
}

.register #layout #container .formArea table.utility table.innerTable td span {
    font-size: 11px;
    color: #666;
}

/* フォームフッタ */
.register #layout #container .supplemental {
    width: 100%;
    margin: 20px 0 0 0;
    padding: 15px 20px;
    background: #f2f2f2;
    text-align: center;
}

.register #layout #container .submitArea {
    margin: 25px 0 0 0;
    text-align: center;
}

/*   インナーテーブル
---------------------------------------------------- */
.register #layout #container .formArea table.utility table.innerTable {
    padding: 0;
    border: none;
}

.register #layout #container .formArea table.utility table.innerTable th,
.register #layout #container .formArea table.utility table.innerTable td {
    padding: 5px;
    border: none;
    vertical-align: top;
    vertical-align: middle;
    /*background: #ccc; デバック用［※後で消去］ */
    /*border: 1px solid #fff; デバック用［※後で消去］ */
}

.register #layout #container .formArea table.utility table.innerTable td.spacer {
    width: 34px;
}

.register #layout #container .formArea table.utility table.innerTable tr#mailmag td {
    padding: 3px;
    border: none;
    vertical-align: top;
}

tr#mailmag p {
    color: #ff3300;
}


/*   フォーム凡用
---------------------------------------------------- */
.register #layout #container .formArea form input,
.register #layout #container .formArea form  select {
    margin: 0 5px;
    vertical-align: middle;
    font-size: 14px;
    padding: 5px;
    border: solid 1px #757575;
    /* margin: 5px 0; */
    line-height: 1;
}

.register #layout #container .formArea form input.smallS,
.register #layout #container .formArea form select.smallS {
    width: 55px;
}

.register #layout #container .formArea form input.smallL,
.register #layout #container .formArea form select.smallL {
    width: 70px;
}

.register #layout #container .formArea form input.middleS,
.register #layout #container .formArea form select.middleS {
    width: 110px;
}

.register #layout #container .formArea form input.middleL,
.register #layout #container .formArea form select.middleL {
    width: 145px;
}

.register #layout #container .formArea form input.largeS,
.register #layout #container .formArea form select.largeS {
    width: 240px;
}

.register #layout #container .formArea form input.largeL,
.register #layout #container .formArea form select.largeL {
    width: 335px;
}

/*   その他ご要望Table用
---------------------------------------------------- */
.register #layout #container table.tblOrdMemo,
#thanks.register #layout #container .orderConfirm table.tblOrdMemo
 {

    margin:      0;
    width:     100%;
    border:      0;
    cellpadding: 0;
    cellspacing: 0;
}

.register #layout #container table.tblOrdMemo td.tdOrdMemo{
    padding:      5px 15px;
    border:       1px solid #b8b8b8;
    width:      auto; /*100%;*/
    height:      30px;
    line-height: 18px;
    margin:       0px;
    white-space: break-spaces;
}

/*   3. お客様情報の入力
---------------------------------------------------- */
/* 説明 */
#customerInfo #layout #container .formArea table.utility tr.desc td p {
    margin: 5px 0 0 0;
}

/* 2つ目のテーブル */
#customerInfo #layout #container .formArea table.secondTable  {
    margin: 30px 0 0 0;
}

/* 会員登録で全品送料無料！ */
.register #layout #container .formArea table.utility table.innerTable td p.postageFree {
    width: 17em;
    padding: 10px;
    margin: 0 0 0 5px;
    border: 1px solid #bf0000;
    font-weight: bold;
    color: #bf0000;
}

/* フォームフッタ */
.register #layout #container .formArea .supplemental p.left {
    float: left;
    width: 620px;
    margin: 5px 0 0 0;
}

.register #layout #container .formArea .supplemental p.right {
    float: right;
    width: 110px;
}

/*   4. お届け先情報設定
---------------------------------------------------- */
#delivery #layout #container .formArea table.innerTable p span.changeDate {
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

#delivery #layout #container .formArea table.utility table td textarea {
    width: 400px;
    margin: 0 0 0 5px;
}

/*   5. お支払い情報設定
---------------------------------------------------- */
/* ポイント利用 */
#payment #layout #container .formArea table.utility table.usePoint {
    /* margin: 10px 0 0 15px; */
    /* width: 350px; */
    background: #f2f2f2;
}

#payment #layout #container .formArea table.utility table.usePoint td {
    padding: 10px 15px;
    border-bottom: 1px solid #fff;
    white-space: nowrap;
}

/* お支払い方法 */
#payment #layout #container .formArea table.utility td p.payeasy {
    margin: 0 0 0 30px;
    font-size: 10px;
    color: #666;
}

#payment #layout #container .formArea table.utility table.credit {
    /* margin: 10px 0 0 15px; */
    /* width: 505px; */
    background: #f2f2f2;
}

#payment #layout #container .formArea table.utility table.credit td {
    /* padding: 5px 15px; */
    vertical-align: top;
}

#payment #layout #container .formArea table.utility table.credit td.creditTop {
    padding: 10px 15px;
    border-bottom: 1px solid #fff;
}

#payment #layout #container .formArea table.utility table.credit td.bottomLine {
    border-bottom: 1px solid #fff;
}

#payment #layout #container .formArea table.utility table.credit td.cardType {
    padding-top: 10px;
}

#payment #layout #container .formArea table.utility table.credit td.limit {
    padding-bottom: 10px;
}

#payment #layout #container .formArea table.utility table.credit td.creditBottom {
    padding: 10px 15px;
    border-top: 1px solid #fff;
}

#payment #layout #container .formArea table.utility table.credit td p.notes {
    margin: 10px 0 0 10px;
}

/* クーポン キャンペーン */
#payment #layout #container .formArea table.utility td p.couponCp {
    margin: 0 0 0 30px;
    font-size: 10px;
    color: #666;
    max-height: 30px;
    height: expression(this.scrollHeight > 29? '30px':'auto');
    overflow: hidden;
}

/* その他、何かありましたら */
#payment #layout #container .formArea table.innerTable td textarea {
    width: 400px;
    margin: 0 0 0 5px;
}

/* 配達時注意 */
#payment #layout #container .formArea table.innerTable .delivery-note {
    color: #FF0000;
    margin-left: 27px;
    font-weight: bold;
}

/*   6. 注文内容確認
---------------------------------------------------- */
#viewOrder #layout #container .columnHead {
    position: relative;
    width: 968px;
}

#viewOrder #layout #container table tr.tableTitle th p.editBtn {
    position: absolute;
    top: -3px;
    right: 0px;
}

#payment #layout #container .formArea .supplemental {
    text-align: center;
    padding: 30px 20px;
}

/*   7. 注文完了
---------------------------------------------------- */
/* ご注文ありがとう */
#thanks #layout #container .messege {
    margin: 40px 0 0 0;
    padding: 20px 25px 25px;
    background: #f2f2f2;
}

#thanks #layout #container .messege p {
    margin: 5px 0 0 0;
}

#thanks #layout #container .messege p strong {
    font-size: 16px;
    font-weight: bold;
}

#thanks #layout #container .messege p.notes {
    margin: 10px 0 0 0;
}

/* ご注文内容内訳表示 */
#thanks #layout #container .orderConfirm table {
    margin: 40px 0 0 0;
}

#thanks #layout #container .orderConfirm table td.product  p.option{
    font-size: 10px;
}

/* テーブル調整 */
#thanks #layout #container .formArea table.utility th,
#thanks #layout #container .formArea table.utility td {
    padding: 7px 15px;
    border-right: none;
    border-left: none;
}

#thanks #layout #container .formArea table.utility th {
    font-weight: bold;
    color: #666;
    background: #fff;
}

/*   8. 注文進行中
---------------------------------------------------- */
#engaged #layout #container .messege {
    margin: 40px 0 0 0;
    padding: 20px 25px 25px;
    background: #f2f2f2;
}

#engaged #layout #container .messege p {
    margin: 5px 0 0 0;
}

#engaged #layout #container .messege p em {
    font-size: 14px;
}

#engaged #layout #container .messege p strong {
    display: block;
    margin: 15px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}

#engaged #layout #container .messege p.notes {
    margin: 15px 0 0 0;
}

#engaged #layout #footer {
    margin-top: 50px;
}

/*   9. 注文履歴一覧
---------------------------------------------------- */
/* 見出し */
#orderList #layout #container h3.heading {
    height: 19px;
    margin: 35px 0 0 0;
    padding: 7px 5px 3px;
    letter-spacing: 0.2em;
    background: url(../images/parts/disp/title_bk_deep_blue.gif) repeat-x left top #5656bc! important;
}

#orderList #layout #container h3.heading span {
    border-left: 4px solid #fff;
    padding: 0 0 0 5px;
    color: #fff;
    font-weight: bold;
}

/* 件数表示 */
#orderList #layout #container .indication {
    width: 780px;
    margin: 10px 0 0 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #b8b8b8;
    line-height: 1.1;
}

#orderList #layout #container .indication p.indNumber {
    float: left;
}

#orderList #layout #container .indication p.indNumber strong {
    font-weight: bold;
    color: #000099;
}

#orderList #layout #container .indication p.indLink {
    float: right;
}

#orderList #layout #container .indication p.indLink em.rev {
    background: url(../images/parts/common/point_lightgray_reverse.gif) no-repeat left center;
    padding: 0 0 0 10px;
}

#orderList #layout #container .indication p.indLink em.next {
    background: url(../images/parts/common/point_lightgray.gif) no-repeat right center;
    padding: 0 10px 0 0;
}

#orderList #layout #container .indication em {
color:#B2B2B2;
}

#orderList #layout #container .indication span {
    font-weight: bold;
}

/* ご注文内容内訳表示 */
#orderList #layout #container .orderConfirm table th.outline {
    padding: 10px 15px;
    background: #e6e6e6;
}

#orderList #layout #container .orderConfirm table th.outline dl {
}

#orderList #layout #container .orderConfirm table th.outline dl dt {
    float: left;
    margin: 0 0.2em 0 0;
    color: #666;
}

#orderList #layout #container .orderConfirm table th.outline dl dd {
    float: left;
    margin: 0 1.5em 0 0;
    font-weight: bold;
}

#orderList #layout #container .orderConfirm table td {
    padding: 15px 10px;
}

#orderList #layout #container .orderConfirm table td.product  p.option{
    font-size: 10px;
}

#orderList #layout #container .orderConfirm table td.code {
    width: 100px;
}

#orderList #layout #container .orderConfirm table td.product {
    width: 242px;
}

#orderList #layout #container .orderConfirm table td.unit {
    width: 80px;
}

#orderList #layout #container .orderConfirm table td.stock {
    width: 40px;
}

#orderList #layout #container .orderConfirm table td.cancel {
    width: 40px;
}

#orderList #layout #container .orderConfirm table td.total {
    width: 60px;
}

#orderList #layout #container .orderConfirm table td.engaged {
    width: 70px;
    text-align: center;
    font-weight: bold;
}

#orderList #layout #container .orderConfirm table tr.confirmFoot td {
    border: none;
}

/*   10. 会員情報登録
---------------------------------------------------- */
/* 会員登録 */
#memberRegist #layout #container h3,
#memberConfirm #layout #container h3 {
    margin: 25px 0 0 0;
    font-weight: bold;
}

#memberRegist #layout #container p.required {
    margin: 5px 0 0 0;
}

#memberRegist #layout #container p.required img {
    margin: 0 5px 0 0;
}

#memberConfirm #layout #container h3.attent {
    color: #bf0101;
}

#memberRegist #layout #container .formArea table.utility,
#memberConfirm #layout #container .formArea table.utility {
    margin: 15px 0 0 0;
}

#memberConfirm #layout #container .formArea .submitArea ul li {
    display: inline;
    margin: 0 10px;
}

/* 登録完了 */
.registerCp #layout #container {
    width: 980px;
    margin: 35px auto 0;
}

/* リンク設定 */
.registerCp #layout #container a {
    color: #00a0c6;
}

.registerCp #layout #container a:link {
    text-decoration: underline;
}

.registerCp #layout #container a:visited {
    text-decoration: underline;
}

.registerCp #layout #container a:hover {
    text-decoration: none;
}

.registerCp #layout #container a:focus {
    text-decoration: none;
}

.registerCp #layout #container a:active {
    text-decoration: underline;
}

.registerCp #layout #container h3 {
    margin-top: 25px;
    font-weight: bold;
}

.registerCp #layout #container table {
    border: 1px solid #757575;
    /* margin-top: 2em; */
    margin: 20px auto 30px;
    width: 55%;
}

.registerCp #layout #container table th,
.registerCp #layout #container table td {
    padding: 8px;
    border: 1px solid #b8b8b8;
    text-align: left;
}

.registerCp #layout #container table th {
    font-weight: normal;
    width: auto;
    background: #f5f5f5;
}

.registerCp #layout #container .memCpArea p {
    margin: 2em 0 0 0;
}

.registerCp #layout #container p.buttom {
    width: 980px;
    text-align: center;
    margin-top: 20px;
}

.registerCp #layout #container .memCpArea p.shopping {
    padding: 15px;
    background: #f2f2f2;
}

.registerCp #layout #container .memCpArea p.shopping a {
    background: url(../images/parts/common/point_gray.gif) no-repeat left center;
    padding: 0 0 0 10px;
}

/* 住所録 */
#addressBook #layout #container .formArea table.utility {
    margin: 25px 0 0 0;
}

#addressBook #layout #container h3 {
    margin: 25px 0 5px 0;
    font-weight: bold;
}

#addressBook #layout #container h3.attent {
    color: #bf0101;
    margin-bottom: 0;
}

#addressBook #layout #container .formArea .submitArea ul li {
    display: inline;
    margin: 0 10px;
}

#addressBook #layout #container .memCpArea h3 {
    margin: 50px 0 0 0;
}

#addressBook #layout #container .memCpArea p.buttom {
    width: 980px;
    text-align: center;
    margin-top: 50px;
    border-top: 1px solid #b8b8b8;
    padding: 20px 0 0 0;
}

/*   11. 規約確認
---------------------------------------------------- */
#regulationConfirm #layout #container p.pleaseRead {
    margin: 20px 0 0;
}

#regulationConfirm #layout #container iframe {
    width: 100%;
    height: 300px;
    margin: 15px 0 0;
    border: 1px solid #D9D9D9;
}

#regulationConfirm #layout #container .confirm {
    margin: 30px 0 0;
    text-align: center;
}

#regulationConfirm #layout #container .confirm ul {
    margin: 20px 0 0;
}

#regulationConfirm #layout #container .confirm ul li {
    display: inline;
    margin: 0 10px;
}

#regulationConfirm #layout #container p.recommend {
    margin: 40px 0 0;
    padding: 15px 10px;
    text-align: center;
    font-weight: bold;
    font-size: 114%;
    background: #f2f2f2;
    border: 1px solid #D9D9D9;
}

#regulationConfirm #layout #container p.recommend strong {
    color: #BF0000;
    font-weight: bold;
}

.imageButton {
    cursor: pointer;
}



/*202203追加*/

.register #layout #container form input[type="image"]{
    padding: 0;
    margin: 0;
    border: 0;
}

.memCpArea {
    margin: 0 auto;
    text-align: center;
    width: 980px;
}

.register #layout #container .formArea th {
    font-weight: normal;
    background: #f5f5f5;
}