/*------------------------
  Common
------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*>*:last-child {
  margin-bottom: 0;
}

html {
  font-size: 62.5%;
}

body {
  padding-top: 100px;
  color: #444;
  font-family: "Noto Sans JP", sans-serif !important;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
}

body a {
  transition: all 0.6s;
  -webkit-transition: all 0.3s;
  text-decoration: none;
  outline: none;
  color: #444;
}

body a:hover {
  text-decoration: none;
  outline: none;
}

img {
  border: 0;
  outline: none;
  max-width: 100%;
  height: auto;
}

p,
ul,
ol,
dl,
table {
  line-height: 1.8;
  font-size: 16px;
  font-size: 1.3344453711vw;
}

ul,
ol {
  list-style: none;
}

em {
  font-style: normal;
}

.textright {
  text-align: right;
}

strong,
.fontbold {
  font-weight: 700;
}

.pc-none,
.for-laptop,
.for-mobile,
.for-se {
  display: none !important;
}

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

  p,
  ul,
  ol,
  dl {
    font-size: 1.6rem;
  }
}

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

  p,
  ul,
  ol,
  dl,
  table {
    font-size: 16px;
    font-size: 1.614530777vw;
  }

  .for-laptop {
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  body {
    padding-top: 60px;
  }

  p,
  ul,
  ol,
  dl,
  table {
    font-size: 1.6rem;
  }

  .pc-none {
    display: block !important;
  }

  .sp-none {
    display: none !important;
  }
}

@media screen and (max-width: 575px) {
  .for-mobile {
    display: block !important;
  }

  .for-tab {
    display: none !important;
  }
}

@media screen and (max-width: 374px) {
  .for-se {
    display: block !important;
  }
}

/*------------------------
    Layout
  ------------------------*/
main {
  display: block;
}

.container {
  padding: 6.667vw 0 0;
}

.container.bottom {
  padding-bottom: 6.667vw;
}

.wrapper {
  margin: 0 auto;
  max-width: calc(1140px + 10.66vw);
  width: 100%;
  padding: 0 5.33vw;
}

.wrapper.narrow {
  max-width: 68.993vw;
}

.content-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
}

@media screen and (min-width: 1200px) {
  .test-list-row .container {
    padding: 55px 0 0;
  }

  .container {
    padding: 100px 0 0;
  }

  .container.bottom {
    padding-bottom: 100px;
  }
}

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

  .container.bottom {
    padding-bottom: 50px;
  }

  .wrapper.narrow {
    max-width: 100%;
  }
}

/*------------------------
    Heading
  ------------------------*/
.heading-large {
  font-size: 29px;
  font-size: 2.4186822352vw;
  color: #010C10;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.08em;
  margin-bottom: 2.5vw;
  position: relative;
}

.heading-large small {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  font-size: 1.3344453711vw;
  font-weight: 400;
  color: #0071bc;
  letter-spacing: 0.08em;
  display: block;
}

.heading-medium {
  font-size: 24px;
  font-size: 2.0016680567vw;
  color: #010C10;
  letter-spacing: 0.08em;
  margin-bottom: 2.5vw;
}

@media screen and (min-width: 1200px) {
  .heading-large {
    display: block;
    font-size: 3.6rem;
    margin: 0 auto 40px;
    max-width: 1240px;
  }

  .heading-large small {
    font-size: 1.6rem;
  }

  .heading-medium {
    font-size: 2.4rem;
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 767px) {
  .heading-large {
    font-size: 2.2rem;
    margin-bottom: 20px;
  }

  .heading-large small {
    font-size: 1.2rem;
  }

  .heading-medium {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  #ranking-test-recommended .slick-next {
    right: 54px !important;
  }
}

.heading-link {
  position: absolute;
  right: 0;
  bottom: 1rem;
}

.heading-link span {
  font-size: 1.5rem;
  color: #111;
  font-weight: 700;
  border-bottom: 1px solid #0071BC;
  padding: 0 2.2rem 0.6rem 0;
  position: relative;
  margin: 0 50px 0 0;
}

@media screen and (min-width: 1200px) {
  .heading-link span {
    position: absolute;
    right: 50px;
    top: -27px;
    width: 110px;
    margin: 0;
  }
}

@media screen and (max-width: 767px) {
  .heading-link span {
    margin: 0;
  }
}

.heading-link span:after {
  content: "";
  background: url(../images/common/icon-arrow.svg) no-repeat left top / 100%;
  width: 1.5rem;
  height: 1.1rem;
  position: absolute;
  right: 0;
  top: 0.6rem;
}

@media screen and (max-width: 767px) {
  .more-link-sp {
    text-align: center;
    margin-top: 2rem;
  }

  .heading-link {
    position: relative;
    bottom: 0;
  }

  .heading-link span {
    font-size: 1.5rem;
    color: #111;
    font-weight: 700;
    border-bottom: 1px solid #0071BC;
    padding: 0 2.2rem 0.6rem 0;
    position: relative;
  }
}

/*------------------------
    Parts
  ------------------------*/
/*------------------------
    Header
  ------------------------*/
#site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #fff;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.2);
}

#site-header .header-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 100%;
  padding: 0.833vw 3.333vw;
}

#site-header .site-logo {
  width: 180px;
  width: 15vw;
}

#site-header .site-logo img {
  width: 100%;
}

@media screen and (min-width: 1200px) {
  #site-header .site-logo {
    width: 180px;
  }
}

@media screen and (max-width: 767px) {
  #site-header {
    height: 60px;
  }

  #site-header .header-row {
    padding: 8px 5.333vw;
  }

  #site-header .site-logo {
    width: 120px;
  }
}

/*------------------------
    Global Navigation
  ------------------------*/
#gnav ul.menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

#gnav ul.menu li a {
  font-weight: 700;
  padding: 0.417vw 1.25vw;
  font-size: 16px;
  font-size: 1.3344453711vw;
  letter-spacing: 0.05em;
  color: #111;
}

#gnav ul.menu li:nth-child(n+4) a {
  font-weight: 400;
}

#gnav ul.menu button {
  line-height: initial;
}

/* Submenu */
#gnav ul.sub-menu {
  width: 14.167vw;
  position: absolute;
  background-color: #fff;
  border: 1px solid #eee;
  visibility: hidden;
  opacity: 0;
}

#gnav ul.sub-menu li {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: solid #eee;
  border-width: 0 0 1px;
}

#gnav ul.sub-menu li:last-child {
  border-bottom: none;
}

#gnav ul.sub-menu li a {
  font-weight: 700;
  color: #7A7A7A;
  display: block;
  padding: 0.833vw 1.25vw;
}

#gnav ul.menu li.sub {
  position: relative;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0.917vw auto;
  background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2222px%22%20height%3D%2213.3px%22%20viewBox%3D%220%200%2022%2013.3%22%20style%3D%22enable-background%3Anew%200%200%2022%2013.3%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23999999%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2219.7%2C0%2011%2C8.7%202.3%2C0%200%2C2.3%2011%2C13.3%2022%2C2.3%2019.7%2C0%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

#gnav ul.menu li.sub a {
  padding-right: 1.667vw;
}

#gnav ul.menu li.sub:hover>ul.sub-menu {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, -webkit-transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
  opacity: 1;
  visibility: visible;
}

@media screen and (min-width: 1200px) {
  #gnav ul.menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #gnav ul.menu li a {
    padding: 17px 15px;
    font-size: 1.5rem;
  }

  /* Submenu */
  #gnav ul.sub-menu {
    width: 180px;
  }

  #gnav ul.sub-menu li a {
    font-size: 1.4rem;
    padding: 10px 15px;
  }

  #gnav ul.menu li.sub {
    background-size: 11px auto;
  }
}

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

/*------------------------
    Burger Menu
  ------------------------*/
.burger-menu {
  display: none;
  position: fixed;
  width: 60px;
  height: 60px;
  right: 0;
  top: 0;
  padding: 20px;
  cursor: pointer;
}

.burger-menu .burger-icon {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.burger-menu .line {
  width: 100%;
  height: 2px;
  background-color: #111;
  position: relative;
}

.burger-menu .line::before,
.burger-menu .line::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 2px;
  background-color: #111;
  transition: all 0.6s;
  -webkit-transition: all 0.3s;
}

.burger-menu .line::before {
  top: -6px;
}

.burger-menu .line::after {
  bottom: -6px;
}

.burger-menu.active .line {
  background-color: #fff;
}

.burger-menu.active .line::before {
  top: 0;
  transform: rotate(45deg);
}

.burger-menu.active .line::after {
  bottom: auto;
  top: 0;
  transform: rotate(-45deg);
}

.toggle-nav {
  display: none;
  position: fixed;
  background: white;
  width: 100vw;
  height: calc(100vh - 60px);
  overflow-y: scroll;
  padding: 5.33vw;
  bottom: 0;
}

.toggle-nav.active {
  display: block;
}

.toggle-nav #tnav {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
}

.toggle-nav ul.menu li a {
  font-size: 1.6rem;
  font-weight: 700;
  display: block;
  padding: 5px 0;
  color: #0071bc;
}

.toggle-nav ul.menu li:nth-child(n+4) a {
  color: #444;
}

.toggle-nav ul.menu ul.sub-menu {
  margin-top: -3px;
}

.toggle-nav ul.menu ul.sub-menu li a {
  color: #7A7A7A;
  font-size: 1.4rem;
  padding: 3px 0 3px 1em;
  position: relative;
}

.toggle-nav ul.menu ul.sub-menu li a::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 0.5em;
  height: 1px;
  background-color: #7A7A7A;
  left: 0;
  top: 50%;
}

@media screen and (max-width: 767px) {
  .burger-menu {
    display: block;
  }
}

/* 繝倥ャ繝€繝ｼ */
.menu-wrapper {
  display: flex;
}

#gnav ul.menu li:nth-child(4) a {
  font-weight: 700;
}

#gnav ul.menu li a {
  padding: 17px 8px;
}

@media screen and (max-width: 1357px) {
  .menu-wrapper {
    flex-direction: column-reverse;

    ul:first-child {
      margin-top: 5px;
    }
  }

  #menu-button {
    justify-content: flex-end;
  }

  #gnav ul.menu li a {
    font-size: 15px;
  }

  #gnav ul.menu li:last-child a {
    padding: 17px 0 17px 13px;
  }

  #site-header #header-site-logo img {
    height: 40px;
    width: auto;
  }

  #site-header .header-row {
    justify-content: right;
  }

  #header-site-logo {
    position: absolute;
    top: 10px;
    left: 20px;
  }
}

@media screen and (min-width: 1200px) {
  #gnav ul.menu {
    align-items: center;
  }
}

@media (max-width: 767px) {
  #site-header .header-row {
    justify-content: left;
  }

  #site-header #header-site-logo {
    position: relative;
    top: 0;
    left: 0;
  }
}

.download-button {
  background-color: #0071BC;
  border-radius: 20px;
  width: auto;
  height: 40px;
  font-size: 1.4rem;
  font-weight: bold;
  border: none;
  outline: 0;
  cursor: pointer;
  padding: 10px 24px;
  color: #ffffff;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: all 0.3s ease-in-out;
}

.contact-button {
  background-color: #FFE946;
  border-radius: 20px;
  width: auto;
  height: 40px;
  font-size: 1.4rem;
  font-weight: bold;
  border: none;
  outline: 0;
  cursor: pointer;
  padding: 10px 24px;
  color: #000000;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: all 0.3s ease-in-out;
}

.login-button {
  border: none;
  outline: 0;
  cursor: pointer;
  color: #0071BC;
  background-color: transparent;

  p {
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    margin-top: -3px;
  }
}

@media (max-width: 1357px) {
  .login-button img {
    width: 18px;
    height: auto;
  }

  .login-button p {
    font-size: 1.4rem;
  }
}

/* 繝上Φ繝舌�繧ｬ繝ｼ繝｡繝九Η繝ｼ */
@media screen and (max-width: 767px) {
  .tnav-menu-wrapper ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  .menu {
    gap: 24px;
  }

  .menu li:last-child {
    margin-bottom: 0;
  }

  .toggle-nav ul.menu li a {
    padding: 0;
  }

  #tnav-menu-button {
    min-width: 175px;
    width: 100%;
    margin-top: 40px;
    gap: 8px;

    li {
      width: 100%;
      margin-bottom: 0;

      div {
        width: 100%;

        button {
          width: 100%;
        }
      }
    }
  }

  .menu-login {
    display: flex;
    justify-content: center;
  }
}

.toggle-nav ul.menu li a {
  color: #444;
}

.toggle-nav #tnav {
  flex-direction: column;
  align-items: center;
}

#tnav-download-button,
#tnav-contact-button,
#tnav-login-button {
  margin-left: 0;
}

#tnav-login-button {
  margin-top: 16px;
}

/*------------------------
    KV
  ------------------------*/
#kv {
  height: 21.667vw;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#kv::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

#kv .page-title {
  font-size: 40px;
  font-size: 3.3361134279vw;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  margin: 0;
}

#kv.subpage {
  background-color: #0071bc;
  color: #fff;
}

#kv.subpage::before {
  content: none;
}

#kv.subpage .page-title-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#kv.subpage .page-title-wrap .page-title {
  position: relative;
  top: auto;
  left: auto;
  transform: translate(0, 0);
  -wekit-transform: translate(0, 0);
}

#kv.subpage .page-title-wrap .sub-title {
  font-size: 16px;
  font-size: 1.3344453711vw;
  margin-top: 0.833vw;
  letter-spacing: 0.05em;
  text-align: center;
}

@media screen and (min-width: 1200px) {
  #kv {
    height: 260px;
  }

  #kv .page-title {
    font-size: 4rem;
  }

  #kv.subpage .page-title-wrap .sub-title {
    font-size: 1.6rem;
    margin-top: 10px;
  }
}

@media screen and (max-width: 767px) {
  #kv {
    height: 130px;
  }

  #kv .page-title {
    font-size: 2rem;
  }

  #kv.subpage .page-title-wrap {
    width: 100%;
  }

  #kv.subpage .page-title-wrap .sub-title {
    font-size: 1.3rem;
    margin-top: 8px;
    width: 100%;
    font-weight: 400;
  }
}

/*------------------------
    404
  ------------------------*/
body.error404 {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

body.error404 main {
  flex: 1;
}

body.error404 .container .wrapper.narrow {
  padding: 0 5.33vw;
}

body.error404 .container h1 {
  font-family: "Source Sans Pro", sans-serif;
  color: #99c6e4;
  font-size: 16px;
  font-size: 1.3344453711vw;
  font-weight: 700;
  text-align: center;
}

body.error404 .container h2 {
  font-weight: 400;
  font-size: 24px;
  font-size: 2.0016680567vw;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 40px;
  margin-bottom: 3.333vw;
}

body.error404 .container p {
  font-size: 14px;
  font-size: 1.1676396997vw;
  text-align: center;
}

body.error404 .container .link-btn {
  margin-top: 60px auto 0;
  margin: 5vw auto 0;
  text-align: center;
}

body.error404 .container .link-btn a {
  font-size: 14px;
  font-size: 1.1676396997vw;
  color: #0071bc;
  text-decoration: underline;
}

@media screen and (min-width: 1200px) {
  body.error404 .container h1 {
    font-size: 1.6rem;
  }

  body.error404 .container h2 {
    font-size: 2.4rem;
    margin-bottom: 40px;
  }

  body.error404 .container p {
    font-size: 1.4rem;
  }

  body.error404 .container .link-btn {
    margin-top: 60px auto 0;
  }

  body.error404 .container .link-btn a {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 767px) {
  body.error404 .container h1 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  body.error404 .container h2 {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  body.error404 .container p {
    font-size: 1.4rem;
  }

  body.error404 .container .link-btn {
    margin-top: 40px;
  }

  body.error404 .container .link-btn a {
    font-size: 1.4rem;
  }
}

/*------------------------
    Footer
  ------------------------*/
#site-footer {
  background-color: #fff;
  color: #010C10;
  padding: 4.167vw 0 2.083vw;
}

#site-footer .ft-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#site-footer .ft-info,
#site-footer .ft-subnav {
  width: 50%;
}

#site-footer .ft-info p {
  margin-bottom: 12px;
}

.ft-subnav {
  display: flex;
  gap: 8%;
}

@media (max-width:768px) {
  .ft-subnav {
    gap: 4%;
  }
}

.ft-info .site-logo {
  width: 160px;
  margin-bottom: 12px;
}

.ft-info .site-logo img {
  width: 100%;
}

@media (max-width:768px) {
  .ft-info .site-logo {
    margin: 0 auto;
  }
}

#site-footer .ft-info h3 {
  font-size: 15px;
  font-size: 1.2510425354vw;
  margin-bottom: 0.833vw;
}

#site-footer .ft-info p {
  font-size: 13px;
  font-size: 1.0842368641vw;
}

#site-footer .ft-subnav ul li {
  margin-right: 0.833vw;
}

#site-footer .ft-subnav ul li a {
  color: #010C10;
  font-size: 1.4rem;
  font-weight: bold;
  /* font-size: 1.0842368641vw; */
  padding: 1.11vw 0 1.11vw 0.833vw;
  position: relative;
  display: block;
  line-height: 1.4;
}

#site-footer .ft-subnav ul li a::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 12px;
  height: 5px;
  background-color: #0071bc;
  left: -8px;
  top: calc(50% - 1px);
}

#site-footer .ft-subnav ul li a:hover {
  opacity: 0.8;
}

#site-footer .copy {
  font-size: 11px;
  font-size: 0.9174311927vw;
  font-family: "Source Sans Pro", sans-serif;
  text-align: left;
  margin-top: 2.5vw;
}

@media screen and (min-width: 1200px) {
  #site-footer {
    padding: 50px 0 25px;
  }

  #site-footer .ft-info h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  #site-footer .ft-info p {
    font-size: 1.3rem;
  }

  #site-footer .ft-subnav ul li {
    margin-right: 10px;
  }

  #site-footer .ft-subnav ul li a {
    font-size: 1.5rem;
    padding: 12px 0 12px 10px;
    color: #010C10;
  }

  #site-footer .copy {
    font-size: 1.1rem;
    margin-top: 30px;
  }
}

@media screen and (max-width: 767px) {
  #site-footer {
    padding: 48px 0 15px;
  }

  #site-footer .ft-info,
  #site-footer .ft-subnav {
    width: 100%;
    justify-content: center;
  }

  #site-footer .ft-info {
    /* display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      justify-content: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center; */
    margin-bottom: 30px;
  }

  #site-footer .ft-info h3 {
    width: 100%;
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-align: center;
  }

  #site-footer .ft-info p {
    font-size: 1.3rem;
    text-align: center;
  }

  #site-footer .ft-subnav ul {
    /* display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      justify-content: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center; */
  }

  #site-footer .ft-subnav ul li {
    margin-right: 10px;
  }

  #site-footer .ft-subnav ul li a {
    font-size: 1.3rem;
    padding: 8px 0 8px 10px;
  }

  #site-footer .copy {
    font-size: 1.1rem;
    margin-top: 25px;
    text-align: center;
  }
}

/*------------------------
    scroll top top
  ------------------------*/
.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  text-indent: -9999px;
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px auto;
  background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2222px%22%20height%3D%2213.3px%22%20viewBox%3D%220%200%2022%2013.3%22%20style%3D%22enable-background%3Anew%200%200%2022%2013.3%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23999999%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%222.3%2C13.3%2011%2C4.6%2019.7%2C13.3%2022%2C11%2011%2C0%200%2C11%202.3%2C13.3%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.page-top:hover {
  background-color: #555;
}

@media screen and (max-width: 767px) {
  .page-top {
    right: 15px;
    bottom: 15px;
  }
}

/*------------------------
    Mail Form
  ------------------------*/
.form-block {
  background-color: #fff;
  border-radius: 2.5vw;
  width: 90%;
  max-width: 485px;
  height: 5vw;
  padding: 5px 5px 5px 30px;
  padding: 0.417vw 0.417vw 0.417vw 2.5vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.form-block form {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.form-block input {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  box-shadow: none;
  font-size: 16px;
  font-size: 1.3344453711vw;
}

.form-block input:focus {
  outline: none;
}

.form-block input[type=email] {
  flex-grow: 2;
  background-color: transparent;
}

.form-block input[type=submit] {
  background-color: #ffe946;
  flex-grow: 1;
  text-align: center;
  line-height: 50px;
  border-radius: 25px;
  line-height: 4.167vw;
  border-radius: 2.083vw;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.6s;
  -webkit-transition: all 0.3s;
}

.form-block input[type=submit]:hover,
.form-block input[type=submit]:focus {
  background-color: #fddf00;
}

.form-block ::placeholder {
  color: #B9B9B9;
}

.form-block+p {
  font-size: 12px;
  font-size: 1.0008340284vw;
  margin-top: 0.5em;
}

.form-block+p a,
.form-block+p a:hover {
  text-decoration: underline;
  color: currentColor;
}

@media screen and (min-width: 1200px) {
  .form-block {
    border-radius: 30px;
    height: 60px;
    padding: 5px 5px 5px 30px;
  }

  .form-block input {
    font-size: 1.6rem;
  }

  .form-block input[type=submit] {
    line-height: 50px;
    border-radius: 25px;
  }

  .form-block+p {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 767px) {
  .form-block {
    border-radius: 25px;
    width: 100%;
    max-width: 385px;
    height: 50px;
    padding: 5px 5px 5px 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .form-block input {
    font-size: 1.5rem;
  }

  .form-block input[type=submit] {
    padding: 0 10px;
    line-height: 40px;
    border-radius: 20px;
  }

  .form-block+p {
    font-size: 1.2rem;
    margin-top: 8px;
    text-align: center;
  }
}

/*------------------------
    CTA
  ------------------------*/
.cta-cont {
  margin: 0 60px 70px;
  margin: 0 5vw 5.833vw;
  position: relative;
}

.cta-cont::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 0.833vw);
  background-color: #EAF4FA;
}

.cta-cont .cta-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 45px 0 0;
  padding: 3.75vw 0 0;
}

.cta-cont .cta-row .left-box,
.cta-cont .cta-row .right-box {
  width: 50%;
  position: relative;
}

.cta-cont .cta-row .left-box {
  margin: 1.667vw 0 5.833vw;
}

.cta-cont .cta-row figure {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(100% - 3.333vw);
}

.cta-cont h3 {
  color: #0071bc;
  font-size: 28px;
  font-size: 2.3352793995vw;
  margin-bottom: 35px;
  margin-bottom: 2.9190992494vw;
  line-height: 1.6;
}

@media screen and (min-width: 1200px) {
  .cta-cont {
    margin: 0 60px 70px;
  }

  .cta-cont::before {
    height: calc(100% - 10px);
  }

  .cta-cont .cta-row {
    padding: 45px 0 0;
  }

  .cta-cont .cta-row .left-box {
    margin: 20px 0 70px;
  }

  .cta-cont .cta-row figure {
    width: calc(100% - 40px);
  }

  .cta-cont h3 {
    font-size: 2.8rem;
    margin-bottom: 35px;
  }
}

@media screen and (max-width: 767px) {
  .cta-cont {
    margin: 0 0 40px;
  }

  .cta-cont::before {
    height: calc(100% - 6px);
  }

  .cta-cont .cta-row {
    padding: 40px 0 0;
  }

  .cta-cont .cta-row .left-box,
  .cta-cont .cta-row .right-box {
    width: 100%;
  }

  .cta-cont .cta-row .left-box {
    margin: 0 auto 30px;
    max-width: 420px;
  }

  .cta-cont .cta-row figure {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
  }

  .cta-cont .cta-row figure img {
    display: block;
    margin: 0 auto;
    max-width: 300px;
  }

  .cta-cont h3 {
    font-size: 2.4rem;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 575px) {
  .cta-cont h3 {
    font-size: 22px;
    font-size: 5.3140096618vw;
  }
}

/*------------------------
    page default
  ------------------------*/
.page-default {
  margin-bottom: 10vw;
}

.page-default .screen-reader-text {
  width: auto;
  height: auto;
  margin: 0 0 3.333vw;
  clip: auto;
  clip-path: none;
  position: relative;
}

.page-default .screen-reader-text h1 {
  font-size: 36px;
  font-size: 3.0025020851vw;
  line-height: 1;
  color: #0071bc;
  padding-left: 1.667vw;
  border-left: 5px solid #0071bc;
}

.page-default p,
.page-default table,
.page-default dl,
.page-default ul,
.page-default ol {
  font-size: 16px;
  font-size: 1.3344453711vw;
}

.page-default p a,
.page-default table a,
.page-default dl a,
.page-default ul a,
.page-default ol a {
  color: #1375f4;
  text-decoration: underline;
}

.page-default p a:hover,
.page-default table a:hover,
.page-default dl a:hover,
.page-default ul a:hover,
.page-default ol a:hover {
  color: #1375F4;
}

.page-default ul,
.page-default ol {
  margin: 2.5vw 0 2.5vw 1.5em;
}

.page-default ul li,
.page-default ol li {
  margin: 0.3em;
}

.page-default ul {
  list-style: disc;
}

.page-default ol {
  list-style: decimal;
}

.page-default .wp-block-table td,
.page-default .wp-block-table th {
  border-color: #eee;
}

.page-default blockquote {
  background-color: #EAF4FA;
  padding: 2.5vw;
}

.page-default blockquote cite {
  font-style: normal;
  font-size: 13px;
  font-size: 1.0842368641vw;
  display: block;
  margin-top: 1em;
}

.page-default figure figcaption {
  font-size: 13px;
  font-size: 1.0842368641vw;
  margin-top: 1em;
}

.page-default figure figcaption a {
  color: #1375f4;
  text-decoration: underline;
}

.page-default figure figcaption a:hover {
  color: #1375F4;
}

.page-default h2 {
  font-size: 30px;
  font-size: 2.5020850709vw;
  margin: 5vw 0 2.5vw;
  text-align: center;
  color: #010C10;
}

.page-default h3 {
  font-size: 24px;
  font-size: 2.0016680567vw;
  margin: 5vw 0 2.5vw;
  padding-bottom: 1.25vw;
  text-align: center;
  position: relative;
  color: #010C10;
}

.page-default h3::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 2.5vw;
  height: 2px;
  background-color: #0071bc;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.page-default h4 {
  font-size: 20px;
  font-size: 1.6680567139vw;
  margin: 3.333vw 0 1.25vw;
  text-align: center;
  color: #010C10;
}

@media screen and (min-width: 1200px) {
  .page-default {
    margin-bottom: 120px;
  }

  .page-default .screen-reader-text {
    margin: 0 0 50px;
  }

  .page-default .screen-reader-text h1 {
    font-size: 3.6rem;
    padding-left: 20px;
  }

  .page-default p,
  .page-default table,
  .page-default dl,
  .page-default ul,
  .page-default ol {
    font-size: 1.6rem;
  }

  .page-default ul,
  .page-default ol {
    margin: 30px 0 30px 1.5em;
  }

  .page-default blockquote {
    padding: 30px;
  }

  .page-default blockquote cite {
    font-size: 1.3rem;
  }

  .page-default figure figcaption {
    font-size: 1.3rem;
  }

  .page-default h2 {
    font-size: 3rem;
    margin: 60px 0 30px;
  }

  .page-default h3 {
    font-size: 2.4rem;
    margin: 60px 0 30px;
    padding-bottom: 15px;
  }

  .page-default h3::before {
    width: 30px;
    height: 2px;
  }

  .page-default h4 {
    font-size: 2rem;
    margin: 40px 0 15px;
  }
}

@media screen and (max-width: 767px) {
  .page-default {
    margin-bottom: 60px;
  }

  .page-default .screen-reader-text {
    margin: 0 0 30px;
  }

  .page-default .screen-reader-text h1 {
    font-size: 2.4rem;
    padding-left: 12px;
    border-left: 5px solid #0071bc;
  }

  .page-default p,
  .page-default table,
  .page-default dl,
  .page-default ul,
  .page-default ol {
    font-size: 1.6rem;
  }

  .page-default blockquote {
    padding: 15px;
  }

  .page-default blockquote cite {
    font-size: 1.3rem;
  }

  .page-default figure figcaption {
    font-size: 1.3rem;
  }

  .page-default h2 {
    font-size: 2.2rem;
    margin: 40px 0 25px;
  }

  .page-default h3 {
    font-size: 2rem;
    margin: 40px 0 20px;
    padding-bottom: 15px;
  }

  .page-default h3::before {
    width: 30px;
  }

  .page-default h4 {
    font-size: 1.8rem;
    margin: 30px 0 15px;
  }
}

/* footer謾ｹ菫ｮ */
.footer-privacy_new {
  width: 200px;
}

.footer-privacy_new img {
  width: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .footer-privacy_new {
    margin: 0 auto;
  }
}


.footer-link_privacy li a {
  text-decoration: underline;
  line-height: 1.4;
}

/* TOP繝壹�繧ｸfooter蜑咲┌譁咏匳骭ｲ繝輔か繝ｼ繝�CSS霑ｽ蜉� 縺薙％縺九ｉ*/
.free-signup-form__new {
  background-color: #0071bc;
  padding-bottom: 32px;
  padding: 0 5.33vw 48px;
}

.free-signup-form__new .home-hero-form {
  text-align: center;
  margin: 0 auto;
  width: 50%;
}

@media (max-width: 768px) {
  .free-signup-form__new .home-hero-form {
    width: 100%;
  }
}

.free-signup-form__new .home-hero-form .form-block input[type=email] {
  width: 60%;
}

.free-signup-form__new .home-hero-form .form-block input[type=submit] {
  color: #444;
}

@media (min-width: 1200px) {
  .free-signup-form__new .home-hero-form .form-block input[type=submit] {
    color: #444;
  }
}

@media (max-width: 768px) {
  .free-signup-form__new .home-hero-form .form-block input[type=submit] {
    color: #444;
  }
}

.free-signup-form__new-title_color-change {
  color: #ffe946;
}

.free-signup-form__new .form-block {
  margin: 0 auto;
}

.free-signup-form__new-privacy {
  font-size: 1.1rem;
  color: #fff;
  padding-top: 8px;
  margin-left: -24px;
  letter-spacing: 0.05em;
}

@media(max-width: 768px) {
  .free-signup-form__new-privacy {
    font-size: 1.1rem;
  }
}

.free-signup-form__new-privacy a {
  text-decoration: underline;
  color: currentColor;
}

.free-signup-form__new-privacy a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .free-signup-form__new-privacy {
    margin: 0 auto;
    padding-top: 8px;
    padding-right: 20px;
    margin-bottom: 8px;
  }
}

.free-signup-form__new-title {
  font-size: 2.4rem;
  padding-top: 32px;
  margin-bottom: 32px;
  color: #fff;
  font-weight: bold;
}

/*------------------------
  pagination-test
------------------------*/
.pagination-test {
  text-align: center;
  margin: 20px 0px -15px 0px;
  width: 100%;
}

.pagination-test a,
.pagination-test span {
  display: inline-block;
  margin: 0 5px;
  text-decoration: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.pagination-test a.next,
.pagination-test a.prev {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  background-color: white;
}

.pagination-test span.current {
  background-color: #0071BC;
  color: white;
  font-weight: bold;
  border: 1px solid #0071BC;
}

.pagination-test .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0rem;
}

.pagination-test li a.next,
.pagination-test li a.prev {
  width: 60px;
  height: 60px;
  align-items: center;
  border-radius: 50%;
}

.pagination-test a.page-numbers {
  color: #000;
}

.pagination-test a.page-numbers.next,
.pagination-test a.page-numbers.prev {
  color: #0073aa;
}

.pagination-test ul.page-numbers li:first-child a.prev {
  margin-right: 50px;
}

.pagination-test ul.page-numbers li:last-child a.next {
  margin-left: 50px;
}

.pagination-test li.disabled a {
  opacity: 0.5;
  cursor: not-allowed;
}

@media screen and (max-width: 767px) {
  .pagination-test ul.page-numbers li:first-child a.prev {
    margin-right: 5px;
  }

  .pagination-test ul.page-numbers li:last-child a.next {
    margin-left: 5px;
  }

  .pagination-test li a.next,
  .pagination-test li a.prev {
    width: 45px;
    height: 45px;
  }

  #test-list .test-list-row .container {
    margin-top: 60px;
    width: 90%;
  }

  .test-list-row .search-all {
    padding: 10px 35px 35px !important;
  }
}



.search-item {
  padding-top: 74px;
}

#kv.subpage .page-title-wrap {
  position: unset;
}

#kv.test-list-custom .page-title-wrap {
  left: unset;
  -webkit-transform: unset;
}

#kv.test-list-custom .page-title,
#kv.test-list-custom .sub-title {
  text-align: left !important;
}

#kv.test-list-custom .btn-wrap {
  justify-content: unset;
}

#accordionExample {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.search-all {
  margin: -50px auto 0;
  z-index: 10;
  background: white;
  border-radius: 10px;
  padding: 35px !important;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

#accordionExample .list-category .category-link {
  line-height: 25px;
  border: 1px solid #CDCDCD;
}

.accordion-collapse .list-category {
  margin: 0px !important;
}

.accordion-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
}

.accordion-item:not(:last-child) {
  border-right: 1px solid #CDCDCD !important;
}


/* search*/
.search #input-search {
  width: 137px !important;
  margin-left: 16px !important;
  background-color: #FFE546;
  color: #111111;
  font-size: 16px;
  font-weight: 600;
  padding-right: 20px;
}

#searchForm input {
  padding: 1rem 4rem;
  outline: 0;
  border: 0;
}

div.search-name input {
  width: 432px;
  height: 60px;
  border-radius: 100px;
  padding: 1rem 3rem;
}

.search-name svg {
  top: 23px !important;
  height: 1.5rem !important;
  margin-left: 40px;
  color: #111111;
}

#searchForm input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

#searchForm input:placeholder-shown+button {
  opacity: 0;
  transform: translateX(calc(100% + 1em));
  pointer-events: none;
}

#searchForm:has(> input):hover input[type=""]:not(:empty)+button {
  opacity: 1;
}

#searchForm:has(> input) button.reset {
  --size: 3em;
  border: none;
  background: none;
  line-height: 0;
  font-size: 3em;
  padding: 0;
  outline: none;
  cursor: pointer;
  margin-left: -50px;
  transition: 0.2s ease-out;
  color: #CDCDCD;
}

.accordion-item-header-after {
  font-size: 1.7rem;
}

#accordionExample .accordion-item .accordion-header {
  display: flex;
  justify-content: flex-end;
}

#accordionExample .accordion-item .accordion-header .accordion-button {
  background-color: white !important;
  color: #111111 !important;
  justify-content: flex-end;
}

#accordionExample .accordion-item .accordion-header .accordion-button {
  background-color: white !important;
  color: #111111 !important;
  justify-content: flex-end;
  width: auto;
}

#accordionExample .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  box-shadow: none !important;
}

#accordionExample .accordion-item .accordion-header .accordion-button::after {
  margin-left: 4px;
  content: "" !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

#accordionExample .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  content: "" !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

#ranking-test .image-ranking-left {
  border-radius: 4px;
  max-width: 100%;
  width: 100%;
  height: 180px;
}

#ranking-test .image-ranking-right {
  border-radius: 4px;
  max-width: 100%;
  width: 100%;
  height: 140px;
}

.category-sample-item .img-ranking {
  width: 34px;
  height: 34px;
}

#ranking-test .img-ranking {
  width: 44px;
  height: 44px;
  position: unset;
}

#ranking-test .stt-ranking {
  position: unset;
  margin-top: 14px;
  background-color: #111111;
  color: #ffffff;
}

.sample-item-name-left {
  padding: 8px 0;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
}

.sample-item-short-description {
  font-size: 15px;
  color: #7C7C7C;
  line-height: 170%;
}

.sample-item-name-right {
  padding: 8px 0;
  font-size: 15px;
  font-weight: 700;
  color: #111111;
}

#test-list .title-ranking {
  width: 100% !important;
}

.title-ranking-en {
  color: #0071BC;
  font-size: 15px;
  font-weight: 600;
  padding: 0;
  margin-top: 25px;
}

.title-category {
  display: block;
  font-size: 24px;
  padding: 10px 0;
  font-weight: 700;
}

.title-category-en {
  color: #0071BC;
  font-size: 15px;
  font-weight: 600;
  padding: 0;
  margin-top: 25px;
}

.card img {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  object-fit: cover;
  height: 100%;
}

.icon {
  font-size: 1.2rem;
  margin-right: 8px;
}

.sample-category-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 130%;
}

.category-sample-item:not(:last-child) {
  border-bottom: 1px solid #C8C2C2;
}

.img-category-sample {
  border-radius: unset !important;
}

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

.img-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
}

.img-wrapper .overlay-content {
  position: absolute;
  padding-left: 14px;
  padding-right: 14px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 113, 188, 0.7);
  /* Mﾃ�u xanh dﾆｰﾆ｡ng v盻嬖 ﾄ黛ｻ� trong su盻奏 */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#ranking-test-recommended {
  background-color: white;
}

#ranking-test-recommended .my-slider {
  padding: 0 45px;
}

#ranking-test-recommended .slick-next {
  right: 46px;
}

#ranking-test-recommended .slick-arrow {
  z-index: 1;
}

#ranking-test-recommended .slick-next:before,
#ranking-test-recommended .slick-prev:before {
  content: "";
  display: flex;
  align-items: flex-start;
  justify-content: center;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 2px solid #cdcdcd;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

#ranking-test-recommended .slick-next:before {
  padding-left: 3px;
}

#ranking-test-recommended .slick-next:before {
  content: "\203A";
  color: #0071bc !important;
  font-size: 38px;
  text-align: center;
}

#ranking-test-recommended .slick-prev:before {
  content: "\2039";
  color: #0071bc !important;
  font-size: 39px;
  text-align: center;
}

#ranking-test-recommended .slick-next:hover:before,
#ranking-test-recommended .slick-prev:hover:before {
  color: #005f8d;
  border-color: #0071bc;
}

.category-item .card {
  border: none;
}

#ranking-test {
  position: relative;
  z-index: 0;
  /* ﾄ雪ｺ｣m b蘯｣o pseudo-element khﾃｴng che n盻冓 dung */
}

#ranking-test::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* Mﾃ�u n盻］ b蘯｡n mu盻創 */
  z-index: -1;
  /* ﾄ脆ｰa pseudo-element ra phﾃｭa sau n盻冓 dung */
}

.search-box-header {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.search-box-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background-color: rgba(255, 229, 70, 0.8);
  z-index: -1;
}

/* start FB SERAK03-62 */
.montserrat-font {
  font-family: 'Montserrat';
}

.font-weight-700 {
  font-weight: 700;
}

.rotate::after {
  transform: rotate(-180deg) !important;
}

#test-recommended-slider {
  margin: 0 auto;
}

.category-link {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.6s ease;
  display: inline-block;
  margin-bottom: 5px;
}

.category-link.show {
  max-height: 40px;
  opacity: 1;
}

@media (max-width: 576px) {
  #ranking-test-recommended .slick-prev:before {
    padding-right: 1px;
  }

  #ranking-test-recommended .slick-next:before,
  #ranking-test-recommended .slick-prev:before {
    width: 40px;
    height: 40px;
  }

  #ranking-test-recommended .slick-prev:before,
  #ranking-test-recommended .slick-next:before {
    font-size: 30px;
  }

  #ranking-test-recommended .my-slider {
    padding: 0 45px
  }

  #ranking-test-recommended .slick-next {
    right: 55px;
  }

  .ranking-test .slick-prev {
    left: 14px !important;
  }
}

@media (min-width: 576px) {
  #test-recommended-slider {
    max-width: 535px;
  }
}

@media (min-width: 768px) {
  #test-recommended-slider {
    max-width: 815px;
  }
}

@media (min-width: 992px) {
  #test-recommended-slider {
    max-width: 1055px;
  }
}

@media (min-width: 1200px) {
  #test-recommended-slider {
    max-width: 1235px;
  }
}

@media (min-width: 1400px) {
  #test-recommended-slider {
    max-width: 1415px;
  }
}

/* end FB SERAK03-62 */

@media screen and (min-width: 768px) and (max-width: 1130px) {
  #kv {
    height: auto;
  }

}

@media screen and (max-width: 1130px) {
  #accordionExample {
    display: block;
  }

  .search-all {
    margin-top: unset;
    border-radius: unset;
    padding: unset;
    box-shadow: none;
    z-index: unset;
  }

  .container {
    padding: 15px;
  }

  div.search-name input {
    height: 50px;
    font-size: 11px;
    width: 220px;
    margin: unset;
  }

  .search #input-search {
    margin-left: 20px !important;
    padding-right: 0;
  }

  .search-name svg {
    top: 19px !important;
    margin-left: 40px;
  }

  #searchForm input {
    padding: 1rem 2rem;
  }

  .img-wrapper {
    display: none;
  }

  .img-ranking {
    display: block;
  }

  .accordion-item:not(:last-child) {
    border-bottom: 1px solid #CDCDCD !important;
    border-right: unset !important;
  }

  .accordion-item-header {
    margin-top: 16px;
  }

  #kv.test-list-custom .page-title,
  #kv.test-list-custom .sub-title {
    text-align: center !important;
  }
}

/*------------------------
  繝輔Ο繝ｼ繝�ぅ繝ｳ繧ｰ繝舌リ繝ｼ
------------------------*/
.banner-content {
  position: fixed;
  bottom: 64px;
  right: 0;
  z-index: 99;
}

@media (max-width: 768px) {
  .banner-content {
    bottom: 75px;
  }
}

.banner-content .close-btn {
  position: relative;
  top: 1vw;
  left: -0.833vw;
  z-index: 100;
  background: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: none;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
  padding: 1px 0 0;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .banner-content .close-btn {
    width: 20px;
    height: 20px;
    top: 3vw;
    left: -2vw;
  }

  .banner-content .close-btn img {
    width: 10px;
    height: 10px;
  }
}

.c-bnr {
  display: block;
  width: 16.38888889vw;
  filter: drop-shadow(0 0 1vw rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .c-bnr {
    width: 140px;
  }
}

@media screen and (max-width: 767px) {
    body.home .banner-content {
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }
    body.home.fv-scroll .banner-content {
        opacity: 1;
        visibility: visible;
    }
}