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

@media only screen and (min-width: 1225px) and (max-width: 1280px) {
}
@media only screen and (min-width: 320px) and (max-width: 1224px) {
  /* .mobile-br br {
    display: block;
  } */
  #center-slider {
    padding: 0 40px;
  }
  .jcarousel-control-prev {
    left: 0;
  }
  .jcarousel-control-next {
    right: 0;
  }
  .last-container {
    text-align: center;
  }
  .tab-container h2.S-Title br {
    display: none;
  }
  .MainWrapper,
  .Footer,
  .TopMainWrapper,
  .IdxContainWrapper,
  .InnerContainWrapper {
    width: 94% !important;
  }
  img,
  .EditorText img {
    max-width: 100%;
  }

  /*-- responsive menu css start */
  .HomeTop,
  .NavLeft,
  .NavRight {
    display: none !important;
  }
  .TopHeader {
    position: relative;
    z-index: 999;
    display: none;
  }
  .ResponsiveLogo,
  .TopArrow {
    display: block !important;
  }
  .menu {
    clear: both;
    min-width: inherit;
    float: none;
    display: block;
    width: 100%;
    text-align: left;
  }

  .ResponsiveLogo {
    padding: 15px 0;
    /* background-color: var(--green_5); */
  }
  .ResLogo {
    display: inline-block;
  }

  .common-header .center {
    text-align: center;
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px 20px;
    border-radius: 22px;
    color: white;
    width: 100%;
    --black_1: white;
  }

  .common-header .InnerContainWrapper {
    padding: 100px 0 60px;
  }
  .common-header {
    background: 50% 50%/503px no-repeat
        url("../images/imgs/header-right-img.png"),
      var(--green_5);
  }

  .common-header .center::after {
    display: none;
  }

  .common-header h2.S-Title {
    padding: 0;
    margin-bottom: 1.5em;
  }

  /* responsive menu css end */

  .letter-container .flex {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .letter-container .flex .flex-item {
    flex: initial !important;
    text-align: center;
  }
  .letter-container .flex .flex-item.right {
    padding: 0 20px;
  }
  .letter-container h4.L-Title {
    margin: 10px 0 3px;
  }
  .article-container .flex {
    flex-direction: column;
  }
  .article-container.bg .flex-item + .flex-item {
    margin-top: 18px;
  }

  .article-container .flex-item .text-overlay .text-block {
    max-width: 100% !important;
    display: block !important;
    width: 100%;
    padding: 0 20px !important;
  }

  .article-container.bg .flex-item {
    background-size: cover;
    background-position: 50% 75%;
    background-repeat: no-repeat;
  }

  .article-container .flex-item .text-overlay .text-block br {
    display: none;
  }
  .article-container .flex-item .text-overlay {
    padding: 80px 0;
  }

  :root {
    font-size: calc(16px / 1.15);
  }

  .letter-second-container .flex {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .letter-second-container .flex-item {
    padding: 20px 30px !important;
    flex: initial !important;
    text-align: center;
  }

  .letter-second-container .InnerContainWrapper {
    padding: 40px 0;
  }

  .center-container .InnerContainWrapper {
    padding: 50px 0;
  }

  .letter-third-container .InnerContainWrapper {
    max-width: calc(100vw - 80px);
  }
  .letter-third-container .desc {
    margin: 0;
    text-align: center;
    width: 100%;
  }

  .tab-content-container .flex {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .tab-content-container .center {
    order: 0;
    flex: initial;
    margin: 0 0 20px;
  }
  .tab-content-container .left {
    order: 1;
    flex: initial;
    padding: 0;
  }
  .tab-content-container .right {
    order: 2;
    flex: initial;
    padding: 0;
  }
  .tab-content-container .desc {
    padding: 0.9em 20px 0;
  }
  .tab-content-container .desc ul li + li {
    margin-top: 0.9em;
  }
  .bonus-container .InnerContainWrapper {
    padding: 50px 0px;
  }
  .bonus-container .imgdesc-container {
    flex-direction: column;
    text-align: center;
  }
  .bonus-container .imgdesc-container .ImgWrap {
    flex: initial;
    margin-bottom: 20px;
  }
  .bonus-container .imgdesc-container .desc {
    flex: initial;
    order: 1;
  }
  .bonus-container .imgdesc-container .desc br {
    display: none;
  }
  .letter-container .text-bg {
    margin: 0;
  }
  .letter-second-container .desc p + p {
    margin-top: 1em;
  }
  .letter-container.second .text-bg {
    margin: 0;
  }
  .letter-container.second .text-bg .LogoWrap {
    position: absolute;
    left: calc(50% - (393px / 2));
    width: 200px;
    top: 0;
  }
  .letter-container.second .InnerContainWrapper::after {
    top: -2px;
    right: 6px;
    height: max-content;
    display: inline-block;
  }
  .letter-container.second .flex .flex-item.right {
    margin-top: 20px;
    padding: 0;
  }
  .reason-container .InnerContainWrapper {
    padding: 40px 0;
  }
  .letter-third-container .center h3.Title br {
    display: none;
  }
  .reason-container .circle-container > ul li {
    --margin-left: 0;
    --margin-top: 0;
    margin: 10px !important;
  }
  .tab-container .tab-list-container > ul li {
    margin-left: -50px;
  }
  .tab-container .tab-list-container > ul {
    padding: 0 0 0 15px;
  }
  .letter-container.second .InnerContainWrapper {
    padding: 110px 0 50px;
  }
  .FooterWrap .InnerContainWrapper {
    padding: 40px 0 60px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 1024px) {
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
  h2.L-Title {
    /* font-size: 3.5rem; */
  }
  :root {
    /* font-size: calc(16px / 1.4); */
  }
  :root {
    --fz-75: calc(4.6875rem / 1.3);
    --fz-72: calc(4.5rem / 1.3);
    --fz-70: calc(4.375rem / 1.3);
    --fz-60: calc(3.75rem / 1.3);
    --fz-55: calc(3.4375rem / 1.2);
    --fz-50: calc(3.125rem / 1.2);
    --fz-40: calc(2.5rem / 1.3);
    --fz-35: calc(2.1875rem / 1.3);
    --fz-32: calc(2rem / 1.1);
    --fz-30: calc(1.875rem / 1.2);
    --fz-25: calc(1.5625rem / 1.2);
    --fz-24: calc(1.5rem / 1.1);
    --fz-22: calc(1.375rem / 1.1);
    --fz-20: calc(1.25rem / 1);
    --fz-18: calc(1.125rem / 1);
    --fz-16: calc(1rem / 1);
  }
  .reason-container .circle-container h4.S-Title {
    font-size: var(--fz-30);
  }
  .tab-container .tab-list-container > ul li {
    margin: 0 0 0 -40px;
  }
  .tab-container h2.S-Title br {
    display: none;
  }
  .center-container h1.L-Title br {
    display: none;
  }
  .letter-container .text-bg {
    min-width: 300px;
  }

  .letter-second-container .text-block {
    padding: 30px 30px 50px;
  }
  .letter-second-container h2.S-Title {
    /* font-size: 2.5rem; */
  }
  .letter-container.second .text-bg {
    min-width: 400px;
    width: 400px;
    padding: 90px 75px 60px;
    background: 50% 50% / contain no-repeat url("../images/bg/drop-bg-2.png");
  }
  .letter-container.second h3.L-Title {
    --fz-35: 24px;
  }
  .letter-container.second .text-bg .LogoWrap {
    left: calc(50% - (251px / 2));
    width: 140px;
    height: max-content;
  }
  .letter-container.second .InnerContainWrapper::after {
    display: none;
  }
  .last-container .InnerContainWrapper {
    padding: 120px 0 78px;
  }
  .bonus-container h1.L-Title br {
    display: none;
  }
  h1.L-Title {
    /* font-size: 3.3rem; */
  }
  .letter-container h4.Title {
    /* font-size: 1.8rem; */
  }
  .common-header h3.L-Title br {
    display: none;
  }
  h1.S-Title {
    /* font-size: 3.7rem; */
  }
  .discount-container h2.L-Title strong {
    font-size: 1.2em;
  }
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .mobile-br br {
    display: block;
  }
  .mobile-br {
    margin-top: 5px;
    font-size: var(--fz-25) !important;
  }
  :root {
    --fz-75: calc(4.6875rem / 2);
    --fz-72: calc(4.5rem / 1.7);
    --fz-70: calc(4.375rem / 1.7);
    --fz-60: calc(3.75rem / 1.6);
    --fz-55: calc(3.4375rem / 1.5);
    --fz-50: calc(3.125rem / 1.5);
    --fz-40: calc(2.5rem / 1.4);
    --fz-35: calc(2.1875rem / 1.6);
    --fz-32: calc(2rem / 1.3);
    --fz-30: calc(1.875rem / 1.3);
    --fz-25: calc(1.5625rem / 1.3);
    --fz-24: calc(1.5rem / 1.2);
    --fz-22: calc(1.375rem / 1.1);
    --fz-20: calc(1.25rem / 1.1);
    --fz-18: calc(1.125rem / 1.1);
    --fz-16: calc(1rem / 1.1);
  }
  #center-slider {
    padding: 0 30px;
  }
  .jcarousel-control-prev,
  .jcarousel-control-next {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    width: 25px;
  }
  .reason-container .circle-container h4.S-Title {
    font-size: var(--fz-30);
  }
  h2.L-Title {
    /* font-size: 3rem; */
  }
  .discount-container h2.L-Title strong {
    font-size: 1.2em;
  }
  .common-header h3.L-Title br {
    display: none;
  }
  .bonus-container h1.L-Title br {
    display: none;
  }
  .last-container .InnerContainWrapper {
    padding: 80px 0 78px;
  }
  .reason-container .circle-container > ul li {
    width: 290px;
    height: 290px;
    padding: 20px;
    margin: 10px 0 !important;
  }
  .tab-container .tab-list-container > ul li {
    margin: 0;
  }
  .letter-container .text-bg {
    min-width: 300px;
    padding: 90px 50px 90px;
    background: 50% 50%/100% no-repeat url(../images/bg/drop-bg.png);
    width: 100%;
  }
  .letter-container h4.Title {
    font-size: 18px;
  }
  .tab-container .tab-list-container > ul li {
    margin: 0 0 0 -25px;
  }

  .center-container h1.L-Title br {
    display: none;
  }
  .letter-container .text-bg {
    min-width: 300px;
  }

  .letter-second-container .text-block {
    padding: 30px 20px 50px;
  }
  .letter-second-container h2.S-Title {
    /* font-size: 1.875rem; */
  }
  .letter-second-container .flex-item.left,
  .letter-second-container .flex-item {
    padding: 15px !important;
  }
  .center-container h1.L-Title {
    /* font-size: 3.125rem; */
  }
  .letter-third-container .center h3.Title {
    /* font-size: 1.5rem; */
  }
  .center-container h1.L-Title br {
    display: none;
  }
  .tab-container h2.S-Title {
    /* font-size: 2.7rem; */
  }
  .tab-container .heading {
    margin-bottom: 50px;
  }
  .letter-second-container h2.S-Title {
    /* font-size: 2.5rem; */
  }
  .letter-container.second .text-bg {
    min-width: 300px;
    width: 300px;
    padding: 81px 0 60px;
    background: 50% 50% / 100% 100% no-repeat url(../images/bg/drop-bg-2.png);
  }
  .letter-container.second h3.L-Title {
    /* font-size: 1.25rem; */
  }
  .letter-container.second .text-bg .LogoWrap {
    left: calc(50% - (251px / 2));
    width: 140px;
    height: max-content;
  }
  .letter-container.second .InnerContainWrapper::after {
    display: none;
  }
  .reason-container h1.S-Title {
    /* font-size: 3.125rem; */
  }
  .reason-container h1.S-Title br {
    display: none;
  }
  .FooterWrap .mail a {
    line-break: anywhere;
  }
  .reason-container .center h4.S-Title br,
  .center-container .desc br {
    display: none;
  }
  .FooterWrap .mail {
    font-size: var(--fz-25);
  }
  .letter-third-container .InnerContainWrapper {
    max-width: initial;
  }
  .common-header h2.S-Title br {
    display: none;
  }
}