html {
  scroll-behavior: smooth; }

a {
  color: black;
  text-decoration: none; }

.silktouchbtn a {
  width: 400px;
  padding: 20px 0;
  font-size: 1.6rem;
  text-decoration: none;
  color: black;
  text-align: center;
  background-color: #F5F7F9;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  transition: all 0.3s;
  display: block;
  margin: 0 auto; }
  .silktouchbtn a:hover {
    background-color: #DBDBDB;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.32); }
  @media screen and (max-width: 768px) {
    .silktouchbtn a {
      width: 100%; } }

.silktouch p a {
  color: #006FA0;
  text-decoration: underline; }
.silktouch p span.text-blue {
  color: #006FA0; }
.silktouch__nav {
  height: 100%;
  border-bottom: 2px solid #006FA0;
  background: #EDF1F6;
  position: sticky;
  top: 0;
  z-index: 1000; }
  @media screen and (max-width: 768px) {
    .silktouch__nav {
      display: none; } }
  .silktouch__nav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px; }
  .silktouch__nav .navInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    border-left: 2px solid #006FA0;
    border-right: 2px solid #006FA0;
    background: white; }
    .silktouch__nav .navInner li {
      width: calc(100% / 4); }
      .silktouch__nav .navInner li a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 75px;
        transition: background 0.5s linear;
        font-size: 1.5rem; }
        @media (hover: hover) {
          .silktouch__nav .navInner li a:where(:any-link, :enabled, summary):hover {
            background: #006FA0;
            text-decoration: none;
            color: white; } }
        .silktouch__nav .navInner li a span {
          border-right: 1px solid #006FA0;
          width: 100%;
          text-align: center;
          padding: 3px 0; }
          .silktouch__nav .navInner li a span.last {
            border-right: none; }
.silktouch__main {
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid #006FA0; }
  @media screen and (max-width: 768px) {
    .silktouch__main {
      display: flex;
      flex-direction: column;
      gap: 40px; } }
  .silktouch__main .wrap {
    position: relative;
    z-index: 1; }
  .silktouch__main .main {
    position: relative;
    z-index: 1;
    min-height: clamp(320px, 31.25vw, 450px);
    display: flex;
    align-items: center; }
    @media screen and (max-width: 768px) {
      .silktouch__main .main {
        min-height: auto;
        padding: 40px 0 0; } }
    .silktouch__main .main__body {
      max-width: 448px;
      padding-right: 60px; }
      @media screen and (min-width: 1440px) {
        .silktouch__main .main__body {
          padding-right: 120px;
          max-width: fit-content; } }
      @media screen and (max-width: 768px) {
        .silktouch__main .main__body {
          max-width: none;
          padding: 0 10px; } }
    .silktouch__main .main__title .plan {
      padding: 0;
      color: black;
      font-weight: bold;
      text-align: left;
      background-color: transparent;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      height: auto;
      flex-direction: column;
      gap: 10px; }
      .silktouch__main .main__title .plan__caption {
        font-size: 2.2rem;
        line-height: 1.6; }
        @media screen and (max-width: 1080px) {
          .silktouch__main .main__title .plan__caption {
            font-size: 1.8rem; } }
      .silktouch__main .main__title .plan__name img {
        width: 392px;
        max-width: 100%;
        height: auto; }
  .silktouch__main .main__image {
    position: absolute;
    right: 0;
    top: 0;
    width: clamp(50%, calc(50% + (100vw - 1080px) * 5 / 840), 55%);
    height: clamp(320px, 31.25vw, 450px);
    margin: 0;
    z-index: 0; }
    .silktouch__main .main__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block; }
    @media screen and (max-width: 768px) {
      .silktouch__main .main__image {
        position: static;
        width: auto;
        height: auto;
        order: 2; }
        .silktouch__main .main__image img {
          width: 100%;
          height: auto;
          object-position: center center; } }
.silktouch__contents {
  background: #FFFFFF; }
  .silktouch__contents .wrap article {
    margin-top: 70px; }
  .silktouch__contents article {
    scroll-margin-top: 75px; }
  .silktouch__contents .usage-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
    flex-direction: column;
    margin-top: 25px; }
    .silktouch__contents .usage-box__item .usage-list {
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      height: auto;
      gap: 28px; }
      .silktouch__contents .usage-box__item .usage-list__label {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: auto;
        flex-direction: column; }
        .silktouch__contents .usage-box__item .usage-list__label .label-inner {
          width: 100px;
          background-color: #006FA0;
          color: #FFFFFF;
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100px;
          flex-direction: column;
          gap: 10px;
          border-radius: 6px;
          flex-shrink: 0; }
          .silktouch__contents .usage-box__item .usage-list__label .label-inner .step {
            font-size: 1.6rem;
            line-height: 1;
            border-bottom: 1px solid #FFFFFF;
            padding-bottom: 8px; }
          .silktouch__contents .usage-box__item .usage-list__label .label-inner .number {
            font-size: 3.2rem;
            line-height: 1; }
          @media screen and (max-width: 768px) {
            .silktouch__contents .usage-box__item .usage-list__label .label-inner {
              width: 75px;
              height: 100px; }
              .silktouch__contents .usage-box__item .usage-list__label .label-inner .number {
                font-size: 2.8rem; } }
        .silktouch__contents .usage-box__item .usage-list__label .border-line {
          width: 1px;
          flex: 1;
          border-left: 1px dashed #006FA0; }
      .silktouch__contents .usage-box__item .usage-list__content {
        flex: 1;
        margin-bottom: 36px; }
        .silktouch__contents .usage-box__item .usage-list__content .title {
          font-size: 2.4rem;
          font-weight: bold;
          margin-bottom: 10px;
          color: #006FA0; }
          @media screen and (max-width: 768px) {
            .silktouch__contents .usage-box__item .usage-list__content .title {
              font-size: 2rem; } }
        .silktouch__contents .usage-box__item .usage-list__content .text {
          font-size: 1.6rem;
          line-height: 170%;
          text-align: left;
          margin-bottom: 16px; }
        .silktouch__contents .usage-box__item .usage-list__content .buttons {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          height: auto;
          gap: 10px; }
          @media screen and (max-width: 768px) {
            .silktouch__contents .usage-box__item .usage-list__content .buttons {
              flex-direction: column; }
              .silktouch__contents .usage-box__item .usage-list__content .buttons .silktouchbtn {
                width: 100%; }
                .silktouch__contents .usage-box__item .usage-list__content .buttons .silktouchbtn a {
                  width: 100%; } }
  .silktouch__contents .howto-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;
    margin-top: 25px; }
    @media screen and (max-width: 768px) {
      .silktouch__contents .howto-box {
        gap: 25px; } }
    .silktouch__contents .howto-box__item {
      flex: 0 0 47%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      height: auto;
      flex-direction: column;
      gap: 20px; }
      @media screen and (max-width: 768px) {
        .silktouch__contents .howto-box__item {
          flex: 0 0 100%;
          gap: 10px; } }
      .silktouch__contents .howto-box__item .title {
        font-size: 2.4rem;
        font-weight: bold;
        color: #006FA0; }
        @media screen and (max-width: 768px) {
          .silktouch__contents .howto-box__item .title {
            font-size: 2rem; } }
      .silktouch__contents .howto-box__item .content img {
        width: 100%;
        height: auto; }
      .silktouch__contents .howto-box__item .text-wrap {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        height: auto;
        flex-direction: column;
        gap: 10px; }
      .silktouch__contents .howto-box__item .text {
        text-align: left; }
  .silktouch__contents .silktouchtable {
    width: 70%;
    border-bottom: 1px solid transparent; }
    @media screen and (max-width: 768px) {
      .silktouch__contents .silktouchtable {
        width: 100%; } }
    .silktouch__contents .silktouchtable li span {
      color: #006FA0;
      font-weight: bold; }
    .silktouch__contents .silktouchtable--last {
      border-bottom: 1px solid #CCCCCC; }
    .silktouch__contents .silktouchtable.w100 {
      width: 100%; }

/*# sourceMappingURL=silktouch.css.map */