/* screen - index */

.index {
  align-items: flex-start;
  background-color: var(--woodsmoke);
  display: flex;
  gap: 13px;
  height: 983px;
  min-width: 860px;
  /* overflow-x: hidden; */
  padding: 11px 0;
}

.index .flex-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-left: 13px;
  min-height: 952px;
  width: 354px;
}

.index .flex-row {
  align-items: flex-end;
  display: flex;
  gap: 13px;
  height: 778px;
  min-width: 354px;
}

.index .flex-col-1 {
  gap: 13px;
  min-height: 778px;
  width: 271px;
}

.index .x33 {
  position: relative;
  background-color: #c5c0c0;
  border-radius: 48px;
  height: 271px;
  width: 271px;
}

.index .company-pnl {
  align-items: center;
  background-color: #f1be49;
  border-radius: 48px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 15px 84px;
  height: 399px;
  overflow: hidden;
  padding: 31px 0px;
  position: relative;
  width: 271px;
  transition: color 0.5s ease;
  cursor: pointer;
  flex-direction: column;
}

.index .company-pnl-text {
  width: 100%;
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  position: fixed;
  z-index: 1;
  text-indent: -5px;
}

/* .index .company-pnl:hover {
  background-color: var(--green-emerald);
} */

.index .company-pnl:hover::before {
  transform: scaleY(1);
}

.index .company-pnl::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #3d8782;
  transform: scaleY(0);
  transition: all 0.5s ease;
  transition-property: transform;
}

.utensilo {
  height: 100%;
  background-image: url(/img/utensilo-min.webp);
  background-size: 140%;
  background-position: center;
  z-index: 1;
  cursor: pointer;
}

.index .company-title {
  display: flex;
  height: 100%;
  margin-top: -6px;
  position: relative;
  width: 271px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.index .company-text {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
}

.index .company-detail {
  background-color: var(--red-soft);
  display: flex;
  height: 231px;
  position: relative;
  width: 290px;
}

.index .company-detail-text {
  color: var(--woodsmoke);
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-l);
  font-weight: 400;
  height: 20px;
  letter-spacing: 0;
  line-height: normal;
  margin-left: 34px;
  margin-top: 20px;
  width: 144px;
}

.index .company-image {
  position: relative;
  height: 250px;
  left: 15px;
  object-fit: cover;
  top: 0;
  width: 250px;
  z-index: 1;
}

.index .button {
  align-items: center;
  display: flex;
  gap: 3.77px;
  height: 53px;
  justify-content: center;
  padding: 3.77px;
  position: relative;
  width: 271px;
}

.index .view {
  align-items: center;
  border: 1.51px solid;
  border-color: var(--woodsmoke);
  border-radius: 37.74px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3.77px;
  margin-bottom: -1.83px;
  margin-top: -1.83px;
  padding: 9.06px 20.38px;
  position: relative;
}

.index .text-1 {
  color: var(--woodsmoke);
  font-family: var(--font-family-helvetica-regular);
  font-size: 27.2px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .opt-text {
  font-family: var(--font-family-helvetica-bold);
  /* font-weight: 700; */
  letter-spacing: 18px;
  line-height: normal;
}

.index .opt-text-pnl {
  align-items: center;
  border-radius: 48px;
  display: flex;
  overflow: hidden;
  position: relative;
}

.index .opt-text-pnl-2 {
  background-color: #312d2d;
  background-image: linear-gradient(to right, #000000 0.1px, transparent 1px),
    linear-gradient(to bottom, #000000 0.1px, transparent 1px);
  background-size: 6px 6px; /* 格子の大きさ */
  border-radius: 8px;
  flex-wrap: wrap;
  gap: 72px 210px;
  height: 777px;
  width: 71px;
}

.index .opt-text-frm-2 {
  display: flex;
  margin-bottom: -32.5px;
  margin-top: -32.5px;
  justify-content: center;
  align-items: center;
  width: 71px;
}

.index .opt-text-2 {
  color: var(--white-milk);
  font-family: var(--font-family-nostalgic);
  font-size: var(--font-size-xxl);
  width: 36px;
  writing-mode: vertical-rl;
  position: absolute;
  right: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
  animation: scroll-down 10s linear infinite;
}

@keyframes scroll-down {
  0% {
    top: -350px;
  }
  100% {
    top: 100vh;
  }
}

.index .recruit-pnl {
  align-items: center;
  background-color: #c0843d;
  border-radius: 48px;
  display: flex;
  gap: 13px;
  height: 124px;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 354px;
}

.index .recruit-title {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  cursor: not-allowed;
}

.index .tidy-bear-inc-all-rights-reserved {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-l);
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  min-height: 18px;
  text-align: center;
  white-space: nowrap;
  width: 354px;
  opacity: 0;
}

.index .flex-col-2 {
  gap: 13px;
  margin-top: 1px;
  min-height: 955px;
  width: 1115px;
}

.index .flex-row-1 {
  gap: 13px;
  height: 506px;
  min-width: 1115px;
}

.index .flex-col-3 {
  gap: 13px;
  min-height: 506px;
  width: 575px;
}

.index .x16 {
  align-items: flex-end;
  background-color: var(--woodsmoke);
  border-radius: 48px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 170px 70px;
  height: 123px;
  overflow: hidden;
  padding: 0px 45px;
  position: relative;
  width: 575px;
  background-image: url("/img/SDIM0532-min-2.webp");
  background-position: right;
}

.index .filename {
  align-items: center;
  display: flex;
  gap: 13px;
  height: 136px;
  justify-content: center;
  margin-right: -45px;
  margin-top: -13px;
  padding: 4px;
  position: relative;
  width: 616px;
}

.index .file-name {
  color: var(---woodsmoke);
  font-family: var(--font-family-helvetica-bold);
  font-size: var(--font-size-xxl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  width: fit-content;
}

.index .top-pnl {
  align-items: center;
  /* background-color: var(--yellow-soft); */
  border-radius: 48px;
  display: flex;
  justify-content: center;
  height: 506px;
  margin-left: 1px;
  overflow: hidden;
  padding: 0 82px;
  width: 574px;
}

.index .overlap-group {
  height: 345px;
  position: relative;
  width: 409px;
}

.index .logo {
  height: 500px;
  /* left: 15px; */
  object-fit: cover;
  position: absolute;
  /* top: 0; */
  width: 500px;
  filter: invert(35%);
}

.index .company-name {
  align-items: flex-start;
  display: flex;
  gap: 3.77px;
  /* left: 0; */
  padding: 3.77px;
  position: absolute;
  top: 75px;
  width: 409px;
}

/* .index .company-name-text {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: 56.6px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  margin-right: -3.55px;
  margin-top: -0.38px;
  position: relative;
  width: fit-content;
} */

.index .flex-col-4 {
  gap: 13px;
  min-height: 505px;
  width: 528px;
}

.index .pnl-container {
  align-items: flex-start;
  display: flex;
  gap: 13px;
  min-width: 528px;
}

.index .opt-text-pnl-1 {
  background-color: #cf6401;
  gap: 392px;
  height: 190px;
  justify-content: space-around;
  padding: 26px 0px;
  width: 26px;
}

.index .opt-text-1 {
  /* color: var(--white-milk); */
  font-size: var(--font-size-s);
  font-weight: 700;
  text-align: center;
  width: 26px;
  position: absolute;
  right: -5px;
  /* -webkit-text-stroke: 0.5px black; */
  /* text-shadow: -1px -1px 0 #dc6aff, -1px -1px 0 #dc6aff, 1px -1px 0 #dc6aff,
    -1px -2px 0 #8af135, 0px 1px 0px #8af135; */
}

.index .portfolio-pnl {
  align-items: center;
  background-color: #fff1d4;
  border-radius: 48px;
  display: flex;
  flex-direction: row;
  height: 190px;
  overflow: hidden;
  padding: 48px 0px;
  position: relative;
  width: 488px;
}

.index .portfolio-frm {
  align-items: center;
  display: flex;
  /* gap: 3.77px; */
  height: 116px;
  justify-content: center;
  /* margin-bottom: -6px; */
  /* padding: 3.77px 0px; */
  position: relative;
  width: 490px;
  text-align: center;
}

.index .portfolio-text {
  color: var(---woodsmoke);
  font-family: var(--font-family-audiowide);
  font-size: 86px;
  font-weight: 400;
  letter-spacing: -10.92px;
  text-indent: -10.92px;
  line-height: normal;
  position: relative;
  width: 100%;
}

.index .flex-row-2 {
  gap: 13px;
  min-width: 526px;
}

.index .youtube-pnl {
  align-items: center;
  background-color: #cc4b24;
  border-radius: 48px;
  display: flex;
  flex-direction: column;
  height: 303px;
  overflow: hidden;
  position: relative;
  width: 525px;
  transition: color 0.5s ease;
  cursor: pointer;
}

.index .youtube-pnl:hover::before {
  transform: scaleY(1);
}

.index .youtube-pnl::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #da1725;
  transform: scaleY(0);
  transition: all 0.5s ease;
  transition-property: transform;
  z-index: 1;
}

.index .youtube-title {
  background-color: transparent;
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 3.77px;
  justify-content: center;
  padding: 7.77px;
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 2;
  cursor: pointer;
}

.index .youtube-text {
  color: #ff0000;
  font-family: var(--font-family-audiowide);
  font-size: 60px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  margin-left: -1.77px;
  margin-right: -1.77px;
  margin-top: -0.38px;
  position: relative;
}

.index .youtube-image {
  height: 300px;
  left: 15px;
  object-fit: cover;
  top: 0;
  width: 300px;
}

.index .pnl-container-1 {
  gap: 13px;
  min-height: 282px;
  width: 256px;
}

.index .insta-pnl {
  align-items: center;
  background-color: var(--woodsmoke);
  border: 2px solid;
  border-color: var(--daffodil);
  border-radius: 48px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  height: 231px;
  overflow: hidden;
  padding: 12px 44px;
  position: relative;
  width: 256px;
}

.index .insta-title {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 3.77px;
  padding: 3.77px;
  position: relative;
  width: 100%;
}

.index .insta-text {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-xxl);
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  margin-right: -5.55px;
  margin-top: -0.38px;
  position: relative;
  width: fit-content;
}

.index .insta-image {
  height: 200px;
  left: 15px;
  object-fit: cover;
  top: 0;
  width: 200px;
}

.index .web-pnl {
  align-items: center;
  background-color: var(--iceblue);
  /* border: 2px solid var(--white-milk); */
  border-radius: 48px;
  display: flex;
  gap: 75px;
  height: 98px;
  margin-left: 1px;
  overflow: hidden;
  padding: 11px 24px;
  position: relative;
  width: 246px;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
}

.index .web-frm {
  font-family: var(--font-family-audiowide);
  font-size: 70px;
  color: var(--white-milk);
  display: flex;
  letter-spacing: -5px;
  text-indent: -5px;
}

.index .web-text {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-xl);
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -4px;
  position: relative;
  width: fit-content;
}

.index .web-detail-text {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-s);
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -0.5px;
  position: relative;
  width: fit-content;
}

.index .flex-row-3 {
  gap: 16px;
  margin-left: 1px;
  min-width: 1105px;
}

.index .pnl-container-2 {
  gap: 13px;
  min-height: 435px;
  width: 353px;
}

.index .service-pnl {
  align-items: flex-start;
  background-color: #f87b7b;
  border-radius: 48px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  height: 371px;
  overflow: hidden;
  padding: 39px 15px;
  position: relative;
  width: 353px;
  cursor: cell;
}

.index .service-title {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 13px;
  justify-content: center;
  padding: 0px 25px;
  position: relative;
  top: -5px;
}

.index .service-text {
  color: var(--woodsmoke);
  font-family: var(--font-family-audiowide);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1px;
  position: relative;
  width: fit-content;
}

.index .service-tags {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0px;
  height: 245px;
  margin-bottom: -1px;
  margin-right: -3px;
  position: relative;
  width: 326px;
}

.index .tag-base:hover {
  background-color: var(--white-milk);
}

.index .tag {
  display: flex;
  width: 74px;
}

.index .frame-2-1 {
  gap: 20px;
  margin-right: -1px;
  padding: 5px 3px;
}

.index .movie {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .service-tags-item {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12.08px;
  height: 31px;
  padding: 1px;
  position: relative;
  width: 113px;
}

.index .frame-2 {
  align-items: center;
  border: 1.51px solid;
  border-color: var(--woodsmoke);
  border-radius: 37.74px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 17px;
  margin-right: -1px;
  padding: 5px 7px;
  position: relative;
}

.index .youtube {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .tag-1 {
  display: flex;
  width: 128px;
}

.index .instagram {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .tag-2 {
  display: flex;
  width: 94px;
}

.index .webcm {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .tag-3 {
  display: flex;
  width: 119px;
}

.index .direction {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .planning {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .service-tags-item-1 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12.08px;
  height: 31px;
  padding: 1px;
  position: relative;
  width: 99px;
}

.index .camera {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .tag-4 {
  display: flex;
  width: 63px;
}

.index .edit {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .tag-5 {
  display: flex;
  width: 126px;
}

.index .animation {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .tag-6 {
  display: flex;
  width: 65px;
}

.index .web {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .tag-7 {
  display: flex;
  width: 91px;
}

.index .design {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .system {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .tag-8 {
  display: flex;
  width: 85px;
}

.index .script {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .tag-9 {
  display: inline-flex;
  flex: 0 0 auto;
}

.index .frame-2-2 {
  gap: 17px;
  padding: 2px 9px;
}

.index .frame-2:hover,
.index .frame-2-1:hover,
.index .frame-2-2:hover {
  background-color: var(--white-milk);
}

.index .engineering {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .tag-10 {
  display: flex;
  width: 135px;
}

.index .consulting {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.index .contact-pnl {
  align-items: center;
  background-color: #9747ff;
  border-radius: 48px;
  display: flex;
  gap: 13px;
  height: 51px;
  justify-content: center;
  overflow: hidden;
  padding: 19px 129px;
  position: relative;
  width: 353px;
  cursor: pointer;
}

.index button {
  background-color: transparent;
  height: 51px;
  width: 353px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.index .contact-text {
  color: var(--white-milk);
  font-family: var(--font-family-helvetica-regular);
  font-size: var(--font-size-l);
  font-weight: 400;
  letter-spacing: 18.56px;
  text-indent: 18.56px;
  line-height: normal;
  margin-bottom: -2.12px;
  margin-left: -47px;
  margin-right: -47px;
  margin-top: -2.88px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .member-container {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 13px;
}

.index .member-inner-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.index .member-title {
  display: flex;
  align-items: center;
  position: relative;
  background-color: #e1b28d;
  border-radius: 48px;
  height: 435px;
  width: 70px;
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-xxl);
  font-weight: 400;
  line-height: normal;
  writing-mode: vertical-rl;
  text-orientation: upright;
  justify-content: center;
  letter-spacing: 1em;
  text-indent: 1em;
}

.index .member-detail-container {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 13px;
}

.index .member-icon-pnl-1 {
  align-items: center;
  position: relative;
  background-color: #f1be49;
  border-radius: 48px;
  height: 211px;
  width: 177px;
}

.index .member-icon-pnl-2 {
  align-items: center;
  position: relative;
  background-color: #a89f9f;
  border-radius: 48px;
  height: 211px;
  width: 177px;
}

.member-icon {
  height: 100%;
  width: 100%;
}

.index .member-pnl-1 {
  display: flex;
  align-items: center;
  position: relative;
  /* background-color: #ffeeb6fc; */
  border-radius: 48px;
  height: 211px;
  width: 208px;
  justify-content: flex-start;
}

.index .member-pnl-2 {
  display: flex;
  align-items: center;
  align-items: center;
  position: relative;
  /* background-color: #8b7c70; */
  border-radius: 48px;
  height: 211px;
  width: 208px;
  justify-content: flex-start;
}

.index .x13 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--woodsmoke);
  /* border: 2px solid;
  border-color: var(--daffodil);
  border-radius: 48px; */
  height: 21px;
  width: 225px;
}

.index .web-instagram {
  color: var(--white-milk);
  font-family: var(--font-family-niconne);
  font-size: var(--font-size-xxl);
  letter-spacing: 0;
  line-height: normal;
  margin-top: -4px;
  position: relative;
  margin: 0 auto;
}

.index .instagram-pnl {
  align-items: center;
  background-color: #000000;
  /* border-color: var(--daffodil); */
  border-radius: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  height: 324px;
  overflow: hidden;
  position: relative;
  width: 246px;
  transition: color 0.5s ease;
  cursor: pointer;
}

.index .instagram-pnl:hover::before {
  transform: scaleY(1);
}

.index .instagram-pnl::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #cf2e92;
  transform: scaleY(0);
  transition: all 0.5s ease;
  transition-property: transform;
  z-index: 1;
}

.index .instagram-frm {
  background-color: transparent;
  border: none;
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-xl);
  color: var(--woodsmoke);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
}

.index .news-title {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3.77px;
  padding: 3.77px;
  position: relative;
}

.index .news-text {
  color: var(---woodsmoke);
  font-family: var(--font-family-helvetica-bold);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -0.38px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .news-frm {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 100%;
  margin-bottom: -26.55px;
  overflow: hidden;
  position: relative;
  width: 100%;
  /* border-radius: 40px; */
}

.index .frame-container {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 13px;
  left: 3px;
  /* min-height: 171px; */
  height: 482px;
  position: relative;
  top: -41px;
  justify-content: center;
  /* width: 596px; */
}

.index .frame {
  display: flex;
  gap: 32px;
  height: 51px;
  width: 596px;
}

.index .date {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5.66px;
  height: 47.96px;
  margin-left: 12px;
  margin-top: 3px;
  position: relative;
  width: 44px;
}

.index .date-1 {
  letter-spacing: 1.5px;
  line-height: normal;
  margin-top: -0.38px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .line {
  display: flex;
  height: 2.64px;
  position: relative;
  width: 37.36px;
}

.index .line-1 {
  height: 3.02px;
  margin-left: 3.4px;
  margin-top: -0.4px;
  width: 33.97px;
}

.index .year {
  letter-spacing: 1.5px;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .ertyuiopsdfghjklxcvbnm {
  height: 17px;
  letter-spacing: 1.5px;
  line-height: normal;
  margin-top: 17px;
  white-space: nowrap;
  width: 223px;
}

.index .flex-col-5 {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.index .flex-row-4 {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
}

.index .frame-2-3 {
  align-items: center;
  border: 1.51px solid;
  border-color: var(--woodsmoke);
  border-radius: 37.74px;
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
}

.index .pnl-container-3 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.index .tag-11 {
  align-items: flex-start;
  flex-direction: column;
  gap: 12.08px;
  height: 31px;
  padding: 1px;
  position: relative;
}
/* screen - small */

.small {
  align-items: center;
  background-color: var(--woodsmoke);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 393px;
  padding: 0px 6px 6px;
  position: relative;
}

.small .main {
  gap: 6px;
}

.small .top-layer {
  align-items: flex-start;
  /* background-color: var(--yellow-soft); */
  border-radius: 20px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 13px;
  overflow: hidden;
  padding: 9px 0px;
}

.small .top-frame {
  height: 181px;
}

.small .overlap-group-1 {
  height: 181px;
  position: relative;
  width: 386px;
}

.small .logo-1 {
  height: 168px;
  left: 88px;
  object-fit: cover;
  position: absolute;
  top: 13px;
  width: 209px;
  z-index: 1;
  filter: invert(35%);
}

.small .company-name-1 {
  align-items: center;
  display: flex;
  gap: 3.77px;
  height: 59px;
  justify-content: center;
  left: 0;
  padding: 3.77px 3.77px 5px;
  position: absolute;
  top: 0;
  width: 386px;
}

.small .company-title-1 {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-xxxl);
  font-weight: 400;
  height: 50px;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -0.38px;
  position: relative;
  text-align: center;
  width: 306px;
}

.small .portfolio-layer {
  align-self: stretch;
  height: 106px;
  justify-content: space-between;
  width: 100%;
}

.small .opt-text-pnl {
  align-items: center;
  background-color: #cf6401;
  border-radius: 48px;
  display: flex;
  height: 106px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  /* width: 26px; */
  flex-grow: 1;
  margin-right: 5px;
}

.small .opt-text {
  color: var(---woodsmoke);
  font-family: var(--font-family-helvetica-bold);
  font-size: var(--font-size-xs);
  font-weight: 700;
  height: 103px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-align: center;
  width: 26px;
  writing-mode: vertical-rl;
  letter-spacing: 0.12em;
  transform: translateX(3%);
}

.small .portfolio-pnl-1 {
  align-items: center;
  background-color: #f87b7b;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  height: 106px;
  justify-content: center;
  overflow: hidden;
  padding: 48px 0px;
  position: relative;
  /* width: 100%; */
  flex-grow: 25;
}

.small .portfolio-frame {
  gap: 3.77px;
  height: 94px;
  justify-content: center;
  margin-bottom: -42px;
  margin-top: -42px;
  width: 337px;
}

.small .portfolio-text-1 {
  color: var(---woodsmoke);
  font-family: var(--font-family-audiowide);
  font-size: 60px;
  font-weight: 400;
  height: 84px;
  letter-spacing: -7.8px;
  text-indent: -7.8px;
  line-height: normal;
  margin-left: -1.5px;
  margin-right: -1.5px;
  position: relative;
  text-align: center;
  width: 340px;
}

.small .youtube-pnl-1 {
  align-items: center;
  align-self: stretch;
  background-color: #cc4b24;
  /* border: 2px solid;
  border-color: var(--daffodil); */
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  height: 180px;
  overflow: hidden;
  padding: 2px 10px;
  position: relative;
  width: 100%;
  transition: color 0.5s ease;
}

.small .youtube-pnl-1:hover::before {
  transform: scaleY(1);
}

.small .youtube-pnl-1::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  content: "";
  background-color: #1fbb5a;
  transform: scaleY(0);
  transition: all 0.5s ease;
  transition-property: transform;
  z-index: 1;
}

.small .youtube-title-1 {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 3.77px;
  justify-content: center;
  padding: 3px 3.77px;
  position: relative;
  width: 139px;
}

.small .youtube-text {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: 60px;
  font-weight: 400;
  margin-top: -0.38px;
}

.small .youtube-image {
  height: 200px;
  left: 15px;
  object-fit: cover;
  top: 0;
  width: 200px;
  z-index: 2;
}

.small .main-item {
  gap: 6px;
  justify-content: center;
}

.small .service-recruit-frm {
  align-self: stretch;
  display: flex;
  gap: 5px;
  height: 172px;
  position: relative;
  width: 100%;
}

.small .service-pnl-1 {
  align-items: center;
  /* background-color: #c47551; */
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  height: 172px;
  padding: 0px 9px;
  position: relative;
  /* width: 320px; */
  /* flex-grow: 2; */
  flex-direction: column;
  gap: 3px;
}

.small .service-title-1 {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
  padding: 2px 22px 0px;
  position: relative;
  width: 178px;
  justify-content: center;
}

.small .service-text-1 {
  color: #c47551;
  font-family: var(--font-family-audiowide);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  margin-top: 1px;
  position: relative;
  width: fit-content;
}

.small .service-tags-1 {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5px 4px;
  height: 134px;
  margin-right: -2px;
  position: relative;
  width: 300px;
}

.small .tag-11 {
  height: 27px;
  width: 60px;
}

.small .frame-2-5 {
  display: inline-flex;
  gap: 20px;
  padding: 2px 5px;
}

.small .movie-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-12 {
  height: 27px;
  width: 91px;
}

.small .frame-2-3 {
  display: inline-flex;
  gap: 17px;
  padding: 2px 9px;
}

.small .youtube-1 {
  margin-top: -1.51px;
}

.small .tag-13 {
  height: 27px;
  width: 101px;
}

.small .frame-2-4 {
  display: inline-flex;
  gap: 17px;
  margin-left: -0.5px;
  margin-right: -0.5px;
  padding: 2px 9px;
}

.small .instagram-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-14 {
  height: 27px;
  width: 77px;
}

.small .webcm-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-15 {
  height: 27px;
  width: 95px;
}

.small .direction-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-16 {
  height: 27px;
  width: 92px;
}

.small .planning-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-17 {
  height: 26px;
  width: 80px;
}

.small .camera-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-18 {
  height: 26px;
  width: 53px;
}

.small .edit-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-19 {
  height: 26px;
  width: 99px;
}

.small .animation-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-20 {
  height: 26px;
  width: 52px;
}

.small .frame-2-6 {
  display: flex;
  gap: 17px;
  margin-left: -1px;
  margin-right: -1px;
  padding: 2px 9px;
  width: 52px;
}

.small .web-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-21 {
  height: 27px;
  width: 76px;
}

.small .design-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-22 {
  height: 27px;
  width: 80px;
}

.small .system-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-23 {
  height: 27px;
  width: 71px;
}

.small .script-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-24 {
  height: 27px;
  width: 118px;
}

.small .engineering-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .tag-25 {
  height: 27px;
  width: 107px;
}

.small .consulting-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.51px;
  position: relative;
  width: fit-content;
}

.small .recruit-pnl-1 {
  align-items: center;
  background-color: #3dc074;
  border-radius: 20px;
  display: flex;
  gap: 13px;
  height: 172px;
  justify-content: center;
  overflow: hidden;
  /* padding: 42px 123px; */
  position: relative;
  /* width: 71px; */
  flex-grow: 1;
}

.small .recruit-text {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: 25px;
  font-weight: 400;
  height: 165px;
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: -0.3em;
  text-indent: -0.4em;
  background-color: transparent;
  border: none;
}

.small .insta-web-frm {
  align-self: stretch;
  display: flex;
  gap: 5px;
  height: 100%;
  position: relative;
  width: 100%;
}

.small .insta-pnl {
  align-items: center;
  background-color: #25f4ee;
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 84px;
  justify-content: center;
  height: 110px;
  /* width: 243px; */
  flex-grow: 2;
  transition: color 0.5s ease;
}

/* .small .insta-pnl:hover::before {
  transform: scaleY(1);
}

.small .insta-pnl::before {
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: max-content;
  height: 100%;
  background-color: #ff62c3;
  transform: scaleY(0);
  transition: all 0.5s ease;
  transition-property: transform;
  z-index: 1;
} */

.small .insta-title {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 13px;
  height: 35px;
  justify-content: center;
  margin-bottom: -32px;
  margin-top: -32px;
  padding: 3px 42px;
  position: relative;
}

.small .insta-image {
  height: 110px;
  left: 15px;
  object-fit: cover;
  top: 0;
  width: 110px;
  z-index: 2;
}

.small .web-pnl-s {
  align-items: center;
  background-color: #ce5aa1;
  border-radius: 20px;
  display: flex;
  gap: 13px;
  justify-content: center;
  width: 90px;
  flex-grow: 1;
}

.small .web-text-s {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: 58px;
  font-weight: 400;
  letter-spacing: -5px;
  text-indent: -5px;
  line-height: normal;
  position: relative;
  white-space: nowrap;
}

.small .company-contact-frm {
  align-self: stretch;
  display: flex;
  gap: 5px;
  height: 100%;
  position: relative;
  width: 100%;
}

.small .company-pnl-1 {
  align-items: center;
  background-color: var(--cranberry);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 84px;
  height: 80px;
  justify-content: center;
  align-content: center;
  overflow: hidden;
  /* padding: 31px 0px; */
  position: relative;
  /* width: 243px; */
  flex-grow: 1;
  border: none;
}

.small .company-title-2 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 13px;
  height: 35px;
  justify-content: center;
  margin-bottom: -32px;
  margin-top: -32px;
  padding: 3px 42px;
  position: absolute;
  z-index: 2;
}

.small .company-text-1 {
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-xxl);
  font-weight: 400;
  letter-spacing: 2.16px;
  line-height: normal;
  position: relative;
  width: fit-content;
}

.small .company-image {
  position: relative;
  height: 248px;
  /* left: 15px; */
  object-fit: cover;
  top: -37px;
  width: 276px;
  z-index: 1;
}

.small .contact-pnl-1 {
  align-items: center;
  background-color: #9747ff;
  border-radius: 20px;
  display: flex;
  gap: 13px;
  height: 80px;
  justify-content: center;
  overflow: hidden;
  padding: 19px 80px;
  position: relative;
  width: 139px;
  flex-grow: 1;
  border: none;
}

.small .contact-text-1 {
  color: var(--white-milk);
  font-family: var(--font-family-helvetica-regular);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.64px;
  line-height: normal;
  /* margin-bottom: -10.62px;
  margin-left: -109.5px;
  margin-right: -109.5px;
  margin-top: -11.38px; */
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.small .tidy-bear-inc-all-rights-reserved-1 {
  align-self: stretch;
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-l);
  font-weight: 400;
  height: 100%;
  letter-spacing: 0;
  position: relative;
  text-align: center;
  white-space: nowrap;
  padding-bottom: 8px;
}

.small .frame-2 {
  align-items: center;
  color: #c47551;
  border: 1.51px solid;
  border-color: #c47551;
  border-radius: 37.74px;
  flex: 0 0 auto;
  position: relative;
}

.small .main-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.small .portfolio {
  align-items: center;
  display: flex;
  position: relative;
}

.small .tag {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12.08px;
  justify-content: center;
  padding: 1px;
  position: relative;
}

.small .top {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.small .youtube {
  /* letter-spacing: -12px;
  text-indent: -12px; */
  line-height: normal;
  position: relative;
  width: fit-content;
}

.small .member-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.small .member-title {
  display: flex;
  align-items: center;
  background-color: #e1b28d;
  border-radius: 20px;
  height: 50px;
  width: 100%;
  color: var(--white-milk);
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-l);
  font-weight: 400;
  line-height: normal;
  justify-content: center;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

.small .member-inner-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.small .member-detail-container {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1px;
  width: 100%;
}

.small .member-icon-pnl-1,
.small .member-icon-pnl-2 {
  align-items: center;
  background-color: #fede72;
  border-radius: 20px;
  height: 100px;
  width: 100px;
}

.small .member-icon-pnl-2 {
  background-color: #a89f9f;
}

.small .member-icon {
  height: 100%;
  width: 100%;
}

.small .member-pnl-1,
.small .member-pnl-2 {
  display: flex;
  align-items: center;
  border-radius: 20px;
  height: 100px;
  /* width: calc(100% - 106px); */
  justify-content: flex-start;
  padding: 6px;
}

.small .member-detail {
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-xs);
  color: #fede72;
  white-space: nowrap;
  letter-spacing: 1px;
  line-height: 12px;
}

.small .member-detail-2 {
  color: #8b7c70;
  letter-spacing: 2px;
}

@media screen and (max-width: 859px) {
  .screen.index,
  .outer-bottom {
    display: none;
  }
}
@media screen and (min-width: 860px) {
  .screen.small {
    display: none;
  }
}

.work-table {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* border: 2px solid;
  border-color: var(--daffodil); */
}

/* .youtube-content { */
/* width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute; */
/* top: 0;
  left: 0;
  height: 100%; */
/* object-fit: cover; */
/* } */

/* .index .article-image {
  position: relative;
  overflow: hidden;
  height: 258px;
  width: 494px;
  border-radius: 18px;
} */

/* .index iframe {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
} */

.small .article-image {
  position: relative;
  overflow: hidden;
  height: 205px;
  width: 365px;
  border-radius: 18px;
  margin-bottom: 7px;
}

.small iframe {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

figcaption {
  font-family: var(--font-family-helvetica-bold);
  color: aliceblue;
}

/*
*********************************
********** outer panel **********
*********************************
*/
.outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}

.outer-left {
  padding: 11px 0;
}

.outer-right {
  padding-left: 13px;
}

@media screen and (max-width: 859px) {
  .outer-left {
    display: none;
  }
}
.outer-left .flex-row-outer {
  align-items: flex-end;
  display: flex;
  gap: 13px;
  height: 1000px;
  min-width: 354px;
}

.outer-left .flex-col-outer-1 {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 778px;
  width: 353px;
}

.outer-left .outer-pnl-1 {
  background-color: #057d97;
  border-radius: 48px;
  height: 247px;
  width: 100%;
}

.outer-left .outer-pnl-2 {
  align-items: flex-start;
  background-color: #fe2c55;
  border-radius: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 84px;
  height: 318px;
  overflow: hidden;
  padding: 31px 0px;
  position: relative;
  width: 271px;
  align-content: center;
  justify-content: center;
  cursor: pointer;
}

.outer-left .outer-pnl-2:hover::before {
  transform: scaleY(1);
}

.outer-left .outer-pnl-2::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #25f4ee;
  transform: scaleY(0);
  transition: all 0.5s ease;
  transition-property: transform;
  z-index: -1;
}

.outer-pnl-2 button {
  background-color: transparent;
  border-color: transparent;
}

.outer-pnl-2-1 {
  align-items: flex-start;
  background-color: #2b7229;
  border-radius: 48px;
  gap: 15px 84px;
  height: 318px;
  width: 271px;
}

.pnl-recruit {
  background-color: #3aa24d;
  border-radius: 48px;
  height: 82px;
  width: 271px;
  font-family: var(--font-family-audiowide);
  color: var(--white-milk);
  text-orientation: upright;
  letter-spacing: 0.7em;
  text-indent: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
}

.outer-pnl-recruit {
  background-color: #f36355;
  border-radius: 48px;
  height: 318px;
  width: 82px;
  font-family: var(--font-family-audiowide);
  color: var(--white-milk);
  text-orientation: upright;
  letter-spacing: 0.7em;
  text-indent: 1em;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
}

.outer-pnl-3 {
  background-color: #733df1;
  border-radius: 48px;
  height: 318px;
  width: 82px;
}

.small .outer-pnl-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--green-sea);
  border-radius: 48px;
  height: 200px;
  width: 100%;
}

.outer-left .flex-row-outer-1 {
  align-items: flex-start;
  display: flex;
  gap: 13px;
}

.outer-left .outer-pnl-4 {
  background-color: #3df1d3;
  border-radius: 48px;
  height: 365px;
  width: 30%;
}

.outer-left .outer-pnl-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--green-emerald);
  border-radius: 48px;
  height: 365px;
  width: 70%;
}

.outer-right .outer-pnl-1 {
  background-color: #a39191;
}

.outer-bottom {
  padding-bottom: 11px;
}

.outer-bottom .flex-col-outer-1 {
  display: flex;
  flex-direction: row;
  gap: 13px;
  max-height: 220px;
  width: 100%;
}

.outer-bottom .flex-row-outer-1 {
  align-items: flex-start;
  display: flex;
  gap: 13px;
  padding-bottom: 11px;
}

.outer-bottom .outer-pnl-2 {
  align-items: flex-start;
  background-color: #934b15;
  border-radius: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 84px;
  height: 220px;
  overflow: hidden;
  padding: 31px 0px;
  position: relative;
  width: 574px;
  cursor: pointer;
}

.outer-bottom .outer-pnl-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--green-sea);
  border-radius: 48px;
  height: 220px;
  width: 1000px;
}

.outer-bottom .outer-pnl-4 {
  background-color: #5c4747;
  border-radius: 48px;
  height: 220px;
  width: 588px;
}

.outer-bottom .outer-pnl-5 {
  display: flex;
  align-items: center;
  background-color: #29afc5;
  border-radius: 48px;
  height: 220px;
  width: 26px;
  line-height: normal;
  writing-mode: vertical-rl;
  text-orientation: upright;
  justify-content: center;
  letter-spacing: 1em;
  text-indent: 1em;
  font-size: var(--font-size-s);
  font-family: var(--font-family-helvetica-bold);
  font-weight: 700;
}

/*
*********************************
********** outer panel end*******
*********************************
*/

/* .youtube-container {
  align-items: center;
  display: flex;
} */

.index .prev-btn {
  background-color: var(--woodsmoke);
  border: 2px solid;
  border-color: #777575;
  border-right-color: var(--woodsmoke);
  height: 256px;
  /* padding: 26px 0px; */
  width: 33px;
  border-radius: 48px 0px 0px 48px;
  cursor: pointer;
  position: relative;
  left: 16px;
}

.index .next-btn {
  background-color: var(--woodsmoke);
  border: 2px solid;
  border-color: #777575;
  border-left-color: var(--woodsmoke);
  height: 256px;
  /* padding: 26px 0px; */
  width: 33px;
  border-radius: 0px 48px 48px 0px;
  cursor: pointer;
  position: relative;
  right: 16px;
}

.prev-btn:hover,
.next-btn:hover {
  background-color: #ff0000;
  border-color: #ff0000;
  transition: 0.4s ease all;
}

.line-qr {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  position: absolute;
  margin: auto;
  filter: invert(92%);
  mix-blend-mode: multiply;
  cursor: copy;
  border-radius: 45px;
}

.insta-frame {
  position: absolute;
  top: 0;
  left: -58.5px;
  width: 332px;
  height: 515px;
  border: 55px solid var(--woodsmoke); /* フレームの太さと色 */
  border-radius: 85px;
  /* box-sizing: border-box; */
  /* pointer-events: none;  */
}

.index .insta-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 249px;
}

.insta-content-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.thumbnail {
  width: 100%;
  z-index: 1;
}

.index .prev-btn-insta {
  background-color: var(--woodsmoke);
  border: 2px solid;
  border-color: #777575;
  border-right-color: var(--woodsmoke);
  height: 317px;
  /* padding: 26px 0px; */
  width: 50px;
  border-radius: 48px 0px 0px 48px;
  cursor: pointer;
  position: relative;
  left: 36px;
}

.index .next-btn-insta {
  background-color: var(--woodsmoke);
  border: 2px solid;
  border-color: #777575;
  border-left-color: var(--woodsmoke);
  height: 317px;
  /* padding: 26px 0px; */
  width: 50px;
  border-radius: 0px 48px 48px 0px;
  cursor: pointer;
  position: relative;
  right: 36px;
}

.prev-btn-insta:hover,
.next-btn-insta:hover {
  background-color: var(--white-milk);
  border-color: var(--white-milk);
  transition: 0.4s ease all;
}

.youtube-logo-right {
  background-color: #ff0000;
  border-radius: 8px;
  color: var(--white-milk);
  padding: 0 3px;
}

.youtube-logo-left {
  padding: 0 1px;
}

.company-name-text {
  text-align: center;
  /* width: 65%; */
  height: 58px;
  margin: auto;
  position: absolute;
  top: 0;
  left: -15px;
  right: 0;
  bottom: 0;
  user-select: none;
  z-index: 2;
  opacity: 0;
}

.company-name-text b {
  font: 400 12.5vh var(--font-family-vibur);
  color: #fee;
  text-shadow: 0 20px 100px, 0 0 2px, 0 0 1em #ffc744, 0 0 0.5em #4456ff, 0 0 0.1em var(--white-milk), 5px 12px 3px #000;
}
@media screen and (max-width: 859px) {
  .company-name-text b {
    font: 400 6.5vh var(--font-family-vibur);
    z-index: 5;
  }
}
.company-name-text b span {
  animation: blink linear infinite 2s;
}
.company-name-text b span:nth-of-type(2) {
  animation: blink linear infinite 3s;
}
.company-name-text b span:nth-of-type(4) {
  animation: blink linear infinite 8s;
}
.company-name-text b span:nth-of-type(5) {
  animation: blink linear infinite 3.5s;
}
@keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79% {
    color: #333;
  }
  80% {
    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #333;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}

.member-detail {
  font-family: var(--font-family-audiowide);
  font-size: var(--font-size-s);
  color: #f1be49;
  white-space: nowrap;
  letter-spacing: 7px;
  line-height: 16px;
}

.member-detail-2 {
  color: #8b7c70;
  letter-spacing: 10px;
}

.uten {
  display: flex;
  max-width: 100%;
  max-height: 95%;
}

.tik-image {
  display: flex;
  max-width: 100%;
  max-height: 95%;
  cursor: pointer;
}

.company-pnl button {
  background-color: transparent;
  border-color: transparent;
}

#Modal {
  width: 700px;
  height: 400px;
}

#Modal-contact {
  width: 1000px;
  height: 450px;
}

#Modal-youtube {
  width: 1000px;
  height: 700px;
}

#Modal-instagram {
  width: 1000px;
}

#Modal-tiktok {
  width: 1000px;
}

/* .inner-modal {
  align-content: center;
  display: grid;
  justify-items: center;
  padding: 32px;
} */

.centered-popover {
  opacity: 0.97;
  position: fixed;
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -50%); */
  inset: 0;
  margin: auto;
  background-color: #252526;
  /* padding: 300px; */
  border: 1px solid #2e2e2f;
  border-radius: 5px;
  box-shadow: 0 0 20px 5px #4a4a4a;
  animation: MyPopoverOpen 0.3s 0.3s ease backwards;
}

.small .centered-popover {
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0.97;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  height: 60%;
  max-width: 600px;
  margin: 0 auto;
  background-color: #252526;
  border: 1px solid #2e2e2f;
  border-radius: 5px;
  box-shadow: 0 0 20px 5px #4a4a4a;
  animation: MyPopoverOpen 0.3s 0.3s ease backwards;
  padding-bottom: 80px;
}

/* ポップオーバーのスタイル */
@keyframes MyPopoverOpen {
  from {
    opacity: 0;
    translate: 30px 0;
  }
  to {
    opacity: 1;
    translate: 0px 0;
  }
}

@keyframes MyPopoverClose {
  from {
    opacity: 1;
    translate: 0px 0;
  }
  to {
    opacity: 0;
    translate: 30px 0;
  }
}

@keyframes MyPopoverBackdropOpen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes MyPopoverBackdropClose {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* モーダルのスタイル */
.centered-popover[popover] {
  z-index: 999;
}

.centered-popover::backdrop {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(4px);
  animation: MyPopoverBackdropOpen 0.3s linear;
}

/* モーダル表示中の背景要素を無効化 */
body:has([popover]:popover-open) {
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

[popover]:popover-open {
  pointer-events: auto;
  user-select: text;
}

/* モーダル表示時のオーバーレイ */
[popover]::backdrop {
  pointer-events: none;
}

.centered-popover.closing {
  animation: MyPopoverClose 0.3s ease forwards;
}

.centered-popover.closing::backdrop {
  animation: MyPopoverBackdropClose 0.3s linear forwards;
}

#small-company .company-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

#small-company .centered-popover {
  box-shadow: none;
  font-family: var(--font-family-helvetica-regular);
  margin-left: 30px;
  margin-right: 30px;
  height: 65%;
  overflow: auto;
}

#small-company .contact-form {
  height: 70%;
}

.small .centered-popover .contact-form {
  height: 70%;
}

.titlebar {
  position: fixed;
  width: 698px;
  height: 20px;
  background: #2e2e2f;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  z-index: 2;
}

.small .titlebar {
  position: absolute;
  width: 100%;
}

#small-company .titlebar {
  position: absolute;
  width: 100%;
}

#Modal-contact .titlebar,
#Modal-youtube .titlebar,
#Modal-instagram .titlebar,
#Modal-tiktok .titlebar {
  width: 998px;
}

#Modal-youtube .youtube-row,
#Modal-instagram .youtube-row {
  position: relative;
  top: 20px;
}

Modal-tiktok .youtube-row {
  position: relative;
}

p.windowtitle {
  color: var(--white-mac);
  width: 100%;
  /* margin-left: calc(-55px - 10px); */
  position: absolute;
  font-size: 12px;
  text-align: center;
  cursor: default;
  font-weight: bold;
}

#small-company {
  margin: 0;
  background-image: url(/img/wallpaper.webp);
  background-size: cover;
  min-height: 100vh;
}

.buttons {
  /* width: 55px;
  height: 20px; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
}
.buttons button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 3px;
  cursor: pointer;
}
#small-company .buttons button {
  max-width: 10px;
  max-height: 10px;
  border-radius: 0%;
}

/* .small .buttons button {
  max-width: 10px;
  max-height: 10px;
  border-radius: 0%;
} */

.buttons .close {
  background: #ff5f57;
  border: 1px solid #e45952;
  font-size: 0;
  z-index: 1;
  position: relative;
}
#small-company .buttons .close-sp {
  background: #ff5f57;
  border: 1px solid #e45952;
}
.small .centered-popover .buttons .close-sp {
  background: #ff5f57;
  border: 1px solid #e45952;
}
.buttons .hide {
  background: #ffbd2d;
  border: 1px solid #e1a73e;
}
.buttons .full {
  background: #27c93f;
  border: 1px solid #2bac2d;
}
.close:hover {
  font-size: 12px; /* ホバー時にテキストを表示する */
}
.close::before {
  content: "×"; /* テキストとして "x" を挿入 */
  font-size: inherit;
  color: var(--dark);
  opacity: 0; /* 初期状態では非表示 */
  transition: opacity 0.3s ease;
  position: absolute;
  top: 50%; /* 垂直方向中央 */
  left: 50%; /* 水平方向中央 */
  transform: translate(-50%, -50%);
}
.close:hover::before {
  opacity: 1; /* ホバー時にテキストを表示 */
}

.centered-popover table {
  position: relative;
  top: 20px;
  width: 100%;
  border-collapse: collapse;
  color: var(--white-mac);
  font-size: 12px;
  border-left: 10px solid #252526;
  border-right: 10px solid #252526;
}

.centered-popover th {
  padding: 8px;
  background-color: #252526;
  border-left: 1px solid var(--dark);
  border-bottom: 1px solid var(--dark);
  text-align: left;
}
.centered-popover td {
  padding: 5px;
  text-align: left;
  vertical-align: middle;
}
.contact-form td {
  text-align: center;
  line-height: 0rem;
}
.contact-form label {
  vertical-align: middle;
}
/* 偶数行に背景色を設定 */
.centered-popover tr:nth-child(even) {
  /* background-color: #2e2e2f; */
  background-color: #2e2e2f;
  border-radius: 50px;
}

/* 奇数行に背景色を設定 */
.centered-popover tr:nth-child(odd) {
  background-color: #252526;
  /* background-color: #3f3f42; */
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  /* max-width: 100%; */
  padding: 10px;
  margin-right: 5px;
  border-radius: 5px;
  font-size: 14px;
  box-sizing: border-box; /* パディングを含めた幅計算 */
  background-color: #292d31; /* 背景色を淡い青に変更 */
  color: var(--white-mac);
}

button[type="submit"] {
  background-color: var(--green-emerald); /* 背景色（緑） */
  color: white; /* テキストの色（白） */
  border: none; /* ボーダーをなしに */
  padding: 10px 20px; /* 内側の余白 */
  text-align: center; /* テキストを中央揃え */
  border-radius: 5px; /* 角を丸く */
  cursor: pointer; /* ポインターカーソル */
  transition: background-color 0.3s ease; /* ホバー時の背景色の変更をスムーズに */
}

button[type="submit"]:hover {
  background-color: #45a049; /* ホバー時の背景色（少し暗い緑） */
}

.close-form {
  background-color: var(--red-soft); /* 背景色（緑） */
  color: white; /* テキストの色（白） */
  border: none; /* ボーダーをなしに */
  padding: 10px 20px; /* 内側の余白 */
  text-align: center; /* テキストを中央揃え */
  border-radius: 5px; /* 角を丸く */
  cursor: pointer; /* ポインターカーソル */
  transition: background-color 0.3s ease; /* ホバー時の背景色の変更をスムーズに */
}

.close-form:hover {
  background-color: #ba2323; /* ホバー時の背景色（少し暗い緑） */
}

.col-info {
  width: 100px;
}

#small-company .col-changedate {
  width: 80px;
}

/* スクロールバーのスタイル */
::-webkit-scrollbar {
  width: 8px; /* スクロールバーの幅 */
  height: 8px; /* 横スクロールバーの高さ */
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05); /* スクロールバーの背景（半透明） */
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.218); /* スクロールバーのつまみ（半透明） */
  border-radius: 6px; /* 角を丸くする */
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(223, 56, 134, 0.49); /* ホバー時のつまみの色 */
}

#Modal-news {
  width: 1115px;
  height: 506px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

#Modal-news.centered-popover {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

#Modal-news .close {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 30px;
  height: 30px;
  background: #dfd2c3e0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
  transition: background-color 0.3s ease;
  opacity: 1;
}

#Modal-news .close:hover {
  background: #ff5f57;
}

#Modal-news .titlebar {
  display: none;
}

#Modal-news .news-container {
  position: relative;
  top: 0;
  padding: 40px;
  display: flex;
  flex-direction: row;
  gap: 50px;
}

.news-panel {
  background-color: transparent;
  padding: 20px;
  border-radius: 48px;
  color: var(--white-milk);
  width: 353px;
  height: 435px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideIn 2s ease forwards;
}

.news-panel:nth-child(1) {
  animation-delay: 0s;
}

.news-panel:nth-child(2) {
  animation-delay: 0.3s;
}

.news-panel:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.news-panel h3 {
  font-family: var(--font-family-audiowide);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  color: var(--woodsmoke);
}

.news-panel p {
  font-family: var(--font-family-helvetica-regular);
  font-size: 20px;
  color: var(--woodsmoke);
}

/* Privacy Policy Styles */
.privacy-content {
  padding: 20px;
  color: var(--white-mac);
  line-height: 1.6;
  font-family: var(--font-family-audiowide);
}

.privacy-content h1 {
  color: var(--white-mac);
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 2px solid var(--green-emerald);
  padding-bottom: 10px;
}

.privacy-content h2 {
  color: var(--green-emerald);
  font-size: 18px;
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 4px solid var(--green-emerald);
}

.privacy-content p {
  margin-bottom: 15px;
  font-size: 14px;
  text-align: justify;
}

.privacy-content br {
  line-height: 1.8;
}

@media screen and (min-width: 860px) {
  .privacy-content {
    max-width: 720px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 860px) {
  #small-company .centered-popover {
    width: 720px;
    max-width: calc(100% - 60px);
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
}