/* Base Styles (Mobile First) */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*  */
@font-face {
  font-family: "Pacifico";
  src: url("./assets/fonts/Pacifico-Regular.woff2") format("woff2"),
    url("./assets/fonts/Pacifico-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NotoSansJP";
  src: url("./assets/fonts/NotoSansJP-Regular.woff2") format("woff2"),
    url("./assets/fonts/NotoSansJP-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/*  */
body {
  font-family: Arial, sans-serif, "NotoSansJP";
  height: 100vh;
}

.nav-links {
  position: fixed;
  top: 0;
  left: -150%;
  width: 100%;

  transition: left 0.3s ease;

  list-style: none;
}
.nav-links li {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background: white;
  margin-bottom: 0.06rem;
}
.nav-links a {
  text-decoration: none;
}

.nav-links a:hover {
  text-decoration: underline;
}

.hamburger-menu {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.hamburger-menu .bar {
  width: 25px;
  height: 3px;

  background: white;
}

.nav-links.active {
  left: 0;
  margin-top: 4rem;
}

.arrow {
  padding-left: 0.25rem;
  padding-right: 0.5rem;
}

.close-menu {
  position: fixed;
  top: 1rem;
  right: 1rem;

  color: white;
  font-size: 1.5rem;
  cursor: pointer;

  display: none;
}
img {
  max-width: 100%;
}
.hero-image img {
  /* width: 100%; */
}

.latin {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: white;
}
/* have to combind to reduce redundancy */
.japanese {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.image-text .latin {
  font-family: "Pacifico", sans-serif;
}

.image-text .japanese {
  font-family: "NotoSansJP", sans-serif;
}

.vision-container {
  /* border: 2px solid red; */
  width: 60%;
  margin: 0 auto;
  text-align: center;
  margin-top: 5rem;
}

.vision-text {
  text-align: start;
  margin-top: 2rem;
}

p {
  font-size: 16px;
}

.message-grid-container {
  /* border: 2px solid green; */
  display: grid;

  /* grid-template-rows: repeat(2, 1fr); */
  /*  */
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.item1 {
  order: 1;
}
.item2 {
  order: 2;
}
.item4 {
  order: 3;
}
.item3 {
  order: 4;
}
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* gap: 2rem; */
}

.message {
  background-color: whitesmoke;
}
.item3 .message-grid-item-heading {
  /* border: 2px solid red; */
  padding: 2rem 0;
}
.message-text {
  width: 90%;
  padding: 2rem 0;
  /* margin-left: 1rem; */
  /* margin-right: 1rem; */
}
.grid-item img {
  /* border: 2px solid red; */
  width: 100%;
}
.circleImage-container {
  width: 80%;
  margin: 0 auto;
}
.circleImage-flex-container {
  text-align: center;
  gap: 4rem;
  margin-bottom: 5rem;
}

.circleImage-heading,
.circleImage-item img {
  padding-bottom: 2rem;
}
.circleImage-info {
  margin: 0 auto;
}
.circleImage-item img,
.circleImage-info {
}

/* 🌟 */
.reason-container {
  position: relative;
  width: 90%;
  margin: 0 auto;
  /* border: 2px solid red; */
}
.ribbon {
  background-color: #00aeef;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -3%;
  left: 10%;
}
.reason-heading-container {
  text-align: center;
  border: 2px solid #00aeef;
  /* margin-inline: 3rem; */
  margin-bottom: 5rem;
}
.reason-heading-container > p {
  width: 100%;
  height: 1.5rem;
  background: #00aeef;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-small;
}
.reason-jp-heading-container h3 {
  padding-top: 1.5em;
}
.img-text img {
  width: 100%;
  padding: 2rem;
}
.img-text p {
  text-align: left;
  padding-inline: 2rem;
}
.img-text .p2 {
  padding-bottom: 3rem;
}
/* 🌿 */

.bg-sec-container {
  background-image: url(./images/bgSec04.jpg);
  background-size: cover;
  background-position: center;
  /* width: 100%; */
  height: 25rem;
  text-align: center;
  color: white;
  /* gap: 3rem; */
  padding: 3rem;
  margin-bottom: 5rem;
}

.story-section h2 {
  margin-bottom: 1rem;
}

.story-section p {
  text-align: start;
  /* border: 2px solid red; */
}
.success {
  /* border: 2px solid red; */
  margin-top: 4rem;
}
.comInfo-map-container {
  /* border: 2px solid green; */
  width: 90%;
  margin: 0 auto;
  margin-bottom: 5rem;
  /* gap: 3rem; */
}
.comInfo {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}
.left {
  text-align: end;
  margin-bottom: 1.2rem;
}

.right {
  margin-bottom: 1.2rem;
}

.comInfo {
  /* border: 2px solid red; */
}
.map-container {
  /* border: 2px solid red; */
}
iframe {
  width: 100%;
  height: 300px;
}
.footer {
  /* border: 2px solid green; */
  width: 90%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 3rem;
}
.footer-link {
  color: blue;
  cursor: pointer;
}

/* PC Version (≥ 768px) - Reset Styles */
@media (min-width: 768px) {
  .hamburger-menu,
  .close-menu,
  .nav-links .arrow {
    display: none;
  }
  .navbar {
  }
  .nav-links {
    position: static;
    /* border: 2px solid red; */
    display: flex;
    justify-content: end;
    gap: 2rem;
    padding-right: 2rem;
    /* position: absolute; */
    /* top: -15%; */
    /* right: -15%; */
    /* z-index: 100; */
  }
  .nav-links li {
    /* border: 2px solid red; */
    margin: 0;
    padding: 0;
    background: none;
  }
  /*  */
  .hero-image {
    width: 60%;
    max-width: 1200px;
    margin: 0 auto;
    /* position: absolute; */
    /* top: 0%; */
    /* right: 0%; */
    /* z-index: 100; */
  }
  p {
    font-size: 18px;
  }

  .vision-container {
    text-align: center;
    width: 40%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 0;
  }

  .vision-text {
    text-align: start;
  }
  .message-grid-container {
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  }

  .item1 {
    order: 1;
  }
  .item2 {
    order: 2;
  }
  .item3 {
    order: 3;
  }
  .item4 {
    order: 4;
  }

  .grid-item img {
    /* align-self:flex-start; */

    /* margin-top: -5.6rem; */
    /* transform: translateY(-2.75rem); */
  }

  .circleImage-flex-container {
    /* border: 2px solid red; */
    width: 60%;
    /* max-width: 1200px; */
    margin: 0 auto;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    /* align-items: center; */
    padding-bottom: 7rem;
  }
  .circleImage-item img,
  .circleImage-info {
    width: 12rem;
  }
  .reason-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  .ribbon {
    top: -3.9%;
    left: 5%;
  }
  .img-text {
    display: flex;
    padding: 3rem;
    gap: 2rem;
  }
  .img-text img {
    padding: 0;
    /* margin: 0; */
    /* width: 100%; */
    /* padding: 2rem; */
  }
  .img-text p {
    /* text-align: left; */
    /* padding-inline: 3rem; */
  }
  .reason-text {
    /* border: 2px solid red; */
    line-height: 2rem;
    /* word-spacing: 100px; */
  }
  .story-section--wrapper {
    display: flex;
    gap: 3rem;
    justify-content: center;
    align-items: center;
    width: 60%;
    max-width: 1200px;
    margin: 0 auto;
  }
  .success {
    margin: 0;
  }
  .comInfo-map-container {
    display: flex;
    justify-content: center;
    gap: 5rem;
  }
  iframe {
    /* width: 100%; */
    width: 400px;
    /* height: 300px; */
  }
  .footer {
    display: flex;
    justify-content: center;
    gap: 0.4em;
  }
}