@media (max-width: 479.9px) {
  /* Styles for extra small mobile */
  .desktop{
    display: none;
}
.mobile{
    display: block!important;
    }
  .hero__mainText {
    font-size: 3.2rem;
    letter-spacing: 0.5rem;
  }
  .topHeader__hamburger.open span:nth-child(1) {
  transform: rotate(45deg);
  position: relative;
  top: 9px;
  left: -1px;
  width: 45px;
}
.topHeader__hamburger.open span:nth-child(2) {
  opacity: 0;
}
.topHeader__hamburger.open span:nth-child(3) {
  transform: rotate(-45deg);
  position: relative;
  top: -13px;
  width: 45px;
  left: -2px;
}
body{
    overflow-x: hidden;
}
  .hero__subText {
    font-size: 1.2rem;
  }
   .snsSupport__title {
    font-size: 4rem;
    top: -11rem;
    text-align: center;
  }

  .snsSupport__button {
    font-size: 1.8rem;
    padding: 0.8rem 1.6rem;
  }
  .nayami__title {
    font-size: 3rem;
  }

  .nayami__list {
    font-size: 1.4rem;
  }

  .nayami {
    padding: 6rem 2rem;
  }
    .snsManagement {
    padding: 6rem 2rem;
  }

  .snsManagement__title {
    font-size: 3rem;
  }

  .snsManagement__subtitle {
    font-size: 1.8rem;
  }

  .snsManagement__list {
    font-size: 1.4rem;
  }
    .whyUs {
    padding: 6rem 0rem;
  }

  .whyUs__title {
    font-size: 3rem;
  }

  .whyUs__pointTitle {
    font-size: 1.5rem;
  }

  .whyUs__pointText {
    font-size: 1.4rem;
  }
  .fiveSteps {
    padding: 6rem 0rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  .fiveSteps__title {
  }

  .fiveSteps__list {
    font-size: 1.4rem;
  }
   .portfolio {
    padding: 0;
  }

  .portfolio__title {
    font-size: 3rem;
  }

  .portfolio__subtitle {
    font-size: 1.6rem;
  }

  .portfolio__client {
    font-size: 1.8rem;
    line-height: 1.5;
    margin-top: 3vw;
  }

  .portfolio__result {
    font-size: 1.4rem;
  }
   .pricing__title {
    font-size: 3rem;
  }

  .pricing__table th,
  .pricing__table td {
    font-size: 1.2rem;
  }

  .pricing__note {
    font-size: 1.2rem;
    text-align: center;
  }
  .howTo {
    padding: 6rem 2rem;
  }

  .howTo__title {
    font-size: 3rem;
    letter-spacing: normal;
  }

  .howTo__subtitle {
    font-size: 1.4rem;
    width: 80vw;
    padding: 2rem 1rem;
  }

  .howTo__step {
    font-size: 1.4rem;
  }

  .howTo__arrow {
    font-size: 2.4rem;
  }
 .faq__title {
    font-size: 3rem;
    letter-spacing: normal;
  }

  .faq__subtitle {
    font-size: 1.4rem;
  }

  .faq__question {
    font-size: 1.8rem;
    padding-right: 13vw;
  }

  .faq__answer {
    font-size: 1.4rem;
    padding-right: 13vw;
    margin-left: 2vw;
  }
.assessment {
    padding: 6rem 2rem;
    background: linear-gradient(90deg, #355D7D 0%, rgba(0, 0, 0, 0.00) 51.92%, rgba(255, 255, 255, 0.00) 85.58%), url(../img/free.png) lightgray -10.439px -244.746px / 126.872% 154.907% no-repeat;
  }

  .assessment__title {
    font-size: 3rem;
  }

  .assessment__lead {
    font-size: 1.8rem;
  }

  .assessment__desc {
    font-size: 1.1rem;
  }

  .assessment__button {
    font-size: 1.6rem;
  }
.actNow {
    padding: 6rem 0rem;
    padding-bottom: 23vw;
  }

  .actNow__title {
    font-size: 3rem;
    margin-top: 13vw;
  }

  .actNow__lead {
    font-size: 1.6rem;
    margin-top: 2vw;
  }

  .actNow__list {
    font-size: 1.4rem;
  }

  .actNow__button {
    font-size: 1.6rem;
  }

  *,
  *::before,
  *::after {}

  img {}

  ul {}
  ol {}
  a {}
  html {}
  body {}
  picture {}
  video {}
  canvas {}
  svg {}
  table {}
  input {}
  button {}
  textarea {}
  select {}
  a:focus-visible {}
  button:focus-visible {}

  .siteHeader {
    padding: 0 2rem;
}
  .siteHeader__inner {
    margin-top: 2vw;
}
  .siteHeader__logo img {
    height: 7rem;
}
  .siteHeader__companyName {
    margin-top: -2.5vw;
    font-size: 0.5rem;
}
  .hero {
    height: 100vw;
    background-size: contain;
    align-content: center;
    background-repeat: no-repeat;
    background-position: center;
}
  .hero__overlay {
    padding-right: 20vw;
    padding-left: 20vw;
}
  .hero__content {}
  .hero__mainText {
    margin-top: 5vw;
}
  .hero__subText {}
  .hero::before {
    height: 7vh;
}
  .hero::after {height: 2vh;}
  .snsSupport {
    background: linear-gradient(90deg, rgba(36, 119, 186, 0.00) 0%, #103654 54.33%, rgba(36, 119, 186, 0.00) 100%);
    padding-bottom: 0;
}
  .snsSupport__title {}
  .snsSupport__inner {}
  .snsSupport__content {
    margin-top: -8vw;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
  .snsSupport__textBlock {
    margin-left: 0;
    max-width: 90vw;
}
  .snsSupport__lead {
    font-size: 18px;
    margin-bottom: 9vw;
}
  .snsSupport__list {
    font-size: 14px;
}
  .snsSupport__list li {
    font-size: 14px;
}
  .snsSupport__desc {
    font-size: 13px;
}
  .snsSupport__note {
    font-size: 13px;
}
  .snsSupport__button {
    font-size: 14px;
    padding: 1rem 4rem;
}
  .snsSupport__imageBlock {}
  .snsSupport__imageBlock img {}
  .nayami {
    padding-top: 4rem;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}
  .nayami__title {
    letter-spacing: normal;
    margin-bottom: 5rem;
    font-size: 2.5rem;
}
  .nayami__content {
    display: flex;
    flex-direction: column;
}
  .nayami__textBox {
    display: flex;
    width: 100vw;
    padding: 2rem 4rem;
    padding-left: 6rem;
    align-items: center;
    justify-content: center;
}
  .nayami__list {
    font-size: 1rem;
}
  .nayami__imageBox {
    width: 100vw;
    margin-top: 16vw;
}
  .nayami__imageBox img {}
  .nayami__footer {position: relative;top: -45rem;font-size: 1rem;padding: 0 10vw;}
  .snsManagement {
    margin-top: -31vw;
    padding: 0;
}
  .snsManagement__headingBox {}
  .snsManagement__title {
    font-size: 2.5rem;
    letter-spacing: normal;
}
  .snsManagement__subtitle {
    font-size: 1.5rem;
}
  .snsManagement__content {
    display: flex;
    flex-direction: column;
}
  .snsManagement__imageBox {}
  .snsManagement__imageBox img {}
  .snsManagement__textBox {
    max-width: 90vw;
    margin-left: 0;
    margin-right: 0;
}
  .snsManagement__lead {
    font-size: 1.5rem;
}
  .snsManagement__list {
    width: 70vw;
    font-size: 1.2rem;
    padding: 2rem;
    border-radius: 20px;
    margin-top: 3vw;
}
  .snsManagement__list li {
    font-size: 1.2rem;
    padding-left: 2rem;
    border-radius: 10px;
}
  .whyUs {
}
  .whyUs__title {
    margin-left: 0;
    padding-left: 0;
    letter-spacing: normal;
    font-size: 2.5rem;
    text-align: center;
}
  .whyUs__content {
    display: flex;
    flex-direction: column-reverse;
}
  .whyUs__textBox {position: absolute;top: 55vw;z-index: 999;margin-left: 4vw;}
  .whyUs__point {
    width: 90vw;
    margin-bottom: 6rem;
    margin-top: 2rem;
}
  .whyUs__pointTitle {}
  .whyUs__pointText {
    font-size: 1rem;
}
  .whyUs__imageBox {}
  .whyUs__imageBox img {}
  .whyUs__imageBox::before {
    height: 6vw;
    width: 50vw;
    top: -6vw;
}
  .fiveSteps {
}
  .fiveSteps__title {
    padding-left: 0;
    letter-spacing: normal;
    font-size: 2.5rem;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 8rem;
}
  .fiveSteps__content {display: flex;justify-content: center;flex-direction: column;}
  .fiveSteps__imageBox {}
  .fiveSteps__imageBox img {object-fit: contain;aspect-ratio: auto;}
  .fiveSteps__imageBox::before {
    height: 6vw;
    width: 50vw;
    top: -6vw;
}
  .fiveSteps__list {
    position: absolute;
    width: 80vw;
    font-size: 1.5rem;
}
  .fiveSteps__list li {
    font-size: 1.5rem;
    line-height: 2;
    font-weight: 700;
    margin-bottom: 9vw;
}
  .portfolio__grid {
}
  .portfolio__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
  .portfolio__item:nth-child(even) {
    flex-direction: column;
}
  .portfolio__item img {width: 100vw;}
  .portfolio__caption {
    width: 100vw;
}
  .portfolio__client {}
  .portfolio__result {}
  .portfolio__headingBox {}
  .portfolio__title {}
  .portfolio__subtitle {}
  .pricing {}
  .pricing__title {}
  .pricing__tableWrap {
    width: 95vw;
}
  .pricing__table {
    border-spacing: 5px;
}
  .pricing__table thead th {
    text-align: left;
    padding: 0.5rem 0.5rem;
    font-size: 1rem;
}
  .pricing__table tbody td {
    font-size: 1rem;
    padding: 2rem 0.5rem;
}
  
  .howTo__flow {
    width: 80vw;
    margin: auto;
}
  .howTo__step {}
  .howTo__arrow {}
  .faq {
    padding-top: 0;
}
  
  .assessment {
    height: 122vw;
    background: linear-gradient(0deg, #355D7D 0%, rgba(0, 0, 0, 0.00) 51.92%, rgba(255, 255, 255, 0.00) 85.58%), url(../img/free.png) lightgray -10.439px -244.746px / 126.872% 154.907% no-repeat;
    background-size: contain;
    background-position: top;
    width: 100vw;
}
  .assessment__title {}
  .assessment__content {gap: 0;width: 85vw;}
  .assessment__textBox {
    margin: 0;
}
  .assessment__textBox h3 {
    font-size: 1.5rem;
    text-align: center;
}
 
  .assessment__imageBox img {display: none;}
  .section {}
  .section__title {}
  .actNow {}
  .actNow__title {}
  .actNow__content {
    display: flex;
    flex-direction: column-reverse;
    padding-top: 0;
}
  .actNow__textBox {
    padding-bottom: 5rem;
}
  .actNow__lead {}
  .actNow__list {}
  .actNow__list li {
    font-size: 14px;
}
  .actNow__desc {
    margin-right: 5vw;
    font-size: 12px;
}
  .actNow__note {
    font-size: 12px;
}
  .actNow__imageBox {}
  .actNow__imageBox img {
    height: auto;
}
  .actNow__button {}
  .footer__contact {
    height: 70vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
  .footer__contactTitle {
    font-size: 4rem;
    top: 7vw;
    position: absolute;
    z-index: 999;
    margin-top: -15vw;
    padding: 0;
}
  .footer__contactInner {
    display: flex;
    width: 100vw;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    /* background-image: linear-gradient(rgb(0 0 0 / 29%), rgb(0 0 0 / 29%)), url(../img/contact.png); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    align-content: center;
    align-items: center;
    justify-content: center;
    /* padding-bottom: 20vw; */
    margin-top: 5vw;
    margin-bottom: 0;
    /* height: 60vw; */
    z-index: 999;
}
  .footer__contactLead {
    font-size: 2rem;
}
  .footer__contactText {
    font-size: 1.4rem;
    width: 85vw;
    margin-left: 0;
    padding: 0;
    margin: 0;
}
  .footer__contactContent {
    position: static;
    max-width: 70%;
    margin-top: 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
  .footer__contactButton {
    margin-top: 70vw;
    font-size: 14px;
}
  .footer__contactImage {}
  .footer__contactImage img {
    position: relative;
    z-index: 1;
    object-fit: cover;
    /* display: none; */
}
  .footer__nav {
    display: flex;
    gap: 0;
    align-content: flex-end;
    flex-direction: row;
}
  .footer__navRow {}
  .footer__logo {}
  .footer__logo img {}
  .footer__logo p {}
  .footer__copyright {
    /* position: absolute; */
    text-align: center;
}
 .footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 2rem 1rem;
  flex-direction: row;
  align-content: stretch;
  max-height: 17vw;
}

.footer__logoBlock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__logo img {
  width: 9rem;
  height: auto;
  margin-top: -7vw;
  margin-left: -3vw;
  left: 0;
}

.footer__logo p {
  font-size: 1.2rem;
  color: white;
  margin-top: 0.3rem;
}

.footer__nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 8vw;
  color: black;
}

.footer__navRow {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__navRow:nth-child(1),
.footer__navRow:nth-child(2) {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 1.5rem 3rem;
  justify-items: stretch;
  justify-content: start;
  margin-bottom: 3vw;
  color: black;
}

.footer__nav a {
  color: black;
  font-size: 1.4rem;
  text-decoration: none;
}

.footer__backToTop {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: #196caf;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.5rem;
  margin-left: auto;
  /* margin-top: -30vw; */
}

.footer__copyright {
  width: 100%;
  text-align: center;
  font-size: 1.1rem;
  color: #c2a85c;
  margin-top: 1rem;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  margin-top: -15vw;
}
main{
    max-width: 100%;
}
body{
    max-width: 100%;
}
html {
  overflow-x: hidden;
}
#lp > footer > div.footer__bottom > nav > div:nth-child(2) > a:nth-child(2){
    margin-left: -19vw;
}
#lp > footer > div.footer__bottom > nav > div:nth-child(2) > a:nth-child(4){position: relative;left: -2vw;top: 9vw;margin-left: -30vw;}
.topHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  z-index: 1000; /* stays on top */
}

.topHeader__hamburger {
  display: block;
  background: #BEAE7A;
  width: 40px;
  height: 40px;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1001; /* above everything */
}

.topHeader__hamburger span {
  display: block;
  width: 70%;
  height: 2px;
  background: white;
  margin: 6px auto;
  transition: all 0.3s ease;
}
.topHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  z-index: 1100;
}

.topHeader__hamburger {
  z-index: 1101;
}

.topHeader__mobileMenuWrapper {
  z-index: 1000;
}
.topHeader__hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.topHeader__hamburger.active span:nth-child(2) {
  opacity: 0;
}

.topHeader__hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.topHeader__mobileMenuWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #355D7D;
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
  z-index: 1000; /* below header but above page */
}

.topHeader__mobileMenuWrapper.active {
  transform: translateX(0);
}

.topHeader__mobileMenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
}

.topHeader__mobileMenu a {
  color: white;
  font-size: 1.8rem;
  margin: 1.5rem 0;
  text-decoration: none;
}

.topHeader__mobileContact {
  background: url('assets/img/contact.png') center center / cover no-repeat;
  padding: 2rem;
  color: white;
  text-align: center;
}

.topHeader__mobileContactButton {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 1px solid #BEAE7A;
  color: #BEAE7A;
  text-decoration: none;
  margin-top: 1rem;
}
.topHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  z-index: 1000; /* stays on top */
  height: 5.5vh;
}

.topHeader__hamburger {
  display: block;
  background: #b8a76f;
  width: 5.5vh;
  height: 5.5vh;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1001; /* above everything */
}

.topHeader__hamburger span {
  display: block;
  /* width: 60%; */
  height: 2px;
  background: white;
  margin: 7px 9px;
  transition: all 0.3s ease;
}
.topHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #9ed2e7;
  z-index: 1100;
  padding: 0;
  padding-left: 2vw;
}

.topHeader__hamburger {
  z-index: 1101;
}

.topHeader__mobileMenuWrapper {
  z-index: 1000;
}
.topHeader__hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.topHeader__hamburger.active span:nth-child(2) {
  opacity: 0;
}

.topHeader__hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.topHeader__mobileMenuWrapper {
  position: fixed;
  top: 5.5vh;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #add6ef;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
  z-index: 1000; /* below header but above page */
}

.topHeader__mobileMenuWrapper.active {
  overflow: hidden;
  transform: translateY(0);
}

.topHeader__mobileMenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  background: #8bb9d6;
}

.topHeader__mobileMenu a {
  color: white;
  font-size: 1.8rem;
  margin: 1.5rem 0;
  text-decoration: none;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topHeader__mobileContact {
  background: url('../img/contact.png') center center / cover no-repeat;
  padding: 2rem;
  color: white;
  text-align: center;
}

.topHeader__mobileContactButton {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 1px solid #BEAE7A;
  color: #BEAE7A;
  text-decoration: none;
  margin-top: 1rem;
}
  .topHeader__nav {
    display: none;
  }

  .topHeader__hamburger {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    position: absolute;
    top: 0;
    right: 0;
  }

  .topHeader__logo img {
    margin-top: 0.5vw;
    height: 35px;
  }

  .topHeader__mobileMenu.active {
    display: flex;
  }

.topPagehero { height: 30vh;}
.topHeader__mobileContactTitle{
  margin-bottom: 8vw;
}
.topHeader__inner {
  
color: #add6ef;
  
}
body > header > div.topHeader__inner > button > span:nth-child(2){

margin: 1px 9px!important;

/* margin-bottom: 1px!important; */
}
body > header > div.topHeader__inner > button > span:nth-child(1){

margin-top: 12px!important;

margin-bottom: 2vw;
}
body > header > div.topHeader__inner > button > span:nth-child(3){

margin-bottom: 11px!important;

margin-top: 2vw;
}
.topHeader__logo {
  height: 4.5vh;
  margin-top: 0.7vw;
  margin-left: 2vw;
}
#heroVideo {
  margin-top: 5.5vh;
}





  .hero__mainText {}
  .hero__subText {}
  .snsSupport__title {}
  .nayami__title {}
  body > footer > div.footer__bottom.desktop {}
  .nayami__content {}
  .nayami__textBox,
  .nayami__imageBox {}
  .nayami__imageBox {}
  .snsManagement__title {}
  .whyUs__title {}
  .fiveSteps__title {}
  .fiveSteps__content {}
  .fiveSteps__imageBox,
  .fiveSteps__list {}
  .portfolio__title {}
  .portfolio__subtitle {}
  .pricing__title {}
  .pricing__table th,
  .pricing__table td {}
  .howTo__title {}
  .howTo__subtitle {}
  .howTo__step {}
  .faq__title {}
  .faq__subtitle {}
  .faq__question {}
  .faq__answer {}
  .assessment__title {}
  .assessment__content {}
  .actNow__title {}
  .actNow__content {}

  /* Styles for extra small mobile */
  .hero__mainText {}
  .hero__subText {}
  .snsSupport__title {}
  .snsSupport__button {}
  .nayami__title {}
  .nayami__list {}
  .nayami {}
  .snsManagement {}
  .snsManagement__title {}
  .snsManagement__subtitle {}
  .snsManagement__list {}
  .whyUs {}
  .whyUs__title {}
  .whyUs__pointTitle {}
  .whyUs__pointText {}
  .fiveSteps {}
  .fiveSteps__title {}
  .fiveSteps__list {}
  .portfolio {}
  .portfolio__title {}
  .portfolio__subtitle {}
  .portfolio__client {}
  .portfolio__result {}
  .pricing__title {}
  .pricing__table th,
  .pricing__table td {}
  .pricing__note {}
  .howTo {}
  .howTo__title {}
  .howTo__subtitle {}
  .howTo__step {}
  .howTo__arrow {}
  .faq__title {}
  .faq__subtitle {}
  .faq__question {}
  .faq__answer {}
  .assessment {}
  .assessment__title {}
  .assessment__lead {}
  .assessment__desc {}
  .assessment__button {}
  .actNow {}
  .actNow__title {}
  .actNow__lead {}
  .actNow__list {}
  .actNow__button {}
  .siteHeader {}
  .siteHeader__inner {}
  .siteHeader__logo img {}
  .siteHeader__companyName {}
  .hero {}
  .hero__overlay {}
  .hero__content {}
  .hero__mainText {}
  .hero__subText {}
  .hero::before {}
  .hero::after {}
  .snsSupport {}
  .snsSupport__title {}
  .snsSupport__inner {}
  .snsSupport__content {}
  .snsSupport__textBlock {}
  .snsSupport__lead {}
  .snsSupport__list {}
  .snsSupport__list li {}
  .snsSupport__desc {}
  .snsSupport__note {}
  .snsSupport__button {}
  .snsSupport__imageBlock {}
  .snsSupport__imageBlock img {}
  .nayami {}
  .nayami__title {}
  .nayami__content {}
  .nayami__textBox {}
  .nayami__list {}
  .nayami__imageBox {}
  .nayami__imageBox img {}
  .nayami__footer {}
  .snsManagement {}
  .snsManagement__headingBox {}
  .snsManagement__title {}
  .snsManagement__subtitle {}
  .snsManagement__content {}
  .snsManagement__imageBox {}
  .snsManagement__imageBox img {}
  .snsManagement__textBox {}
  .snsManagement__lead {}
  .snsManagement__list {}
  .snsManagement__list li {}
  .whyUs {}
  .whyUs__title {}
  .whyUs__content {}
  .whyUs__textBox {}
  .whyUs__point {}
  .whyUs__pointTitle {}
  .whyUs__pointText {}
  .whyUs__imageBox {}
  .whyUs__imageBox img {}
  .whyUs__imageBox::before {}
  .fiveSteps {}
  .fiveSteps__title {}
  .fiveSteps__content {}
  .fiveSteps__imageBox {}
  .fiveSteps__imageBox img {}
  .fiveSteps__imageBox::before {}
  .fiveSteps__list {}
  .fiveSteps__list li {}
  .portfolio__grid {}
  .portfolio__item {}
  .portfolio__item:nth-child(even) {}
  .portfolio__item img {}
  .portfolio__caption {}
  .portfolio__client {}
  .portfolio__result {}
  .portfolio__headingBox {}
  .portfolio__title {}
  .portfolio__subtitle {}
  .pricing {}
  .pricing__title {}
  .pricing__tableWrap {}
  .pricing__table {}
  .pricing__note {}
  .howTo {}
  .howTo__title {}
  .howTo__subtitle {}
  .howTo__flow {}
  .howTo__step {}
  .howTo__arrow {}
  .faq {}
  .faq__item {}
  .faq__headingBox {}
  .faq__title {}
  .faq__subtitle {}
  .faq__list {}
  .faq__question {}
  .faq__answer {}
  .assessment__title {}
  .assessment {}
  .assessment__content {}
  .assessment__textBox {}
  .assessment__textBox h3 {}
  .assessment__desc {}
  .assessment__button {}
  .assessment__imageBox {}
  .assessment__imageBox img {}
  .section {}
  .section__title {}
  .actNow {}
  .actNow__title {}
  .actNow__content {}
  .actNow__textBox {}
  .actNow__lead {}
  .actNow__list li {}
  .actNow__list {}
  .actNow__imageBox {}
  .actNow__desc {}
  .actNow__note {}
  .actNow__imageBox img {}
  .actNow__button {}
  .footer__contact {height: 75vw;}
  .footer__contactTitle {
    top: 8vw;
    font-size: 5rem;
}
  .footer__contactInner {}
  .footer__contactLead {}
  .footer__contactText {}
  .footer__contactContent {}
  .footer__contactButton {}
  .footer__contactImage {}
  .footer__contactImage img {}
  .footer__nav {
    display: none;
}
  .footer__navRow {}
  .footer__logo {}
  .footer__logo img {
    margin-top: -4vw;
}
  .footer__logo p {}
  .footer__copyright {}
  .footer__backToTop {}
  .footer__bottom {}
  .footer__logoBlock {}
  .topHeader {}
  .topHeader__inner {}
  .topHeader__logo {}
  .topHeader__logo img {}
  .topHeader__logo p {}
  .topHeader__nav {}
  .topHeader__nav a {}
  .topHeader__nav a span {}
  .topHeader__hamburger {}
  .topHeader__hamburger span {}
  .topHeader__mobileMenu {}
  .topHeader__mobileMenu span {
    font-size: 12px;
  }
  .topPagehero {}
  .businessSection {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 5vw;
}
  .subheading {
    margin-top: 3vw;
}
  .businessSectionTitle {
    font-size: 12vw;
    margin-left: 2vw;
    margin-bottom: 15vw;
    margin-top: -12vw;
}
  .businessCards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12vw;
}
  .businessCard {
    width: 80vw;
    max-height: fit-content;
    margin-bottom: 15vw;
}
  .businessCardBackground {}
  .businessCardRight {
    top: 0;
    margin-left: 0;
}
  .leftBackground {}
  .rightBackground {}
  .businessCardImage {
    width: 70vw;
}
  .businessCardContent {
    width: 70vw;
    max-width: 70vw;
}
  .businessCardHeading {
    margin-bottom: 3vw;
    width: 80vw;
}
  .businessCardText {
    margin-top: 4vw;
    line-height: 2;
}
  .businessCardButton {
    margin-top: 10vw;
}
  .businessCardButtonUp {}
  .flex {
    margin-bottom: 8vw;
}
  .companySection {
    margin-top: 0;
    height: fit-content;
}
  h5 {}
  .companySection::before {}
  .companySectionTitle {
    top: 0;
    font-size: 5rem;
    margin-top: 8vw;
    margin-bottom: 8vw;
    z-index: 999;
}
  .companySectionInner {
    margin-top: 15vw;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100vw;
    padding: 0;
    margin-right: 0;
    position: static;
    z-index: 9999;
}
  .companyTextBlock {
    width: 90vw;
    max-width: 90vw;
}
  .companyHeading {}
  .companyText {}
  .companyButton {}
  .companyImages {
    max-width: 70vw;
}
  .companyImage {
    width: 70vw;
    max-width: 70vw;
}
  .companyImageTop {}
  .companyImageBottom {}
  .worksSection {
    padding-bottom: 2vw;
}
/* ---- MOBILE SLIDER ---- */
/* Hide desktop section on mobile */
.worksSection.desktop { display: none !important; }

/* Keep the title spacing consistent */
.mobile .worksIntro { margin-bottom: 12px; }

/* ---- MOBILE SLIDER LAYOUT ---- */
.mobile .worksSliderMobileWrapper{
  position: relative;
  overflow: hidden;            /* no native horizontal scroll */
  padding-inline: 15vw;        /* 15% left/right peeks */
  -webkit-overflow-scrolling: auto;
}

.mobile .worksSliderMobile{
  display: flex;
  align-items: center;
  gap: 0;
  will-change: transform;
  transition: transform .35s ease;
  touch-action: pan-y;         /* allow vertical page scroll */
}

/* Each card 70% of viewport width => 15% peek each side */
.mobile .worksSlideMobile{
  flex: 0 0 70vw;
  aspect-ratio: 16 / 9;        /* match desktop card ratio */
  position: relative;
  border-radius: 16px;         /* match your desktop rounding */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);  /* desktop-like depth */
  transform: scale(.92);
  opacity: .55;                /* neighbors dimmed */
  transition: transform .25s ease, opacity .25s ease;
}

/* Active (center) slide emphasized */
.mobile .worksSlideMobile.is-active{
  transform: scale(1);
  opacity: 1;
  z-index: 1;
}

/* Images fill the card */
.mobile .worksSlideMobile > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Remove any dots/arrows if you accidentally include them */
.mobile .worksControls,
.mobile .worksButton,
.mobile .worksDots,
.mobile .worksArrow { display: none !important; }

/* Kill horizontal scrollbars just in case */
.mobile .worksSliderMobileWrapper::-webkit-scrollbar{ display:none; }
.mobile .worksSliderMobileWrapper{ scrollbar-width: none; }

/* 0) SECTION BACKGROUND SHOULD COVER TITLE + SLIDER */
.worksSection.mobile{
  /* use your real section bg color here */
  background: #b9d9ea;              /* ← same blue as desktop section */
  padding: 24px 0 36px;             /* breathing room below title */
  padding-top: 0;
}

/* 1) WRAPPERS MUST BE TRANSPARENT (no extra bg/shadow layer) */
.mobile .worksSliderMobileBlock,
.mobile .worksSliderMobileWrapper,
.mobile .worksSliderMobile{
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) LAYOUT: 70% center + 15% peek (no scrollbars) */
.mobile .worksSliderMobileWrapper{
  position: relative;
  overflow: hidden;
  padding-inline: 15vw;
  -webkit-overflow-scrolling: auto;
}
.mobile .worksSliderMobile{
  display: flex;
  align-items: center;
  gap: 0;
  will-change: transform;
  transition: transform .35s ease;
  touch-action: pan-y;
  z-index: 999;
  position: relative;
}

/* 3) THE CARD: single background + single shadow (no double layers) */
.mobile .worksSlideMobile{
  flex: 0 0 70vw;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;                  /* crops inner content cleanly */
  background: #eaf3f9;               /* card surface (light) */
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  display: flex;                     /* center logo/image */
  align-items: center;
  justify-content: center;
  transform: scale(.92);
  opacity: .55;
  transition: transform .25s ease, opacity .25s ease;
}
.mobile .worksSlideMobile.is-active{
  transform: scale(1);
  opacity: 1;
  z-index: 1;
}

/* 4A) LOGO/GRAPHIC INSIDE THE CARD — keep proportions, no extra bg */
.mobile .worksSlideMobile > img{
  /* max-width: 80%; */
  /* max-height: 70%; */
  /* width: auto; */
  /* height: auto; */
  /* object-fit: contain; */               /* logos stay crisp, not cropped */
  /* display: block; */
  /* background: transparent !important; */
  /* pointer-events: none; */
  /* user-select: none; */
}

/* If your images are *photos* and you WANT them to fill + crop,
   switch to 4B and remove 4A above:

.mobile .worksSlideMobile > img{
  width: 100%;
  height: 100%;
  object-fit: cover;                 // fill + crop
  display: block;
  background: transparent !important;
  pointer-events: none;
  user-select: none;
}
*/

/* 5) HIDE ANY DESKTOP CONTROLS THAT LEAK IN */
.mobile .worksControls,
.mobile .worksButton,
.mobile .worksDots,
.mobile .worksArrow{ display:none !important; }

/* 6) NO H-SCROLLBAR */
.mobile .worksSliderMobileWrapper::-webkit-scrollbar{ display:none; }
.mobile .worksSliderMobileWrapper{scrollbar-width: none;z-index: 2;}
/* the slide is just a frame for positioning */
.mobile .worksSlideMobile{
  z-index: 999;
  flex: 0 0 70vw;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 16px;
  background: transparent !important; /* kill outer card */
  box-shadow: none !important;
  transform: scale(.92);
  opacity: .55;
  transition: transform .25s ease, opacity .25s ease;
}
.mobile .worksSlideMobile.is-active{ transform: scale(1); opacity: 1; }

/* make the IMAGE the card */
.mobile .worksSlideMobile > img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* big; cropped if needed */
  /* border-radius: 16px; */          /* rounded corners on image */
  box-shadow: 0 10px 30px rgba(0,0,0,.18); /* single shadow layer */
  display: block;
  z-index: 999;
}


.worksIntro {
  background: #b9d9ea;  /* ONLY the title */
  padding-bottom: 40px;
}

.worksSliderBlock,
.worksSliderWrapper,
.worksSlider {
  background: transparent !important;
  position: relative;
  z-index: 3;
}
.worksSlider {
  transform: none !important;
}
.worksTitle {margin-bottom: 0};
  /* If your news section sits under it */
  .newsTitle {
    top: -5vw;
    left: 10vw;
    margin-bottom: -8vw;
  }

  .newsWrapper {
    width: 90vw;
    padding: 9vw 5vw;
  }


  .newsItem {
    display: flex;
    text-align: left;
    flex-direction: column;
}
  .newsItem:last-child {}
  .newsItem img {
    width: 75vw;
    margin-bottom: 2vw;
    margin-right: 0;
    margin-bottom: 10vw;
    margin-top: 8vw;
}
  .newsContent time {}
  .newsContent p {
    width: 70vw;
    margin-bottom: 7vw;
}
  .newsButton {}
  .blogSection::before {}
  .blogSection {}
  .blogTitle {}
  .blogGrid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 18vw;
}
  .blogCard {
    width: 70vw;
}
  .blogCard img {}
  .blogCardContent {
    height: 56vw;
    padding: 6rem 3rem;
}
  .blogCardContent time {}
  .blogCardContent p {}
  .blogTag {margin-left: 13vw;}
  .blogMoreButton {
    margin-top: 10vw;
    margin-bottom: 10vw;
}
  .recruitSection {}
  .recruitTitle {}
  .recruitContent {}
  .recruitImage {}
  .recruitImage img {}
  .recruitText {}
  .recruitText h3 {}
  .recruitText p {}
  .recruitButton {}
  .recruitCard {}
  .recruitButtonWrapper {}
  .companyPageHero {}
  .companyPageHero::before {}
  .companyPageHero__content {}
  .companyPageHero__content h1 {}
  .companyPageHero__content p {}
  .visionSection {}
  .visionInner {}
  .visionTitle {}
  .visionSubtitle {}
  .visionText {}
  .visionText p {}
  .daihyoSection {}
  .daihyoTitle {}
  .daihyoInner {}
  .daihyoSideBySide {}
  .daihyoTextBlock {}
  .daihyoTextBlock h3 {}
  .daihyoTextBlock p {}
  .daihyoImageBlock {}
  .daihyoImageBlock img {}
  .daihyoExtraText {}
  .daihyoExtraText p {}
  .plannerSection {}
  .plannerTitle {}
  .plannerInner {}
  .plannerImageBlock {}
  .plannerImageBlock img {}
  .plannerTextBlock {}
  .plannerTextBlock h3 {}
  .plannerTextBlock p {}
  .aboutSection {}
  .aboutOverlay {}
  .aboutTitle {}
  .aboutList {}
  .aboutList li {}
  strong {}
  .jissekiHero {}
  .jissekiHero::before {}
  .jissekiHeroText {}
  .jissekiHeroText h1 {}
  .jissekiHeroText p {}
  .numbersSection {}
  .numbersTitle {}
  .numbersCard {}
  .numbersImage {}
  .numbersImage img {}
  .numbersText {}
  .numbersText h3 {}
  .numbersText ul {}
  .numbersText li {}
  .sampleWorks {}
  .sampleWorksTitle {}
  .sampleArticle {}
  .sampleArticle h3 {}
  .sampleArticle.reverse {}
  .sampleTextBlock {}
  .sampleTextBlock h3 {}
  .sampleTextBlock h3 span {}
  .sampleImageBlock {}
  .sampleImageBlock img {}
  .sampleLabelBar {}
  .sampleWorksCard {}
  .sampleWorksCardReverse {}
  .sampleVideos {}
  .sampleVideos a img {}
  .servicesLineup {}
  .servicesLineupTitle {}
  .servicesCard {}
  .servicesCard.reverseCard {}
  .servicesCardImg {}
  .servicesCardImg img {}
  .servicesOverlay {}
  .servicesOverlay h3 {}
  .servicesOverlay p {}
  .blueOverlay {}
  .blackOverlay {}
  .howTo__subtitle.worksPage {}
  .customersVoicesSection {}
  .customersVoicesTitle {}
  .customersVoicesSubtitle {}
  .customersVoicesInner {}
  .voiceCard {}
  .voiceCard.reversed {}
  .voicePortraitBlock {}
  .voicePortraitBlock img {}
  .voiceCard.reversed .voicePortraitBlock img {}
  .voicePortraitBlock p {}
  .voiceTextBubble {}
  .voiceCard.reversed .voiceTextBubble {}
  .customersVoicesSummary {}
  #aboutPage {
    margin-top: 5.5vh;
    /* margin-bottom: 15vw; */
}
  #aboutPage::before {
    height: 300vw;
    background-size: cover;
}
  .companyProfile {
    margin-top: 17vw;
    padding-bottom: 15vw;
}
  .companyProfile__title {}
  .companyProfile__title span {
    font-size: 3.5rem;
}
  .companyProfile__title small {}
  .companyProfile__wrapper {
    margin-top: -2vw;
    display: flex;
    flex-direction: column;
}
  .companyProfile__left {
    margin: auto;
}
  .companyProfile__snsIcons {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 22vw;
    top: 212vw;
}
  .companyProfile__snsIcons img {
    width: 80px;
    height: auto;
}
  .companyProfile__snsIcons img:hover {}
  .companyProfile__right {
    margin-top: -22vw;
    margin-left: 9vw;
    margin-bottom: 30vw;
    width: 90vw;
}
  .companyProfile__info {
    width: 85vw;
}
  .companyProfile__info div {}
  .companyProfile__info dt {}
  .companyProfile__info dd {}



body > footer > div.footer__bottom.desktop{
  display: none;
}
body > footer > div.footer__bottom.mobile > div > nav{
  display: none;
}
#servicesTop {
    margin-top: 15vw;
}

/* ==========================================================
   SERVICES PAGE STRUCTURE  (scoped by #servicesBg / #servicesTop / etc.)
   ========================================================== */

/* ---------- Global wrapper ---------- */
#servicesBg.servicesBg {}

/* ---------- HERO SECTION ---------- */
#servicesTop.servicesTop {}
#servicesTop .servicesTopInner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#servicesTop .servicesTopText {
    margin-left: 1vw;
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#servicesTop .servicesTopTitle {
    text-align: left;
}
#servicesTop .servicesTopSubtitle {}
#servicesTop .servicesTopMotto {
    text-align: center;
}
#servicesTop .servicesTopDesc {}
#servicesTop .servicesTopImage {}
#servicesTop .servicesTopImage img {
    width: 90vw;
    margin: auto;
}

/* ---------- SERVICE CARDS SECTION ---------- */
#servicesCards.servicesCards {}
#servicesCards .servicesCardsInner {}

#servicesCards .serviceCard {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#servicesCards .serviceCardText {}
#servicesCards .serviceCardNumber {}
#servicesCards .serviceCardTitle {}
#servicesCards .serviceCardLead {}
#servicesCards .serviceCardText p {}
#servicesCards .serviceCardImage {
    align-items: flex-end;
    align-self: flex-end;
    margin-top: 10vw;
         /* match lower image */
    width: 100%;
    background-position-y: center;
    margin-bottom: 10vw;
}
#servicesCards .serviceCardImage img {
    width: 70vw;
    
    
           /* ← tweak this until top and bottom match visually */
    
              /* crop overflow cleanly */
    margin-left: 20vw;
    aspect-ratio: 16 / 10;   /* define height via aspect */
    height: auto;
    object-fit: cover;      /* maintain proportions, crop instead of squish */
    object-position: center; /* center crop */
    display: block;
}

/* Reverse layout card */
#servicesCards .reverseCard {}

/* ---------- WORKS SECTION ---------- */
#servicesWorks.servicesWorks {
    padding: 0;
}
#servicesWorks .servicesWorksInner {
    width: 90vw;
}
#servicesWorks .servicesWorksHeader {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#servicesWorks .servicesWorksText {
    text-align: left;
    align-items: flex-start;
}
#servicesWorks .servicesWorksTitle {}
#servicesWorks .servicesWorksSubtitle {}
#servicesWorks .servicesWorksCta {
    display: flex;
    flex-direction: column;
    margin-top: 10vw;
    align-items: flex-end;
}
#servicesWorks .servicesWorksNote {}
#servicesWorks .servicesWorksButton {}
#servicesWorks .servicesWorksButton img {}
#servicesWorks .imgcont {
    margin-top: 8vw;
    margin-bottom: 8vw;
}
#servicesWorks .imgcont img {
    width: 100vw;
    margin-left: 0;
    margin-right: 0;
}

/* ---------- PRICE SECTION ---------- */
#servicesPrice.servicesPrice {}
#servicesPrice .servicesPriceInner {}
#servicesPrice .servicesPriceHead {}
#servicesPrice .servicesPriceTitle {}
#servicesPrice .servicesPriceSubtitle {}
#servicesPrice .priceCards {
    display: flex;
    flex-direction: column;
}

#servicesPrice .priceCard {}
#servicesPrice .priceCard.leftCard {}
#servicesPrice .priceCard.rightCard {
    margin-bottom: 10vw;
}
#servicesPrice .priceCardHead {}
#servicesPrice .priceCardBody {
    padding: 2rem 4rem;
}
#servicesPrice .priceCardImage {}
#servicesPrice .priceCardImage img {}
#servicesPrice .priceCardList {}
#servicesPrice .priceCardListTitle {}
#servicesPrice .priceCardList ul {}
#servicesPrice .priceCardList li {}
#servicesPrice .priceCardPrice {}
#servicesPrice .priceCardPrice strong {}

/* ---------- FLOW SECTION ---------- */
#servicesFlow.servicesFlow {}
#servicesFlow .servicesFlowInner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#servicesFlow .servicesFlowHead {
    width: 80vw;
    margin-left: 10vw;
}
#servicesFlow .servicesFlowTitle {}
#servicesFlow .servicesFlowText {}
#servicesFlow .servicesFlowSteps {
    width: 90vw;
}

#servicesFlow .flowStep {
}
#servicesFlow .flowStepCircle {}
#servicesFlow .flowStepCircle img {}
#servicesFlow .flowStepContent {
    margin-left: 15vw;
}
#servicesFlow .flowStepTitle {}
#servicesFlow .flowStepDesc {}
#servicesFlow .flowStepButton {
    width: 64vw;
}
#servicesFlow .flowStepButton img {}

/* ---------- Utility / general ---------- */
#servicesBg a {}
#servicesBg p {}
#servicesBg h2 {}
#servicesBg h3 {}
#servicesBg ul {}
#servicesBg li {}
.reverseCard .serviceCardImage::before {
  left: 60px;
}
.serviceCardImage::before {
  top: 30px;
  width: 70vw;
  left: 60px;
}

.servicesFlowSteps::before{
  left: 6vw;
  top: 14vw;
  bottom: 28vw;
}
/* ==========================================================
   COMPANY / VISION PAGE STRUCTURE
   ========================================================== */

/* ---------- MAIN WRAPPER ---------- */
main.companyPage {}

/* ==========================================================
   MISSION SECTION
   ========================================================== */
#mission.visionBlock.missionBlock {}
#mission .visionBlock__inner {}
#mission .visionBlock__eyebrow {}
#mission .visionBlock__lead {}

/* ==========================================================
   VISION SECTION
   ========================================================== */
#vision.visionBlock.visionBlock--blue {}
#vision .visionBlock__inner {}
#vision .visionBlock__eyebrow {}
#vision .visionBlock__desc {}

/* ==========================================================
   VALUE SECTION
   ========================================================== */
#value.visionBlock.visionBlock--white {}
#value .visionBlock__inner.valueBlock {}
#value .visionBlock__eyebrow {}

#value .valueItem {}
#value .valueItem__num {}
#value .valueItem__title {}
#value .valueItem__caption {}
#value .valueItem__rule {}

/* ==========================================================
   PHILOSOPHY SECTION
   ========================================================== */
#philosophy.philosophySection {
    padding: 5rem 2rem;
}
#philosophy .philosophySection__inner {}
#philosophy .philosophySection__title {}
#philosophy .philosophySection__text {}

/* ==========================================================
   AISATSU (GREETING) SECTION
   ========================================================== */
#aisatsu.aisatsuSection {}
#aisatsu .aisatsuSection__inner {}
#aisatsu .aisatsuSection__title {
    font-size: 3rem;
}
#aisatsu .aisatsuSection__content {
    display: flex;
    flex-direction: column-reverse;
}

#aisatsu .aisatsuSection__textBlock {}
#aisatsu .aisatsuSection__textBlock p {}
#aisatsu .aisatsuSection__sign {}

#aisatsu .aisatsuSection__imageBlock {
    width: 70vw;
    margin: auto;
}
#aisatsu .aisatsuSection__imageBlock img {}

/* ==========================================================
   GENERAL TYPOGRAPHY / UTILITIES (page scope)
   ========================================================== */
.companyPage h2 {}
.companyPage h3 {}
.companyPage p {}
.companyPage img {}

/* ==========================================================
   RECRUIT PAGE STRUCTURE
   ========================================================== */

/* ---------- MAIN WRAPPER ---------- */
main {}

/* ==========================================================
   RECRUIT TOP / HERO SECTION
   ========================================================== */
#recruitTop.recruitTop {
    margin-top: 18vw;
    height: auto;
}
#recruitTop .recruitTop__inner {}
#recruitTop .recruitTop__head {}
#recruitTop .recruitTop__title {}
#recruitTop .recruitTop__subtitle {}
#recruitTop .recruitTop__copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#recruitTop .recruitTop__lead {}
#recruitTop .recruitTop__text {
    text-align: justify;
    margin-left: 10vw;
}

/* ==========================================================
   CEO MESSAGE SECTION
   ========================================================== */
#recruitMessage.recruitMessage {}
#recruitMessage .recruitMessage__inner {}
#recruitMessage .recruitMessage__title {
    font-size: 3rem;
    margin-bottom: 9vw;
}
#recruitMessage .recruitMessage__content {
    display: flex;
    flex-direction: column;
}
#recruitMessage .recruitMessage__textBlock {}
#recruitMessage .recruitMessage__textBlock p {}
#recruitMessage .recruitMessage__imageBlock {}
#recruitMessage .recruitMessage__imageBlock img {}
#recruitMessage .recruitMessage__caption {
    margin-top: 5vw;
}
#recruitMessage .recImgBox {}

/* ==========================================================
   POSITIONS SECTION
   ========================================================== */
#recruitPositions.recruitPositions {}
#recruitPositions .recruitPositions__inner {}
#recruitPositions .recruitPositions__title {}
#recruitPositions .recruitPositions__grid {}

#recruitPositions .jobCard {}
#recruitPositions .jobCard__frame {}
#recruitPositions .jobCard__number {}
#recruitPositions .jobCard__name {}
#recruitPositions .jobCard__image {}
#recruitPositions .jobCard__image img {}
#recruitPositions .jobCard__text {}
#recruitPositions .jobCard__text p {}

/* ==========================================================
   CTA (APPLY INFORMATION) SECTION
   ========================================================== */
#recruitCta.recruitCta {
    margin-top: 13vw;
    margin-bottom: 10vw;
}
#recruitCta .recruitCta__link {}
#recruitCta .recruitCta__caption {}
#recruitCta .recruitCta__banner {}

/* ==========================================================
   OPTIONAL: APPLY ROWS (commented-out part)
   ========================================================== */
.applyRows {}
.applyRow {}
.applyRow__icon {}
.applyRow__label {}
.applyRow__content {}
.businessCardButton {}

/* ==========================================================
   GENERAL TYPOGRAPHY / UTILITIES (page scope)
   ========================================================== */
#recruitTop h2,
#recruitTop h3,
#recruitTop p,
#recruitTop img {}

#recruitMessage h3,
#recruitMessage p,
#recruitMessage img {}

#recruitPositions h3,
#recruitPositions h4,
#recruitPositions p,
#recruitPositions img {}

#recruitCta img,
#recruitCta span {}

.recImgBox::before {
    top: -28px;
    left: 20px;
    height: 73vw;
}
@media (max-width: 480px) {
  /* Page scope */
  #contactPage {}
  #contactPage::before {
    height: 504vw;
}

  /* Hero */
  .contactHero {}
  .contactHeroInner {}
  .contactHead {}
  .contactTitle {}
  .contactSubtitle {}
  .contactNote {}
  .contactReq {}
  .contactSocial {}
  .contactSocial a {}
  .contactSocial img {}

  /* Form section */
  .contactSection {
    width: 90vw;
    margin-top: -6vw;
}
  .contactInner {
    max-width: 90vw;
}
  .contactForm {}

  /* Rows & fields */
  .formRow {}
  .formRow label {}
  .formRow legend {}
  .radioCol {}
  .agreeRow {}
  .agreeLabel {}

  .contactForm input[type="text"] {
    width: 80vw;
}
  .contactForm input[type="email"] {
    width: 80vw;
}
  .contactForm input[type="tel"] {
    width: 80vw;
}
  .contactForm input[type="url"] {
    width: 80vw;
}
  .contactForm textarea {
    width: 92vw;
    border-right:     1px solid #355d7d;
}

  .contactForm input:focus {}
  .contactForm textarea:focus {}

  /* Actions / alerts */
  .formActions {}
  .btnPrimary {
    width: 48vw;
    margin-top: -12vw;
}
  .smallNote {}
  .formAlert {}
  .formAlert.ok {}
  .formAlert.err {}

  /* Utility from your page */
  #contactPage .companyProfile__left {
    width: 75vw;
    max-width: 90vw;
}
  #contactPage .companyProfile__wrapper {
    display: flex;
    flex-direction: column;
}
  .formRow label span {}
  .radioCol label {}
  .formRow span {}
}
#contactPage .companyProfile__snsIcons {top: -3vw;}



.newsSingle__pagerItem a {
  text-decoration: none;
}
  .newsSingle__inner {
    padding: 0 5%;
  }
  .newsSingle {
    padding: 8vh 0;
  }
  .newsSingle__title {
    font-size: 1.3rem;
  }
  .newsSingle__pager {
    flex-direction: column;
    text-align: center;
  }



  .newsArchive__inner {
    padding: 0 5%;
  }










}