@charset "Shift_JIS";


/*===========================
ここから基本CSS
=============================*/
.home_category a,
.connection a{text-decoration:none;}
.home_category a:active *,
.connection a:active *{opacity:0.9;}
.home_category img,
.connection img{width:100%;}
.home_category .pc_none,
.connection .pc_none{display:none !important;}
.home_category { margin: 0 auto 50px; width:900px;}

/* 最初にbuttonタグのCSSをリセット */
button {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	appearance: none;
  }
  
  .tab-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
  }
  
  .kc_box {
	background: #fff;
	border-radius: 10px;
  }
  .kc_img {
	width: 23%;
	padding: 0 0 0 7px;
  }

  .kc_box__head {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	transition: border-radius 0.5s;
	padding: 10px 0;
	border-bottom: dashed 1px;
  }
  
  .kc_box__head.is-open {
	border-radius: 10px 10px 0 0;
  }
  
  .kc_box__head-icon {
	min-width: 65px;
	padding: 25px 0;
	background: #333;
	color: #fff;
	border-radius: 10px 0 0 10px;
	transition: border-radius 0.5s;
  }
  
  .kc_box__head.is-open .kc_box__head-icon {
	border-radius: 10px 0 0 0;
  }
  
  .kc_box__head-text {
	display: block;
	text-align: left;
	padding: 5px ;
	font-size: 18px;
  }
  
  .kc_box__head.many::before,
  .kc_box__head.many::after {
	position: absolute;
	top: 50%;
	right: 2%;
	display: inline-block;
	content: "";
	width: 14px;
	height: 2px;
	margin-top: -2px;
	background-color: #333;
  }
  
  .kc_box__head.mono::after {
    transform: translateY(0.05em) rotate(-45deg);
    position: absolute;
    top: 44%;
    right: 3%;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid #333;
    border-right: 2px solid #333;
    content: '';
  }

  .kc_box__head.many::after {
	transform: rotate(90deg);
	transition: transform 0.5s;
  }
  
  .kc_box__head.many.is-open::after {
	transform: rotate(0deg);
  }
  
  .kc_box__body {
	display: none;
  }
  .kc_box_title {
    font-size: 18px;
    margin: 0 3% 1%;
    border: solid 1px #333;
    padding: 2px 30px;
    border-radius: 50px;
    display: inline-block;
  }
  .kc_box_name {
    font-size: 18px;
    margin-left: 3%;
    border-left: solid 5px #333;
    padding-left: 7px;
  }
  .kc_box_col_1 {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 15px;
	padding-block: 15px;
	/* background-color: #eee; */
  }

  .kc_box_col_2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	padding: 10px 0 20px;
	/* background-color: #eee; */
  }
  .kc_box_col_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 10px 0 20px;
    /* background-color: #eee; */
  }
  .kc_box_col_4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 10px 0 20px;
    /* background-color: #eee; */
  }
 .kc_box_col_1 a,
 .kc_box_col_2 a,
 .kc_box_col_3 a,
 .kc_box_col_4 a {
	position: relative;
  }

  .kc_box_col_2 a:hover::after {
    right: 5%;
  }

  .kc_box__a-icon {
	min-width: 50px;
	text-align: center;
  }
  
  .kc_box_col_1 .kc_box__a-text {
	display: block;
	padding: 0px 15px;
	font-size: 22px;
  }

  .kc_box_col_1 .kc_box__a-text .mini{
	padding: 0px 20px;
	font-size: 15px;
  }

  .kc_box_col_2 .kc_box__a-text,
  .kc_box_col_3 .kc_box__a-text,
  .kc_box_col_4 .kc_box__a-text {
	display: block;
	padding: 0px 30px;
	font-size: 15px;
  }

  .kc_box_col_1 .kc_box__a-text::after {
	position: absolute;
    bottom: calc(50% - 5px);
    right: 45%;
    width: 8px;
    height: 8px;
    border-right: solid 2px #222222;
    border-bottom: solid 2px #222222;
    transform: rotate(-45deg);
    transition: 0.2s all;
    content: "";
  }

  .kc_box_col_1 .kc_box__a-text:hover::after {
    right: 43%;
  }

  .kc_box_col_2 .kc_box__a-text::after,
  .kc_box_col_3 .kc_box__a-text::after,
  .kc_box_col_4 .kc_box__a-text::after {
	position: absolute;
    bottom: calc(50% - 5px);
    right: 10%;
    width: 8px;
    height: 8px;
    border-right: solid 2px #222222;
    border-bottom: solid 2px #222222;
    transform: rotate(-45deg);
    transition: 0.2s all;
    content: "";
  }

  .kc_box_col_2 .kc_box__a-text:hover::after,
  .kc_box_col_3 .kc_box__a-text:hover::after,
  .kc_box_col_4 .kc_box__a-text:hover::after {
    right: 7%;
  }
  
  .current img{
	width: 108%;
  }

  .current {
	background-color: #eeeeee;
	border-radius: 5px;
  /* margin-top: 24px; */
  }

  /* ==================================================
アイコン
================================================== */
.kc_box__body .point_icon {
  content: "";
  width: auto;
  height: auto;
  padding: 2px 10px;
  position: absolute;
  top: -20%;
  right: 17%;
  background-color: #dc1d22d4;
  color: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  z-index: 1;
  text-align: center;
}
.kc_box__body .point_icon_big {
  content: "";
  width: auto;
  height: auto;
  padding: 2px 10px;
  position: absolute;
  top: 0%;
  right: 50%;
  background-color: #dc1d22d4;
  color: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  z-index: 1;
  text-align: center;
}
.kc_box__body .point_icon span {
  font-size: 13px;
  padding-top: 15px;
}

.kc_box__body .coupon_icon {
  content: "";
  width: 82px;
  height: 82px;
  line-height: 8px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #dc1d22d4;
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  z-index: 1;
  text-align: center;
}
.kc_box__body .coupon_icon span {
  font-size: 20px;
  margin-top: -22px;
}
.kc_box__body .coupon_txt {
  font-size: 27px;
  padding-top: 8px;
}