@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; }
  .c-xitem .detail .point { font-size: 14px; }
  .c-xitem .detail .point b { font-size: 21px; } }
/************************************************************
初期化
************************************************************/
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(/tokuten/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("/tokuten/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("/tokuten/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("/tokuten/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("/tokuten/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("/tokuten/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(/tokuten/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: 3% 1.8%; padding: 1.5% 1% 1%; font-size: 3vw; line-height:1.5; border: 1px solid #E1E1E1; }
.maintenance::before{ content: ''; width: 10px; height: 10px; border: 10px; border-top: solid 2px #cccccc; border-right: solid 2px #cccccc; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right:5%;	margin-top:2.2%;}

/************************************************************ 
CONTENTS
************************************************************/
#contents { width: 100%;}

/************************************************************
1カラムアイテム
************************************************************/
/* item-box レイアウト */
.c-xitem .item-box { display: block; margin: 0 2.53% 2.67%; padding: 1.8%; border: solid 1px #51637b; background-color: #FFF; position: relative; height: 100%; min-height: 100%; }
.c-xitem .item-box a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; }
.c-xitem .item-box:after { display: block; clear: both; height: 0px; visibility: hidden; content: "."; }
.c-xitem .item-box { min-height: 1px; /*IE6、7対策*/ }
.c-xitem .item-box ul.fbox { width: 100%; margin: 0; padding: 0; display: -webkit-box; display: -moz-box; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.c-xitem .item-box ul.fbox li.visual, .c-xitem .item-box ul.fbox li.detail { margin-bottom: 0; position: relative; font-weight: bold; }
.c-xitem .item-box ul.fbox li.visual:first-child, .c-xitem .item-box ul.fbox li.detail:first-child { margin-right: 1.69%; }
.c-xitem .visual { width: 30%; float: left; padding: 0; margin: 0 2% 0 0; }
.c-xitem .detail { float: left; display: block; width: 65%; text-align: justify; border-left: solid 0.13vw #c5bdbd; padding-left: 2%; }

/* item-box コンテンツ */
.c-xitem .visual .new { width: 100%; height: 0; padding-top: 20.8%; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("/tokuten/img/sp/icon_new.png") no-repeat; background-size: cover; display: block; }
.c-xitem .visual .new.not { background: none; }
.c-xitem .visual .detail-img { width: 100%; height: auto; display: block; text-align: center; margin: 0 auto; position: relative; }
.c-xitem .visual .detail-img:before { content: ""; display: block; padding-top: 143%; }
.c-xitem .visual .detail-img .img-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.c-xitem .visual .detail-img img { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.c-xitem .visual .point { width: 100%; bottom: 3%; position: absolute; display: block; color: #ff3c3c; font-size: 3.4vw; text-align: center; line-height: 1.1; }
.c-xitem .visual .point b { font-size: 5vw; }
.c-xitem .visual .point em { font-size: 2.9vw; font-style: normal; }
.c-xitem .visual .point span { color: #000; display: block; }
.c-xitem .detail .detail-icon { margin-bottom: 1.83%; position: relative; height: auto; }
.c-xitem .detail .detail-icon:before { content: ""; display: block; padding-top: 8%; }
.c-xitem .detail .detail-icon .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; font-size: 2.75vw; line-height: 1.37; }
.c-xitem .detail .itemname { margin: 1% 0 3%; position: relative; height: auto; }
.c-xitem .detail .itemname:before { content: ""; display: block; padding-top: 17%; }
.c-xitem .detail .itemname .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; font-size: 4vw; line-height: 1.3; text-decoration: underline; }
.c-xitem .detail .necessary { font-size: 3.3vw; color: #353535; letter-spacing: -0.01em; }
.c-xitem .detail .necessary b { font-size: 3.6vw; background-color: #f94949; color: #fff; padding: 2% 1.7%; display: inline-block; margin-bottom: 3.5%; margin-right: 1%; }
.c-xitem .detail .necessary span { line-height: 1; display: block; padding-top: 1px; padding-bottom: -1px; }
.c-xitem .detail .catchcopy { margin-bottom: 3.5%; position: relative; height: auto; }
.c-xitem .detail .catchcopy:before { content: ""; display: block; padding-top: 12%; }
.c-xitem .detail .catchcopy .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; font-size: 2.75vw; line-height: 1.37; }
.c-xitem .detail .company { margin-bottom: 3.5%; position: relative; height: auto; }
.c-xitem .detail .company:before { content: ""; display: block; padding-top: 11.9%; }
.c-xitem .detail .company .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; font-size: 2.6vw; color: #959595; line-height: 1.37; }
.c-xitem .detail .detail-btn { width: 100%; display: block; }
.c-xitem .detail .detail-btn p { display: inline-block; width: 100%; line-height: 1.7; border-radius: 3px; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; background-image: -webkit-linear-gradient(#ff775b 0%, #ff9c82 100%); background-image: linear-gradient(#ff775b 0%, #ff9c82 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }
.c-xitem .detail .detail-btn b { display: inline-block; position: relative; text-decoration: none; margin: 2%; width: 94.49%; height: 16.9%; border-radius: 3px; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; background-image: -webkit-linear-gradient(#fbf9f9 0%, #dcdcdc 100%); background-image: linear-gradient(#fbf9f9 0%, #dcdcdc 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }
.c-xitem .detail .detail-btn b span { position: relative; display: inline-block; padding: 0 0 0 16px; color: #000; vertical-align: middle; text-decoration: none; font-size: 3.5vw; }
.c-xitem .detail .detail-btn b span::before, .c-xitem .detail .detail-btn b span::after { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
.c-xitem .detail .detail-btn b span::before { left: 4px; box-sizing: border-box; width: 8px; height: 8px; border: 8px solid transparent; border-left: 8px solid #e25933; }

/* c-1item regular-block */
.c-xitem .regular-block { margin-top: -2.9%; margin-bottom: 2.9%; }

/************************************************************
人気ランキング
************************************************************/
#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("tokuten/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
************************************************************/
/* もっとみるボタン */
.moreview { margin: 0 2%; display: inline-block; position: relative; text-decoration: none; width: 96%; border-radius: 5px; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; background-image: -webkit-linear-gradient(#8f8f8f 0%, #c2c2c2 100%); background-image: linear-gradient(#8f8f8f 0%, #c2c2c2 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }
.moreview a { font-size: 4.7vw; color: #000; display: inline-block; position: relative; text-decoration: none; margin: 1%; width: 98%; line-height: 2.5; border-radius: 5px; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; background-image: -webkit-linear-gradient(#fbf9f9 0%, #dcdcdc 100%); background-image: linear-gradient(#fbf9f9 0%, #dcdcdc 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }

/* 中間ページトップリンク */
.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.2%; }
.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("/tokuten/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("/tokuten/img/sp/pagetopanc.png") no-repeat left center; background-size: 12px 9px; -webkit-background-size: 12px 9px; color: #ffffff; padding-left: 17px; }