@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600;700;900&family=Jost:wght@400;500;600;700&family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');

html,
body {
  overflow-x: hidden;
}

/* ============================================
   HEADER
   ============================================ */

.site-header {
  width: 100%;
  background: #ffffff;
  padding: 16px 0 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.no-header-shadow .site-header {
  box-shadow: none;
}

.header-inner {
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.openbtn, .sp-menu {
  display: none;
}

.header-logo img {
  width: 200px;
  height: auto;
  display: block;
}

/* Nav */

.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 40px;
}

.nav-item {
  position: relative;
  width: 103px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: transform 0.25s ease;
  z-index: 1;
}

.nav-item:hover {
  transform: translateY(-3px);
}

.nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #FFF9EA;
  border-radius: 50%;
  width: 103px;
  height: 89px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.nav-item:hover::before {
  background: #fff1cf;
  box-shadow: 0 8px 18px rgba(246, 154, 19, 0.18);
}

.nav-icon {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}

.nav-item:hover .nav-icon {
  transform: scale(1.08);
}

.nav-label {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 900;
  color: #08559c;
  white-space: nowrap;
  margin-bottom: 5px;
  transition: color 0.25s ease;
}

.nav-item:hover .nav-label {
  color: #f69a13;
}

/* Contact area */

.header-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

.contact-btn { 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f69a13;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 22px;
  padding: 6px 30px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  margin-bottom: 6px;
  text-decoration: none;
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.phone-text {
  width: fit-content;
  margin-left: -3px;
}

.phone-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.phone-number {
  font-size: 14px;
  font-weight: 700;
  color: #000;
}

.phone-link {
  text-decoration: none;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.phone-link:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.phone-block svg path,
.phone-number {
  transition: 0.25s ease;
}

.phone-link:hover svg path {
  fill: #f69a13;
}

.phone-link:hover .phone-number {
  color: #f69a13;
}

.phone-hours {
  display: block;
  font-family: 'Zen Kaku Gothic Antique', -apple-system, Roboto, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  text-align: right;
}

.contact-btn:hover {
  background: #ffb338;
  transform: translateY(-3px);
  box-shadow: 0 8px 8px rgba(246,154,19,0.22);
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .main-nav, .header-contact {
    display: none !important;
  }

  body:has(.sp-menu.is-open) .page-top,
  body:has(.sp-menu.is-open) #page-top {
    display: none !important;
  }

  .site-header { padding: 10px 0; }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
  }

  .header-logo { width: 120px; flex-shrink: 0; }
  .header-logo img { width: 100%; height: auto; }




  .openbtn {
    display: block;
    position: relative;
    z-index: 101;
    background: #EC6015;
    width: 48px;
    height: 48px;
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
  }
  

  .openbtn-area {
    position: relative;
    width: 50px;
    height: 50px;
    transition: transform .6s;
  }

  .openbtn span {
    position: absolute;
    left: 13px;
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all .4s;
  }

  .openbtn span:nth-of-type(1) { top: 16px; }
  .openbtn span:nth-of-type(2) { top: 24px; }
  .openbtn span:nth-of-type(3) { top: 32px; }

  /* 回転してバツになる（ヘッダーボタン） */
  .openbtn.active .openbtn-area { transform: rotate(360deg); }
  .openbtn.active span:nth-of-type(1) { top: 24px; transform: rotate(-45deg); }
  .openbtn.active span:nth-of-type(2) { opacity: 0; }
  .openbtn.active span:nth-of-type(3) { top: 24px; transform: rotate(45deg); }

  /* 2枚目画像風メニュー画面 */
  .sp-menu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff9ea;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    padding: 20px;
    overflow-y: auto;
  }

  .sp-menu.is-open {
    transform: translateX(0);
  }

  .sp-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
  }

  .sp-menu-logo img {
    width: 150px;
  }

  /* メニュー内の閉じる（バツ）ボタン */
  .sp-menu-close {
    display: flex;
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001; 

  }

  .sp-menu-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 2px;
    background: #08559c; /* 2枚目画像に合わせた青色 */
  }

  .sp-menu-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
  .sp-menu-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

  /* メニュー内リスト（2枚目風） */
  .sp-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sp-menu-link {
    width: 100%;
    max-width: 400px;
    padding: 20px 0;
    text-align: center;
    color: #08559c;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px dashed rgba(75,75,75,0.3); /* 点線 */
  }
}

/*========= ページトップのためのCSS ===============*/

/*リンクを右下に固定*/

#page-top {
	position: fixed;
	right: 10px;
	bottom:30px;
	z-index: 9999;
	transform: translateY(150px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(150px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(150px);
  }
}

/*画像の切り替えと動き*/

#page-top a {
    position: relative;
	display: block;
	width: 130px;
	height: 130px;
	color: #333;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
    /*背景画像の指定*/
	background: url("/images/clover.png") no-repeat center;
	background-size: contain;
}

#page-top.floatAnime a{
	width: 130px;
	height: 130px;
    /*背景画像の指定*/
	background: url("/images/sun.svg") no-repeat center;
	background-size: contain;
    /*アニメーションの指定*/
	animation: floatAnime 2s linear infinite;
	opacity: 0;
}

@keyframes floatAnime {
  0% { transform: translateX(0); opacity: 0; }
  25% { transform: translateX(-6px);opacity: 1; }
  50% { transform: translateX(0) }
  100% { transform: translateX(6px);opacity: 1; }
}

.page-top-text {
  position: absolute;
  right: 40px;
  bottom: 0px;
  font-size: 20px;
  color: #f69a13;
  line-height: 1;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-align: center;
  font-family: "Jost", sans-serif;
}

@media screen and (max-width: 768px) {

  #page-top {
    right: 0;
    bottom: 10px;
    display: none;
  
  }

  #page-top a {
    width: 90px;
    height: 90px;
  }

  #page-top.floatAnime a {
    width: 90px;
    height: 90px;
  }

  .page-top-text {
    right: 28px;
    bottom: -2px;

    font-size: 14px;
  }

}

/* ============================================
   FOOTER / CONTACT
   ============================================ */

html { scroll-behavior: smooth; }

#contact.site-footer {
    margin-top: 200px; 
}

.site-footer {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 95px 0 0;
  background:  #fff;
  min-height: 820px;
}

.footer-inner {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 40px 0 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 45px;
}

/* Logo */

.footer-logo-contact {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  transform: translateY(-60px);  
}

.footer-logo {
  width: 260px;
  height: auto;
}

/* Map */

.footer-map {
  width: 422px;
  height: 354px;
  border-radius: 30px;
  display: block;
  border: none;
}

/* contact button  */

.footer-contact-btn {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 11px 45px;
  margin-top: 8px;
  border-radius: 45px;
  font-size: 18px;
  font-weight: 600;
  background: #f69a13;  
  color:  #fff;         
  text-decoration: none;
  box-shadow: 2px 6px 4px rgba(0, 0, 0, 0.15);
}

.footer-contact-btn:hover {
  background: #08559c;
  color: #fff;
  box-shadow: 2px 8px 10px rgba(8, 85, 156, 0.25);
}

.contact-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff; 
  border-radius: 50%;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.contact-btn-arrow img {
  display: block;
  width: 16px;
  height: 16px;
}

.contact-btn-arrow .arrow-orange {
  display: block;
}

.contact-btn-arrow .arrow-blue {
  display: none;
}

.footer-contact-btn:hover .contact-btn-arrow .arrow-orange {
  display: none;
}

.footer-contact-btn:hover .contact-btn-arrow .arrow-blue {
  display: block;
}

.footer-contact-btn:hover .contact-btn-arrow {
  transform: translateX(5px); 
}

/* Info grid */

.footer-info-col {
  flex: 0 0 auto;
  width: 425px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 4px;
}

.footer-info-area {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.footer-info-row,
.footer-info-row a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.footer-info-row a:hover {
  opacity: 0.85;
}

.info-label {
  width: 72px;
  min-width: 72px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #08559c;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 0 8px;
  flex-shrink: 0;
}

.footer-info-row:first-child .info-label {
  margin-top: 12px; 
}

.footer-info-row a:hover .info-label {
  background: #f69a13;
}

.info-value {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  display: block;
}

.footer-info-row a:hover .info-value {
  color: #f69a13;
}

/* Footer nav */

.footer-nav {
  padding-top: 20px; 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-nav-link {
  font-family: 'Zen Kaku Gothic Antique', -apple-system, Roboto, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #4b4b4b;
  transition: color 0.2s;
  text-decoration: none;
}

.footer-nav-link:hover {
  color: #f69a13;
}

.footer-nav-sep {
  color: #4b4b4b;
  font-size: 14px;
}

/* Copyright */

.footer-copyright {
  margin-top: 30px;
  margin-bottom: 0;
  text-align: center;
}

/* Green ellipse background decoration */

.footer-wave-bg {
  position: absolute;
  width: min(155vw, 2200px);
  height: min(140vw, 1900px);
  background:  rgba(132, 181, 63, 0.22);
  border-radius: 50%;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

/* --- 波のコンテナ --- */

.wave {
  position: relative; 
  height: 100px;     
  z-index: 1;
  line-height: 0;
  margin-top: 100px;
}

.wave canvas {
  display: block;
  width: 100%;
  height: 100px;
}

/* --- ナビとコピーライトの背景エリア --- */

.nav_box {
  position: relative;
  z-index: 5;
  background-color: #A8CCED;
  width: 100%;
  margin-top: -1px;
  padding-top: 40px; 
  padding-bottom: 150px;
}

/* Decorative footer elements */

.footer-deco-house {
  position: absolute;
  top: 93px;
  left: 23%;
  width: 64px;
  height: auto;
  transform: rotate(-19deg);
  z-index: 1;
  pointer-events: none;
}

.footer-deco-flower {
  position: absolute;
  top: 105px;
  left: 29.5%;
  width: 53px;
  height: auto;
  transform: rotate(-12deg);
  z-index: 1;
  pointer-events: none;
}

.footer-deco-character01 {
  position: absolute;
  top: 55px;
  right: 29%;
  width: 48px;
  height: auto;
  transform: rotate(14deg);
  z-index: 1;
  pointer-events: none;
}

.footer-deco-character02 {
  position: absolute;
  top: 61px;
  right: 26.8%;
  width: 43px;
  height: auto;
  transform: rotate(16deg);
  z-index: 1;
  pointer-events: none;
}

/* ============================================
   RESPONSIVE (Footer)
   ============================================ */

@media (max-width: 768px) {

  #contact.site-footer {
    margin-top: 80px;
  }

  .site-footer {
    padding: 60px 0 0;
    min-height: auto;
  }

  .footer-logo-contact {
    transform: translateY(0);
    margin-bottom: 20px;
  }

  .footer-logo {
    width: 200px;
    padding-top: 10px;
  }

  .footer-inner {
    max-width: 90%;
    flex-direction: column; 
    align-items: center;
    gap: 40px;
    margin: 0 auto;
    padding: 20px 0;
  }

  .footer-map-col {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .footer-map {
    width: 100%;
    max-width: 350px;
    height: 260px;
    border-radius: 20px;
  }

  .footer-info-col {
    width: 100%;
    align-items: center;
    gap: 15px;
  }

  .footer-info-area {
  width: 260px;
  gap: 20px;
  margin: 0 auto;
  }

  .footer-info-row,
  .footer-info-row a {
    width: fit-content;
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 12px;
    align-items: start;
  }

  .info-label {
    padding: 0;
    font-size: 13px;
  }

  .info-value {
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    word-break: keep-all;
    white-space: nowrap;
  }

  .footer-info-row:first-child .info-value {
    white-space: normal;
    width: 180px;
  }

  .footer-info-row:first-child .info-label {
    margin-top: 20px;
  }

  .footer-contact-btn {
    width: 220px;
    height: 50px;
    font-size: 16px;
    gap: 8px;
    margin-top: 40px;
    padding: 0 30px;
  }

  .contact-btn-arrow {
    width: 26px;
    height: 26px;
  }

  .contact-btn-arrow img {
    width: 13px;
    height: 13px;
  }

  .footer-wave-bg {
    width: 450%;
    height: 150%;
    top: 100px;
    border-radius: 50%;
  }

  .wave canvas {
    margin-top: -80px;
  }

 .footer-nav {
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .footer-nav-sep {
    display: none;
  }

  .footer-nav-link {
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;

  }

  .footer-copyright {
    font-size: 12px;
    position: relative;
    z-index: 2;
    margin-top: 20px;
    width: 100%;
    background: transparent; 
    padding: 20px 0;
  }

  .nav_box {
    padding: 20px 0;
  }

  .footer-deco-house, 
  .footer-deco-flower, 
  .footer-deco-character01, 
  .footer-deco-character02 {
    display: none;
  }
}

/* ============================================
   GLOBAL RESET & BASE
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

/* body {
  font-family: Inter, -apple-system, Roboto, Helvetica, sans-serif;
  color: #4b4b4b;
  background: #fff;
  overflow-x: hidden;
} */

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ============================================
   SHARED SECTION HEADINGS
   ============================================ */

.section-heading-en {
  font-family: Inter, sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: var( --blue);
  line-height: 1.2;
}

.section-heading-ja {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 4px;
}

.section-divider {
  width: 132px;
  height: 2px;
  background: var(--blue);
  margin: 12px 0 24px;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 30px auto 200px auto;
  /* 最小高さを調整 */
  min-height: 800px;
  overflow: visible;
}

/* おうちの画像を囲む枠 */

.hero-image-wrapper {
  position: absolute;
  left: 8%; 
  top: 8%;
  width: 100%; 
  max-width: 1200px;
  height:780px; 
  z-index: 1;
  pointer-events: none;
  background-image: url('/assets/main_img.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 10;
  
  /* ★1番右の数値（padding-left）を 86px から小さくします */
  /* 上: 40px, 右: 0, 下: 60px, 左: 40px */
  padding: 40px 0 60px 40px; 
  
  max-width: 1000px;
}

.hero-blur-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  z-index: -1;
}

.hero-blur-green {
  width: 180px;
  height: 180px;
  background: var(--green-deco);
  top: 60px;
  left: 300px;
}

.hero-blur-peach {
  width: 150px;
  height: 150px;
  background: var(--peach-bg);
  top: 120px;
  left: 220px;
}

.hero-title {
font-size: 48px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 20px; /* サブタイトルとの距離を確保 */
  
  /* ★修正ポイント：浮かせるのをやめて、テキストを左揃えにする */
  position: static; 
  text-align: left;
}

.hero-title-blue {
  color: var(--blue);
}

.hero-subtitle {
  font-size: 23px;
  font-weight: 500;
  color: var(--text-black);
  line-height: 1.5;
  max-width: 451px;
}

/* Recruitment card */

.hero-recruitment-card {
position: absolute;
  left: 14%;
  bottom: 60px;
  z-index: 100; 
  width: 180px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 2.2em;
}

.recruitment-badge {
  font-size: 22px;
  font-weight: 500;
  color: var(--white);
}

.recruitment-title {
  font-size: 34px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  top: 0;
}

.recruitment-more {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}

.recruitment-more:hover {
  color: var(--white);
  background-color: #08559C;
}

/* ナースの画像（こちらは変更なしの想定） */

.hero-nurse-img {
  position: absolute;
  left: 3%;
  bottom: -70px;
  width: 380px;
  height: auto;
  z-index: 2;
  object-fit: contain;
}

/* ============================================
   ABOUT SECTION
   ============================================ */

.about-section {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 607px;
  overflow: hidden;
  background: var(--white);
  padding: 80px 0;
  margin-bottom: 80px;
}

.about-section::after {
  content: '';
  position: absolute;
  left: 0;
  top: 106px;
  width: 100%;
  height: 400px;
  background: #FFF9EA;
  z-index: 0;
}

.about-image-col {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding-left: 20%;
}

.about-staff-img {
  width: 292px;
  height: 453px;
  object-fit: cover;
}

.about-content-col {
  position: relative;
  z-index: 1;
  padding: 0 60px 0 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 6px;
}

.about-body-text {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.6;
  margin-top: 12px;
  letter-spacing: 0.1em;
  text-align: justify;
}

.about-sun-deco {
  position: absolute;
  right: 25%;
  top: -11px;
  width: 211px;
  height: auto;
  z-index: 1;

  /* --- 追加分：アニメーションの設定 --- */
  animation: spin 10s linear infinite; 
  transform-origin: center center; /* 中心を軸に回す */
}

/* ============================================
   FACILITY SECTION
   ============================================ */

.facility-section {
  position: relative;
  width: 100%;
  min-height: 768px;
  overflow: hidden;
  background: var(--white);
  padding: 60px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.facility-clover-right {
  position: absolute;
  right: 40px;
  top: 22px;
  width: 340px;
  height: auto;
  transform: rotate(14.24deg);
  z-index: 0;
  pointer-events: none;
}

.facility-clover-left {
  position: absolute;
  left: 40px;
  bottom: 60px;
  width: 320px;
  height: auto;
  transform: rotate(-165.76deg);
  z-index: 0;
  pointer-events: none;
}

/* ① 全ての画像（基本は小さく、薄くしておく） */

.facility-images .slick-slide {
  transform: scale(0.8) ; 
  transition: all 0.5s ease; /* 動きを滑らかにする */
  z-index: 1;
}

/* ② 真ん中に来た画像（ここを強制的に大きく、濃くする） */

/* クラスを繋げて書くことで優先順位を上げます */

.facility-images .slick-slide.slick-current.slick-active.slick-center {
  transform: scale(1.1) ; /* 左右より大きく */
  opacity: 1 ;            /* 濃く */
  z-index: 2 ;           /* 重なりを一番上に */
}

/* ③ 画像自体のサイズ（ここが 0px だと映りません） */

.facility-img {
  width: 100%;
  height: 307px;
  object-fit: cover;
  display: block;
}

.facility-images {
  width: 100%;
  max-width: 1200px; /* スライダー全体の最大幅 */
  margin: 40px auto;
  overflow: visible; /* 左右のはみ出しを見せるために重要！ */
}

.view-more-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 60px;
  background: var(--orange);
  color: var(--white);
  font-size: 20px;
  font-weight: 600;
  border-radius: 50px;
  padding: 11px 45px;
  box-shadow: var(--shadow-card);
  transition: opacity 0.2s;
}

.view-more-btn:hover {
  opacity: 0.85;
}

/* 矢印の設定 */

.slick-prev, .slick-next {
  position: absolute;
  top: 50%;
  cursor: pointer;
  border-top: 3px solid var(--orange); /* サイトのオレンジ色を使用 */
  border-right: 3px solid var(--orange);
  height: 30px;
  width: 30px;
  z-index: 10;
}

.slick-prev:before, .slick-next:before {
    display: none;
  }

.slick-prev {
  left: -2%;
  transform: translateY(-50%) rotate(-135deg);
}

.slick-next {
  right: -2%;
  transform: translateY(-50%) rotate(45deg);
}

/* ドットナビゲーション */

.slick-dots {
  text-align: center;
  margin-top: 30px;
}

.slick-dots li {
  display: inline-block;
  margin: 0 8px;
}

.slick-dots button {
  font-size: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
}

.slick-dots .slick-active button {
  background: var(--orange); /* 現在地をオレンジに */
}

/* ============================================
   SERVICE SECTION
   ============================================ */

.service-section {
  position: relative;
  width: 100%;
  min-height: 772px;
  background: #FFF9EA;
  padding: 60px 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 200px;
}

.service-deco-left {
  position: absolute;
  left: 140px;
  top: -120px;
  width: 376px;
  height: 320px;
  z-index: 0;
  pointer-events: none;
}

.service-deco-circle-large {
  position: absolute;
  left: 180px;
  top: -100px;
  width: 320px;
  height: 320px;
  object-fit: contain;

  /* 鳥にだけアニメーションを適用 */
  animation: birdHopCorrectDir 5s linear infinite;
}

.service-deco-circle-small {
  position: absolute;
  left: 0;
  top: -10px;
  width: 188px;
  height: 188px;
  object-fit: contain;
  /* 揺れる中心点を「根元（下側）」に設定 */
  transform-origin: bottom center; 

  /* アニメーションを適用 */
  animation: leafYurayura 4s ease-in-out infinite;
}

.service-deco-grass-left {
  position: absolute;
  left: 3px;
  top: -40px;
  width: 350px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.service-deco-grass-right {
  position: absolute;
  right: 10px;
  bottom: -60px;
  width: 300px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.service-cards {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 44px;
  margin-top: 48px;
  justify-content: center;
}

.service-card {
position: relative;
  width: 383px;
  background: var(--white);
  /* 常に3pxの青い枠線を出す */
  border: 3px solid var(--blue); 
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* ホバーした時にカード全体を浮かせて影を強くする */

.service-card:hover {
transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* --- 右下のオレンジ矢印ボタンの設定 --- */

.card-arrow-container {
position: absolute;
  bottom: 0;
  right: 0;
  width: 65px;
  height: 65px;
  
  /* 1. 最初はグレーにする */
  background-color: #acb6de; 
  
  border-radius: 40px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* 2. 最初から見えるようにする */
  opacity: 1; 
  transform: translate(0, 0); /* 位置も固定 */
  
  transition: background-color 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

/* ホバー時にオレンジボタンを定位置に出現させる */

.service-card:hover .card-arrow-container {
/* 3. マウスを乗せたらオレンジ色に変える */
  background-color: var(--blue); 
  
  /* お好みで：ホバー時に少しだけボタンを大きくして強調 */
  transform: scale(1.05);
}

.card-arrow-icon {
color: #fff;
  font-size: 24px;
  font-weight: bold;
  transform: rotate(0deg); /* 真っ直ぐ右向き */
  display: inline-block;
}

.service-card-img {
/* 1. 幅を100%に戻す（親のborderの内側に自動で収まるようにする） */
  width: 100%; 
  height: 269px;
  object-fit: cover;
  display: block;

  /* 2. 画像自体の「左右・上」のボーダーを完全に消す */
  /* これをしないと、画像自身の線が内側に見えてしまいます */
  border: none; 

  /* 3. 画像とテキストの「仕切り線」だけを引く */
  border-bottom: 2px solid var(--blue);

  /* 4. 画像が枠線の「内側」から始まるように設定 */
  box-sizing: border-box;

  /* 5. 上寄りに見えてしまうのを防ぐため、マイナスマージンで微調整（必要に応じて） */
  margin: 0;
}

.service-card-body {
  padding: 30px 24px;
  text-align: center;
}

.service-card-title {
  font-family: var(--font-jp);
  font-size: 28px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.service-card-desc {
  font-size: 15px;
  font-weight: 200;
  color: var(--text-black);
  line-height: 1.6;
}

/* ============================================
   NEWS SECTION
   ============================================ */

.news-section {
position: relative;
  width: 100%;
  min-height: 609px;
  background: var(--white);
  overflow: hidden;
  padding: 80px 0 100px; /* 余白を少し広げるとゆったりします */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 100px auto;
}

/* 飛行機の設定を追加 */

.news-hikoki-img {
position: absolute;
  width: 130px; /* 少し小さくすると遠近感が出て自然になります */
  height: auto;
  z-index: 0; /* 文字(1)の後ろ、雲(0)と同じ高さ */
  pointer-events: none;

  /* 15秒くらいかけて、のんびり飛ばすのがコツです */
  animation: plane-move 15s ease-in-out infinite;
}

.news-deco-img {
position: absolute;
  /* 画像に合わせて不透明度を調整（0.5だと薄すぎる場合は1に） */
  opacity: 0.8; 
  pointer-events: none;
  z-index: 0;
}

/* 右上の雲 */

.news-deco-top-right {
  right: 650px; /* 少しはみ出させると自然です */
  top: 40px;
  width: 300px; /* 少し大きく */
  height: auto;
  animation: cloud-flow 6s ease-in-out infinite;
}

/* 左下の雲 */

.news-deco-bottom-left {
  left: 250px;  /* 左に少し逃がす */
  bottom: 120px;
  width: 400px; /* 大きくして奥行きを出す */
  height: auto;
  animation: cloud-flow 8s ease-in-out infinite;
}

.news-section .section-heading-en,
.news-section .section-heading-ja,
.news-grid {
  position: relative;
  z-index: 1; /* 飛行機(0)より数字が大きいので、こちらが前に来ます */
}

.news-grid {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 50px;
  margin-top: 48px;
  justify-content: center;
  max-width: 1000px;
}

.news-item {
  width: 226px;
  transition: transform 0.3s ease; /* ホバー時の動き用 */
}

.news-item a {
  display: contents; /* リンクタグ自体をレイアウトから「透明」にし、子要素をGridに参加させる */
  text-decoration: none; /* 下線を消す */
  color: inherit; /* 文字色を継承 */
}

/* 訪問済みのタイトルの色を変える */

.news-item a:visited .news-title {
  color: #2042ff !important; /* お好みの色（例：グレー）に変更してください */
}

.news-item:hover {
opacity: 0.7;
  transition: 0.3s;
}

.news-thumb {
width: 100%;
  height: 183px;
  object-fit: cover;
  display: block;
  /* 写真に角丸がない場合はこれでOK、画像3のように少し丸めるなら以下 */
  /* border-radius: 4px; */
}

.news-title {
font-size: 17px; /* 少しサイズダウンして繊細に */
  font-weight: 600;
  color: #555;    /* 優しい黒色に */
  margin-top: 14px;
  line-height: 1.5;
  /* 長いテキストを1行で切る設定 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-date {
display: block;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: #777;
  margin-top: 4px;
}

/* ふわふわ揺れるアニメーションの定義 */

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(var(--base-rotate));
  }
  50% {
    /* 少し上に移動し、少し角度を変える */
    transform: translate(5px, -15px) rotate(calc(var(--base-rotate) + 5deg));
  }
  100% {
    transform: translate(0, 0) rotate(var(--base-rotate));
  }
}

/* 右上のクローバー */

.facility-clover-right {
  --base-rotate: 14.24deg; /* 元々の回転角度をキープ */
  animation: fuwafuwa 4s ease-in-out infinite; /* 4秒かけて無限に繰り返す */
}

/* 左下のクローバー */

.facility-clover-left {
  --base-rotate: -165.76deg; /* 元々の回転角度をキープ */
  animation: fuwafuwa 5s ease-in-out infinite; /* 右と少し時間をずらすと自然 */
}

@keyframes birdHopCorrectDir {
  0%   { transform: translateX(0) translateY(0); } 
  
  /* 1歩目：一気に跳ねて着地 */
  8%   { transform: translateX(-20px) translateY(-25px); } /* 空中 */
  15%  { transform: translateX(-40px) translateY(0); }     /* 着地（ここで一旦止まる） */

  /* 2歩目 */
  23%  { transform: translateX(-60px) translateY(-25px); }
  30%  { transform: translateX(-80px) translateY(0); }

  /* 3歩目 */
  38%  { transform: translateX(-100px) translateY(-25px); }
  45%  { transform: translateX(-120px) translateY(0); }

  /* 少しその場で休憩（タメを作る） */
  60%  { transform: translateX(-120px) translateY(0); }

  /* 前に戻る（少し大きなジャンプで一気に） */
  75%  { transform: translateX(-60px) translateY(-35px); }
  100% { transform: translateX(0) translateY(0); }
}

/* --- ゆらゆらアニメーション（角度を変える） --- */

@keyframes leafYurayura {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    /* 右に5度ほど傾ける */
    transform: rotate(5deg);
  }
}

/* --- 1. まず動きを定義（これを一番上に書く） --- */

@keyframes cloud-flow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes plane-move {
  0% {
    /* スタート：右下の画面外 */
    right: -200px;
    top: 70%;
    transform: rotate(-15deg); /* 上向き */
  }
  30% {
    /* ★上昇：topを20%から5%に。これで文字より高い位置を通ります */
    top: 5%; 
    transform: rotate(-5deg);
  }
  50% {
    /* 頂点：高い位置を維持 */
    top: 8%; 
    transform: rotate(0deg); 
  }
  70% {
    /* ★降下：左へ回転（マイナス方向） */
    top: 40%;
    transform: rotate(-20deg); /* 8degから-20degへ変更 */
  }
  100% {
    /* ゴール：左の画面外へ */
    right: 110%;
    top: 60%;
    transform: rotate(-35deg); /* 12degから-35degへ変更 */
  }
}

/* 回転の動きを定義 */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 768px) {
  /* --- 全体調整：横揺れ・巨大化防止 --- */
  html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%; /* iPhoneでの文字巨大化防止 */
  }

  /* 共通：見出しサイズを縮小 */
  .section-heading-en {
    font-size: 28px; /* 巨大化防止 */
  }
  .section-heading-ja {
    font-size: 14px;
  }
  .section-divider {
    width: 80px; /* 縮小 */
    margin: 10px 0 20px;
  }


  /* --- HERO SECTION --- */
  .hero-section {
    width: 100%;
    max-width: 100vw;
    margin: 40px 0 40px 0; /* 余白を詰める */
    min-height: 400px; /* 全体が収まる最小限の高さ */
    position: relative;
    overflow: hidden; /* ボケ素材のはみ出しをカット */
  }

  /* おうち画像：PC版の家型を維持し、右寄せ＆大幅縮小 */
  .hero-image-wrapper {
    position: absolute;
    top: 90px; /* テキストの下 */
    right: 15px; /* 完成イメージのように少し右に逃がす */
    left: auto;
    width: 80%; /* 画面内に収まる幅 */
    height: 280px; /* スマホ用の高さ */
    background-size: contain; /* 家型を崩さない */
    background-position: right center;
    z-index: 1;
  }

  /* テキスト：PC版と同じく左寄せ・浮かせて配置 */
  .hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px; /* 内側に収める */
    box-sizing: border-box;
    z-index: 10;
  }

  .hero-title {
    font-size: 22px; /* 375pxで綺麗に収まるサイズ */
    line-height: 1.4;
    margin-bottom: 8px;
    white-space: normal; /* 折り返し許可 */
  }

  .hero-subtitle {
    font-size: 14px;
    max-width: 250px; /* 広がりすぎ防止 */
  }

  /* ★ふわっとした画像（ボケ）：大幅縮小＆位置調整 ★ */
  .hero-blur-green {
    width: 80px;
    height: 80px;
    top: 10px;
    left: 40%;
    filter: blur(15px);
  }

  .hero-blur-peach {
    width: 60px;
    height: 60px;
    top: 60px;
    left: 100px; /* 画面外に逃がして overflow:hidden でカット */
    filter: blur(20px);
  }

/* 採用バッジ：文字のみをナース画像の上に配置（14px以上を維持） */
  .hero-recruitment-card {
    left: 35px;            /* ナース画像の位置に合わせて調整 */
    bottom: 90px;       /* 14pxだと枠を食うので、少し上に引き上げ */
    width: 180px;        /* 文字サイズに合わせて幅を少し確保 */
    height: 180px;
    line-height: 1.2em;    /* 文字が大きい分、行間を極限まで詰める */
  }

  .recruitment-badge { 
    font-size: 14px;     /* 最小14pxを維持 */
    font-weight: 500;
    color: var(--white);
  }

  .recruitment-title { 
    font-size: 14px;     /* タイトルは少し大きめに */
    font-weight: 900; 
    white-space: nowrap; /* 折り返しを防ぐ */
  }
  
  .recruitment-more { 
    font-size: 8px;     /* 最小14pxを維持 */
    color: var(--white);
  }

  /* ナース画像：完成イメージの比率で縮小 */
  .hero-nurse-img {
    position: absolute;
    left: 2%; /* バッジよりさらに左 */
    bottom: 20%;
    width: 180px; /* イラスト巨大化防止 */
    height: auto;
    z-index: 15; /* バッジ(20)より後ろ */
  }

  
/* --- ABOUT SECTION --- */
  .about-section {
    display: flex;
    flex-direction: row; /* 横並びを維持 */
    align-items: flex-start;
    padding: 30px 15px 50px; /* 左右パディングを15pxに統一して安定 */
    gap: 15px;
    min-height: auto;
    position: relative;
    overflow: hidden; /* 太陽のはみ出しによる揺れを防止 */
    box-sizing: border-box;
    margin-bottom: 60px;
  }


  .about-section::after {
    content: '';
    position: absolute;
    left: 0;
    top: 45px;
    width: 100%;
    height: 80%;
    z-index: 0;
  }

  /* 左側：スタッフ画像 */
  .about-image-col {
    flex: 0 0 40%; /* 少し幅を広げて見やすく */
    padding-left: 5px;
    margin-top: 50px;
    position: relative;
    z-index: 1;
  }

  .about-staff-img {
    width: 100%;
    height: auto;
  }

  /* 右側：コンテンツ */
  .about-content-col {
    flex: 1;
    padding: 0;
    position: relative;
    z-index: 1;
  }

  /* 見出しサイズ調整 */
  .about-content-col .section-heading-en {
    font-size: 28px;
  }
  .about-content-col .section-heading-ja {
    font-size: 14px;
  }
  .about-content-col .section-divider {
    width: 100px;
    margin: 6px 0 12px 0;
  }

  /* 本文：14pxをベースに読みやすく */
  .about-body-text {
    font-size: 14px; /* 画面幅に合わせて微調整 */
    line-height: 1.6;
    margin: 15px 0; /* 上下余白を詰め、スクロール量を調整 */
    letter-spacing: 0.02em;
    word-break: break-all; 
    text-align: justify; /* 両端揃えにすると完成イメージに近くなります */

  }

  /* 太陽の装飾：画面端で揺れないよう right:0 に固定 */
  .about-sun-deco {
    width: 80px;
    top: 0px;
    right: 0;
    z-index: 1;
  }

  .pc-only-br {
    display: none;
  }

  

/* --- FACILITY SECTION (画像が細くならないVer.) --- */
 .facility-section {
    padding-bottom: 180px !important; /* 下の余白を最小限に */
    min-height: auto !important;     /* PC版の高さをリセット */
  }



  .facility-slider-container {
    position: relative;
    z-index: 5;
    display: block;
    width: 82%;      /* 90% から 82% に変更：これで左右に広い空き地ができます */
    margin: 30px auto;
  }

.facility-img {
  flex: 0 0 80%; 
  width: 100%;
  height: 100%;    /* 1枚あたりの高さを少し出す */
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin: 0 auto;   /* 中央配置 */
}



  /* 左右の画像は少し暗く、または不透明度を下げても良い（お好みで） */
  .facility-img:nth-child(1),
  .facility-img:nth-child(3) {
    opacity: 0.9;
    z-index: 1;
  }

  /* クローバーの配置調整（揺れ防止） */
  .facility-clover-left {
    position: absolute;
    top: 250px;
    left: 10px;
    width: 120px;
    z-index: 1;
  }

  .facility-clover-right {
    position: absolute;
    bottom: 10px;
    right: 0px;
    width: 100px;
    z-index: 1;
  }

 .view-more-btn {
    font-size: 14px;
    padding: 10px 40px;
    margin-top: 40px;
  }

  /* --- スライダーの矢印とナビゲーションの調整 --- */
  
 /* --- 矢印：画像と被らないよう、かつ押しやすく配置 --- */
.slick-prev, .slick-next {
  background: transparent !important;
  width: 20px !important;
  height: 20px !important;
  z-index: 100;
  top: auto !important;    /* 縦中央設定をリセット */
  bottom: -45px !important; /* ドット（-30px）とほぼ同じ高さに */
}

/* --- 矢印の位置：マイナスの値を少し大きくして外側へ --- */
  .slick-prev {
left: 40% !important;
  margin-left: -100px !important; /* ドットの横幅に合わせて調整 */
  }

  .slick-next {
right: 40% !important;
  margin-right: -100px !important; /* ドットの横幅に合わせて調整 */
  }

  /* 3. 矢印の下にある「謎のボタン（ドット）」を消す、または調整 */
  /* 不要な場合は display: none; で完全に消せます */
  .slick-dots, .swiper-pagination {
    bottom: -35px !important; /* 画像の下側に逃がす */
  }

  /* --- ドット全体のサイズと間隔を小さくする --- */

/* 1. ドット一つ一つの「箱」のサイズを小さくする */
.slick-dots li {
  width: 15px !important;  /* デフォルト20pxから15pxへ */
  height: 15px !important;
  margin: 0 3px !important; /* 隣との間隔を詰める */
}

/* 2. ドットの「見た目（●）」の大きさを小さくする */
.slick-dots li button:before {
  font-size: 12px !important; /* デフォルトは12px〜20px程度。ここを小さく！ */
  color: #f39800 !important;
  opacity: 0.5;              /* 非アクティブ時の透明度 */
}

/* 3. 現在表示されているドットの設定 */
.slick-dots li.slick-active button:before {
  opacity: 1;                /* アクティブ時はハッキリ見せる */
  font-size: 18px !important; /* アクティブ時だけ少し大きくしてもOK */
}
  /* 4. スライダーのコンテナ自体のはみ出しをガード */
  .facility-slider-container .slick-list,
  .facility-slider-container .swiper-container {
    overflow: visible !important; /* 隣の画像が見えるようにする */
  }

/* ============================================
     SERVICE SECTION (スマホ版レスポンシブ：さらにコンパクトVer.)
     ============================================ */

  .service-section {
    margin-top: 60px; /* 余白をさらに詰めました */
    padding-bottom: 40px;
  }

  /* 2. 親コンテナ：縦並び、中央寄せ、余白の調整 */
  .service-cards {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center;               
    gap: 40px; /* カード同士の間隔は少し持たせて独立感を出しやすく */
    padding: 0 20px;
    width: 100%;
  }

  /* 3. カード本体：幅をさらに絞って小さく */
  .service-card {
    width: 75% !important; /* 85%から75%へ。さらに「小さく」見えるように */
    max-width: 260px;      /* 280pxから260pxへ制限を強めました */
    min-height: auto;
    border: 1.5px solid var(--blue); /* 線を少し細くして圧迫感を軽減 */
    border-radius: 12px;   /* 小さなカードに合わせて角丸も少し調整 */
  }

  /* 4. 画像：面積を減らして高さをカット */
  .service-card-img {
    height: 130px; /* 160pxから130pxへ。これでかなり小さく感じます */
  }

  /* 5. テキスト部分：余白を最小限に */
  .service-card-body {
    padding: 12px 14px 15px; /* 全体的に余白を削りました */
  }

  .service-card-title {
    font-size: 18px !important; /* 22pxから18pxへ。小さめのカードに合うサイズ */
    margin-bottom: 6px;
  }

  .service-card-desc {
    font-size: 12px; /* 13pxから12pxへ */
    line-height: 1.4;
    text-align: center; /* ご要望通り中央寄せ */
  }

  /* 6. 右下のボタン（矢印）：カードのサイズに合わせて縮小 */
  .card-arrow-container {
    width: 38px;
    height: 38px;
  }

  .card-arrow-icon {
    font-size: 12px;
  }

  /* 装飾の配置（カードが小さくなった分、少し位置を寄せました） */
  .service-deco-grass-left {
    position: absolute;
    left: -5px;
    top: -15px;
    width: 150px; /* 少し小さく */
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .service-deco-grass-right {
    position: absolute;
    right: 5px;
    bottom: -20px;
    width: 120px; /* 少し小さく */
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .service-deco-circle-large {
  position: absolute;
  left: 0px;
  top: -20px;
  width: 200px;
  height: 200px;
  object-fit: contain;

  /* 鳥にだけアニメーションを適用 */
  animation: birdHopCorrectDir 5s linear infinite;
}

.service-deco-circle-small {
  position: absolute;
  left: -150px;
  top: 50px;
  width: 100px;
  height: 100px;
  object-fit: contain;
  /* 揺れる中心点を「根元（下側）」に設定 */
  transform-origin: bottom center; 

  /* アニメーションを適用 */
  animation: leafYurayura 4s ease-in-out infinite;
}

/* ============================================
   NEWS SECTION (スマホ版レスポンシブ)
   ============================================ */

.news-section {
    margin: 80px auto;
    padding: 40px 0;
    min-height: auto !important;
  }

.news-grid {
    display: block !important;
    padding: 0 15px;
  }

.news-item {
    /* Gridでレイアウトをガッチリ固定 */
    display: grid !important;
    grid-template-columns: 90px 1fr; /* 左:画像90px、右:残り全部 */
    grid-template-rows: auto auto;    /* 縦2段 */
    column-gap: 15px;
    align-items: center;              /* 垂直方向の中央揃え */
    
    padding: 15px 0;
    border-bottom: 1px solid #eee !important; /* 下線を横幅いっぱいに引く */
    width: 100% !important;
    box-sizing: border-box;
  }

.news-thumb {
    grid-row: 1 / 3; /* 画像を1段目から2段目までブチ抜きで配置（左側に固定） */
    width: 90px !important;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
  }

  /* テキストエリア：ここが肝です */
  .news-content {
    flex: 1 !important;    /* 残りの横幅をすべて専有 */
    display: block !important; /* 子要素を縦に並べるためblock化 */
    min-width: 0;           /* はみ出し防止 */
  }

.news-title {
    grid-column: 2 / 3; /* 常に右側の列に配置 */
    /* タイトルと日付のセットを中央に寄せるための微調整 */
    align-self: end;    
    
    font-size: 15px !important;
    font-weight: 700;
    color: #4b4b4b;
    margin: 0 0 2px 0 !important; /* 日付との隙間 */
    line-height: 1.6;
    
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
  }

.news-date {
    grid-column: 2 / 3; /* 画像の下に潜り込ませず、右側の列に固定 */
    align-self: start;  
    
    font-size: 12px;
    color: #888;
    margin: 0 !important;
    line-height: 1;
  }

  /* 装飾 */
  .news-hikoki-img {
    width: 60px;
    top: 30%;
  }

  /* 右上の雲 */
.news-deco-top-right {
  right: 50px; /* 少しはみ出させると自然です */
  top: 60px;
  width: 150px; /* 少し大きく */
  height: auto;
  animation: cloud-flow 6s ease-in-out infinite;
}

/* 左下の雲 */
.news-deco-bottom-left {
  left: 20px;  /* 左に少し逃がす */
  bottom: -10px;
  width: 160px; /* 大きくして奥行きを出す */
  height: auto;
  animation: cloud-flow 8s ease-in-out infinite;
}


}

/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
  --orange: #f69a13;
  --blue: #08559c;
  --peach-bg: #ffeed4;
  --peach-nav: #fff9ea;
  --green-deco: rgba(132, 181, 63, 0.22);
  --text-dark: #4b4b4b;
  --text-black: #000;
  --white: #fff;
  --shadow-card: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-hover: 2px 8px 10px rgba(8, 85, 156, 0.25);
  --font-jp: 'Zen Kaku Gothic Antique', -apple-system, Roboto, Helvetica, sans-serif;
}

/* ============================================
   PAGE HERO BANNER
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.page-hero {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.page-hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.page-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: #08559c;
  line-height: 1;
  margin: 0;
}

.page-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: #4b4b4b;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* ============================================
   INTRO SECTION
   ============================================ */

.facility-intro {
  width: 100%;
  padding: 52px 0 61px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
  background: #fff;
}

.facility-intro-title {
  font-family: Inter, sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: #4b4b4b;
  text-align: center;
  width: 100%;
}

.facility-intro-desc {
  font-family: Inter, sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #4b4b4b;
  text-align: center;
  line-height: 1.6;
  max-width: 1100px; 
  width: 100%;
  margin: 0 auto;
}

/* ============================================
   FACILITY ROOMS SECTION
   ============================================ */

.facility-rooms {
  width: 100%;
  background: #fff5f0;
  padding: 80px 0 100px;
}

.facility-rooms-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px 32px;
}

.room-card {
  display: flex;
  flex-direction: column;
}

.room-card-img {
  width: 100%;
  aspect-ratio: 461 / 368;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

.room-card-title {
  font-family: Inter, sans-serif;
  font-size: 27px;
  font-weight: 500;
  color: #4b4b4b;
  text-align: center;
  margin-top: 24px;
}

.room-card-desc {
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #4b4b4b;
  max-width: 500px;
  margin: 16px auto 0;
  line-height: 1.7;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .page-hero {
    height: 240px;
  }

  .page-hero-en {
    font-size: 22px;
  }

  .page-hero-ja {
    font-size: 28px;

  }

  .facility-intro {
    padding: 32px 20px 40px;
    
  }

  .facility-intro-title {
    font-size: 26px;
    margin-bottom: 0;


  }

  .facility-intro-desc {
    font-size: 15px;
  
  }

  .facility-rooms {
    padding: 48px 0 64px;
  }

  .facility-rooms-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 50px;
  }

  .room-card-title {
    font-size: 18px;
    font-weight: 600;
  }

  .room-card-desc {
    font-size: 15px;
    letter-spacing: 0.5px;
    max-width: 280px;
    margin-top:5px0;
  }

}

/* ============================================
   PAGE HERO BANNER
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.page-hero {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.page-hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.news-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: #08559c;
  line-height: 1;
  margin: 0;
}

.page-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: #4b4b4b;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* ============================================
   NEWS LIST SECTION
   ============================================ */

.news-list-section {
  width: 100%;
  background: #fff;
  padding: 80px 0 100px;
}

.news-list-inner {
  max-width: 1176px;
  margin: 0 auto;
  padding: 0 60px;
}

.news-list-item {
  padding: 48px 0;
}

.news-list-item-link {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  color: inherit;
  transition: opacity 0.2s;
  text-decoration: none;
}

.news-list-item-link:hover {
  opacity: 0.4;
  text-decoration: none;
}

.news-list-item-link:hover .news-list-title,
.news-list-item-link:hover .news-list-date {
  text-decoration: none;
}

.news-list-thumb {
  width: 352px;
  height: 236px;
  object-fit: cover;
  border-radius: 15px;
  flex-shrink: 0;
  display: block;
}

.news-list-body {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  gap: 10px;
  align-items: flex-start;

}

.news-category-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 123px;
  height: 42px;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.news-category-tag--notice {
  background: #f69a13;
}

.news-category-tag--blog {
  background: #08559c;
}

.news-list-title {
  font-family: Inter, sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: #4b4b4b;
  line-height: 1.3;
  margin-bottom: 10px;
}

.news-list-title--first {
  margin-left: -20px;
}

.news-list-date {
  font-family: Jost, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000;
}

.news-list-divider {
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    #4b4b4b 0,
    #4b4b4b 5px,
    transparent 5px,
    transparent 10px
  );
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination {
  position: relative;
  width: 100%;
  min-height: 80px;
  margin-top: 40px;
}

/* 数字エリアを完全中央 */

.pagination-numbers {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* 共通 */

.pagination-btn {
  font-size: 24px;
  font-weight: 600;
  color: #9b9b9b;
  text-decoration: none;
  background: none;
  border: none;
  transition: 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* activeだけ青丸 */

.pagination-btn--active {
  width: 59px;
  height: 59px;
  border-radius: 50%;
  background: #08559c;
  color: #fff;
}

.pagination-btn:not(.pagination-btn--active):hover {
  color: #f6a21a;
  transform: translateY(-2px);
}

.pagination-btn--active:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(8,85,156,0.2);
}

/* 次へを右端固定 */

.pagination-next-area {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.pagination-next {
  display: flex;
  align-items: center;
  gap: 8px;

  text-decoration: none;
  color: #08559c;
  font-size: 26px;
  font-weight: 600;
  transition: 0.25s;
}

.pagination-next:hover {
  color: #f6a21a;
  transform: translateX(4px);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .page-hero {
    height: 240px;
  }

  .news-hero-en {
    font-size: 22px;
  }

  .page-hero-ja {
    font-size: 28px;
  }

  .news-list-section {
    padding: 32px 0 48px;
  }

  .news-list-body{
    padding-left: 10px;
  }

  .news-list-inner {
    padding: 0 20px;
  }

  .news-list-item {
    padding: 32px 0;
  }

  .news-list-item-link {
    flex-direction: column;
    gap: 20px;
  }

  .news-list-thumb {
    width: 100%;
    height: 220px;
  }

  .news-list-title {
    font-size: 20px;
  }

  .news-category-tag {
    font-size: 16px;
    width: 100px;
    height: 36px;
  }

  .news-list-date {
    font-size: 16px;
  }

  .pagination{
    padding-top: 40px;
  }

  .pagination-btn {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .pagination-next {
    font-size: 20px;
    gap: 8px;
  }

}

/* ============================================
   PAGE HERO BANNER
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.news-page-hero{
  position: relative;
  width: 100%;
  height: 330px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.news-page-hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.news-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: var(--blue);
  line-height: 1;
  margin: 0;
}

.news-page-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: var(--text-dark);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* ============================================
   ARTICLE DETAIL PAGE
   ============================================ */

.article-section {
  width: 100%;
  background: var(--white);
  padding: 30px 0 120px;
}

.article-inner {
  max-width: 1176px;
  margin: 0 auto;
  padding: 0 60px;
}

.article-back-btn_box{
  padding-left: 110px;
}

.article-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 100px;
  border: 1px solid var(--orange);
  background: var(--white);
  color: var(--orange);
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 30px;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}

.article-back-btn:hover {
  background: var(--orange);
  color: var(--white);
}

.article-content {
  max-width: 825px;
  margin: 32px auto 0;
}

.article-title {
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0 0 16px -20px;
}

.article-divider {
  border: none;
  border-top: 1px solid #C4C4C4;
  margin: 0 0 12px;
}

.article-date {
  display: block;
  font-family: Jost, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-black);
  margin-bottom: 32px;
}

.article-image {
  width: 100%;
  height: 444px;
  object-fit: cover;
  display: block;
  margin-bottom: 40px;
  border-radius: 10px;
}

.article-body {
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-black);
  line-height: 30px;
}

.article-body p {
  margin-bottom: 24px;
  padding: 0 20px;
}

.article-body p:last-child {
  margin-bottom: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .news-page-hero {
    height: 200px;
  }

  .news-hero-en {
    font-size: 22px;
  }

  .page-hero-ja {
    font-size: 28px;
  }

  .article-section {
    padding: 0 0 80px;
  }

  .article-inner {
    padding: 0 20px;
  }

  .article-back-btn_box{
  padding-left: 0;
  }


  .article-title {
    font-size: 20px;
      margin: 0 0 16px -10px;

  }

  .article-date {
    font-size: 18px;
    margin-left: 10px;
  }

  .article-image {
    width: 100%;
    height: 220px;
    border-radius: 10px;
  }

  .article-body {
    font-size: 15px;
    line-height: 24px;
    padding: 0 4px;
  }

}

/* ============================================
   PAGE HERO BANNER
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.blog-page-hero{
  position: relative;
  width: 100%;
  height: 330px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.blog-page-hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.blog-page-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: var(--blue);
  line-height: 1;
  margin: 0;
}

.blog-page-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: var(--text-dark);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* ============================================
   ARTICLE DETAIL PAGE
   ============================================ */

.blog-section {
  width: 100%;
  background: var(--white);
  padding: 30px 0 120px;
}

.blog-inner {
  max-width: 1176px;
  margin: 0 auto;
  padding: 0 60px;
}

.blog-back-btn_box{
  padding-left: 110px;
}

.blog-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 100px;
  border: 1px solid var(--orange);
  background: var(--white);
  color: var(--orange);
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 30px;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}

.blog-back-btn:hover {
  background: var(--orange);
  color: var(--white);
}

.blog-content {
  max-width: 825px;
  margin: 32px auto 0;
}

.blog-article-title {
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.blog-divider {
  border: none;
  border-top: 1px solid #C4C4C4;
  margin: 0 0 12px;
}

.blog-date {
  display: block;
  font-family: Jost, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-black);
  margin-bottom: 32px;
}

.blog-image {
  width: 100%;
  height: 444px;
  object-fit: cover;
  display: block;
  margin-bottom: 40px;
  border-radius: 10px;
}

.blog-body {
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-black);
  line-height: 30px;
}

.blog-body p {
  margin-bottom: 24px;
  padding: 0 4px;
}

.blog-body p:last-child {
  margin-bottom: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .blog-page-hero {
    height: 200px;
  }

  .blog-page-hero-en {
    font-size: 22px;
  }

  .blog-page-hero-ja {
    font-size: 28px;
  }

  .blog-section {
    padding: 0 0 80px;
  }

  .blog-inner {
    padding: 0 20px;
  }

.blog-back-btn_box{
  padding-left: 0;
}


  .blog-article-title {
    font-size: 20px;

  }

  .blog-date {
    font-size: 18px;
    margin-left: 10px;
  }

  .blog-image {
    width: 100%;
    height: 220px;
    border-radius: 10px;
  }

  .blog-body {
    font-size: 15px;
    line-height: 24px;
    padding: 0 15px;
  }

}

/* ========================================
   ROOT
======================================== */

:root {

  /* color */
  --blue: #08559C;
  --orange: #F4A11A;

  --bg-main: #F5F5F5;
  --bg-input: #FDEEEE;
  --bg-soft: #F9F4E7;

  --text-main: #4B4B4B;
  --text-sub: #777;

  --error: #DF5A45;

  --border: #E5E5E5;

  --white: #fff;

  /* shadow */
  --shadow:
    0 6px 18px rgba(0,0,0,0.08);

}

/* ========================================
   BASE
======================================== */

* {

  box-sizing: border-box;
}

body {

  background: var(--white);

  color: var(--text-main);

  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  line-height: 1.8;
}

img {

  display: block;

  max-width: 100%;
}

a {

  color: inherit;

  text-decoration: none;
}

.contact-page main {

  width: 100%;

  max-width: 1000px;

  margin: 0 auto;

  padding:
    80px 20px 140px;
}

/* ========================================
   FV
======================================== */

.contact_fv {

  position: relative;

  width: 100%;

  height: 650px;

  overflow: hidden;
}

.contact_fv_image {

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.contact_fv_content {

  position: absolute;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  text-align: center;
}

.fv_title_en {

  color: var(--blue);

  font-size: 36px;

  font-weight: 500;

  letter-spacing: 0.08em;

  line-height: 1;

  margin-bottom: 0;
}

.fv_title {

  font-size: 45px;

  font-weight: 700;

  color: #333;

  margin-top: 15px;

  line-height: 1.2;
}

/* ========================================
   HEADING
======================================== */

.contact_heading {

  text-align: center;

  margin-bottom: 40px;
}

.contact_heading_title {

  font-size: 36px;

  font-weight: 700;

  color: var(--text-main);

  margin-bottom: 28px;
}

.contact_heading_text {

  font-size: 20px;

  line-height: 2;

  color: var(--text-main);
}

.contact_heading_text a {

  color: var(--blue);

  font-weight: 700;

  text-decoration: none;
}

/* ========================================
   STEP
======================================== */

.step_indicator {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 30px;

  margin-bottom: 70px;
}

.step_indicator_item {

  position: relative;

  width: 120px;
}

.step_head {

  display: flex;

  align-items: center;

  gap: 10px;

  position: relative;

  z-index: 2;
}

.step_indicator_item:not(:last-child)::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 82px;

  transform: translateY(-50%);

  width: 28px;

  height: 1px;

  background: #D8D8D8;
}

.step_number {

  width: 30px;
  height: 30px;

  border-radius: 50%;

  background: #ECECEC;

  color: #AAA;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;

  font-weight: 700;

  flex-shrink: 0;
}

.step_indicator_item.active .step_number {

  background: var(--blue);

  color: #FFF;
}

.step_label {

  font-size: 14px;

  color: #AAA;

  white-space: nowrap;

  line-height: 1;
}

.step_indicator_item.active .step_label {

  color: var(--blue);

  font-weight: 700;
}

/* ========================================
   FORM
======================================== */

.contact_form {

  margin-top: 40px;
}

.form_group {

  position: relative;

  margin-bottom: 56px;
}

/* ========================================
   LABEL
======================================== */

.form_group label {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 18px;
}

.label_required {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 52px;

  height: 28px;

  background: var(--error);

  color: var(--white);

  border-radius: 4px;

  font-size: 13px;

  font-weight: 700;

  flex-shrink: 0;
}

.label_text {

  font-size: 18px;

  font-weight: 700;

  color: #333;

  line-height: 1.4;
}

/* ========================================
   ROW
======================================== */

.form_row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;
}

/* ========================================
   RADIO
======================================== */

.radio_group {

  display: flex;

  align-items: center;

  gap: 40px;

  background: var(--bg-input);

  border-radius: 4px;

  min-height: 84px;

  padding: 0 28px;
}

.radio_group .radio_label {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 0;

  font-size: 15px;

  font-weight: 500;

  cursor: pointer;
}

input[type="radio"] {

  width: 18px;

  height: 18px;

  accent-color: var(--error);

  flex-shrink: 0;
}

/* ========================================
   INPUT
======================================== */

@keyframes contact-input-autofill-start {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {

  width: 100%;

  background: var(--bg-input);

  border: 1px solid #F5F5F5;

  border-radius: 4px;

  min-height: 56px;

  padding: 0 18px;

  font-size: 15px;

  color: var(--text-main);

  transition: 0.3s;

  appearance: none;
}

textarea {

  min-height: 220px;

  padding: 18px;

  resize: vertical;
}

input::placeholder,
textarea::placeholder {

  color: #C2B7B7;

  font-size: 14px;
}

input:focus,
textarea:focus {

  outline: none;

  box-shadow:
    0 0 0 3px rgba(8,85,156,0.12);
}

/* 入力後・自動入力後の背景 */

input[type="text"].has-value,
input[type="email"].has-value,
input[type="tel"].has-value,
textarea.has-value {

  background: #FFF;
}

/* ブラウザ自動入力 */

input[type="text"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input[type="tel"]:-webkit-autofill,
textarea:-webkit-autofill {

  animation-name: contact-input-autofill-start;
  animation-fill-mode: both;

  -webkit-box-shadow: 0 0 0 1000px #FFF inset;
  box-shadow: 0 0 0 1000px #FFF inset;

  -webkit-text-fill-color: var(--text-main);

  border: 1px solid #F5F5F5;
}

/* ========================================
   ERROR
======================================== */

.input_error {

  border:
    1px solid var(--error);

  background:
    #FFF5F5;
}

input[type="text"].input_error,
input[type="email"].input_error,
input[type="tel"].input_error,
textarea.input_error {

  background: #FFF5F5;
}

.error_container {

  display: none;

  margin-top: 8px;

  font-size: 12px;

  color: var(--error);
}

.error_container.is-show {

  display: block;
}

/* ========================================
   UPLOAD
======================================== */

.upload_area {

  background: #FFF;

  border: 1px dashed #CFCFCF;

  padding: 55px 20px;

  text-align: center;

  cursor: pointer;

  transition: 0.3s;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 18px;
}

.upload_area:hover {

  background: #FAFAFA;
}

/* icon */

.upload_icon {

  width: 54px;

  height: 54px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.upload_icon img {

  width: 48px;

  height: auto;

  display: block;
}

/* text */

.upload_text {

  font-size: 16px;

  font-weight: 500;

  color: #444;

  line-height: 1.7;
}

.upload_text_small {

  display: block;

  margin-top: 6px;

  font-size: 14px;

  color: #666;
}

/* upload file list */

#upload_list {

  margin-top: 14px;

  font-size: 14px;

  color: #666;

  line-height: 1.8;
}

/* ========================================
   任意項目の入力エリアをグレーに変更
======================================== */

input.optional_input,
textarea.optional_input {

  background: #F5F5F5;
}

input.optional_input.has-value,
textarea.optional_input.has-value {

  background: #FFF;
}

/* upload */

.upload_optional {

  background: #FFF;
}

/* ========================================
   SERVICE
======================================== */

#box_service_type {

  display: none;
}

/* ========================================
   PRIVACY
======================================== */

.privacy_box {

  background: #FFF9EA;

  border:
    1px solid #E8DFC7;

  border-radius: 4px;

  padding: 20px 40px;

  font-size: 12px;

  line-height: 1.8;

  color: var(--text-sub);

  margin-bottom: 24px;

}

.privacy_box strong {

  font-size: 14px;

  font-weight: 700;

  color: #333;
  display: block;
  margin-bottom: 25px;
}

.privacy_link {

  color: var(--blue);

  text-decoration: underline;
  display: block;
  text-align: right;
}

/* ========================================
   AGREE
======================================== */

.agree_wrap {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  margin-bottom: 40px;
}

#agree {

  transform: scale(1.1);
}

/* ========================================
   BUTTON
======================================== */

.button_group {

  display: flex;

  justify-content: center;

  margin-top: 50px;
}

.btn {

  border: none;

  border-radius: 999px;

  min-width: 180px;

  height: 52px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.3s;
}

.btn_primary {

  background: var(--orange);

  color: var(--white);

  box-shadow: var(--shadow);
}

.btn_primary:hover {

  transform: translateY(-2px);

  opacity: 0.9;
}

.btn_primary.disabled {

  background: #CCCCCC;

  cursor: not-allowed;

  box-shadow: none;
}

.btn_primary.disabled:hover {

  transform: none;

  opacity: 1;
}

/* ========================================
   CONFIRM
======================================== */

#confirm_screen {

  max-width: 760px;

  margin: 0 auto;

    background: #FFF;

  border-radius: 8px;

  padding: 0px 36px 50px;

  box-shadow:
    0 4px 18px rgba(217, 217, 217, 0.45);

}

.confirm_section {

  background: #FFF;

  padding: 40px 36px;

  margin-top: 20px;


}

.confirm_table {

  width: 100%;

  border-collapse: collapse;
}

.confirm_table tr {

  border-bottom: 1px solid #E5E5E5;
}

.confirm_table th {

  width: 32%;

  padding: 24px 0;

  text-align: left;

  vertical-align: top;

  font-size: 14px;

  font-weight: 500;

  color: #555;
}

.confirm_table td {

  padding: 24px 0;

  font-size: 14px;

  color: #333;

  line-height: 1.9;
}

.confirm_notice {

  background: #FFF9EA;

  border: 1px solid #E8DFC7;

  margin-top: 40px;

  padding: 18px 24px;

  text-align: center;

  font-size: 13px;

  line-height: 1.8;

  color: #666;
}

#input_screen .button_group,
#confirm_screen .button_group {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 14px;

  margin-top: 30px;
}

#confirm_btn,
#back_btn,
#submit_btn {

  width: 320px;

  height: 56px;

  border-radius: 999px;

  font-size: 15px;

  font-weight: 700;
}

#confirm_btn,
#submit_btn {

  background: var(--orange);

  color: #FFF;

  border: none;
}

#submit_btn:disabled,
#back_btn:disabled {

  cursor: wait;

  opacity: 0.7;
}

#submit_btn.is-loading {

  pointer-events: none;
}

#submit_btn.is-loading::before {

  content: "";

  width: 16px;

  height: 16px;

  border: 2px solid rgba(255, 255, 255, 0.5);

  border-top-color: #FFF;

  border-radius: 50%;

  animation: contact-submit-spin 0.8s linear infinite;
}

@keyframes contact-submit-spin {

  to {

    transform: rotate(360deg);

  }
}

#confirm_btn.btn_primary.disabled {

  background: #CCCCCC;

  color: var(--white);

  cursor: not-allowed;

  box-shadow: none;
}

#confirm_btn.btn_primary.disabled:hover {

  transform: none;

  opacity: 1;
}

#back_btn {

  border: 1px solid var(--orange);

  background: #FFF;

  color: var(--orange);
}

#back_btn:hover {

  transform: translateY(-2px);

  background: #FFF9EA;

  opacity: 0.95;
}

/* ========================================
   COMPLETE
======================================== */

.complete_screen {


  padding:
    80px
    20px
    120px;
}

.complete_card {

  max-width: 1000px;

  margin: 0 auto;

  background: #FFF;

  border-radius: 6px;

  box-shadow:
    0 0 24px rgba(0, 84, 166, 0.18);

  padding:
    70px
    50px;

  text-align: center;
}

/* icon */

.complete_icon {

 width: 100px;
  height: 100px;

  border-radius: 50%;

  background: var(--orange);

  color: #FFF;

  font-size: 48px;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  margin:
    0 auto
    40px;
}

/* title */

.complete_title {

  font-size: 28px;

  font-weight: 700;

  color: var(--text-main);

  margin-bottom: 30px;
}

.complete_text {

  font-size: 16px;

  line-height: 2;

  color: #666;

  margin-bottom: 10px;
}

/* notice */

.complete_notice {

  max-width: 1100px;

  margin:
    80px auto;

  padding:
    42px
    36px;

  background: #FFF9EA;

  border: 1px solid #DDD4C2;

  text-align: left;
}

.complete_notice p {

  font-size: 14px;

  line-height: 2;

  color: #666;
}

/* button */

.complete_button {

  width: 320px;

  height: 56px;

  border-radius: 999px;

  border: 1px solid var(--orange);

  background: #FFF;

  color: var(--orange);

  font-size: 15px;

  font-weight: 700;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;
}

.complete_button:hover {

  transform: translateY(-2px);

  background: #FFF9EA;

  opacity: 0.95;
}

/* ========================================
   ERROR
======================================== */

.error_screen {

  padding:
    40px 20px 120px;
}

.error_card {

  max-width: 1000px;

  margin: 0 auto;

  background: #FFF;

  border-radius: 8px;

  padding: 56px 56px 48px;

box-shadow:
  0 4px 12px rgba(255, 120, 120, 0.08);
}

/* error box */

.submit_error_box {

  display: flex;

  align-items: center;

  gap: 20px;

  background: #fdeaea;

  border-radius: 8px;

  padding: 10px 24px;

  margin-bottom: 20px;
}

.submit_error_icon {

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: #DF5A45;

  color: #FFF;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  font-weight: 700;

  flex-shrink: 0;
}

.submit_error_title {

  color: #DF5A45;

  font-size: 24px;

  font-weight: 700;

  margin-bottom: 4px;

  line-height: 1.4;
}

.submit_error_text {

  font-size: 15px;

  line-height: 0.8;

  color: #333;
}

/* table */

.error_confirm_table {

  width: 100%;

  border-collapse: collapse;

  margin-bottom: 60px;
}

.error_confirm_table tr {

  border-bottom: 1px solid #E5E5E5;
}

.error_confirm_table th,
.error_confirm_table td {

  padding: 20px 0;

  font-size: 16px;

  line-height: 1.8;
}

.error_confirm_table th {

  width: 220px;

  color: #666;

  text-align: left;

  font-weight: 500;
}

.error_confirm_table td {

  color: #333;

  font-weight: 500;
}

/* ========================================
   PAGE TOP
======================================== */

.page_top {

  position: fixed;

  right: 30px;
  bottom: 30px;

  width: 54px;
  height: 54px;

  border-radius: 50%;

  border:
    1px solid var(--orange);

  background: var(--white);

  color: var(--orange);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: 0.3s;
}

.page_top:hover {

  background: var(--orange);

  color: var(--white);
}

/* ========================================
   RESPONSIVE
======================================== */

@media screen and (max-width: 768px) {

  .contact-page main {
    padding:
      50px 20px 100px;
  }

  .contact_fv {
    height: 240px;
  }

  .fv_title_en {
    font-size: 22px;
    letter-spacing: 0.06em;
  }

  .fv_title {
    font-size: 28px; /* お問い合わせ */
  }

  .contact_title {

    font-size: 32px;
  }

.contact_heading_text {
  font-size: 13px;
}

  .form_row {

    grid-template-columns: 1fr;

    gap: 20px;
  }

  .radio_group {

    flex-direction: column;

    align-items: flex-start;

    gap: 16px;
  }

  .btn {

    width: 100%;
  }

  .step_indicator {

    gap: 24px;
  }

    /* ========================================
     SP - HEADING
  ========================================= */

  .contact_heading {

    margin-bottom: 28px;
  }

  .contact_heading_title {

    font-size: 28px;

    line-height: 1.5;

    margin-bottom: 18px;
  }

  .contact_heading_text {

    font-size: 14px;

    line-height: 2;
  }

  /* ========================================
     SP - STEP
  ========================================= */

  .step_indicator {

    margin-top: 24px;

    margin-bottom: 40px;

    gap: 0;
  }

  .step_indicator_item {

    width: auto;

    min-width: 92px;
  }

  .step_indicator_item:not(:last-child)::after {

    left: 72px;

    width: 20px;
  }

  .step_head {

    gap: 8px;
  }

  .step_number {

    width: 24px;
    height: 24px;

    font-size: 12px;
  }

  .step_label {

    font-size: 12px;
  }

  /* ========================================
     SP - FORM
  ========================================= */

  .form_group {

    margin-bottom: 36px;
  }

  .form_group label {

    gap: 12px;

    margin-bottom: 12px;
  }

  .label_required {

    width: 44px;

    height: 24px;

    font-size: 11px;
  }

  .label_text {

    font-size: 15px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {

    min-height: 50px;

    font-size: 14px;

    padding: 0 14px;
  }

  textarea {

    min-height: 180px;

    padding: 14px;
  }

  /* ========================================
     SP - PRIVACY
  ========================================= */

  .privacy_box {

    padding: 18px 18px;

    font-size: 11px;

    line-height: 1.8;
  }

  .privacy_box strong {

    font-size: 13px;

    margin-bottom: 14px;
  }

  /* ========================================
     SP - BUTTON
  ========================================= */

  #confirm_btn,
  #back_btn,
  #submit_btn,
  .complete_button {

    width: 100%;

    max-width: 320px;

    height: 52px;

    font-size: 14px;
  }

  /* ========================================
     SP - CONFIRM
  ========================================= */

  #confirm_screen {

    padding:
      0
      18px
      40px;
  }

  .confirm_section {

    padding: 24px 0 0;
  }

  .confirm_table th,
  .confirm_table td {

    display: block;

    width: 100%;

    padding: 8px 0;

    font-size: 13px;
  }

  .confirm_table tr {

    display: block;

    padding: 16px 0;

    border-bottom: 1px solid #F0F0F0;
  }

  .confirm_table th {

    color: #777;

    margin-bottom: 4px;
  }

  .confirm_notice {

    margin-top: 28px;

    padding: 16px;

    font-size: 12px;

    line-height: 1.8;
  }

  /* ========================================
     SP - COMPLETE
  ========================================= */

  .complete_screen {

    padding:
      40px
      16px
      80px;
  }

  .complete_card {

    padding:
      40px
      20px;
  }

  .complete_icon {

    width: 72px;
    height: 72px;

    font-size: 34px;

    margin-bottom: 28px;
  }

  .complete_title {

    font-size: 22px;

    margin-bottom: 20px;
  }

  .complete_text {

    font-size: 14px;

    line-height: 2;
  }

  .complete_notice {

    padding:
      20px
      18px;

    margin:
      40px auto;
  }

  .complete_notice p {

    font-size: 12px;
  }

  /* ========================================
     SP - ERROR
  ========================================= */

  .error_screen {

    padding:
      30px
      16px
      80px;
  }

  .error_card {

    padding:
      24px
      18px
      36px;
  }

  .submit_error_box {

    gap: 14px;

    padding:
      14px
      16px;
  }

  .submit_error_icon {

    width: 36px;
    height: 36px;

    font-size: 18px;
  }

  .submit_error_title {

    font-size: 18px;
  }

  .submit_error_text {

    font-size: 13px;

    line-height: 1.6;
  }

  .error_confirm_table th,
  .error_confirm_table td {

    display: block;

    width: 100%;

    padding: 6px 0;

    font-size: 13px;
  }

  .error_confirm_table tr {

    display: block;

    padding: 16px 0;
  }

  .error_confirm_table th {

    margin-bottom: 4px;
  }

  /* ========================================
     SP - PAGE TOP
  ========================================= */

  .page_top {

    right: 16px;
    bottom: 16px;

    width: 46px;
    height: 46px;
  }

}

/* ========================================
   EMAIL SUGGESTIONS
======================================== */

.email_suggestions {

  position: absolute;

  top: 100%;

  left: 0;

  right: 0;

  background: var(--white);

  border: 1px solid var(--border);

  border-top: none;

  border-radius: 0 0 4px 4px;

  max-height: 200px;

  overflow-y: auto;

  z-index: 100;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.suggestion_item {

  padding: 10px 15px;

  font-size: 14px;

  color: var(--text-main);

  cursor: pointer;

  border-bottom: 1px solid var(--border);

  transition: background-color 0.2s;
}

.suggestion_item:hover {

  background-color: var(--bg-main);
}

.suggestion_item:last-child {

  border-bottom: none;
}

/* ============================================
   PAGE HERO BANNER
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.sp-only {
  display: none;
}

/* ── Hero ────────────────────────────────────── */

.recruit-hero-section {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.recruit-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.recruit-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: #08559c;
  line-height: 1;
  margin: 0;
}

.recruit-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: #4b4b4b;
  text-shadow: 0 4px 4px rgba(0,0,0,.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* ── Intro ───────────────────────────────────── */

.recruit-intro-section {
  width: 100%;
  background: #fff;
  padding: 80px 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.recruit-intro-text { 
  max-width: 720px;
 }

.recruit-intro-heading {
  font-size: 38px;
  font-weight: 500;
  color: #4B4B4B;
  margin-bottom: 32px;
  line-height: 1.5;
}

.recruit-intro-heading .recruit-highlight {
  font-weight: 600;
  color: #f69a13;
}

.recruit-intro-body {
  font-size: 22px;
  font-weight: 400;
  color: #4B4B4B;
  line-height: 1.8;
}

.recruit-intro-image-wrap {
  width: 313px;
  height: 313px;
  flex-shrink: 0;
}

.recruit-intro-image-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Jobs ────────────────────────────────────── */

.jobs-section {
  width: 100%;
  background: #fff9ea;
  padding: 78px 40px 100px;  
}

.jobs-section-box {
  max-width: 1000px;
  margin: 0 auto;
}

.jobs-section-heading {
  font-size: 36px;
  font-weight: 500;
  color: #4b4b4b;
  margin-bottom: 5px;
}

.jobs-section-underline {
  width: 180px;
  height: 10px;
  background: #f69a13;
  margin-bottom: 56px;
}

.job-list { 
  display: flex;
  flex-direction: column;
  gap: 50px; 
}

.job-card {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.job-photo {
  width: 340px;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
  flex-shrink: 0;
}

.job-details { flex: 1; }

.job-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.job-accent-bar {
  width: 7px;
  height: 27px;
  background: #f69a13;
  flex-shrink: 0;
}

.job-title {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  color: #4b4b4b;
}

.job-duties {
  font-size: 20px;
  font-weight: 400;
  color: #000;
  line-height: 1.6;
}

.duties-label {
  font-size: 22px;
  display: block;
  margin-bottom: 4px;
}

.jobs-cta { 
  display: flex;
  justify-content: center;
  margin-top: 80px; 
}

/* ── CTA Button ──────────────────────────────── */

.recruit-cta-btn {
  width: 260px;
  height: 58px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-top: 8px;

  border-radius: 999px;

  font-size: 18px;
  font-weight: 600;

  background: #f69a13;
  color: #fff;

  text-decoration: none;

  box-shadow: 2px 6px 4px rgba(0, 0, 0, 0.15);

  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.recruit-cta-btn:hover {
  background: #08559c;
  color: #fff;

  box-shadow: 2px 8px 10px rgba(8, 85, 156, 0.25);

  transform: translateY(-2px);
}

.recruit-cta-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;

  border-radius: 50%;

  width: 29px;
  height: 29px;

  flex-shrink: 0;

  transition: transform 0.3s ease;
}

.recruit-cta-btn-arrow img {
  display: block;

  width: 16px;
  height: 16px;
}

.recruit-cta-btn-arrow .arrow-orange {
  display: block;
}

.recruit-cta-btn-arrow .arrow-blue {
  display: none;
}

.recruit-cta-btn:hover .recruit-cta-btn-arrow .arrow-orange {
  display: none;
}

.recruit-cta-btn:hover .recruit-cta-btn-arrow .arrow-blue {
  display: block;
}

.recruit-cta-btn:hover .recruit-cta-btn-arrow {
  transform: translateX(5px);
}

/* ── Talent ──────────────────────────────────── */

.talent-section {
  width: 100%;
  background: #fff;
  padding: 200px 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.talent-photo {
  width: 600px;
  height: 376px;
  border-radius: 15px;
  object-fit: cover;
  margin-bottom: 80px;
}

.talent-heading {
  font-size: 36px;
  font-weight: 600;
  color: #4b4b4b;
  text-align: center;
  margin-bottom: 20px;
}

.talent-circle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 30px 0;
}

.talent-circle-bottom {
  display: flex;
  justify-content: center;
  gap: 100px;
}

.talent-circle {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.6;
  font-size: 24px;
}

.circle-yellow { background: #fdfd80; }

.circle-blue   { background: #a8dded; }

.circle-pink   { background: #ffd8f2; }

.talent-circle p {
  font-size: 24px;
  font-weight: 400;
  color: #000;
  text-align: center;
  line-height: 37px;
}

.talent-circles-row-top { margin-bottom: -60px; }

.talent-quote {
  font-size: 36px;
  font-weight: 400;
  color: #000;
  text-align: center;
  line-height: 37px;
  margin-bottom: 80px;
}

.talent-quote .recruit-blue { font-weight: 500; color: #08559c; }

/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 768px) {
  .sp-only {
    display: block;
  }
  
  .recruit-hero-section {
    height: 280px;
  }

  .recruit-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 25% center;
  }

  .recruit-hero-en {
    font-size: 24px;
  }

  .recruit-hero-ja {
    font-size: 30px;
  }

  .recruit-intro-section {
    flex-direction: column;
    padding: 40px 20px 80px;
  }

  .recruit-intro-text {
    text-align: center;
  }

  .recruit-intro-heading {
    display: inline-block;
    text-align: left;
    font-size: 24px;
  }

  .recruit-intro-body {
    display: inline-block;
    text-align: left;
    font-size: 16px;
    padding: 0 8px;
    margin-bottom: 5px;
  }

  .recruit-intro-image-wrap {
    width: 220px;
    height: 220px;
    align-self: center;
  }

  .jobs-section {
    padding: 40px 20px 80px;
  }

  .jobs-section-heading {
    font-size: 26px;
    margin-bottom: 0;
  }

  .jobs-section-underline {
    width: 135px;
  }

  .job-card {
    flex-direction: column;
    gap: 16px;
  }

  .job-photo {
    width: 100%;
    height: 200px;
  }

  .job-details{
    margin: 0 8px;
  }

  .job-title {
    font-size: 22px;
  
  }

  .duties-label {
    font-size: 20px;
    margin-top: 20px;
  }

  .job-duties {
    font-size: 16px;
  }

  .job-list-text{
    padding-left: 20px;
    margin-top: 10px;
  }


  .recruit-cta-btn {
    width: 220px;
    height: 50px;
    font-size: 16px;
    gap: 8px;
    margin-top: 0;
  }

  .recruit-cta-btn-arrow {
    width: 26px;
    height: 26px;
  }

  .recruit-cta-btn-arrow img {
    width: 13px;
    height: 13px;
  }

  .talent-section{
    padding: 80px 20px 60px;
  }

  .talent-photo {
    width: 100%;
    height: 200px;
  }

  .talent-heading {
    font-size: 24px;
  }

  .talent-circle {
    width: 160px;
    height: 152px;
    font-size: 20px;
  }

  .talent-quote {
    font-size: 22px;
    padding: 0 5px;
  }

   .talent-circle-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .talent-circle-bottom {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .talent-circle {
    width: 200px;
    height: 200px;
  }
  
}

/* ============================================
   PAGE HERO BANNER
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.sp-only {
  display: none;
}

/* ── Hero ────────────────────────────────────── */

.recruit-hero-section {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.recruit-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.recruit-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: #08559c;
  line-height: 1;
  margin: 0;
}

.recruit-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: #4b4b4b;
  text-shadow: 0 4px 4px rgba(0,0,0,.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* ── Table ───────────────────────────────────── */

.care-job-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  line-height: 1.8;
}

.care-job-back-link {
  display: inline-block;
  margin-bottom: 22px;
  padding: 4px 16px;
  border: 2px solid #f6a21a;
  border-radius: 20px;
  color: #f6a21a;
  font-size: 18px;
  text-decoration: none;
  transition: 0.25s;
}

.care-job-back-link:hover {
  background: #f6a21a;
  color: #fff;
  box-shadow: 0 4px 12px rgba(246,162,26,0.2);
  transform: translateY(-2px);
}

.care-job-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.care-job-tab.active,
.care-job-tab.is-active {
  font-size: 18px;
  background: #f6a21a;
  border-color: #f6a21a;
  color: #fff;
  box-shadow: 0 4px 12px rgba(246,162,26,0.2);
  border-radius: 8px;
  transition: 0.25s;
}

.care-job-tab.active:hover,
.care-job-tab.is-active:hover {
  background: #ffb338;
  border-color: #ffb338;
  box-shadow: 0 8px 18px rgba(246, 154, 19, 0.22);
  transform: translateY(-3px);
}

.care-job-tab {
  flex:  0 0 220px;
  height: 75px;
  padding: 14px 8px;
  border: 2px solid #ddd;
  background: #fff;
  text-align: center;
  color: #bdbbbb;
  line-height: 1.3;
  font-size: 18px;
  font-weight: 600;
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
  transition: 0.25s;
  cursor: pointer;
  appearance: none;
}

.care-job-tab:not(.is-active):hover {
  border-color: #ffb338;
  color: #f6a21a;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(246,154,19,0.22);
}

.care-job-tab:visited:not(.active) {
  color: #3b8dd9;
  border-color: #e9e8e8;
  background: #f5f9ff;
}

.care-job-tab:visited:not(.active):hover {
  border-color: #f6a21a;
  color: #f6a21a;
  background: #ffffff;
}

.care-job-table {
  border: 2px solid #d8d8d8;
}

.care-job-row {
  display: grid;
  grid-template-columns: 32% 68%;
  border-bottom: 2px solid #d8d8d8;
}

.care-job-row:last-child {
  border-bottom: none;
}

.care-job-title {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff8e8;
  border-right: 2px solid #d8d8d8;
  color: #4b4b4b;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
}

.care-job-content {
  padding: 36px 34px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.care-job-content p {
  margin: 0 0 18px;
}

.care-job-content p:last-child {
  margin-bottom: 0;
}

.care-job-content ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.care-job-content li {
  margin-bottom: 2px;
}

.care-job-content li,
.care-job-note,
.care-job-content div {
  display: flex;
  align-items: flex-start;
}

/* 記号部分 */

.care-job-content li::before {
  content: "・";
  flex-shrink: 0;
  margin-right: 0.2em;
}

/* ＊ */

.care-job-note::before {
  content: "＊";
  flex-shrink: 0;
  margin-right: 0.2em;
}

/* ※ */

.care-job-content div.note::before {
  content: "※";
  flex-shrink: 0;
  margin-right: 0.2em;
}

.care-job-content .care-job-heading {
  margin: 36px 0 10px;
  font-weight: 500;
}

.care-job-indent {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.care-job-indent .label {
  flex-shrink: 0;
}

/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 768px) {
  .sp-only {
    display: block;
  }
  
  .recruit-hero-section {
    height: 280px;
  }

  .recruit-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 25% center;
  }

  .recruit-hero-en {
    font-size: 24px;
  }

  .recruit-hero-ja {
    font-size: 30px;
  }


  .care-job-section {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 40px 20px;
  }

  .care-job-back-link{
    font-size: 14px;
  }

  .care-job-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .care-job-tab {
    flex: initial;
    width: 100%;
    min-width: auto;
    height: 72px;
    padding: 0;
    font-size: 16px;
    line-height: 1.25;
  }

  .care-job-tab.active,
  .care-job-tab.is-active {
    font-size: 17px;
    padding: 8px;
  }

  .care-job-tab-part {
    flex-direction: column;
    gap: 3px;
  }

  .care-job-tab-part .tab-small-text {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  
  .care-job-row {
    grid-template-columns: 1fr;
  }

  .care-job-title {
    font-size: 22px;
    padding: 18px;
    border-right: none;
    border-bottom: 1px solid #d8d8d8;
  }

  .care-job-content {
    font-size: 16px;
    padding: 24px 20px;
  }


}

/* ============================================
   PAGE HERO BANNER
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.page-hero {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.page-hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.page-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: var(--blue);
  line-height: 1;
  margin: 0;
}

.page-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: var(--text-dark);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* ============================================
   PRIVACY POLICY
   ============================================ */

.privacy-policy-section {
  width: 100%;
  background: #fff;
  padding: 110px 0 140px;
}

.privacy-policy-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 40px;
}

.privacy-policy-lead {
  font-size: 20px;
  line-height: 2;
  font-weight: 500;
  color: #4b4b4b;

  margin-bottom: 90px;
}

.privacy-policy-block {
  margin-bottom: 72px;
}

.privacy-policy-title {
  position: relative;

  display: inline-block;

  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: #4b4b4b;

  padding-bottom: 14px;
  margin-bottom: 22px;
}

.privacy-policy-title::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width:180px;
  height: 6px;

  background: #f6a21a;
}

.privacy-policy-text {
  font-size: 20px;
  line-height: 2;
  font-weight: 500;
  color: #4b4b4b;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media screen and (max-width: 768px) {

  .page-hero {
    height: 240px;
  }

  .page-hero-en {
    font-size: 22px;
  }

  .page-hero-ja {
    font-size: 28px;
  }

  .privacy-policy-section {
    padding: 40px 0 60px;
  }

  .privacy-policy-inner {
    padding: 0 20px;
  }

  .privacy-policy-lead {
    font-size: 15px;
    line-height: 1.9;

    margin-bottom: 80px;
  }

  .privacy-policy-block {
    margin-bottom: 52px;
    padding: 0 20PX;
  }

  .privacy-policy-title {
    font-size: 20px;

    padding-bottom: 10px;
    margin-bottom: 18px;
  }

  .privacy-policy-title::after {
    width: 100px;
    height: 4px;
  }

  .privacy-policy-text {
    font-size: 15px;
    line-height: 1.9;
  }

}

/* ============================================
   PAGE HERO BANNER
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.page-hero {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.page-hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.page-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: #08559c;
  line-height: 1;
  margin: 0;
}

.page-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: #4b4b4b;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  margin-top: 8px;
}

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

.faq-section {
  width: 100%;
  background: #fff;
  padding: 90px 20px 120px;
}

.faq-inner {
  max-width: 760px;
  margin: 0 auto;
}

.faq-heading {
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  color: #000;
  margin-bottom: 42px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.faq-item {
  width: 100%;
}

.faq-question,
.faq-answer {
  width: 100%;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 40px 1fr 34px;
  align-items: center;
  column-gap: 18px;
}

.faq-question {
  min-height: 64px;
  padding: 0 26px;
  border: none;
  background: #fff8e8;
  cursor: pointer;
  text-align: left;
}

.faq-answer {
  display: none;
  margin-top: 20px;
  min-height: 64px;
  padding: 18px 26px;
  background: #f3f8fc;
}

.faq-item.is-open .faq-answer {
  display: grid;
}

.faq-label {
  font-size: 20px;
  font-weight: 500;
}

.faq-question .faq-label {
  color:#08559c;
}

.faq-answer .faq-label {
  color: #f6a21a;
}

.faq-question-text {
  font-size: 18px;
  font-weight: 500;
  color: #4b4b4b;
  line-height: 1.7;
}

.faq-answer p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #4b4b4b;
  line-height: 1.7;
}

.faq-icon {
  width: 28px;
  height: 28px;
  border: 2px solid #f69a13;
  border-radius: 50%;
  position: relative;
}

.faq-icon::before {
  content: "∨";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f69a13;
  font-size: 16px;
  line-height: 1;
}

.faq-item.is-open .faq-icon::before {
  content: "∧";
}

/* ============================================
   RESPONSIVE
============================================ */

@media screen and (max-width: 768px) {
    .page-hero {
    height: 240px;
  }

  .page-hero-en {
    font-size: 22px;
  }

  .page-hero-ja {
    font-size: 28px;

  }

  .faq-section {
    padding: 60px 20px 80px;
  }

  .faq-heading {
    font-size: 24px;
    margin-bottom: 34px;
  }

  .faq-list {
    gap: 20px;
  }

  .faq-question,
  .faq-answer {
    grid-template-columns: 32px 1fr 28px;
    column-gap: 10px;
  }

  .faq-question {
    min-height: 58px;
    padding: 0 16px;
  }

  .faq-answer {
    margin-top: 12px;
    padding: 16px;
  }

  .faq-label{
    font-size: 17px;
  }

  .faq-question-text {
    font-size: 15px;
  }

  .faq-answer p {
    font-size: 13px;
  }

  .faq-icon {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================
   BASE RESET & GLOBAL
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, -apple-system, Roboto, Helvetica, sans-serif;
  color: #4B4B4B;
  background: #fff;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.company-hero {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  transform: scale(1.3) translateX(-70px) translateY(-70px);
}

.company-hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.company-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: var(--blue);
  line-height: 1;
  margin: 0;
}

.company-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: var(--text-dark);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* ============================================================
   GREETING SECTION (代表挨拶)
   ============================================================ */

.greeting-section {
  padding: 80px 0 60px;
  background: #fff;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}

.greeting-content {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  margin-top: 60px;
}

.greeting-photo-col {
  flex-shrink: 0;
  margin-top: 5%;
}

.greeting-photo {
  width: 220px;
  height: 342px;
  border-radius: 10px;
  object-fit: cover;
}

.greeting-text-col {
  flex: 1;
}

.section-heading {
  font-size: 30px;
  font-weight: 600;
  color: #08559C;
  line-height: normal;
  margin-bottom: 10px;
  border-bottom: solid 1px #4B4B4B;
  max-width: fit-content;
}

.section-divider {
  width: 120px;
  height: 1px;
  background: #000;
  margin-bottom: 24px;
}

.section-divider--dark {
  background: #4B4B4B;
}

.greeting-body {
  font-size: 24px;
  font-weight: 400;
  color: #000;
  line-height: 1.2;
  letter-spacing: 0.72px;
  margin-bottom: 24px;
}

.greeting-signature {
  font-size: 24px;
  font-weight: 500;
  color: #000;
  letter-spacing: 0.72px;
  text-align: right;
}

/* ============================================================
   PHILOSOPHY SECTION (設立理念 + 運営方針 + 活動方針 + 活動目標)
   ============================================================ */

.philosophy-section {
  position: relative;
  background: #FFF9EA;
  padding-top: 274px;
  /* 214px + 余白60px */
  padding-bottom: 80px;
  overflow: hidden;
}

/* 背景画像用レイヤー */

.philosophy-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(/images/company_background.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 0;
  pointer-events: none;
}

.philosophy-section::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: 120px;
  width: 100%;
  max-width: 820px;
  height: 100%;
  max-height: 820px;
  background-image: url(/images/company_background2.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}

/* Building image */

.building-img-wrapper {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 0;
  margin-bottom: -214px;
  /* 画像高さ427pxの半分くらい */
  
}

.building-img {
  display: block;
  width: 793px;
  height: 427px;
  object-fit: cover;
  margin: 0 auto;
  object-position: 50% 60%;
}

/* Philosophy inner wrapper */

.philosophy-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px;
  position: relative;
  z-index: 1;
}

.philosophy-heading-center {
  font-size: 30px;
  font-weight: 600;
  color: #08559C;
  margin-bottom: 24px;
  border-bottom: solid 1px #4B4B4B;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.philosophy-heading {
  font-size: 30px;
  font-weight: 600;
  color: #08559C;
  margin-bottom: 24px;
  border-bottom: solid 1px #4B4B4B;
  width: fit-content;
}

/* Philosophy box (設立理念) */

.philosophy-philosophy-box {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
  justify-content: center;
  flex-wrap: wrap;
}

.philosophy-philosophy-border {
  border: 3px solid #08559C;
  border-radius: 20px;
  background: #fff;
  padding: 40px 44px;
  max-width: 657px;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}

.philosophy-philosophy-text {
  font-size: 20px;
  font-weight: 500;
  color: #000;
  text-align: center;
  line-height: 2;
}

/* Circular images */

.philosophy-circle-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  flex-shrink: 0;
}

.philosophy-circle-img {
  width: 282px;
  height: 290px;
  border-radius: 50%;
  object-fit: cover;
}

/* 運営方針 */

.policy-block {
  margin-bottom: 60px;
}

.policy-slogan {
  font-size: 28px;
  font-weight: 500;
  color: #4B4B4B;
  line-height: 40px;
  margin-bottom: 16px;
}

.policy-body {
  font-size: 20px;
  font-weight: 400;
  color: #4B4B4B;
  line-height: 2;
  max-width: 600px;
}

/* 活動方針 */

.activity-policy-block {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  margin-bottom: 60px;
}

.activity-policy-text {
  flex: 1;
}

.activity-list {
  font-size: 20px;
  font-weight: 400;
  color: #4B4B4B;
  line-height: 2;
}

.activity-list li {
  margin-bottom: 0;
}

.activity-policy-circle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Group photo */

.group-photo-wrapper {
  margin-bottom: 60px;
}

.group-photo {
  width: 829px;
  height: 359px;
  border-radius: 20px;
  object-fit: cover;
  margin: 0 auto;
}

/* 活動目標 */

.activity-goal-block {
  text-align: center;
}

.activity-goal-list {
  font-size: 28px;
  font-weight: 400;
  color: #4B4B4B;
  line-height: 40px;
  display: inline-block;
  text-align: left;
}

.activity-goal-list li {
  margin-bottom: 0;
}

/* ============================================================
   OVERVIEW SECTION (法人概要 / 建物概要)
   ============================================================ */

.overview-section {
  padding: 80px 0;
  background: #fff;
}

.overview-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
}

.overview-main-heading {
  font-size: 40px;
  font-weight: 600;
  color: #4B4B4B;
  text-align: center;
  margin-bottom: 48px;
}

/* Tables */

.overview-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 48px;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

.overview-table th,
.overview-table td {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #4B4B4B;
  border: 1px solid #4B4B4B;
  vertical-align: top;
  line-height: 1.6;
}

.overview-table th {
  background: #FFF9EA;
  width: 200px;
  text-align: center;
  font-weight: 500;
}

/* Sub-sections */

.sub-section {
  margin-bottom: 48px;
}

.sub-heading {
  font-size: 24px;
  font-weight: 500;
  color: #4B4B4B;
  font-family: Inter, sans-serif;
  margin-bottom: 8px;
}

.sub-heading-bar {
  width: 105px;
  height: 7px;
  background: #F69A13;
  margin-bottom: 20px;
}

.institution-name {
  font-size: 17px;
  font-weight: 400;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  color: #000;
}

/* ============================================================
   RESPONSIVE — TABLET (max 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  :root {
    --building-overlap-sp: min(214px, 24vw);
  }

  .section-inner {
    padding: 0 32px;
  }

  .company-hero-bg {
    transform: scale(1.4) translateY(60px);
    object-position: center center;
  }

  /* 建物写真 */
  .building-img-wrapper {
    width: min(793px, 90vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--building-overlap-sp) * -1);
  }

  .building-img {
    width: 100%;
    height: auto;
    aspect-ratio: 793 / 427;
    object-fit: cover;
  }

  /* クリーム色背景 */
  .philosophy-section {
    padding-top: calc(var(--building-overlap-sp) + 60px);
  }

  .philosophy-section::before {
    top: -48px;
    height: calc(100% + 48px);
    background-size: 80%;
  }

  .philosophy-section::after {
    width: 100%;
    max-width: 560px;
    height: 100%;
    max-height: 560px;
    right: -60px;
    bottom: 140px;
    background-position: right bottom;
  }

  .philosophy-inner {
    padding: 56px 32px;
  }

  .philosophy-philosophy-border {
    width: 100%;
    max-width: 657px;
    flex-shrink: 1;
    margin-bottom: 24px;
  }

  .policy-body {
    max-width: 100%;
  }

  .group-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 829 / 359;
    object-fit: cover;
  }

  .overview-inner,
  .footer-inner {
    padding: 0 32px;
  }

  .site-header {
    height: auto;
    padding: 16px 0;
  }

  .header-inner {
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 24px;
    height: auto;
  }

  .logo-img {
    width: 220px;
    height: auto;
  }

  .main-nav {
    order: 3;
    width: 100%;
  }

  .nav-bubbles {
    display: none;
  }

  .nav-list {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
  }

  .nav-icon {
    display: none;
  }

  .greeting-content {
    flex-direction: column;
    align-items: center;
  }

  .building-img {
    width: 100%;
    height: auto;
  }

  .philosophy-philosophy-box {
    flex-direction: column;
    align-items: center;
  }

}

/* ============================================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================================ */

@media screen and (max-width: 768px) {
    .activity-policy-block {
    flex-direction: column;
    align-items: center;
  }
  .activity-policy-block--reverse-sp {
    margin-top: 40px;
    flex-direction: column-reverse;
  }
    .philosophy-section::after {
    width: 100%;
    max-width: 560px;
    height: 100%;
    max-height: 560px;
    right: -60px;
    bottom: 140px;
    background-position: right bottom;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (max 600px)
   ============================================================ */

@media (max-width: 600px) {
  :root {
    --building-overlap-sp: 24vw;
  }


  /* Hero */
  .company-hero {
    height: 240px;
  }

  .company-hero-bg {
    transform: scale(1.8) translateY(-5px);
    object-position: center center;
  }

  .company-hero-en {
    font-size: 22px;
  }

  .company-hero-ja {
    font-size: 28px;

  }


  /* Greeting */
  .greeting-section {
    padding: 48px 0 40px;
  }

  .section-inner {
    padding: 0 20px;
  }

  .greeting-content {
    gap: 24px;
  }

  .greeting-photo {
    width: min(180px, 60vw);
    height: auto;
  }

  .greeting-body {
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.02em;
  }

  .greeting-signature {
    font-size: 16px;
  }

  /* 建物写真 */
  .building-img-wrapper {
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--building-overlap-sp) * -1);
  }

  .building-img {
    width: 100%;
    height: auto;
    aspect-ratio: 793 / 427;
    object-fit: cover;
  }

  /* Philosophy */
  .philosophy-section {
    padding-top: calc(var(--building-overlap-sp) + 36px);
    padding-bottom: 56px;
  }

  .philosophy-section::before {
    top: -36px;
    height: calc(100% + 36px);
    background-size: 120%;
    background-position: center top;
  }

  .philosophy-section::after {
    width: 100%;
    max-width: 320px;
    height: 100%;
    max-height: 320px;
    right: 0;
    bottom: 0;
    background-position: right bottom;
  }

  .philosophy-inner {
    padding: 0 20px;
  }

  .philosophy-heading,
  .philosophy-heading-center {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .philosophy-section br {
    display: none;
  }

  .philosophy-philosophy-box {
    gap: 24px;
    margin-bottom: 44px;
  }

  .philosophy-philosophy-border {
    width: 100%;
    max-width: 100%;
    padding: 24px 18px;
    border-radius: 16px;
    margin-bottom: 0;
    flex-shrink: 1;
  }

  .philosophy-philosophy-text {
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
  }

  .philosophy-circle-img {
    width: 180px;
    height: 180px;
  }

  /* 運営方針 */
  .policy-block {
    margin-bottom: 44px;
  }

  .policy-slogan {
    font-size: 18px;
    line-height: 1.7;
  }

  .policy-body,
  .activity-list {
    font-size: 15px;
    line-height: 1.9;
    max-width: 100%;
  }

  /* 活動方針 */
  .activity-policy-block {
    gap: 24px;
    margin-bottom: 44px;
  }

  /* Group photo */
  .group-photo-wrapper {
    margin-bottom: 44px;
  }

  .group-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 829 / 359;
    border-radius: 14px;
    object-fit: cover;
  }

  /* 活動目標 */
  .activity-goal-list {
    font-size: 18px;
    line-height: 1.8;
  }

  /* Overview */
  .overview-section {
    padding: 56px 0;
  }

  .overview-inner {
    padding: 0 20px;
  }

  .overview-main-heading {
    font-size: 28px;
    margin-bottom: 32px;
  }

  .overview-table {
    table-layout: fixed;
  }

  .overview-table th {
    width: 34%;
    padding: 10px 8px;
  }

  .overview-table td {
    width: 66%;
    padding: 10px 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .philosophy-section::after {
    width: 360px;
    height: 360px;
    right: -120px;
    bottom: 150px;
    background-position: right bottom;
  }

}

/* ===================================================
   ちゅら凪 — サービス案内 Stylesheet
   =================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, -apple-system, Roboto, Helvetica, sans-serif;
  background: #fff;
  color: #4b4b4b;
  min-width: 320px;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ===================================================
   HERO BANNER
   =================================================== */

.service-hero {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.service-hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.service-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: var(--blue);
  line-height: 1;
  margin: 0;
}

.service-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: var(--text-dark);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* ===================================================
   SERVICES SECTION
   =================================================== */

.services-section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 24px 100px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Service card */

.service-card {
  width: 100%;
  position: relative;
  border: 3px solid #08559C;
  border-radius: 30px;
  background: #fff;
  padding: 40px 50px 50px;
  text-align: center;
}

.service-img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 24px;
}

.service-name {
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-weight: 500;
  color: #4b4b4b;
  margin-bottom: 12px;
}

.service-desc {
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #4b4b4b;
  line-height: 1.6;
}

/* Arrow button — bottom-right corner of card */

.service-card {
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.service-page-arrow {
  position: absolute;
  right: 0;
  bottom: 0;

  width: 65px;
  height: 65px;

  background-color: #acb6de;
  border-radius: 40px 0 0 0;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: background-color 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

.service-card:hover .service-page-arrow {
  background-color: #08559c;
  transform: scale(1.05);
}

.service-page-arrow-icon {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

/* ===================================================
   RESPONSIVE — TABLET (≤ 1024px)
   =================================================== */

@media (max-width: 1024px) {

  .service-hero {
    height: 240px;
  }

  .service-hero-en {
    font-size: 32px;
  }

  .service-hero-ja {
    font-size: 36px;
  }

  .services-section {
    padding: 60px 24px 80px;
    gap: 40px;
  }

  .service-name {
    font-size: 28px;
  }

  .service-desc {
    font-size: 18px;
  }

  .footer-body {
    flex-direction: column;
    align-items: center;
  }

  .map-img {
    width: 100%;
    max-width: 400px;
  }
}

/* ===================================================
   RESPONSIVE — MOBILE (≤ 768px)
   =================================================== */

@media screen and (max-width: 768px) {

  .service-hero {
    height: 240px;
  }

  .service-hero-en {
    font-size: 22px;
  }

  .service-hero-ja {
    font-size: 28px;
  }

  .services-section {
    max-width: 360px;

    margin: 0 auto;

    padding: 40px 0 60px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 38px;
  }

  .service-card {
    width: 100%;

    border: 2px solid #08559C;
    border-radius: 16px;

    padding: 14px 14px 52px;

    overflow: hidden;

    position: relative;
  }

  .service-img {
    width: 100%;
    height: 230px;

    object-fit: cover;

    border-radius: 8px;

    margin-bottom: 14px;
  }

  .service-name {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .service-desc {
    font-size: 13px;
    line-height: 1.6;
  }

.service-page-arrow {
  width: 44px;
  height: 44px;
  border-radius:  20px 0 0 0;
}

.service-page-arrow-icon {
  font-size: 18px;
}
}

/* =============================================
   RESET & BASE
   ============================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, -apple-system, Roboto, Helvetica, sans-serif;
  color: #4b4b4b;
  background: #fff;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =============================================
   HERO SECTION
   ============================================= */

.service-day-hero {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-day-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.service-day-hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.service-day-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: #08559c;
  line-height: 1;
  margin: 0;
}

.service-day-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: #4b4b4b;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* =============================================
   INTRO SECTION
   ============================================= */

.intro-section {
  position: relative;
  width: 100%;
  height: 566px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-image: url(/images/service-top_background.png);
  background-position: center ; 
  background-repeat: no-repeat no-repeat;
  background-size: cover;
  pointer-events: none;
}

.intro-inner {
  max-width: 950px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.intro-image-wrapper {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.intro-photo {
  width: 345px;
  height: 282px;
  object-fit: cover;
  border-radius: 20px;
}

.intro-content {
  width: 550px;
  flex: 1;
  position: relative;
  z-index: 1;
  margin-left: -80px;
  margin-top: 15%;
}

.intro-quote {
  font-size: 35px;
  font-weight: 600;
  color: #4b4b4b;
  margin-bottom: 24px;
  text-align: center;
}

.intro-text-card {
  background: #fff9ea;
  border-radius: 20px;
  padding: 40px 36px;
  line-height: 1.6;
}

/* =============================================
   DAILY SCHEDULE SECTION
   ============================================= */

.schedule-section {
  background: #fff9ea;
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}

.schedule-header {
  text-align: center;
  margin-bottom: 60px;
}

.schedule-title {
  font-size: 40px;
  font-weight: 500;
  color: #000;
  margin-bottom: 12px;
}

.schedule-title-bar {
  width: 440px;
  height: 7px;
  background: #f69a13;
  margin: 0 auto 24px;
}

.schedule-subtitle {
  font-size: 20px;
  font-weight: 400;
  color: #000;
  line-height: 1.8;
}

.schedule-card-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 30px;
  padding: 60px 80px;
}

/* =============================================
   TIMELINE
   ============================================= */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-item {
  display: flex;
  gap: 28px;
  position: relative;
}

.timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 23px;
  padding-top: 11px;
}

.timeline-dot {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 3px solid #f69a13;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.timeline-line {
  width: 2px;
  flex: 1;
  min-height: 40px;
  background: #c4c4c4;
  margin-top: 4px;
}

.timeline-body {
  display: flex;
  gap: 24px;
  flex: 1;
  padding-bottom: 50px;
}

.timeline-item--last .timeline-body {
  padding-bottom: 0;
}

/* Speech-bubble card */

.timeline-bubble {
  --orange: #f69a13;
  --tail-w: 12px;
  --tail-h: 24px;

  flex: 1;
  border: 1px solid var(--orange);
  border-radius: 0 10px 10px 10px;
  background: #fff;
  padding: 24px 28px 28px;
  position: relative;
  margin-left: var(--tail-w);
}

/* オレンジの斜め線部分 */

.timeline-bubble::before {
  content: '';
  position: absolute;
  left: calc(var(--tail-w) * -1 - 0.5px);
  top: -1px;
  width: var(--tail-w);
  height: var(--tail-h);
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* 中を白く抜いて、線だけに見せる */

.timeline-bubble::after {
  content: '';
  position: absolute;
  left: calc(var(--tail-w) * -1 + 1px);
  top: 0;
  width: var(--tail-w);
  height: calc(var(--tail-h) - 2px);
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.timeline-time {
  font-size: 20px;
  font-weight: 500;
  color: #08559c;
  margin-bottom: 10px;
}

.timeline-event-title {
  /* font-size: 20px; */
  font-weight: 500;
  color: #4b4b4b;
  margin-bottom: 14px;
}

.timeline-event-desc {
  font-size: 15px;
  font-weight: 400;
  color: #000;
  line-height: 1.7;
}

.timeline-image-wrapper {
  flex-shrink: 0;
}

.timeline-photo {
  width: 283px;
  height: 243px;
  object-fit: cover;
  border-radius: 10px;
}

.timeline-image-wrapper--stretch {
  align-self: stretch;
}

.timeline-image-wrapper--stretch .timeline-photo {
  height: 100%;
}

.timeline-image-wrapper--zoom {
  overflow: hidden;
  border-radius: 10px;
}

.timeline-photo--img8 {
  object-position: center 30%;
  transform: scale(1.15);
  transform-origin: center center;
}

.timeline-photo--img9 {
  transform: scale(1.3) translateX(10px);
  transform-origin: center center;
}

/* =============================================
   OVERVIEW SECTION
   ============================================= */

.overview-section {
  padding: 80px 0 100px;
  background: #fff;
}

.overview-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 60px;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 50px;
}

.section-heading-bar {
  width: 7px;
  height: 40px;
  background: #f69a13;
  border-radius: 2px;
  flex-shrink: 0;
}

.section-heading-title {
  font-size: 40px;
  font-weight: 500;
  color: #4b4b4b;
}

.overview-table {
  width: 851px;
  border-collapse: collapse;
}

.overview-row {
  border-top: 1px solid #c4c4c4;
}

.overview-row--last {
  border-bottom: 1px solid #c4c4c4;
}

.overview-label {
  padding: 28px 0;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  vertical-align: top;
  width: 160px;
  white-space: nowrap;
}

.overview-value {
  padding: 28px 0 28px 40px;
  font-size: 20px;
  font-weight: 300;
  color: #000;
  vertical-align: top;
  line-height: 1.7;
}

.overview-value small {
  font-size: 15px;
}

.overview-note {
  font-size: 18px;
  color: #000;
}

/* =============================================
   MEDIA QUERIES
   ============================================= */

@media screen and (max-width: 1200px) {


  .intro-inner {
    padding: 0 40px;
    gap: 40px;
  }

  .intro-photo {
    width: 280px;
    height: auto;
  }

  .schedule-card-wrapper {
    margin: 0 40px;
    padding: 48px;
  }

}

@media screen and (max-width: 900px) {

  /* INTRO */
  .intro-section {
    height: auto;
    padding: 60px 24px;

    background-size: 120%;
    background-position: center top;
  }

  .intro-inner {
    flex-direction: column;
    gap: 32px;
    padding: 0;
  }

  .intro-image-wrapper {
    width: 100%;
  }

  .intro-photo {
    width: 100%;
    height: auto;
  }

  .intro-content {
    width: 100%;

    margin-left: 0;
    margin-top: 0;
  }

  .intro-quote {
    font-size: 26px;
    text-align: center;
  }

  .intro-text-card {
    padding: 24px;
  }

  .intro-description {
    font-size: 15px;
    line-height: 1.7;
  }

  /* SCHEDULE */
  .schedule-section {
    padding: 60px 0 80px;
  }

  .schedule-title {
    font-size: 28px;
  }

  .schedule-title-bar {
    width: 240px;
  }

  .schedule-subtitle {
    font-size: 16px;
    padding: 0 24px;
  }

  .schedule-card-wrapper {
    margin: 0 16px;
    padding: 32px 24px;
  }

  .timeline-body {
    flex-direction: column;
    gap: 16px;
  }

  .timeline-photo {
    width: 100%;
    height: 200px;
  }

  /* OVERVIEW */
  .overview-inner {
    padding: 0 24px;
  }

  .overview-table {
    width: 100%;
  }

  .overview-label {
    width: 110px;

    font-size: 16px;

    padding: 20px 0;
  }

  .overview-value {
    font-size: 16px;

    padding: 20px 0 20px 20px;
  }

}

/* =========================
   768px
========================= */

@media screen and (max-width: 768px) {

  /* HERO */
  .service-day-hero {
    height: 240px;
  }

  .service-day-hero-en {
    font-size: 22px;
  }

  .service-day-hero-ja {
    font-size: 28px;
  }

  /* INTRO */
  .intro-section {
    padding: 40px 16px;

    background-size: cover;
  }

  .intro-quote {
    font-size: 22px;
  }

  .intro-text-card {
    padding: 20px;
    border-radius: 16px;
  }

  .intro-description {
    font-size: 14px;
  }

  /* SCHEDULE */
  .schedule-card-wrapper {
    margin: 0;
    border-radius: 0;

    padding: 24px 16px;
  }

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

  .schedule-subtitle {
    font-size: 14px;
    line-height: 1.8;
  }

  .timeline-item {
    gap: 16px;
  }

  .timeline-bubble {
    padding: 20px;
  }

  .timeline-time {
    font-size: 18px;
  }

  .timeline-event-title {
    font-size: 18px;
  }

  .timeline-event-desc {
    font-size: 14px;
  }

  .timeline-photo {
    height: 180px;
  }

  /* OVERVIEW */
  .section-heading-title {
    font-size: 28px;
  }

  .overview-label,
  .overview-value {
    font-size: 14px;
  }

  .overview-value {
    padding-left: 16px;
  }

}

/* =============================================
   RESET & BASE
   ============================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, -apple-system, Roboto, Helvetica, sans-serif;
  color: #4b4b4b;
  background: #fff;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =============================================
   HERO SECTION
   ============================================= */

.service-home-hero {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-home-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.service-home-hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.service-home-hero-en {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: #08559c;
  line-height: 1;
  margin: 0;
}

.service-home-hero-ja {
  font-family: Inter, sans-serif;
  font-size: 45px;
  font-weight: 500;
  color: #4b4b4b;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
  margin-top: 8px;
}

/* =============================================
   INTRO SECTION
   ============================================= */

.intro-section {
  position: relative;
  width: 100%;
  height: 566px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-image: url(/images/service-top_background.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.intro-inner {
  max-width: 950px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.intro-image-wrapper {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.intro-photo {
  width: 345px;
  height: 282px;
  object-fit: cover;
  border-radius: 20px;
}

.intro-content {
  width: 550px;
  flex: 1;
  position: relative;
  z-index: 1;
  margin-left: -80px;
  margin-top: 15%;
}

.intro-quote {
  font-size: 35px;
  font-weight: 500;
  color: #4b4b4b;
  margin-bottom: 24px;
  text-align: center;
}

.intro-quote-highlight {
  color: #08559c;
}

.intro-text-card {
  background: #fff9ea;
  border-radius: 20px;
  padding: 40px 36px;
  line-height: 1.6;
}

.intro-description {
  font-size: 18px;
  font-weight: 400;
  color: #000;
  line-height: 1.7;
}

/* =============================================
   FEATURES SECTION
   ============================================= */

.features-section {
  background: #fff9ea;
  padding: 64px 0 80px;
  position: relative;
  overflow: hidden;
}

.features-header {
  text-align: center;
  margin-bottom: 40px;
}

.features-title {
  font-size: 36px;
  font-weight: 500;
  color: #000;
  margin-bottom: 12px;
}

.features-title-bar {
  width: 180px;
  height: 7px;
  background: #f69a13;
  margin: 0 auto;
}

.features-gallery {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: 1160px;
  margin: 0 auto 60px;
  padding: 0 60px;
}

.gallery-photo {
  width: 297px;
  height: 244px;
  object-fit: cover;
  border-radius: 15px;
  flex-shrink: 0;
}

.features-list {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feature-item {
  text-align: center;
  padding: 40px 0;
}

.feature-title {
  font-size: 32px;
  font-weight: 500;
  color: #4b4b4b;
  margin-bottom: 20px;
}

.feature-desc {
  font-size: 20px;
  font-weight: 300;
  color: #000;
  line-height: 1.7;
}

.feature-divider {
  border: none;
  border-top: 1px dashed #4b4b4b;
  margin: 0;
}

/* =============================================
   OVERVIEW SECTION
   ============================================= */

.overview-section {
  padding: 80px 0 100px;
  background: #fff;
}

.overview-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 60px;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 50px;
}

.section-heading-bar {
  width: 7px;
  height: 40px;
  background: #f69a13;
  border-radius: 2px;
  flex-shrink: 0;
}

.section-heading-title {
  font-size: 40px;
  font-weight: 500;
  color: #4b4b4b;
}

.overview-table {
  width: 851px;
  border-collapse: collapse;
}

.overview-row {
  border-top: 1px solid #c4c4c4;
}

.overview-row--last {
  border-bottom: 1px solid #c4c4c4;
}

.overview-label {
  padding: 28px 0;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  vertical-align: top;
  width: 200px;
  white-space: nowrap;
}

.overview-value {
  padding: 28px 0 28px 40px;
  font-size: 20px;
  font-weight: 300;
  color: #000;
  vertical-align: top;
  line-height: 1.7;
}

.overview-value small {
  font-size: 16px;
}

.sp_br br {
  display: none;
}

/* =============================================
   MEDIA QUERIES
   ============================================= */

@media (max-width: 1200px) {

  .intro-inner {
    padding: 0 40px;
    gap: 40px;
  }

  .intro-photo {
    width: 280px;
    height: auto;
  }

  .features-gallery {
    padding: 0 40px;
  }

  .features-list {
    padding: 0 40px;
  }

}

@media (max-width: 900px) {

  .intro-section {
    height: auto;
    padding: 60px 24px;
    background-size: 130%;
    background-position: center top;
  }

  .intro-inner {
    flex-direction: column;
    padding: 0;
    gap: 32px;
  }

  .intro-image-wrapper {
    width: 100%;
  }

  .intro-photo {
    width: 100%;
    height: 260px;
  }

  .intro-content {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }

  .intro-quote {
    font-size: 26px;
    text-align: center;
  }

  .intro-text-card {
    padding: 24px;
  }

  .intro-description {
    font-size: 16px;
  }

  .features-section {
    padding: 48px 0 60px;
  }

  .features-title {
    font-size: 28px;
  }

  .features-gallery {
    flex-wrap: wrap;
    padding: 0 24px;
    gap: 12px;
    justify-content: center;
  }

  .gallery-photo {
    width: calc(50% - 8px);
    height: 180px;
  }

  .features-list {
    padding: 0 24px;
  }

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

  .feature-desc {
    font-size: 16px;
  }

  .overview-inner {
    max-width: 650px;
    padding: 0 24px;
  }

  .overview-table {
    width: 100%;
  }

  .overview-label {
    font-size: 14px;
    padding: 20px 0;
    width: 130px;
  }

  .overview-value {
    font-size: 14px;
    padding: 20px 0 20px 20px;
  }

}

@media (max-width: 768px) {
  .sp_br br {
    display: block;
  }
  
  .service-home-hero {
    height: 240px;
  }

  .service-home-hero-en {
    font-size: 22px;
  }

  .service-home-hero-ja {
    font-size: 28px;
  }



  .intro-section {
    padding: 40px 16px;
  }

  .intro-quote {
    font-size: 22px;
  }

  .intro-text-card {
    padding: 20px;
    border-radius: 16px;
  }

  .intro-description {
    font-size: 14px;
  }

  .features-gallery {
    flex-direction: column;
    padding: 0 16px;
  }

  .gallery-photo {
    width: 100%;
    height: 200px;
  }

  .features-list {
    padding: 0 16px;
  }

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

  .feature-desc {
    font-size: 15px;
  }

  .section-heading-title {
    font-size: 28px;
  }

  .overview-inner {
    max-width: 700px;
    padding: 0 24px;
  }

  .overview-table {
    width: 100%;
    table-layout: fixed;
  }

  .overview-label {
    width: 34%;
    padding: 16px 6px;
    font-size: 13px;
    line-height: 1.6;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .overview-value {
    width: 66%;
    padding: 16px 10px;
    font-size: 13px;
    line-height: 1.8;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .overview-value small {
    font-size: 12px;
    line-height: 1.7;
  }
}