@charset "UTF-8";
/* Scss Document */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@900&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho:wght@400;700;800&family=Zen+Antique&family=Zen+Kaku+Gothic+Antique:wght@400;900&family=Zen+Antique&family=Zen+Old+Mincho&display=swap");
/*変数(ブレイクポイント)設定(必要に応じて数値を変更)*/
/* 全体設定 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
  list-style-type: none;
  -webkit-text-size-adjust: 100%; }

img, a img {
  border: none;
  vertical-align: text-bottom;
  -ms-interpolation-mode: bicubic; }

a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/*画像リンク関連*/
a:active, a:focus {
  outline: none; }

a img {
  border: none; }

img {
  padding: 0px;
  margin: 0px;
  border: none; }

body {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  background: #000;
  background-size: cover; }
  @media screen and (max-width: 1280px) {
    body {
      /*引数を省略*/
      background: #000; } }

/*Header*/
header {
  width: 95vw;
  height: 60px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 1280px) {
    header {
      /*引数を省略*/
      height: calc(100vw / 1280 * 30); } }
  @media screen and (max-width: 1024px) {
    header {
      /*引数を省略*/
      height: calc(100vw / 1024 * 80); } }
  @media screen and (max-width: 650px) {
    header {
      /*引数を省略*/
      height: calc(100vw / 1024 * 100); } }

.pc {
  display: block; }
  @media screen and (max-width: 800px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 800px) {
    .sp {
      display: block; } }

.back1 {
  background: #742c2d; }

.back2 {
  background: url("../img/back_sptop_2.jpg") no-repeat top center #000;
  background-size: 100%; }

.top_img_a {
  position: absolute;
  width: 64vw;
  margin: auto;
  right: 0;
  left: 0;
  top: calc(100vw / 1920 * 100);
  display: block; }
  @media screen and (max-width: 1280px) {
    .top_img_a {
      /*引数を省略*/
      top: calc(100vw / 1024 * 100); } }
  @media screen and (max-width: 1024px) {
    .top_img_a {
      /*引数を省略*/ } }
  @media screen and (max-width: 650px) {
    .top_img_a {
      /*引数を省略*/
      bottom: calc(100vw / 1024 * 600);
      width: 95vw; } }

.top_img_b {
  position: absolute;
  width: 64vw;
  margin: auto;
  right: 0;
  left: 0;
  top: calc(100vw / 1920 * 80);
  display: block; }
  @media screen and (max-width: 1280px) {
    .top_img_b {
      /*引数を省略*/
      top: calc(100vw / 1024 * 60); } }
  @media screen and (max-width: 800px) {
    .top_img_b {
      /*引数を省略*/
      top: calc(100vw / 1024 * 100); } }
  @media screen and (max-width: 650px) {
    .top_img_b {
      /*引数を省略*/
      top: calc(100vw / 1024 * 50);
      width: 85vw; } }

.main1 {
  background: url("../img/main_back.jpg") no-repeat center bottom;
  background-size: cover;
  width: 100%;
  height: calc(100vw / 1920 * 900);
  overflow: hidden;
  position: relative; }
  @media screen and (max-width: 1280px) {
    .main1 {
      /*引数を省略*/
      background-size: cover;
      height: calc(100vw / 1024 * 700); } }
  @media screen and (max-width: 800px) {
    .main1 {
      /*引数を省略*/
      background-size: cover;
      height: calc(100vw / 1024 * 800); } }
  @media screen and (max-width: 650px) {
    .main1 {
      /*引数を省略*/
      background-size: cover;
      height: calc(100vw / 1024 * 1200); } }

.main2 {
  width: 100%;
  height: calc(100vw / 1920 * 1700);
  overflow: hidden;
  position: relative; }
  @media screen and (max-width: 1280px) {
    .main2 {
      /*引数を省略*/
      background: none;
      background-size: cover;
      height: calc(100vw / 1024 * 1200); } }
  @media screen and (max-width: 800px) {
    .main2 {
      /*引数を省略*/
      background: none;
      background-size: cover;
      height: calc(100vw / 1024 * 1400); } }
  @media screen and (max-width: 650px) {
    .main2 {
      /*引数を省略*/
      background: none;
      background-size: cover;
      height: calc(100vw / 1024 * 1800); } }

.haisinbi {
  color: #FFF;
  position: absolute;
  font-size: 36px;
  font-family: "oradano-mincho-gsrr", sans-serif;
  margin: auto;
  background: #000;
  text-align: center;
  overflow: hidden;
  padding: 15px 0;
  width: 500px;
  right: 0;
  left: 0;
  top: calc(100vw / 1920 * 660);
  transition: .3s; }
  @media screen and (max-width: 1280px) {
    .haisinbi {
      left: 0;
      right: 0;
      font-size: 30px;
      top: auto;
      bottom: calc(100vw / 1024 * 230);
      text-align: center;
      text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4); } }
  @media screen and (max-width: 650px) {
    .haisinbi {
      left: 0;
      right: 0;
      font-size: 24px;
      bottom: calc(100vw / 1024 * 460);
      width: 80%; } }
  @media screen and (max-width: 380px) {
    .haisinbi {
      left: 0;
      right: 0;
      font-size: 18px;
      bottom: calc(100vw / 1024 * 450); } }

.haisinbi2 {
  color: #FFF;
  position: absolute;
  font-size: 36px;
  font-family: "oradano-mincho-gsrr", sans-serif;
  margin: auto;
  background: #000;
  text-align: center;
  overflow: hidden;
  padding: 15px 0;
  width: 500px;
  right: 0;
  left: 0;
  top: calc(100vw / 1920 * 560);
  transition: .3s; }
  @media screen and (max-width: 1280px) {
    .haisinbi2 {
      left: 0;
      right: 0;
      font-size: 30px;
      top: auto;
      bottom: calc(100vw / 1024 * 230);
      text-align: center;
      text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 15px rgba(0, 0, 0, 0.4); } }
  @media screen and (max-width: 650px) {
    .haisinbi2 {
      left: 0;
      right: 0;
      font-size: 24px;
      bottom: calc(100vw / 1024 * 460);
      width: 80%; } }
  @media screen and (max-width: 380px) {
    .haisinbi2 {
      left: 0;
      right: 0;
      font-size: 18px;
      bottom: calc(100vw / 1024 * 450); } }

.link_btn_top a {
  position: absolute;
  margin: auto;
  top: calc(100vw / 1920 * 760);
  right: 0;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  border: 2px #000 solid;
  max-width: 250px;
  padding: 10px 25px;
  font-family: "Noto Sans JP", sans-serif;
  color: #FFF;
  line-height: 1.8;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  font-weight: bold;
  background: #15588f;
  background-position: 1% 50%;
  background-size: 100% auto;
  transition: all 0.3s ease-out; }
  .link_btn_top a:hover {
    transform: scale(1.05); }
  @media screen and (max-width: 1280px) {
    .link_btn_top a {
      /*引数を省略*/
      position: absolute;
      left: 0;
      right: 0;
      top: auto;
      bottom: 11.71875vw;
      margin: 0 auto 0%;
      max-width: 450px;
      border-radius: 0px; } }
  @media screen and (max-width: 650px) {
    .link_btn_top a {
      /*引数を省略*/
      position: absolute;
      left: 0;
      right: 0;
      top: auto;
      bottom: 19.53125vw;
      margin: 0 auto 0%;
      max-width: 80%;
      border-radius: 0; } }
  @media screen and (max-width: 380px) {
    .link_btn_top a {
      /*引数を省略*/
      position: absolute;
      left: 0;
      right: 0;
      top: auto;
      bottom: 19.53125vw;
      margin: 0 auto 0%;
      width: 70%;
      max-width: auto;
      border-radius: 0;
      font-size: 4.5vw; } }

.link_btn_top2 a {
  position: absolute;
  margin: auto;
  bottom: calc(100vw / 1920 * 0);
  right: 0;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  border: 2px #000 solid;
  border-radius: 30px;
  max-width: 250px;
  padding: 10px 25px;
  font-family: "Noto Sans JP", sans-serif;
  color: #000000;
  line-height: 1.8;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  font-weight: bold;
  background: #FFF;
  background-position: 1% 50%;
  background-size: 100% auto;
  transition: all 0.3s ease-out; }
  .link_btn_top2 a:hover {
    transform: scale(1.05); }
  @media screen and (max-width: 1280px) {
    .link_btn_top2 a {
      /*引数を省略*/
      position: absolute;
      left: 0;
      right: 0;
      top: auto;
      bottom: 11.71875vw;
      margin: 0 auto 0%;
      max-width: 450px; } }
  @media screen and (max-width: 650px) {
    .link_btn_top2 a {
      /*引数を省略*/
      position: absolute;
      left: 0;
      right: 0;
      top: auto;
      bottom: 19.53125vw;
      margin: 0 auto 0%;
      max-width: 80%; } }
  @media screen and (max-width: 380px) {
    .link_btn_top2 a {
      /*引数を省略*/
      position: absolute;
      left: 0;
      right: 0;
      top: auto;
      bottom: 19.53125vw;
      margin: 0 auto 0%;
      width: 70%;
      max-width: auto;
      font-size: 4.5vw; } }

.story1 {
  background: url("../img/back_2.jpg") no-repeat top center #800000;
  background-size: cover;
  padding: 5vw 0vw;
  position: relative; }
  @media screen and (max-width: 1024px) {
    .story1 {
      /*引数を省略*/ } }

.story2 {
  background: no-repeat top left;
  background-size: cover;
  padding: 5vw 0vw;
  position: relative; }
  @media screen and (max-width: 1024px) {
    .story2 {
      /*引数を省略*/ } }

.sy_txt {
  background: rgba(0, 0, 0, 0.4); }

.sy_txt2 {
  background: rgba(0, 0, 0, 0.8); }

.sy_txt, .sy_txt2 {
  border: 3px solid #bf3f3f;
  overflow: hidden;
  color: #FFF;
  width: calc(980 / 1920 *100vw);
  margin: calc(100vw / 1920 * 25) auto calc(100vw / 1920 * 45);
  font-size: calc(22 / 1920 * 100vw);
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  position: relative;
  z-index: 6; }
  .sy_txt p, .sy_txt2 p {
    margin: calc(100vw / 1920 * 25) auto calc(100vw / 1920 * 20);
    font-size: calc(18 / 1920 * 100vw); }
  .sy_txt h3, .sy_txt2 h3 {
    text-align: left;
    color: #fff;
    font-family: "Zen Antique", serif;
    font-size: calc(33 / 1920 * 100vw);
    margin: calc(100vw / 1920 *20 ) auto 1px 50px;
    position: relative;
    width: 80%; }
    .sy_txt h3 div, .sy_txt2 h3 div {
      margin: 0;
      padding: 0; }
    .sy_txt h3 span, .sy_txt2 h3 span {
      color: #00ff00;
      font-size: 16px;
      margin: 0;
      padding: 0;
      position: absolute;
      left: 5px;
      bottom: -15px; }
  .sy_txt h3:before, .sy_txt2 h3:before {
    position: absolute;
    top: 5px;
    width: 5px;
    content: '';
    border-top: solid 55px #00ff00; }
  .sy_txt h3:before, .sy_txt2 h3:before {
    left: -10px; }
  .sy_txt div, .sy_txt2 div {
    margin: calc(100vw / 1920 *40 ) auto calc(100vw / 1920 * 50 );
    width: 85%; }
  @media screen and (max-width: 1280px) {
    .sy_txt, .sy_txt2 {
      font-size: calc(24 / 1024 * 100vw); }
      .sy_txt p, .sy_txt2 p {
        font-size: 14px; } }
  @media screen and (max-width: 1024px) {
    .sy_txt, .sy_txt2 {
      width: calc(700 / 1024 *100vw);
      font-size: calc(22 / 1024 * 100vw);
      margin: calc(100vw / 1024 * 25) auto calc(100vw / 1024 * 145); }
      .sy_txt p, .sy_txt2 p {
        margin: calc(100vw / 1024 * 25) auto calc(100vw / 1024 *40); }
      .sy_txt div, .sy_txt2 div {
        margin: calc(100vw / 1024 *20 ) auto;
        width: 80%; } }
  @media screen and (max-width: 650px) {
    .sy_txt, .sy_txt2 {
      width: 90%;
      font-size: 15.5px; }
      .sy_txt p, .sy_txt2 p {
        margin: calc(100vw / 1024 * 65) auto calc(100vw / 1024 *60);
        font-size: 12px; }
      .sy_txt h3, .sy_txt2 h3 {
        font-size: 26px;
        width: 90%;
        margin-bottom: 3.5vw; }
      .sy_txt div, .sy_txt2 div {
        width: 90%;
        margin: calc(100vw / 1024 *80 ) auto calc(100vw / 1024 *300 ); } }

@media screen and (max-width: 800px) {
  .chara {
    width: 100%;
    margin: 0 auto 15vw;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center; } }

.chara_a, .chara_b, .chara_c {
  position: absolute;
  margin: auto;
  z-index: 1;
  height: calc(100vw / 1920 * 600); }
  @media screen and (max-width: 1280px) {
    .chara_a, .chara_b, .chara_c {
      height: calc(100vw / 1024 * 400); } }
  @media screen and (max-width: 800px) {
    .chara_a, .chara_b, .chara_c {
      position: static;
      height: calc(100vw / 1024 * 380); } }

.chara_a {
  top: calc(100vw / 1920 * 20);
  left: calc(120 / 1920 * 100vw); }
  @media screen and (max-width: 1280px) {
    .chara_a {
      top: calc(100vw / 1024 * 20);
      left: calc(20 / 1024 * 100vw); } }
  @media screen and (max-width: 800px) {
    .chara_a {
      top: calc(100vw / 1024 * 20);
      left: calc(120 / 1024 * 100vw); } }

.chara_b {
  top: calc(100vw / 1920 * 420);
  right: calc(120 / 1920 * 100vw); }
  @media screen and (max-width: 1280px) {
    .chara_b {
      top: calc(100vw / 1024 * 420);
      right: calc(20 / 1024 * 100vw); } }
  @media screen and (max-width: 800px) {
    .chara_b {
      top: calc(100vw / 1024 * 420);
      right: calc(120 / 1024 * 100vw); } }

.chara_c {
  top: calc(100vw / 1920 * 820);
  left: calc(220 / 1920 * 100vw); }
  @media screen and (max-width: 1280px) {
    .chara_c {
      top: calc(100vw / 1024 * 820);
      left: calc(60 / 1024 * 100vw); } }
  @media screen and (max-width: 800px) {
    .chara_c {
      top: calc(100vw / 1024 * 820);
      left: calc(220 / 1024 * 100vw); } }

.link_btn a {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: .5vw auto;
  border: 3px solid #000;
  max-width: 250px;
  padding: 10px 25px;
  font-family: "Noto Sans JP", sans-serif;
  color: #FFF;
  line-height: 1.8;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  background: #15588f;
  background-position: 1% 50%;
  background-size: 100% auto;
  transition: all 0.3s ease-out; }
  @media screen and (max-width: 650px) {
    .link_btn a {
      /*引数を省略*/
      position: relative;
      left: 0;
      right: 0;
      margin: 0 auto 15vw;
      border-radius: 999px; } }

.link_btn a:hover {
  transform: scale(1.05); }

.link_btn a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid;
  border-right: 3px solid;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out; }

.link_btn2 a {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: .5vw auto;
  border: 3px solid #000;
  border-radius: 30px;
  max-width: 250px;
  padding: 10px 25px;
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
  line-height: 1.8;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  background: #FFF;
  background-position: 1% 50%;
  background-size: 100% auto;
  transition: all 0.3s ease-out; }
  @media screen and (max-width: 650px) {
    .link_btn2 a {
      /*引数を省略*/
      position: relative;
      left: 0;
      right: 0;
      margin: 0 auto 15vw;
      border-radius: 999px; } }

.link_btn2 a:hover {
  transform: scale(1.05); }

.link_btn2 a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid;
  border-right: 3px solid;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out; }

.list_info {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around; }
  .list_info li {
    display: flex;
    align-items: center;
    width: 45%; }
    .list_info li p {
      background: #FFF;
      color: #ad0002;
      font-weight: 600;
      width: 100px;
      text-align: center;
      margin-right: 3%; }
  @media screen and (max-width: 1024px) {
    .list_info {
      width: 60%; } }
  @media screen and (max-width: 800px) {
    .list_info {
      display: block;
      width: 85%; }
      .list_info li {
        width: 100%; }
        .list_info li:first-child {
          margin-bottom: 1.5rem; } }

.sns_btn {
  width: 240px;
  margin: 10px auto;
  display: flex;
  justify-content: space-around;
  align-items: center; }
  .sns_btn li {
    list-style: none; }
    .sns_btn li img {
      height: calc(100vw / 1920 *30); }
  @media screen and (max-width: 1920px) {
    .sns_btn li img {
      height: calc(100vw / 1920 *30); } }
  @media screen and (max-width: 1024px) {
    .sns_btn li img {
      height: calc(100vw / 1024 *30); } }
  @media screen and (max-width: 800px) {
    .sns_btn li img {
      height: calc(100vw / 1024 *40); } }
  @media screen and (max-width: 650px) {
    .sns_btn li img {
      height: calc(100vw / 1024 *80); } }

hr {
  background: #3E3E3E; }

footer {
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  position: static;
  bottom: 0;
  margin: 0vh auto 0;
  left: 0;
  right: 0;
  color: #FFF; }
  @media screen and (max-width: 1280px) {
    footer {
      /*引数を省略*/
      position: static;
      margin-top: 0%;
      width: 100vw;
      max-width: 100%;
      text-align-last: center; } }

.clogo_list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 3vw auto 0; }
  .clogo_list img {
    height: 60px; }
  @media screen and (max-width: 1280px) {
    .clogo_list {
      flex-wrap: wrap;
      width: 80%;
      margin: 10vw auto 0; }
      .clogo_list img {
        height: calc(100vw / 1024 * 80); } }
  @media screen and (max-width: 380px) {
    .clogo_list {
      flex-wrap: wrap;
      width: 80%; }
      .clogo_list img {
        height: calc(100vw / 1024 * 120); } }

.link_list {
  display: flex;
  width: 30%;
  margin: 1.5rem auto;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 1280px) {
    .link_list {
      width: 50%; } }
  @media screen and (max-width: 800px) {
    .link_list {
      width: 80%; } }

.kmclogo img {
  display: block;
  margin: 5px auto; }
  @media screen and (max-width: 1280px) {
    .kmclogo img {
      width: calc(100 / 1024 * 100vw); } }
  @media screen and (max-width: 800px) {
    .kmclogo img {
      width: calc(250 / 1024 * 100vw); } }

.logo2 img {
  width: calc(300 / 1920 * 100vw); }
  @media screen and (max-width: 1280px) {
    .logo2 img {
      width: calc(300 / 1024 * 100vw); } }
  @media screen and (max-width: 800px) {
    .logo2 img {
      width: calc(450 / 1024 * 100vw); } }

.copy {
  text-align: center;
  color: #FFF;
  font-size: 10px;
  margin: 0 auto; }