…
列に幅指定が無く「中身の分だけの幅」になるため、等分して伸びるようにする。 */
.mt-be-columns {
gap: 20px;
/* stretch（既定値）にすることで列の高さが最も高い列に揃う。
これに .profile-box { height: 100% } を組み合わせて左右の高さを一致させる。 */
align-items: stretch;
}
.mt-be-column {
flex: 1 1 0;
min-width: 0;
}
/* 狭い画面では縦積み（display:flex はインライン指定なので wrap で折り返す） */
@media (max-width: 767px) {
.mt-be-columns {
flex-wrap: wrap;
}
.mt-be-column {
flex-basis: 100%;
}
}
/* 列の中のプロフィールカードは列幅いっぱいに。
height:100% で、文章量が違っても左右のカードの高さが揃う。 */
.mt-be-column .profile-box {
max-width: none;
margin: 0;
height: 100%;
}
/* --- プロフィールカードを横に2つ並べる ---
.profile-row で囲むと2カラム。囲まなければ従来どおり1カラム。
幅が狭いときは自動で縦積みになる。 */
.profile-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin: 2rem 0;
}
/* 並べたときはカード個別の上下マージンを消し、幅の上限も外す */
.profile-row .profile-box {
margin: 0;
max-width: none;
}
/* 2カラムは1枚あたりが狭くなるので、画像を少し小さくして余白を詰める */
@media (min-width: 768px) {
.profile-row .profile-box {
padding-left: 120px; /* 20 + 画像80 + 余白20 */
padding-right: 20px;
min-height: 120px; /* 画像80 + 上下padding40 */
padding-top: 20px;
padding-bottom: 20px;
}
.profile-row .profile-image {
left: 20px;
top: 20px;
width: 80px;
height: 80px;
}
}
/* タブレット以下は縦積み（1枚あたりの幅を確保する） */
@media (max-width: 767px) {
.profile-row {
grid-template-columns: 1fr;
}
}
/* =========================================
吹き出し（インタビュー会話）
向き : .talk--left / .talk--right
背景色: .talk--blue / --orange / --green / --gray（省略時は青）
出力HTML:
-
お名前
…
PC : アイコンが左（右）、吹き出しが横。尻尾は横向き。
スマホ: アイコン＋名前が上の行、吹き出しは画面幅いっぱい。尻尾は上向き。
色はCSS変数で持たせている。色ごとに全ルールを複製せずに済むため。
========================================= */
.talk {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 1.5rem 0;
/* 既定色（青）。色クラスが付いていればそちらで上書きされる。 */
--talk-bg: #F0F8FF;
--talk-ring: #DCEAF8;
--talk-accent: #0156B3;
}
.talk--right {
flex-direction: row-reverse;
}
/* --- 背景色バリエーション --- */
.talk--blue {
--talk-bg: #F0F8FF;
--talk-ring: #DCEAF8;
--talk-accent: #0156B3;
}
.talk--orange {
--talk-bg: #FFF7ED;
--talk-ring: #FFE0B8;
--talk-accent: #C2410C;
}
.talk--green {
--talk-bg: #F0FAF4;
--talk-ring: #CCE9D8;
--talk-accent: #15803D;
}
.talk--gray {
--talk-bg: #ECEFF3;
--talk-ring: #DADEE5;
--talk-accent: #4B5563;
}
/* 話し手（アイコン＋名前） */
.talk__person {
flex-shrink: 0;
width: 84px;
margin: 0;
text-align: center;
}
.talk__face {
display: block;
flex-shrink: 0;
width: 72px;
height: 72px;
margin: 0 auto 6px;
border-radius: 50%;
overflow: hidden;
background: var(--talk-bg);
border: 2px solid var(--talk-ring);
}
.talk__face img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
}
.talk__name {
display: block;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.4;
color: var(--talk-accent);
}
/* 吹き出し本体 */
.talk__text {
position: relative;
flex: 1;
min-width: 0;
margin: 0;
padding: 26px 22px;
border-radius: 16px;
background: var(--talk-bg);
font-size: 1rem;
line-height: 2.1;
color: #111827;
}
.talk__text p {
margin: 0 0 1.15em;
/* custom.css の .prose p { line-height: 1.8 } は p に直接マッチするため、
親（.talk__text）の line-height は継承されない。p にも明示する。 */
line-height: 2.1;
}
.talk__text p:last-child {
margin-bottom: 0;
}
.talk__text strong {
color: var(--talk-accent);
}
/* 尻尾（三角）。border だけで作るので画像は不要。
PCは横向き＝アイコン側に向けて出す。 */
.talk__text::before {
content: '';
position: absolute;
top: 26px;
border-style: solid;
border-color: transparent;
}
.talk--left .talk__text::before {
left: -12px;
border-width: 10px 12px 10px 0;
border-right-color: var(--talk-bg);
}
.talk--right .talk__text::before {
right: -12px;
border-width: 10px 0 10px 12px;
border-left-color: var(--talk-bg);
}
/* --- スマホ：アイコン＋名前を上の行に置き、吹き出しを全幅で使う --- */
@media (max-width: 640px) {
.talk {
display: block;
}
.talk__person {
display: flex;
align-items: center;
gap: 9px;
width: auto;
margin: 0 0 12px;
text-align: left;
}
/* 右向きはアイコンと名前を右寄せ（row-reverse の主軸開始位置が右になる） */
.talk--right .talk__person {
flex-direction: row-reverse;
}
.talk__face {
width: 54px;
height: 54px;
margin: 0;
}
.talk__name {
font-size: 0.875rem;
}
.talk__text {
padding: 23px 17px;
}
/* 尻尾は上向きにして、アイコンの真下から出す */
.talk__text::before {
top: -12px;
border-width: 0 10px 12px 10px;
}
.talk--left .talk__text::before {
left: 17px;
border-right-color: transparent;
border-bottom-color: var(--talk-bg);
}
.talk--right .talk__text::before {
left: auto;
right: 17px;
border-left-color: transparent;
border-bottom-color: var(--talk-bg);
}
}
/* Q&Aブロック */
.qa-block {
margin: 1.5rem 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.qa-q {
display: flex;
align-items: flex-start;
gap: 12px;
background: #EEF4FC;
padding: 14px 18px;
margin: 0;
font-size: 0.9375rem;
font-weight: 700;
color: #111827;
line-height: 1.6;
}
.qa-a {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fff;
padding: 16px 18px;
}
.icon-q {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #0156B3;
color: #fff;
font-size: 0.875rem;
font-weight: 700;
flex-shrink: 0;
font-style: normal;
margin-top: 1px;
}
.icon-a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #FF8C02;
color: #fff;
font-size: 0.875rem;
font-weight: 700;
flex-shrink: 0;
font-style: normal;
margin-top: 1px;
}
.qa-text {
flex: 1;
font-size: 0.9375rem;
color: #111827;
line-height: 1.8;
}
.qa-text p {
margin-bottom: 0.75rem;
}
.qa-text p:last-child {
margin-bottom: 0;
}
/* オレンジ強調テキスト */
.text-orange {
color: #FF8C02;
font-weight: 700;
}
/* ポイントボックス */
.point-box {
background: #fff9f0;
border: 2px solid #FF8C02;
border-radius: 12px;
padding: 20px 24px;
margin: 2rem 0;
}
.point-box-title {
font-size: 1.125rem;
font-weight: 700;
color: #FF8C02;
margin: 0 0 14px;
text-align: center;
}
.point-box ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.point-box li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.9375rem;
color: #111827;
line-height: 1.6;
}
.point-box li::before {
content: '✓';
color: #FF8C02;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
/* 引用（blockquote） */
.prose blockquote {
border-left: none;
border-radius: 12px;
background: #fff;
border: 1px solid #e5e7eb;
padding: 20px 24px 20px 60px;
position: relative;
margin: 2rem 0;
color: #111827;
font-style: normal;
}
.prose blockquote::before {
content: '\201C';
position: absolute;
top: 10px;
left: 16px;
font-size: 3rem;
color: #0156B3;
opacity: 0.3;
font-family: Georgia, serif;
line-height: 1;
}
.prose blockquote p { margin-bottom: 0; }
/* figure / figcaption */
.prose figure {
margin: 2rem 0;
}
.prose figure img {
border-radius: 12px;
margin: 0 0 8px;
}
.prose figcaption {
font-size: 0.8125rem;
color: #6B7280;
text-align: center;
padding-top: 6px;
}