@charset "UTF-8";
/* CSS Document */

.main-header {
  background: hsl(0, 0%, 100%);
  background: linear-gradient(
    180deg,
    hsl(0, 0%, 100%) 0%,
    hsl(0, 0%, 100%) 70%,
    hsl(40, 23%, 95%) 100%
  );
}

.main-header__wrapper {
  background: url("../img/top_hero.webp") center top no-repeat;
  background-size: contain;
  position: relative;
  background-position-x: 8vw;
}
.main-header__wrapper {
  opacity: 0;
  animation: 0.5s fadeIn 0.5s forwards;
}
.ts_copy--img {
  width: 100%;
}

.ts_copy--img-sp      { display: none; }

.main-header__inner  { position: relative;
  opacity: 0;
  animation: 1.25s fadeIn 0.75s forwards; }

.main-header__inner_bnrwrap       { position: absolute; top: 860px; left:205px }
@media (max-width: 1380px) {
  .main-header__inner_bnrwrap       { position: absolute; top: calc(860 / 1380 * 100vw); left:calc(205 / 1380 * 100vw); }
}

.main-header__inner_bnrwrap a      { display: block; }

.main-header__inner_bnrwrap-img   { width: calc(252 / 1380 * 100vw); max-width: 252px; }



.main-header__inner_bnrwrap2       { position: absolute; top: 810px; left:818px }
@media (max-width: 1380px) {
  .main-header__inner_bnrwrap2       { position: absolute; top: calc(810 / 1380 * 100vw); left:calc(850 / 1380 * 100vw); }
}

.main-header__inner_bnrwrap2 a      { display: block; }

.main-header__inner_bnrwrap-img2   { width: calc(460 / 1380 * 100vw); max-width: 460px; }

.main-header__inner .update_patch-menu  { width: 10%; line-height: 1.9vw; }

@media screen and (min-width: 768px) {

  .main-header__inner .update_patch-menu  { font-size: 0.9vw; }

}



@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

a.inact               { pointer-events: none; filter: grayscale(100%) brightness(60%); }

.hdplayer--wrapper      { max-width: 1200px; margin: 0 auto; justify-content: center; }
.section_hdbnr          { max-width: 1200px; margin: 0 auto; }

.bnr-wrap               { box-sizing: border-box; padding:0 1em; margin-bottom: 5vw; }

.hdplayer--wrapper .bnr-wrap               { margin-bottom: 1em;  }

.buginfo--btn {
  font-family: "Noto Serif JP", serif;
  background: linear-gradient( 0deg, rgba(137, 103, 31, 1) 0%, rgba(149, 110, 27, 1) 35%, rgba(194, 146, 46, 1) 100% );
  color: #fff;
  display: block;
  margin: 0.5em auto 6.5vw;
  max-width: 22em;
  text-align: center;
  border-radius: 0.75em;
  padding: 1em 1.5em;
  line-height: 1;
  position: relative;
  font-size: 1.2em;
}

.bnr-wrap a                   { position: relative; }
 
.buginfo--btn .link_mr        { margin-right: 0.5em; }
.buginfo--btn b               { margin-left: 0.5em; font-size: 0.8em; }
.buginfo--btn .update_patch   { left: 0; }

.section_hdbnr .update_patch,
.section_hdplayer .update_patch {
  z-index: 3;
  color: #fff;
  background-color: hsl(0, 100%, 36%);
  font-size: 0.9em;
  border-radius: 0.25em;
  padding: 0.25em 0.75em;
  margin-bottom: 1em;
  display: inline-block;
  text-align: center;
  text-indent: 0;
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 567px) {

  .section_hdbnr .update_patch,
.section_hdplayer .update_patch { font-size: 0.45em; padding: 0.15em 0.5em; }

}

.buginfo--btn .update_patch     { margin-bottom: 0.5em; font-family: sans-serif; font-size: 0.7em; }

hr.temp_hr            { margin: 0.5em auto 6.5vw; border: none; }

.section_hdplayer .update_patch.no_update     { background: none; }



@media (max-width: 767px) {

  .hdbnr--wrapper .bnr-wrap               { width: 80%; margin: 0 auto 5vw; }
  
  .buginfo--btn                 { margin: 0.1em auto 15vw; width: 80%; max-width: 100%; font-size: 1.5em;  }
  hr.temp_hr                    { margin: 0.1em auto 5vw; }

}



.section__feature {
  background: url("../img/2nd_bg.webp") center top no-repeat;
  background-size: cover;
  position: relative;
  margin: 10vw 0;
}

.section__feature .text_content {
  font-size: 2vw;
  line-height: 1.8;
  max-width: 100%;
}

.section__feature .pure-img {
  margin: 0 auto;
}

.section__movie {
  text-align: center;
  margin-top: 0;
}
.mov_box.mov_box-mid h3 {
  font-size: 2.5vw;
  color: #795a1c;
}

.media_article h2,
.section__system h2,
.section__movie h2 {
  font-size: 4.5vw;
  color: #795a1c;
}

.section__system {
  text-align: center;
  margin: 10vw 0;
}

.system_block--wrapper {
  margin-top: 5vh;
}

.system_block {
  background: url("../img/top_system_bg.webp") center top no-repeat;
  background-size: cover;
  position: relative;
  text-align: left;
  padding-bottom: 2.5vw;
}

.system_block_body--wrapper {
  width: 88%;
  margin: 3vw auto 0;
}

.system_block--title {
  font-size: 4vw;
  color: #fff;
  text-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.6);
  background-color: #b29f6e;
  display: inline-block;
  padding: 0em 1.1em 0.15em;
  line-height: 1.2;
  margin-top: 0.2em;
}
.system_block--catch {
  font-size: 4.5vw;
  color: #551400;
  letter-spacing: -0.04em;
  border-left: 3px solid #b29f6e;
  padding-left: 0.3em;
  line-height: 1.5;
}

.tight_spc {
  letter-spacing: -0.1em;
  font-size: 91%;
}

.body--wrapper {
  margin-top: -4vw;
}

.system_block--copy {
  margin-top: 7vw;
  margin-right: 0.2em;
  line-height: 1.8;
  font-size: 1.7vw;
  padding: 0 1em;
} /* font-size: 1.6vw; */
.system_block--img {
}

.system_block--img img {
  margin: 0 auto;
  box-shadow: 2px 2px 4px hsla(0, 0%, 0%, 0.3);
}

.system_block--btn {
  font-family: "Noto Serif JP", serif;
  background: linear-gradient(
    0deg,
    rgba(137, 103, 31, 1) 0%,
    rgba(149, 110, 27, 1) 35%,
    rgba(194, 146, 46, 1) 100%
  );
  color: #fff;
  display: block;
  margin: 1.5em auto 3em;
  max-width: 10em;
  text-align: center;
  border-radius: 5px;
  padding: 1em 3.5em;
  line-height: 1;
  position: relative;
} /* margin-top: -2vw; */

.system_block--btn.update::after {
  color: #fff;
  background-color: hsl(0, 100%, 36%);
  font-size: 0.8em;
  border-radius: 0.25em;
  padding: 0.25em 0.75em;
  margin-bottom: 1em;
  display: inline-block;
  text-align: center;
  text-indent: 0;
  position: absolute;
  top: -18%;
  left: 0;
  content: "UPDATE";
  animation: flash 4s ease infinite;
}

.system_block--btn .update_patch {
  color: #fff;
  background-color: hsl(0, 100%, 36%);
  font-size: 0.9em;
  border-radius: 0.25em;
  padding: 0.25em 0.75em;
  margin-bottom: 1em;
  display: inline-block;
  text-align: center;
  text-indent: 0;
  position: absolute;
  top: -20%;
  left: 0;
}

.system_block-ex {
  margin: 5vw auto;
  margin: 5vw auto;
  width: 87%;
  max-width: 1280px;
  display: block;
  position: relative;
}
.system_block-ex a {
  display: block;
}
.system_block-ex a img {
  margin: 0 auto;
}

.system_block-ex .new {
  color: #fff;
  background-color: hsl(0, 100%, 36%);
  font-size: 0.8em;
  border-radius: 0.25em;
  padding: 0.25em 0.75em;
  margin-bottom: 1em;
  display: inline-block;
  text-align: center;
  text-indent: 0;
  position: absolute;
  top: -18%;
  left: 0;
}

.twinkle {
  animation: flash 4s ease infinite;
  display: block;
}

@keyframes flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* teaser */

.wrapper {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.main_box {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.section_box {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.title_box .t_center {
  font-size: 1.1em;
  font-weight: bold;
}

.top_box {
  width: 100%;
  margin: 0 auto;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 5;
  top: -30px;
}

.top_box img,
.bnr_box img,
.mov_box img,
.btn_box img,
.footer_box img,
.top_left img,
.r_box img,
.collabo_box img,
.title_box img {
  width: 100%;
  height: auto;
}

.top_logo {
  width: 96%;
  max-width: 768px;
  position: absolute;
  bottom: -8vh;
  left: 0;
  right: 0;
  margin: auto;
}

.top_sub_logo {
  width: 60%;
  max-width: 600px;
  height: auto;
  margin: 1vh auto 0;
}

.top_left {
  width: 100%;
  max-width: 250px;
  display: block;
  position: absolute;
  top: 20px;
  left: 3%;
  z-index: 6;
}

.title_box {
  width: 100%;
  margin: 10vh auto 0;
  text-align: center;
}

.img_box {
  width: 100%;
  margin: 0 auto;
  max-width: 1080px;
}

.content_box {
  width: 100%;
  margin: 2vh auto 10vh;
  text-align: left;
  max-width: 1280px;
}

.content_box h3,
.mov_box h3 {
  color: #7d7754;
  font-size: 4vw;
  line-height: 1.4em;
  padding-bottom: 0.4em;
}

.text_content {
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
}

.bnr_box {
  width: 90%;
  max-width: 560px;
  margin: 10vh auto 10vh;
}

.bnr_box img {
  box-shadow: 2px 4px 10px rgb(23, 23, 23);
}

.mov_box {
  width: 95%;
  max-width: 820px;
  margin: 6vh auto 3vh;
  text-align: center;
}

.mov_box-mid {
  max-width: 620px;
}

.mov_box-top          {  }
.mov_box-top h3         { color: #795a1c; }
.mov_box-top .iframe-wrapper iframe     { max-width: 980px; }

.mov_box-caption        {  margin-top: 2vw; font-size: 2vw; line-height: 1.5; max-width: 100%; }

.r_box {
  width: 80%;
  max-width: 800px;
  margin: 15vh auto 20vh;
}


.r_box.r_box--bnr2        { width: 90%; max-width: 1000px; margin: 5vh auto 5vh; }

.btn_box {
  width: 95%;
  max-width: 620px;
  margin: 10vh auto 10vh;
}

.float_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.w100set {
  width: 96%;
  margin: 5px 2%;
  display: block;
}

.w50set {
  width: 46%;
  margin: 5px 2%;
  display: block;
}

.collabo_box {
  width: 90%;
  max-width: 320px;
  margin: 3em auto 0;
  display: block;
}



.sub_content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 2vw;
  background: url("../img/base_sub.png");
  background-size: contain;
  background-repeat: repeat-y;
  display: block;
}

.sub_content_box {
  width: 80%;
  max-width: 890px;
  margin: 0 auto;
  padding: 1.5em 0 3em 0;
  display: flex;
  flex-wrap: wrap;
}

.sub_content_box .title {
  width: 90%;
  margin: 0 auto;
}

.sub_content_box .left {
  width: 45%;
  margin-left: 3.5%;
  margin-right: 1.5%;
}

.sub_content_box .right {
  width: 45%;
  margin-left: 1.5%;
  margin-right: 3.5%;
  line-height: 1.7em;
}

.sub_content_box h4 {
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  font-size: 1.7em;
  line-height: normal;
  margin-bottom: 0.2em;
  color: #402904;
}

.sub_con_h {
  margin: 6em 0 !important;
}

.sub_box_line {
  position: relative;
  height: 3px;
  border-width: 0;
  width: 100%;
  background-image: -webkit-linear-gradient(
    left,
    transparent 0%,
    #7d2f2f 20%,
    #7d2f2f 80%,
    transparent 100%
  );
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    #7d2f2f 20%,
    #7d2f2f 80%,
    transparent 100%
  );
}

/* switch */
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 6em auto 0;
}

.tab-label {
  background: rgb(157, 130, 84);
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  padding: 0 1em 0.1em;
  color: #fffdcc;
  font-size: 1.6em;
  line-height: normal;
  margin: 0 0.4em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.1s;
  transition: all 0.5s 0s ease;
  opacity: 0.7;
  order: -1;
}

.tab-label:hover {
  background: rgb(125, 47, 47) !important;
  color: #fff;
  opacity: 1;
}

.tab-content {
  width: 100%;
  display: none;
}

.tab-switch:checked + .tab-label {
  background: rgb(125, 47, 47);
  color: #fff;
  opacity: 1;
}

.tab-switch:checked + .tab-label + .tab-content {
  display: block;
}

.tab-switch {
  display: none;
}

/* youttube */

.iframe-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 620px;
}

.news_section {
  margin: 0 auto 0;
  width: 100%;
  padding: 1.5% 0 2.5%;
  background: linear-gradient(hsla(40, 26%, 45%, 0.75), hsla(40, 20%, 70%, 0.75));
  position: relative;
  top: -32vw;
  /* display: flex; */
}

.news_section h3        { font-family: "Noto Serif JP", serif; text-align: center; font-size: 1.5em; font-weight: bold; margin: 0 auto 0.5em;
  /* text-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.3); */ color:hsl(51, 78%, 96%) ;
  
  color: transparent; 
	background: linear-gradient( hsl(51, 78%, 96%) 20% ,hsl(53, 25%, 80%) 100%);
	-webkit-background-clip: text; filter: drop-shadow(0 1px 2px hsla(0, 0%, 0%, 0.4)); }


main {
  position: relative;
  top: -22vw;
}
.main-wrapper footer {
  margin-top: -22vw;
}

.news_slick_wrap {
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
}

.news_wrap {
  width: 100%;
}
.news_wrap a {
   display: block;
  margin: 0 auto;
  border: 3px solid transparent;
}

.news_box {
  box-sizing: border-box;
  max-width: 410px;
  width: 95%;
  margin: 0 auto;
  background: url("../img/top_news_bg.webp") center top no-repeat;
  background-size: cover;
  background-color: hsla(0, 0%, 100%, 1);
  padding-bottom: 1px;
  box-shadow: 0 0 6px hsla(0, 0%, 0%, 0.5);
  padding: 0.5em 2.5% 0;
  display: flex;
  flex-wrap: wrap;
  object-fit: cover;
}

.news_box img {
  width: 100%;
}

.news_box--text {
  font-family: "Noto Serif JP", serif;
  font-weight: normal;
}

.news_box--date {
  color: hsl(0, 0%, 100%);
  padding: 0 10%;
  background-color: #89671f;
  padding: 0em 1.5em 0em 1.5em;
  border-radius: 0.3em;
  display: flex;
  margin: 0.85em 4%;
  align-items: center;
  font-size: 95%;
}

.news_box--text {
  color: hsl(0, 0%, 0%);
  font-size: 1.4vw;
  line-height: 1.2;
  margin-top: 0.8em;
  margin-bottom: 2em;
  padding: 0 1em;
  min-height: 3.6em;
}

.news_box--date b {
  padding: 0.5% 2.5%;
  font-size: 75%;
  background-color: rgb(202, 0, 0);
  color: rgb(255, 234, 50);
  border-radius: 0.9em;
  margin-right: 0.75em;
  margin-left: -1.6em;
  animation: flash 3.5s ease infinite;
}

.news_section .slick-list {
  max-width: 1180px;
  margin: 0 auto;
  width: calc(100% - 120px);
}

.slick-slide .news_box img {
  width: 92%; height: auto;
}

/*
.news_section .slick-prev::before       { content: url("../img/slick/arrow_l.png"); }
.news_section .slick-next::before      { content: url("../img/slick/arrow_r.png"); }
 */

.news_section .slick-next,
.news_section .slick-prev {
  width: 24px;
  height: 47px;
}

.news_section .slick-next {
  right: 0;
  z-index: 3;
}
.news_section .slick-prev {
  left: 0;
  z-index: 3;
}

.slick-slide img {
  margin: 0 auto;
  width: 100%;
}

/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;

  position: absolute;
  top: 50%;
  transform: translate(0, -50%);

  display: block;

  cursor: pointer;

  color: transparent;
  border: none;
  outline: none;
  background: transparent;

  width: 60px !important;
  height: 90px !important;
}

.slick-prev {
  background: url(../img/slick/arrow_l.png) no-repeat !important;
  background-size: 100% !important;
  left: 10%;
  z-index: 10;
  opacity: 0.8;
}

.slick-next {
  background: url(../img/slick/arrow_r.png) no-repeat !important;
  background-size: 100% !important;
  right: 10%;
  z-index: 10;
  opacity: 0.8;
}

.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  opacity: 0.2;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 1;
}


/* media_article */

.media_article      { width: 90%; max-width: 1280px; margin: 0 auto 5vw; text-align: center;  }

.media_article--btn {
  font-family: "Noto Serif JP", serif;
  background: linear-gradient( 0deg, rgba(137, 103, 31, 1) 0%, rgba(149, 110, 27, 1) 35%, rgba(194, 146, 46, 1) 100% );
  color: #fff;
  display: block;
  margin: 1.5em auto ;
  max-width: 18em;
  text-align: center;
  border-radius: 2em;
  padding: 1em 1.5em;
  line-height: 1;
  position: relative;
}

.media_article li       { padding: 0 1%;  box-sizing: border-box; font-weight: bold; }

.media_article--btn .link_mr        { margin-left: 0; margin-right: 0.5em; }

.media_article--btn strong          { display: block; margin-bottom: 1.0em; font-size: 0.85em; font-weight: normal; line-height: 1.4;  }




/* product info */

.product_info           { max-width: 1280px; margin: 10vw auto; width: 87%; }


.product_info_wrapper   { border: 2px solid hsl(43, 52%, 29%); border-left: 0px; border-right: 0px; padding: 4% 0; }

.product_info-logo      { margin: 0 auto; max-width: 380px; width: 98%; }
.product_info-data      { display: flex; flex-wrap:wrap; font-size: 90%; }

.product_info-data dt     { width: calc(26% - 0.8em) ; text-align: center; padding: 0.4em; background-color:hsl(43, 52%, 29%); color: #fff; margin-bottom: 1em;
  line-height: 1.0; }
.product_info-data dd     { width: 70%; margin-left: 4%; margin-bottom: 1em; }

.product_info--btn {
  font-family: "Noto Serif JP", serif;
  background: #aa2216 ;
  color: #fff;
  display: block;
  margin: 1.5em auto 3em;
  max-width: 12em;
  text-align: center;
  border-radius: 1.5em;
  padding: 1em 3.5em;
  line-height: 1;
  position: relative;
} /* margin-top: -2vw; */


/* popup */

.pop1       { display: none; }
.pop_form     { margin: 5px auto; text-align: right; font-size: 14px; }

.pop_inner    {  background-color: #fff;  }
.pop__btn_wrap img    { margin: 0 auto; filter: drop-shadow(3px 5px 0 #583232); }

.pop__btn_wrap        {  }
.pop__btn_wrap div    { box-sizing: border-box; margin: 4% 0; }

.pop__btn_wrap .pop_btm_line1        { margin-bottom: 0;  }

.pop_btm_line1 a      { display: block; width: 50%; margin: 0 auto;}

.pop_form     { margin-top: 0.5em; color: #fff; }

a#pop_close {
  background-color: #ddd;
  border: 1px #666 solid;
  padding: 2px 10px;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  /* margin-right: 1em; */
}





/* modal anm */

.wrap_hover:hover        { opacity: 0.7; }

#modal-back       { display: none;  }
#modal-back.fade   { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: hsla(0, 0%, 0%, 0.50);
  animation: fadein 0.6s 0s forwards ; z-index: 90;
  backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
}

.modal-content { width: 70%; min-width: 760px; max-width: 1500px; overflow-x: hidden;
    height: 100%; 
    position: absolute;
    right: 0;
    top: 0;
    background: url('../img/modal_bg.jpg') repeat ; box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.7);
  }

  .new_open_wrap .system_block--btn { margin: 0; font-size: 1.0em; width: auto; background: #ffffff;
    border: 2px solid #8b774e;
    border-radius: 2em;
    color: #8b774e;;
    padding: 0.5em 0.75em; margin: 0 auto; }

    .new_open_wrap .system_block--btn .link_mr        { filter: invert(70%) sepia(50%) saturate(290%) hue-rotate(-20deg); }   

  .mod-ft   { height: 80px; display: flex; justify-content: center; align-items: center; }
  .mod-hd {  width: 100%;  margin: 0; height: 50px;  ;
    display: flex; justify-content: space-between; align-items: center;  position: relative; z-index: 2; }
/* filter: drop-shadow(0 0 5px hsla(0, 0%, 0%, 0.4)); */
  .mod-hd > div       { margin: 0 2.5% 0; }

  .modal-content .close_btn {
position: relative;
  width: 30px;
  height: 30px;
  z-index: 80;
  box-sizing: border-box;
  cursor: pointer;
}


.modal-content .close_btn span {
  position: absolute;
  left: 0;
  top: 12px;
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: hsl(30, 81%, 30%);
  
}

.modal-content .close_btn span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.modal-content .close_btn span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.md_bread           { color: #715b25; font-weight: bold; font-size: 120%; }

.if_wrap            { width: 95%; margin: 0 auto 0; height: calc(100% - 130px); position: relative; overflow: hidden; }


.if_wrap hr         { position: absolute; border: 1px solid #000; }

.if_wrap hr:nth-of-type(1)    { box-shadow: 0 3px 8px #000;   width: 100%; height: 0;  top: -3px; }
.if_wrap hr:nth-of-type(2)    { box-shadow: 3px 0px 8px #000;  width: 0; height: 100%; left: -5px; top: 0;}
.if_wrap hr:nth-of-type(3)    { box-shadow: -2px 0px 8px #000;  width: 0; height: 100%; right: -5px; top: 0;}
.if_wrap hr:nth-of-type(4)    { box-shadow: 0 0 8px #000;   width: 100%; height: 0;  bottom: -3px; }


.am_inner_if        { width: 100%; margin: 0 auto 0;  height:100% ; }

.side_wraper          { position: absolute; left: 0; top:0; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.close--btn-side     { filter: drop-shadow(0 0 5px hsla(0, 0%, 0%, 0.75)); cursor: pointer; }
.close--btn-side img     { position: relative; left: -4px; transition:all 0.2s;  }
.close--btn-side img:hover    {  left: 0px;  }
.close_full       { width: 100%;  height: 100%;  position: fixed; z-index: -1; background-color: hsla(0, 0%, 0%, 0.0);

  }

.am_wrap    { animation-timing-function: cubic-bezier(.77, 0, .175, 1);;  }

.modopen       { animation: blurDark 0.6s 0s forwards  }

@media (max-width: 767px) {
  .modal-content {  width: 100%; min-width: 100%; }

  .close--btn-side     { top: calc(50% - 8vw); }
  .close--btn-side img     { width: 10vw; max-width: 53px; }

}


@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}







@media screen and (min-width: 1380px) {
  .main-header__wrapper {
    max-width: 1380px;
    margin: 0 auto;
    background-position-x: center;
  }

  .news_section {
    top: -442px;
  }
  .news_box--text {
    font-size: 18px;
  }



  .body--wrapper { margin-top: -58px; }

  .system_block--copy { margin-top: 96px; }

  main {  top: -307px }
  .main-wrapper footer { margin-top: -330px; }

  .section__system,
  .section__feature       { margin: 120px 0; }

  .modal-content { width: 80%; }
  

}

@media screen and (min-width: 1280px) {
  /* .section_box 			{ max-width: 1280px; } */

  .media_article h2,
  .section__system h2,
  .section__movie h2 {
    font-size: 58px;
  }
  .content_box h3,
  .mov_box h3 {
    font-size: 51px;
  }

  .mov_box-caption,
  .section__feature .text_content {
    font-size: 25px;
  }

  .system_block_body--wrapper {
    max-width: 1280px;
  }

  .system_block--title {
    font-size: 51px;
  }

  .system_block--catch {
    font-size: 58px;
  }

  .system_block--copy {
    font-size: 22px;
  }

  .mov_box.mov_box-mid h3 {
    font-size: 32px;
  }
}

@media (max-width: 767px) {

  .pop__btn_wrap .pop_btm_line1,
  .pop__btn_wrap div        { margin: 2%;  }

  .pop_btm_line1 a          { width: auto; }

  .pop__btn_wrap            { padding: 4vw 0; }
  .media_article--btn { margin: 0.5em auto;     font-size: 3.5vw; }

  main    { top: -30vw; }
  .main-wrapper footer {
    margin-top: -30vw;
  }
  .news_box--text {
    font-size: 1.8vw;
    line-height: 1.4;
    margin-top: 0.8em;
    margin-bottom: 1em;
    margin-bottom: 0.8em;
  }
}

@media (max-width: 567px) {


  .ts_copy--img-pc     { display: none; }
  .ts_copy--img-sp      { display: block; }

  .main-header__wrapper {
    background: url("../img/top_hero-sp.webp") center top no-repeat;
    background-size: contain;

  }

  .news_section { top: 0; }
  main      { top: 0; }
  .main-wrapper footer {
    margin-top: 0;
  }

  .main-header__inner_bnrwrap       { position:initial; top: 0; left: 0; margin: 0 auto 4.0vh;  }
  .main-header__inner_bnrwrap-img   { width: 100%; margin: 0 auto 0;   }
  .main-header__inner_bnrwrap a {  display: table;  margin: 0 auto; }

  .main-header__inner_bnrwrap2       { position:initial; top: 0; left: 0; margin: 0 auto 8.0vh; padding: 0 2em;  }
  .main-header__inner_bnrwrap-img2   { width: 100%; margin: 0 auto 0;   }
  .main-header__inner_bnrwrap2 a {  display: table;  margin: 0 auto; }

  .main-header__inner .update_patch-menu  { font-size: 2.0vw; line-height: 4.0vw; }

 


  .pt_badge                         { margin: 0 auto 2.0vh; max-width:180px ; }

  .slick-next,
  .slick-prev {
    width: 40px !important;
    height: 60px !important;
  }

  .news_section .slick-list {
    width: calc(100% - 80px);
  }

  .news_box--date {
    font-size: 70%;
    margin-top: 0.55em;
    padding: 0 0.7em;
  }

  .news_box--date b {
    border-radius: 0.5em;
    margin-left: -0.7em;
    background-color: rgb(202, 0, 0);
    color: rgb(255, 234, 50);
  }

  .news_box--text {
    font-size: 75%;
    line-height: 1.4;
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding: 0 0.75em;
    min-height: 4.6em;
  }

  .news_section {
    padding-bottom: 2%;
  }
  .movie_block--wrapper {
    padding-top: 6%;
  }
  .mov--thumb {
    box-shadow: none;
  }

  .modal_news02 {
    font-size: 100%;
  }
}

@media (max-width: 321px) {
  .news_box {
    max-width: 240px;
  }
}

/* Tablet & SP */

@media screen and (max-width: 767px) {
  .only_pc {
    display: none;
  }

  .siteid-sp.for_sp,
  .siteid-img-sp.for_sp.for_sp      { display: none;}

  .product_info-data      { margin-top: 5vw; }

  .system_block--title {
    margin-top: 0.4em;
  }
  .body--wrapper {
    margin-top: -2vw;
  }

  .system_block--catch {
    font-size: 6.5vw;
  }
  .system_block--copy {
    font-size: 1.9vw;
    padding: 0 1em;
    margin-bottom: 1em;
  }

  .system_block--btn {
    margin: 1.5em auto 3em;
    display: block;
    text-align: center;
    width: 50%;
    max-width: 100%;
  }

  .top_box {
    top: 0px;
  }

  .main_box {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
  }

  .top_left {
    width: 40%;
    max-width: 250px;
    display: block;
    position: absolute;
    top: 10px;
    left: 3%;
  }

  .section_box .first_box {
    margin: 15vh auto 3vh !important;
  }



  .s_img img {
    width: 100%;
  }

  .slick01 .slick-slide img {
    width: 100%;
    opacity: 0.8;
    transform: scale(0.9);
  }

  .content_box {
    margin: 2vh auto 13vh;
  }

  .content_box h3,
  .mov_box h3 {
    font-size: 1.8em;
    padding-bottom: 0.7em;
  }

  /* subcontent */

  .tab-label {
    margin: 0 0.2em;
  }

  .sub_content {
    margin: 0 auto;
    background-size: 120%;
    background-repeat: repeat-y;
    background-position: center;
    display: block;
  }

  .sub_content_box {
    width: 94%;
    margin: 0 auto;
    padding: 1.5em 0 3em 0;
    display: flex;
    flex-wrap: wrap;
  }

  .sub_content_box h4 {
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    font-size: 1.6em;
    line-height: normal;
    margin-bottom: 0.2em;
    color: #402904;
  }
}

@media (max-width: 567px) {





  .system_block--copy {
    font-size: 2.8vw;
    padding: 0 1em;
    margin-bottom: 1em;
  }
}

@media all and (max-width: 480px) {


  .mov_box-caption,
  .section__feature .text_content {
    font-size: 3.2vw;
  }
  .system_block--copy {
    font-size: 3.5vw;
    margin-bottom: 2vw;
  }

  .r_box {
    margin: 2vw auto 2vw;
  }
  .mov_box.mov_box-mid h3 {
    font-size: 4vw;
  }

  .system_block--title {
    font-size: 6vw;
    margin-top: 0.4em;
  }

  .system_block {
    padding-bottom: 7vw;
  }

  .system_block--wrapper {
    margin-top: 2vh;
  }

  .content_box h3,
  .mov_box h3 {
    color: #775114;
    font-size: 1.5em;
    padding-bottom: 0.7em;
  }

  .mov_box {
    width: 96%;
    max-width: 620px;
    margin: 1vh auto 1vh;
    text-align: center;
  }

  .section_box .first_box {
    margin: 3vh auto 3vh !important;
  }

  .sub_content {
    margin: 0 auto 2vw;
    background-size: 150%;
    background-repeat: repeat-y;
    background-position: center;
    display: block;
  }

  .sub_content_box .left {
    width: 92%;
    margin: 0 4% 3em;
  }

  .sub_content_box .right {
    width: 92%;
    margin: 0 4%;
    line-height: 1.7em;
  }

  .sub_content_box h4 {
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    font-size: 1.4em;
    line-height: normal;
    margin-bottom: 0.4em;
    color: #402904;
  }

  .sub_box_line {
    position: relative;
    height: 3px;
    border-width: 0;
    width: 100%;
    background-color: #7d2f2f !important;
  }

  /* switch */
  .tab-wrap {
    margin: 4em auto 0;
  }

  .tab-label {
    font-size: 1.5em;
    margin: 0.2em 1% 0;
    display: block;
  }

  .sub_con_h {
    margin: 4em 0;
  }

  .mov_box h3 {
    font-size: 1.1em;
  }
}