#old_footer_sitemap {
  position: relative;
  width: 100%;
  background: #F4F4F4;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    #old_footer_sitemap {
      display: none; } }

.FatMenuSet {
  position: relative;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .FatMenuSet {
      width: 127.5rem !important; } }

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

#TopicPath {
  background: none !important; }

#TopicPath strong {
  color: #fff !important; }

#main_contents {
  position: relative;
  z-index: 20 !important; }

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

/*kv*/
#kv_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1;
  height: 100vh;
  background: #000; }
  @media screen and (min-width: 768px) {
    #kv_bg {
      min-height: 76.8rem; } }
  @media screen and (max-width: 767px) {
    #kv_bg {
      min-height: 84.4rem; } }

#kv_bg .slider_set {
  position: relative;
  width: 100% !important;
  height: 100% !important; }

#kv_bg .slider_set img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center; }

#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: flex-end;
      align-items: center;
      padding-bottom: 10.5rem;
      padding-right: 18.5rem; } }
  @media screen and (max-width: 767px) {
    #kv_logo {
      justify-content: center;
      align-items: center;
      padding-bottom: 24rem; } }

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

.slider_nav {
  position: absolute !important;
  right: 0;
  display: flex; }
  @media screen and (min-width: 768px) {
    .slider_nav {
      bottom: 5rem;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 2rem; } }
  @media screen and (max-width: 767px) {
    .slider_nav {
      width: 100%;
      bottom: 2rem;
      justify-content: space-between;
      align-items: center;
      gap: 2rem; } }

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

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

.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) {
    .slider_nav .dots .dot {
      width: 4rem;
      height: 1rem; } }
  @media screen and (max-width: 767px) {
    .slider_nav .dots .dot {
      width: 4rem;
      height: 1rem; } }

.slider_nav .dots .dot::before,
.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) {
    .slider_nav .dots .dot::before,
    .slider_nav .dots .dot::after {
      bottom: 0;
      height: 2px; } }
  @media screen and (max-width: 767px) {
    .slider_nav .dots .dot::before,
    .slider_nav .dots .dot::after {
      bottom: 0;
      height: 2px; } }

.slider_nav .dots .dot::before {
  transition: ease-out 0.4s all;
  background: rgba(255, 255, 255, 0.7); }

/*
.slider_nav .dots .dot:hover::before{
	@include mq(pc) {
		background: $key_color;
	}
}
*/
.slider_nav .dots .dot::after {
  background: #CC0000;
  transform: translateX(-100%); }

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

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

@keyframes dot_animation {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }
.slider_nav .prev,
.slider_nav .next,
.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) {
    .slider_nav .prev,
    .slider_nav .next,
    .slider_nav .stop_to_go {
      width: 4rem;
      height: 4rem; } }
  @media screen and (max-width: 767px) {
    .slider_nav .prev,
    .slider_nav .next,
    .slider_nav .stop_to_go {
      width: 3rem;
      height: 3rem; } }

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

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

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

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

/*
.slider_nav .next:hover span{
      @include mq(pc) {
	transform: translateX(divceil(5, 10, rem));
	}
}
.slider_nav .prev:hover span{
      @include mq(pc) {
	transform: translateX(divceil(-5, 10, rem));
	}
}
*/
.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%; }

.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%; }

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

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

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

#kv .inner {
  position: relative;
  height: 100%; }

#kv_ttl {
  left: 0;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh;
  z-index: 22;
  pointer-events: none; }
  @media screen and (min-width: 768px) {
    #kv_ttl {
      position: fixed !important;
      top: 14rem;
      min-height: 62.8rem; } }
  @media screen and (max-width: 767px) {
    #kv_ttl {
      position: absolute !important;
      top: 0rem !important;
      min-height: 70.4rem !important; } }

@media screen and (max-width: 994px) {
  #kv_ttl {
    top: 36rem;
    min-height: 40.8rem; } }
#kv_ttl .inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff; }
  @media screen and (min-width: 768px) {
    #kv_ttl .inner {
      padding-bottom: 10rem; } }

@media screen and (min-width: 768px) {
  #kv_ttl hgroup {
    position: relative; } }
@media screen and (max-width: 767px) {
  #kv_ttl hgroup {
    position: absolute !important;
    left: 0;
    bottom: 9rem; } }

#kv_ttl hgroup h1 {
  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) {
    #kv_ttl hgroup h1 {
      font-size: 6rem;
      line-height: 7rem;
      /*@include tbmag(60, 70, pc);*/ } }
  @media screen and (max-width: 767px) {
    #kv_ttl hgroup h1 {
      line-height: 1.175em;
      font-size: 4rem; } }

#kv_ttl hgroup span {
  position: relative;
  display: inline-block;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    #kv_ttl hgroup span {
      font-size: 1.4rem;
      line-height: 1.4rem;
      /*@include tbmag(14, 14, pc);*/
      margin-top: 1rem;
      padding-left: 5.5rem; } }
  @media screen and (max-width: 767px) {
    #kv_ttl hgroup span {
      line-height: 1em;
      font-size: 1.2rem;
      margin-top: 1rem;
      padding-left: 4rem; } }

#kv_ttl hgroup span::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) {
    #kv_ttl hgroup span::after {
      width: 3.3rem;
      top: 0.7rem; } }
  @media screen and (max-width: 767px) {
    #kv_ttl hgroup span::after {
      width: 2.4rem;
      top: 0.6rem; } }

#kv_ttl hgroup p {
  position: relative;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    #kv_ttl hgroup p {
      font-size: 3rem;
      line-height: 4.6rem;
      /*@include tbmag(30, 46, pc);*/
      margin-top: 2rem; } }
  @media screen and (max-width: 767px) {
    #kv_ttl hgroup p {
      line-height: 1.3em;
      font-size: 2rem;
      margin-top: 1rem; } }

/**/
#message {
  z-index: 21; }
  @media screen and (min-width: 768px) {
    #message {
      padding: 14rem 0; } }
  @media screen and (max-width: 767px) {
    #message {
      padding: 20rem 0 8rem; } }

#anniversary,
#history,
#project_story,
#old_footer_sitemap {
  z-index: 23; }

#message::before {
  content: "";
  position: absolute !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(32, 42, 90, 0.2);
  backdrop-filter: blur(20px);
  /*mix-blend-mode: multiply;*/
  opacity: 0;
  transition: ease-out 1.2s all; }

#message.bg_active::before {
  opacity: 1; }

.message_box {
  position: relative;
  color: #fff; }
  @media screen and (min-width: 768px) {
    .message_box {
      width: 62.5rem;
      margin: 0 0 0 auto; } }
  @media screen and (max-width: 767px) {
    .message_box {
      width: 100%;
      flex-direction: column;
      gap: 3rem; } }

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

@media screen and (min-width: 768px) {
  #message hgroup {
    padding-bottom: 4rem; } }
@media screen and (max-width: 767px) {
  #message hgroup {
    padding-bottom: 3rem; } }

/**/
#anniversary {
  background: #fff; }
  @media screen and (min-width: 768px) {
    #anniversary {
      padding: 10rem 0; } }
  @media screen and (max-width: 767px) {
    #anniversary {
      padding: 6rem 0; } }

/*
#anniversary::after{
    content: "";
	position:absolute !important;
	width: 100%;
	height: 100%;
		top:0;
		left:0;
	@include mq(pc) {
	border: $key_color divceil(10, 10, rem) solid;
    }
	@include mq(sp) {
	border: $key_color divceil(5, 10, rem) solid;
    }
}
*/
@media screen and (min-width: 768px) {
  #anniversary hgroup {
    padding-bottom: 2rem; } }
@media screen and (max-width: 767px) {
  #anniversary hgroup {
    padding-bottom: 1rem; } }

.anniversary_set {
  position: relative;
  display: flex; }
  @media screen and (min-width: 768px) {
    .anniversary_set {
      justify-content: space-between;
      align-items: center;
      width: 118.5rem;
      margin: 0 auto; } }
  @media screen and (max-width: 767px) {
    .anniversary_set {
      width: 100%;
      flex-direction: column;
      gap: 3rem; } }

.anniversary_set div {
  position: relative; }
  @media screen and (min-width: 768px) {
    .anniversary_set div {
      width: 58rem; } }
  @media screen and (max-width: 767px) {
    .anniversary_set div {
      width: 33rem;
      margin: 0 auto; } }

.anniversary_set figure {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  display: block; }
  @media screen and (min-width: 768px) {
    .anniversary_set figure {
      width: 50rem; } }
  @media screen and (max-width: 767px) {
    .anniversary_set figure {
      width: 100%; } }

.anniversary_set figure img {
  position: relative;
  display: block;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .anniversary_set figure img {
      width: 25rem !important; } }
  @media screen and (max-width: 767px) {
    .anniversary_set figure img {
      width: 18rem !important; } }

/**/
#history {
  position: relative;
  background: #F4F4F4;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    #history {
      padding: 14rem 0 0; } }
  @media screen and (max-width: 767px) {
    #history {
      padding: 8rem 0 0; } }

#history hgroup {
  text-align: center !important; }

.history_list {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    .history_list {
      margin-top: 9rem;
      gap: 2rem; } }
  @media screen and (max-width: 767px) {
    .history_list {
      margin-top: 6rem;
      gap: 3rem; } }

.history_list::after {
  content: "";
  position: absolute !important;
  background: #FA000F;
  width: 0.2rem;
  height: 100%;
  left: 50% !important;
  top: 0 !important; }
  @media screen and (min-width: 768px) {
    .history_list::after {
      /*top: divceil(48, 10, rem) !important;*/
      transform: translateX(-62.3rem);
      /*left: divceil(14, 10, rem) !important;*/ } }
  @media screen and (max-width: 767px) {
    .history_list::after {
      /*top: divceil(40, 10, rem) !important;*/
      transform: translateX(-16.9rem);
      /*left: divceil(11, 10, rem) !important;*/ } }

.history_list dl {
  position: relative;
  display: flex;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .history_list dl {
      width: 127.5rem;
      justify-content: space-between; } }
  @media screen and (max-width: 767px) {
    .history_list dl {
      width: 36rem;
      flex-direction: column;
      gap: 1rem; } }

.history_list dt {
  position: relative; }
  @media screen and (min-width: 768px) {
    .history_list dt {
      width: 28.5rem;
      padding: 2rem 0 0 6.5rem; } }
  @media screen and (max-width: 767px) {
    .history_list dt {
      width: 100%;
      padding: 0rem 0 0 5rem; } }

.history_list dt p {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .history_list dt p {
      font-size: 4rem;
      line-height: 4rem;
      /*@include tbmag(60, 60, pc);*/ } }
  @media screen and (max-width: 767px) {
    .history_list dt p {
      line-height: 1em;
      font-size: 3rem; } }

.history_list dt p span {
  position: relative;
  display: inline-block;
  letter-spacing: 0.00em;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .history_list dt p span {
      line-height: 2em;
      font-size: 20px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-left: 0.6rem; } }
  @media screen and (max-width: 767px) {
    .history_list dt p span {
      line-height: 1.5em;
      font-size: 2rem;
      margin-left: 0.6rem; } }

.history_list dl dt .pin {
  position: absolute !important; }
  @media screen and (min-width: 768px) {
    .history_list dl dt .pin {
      top: 2.6rem;
      left: 0;
      width: 3rem;
      height: 3rem; } }
  @media screen and (max-width: 767px) {
    .history_list dl dt .pin {
      top: 0.3rem;
      left: 0;
      width: 2.5rem;
      height: 2.5rem; } }

.history_list dl dt .pin::after {
  content: "";
  position: absolute !important;
  background: #FA000F;
  border-radius: 50%; }
  @media screen and (min-width: 768px) {
    .history_list dl dt .pin::after {
      top: 0.7rem;
      left: 0.7rem;
      width: 1.6rem;
      height: 1.6rem; } }
  @media screen and (max-width: 767px) {
    .history_list dl dt .pin::after {
      top: 0.6rem;
      left: 0.6rem;
      width: 1.3rem;
      height: 1.3rem; } }

.history_list dl dt .pin::before {
  content: "";
  position: absolute !important;
  background: #FA000F;
  opacity: .2;
  top: 0;
  left: 0;
  border-radius: 50%;
  animation: pin_animation 4s ease-out infinite; }
  @media screen and (min-width: 768px) {
    .history_list dl dt .pin::before {
      width: 3rem;
      height: 3rem; } }
  @media screen and (max-width: 767px) {
    .history_list dl dt .pin::before {
      width: 2.5rem;
      height: 2.5rem; } }

@keyframes pin_animation {
  0% {
    transform: scale(0.5);
    opacity: .5; }
  100% {
    transform: scale(1.6);
    opacity: .0; } }
.history_list dd {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    .history_list dd {
      width: 97.5rem;
      gap: 2rem; } }
  @media screen and (max-width: 767px) {
    .history_list dd {
      width: 31.5rem;
      gap: 2rem;
      margin: 0 0 0 auto !important; } }

.history_list dd .box_set {
  position: relative;
  width: 100%;
  display: flex;
  background: #fff; }
  @media screen and (min-width: 768px) {
    .history_list dd .box_set {
      justify-content: space-between;
      padding: 2.5rem; } }
  @media screen and (max-width: 767px) {
    .history_list dd .box_set {
      flex-direction: column;
      padding: 2rem;
      gap: 2rem; } }

.history_list dd .box_set div {
  position: relative; }
  @media screen and (min-width: 768px) {
    .history_list dd .box_set div {
      width: 56rem; } }
  @media screen and (max-width: 767px) {
    .history_list dd .box_set div {
      width: 100%; } }

@media screen and (min-width: 768px) {
  .history_list dd .box_set:has(.btn_more) div {
    padding-bottom: 6rem !important; } }

.history_list dd h3 {
  position: relative;
  letter-spacing: 0.00em;
  color: #0C0C0C;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .history_list dd h3 {
      padding-top: 0.5rem;
      line-height: 1.556em;
      font-size: 18px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .history_list dd h3 {
      padding-top: 0.8rem;
      line-height: 1.556em;
      font-size: 1.8rem; } }

.history_list dd figure {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  display: block; }
  @media screen and (min-width: 768px) {
    .history_list dd figure {
      width: 30rem;
      height: 20rem; } }
  @media screen and (max-width: 767px) {
    .history_list dd figure {
      width: 100%;
      height: 18.3rem; } }

.history_list .alone_box {
  position: relative;
  margin: 0 0 0 auto !important; }
  @media screen and (min-width: 768px) {
    .history_list .alone_box {
      width: 95rem;
      padding: 1rem 0; } }
  @media screen and (max-width: 767px) {
    .history_list .alone_box {
      width: 31.5rem; } }

@media screen and (min-width: 768px) {
  .history_list .btn_more {
    position: absolute !important;
    bottom: 2rem;
    left: 0rem 0; } }
@media screen and (max-width: 767px) {
  .history_list .btn_more {
    position: relative;
    margin: 0 auto; } }

.s_set {
  background: #fff;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    .s_set {
      margin-top: 4rem;
      margin-bottom: 4rem; } }
  @media screen and (max-width: 767px) {
    .s_set {
      margin-top: 4rem;
      margin-bottom: 4rem; } }

.s_set:nth-of-type(1) {
  margin-top: 0 !important; }

@media screen and (min-width: 768px) {
  .history_list .s_set dl {
    align-items: center; } }
@media screen and (max-width: 767px) {
  .history_list .s_set dl {
    gap: 1rem; } }

.history_list .s_set dl::after {
  content: "";
  position: absolute;
  background: #FA000F; }
  @media screen and (min-width: 768px) {
    .history_list .s_set dl::after {
      width: 0.4rem;
      height: 100%;
      top: 0rem;
      left: 1.4rem; } }
  @media screen and (max-width: 767px) {
    .history_list .s_set dl::after {
      width: 0.6rem;
      height: 12rem;
      top: 0rem;
      left: 1.1rem; } }

.history_list .s_set dt {
  position: relative; }
  @media screen and (min-width: 768px) {
    .history_list .s_set dt {
      width: 28.5rem;
      padding: 2rem 0 0 6.5rem; } }
  @media screen and (max-width: 767px) {
    .history_list .s_set dt {
      width: 100%;
      padding: 4rem 0 0 5rem; } }

.history_list .s_set dt p {
  position: relative;
  letter-spacing: 0.00em;
  color: #FA000F;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .history_list .s_set dt p {
      font-size: 5rem;
      line-height: 5rem;
      /*@include tbmag(60, 60, pc);*/ } }
  @media screen and (max-width: 767px) {
    .history_list .s_set dt p {
      line-height: 1em;
      font-size: 5rem; } }

.history_list .s_set dt p span {
  position: relative;
  display: inline-block;
  letter-spacing: 0.00em;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .history_list .s_set dt p span {
      line-height: 2.5em;
      font-size: 20px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-left: 0.6rem; } }
  @media screen and (max-width: 767px) {
    .history_list .s_set dt p span {
      line-height: 2.5em;
      font-size: 2rem;
      margin-left: 0.6rem; } }

.history_list .s_set dl dt .triangle {
  position: absolute !important; }
  @media screen and (min-width: 768px) {
    .history_list .s_set dl dt .triangle {
      top: 50%;
      left: 3.5rem;
      width: 1.6rem;
      height: 1.6rem;
      margin-top: -0.4rem; } }
  @media screen and (max-width: 767px) {
    .history_list .s_set dl dt .triangle {
      top: 50%;
      left: 2.8rem;
      width: 1.6rem;
      height: 1.6rem;
      margin-top: 0.8rem; } }

.history_list .s_set dl dt .triangle::after {
  content: "";
  position: absolute !important;
  background: #FA000F;
  display: inline-block;
  top: 0;
  left: 0; }
  @media screen and (min-width: 768px) {
    .history_list .s_set dl dt .triangle::after {
      width: 1.2rem;
      height: 1.6rem;
      clip-path: polygon(0 0, 0 100%, 100% 50%); } }
  @media screen and (max-width: 767px) {
    .history_list .s_set dl dt .triangle::after {
      width: 1.2rem;
      height: 1.6rem;
      clip-path: polygon(0 0, 0 100%, 100% 50%); } }

.history_list .s_set dd .box_set {
  position: relative;
  width: 100%;
  display: flex;
  background: #fff; }
  @media screen and (min-width: 768px) {
    .history_list .s_set dd .box_set {
      justify-content: space-between;
      padding: 4rem 2.5rem; } }
  @media screen and (max-width: 767px) {
    .history_list .s_set dd .box_set {
      flex-direction: column;
      padding: 0rem 1rem 9.5rem 0rem;
      gap: 2rem; } }

@media screen and (min-width: 768px) {
  .history_list .s_set dd .box_set div {
    width: 100%; } }

.history_list .s_set .box_set p.general_txt {
  color: #FA000F !important; }

.history_list .s_set p.bg_ttl {
  position: absolute !important;
  letter-spacing: -0.05em;
  color: #F4F4F4;
  white-space: nowrap;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .history_list .s_set p.bg_ttl {
      right: -2rem;
      bottom: 0;
      line-height: 0.422em;
      font-size: 190px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .history_list .s_set p.bg_ttl {
      right: -1rem;
      bottom: -8rem;
      line-height: 0.584em;
      font-size: 12rem; } }

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

#project_story h2 {
  position: relative;
  letter-spacing: 0.00em;
  margin: 0 !important;
  padding: 1rem 2rem !important;
  background: #222;
  color: #fff;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    #project_story h2 {
      line-height: 1em;
      font-size: 18px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #project_story h2 {
      line-height: 1em;
      font-size: 1.8rem; } }

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

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

#project_story .project_story_set a figure {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  display: block; }
  @media screen and (min-width: 768px) {
    #project_story .project_story_set a figure {
      width: 62.5rem;
      height: 41.7rem; } }
  @media screen and (max-width: 767px) {
    #project_story .project_story_set a figure {
      width: 36rem;
      height: 24rem; } }

@media screen and (min-width: 768px) {
  #project_story .project_story_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 .project_story_set a:hover figure::after {
    border: #CC0000 0.6rem solid;
    opacity: 1; } }

#project_story .project_story_set a hgroup {
  position: relative; }
  @media screen and (min-width: 768px) {
    #project_story .project_story_set a hgroup {
      padding-bottom: 5rem; } }

#project_story .project_story_set a hgroup p {
  position: relative;
  font-weight: 700;
  color: #FA000F; }
  @media screen and (min-width: 768px) {
    #project_story .project_story_set a hgroup p {
      line-height: 1em;
      font-size: 13px;
      /*font-size: divceil($fs, 10, rem);*/
      padding-top: 2rem;
      padding-bottom: 0.5rem; } }
  @media screen and (max-width: 767px) {
    #project_story .project_story_set a hgroup p {
      line-height: 1em;
      font-size: 1.2rem;
      padding-top: 2rem;
      padding-bottom: 0.5rem; } }

#project_story .project_story_set a hgroup h3 {
  position: relative;
  letter-spacing: 0.00em;
  margin: 0 !important;
  padding-top: 0 !important;
  background: rgba(0, 0, 0, 0);
  color: #0C0C0C;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    #project_story .project_story_set a hgroup h3 {
      line-height: 1.5em;
      font-size: 20px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #project_story .project_story_set a hgroup h3 {
      line-height: 1.445em;
      font-size: 1.8rem; } }

#project_story .project_story_set a .place {
  font-weight: 400;
  color: #737373; }
  @media screen and (min-width: 768px) {
    #project_story .project_story_set a .place {
      position: absolute !important;
      bottom: 0;
      left: 0;
      line-height: 1em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    #project_story .project_story_set a .place {
      position: relative;
      line-height: 1em;
      font-size: 1.2rem;
      padding-top: 4rem; } }

#project_story .project_story_set a .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) {
    #project_story .project_story_set a .arrow_box {
      width: 4rem;
      height: 4rem; } }
  @media screen and (max-width: 767px) {
    #project_story .project_story_set a .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.8rem;
      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; } }

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

/*
#project_story .project_story_set a:hover .arrow_w{
      @include mq(pc) {
	transform: translateX(divceil(5, 10, rem));
	}
}
*/
@media screen and (min-width: 768px) {
  #project_story .project_story_set a:hover .arrow_w::after {
    border-color: #CC0000 #CC0000 transparent transparent; } }

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

/*add*/
.main_section hgroup p {
  position: relative;
  font-weight: 700;
  color: #FA000F; }
  @media screen and (min-width: 768px) {
    .main_section hgroup p {
      line-height: 1em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/
      padding-bottom: 1rem; } }
  @media screen and (max-width: 767px) {
    .main_section hgroup p {
      line-height: 1em;
      font-size: 1.3rem;
      padding-bottom: 1rem; } }

.main_section hgroup 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) {
    .main_section hgroup h2 {
      line-height: 1em;
      font-size: 24px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .main_section hgroup h2 {
      line-height: 1em;
      font-size: 1.8rem; } }

.btn_more {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #CC0000;
  padding: 0 !important;
  transition: ease-out 0.6s all;
  border: #CC0000 1px solid;
  color: #fff; }
  @media screen and (min-width: 768px) {
    .btn_more {
      width: 31.5rem;
      height: 5rem; } }
  @media screen and (max-width: 767px) {
    .btn_more {
      width: 23.5rem;
      height: 5rem; } }

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

.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%; }

.btn_more p {
  position: relative;
  letter-spacing: 0.00em;
  color: #fff;
  transition: ease-out 0.6s all;
  font-weight: 400; }
  @media screen and (min-width: 768px) {
    .btn_more p {
      line-height: 1em;
      font-size: 14px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .btn_more p {
      line-height: 1em;
      font-size: 1.4rem; } }

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

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

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

#kv .archive_banner {
  position: absolute !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #CC0000;
  border: #CC0000 1px solid;
  color: #fff !important;
  z-index: 100;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    #kv .archive_banner {
      right: 0;
      width: 30rem;
      padding: 2rem;
      bottom: 13rem;
      gap: 1rem; } }
  @media screen and (max-width: 767px) {
    #kv .archive_banner {
      right: 2rem;
      width: 32rem;
      padding: 2rem;
      bottom: -12rem;
      gap: 1rem; } }

.archive_box {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    .archive_box {
      padding: 7rem 0 14rem;
      gap: 2rem; } }
  @media screen and (max-width: 767px) {
    .archive_box {
      padding: 7rem 0 7rem;
      gap: 3rem; } }

.archive_box::after {
  content: "";
  position: absolute !important;
  background: #FA000F;
  width: 0.2rem;
  height: 100%;
  left: 50% !important;
  top: 0 !important; }
  @media screen and (min-width: 768px) {
    .archive_box::after {
      /*top: divceil(48, 10, rem) !important;*/
      transform: translateX(-62.3rem);
      /*left: divceil(14, 10, rem) !important;*/ } }
  @media screen and (max-width: 767px) {
    .archive_box::after {
      display: none; } }

#history .archive_banner {
  position: relative !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #CC0000;
  border: #CC0000 1px solid;
  color: #fff !important;
  transition: ease-out 0.6s all;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    #history .archive_banner {
      width: 30rem;
      padding: 2rem;
      gap: 1rem; } }
  @media screen and (max-width: 767px) {
    #history .archive_banner {
      width: 32rem;
      padding: 2rem;
      gap: 1rem; } }

.archive_banner .arrow_w {
  position: absolute !important;
  transition: ease-out 0.6s all;
  top: 50%; }
  @media screen and (min-width: 768px) {
    .archive_banner .arrow_w {
      margin-top: -0.6rem;
      right: 2rem;
      width: 1.2rem;
      height: 1.2rem; } }
  @media screen and (max-width: 767px) {
    .archive_banner .arrow_w {
      margin-top: -0.6rem;
      right: 2rem;
      width: 1.2rem;
      height: 1.2rem; } }

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

.archive_banner dt {
  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) {
    .archive_banner dt {
      line-height: 1em;
      font-size: 20px;
      /*font-size: divceil($fs, 10, rem);*/ } }
  @media screen and (max-width: 767px) {
    .archive_banner dt {
      line-height: 1em;
      font-size: 2rem; } }

.archive_banner dt span {
  position: relative;
  letter-spacing: 0.00em;
  display: inline-block;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .archive_banner dt span {
      line-height: 1.334em;
      font-size: 15px;
      /*font-size: divceil($fs, 10, rem);*/
      margin-left: 0.5rem;
      padding-right: 1.8rem; } }
  @media screen and (max-width: 767px) {
    .archive_banner dt span {
      line-height: 1.25em;
      font-size: 1.6rem;
      margin-left: 0.5rem;
      padding-right: 2rem; } }

.archive_banner dt span::before {
  content: "";
  position: absolute !important;
  background: #fff;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
  right: 0; }
  @media screen and (min-width: 768px) {
    .archive_banner dt span::before {
      width: 0.8rem;
      height: 0.2rem; } }
  @media screen and (max-width: 767px) {
    .archive_banner dt span::before {
      width: 1rem;
      height: 0.2rem; } }

.archive_banner dd {
  position: relative;
  display: block;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .archive_banner dd {
      line-height: 1em;
      font-size: 12px;
      /*font-size: divceil($fs, 10, rem);*/
      padding-left: 2.6rem; } }
  @media screen and (max-width: 767px) {
    .archive_banner dd {
      line-height: 1em;
      font-size: 1.3rem;
      padding-left: 3rem; } }

.archive_banner dd::after {
  content: '';
  position: absolute;
  width: 100%;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  left: 0;
  background: #fff;
  height: 1px;
  transition: ease-out 0.6s all; }
  @media screen and (min-width: 768px) {
    .archive_banner dd::after {
      width: 1.6rem;
      top: 0.7rem; } }
  @media screen and (max-width: 767px) {
    .archive_banner dd::after {
      width: 2rem;
      top: 0.6rem; } }

@media screen and (min-width: 768px) {
  .archive_banner:hover dd::after {
    background: #CC0000; } }

@media screen and (min-width: 768px) {
  #history .archive_banner:hover,
  #kv .archive_banner:hover {
    background: #fff !important;
    color: #CC0000 !important; } }

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