.sp,
.pc {
  width: 100%;
}

.pc {
  display: none;
}

body.active {
  overflow: hidden;
}

.SP-TOP {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
}

.SP-TOP .FV {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: calc(650 / 375 * 100vw);
}

.SP-TOP .FV img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .div {
  position: absolute;
  width: 100%;
  height: calc(650 / 375 * 100vw);
  left: 0;
}

.SP-TOP .text-wrapper-2 {
  position: absolute;
  top: calc(121 / 375 * 100vw);
  left: calc(16 / 375 * 100vw);
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-redcolor);
  font-size: calc(24 / 375 * 100vw);
  letter-spacing: 1px;
  line-height: calc(33.6 / 375 * 100vw);
}

.SP-TOP .header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0px calc(20 / 375 * 100vw);
  position: absolute;
  top: calc(10 / 375 * 100vw);
  left: 0;
  background-color: transparent;
}

.SP-TOP .header.header2 {
  position: fixed;
  width: 100%;
  z-index: 100;
  background: white;
  top: 0;
  left: 0;
  padding: calc(10 / 375 * 100vw);
}

.SP-TOP .image {
  position: relative;
  width: calc(84 / 375 * 100vw);
  object-fit: cover;
}

.SP-TOP .image .link {
  display: block;
  width: 100%;
}

.SP-TOP .image .link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .hamburger-menu {
  position: relative;
  width: calc(21.5 / 375 * 100vw);
  margin-right: calc(-0.75 / 375 * 100vw);
}

.SP-TOP .hamburger-menu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .overlap {
  position: absolute;
  width: calc(339 / 375 * 100vw);
  top: calc(472 / 375 * 100vw);
  left: calc(20 / 375 * 100vw);
}

.SP-TOP .news-strip {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  gap: calc(27 / 375 * 100vw);
  position: relative;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #ffffff;
}

.SP-TOP .frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(16 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
}

.SP-TOP .text-wrapper-3 {
  position: relative;
  align-self: stretch;
  margin-top: calc(-1 / 375 * 100vw);
  font-family: "Albert Sans-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-white);
  font-size: calc(14 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
}

.SP-TOP .text-wrapper-4 {
  margin-bottom: calc(-12 / 375 * 100vw);
  font-family: "Albert Sans-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-white);
  font-size: calc(14 / 375 * 100vw);
  position: relative;
  width: 100%;
  letter-spacing: 0;
  line-height: normal;
}

.SP-TOP .text-wrapper-5 {
  align-self: stretch;
  font-family: "IBM Plex Sans JP-Regular", Helvetica;
  font-weight: 400;
  color: var(--variable-collection-white);
  font-size: calc(12 / 375 * 100vw);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  position: relative;
  letter-spacing: 0;
  line-height: normal;
}

.SP-TOP .about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 / 375 * 100vw);
  padding: 64px 16px;
  padding: calc(64 / 375 * 100vw) calc(16 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP-TOP .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(60 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP-TOP .frame-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 / 375 * 100vw);
  position: relative;
  flex: 0 0 auto;
}

.SP-TOP .frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(40 / 375 * 100vw);
  position: relative;
  flex: 0 0 auto;
}

.SP-TOP .section-title {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.SP-TOP .text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: calc(-1 / 375 * 100vw);
  font-family: "Albert Sans-Bold", Helvetica;
  font-weight: 700;
  color: var(--variable-collection-redcolor);
  font-size: calc(24 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
}

.SP-TOP .text-wrapper-7 {
  position: relative;
  width: fit-content;
  font-family: "IBM Plex Sans JP-Regular", Helvetica;
  font-weight: 400;
  color: var(--variable-collection-textcolor);
  font-size: calc(14 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
}

.SP-TOP .text-wrapper-8 {
  position: relative;
  width: 100%;
  font-family: "IBM Plex Sans JP-Light", Helvetica;
  font-weight: 300;
  color: var(--variable-collection-textcolor);
  font-size: calc(16 / 375 * 100vw);
  letter-spacing: 0;
  line-height: calc(28.8 / 375 * 100vw);
}

.SP-TOP .mask-group {
  position: relative;
  width: calc(301.92 / 375 * 100vw);
}

.SP-TOP .mask-group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .rectangle.rectangle2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  object-fit: cover;
}

.SP-TOP .rectangle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  gap: calc(20 / 375 * 100vw);
  padding: 4px 4px 4px 28px;
  padding: calc(4 / 375 * 100vw) calc(4 / 375 * 100vw) calc(4 / 375 * 100vw)
    calc(20 / 375 * 100vw);
  background-color: var(--variable-collection-greencolor);
  box-shadow: 0px calc(4 / 375 * 100vw) calc(8 / 375 * 100vw) #00000040;
  height: calc(36 / 375 * 100vw);
  align-items: center;
  position: relative;
  border-radius: calc(100 / 375 * 100vw);
}

.SP-TOP .text-wrapper-9 {
  position: relative;
  width: fit-content;
  font-family: "Albert Sans-Bold", Helvetica;
  font-weight: 700;
  color: var(--variable-collection-white);
  font-size: calc(12 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.SP-TOP .arrow {
  width: calc(28 / 375 * 100vw);
  height: calc(28 / 375 * 100vw);
  position: relative;
  mix-blend-mode: lighten;
}

.SP-TOP .arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 / 375 * 100vw);
  padding: calc(64 / 375 * 100vw) calc(16 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--variable-collection-yellowcolor);
}

.SP-TOP .frame-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40 / 375 * 100vw);
  padding: calc(48 / 375 * 100vw) calc(16 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--variable-collection-white);
  box-shadow: 0px calc(4 / 375 * 100vw) calc(8 / 375 * 100vw) #00000040;
}

.SP-TOP .service-postcard {
  width: 100%;
}

.SP-TOP .service-postcard .link {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(20 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.SP-TOP .element-image {
  align-self: stretch;
  width: 100%;
  position: relative;
  border-radius: calc(4 / 375 * 100vw);
  overflow: hidden;
}

.SP-TOP .element-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .description {
  gap: calc(8 / 375 * 100vw);
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.SP-TOP .text-wrapper-10 {
  position: relative;
  align-self: stretch;
  margin-top: calc(-1 / 375 * 100vw);
  font-family: "IBM Plex Sans JP-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-browncolor);
  font-size: calc(14 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
}

.SP-TOP .text-wrapper-11 {
  position: relative;
  align-self: stretch;
  font-family: "IBM Plex Sans JP-Light", Helvetica;
  font-weight: 300;
  color: var(--variable-collection-textcolor);
  font-size: calc(12 / 375 * 100vw);
  letter-spacing: 0;
  line-height: calc(24 / 375 * 100vw);
}

.SP-TOP .works {
  display: flex;
  align-items: center;
  gap: calc(10 / 375 * 100vw);
  padding: 0px calc(31 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP-TOP .frame-6 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
  gap: calc(50 / 375 * 100vw);
  padding: calc(64 / 375 * 100vw) 0px;
  position: relative;
}

.SP-TOP .section-title-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP-TOP .frame-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(40 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP-TOP .service-postcard-2 {
  width: 100%;
}

.SP-TOP .service-postcard-2 .link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(20 / 375 * 100vw);
  position: relative;
  align-self: stretch;
}

.SP-TOP .element-image-3 {
  width: 100%;
  height: calc(232 / 375 * 100vw);
  box-shadow: 0px calc(4 / 375 * 100vw) calc(8 / 375 * 100vw) #00000040;
  background-image: url(./img/4-3-image.svg);
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  border-radius: calc(4 / 375 * 100vw);
  background-color: var(--variable-collection-white);
  overflow: hidden;
}
.SP-TOP .element-image-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .description-2 {
  width: 100%;
  gap: calc(8 / 375 * 100vw);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.SP-TOP .text-wrapper-12 {
  position: relative;
  width: 100%;
  margin-top: calc(-1 / 375 * 100vw);
  font-family: "IBM Plex Sans JP-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-browncolor);
  font-size: calc(14 / 375 * 100vw);
  letter-spacing: calc(-0.42 / 375 * 100vw);
  line-height: normal;
}

.SP-TOP .text-wrapper-13 {
  position: relative;
  align-self: stretch;
  font-family: "IBM Plex Sans JP-Light", Helvetica;
  font-weight: 300;
  color: var(--variable-collection-textcolor);
  font-size: calc(12 / 375 * 100vw);
  letter-spacing: calc(-0.84 / 375 * 100vw);
  line-height: calc(20 / 375 * 100vw);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.SP-TOP .blog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40 / 375 * 100vw);
  padding: calc(64 / 375 * 100vw) 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--variable-collection-yellowcolor);
}

.SP-TOP .frame-8 {
  display: flex;
  flex-direction: column;
  width: calc(344 / 375 * 100vw);
  align-items: center;
  gap: calc(70 / 375 * 100vw);
  position: relative;
  flex: 0 0 auto;
}

.SP-TOP .frame-9 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: calc(42 / 375 * 100vw);
  padding: calc(64 / 375 * 100vw) 0px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.SP-TOP .category-group {
  display: flex;
  flex-direction: column;
  height: calc(84 / 375 * 100vw);
  align-items: center;
  gap: calc(12 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
}

.SP-TOP .frame-10 {
  display: inline-flex;
  align-items: center;
  gap: calc(12 / 375 * 100vw);
  position: relative;
  flex: 0 0 auto;
}

.SP-TOP .div-wrapper {
  all: unset;
  box-sizing: border-box;
  display: flex;
  width: calc(120 / 375 * 100vw);
  justify-content: center;
  gap: calc(40 / 375 * 100vw);
  text-align: center;
  height: calc(36 / 375 * 100vw);
  align-items: center;
  position: relative;
  border: 1px solid;
  background-color: var(--variable-collection-white);
  border-color: var(--variable-collection-gray-bright-gray);
  border-radius: calc(100 / 375 * 100vw);
}

.SP-TOP .div-wrapper .text-wrapper-15 {
  color: var(--variable-collection-greencolor);
}
.SP-TOP .div-wrapper.active {
  background-color: var(--variable-collection-greencolor);
  border: none;
}

.SP-TOP .div-wrapper.active .text-wrapper-15 {
  color: var(--variable-collection-white);
}

.SP-TOP .text-wrapper-15 {
  position: relative;
  width: fit-content;
  font-family: "Albert Sans-Bold", Helvetica;
  font-weight: 700;
  font-size: calc(14 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
}

.SP-TOP .frame-11 {
  display: flex;
  flex-direction: column;
  width: calc(250 / 375 * 100vw);
  align-items: flex-start;
  gap: calc(20 / 375 * 100vw);
  position: relative;
  flex: 0 0 auto;
}

.SP-TOP .frame-12 {
  width: 100%;
  flex: 0 0 auto;
}

.SP-TOP .frame-12 .link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(20 / 375 * 100vw);
  padding: 0px 0px calc(16 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--variable-collection-browncolor2);
}

.SP-TOP .image-icon-wrapper {
  display: flex;
  width: calc(160 / 375 * 100vw);
  height: calc(120 / 375 * 100vw);
  align-items: center;
  justify-content: center;
  gap: calc(48 / 375 * 100vw);
  position: relative;
  background-color: var(--variable-collection-light-silver);
  border-radius: calc(4 / 375 * 100vw);
  overflow: hidden;
}

.SP-TOP .image-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}
.SP-TOP .description-4 {
  gap: calc(12 / 375 * 100vw);
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.SP-TOP .text-wrapper-18 {
  margin-top: calc(-1 / 375 * 100vw);
  font-family: "Albert Sans-Regular", Helvetica;
  font-weight: 400;
  color: var(--variable-collection-textcolor);
  font-size: calc(12 / 375 * 100vw);
  position: relative;
  width: calc(73 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
}

.SP-TOP .frame-13 {
  display: flex;
  height: calc(17 / 375 * 100vw);
  align-items: center;
  justify-content: center;
  gap: calc(10 / 375 * 100vw);
  padding: 0 calc(12 / 375 * 100vw);
  position: relative;
  background-color: #cccccc;
  border-radius: calc(100 / 375 * 100vw);
}

.SP-TOP .text-wrapper-19 {
  position: relative;
  font-family: "Albert Sans-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-white);
  font-size: calc(10 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
}

.SP-TOP .text-wrapper-20 {
  width: calc(251 / 375 * 100vw);
  margin-right: calc(-1 / 375 * 100vw);
  font-family: "IBM Plex Sans JP-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-browncolor);
  font-size: calc(14 / 375 * 100vw);
  position: relative;
  letter-spacing: 0;
  line-height: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.SP-TOP .contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 / 375 * 100vw);
  padding: calc(40 / 375 * 100vw) calc(23 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP-TOP .CTA-button {
  display: flex;
  width: calc(343 / 375 * 100vw);
  height: calc(180 / 375 * 100vw);
  align-items: center;
  justify-content: space-between;
  padding: calc(100 / 375 * 100vw) calc(8 / 375 * 100vw);
  position: relative;
  margin-left: calc(-7 / 375 * 100vw);
  margin-right: calc(-7 / 375 * 100vw);
  border-radius: calc(20 / 375 * 100vw);
  background-image: url(./img/CTA-button.png);
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
}

.SP-TOP .text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  margin-top: calc(-35 / 375 * 100vw);
  margin-bottom: calc(-35 / 375 * 100vw);
}

.SP-TOP .rectangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.SP-TOP .rectangle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .img {
  width: calc(48 / 375 * 100vw);
  height: calc(48 / 375 * 100vw);
  margin-top: calc(-34 / 375 * 100vw);
  margin-bottom: calc(-34 / 375 * 100vw);
  position: relative;
  mix-blend-mode: lighten;
}

.SP-TOP .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .footer {
  display: flex;
  align-items: center;
  gap: calc(10 / 375 * 100vw);
  padding: calc(52 / 375 * 100vw) calc(33 / 375 * 100vw) calc(20 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--variable-collection-greencolor);
}

.SP-TOP .frame-14 {
  display: flex;
  flex-direction: column;
  width: calc(311 / 375 * 100vw);
  align-items: center;
  gap: calc(100 / 375 * 100vw);
  position: relative;
  margin-right: calc(-2 / 375 * 100vw);
}

.SP-TOP .frame-15 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(16 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP-TOP .frame-16 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 / 375 * 100vw);
  padding: 0px 0px calc(40 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #ffffff;
}

.SP-TOP .a-DOOR {
  position: relative;
  width: calc(162 / 375 * 100vw);
  height: calc(77 / 375 * 100vw);
}

.SP-TOP .image-wrapper {
  display: block;
  width: 100%;
}

.SP-TOP .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
}

.SP-TOP .menu-nav-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 / 375 * 100vw);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP-TOP .text-wrapper-21 {
  position: relative;
  width: fit-content;
}

.SP-TOP .text-wrapper-21 .link {
  margin-top: -1px;
  font-family: "Albert Sans-Regular", Helvetica;
  font-weight: 400;
  color: var(--variable-collection-textcolor);
  font-size: calc(14 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
}

.SP-TOP .frame-17 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP-TOP .frame-18 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(4 / 375 * 100vw);
  position: relative;
  flex: 0 0 auto;
}

.SP-TOP .text-wrapper-23 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Albert Sans-Regular", Helvetica;
  font-weight: 400;
  color: var(--variable-collection-white);
  font-size: calc(12 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.SP-TOP .text-wrapper-23 .link {
  margin-top: -1px;
  font-family: "Albert Sans-Regular", Helvetica;
  font-weight: 400;
  color: var(--variable-collection-white);
  font-size: calc(12 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.SP-TOP .language {
  display: inline-flex;
  align-items: flex-start;
  gap: calc(12 / 375 * 100vw);
  position: relative;
  flex: 0 0 auto;
}

.SP-TOP .text-wrapper-25 {
  position: relative;
  width: fit-content;
}

.SP-TOP .text-wrapper-25 .link {
  margin-top: -1px;
  font-family: "Albert Sans-Bold", Helvetica;
  font-weight: 700;
  color: var(--variable-collection-textcolor);
  font-size: calc(12 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.SP-TOP .text-wrapper-25 .link.active {
  text-decoration: underline;
}

.SP-TOP .frame-19 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(4 / 375 * 100vw);
  position: relative;
  flex: 0 0 auto;
}

.SP-TOP .text-wrapper-27 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Albert Sans-Regular", Helvetica;
  font-weight: 400;
  color: var(--variable-collection-gray-ghost-white);
  font-size: calc(12 / 375 * 100vw);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}


/*********/
.fv_img img{
  width: 100%;
  padding-top: calc(100vw * 0.07);
}


.fv_movie video{
 width: 100%;
}

.slick-dots li button:before{
  color:#D1ABAA !important;
}

.slick-dots li{
  width: 0.625rem !important;
  height: 0.625rem !important;
}

.service_gallery img{
  width:100%;
  padding: 0.5rem;
}

.service_cath{
  margin: 1.5rem 0;
}

.service_gallery{
  margin: 3rem 0;
}

.top_message{
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  /*background-image: url('../img/service/point_bgimg.jpg');*/
  background-image: url('../img/common/bg_p3.jpg');
  padding: calc(100 / 1440 * 100vw) calc(200 / 1440 * 100vw);
}

.msg_area img{
  width: 100%;
}

.msg_area{
  background-color: #f1ecea;
  box-shadow: 0px calc(4 / 1440 * 100vw) calc(4 / 1440 * 100vw) #00000040;
  border-radius: 10px;
  background-size: cover;
    background-position: center;
  text-shadow: 1px 2px 0px #ffffff;
  padding: 1.5rem;
  

}

.d_msg_hr{
 color: #ffffff;
}

.d_msg{
  line-height: 1.5;
  color: #392809;
  font-family: "Shippori Mincho", serif;
  font-size: 0.875rem;
  font-weight: bold;
}

.top_service{
  padding-bottom:calc(100 / 1440 * 100vw);
}

.top_blog{
  padding:  calc(100 / 1440 * 100vw) 0;
}

.sub_moji{
  font-size:1rem;
  padding-top:0.5rem;
}

.blog_area{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3.75rem 1.25rem ;
  padding-top: 3.75rem;
}

.blog_area img{
  width: 100%;
}

.blog_content figure{
  width: 100%; /* 親要素の幅いっぱいに広げる */
  position: relative;
  padding-top: 75%; /* 縦3:横4の比率を維持するための高さ */
  overflow: hidden;
}

.blog_content figure img {
  position: absolute; /* 親要素を基準に絶対配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をコンテナに合わせてトリミング */
}


.blog_content a{
  color: #392809;
}

.blog_titlearea{
  font-family: "Shippori Mincho", serif;
  font-weight: bold;
  padding: 0.75rem 0;
}

.top_blog_title{
  font-size: 1rem;
}
.top_blog_date,
.b_text_p{
  font-size: 0.75rem;
}

.d_msg{
 font-size:1.5rem;
}

.fv_img.fv_movie img{
 padding-top: 0;
}

.dm_img{
 position: relative;
}

.dm_name{
 position: absolute;
 bottom:1.5rem;
 left: 50%;
 transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
 color: #4d3c22;
 font-size: 1rem;
 font-weight: bold;
 font-family: "Shippori Mincho", serif;
 white-space: nowrap;
 text-align: center;
}

@media (min-width: 769px) {
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
  .top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--variable-collection-white);
    overflow: hidden;
  }

  .top .language {
    display: inline-flex;
    align-items: center;
    gap: calc(12 / 1440 * 100vw);
    position: relative;
    flex: 0 0 auto;
  }

  .top .header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: calc(12 / 1440 * 100vw) calc(40 / 1440 * 100vw);
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    transition: position 0.3s ease;
  }

  .top .header2 {
   /*background-image: url('../img/service/point_bgimg.jpg');*/
   background-image: url('../img/common/bg_p2.jpg');

    position: fixed;
  }

  .top .img-wrapper {
    display: block;
    width: calc(162 / 1440 * 100vw);
  }

  .top .img-wrapper img {
    height: calc(100vw * 0.08);
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(2px 2px 0px #ffffff);
  }

  .top .text-wrapper-23 {
    position: relative;
    width: fit-content;
    font-size: calc(14 / 1440 * 100vw);
  }

  .top .text-wrapper-23 .link {
    font-family: "Albert Sans-Regular", Helvetica;
    /*font-weight: 400;
    color: #392809;*/
    font-weight: bold;
    color: #fef9f7;
    letter-spacing: 0;
    line-height: normal;
    transition: 0.4s all;
  }

  .top .text-wrapper-23 .link:hover {
    opacity: 0.6;
  }

  .top .headerbutton {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 40px;
    gap: calc(40 / 1440 * 100vw);
    padding: 0.5rem 1rem;
    position: relative;
    /*
    background: linear-gradient(-20deg, #DBB400 0%, #EDD773 50%, #DBB400 100%);
    border-radius: 100px;
    */
    border: 2px solid #815a2b;
        /*border-image: linear-gradient(to right, #DBB400, #EDD773) 1;*/
        background-color: #fef9f7;

    z-index: 1;
    transition: .3s;
  }

  .top .headerbutton::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #815a2b;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease .3s;
}

.top .headerbutton:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}


  .top .headerbutton .text-wrapper {
    position: relative;
    width: fit-content;
    color: #392809;
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: calc(14 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
  }

  .top .headerbutton .text-wrapper:hover {
    color: #ffffff;
    display: inline-block;
  }

  .top .headerbutton .arrow {
    position: relative;
    width: calc(32 / 1440 * 100vw);
    height: calc(32 / 1440 * 100vw);
    transition: 0.4s all;
    position: relative;
    left: 0;
  }

  .top .headerbutton:hover .arrow {
    left: calc(5 / 1440 * 100vw);
  }

  .top .headerbutton .arrow img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
  }

  .top .text-wrapper-25 {
    position: relative;
    width: fit-content;
    margin-top: calc(-1 / 1440 * 100vw);
  }

  .top .text-wrapper-25 .link {
    color: var(--variable-collection-greencolor);
    font-family: "Albert Sans-Regular", Helvetica;
    font-weight: 400;
    font-size: calc(12 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    transition: 0.4s all;
  }

  .top .text-wrapper-25.active .link {
    font-family: "Albert Sans-Bold", Helvetica;
    font-weight: 700;
    color: var(--variable-collection-greencolor);
    font-size: calc(12 / 1440 * 100vw);
    text-decoration: underline;
    pointer-events: none;
  }

  .top .text-wrapper-25 .link:hover {
    opacity: 0.6;
  }

  .top .hero {
    display: flex;
    height: calc(580 / 1440 * 100vw);
    align-items: center;
    gap: calc(100 / 1440 * 100vw);
    padding: calc(80 / 1440 * 100vw) calc(100 / 1440 * 100vw);
    position: relative;
    align-self: stretch;
    width: 100%;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
  }

  .top .hero .fvimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .top .hero .fvimg img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
  }

  .top .frame {
    display: flex;
    height: calc(440 / 1440 * 100vw);
    align-items: center;
    gap: calc(100 / 1440 * 100vw);
    position: relative;
    flex: 1;
    flex-grow: 1;
    margin-top: calc(-10 / 1440 * 100vw);
    margin-bottom: calc(-10 / 1440 * 100vw);
  }

  .top .text-wrapper {
    position: relative;
    width: fit-content;
    font-family: "IBM Plex Sans JP-Bold", Helvetica;
    font-weight: 700;
    color: #9d2125;
    font-size: calc(40 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
  }

  .top .news-wrapper {
    display: flex;
    flex-direction: column;
    width: calc(583 / 1440 * 100vw);
    height: calc(400 / 1440 * 100vw);
    align-items: flex-start;
    justify-content: flex-end;
    gap: calc(10 / 1440 * 100vw);
    position: relative;
  }

  .top .news {
    display: flex;
    flex-direction: column;
    height: calc(68 / 1440 * 100vw);
    align-items: flex-start;
    justify-content: flex-end;
    gap: calc(12 / 1440 * 100vw);
    padding: calc(20 / 1440 * 100vw) 0px 0px;
    position: relative;
    align-self: stretch;
    width: 100%;
    border-top-width: 0.7px;
    border-top-style: solid;
    border-color: var(--variable-collection-white);
    transition: 0.4s all;
  }

  .top .news:hover {
    opacity: 0.6;
  }

  .top .div {
    position: relative;
    align-self: stretch;
    margin-top: calc(-9.7 / 1440 * 100vw);
    font-family: "Albert Sans-SemiBold", Helvetica;
    font-weight: 600;
    color: var(--variable-collection-white);
    font-size: calc(14 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
  }

  .top .news-strip {
    display: flex;
    align-items: center;
    gap: calc(27 / 1440 * 100vw);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }

  .top .text-wrapper-2 {
    font-family: "Albert Sans-SemiBold", Helvetica;
    font-weight: 600;
    color: var(--variable-collection-white);
    position: relative;
    width: calc(73 / 1440 * 100vw);
    height: calc(17 / 1440 * 100vw);
    font-size: calc(14 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
  }

  .top .text-wrapper-3 {
    flex: 1;
    font-family: "IBM Plex Sans JP-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-white);
    font-size: calc(14 / 1440 * 100vw);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    position: relative;
    letter-spacing: 0;
    line-height: normal;
  }

  .top .about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(40 / 1440 * 100vw);
    padding: calc(100 / 1440 * 100vw) calc(145 / 1440 * 100vw);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--variable-collection-white);
  }

  .top .frame-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(40 / 1440 * 100vw);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }

  .top .div-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }

  .top .text-wrapper-4 {
    position: relative;
    width: fit-content;
    margin-top: calc(-1 / 1440 * 100vw);
    font-family: "Albert Sans-Bold", Helvetica;
    font-weight: 700;
    color: var(--variable-collection-redcolor);
    font-size: calc(40 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }

  .top .text-wrapper-5 {
    position: relative;
    width: fit-content;
    font-family: "IBM Plex Sans JP-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-textcolor);
    font-size: calc(14 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
  }

  .top .mask-group {
    position: absolute;
    width: calc(545 / 1440 * 100vw);
    top: calc(152 / 1440 * 100vw);
    left: 0;
  }

  .top .mask-group img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
  }

  .top .content {
    height: calc(337 / 1440 * 100vw);
    align-items: center;
    gap: calc(100 / 1440 * 100vw);
    display: flex;
    position: relative;
    align-self: stretch;
    width: 100%;
  }

  .top .frame-3 {
    display: flex;
    flex-direction: column;
    height: calc(355 / 1440 * 100vw);
    align-items: flex-start;
    gap: calc(80 / 1440 * 100vw);
    position: relative;
    flex: 1;
    flex-grow: 1;
    margin-top: calc(-9 / 1440 * 100vw);
    margin-bottom: calc(-9 / 1440 * 100vw);
  }

  .top .text-wrapper-6 {
    position: relative;
    width: calc(540 / 1440 * 100vw);
    height: calc(200 / 1440 * 100vw);
    margin-top: calc(-1 / 1440 * 100vw);
    font-family: "IBM Plex Sans JP-Light", Helvetica;
    font-weight: 300;
    color: var(--variable-collection-textcolor);
    font-size: calc(16 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
  }

  .top .button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: calc(40 / 1440 * 100vw);
    padding: 4px 4px 4px 28px;
    padding: calc(4 / 1440 * 100vw) calc(4 / 1440 * 100vw)
      calc(4 / 1440 * 100vw) calc(28 / 1440 * 100vw);
    position: relative;
    flex: 0 0 auto;
    background-color: var(--variable-collection-greencolor);
    border-radius: calc(100 / 1440 * 100vw);
    box-shadow: 0px calc(4 / 1440 * 100vw) calc(4 / 1440 * 100vw) #00000040;
  }

  .top .text-wrapper-7 {
    position: relative;
    width: fit-content;
    font-family: "Albert Sans-Bold", Helvetica;
    font-weight: 700;
    color: var(--variable-collection-white);
    font-size: calc(14 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
  }

  .top .img {
    display: block;
    width: calc(32 / 1440 * 100vw);
    height: calc(32 / 1440 * 100vw);
    position: relative;
    transition: 0.4s all;
    left: 0;
  }

  .top .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
  }

  .top .button:hover .img {
    left: calc(5 / 1440 * 100vw);
  }

  .top .element-image {
    display: flex;
    width: calc(547 / 1440 * 100vw);
    border-radius: calc(4 / 1440 * 100vw);
    position: absolute;
    top: -94px;
    top: calc(-94 / 1440 * 100vw);
    left: calc(603 / 1440 * 100vw);
  }

  .top .element-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
  }

  .top .service {
    gap: calc(40 / 1440 * 100vw);
    padding: calc(100 / 1440 * 100vw) calc(200 / 1440 * 100vw);
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--variable-collection-yellowcolor);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .top .content-2 {
    flex-direction: column;
    align-items: center;
    gap: calc(40 / 1440 * 100vw);
    padding: calc(40 / 1440 * 100vw);
    flex: 0 0 auto;
    background-color: #ffffff;
    border-radius: calc(4 / 1440 * 100vw);
    box-shadow: 0px calc(4 / 1440 * 100vw) calc(14 / 1440 * 100vw) #00000040;
    display: flex;
    position: relative;
    align-self: stretch;
    width: 100%;
  }

  .top .postcard-group {
    display: flex;
    align-items: flex-start;
    gap: calc(40 / 1440 * 100vw);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }

  .top .service-postcard {
    gap: calc(20 / 1440 * 100vw);
    flex: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .top .element-image-2 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: calc(220 / 1440 * 100vw);
    border-radius: calc(4 / 1440 * 100vw);
    overflow: hidden;
  }

  .top .element-image-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
  }

  .top .description {
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(12 / 1440 * 100vw);
    position: relative;
  }

  .top .text-wrapper-8 {
    position: relative;
    align-self: stretch;
    margin-top: calc(-1 / 1440 * 100vw);
    font-family: "IBM Plex Sans JP-SemiBold", Helvetica;
    font-weight: 600;
    color: var(--variable-collection-browncolor);
    font-size: calc(16 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
  }

  .top .text-wrapper-9 {
    position: relative;
    align-self: stretch;
    font-family: "IBM Plex Sans JP-Light", Helvetica;
    font-weight: 300;
    color: var(--variable-collection-textcolor);
    font-size: calc(14 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: calc(24 / 1440 * 100vw);
  }

  .top .service-2 {
    gap: calc(40 / 1440 * 100vw);
    padding: calc(100 / 1440 * 100vw) calc(200 / 1440 * 100vw);
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--variable-collection-gray-ghost-white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .top .content-3 {
    flex-direction: column;
    align-items: center;
    gap: calc(40 / 1440 * 100vw);
    padding: calc(40 / 1440 * 100vw);
    flex: 0 0 auto;
    background-color: var(--variable-collection-gray-ghost-white);
    border-radius: calc(4 / 1440 * 100vw);
    display: flex;
    position: relative;
    align-self: stretch;
    width: 100%;
  }

  .top .element-image-4 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: calc(345 / 1440 * 100vw);
    border-radius: calc(4 / 1440 * 100vw);
    box-shadow: 0px calc(4 / 1440 * 100vw) calc(8 / 1440 * 100vw) #00000040;
    overflow: hidden;
    transition: 0.4s all;
  }

  .top .element-image-4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
  }

  .top .text-wrapper-10 {
    position: relative;
    align-self: stretch;
    margin-top: calc(-1 / 1440 * 100vw);
    font-family: "IBM Plex Sans JP-SemiBold", Helvetica;
    font-weight: 600;
    color: var(--variable-collection-browncolor);
    font-size: calc(16 / 1440 * 100vw);
    letter-spacing: calc(-0.48 / 1440 * 100vw);
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .top .text-wrapper-11 {
    position: relative;
    align-self: stretch;
    font-family: "IBM Plex Sans JP-Light", Helvetica;
    font-weight: 300;
    color: var(--variable-collection-textcolor);
    font-size: calc(14 / 1440 * 100vw);
    letter-spacing: calc(-0.98 / 1440 * 100vw);
    line-height: calc(24 / 1440 * 100vw);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .top .service-postcard .link {
    gap: calc(20 / 1440 * 100vw);
    flex: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .top .service-postcard .link:hover .element-image-4 {
    box-shadow: 0px calc(6 / 1440 * 100vw) calc(8 / 1440 * 100vw) #00000040;
  }

  .top .blog-news {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40 / 1440 * 100vw);
    padding: calc(100 / 1440 * 100vw) calc(200 / 1440 * 100vw);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: #e9e966;
  }

  .top .content-4 {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(20 / 1440 * 100vw);
    padding: calc(40 / 1440 * 100vw);
    flex: 0 0 auto;
    background-color: var(--variable-collection-white);
    border-radius: 4px;
    border-radius: calc(4 / 1440 * 100vw);
    box-shadow: 0px calc(4 / 1440 * 100vw) calc(14 / 1440 * 100vw) #00000040;
    display: flex;
    position: relative;
    align-self: stretch;
    width: 100%;
  }

  .top .category-group {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: calc(12 / 1440 * 100vw);
    position: relative;
    flex: 0 0 auto;
  }

  .top .div-wrapper {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: calc(140 / 1440 * 100vw);
    height: calc(40 / 1440 * 100vw);
    align-items: center;
    justify-content: center;
    gap: calc(40 / 1440 * 100vw);
    padding: 0px calc(28 / 1440 * 100vw);
    position: relative;
    border-radius: calc(100 / 1440 * 100vw);
  }

  .top .button-2 {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: calc(140 / 1440 * 100vw);
    height: calc(40 / 1440 * 100vw);
    align-items: center;
    justify-content: center;
    gap: calc(40 / 1440 * 100vw);
    padding: 0px calc(28 / 1440 * 100vw);
    position: relative;
    background-color: var(--variable-collection-white);
    border-radius: calc(100 / 1440 * 100vw);
  }

  .top .text-wrapper-13 {
    width: fit-content;
    font-family: "Albert Sans-Bold", Helvetica;
    font-weight: 700;
    font-size: calc(14 / 1440 * 100vw);
    position: relative;
    letter-spacing: 0;
    line-height: normal;
  }

  .top .button-3 {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    height: calc(40 / 1440 * 100vw);
    align-items: center;
    gap: calc(40 / 1440 * 100vw);
    padding: 0px calc(28 / 1440 * 100vw);
    position: relative;
    flex: 0 0 auto;
    border-radius: calc(100 / 1440 * 100vw);
  }

  .top .newsbutton {
    background-color: var(--variable-collection-white);
    border: 1px solid;
    border-color: var(--variable-collection-gray-bright-gray);
    cursor: pointer;
  }

  .top .newsbutton .text-wrapper-13 {
    color: var(--variable-collection-greencolor);
  }

  .top .newsbutton.active {
    background-color: var(--variable-collection-greencolor);
    border: none;
    pointer-events: none;
  }

  .top .newsbutton.active .text-wrapper-13 {
    color: var(--variable-collection-white);
  }

  .top .blog-news-postcard {
    width: 100%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: var(--variable-collection-browncolor2);
  }

  .top .blog-news-postcard .link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: calc(20 / 1440 * 100vw);
    padding: calc(20 / 1440 * 100vw) 0px;
    position: relative;
    align-self: stretch;
    flex: 0 0 auto;
  }

  .top .image-icon-wrapper {
    display: flex;
    width: calc(160 / 1440 * 100vw);
    height: calc(120 / 1440 * 100vw);
    align-items: center;
    justify-content: center;
    gap: calc(48 / 1440 * 100vw);
    position: relative;
    background-color: var(--variable-collection-light-silver);
    border-radius: calc(4 / 1440 * 100vw);
    overflow: hidden;
  }

  .top .image-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    transition: 0.4s all;
  }

  .top .blog-news-postcard .link:hover .image-icon-wrapper img {
    transform: scale(1.1);
  }

  .top .description-2 {
    flex: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(12 / 1440 * 100vw);
    position: relative;
  }

  .top .frame-4 {
    display: inline-flex;
    align-items: center;
    gap: calc(12 / 1440 * 100vw);
    position: relative;
    flex: 0 0 auto;
  }

  .top .text-wrapper-14 {
    font-family: "Albert Sans-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-textcolor);
    position: relative;
    font-size: calc(14 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
  }

  .top .frame-5 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 / 1440 * 100vw);
    padding: calc(4 / 1440 * 100vw) calc(12 / 1440 * 100vw);
    position: relative;
    flex: 0 0 auto;
    background-color: #cccccc;
    border-radius: calc(100 / 1440 * 100vw);
  }

  .top .text-wrapper-15 {
    position: relative;
    width: fit-content;
    margin-top: calc(-1 / 1440 * 100vw);
    font-family: "Albert Sans-SemiBold", Helvetica;
    font-weight: 600;
    color: var(--variable-collection-white);
    font-size: calc(12 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }

  .top .text-wrapper-16 {
    align-self: stretch;
    font-family: "IBM Plex Sans JP-SemiBold", Helvetica;
    font-weight: 600;
    color: var(--variable-collection-browncolor);
    font-size: calc(16 / 1440 * 100vw);
    position: relative;
    letter-spacing: 0;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .top .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40 / 1440 * 100vw);
    padding: calc(60 / 1440 * 100vw) calc(200 / 1440 * 100vw);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--variable-collection-gray-ghost-white);
    border: 1px solid;
    border-color: var(--variable-collection-browncolor2);
  }

  .top .frame-6 {
    display: flex;
    flex-direction: column;
    width: calc(1040 / 1440 * 100vw);
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
    border-radius: calc(20 / 1440 * 100vw);
    box-shadow: 0px calc(4 / 1440 * 100vw) calc(8 / 1440 * 100vw) #00000040;
    overflow: hidden;
  }

  .top .rectangle {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: calc(269 / 1440 * 100vw);
    object-fit: cover;
  }

  .top .rectangle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
  }

  .top .CTA-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(100 / 1440 * 100vw) calc(60 / 1440 * 100vw);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    margin-top: calc(-301 / 1440 * 100vw);
    border-radius: calc(20 / 1440 * 100vw);
  }

  .top .text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
  }

  .top .arrow-2 {
    width: calc(69 / 1440 * 100vw);
    height: calc(69 / 1440 * 100vw);
    position: relative;
    mix-blend-mode: lighten;
    left: 0;
    transition: 0.4s all;
  }

  .top .arrow-2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
  }

  .top .frame-6:hover .arrow-2 {
    left: calc(10 / 1440 * 100vw);
  }

  .top .footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(20 / 1440 * 100vw);
    padding: calc(60 / 1440 * 100vw) calc(200 / 1440 * 100vw);
    position: relative;
    align-self: stretch;
    width: 100%;
    background-color: var(--variable-collection-greencolor);
  }

  .top .menu-items {
    display: flex;
    width: calc(1040 / 1440 * 100vw);
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px calc(20 / 1440 * 100vw);
    position: relative;
    flex: 0 0 auto;
    border-bottom-width: 0.5px;
    border-bottom-style: solid;
    border-color: var(--variable-collection-gray-ghost-white);
  }

  .top .a-DOOR {
    position: relative;
    width: calc(162 / 1440 * 100vw);
    height: calc(77 / 1440 * 100vw);
  }

  .top .image-wrapper {
    display: block;
    width: 100%;
    transition: 0.4s all;
  }

  .top .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
  }

  .top .image-wrapper:hover {
    opacity: 0.6;
  }

  .top .div-3 {
    display: inline-flex;
    align-items: center;
    gap: calc(40 / 1440 * 100vw);
    position: relative;
    flex: 0 0 auto;
  }

  .top .text-wrapper-17 {
    position: relative;
    width: fit-content;
    margin-top: calc(-1 / 1440 * 100vw);
  }

  .top .text-wrapper-17 .link {
    font-family: "Albert Sans-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-textcolor);
    font-size: calc(14 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
    transition: 0.4s all;
  }

  .top .text-wrapper-17 .link:hover {
    opacity: 0.6;
  }

  .top .policies {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }

  .top .frame-7 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(4 / 1440 * 100vw);
    position: relative;
    flex: 0 0 auto;
  }

  .top .text-wrapper-18 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    margin-top: calc(-1 / 1440 * 100vw);
  }

  .top .text-wrapper-18 .link {
    font-family: "Albert Sans-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-white);
    font-size: calc(12 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    transition: 0.4s all;
  }

  .top .text-wrapper-18 .link:hover {
    opacity: 0.6;
  }

  .top .text-wrapper-19 {
    position: relative;
    width: fit-content;
    font-family: "Albert Sans-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-white);
    font-size: calc(12 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }

  .top .frame-8 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(4 / 1440 * 100vw);
    position: relative;
    flex: 0 0 auto;
  }

  .top .text-wrapper-20 {
    position: relative;
    width: fit-content;
    margin-top: calc(-1 / 1440 * 100vw);
    font-family: "Albert Sans-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-gray-ghost-white);
    font-size: calc(12 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }

  .top .text-wrapper-21 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    margin-top: calc(-1 / 1440 * 100vw);
  }

  .top .text-wrapper-21 .link {
    font-family: "Albert Sans-Bold", Helvetica;
    font-weight: 700;
    color: var(--variable-collection-textcolor);
    font-size: calc(12 / 1440 * 100vw);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    transition: 0.4s all;
  }

  .top .text-wrapper-21.active .link {
    pointer-events: none;
    text-decoration: underline;
  }

  .top .text-wrapper-21 .link:hover {
    opacity: 0.6;
  }

  /*******/
   .fv_movie{
 padding-top: calc(100vw * 0.09);
 }
 .blog_titlearea{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
 }

 .d_m_flex{
  display: flex;
  align-items: center;
 }

 .d_msg{
  padding:1.5rem;
}




}

@media (max-width: 768px) {


 .service_gallery.sp {
    padding: 0 12px;
 }


.top_message {
    padding: 4rem 1rem;
 }
 .move_btn {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 2rem;
 }
.msg_area{
 padding: 1.5rem;
}
 .top_blog {
    padding: 2.5rem 0 ;
 }
 .blog_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.25rem;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
 }
 .service_cath {
    margin: 0.875rem 0;
 }

 .sub_moji {
    font-size: 0.68rem;
    padding-top: 0;
 }
 .top_blog_date, .b_text_p {
    font-size: 0.6875rem;
 }

 .blog_titlearea {
    padding: 0.4rem 0;
 }

 /**
 .fv_img.fv_movie {
    height: 540px;
 }**/

  .fv_movie video {
      width: 100vw;
      height: 100%;
      object-fit: cover;
      object-position: center;
  }

  .d_msg {
    padding-bottom: 1.5rem;
 }
}