@charset "utf-8";
.for_tb {
  display: none !important;
}
.lay_rel {
  position: relative;
  clear: both;
}
.cts_tl {
  position: relative;
  text-align: center;
  font-size: 3.4em;
  line-height: 1.501;
  letter-spacing: 0.06em;
  width: fit-content;
  margin: 0 auto;
}
.cts_tl_line {
  content: "";
  border-bottom: solid 2px;
  width: 100%;
  display: block;
  margin: 1.9rem auto 0;
  transform: scaleX(0);
  width: 15rem;
}
#bg_body {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: #c2ecfd url(../images/bg_bone.png);
  background-size: 30.93% auto;
}
#wrapper {
  position: relative;
}
#main {
  color: var(--c-main);
}
#main section {
  opacity: 0;
}
.cts_tl_line {
  transform: scaleX(1);
  border-bottom-width: max(1px, 0.8vw);
}
/* bones */
.bones__tl {
  width: 87.734%;
  padding: 13.5% 0 0 5.9%;
  opacity: 0;
}
.story__text {
  text-align: center;
  font-size: 2.8rem;
  line-height: 1.658;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin: 4.1% 0 5.9%;
}
.story_tl {
  text-align: center;
  font-weight: 500;
  margin: 8.7% auto 0;
}
.anchor_story {
  position: absolute;
  top: 0;
  left: 0;
  margin: -5% 0 0;
}
.ctn_img_story {
  position: relative;
  width: 85.067%;
  margin: 0 auto;
  height: 0;
  padding: 0 0 70.7%;
  border-radius: 2em;
  overflow: hidden;
}
.ctn_img_story::after {
  content: "";
  background: url(../images/spacer.png) repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.ctn_img_story img {
  position: absolute;
  top: 0;
  left: 0;
}
.lists_story {
  width: 83.734%;
  margin: 0 auto;
}
.lists_story li {
  margin: 0 0 1.6%;
  position: relative;
}
.lists_story .story_arw {
  position: absolute;
  top: 50%;
  right: 0;
  width: 2.462%;
  margin: -2.2% 4.5% 0 0;
}
/* #dialogue */
#dialogue {
  padding-bottom: 5.3%;
  position: relative;
  z-index: 1;
}
#dialogue .cts_tl {
  padding: 11.3% 0 0;
  font-weight: 500;
}
.dialogue_text {
  font-size: 2.8rem;
  text-align: center;
  line-height: 1.7;
  margin: 3.4% 0 0;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.dialogue_link {
  display: block;
  margin: 6.5% auto 0;
  width: 87%;
}
.dialogue_btn {
  display: block;
  background: #fff;
  margin: 0 auto;
  font-size: 3.565em;
  color: #004ea2;
  width: 30rem;
  text-align: center;
  border-radius: 0.7rem;
  margin: 2.5% auto 0;
  padding: 0.5em 0 0.65em;
}
.dialogue_arw {
  display: inline-block;
  width: 0.5em;
  padding: 0 0 0 0.8em;
  margin: 0 -1.3em 0 0;
  position: relative;
  top: 0.1em;
}
.cts_thumb {
  display: block;
  position: relative;
}
.cts_thumb:before {
  content: "";
  width: 8.2em;
  height: 0;
  padding: 0 0 8.2em;
  margin: -4.1em;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #004ea2;
  opacity: 0.5;
  border-radius: 5em;
}
.cts_thumb:after {
  content: "";
  border-left: solid #fff 3em;
  border-top: solid transparent 1.45em;
  border-bottom: solid transparent 1.45em;
  border-right: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.5em -0.94em;
  opacity: 0.8;
}
.cts_thumb img {
  border-radius: 1rem;
}
.dialogue__caption {
  font-size: 2rem;
  text-align: center;
  display: block;
  color: #4a4a4a;
  letter-spacing: 0.08em;
  margin: 3.5% 0 0;
}
@media screen and (max-width: 736px) {
  .for_pc {
    display: none !important;
  }
}
@media screen and (min-width: 737px), print {
  .for_sp {
    display: none !important;
  }
  #bg_body {
    background-size: auto;
  }
  .inner {
    max-width: 1000px;
  }
  .bones__tl {
    width: 78.3%;
    padding: 8% 0 0 10.9%;
  }
  .cts_tl {
    font-size: 1.445em;
  }
  .cts_tl_line {
    margin: 0.9rem auto 0;
    width: 110px;
    border-width: 3px;
    position: relative;
    right: -2px;
  }
  .story_tl {
    font-size: 1.438em;
    margin: 0 auto;
    padding: 5.2% 0 0;
  }
  .story__text {
    font-size: 1.125em;
    line-height: 1.834;
    margin: 1.9% 0 4%;
  }
  .anchor_story {
    margin-top: 0;
  }
  .ctn_img_story {
    width: 91.7%;
    padding: 0px 0 51.5%;
    border-radius: 10px;
    margin-bottom: 4.3%;
    background: linear-gradient(to right, #006fe3, #0190f0, #0165dd);
  }
  .item_img_story {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
  }
  .box_num_story {
    position: absolute;
    top: 0;
    left: 0;
    width: 7.55%;
    overflow: hidden;
    padding: 0 0 7.55%;
    margin: 12.364% 0 0 72.758%;
  }
  .ctn_img_story .txt_img_story {
    width: 62.364%;
    margin: 8.1% 0 0 18.5%;
  }
  .ctn_img_story .for_tb {
    z-index: 2;
  }
  .lists_story {
    width: 91.7%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .lists_story li {
    width: 47.922%;
    margin: 0 0 4.2%;
  }
  .lists_story li a {
    display: block;
    transition: opacity 200ms ease-out;
  }
  .ctn_img_story img,
  .lists_story img {
    width: 100%;
    height: auto;
  }
  .lists_story a:hover {
    opacity: 0.8;
  }
  .lists_story a:hover .story_arw {
    animation: btn_arw 800ms ease-out;
  }
  #dialogue .cts_tl {
    padding: 3.9% 0 0;
  }
  /* #dialogue */
  #dialogue {
    padding-bottom: 101px;
  }
  .dialogue_text {
    margin: 2.1% 0 0;
    font-size: 1.125em;
    line-height: 1.834;
  }
  .dialogue_link {
    width: 756px;
    margin: 4.2% auto 0;
    position: relative;
    z-index: 1;
  }
  .cts_thumb:before {
    padding: 0 0 5.68em;
    margin: -2.84em;
    width: 5.68em;
  }
  .cts_thumb:after {
    margin: -1em -0.64em;
    border-left-width: 2em;
    border-top-width: 1em;
    border-bottom-width: 1em;
  }
  .cts_thumb:before,
  .cts_thumb:after {
    transition: transform 200ms cubic-bezier(0.13, 0.353, 0.193, 0.98);
    backface-visibility: hidden;
  }
  .cts_link:hover .cts_thumb:before {
    -ms-transform: scale(1.14);
    -webkit-transform: scale(1.14);
    transform: scale(1.14);
  }
  .cts_link:hover .cts_thumb:after {
    -ms-transform: scale(1.23);
    -webkit-transform: scale(1.23);
    transform: scale(1.23);
  }
  .dialogue__caption {
    font-size: 10px;
    margin: 1.7% 0 0;
  }
  .dialogue_btn {
    margin: 0 auto;
    margin: 1.3% auto 0;
    font-size: 1.375em;
    width: 8.6em;
    transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 4px;
    position: relative;
    z-index: 1;
  }
  .dialogue_btn:hover {
    opacity: 0.8;
  }
  .dialogue_btn:hover .dialogue_arw {
    animation: btn_arw 800ms ease-out;
  }
  /* #footer */
  .footer_top {
    left: 0;
    height: 418px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .footer_top:after {
    content: "";
    display: block;
    width: 100%;
    background: #fff;
    flex-grow: 1;
  }
  .footer_top .lay_for_pc {
    position: relative;
    top: 0;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    width: 2560px;
  }
}
@media print {
  #main {
    padding-bottom: 150px;
  }
}