/*category_set*/
#main_contents {
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    #main_contents {
      width: 127.5rem;
      padding: 4rem 0 18rem !important; } }
  @media screen and (max-width: 767px) {
    #main_contents {
      width: 36rem;
      padding: 4rem 0 8rem !important; } }

/**/
#solution_cont {
  position: relative;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    #solution_cont {
      margin-top: 5rem; } }
  @media screen and (max-width: 767px) {
    #solution_cont {
      margin-top: 3rem; } }

#local_nav {
  position: relative;
  width: 100%; }

#local_nav > div {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; }
  @media screen and (min-width: 768px) {
    #local_nav > div {
      gap: 10px 20px; } }
  @media screen and (max-width: 767px) {
    #local_nav > div {
      gap: 1rem 2rem; } }

#local_nav a {
  position: relative;
  display: flex;
  align-items: center;
  transition: ease-in-out 0.4s all; }
  @media screen and (min-width: 768px) {
    #local_nav a {
      gap: 10px; } }
  @media screen and (max-width: 767px) {
    #local_nav a {
      gap: 1rem; } }

#local_nav a p {
  position: relative;
  transition: ease-in-out 0.4s all;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #local_nav a p {
      line-height: 1.429em;
      font-size: 14px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #local_nav a p {
      line-height: 1.539em;
      font-size: 1.3rem; } }

#local_nav a:hover p {
  color: #CC0000; }

#local_nav a .arrow {
  position: relative;
  display: inline-block;
  transition: ease-out 0.6s all;
  background: #CC0000;
  border-radius: 50%; }
  @media screen and (min-width: 768px) {
    #local_nav a .arrow {
      width: 16px;
      height: 16px; } }
  @media screen and (max-width: 767px) {
    #local_nav a .arrow {
      width: 1.6rem;
      height: 1.6rem; } }

#local_nav a .arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 1px solid;
  border-color: #fff #fff transparent transparent; }
  @media screen and (min-width: 768px) {
    #local_nav a .arrow::after {
      width: 6px;
      height: 6px;
      transform: translate(-3px, -5px) rotate(135deg); } }
  @media screen and (max-width: 767px) {
    #local_nav a .arrow::after {
      width: 0.6rem;
      height: 0.6rem;
      transform: translate(-0.3rem, -0.5rem) rotate(135deg); } }

#solution_list {
  position: relative;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    #solution_list {
      margin-top: 5rem;
      gap: 3rem; } }
  @media screen and (max-width: 767px) {
    #solution_list {
      margin-top: 4rem;
      gap: 4rem; } }

.solution_box {
  position: relative;
  border: #D9D9D9 1px solid; }

.solution_set {
  position: relative;
  padding: 0;
  width: 100%;
  display: flex;
  background: #F4F4F4; }
  @media screen and (min-width: 768px) {
    .solution_set {
      justify-content: space-between;
      align-items: stretch; } }
  @media screen and (max-width: 767px) {
    .solution_set {
      flex-direction: column; } }

.solution_set figure {
  position: relative;
  display: block;
  padding: 0;
  margin: 0; }
  @media screen and (min-width: 768px) {
    .solution_set figure {
      width: 41rem;
      min-height: 24rem; } }
  @media screen and (max-width: 767px) {
    .solution_set figure {
      width: 100%;
      height: 21rem; } }

@media screen and (min-width: 768px) {
  .solution_set figure::after {
    content: "";
    position: absolute !important;
    width: 100%;
    height: 100%;
    border: #CC0000 0rem solid;
    top: 0;
    left: 0;
    transition: ease-out 0.4s all;
    opacity: 0; } }

/*
.solution_set:hover figure::after{
	@include mq(pc) {
	border: $link_color divceil(6, 10, rem) solid;
		opacity: 1;	
	}
}
*/
.solution_set .ttl_box {
  position: relative;
  display: block; }
  @media screen and (min-width: 768px) {
    .solution_set .ttl_box {
      width: 84rem;
      min-height: 24rem;
      padding-top: 4rem;
      padding-bottom: 4rem;
      padding-right: 4rem; } }
  @media screen and (max-width: 767px) {
    .solution_set .ttl_box {
      width: 100%;
      padding: 2.5rem 2rem; } }

.solution_set .ttl_box div {
  position: relative;
  display: flex; }
  @media screen and (min-width: 768px) {
    .solution_set .ttl_box div {
      align-items: center;
      gap: 2rem;
      padding-bottom: 2rem; } }
  @media screen and (max-width: 767px) {
    .solution_set .ttl_box div {
      flex-direction: column;
      gap: 1rem;
      padding-bottom: 2rem; } }

.solution_set .ttl_box div span {
  position: relative;
  display: inline-block;
  transition: ease-in-out 0.4s all;
  letter-spacing: 0.00em;
  color: #CC0000;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .solution_set .ttl_box div span {
      line-height: 1.539em;
      font-size: 13px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .solution_set .ttl_box div span {
      line-height: 1em;
      font-size: 1.2rem; } }

.solution_set .ttl_box div p {
  position: relative;
  transition: ease-in-out 0.4s all;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .solution_set .ttl_box div p {
      line-height: 1em;
      font-size: 20px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .solution_set .ttl_box div p {
      line-height: 1em;
      font-size: 1.8rem; } }

/*
.solution_set:hover .ttl_box div p{
      @include mq(pc) {
    	color: $link_color;
	}
}
*/
#solution_list .list {
  position: relative;
  width: 100%;
  display: flex;
  background: #fff;
  margin: 0; }
  @media screen and (min-width: 768px) {
    #solution_list .list {
      flex-wrap: wrap;
      padding: 4rem 4rem;
      gap: 0 2.5rem; } }
  @media screen and (max-width: 767px) {
    #solution_list .list {
      flex-direction: column;
      padding: 2.5rem 2rem; } }

#solution_list .list a {
  position: relative;
  display: block;
  background: #fff;
  border-bottom: #D9D9D9 1px solid; }
  @media screen and (min-width: 768px) {
    #solution_list .list a {
      width: 38rem; } }
  @media screen and (max-width: 767px) {
    #solution_list .list a {
      width: 100%; } }

#solution_list .list a:nth-of-type(1) {
  border-top: #D9D9D9 1px solid; }

@media screen and (min-width: 768px) {
  #solution_list .list a:nth-of-type(2),
  #solution_list .list a:nth-of-type(3) {
    border-top: #D9D9D9 1px solid; } }

#solution_list .list a p {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  transition: ease-out 0.6s all;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #solution_list .list a p {
      line-height: 1.375em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      padding: 2rem 4rem 2rem 2rem; } }
  @media screen and (max-width: 767px) {
    #solution_list .list a p {
      line-height: 1em;
      font-size: 1.4rem;
      padding: 2rem 3rem 2rem 1rem; } }

@media screen and (min-width: 768px) {
  #solution_list .list a:hover p {
    color: #CC0000; } }

#solution_list .list a .arrow {
  position: absolute !important;
  transition: ease-out 0.6s all;
  top: 50%; }
  @media screen and (min-width: 768px) {
    #solution_list .list a .arrow {
      margin-top: -5px;
      right: 10px;
      width: 10px;
      height: 10px; } }
  @media screen and (max-width: 767px) {
    #solution_list .list a .arrow {
      margin-top: -0.5rem;
      right: 1rem;
      width: 1rem;
      height: 1rem; } }

#solution_list .list a .arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 2px solid;
  border-color: #CC0000 #CC0000 transparent transparent;
  transform: rotate(45deg);
  width: 100%;
  height: 100%; }