/* ベース */
:root{
  --pink:#FBDEC9;
  --pink-strong:#f6a6b4;
  --blue:#a6dbe9;
  --text:#3a2f2f;
  --bg:#fffdfd;
  --shadow:0 10px 30px rgba(0,0,0,0.06);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.75;
}
.container{width:min(1100px, 92%); margin-inline:auto}

/* ===== ヘッダー上部：ロゴ ===== */
.branding{background:linear-gradient(180deg, #fff, #fff0f4 70%); border-bottom:1px solid #f0e9ec}
.branding-inner{padding:18px 0 8px; display:flex; justify-content:center; align-items:center}
.logo-large{width:auto; max-width:min(640px, 100%); height:auto; max-height:480px; display:block}

/* ===== メニュー（ロゴの下 & sticky） ===== */
.sticky-nav-wrap{
  position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #f0e9ec;
  backdrop-filter:saturate(1.1) blur(6px);
}
.sticky-nav{display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:10px 0}
.global-nav ul{display:flex; gap:.6rem; list-style:none; margin:0; padding:0}
.global-nav a{
  display:inline-block; padding:.6rem .9rem; border-radius:999px; text-decoration:none; color:var(--text);
}
.global-nav a:hover{background:var(--pink)}

/* ハンバーガー（スマホ） */
.nav-toggle{display:none}
.nav-toggle-btn{display:none; cursor:pointer; width:40px; height:32px; position:relative}
.nav-toggle-btn span{
  position:absolute; left:0; right:0; height:3px; background:#6b5c5c; border-radius:2px;
}
.nav-toggle-btn span:nth-child(1){top:4px}
.nav-toggle-btn span:nth-child(2){top:14px}
.nav-toggle-btn span:nth-child(3){top:24px}

@media (max-width: 860px){
  .nav-toggle-btn{display:block}
  .global-nav{
    position:absolute; inset:56px 0 auto 0; background:#fff; box-shadow:var(--shadow);
    transform:translateY(-16px); opacity:0; pointer-events:none; transition:.22s ease;
    border-bottom-left-radius:16px; border-bottom-right-radius:16px;
  }
  .global-nav ul{flex-direction:column; gap:.2rem; padding:10px 14px 16px}
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(1){transform:translateY(10px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
  .nav-toggle:checked ~ .global-nav{transform:translateY(0); opacity:1; pointer-events:auto}
}

/* ===== セクション ===== */
.section{padding:64px 0}
.section-soft{background:linear-gradient(180deg, #fff, #fff0f4 70%)}
h2{
  font-size:clamp(1.3rem, .9vw + 1.1rem, 1.8rem);
  margin:0 0 .8rem; letter-spacing:.05em; position:relative;
}
h2::after{
  content:""; display:block; width:72px; height:6px; border-radius:6px;
  background:linear-gradient(90deg, var(--pink-strong), var(--blue));
  margin-top:8px;
}

/* ===== あんどっとについて：大画像 + 横テキスト ===== */
.about-flex{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:24px; align-items:start; margin-top:18px;
}
.about-media img{
  width:100%; height:auto; display:block; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid #f3e7ea;
}
.about-body p{margin:.2em 0 1em}
.about-points{margin:.2em 0 0 1em; padding:0}
.about-points li{margin:.2em 0}

/* レスポンシブ（about） */
@media (max-width: 860px){
  .about-flex{grid-template-columns: 1fr; gap:16px}
}

/* ===== サービス内容（シンプル行） ===== */
.service-list{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:14px;
}
.service-item{
  background:#fff; border:1px solid #f3e7ea; border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow);
}
.service-item strong{display:block}
.service-item span{opacity:.85}
@media (max-width: 980px){ .service-list{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .service-list{grid-template-columns:1fr} }

/* ===== スタッフ紹介（行レイアウト） ===== */
.staff-list{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:16px}
.staff-row{
  display:grid; grid-template-columns: 92px 1fr; gap:14px; align-items:center;
  background:#fff; border:1px solid #f3e7ea; border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);
}
.staff-row img{width:92px; height:92px; object-fit:cover; border-radius:50%; border:3px solid #ffe6ee}
.staff-row h3{margin:.1em 0 .2em; font-size:1.05rem}

/* ===== 求人・アクセス・フッター ===== */
.recruit-box{
  background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
  border:1px solid #f3e7ea;
}
.recruit-lead{font-weight:700; margin-top:0}
.recruit-list{margin:.4em 0 1.2em}

.access-grid{display:grid; grid-template-columns: 1.1fr 1fr; gap:24px; align-items:start}
.map-embed img{width:100%; height:auto; display:block; border-radius:var(--radius); box-shadow:var(--shadow)}
.access-info p{margin:.2em 0}
@media (max-width: 980px){ .access-grid{grid-template-columns:1fr} }

.site-footer{
  background: #ffeef3; padding:22px 0; border-top:1px solid #f0e9ec; margin-top:30px;
}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.footer-nav a{color:#6b5c5c; text-decoration:none; margin-left:12px}
.footer-nav a:hover{text-decoration:underline}

/* ボタン */
.btn{
  display:inline-block; padding:.7rem 1.2rem; border-radius:999px; text-decoration:none;
  background:#fff; border:2px solid var(--pink-strong); color:#a24b5e; font-weight:700;
  box-shadow:var(--shadow);
}



/* === 追加: ナビ＆見出し構造に合わせた軽量レイアウト === */
.header{
  position: sticky; top:0; z-index: 40;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.header .inner{width:min(1080px,92%);margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand .logo{height:48px}
.menu-toggle{margin-left:auto;border:none;background:#fff;font-size:26px;border-radius:12px;box-shadow: var(--shadow);padding:.25rem .5rem;display:none}
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav a{display:inline-block;padding:10px 4px;border-bottom:2px solid transparent;color:inherit;text-decoration:none}
.nav a:hover,.nav a:focus{border-color:var(--pink-strong);outline:none}

@media (max-width: 900px){
  .menu-toggle{display:block}
  .nav{position:absolute; right:16px; top:64px; width:min(92vw,360px)}
  .nav ul{display:none;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
  .nav ul.show{display:flex}
  .nav li a{padding:14px 16px}
}

/* セクション共通 */
.section{padding:64px 0}
.section.alt{background: var(--pink);}
.container{width:min(1080px,92%);margin:0 auto}
h1{font-size:clamp(28px,4vw,40px);margin:.2em 0 .6em}
h2{font-size:clamp(22px,3vw,28px);border-left:6px solid var(--pink-strong);padding-left:.6em;margin:0 0 .8em}
h3{font-size:clamp(18px,2.2vw,20px);color:#555;margin:.6em 0 .4em}

/* カード */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,0.06);box-shadow:var(--shadow);padding:16px}
@media (max-width: 900px){.cards{grid-template-columns:1fr}}

/* ヒーロー */
.hero{ position: relative; }
.hero-media{ position: relative; width: 100%; }
.hero img{width:100%;height:100vh;object-fit:cover;display:block}
.hero::after{
  content: none !important;;
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.85) 80%);
  pointer-events:none;
}

.hero-media img{
  width: 100%;
  height:100vh;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

/* グラデーションを hero-media に移動 */
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(255,255,255,.85) 90%);
  pointer-events:none;
  z-index: 1;
}

/* === ヒーロー：タイトルのオーバーレイ === */
.hero-overlay{
  position:absolute; inset:0;
  bottom: 5%;  /* 画面下から20%の位置に配置 */
  z-index: 2;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.hero-overlay h1{
  pointer-events:auto;
  font-size: clamp(28px, 5vw, 64px);
  line-height: 1.3;
  color: var(--text);
  background: rgba(255,255,255,.92);
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* === 画面下部に固定CTA === */
body{ padding-bottom: 84px; } /* CTAがコンテンツを隠さない余白 */

.hero-cta{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  background: #5ce1e6;
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
}
.hero-cta a{
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  display: inline-block;
}
@media (max-width: 640px){
  .hero-cta{
    left: 8px; right: 8px; transform: none;
    border-radius: 14px; padding: 12px 14px;
  }
  body{ padding-bottom: 96px; }
}


/* フッター */
.footer{border-top:1px solid rgba(0,0,0,0.06);padding:26px 0;color:#666}



/* 固定ヘッダーで見出しが隠れないようにオフセット */
:is(h2, h3){ scroll-margin-top: 88px; }
@media (max-width: 900px){
  :is(h2, h3){ scroll-margin-top: 72px; }
}

/* 現在セクションのメニュー強調 & フォーカス可視化 */
.nav a.is-active{ border-color: var(--pink-strong); font-weight: 600; }
.nav a:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }

/* === about セクション：左右交互レイアウト === */
.about-row{
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* 画像をやや大きめに */
  gap: 24px;
  align-items: center;
  margin: 28px 0 48px;
}
.about-row .about-media img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;                /* 800x600 を想定（4:3） */
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.about-row .about-text h3{ margin-top: 0; }

/* 右左を反転（PC時のみ） */
.about-row--reverse .about-media{ order: 2; }
.about-row--reverse .about-text{ order: 1; }

/* レスポンシブ：縦積み */
@media (max-width: 900px){
  .about-row{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* SP では画像→テキストの順に統一（読みやすさ優先） */
  .about-row--reverse .about-media{ order: 0; }
  .about-row--reverse .about-text{ order: 1; }
}

/* === 代表挨拶：画像左／テキスト右 === */
.greeting-row{
  display: grid;
  grid-template-columns: 0.5fr 1.1fr; /* 画像をやや大きめに */
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}
.greeting-media img{
  max-width: 228px;
  max-height: 320px;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.profile{ margin: 0 0 16px; }
.profile dt{ font-weight: 700; min-width: 6em; }
.profile dd{ margin: 0 0 8px; }
@media (max-width: 900px){
  .greeting-row{ grid-template-columns: 1fr; }
}

/* === スタッフ紹介：縦並び、各行は「画像＋キャプション」横並び === */
.staff-list{
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 16px;
}
.staff-item{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.staff-photo img{
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.staff-caption h3{ margin: 0 0 6px; }
.staff-caption p{ margin: 0; color: #555; }

/* ========== First 理念（200×200 画像＋見出し＋文章） ========== */
.first-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.first-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* 画像は 200x200 のスクエアでトリミング */
.first-media {
  width: 200px;
  aspect-ratio: 1 / 1;
  flex: 0 0 200px;
}

/* 見出し・本文 */
.first-copy {
  flex: 1 1 auto;
}

.first-heading {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
}

.first-copy p {
  margin: 0;
  line-height: 1.75;
}

/* ========== レスポンシブ ========== */
@media screen and (max-width: 768px) {
  /* 特色は縦積み（中央） */
  .feature-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .feature-text {
    max-width: 90%;
  }
  .feature-media {
    width: 100%;
    max-width: 640px;
  }

  /* First 理念はモバイルで縦並び */
  .first-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .first-copy {
    width: 90%;
    max-width: 640px;
  }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
}

.contact-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.contact-icon {
  width: 200px;
  height: 200px;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}