@charset "UTF-8";
/* A Modern CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
ul,
li,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

li {
  list-style-type: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@keyframes showAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hiddenAnime {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes circlemove {
  0% {
    bottom: 80%;
  }
  100% {
    bottom: 10%;
  }
}
@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes line {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes rollInC {
  0% {
    opacity: 0;
    transform: translateX(100vw) rotate(720deg);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}
@keyframes dropInDot {
  0% {
    opacity: 0;
    transform: translateY(-200px);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rollInM {
  0% {
    opacity: 0;
    transform: translateX(-100vw) rotate(-720deg);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}
@keyframes standUpP {
  0% {
    opacity: 0;
    transform: rotate(90deg);
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes dropInBlock {
  0% {
    opacity: 0;
    transform: translateY(-180px) rotate(20deg);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px) rotate(2deg);
  }
  50% {
    transform: translateY(-60px) rotate(-6deg);
  }
  75% {
    transform: translateY(-12px) rotate(4deg);
  }
  90% {
    transform: translateY(-20px) rotate(-4deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}
@keyframes katakata01 {
  0%, 80%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  85% {
    transform: translate(0px, -16px) rotate(4deg);
  }
  90% {
    transform: translate(0px, -16px) rotate(-4deg);
  }
  95% {
    transform: translate(0px, -8px) rotate(2deg);
  }
}
@keyframes katakata02 {
  0%, 80%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  85% {
    transform: translate(0px, 16px) rotate(4deg);
  }
  90% {
    transform: translate(0px, 16px) rotate(-4deg);
  }
  95% {
    transform: translate(0px, 8px) rotate(2deg);
  }
}
.gnav__logo, .header__logo--link {
  font-family: "IM Fell English";
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: #222222;
}
@media screen and (min-width: 768px) {
  .gnav__logo, .header__logo--link {
    font-size: 24px;
  }
}

.wrapper .main .mv__txtarea--ttl {
  font-family: "IM Fell English";
  font-size: 34px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16em;
}
@media screen and (min-width: 768px) {
  .wrapper .main .mv__txtarea--ttl {
    font-size: 36px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .mv__txtarea--ttl {
    font-size: clamp(40px, 3.8vw, 64px);
  }
}

#thanks .thanks__txtarea--shoulder, #confirm .confirm__txtarea--shoulder, #form .form__txtarea--shoulder, #detail .detail__txtarea--shoulder, #detail .detail__overview--shoulder, #detail .detail__collars--shoulder, #detail .detail__fonts--shoulder, #detail .detail__css--shoulder, #lp .lp__txtarea--shoulder,
#lp .print__txtarea--shoulder,
#lp .sales__txtarea--shoulder,
#lp .data__txtarea--shoulder,
#lp .coding__txtarea--shoulder,
#print .lp__txtarea--shoulder,
#print .print__txtarea--shoulder,
#print .sales__txtarea--shoulder,
#print .data__txtarea--shoulder,
#print .coding__txtarea--shoulder,
#sales .lp__txtarea--shoulder,
#sales .print__txtarea--shoulder,
#sales .sales__txtarea--shoulder,
#sales .data__txtarea--shoulder,
#sales .coding__txtarea--shoulder,
#data .lp__txtarea--shoulder,
#data .print__txtarea--shoulder,
#data .sales__txtarea--shoulder,
#data .data__txtarea--shoulder,
#data .coding__txtarea--shoulder,
#coding .lp__txtarea--shoulder,
#coding .print__txtarea--shoulder,
#coding .sales__txtarea--shoulder,
#coding .data__txtarea--shoulder,
#coding .coding__txtarea--shoulder, #banner .banner__txtarea--shoulder,
#banner .other__txtarea--shoulder,
#other .banner__txtarea--shoulder,
#other .other__txtarea--shoulder, .wrapper .main .container .about__shoulder, .wrapper .main .work__txtarea--shoulder, .wrapper .main .skill__shoulder, .wrapper .main .book__shoulder {
  font-family: "ryo-gothic-plusn";
  font-size: 16px;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  #thanks .thanks__txtarea--shoulder, #confirm .confirm__txtarea--shoulder, #form .form__txtarea--shoulder, #detail .detail__txtarea--shoulder, #detail .detail__overview--shoulder, #detail .detail__collars--shoulder, #detail .detail__fonts--shoulder, #detail .detail__css--shoulder, #lp .lp__txtarea--shoulder,
  #lp .print__txtarea--shoulder,
  #lp .sales__txtarea--shoulder,
  #lp .data__txtarea--shoulder,
  #lp .coding__txtarea--shoulder,
  #print .lp__txtarea--shoulder,
  #print .print__txtarea--shoulder,
  #print .sales__txtarea--shoulder,
  #print .data__txtarea--shoulder,
  #print .coding__txtarea--shoulder,
  #sales .lp__txtarea--shoulder,
  #sales .print__txtarea--shoulder,
  #sales .sales__txtarea--shoulder,
  #sales .data__txtarea--shoulder,
  #sales .coding__txtarea--shoulder,
  #data .lp__txtarea--shoulder,
  #data .print__txtarea--shoulder,
  #data .sales__txtarea--shoulder,
  #data .data__txtarea--shoulder,
  #data .coding__txtarea--shoulder,
  #coding .lp__txtarea--shoulder,
  #coding .print__txtarea--shoulder,
  #coding .sales__txtarea--shoulder,
  #coding .data__txtarea--shoulder,
  #coding .coding__txtarea--shoulder, #banner .banner__txtarea--shoulder,
  #banner .other__txtarea--shoulder,
  #other .banner__txtarea--shoulder,
  #other .other__txtarea--shoulder, .wrapper .main .container .about__shoulder, .wrapper .main .work__txtarea--shoulder, .wrapper .main .skill__shoulder, .wrapper .main .book__shoulder {
    font-size: clamp(14px, 1.3vw, 20px);
  }
}

#thanks .thanks__txtarea--ttl, #confirm .confirm__txtarea--ttl, #form .form__txtarea--ttl, #detail .contact__head--ttl, #lp .lp__txtarea--ttl,
#lp .print__txtarea--ttl,
#lp .sales__txtarea--ttl,
#lp .data__txtarea--ttl,
#lp .coding__txtarea--ttl,
#print .lp__txtarea--ttl,
#print .print__txtarea--ttl,
#print .sales__txtarea--ttl,
#print .data__txtarea--ttl,
#print .coding__txtarea--ttl,
#sales .lp__txtarea--ttl,
#sales .print__txtarea--ttl,
#sales .sales__txtarea--ttl,
#sales .data__txtarea--ttl,
#sales .coding__txtarea--ttl,
#data .lp__txtarea--ttl,
#data .print__txtarea--ttl,
#data .sales__txtarea--ttl,
#data .data__txtarea--ttl,
#data .coding__txtarea--ttl,
#coding .lp__txtarea--ttl,
#coding .print__txtarea--ttl,
#coding .sales__txtarea--ttl,
#coding .data__txtarea--ttl,
#coding .coding__txtarea--ttl, #lp .contact__head--ttl,
#print .contact__head--ttl,
#sales .contact__head--ttl,
#data .contact__head--ttl,
#coding .contact__head--ttl, #banner .banner__txtarea--ttl,
#banner .other__txtarea--ttl,
#other .banner__txtarea--ttl,
#other .other__txtarea--ttl, #banner .contact__head--ttl,
#other .contact__head--ttl, .wrapper .main .container .about__ttl, .wrapper .main .work__txtarea--ttl, .wrapper .main .skill__ttl, .wrapper .main .book__ttl, .wrapper .main .contact__head--ttl {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  #thanks .thanks__txtarea--ttl, #confirm .confirm__txtarea--ttl, #form .form__txtarea--ttl, #detail .contact__head--ttl, #lp .lp__txtarea--ttl,
  #lp .print__txtarea--ttl,
  #lp .sales__txtarea--ttl,
  #lp .data__txtarea--ttl,
  #lp .coding__txtarea--ttl,
  #print .lp__txtarea--ttl,
  #print .print__txtarea--ttl,
  #print .sales__txtarea--ttl,
  #print .data__txtarea--ttl,
  #print .coding__txtarea--ttl,
  #sales .lp__txtarea--ttl,
  #sales .print__txtarea--ttl,
  #sales .sales__txtarea--ttl,
  #sales .data__txtarea--ttl,
  #sales .coding__txtarea--ttl,
  #data .lp__txtarea--ttl,
  #data .print__txtarea--ttl,
  #data .sales__txtarea--ttl,
  #data .data__txtarea--ttl,
  #data .coding__txtarea--ttl,
  #coding .lp__txtarea--ttl,
  #coding .print__txtarea--ttl,
  #coding .sales__txtarea--ttl,
  #coding .data__txtarea--ttl,
  #coding .coding__txtarea--ttl, #lp .contact__head--ttl,
  #print .contact__head--ttl,
  #sales .contact__head--ttl,
  #data .contact__head--ttl,
  #coding .contact__head--ttl, #banner .banner__txtarea--ttl,
  #banner .other__txtarea--ttl,
  #other .banner__txtarea--ttl,
  #other .other__txtarea--ttl, #banner .contact__head--ttl,
  #other .contact__head--ttl, .wrapper .main .container .about__ttl, .wrapper .main .work__txtarea--ttl, .wrapper .main .skill__ttl, .wrapper .main .book__ttl, .wrapper .main .contact__head--ttl {
    font-size: 52px;
  }
}
@media screen and (min-width: 1024px) {
  #thanks .thanks__txtarea--ttl, #confirm .confirm__txtarea--ttl, #form .form__txtarea--ttl, #detail .contact__head--ttl, #lp .lp__txtarea--ttl,
  #lp .print__txtarea--ttl,
  #lp .sales__txtarea--ttl,
  #lp .data__txtarea--ttl,
  #lp .coding__txtarea--ttl,
  #print .lp__txtarea--ttl,
  #print .print__txtarea--ttl,
  #print .sales__txtarea--ttl,
  #print .data__txtarea--ttl,
  #print .coding__txtarea--ttl,
  #sales .lp__txtarea--ttl,
  #sales .print__txtarea--ttl,
  #sales .sales__txtarea--ttl,
  #sales .data__txtarea--ttl,
  #sales .coding__txtarea--ttl,
  #data .lp__txtarea--ttl,
  #data .print__txtarea--ttl,
  #data .sales__txtarea--ttl,
  #data .data__txtarea--ttl,
  #data .coding__txtarea--ttl,
  #coding .lp__txtarea--ttl,
  #coding .print__txtarea--ttl,
  #coding .sales__txtarea--ttl,
  #coding .data__txtarea--ttl,
  #coding .coding__txtarea--ttl, #lp .contact__head--ttl,
  #print .contact__head--ttl,
  #sales .contact__head--ttl,
  #data .contact__head--ttl,
  #coding .contact__head--ttl, #banner .banner__txtarea--ttl,
  #banner .other__txtarea--ttl,
  #other .banner__txtarea--ttl,
  #other .other__txtarea--ttl, #banner .contact__head--ttl,
  #other .contact__head--ttl, .wrapper .main .container .about__ttl, .wrapper .main .work__txtarea--ttl, .wrapper .main .skill__ttl, .wrapper .main .book__ttl, .wrapper .main .contact__head--ttl {
    font-size: clamp(48px, 5vw, 88px);
  }
}

.wrapper .main .skill__head--ttl {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__head--ttl {
    font-size: 38px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__head--ttl {
    font-size: clamp(38px, 3.3vw, 72px);
  }
}

.wrapper .main .skill__tool--head--ttl {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0em;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__tool--head--ttl {
    font-size: clamp(20px, 1.7vw, 32px);
  }
}

.wrapper .main .book__box--case--ttl {
  font-family: "ryo-gothic-plusn";
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0em;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__box--case--ttl {
    font-size: clamp(24px, 1.6vw, 32px);
  }
}

#lp .lp__txtarea--days,
#lp .print__txtarea--days,
#lp .sales__txtarea--days,
#lp .data__txtarea--days,
#lp .coding__txtarea--days,
#print .lp__txtarea--days,
#print .print__txtarea--days,
#print .sales__txtarea--days,
#print .data__txtarea--days,
#print .coding__txtarea--days,
#sales .lp__txtarea--days,
#sales .print__txtarea--days,
#sales .sales__txtarea--days,
#sales .data__txtarea--days,
#sales .coding__txtarea--days,
#data .lp__txtarea--days,
#data .print__txtarea--days,
#data .sales__txtarea--days,
#data .data__txtarea--days,
#data .coding__txtarea--days,
#coding .lp__txtarea--days,
#coding .print__txtarea--days,
#coding .sales__txtarea--days,
#coding .data__txtarea--days,
#coding .coding__txtarea--days, #banner .banner__txtarea--days,
#banner .other__txtarea--days,
#other .banner__txtarea--days,
#other .other__txtarea--days, .wrapper .main .work__txtarea--days {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  #lp .lp__txtarea--days,
  #lp .print__txtarea--days,
  #lp .sales__txtarea--days,
  #lp .data__txtarea--days,
  #lp .coding__txtarea--days,
  #print .lp__txtarea--days,
  #print .print__txtarea--days,
  #print .sales__txtarea--days,
  #print .data__txtarea--days,
  #print .coding__txtarea--days,
  #sales .lp__txtarea--days,
  #sales .print__txtarea--days,
  #sales .sales__txtarea--days,
  #sales .data__txtarea--days,
  #sales .coding__txtarea--days,
  #data .lp__txtarea--days,
  #data .print__txtarea--days,
  #data .sales__txtarea--days,
  #data .data__txtarea--days,
  #data .coding__txtarea--days,
  #coding .lp__txtarea--days,
  #coding .print__txtarea--days,
  #coding .sales__txtarea--days,
  #coding .data__txtarea--days,
  #coding .coding__txtarea--days, #banner .banner__txtarea--days,
  #banner .other__txtarea--days,
  #other .banner__txtarea--days,
  #other .other__txtarea--days, .wrapper .main .work__txtarea--days {
    font-size: 28px;
  }
}
@media screen and (min-width: 1024px) {
  #lp .lp__txtarea--days,
  #lp .print__txtarea--days,
  #lp .sales__txtarea--days,
  #lp .data__txtarea--days,
  #lp .coding__txtarea--days,
  #print .lp__txtarea--days,
  #print .print__txtarea--days,
  #print .sales__txtarea--days,
  #print .data__txtarea--days,
  #print .coding__txtarea--days,
  #sales .lp__txtarea--days,
  #sales .print__txtarea--days,
  #sales .sales__txtarea--days,
  #sales .data__txtarea--days,
  #sales .coding__txtarea--days,
  #data .lp__txtarea--days,
  #data .print__txtarea--days,
  #data .sales__txtarea--days,
  #data .data__txtarea--days,
  #data .coding__txtarea--days,
  #coding .lp__txtarea--days,
  #coding .print__txtarea--days,
  #coding .sales__txtarea--days,
  #coding .data__txtarea--days,
  #coding .coding__txtarea--days, #banner .banner__txtarea--days,
  #banner .other__txtarea--days,
  #other .banner__txtarea--days,
  #other .other__txtarea--days, .wrapper .main .work__txtarea--days {
    font-size: clamp(28px, 2.7vw, 64px);
  }
}

#thanks .pan, #confirm .pan, #form .pan, #detail .pan, #lp .pan,
#print .pan,
#sales .pan,
#data .pan,
#coding .pan, #banner .pan,
#other .pan {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.07em;
}
@media screen and (min-width: 1024px) {
  #thanks .pan, #confirm .pan, #form .pan, #detail .pan, #lp .pan,
  #print .pan,
  #sales .pan,
  #data .pan,
  #coding .pan, #banner .pan,
  #other .pan {
    font-size: clamp(16px, 1.1vw, 18px);
  }
}

#lp .lp__contents--ttl,
#lp .print__contents--ttl,
#lp .sales__contents--ttl,
#lp .data__contents--ttl,
#lp .coding__contents--ttl,
#print .lp__contents--ttl,
#print .print__contents--ttl,
#print .sales__contents--ttl,
#print .data__contents--ttl,
#print .coding__contents--ttl,
#sales .lp__contents--ttl,
#sales .print__contents--ttl,
#sales .sales__contents--ttl,
#sales .data__contents--ttl,
#sales .coding__contents--ttl,
#data .lp__contents--ttl,
#data .print__contents--ttl,
#data .sales__contents--ttl,
#data .data__contents--ttl,
#data .coding__contents--ttl,
#coding .lp__contents--ttl,
#coding .print__contents--ttl,
#coding .sales__contents--ttl,
#coding .data__contents--ttl,
#coding .coding__contents--ttl, #banner .modal__txtarea--ttl,
#other .modal__txtarea--ttl, #banner .banner__contents--ttl,
#banner .other__contents--ttl,
#other .banner__contents--ttl,
#other .other__contents--ttl {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  #lp .lp__contents--ttl,
  #lp .print__contents--ttl,
  #lp .sales__contents--ttl,
  #lp .data__contents--ttl,
  #lp .coding__contents--ttl,
  #print .lp__contents--ttl,
  #print .print__contents--ttl,
  #print .sales__contents--ttl,
  #print .data__contents--ttl,
  #print .coding__contents--ttl,
  #sales .lp__contents--ttl,
  #sales .print__contents--ttl,
  #sales .sales__contents--ttl,
  #sales .data__contents--ttl,
  #sales .coding__contents--ttl,
  #data .lp__contents--ttl,
  #data .print__contents--ttl,
  #data .sales__contents--ttl,
  #data .data__contents--ttl,
  #data .coding__contents--ttl,
  #coding .lp__contents--ttl,
  #coding .print__contents--ttl,
  #coding .sales__contents--ttl,
  #coding .data__contents--ttl,
  #coding .coding__contents--ttl, #banner .modal__txtarea--ttl,
  #other .modal__txtarea--ttl, #banner .banner__contents--ttl,
  #banner .other__contents--ttl,
  #other .banner__contents--ttl,
  #other .other__contents--ttl {
    font-size: 28px;
  }
}
@media screen and (min-width: 1024px) {
  #lp .lp__contents--ttl,
  #lp .print__contents--ttl,
  #lp .sales__contents--ttl,
  #lp .data__contents--ttl,
  #lp .coding__contents--ttl,
  #print .lp__contents--ttl,
  #print .print__contents--ttl,
  #print .sales__contents--ttl,
  #print .data__contents--ttl,
  #print .coding__contents--ttl,
  #sales .lp__contents--ttl,
  #sales .print__contents--ttl,
  #sales .sales__contents--ttl,
  #sales .data__contents--ttl,
  #sales .coding__contents--ttl,
  #data .lp__contents--ttl,
  #data .print__contents--ttl,
  #data .sales__contents--ttl,
  #data .data__contents--ttl,
  #data .coding__contents--ttl,
  #coding .lp__contents--ttl,
  #coding .print__contents--ttl,
  #coding .sales__contents--ttl,
  #coding .data__contents--ttl,
  #coding .coding__contents--ttl, #banner .modal__txtarea--ttl,
  #other .modal__txtarea--ttl, #banner .banner__contents--ttl,
  #banner .other__contents--ttl,
  #other .banner__contents--ttl,
  #other .other__contents--ttl {
    font-size: clamp(28px, 2.5vw, 40px);
  }
}

#confirm .confirm__label, #form .form__name, #form .form__mail, #form .form__tel, #form .form__maddage, #detail .detail__overview--label, #detail .detail__collars--label, #detail .detail__fonts--label, #detail .detail__css--label, #lp .lp__contents--label,
#lp .print__contents--label,
#lp .sales__contents--label,
#lp .data__contents--label,
#lp .coding__contents--label,
#print .lp__contents--label,
#print .print__contents--label,
#print .sales__contents--label,
#print .data__contents--label,
#print .coding__contents--label,
#sales .lp__contents--label,
#sales .print__contents--label,
#sales .sales__contents--label,
#sales .data__contents--label,
#sales .coding__contents--label,
#data .lp__contents--label,
#data .print__contents--label,
#data .sales__contents--label,
#data .data__contents--label,
#data .coding__contents--label,
#coding .lp__contents--label,
#coding .print__contents--label,
#coding .sales__contents--label,
#coding .data__contents--label,
#coding .coding__contents--label, #banner .modal__txtarea--label,
#other .modal__txtarea--label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0em;
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__label, #form .form__name, #form .form__mail, #form .form__tel, #form .form__maddage, #detail .detail__overview--label, #detail .detail__collars--label, #detail .detail__fonts--label, #detail .detail__css--label, #lp .lp__contents--label,
  #lp .print__contents--label,
  #lp .sales__contents--label,
  #lp .data__contents--label,
  #lp .coding__contents--label,
  #print .lp__contents--label,
  #print .print__contents--label,
  #print .sales__contents--label,
  #print .data__contents--label,
  #print .coding__contents--label,
  #sales .lp__contents--label,
  #sales .print__contents--label,
  #sales .sales__contents--label,
  #sales .data__contents--label,
  #sales .coding__contents--label,
  #data .lp__contents--label,
  #data .print__contents--label,
  #data .sales__contents--label,
  #data .data__contents--label,
  #data .coding__contents--label,
  #coding .lp__contents--label,
  #coding .print__contents--label,
  #coding .sales__contents--label,
  #coding .data__contents--label,
  #coding .coding__contents--label, #banner .modal__txtarea--label,
  #other .modal__txtarea--label {
    font-size: clamp(20px, 1.5vw, 26px);
  }
}

#detail .detail__txtarea--ttl {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  #detail .detail__txtarea--ttl {
    font-size: 40px;
  }
}
@media screen and (min-width: 1024px) {
  #detail .detail__txtarea--ttl {
    font-size: clamp(40px, 3.8vw, 64px);
  }
}

#detail .detail__overview--ttl, #detail .detail__collars--ttl, #detail .detail__fonts--ttl, #detail .detail__css--ttl {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  #detail .detail__overview--ttl, #detail .detail__collars--ttl, #detail .detail__fonts--ttl, #detail .detail__css--ttl {
    font-size: 40px;
  }
}
@media screen and (min-width: 1024px) {
  #detail .detail__overview--ttl, #detail .detail__collars--ttl, #detail .detail__fonts--ttl, #detail .detail__css--ttl {
    font-size: clamp(40px, 3.3vw, 50px);
  }
}

#top,
#banner,
#other,
#lp,
#print,
#sales,
#data,
#coding,
#detail,
#form,
#confirm,
#thanks {
  color: #222222;
  background: #f0f0f0;
  font-family: "din-2014", "ryo-gothic-plusn", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 1024px) {
  #top,
  #banner,
  #other,
  #lp,
  #print,
  #sales,
  #data,
  #coding,
  #detail,
  #form,
  #confirm,
  #thanks {
    line-height: 1.8;
  }
}

.header {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px 0;
  width: 100%;
  z-index: 3;
}
@media screen and (min-width: 1024px) {
  .header {
    padding: 31px 0;
  }
}
.header .hamburger {
  position: absolute;
  top: 23px;
  left: 19px;
  display: flex;
  flex-direction: columu;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .header .hamburger {
    left: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .header .hamburger {
    top: 17vw;
    left: 2.7vw;
    width: 4vw;
    height: 4vw;
    width: clamp(40px, 4vw, 74px);
    height: clamp(40px, 4vw, 74px);
  }
}
.header .hamburger__top, .header .hamburger__bottom {
  position: absolute;
  display: block;
  width: 80%;
  height: 1px;
  background: #222222;
  transition: 0.4s;
}
.header .hamburger__top {
  transform: translateY(-4px);
}
@media screen and (min-width: 1024px) {
  .header .hamburger__top {
    transform: translateY(-0.4vw);
  }
}
.header .hamburger__bottom {
  transform: translateY(4px);
}
@media screen and (min-width: 1024px) {
  .header .hamburger__bottom {
    transform: translateY(0.4vw);
  }
}
.header__logo--link {
  text-decoration: none;
}

.gnav {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #f0f0f0;
}
.gnav__logo {
  padding: 28px 0;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .gnav__logo {
    position: absolute;
    top: 16.6vw;
    left: 9.1vw;
    padding: 0;
    font-size: clamp(40px, 3.8vw, 64px);
  }
}
.gnav__logo--link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-decoration: none;
  color: #222222;
}
.gnav__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
  margin: 0 auto;
  width: 80vw;
}
@media screen and (min-width: 768px) {
  .gnav__inner {
    flex-direction: column-reverse;
    justify-content: space-between;
    padding-top: 80px;
  }
}
@media screen and (min-width: 1024px) {
  .gnav__inner {
    padding-top: 5.5vw;
    flex-direction: row-reverse;
    margin: 0 0 0 46vw;
    width: 44vw;
  }
}
.gnav__inner--copy {
  width: 180px;
  font-size: 28px;
  font-weight: 200;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .gnav__inner--copy {
    width: 246px;
    font-size: 38px;
  }
}
@media screen and (min-width: 1024px) {
  .gnav__inner--copy {
    position: relative;
    top: 16vw;
    width: 43%;
    font-size: 2.2vw;
  }
}
.gnav__inner--nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  -moz-column-gap: 32px;
       column-gap: 32px;
  row-gap: 2px;
  margin-left: auto;
  width: 60vw;
}
@media screen and (min-width: 768px) {
  .gnav__inner--nav {
    gap: 0;
    width: 280px;
  }
}
@media screen and (min-width: 1024px) {
  .gnav__inner--nav {
    margin: 0;
    width: 44%;
  }
}
.gnav__inner--list {
  width: 100%;
  text-align: right;
}
@media screen and (min-width: 1024px) {
  .gnav__inner--list {
    text-align: left;
  }
}
.gnav__inner--link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-decoration: none;
  color: #222222;
}
@media screen and (min-width: 768px) {
  .gnav__inner--link {
    padding: 12px 0;
    font-size: 56px;
  }
}
@media screen and (min-width: 1024px) {
  .gnav__inner--link {
    padding: 0.6vw 0;
    font-size: clamp(36px, 3.8vw, 64px);
    transition: 0.2s;
  }
  .gnav__inner--link:hover {
    color: #767676;
  }
}

.footer {
  position: relative;
  padding: 64px 0 16px;
  background: #CFCFCF;
}
@media screen and (min-width: 768px) {
  .footer {
    padding: 104px 0 0;
  }
}
@media screen and (min-width: 1024px) {
  .footer {
    padding-top: 12.5vw;
  }
}
.footer__inner {
  width: 90vw;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .footer__inner {
    width: 80vw;
  }
}
@media screen and (min-width: 1024px) {
  .footer__inner {
    width: 85vw;
  }
}
.footer__copy {
  margin-bottom: 32px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0em;
}
@media screen and (min-width: 768px) {
  .footer__copy {
    font-size: 32px;
    margin-bottom: 80px;
  }
}
@media screen and (min-width: 1024px) {
  .footer__copy {
    font-size: clamp(32px, 2.7vw, 56px);
    margin-bottom: 8.3vw;
  }
}
.footer__copyright01 {
  display: none;
}
@media screen and (min-width: 768px) {
  .footer__copyright01 {
    line-height: 1.5;
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
  }
}
@media screen and (min-width: 1024px) {
  .footer__copyright01 {
    font-size: clamp(18px, 1.4vw, 20px);
    margin-bottom: 1.1vw;
  }
}
.footer .swiper-footer {
  width: 100%;
  height: 298px;
  margin-bottom: 150px;
}
@media screen and (min-width: 768px) {
  .footer .swiper-footer {
    height: 346px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  .footer .swiper-footer {
    height: 42vw;
  }
}
.footer .swiper-footer__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.footer__top {
  position: fixed;
  right: 20px;
  bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #222222;
  width: 80px;
  height: 80px;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: 2s;
}
@media screen and (min-width: 768px) {
  .footer__top {
    right: 40px;
    bottom: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .footer__top {
    right: 2.4vw;
    bottom: 1.6vw;
    transition: 0.4s;
  }
  .footer__top:hover {
    background: #222222;
    transform: translate(0, -16px);
  }
  .footer__top:hover .footer__top--arrow, .footer__top:hover .footer__top--arrow::before {
    background: #f0f0f0;
  }
}
.footer__top--link {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.footer__top--arrow {
  display: block;
  width: 1px;
  height: 32px;
  background: #222222;
  transition: 0.3s;
}
.footer__top--arrow::before {
  content: "";
  display: block;
  position: relative;
  top: -1px;
  left: 3px;
  width: 1px;
  height: 10px;
  background: #222222;
  transform: rotate(-45deg);
}
.footer__copyright02 {
  line-height: 1.5;
  font-size: 18px;
}
@media screen and (min-width: 768px) {
  .footer__copyright02 {
    display: none;
  }
}

.wrapper {
  overflow-x: hidden;
}
.wrapper .main .mv {
  position: relative;
  margin-left: auto;
  margin-bottom: 64px;
  width: 90vw;
}
@media screen and (min-width: 768px) {
  .wrapper .main .mv {
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .mv {
    margin-bottom: 6.3vw;
  }
}
.wrapper .main .mv__scroll {
  position: absolute;
  top: 350px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1px;
  height: 130px;
  background: #222222;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .wrapper .main .mv__scroll {
    top: 740px;
    right: 34px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .mv__scroll {
    top: 35vw;
    right: 24px;
    height: 9vw;
  }
}
.wrapper .main .mv__scroll::after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #222222;
  animation: circlemove 1.8s ease-in-out infinite, cirlemovehide 1.8s ease-out infinite;
}
.wrapper .main .mv__txtarea {
  position: absolute;
  top: 190px;
  left: 0;
  width: 85%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .wrapper .main .mv__txtarea {
    top: 150px;
    width: 43%;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .mv__txtarea {
    top: 16.6vw;
  }
}
.wrapper .main .mv__txtarea--ttl {
  display: flex;
}
.wrapper .main .mv__txtarea--ttl--01 {
  animation: fadeIn 0.5s forwards;
  transform: translateX(50px);
  opacity: 0;
}
.wrapper .main .mv__txtarea--ttl--02 {
  animation: fadeIn 0.5s 0.5s forwards;
  transform: translateX(50px);
  opacity: 0;
}
.wrapper .main .mv__txtarea--ttl--03 {
  animation: fadeIn 0.5s 1s forwards;
  transform: translateX(50px);
  opacity: 0;
}
.wrapper .main .mv__txtarea--ttl--04 {
  animation: fadeIn 0.5s 1.1s forwards;
  transform: translateX(50px);
  opacity: 0;
}
.wrapper .main .mv__txtarea--ttl--05 {
  animation: fadeIn 0.5s 1.5s forwards;
  transform: translateX(50px);
  opacity: 0;
}
.wrapper .main .mv__txtarea--ttl--06 {
  animation: fadeIn 0.5s 1.6s forwards;
  transform: translateX(50px);
  opacity: 0;
}
.wrapper .main .mv__txtarea--ttl--07 {
  animation: fadeIn 0.5s 1.7s forwards;
  transform: translateX(50px);
  opacity: 0;
}
.wrapper .main .mv__txtarea--ttl--08 {
  animation: fadeIn 0.5s 1.8s forwards;
  transform: translateX(50px);
  opacity: 0;
}
.wrapper .main .mv__txtarea--ttl--09 {
  animation: fadeIn 0.5s 2.5s forwards;
  transform: translateX(50px);
  opacity: 0;
}
.wrapper .main .mv__txtarea--ttl--10 {
  animation: fadeIn 0.5s 2.7s forwards;
  transform: translateX(50px);
  opacity: 0;
}
.wrapper .main .mv__txtarea--copy {
  font-size: 16px;
  font-weight: 200;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .mv__txtarea--copy {
    font-size: clamp(18px, 1.6vw, 24px);
  }
}
.wrapper .main .mv .swiper-mv {
  width: 89%;
  height: 443px;
  margin-right: 0;
}
.wrapper .main .mv .swiper-mv__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .wrapper .main .mv .swiper-mv {
    height: 346px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .mv .swiper-mv {
    width: 94%;
    height: 42vw;
  }
}
.wrapper .main .container {
  position: relative;
  width: 98vw;
  margin: 0 auto 130px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 60px;
    margin: 0 4px 54px auto;
    width: 89vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1024px) {
  .wrapper .main .container {
    padding-top: 6.3vw;
    margin: 0 5vw 35vw auto;
    width: 80vw;
  }
}
.wrapper .main .container .box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  width: 88%;
}
@media screen and (min-width: 768px) {
  .wrapper .main .container .box {
    position: absolute;
    top: 0;
    right: 73px;
    display: block;
    margin: 0;
    width: auto;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .container .box {
    top: 91px;
    right: 60px;
  }
}
.wrapper .main .container .box .corner01 {
  margin-left: 3px;
  width: 200px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .container .box .corner01 {
    display: none;
  }
}
.wrapper .main .container .box .corner01__top {
  margin-bottom: 6px;
}
.wrapper .main .container .box .corner01__top--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .container .box .corner01__bottom--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .container .box .copy {
  position: relative;
  top: 48px;
  height: 308px;
  writing-mode: vertical-lr;
}
@media screen and (min-width: 768px) {
  .wrapper .main .container .box .copy {
    top: 0;
    left: 12px;
    display: flex;
    flex-direction: column-reverse;
    width: 310px;
    height: auto;
    writing-mode: horizontal-tb;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .container .box .copy {
    width: 37vw;
  }
}
.wrapper .main .container .box .copy--01, .wrapper .main .container .box .copy--02 {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .container .box .copy--01, .wrapper .main .container .box .copy--02 {
    font-size: clamp(26px, 2.7vw, 51px);
  }
}
.wrapper .main .container .about {
  position: relative;
  padding-top: 40px;
  width: 81%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .wrapper .main .container .about {
    padding: 0;
    margin: 0;
    width: 49%;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .container .about {
    width: 43%;
  }
}
.wrapper .main .container .about .c01 {
  position: absolute;
  top: -116px;
  left: 120px;
  font-size: 145px;
  font-weight: 700;
  line-height: 1;
  color: #F7F7F7;
  z-index: 1;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .wrapper .main .container .about .c01 {
    display: none;
  }
}
.wrapper .main .container .about__shoulder {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .container .about__shoulder {
    margin-bottom: 0.6vw;
  }
}
.wrapper .main .container .about__ttl {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .container .about__ttl {
    margin-bottom: 4.4vw;
  }
}
.wrapper .main .container .about__name {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .container .about__name {
    font-size: clamp(24px, 2.2vw, 48px);
    margin-bottom: 1.1vw;
  }
}
.wrapper .main .container .about__txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  .wrapper .main .container .about__txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
.wrapper .main .container .about__txt--span {
  padding-top: 16px;
  display: block;
}
.wrapper .main .container .circle {
  position: absolute;
  top: 750px;
  right: 4px;
  width: 219px;
  height: 332px;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .wrapper .main .container .circle {
    position: static;
    margin-right: 4px;
    width: 255px;
    height: 425px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .container .circle {
    position: absolute;
    top: 21vw;
    width: 27.7vw;
    height: 42vw;
  }
}
.wrapper .main .container .circle__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.wrapper .main .container .circle__top {
  display: block;
}
.wrapper .main .container .circle__top--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .container .circle__bottom {
  position: absolute;
  bottom: 0;
}
.wrapper .main .container .circle__bottom--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .container .c02 {
  display: none;
}
@media screen and (min-width: 768px) {
  .wrapper .main .container .c02 {
    display: block;
    position: absolute;
    top: 520px;
    left: 394px;
    font-size: 145px;
    font-weight: 700;
    line-height: 1;
    color: #F7F7F7;
    opacity: 0;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .container .c02 {
    top: 339px;
    top: 33vw;
    left: -55px;
    left: -5vw;
    font-size: clamp(174px, 17vw, 326px);
    opacity: 0;
  }
}
.wrapper .main .work {
  position: relative;
  padding-top: 63px;
  margin: 0 auto 104px;
  width: 96.8vw;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work {
    padding-top: 54px;
    margin-bottom: 300px;
    width: 90vw;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work {
    padding-top: 15vw;
    width: 94vw;
    margin: 0 6px 48vw auto;
  }
}
@media screen and (min-width: 1160px) {
  .wrapper .main .work {
    padding-top: 17vw;
    margin-bottom: 50vw;
  }
}
.wrapper .main .work .corner02 {
  display: none;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work .corner02 {
    position: absolute;
    top: -14px;
    left: -30px;
    display: block;
    width: 255px;
    height: 425px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work .corner02 {
    top: -35vw;
    left: -4.9vw;
    width: 27.7vw;
    height: 42vw;
  }
}
.wrapper .main .work .corner02__inner {
  width: 100%;
}
.wrapper .main .work .corner02__top {
  margin-bottom: 6px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work .corner02__top {
    margin-bottom: 8px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work .corner02__top {
    margin-bottom: 12px;
  }
}
.wrapper .main .work .corner02__top--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .work .corner02__bottom--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .work .o01 {
  display: none;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work .o01 {
    display: block;
    position: absolute;
    top: 16vw;
    left: 27vw;
    font-family: "din-2014";
    font-size: clamp(276px, 28vw, 518px);
    font-weight: 700;
    line-height: 1;
    color: #F7F7F7;
    opacity: 0;
    pointer-events: none;
  }
}
.wrapper .main .work .o02 {
  position: absolute;
  top: -239px;
  left: -12px;
  font-family: "din-2014";
  font-size: 240px;
  font-weight: 700;
  line-height: 1;
  color: #F7F7F7;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work .o02 {
    top: 187px;
    left: 218px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work .o02 {
    display: none;
  }
}
.wrapper .main .work__txtarea {
  margin: 0 auto 72px;
  width: 81%;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work__txtarea {
    margin: 0 0 80px auto;
    width: 47%;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__txtarea {
    margin: 0;
    margin-left: 5vw;
    width: 29%;
  }
}
.wrapper .main .work__txtarea--shoulder {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__txtarea--shoulder {
    margin-bottom: 0.6vw;
  }
}
.wrapper .main .work__txtarea--ttl {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__txtarea--ttl {
    margin-bottom: 4.4vw;
  }
}
.wrapper .main .work__txtarea--days {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__txtarea--days {
    margin-bottom: 1.1vw;
  }
}
.wrapper .main .work__txtarea--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__txtarea--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
.wrapper .main .work__txtarea--txt--span {
  padding-top: 16px;
  display: block;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__container {
    position: absolute;
    top: 7vw;
  }
}
.wrapper .main .work__box {
  position: relative;
  margin-bottom: 64px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work__box {
    position: absolute;
    top: 691px;
    width: 74%;
    z-index: -1;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__box {
    position: relative;
    top: 0;
    margin: 0 0 5vw auto;
    width: 58%;
    z-index: 0;
  }
}
.wrapper .main .work__box .m {
  position: absolute;
  top: -88px;
  right: 0px;
  font-size: 135px;
  font-weight: 700;
  line-height: 1;
  color: #F7F7F7;
  opacity: 0;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work__box .m {
    top: -101px;
    right: 50vw;
    font-size: 160px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__box .m {
    top: -12vw;
    right: 0;
    font-size: clamp(194px, 19vw, 364px);
  }
}
.wrapper .main .work__box .mix {
  display: flex;
  gap: 6px;
  width: 361px;
  height: 283px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work__box .mix {
    gap: 8px;
    width: 514px;
    height: 422px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__box .mix {
    gap: 0.83vw;
    width: 55vw;
    height: 41vw;
  }
}
.wrapper .main .work__box .mix__left {
  position: relative;
  width: 51.6%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work__box .mix__left {
    width: 49.2%;
  }
}
.wrapper .main .work__box .mix__left--top--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .work__box .mix__left--bottom {
  position: absolute;
  bottom: 0;
}
.wrapper .main .work__box .mix__left--bottom--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .work__box .mix__right {
  width: 46.7%;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work__box .mix__right {
    width: 49.2%;
  }
}
.wrapper .main .work__box .mix__right--top {
  margin-bottom: 6px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work__box .mix__right--top {
    margin-bottom: 8px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__box .mix__right--top {
    margin-bottom: 0.83vw;
  }
}
.wrapper .main .work__box .mix__right--top--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .work__box .mix__right--bottom--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .work__stalker {
  display: flex;
  flex-direction: column;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work__stalker {
    width: 73%;
    margin-left: auto;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__stalker {
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: 3vw;
         column-gap: 3vw;
    margin: 0;
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__stalker--mouse {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    width: 360px;
    height: 360px;
    background-size: cover;
    z-index: 2;
    transition: opacity 0.1s;
    pointer-events: none;
    will-change: transform;
    transform: translate(-100%, -100%);
  }
}
.wrapper .main .work__stalker--link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 8px 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0em;
  color: #CFCFCF;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .work__stalker--link {
    position: relative;
    padding: 0.7vw 0;
    font-size: clamp(56px, 5.5vw, 96px);
    cursor: none;
  }
}
.wrapper .main .work__stalker--span {
  display: block;
}
@media screen and (min-width: 768px) {
  .wrapper .main .work__stalker--span {
    display: inline;
  }
}
.wrapper .main .skill {
  position: relative;
  padding: 104px 37px 80px;
  background: #F7F7F7;
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill {
    padding: 96px 77px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill {
    padding: 9.7vw 15vw;
  }
}
.wrapper .main .skill .p {
  position: absolute;
  top: -110px;
  left: -9px;
  font-size: 180px;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 1px black;
  color: #F7F7F7;
  opacity: 0;
  transform-origin: bottom;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill .p {
    top: -12vw;
    font-size: clamp(204px, 20vw, 480px);
  }
}
.wrapper .main .skill__shoulder {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__shoulder {
    margin-bottom: 0.6vw;
  }
}
.wrapper .main .skill__ttl {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__ttl {
    margin-bottom: 4.6vw;
  }
}
.wrapper .main .skill__main {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__main {
    gap: 56px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__main {
    gap: 6.6vw;
  }
}
.wrapper .main .skill__head {
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__head {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__head {
    margin-bottom: 3.9vw;
  }
}
.wrapper .main .skill__head--inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__head--inner {
    margin-bottom: 12px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__head--inner {
    margin-bottom: 1.1vw;
  }
}
.wrapper .main .skill__head--number {
  line-height: 1.5;
  letter-spacing: 0em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 26vw;
  font-size: 22px;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__head--number {
    gap: 16px;
    width: 30vw;
    font-size: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__head--number {
    width: 16vw;
    font-size: clamp(24px, 1.9vw, 36px);
  }
}
.wrapper .main .skill__head--number::before {
  content: "";
  display: block;
  width: 65%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__head--number::before {
    width: 82%;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__head--number::before {
    width: 80%;
  }
}
.wrapper .main .skill__head--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__head--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
.wrapper .main .skill__design, .wrapper .main .skill__coding {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__design, .wrapper .main .skill__coding {
    justify-content: space-between;
    -moz-column-gap: 43px;
         column-gap: 43px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__design, .wrapper .main .skill__coding {
    row-gap: 4.4vw;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__design::after, .wrapper .main .skill__coding::after {
    content: "";
    display: block;
    width: 29%;
  }
}
.wrapper .main .skill__office {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__office {
    justify-content: space-between;
    -moz-column-gap: 43px;
         column-gap: 43px;
    margin: 0;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__office {
    row-gap: 4.4vw;
  }
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__tool {
    width: 46%;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__tool {
    width: 29%;
  }
}
.wrapper .main .skill__tool--head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.wrapper .main .skill__tool--head--svg {
  width: 36px;
  height: 36px;
}
.wrapper .main .skill__tool--designtxt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__tool--designtxt {
    height: 180px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__tool--designtxt {
    height: clamp(190px, 380px - 10vw, 290px);
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
@media screen and (min-width: 1440px) {
  .wrapper .main .skill__tool--designtxt {
    height: clamp(200px, 14vw, 240px);
  }
}
.wrapper .main .skill__tool--codingtxt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__tool--codingtxt {
    height: 135px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__tool--codingtxt {
    height: clamp(170px, 350px - 10vw, 200px);
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
@media screen and (min-width: 1440px) {
  .wrapper .main .skill__tool--codingtxt {
    height: clamp(140px, 12vw, 210px);
  }
}
.wrapper .main .skill__tool--officetxt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 768px) {
  .wrapper .main .skill__tool--officetxt {
    height: 80px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__tool--officetxt {
    height: clamp(90px, 300px - 10vw, 116px);
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
@media screen and (min-width: 1440px) {
  .wrapper .main .skill__tool--officetxt {
    height: clamp(80px, 20px + 4.17vw, 100px);
  }
}
.wrapper .main .skill__readmore {
  line-height: 1.5;
  letter-spacing: 0em;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  margin: 32px auto 0;
  width: 45%;
  font-size: 20px;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .skill__readmore {
    display: none;
  }
}
.wrapper .main .skill__readmore::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-top: 1px solid #222222;
  border-right: 1px solid #222222;
  transform: rotate(131deg) skew(10deg, 15deg);
}
.wrapper .main .book {
  padding-top: 80px;
  margin: 0 auto 80px;
  width: 80vw;
}
@media screen and (min-width: 768px) {
  .wrapper .main .book {
    padding-top: 96px;
    margin: 0 auto 96px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book {
    padding-top: 9.7vw;
    margin: 0 auto 9.7vw;
    width: 70vw;
  }
}
.wrapper .main .book__shoulder {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__shoulder {
    margin-bottom: 0.6vw;
  }
}
.wrapper .main .book__ttl {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__ttl {
    margin-bottom: 4.4vw;
  }
}
.wrapper .main .book__txt {
  font-family: "ryo-gothic-plusn";
  margin-bottom: 48px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__txt {
    margin-bottom: 8vw;
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
.wrapper .main .book__main {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__main {
    gap: 7.2vw;
  }
}
.wrapper .main .book__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .book__box {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 64px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__box {
    justify-content: flex-start;
    gap: 9.7vw;
  }
}
@media screen and (min-width: 768px) {
  .wrapper .main .book__box--case {
    width: 57%;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__box--case {
    width: 63%;
  }
}
.wrapper .main .book__box--case--ttl {
  margin-bottom: 8px;
  width: 100%;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .wrapper .main .book__box--case--ttl {
    margin-bottom: 14px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__box--case--ttl {
    margin-bottom: 1.3vw;
  }
}
.wrapper .main .book__box--case--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__box--case--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
.wrapper .main .book__box--pic {
  width: 165px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .book__box--pic {
    width: 180px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__box--pic {
    width: clamp(170px, 13vw, 230px);
  }
}
.wrapper .main .book__box--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wrapper .main .book__readmore {
  line-height: 1.5;
  letter-spacing: 0em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  margin: 56px auto 0;
  width: 45%;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .wrapper .main .book__readmore {
    margin-top: 64px;
    width: 25%;
    font-size: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__readmore {
    margin-top: 7.2vw;
    width: 20%;
    font-size: clamp(24px, 1.6vw, 40px);
    cursor: pointer;
  }
  .wrapper .main .book__readmore:hover::after {
    transform: translateY(10px) rotate(131deg) skew(10deg, 15deg);
  }
}
.wrapper .main .book__readmore::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-top: 1px solid #222222;
  border-right: 1px solid #222222;
  transform: rotate(131deg) skew(10deg, 15deg);
}
@media screen and (min-width: 1024px) {
  .wrapper .main .book__readmore::after {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
  }
}
.wrapper .main .contact {
  padding: 13vw 37px;
  background: #F7F7F7;
}
@media screen and (min-width: 768px) {
  .wrapper .main .contact {
    padding: 80px 77px;
    display: flex;
    align-items: flex-end;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .contact {
    padding: 9.7vw 15vw;
  }
}
.wrapper .main .contact__head {
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .contact__head {
    margin: 0;
  }
}
.wrapper .main .contact__head--ttl {
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
  .wrapper .main .contact__head--ttl {
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .contact__head--ttl {
    margin-bottom: 2.7vw;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .contact__head--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
.wrapper .main .contact__mail {
  position: relative;
  padding: 10px;
  margin-left: auto;
  width: 50vw;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .wrapper .main .contact__mail {
    width: 29vw;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .contact__mail {
    width: 24vw;
  }
  .wrapper .main .contact__mail:hover .contact__mail--txt {
    transform: translateX(12px);
  }
  .wrapper .main .contact__mail:hover .contact__mail--txt::before {
    background-image: linear-gradient(-45deg, #222222, #f0f0f0, #222222);
    background-size: 200%, 200%;
    animation: line 4s ease infinite;
    height: 1px;
    transform: translateX(-12px);
  }
}
.wrapper .main .contact__mail--link {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.wrapper .main .contact__mail--txt {
  line-height: 1.5;
  letter-spacing: 0em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  .wrapper .main .contact__mail--txt {
    gap: 24px;
    font-size: clamp(28px, 2.2vw, 56px);
    transition: 0.3s;
  }
}
.wrapper .main .contact__mail--txt::before {
  content: "";
  display: block;
  width: 59%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 768px) {
  .wrapper .main .contact__mail--txt::before {
    width: 62%;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper .main .contact__mail--txt::before {
    width: 69%;
    transition: 0.3s;
  }
}

#banner .modal__wrap,
#other .modal__wrap {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  color: #f0f0f0;
  background: #222222;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  z-index: 3;
}
@media screen and (min-width: 1024px) {
  #banner .modal__wrap,
  #other .modal__wrap {
    height: 100vh;
    max-height: none;
    overflow-y: initial;
  }
}
#banner .modal__container,
#other .modal__container {
  margin: 0 auto;
  padding: 40px 0 180px;
  width: 80vw;
}
@media screen and (min-width: 768px) {
  #banner .modal__container,
  #other .modal__container {
    padding: 72px 0;
  }
}
@media screen and (min-width: 1024px) {
  #banner .modal__container,
  #other .modal__container {
    padding: 0;
    padding-top: 5.5vw;
  }
}
#banner .modal__box,
#other .modal__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
  #banner .modal__box,
  #other .modal__box {
    gap: 48px;
    margin-bottom: 48px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .modal__box,
  #other .modal__box {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    margin-bottom: 3.3vw;
    max-height: 70vh;
  }
}
#banner .modal__pic,
#other .modal__pic {
  width: 100%;
}
@media screen and (min-width: 768px) {
  #banner .modal__pic,
  #other .modal__pic {
    width: 65%;
  }
}
@media screen and (min-width: 1024px) {
  #banner .modal__pic,
  #other .modal__pic {
    width: 38%;
    align-self: flex-start;
  }
}
#banner .modal__img,
#other .modal__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  #banner .modal__txtarea,
  #other .modal__txtarea {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  #banner .modal__txtarea,
  #other .modal__txtarea {
    width: 54.6%;
    overflow-y: auto;
    min-height: 0;
    padding-right: 15px;
  }
}
#banner .modal__txtarea--ttl,
#other .modal__txtarea--ttl {
  margin-bottom: 16px;
}
@media screen and (min-width: 1024px) {
  #banner .modal__txtarea--ttl,
  #other .modal__txtarea--ttl {
    margin-bottom: 1.1vw;
  }
}
#banner .modal__txtarea--line,
#other .modal__txtarea--line {
  display: block;
  margin-bottom: 24px;
  width: 100%;
  height: 1px;
  background: #f0f0f0;
}
@media screen and (min-width: 1024px) {
  #banner .modal__txtarea--line,
  #other .modal__txtarea--line {
    margin-bottom: 1.6vw;
  }
}
#banner .modal__txtarea--table,
#other .modal__txtarea--table {
  display: grid;
  grid-template-columns: 100px 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 8px;
}
@media screen and (min-width: 768px) {
  #banner .modal__txtarea--table,
  #other .modal__txtarea--table {
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .modal__txtarea--table,
  #other .modal__txtarea--table {
    grid-template-columns: 12% 1fr;
    -moz-column-gap: 4.4vw;
         column-gap: 4.4vw;
  }
}
#banner .modal__txtarea--txt,
#other .modal__txtarea--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #banner .modal__txtarea--txt,
  #other .modal__txtarea--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#banner .modal .navigation,
#other .modal .navigation {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  width: 260px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #banner .modal .navigation,
  #other .modal .navigation {
    position: static;
    margin: 0 auto;
    width: 280px;
    transform: translateX(0%);
  }
}
#banner .modal .navigation__circle,
#other .modal .navigation__circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #F7F7F7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#banner .modal .navigation__icon,
#other .modal .navigation__icon {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
}
#banner .modal .navigation__prev::before, #banner .modal .navigation__prev::after, #banner .modal .navigation__close::before, #banner .modal .navigation__close::after, #banner .modal .navigation__next::before, #banner .modal .navigation__next::after,
#other .modal .navigation__prev::before,
#other .modal .navigation__prev::after,
#other .modal .navigation__close::before,
#other .modal .navigation__close::after,
#other .modal .navigation__next::before,
#other .modal .navigation__next::after {
  content: "";
  position: absolute;
  height: 2px;
  background: #222222;
}
#banner .modal .navigation__prev::before,
#other .modal .navigation__prev::before {
  width: 18px;
  top: 14px;
  left: 7px;
  transform: rotate(-45deg);
  transform-origin: left center;
}
#banner .modal .navigation__prev::after,
#other .modal .navigation__prev::after {
  width: 18px;
  top: 13px;
  left: 7px;
  transform: rotate(45deg);
  transform-origin: left center;
}
#banner .modal .navigation__close::before,
#other .modal .navigation__close::before {
  width: 32px;
  top: 14px;
  left: 0px;
  transform: rotate(45deg);
}
#banner .modal .navigation__close::after,
#other .modal .navigation__close::after {
  width: 32px;
  top: 14px;
  left: 0px;
  transform: rotate(-45deg);
}
#banner .modal .navigation__next::before,
#other .modal .navigation__next::before {
  width: 18px;
  top: 14px;
  left: 5px;
  transform: rotate(45deg);
  transform-origin: right center;
}
#banner .modal .navigation__next::after,
#other .modal .navigation__next::after {
  width: 18px;
  top: 13px;
  left: 5px;
  transform: rotate(-45deg);
  transform-origin: right center;
}
#banner .pan,
#other .pan {
  padding-top: 86px;
  margin: 0 auto 56px;
  width: 80vw;
  text-align: right;
  color: #727272;
}
@media screen and (min-width: 768px) {
  #banner .pan,
  #other .pan {
    padding-top: 90px;
    margin-bottom: 64px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .pan,
  #other .pan {
    padding-top: 98px;
    margin-bottom: 5.9vw;
  }
}
#banner .pan__link,
#other .pan__link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: inline;
  color: #727272;
}
#banner .banner,
#banner .other,
#other .banner,
#other .other {
  margin: 0 auto 80px;
  width: 80vw;
}
@media screen and (min-width: 768px) {
  #banner .banner,
  #banner .other,
  #other .banner,
  #other .other {
    margin-bottom: 96px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner,
  #banner .other,
  #other .banner,
  #other .other {
    margin-bottom: 9.7vw;
  }
}
#banner .banner__txtarea,
#banner .other__txtarea,
#other .banner__txtarea,
#other .other__txtarea {
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
  #banner .banner__txtarea,
  #banner .other__txtarea,
  #other .banner__txtarea,
  #other .other__txtarea {
    margin-bottom: 56px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__txtarea,
  #banner .other__txtarea,
  #other .banner__txtarea,
  #other .other__txtarea {
    margin-bottom: 4.4vw;
  }
}
#banner .banner__txtarea--shoulder,
#banner .other__txtarea--shoulder,
#other .banner__txtarea--shoulder,
#other .other__txtarea--shoulder {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  #banner .banner__txtarea--shoulder,
  #banner .other__txtarea--shoulder,
  #other .banner__txtarea--shoulder,
  #other .other__txtarea--shoulder {
    margin-bottom: 0.2vw;
  }
}
#banner .banner__txtarea--ttl,
#banner .other__txtarea--ttl,
#other .banner__txtarea--ttl,
#other .other__txtarea--ttl {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  #banner .banner__txtarea--ttl,
  #banner .other__txtarea--ttl,
  #other .banner__txtarea--ttl,
  #other .other__txtarea--ttl {
    margin-bottom: 4.6vw;
  }
}
#banner .banner__txtarea--days,
#banner .other__txtarea--days,
#other .banner__txtarea--days,
#other .other__txtarea--days {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  #banner .banner__txtarea--days,
  #banner .other__txtarea--days,
  #other .banner__txtarea--days,
  #other .other__txtarea--days {
    margin-bottom: 1.1vw;
  }
}
#banner .banner__txtarea--txt,
#banner .other__txtarea--txt,
#other .banner__txtarea--txt,
#other .other__txtarea--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #banner .banner__txtarea--txt,
  #banner .other__txtarea--txt,
  #other .banner__txtarea--txt,
  #other .other__txtarea--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#banner .banner__stalker,
#banner .other__stalker,
#other .banner__stalker,
#other .other__stalker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 48px;
}
@media screen and (min-width: 768px) {
  #banner .banner__stalker,
  #banner .other__stalker,
  #other .banner__stalker,
  #other .other__stalker {
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: 16px;
         column-gap: 16px;
    row-gap: 12px;
    justify-content: flex-end;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__stalker,
  #banner .other__stalker,
  #other .banner__stalker,
  #other .other__stalker {
    justify-content: flex-start;
    -moz-column-gap: 1.6vw;
         column-gap: 1.6vw;
    row-gap: 1.1vw;
    margin-bottom: 7.8vw;
  }
}
#banner .banner__stalker--list,
#banner .other__stalker--list,
#other .banner__stalker--list,
#other .other__stalker--list {
  text-align: right;
}
@media screen and (min-width: 1024px) {
  #banner .banner__stalker--mouse,
  #banner .other__stalker--mouse,
  #other .banner__stalker--mouse,
  #other .other__stalker--mouse {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    width: 360px;
    height: 360px;
    background-size: cover;
    transition: opacity 0.1s;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
    transform: translate(-100%, -100%);
  }
}
#banner .banner__stalker--link,
#banner .other__stalker--link,
#other .banner__stalker--link,
#other .other__stalker--link {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: #CFCFCF;
}
@media screen and (min-width: 768px) {
  #banner .banner__stalker--link,
  #banner .other__stalker--link,
  #other .banner__stalker--link,
  #other .other__stalker--link {
    font-size: 48px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__stalker--link,
  #banner .other__stalker--link,
  #other .banner__stalker--link,
  #other .other__stalker--link {
    font-size: clamp(44px, 4.4vw, 68px);
    cursor: none;
  }
}
#banner .banner__stalker--span,
#banner .other__stalker--span,
#other .banner__stalker--span,
#other .other__stalker--span {
  display: block;
}
@media screen and (min-width: 768px) {
  #banner .banner__stalker--span,
  #banner .other__stalker--span,
  #other .banner__stalker--span,
  #other .other__stalker--span {
    display: inline;
  }
}
#banner .banner__main,
#banner .other__main,
#other .banner__main,
#other .other__main {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
@media screen and (min-width: 768px) {
  #banner .banner__main,
  #banner .other__main,
  #other .banner__main,
  #other .other__main {
    gap: 64px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__main,
  #banner .other__main,
  #other .banner__main,
  #other .other__main {
    gap: 7.2vw;
  }
}
#banner .banner__contents--ttl,
#banner .other__contents--ttl,
#other .banner__contents--ttl,
#other .other__contents--ttl {
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
  #banner .banner__contents--ttl,
  #banner .other__contents--ttl,
  #other .banner__contents--ttl,
  #other .other__contents--ttl {
    font-size: 28px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__contents--ttl,
  #banner .other__contents--ttl,
  #other .banner__contents--ttl,
  #other .other__contents--ttl {
    font-size: clamp(32px, 2.8vw, 56px);
    margin-bottom: 1.1vw;
  }
}
#banner .banner__contents--line,
#banner .other__contents--line,
#other .banner__contents--line,
#other .other__contents--line {
  display: block;
  margin-bottom: 24px;
  width: 100%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 1024px) {
  #banner .banner__contents--line,
  #banner .other__contents--line,
  #other .banner__contents--line,
  #other .other__contents--line {
    margin-bottom: 2.2vw;
  }
}
#banner .banner__contents--main,
#banner .other__contents--main,
#other .banner__contents--main,
#other .other__contents--main {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 5.3vw;
       column-gap: 5.3vw;
  row-gap: 20px;
  width: 100%;
}
@media screen and (min-width: 575px) {
  #banner .banner__contents--main,
  #banner .other__contents--main,
  #other .banner__contents--main,
  #other .other__contents--main {
    -moz-column-gap: 3.5vw;
         column-gap: 3.5vw;
  }
}
@media screen and (min-width: 768px) {
  #banner .banner__contents--main,
  #banner .other__contents--main,
  #other .banner__contents--main,
  #other .other__contents--main {
    -moz-column-gap: 2.3vw;
         column-gap: 2.3vw;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__contents--main,
  #banner .other__contents--main,
  #other .banner__contents--main,
  #other .other__contents--main {
    -moz-column-gap: 2vw;
         column-gap: 2vw;
    row-gap: 2.2vw;
  }
}
#banner .banner__contents--main--insite,
#banner .other__contents--main--insite,
#other .banner__contents--main--insite,
#other .other__contents--main--insite {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 5.3vw;
       column-gap: 5.3vw;
  width: 100%;
}
@media screen and (min-width: 575px) {
  #banner .banner__contents--main--insite,
  #banner .other__contents--main--insite,
  #other .banner__contents--main--insite,
  #other .other__contents--main--insite {
    -moz-column-gap: 3.5vw;
         column-gap: 3.5vw;
  }
}
@media screen and (min-width: 768px) {
  #banner .banner__contents--main--insite,
  #banner .other__contents--main--insite,
  #other .banner__contents--main--insite,
  #other .other__contents--main--insite {
    -moz-column-gap: 2.3vw;
         column-gap: 2.3vw;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__contents--main--insite,
  #banner .other__contents--main--insite,
  #other .banner__contents--main--insite,
  #other .other__contents--main--insite {
    -moz-column-gap: 2vw;
         column-gap: 2vw;
    row-gap: 1.6vw;
  }
}
#banner .banner__contents--main--button,
#banner .other__contents--main--button,
#other .banner__contents--main--button,
#other .other__contents--main--button {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 5.3vw;
       column-gap: 5.3vw;
  width: 100%;
}
@media screen and (min-width: 575px) {
  #banner .banner__contents--main--button,
  #banner .other__contents--main--button,
  #other .banner__contents--main--button,
  #other .other__contents--main--button {
    -moz-column-gap: 3.5vw;
         column-gap: 3.5vw;
  }
}
@media screen and (min-width: 768px) {
  #banner .banner__contents--main--button,
  #banner .other__contents--main--button,
  #other .banner__contents--main--button,
  #other .other__contents--main--button {
    -moz-column-gap: 2.3vw;
         column-gap: 2.3vw;
    row-gap: 24px;
  }
}
@media screen and (min-width: 900px) {
  #banner .banner__contents--main--button,
  #banner .other__contents--main--button,
  #other .banner__contents--main--button,
  #other .other__contents--main--button {
    -moz-column-gap: 2vw;
         column-gap: 2vw;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__contents--main--button,
  #banner .other__contents--main--button,
  #other .banner__contents--main--button,
  #other .other__contents--main--button {
    -moz-column-gap: 2vw;
         column-gap: 2vw;
  }
}
#banner .banner__contents--main--emblem,
#banner .other__contents--main--emblem,
#other .banner__contents--main--emblem,
#other .other__contents--main--emblem {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 5.3vw;
       column-gap: 5.3vw;
  row-gap: 16px;
  width: 100%;
}
@media screen and (min-width: 575px) {
  #banner .banner__contents--main--emblem,
  #banner .other__contents--main--emblem,
  #other .banner__contents--main--emblem,
  #other .other__contents--main--emblem {
    -moz-column-gap: 3.5vw;
         column-gap: 3.5vw;
  }
}
@media screen and (min-width: 768px) {
  #banner .banner__contents--main--emblem,
  #banner .other__contents--main--emblem,
  #other .banner__contents--main--emblem,
  #other .other__contents--main--emblem {
    -moz-column-gap: 2.3vw;
         column-gap: 2.3vw;
    row-gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__contents--main--emblem,
  #banner .other__contents--main--emblem,
  #other .banner__contents--main--emblem,
  #other .other__contents--main--emblem {
    -moz-column-gap: 2vw;
         column-gap: 2vw;
  }
}
#banner .banner__contents--pic,
#banner .other__contents--pic,
#other .banner__contents--pic,
#other .other__contents--pic {
  width: 46.6%;
}
@media screen and (min-width: 575px) {
  #banner .banner__contents--pic,
  #banner .other__contents--pic,
  #other .banner__contents--pic,
  #other .other__contents--pic {
    width: 30.4%;
  }
}
@media screen and (min-width: 768px) {
  #banner .banner__contents--pic,
  #banner .other__contents--pic,
  #other .banner__contents--pic,
  #other .other__contents--pic {
    width: 18.2vw;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__contents--pic,
  #banner .other__contents--pic,
  #other .banner__contents--pic,
  #other .other__contents--pic {
    width: 14.56%;
    transition: 0.4s;
    cursor: pointer;
  }
  #banner .banner__contents--pic:hover,
  #banner .other__contents--pic:hover,
  #other .banner__contents--pic:hover,
  #other .other__contents--pic:hover {
    transform: scale(0.98);
    opacity: 0.7;
  }
}
#banner .banner__contents--frowpic,
#banner .other__contents--frowpic,
#other .banner__contents--frowpic,
#other .other__contents--frowpic {
  width: 100%;
}
@media screen and (min-width: 850px) {
  #banner .banner__contents--frowpic,
  #banner .other__contents--frowpic,
  #other .banner__contents--frowpic,
  #other .other__contents--frowpic {
    width: 38.7vw;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__contents--frowpic,
  #banner .other__contents--frowpic,
  #other .banner__contents--frowpic,
  #other .other__contents--frowpic {
    width: 48.7%;
    transition: 0.4s;
    cursor: pointer;
  }
  #banner .banner__contents--frowpic:hover,
  #banner .other__contents--frowpic:hover,
  #other .banner__contents--frowpic:hover,
  #other .other__contents--frowpic:hover {
    transform: scale(0.98);
    opacity: 0.7;
  }
}
#banner .banner__contents--img,
#banner .other__contents--img,
#other .banner__contents--img,
#other .other__contents--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#banner .banner__contents--readmore,
#banner .other__contents--readmore,
#other .banner__contents--readmore,
#other .other__contents--readmore {
  line-height: 1.5;
  letter-spacing: 0em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  margin: 24px auto 0;
  width: 45%;
  font-size: 20px;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  #banner .banner__contents--readmore,
  #banner .other__contents--readmore,
  #other .banner__contents--readmore,
  #other .other__contents--readmore {
    margin-top: 32px;
    width: 25%;
    font-size: 24px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .banner__contents--readmore,
  #banner .other__contents--readmore,
  #other .banner__contents--readmore,
  #other .other__contents--readmore {
    margin-top: 2.7vw;
    width: 20%;
    font-size: clamp(24px, 1.6vw, 40px);
    cursor: pointer;
  }
}
#banner .banner__contents--readmore::after,
#banner .other__contents--readmore::after,
#other .banner__contents--readmore::after,
#other .other__contents--readmore::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-top: 1px solid #222222;
  border-right: 1px solid #222222;
  transform: rotate(131deg) skew(10deg, 15deg);
}
@media screen and (min-width: 1024px) {
  #banner .banner__contents--readmore::after,
  #banner .other__contents--readmore::after,
  #other .banner__contents--readmore::after,
  #other .other__contents--readmore::after {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
  }
}
#banner .contact,
#other .contact {
  padding: 13vw 37px;
  background: #F7F7F7;
}
@media screen and (min-width: 768px) {
  #banner .contact,
  #other .contact {
    padding: 80px 77px;
    display: flex;
    align-items: flex-end;
  }
}
@media screen and (min-width: 1024px) {
  #banner .contact,
  #other .contact {
    padding: 9.7vw 15vw;
  }
}
#banner .contact__head,
#other .contact__head {
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  #banner .contact__head,
  #other .contact__head {
    margin: 0;
  }
}
#banner .contact__head--ttl,
#other .contact__head--ttl {
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
  #banner .contact__head--ttl,
  #other .contact__head--ttl {
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1024px) {
  #banner .contact__head--ttl,
  #other .contact__head--ttl {
    margin-bottom: 2.7vw;
  }
}
@media screen and (min-width: 1024px) {
  #banner .contact__head--txt,
  #other .contact__head--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#banner .contact__mail,
#other .contact__mail {
  position: relative;
  padding: 10px;
  margin-left: auto;
  width: 50vw;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  #banner .contact__mail,
  #other .contact__mail {
    width: 29vw;
  }
}
@media screen and (min-width: 1024px) {
  #banner .contact__mail,
  #other .contact__mail {
    width: 24vw;
  }
  #banner .contact__mail:hover .contact__mail--txt,
  #other .contact__mail:hover .contact__mail--txt {
    transform: translateX(12px);
  }
  #banner .contact__mail:hover .contact__mail--txt::before,
  #other .contact__mail:hover .contact__mail--txt::before {
    background-image: linear-gradient(-45deg, #222222, #f0f0f0, #222222);
    background-size: 200%, 200%;
    animation: line 4s ease infinite;
    height: 1px;
    transform: translateX(-12px);
  }
}
#banner .contact__mail--link,
#other .contact__mail--link {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#banner .contact__mail--txt,
#other .contact__mail--txt {
  line-height: 1.5;
  letter-spacing: 0em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  #banner .contact__mail--txt,
  #other .contact__mail--txt {
    gap: 24px;
    font-size: clamp(28px, 2.2vw, 56px);
    transition: 0.3s;
  }
}
#banner .contact__mail--txt::before,
#other .contact__mail--txt::before {
  content: "";
  display: block;
  width: 59%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 768px) {
  #banner .contact__mail--txt::before,
  #other .contact__mail--txt::before {
    width: 62%;
  }
}
@media screen and (min-width: 1024px) {
  #banner .contact__mail--txt::before,
  #other .contact__mail--txt::before {
    width: 69%;
    transition: 0.3s;
  }
}

#lp .pan,
#print .pan,
#sales .pan,
#data .pan,
#coding .pan {
  padding-top: 86px;
  margin: 0 auto 56px;
  width: 80vw;
  text-align: right;
  color: #727272;
}
@media screen and (min-width: 768px) {
  #lp .pan,
  #print .pan,
  #sales .pan,
  #data .pan,
  #coding .pan {
    padding-top: 90px;
    margin-bottom: 64px;
  }
}
@media screen and (min-width: 1024px) {
  #lp .pan,
  #print .pan,
  #sales .pan,
  #data .pan,
  #coding .pan {
    padding-top: 98px;
    margin-bottom: 5.9vw;
  }
}
#lp .pan__link,
#print .pan__link,
#sales .pan__link,
#data .pan__link,
#coding .pan__link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: inline;
  color: #727272;
}
#lp .lp,
#lp .print,
#lp .sales,
#lp .data,
#lp .coding,
#print .lp,
#print .print,
#print .sales,
#print .data,
#print .coding,
#sales .lp,
#sales .print,
#sales .sales,
#sales .data,
#sales .coding,
#data .lp,
#data .print,
#data .sales,
#data .data,
#data .coding,
#coding .lp,
#coding .print,
#coding .sales,
#coding .data,
#coding .coding {
  width: 90.4vw;
  margin: 0 0 80px auto;
}
@media screen and (min-width: 768px) {
  #lp .lp,
  #lp .print,
  #lp .sales,
  #lp .data,
  #lp .coding,
  #print .lp,
  #print .print,
  #print .sales,
  #print .data,
  #print .coding,
  #sales .lp,
  #sales .print,
  #sales .sales,
  #sales .data,
  #sales .coding,
  #data .lp,
  #data .print,
  #data .sales,
  #data .data,
  #data .coding,
  #coding .lp,
  #coding .print,
  #coding .sales,
  #coding .data,
  #coding .coding {
    width: 90vw;
    margin-bottom: 96px;
  }
}
@media screen and (min-width: 1024px) {
  #lp .lp,
  #lp .print,
  #lp .sales,
  #lp .data,
  #lp .coding,
  #print .lp,
  #print .print,
  #print .sales,
  #print .data,
  #print .coding,
  #sales .lp,
  #sales .print,
  #sales .sales,
  #sales .data,
  #sales .coding,
  #data .lp,
  #data .print,
  #data .sales,
  #data .data,
  #data .coding,
  #coding .lp,
  #coding .print,
  #coding .sales,
  #coding .data,
  #coding .coding {
    margin-bottom: 9.7vw;
  }
}
#lp .lp__txtarea,
#lp .print__txtarea,
#lp .sales__txtarea,
#lp .data__txtarea,
#lp .coding__txtarea,
#print .lp__txtarea,
#print .print__txtarea,
#print .sales__txtarea,
#print .data__txtarea,
#print .coding__txtarea,
#sales .lp__txtarea,
#sales .print__txtarea,
#sales .sales__txtarea,
#sales .data__txtarea,
#sales .coding__txtarea,
#data .lp__txtarea,
#data .print__txtarea,
#data .sales__txtarea,
#data .data__txtarea,
#data .coding__txtarea,
#coding .lp__txtarea,
#coding .print__txtarea,
#coding .sales__txtarea,
#coding .data__txtarea,
#coding .coding__txtarea {
  width: 88%;
  margin-bottom: 80px;
}
@media screen and (min-width: 768px) {
  #lp .lp__txtarea,
  #lp .print__txtarea,
  #lp .sales__txtarea,
  #lp .data__txtarea,
  #lp .coding__txtarea,
  #print .lp__txtarea,
  #print .print__txtarea,
  #print .sales__txtarea,
  #print .data__txtarea,
  #print .coding__txtarea,
  #sales .lp__txtarea,
  #sales .print__txtarea,
  #sales .sales__txtarea,
  #sales .data__txtarea,
  #sales .coding__txtarea,
  #data .lp__txtarea,
  #data .print__txtarea,
  #data .sales__txtarea,
  #data .data__txtarea,
  #data .coding__txtarea,
  #coding .lp__txtarea,
  #coding .print__txtarea,
  #coding .sales__txtarea,
  #coding .data__txtarea,
  #coding .coding__txtarea {
    margin-bottom: 104px;
  }
}
@media screen and (min-width: 1024px) {
  #lp .lp__txtarea,
  #lp .print__txtarea,
  #lp .sales__txtarea,
  #lp .data__txtarea,
  #lp .coding__txtarea,
  #print .lp__txtarea,
  #print .print__txtarea,
  #print .sales__txtarea,
  #print .data__txtarea,
  #print .coding__txtarea,
  #sales .lp__txtarea,
  #sales .print__txtarea,
  #sales .sales__txtarea,
  #sales .data__txtarea,
  #sales .coding__txtarea,
  #data .lp__txtarea,
  #data .print__txtarea,
  #data .sales__txtarea,
  #data .data__txtarea,
  #data .coding__txtarea,
  #coding .lp__txtarea,
  #coding .print__txtarea,
  #coding .sales__txtarea,
  #coding .data__txtarea,
  #coding .coding__txtarea {
    margin-bottom: 6.6vw;
  }
}
#lp .lp__txtarea--shoulder,
#lp .print__txtarea--shoulder,
#lp .sales__txtarea--shoulder,
#lp .data__txtarea--shoulder,
#lp .coding__txtarea--shoulder,
#print .lp__txtarea--shoulder,
#print .print__txtarea--shoulder,
#print .sales__txtarea--shoulder,
#print .data__txtarea--shoulder,
#print .coding__txtarea--shoulder,
#sales .lp__txtarea--shoulder,
#sales .print__txtarea--shoulder,
#sales .sales__txtarea--shoulder,
#sales .data__txtarea--shoulder,
#sales .coding__txtarea--shoulder,
#data .lp__txtarea--shoulder,
#data .print__txtarea--shoulder,
#data .sales__txtarea--shoulder,
#data .data__txtarea--shoulder,
#data .coding__txtarea--shoulder,
#coding .lp__txtarea--shoulder,
#coding .print__txtarea--shoulder,
#coding .sales__txtarea--shoulder,
#coding .data__txtarea--shoulder,
#coding .coding__txtarea--shoulder {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  #lp .lp__txtarea--shoulder,
  #lp .print__txtarea--shoulder,
  #lp .sales__txtarea--shoulder,
  #lp .data__txtarea--shoulder,
  #lp .coding__txtarea--shoulder,
  #print .lp__txtarea--shoulder,
  #print .print__txtarea--shoulder,
  #print .sales__txtarea--shoulder,
  #print .data__txtarea--shoulder,
  #print .coding__txtarea--shoulder,
  #sales .lp__txtarea--shoulder,
  #sales .print__txtarea--shoulder,
  #sales .sales__txtarea--shoulder,
  #sales .data__txtarea--shoulder,
  #sales .coding__txtarea--shoulder,
  #data .lp__txtarea--shoulder,
  #data .print__txtarea--shoulder,
  #data .sales__txtarea--shoulder,
  #data .data__txtarea--shoulder,
  #data .coding__txtarea--shoulder,
  #coding .lp__txtarea--shoulder,
  #coding .print__txtarea--shoulder,
  #coding .sales__txtarea--shoulder,
  #coding .data__txtarea--shoulder,
  #coding .coding__txtarea--shoulder {
    margin-bottom: 0.2vw;
  }
}
#lp .lp__txtarea--ttl,
#lp .print__txtarea--ttl,
#lp .sales__txtarea--ttl,
#lp .data__txtarea--ttl,
#lp .coding__txtarea--ttl,
#print .lp__txtarea--ttl,
#print .print__txtarea--ttl,
#print .sales__txtarea--ttl,
#print .data__txtarea--ttl,
#print .coding__txtarea--ttl,
#sales .lp__txtarea--ttl,
#sales .print__txtarea--ttl,
#sales .sales__txtarea--ttl,
#sales .data__txtarea--ttl,
#sales .coding__txtarea--ttl,
#data .lp__txtarea--ttl,
#data .print__txtarea--ttl,
#data .sales__txtarea--ttl,
#data .data__txtarea--ttl,
#data .coding__txtarea--ttl,
#coding .lp__txtarea--ttl,
#coding .print__txtarea--ttl,
#coding .sales__txtarea--ttl,
#coding .data__txtarea--ttl,
#coding .coding__txtarea--ttl {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  #lp .lp__txtarea--ttl,
  #lp .print__txtarea--ttl,
  #lp .sales__txtarea--ttl,
  #lp .data__txtarea--ttl,
  #lp .coding__txtarea--ttl,
  #print .lp__txtarea--ttl,
  #print .print__txtarea--ttl,
  #print .sales__txtarea--ttl,
  #print .data__txtarea--ttl,
  #print .coding__txtarea--ttl,
  #sales .lp__txtarea--ttl,
  #sales .print__txtarea--ttl,
  #sales .sales__txtarea--ttl,
  #sales .data__txtarea--ttl,
  #sales .coding__txtarea--ttl,
  #data .lp__txtarea--ttl,
  #data .print__txtarea--ttl,
  #data .sales__txtarea--ttl,
  #data .data__txtarea--ttl,
  #data .coding__txtarea--ttl,
  #coding .lp__txtarea--ttl,
  #coding .print__txtarea--ttl,
  #coding .sales__txtarea--ttl,
  #coding .data__txtarea--ttl,
  #coding .coding__txtarea--ttl {
    margin-bottom: 4.6vw;
  }
}
#lp .lp__txtarea--days,
#lp .print__txtarea--days,
#lp .sales__txtarea--days,
#lp .data__txtarea--days,
#lp .coding__txtarea--days,
#print .lp__txtarea--days,
#print .print__txtarea--days,
#print .sales__txtarea--days,
#print .data__txtarea--days,
#print .coding__txtarea--days,
#sales .lp__txtarea--days,
#sales .print__txtarea--days,
#sales .sales__txtarea--days,
#sales .data__txtarea--days,
#sales .coding__txtarea--days,
#data .lp__txtarea--days,
#data .print__txtarea--days,
#data .sales__txtarea--days,
#data .data__txtarea--days,
#data .coding__txtarea--days,
#coding .lp__txtarea--days,
#coding .print__txtarea--days,
#coding .sales__txtarea--days,
#coding .data__txtarea--days,
#coding .coding__txtarea--days {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  #lp .lp__txtarea--days,
  #lp .print__txtarea--days,
  #lp .sales__txtarea--days,
  #lp .data__txtarea--days,
  #lp .coding__txtarea--days,
  #print .lp__txtarea--days,
  #print .print__txtarea--days,
  #print .sales__txtarea--days,
  #print .data__txtarea--days,
  #print .coding__txtarea--days,
  #sales .lp__txtarea--days,
  #sales .print__txtarea--days,
  #sales .sales__txtarea--days,
  #sales .data__txtarea--days,
  #sales .coding__txtarea--days,
  #data .lp__txtarea--days,
  #data .print__txtarea--days,
  #data .sales__txtarea--days,
  #data .data__txtarea--days,
  #data .coding__txtarea--days,
  #coding .lp__txtarea--days,
  #coding .print__txtarea--days,
  #coding .sales__txtarea--days,
  #coding .data__txtarea--days,
  #coding .coding__txtarea--days {
    margin-bottom: 1.1vw;
  }
}
#lp .lp__txtarea--txt,
#lp .print__txtarea--txt,
#lp .sales__txtarea--txt,
#lp .data__txtarea--txt,
#lp .coding__txtarea--txt,
#print .lp__txtarea--txt,
#print .print__txtarea--txt,
#print .sales__txtarea--txt,
#print .data__txtarea--txt,
#print .coding__txtarea--txt,
#sales .lp__txtarea--txt,
#sales .print__txtarea--txt,
#sales .sales__txtarea--txt,
#sales .data__txtarea--txt,
#sales .coding__txtarea--txt,
#data .lp__txtarea--txt,
#data .print__txtarea--txt,
#data .sales__txtarea--txt,
#data .data__txtarea--txt,
#data .coding__txtarea--txt,
#coding .lp__txtarea--txt,
#coding .print__txtarea--txt,
#coding .sales__txtarea--txt,
#coding .data__txtarea--txt,
#coding .coding__txtarea--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #lp .lp__txtarea--txt,
  #lp .print__txtarea--txt,
  #lp .sales__txtarea--txt,
  #lp .data__txtarea--txt,
  #lp .coding__txtarea--txt,
  #print .lp__txtarea--txt,
  #print .print__txtarea--txt,
  #print .sales__txtarea--txt,
  #print .data__txtarea--txt,
  #print .coding__txtarea--txt,
  #sales .lp__txtarea--txt,
  #sales .print__txtarea--txt,
  #sales .sales__txtarea--txt,
  #sales .data__txtarea--txt,
  #sales .coding__txtarea--txt,
  #data .lp__txtarea--txt,
  #data .print__txtarea--txt,
  #data .sales__txtarea--txt,
  #data .data__txtarea--txt,
  #data .coding__txtarea--txt,
  #coding .lp__txtarea--txt,
  #coding .print__txtarea--txt,
  #coding .sales__txtarea--txt,
  #coding .data__txtarea--txt,
  #coding .coding__txtarea--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#lp .lp__main,
#lp .print__main,
#lp .sales__main,
#lp .data__main,
#lp .coding__main,
#print .lp__main,
#print .print__main,
#print .sales__main,
#print .data__main,
#print .coding__main,
#sales .lp__main,
#sales .print__main,
#sales .sales__main,
#sales .data__main,
#sales .coding__main,
#data .lp__main,
#data .print__main,
#data .sales__main,
#data .data__main,
#data .coding__main,
#coding .lp__main,
#coding .print__main,
#coding .sales__main,
#coding .data__main,
#coding .coding__main {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media screen and (min-width: 768px) {
  #lp .lp__main,
  #lp .print__main,
  #lp .sales__main,
  #lp .data__main,
  #lp .coding__main,
  #print .lp__main,
  #print .print__main,
  #print .sales__main,
  #print .data__main,
  #print .coding__main,
  #sales .lp__main,
  #sales .print__main,
  #sales .sales__main,
  #sales .data__main,
  #sales .coding__main,
  #data .lp__main,
  #data .print__main,
  #data .sales__main,
  #data .data__main,
  #data .coding__main,
  #coding .lp__main,
  #coding .print__main,
  #coding .sales__main,
  #coding .data__main,
  #coding .coding__main {
    gap: 7.2vw;
  }
}
@media screen and (min-width: 1024px) {
  #lp .lp__main,
  #lp .print__main,
  #lp .sales__main,
  #lp .data__main,
  #lp .coding__main,
  #print .lp__main,
  #print .print__main,
  #print .sales__main,
  #print .data__main,
  #print .coding__main,
  #sales .lp__main,
  #sales .print__main,
  #sales .sales__main,
  #sales .data__main,
  #sales .coding__main,
  #data .lp__main,
  #data .print__main,
  #data .sales__main,
  #data .data__main,
  #data .coding__main,
  #coding .lp__main,
  #coding .print__main,
  #coding .sales__main,
  #coding .data__main,
  #coding .coding__main {
    width: 88%;
  }
}
#lp .lp__contents--txtarea,
#lp .print__contents--txtarea,
#lp .sales__contents--txtarea,
#lp .data__contents--txtarea,
#lp .coding__contents--txtarea,
#print .lp__contents--txtarea,
#print .print__contents--txtarea,
#print .sales__contents--txtarea,
#print .data__contents--txtarea,
#print .coding__contents--txtarea,
#sales .lp__contents--txtarea,
#sales .print__contents--txtarea,
#sales .sales__contents--txtarea,
#sales .data__contents--txtarea,
#sales .coding__contents--txtarea,
#data .lp__contents--txtarea,
#data .print__contents--txtarea,
#data .sales__contents--txtarea,
#data .data__contents--txtarea,
#data .coding__contents--txtarea,
#coding .lp__contents--txtarea,
#coding .print__contents--txtarea,
#coding .sales__contents--txtarea,
#coding .data__contents--txtarea,
#coding .coding__contents--txtarea {
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  #lp .lp__contents--txtarea,
  #lp .print__contents--txtarea,
  #lp .sales__contents--txtarea,
  #lp .data__contents--txtarea,
  #lp .coding__contents--txtarea,
  #print .lp__contents--txtarea,
  #print .print__contents--txtarea,
  #print .sales__contents--txtarea,
  #print .data__contents--txtarea,
  #print .coding__contents--txtarea,
  #sales .lp__contents--txtarea,
  #sales .print__contents--txtarea,
  #sales .sales__contents--txtarea,
  #sales .data__contents--txtarea,
  #sales .coding__contents--txtarea,
  #data .lp__contents--txtarea,
  #data .print__contents--txtarea,
  #data .sales__contents--txtarea,
  #data .data__contents--txtarea,
  #data .coding__contents--txtarea,
  #coding .lp__contents--txtarea,
  #coding .print__contents--txtarea,
  #coding .sales__contents--txtarea,
  #coding .data__contents--txtarea,
  #coding .coding__contents--txtarea {
    margin-bottom: 32px;
  }
}
@media screen and (min-width: 1024px) {
  #lp .lp__contents--txtarea,
  #lp .print__contents--txtarea,
  #lp .sales__contents--txtarea,
  #lp .data__contents--txtarea,
  #lp .coding__contents--txtarea,
  #print .lp__contents--txtarea,
  #print .print__contents--txtarea,
  #print .sales__contents--txtarea,
  #print .data__contents--txtarea,
  #print .coding__contents--txtarea,
  #sales .lp__contents--txtarea,
  #sales .print__contents--txtarea,
  #sales .sales__contents--txtarea,
  #sales .data__contents--txtarea,
  #sales .coding__contents--txtarea,
  #data .lp__contents--txtarea,
  #data .print__contents--txtarea,
  #data .sales__contents--txtarea,
  #data .data__contents--txtarea,
  #data .coding__contents--txtarea,
  #coding .lp__contents--txtarea,
  #coding .print__contents--txtarea,
  #coding .sales__contents--txtarea,
  #coding .data__contents--txtarea,
  #coding .coding__contents--txtarea {
    margin-bottom: 2.7vw;
  }
}
#lp .lp__contents--head,
#lp .print__contents--head,
#lp .sales__contents--head,
#lp .data__contents--head,
#lp .coding__contents--head,
#print .lp__contents--head,
#print .print__contents--head,
#print .sales__contents--head,
#print .data__contents--head,
#print .coding__contents--head,
#sales .lp__contents--head,
#sales .print__contents--head,
#sales .sales__contents--head,
#sales .data__contents--head,
#sales .coding__contents--head,
#data .lp__contents--head,
#data .print__contents--head,
#data .sales__contents--head,
#data .data__contents--head,
#data .coding__contents--head,
#coding .lp__contents--head,
#coding .print__contents--head,
#coding .sales__contents--head,
#coding .data__contents--head,
#coding .coding__contents--head {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  width: 88%;
}
@media screen and (min-width: 768px) {
  #lp .lp__contents--head,
  #lp .print__contents--head,
  #lp .sales__contents--head,
  #lp .data__contents--head,
  #lp .coding__contents--head,
  #print .lp__contents--head,
  #print .print__contents--head,
  #print .sales__contents--head,
  #print .data__contents--head,
  #print .coding__contents--head,
  #sales .lp__contents--head,
  #sales .print__contents--head,
  #sales .sales__contents--head,
  #sales .data__contents--head,
  #sales .coding__contents--head,
  #data .lp__contents--head,
  #data .print__contents--head,
  #data .sales__contents--head,
  #data .data__contents--head,
  #data .coding__contents--head,
  #coding .lp__contents--head,
  #coding .print__contents--head,
  #coding .sales__contents--head,
  #coding .data__contents--head,
  #coding .coding__contents--head {
    gap: 20px;
    width: auto;
  }
}
@media screen and (min-width: 1024px) {
  #lp .lp__contents--head,
  #lp .print__contents--head,
  #lp .sales__contents--head,
  #lp .data__contents--head,
  #lp .coding__contents--head,
  #print .lp__contents--head,
  #print .print__contents--head,
  #print .sales__contents--head,
  #print .data__contents--head,
  #print .coding__contents--head,
  #sales .lp__contents--head,
  #sales .print__contents--head,
  #sales .sales__contents--head,
  #sales .data__contents--head,
  #sales .coding__contents--head,
  #data .lp__contents--head,
  #data .print__contents--head,
  #data .sales__contents--head,
  #data .data__contents--head,
  #data .coding__contents--head,
  #coding .lp__contents--head,
  #coding .print__contents--head,
  #coding .sales__contents--head,
  #coding .data__contents--head,
  #coding .coding__contents--head {
    gap: 2.2vw;
    margin-bottom: 1.6vw;
    cursor: pointer;
  }
  #lp .lp__contents--head:hover .lp__contents--top, #lp .lp__contents--head:hover .print__contents--top, #lp .lp__contents--head:hover .sales__contents--top, #lp .lp__contents--head:hover .coding__contents--top, #lp .lp__contents--head:hover .data__contents--top,
  #lp .print__contents--head:hover .lp__contents--top,
  #lp .print__contents--head:hover .print__contents--top,
  #lp .print__contents--head:hover .sales__contents--top,
  #lp .print__contents--head:hover .coding__contents--top,
  #lp .print__contents--head:hover .data__contents--top,
  #lp .sales__contents--head:hover .lp__contents--top,
  #lp .sales__contents--head:hover .print__contents--top,
  #lp .sales__contents--head:hover .sales__contents--top,
  #lp .sales__contents--head:hover .coding__contents--top,
  #lp .sales__contents--head:hover .data__contents--top,
  #lp .data__contents--head:hover .lp__contents--top,
  #lp .data__contents--head:hover .print__contents--top,
  #lp .data__contents--head:hover .sales__contents--top,
  #lp .data__contents--head:hover .coding__contents--top,
  #lp .data__contents--head:hover .data__contents--top,
  #lp .coding__contents--head:hover .lp__contents--top,
  #lp .coding__contents--head:hover .print__contents--top,
  #lp .coding__contents--head:hover .sales__contents--top,
  #lp .coding__contents--head:hover .coding__contents--top,
  #lp .coding__contents--head:hover .data__contents--top,
  #print .lp__contents--head:hover .lp__contents--top,
  #print .lp__contents--head:hover .print__contents--top,
  #print .lp__contents--head:hover .sales__contents--top,
  #print .lp__contents--head:hover .coding__contents--top,
  #print .lp__contents--head:hover .data__contents--top,
  #print .print__contents--head:hover .lp__contents--top,
  #print .print__contents--head:hover .print__contents--top,
  #print .print__contents--head:hover .sales__contents--top,
  #print .print__contents--head:hover .coding__contents--top,
  #print .print__contents--head:hover .data__contents--top,
  #print .sales__contents--head:hover .lp__contents--top,
  #print .sales__contents--head:hover .print__contents--top,
  #print .sales__contents--head:hover .sales__contents--top,
  #print .sales__contents--head:hover .coding__contents--top,
  #print .sales__contents--head:hover .data__contents--top,
  #print .data__contents--head:hover .lp__contents--top,
  #print .data__contents--head:hover .print__contents--top,
  #print .data__contents--head:hover .sales__contents--top,
  #print .data__contents--head:hover .coding__contents--top,
  #print .data__contents--head:hover .data__contents--top,
  #print .coding__contents--head:hover .lp__contents--top,
  #print .coding__contents--head:hover .print__contents--top,
  #print .coding__contents--head:hover .sales__contents--top,
  #print .coding__contents--head:hover .coding__contents--top,
  #print .coding__contents--head:hover .data__contents--top,
  #sales .lp__contents--head:hover .lp__contents--top,
  #sales .lp__contents--head:hover .print__contents--top,
  #sales .lp__contents--head:hover .sales__contents--top,
  #sales .lp__contents--head:hover .coding__contents--top,
  #sales .lp__contents--head:hover .data__contents--top,
  #sales .print__contents--head:hover .lp__contents--top,
  #sales .print__contents--head:hover .print__contents--top,
  #sales .print__contents--head:hover .sales__contents--top,
  #sales .print__contents--head:hover .coding__contents--top,
  #sales .print__contents--head:hover .data__contents--top,
  #sales .sales__contents--head:hover .lp__contents--top,
  #sales .sales__contents--head:hover .print__contents--top,
  #sales .sales__contents--head:hover .sales__contents--top,
  #sales .sales__contents--head:hover .coding__contents--top,
  #sales .sales__contents--head:hover .data__contents--top,
  #sales .data__contents--head:hover .lp__contents--top,
  #sales .data__contents--head:hover .print__contents--top,
  #sales .data__contents--head:hover .sales__contents--top,
  #sales .data__contents--head:hover .coding__contents--top,
  #sales .data__contents--head:hover .data__contents--top,
  #sales .coding__contents--head:hover .lp__contents--top,
  #sales .coding__contents--head:hover .print__contents--top,
  #sales .coding__contents--head:hover .sales__contents--top,
  #sales .coding__contents--head:hover .coding__contents--top,
  #sales .coding__contents--head:hover .data__contents--top,
  #data .lp__contents--head:hover .lp__contents--top,
  #data .lp__contents--head:hover .print__contents--top,
  #data .lp__contents--head:hover .sales__contents--top,
  #data .lp__contents--head:hover .coding__contents--top,
  #data .lp__contents--head:hover .data__contents--top,
  #data .print__contents--head:hover .lp__contents--top,
  #data .print__contents--head:hover .print__contents--top,
  #data .print__contents--head:hover .sales__contents--top,
  #data .print__contents--head:hover .coding__contents--top,
  #data .print__contents--head:hover .data__contents--top,
  #data .sales__contents--head:hover .lp__contents--top,
  #data .sales__contents--head:hover .print__contents--top,
  #data .sales__contents--head:hover .sales__contents--top,
  #data .sales__contents--head:hover .coding__contents--top,
  #data .sales__contents--head:hover .data__contents--top,
  #data .data__contents--head:hover .lp__contents--top,
  #data .data__contents--head:hover .print__contents--top,
  #data .data__contents--head:hover .sales__contents--top,
  #data .data__contents--head:hover .coding__contents--top,
  #data .data__contents--head:hover .data__contents--top,
  #data .coding__contents--head:hover .lp__contents--top,
  #data .coding__contents--head:hover .print__contents--top,
  #data .coding__contents--head:hover .sales__contents--top,
  #data .coding__contents--head:hover .coding__contents--top,
  #data .coding__contents--head:hover .data__contents--top,
  #coding .lp__contents--head:hover .lp__contents--top,
  #coding .lp__contents--head:hover .print__contents--top,
  #coding .lp__contents--head:hover .sales__contents--top,
  #coding .lp__contents--head:hover .coding__contents--top,
  #coding .lp__contents--head:hover .data__contents--top,
  #coding .print__contents--head:hover .lp__contents--top,
  #coding .print__contents--head:hover .print__contents--top,
  #coding .print__contents--head:hover .sales__contents--top,
  #coding .print__contents--head:hover .coding__contents--top,
  #coding .print__contents--head:hover .data__contents--top,
  #coding .sales__contents--head:hover .lp__contents--top,
  #coding .sales__contents--head:hover .print__contents--top,
  #coding .sales__contents--head:hover .sales__contents--top,
  #coding .sales__contents--head:hover .coding__contents--top,
  #coding .sales__contents--head:hover .data__contents--top,
  #coding .data__contents--head:hover .lp__contents--top,
  #coding .data__contents--head:hover .print__contents--top,
  #coding .data__contents--head:hover .sales__contents--top,
  #coding .data__contents--head:hover .coding__contents--top,
  #coding .data__contents--head:hover .data__contents--top,
  #coding .coding__contents--head:hover .lp__contents--top,
  #coding .coding__contents--head:hover .print__contents--top,
  #coding .coding__contents--head:hover .sales__contents--top,
  #coding .coding__contents--head:hover .coding__contents--top,
  #coding .coding__contents--head:hover .data__contents--top {
    transform: translate(16px, 0) rotate(90deg);
  }
}
#lp .lp__contents--link,
#lp .print__contents--link,
#lp .sales__contents--link,
#lp .data__contents--link,
#lp .coding__contents--link,
#print .lp__contents--link,
#print .print__contents--link,
#print .sales__contents--link,
#print .data__contents--link,
#print .coding__contents--link,
#sales .lp__contents--link,
#sales .print__contents--link,
#sales .sales__contents--link,
#sales .data__contents--link,
#sales .coding__contents--link,
#data .lp__contents--link,
#data .print__contents--link,
#data .sales__contents--link,
#data .data__contents--link,
#data .coding__contents--link,
#coding .lp__contents--link,
#coding .print__contents--link,
#coding .sales__contents--link,
#coding .data__contents--link,
#coding .coding__contents--link {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#lp .lp__contents--ttl,
#lp .print__contents--ttl,
#lp .sales__contents--ttl,
#lp .data__contents--ttl,
#lp .coding__contents--ttl,
#print .lp__contents--ttl,
#print .print__contents--ttl,
#print .sales__contents--ttl,
#print .data__contents--ttl,
#print .coding__contents--ttl,
#sales .lp__contents--ttl,
#sales .print__contents--ttl,
#sales .sales__contents--ttl,
#sales .data__contents--ttl,
#sales .coding__contents--ttl,
#data .lp__contents--ttl,
#data .print__contents--ttl,
#data .sales__contents--ttl,
#data .data__contents--ttl,
#data .coding__contents--ttl,
#coding .lp__contents--ttl,
#coding .print__contents--ttl,
#coding .sales__contents--ttl,
#coding .data__contents--ttl,
#coding .coding__contents--ttl {
  max-width: 81%;
}
@media screen and (min-width: 768px) {
  #lp .lp__contents--ttl,
  #lp .print__contents--ttl,
  #lp .sales__contents--ttl,
  #lp .data__contents--ttl,
  #lp .coding__contents--ttl,
  #print .lp__contents--ttl,
  #print .print__contents--ttl,
  #print .sales__contents--ttl,
  #print .data__contents--ttl,
  #print .coding__contents--ttl,
  #sales .lp__contents--ttl,
  #sales .print__contents--ttl,
  #sales .sales__contents--ttl,
  #sales .data__contents--ttl,
  #sales .coding__contents--ttl,
  #data .lp__contents--ttl,
  #data .print__contents--ttl,
  #data .sales__contents--ttl,
  #data .data__contents--ttl,
  #data .coding__contents--ttl,
  #coding .lp__contents--ttl,
  #coding .print__contents--ttl,
  #coding .sales__contents--ttl,
  #coding .data__contents--ttl,
  #coding .coding__contents--ttl {
    width: auto;
  }
}
#lp .lp__contents--top,
#lp .print__contents--top,
#lp .sales__contents--top,
#lp .data__contents--top,
#lp .coding__contents--top,
#print .lp__contents--top,
#print .print__contents--top,
#print .sales__contents--top,
#print .data__contents--top,
#print .coding__contents--top,
#sales .lp__contents--top,
#sales .print__contents--top,
#sales .sales__contents--top,
#sales .data__contents--top,
#sales .coding__contents--top,
#data .lp__contents--top,
#data .print__contents--top,
#data .sales__contents--top,
#data .data__contents--top,
#data .coding__contents--top,
#coding .lp__contents--top,
#coding .print__contents--top,
#coding .sales__contents--top,
#coding .data__contents--top,
#coding .coding__contents--top {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #222222;
  width: 40px;
  height: 40px;
  transform: rotate(90deg);
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  #lp .lp__contents--top,
  #lp .print__contents--top,
  #lp .sales__contents--top,
  #lp .data__contents--top,
  #lp .coding__contents--top,
  #print .lp__contents--top,
  #print .print__contents--top,
  #print .sales__contents--top,
  #print .data__contents--top,
  #print .coding__contents--top,
  #sales .lp__contents--top,
  #sales .print__contents--top,
  #sales .sales__contents--top,
  #sales .data__contents--top,
  #sales .coding__contents--top,
  #data .lp__contents--top,
  #data .print__contents--top,
  #data .sales__contents--top,
  #data .data__contents--top,
  #data .coding__contents--top,
  #coding .lp__contents--top,
  #coding .print__contents--top,
  #coding .sales__contents--top,
  #coding .data__contents--top,
  #coding .coding__contents--top {
    width: 64px;
    height: 64px;
    transition: 0.4s;
  }
}
#lp .lp__contents--top--link,
#lp .print__contents--top--link,
#lp .sales__contents--top--link,
#lp .data__contents--top--link,
#lp .coding__contents--top--link,
#print .lp__contents--top--link,
#print .print__contents--top--link,
#print .sales__contents--top--link,
#print .data__contents--top--link,
#print .coding__contents--top--link,
#sales .lp__contents--top--link,
#sales .print__contents--top--link,
#sales .sales__contents--top--link,
#sales .data__contents--top--link,
#sales .coding__contents--top--link,
#data .lp__contents--top--link,
#data .print__contents--top--link,
#data .sales__contents--top--link,
#data .data__contents--top--link,
#data .coding__contents--top--link,
#coding .lp__contents--top--link,
#coding .print__contents--top--link,
#coding .sales__contents--top--link,
#coding .data__contents--top--link,
#coding .coding__contents--top--link {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#lp .lp__contents--top--arrow,
#lp .print__contents--top--arrow,
#lp .sales__contents--top--arrow,
#lp .data__contents--top--arrow,
#lp .coding__contents--top--arrow,
#print .lp__contents--top--arrow,
#print .print__contents--top--arrow,
#print .sales__contents--top--arrow,
#print .data__contents--top--arrow,
#print .coding__contents--top--arrow,
#sales .lp__contents--top--arrow,
#sales .print__contents--top--arrow,
#sales .sales__contents--top--arrow,
#sales .data__contents--top--arrow,
#sales .coding__contents--top--arrow,
#data .lp__contents--top--arrow,
#data .print__contents--top--arrow,
#data .sales__contents--top--arrow,
#data .data__contents--top--arrow,
#data .coding__contents--top--arrow,
#coding .lp__contents--top--arrow,
#coding .print__contents--top--arrow,
#coding .sales__contents--top--arrow,
#coding .data__contents--top--arrow,
#coding .coding__contents--top--arrow {
  display: block;
  width: 1px;
  height: 16px;
  background: #222222;
  transition: 0.3s;
}
@media screen and (min-width: 1024px) {
  #lp .lp__contents--top--arrow,
  #lp .print__contents--top--arrow,
  #lp .sales__contents--top--arrow,
  #lp .data__contents--top--arrow,
  #lp .coding__contents--top--arrow,
  #print .lp__contents--top--arrow,
  #print .print__contents--top--arrow,
  #print .sales__contents--top--arrow,
  #print .data__contents--top--arrow,
  #print .coding__contents--top--arrow,
  #sales .lp__contents--top--arrow,
  #sales .print__contents--top--arrow,
  #sales .sales__contents--top--arrow,
  #sales .data__contents--top--arrow,
  #sales .coding__contents--top--arrow,
  #data .lp__contents--top--arrow,
  #data .print__contents--top--arrow,
  #data .sales__contents--top--arrow,
  #data .data__contents--top--arrow,
  #data .coding__contents--top--arrow,
  #coding .lp__contents--top--arrow,
  #coding .print__contents--top--arrow,
  #coding .sales__contents--top--arrow,
  #coding .data__contents--top--arrow,
  #coding .coding__contents--top--arrow {
    height: 24px;
  }
}
#lp .lp__contents--top--arrow::before,
#lp .print__contents--top--arrow::before,
#lp .sales__contents--top--arrow::before,
#lp .data__contents--top--arrow::before,
#lp .coding__contents--top--arrow::before,
#print .lp__contents--top--arrow::before,
#print .print__contents--top--arrow::before,
#print .sales__contents--top--arrow::before,
#print .data__contents--top--arrow::before,
#print .coding__contents--top--arrow::before,
#sales .lp__contents--top--arrow::before,
#sales .print__contents--top--arrow::before,
#sales .sales__contents--top--arrow::before,
#sales .data__contents--top--arrow::before,
#sales .coding__contents--top--arrow::before,
#data .lp__contents--top--arrow::before,
#data .print__contents--top--arrow::before,
#data .sales__contents--top--arrow::before,
#data .data__contents--top--arrow::before,
#data .coding__contents--top--arrow::before,
#coding .lp__contents--top--arrow::before,
#coding .print__contents--top--arrow::before,
#coding .sales__contents--top--arrow::before,
#coding .data__contents--top--arrow::before,
#coding .coding__contents--top--arrow::before {
  content: "";
  display: block;
  position: relative;
  top: -1px;
  left: -2px;
  width: 1px;
  height: 8px;
  background: #222222;
  transform: rotate(45deg);
}
#lp .lp__contents--line,
#lp .print__contents--line,
#lp .sales__contents--line,
#lp .data__contents--line,
#lp .coding__contents--line,
#print .lp__contents--line,
#print .print__contents--line,
#print .sales__contents--line,
#print .data__contents--line,
#print .coding__contents--line,
#sales .lp__contents--line,
#sales .print__contents--line,
#sales .sales__contents--line,
#sales .data__contents--line,
#sales .coding__contents--line,
#data .lp__contents--line,
#data .print__contents--line,
#data .sales__contents--line,
#data .data__contents--line,
#data .coding__contents--line,
#coding .lp__contents--line,
#coding .print__contents--line,
#coding .sales__contents--line,
#coding .data__contents--line,
#coding .coding__contents--line {
  display: block;
  margin-bottom: 20px;
  width: 100%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 1024px) {
  #lp .lp__contents--line,
  #lp .print__contents--line,
  #lp .sales__contents--line,
  #lp .data__contents--line,
  #lp .coding__contents--line,
  #print .lp__contents--line,
  #print .print__contents--line,
  #print .sales__contents--line,
  #print .data__contents--line,
  #print .coding__contents--line,
  #sales .lp__contents--line,
  #sales .print__contents--line,
  #sales .sales__contents--line,
  #sales .data__contents--line,
  #sales .coding__contents--line,
  #data .lp__contents--line,
  #data .print__contents--line,
  #data .sales__contents--line,
  #data .data__contents--line,
  #data .coding__contents--line,
  #coding .lp__contents--line,
  #coding .print__contents--line,
  #coding .sales__contents--line,
  #coding .data__contents--line,
  #coding .coding__contents--line {
    margin-bottom: 1.6vw;
  }
}
#lp .lp__contents--table,
#lp .print__contents--table,
#lp .sales__contents--table,
#lp .data__contents--table,
#lp .coding__contents--table,
#print .lp__contents--table,
#print .print__contents--table,
#print .sales__contents--table,
#print .data__contents--table,
#print .coding__contents--table,
#sales .lp__contents--table,
#sales .print__contents--table,
#sales .sales__contents--table,
#sales .data__contents--table,
#sales .coding__contents--table,
#data .lp__contents--table,
#data .print__contents--table,
#data .sales__contents--table,
#data .data__contents--table,
#data .coding__contents--table,
#coding .lp__contents--table,
#coding .print__contents--table,
#coding .sales__contents--table,
#coding .data__contents--table,
#coding .coding__contents--table {
  display: grid;
  grid-template-columns: 100px 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 8px;
  width: 94%;
}
@media screen and (min-width: 768px) {
  #lp .lp__contents--table,
  #lp .print__contents--table,
  #lp .sales__contents--table,
  #lp .data__contents--table,
  #lp .coding__contents--table,
  #print .lp__contents--table,
  #print .print__contents--table,
  #print .sales__contents--table,
  #print .data__contents--table,
  #print .coding__contents--table,
  #sales .lp__contents--table,
  #sales .print__contents--table,
  #sales .sales__contents--table,
  #sales .data__contents--table,
  #sales .coding__contents--table,
  #data .lp__contents--table,
  #data .print__contents--table,
  #data .sales__contents--table,
  #data .data__contents--table,
  #data .coding__contents--table,
  #coding .lp__contents--table,
  #coding .print__contents--table,
  #coding .sales__contents--table,
  #coding .data__contents--table,
  #coding .coding__contents--table {
    -moz-column-gap: 24px;
         column-gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  #lp .lp__contents--table,
  #lp .print__contents--table,
  #lp .sales__contents--table,
  #lp .data__contents--table,
  #lp .coding__contents--table,
  #print .lp__contents--table,
  #print .print__contents--table,
  #print .sales__contents--table,
  #print .data__contents--table,
  #print .coding__contents--table,
  #sales .lp__contents--table,
  #sales .print__contents--table,
  #sales .sales__contents--table,
  #sales .data__contents--table,
  #sales .coding__contents--table,
  #data .lp__contents--table,
  #data .print__contents--table,
  #data .sales__contents--table,
  #data .data__contents--table,
  #data .coding__contents--table,
  #coding .lp__contents--table,
  #coding .print__contents--table,
  #coding .sales__contents--table,
  #coding .data__contents--table,
  #coding .coding__contents--table {
    grid-template-columns: 12% 1fr;
    -moz-column-gap: 4.4vw;
         column-gap: 4.4vw;
    width: 88%;
  }
}
#lp .lp__contents--txt,
#lp .print__contents--txt,
#lp .sales__contents--txt,
#lp .data__contents--txt,
#lp .coding__contents--txt,
#print .lp__contents--txt,
#print .print__contents--txt,
#print .sales__contents--txt,
#print .data__contents--txt,
#print .coding__contents--txt,
#sales .lp__contents--txt,
#sales .print__contents--txt,
#sales .sales__contents--txt,
#sales .data__contents--txt,
#sales .coding__contents--txt,
#data .lp__contents--txt,
#data .print__contents--txt,
#data .sales__contents--txt,
#data .data__contents--txt,
#data .coding__contents--txt,
#coding .lp__contents--txt,
#coding .print__contents--txt,
#coding .sales__contents--txt,
#coding .data__contents--txt,
#coding .coding__contents--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #lp .lp__contents--txt,
  #lp .print__contents--txt,
  #lp .sales__contents--txt,
  #lp .data__contents--txt,
  #lp .coding__contents--txt,
  #print .lp__contents--txt,
  #print .print__contents--txt,
  #print .sales__contents--txt,
  #print .data__contents--txt,
  #print .coding__contents--txt,
  #sales .lp__contents--txt,
  #sales .print__contents--txt,
  #sales .sales__contents--txt,
  #sales .data__contents--txt,
  #sales .coding__contents--txt,
  #data .lp__contents--txt,
  #data .print__contents--txt,
  #data .sales__contents--txt,
  #data .data__contents--txt,
  #data .coding__contents--txt,
  #coding .lp__contents--txt,
  #coding .print__contents--txt,
  #coding .sales__contents--txt,
  #coding .data__contents--txt,
  #coding .coding__contents--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#lp .lp__contents--pic,
#lp .print__contents--pic,
#lp .sales__contents--pic,
#lp .data__contents--pic,
#lp .coding__contents--pic,
#print .lp__contents--pic,
#print .print__contents--pic,
#print .sales__contents--pic,
#print .data__contents--pic,
#print .coding__contents--pic,
#sales .lp__contents--pic,
#sales .print__contents--pic,
#sales .sales__contents--pic,
#sales .data__contents--pic,
#sales .coding__contents--pic,
#data .lp__contents--pic,
#data .print__contents--pic,
#data .sales__contents--pic,
#data .data__contents--pic,
#data .coding__contents--pic,
#coding .lp__contents--pic,
#coding .print__contents--pic,
#coding .sales__contents--pic,
#coding .data__contents--pic,
#coding .coding__contents--pic {
  position: relative;
  width: 100%;
  background: #CFCFCF;
}
@media screen and (min-width: 1024px) {
  #lp .lp__contents--pic,
  #lp .print__contents--pic,
  #lp .sales__contents--pic,
  #lp .data__contents--pic,
  #lp .coding__contents--pic,
  #print .lp__contents--pic,
  #print .print__contents--pic,
  #print .sales__contents--pic,
  #print .data__contents--pic,
  #print .coding__contents--pic,
  #sales .lp__contents--pic,
  #sales .print__contents--pic,
  #sales .sales__contents--pic,
  #sales .data__contents--pic,
  #sales .coding__contents--pic,
  #data .lp__contents--pic,
  #data .print__contents--pic,
  #data .sales__contents--pic,
  #data .data__contents--pic,
  #data .coding__contents--pic,
  #coding .lp__contents--pic,
  #coding .print__contents--pic,
  #coding .sales__contents--pic,
  #coding .data__contents--pic,
  #coding .coding__contents--pic {
    overflow: hidden;
    cursor: pointer;
  }
  #lp .lp__contents--pic:hover .lp__contents--img, #lp .lp__contents--pic:hover .print__contents--img, #lp .lp__contents--pic:hover .sales__contents--img, #lp .lp__contents--pic:hover .data__contents--img, #lp .lp__contents--pic:hover .coding__contents--img,
  #lp .print__contents--pic:hover .lp__contents--img,
  #lp .print__contents--pic:hover .print__contents--img,
  #lp .print__contents--pic:hover .sales__contents--img,
  #lp .print__contents--pic:hover .data__contents--img,
  #lp .print__contents--pic:hover .coding__contents--img,
  #lp .sales__contents--pic:hover .lp__contents--img,
  #lp .sales__contents--pic:hover .print__contents--img,
  #lp .sales__contents--pic:hover .sales__contents--img,
  #lp .sales__contents--pic:hover .data__contents--img,
  #lp .sales__contents--pic:hover .coding__contents--img,
  #lp .data__contents--pic:hover .lp__contents--img,
  #lp .data__contents--pic:hover .print__contents--img,
  #lp .data__contents--pic:hover .sales__contents--img,
  #lp .data__contents--pic:hover .data__contents--img,
  #lp .data__contents--pic:hover .coding__contents--img,
  #lp .coding__contents--pic:hover .lp__contents--img,
  #lp .coding__contents--pic:hover .print__contents--img,
  #lp .coding__contents--pic:hover .sales__contents--img,
  #lp .coding__contents--pic:hover .data__contents--img,
  #lp .coding__contents--pic:hover .coding__contents--img,
  #print .lp__contents--pic:hover .lp__contents--img,
  #print .lp__contents--pic:hover .print__contents--img,
  #print .lp__contents--pic:hover .sales__contents--img,
  #print .lp__contents--pic:hover .data__contents--img,
  #print .lp__contents--pic:hover .coding__contents--img,
  #print .print__contents--pic:hover .lp__contents--img,
  #print .print__contents--pic:hover .print__contents--img,
  #print .print__contents--pic:hover .sales__contents--img,
  #print .print__contents--pic:hover .data__contents--img,
  #print .print__contents--pic:hover .coding__contents--img,
  #print .sales__contents--pic:hover .lp__contents--img,
  #print .sales__contents--pic:hover .print__contents--img,
  #print .sales__contents--pic:hover .sales__contents--img,
  #print .sales__contents--pic:hover .data__contents--img,
  #print .sales__contents--pic:hover .coding__contents--img,
  #print .data__contents--pic:hover .lp__contents--img,
  #print .data__contents--pic:hover .print__contents--img,
  #print .data__contents--pic:hover .sales__contents--img,
  #print .data__contents--pic:hover .data__contents--img,
  #print .data__contents--pic:hover .coding__contents--img,
  #print .coding__contents--pic:hover .lp__contents--img,
  #print .coding__contents--pic:hover .print__contents--img,
  #print .coding__contents--pic:hover .sales__contents--img,
  #print .coding__contents--pic:hover .data__contents--img,
  #print .coding__contents--pic:hover .coding__contents--img,
  #sales .lp__contents--pic:hover .lp__contents--img,
  #sales .lp__contents--pic:hover .print__contents--img,
  #sales .lp__contents--pic:hover .sales__contents--img,
  #sales .lp__contents--pic:hover .data__contents--img,
  #sales .lp__contents--pic:hover .coding__contents--img,
  #sales .print__contents--pic:hover .lp__contents--img,
  #sales .print__contents--pic:hover .print__contents--img,
  #sales .print__contents--pic:hover .sales__contents--img,
  #sales .print__contents--pic:hover .data__contents--img,
  #sales .print__contents--pic:hover .coding__contents--img,
  #sales .sales__contents--pic:hover .lp__contents--img,
  #sales .sales__contents--pic:hover .print__contents--img,
  #sales .sales__contents--pic:hover .sales__contents--img,
  #sales .sales__contents--pic:hover .data__contents--img,
  #sales .sales__contents--pic:hover .coding__contents--img,
  #sales .data__contents--pic:hover .lp__contents--img,
  #sales .data__contents--pic:hover .print__contents--img,
  #sales .data__contents--pic:hover .sales__contents--img,
  #sales .data__contents--pic:hover .data__contents--img,
  #sales .data__contents--pic:hover .coding__contents--img,
  #sales .coding__contents--pic:hover .lp__contents--img,
  #sales .coding__contents--pic:hover .print__contents--img,
  #sales .coding__contents--pic:hover .sales__contents--img,
  #sales .coding__contents--pic:hover .data__contents--img,
  #sales .coding__contents--pic:hover .coding__contents--img,
  #data .lp__contents--pic:hover .lp__contents--img,
  #data .lp__contents--pic:hover .print__contents--img,
  #data .lp__contents--pic:hover .sales__contents--img,
  #data .lp__contents--pic:hover .data__contents--img,
  #data .lp__contents--pic:hover .coding__contents--img,
  #data .print__contents--pic:hover .lp__contents--img,
  #data .print__contents--pic:hover .print__contents--img,
  #data .print__contents--pic:hover .sales__contents--img,
  #data .print__contents--pic:hover .data__contents--img,
  #data .print__contents--pic:hover .coding__contents--img,
  #data .sales__contents--pic:hover .lp__contents--img,
  #data .sales__contents--pic:hover .print__contents--img,
  #data .sales__contents--pic:hover .sales__contents--img,
  #data .sales__contents--pic:hover .data__contents--img,
  #data .sales__contents--pic:hover .coding__contents--img,
  #data .data__contents--pic:hover .lp__contents--img,
  #data .data__contents--pic:hover .print__contents--img,
  #data .data__contents--pic:hover .sales__contents--img,
  #data .data__contents--pic:hover .data__contents--img,
  #data .data__contents--pic:hover .coding__contents--img,
  #data .coding__contents--pic:hover .lp__contents--img,
  #data .coding__contents--pic:hover .print__contents--img,
  #data .coding__contents--pic:hover .sales__contents--img,
  #data .coding__contents--pic:hover .data__contents--img,
  #data .coding__contents--pic:hover .coding__contents--img,
  #coding .lp__contents--pic:hover .lp__contents--img,
  #coding .lp__contents--pic:hover .print__contents--img,
  #coding .lp__contents--pic:hover .sales__contents--img,
  #coding .lp__contents--pic:hover .data__contents--img,
  #coding .lp__contents--pic:hover .coding__contents--img,
  #coding .print__contents--pic:hover .lp__contents--img,
  #coding .print__contents--pic:hover .print__contents--img,
  #coding .print__contents--pic:hover .sales__contents--img,
  #coding .print__contents--pic:hover .data__contents--img,
  #coding .print__contents--pic:hover .coding__contents--img,
  #coding .sales__contents--pic:hover .lp__contents--img,
  #coding .sales__contents--pic:hover .print__contents--img,
  #coding .sales__contents--pic:hover .sales__contents--img,
  #coding .sales__contents--pic:hover .data__contents--img,
  #coding .sales__contents--pic:hover .coding__contents--img,
  #coding .data__contents--pic:hover .lp__contents--img,
  #coding .data__contents--pic:hover .print__contents--img,
  #coding .data__contents--pic:hover .sales__contents--img,
  #coding .data__contents--pic:hover .data__contents--img,
  #coding .data__contents--pic:hover .coding__contents--img,
  #coding .coding__contents--pic:hover .lp__contents--img,
  #coding .coding__contents--pic:hover .print__contents--img,
  #coding .coding__contents--pic:hover .sales__contents--img,
  #coding .coding__contents--pic:hover .data__contents--img,
  #coding .coding__contents--pic:hover .coding__contents--img {
    transform: scale(1.05);
  }
}
#lp .lp__contents--link,
#lp .print__contents--link,
#lp .sales__contents--link,
#lp .data__contents--link,
#lp .coding__contents--link,
#print .lp__contents--link,
#print .print__contents--link,
#print .sales__contents--link,
#print .data__contents--link,
#print .coding__contents--link,
#sales .lp__contents--link,
#sales .print__contents--link,
#sales .sales__contents--link,
#sales .data__contents--link,
#sales .coding__contents--link,
#data .lp__contents--link,
#data .print__contents--link,
#data .sales__contents--link,
#data .data__contents--link,
#data .coding__contents--link,
#coding .lp__contents--link,
#coding .print__contents--link,
#coding .sales__contents--link,
#coding .data__contents--link,
#coding .coding__contents--link {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#lp .lp__contents--img,
#lp .print__contents--img,
#lp .sales__contents--img,
#lp .data__contents--img,
#lp .coding__contents--img,
#print .lp__contents--img,
#print .print__contents--img,
#print .sales__contents--img,
#print .data__contents--img,
#print .coding__contents--img,
#sales .lp__contents--img,
#sales .print__contents--img,
#sales .sales__contents--img,
#sales .data__contents--img,
#sales .coding__contents--img,
#data .lp__contents--img,
#data .print__contents--img,
#data .sales__contents--img,
#data .data__contents--img,
#data .coding__contents--img,
#coding .lp__contents--img,
#coding .print__contents--img,
#coding .sales__contents--img,
#coding .data__contents--img,
#coding .coding__contents--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.5s;
}
#lp .contact,
#print .contact,
#sales .contact,
#data .contact,
#coding .contact {
  padding: 13vw 37px;
  background: #F7F7F7;
}
@media screen and (min-width: 768px) {
  #lp .contact,
  #print .contact,
  #sales .contact,
  #data .contact,
  #coding .contact {
    padding: 80px 77px;
    display: flex;
    align-items: flex-end;
  }
}
@media screen and (min-width: 1024px) {
  #lp .contact,
  #print .contact,
  #sales .contact,
  #data .contact,
  #coding .contact {
    padding: 9.7vw 15vw;
  }
}
#lp .contact__head,
#print .contact__head,
#sales .contact__head,
#data .contact__head,
#coding .contact__head {
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  #lp .contact__head,
  #print .contact__head,
  #sales .contact__head,
  #data .contact__head,
  #coding .contact__head {
    margin: 0;
  }
}
#lp .contact__head--ttl,
#print .contact__head--ttl,
#sales .contact__head--ttl,
#data .contact__head--ttl,
#coding .contact__head--ttl {
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
  #lp .contact__head--ttl,
  #print .contact__head--ttl,
  #sales .contact__head--ttl,
  #data .contact__head--ttl,
  #coding .contact__head--ttl {
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1024px) {
  #lp .contact__head--ttl,
  #print .contact__head--ttl,
  #sales .contact__head--ttl,
  #data .contact__head--ttl,
  #coding .contact__head--ttl {
    margin-bottom: 2.7vw;
  }
}
@media screen and (min-width: 1024px) {
  #lp .contact__head--txt,
  #print .contact__head--txt,
  #sales .contact__head--txt,
  #data .contact__head--txt,
  #coding .contact__head--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#lp .contact__mail,
#print .contact__mail,
#sales .contact__mail,
#data .contact__mail,
#coding .contact__mail {
  position: relative;
  padding: 10px;
  margin-left: auto;
  width: 50vw;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  #lp .contact__mail,
  #print .contact__mail,
  #sales .contact__mail,
  #data .contact__mail,
  #coding .contact__mail {
    width: 29vw;
  }
}
@media screen and (min-width: 1024px) {
  #lp .contact__mail,
  #print .contact__mail,
  #sales .contact__mail,
  #data .contact__mail,
  #coding .contact__mail {
    width: 24vw;
  }
  #lp .contact__mail:hover .contact__mail--txt,
  #print .contact__mail:hover .contact__mail--txt,
  #sales .contact__mail:hover .contact__mail--txt,
  #data .contact__mail:hover .contact__mail--txt,
  #coding .contact__mail:hover .contact__mail--txt {
    transform: translateX(12px);
  }
  #lp .contact__mail:hover .contact__mail--txt::before,
  #print .contact__mail:hover .contact__mail--txt::before,
  #sales .contact__mail:hover .contact__mail--txt::before,
  #data .contact__mail:hover .contact__mail--txt::before,
  #coding .contact__mail:hover .contact__mail--txt::before {
    background-image: linear-gradient(-45deg, #222222, #f0f0f0, #222222);
    background-size: 200%, 200%;
    animation: line 4s ease infinite;
    height: 1px;
    transform: translateX(-12px);
  }
}
#lp .contact__mail--link,
#print .contact__mail--link,
#sales .contact__mail--link,
#data .contact__mail--link,
#coding .contact__mail--link {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#lp .contact__mail--txt,
#print .contact__mail--txt,
#sales .contact__mail--txt,
#data .contact__mail--txt,
#coding .contact__mail--txt {
  line-height: 1.5;
  letter-spacing: 0em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  #lp .contact__mail--txt,
  #print .contact__mail--txt,
  #sales .contact__mail--txt,
  #data .contact__mail--txt,
  #coding .contact__mail--txt {
    gap: 24px;
    font-size: clamp(28px, 2.2vw, 56px);
    transition: 0.3s;
  }
}
#lp .contact__mail--txt::before,
#print .contact__mail--txt::before,
#sales .contact__mail--txt::before,
#data .contact__mail--txt::before,
#coding .contact__mail--txt::before {
  content: "";
  display: block;
  width: 59%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 768px) {
  #lp .contact__mail--txt::before,
  #print .contact__mail--txt::before,
  #sales .contact__mail--txt::before,
  #data .contact__mail--txt::before,
  #coding .contact__mail--txt::before {
    width: 62%;
  }
}
@media screen and (min-width: 1024px) {
  #lp .contact__mail--txt::before,
  #print .contact__mail--txt::before,
  #sales .contact__mail--txt::before,
  #data .contact__mail--txt::before,
  #coding .contact__mail--txt::before {
    width: 69%;
    transition: 0.3s;
  }
}

#detail .pan {
  padding-top: 86px;
  margin: 0 auto 56px;
  width: 80vw;
  text-align: right;
  color: #727272;
}
@media screen and (min-width: 768px) {
  #detail .pan {
    padding-top: 90px;
    margin-bottom: 64px;
  }
}
@media screen and (min-width: 1024px) {
  #detail .pan {
    padding-top: 98px;
    margin-bottom: 5.9vw;
  }
}
#detail .pan__link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: inline;
  color: #727272;
}
#detail .detail {
  width: 90.4vw;
  margin: 0 0 80px auto;
}
@media screen and (min-width: 768px) {
  #detail .detail {
    width: 90vw;
    margin-bottom: 96px;
  }
}
@media screen and (min-width: 1024px) {
  #detail .detail {
    margin-bottom: 9.7vw;
  }
}
#detail .detail__txtarea {
  width: 88%;
  margin-bottom: 56px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__txtarea {
    margin-bottom: 8.3vw;
  }
}
#detail .detail__txtarea--shoulder {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__txtarea--shoulder {
    margin-bottom: 0.2vw;
  }
}
#detail .detail__txtarea--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #detail .detail__txtarea--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#detail .detail__main {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__main {
    gap: 10.5vw;
    margin-bottom: 2.7vw;
    width: 88%;
  }
}
#detail .detail__top {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
#detail .detail__mockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 88.4%;
  max-width: 457px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__mockup {
    gap: 32px;
    width: 40%;
    max-width: none;
  }
}
#detail .detail__mockup--link {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#detail .detail__mockup--pic {
  width: 100%;
}
#detail .detail__mockup--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#detail .detail__mockup--site {
  line-height: 1.5;
  letter-spacing: 0em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  font-size: 14px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__mockup--site {
    gap: 10px;
    font-size: clamp(16px, 1.1vw, 26px);
  }
}
#detail .detail__mockup--site::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-top: 1px solid #222222;
  border-right: 1px solid #222222;
  transform: rotate(-50deg) skew(10deg, 15deg);
}
@media screen and (min-width: 1024px) {
  #detail .detail__overview {
    width: 52%;
  }
}
#detail .detail__overview--ttl {
  margin-bottom: 16px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__overview--ttl {
    margin-bottom: 1.6vw;
  }
}
#detail .detail__overview--line {
  display: flex;
  margin-bottom: 24px;
  width: 100%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 1024px) {
  #detail .detail__overview--line {
    margin-bottom: 2.2vw;
  }
}
#detail .detail__overview--table {
  display: grid;
  grid-template-columns: 100px 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 8px;
  width: 94%;
}
@media screen and (min-width: 768px) {
  #detail .detail__overview--table {
    -moz-column-gap: 24px;
         column-gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  #detail .detail__overview--table {
    grid-template-columns: 21% 1fr;
    -moz-column-gap: 3.3vw;
         column-gap: 3.3vw;
    row-gap: 0.5vw;
    width: 100%;
  }
}
#detail .detail__overview--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #detail .detail__overview--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
@media screen and (min-width: 1024px) {
  #detail .detail__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
#detail .detail__bottom--txtarea {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__bottom--txtarea {
    gap: 5vw;
    width: 50%;
  }
}
#detail .detail__bottom--pic {
  display: none;
}
@media screen and (min-width: 1024px) {
  #detail .detail__bottom--pic {
    display: block;
    width: 42.5%;
    height: 100vw;
    overflow-y: auto;
  }
}
#detail .detail__bottom--pic02 {
  display: none;
}
@media screen and (min-width: 1024px) {
  #detail .detail__bottom--pic02 {
    position: sticky;
    top: 24px;
    width: 42.5%;
  }
}
#detail .detail__bottom--link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#detail .detail__bottom--img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#detail .detail__collars--ttl {
  margin-bottom: 16px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--ttl {
    margin-bottom: 1.6vw;
  }
}
#detail .detail__collars--line {
  display: flex;
  margin-bottom: 24px;
  width: 100%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--line {
    margin-bottom: 2.2vw;
  }
}
#detail .detail__collars--table {
  display: grid;
  grid-template-columns: 80px 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 8px;
  width: 94%;
}
@media screen and (min-width: 768px) {
  #detail .detail__collars--table {
    grid-template-columns: 100px 1fr;
    -moz-column-gap: 24px;
         column-gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--table {
    grid-template-columns: 21% 1fr;
    -moz-column-gap: 1.6vw;
         column-gap: 1.6vw;
    row-gap: 1.1vw;
    width: 100%;
  }
}
#detail .detail__collars--box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  #detail .detail__collars--box {
    gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--box {
    gap: 1.1vw;
  }
}
#detail .detail__collars--case--main--btj, #detail .detail__collars--case--main--meta, #detail .detail__collars--case--main--luxerei, #detail .detail__collars--case--main--wss, #detail .detail__collars--case--main--rpa, #detail .detail__collars--case--main--hokudencoop, #detail .detail__collars--case--main--healthmagazine, #detail .detail__collars--case--main--parking, #detail .detail__collars--case--main--trip, #detail .detail__collars--case--main--communication, #detail .detail__collars--case--main--circle, #detail .detail__collars--case--main--personal, #detail .detail__collars--case--main--scg, #detail .detail__collars--case--main--artera73, #detail .detail__collars--case--main--artera120, #detail .detail__collars--case--main--guideline, #detail .detail__collars--case--main--iconlist {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #000;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--btj, #detail .detail__collars--case--main--meta, #detail .detail__collars--case--main--luxerei, #detail .detail__collars--case--main--wss, #detail .detail__collars--case--main--rpa, #detail .detail__collars--case--main--hokudencoop, #detail .detail__collars--case--main--healthmagazine, #detail .detail__collars--case--main--parking, #detail .detail__collars--case--main--trip, #detail .detail__collars--case--main--communication, #detail .detail__collars--case--main--circle, #detail .detail__collars--case--main--personal, #detail .detail__collars--case--main--scg, #detail .detail__collars--case--main--artera73, #detail .detail__collars--case--main--artera120, #detail .detail__collars--case--main--guideline, #detail .detail__collars--case--main--iconlist {
    width: 52%;
  }
}
#detail .detail__collars--case--main--oem {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #604F47;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--oem {
    width: 52%;
  }
}
#detail .detail__collars--case--main--newcourse {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #535353;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--newcourse {
    width: 52%;
  }
}
#detail .detail__collars--case--main--dx, #detail .detail__collars--case--main--coffeemilktea, #detail .detail__collars--case--main--agricultural, #detail .detail__collars--case--main--pmo {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #333333;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--dx, #detail .detail__collars--case--main--coffeemilktea, #detail .detail__collars--case--main--agricultural, #detail .detail__collars--case--main--pmo {
    width: 52%;
  }
}
#detail .detail__collars--case--main--luxury, #detail .detail__collars--case--main--recruitmentsite, #detail .detail__collars--case--main--furisode {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #222222;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--luxury, #detail .detail__collars--case--main--recruitmentsite, #detail .detail__collars--case--main--furisode {
    width: 52%;
  }
}
#detail .detail__collars--case--main--daikichi {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #252626;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--daikichi {
    width: 52%;
  }
}
#detail .detail__collars--case--main--fanstar {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #606060;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--fanstar {
    width: 52%;
  }
}
#detail .detail__collars--case--main--okabe {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #1A1A1A;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--okabe {
    width: 52%;
  }
}
#detail .detail__collars--case--main--teacher {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #0E0E0E;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--teacher {
    width: 52%;
  }
}
#detail .detail__collars--case--main--corporaterental, #detail .detail__collars--case--main--wakisakacorporate {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #111111;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--corporaterental, #detail .detail__collars--case--main--wakisakacorporate {
    width: 52%;
  }
}
#detail .detail__collars--case--main--medicalcorporation, #detail .detail__collars--case--main--socialwelfare {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #3F342B;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--medicalcorporation, #detail .detail__collars--case--main--socialwelfare {
    width: 52%;
  }
}
#detail .detail__collars--case--main--surippon, #detail .detail__collars--case--main--shoppop {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #552E0E;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--surippon, #detail .detail__collars--case--main--shoppop {
    width: 52%;
  }
}
#detail .detail__collars--case--main--azit {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #5B5555;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--azit {
    width: 52%;
  }
}
#detail .detail__collars--case--main--ecpamphlet, #detail .detail__collars--case--main--fcreate, #detail .detail__collars--case--main--menu {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #231815;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--ecpamphlet, #detail .detail__collars--case--main--fcreate, #detail .detail__collars--case--main--menu {
    width: 52%;
  }
}
#detail .detail__collars--case--main--leafletspring, #detail .detail__collars--case--main--leafletsummer {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #63514b;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--leafletspring, #detail .detail__collars--case--main--leafletsummer {
    width: 52%;
  }
}
#detail .detail__collars--case--main--shopcard, #detail .detail__collars--case--main--chopstickwrapper, #detail .detail__collars--case--main--linepop {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FFFFFF;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--shopcard, #detail .detail__collars--case--main--chopstickwrapper, #detail .detail__collars--case--main--linepop {
    width: 52%;
  }
}
#detail .detail__collars--case--main--businesscard, #detail .detail__collars--case--main--summercoaster {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #eeebe9;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--businesscard, #detail .detail__collars--case--main--summercoaster {
    width: 52%;
  }
}
#detail .detail__collars--case--main--springcoaster {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #4a3e26;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--main--springcoaster {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--btj {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #D13500;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--btj {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--meta {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FC5CEC;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--meta {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--luxerei {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #04043A;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--luxerei {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--oem {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #6B7050;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--oem {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--wss {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F1D500;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--wss {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--newcourse {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #DF8D8D;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--newcourse {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--dx {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #B6A4D2;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--dx {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--luxury01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #032058;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--luxury01 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--luxury02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #D2A62A;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--luxury02 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--coffeemilktea01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #15389D;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--coffeemilktea01 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--coffeemilktea02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #35201E;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--coffeemilktea02 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--agricultural, #detail .detail__collars--case--accent--artera7301, #detail .detail__collars--case--accent--artera12001, #detail .detail__collars--case--accent--guideline01, #detail .detail__collars--case--accent--iconlist01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #ff0000;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--agricultural, #detail .detail__collars--case--accent--artera7301, #detail .detail__collars--case--accent--artera12001, #detail .detail__collars--case--accent--guideline01, #detail .detail__collars--case--accent--iconlist01 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--daikichi {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #02A951;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--daikichi {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--rpa {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FCC574;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--rpa {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--pmo {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FF6900;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--pmo {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--fanstar {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FE7F96;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--fanstar {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--hokudencoop01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #005E26;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--hokudencoop01 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--hokudencoop02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #003917;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--hokudencoop02 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--healthmagazine01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #14AE68;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--healthmagazine01 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--healthmagazine02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #E9608D;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--healthmagazine02 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--okabe {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #664B07;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--okabe {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--parking {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FFEA5B;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--parking {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--teacher {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FF5B15;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--teacher {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--trip {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #EE1C25;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--trip {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--corporaterental {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #8C7859;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--corporaterental {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--medicalcorporation01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #369666;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--medicalcorporation01 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--medicalcorporation02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #1E5093;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--medicalcorporation02 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--medicalcorporation03 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FEAC29;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--medicalcorporation03 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--socialwelfare {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FF7B30;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--socialwelfare {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--recruitmentsite {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #232582;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--recruitmentsite {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--furisode {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #9F7200;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--furisode {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--wakisakacorporate {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #E97132;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--wakisakacorporate {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--communication, #detail .detail__collars--case--accent--personal {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #E84433;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--communication, #detail .detail__collars--case--accent--personal {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--surippon, #detail .detail__collars--case--accent--shoppop {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #552E0E;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--surippon, #detail .detail__collars--case--accent--shoppop {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--circle {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #E20017;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--circle {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--scg {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FF835B;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--scg {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--azit {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #505096;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--azit {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--ecpamphlet {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #EFCD89;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--ecpamphlet {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--fcreate {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #1a2e67;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--fcreate {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--leafletspring {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #be8d87;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--leafletspring {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--leafletsummer {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #646b4b;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--leafletsummer {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--menu {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #86b1c8;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--menu {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--chopstickwrapper {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #376D7D;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--chopstickwrapper {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--springcoaster01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #dc5d6e;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--springcoaster01 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--springcoaster02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #dc5d6e;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--springcoaster02 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--linepop01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FDF604;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--linepop01 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--linepop02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F8B62A;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--linepop02 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--artera7302, #detail .detail__collars--case--accent--artera12002, #detail .detail__collars--case--accent--guideline02, #detail .detail__collars--case--accent--iconlist02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FF6566;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--artera7302, #detail .detail__collars--case--accent--artera12002, #detail .detail__collars--case--accent--guideline02, #detail .detail__collars--case--accent--iconlist02 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--artera7303, #detail .detail__collars--case--accent--artera12003, #detail .detail__collars--case--accent--guideline03, #detail .detail__collars--case--accent--iconlist03 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FE9999;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--artera7303, #detail .detail__collars--case--accent--artera12003, #detail .detail__collars--case--accent--guideline03, #detail .detail__collars--case--accent--iconlist03 {
    width: 52%;
  }
}
#detail .detail__collars--case--accent--artera7304, #detail .detail__collars--case--accent--artera12004, #detail .detail__collars--case--accent--guideline04, #detail .detail__collars--case--accent--iconlist04 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FFCCCC;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--accent--artera7304, #detail .detail__collars--case--accent--artera12004, #detail .detail__collars--case--accent--guideline04, #detail .detail__collars--case--accent--iconlist04 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--btj {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FF8B18;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--btj {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--meta01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #830BD7;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--meta01 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--meta02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #443EFE;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--meta02 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--oem {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #3E3028;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--oem {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--newcourse {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #5297B5;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--newcourse {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--coffeemilktea01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #A8B4D9;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--coffeemilktea01 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--coffeemilktea02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #DEC7A5;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--coffeemilktea02 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--daikichi01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #033323;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--daikichi01 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--daikichi02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #067345;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--daikichi02 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--daikichi03 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #26D367;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--daikichi03 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--daikichi04 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #E8FAEE;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--daikichi04 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--daikichi05 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #CAF345;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--daikichi05 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--rpa {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #00499B;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--rpa {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--pmo {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #3F527D;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--pmo {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--fanstar {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #37C475;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--fanstar {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--hokudencoop {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #0BA348;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--hokudencoop {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--healthmagazine {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #2B52B9;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--healthmagazine {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--parking01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #1E51A2;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--parking01 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--parking02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #E1E9F6;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--parking02 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--teacher01 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FFF7BF;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--teacher01 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--teacher02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #E0EBF0;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--teacher02 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--teacher03 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FFE6EC;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--teacher03 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--medicalcorporation {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #6AA84F;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--medicalcorporation {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--furisode {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #620A62;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--furisode {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--communication, #detail .detail__collars--case--assort--personal {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #8C7A39;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--communication, #detail .detail__collars--case--assort--personal {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--surippon, #detail .detail__collars--case--assort--shoppop {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #B59677;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--surippon, #detail .detail__collars--case--assort--shoppop {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--scg {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FF9776;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--scg {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--ecpamphlet {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #CA494D;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--ecpamphlet {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--businesscard {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #C1C8CE;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--businesscard {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--menu, #detail .detail__collars--case--assort--summercoaster {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #E2E3DE;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--menu, #detail .detail__collars--case--assort--summercoaster {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--chopstickwrapper {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #7F9BA4;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--chopstickwrapper {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--artera7301, #detail .detail__collars--case--assort--artera12001, #detail .detail__collars--case--assort--guideline01, #detail .detail__collars--case--assort--iconlist01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #747474;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--artera7301, #detail .detail__collars--case--assort--artera12001, #detail .detail__collars--case--assort--guideline01, #detail .detail__collars--case--assort--iconlist01 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--artera7302, #detail .detail__collars--case--assort--artera12002, #detail .detail__collars--case--assort--guideline02, #detail .detail__collars--case--assort--iconlist02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #AEAEAE;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--artera7302, #detail .detail__collars--case--assort--artera12002, #detail .detail__collars--case--assort--guideline02, #detail .detail__collars--case--assort--iconlist02 {
    width: 52%;
  }
}
#detail .detail__collars--case--assort--artera7303, #detail .detail__collars--case--assort--artera12003, #detail .detail__collars--case--assort--guideline03, #detail .detail__collars--case--assort--iconlist03 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #D9D9D0;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--assort--artera7303, #detail .detail__collars--case--assort--artera12003, #detail .detail__collars--case--assort--guideline03, #detail .detail__collars--case--assort--iconlist03 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--btj {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #EAEAEA;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--btj {
    width: 52%;
  }
}
#detail .detail__collars--case--base--meta01, #detail .detail__collars--case--base--wss, #detail .detail__collars--case--base--newcourse01, #detail .detail__collars--case--base--dx01, #detail .detail__collars--case--base--agricultural, #detail .detail__collars--case--base--daikichi01, #detail .detail__collars--case--base--rpa01, #detail .detail__collars--case--base--fanstar01, #detail .detail__collars--case--base--hokudencoop, #detail .detail__collars--case--base--healthmagazine01, #detail .detail__collars--case--base--medicalcorporation01, #detail .detail__collars--case--base--socialwelfare01, #detail .detail__collars--case--base--recruitmentsite01, #detail .detail__collars--case--base--communication01, #detail .detail__collars--case--base--surippon01, #detail .detail__collars--case--base--circle01, #detail .detail__collars--case--base--personal01, #detail .detail__collars--case--base--ecpamphlet, #detail .detail__collars--case--base--shoppop01, #detail .detail__collars--case--base--artera7301, #detail .detail__collars--case--base--artera12001, #detail .detail__collars--case--base--guideline01, #detail .detail__collars--case--base--iconlist01 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FFFFFF;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--meta01, #detail .detail__collars--case--base--wss, #detail .detail__collars--case--base--newcourse01, #detail .detail__collars--case--base--dx01, #detail .detail__collars--case--base--agricultural, #detail .detail__collars--case--base--daikichi01, #detail .detail__collars--case--base--rpa01, #detail .detail__collars--case--base--fanstar01, #detail .detail__collars--case--base--hokudencoop, #detail .detail__collars--case--base--healthmagazine01, #detail .detail__collars--case--base--medicalcorporation01, #detail .detail__collars--case--base--socialwelfare01, #detail .detail__collars--case--base--recruitmentsite01, #detail .detail__collars--case--base--communication01, #detail .detail__collars--case--base--surippon01, #detail .detail__collars--case--base--circle01, #detail .detail__collars--case--base--personal01, #detail .detail__collars--case--base--ecpamphlet, #detail .detail__collars--case--base--shoppop01, #detail .detail__collars--case--base--artera7301, #detail .detail__collars--case--base--artera12001, #detail .detail__collars--case--base--guideline01, #detail .detail__collars--case--base--iconlist01 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--meta02, #detail .detail__collars--case--base--luxerei {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #E6E6E6;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--meta02, #detail .detail__collars--case--base--luxerei {
    width: 52%;
  }
}
#detail .detail__collars--case--base--oem {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F2EEE6;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--oem {
    width: 52%;
  }
}
#detail .detail__collars--case--base--newcourse02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F6F6F6;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--newcourse02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--dx02, #detail .detail__collars--case--base--wakisakacorporate01 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F7F7F7;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--dx02, #detail .detail__collars--case--base--wakisakacorporate01 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--luxury {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FBFAF4;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--luxury {
    width: 52%;
  }
}
#detail .detail__collars--case--base--coffeemilktea {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FFFAF0;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--coffeemilktea {
    width: 52%;
  }
}
#detail .detail__collars--case--base--daikichi02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #DAE5E3;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--daikichi02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--rpa02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #EBF7FF;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--rpa02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--pmo01, #detail .detail__collars--case--base--furisode01 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FDFDFD;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--pmo01, #detail .detail__collars--case--base--furisode01 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--pmo02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #EEEEEE;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--pmo02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--fanstar02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #EEFFF6;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--fanstar02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--healthmagazine02, #detail .detail__collars--case--base--recruitmentsite02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FAFAFA;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--healthmagazine02, #detail .detail__collars--case--base--recruitmentsite02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--okabe, #detail .detail__collars--case--base--parking {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F8F8F8;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--okabe, #detail .detail__collars--case--base--parking {
    width: 52%;
  }
}
#detail .detail__collars--case--base--teacher {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FBFBFB;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--teacher {
    width: 52%;
  }
}
#detail .detail__collars--case--base--trip01 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F9F9F9;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--trip01 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--trip02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F7F5EE;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--trip02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--corporaterental {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F9F9F9;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--corporaterental {
    width: 52%;
  }
}
#detail .detail__collars--case--base--medicalcorporation02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FAF7F5;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--medicalcorporation02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--socialwelfare02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F9F8F4;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--socialwelfare02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--furisode02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #EBDDEB;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--furisode02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--wakisakacorporate02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #EBDDEB;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--wakisakacorporate02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--communication02, #detail .detail__collars--case--base--personal02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F1F1F1;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--communication02, #detail .detail__collars--case--base--personal02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--surippon02, #detail .detail__collars--case--base--shoppop {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FFFAEE;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--surippon02, #detail .detail__collars--case--base--shoppop {
    width: 52%;
  }
}
#detail .detail__collars--case--base--circle02 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FFFAEE;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--circle02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--personal03 {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FAFAF7;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--personal03 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--scg {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #FFD7CA;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--scg {
    width: 52%;
  }
}
#detail .detail__collars--case--base--azit {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F1F2F3;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--azit {
    width: 52%;
  }
}
#detail .detail__collars--case--base--fcreate {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #f5f7f6;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--fcreate {
    width: 52%;
  }
}
#detail .detail__collars--case--base--leafletspring, #detail .detail__collars--case--base--leafletsummer {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F3F1E9;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--leafletspring, #detail .detail__collars--case--base--leafletsummer {
    width: 52%;
  }
}
#detail .detail__collars--case--base--shopcard {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #696f4f;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--shopcard {
    width: 52%;
  }
}
#detail .detail__collars--case--base--businesscard, #detail .detail__collars--case--base--summercoaster {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #86b1c8;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--businesscard, #detail .detail__collars--case--base--summercoaster {
    width: 52%;
  }
}
#detail .detail__collars--case--base--menu {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #F4F3EF;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--menu {
    width: 52%;
  }
}
#detail .detail__collars--case--base--chopstickwrapper01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #595B63;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--chopstickwrapper01 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--chopstickwrapper02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #000000;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--chopstickwrapper02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--springcoaster {
  display: flex;
  border: 1px solid #222222;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #e1ddd9;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--springcoaster {
    width: 52%;
  }
}
#detail .detail__collars--case--base--linepop01 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #45B332;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--linepop01 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--linepop02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #1BA838;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--linepop02 {
    width: 52%;
  }
}
#detail .detail__collars--case--base--artera7302, #detail .detail__collars--case--base--artera12002, #detail .detail__collars--case--base--guideline02, #detail .detail__collars--case--base--iconlist02 {
  display: flex;
  width: 73%;
  max-width: 260px;
  height: 16px;
  background: #4E4E4E;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--base--artera7302, #detail .detail__collars--case--base--artera12002, #detail .detail__collars--case--base--guideline02, #detail .detail__collars--case--base--iconlist02 {
    width: 52%;
  }
}
#detail .detail__collars--case--heading {
  font-size: 20px;
  font-weight: 400;
  text-decoration: underline;
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--heading {
    font-size: clamp(20px, 1.6vw, 26px);
  }
}
#detail .detail__collars--case--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #detail .detail__collars--case--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#detail .detail__fonts--ttl {
  margin-bottom: 16px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__fonts--ttl {
    margin-bottom: 1.6vw;
  }
}
#detail .detail__fonts--line {
  display: flex;
  margin-bottom: 24px;
  width: 100%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 1024px) {
  #detail .detail__fonts--line {
    margin-bottom: 2.2vw;
  }
}
#detail .detail__fonts--table {
  display: grid;
  grid-template-columns: 100px 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 8px;
  width: 94%;
}
@media screen and (min-width: 1024px) {
  #detail .detail__fonts--table {
    grid-template-columns: 21% 1fr;
    -moz-column-gap: 2.2vw;
         column-gap: 2.2vw;
    row-gap: 1.1vw;
    width: 100%;
  }
}
#detail .detail__fonts--box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  #detail .detail__fonts--box {
    gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  #detail .detail__fonts--box {
    gap: 1.1vw;
  }
}
#detail .detail__fonts--case--heading {
  font-size: 20px;
  font-weight: 400;
  text-decoration: underline;
}
@media screen and (min-width: 1024px) {
  #detail .detail__fonts--case--heading {
    font-size: clamp(20px, 1.6vw, 26px);
  }
}
#detail .detail__fonts--case--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #detail .detail__fonts--case--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#detail .detail__css--ttl {
  margin-bottom: 16px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__css--ttl {
    margin-bottom: 1.6vw;
  }
}
#detail .detail__css--line {
  display: flex;
  margin-bottom: 24px;
  width: 100%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 1024px) {
  #detail .detail__css--line {
    margin-bottom: 2.2vw;
  }
}
#detail .detail__css--table {
  display: grid;
  grid-template-columns: 100px 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 8px;
  width: 94%;
}
@media screen and (min-width: 768px) {
  #detail .detail__css--table {
    grid-template-columns: 170px 1fr;
    -moz-column-gap: 24px;
         column-gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  #detail .detail__css--table {
    grid-template-columns: 35% 1fr;
    -moz-column-gap: 1.6vw;
         column-gap: 1.6vw;
    row-gap: 1.1vw;
    width: 100%;
  }
}
#detail .detail__css--box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 1024px) {
  #detail .detail__css--box {
    gap: 1.1vw;
  }
}
#detail .detail__css--case--heading {
  font-size: 20px;
  font-weight: 400;
  text-decoration: underline;
}
@media screen and (min-width: 1024px) {
  #detail .detail__css--case--heading {
    font-size: clamp(20px, 1.6vw, 26px);
  }
}
#detail .detail__css--case--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #detail .detail__css--case--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#detail .detail__back {
  position: relative;
  padding: 10px;
  margin-left: auto;
  margin-right: 19px;
  width: 58vw;
}
@media screen and (min-width: 768px) {
  #detail .detail__back {
    margin-right: 39px;
    width: 29vw;
  }
}
@media screen and (min-width: 1024px) {
  #detail .detail__back {
    margin-right: 10vw;
    width: 24vw;
  }
  #detail .detail__back:hover .detail__back--txt {
    color: #767676;
  }
  #detail .detail__back:hover .detail__back--txt::after {
    transform: translateX(10px) rotate(45deg);
  }
}
#detail .detail__back--link {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#detail .detail__back--txt {
  line-height: 1.5;
  letter-spacing: 0em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  #detail .detail__back--txt {
    gap: 24px;
    font-size: clamp(28px, 2.2vw, 56px);
    transition: 0.3s;
  }
}
#detail .detail__back--txt::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 1px solid #222222;
  border-right: 1px solid #222222;
  transform: rotate(45deg);
  transition: 0.3s;
}
#detail .contact {
  padding: 13vw 37px;
  background: #F7F7F7;
}
@media screen and (min-width: 768px) {
  #detail .contact {
    padding: 80px 77px;
    display: flex;
    align-items: flex-end;
  }
}
@media screen and (min-width: 1024px) {
  #detail .contact {
    padding: 9.7vw 15vw;
  }
}
#detail .contact__head {
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  #detail .contact__head {
    margin: 0;
  }
}
#detail .contact__head--ttl {
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
  #detail .contact__head--ttl {
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1024px) {
  #detail .contact__head--ttl {
    margin-bottom: 2.7vw;
  }
}
@media screen and (min-width: 1024px) {
  #detail .contact__head--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#detail .contact__mail {
  position: relative;
  padding: 10px;
  margin-left: auto;
  width: 50vw;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  #detail .contact__mail {
    width: 29vw;
  }
}
@media screen and (min-width: 1024px) {
  #detail .contact__mail {
    width: 24vw;
  }
  #detail .contact__mail:hover .contact__mail--txt {
    transform: translateX(12px);
  }
  #detail .contact__mail:hover .contact__mail--txt::before {
    background-image: linear-gradient(-45deg, #222222, #f0f0f0, #222222);
    background-size: 200%, 200%;
    animation: line 4s ease infinite;
    height: 1px;
    transform: translateX(-12px);
  }
}
#detail .contact__mail--link {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#detail .contact__mail--txt {
  line-height: 1.5;
  letter-spacing: 0em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  font-weight: 700;
}
@media screen and (min-width: 1024px) {
  #detail .contact__mail--txt {
    gap: 24px;
    font-size: clamp(28px, 2.2vw, 56px);
    transition: 0.3s;
  }
}
#detail .contact__mail--txt::before {
  content: "";
  display: block;
  width: 59%;
  height: 1px;
  background: #222222;
}
@media screen and (min-width: 768px) {
  #detail .contact__mail--txt::before {
    width: 62%;
  }
}
@media screen and (min-width: 1024px) {
  #detail .contact__mail--txt::before {
    width: 69%;
    transition: 0.3s;
  }
}

#form .pan {
  padding-top: 86px;
  margin: 0 auto 56px;
  width: 80vw;
  text-align: right;
  color: #727272;
}
@media screen and (min-width: 768px) {
  #form .pan {
    padding-top: 90px;
    margin-bottom: 64px;
  }
}
@media screen and (min-width: 1024px) {
  #form .pan {
    padding-top: 98px;
    margin-bottom: 5.9vw;
  }
}
#form .pan__link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: inline;
  color: #727272;
}
#form .form {
  width: 80vw;
  margin: 0 auto 80px;
}
@media screen and (min-width: 768px) {
  #form .form {
    margin-bottom: 96px;
  }
}
@media screen and (min-width: 1024px) {
  #form .form {
    margin-bottom: 9.7vw;
  }
}
#form .form__txtarea {
  margin-bottom: 80px;
}
@media screen and (min-width: 768px) {
  #form .form__txtarea {
    margin-bottom: 104px;
  }
}
@media screen and (min-width: 1024px) {
  #form .form__txtarea {
    margin-bottom: 6.6vw;
  }
}
#form .form__txtarea--shoulder {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  #form .form__txtarea--shoulder {
    margin-bottom: 0.2vw;
  }
}
#form .form__txtarea--ttl {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  #form .form__txtarea--ttl {
    margin-bottom: 4.6vw;
  }
}
#form .form__txtarea--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #form .form__txtarea--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#form .form__main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 64px;
}
@media screen and (min-width: 768px) {
  #form .form__main {
    margin-bottom: 104px;
  }
}
@media screen and (min-width: 1024px) {
  #form .form__main {
    gap: 2.2vw;
    margin-bottom: 8.3vw;
  }
  #form .form__main :last-child {
    align-items: flex-start;
  }
}
@media screen and (min-width: 1024px) {
  #form .form__box {
    display: flex;
    gap: 1.6vw;
  }
}
#form .form__name, #form .form__mail, #form .form__tel, #form .form__maddage {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  #form .form__name, #form .form__mail, #form .form__tel, #form .form__maddage {
    margin-bottom: 4px;
  }
}
@media screen and (min-width: 1024px) {
  #form .form__name, #form .form__mail, #form .form__tel, #form .form__maddage {
    flex-wrap: wrap;
    -moz-column-gap: 0.5vw;
         column-gap: 0.5vw;
    row-gap: 0.27vw;
    margin-bottom: 0;
    width: 18vw;
    min-width: 176px;
  }
}
#form .form__name::before, #form .form__mail::before, #form .form__tel::before, #form .form__maddage::before {
  content: "必須";
  padding: 0 4px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 200;
  color: #F7F7F7;
  background: #878787;
  order: 2;
}
@media screen and (min-width: 768px) {
  #form .form__name::before, #form .form__mail::before, #form .form__tel::before, #form .form__maddage::before {
    font-size: 14px;
  }
}
@media screen and (min-width: 1024px) {
  #form .form__name::before, #form .form__mail::before, #form .form__tel::before, #form .form__maddage::before {
    padding: 0 0.27vw;
    font-size: clamp(12px, 1vw, 16px);
  }
}
#form .form__mail::after {
  content: "※半角英数字";
  display: block;
  font-size: 14px;
  font-weight: 200;
  color: #222222;
  order: 3;
}
@media screen and (min-width: 768px) {
  #form .form__mail::after {
    font-size: 16px;
  }
}
@media screen and (min-width: 1024px) {
  #form .form__mail::after {
    width: clamp(176px, 17vw, 224px);
    font-size: clamp(14px, 1.1vw, 18px);
  }
}
#form .form__tel::after {
  content: "※半角英数字/ハイフンなし";
  display: block;
  font-size: 14px;
  font-weight: 200;
  color: #222222;
  order: 3;
}
@media screen and (min-width: 768px) {
  #form .form__tel::after {
    font-size: 16px;
  }
}
@media screen and (min-width: 1024px) {
  #form .form__tel::after {
    width: clamp(176px, 17vw, 224px);
    font-size: clamp(14px, 1.1vw, 18px);
  }
}
#form .form__input {
  padding: 18px 16px;
  border: none;
  border-radius: 2px;
  box-shadow: inset 2px 2px 4px rgba(34, 34, 34, 0.1098039216);
  width: 100%;
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 768px) {
  #form .form__input {
    padding: 20px 16px;
  }
}
@media screen and (min-width: 1024px) {
  #form .form__input {
    padding: 24px 20px;
    width: 80%;
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#form .form__message {
  padding: 22px 16px;
  border-radius: 2px;
  border: none;
  box-shadow: inset 2px 2px 4px rgba(34, 34, 34, 0.1098039216);
  width: 100%;
  height: 174px;
  resize: vertical;
}
@media screen and (min-width: 1024px) {
  #form .form__message {
    padding: 24px 20px;
    width: 80%;
    height: 22vw;
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#form .form__confirm {
  margin: 0 auto;
  border-radius: 2px;
  background: #878787;
  width: 300px;
}
@media screen and (min-width: 1024px) {
  #form .form__confirm {
    width: 21vw;
    transition: 0.3s;
  }
  #form .form__confirm:hover {
    background: #222222;
  }
}
#form .form__confirm--link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 16px 0;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  color: #F7F7F7;
}
@media screen and (min-width: 1024px) {
  #form .form__confirm--link {
    padding: 1.1vw 0;
    font-size: clamp(20px, 1.5vw, 26px);
  }
}

#confirm .pan {
  padding-top: 86px;
  margin: 0 auto 56px;
  width: 80vw;
  text-align: right;
  color: #727272;
}
@media screen and (min-width: 768px) {
  #confirm .pan {
    padding-top: 90px;
    margin-bottom: 64px;
  }
}
@media screen and (min-width: 1024px) {
  #confirm .pan {
    padding-top: 98px;
    margin-bottom: 5.9vw;
  }
}
#confirm .pan__link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: inline;
  color: #727272;
}
#confirm .confirm {
  width: 80vw;
  margin: 0 auto 80px;
}
@media screen and (min-width: 768px) {
  #confirm .confirm {
    margin-bottom: 96px;
  }
}
@media screen and (min-width: 1024px) {
  #confirm .confirm {
    margin-bottom: 9.7vw;
  }
}
#confirm .confirm__txtarea {
  margin-bottom: 80px;
}
@media screen and (min-width: 768px) {
  #confirm .confirm__txtarea {
    margin-bottom: 104px;
  }
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__txtarea {
    margin-bottom: 6.6vw;
  }
}
#confirm .confirm__txtarea--shoulder {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__txtarea--shoulder {
    margin-bottom: 0.2vw;
  }
}
#confirm .confirm__txtarea--ttl {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__txtarea--ttl {
    margin-bottom: 4.6vw;
  }
}
#confirm .confirm__txtarea--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__txtarea--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#confirm .confirm__table {
  margin-bottom: 64px;
}
@media screen and (min-width: 768px) {
  #confirm .confirm__table {
    margin-bottom: 96px;
  }
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__table {
    margin-bottom: 8.3vw;
  }
}
#confirm .confirm__table--box {
  padding-top: 16px;
  margin-bottom: 16px;
  border-top: 1px solid #222222;
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__table--box {
    display: grid;
    grid-template-columns: 120px 1fr;
    -moz-column-gap: 8.3vw;
         column-gap: 8.3vw;
    align-items: center;
    padding-top: 32px;
    margin-bottom: 32px;
  }
}
#confirm .confirm__table--box:last-of-type {
  padding-bottom: 16px;
  border-bottom: 1px solid #222222;
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__table--box:last-of-type {
    padding-bottom: 32px;
  }
}
#confirm .confirm__label {
  margin-bottom: 4px;
}
@media screen and (min-width: 768px) {
  #confirm .confirm__label {
    margin-bottom: 8px;
  }
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__label {
    margin-bottom: 0;
  }
}
#confirm .confirm__txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#confirm .confirm__btnarea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  #confirm .confirm__btnarea {
    flex-direction: row;
    justify-content: center;
  }
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__btnarea {
    gap: 1.6vw;
  }
}
#confirm .confirm__btnarea--back {
  border-radius: 2px;
  width: 300px;
  background: #222222;
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__btnarea--back {
    width: 21vw;
    transition: 0.3s;
  }
  #confirm .confirm__btnarea--back:hover {
    background: #555555;
  }
}
#confirm .confirm__btnarea--back--link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 16px 0;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  color: #F7F7F7;
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__btnarea--back--link {
    padding: 1.1vw 0;
    font-size: clamp(20px, 1.5vw, 26px);
  }
}
#confirm .confirm__btnarea--send {
  border-radius: 2px;
  width: 300px;
  background: #878787;
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__btnarea--send {
    width: 21vw;
    transition: 0.3s;
  }
  #confirm .confirm__btnarea--send:hover {
    background: #555555;
  }
}
#confirm .confirm__btnarea--send--link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 16px 0;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  color: #F7F7F7;
}
@media screen and (min-width: 1024px) {
  #confirm .confirm__btnarea--send--link {
    padding: 1.1vw 0;
    font-size: clamp(20px, 1.5vw, 26px);
  }
}

#thanks .pan {
  padding-top: 86px;
  margin: 0 auto 56px;
  width: 80vw;
  text-align: right;
  color: #727272;
}
@media screen and (min-width: 768px) {
  #thanks .pan {
    padding-top: 90px;
    margin-bottom: 64px;
  }
}
@media screen and (min-width: 1024px) {
  #thanks .pan {
    padding-top: 98px;
    margin-bottom: 5.9vw;
  }
}
#thanks .pan__link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: inline;
  color: #727272;
}
#thanks .thanks {
  width: 80vw;
  margin: 0 auto 80px;
}
@media screen and (min-width: 768px) {
  #thanks .thanks {
    margin-bottom: 96px;
  }
}
@media screen and (min-width: 1024px) {
  #thanks .thanks {
    margin-bottom: 9.7vw;
  }
}
#thanks .thanks__txtarea {
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  #thanks .thanks__txtarea {
    margin-bottom: 72px;
  }
}
@media screen and (min-width: 1024px) {
  #thanks .thanks__txtarea {
    margin-bottom: 5.5vw;
  }
}
#thanks .thanks__txtarea--shoulder {
  margin-bottom: 8px;
}
@media screen and (min-width: 1024px) {
  #thanks .thanks__txtarea--shoulder {
    margin-bottom: 0.2vw;
  }
}
#thanks .thanks__txtarea--ttl {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  #thanks .thanks__txtarea--ttl {
    margin-bottom: 4.6vw;
  }
}
#thanks .thanks__txtarea--lead {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  #thanks .thanks__txtarea--lead {
    margin-bottom: 16px;
    font-size: 24px;
  }
}
@media screen and (min-width: 1024px) {
  #thanks .thanks__txtarea--lead {
    margin-bottom: 1.1vw;
    font-size: clamp(24px, 2.2vw, 40px);
  }
}
#thanks .thanks__txtarea--lead--span {
  display: block;
}
@media screen and (min-width: 1024px) {
  #thanks .thanks__txtarea--lead--span {
    display: inline;
  }
}
#thanks .thanks__txtarea--txt {
  font-family: "ryo-gothic-plusn";
}
@media screen and (min-width: 1024px) {
  #thanks .thanks__txtarea--txt {
    font-size: clamp(16px, 1.1vw, 20px);
  }
}
#thanks .thanks__top {
  margin: 0 auto;
  border-radius: 2px;
  background: #878787;
  width: 300px;
}
@media screen and (min-width: 1024px) {
  #thanks .thanks__top {
    width: 21vw;
    transition: 0.3s;
  }
  #thanks .thanks__top:hover {
    background: #222222;
  }
}
#thanks .thanks__top--link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 16px 0;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  color: #F7F7F7;
}
@media screen and (min-width: 1024px) {
  #thanks .thanks__top--link {
    padding: 1.1vw 0;
    font-size: clamp(20px, 1.5vw, 26px);
  }
}

.rotateTop {
  transform: rotate(45deg) !important;
}

.rotateBottom {
  transform: rotate(-45deg) !important;
}

.topShow {
  opacity: 1;
  transform: translateY(0);
}

.is-hover {
  animation: showAnime 0.3s forwards;
}

.is-hidden {
  animation: hiddenAnime 0.3s forwards;
}

.is-open {
  flex-direction: column-reverse;
}
.is-open::after {
  transform: rotate(-49deg) skew(10deg, 15deg);
}
.is-open:hover::after {
  transform: translateY(-10px) rotate(-49deg) skew(10deg, 15deg);
}

.c01.is-animated,
.c02.is-animated {
  animation: rollInC 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.o01.is-animated,
.o02.is-animated {
  animation: dropInDot 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-delay: 1s;
}

.m.is-animated {
  animation: rollInM 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-delay: 1s;
}

.p.is-animated {
  animation: standUpP 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-delay: 0.5s;
}

.corner01__top.is-animated {
  display: block;
  animation: dropInBlock 1.2s ease-out forwards;
}
.corner01__top.is-animated img {
  display: block;
  animation: katakata01 2s infinite 2s;
}

.corner02__top.is-animated {
  display: block;
  animation: dropInBlock 1.2s ease-out forwards;
}
.corner02__top.is-animated img {
  display: block;
  animation: katakata01 5s infinite 2s;
}

.mix__right--bottom.is-animated {
  display: block;
}
.mix__right--bottom.is-animated img {
  display: block;
  animation: katakata02 5s infinite 2s;
}/*# sourceMappingURL=style.css.map */