@font-face {
  font-family: "Inter";
  src: url(/lp/unicuff/fonts/Inter-VariableFont_opsz-wght.ttf) format(truetype);
  font-display: swap;
}

@font-face {
  font-family: "ZenKakuGothicNew";
  src: url(/lp/unicuff/fonts/ZenKakuGothicNew-Light.ttf) format(truetype);
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "ZenKakuGothicNew";
  src: url(/lp/unicuff/fonts/ZenKakuGothicNew-Regular.ttf) format(truetype);
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ZenKakuGothicNew";
  src: url(/lp/unicuff/fonts/ZenKakuGothicNew-Medium.ttf) format(truetype);
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "ZenKakuGothicNew";
  src: url(/lp/unicuff/fonts/ZenKakuGothicNew-Bold.ttf) format(truetype);
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "ZenKakuGothicNew";
  src: url(/lp/unicuff/fonts/ZenKakuGothicNew-Black.ttf) format(truetype);
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Koulen";
  src: url(/lp/unicuff/fonts/Koulen-Regular.ttf) format(truetype);
  font-display: swap;
}

@font-face {
  font-family: "ZenKakuGothicAntique";
  src: url(/lp/unicuff/fonts/ZenKakuGothicAntique-Light.ttf) format(truetype);
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "ZenKakuGothicAntique";
  src: url(/lp/unicuff/fonts/ZenKakuGothicAntique-Regular.ttf) format(truetype);
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ZenKakuGothicAntique";
  src: url(/lp/unicuff/fonts/ZenKakuGothicAntique-Medium.ttf) format(truetype);
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "ZenKakuGothicAntique";
  src: url(/lp/unicuff/fonts/ZenKakuGothicAntique-Bold.ttf) format(truetype);
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "ZenKakuGothicAntique";
  src: url(/lp/unicuff/fonts/ZenKakuGothicAntique-Black.ttf) format(truetype);
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "YakuHanJPs";
  src: url(/lp/unicuff/fonts/YakuHanJPs-Thin.ttf) format(truetype);
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "YakuHanJPs";
  src: url(/lp/unicuff/fonts/YakuHanJPs-ExtraLight.ttf) format(truetype);
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "YakuHanJPs";
  src: url(/lp/unicuff/fonts/YakuHanJPs-Light.ttf) format(truetype);
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "YakuHanJPs";
  src: url(/lp/unicuff/fonts/YakuHanJPs-Regular.ttf) format(truetype);
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "YakuHanJPs";
  src: url(/lp/unicuff/fonts/YakuHanJPs-Medium.ttf) format(truetype);
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "YakuHanJPs";
  src: url(/lp/unicuff/fonts/YakuHanJPs-SemiBold.ttf) format(truetype);
  font-weight: 600;
  font-display: swap;
}


@font-face {
  font-family: "YakuHanJPs";
  src: url(/lp/unicuff/fonts/YakuHanJPs-Bold.ttf) format(truetype);
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "YakuHanJPs";
  src: url(/lp/unicuff/fonts/YakuHanJPs-ExtraBold.ttf) format(truetype);
  font-weight: 800;
  font-display: swap;
}


@font-face {
  font-family: "YakuHanJPs";
  src: url(/lp/unicuff/fonts/YakuHanJPs-Black.ttf) format(truetype);
  font-weight: 900;
  font-display: swap;
}


html {
  font-size: 8.88889px;
}

main {
  width: 100%;
  position: relative;
}

h2 {
  display: flex;
  align-items: center;
}

img {
  display: block;
  width: 100%;
}

video {
  filter: drop-shadow(0px 0px #000);
}

.copy {
  font-family: "ZenKakuGothicAntique", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
}

.header_text {
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
}

.title_unicuff {
  width: 37.5rem;
  height: auto;
}

.about,
.howto,
.customize,
.color {
  background-color: #F5F4FA;
}

.only_sp {
  display: none !important;
}

.inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 669px) and (max-width: 1280px) {
  html {
    font-size: 0.694444444444444vw;
  }
}

@media screen and (max-width: 668px) {
  html {
    font-size: 2.54452926208651vw;
  }

  .copy {
    font-size: 2rem;
  }

  .header_text {
    font-size: 1.6rem;
    margin: 0 4.3rem;
  }

  .title_unicuff {
    width: 18.3rem;
  }

  .only_pc {
    display: none !important;
  }

  .only_sp {
    display: block !important;
  }
}

/* ---------------------------------
  page_top
--------------------------------- */
.page_top {
  position: fixed;
  bottom: 8rem;
  right: 8rem;
  background-color: #53DAC8;
  width: 6rem;
  height: 6rem;
  z-index: 100;
  transition: opacity .3s, visibility .3s;
  opacity: 0;
  visibility: hidden;
}

.page_top.show {
  opacity: 1;
  visibility: visible;
}

.page_top.stop {
  position: absolute;
  bottom: 31.1rem;
}

.page_top:hover {
  opacity: .75;
}

.page_top a {
  width: 100%;
  height: 100%;
}

.page_top a::before {
  content: "";
  width: .9rem;
  height: .9rem;
  border-top: .1rem solid #227FC4;
  border-right: .1rem solid #227FC4;
  transform: translateX(-50%) rotate(-45deg);
  position: absolute;
  top: 1.6rem;
  left: 50%;
}

.page_top img {
  margin: 3.3rem auto 0;
  width: 3rem;
}

@media screen and (max-width: 668px) {
  .page_top {
    bottom: 2rem;
    right: 2rem;
  }

  .page_top.stop {
    bottom: 33.5rem;
  }
}

/* ---------------------------------
  header
--------------------------------- */
header {
  position: fixed;
  padding: 3.5rem 4rem 0 3.5em;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
}

header div {
  position: relative;
}

header .logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 22.2rem;
  height: auto;
  transition: top .3s ease-out;
}

header .logo.hidden {
  top: -22.2rem;
  transition: top .3s ease-in;
}

header .contact_button {
  position: absolute;
  top: -.5rem;
  right: 0;
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #227FC4;
  border: .1rem solid #227FC4;
  border-radius: .4rem;
  background-color: #fff;
  padding: 1.1rem 1.7rem;
}

header .contact_button:hover {
  color: #fff;
  background-color: #227FC4;
}

@media screen and (max-width: 668px) {
  header {
    padding: 1.7rem 2rem 0;
  }

  header .logo {
    width: 11.1rem;
  }

  header .contact_button {
    border-radius: .3rem;
    padding: .4rem 1.1em;
    margin-top: 0;
  }
}

/* ---------------------------------
  mv
--------------------------------- */
.mv_wrapper {
  position: relative;
  height: 88.3em;
  display: grid;
  grid-template:
    "item01 item02 item03 item04" 27.21%
    "item01 item05 item05 item06" 18.48%
    "item01 item05 item05 item09" 32.2%
    "item07 item07 item08 item09" 22.11%
    /	22.15% 22.71% 32.99% 22.15%;
}

.mv_wrapper .item01 {
  grid-area: item01;
  background-color: #B3A6FF;
  overflow: visible !important;
}

.mv_wrapper .item02 {
  grid-area: item02;
  background-color: #5FCDC1;
}

.mv_wrapper .item03 {
  grid-area: item03;
  background-color: #58B0EE;
}

.mv_wrapper .item04 {
  grid-area: item04;
  background-color: #EB994D;
}

.mv_wrapper.only_pc .item04 {
  height: 79.58% !important;
}

.mv_wrapper .item05 {
  grid-area: item05;
  background-color: #fff;
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  row-gap: 3.5em;
  font-family: "ZenKakuGothicAntique", serif;
  font-weight: 700;
}

.mv_wrapper .item06 {
  grid-area: item06;
  background-color: #fff;
}

.mv_wrapper.only_pc .item06 {
  height: 131% !important;
  transform: translateY(-23.1%);
}

.mv_wrapper .item07 {
  grid-area: item07;
  background-color: #FF5B83;
}

.mv_wrapper.only_pc .item07 {
  width: 74.77% !important;
}

.mv_wrapper .item08 {
  grid-area: item08;
  background-color: #68D08D;
}

.mv_wrapper.only_pc .item08 {
  width: 134.32% !important;
  transform: translateX(-25.6%);
}

.mv_wrapper .item09 {
  grid-area: item09;
  background-color: #F7D83F;
  overflow: visible !important;
}

.mv_wrapper .mv_item {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mv_wrapper .mv_item .mv_item_img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 101%;
  height: 101%;
  clip-path: inset(0 0 0 0);
  transform: translate(-50%, -50%)
}

.mv_wrapper .mv_item .mv_item_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mv_wrapper .item01 .mv_item_img {
  position: absolute;
  top: auto;
  bottom: -.05em;
  left: 0;
  width: 110%;
  transform: none;
  z-index: 1;
}

.mv_wrapper .item05 .copy {
  font-size: 4.1em;
}

.mv_wrapper .item05 h1 {
  width: 63em;
  height: auto;
  margin: 0 auto;
}

.mv_wrapper .item05 h1 img {
  object-fit: contain;
}

.mv_wrapper .item05 .sub_copy {
  font-size: 2.8em;
}

.mv_wrapper .item09 .mv_item_img {
  position: absolute;
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  width: 115%;
  height: 115%;
  transform: none;
  z-index: 1;
}

.mv_wrapper .anim .mv_item_img {
  opacity: 0;
}

.mv_wrapper .anim .mv_item_img.active {
  opacity: 1;
}

.mv_wrapper .anim .mv_item_img.slide-in {
  opacity: 1;
  z-index: 2;
  animation:
    reveal-up 1s cubic-bezier(.4, 0, .2, 1) forwards,
    scale-down 1s ease-out forwards;
  clip-path: inset(100% 0 0 0);
  width: 120%;
}

@keyframes reveal-up {
  0% {
    clip-path: inset(100% 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes scale-down {
  0% {
    width: 120%;
  }
  100% {
    width: 101%;
  }
}

@media screen and (max-width: 668px) {
  .mv_wrapper {
    height: 64.9rem;
  }

  .mv_wrapper .mv_item_block01 {
    grid-template:
      "item01 item02 item03" 46.39%
      "item01 item04 item04" 53.61%
      /	29.52% 35.11% 35.37%;
  }

  .mv_wrapper .mv_item_block02 {
    height: 40.22%;
  }


  .mv_wrapper .mv_item_block03 {
    grid-template:
      "item07 item06 item09" 46.39%
      "item08 item08 item09" 53.61%
      /	35.37% 35.11% 29.52%;
  }

  .mv_wrapper .mv_item_block01,
  .mv_wrapper .mv_item_block03 {
    position: relative;
    height: 29.89%;
    display: grid;
  }

  .mv_wrapper .item04 {
    overflow: visible !important;
  }

  .mv_wrapper .item05 {
    row-gap: 2.3rem;
  }

  .mv_wrapper .mv_item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .mv_wrapper .item01 .mv_item_img {
    width: 105%;
  }

  .mv_wrapper .item04 .mv_item_img {
    position: absolute;
    top: 0;
    left: 0;
    height: 110%;
    transform: none;
    z-index: 1;
  }

  .mv_wrapper .item05 .copy {
    font-size: 2.5rem;
  }

  .mv_wrapper .item05 h1 {
    width: 32.3rem;
  }

  .mv_wrapper .item05 .sub_copy {
    font-size: 2rem;
  }

  .mv_wrapper .item09 .mv_item_img {
    width: 110%;
    height: 110%;
  }
}

@media screen and (min-width: 669px) and (max-width: 1279px) {
  .mv_wrapper .item05 * {
    font-size: 0.694444444444444vw;
  }
}

@media screen and (min-width: 1280px) {
  .mv_wrapper,
  .mv_wrapper * {
    font-size: 0.694444444444444vw;
  }
}

/* ---------------------------------
  concept
--------------------------------- */
.concept {
  background-color: #227FC4;
  color: #fff;
  padding: 12rem 12rem 12rem 16.5rem;
  margin-top: -.05rem;
}

.concept .inner {
  display: flex;
  column-gap: 7.8rem;
}

.concept_img {
  position: relative;
  width: 45rem;
  height: 57.2rem;
  flex-shrink: 0;
}

.concept_img .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 106%;
}

.concept_text {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.concept_text .copy {
  font-family: "YakuHanJPs", "ZenKakuGothicAntique", sans-serif;
  white-space: nowrap;
  font-size: 4rem;
}

.concept_text .text_body {
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2;
}

.concept_text .text_body p:not(:last-child) {
  margin-bottom: 3.6rem;
}

.concept_text .sub_copy {
  font-family: "ZenKakuGothicNew", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
}

@media screen and (max-width: 668px) {
  .concept {
    padding: 6.5rem 0 7rem;
  }

  .concept .inner {
    display: block;
  }

  .concept_text {
    display: block;
  }

  .concept_text .copy {
    font-size: 2.4rem;
    margin: 0 1rem 5.7rem 21.5rem;
    line-height: 2;
    position: relative;
    text-indent: 0em;
  }

  .concept_text .copy::before {
    content: "";
    background-image: url(/lp/unicuff/images/img_concept_01_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -3.7rem;
    left: -25.4rem;
    width: 23.2rem;
    height: 29.2rem;
  }

  .concept_text .text_body {
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: -.1rem;
    margin: 0 2rem 2.9rem;
    position: relative;
  }

  .concept_text .text_body::after {
    content: "";
    background-image: url(/lp/unicuff/images/img_concept_02_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: .7rem;
    right: -2.4rem;
    width: 19.9rem;
    height: 23.7rem;
  }

  .concept_text .text_body p:not(:last-child) {
    margin-bottom: 2.6rem;
  }

  .concept_text .sub_copy {
    font-size: 1.8rem;
    margin-left: 2.3rem;
  }
}

/* ---------------------------------
  scene
--------------------------------- */
.scene {
  padding: 16rem 0 16.2rem;
}

.scene_header {
  margin-left: 8rem;
  margin-bottom: 4.4rem;
}

.scene_header .copy {
  margin-bottom: 2rem;
}

.scene_header h2 {
  column-gap: 3.1rem;
}

.scene_header .title_multiply {
  width: 4.7rem;
}

.scene_header h2 span {
  position: relative;
  height: 11.6rem;
  border: .1rem solid #000;
  padding: 0 2.8rem;
  width: auto;
  transition: width 2s ease;
}

.scene_header span .slide_title {
  display: none;
}

.scene_header span .slide_title.company,
.scene_header span .slide_title.ceremony {
  padding: 2.5rem 0 .2rem;
}

.scene_header span .slide_title.event {
  padding: 2.7rem 0 2.2rem;
}

.scene_header span .slide_title.casual,
.scene_header span .slide_title.identification,
.scene_header span .slide_title.club {
  padding: 2.1rem 0 2.2rem;
}

.scene_header span .slide_title.active {
  display: block;
  position: relative;
  height: 100%;
  width: auto;
}

.scene_slider {
  position: relative;
  overflow: visible;
}

.scene_slider .slick-track {
  display: flex !important;
  align-items: flex-start;
  column-gap: 3.6rem;
  margin-left: 8.8rem;
  transform: none !important;
  transition: left .3s ease !important;
}

.scene_slider .slick-slider .slick-track {
  transition-timing-function: ease !important;
}

.scene_slider .slick-track .slide_item.slick-active {
  width: 65.5rem !important;
  opacity: 1;
}

.scene_slider .slick-track .slide_item {
  width: 32.4rem !important;
  transition: all .3s ease;
  opacity: .3;
}

.scene_slider .slide_img {
  width: 100%;
  height: 37.8rem;
  background-size: 65.5rem;
  background-repeat: no-repeat;
  background-position: center;
  transition: all .3s ease;
  margin-bottom: 2.4rem;
}

.scene_slider .slide_title {
  color: #227FC4;
  font-family: "ZenKakuGothicAntique", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.scene_slider .slide_text {
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  opacity: 0;
  transition: all .3s ease;
  margin-top: 1.8rem;
  height: 5.5rem;
}

.scene_slider .slick-track .slide_item.slick-active .slide_text {
  opacity: 1;
}

.scene_slider .slide01 .slide_img {
  background-image: url("/lp/unicuff/images/slide_scene_01.jpg");
}

.scene_slider .slide02 .slide_img {
  background-image: url("/lp/unicuff/images/slide_scene_02.png");
  background-position: right -2rem center;
}

.scene_slider .slide02.slick-active .slide_img {
  background-position: center;
}

.scene_slider .slide03 .slide_img {
  background-image: url("/lp/unicuff/images/slide_scene_03.jpg");
}

.scene_slider .slide04 .slide_img {
  background-image: url("/lp/unicuff/images/slide_scene_04.jpg");
}

.scene_slider .slide05 .slide_img {
  background-image: url("/lp/unicuff/images/slide_scene_05.jpg");
}

.scene_slider .slide06 .slide_img {
  background-image: url("/lp/unicuff/images/slide_scene_06.png");
}

.scene_slider .dots-wrap {
  display: flex;
  color: transparent;
  width: 111rem;
  column-gap: .8rem;
  margin: 0 auto;
}

.scene_slider .dots-wrap li {
  background-color: #D9D9D9;
  height: .6rem;
  width: calc(calc(100% - 4.8rem) / 6);
  cursor: pointer;
}

.scene_slider .dots-wrap li.slick-active {
  background-color: #227FC4;
}

.scene_slider .slick-arrow {
  position: absolute;
  width: 4rem;
  height: 4rem;
  background-color: #227FC4;
  border-radius: 50%;
  color: transparent;
  bottom: 0;
  transform: translateY(50%);
  cursor: pointer;
  transition: background-color .3s ease, opacity .3s ease !important;
}

.scene_slider .slick-arrow.slick-disabled {
  background-color: #D9D9D9;
  pointer-events: none;
}

.scene_slider .slick-arrow::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-top: solid .2rem #fff;
  border-right: solid .2rem #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}

.scene_slider .slick-prev {
  left: 8rem;
}

.scene_slider .slick-prev::before {
  transform: rotate(-135deg);
  margin-left: -.25rem;
  margin-top: -.5rem;
}

.scene_slider .slick-next {
  right: 8rem;
}
.scene_slider .slick-next::before {
  transform: rotate(45deg);
  margin-left: -.75rem;
  margin-top: -.5rem;
}

.scene_slider .slick-prev,
.scene_slider .slick-next {
  opacity: 1;
}

.scene_slider .slick-prev:hover,
.scene_slider .slick-next:hover {
  opacity: .75;
}

@media screen and (min-width: 668px) and (min-width: 1281px) {
  .scene_slider .slick-prev {
    left: 0;
  }

  .scene_slider .slick-next {
    right: 0;
  }
}

@media screen and (min-width: 668px) and (max-height: 700px) {
  .scene_header {
    margin-bottom: 3rem;
  }

  .scene_slider .slide_img {
    height: 27rem;
    background-size: 46rem;
  }

  .scene_slider .slick-track .slide_item.slick-active {
    width: 46rem !important;
  }

  .scene_slider .slick-track .slide_item {
    width: 27rem !important;
  }

    .scene_slider .slide_title {
    font-size: 3rem;
  }

  .scene_slider .slide_text {
    font-size: 1.5rem;
    margin-top: 1.2rem;
    height: 6.8rem;
  }
}

@media screen and (min-width: 668px) and (max-height: 600px) {
  .scene_header {
    margin-bottom: 2rem;
  }

  .scene_slider .slide_img {
    height: 23rem;
    background-size: 40rem;
    margin-bottom: 2rem;
  }

  .scene_slider .slide02 .slide_img {
    background-position: right -1rem center;
  }

  .scene_slider .slick-track .slide_item.slick-active {
    width: 40rem !important;
  }

  .scene_slider .slick-track .slide_item {
    width: 20rem !important;
  }

  .scene_slider .slide_title {
    font-size: 2.6rem;
  }

  .scene_slider .slide_text {
    font-size: 1.4rem;
    margin-top: 1.2rem;
    height: 5rem;
  }
}

@media screen and (max-width: 668px) {
  .scene {
    padding: 7rem 0;
  }

  .scene_header {
    margin-left: 0;
    text-align: center;
  }

  .scene_header .copy {
    margin-bottom: 2.8rem;
  }

  .scene_header h2 {
    flex-flow: column;
    row-gap: 1.8rem;
  }

  .scene_header .title_multiply {
    width: 2.3rem;
  }

  .scene_header h2 span {
    padding: 0 1.4rem;
    border: .05rem solid #000;
    height: 5.7rem;
  }

  .scene_header span .slide_title.company,
  .scene_header span .slide_title.ceremony {
    padding: 1.2rem 0 .2rem;
  }

  .scene_header span .slide_title.event {
    padding: 1.4rem 0 1.1rem;
  }

  .scene_header span .slide_title.casual,
  .scene_header span .slide_title.identification,
  .scene_header span .slide_title.club {
    padding: .9rem 0 1.1rem;
  }

  .scene_slider .slick-track {
    column-gap: 2rem;
    margin-left: 6rem;
  }

  .scene_slider .slick-track .slide_item.slick-active {
    width: 27.8rem !important;
  }

  .scene_slider .slick-track .slide_item {
    width: 27.8rem !important;
  }

  .scene_slider .slide_img {
    width: 100%;
    height: 16rem;
    background-size: 27.8rem;
    margin-bottom: 2rem;
  }

  .scene_slider .slide_title {
    font-size: 1.8rem;
  }

  .scene_slider .slide_text {
    font-size: 1.5rem;
    margin-top: 1.6rem;
    height: auto;
  }

  .scene_slider .slick-track .slide_item.slick-active .slide_text {
    opacity: 1;
    visibility: visible;
  }

  .scene_slider .dots-wrap {
    width: 24.1rem;
    column-gap: .2rem;
    padding-top: 2rem;
  }

  .scene_slider .dots-wrap li {
    height: .3rem;
    width: calc(calc(100% - 1rem) / 6);
  }

  .scene_slider .slick-arrow::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border-top: solid .2rem #fff;
    border-right: solid .2rem #fff;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .scene_slider .slick-prev {
    left: 2rem;
  }
  .scene_slider .slick-prev::before {
    margin-left: -.25rem;
    margin-top: -.5rem;
  }

  .scene_slider .slick-next {
    right: 2rem;

  }
  .scene_slider .slick-next::before {
    margin-left: -.75rem;
    margin-top: -.5rem;
  }
}

/* ---------------------------------
  about
--------------------------------- */
.about {
  padding-top: 16.5rem;
}

.about_header {
  text-align: center;
  margin-bottom: 8rem;
}

.about_header .copy {
  margin-bottom: 4.1rem;
}

.about_header h2 {
  justify-content: center;
  column-gap: 3.2rem;
  margin-bottom: 4rem;
}

.about_header .title_uni {
  width: 15.5rem;
}

.about_header .title_plus {
  width: 5.2rem;
}

.about_header .title_cuff {
  width: 21rem;
}

.about_wrapper {
  display: grid;
  gap: 10rem;
}

.about_item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7.6rem;
}

.about_item:nth-child(even) {
  direction: rtl;
}

.about_item:nth-child(even) > * {
  direction: ltr;
}

.about_item.about_item .about_item_text {
  margin-top: 4.3rem;
}

.about_item.about_item:nth-child(odd) .about_item_text {
  margin-right: 8rem;
}

.about_item.about_item:nth-child(even) .about_item_text {
  margin-left: 8rem;
}

.about_item .about_item_text h3 {
  font-family: "ZenKakuGothicAntique", sans-serif;
  font-weight: 700;
  color: #227FC4;
  font-size: 5.5rem;
  margin-bottom: 2.5rem;
  line-height: 1.3;
}

.about_item .about_item_text h3 > span {
  font-size: 6.5rem;
}

.about_item .about_item_text p {
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
}

.about_item .about_item_text p + p {
  margin-top: 2.7rem;
}

.about_item .about_item_img {
  position: relative;
}

.about_item.item01 .about_item_img div::after {
  content: "01";
}

.about_item.item02 .about_item_img div::after {
  content: "02";
}

.about_item.item03 .about_item_img div::after {
  content: "03";
}

.about_item .about_item_img div::after {
  font-family: "Koulen";
  font-size: 14.2rem;
  color: #227FC4;
  position: absolute;
  top: 0;
  left: 9.6rem;
  z-index: 1;
  transform: translateY(-50%);
}

.about_item .about_item_img div img {
  z-index: 0;
}

@media screen and (max-width: 668px) {
  .about {
    padding-top: 7rem;
  }

  .about_header {
    margin-bottom: 9.4rem;
  }

  .about_header .copy {
    margin-bottom: 3rem;
  }

  .about_header h2 {
    column-gap: 1.7rem;
    margin-bottom: 2.8rem;
  }

  .about_header .title_uni {
    width: 7.4rem;
  }

  .about_header .title_plus {
    width: 2.5rem;
  }

  .about_header .title_cuff {
    width: 10rem;
  }

  .about_item {
    display: block;
  }

  .about_item.about_item:nth-child(odd) {
    margin-right: 2rem;
  }

  .about_item.about_item:nth-child(even) {
    margin-left: 2rem;
  }

  .about_item.about_item:nth-child(odd) .about_item_text {
    margin-right: 0;
    margin-left: 2rem;
  }

  .about_item.about_item:nth-child(even) .about_item_text {
    margin-left: 0;
    margin-right: 2rem;
  }

  .about_item .about_item_text h3 {
    font-size: 3.1rem;
    margin-bottom: 1.5rem;
  }

  .about_item .about_item_text h3 > span {
    font-size: 3.7rem;
  }

  .about_item .about_item_text p {
    font-size: 1.5rem;
  }

  .about_item .about_item_text p + p {
    margin-top: 2.3rem;
  }

  .about_item .about_item_img {
    margin-bottom: 3rem;
  }

  .about_item .about_item_img div::after {
    font-size: 7.3rem;
    left: 2rem;
  }
}

/* ---------------------------------
  howto
--------------------------------- */
.howto {
  padding: 16rem 0;
}

.howto_header {
  display: flex;
  justify-content: center;
  margin-bottom: 4rem;
}

.howto_header .title_howto {
  width: 38.3rem;
  height: auto;
}

.howto_movie {
  position: relative;
  width: 76.4rem;
  margin: auto;
}

.howto_movie video {
  width: 100%;
  height: auto;
  display: block;
}

.movie_content {
  position: relative;
  margin-bottom: 3rem;
  cursor: pointer;
}

.play_pause_btn {
  background-color: rgba(28,28,28,.6);
  border-radius: 50%;
  width: 6.2rem;
  height: 6.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease-in-out;
  pointer-events: none;
}

.movie_content.playing .play_pause_btn {
  opacity: 0;
}

.movie_content.playing:hover .play_pause_btn {
  opacity: 1;
}

.movie_content.playing .play_pause_btn::before {
  content: "";
  background-image: url("/lp/unicuff/images/icon_pause.svg");
  width: 2rem;
  height: 2rem;
  background-size: contain;
  background-repeat: no-repeat;
}

.movie_content.pause .play_pause_btn::before {
  content: "";
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.9rem;
  height: 2.3rem;
  margin-left: .3rem;
}

.progress-container {
  padding: 1rem 0;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: .6rem;
  background: #EAEAEA;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.howto_movie:hover .progress-bar {
  opacity: 1;
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #227FC4;
  width: 0;
  will-change: width;
}

.progress-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 1.2rem;
  height: 1.2rem;
  background: #227FC4;
  border: .2rem solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.1s ease;
  will-change: left, opacity;
}

.progress-bar:hover .progress-handle {
  opacity: 1;
}

.progress-handle:active,
.progress-bar:active .progress-handle {
  transform: translate(-50%, -50%) scale(1.2);
  opacity: 1;
}

.volume_btn {
  width: 3rem;
  height: 3rem;
  background-image: url("/lp/unicuff/images/icon_volume_off.svg");
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity .3s ease-in-out;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
}

.volume_btn.unmuted {
  background-image: url("/lp/unicuff/images/icon_volume_on.svg");
}

.movie_content.playing .volume_btn {
  opacity: 0;
}

.movie_content.playing:hover .volume_btn {
  opacity: 1;
}

@media screen and (max-width: 668px) {
  .howto {
    padding: 7rem 0;
  }

  .howto_header {
    margin-bottom: 2.9rem;
  }

  .howto_header .title_howto {
    width: 19.2rem;
  }

  .howto_movie {
    width: 35.3rem;
  }

  .movie_content {
    margin-bottom: 2rem;
  }

  .play_pause_btn {
    width: 3.2rem;
    height: 3.2rem;
  }

  .movie_content.pause .play_pause_btn::before {
    width: 1rem;
    height: 1.2rem;
    margin-left: .15rem;
  }

  .movie_content.playing .play_pause_btn::before {
    width: 1.2rem;
    height: 1.2rem;
  }

  .progress-bar:hover .progress-handle {
    opacity: 1;
  }

  .volume_btn {
    right: 1rem;
    bottom: 1rem;
  }
}

/* ---------------------------------
  color
--------------------------------- */
.color .inner {
  display: flex;
}

.color_right,
.color_left {
  position: relative;
  width: 50%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.color_left .color_img,
.color_right .color_img {
  position: relative;
  height: 65.3rem;
  width: 100%;
  overflow: hidden;
}

.color_left .slide,
.color_right .slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.color_left .slide {
  width: calc(100% + .1rem);
  left: 0;
}

.color_left .slide.active,
.color_right .slide.active {
  opacity: 1;
}

.color_left .slide.slide-in,
.color_right .slide.slide-in {
  opacity: 1;
  z-index: 2;
}

.color_left .slide.slide-in {
  animation: reveal-down 2s cubic-bezier(.4, 0, .2, 1) forwards;
  clip-path: inset(0 0 101% 0);
}

.color_right .slide.slide-in {
  animation: reveal-up 2s cubic-bezier(.4, 0, .2, 1) forwards;
  clip-path: inset(101% 0 0 0);
}

.color_left .slide .slide_img,
.color_right .slide .slide_img {
  width: 100%;
  height: 100%;
}

.color_left .slide .slide_img img,
.color_right .slide .slide_img img {
  height: 100%;
}

@keyframes reveal-down {
  0% {
    clip-path: inset(0 0 101% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes reveal-up {
  0% {
    clip-path: inset(101% 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.color_left .color_text,
.color_right .color_text {
  position: absolute;
  top: .4rem;
  z-index: 3;
  width: 8.4rem;
}

.color_left .color_text {
  left: -.1rem;
}

.color_right .color_text {
  right: -.7rem;
}

@media screen and (max-width: 668px) {
  .color .inner {
    display: block;
  }

  .color_center {
    position: relative;
  }

  .color_center .color_text {
    position: absolute;
    width: 3.3rem;
    z-index: 4;
  }

  .color_center .color_text.Embroidery {
    top: .3rem;
    left: -.05rem;
  }

  .color_center .color_text.Print {
    top: calc(50% + .3rem);
    right: -.2rem;
  }

  .color_center .color_img {
    width: 100%;
    height: 49.8rem;
    position: relative;
    overflow: hidden;
  }

  .color_center .color_img .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    opacity: 0;
    z-index: 1;
  }

  .color_center .color_img .slide.active {
    opacity: 1;
    z-index: 2;
  }

  .color_center .color_img .slide.slide-in {
    opacity: 1;
    z-index: 3;
  }

  .color_center .color_img .slide .slide_img {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .color_center .color_img .slide .slide_img img {
    height: 100%;
    object-fit: cover;
  }

  .color_center .color_img .slide .slide_img.left img {
    object-position: left;
  }

  .color_center .color_img .slide .slide_img.right img {
    object-position: right;
  }

  .slide.slide-in .slide_img img {
    opacity: 1;
  }

  .slide.slide-in .slide_img.top {
    clip-path: polygon(0 0, 0 0, 0 101%, 0 101%);
    animation: maskTopClip 1s ease-out forwards;
  }

  .slide.slide-in .slide_img.under {
    clip-path: polygon(100% 0, 100% 0, 100% 101%, 100% 101%);
    animation: maskUnderClip 1s ease-out forwards;
  }
}

@keyframes maskTopClip {
  0% {
    clip-path: polygon(0 0, 0 0, 0 101%, 0% 101%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 101%, 0 101%);
  }
}

@keyframes maskUnderClip {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 101%, 100% 101%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 101%, 0 101%);
  }
}

/* ---------------------------------
  customize
--------------------------------- */
.customize {
  padding: 12.5rem 0 14rem;
}

.customize_header {
  text-align: center;
  margin-bottom: 8.1rem;
}

.customize_header .copy {
  text-align: center;
  margin-bottom: 4.8rem;
}

.customize_header h2 {
  column-gap: 2.8rem;
  justify-content: center;
  margin-bottom: 4.9rem;
}

.customize_header .title_multiply {
  width: 4.7rem;
  height: auto;
}

.customize_header .title_customize {
  width: 49.3rem;
  height: auto;
}

.customize_color {
  background-color: #fff;
  padding: 4.2rem 4.9rem 5rem;
  margin: 0 37rem;
}

.customize_color_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.2rem;
}

.customize_color_header .color_img {
  width: 16.3rem;
  height: auto;
}

.customize_color_header .center_text {
  text-align: center;
}

.customize_color_header .center_text h3 {
  display: flex;
  justify-content: center;
}

.customize_color_header .center_text img {
  width: 11.4rem;
  height: auto;
}

.customize_color_header .center_text p {
  font-family: "ZenKakuGothicNew", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
}

.customize_color_table {
  width: 100%;
}

.customize_wrapper {
  background-color: #227FC4;
  padding: 2.1rem 12.6rem 2.1rem 7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 111rem;
  margin: 12rem auto 0;
  color: #fff;
}

.customize_wrapper h3 {
  font-family: "ZenKakuGothicAntique", sans-serif;
  font-weight: 700;
  font-size: 4rem;
  margin-bottom: 1.8rem;
  line-height: 1.3;
}

.customize_wrapper p {
  font-family: "ZenKakuGothicNew", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.5;
}

.customize_wrapper .customize_img {
  width: 49.4rem;
  height: auto;
}

@media screen and (max-width: 668px) {
  .customize {
    padding: 7rem 0 0;
  }

  .customize_header {
    margin-bottom: 5rem;
  }

  .customize_header .copy {
    margin-bottom: 2.8rem;
  }

  .customize_header h2 {
    flex-flow: column;
    margin-bottom: 2.6rem;
  }

  .customize_header .title_multiply {
    width: 2.4rem;
    margin-top: 2rem;
  }

  .customize_header .title_customize {
    width: 23.9rem;
    margin-top: 1rem;
  }

  .customize_header p {
    font-size: 1.8rem;
  }

  .customize_color {
    padding: 3.2rem 3.8rem 3.8rem;
    margin: 0 2rem;
  }

  .customize_color_header {
    margin-bottom: 1.9rem;
  }

  .customize_color_header > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
  }

  .customize_color_header .color_img {
    width: 9.3rem;
  }

  .customize_color_header h3 img {
    width: 6.1rem;
  }

  .customize_color_header p {
    font-family: "ZenKakuGothicNew", sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    text-align: center;
    margin: 0 -3.8rem;
  }

  .customize_wrapper {
    padding: 3.7rem 0 3rem;
    display: block;
    width: 100%;
    margin: 5rem 0 0;
  }

  .customize_wrapper .customize_text {
    margin: 0 2rem;
  }

  .customize_wrapper h3 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }

  .customize_wrapper p {
    font-size: 1.5rem;
  }

  .customize_wrapper .customize_img {
    width: 100%;
    margin-top: 4.5rem;
    margin-left: -.4rem;
  }
}

/* ---------------------------------
  contact
--------------------------------- */
.contact {
  text-align: center;
  padding: 11rem 0 12rem;
  font-family: "ZenKakuGothicAntique", sans-serif;
  font-weight: 700;
}

.contact h2 {
  justify-content: center;
  font-size: 4rem;
  margin-bottom: 6rem;
}

.contact a {
  color: #000;
  font-family: "ZenKakuGothicAntique", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 3.1rem 12.9rem;
  border: .1rem solid #000;
  border-radius: .8rem;
}

.contact a:hover {
  color: #fff;
  background-color: #000;
}

@media screen and (max-width: 668px) {
  .contact {
    padding: 7rem 0;
  }

  .contact h2 {
    font-size: 3rem;
    margin-bottom: 4rem;
  }

  .contact a {
    padding: 1.9rem 12.5rem 1.9rem 12rem;
  }
}

/* ---------------------------------
  footer
--------------------------------- */
footer {
  font-family: "ZenKakuGothicAntique", sans-serif;
  background-color: #227FC4;
  color: #fff;
  padding: 8rem 8rem 2.4rem;
}

.logo_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rem;
  font-weight: 700;
}

.logo_wrapper .unicuff .unicuff_logo {
  width: 30.5rem;
  margin-bottom: 2.8rem;
}

.logo_wrapper .unicuff .copy {
  font-size: 2.4rem;
  font-weight: 700;
}

.logo_wrapper .service {
  display: flex;
  align-items: flex-end;
  column-gap: 8.1rem;
  margin-bottom: 2.2rem;
}

.logo_wrapper .service .uniform_service_logo {
  width: 17rem;
}

.logo_wrapper .service .uniform_service_logo:hover {
  opacity: .75;
}

.logo_wrapper .service .duskin_logo {
  width: 17.9rem;
}

.logo_wrapper .service .duskin_logo:hover {
  opacity: .75;
}

.copyright_wrapper {
  border-top: .2rem solid #fff;
  padding-top: 2.4rem;
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  font-weight: 500;
}

@media screen and (max-width: 668px) {
  footer {
    padding: 5.3rem 2rem 2.7rem;
  }

  .logo_wrapper {
    flex-flow: column;
    row-gap: 4.4rem;
    margin-bottom: 4rem;
  }

  .logo_wrapper .unicuff .unicuff_logo {
    width: 26.4rem;
    margin: 0 auto 1.8rem;
  }

  .logo_wrapper .unicuff .copy {
    font-size: 2rem;
    text-align: center;
  }

  .logo_wrapper .service {
    column-gap: 2.6rem;
    margin: 0 auto;
  }

  .logo_wrapper .service .uniform_service_logo {
    width: 10.4rem;
  }

  .logo_wrapper .service .duskin_logo {
    width: 11rem;
  }

  .copyright_wrapper {
    border-top: .1rem solid #fff;
    flex-flow: column;
    text-align: center;
    padding-top: 2rem;
  }

  .copyright_wrapper p + p {
    margin-top: 1rem;
  }
}