@charset "utf-8";
/* CSS Document */

header {
  position: static;
}
.slick-slide {
  margin: 0px 20px;
  opacity: 1 !important;
  margin: 0 8px;
  border: 1px solid transparent !important;
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-slide img {
  width: 100%;
}
.slick-prev:before, .slick-next:before {
  color: black;
  opacity: 1 !important;
}
.slick-prev:hover::before, .slick-next:hover::before {
  opacity: .8 !important;
}
.slick-active {
  opacity: .5;
}
.slick-current {
  opacity: 1;
}
.inner.innerwide.horizon {
  max-width: inherit;
  padding: 0 !important;
}
.mainvisual .title {
  margin: 0 auto;
  height: 240px;
}
@media screen and (max-width: 680px) {
.mainvisual .title {
	height: 400px;
}
}
#contents .mainvisual .title h1 {
	font-size: calc(2.2em + 1vw);
	margin-top: 80px;
	position: relative;
}
@media screen and (max-width: 680px) {
#contents .mainvisual .title h1 {
	margin-top: 3em;
}
}
#contents .mainvisual .title h1::after {
	content: "";
	background-image: url("../img/icon-idea.png");
	width: 120px;
	height: 120px;
	display: block;
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	top: -105px;
	left: calc(50% - 60px);
	transform: rotate(0deg);
}
#contents .mainvisual .title h2 {
  font-size: calc(1em + .4vw);
  margin-top: 0;
  font-weight: normal;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 1.3;
}
@media screen and (max-width: 680px) {
#contents .mainvisual .title h2 {
	font-size: calc(1.1em + .4vw);
	text-align: left;
	padding: 0 20px;
	line-height: 1.5;
}
}
#slickarea {
  background-color: #f1f8ff;
  display: none;
}
.column_set {
	padding: 15px 10px 20px 10px;
}
@media screen and (max-width: 680px) {
.column_set {
	width: 90%;
	margin: 0 auto;
}
}
.column_set ul.flexdiv {
  gap: 0;
  max-width: inherit;
  padding: 0;
}
.column_set ul.flexdiv li {
	padding: 1%;
	width: 50%;
	background-color: transparent;
	overflow: hidden;
	max-width: 33.3%;
}
@media screen and (min-width: 681px) and (max-width: 1024px) {
.column_set ul.flexdiv li {
	max-width: 50%;
}
}
@media screen and (max-width: 680px) {
.column_set ul.flexdiv li {
	max-width: 100%;
	width: 100%;
	padding: 0 0 20px 0;
}
}
.column_set ul.flexdiv li a {
  position: relative;
  display: block;
  align-items: center;
  justify-content: flex-start;
  z-index: 1;
  height: 100%;
  text-decoration: none;
  color: #fff;
  padding: 0;
  line-height: 1.3;
  color: #282828;
  min-height: 300px;
  position: relative;
  z-index: 1;
  border: none;
  font-family: 'BIZ UDPGothic', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", sans-serif !important;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  align-items: flex-start;
  overflow: hidden;
  background-color: #ffffff;
}
.column_set ul.flexdiv li a:hover {
  opacity: .8;
}
.column_set .category {
	background-color: #ffffff;
	text-shadow: none;
	color: #ffffff;
	display: block;
	width: 100px;
	padding: 20px 10px 10px;
	line-height: 1.5;
	font-size: calc(.9rem + .2vw);
	border-top: 3px solid rgb(255, 255, 255);
	border-radius: 0;
	z-index: 2;
	left: 20px;
	position: absolute;
	font-weight: bold;
}
@media screen and (max-width: 680px) {
.column_set .category {
	font-size: calc(1.2rem + .2vw);
	height: auto;
	width: 120px;
}
}
.column_set .category span.kw {
  font-size: .76em;
  display: block;
  font-weight: 500;
  line-height: 1;
}
.column_set .category.point {
  background-color: #3366cc;
}
.column_set .category.lottery {
  background-color: #ff7f3d;
}
.column_set .category.dx {
  background-color: #4caf50;
}
.column_set .category.payment {
  background-color: #b9a271;
}
.column_set .category.other {
  background-color: #7F7F7F;
}

.column_set ul.flexdiv li a h3 {
	font-size: calc(1.2rem + .4vw);
	z-index: 2;
	text-align: left;
	background-image: none;
	padding: 150px 5px 20px 20px;
}
@media screen and (max-width: 680px) {
.column_set ul.flexdiv li a h3 {
	font-size: 1.4em;
}
}
.column_set .movmark {
  display: inline-block;
  position: absolute;
  text-align: center;
  right: 0;
  bottom: 0;
  left: inherit;
  top: inherit;
  background-color: rgba(29, 155, 187, .6);
  padding-top: 30px;
  width: 30px;
  z-index: 2;
}
.column_set .movmark::before {
  width: 15px;
  height: 15px;
  animation: inherit;
  border: solid #cff4ff;
  border-width: 0 0 2px 2px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 7px;
  right: 7px;
  left: 0;
  transform: rotate(-135deg);
}
.column_set .movmark span {
  display: none;
}
.column_set ul.flexdiv li a::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: .85;
}
.column_set ul.flexdiv li a.creans_solution::after {
	background-image: url("../img/plan514337895.jpg");
	background-position: center center;
}
.column_set ul.flexdiv li a.hotel_industry::after {
	background-image: url("../../column/img/img_hotel.jpg");
	background-position: center center;
}
.column_set ul.flexdiv li a.datainteg::after {
	background-image: url("../../column/img/data-integration_image.jpg");
	background-position: center center;
}
.column_set ul.flexdiv li a.intro::after {
	background-image: url("../../column/img/bgimage_crm_trim.jpg");
	background-position: center bottom;
}
.column_set ul.flexdiv li a.start::after {
  background-image: url("../../img/bg_support.jpg");
  background-position: center top;
}
.column_set ul.flexdiv li a.creyendo::after {
  background-image: url("../../column/img/lp_creyendo_main_b.jpg");
  background-position: center 50%;
}
.column_set ul.flexdiv li a.camp::after {
  background-image: url("../../service/camp/img/main_trim.jpg");
  background-position: center center;
}
.column_set ul.flexdiv li a.stamprally::after {
  background-image: url("../../column/img/img_shopping_street.jpg");
  background-position: center 90%;
}
.column_set ul.flexdiv li a.stamprally2::after {
  background-image: url("../img/shopping_image.jpg");
  background-position: center 3%;
}
.column_set ul.flexdiv li a.gyosei::after {
  background-image: url("../../column/img/ad_mainimg.png");
  background-position: center 50%;
}
.column_set ul.flexdiv li a.circulars::after {
  background-image: url("../../service/board/img/icon_case_08b.png");
  background-position: center 50%;
}
.column_set ul.flexdiv li a.jichikai::after {
  background-image: url("../../column/img/newlp_kairanban_main2.jpg");
  background-position: center 50%;
}
.column_set ul.flexdiv li a.broadcast::after {
  background-image: url("../../column/img/broadcast_img2.jpg");
  background-position: center 50%;
}
.column_set ul.flexdiv li a.gyosei-dx::after {
  background-image: url("../img/gyosei_dx.png");
  background-position: center 50%;
}
.column_set ul.flexdiv li a.gyosei-dx2::after {
  background-image: url("../img/kairan_dx_main.jpg");
  background-position: center 50%;
}
.column_set ul.flexdiv li a.card::after {
  background-image: url("../../column/img/imagebg_pointcardsystem.jpg");
  background-position: center top;
}
.column_set ul.flexdiv li a.mileage::after {
  background-image: url("../img/mileage_img.jpg");
  background-position: center 90%;
}
.column_set ul.flexdiv li a.instantwin::after {
  background-image: url("../img/instant win_main.jpg");
  background-position: center 90%;
}
.column_set ul.flexdiv li a.p_giftservice::after {
  background-image: url("../../column/img/p_giftservice_img2.jpg");
  background-position: center top;
}
.column_set ul.flexdiv li a.saving::after {
  background-image: url("../../column/img/bg_user_link.jpg");
  background-position: bottom;
}
.column_set ul.flexdiv li a.zero_party::after {
  background-image: url("../img/zeroparty_main01.jpg");
  background-position: center 90%;
}
.column_set ul.flexdiv li a.idpos_ai::after {
  background-image: url("../img/idpos_ai_image.jpg");
  background-position: center 90%;
}
.column_set ul.flexdiv li a.poitomo::after {
  background-image: url("../img/poitomo_main.jpg");
  background-position: center 60%;
}
.column_set ul.flexdiv li a.notes_payable::after {
  background-image: url("../img/notes_payable_img01.jpg");
  background-position: center 50%;
}
.column_set ul.flexdiv li a::after {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out;
  height: 120px;
}

.column_set ul.flexdiv li a p {
	width: 90%;
	display: block;
	/* top: 230px; */
	/* position: absolute; */
	/* color: #ffffff; */
	text-shadow: none;
	margin: 10px 20px;
}
header .header_set {
}
header .header_set .tel{
  display: none;
}
header .inner {
  padding: 0 0 0 10px;
  position: relative;
  max-width: inherit;
}
header img.sitelogo {
  width: 220px;
}
.listarea {
	background-color: #ebe7dc;
	width: 75%;
}
.listarea .column_set .flexdiv {
  justify-content: flex-start;
}
.topicarea, #contents .topicarea ul h2.popularity {
	background-color: #f2f0eb;
}
.topicarea {
	width: 25%;
}
@media screen and (min-width: 681px) and (max-width: 1024px) {
.listarea {
	background-color: #f2f0eb;
	width: 70%;
}
.topicarea {
	width: 30%;
}
}
@media screen and (max-width: 680px) {
.listarea {
	background-color: #f2f0eb;
	width: 100%;
}
.topicarea {
	width: 100%;
	padding: 40px 0;
}
}
.topicarea ul {
	padding: 3%;
}
#contents .topicarea ul h2 {
	margin: 10px 0 25px;
	background-color: #f2f0eb;
	padding: 10px 0;
}
#contents .topicarea ul h2.popularity {
	font-size: calc(1.1rem + .5vw);
	/* background-color: #f2f0eb; */
	border-radius: 3em;
	margin-top: -40px;
	padding: 30px 0 0;
	width: 100%;
	text-shadow: 2px 2px 1px #ffffff, -2px 2px 1px #ffffff, 2px -2px 1px #ffffff, -2px -2px 1px #ffffff;
}
@media screen and (max-width: 680px) {
#contents .topicarea ul h2.popularity {
	font-size: calc(1.8rem + .5vw);
}
}
.topicarea li {
	border-bottom: 1px dotted #757575;
	margin-bottom: 20px;
	background-color: #ffffff;
}
.topicarea ul li h3 {
	font-size: calc(1rem + .4vw);
	padding: 20px 5px 5px 20%;
	border: none;
	text-align: left;
}
@media screen and (max-width: 680px) {
.topicarea ul li h3 {
	font-size: calc(1rem + .8vw);
	padding: 30px 15px 30px 80px;
}
}
.topicarea a {
	text-decoration: none;
	min-height: 90px;
	display: block;
}
.topicarea a:hover {
	opacity: .8;
}
.topicarea .r1 {
  border-left: 6px solid #d2a000;
}
.topicarea .r2 {
  border-left: 6px solid #888888;
}
.topicarea .r3 {
  border-left: 6px solid #a05d27;
}
.topicarea .rank_im {
	width: 12%;
	margin-left: 10px;
	position: absolute;
	top: 15px;
	left: 0;
	max-width: 40px;
}
.topicarea .movmark {
	display: inline-block;
	position: absolute;
	text-align: center;
	right: 0;
	bottom: 0;
	left: inherit;
	top: inherit;
	background-color: rgba(29, 155, 187, .6);
	padding-top: 30px;
	width: 30px;
	z-index: 2;
}
.topicarea .movmark span {
	display: none;
}
.topicarea .movmark::before {
	width: 15px;
	height: 15px;
	animation: inherit;
	border: solid #cff4ff;
	border-width: 0 0 2px 2px;
	content: "";
	display: inline-block;
	margin: auto;
	position: absolute;
	top: 7px;
	right: 7px;
	left: 0;
	transform: rotate(-135deg);
}
.column_set ul.flexdiv li a.incentive::after {
	background-image: url("../../column/img/incentive_main.jpg");
	background-position: center top -30px;
}
.column_set ul.flexdiv li a.ja_crm::after {
	background-image: url("../../column/img/img_ja_crm.jpg");
	background-position: center;
}
.title_small {
	font-size: 0.7em;
}
.column_set ul.flexdiv li a.common_coupon::after {
	background-image: url("../../column/img/coupon_bgimage.jpg");
	background-position: center;
}
.column_set ul.flexdiv li a.cloud_service::after {
	background-image: url("../../column/img/img_global_81337125.jpg");
	background-position: center;
}
.column_set ul.flexdiv li a.action_p::after {
    background-image: url(../../column/img/actionpoint_main.jpg);
	background-position: center;
}