@charset 'UTF-8';

/**
 * ①コンテンツ外側背景
 * content outside background color
 */
#wrapper{
  background-color: #F2F2F2;
}

/**
 * ②コンテンツ内側背景
 * content inside background color
 */
.conts{
  background-color: #fff;
}

/**
 * ③コンテンツ内側影 コンテンツとカテゴリに戻るボタン
 * content hr border color
 */
.conts{
  -webkit-box-shadow: 0 0 2px 2px #d9d7d1;
  box-shadow: 0 0 2px 2px #d9d7d1;
}

/**
 * ④アイコン背景
 * icon background color
 */
#container .titHeading.titHeadingInner::before,
.titHeading[data-num]::before,
.boxHowtouseMenu li .boxTapTextContentsBase .modSmallHeadline::before,
.boxPointMenu .boxTapTextContentsBase .modSmallHeadline::before{
  background-color: #fdb0fd;
}

/**
 * ⑤タイトル見出し
 * content titHeading text  color
 */
.titHeading{
  color: #333;
}

/**
 * ⑥小見出し
 * content modSmallHeadline text color
 */
.boxMethod .modSmallHeadline{
  color: #333333;
}

/**
 * ⑦表タイトル背景
 * table header background color
 */
.boxMethod table th{
  background-color: #e0ddd7;
}

/**
 * ⑧表タイトルテキスト
 * table header text color
 */
.boxMethod table th{
  color: #333;
}

/**
 * ⑨表ボーダー
 * table border color
 */
.boxMethod table,
.boxMethod table th,
.boxMethod table td{
  border-color: #ccc;
}

/**
 * ⑩ポイント
 * table point text color
 */
.boxMethod table td:last-child{
  color: #fd6d35;
}

/**
 * ⑪見出し背景
 * content titHeadingSpv background color
 */
.conts > .contsInner:first-of-type{
  border-radius: 6px 6px 0 0;
  background-color: #fff;
}

/**
 * ⑫メニューなどのボーダー
 * content box border-bottom color
 */
hr{
  border-color: #e8e6e1;
}

.boxPartialUnderlineListBase li{
  border-color: #e8e6e1;
}

.boxToggle li .modParentConts{
  border-color: #e8e6e1;
}

/**
 * ⑬トップページ見出し背景
 * titCategory background color
 */
.titCategory{
  background-color: #df0623;
}

/**
 * ⑭トップページ見出し
 * titCategory text color
 */
.titCategory{
  color: #fff;
}

/**
 * ⑮リンク矢印の色
 * link arrow color
 */
.boxTapTextContentsBase a::after{
  border-color: #cfcac0;
}

/**
 * ⑯トグルマークの色
 * toggle mark color
 */
.boxToggle li .modParentConts.modDownArrow::before{
  border-top-color: #cfcac0;
}

.boxToggle li .modParentConts.modUpArrow::before{
  border-bottom-color: #cfcac0;
}

/**
 * ⑰カテゴリに戻るボタン内のテキスト
 * boxPageScrollBase .modPrevious text color
 */
.boxPageScrollBase .modPrevious > a{
  color: #999;
}

/**
 * ⑱カテゴリに戻るボタン内の矢印
 * boxPageScrollBase .modPrevious border color
 */
.boxPageScrollBase .modPrevious::before{
  border-color: #cfcac0;
}

/**
 * ⑲トグルメニューの背景
 * titCategory background color
 */
.boxToggle .modChildConts li{
  background-color: #f4f0ed;
}

/**
 * ⑳先頭のコンテンツ背景
 * content inside background color
 */
#container div[id*='unit'] .contsInner:first-child{
  border-radius: 6px 6px 0 0;
  background-color: #fff;
}

/**
 * ㉑コンテンツメニューの背景
 * menu background color
 */
.boxHowtouseMenu,
.boxPointMenu{
  background-color: #fff;
}


/* Common
   --------------------------------------------- */
.red{ color:#f00; }

.modTextContents.notes li {
  text-indent: -1em;
  margin-left: 1em;
}


/* Point: ポイントについて
   --------------------------------------------- */
.modParentConts p.modSmallHeadline{
  text-indent: -1.4em;
  margin-left: 1.5em;
}
.modChildConts li p {
  text-indent: -1.4em;
  margin-left: 1.5em;
}
.modChildConts li p {
  margin-right: 1em;
}
.modChildConts li dl dt {
  font-weight: bold;
  margin-bottom: 1em;
  margin-left: 1.5em;
  margin-right: 1em;
}
.modChildConts li dl dd {
  margin-bottom: 1em;
  margin-left: 1.5em;
  margin-right: 1em;
}


/* PointReword: ポイントヘルプページ リワード枠
   --------------------------------------------- */
.boxPointReword {
  position: relative;
  background-color: #fafaf5;  /* 背景カラー設定 */
  border-radius: 6px;
  margin: 15px 0;
  padding: 15px 10px;
}
.boxPointRewordThumb img {
  margin: 0 auto 10px;
  display: inline-block;
  vertical-align: top;
  width: 22.4138%;
  padding: 0px;
  box-sizing: border-box;
}
.modPointRewordCopy {
  box-sizing: border-box;
  padding: 5px 16px 6px;
  margin: 0 0 10px;
  background-color: #604c3f;  /* 見出し背景カラー設定 */
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.modPointRewordCopy > span {
  position: relative;
}
.modPointRewordCopy > span::before {
  display: block;
  position: absolute;
  top: 50%;
  left: -25px;
  width: 25px;
  height: 25px;
  margin-top: -13px;
  content: '';
  background-image: url(../../images/pc/ico_sprite.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 250px 25px;
}
.modPointRewordCopy > span::before {
  background-position: -100px 0;
}
.modPointRewordProduct {
  vertical-align: top;
  width: 63.7931%;
  padding: 0 0 0 10px;
  display: inline-block;
  box-sizing: border-box;
  color: #333;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
}
.modPointRewordList {
  margin: 0 0 10px 1em;
  font-size: 1.2rem;
  text-indent: -1em;
}
.modPointRewordBtnApply {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 0 10px;
  border-radius: 6px;
  border: 1px #f4960d solid;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  background: #ff7d00;
  background: linear-gradient(to bottom, #faab37 0%, #f4960d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faab37',endColorstr='#f4960d',GradientType=0);
}