/** Shopify CDN: Minification failed

Line 4889:26 Expected "]" to go with "["
Line 4889:42 Unexpected "]"

**/
/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/css/brush-pro2-technology-shopify.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/** liquid
/**************************************/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes _sideCurrent {
  0% {
    transform: scale(0) rotate(0);
    /*opacity: 0;*/
  }
  100% {
    transform: scale(1) rotate(45deg);
    /*opacity: 1;*/
  }
}
@keyframes brightnessIn {
  0% {
    filter: brightness(1.7);
  }
  100% {
    filter: brightness(1);
  }
}
[data-js=split] {
  display: flex;
}
[data-js=split] em {
  font-style: normal;
}

@keyframes circle {
  0% {
    stroke-dasharray: 0 628;
  }
  /* calc(600 * 3.14) */
  99.9%, to {
    stroke-dasharray: 628 628;
  }
}
@font-face {
  font-family: "iconfont";
  src: url("../font/iconfont.eot?1727238420269");
  src: url("../font/iconfont.eot?1727238420269#iefix") format("eot"), url("../font/iconfont.woff2?1727238420269") format("woff2"), url("../font/iconfont.woff?1727238420269") format("woff"), url("../font/iconfont.ttf?1727238420269") format("truetype"), url("../font/iconfont.svg?1727238420269#iconfont") format("svg");
}
.tecFunctionsCard_icon:before, .abilityBanner_label:after, .tecPoint4_list dt.has-plus:after, .featureFaqCard_trigger:before, .featureUse_button a:after, .is-blank .traitBanner_link:after, .traitBanner_link:after, .traitMenu_list > li > a.is-blank:after {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-feature-settings: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

.traitSide {
  position: fixed;
  left: 8px;
  top: calc(50% - 20px);
  mix-blend-mode: difference;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateX(-100%);
}
@media only screen and (max-width: 900px) {
  .traitSide {
    left: -4px;
  }
}
[data-current-scene=trait] .traitSide {
  transform: translateX(0);
}
.traitSide.is-hidden {
  transform: translateX(-100%);
}
.traitSide_content p {
  font-size: 12px;
  transform: rotate(270deg);
  display: flex;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
.traitSide_content p span {
  display: block;
}
.traitSide_content p span.is-current {
  color: #808080;
  margin-right: 4px;
  width: 16px;
}
.traitSide_content p span.is-total {
  color: #fff;
}

.quickBeauty {
  margin-top: 300px;
}
@media only screen and (max-width: 900px) {
  .quickBeauty {
    width: 91.7948717949%;
    margin: 280px auto 0;
  }
}
.quickBeauty_link {
  background-color: #F8F8F3;
  position: relative;
  transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (min-width: 901px) {
  .quickBeauty_link:hover {
    background-color: #EFEFE7;
  }
}
@media only screen and (min-width: 901px) {
  .quickBeauty_link {
    display: flex;
    justify-content: space-between;
    width: 92.0833333333%;
    border-radius: 0 4px 4px 0;
    padding: 120px 8%;
  }
}
@media only screen and (max-width: 900px) {
  .quickBeauty_link {
    border-radius: 2px;
    display: block;
    overflow: hidden;
  }
}
.quickBeauty_video {
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 901px) {
  .quickBeauty_video {
    border-radius: 4px;
    width: 40.4255319149%;
  }
}
@media only screen and (max-width: 900px) {
  .quickBeauty_video {
    width: 100%;
    height: 51.2820512821vw;
  }
}
.quickBeauty_video video {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
}
@media only screen and (max-width: 900px) {
  .quickBeauty_video video {
    width: 140%;
    left: 70%;
  }
}
@media only screen and (min-width: 901px) {
  .is-inview .quickBeauty_video video {
    left: 65%;
  }
}
@media only screen and (min-width: 901px) {
  .quickBeauty_content {
    width: 52.1276595745%;
  }
}
@media only screen and (max-width: 900px) {
  .quickBeauty_content {
    padding: 50px 5% 90px;
  }
}
.quickBeauty_headline span {
  display: block;
}
.quickBeauty_headline span.is-jp {
  font-size: 16px;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.16em;
  font-feature-settings: normal;
}
@media only screen and (max-width: 900px) {
  .quickBeauty_headline span.is-jp {
    font-feature-settings: "palt";
  }
}
.quickBeauty_headline span.is-en {
  width: 228px;
  margin-top: 20px;
}
@media only screen and (max-width: 900px) {
  .quickBeauty_headline span.is-en {
    width: 182px;
  }
}
.quickBeauty_body {
  margin-top: 20px;
}
.quickBeauty_body p {
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 170%;
}
@media only screen and (max-width: 900px) {
  .quickBeauty_body p {
    font-size: 12px;
    letter-spacing: 0.12em;
  }
}
.quickBeauty .textLink {
  position: absolute;
  z-index: 2;
}
@media only screen and (min-width: 901px) {
  .quickBeauty .textLink {
    right: 1.8%;
    bottom: 33px;
  }
}
@media only screen and (max-width: 900px) {
  .quickBeauty .textLink {
    right: 2.8%;
    bottom: 44px;
  }
}

/** quickBeautyCompare
/**************************************/
.quickBeautyCompare {
  background-color: #fff;
  padding: 20px 5%;
  border-radius: 2px;
  margin-top: 30px;
}
@media only screen and (min-width: 901px) {
  .quickBeautyCompare {
    display: flex;
    justify-content: space-between;
  }
}
.quickBeautyCompare_image {
  width: 32.6642335766%;
}
@media only screen and (max-width: 900px) {
  .quickBeautyCompare_image {
    width: 64.5390070922%;
  }
}
@media only screen and (min-width: 901px) {
  .quickBeautyCompare_content {
    width: 58.3941605839%;
  }
}
@media only screen and (max-width: 900px) {
  .quickBeautyCompare_content {
    margin-top: 20px;
  }
}
.quickBeautyCompare_title {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
@media only screen and (max-width: 900px) {
  .quickBeautyCompare_title {
    font-size: 10px;
  }
}
.quickBeautyCompare_list {
  margin-top: 15px;
}
@media only screen and (max-width: 900px) {
  .quickBeautyCompare_list {
    margin-left: 10px;
  }
}
.quickBeautyCompare_list li {
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 180%;
  position: relative;
}
@media only screen and (max-width: 900px) {
  .quickBeautyCompare_list li {
    font-size: 10px;
  }
}
.quickBeautyCompare_list li::before {
  content: "・";
  position: absolute;
  left: -12px;
  top: 0;
  font-size: 20px;
}

@media only screen and (min-width: 901px) {
  .traitNote {
    padding-left: 7.9166666667%;
    padding-right: 7.9166666667%;
    margin-top: 345px;
  }
}
@media only screen and (max-width: 900px) {
  .traitNote {
    padding-left: 9.2307692308%;
    padding-right: 9.2307692308%;
  }
}
.traitNote ul {
  margin-top: 200px;
  padding-top: 40px;
  max-width: 1212px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #ccc;
}
.traitNote ul li {
  font-size: 12px;
  line-height: 180%;
  letter-spacing: 0.12em;
}

@media only screen and (min-width: 901px) {
  .traitAttention {
    padding: 0 7.9166666667%;
  }
}
@media only screen and (max-width: 900px) {
  .traitAttention {
    padding: 110px 9.2307692308% 0;
  }
}
.traitAttention ul {
  padding-top: 40px;
  max-width: 1212px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #ccc;
}
@media only screen and (min-width: 901px) {
  .traitAttention ul {
    margin-top: 200px;
  }
}
.traitAttention ul li {
  font-size: 12px;
  line-height: 180%;
  letter-spacing: 0.12em;
  color: #808080;
}

.traitMenu {
  background-color: #F8F8F3;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
}
@media only screen and (min-width: 901px) {
  .traitMenu {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media only screen and (max-width: 900px) {
  .traitMenu {
    height: calc(env(safe-area-inset-bottom) + 64px);
  }
}
.traitMenu_wrap {
  overflow-x: auto;
  white-space: nowrap;
  overflow-scrolling: touch;
  height: 100%;
}
.traitMenu_list {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  width: fit-content;
  height: 100%;
}
@media only screen and (min-width: 901px) {
  .traitMenu_list {
    align-items: center;
  }
}
@media only screen and (max-width: 900px) {
  .traitMenu_list {
    padding-top: 18px;
  }
}
.traitMenu_list > li {
  margin-left: 13px;
  margin-right: 13px;
}
.traitMenu_list > li.has-child {
  display: flex;
}
@media only screen and (min-width: 901px) {
  .traitMenu_list > li.has-child {
    align-items: center;
  }
}
.traitMenu_list > li > a > span {
  font-size: 12px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
.traitMenu_list > li > a.is-blank {
  display: flex;
  align-items: flex-start;
}
.traitMenu_list > li > a.is-blank:after {
  content: "\ea04";
}
.traitMenu_list > li > a.is-blank::after {
  padding-left: 3px;
  font-size: 5px;
  color: #808080;
}
.traitMenu_current, [data-current-section="7"] .traitMenu_dot > div:nth-child(7) a, [data-current-section="6"] .traitMenu_dot > div:nth-child(6) a, [data-current-section="5"] .traitMenu_dot > div:nth-child(5) a, [data-current-section="4"] .traitMenu_dot > div:nth-child(4) a, [data-current-section="3"] .traitMenu_dot > div:nth-child(3) a, [data-current-section="2"] .traitMenu_dot > div:nth-child(2) a, [data-current-section="1"] .traitMenu_dot > div:nth-child(1) a {
  opacity: 1;
  pointer-events: none;
}
.traitMenu_dot {
  display: flex;
  margin-left: 5px;
}
@media only screen and (max-width: 900px) {
  .traitMenu_dot {
    padding-top: 5px;
  }
}
.traitMenu_dot > div {
  margin: 0 2px;
}
.traitMenu_dot > div a {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #808080;
  opacity: 0.2;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
  display: block;
}

/** hover
/**************************************/
.traitMenu_dot a {
  transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (min-width: 901px) {
  .traitMenu_dot a:hover {
    opacity: 1;
  }
}
.traitMenu_list > li > a {
  transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (min-width: 901px) {
  .traitMenu_list > li > a:hover {
    opacity: 0.6;
  }
}

/** display
/**************************************/
.traitMenu {
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.traitMenu.is-hidden {
  transform: translateY(100%);
}

.traitGhost {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100lvh;
  pointer-events: none;
  /**/
}
.traitGhost::before {
  display: block;
  right: 0;
  top: 0;
  width: 50px;
  height: 100%;
  background-color: green;
  display: block;
  position: absolute;
  z-index: 3;
  opacity: 0.8;
}
[data-current-state="1"] .traitGhost {
  display: none;
}
.traitGhost_image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.traitGhost_image video {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
@media only screen and (max-width: 900px) {
  .traitGhost_image video {
    width: 140%;
    left: 70%;
  }
}
.traitGhost_image picture {
  transform: scale(1.05);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.traitGhost_image picture img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
[data-current-section="1"] .traitGhost_image:nth-child(1) {
  display: block;
}
[data-current-section="2"] .traitGhost_image:nth-child(2) {
  display: block;
}
[data-current-section="3"] .traitGhost_image:nth-child(3) {
  display: block;
}
[data-current-section="4"] .traitGhost_image:nth-child(4) {
  display: block;
}
[data-current-section="5"] .traitGhost_image:nth-child(5) {
  display: block;
}
[data-current-section="6"] .traitGhost_image:nth-child(6) {
  display: block;
}
[data-current-section="7"] .traitGhost_image:nth-child(7) {
  display: block;
}

.traitModal {
  background-color: #fff;
  position: relative;
  z-index: 1;
}
.traitModal_wrap {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .traitModal_wrap {
    display: flex;
    align-items: center;
    height: 550px;
    width: 936px;
  }
}
@media only screen and (max-width: 900px) {
  .traitModal_wrap {
    width: 91.7948717949vw;
  }
}
.traitModal_image {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media only screen and (min-width: 901px) {
  .traitModal_image {
    width: 50%;
    height: 100%;
  }
}
@media only screen and (max-width: 900px) {
  .traitModal_image {
    height: 68.7179487179vw;
  }
}
@media only screen and (max-width: 900px) {
  .traitModal_image.is-vertical {
    height: 107.6923076923vw;
  }
}
.traitModal_video {
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 901px) {
  .traitModal_video {
    width: 50%;
    height: 100%;
  }
}
@media only screen and (max-width: 900px) {
  .traitModal_video {
    height: 68.7179487179vw;
  }
  [data-page=rin] [data-modal-content=trait1] .traitModal_video {
    height: 51.7948717949vw;
  }
}
.traitModal_video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%);
  display: block;
}
@media only screen and (max-width: 900px) {
  .traitModal_video video {
    width: 100%;
    height: auto;
  }
  [data-page=bfs] .traitModal_video video {
    width: auto;
    height: 100%;
  }
}
.traitModal_main {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .traitModal_main {
    width: 50%;
  }
}
@media only screen and (max-width: 900px) {
  .traitModal_main {
    height: 38vh;
  }
}
@media only screen and (min-width: 901px) {
  .traitModal_content {
    padding-left: 16%;
    padding-right: 16%;
  }
}
@media only screen and (max-width: 900px) {
  .traitModal_content {
    padding: 30px 10.3% 30px;
    overflow: hidden;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
.traitModal_title {
  font-size: 18px;
  line-height: 150%;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .traitModal_title {
    font-size: 18px;
    line-height: 180%;
  }
}
.traitModal_title sup {
  font-size: 10px;
}
@media only screen and (max-width: 900px) {
  .traitModal_title sup {
    font-size: 9px;
  }
}
.traitModal_body {
  margin-top: 30px;
}
@media only screen and (max-width: 900px) {
  .traitModal_body {
    margin-top: 15px;
  }
}
.traitModal_body p {
  font-size: 13px;
  line-height: 170%;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .traitModal_body p {
    font-size: 14px;
    line-height: 180%;
  }
}
.traitModal_body p sup {
  font-size: 9px;
}
@media only screen and (max-width: 900px) {
  .traitModal_body p sup {
    font-size: 8px;
  }
}
.traitModal_body ol {
  margin-top: 3px;
}
.traitModal_body ol li {
  padding-left: 18px;
  position: relative;
  font-size: 13px;
  line-height: 170%;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .traitModal_body ol li {
    font-size: 14px;
    line-height: 180%;
  }
}
.traitModal_body ol li:before {
  position: absolute;
  left: 2px;
  top: 9px;
  width: 2px;
  height: 2px;
  transform: rotate(45deg);
  border: 1px solid #1A1A1A;
  content: "";
  display: block;
  position: absolute;
}
[data-page=ipl] .traitModal_product {
  width: 140px;
  position: absolute;
  right: -40px;
  bottom: -90px;
}
@media only screen and (max-width: 900px) {
  [data-page=ipl] .traitModal_product {
    width: 87px;
    right: 18px;
    bottom: -38px;
  }
}
[data-page=bfs] [data-modal-content=trait2] .traitModal_product {
  width: 440px;
  position: absolute;
  left: 101px;
  bottom: 0;
  z-index: 3;
}
@media only screen and (max-width: 900px) {
  [data-page=bfs] [data-modal-content=trait2] .traitModal_product {
    width: 245px;
    right: 0;
    top: auto;
    bottom: 0;
  }
}

/** explain
/**************************************/
.traitModalExplain {
  margin-top: 30px;
}
.traitModalExplain_illust > div {
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: fit-content;
}
.traitModalExplain_caption {
  text-align: center;
  margin-top: 10px;
}
.traitModalExplain_caption p {
  font-size: 11px;
  color: #808080;
  letter-spacing: 0.12em;
}

/** animation
/**************************************/
.traitModal {
  opacity: 0;
  transition: 1.8s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 0s;
  transform: translateY(-40px);
}
[data-modal-state=visible] .traitModal {
  opacity: 1;
  transition-delay: 0.5s;
  transform: translateY(0);
}

.traitBanner {
  border-radius: 2px;
  overflow: hidden;
  margin-top: 80px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
[data-page=bfs] .traitBanner {
  height: 116px;
}
.traitBanner[data-theme=purple] {
  background-color: rgba(111, 109, 131, 0.4);
}
.trait_tag + .traitBanner {
  margin-top: 40px;
}
@media only screen and (max-width: 900px) {
  .traitBanner {
    margin-top: 50px;
  }
}
.traitBanner a {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: rgba(18, 43, 63, 0.4);
}
[data-page=bfs] .traitBanner a {
  height: 100%;
}
.traitBanner_image {
  width: 43.0107526882%;
  height: 100%;
  background-color: #fff;
}
@media only screen and (max-width: 900px) {
  .traitBanner_image {
    width: 48.3870967742%;
  }
}
.traitBanner_video {
  width: 43.0107526882%;
}
@media only screen and (max-width: 900px) {
  .traitBanner_video {
    width: 48.3870967742%;
  }
}
[data-page=bfs] .traitBanner_video {
  overflow: hidden;
  height: 100%;
}
[data-page=bfs] .traitBanner_video > div {
  height: 100%;
}
.traitBanner_video > div > video {
  width: 100%;
  display: block;
}
[data-page=bfs] .traitBanner_video > div > video {
  width: auto;
  height: 100%;
  margin-left: -15px;
}
[data-page=bfs] [data-section="2"] .traitBanner_video > div > video {
  height: 200%;
  margin: -22% 0 0 -66%;
}
[data-page=bfs] [data-section="3"] .traitBanner_video > div > video {
  height: 180%;
  margin: -28% 0 0 -55%;
}
[data-page=bfs] [data-section="4"] .traitBanner_video > div > video {
  height: 200%;
  margin: -24% 0 0 -69%;
}
[data-page=bfs] [data-section="5"] .traitBanner_video > div > video {
  height: 200%;
  margin: -24% 0 0 -69%;
}
.traitBanner_content {
  width: 56.9892473118%;
  padding-left: 6%;
  padding-right: 6%;
}
@media only screen and (max-width: 900px) {
  .traitBanner_content {
    width: 51.6129032258%;
    padding-left: 5%;
    padding-right: 5%;
  }
}
.traitBanner_body {
  font-size: 14px;
  line-height: 160%;
  color: #fff;
}
@media only screen and (max-width: 900px) {
  .traitBanner_body {
    font-size: 12px;
  }
}
[data-page=rin] .traitBanner_body {
  font-size: 12px;
}
@media only screen and (max-width: 900px) {
  .traitBanner_body br {
    display: none;
  }
  .traitBanner_body br.is-blockMobile {
    display: block;
  }
}
.traitBanner_body sup {
  font-size: 9px;
}
@media only screen and (max-width: 900px) {
  .traitBanner_body sup {
    font-size: 8px;
  }
}
.traitBanner_link {
  margin-top: 15px;
  border-bottom: 1px solid #fff;
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  width: fit-content;
}
.traitBanner_link:after {
  content: "\ea0a";
}
.is-blank .traitBanner_link:after {
  content: "\ea07";
}
.is-blank .traitBanner_link::after {
  font-size: 11px;
}
@media only screen and (max-width: 900px) {
  .traitBanner_link {
    padding-bottom: 2px;
  }
}
.traitBanner_link::after {
  color: #fff;
  font-size: 10px;
}
@media only screen and (max-width: 900px) {
  .traitBanner_link::after {
    font-size: 8px;
  }
}
.traitBanner_link span {
  display: block;
  font-size: 12px;
  margin-right: 8px;
  color: #fff;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
@media only screen and (max-width: 900px) {
  .traitBanner_link span {
    font-size: 10px;
    margin-right: 5px;
  }
}

/** hover
/**************************************/
.traitBanner {
  transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media only screen and (min-width: 901px) {
  .traitBanner:hover {
    background-color: rgba(18, 43, 63, 0.5);
  }
}

/** pickup
/**************************************/
.traitBannerPickup {
  border-radius: 2px;
  display: flex;
  align-items: stretch;
  margin-top: 42px;
  overflow: hidden;
  background-color: rgba(18, 43, 63, 0.4);
}
@media only screen and (min-width: 901px) {
  .traitBannerPickup {
    width: 93%;
  }
}
@media only screen and (max-width: 900px) {
  .traitBannerPickup {
    margin-top: 27px;
  }
}
.traitBannerPickup_image {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .traitBannerPickup_image {
    width: 43.0107526882%;
  }
}
@media only screen and (max-width: 900px) {
  .traitBannerPickup_image {
    width: 47.1698113208%;
  }
}
.traitBannerPickup_image div {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.traitBannerPickup_image div picture {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.traitBannerPickup_image div picture img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.traitBannerPickup_content {
  width: 56.9892473118%;
  padding: 11px 5.4%;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 900px) {
  .traitBannerPickup_content {
    width: 52.8301886792%;
  }
}
.traitBannerPickup_body p {
  font-size: 12px;
  color: #fff;
  line-height: 160%;
  letter-spacing: 0.12em;
}
.traitBannerPickup_body p sup {
  font-size: 60%;
}

.traitBackground {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100lvh;
  background-color: #fff;
}
.traitBackground_banner {
  position: relative;
  z-index: 2;
  display: block;
  pointer-events: auto;
}
@media only screen and (min-width: 901px) {
  .traitBackground_banner {
    display: none;
  }
}
.traitBackground_banner > div {
  opacity: 0;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
}
[data-current-section="0"] .traitBackground_banner > div {
  opacity: 1;
}
.traitBackground_content {
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.traitBackground_content img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.traitBackground_content::before {
  content: "";
  display: block;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 2;
  position: absolute;
}
@media only screen and (min-width: 901px) {
  .traitBackground_content::before {
    width: 42.8472222222%;
    height: 100%;
  }
}
@media only screen and (max-width: 900px) {
  .traitBackground_content::before {
    width: 100%;
    height: 100%;
  }
}
.traitBackground_content::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  display: block;
}
@media only screen and (min-width: 901px) {
  .traitBackground_content::after {
    top: 0;
    width: 48.125%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  }
}
@media only screen and (max-width: 900px) {
  .traitBackground_content::after {
    bottom: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  }
}
.traitBackground_image {
  position: absolute;
  z-index: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.traitBackground_image video {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
}
@media only screen and (max-width: 900px) {
  .traitBackground_image video {
    width: 140%;
    left: 40%;
  }
}
@media only screen and (min-width: 901px) {
  .is-inview .traitBackground_image video {
    left: 65%;
  }
}
.traitBackground_image picture {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  transition: 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
  transform: scale(1.05);
}
@media only screen and (min-width: 901px) {
  .is-inview .traitBackground_image picture {
    width: 90%;
    transform: scale(1);
  }
}
[data-current-section="0"][data-current-state="0"] [data-section="1"] .traitBackground {
  background-color: transparent;
}
[data-current-section="1"][data-current-state="0"] [data-section="2"] .traitBackground {
  background-color: transparent;
}
[data-current-section="2"][data-current-state="0"] [data-section="3"] .traitBackground {
  background-color: transparent;
}
[data-current-section="3"][data-current-state="0"] [data-section="4"] .traitBackground {
  background-color: transparent;
}
[data-current-section="4"][data-current-state="0"] [data-section="5"] .traitBackground {
  background-color: transparent;
}
[data-current-section="5"][data-current-state="0"] [data-section="6"] .traitBackground {
  background-color: transparent;
}
[data-current-section="6"][data-current-state="0"] [data-section="7"] .traitBackground {
  background-color: transparent;
}

/** animation
/**************************************/
.traitBackground_content::after {
  transition: 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.is-inview .traitBackground_content::after {
  opacity: 0;
}
.traitBackground_content::before {
  transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (min-width: 901px) {
  .traitBackground_content::before {
    transform: scaleX(0);
    transform-origin: left center;
  }
}
@media only screen and (max-width: 900px) {
  .traitBackground_content::before {
    transform: scaleY(0);
    transform-origin: center bottom;
  }
}
.is-inview .traitBackground_content::before {
  transform: scaleX(1);
}
.traitBackground_note {
  opacity: 0;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-inview .traitBackground_note {
  opacity: 1;
}

.trait {
  position: relative;
}
.trait_pop {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000000;
  width: 450px;
}
[data-current-section="1"][data-current-state="0"] .trait[data-section="2"] .traitBackground_image {
  display: none;
}
[data-current-section="2"][data-current-state="0"] .trait[data-section="3"] .traitBackground_image {
  display: none;
}
[data-current-section="3"][data-current-state="0"] .trait[data-section="4"] .traitBackground_image {
  display: none;
}
[data-current-section="4"][data-current-state="0"] .trait[data-section="5"] .traitBackground_image {
  display: none;
}
[data-current-section="5"][data-current-state="0"] .trait[data-section="6"] .traitBackground_image {
  display: none;
}
[data-current-section="6"][data-current-state="0"] .trait[data-section="7"] .traitBackground_image {
  display: none;
}
.trait_content {
  padding-top: 100lvh;
  position: relative;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
@media only screen and (min-width: 901px) {
  .trait_content {
    padding-bottom: 145px;
    width: 400px;
    margin-left: 7.7777777778%;
  }
}
@media only screen and (max-width: 900px) {
  .trait_content {
    width: 81.5384615385%;
    margin-left: auto;
    margin-right: auto;
  }
}
.trait_content a, .trait_content button {
  pointer-events: auto;
}
.trait_headline {
  font-size: 40px;
  line-height: 150%;
  letter-spacing: 0.08em;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 900px) {
  .trait_headline {
    font-size: 32px;
  }
}
@media only screen and (max-width: 900px) {
  .trait_headline[data-size-mobile="32"] {
    font-size: 32px;
  }
}
.trait_headline sup {
  font-size: 10px;
  position: relative;
  top: -0.8em;
}
@media only screen and (max-width: 900px) {
  .trait_headline sup {
    font-size: 8px;
    top: -0.9em;
  }
}
.trait_lead {
  font-size: 18px;
  line-height: 180%;
  margin-top: 20px;
  letter-spacing: 0.12em;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 900px) {
  .trait_lead {
    font-size: 16px;
    margin-top: 9px;
  }
}
.trait_lead sup {
  font-size: 8px;
  position: relative;
  top: -0.1em;
}
@media only screen and (max-width: 900px) {
  .trait_lead sup {
    font-size: 7px;
  }
}
.trait_spec {
  margin-top: 50px;
  display: flex;
}
.trait_spec + .trait_spec {
  margin-top: 0;
}
@media only screen and (max-width: 900px) {
  .trait_spec.is-mobileBlock {
    display: block;
  }
}
[data-section="5"] .trait_spec {
  display: block;
}
@media only screen and (max-width: 900px) {
  .trait_spec {
    margin-top: 20px;
  }
}
.trait_spec p {
  font-size: 14px;
  line-height: 1.9;
}
@media only screen and (max-width: 900px) {
  .trait_spec p {
    font-size: 12px;
  }
}
.trait_spec p:first-child {
  margin-right: 16px;
  white-space: nowrap;
}
.trait_spec p sup {
  font-size: 8px;
  position: relative;
  white-space: nowrap;
}
@media only screen and (max-width: 900px) {
  .trait_spec p sup {
    font-size: 7px;
  }
}
.trait_body {
  margin-top: 90px;
}
@media only screen and (max-width: 900px) {
  .trait_body {
    margin-top: 50px;
  }
}
.trait_tag + .trait_body {
  margin-top: 40px;
}
.traitBanner + .trait_body {
  margin-top: 40px;
}
.trait_pickup + .trait_body, .trait_lead + .trait_body {
  margin-top: 15px;
}
.trait_body[data-size="13"] p {
  font-size: 13px;
}
.trait_body p {
  font-size: 14px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .trait_body p {
    font-size: 13px;
  }
}
.trait_body p sup {
  font-size: 10px;
}
@media only screen and (max-width: 900px) {
  .trait_body p sup {
    font-size: 10px;
  }
}
.trait_attention {
  margin-top: 15px;
  display: grid;
  grid-template-columns: auto 1fr;
}
@media only screen and (max-width: 900px) {
  .trait_attention {
    margin-top: 18px;
  }
}
.trait_attention dt, .trait_attention dd {
  font-size: 10px;
  line-height: 170%;
}
.trait_attention dt.is-marginTop, .trait_attention dd.is-marginTop {
  margin-top: 8px;
}
.trait_attention dt {
  margin-right: 5px;
}
.trait_attention dt:empty {
  width: 0;
  margin-right: 0;
}
.trait_attention dt:empty + dd {
  margin-left: -18px;
}
.trait_attention dd {
  word-wrap: break-word;
}
.trait_tag {
  display: flex;
  flex-wrap: wrap;
  margin-top: 22px;
}
@media only screen and (max-width: 900px) {
  .trait_tag {
    margin-top: 20px;
  }
}
.trait_tag li {
  margin: 0 9px 8px 0;
}
.trait_tag li span {
  display: block;
  font-size: 14px;
  background-color: #fff;
  height: 20px;
  border-radius: 10px;
  background-color: rgba(177, 191, 203, 0.2);
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1;
}
.trait_tag li span sup {
  font-size: 60%;
}
@media only screen and (max-width: 900px) {
  .trait_tag li span {
    font-size: 13px;
  }
  [data-page=rin] .trait_tag li span {
    font-size: 14px;
  }
}
.trait_pickup {
  font-size: 15px;
  margin-top: 16px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .trait_pickup {
    font-size: 13px;
  }
}
.trait_pickup em {
  font-size: 10px;
  font-style: normal;
  margin-left: 5px;
}
.trait_pickup sup {
  font-size: 60%;
}
.trait_lpHeadline span {
  display: block;
}
.trait_lpHeadline span.is-ja {
  font-size: 18px;
}
@media only screen and (max-width: 900px) {
  .trait_lpHeadline span.is-ja {
    font-size: 14px;
  }
}
.trait_lpHeadline span.is-en {
  margin-top: 15px;
}
.trait_lpHeadline span.is-en svg {
  display: block;
  width: 262px;
  height: 40px;
}
.trait_blank {
  height: 20vh;
}

/** theme
/**************************************/
[data-theme=dark] .traitBackground {
  background-color: #363636;
}
[data-theme=dark] .traitBackground_content::before {
  background-color: #363636;
}
[data-theme=dark] .trait_content * {
  color: #fff;
}

/** animation
/**************************************/
.trait_content {
  color: #fff;
}
.is-inview .trait_content {
  color: #1A1A1A;
}
.trait_attention {
  color: #fff;
}
.is-inview .trait_attention {
  color: #808080;
}
.trait_pickup em {
  color: #fff;
}
.is-inview .trait_pickup em {
  color: #808080;
}
.trait_headline, .trait_lead, .trait_spec, .trait_body, .trait_tag, .trait_attention, .trait_pickup {
  transition: 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.trait_lpHeadline span.is-ja {
  transition: 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.is-inview .trait_lpHeadline span.is-ja {
  color: #1A1A1A;
}
.trait_lpHeadline span.is-en path {
  fill: #fff;
  transition: 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.is-inview .trait_lpHeadline span.is-en path {
  fill: #1A1A1A;
}

.brandMovie {
  background-color: #F7F7F7;
  margin-top: 128px;
}
@media only screen and (max-width: 900px) {
  .brandMovie {
    margin-top: 64px;
  }
}
.brandMovie_wrap {
  padding: 127px 0 124px;
  max-width: 1044px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 902px) and (max-width: 1439px) {
  .brandMovie_wrap {
    padding-left: 13.75%;
    padding-right: 13.75%;
    max-width: 1440px;
  }
}
@media only screen and (max-width: 900px) {
  .brandMovie_wrap {
    width: 81.5%;
    padding: 63px 0 20px;
    margin-left: auto;
    margin-right: auto;
  }
}
.brandMovie_headline {
  font-size: 22px;
  letter-spacing: 0.08em;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
@media only screen and (max-width: 900px) {
  .brandMovie_headline {
    font-size: 20px;
  }
}
.brandMovie_body {
  margin-top: 15px;
}
@media only screen and (max-width: 900px) {
  .brandMovie_body {
    margin-top: 10px;
  }
}
.brandMovie_body p {
  font-size: 18px;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .brandMovie_body p {
    font-size: 16px;
    line-height: 180%;
  }
}
@media only screen and (min-width: 901px) {
  .brandMovie_content {
    margin-top: 53px;
    display: flex;
    justify-content: space-between;
  }
}
@media only screen and (max-width: 900px) {
  .brandMovie_content {
    margin-top: 23px;
  }
}

/** card
/**************************************/
@media only screen and (min-width: 901px) {
  .brandMovieCard {
    width: 30.8429118774%;
  }
}
@media only screen and (max-width: 900px) {
  .brandMovieCard {
    margin-bottom: 16px;
  }
}
.brandMovieCard_link {
  display: block;
}
.brandMovieCard_thumbnail {
  position: relative;
}
.brandMovieCard_image {
  overflow: hidden;
  border-radius: 4px;
}
.brandMovieCard_icon {
  position: absolute;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  z-index: 2;
}
.brandMovieCard .textLink {
  margin-top: 27px;
}
@media only screen and (max-width: 900px) {
  .brandMovieCard .textLink {
    margin-top: 20px;
  }
}

@media only screen and (min-width: 901px) {
  .brandMovieCard_link:hover .brandMovieCard_image img {
    transform: scale(1.06);
  }
}
.brandMovieCard_image img {
  transition: 2s cubic-bezier(0.19, 1, 0.22, 1);
}

.rinCare {
  margin-top: 128px;
  background-color: #F8F8F3;
  padding: 118px 0 128px;
  perspective: 1500px;
}
.rinCare > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .rinCare > * {
  opacity: 1;
  transform: none;
}
.rinCare.inView > * {
  opacity: 1;
  transform: none;
}
@media only screen and (max-width: 900px) {
  .rinCare {
    margin-top: 80px;
    padding: 72px 0 80px;
  }
}
.rinCare_wrap {
  max-width: 1044px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 902px) and (max-width: 1439px) {
  .rinCare_wrap {
    padding-left: 13.75%;
    padding-right: 13.75%;
    max-width: 1440px;
  }
}
@media only screen and (max-width: 900px) {
  .rinCare_wrap {
    width: 82.5%;
  }
}
@media only screen and (min-width: 901px) {
  .rinCare_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.rinCare_title {
  letter-spacing: 0.08em;
  line-height: 150%;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (min-width: 901px) {
  .rinCare_title {
    width: 40.1340996169%;
    font-size: 28px;
  }
}
@media only screen and (max-width: 900px) {
  .rinCare_title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 901px) {
  .rinCare_body {
    width: 59.8659003831%;
  }
}
@media only screen and (max-width: 900px) {
  .rinCare_body {
    margin-top: 15px;
  }
}
.rinCare_body p {
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 180%;
}
.rinCare_body p sup {
  font-size: 60%;
}
.rinCare_image {
  margin-top: 54px;
}
@media only screen and (max-width: 900px) {
  .rinCare_image {
    margin-top: 32px;
  }
}
.rinCare_note {
  font-size: 10px;
  line-height: 180%;
  letter-spacing: 0.12em;
  color: #808080;
  margin-top: 30px;
}
@media only screen and (max-width: 900px) {
  .rinCare_note {
    margin-top: 18px;
  }
}

.featureUse {
  margin-top: 120px;
}
.trait + .featureUse {
  margin-top: 300px;
}
@media only screen and (max-width: 900px) {
  .trait + .featureUse {
    margin-top: 280px;
  }
}
.rinCare + .featureUse {
  margin-top: 128px;
}
@media only screen and (max-width: 900px) {
  .rinCare + .featureUse {
    margin-top: 128px;
  }
}
.featureUse_image {
  overflow: hidden;
  border-radius: 0 4px 4px 0;
  width: 570px;
  height: 720px;
  position: relative;
}
@media only screen and (max-width: 900px) {
  .featureUse_image {
    width: 77.9487179487vw;
    height: 103.8461538462vw;
  }
}
.featureUse_image > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.featureUse_image > div > div {
  position: absolute;
  left: 0;
  top: -5%;
  width: 100%;
  height: 110%;
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
}
[data-page=ipl] .featureUse_image > div > div {
  height: 100%;
}
.featureUse_main {
  max-width: 1440px;
  margin: -244px auto 0;
  position: relative;
  z-index: 1;
}
[data-bursh-type=pro2] .featureUse_main {
  margin-top: 0;
}
@media only screen and (max-width: 900px) {
  [data-bursh-type=pro2] .featureUse_main {
    width: 90.7692307692vw;
  }
}
@media only screen and (max-width: 900px) {
  .featureUse_main {
    margin-top: -96px;
  }
}
@media only screen and (min-width: 901px) {
  .featureUse_wrap {
    padding: 0 7.9166666667%;
  }
}
@media only screen and (max-width: 900px) {
  .featureUse_wrap {
    padding-left: 9.4%;
  }
  [data-bursh-type=pro2] .featureUse_wrap {
    padding-left: 0;
  }
}
.featureUse_content {
  background-color: #F8F8F3;
  border-radius: 8px;
  padding: 70px 7%;
}
@media only screen and (max-width: 900px) {
  .featureUse_content {
    padding: 40px 10% 35px;
  }
  [data-bursh-type=pro2] .featureUse_content {
    padding-left: 5%;
    padding-right: 5%;
  }
}
.featureUse_headline {
  position: relative;
}
@media only screen and (max-width: 900px) {
  .featureUse_headline {
    margin-left: 10px;
  }
  [data-bursh-type=pro2] .featureUse_headline {
    margin-left: 8%;
  }
}
.featureUse_headline:before {
  position: absolute;
  left: -25px;
  top: 20px;
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  border: 1px solid #1A1A1A;
  content: "";
  display: block;
  position: absolute;
}
.featureUse_headline span {
  font-size: 24px;
}
@media only screen and (max-width: 900px) {
  .featureUse_headline span {
    font-size: 18px;
  }
}
.featureUse_button a {
  background-color: #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 4px 4px;
  width: 222px;
  height: 48px;
  color: #fff;
}
.featureUse_button a:after {
  content: "\ea04";
}
@media only screen and (min-width: 901px) {
  .featureUse_button a {
    margin-left: auto;
  }
}
@media only screen and (max-width: 900px) {
  .featureUse_button a {
    width: 204px;
  }
}
.featureUse_button a:after {
  font-size: 7px;
  margin-left: 25px;
}
@media only screen and (max-width: 900px) {
  .featureUse_button a:after {
    margin-left: 15px;
  }
}
.featureUse_button a span {
  font-size: 14px;
}

/** card
/**************************************/
.featureUseCards {
  margin-top: 40px;
}
@media only screen and (min-width: 901px) {
  .featureUseCards {
    display: flex;
    justify-content: space-between;
  }
}

.featureUseCard {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .featureUseCard {
    width: 22.0517737296%;
  }
}
@media only screen and (max-width: 900px) {
  .featureUseCard {
    margin-top: 24px;
    padding-left: 22.5%;
  }
  .menColumn .featureUseCard, [data-bursh-type=pro2] .featureUseCard {
    padding-left: 0;
    margin-top: 35px;
  }
}
.featureUseCard_num {
  font-size: 12px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
@media only screen and (max-width: 900px) {
  .featureUseCard_num {
    position: absolute;
    left: 14px;
    top: 3px;
  }
}
.featureUseCard_image {
  overflow: hidden;
  border-radius: 2px;
}
@media only screen and (min-width: 901px) {
  .featureUseCard_image {
    margin-top: 18px;
  }
}
.featureUseCard_image > div {
  clip-path: inset(1px);
}
.featureUseCard_title {
  margin-top: 10px;
}
.featureUseCard_title span {
  font-size: 18px;
  line-height: 170%;
}
@media only screen and (max-width: 900px) {
  .featureUseCard_title span {
    font-size: 16px;
  }
}
.featureUseCard_title span.is-volume {
  font-size: 12px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
  letter-spacing: 0.01em;
}
.featureUseCard_title span.is-main {
  font-size: 22px;
  font-weight: 500;
  display: block;
  margin-top: 5px;
}
@media only screen and (max-width: 900px) {
  .menColumn .featureUseCard_title span.is-main {
    margin-top: 0;
    margin-bottom: 20px;
  }
}
.featureUseCard_body {
  margin-top: 6px;
  position: relative;
}
.menColumn .featureUseCard_body {
  margin-top: 56px;
}
@media only screen and (max-width: 900px) {
  .menColumn .featureUseCard_body {
    margin-top: 25px;
  }
}
.featureUseCard_body p {
  font-size: 13px;
  line-height: 170%;
}
.featureUseCard_body p sup {
  font-size: 9px;
}
@media only screen and (max-width: 900px) {
  .featureUseCard_body p sup {
    font-size: 8px;
  }
}
.featureUseCard_body small {
  font-size: 10px;
  line-height: 140%;
  display: block;
  text-indent: -2.5em;
  padding-left: 2.5em;
}
@media only screen and (min-width: 901px) {
  .featureUseCard_body small {
    position: absolute;
    left: 0;
    bottom: -50px;
  }
}
@media only screen and (max-width: 900px) {
  .featureUseCard_body small {
    margin-top: 20px;
  }
}

/** movie
/**************************************/
.featureUseMovie {
  border-top: 1px dotted #ccc;
  padding-top: 40px;
  margin-top: 45px;
}
@media only screen and (min-width: 901px) {
  .featureUseMovie_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media only screen and (max-width: 900px) {
  [data-bursh-type=pro2] .featureUseMovie_wrap {
    display: flex;
    flex-direction: column-reverse;
  }
}
@media only screen and (min-width: 901px) {
  .featureUseMovie_content {
    width: 56.5134099617%;
  }
}
@media only screen and (max-width: 900px) {
  [data-bursh-type=pro2] .featureUseMovie_content {
    margin-top: 30px;
  }
}
.featureUseMovie_headline {
  font-size: 20px;
}
.featureUseMovie_body {
  margin-top: 35px;
}
@media only screen and (max-width: 900px) {
  .featureUseMovie_body {
    margin-top: 25px;
  }
}
.featureUseMovie_body p {
  font-size: 18px;
  line-height: 170%;
}
@media only screen and (max-width: 900px) {
  .featureUseMovie_body p {
    font-size: 14px;
  }
}
.featureUseMovie_image {
  display: block;
  position: relative;
}
@media only screen and (min-width: 901px) {
  .featureUseMovie_image {
    width: 43.4865900383%;
  }
}
@media only screen and (max-width: 900px) {
  .featureUseMovie_image {
    margin-top: 40px;
  }
}
.featureUseMovie_image > div {
  overflow: hidden;
  border-radius: 4px;
}
.featureUseMovie_image > div > img {
  transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.featureUseMovie_image svg {
  display: block;
  position: absolute;
  z-index: 2;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
}
.featureUseMovie_image[href="#"]:hover > div img {
  transform: scale(1.08);
}
.featureUseMovie .textLink {
  margin-top: 50px;
}
@media only screen and (max-width: 900px) {
  .featureUseMovie .textLink {
    margin-top: 30px;
  }
}

/** animation
/**************************************/
.featureUse_image > div > div {
  transition: 2.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: scale(1.1);
  opacity: 0;
}
.featureUse_image.inView > div > div {
  transform: none;
  opacity: 1;
}
.featureUse_content {
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
  transform: translateY(-50px);
  opacity: 0;
}
.inView .featureUse_content {
  transform: none;
  opacity: 1;
}

.featureUseCards {
  perspective: 600px;
}

.featureUseCard {
  transition: 0s cubic-bezier(0.19, 1, 0.22, 1);
  transform: rotateX(-3deg) translateY(40px) scale(0.95);
  opacity: 0;
}
[data-animation="0"] .featureUseCard {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.inView .featureUseCard {
  opacity: 1;
  transform: none;
}
.featureUseCard:nth-child(1) {
  transition: 2.2s cubic-bezier(0.19, 1, 0.22, 1) 0.6s;
}
.featureUseCard:nth-child(2) {
  transition: 2.2s cubic-bezier(0.19, 1, 0.22, 1) 0.7s;
}
.featureUseCard:nth-child(3) {
  transition: 2.2s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
}
.featureUseCard:nth-child(4) {
  transition: 2.2s cubic-bezier(0.19, 1, 0.22, 1) 0.9s;
}
.featureUseCard:nth-child(5) {
  transition: 2.2s cubic-bezier(0.19, 1, 0.22, 1) 1s;
}

.featureUseMovie {
  transition: 2.2s cubic-bezier(0.19, 1, 0.22, 1);
  transform: rotateX(-3deg) translateY(40px) scale(0.95);
  opacity: 0;
}
.featureUseMovie.inView, .inView .featureUseMovie {
  opacity: 1;
  transform: none;
}

@media only screen and (min-width: 901px) {
  .supervisor {
    max-width: 1290px;
    margin: 200px auto 0;
    padding-left: 40px;
    padding-right: 40px;
  }
  [data-bursh-type=pro2] .supervisor {
    max-width: 1124px;
    margin: 127px auto 0;
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media only screen and (max-width: 900px) {
  .supervisor {
    margin: 60px auto 0;
    width: 82.0512820513vw;
  }
}
@media only screen and (max-width: 900px) {
  .supervisor .tecHeadlineLv2 span.is-ja {
    font-size: 24px;
    margin-top: 15px;
  }
}
.supervisor_section + .supervisor_section {
  margin-top: 128px;
}
@media only screen and (max-width: 900px) {
  .supervisor_section + .supervisor_section {
    margin-top: 83px;
  }
}
.supervisor_wrap {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .supervisor_wrap {
    padding-left: 3.3%;
    padding-right: 3.3%;
  }
  [data-bursh-type=pro2] .supervisor_wrap {
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (max-width: 900px) {
  .supervisor_wrap {
    margin-top: 40px;
    padding-left: 6%;
    padding-right: 6%;
  }
  [data-bursh-type=pro2] .supervisor_wrap {
    padding-left: 0;
    padding-right: 0;
    margin-top: 20px;
  }
}
.supervisor_main {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .supervisor_main {
    display: flex;
    justify-content: space-between;
    margin-top: 56px;
  }
}
@media only screen and (min-width: 901px) {
  .supervisor_image {
    width: 34.7593582888%;
  }
  [data-bursh-type=pro2] .supervisor_image {
    width: 43.6781609195%;
  }
}
.supervisor_image div {
  border-radius: 2px;
  overflow: hidden;
}
@media only screen and (min-width: 901px) {
  .supervisor_content {
    width: 59.9821746881%;
    padding-top: 30px;
  }
  [data-bursh-type=pro2] .supervisor_content {
    width: 51.724137931%;
  }
}
@media only screen and (max-width: 900px) {
  .supervisor_content {
    margin-top: 28px;
  }
}
.supervisor_name span {
  display: block;
}
.supervisor_name span.is-main {
  font-size: 18px;
  letter-spacing: 0.12em;
}
[data-bursh-type=pro2] .supervisor_name span.is-main {
  font-size: 24px;
}
@media only screen and (max-width: 900px) {
  [data-bursh-type=pro2] .supervisor_name span.is-main {
    font-size: 20px;
  }
}
@media only screen and (max-width: 900px) {
  .supervisor_name span.is-main {
    font-size: 16px;
  }
}
@media only screen and (min-width: 901px) {
  .supervisor_name span.is-sub {
    font-size: 11px;
    margin-top: 15px;
  }
}
@media only screen and (max-width: 900px) {
  .supervisor_name span.is-sub {
    font-size: 10px;
    margin-top: 10px;
  }
}
.supervisor_description {
  font-size: 11px;
  line-height: 170%;
  margin-top: 5px;
}
[data-bursh-type=pro2] .supervisor_description {
  font-size: 10px;
  line-height: 180%;
  letter-spacing: 0.12em;
  margin-top: 13px;
}
@media only screen and (max-width: 900px) {
  [data-bursh-type=pro2] .supervisor_description {
    margin-top: 9px;
  }
}
.supervisor_body {
  margin-top: 20px;
}
@media only screen and (max-width: 900px) {
  .supervisor_body {
    margin-top: 20px;
  }
}
.supervisor_body p {
  font-size: 13px;
  line-height: 170%;
  color: #808080;
}
@media only screen and (min-width: 901px) {
  .supervisor_button {
    display: flex;
    justify-content: flex-end;
    margin-top: 52px;
  }
}
@media only screen and (max-width: 900px) {
  .supervisor_button {
    margin-top: 40px;
  }
}
.supervisor_button .buttonFill a {
  width: 222px;
}
.supervisor_textLink {
  margin-top: 20px;
}

.supervisor_section {
  perspective: 1500px;
}
.supervisor_section > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .supervisor_section > * {
  opacity: 1;
  transform: none;
}
.supervisor_section.inView > * {
  opacity: 1;
  transform: none;
}

/** column
/**************************************/
.tecBrushColumn {
  margin-top: 40px;
}
.tecBrushColumn_headline {
  font-size: 12px;
  padding-left: 12px;
  position: relative;
}
.tecBrushColumn_headline::before {
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  border: 1px solid #1A1A1A;
  content: "";
  display: block;
  position: absolute;
}
.tecBrushColumn_wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.tecBrushColumn_item {
  width: 48%;
  background-color: #fff;
  border: 1px solid #F0F0E6;
  border-radius: 4px;
}
@media only screen and (min-width: 901px) {
  .tecBrushColumn_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 2px;
    padding: 14px 1.5% 10px 2.9%;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushColumn_item {
    display: flex;
    flex-direction: column-reverse;
    padding: 20px 4% 20px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushColumn_image {
    width: 40.2777777778%;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushColumn_image {
    width: 29.2307692308vw;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushColumn_content {
    width: 55.5555555556%;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushColumn_content {
    min-height: 100px;
    margin-top: 10px;
  }
}
.tecBrushColumn_title {
  font-size: 13px;
  line-height: 170%;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
.tecBrushColumn_body {
  margin-top: 5px;
}
.tecBrushColumn_body p {
  font-size: 13px;
  line-height: 160%;
}
@media only screen and (max-width: 900px) {
  .tecBrushColumn_body p {
    font-size: 14px;
  }
}

/** care
/**************************************/
@media only screen and (min-width: 901px) {
  .tecBrushCare {
    margin-top: 210px;
    padding-left: 10.4166666667%;
    padding-right: 10.4166666667%;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushCare {
    width: 81.7%;
    margin: 47px auto 0;
  }
}
.tecBrushCare_wrap {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.tecBrushCare_list {
  margin-top: 55px;
}
@media only screen and (max-width: 900px) {
  .tecBrushCare_list {
    margin-top: 22px;
  }
}

@media only screen and (min-width: 901px) {
  .tecBrushCareCard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushCareCard {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushCareCard_image {
    width: 26.5017667845%;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushCareCard_content {
    width: 66.0777385159%;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushCareCard_content {
    margin-top: 30px;
    padding-left: 5%;
  }
}
.tecBrushCareCard_title {
  font-size: 22px;
  position: relative;
}
[data-bursh-type=pro2] .tecBrushCareCard_title {
  font-size: 24px;
}
@media only screen and (max-width: 900px) {
  [data-bursh-type=pro2] .tecBrushCareCard_title {
    font-size: 20px;
  }
}
.tecBrushCareCard_title::before {
  position: absolute;
  left: -20px;
  top: 18px;
  width: 2px;
  height: 2px;
  transform: rotate(45deg);
  border: 1px solid #1A1A1A;
  content: "";
  display: block;
  position: absolute;
}
@media only screen and (max-width: 900px) {
  .tecBrushCareCard_title::before {
    left: -25px;
    top: 15px;
  }
  .featureUse_headline:before{
    top: 17px;
  }
}
.tecBrushCareCard_body {
  margin-top: 10px;
}
@media only screen and (max-width: 900px) {
  .tecBrushCareCard_body {
    margin-top: 15px;
  }
}
.tecBrushCareCard_body p {
  font-size: 16px;
  line-height: 200%;
}
@media only screen and (max-width: 900px) {
  .tecBrushCareCard_body p {
    font-size: 14px;
  }
}
[data-bursh-type=pro2] .tecBrushCareCard_body p {
  font-size: 15px;
}
@media only screen and (max-width: 900px) {
  [data-bursh-type=pro2] .tecBrushCareCard_body p {
    font-size: 14px;
    line-height: 180%;
  }
}
.tecBrushCareCard_body p sup {
  font-size: 10px;
}
@media only screen and (max-width: 900px) {
  .tecBrushCareCard_body p sup {
    font-size: 9px;
  }
}

/** five
/**************************************/
.tecBrushFive {
  position: relative;
  margin-top: 400px;
}
@media only screen and (max-width: 900px) {
  .tecBrushFive {
    margin-top: 50px;
  }
  [data-bursh-type=std] .tecBrushFive {
    padding-bottom: 60px;
  }
  [data-bursh-type=pro] .tecBrushFive {
    padding-bottom: 1px;
  }
}
.tecBrushFive_hero {
  width: 89.5833333333vw;
  height: 540px;
  position: absolute;
  right: 0;
  top: -240px;
  overflow: hidden;
  border-radius: 4px 0 0 4px;
}
@media only screen and (max-width: 900px) {
  .tecBrushFive_hero {
    width: 90.7692307692vw;
    height: 358px;
    top: -75px;
  }
  [data-bursh-type=pro2] .tecBrushFive_hero {
    height: 66.6666666667vw;
  }
}
.tecBrushFive_hero picture {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.tecBrushFive_hero picture img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.tecBrushFive_wrap {
  max-width: 1052px;
  padding: 370px 0 0;
  margin: 0 auto;
}
@media only screen and (max-width: 900px) {
  .tecBrushFive_wrap {
    padding-left: 9.4%;
    padding-right: 9.4%;
  }
  [data-bursh-type=pro2] .tecBrushFive_wrap {
    padding-top: 220px;
    padding-bottom: 30px;
  }
}
.tecBrushFive_content {
  margin-top: 60px;
}

/** card v1
/**************************************/
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard {
    display: flex;
    justify-content: space-between;
    margin-bottom: 42px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard {
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard_image {
    width: 22.2222222222%;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard_image {
    width: 53.8461538462vw;
    margin-left: auto;
    margin-right: auto;
  }
}
.tecBrushFiveCard_content {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard_content {
    width: 60.6995884774%;
    margin-top: 5px;
  }
  .is-wide .tecBrushFiveCard_content {
    width: 56.5843621399%;
    margin-top: 0;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard_content {
    margin-top: 30px;
    padding-left: 75px;
  }
}
.tecBrushFiveCard_label {
  font-size: 18px;
  position: absolute;
  font-family: neue-haas-grotesk-display, fot-cezanne-pron, sans-serif;
}
@media only screen and (min-width: 901px) {
  .is-wide .tecBrushFiveCard_label {
    font-size: 15px;
    left: -170px;
  }
}
@media only screen and (max-width: 900px) {
  .is-wide .tecBrushFiveCard_label {
    font-size: 18px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard_label {
    left: -130px;
    top: -2px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard_label {
    left: 0;
    top: 0;
  }
}
.tecBrushFiveCard_label::before {
  content: "";
  display: block;
  background-color: #ccc;
  position: absolute;
}
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard_label::before {
    width: 1px;
    height: 12px;
    left: 100px;
    top: 3px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard_label::before {
    right: -18px;
    top: 8px;
    width: 12px;
    height: 1px;
  }
}
@media only screen and (min-width: 901px) {
  .is-wide .tecBrushFiveCard_label::before {
    left: 134px;
  }
}
@media only screen and (max-width: 900px) {
  .is-wide .tecBrushFiveCard_label::before {
    right: -24px;
  }
}
.tecBrushFiveCard_title {
  font-size: 15px;
  position: relative;
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard_title {
    font-size: 18px;
  }
}
.tecBrushFiveCard_title + .tecBrushFiveCard_body {
  margin-top: 17px;
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard_title + .tecBrushFiveCard_body {
    margin-top: 15px;
  }
}
.tecBrushFiveCard_label + .tecBrushFiveCard_body {
  margin-top: -6px;
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard_label + .tecBrushFiveCard_body {
    padding-top: 30px;
  }
}
.tecBrushFiveCard_body p {
  font-size: 14px;
  line-height: 180%;
}

/** card v2
/**************************************/
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard2 {
    margin-bottom: 48px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard2 {
    margin-bottom: 23px;
    position: relative;
  }
}
.tecBrushFiveCard2_head {
  display: flex;
  align-items: center;
  width: 100%;
}
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard2_head {
    justify-content: space-between;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard2_image {
    width: 20%;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard2_image {
    width: 27.6923076923vw;
  }
}
.tecBrushFiveCard2_content {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard2_content {
    width: 67.6%;
    margin-top: 5px;
  }
  .is-wide .tecBrushFiveCard2_content {
    width: 59.5%;
    margin-top: 0;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard2_content {
    padding-left: 25px;
  }
}
.tecBrushFiveCard2_label {
  font-size: 18px;
  font-family: neue-haas-grotesk-display, fot-cezanne-pron, sans-serif;
}
@media only screen and (min-width: 901px) {
  .is-wide .tecBrushFiveCard2_label {
    left: -170px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard2_label {
    left: -84px;
    top: 1px;
    position: absolute;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard2_label {
    font-size: 16px;
  }
}
.tecBrushFiveCard2_label::before {
  content: "";
  display: block;
  background-color: #ccc;
  position: absolute;
}
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard2_label::before {
    width: 2px;
    height: 12px;
    left: 63px;
    top: 3px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard2_label::before {
    display: none;
  }
}
@media only screen and (min-width: 901px) {
  .is-wide .tecBrushFiveCard2_label::before {
    left: 146px;
  }
}
@media only screen and (max-width: 900px) {
  .is-wide .tecBrushFiveCard2_label::before {
    right: -24px;
  }
}
.tecBrushFiveCard2_title {
  font-size: 18px;
  position: relative;
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard2_title {
    font-size: 16px;
    margin-top: 11px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushFiveCard2_body {
    margin-top: 15px;
  }
  .is-wide .tecBrushFiveCard2_body {
    margin-top: 0;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushFiveCard2_body {
    margin-top: 10px;
  }
}
.tecBrushFiveCard2_body p {
  line-height: 180%;
  font-size: 13px;
  color: #808080;
  letter-spacing: 0.12em;
}

/** pro function
/**************************************/
.tecBrushProFunction {
  background-color: #405260;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 901px) {
  .tecBrushProFunction {
    padding: 80px 6% 65px;
    margin-top: 100px;
    max-width: 1140px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushProFunction {
    padding: 72px 6% 35px;
    margin-top: 10px;
    width: 91.7948717949vw;
  }
}
.tecBrushProFunction * {
  color: #fff;
}
.tecBrushProFunction_label {
  font-size: 11px;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 37px;
  background-color: #1a1a1a;
  padding: 2px 23px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
  letter-spacing: 0.08em;
  font-weight: bold;
}
.tecBrushProFunction_title {
  font-size: 24px;
  line-height: 180%;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 900px) {
  .tecBrushProFunction_title {
    padding-left: 5%;
  }
}
.tecBrushProFunction_list {
  margin-top: 50px;
}

@media only screen and (min-width: 901px) {
  .tecBrushProFunctionCard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushProFunctionCard {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushProFunctionCard_image {
    width: 22.2222222222%;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushProFunctionCard_image img {
    width: 100%;
    height: auto;
  }
}
.tecBrushProFunctionCard_image div {
  overflow: hidden;
  border-radius: 2px;
}
@media only screen and (min-width: 901px) {
  .tecBrushProFunctionCard_content {
    width: 73.8683127572%;
  }
}
@media only screen and (min-width: 901px) {
  .tecBrushProFunctionCard_body {
    display: flex;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushProFunctionCard_body {
    margin-top: 20px;
  }
}
.tecBrushProFunctionCard_body dt {
  font-size: 18px;
  position: relative;
}
@media only screen and (min-width: 901px) {
  .tecBrushProFunctionCard_body dt {
    width: 170px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushProFunctionCard_body dt {
    width: fit-content;
  }
  .tecBrushProFunctionCard_body dt::before {
    content: "";
    display: block;
    width: 12px;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    right: -24px;
    top: 9px;
  }
}
.tecBrushProFunctionCard_body dd {
  font-size: 14px;
  line-height: 180%;
  position: relative;
}
@media only screen and (min-width: 901px) {
  .tecBrushProFunctionCard_body dd {
    width: calc(100% - 170px);
  }
  .tecBrushProFunctionCard_body dd::before {
    content: "";
    display: block;
    width: 12px;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    left: -28px;
    top: 9px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBrushProFunctionCard_body dd {
    margin-top: 10px;
  }
}

.featureFaq {
  max-width: 1440px;
}
@media only screen and (min-width: 901px) {
  .featureFaq {
    margin: 165px auto 0;
  }
}
@media only screen and (max-width: 900px) {
  .featureFaq {
    margin: 120px auto 0;
  }
}
@media only screen and (min-width: 901px) {
  .featureFaq_wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 7.9166666667%;
  }
}
@media only screen and (max-width: 900px) {
  .featureFaq_wrap {
    padding: 0 9.2307692308%;
  }
}
@media only screen and (min-width: 901px) {
  .featureFaq_headline {
    width: 32%;
  }
}
@media only screen and (min-width: 901px) {
  .featureFaq_content {
    width: 65.4%;
  }
  .menColumn .featureFaq_content {
    width: 100%;
    max-width: none;
    margin-top: 50px;
  }
}
@media only screen and (max-width: 900px) {
  .featureFaq_content {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 901px) {
  .featureFaq_head {
    display: flex;
    justify-content: space-between;
  }
}
.featureFaq_menu {
  display: flex;
}
.featureSpec_main .featureFaq_menu {
  margin-bottom: 40px;
}
@media only screen and (max-width: 900px) {
  .featureSpec_main .featureFaq_menu {
    margin-top: 45px;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_main .featureFaq_menu > li {
    width: 49%;
  }
}
.featureSpec_main .featureFaq_menu > li > a {
  border: 1px solid #ccc;
}
.featureSpec_main .featureFaq_menu > li > a::before {
  display: none;
}
.featureSpec_main .featureFaq_menu > li.is-current > a::before {
  display: block;
}
@media only screen and (max-width: 900px) {
  .featureFaq_menu[data-newline=mobile-2] > li > a {
    height: 50px;
    border-radius: 25px;
  }
  .featureFaq_menu[data-newline=mobile-2] > li > a span {
    font-size: 13px;
    letter-spacing: 0;
    line-height: 140%;
  }
}
.featureFaq_menu > li:nth-child(1) {
  margin-right: 12px;
}
.featureFaq_menu > li.is-current > a {
  pointer-events: none;
  background-color: #1A1A1A;
}
.featureFaq_menu > li.is-current > a > span {
  color: #fff;
}
.featureFaq_menu > li.is-current > a:before {
  border-top-color: #1A1A1A;
}
.featureFaq_menu > li > a {
  background-color: #F8F8F3;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  position: relative;
  border-radius: 16px;
  cursor: pointer;
}
@media only screen and (max-width: 900px) {
  .featureFaq_menu > li > a {
    height: 30px;
    border-radius: 15px;
  }
  .menColumn .featureFaq_menu > li > a {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.featureFaq_menu > li > a > span {
  font-size: 16px;
  color: #808080;
}
@media only screen and (max-width: 900px) {
  .featureFaq_menu > li > a > span {
    font-size: 14px;
  }
  .menColumn .featureFaq_menu > li > a > span {
    font-size: 13px;
  }
}
.featureFaq_menu > li > a:before {
  content: "";
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: #F8F8F3 transparent transparent transparent;
  display: block;
  position: absolute;
  z-index: 0;
  left: calc(50% - 6px);
  bottom: -6px;
}
.featureFaq_section {
  display: none;
}
@media only screen and (min-width: 901px) {
  .featureFaq_section {
    justify-content: space-between;
    margin-top: 50px;
  }
}
@media only screen and (max-width: 900px) {
  .featureFaq_section {
    margin-top: 32px;
  }
}
[data-faq-content="1"] .featureFaq_section:nth-child(1) {
  animation: fadeIn ease-out 1.2s forwards;
}
@media only screen and (min-width: 901px) {
  [data-faq-content="1"] .featureFaq_section:nth-child(1) {
    display: flex;
  }
}
@media only screen and (max-width: 900px) {
  [data-faq-content="1"] .featureFaq_section:nth-child(1) {
    display: block;
  }
}
[data-faq-content="2"] .featureFaq_section:nth-child(2) {
  animation: fadeIn ease-out 1.2s forwards;
}
@media only screen and (min-width: 901px) {
  [data-faq-content="2"] .featureFaq_section:nth-child(2) {
    display: flex;
  }
}
@media only screen and (max-width: 900px) {
  [data-faq-content="2"] .featureFaq_section:nth-child(2) {
    display: block;
  }
}
@media only screen and (min-width: 901px) {
  .featureFaq_column {
    width: 48%;
  }
}
@media only screen and (max-width: 900px) {
  .featureFaq .textLink {
    justify-content: flex-end;
    margin-top: 40px;
  }
}

/** card
/**************************************/
.featureFaqCard {
  border-top: 1px solid rgba(128, 128, 128, 0.25);
  position: relative;
  margin-bottom: 38px;
}
@media only screen and (max-width: 900px) {
  .featureFaqCard {
    margin-bottom: 25px;
  }
}
.featureFaqCard:before {
  width: 12px;
  height: 1px;
  position: absolute;
  left: 0;
  top: -1px;
  display: block;
  content: "";
  background-color: #1A1A1A;
}
.featureFaqCard_question {
  display: flex;
  justify-content: space-between;
  padding: 23px 0 12px;
  position: relative;
  cursor: pointer;
}
@media only screen and (min-width: 901px) {
  .featureFaqCard_title {
    padding-right: 30px;
  }
}
.featureFaqCard_title span {
  font-size: 16px;
  line-height: 170%;
}
.featureFaqCard_trigger {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1A1A1A;
}
.featureFaqCard_trigger:before {
  content: "\ea02";
}
@media only screen and (min-width: 901px) {
  .featureFaqCard_trigger {
    margin-top: 3px;
  }
}
@media only screen and (max-width: 900px) {
  .featureFaqCard_trigger {
    margin-top: 2px;
  }
}
[data-faq-state=open] .featureFaqCard_trigger {
  background-color: #1A1A1A;
}
[data-faq-state=open] .featureFaqCard_trigger:before {
  color: #fff;
  transform: rotateX(180deg);
}
.featureFaqCard_trigger:before {
  font-size: 8px;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
  margin-left: 1px;
}
.featureFaqCard_answer {
  overflow: hidden;
  height: 0;
}
.featureFaqCard_body p {
  font-size: 13px;
  line-height: 170%;
}

/** animation
/**************************************/
.featureFaq {
  perspective: 500px;
}
.featureFaq_wrap {
  transition: 2s cubic-bezier(0.19, 1, 0.22, 1);
  transform: rotateX(-2deg) translateY(30px) scale(0.95);
  opacity: 0;
}
.inView .featureFaq_wrap {
  opacity: 1;
  transform: none;
}

/** hover
/**************************************/
.featureFaq_menu li a {
  transition: 2s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (min-width: 901px) {
  .featureFaq_menu li a:hover {
    opacity: 0.6;
  }
}
.featureFaq_menu li a::before {
  transition: 2s cubic-bezier(0.19, 1, 0.22, 1);
}

@media only screen and (min-width: 901px) {
  .featureFaqCard_trigger {
    transition: 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .featureFaqCard_trigger:before {
    transition: 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  }
}
.featureFaqCard_question:hover [class*=_trigger] {
  background-color: #1A1A1A;
}
@media only screen and (min-width: 901px) {
  .featureFaqCard_question:hover [class*=_trigger]:before {
    color: #fff;
  }
}

/** luna
/**************************************/
[data-page=luna] .featureHeadline span {
  font-size: 22px;
  letter-spacing: 0.18em;
}
@media only screen and (max-width: 900px) {
  [data-page=luna] .featureHeadline span {
    font-size: 18px;
  }
}
[data-page=luna] .featureFaq {
  margin-top: 100px;
  max-width: 1296px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 902px) and (max-width: 1439px) {
  [data-page=luna] .featureFaq {
    padding-left: 5%;
    padding-right: 5%;
    max-width: 1440px;
  }
}
@media only screen and (max-width: 900px) {
  [data-page=luna] .featureFaq {
    margin-top: 53px;
  }
}
[data-page=luna] .featureFaq_wrap {
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
  padding: 0 7.2% 96px;
}
@media only screen and (max-width: 900px) {
  [data-page=luna] .featureFaq_wrap {
    padding: 0 11% 38px;
  }
}
[data-page=luna] .featureFaq_section {
  margin-top: 40px;
}
@media only screen and (max-width: 900px) {
  [data-page=luna] .featureFaq_section {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 901px) {
  [data-page=luna] .featureFaq_headline {
    width: 25.2252252252%;
  }
}
@media only screen and (min-width: 901px) {
  [data-page=luna] .featureFaq_content {
    width: 74.7747747748%;
  }
}
@media only screen and (max-width: 900px) {
  [data-page=luna] .featureFaq_content {
    margin-top: 40px;
  }
}
[data-page=luna] .featureFaq_menu > li.is-current > a {
  background-color: #917A64;
}
[data-page=luna] .featureFaq_menu > li.is-current > a > span {
  color: #fff;
}
[data-page=luna] .featureFaq_menu > li.is-current > a::before {
  border-top-color: #917A64;
  opacity: 1;
}
[data-page=luna] .featureFaq_menu > li > a {
  background-color: rgba(255, 255, 255, 0.3);
}
[data-page=luna] .featureFaq_menu > li > a > span {
  color: #917A64;
}
[data-page=luna] .featureFaq_menu > li > a::before {
  opacity: 0;
}
[data-page=luna] .featureFaqCard {
  border-top-color: rgba(128, 128, 128, 0.25);
  margin-bottom: 19px;
}
@media only screen and (max-width: 900px) {
  [data-page=luna] .featureFaqCard {
    margin-bottom: 0;
  }
}
[data-page=luna] .featureFaqCard::before {
  display: none;
}
[data-page=luna] .featureFaqCard_question {
  padding: 19px 4% 0;
}
@media only screen and (max-width: 900px) {
  [data-page=luna] .featureFaqCard_question {
    padding: 15px 0;
  }
}
[data-page=luna] .featureFaqCard_body {
  padding: 20px 4% 0;
  color: #727272;
}
@media only screen and (max-width: 900px) {
  [data-page=luna] .featureFaqCard_body {
    padding: 10px 0 20px;
  }
}
[data-page=luna] .featureFaqCard_body span {
  font-size: 10px;
  color: #9D9D9D;
}
[data-page=luna] .featureFaqCard_icon {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  position: relative;
}
[data-page=luna] .featureFaqCard_icon svg {
  width: 16px;
  height: 16px;
}
[data-page=luna] .featureFaqCard_icon svg.is-close {
  position: absolute;
  left: 0;
  top: 0;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
  transform: rotate(-90deg);
}
[data-page=luna] .featureFaqCard[data-faq-state=open] .featureFaqCard_icon svg.is-close {
  opacity: 1;
  transform: rotate(0);
}
[data-page=luna] .featureFaqCard[data-faq-state=open] .featureFaqCard_icon svg.is-open {
  opacity: 0;
}
[data-page=luna] .featureFaqCard_title span {
  font-size: 15px;
}
@media only screen and (max-width: 900px) {
  [data-page=luna] .featureFaqCard_title span {
    font-size: 14px;
  }
}

.featureSpec {
  margin-top: 120px;
  padding: 120px 0 90px;
  background-color: #F8F8F3;
  overflow: hidden;
}
.featureSpec[data-spec-products=luna] {
  background-color: transparent;
  margin-top: 0;
  padding-top: 80px;
}
@media only screen and (max-width: 900px) {
  .featureSpec[data-spec-products=luna] {
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    padding-top: 40px;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec {
    margin-top: 80px;
    padding: 60px 0 70px;
  }
}
.featureSpec_container {
  max-width: 1440px;
  margin: 0 auto;
}
[data-spec-products=luna] .featureSpec_wrap {
  padding-left: 4.2%;
  padding-right: 4.2%;
}
@media only screen and (min-width: 901px) {
  .featureSpec_image {
    display: flex;
    justify-content: flex-end;
  }
  [data-spec-products=brush_teaser] .featureSpec_image {
    display: block;
  }
}
@media only screen and (min-width: 901px) {
  [data-spec-products=brush_pro] .featureSpec_image {
    justify-content: flex-start;
  }
}
@media only screen and (min-width: 901px) {
  [data-spec-products=brush_pro] .featureSpec_image > div {
    width: 54.5%;
    max-width: 784px;
    margin-left: 24%;
  }
}
@media only screen and (max-width: 900px) {
  [data-spec-products=brush_pro] .featureSpec_image > div {
    width: 112%;
    padding-left: 8%;
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 901px) {
  [data-spec-products=brush_pro2] .featureSpec_image {
    justify-content: flex-start;
  }
}
@media only screen and (min-width: 901px) {
  [data-spec-products=brush_pro2] .featureSpec_image > div {
    width: 54.5%;
    max-width: 784px;
    margin-left: 27.5%;
  }
}
@media only screen and (max-width: 900px) {
  [data-spec-products=brush_pro2] .featureSpec_image > div {
    width: 112%;
    padding-left: 8%;
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_image > div {
    width: 80%;
    max-width: 960px;
    margin-right: 7%;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_image > div {
    width: 92%;
  }
  [data-page=bfs] .featureSpec_image > div {
    width: 100%;
    padding-left: 10%;
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_content {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 7.9166666667%;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_content {
    padding: 0 9.2307692308%;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_brush {
    padding: 0 7.9166666667%;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_brush {
    padding-left: 8%;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_brush > div {
    width: 540px;
    margin-left: 23%;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_cavitation > div {
    width: 330px;
    margin: 70px 0 90px 25%;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_cavitation > div {
    width: 70%;
    margin: 0 0 70px 22%;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_botanical > div {
    width: 268px;
    margin: 0 0 90px 25%;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_botanical > div {
    width: 49%;
    margin: 0 0 30px 8%;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_luna > div {
    width: 660px;
    margin: 0 0 40px 26.4%;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_luna > div {
    margin: 0 0 30px 8%;
    width: 82%;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_rin > div {
    width: 583px;
    margin: 0 0 60px 39.8%;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_rin > div {
    margin: 0 0 30px 19.1%;
    width: 342px;
  }
}
.featureSpec_headline {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .featureSpec_headline {
    width: 25%;
  }
}
.featureSpec_headline .buttonFill {
  margin-top: 40px;
}
@media only screen and (max-width: 900px) {
  .featureSpec_headline .buttonFill {
    margin-top: 20px;
    position: absolute;
    right: 0;
    top: -33px;
    width: 196px;
  }
}
.featureSpec_headline .buttonFill a {
  max-width: 196px;
}
@media only screen and (min-width: 901px) and (max-width: 1399px) {
  .featureSpec_headline .buttonFill a {
    width: 90%;
  }
  .featureSpec_headline .buttonFill a span {
    font-size: 12px;
  }
  .featureSpec_headline .buttonFill a::before {
    font-size: 11px;
    right: 5px;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_headline .buttonFill a span {
    font-size: 14px;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_main {
    width: 95%;
  }
}
.featureSpec_textLink {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
@media only screen and (max-width: 900px) {
  .featureSpec_textLink {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_switch {
    height: 480px;
  }
}
@media only screen and (min-width: 901px) and (max-width: 1439px) {
  .featureSpec_switch {
    height: 33.3333333333vw;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_switch {
    height: 89.7435897436vw;
  }
}
[data-spec-products=brush_std] .featureSpec_switch > div {
  display: none;
}
[data-spec-products=brush_std] .featureSpec_switch > div.is-current {
  display: block;
  animation: fadeIn ease-out 1s forwards;
}
@media only screen and (min-width: 901px) {
  [data-spec-products=brush_std] .featureSpec_switch > div[data-spec-product=std] {
    width: 36.6%;
    margin-left: 27%;
  }
}
@media only screen and (max-width: 900px) {
  [data-spec-products=brush_std] .featureSpec_switch > div[data-spec-product=std] {
    width: 116%;
    padding-left: 20%;
  }
}
@media only screen and (min-width: 901px) {
  [data-spec-products=brush_std] .featureSpec_switch > div[data-spec-product=pro] {
    width: 54.5%;
    max-width: 784px;
    margin-left: 24%;
  }
}
@media only screen and (max-width: 900px) {
  [data-spec-products=brush_std] .featureSpec_switch > div[data-spec-product=pro] {
    width: 135%;
    padding-left: 1%;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_button {
    margin-top: 43px;
    width: 67%;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_button {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpec_button .buttonFrame + .buttonFrame {
    margin-top: 8px;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpec_button .buttonFrame {
    width: 49.5%;
  }
}

/** list
/**************************************/
@media only screen and (min-width: 901px) {
  .featureSpecList {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpecList {
    margin-top: 40px;
  }
  [data-spec-products=luna] .featureSpecList {
    margin-top: 20px;
  }
}
.featureSpecList[data-spec-section] {
  display: none;
}
@media only screen and (min-width: 901px) {
  .featureSpecList[data-spec-section].is-current {
    display: flex;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpecList[data-spec-section].is-current {
    display: block;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpecList dl {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 48%;
  }
}
.featureSpecList dl dt, .featureSpecList dl dd {
  font-size: 14px;
  line-height: 170%;
  padding: 10px 0 28px;
}
@media only screen and (min-width: 901px) {
  [data-spec-products=luna] .featureSpecList dl dt, [data-spec-products=luna] .featureSpecList dl dd {
    padding-bottom: 9px;
    padding-top: 13px;
  }
}
@media only screen and (max-width: 900px) {
  [data-spec-products=luna] .featureSpecList dl dt, [data-spec-products=luna] .featureSpecList dl dd {
    font-size: 13px;
  }
}
.featureSpecList dl dt {
  border-top: 1px solid #1A1A1A;
  position: relative;
}
[data-spec-products=luna] .featureSpecList dl dt {
  border-top-color: rgba(128, 128, 128, 0.25);
}
@media only screen and (max-width: 900px) {
  [data-spec-products=luna] .featureSpecList dl dt {
    color: #1A1A1A;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpecList dl dt {
    width: 25%;
    padding-left: 2%;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpecList dl dt {
    border-top-color: rgba(128, 128, 128, 0.25);
    padding: 15px 5px 0;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpecList dl dt:before {
    content: "";
    display: block;
    width: 26.4150943396%;
    height: 1px;
    background-color: #1A1A1A;
    left: 0;
    top: -1px;
    position: absolute;
    z-index: 1;
  }
  [data-spec-products=luna] .featureSpecList dl dt:before {
    display: none;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpecList dl dd {
    width: 75%;
    padding-left: 12%;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
  }
}
@media only screen and (max-width: 900px) {
  .featureSpecList dl dd {
    padding: 2px 5px 16px;
  }
}
.featureSpecList dl dd sup {
  font-size: 60%;
}
.featureSpecList dl dd span {
  font-size: 11px;
  letter-spacing: 0;
}
@media only screen and (max-width: 900px) {
  .featureSpecList dl dd span {
    font-size: 10px;
  }
}
.featureSpecList dl dd span.is-note {
  font-size: 10px;
  color: #808080;
  line-height: 180%;
  display: block;
}

/** banner
/**************************************/
.featureSpecBanner {
  margin-top: 70px;
}
.featureSpecBanner_link {
  margin: 0 0 0 auto;
  overflow: hidden;
  border-radius: 2px;
  background-color: #1A1A1A;
}
@media only screen and (min-width: 901px) {
  .featureSpecBanner_link {
    height: 150px;
    width: 623px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpecBanner_link {
    display: block;
  }
}
@media only screen and (min-width: 901px) {
  .featureSpecBanner_content {
    width: 46.0674157303%;
    padding: 0 5% 0 5%;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpecBanner_content {
    padding: 20px 5.5% 25px;
  }
}
.featureSpecBanner_title {
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0.12em;
  color: #fff;
}
@media only screen and (max-width: 900px) {
  .featureSpecBanner_title {
    font-size: 16px;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpecBanner_title br {
    display: none;
  }
}
.featureSpecBanner_textLink {
  margin-top: 15px;
}
@media only screen and (max-width: 900px) {
  .featureSpecBanner_textLink {
    margin-top: 7px;
  }
}
.featureSpecBanner_image {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .featureSpecBanner_image {
    width: 53.9325842697%;
    height: 150px;
  }
}
@media only screen and (max-width: 900px) {
  .featureSpecBanner_image {
    height: 176px;
  }
}
.featureSpecBanner_image picture {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.featureSpecBanner_image picture img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/** animation
/**************************************/
.featureSpec {
  perspective: 500px;
}
.featureSpec[data-js=inview] .featureSpec_container {
  transition: 2s cubic-bezier(0.19, 1, 0.22, 1);
  transform: rotateX(-2deg) translateY(30px) scale(0.95);
  opacity: 0;
}
.featureSpec.inView .featureSpec_container {
  opacity: 1;
  transform: none;
}
.featureSpecBanner {
  animation: fadeIn ease-out 1.2s forwards;
}
.featureSpecBanner.is-hidden {
  display: none;
}

.botanicalBanner {
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 901px) {
  .botanicalBanner {
    max-width: 1210px;
    margin: 160px auto 0;
    padding: 90px 8.3% 75px;
  }
}
@media only screen and (max-width: 900px) {
  .botanicalBanner {
    padding: 72px 0 270px;
    margin-top: 60px;
  }
  .botanicalBanner[data-banner-id=mask] {
    padding: 0 0 70px;
    height: 196.1538461538vw;
    width: 91.7948717949vw;
    margin-left: auto;
    margin-right: auto;
  }
}
.botanicalBanner + .botanicalBanner {
  margin-top: 64px;
}
.botanicalBanner[data-banner-id=mask] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.botanicalBanner_background picture {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.botanicalBanner_background picture img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.botanicalBanner_background picture img {
  object-position: 50% 100%;
}
.botanicalBanner_content {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 901px) {
  .botanicalBanner_content {
    width: 47.9338842975%;
  }
}
@media only screen and (max-width: 900px) {
  .botanicalBanner_content {
    width: 81.6%;
    margin-left: auto;
    margin-right: auto;
  }
  [data-banner-id=mask] .botanicalBanner_content {
    width: 88.8%;
  }
}
.botanicalBanner_title {
  font-size: 42px;
  line-height: 150%;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 900px) {
  .botanicalBanner_title {
    font-size: 32px;
  }
}
.botanicalBanner_tag {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}
@media only screen and (max-width: 900px) {
  .botanicalBanner_tag {
    margin-top: 20px;
  }
}
.botanicalBanner_tag li {
  margin: 0 9px 8px 0;
}
.botanicalBanner_tag li span {
  display: block;
  font-size: 14px;
  background-color: #fff;
  height: 20px;
  border-radius: 10px;
  background-color: rgba(177, 191, 203, 0.2);
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1;
}
@media only screen and (max-width: 900px) {
  .botanicalBanner_tag li span {
    font-size: 13px;
  }
}
[data-banner-id=mask] .botanicalBanner_tag li span {
  background-color: rgba(255, 255, 255, 0.34);
}
.botanicalBanner_tag li span sup {
  font-size: 50%;
  margin-top: -5px;
}
.botanicalBanner_body {
  margin-top: 30px;
}
@media only screen and (max-width: 900px) {
  .botanicalBanner_body {
    margin-top: 20px;
  }
}
.botanicalBanner_body p {
  font-size: 12px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .botanicalBanner_body p {
    font-size: 13px;
  }
}
.botanicalBanner_body p sup {
  font-size: 60%;
}
.botanicalBanner .textLink {
  margin-top: 25px;
}
@media only screen and (max-width: 900px) {
  .botanicalBanner .textLink {
    margin-top: 20px;
  }
}

@media only screen and (min-width: 901px) {
  .________tecSection[data-section-format=wrap] {
    margin: 140px auto 0;
    max-width: 1440px;
  }
  .tecBackground_image + .________tecSection[data-section-format=wrap] {
    margin-top: -60px;
  }
}
@media only screen and (max-width: 900px) {
  .________tecSection[data-section-format=wrap] {
    width: 81.5384615385%;
    margin: 70px auto 0;
  }
}
@media only screen and (max-width: 900px) {
  .________tecSection {
    margin: 15px auto;
  }
}
@media only screen and (min-width: 901px) {
  [data-section-format=wrap] .________tecSection_wrap {
    padding-left: 5.5555555556%;
    padding-right: 5.5555555556%;
  }
}
@media only screen and (min-width: 901px) {
  .tecBeforeAfter {
    padding: 140px 10.4166666667% 0;
  }
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfter {
    padding: 80px 9.2307692308% 20px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBeforeAfter_wrap {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }
}
@media only screen and (min-width: 901px) {
  .tecBeforeAfter_headline {
    width: 29.4736842105%;
  }
}
@media only screen and (min-width: 901px) {
  .tecBeforeAfter_content {
    width: 70.5263157895%;
    padding-top: 35px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfter_content {
    margin-top: 25px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfter_content .moduleBody p br, .tecBeforeAfter_content .explainList_body p br, .tecBeforeAfter_content .tecExplain_body p br, .tecBeforeAfter_content .tecBeforeAfterHead_body p br {
    display: none;
  }
}
.tecBeforeAfter_section {
  margin-top: 60px;
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfter_section {
    margin-top: 40px;
  }
}
.tecBeforeAfter_label {
  margin-top: 20px;
}
.tecBeforeAfter_note {
  margin-top: 30px;
}
.tecBeforeAfter_note dt, .tecBeforeAfter_note dd {
  font-size: 12px;
  line-height: 200%;
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfter_note dt, .tecBeforeAfter_note dd {
    line-height: 170%;
  }
}
.tecBeforeAfter dd {
  margin-top: 10px;
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfter dd {
    margin-top: 5px;
  }
}

/** head
/**************************************/
.tecBeforeAfterHead {
  margin: 24px 0 40px;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfterHead {
    margin: 18px 0 25px;
  }
}
.tecBeforeAfterHead_label {
  width: 48px;
  margin: 5px 15px 0 0;
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfterHead_label {
    margin-right: 10px;
    margin-top: 3px;
  }
}
.tecBeforeAfterHead_label span {
  height: 18px;
  border-radius: 9px;
  border: 1px solid #1A1A1A;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  line-height: 1.2;
  font-size: 12px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfterHead_label span {
    line-height: 1.3;
  }
}
.tecBeforeAfterHead_content {
  width: calc(100% - 50px);
}
.tecBeforeAfterHead_title {
  font-size: 16px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfterHead_title {
    font-size: 14px;
  }
}
.tecBeforeAfterHead_body {
  margin-top: 5px;
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfterHead_body {
    margin-left: -45px;
    width: calc(100% + 45px);
  }
}
.tecBeforeAfterHead_body sup {
  font-size: 8px !important;
}

/** card
/**************************************/
.tecBeforeAfterCard {
  background-color: #F8F8F3;
  border-radius: 4px;
  margin-bottom: 24px;
}
@media only screen and (min-width: 901px) {
  .tecBeforeAfterCard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 6.2189054726%;
  }
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfterCard {
    padding: 20px 5.6603773585% 18px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBeforeAfterCard_image {
    width: 64.7727272727%;
  }
}
@media only screen and (min-width: 901px) {
  .tecBeforeAfterCard_content {
    width: 28.4090909091%;
  }
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfterCard_content {
    margin-top: 15px;
  }
}
.tecBeforeAfterCard_body p {
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.12em;
}
.tecBeforeAfterCard_body p span {
  font-size: 10px;
}

/** animation
/**************************************/
.tecBeforeAfter_headline {
  opacity: 0;
  transition: 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateY(30px);
}
.inView .tecBeforeAfter_headline {
  opacity: 1;
  transform: none;
}
.tecBeforeAfter_content {
  opacity: 0;
  transition: 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.inView .tecBeforeAfter_content {
  opacity: 1;
  transform: none;
}

.tecScene {
  margin-top: 140px;
}
@media only screen and (max-width: 900px) {
  .tecScene {
    margin-top: 120px;
  }
}
.tecScene#secene2 {
  margin-top: 188px;
}
@media only screen and (max-width: 900px) {
  .tecScene#secene2 {
    margin-top: 140px;
  }
}
.tecScene_wrap {
  padding: 80px 0 100px;
}
@media only screen and (max-width: 900px) {
  .tecScene_wrap {
    padding: 50px 0 80px;
  }
}
.tecScene .pin-spacer {
  z-index: 5 !important;
}
.tecScene .pin-spacer {
  pointer-events: none;
}

/** head
/**************************************/
.tecSceneHead {
  text-align: center;
}
@media only screen and (max-width: 900px) {
  .tecSceneHead {
    padding-left: 9.2307692308%;
    padding-right: 9.2307692308%;
  }
}
.tecSceneHead_headline span {
  font-size: 28px;
  line-height: 180%;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .tecSceneHead_headline span {
    font-size: 20px;
  }
}
.tecSceneHead_lead {
  margin-top: 20px;
}
@media only screen and (max-width: 900px) {
  .tecSceneHead_lead {
    margin-top: 10px;
  }
}
.tecSceneHead_lead span {
  font-size: 20px;
  line-height: 180%;
  letter-spacing: 0.12em;
}
.tecSceneHead_body {
  margin-top: 12px;
}
@media only screen and (max-width: 900px) {
  .tecSceneHead_body {
    margin-top: 16px;
  }
}
.tecSceneHead_body p {
  font-size: 14px;
  line-height: 180%;
}

/** Menu
/**************************************/
.tecSceneMenu {
  margin-top: 40px;
  position: absolute;
  width: 100%;
}
@media only screen and (max-width: 900px) {
  .tecSceneMenu {
    margin-top: 25px;
  }
}
.tecSceneMenu_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
@media only screen and (max-width: 900px) {
  .tecSceneMenu_wrap {
    padding-left: 9.2307692308%;
    padding-right: 9.2307692308%;
  }
}
.tecSceneMenu_current, [data-current-step="2-3"] #secene2 .tecSceneMenu_item:nth-child(3) a, [data-current-step="2-2"] #secene2 .tecSceneMenu_item:nth-child(2) a, [data-current-step="2-1"] #secene2 .tecSceneMenu_item:nth-child(1) a, [data-current-step="1-3"] #secene1 .tecSceneMenu_item:nth-child(3) a, [data-current-step="1-2"] #secene1 .tecSceneMenu_item:nth-child(2) a, [data-current-step="1-1"] #secene1 .tecSceneMenu_item:nth-child(1) a {
  border-color: #1A1A1A;
  pointer-events: none;
}
.tecSceneMenu_item {
  position: relative;
}
@media only screen and (max-width: 900px) {
  .tecSceneMenu_item {
    width: 30.1886792453%;
  }
}
.tecSceneMenu_item:nth-child(1), .tecSceneMenu_item:nth-child(2) {
  margin-right: 24px;
}
@media only screen and (max-width: 900px) {
  .tecSceneMenu_item:nth-child(1), .tecSceneMenu_item:nth-child(2) {
    margin-right: 4.7169811321%;
  }
}
.tecSceneMenu_item:nth-child(1)::before, .tecSceneMenu_item:nth-child(2)::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  border-top: 1px dashed #1A1A1A;
  position: absolute;
  right: -24px;
  top: calc(50% - 1px);
}
.tecSceneMenu_item a {
  background-color: #F8F8F3;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: block;
  pointer-events: auto;
}
@media only screen and (min-width: 901px) {
  .tecSceneMenu_item a {
    width: 140px;
    height: 72px;
  }
}
@media only screen and (max-width: 900px) {
  .tecSceneMenu_item a {
    height: 64px;
  }
}
.tecSceneMenu_title {
  display: flex;
  align-items: center;
  margin: 10px 0 0 10px;
}
@media only screen and (max-width: 900px) {
  .tecSceneMenu_title {
    margin: 8px 0 0 8px;
  }
}
.tecSceneMenu_title span {
  font-size: 12px;
  display: block;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
  letter-spacing: 0.08em;
}
@media only screen and (max-width: 900px) {
  .tecSceneMenu_title span {
    font-size: 10px;
  }
}
.tecSceneMenu_title::before {
  content: "";
  display: block;
  border: 1px solid #1A1A1A;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  margin-right: 6px;
}
.tecSceneMenu_body {
  font-size: 18px;
  text-align: center;
  margin-top: 12px;
}
@media only screen and (max-width: 900px) {
  .tecSceneMenu_body {
    font-size: 16px;
    margin-top: 14px;
  }
}

@media only screen and (min-width: 901px) {
  .tecSceneMenu_item a:hover .tecSceneMenu_title,
.tecSceneMenu_item a:hover .tecSceneMenu_body {
    opacity: 0.6;
  }
}
.tecSceneMenu_title, .tecSceneMenu_body {
  transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.tecSceneHead {
  perspective: 1500px;
  perspective: 1500px;
}
.tecSceneHead > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .tecSceneHead > * {
  opacity: 1;
  transform: none;
}
.tecSceneHead.inView > * {
  opacity: 1;
  transform: none;
}

.tecSceneMenu_wrap {
  perspective: 1500px;
  perspective: 1500px;
}
.tecSceneMenu_wrap > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .tecSceneMenu_wrap > * {
  opacity: 1;
  transform: none;
}
.tecSceneMenu_wrap.inView > * {
  opacity: 1;
  transform: none;
}

@media only screen and (min-width: 901px) {
  .tecArticle {
    padding: 0 80px;
    margin-top: 140px;
  }
}
@media only screen and (max-width: 900px) {
  .tecArticle {
    padding: 0 4.1025641026%;
    margin: 40px auto;
  }
}
.tecArticle_wrap {
  background-color: #F8F8F3;
  border-radius: 4px 4px 0 0;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 901px) {
  .tecArticle_wrap {
    max-width: 1212px;
    padding: 95px 7% 80px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}
@media only screen and (max-width: 900px) {
  .tecArticle_wrap {
    padding: 24px 5.5865921788%;
  }
  #adjustment .tecArticle_wrap {
    padding-top: 70px;
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 901px) {
  .tecArticle_wrap.is-noReverse {
    flex-direction: row;
  }
}
@media only screen and (min-width: 901px) {
  .tecArticle_wrap[\:has\(.tecArticleEms\)] {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .tecArticle_wrap:has(.tecArticleEms) {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
.tecArticle_wrap::before {
  content: "";
  display: block;
  width: 100%;
  height: 48px;
  bottom: -48px;
  background-color: #1A1A1A;
  position: absolute;
  left: 0;
  z-index: 1;
  border-radius: 0 0 4px 4px;
}
@media only screen and (max-width: 900px) {
  .tecArticle_wrap::before {
    height: 28px;
    bottom: -28px;
  }
}
.tecArticle_image {
  overflow: hidden;
  border-radius: 4px;
}
@media only screen and (min-width: 901px) {
  .tecArticle_image {
    width: 51.8199233716%;
  }
}
@media only screen and (max-width: 900px) {
  .tecArticle_image {
    width: 100%;
  }
}
@media only screen and (min-width: 901px) {
  .tecArticle_content {
    width: 35.632183908%;
  }
}
@media only screen and (max-width: 900px) {
  .tecArticle_content {
    padding: 40px 0 15px;
  }
}
@media only screen and (min-width: 901px) {
  .tecArticleEms + .tecArticle_content {
    width: 48.275862069%;
  }
}
.tecArticle_body {
  margin-top: 10px;
}
.tecArticle_body p {
  font-size: 14px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .tecArticle_body p {
    line-height: 170%;
  }
}
.tecArticle_body p sup {
  font-size: 9px;
}
@media only screen and (max-width: 900px) {
  .tecArticle_body p sup {
    font-size: 8px;
  }
}

/** ems
/**************************************/
@media only screen and (min-width: 901px) {
  .tecArticleEms {
    width: 46.204620462%;
  }
  .tecArticleEms > div {
    width: 455px;
  }
}
@media only screen and (min-width: 901px) and (max-width: 1379px) {
  .tecArticleEms > div {
    width: 100%;
  }
}

/** animation
/**************************************/
.tecArticle {
  perspective: 1500px;
}
.tecArticle > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .tecArticle > * {
  opacity: 1;
  transform: none;
}
.tecArticle.inView > * {
  opacity: 1;
  transform: none;
}

.tecStep {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .tecStep {
    padding-left: 10.4166666667%;
    padding-right: 10.4166666667%;
    margin-top: 32px;
  }
}
@media only screen and (max-width: 900px) {
  .tecStep {
    padding: 4.1025641026%;
  }
}
.pin-spacer + .tecStep {
  margin-top: 180px;
}
@media only screen and (max-width: 900px) {
  .pin-spacer + .tecStep {
    margin-top: 130px;
  }
}
.tecStep_anchor {
  position: absolute;
}
@media only screen and (min-width: 901px) {
  .tecStep_anchor {
    top: -40px;
  }
}
@media only screen and (max-width: 900px) {
  .tecStep_anchor {
    top: -20px;
  }
}
.tecStep_wrap {
  background-color: #fff;
}
@media only screen and (min-width: 901px) {
  .tecStep_wrap {
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    padding: 72px 4.2105263158%;
  }
}
@media only screen and (max-width: 900px) {
  .tecStep_wrap {
    border-radius: 2px;
    padding: 50px 5.5865921788%;
  }
}
@media only screen and (min-width: 901px) {
  .tecStep_side {
    width: 32.183908046%;
  }
}
@media only screen and (min-width: 901px) {
  .tecStep_main {
    width: 67.816091954%;
  }
}
@media only screen and (max-width: 900px) {
  .tecStep_main {
    margin-top: 28px;
  }
}
.tecStep_label div.is-en, .tecStep_label h3.is-en {
  display: flex;
  align-items: center;
}
.tecStep_label div.is-en::before, .tecStep_label h3.is-en::before {
  content: "";
  display: block;
  border: 1px solid #1A1A1A;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  margin-right: 6px;
}
.tecStep_label div.is-en span, .tecStep_label h3.is-en span {
  font-size: 12px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
.tecStep_label div.is-ja, .tecStep_label h3.is-ja {
  display: block;
  margin-top: 15px;
  font-size: 32px;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 900px) {
  .tecStep_label div.is-ja, .tecStep_label h3.is-ja {
    font-size: 24px;
    margin-top: 12px;
  }
}
.tecStep_body {
  margin-top: 10px;
}
@media only screen and (max-width: 900px) {
  .tecStep_body {
    margin-top: 15px;
  }
}
.tecStep_body p {
  font-size: 14px;
  line-height: 180%;
}
.tecStep_body p sup {
  font-size: 9px;
}
@media only screen and (max-width: 900px) {
  .tecStep_body p sup {
    font-size: 8px;
  }
}

/** card
/**************************************/
.tecStepCards {
  background-color: #F8F8F3;
}
@media only screen and (max-width: 900px) {
  .tecStepColumn + .tecStepCards {
    margin-top: 30px;
  }
}

.tecStepCard {
  border-top: 1px dashed rgba(128, 128, 128, 0.5);
}
@media only screen and (min-width: 901px) {
  .tecStepCard {
    display: flex;
    align-items: center;
  }
}
@media only screen and (min-width: 901px) {
  .tecStepCard[data-format=vertical] {
    display: block;
  }
}
.tecStepCard:first-child {
  border-top: none;
}
.tecStepCard_image {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .tecStepCard_image {
    width: 23.5875706215%;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    padding-top: 10px;
  }
  [data-format=vertical] .tecStepCard_image {
    width: 100%;
  }
}
@media only screen and (max-width: 900px) {
  .tecStepCard_image {
    padding: 20px 5.6603773585% 0;
  }
}
@media only screen and (min-width: 901px) {
  [data-step-card="1-1-1"] .tecStepCard_image {
    width: 105px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 900px) {
  [data-step-card="1-1-1"] .tecStepCard_image {
    width: 120px;
  }
}
@media only screen and (min-width: 901px) {
  [data-step-card="1-1-2"] .tecStepCard_image {
    width: 108px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 900px) {
  [data-step-card="1-1-2"] .tecStepCard_image {
    width: 120px;
  }
}
@media only screen and (min-width: 901px) {
  [data-step-card="1-1-3"] .tecStepCard_image {
    width: 130px;
    margin: 10px auto 20px;
  }
}
@media only screen and (max-width: 900px) {
  [data-step-card="1-1-3"] .tecStepCard_image {
    width: 140px;
  }
}
@media only screen and (min-width: 901px) {
  [data-step-card="1-2-1"] .tecStepCard_image {
    width: 17%;
  }
}
@media only screen and (max-width: 900px) {
  [data-step-card="1-2-1"] .tecStepCard_image {
    width: 120px;
    padding-left: 0;
  }
}
@media only screen and (min-width: 901px) {
  [data-step-card="1-3-1"] .tecStepCard_image {
    width: 70.3389830508%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
  }
}
@media only screen and (max-width: 900px) {
  [data-step-card="1-3-1"] .tecStepCard_image {
    width: 280px;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}
[data-step-card="2-1-1"] .tecStepCard_image {
  padding-top: 27.1%;
}
@media only screen and (max-width: 900px) {
  [data-step-card="2-1-1"] .tecStepCard_image {
    padding-top: 50%;
  }
}
[data-step-card="2-1-1"] .tecStepCard_image > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media only screen and (min-width: 901px) {
  .tecStepCard_content {
    padding: 35px 5% 30px;
    width: 77.8248587571%;
  }
  [data-format=vertical] .tecStepCard_content {
    width: 100%;
  }
}
@media only screen and (max-width: 900px) {
  .tecStepCard_content {
    padding: 20px 5.6603773585% 30px;
  }
}
.tecStepCard_title {
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .tecStepCard_title {
    font-size: 14px;
  }
}
@media only screen and (min-width: 901px) {
  .tecStepCard_title[\:has\(span\)] {
    display: flex;
    align-items: center;
  }
  .tecStepCard_title:has(span) {
    display: flex;
    align-items: center;
  }
}
.tecStepCard_title em {
  font-style: normal;
  font-size: 11px;
  border: 1px solid #1A1A1A;
  height: 18px;
  display: flex;
  align-items: center;
  border-radius: 9px;
  margin-right: 12px;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 1;
  white-space: nowrap;
}
@media only screen and (max-width: 900px) {
  .tecStepCard_title em {
    width: fit-content;
    margin-bottom: 5px;
  }
}
.tecStepCard_body {
  margin-top: 5px;
}
.tecStepCard_body p {
  font-size: 13px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .tecStepCard_body p {
    font-size: 12px;
    line-height: 170%;
  }
}
.tecStepCard_body p sup {
  font-size: 9px;
}
@media only screen and (max-width: 900px) {
  .tecStepCard_body p sup {
    font-size: 8px;
  }
}

/** column
/**************************************/
@media only screen and (min-width: 901px) {
  .tecStepColumn {
    display: flex;
    justify-content: space-between;
  }
  .tecStepColumn_content {
    width: 52.5423728814%;
  }
  .tecStepColumn_image {
    width: 40.6779661017%;
  }
  .tecStepColumn_image > div {
    border-radius: 4px;
    overflow: hidden;
  }
  [data-step="2-1"] .tecStepColumn_image > div {
    border-radius: 4px 4px 0 0;
  }
}
@media only screen and (max-width: 900px) {
  .tecStepColumn {
    display: flex;
    flex-direction: column;
  }
  .tecStepColumn_content {
    order: 2;
    margin-top: 20px;
  }
  .tecStepColumn_image {
    order: 1;
  }
  .tecStepColumn_image > div {
    border-radius: 2px;
    overflow: hidden;
  }
}

.tecStep {
  perspective: 1500px;
  perspective: 1500px;
}
.tecStep > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .tecStep > * {
  opacity: 1;
  transform: none;
}
.tecStep.inView > * {
  opacity: 1;
  transform: none;
}

/** point 1
/**************************************/
.tecPoint1 {
  display: flex;
  justify-content: flex-end;
  margin-top: -40px;
  position: relative;
}
@media only screen and (max-width: 900px) {
  .tecPoint1 {
    margin-top: -130px;
  }
}
.tecPoint1_wrap {
  position: relative;
  padding: 96px 12%;
  max-width: 1124px;
  background-color: #fff;
}
@media only screen and (max-width: 900px) {
  .tecPoint1_wrap {
    width: 90.7692307692vw;
    padding: 98px 6% 55px;
  }
}
.tecPoint1_image {
  position: absolute;
  left: -18.9%;
  top: 11.1%;
  width: 336px;
}
@media only screen and (max-width: 900px) {
  .tecPoint1_image {
    width: 200px;
    left: -3.9%;
    top: -11.4%;
  }
}

.tecPoint1_wrap {
  perspective: 1500px;
  perspective: 1500px;
}
.tecPoint1_wrap > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .tecPoint1_wrap > * {
  opacity: 1;
  transform: none;
}
.tecPoint1_wrap.inView > * {
  opacity: 1;
  transform: none;
}
.tecPoint1_image {
  opacity: 0;
  transition-delay: 0.8s;
}
.tecPoint1_image .inView {
  opacity: 1;
}

/** point 2-3
/**************************************/
.tecPoint2-3 {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .tecPoint2-3 {
    margin-top: 100px;
  }
  .tecPoint2-3::before {
    content: "";
    background-color: #fff;
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    width: 78.0555555556vw;
    height: calc(100% - 60px);
  }
  .tecPoint2-3[data-position=image-right]::before {
    left: 0;
  }
  .tecPoint2-3[data-position=image-left]::before {
    right: 0;
  }
}
@media only screen and (min-width: 901px) and (min-width: 901px) {
  .tecPoint2-3[data-theme=beige]::before {
    background-color: #F8F8F3;
  }
}
@media only screen and (min-width: 901px) {
  .tecPoint2-3#function1 {
    margin-top: 240px;
  }
}
@media only screen and (max-width: 900px) {
  .tecPoint2-3 {
    margin-top: 60px;
  }
  .tecPoint2-3[data-theme=beige] .tecPoint2-3_inner {
    background-color: #F8F8F3;
  }
}
.tecPoint2-3 + .tecPoint2-3 {
  margin-top: 220px;
}
@media only screen and (max-width: 900px) {
  .tecPoint2-3 + .tecPoint2-3 {
    margin-top: 60px;
  }
}
.tecPoint2-3_wrap {
  z-index: 1;
}
@media only screen and (min-width: 901px) {
  .tecPoint2-3_wrap {
    position: relative;
  }
}
@media only screen and (max-width: 900px) {
  .tecPoint2-3_wrap {
    margin-top: -60px;
  }
  [data-position=image-left] .tecPoint2-3_wrap {
    display: flex;
    justify-content: flex-end;
  }
}
@media only screen and (min-width: 901px) {
  .tecPoint2-3_inner {
    display: flex;
    justify-content: space-between;
  }
  [data-position=image-right] .tecPoint2-3_inner {
    flex-direction: row-reverse;
  }
}
@media only screen and (max-width: 900px) {
  .tecPoint2-3_inner {
    background-color: #fff;
    width: 90.7692307692vw;
    padding: 60px 7% 60px;
  }
}
@media only screen and (min-width: 901px) {
  [data-position=image-right] .tecPoint2-3_content {
    width: 53.3333333333vw;
    padding: 100px 0 200px 7.6388888889vw;
  }
  [data-position=image-left] .tecPoint2-3_content {
    width: 51.25vw;
    padding: 100px 7.6388888889vw 150px 0;
  }
}
@media only screen and (max-width: 900px) {
  .tecPoint2-3_content {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 901px) {
  .tecPoint2-3_image, .tecPoint2-3_video {
    width: 39.5833333333vw;
  }
  [data-position=image-right] .tecPoint2-3_image, [data-position=image-right] .tecPoint2-3_video {
    margin-top: 6.9444444444vw;
  }
  [data-position=image-left] .tecPoint2-3_image, [data-position=image-left] .tecPoint2-3_video {
    margin-top: -6.9444444444vw;
  }
}
@media only screen and (max-width: 900px) {
  [data-position=image-right] .tecPoint2-3_image, [data-position=image-right] .tecPoint2-3_video {
    display: flex;
    justify-content: flex-end;
  }
}
.tecPoint2-3_image > div, .tecPoint2-3_video > div {
  overflow: hidden;
}
@media only screen and (max-width: 900px) {
  .tecPoint2-3_image > div, .tecPoint2-3_video > div {
    width: 90.7692307692vw;
  }
}
[data-position=image-right] .tecPoint2-3_image > div, [data-position=image-right] .tecPoint2-3_video > div {
  border-radius: 4px 0 0 4px;
}
[data-position=image-left] .tecPoint2-3_image > div, [data-position=image-left] .tecPoint2-3_video > div {
  border-radius: 0 4px 4px 0;
}
.tecPoint2-3_video > div {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .tecPoint2-3_video > div {
    height: 39.5833333333vw;
  }
}
@media only screen and (max-width: 900px) {
  .tecPoint2-3_video > div {
    height: 90.7692307692vw;
  }
}
.tecPoint2-3_video > div video {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 900px) {
  .tecPoint2-3_video > div video {
    width: auto;
    height: 100%;
  }
}
.tecPoint2-3_illust {
  max-width: 568px;
  margin-top: 35px;
}
@media only screen and (max-width: 900px) {
  .tecPoint2-3_illust {
    width: 100%;
    margin-top: 40px;
  }
}
@media only screen and (max-width: 900px) {
  #function2 .tecPoint2-3_illust {
    width: 80%;
  }
}
@media only screen and (max-width: 900px) {
  #function3 .tecPoint2-3_illust {
    width: 80%;
  }
}

.tecPoint2-3_content {
  perspective: 1500px;
  perspective: 1500px;
}
.tecPoint2-3_content > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .tecPoint2-3_content > * {
  opacity: 1;
  transform: none;
}
.tecPoint2-3_content.inView > * {
  opacity: 1;
  transform: none;
}

/** point 4
/**************************************/
.tecPoint4 {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 901px) {
  .tecPoint4 {
    margin-top: -290px;
    padding-left: 7.9166666667%;
    padding-right: 7.9166666667%;
  }
}
@media only screen and (max-width: 900px) {
  .tecPoint4 {
    margin-top: -65px;
    padding-left: 4.6153846154%;
    padding-right: 4.6153846154%;
  }
}
@media only screen and (max-width: 900px) {
  .tecPoint4 {
    margin-top: -130px;
  }
}
.tecPoint4_wrap {
  background-color: #F8F8F3;
  border-radius: 0 0 4px 4px;
}
@media only screen and (min-width: 901px) {
  .tecPoint4_wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 1212px;
  }
}
.tecPoint4_image {
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
@media only screen and (min-width: 901px) {
  .tecPoint4_content {
    padding: 96px 9.900990099%;
  }
}
@media only screen and (max-width: 900px) {
  .tecPoint4_content {
    padding: 60px 10.1694915254%;
  }
}
.tecPoint4_lead {
  font-size: 20px;
  line-height: 180%;
  margin-top: 40px;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .tecPoint4_lead {
    font-size: 16px;
    margin-top: 30px;
  }
}
.tecPoint4_list {
  margin-top: 28px;
}
@media only screen and (max-width: 900px) {
  .tecPoint4_list {
    margin-top: 30px;
  }
}
.tecPoint4_list dt {
  font-size: 20px;
  line-height: 180%;
  padding-left: 20px;
  position: relative;
  margin-top: 15px;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .tecPoint4_list dt {
    font-size: 16px;
    padding-left: 25px;
  }
}
.tecPoint4_list dt::before {
  left: 0;
  top: calc(50% - 2px);
  width: 2px;
  height: 2px;
  transform: rotate(45deg);
  border: 1px solid #1A1A1A;
  content: "";
  display: block;
  position: absolute;
}
.tecPoint4_list dt.has-plus {
  position: relative;
  margin-top: 40px;
}
.tecPoint4_list dt.has-plus:after {
  content: "\ea0b";
}
.tecPoint4_list dt.has-plus::after {
  position: absolute;
  left: 70px;
  top: -38px;
  font-size: 13px;
}
@media only screen and (max-width: 900px) {
  .tecPoint4_list dt.has-plus::after {
    left: 27px;
    top: -35px;
  }
}
.tecPoint4_list dd {
  font-size: 14px;
  line-height: 180%;
  margin-top: 2px;
  padding-left: 22px;
}
@media only screen and (max-width: 900px) {
  .tecPoint4_list dd {
    padding-left: 25px;
    margin-top: 6px;
  }
}
.tecPoint4_list dd sup {
  font-size: 9px;
}
@media only screen and (max-width: 900px) {
  .tecPoint4_list dd sup {
    font-size: 8px;
  }
}

.tecPoint4_image img {
  transition: 2.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform: scale(1.13) translateY(-30px);
  opacity: 0;
}
.inView .tecPoint4_image img, .tecPoint4_image img.inView {
  transform: none;
  opacity: 1;
}
.tecPoint4_content {
  perspective: 1500px;
  perspective: 1500px;
}
.tecPoint4_content > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .tecPoint4_content > * {
  opacity: 1;
  transform: none;
}
.tecPoint4_content.inView > * {
  opacity: 1;
  transform: none;
}

/** point 5
/**************************************/
.tecPoint5 {
  padding-left: 13.8888888889%;
  padding-right: 13.8888888889%;
}
@media only screen and (max-width: 900px) {
  .tecPoint5 {
    padding-left: 9.2307692308%;
    padding-right: 9.2307692308%;
  }
}
.tecPoint5_wrap {
  max-width: 1044px;
  margin-left: auto;
  margin-right: auto;
  padding: 140px 0;
}
@media only screen and (max-width: 900px) {
  .tecPoint5_wrap {
    padding: 60px 0 20px;
  }
}

.tecPoint5 {
  perspective: 1500px;
  perspective: 1500px;
}
.tecPoint5 > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .tecPoint5 > * {
  opacity: 1;
  transform: none;
}
.tecPoint5.inView > * {
  opacity: 1;
  transform: none;
}

.tecExplain {
  background-color: #F8F8F3;
  border-radius: 4px;
}
@media only screen and (min-width: 901px) {
  .tecExplain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
    padding: 0 5% 0 0;
  }
}
@media only screen and (max-width: 900px) {
  .tecExplain {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 901px) {
  .tecExplain_image {
    width: 43.75%;
  }
}
@media only screen and (min-width: 901px) {
  .tecExplain_content {
    width: 62.5%;
  }
}
@media only screen and (max-width: 900px) {
  .tecExplain_content {
    padding: 10px 6% 30px;
  }
}
.tecExplain_title sup {
  font-size: 9px;
}
@media only screen and (max-width: 900px) {
  .tecExplain_title sup {
    font-size: 8px;
  }
}
.tecExplain_body {
  margin-top: 15px;
}

/** list
/**************************************/
.explainLists {
  margin-top: 52px;
}
@media only screen and (max-width: 900px) {
  .explainLists {
    margin-top: 38px;
  }
}

@media only screen and (min-width: 901px) {
  .explainList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 900px) {
  .explainList {
    margin-bottom: 36px;
  }
}
.explainList_image {
  overflow: hidden;
  border-radius: 2px;
}
@media only screen and (min-width: 901px) {
  .explainList_image {
    width: 43.6781609195%;
  }
}
@media only screen and (min-width: 901px) {
  .explainList_content {
    width: 51.724137931%;
  }
}
@media only screen and (max-width: 900px) {
  .explainList_content {
    margin-top: 20px;
  }
}
.explainList_body sup {
  font-size: 9px !important;
}
.explainList_body sup {
  position: relative;
}

.tecBackground {
  position: relative;
  background-color: #F8F8F3;
}
@media only screen and (min-width: 901px) {
  .tecBackground[data-background-section="1"] {
    margin-top: 280px;
    padding-bottom: 350px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBackground[data-background-section="1"] {
    margin-top: 150px;
    padding-bottom: 190px;
  }
  .tecBackground[data-background-section="1"] .tecBackground_image {
    position: relative;
    z-index: 2;
  }
}
@media only screen and (min-width: 901px) {
  .tecBackground[data-background-section="2"] {
    margin-top: 140px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBackground[data-background-section="2"] {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBackground[data-background-section="3"] {
    margin-top: 188px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBackground[data-background-section="3"] {
    margin-top: 148px;
  }
}
@media only screen and (min-width: 901px) {
  .tecBackground[data-background-section="4"] {
    padding-bottom: 160px;
  }
}
@media only screen and (max-width: 900px) {
  .tecBackground[data-background-section="4"] {
    margin-top: 148px;
  }
}
.tecBackground_image {
  width: 74.5833333333vw;
}
@media only screen and (max-width: 900px) {
  .tecBackground_image {
    width: 90.7692307692vw;
  }
}
.tecBackground_image > div {
  overflow: hidden;
  border-radius: 0 4px 4px 0;
  transform: translateY(-140px);
}
@media only screen and (min-width: 901px) {
  .tecBackground_image > div {
    height: 33.3333333333vw;
  }
}
@media only screen and (max-width: 900px) {
  .tecBackground_image > div {
    transform: translateY(-80px);
    height: 123.0769230769vw;
  }
}
.tecBackground_image > div picture {
  height: 100%;
}
.tecBackground_image > div picture img {
  height: 100%;
  width: auto;
  max-width: none;
}

/** animation
/**************************************/
.tecBackground_inner img {
  transition: 2.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform: scale(1.13) translateY(-30px);
  opacity: 0;
}
.inView .tecBackground_inner img, .tecBackground_inner img.inView {
  transform: none;
  opacity: 1;
}

@media only screen and (min-width: 901px) {
  .tecAbility {
    padding-top: 120px;
    padding: 120px 10.4166666667%;
  }
}
@media only screen and (max-width: 900px) {
  .tecAbility {
    padding: 40px 0;
    margin-top: -60px;
  }
}
@media only screen and (min-width: 901px) {
  .tecAbility_wrap {
    max-width: 1212px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 901px) {
  .tecAbility_side {
    width: 22.1052631579%;
    padding-left: 30px;
    margin-top: -20px;
  }
}
@media only screen and (max-width: 900px) {
  .tecAbility_side {
    width: 82.0512820513%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width: 901px) {
  .tecAbility_content {
    width: 77.8947368421%;
  }
}
@media only screen and (max-width: 900px) {
  .tecAbility_content {
    margin-top: 40px;
    overflow-x: scroll;
    padding-left: 8.9743589744%;
    padding-right: 8.9743589744%;
    -webkit-overflow-scrolling: touch;
  }
}
@media only screen and (max-width: 900px) {
  .tecAbility_graph {
    width: 730px;
    white-space: nowrap;
  }
}
@media only screen and (max-width: 900px) {
  .tecAbility_graph {
    padding-bottom: 10px;
  }
}
@media only screen and (min-width: 901px) {
  .tecAbility_image {
    width: 62.1052631579%;
  }
}
@media only screen and (max-width: 900px) and (max-width: 900px) {
  .tecAbility_image {
    width: 84%;
    margin-left: auto;
    margin-right: auto;
  }
}

/** animation
/**************************************/
.tecAbility {
  perspective: 1500px;
}
.tecAbility > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .tecAbility > * {
  opacity: 1;
  transform: none;
}
.tecAbility.inView > * {
  opacity: 1;
  transform: none;
}

/** banner
/**************************************/
.abilityBanner {
  margin-top: 60px;
}
.abilityBanner_link {
  padding: 10px 5% 10px 5%;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
}
@media only screen and (max-width: 900px) {
  .abilityBanner_link {
    padding: 40px 4% 30px 4%;
    border-radius: 2px;
  }
}
.abilityBanner_image {
  width: 137px;
}
@media only screen and (max-width: 900px) {
  .abilityBanner_content {
    margin-left: -30px;
  }
}
.abilityBanner_title {
  font-size: 20px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 900px) {
  .abilityBanner_title {
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 10px;
  }
}
.abilityBanner_label {
  display: flex;
  align-items: flex-start;
  position: absolute;
  right: 1.3%;
  top: 12px;
}
.abilityBanner_label:after {
  content: "\ea04";
}
@media only screen and (max-width: 900px) {
  .abilityBanner_label {
    right: 3.7%;
    top: 14px;
  }
}
.abilityBanner_label span {
  font-size: 12px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
.abilityBanner_label::after {
  padding-left: 3px;
  font-size: 5px;
  color: #808080;
}
@media only screen and (max-width: 900px) {
  .abilityBanner .textLink div span {
    font-size: 13px;
    letter-spacing: 0;
  }
}

.tecFunctions {
  margin-top: 140px;
  padding-left: 10.4166666667%;
  padding-right: 10.4166666667%;
}
@media only screen and (max-width: 900px) {
  .tecFunctions {
    padding-left: 9.2307692308%;
    padding-right: 9.2307692308%;
    margin: 70px auto 0;
  }
}
.tecFunctions_wrap {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 901px) {
  .tecFunctions_head {
    display: flex;
    justify-content: space-between;
    padding-left: 2.5%;
  }
}
@media only screen and (min-width: 901px) {
  .tecFunctions_head .tecHeadlineLv1 {
    margin-right: 50px;
  }
}
.tecFunctions_image {
  border-radius: 4px;
  overflow: hidden;
}
@media only screen and (min-width: 901px) {
  .tecFunctions_image {
    width: 49.504950495%;
  }
}
@media only screen and (max-width: 900px) {
  .tecFunctions_image {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 901px) {
  .tecFunctions_content {
    display: flex;
    justify-content: space-between;
    margin-top: 90px;
  }
}
@media only screen and (max-width: 900px) {
  .tecFunctions_content {
    margin-top: 36px;
  }
}
@media only screen and (min-width: 901px) {
  .tecFunctions_content > div {
    width: 48.0198019802%;
  }
  .tecFunctions_content > div:nth-child(1) .tecFunctions_menu::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: -1px;
    width: 76.4492753623%;
    height: 1px;
    background-color: #1A1A1A;
  }
}
@media only screen and (max-width: 900px) {
  [data-products=ipl] .tecFunctions_content > div:nth-child(1) {
    border-top: 1px solid #bebebe;
  }
}
.tecFunctions_title {
  font-size: 18px;
  padding-bottom: 30px;
}
@media only screen and (max-width: 900px) {
  .tecFunctions_title {
    padding: 30px 0 30px;
  }
}
.tecFunctions_menu {
  position: relative;
}
@media only screen and (min-width: 901px) {
  [data-products=ipl] .tecFunctions_menu {
    margin-top: 25px;
  }
}
@media only screen and (min-width: 901px) {
  .tecFunctions_menu {
    border-top: 1px solid #bebebe;
  }
}

/** card
/**************************************/
.tecFunctionsCard {
  border-bottom: 1px solid #bebebe;
}
.tecFunctionsCard a {
  display: block;
  padding: 23px 10px 26px;
  position: relative;
}
@media only screen and (max-width: 900px) {
  .tecFunctionsCard a {
    padding: 18px 0;
  }
}
.tecFunctionsCard_label {
  display: flex;
  align-items: center;
}
.tecFunctionsCard_label::before {
  content: "";
  display: block;
  border: 1px solid #1A1A1A;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  margin-right: 6px;
}
.tecFunctionsCard_label span {
  font-size: 12px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
.tecFunctionsCard_title {
  font-size: 16px;
  margin-top: 10px;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .tecFunctionsCard_title {
    font-size: 14px;
    margin-top: 8px;
  }
}
.tecFunctionsCard_title i {
  font-size: 80%;
  font-style: normal;
}
.tecFunctionsCard_title sup {
  font-size: 10px;
}
@media only screen and (max-width: 900px) {
  .tecFunctionsCard_title sup {
    font-size: 9px;
  }
}
.tecFunctionsCard_icon {
  position: absolute;
  right: 21px;
  top: calc(50% - 16px);
  width: 32px;
  height: 32px;
  background-color: #808080;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tecFunctionsCard_icon:before {
  content: "\ea06";
}
@media only screen and (max-width: 900px) {
  .tecFunctionsCard_icon {
    width: 26px;
    height: 26px;
    right: 3.8%;
    top: calc(50% - 13px);
  }
}
.tecFunctionsCard_icon::before {
  font-size: 11px;
  display: block;
  transform: rotate(180deg);
  color: #F8F8F3;
  width: 12px;
}

/** hover
/**************************************/
.tecFunctionsCard_icon {
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (min-width: 901px) {
  .tecFunctionsCard a:hover .tecFunctionsCard_icon {
    background-color: #1A1A1A;
  }
}

/** animation
/**************************************/
.tecFunctions_image img {
  transition: 2.4s cubic-bezier(0.23, 1, 0.32, 1);
  transform: scale(1.13) translateY(-30px);
  opacity: 0;
  transition-delay: 0.3s;
}
.inView .tecFunctions_image img, .tecFunctions_image img.inView {
  transform: none;
  opacity: 1;
}
.tecFunctions_content {
  opacity: 0;
  transition: 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.tecFunctions_content.inView {
  opacity: 1;
}

@media only screen and (min-width: 901px) {
  .tecProfile {
    padding: 140px 10.4166666667% 100px;
    margin-top: 140px;
  }
  [data-page=rin] .tecProfile {
    margin-top: 130px;
    padding: 0;
    max-width: 1210px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width: 901px) and (min-width: 902px) and (max-width: 1439px) {
  [data-page=rin] .tecProfile {
    padding-left: 7.9861111111%;
    padding-right: 7.9861111111%;
    max-width: 1440px;
  }
}
@media only screen and (max-width: 900px) {
  .tecProfile {
    padding: 60px 9.2307692308% 60px;
    margin-top: 60px;
  }
  [data-page=rin] .tecProfile {
    margin-top: 20px;
  }
}
[data-page=rin] .tecProfile {
  perspective: 1500px;
}
[data-page=rin] .tecProfile > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView [data-page=rin] .tecProfile > * {
  opacity: 1;
  transform: none;
}
[data-page=rin] .tecProfile.inView > * {
  opacity: 1;
  transform: none;
}
.tecProfile_label {
  font-size: 12px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
.tecProfile_headline {
  font-size: 32px;
  margin-top: 30px;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 900px) {
  .tecProfile_headline {
    font-size: 24px;
    line-height: 150%;
    margin-top: 20px;
  }
}
@media only screen and (min-width: 901px) {
  .tecProfile_column {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
  }
  .tecProfile_column > div {
    width: 48.4210526316%;
  }
}
@media only screen and (max-width: 900px) {
  .tecProfile_column {
    margin-top: 35px;
  }
  [data-page=rin] .tecProfile_column {
    margin-top: 52px;
  }
  .tecProfile_column > div:nth-child(2) {
    margin-top: 40px;
  }
}
.tecProfile_title {
  font-size: 20px;
  position: relative;
  padding-left: 20px;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .tecProfile_title {
    font-size: 16px;
    padding-left: 17px;
  }
  [data-page=rin] .tecProfile_title {
    font-size: 20px;
  }
}
.tecProfile_title:before {
  position: absolute;
  left: 0;
  top: 8px;
  width: 2px;
  height: 2px;
  transform: rotate(45deg);
  border: 1px solid #1A1A1A;
  content: "";
  display: block;
  position: absolute;
}
@media only screen and (max-width: 900px) {
  .tecProfile_title:before {
    top: 6px;
  }
}

/** card
/**************************************/
.tecProfileCard {
  background-color: #fff;
  border-radius: 4px;
  margin-top: 35px;
}
@media only screen and (min-width: 901px) {
  .tecProfileCard {
    padding: 25px 4.1%;
    display: flex;
    justify-content: space-between;
  }
}
@media only screen and (max-width: 900px) {
  .tecProfileCard {
    padding: 20px 5% 35px;
  }
}
[data-page=rin] .tecProfileCard {
  background-color: #F7F7F7;
}
@media only screen and (min-width: 901px) {
  .tecProfileCard_head {
    width: 32.5925925926%;
  }
}
@media only screen and (max-width: 900px) {
  .tecProfileCard_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media only screen and (max-width: 900px) {
  .tecProfileCard_mobile {
    width: 57.4468085106%;
  }
}
@media only screen and (max-width: 900px) {
  .tecProfileCard_image {
    width: 35.4609929078%;
  }
}
.tecProfileCard_image > div {
  overflow: hidden;
  border-radius: 4px;
}
@media only screen and (min-width: 901px) {
  .tecProfileCard_content {
    width: 61.1111111111%;
  }
}
.tecProfileCard_title {
  font-size: 18px;
}
[data-page=rin] .tecProfileCard_title {
  font-size: 16px;
}
.tecProfileCard_description {
  font-size: 11px;
  line-height: 160%;
  margin-top: 8px;
}
@media only screen and (max-width: 900px) {
  .tecProfileCard_description {
    margin-top: 10px;
    line-height: 150%;
  }
}
[data-page=rin] .tecProfileCard_description {
  color: #808080;
}
.tecProfileCard_body {
  margin-top: 8px;
}
@media only screen and (max-width: 900px) {
  .tecProfileCard_body {
    margin-top: 18px;
  }
}
.tecProfileCard_target .tecProfileCard_body {
  border-top: 1px solid #ccc;
  padding-top: 25px;
}
.tecProfileCard_body p {
  font-size: 13px;
  line-height: 170%;
  color: #808080;
}
[data-page=rin] .tecProfileCard_body p {
  color: #1A1A1A;
}
.tecProfileCard_button {
  margin-top: 10px;
  outline: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
@media only screen and (max-width: 900px) {
  .tecProfileCard_button {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
}
[data-accordion-state=open] .tecProfileCard_button.is-open {
  opacity: 0;
  pointer-events: none;
}
.tecProfileCard_button .textLink {
  position: static;
}
.tecProfileCard_button .textLink div span {
  color: #1A1A1A;
}
.tecProfileCard_target {
  padding-bottom: 7px;
}

.tecHero {
  background-color: #F8F8F3;
  position: relative;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 901px) {
  .tecHero {
    padding: 170px 8.3333333333% 0;
    height: 100svh;
  }
}
@media only screen and (max-width: 900px) {
  .tecHero {
    padding: 180px 9.2307692308% 90px;
  }
}
@media only screen and (min-width: 901px) {
  .tecHero_wrap {
    max-width: 1440px;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width: 901px) {
  .tecHero_content {
    width: 45.9349593496%;
  }
}
.tecHero_image {
  position: relative;
}
@media only screen and (min-width: 901px) {
  .tecHero_image {
    width: 59.756097561%;
  }
  [data-products=bfs] .tecHero_image {
    margin-top: -80px;
  }
  [data-products=brush] .tecHero_image {
    margin-top: -50px;
    width: 44%;
  }
}
@media only screen and (max-width: 900px) {
  .tecHero_image {
    height: 77.9487179487vw;
  }
  [data-products=bfs] .tecHero_image {
    height: 90.7692307692vw;
  }
  [data-products=brush] .tecHero_image {
    height: 76.1538461538vw;
    margin-top: 30px;
  }
}
@media only screen and (max-width: 900px) {
  .tecHero_image > div {
    /* width: 100vw; */
    width:89.6vw;
    /* margin: 20px 0 0 -9.3vw; */
    margin:10px 0 0 3.3vw;
    position: absolute;
    left: 0;
    top: 0;
  }
  [data-products=bfs] .tecHero_image > div {
    width: 92vw;
    margin: 20px 0 0 -1.3vw;
  }
  [data-products=brush][data-bursh-type=pro] .tecHero_image > div, [data-products=brush][data-bursh-type=std] .tecHero_image > div {
    width: 72vw;
    margin: 20px 0 0 12vw;
  }
  [data-products=brush][data-bursh-type=pro2] .tecHero_image > div {
    width: 72vw;
    margin: 20px 0 0 12vw;
  }
}
@media only screen and (max-width: 900px) and (max-width: 900px) {
  [data-products=brush][data-bursh-type=pro2] .tecHero_image > div {
    width: 89.6vw;
    margin: 10px 0 0 3.3vw;
  }
}
.tecHero_image img {
  width: 100%;
  height: auto;
}
.tecHero_headline {
  font-size: 16px;
  letter-spacing: 0.04em;
}
@media only screen and (max-width: 900px) {
  .tecHero_headline {
    font-size: 14px;
  }
}
.tecHero_title {
  font-size: 32px;
  margin-top: 45px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .tecHero_title {
    font-size: 24px;
    letter-spacing: 0.08em;
  }
}
.tecHero_title[data-family=serif] {
  margin-top: 25px;
  padding-bottom: 10px;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.08em;
}
@media only screen and (max-width: 900px) {
  .tecHero_title[data-family=serif] {
    margin-top: 15px;
  }
}
.tecHero_copy {
  font-size: 28px;
  line-height: 150%;
  margin-top: 40px;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 900px) {
  .tecHero_copy {
    font-size: 24px;
    margin-top: 25px;
    font-feature-settings: "palt";
  }
}
.tecHero_copy sup {
  font-size: 11px;
  position: relative;
  top: -0.2em;
}
@media only screen and (max-width: 900px) {
  .tecHero_copy sup {
    font-size: 10px;
    top: -0.2em;
  }
}
.tecHero_list {
  margin-top: 40px;
  font-size: 13px;
  line-height: 180%;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .tecHero_list {
    margin-top: 20px;
  }
}
.tecHero_list li {
  margin-bottom: 5px;
  padding-left: 22px;
  position: relative;
}
.tecHero_list li:before {
  position: absolute;
  left: 2px;
  top: 9px;
  width: 2px;
  height: 2px;
  transform: rotate(45deg);
  border: 1px solid #1A1A1A;
  content: "";
  display: block;
  position: absolute;
}
.tecHero_list li[\:has\(sup\)]::before {
  top: 13px;
}
.tecHero_list li:has(sup)::before {
  top: 13px;
}
.tecHero_list li sup {
  font-size: 10px;
}
@media only screen and (max-width: 900px) {
  .tecHero_list li sup {
    font-size: 9px;
  }
}
.tecHero_attention {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (max-width: 900px) {
  .tecHero_attention {
    margin-top: 25px;
  }
}
.tecHero_attention dt, .tecHero_attention dd {
  font-size: 10px;
  line-height: 170%;
  color: #808080;
}
@media only screen and (max-width: 900px) {
  .tecHero_attention dt, .tecHero_attention dd {
    font-size: 9px;
  }
}
.tecHero_attention dt {
  padding-right: 5px;
}
/** animation
/**************************************/
.tecHero_content > * {
  opacity: 0;
  transform: translateX(35px);
  transition: 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tecHero_content > *:nth-child(1) {
  transition-delay: 0.6s;
}
.tecHero_content > *:nth-child(2) {
  transition-delay: 0.67s;
}
.tecHero_content > *:nth-child(3) {
  transition-delay: 0.74s;
}
.tecHero_content > *:nth-child(4) {
  transition-delay: 0.81s;
}
.tecHero_content > *:nth-child(5) {
  transition-delay: 0.88s;
}
.tecHero_content > *:nth-child(6) {
  transition-delay: 0.95s;
}
[data-loaded="1"] .tecHero_content > * {
  opacity: 1;
  transform: none;
}
.tecHero_image {
  opacity: 0;
  transform: translateX(-30px);
  transition: 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
}
[data-loaded="1"] .tecHero_image {
  opacity: 1;
  transform: none;
}

/** headlineLv1
/**************************************/
.tecHeadlineLv1 span {
  display: block;
}
.tecHeadlineLv1 span.is-en {
  font-size: 12px;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv1 span.is-en {
    font-size: 14px;
    padding-left: 17px;
  }
}
.tecHeadlineLv1 span.is-ja {
  font-size: 24px;
  position: relative;
  line-height: 180%;
  margin-top: 20px;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv1 span.is-ja {
    font-size: 20px;
    line-height: 180%;
    padding-left: 20px;
  }
}
.tecHeadlineLv1 span.is-ja::before {
  position: absolute;
  left: -28px;
  top: 20px;
  width: 2px;
  height: 2px;
  transform: rotate(45deg);
  border: 1px solid #1A1A1A;
  content: "";
  display: block;
  position: absolute;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv1 span.is-ja::before {
    left: 0;
    top: 16px;
  }
}
.tecHeadlineLv1 span.is-ja sup {
  font-size: 12px;
  position: relative;
  top: -0.1em;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv1 span.is-ja sup {
    font-size: 10px;
    top: -0.2em;
  }
}
.tecHeadlineLv1 span.is-note {
  margin-top: 20px;
  font-size: 10px;
  line-height: 170%;
  color: #808080;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv1 span.is-note {
    padding-left: 20px;
    margin-top: 10px;
    font-size: 9px;
  }
}
.tecHeadlineLv1 span.is-sub {
  font-size: 15px;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv1 span.is-sub {
    padding-left: 20px;
  }
}
.tecHeadlineLv1 .is-sub + .is-ja {
  margin-top: 0px;
}
.tecHeadlineLv1 .is-sub + .is-ja::before {
  top: -10px !important;
}
.tecHeadlineLv1[data-size="20"] .is-ja {
  font-size: 20px;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv1[data-size="20"] .is-ja {
    font-size: 18px;
  }
}
.tecHeadlineLv1[data-size="20"] .is-ja::before {
  top: 17px;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv1[data-size="20"] .is-ja::before {
    top: 13px;
  }
}

.tecHeadlineLv1 {
  perspective: 1500px;
}
.tecHeadlineLv1 > * {
  opacity: 0;
  transform: rotateX(-15deg) translateY(35px) scale(0.94);
  transform-origin: center center;
  transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.inView .tecHeadlineLv1 > * {
  opacity: 1;
  transform: none;
}
.tecHeadlineLv1.inView > * {
  opacity: 1;
  transform: none;
}

/** headlineLv2
/**************************************/
.tecHeadlineLv2[data-icon="0"] span.is-en::before {
  display: none;
}
.tecHeadlineLv2 span {
  display: block;
}
.tecHeadlineLv2 span.is-en {
  font-size: 12px;
  position: relative;
  display: flex;
  align-items: center;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.08em;
}
.tecHeadlineLv2 span.is-en::before {
  content: "";
  display: block;
  border: 1px solid #1A1A1A;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  margin-right: 5px;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv2 span.is-en::before {
    margin-top: -2px;
    margin-right: 7px;
  }
}
.tecHeadlineLv2 span.is-en.is-noIcon::before {
  display: none;
}
.tecHeadlineLv2 span.is-label {
  font-size: 11px;
  line-height: 1.3;
  border: 1px solid #1A1A1A;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
  width: fit-content;
  margin-top: 40px;
  letter-spacing: 0.2em;
}
.tecHeadlineLv2 span.is-ja {
  margin-top: 16px;
  font-size: 32px;
  line-height: 180%;
  font-family: fot-tsukuaoldmin-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv2 span.is-ja {
    font-size: 24px;
    line-height: 150%;
  }
}
.tecHeadlineLv2 span.is-ja sup {
  font-size: 14px;
  position: relative;
  top: -0.1em;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv2 span.is-ja sup {
    font-size: 10px;
    top: -0.2em;
  }
}
.tecHeadlineLv2 .is-en + .is-ja {
  margin-top: 15px;
}
.tecBeforeAfter .tecHeadlineLv2 .is-en + .is-ja {
  margin-top: 23px;
}
@media only screen and (max-width: 900px) {
  .tecBeforeAfter .tecHeadlineLv2 .is-en + .is-ja {
    margin-top: 42px;
    line-height: 140%;
  }
}
.tecHeadlineLv2[data-size="28"] span.is-ja {
  font-size: 28px;
  margin-top: 15px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv2[data-size="28"] span.is-ja {
    font-size: 24px;
  }
}

/** title
/**************************************/
.moduleTitle[data-size="16"], [data-size="16"].tecExplain_title, [data-size="16"].explainList_title {
  font-size: 16px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .moduleTitle[data-size="16"], [data-size="16"].tecExplain_title, [data-size="16"].explainList_title {
    font-size: 14px;
  }
}
.moduleTitle[data-size="18"], [data-size="18"].tecExplain_title, [data-size="18"].explainList_title {
  font-size: 18px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .moduleTitle[data-size="18"], [data-size="18"].tecExplain_title, [data-size="18"].explainList_title {
    font-size: 14px;
  }
}
.moduleTitle[data-size="20"], [data-size="20"].tecExplain_title, [data-size="20"].explainList_title {
  font-size: 20px;
  line-height: 180%;
  letter-spacing: 0.12em;
}
@media only screen and (max-width: 900px) {
  .moduleTitle[data-size="20"], [data-size="20"].tecExplain_title, [data-size="20"].explainList_title {
    font-size: 16px;
  }
}

/** body
/**************************************/
.moduleTitle + .moduleBody, .tecExplain_title + .moduleBody, .explainList_title + .moduleBody, .moduleTitle + .tecBeforeAfterHead_body, .tecExplain_title + .tecBeforeAfterHead_body, .explainList_title + .tecBeforeAfterHead_body, .moduleTitle + .tecExplain_body, .tecExplain_title + .tecExplain_body, .explainList_title + .tecExplain_body, .moduleTitle + .explainList_body, .tecExplain_title + .explainList_body, .explainList_title + .explainList_body {
  margin-top: 10px;
}
.tecHeadlineLv2 + .moduleBody, .tecHeadlineLv2 + .tecBeforeAfterHead_body, .tecHeadlineLv2 + .tecExplain_body, .tecHeadlineLv2 + .explainList_body {
  margin-top: 23px;
}
@media only screen and (max-width: 900px) {
  .tecHeadlineLv2 + .moduleBody, .tecHeadlineLv2 + .tecBeforeAfterHead_body, .tecHeadlineLv2 + .tecExplain_body, .tecHeadlineLv2 + .explainList_body {
    margin-top: 10px;
  }
}
.tecArticle .moduleBody, .tecArticle .tecBeforeAfterHead_body, .tecArticle .tecExplain_body, .tecArticle .explainList_body {
  margin-top: 20px;
}
.moduleBody p sup, .tecBeforeAfterHead_body p sup, .tecExplain_body p sup, .explainList_body p sup {
  font-size: 8px;
}
.moduleBody[data-size="12"] p, [data-size="12"].tecBeforeAfterHead_body p, [data-size="12"].tecExplain_body p, [data-size="12"].explainList_body p {
  font-size: 12px;
  line-height: 200%;
}
@media only screen and (max-width: 900px) {
  .moduleBody[data-size="12"] p, [data-size="12"].tecBeforeAfterHead_body p, [data-size="12"].tecExplain_body p, [data-size="12"].explainList_body p {
    line-height: 170%;
  }
}
.moduleBody[data-size="14"] p, [data-size="14"].tecBeforeAfterHead_body p, [data-size="14"].tecExplain_body p, [data-size="14"].explainList_body p {
  font-size: 14px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .moduleBody[data-size="14"] p, [data-size="14"].tecBeforeAfterHead_body p, [data-size="14"].tecExplain_body p, [data-size="14"].explainList_body p {
    font-size: 12px;
    line-height: 170%;
  }
}
.moduleBody[data-size="15"] p, [data-size="15"].tecBeforeAfterHead_body p, [data-size="15"].tecExplain_body p, [data-size="15"].explainList_body p {
  font-size: 15px;
  line-height: 180%;
}
@media only screen and (max-width: 900px) {
  .moduleBody[data-size="15"] p, [data-size="15"].tecBeforeAfterHead_body p, [data-size="15"].tecExplain_body p, [data-size="15"].explainList_body p {
    font-size: 12px;
    line-height: 170%;
  }
}
.moduleBody[data-size="16"] p, [data-size="16"].tecBeforeAfterHead_body p, [data-size="16"].tecExplain_body p, [data-size="16"].explainList_body p {
  font-size: 16px;
  line-height: 200%;
}
@media only screen and (max-width: 900px) {
  .moduleBody[data-size="16"] p, [data-size="16"].tecBeforeAfterHead_body p, [data-size="16"].tecExplain_body p, [data-size="16"].explainList_body p {
    font-size: 14px;
    line-height: 180%;
  }
}

/** note
/**************************************/
.moduleNote {
  border-top: 1px solid #ccc;
  padding-top: 20px;
  margin-top: 32px;
}
@media only screen and (max-width: 900px) {
  .moduleNote {
    padding-top: 15px;
    margin-top: 25px;
  }
}
.moduleNote[data-border="0"] {
  border-top: none;
  margin-top: 0;
  padding-top: 10px;
}
.tecExplain + .moduleNote, .tecPoint2-3_illust + .moduleNote, .tecPoint4_list + .moduleNote, .explainList_body + .moduleNote, .tecFunctions_content + .moduleNote, .textLink + .moduleNote {
  border-top: none;
  margin-top: 25px;
  padding-top: 0;
}
@media only screen and (max-width: 900px) {
  .tecExplain + .moduleNote, .tecPoint2-3_illust + .moduleNote, .tecPoint4_list + .moduleNote, .explainList_body + .moduleNote, .tecFunctions_content + .moduleNote, .textLink + .moduleNote {
    margin-top: 15px;
  }
}
.tecBrushColumn + .moduleNote, .tecPoint2-3_illust + .moduleNote {
  margin-top: 35px;
}
@media only screen and (max-width: 900px) {
  .tecBrushColumn + .moduleNote, .tecPoint2-3_illust + .moduleNote {
    margin-top: 17px;
  }
}
.moduleNote[data-size="10"] p {
  font-size: 10px;
}
.moduleNote p {
  font-size: 9px;
  color: #9d9d9d;
  line-height: 180%;
}
.moduleNote[data-align=right] {
  text-align: right;
}
.moduleNote[data-color=black] p {
  color: #1A1A1A;
}

/** video
/**************************************/
.moduleVideo {
  margin-top: 40px;
}
.moduleVideo[data-radius=top] {
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.moduleVideo video {
  width: 100%;
  height: auto;
  display: block;
}