@charset "UTF-8";
/*
START MEDIA QUERY MANAGER

@media only screen and (min-width: 1800px){}
@media only screen and (min-width: 1550px){}
@media only screen and (min-width: 1200px){}
@media only screen and (min-width: 1025px){}
@media only screen and (min-width: 992px){}
@media only screen and (min-width: 768px){}
@media only screen and (min-width: 481px){}
@media only screen and (min-width: 421px){}
@media only screen and (min-width: 381px){}

@media only screen and (max-width: 1799px){}
@media only screen and (max-width: 1549px){}
@media only screen and (max-width: 1199px){}
@media only screen and (max-width: 1024px){}
@media only screen and (max-width: 991px){}
@media only screen and (max-width: 767px){}
@media only screen and (max-width: 480px){}
@media only screen and (max-width: 420px){}
@media only screen and (max-width: 380px){}

@media only screen and (min-width: 1549px) and (max-width: 1799px){}
@media only screen and (min-width: 1025px) and (max-width: 1300px){}
@media only screen and (min-width: 992px) and (max-width: 1199px){}
@media only screen and (min-width: 992px) and (max-width: 1024px){}
@media only screen and (min-width: 768px) and (max-width: 991px){}
@media only screen and (min-width: 481px) and (max-width: 767px){}

END MEDIA QUERY MANAGER
*/
/*====================================================================================
START TABLE OF CONTENT

1. START COMMON BASE.
2. START COMMON CONTAINER.
3. START COMMON HEADER.
4. START COMMON FOOTER.
5. START COMMON BACK TO TOP.
6. START COMMON SECTION.
7. START COMMON ICON.
8. START COMMON HEADING, TITLE.
9. START COMMON BUTTON.
10. START COMMON DECORATION.
11. START COMMON KEYFRAMES.
12. START COMMON TEXT.
13. START COMMON LINK.
14. START COMMON ITEM.
15. START COMMON LIST.
16. START COMMON BOX.
17. START COMMON BLOCK.
18. START COMMON IMAGE.
19. START COMMON EFFECT.
20. START COMMON LAYOUT.
21. START COMMON COLOR.
22. START COMMON BACKGROUND.
23. START COMMON CUSTOM MARGIN.
24. START COMMON CUSTOM PADDING.
25. START COMMON BANNER.

END TABLE OF CONTENT
====================================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/*====================================================================================
1. START COMMON BASE.
====================================================================================*/
/*---------- Start Font Noto Sans JP ----------*/
/*---------- End Font Noto Sans JP ----------*/
/*---------- Start Font Noto Serif JP ----------*/
/*---------- End Font Noto Serif JP ----------*/
/*---------- Start Font Jost ----------*/
/*---------- End Font Jost ----------*/
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
}

.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
}

.jost {
  font-family: "Jost", sans-serif;
}

/*---------- Start Colors ----------*/
:root {
  --color-gray: #222222;
  --color-gray-second: #333333;
  --color-gray-third: #929292;
  --color-gray-fourth: #f0f2f3;
  --color-gray-fifth: #f0f0f0;
  --color-gray-sixth: #1a3f40;
  --color-gray-seventh: #999999;
  --color-gray-eighth: #7f7f7f;
  --color-gray-ninth: #aeaeae;
  --color-gray-tenth: rgba(255, 255, 255, 0.85);
  --color-black: #000000;
  --color-white: #ffffff;
  --font-jost: "Jost", sans-serif;
  --font-noto-sans-jp: "Noto Sans JP", sans-serif;
  --font-noto-serif-jp: "Noto Serif JP", serif;
}

/*---------- End Colors ----------*/
html,
body {
  -webkit-font-smoothing: antialiased;
}

html {
  font-size: 62.5%;
  overflow-y: auto;
  line-height: normal;
}

body {
  font-size: 1.4rem;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-family: var(--font-noto-sans-jp);
  color: var(--color-gray);
  background-color: var(--color-white);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.is-open, body.lb-disable-scrolling {
  position: fixed;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 48rem;
  min-width: 32rem;
  margin: 0 auto;
  overflow: hidden;
}

/*====================================================================================
1. END COMMON BASE.
====================================================================================*/
/*====================================================================================
2. START COMMON CONTAINER.
====================================================================================*/
.container.no-gutter {
  padding-left: 0;
  padding-right: 0;
}

.container {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/*====================================================================================
2. END COMMON CONTAINER.
====================================================================================*/
/*====================================================================================
3. START COMMON HEADER.
====================================================================================*/
/*---------- HAMBURGER ----------*/
.hamburger {
  position: relative;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hamburger__wrap {
  position: relative;
  width: 2.8rem;
  height: 2rem;
}
.hamburger span {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 0.2rem;
  background-color: var(--color-white);
  transition: all 0.3s ease-in-out;
}
.hamburger span:nth-child(1), .hamburger span:nth-child(3) {
  transform-origin: center;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 0.9rem;
}
.hamburger span:nth-child(3) {
  top: 1.8rem;
}
.hamburger.is-active span:nth-child(1), .hamburger.is-active span:nth-child(3) {
  top: 0.9rem;
  width: 100%;
}
.hamburger.is-active span:nth-child(1) {
  transform: rotate(-225deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  transform: rotate(225deg);
}

/*---------- END HAMBURGER ----------*/
/*====================================================================================
3. END COMMON HEADER.
====================================================================================*/
/*---------- START LOGO HEADER ----------*/
.logo-header img {
  max-height: 5rem;
}

/*---------- END LOGO HEADER ----------*/
/*---------- START HEADER NAV ----------*/
.hnav {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 7rem 1rem 2rem 1rem;
  opacity: 0;
  visibility: hidden;
  background-color: var(--color-white);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.hnav.active {
  opacity: 1;
  visibility: visible;
}
.hnav.active .hnav__item {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.hnav.active .hnav__item:nth-child(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.hnav.active .hnav__item:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.hnav.active .hnav__item:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.hnav.active .hnav__item:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.hnav.active .hnav__item:nth-child(5) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.hnav.active .hnav__item:nth-child(6) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.hnav.active .hnav__item:nth-child(7) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.hnav.active .hnav__item:nth-child(8) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.hnav.active .hnav__item:nth-child(9) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.hnav.active .hnav__item:nth-child(10) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.hnav.active .hnav__item:nth-child(11) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.hnav.active .hnav__item:nth-child(12) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.hnav.active .hnav__item:nth-child(13) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.hnav.active .hnav__item:nth-child(14) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.hnav.active .hnav__item:nth-child(15) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.hnav__item {
  border-bottom: 0.1rem solid var(--color-gray-third);
}
.hnav__item:last-child {
  border-bottom: 0;
}
.hnav__link {
  display: block;
  padding: 1.3rem 0;
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  font-family: var(--font-jost);
}
.hnav-social {
  margin: 4rem 0;
}
.hnav-social__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 39rem;
  margin: 0 auto;
}
.hnav-social__item {
  margin: 0 0.5rem;
}
.hnav-social__item a {
  display: inline-block;
}
.hnav-social__item--ins img {
  max-height: 4.4rem;
}
.hnav-social__item--tiktok img {
  max-height: 3.8rem;
}
.hnav-social__item--twitter img {
  max-height: 3.6rem;
}
.hnav-social__item--youtube img {
  max-height: 3.2rem;
}
.hnav-social__item--line img {
  max-height: 4.1rem;
}

@media only screen and (max-width: 380px) {
  .hnav-social__item--ins img {
    max-height: 3.7rem;
  }
  .hnav-social__item--tiktok img {
    max-height: 3.3rem;
  }
  .hnav-social__item--twitter img {
    max-height: 3.2rem;
  }
  .hnav-social__item--youtube img {
    max-height: 2.8rem;
  }
  .hnav-social__item--line img {
    max-height: 3.7rem;
  }
}
/*---------- END HEADER NAV ----------*/
.header a {
  text-decoration: none;
}
.header__row {
  padding: 1rem;
  overflow: hidden;
}
.header__left {
  flex: 1;
  min-width: 1px;
  margin-right: 2rem;
}
.header__right {
  flex: 0 0 auto;
}
.header__list {
  display: flex;
}
.header__item {
  width: 5rem;
  height: 5rem;
  margin-left: 1rem;
  background-color: var(--color-gray-second);
}
.header__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
.header__item--cart img {
  max-height: 2.5rem;
}
.header__item--mail img {
  max-height: 1.8rem;
}
.header__item:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 420px) {
  .header__item {
    margin-left: 0.8rem;
  }
}
/*====================================================================================
4. START COMMON FOOTER.
====================================================================================*/
/*---------- START LOGO FOOTER ----------*/
.logo-footer {
  text-align: center;
}
.logo-footer img {
  max-height: 5.8rem;
}

/*---------- END LOGO FOOTER ----------*/
/*---------- START FOOTER NAV ----------*/
.fnav {
  display: flex;
}
.fnav a {
  text-decoration: none;
}
.fnav__group {
  width: 50%;
  display: flex;
  justify-content: center;
}
.fnav__item {
  margin-bottom: 2.2rem;
}
.fnav__item:last-child {
  margin-bottom: 0;
}
.fnav__link {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  font-family: var(--font-jost);
}

/*---------- END FOOTER NAV ----------*/
/*---------- START SOCIAL FOOTER ----------*/
.social-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 37rem;
  margin: 0 auto;
}
.social-footer__item--ins img {
  max-height: 2.8rem;
}
.social-footer__item--tiktok img {
  max-height: 2.5rem;
}
.social-footer__item--twitter img {
  max-height: 2.4rem;
}
.social-footer__item--youtube img {
  max-height: 2rem;
}
.social-footer__item--line img {
  max-height: 2.8rem;
}
.social-footer__item--mail img {
  max-height: 2rem;
}
.social-footer__item--cart img {
  max-height: 2.8rem;
}

/*---------- END SOCIAL FOOTER ----------*/
/*---------- START LINK FOOTER ----------*/
.link-footer {
  font-weight: 400;
  text-decoration: none;
  font-family: var(--font-jost);
}

/*---------- END LINK FOOTER ----------*/
/*---------- START COPY FOOTER ----------*/
.copy-footer {
  padding: 1.5rem 0 1.5rem 0;
  border-top: 0.1rem solid var(--color-gray-seventh);
}
.copy-footer__text {
  font-size: 1.2rem;
  font-family: var(--font-jost);
}

/*---------- END COPY FOOTER ----------*/
.footer__main {
  padding: 5rem 0 4.5rem 0;
}
.footer .logo-footer {
  margin-bottom: 3rem;
}
.footer__address {
  margin-bottom: 2rem;
  text-align: center;
}
.footer .social-footer {
  margin-bottom: 4.5rem;
}
.footer__pc {
  background-color: var(--color-gray-second);
}
.footer__pc a {
  display: block;
  padding: 1rem 0px 1rem 1rem;
  text-align: center;
  text-decoration: none;
}
.footer__pc span {
  display: inline-block;
}
.footer__pc span img {
  max-height: 25px;
}

/*====================================================================================
4. END COMMON FOOTER.
====================================================================================*/
/*====================================================================================
5. COMMON BACK TO TOP.
====================================================================================*/
.to-top {
  position: fixed;
  cursor: pointer;
  z-index: 200;
  right: 1.5rem;
  bottom: 11rem;
  transform: translateY(24rem);
  transition: all 0.4s ease;
}
.to-top img {
  max-height: 11rem;
}
.to-top.is-show {
  transform: translateY(0rem);
  transition: all 0.5s linear;
}

/*====================================================================================
5. END COMMON BACK TO TOP.
====================================================================================*/
/*====================================================================================
6. START COMMON SECTION.
====================================================================================*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
6. END COMMON SECTION.
====================================================================================*/
/*====================================================================================
7. START COMMON ICON.
====================================================================================*/
/*---------- START ICON ZOOM ----------*/
.icon-zoom {
  position: relative;
  display: block;
  overflow: hidden;
}
.icon-zoom:before {
  position: absolute;
  display: inline-block;
  content: "";
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  width: 4rem;
  height: 4rem;
  background-image: url("../common/lightbox/icon-zoom.png");
  background-size: 2.8rem 2.8rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: rgba(0, 0, 0, 0.2);
}

/*---------- END ICON ZOOM ----------*/
/*---------- START BASE ICON ----------*/
.base-icon {
  display: inline-block;
}
.base-icon::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/*---------- END BASE ICON ----------*/
/*---------- START ARROW CIRCLE ----------*/
.arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  right: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  padding-bottom: 0.6rem;
  background-color: var(--color-gray-second);
}
.arrow-circle img {
  max-height: 0.5rem;
}

/*---------- END ARROW CIRCLE ----------*/
/*====================================================================================
7. END COMMON ICON.
====================================================================================*/
/*====================================================================================
8. START COMMON HEADING, TITLE.
====================================================================================*/
/*---------- START TITLE TOP ----------*/
.title-top span {
  display: block;
}
.title-top__en {
  margin-bottom: 0.4rem;
  font-size: 4.5rem;
  line-height: 1.3;
  font-weight: 300;
  font-family: var(--font-jost);
}
.title-top__ja {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 400;
}

@media only screen and (max-width: 420px) {
  .title-top__en {
    font-size: 3.4rem;
  }
  .title-top__ja {
    font-size: 1.4rem;
  }
}
/*---------- END TITLE TOP ----------*/
/*---------- START TITLE TOP WHITE ----------*/
.title-top--white span {
  color: var(--color-white);
}

/*---------- END TITLE TOP WHITE ----------*/
/*---------- TITLE MAIN ----------*/
.title-main {
  position: relative;
  padding-bottom: 1.8rem;
}
.title-main::before {
  position: absolute;
  content: "";
  left: 50%;
  bottom: 0;
  width: 6.4rem;
  height: 0.4rem;
  margin-left: -3.2rem;
  background-color: var(--color-black);
}
.title-main span {
  display: block;
  text-align: center;
}
.title-main__en {
  margin-bottom: 0.4rem;
  font-size: 4.5rem;
  line-height: 1.3;
  font-weight: 300;
  font-family: var(--font-jost);
}
.title-main__ja {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 400;
}

@media only screen and (max-width: 420px) {
  .title-main__en {
    font-size: 3.4rem;
  }
  .title-main__ja {
    font-size: 1.4rem;
  }
}
/*---------- END TITLE MAIN ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
8. END COMMON HEADING, TITLE.
====================================================================================*/
/*====================================================================================
9. START COMMON BUTTON.
====================================================================================*/
/*---------- START BUTTON BASE ----------*/
.btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 0;
  border: 0;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  text-decoration: none !important;
}
.btn:focus {
  outline: none;
}
.btn.full-width {
  display: block;
  width: 100%;
}

/*---------- END BUTTON BASE ----------*/
/*---------- START BUTTON TOP ----------*/
.btn-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  padding-right: 6rem;
}
.btn-top__text {
  line-height: 1.5;
  font-weight: 700;
}
.btn-top__arrow {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  right: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  padding-bottom: 0.6rem;
  background-color: var(--color-gray-second);
}
.btn-top__arrow img {
  max-height: 0.5rem;
}

/*---------- END BUTTON TOP ----------*/
/*---------- START BUTTON TOP ENGLISH ----------*/
.btn-top--en .btn-top__text {
  font-size: 1.8rem;
  font-weight: 400;
  font-family: "Jost", sans-serif;
}

/*---------- END BUTTON TOP ENGLISH ----------*/
/*---------- START BUTTON TOP WHITE ----------*/
.btn-top--white .btn-top__text {
  color: var(--color-white);
}
.btn-top--white .btn-top__arrow {
  background-color: var(--color-white);
}

/*---------- END BUTTON TOP WHITE ----------*/
/*---------- START BUTTON TOP LEFT ----------*/
.btn-top--left {
  padding-left: 6rem;
  padding-right: 0;
}
.btn-top--left .btn-top__arrow {
  left: 0;
  right: auto;
}

/*---------- END BUTTON TOP LEFT ----------*/
/*---------- START BUTTON SOCIAL ----------*/
.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 12rem;
  padding: 2rem;
  text-align: center;
  border: 0.1rem solid var(--color-gray-second);
}
.btn-social > a {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.btn-social__icon, .btn-social__arrow {
  position: absolute;
  top: 50%;
}
.btn-social__icon {
  display: inline-block;
  left: 2rem;
  width: 5rem;
  transform: translateY(-50%);
  text-align: center;
}
.btn-social__icon--ins img {
  max-height: 4rem;
}
.btn-social__icon--tiktok img {
  max-height: 3.8rem;
}
.btn-social__icon--twitter img {
  max-height: 3.6rem;
}
.btn-social__icon--youtube img {
  max-height: 3.4rem;
}
.btn-social__icon--line img {
  max-height: 4.2rem;
}
.btn-social__arrow {
  right: 2rem;
  margin-top: -2.2rem;
}
.btn-social__text {
  font-size: 2.7rem;
  line-height: 1.2;
  font-weight: 300;
  font-family: var(--font-jost);
}

@media only screen and (max-width: 420px) {
  .btn-social__icon {
    left: 1.5rem;
  }
  .btn-social__arrow {
    right: 1.5rem;
  }
  .btn-social__text {
    font-size: 2.3rem;
  }
}
/*---------- END BUTTON SOCIAL ----------*/
/*---------- START BUTTON MAIN ----------*/
.btn-main {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4rem;
  text-align: center;
  background-color: var(--color-white);
  border: 0.1rem solid var(--color-gray-second);
}
.btn-main__text {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 400;
  font-family: var(--font-jost);
}
.btn-main__arrow {
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -0.4rem;
}
.btn-main__arrow picture {
  line-height: 0;
}
.btn-main__arrow img {
  max-height: 0.5rem;
}

/*---------- END BUTTON MAIN ----------*/
/*---------- START BUTTON MAIN SMALL  ----------*/
.btn-main--sm {
  max-width: 15.2rem;
  padding: 0.5rem 3rem 0.5rem 0.5rem;
}

/*---------- END BUTTON MAIN SMALL ----------*/
/*---------- START BUTTON MAIN MEDIUM ----------*/
.btn-main--md {
  max-width: 25rem;
  min-height: 5rem;
}

/*---------- END BUTTON MAIN MEDIUM ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
9. END COMMON BUTTON.
====================================================================================*/
/*====================================================================================
10. START COMMON DECORATION.
====================================================================================*/
/*---------- START BASE DECORATION ----------*/
.base-deco {
  position: absolute;
  display: inline-block;
  pointer-events: none;
}

/*---------- END BASE DECORATION ----------*/
/*---------- START SHAPE DECORATION ----------*/
.base-shape {
  position: absolute;
  display: inline-block;
  pointer-events: none;
}
.base-shape img {
  height: 100%;
  width: 100%;
}

/*---------- END SHAPE DECORATION ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
10. END COMMON DECORATION.
====================================================================================*/
/*====================================================================================
11. START COMMON KEYFRAMES.
====================================================================================*/
/*---------- START FADE IN LEFT ----------*/
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-5rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-5rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*---------- END FADE IN LEFT ----------*/
/*---------- START FADE IN UP ----------*/
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*---------- END FADE IN UP ----------*/
/*---------- START SCROLL ----------*/
@-webkit-keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1rem));
  }
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1rem));
  }
}
/*---------- END SCROLL ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
11. END COMMON KEYFRAMES.
====================================================================================*/
/*====================================================================================
12. START COMMON TEXT.
====================================================================================*/
/*---------- START TEXT INDENT ----------*/
.text-indent {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

/*---------- END TEXT INDENT ----------*/
/*---------- START HOVER TEXT UNDERLINE ----------*/
a.tdn {
  text-decoration: none;
}
a.tdn:hover {
  text-decoration: underline;
}

/*---------- END HOVER TEXT UNDERLINE ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
12. END COMMON TEXT.
====================================================================================*/
/*====================================================================================
13. START COMMON LINK.
====================================================================================*/
/* ---------- ADD LINK ---------- */
.add-link {
  position: relative;
}
.add-link > a {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ---------- END ADD LINK ---------- */
/*====================================================================================
13. END COMMON LINK.
====================================================================================*/
/*====================================================================================
14. START COMMON ITEM.
====================================================================================*/
/*---------- START ITEM BASE ----------*/
.item-base {
  position: relative;
}
.item-base::before {
  position: absolute;
  top: 0;
  left: 0;
}

/*---------- END ITEM BASE ----------*/
/*---------- START ITEM MARK DISC ----------*/
.item-mark-disc {
  padding-left: 1em;
}
.item-mark-disc::before {
  content: "・";
}

/*---------- END ITEM MARK DISC ----------*/
/*---------- START ITEM CIRCLE ----------*/
.item-circle {
  padding-left: 1.1em;
}
.item-circle::before {
  content: "●";
}

/*---------- END ITEM CIRCLE ----------*/
/*---------- START ITEM STAR ----------*/
.item-star {
  padding-left: 1.1em;
}
.item-star::before {
  content: "※";
}

/*---------- END ITEM STAR ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
14. END COMMON ITEM.
====================================================================================*/
/*====================================================================================
15. START COMMON LIST.
====================================================================================*/
/*---------- START LIST INDENT ----------*/
.list-indent li {
  padding-left: 1em;
  text-indent: -1em;
}

/*---------- END  LIST INDENT ----------*/
/*---------- START LIST BASE ----------*/
.list-base > li {
  position: relative;
}
.list-base > li::before {
  position: absolute;
  top: 0;
  left: 0;
}

/*---------- END LIST BASE ----------*/
/*---------- START LIST MARK DISC ----------*/
.list-mark-disc > li {
  padding-left: 1em;
}
.list-mark-disc > li::before {
  content: "・";
}

/*---------- END  LIST MARK DISC ----------*/
/*---------- START LIST CIRCLE ----------*/
.list-circle > li {
  padding-left: 1.3em;
}
.list-circle > li::before {
  content: "●";
}

/*---------- END LIST CIRCLE ----------*/
/*---------- START LIST STAR ----------*/
.list-star > li {
  padding-left: 1.3em;
}
.list-star > li::before {
  content: "※";
}

/*---------- END LIST STAR ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
15. END COMMON LIST.
====================================================================================*/
/*====================================================================================
16. START COMMON BOX.
====================================================================================*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
16. END COMMON BOX.
====================================================================================*/
/*====================================================================================
17. START COMMON BLOCK.
====================================================================================*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
17. END COMMON BLOCK.
====================================================================================*/
/*====================================================================================
18. START COMMON IMAGE.
====================================================================================*/
/*---------- START IMAGE OBJECT FIT  ----------*/
.img-ofi {
  width: 100%;
  height: 100%;
}
.img-ofi--center {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  font-family: "object-fit: cover; object-position: center", sans-serif;
}
.img-ofi--top {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
  font-family: "object-fit: cover; object-position: center top", sans-serif;
}
.img-ofi--bottom {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center bottom;
  object-position: center bottom;
  font-family: "object-fit: cover; object-position: center bottom", sans-serif;
}
.img-ofi--left {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left center;
  object-position: left center;
  font-family: "object-fit: cover; object-position: left center", sans-serif;
}
.img-ofi--right {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: right center;
  object-position: right center;
  font-family: "object-fit: cover; object-position: right center", sans-serif;
}

/*---------- END IMAGE OBJECT FIT ----------*/
/*---------- START BACKGROUND IMAGE  ----------*/
.bg-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/*---------- END BACKGROUND IMAGE ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
18. END COMMON IMAGE.
====================================================================================*/
/*====================================================================================
19. START COMMON EFFECT.
====================================================================================*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
19. END COMMON EFFECT.
====================================================================================*/
/*====================================================================================
20. START COMMON LAYOUT.
====================================================================================*/
/*---------- START FLEX LAYOUT ----------*/
.height-center {
  display: flex;
  align-items: center;
}

.width-center {
  display: flex;
  justify-content: center;
}

.width-between {
  display: flex;
  justify-content: space-between;
}

.center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*---------- END FLEX LAYOUT ----------*/
/*---------- START FLEX LIST ----------*/
.list-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.list-between {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list-wrap {
  display: flex;
  flex-wrap: wrap;
}

/*---------- END FLEX LIST ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
20. END COMMON LAYOUT.
====================================================================================*/
/*====================================================================================
21. START COMMON COLOR.
====================================================================================*/
.c-ffffff {
  color: #ffffff !important;
}

.c-000000 {
  color: #000000 !important;
}

.c-222222 {
  color: #222222 !important;
}

/*====================================================================================
21. END COMMON COLOR.
====================================================================================*/
/*====================================================================================
22. START COMMON BACKGROUND.
====================================================================================*/
.bg-ffffff {
  background-color: #ffffff !important;
}

.bg-f0f2f3 {
  background-color: #f0f2f3 !important;
}

.bg-f0f0f0 {
  background-color: #f0f0f0 !important;
}

.bg-f6beca {
  background-color: #f6beca !important;
}

.bg-f0f2f3 {
  background-color: #f0f2f3 !important;
}

/*====================================================================================
22. END COMMON BACKGROUND.
====================================================================================*/
/*====================================================================================
23. START COMMON CUSTOM MARGIN.
====================================================================================*/
/*---------- TITLE MARGIN RES ----------*/
/***** START TOP *****/
/****** END TOP******/
/****** START BOTTOM ******/
.tt-mg-bottom01 {
  margin-bottom: 2.5rem !important;
}

.tt-mg-bottom02 {
  margin-bottom: 3rem !important;
}

/****** END BOTTOM ******/
/****** START LEFT ******/
/****** END LEFT ******/
/****** START RIGHT ******/
/****** END RIGHT ******/
/*---------- END TITLE MARGIN RES ----------*/
/*---------- TABLE MARGIN RES ----------*/
/***** START TOP *****/
/****** END TOP******/
/****** START BOTTOM ******/
/****** END BOTTOM ******/
/****** START LEFT ******/
/****** END LEFT ******/
/****** START RIGHT ******/
/****** END RIGHT ******/
/*---------- END TABLE MARGIN RES ----------*/
/*---------- START LAYOUT MARGIN RES ----------*/
.mg-layout01 {
  margin: 4rem 0 4.5rem 0 !important;
}

.mg-layout02 {
  margin: 5rem 0 !important;
}

.mg-layout03 {
  margin: 4rem 0 5rem 0 !important;
}

/*---------- END LAYOUT MARGIN RES ----------*/
/*---------- START MARGIN RES ----------*/
/***** START TOP *****/
.mg-top01 {
  margin-top: 5rem !important;
}

.mg-top02 {
  margin-top: 4.2rem !important;
}

/****** END TOP******/
/****** START BOTTOM ******/
.mg-bottom01 {
  margin-bottom: 5rem !important;
}

.mg-bottom02 {
  margin-bottom: 4.5rem !important;
}

.mg-bottom03 {
  margin-bottom: 2.5rem !important;
}

/****** END BOTTOM ******/
/****** START LEFT ******/
/****** END LEFT ******/
/****** START RIGHT ******/
/****** END RIGHT ******/
/*---------- END MARGIN RES ----------*/
/*====================================================================================
23. END COMMON CUSTOM MARGIN.
====================================================================================*/
/*====================================================================================
24. START COMMON CUSTOM PADDING.
====================================================================================*/
/*---------- TITLE PADDING RES ----------*/
/***** START TOP *****/
/****** END TOP******/
/****** START BOTTOM ******/
/****** END BOTTOM ******/
/****** START LEFT ******/
/****** END LEFT ******/
/****** START RIGHT ******/
/****** END RIGHT ******/
/*---------- END TITLE PADDING RES ----------*/
/*---------- TABLE PADDING RES ----------*/
/***** START TOP *****/
/****** END TOP******/
/****** START BOTTOM ******/
/****** END BOTTOM ******/
/****** START LEFT ******/
/****** END LEFT ******/
/****** START RIGHT ******/
/****** END RIGHT ******/
/*---------- END TABLE PADDING RES ----------*/
/*---------- START LAYOUT PADDING RES ----------*/
.pd-layout01 {
  padding: 4.2rem 0 4.5rem 0 !important;
}

.pd-layout02 {
  padding: 5rem 0 !important;
}

.pd-layout03 {
  padding: 4.2rem 0 5rem 0 !important;
}

.pd-layout04 {
  padding: 4.5rem 0 !important;
}

/*---------- END LAYOUT PADDING RES ----------*/
/*---------- START PADDING RES ----------*/
/***** START TOP *****/
.pd-top01 {
  padding-top: 5rem !important;
}

.pd-top02 {
  padding-top: 4.5rem !important;
}

/****** END TOP******/
/****** START BOTTOM ******/
.pd-bottom01 {
  padding-bottom: 5rem !important;
}

.pd-bottom02 {
  padding-bottom: 4.5rem !important;
}

/****** END BOTTOM ******/
/****** START LEFT ******/
/****** END LEFT ******/
/****** START RIGHT ******/
/****** END RIGHT ******/
/*---------- END PADDING RES ----------*/
/*====================================================================================
24. END COMMON CUSTOM PADDING.
====================================================================================*/
/*====================================================================================
25. START COMMON BANNER.
====================================================================================*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
25. END COMMON BANNER.
====================================================================================*/
/*====================================================================================
26. START COMMON.
====================================================================================*/
/*---------- START FULL HEIGHT ----------*/
.full-height {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  max-height: 100vh;
}

/*---------- END FULL HEIGHT ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
26. END COMMON.
====================================================================================*/