html {

  -webkit-box-sizing: border-box;

  -webkit-text-size-adjust: 100%;

  -moz-tab-size: 4;

  -o-tab-size: 4;

  box-sizing: border-box;

  word-break: normal;

  tab-size: 4;

}



*,

::before,

::after {

  -webkit-box-sizing: inherit;

  box-sizing: inherit;

  background-repeat: no-repeat;

}



::before,

::after {

  text-decoration: inherit;

  vertical-align: inherit;

}



* {

  margin: 0;

  padding: 0;

}



/* General elements */

hr {

  height: 0;

  overflow: visible;

}



details,

main {

  display: block;

}



summary {

  display: list-item;

}



ol,

ul,

dl {

  list-style: none;

}



em {

  font-style: normal;

}



small {

  font-size: 0.875em;

}



[hidden] {

  display: none;

}



abbr[title] {

  -webkit-text-decoration: underline dotted;

  border-bottom: none;

  text-decoration: underline;

  text-decoration: underline dotted;

}



a {

  background-color: transparent;

}



a:active,

a:hover {

  outline-width: 0;

}



code,

kbd,

pre,

samp {

  font-family: monospace;

}



pre {

  font-size: 1em;

}



b,

strong {

  font-weight: bolder;

}



sub,

sup {

  position: relative;

  font-size: 0.75em;

  line-height: 0;

  vertical-align: baseline;

}



sub {

  bottom: -0.25em;

}



sup {

  top: -0.5em;

}



/* Forms */

input {

  border-radius: 0;

}



[disabled] {

  cursor: default;

}



[type=number]::-webkit-inner-spin-button,

[type=number]::-webkit-outer-spin-button {

  height: auto;

}



[type=search] {

  -webkit-appearance: textfield;

  outline-offset: -2px;

}



[type=search]::-webkit-search-decoration {

  -webkit-appearance: none;

}



textarea {

  overflow: auto;

  resize: vertical;

}



button,

input,

optgroup,

select,

textarea {

  font: inherit;

}



optgroup {

  font-weight: bold;

}



button {

  overflow: visible;

}



button,

select {

  text-transform: none;

}



button,

[type=button],

[type=reset],

[type=submit],

[role=button] {

  color: inherit;

  cursor: pointer;

}



button,

html [type=button],

[type=reset],

[type=submit] {

  -webkit-appearance: button;

}



button,

input,

select,

textarea {

  border-style: none;

  background-color: transparent;

}



button::-moz-focus-inner,

[type=button]::-moz-focus-inner,

[type=reset]::-moz-focus-inner,

[type=submit]::-moz-focus-inner {

  padding: 0;

  border-style: none;

}



button:-moz-focusring,

[type=button]::-moz-focus-inner,

[type=reset]::-moz-focus-inner,

[type=submit]::-moz-focus-inner {

  outline: 1px dotted ButtonText;

}



select {

  -moz-appearance: none;

  -webkit-appearance: none;

}



select::-ms-expand {

  display: none;

}



select::-ms-value {

  color: currentColor;

}



legend {

  display: table;

  max-width: 100%;

  border: 0;

  color: inherit;

  white-space: normal;

}



::-webkit-file-upload-button {

  -webkit-appearance: button;

  color: inherit;

  font: inherit;

}



/* Specify media element style */

img {

  border-style: none;

}



progress {

  vertical-align: baseline;

}



svg:not([fill]) {

  fill: currentColor;

}



/* Accessibility */

@media screen {

  [hidden~=screen] {

    display: inherit;

  }

  [hidden~=screen]:not(:active):not(:focus):not(:target) {

    clip: rect(0 0 0 0) !important;

    position: absolute !important;

  }

}

[aria-busy=true] {

  cursor: progress;

}



[aria-controls] {

  cursor: pointer;

}



[aria-disabled] {

  cursor: default;

}



*,

*::before,

*::after {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



html {

  font-size: 1.1713030747vw;

}

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

  html {

    font-size: 4.2666666667vw;

  }

}



body {

  -webkit-text-size-adjust: 100%;

  background-color: #ffffff;

  color: #2B2B2B;

  font-weight: 400;

  font-size: clamp(14px, 0.875rem, 18px);

  line-height: 1.7142857143;

  font-family: "Sawarabi Gothic", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;

  letter-spacing: 0.07em;

}

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

  body {

    font-size: clamp(13px, 0.8125rem, 17px);

  }

}



img {

  -webkit-backface-visibility: hidden;

  max-width: 100%;

  backface-visibility: hidden;

  vertical-align: top;

}



a {

  -webkit-transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;

  color: #2B2B2B;

  text-decoration: none;

  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;

}

a img {

  -webkit-transition: opacity 0.15s ease-in-out;

  transition: opacity 0.15s ease-in-out;

}



button {

  border: none;

  cursor: pointer;

}



/* -------------------------------------------------------------------

* header style

-------------------------------------------------------------------*/

#top .header__logo {

  visibility: hidden;

  opacity: 0;

}

#top .header.is-active .header__logo {

  visibility: visible;

  opacity: 1;

}



.header {

  z-index: 1000;

  position: relative;

  mix-blend-mode: difference;

}

.header__container {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -ms-flex-pack: distribute;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: fixed;

  align-items: center;

  justify-content: space-around;

  width: 100%;

  height: 98px;

}

.header__logo {

  -webkit-transition: opacity 0.3s, visibility 0.3s;

  z-index: 1010;

  position: relative;

  transition: opacity 0.3s, visibility 0.3s;

}

.header__logo a {

  display: block;

  height: 40px;

}

.header__logo img {

  width: 99px;

  height: 39.16px;

}

.header__nav {

  -webkit-box-pack: end;

  -ms-flex-pack: end;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  justify-content: flex-end;

  margin-right: 65px;

  margin-left: auto;

}

.header__navList {

  -ms-flex-wrap: wrap;

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-column-gap: 38px;

  -moz-column-gap: 38px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  column-gap: 38px;

  flex-wrap: wrap;

  align-items: center;

}

.header__navItem a {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  align-items: center;

  color: #ffffff;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

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

  .header__nav {

    display: none;

  }

  .header__container {

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

  }

}

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

  .header__container {

    height: 62px;

  }

  .header__logo {

    height: 33px;

  }

  .header__logo img {

    width: 83px;

    height: 33px;

  }

}



/* -------------------------------------------------------------------

* footer style

-------------------------------------------------------------------*/

.footer {

  padding: clamp(105px, 6.5625rem, 135px) 0 1.875rem;

  background-color: #2B2B2B;

  color: #ffffff;

}

.footer__inner {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.footer__head {

  margin-bottom: clamp(78px, 4.875rem, 100px);

}

.footer__logo {

  width: 11.375rem;

}

.footer__logo img {

  display: block;

}

.footer__logo .img01 {

  width: 182px;

  height: 71.8px;

  margin-bottom: 30px;

}

.footer__logo .img02 {

  width: 73px;

  height: 68.62px;

}

.footer__body {

  width: 43.125rem;

}

.footer__links {

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  margin-bottom: clamp(140px, 8.75rem, 180px);

  gap: 2.5rem 1.875rem;

}

.footer__link {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-direction: column;

  width: calc(50% - 0.9375rem);

}

.footer__online {

  margin-bottom: clamp(30px, 1.875rem, 39px);

  font-size: clamp(18px, 1.375rem, 28px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.58em;

}

.footer__online span {

  display: block;

  margin-top: clamp(7px, 0.4375rem, 9px);

  font-size: clamp(15px, 0.9375rem, 19px);

  line-height: normal;

  letter-spacing: 0.27em;

}

.footer__btn {

  margin-top: auto;

}

.footer__btn a {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  align-items: center;

  justify-content: space-between;

  padding-bottom: clamp(16px, 1rem, 21px);

  color: #ffffff;

  font-size: clamp(12px, 0.75rem, 15px);

  line-height: normal;

  letter-spacing: 0.04em;

}

.footer__btn a::before {

  -webkit-transform: scaleX(1);

  -webkit-transform-origin: left;

  -webkit-transition: -webkit-transform 0.3s ease-in-out;

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 1px;

  transform: scaleX(1);

  transform-origin: left;

  background-color: #ffffff;

  content: "";

  transition: -webkit-transform 0.3s ease-in-out;

  transition: transform 0.3s ease-in-out;

  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;

}

.footer__btn a:hover::before {

  -webkit-animation: underline_anm 0.6s cubic-bezier(0, 0, 0, 1) both;

  animation: underline_anm 0.6s cubic-bezier(0, 0, 0, 1) both;

}

.footer__nav {

  -ms-flex-wrap: wrap;

  -webkit-column-gap: 5rem;

  -moz-column-gap: 5rem;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  column-gap: 5rem;

  row-gap: clamp(20px, 1.25rem, 26px);

  flex-wrap: wrap;

}

.footer__navItem:not(:last-child) {

  margin-bottom: clamp(14px, 0.875rem, 18px);

}

.footer__navItem a {

  display: block;

  color: #ffffff;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.footer__bottom {

  padding-top: clamp(18px, 1.125rem, 23px);

  border-top: 1px solid #666;

}

.footer__sns {

  -ms-flex-wrap: wrap;

  -webkit-column-gap: clamp(40px, 2.5rem, 51px);

  -moz-column-gap: clamp(40px, 2.5rem, 51px);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  column-gap: clamp(40px, 2.5rem, 51px);

  row-gap: clamp(15px, 0.9375rem, 19px);

  flex-wrap: wrap;

}

.footer__sns li a {

  display: block;

  color: #ffffff;

  font-weight: 300;

  font-size: clamp(12px, 0.75rem, 15px);

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.footer__copy small {

  color: #ffffff;

  font-weight: 300;

  font-size: clamp(12px, 0.75rem, 15px);

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

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

  .footer__logo {

    width: 100%;

    margin-bottom: clamp(60px, 3.75rem, 77px);

  }

  .footer__logo .img01 {

    width: 138px;

    height: 54.8px;

    margin-bottom: 23px;

  }

  .footer__logo .img02 {

    width: 55.32px;

    height: 52px;

  }

  .footer__body {

    width: 100%;

  }

  .footer__links {

    margin-bottom: clamp(60px, 3.75rem, 77px);

  }

  .footer__online {

    margin-bottom: clamp(15px, 0.9375rem, 19px);

  }

}

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

  .footer {

    padding: clamp(60px, 3.75rem, 77px) 0 1.5625rem;

  }

  .footer__link {

    width: 100%;

  }

  .footer__nav {

    row-gap: clamp(14px, 0.875rem, 18px);

  }

  .footer__navList {

    width: 100%;

  }

  .footer__navItem a {

    font-size: clamp(12px, 0.75rem, 15px);

  }

  .footer__online {

    font-size: clamp(18px, 1.125rem, 23px);

  }

  .footer__online span {

    font-size: clamp(11px, 0.6875rem, 14px);

  }

  .footer__btn a {

    padding-bottom: clamp(6px, 0.375rem, 8px);

  }

  .footer__bottom {

    padding-top: clamp(15px, 0.9375rem, 19px);

  }

  .footer__sns {

    width: 100%;

    margin-bottom: clamp(45px, 2.8125rem, 58px);

  }

  .footer__sns li {

    width: 100%;

  }

  .footer__copy small {

    font-size: clamp(10px, 0.625rem, 13px);

  }

}



/* -------------------------------------------------------------------

* common style

-------------------------------------------------------------------*/

.container {

  margin-right: auto;

  margin-left: auto;

}

.container--lg {

  padding-right: 5rem;

  padding-left: 5rem;

}

.container--md {

  padding-right: 7.5rem;

  padding-left: 7.5rem;

}

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

  .container {

    padding-right: 1.25rem;

    padding-left: 1.25rem;

  }

}



/* menu style

-------------------------------------------------------------------*/

.menuBtn {

  z-index: 1030;

  position: fixed;

  top: 35.5px;

  right: 5rem;

  width: 27px;

  height: 27px;

  mix-blend-mode: difference;

}

.menuBtn span {

  -webkit-transition: -webkit-transform 0.3s;

  display: block;

  position: absolute;

  left: 0;

  width: 100%;

  height: 1px;

  background-color: #ffffff;

  transition: -webkit-transform 0.3s;

  transition: transform 0.3s;

  transition: transform 0.3s, -webkit-transform 0.3s;

}

.menuBtn span:nth-child(1) {

  top: 10px;

}

.menuBtn span:nth-child(2) {

  bottom: 10px;

}

.menuBtn.is-open {

  mix-blend-mode: normal;

}

.menuBtn.is-open span {

  -webkit-transition: -webkit-transform 0.3s;

  top: 0;

  bottom: 0;

  margin: auto;

  background-color: #2B2B2B;

  transition: -webkit-transform 0.3s;

  transition: transform 0.3s;

  transition: transform 0.3s, -webkit-transform 0.3s;

}

.menuBtn.is-open span:nth-child(1) {

  -webkit-transform: rotate(167.47deg);

  transform: rotate(167.47deg);

}

.menuBtn.is-open span:nth-child(2) {

  -webkit-transform: rotate(12.53deg);

  transform: rotate(12.53deg);

}

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

  .menuBtn {

    top: 17.5px;

    right: 20px;

  }

}



.menu {

  -webkit-transform: translateY(-80px);

  -webkit-transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);

  visibility: hidden;

  z-index: 1020;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100dvh;

  transform: translateY(-80px);

  background: #ffffff;

  opacity: 0;

  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);

  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.7s cubic-bezier(0.23, 1, 0.32, 1);

  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);

}

.menu.is-open {

  -webkit-transform: translateY(0);

  visibility: visible;

  transform: translateY(0);

  opacity: 1;

}

.menu__head {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  z-index: 999;

  position: absolute;

  top: 0;

  left: 0;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  height: 98px;

  padding-right: calc(5rem + 37px);

  padding-left: 5rem;

}

.menu__logo img {

  width: 99px;

  height: 39.16px;

}

.menu__text {

  position: fixed;

  right: calc(5rem + 47px);

  color: #2B2B2B;

  font-size: clamp(12px, 0.75rem, 15px);

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.menu__btnArea {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

}

.menu__container {

  -ms-scroll-chaining: none;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  width: 100%;

  height: 100%;

  overflow-x: hidden;

  overflow-y: scroll;

  overscroll-behavior: none;

}

.menu__overlay {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

  height: 100%;

  background-image: url(../images/common/img_menu-overlay.jpg);

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

}

.menu__body {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  -webkit-box-flex: 1;

  -ms-flex: 1;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex: 1;

  flex-direction: column;

  width: 47.6875rem;

  height: 100%;

  padding: clamp(150px, 9.375rem, 193px) 4.0625rem clamp(40px, 2.5rem, 51px);

}

.menu__nav {

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  row-gap: clamp(45px, 2.8125rem, 58px);

  flex-wrap: wrap;

}

.menu__list--left {

  width: 48.3617300131%;

}

.menu__list--right {

  width: 51.6382699869%;

}

.menu__item {

  -webkit-animation: 0.7s ease-out both;

  margin-bottom: clamp(25px, 1.5625rem, 32px);

  line-height: normal;

  animation: 0.7s ease-out both;

  opacity: 0;

}

.menu__item:last-child {

  margin-bottom: 0;

}

.menu__item a {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  align-items: center;

  color: #2B2B2B;

  font-weight: 300;

  font-size: clamp(16px, 1rem, 21px);

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.menu__item a .text {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -ms-flex-wrap: wrap;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 5px 10px;

}

.menu__item a .subText {

  font-size: clamp(12px, 0.75rem, 15px);

  line-height: normal;

  letter-spacing: 0.04em;

}

.menu__heading {

  margin-bottom: clamp(32px, 2rem, 41px);

}

.menu__label {

  color: #797979;

  font-weight: 300;

  font-size: clamp(12px, 0.75rem, 15px);

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.menu__media {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-align: center;

  -ms-flex-align: center;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  row-gap: clamp(22px, 1.375rem, 28px);

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  margin-top: auto;

}

.menu__sns {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  -webkit-column-gap: clamp(46px, 2.875rem, 59px);

  -moz-column-gap: clamp(46px, 2.875rem, 59px);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  column-gap: clamp(46px, 2.875rem, 59px);

  row-gap: clamp(18px, 1.125rem, 23px);

  flex-wrap: wrap;

  justify-content: space-between;

  margin-bottom: 2px;

}

.menu__sns a {

  display: block;

  color: #2B2B2B;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.menu__list.is-invew {

  -webkit-animation-name: gnav-fadeUp;

  animation-name: gnav-fadeUp;

}

.menu__list.is-invew .menu__item {

  -webkit-animation-name: gnav-fadeUp;

  animation-name: gnav-fadeUp;

}

@-webkit-keyframes gnav-fadeUp {

  0% {

    -webkit-transform: translateY(30px);

    transform: translateY(30px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}

@keyframes gnav-fadeUp {

  0% {

    -webkit-transform: translateY(30px);

    transform: translateY(30px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}

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

  .menu__overlay {

    -webkit-box-flex: 0;

    -ms-flex: none;

    flex: none;

  }

  .menu__body {

    width: 100%;

  }

}

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

  .menu__head {

    height: 62px;

    padding-right: calc(1.25rem + 27px);

    padding-left: 1.25rem;

  }

  .menu__logo img {

    width: 83px;

    height: 33px;

  }

  .menu__text {

    right: calc(1.25rem + 37px);

  }

  .menu__body {

    padding: clamp(85px, 5.3125rem, 109px) 1.25rem clamp(28px, 1.75rem, 36px);

  }

  .menu__nav {

    margin-bottom: clamp(45px, 2.8125rem, 58px);

  }

  .menu__list {

    width: 100%;

  }

  .menu__item {

    margin-bottom: clamp(18px, 1.125rem, 23px);

  }

  .menu__item a {

    font-size: clamp(13px, 0.8125rem, 17px);

  }

  .menu__heading {

    margin-bottom: clamp(22px, 1.375rem, 28px);

  }

  .menu__label {

    font-size: clamp(11px, 0.6875rem, 14px);

  }

  .menu__media {

    display: block;

  }

  .menu__sns {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    margin-top: clamp(22px, 1.375rem, 28px);

  }

  .menu__sns a:last-child {

    margin-bottom: clamp(28px, 1.75rem, 36px);

  }

}



/* title style

-------------------------------------------------------------------*/

.title01 {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  font-weight: 400;

  font-size: clamp(32px, 2.1875rem, 45px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.35em;

}

.title01 .label {

  display: block;

  width: 100%;

  margin-bottom: 10px;

  font-size: clamp(18px, 1.125rem, 23px);

  line-height: normal;

  letter-spacing: 0.35em;

}

.title01 .sub {

  margin-right: 15px;

  font-weight: 400;

  font-size: clamp(14px, 0.875rem, 18px);

  line-height: normal;

  letter-spacing: 0.35em;

}

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

  .title01 {

    font-size: clamp(22px, 1.375rem, 28px);

  }

  .title01 .label {

    margin-bottom: 3px;

    font-size: clamp(14px, 0.875rem, 18px);

  }

  .title01 .sub {

    margin-right: 12px;

    font-size: clamp(12px, 0.75rem, 15px);

  }

}



.title02 {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  gap: 10px 15px;

  font-weight: 400;

  font-size: clamp(32px, 2.1875rem, 45px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.35em;

}

.title02--center {

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

}

.title02--sm {

  font-size: clamp(22px, 1.75rem, 36px);

  letter-spacing: 0.28em;

}

.title02--col {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  -webkit-box-align: start;

  -ms-flex-align: start;

  flex-direction: column;

  align-items: flex-start;

}

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

  .title02 {

    font-size: clamp(22px, 1.375rem, 28px);

  }

}



.title03 {

  font-weight: 300;

  font-size: clamp(18px, 1.125rem, 23px);

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.35em;

}

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

  .title03 {

    font-size: clamp(16px, 1rem, 21px);

  }

}



/* button style

-------------------------------------------------------------------*/

.moreBtn {

  display: inline-block;

  position: relative;

  padding-bottom: 5px;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: 1.0952380952;

  letter-spacing: 0.04em;

}

.moreBtn.en {

  font-family: "Lexend Exa", sans-serif;

}

.moreBtn::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 1px;

  background-color: #2B2B2B;

  content: "";

}

.moreBtn:hover::before {

  -webkit-animation: underline_anm 0.6s cubic-bezier(0, 0, 0, 1) both;

  animation: underline_anm 0.6s cubic-bezier(0, 0, 0, 1) both;

}

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

  .moreBtn {

    font-size: clamp(12px, 0.75rem, 15px);

  }

}



.circleBtn {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  align-items: center;

  justify-content: space-between;

  width: clamp(118px, 9.25rem, 190px);

  height: clamp(118px, 9.25rem, 190px);

  padding: 0.75rem;

  overflow: hidden;

  border: 1px solid #2B2B2B;

  border-radius: 50%;

}

.circleBtn::before {

  -webkit-transform: scale(0);

  -webkit-transition: -webkit-transform 0.3s;

  z-index: -1;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  margin: auto;

  transform: scale(0);

  border: 1px solid #2B2B2B;

  border-radius: 50%;

  background-color: #2B2B2B;

  content: "";

  transition: -webkit-transform 0.3s;

  transition: transform 0.3s;

  transition: transform 0.3s, -webkit-transform 0.3s;

}

.circleBtn--center {

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  text-align: center;

}

.circleBtn--sm {

  width: clamp(118px, 8.125rem, 167px);

  height: clamp(118px, 8.125rem, 167px);

}

.circleBtn .text {

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: 1.6153846154;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.circleBtn .arrow {

  width: 20px;

  height: 20px;

  margin-top: 0.75rem;

}

.circleBtn .arrow svg {

  stroke: #2B2B2B;

  -webkit-transition: stroke 0.3s;

  transition: stroke 0.3s;

}

.circleBtn:hover {

  -webkit-transition: color 0.3s;

  color: #ffffff;

  transition: color 0.3s;

}

.circleBtn:hover .arrow svg {

  stroke: #ffffff;

}

.circleBtn:hover::before {

  -webkit-transform: scale(1, 1);

  -webkit-transition: -webkit-transform 0.4s;

  transform: scale(1, 1);

  transition: -webkit-transform 0.4s;

  transition: transform 0.4s;

  transition: transform 0.4s, -webkit-transform 0.4s;

}

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

  .circleBtn {

    width: clamp(118px, 7.375rem, 152px);

    height: clamp(118px, 7.375rem, 152px);

  }

  .circleBtn .text {

    font-size: clamp(12px, 0.75rem, 15px);

  }

}



.cvBtn {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  justify-content: center;

  width: clamp(224px, 14rem, 288px);

  height: clamp(50px, 3.125rem, 64px);

  padding: 0;

  border: 1px solid #2B2B2B;

}

.cvBtn__text {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  display: block;

  flex: 1;

  padding: 0 10px;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: 1.6153846154;

  letter-spacing: 0.04em;

  text-align: center;

}

.cvBtn__text.en {

  font-family: "Lexend Exa", sans-serif;

}

.cvBtn__arrow {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  align-items: center;

  justify-content: center;

  aspect-ratio: 1;

  width: clamp(50px, 3.125rem, 64px);

  overflow: hidden;

  border-left: 1px solid #2B2B2B;

}

.cvBtn__arrow::before {

  -webkit-transform: scale(0);

  -webkit-transition: -webkit-transform 0.3s;

  z-index: -1;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  margin: auto;

  transform: scale(0);

  border-radius: 50%;

  background-color: #2B2B2B;

  content: "";

  transition: -webkit-transform 0.3s;

  transition: transform 0.3s;

  transition: transform 0.3s, -webkit-transform 0.3s;

}

.cvBtn__arrow svg {

  fill: #2B2B2B;

  -webkit-transition: fill 0.3s;

  display: block;

  transition: fill 0.3s;

}

.cvBtn:hover .cvBtn__arrow::before {

  -webkit-transform: scale(1.4);

  -webkit-transition: -webkit-transform 0.4s;

  transform: scale(1.4);

  transition: -webkit-transform 0.4s;

  transition: transform 0.4s;

  transition: transform 0.4s, -webkit-transform 0.4s;

}

.cvBtn:hover .cvBtn__arrow svg {

  fill: #ffffff;

}

.cvBtn.disabled {

  border: 1px solid #B3B3B3;

  pointer-events: none;

}

.cvBtn.disabled .cvBtn__text {

  color: #B3B3B3;

}

.cvBtn.disabled .cvBtn__arrow {

  border-left: 1px solid #B3B3B3;

}

.cvBtn.disabled .cvBtn__arrow svg {

  fill: #B3B3B3;

}

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

  .cvBtn {

    width: clamp(190px, 11.875rem, 244px);

    height: clamp(43px, 2.6875rem, 55px);

  }

  .cvBtn__text {

    font-size: clamp(12px, 0.75rem, 15px);

  }

  .cvBtn__arrow {

    width: clamp(43px, 2.6875rem, 55px);

  }

}



/* arrow style

-------------------------------------------------------------------*/

.arrow-window {

  -webkit-transition: stroke 0.3s;

  display: block;

  width: 13px;

  height: 13px;

  margin-top: 2px;

  margin-left: 5px;

  transition: stroke 0.3s;

}

.arrow-window--wht {

  stroke: #ffffff;

}

.arrow-window--blk {

  stroke: #2B2B2B;

}

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

  .arrow-window {

    margin-top: 1px;

  }

}



.arrow-anchor {

  stroke: #2B2B2B;

  display: block;

  width: 11px;

  height: 11px;

  margin-left: 5px;

}



/* slider common

-------------------------------------------------------------------*/

.swiper-fade .swiper-slide {

  -webkit-transition-property: opacity !important;

  transition-property: opacity !important;

}



/* slider animation

-------------------------------------------------------------------*/

.js-slide-trigger .slide-fadeUp,

.js-slide-trigger .slide-fadeDown {

  -webkit-animation: 2s cubic-bezier(0.2, 1, 0.2, 1) both;

  animation: 2s cubic-bezier(0.2, 1, 0.2, 1) both;

  opacity: 0;

}



.js-slide-trigger.anm-started .slide-fadeUp {

  -webkit-animation-name: slide-fadeUp;

  -webkit-animation-delay: 0.2s;

  animation-delay: 0.2s;

  animation-name: slide-fadeUp;

}



.js-slide-trigger.anm-finished .slide-fadeDown {

  -webkit-animation-name: slide-fadeDown;

  animation-name: slide-fadeDown;

}



@-webkit-keyframes slide-fadeUp {

  0%, 20% {

    -webkit-transform: translateY(15px);

    transform: translateY(15px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}



@keyframes slide-fadeUp {

  0%, 20% {

    -webkit-transform: translateY(15px);

    transform: translateY(15px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}

@-webkit-keyframes slide-fadeDown {

  0% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

  100% {

    -webkit-transform: translateY(15px);

    transform: translateY(15px);

    opacity: 0;

  }

}

@keyframes slide-fadeDown {

  0% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

  100% {

    -webkit-transform: translateY(15px);

    transform: translateY(15px);

    opacity: 0;

  }

}

.swiper-slide.slide-mask {

  overflow: hidden;

}

.swiper-slide.slide-mask img {

  -webkit-transition: 1s;

  transition: 1s;

}

.swiper-slide.slide-mask.right-to-left[class*=-prev] img {

  -webkit-transform: translateX(80%);

  transform: translateX(80%);

}

.swiper-slide.slide-mask.right-to-left[class*=-active] img {

  -webkit-transform: translateX(0%);

  transform: translateX(0%);

}

.swiper-slide.slide-mask.right-to-left[class*=-next] img {

  -webkit-transform: translateX(-80%);

  transform: translateX(-80%);

}

.swiper-slide.slide-mask.bottom-to-top[class*=-prev] img {

  -webkit-transform: translateY(80%);

  transform: translateY(80%);

}

.swiper-slide.slide-mask.bottom-to-top[class*=-next] img {

  -webkit-transform: translateY(-80%);

  transform: translateY(-80%);

}



/* scroll animation

-------------------------------------------------------------------*/

.animated,

.animated.-order > * {

  -webkit-animation: 0.7s ease-out both;

  animation: 0.7s ease-out both;

  opacity: 0;

}

.animated.delay01,

.animated.-order > *.delay01 {

  -webkit-animation-delay: 0.1s;

  animation-delay: 0.1s;

}

.animated.delay02,

.animated.-order > *.delay02 {

  -webkit-animation-delay: 0.2s;

  animation-delay: 0.2s;

}

.animated.delay03,

.animated.-order > *.delay03 {

  -webkit-animation-delay: 0.3s;

  animation-delay: 0.3s;

}

.animated.delay04,

.animated.-order > *.delay04 {

  -webkit-animation-delay: 0.4s;

  animation-delay: 0.4s;

}

.animated.delay05,

.animated.-order > *.delay05 {

  -webkit-animation-delay: 0.5s;

  animation-delay: 0.5s;

}

.animated.delay06,

.animated.-order > *.delay06 {

  -webkit-animation-delay: 0.6s;

  animation-delay: 0.6s;

}

.animated.delay07,

.animated.-order > *.delay07 {

  -webkit-animation-delay: 0.7s;

  animation-delay: 0.7s;

}

.animated.delay08,

.animated.-order > *.delay08 {

  -webkit-animation-delay: 0.8s;

  animation-delay: 0.8s;

}



.fadeIn.is-invew {

  -webkit-animation-name: fadeIn;

  animation-name: fadeIn;

}



.fadeUp.is-invew,

.fadeUp.-order.is-invew > * {

  -webkit-animation-name: fadeUp;

  animation-name: fadeUp;

}



.fadeDown.is-invew {

  -webkit-animation-name: fadeDown;

  animation-name: fadeDown;

}



@-webkit-keyframes fadeIn {

  0%, 20% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



@keyframes fadeIn {

  0%, 20% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

@-webkit-keyframes fadeUp {

  0% {

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}

@keyframes fadeUp {

  0% {

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}

@-webkit-keyframes fadeUp-short {

  0% {

    -webkit-transform: translateY(30px);

    transform: translateY(30px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}

@keyframes fadeUp-short {

  0% {

    -webkit-transform: translateY(30px);

    transform: translateY(30px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}

@-webkit-keyframes fadeDown {

  0% {

    -webkit-transform: translateY(-50px);

    transform: translateY(-50px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}

@keyframes fadeDown {

  0% {

    -webkit-transform: translateY(-50px);

    transform: translateY(-50px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}

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

  @-webkit-keyframes fadeUp {

    0% {

      -webkit-transform: translateY(30px);

      transform: translateY(30px);

      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

      transform: translateY(0);

      opacity: 1;

    }

  }

  @keyframes fadeUp {

    0% {

      -webkit-transform: translateY(30px);

      transform: translateY(30px);

      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

      transform: translateY(0);

      opacity: 1;

    }

  }

  @-webkit-keyframes fadeDown {

    0% {

      -webkit-transform: translateY(-30px);

      transform: translateY(-30px);

      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

      transform: translateY(0);

      opacity: 1;

    }

  }

  @keyframes fadeDown {

    0% {

      -webkit-transform: translateY(-30px);

      transform: translateY(-30px);

      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

      transform: translateY(0);

      opacity: 1;

    }

  }

}

/* hover animation

-------------------------------------------------------------------*/

.link {

  -webkit-transition: color 0.3s;

  display: inline-block;

  transition: color 0.3s;

}

.link:hover {

  color: #797979;

}

.link:hover svg {

  stroke: #797979;

}



.scale-up {

  overflow: hidden;

}

.scale-up img {

  -webkit-transition: -webkit-transform 0.4s;

  transition: -webkit-transform 0.4s;

  transition: transform 0.4s;

  transition: transform 0.4s, -webkit-transform 0.4s;

}

.scale-up:hover img {

  -webkit-transform: scale(1.2);

  transform: scale(1.2);

}



@-webkit-keyframes underline_anm {

  0% {

    -webkit-transform-origin: right;

    -webkit-transform: scaleX(1);

    transform: scaleX(1);

    transform-origin: right;

  }

  50% {

    -webkit-transform-origin: right;

    -webkit-transform: scaleX(0);

    transform: scaleX(0);

    transform-origin: right;

  }

  50.1% {

    -webkit-transform: scaleX(0);

    -webkit-transform-origin: left;

    transform: scaleX(0);

    transform-origin: left;

  }

  100% {

    -webkit-transform: scaleX(1);

    -webkit-transform-origin: left;

    transform: scaleX(1);

    transform-origin: left;

  }

}



@keyframes underline_anm {

  0% {

    -webkit-transform-origin: right;

    -webkit-transform: scaleX(1);

    transform: scaleX(1);

    transform-origin: right;

  }

  50% {

    -webkit-transform-origin: right;

    -webkit-transform: scaleX(0);

    transform: scaleX(0);

    transform-origin: right;

  }

  50.1% {

    -webkit-transform: scaleX(0);

    -webkit-transform-origin: left;

    transform: scaleX(0);

    transform-origin: left;

  }

  100% {

    -webkit-transform: scaleX(1);

    -webkit-transform-origin: left;

    transform: scaleX(1);

    transform-origin: left;

  }

}

/* modal style

-------------------------------------------------------------------*/

.modal {

  -webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

  visibility: hidden;

  z-index: 9999;

  position: fixed;

  top: 0;

  right: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  opacity: 0;

  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

}

.modal::before {

  -webkit-backdrop-filter: blur(9px);

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  backdrop-filter: blur(9px);

  background: rgba(0, 0, 0, 0.8);

  content: "";

  cursor: pointer;

}

.modal__container {

  -webkit-transform: translateX(100%);

  margin-left: auto;

  transform: translateX(100%);

  background-color: #ffffff;

}

.modal__inner {

  visibility: hidden;

  z-index: 10;

  width: 100%;

  height: 100%;

  background-color: #ffffff;

  opacity: 0;

}

.modal.is-active {

  visibility: visible;

  opacity: 1;

}

.modal.is-active .modal__container {

  -webkit-transform: translateX(0%);

  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0, 1) 0.2s;

  transform: translateX(0%);

  transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0, 1) 0.2s;

  transition: transform 0.4s cubic-bezier(0, 0, 0, 1) 0.2s;

  transition: transform 0.4s cubic-bezier(0, 0, 0, 1) 0.2s, -webkit-transform 0.4s cubic-bezier(0, 0, 0, 1) 0.2s;

}

.modal.is-active .modal__inner {

  -webkit-transition: opacity 0.4s ease-out 0.6s, visibility 0.4s ease-out 0.6s;

  visibility: visible;

  opacity: 1;

  transition: opacity 0.4s ease-out 0.6s, visibility 0.4s ease-out 0.6s;

}



/* tab style

-------------------------------------------------------------------*/

.js-tabContent {

  display: none;

}

.js-tabContent.is-active {

  display: block;

}



.tabBtn {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: clamp(50px, 3.125rem, 64px);

  padding: 0;

  border: 1px solid #2B2B2B;

}

.tabBtn__text {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  display: block;

  flex: 1;

  padding: 0 10px;

  font-size: clamp(13px, 0.8125rem, 17px);

  text-align: center;

}

.tabBtn__arrow {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  align-items: center;

  justify-content: center;

  aspect-ratio: 1;

  width: clamp(50px, 3.125rem, 64px);

  border-left: 1px solid #2B2B2B;

}

.tabBtn__arrow svg {

  stroke: #2B2B2B;

  -webkit-transition: opacity 0.3s ease-in-out;

  display: block;

  opacity: 0;

  transition: opacity 0.3s ease-in-out;

}

.tabBtn:hover .tabBtn__arrow svg {

  opacity: 1;

}

.tabBtn.is-active .tabBtn__arrow {

  background-color: #2B2B2B;

}

.tabBtn.is-active .tabBtn__arrow svg {

  stroke: #ffffff;

  opacity: 1;

}

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

  .tabBtn {

    height: clamp(43px, 2.6875rem, 55px);

  }

  .tabBtn__text {

    font-size: clamp(12px, 0.75rem, 15px);

  }

  .tabBtn__arrow {

    width: clamp(43px, 2.6875rem, 55px);

  }

}



/* lower common

-------------------------------------------------------------------*/

.lower {

  position: relative;

  width: 100%;

}

.lower--concept, .lower--showroom, .lower--ingredients {

  margin-bottom: clamp(15px, 0.9375rem, 19px);

  padding-top: clamp(352px, 22rem, 453px);

}

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

  .lower--concept, .lower--showroom, .lower--ingredients {

    margin-bottom: clamp(24px, 1.5rem, 31px);

    padding-top: clamp(173px, 10.8125rem, 222px);

  }

}

.lower--about {

  margin-bottom: clamp(84px, 5.25rem, 108px);

  padding-top: clamp(284px, 17.75rem, 365px);

}

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

  .lower--about {

    margin-bottom: clamp(40px, 2.5rem, 51px);

    padding-top: clamp(173px, 10.8125rem, 222px);

  }

}

.lower--products {

  height: 100svh;

  min-height: 568px;

  margin-bottom: clamp(135px, 8.4375rem, 174px);

  padding-top: 0;

  background-image: url("../images/products/img_products-mv.jpg");

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

}

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

  .lower--products {

    margin-bottom: clamp(35px, 2.1875rem, 45px);

    background-image: url("../images/products/img_products-mv_sp.jpg");

  }

}

.lower--news {

  margin-bottom: clamp(65px, 4.0625rem, 84px);

  padding-top: clamp(225px, 14.0625rem, 289px);

}

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

  .lower--news {

    margin-bottom: clamp(32px, 2rem, 41px);

    padding-top: clamp(173px, 10.8125rem, 222px);

  }

}

.lower--privacy {

  margin-bottom: clamp(114px, 7.125rem, 147px);

  padding-top: clamp(228px, 14.25rem, 293px);

}

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

  .lower--privacy {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

    padding-top: clamp(143px, 8.9375rem, 184px);

  }

}

.lower--contact {

  margin-bottom: clamp(63px, 3.9375rem, 81px);

  padding-top: clamp(228px, 14.25rem, 293px);

}

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

  .lower--contact {

    margin-bottom: clamp(32px, 2rem, 41px);

    padding-top: clamp(173px, 10.8125rem, 222px);

  }

}

.lower__container {

  width: 100%;

  height: 100%;

}

.lower__container--concept {

  margin-bottom: clamp(24px, 1.5rem, 31px);

}

.lower__right {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: max(66.4298401421%, 100% - clamp(378px, 23.625rem, 486px));

  margin-left: auto;

}

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

  .lower__right {

    width: 100%;

    margin-left: 0;

  }

}

.lower__inner {

  position: relative;

  width: 100%;

  height: 100%;

}

.lower__title {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -ms-flex-wrap: wrap;

  -webkit-column-gap: clamp(22px, 1.375rem, 28px);

  -moz-column-gap: clamp(22px, 1.375rem, 28px);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  column-gap: clamp(22px, 1.375rem, 28px);

  row-gap: clamp(12px, 0.75rem, 15px);

  flex-wrap: wrap;

  align-items: center;

  font-weight: 400;

  font-size: clamp(40px, 2.5rem, 51px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.32em;

}

.lower__title--center {

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

}

.lower__title--products {

  z-index: 2;

  position: absolute;

  bottom: clamp(55px, 3.4375rem, 71px);

  left: 0;

}

.lower__title span {

  display: block;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.28em;

}

.lower__title span.f-md {

  font-size: clamp(18px, 1.125rem, 23px);

}

.lower__scroll {

  z-index: 2;

  position: absolute;

  right: 0;

  bottom: 0;

}

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

  .lower__title {

    font-size: clamp(28px, 1.75rem, 36px);

  }

  .lower__title span {

    font-size: clamp(12px, 0.75rem, 15px);

  }

  .lower__title span.f-md {

    font-size: clamp(15px, 0.9375rem, 19px);

  }

  .lower__title--center {

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

  }

  .lower__title--products {

    bottom: clamp(48px, 3rem, 62px);

  }

}



/* page navigation

-------------------------------------------------------------------*/

.pageNav {

  -webkit-box-pack: end;

  -ms-flex-pack: end;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  justify-content: flex-end;

  margin-top: clamp(118px, 7.375rem, 152px);

}

.pageNav__item:not(:last-child) {

  margin-bottom: clamp(10px, 0.625rem, 13px);

}

.pageNav__item a {

  -webkit-box-align: center;

  -ms-flex-align: center;

  stroke: #2B2B2B;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.28em;

}

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

  .pageNav {

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

    margin-top: clamp(70px, 4.375rem, 90px);

  }

  .pageNav__item:not(:last-child) {

    margin-bottom: clamp(18px, 1.125rem, 23px);

  }

}



/* scroll down

-------------------------------------------------------------------*/

.scrollDown {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  flex-direction: column;

  align-items: center;

  overflow: hidden;

}

.scrollDown::before {

  display: block;

  width: 3px;

  height: 3px;

  margin-bottom: 7px;

  border-radius: 3px;

  background-color: #2B2B2B;

  content: "";

}

.scrollDown::after {

  -webkit-animation: scrollDown 1.5s ease-out infinite;

  display: block;

  width: 1px;

  height: 146px;

  background: #2B2B2B;

  content: "";

  animation: scrollDown 1.5s ease-out infinite;

}

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

  .scrollDown::after {

    height: 74px;

  }

}

@-webkit-keyframes scrollDown {

  0% {

    -webkit-transform: scale(1, 0);

    -webkit-transform-origin: 0 0;

    transform: scale(1, 0);

    transform-origin: 0 0;

  }

  50% {

    -webkit-transform: scale(1, 1);

    -webkit-transform-origin: 0 0;

    transform: scale(1, 1);

    transform-origin: 0 0;

  }

  50.1% {

    -webkit-transform: scale(1, 1);

    -webkit-transform-origin: 0 100%;

    transform: scale(1, 1);

    transform-origin: 0 100%;

  }

  100% {

    -webkit-transform: scale(1, 0);

    -webkit-transform-origin: 0 100%;

    transform: scale(1, 0);

    transform-origin: 0 100%;

  }

}

@keyframes scrollDown {

  0% {

    -webkit-transform: scale(1, 0);

    -webkit-transform-origin: 0 0;

    transform: scale(1, 0);

    transform-origin: 0 0;

  }

  50% {

    -webkit-transform: scale(1, 1);

    -webkit-transform-origin: 0 0;

    transform: scale(1, 1);

    transform-origin: 0 0;

  }

  50.1% {

    -webkit-transform: scale(1, 1);

    -webkit-transform-origin: 0 100%;

    transform: scale(1, 1);

    transform-origin: 0 100%;

  }

  100% {

    -webkit-transform: scale(1, 0);

    -webkit-transform-origin: 0 100%;

    transform: scale(1, 0);

    transform-origin: 0 100%;

  }

}



/* -------------------------------------------------------------------

* top style

-------------------------------------------------------------------*/

/* mv style

-------------------------------------------------------------------*/

.mv {

  position: relative;

  width: 100%;

}

.mv::before {

  z-index: 0;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 78.8602941176%;

  background-image: url("../images/top/img_mv-bg.jpg");

  content: "";

}

.mv::after {

  z-index: 1;

  position: absolute;

  bottom: 13.3272058824%;

  left: 0;

  width: 100%;

  height: 20.6801470588%;

  background: -webkit-gradient(linear, left bottom, left top, color-stop(34.38%, #FFF), color-stop(73.96%, rgba(255, 255, 255, 0)));

  background: linear-gradient(0deg, #FFF 34.38%, rgba(255, 255, 255, 0) 73.96%);

  content: "";

}

.mv__container {

  width: 100%;

  height: 100%;

}

.mv__imgArea {

  z-index: 2;

  position: relative;

}

.mv__body {

  z-index: 3;

  position: absolute;

  top: 9.8125rem;

  left: 10.75rem;

  width: 24.1875rem;

  min-width: 387px;

}

.mv__logo {

  position: relative;

  width: 66.149870801%;

  margin-bottom: 2.8125rem;

}

.mv__logo::before {

  display: block;

  position: relative;

  width: 100%;

  padding-top: 39.453125%;

  content: "";

}

.mv__logo img {

  -o-object-fit: contain;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.mv__catch {
	margin-bottom: 40px;

  font-weight: 400;

  font-size: clamp(15px, 0.9375rem, 1.1vw);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.35em;

}

.mv__madein {

  font-weight: 400;

  font-size: clamp(15px, 0.9375rem, 1.1vw);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.35em;

}

.mv__btn {

  -webkit-box-pack: end;

  -ms-flex-pack: end;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  justify-content: flex-end;

}

.mv__container {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: reverse;

  -ms-flex-direction: row-reverse;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-direction: row-reverse;

  justify-content: space-between;

  width: 100%;

  height: 100%;

}

.mv__imgWrap {

  position: relative;

}

.mv__imgWrap--001 {

  width: 43.6875rem;

  margin-bottom: 10.8125rem;

}

.mv__imgWrap--002 {

  width: 23.9375rem;

  margin-top: auto;

}

.mv__img {

  position: relative;

}

.mv__img::before {

  display: block;

  width: 100%;

  content: "";

}

.mv__img--001::before {

  padding-top: 130.9012%;

}

.mv__img--002::before {

  padding-top: 150.1305%;

}

.mv__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

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

  .mv {

    margin-bottom: clamp(77px, 4.8125rem, 99px);

    padding-top: 0;

  }

  .mv::before {

    height: 87.7631578947%;

    background-image: url("../images/top/img_mv-bg_sp.jpg");

  }

  .mv::after {

    bottom: 12.2368421053%;

    height: 13.1578947368%;

  }

  .mv__body {

    top: 74px;

    left: 0;

    width: 100%;

    min-width: 100%;

    padding-right: 14.6666666667%;

    padding-left: 14.6666666667%;

  }

  .mv__logo {

    width: max(178px, 47.4666666667%);

    margin-bottom: 20px;

  }

  .mv__catch {
	  margin-bottom: 20px;
    font-size: max(13px, 2.5vw);

  }
	
   .mv__madein {
    font-size: max(13px, 2.5vw);

  }

  .mv__container {

    display: block;

    padding-top: 350px;

  }

  .mv__imgWrap--001 {

    width: 78.9333333333%;

    margin-bottom: 42px;

    margin-left: auto;

  }

  .mv__imgWrap--002 {

    width: 39.4666666667%;

  }

  .mv__img--001::before {

    padding-top: 130.4054%;

  }

  .mv__img--002::before {

    padding-top: 107.4324%;

  }

  .mv__btn {

    display: block;

    z-index: 3;

    position: absolute;

    bottom: -3.125rem;

    left: 36.1486486486%;

  }

  .mv__btn .circleBtn {

    width: clamp(118px, 7.375rem, 152px);

  }

}



.mvSlider .swiper-slide {

  overflow: hidden;

}

.mvSlider .swiper-button-next {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  -webkit-box-pack: end;

  -ms-flex-pack: end;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: absolute;

  top: calc((100svh - 110px) / 2);

  right: min(3.875rem, 62px);

  flex-direction: column;

  justify-content: flex-end;

  width: auto;

  height: 110px;

  margin: 0;

}

.mvSlider .swiper-button-next::after {

  content: none;

}

.mvSlider .swiper-button-next .text {

  -webkit-writing-mode: vertical-rl;

  -ms-writing-mode: tb-rl;

  -webkit-transition-property: opacity;

  -webkit-transition-duration: 0.4s;

  -webkit-transition-delay: 0.5s;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

  transition-delay: 0.5s;

  transition-duration: 0.4s;

  transition-property: opacity;

  writing-mode: vertical-rl;

}

.mvSlider .swiper-button-next .text.anm-started {

  -webkit-animation: topMv_nextBtn 1.1s ease-out both;

  animation: topMv_nextBtn 1.1s ease-out both;

}

.mvSlider .swiper-button-next .arrow {

  display: block;

  position: relative;

  aspect-ratio: 1;

  width: clamp(38px, 2.375rem, 49px);

  min-width: clamp(38px, 2.375rem, 49px);

  height: clamp(38px, 2.375rem, 49px);

  min-height: clamp(38px, 2.375rem, 49px);

  margin-top: 10px;

  overflow: hidden;

  border: 1px solid #2B2B2B;

  border-radius: 50%;

}

.mvSlider .swiper-button-next .arrow::before, .mvSlider .swiper-button-next .arrow::after {

  -webkit-transition: color 0.4s, -webkit-transform 0.4s;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  margin: auto;

  border-radius: 50%;

  background-color: #2B2B2B;

  content: "";

  transition: color 0.4s, -webkit-transform 0.4s;

  transition: transform 0.4s, color 0.4s;

  transition: transform 0.4s, color 0.4s, -webkit-transform 0.4s;

}

.mvSlider .swiper-button-next .arrow::before {

  -webkit-transform: scale(0);

  z-index: -1;

  width: 100%;

  height: 100%;

  transform: scale(0);

  border: 1px solid #2B2B2B;

}

.mvSlider .swiper-button-next .arrow::after {

  width: 4px;

  height: 4px;

}

.mvSlider .swiper-button-next.scaleUp .arrow::before {

  -webkit-transform: scale(1, 1);

  transform: scale(1, 1);

}

.mvSlider .swiper-button-next.scaleUp .arrow::after {

  background-color: #ffffff;

}

.mvSlider .swiper-button-next.show .text {

  opacity: 1;

}

@-webkit-keyframes topMv_nextBtn {

  0%, 25% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

@keyframes topMv_nextBtn {

  0%, 25% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

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

  .mvSlider .swiper-button-next {

    top: calc((100% - 110px) / 2);

  }

}

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

  .mvSlider .swiper-button-next {

    top: calc((100svh - 88px) / 2 - 173px);

    right: 20px;

    height: 88px;

  }

  .mvSlider .swiper-button-next .text {

    font-size: clamp(12px, 0.75rem, 15px);

  }

  .mvSlider .swiper-button-next .arrow {

    width: clamp(23px, 1.4375rem, 30px);

    min-width: clamp(23px, 1.4375rem, 30px);

    height: clamp(23px, 1.4375rem, 30px);

    min-height: clamp(23px, 1.4375rem, 30px);

    margin-top: 7px;

  }

  .mvSlider .swiper-button-next .arrow::after {

    width: 3px;

    height: 3px;

  }

}



.scroll {

  z-index: 3;

  position: absolute;

  top: calc(100svh - 156px);

  right: min(5rem, 80px);

}

.scroll--001 {

  display: none;

}

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

  .scroll {

    top: calc(100% - 156px - 10.8125rem);

  }

  .scroll--001 {

    display: block;

  }

  .scroll--002 {

    display: none;

  }

}

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

  .scroll {

    top: calc(100svh - 84px);

    right: 20px;

  }

  .scroll--001 {

    display: none;

  }

  .scroll--002 {

    display: block;

  }

}



/* about section style

-------------------------------------------------------------------*/

.topAbout {

  position: relative;

  margin-bottom: clamp(155px, 9.6875rem, 199px);

}

.topAbout::after {

  -webkit-transform: rotate(-47deg);

  z-index: 1;

  position: absolute;

  top: 2.5rem;

  left: 40.625rem;

  width: 18.75rem;

  height: 1px;

  transform: rotate(-47deg);

  background-color: #2B2B2B;

  content: "";

}

.topAbout__container {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: reverse;

  -ms-flex-direction: row-reverse;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-direction: row-reverse;

  align-items: center;

  justify-content: space-between;

}

.topAbout__body {

  width: 39.5625rem;

  padding-right: 4.5625rem;

  padding-left: 7.5rem;

}

.topAbout__imgArea {

  position: relative;

  width: 45.8125rem;

}

.topAbout__catch {

  margin-bottom: clamp(24px, 5.375rem, 111px);

  font-size: clamp(18px, 1.5rem, 31px);

  letter-spacing: 0.14em;

}

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

  .topAbout {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .topAbout::after {

    top: 3.4%;

    left: 14.1333333333%;

    width: 34.1333333333%;

  }

  .topAbout__container {

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

  }

  .topAbout__body {

    width: 100%;

    padding-right: 1.25rem;

    padding-left: 1.25rem;

  }

  .topAbout__imgArea {

    width: 100%;

    margin-bottom: clamp(50px, 3.125rem, 64px);

  }

  .topAbout__catch {

    margin-bottom: clamp(50px, 3.125rem, 64px);

    font-size: clamp(19px, 1.1875rem, 24px);

    line-height: 1.8947368421;

  }

}



.topAboutSlider__imgWrap--001 {

  position: relative;

  width: 83.9017735334%;

  margin-left: auto;

}

.topAboutSlider__imgWrap--002 {

  z-index: 2;

  position: absolute;

  bottom: 2.9375rem;

  left: 0;

  width: 25.6480218281%;

}

.topAboutSlider__img {

  position: relative;

}

.topAboutSlider__img::before {

  display: block;

  position: relative;

  width: 100%;

  content: "";

}

.topAboutSlider__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.topAboutSlider__img--001 {

  position: relative;

  width: 83.9017735334%;

  margin-left: auto;

}

.topAboutSlider__img--001::before {

  padding-top: 135.9349593496%;

}

.topAboutSlider__img--002 {

  z-index: 2;

  position: absolute;

  bottom: 5.6220095694%;

  left: 0;

  width: 25.6480218281%;

}

.topAboutSlider__img--002::before {

  padding-top: 139.4444444444%;

}

.topAboutSlider__button {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  margin-bottom: clamp(16px, 1.25rem, 26px);

}

.topAboutSlider__button span {

  -webkit-transform: rotate(-60.52deg);

  display: block;

  width: clamp(27px, 1.6875rem, 35px);

  height: 1px;

  margin-right: 10px;

  transform: rotate(-60.52deg);

  background-color: #2B2B2B;

}

.topAboutSlider__button .swiper-button-prev,

.topAboutSlider__button .swiper-button-next {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-animation: topAbout_prevBtn 2s ease-out forwards;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: static;

  align-items: center;

  width: auto;

  margin: 0;

  color: #C4C4C4;

  font-size: clamp(24px, 2.1875rem, 45px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.35em;

  animation: topAbout_prevBtn 2s ease-out forwards;

  cursor: pointer;

  opacity: 1;

}

.topAboutSlider__button .swiper-button-prev::after,

.topAboutSlider__button .swiper-button-next::after {

  content: none;

}

.topAboutSlider__button .swiper-button-prev.swiper-button-disabled,

.topAboutSlider__button .swiper-button-next.swiper-button-disabled {

  -webkit-animation: topAbout_nextBtn 1s ease-out forwards;

  color: #2B2B2B;

  animation: topAbout_nextBtn 1s ease-out forwards;

  pointer-events: none;

}

.topAboutSlider__title {

  margin-bottom: clamp(14px, 0.875rem, 18px);

  font-weight: 400;

  font-size: clamp(18px, 1.25rem, 26px);

  line-height: 1.9583333333;

  letter-spacing: 0.07em;

}

.topAboutSlider__text {

  margin-bottom: clamp(24px, 2.1875rem, 45px);

  letter-spacing: 0.04em;

}

@-webkit-keyframes topAbout_nextBtn {

  0% {

    color: #C4C4C4;

  }

  100% {

    color: #2B2B2B;

  }

}

@keyframes topAbout_nextBtn {

  0% {

    color: #C4C4C4;

  }

  100% {

    color: #2B2B2B;

  }

}

@-webkit-keyframes topAbout_prevBtn {

  0% {

    color: #2B2B2B;

  }

  100% {

    color: #C4C4C4;

  }

}

@keyframes topAbout_prevBtn {

  0% {

    color: #2B2B2B;

  }

  100% {

    color: #C4C4C4;

  }

}

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

  .topAboutSlider__img--001 {

    width: 74.4%;

    margin-bottom: 9.3333333333%;

  }

  .topAboutSlider__img--001::before {

    padding-top: 110.0358422939%;

  }

  .topAboutSlider__img--002 {

    bottom: -9.3333333333%;

    left: 12%;

    width: 22.4%;

  }

  .topAboutSlider__img--002::before {

    padding-top: 139.2857142857%;

  }

  .topAboutSlider__img img {

    -o-object-position: top 10% right 0;

    object-position: top 10% right 0;

  }

  .topAboutSlider__button {

    margin-bottom: clamp(8px, 0.5rem, 10px);

  }

  .topAboutSlider__button span {

    width: clamp(17px, 1.0625rem, 22px);

    margin-right: 7px;

  }

  .topAboutSlider__button .swiper-button-prev,

  .topAboutSlider__button .swiper-button-next {

    font-size: clamp(22px, 1.375rem, 28px);

  }

  .topAboutSlider__title {

    margin-bottom: clamp(30px, 1.875rem, 39px);

    font-size: clamp(16px, 1rem, 21px);

    line-height: 1.5625;

  }

  .topAboutSlider__text {

    margin-bottom: clamp(22px, 1.375rem, 28px);

  }

}



/* products section

-------------------------------------------------------------------*/

.topProducts {

  position: relative;

  margin-bottom: clamp(145px, 9.0625rem, 186px);

}

.topProducts__imgArea {

  z-index: 1;

  position: relative;

}

.topProducts__content {

  z-index: 2;

  position: absolute;

  top: min(13.4375rem, 15.7393850659%);

  right: 10.980966325%;

  width: 27.5256222548%;

  min-width: clamp(326px, 23.5rem, 483px);

}

.topProducts__btn {

  -webkit-box-pack: end;

  -ms-flex-pack: end;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  z-index: 10;

  position: relative;

  justify-content: flex-end;

}

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

  .topProducts__content {

    top: 23.5887096774%;

  }

}

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

  .topProducts {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .topProducts__content {

    z-index: 1;

    position: relative;

    top: 0;

    right: 0;

    width: 100%;

    min-width: 100%;

    margin-top: clamp(-75px, -4.6875rem, -96px);

    padding: clamp(47px, 2.9375rem, 60px) 1.25rem clamp(125px, 7.8125rem, 161px);

    background: -webkit-gradient(linear, left top, left bottom, from(rgba(237, 237, 239, 0)), color-stop(10.64%, #EDEDEF));

    background: linear-gradient(180deg, rgba(237, 237, 239, 0) 0%, #EDEDEF 10.64%);

  }

  .topProducts__btn {

    position: absolute;

    right: 1.6875rem;

    bottom: clamp(43px, 2.6875rem, 55px);

  }

}



.topProductsSlider {

  z-index: 5;

  position: relative;

}

.topProductsSlider__item {

  overflow: hidden;

}

.topProductsSlider__bgImg {

  z-index: 1;

  position: relative;

  width: 100%;

  height: 100svh;

}

.topProductsSlider__bgImg img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.topProductsSlider__body {

  width: 92.2872340426%;

  margin-bottom: 10px;

}

.topProductsSlider__text {

  margin: 2.8125rem 0;

}

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

  .topProductsSlider__bgImg {

    width: 100%;

    height: auto;

    padding-top: 75%;

  }

  .topProductsSlider__bgImg img {

    -o-object-position: right 0 top 50%;

    object-position: right 0 top 50%;

  }

}

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

  .topProductsSlider__bgImg {

    padding-top: 104.8%;

  }

  .topProductsSlider__bgImg img {

    -o-object-position: 50% 50%;

    object-position: 50% 50%;

  }

  .topProductsSlider__body {

    width: 100%;

    margin-bottom: 0;

  }

  .topProductsSlider__text {

    margin-top: clamp(28px, 1.75rem, 36px);

    margin-bottom: clamp(22px, 1.375rem, 28px);

  }

}



.topProductsSlider .swiper-button-prev,

.topProductsSlider .swiper-button-next {

  -webkit-transform: translateY(-50%);

  -webkit-animation: 1.1s ease-out both;

  z-index: 10;

  position: absolute;

  top: 50%;

  width: 105px;

  height: 233px;

  transform: translateY(-50%);

  background-size: contain;

  background-repeat: no-repeat;

  animation: 1.1s ease-out both;

  cursor: pointer;

}

.topProductsSlider .swiper-button-prev::after, .topProductsSlider .swiper-button-prev::before,

.topProductsSlider .swiper-button-next::after,

.topProductsSlider .swiper-button-next::before {

  position: absolute;

  top: 0;

  bottom: 0;

  margin: auto;

  background-position: center center;

  background-repeat: no-repeat;

  content: "";

}

.topProductsSlider .swiper-button-prev::after,

.topProductsSlider .swiper-button-next::after {

  width: 36px;

  height: 8px;

  background-image: url("../images/common/icon_arrow-slider.svg");

  background-size: contain;

}

.topProductsSlider .swiper-button-prev::before,

.topProductsSlider .swiper-button-next::before {

  -webkit-box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.09);

  -webkit-transition: -webkit-transform 0.2s;

  width: 123px;

  height: 100%;

  background-size: cover;

  box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.09);

  transition: -webkit-transform 0.2s;

  transition: transform 0.2s;

  transition: transform 0.2s, -webkit-transform 0.2s;

}

.topProductsSlider .swiper-button-prev {

  left: 0;

}

.topProductsSlider .swiper-button-prev::after {

  right: -18px;

}

.topProductsSlider .swiper-button-prev::before {

  right: 0;

  background-image: url("../images/top/img_products-stress_slider-button.jpg");

}

.topProductsSlider .swiper-button-prev.anm-started {

  -webkit-animation-name: topProducts_prevBtn;

  animation-name: topProducts_prevBtn;

}

.topProductsSlider .swiper-button-next {

  right: 0;

}

.topProductsSlider .swiper-button-next::after {

  -webkit-transform: scale(-1, 1);

  left: -18px;

  transform: scale(-1, 1);

}

.topProductsSlider .swiper-button-next::before {

  left: 0;

  background-image: url("../images/top/img_products-softpl_slider-button.jpg");

}

.topProductsSlider .swiper-button-next.anm-started {

  -webkit-animation-name: topProducts_nextBtn;

  animation-name: topProducts_nextBtn;

}

@-webkit-keyframes topProducts_nextBtn {

  0%, 100% {

    right: 0;

  }

  50% {

    right: -150px;

  }

}

@keyframes topProducts_nextBtn {

  0%, 100% {

    right: 0;

  }

  50% {

    right: -150px;

  }

}

@-webkit-keyframes topProducts_prevBtn {

  0%, 100% {

    left: 0;

  }

  50% {

    left: -150px;

  }

}

@keyframes topProducts_prevBtn {

  0%, 100% {

    left: 0;

  }

  50% {

    left: -150px;

  }

}

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

  .topProductsSlider .swiper-button-prev:hover::before {

    -webkit-transform: rotate(4.3deg);

    transform: rotate(4.3deg);

  }

  .topProductsSlider .swiper-button-next:hover::before {

    -webkit-transform: rotate(-4.3deg);

    transform: rotate(-4.3deg);

  }

}

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

  .topProductsSlider .swiper-button-prev,

  .topProductsSlider .swiper-button-next {

    width: 56px;

    height: 92px;

  }

  .topProductsSlider .swiper-button-prev::after,

  .topProductsSlider .swiper-button-next::after {

    width: 22px;

    height: 6px;

  }

  .topProductsSlider .swiper-button-prev::before,

  .topProductsSlider .swiper-button-next::before {

    width: 63px;

  }

  .topProductsSlider .swiper-button-prev::before {

    background-image: url("../images/top/img_products-stress_slider-button_sp.jpg");

  }

  .topProductsSlider .swiper-button-prev::after {

    right: -11px;

  }

  .topProductsSlider .swiper-button-next::before {

    background-image: url("../images/top/img_products-softpl_slider-button_sp.jpg");

  }

  .topProductsSlider .swiper-button-next::after {

    left: -11px;

  }

}



.topProductsSlider .swiper-pagination {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: static;

  align-items: center;

  margin-bottom: 4.5rem;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.14em;

}

.topProductsSlider .swiper-pagination .swiper-pagination-current {

  display: inline-block;

  overflow: hidden;

}

.topProductsSlider .swiper-pagination .swiper-pagination-current .num {

  display: inline-block;

}

.topProductsSlider .swiper-pagination .swiper-pagination-bar {

  display: block;

  width: 63px;

  height: 1px;

  margin: 0 4px;

  background-color: #2B2B2B;

}

.topProductsSlider .swiper-pagination.anm-started .swiper-pagination-current {

  -webkit-animation: topProducts_fraction 2s both;

  animation: topProducts_fraction 2s both;

}

@-webkit-keyframes topProducts_fraction {

  0%, 20% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

@keyframes topProducts_fraction {

  0%, 20% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

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

  .topProductsSlider .swiper-pagination {

    margin-bottom: clamp(30px, 1.875rem, 39px);

    font-size: clamp(11px, 0.6875rem, 14px);

  }

  .topProductsSlider .swiper-pagination .swiper-pagination-bar {

    width: 36px;

  }

}



/* ingredients section

-------------------------------------------------------------------*/

.topIngredients {

  position: relative;

  margin-bottom: clamp(150px, 9.375rem, 193px);

}

.topIngredients__head {

  margin-bottom: clamp(26px, 1.625rem, 33px);

}

.topIngredients__head .title01 {

  margin-bottom: clamp(15px, 0.9375rem, 19px);

}

.topIngredients__title {

  font-weight: 400;

  font-size: clamp(20px, 1.5rem, 31px);

  line-height: 1.9583333333;

  letter-spacing: 0.07em;

}

.topIngredients__body {

  width: 41.1190053286%;

  min-width: clamp(463px, 28.9375rem, 595px);

  margin-bottom: clamp(90px, 5.625rem, 116px);

  margin-left: auto;

}

.topIngredients__text {

  margin-bottom: clamp(20px, 1.25rem, 26px);

}

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

  .topIngredients {

    margin-bottom: clamp(60px, 3.75rem, 77px);

  }

  .topIngredients__body {

    width: 100%;

    min-width: 100%;

    margin-bottom: clamp(60px, 3.75rem, 77px);

  }

  .topIngredients__head {

    margin-bottom: clamp(30px, 1.875rem, 39px);

  }

  .topIngredients__head .title01 {

    margin-bottom: clamp(10px, 0.625rem, 13px);

  }

  .topIngredients__title {

    font-size: clamp(16px, 1rem, 21px);

    line-height: 1.5625;

  }

}



.topIngredientsSlider__list {

  -webkit-transition-timing-function: linear;

  transition-timing-function: linear;

}

.topIngredientsSlider__item {

  width: 32.7964860908%;

  max-width: 448px;

}

.topIngredientsSlider__img {

  position: relative;

  width: 100%;

  padding-top: 106.6964285714%;

}

.topIngredientsSlider__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

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

  .topIngredientsSlider__item {

    width: 86.6666666667%;

    max-width: 325px;

  }

  .topIngredientsSlider__img {

    padding-top: 107.0769230769%;

  }

}



/* news section

-------------------------------------------------------------------*/

.topNews {

  position: relative;

  margin-bottom: clamp(144px, 9rem, 185px);

}

.topNews__head {

  -ms-flex-wrap: wrap;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  margin-bottom: clamp(40px, 2.5rem, 51px);

}

.topNews__link {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.topNews__list {

  -ms-flex-wrap: wrap;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-column-gap: 10px;

  -moz-column-gap: 10px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  column-gap: 10px;

  row-gap: clamp(32px, 2rem, 41px);

  flex-wrap: wrap;

  justify-content: space-between;

}

.topNews__list::after {
  content: "";
  display: block;
  width: calc(33.3333333333% - 6.6666666667px);
}

.topNews__item {

  width: calc(33.3333333333% - 6.6666666667px);

}

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

  .topNews {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .topNews__title {

    width: 100%;

    margin-bottom: clamp(15px, 0.9375rem, 19px);

  }

  .topNews__link {

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    justify-content: flex-end;

    width: 100%;

  }

  .topNews__item {

    width: 100%;

  }

}



.topNewsCard {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-direction: column;

  height: 100%;

  color: #2B2B2B;

}

.topNewsCard__meta {

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 20px;

  color: #797979;

  font-size: clamp(13px, 0.8125rem, 17px);

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.topNewsCard__meta .date {

  margin-right: 25px;

}

.topNewsCard__meta .cat {

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  gap: 5px 10px;

}

.topNewsCard__thumb {

  position: relative;

  margin-bottom: 1.25rem;

  overflow: hidden;

}

.topNewsCard__thumb::before {

  display: block;

  position: relative;

  width: 100%;

  padding-top: 74.7967%;

  content: "";

}

.topNewsCard__thumb--noimg {

  border: 1px solid #E8E8E8;

}

.topNewsCard__thumb img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.topNewsCard__body {

  margin-bottom: 1.25rem;

}

.topNewsCard__title {

  font-weight: 400;

  font-size: clamp(14px, 0.875rem, 18px);

}

.topNewsCard__btn {

  margin-top: auto;

}

.topNewsCard:hover .moreBtn::before {

  -webkit-animation: underline_anm 0.6s cubic-bezier(0, 0, 0, 1) both;

  animation: underline_anm 0.6s cubic-bezier(0, 0, 0, 1) both;

}

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

  .topNewsCard__meta {

    margin-bottom: clamp(10px, 0.625rem, 13px);

    font-size: clamp(12px, 0.75rem, 15px);

  }

  .topNewsCard__meta .date {

    margin-right: 17px;

  }

  .topNewsCard__body {

    -webkit-box-align: center;

    -ms-flex-align: center;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    align-items: center;

    margin-bottom: clamp(14px, 0.875rem, 18px);

  }

  .topNewsCard__thumb {

    width: 8rem;

    margin-right: 0.625rem;

    margin-bottom: 0;

  }

  .topNewsCard__title {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    font-size: clamp(13px, 0.8125rem, 17px);

  }

  .topNewsCard__btn {

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    justify-content: flex-end;

  }

}



/* -------------------------------------------------------------------

* concept style

-------------------------------------------------------------------*/

.concept {

  position: relative;

  margin-bottom: clamp(115px, 7.1875rem, 148px);

}

.concept__container {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 10px;

}

.concept__imgArea {

  width: calc(50% - 10px);

}

.concept__img {

  position: relative;

  width: 100%;

  padding-top: 114.7157190635%;

}

.concept__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

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

  .concept {

    margin-bottom: clamp(50px, 3.125rem, 64px);

  }

  .concept__imgArea {

    width: 100%;

  }

  .concept__img {

    padding-top: 85.0746268657%;

  }

}



/* infomation section

-------------------------------------------------------------------*/

.conceptIntro {

  position: relative;

  margin-bottom: clamp(184px, 11.5rem, 237px);

}

.conceptIntro__head {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  align-items: center;

  margin-bottom: clamp(17px, 1.0625rem, 22px);

}

.conceptIntro__title {

  -webkit-writing-mode: vertical-rl;

  -ms-writing-mode: tb-rl;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.28em;

  writing-mode: vertical-rl;

}

.conceptIntro__catch {

  margin: auto;

  font-weight: 500;

  font-size: clamp(42px, 2.625rem, 54px);

  line-height: normal;

  font-family: "Zen Old Mincho", serif;

  letter-spacing: 0.07em;

}

.conceptIntro__section {

  position: relative;

}

.conceptIntro__section--001 {

  margin-bottom: clamp(120px, 7.5rem, 154px);

}

.conceptIntro__section--002 {

  margin-bottom: clamp(182px, 11.375rem, 234px);

}

.conceptIntro__imgArea {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-align: start;

  -ms-flex-align: start;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: space-between;

}

.conceptIntro__imgArea--001 {

  margin-bottom: clamp(182px, 11.375rem, 234px);

  padding-right: 3.75rem;

  padding-left: 2.75rem;

}

.conceptIntro__imgArea--002 {

  padding-right: 14.5rem;

  padding-left: 8.5rem;

}

.conceptIntro__imgArea--003 {

  margin-top: -11.375rem;

  margin-bottom: clamp(8px, 0.5rem, 10px);

  padding-right: 6.125rem;

  padding-left: 14.625rem;

}

.conceptIntro__img {

  position: relative;

}

.conceptIntro__img::before {

  display: block;

  position: relative;

  width: 100%;

  content: "";

}

.conceptIntro__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.conceptIntro__img--001 {

  width: 11.875rem;

  margin-top: 16.6875rem;

}

.conceptIntro__img--001::before {

  padding-top: 96.3157894737%;

}

.conceptIntro__img--002 {

  width: 39rem;

  margin-top: 5.4375rem;

  margin-left: 0.625rem;

}

.conceptIntro__img--002::before {

  padding-top: 75%;

}

.conceptIntro__img--003 {

  width: 17.125rem;

}

.conceptIntro__img--003::before {

  padding-top: 97.4452554745%;

}

.conceptIntro__img--004 {

  width: 13.75rem;

}

.conceptIntro__img--004::before {

  padding-top: 100%;

}

.conceptIntro__img--005 {

  width: 39.6875rem;

  margin-top: 5.0625rem;

}

.conceptIntro__img--005::before {

  padding-top: 74.9606299213%;

}

.conceptIntro__img--006 {

  width: 18.625rem;

}

.conceptIntro__img--006::before {

  padding-top: 94.6308724832%;

}

.conceptIntro__img--007 {

  width: 10.875rem;

  margin-top: 16.1875rem;

}

.conceptIntro__img--007::before {

  padding-top: 113.2183908046%;

}

.conceptIntro__textArea {

  text-align: center;

}

.conceptIntro__text {

  font-weight: 500;

  font-size: clamp(18px, 1.125rem, 23px);

  line-height: normal;

  font-family: "Zen Old Mincho", serif;

  letter-spacing: 0.07em;

}

.conceptIntro__text:not(:last-child) {

  margin-bottom: clamp(28px, 1.75rem, 36px);

}

.conceptIntro__movArea {

  margin-bottom: clamp(164px, 10.25rem, 211px);

}

.conceptIntro__mov {

  position: relative;

  width: 100%;

  padding-top: 47.2913616398%;

}

.conceptIntro__mov video {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.conceptIntro__logo {

  position: relative;

  width: clamp(218px, 13.625rem, 280px);

  margin: clamp(57px, 3.5625rem, 73px) auto;

}

.conceptIntro__logo::before {

  display: block;

  position: relative;

  width: 100%;

  padding-top: 39.5454545455%;

  content: "";

}

.conceptIntro__logo img {

  -o-object-fit: contain;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

}

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

  .conceptIntro {

    margin-bottom: clamp(95px, 5.9375rem, 122px);

  }

  .conceptIntro__head {

    margin-bottom: clamp(44px, 2.75rem, 57px);

  }

  .conceptIntro__catch {

    font-size: clamp(30px, 1.875rem, 39px);

  }

  .conceptIntro__title {

    font-size: clamp(11px, 0.6875rem, 14px);

  }

  .conceptIntro__catch {

    font-size: clamp(30px, 1.875rem, 39px);

  }

  .conceptIntro__section--001, .conceptIntro__section--002 {

    margin-bottom: clamp(95px, 5.9375rem, 122px);

  }

  .conceptIntro__imgArea {

    padding-right: 1.125rem;

    padding-left: 0.6875rem;

  }

  .conceptIntro__imgArea--001, .conceptIntro__imgArea--003 {

    margin-bottom: clamp(95px, 5.9375rem, 122px);

  }

  .conceptIntro__imgArea--001 {

    -webkit-box-orient: vertical;

    -webkit-box-direction: reverse;

    -ms-flex-direction: column-reverse;

    flex-direction: column-reverse;

  }

  .conceptIntro__imgArea--003 {

    margin-top: -1.625rem;

    margin-bottom: clamp(95px, 5.9375rem, 122px);

    padding-right: 3.0625rem;

    padding-left: 1.8125rem;

  }

  .conceptIntro__img--001 {

    width: 5.4375rem;

    margin-top: 0.9375rem;

  }

  .conceptIntro__img--001::before {

    padding-top: 104.5977011494%;

  }

  .conceptIntro__img--002 {

    width: 16.375rem;

    margin-top: -2.1875rem;

    margin-left: 3rem;

  }

  .conceptIntro__img--002::before {

    padding-top: 85.1145038168%;

  }

  .conceptIntro__img--003 {

    width: 6.5625rem;

    margin-left: auto;

  }

  .conceptIntro__img--003::before {

    padding-top: 91.4285714286%;

  }

  .conceptIntro__img--004 {

    width: 4.75rem;

  }

  .conceptIntro__img--005 {

    width: 15.875rem;

    margin-top: 1.6875rem;

  }

  .conceptIntro__img--005::before {

    padding-top: 78.3464566929%;

  }

  .conceptIntro__img--006 {

    width: 7.25rem;

  }

  .conceptIntro__img--007 {

    width: 4.3125rem;

    margin-top: 3.4375rem;

  }

  .conceptIntro__text {

    font-size: clamp(15px, 0.9375rem, 19px);

  }

  .conceptIntro__text:not(:last-child) {

    margin-bottom: clamp(18px, 1.125rem, 23px);

  }

  .conceptIntro__movArea {

    margin-bottom: 5.9375rem;

  }

  .conceptIntro__mov {

    padding-top: 84.2666666667%;

  }

  .conceptIntro__logo {

    width: clamp(176px, 11rem, 226px);

    margin: clamp(60px, 3.75rem, 77px) auto;

  }

}



/* ingredients section

-------------------------------------------------------------------*/

.conceptIngredients {

  position: relative;

  margin-bottom: clamp(124px, 7.75rem, 159px);

}

.conceptIngredients__box {

  z-index: 20;

  position: absolute;

  top: 0;

  left: 17.0571010249%;

  width: 24.5241581259%;

  max-width: 335px;

  background-color: #ffffff;

}

.conceptIngredients__box::before {

  display: block;

  position: relative;

  width: 100%;

  padding-top: 134.328358209%;

  content: "";

}

.conceptIngredients__boxInner {

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: absolute;

  top: 0;

  left: 0;

  flex-direction: column;

  justify-content: center;

  width: 100%;

  height: 100%;

  padding: 8.3582089552%;

}

.conceptIngredients__boxInner a {

  display: inline-block;

}

.conceptIngredients__title {

  margin-bottom: 10px;

  font-weight: 400;

  font-size: min(2.37vw, 30px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.28em;

}

.conceptIngredients__slider {

  margin-bottom: 15px;

}

.conceptIngredients__slider .swiper-wrapper {

  -webkit-transition-timing-function: linear;

  transition-timing-function: linear;

}

.conceptIngredients__slider .swiper-slide {

  width: 24.5241581259%;

  max-width: 335px;

}

.conceptIngredients__img {

  position: relative;

  width: 100%;

  padding-top: 134.328358209%;

}

.conceptIngredients__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

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

  .conceptIngredients {

    margin-bottom: clamp(64px, 4rem, 82px);

  }

  .conceptIngredients__box {

    left: 20px;

    width: 66.1333333333%;

    max-width: 248px;

  }

  .conceptIngredients__box::before {

    padding-top: 116.5322580645%;

  }

  .conceptIngredients__boxInner {

    padding: 8.8709677419%;

  }

  .conceptIngredients__title {

    font-size: min(6.3vw, 22px);

  }

  .conceptIngredients__slider {

    margin-bottom: 10px;

  }

  .conceptIngredients__slider .swiper-slide {

    width: 66.1333333333%;

    max-width: 248px;

  }

  .conceptIngredients__img {

    padding-top: 116.5322580645%;

  }

}



/* products section

-------------------------------------------------------------------*/

.conceptProducts {

  position: relative;

  margin-bottom: clamp(144px, 9rem, 185px);

}

.conceptProducts__slider {

  width: 100%;

  height: 100%;

}

.conceptProducts__slider .swiper-slide {

  overflow: hidden;

}

.conceptProducts__head {

  -webkit-transform: translateY(50%);

  z-index: 2;

  position: relative;

  transform: translateY(50%);

}

.conceptProducts__container {

  position: relative;

}

.conceptProducts__btn {

  z-index: 3;

  position: absolute;

  top: 6.625rem;

  right: 5.3125rem;

}

.conceptProducts__main {

  z-index: 1;

  position: relative;

}

.conceptProducts__sub {

  -webkit-transform: translate(-50%, -50%);

  z-index: 2;

  position: absolute;

  top: 50%;

  left: 50%;

  width: 23rem;

  transform: translate(-50%, -50%);

}

.conceptProducts__imgArea {

  position: relative;

  width: 100%;

}

.conceptProducts__imgArea--main {

  padding-top: 88.7211367673%;

}

.conceptProducts__imgArea--sub {

  padding-top: 122.0108695652%;

}

.conceptProducts__img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.conceptProducts__img img {

  -o-object-fit: cover;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.conceptProducts__slider .swiper-wrapper {

  -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);

  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);

}

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

  .conceptProducts {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .conceptProducts__sub {

    width: 10.1875rem;

  }

  .conceptProducts__imgArea--main {

    padding-top: 139.7014925373%;

  }

  .conceptProducts__imgArea--sub {

    padding-top: 117.1779141104%;

  }

  .conceptProducts__btn {

    top: 2.5rem;

    right: 1.5rem;

  }

}



/* -------------------------------------------------------------------

* products style

-------------------------------------------------------------------*/

.products {

  position: relative;

  margin-bottom: clamp(114px, 7.125rem, 147px);

}

.products__container {

  -webkit-box-align: start;

  -ms-flex-align: start;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: space-between;

}

.products__side {

  position: sticky;

  top: 0;

  left: 0;

  width: min(27.5310834813%, clamp(310px, 19.375rem, 399px));

}

.products__main {

  width: max(72.4689165187%, 100% - clamp(310px, 19.375rem, 399px));

  border-bottom: 1px solid #E8E8E8;

}

.products__section {

  position: relative;

}

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

  .products__side {

    position: static;





    width: 100%;

    max-width: 100%;

    margin-bottom: clamp(50px, 3.125rem, 64px);

  }

  .products__main {

    width: 100%;

  }

}

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

  .products {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

}



/* products navi style

-------------------------------------------------------------------*/

.productsNav__list {

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  gap: clamp(12px, 0.75rem, 15px) clamp(20px, 1.25rem, 26px);

}

.productsNav__list p {
	color: #2B2B2B;

	font-weight: bold;

	font-family: "Lexend Exa", sans-serif;

	letter-spacing: 0.35em;
}

.productsNav__list ul {
	margin-bottom: 2em;
	}

.productsNav__item {

  position: relative;

}

.productsNav__item:nth-of-type(9) {
   	margin-bottom: 20px;
  }
  
  .productsNav__item:nth-of-type(9)::after {
  	position: absolute;
  	bottom: -10px;
  	left: 0;
	display: block;
    content: "";
    width: 100px;
    height: 1px;
    background: #2B2B2B;
  }

.productsNav__item a {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  color: #2B2B2B;

  font-weight: 300;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.35em;

}

.productsNav__item a span {
	margin-left 0.5em;
	font-size: 70%;
	letter-spacing: 0em;
	border-top: 1px solid #2B2B2B;
	border-bottom: 1px solid #2B2B2B;
}

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

  .productsNav__list {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    flex-direction: column;

    justify-content: center;

    height: 100vh;

  }

  .productsNav__item {
  	position: relative;

    -webkit-box-align: center;

    -ms-flex-align: center;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    align-items: center;

  }

  .productsNav__item::before {

    display: block;

    width: 10px;

    height: 10px;

    margin-right: 10px;

    border-radius: 10px;

    background-color: #2B2B2B;

    content: "";

    opacity: 0;

  }
  

  .productsNav__item a {

    -webkit-transform: translateX(-20px);

    -webkit-transition: -webkit-transform 0.4s ease-in-out;

    transform: translateX(-20px);

    transition: -webkit-transform 0.4s ease-in-out;

    transition: transform 0.4s ease-in-out;

    transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;

  }

  .productsNav__item a .arrow-anchor {

    display: none;

  }

  .productsNav__item.current::before {

    -webkit-transition: opacity 0.4s ease-in 0.2s;

    opacity: 1;

    transition: opacity 0.4s ease-in 0.2s;

  }

  .productsNav__item.current a {

    -webkit-transform: translateX(0);

    transform: translateX(0);

  }

}

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

  .productsNav {

    margin-bottom: clamp(44px, 2.75rem, 57px);

  }

  .productsNav__list {

    padding: 0 16px;

  }

  /*.productsNav__item {

    width: calc(33.3333333333% - 13.3333333333px);

  }*/

  .productsNav__item a {

    font-size: clamp(13px, 0.8125rem, 17px);

  }

}

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

  .productsNav__item {

    width: 100%;

  }
  .products__side {

    max-width:500px;

  }

}



/* introduction section

-------------------------------------------------------------------*/

.productsIntro {

  position: relative;

  margin-bottom: clamp(125px, 7.8125rem, 161px);

}

.productsIntro__num {

  margin-bottom: clamp(20px, 1.25rem, 26px);

  font-weight: 300;

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.35em;

  text-align: right;

}

.productsIntro__imgArea {

  margin-bottom: clamp(50px, 3.125rem, 64px);

}

.productsIntro__img {

  position: relative;

  width: 100%;

  padding-top: 64.9509803922%;

}

.productsIntro__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.productsIntro__head {

  margin-bottom: clamp(112px, 7rem, 144px);

}

.productsIntro__title {

  margin-bottom: clamp(24px, 1.5rem, 31px);

}

.productsIntro__info {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  margin-bottom: clamp(28px, 1.75rem, 36px);

}

.productsIntro__info .size,

.productsIntro__info .price {

  font-size: clamp(16px, 1rem, 21px);

  line-height: 1.5;

  letter-spacing: 0.07em;

}

.productsIntro__info .price {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  margin-left: clamp(24px, 1.5rem, 31px);

}

.productsIntro__info .price span {

  margin-top: 2px;

  margin-left: -3px;

  font-size: clamp(12px, 0.75rem, 15px);

  letter-spacing: 0.07em;

}

.productsIntro__text > p:not(:last-child) {

  margin-bottom: clamp(6px, 0.375rem, 8px);

}

.productsIntro__btnArea {

  -webkit-column-gap: clamp(40px, 2.5rem, 51px);

  -moz-column-gap: clamp(40px, 2.5rem, 51px);

  -webkit-box-align: end;

  -ms-flex-align: end;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  column-gap: clamp(40px, 2.5rem, 51px);

  row-gap: clamp(20px, 1.25rem, 26px);

  align-items: flex-end;

  margin-top: clamp(40px, 2.5rem, 51px);

}

.fs-small {

  font-size: clamp(11px, 0.6875rem, 14px);

  line-height: normal;

  vertical-align: text-top;

}

.productsIntro .notesList {

  -ms-flex-wrap: wrap;

  -webkit-column-gap: 18px;

  -moz-column-gap: 18px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  column-gap: 18px;

  flex-wrap: wrap;

}

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

  .productsIntro {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .productsIntro__imgArea {

    margin-bottom: clamp(25px, 1.5625rem, 32px);

  }

  .productsIntro__num {

    margin-bottom: clamp(10px, 0.625rem, 13px);

  }

  .productsIntro__img {

    padding-top: 98.2089552239%;

  }

  .productsIntro__img img.img-positon {

    -o-object-position: 70% 50%;

    object-position: 70% 50%;

  }

  .productsIntro__head {

    margin-bottom: clamp(65px, 4.0625rem, 84px);

  }

  .productsIntro__title {

    margin-bottom: clamp(14px, 0.875rem, 18px);

  }

  .productsIntro__title .label {

    font-size: clamp(14px, 0.875rem, 18px);

  }

  .productsIntro__info {

    margin-bottom: clamp(26px, 1.625rem, 33px);

  }

  .productsIntro__info .size,

  .productsIntro__info .price {

    font-size: clamp(15px, 0.9375rem, 19px);

  }

  .productsIntro__info .price {

    margin-left: clamp(17px, 1.0625rem, 22px);

  }

  .productsIntro__btnArea {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    -webkit-box-align: start;

    -ms-flex-align: start;

    flex-direction: column;

    align-items: flex-start;

    margin-top: clamp(30px, 1.875rem, 39px);

  }

  .productsIntro .notesList {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

  }

}



.productsIntro .introDetail__container {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  row-gap: clamp(25px, 1.5625rem, 32px);

  flex-wrap: wrap;

  justify-content: space-between;

  margin-bottom: clamp(90px, 5.625rem, 116px);

}

.productsIntro .introDetail__title {

  width: clamp(246px, 15.375rem, 316px);

}

.productsIntro .introDetail__body {

  width: 85%;

  max-width: clamp(540px, 33.75rem, 694px);

  margin-left: auto;

}

.productsIntro .introDetail__text > p:not(:last-child) {

  margin-bottom: clamp(26px, 1.625rem, 33px);

}

.productsIntro .introDetail__mov {

  position: relative;

  width: 100%;

  margin-top: clamp(60px, 3.75rem, 77px);

  padding-top: 56.3400576369%;

}

.productsIntro .introDetail__mov video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

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

  .productsIntro .introDetail__body {

    -webkit-box-orient: vertical;

    -webkit-box-direction: reverse;

    -ms-flex-direction: column-reverse;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    flex-direction: column-reverse;

    max-width: 100%;

    padding-left: 8.75rem;

  }

  .productsIntro .introDetail__title {

    width: 100%;

  }

  .productsIntro .introDetail__text {

    width: 100%;

  }

  .productsIntro .introDetail__mov {

    margin-top: 0;

    margin-bottom: clamp(25px, 1.5625rem, 32px);

  }

}

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

  .productsIntro .introDetail__container {

    margin-bottom: clamp(65px, 4.0625rem, 84px);

  }

  .productsIntro .introDetail__body {

    width: 100%;

    padding-left: 0;

  }

  .productsIntro .introDetail__text {

    padding-left: 4.375rem;

  }

}



.productsIntro__slider .swiper-slide {

  overflow: hidden;

}

.productsIntro__slider .swiper-pagination {

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  top: auto;

  right: 15px;

  bottom: 15px;

  left: auto;

  justify-content: center;

  width: auto;

  margin: auto;

}

.productsIntro__slider .swiper-pagination .swiper-pagination-bullet {

  margin: 5px 5px;

  border: 1px solid #2B2B2B;

  background: transparent;

  opacity: 1;

}

.productsIntro__slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {

  background: #2B2B2B;

}

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

  .productsIntro__slider .swiper-pagination {

    right: 13px;

    bottom: 13px;

  }

}



/* modal

-------------------------------------------------------------------*/

.productsModal {

  width: 58.5rem;

  min-width: 692px;

  margin-left: auto;

}

.productsModal__inner {

  position: relative;

  padding-top: clamp(110px, 6.875rem, 141px);

  padding-right: 4.6875rem;

  padding-bottom: clamp(60px, 3.75rem, 77px);

  padding-left: 4.6875rem;

  background-color: #ffffff;

}

.productsModal__head {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-align: center;

  -ms-flex-align: center;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  margin-bottom: clamp(76px, 4.75rem, 98px);

}

.productsModal__body {

  padding-bottom: clamp(35px, 2.1875rem, 45px);

  border-bottom: 1px solid #E8E8E8;

}

.productsModal__title {

  font-weight: 400;

  font-size: clamp(28px, 1.75rem, 36px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.35em;

}

.productsModal__cat {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  color: #797979;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: 1.6153846154;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.productsModal__cat::before {

  display: block;

  width: 50px;

  height: 1px;

  margin-right: 10px;

  background-color: #E8E8E8;

  content: "";

}

.productsModal__bottom {

  padding-top: clamp(50px, 3.125rem, 64px);

  text-align: center;

}

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

  .productsModal {

    width: 20.625rem;

    min-width: 20.625rem;

  }

  .productsModal__inner {

    padding: 2.75rem clamp(17px, 1.0625rem, 22px) 2.8125rem;

  }

  .productsModal__head {

    -webkit-box-orient: vertical;

    -webkit-box-direction: reverse;

    -ms-flex-direction: column-reverse;

    -webkit-box-align: start;

    -ms-flex-align: start;

    flex-direction: column-reverse;

    align-items: flex-start;

    margin-bottom: clamp(50px, 3.125rem, 64px);

  }

  .productsModal__body {

    padding-bottom: 0;

  }

  .productsModal__title {

    font-size: clamp(22px, 1.375rem, 28px);

    letter-spacing: 0.28em;

  }

  .productsModal__cat {

    margin-bottom: 40px;

    margin-left: auto;

    font-size: clamp(12px, 0.75rem, 15px);

  }

  .productsModal__cat::before {

    width: 40px;

  }

  .productsModal__bottom {

    padding-top: clamp(35px, 2.1875rem, 45px);

  }

}



.productsModal .modalContent__content {

  margin-bottom: clamp(75px, 4.6875rem, 96px);

}

.productsModal .modalContent__content--in01 {

  width: clamp(438px, 27.375rem, 563px);

  margin-bottom: clamp(100px, 6.25rem, 129px);

}

.productsModal .modalContent__content--in02 {

  width: clamp(414px, 25.875rem, 532px);

  margin-left: auto;

}

.productsModal .modalContent__content--out01 {

  width: clamp(408px, 25.5rem, 525px);

  margin-bottom: clamp(100px, 6.25rem, 129px);

}

.productsModal .modalContent__content--out02 {

  width: clamp(424px, 26.5rem, 545px);

  margin-left: auto;

}

.productsModal .modalContent__title {

  margin-bottom: clamp(28px, 1.75rem, 36px);

  font-weight: 400;

  font-size: clamp(18px, 1.125rem, 23px);

  line-height: normal;

  letter-spacing: 0.07em;

}

.productsModal .modalContent__title--md {

  margin-bottom: clamp(48px, 3rem, 62px);

}

.productsModal .modalContent__lead {

  width: clamp(438px, 27.375rem, 563px);

  margin-left: auto;

}

.productsModal .modalContent__lead, .productsModal .modalContent__text {

  line-height: 1.7142857143;

  letter-spacing: 0.07em;

}

.productsModal .modalContent__imgs {

  -webkit-box-align: start;

  -ms-flex-align: start;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  align-items: flex-start;

  justify-content: space-between;

}

.productsModal .modalContent__imgs--in01 {

  margin-bottom: clamp(90px, 5.625rem, 116px);

  gap: 0.625rem 0.875rem;

}

.productsModal .modalContent__imgs--out01 {

  margin-bottom: clamp(75px, 4.6875rem, 96px);

  padding-top: 2.6875rem;

  padding-bottom: 2.5625rem;

}

.productsModal .modalContent__imgs--out02 {

  margin-bottom: clamp(100px, 6.25rem, 129px);

  padding-right: 2.8125rem;

  padding-left: 4.375rem;

  gap: 13px 1.25rem;

}

.productsModal .modalContent__img {

  position: relative;

}

.productsModal .modalContent__img::before {

  display: block;

  position: relative;

  width: 100%;

  content: "";

}

.productsModal .modalContent__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.productsModal .modalContent__img--out01 {

  z-index: 2;

  position: absolute;

  top: 0;

  left: 4.875rem;

  width: 12.8125rem;

}

.productsModal .modalContent__img--out01::before {

  padding-top: 110.243902439%;

}

.productsModal .modalContent__img--out02 {

  z-index: 1;

  width: 100%;

}

.productsModal .modalContent__img--out02::before {

  padding-top: 46.8193384224%;

}

.productsModal .modalContent__img--out03 {

  z-index: 2;

  position: absolute;

  right: 4.875rem;

  bottom: 0;

  width: 12.4375rem;

}

.productsModal .modalContent__img--out03::before {

  padding-top: 109.5477386935%;

}

.productsModal .modalContent__img--out04 {

  width: 27.9375rem;

}

.productsModal .modalContent__img--out04::before {

  padding-top: 74.9440715884%;

}

.productsModal .modalContent__img--out05 {

  width: 12.75rem;

  margin-top: 13.4375rem;

}

.productsModal .modalContent__img--out05::before {

  padding-top: 82.8431372549%;

}

.productsModal .modalContent__img--in01 {

  width: calc(33.3333333333% - 0.5833333333rem);

}

.productsModal .modalContent__img--in01::before {

  padding-top: 139.5744%;

}

.productsModal .modalContent__img--in02 {

  width: 100%;

  max-width: 27.9375rem;

  margin: 0 auto clamp(100px, 6.25rem, 129px);

}

.productsModal .modalContent__img--in02::before {

  padding-top: 94.8545%;

}

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

  .productsModal .modalContent__content {

    width: 100%;

    margin-bottom: clamp(50px, 3.125rem, 64px);

  }

  .productsModal .modalContent__content:last-child {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .productsModal .modalContent__title {

    width: 100%;

    margin-bottom: clamp(30px, 1.875rem, 39px);

    font-size: clamp(16px, 1rem, 21px);

  }

  .productsModal .modalContent__lead {

    width: 100%;

  }

  .productsModal .modalContent__imgs {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

  }

  .productsModal .modalContent__imgs--out01 {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

    padding: 0;

  }

  .productsModal .modalContent__imgs--out02 {

    margin-bottom: clamp(50px, 3.125rem, 64px);

    padding: 0;

  }

  .productsModal .modalContent__imgs--in01 {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .productsModal .modalContent__img--out01 {

    position: relative;

    left: 0;

    width: 10.75rem;

    margin-left: 1.0625rem;

  }

  .productsModal .modalContent__img--out01::before {

    padding-top: 101.1627906977%;

  }

  .productsModal .modalContent__img--out02 {

    margin-top: -2.5rem;

    margin-bottom: 1.25rem;

  }

  .productsModal .modalContent__img--out02::before {

    padding-top: 90.5405405405%;

  }

  .productsModal .modalContent__img--out03 {

    position: relative;

    right: 0;

    left: 0;

    width: 11.375rem;

    margin-right: 1.125rem;

    margin-left: auto;

  }

  .productsModal .modalContent__img--out03::before {

    padding-top: 97.2527472527%;

  }

  .productsModal .modalContent__img--out04 {

    width: 15.5rem;

  }

  .productsModal .modalContent__img--out04::before {

    padding-top: 108.064516129%;

  }

  .productsModal .modalContent__img--out05 {

    width: 12.5rem;

    margin-top: 0.8125rem;

    margin-left: auto;

  }

  .productsModal .modalContent__img--out05::before {

    padding-top: 99%;

  }

  .productsModal .modalContent__img--in01 {

    width: 100%;

  }

  .productsModal .modalContent__img--in01::before {

    padding-top: 76.3513%;

  }

  .productsModal .modalContent__img--in02 {

    margin-bottom: clamp(50px, 3.125rem, 64px);

  }

  .productsModal .modalContent__img--in02::before {

    padding-top: 119.2567%;

  }

}



.products .modalBtn {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  z-index: 100;

  position: fixed;

  right: 30px;

  right: -50px;

  right: -210px;

  bottom: 30px;

  align-items: center;

  justify-content: space-between;

  width: 210px;

  height: 73px;

  padding: 0 20px;

  opacity: 0;

}

.products .modalBtn.is-fadeIn {

  -webkit-transition: right 0.4s ease-out, opacity 0.4s ease-out;

  right: 30px;

  opacity: 1;

  transition: right 0.4s ease-out, opacity 0.4s ease-out;

}

.products .modalBtn.is-fadeOut {

  -webkit-transition: right 0.4s ease-out, opacity 0.4s ease-out;

  right: -50px;

  right: -210px;

  opacity: 0;

  transition: right 0.4s ease-out, opacity 0.4s ease-out;

}

.products .modalBtn--out {

  background-image: url("../images/products/img_modal-btn_out.jpg");

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

}

.products .modalBtn--inside {

  background-image: url("../images/products/img_modal-btn_inside.jpg");

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

}

.products .modalBtn .text {

  font-size: 12px;

  line-height: 2;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.07em;

  text-align: left;

}

.products .modalBtn .text span {

  display: block;

  font-size: 18px;

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.25em;

}

.products .modalBtn .arrow {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  z-index: 1;

  position: relative;

  align-items: center;

  justify-content: center;

  width: 26px;

  min-width: 26px;

  height: 26px;

  min-height: 26px;

  overflow: hidden;

  border-radius: 50%;

  background-color: #ffffff;

}

.products .modalBtn .arrow::before {

  -webkit-transform: scale(0);

  -webkit-transition: -webkit-transform 0.3s;

  z-index: -1;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  margin: auto;

  transform: scale(0);

  border-radius: 50%;

  background-color: #2B2B2B;

  content: "";

  transition: -webkit-transform 0.3s;

  transition: transform 0.3s;

  transition: transform 0.3s, -webkit-transform 0.3s;

}

.products .modalBtn .arrow svg {

  fill: #2B2B2B;

  -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

  display: block;

  width: 11px;

  height: 11px;

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

}

.products .modalBtn:hover .arrow::before {

  -webkit-transform: scale(1.1);

  -webkit-transition: -webkit-transform 0.4s;

  transform: scale(1.1);

  transition: -webkit-transform 0.4s;

  transition: transform 0.4s;

  transition: transform 0.4s, -webkit-transform 0.4s;

}

.products .modalBtn:hover .arrow svg {

  fill: #ffffff;

}

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

  .products .modalBtn {

    right: -154px;

    width: 154px;

    height: 58px;

    padding: 0 9px 0 14px;

  }

  .products .modalBtn.is-fadeIn {

    right: 0;

  }

  .products .modalBtn.is-fadeOut {

    right: -154px;

  }

  .products .modalBtn .text {

    font-size: 11px;

    letter-spacing: 0.05em;

  }

  .products .modalBtn .text span {

    font-size: 16px;

  }

}



/* -------------------------------------------------------------------

* about style

-------------------------------------------------------------------*/

/* infomation section

-------------------------------------------------------------------*/

.aboutInfo {

  position: relative;

  margin-bottom: clamp(146px, 9.125rem, 188px);

}

.aboutInfo__container {

  -webkit-box-align: start;

  -ms-flex-align: start;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: space-between;

}

.aboutInfo__imgArea {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

  width: clamp(560px, 35rem, 720px);

  margin-right: 10.875rem;

}

.aboutInfo__img {

  position: relative;

  width: 100%;

  padding-top: 128.6225402504%;

}

.aboutInfo__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.aboutInfo__body {

  width: max(46.4128843338%, clamp(634px, 39.625rem, 815px));

  width: max(100% - clamp(560px, 35rem, 720px) - 10.875rem, 39.625rem);

  margin-top: clamp(70px, 4.375rem, 90px);

  padding-right: 7.5rem;

}

.aboutInfo__title {

  margin-bottom: clamp(54px, 3.375rem, 69px);

}

.aboutInfo__dl {

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  padding-bottom: clamp(8px, 0.5rem, 10px);

  border-bottom: 1px solid #E8E8E8;

}

.aboutInfo__dl:not(:last-child) {

  margin-bottom: clamp(22px, 1.375rem, 28px);

}

.aboutInfo__dl dt, .aboutInfo__dl dd {

  letter-spacing: 0.07em;

}

.aboutInfo__dl dt {

  width: 28.0155642023%;

  min-width: clamp(144px, 9rem, 185px);

  color: #797979;

}

.aboutInfo__dl dd {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

  margin-top: auto;

}

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

  .aboutInfo__imgArea {

    -webkit-box-flex: 0;

    -ms-flex: none;

    flex: none;

    width: min(100%, clamp(560px, 35rem, 720px));

    margin-right: 0;

    margin-bottom: clamp(84px, 5.25rem, 108px);

  }

  .aboutInfo__body {

    width: 100%;

    margin-top: 0;

    padding-left: 7.5rem;

  }

}

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

  .aboutInfo {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .aboutInfo__imgArea {

    width: 100%;

    margin-bottom: clamp(50px, 3.125rem, 64px);

  }

  .aboutInfo__body {

    padding-right: 1.25rem;

    padding-left: 1.25rem;

  }

  .aboutInfo__title {

    margin-bottom: clamp(30px, 1.875rem, 39px);

  }

  .aboutInfo__dl dt {

    width: 26.8656716418%;

    min-width: clamp(90px, 5.625rem, 116px);

  }

}



/* history section

-------------------------------------------------------------------*/

.aboutHistory {

  margin-bottom: clamp(146px, 9.125rem, 188px);

}

.aboutHistory__container {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  padding-right: 13.75rem;

}

.aboutHistory__head {

  width: min(34.3079922027%, clamp(352px, 22rem, 453px));

}

.aboutHistory__body {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  flex: 1;

}

.aboutHistory__tl {

  -ms-flex-wrap: wrap;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.aboutHistory__tl dt {

  width: min(27.7591973244%, clamp(166px, 10.375rem, 213px));

  font-size: clamp(22px, 1.375rem, 28px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.14em;

}

.aboutHistory__tl dd {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

  margin-top: 2px;

}

.aboutHistory .swiper-scrollbar {

  z-index: 10;

  position: relative;

  top: auto;

  right: auto;

  width: auto;

  height: auto;

  margin-right: min(8.9020771513%, clamp(60px, 3.75rem, 77px));

  background-color: transparent;

}

.aboutHistory .swiper-scrollbar::before {

  display: block;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 1px;

  height: 100%;

  margin: auto;

  background-color: #E8E8E8;

  content: "";

}

.aboutHistory .swiper-scrollbar .drag {

  width: clamp(33px, 2.0625rem, 42px);

  min-width: clamp(33px, 2.0625rem, 42px);

  height: clamp(33px, 2.0625rem, 42px) !important;

  min-height: clamp(33px, 2.0625rem, 42px);

  border-radius: 33px;

  background-image: url("../images/about/btn_scrollbar.svg");

  background-position: center center;

  background-size: contain;

  background-repeat: no-repeat;

  cursor: -webkit-grab;

  cursor: grab;

}

.aboutHistory .swiper-scrollbar .drag:active {

  cursor: -webkit-grabbing;

  cursor: grabbing;

}

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

  .aboutHistory__container {

    padding-right: 7.5rem;

  }

  .aboutHistory__head, .aboutHistory__body {

    width: 100%;

    max-width: 100%;

  }

  .aboutHistory__head {

    margin-bottom: clamp(54px, 3.375rem, 69px);

  }

}

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

  .aboutHistory {

    margin-bottom: 5.5rem;

  }

  .aboutHistory__container {

    padding-right: 1.25rem;

  }

  .aboutHistory__head {

    margin-bottom: 1.875rem;

  }

  .aboutHistory__tl {

    display: block;

  }

  .aboutHistory__tl dt {

    width: 100%;

    margin-bottom: clamp(12px, 0.75rem, 15px);

    font-size: clamp(17px, 1.0625rem, 22px);

  }

  .aboutHistory__tl dd {

    margin-top: 0;

  }

  .aboutHistory .swiper-scrollbar {

    margin-right: clamp(26px, 1.625rem, 33px);

  }

  .aboutHistory .swiper-scrollbar .drag {

    width: clamp(24px, 1.5rem, 31px);

    min-width: clamp(24px, 1.5rem, 31px);

    height: clamp(24px, 1.5rem, 31px) !important;

    min-height: clamp(24px, 1.5rem, 31px);

  }

}



.historySlider {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  justify-content: space-between;

  height: clamp(475px, 29.6875rem, 611px);

  padding-top: 70px;

  padding-bottom: 60px;

}

.historySlider::before, .historySlider::after {

  z-index: 10;

  position: absolute;

  right: 0;

  width: 100%;

  height: 175px;

  content: "";

}

.historySlider::before {

  top: -40px;

  background: -webkit-gradient(linear, left top, left bottom, color-stop(34.38%, #FFF), color-stop(73.96%, rgba(255, 255, 255, 0)));

  background: linear-gradient(180deg, #FFF 34.38%, rgba(255, 255, 255, 0) 73.96%);

}

.historySlider::after {

  bottom: -40px;

  background: -webkit-gradient(linear, left bottom, left top, color-stop(34.38%, #FFF), color-stop(73.96%, rgba(255, 255, 255, 0)));

  background: linear-gradient(0deg, #FFF 34.38%, rgba(255, 255, 255, 0) 73.96%);

}

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

  .historySlider {

    padding-top: 40px;

    padding-bottom: 40px;

  }

  .historySlider::before, .historySlider::after {

    height: 48px;

  }

  .historySlider::before {

    top: -1px;

    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(51.04%, rgba(255, 255, 255, 0.54)), to(rgba(255, 255, 255, 0)));

    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.54) 51.04%, rgba(255, 255, 255, 0) 100%);

  }

  .historySlider::after {

    bottom: -1px;

    background: -webkit-gradient(linear, left bottom, left top, from(#FFF), color-stop(51.04%, rgba(255, 255, 255, 0.54)), to(rgba(255, 255, 255, 0)));

    background: linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.54) 51.04%, rgba(255, 255, 255, 0) 100%);

  }

}



/* access section

-------------------------------------------------------------------*/

.aboutAccess {

  position: relative;

  margin-bottom: clamp(114px, 7.125rem, 147px);

}

.aboutAccess__img {

  position: relative;

  width: 100%;

  margin-bottom: clamp(126px, 7.875rem, 162px);

  padding-top: 42.0204978038%;

}

.aboutAccess__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.aboutAccess__container {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.aboutAccess__head {

  width: min(31.2611012433%, clamp(352px, 22rem, 453px));

}

.aboutAccess__body {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

}

.aboutAccess__list:not(:last-child) {

  margin-bottom: clamp(70px, 4.375rem, 90px);

}

.aboutAccess__title {

  margin-bottom: 2.1875rem;

  font-weight: 400;

  font-size: clamp(14px, 0.875rem, 18px);

  line-height: 1.7142857143;

  letter-spacing: 0.07em;

}

.aboutAccess__dl {

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

}

.aboutAccess__dl dt, .aboutAccess__dl dd, .aboutAccess__dl dd a {

  letter-spacing: 0.07em;

}

.aboutAccess__dl dt {

  width: 32.2957198444%;

  min-width: calc(clamp(166px, 10.375rem, 213px) + clamp(77px, 4.8125rem, 99px));

  padding-right: clamp(77px, 4.8125rem, 99px);

  padding-bottom: 1.25rem;

  border-right: 1px solid #E8E8E8;

  color: #797979;

}

.aboutAccess__dl dd {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

  padding-bottom: 1.25rem;

  padding-left: 4.8125rem;

}

.aboutAccess__dl dd a {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  position: relative;

  align-items: center;

  line-height: normal;

}

.aboutAccess__dl dd a::before {

  -webkit-transform-origin: left;

  -webkit-transform: scaleX(1);

  -webkit-transition: -webkit-transform 0.3s ease-in-out;

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 1px;

  transform: scaleX(1);

  transform-origin: left;

  background-color: #2B2B2B;

  content: "";

  transition: -webkit-transform 0.3s ease-in-out;

  transition: transform 0.3s ease-in-out;

  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;

}

.aboutAccess__dl dd a:hover::before {

  -webkit-animation: underline_anm 0.6s cubic-bezier(0, 0, 0, 1) both;

  animation: underline_anm 0.6s cubic-bezier(0, 0, 0, 1) both;

}

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

  .aboutAccess__head, .aboutAccess__body {

    width: 100%;

    max-width: 100%;

  }

  .aboutAccess__head {

    margin-bottom: clamp(54px, 3.375rem, 69px);

  }

}

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

  .aboutAccess {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .aboutAccess__img {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

    padding-top: 132.2666666667%;

  }

  .aboutAccess__head {

    margin-bottom: clamp(30px, 1.875rem, 39px);

  }

  .aboutAccess__title {

    margin-bottom: clamp(18px, 1.125rem, 23px);

  }

  .aboutAccess__list:not(:last-child) {

    margin-bottom: clamp(50px, 3.125rem, 64px);

  }

  .aboutAccess__dl {

    margin-bottom: clamp(20px, 1.25rem, 26px);

  }

  .aboutAccess__dl dt, .aboutAccess__dl dd {

    width: 100%;

    min-width: 100%;

    padding: 0;

  }

  .aboutAccess__dl dt {

    margin-bottom: 10px;

    border-right: none;

  }

}



/* -------------------------------------------------------------------

* ingredients style

-------------------------------------------------------------------*/

/* ingredients mv

-------------------------------------------------------------------*/

.ingredientsMv {

  position: relative;

  margin-bottom: clamp(130px, 8.125rem, 167px);

}

.ingredientsMv__slider .swiper-wrapper {

  -webkit-transition-timing-function: linear;

  transition-timing-function: linear;

}

.ingredientsMv__slider .swiper-slide {

  width: 24.8169838946%;

  max-width: 339px;

}

.ingredientsMv__img {

  position: relative;

  width: 100%;

  padding-top: 102.3598820059%;

}

.ingredientsMv__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

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

  .ingredientsMv {

    margin-bottom: clamp(72px, 4.5rem, 93px);

  }

  .ingredientsMv__slider .swiper-slide {

    width: 77.3333333333%;

    max-width: 290px;

  }

}



.ingredients {

  position: relative;

  margin-bottom: clamp(114px, 7.125rem, 147px);

}

.ingredients__head {

  position: relative;

  margin-bottom: clamp(140px, 8.75rem, 180px);

}

.ingredients__label {

  -webkit-writing-mode: vertical-rl;

  -ms-writing-mode: tb-rl;

  position: absolute;

  top: 12px;

  left: 0;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.28em;

  writing-mode: vertical-rl;

}

.ingredients__title {

  margin-bottom: clamp(53px, 3.3125rem, 68px);

  margin-left: 7.3125rem;

  font-weight: 400;

  font-size: clamp(24px, 1.5rem, 31px);

  line-height: 1.9583333333;

  letter-spacing: 0.07em;

}

.ingredients__lead {

  width: clamp(450px, 28.125rem, 579px);

  margin-right: 5.9375rem;

  margin-left: auto;

  letter-spacing: 0.07em;

}

.ingredients__lead > p:not(:last-child) {

  margin-bottom: clamp(24px, 1.5rem, 31px);

}

.ingredients__left, .ingredients__right {

  width: 43.25rem;

}

.ingredients__left {

  padding-left: 2.125rem;

}

.ingredients__right {

  margin-left: auto;

  padding-right: 0.3125rem;

}

.ingredients__row {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  padding: 0 2.375rem;

}

.ingredients__row--reverse {

  -webkit-box-orient: horizontal;

  -webkit-box-direction: reverse;

  -ms-flex-direction: row-reverse;

  flex-direction: row-reverse;

}

.ingredients__row--reverse .ingredients__col--w100 {

  margin-right: 7.6875rem;

  margin-left: auto;

}

.ingredients__col {

  width: 50%;

}

.ingredients__col--bottom {

  margin-top: 8rem;

}

.ingredients__col--w100 {

  width: 100%;

  margin-right: auto;

  margin-left: 9.375rem;

}

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

  .ingredients {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .ingredients__head {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .ingredients__body {

    padding: 0;

  }

  .ingredients__label {

    top: 6px;

    font-size: clamp(11px, 0.6875rem, 14px);

  }

  .ingredients__title {

    margin-bottom: clamp(30px, 1.875rem, 39px);

    margin-left: 3.75rem;

    font-weight: 400;

    font-size: clamp(16px, 1rem, 21px);

    line-height: 1.5625;

  }

  .ingredients__lead {

    width: auto;

    margin-right: 0;

    margin-left: 3.75rem;

  }

  .ingredients__lead > p:not(:last-child) {

    margin-bottom: clamp(22px, 1.375rem, 28px);

  }

  .ingredients__left, .ingredients__right {

    width: 19.5rem;

    padding: 0;

  }

  .ingredients__row {

    padding: 0;

  }

  .ingredients__col {

    width: 100%;

    margin: 0;

  }

  .ingredients__col--w100 {

    margin: 0 !important;

    padding: 0 1.5625rem;

  }

}



.ingredientsItem {

  margin-bottom: clamp(110px, 6.875rem, 141px);

}

.ingredientsItem--lg {

  width: 39.8125rem;

}

.ingredientsItem--md {

  width: 33.375rem;

}

.ingredientsItem--sm {

  width: 27.4375rem;

}

.ingredientsItem--right {

  margin-left: auto;

}

.ingredientsItem__body {

  position: relative;

}

.ingredientsItem__content {

  width: 29.375rem;

}

.ingredientsItem__btn {

  position: absolute;

  top: clamp(55px, 3.4375rem, 71px);

  right: clamp(-55px, -3.4375rem, -71px);

  width: clamp(118px, 9.25rem, 190px);

}

.ingredientsItem__num {

  margin-bottom: 10px;

  font-weight: 300;

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.35em;

  text-align: right;

}

.ingredientsItem__img {

  position: relative;

  margin-bottom: clamp(20px, 1.25rem, 26px);

}

.ingredientsItem__img::before {

  display: block;

  position: relative;

  width: 100%;

  content: "";

}

.ingredientsItem__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.ingredientsItem__img--lg::before {

  padding-top: 64.3642072214%;

}

.ingredientsItem__img--md::before {

  padding-top: 76.7790262172%;

}

.ingredientsItem__img--sm::before {

  padding-top: 93.3940774487%;

}

.ingredientsItem__label {

  display: inline-block;

  margin-bottom: clamp(10px, 0.625rem, 13px);

  padding: 2px 10px;

  background-color: #E8E8E8;

  font-size: clamp(12px, 0.75rem, 15px);

  line-height: 2;

  letter-spacing: 0.07em;

}

.ingredientsItem__title {

  font-weight: 400;

  font-size: clamp(18px, 1.125rem, 23px);

  line-height: 1.3333333333;

  letter-spacing: 0.07em;

}

.ingredientsItem__text {

  margin-top: clamp(24px, 1.5rem, 31px);

}

.ingredientsItem__row {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.ingredientsItem__dl {

  -webkit-box-align: start;

  -ms-flex-align: start;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  row-gap: 15px;

  align-items: flex-start;

  margin-top: clamp(24px, 1.5rem, 31px);

}

.ingredientsItem__dl dt, .ingredientsItem__dl dd {

  color: #797979;

  font-weight: 400;

}

.ingredientsItem__dl dt {

  display: inline-block;

  margin-right: 2.1875rem;

  padding: 1px 12px;

  border: 1px solid #797979;

}

.ingredientsItem__dl dd {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

}

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

  .ingredientsItem {

    width: 17.25rem;

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .ingredientsItem__num {

    font-size: clamp(12px, 0.75rem, 15px);

  }

  .ingredientsItem__img {

    margin-bottom: clamp(18px, 1.125rem, 23px);

  }

  .ingredientsItem__img::before {

    padding-top: 87.6811%;

    padding-top: 87.6811594203%;

  }

  .ingredientsItem__content {

    width: 100%;

    max-width: 100%;

  }

  .ingredientsItem__btn {

    position: absolute;

    top: auto;

    right: clamp(-8px, -0.5rem, -10px);

    bottom: clamp(8px, 0.5rem, 10px);

    width: 7.375rem;

    max-width: clamp(118px, 7.375rem, 152px);

  }

  .ingredientsItem__btn--right {

    right: clamp(-37px, -2.3125rem, -48px);

    bottom: clamp(15px, 0.9375rem, 19px);

  }

  .ingredientsItem__title {

    font-size: clamp(16px, 1rem, 21px);

  }

  .ingredientsItem__dl--col {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    width: 9.625rem;

  }

  .ingredientsItem__dl dt {

    margin-right: 1.5625rem;

    padding: 1px 9px;

  }

}



/* ingredients modal

-------------------------------------------------------------------*/

.ingredientsModal {

  width: 63.875rem;

  margin-left: auto;

}

.ingredientsModal__inner {

  padding: clamp(50px, 3.125rem, 64px) 4.6875rem clamp(60px, 3.75rem, 77px);

  background-color: #ffffff;

}

.ingredientsModal__body {

  padding-bottom: clamp(70px, 4.375rem, 90px);

  border-bottom: 1px solid #E8E8E8;

}

.ingredientsModal__foot {

  padding-top: clamp(47px, 2.9375rem, 60px);

  text-align: center;

}

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

  .ingredientsModal {

    width: 20.625rem;

  }

  .ingredientsModal__inner {

    padding: clamp(25px, 1.5625rem, 32px) 1.0625rem clamp(45px, 2.8125rem, 58px);

  }

  .ingredientsModal__body {

    padding-bottom: clamp(25px, 1.5625rem, 32px);

  }

  .ingredientsModal__foot {

    padding-top: clamp(35px, 2.1875rem, 45px);

  }

}



.ingredientsDetail {

  position: relative;

  margin-bottom: clamp(50px, 3.125rem, 64px);

  padding-top: clamp(60px, 3.75rem, 77px);

}

.ingredientsDetail__head {

  margin-bottom: clamp(104px, 6.5rem, 134px);

}

.ingredientsDetail__body {

  margin-bottom: clamp(117px, 7.3125rem, 150px);

}

.ingredientsDetail__titleWrap {

  -ms-flex-wrap: wrap;

  -webkit-box-align: end;

  -ms-flex-align: end;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  align-items: flex-end;

  justify-content: space-between;

  margin-bottom: clamp(30px, 1.875rem, 39px);

}

.ingredientsDetail__title {

  font-weight: 400;

  font-size: clamp(28px, 1.75rem, 36px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.35em;

}

.ingredientsDetail__title span {

  display: block;

  margin-bottom: 6px;

  font-weight: 400;

  font-size: clamp(14px, 0.875rem, 18px);

  line-height: normal;

  font-family: "Sawarabi Gothic", sans-serif;

  letter-spacing: 0.07em;

}

.ingredientsDetail__label {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

  color: #797979;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: 1.6153846154;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.ingredientsDetail__label::before {

  display: block;

  width: 50px;

  height: 1px;

  margin-right: 10px;

  background-color: #E8E8E8;

  content: "";

}

.ingredientsDetail__mv {

  position: relative;

  width: 100%;

  padding-top: 49.7129735936%;

}

.ingredientsDetail__mv img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.ingredientsDetail__imgArea {

  position: relative;

}

.ingredientsDetail__imgArea--sh01 {

  margin-right: 3.625rem;

  margin-bottom: clamp(32px, 2rem, 41px);

  margin-left: 0.625rem;

  padding-top: 3.375rem;

  padding-bottom: 4.1875rem;

}

.ingredientsDetail__imgArea--sh02 {

  margin-right: 6.5rem;

  margin-left: 17.8125rem;

}

.ingredientsDetail__imgArea--ko01 {

  margin-right: 3.3125rem;

  margin-left: 2.6875rem;

  padding-top: 3.625rem;

  padding-bottom: clamp(70px, 4.375rem, 90px);

}

.ingredientsDetail__img {

  position: relative;

}

.ingredientsDetail__img::before {

  display: block;

  position: relative;

  width: 100%;

  content: "";

}

.ingredientsDetail__img img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.ingredientsDetail__img--sh01 {

  z-index: 2;

  position: absolute;

  bottom: 0;

  left: 0;

  width: 12.625rem;

}

.ingredientsDetail__img--sh01::before {

  padding-top: 108.9108910891%;

}

.ingredientsDetail__img--sh02 {

  z-index: 1;

  left: 10.875rem;

  width: 31.6875rem;

}

.ingredientsDetail__img--sh02::before {

  padding-top: 71.4003944773%;

}

.ingredientsDetail__img--sh03 {

  z-index: 3;

  position: absolute;

  top: 0;

  right: 0;

  width: 10.4375rem;

}

.ingredientsDetail__img--sh03::before {

  padding-top: 105.3892215569%;

}

.ingredientsDetail__img--sh04 {

  z-index: 2;

  position: absolute;

  top: 8.4375rem;

  left: 0;

  width: 10.3125rem;

}

.ingredientsDetail__img--sh04::before {

  padding-top: 104.2424242424%;

}

.ingredientsDetail__img--sh05 {

  z-index: 1;

  width: 22rem;

  margin-left: auto;

}

.ingredientsDetail__img--sh05::before {

  padding-top: 103.6931818182%;

}

.ingredientsDetail__img--ko01 {

  z-index: 3;

  position: absolute;

  top: 0;

  left: 11.25rem;

  width: 11.5625rem;

}

.ingredientsDetail__img--ko01::before {

  padding-top: 95.1351351351%;

}

.ingredientsDetail__img--ko02 {

  z-index: 1;

  width: 29.5625rem;

  margin-left: auto;

}

.ingredientsDetail__img--ko02::before {

  padding-top: 84.9894291755%;

}

.ingredientsDetail__img--ko03 {

  z-index: 2;

  position: absolute;

  bottom: 0;

  left: 0;

  width: 15.625rem;

}

.ingredientsDetail__img--ko03::before {

  padding-top: 96.4%;

}

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

  .ingredientsDetail {

    margin-bottom: clamp(55px, 3.4375rem, 71px);

    padding-top: clamp(20px, 1.25rem, 26px);

  }

  .ingredientsDetail__head {

    margin-bottom: 3.125rem;

  }

  .ingredientsDetail__body {

    margin-bottom: 4.6875rem;

  }

  .ingredientsDetail__titleWrap {

    -webkit-box-orient: vertical;

    -webkit-box-direction: reverse;

    -ms-flex-direction: column-reverse;

    -webkit-box-align: start;

    -ms-flex-align: start;

    flex-direction: column-reverse;

    align-items: flex-start;

    margin-bottom: 1.25rem;

  }

  .ingredientsDetail__title {

    font-size: clamp(22px, 1.375rem, 28px);

    letter-spacing: 0.28em;

  }

  .ingredientsDetail__title span {

    font-size: clamp(13px, 0.8125rem, 17px);

  }

  .ingredientsDetail__label {

    margin-bottom: 17px;

    margin-left: auto;

    font-size: clamp(12px, 0.75rem, 15px);

  }

  .ingredientsDetail__label::before {

    width: 40px;

    margin-right: 8px;

  }

  .ingredientsDetail__mv {

    padding-top: 110.8108108108%;

  }

  .ingredientsDetail__imgArea--sh01 {

    margin-right: 0;

    margin-bottom: 3.3125rem;

    margin-left: 0;

    padding-top: 4.75rem;

    padding-bottom: clamp(80px, 5rem, 103px);

  }

  .ingredientsDetail__imgArea--sh02 {

    margin-right: 0;

    margin-left: 1.6875rem;

  }

  .ingredientsDetail__imgArea--ko01 {

    margin: 0;

    padding-top: 3.75rem;

    padding-bottom: 10.625rem;

  }

  .ingredientsDetail__img--sh01 {

    width: 6.9375rem;

  }

  .ingredientsDetail__img--sh01::before {

    padding-top: 109.009009009%;

  }

  .ingredientsDetail__img--sh02 {

    right: 0;

    left: 0;

    width: 15.3125rem;

    margin: auto;

  }

  .ingredientsDetail__img--sh02::before {

    padding-top: 97.5510204082%;

  }

  .ingredientsDetail__img--sh03 {

    width: 7.0625rem;

  }

  .ingredientsDetail__img--sh03::before {

    padding-top: 94.9579831933%;

  }

  .ingredientsDetail__img--sh04 {

    top: 3.75rem;

    width: 6.25rem;

  }

  .ingredientsDetail__img--sh04::before {

    padding-top: 104%;

  }

  .ingredientsDetail__img--sh05 {

    width: 12.625rem;

  }

  .ingredientsDetail__img--sh05::before {

    padding-top: 94.5544554455%;

  }

  .ingredientsDetail__img--ko01 {

    left: 2.0625rem;

    width: 6.5rem;

  }

  .ingredientsDetail__img--ko01::before {

    padding-top: 95.1923076923%;

  }

  .ingredientsDetail__img--ko02 {

    width: 13.75rem;

  }

  .ingredientsDetail__img--ko02::before {

    padding-top: 89.0909090909%;

  }

  .ingredientsDetail__img--ko03 {

    width: 9rem;

  }

  .ingredientsDetail__img--ko03::before {

    padding-top: 95.1388888889%;

  }

}



.ingredientsFeature {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.ingredientsFeature__head {

  width: 32.1100917431%;

  max-width: clamp(280px, 17.5rem, 360px);

}

.ingredientsFeature__body {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

}

.ingredientsFeature__item {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.ingredientsFeature__item:not(:last-child) {

  margin-bottom: clamp(64px, 4rem, 82px);

}

.ingredientsFeature__num {

  margin-top: clamp(5px, 0.3125rem, 6px);

  margin-right: 1.5rem;

  color: #797979;

  font-weight: 300;

  font-size: clamp(14px, 0.875rem, 18px);

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.35em;

}

.ingredientsFeature__content {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

}

.ingredientsFeature__title {

  margin-bottom: clamp(27px, 1.6875rem, 35px);

  font-weight: 400;

  font-size: clamp(18px, 1.125rem, 23px);

  line-height: normal;

  letter-spacing: 0.07em;

}

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

  .ingredientsFeature__head {

    width: 100%;

    max-width: 100%;

    margin-bottom: clamp(30px, 1.875rem, 39px);

  }

  .ingredientsFeature__item:not(:last-child) {

    margin-bottom: clamp(37px, 2.3125rem, 48px);

  }

  .ingredientsFeature__num {

    margin-top: clamp(3.5px, 0.21875rem, 4px);

    margin-right: 0.875rem;

    font-size: clamp(13px, 0.8125rem, 17px);

  }

  .ingredientsFeature__title {

    margin-bottom: clamp(18px, 1.125rem, 23px);

    font-size: clamp(16px, 1rem, 21px);

  }

}



/* -------------------------------------------------------------------

* showroom style

-------------------------------------------------------------------*/

.showroom {

  position: relative;

  margin-bottom: clamp(114px, 7.125rem, 147px);

}

.showroom__mv {

  margin-bottom: clamp(138px, 8.625rem, 177px);

}

.showroom__mvImg {

  position: relative;

  width: 100%;

  padding-top: 50.8291873964%;

}

.showroom__mvImg img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

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

  .showroom {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .showroom__mv {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .showroom__mvImg {

    padding-top: 111.6417910448%;

  }

}



/* introduction section

-------------------------------------------------------------------*/

.showroomIntro {

  position: relative;

  margin-bottom: clamp(60px, 3.75rem, 77px);

}

.showroomIntro__inner {

  position: relative;

  width: 100%;

  height: 100%;

}

.showroomIntro__label {

  -webkit-writing-mode: vertical-rl;

  -ms-writing-mode: tb-rl;

  position: absolute;

  top: 6px;

  left: 0;

  font-weight: 300;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.28em;

  writing-mode: vertical-rl;

}

.showroomIntro__body {

  margin-bottom: clamp(107px, 6.6875rem, 138px);

  margin-left: 8.375rem;

}

.showroomIntro__title {

  -webkit-box-align: center;

  -ms-flex-align: center;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  margin-bottom: clamp(84px, 5.25rem, 108px);

}

.showroomIntro__title span {

  display: block;

  width: 100%;

  margin-bottom: 10px;

  font-weight: 400;

  font-size: clamp(18px, 1.125rem, 23px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.35em;

}

.showroomIntro__title .label {

  display: inline-block;

  margin-left: clamp(8px, 0.5rem, 10px);

  padding: 0 7px;

  background-color: #2B2B2B;

  color: #ffffff;

  font-size: clamp(12px, 0.75rem, 15px);

  line-height: 2;

  letter-spacing: 0.07em;

}

.showroomIntro__content {

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  row-gap: clamp(30px, 1.875rem, 39px);

  flex-wrap: wrap;

}

.showroomIntro__catch {

  margin-right: 5.375rem;

  font-weight: 400;

  font-size: clamp(24px, 1.5rem, 31px);

  line-height: 1.9583333333;

  letter-spacing: 0.07em;

}

.showroomIntro__text {

  margin-top: 10px;

}

.showroomIntro__imgArea {

  position: relative;

  padding-top: 5rem;

  padding-bottom: 6.75rem;

}

.showroomIntro__mainImg {

  position: relative;

  width: 100%;

  padding-top: 41.9472913616%;

}

.showroomIntro__mainImg img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.showroomIntro__subImg {

  z-index: 1;

  position: absolute;

}

.showroomIntro__subImg::before {

  display: block;

  position: relative;

  width: 100%;

  content: "";

}

.showroomIntro__subImg img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.showroomIntro__subImg--001 {

  top: 0;

  left: 9.875rem;

  width: 14.75rem;

}

.showroomIntro__subImg--001::before {

  padding-top: 97.4576271186%;

}

.showroomIntro__subImg--002 {

  right: 8.375rem;

  bottom: 0;

  width: 16.25rem;

}

.showroomIntro__subImg--002::before {

  padding-top: 93.0769230769%;

}

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

  .showroomIntro {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .showroomIntro__label {

    font-size: clamp(11px, 0.6875rem, 14px);

  }

  .showroomIntro__body {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

    margin-left: 3.75rem;

  }

  .showroomIntro__title {

    display: block;

    margin-bottom: clamp(40px, 2.5rem, 51px);

  }

  .showroomIntro__title span {

    margin-bottom: 3px;

    font-size: clamp(14px, 0.875rem, 18px);

  }

  .showroomIntro__title .label {

    margin-top: 12px;

    margin-left: 0;

  }

  .showroomIntro__content {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

  }

  .showroomIntro__catch {

    margin-right: 0;

    font-size: clamp(16px, 1rem, 21px);

    line-height: 1.5625;

  }

  .showroomIntro__text {

    margin-top: 0;

  }

  .showroomIntro__imgArea {

    padding-top: 3.125rem;

    padding-bottom: 4.25rem;

  }

  .showroomIntro__mainImg {

    padding-top: 98.9333333333%;

  }

  .showroomIntro__subImg--001 {

    left: 2rem;

    width: 6.9375rem;

  }

  .showroomIntro__subImg--002 {

    right: 2.125rem;

    bottom: 0;

    width: 7.125rem;

  }

}



/* gallery section

-------------------------------------------------------------------*/

.showroomGallery {

  position: relative;

}

.showroomGallery__head {

  position: relative;

  margin-bottom: clamp(36px, 2.25rem, 46px);

}

.showroomGallery__title {

  margin-bottom: clamp(15px, 0.9375rem, 19px);

}

.showroomGallery__catch {

  font-weight: 400;

  font-size: clamp(12px, 0.75rem, 15px);

  line-height: 2;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.35em;

  text-align: center;

}

.showroomGallery__images {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-align: start;

  -ms-flex-align: start;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: space-between;

}

.showroomGallery__images img {

  display: block;

  position: relative;

}

.showroomGallery__images--001 {

  margin-bottom: clamp(24px, 1.5rem, 31px);

  padding-top: clamp(88px, 5.5rem, 113px);

  padding-right: 5.125rem;

}

.showroomGallery__images--001::before {

  position: absolute;

  top: 0;

  right: 0;

  left: 0;

  width: 1px;

  height: 147px;

  margin: auto;

  background-color: #E8E8E8;

  content: "";

}

.showroomGallery__images--002 {

  margin-bottom: clamp(70px, 4.375rem, 90px);

  padding-right: 10.625rem;

  padding-left: 16.0625rem;

}

.showroomGallery__images--003 {

  padding-right: 6.75rem;

  padding-left: 9.1875rem;

}

.showroomGallery__image {

  position: relative;

}

.showroomGallery__image::before {

  display: block;

  position: relative;

  width: 100%;

  content: "";

}

.showroomGallery__image img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.showroomGallery__image--001 {

  width: 20.8125rem;

  margin-top: 14.875rem;

}

.showroomGallery__image--001::before {

  padding-top: 97.2972972973%;

}

.showroomGallery__image--002 {

  width: 30.5rem;

}

.showroomGallery__image--002::before {

  padding-top: 92.4180327869%;

}

.showroomGallery__image--003 {

  width: 15.6875rem;

  margin-top: 7.0625rem;

}

.showroomGallery__image--003::before {

  padding-top: 89.6414342629%;

}

.showroomGallery__image--004 {

  width: 20.4375rem;

  margin-top: 10.875rem;

}

.showroomGallery__image--004::before {

  padding-top: 81.9571865443%;

}

.showroomGallery__image--005 {

  width: 27.125rem;

}

.showroomGallery__image--005::before {

  padding-top: 80.4147465438%;

}

.showroomGallery__image--006 {

  width: 33.625rem;

  margin-top: 4.4375rem;

}

.showroomGallery__image--006::before {

  padding-top: 83.2713754647%;

}

.showroomGallery__image--007 {

  width: 22.25rem;

}

.showroomGallery__image--007::before {

  padding-top: 82.8651685393%;

}

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

  .showroomGallery__head {

    margin-bottom: clamp(22px, 1.375rem, 28px);

  }

  .showroomGallery__images {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

  }

  .showroomGallery__images--001 {

    margin-bottom: clamp(57px, 3.5625rem, 73px);

    padding-top: clamp(55px, 3.4375rem, 71px);

    padding-right: 1.25rem;

  }

  .showroomGallery__images--001::before {

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    width: 1px;

    height: 84px;

    margin: auto;

    background-color: #E8E8E8;

    content: "";

  }

  .showroomGallery__images--002 {

    -webkit-box-orient: vertical;

    -webkit-box-direction: reverse;

    -ms-flex-direction: column-reverse;

    flex-direction: column-reverse;

    margin-bottom: clamp(57px, 3.5625rem, 73px);

    padding-right: 1.25rem;

    padding-left: 2.3125rem;

  }

  .showroomGallery__images--003 {

    -webkit-box-orient: vertical;

    -webkit-box-direction: reverse;

    -ms-flex-direction: column-reverse;

    flex-direction: column-reverse;

    padding-right: 1.75rem;

    padding-left: 1.0625rem;

  }

  .showroomGallery__image--001 {

    -webkit-box-ordinal-group: 4;

    -ms-flex-order: 3;

    order: 3;

    width: 10.75rem;

    margin-top: -1.75rem;

  }

  .showroomGallery__image--002 {

    -webkit-box-ordinal-group: 2;

    -ms-flex-order: 1;

    order: 1;

    width: 14.1875rem;

    margin-left: 5rem;

  }

  .showroomGallery__image--003 {

    -webkit-box-ordinal-group: 3;

    -ms-flex-order: 2;

    order: 2;

    width: 8.375rem;

    margin-top: -1.0625rem;

    margin-left: auto;

  }

  .showroomGallery__image--004 {

    z-index: 1;

    width: 11.75rem;

    margin-top: -1.125rem;

  }

  .showroomGallery__image--005 {

    width: 14.5625rem;

    margin-left: auto;

  }

  .showroomGallery__image--006 {

    width: 16.8125rem;

    margin-top: 0;

  }

  .showroomGallery__image--007 {

    width: 12rem;

    margin-bottom: clamp(45px, 2.8125rem, 58px);

    margin-left: auto;

  }

}



/* -------------------------------------------------------------------

* news style

-------------------------------------------------------------------*/

/* news common style

-------------------------------------------------------------------*/

.newsPosts {

  margin-bottom: clamp(114px, 7.125rem, 147px);

}

.newsPosts__row {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-align: start;

  -ms-flex-align: start;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: space-between;

}

.newsPosts__side {

  width: min(33.5701598579%, clamp(378px, 23.625rem, 486px));

}

.newsPosts__main {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

}

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

  .newsPosts__side {

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    justify-content: space-between;

    width: 100%;

    max-width: 100%;

    margin-bottom: clamp(80px, 5rem, 103px);

  }

}

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

  .newsPosts {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

}



.newsCat {

  position: sticky;

  top: 98px;

  left: 0;

}

.newsCat__title {

  margin-bottom: clamp(40px, 2.5rem, 51px);

  font-size: clamp(21px, 1.3125rem, 27px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.32em;

}

.newsCat__item {

  line-height: normal;

}

.newsCat__item:not(:last-child) {

  margin-bottom: clamp(14px, 0.875rem, 18px);

}

.newsCat__item a {

  color: #2B2B2B;

  line-height: normal;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.28em;

}

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

  .newsCat {

    position: static;

  }

  .newsCat__item {

    text-align: right;

  }

}

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

  .newsCat__title {

    font-size: clamp(17px, 1.0625rem, 22px);

  }

  .newsCat__item:not(:last-child) {

    margin-bottom: clamp(16px, 1rem, 21px);

  }

}



.newsMeta {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.newsMeta .date, .newsMeta .cat {

  color: #797979;

  font-size: clamp(13px, 0.8125rem, 17px);

  line-height: 1.6153846154;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.newsMeta .date {

  -webkit-box-align: center;

  -ms-flex-align: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

  align-items: center;

}

.newsMeta .date::after {

  display: block;

  width: 80px;

  height: 1px;

  margin: 0 10px;

  background-color: #E8E8E8;

  content: "";

}

.newsMeta .date--sm::after {

  width: 50px;

}

.newsMeta .date--reverse {

  -webkit-box-orient: horizontal;

  -webkit-box-direction: reverse;

  -ms-flex-direction: row-reverse;

  flex-direction: row-reverse;

}

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

  .newsMeta .date, .newsMeta .cat {

    font-size: clamp(12px, 0.75rem, 15px);

  }

  .newsMeta .date::after {

    width: 40px;

  }

}



/* news archive page

-------------------------------------------------------------------*/

.newsArchive__link {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -webkit-box-align: start;

  -ms-flex-align: start;

  -webkit-column-gap: 3.625rem;

  -moz-column-gap: 3.625rem;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  column-gap: 3.625rem;

  align-items: flex-start;

  justify-content: space-between;

}

.newsArchive__item:not(:last-child) {

  margin-bottom: clamp(60px, 3.75rem, 77px);

}

.newsArchive__thumb {

  position: relative;

  width: clamp(220px, 13.75rem, 283px);

  overflow: hidden;

}

.newsArchive__thumb--noimg {

  border: 1px solid #E8E8E8;

}

.newsArchive__thumb::before {

  display: block;

  position: relative;

  width: 100%;

  padding-top: 100%;

  content: "";

}

.newsArchive__thumb img {

  -o-object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.newsArchive__content {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

}

.newsArchive__meta {

  margin-bottom: clamp(45px, 2.8125rem, 58px);

}

.newsArchive__title {

  margin-bottom: clamp(20px, 1.25rem, 26px);

  font-weight: 400;

  font-size: clamp(14px, 0.875rem, 18px);

  line-height: 1.7142857143;

  letter-spacing: 0.07em;

}

.newsArchive__link:hover .moreBtn::before {

  -webkit-animation: underline_anm 0.6s cubic-bezier(0, 0, 0, 1) both;

  animation: underline_anm 0.6s cubic-bezier(0, 0, 0, 1) both;

}

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

  .newsArchive__link {

    -webkit-column-gap: clamp(20px, 1.25rem, 26px);

    -moz-column-gap: clamp(20px, 1.25rem, 26px);

    column-gap: clamp(20px, 1.25rem, 26px);

  }

  .newsArchive__item:not(:last-child) {

    margin-bottom: clamp(42px, 2.625rem, 54px);

  }

  .newsArchive__thumb {

    width: min(29.8507462687%, clamp(100px, 6.25rem, 129px));

  }

  .newsArchive__thumb::before {

    padding-top: 95%;

  }

  .newsArchive__meta {

    margin-bottom: clamp(13px, 0.8125rem, 17px);

  }

  .newsArchive__title {

    margin-bottom: clamp(10px, 0.625rem, 13px);

  }

  .newsArchive__btn {

    text-align: right;

  }

}



/* news article page

-------------------------------------------------------------------*/

.newsArticle__head {

  margin-bottom: 3.125rem;

}

.newsArticle__title {

  font-weight: 400;

  font-size: clamp(22px, 1.375rem, 28px);

  line-height: normal;

  letter-spacing: 0.07em;

}

.newsArticle__content {

  margin-bottom: 5rem;

}

.newsArticle__content p:not(:last-child) {

  margin-bottom: 1.5625rem;

}

.newsArticle__content img {

  display: block;

  width: 75.6358768407%;

  max-width: 565px;

  margin: 3.125rem auto;

}

.newsArticle__content a {

  -webkit-transition: color 0.3s;

  color: #2B2B2B;

  transition: color 0.3s;

}

.newsArticle__content a:hover {

  color: #797979;

}

.newsArticle__backBtn {

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  justify-content: center;

}

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

  .newsArticle__head {

    margin-bottom: 2.1875rem;

  }

  .newsArticle__meta {

    margin-bottom: 0.875rem;

  }

  .newsArticle__title {

    font-size: clamp(18px, 1.125rem, 23px);

  }

  .newsArticle__content {

    margin-bottom: 3.125rem;

  }

  .newsArticle__content img {

    width: 90.1492537313%;

    margin: 2.1875rem auto;

  }

}



/* pagenation

-------------------------------------------------------------------*/

.pagenation {

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  -ms-flex-wrap: wrap;

  -webkit-column-gap: 26px;

  -moz-column-gap: 26px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  column-gap: 26px;

  row-gap: 10px;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  margin-top: 5rem;

}

.pagenation .page {

  color: #797979;

  line-height: 1.5;

  font-family: "Lexend Exa", sans-serif;

  letter-spacing: 0.04em;

}

.pagenation .page.current {

  color: #2B2B2B;

}

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

  .pagenation {

    margin-top: 3.125rem;

  }

}



/* -------------------------------------------------------------------

* contact style

-------------------------------------------------------------------*/

.contact {

  margin-bottom: clamp(100px, 6.25rem, 129px);

}

.contact__row {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.contact__side {

  margin-right: min(9.2362344583%, clamp(104px, 6.5rem, 134px));

}

.contact__body {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

}

.contact__title {

  margin-bottom: clamp(74px, 4.625rem, 95px);

}

.contact__title .en {

  margin-bottom: 0.625rem;

  font-size: clamp(21px, 1.3125rem, 27px);

  line-height: normal;

  font-family: "futura-pt", sans-serif;

  letter-spacing: 0.32em;

}

.contact__title .ja {

  letter-spacing: 0.07em;

}

.contact__tabBtn {

  width: 100%;

  max-width: clamp(276px, 17.25rem, 355px);

}

.contact__tabBtn:first-child {

  margin-bottom: 15px;

}

.contact__textArea {

  margin-bottom: clamp(70px, 4.375rem, 90px);

}

.contact__text {

  margin-bottom: clamp(10px, 0.625rem, 13px);

  line-height: 2;

  letter-spacing: 0.07em;

}

.contact__req {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  color: #797979;

  font-size: clamp(12px, 0.75rem, 15px);

  line-height: 2;

  letter-spacing: 0.07em;

}

.contact__req span {

  display: block;

  margin-right: 2px;

  color: #CE2222;

  font-size: 13px;

}

.contact__privacy {

  margin-bottom: clamp(50px, 3.125rem, 64px);

}

.contact__privacyText {

  margin-bottom: clamp(10px, 0.625rem, 13px);

}

.contact__privacyText a {

  display: inline-block;

  position: relative;

}

.contact__privacyText a::before {

  -webkit-transform-origin: left;

  -webkit-transform: scaleX(1);

  -webkit-transition: -webkit-transform 0.3s ease-in-out;

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 1px;

  transform: scaleX(1);

  transform-origin: left;

  background-color: #2B2B2B;

  content: "";

  transition: -webkit-transform 0.3s ease-in-out;

  transition: transform 0.3s ease-in-out;

  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;

}

.contact__privacyText a:hover::before {

  -webkit-transform-origin: right;

  -webkit-transform: scaleX(0);

  transform: scaleX(0);

  transform-origin: right;

}

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

  .contact__side {

    width: 100%;

    margin-right: 0;

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .contact__title {

    margin-bottom: clamp(38px, 2.375rem, 49px);

  }

}

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

  .contact {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .contact__title .en {

    font-size: clamp(17px, 1.0625rem, 22px);

  }

  .contact__tabBtn {

    max-width: clamp(256px, 16rem, 329px);

  }

  .contact__textArea {

    margin-bottom: clamp(36px, 2.25rem, 46px);

  }

  .contact__text {

    margin-bottom: clamp(4px, 0.25rem, 5px);

  }

  .contact__privacy {

    margin-bottom: clamp(40px, 2.5rem, 51px);

  }

}



/* contact form

-------------------------------------------------------------------*/

.contactForm {

  margin-bottom: clamp(46px, 2.875rem, 59px);

}

.contactForm .req {

  margin-left: 2px;

  color: #CE2222;

  font-size: 13px;

}

.contactForm__row {

  -ms-flex-wrap: wrap;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  margin-bottom: clamp(30px, 1.875rem, 39px);

}

.contactForm dt {

  -webkit-box-align: start;

  -ms-flex-align: start;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: flex-start;

  width: clamp(178px, 11.125rem, 229px);

  font-size: clamp(13px, 0.8125rem, 17px);

}

.contactForm dd {

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

}

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

  .contactForm {

    margin-bottom: clamp(42px, 2.625rem, 54px);

  }

  .contactForm__row dt, .contactForm__row dd {

    -webkit-box-flex: 1;

    -ms-flex: auto;

    flex: auto;

    width: 100%;

  }

  .contactForm__row dt {

    margin-right: 0;

    margin-bottom: 8px;

  }

}



input[type=text],

input[type=email],

input[type=tel],

input[type=number],

input[type=date],

input[type=file],

textarea {

  -webkit-appearance: none;

  width: 100%;

  padding-bottom: 5px;

  border-bottom: solid 1px #E8E8E8;

  color: #2B2B2B;

  font-size: clamp(13px, 0.8125rem, 17px);

  vertical-align: middle;

  white-space: normal;

  word-break: break-all;

}

input[type=text].w50,

input[type=email].w50,

input[type=tel].w50,

input[type=number].w50,

input[type=date].w50,

input[type=file].w50,

textarea.w50 {

  width: max(49.2007104796%, clamp(277px, 17.3125rem, 356px));

}

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

  input[type=text].w50,

  input[type=email].w50,

  input[type=tel].w50,

  input[type=number].w50,

  input[type=date].w50,

  input[type=file].w50,

  textarea.w50 {

    width: 100%;

  }

}

input[type=text]:focus,

input[type=email]:focus,

input[type=tel]:focus,

input[type=number]:focus,

input[type=date]:focus,

input[type=file]:focus,

textarea:focus {

  outline: none;

}



textarea {

  min-height: 300px;

}



::-webkit-input-placeholder {

  color: #E8E8E8;

}



::-moz-placeholder {

  color: #E8E8E8;

}



:-ms-input-placeholder {

  color: #E8E8E8;

}



::-ms-input-placeholder {

  color: #E8E8E8;

}



::placeholder {

  color: #E8E8E8;

}



input[type=checkbox] {

  display: none;

}



input[type=checkbox] + label {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  display: inline-block;

  position: relative;

  width: auto;

  padding-left: 25px;

  cursor: pointer;

}



input[type=checkbox] + label::after,

input[type=checkbox] + label::before {

  -webkit-transform: translateY(-50%);

  display: block;

  position: absolute;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  content: "";

}



input[type=checkbox] + label::after {

  width: 17px;

  height: 17px;

  border: 1px solid #2B2B2B;

}



input[type=checkbox] + label::before {

  width: 17px;

  height: 17px;

  background-image: url("../images/common/icon_check.svg");

  background-position: 4px 4px;

  background-size: 9px;

  background-color: #2B2B2B;

  opacity: 0;

}



input[type=checkbox]:checked + label::before {

  opacity: 1;

}



.privacy {

  margin-bottom: clamp(114px, 7.125rem, 147px);

}

.privacy__container {

  max-width: calc(clamp(748px, 46.75rem, 962px) + 15rem);

}

.privacy__lead {

  margin-bottom: clamp(70px, 4.375rem, 90px);

}

.privacy__section:not(:last-child) {

  margin-bottom: clamp(45px, 2.8125rem, 58px);

}

.privacy__title {

  margin-bottom: clamp(20px, 1.25rem, 26px);

  padding-bottom: clamp(10px, 0.625rem, 13px);

  border-bottom: 1px solid #E8E8E8;

  font-weight: 400;

  font-size: clamp(16px, 1rem, 21px);

  line-height: normal;

  letter-spacing: 0.07em;

}

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

  .privacy {

    margin-bottom: clamp(75px, 4.6875rem, 96px);

  }

  .privacy__lead {

    margin-bottom: clamp(55px, 3.4375rem, 71px);

  }

  .privacy__section:not(:last-child) {

    margin-bottom: clamp(55px, 3.4375rem, 71px);

  }

  .privacy__title {

    padding-bottom: clamp(6px, 0.375rem, 8px);

    font-size: clamp(15px, 0.9375rem, 19px);

  }

}



.sp {

  display: none !important;

}



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

  .pc {

    display: none !important;

  }

  .sp {

    display: block !important;

  }

}

/* display */

.d-none {

  display: none !important;

}



.d-block {

  display: block !important;

}



.d-inline {

  display: inline !important;

}



.d-i-block {

  display: inline-block !important;

}



.d-table {

  display: table !important;

}



.d-t-row {

  display: table-row !important;

}



.d-t-cell {

  display: table-cell !important;

}



.d-flex {

  display: -webkit-box !important;

  display: -ms-flexbox !important;

  display: flex !important;

}



.d-i-flex {

  display: -webkit-inline-box !important;

  display: -ms-inline-flexbox !important;

  display: inline-flex !important;

}



/* overflow */

.of-auto {

  overflow: auto;

}

.of-hidden {

  overflow: hidden;

}



/* visibility */

.hidden {

  visibility: hidden !important;

}



.visible {

  visibility: visible !important;

}



/* hover */

.hover-opacity {

  -webkit-transition: opacity 0.15s ease-in-out;

  transition: opacity 0.15s ease-in-out;

}

.hover-opacity:hover {

  opacity: 0.8;

}



/* clearfix */

.clearfix::after {

  display: block;

  clear: both;

  content: "";

}



.clear-both {

  clear: both !important;

}



/* font-weight */

.fw-normal {

  font-weight: normal !important;

}

.fw-bold {

  font-weight: bold !important;

}



/* font-size */

.fs-sm {

  font-size: 1.4rem !important;

}

.fs-md {

  font-size: 1.6rem !important;

}

.fs-lg {

  font-size: 1.8rem !important;

}

.fs-xl {

  font-size: 2rem !important;

}

.fs-xxl {

  font-size: 2.2rem !important;

}



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

  .sp-fs-sm {

    font-size: 1.2rem !important;

  }

  .sp-fs-md {

    font-size: 1.4rem !important;

  }

  .sp-fs-lg {

    font-size: 1.6rem !important;

  }

  .sp-fs-xl {

    font-size: 1.8rem !important;

  }

  .sp-fs-xxl {

    font-size: 2rem !important;

  }

}

/* margin */

.m-auto {

  margin: 0 auto !important;

}



.mt-0 {

  margin-top: 0px !important;

}



.mb-0 {

  margin-bottom: 0px !important;

}



.ml-0 {

  margin-left: 0px !important;

}



.mr-0 {

  margin-right: 0px !important;

}



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

  .sp-mt-0 {

    margin-top: 0px !important;

  }

  .sp-mb-0 {

    margin-bottom: 0px !important;

  }

  .sp-ml-0 {

    margin-left: 0px !important;

  }

  .sp-mr-0 {

    margin-right: 0px !important;

  }

}

.mt-5 {

  margin-top: 5px !important;

}



.mb-5 {

  margin-bottom: 5px !important;

}



.ml-5 {

  margin-left: 5px !important;

}



.mr-5 {

  margin-right: 5px !important;

}



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

  .sp-mt-5 {

    margin-top: 5px !important;

  }

  .sp-mb-5 {

    margin-bottom: 5px !important;

  }

  .sp-ml-5 {

    margin-left: 5px !important;

  }

  .sp-mr-5 {

    margin-right: 5px !important;

  }

}

.mt-10 {

  margin-top: 10px !important;

}



.mb-10 {

  margin-bottom: 10px !important;

}



.ml-10 {

  margin-left: 10px !important;

}



.mr-10 {

  margin-right: 10px !important;

}



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

  .sp-mt-10 {

    margin-top: 10px !important;

  }

  .sp-mb-10 {

    margin-bottom: 10px !important;

  }

  .sp-ml-10 {

    margin-left: 10px !important;

  }

  .sp-mr-10 {

    margin-right: 10px !important;

  }

}

.mt-15 {

  margin-top: 15px !important;

}



.mb-15 {

  margin-bottom: 15px !important;

}



.ml-15 {

  margin-left: 15px !important;

}



.mr-15 {

  margin-right: 15px !important;

}



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

  .sp-mt-15 {

    margin-top: 15px !important;

  }

  .sp-mb-15 {

    margin-bottom: 15px !important;

  }

  .sp-ml-15 {

    margin-left: 15px !important;

  }

  .sp-mr-15 {

    margin-right: 15px !important;

  }

}

.mt-20 {

  margin-top: 20px !important;

}



.mb-20 {

  margin-bottom: 20px !important;

}



.ml-20 {

  margin-left: 20px !important;

}



.mr-20 {

  margin-right: 20px !important;

}



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

  .sp-mt-20 {

    margin-top: 20px !important;

  }

  .sp-mb-20 {

    margin-bottom: 20px !important;

  }

  .sp-ml-20 {

    margin-left: 20px !important;

  }

  .sp-mr-20 {

    margin-right: 20px !important;

  }

}

.mt-25 {

  margin-top: 25px !important;

}



.mb-25 {

  margin-bottom: 25px !important;

}



.ml-25 {

  margin-left: 25px !important;

}



.mr-25 {

  margin-right: 25px !important;

}



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

  .sp-mt-25 {

    margin-top: 25px !important;

  }

  .sp-mb-25 {

    margin-bottom: 25px !important;

  }

  .sp-ml-25 {

    margin-left: 25px !important;

  }

  .sp-mr-25 {

    margin-right: 25px !important;

  }

}

.mt-30 {

  margin-top: 30px !important;

}



.mb-30 {

  margin-bottom: 30px !important;

}



.ml-30 {

  margin-left: 30px !important;

}



.mr-30 {

  margin-right: 30px !important;

}



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

  .sp-mt-30 {

    margin-top: 30px !important;

  }

  .sp-mb-30 {

    margin-bottom: 30px !important;

  }

  .sp-ml-30 {

    margin-left: 30px !important;

  }

  .sp-mr-30 {

    margin-right: 30px !important;

  }

}

.mt-35 {

  margin-top: 35px !important;

}



.mb-35 {

  margin-bottom: 35px !important;

}



.ml-35 {

  margin-left: 35px !important;

}



.mr-35 {

  margin-right: 35px !important;

}



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

  .sp-mt-35 {

    margin-top: 35px !important;

  }

  .sp-mb-35 {

    margin-bottom: 35px !important;

  }

  .sp-ml-35 {

    margin-left: 35px !important;

  }

  .sp-mr-35 {

    margin-right: 35px !important;

  }

}

.mt-40 {

  margin-top: 40px !important;

}



.mb-40 {

  margin-bottom: 40px !important;

}



.ml-40 {

  margin-left: 40px !important;

}



.mr-40 {

  margin-right: 40px !important;

}



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

  .sp-mt-40 {

    margin-top: 40px !important;

  }

  .sp-mb-40 {

    margin-bottom: 40px !important;

  }

  .sp-ml-40 {

    margin-left: 40px !important;

  }

  .sp-mr-40 {

    margin-right: 40px !important;

  }

}

.mt-45 {

  margin-top: 45px !important;

}



.mb-45 {

  margin-bottom: 45px !important;

}



.ml-45 {

  margin-left: 45px !important;

}



.mr-45 {

  margin-right: 45px !important;

}



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

  .sp-mt-45 {

    margin-top: 45px !important;

  }

  .sp-mb-45 {

    margin-bottom: 45px !important;

  }

  .sp-ml-45 {

    margin-left: 45px !important;

  }

  .sp-mr-45 {

    margin-right: 45px !important;

  }

}

.mt-50 {

  margin-top: 50px !important;

}



.mb-50 {

  margin-bottom: 50px !important;

}



.ml-50 {

  margin-left: 50px !important;

}



.mr-50 {

  margin-right: 50px !important;

}



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

  .sp-mt-50 {

    margin-top: 50px !important;

  }

  .sp-mb-50 {

    margin-bottom: 50px !important;

  }

  .sp-ml-50 {

    margin-left: 50px !important;

  }

  .sp-mr-50 {

    margin-right: 50px !important;

  }

}

.mt-55 {

  margin-top: 55px !important;

}



.mb-55 {

  margin-bottom: 55px !important;

}



.ml-55 {

  margin-left: 55px !important;

}



.mr-55 {

  margin-right: 55px !important;

}



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

  .sp-mt-55 {

    margin-top: 55px !important;

  }

  .sp-mb-55 {

    margin-bottom: 55px !important;

  }

  .sp-ml-55 {

    margin-left: 55px !important;

  }

  .sp-mr-55 {

    margin-right: 55px !important;

  }

}

.mt-60 {

  margin-top: 60px !important;

}



.mb-60 {

  margin-bottom: 60px !important;

}



.ml-60 {

  margin-left: 60px !important;

}



.mr-60 {

  margin-right: 60px !important;

}



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

  .sp-mt-60 {

    margin-top: 60px !important;

  }

  .sp-mb-60 {

    margin-bottom: 60px !important;

  }

  .sp-ml-60 {

    margin-left: 60px !important;

  }

  .sp-mr-60 {

    margin-right: 60px !important;

  }

}

.mt-65 {

  margin-top: 65px !important;

}



.mb-65 {

  margin-bottom: 65px !important;

}



.ml-65 {

  margin-left: 65px !important;

}



.mr-65 {

  margin-right: 65px !important;

}



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

  .sp-mt-65 {

    margin-top: 65px !important;

  }

  .sp-mb-65 {

    margin-bottom: 65px !important;

  }

  .sp-ml-65 {

    margin-left: 65px !important;

  }

  .sp-mr-65 {

    margin-right: 65px !important;

  }

}

.mt-70 {

  margin-top: 70px !important;

}



.mb-70 {

  margin-bottom: 70px !important;

}



.ml-70 {

  margin-left: 70px !important;

}



.mr-70 {

  margin-right: 70px !important;

}



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

  .sp-mt-70 {

    margin-top: 70px !important;

  }

  .sp-mb-70 {

    margin-bottom: 70px !important;

  }

  .sp-ml-70 {

    margin-left: 70px !important;

  }

  .sp-mr-70 {

    margin-right: 70px !important;

  }

}

.mt-75 {

  margin-top: 75px !important;

}



.mb-75 {

  margin-bottom: 75px !important;

}



.ml-75 {

  margin-left: 75px !important;

}



.mr-75 {

  margin-right: 75px !important;

}



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

  .sp-mt-75 {

    margin-top: 75px !important;

  }

  .sp-mb-75 {

    margin-bottom: 75px !important;

  }

  .sp-ml-75 {

    margin-left: 75px !important;

  }

  .sp-mr-75 {

    margin-right: 75px !important;

  }

}

.mt-80 {

  margin-top: 80px !important;

}



.mb-80 {

  margin-bottom: 80px !important;

}



.ml-80 {

  margin-left: 80px !important;

}



.mr-80 {

  margin-right: 80px !important;

}



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

  .sp-mt-80 {

    margin-top: 80px !important;

  }

  .sp-mb-80 {

    margin-bottom: 80px !important;

  }

  .sp-ml-80 {

    margin-left: 80px !important;

  }

  .sp-mr-80 {

    margin-right: 80px !important;

  }

}

.mt-85 {

  margin-top: 85px !important;

}



.mb-85 {

  margin-bottom: 85px !important;

}



.ml-85 {

  margin-left: 85px !important;

}



.mr-85 {

  margin-right: 85px !important;

}



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

  .sp-mt-85 {

    margin-top: 85px !important;

  }

  .sp-mb-85 {

    margin-bottom: 85px !important;

  }

  .sp-ml-85 {

    margin-left: 85px !important;

  }

  .sp-mr-85 {

    margin-right: 85px !important;

  }

}

.mt-90 {

  margin-top: 90px !important;

}



.mb-90 {

  margin-bottom: 90px !important;

}



.ml-90 {

  margin-left: 90px !important;

}



.mr-90 {

  margin-right: 90px !important;

}



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

  .sp-mt-90 {

    margin-top: 90px !important;

  }

  .sp-mb-90 {

    margin-bottom: 90px !important;

  }

  .sp-ml-90 {

    margin-left: 90px !important;

  }

  .sp-mr-90 {

    margin-right: 90px !important;

  }

}

.mt-95 {

  margin-top: 95px !important;

}



.mb-95 {

  margin-bottom: 95px !important;

}



.ml-95 {

  margin-left: 95px !important;

}



.mr-95 {

  margin-right: 95px !important;

}



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

  .sp-mt-95 {

    margin-top: 95px !important;

  }

  .sp-mb-95 {

    margin-bottom: 95px !important;

  }

  .sp-ml-95 {

    margin-left: 95px !important;

  }

  .sp-mr-95 {

    margin-right: 95px !important;

  }

}

.mt-100 {

  margin-top: 100px !important;

}



.mb-100 {

  margin-bottom: 100px !important;

}



.ml-100 {

  margin-left: 100px !important;

}



.mr-100 {

  margin-right: 100px !important;

}



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

  .sp-mt-100 {

    margin-top: 100px !important;

  }

  .sp-mb-100 {

    margin-bottom: 100px !important;

  }

  .sp-ml-100 {

    margin-left: 100px !important;

  }

  .sp-mr-100 {

    margin-right: 100px !important;

  }

}

/* padding */

.pt-0 {

  padding-top: 0px !important;

}



.pb-0 {

  padding-bottom: 0px !important;

}



.pl-0 {

  padding-left: 0px !important;

}



.pr-0 {

  padding-right: 0px !important;

}



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

  .sp-pt-0 {

    padding-top: 0px !important;

  }

  .sp-pb-0 {

    padding-bottom: 0px !important;

  }

  .sp-pl-0 {

    padding-left: 0px !important;

  }

  .sp-pr-0 {

    padding-right: 0px !important;

  }

}

.pt-5 {

  padding-top: 5px !important;

}



.pb-5 {

  padding-bottom: 5px !important;

}



.pl-5 {

  padding-left: 5px !important;

}



.pr-5 {

  padding-right: 5px !important;

}



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

  .sp-pt-5 {

    padding-top: 5px !important;

  }

  .sp-pb-5 {

    padding-bottom: 5px !important;

  }

  .sp-pl-5 {

    padding-left: 5px !important;

  }

  .sp-pr-5 {

    padding-right: 5px !important;

  }

}

.pt-10 {

  padding-top: 10px !important;

}



.pb-10 {

  padding-bottom: 10px !important;

}



.pl-10 {

  padding-left: 10px !important;

}



.pr-10 {

  padding-right: 10px !important;

}



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

  .sp-pt-10 {

    padding-top: 10px !important;

  }

  .sp-pb-10 {

    padding-bottom: 10px !important;

  }

  .sp-pl-10 {

    padding-left: 10px !important;

  }

  .sp-pr-10 {

    padding-right: 10px !important;

  }

}

.pt-15 {

  padding-top: 15px !important;

}



.pb-15 {

  padding-bottom: 15px !important;

}



.pl-15 {

  padding-left: 15px !important;

}



.pr-15 {

  padding-right: 15px !important;

}



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

  .sp-pt-15 {

    padding-top: 15px !important;

  }

  .sp-pb-15 {

    padding-bottom: 15px !important;

  }

  .sp-pl-15 {

    padding-left: 15px !important;

  }

  .sp-pr-15 {

    padding-right: 15px !important;

  }

}

.pt-20 {

  padding-top: 20px !important;

}



.pb-20 {

  padding-bottom: 20px !important;

}



.pl-20 {

  padding-left: 20px !important;

}



.pr-20 {

  padding-right: 20px !important;

}



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

  .sp-pt-20 {

    padding-top: 20px !important;

  }

  .sp-pb-20 {

    padding-bottom: 20px !important;

  }

  .sp-pl-20 {

    padding-left: 20px !important;

  }

  .sp-pr-20 {

    padding-right: 20px !important;

  }

}

.pt-25 {

  padding-top: 25px !important;

}



.pb-25 {

  padding-bottom: 25px !important;

}



.pl-25 {

  padding-left: 25px !important;

}



.pr-25 {

  padding-right: 25px !important;

}



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

  .sp-pt-25 {

    padding-top: 25px !important;

  }

  .sp-pb-25 {

    padding-bottom: 25px !important;

  }

  .sp-pl-25 {

    padding-left: 25px !important;

  }

  .sp-pr-25 {

    padding-right: 25px !important;

  }

}

.pt-30 {

  padding-top: 30px !important;

}



.pb-30 {

  padding-bottom: 30px !important;

}




.pl-30 {

  padding-left: 30px !important;

}



.pr-30 {

  padding-right: 30px !important;

}



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

  .sp-pt-30 {

    padding-top: 30px !important;

  }

  .sp-pb-30 {

    padding-bottom: 30px !important;

  }

  .sp-pl-30 {

    padding-left: 30px !important;

  }

  .sp-pr-30 {

    padding-right: 30px !important;

  }

}

.pt-35 {

  padding-top: 35px !important;

}



.pb-35 {

  padding-bottom: 35px !important;

}



.pl-35 {

  padding-left: 35px !important;

}



.pr-35 {

  padding-right: 35px !important;

}



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

  .sp-pt-35 {

    padding-top: 35px !important;

  }

  .sp-pb-35 {

    padding-bottom: 35px !important;

  }

  .sp-pl-35 {

    padding-left: 35px !important;

  }

  .sp-pr-35 {

    padding-right: 35px !important;

  }

}

.pt-40 {

  padding-top: 40px !important;

}



.pb-40 {

  padding-bottom: 40px !important;

}



.pl-40 {

  padding-left: 40px !important;

}



.pr-40 {

  padding-right: 40px !important;

}



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

  .sp-pt-40 {

    padding-top: 40px !important;

  }

  .sp-pb-40 {

    padding-bottom: 40px !important;

  }

  .sp-pl-40 {

    padding-left: 40px !important;

  }

  .sp-pr-40 {

    padding-right: 40px !important;

  }

}

.pt-45 {

  padding-top: 45px !important;

}



.pb-45 {

  padding-bottom: 45px !important;

}



.pl-45 {

  padding-left: 45px !important;

}



.pr-45 {

  padding-right: 45px !important;

}



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

  .sp-pt-45 {

    padding-top: 45px !important;

  }

  .sp-pb-45 {

    padding-bottom: 45px !important;

  }

  .sp-pl-45 {

    padding-left: 45px !important;

  }

  .sp-pr-45 {

    padding-right: 45px !important;

  }

}

.pt-50 {

  padding-top: 50px !important;

}



.pb-50 {

  padding-bottom: 50px !important;

}



.pl-50 {

  padding-left: 50px !important;

}



.pr-50 {

  padding-right: 50px !important;

}



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

  .sp-pt-50 {

    padding-top: 50px !important;

  }

  .sp-pb-50 {

    padding-bottom: 50px !important;

  }

  .sp-pl-50 {

    padding-left: 50px !important;

  }

  .sp-pr-50 {

    padding-right: 50px !important;

  }

}

.pt-55 {

  padding-top: 55px !important;

}



.pb-55 {

  padding-bottom: 55px !important;

}



.pl-55 {

  padding-left: 55px !important;

}



.pr-55 {

  padding-right: 55px !important;

}



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

  .sp-pt-55 {

    padding-top: 55px !important;

  }

  .sp-pb-55 {

    padding-bottom: 55px !important;

  }

  .sp-pl-55 {

    padding-left: 55px !important;

  }

  .sp-pr-55 {

    padding-right: 55px !important;

  }

}

.pt-60 {

  padding-top: 60px !important;

}



.pb-60 {

  padding-bottom: 60px !important;

}



.pl-60 {

  padding-left: 60px !important;

}



.pr-60 {

  padding-right: 60px !important;

}



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

  .sp-pt-60 {

    padding-top: 60px !important;

  }

  .sp-pb-60 {

    padding-bottom: 60px !important;

  }

  .sp-pl-60 {

    padding-left: 60px !important;

  }

  .sp-pr-60 {

    padding-right: 60px !important;

  }

}

.pt-65 {

  padding-top: 65px !important;

}



.pb-65 {

  padding-bottom: 65px !important;

}



.pl-65 {

  padding-left: 65px !important;

}



.pr-65 {

  padding-right: 65px !important;

}



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

  .sp-pt-65 {

    padding-top: 65px !important;

  }

  .sp-pb-65 {

    padding-bottom: 65px !important;

  }

  .sp-pl-65 {

    padding-left: 65px !important;

  }

  .sp-pr-65 {

    padding-right: 65px !important;

  }

}

.pt-70 {

  padding-top: 70px !important;

}



.pb-70 {

  padding-bottom: 70px !important;

}



.pl-70 {

  padding-left: 70px !important;

}



.pr-70 {

  padding-right: 70px !important;

}



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

  .sp-pt-70 {

    padding-top: 70px !important;

  }

  .sp-pb-70 {

    padding-bottom: 70px !important;

  }

  .sp-pl-70 {

    padding-left: 70px !important;

  }

  .sp-pr-70 {

    padding-right: 70px !important;

  }

}

.pt-75 {

  padding-top: 75px !important;

}



.pb-75 {

  padding-bottom: 75px !important;

}



.pl-75 {

  padding-left: 75px !important;

}



.pr-75 {

  padding-right: 75px !important;

}



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

  .sp-pt-75 {

    padding-top: 75px !important;

  }

  .sp-pb-75 {

    padding-bottom: 75px !important;

  }

  .sp-pl-75 {

    padding-left: 75px !important;

  }

  .sp-pr-75 {

    padding-right: 75px !important;

  }

}

.pt-80 {

  padding-top: 80px !important;

}



.pb-80 {

  padding-bottom: 80px !important;

}



.pl-80 {

  padding-left: 80px !important;

}



.pr-80 {

  padding-right: 80px !important;

}



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

  .sp-pt-80 {

    padding-top: 80px !important;

  }

  .sp-pb-80 {

    padding-bottom: 80px !important;

  }

  .sp-pl-80 {

    padding-left: 80px !important;

  }

  .sp-pr-80 {

    padding-right: 80px !important;

  }

}

.pt-85 {

  padding-top: 85px !important;

}



.pb-85 {

  padding-bottom: 85px !important;

}



.pl-85 {

  padding-left: 85px !important;

}



.pr-85 {

  padding-right: 85px !important;

}



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

  .sp-pt-85 {

    padding-top: 85px !important;

  }

  .sp-pb-85 {

    padding-bottom: 85px !important;

  }

  .sp-pl-85 {

    padding-left: 85px !important;

  }

  .sp-pr-85 {

    padding-right: 85px !important;

  }

}

.pt-90 {

  padding-top: 90px !important;

}



.pb-90 {

  padding-bottom: 90px !important;

}



.pl-90 {

  padding-left: 90px !important;

}



.pr-90 {

  padding-right: 90px !important;

}



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

  .sp-pt-90 {

    padding-top: 90px !important;

  }

  .sp-pb-90 {

    padding-bottom: 90px !important;

  }

  .sp-pl-90 {

    padding-left: 90px !important;

  }

  .sp-pr-90 {

    padding-right: 90px !important;

  }

}

.pt-95 {

  padding-top: 95px !important;

}



.pb-95 {

  padding-bottom: 95px !important;

}



.pl-95 {

  padding-left: 95px !important;

}



.pr-95 {

  padding-right: 95px !important;

}



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

  .sp-pt-95 {

    padding-top: 95px !important;

  }

  .sp-pb-95 {

    padding-bottom: 95px !important;

  }

  .sp-pl-95 {

    padding-left: 95px !important;

  }

  .sp-pr-95 {

    padding-right: 95px !important;

  }

}

.pt-100 {

  padding-top: 100px !important;

}



.pb-100 {

  padding-bottom: 100px !important;

}



.pl-100 {

  padding-left: 100px !important;

}



.pr-100 {

  padding-right: 100px !important;

}



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

  .sp-pt-100 {

    padding-top: 100px !important;

  }

  .sp-pb-100 {

    padding-bottom: 100px !important;

  }

  .sp-pl-100 {

    padding-left: 100px !important;

  }

  .sp-pr-100 {

    padding-right: 100px !important;

  }

}

/* text-align */

.text-center {

  text-align: center !important;

}

.text-left {

  text-align: left !important;

}

.text-right {

  text-align: right !important;

}



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

  .sp-text-center {

    text-align: center !important;

  }

  .sp-text-left {

    text-align: left !important;

  }

  .sp-text-right {

    text-align: right !important;

  }

}

/* vertical-align */

.va-top {

  vertical-align: top !important;

}

.va-middle {

  vertical-align: middle !important;

}

.va-bottom {

  vertical-align: bottom !important;

}



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

  .sp-va-top {

    vertical-align: top !important;

  }

  .sp-va-middle {

    vertical-align: middle !important;

  }

  .sp-va-bottom {

    vertical-align: bottom !important;

  }

}

/* white-space */

.ws-nowrap {

  white-space: nowrap !important;

}



/* width(px) 5-400 */

.w-5 {

  width: 5px !important;

}



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

  .sp-w-5 {

    width: 5px !important;

  }

}

.w-10 {

  width: 10px !important;

}



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

  .sp-w-10 {

    width: 10px !important;

  }

}

.w-15 {

  width: 15px !important;

}



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

  .sp-w-15 {

    width: 15px !important;

  }

}

.w-20 {

  width: 20px !important;

}



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

  .sp-w-20 {

    width: 20px !important;

  }

}

.w-25 {

  width: 25px !important;

}



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

  .sp-w-25 {

    width: 25px !important;

  }

}

.w-30 {

  width: 30px !important;

}



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

  .sp-w-30 {

    width: 30px !important;

  }

}

.w-35 {

  width: 35px !important;

}



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

  .sp-w-35 {

    width: 35px !important;

  }

}

.w-40 {

  width: 40px !important;

}



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

  .sp-w-40 {

    width: 40px !important;

  }

}

.w-45 {

  width: 45px !important;

}



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

  .sp-w-45 {

    width: 45px !important;

  }

}

.w-50 {

  width: 50px !important;

}



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

  .sp-w-50 {

    width: 50px !important;

  }

}

.w-55 {

  width: 55px !important;

}



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

  .sp-w-55 {

    width: 55px !important;

  }

}

.w-60 {

  width: 60px !important;

}



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

  .sp-w-60 {

    width: 60px !important;

  }

}

.w-65 {

  width: 65px !important;

}



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

  .sp-w-65 {

    width: 65px !important;

  }

}

.w-70 {

  width: 70px !important;

}



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

  .sp-w-70 {

    width: 70px !important;

  }

}

.w-75 {

  width: 75px !important;

}



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

  .sp-w-75 {

    width: 75px !important;

  }

}

.w-80 {

  width: 80px !important;

}



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

  .sp-w-80 {

    width: 80px !important;

  }

}

.w-85 {

  width: 85px !important;

}



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

  .sp-w-85 {

    width: 85px !important;

  }

}

.w-90 {

  width: 90px !important;

}



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

  .sp-w-90 {

    width: 90px !important;

  }

}

.w-95 {

  width: 95px !important;

}



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

  .sp-w-95 {

    width: 95px !important;

  }

}

.w-100 {

  width: 100px !important;

}



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

  .sp-w-100 {

    width: 100px !important;

  }

}

.w-105 {

  width: 105px !important;

}



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

  .sp-w-105 {

    width: 105px !important;

  }

}

.w-110 {

  width: 110px !important;

}



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

  .sp-w-110 {

    width: 110px !important;

  }

}

.w-115 {

  width: 115px !important;

}



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

  .sp-w-115 {

    width: 115px !important;

  }

}

.w-120 {

  width: 120px !important;

}



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

  .sp-w-120 {

    width: 120px !important;

  }

}

.w-125 {

  width: 125px !important;

}



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

  .sp-w-125 {

    width: 125px !important;

  }

}

.w-130 {

  width: 130px !important;

}



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

  .sp-w-130 {

    width: 130px !important;

  }

}

.w-135 {

  width: 135px !important;

}



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

  .sp-w-135 {

    width: 135px !important;

  }

}

.w-140 {

  width: 140px !important;

}



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

  .sp-w-140 {

    width: 140px !important;

  }

}

.w-145 {

  width: 145px !important;

}



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

  .sp-w-145 {

    width: 145px !important;

  }

}

.w-150 {

  width: 150px !important;

}



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

  .sp-w-150 {

    width: 150px !important;

  }

}

.w-155 {

  width: 155px !important;

}



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

  .sp-w-155 {

    width: 155px !important;

  }

}

.w-160 {

  width: 160px !important;

}



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

  .sp-w-160 {

    width: 160px !important;

  }

}

.w-165 {

  width: 165px !important;

}



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

  .sp-w-165 {

    width: 165px !important;

  }

}

.w-170 {

  width: 170px !important;

}



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

  .sp-w-170 {

    width: 170px !important;

  }

}

.w-175 {

  width: 175px !important;

}



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

  .sp-w-175 {

    width: 175px !important;

  }

}

.w-180 {

  width: 180px !important;

}



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

  .sp-w-180 {

    width: 180px !important;

  }

}

.w-185 {

  width: 185px !important;

}



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

  .sp-w-185 {

    width: 185px !important;

  }

}

.w-190 {

  width: 190px !important;

}



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

  .sp-w-190 {

    width: 190px !important;

  }

}

.w-195 {

  width: 195px !important;

}



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

  .sp-w-195 {

    width: 195px !important;

  }

}

.w-200 {

  width: 200px !important;

}



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

  .sp-w-200 {

    width: 200px !important;

  }

}

.w-205 {

  width: 205px !important;

}



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

  .sp-w-205 {

    width: 205px !important;

  }

}

.w-210 {

  width: 210px !important;

}



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

  .sp-w-210 {

    width: 210px !important;

  }

}

.w-215 {

  width: 215px !important;

}



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

  .sp-w-215 {

    width: 215px !important;

  }

}

.w-220 {

  width: 220px !important;

}



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

  .sp-w-220 {

    width: 220px !important;

  }

}

.w-225 {

  width: 225px !important;

}



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

  .sp-w-225 {

    width: 225px !important;

  }

}

.w-230 {

  width: 230px !important;

}



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

  .sp-w-230 {

    width: 230px !important;

  }

}

.w-235 {

  width: 235px !important;

}



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

  .sp-w-235 {

    width: 235px !important;

  }

}

.w-240 {

  width: 240px !important;

}



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

  .sp-w-240 {

    width: 240px !important;

  }

}

.w-245 {

  width: 245px !important;

}



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

  .sp-w-245 {

    width: 245px !important;

  }

}

.w-250 {

  width: 250px !important;

}



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

  .sp-w-250 {

    width: 250px !important;

  }

}

.w-255 {

  width: 255px !important;

}



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

  .sp-w-255 {

    width: 255px !important;

  }

}

.w-260 {

  width: 260px !important;

}



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

  .sp-w-260 {

    width: 260px !important;

  }

}

.w-265 {

  width: 265px !important;

}



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

  .sp-w-265 {

    width: 265px !important;

  }

}

.w-270 {

  width: 270px !important;

}



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

  .sp-w-270 {

    width: 270px !important;

  }

}

.w-275 {

  width: 275px !important;

}



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

  .sp-w-275 {

    width: 275px !important;

  }

}

.w-280 {

  width: 280px !important;

}



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

  .sp-w-280 {

    width: 280px !important;

  }

}

.w-285 {

  width: 285px !important;

}



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

  .sp-w-285 {

    width: 285px !important;

  }

}

.w-290 {

  width: 290px !important;

}



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

  .sp-w-290 {

    width: 290px !important;

  }

}

.w-295 {

  width: 295px !important;

}



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

  .sp-w-295 {

    width: 295px !important;

  }

}

.w-300 {

  width: 300px !important;

}



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

  .sp-w-300 {

    width: 300px !important;

  }

}

.w-305 {

  width: 305px !important;

}



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

  .sp-w-305 {

    width: 305px !important;

  }

}

.w-310 {

  width: 310px !important;

}



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

  .sp-w-310 {

    width: 310px !important;

  }

}

.w-315 {

  width: 315px !important;

}



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

  .sp-w-315 {

    width: 315px !important;

  }

}

.w-320 {

  width: 320px !important;

}



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

  .sp-w-320 {

    width: 320px !important;

  }

}

.w-325 {

  width: 325px !important;

}



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

  .sp-w-325 {

    width: 325px !important;

  }

}

.w-330 {

  width: 330px !important;

}



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

  .sp-w-330 {

    width: 330px !important;

  }

}

.w-335 {

  width: 335px !important;

}



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

  .sp-w-335 {

    width: 335px !important;

  }

}

.w-340 {

  width: 340px !important;

}



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

  .sp-w-340 {

    width: 340px !important;

  }

}

.w-345 {

  width: 345px !important;

}



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

  .sp-w-345 {

    width: 345px !important;

  }

}

.w-350 {

  width: 350px !important;

}



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

  .sp-w-350 {

    width: 350px !important;

  }

}

.w-355 {

  width: 355px !important;

}



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

  .sp-w-355 {

    width: 355px !important;

  }

}

.w-360 {

  width: 360px !important;

}



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

  .sp-w-360 {

    width: 360px !important;

  }

}

.w-365 {

  width: 365px !important;

}



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

  .sp-w-365 {

    width: 365px !important;

  }

}

.w-370 {

  width: 370px !important;

}



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

  .sp-w-370 {

    width: 370px !important;

  }

}

.w-375 {

  width: 375px !important;

}



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

  .sp-w-375 {

    width: 375px !important;

  }

}

.w-380 {

  width: 380px !important;

}



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

  .sp-w-380 {

    width: 380px !important;

  }

}

.w-385 {

  width: 385px !important;

}



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

  .sp-w-385 {

    width: 385px !important;

  }

}

.w-390 {

  width: 390px !important;

}



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

  .sp-w-390 {

    width: 390px !important;

  }

}

.w-395 {

  width: 395px !important;

}



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

  .sp-w-395 {

    width: 395px !important;

  }

}

.w-400 {

  width: 400px !important;

}



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

  .sp-w-400 {

    width: 400px !important;

  }

}

/* width(%) 5-100 */

.w-5per {

  width: 5% !important;

}



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

  .sp-w-5per {

    width: 5% !important;

  }

}

.w-10per {

  width: 10% !important;

}



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

  .sp-w-10per {

    width: 10% !important;

  }

}

.w-15per {

  width: 15% !important;

}



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

  .sp-w-15per {

    width: 15% !important;

  }

}

.w-20per {

  width: 20% !important;

}



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

  .sp-w-20per {

    width: 20% !important;

  }

}

.w-25per {

  width: 25% !important;

}



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

  .sp-w-25per {

    width: 25% !important;

  }

}

.w-30per {

  width: 30% !important;

}



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

  .sp-w-30per {

    width: 30% !important;

  }

}

.w-35per {

  width: 35% !important;

}



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

  .sp-w-35per {

    width: 35% !important;

  }

}

.w-40per {

  width: 40% !important;

}



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

  .sp-w-40per {

    width: 40% !important;

  }

}

.w-45per {

  width: 45% !important;

}



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

  .sp-w-45per {

    width: 45% !important;

  }

}

.w-50per {

  width: 50% !important;

}



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

  .sp-w-50per {

    width: 50% !important;

  }

}

.w-55per {

  width: 55% !important;

}



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

  .sp-w-55per {

    width: 55% !important;

  }

}

.w-60per {

  width: 60% !important;

}



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

  .sp-w-60per {

    width: 60% !important;

  }

}

.w-65per {

  width: 65% !important;

}



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

  .sp-w-65per {

    width: 65% !important;

  }

}

.w-70per {

  width: 70% !important;

}



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

  .sp-w-70per {

    width: 70% !important;

  }

}

.w-75per {

  width: 75% !important;

}



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

  .sp-w-75per {

    width: 75% !important;

  }

}

.w-80per {

  width: 80% !important;

}



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

  .sp-w-80per {

    width: 80% !important;

  }

}

.w-85per {

  width: 85% !important;

}



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

  .sp-w-85per {

    width: 85% !important;

  }

}

.w-90per {

  width: 90% !important;

}



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

  .sp-w-90per {

    width: 90% !important;

  }

}

.w-95per {

  width: 95% !important;

}



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

  .sp-w-95per {

    width: 95% !important;

  }

}

.w-100per {

  width: 100% !important;

}



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

  .sp-w-100per {

    width: 100% !important;

  }

}

/* width(em) 5-20 */

.w-1em {

  width: 1em !important;

}



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

  .sp-w-1em {

    width: 1em !important;

  }

}

.w-2em {

  width: 2em !important;

}



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

  .sp-w-2em {

    width: 2em !important;

  }

}

.w-3em {

  width: 3em !important;

}



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

  .sp-w-3em {

    width: 3em !important;

  }

}

.w-4em {

  width: 4em !important;

}



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

  .sp-w-4em {

    width: 4em !important;

  }

}

.w-5em {

  width: 5em !important;

}



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

  .sp-w-5em {

    width: 5em !important;

  }

}

.w-6em {

  width: 6em !important;

}



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

  .sp-w-6em {

    width: 6em !important;

  }

}

.w-7em {

  width: 7em !important;

}



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

  .sp-w-7em {

    width: 7em !important;

  }

}

.w-8em {

  width: 8em !important;

}



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

  .sp-w-8em {

    width: 8em !important;

  }

}

.w-9em {

  width: 9em !important;

}



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

  .sp-w-9em {

    width: 9em !important;

  }

}

.w-10em {

  width: 10em !important;

}



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

  .sp-w-10em {

    width: 10em !important;

  }

}

.w-11em {

  width: 11em !important;

}



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

  .sp-w-11em {

    width: 11em !important;

  }

}

.w-12em {

  width: 12em !important;

}



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

  .sp-w-12em {

    width: 12em !important;

  }

}

.w-13em {

  width: 13em !important;

}



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

  .sp-w-13em {

    width: 13em !important;

  }

}

.w-14em {

  width: 14em !important;

}



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

  .sp-w-14em {

    width: 14em !important;

  }

}

.w-15em {

  width: 15em !important;

}



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

  .sp-w-15em {

    width: 15em !important;

  }

}

.w-16em {

  width: 16em !important;

}



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

  .sp-w-16em {

    width: 16em !important;

  }

}

.w-17em {

  width: 17em !important;

}



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

  .sp-w-17em {

    width: 17em !important;

  }

}

.w-18em {

  width: 18em !important;

}



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

  .sp-w-18em {

    width: 18em !important;

  }

}

.w-19em {

  width: 19em !important;

}



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

  .sp-w-19em {

    width: 19em !important;

  }

}

.w-20em {

  width: 20em !important;

}



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

  .sp-w-20em {

    width: 20em !important;

  }

}

/* width auto*/

.w-auto {

  width: auto !important;

}



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

  .sp-w-auto {

    width: auto !important;

  }

}

/*# sourceMappingURL=style.css.map */

/*youtube*/
.video {
	margin-bottom: 50px;
	text-align: center;
}
@media screen and (max-width: 1120px) {
.video{
	margin: 0 10px;
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	margin-bottom:40px;
}
.video iframe{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
}

.professional_text {
	margin-bottom: 100px;
	text-align: center;
}
.professional_text p {
	margin-bottom: 2em;
}