@charset "UTF-8";

/**********************************************************
 *
 * 1to1エリア
 *
 **********************************************************/

 /* 注意メッセージ エリア
-------------------------------------------*/
.area-attention {
  border-bottom: 1px solid #ddd;
  background-color: #f6f6f6;
}

/* コンテンツ部分 */
.mod-attention {
  margin: 0 auto;
  padding: 14px 0 11px;
  width: 940px;
  font-size: 85.71429%;
}
.txt-attention {
  margin-left: 30px;
  text-indent: -30px;
}
  .txt-attention .img {
    margin-right: 5px;
    vertical-align: middle;
  }
  .txt-attention a {
    text-decoration: underline;
  }
  .txt-attention a:hover {
    text-decoration: none;
  }


/* エラー表示 エリア
-------------------------------------------*/
.area-error {
  border-top: 1px solid #ffaab0;
  border-bottom: 1px solid #ffaab0;
  background-color: #ffeef0;
}
.mod-error {
  margin: 0 auto;
  width: 940px;
}
.txt-error {
  padding: 14px 10px 11px;
  text-align: right;
  font-size: 85.71429%;
}
.txt-error a {
  text-decoration: underline;
}
.txt-error a:hover {
  text-decoration: none;
}

/* 1to1 エリア
-------------------------------------------*/
/* エリア */
.area-o2o {
  background-color: #f1f1f1;
  color: #000;
}
.area-o2o a,
.area-o2o a:visited,
.area-o2o a:hover,
.area-o2o a:focus {
  color: #000;
}

/* コンテンツ部分 */
.mod-o2o {
  margin: 0 auto;
  padding: 12px 0 0;
  width: 940px;
  height: 38px;
  font-size: 78.57143%;
  position: relative;
}
.mod-o2o a {
  font-size: 11px;
}

/* テキスト部分 */
.txt-o2o {
  display: inline-block;
  vertical-align: top;
}

/* 各項目 */
.item-o2o  {
  display: inline-block;
  margin: 0 12px 0 4px;
  vertical-align: top;
	white-space: nowrap;
}

.item-o2o > * {
  display: inline-block;
}

/* ポイントエリア */
.point-o2o {
  position: absolute;
  top: 4px;
  right: 6px;
}
.point-o2o .point-area {
  position: relative;
  display: inline-block;
  background-color: #ffffff;
  color: #666666;
  width: 146px;
  height:30px;
  border: 1px solid #c1c1c1;
  border-radius: 4px 0 0 4px;
  padding: 0 3px;
  text-align: right;
}
.point-o2o .point-area::after {
  position: absolute;
  top: -1px;
  right: -5px;
  content: "";
  color: #ffffff;
  background-image: url(../../images_osp/common/header/ico_arrow_01.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #cc0033;
  width: 6px;
  height:30px;
  border-radius: 0 4px 4px 0;
}
.point-o2o .point-area.stage-none::after {
  background-color: #cc0033;
}
.point-o2o .point-area.stage-001::after {
  background-color: rgb(244,175,194);
}
.point-o2o .point-area.stage-002::after {
  background-color: rgb(238,134,165);
}
.point-o2o .point-area.stage-003::after {
  background-color: rgb(234,96,142);
}
.point-o2o .point-area.stage-004::after {
  background-color: rgb(229,0,110);
}
.point-o2o .point-area.stage-005::after {
  background-color: rgb(181,181,182);
}

.point-o2o .point-area > img.logo {
  float: left;
  margin: 6px 2px 6px 0;
}
.point-o2o .point-area .point-wrap {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  display: inline-block;
  margin-top: 2px;
  text-align: left;
  font-size: 14px;
  color: #333333;
  line-height: 1.1;
}
.point-o2o .point-area .point-wrap > .stage {
  font-size: 12px;
  display: block;
}
.point-o2o .point-area .point-wrap > .point {
  display: inline-block;
}
.point-o2o .point-area .point-wrap > .point:first-child {
  margin-top: 13px;
}
.point-o2o .point-area .point-wrap > .point.minus {
  color: #c00000;
}
.point-area .point-wrap > .point {
  margin: 0 2px;
}
.item-o2o .point-area .point-wrap > .point {
  margin: 0 2px 0 10px;
  font-weight: normal;
}


/* ポイントロゴ */
.item-o2o .logo {
  margin: 0 0 2px 2px;
  vertical-align: middle;
}
.item-o2o .logo:first-child { margin-left: 0; }

.item-o2o .point-area .logo {
  margin: -1px 2px 0 0;
}

/* XX：XXの部分 */
.item-o2o .label:after {
  content: ":";
  padding-right: 2px;
}
.item-o2o .logo + .label {
  margin-left: 4px;
}

/* dアカウント */
.item-o2o.daccount {
  position: absolute;
  top:12px;
  right: 198px;
}
.item-o2o.daccount a > img {
  margin-top: -2px;
}

/* ログイン/ログアウトボタン */
.btn-o2o {
  display: inline-block;
  position: relative;
  top: -6px;
  margin: 0px 30px;
}
.btn-o2o:first-child {
  margin: 0 3px 0 0;
}


/* ログイン時 */
.mod-o2o.logged-in .txt-o2o {
  text-align: right;
}
.mod-o2o.logged-in .item-o2o.daccount {
  position: absolute;
  left: 15px;
  right: auto;
}
.mod-o2o.logged-in .txt-o2o {
  padding: 0 0 0 185px;
  width: 100%;
}
.mod-o2o.logged-in .point-o2o {
  position: relative;
  top: -8px;
  right: -6px;
}

/* 未ログイン時*/
.mod-o2o.logged-out .txt-o2o {
  padding: 0 0 0 185px;
  width: 100%;
}
.mod-o2o.logged-out .txt-o2o {
  text-align: right;
}
.mod-o2o.logged-out .daccount {
  position: absolute;
  left: 15px;
  right: auto;
  top: 5px;
}
.logged-out-link {
padding-right:125px;
}

/* オプトアウト時*/
.mod-o2o.optout .txt-o2o {
  padding: 0 0 0 185px;
  width: 100%;
}
.mod-o2o.optout .txt-o2o {
  text-align: right;
}
.mod-o2o.optout .daccount {
  position: absolute;
  left: 15px;
  right: auto;
  top: 5px;
}
.optout-link {
padding-right:65px;
}