@charset "utf-8";


/*右メニュー*/
/*[tag]3Fメニュー*/
.rightMenuArea {
  position: relative;
}

.rightMenuArea p.categoryName a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: #14A83B;
  border-top: 1px solid #14A83B;
  border-bottom: 1px solid #14A83B;
  font-size: 1.2rem;
}

.rightMenuArea ul.f3Menu {
  padding-left: 0;
}

.rightMenuArea ul.f3Menu.current {
  display: block;
}

.rightMenuArea ul.f3Menu li {
  display: block;
  border-bottom: 1px solid #ccc;
}

.rightMenuArea ul.f3Menu li a {
  color: #333;
  font-size: 1rem;
  display: block;
  padding: 8px 10px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.rightMenuArea ul.f3Menu li a:hover {
  text-decoration: none;
  background: #ccc;
}

.rightMenuArea ul.f3Menu li a.current {
  background: #14A83B;
  color: #fff !important;
}

.rightMenuArea ul.f3Menu li a span.new {
  font-size: 10px;
  font-size: 0.6rem;
  color: #c00;
  display: inline-block;
  padding-left: .5em;
}

.rightMenuArea ul.f3Menu li span.with_c {
  position: relative;
  color: #333;
  display: block;
  cursor: pointer;
  padding: 8px 20px 8px 10px;
}

/* 横線 */
.rightMenuArea ul.f3Menu li span.with_c::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 2px;
  background: #00a73c;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}

/* 縦線（＋） */
.rightMenuArea ul.f3Menu li span.with_c::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 18px;
  background: #00a73c;
  right: calc(5% + 8px);
  top: 50%;
  transform: translateY(-50%) scaleY(1);
  transform-origin: center;
  transition: transform .35s ease-in-out;
}

/* 開いているとき（－） */
.rightMenuArea ul.f3Menu li:is(.is-open, .active) > span.with_c::before {
  transform: translateY(-50%) scaleY(0);
}

.rightMenuArea ul.f3Menu li span.with_d {
  position: relative;
  font-size: 12px;
  font-size: 0.8rem;
  color: #333;
  display: block;
  cursor: pointer;
  padding: 8px 20px 8px 10px;
}

.rightMenuArea ul.f3Menu li span.with_d:after {
  width: 20px;
  content: "\f0fe";
  font-family: FontAwesome;
  color: #14A83B;
  display: inline;
  position: absolute;
  right: 5%;
  top: 30%;
}

.rightMenuArea ul.f3Menu ul.f4,
.rightMenuArea ul.f3Menu ul.f5 {
  display: none;
  padding-left: 0.8rem;
}

.rightMenuArea ul.f3Menu li.with_f4.is-open ul.f4 {
  display: block;
}

.rightMenuArea ul.f3Menu li.with_f4.is-open span.with_c {
  font-weight: bold;
}

.rightMenuArea ul.f3Menu li.with_f5.is-open ul.f5 {
  display: block;
}

.rightMenuArea ul.f3Menu li.with_f5.is-open span.with_d {
  font-weight: bold;
}

.rightMenuArea ul.f3Menu li.with_f4.is-open span.with_c:after,
.rightMenuArea ul.f3Menu li.with_f4.active span.with_c:after {
  content: "\f068";
}

.rightMenuArea ul.f3Menu li.with_f5.is-open span.with_d:after,
.rightMenuArea ul.f3Menu li.with_f5.active span.with_d:after {
  content: "\f146";
}

.rightMenuArea ul.f4 li {
  border-bottom: none;
  font-size: 12px;
  font-size: 0.8rem;
  padding-left: 0;
}

.rightMenuArea ul.f5 li {
  border-bottom: none;
  font-size: 11px;
  font-size: 0.7rem;
  margin-left: 0.5em;
}

.rightMenuArea ul.f5 li.typeTitle {
  font-weight: bold;
  padding: 0.5em 1.8em;
}

.rightMenuArea ul.f5 li.typeTitle:before {
  content: "<";
}

.rightMenuArea ul.f5 li.typeTitle:after {
  content: ">";
}

/*[tag]SP*/
.spMenu {
  width: 35px;
  height: 35px;
  display: block;
  position: absolute;
  background: #14A83B;
  border: 2px solid #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.spMenu i {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 3px;
  background: #fff;
  transition: background 0.5s;
  position: relative;
  left: 5px;
  top: 14px;
}

.spMenu i:before, .spMenu i:after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 3px;
  background: #fff;
  position: absolute;
  transform: rotate(0deg);
  transition: all 0.3s !important;
}

.spMenu i:before {
  transform: translateY(8px);
}

.spMenu i:after {
  transform: translateY(-8px);
}

.is-open .spMenu i {
  background: transparent;
}

.is-open .spMenu i:after {
  transform: translateY(0px) rotate(-45deg);
}

.is-open .spMenu i:before {
  transform: translateY(0px) rotate(45deg);
}

#sideContents .spMenu {
  right: 15px;
  top: 20px;
  z-index: 500;
}

.rightMenuArea .spMenu {
  display: none;
}

.rightMenuArea .spCloseMenu {
  font-size: 18px;
  font-size: 1.4rem;
  background: #ccc;
  color: #fff;
  display: inline-block;
  padding: 10px;
  display: none;
}
.rightMenuArea .rankingBox .rankingTitle {
  text-align: center;
  display: block;
}