@charset "UTF-8";
/* =========================================================
   Owner Interview – page specific styles  (prefix: oi-)
   サイト共通の --main-green-color(#65a575) と Zen Old Mincho を流用
   ========================================================= */
.oi-page {
  --oi-green:        var(--main-green-color, #65a575);
  --oi-green-dark:   #3b6d57;
  --oi-green-tint:   #f1f7f2;
  --oi-green-line:   #cfe3d4;
  --oi-ink:          #333;
  --oi-ink-soft:     #6b6b6b;
  --oi-bubble-staff: #f4f3ef;
  --oi-mincho: "Zen Old Mincho","游明朝",YuMincho,"Hiragino Mincho ProN",serif;
  --oi-quote-ink:    #3d5c56;
  --oi-quote-mark:   #b5d4c3;
  --oi-quote-line:   #e2e2e2;
}
.oi { color: var(--oi-ink); background:#fff; }
.oi__container { max-width: 880px; margin:0 auto; padding:0 20px; }

/* ---------- HERO ---------- */
.oi-hero { position: relative; z-index: 0; height: clamp(320px, 56vw, 560px); overflow: hidden; }
.oi-hero__media { position:absolute; inset:0; }
.oi-hero__media img { width:100%; height:100%; object-fit:cover; display:block; }
.oi-hero::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,40,28,.15) 0%, rgba(20,40,28,.55) 100%); }
.oi-hero__inner { position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; color:#fff; padding:0 24px; }
.oi-hero__kicker { font-size:1.2rem; letter-spacing:.35em; font-weight:700;
  margin:0 0 18px; padding-left:.35em; opacity:.95; }
.oi-hero__title { font-family:var(--oi-mincho); font-weight:700;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height:1.5; margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.3); }
.oi-hero__sub { font-family:var(--oi-mincho); font-size: clamp(1.4rem,2.6vw,1.9rem);
  margin:18px 0 0; letter-spacing:.05em; }

/* ---------- パンくず ---------- */
.oi-breadcrumb { border-bottom:1px solid #eee; }
.oi-breadcrumb .oi__container { padding-top:14px; padding-bottom:14px; }
.oi-breadcrumb a { color:var(--oi-green-dark); text-decoration:none; }
.oi-breadcrumb a:hover { text-decoration:underline; }
.oi-breadcrumb span { color:var(--oi-ink-soft); font-size:1.3rem; }
.oi-breadcrumb span + span, .oi-breadcrumb a + span { margin:0 8px; }

/* ---------- リード ---------- */
.oi-lead { margin:56px auto 48px; }
.oi-lead__title { font-family:var(--oi-mincho); font-weight:700;
  font-size: clamp(2.0rem, 3.4vw, 2.6rem); line-height:1.6; text-align:center;
  margin:0 0 28px; color:var(--oi-ink); }
.oi-lead__title::after { content:""; display:block; width:48px; height:3px;
  background:var(--oi-green); margin:16px auto 0; border-radius:2px; }
.oi-lead__body p { font-size:1.6rem; line-height:2.1; margin:0 0 16px; }
.oi-mark { background:linear-gradient(transparent 62%, #d9ecdd 62%); font-weight:700; padding:0 .1em; }

/* ---------- 登場人物カード ---------- */
.oi-profile { display:flex; align-items:center; gap:24px;
  background:var(--oi-green-tint); border:1px solid var(--oi-green-line);
  border-radius:14px; padding:24px 28px; margin:0 0 52px; }
.oi-profile__avatar { width:150px; }
.oi-profile__avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.oi-profile__role { font-size:1.2rem; letter-spacing:.2em; color:var(--oi-green-dark);
  font-weight:700; margin:0 0 4px; }
.oi-profile__name { font-family:var(--oi-mincho); font-size:2.0rem; font-weight:700; margin:0 0 8px; }
.oi-profile__desc { font-size:1.4rem; line-height:1.9; color:var(--oi-ink); margin:0 0 12px; }
.oi-profile__tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.oi-profile__tags li { font-size:1.4rem; color:var(--oi-green-dark);
  background:#fff; border:1px solid var(--oi-green-line); border-radius:999px; padding:4px 14px; }

/* ---------- 大引用（リデザイン：浮いた引用符を撤去し、淡いウォーターマーク＋緑罫で上品に） ---------- */
.oi-pullquote {
  position: relative;
  margin: 80px 0;
  padding: 0;
  border: 0;
}
.oi-pullquote__frame {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
  padding: 52px 28px 0;
  text-align: center;
}
/* 文頭に淡い大きな引用符を1つだけ（背景の飾り） */
.oi-pullquote__frame::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--oi-mincho);
  font-weight: 700;
  font-size: clamp(4.6rem, 9vw, 6.6rem);
  line-height: 1;
  color: var(--oi-green);
  opacity: .15;
  pointer-events: none;
  user-select: none;
}
/* HTML 内の浮いた引用符スパンは非表示（飾りは ::before に一本化） */
.oi-pullquote__mark { display: none; }
.oi-pullquote__text {
  font-family: var(--oi-mincho);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.1vw, 2.4rem);
  line-height: 2.0;
  letter-spacing: .06em;
  color: var(--oi-quote-ink);
  margin: 0;
}
/* 引用文の下に短い緑のアクセント罫（ページ共通モチーフと統一） */
.oi-pullquote__text::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 26px auto 0;
  background: var(--oi-green);
  border-radius: 2px;
  opacity: .85;
}
.oi-pullquote__em {
  font-weight: 700;
  color: var(--oi-green-dark);
}
.oi-pullquote__em::before { content: "\201C"; }
.oi-pullquote__em::after  { content: "\201D"; }
.oi-pullquote--alt .oi-pullquote__text { color: var(--oi-ink); }

/* ---------- 章 ---------- */
.oi-section { margin:0 0 64px; }
.oi-section__title { display:flex; align-items:center; gap:14px;
  font-family:var(--oi-mincho); font-weight:700; font-size: clamp(1.9rem,2.8vw,2.3rem);
  line-height:1.5; color:var(--oi-ink); margin:0 0 32px;
  padding-bottom:16px; border-bottom:2px solid var(--oi-green-line); }
.oi-section__num { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--oi-green); color:#fff;
  font-family:Arial, sans-serif; font-size:1.7rem; font-weight:700; }

/* ---------- 会話 ---------- */
.oi-talk__row { display:flex; align-items:flex-start; gap:14px; margin:0 0 22px; }
.oi-talk__row--owner { flex-direction:row-reverse; }
.oi-talk__avatar { flex:none; width:auto; height:100px; border-radius:50%;
  overflow:hidden; background:#fff; border:1px solid #eee; }
.oi-talk__avatar img { width:auto; height:100%; object-fit:cover; display:block; }
.oi-talk__bubble { position:relative; max-width:78%; padding:14px 20px; border-radius:14px;
  font-size:1.5rem; line-height:1.9; }
.oi-talk__bubble p { margin:0; }
.oi-talk__name { display:block; font-size:1.2rem; font-weight:700; margin-bottom:6px; color:var(--oi-ink-soft); }
/* スタッフ＝生成りグレー（左） */
.oi-talk__row--staff .oi-talk__bubble { background:var(--oi-bubble-staff); }
.oi-talk__row--staff .oi-talk__bubble::before { content:""; position:absolute; top:20px; left:-9px;
  border-width:7px 9px 7px 0; border-style:solid; border-color:transparent var(--oi-bubble-staff) transparent transparent; }
/* オーナー＝淡いグリーン（右） */
.oi-talk__row--owner .oi-talk__bubble { background:var(--oi-green-tint); border:1px solid var(--oi-green-line); }
.oi-talk__row--owner .oi-talk__name { color:var(--oi-green-dark); }
.oi-talk__row--owner .oi-talk__bubble::before { content:""; position:absolute; top:20px; right:-10px;
  border-width:7px 0 7px 10px; border-style:solid; border-color:transparent transparent transparent var(--oi-green-tint); }

/* ---------- 写真ギャラリー ---------- */
.oi-gallery { margin:36px 0 0; }
.oi-gallery__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.oi-gallery__grid img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; display:block; }
.oi-gallery figcaption { margin:12px 0 0; text-align:center; font-size:1.3rem; color:var(--oi-ink-soft); }

/* ---------- クロージング（フラット2カラム） ---------- */
.oi-closing {
  position: relative;
  z-index: 0;
  margin: 72px 0 96px;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
.oi-closing__accent {
  position: absolute;
  width: clamp(56px, 8vw, 96px);
  height: 12px;
  background: var(--oi-green);
  z-index: 1;
}
.oi-closing__accent--tl { top: 0; left: 0; }
.oi-closing__accent--br { right: 0; bottom: 0; }
.oi-closing__wrap {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 4vw, 56px);
  padding: 56px 20px 64px;
}
.oi-closing__inner {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0 8px clamp(0px, 2vw, 24px);
}
.oi-closing__head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 20px;
}
.oi-closing__kicker { margin: 0; }
.oi-closing__label {
  display: inline-block;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--oi-green);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--oi-green);
}
.oi-closing__title {
  font-family: Arial, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  line-height: 1.45;
  color: var(--oi-ink);
  margin: 0 0 18px;
}
.oi-closing__lead {
  font-family: Arial, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: clamp(1.5rem, 1.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.75;
  color: var(--oi-ink);
  margin: 0 0 16px;
}
.oi-closing__body p {
  font-family: Arial, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 1.5rem;
  line-height: 2.0;
  color: var(--oi-ink);
  margin: 0;
}
.oi-closing__cta { margin-top: 28px; }
.oi-closing__media {
  position: relative;
  flex: 1 1 42%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oi-closing__media-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 46%, rgba(101, 165, 117, .18) 46%, rgba(101, 165, 117, .18) 48%, transparent 48%),
    linear-gradient(125deg, transparent 58%, rgba(101, 165, 117, .12) 58%, rgba(101, 165, 117, .12) 59.5%, transparent 59.5%),
    linear-gradient(148deg, transparent 72%, rgba(244, 196, 48, .22) 72%, rgba(244, 196, 48, .22) 73.5%, transparent 73.5%),
    linear-gradient(118deg, transparent 34%, rgba(101, 165, 117, .1) 34%, rgba(101, 165, 117, .1) 35%, transparent 35%);
}
.oi-closing__media img {
  position: relative;
  z-index: 1;
  width: 88%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}

.oi-btn { display:inline-flex; align-items:center; gap:10px; padding:14px 32px;
  background:var(--oi-green); color:#fff; font-size:1.5rem; font-weight:700;
  border-radius:999px; text-decoration:none; transition:background .2s, transform .1s; }
.oi-btn::after { content:""; width:8px; height:8px; border-top:2px solid currentColor;
  border-right:2px solid currentColor; transform:rotate(45deg); }
.oi-btn:hover { background:var(--oi-green-dark); color:#fff; transform:translateY(-1px); }

/* ---------- レスポンシブ ---------- */
@media screen and (max-width:768px){
  .oi-lead__body p, .oi-talk__bubble, .oi-closing__body p { font-size:1.6rem; }
  .oi-pullquote { margin: 60px 0; }
  .oi-pullquote__frame { padding: 44px 14px 0; }
  .oi-pullquote__text { font-size: 2rem; line-height: 1.95; letter-spacing: .04em; }
  .oi-pullquote__frame::before { font-size: 4rem; }
  .oi-profile { flex-direction:column; text-align:center; padding:24px 18px; }
  .oi-profile__tags { justify-content:center; }
  .oi-talk__avatar { flex:none; width:auto; height:75px; }
  .oi-talk__bubble { max-width:80%; }
  .oi-section__num { width:38px; height:38px; font-size:1.5rem; }
  .oi-gallery__grid { grid-template-columns:1fr 1fr; }
  .oi-closing { margin: 56px 0 72px; }
  .oi-closing__wrap { flex-direction: column; padding: 48px 0 40px; gap: 32px; }
  .oi-closing__inner { padding: 20px; }
  .oi-closing__title { font-size: 2.0rem; }
  .oi-closing__media { min-height: 220px; }
  .oi-closing__media img { width: 100%; max-width: none; }
}
@media screen and (max-width:480px){
  .oi-gallery__grid { grid-template-columns:1fr; }
  .oi-talk__bubble { max-width:100%; }
}