#HeaderArea2,
#FooterArea {
  position: relative;
  z-index: 30 !important; }

#main_contents {
  position: relative; }

/*kv*/
#main_visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important; }
  @media screen and (min-width: 768px) {
    #main_visual {
      height: 100vh;
      min-height: 62.8rem; } }
  @media screen and (max-width: 767px) {
    #main_visual {
      height: 46rem;
      min-height: 46rem;
      max-height: 46rem; } }

#main_visual .slider_set {
  position: relative;
  width: 100% !important;
  z-index: 2; }
  @media screen and (min-width: 768px) {
    #main_visual .slider_set {
      height: 100%; } }
  @media screen and (max-width: 767px) {
    #main_visual .slider_set {
      height: 39rem; } }

/*
#kv_slide_01{
	@include mq(pc) {
	background:url("../img/top/kv_img_1_pc.jpg") center center no-repeat;
	background-size:cover;
    }
    @include mq(sp) {
	background:url("../img/top/kv_img_1_sp.jpg") center center no-repeat;
	background-size:cover;
    }		
}
#kv_slide_02{
	@include mq(pc) {
	background:url("../img/top/kv_img_2_pc.jpg") center center no-repeat;
	background-size:cover;
    }
    @include mq(sp) {
	background:url("../img/top/kv_img_2_sp.jpg") center center no-repeat;
	background-size:cover;
    }		
}
#kv_slide_03{
	@include mq(pc) {
	background:url("../img/top/kv_img_3_pc.jpg") center center no-repeat;
	background-size:cover;
    }
    @include mq(sp) {
	background:url("../img/top/kv_img_3_sp.jpg") center center no-repeat;
	background-size:cover;
    }
}
*/
#main_visual .slider_set figure {
  position: relative;
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #222; }
  @media screen and (min-width: 768px) {
    #main_visual .slider_set figure {
      height: 100% !important; } }
  @media screen and (max-width: 767px) {
    #main_visual .slider_set figure {
      height: 39rem !important; } }

/*
#main_visual .slider_set figure::after{
	content: '';
    position:absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: none;
	left: 0;
	bottom:0;
	@include mq(pc) {
	background:url("../img/top/kv_cover_pc.png") left bottom repeat-x;
	background-size: divceil(360, 10, rem) divceil(360, 10, rem);
    }
    @include mq(sp) {
	background:url("../img/top/kv_cover_sp.png") left bottom no-repeat;
	background-size: 100% divceil(215, 10, rem);
    }
}
*/
#main_visual .kv_ttl {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: #000 !important;*/ }
  @media screen and (min-width: 768px) {
    #main_visual .kv_ttl {
      background: url("../img/top/kv_cover_pc.png") left bottom repeat-x;
      background-size: 36rem 36rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .kv_ttl {
      background: url("../img/top/kv_cover_sp.png") left bottom no-repeat;
      background-size: 100% 21.5rem; } }

#main_visual .kv_ttl .inner {
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start; }
  @media screen and (min-width: 768px) {
    #main_visual .kv_ttl .inner {
      width: 127.5rem;
      padding-bottom: 4rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .kv_ttl .inner {
      width: 36rem;
      padding-bottom: 2rem; } }

#main_visual .kv_ttl a {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    #main_visual .kv_ttl a {
      gap: 1.5rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .kv_ttl a {
      gap: 1rem; } }

#main_visual .kv_ttl a .tag_set {
  position: relative;
  display: flex; }
  @media screen and (min-width: 768px) {
    #main_visual .kv_ttl a .tag_set {
      gap: 1rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .kv_ttl a .tag_set {
      gap: 0.8rem; } }

#main_visual .kv_ttl a .icon_new {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FA000F;
  letter-spacing: 0.00em;
  color: #fff;
  font-weight: 400;
  font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif; }
  @media screen and (min-width: 768px) {
    #main_visual .kv_ttl a .icon_new {
      height: 2.4rem;
      line-height: 1em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/
      padding: 0 1rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .kv_ttl a .icon_new {
      height: 2.2rem;
      line-height: 1em;
      font-size: 1rem;
      padding: 0 1rem; } }

#main_visual .kv_ttl a .tag {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.00em;
  color: #fff;
  border: #fff 1px solid;
  font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans" ,sans-serif;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #main_visual .kv_ttl a .tag {
      height: 2.4rem;
      line-height: 1em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/
      padding: 0 1rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .kv_ttl a .tag {
      height: 2.2rem;
      line-height: 1em;
      font-size: 1rem;
      padding: 0 1rem; } }

#main_visual .kv_ttl a .ttl {
  position: relative;
  letter-spacing: 0.00em;
  transition: ease-out 0.4s all;
  color: #fff;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #main_visual .kv_ttl a .ttl {
      line-height: 1.134em;
      font-size: 30px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #main_visual .kv_ttl a .ttl {
      line-height: 1.182em;
      font-size: 2.2rem; } }

#main_visual .kv_ttl a .sub {
  position: relative;
  letter-spacing: 0.00em;
  transition: ease-out 0.4s all;
  color: #fff;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #main_visual .kv_ttl a .sub {
      line-height: 1.375em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #main_visual .kv_ttl a .sub {
      line-height: 1.572em;
      font-size: 1.4rem; } }

/*
#main_visual .kv_ttl a:hover .ttl,
#main_visual .kv_ttl a:hover .sub{
      @include mq(pc) {
	color: $link_color;
        }	
}
*/
#main_visual .slider_nav {
  position: absolute !important;
  z-index: 5;
  left: 0;
  width: 100%; }
  @media screen and (min-width: 768px) {
    #main_visual .slider_nav {
      bottom: 4rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .slider_nav {
      bottom: 0;
      border-bottom: #D9D9D9 1px solid; } }

#main_visual .slider_nav .inner {
  position: relative;
  display: flex;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    #main_visual .slider_nav .inner {
      width: 127.5rem;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 2rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .slider_nav .inner {
      width: 36rem;
      height: 7rem;
      justify-content: space-between;
      align-items: center;
      gap: 2rem; } }

#main_visual .slider_nav .dots,
#main_visual .slider_nav .prev_next {
  position: relative;
  display: flex;
  justify-content: flex-end; }
  @media screen and (min-width: 768px) {
    #main_visual .slider_nav .dots,
    #main_visual .slider_nav .prev_next {
      gap: 0.6rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .slider_nav .dots,
    #main_visual .slider_nav .prev_next {
      height: 7rem;
      align-items: center;
      gap: 0.6rem; } }

@media screen and (max-width: 767px) {
  #main_visual .slider_nav .prev_next {
    position: absolute !important;
    bottom: 0;
    right: 5rem; } }

#main_visual .slider_nav .dots .dot {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: none;
  cursor: pointer; }
  @media screen and (min-width: 768px) {
    #main_visual .slider_nav .dots .dot {
      width: 4rem;
      height: 1rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .slider_nav .dots .dot {
      width: 4rem;
      height: 1rem; } }

#main_visual .slider_nav .dots .dot::before,
#main_visual .slider_nav .dots .dot::after {
  content: '';
  position: absolute;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  left: 0; }
  @media screen and (min-width: 768px) {
    #main_visual .slider_nav .dots .dot::before,
    #main_visual .slider_nav .dots .dot::after {
      bottom: 0;
      height: 2px; } }
  @media screen and (max-width: 767px) {
    #main_visual .slider_nav .dots .dot::before,
    #main_visual .slider_nav .dots .dot::after {
      bottom: 0;
      height: 2px; } }

#main_visual .slider_nav .dots .dot::before {
  transition: ease-out 0.4s all;
  background: #D9D9D9; }

#main_visual .slider_nav .dots .dot::after {
  background: #CC0000;
  transform: translateX(-100%); }

#main_visual .slider_nav .dots .dot.active::after {
  animation: dot_animation 6s ease forwards; }

#main_visual .slider_nav .dots .dot.paused::after {
  animation-play-state: paused; }

@keyframes dot_animation {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }
#main_visual .slider_nav .prev,
#main_visual .slider_nav .next,
#main_visual .slider_nav .stop_to_go {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: 1px #fff solid;
  cursor: pointer;
  transition: ease-out 0.4s all;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media screen and (min-width: 768px) {
    #main_visual .slider_nav .prev,
    #main_visual .slider_nav .next,
    #main_visual .slider_nav .stop_to_go {
      width: 4rem;
      height: 4rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .slider_nav .prev,
    #main_visual .slider_nav .next,
    #main_visual .slider_nav .stop_to_go {
      width: 3rem;
      height: 3rem; } }

@media screen and (max-width: 767px) {
  #main_visual .slider_nav .stop_to_go {
    border: 1px #222 solid; } }

@media screen and (max-width: 767px) {
  #main_visual .slider_nav .prev,
  #main_visual .slider_nav .next {
    background: #CC0000 !important; } }

#main_visual .slider_nav .stop_to_go {
  border-radius: 50%; }

@media screen and (min-width: 768px) {
  #main_visual .slider_nav .prev:hover,
  #main_visual .slider_nav .next:hover,
  #main_visual .slider_nav .stop_to_go:hover {
    background: #CC0000; } }

#main_visual .slider_nav .prev span,
#main_visual .slider_nav .next span {
  position: relative;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    #main_visual .slider_nav .prev span,
    #main_visual .slider_nav .next span {
      width: 1.2rem;
      height: 1.2rem; } }
  @media screen and (max-width: 767px) {
    #main_visual .slider_nav .prev span,
    #main_visual .slider_nav .next span {
      width: 1rem;
      height: 1rem; } }

#main_visual .slider_nav .prev span::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0.2rem;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 1px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(-135deg);
  width: 100%;
  height: 100%; }

#main_visual .slider_nav .next span::after {
  content: '';
  position: absolute;
  top: 0;
  left: -0.2rem;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 1px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(45deg);
  width: 100%;
  height: 100%; }

#main_visual .slider_nav .stop_to_go span {
  position: relative; }
  @media screen and (min-width: 768px) {
    #main_visual .slider_nav .stop_to_go span {
      width: 1.2rem;
      height: 1.4rem;
      background: url("../img/top/icon_stop.svg") right center no-repeat;
      background-size: contain; } }
  @media screen and (max-width: 767px) {
    #main_visual .slider_nav .stop_to_go span {
      width: 1.2rem;
      height: 1.4rem;
      background: url("../img/top/icon_stop_k.svg") right center no-repeat;
      background-size: contain; } }

@media screen and (min-width: 768px) {
  #main_visual .slider_nav .stop_to_go.paused span {
    width: 1.2rem;
    height: 1.4rem;
    background: url("../img/top/icon_play.svg") right center no-repeat;
    background-size: contain; } }
@media screen and (max-width: 767px) {
  #main_visual .slider_nav .stop_to_go.paused span {
    width: 1.2rem;
    height: 1.4rem;
    background: url("../img/top/icon_play_k.svg") right center no-repeat;
    background-size: contain; } }

#kv_logo {
  position: absolute !important;
  top: 0;
  left: 0;
  overflow: hidden;
  margin: 0 !important;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex; }
  @media screen and (min-width: 768px) {
    #kv_logo {
      justify-content: center;
      align-items: center;
      padding-bottom: 10rem; } }
  @media screen and (max-width: 767px) {
    #kv_logo {
      justify-content: center;
      align-items: flex-start;
      padding-top: 2.5rem; } }

#kv_logo img {
  position: relative;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    #kv_logo img {
      width: 35rem; } }
  @media screen and (max-width: 767px) {
    #kv_logo img {
      width: 16rem; } }

#Contents section .inner {
  position: relative;
  margin: 0 auto;
  padding-left: 0 !important;
  padding-right: 0 !important; }
  @media screen and (min-width: 768px) {
    #Contents section .inner {
      width: 127.5rem; } }
  @media screen and (max-width: 767px) {
    #Contents section .inner {
      width: 36rem; } }

.btn_to {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center !important; }
  @media screen and (min-width: 768px) {
    .btn_to {
      margin-top: 6rem; } }
  @media screen and (max-width: 767px) {
    .btn_to {
      margin-top: 4rem; } }

.btn_to .btn_general {
  position: relative; }
  @media screen and (min-width: 768px) {
    .btn_to .btn_general {
      width: 300px;
      height: 50px; } }
  @media screen and (max-width: 767px) {
    .btn_to .btn_general {
      width: 32rem;
      height: 5rem; } }

hgroup.h2_group {
  position: relative; }

hgroup.h2_group h2 {
  position: relative;
  letter-spacing: 0.00em;
  margin: 0 !important;
  padding-top: 0 !important;
  background: rgba(0, 0, 0, 0);
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    hgroup.h2_group h2 {
      line-height: 1.167em;
      font-size: 60px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    hgroup.h2_group h2 {
      line-height: 1.175em;
      font-size: 4rem; } }

hgroup.h2_group .ttl {
  position: relative;
  display: inline-block;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    hgroup.h2_group .ttl {
      line-height: 1em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-top: 1rem;
      padding-left: 4.5rem; } }
  @media screen and (max-width: 767px) {
    hgroup.h2_group .ttl {
      line-height: 1em;
      font-size: 1.2rem;
      margin-top: 1rem;
      padding-left: 3.6rem; } }

hgroup.h2_group .ttl::after {
  content: '';
  position: absolute;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  left: 0;
  background: #FA000F;
  height: 1px; }
  @media screen and (min-width: 768px) {
    hgroup.h2_group .ttl::after {
      width: 3.3rem;
      top: 0.7rem; } }
  @media screen and (max-width: 767px) {
    hgroup.h2_group .ttl::after {
      width: 2.4rem;
      top: 0.5rem; } }

hgroup.h2_group p.general_txt {
  position: relative; }
  @media screen and (min-width: 768px) {
    hgroup.h2_group p.general_txt {
      padding-top: 2rem; } }
  @media screen and (max-width: 767px) {
    hgroup.h2_group p.general_txt {
      padding-top: 2rem; } }

#bg_triangle {
  position: relative;
  background: #fff url("../img/parts_triangle_1.svg") left top no-repeat; }
  @media screen and (min-width: 768px) {
    #bg_triangle {
      background-size: 76.6rem auto; } }
  @media screen and (max-width: 767px) {
    #bg_triangle {
      background-size: 33rem auto; } }

#information {
  position: relative; }
  @media screen and (max-width: 767px) {
    #information {
      background: #fff; } }

#information .inner {
  position: relative;
  display: flex; }
  @media screen and (min-width: 768px) {
    #information .inner {
      background: #fff;
      justify-content: space-between; } }
  @media screen and (max-width: 767px) {
    #information .inner {
      flex-direction: column; } }

#information .inner h2 {
  position: relative;
  letter-spacing: 0;
  font-weight: 700;
  color: #0C0C0C;
  background: rgba(0, 0, 0, 0); }
  @media screen and (min-width: 768px) {
    #information .inner h2 {
      text-align: center;
      width: 19rem;
      line-height: 1.053em;
      font-size: 19px;
      /*font-size: divceil($fs, 10, rem);*/
      padding-top: 2.4rem; } }
  @media screen and (max-width: 767px) {
    #information .inner h2 {
      width: 36rem;
      line-height: 1em;
      font-size: 1.6rem;
      margin: 0 auto;
      padding-top: 2.5rem; } }

#information .topics_list {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: none !important;
  margin-top: 0 !important; }
  @media screen and (min-width: 768px) {
    #information .topics_list {
      width: 108rem; } }
  @media screen and (max-width: 767px) {
    #information .topics_list {
      width: 100%; } }

#information .topics_list a {
  border-bottom: none !important; }
  @media screen and (min-width: 768px) {
    #information .topics_list a {
      padding: 2rem 0rem !important; } }
  @media screen and (max-width: 767px) {
    #information .topics_list a {
      flex-direction: column;
      gap: 0.5rem;
      padding: 1rem 0rem 2rem !important; } }

#information .topics_list p.date {
  color: #737373; }
  @media screen and (min-width: 768px) {
    #information .topics_list p.date {
      line-height: 2.286em;
      font-size: 14px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #information .topics_list p.date {
      line-height: 1em;
      font-size: 1.2rem; } }

@media screen and (max-width: 767px) {
  #information .topics_list a p.general_txt {
    line-height: 1.715em;
    font-size: 1.4rem; } }

@media screen and (min-width: 768px) {
  #about {
    padding: 16rem 0 6rem; } }
@media screen and (max-width: 767px) {
  #about {
    padding: 8rem 0; } }

#about_set {
  position: relative; }
  @media screen and (min-width: 768px) {
    #about_set {
      width: 78rem;
      margin: 0 0 0 auto; } }
  @media screen and (max-width: 767px) {
    #about_set {
      margin-top: 3rem; } }

#about_set h3 {
  position: relative;
  letter-spacing: 0;
  font-weight: 400;
  color: #0C0C0C;
  background: rgba(0, 0, 0, 0); }
  @media screen and (min-width: 768px) {
    #about_set h3 {
      line-height: 1.534em;
      font-size: 30px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #about_set h3 {
      line-height: 1.546em;
      font-size: 2.2rem; } }

#about_set .read_txt {
  position: relative;
  letter-spacing: 0;
  font-weight: 400;
  color: #0C0C0C; }
  @media screen and (min-width: 768px) {
    #about_set .read_txt {
      line-height: 2.5em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-top: 2rem; } }
  @media screen and (max-width: 767px) {
    #about_set .read_txt {
      line-height: 1.625em;
      font-size: 1.6rem;
      margin-top: 2rem;
      text-align: justify; } }

@media screen and (min-width: 768px) {
  #about_set .btn_to {
    justify-content: flex-start !important;
    gap: 2.5rem;
    margin-top: 4rem !important; } }
@media screen and (max-width: 767px) {
  #about_set .btn_to {
    text-align: center;
    align-items: center;
    justify-content: center !important;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 3rem !important; } }

#about_img {
  position: relative;
  width: 100%; }
  @media screen and (min-width: 768px) {
    #about_img {
      height: 46rem; } }
  @media screen and (max-width: 767px) {
    #about_img {
      height: 62.5rem; } }

#about_img figure {
  position: absolute !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  transition: ease-in-out 1.2s all; }

@media screen and (min-width: 768px) {
  #about_img figure#about_img_01 {
    top: -21.5rem;
    left: 0rem;
    width: 40.8rem; } }
@media screen and (max-width: 767px) {
  #about_img figure#about_img_01 {
    top: 4rem;
    left: 6rem;
    width: 22.7rem; } }

@media screen and (min-width: 768px) {
  #about_img figure#about_img_02 {
    top: 14rem;
    left: 65rem;
    width: 16.2rem; } }
@media screen and (max-width: 767px) {
  #about_img figure#about_img_02 {
    top: 34.5rem;
    left: 0rem;
    width: 12rem; } }

@media screen and (min-width: 768px) {
  #about_img figure#about_img_03 {
    top: 6.5rem;
    left: 97.5rem;
    width: 30rem; } }
@media screen and (max-width: 767px) {
  #about_img figure#about_img_03 {
    top: 39rem;
    left: 19.4rem;
    width: 17rem; } }

#solution {
  background: #F4F4F4; }
  @media screen and (min-width: 768px) {
    #solution {
      padding: 16rem 0 13rem; } }
  @media screen and (max-width: 767px) {
    #solution {
      padding: 8rem 0; } }

#solution::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  display: inline-block;
  background: #D9D9D9;
  height: 1px;
  transform: translateX(-50%); }
  @media screen and (min-width: 768px) {
    #solution::after {
      width: 127.5rem; } }
  @media screen and (max-width: 767px) {
    #solution::after {
      width: 36rem; } }

#solution_set {
  position: relative;
  width: 100%;
  display: flex; }
  @media screen and (min-width: 768px) {
    #solution_set {
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: stretch;
      margin-top: 6rem;
      gap: 3rem 2.5rem; } }
  @media screen and (max-width: 767px) {
    #solution_set {
      flex-direction: column;
      margin-top: 3rem;
      gap: 2rem; } }

#solution_set > a {
  position: relative;
  overflow: hidden;
  padding: 0 !important; }
  @media screen and (min-width: 768px) {
    #solution_set > a {
      width: 40.8rem;
      margin: 3rem 0 0;
      display: block; } }
  @media screen and (max-width: 767px) {
    #solution_set > a {
      width: 100%;
      display: flex;
      align-items: flex-start;
      min-height: 8.8rem;
      gap: 2rem;
      margin: 0; } }

#solution_set > a#new_building {
  position: relative; }
  @media screen and (min-width: 768px) {
    #solution_set > a#new_building {
      width: 100%;
      margin-top: 0 !important; } }
  @media screen and (max-width: 767px) {
    #solution_set > a#new_building {
      width: 100%;
      display: flex;
      flex-direction: column; } }

#solution_set > a figure,
#solution_set > a + #new_building_list figure {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  display: block; }
  @media screen and (min-width: 768px) {
    #solution_set > a figure,
    #solution_set > a + #new_building_list figure {
      width: 40.8rem;
      height: 20rem; } }
  @media screen and (max-width: 767px) {
    #solution_set > a figure,
    #solution_set > a + #new_building_list figure {
      width: 15rem;
      height: 8.8rem; } }

@media screen and (max-width: 767px) {
  #solution_set > a#new_building figure {
    width: 100% !important;
    height: 21rem; } }

@media screen and (min-width: 768px) {
  #solution_set > a figure::after,
  #solution_set > a + #new_building_list 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; } }

@media screen and (min-width: 768px) {
  #solution_set > a:hover figure::after,
  #solution_set > a:hover + #new_building_list figure::after {
    border: #CC0000 0.6rem solid;
    opacity: 1; } }

#solution_set > a hgroup {
  position: relative;
  display: flex; }
  @media screen and (min-width: 768px) {
    #solution_set > a hgroup {
      align-items: center;
      margin-top: 1.5rem;
      min-height: 4rem;
      gap: 2.5rem;
      padding-right: 5rem; } }
  @media screen and (max-width: 767px) {
    #solution_set > a hgroup {
      flex-direction: column;
      margin-top: 0rem;
      gap: 1rem; } }

#solution_set > a#new_building hgroup {
  position: relative; }
  @media screen and (min-width: 768px) {
    #solution_set > a#new_building hgroup {
      margin-top: 0 !important; } }

#solution_set > a hgroup span {
  position: relative;
  font-weight: 700;
  color: #CC0000;
  transition: ease-out 0.4s all;
  white-space: nowrap; }
  @media screen and (min-width: 768px) {
    #solution_set > a hgroup span {
      line-height: 1.847em;
      font-size: 13px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #solution_set > a hgroup span {
      line-height: 1em;
      font-size: 1.2rem; } }

#solution_set > a hgroup p {
  position: relative;
  font-weight: 700;
  color: #0C0C0C;
  transition: ease-out 0.4s all; }
  @media screen and (min-width: 768px) {
    #solution_set > a hgroup p {
      line-height: 1.264em;
      font-size: 19px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #solution_set > a hgroup p {
      line-height: 1.375em;
      font-size: 1.6rem; } }

@media screen and (min-width: 768px) {
  #solution_set > a:hover hgroup p {
    color: #CC0000; } }

#new_building_list {
  position: relative;
  width: 100%; }
  @media screen and (min-width: 768px) {
    #new_building_list {
      display: flex;
      gap: 0 2.5rem; } }
  @media screen and (max-width: 767px) {
    #new_building_list {
      padding: 2rem 0; } }

#new_building_list .list {
  position: relative;
  display: flex;
  margin: 0; }
  @media screen and (min-width: 768px) {
    #new_building_list .list {
      width: 84rem;
      justify-content: space-between;
      flex-wrap: wrap; } }
  @media screen and (max-width: 767px) {
    #new_building_list .list {
      width: 100%;
      flex-direction: column; } }

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

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

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

#new_building_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) {
    #new_building_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) {
    #new_building_list .list a p {
      line-height: 1em;
      font-size: 1.4rem;
      padding: 2rem 3rem 2rem 1rem; } }

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

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

#new_building_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%; }

#flow {
  background: #F4F4F4; }
  @media screen and (min-width: 768px) {
    #flow {
      padding: 16rem 0; } }
  @media screen and (max-width: 767px) {
    #flow {
      padding: 8rem 0; } }

@media screen and (min-width: 768px) {
  #flow .flow_set {
    margin-top: 6rem !important; } }
@media screen and (max-width: 767px) {
  #flow .flow_set {
    margin-top: 5rem !important; } }

@media screen and (max-width: 767px) {
  #flow .btn_to {
    margin-top: 6rem !important; } }

#project {
  background: #fff; }
  @media screen and (min-width: 768px) {
    #project {
      padding: 16rem 0 16rem; } }
  @media screen and (max-width: 767px) {
    #project {
      padding: 8rem 0; } }

#project::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  display: inline-block;
  background: #D9D9D9;
  height: 1px;
  transform: translateX(-50%); }
  @media screen and (min-width: 768px) {
    #project::after {
      width: 127.5rem; } }
  @media screen and (max-width: 767px) {
    #project::after {
      width: 36rem; } }

#project .project_list_box {
  position: relative;
  width: 100%;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    #project .project_list_box {
      display: flex !important;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 4rem 2.5rem;
      height: auto !important;
      margin-top: 6rem !important; } }
  @media screen and (max-width: 767px) {
    #project .project_list_box {
      display: block !important;
      gap: 0;
      margin-top: 3rem !important;
      width: 30rem !important; } }

#project .project_list_box .slide_project {
  position: relative;
  display: inline-block; }
  @media screen and (min-width: 768px) {
    #project .project_list_box .slide_project {
      width: 30rem !important;
      height: auto !important; } }

@media screen and (max-width: 767px) {
  #project .project_list_box .slide_project a {
    width: 30rem !important;
    padding-right: 3rem !important; } }

@media screen and (max-width: 767px) {
  #project .project_list_box a figure {
    width: 27rem !important;
    height: 18rem !important; } }

@media screen and (max-width: 767px) {
  #project .slick-list {
    overflow: visible; } }

@media screen and (min-width: 768px) {
  #project .slider_nav .prev_next {
    display: none !important; } }

@media screen and (max-width: 767px) {
  #project .btn_to {
    margin-top: 8rem !important; } }

@media screen and (min-width: 768px) {
  .project_list_box a {
    height: 100%; } }

#project_story {
  background: #fff url("../img/parts_triangle_2.svg") right bottom no-repeat; }
  @media screen and (min-width: 768px) {
    #project_story {
      padding: 16rem 0 14rem;
      background-size: 76.6rem auto; } }
  @media screen and (max-width: 767px) {
    #project_story {
      padding: 8rem 0;
      background-size: 33rem auto; } }

#project_story .slider_set {
  position: relative; }
  @media screen and (min-width: 768px) {
    #project_story .slider_set {
      margin: 8rem auto 0;
      width: 97rem;
      height: 64rem; } }
  @media screen and (max-width: 767px) {
    #project_story .slider_set {
      width: 100%;
      margin: 3rem auto 0;
      /*height: divceil(260, 10, rem);*/ } }

@media screen and (min-width: 768px) {
  #project_story .slide_img {
    padding: 0 0.5rem; } }

#project_story .slider_set a {
  position: relative;
  display: block; }

#project_story .slider_set a div {
  margin: 0 !important;
  height: auto !important; }
  @media screen and (min-width: 768px) {
    #project_story .slider_set a div {
      position: absolute !important;
      bottom: 0;
      left: 0;
      width: 96rem !important;
      padding: 4rem;
      color: #fff; } }
  @media screen and (max-width: 767px) {
    #project_story .slider_set a div {
      position: relative;
      width: 36rem !important;
      padding: 3rem 3rem 1rem;
      color: #222; } }

#project_story .slider_set a .tag {
  position: relative;
  letter-spacing: 0.00em;
  transition: ease-out 0.4s all;
  font-weight: 500; }
  @media screen and (min-width: 768px) {
    #project_story .slider_set a .tag {
      line-height: 1em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/
      padding: 0 0 1rem; } }
  @media screen and (max-width: 767px) {
    #project_story .slider_set a .tag {
      line-height: 1em;
      font-size: 1rem;
      padding: 0 0 1rem; } }

#project_story .slider_set a .ttl {
  position: relative;
  letter-spacing: 0.00em;
  transition: ease-out 0.4s all;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #project_story .slider_set a .ttl {
      line-height: 1.334em;
      font-size: 30px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #project_story .slider_set a .ttl {
      line-height: 1.3em;
      font-size: 2rem; } }

#project_story .slider_set a .place {
  letter-spacing: 0.00em;
  transition: ease-out 0.4s all;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #project_story .slider_set a .place {
      color: #fff;
      position: absolute !important;
      right: 4rem;
      bottom: 4rem;
      line-height: 1.572em;
      font-size: 14px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #project_story .slider_set a .place {
      color: #222;
      position: relative !important;
      line-height: 1.572em;
      font-size: 1.4rem;
      padding-top: 0.5rem; } }

/*
#project_story .slider_set a:hover .tag,
#project_story .slider_set a:hover .ttl,
#project_story .slider_set a:hover .place{
      @include mq(pc) {
		  color: $link_color;
	}
}
*/
#project_story .slider_set a figure {
  position: relative;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block; }
  @media screen and (min-width: 768px) {
    #project_story .slider_set a figure {
      width: 96rem;
      height: 64rem; } }
  @media screen and (max-width: 767px) {
    #project_story .slider_set a figure {
      width: 100%;
      height: 26rem; } }

@media screen and (min-width: 768px) {
  #project_story .slider_set a 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; } }

@media screen and (min-width: 768px) {
  #project_story .slider_set a:hover figure::after {
    border: #CC0000 0.6rem solid;
    opacity: 1; } }

#project_story .slick-list {
  overflow: visible; }

@media screen and (min-width: 768px) {
  #project_story .btn_to {
    margin-top: 8rem !important; } }
@media screen and (max-width: 767px) {
  #project_story .btn_to {
    margin-top: 9rem !important; } }

#project_story .slider_nav {
  position: absolute !important;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; }

#project_story .slider_nav .inner {
  position: relative;
  height: 100%; }
  @media screen and (min-width: 768px) {
    #project_story .slider_nav .inner {
      width: 97rem; } }
  @media screen and (max-width: 767px) {
    #project_story .slider_nav .inner {
      height: 100%; } }

#Contents section .slider_nav .dots {
  position: absolute !important;
  z-index: 5;
  left: 0;
  width: 100%;
  display: flex;
  pointer-events: auto !important; }
  @media screen and (min-width: 768px) {
    #Contents section .slider_nav .dots {
      justify-content: center;
      bottom: -4rem;
      gap: 0.6rem; } }
  @media screen and (max-width: 767px) {
    #Contents section .slider_nav .dots {
      bottom: -4.5rem;
      height: 3rem;
      align-items: center;
      gap: 0.6rem; } }

#Contents section .slider_nav .dots .dot {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: none;
  cursor: pointer; }
  @media screen and (min-width: 768px) {
    #Contents section .slider_nav .dots .dot {
      width: 4rem;
      height: 1rem; } }
  @media screen and (max-width: 767px) {
    #Contents section .slider_nav .dots .dot {
      width: 4rem;
      height: 1rem; } }

#Contents section .slider_nav .dots .dot::before,
#Contents section .slider_nav .dots .dot::after {
  content: '';
  position: absolute;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  left: 0; }
  @media screen and (min-width: 768px) {
    #Contents section .slider_nav .dots .dot::before,
    #Contents section .slider_nav .dots .dot::after {
      bottom: 0;
      height: 2px; } }
  @media screen and (max-width: 767px) {
    #Contents section .slider_nav .dots .dot::before,
    #Contents section .slider_nav .dots .dot::after {
      bottom: 0;
      height: 2px; } }

#Contents section .slider_nav .dots .dot::before {
  transition: ease-out 0.4s all;
  background: #D9D9D9; }

#Contents section .slider_nav .dots .dot::after {
  background: #CC0000;
  transform: translateX(-100%); }

#Contents section .slider_nav .dots .dot.active::after {
  animation: dot_animation 6s ease forwards; }

#Contents section .slider_nav .dots .dot.paused::after {
  animation-play-state: paused; }

@keyframes dot_animation {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }
#Contents section .slider_nav .prev_next {
  position: absolute !important; }
  @media screen and (min-width: 768px) {
    #Contents section .slider_nav .prev_next {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; } }
  @media screen and (max-width: 767px) {
    #Contents section .slider_nav .prev_next {
      bottom: -5rem;
      right: 0;
      display: flex;
      gap: 0.6rem;
      z-index: 10; } }

#Contents section .slider_nav .prev,
#Contents section .slider_nav .next {
  overflow: hidden;
  padding: 0 !important;
  background: rgba(230, 0, 39, 0.9);
  border: 1px #CC0000 solid;
  cursor: pointer;
  transition: ease-out 0.4s all;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto !important; }
  @media screen and (min-width: 768px) {
    #Contents section .slider_nav .prev,
    #Contents section .slider_nav .next {
      position: absolute !important;
      top: 50%;
      margin-top: -2rem;
      width: 4rem;
      height: 4rem; } }
  @media screen and (max-width: 767px) {
    #Contents section .slider_nav .prev,
    #Contents section .slider_nav .next {
      width: 3rem;
      height: 3rem; } }

@media screen and (min-width: 768px) {
  #Contents section .slider_nav .prev {
    left: -1.5rem; } }

@media screen and (min-width: 768px) {
  #Contents section .slider_nav .next {
    right: -1.5rem; } }

@media screen and (min-width: 768px) {
  #Contents section .slider_nav .prev:hover,
  #Contents section .slider_nav .next:hover:hover {
    background: #fff; } }

#Contents section .slider_nav .prev span,
#Contents section .slider_nav .next span {
  position: relative;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    #Contents section .slider_nav .prev span,
    #Contents section .slider_nav .next span {
      width: 1.2rem;
      height: 1.2rem; } }
  @media screen and (max-width: 767px) {
    #Contents section .slider_nav .prev span,
    #Contents section .slider_nav .next span {
      width: 1rem;
      height: 1rem; } }

#Contents section .slider_nav .prev span::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0.2rem;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 1px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(-135deg);
  width: 100%;
  height: 100%; }

#Contents section .slider_nav .next span::after {
  content: '';
  position: absolute;
  top: 0;
  left: -0.2rem;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 1px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(45deg);
  width: 100%;
  height: 100%; }

@media screen and (min-width: 768px) {
  #Contents section .slider_nav .prev:hover span::after,
  #Contents section .slider_nav .next:hover span::after {
    border-color: #CC0000 #CC0000 transparent transparent; } }

#topics {
  background: #F4F4F4; }
  @media screen and (min-width: 768px) {
    #topics {
      padding: 16rem 0; } }
  @media screen and (max-width: 767px) {
    #topics {
      padding: 8rem 0; } }

#topics .topics_list p.date {
  color: #737373; }

#topics_set {
  position: relative;
  display: flex; }
  @media screen and (min-width: 768px) {
    #topics_set {
      justify-content: space-between; } }
  @media screen and (max-width: 767px) {
    #topics_set {
      flex-direction: column;
      gap: 3rem; } }

#topics_set .topics_list {
  margin: 0 !important;
  padding: 0 !important; }
  @media screen and (min-width: 768px) {
    #topics_set .topics_list {
      width: 95rem; } }
  @media screen and (max-width: 767px) {
    #topics_set .topics_list {
      width: 100%; } }

#others {
  background: #222; }
  @media screen and (min-width: 768px) {
    #others {
      padding: 12rem 0; } }
  @media screen and (max-width: 767px) {
    #others {
      padding: 8rem 0; } }

#others .inner {
  display: flex; }
  @media screen and (min-width: 768px) {
    #others .inner {
      justify-content: space-between;
      align-items: stretch; } }
  @media screen and (max-width: 767px) {
    #others .inner {
      flex-direction: column;
      gap: 4rem 0; } }

#others .inner a {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important; }
  @media screen and (min-width: 768px) {
    #others .inner a {
      width: 40.8rem; } }
  @media screen and (max-width: 767px) {
    #others .inner a {
      width: 100%; } }

#others .inner a figure {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  display: block; }
  @media screen and (min-width: 768px) {
    #others .inner a figure {
      width: 40.8rem;
      height: 20rem; } }
  @media screen and (max-width: 767px) {
    #others .inner a figure {
      width: 36rem;
      height: 21rem; } }

@media screen and (min-width: 768px) {
  #others .inner a 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; } }

@media screen and (min-width: 768px) {
  #others .inner a:hover figure::after {
    border: #CC0000 0.6rem solid;
    opacity: 1; } }

#others .inner a p {
  position: relative;
  font-weight: 700;
  color: #fff;
  transition: ease-out 0.4s all; }
  @media screen and (min-width: 768px) {
    #others .inner a p {
      line-height: 1.375em;
      font-size: 16px;
      /*font-size: divceil($fs, 10, rem);*/
      padding-top: 2.6rem;
      padding-bottom: 0.8rem; } }
  @media screen and (max-width: 767px) {
    #others .inner a p {
      line-height: 1.25em;
      font-size: 1.6rem;
      padding-top: 2rem;
      padding-bottom: 0.8rem; } }

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

.arrow_box {
  position: absolute !important;
  transition: ease-out 0.6s all;
  bottom: 0;
  right: 0;
  background: #CC0000;
  border: #CC0000 1px solid; }
  @media screen and (min-width: 768px) {
    .arrow_box {
      width: 4rem;
      height: 4rem; } }
  @media screen and (max-width: 767px) {
    .arrow_box {
      width: 3rem;
      height: 3rem; } }

.arrow_box .arrow_w {
  position: absolute !important;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    .arrow_box .arrow_w {
      top: 1.4rem;
      right: 1.6rem;
      width: 1.2rem;
      height: 1.2rem; } }
  @media screen and (max-width: 767px) {
    .arrow_box .arrow_w {
      top: 0.8rem;
      right: 1.2rem;
      width: 1.2rem;
      height: 1.2rem; } }

.arrow_box .arrow_w::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transition: ease-out 0.6s all;
  border: 1px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(45deg);
  width: 100%;
  height: 100%; }

@media screen and (min-width: 768px) {
  a:hover .arrow_box {
    background: #fff; } }

@media screen and (min-width: 768px) {
  a:hover .arrow_w::after {
    border-color: #CC0000 #CC0000 transparent transparent; } }