@charset "UTF-8";
/************************************************************
Android4.4.2対応 打消し可 
************************************************************/
@media screen and (max-width: 360px) { /* 表示領域が360px以下の場合に適用するスタイル */
  #c-nav .detail h4 { font-size: 12px; }
  .g-nav ul li { font-size: 9px; }
  #c-3item .detail .necessary, #rank-item .detail .necessary { font-size: 9px; }
  #c-3item .detail .point, #rank-item .detail .point { font-size: 8px; }
  #c-3item .detail .point b, #rank-item .detail .point b { font-size: 11px; }
  #rank-item .detail h4 { font-size: 8px; }
  footer { font-size: 12px; } }
/************************************************************
初期化
************************************************************/
body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, th, td, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0;word-break: break-all;}
ul, ol { list-style: none; }
img { vertical-align: bottom; }
table { border-collapse: separate; *border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th, var { font-weight: normal; font-style: normal; }
caption, th { text-align: left; }
select { margin: 0; }
fieldset, img, a img { border: 0; }
address, caption, cite, code, dfn, em, strong, h1, h2, h3, h4, h5, h6 { font-size: 100%; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
img { width: 100%; }

/************************************************************
アンカー
************************************************************/
a:link { color: #337777; }

/************************************************************
フォント
************************************************************/
body, input, select, textarea, table, th, td, li, a { font-family: Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif, Helvetica; }
body { line-height: 1; font-size: calc(112.5% + 0.25vw); -webkit-text-size-adjust: none; background-color: #fff; word-wrap: break-word; }
body, input, select, textarea { color: #000; }

/************************************************************
共通
************************************************************/
body { width: 100%; margin: 0 auto; position: relative; /*overflow: hidden;*/ word-break: break-all; }

/************************************************************
HEADER 縦：表示画像の高さ ÷ 表示画像の幅 × 100
************************************************************/
header { background: url(../img/common/bg_header_01.png?171207) scroll 0 0 #FFFFFF; width: 100%; padding-top: 1.24%; z-index: 1; background-size: 50%; }
#logoarea { margin: 0 auto; position: relative; padding: 0; height: auto; width: 100%; background: #FFFFFF; }
.logoleft { width: 30%; margin: 3% 0; display: inline-block; *display: inline; vertical-align: middle; }
#logo a { display: block; width: 100%; height: 0; padding-top: 33.33%; background: url("../img/common/tplogo_header.png?171207") no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; -moz-background-size: contain; background-size: contain; }

/* ウェルカムエリア */
#welcomearea { text-align: right; float: right; width: 59%; margin: 1% 1.5%; }
#welcomearea #login-wel { width: 33%; float: left; display: block; padding-left: 1%; }
#welcomearea #rikupon-login-url { width: 33%; float: right; display: block; }
#login-wel a { width: 100%; height: 0; padding-top: 71.42%; margin: 0; background: url("../img/common/sp_h_logout_btn01.png?171208") no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; background-size: contain; }
#rikupon-login-url a { width: 100%; height: 0; padding-top: 71.42%; margin: 0; background: url("../img/common/sp_h_logout_btn02.png?171208") no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; background-size: contain; }

/* ログアウトエリア */
#welcomearea #rikupon-logout-url { width: 33%; float: right; display: block; }
#rikupon-logout-url a { width: 100%; height: 0; padding-top: 71.42%; margin: 0; background: url("../img/common/sp_h_login_btn01.png?171208") no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; background-size: contain; }

/* メルマガ設定 */
#welcomearea #mailiconarea { width: 33%; float: right; display: block; }
#mailiconarea a { width: 100%; height: 0; padding-top: 71.42%; margin: 0; background: url("../img/common/sp_h_mail_btn.png?171208") no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; background-size: contain; }

/* ログインエリア */
#loginarea { margin-left: 1.8%; margin-right: 1.8%; margin-bottom: 4.8309%; }
#loginarea #contents-login-href { background: #4ac0d3; display: block; border-radius: 5px; text-decoration: none; color: #fff; text-align: center; font-size: 4.7vw; font-weight: bold; padding: 4.3% 0; }

/* ゲスト情報 */
#namebar { border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; background: #e8e8e8; }
.gestarea { margin: 0 1.8%; padding: 0; text-align: left; }
#rikupon-login-name, #rikupon-logout-name { font-size: 2.4vw; font-weight: bold; line-height: 3em; color: #333; }

/************************************************************
WRAPPER
************************************************************/
#wrapper { width: 100%; margin: 0 auto; position: relative; *zoom: 1; }
#wrapper:before, #wrapper:after { content: ""; display: table; }
#wrapper:after { clear: both; height: 1px\9; margin-bottom: -1px \9; }

/************************************************************
FOOTER
************************************************************/
footer { font-size: 3.9vw; }

/* フッタナビ  */
#f-nav { width: 100%; line-height: 1.7; }
#f-nav #col-top { background: #e4e4e4; padding: 5% 0; }
#f-nav #col-top #col-l1 { margin-left: 2%; width: 48%; float: left; }
#f-nav #col-top #col-l2 { margin-right: 2%; width: 48%; float: left; }
#f-nav #col-top #col-l1 li:before { content: "・"; color: #337777; }
#f-nav #col-top #col-l2 li:before { content: "・"; color: #337777; }
#f-nav #col-r2 { width: 100%; clear: both; background: #fff; text-align: center; }
#f-nav #col-r2 ul { padding: 3% 0; margin: 0 auto; width: 60%; text-align: center; }
#f-nav #col-r2 li { float: left; width: 31%; margin: 1% 9%; }
#f-nav #col-r2 li img { width: 100%; }

/* ブランド */
#f-rls { background: url(../img/common/bg_header_01.png?171207) repeat-x scroll 0 0 #FFFFFF; width: 100%; padding-top: 4px; z-index: 1; margin-bottom: 3.1%; background-size: 50%; }
#f-rls address { width: 54%; margin-top: 1.9%; margin-left: 1.8%; text-align: left; }
#f-rls address img { width: 100%; }
#f-rls address a { color: #435B67; font-size: 2.8vw; font-weight: bold; text-decoration: underline; line-height: 2; font-style: normal; }

/************************************************************ 
maintenance
************************************************************/
.maintenance { margin: 0.6% 1.8%; padding: 1%; border: 1px solid #E1E1E1; font-size: 2vw; }

/************************************************************ 
CONTENTS
************************************************************/
#contents { width: 100%; margin-top: 3.1%; }
#contents h3 { margin-bottom: 4%; }


/************************************************************
人気ランキング
************************************************************/
#rank-item { margin-bottom: 15%; }
#rank-item h3 { width: 100%; height: 0; padding-top: 10.93%; margin: 0 0 3% 0; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("../img/sp/rank_title.png") no-repeat; background-size: cover; border: none; }
#rank-item .item-block { margin: 0 1% 2.9% 1%; }

/* item-box レイアウト */
#rank-item .item-box { background: #fff; float: left; margin: 0.65% 0.35% 0.35%; position: relative; width: 31%; height: auto;  }
#rank-item .item-box a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; }
#rank-item .item-box:after { display: block; clear: both; height: 0px; visibility: hidden; content: "."; }
#rank-item .item-box { min-height: 1px; /*IE6、7対策*/ }
#rank-item .item-box:before { content: ""; display: block; padding-top: 150%; }
#rank-item .item-box .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; }

/* item-box コンテンツ */
#rank-item .rank_icon { display: block; width: 15%; margin: -10% 0 2%; top: 0; }
#rank-item .detail-img { width: 100%; height: auto; display: block; text-align: center; margin: 0 auto 5.35%; position: relative; }
#rank-item .detail-img:before { content: ""; display: block; padding-top: 100%; }
#rank-item .detail-img .img-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#rank-item .detail-img img { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
#rank-item .detail h4 { color: #555555; line-height: 1.5em; font-size: 2.96vw; color: #106063; text-decoration: underline; text-align: center; font-weight: normal;}
#rank-item .detail .point { text-align: center; font-size: 3.2vw; color: #ff0505; font-weight: bold;}

/************************************************************
ステータスアイコン
************************************************************/
/* アイコンカラー */
.detail-icon ul li { font-size: 3vw; padding: 1.4% 2.8% 0.8%; margin-right: 1%; margin-bottom: 1.6%; line-height: 1; vertical-align: middle; border: solid 1px #fff; display: inline-block; }
.detail-icon ul li.icon_pr { background: #aaaaaa; color: #fff; border-color: #aaaaaa; border-radius: 3px; }
.detail-icon ul li.icon_red { background: #fff; color: #ff3c3c; border-color: #ff3c3c; }
.detail-icon ul li.icon_pink { background: #fff; color: #fe5ca8; border-color: #fe5ca8; }
.detail-icon ul li.icon_orange { background: #fff; color: #ff7a18; border-color: #ff7a18; }
.detail-icon ul li.icon_blue { background: #fff; color: #003cc4; border-color: #003cc4; }
.detail-icon ul li.icon_green { background: #fff; color: #25880e; border-color: #25880e; }
.detail-icon ul li.icon_sky { background: #fff; color: #0084ff; border-color: #0084ff; }
.detail-icon ul li.icon_dodger { background: #fff; color: #0d98dd; border-color: #0d98dd; }
.detail-icon ul li span { line-height: 1; display: block; padding-top: 1px; padding-bottom: -1px; }

/************************************************************
parts
************************************************************/

/* 中間ページトップリンク */
.pageTopLink { font-size: 4.23vw; margin: 5.63% 1% 9.86% auto; text-align: right; font-weight: bold; }

/* バナーエリア */
.bnarea p { margin-left: 1.8%; margin-right: 1.8%; margin-bottom: 6%; }
.bnarea p img { width: 100%; }
.bnarea p.bn_gb { margin-left: 0; margin-right: 0; background: #e6eef6; padding: 2%; }
.bnarea p.bn_gb a:before { content: ""; display: inline-block; width: 100%; height: 0; padding-top: 6.2%; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("../img/sp/gb_title.png") no-repeat; background-size: cover; }
.bnarea p.bn_gb a img { margin: 0 auto; }

/* ページの上部へ */
.pageTopAnc { background: #52646F; text-align: right; display: block; padding: 7px; margin-bottom: 0; font-size: 3.29vw; line-height: 1.7; }
.pageTopAnc > a { background: url("../img/sp/pagetopanc.png") no-repeat left center; background-size: 12px 9px; -webkit-background-size: 12px 9px; color: #ffffff; padding-left: 17px; }