:root {
  --font-jp: "Noto Sans JP", sans-serif;
  --font-jp-serif: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --font-en: "Inter", sans-serif;
  --color-main: #00a1e2;
  --color-white: #fff;
  --color-black: #000;
  --color-border: #d3d2d8;
  --color-bg-gray-1: #f9f9f9;
}

/* Reset & Layout */
* {
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

html {
  overflow-y: scroll;
  font-weight: 400;
  font-size: 62.5%;
}

body {
  margin: 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.6rem;
  font-family: "Inter", sans-serif;
  color: #2b2b2b;
  @supports (-webkit-touch-callout: none) {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

ol,
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

select::-ms-expand {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: 400;
  margin: 0;
}

a,
button {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  color: inherit;
}

figure {
  margin: 0;
}

/* End Reset */

.c-bg-primary {
  background: var(--color-main);
  color: var(--color-white);
}

.breadcrumb {
  padding-block: 20px;
}

.breadcrumb ul {
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.breadcrumb ul li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb ul li:not(:last-of-type)::after {
  content: ">";
  display: inline-block;
  margin-inline: 8px;
}

.breadcrumb ul li a {
  font-weight: 500;
  text-decoration: underline;
}

@media screen and (min-width: 769px) {
  .breadcrumb ul li a:hover {
    text-decoration: none;
  }
}

.breadcrumb ul li span {
  color: #666;
}
.container {
  max-width: 1640px;
  padding-inline: 20px;
  margin-inline: auto;
}

.container-sm {
  max-width: 1240px;
  padding-inline: 20px;
  margin-inline: auto;
}

header {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 40px 46px;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s ease;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 10;

  position: fixed;
  top: 0;
  padding-bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media screen and (max-width: 1280px) {
  header {
    padding-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  header {
    padding: 0 20px;
  }
}

.is-scroll {
  position: fixed;
  top: -32px;
  padding-bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media screen and (max-width: 768px) {
  .is-scroll {
    top: 0;
  }
}

main {
  padding-top: 132px;
}

@media screen and (max-width: 1280px) {
  main {
    padding-top: 110px;
  }
}

main.home {
  padding-top: 0;
}

@media screen and (max-width: 768px) {
  main {
    padding-top: 90px;
  }
}

/* --- Top Bar --- */
.top-bar {
  background-color: #fafafa;
  font-size: 13px;
  color: #555;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  .top-bar {
    display: none;
  }
}

.top-left {
  display: flex;
  gap: 20px;
  align-items: center;
}

.top-left i {
  margin-right: 5px;
  color: #2b2b2b;
}

/* --- Middle Header --- */
.header-mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  transition: all 0.3s ease;

  padding: 10px 0;
}

@media screen and (max-width: 768px) {
  .header-mid {
    padding: 15px 0;
  }
}

.is-scroll .header-mid {
  padding: 10px 0;
}

.menu {
  margin: 0;
}

.menu-item {
  position: relative;
  z-index: 1;
}

.menu-item::before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--color-main);
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.menu-item:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.mega-menu {
  position: absolute;
  width: 99vw;
  left: 50%;
  display: flex;
  gap: 20px;
  max-width: 1600px;
  padding: 40px 20px;
  background: #fff;
  top: 100%;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);

  top: calc(100% + 20px);
}
.mega-menu.is-show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.is-scroll .mega-menu {
  top: calc(100% + 20px);
}

@media screen and (max-width: 1023px) {
  .mega-menu {
    display: none;
  }
}

.mega-menu .categories-links ul {
  flex-direction: column;
  margin-top: 0;
  margin-left: 0;
  gap: 0;
}

.search-modal {
  position: fixed;
  top: 0;
  width: calc(100vw - 2px);
  height: 100vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  background: #fff;
  padding-block: 40px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.search-modal.is-show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.search-modal-header {
  padding: 40px 40px 0;
}

.search-modal-header::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-main);
  display: block;
  margin-top: 40px;
}

.search-modal-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .search-modal-title {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

.search-modal-header form {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  width: 60%;
  min-width: 300px;
}

@media screen and (max-width: 768px) {
  .search-modal-header form {
    gap: 5px;
  }
}

.search-modal-header form input {
  padding: 10px 15px;
  font-size: 14px;
  border: 1px solid #eee;
  border-radius: 6px;
  outline: none;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .search-modal-header form input {
    padding: 8px 12px;
  }
}

.search-modal-header form button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #eee;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border-radius: 0 6px 6px 0;
  width: 40px;
  height: 40px;
}

.search-modal-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: static;
  width: 100%;
  padding: 40px;
}

.close-modal {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.close-modal::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L11 11M1 11L11 1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 15px;
  aspect-ratio: 1/1;
  height: auto;
  display: block;
}

.site-logo img {
  height: 80px;
  object-fit: cover;
}

@media screen and (max-width: 1280px) {
  .site-logo img {
    height: 60px;
  }
}

@media screen and (max-width: 768px) {
  .site-logo {
    position: relative;
    z-index: 12;
  }
}

.search-box {
  flex: 1;
  display: flex;
  justify-content: center;

  justify-content: flex-end;
  padding-right: 20px;
}

.search-box.pc-only form {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .search-box {
    display: block;
    flex: unset;
    margin-inline: auto;
    max-width: 400px;
    width: 100%;
  }

  .search-box form {
    width: 100%;
    position: relative;
  }
}

@media screen and (min-width: 769px) {
  .search-box.sp-only {
    display: none;
  }
}

@media screen and (max-width: 1280px) {
  .search-box.pc-only {
    display: none;
  }
}

.is-scroll .search-box {
  justify-content: flex-end;
  padding-right: 20px;
}

.search-box form {
  position: relative;
}

.search-box input {
  width: 400px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 40px 0 15px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;

  max-width: 190px;
}

.is-scroll .search-box input {
  max-width: 190px;
}

@media screen and (max-width: 768px) {
  .search-box input,
  .is-scroll .search-box input {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
}

.search-box button {
  width: 38px;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1.5px solid var(--color-main);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: all 0.3s ease;
}

.search-box button::before {
  content: "";
  display: block;
  width: 15px;
  height: auto;
  aspect-ratio: 1/1;
  mask-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.0005 14.0005C8.78843 14.0005 9.56865 13.8453 10.2966 13.5438C11.0246 13.2423 11.686 12.8003 12.2431 12.2431C12.8003 11.686 13.2423 11.0246 13.5438 10.2966C13.8453 9.56865 14.0005 8.78843 14.0005 8.0005C14.0005 7.21257 13.8453 6.43236 13.5438 5.7044C13.2423 4.97645 12.8003 4.31501 12.2431 3.75786C11.686 3.20071 11.0246 2.75875 10.2966 2.45723C9.56865 2.1557 8.78843 2.0005 8.0005 2.0005C6.4092 2.0005 4.88308 2.63264 3.75786 3.75786C2.63264 4.88308 2.0005 6.4092 2.0005 8.0005C2.0005 9.5918 2.63264 11.1179 3.75786 12.2431C4.88308 13.3684 6.4092 14.0005 8.0005 14.0005ZM14.3205 12.9065L17.9005 16.4865C17.9959 16.5788 18.072 16.6892 18.1244 16.8113C18.1767 16.9333 18.2042 17.0645 18.2052 17.1973C18.2063 17.3301 18.1809 17.4618 18.1305 17.5846C18.0802 17.7075 18.0058 17.8191 17.9119 17.9129C17.8179 18.0067 17.7062 18.0809 17.5833 18.1311C17.4604 18.1813 17.3287 18.2065 17.1959 18.2052C17.0631 18.204 16.9319 18.1763 16.8099 18.1238C16.688 18.0713 16.5777 17.9951 16.4855 17.8995L12.9055 14.3195C11.298 15.5674 9.2753 16.1557 7.24926 15.9647C5.22322 15.7737 3.34611 14.8178 2.00005 13.2916C0.654 11.7653 -0.0598121 9.78345 0.00392902 7.74943C0.0676701 5.7154 0.904173 3.78213 2.34315 2.34315C3.78213 0.904173 5.7154 0.0676701 7.74943 0.00392902C9.78345 -0.0598121 11.7653 0.654 13.2916 2.00005C14.8178 3.34611 15.7737 5.22322 15.9647 7.24926C16.1557 9.2753 15.5674 11.298 14.3195 12.9055L14.3205 12.9065Z' fill='black'/%3E%3C/svg%3E%0A");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  background: var(--color-main);
  transition: all 0.3s ease;
}

@media screen and (min-width: 769px) {
  .search-box button:hover {
    background: var(--color-main);
  }

  .search-box button:hover::before {
    background: var(--color-white);
  }
}

.contact-btn {
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
  color: #fff;
  padding: 10px 28px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .contact-btn {
    padding: 10px 22px;
    font-size: 14px;
    color: var(--color-white);
    border-radius: 0;
    text-align: center;
    max-width: 400px;
    width: 100%;
    margin-inline: auto;
  }

  .contact-btn.pc-only {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .contact-btn.sp-only {
    display: none;
  }

  .contact-btn:hover {
    background: white;
    color: var(--color-main);
  }
}

.btn-main {
  background: var(--color-white);
  border: 2px solid var(--color-main);
  color: var(--color-main);
  padding: 10px 28px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.1em;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .btn-main {
    padding: 8px 15px;
    font-size: 12px;
  }

  .btn-main.icon-drive::after {
    width: 15px;
    aspect-ratio: 15/14;
  }
}

.btn-main.icon-drive::after {
  content: "";
  width: 20px;
  aspect-ratio: 20/18;
  mask-image: url("data:image/svg+xml,%3Csvg width='21' height='18' viewBox='0 0 21 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3929 0C12.7161 -2.80143e-06 13.0345 0.0783239 13.3208 0.228274C13.6071 0.378223 13.8528 0.595329 14.0369 0.861L14.1249 1L19.8979 11C20.0584 11.2779 20.1496 11.5904 20.1638 11.911C20.1781 12.2316 20.115 12.5509 19.9799 12.842L19.8979 13L17.5879 17C17.4263 17.2798 17.1994 17.5162 16.9265 17.6892C16.6536 17.8621 16.3429 17.9664 16.0209 17.993L15.8569 18H4.30991C3.98654 18.0002 3.66795 17.9219 3.38144 17.772C3.09494 17.622 2.84907 17.4048 2.66491 17.139L2.57791 17L0.26791 13C0.107462 12.7221 0.0162511 12.4096 0.00197903 12.089C-0.0122931 11.7684 0.0507932 11.4491 0.18591 11.158L0.26791 11L6.04291 1C6.20457 0.720095 6.43167 0.483543 6.70475 0.310603C6.97783 0.137663 7.28876 0.033488 7.61091 0.00699997L7.77391 0H12.3929ZM17.5889 13H7.19591L5.46391 16H15.8569L17.5889 13ZM7.19691 3L1.99991 12L3.73191 15L8.92791 6L7.19691 3ZM12.3929 2H8.92891L14.1249 11H17.5889L12.3929 2ZM10.0829 8L8.35091 11H11.8149L10.0829 8Z' fill='black'/%3E%3C/svg%3E%0A");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  background: var(--color-main);
  margin-left: 10px;
  vertical-align: -4px;
  display: inline-block;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  .btn-main.icon-drive::after {
    width: 18px;
    aspect-ratio: 15/14;
  }
}

@media screen and (min-width: 769px) {
  .btn-main:hover {
    background: var(--color-main);
    color: var(--color-white);
  }

  .btn-main.icon-drive:hover::after {
    background: var(--color-white);
  }
}

.btn-main-fill {
  background: var(--color-main);
  color: var(--color-white);
  border-color: var(--color-main);
}

@media screen and (min-width: 769px) {
  .btn-main-fill:hover {
    background: var(--color-white);
    color: var(--color-main);
    border-color: var(--color-main);
  }
}

.btn-main.icon-newtab::after {
  content: "";
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 2C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H17C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V11.737C18 11.4718 18.1054 11.2174 18.2929 11.0299C18.4804 10.8424 18.7348 10.737 19 10.737C19.2652 10.737 19.5196 10.8424 19.7071 11.0299C19.8946 11.2174 20 11.4718 20 11.737V17C20 17.7956 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7956 20 17 20H3C2.20435 20 1.44129 19.6839 0.87868 19.1213C0.316071 18.5587 0 17.7956 0 17V3C0 2.20435 0.316071 1.44129 0.87868 0.87868C1.44129 0.316071 2.20435 0 3 0H8.017C8.28222 0 8.53657 0.105357 8.72411 0.292893C8.91164 0.48043 9.017 0.734784 9.017 1C9.017 1.26522 8.91164 1.51957 8.72411 1.70711C8.53657 1.89464 8.28222 2 8.017 2H3Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4111 0.572115C19.5911 0.752635 19.6922 0.997174 19.6922 1.25212C19.6922 1.50706 19.5911 1.75159 19.4111 1.93211L10.6391 10.7181C10.55 10.8073 10.4441 10.8781 10.3276 10.9263C10.2111 10.9746 10.0862 10.9995 9.96011 10.9995C9.834 10.9995 9.70913 10.9746 9.59262 10.9263C9.47612 10.8781 9.37026 10.8073 9.28111 10.7181C9.10109 10.5376 9 10.2931 9 10.0381C9 9.78317 9.10109 9.53863 9.28111 9.35811L18.0541 0.572115C18.2341 0.392277 18.4782 0.29126 18.7326 0.29126C18.9871 0.29126 19.2311 0.392277 19.4111 0.572115Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.04 0C19.57 0 20 0.43 20 0.962V6C20 6.531 19.53 7 19 7C18.47 7 18 6.531 18 6V2H14C13.47 2 13 1.531 13 1C13 0.469 13.43 0 13.96 0H19.04Z' fill='black'/%3E%3C/svg%3E%0A");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  width: 15px;
  aspect-ratio: 1 / 1;
  background: var(--color-main);
  display: inline-block;
  margin-left: 8px;
  vertical-align: -2px;
  transition: all 0.3s ease;
}

.btn-main-fill.icon-newtab::after {
  background: var(--color-white);
}

@media screen and (min-width: 769px) {
  .btn-main-fill.icon-newtab:hover::after {
    background: var(--color-main);
  }
}

.header-right {
  display: flex;
}

.menu-toggle {
  display: none;
}

.bottom-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  transition: all 0.3s ease;

  border-color: transparent;
  bottom: calc(50% - 16px);
  transform: translate(-50%, 50%);
}

@media screen and (max-width: 1280px) {
  .bottom-nav {
    transform: translate(-50%, 50%);
    bottom: calc(50% - 16px);
  }
}

.bottom-nav::before {
  content: "";
  width: 99vw;
  max-width: 1600px;
  height: 1px;
  background: #f0f0f0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  background: transparent;
}

@media screen and (max-width: 1280px) {
  .bottom-nav::before {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .bottom-nav {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 11;
    background: var(--color-white);
    padding: 100px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 35px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    transform: unset;
  }

  .is-scroll .bottom-nav {
    padding: 100px 32px 40px;
  }

  .bottom-nav.active {
    visibility: visible;
    opacity: 1;
  }
}

.is-scroll .bottom-nav {
  border-color: transparent;
  bottom: calc(50% - 16px);
  transform: translate(-50%, 50%);
}

@media screen and (max-width: 768px) {
  .is-scroll .bottom-nav {
    bottom: unset;
    transform: unset;
  }
}

.is-scroll .bottom-nav::before {
  background: transparent;
}

.bottom-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 12px 0;
}

@media screen and (max-width: 1280px) {
  .bottom-nav ul {
    gap: 20px;
  }
}

.bottom-nav ul.menu {
  padding-block: 0px;
}

.bottom-nav ul.menu li {
  padding-block: 12px;
}

.bottom-nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: color 0.3s;
  display: block;
}

.bottom-nav .header-nav a {
  color: #2b2b2b;
}

@media screen and (min-width: 769px) {
  .bottom-nav a:hover {
    color: var(--color-main);
  }
}

.bottom-nav ul ul {
  position: absolute;
  padding: 20px;
  gap: 0;
  top: 99%;
  left: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  display: none;
  flex-direction: column;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .bottom-nav ul ul {
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    box-shadow: none;
    margin-top: 10px;
  }

  .bottom-nav ul ul a {
    display: block;
    position: relative;
    padding-left: 20px;
  }

  .bottom-nav ul ul a::before {
    content: "";
    width: 8px;
    height: 1px;
    background: var(--color-main);
    position: absolute;
    top: 12px;
    left: 0;
    line-height: 1.4;
  }
}

.bottom-nav li {
  position: relative;
}

@media screen and (min-width: 769px) {
  .bottom-nav li:hover > ul {
    display: flex;
  }
}

@media screen and (max-width: 768px) {
  .header-nav {
    border-block: 1px solid var(--color-border);
    padding-block: 20px 30px;
  }
}

.header-hamburger {
  width: 40px;
  aspect-ratio: 1/1;
  background: var(--color-main);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 11;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.header-hamburger span {
  width: 20px;
  height: 1px;
  background: var(--color-white);
  display: block;
  transition: all 0.3s ease, margin 0.3s 0.3s ease;
}

.header-hamburger span:nth-child(1) {
  margin-bottom: 6px;
}

.header-hamburger span:nth-child(3) {
  margin-top: 6px;
}

.header-hamburger.active span {
  transition: all 0.3s 0.3s ease, margin 0.3s ease;
}

.header-hamburger.active span:nth-child(1) {
  margin-bottom: -1px;
  transform: rotate(135deg);
}

.header-hamburger.active span:nth-child(2) {
  transform: rotate(45deg);
}

.header-hamburger.active span:nth-child(3) {
  margin-top: -1px;
  transform: rotate(45deg);
}

@media (min-width: 769px) {
  .header-hamburger {
    display: none;
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .bottom-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .bottom-nav ul li {
    font-weight: 400;
    font-size: 12px;
    line-height: 200%;
  }
}

.link-all {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.link-all::before {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-main);
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 0.3s ease;
}

.link-all:hover::before {
  transform: scaleX(0);
  transform-origin: right;
}

.link-all.arrow-down::after {
  transform: rotate(90deg);
}

@media screen and (max-width: 768px) {
  .link-all {
    font-size: 14px;
    margin-top: 40px;
    margin-inline: auto;
    max-width: 97px;
  }
}

@media screen and (min-width: 769px) {
  .link-all:hover {
    color: var(--color-main);
  }
}

.link-all::after {
  content: "";
  width: 16px;
  aspect-ratio: 1/1;
  mask-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.75' y='0.75' width='21.5' height='21.5' rx='3.25' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M12 7L16.5 11.5M16.5 11.5L12 16M16.5 11.5H6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  background: var(--color-main);
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

@media screen and (min-width: 769px) {
  .link-all.sp-only {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .link-all.pc-only {
    display: none;
  }
}

.video-mv {
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.video-mv video {
  width: 100%;
  height: 70vh;
  object-fit: cover;
  margin-inline: auto;
  display: block;
}

@media screen and (max-width: 768px) {
  .video-mv video {
    height: 50vh;
  }
}

.next-waves {
  position: absolute;
  bottom: -1px;
  width: 100%;
  min-height: 100px;
  max-height: 150px;
}

.next-parallax > use {
  animation: moveWaves 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.next-parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 12s;
}
.next-parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 18s;
}
.next-parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 24s;
}
.next-parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 30s;
}

@keyframes moveWaves {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

.latest-blog-section {
  width: 100%;
  padding-block: 100px;
  background: #fff;
  color: #2b2b2b;
}

@media screen and (max-width: 768px) {
  .latest-blog-section {
    padding-block: 60px;
  }
}

.latest-blog-section .blog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.title-block.center {
  text-align: center;
}

.title-block.center h2::after {
  margin-inline: auto;
}

.title-block h2 {
  font-size: 42px;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .title-block h2 {
    font-size: 30px;
  }
}

.title-block h2::after {
  content: "";
  width: 20px;
  height: 2px;
  background-color: var(--color-main);
  display: block;
  margin-block: 10px;
}

.title-block p {
  font-size: 18px;
  color: #777;
  margin-top: 5px;
}

@media screen and (max-width: 768px) {
  .title-block p {
    font-size: 16px;
  }
}

.title-block.smaller h2 {
  font-size: 30px;
}

.title-block.smaller p {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  .title-block.smaller h2 {
    font-size: 20px;
  }

  .title-block.smaller p {
    font-size: 14px;
  }
}

.latest-blog-section .all-blogs {
  color: #2b2b2b;
  text-decoration: none;
  font-weight: 500;
}

.latest-blog-section .blog-list {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

@media screen and (max-width: 1024px) {
  .latest-blog-section .blog-list {
    gap: 20px;
  }
}

.latest-blog-section .blog-card {
  overflow: hidden;
  transition: all 0.3s ease;
  width: calc((100% - 24px * 4) / 5);
}

@media screen and (min-width: 769px) {
  .latest-blog-section .blog-card:hover .blog-image img {
    transform: scale(1.05);
  }

  .latest-blog-section .blog-card:hover .blog-category {
    background: var(--color-main);
    color: #fff;
  }
}

@media screen and (max-width: 1024px) {
  .latest-blog-section .blog-card {
    width: calc((100% - 24px * 2) / 3);
  }
}

@media screen and (max-width: 768px) {
  .latest-blog-section .blog-card {
    width: calc(50% - 10px);
  }
}

.latest-blog-section .blog-info {
  margin-top: 12px;
}

.latest-blog-section .meta {
  font-size: 13px;
  color: #888;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.latest-blog-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.5;
}

.latest-blog-section .read-more {
  font-size: 14px;
  text-decoration: none;
  color: #2b2b2b;
  font-weight: 500;
}

.blog-card a {
  color: #2b2b2b;
}

.blog-category {
  border: 1px solid var(--color-main);
  color: var(--color-main);
  padding: 2px 8px;
  margin-right: 10px;
  border-radius: 3px;
  font-size: 10px;
  transition: all 0.3s ease;
}

.blog-date {
  font-size: 12px;
  color: #888;
  font-family: "Inter", sans-serif;
}

.blog-image {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
  aspect-ratio: 4/3;
}

.blog-title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  max-width: 100%;
}

.blog-title.has-pdf::after {
  content: "";
  width: 25px;
  aspect-ratio: 35/21;
  mask-image: url("data:image/svg+xml;utf8,<svg width='42' height='23' viewBox='0 0 42 23' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 12H14C14.5304 12 15.0391 11.7893 15.4142 11.4142C15.7893 11.0391 16 10.5304 16 10C16 9.46957 15.7893 8.96086 15.4142 8.58579C15.0391 8.21071 14.5304 8 14 8H12V16M26 12H29M30 8H26V16M19 8V16H21C21.5304 16 22.0391 15.7893 22.4142 15.4142C22.7893 15.0391 23 14.5304 23 14V10C23 9.46957 22.7893 8.96086 22.4142 8.58579C22.0391 8.21071 21.5304 8 21 8H19Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><rect x='1' y='1' width='40' height='21' rx='3' stroke='black' stroke-width='2'/></svg>");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  background-color: var(--color-main);
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

@media (max-width: 768px) {
  .latest-blog-section .container {
    padding: 0 20px;
  }

  .latest-blog-section .blog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

.section-bg-gray {
  background: var(--color-bg-gray-1);
  padding-block: 100px;
}

@media screen and (max-width: 768px) {
  .section-bg-gray {
    padding-block: 60px;
  }
}

.section-bg-white {
  background: #fff;
  padding-block: 100px;
}

@media screen and (max-width: 768px) {
  .section-bg-white {
    padding-block: 60px;
  }
}

.our-strengths-box {
  margin-top: 50px;
  background: rgba(0, 161, 226, 0.16);
  border-radius: 10px;
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.06);
  padding: 40px 30px;
}

@media screen and (max-width: 768px) {
  .our-strengths-box {
    padding: 30px 20px;
    border-radius: 4px;
    margin-top: 30px;
  }
}

.our-strengths-box h3 {
  position: relative;
  font-size: 20px;
  color: var(--color-main);
  font-weight: 600;
  margin-bottom: 20px;
  padding-left: 35px;
}

@media screen and (max-width: 768px) {
  .our-strengths-box h3 {
    font-size: 18px;
    margin-bottom: 15px;
    padding-left: 25px;
  }
}

.our-strengths-box h3:not(:first-of-type) {
  margin-top: 30px;
}

.our-strengths-box h3::before {
  content: "";
  width: 20px;
  height: 2px;
  background: #333;
  position: absolute;
  left: 0;
  top: 20px;
}

@media screen and (max-width: 768px) {
  .our-strengths-box h3::before {
    width: 15px;
    height: 1px;
    top: 20px;
  }
}

.our-strengths-box * {
  color: #232323;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  line-height: 2;
}

@media screen and (max-width: 768px) {
  .our-strengths-box * {
    font-size: 14px;
  }
}

.our-strengths-box ul {
  list-style: disc;
  margin-left: 20px;
}

@media screen and (max-width: 768px) {
  .our-strengths-box ul {
    margin-left: 15px;
  }
}

.our-strengths-inner {
  max-width: 1080px;
  margin-inline: auto;
}

.our-strengths-list {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

@media screen and (max-width: 1080px) {
  .our-strengths-list {
    gap: 20px;
    margin-top: 20px;
  }
}

.our-strengths-list li {
  background: rgba(0, 161, 226, 0.16);
  border-radius: 10px;
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.06);
  width: calc((100% - 30px * 2) / 3);
  padding: 40px 20px;
}

@media screen and (max-width: 1080px) {
  .our-strengths-list li {
    width: calc((100% - 20px) / 2);
    border-radius: 4px;
  }
}

@media screen and (max-width: 768px) {
  .our-strengths-list li {
    width: 100%;
    padding: 20px;
    border-radius: 4px;
  }
}

.our-strengths-list li h3 {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  text-align: center;
  color: #333;
  min-height: 81px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@media screen and (max-width: 768px) {
  .our-strengths-list li h3 {
    font-size: 16px;
    min-height: unset;
  }
}

.our-strengths-list li h3 span {
  color: var(--color-main);
  display: block;
  font-size: 20px;
}

@media screen and (max-width: 768px) {
  .our-strengths-list li h3 span {
    font-size: 18px;
  }
}

.our-strengths-list li p {
  color: #232323;
  font-family: var(--s-font-5fb2febc);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  line-height: 2;
  margin-top: 15px;
}

@media screen and (max-width: 768px) {
  .our-strengths-list li p {
    font-size: 14px;
  }
}

.categoried-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 40px;
}

@media screen and (max-width: 1080px) {
  .categories-list {
    gap: 20px;
  }
}

.categories-block {
  width: calc((100% - 30px * 2) / 3);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
  background: #fff;
}

@media screen and (max-width: 1080px) {
  .categories-block {
    width: calc((100% - 20px) / 2);
    border-radius: 4px;
  }
}

@media screen and (max-width: 560px) {
  .categories-block {
    width: 100%;
  }
}

.categories-image {
  width: 100%;
  height: 170px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.categories-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.categories-links {
  padding: 20px;
}

.categories-links * {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
  color: #232323;
}

@media screen and (max-width: 768px) {
  .categories-links * {
    font-size: 14px;
  }
}

.categories-links a {
  padding: 5px 0 5px 15px;
  display: block;
  position: relative;
  z-index: 1;
  letter-spacing: 0.1em;
}

.categories-links a::before {
  content: "";
  width: 5px;
  height: 2px;
  background: var(--color-main);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
  .categories-links a::before {
    height: 1px;
  }
}

.categories-links .main-link {
  border: 1px solid var(--color-main);
  background: var(--color-main);
  color: #fff;
  border-radius: 5px;
  padding: 10px 20px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  .categories-links .main-link {
    border-radius: 2px;
  }
}

.categories-links .main-link::before {
  display: none;
}

.categories-links .main-link::after {
  content: "";
  width: 20px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #fff;
  mask-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.75' y='0.75' width='21.5' height='21.5' rx='10.75' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M12 7L16.5 11.5M16.5 11.5L12 16M16.5 11.5H6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (min-width: 769px) {
  .categories-links .main-link:hover {
    background: #fff;
    color: var(--color-main);
  }

  .categories-links .main-link:hover::after {
    background: var(--color-main);
  }
}

.categories-links ul {
  margin-top: 10px;
  margin-left: 7px;
}

.categories-links ul li a {
  transition: all 0.3s ease;
}

@media screen and (min-width: 769px) {
  .categories-links ul li a:hover {
    color: var(--color-main);
  }
}

.categories-banner {
  width: calc((100% - 40px * 2) / 3);
}

.categories-banner a {
  overflow: hidden;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
  background: #fff;
  display: block;
  border-radius: 10px;
}

.categories-banner figure {
  width: 100%;
  overflow: hidden;
}

.categories-banner figure img {
  width: 100%;
  height: 100%;
  max-height: 410px;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.product-slider {
  position: relative;
  z-index: 1;
  padding-bottom: 50px;
  padding-top: 120px;
  margin-top: -70px;
  overflow: hidden;
  margin-inline: -20px;
}

.product-slider .swiper-slide {
  max-width: 230px;
  height: auto;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .product-slider .swiper-slide {
    border-radius: 4px;
  }
}

.product-slider .swiper-wrapper {
  transition-timing-function: linear;
  height: auto;
}

.product-slider .swiper-slide .product-image {
  width: 100%;
  aspect-ratio: 230/170;
  overflow: hidden;
}

.product-slider .swiper-slide .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
  transform: scale(1.01);
}

@media screen and (min-width: 769px) {
  .product-slider .swiper-slide:hover .product-image img {
    transform: scale(1.05);
  }
}

.product-slider .product-info {
  background: var(--color-white);
  padding: 40px 10px 20px;
}

.product-slider .product-info h3 {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.product-slider .swiper-controls {
  display: flex;
  gap: 10px;
  position: absolute;
  bottom: calc(100% - 80px);
  right: 20px;
}

.product-slider .swiper-controls .product-button-prev,
.product-slider .swiper-controls .product-button-next {
  position: static;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.product-slider .swiper-controls .product-button-prev img {
  display: block;
  transform: scaleX(-1);
}

.product-slider .swiper-controls .swiper-button-prev svg,
.product-slider .swiper-controls .swiper-button-next svg {
  display: block;
}

.product-slider .swiper-controls .swiper-button-prev::after,
.product-slider .swiper-controls .swiper-button-next::after {
  display: none;
}

.brand-slider {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: 30px;
  padding-block: 20px;
  transform: scaleX(-1);
}

.brand-slider .swiper-wrapper {
  transition-timing-function: linear !important;
  height: auto;
}

.brand-slider .swiper-slide {
  width: 200px;
  padding: 20px;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
  .brand-slider .swiper-slide {
    border-radius: 4px;
    width: 150px;
  }
}

.brand-slider .swiper-slide .brand-image {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-slider .swiper-slide .brand-image img {
  width: 90%;
  height: auto;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}

.btn-to-top {
  position: fixed;
  z-index: 20;
  right: 20px;
  bottom: 20px;
  width: 45px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-white);
  transition: all 0.3s ease;
}

.btn-to-top::before {
  content: "";
  width: 13px;
  aspect-ratio: 13/8;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  mask-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.292786 7.36379C0.480314 7.55126 0.734622 7.65657 0.999786 7.65657C1.26495 7.65657 1.51926 7.55126 1.70679 7.36379L6.65679 2.41379L11.6068 7.36379C11.7954 7.54594 12.048 7.64674 12.3102 7.64446C12.5724 7.64218 12.8232 7.53701 13.0086 7.3516C13.194 7.1662 13.2992 6.91538 13.3015 6.65319C13.3037 6.39099 13.2029 6.13839 13.0208 5.94979L7.36379 0.292786C7.17626 0.105315 6.92195 0 6.65679 0C6.39162 0 6.13731 0.105315 5.94979 0.292786L0.292786 5.94979C0.105315 6.13731 0 6.39162 0 6.65679C0 6.92195 0.105315 7.17626 0.292786 7.36379Z' fill='black'/%3E%3C/svg%3E%0A");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  background: var(--color-white);
  transition: all 0.3s ease;
  z-index: 2;
  mix-blend-mode: difference;
}

.btn-to-top::after {
  content: "";
  width: 100%;
  height: 50%;
  background: var(--color-black);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.footer {
  background: #e1f1fb;
  padding-block: 100px 0;
}

@media screen and (max-width: 768px) {
  .footer {
    padding-block: 60px 0;
  }
}

@media screen and (max-width: 768px) {
  .footer-logo {
    display: flex;
    justify-content: center;
  }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
  .footer-links {
    gap: 20px;
    margin-top: 30px;
  }
}

.footer-links .footer-col {
  flex: 1;
  min-width: 150px;
}

@media screen and (max-width: 489px) {
  .footer-links .footer-col {
    width: 100%;
  }
}

.footer-links .footer-col h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  padding-block: 5px 10px;
  display: flex;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
}

.footer-links .footer-col h4::before {
  content: "";
  width: 100%;
  height: 1px;
  background: #00a6e8;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.footer-links .footer-col h4 a {
  position: relative;
  z-index: 1;
  background: #e1f1fb;
  padding-right: 15px;
  transition: all 0.3s ease;
}

.footer-links .footer-col h4 a::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-main);
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

@media screen and (min-width: 769px) {
  .footer-links .footer-col h4 a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

@media screen and (min-width: 769px) {
  .footer-links .footer-col h4 a:hover {
    color: var(--color-main);
  }
}

.footer-links .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links .footer-col ul li {
  margin-bottom: 10px;
}

.footer-links .footer-col ul li a {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  color: #232323;
  transition: all 0.3s ease;
  position: relative;
}

.footer-links .footer-col ul li a::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--color-main);
  position: absolute;
  bottom: 0;
  left: 0;
}

.footer-links .footer-col ul li a::after {
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

@media screen and (min-width: 769px) {
  .footer-links .footer-col ul li a:hover {
    color: var(--color-main);
  }

  .footer-links .footer-col ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.footer-copy {
  background: var(--color-main);
  color: var(--color-white);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  padding-block: 10px;
  margin-top: 60px;
  letter-spacing: 0.1em;
  font-family: "Inter", sans-serif;
}

@media screen and (max-width: 768px) {
  .page-visual {
    padding-top: 80px;
  }
}

.page-visual-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .page-visual-inner {
    flex-direction: column;
  }
}

.page-visual-image {
  width: 60%;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .page-visual-image {
    width: 100%;
    padding-inline: 20px;
    padding-top: 30px;
  }
}

.page-visual-image::before {
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  background: linear-gradient(to right, #fff, transparent);
}

@media screen and (max-width: 768px) {
  .page-visual-image::before {
    display: none;
  }
}

.page-visual-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .page-visual-image img {
    border-radius: 4px;
    height: 220px;
  }
}

.page-visual-title {
  width: 40%;
  padding-left: 40px;
  padding-block: 40px;
}

@media screen and (max-width: 768px) {
  .page-visual-title {
    width: 100%;
    padding-inline: 20px;
  }
}

.title-border {
  font-size: 28px;
  font-weight: 700;
  color: #232323;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 16px;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .title-border {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

.title-border::before {
  content: "";
  width: 120px;
  height: 1px;
  background: var(--color-main);
  position: absolute;
  bottom: -1px;
  left: 0;
}

@media screen and (max-width: 768px) {
  .title-border::before {
    width: 80px;
  }
}

.map-item:not(:first-of-type) {
  border-top: 1px dashed var(--color-border);
}

.map-item-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-block: 50px;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .map-item-inner {
    padding-block: 30px;
    flex-direction: column;
  }
}

.map-item-info {
  width: 37.5%;
}

@media screen and (max-width: 768px) {
  .map-item-info {
    width: 100%;
  }
}

.map-item-info h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #232323;
  padding-left: 20px;
  border-left: 4px solid var(--color-main);
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .map-item-info h3 {
    font-size: 16px;
    margin-bottom: 10px;
    padding-left: 15px;
    border-width: 2px;
  }
}

.map-item-info p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: #232323;
}

.map-item-iframe {
  width: 56.25%;
}

@media screen and (max-width: 768px) {
  .map-item-iframe {
    width: 100%;
    margin-top: 20px;
  }
}

.map-item-iframe iframe {
  width: 100%;
  height: 250px;
}

@media screen and (max-width: 768px) {
  .map-item-iframe iframe {
    aspect-ratio: 4/3;
    height: auto;
  }
}

.categories-list {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 60px;
}

.category-item {
  width: calc((100% - 20px * 4) / 5);
}

@media screen and (max-width: 768px) {
  .category-item {
    width: calc((100% - 20px * 2) / 3);
  }
}

@media screen and (max-width: 480px) {
  .category-item {
    width: calc(50% - 10px);
  }
}

.category-box-link {
  background-color: #e1f1fb;
  border-radius: 10px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.05);
  padding: 25px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: block;
}

@media screen and (max-width: 768px) {
  .category-box-link {
    padding: 15px;
    border-radius: 4px;
  }
}

@media screen and (min-width: 769px) {
  .category-box-link:hover {
    transform: translateY(-5px);
  }

  .category-box-link:hover h3 {
    color: var(--color-main);
  }
}

.category-box-link .icon {
  width: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 50%;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .category-box-link .icon {
    width: 50px;
  }
}

.category-box-link .icon svg {
  max-width: 37px;
}

@media screen and (max-width: 768px) {
  .category-box-link .icon svg {
    max-width: 25px;
  }
}

.category-box-link h3 {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-top: 15px;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  .category-box-link h3 {
    font-size: 14px;
  }
}

.categories-search {
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
  .categories-search {
    margin-top: 30px;
  }
}

.categories-search-title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #232323;
}

@media screen and (max-width: 768px) {
  .categories-search-title {
    font-size: 20px;
  }
}

.categories-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.categories-search-form input {
  width: calc(50% - 70px);
  padding: 9px 15px;
  font-size: 14px;
  line-height: 1.3;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e1e5eb;
  transition: 0.2s;
  height: 45px;
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .categories-search-form input {
    width: calc(100% - 50px);
    height: 40px;
  }
}

.categories-search-form input::placeholder {
  font-size: 14px;
  color: #d1d1d1;
}

.categories-search-form input:focus {
  border-color: var(--color-main);
  outline: none;
}

.categories-search-form button.contact-btn {
  height: 45px;
  width: 70px;
  padding: 10px;
}

@media screen and (max-width: 768px) {
  .categories-search-form button.contact-btn {
    width: 50px;
    height: 40px;
    padding: 2px;
    border-radius: 4px;
  }
}

.section-products {
  padding-block: 70px;
}

@media screen and (max-width: 768px) {
  .section-products {
    padding-block: 40px;
  }
}

.section-products.bg-gray {
  background: var(--color-bg-gray-1);
}

.products-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .products-head {
    margin-bottom: 20px;
    gap: 20px;
  }
}

.title-products {
  font-size: 30px;
  font-weight: 700;
  color: #232323;
}

@media screen and (max-width: 768px) {
  .title-products {
    font-size: 20px;
  }
}

.products-head .title-products {
  width: 50%;
}

@media screen and (max-width: 768px) {
  .products-head .title-products {
    width: 100%;
  }
}

.list-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}

@media screen and (max-width: 768px) {
  .list-filter {
    gap: 10px;
    justify-content: flex-start;
  }
}

.list-filter li {
  font-size: 14px;
  font-weight: 600;
  color: #232323;
  padding: 5px 15px;
  border-radius: 30px;
  letter-spacing: 0.1em;
  background-color: #fff;
  border: 1px solid var(--color-main);
  transition: all 0.3s ease;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .list-filter li {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
  }
}

.list-filter li.active {
  background-color: var(--color-main);
  color: #fff;
}

@media screen and (min-width: 769px) {
  .list-filter li:hover {
    background-color: var(--color-main);
    color: #fff;
  }
}

.products-list {
  margin-top: 40px;
}

.products-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.products-list ul li {
  width: calc((100% - 20px * 5) / 6);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.05);
  padding: 20px;
  transition: all 0.3s ease;
  background: #fff;
}

@media screen and (max-width: 1024px) {
  .products-list ul li {
    width: calc((100% - 20px * 3) / 4);
    border-radius: 4px;
  }
}

@media screen and (max-width: 768px) {
  .products-list ul li {
    width: calc((100% - 20px * 2) / 3);
  }
}

@media screen and (max-width: 480px) {
  .products-list ul li {
    width: calc(50% - 10px);
  }
}

.products-list ul li a {
  display: block;
}

.products-list ul li a figure {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.products-list ul li a figure img {
  width: 100%;
  max-width: 80%;
  margin-inline: auto;
  display: block;
  transition: all 0.3s ease;
}
@media screen and (min-width: 769px) {
  .products-list ul li a figure img:hover {
    transform: scale(1.05);
  }
}

.products-list ul li a h3.product-name {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
  color: #232323;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}

@media screen and (max-width: 768px) {
  .products-list ul li a h3.product-name {
    font-size: 12px;
  }
}

.products-btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .products-btn {
    margin-top: 30px;
  }
}

.single-product {
  background: var(--color-white);
}

/* ===========================
   MAGIC CURSOR BASE STYLES
   =========================== */

#magic-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none; /* not allow click */
  z-index: 9999;
  mix-blend-mode: difference;
}

@media (max-width: 768px) {
  #magic-cursor {
    display: none;
  }
}
/* --- INNER CIRCLE --- */
.cursor-inner {
  position: absolute;
  width: 10px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #fff; /* dark circle */
  transform: translate(-50%, -50%);
  transition: all 0.1s ease;
  mix-blend-mode: difference; /* create eye-catching effect if the background is bright */
}

/* --- OUTER CIRCLE (BORDER) --- */
.cursor-outer {
  position: absolute;
  width: 42px;
  aspect-ratio: 1/1;
  border: 1.5px solid #fff; /* blue border */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.1s ease;
  box-sizing: border-box;
}

/* --- HOVER STATE (link, button, etc. cursor) --- */
.cursor-inner.is-hover {
  width: 15px;
  transform: translate(-50%, -50%) scale(1.3);
}

.cursor-outer.is-hover {
  transform: translate(-50%, -50%) scale(1.1);
}

/* --- HIDE WHEN OUT OF WINDOW (optional hide cursor) --- */
.cursor-inner.is-hidden,
.cursor-outer.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* --- OPTIONAL: LIGHT TRAIL FEEL (optional light trail feel) --- */
.cursor-outer {
  backdrop-filter: blur(2px);
}

/* --- RESPONSIVE: DISABLE ON MOBILE (optional disable cursor on mobile) --- */
@media (pointer: coarse), (max-width: 900px) {
  #magic-cursor {
    display: none;
  }
}

.u-mt-10 {
  margin-top: 10px;
}

.u-mt-20 {
  margin-top: 20px;
}

.u-mt-30 {
  margin-top: 30px;
}

.u-mt-40 {
  margin-top: 40px;
}

.u-mt-50 {
  margin-top: 50px;
}

.u-mb-10 {
  margin-bottom: 10px;
}

.u-mb-20 {
  margin-bottom: 20px;
}

.u-mb-30 {
  margin-bottom: 30px;
}

.u-mb-40 {
  margin-bottom: 40px;
}

.u-mb-50 {
  margin-bottom: 50px;
}

/* --- Pagination --- */
.pagination {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.pagination a,
.pagination span {
  border: 1px solid var(--color-main);
  width: 40px;
  font-weight: 700;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  color: #333;
  transition: all 0.2s ease;
  font-family: var(--font-en);
  color: var(--color-main);
}

@media screen and (max-width: 768px) {
  .pagination a,
  .pagination span {
    width: 35px;
    font-size: 12px;
  }
}

.pagination a:hover {
  background: var(--color-main);
  border-color: var(--color-main);
  color: #fff;
}

.pagination .current {
  background: var(--color-main);
  color: #fff;
  border-color: var(--color-main);
}

.pagination .prev::before,
.pagination .next::before {
  width: 7px;
  aspect-ratio: 7/11;
  content: "";
  display: block;
  background: var(--color-main);
  mask-image: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.83078 5.2458L0.290784 1.7058C0.104533 1.51844 -8.58307e-06 1.26498 -8.58307e-06 1.0008C-8.58307e-06 0.736612 0.104533 0.483161 0.290784 0.295798C0.383747 0.20207 0.494348 0.127675 0.616207 0.0769067C0.738066 0.026138 0.868772 0 1.00078 0C1.1328 0 1.2635 0.026138 1.38536 0.0769067C1.50722 0.127675 1.61782 0.20207 1.71078 0.295798L5.95078 4.5358C6.04451 4.62876 6.11891 4.73936 6.16967 4.86122C6.22044 4.98308 6.24658 5.11379 6.24658 5.2458C6.24658 5.37781 6.22044 5.50852 6.16967 5.63037C6.11891 5.75223 6.04451 5.86284 5.95078 5.9558L1.71078 10.2458C1.61734 10.3385 1.50653 10.4118 1.38469 10.4616C1.26285 10.5113 1.13239 10.5366 1.00078 10.5358C0.869177 10.5366 0.738715 10.5113 0.616878 10.4616C0.49504 10.4118 0.384224 10.3385 0.290784 10.2458C0.104533 10.0584 -8.58307e-06 9.80498 -8.58307e-06 9.5408C-8.58307e-06 9.27661 0.104533 9.02316 0.290784 8.8358L3.83078 5.2458Z' fill='black'/%3E%3C/svg%3E%0A");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  margin-left: 3px;
}

@media screen and (min-width: 769px) {
  .pagination .prev:hover::before,
  .pagination .next:hover::before {
    background: var(--color-white);
  }
}

.pagination .prev::before {
  transform: scaleX(-1);
  margin-right: 3px;
  margin-left: 0;
}

.recruit-categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .recruit-categories ul {
    gap: 10px;
  }
}

.recruit-categories ul li {
  border: 2px solid #00a1e26b;
  border-radius: 30px;
  padding: 0 15px 1px;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

@media screen and (min-width: 769px) {
  .recruit-categories ul li:hover {
    background: var(--color-main);
    color: var(--color-white);
  }
}

.recruit-categories ul li.active {
  background: var(--color-main);
  color: var(--color-white);
  border-color: var(--color-main);
}

.recruit-content {
  margin-top: 40px;
}

.recruit-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 40px;
}

.recruit-list li {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.recruit-list li a {
  display: flex;
  padding: 20px;
  background: var(--color-white);
}

@media screen and (max-width: 768px) {
  .recruit-list li a {
    padding: 15px;
    flex-direction: column;
    gap: 10px;
  }
}

.recruit-list-image {
  width: 200px;
  aspect-ratio: 20/15;
  overflow: hidden;
  background: #ccc;
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .recruit-list-image {
    width: 100%;
  }
}

.recruit-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit-list-content {
  flex: 1;
  padding-left: 30px;
}

@media screen and (max-width: 768px) {
  .recruit-list-content {
    padding-left: 0;
  }
}

.recruit-list-category {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}

.recruit-list-category time {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
  font-family: var(--font-en);
  letter-spacing: 0.05em;
}

.recruit-list-category span {
  border: 2px solid #00a1e26b;
  border-radius: 30px;
  padding: 0 15px 1px;
  font-weight: 700;
  font-size: 12px;
}

.recruit-list-title {
  font-size: 16px;
  font-weight: 700;
  color: #232323;
  line-height: 1.6;
  letter-spacing: 0.05em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}

.single-head-container {
  display: flex;
  flex-wrap: wrap;
}

.single-head-info {
  width: 50%;
  padding-right: 40px;
}

@media screen and (max-width: 768px) {
  .single-head-info {
    width: 100%;
    padding-right: 0;
  }
}

.single-head-image {
  width: 50%;
  aspect-ratio: 600/360;
  border-radius: 4px;
  background: #ccc;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .single-head-image {
    width: 100%;
    margin-top: 30px;
  }
}

.single-head-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-head-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  padding-left: 25px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .single-head-title {
    font-size: 14px;
    padding-left: 20px;
  }
}

.single-head-title::before {
  content: "";
  width: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='8' rx='4' fill='url(%23paint0_linear_3004_15942)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_3004_15942' x1='8' y1='-1.75' x2='8.56817e-08' y2='10.25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.211538' stop-color='%2300A1E2'/%3E%3Cstop offset='0.677885' stop-color='%23CBD3F9'/%3E%3Cstop offset='1' stop-color='%23FEFEFE'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
  .single-head-title::before {
    width: 8px;
  }
}

.single-head-desc {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin-top: 25px;
}

@media screen and (max-width: 768px) {
  .single-head-desc {
    font-size: 16px;
    margin-top: 20px;
  }
}

.single-head-position {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 25px;
}

@media screen and (max-width: 768px) {
  .single-head-position {
    font-size: 24px;
    margin-top: 20px;
  }
}

.single-content {
  padding-block: 80px 0;
}

@media screen and (max-width: 768px) {
  .single-content {
    padding-block: 60px 0;
  }
}

.single-content h2 {
  font-size: 24px;
  line-height: 1.6;
  font-weight: 500;
  position: relative;
  padding-left: 15px;
  z-index: 1;
  border-left: 2px solid var(--color-main);
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .single-content h2 {
    font-size: 18px;
    margin-top: 30px;
  }
}

.single-content :first-child {
  margin-top: 0;
}

.single-content p {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-top: 24px;
}

@media screen and (max-width: 768px) {
  .single-content p {
    font-size: 14px;
    margin-top: 20px;
  }
}

.single-content ul {
  margin-top: 24px;
  padding-left: 20px;
  list-style: disc;
}

@media screen and (max-width: 768px) {
  .single-content ul {
    margin-top: 20px;
  }
}

.single-content ul li {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .single-content ul li {
    font-size: 14px;
    margin-top: 8px;
  }
}

.single-content table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 161, 226, 0.1);
  margin-top: 30px;
}

.single-content table th,
.single-content table td {
  padding: 15px 20px;
  border: 1px solid var(--color-white);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--color-black);
  font-family: var(--font-jp-serif);
}

.single-content table th {
  width: 240px;
  font-weight: 700;
  color: #111;
  background: rgba(0, 161, 226, 0.1);
}

.single-content table td {
  color: #333;
  text-align: left;
  vertical-align: top;
}

.single-content table td p:not(:first-of-type) {
  margin-top: 20px;
}

.single-content table a {
  color: var(--color-main);
  text-decoration: underline;
}

.single-content table a[target="_blank"]::after {
  content: "";
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 2C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H17C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V11.737C18 11.4718 18.1054 11.2174 18.2929 11.0299C18.4804 10.8424 18.7348 10.737 19 10.737C19.2652 10.737 19.5196 10.8424 19.7071 11.0299C19.8946 11.2174 20 11.4718 20 11.737V17C20 17.7956 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7956 20 17 20H3C2.20435 20 1.44129 19.6839 0.87868 19.1213C0.316071 18.5587 0 17.7956 0 17V3C0 2.20435 0.316071 1.44129 0.87868 0.87868C1.44129 0.316071 2.20435 0 3 0H8.017C8.28222 0 8.53657 0.105357 8.72411 0.292893C8.91164 0.48043 9.017 0.734784 9.017 1C9.017 1.26522 8.91164 1.51957 8.72411 1.70711C8.53657 1.89464 8.28222 2 8.017 2H3Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4111 0.571993C19.5911 0.752513 19.6922 0.997052 19.6922 1.25199C19.6922 1.50693 19.5911 1.75147 19.4111 1.93199L10.6391 10.718C10.55 10.8072 10.4441 10.8779 10.3276 10.9262C10.2111 10.9745 10.0862 10.9993 9.96011 10.9993C9.834 10.9993 9.70913 10.9745 9.59262 10.9262C9.47612 10.8779 9.37026 10.8072 9.28111 10.718C9.10109 10.5375 9 10.2929 9 10.038C9 9.78305 9.10109 9.53851 9.28111 9.35799L18.0541 0.571993C18.2341 0.392155 18.4782 0.291138 18.7326 0.291138C18.9871 0.291138 19.2311 0.392155 19.4111 0.571993Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.04 0C19.57 0 20 0.43 20 0.962V6C20 6.531 19.53 7 19 7C18.47 7 18 6.531 18 6V2H14C13.47 2 13 1.531 13 1C13 0.469 13.43 0 13.96 0H19.04Z' fill='black'/%3E%3C/svg%3E%0A");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  width: 15px;
  aspect-ratio: 1/1;
  background: var(--color-main);
  display: inline-block;
  margin-left: 8px;
  vertical-align: -2px;
}

@media screen and (min-width: 769px) {
  .single-content table a:hover {
    text-decoration: none;
  }
}

.single-content table strong {
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .single-content table th,
  .single-content table td {
    display: block;
    width: 100%;
    padding: 12px 18px;
    font-size: 14px;
  }

  .single-content table th {
    font-size: 14px;
    text-align: left;
  }

  .single-content table tr {
    display: block;
  }
}

.page-categories .section-bg-white {
  padding-bottom: 0;
}

.contact-form {
  margin-top: 50px;
  background: #f8f8f8;
  padding: 48px;
  border-radius: 8px;
  max-width: 1200px;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .contact-form {
    padding: 30px 20px;
    border-radius: 0;
    margin-inline: -20px;
  }
}

.form-note {
  text-align: center;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.08em;
}

@media screen and (max-width: 768px) {
  .form-note {
    font-size: 14px;
    text-align: left;
  }
}

.form-require {
  margin-top: 16px;
}

@media screen and (max-width: 768px) {
  .form-require {
    margin-top: 12px;
  }
}

.form-require span {
  background: #e13b3b;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 8px 3px;
  border-radius: 3px;
  margin-right: 4px;
}

@media screen and (max-width: 768px) {
  .form-require span {
    font-size: 10px;
    padding: 2px 4px 3px;
    border-radius: 2px;
    vertical-align: 2px;
  }
}

.contact-form form {
  background: #fff;
  padding: 60px;
  border-radius: 4px;
  margin-top: 32px;
}

@media screen and (max-width: 768px) {
  .contact-form form {
    padding: 30px 20px;
    border-radius: 4px;
    margin-top: 20px;
  }
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.form-row:first-of-type {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .form-row {
    margin-top: 16px;
  }
}

.form-label {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .form-label {
    font-size: 14px;
  }
}

.form-label.is-required::after {
  content: "必須";
  background: #e13b3b;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 8px 3px;
  border-radius: 3px;
  margin-left: 16px;
}

@media screen and (max-width: 768px) {
  .form-label.is-required::after {
    font-size: 10px;
    padding: 2px 4px 3px;
    border-radius: 2px;
    vertical-align: 2px;
    margin-left: 10px;
  }
}
.form-field {
  width: 100%;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .form-field input[type="text"],
  .form-field input[type="email"],
  .form-field input[type="tel"],
  .form-field input[type="url"],
  .form-field textarea,
  .form-field select {
    font-size: 14px;
    padding: 10px 14px;
  }
}

.form-field textarea {
  height: 160px;
  resize: none;
}

@media screen and (max-width: 768px) {
  .form-field textarea {
    height: 120px;
  }
}

.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field input[type="tel"]:focus,
.form-field input[type="url"]:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-main);
  outline: none;
}

.form-field input[type="text"]::placeholder,
.form-field input[type="email"]::placeholder,
.form-field input[type="tel"]::placeholder,
.form-field input[type="url"]::placeholder,
.form-field textarea::placeholder,
.form-field select::placeholder {
  color: #bdbdbd;
}

.form-field select {
  width: 280px;
  appearance: none;
  background: #fff
    url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 16px center/16px 10px;
}

@media screen and (max-width: 768px) {
  .form-field select {
    background-size: 12px 8px;
    width: 100%;
  }
}

.policy-checkbox {
  display: flex;
  align-items: center;
}

.policy-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -999;
}

.policy-checkbox input[type="checkbox"]:checked + p::before {
  opacity: 1;
}

.policy-checkbox input[type="checkbox"]:checked + p::after {
  background: var(--color-main);
}

.policy-checkbox p {
  position: relative;
  padding-left: 24px;
  z-index: 1;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .policy-checkbox p {
    font-size: 14px;
  }
}

.policy-checkbox p a {
  color: var(--color-main);
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  .policy-checkbox p a {
    font-size: 14px;
  }
}

@media screen and (min-width: 769px) {
  .policy-checkbox p a:hover {
    text-decoration: none;
  }
}

.policy-checkbox p::before {
  content: "";
  width: 12px;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
  position: absolute;
  z-index: 1;
  left: 4px;
  top: 7px;
}

@media screen and (max-width: 768px) {
  .policy-checkbox p::before {
    width: 10px;
    height: 10px;
    left: 5px;
    top: 6px;
  }
}

.policy-checkbox p::after {
  content: "";
  width: 20px;
  aspect-ratio: 1/1;
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 2px;
  background: #fff;
  border: 1px solid var(--color-main);
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .policy-checkbox p::after {
    width: 16px;
    height: 16px;
    left: 2px;
    top: 3px;
  }
}

.form-submit {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .form-submit {
    margin-top: 20px;
    gap: 12px;
  }
}

.form-submit .btn-submit,
.form-submit .btn-reset {
  width: 100%;
  max-width: 200px;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  .form-submit .btn-submit,
  .form-submit .btn-reset {
    font-size: 14px;
    padding: 10px 14px;
    max-width: 100%;
  }
}

.form-submit .btn-submit {
  background: var(--color-main);
  color: #fff;
}

.form-submit .btn-reset {
  background: #fff;
  color: var(--color-main);
  border: 1px solid var(--color-main);
}

@media screen and (min-width: 769px) {
  .form-submit .btn-reset:hover {
    background: var(--color-main);
    color: #fff;
  }

  .form-submit .btn-submit:hover {
    background: #fff;
    color: var(--color-main);
    border: 1px solid var(--color-main);
  }
}

.footer-logo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.footer-logo figure {
  width: calc((100% - 20px * 2) / 3);
  text-align: center;
}

.footer-under {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  gap: 40px;
}

.footer-under a {
  mix-blend-mode: difference;
}

.catalog-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40px;
}

.catalog-banner-small {
  width: 40%;
}

.catalog-banner-large {
  width: 50%;
}