@charset "utf-8";

/* ================================
   Fonts
================================ */
@font-face {
  font-family: "YourFontName";
  src: url("/wp-content/fonts/yourfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DINNextLTPro-Medium";
  src: url("../img/en.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* ================================
   Reset & Base
================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  word-break: normal;
  word-wrap: break-word;
}

body {
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background-color: #fff;
  font-family: "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", Meiryo, メイリオ, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #384251;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  letter-spacing: 0.1em;
}

img {
  max-width: 100%;
  border: 0;
  vertical-align: middle;
}

/* ================================
   Utilities
================================ */
.en {
  font-family: "DINNextLTPro-Medium";
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

/* Margins / Paddings */
.mt-100 {
  margin-top: 100px;
}
.mb-120 {
  margin-bottom: 120px;
}
.mb50 {
  margin-bottom: 50px;
}
.pb50 {
  padding-bottom: 50px;
}
.pb60 {
  padding-bottom: 60px;
  margin-top: 20px;
}
.pb120 {
  padding-bottom: 120px;
}
.pt120 {
  padding-top: 120px;
}
.pt30 {
  padding-top: 30px;
}
.pt60 {
  padding-top: 60px;
}
.mt60 {
  margin-top: 60px;
}
.mt50 {
  margin-top: 50px;
}

/* Text alignment */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

/* Center + Text shadow */
.center {
  text-align: center;
  align-items: center;
  text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.9),
    -2px -2px 8px rgba(255, 255, 255, 0.9);
}

/* Lists */
ul li {
  list-style: none;
}

/* Headings & p */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}

/* ================================
   Colors & Variables
================================ */
:root {
  --zkm-bg: #fff;
  --zkm-ink: #1f2937;
  --zkm-accent: #ff7a18;
  --zkm-card: #fbfbfb;
  --zkm-radius: 14px;
  --zkm-shadow: 0 6px 16px rgba(31, 41, 55, 0.08);
  --zkm-gap: 20px;
  --zkm-maxwidth: 1100px;
}

.yellow {
  color: #d6761e;
}

.pink_back {
  background: url("../img/tetote/banner-back.png") no-repeat center / cover;
}

/* ================================
   Animation
================================ */
.os-animation {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.os-animation.animated {
  opacity: 1;
}

/* ================================
   Containers
================================ */
.fixedcontainer {
  width: 1080px;
  margin: 0 auto;
}

@media screen and (max-width: 960px) {
  .fixedcontainer {
    width: 90%;
  }
}

/* ================================
   Links
================================ */
a {
  color: inherit;
  text-decoration: none;
  outline: none;
  transition: opacity 0.3s ease;
}
a:hover {
  opacity: 0.8;
}

/* ================================
   Responsive Utils
================================ */
.sp-br {
  display: none;
}
.visible-sp {
  display: none;
}
.hidden-sp {
  display: block;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .hidden-sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .sp-br {
    display: inline;
  }
  .visible-sp {
    display: block;
  }
  .hidden-sp {
    display: none;
  }
}

/* ===============================
   header
================================ */
header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999; /* 最前面 */
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.header_in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  padding: 8px;
}
.logo {
  padding-left: 40px;
}
.header_links {
  display: flex;
  align-items: center;
}
.header_links ul li {
  list-style: none;
  display: inline-block;
  margin: 0 15px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  transition: all 0.3s ease;
}

/* マウスホバーでふわっと浮く */
.header_links ul li:hover {
  transform: translateY(-5px);
  color: #ff914d; /* やさしいオレンジ */
}

/* 下線がにょきっと出るアニメーション */
.header_links ul li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffd86b, #ffa94d);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.header_links ul li:hover::after {
  width: 100%;
}
.header_links > ul li span {
  display: block;
  text-align: center;
}
.header_links > ul li span img {
  width: 30px;
}
.menu-trigger {
  position: relative;
  display: block;
  cursor: pointer;
  width: 90px;
  height: 90px;
  z-index: 5;
  display: none;
}

/* --- trigger --- */
.menu-trigger.scroll {
  position: fixed;
  top: 0;
  right: 0;
}
.menu-trigger span {
  display: inline-block;
  transition: all 0.4s;
  box-sizing: border-box;
  cursor: pointer;
  float: right;
  position: absolute;
  background: #fff;
  width: 36px;
  height: 2px;
  left: 0;
  right: 0;
  margin: auto;
}
.menu-trigger span:nth-of-type(1) {
  top: 25px;
}
.menu-trigger span:nth-of-type(2) {
  top: 35px;
}
.menu-trigger span:nth-of-type(3) {
  top: 45px;
}
.menu-trigger p {
  position: absolute;
  top: 55px;
  text-align: center;
  width: 100%;
  font-size: 12px;
  color: #fff;
}
.error-text {
  text-align: center;
  color: red;
}
.error-sub-text {
  color: red;
  text-align: center;
  margin-bottom: 50px;
}

/* --- nav --- */
.g-nav {
  position: fixed;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 0;
  height: 100vh;
  z-index: 4;
  transition: 0.5s;
  overflow-x: hidden;
}
.g-nav.open {
  width: 100%;
  transition: 0.5s;
}
.g-nav .list {
  width: 400px;
  padding: 120px 20px 80px;
  overflow-y: auto;
  background: #f0f0f0;
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
}
.g-nav .list li {
  text-align: center;
  border-bottom: 1px dashed #ccc;
}
.g-nav .list li:first-child {
  border-top: 1px dashed #ccc;
}
.g-nav .list li:last-child {
  border-bottom: none;
  position: static; /* ← absolute をやめる */
}

.g-nav .list li a {
  display: inline-block;
  width: 228px;
  text-align: center;
  text-decoration: none;
  padding: 10px 0;
  font-weight: bold;
}
.g-nav .list li a span {
  display: block;
  text-align: center;
}
.g-nav .list li a span img {
  width: 30px;
}
.g-nav .list li.contact_btn a {
  border: 3px solid #ff830e;
  border-radius: 6px;
  padding: 7px 0;
  color: #ff830e;
  background-color: #fff;
}
.g-nav .list li.order_btn a {
  color: #fff;
  background-color: #ff830e;
  border-radius: 6px;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}

.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}

.fv_copyright {
  position: absolute;
  left: -30px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  top: 50%;
  margin-top: -40px;
}
/* --- menu_link --- */

.menu_links {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 360px;
}
.menu_links a {
  display: block;
  padding: 15px 0;
  color: #fff;
  text-align: center;
}
.menu_links div {
  margin-top: 20px;
}
.gotop {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 3;
}
.cta-group {
  display: flex;
  gap: 12px;
  padding-right: 20px;
}
.contact-group {
  gap: 12px;
  padding-right: 20px;
}

.cta-btn {
  background: linear-gradient(#ff6b00 0, #ff8c1a 100%);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}

.cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(255, 141, 26, 0.35);
}

.cta-btn--alt {
  background: #fff;
  color: #ff8d1a;
  border: 2px solid #ff8d1a;
}

.cta-btn--alt:hover {
  background: #ff8d1a;
  color: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .menu-trigger {
    display: block;
  }
  .header_in {
    padding: 0;
  }
}
/* レスポンシブ時（スマホ用）少し大きく間隔を広げる */
@media (max-width: 768px) {
  .header_links ul li {
    display: block;
    margin: 12px 0;
    text-align: center;
    font-size: 18px;
  }
  .header_in {
    padding: 0;
  }
  .hidden-sp {
    display: none;
  }
  .cta-group {
    display: none;
  }
  .menu-trigger {
    display: block;
  }
}
/* ===============================
  フッター
================================ */
.footer {
  margin-top: 10px;
  position: relative;
  padding: 60px 0;
  background: #787878;
  color: #fff;
}

.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/bg_pattern.png) repeat;
  background-size: 100px 100px;
  opacity: 0.05;
}

.footer::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 1;
  background: linear-gradient(180deg, #ff6b00 0%, #ff8c1a 100%);
}

.footer .fixedcontainer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.footer_company {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.footer_logo {
  background: #fff;
  border-radius: 50%;
  margin-right: 15px;
}

.footer_left {
  text-align: right;
}

.footer_left ul {
  display: flex;
  margin-bottom: 10px;
}

.footer_left ul li {
  margin-left: 20px;
}

.footer_left ul a {
  text-decoration: underline;
}

.copyright {
  text-align: left;
}

.fixed_bottom {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 25px 10px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #fff;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  z-index: 3;
  background: linear-gradient(#ff6b00 0, #ff8c1a 100%);
}

.fixed_bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../img/bg_pattern.png) repeat center / 100px 100px;
  opacity: 0.2;
}

.fixed_bottom img {
  margin-bottom: 10px;
}

.yellow_back {
  background: linear-gradient(#ff6b00 0, #ff8c1a 100%);
}

/* --- title --- */
.title {
  text-align: center;
  font-size: 50px;
  padding-top: 30px;
  background-size: contain;
  background-position: top;
  text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.9),
    -2px -2px 8px rgba(255, 255, 255, 0.9);
}

.title span,
.sub-title {
  font-family: DINNextLTPro-Medium;
  font-size: 18px;
  color: #787878;
  display: block;
}

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

.title small {
  font-size: 24px;
}

.yback {
  background: linear-gradient(
    to top,
    #fde67c 0%,
    #fde67c 40%,
    transparent 40%,
    transparent 100%
  );
}

/* --- ボタン --- */
.btn {
  max-width: 420px;
  width: 100%;
  line-height: 1;
  margin: 0 auto;
}

.btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #fff;
  font-weight: 700;
  padding: 18px 0;
  border-radius: 40px;
  position: relative;
  z-index: 1;
  overflow: hidden;

  /* 黒枠対策まとめ */
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.btn a:focus,
.btn a:active {
  outline: none !important;
  box-shadow: none !important;
}

.btn_text {
  position: relative;
  z-index: 1;
  margin-right: 15px;
  line-height: 1.6;
}

.btn_icon {
  position: relative;
  width: 50px;
  height: 1px;
  background: #fff;
  transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
}

.btn a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(60, 60, 60, 0.1);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn a:hover::after {
  opacity: 1;
}

.btn a:hover .btn_icon {
  width: 30px;
}

.black_back {
  background: #333;
}
/* ===============================
  Other services 会社案内
================================ */
.t-top-opencampus__inner {
  position: relative;
  display: flex;
  border-radius: 6px;
  background: linear-gradient(
    45deg,
    rgba(26, 167, 199, 0.25) 0 25%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(252, 120, 113, 0.25) 75% 100%
  );
}

.t-top-opencampus__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: url("../img/opencampus_bg.png") center / cover no-repeat;
}

/* padding レスポンシブ */
@media (min-width: 1024px) {
  .t-top-opencampus__inner {
    padding: 110px 0 100px;
  }
  .t-top-opencampus__vertical {
    width: 98px;
    font-size: 22px;
  }
  .t-top-opencampus__main {
    height: 594px;
  }
  .c-opencampus::before {
    width: 264px;
    height: 100px;
  }
  .c-opencampus__year {
    font-size: 61px;
  }
  .c-opencampus__title {
    font-size: 80px;
  }
  .c-opencampus__name {
    font-size: 19px;
  }
}

@media (max-width: 1023px) and (min-width: 561px) {
  .t-top-opencampus__inner {
    padding: 100px 0 90px;
  }
  .t-top-opencampus__vertical {
    width: 50px;
    font-size: 12px;
  }
  .t-top-opencampus__main {
    height: 400px;
  }
  .c-opencampus::before {
    width: 210px;
    height: 80px;
  }
  .c-opencampus__year {
    font-size: 40px;
  }
  .c-opencampus__title {
    font-size: 50px;
  }
  .c-opencampus__name {
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .t-top-opencampus__inner {
    padding: 70px 0 60px;
  }
  .t-top-opencampus__vertical {
    width: 26px;
    font-size: 10px;
  }
  .t-top-opencampus__main {
    height: 250px;
  }
  .t-top-opencampus__visual div {
    background-size: 100%;
  }
  .t-top-opencampus__btn a {
    font-size: 12px !important;
  }
  .c-opencampus::before {
    width: 140px;
    height: 54px;
  }
  .c-opencampus__year {
    font-size: calc(10px + 5vw);
    margin-bottom: 10px;
  }
  .c-opencampus__title {
    font-size: calc(10px + 6vw);
  }
  .c-opencampus__name {
    font-size: 12px;
  }
  .footer_left ul {
    display: block;
  }
}

@media (max-width: 320px) {
  .t-top-opencampus__btn a {
    font-size: 10px !important;
  }
}

/* --- vertical --- */
.t-top-opencampus__vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.25em;
}

/* --- main content --- */
.t-top-opencampus__main {
  position: relative;
  z-index: 2;
  flex: 1;
}
.t-top-opencampus__main h2 {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* --- visual --- */
.t-top-opencampus__visual {
  height: 100%;
  overflow: hidden;
}
.t-top-opencampus__visual div {
  width: 100%;
  height: calc(100% + 100px);
  margin-top: -50px;
  background: url("../img/tetote/15.jpeg") center / cover no-repeat;
}

/* --- button --- */
.t-top-opencampus__btn {
  width: 96%;
  transform: translateY(-50%);
  margin-top: 0;
}

/* --- title area --- */
.c-opencampus {
  text-align: center;
  line-height: 1;
}
.c-opencampus::before {
  content: "";
  display: block;
  background: url("../img/opencampus_title.svg") center / contain no-repeat;
  margin: 0 auto;
}
.c-opencampus span {
  display: block;
  text-transform: uppercase;
  white-space: nowrap;
  color: whitesmoke;
}
.c-opencampus__title,
.c-opencampus__year {
  font-family: DINNextLTPro-Medium;
}
.c-opencampus__year {
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.c-opencampus__title {
  letter-spacing: -0.01em;
}
.c-opencampus__name {
  letter-spacing: 0.1em;
}

/* shadow effect */
.c-opencampus--shadow .c-opencampus__title,
.c-opencampus--shadow .c-opencampus__year {
  text-shadow: 0 0 11px rgba(255, 255, 255, 0.75);
}

/* ===============================
   パンくずリスト
================================ */
.breadcrumb {
  font-size: 14px;
  background: #fff8f0;
  border-radius: 12px;
  padding: 10px 18px;
  display: inline-block;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  margin: 12px 0 24px;
}
.breadcrumb a {
  color: #ff8a3d;
  font-weight: 600;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb .separator {
  color: #aaa;
  margin: 0 6px;
}
.breadcrumb span[property="itemListElement"]:last-child {
  color: #555;
  font-weight: 700;
}
/* ===============================
   SNS固定デザイン
================================ */
.sns-fixed-icons {
  position: fixed;
  top: 20%;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: translateY(-50%);
  z-index: 9999;
}

.sns-fixed-icons .sns-item img {
  width: 50px;
  height: 50px;
  padding: 6px;
  background: #fff;
  border-radius: 12px;
  object-fit: contain;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.sns-fixed-icons .sns-item img:hover {
  transform: scale(1.15) translateX(-5px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 768px) {
  .sns-fixed-icons {
    top: 79%;
    right: 10px;
    gap: 12px;
  }

  .sns-fixed-icons .sns-item img {
    width: 40px;
    height: 40px;
    padding: 4px;
  }
}

/* ===============================
   視覚的に非表示（アクセシビリティ保持）
================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===============================
   ドットデザイン
================================ */
.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.dot {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
}

.dot1 {
  background-color: #f7b267;
}
.dot2 {
  background-color: #f79d65;
}
.dot3 {
  background-color: #f47c3c;
}

/* ===============================
  無料オンライン相談 固定バナー
================================ */
.consult-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  width: 260px;
  padding: 10px;
  background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.consult-banner img {
  width: 70px;
  margin-right: 10px;
  border-radius: 6px;
  height: auto;
}

.consult-text {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.consult-text strong {
  font-size: 15px;
  color: #ff9800;
  text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.9),
    -2px -2px 8px rgba(255, 255, 255, 0.9);
}

.consult-button {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 12px;
  background: linear-gradient(#ff6b00, #ff8c1a);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  border-radius: 20px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.consult-button:hover {
  background: #ffbb1e;
  transform: translateY(-2px);
}

.consult-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: #666;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}

@media (max-width: 768px) {
  .consult-banner {
    display: none;
  }
}
/* ===============================
   無料オンライン相談セクション
================================ */
.consultbox-section {
  padding: 36px 20px 0;
  background: linear-gradient(180deg, #fff8f3 0%, #fff 100%);
}

.consultbox-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}

.consultbox-left {
  flex: 1 1 560px;
}

.consultbox-badge {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #b65b2f;
  background: rgba(246, 200, 180, 0.15);
  border-radius: 999px;
}

.consultbox-title {
  margin: 6px 0 12px;
  font-size: 22px;
  color: #2b2b2b;
  line-height: 1.3;
}

.consultbox-desc {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.8;
  color: #555;
}

.consultbox-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.consultbox-btn {
  display: inline-block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}

.consultbox-btn-primary {
  background: #ff7b4a;
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 123, 74, 0.18);
  transition: transform 0.2s ease;
}

.consultbox-btn-primary:hover {
  transform: translateY(-3px);
}

.consultbox-btn-secondary {
  padding: 8px 14px;
  background: #00a760;
  border: 2px solid #fff;
  color: #fff;
}

.consultbox-note {
  margin-top: 8px;
  font-size: 13px;
  color: #7a7a7a;
}

/* 右側イラスト */
.consultbox-right {
  width: 260px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.consultbox-ill {
  width: 100%;
  max-width: 290px;
  display: block;
}

/* ===============================
   iPad対応
================================ */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .orange-contact-container {
    flex-direction: row;
  }
}

/* ===============================
   スマホレスポンシブ
================================ */
@media screen and (max-width: 768px) {
  .visible-sp {
    display: block;
  }
  .hidden-sp {
    display: none !important;
  }

  body {
    font-size: 14px;
    line-height: 1.7;
  }

  .menu_links {
    width: 260px;
  }

  .fixedcontainer {
    width: 90%;
    text-align: left;
  }

  .header_contact {
    display: none;
  }
  .header_contact span {
    display: block;
    text-align: center;
    margin-bottom: 3px;
  }
  .header_contact span img {
    width: 20px;
  }

  /* 下部固定ボタン */
  .fixed_bottom {
    right: 0;
    left: 0;
    bottom: 0;
    top: auto;
    transform: none;

    width: 100%;
    height: 60px;

    display: flex;
    flex-direction: row; /* 横並び */
    justify-content: center;
    align-items: center;

    padding: 10px;
    writing-mode: horizontal-tb; /* 横書きへ変更 */
    text-orientation: initial;

    font-size: 18px; /* 少し小さめ */
    letter-spacing: 1px;
  }

  .fixed_bottom img {
    margin-bottom: 0;
    margin-right: 8px; /* 文字とアイコンを横並び */
    height: 28px;
    width: auto;
  }
  .logo img {
    width: 115px;
  }

  .g-nav .list {
    width: 300px;
    padding-top: 80px;
  }

  .menu-trigger {
    width: 60px;
    height: 60px;
  }
  .menu-trigger span {
    width: 30px;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 12px;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 22px;
  }
  .menu-trigger span:nth-of-type(3) {
    top: 32px;
  }
  .menu-trigger p {
    top: 39px;
    font-size: 10px;
  }

  /* スライダー */
  .slider .slick-slide {
    padding: 20px;
    border: 1px solid #f2c94c;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  }

  .slick-slide div {
    text-align: left;
  }

  .slider_illust {
    right: 0;
    width: 100px;
  }

  .price .message {
    padding: 20px;
  }
  .price h4 {
    font-size: 24px;
    margin-bottom: 5px;
  }

  .instagram h2 {
    margin-bottom: 30px;
  }

  .logo {
    padding-left: 20px;
  }

  .pt120 {
    padding-top: 40px;
  }
  .pb120 {
    padding-bottom: 40px;
  }

  .title {
    margin-bottom: 20px;
    font-size: 22px;
    position: relative;
    z-index: 1;
  }
  .title span {
    font-size: 14px;
    font-weight: normal;
  }
  .title small {
    font-size: 16px;
  }

  .btn {
    max-width: 300px;
  }
  .btn a {
    padding: 12px 0;
  }

  /* CTA */
  .cta {
    padding: 50px 0;
  }
  .cta .fixedcontainer {
    display: block;
  }
  .cta .fixedcontainer > div {
    width: 100%;
    padding: 20px 0;
  }
  .cta .fixedcontainer > div h2 {
    font-size: 16px;
  }
  .cta .fixedcontainer > div h2 img {
    width: 20px;
  }

  /* 電話番号 */
  .tel_num {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
  }
  .tel_num span {
    font-size: 36px;
  }

  .cta_tel {
    margin-bottom: 10px;
  }

  /* フッター */
  .footer {
    padding: 30px 0 0;
    margin-bottom: 57px;
  }
  .footer .fixedcontainer {
    display: block;
  }
  .footer_right {
    text-align: center;
    margin-top: 30px;
  }
  .footer_company {
    text-align: left;
  }

  /* その他 */
  .gotop {
    display: none;
  }
  .more_btn {
    margin-top: 30px;
  }
  .slider_txt {
    font-size: 14px;
  }

  .slick-next,
  .slick-prev {
    width: 40px;
    height: 40px;
  }
  .slick-next {
    right: -10px;
  }
  .slick-prev {
    left: -10px;
  }

  .message {
    margin-top: 40px;
    padding: 30px 20px 20px;
  }
  .message h2 {
    font-size: 24px;
    left: 20px;
  }
  .message h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .message .img {
    right: 20px;
    top: 0;
    margin-top: -30px;
    width: 100px;
  }
}
/* ===============================
   問い合わせ（オレンジBOXセクション）
================================ */
.orange-contact-section {
  padding: 50px 20px;
  text-align: center;
  background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
}

.orange-contact-title {
  margin-bottom: 80px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.orange-contact-sub {
  font-size: 16px;
  font-weight: normal;
  color: #fff;
}

/* Box Container */
.orange-contact-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.orange-contact-box {
  width: 300px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  text-align: center;
  position: relative;
  overflow: visible;
  box-shadow: 0 12px 12px rgba(40, 47, 60, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.orange-contact-box:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 20px rgba(255, 122, 0, 0.3);
}

.orange-contact-img {
  width: 80%;
  height: 150px;
  margin: -85px auto 15px;
  border-radius: 8px;
}

.orange-contact-heading {
  margin: 10px 0;
  font-size: 18px;
  color: #ff7a00;
}

.orange-contact-text {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  text-align: left;
}

.orange-contact-btn {
  width: 100%;
  padding: 12px 20px;
  display: inline-block;
  background: linear-gradient(#ff6b00 0, #ff8c1a 100%);
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  transition: background 0.3s ease, transform 0.2s ease;
}

.orange-contact-btn:hover {
  background: #e96a00;
  transform: scale(1.05);
}
/* Responsive */
@media (max-width: 768px) {
  .orange-contact-container {
    flex-direction: column;
    align-items: center;
  }
  .orange-contact-box {
    margin-top: 50px;
  }
}

/* ===============================
   エラーメッセージ
================================ */
.error-title {
  text-align: center;
  color: red;
}

.error-message {
  text-align: center;
}

.error-sub-text {
  margin-bottom: 50px;
}

.error-image {
  width: 200px;
  margin: 0 auto;
}

/* ===============================
   問い合わせページ（SMRJ）
================================ */
.smrj-download-section {
  padding: 0 20px;
  background: #fff;
}

.smrj-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.smrj-text-box {
  flex: 1 1 50%;
  position: relative;
}

.smrj-badge {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100px;
  height: 100px;
  background: #f8b400;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
}

.smrj-subtitle {
  margin-left: 100px;
  font-size: 16px;
  font-weight: bold;
  color: #f8b400;
}

.smrj-title {
  margin: 15px 0 0 100px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
}

.smrj-description {
  margin: 0 0 0 100px;
  font-size: 14px;
  color: #333;
}

.smrj-image-box {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  position: relative;
}

.smrj-img-back {
  z-index: 1;
}

.smrj-img-front {
  width: 70%;
  max-width: 350px;
  border-radius: 6px;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.contact-img {
  width: 70%;
  height: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .smrj-download-section {
    padding: 10px 20px;
  }

  .smrj-container {
    display: block;
    padding: 0;
    gap: 15px;
  }

  .smrj-badge {
    top: -10px;
    left: -10px;
    width: 70px;
    height: 70px;
    font-size: 12px;
  }

  .smrj-subtitle,
  .smrj-title,
  .smrj-description {
    margin-left: 80px;
  }

  .smrj-subtitle {
    font-size: 14px;
  }

  .smrj-title {
    font-size: 20px;
  }

  .smrj-description {
    font-size: 13px;
  }

  .smrj-img-back {
    width: 50%;
    max-width: 200px;
  }

  .smrj-img-front {
    width: 60%;
    max-width: 250px;
  }

  .contact-img {
    width: 100%;
  }
}

/* さらに狭い幅用 */
@media (max-width: 600px) {
  .smrj-title {
    font-size: 17px;
  }
}
/* ===============================
   SMRJ Contact Section
================================ */
.smrj-contact-section {
  padding: 40px 20px;
  background: #fff;
  text-align: left;
}

.smrj-contact-container {
  max-width: 800px;
  margin: 0 auto;
}

.smrj-contact-subtitle {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #f8b400;
}

.smrj-contact-title {
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: bold;
  color: #000;
}

.smrj-contact-text {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

/* Responsive */
@media (max-width: 600px) {
  .smrj-contact-subtitle {
    font-size: 14px;
  }
  .smrj-contact-title {
    font-size: 18px;
  }
  .smrj-contact-text {
    font-size: 13px;
  }
}

/* ===============================
   TimeRex Section + Reset
================================ */
.online-img {
  width: 50%;
}

/* ====================================
   TRL Section（カード & 流れ）
==================================== */
.trl-outer {
  background: url(../img/tetote/gray-back.jpg) no-repeat center / cover;
}

.trl-section {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 60px;
}

.trl-title {
  color: #ff6b00;
  border-bottom: 3px solid #ff6b00;
  display: inline-block;
  padding-bottom: 5px;
  margin: 30px 0 40px;
  text-align: center;
}

/* カード共通スタイル */
.trl-card {
  background: #fff !important;
  border: 1px solid #e0e0e0;
  border-radius: 12px !important;
  padding: 30px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.trl-subtitle {
  color: #333;
  border-left: 5px solid #ff6b00;
  padding-left: 10px;
  margin-bottom: 15px !important;
}

/* ご利用の流れ（リスト） */
.trl-flow-list {
  list-style: none;
  padding-left: 0;
}
.trl-flow-list li {
  padding: 5px 0;
  counter-increment: list-item;
}
.trl-flow-list li::before {
  content: counter(list-item) ". ";
  color: #ff6b00;
  font-weight: bold;
  margin-right: 5px;
}

/* 注意事項リスト */
.trl-note-list,
.trl-features-list {
  padding-left: 0;
}

.trl-note-list li {
  padding: 5px 0 5px 20px;
  position: relative;
}
.trl-note-list li::before {
  content: "•";
  color: #ff9800;
  font-size: 1.2em;
  position: absolute;
  left: 0;
  top: 5px;
}

/* 特徴アイコン */
.trl-feature-item span:last-child {
  line-height: 1.5;
}
.trl-feature-icon svg {
  color: #ff6b00;
  stroke: currentColor;
}

/* TimeRex カレンダー埋め込み */
#timerex_calendar {
  border-radius: 12px;
  overflow: hidden;
}
/* ===============================
  Contact Phone
================================ */
.contact-phone {
  text-align: center;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 20px 10px;
}

@media (max-width: 480px) {
  .contact-phone {
    padding: 15px 5px;
  }
  .trl-section {
    margin-right: 15px;
    margin-left: 15px;
  }
}

/* ===============================
  無料トライアル Demo Section
================================ */
.demo-section {
  background: url(../img/tetote/back2.png) no-repeat center / cover;
  padding: 80px 20px;
}

.demo-container {
  max-width: 980px;
  margin: 0 auto;
}

.demo-heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 700;
  text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.9),
    -2px -2px 8px rgba(255, 255, 255, 0.9);
}

.demo-intro {
  text-align: center;
  font-size: 1.1rem;
  max-width: 720px;
  margin: 0 auto 50px;
  line-height: 1.8;
  text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.9),
    -2px -2px 8px rgba(255, 255, 255, 0.9);
}

.demo-cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.demo-card {
  background: #fff;
  padding: 30px 28px;
  border-radius: 20px;
  border: 2px solid #ffe2c4;
  box-shadow: 0 8px 22px rgba(230, 140, 58, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.card-header h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #d66700;
}

.demo-card ul {
  margin: 0;
  padding-left: 20px;
  color: #5c4b3a;
  line-height: 1.9;
}

.demo-card ul li {
  margin-bottom: 10px;
  position: relative;
}

/* オレンジ丸の装飾 */
.demo-card ul li::before {
  content: "";
  width: 9px;
  height: 9px;
  background: #ff9f43;
  border-radius: 50%;
  position: absolute;
  left: -18px;
  top: 11px;
}

/* Responsive */
@media (max-width: 600px) {
  .demo-section {
    padding: 60px 16px;
  }
  .demo-heading {
    font-size: 1.7rem;
  }
  .demo-card {
    padding: 24px;
  }
  .card-header h3 {
    font-size: 1.2rem;
  }
}
/* ==============================
   LINE Button
============================== */
.button-line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  margin: 30px auto 0;
  padding: 0.9em 2em;
  border: 2px solid #fff;
  border-radius: 5px;
  box-shadow: 0 0 0 3px #00b900;
  background-color: #00b900;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
}

/* ===============================
   Animation（ふわふわ）
================================ */
.fuwafuwa {
  animation: fuwafuwa 3s infinite linear alternate;
}

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-5deg);
  }
  50% {
    transform: translate(0, -5px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(5deg);
  }
}
/* 動くアニメーション */
.vertical {
  animation: vertical_7592 2.44s ease infinite;
  transform-origin: 50% 50%;
}
@keyframes vertical_7592 {
  0% {
    transform: translate(0, -3px);
  }
  3.27869% {
    transform: translate(0, 3px);
  }
  6.55738% {
    transform: translate(0, -3px);
  }
  9.83606% {
    transform: translate(0, 3px);
  }
  13.11475% {
    transform: translate(0, -3px);
  }
  16.39344% {
    transform: translate(0, 3px);
  }
  18.03279% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* ===============================
   FAQ Section
================================ */

/* ラッパー */
.faq-container-wrapper {
  width: 100%;
  margin: 40px auto 0;
  padding: 20px 40px 60px;
  text-align: center;
  background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
}

/* アコーディオン本体 */
.faq-accordion-container {
  width: 1080px;
  max-width: 90%;
  margin: 0 auto 50px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  border: 5px dashed #ff9158;
  box-shadow: 0 12px 12px rgba(40, 47, 60, 0.3);
}

/* 各質問ボックス */
.faq-item-box {
  border-bottom: 1px solid #eee;
}
.faq-item-box:last-child {
  border-bottom: none;
}

/* 質問ボタン */
.faq-question-btn {
  width: 100%;
  padding: 18px 20px;
  border: none;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.faq-question-btn:hover {
  background-color: #fff3e0;
}

/* アクティブ時 */
.faq-question-btn.active {
  background-color: #ff9800;
  color: #fff;
  font-weight: 700;
}
.faq-question-btn.active .faq-icon-q,
.faq-question-btn.active .faq-text-q {
  color: #fff;
}

/* アイコン（Qマーク） */
.faq-icon-q {
  margin-right: 10px;
  font-size: 2rem;
  color: #ff6b00;
}

/* 質問テキスト */
.faq-text-q {
  flex-grow: 1;
}

/* バッジ */
.badge {
  display: inline-block;
  padding: 4px 10px;
  margin-left: 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}

.standard-badge {
  background-color: #ffedc2;
  color: var(--color-secondary);
}
.basic-badge {
  background-color: #c7ebff;
  color: var(--color-primary);
}

/* トグルアイコン (+/-) */
.faq-toggle-icon {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.3s ease;
}
.faq-question-btn.active .faq-toggle-icon {
  transform: rotate(45deg);
  color: #fff;
}

/* 回答エリア */
.faq-answer-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  background-color: #f9f9f9;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-answer-content.open {
  max-height: 300px;
  padding: 15px 20px 25px;
}

.faq-answer-content p {
  margin: 0;
  color: #555;
  line-height: 1.6;
  text-align: left;
}

/* ===============================
   Responsive
================================ */
@media (max-width: 600px) {
  .faq-container-wrapper {
    padding: 10px;
  }

  .faq-accordion-container {
    width: 100%;
  }

  .faq-main-title {
    font-size: 1.5rem;
  }

  .faq-question-btn {
    font-size: 0.95rem;
    padding: 15px;
  }

  .faq-container-wrapper {
    margin: 0;
  }
}
/* ===============================
   導入施設　single-voice.php
================================ */

.case-study-detail {
  padding-bottom: 80px;
}

/* Title */
.case-study-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Facility Type Badge */
.facility-type {
  color: #fff;
  text-align: center;
  border-radius: 5px;
  width: 130px;
  height: 30px;
  background: orange;
  padding: 3px;
  margin: 10px 0 15px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* ========== Layout ========== */

.case-study-flex-container {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.case-study-main {
  flex: 1;
}

.case-study-sidebar {
  width: 340px;
  flex-shrink: 0;
}

/* ========== Thumbnail ========== */

.case-study-thumbnail img {
  width: 100%;
  height: auto;
  border: 5px solid #ffecb3;
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ========== Location ========== */

.facility-location {
  color: #777;
  margin-bottom: 20px;
  font-size: 15px;
}

/* ========== Sections ========== */

.problem-section,
.solution-section,
.parent-feedback-section {
  background: #fff;
  border: 1px solid #eee;
  padding: 25px 30px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.problem-title,
.solution-title,
.parent-feedback-title {
  font-size: 22px;
  font-weight: 700;
  border-left: 4px solid #ff8a00;
  padding-left: 12px;
  margin-bottom: 15px;
}

/* 見出し色変更 */
.solution-title {
  border-color: #2fa8ff;
}

.parent-feedback-title {
  border-color: #6cbf5a;
}

/* ========== Sidebar ========== */

.facility-info-box {
  background: #fff;
  border: 1px solid #eee;
  padding: 25px;
  border-radius: 14px;
  margin-bottom: 30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.facility-name-large {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.5;
}

.facility-url {
  color: #2979ff;
  font-size: 14px;
  text-decoration: underline;
  word-break: break-all;
}

.info-list {
  margin-top: 20px;
}

.info-list dt {
  font-weight: 600;
  float: left;
  width: 90px;
  color: #555;
}

.info-list dd {
  margin-left: 90px;
  margin-bottom: 12px;
}

.result-tags {
  color: #666;
  font-size: 14px;
}

/* ========== CTA ========== */

.cta-area {
  background: #fff7e6;
  padding: 25px;
  border-radius: 14px;
  text-align: center;
  border: 1px solid #ffe0b3;
}

.primary-cta {
  background: #ff8a00;
  color: #fff;
}

.primary-cta:hover {
  background: #ff7600;
}

.secondary-cta {
  background: #fff;
  border: 2px solid #333;
  color: #333;
}

.secondary-cta:hover {
  background: #f3f3f3;
}

.download-icon,
.mail-icon {
  margin-left: 6px;
}

/* ========== Return Button ========== */

.more_btn {
  margin-top: 40px;
  text-align: center;
}

.more_btn .yellow_back {
  background: #ffb300;
  padding: 12px 30px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}

.more_btn .yellow_back:hover {
  background: #ff9c00;
}

/* =========================================
   Responsive
========================================= */

@media (max-width: 960px) {
  .case-study-flex-container {
    flex-direction: column;
  }

  .case-study-sidebar {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .case-study-title {
    font-size: 26px;
  }

  .problem-section,
  .solution-section,
  .parent-feedback-section {
    padding: 20px;
  }
}

/* =========================================
   Case Study Archive (一覧ページ)
========================================= */

.case-archive-title {
  text-align: center;
  margin-bottom: 50px;
}

.case-archive-title span {
  font-size: 16px;
  color: #777;
}

.case-archive-title small {
  font-size: 14px;
  color: #555;
}

.case-archive-title b {
  font-size: 28px;
  margin-top: 5px;
  display: inline-block;
}

/* Grid */

.case-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}

/* Card */

.case-list-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  transition: 0.25s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.case-list-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.case-list-item a {
  display: block;
  color: inherit;
}

/* Thumbnail */

.case-item-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.case-item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge */

.case-item-badge {
  color: #fff;
  text-align: center;
  border-radius: 5px;
  width: 130px;
  height: 30px;
  background: orange;
  padding: 3px;
  margin: 10px 0 15px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

/* Text */

.case-item-word {
  font-size: 18px;
  font-weight: 700;
  margin: 5px 20px;
  line-height: 1.4;
}

.case-item-place {
  margin: 5px 20px 0;
  font-size: 14px;
  color: #777;
}

.case-item-title {
  font-size: 15px;
  font-weight: 600;
  margin: 12px 20px 20px;
  line-height: 1.5;
}

/* Responsive */

@media (max-width: 1100px) {
  .case-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .case-archive-grid {
    grid-template-columns: 1fr;
  }

  .case-item-word {
    font-size: 16px;
  }
}

/* ==========================================================
// 境界線デザイン
// ========================================================== */

/* --- 汎用的なラッパーとボトムシェイプ（使用しない場合は削除可能） --- */
.shape-wrapper {
  position: relative;
  width: 100%;
  background: #fff; /* 必要に応じて背景色変更 */
  overflow: hidden;
}

.shape-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px; /* 波の背の高さ、自由に変更可 */
  /* 注意: ::before擬似要素と高さが競合する可能性があるため、併用時は注意 */
}

/* --- シェイプディバイダー クラス 1: 波形（高さ 369px） --- */
.shapedividers_com-1958 {
  overflow: hidden;
  position: relative;
}
.shapedividers_com-1958::before {
  content: "";
  font-family: "shape divider from ShapeDividers.com";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
  background-size: 100% 369px; /* 高さ: 369px */
  background-position: 50% 100%; /* 下部に配置 */
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23ffebd8"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23ffebd8"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23ffebd8"/></svg>');
}

/* --- シェイプディバイダー クラス 2: 波形（高さ 188px, SVGは1958と同じ） --- */
.shapedividers_com-4260 {
  overflow: hidden;
  position: relative;
}

.shapedividers_com-4260::before {
  content: "";
  font-family: "shape divider from ShapeDividers.com";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
  background-size: 100% 188px; /* 高さ: 188px */
  background-position: 50% 100%; /* 下部に配置 */
  /* SVGコードは shapedividers_com-1958 と同じ。同じ波形を別の高さで使う設定。 */
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23ffebd8"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23ffebd8"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23ffebd8"/></svg>');
}

/* --- シェイプディバイダー クラス 3: ドット/ギザギザ（高さ 188px） --- */
.shapedividers_com-9954 {
  overflow: hidden;
  position: relative;
}

.shapedividers_com-9954::before {
  content: "";
  font-family: "shape divider from ShapeDividers.com";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
  background-size: 100% 188px; /* 高さ: 188px */
  background-position: 50% 0%; /* 上部に配置 (0%) */
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 7" preserveAspectRatio="none"><path d="M0 0a1 1 0 005 0 1 1 0 003 0 1 1 0 004 0 1 1 0 003 0 1 1 0 002 0 1 1 0 005 0 1 1 0 007 0 1 1 0 005 0 1 1 0 0010 0 1 1 0 005 0 1 1 0 008 0 1 1 0 005 0 1 1 0 006 0 1 1 0 005 0 1 1 0 0011 0 1 1 0 005 0 1 1 0 008 0 1 1 0 006 0 1 1 0 008 0 1 1 0 0010 0 1 1 0 007 0z" fill="%23ffffff"/><path d="M0 0a1 1 0 007 0 1 1 0 0010 0 1 1 0 008 0 1 1 0 0011 0 1 1 0 0013 0 1 1 0 0010 0 1 1 0 0012 0 1 1 0 0013 0 1 1 0 0011 0 1 1 0 009 0 1 1 0 0012 0 1 1 0 0012 0z" fill="%23ffffff" opacity=".66"/></svg>');
}

/* --- シェイプディバイダー クラス 4: 三角形（高さ 188px） --- */
.shapedividers_com-1742 {
  overflow: hidden;
  position: relative;
}

.shapedividers_com-1742::before {
  content: "";
  font-family: "shape divider from ShapeDividers.com";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
  background-size: 100% 188px; /* 高さ: 188px */
  background-position: 50% 0%; /* 上部に配置 (0%) */
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 773.74 154.98"><g fill="%23fff7e6"><path d="M0 0h773.74L386.87 77.5Z"/><path d="m0 0 386.87 154.98L773.74 0Z" opacity=".66"/></g></svg>');
}

/* ==========================================================
// 2. レスポンシブ対応 (画面幅 2100px 以上)
// ========================================================== */

@media (min-width: 2100px) {
  /* 波形（369px）のレスポンシブ設定 */
  .shapedividers_com-1958::before {
    /* 画面幅に応じて高さが増加 (369px + 2vw) */
    background-size: 100% calc(2vw + 369px);
  }

  /* 波形（188px）のレスポンシブ設定 */
  .shapedividers_com-4260::before {
    /* 画面幅に応じて高さが増加 (188px + 2vw) */
    background-size: 100% calc(2vw + 188px);
  }

  /* ドット/ギザギザのレスポンシブ設定 */
  .shapedividers_com-9954::before {
    /* 画面幅に応じて高さが増加 (188px + 2vw) */
    background-size: 100% calc(2vw + 188px);
  }

  /* 三角形のレスポンシブ設定 */
  .shapedividers_com-1742::before {
    /* 画面幅に応じて高さが増加 (188px + 2vw) */
    background-size: 100% calc(2vw + 188px);
  }
}
/* ==========================================================
// 3. レスポンシブ対応 (画面幅 768px 以下) 
//    - モバイルでの高さを調整
// ========================================================== */

@media (max-width: 768px) {
  /* --- 波形（369px）のレスポンシブ設定 --- */
  .shapedividers_com-1958::before {
    /* モバイルでは高さを大幅に縮小 (例: 100px) */
    background-size: 100% 100px;
  }

  /* --- 波形（188px）のレスポンシブ設定 --- */
  .shapedividers_com-4260::before {
    /* モバイルでは高さを縮小 (例: 80px) */
    background-size: 100% 80px;
  }

  /* --- ドット/ギザギザのレスポンシブ設定 --- */
  .shapedividers_com-9954::before {
    /* モバイルでは高さを縮小 (例: 80px) */
    background-size: 100% 80px;
  }

  /* --- 三角形のレスポンシブ設定 --- */
  .shapedividers_com-1742::before {
    /* モバイルでは高さを縮小 (例: 80px) */
    background-size: 100% 80px;
  }
}