@charset "UTF-8";
/* ==========================================================================
   page-concept.css ── コンセプト（私たちの想い）
   値は Figma の concept_PC（543:38858）／concept_SP（543:39160）のもの
   ========================================================================== */

/* ---- 1. Concept（写真＋見出し＋イラスト＋本文。下に淡い帯 200px） ---- */
.pw-cintro { background: linear-gradient(to top, #F5F6E9 200px, transparent 200px) var(--pw-color-bg); padding-bottom: 148px; }
.pw-cintro__hero { aspect-ratio: 1440 / 516; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-cintro__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 41.3%; }
.pw-cintro__inner { width: min(920px, 100% - var(--pw-gutter) * 2); margin-inline: auto; padding-top: 129px; }
.pw-cintro__heading { gap: 24px; }
.pw-cintro__body { display: flex; margin-top: 24px; }
.pw-cintro__illust { display: flex; justify-content: center; flex: none; width: 50%; padding: 32px 0; }
.pw-cintro__illust img { width: 273px; height: 210px; }
.pw-cintro__text { flex: 1 1 0; min-width: 0; padding-top: 35px; font-size: 16px; line-height: 29px; }

/* ---- 2. Our Story（背景の写真は画面に固定・文章だけ流れる。決定 A-4 ①） ---- */
.pw-story { position: relative; isolation: isolate; clip-path: inset(0); padding: 146px 0 116px; color: var(--pw-color-white); background: #0F1914; }
.pw-story__bg { position: fixed; inset: 0; z-index: -1; }
.pw-story__bg img { width: 100%; height: 100%; object-fit: cover; }
.pw-story__bg::after { content: ""; position: absolute; inset: 0; background: rgba(15, 25, 20, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pw-story__inner { width: min(1440px, 100%); margin-inline: auto; padding-left: 50%; }   /* 文章は右半分（x720〜） */
.pw-story__heading { width: 364px; max-width: 100%; }
.pw-story__text { display: flex; flex-direction: column; gap: 31px; width: 460px; max-width: 100%; margin-top: 42px; font-size: 16px; line-height: 29px; }

/* ---- 3. Philosophy ---- */
.pw-philo { padding: 120px var(--pw-gutter); background: var(--pw-color-bg-green10); }
.pw-philo__heading { width: min(534px, 100%); margin-inline: auto; }
.pw-philo__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(1056px, 100%); margin: 72px auto 0; }
.pw-philo__card { display: flex; flex-direction: column; padding: 24px 32px; background: var(--pw-color-white); }
.pw-philo__num { font-family: var(--pw-font-en); font-weight: 500; font-size: 24px; line-height: 29px; color: var(--pw-color-primary); }
.pw-philo__icon { display: flex; justify-content: center; align-items: center; height: 130.6px; margin-top: 8px; }
.pw-philo__title { margin-top: 8px; font-size: 18px; font-weight: 500; line-height: 32px; text-align: center; color: var(--pw-color-primary); }
.pw-philo__desc { margin-top: 8px; font-size: 16px; line-height: 29px; }

/* ---- 4. Profile ---- */
.pw-profile { position: relative; padding: 100px 0; background: var(--pw-color-bg); overflow: hidden; }
.pw-profile__bgword { position: absolute; left: calc(1199 * var(--pw-unit)); top: 176px; writing-mode: vertical-rl; rotate: 180deg; color: var(--pw-color-bg-yellowgreen); font-size: calc(96 * var(--pw-unit)); line-height: 1.8; }
.pw-profile__inner { position: relative; width: min(920px, 100% - var(--pw-gutter) * 2); margin-inline: auto; }
.pw-profile__heading { width: 468px; max-width: 100%; }
.pw-profile__body { display: flex; gap: 90px; margin-top: 56px; }
.pw-profile__photo { flex: none; width: 312px; aspect-ratio: 312 / 400; margin-top: 35px; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-profile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; }
.pw-profile__text { flex: none; width: 460px; max-width: 100%; }
.pw-profile__role { color: var(--pw-color-text); }   /* 英字の小見出しの形だが色は本文色（Figma） */
.pw-profile__namejp { display: flex; align-items: baseline; gap: 16px; margin-top: 4px; font-size: 26px; line-height: 47px; }
.pw-profile__nameen { font-size: 16px; line-height: 24px; color: var(--pw-color-primary); }
.pw-profile__list { margin-top: 32px; }
.pw-profile__list dt { padding: 0 16px; font-size: 18px; line-height: 32px; background: #F5F6E9; }
.pw-profile__list dd { margin-top: 16px; padding: 0 16px; font-size: 14px; line-height: 25px; }
.pw-profile__list dd + dt { margin-top: 16px; }
.pw-profile__history li { position: relative; padding-left: 12px; }
.pw-profile__history li::before { content: ""; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; background: var(--pw-color-primary); }

/* ---- 5. Our Promise（緑の枠＋方眼＋四隅の丸） ---- */
.pw-promise { padding: 72px var(--pw-gutter); background: var(--pw-color-bg); }
.pw-promise__box {
	position: relative; width: min(1200px, 100%); margin-inline: auto; padding: 62px 29px;   /* Figma の内側 64／31 から線 2px を引いた値 */
	border: 2px solid var(--pw-color-primary); border-radius: 8px;
	background: linear-gradient(#EFF6EF 1px, transparent 1px) 0 0 / 29.4px 30.8px, linear-gradient(90deg, #EFF6EF 1px, transparent 1px) 0 0 / 29.4px 30.8px, var(--pw-color-white);
}
.pw-promise__dot { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--pw-color-primary); }   /* デザインの部品（四隅の丸）。作業ルール#56 はめぐみやの成果物の話で、デザインの再現はデザインどおり */
.pw-promise__dot--tl { left: 29px; top: 30px; }
.pw-promise__dot--tr { right: 29px; top: 30px; }
.pw-promise__dot--bl { left: 29px; bottom: 30px; }
.pw-promise__dot--br { right: 29px; bottom: 30px; }
.pw-promise__heading { display: flex; flex-direction: column; align-items: center; }
.pw-promise__bgword { color: var(--pw-color-bg-green10); align-self: stretch; }
.pw-promise__title { position: relative; margin-top: -80px; }
.pw-promise__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 41px; width: min(1006px, 100%); margin: 32px auto 0; }
.pw-promise__photo { position: relative; aspect-ratio: 308 / 208; overflow: visible; background: var(--pw-color-placeholder); }
.pw-promise__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 31.25%; }
.pw-promise__num { position: absolute; right: -.06em; bottom: -83px; font-family: var(--pw-font-en); font-weight: 500; font-size: 96px; line-height: 173px; letter-spacing: .06em; color: var(--pw-color-bg-yellowgreen); pointer-events: none; }
.pw-promise__ttl { margin-top: 45px; font-size: 18px; font-weight: 500; line-height: 32px; color: var(--pw-color-primary); }
.pw-promise__desc { margin-top: 16px; min-height: 119px; font-size: 16px; line-height: 29px; }   /* Figma は文の箱が 119 固定 */

/* ---- 6. Message（直筆） ---- */
.pw-message { padding: 56px var(--pw-gutter); background: var(--pw-color-bg-green10); }
.pw-message__inner { width: min(920px, 100%); margin-inline: auto; }
.pw-message__bgword { display: flex; align-items: center; height: 56px; text-align: left; color: var(--pw-color-bg-green30); }
.pw-message__img { width: 490px; max-width: 100%; margin: 10px auto 0; }

/* ==========================================================================
   タブレット（768〜1024px）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.pw-story__inner { padding-left: 40%; }
	.pw-profile__body { gap: 40px; }
	.pw-profile__bgword { left: auto; right: 0; }
	.pw-promise__cards { gap: 24px; }
	.pw-promise__num { font-size: 72px; line-height: 130px; bottom: -65px; }
}

/* ==========================================================================
   SP（767px 以下）
   ========================================================================== */
@media (max-width: 767px) {
	/* 1. Concept */
	.pw-cintro { padding-bottom: 146px; }
	.pw-cintro__hero { position: relative; aspect-ratio: 375 / 420; }
	.pw-cintro__hero img { position: absolute; left: -49.33%; top: -9.05%; width: 198.13%; height: 117.86%; max-width: none; }   /* Figma の画像枠 743×495（x-185 y-38）を 375×420 の窓で */
	.pw-cintro__inner { width: min(335px, 100% - 40px); padding-top: 92px; }
	.pw-cintro__body { flex-direction: column; }
	.pw-cintro__illust { order: 2; width: 100%; }
	.pw-cintro__text { padding-top: 0; }

	/* 2. Our Story */
	.pw-story { padding: 86px 0 42px; }
	.pw-story__inner { width: min(335px, 100% - 40px); padding-left: 0; }
	.pw-story__heading, .pw-story__text { width: 100%; }

	/* 3. Philosophy */
	.pw-philo { padding: 80px 20px; }
	.pw-philo__cards { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 56px; }

	/* 4. Profile */
	.pw-profile { padding: 56px 0; }
	.pw-profile__bgword { display: none; }
	.pw-profile__inner { width: min(335px, 100% - 40px); }
	.pw-profile__heading { width: 100%; padding-bottom: 22px; }
	.pw-profile__body { flex-direction: column; align-items: center; gap: 24px; margin-top: 0; }
	.pw-profile__photo { margin-top: 0; }
	.pw-profile__photo { position: relative; }
	.pw-profile__photo img { position: absolute; left: -7.85%; top: -10.5%; width: 116.03%; height: 121%; max-width: none; }   /* Figma の画像枠 362×484（x-24.5 y-42）を 312×400 の窓で */
	.pw-profile__text { width: 100%; flex: none; }
	.pw-profile__namejp { margin-top: 4px; font-size: 20px; line-height: 36px; }
	.pw-profile__list { margin-top: 16px; }

	/* 5. Our Promise */
	.pw-promise { padding: 56px 12px; }
	.pw-promise__box { padding: 46px 13.5px; }
	.pw-promise__dot { width: 12px; height: 12px; }
	.pw-promise__dot--tl { left: 14px; top: 19px; }
	.pw-promise__dot--tr { right: 14px; top: 19px; }
	.pw-promise__dot--bl { left: 14px; bottom: 19px; }
	.pw-promise__dot--br { right: 14px; bottom: 19px; }
	.pw-promise__title { margin-top: -32px; }
	.pw-promise__title .pw-lead { text-align: left; align-self: stretch; }
	.pw-promise__cards { grid-template-columns: minmax(0, 1fr); gap: 41px; width: 100%; }
	.pw-promise__photo { aspect-ratio: 320 / 208; }
	.pw-promise__desc { min-height: 0; }

	/* 6. Message */
	.pw-message { padding: 56px 20px 50px; }
	.pw-message__bgword { height: 72px; }
	.pw-message__img { width: 100%; margin-top: 0; }
}