@charset "UTF-8";
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: "Noto Sans JP";
  font-weight: 700;
  background-color: #ffffff;
  background-image: radial-gradient(circle, rgba(217, 217, 217, 0.3) 2px, transparent 1px), radial-gradient(circle, rgba(217, 217, 217, 0.3) 2px, transparent 1px);
  background-size: 25px 25px;
  background-position: 0 0, 10px 10px;
  background-repeat: repeat;
}

main {
  min-height: calc(100svh - 260px);
  font-feature-settings: "palt";
  letter-spacing: 0.06em;
}

body.no-scroll {
  overflow: hidden;
  height: auto;
}

.red-text {
  color: #ce3031;
}

.spacer-lg {
  display: inline-block;
  padding: 20px 0;
}

.border {
  display: block;
  width: 100%;
  height: 10px;
  background-color: black;
  margin: 80px 0;
}

svg[width="0"][height="0"] {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

.pin-spacer {
  z-index: 1 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  position: relative !important;
  min-height: auto !important;
  /*
  &::before {
    content: "";
    display: block;
    height: 500vh; // 500vhの最小高さを確保（さらに拡張）
    width: 1px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    visibility: hidden;
    pointer-events: none;
  }
  */
}
.pin-spacer[data-required-height] {
  min-height: auto !important;
}
.pin-spacer::after {
  content: "";
  display: block;
  height: 1px;
  clear: both;
}

.content-pinned {
  min-height: 100vh;
  overflow-x: hidden;
}
.content-pinned .page-content {
  position: relative;
  z-index: 2;
}
.content-pinned footer {
  position: relative;
  z-index: 0;
  margin-top: auto;
}

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

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: white;
}
a:hover {
  opacity: 0.5;
}
a .menu-icon {
  width: 20px;
  height: 20px;
  background: #ce3031;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  margin-left: 10px;
  transition: background-color 0.3s ease;
}
a .fa-arrow-left {
  margin-right: 10px;
  margin-left: 0;
}

.button {
  background-color: #fff;
  padding: 10px 30px;
  border: 1px solid black;
  color: black;
  box-shadow: 2px 2px 0 black;
  transition: background-color 0.3s ease;
}
.button .menu-icon {
  background: black;
  margin-left: 50px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.button:hover {
  background-color: #ffe040;
  opacity: 1;
}
.button:hover .menu-icon {
  background: black;
  color: #ffe040;
}

.wrapper {
  width: 90%;
  max-width: 85vw;
  margin: auto;
}

.wrapper_narrow {
  max-width: 960px;
}

.yellow {
  position: absolute;
  left: 0;
  width: 100%;
  height: 350px;
  background: linear-gradient(to bottom, #ffd700 50%, rgba(255, 255, 255, 0) 100%);
  z-index: 0;
}

.bg-top {
  top: 0;
}

.bg-bottom {
  bottom: 0;
  height: 500px;
  background: linear-gradient(to top, #ffd700 50%, rgba(255, 255, 255, 0) 100%);
}

.lower {
  position: relative;
}
.lower .lower-bg {
  position: relative;
  background-image: url(../img/lower-header-bg.png);
  background-size: cover;
  padding: 11vw 0 15vw;
}
.lower .lower-bg .lower-title {
  position: relative;
  color: white;
}
.lower .lower-bg .lower-title .section-title-img img {
  height: 7vh;
  width: auto;
  margin-bottom: 10px;
}
.lower .yellow {
  position: relative;
  height: 20vw;
  margin-top: -10vw;
  z-index: -1;
}
.lower .info {
  position: relative;
  margin-top: -100px;
  padding-bottom: 100px;
}
.lower .info .dummy-text {
  display: none;
}
.lower .info .hero-illust {
  position: absolute;
}
.lower .info .text {
  text-align: center;
  margin: 30px 0;
}
.lower .info h3 {
  font-size: 28px;
  text-align: center;
}
.lower .info h3::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: #ce3031;
  margin: 10px auto 0;
}

.news-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card-link .news-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px 0 0 10px;
  padding: 1vw 1.5vw;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  width: 100%;
  font-size: 0.9vw;
  border: 1px solid black;
}
.news-card-link .news-card .label {
  display: inline-block;
  font-weight: bold;
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  color: #fff;
  margin-right: 0.5rem;
}
.news-card-link .news-card .label.news {
  background-color: #143e6d;
}
.news-card-link .news-card .label.blog {
  background-color: #ce3031;
}
.news-card-link .news-card .date {
  color: #666;
  font-size: 0.75rem;
}
.news-card-link .news-card .text {
  margin-top: 0.4rem;
  line-height: 1.4;
  color: #000;
}
.news-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 1;
}
.news-card-link:hover .news-card {
  background-color: #f9f9f9;
}

.blog-cards,
.news-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.blog-cards .card,
.news-cards .card {
  background: white;
  padding: 1.2rem 1.5rem;
  width: calc(50% - 0.75rem);
  border-radius: 20px;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  transition: all 0.3s ease;
  text-decoration: none;
}
.blog-cards .card:hover,
.news-cards .card:hover {
  transform: scale(1.05);
  opacity: 1;
}
.blog-cards .card .group,
.news-cards .card .group {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.blog-cards .card .group .label,
.news-cards .card .group .label {
  font-weight: bold;
  padding: 0.2rem 0.6rem;
  border-radius: 5px;
  font-size: 12px;
}
.blog-cards .card .group .blog,
.news-cards .card .group .blog {
  background-color: #ce3031;
  color: white;
}
.blog-cards .card .group .news,
.news-cards .card .group .news {
  background: #143e6d; /* または任意の青色 */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  padding: 0.3rem 0.6rem;
}
.blog-cards .card .group .date,
.news-cards .card .group .date {
  color: black;
  font-size: 14px;
}
.blog-cards .card .blog-text,
.news-cards .card .blog-text {
  font-size: 1rem;
  font-weight: bold;
  color: black;
  line-height: 1.6;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}
.pagination i {
  font-size: 1.6rem;
  line-height: 1;
}
.pagination .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 1rem;
  color: black;
  font-weight: bold;
  border-radius: 50%;
  transition: all 0.3s ease;
  text-decoration: none;
  line-height: 1;
}
.pagination .page-numbers.current {
  background-color: #ce3031;
  color: #fff;
}
.pagination .page-numbers.prev, .pagination .page-numbers.next {
  font-size: 1.6rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f0f0f0;
}
.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover {
  background-color: #ddd;
}

.map-wrapper {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 50px;
}
.map-wrapper .map-box {
  width: 100%;
  max-width: 40vw;
}
.map-wrapper .map-box p {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-bottom: 0.5rem;
}
.map-wrapper .map-box p .dot {
  width: 20px;
  height: 20px;
  background: #ce3031;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.map-wrapper .map-box iframe {
  width: 100%;
  height: 25vw;
  border: 3px solid #000;
}

.block .group .section-heading {
  background: #f0f0f0;
  border-bottom: 3px solid #ce3031;
  padding: 10px 20px;
  margin-bottom: 20px;
}
.block .group .section-heading h4 {
  font-size: 20px;
  font-weight: bold;
}
.block .group .safety-box {
  background: white;
  border: 5px solid black;
  padding: 50px;
  box-shadow: 10px 10px 0 rgb(0, 0, 0);
}

@media screen and (max-width: 1200px) {
  .lower .lower-bg {
    padding: 150px 0 100px;
    min-height: 350px;
  }
  .lower .lower-bg .lower-title .section-title-img img {
    height: 5vh;
  }
  .lower .yellow {
    height: 40vw;
  }
  .lower .info {
    margin-top: -200px;
  }
  .lower .info .hero-illust {
    top: -20vw;
    right: 20px;
    width: 30vw;
  }
  .news-card-link .news-card {
    padding: 1rem;
    width: 350px;
  }
  .news-card-link .news-card .date {
    font-size: 0.85rem;
  }
  .news-card-link .news-card .text {
    font-size: 1rem;
  }
  .block .group .safety-box {
    padding: 30px;
  }
}
@media screen and (max-width: 768px) {
  html,
  body {
    overflow-x: clip;
  }
  .lower .lower-bg {
    position: relative;
    background-image: url(../img/lower-header-bg-sp.png);
    padding: 130px 0 80px;
  }
  .lower .yellow {
    height: 80vw;
    margin-top: -15vw;
  }
  .lower .info .hero-illust {
    display: none;
  }
  .lower .info .text {
    text-align: left;
  }
  .news-card-link .news-card {
    border-radius: 10px;
    font-size: 0.85rem;
  }
  .news-card-link .sp {
    display: none;
  }
  .blog-cards,
  .news-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .pagination {
    gap: 0;
  }
  .map-wrapper {
    flex-direction: column;
  }
  .map-wrapper .map-box {
    max-width: 320px;
    margin: 0 auto;
  }
  .map-wrapper .map-box iframe {
    height: 250px;
  }
  .block .group .safety-box {
    padding: 30px 20px;
  }
}
@media screen and (width: 768px) {
  .lower .lower-bg {
    padding-top: 160px;
    min-height: 500px;
  }
  .lower .yellow {
    height: 50vw;
    margin-top: -20vw;
  }
}
/* =============================
   メニュー展開時の黒背景カバー
============================= */
.hamburger-demo-cover {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.6);
  display: none;
}

/* =============================
   ヘッダー共通スタイル
============================= */
header {
  position: fixed;
  top: 2.5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100vw;
  z-index: 100;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background-color: transparent;
}
header .wrapper {
  width: 100%;
  max-width: 90vw;
  margin: 0 auto;
  padding: 20px 3vw;
  border-radius: 20px;
  background-color: transparent;
  transition: all 0.3s ease;
}
header.scrolled .wrapper {
  background-color: white;
  border: 2px solid black;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
header.scrolled .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header.scrolled .flex nav {
  z-index: 999;
}
header.scrolled .flex nav .menu {
  justify-content: center;
}
header.scrolled .flex nav .menu .menu__item > a,
header.scrolled .flex nav .menu a {
  color: black;
}
header.scrolled .flex nav .menu .contact {
  color: white;
}

.flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex .site-logo {
  width: auto;
  line-height: 1px;
}
.flex .site-logo img {
  height: 30px;
  width: auto;
  transition: 0.3s ease;
}
.flex nav .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
}
.flex nav .menu .contact {
  background: #ce3031;
  border-radius: 5px;
  padding: 5px 15px;
  transition: opacity 0.3s ease;
}
.flex nav .menu .contact:hover {
  opacity: 0.7;
}
.flex nav .menu .contact a {
  pointer-events: none;
}
.flex nav .menu .menu__item {
  position: relative;
  overflow: visible;
  white-space: nowrap;
}
.flex nav .menu .menu__item > a {
  width: auto;
}
.flex nav .menu .menu__item.arrow > a {
  position: relative;
  padding-right: 1.2em;
  display: inline-block;
}
.flex nav .menu .menu__item.arrow > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.3em;
  transform: translateY(-50%) rotate(135deg);
  transition: transform 0.3s ease;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid #ce3031;
  border-right: 2px solid #ce3031;
}
.flex nav .menu .menu__item.arrow.is-active > a::after {
  transform: translateY(-50%) rotate(-45deg);
}
.flex nav .menu .menu__item .drop-wrapper {
  position: absolute;
  top: 37px;
  left: 50%;
  transform: translateX(-50%);
}
.flex nav .menu .menu__item .drop-wrapper .drop-menu {
  opacity: 0;
  max-height: 0;
  padding: 0;
  position: relative;
  z-index: 3;
  transition: all 0.5s ease;
  top: 5px;
  pointer-events: none;
}
.flex nav .menu .menu__item .drop-wrapper .drop-menu::before, .flex nav .menu .menu__item .drop-wrapper .drop-menu::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  width: 20px;
  height: 20px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.flex nav .menu .menu__item .drop-wrapper .drop-menu::before {
  top: -17px;
  background: #fff;
  z-index: 2;
}
.flex nav .menu .menu__item .drop-wrapper .drop-menu::after {
  top: -20px;
  background: #000;
  z-index: 1;
}
.flex nav .menu .menu__item .drop-wrapper .drop-menu .drop-menu__inner {
  background: #fff;
  border: 2px solid #000;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  margin-top: 0;
}
.flex nav .menu .menu__item .drop-wrapper .drop-menu .drop-menu__item {
  background: transparent;
  margin: 0;
  padding: 10px 20px;
}
.flex nav .menu .menu__item .drop-wrapper .drop-menu .drop-menu__item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #000;
  gap: 20px;
}
.flex nav .menu .menu__item .drop-wrapper .drop-menu .drop-menu__item:hover {
  background: #f0f0f0;
}
.flex nav .menu .menu__item.is-active .drop-wrapper .drop-menu {
  opacity: 1;
  visibility: visible;
  translate: 0 10px;
  pointer-events: auto;
}
.flex .hamburger {
  display: none;
  width: 70px;
  height: 70px;
  position: fixed;
  top: 10px;
  right: 50px;
  background: #ce3031;
  border-radius: 50%;
  z-index: 1000;
}
.flex .hamburger span {
  width: 35px;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
  transition: 0.5s;
}
.flex .hamburger span:nth-child(1) {
  top: 25px;
}
.flex .hamburger span:nth-child(2) {
  top: 35px;
}
.flex .hamburger.active span:nth-child(1) {
  top: 30px;
  transform: translateX(-50%) rotate(-45deg);
}
.flex .hamburger.active span:nth-child(2) {
  top: 30px;
  transform: translateX(-50%) rotate(45deg);
}

/* =============================
   TAB表示（レスポンシブ）
============================= */
@media screen and (max-width: 1250px) {
  .no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }
  header {
    max-width: 90%;
  }
  header .wrapper {
    background-color: white;
    border: 2px solid black;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 1200px;
    margin: auto;
  }
  header .flex {
    display: block;
    position: relative;
  }
  header .flex .site-logo {
    margin-left: 0;
    width: 100%;
  }
  header .flex .site-logo img {
    height: 40px;
  }
  header .flex nav {
    opacity: 0;
    height: 0;
    width: 100%;
    transition: 0.3s ease;
    visibility: hidden;
    overflow: hidden;
  }
  header .flex nav.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 15px 0 0 0;
    max-height: 80svh;
    height: auto;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: 0.5s ease;
  }
  header .flex nav .menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  header .flex nav .menu > li:not(.menu__item) {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ce3031;
    border-bottom: 1px solid #eee;
  }
  header .flex nav .menu > li {
    width: 100%;
    text-align: left;
  }
  header .flex nav .menu > li a {
    display: block;
    color: #ce3031;
    font-weight: 700;
    font-size: 1.1rem;
  }
  header .flex nav .menu .menu__item {
    width: 100%;
  }
  header .flex nav .menu .menu__item > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ce3031;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #eee;
    position: relative;
  }
  header .flex nav .menu .menu__item .drop-wrapper {
    position: static;
    transform: none;
    width: 100%;
    background: none;
    border: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
  }
  header .flex nav .menu .menu__item .drop-wrapper.is-active {
    max-height: 1000px;
  }
  header .flex nav .menu .menu__item .drop-wrapper .drop-menu {
    display: flex;
    flex-direction: column;
    background: transparent;
    gap: 0;
    opacity: 1;
    visibility: visible;
    max-height: none;
    margin-top: 0;
    padding-top: 0;
  }
  header .flex nav .menu .menu__item .drop-wrapper .drop-menu::before, header .flex nav .menu .menu__item .drop-wrapper .drop-menu::after {
    display: none;
  }
  header .flex nav .menu .menu__item .drop-wrapper .drop-menu .drop-menu__inner {
    border: none;
    border-radius: 0;
    padding-bottom: 1.5rem;
    margin: 0;
    padding-top: 0;
  }
  header .flex nav .menu .menu__item .drop-wrapper .drop-menu .drop-menu__item {
    padding: 0.8rem 1.2rem;
  }
  header .flex nav .menu .menu__item .drop-wrapper .drop-menu .drop-menu__item a {
    font-size: 1rem;
    display: flex;
    align-items: center;
    font-weight: 500;
    justify-content: flex-start;
  }
  header .flex nav .menu .menu__item .drop-wrapper .drop-menu .drop-menu__item a .menu-icon {
    display: none;
  }
  header .flex nav .menu .menu__item.is-active .drop-wrapper {
    display: block;
    max-height: 1000px;
  }
  header .flex nav .menu .contact {
    width: 100%;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
  }
  header .flex .hamburger {
    display: block;
    position: absolute;
    top: -10px;
    right: 0;
    width: 60px;
    height: 60px;
    background: #ce3031;
    border-radius: 50%;
    z-index: 1100;
  }
}
/* =============================
   SP表示（レスポンシブ）
============================= */
@media screen and (max-width: 768px) {
  header .flex {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  header .flex .site-logo img {
    width: 80%;
    max-width: 70vw;
    flex-shrink: 1;
    height: auto;
  }
  header .flex .hamburger {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 10px;
    top: -8px;
    flex-shrink: 0;
    margin-left: auto;
    transform: scale(0.9);
  }
  header .flex .hamburger span {
    width: 30px;
  }
  header .flex .hamburger span:nth-child(1) {
    top: 15px;
  }
  header .flex .hamburger span:nth-child(2) {
    top: 25px;
  }
  header .flex .hamburger.active span:nth-child(1),
  header .flex .hamburger.active span:nth-child(2) {
    top: 20px;
  }
  header .flex .hamburger .drop-wrapper {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
}
@media screen and (width: 768px) {
  header .flex .hamburger {
    width: 70px;
    height: 70px;
  }
  header .flex .hamburger span {
    width: 45px;
  }
  header .flex .hamburger span:nth-child(1) {
    top: 30px;
  }
  header .flex .hamburger span:nth-child(2) {
    top: 40px;
  }
  header .flex .hamburger.active span:nth-child(1) {
    top: 35px;
  }
  header .flex .hamburger.active span:nth-child(2) {
    top: 35px;
  }
}
footer {
  background-color: #143e6d;
  text-align: center;
  position: relative;
  z-index: 2;
}
.content-pinned footer {
  margin-top: auto;
  position: relative;
  z-index: 0;
}
footer .logo {
  width: 20%;
  margin: 0;
  padding: 30px 0 20px;
}
footer .company-info {
  color: white;
  padding-bottom: 20px;
}
footer .company-info .pc-block {
  display: block;
}
footer .company-info .tell {
  border-bottom: 1px solid white;
}
footer .company-info .yellow-border {
  color: #ffe040;
  border-bottom: 1px solid #ffe040;
}
footer .flex {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 30px;
}
footer .top {
  position: absolute;
  bottom: 50px;
  right: 20px;
  text-align: center;
}
footer .top img {
  width: 100px;
  height: auto;
  display: block;
  margin: 0;
  animation: float 3s ease-in-out infinite;
}
footer .top p {
  font-family: "Avengeance Mightiest Avenger", sans-serif;
  font-size: 14px;
  margin-top: 5px;
  color: white;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
footer small {
  width: 100%;
  display: block;
  background-color: white;
  font-size: 0.6rem;
  font-weight: 500;
  text-align: center;
  padding: 10px;
}

@media screen and (max-width: 500px) {
  footer .logo {
    width: 85%;
  }
  footer .company-info {
    line-height: 1.8;
  }
  footer .company-info .sp-block {
    display: inline-block;
    margin: auto;
  }
  footer .company-info .sp-block .br-sp {
    display: block;
  }
  footer .flex {
    display: block;
    width: 85%;
    margin: auto;
    padding-bottom: 20px;
  }
  footer .flex img {
    width: 85%;
    padding: 5px 0;
  }
  footer .top {
    display: none;
  }
}
.mv {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.mv .mv_video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  display: block;
  pointer-events: none;
}
.mv .pc-video {
  display: block;
}
.mv .sp-video {
  display: none;
}
.mv::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.mv_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* 余白なく全面に表示 */
  display: block;
  z-index: -2;
}
.mv picture > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.mv .mv-title {
  position: absolute;
  bottom: 8vw;
  left: 5%;
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.mv .mv-title img {
  width: 25vw;
}
.mv .mv-title .underline {
  display: inline-block;
  width: 3vw;
  height: 0.3vw;
  background-color: #ce3031;
  margin: 1vw 0;
}
.mv .mv-title p {
  color: white;
  letter-spacing: 2px;
}
.mv .visual-news-wrapper {
  position: absolute;
  right: 0;
  bottom: 8vw;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 10;
  overflow: hidden;
}
.mv .visual-news-wrapper .news-card {
  position: relative;
  right: -5px;
}

#scroll-animation {
  position: relative;
  height: 300vh;
  display: grid;
  inline-size: 100dvw;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9vw), 0 100%);
  box-sizing: border-box;
  --sa-border-w: 30px;
  --clip-corner: calc(100% - 9vw); /* 台形の角の位置 */
  --polygon-corner: 91; /* SVGポリゴンの角座標（viewBox座標系） */
  z-index: 0;
  /* SVGを使った黒縁 */
}
#scroll-animation .sa-frame {
  position: sticky;
  inset-block-start: 0;
  width: 100%;
  height: 100vh;
  transform-origin: center;
  will-change: transform;
  transform-origin: 50% 50%;
  box-shadow: 0 0 0 16px rgba(0, 0, 0, 0.85) inset;
  clip-path: polygon(0 0, 100% 0, 100% var(--clip-corner), 0 100%);
}
#scroll-animation .sa-frame .sa-content {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  z-index: 1; /* 画像やテキストは枠の内側 */
  /* 半透明オーバーレイ */
}
#scroll-animation .sa-frame .sa-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 2;
}
#scroll-animation .sa-frame .sa-content > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
}
#scroll-animation .sa-frame .sa-content .philosophy {
  position: absolute;
  inset: 0;
  place-items: center;
  text-align: center;
  padding: 2rem;
  z-index: 3;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#scroll-animation .sa-frame .sa-content .philosophy h3 {
  width: 70%;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
#scroll-animation .sa-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* コンテンツより前面に */
  pointer-events: none;
}
#scroll-animation .sa-border polygon {
  fill: none;
  stroke: #000;
  stroke-width: 30; /* viewBox基準での太さ */
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media screen and (max-width: 1200px) {
  #scroll-animation .sa-border polygon {
    stroke-width: 15;
  }
}

#scroll-animation .sa-frame {
  animation: none !important;
}

#about-top {
  position: relative;
  background-image: url(../img/about-bg.png);
  background-size: cover;
  background-position: top center;
  padding: 20vw 5% 25vw;
  z-index: 1;
}
#about-top .about-illust {
  position: absolute;
  top: 1vw;
  right: 3vw;
  width: min(50vw, 450px);
  height: auto;
  pointer-events: none;
  z-index: 0;
}
#about-top .about-title {
  width: 30vw;
}
#about-top .sub-title {
  letter-spacing: 0.2em;
  padding: 20px 0 10px;
}
#about-top .flex {
  display: flex;
  align-items: stretch;
}
#about-top .flex .left {
  width: 40vw;
}
#about-top .flex .left h2 {
  font-size: 2.5vw;
  letter-spacing: 0.2em;
  margin-bottom: 2vw;
}
#about-top .flex .right {
  width: 65vw;
}
#about-top .flex .right p {
  line-height: 35px;
}
#about-top .flex .right .sp {
  display: none;
}

#point-top {
  padding: 10vw 0 50px;
  margin-top: -11%;
  position: relative;
  overflow-x: clip;
}
#point-top .wrapper {
  position: relative;
  z-index: 1;
}
#point-top .title {
  width: 40vw;
  display: block;
  margin: auto;
}
#point-top .group {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 0;
  padding: 50px 0;
}
#point-top .group .reverse {
  flex-direction: row-reverse;
}
#point-top .group .flex {
  display: flex;
  justify-content: center;
  align-items: stretch;
  align-items: center;
  background: white;
  border: 3px solid #000;
  box-shadow: 0.5vw 0.5vw 0 #000;
  height: auto;
  min-height: unset;
}
#point-top .group .flex .left {
  width: 50%;
  height: 100%;
  overflow: hidden;
}
#point-top .group .flex .left img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#point-top .group .flex .right {
  width: 50%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
#point-top .group .flex .right h3 {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  font-size: 2.2vw;
  line-height: 1.4;
  gap: 0.4em;
  margin-bottom: 1rem;
}
#point-top .group .flex .right h3 .features-group {
  display: inline-flex;
  align-items: center;
  color: #ce3031;
}
#point-top .group .flex .right h3 .features {
  font-size: 14px;
}
#point-top .group .flex .right h3 .number {
  font-size: 32px;
}
#point-top .group .flex .right h3 strong {
  color: #333;
  font-size: 32px;
}
#point-top .group .flex .right h3 strong .pc-block {
  display: block;
}
#point-top .group .flex .right p {
  line-height: 2;
}

#service-top {
  inline-size: 100vw;
}
#service-top .service-title {
  width: 70vw;
  margin: auto;
  display: block;
}
#service-top .service-bg {
  background-image: url(../img/service-bg.png);
  background-size: 100% 100%;
  margin-top: -30px;
}
#service-top .service-bg .service-swiper {
  padding: 100px 0 60px;
  position: relative;
  overflow: hidden;
}
#service-top .service-bg .service-swiper .swiper-slide {
  opacity: 0.5;
  transform: scale(0.95);
  transition: transform 0.4s ease, opacity 0.3s ease;
}
#service-top .service-bg .service-swiper .swiper-slide.swiper-slide-active {
  transform: scale(1.2);
  opacity: 1;
  z-index: 2;
}
#service-top .service-bg .service-swiper .swiper-slide.swiper-slide-active:hover {
  transform: scale(1.2) translateY(-5px);
}
#service-top .service-bg .service-swiper .swiper-slide a:hover {
  opacity: 1;
}
#service-top .service-bg .service-swiper .swiper-slide .slide-inner {
  position: relative;
}
#service-top .service-bg .service-swiper .swiper-slide .image-wrapper {
  border: 5px solid black;
  box-sizing: border-box;
}
#service-top .service-bg .service-swiper .swiper-slide .image-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
#service-top .service-bg .service-swiper .swiper-slide .caption {
  margin-top: 1rem;
}
#service-top .service-bg .service-swiper .swiper-slide .caption .section-title {
  font-size: 2rem;
  font-weight: 900;
  color: white;
  text-align: center;
  margin-bottom: 30px;
  filter: url(#smooth-outline);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7), 2px 2px 4px rgba(0, 0, 0, 0.6);
}
#service-top .service-bg .service-swiper .swiper-slide-active {
  transform: scale(1.05);
  opacity: 1;
  z-index: 2;
}
#service-top .service-bg .service-swiper .swiper-slide-active .slide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#service-top .service-bg .service-swiper .swiper-button-prev,
#service-top .service-bg .service-swiper .swiper-button-next {
  position: absolute;
  top: 40%;
  z-index: 10;
  background: black;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  color: #fff;
}
#service-top .service-bg .service-swiper .swiper-button-prev::after,
#service-top .service-bg .service-swiper .swiper-button-next::after {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
}
#service-top .service-bg .service-swiper .swiper-button-prev {
  left: 5px;
}
#service-top .service-bg .service-swiper .swiper-button-prev::after {
  content: "\f104";
}
#service-top .service-bg .service-swiper .swiper-button-next {
  right: 5px;
}
#service-top .service-bg .service-swiper .swiper-button-next::after {
  content: "\f105";
}
#service-top .service-bg .service-swiper .swiper-button-area {
  text-align: center;
  margin-top: 50px;
}

#achievement-top {
  position: relative;
  padding: 100px 0;
}
#achievement-top .wrapper {
  text-align: center;
  margin: auto;
}
#achievement-top .achievement-heading {
  position: relative;
  text-align: center;
}
#achievement-top .achievement-heading .section-title {
  display: inline-block;
}
#achievement-top .achievement-heading .section-title img {
  width: 50%;
}
#achievement-top .hero-illust {
  position: absolute;
  top: 0;
  right: 30px;
  z-index: 2;
  width: 30%;
  pointer-events: none;
}
#achievement-top .achievement-box {
  background: white;
  border: 4px solid black;
  padding: 5vw;
  position: relative;
  z-index: 1;
  margin: -20px auto 0;
  display: inline-block;
  width: 100%;
  max-width: 900px;
}
#achievement-top .pick-up-icon {
  position: absolute;
  top: 20px;
  left: 40px;
  width: 210px;
  z-index: 3;
  pointer-events: none;
}
#achievement-top .hero-swiper-main {
  border: 4px solid black;
  margin: 0 auto 1rem;
  max-width: 770px;
}
#achievement-top .hero-swiper-main .swiper-wrapper {
  display: flex;
}
#achievement-top .hero-swiper-main .swiper-slide {
  width: 100%;
}
#achievement-top .hero-swiper-main img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4/3;
}
#achievement-top .hero-swiper-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
#achievement-top .hero-swiper-thumbs .swiper-slide {
  aspect-ratio: 4/3;
  width: auto;
  height: auto;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease;
  border: 1px solid #000;
  box-sizing: border-box;
}
#achievement-top .hero-swiper-thumbs .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid #000;
}
#achievement-top .hero-swiper-thumbs .swiper-slide img {
  height: auto;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#achievement-top .description {
  margin: 20px 0 40px;
  text-align: left;
}

#blog-top {
  padding: 100px 0;
  border-top: 10px solid black;
  border-bottom: 10px solid black;
}
#blog-top .flex {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
#blog-top .flex .left {
  width: 25%;
}
#blog-top .flex .left .section-title img {
  width: 80%;
  height: auto;
}
#blog-top .flex .left p {
  padding: 20px 0 90px;
}
#blog-top .flex .right {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
#blog-top .sp {
  display: none;
}

#recruit-top {
  background-image: url(../img/recruit-bg.png);
  background-size: cover;
  background-position: center;
  padding: 50px 0 80px;
}
#recruit-top h2 {
  width: 80%;
  margin: 0 auto 30px;
}
#recruit-top .flex {
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
#recruit-top .flex .left {
  width: 40%;
}
#recruit-top .flex .right {
  width: 45%;
}
#recruit-top .flex .right h3 img {
  width: 90%;
}
#recruit-top .flex .right p {
  color: white;
  margin: 20px 0 50px;
  line-height: 2;
}

#sns {
  padding: 150px 0 100px;
  position: relative;
}
#sns .yellow {
  height: 500px;
}
#sns .wrapper {
  width: 80%;
  text-align: center;
  margin: auto;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
#sns .sns-heading {
  display: flex;
  justify-content: center;
  align-items: center;
}
#sns .sns-heading .section-title {
  z-index: 1;
}
#sns .sns-heading .section-title img {
  width: 50%;
  height: auto;
  margin: 0 auto;
  display: block;
}
#sns .video-container {
  width: 100%;
  position: relative;
  z-index: 1;
  margin: -20px auto 0;
  border: 10px solid black;
}
#sns .video-container iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
}
#sns .sns-hero {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 15vw;
  z-index: 5;
}
#sns p {
  padding: 50px 0 20px;
}
#sns .sns-icons {
  display: flex;
  justify-content: center;
  gap: 30px;
}
#sns .sns-icons a {
  display: inline-block;
}
#sns .sns-icons a img {
  width: 60px;
  height: 60px;
  transition: transform 0.3s ease;
}
#sns .sns-icons a img:hover {
  transform: scale(1.2);
}

#contact-top {
  padding: 0 0 100px;
  position: relative;
}
#contact-top h2 img {
  width: 90%;
  margin: auto;
  margin-bottom: 30px;
  display: block;
}
#contact-top .flex {
  justify-content: center;
  gap: 1.5rem;
  margin-top: -60px;
}
#contact-top .flex .button {
  display: inline-flex;
  align-items: center;
  padding: 20px;
  align-items: center;
}
#contact-top .flex .button .illust {
  margin-right: 15px;
  font-size: 1.8rem;
}
#contact-top .contact-bg {
  background: url("../img/contact-bg.png") no-repeat center bottom;
  background-size: cover;
  width: 100%;
  height: 250px;
  position: absolute;
  bottom: -80px;
  left: 0;
  z-index: -2;
  pointer-events: none;
}

@media screen and (max-width: 1200px) {
  #scroll-animation {
    --polygon-corner: 93; /* TAB表示では角をもう少し下に */
  }
  .mv {
    min-height: 60vw;
  }
  .mv .mv-title {
    bottom: 8vw;
  }
  .mv .mv-title .underline {
    width: 8vw;
    height: 0.5vw;
  }
  #scroll-animation .sa-frame .sa-content .philosophy h3 {
    width: 90%;
  }
  #about-top {
    position: relative;
    padding: 16vw 5%;
    overflow: hidden;
    height: auto;
    background-image: url(../img/about-bg-sp.png);
    clip-path: polygon(0 9vw, 100% 0, 100% 100%, 0 calc(100% - 9vw));
    background-size: cover;
    background-position: top center;
  }
  #about-top .about-illust {
    display: none;
  }
  #about-top::before, #about-top::after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 10vw;
    left: 0;
    z-index: 2;
  }
  #about-top::after {
    bottom: -3px;
    background: url(../img/about-line-tab-bottom.svg) no-repeat center center/cover;
  }
  #about-top::before {
    top: -3px;
    background: url(../img/about-line-tab-top.svg) no-repeat center center/cover;
  }
  #about-top .wrapper {
    position: relative;
    z-index: 1;
  }
  #about-top img {
    width: 60%;
  }
  #about-top .flex {
    flex-direction: column;
  }
  #about-top .flex .left {
    width: 100%;
  }
  #about-top .flex .left h2 {
    margin-bottom: 0;
  }
  #about-top .flex .left .pc {
    display: none;
  }
  #about-top .flex .right {
    width: 100%;
    margin-top: 30px;
  }
  #about-top .flex .right .sp {
    display: inline-block;
  }
  #about-top .flex p {
    margin-bottom: 2.5rem;
  }
  #about-top .flex p::after {
    content: "";
    display: block;
  }
  #point-top {
    padding-top: 150px;
  }
  #point-top .title {
    width: 80%;
  }
  #point-top .group {
    width: 90%;
    margin: auto;
  }
  #point-top .group .flex {
    flex-direction: column;
  }
  #point-top .group .flex .left,
  #point-top .group .flex .right {
    width: 100%;
  }
  #service-top .service-title {
    width: 90%;
  }
  #service-top .service-bg {
    margin-top: -22px;
  }
  #achievement-top {
    padding: 50px 0;
  }
  #achievement-top .hero-illust {
    top: -10px;
    right: 0;
    width: 32%;
  }
  #achievement-top .achievement-box {
    margin-top: -12px;
    padding: 50px 40px 60px;
  }
  #achievement-top .pick-up-icon {
    top: 5px;
    left: 0;
    width: 180px;
  }
  #blog-top {
    padding: 50px 0;
  }
  #blog-top .flex {
    display: block;
  }
  #blog-top .flex .left {
    width: 100%;
  }
  #blog-top .flex .left .section-title img {
    width: 30%;
  }
  #blog-top .flex .left p {
    padding: 10px 0 20px;
  }
  #blog-top .flex .left .pc {
    display: none;
  }
  #blog-top .flex .right {
    width: 100%;
  }
  #blog-top .sp {
    display: block;
    margin: 50px auto 0;
    text-align: center;
    width: -moz-fit-content;
    width: fit-content;
  }
  #recruit-top h2 {
    width: 100%;
  }
  #recruit-top .flex {
    display: block;
  }
  #recruit-top .flex .left {
    width: 70%;
    margin: 0 auto 50px;
  }
  #recruit-top .flex .right {
    width: 100%;
  }
  #recruit-top .flex .right h3 img {
    margin: auto;
    width: 100%;
    margin-bottom: 10px;
  }
  #recruit-top .flex .right p {
    margin: 0 0 30px;
  }
  #sns .video-container {
    margin-top: -10px;
  }
  #sns .video-container iframe {
    align-items: center;
  }
  #sns .sns-hero {
    position: absolute;
    bottom: -20px;
    right: -50px;
    width: 20vw;
  }
  #contact-top .flex {
    margin-top: -40px;
  }
}
@media screen and (max-width: 767.98px) {
  #scroll-animation {
    --polygon-corner: 95; /* SP表示では角をさらに下に */
  }
  .mv {
    min-height: 120vw;
  }
  .mv .pc-video {
    display: none;
  }
  .mv .sp-video {
    display: block;
  }
  .mv .mv-title {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .mv .mv-title .underline {
    width: 10vw;
    height: 0.7vw;
  }
  .mv .mv-title img {
    width: 100%;
    margin: 0 auto;
  }
  .mv .mv-title p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .mv .visual-news-wrapper {
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    align-items: center;
  }
  #about-top {
    padding: 30vw 5%;
    clip-path: polygon(0 16vw, 100% 0, 100% 100%, 0 calc(100% - 16.2vw));
  }
  #about-top::before, #about-top::after {
    height: 17.5vw;
  }
  #about-top::after {
    background: url(../img/about-line-sp-bottom.svg) no-repeat center center/cover;
    bottom: 0;
  }
  #about-top::before {
    background: url(../img/about-line-sp-top.svg) no-repeat center center/cover;
  }
  #about-top .about-title {
    width: 90%;
  }
  #about-top .flex .left h2 {
    font-size: 28px;
  }
  #about-top .flex .right p {
    margin-top: -15px;
    margin-bottom: 1.5rem;
  }
  #point-top {
    padding-top: 100px;
    margin-top: -20%;
  }
  #point-top .title {
    width: 100%;
  }
  #point-top .group {
    width: 100%;
    padding: 20px 0 0;
  }
  #point-top .group .flex .right h3 {
    line-height: 1.3;
  }
  #point-top .group .flex .right h3 strong {
    font-size: 27px;
  }
  #point-top .group .flex .right h3 strong .sp-block {
    display: block;
  }
  #point-top .group .flex .right h3 strong .pc-block {
    display: inline;
  }
  #point-top .group .flex .right p {
    line-height: 1.5;
  }
  #service-top .service-title {
    width: 90%;
  }
  #service-top .service-bg {
    background-size: cover;
    background-position: top center;
    margin-top: -2px;
  }
  #service-top .service-bg .service-swiper .swiper-slide {
    box-sizing: border-box;
    padding: 0 5px;
    max-width: 70%;
    margin: 0 auto;
  }
  #service-top .service-bg .service-swiper .swiper-slide .image-wrapper {
    border: 5px solid black;
    box-sizing: border-box;
  }
  #service-top .service-bg .service-swiper .swiper-slide .caption .section-title {
    margin-bottom: 20px;
    font-size: 18px;
  }
  #service-top .service-bg .service-swiper .swiper-button-prev,
  #service-top .service-bg .service-swiper .swiper-button-next {
    top: 38%;
    width: 50px;
    height: 50px;
  }
  #service-top .service-bg .service-swiper .swiper-button-prev {
    left: 0;
  }
  #service-top .service-bg .service-swiper .swiper-button-next {
    right: 0;
  }
  #service-top .service-bg .service-swiper .swiper-button-area {
    margin-top: 30px;
  }
  #achievement-top .yellow {
    height: 300px;
  }
  #achievement-top .achievement-heading .section-title img {
    width: 95%;
  }
  #achievement-top .hero-illust {
    display: none;
  }
  #achievement-top .achievement-box {
    margin-top: -9px;
    padding: 30px 20px 40px;
  }
  #achievement-top .pick-up-icon {
    top: 0;
    width: 100px;
  }
  #achievement-top .hero-swiper-main img {
    height: 180px;
  }
  #achievement-top .hero-swiper-thumbs {
    justify-content: center;
    gap: 12px;
  }
  #achievement-top .hero-swiper-thumbs .swiper-slide {
    width: auto;
    flex-shrink: 0;
    height: 60px;
  }
  #achievement-top .hero-swiper-thumbs .swiper-slide img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #blog-top .flex .left .section-title img {
    width: 50%;
  }
  #blog-top .flex .right {
    width: 100%;
    max-width: 100%;
  }
  #blog-top .flex .right .card {
    width: 100%;
  }
  #blog-top .sp {
    margin-top: 30px;
  }
  #recruit-top .flex .left {
    width: 100%;
    margin: 0 auto 20px;
  }
  #recruit-top .flex .right {
    text-align: center;
  }
  #recruit-top .flex .right p {
    text-align: left;
  }
  #recruit-top .flex .right .button {
    margin: auto;
  }
  #sns {
    padding: 50px 0;
  }
  #sns .yellow {
    height: 250px;
  }
  #sns .wrapper {
    width: 90%;
    padding: 0;
  }
  #sns .sns-heading .section-title img {
    width: 95%;
  }
  #sns .video-container iframe {
    aspect-ratio: 9/16;
  }
  #sns .sns-hero {
    display: none;
  }
  #sns p {
    padding: 20px 0;
    font-size: 15px;
  }
  #sns .sns-icons {
    gap: 15px;
  }
  #contact-top h2 img {
    margin-bottom: 20px;
  }
  #contact-top .flex {
    flex-direction: column;
    margin-top: -20px;
  }
  #contact-top .flex .button {
    align-items: center;
    justify-content: center;
    width: calc(100% - 40px);
    margin: auto;
  }
  #contact-top .flex .button .fas.fa-arrow-right {
    margin-left: auto;
  }
  #contact-top .contact-bg {
    height: 100px;
    bottom: 0;
  }
}
@media screen and (width: 768px) and (orientation: portrait) {
  #achievement-top {
    padding: 0 0 50px;
  }
  #achievement-top .hero-illust img {
    display: none;
  }
  #blog-top .left {
    text-align: center;
  }
  #blog-top .right.visual-news-wrapper {
    display: block;
    margin: auto;
  }
  #contact-top .map-wrapper {
    flex-direction: row;
  }
  #contact-top .map-wrapper .map-box {
    margin: 0;
  }
}
#about .info .hero-illust {
  top: -20vw;
  right: 50px;
  width: 30vw;
}
#about .info .message {
  margin-bottom: 80px;
}
#about .info .message .flex {
  align-items: flex-start;
  margin-top: 50px;
  gap: 2rem;
}
#about .info .message .flex .representative-photo {
  display: block;
  width: 35vw;
}
#about .info .message .flex .representative-text p {
  max-width: 600px;
  line-height: 2;
}
#about .info .message .flex .representative-text p .pc-only {
  display: inline;
}
#about .info .message .flex .representative-text .lower-tier {
  margin-left: 80px;
  margin-top: 30px;
}
#about .info dl {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
  border: 5px solid black;
  box-shadow: 10px 10px 0 rgb(0, 0, 0);
}
#about .info dl dt, #about .info dl dd {
  padding: 20px;
  border-bottom: 2px solid black;
  align-items: center;
}
#about .info dl dt {
  display: flex;
  width: 20%;
  background-color: #F0F0F0;
  border-right: 2px solid black;
}
#about .info dl dd {
  display: block;
  width: 80%;
  background-color: white;
}
#about .info dl dd .address {
  margin-bottom: 10px;
}
#about .info .access {
  padding: 100px 0 0;
}
#about .info .access .access-box {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
#about .info .access .access-box .box {
  width: 48%;
  gap: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#about .info .access .access-box .box .icon-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#about .info .access .access-box .box .icon-area img {
  width: 12vw;
  height: 12vw;
}
#about .info .access .access-box .box .icon-area p {
  margin-top: 10px;
}
#about .info .access .access-box .box .description-area ul.description-list {
  padding-left: 1.5em;
  margin: 0;
}
#about .info .access .access-box .box .description-area ul.description-list li {
  list-style-type: disc;
  display: list-item;
  line-height: 1;
  margin-bottom: 0.5em;
}
#about .info .access .access-box .box .description-area ul.description-list li.note {
  list-style: none;
  margin-top: 20px;
  line-height: 1.5;
  margin-left: -1.2em;
}

@media screen and (max-width: 1200px) {
  #about .info {
    padding-bottom: 50px;
  }
  #about .info .hero-illust {
    top: -30vw;
    right: 0;
    width: 40vw;
  }
  #about .info .message .flex {
    display: block;
  }
  #about .info .message .flex .representative-photo {
    width: 100%;
  }
  #about .info .message .flex .representative-text p {
    max-width: 100%;
    margin-top: 20px;
  }
  #about .info .access .map-wrapper .map-box {
    max-width: 50vw;
    margin: auto;
    padding-bottom: 20px;
  }
  #about .info .access .access-box {
    display: block;
    margin-top: 20px;
  }
  #about .info .access .access-box .box {
    width: 100%;
    gap: 1.5rem;
    justify-content: flex-start;
  }
  #about .info .access .access-box .box .icon-area {
    width: 30%;
    padding-bottom: 50px;
  }
  #about .info .access .access-box .box .icon-area img {
    width: 200px;
    height: 200px;
  }
  #about .info .access .access-box .box .icon-area p {
    width: 100%;
  }
  #about .info .access .access-box .box .description-area {
    width: 60%;
  }
}
@media screen and (max-width: 767.98px) {
  #about .info .message {
    margin-bottom: 50px;
  }
  #about .info .message .flex .representative-text p .pc-only {
    display: none;
  }
  #about .info .message .flex .representative-text .lower-tier {
    margin-left: 0;
  }
  #about .info dl {
    display: block;
  }
  #about .info dl dt, #about .info dl dd {
    padding: 15px 20px;
  }
  #about .info dl dt {
    width: 100%;
    border-right: none;
  }
  #about .info dl dd {
    width: 100%;
  }
  #about .info .access .map-wrapper {
    gap: 0;
  }
  #about .info .access .map-wrapper .map-box {
    max-width: 100%;
  }
  #about .info .access .map-wrapper .map-box iframe {
    height: 250px;
  }
  #about .info .access .access-box .box {
    display: block;
    margin-top: 20px;
  }
  #about .info .access .access-box .box .icon-area {
    width: 70%;
    margin: auto;
    padding-bottom: 20px;
  }
  #about .info .access .access-box .box .icon-area img {
    width: 100%;
    height: 100%;
  }
  #about .info .access .access-box .box .description-area {
    width: 95%;
  }
}
@media screen and (width: 768px) and (orientation: portrait) {
  #about .access .map-wrapper {
    flex-direction: row;
  }
}
#faq .info .hero-illust {
  top: -22vw;
  right: 50px;
  width: 23vw;
}
#faq .group {
  padding: 0 0 80px;
}
#faq .group:last-child {
  padding-bottom: 0;
}
#faq .group ul {
  margin-top: 30px;
}
#faq .group ul li {
  margin: 20px 0;
  border: 2px solid black;
  background-color: white;
  border-radius: 20px;
  box-shadow: 5px 5px 0 rgb(0, 0, 0);
  /*アコーディオンタイトル*/
}
#faq .group ul li .label img {
  width: 20px;
  margin-right: 15px;
}
#faq .group ul li .question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  padding: 20px 50px;
  transition: 0.3s;
  flex-wrap: wrap;
}
#faq .group ul li .question .q-text {
  flex: 1;
  font-weight: bold;
  line-height: 1.6;
  margin-right: 10px;
}
#faq .group ul li .question .toggle-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #CE3031;
  color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#faq .group ul li .question.close .toggle-icon {
  content: "-";
}
#faq .group ul li .answer {
  display: none;
  background: white;
  padding: 20px 0;
  border-top: 1px solid black;
  width: 90%;
  margin: auto;
  border-radius: 0 0 20px 20px;
}
#faq .group ul li .answer .flex {
  align-items: flex-start;
  justify-content: flex-start;
}

@media screen and (max-width: 1200px) {
  #faq .info .hero-illust {
    top: -30vw;
    right: 10px;
    width: 30vw;
  }
  #faq .group ul li .question {
    padding: 20px;
  }
  #faq .group ul li .answer {
    width: 95%;
  }
}
@media screen and (max-width: 768px) {
  #faq .group {
    padding: 0 0 60px;
  }
  #faq .group ul li .question {
    padding: 20px 10px;
  }
}
#history .only-one-job .flex {
  align-items: flex-start;
  gap: 2rem;
}
#history .only-one-job .flex .hero {
  display: block;
  width: 35vw;
  margin-top: 80px;
}
#history .only-one-job .flex .history-text img {
  margin-left: -100px;
}
#history .only-one-job .flex .history-text p {
  max-width: 550px;
  line-height: 2;
}
#history .only-one-job .flex .history-text p .pc-only {
  display: inline;
}
#history .only-one-job .flex .history-text .upper-row {
  margin-bottom: 30px;
}
#history .only-one-job .flex .history-text ol {
  list-style-position: outside; /* 数字の真下に文字がこない */
  padding-left: 2em; /* 数字と本文をきれいに分ける */
}
#history .only-one-job .flex .history-text ol li {
  list-style: decimal;
  line-height: 2;
}
#history .only-one-job .flex .history-text .lower-tier {
  margin-top: 30px;
}
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
#history .scroll-infinity {
  margin: 100px 0;
}
#history .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
#history .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 2rem;
  margin-left: 2rem;
}
#history .scroll-infinity__list--right {
  animation: infinity-scroll-right 80s infinite linear 0.5s both;
}
#history .scroll-infinity__item {
  width: 20vw;
  flex-shrink: 0;
}
#history .scroll-infinity__item > img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
#history .text {
  line-height: 2;
}
#history .timeline {
  align-items: flex-start;
  padding: 4em 0;
  justify-content: center;
  gap: 2vw;
}
#history .timeline .timeline-list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
#history .timeline .timeline-list::before {
  content: "";
  position: absolute;
  top: 1em;
  left: 125px;
  width: 1px;
  height: 100%;
  background: #333;
}
#history .timeline .timeline-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.5em;
  position: relative;
}
#history .timeline .timeline-list li:last-child {
  margin-bottom: 0;
}
#history .timeline .timeline-list li .timeline-year {
  width: 100px;
  font-size: 34px;
  color: #ce3031;
  flex-shrink: 0;
  font-style: italic;
  margin-top: -15px;
}
#history .timeline .timeline-list li .timeline-dot {
  top: 12px;
  width: 12px;
  height: 12px;
  background: #ce3031;
  border-radius: 50%;
  margin: 0 20px;
  margin-top: 0.4em;
  flex-shrink: 0;
}
#history .timeline .timeline-list li .timeline-event {
  flex: 1;
  color: #333;
  line-height: 1.6;
}
#history .timeline .timeline-list li .timeline-event .pc-block {
  display: block;
  padding-left: 93px;
}
#history .timeline .timeline-list li .timeline-event .sp-br {
  display: none;
}
#history .timeline .timeline-right {
  width: 40vw;
}

@media screen and (max-width: 1200px) {
  #history .only-one-job .flex {
    display: block;
  }
  #history .only-one-job .flex .hero {
    width: 100%;
  }
  #history .only-one-job .flex .history-text {
    margin-top: 20px;
  }
  #history .only-one-job .flex .history-text img {
    display: none;
  }
  #history .scroll-infinity {
    margin: 50px 0;
  }
  #history .scroll-infinity__item {
    width: 30vw;
  }
  #history .timeline {
    flex-direction: column-reverse;
    padding: 0;
  }
  #history .timeline .timeline-right {
    width: 100%;
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 768px) {
  #history .only-one-job .flex .hero {
    width: 120%;
    margin-left: -10%;
  }
  #history .only-one-job .flex .history-text ol .pc-only {
    display: none;
  }
  #history .scroll-infinity__item {
    width: 50vw;
  }
  #history .timeline .timeline-list li .timeline-event {
    text-indent: -0.5em;
  }
  #history .timeline .timeline-list li .timeline-event .pc-block {
    padding-left: 0;
    padding-left: 0.5em;
  }
  #history .timeline .timeline-list li .timeline-event .sp-br {
    display: block;
  }
}
#main-office,
#laser-2d,
#laser-3d-main,
#laser-automation,
#press-murata,
#press-komatsu,
#deburring,
#large-stocker,
#drill-press,
#second-office,
#laser-3d,
#axis5,
#gantry,
#bandsaw {
  scroll-margin-top: 120px;
}

#equipment .info .hero-illust {
  top: -18vw;
  right: 50px;
  width: 20vw;
}
#equipment .info .overview {
  gap: 2rem;
  margin-top: 50px;
  align-items: flex-start;
}
#equipment .info .overview .equipment-box p {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-bottom: 0.5rem;
}
#equipment .info .overview .equipment-box p .dot {
  width: 20px;
  height: 20px;
  background: #CE3031;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
#equipment .info .overview .equipment-box table {
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
  border-collapse: collapse;
}
#equipment .info .overview .equipment-box table thead {
  background-color: #333;
  color: white;
}
#equipment .info .overview .equipment-box table thead th,
#equipment .info .overview .equipment-box table thead td {
  border: 2px solid #F0F0F0;
  padding: 8px 12px;
}
#equipment .info .overview .equipment-box table thead th {
  padding: 10px 0;
  text-align: center;
}
#equipment .info .overview .equipment-box table thead .name-col {
  width: 80%;
  text-align: left;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
}
#equipment .info .overview .equipment-box table thead .count-col {
  width: 20%;
  text-align: center;
}
#equipment .info .overview .equipment-box table tbody {
  background-color: white;
}
#equipment .info .overview .equipment-box table tbody tr td {
  margin: 0;
  padding: 10px 0;
  border: 2px solid #F0F0F0;
}
#equipment .info .overview .equipment-box table tbody tr td:first-child {
  text-align: left;
  padding-left: 16px;
  padding-right: 16px;
}
#equipment .info .overview .equipment-box table tbody tr td:last-child {
  text-align: center;
  vertical-align: middle;
}
#equipment .info .overview .equipment-box table tbody tr td:last-child:empty {
  border-left: none;
}
#equipment .info .overview .equipment-box table tbody tr td:has(+ td:empty) {
  border-right: none;
}
#equipment .info .details {
  padding: 50px 0;
}
#equipment .info .details .page-link {
  margin-bottom: 10px;
}
#equipment .info .details .page-link img {
  width: 30vh;
}
#equipment .info .details .flex {
  align-items: flex-start;
}
#equipment .info .details .flex .equipments-list-wrapper {
  width: 25%;
}
#equipment .info .details .flex .equipments-list-wrapper .equipments-list {
  line-height: 2.5;
}
#equipment .info .details .flex .equipments-list-wrapper .equipments-list a {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-bottom: 0.5rem;
  color: black;
}
#equipment .info .details .flex .equipments-list-wrapper .equipments-list a .dot {
  width: 20px;
  height: 20px;
  background: #CE3031;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
#equipment .info .details .flex .right {
  width: 70%;
  margin-top: -33px;
}
#equipment .info .details .flex .right #main-office h4, #equipment .info .details .flex .right #second-office h4 {
  text-align: center;
  background-color: #333;
  padding: 10px 0;
  color: white;
  font-size: 18px;
}
#equipment .info .details .flex .right #main-office .machine-group, #equipment .info .details .flex .right #second-office .machine-group {
  margin-top: 50px;
}
#equipment .info .details .flex .right #main-office .machine-group:first-of-type, #equipment .info .details .flex .right #second-office .machine-group:first-of-type {
  margin-top: 20px;
}
#equipment .info .details .flex .right #main-office .machine-group .machine-name, #equipment .info .details .flex .right #second-office .machine-group .machine-name {
  font-size: 18px;
}
#equipment .info .details .flex .right #main-office .machine-group .flex, #equipment .info .details .flex .right #second-office .machine-group .flex {
  gap: 2rem;
  margin-top: 10px;
}
#equipment .info .details .flex .right #main-office .machine-group .flex .machine-img, #equipment .info .details .flex .right #second-office .machine-group .flex .machine-img {
  width: 50%;
}
#equipment .info .details .flex .right #main-office .machine-group .flex .text-group, #equipment .info .details .flex .right #second-office .machine-group .flex .text-group {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#equipment .info .details .flex .right #main-office .machine-group .flex .text-group p, #equipment .info .details .flex .right #second-office .machine-group .flex .text-group p {
  font-size: 14px;
  line-height: 1.5;
}
#equipment .info .details .flex .right #main-office .machine-group .flex .text-group .text, #equipment .info .details .flex .right #second-office .machine-group .flex .text-group .text {
  margin: 0;
  width: 45%;
}
#equipment .info .details .flex .right #main-office .machine-group .flex .text-group .text p, #equipment .info .details .flex .right #second-office .machine-group .flex .text-group .text p {
  gap: 0.5rem;
  display: grid;
  grid-template-columns: auto 1fr; /* 丸とテキストを2列 */
}
#equipment .info .details .flex .right #main-office .machine-group .flex .text-group .text p .dot, #equipment .info .details .flex .right #second-office .machine-group .flex .text-group .text p .dot {
  width: 15px;
  height: 15px;
  background: #CE3031;
  border-radius: 50%;
  margin-top: 2px;
  flex-shrink: 0;
}
#equipment .info .details .flex .right #main-office .machine-group .flex .text-group .text p .text-content, #equipment .info .details .flex .right #second-office .machine-group .flex .text-group .text p .text-content {
  text-align: left;
  line-height: 1.4;
}
#equipment .info .details .flex .right #main-office .machine-group .flex .text-group .full-width, #equipment .info .details .flex .right #second-office .machine-group .flex .text-group .full-width {
  width: 100%;
  flex: none;
}
#equipment .info .details .flex .right #second-office h4 {
  margin-top: 100px;
}

@media screen and (max-width: 1200px) {
  #equipment .info .hero-illust {
    top: -30vw;
    width: 25vw;
  }
  #equipment .info .flex {
    flex-direction: column;
  }
  #equipment .info .details {
    padding: 0;
  }
  #equipment .info .details .page-link img {
    width: 20vh;
  }
  #equipment .info .details .flex .equipments-list-wrapper {
    width: 100%;
    padding-bottom: 50px;
    display: flex;
    gap: 1.5rem;
  }
  #equipment .info .details .flex .equipments-list-wrapper .equipments-list {
    width: 50%;
  }
  #equipment .info .details .flex .right {
    width: 100%;
    margin-top: 0;
  }
  #equipment .info .details .flex .right #main-office .machine-group .flex, #equipment .info .details .flex .right #second-office .machine-group .flex {
    flex-direction: row;
  }
}
@media screen and (max-width: 768px) {
  #equipment .info .details .page-link img {
    width: 100%;
  }
  #equipment .info .details .flex {
    display: block;
  }
  #equipment .info .details .flex .equipments-list-wrapper {
    display: block;
  }
  #equipment .info .details .flex .equipments-list-wrapper .equipments-list {
    width: 100%;
  }
  #equipment .info .details .flex .equipments-list-wrapper .equipments-list:last-child {
    margin-top: 30px;
  }
  #equipment .info .details .flex .equipments-list-wrapper .equipments-list a {
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid black;
  }
  #equipment .info .details .flex .right {
    width: 100%;
  }
  #equipment .info .details .flex .right #main-office .machine-group .flex .machine-img, #equipment .info .details .flex .right #second-office .machine-group .flex .machine-img {
    width: 100%;
    margin-bottom: 10px;
  }
  #equipment .info .details .flex .right #main-office .machine-group .flex .text-group, #equipment .info .details .flex .right #second-office .machine-group .flex .text-group {
    width: 100%;
    gap: 0.5rem;
  }
}
#service .info .hero-illust {
  top: -22vw;
  right: 50px;
  width: 23vw;
}
#service .about-the-services {
  margin: 50px 0;
  gap: 10rem;
}
#service .about-the-services .flex {
  margin-bottom: 80px;
}
#service .flex {
  justify-content: space-between;
}
#service .flex .service-img {
  width: 27vw;
}
#service .flex .service-detail {
  width: 55vw;
}
#service .flex .service-detail .label {
  font-family: "Avengeance Mightiest Avenger", sans-serif;
  color: #143E6D;
}
#service .flex .service-detail h4 {
  font-size: 28px;
  padding: 0.5rem 0;
}
#service .flex:last-child {
  margin-bottom: 0;
}
#service .flex.reverse {
  flex-direction: row-reverse;
}
#service .service-box .link {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 80px;
}
#service .service-box .link a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 25vw;
  height: 5vw;
  border: 2px solid black;
  color: black;
  padding: 0 1.5rem;
  overflow: visible;
  background: white;
  transition: background-color 0.3s ease;
}
#service .service-box .link a:hover {
  background-color: #FFE040;
  opacity: 1;
}
#service .service-box .link a:first-child {
  border-top: 2px solid black;
}
#service .service-box .link a:last-child {
  margin-bottom: 0;
}
#service .service-box .link a .text {
  white-space: nowrap;
  flex-grow: 1;
  text-align: left;
}
#service .service-box .link a .arrow {
  margin-left: 0.75rem;
  padding-right: 0.25rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#service .service-box .link a .arrow i {
  font-size: 1.2rem;
  color: #CE3031;
  line-height: 1;
}
#service .service-box #service-2D, #service .service-box #service-3D, #service .service-box #service-last {
  scroll-margin-top: 120px;
}
#service .service-box .service-group {
  margin-bottom: 100px;
}
#service .service-box .service-group:last-child {
  margin-bottom: 0;
}
#service .service-box .service-group h3 {
  margin-bottom: 50px;
}
#service .service-box .service-group .safety-box {
  margin-top: 30px;
}
#service .service-box .service-group .safety-box h4 {
  text-align: center;
  font-size: 21px;
  margin-bottom: 20px;
}
#service .service-box .service-group .safety-box h4 span {
  color: #CE3031;
}
#service .service-box .service-group .safety-box .flex {
  gap: 2rem;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}
#service .service-box .service-group .safety-box .flex .features {
  flex: 0 1 30%;
  max-width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 1.5rem 1rem;
}
#service .service-box .service-group .safety-box .flex .features .icon-img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1/1;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#service .service-box .service-group .safety-box .flex .features .icon-img img {
  width: 80%;
  height: auto;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
#service .service-box .service-group .safety-box .flex .features h5 {
  margin: 1rem 0;
  font-size: 18px;
  color: #CE3031;
  min-height: 2.5em;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
#service .service-box .service-group .safety-box .flex .features .service-text {
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
#service .service-box #service-last .features {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}
#service .service-box #service-last .features .icon-img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1/1;
  margin: 0;
}
#service .service-box #service-last .features .text-group {
  width: 70vw;
  flex: 1;
  text-align: left;
}
#service .service-box #service-last .features .text-group h5 {
  color: #CE3031;
  font-size: 18px;
  margin-bottom: 20px;
  text-align: left;
}
#service .service-box #service-last .features .text-group .service-text {
  font-size: 14px;
  text-align: left;
}

@media screen and (max-width: 1200px) {
  #service .info .hero-illust {
    top: -30vw;
    right: 20px;
    width: 28vw;
  }
  #service .flex {
    display: block;
  }
  #service .flex .service-img {
    width: 100%;
    margin-bottom: 20px;
  }
  #service .flex .service-detail {
    width: 100%;
  }
  #service .flex .service-detail .label {
    font-size: 20px;
  }
  #service .service-box .service-group .safety-box h4 {
    margin-bottom: 40px;
  }
  #service .service-box .service-group .safety-box .flex .features {
    width: 100%;
    max-width: 100%;
  }
  #service .service-box .service-group .safety-box .flex .features .icon-img {
    aspect-ratio: 1/1;
    margin: 0 auto;
  }
  #service .service-box .service-group .safety-box .flex .features .mini {
    height: 50px;
  }
  #service .service-box .service-group .safety-box #service-last .features {
    width: 100%;
  }
  #service .service-box .service-group .safety-box #service-last .features .icon-img {
    margin: auto;
    margin-bottom: 10px;
  }
  #service .service-box .link {
    flex-direction: column;
    align-items: center;
  }
  #service .service-box .link a {
    border-top: none;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  #service .service-box .link a .text {
    margin: 15px 0;
  }
}
@media screen and (max-width: 768px) {
  #service h3 {
    font-size: 22px;
  }
  #service .service-box h4 .sp-only {
    display: inline;
  }
  #service .service-box #service-last .features {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }
  #service .service-box #service-last .features .icon-img {
    width: 100vw;
    margin: 0 auto;
  }
  #service .service-box #service-last .features .text-group {
    width: 100%;
  }
  #service .service-box #service-last .features .text-group h5 {
    text-align: center;
  }
  #service .service-box #service-last .features .text-group .service-text {
    text-align: left;
  }
}
#quality .info .hero-illust {
  top: -18vw;
  right: 50px;
  width: 20vw;
}
#quality .info .block .group {
  margin-bottom: 100px;
}
#quality .info .block .group:nth-of-type(2) {
  margin-bottom: 0;
}
#quality .info .block .group .safety-box ul > li strong {
  display: inline-block;
}
#quality .info .block .group .safety-box ul > li strong + .sub-list {
  margin-top: 1em;
}
#quality .info .block .group .safety-box ul > li.with-dot {
  position: relative;
  padding-left: 1.5em;
  padding-bottom: 20px;
}
#quality .info .block .group .safety-box ul > li.with-dot::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0.2em;
  color: #ce3031;
  font-weight: bold;
  font-size: 1em;
  line-height: 1;
}
#quality .info .block .group .safety-box ul > li .sub-list {
  list-style: disc outside;
  margin: 0 0 1.5em;
  padding-left: 0;
}
#quality .info .block .group .safety-box ul > li .sub-list li {
  position: relative;
  padding-left: 0.7em;
  line-height: 1.4;
  text-indent: 0;
  margin-bottom: 0.8em;
  word-break: break-word;
}
#quality .info .block .group .safety-box ul > li .sub-list li::marker {
  color: #333;
  font-size: 1em;
  line-height: 1;
}
#quality .info .block .group .safety-box ul > li .sub-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #000;
  font-size: 1em;
}
#quality .info .block .group .safety-box ul > li .sub-list li:last-of-type {
  margin-bottom: 0;
}
#quality .info .block .group .safety-box .safety-footer {
  line-height: 1.8;
}

@media screen and (max-width: 1200px) {
  #quality .info .hero-illust {
    top: -30vw;
    width: 25vw;
  }
}
#contact .info .flex {
  align-items: flex-start;
}
#contact .info .flex .left {
  width: 50%;
}
#contact .info .flex .left p {
  margin-bottom: 30px;
}
#contact .info .flex .right {
  width: 45%;
}
#contact .info .flex .right .group .safety-box {
  text-align: center;
  padding: 30px 0;
}
#contact .info .flex .right .group .safety-box a {
  display: inline-block;
  margin: 15px 0 5px;
}
#contact .info .flex .right .group .safety-box a .tell-img {
  width: 80%;
}
#contact .info .flex .right .group .safety-box p {
  font-size: 18px;
}
#contact .info .block .group .safety-box {
  margin-top: 50px;
}

#contact-thanks .info .top-link, #entry-thanks .info .top-link {
  text-align: center;
  margin-top: 50px;
}

@media screen and (max-width: 1200px) {
  #contact .info .flex {
    display: block;
  }
  #contact .info .flex .left {
    width: 100%;
  }
  #contact .info .flex .left .tell-link {
    margin: 0 auto 50px;
  }
  #contact .info .flex .right {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #contact .info .flex .left .tell-link {
    text-align: center;
  }
  #contact .info .flex .right .group .safety-box {
    padding: 20px 0;
  }
  #contact .info .flex .right .group .safety-box a {
    margin: 10px 0 5px;
  }
  #contact .info .flex .right .group .safety-box a .tell-img {
    width: 95%;
  }
  #contact .info .flex .right .group .safety-box p .sp-only {
    display: block;
  }
}
#entry .info .hero-illust, #contact .info .hero-illust {
  top: -20vw;
  right: 0;
  width: 20vw;
}
#entry .block .group .safety-box .form-row, #contact .block .group .safety-box .form-row {
  margin-bottom: 40px;
  padding-bottom: 40px;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
  border-bottom: 0.5px solid #707070;
}
#entry .block .group .safety-box .last-row, #contact .block .group .safety-box .last-row {
  border-bottom: none;
}
#entry .block .group .safety-box .form-label, #contact .block .group .safety-box .form-label {
  width: 25%;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
#entry .block .group .safety-box .required::after, #contact .block .group .safety-box .required::after {
  content: "必須";
  color: white;
  background: #CE3031;
  font-size: 12px;
  padding: 2px 4px;
  margin-left: 5px;
  border-radius: 2px;
  white-space: nowrap;
}
#entry .block .group .safety-box input[type=text],
#entry .block .group .safety-box input[type=email],
#entry .block .group .safety-box input[type=tel],
#entry .block .group .safety-box textarea, #contact .block .group .safety-box input[type=text],
#contact .block .group .safety-box input[type=email],
#contact .block .group .safety-box input[type=tel],
#contact .block .group .safety-box textarea {
  border: 1px solid #ccc;
  padding: 10px;
  width: 70%;
  border-radius: 6px;
}
#entry .block .group .safety-box .mwform-zip-field, #entry .block .group .safety-box .mwform-tel-field, #contact .block .group .safety-box .mwform-zip-field, #contact .block .group .safety-box .mwform-tel-field {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
#entry .block .group .safety-box .mwform-zip-field, #contact .block .group .safety-box .mwform-zip-field {
  width: 30%;
}
#entry .block .group .safety-box .mwform-tel-field, #contact .block .group .safety-box .mwform-tel-field {
  width: 40%;
}
#entry .block .group .safety-box .email_group, #contact .block .group .safety-box .email_group {
  width: 70%;
  display: flex;
  flex-direction: column;
}
#entry .block .group .safety-box textarea, #contact .block .group .safety-box textarea {
  resize: vertical;
}
#entry .block .group .safety-box .note, #contact .block .group .safety-box .note {
  font-size: 12px;
  color: #555;
  margin-bottom: 20px;
}
#entry .block .group .safety-box .form-buttons, #contact .block .group .safety-box .form-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#entry .block .group .safety-box .form-buttons .button, #contact .block .group .safety-box .form-buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#entry .block .group .safety-box .form-buttons .button .menu-icon, #contact .block .group .safety-box .form-buttons .button .menu-icon {
  background: #333;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contact-confirm .form-row, #entry-confirm .form-row {
  margin-bottom: 30px;
  padding-bottom: 30px;
  display: flex;
  align-items: flex-start;
  border-bottom: 0.5px solid #707070;
}
#contact-confirm .form-row .form-label, #entry-confirm .form-row .form-label {
  width: 25%;
  color: #707070;
}
#contact-confirm .last-row, #entry-confirm .last-row {
  border-bottom: none;
}
#contact-confirm .email_group .false, #entry-confirm .email_group .false {
  display: none;
}
#contact-confirm .note, #entry-confirm .note {
  display: none;
}
#contact-confirm .form-buttons, #entry-confirm .form-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
#contact-confirm .form-buttons .button, #entry-confirm .form-buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#contact-confirm .form-buttons .button .menu-icon, #entry-confirm .form-buttons .button .menu-icon {
  background: #333;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1200px) {
  #entry .info .hero-illust, #contact .info .hero-illust {
    top: -28vw;
    width: 25vw;
  }
  #entry .block .group .safety-box .form-row, #contact .block .group .safety-box .form-row {
    display: block;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  #entry .block .group .safety-box .form-label, #contact .block .group .safety-box .form-label {
    width: 100%;
    margin-bottom: 10px;
    justify-content: flex-start;
  }
  #entry .block .group .safety-box input[type=text],
  #entry .block .group .safety-box input[type=email],
  #entry .block .group .safety-box input[type=tel],
  #entry .block .group .safety-box textarea, #contact .block .group .safety-box input[type=text],
  #contact .block .group .safety-box input[type=email],
  #contact .block .group .safety-box input[type=tel],
  #contact .block .group .safety-box textarea {
    width: 100%;
  }
  #entry .block .group .safety-box .mwform-zip-field, #contact .block .group .safety-box .mwform-zip-field {
    width: 50%;
  }
  #entry .block .group .safety-box .mwform-tel-field, #contact .block .group .safety-box .mwform-tel-field {
    width: 60%;
  }
  #entry .block .group .safety-box .email_group, #contact .block .group .safety-box .email_group {
    width: 100%;
    margin-top: 20px;
  }
  #contact-confirm .form-row {
    flex-direction: column;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  #contact-confirm .form-row .form-label {
    width: 100%;
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  #entry .block .group .safety-box .mwform-checkbox-field.horizontal-item,
  #entry .block .group .safety-box .mwform-radio-field.horizontal-item, #contact .block .group .safety-box .mwform-checkbox-field.horizontal-item,
  #contact .block .group .safety-box .mwform-radio-field.horizontal-item {
    display: block;
    margin: 0 0 0.5em 0;
  }
  #entry .block .group .safety-box input[type=radio],
  #entry .block .group .safety-box input[type=checkbox], #contact .block .group .safety-box input[type=radio],
  #contact .block .group .safety-box input[type=checkbox] {
    margin-left: 0;
    margin-right: 0.5em;
  }
  #entry .block .group .safety-box .mwform-zip-field, #contact .block .group .safety-box .mwform-zip-field {
    width: 90%;
  }
  #entry .block .group .safety-box .mwform-tel-field, #contact .block .group .safety-box .mwform-tel-field {
    width: 100%;
  }
}
#flow .hero-illust {
  position: absolute;
  top: -12vw;
  right: 20px;
  width: 30%;
}
#flow .safety-box {
  margin-top: 50px;
}
#flow .safety-box .flow-section .flow-list {
  position: relative;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
#flow .safety-box .flow-section .flow-list::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 6.5vw;
  width: 1px;
  height: calc(100% - 100px);
  border-left: 5px dotted #153c6b;
  z-index: 0;
}
#flow .safety-box .flow-section .flow-list .flow-item {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}
#flow .safety-box .flow-section .flow-list .flow-item .flow-icon {
  width: 13.5vw;
  height: 13.5vw;
  flex-shrink: 0;
}
#flow .safety-box .flow-section .flow-list .flow-item .flow-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#flow .safety-box .flow-section .flow-list .flow-item .flow-text {
  flex: 1;
}
#flow .safety-box .flow-section .flow-list .flow-item .flow-text .step {
  color: #153c6b;
  font-weight: bold;
  margin-bottom: 0.3em;
  font-style: italic;
}
#flow .safety-box .flow-section .flow-list .flow-item .flow-text h4 {
  font-size: 28px;
  margin-bottom: 0.5em;
}
#flow .safety-box .flow-section .flow-list .flow-item .flow-text .sp-text-left {
  font-size: 1rem;
  line-height: 1.8;
}
#flow .safety-box .flow-section .flow-list .flow-item .flow-text .sp-text-left.first {
  margin-bottom: 1.5em;
}
#flow .safety-box .flow-section .flow-list .flow-item:last-child {
  margin-bottom: 0;
}

/* =============================
   TAB表示（レスポンシブ）
============================= */
@media screen and (max-width: 1200px) {
  #flow .hero-illust {
    top: -18vw;
    right: 0;
    width: 40%;
  }
}
/* =============================
   SP表示（レスポンシブ）
============================= */
@media screen and (max-width: 768px) {
  #flow .hero-illust {
    top: -38vw;
    right: 5vw;
    width: 80%;
    z-index: -1;
  }
  #flow .safety-box .flow-section .flow-list::before {
    display: none;
  }
  #flow .safety-box .flow-section .flow-list .flow-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  #flow .safety-box .flow-section .flow-list .flow-item:last-child {
    margin-bottom: 0;
  }
  #flow .safety-box .flow-section .flow-list .flow-item .flow-icon {
    width: 70%;
    margin: auto;
    height: auto;
    padding-bottom: 15px;
  }
  #flow .safety-box .flow-section .flow-list .flow-item .flow-icon img {
    width: 100%;
    height: auto;
  }
  #flow .safety-box .flow-section .flow-list .flow-item .flow-text {
    width: 100%;
    text-align: center;
  }
  #flow .safety-box .flow-section .flow-list .flow-item .flow-text h4 {
    font-size: 1.3rem;
  }
  #flow .safety-box .flow-section .flow-list .flow-item .flow-text .sp-text-left {
    text-align: left;
  }
}
.visually-hidden {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

#blog .info .hero-illust {
  top: -18vw;
  right: 100px;
  width: 20vw;
}
#blog .filter-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
#blog .filter-container .year-filter {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
}
#blog .filter-container .year-filter::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-right: 2px solid #002654;
  border-bottom: 2px solid #002654;
  pointer-events: none;
}
#blog .filter-container .year-filter select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 1rem;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 2px solid #002654;
  border-radius: 12px;
  background: #fff;
  color: #002654;
  font-weight: bold;
  box-sizing: border-box;
  cursor: pointer;
  line-height: 1.4;
}
#blog .filter-container .category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
#blog .filter-container .category-filter .category-btn {
  background: transparent;
  border: none;
  color: #002654;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 20px;
  transition: background-color 0.3s ease;
}
#blog .filter-container .category-filter .category-btn.active {
  background-color: #002654;
  color: #fff;
}
#blog .filter-container .category-filter .category-btn:hover {
  opacity: 0.8;
}

.navigation-post {
  padding-top: 0 !important;
}

.post-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.post-navigation .post-nav-links {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
  font-size: 0.9rem;
  white-space: nowrap;
}
.post-navigation .back-to-list {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.post-navigation .back-to-list .button {
  max-width: 260px;
  white-space: nowrap;
}

@media screen and (max-width: 1200px) {
  #blog .info .hero-illust {
    top: -25vw;
    right: 50px;
    width: 28vw;
  }
}
@media screen and (max-width: 768px) {
  .blog-cards, .news-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .blog-cards .card, .news-cards .card {
    width: 100%;
    box-sizing: border-box;
  }
  .post-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .post-navigation .post-nav-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .post-navigation .post-nav-links .nav-previous,
  .post-navigation .post-nav-links .nav-next {
    font-size: 0.9rem;
    white-space: nowrap;
    width: auto;
  }
  .post-navigation .back-to-list {
    margin-top: 2.5rem;
  }
}
#news .info .hero-illust {
  top: -20vw;
  right: 100px;
  width: 20vw;
}

.info .news-single-article {
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 5px solid #000;
  padding: 50px;
  box-shadow: 10px 10px 0 rgb(0, 0, 0);
}
.info .news-single-article .post-meta {
  display: flex;
  gap: 15px;
  font-size: 14px;
  margin-bottom: 20px;
}
.info .news-single-article .post-meta .category {
  background: #CE3031;
  color: #fff;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
}
.info .news-single-article .entry-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
}
.info .news-single-article .entry-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #707070;
  margin-top: 10px;
}
.info .news-single-article .post-thumbnail {
  margin: 30px 0;
}
.info .news-single-article .post-thumbnail img {
  width: 100%;
  border-radius: 4px;
}
.info .news-single-article .entry-content {
  line-height: 1.9;
  color: #333;
}
.info .news-single-article .entry-content img {
  max-width: 50%;
  margin: auto;
}
.info .news-single-article .entry-content a {
  color: #1877F2;
  border-bottom: 1px solid #1877F2;
}

@media screen and (max-width: 1200px) {
  #news .info .hero-illust {
    top: -30vw;
    right: 50px;
    width: 25vw;
  }
  .info .news-single-article {
    padding: 30px;
  }
  .info .news-single-article .entry-content img {
    max-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .info .news-single-article {
    padding: 30px 20px;
  }
  .info .news-single-article .entry-content iframe {
    max-width: 100%;
  }
}
#achievement .info .hero-illust {
  top: -20vw;
  right: 20px;
  width: 25vw;
}
#achievement .table-wrapper {
  margin: 50px 0;
}
#achievement .table-wrapper .table-group {
  margin-bottom: 2rem;
}
#achievement .table-wrapper .table-group .show-pc {
  display: table;
}
#achievement .table-wrapper .table-group .show-sp {
  display: none;
}
#achievement .table-wrapper .table-group h4 {
  margin-bottom: 5px;
}
#achievement .table-wrapper .table-group h4 span {
  color: #CE3031;
}
#achievement .table-wrapper .table-group .table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
}
#achievement .table-wrapper .table-group .table th,
#achievement .table-wrapper .table-group .table td {
  border: 5px solid black;
  padding: 0.6em;
  text-align: center;
}
#achievement .table-wrapper .table-group .table th {
  background: #F0F0F0;
}
#achievement .table-wrapper .table-group .table td {
  background-color: white;
}
#achievement .table-wrapper .table-group .note-red {
  color: #CE3031;
}
#achievement .table-wrapper .table .steel {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#achievement .table-wrapper .table .steel th,
#achievement .table-wrapper .table .steel td {
  border: 2px solid #333;
  padding: 0.8em 0.5em;
  text-align: center;
  word-break: break-word;
}
#achievement .table-wrapper .table .steel th[scope=row] {
  white-space: nowrap;
  width: 1%;
}
#achievement .table-wrapper .table .steel td {
  width: auto;
}
#achievement .category-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
#achievement .category-box .category-img-group {
  display: flex;
  flex-direction: column;
}
#achievement .category-box .category-img-group img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  border: 3px solid #CE3031;
  border-radius: 20px;
  margin-bottom: 10px;
}
#achievement .category-box .category-img-group .link {
  color: black;
  cursor: pointer;
}
#achievement .category-box .category-img-group .link i {
  margin-right: 5px;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}
.modal .is-open {
  display: flex;
}
.modal .modal-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 50vw;
  max-height: 90vh;
  overflow: auto;
  margin: 10vh auto;
  background: #fff;
  padding: 2vw;
  text-align: center;
  position: relative;
  border: 5px solid #000;
  box-shadow: 5px 5px 0 #000;
}
.modal .modal-content h5 {
  font-size: 2vw;
  margin-bottom: 0.5em;
}
.modal .modal-content h5::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #ce3031;
  margin: 5px auto 0;
}
.modal .modal-content .modal-image-wrapper {
  width: 100%;
  aspect-ratio: 3/2; /* ← 比率を統一して安定化 */
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.modal .modal-content .modal-image-wrapper #modal-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.modal .modal-content .modal-thumbnails-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin-top: 10px;
  justify-content: center;
}
.modal .modal-content .modal-thumbnails-wrapper .modal-thumbnails {
  width: 100%;
  display: flex;
}
.modal .modal-content .modal-thumbnails-wrapper .modal-thumbnails img {
  width: 34%;
  aspect-ratio: 2/1;
  border: 3px solid transparent;
  cursor: pointer;
  transition: border-color 0.3s;
  -o-object-fit: cover;
     object-fit: cover;
  box-sizing: border-box;
}
.modal .modal-content .modal-thumbnails-wrapper .modal-thumbnails img.active {
  border-color: #ce3031;
}
.modal .modal-content .modal-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px auto 0;
  padding: 0 10px;
  box-sizing: border-box;
}
.modal .modal-content .modal-controls .modal-prev,
.modal .modal-content .modal-controls .modal-next {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal .modal-content .close {
  margin: 0 auto;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  background: #fff;
  padding: 10px 80px;
  font-weight: bold;
  cursor: pointer;
  display: block;
  transition: background 0.3s;
  color: black;
}
.modal .modal-content .close:hover {
  background: #FFE040;
}

@media (min-width: 1600px) {
  #achievement .modal .modal-content {
    width: clamp(640px, 48vw, 900px);
    max-height: min(84svh, 780px);
  }
}
/* =============================
   TAB表示（レスポンシブ）
============================= */
@media screen and (max-width: 1200px) {
  #achievement .info .hero-illust {
    width: 30vw;
  }
  .modal .modal-content {
    max-width: 90vw;
    padding: 30px;
  }
  .modal .modal-content h5 {
    font-size: 20px;
  }
}
/* =============================
   Nest Hub用
============================= */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .modal .modal-content {
    max-width: 45vw;
  }
}
@media screen and (width: 1024px) and (min-height: 1000px) {
  .modal .modal-content {
    max-width: 80vw;
  }
}
/* =============================
   SP表示（レスポンシブ）
============================= */
@media screen and (max-width: 768px) {
  #achievement .table-wrapper .table-group .show-pc {
    display: none;
  }
  #achievement .table-wrapper .table-group .show-sp {
    display: table;
  }
  #achievement .table-wrapper .table-group .table th,
  #achievement .table-wrapper .table-group .table td {
    border: 3px solid #333;
    text-align: left;
  }
  #achievement .table-wrapper .table-group .table .show-sp th[scope=row] {
    width: 40%;
    white-space: nowrap;
  }
  #achievement .table-wrapper .table-group .steel-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #achievement .table-wrapper .table-group .steel-scroll .steel {
    width: 100%;
    border-collapse: collapse;
    width: -moz-max-content;
    width: max-content;
  }
  #achievement .table-wrapper .table-group .steel-scroll .steel th,
  #achievement .table-wrapper .table-group .steel-scroll .steel td {
    text-align: center;
    white-space: nowrap;
  }
  #achievement .table-wrapper .table-group .steel-scroll .steel td:first-child {
    background-color: #f0f0f0;
  }
  .modal .modal-content {
    padding: 20px;
  }
  .modal .modal-content .modal-image-wrapper #modal-img {
    margin-bottom: 0;
  }
  .modal .modal-content .modal-thumbnails-wrapper .modal-thumbnails img {
    aspect-ratio: 3/2;
  }
  .modal .modal-content .modal-controls {
    margin: 20px 0;
    padding: 0;
  }
}
#recruit .info {
  position: relative;
  /* ========= 吹き出しの共通スタイル ========= */
  /* =========================================
  働いているヒーローたちの声（色＆左右）
  - 配色：赤 → 青 → 赤 → 青 …
  - 偶数行は左右反転（三角も左へ）
  ※ 社長メッセージはカウント対象外
  ========================================= */
}
#recruit .info .hero-illust {
  top: -15vw;
  right: 100px;
  width: 25vw;
}
#recruit .info h3 .sp-only {
  display: none;
}
#recruit .info .text {
  line-height: 2;
}
#recruit .info .text .red-text {
  font-size: 32px;
}
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
#recruit .info .scroll-infinity {
  margin: 80px 0;
}
#recruit .info .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
#recruit .info .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 3.5rem;
  margin-left: 3.5rem;
}
#recruit .info .scroll-infinity__list--right {
  animation: infinity-scroll-right 80s infinite linear 0.5s both;
}
#recruit .info .scroll-infinity__item {
  width: 40vw;
  flex-shrink: 0;
}
#recruit .info .scroll-infinity__item > img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
#recruit .info .page-link a {
  width: 48%;
}
#recruit .info .group.president {
  margin: 50px 0 80px;
  --bubble-color: #FFE040; /* 黄色 */
  --bubble-text: #000; /* 黒文字 */
  /* 画像を大きめに */
  /* 外側黒を透明化して内側黄を出す */
}
#recruit .info .group.president .left-img {
  width: 40vw;
}
#recruit .info .group.president .speech-bubble {
  background: transparent;
  color: var(--bubble-text);
}
#recruit .info .group.president .speech-bubble::before {
  background: var(--bubble-color);
}
#recruit .info .group.president .speech-bubble::after {
  border-left-color: var(--bubble-color);
}
#recruit .info .group {
  margin: 80px 0;
  /* ========= 偶数個目の吹き出し ========= */
}
#recruit .info .group:nth-of-type(2n) .speech-bubble-wrapper::before {
  clip-path: polygon(98% 0%, 0% 3%, 0% 91%, 98% 100%, 98% 55%, 100% 50%, 98% 45%, 98% 0%);
}
#recruit .info .group:nth-of-type(2n) .speech-bubble-wrapper .speech-bubble {
  clip-path: polygon(98% 0%, 0% 3%, 0% 91%, 98% 100%, 98% 55%, 100% 50%, 98% 45%, 98% 0%);
  /* ▼右向き三角に変更（ここが“向き”の本体） */
}
#recruit .info .group:nth-of-type(2n) .speech-bubble-wrapper .speech-bubble::after {
  left: auto;
  right: -25px;
  border-right: none;
  border-left: 25px solid var(--bubble-color);
}
#recruit .info .group .left-img {
  width: 37vw;
}
#recruit .info .group .left-img p {
  margin-top: 10px;
}
#recruit .info .group .speech-bubble-wrapper {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
}
#recruit .info .group .speech-bubble-wrapper::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  clip-path: polygon(2% 0%, 100% 3%, 100% 91%, 2% 100%, 2% 55%, 0% 50%, 2% 45%, 2% 0%);
  background: #000;
  z-index: 0;
}
#recruit .info .group .speech-bubble-wrapper .speech-bubble {
  position: relative;
  background: #000;
  color: var(--bubble-text);
  padding: 50px 40px 70px;
  max-width: 45vw;
  z-index: 1;
  clip-path: polygon(2% 0%, 100% 3%, 100% 91%, 2% 100%, 2% 55%, 0% 50%, 2% 45%, 2% 0%);
}
#recruit .info .group .speech-bubble-wrapper .speech-bubble::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  clip-path: inherit;
  background: var(--bubble-color);
  z-index: -1;
}
#recruit .info .group .speech-bubble-wrapper .speech-bubble::after {
  content: ""; /* ← 必須！ */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  z-index: 2;
  left: -25px; /* 左に出す */
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 25px solid var(--bubble-color);
}
#recruit .info .group .speech-bubble-wrapper .speech-bubble .voice {
  position: relative;
  line-height: 1.6;
}
#recruit .info .group .speech-bubble-wrapper .speech-bubble .voice .recruit-question {
  font-size: 20px;
}
#recruit .info .group .speech-bubble-wrapper .speech-bubble .voice .yellow-text {
  color: #FFE040;
}
#recruit .info .group .speech-bubble-wrapper .speech-bubble .voice .air {
  display: block;
  height: 0;
  line-height: 0;
  margin: 0 0 1em;
}
#recruit .info .hero-voice {
  /* 反転用クラスでも、偶数指定でもOK（両対応） */
}
#recruit .info .hero-voice .group:nth-of-type(1), #recruit .info .hero-voice .group:nth-of-type(3) {
  --bubble-color:#CE3031;
  --bubble-text:#fff;
}
#recruit .info .hero-voice .group:nth-of-type(2), #recruit .info .hero-voice .group:nth-of-type(4) {
  --bubble-color:#143E6D;
  --bubble-text:#fff;
}
#recruit .info .hero-voice .group:nth-of-type(even) {
  flex-direction: row-reverse; /* 画像⇔吹き出しを入れ替え */
}
#recruit .info .job-category .category {
  margin-top: 30px;
}
#recruit .info .job-category .category .category-list {
  margin: 20px 0;
  border: 2px solid #000;
  background: #fff;
  border-radius: 20px;
  box-shadow: 5px 5px 0 rgb(0, 0, 0);
}
#recruit .info .job-category .category .category-list .question {
  display: flex;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  padding: 20px 30px;
  transition: 0.3s;
  flex-wrap: wrap;
  color: #CE3031;
  font-size: 20px;
}
#recruit .info .job-category .category .category-list .question .toggle-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #CE3031;
  color: #fff;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#recruit .info .job-category .category .category-list .question.close .toggle-icon {
  content: "-";
}
#recruit .info .job-category .category .category-list .answer {
  display: none;
  background: #fff;
  padding: 30px 0 50px;
  border-top: 1px solid #000;
  width: 95%;
  margin: auto;
  border-radius: 0 0 20px 20px;
}
#recruit .info .job-category .category .category-list .answer h5 {
  font-size: 16px;
  margin-bottom: 10px;
}
#recruit .info .job-category .category .category-list .answer p {
  font-size: 14px;
  line-height: 1.8;
}
#recruit .info .job-category .category .category-list .answer p .text-red {
  color: #CE3031;
  display: inline-block;
  margin-top: 20px;
}
#recruit .info .job-category .category .category-list .answer p .tell {
  color: #1877F2;
  border-bottom: 1px solid #1877F2;
}
#recruit .info .job-category .category .category-list .answer .boder {
  display: block;
  width: 100%;
  height: 0.3px;
  background: #707070;
  margin: 20px 0;
}
#recruit .info .job-category .category .category-list .answer ul li {
  list-style: disc;
  margin-left: 20px;
  font-size: 14px;
  line-height: 1.8;
}
#recruit .info .job-category .entory-button {
  text-align: center;
}
#recruit .info .job-category .entory-button .button {
  margin: 30px auto 100px;
  display: inline-block;
}
#recruit .info .flow-section {
  position: relative;
}
#recruit .info .flow-section .flow-list .flow-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 50px auto 0;
  background: #fff;
  border-radius: 20px;
  border: 5px solid #000;
  padding: 30px 50px;
  box-shadow: 10px 10px 0 rgb(0, 0, 0);
  max-width: 90vw;
}
#recruit .info .flow-section .flow-list .flow-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 25px;
  transform: translateX(-50%);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #000;
}
#recruit .info .flow-section .flow-list .flow-item .flow-icon {
  width: clamp(80px, 15vw, 150px);
}
#recruit .info .flow-section .flow-list .flow-item .flow-text {
  width: calc(100% - clamp(80px, 15vw, 150px) - 40px);
  line-height: 1.5;
}
#recruit .info .flow-section .flow-list .flow-item .flow-text .step {
  color: #143E6D;
  font-style: italic;
}
#recruit .info .flow-section .flow-list .flow-item .flow-text h4 {
  font-size: 28px;
}
#recruit .info .flow-section .hero-img {
  width: 15vw;
  right: -120px;
  bottom: -80px;
  position: absolute;
}

@media screen and (max-width: 1200px) {
  #recruit .info .hero-illust {
    top: -20vw;
    right: 20px;
    width: 30vw;
  }
  #recruit .info .left {
    text-align: left;
  }
  #recruit .info .group.president {
    display: block;
    /* 
    .speech-bubble-wrapper {
        .speech-bubble-triangle {
            &::before,
            &::after {
                border-left: 32px solid transparent;
                border-right: 32px solid transparent;
                border-bottom: 32px solid #000;
            }

            &::before {
                top: 3px;
            }

            &::after {
                border-bottom: 40px solid var(--bubble-color);
            }
        }

        .speech-bubble {
            .voice {
                padding: 30px 0 10px;
            }
        }
    } */
  }
  #recruit .info .group.president .left-img {
    width: 100%;
    margin-bottom: 20px;
  }
  #recruit .info .group {
    display: block;
    --tri-offset: 6px;
  }
  #recruit .info .group .speech-bubble-wrapper {
    position: relative;
  }
  #recruit .info .group .speech-bubble-wrapper::before {
    clip-path: polygon(0 0, 100% 8%, 100% 92%, 0% 100%);
    z-index: 1;
  }
  #recruit .info .group .speech-bubble-wrapper .speech-bubble-triangle {
    position: relative;
    display: block;
    z-index: 4;
    height: 0;
    line-height: 0;
  }
  #recruit .info .group .speech-bubble-wrapper .speech-bubble-triangle::before, #recruit .info .group .speech-bubble-wrapper .speech-bubble-triangle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 24px solid #000;
    z-index: 1;
  }
  #recruit .info .group .speech-bubble-wrapper .speech-bubble-triangle::before {
    top: 2px;
  }
  #recruit .info .group .speech-bubble-wrapper .speech-bubble-triangle::after {
    border-bottom: 24px solid var(--bubble-color);
    z-index: 2;
    top: var(--tri-offset);
  }
  #recruit .info .group .speech-bubble-wrapper .speech-bubble {
    position: relative;
    max-width: 100%;
    clip-path: polygon(0 0, 100% 8%, 100% 92%, 0% 100%);
    z-index: 2;
  }
  #recruit .info .hero-voice .group {
    margin: 100px 0;
  }
  #recruit .info .hero-voice .group:nth-of-type(1) {
    --tri-offset: 8px;
  }
  #recruit .info .hero-voice .group:first-of-type {
    margin-top: 50px;
  }
  #recruit .info .hero-voice .group .left-img {
    width: 95%;
    margin: auto;
  }
  #recruit .info .hero-voice .group .left-img p {
    margin-bottom: 20px;
    text-align: left;
  }
  #recruit .info .hero-voice .group:nth-of-type(2n) .speech-bubble-wrapper::before {
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 95%);
  }
  #recruit .info .hero-voice .group:nth-of-type(2n) .speech-bubble-wrapper .speech-bubble-triangle::after {
    border-bottom: 24px solid var(--bubble-color);
  }
  #recruit .info .hero-voice .group:nth-of-type(2n) .speech-bubble-wrapper .speech-bubble {
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 95%);
  }
  #recruit .info .hero-voice .group:nth-of-type(2n) .speech-bubble-wrapper .speech-bubble::before {
    background: var(--bubble-color);
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 95%);
  }
  #recruit .info .flow-section .flow-list .flow-item {
    padding: 20px;
  }
  #recruit .info .flow-section .hero-img {
    width: 20vw;
    right: 0;
    top: -150px;
  }
}
@media screen and (max-width: 767.98px) {
  #recruit .info h3 .sp-only {
    display: inline;
  }
  #recruit .info .text .pc-only {
    display: none;
  }
  #recruit .info .text .red-text {
    line-height: 1.5;
  }
  #recruit .info .scroll-infinity {
    margin: 50px 0;
  }
  #recruit .info .scroll-infinity__list {
    gap: 1.5rem;
    margin-left: 1.5rem;
  }
  #recruit .info .scroll-infinity__item {
    width: 90vw;
  }
  #recruit .info .page-link {
    flex-direction: column;
    gap: 2rem;
  }
  #recruit .info .page-link a {
    width: 100%;
  }
  #recruit .info .group.president .speech-bubble-wrapper {
    /*
    .speech-bubble-triangle {
        &::before,
        &::after {
            border-left: 27px solid transparent;
            border-right: 27px solid transparent;
            border-bottom: 27px solid #000;
        }

        &::before {
            top: -3px;
        }

        &::after {
            border-bottom: 32px solid var(--bubble-color);
        }
    } */
  }
  #recruit .info .group.president .speech-bubble-wrapper .speech-bubble .voice {
    padding: 10px 0;
  }
  #recruit .info .group {
    --tri-offset: 1px;
  }
  #recruit .info .group .speech-bubble-wrapper::before {
    clip-path: polygon(0 0, 100% 3%, 100% 97%, 0% 100%);
  }
  #recruit .info .group .speech-bubble-wrapper .speech-bubble-triangle::before {
    top: -6px;
  }
  #recruit .info .group .speech-bubble-wrapper .speech-bubble {
    padding: 50px 20px;
    clip-path: polygon(0 0, 100% 3%, 100% 97%, 0% 100%);
  }
  #recruit .info .hero-voice .group:nth-of-type(1) {
    --tri-offset: 2px;
  }
  #recruit .info .hero-voice .group:nth-of-type(2n) .speech-bubble-wrapper::before {
    clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%);
  }
  #recruit .info .hero-voice .group:nth-of-type(2n) .speech-bubble-wrapper .speech-bubble {
    clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%);
  }
  #recruit .info .hero-voice .group:nth-of-type(2n) .speech-bubble-wrapper .speech-bubble::before {
    clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%);
  }
  #recruit .info .job-category .category .category-list .question {
    padding: 20px;
  }
  #recruit .info .job-category .category .category-list .answer {
    width: 90%;
  }
  #recruit .info .flow-section .flow-list .flow-item {
    display: block;
    padding: 20px;
  }
  #recruit .info .flow-section .flow-list .flow-item .flow-icon {
    width: 70%;
    margin: auto;
  }
  #recruit .info .flow-section .flow-list .flow-item .flow-text {
    width: 100%;
  }
  #recruit .info .flow-section .flow-list .flow-item .flow-text .step {
    margin-top: 10px;
    text-align: center;
  }
  #recruit .info .flow-section .flow-list .flow-item .flow-text h4 {
    margin-top: -5px;
    text-align: center;
  }
}
@media screen and (width: 768px) {
  #recruit .info .group .speech-bubble-wrapper .speech-bubble-triangle::before {
    top: 1px;
  }
  #recruit .info .group .speech-bubble-wrapper .speech-bubble::before {
    top: 5px;
  }
  #recruit .info .flow-section .flow-list .flow-item {
    padding: 20px 50px;
  }
  #recruit .info .flow-section .flow-list .flow-item .flow-icon {
    width: 50%;
    margin: auto;
  }
  #recruit .info .flow-section .flow-list .flow-item .flow-text {
    text-align: center;
  }
}
/* 例：幅 1100–1300px の時だけ少し上げる */
@media (min-width: 1100px) and (max-width: 1300px) {
  #recruit .info .group {
    --tri-offset: 3px; /* 既定(=6pxなど)より小さく→“上”に動く */
  }
  #recruit .info .group .speech-bubble-wrapper .speech-bubble-triangle::before {
    top: -3px; /* 影も同じ分だけ上げる */
  }
}
#privacy .info .hero-illust {
  top: -23vw;
  right: 100px;
  width: 20vw;
}
#privacy .info .block .group .safety-box .list {
  padding-bottom: 50px;
}
#privacy .info .block .group .safety-box .list:last-of-type {
  padding-bottom: 0;
}
#privacy .info .block .group .safety-box .list .contact-info {
  margin-top: 1.5em;
  line-height: 1.8;
}
#privacy .info .block .group .safety-box .list p .red {
  color: #CE3031;
}
#privacy .info .block .group .safety-box .list p .border-line {
  color: black;
  border-bottom: 1px solid black;
}

@media screen and (max-width: 768px) {
  #privacy .section-heading {
    padding: 10px;
  }
}
.post {
  margin-bottom: 4rem;
  line-height: 1.8;
  font-size: 1rem;
  color: #333;
  padding: 0 1rem;
}
.post .entry-title {
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.post .entry-meta {
  font-size: 0.875rem;
  color: #888;
  margin-bottom: 1.5rem;
}
.post .entry-meta time {
  margin-right: 1rem;
}
.post .entry-meta .cat-links a {
  color: #555;
  text-decoration: underline;
}
.post .entry-meta .cat-links a:hover {
  text-decoration: none;
}
.post .post-thumbnail {
  margin-bottom: 2rem;
}
.post .post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.post .entry-content h2 {
  font-size: 1.375rem;
  margin: 2rem 0 1rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}
.post .entry-content h3 {
  font-size: 1.125rem;
  margin: 1.5rem 0 1rem;
}
.post .entry-content p {
  margin: 1.25rem 0;
}
.post .entry-content ul,
.post .entry-content ol {
  margin: 1.5rem 0 1.5rem 1.5rem;
  padding-left: 1rem;
}
.post .entry-content blockquote {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid #ccc;
  background: #f9f9f9;
  font-style: italic;
}
.post .entry-content img {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
}
.post .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}
.post .entry-content table th,
.post .entry-content table td {
  border: 1px solid #ccc;
  padding: 0.75rem;
}
.post .entry-content table th {
  background: #f5f5f5;
}
.post .tags-links {
  margin-top: 2rem;
}
.post .tags-links a {
  display: inline-block;
  background: #eee;
  color: #333;
  padding: 0.25rem 0.75rem;
  margin: 0 0.5rem 0.5rem 0;
  font-size: 0.875rem;
  border-radius: 2px;
}
.post .tags-links a:hover {
  background: #ccc;
  color: #000;
}
.post .navigation-post {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #ddd;
}
.post .navigation-post .nav-previous,
.post .navigation-post .nav-next {
  font-size: 0.9rem;
}
.post .navigation-post .nav-previous a,
.post .navigation-post .nav-next a {
  color: #0073aa;
  text-decoration: none;
}
.post .navigation-post .nav-previous a:hover,
.post .navigation-post .nav-next a:hover {
  text-decoration: underline;
}

.navigation-post {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 2rem;
  position: relative;
}
.navigation-post .nav-previous,
.navigation-post .nav-next {
  flex: 1;
  font-size: 0.9rem;
}
.navigation-post .nav-previous a,
.navigation-post .nav-next a {
  color: #000;
}
.navigation-post .nav-previous a:hover,
.navigation-post .nav-next a:hover {
  opacity: 0.5;
}
.navigation-post .nav-previous {
  text-align: left;
}
.navigation-post .nav-next {
  text-align: right;
}
.navigation-post .back-to-list {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.navigation-post .back-to-list a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
}

@media (min-width: 768px) {
  .post {
    max-width: 720px;
    margin: 0 auto 5rem;
    padding: 0;
  }
  .post .entry-title {
    font-size: 2.25rem;
  }
  .post .entry-meta {
    font-size: 1rem;
  }
  .post .entry-content h2 {
    font-size: 1.75rem;
  }
  .post .entry-content h3 {
    font-size: 1.25rem;
  }
  .post .navigation-post {
    flex-direction: row;
    justify-content: space-between;
  }
}
.hero-overlay {
  display: grid;
}

.hero-overlay .mv {
  grid-area: 1/1;
  z-index: 2;
}

.hero-overlay .scroll-animation {
  grid-area: 1/1;
}

.hero-video {
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}/*# sourceMappingURL=style.css.map */