/* =========================================
  0. Root Variables
========================================= */
:root {
  --border: #efefef;
  --image-bg: #fdfdfd;
  --sub-yellow: #f5d566;
  --sub-orange: #f5a366;
  --sub-mint: #66f5df;
  --sub-sky: #56c7f5;
  --primary-main: #665df5;
  --primary-light: #8a85f9;
  --primary-dark: #4a48c6;
  --text-dark: #161617;
  --text-main: #58585d;
  --gray-main: #f2f2f2;
  --gray-light: #e6e6e6;

  --font-jp: "Noto Sans JP", sans-serif;
  --font-mulish: "Mulish", sans-serif;

  --s4-10: clamp(0.25rem, 0.984vw + 0.01rem, 0.625rem);
  --s4-12: clamp(0.25rem, 1.311vw + 0.01rem, 0.75rem);

  --s10-12: clamp(0.625rem, 0.328vw + 0.545rem, 0.75rem);
  --s10-16: clamp(0.625rem, 0.984vw + 0.385rem, 1rem);

  --s12-16: clamp(0.75rem, 0.656vw + 0.59rem, 1rem);

  --s13-20: clamp(0.813rem, 1.148vw + 0.533rem, 1.25rem);

  --s14-16: clamp(0.875rem, 0.328vw + 0.795rem, 1rem);
  --s14-24: clamp(0.875rem, 1.639vw + 0.475rem, 1.5rem);

  --s16-18: clamp(1rem, 0.328vw + 0.92rem, 1.125rem);
  --s16-20: clamp(1rem, 0.381vw + 0.907rem, 1.25rem);
  --s16-22: clamp(1rem, 0.984vw + 0.76rem, 1.375rem);
  --s16-24: clamp(1rem, 1.311vw + 0.68rem, 1.5rem);
  --s16-32: clamp(1rem, 2.623vw + 0.361rem, 2rem);
  --s16-40: clamp(1rem, 3.934vw + 0.041rem, 2.5rem);

  --s18-20: clamp(1.125rem, 0.328vw + 1.045rem, 1.25rem);
  --s18-24: clamp(1.125rem, 0.984vw + 0.885rem, 1.5rem);
  --s18-28: clamp(1.125rem, 1.639vw + 0.725rem, 1.75rem);

  --s20-40: clamp(1.25rem, 3.279vw + 0.451rem, 2.5rem);

  --s22-28: clamp(1.375rem, 0.984vw + 1.135rem, 1.75rem);
  --s22-40: clamp(1.375rem, 2.951vw + 0.656rem, 2.5rem);
  
  --s24-48: clamp(1.5rem, 3.934vw + 0.541rem, 3rem);
  
  --s32-60: clamp(2rem, 4.59vw + 0.881rem, 3.75rem);

  --s36-54: clamp(2.25rem, 2.951vw + 1.531rem, 3.375rem);

  --s40-50: clamp(2.5rem, 1.639vw + 2.1rem, 3.125rem);

  --s48-52: clamp(3rem, 0.656vw + 2.84rem, 3.25rem);
  --s48-120: clamp(3rem, 11.803vw + 0.123rem, 7.5rem);

  --s60-88: clamp(3.75rem, 4.59vw + 2.631rem, 5.5rem);
  --s60-120: clamp(3.75rem, 9.836vw + 1.352rem, 7.5rem);

  --s80-160: clamp(5rem, 13.115vw + 1.803rem, 10rem);

  --s120-160: clamp(7.5rem, 6.557vw + 5.901rem, 10rem);
  
  --shadow-main: 5px 5px 15px 0 rgba(0, 0, 0, 0.10);
  
  --transition: opacity .2s cubic-bezier(.785,.135,.15,.86);
  --opacity: 0.7;

  --s1-bg1: clamp(33.313rem, 49.619vw + 21.218rem, 65.875rem);
  --s1-bg2: clamp(7.375rem, 13.524vw + 4.079rem, 16.25rem);
  --s1-bg3: clamp(6.188rem, 11.048vw + 3.495rem, 13.438rem);

}

body {
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.page-loaded {
  opacity: 1;
}

/* =========================================
  1. Base
========================================= */
body {
  font-family: var(--font-jp);
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  color: var(--text-main);
}

form input,
form textarea {
  display: block;
  margin-bottom: 1rem;
  width: 100%; 
}

body img {
    max-width: 100%;
    height: auto;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =========================================
  2. Font Styles
========================================= */
p {
    margin: 0;
}

h1, h2, h3 {
    font-family: var(--font-mulish);
    font-weight: 1000;
    margin-block: var(--m-block, 0);
}
h1 {
    font-size: var(--s24-48);
    line-height: 1.5;
    color: var(--text-dark);
}
.s1-title-group>p {
    font-size: var(--s18-24);
    font-weight: 700;
    color: var(--text-main);
}
@media screen and (max-width: 999px) {
    .s1-title-group>p {
        line-height: 1.9;
    }
}

h2 {
    font-size: var(--s18-28);
    color: var(--primary-main);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s12-16);
}
h2:before {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background: var(--primary-main);
    border-radius: 30px;
}
.s2-title-group>p {
    font-size: var(--s16-24);
    line-height: 2;
}

@media screen and (max-width: 999px) {
    h2:before {
        width: 15px;
        height: 1.2px;
    }
}

h3 {
    font-size: var(--s22-40);
    color: var(--text-dark);
    line-height: 1.5;
}
.section-header-group>p {
    font-size: var(--s14-24);
    font-weight: 700;
}
.section-header-group h2+h3 {
    margin-block-start: var(--s16-32);
}
.section-header-group h3+p {
    margin-block-start: var(--s12-16);
}

/* =========================================
  3. Header Layout
========================================= */
.site-header {
    box-sizing: border-box;
    position: fixed;
    padding: var(--s16-20);
    width: 100vw;
    top: 0;
    z-index: 5000;
}

.header-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-nav {
    display: flex;
    align-items: center;
    padding-block: var(--s10-16);
    padding-inline: var(--s16-32);
    background-color: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow-main);
    gap: var(--s16-40);
    font-family: var(--font-mulish);
    font-weight: 700;
}
.header-logo>a {
    display: flex;
}
@media screen and (min-width: 1000px) {
  .site-header {
    padding-inline-start: 50px;
  }
}

/* =========================================
  4. Dropdown (Menu & Language)
========================================= */
.lang-btn,
.menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  
}
.lang-dropdown img {
    min-width: 33px;
}

@media screen and (min-width: 1000px) {
  .lang-btn img, .lang-dropdown img {
      min-width: 40px;
  }
}

.lang-selector, .menu-selector {
    position: relative;
    display: flex;
    font-size: var(--s16-20);
    align-items: center;
    gap: var(--s4-10);
}

.lang-selector:after,
.menu-selector:after {
    content: '';
    display: block;
    width: var(--s12-16);
    height: var(--s12-16);
    background-image: url(./images/icon-arrow-down.svg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 5px;
}

.lang-dropdown, .menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    list-style: none;
    margin: 0;
    display: none;
    z-index: 200;
    padding-block: var(--s12-16);
    padding-inline: var(--s16-22);
    border-radius: 8px;
    box-shadow: var(--shadow-main);
}

.lang-dropdown li,
.menu-dropdown li {
  cursor: pointer;
  white-space: nowrap;
}
.lang-dropdown li+li,
.menu-dropdown li+li {
    margin-top: var(--s12-16);
}

.hover-open>span {
    transition: var(--transition);
}
.hover-open:hover>span {
    opacity: var(--opacity);
}

.lang-dropdown, .menu-dropdown {
  display: none;
}

.lang-selector.open .lang-dropdown,
.menu-selector.open .menu-dropdown {
  display: block;
}

.lang-dropdown a, .menu-dropdown a {
    text-decoration: none;
    color: var(--text-main);
    transition: var(--transition);
    font-weight: 700;
}
.lang-dropdown a:hover, .menu-dropdown a:hover {
    opacity: var(--opacity);
}

/* =========================================
  5. Contact Button
========================================= */
.contact-btn {
    font-size: var(--s16-20);
    background: var(--primary-main);
    padding: 8px 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    display: flex;
    transition: var(--transition);
    text-align: center;
}

.contact-btn:hover {
  opacity: var(--opacity);
}
/* =========================================
  6. Client Swiper
========================================= */
.swiper.client-swiper {
    padding-inline: 2rem;
    padding-block-end: var(--s48-120);
}

.client-swiper .swiper-slide {
    box-sizing: border-box;
    opacity: .2;
    transition: opacity .3s ease;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-main);
}

@media screen and (min-width: 768px) {
  .client-swiper .swiper-slide {
    transform: translateX(min(-150px, -10.4vw));
  }
}
@media screen and (min-width: 1600px) {
  .client-swiper .swiper-slide {
    transform: translateX(-150px);
  }
}

.client-swiper .swiper-slide-active {
  opacity: 1;
  z-index: 2;
}

.client-image {
    display: flex;
}

.client-image img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 0.523;
}

.client-meta {
    flex: 1;
    background: #fff;
    padding-block: var(--s16-22);
    padding-inline: var(--s20-40);
    display: flex;
    flex-flow: column wrap;
    gap: 0;
    align-items: flex-start;
}

.client-meta>ul {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.client-meta>ul>li {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    border-radius: .25rem;
    border: 1px solid var(--border);
    background: rgba(102, 93, 245, 0.20);
    font-size: var(--s10-12);
    font-weight: 700;
    color: var(--text-dark);
    position: relative;
}

.client-meta>ul>li:before {
    --tag-size: clamp(0.75rem, 0.984vw + 0.51rem, 1.125rem);
    content: '';
    display: block;
    width: var(--tag-size);
    height: var(--tag-size);
    background-image: url(./images/tag-image.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.client_name {
    margin-block-start: var(--s14-16);
    font-size: var(--s22-28);
    line-height: var(--s22-28);
    margin-inline: 0;
    font-family: 'Mulish', 'Noto Sans JP', sans-serif;
    color: var(--text-dark);
    font-weight: 1000;
}

.business {
    margin-inline: 0;
    margin-block-start: 6px;
    font-size: var(--s14-16);
    line-height: var(--s14-16);
    font-weight: 400;
}

.client-meta>button {
    width: 100%;
    margin-block-start: var(--s14-16);
    transition: var(--transition);
    height: var(--s36-54);
    border-radius: 40px;
    border: none;
    font-family: var(--font-mulish);
    font-weight: 700;
    font-size: var(--s16-24);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-main);
    color: #fff;
    position: relative;
    cursor: pointer;
}

.client-meta>button:hover {
    opacity: var(--opacity);
}

.client-meta>button:before {
    --icon-size: clamp(0.875rem, 2.623vw + 0.236rem, 1.875rem);
    --icon-gap: clamp(0.375rem, 0.984vw + 0.135rem, 0.75rem);
    content: '';
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-inline-end: var(--icon-gap);
    background-image: url(./images/web-link.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 2px;
}

.client-swiper-controls {
    --control-gap: clamp(1.5rem, 4.59vw + 0.381rem, 3.25rem);
    --swiper-navigation-size: 40px;
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: var(--control-gap);
    align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
  position: static !important;
  margin: 0 !important;
}
.client-swiper-controls>span {
    display: flex;
}
.swiper-counter {
    display: none;
}
.client-swiper-controls svg {
    display: none;
}
@media screen and (max-width: 767px) {
  .client-swiper .swiper-wrapper {
    padding-block-end: 20px;
  }
}
@media screen and (min-width: 768px) {
  .swiper.client-swiper {
    padding-inline: max(120px,calc((100vw - 1000px) / 2));
  }
  .client-swiper .swiper-slide {
    width: min(700px,48.6vw);
    overflow: visible;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    box-shadow: none;
  }
  .client-image {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.10);
  }
  .client-meta {
    flex: unset;
    width: 100%;
    max-width: 300px;
    position: absolute;
    left: calc(100% - 80px);
    z-index: 3;
    opacity: 0;
    box-shadow: var(--shadow-main);
    border-radius: 24px;
  }
  .client-swiper .swiper-slide-active .client-meta {
    opacity: 1;
    transition: opacity .3s ease .3s; 
  }
  .client-swiper-controls {
    --swiper-navigation-size: 50px;
  }
  .client-swiper-controls>span {
    width: 50px;
  }
  .client-swiper-controls img {
    width: 100%;
  }
}

/* =========================================
  7. Media Queries
========================================= */
@media screen and (max-width: 767px) {
  .sm-up-only {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sm-down-only {
    display: none !important;
  }
}

@media screen and (max-width: 999px) {
  .md-up-only {
    display: none !important;
  }
}

@media screen and (min-width: 1000px) {
  .md-down-only {
    display: none !important;
  }
}

/* =========================================
  8. section 1
========================================= */
section {
    position: relative;
    overflow: hidden;
}

#section1 {
    padding-inline: 2rem;
    margin-block-start: 92px;
}
.s1-bg {
    margin-block-start: 0;
    position: absolute;
    z-index: -1;
    min-width: 136vw;
    left: max(2rem,8.2vw);
}

.s1-title-group {
    margin-block-start: 24.6vw;
}
.s1-title-group>*+* {
    margin-block-start: var(--s32-60);
}


@media screen and (max-width: 999px) {
  .s1-image-group {
    display: flex;
    flex-flow: column;
    margin-block-start: 11vw;
    margin-inline: auto -1.3rem;
    align-items: flex-end;
  }
}

@media screen and (min-width: 1000px) {
  #section1 {
    padding-inline: 0;
    margin-block-start: 123px;
  }
  .s1-bg {
    left: 35.77vw;
    margin-block-start: 26px;
    min-width: 73.2vw;
  }
  .s1-bg>img {
    min-width: 100%;
  }
  .s1-title-group {
    margin-block-start: 17.2vw;
    width: max-content;
  }
  .s1-image-group {
    margin-block-start: -23vw;
    margin-inline: auto 14.2vw;
    width: 23vw;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1299px) {
  .s1-title-group {
    margin-inline-start: 0;
    transform: scale(0.8);
  }
}

@media screen and (min-width: 1300px) {
  .s1-title-group {
    margin-inline-start: 13.9vw;
  }
}

@media screen and (min-width: 1600px) {
  .s1-image-group {
    margin-block-start: -20vw;
    padding-block-end: 9vw;
  }
}

/* =========================================
  9. section 2
========================================= */
.s2-title-group h2+p {
    margin-block-start: 2rem;
}
.s2-title-group p {
    font-weight: 400 !important;
}
.s2-title-group p+p {
    margin-block-start: 2em;
}

@media screen and (max-width: 767px) {
  #section2 {
    display: flex;
    flex-flow: column-reverse wrap;
    overflow: hidden;
    margin-block-start: -6vw;
    min-height: 725px;
    z-index: 1;
  }
  .s2-title-group {
    padding-inline: 2rem;
  }
  .s2-image-group {
    margin-block-start: -60vw;
    z-index: -1;
    max-width: 100%;
    min-height: 616px;
  }
  .s2-image-group>img {
    min-width: 111.2vw;
    margin-inline-start: -11.2vw;
  }
}

@media screen and (min-width: 768px) {
  #section2 {
    margin-inline: 0 max(8.3vw,20px);
    display: grid;
    grid-template-columns: 38.5vw 1fr;
    align-items: center;
    justify-content: flex-start;
    margin-block-start: -2vw;
    margin-block-end: 160px;
  }
  .s2-image-group {
    overflow: hidden;
    padding-inline-end: 4.6vw;
  }
  .s2-image-group>img {
    min-width: 105%;
    margin-inline-start: -5%;
  }
  .s2-title-group {
    padding-block-start: min(8rem,9vw);
  }
}

/* =========================================
  10. section 3
========================================= */
#section3 {
    padding-block-start: var(--s80-160);
    padding-block-end: var(--s60-120);
    padding-inline: 2rem;
}
#section3, .client-swiper {
    background-color: #fff;
}
.client-swiper {
    padding-block-end: var(--s48-120);
}
@media screen and (max-width: 767px) {
  #section3 {
    margin-block-start: -8vw;
  }
}
@media screen and (min-width: 1000px) {
  #section3 {
    padding-inline: max(120px, calc((100vw - 1200px)/2));
  }
}

/* =========================================
  11. section 4
========================================= */
#section4 {
    padding-block-start: var(--s80-160);
    padding-block-end: var(--s120-160);
    padding-inline: 2rem;
}

.tailored-section>h4 {
    margin-block: var(--s60-120);
    text-align: center;
    font-size: var(--s16-18);
    color: var(--text-dark);
    font-weight: 700;
}
.tailored-section-contents {
    display: grid;
    grid-template-columns: 100%;
    gap: 40px;
    text-align: center;
}
.tailored-section-contents li {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    gap: 1rem;
}
.tailored-section-contents img {
    box-shadow: var(--shadow-main);
    border-radius: 24px;
}
.tailored-section-contents h5 {
    font-size: var(--s18-20);
    color: var(--text-dark);
    margin: 0;
}
.tailored-section-contents h5+p {
    margin-block-start: var(--s4-12);
    font-size: 14px;
    font-weight: 400;
}
@media screen and (min-width: 1000px) {
  #section4 {
    padding-inline: max(120px, calc((100vw - 1200px)/2));
  }
  .tailored-section-contents {
    grid-template-columns: repeat(2,minmax(0,1fr));
    justify-content: space-between;
    gap: 3rem;
  }
}
@media screen and (min-width: 1280px) {
  .tailored-section-contents {
    grid-template-columns: repeat(3,minmax(0,340px));
  }
}

/* =========================================
  12. footer layout
========================================= */
footer {
    background: #fff;
    padding-block: 5rem;
    padding-inline: 2rem;
    text-align: center;
    position: relative;
}
footer a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}
footer a:hover {
    opacity: var(--opacity);
}
footer h4 {
    font-size: var(--s16-18);
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
}
footer h4+a {
    margin-block-start: 3rem;
    display: flex;
    flex-flow: column wrap;
    gap: 4px;
    width: fit-content;
    margin-inline: auto;
}
footer h4+a>img {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    overflow: hidden;
}
footer h4+a>span {
    font-size: var(--s10-12);
    font-weight: 700;
    color: var(--text-dark);
}
.footer-lancers {
    --logo-size: clamp(6.25rem, 3.279vw + 5.451rem, 7.5rem);
    margin-block-start: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    width: fit-content;
    margin-inline: auto;
    padding: .5rem 1rem;
    border-radius: 3rem;
    background: #fff;
}
.footer-lancers img {
    width: var(--logo-size);
} 
.footer-nav, .footer-copy {
    font-size: var(--s10-12);
}
.footer-nav {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-block: 3rem;
}
.footer-nav a {
    text-decoration: underline;
}
footer>*:not(img) {
    position: relative;
    z-index: 1;
}
footer>img {
    position: absolute;
}
.ft-left {
    width: 28.3vw;
    bottom: 5rem;
    left: 25px;
}
.ft-right {
    width: 28.3vw;
    bottom: calc(5rem + 1vw);
    right: 12px;
}

/* =========================================
  13. Pages (Law & Privacy)
========================================= */
.page-wrapper {
    margin-block: var(--s120-160);
    padding-inline: max(2rem, calc((100vw - 800px)/2));
}
.page-wrapper>h1 {
    font-size: var(--s22-40);
    color: var(--text-dark);
    margin-block: 0 var(--s24-48);
}
.law-table {
    margin: 0 !important;
}
.law-table * {
    line-height: 1.6;
    color: inherit;
}
.law-table dt {
    font-weight: 700;
}
.law-table dd {
    margin-inline: 0;
    margin-block-start: var(--s4-10);
    padding-block-end: var(--s18-24);
    border-bottom: .5px solid var(--text-main);
}
.law-table dd+dt {
    margin-block-start: var(--s18-24);
}
p.bold {
    font-weight: 700;
    margin-block: var(--s22-28) .25rem;
    font-size: var(
    --s16-20);
}

/* =========================================
  14. contact form
========================================= */
.page-wrapper>form {
    max-width: 100%;
}
.page-wrapper form label {
    font-weight: 700;
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    max-width: 100%;
}
.page-wrapper form label>* {
    margin-block: .5rem 0;
    padding: 1rem;
    border-radius: 8px;
    width: auto;
    max-width: 100%;
    border: 2px solid var(--border);
    background-color: #fff;
    font-size: var(--s16-18);
}
.page-wrapper form label>select {
    cursor: pointer;
}
.page-wrapper form label+label {
    margin-block-start: var(--s18-24);
}