@charset "UTF-8";

/*============================================

records.css

============================================*/

/* 共通
------------------------------------------- */
/* リード文 */
.records_list_lead {
  font-size: 1.4rem;
  margin: 20px auto;
}

/* --- リスト --- */
.records_list_area {
  border-top: #e2e2e2 1px solid;
  border-left: #e2e2e2 1px solid;
  box-sizing: border-box;
  display:flex;
  flex-wrap: wrap;
}
.records_list_item {
  border-right: #e2e2e2 1px solid;
  border-bottom: #e2e2e2 1px solid;
  box-sizing: border-box;
  overflow: hidden;
}
.records_list_itemnum {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 35px 5px 0;
}
.records_list_itembusiness {
  display: block;
  font-size: 1.2rem;
  margin: 0 5px;
}

/* リストリンク */
.records_list_anchor {
  border: #fff 2px solid;
  box-sizing: border-box;
  display: block;
  padding: 30px 10px 10px;
  position: relative;
  width: 100%;
  height: 100%;
}
.records_list_anchor:hover {
  border: #f5be00 2px solid;
}

/* 3カラム */
.records_col3 {
  width: 236px;
  height: auto;
}
.records_col3:nth-of-type(1),
.records_col3:nth-of-type(3n+1) {
  width: 236px;
}
.records_col3 .records_list_thumb { width: 215px; height: auto; }

/* 2カラム */
.records_col2 {
  width: 353px;
  height: 300px;  
}
.records_col2:nth-of-type(odd) {
  border-left: #e2e2e2 1px solid;
  width: 354px;
}
.records_col2:nth-of-type(1),
.records_col2:nth-of-type(2) {
  border-top: #e2e2e2 1px solid;
}
.records_col2 .records_list_anchor {
  padding: 20px;
}
.records_col2 .records_list_thumb { width: 314px; height: auto; }

/* 1カラム */
.records_col1 {
  width: 708px;
  height: 540px;
  border-left: #e2e2e2 1px solid;  
}
.records_col1:nth-of-type(1) {
  border-top: #e2e2e2 1px solid;
}
.records_col1 .records_list_anchor {
  padding: 20px;
}
.records_col1 .records_list_thumb { width: 668px; height: auto; }
.records_col1 .records_list_itembusiness,
.records_col1 .records_list_itemnum { font-size: 1.3rem; }

/* お申込みボタン */
.records_list_order {
  font-size: 1.8rem;
  margin: 30px 0 20px;
  text-align: center;
}
.order_btn a {
  background: #f84747;
  display: block;
  padding: 10px 0;
}
.order_btn span {
  background: url(../../../main/pc/img/records/w_c_arw15.png) no-repeat 100% 50%;
  color: #fff;
  padding-right: 30px;
}


/* --- 詳細 --- */
.records_detail_ttl {
  font-size: 2rem;
  font-weight: bold;
  float: left;
}
.records_detail_body {
  margin-top: 10px;
}
.records_detail_ready {
  float: left;
  width: 410px;
}
.records_detail_data {
  float: right;
  width: 280px;
}
.records_detail_data_ttl {
  color: #ff6600;
}
.records_detail_list {
  border-top: #dadada 1px solid;
  display: table;
  width: 100%;
}
.records_detail_list_header,
.records_detail_list_body {
  box-sizing: border-box;
  display: table-cell;
  padding: 8px 0;
  vertical-align: top;
}
.records_detail_list_header {
  font-weight: bold;
  width: 8em;
}
.records_detail_list_item {
  border-top: #dadada 1px dotted;
  display: block;
  min-height: 1.3em;
  padding: 5px 0;
}
.records_detail_list_item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* サムネイル */
.records_detail_thumb {
  border: #dadada 1px solid;
  margin-bottom: 20px;
}
.records_detail_thumb img {
  width: 408px;
  height: auto;
}
.records_detail_thumb.full img {
  width: 708px;
  height: auto;
}
.records_detail_thumb_pager3 {
  font-size: 0;
  margin: -10px auto 20px;
}
.records_slide_thumb3 {
  border: #dadada 1px solid;
  width: 127px;
  height: auto;
  margin: 0 0 10px 11px;
}
.records_detail_thumb_pager3 a:nth-of-type(1) .records_slide_thumb3,
.records_detail_thumb_pager3 a:nth-of-type(3n+1) .records_slide_thumb3 { margin-left: 0; }
.records_slide_thumb4 {
  border: #dadada 1px solid;
  width: 195px;
  height: auto;
  margin: 0 0 15px 15px;
}
.records_detail_thumb_pager4 a:nth-of-type(odd) .records_slide_thumb4 { margin-left: 0; }

/* 詳細アンカー */
.records_detail_anchor{
  margin: 30px 0 60px;
}
.records_detail_nextpage,
.records_detail_order {
  float: left;
  font-size: 1.6rem;
  text-align: center;
  width: 345px;
}
.records_detail_nextpage {
  margin-right: 20px;
}
.records_detail_nextpage a,
.records_detail_order a {
  display: block!important;
  padding: 10px 0!important;
}


/* ロゴデザイン一覧
------------------------------------------- */

.clearfix > .records_list_count { float: left; padding-top: 16px; }

.records_list_thumb_logo {
  width: 100%;
  margin-bottom:20px;
}
.records_list_thumb_logo img {
  width: 100%;
}

/* ソート */
.sort_area {
  background-color: #f5f5f5;
  margin: 20px auto;
}
.sort_block { 
  border-top: #cbcbcb 1px solid;
  padding: 10px;
}
.sort_block:first-child { border-top: 0; }
.sort_ttl,
.sort_item {
  display: table-cell;
  padding: 0 5px;
  vertical-align: middle;
}
.sort_item:last-child { vertical-align: bottom; }
.sort_ttl {
  font-size: 1.4rem;
  padding-left: 10px;
  padding-right: 10px;
}
.sort_ttl.industry {
  width: 200px;
}
.search_ico {
  display: inline-block;
  line-height: 20px;
  background: url(../img/icon_search.png) no-repeat 0 50%;
  padding: 1px 0 1px 30px;
}
.term_ico {
  display: inline-block;
  line-height: 20px;
  background: url(../img/icon_term.png) no-repeat 0 50%;
  padding: 1px 0 1px 30px;
}
.sort_plan_item {
  background-color: #fff;
  border: #ccc 1px solid;
  cursor: pointer;
  display: block;
  padding: 8px 15px;
}
.sort_plan_item.current { color: #fff; font-weight: bold; }

.sort_term_ttl {
  font-size: 1.2rem;
  font-weight: bold;
}
.sort_select {
  padding: 7px 10px;
  min-width: 9.5rem;
}

/* LIKE */
.like {
  background: url(../img/like_hover.png) no-repeat 0 0;
  position: absolute;
  top: -2px;
  left: -2px;
  display: none;
}
.records_list_anchor:hover .like {
  display: block;
}
.like:hover {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-1px,0);
  }
}
.like:hover img,
.like.liked img {
  opacity: 0;
}
.like.liked {
  background: url(../img/liked.png) no-repeat 0 0;
  display: block;
}
.like.liked:hover {
  opacity: 0.7;
  -webkit-animation: none 0;
  animation: none 0;
}

.like_count a { 
  background: #fe81a1;
  display: block;
  float: right;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 8px 20px;
}
.like_count .icon_like {
  background: url(../img/icon_like.png) no-repeat 0 3px;
  color: #fff;
  padding-left: 20px;
}
.like_num {
  color: #fff;
  padding-left: 0.5em;
}
.like_btn {
  background: #f8f8f8;
  border: #ccc 1px solid;
  display: block;
  padding: 6px 0;
  text-align: center;
}
.like_btn .icon_like {
  display: inline-block;
  line-height: 12px;
  background: url(../img/icon_like_b.png) no-repeat 0 50%;
  padding-left: 20px;
}
.like_btn.liked {
  background-color: #fe81a1;
  border-color: #fe81a1;
  color: #fff;  
}
.like_btn.liked .icon_like {
  background-image: url(../img/icon_like.png);
}

/* fix申し込みバナー */
.fix_order_area {
  background: rgba(0,0,0,0.7);
  box-sizing: border-box;
  padding: 12px 0;
  position: fixed;
  bottom: -500px;
  left: 0;
  width: 100%;
  transition: bottom 0.5s 0s;
}
.fix_order_area.active {
  bottom: 0;
}
.fix_order_bnr {
  box-sizing: border-box;
  display: table;
  margin: 0 auto;
  padding: 3px;
  width: 770px;
}
.fix_order_ttl {
  color: #fff;
  display: table-cell;
  font-size: 1.8rem;
  padding: 1em;
  text-align: center;
  vertical-align: middle;
  width: 7em;
}
.fix_order_body {
  background: #fff;
  display: table-cell;
  padding: 15px 15px 13px;
}
.fix_order_data,
.fix_order_price,
.fix_order_btn {
  display: block;
  float: left;
  width: 32.9%;
}
.fix_order_data_body {
  display: block;
  font-size: 1.5rem;
}
.fix_order_data_body:nth-of-type(2) {
  margin-top: 10px;
}
.fix_order_data_ttl {
  color: #fff;
  display: inline-block;
  font-size: 1.3rem;
  margin-right: 5px;
  text-align: center;
  padding: 0.2em 0;
  width: 5em;
}
.fix_order_price_copy {
  color: #e86e56;
  display: block;
}
.fix_order_price_num {
  font-size: 40px;
  line-height: 1;
}
.fix_order_price_yen {
  font-size: 20px;
  line-height: 1;
}
.fix_order_btn {
  text-align: center;
  background: #f84747;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.5rem;
  padding: 10px 0 ;
}
.fix_order_btn span {
  background: url(../../../main/pc/img/records/w_c_arw15.png) no-repeat 100% 100%;
  padding-right: 20px;
}
.fix_order_bnr.logo .fix_order_price_copy {
  font-size: 1.15rem;
  line-height: 1.2;
}
.fix_order_bnr.logo .fix_order_price_num {
  font-size: 34px;
}


/* 詳細 */
.records_detail_like {
  float: right;
  font-size: 1.4rem;
  font-weight: bold;
  width: 130px;
}
.records_message_ttl {
  font-size: 2.2rem;
  margin-bottom: 20px;
}
.records_message_ttl span {
  background: #f5be00;
  color: #fff;
  display: inline-block;
  margin-right: 5px;
  padding: 3px 6px;
}
.records_message_area {
  background: #fffcf2;
  border: #dfd9c6 1px solid;
  margin-top: 20px;
  padding: 20px;
}
.records_message_body {
  float: left;
  font-size: 1.4rem;
  width: 450px;
}
.records_message_img {
  border: #d7d7d7 1px solid;
  float: right;
}
.records_message_img img {
  width: 170px;
  height: auto;
}
.records_message_staff {
  border: #8bb25b 1px solid;
  display: table;
  margin-top: 20px;
  width: 100%;
}
.records_message_staff_ttl {
  background: #8bb25b;
  box-sizing: border-box;
  color: #fff;
  display: table-cell;
  font-size: 1.6rem;
  padding: 20px 0;
  text-align: center;
  vertical-align: middle;
  width: 160px;
}
.records_message_staff_ttl .icon_message {
  background: url(../../../main/pc/img/records/icon_message.png) no-repeat 50% 0;
  display: inline-block;
  padding-top: 40px;
}
.records_message_staff_body {
  background: #fff;
  display: table-cell;
  font-size: 1.4rem;
  padding: 20px;
  vertical-align: middle;
}

/* 詳細アンカー */
.records_detail_nextpage span {
  background: url(../../../main/pc/img/records/logo_c_arw16.png) no-repeat 100% 50%;
  padding-right: 30px;
}


/* お客様の声
------------------------------------------- */
.voices_lead {
  font-size: 1.4rem;
}
.voices .records_list_note {
  margin-top: 20px;
}

/* リスト */
.voices_list_area {
  border-bottom: #d7d7d7 1px solid;
}
.voices_list_item {
  border-top: #d7d7d7 1px solid;
}
.voices_list_anchor {
  display: table;
  padding: 20px 0;
  width: 100%;
}
.voices_list_anchor:hover {
  background: #fffbf3;
}
.voices_list_thumb {
  display: table-cell;
  vertical-align: top;
  width: 172px;
}
.voices_list_thumb img {
  width: 170px;
  height: auto;
  border: #d7d7d7 1px solid;  
}
.voices_list_body {
  display: table-cell;
  font-size: 1.2rem;
  padding: 0 0 2em 20px;
  position:relative;
  vertical-align: top;
}
.voices_list_footer {
  display: block;
  position: absolute;
  text-align: right;
  bottom: 0;
  right: 0;
}
.voices_list_plan {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0.5em;
  padding: 0.2em 0.5em;
}


/* 名刺
------------------------------------------- */
/* リスト */
#namecard .records_list_anchor:hover {
  border-color: #03a9f4;
}

/* 次のページ */
#namecard .records_list_nextpage span,
#namecard .records_detail_nextpage span {
  background-image: url(../../../namecard/pc/img/records/namecard_c_arw16.png);
}

/* テキスト */
.records_detail_data_ttl.namecard { color: #03a9f4; }
#namecard .records_detail_list_body a { color: #03a9f4; text-decoration: underline; }


/* 封筒
------------------------------------------- */
/* リスト */
#envelope .records_list_anchor:hover {
  border-color: #96d228;
}

/* 次のページ */
#envelope .records_list_nextpage span,
#envelope .records_detail_nextpage span {
  background-image: url(../../../envelope/pc/img/records/envelope_c_arw16.png);
}

/* テキスト */
.records_detail_data_ttl.envelope { color: #89be28; }
#envelope .records_detail_list_body a { color: #89be28; text-decoration: underline; }


/* ウェブサイト
------------------------------------------- */
/* リスト */
#web .records_list_anchor:hover {
  border-color: #fa463c;
}

/* 次のページ */
#web .records_list_nextpage span,
#web .records_detail_nextpage span {
  background-image: url(../../../web/pc/img/records/web_c_arw16.png);
}

/* テキスト */
.records_detail_data_ttl.web { color: #fa463c; }
#web .records_detail_list_body a { color: #fa463c; text-decoration: underline; }

/* 詳細表 */
#web .records_detail_data_ttl { font-size: 1.5rem; }
#web .records_detail_list_header,
#web .records_detail_list_body { padding: 4px 0; }
#web .records_detail_list_item { padding: 2px 0; }
#web .records_detail_data { border-bottom: 1px solid #dadada; }

#web .records_detail_body { margin-bottom: 20px; }

/* パンフレット
------------------------------------------- */
/* リスト */
#pamphlet .records_list_anchor:hover {
  border-color: #fa463c;
}

/* 次のページ */
#pamphlet .records_list_nextpage span,
#pamphlet .records_detail_nextpage span {
  background-image: url(../../../pamphlet/pc/img/records/pamphlet_c_arw16.png);
}

/* テキスト */
.records_detail_data_ttl.pamphlet { color: #fa463c; }
#pamphlet .records_detail_list_body a { color: #fa463c; text-decoration: underline; }

/* 詳細表 */
#pamphlet .records_detail_data_ttl { font-size: 1.5rem; }
#pamphlet .records_detail_list_header,
#pamphlet .records_detail_list_body { padding: 4px 0; }
#pamphlet .records_detail_list_item { padding: 2px 0; }
#pamphlet .records_detail_data { border-bottom: 1px solid #dadada; }

#pamphlet .records_detail_body { margin-bottom: 20px; }


/* ショップカード
------------------------------------------- */
/* リスト */
#shopcard .records_list_anchor:hover {
  border-color: #fa8200;
}

/* 次のページ */
#shopcard .records_list_nextpage span,
#shopcard .records_detail_nextpage span {
  background-image: url(../../../shopcard/pc/img/records/shopcard_c_arw16.png);
}

/* テキスト */
.records_detail_data_ttl.shopcard { color: #fa8200; }
#shopcard .records_detail_list_body a { color: #fa8200; text-decoration: underline; }


/* ポケットホルダー
------------------------------------------- */
/* リスト */
#folder .records_list_anchor:hover {
  border-color: #a064fa;
}

/* 次のページ */
#folder .records_list_nextpage span,
#folder .records_detail_nextpage span {
  background-image: url(../../../folder/pc/img/records/folder_c_arw16.png);
}

/* テキスト */
.records_detail_data_ttl.folder { color: #a064fa; }
#folder .records_detail_list_body a { color: #a064fa; text-decoration: underline; }

/* 詳細表 */
#folder .records_detail_list_header,
#folder .records_detail_list_body { padding: 4px 0; }
#folder .records_detail_list_item { padding: 2px 0; }
#folder .records_detail_data { border-bottom: 1px solid #dadada; }

#folder .records_detail_body { margin-bottom: 20px; }


.rec_detail_btn {
  margin-top: 30px;
}
.rec_detail_btn a {
  background-color: #5fba3b;
  padding: 1em 0;
  display: block;
  color: #fff;
}
.rec_detail_btn .arw {
  display: inline-block;
  padding-right: 1.6em;
  line-height: 2.2rem;
  background-image: url(../img/c_arw_l.png);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: auto 1em;
}