@charset "utf-8";

@media screen and (max-width: 1449.98px) {
  .nav-item .subnav {
    width: 315px;
  }
}


@media screen and (max-width: 1399.98px) {
  .container {
    padding: 0 20px;
  }

  #headerTop {
    padding: 0 20px;
  }

  #footerMain {
    padding: 0 20px;
  }

  .insideAnimeGroup {
    width: 58%;
  }

  .flexWrap {
    margin-bottom: 60px;
  }

  .nav-item:first-child .subnav {
    left: 0;
    right: inherit;
    transform: translateX(0);
  }

  .nav-item:last-child .subnav {
    right: 0;
    left: inherit;
    transform: translateX(0);
  }
}

@media screen and (min-width: 768px) {
  .tab-container .tab-menu ul li.mobileSelected {
    display: none;
  }

  .tab-container .tab-menu ul li:not(.mobileSelected) {
    display: block !important;
  }

  .tab-container .tab-menu ul {
    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
    gap: 20px;
    border-bottom: 2px solid var(--list-bullet-color-100);
    display: grid;
  }

  .tab-container .tab-menu ul li a {
    text-decoration: none;
    border: 0;
    /* font-size: 1.44em; */
    color: var(--base-link-color);
    background-color: #e9e7e9;
  }

  .tab-container .tab-menu ul li.selected a,
  .tab-container .tab-menu ul li.selected a:focus,
  .tab-container .tab-menu ul li:not(.mobileSelected) a:hover,
  .tab-container .tab-menu ul li:not(.mobileSelected) a:focus {
    background-color: var(--list-bullet-color-100);
    color: #fff;
  }

  .tab-container .tab-menu ul li.selected a:after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 8px solid var(--red-normal);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    z-index: 50;
    margin-left: -4px;
    transition: transform 0.3s ease 0s;
  }

  /* .tab-container .tab-menu ul.col-2 li{
	flex: 0 0 calc(50% - 10px);
  } */
}

@media screen and (min-width: 992px) and (max-width: 1199.98px) {}

@media screen and (min-width: 1300px) {
  html {
    overflow: auto !important;
    overflow-x: hidden !important;
  }

  #mobileBgLayer,
  #mobileNavWrap,
  .showMMenu #mobileNavWrap {
    display: none;
  }
}

@media screen and (max-width: 1299.98px) {
  #mmenuBtn {
    display: flex;
  }

  #toolLangs,
  #toolShare,
  #toolFontsize {
    display: none;
  }

  #mainNav > ul > li {
    max-width: 100%;
    width: 100%;
    margin: 0 !important;
  }

  #mainNav .nav-item:not(.selected) {
    display: none;
  }

  #mainNav .nav-item:before {
    content: none;
  }

  .nav-item:first-child .subnav {
    width: 315px;
    max-width: 315px;
  }

  .nav-item:first-child .subnav,
  .nav-item:last-child .subnav {
    left: 50%;
    right: inherit;
    transform: translateX(-50%);
  }

  .nav-item:before {
    right: -12%;
  }

  .nav-item .nav-link .step {
    font-size: 1.111em;
  }

  .nav-item.active .nav-link .step,
  .nav-item.selected .nav-link .step,
  .nav-item:hover .nav-link .step,
  .nav-item .nav-link.focus .step {
    font-size: 1.111em;
  }

  .nav-item .nav-link .icon {
    min-width: 35px;
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
  }

  .nav-item .nav-link .title {
    font-size: 1.555em;
  }

  .nav-item .nav-link {
    padding: 10px 30px 30px;
  }

  .nav-item .subnav .popup_title {
    font-size: 1em;
  }

  .nav-item .subnav .section-title {
    padding: 10px 20px 5px 20px;
    font-size: 1.111em;
  }

  .nav-item .subnav-link {
    font-size: 0.888em
  }

  .flexWrap.col-2 > .col {
    width: 100% !important;
    flex: 0 1 100% !important;
  }

  .flexWrap.col-2 .col.colImg .insideAnimeGroup {
    position: relative;
    left: inherit;
    top: inherit;
    width: 45%;
    margin: 40px auto 40px;
  }

  #content .imgCols-grid {
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }

  .mainVideo {
    max-width: 540px;
  }
}

@media screen and (max-width: 1199.98px) {
  .flexWrap.sectionMainImg {
    flex-wrap: wrap;
  }

  .flexWrap.sectionMainImg > div:first-child {
    margin-bottom: 50px;
    padding-right: 3.5%;
    width: 100% !important;
    flex: 0 1 100% !important;
  }

  .slogan p:last-child {
    margin-left: 0;
  }

  .insideAnimeGroup {
    position: relative;
    right: inherit;
    top: inherit;
    margin: 0 auto;
    width: 50%;
  }

  .mainVideo {
    height: auto;
  }

  .mainVideo .videoBox {
    padding: 28.1%;
  }

  .attention-box:after {
    width: 180px;
  }
}

@media screen and (max-width: 1099.98px) {
  .page-filter-wrap {
    margin-left: 30px;
  }
}


/* Medium devices (Tablets, less than 992px) */
@media screen and (max-width: 991.98px) {
  /* .mainNav_m .subnav ul li:not(.sectionTitle) {
    padding: 8px 20px 8px 45px;
  } */

  .mainNav_m .nav-link span {
    font-size: 1.125em;
  }

  .mainNav_m .subnav ul li.sectionTitle {
    font-size: 1.125rem;
  }

  .mainNav_m .subnav ul li {
    font-size: 1em;
  }

  #mainZone:after {
    width: 400px;
    /* height: 100%; */
  }

  #pageTitle {
    font-size: 1.75em;
    margin-bottom: 20px;
  }

  .display-m {
    display: block;
  }

  #toolLangs.active .subnav,
  #toolShare.active .subnav {
    transform: translate(-50%, -10px);
  }

  #toolSearch.active .searchForm {
    opacity: 1;
    transform: translateY(0px);
  }

  #logoWrap img {
    width: 225px;
  }

  .nav-item .nav-link .title {
    font-size: 1.333em;
  }

  .nav-item .subnav:first-child {
    left: 50%;
    transform: translateX(-50%);
  }

  .nav-item .subnav-link {
    font-size: 1em;
  }

  #mainContent {
    width: 100%;
    padding-top: 50px;
  }

  #footerMain {
    display: block;
  }

  .footerRight {
    text-align: left;
    padding: 0 0 20px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin-left: 0;
  }

  .footerRight div {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
  }

  .generalBtn {
    padding: 15px 70px 15px 15px;
  }

  .generalBtn span {
    width: 30px;
    height: 30px;
  }

  .generalBtn span:before {
    width: 12px;
    height: 12px;
    left: 8px;
  }

  #insideVisualWrap {
    background-size: auto 100%;
    background-color: transparent;
  }

  .photosWrap .photoItem {
    width: calc((99.99% - 60px)/3);
  }

  #content .flexbox.col-3 .item {
    width: calc((100% - 40px) / 2);
  }

  /*transform table*/
  #content table.transform-table thead th,
  #content table.transform-table tbody th {
    display: none;
  }

  #content table.transform-table tr td {
    display: block;
    width: 100%;
    text-align: left;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
  }

  #content table.transform-table tr td[data-label]:before {
    content: attr(data-label)' :';
    display: inline-block;
    padding-right: 10px;
  }

  #content table.transform-table tr td:first-child {
    padding-top: 10px;
  }

  #content table.transform-table tr td:last-child {
    padding-bottom: 10px;
  }

  #contentWrap:before {
    bottom: -20px;
  }

  .f-left-img,
  .f-right-img {
    float: none;
    margin: 0 auto 15px;
    max-width: 360px;
  }

  .flexWrap {
    margin-bottom: 40px;
  }

  .flexWrap.col-2 .col.colImg .insideAnimeGroup {
    width: 70%;
  }

  #contentWrap:before {
    width: 180px;
    height: 180px;
  }

  .accordCtrls {
    text-align: center;
  }
}

/*Between Tablets and Mobile */
@media screen and (min-width: 768px) and (max-width: 991.98px) {}

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

/* Small devices (landscape phones, less than 768px) */
@media screen and (max-width: 767.98px) {

  /****** common starts******/

  body {
    font-size: 1rem;
  }

  .mainNav_m .subnav ul li:not(.sectionTitle):before {
    top: 0.9em;
  }

  .fixBtn {
    width: 60px;
    height: 60px;
    right: -20px;
  }

  .fixBtn .icon {
    width: 60px;
    height: 60px;
    background-size: 30px 30px;
  }

  .fixBtn.btn-1 {
    top: 160px;
  }

  .fixBtn.btn-2 {
    top: 225px;
  }

  .fixBtn.btn-3 {
    top: 290px;
  }

  .fixBtn.btn-4 {
    top: 355px;
  }

  .fixBtn:hover .icon,
  .fixBtn.focus .icon,
  .fixBtn.init .icon,
  .fixBtn.hovered .icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }

  .fixBtn:hover .icon,
  .fixBtn.focus .icon,
  .fixBtn.init .icon,
  .fixBtn.hovered .icon {
    background-size: 35px 35px;
  }

  .fixBtn span {
    font-size: 1em;
  }

  #mainZone:after {
    right: 0;
    bottom: 0;
  }

  #content p {
    margin-bottom: 15px;
  }

  #logoWrap img {
    width: 200px;
  }

  .mainVideo {
    width: 90%;
    margin-bottom: 25px;
  }

  .mainVideo .videoBox {
    padding: 28.2%;
    border-radius: 10px;
  }

  .flexWrap.col-2 > div:first-child {
    margin-bottom: 30px;
  }

  .pagination .mobilePagin {
    display: inline-flex;
    align-items: center;
  }

  .pagination .mobilePagin .txt {
    padding: 0 0 0 5px;
  }

  .pagination .mobilePagin .txt span {
    font-weight: 700;
  }

  .pageNav a:not(.arrow),
  .pageNav > span {
    display: none;
  }

  .page-filter-wrap {
    margin-left: 20px;
  }

  .page-filter-wrap label {
    line-height: 38px;
  }

  .mobilePagin .select-selected {
    line-height: 26px;
  }

  .pagination .page-filter-wrap {
    display: none;
  }

  .pagination .page-filter-wrap-m {
    display: inline-flex;
  }

  hr {
    margin: 40px 0;
  }

  .attention-box {
    padding: 0 20px 45px 22px;
  }

  .attention-box > div {
    padding: 15px 25px;
  }

  .attention-box:after {
    background-size: 60% 60%;
    background-position: 100% 100%;
    bottom: 15px;
    display: none;
  }

  .attention-box .title.title-only {
    padding-right: 0;
  }

  .flowchart-wrap .chart-item {
    padding: 20px 15px;
  }

  .flowchart-wrap div.two-item {
    gap: 20px !important;
  }

  .flowchart-wrap div.two-item > div {
    flex: 0 0 100% !important;
  }

  .flowchart-wrap div.two-item.nowrap > div {
    flex: 0 0 calc(50% - 10px) !important;
  }

  .flowchart-wrap div.chart-item div.two-item > div,
  .flowchart-wrap div.three-item > div {
    flex: 0 1 100% !important;
  }

  .flowchart-wrap div.three-item {
    flex-wrap: wrap;
    text-align: left;
  }

  .flowchart-wrap div.three-item ul li {
    display: block;
    margin-left: 24px;
    margin-bottom: 10px;
  }

  /****** content ends******/

  .tab-container .tab-menu {
    max-width: 460px;
    margin: 0 auto 30px;
  }

  .tab-container .tab-menu ul {
    flex-wrap: wrap;
  }

  .tab-container .tab-menu ul li {
    width: 100%;
    flex: 1 1 100%;
    min-height: 44px;
  }

  .tab-container .tab-menu ul li:not(.mobileSelected) {
    min-height: 0;
    display: none;
  }

  .tab-container .tab-menu ul li:not(.mobileSelected) a {
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #cfd1e5;
    border-top: none;
    background-color: #fff;
  }

  .tab-container .tab-menu ul li.selected a {
    font-weight: 700;
  }

  .tab-container .tab-menu ul li a.tab-iconBtn .icon,
  .tab-container .tab-menu .mobileSelected .icon {
    display: none;
  }

  .tab-container .tab-menu ul li:not(.mobileSelected) a:is(:hover, :focus) {
    color: var(--list-bullet-color-100);
  }


  /* .tab-container .tab-menu ul li.mobileSelected a:before {
    background-color: var(--grey-light1);
  } */

  /* .tab-container .tab-menu ul li.mobileSelected + li > a {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .tab-container .tab-menu ul li:last-child > a {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  } */

  .white-wrap {
    padding: 15px;
  }

  .flowchart-wrap .white-wrap .chart-item {
    padding: 15px;
  }

  #contentWrap:before {
    width: 150px;
    height: 150px;
  }
}

@media screen and (max-width: 575.98px) {
  .mediaGroup .mainImg {
    margin: 0 auto 8%;
  }


  .mediaGroup .mainImg .floatImg-1 {
    left: -20px;
    top: 55%;
  }


}

@media screen and (max-width: 479.98px) {}

@media screen and (max-width: 359.98px) {}