/* ご提供いただいたCSSをそのまま挿入 */ .balloon-container { display: flex; margin-bottom: 20px; align-items: flex-start; /* アバターと吹き出しを上揃えに */ } /* 右側の発言 */ .speaker-right { justify-content: flex-end; /* 右寄せ */ } .speaker-right .speaker-info { order: 2; /* アバターと名前を右に */ margin-left: 10px; text-align: center; } .speaker-right .balloon { order: 1; /* 吹き出しを左に */ background-color: #e0f7ff; /* 水色系 */ border-radius: 10px 0 10px 10px; /* 右上の角を直角に */ position: relative; /* しっぽの位置基準 */ margin-right: 15px; /* しっぽのスペース */ } .speaker-right .balloon::after { /* しっぽ */ content: ''; position: absolute; top: 10px; right: -15px; /* 右側に配置 */ border: 8px solid transparent; border-left: 8px solid #e0f7ff; /* 左向きの三角形 */ } .avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 2px solid #ccc; background-color: #f9f9f9; margin: 0 auto 5px; box-sizing: border-box; position: relative; } .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: table; position: absolute; top: 0; bottom: 0; margin: auto; } .avatar:has(img[alt="リサ"]) { border-color: #ffbae3; } /* 左側の発言 */ .speaker-left { justify-content: flex-start; /* 左寄せ */ } .speaker-left .speaker-info { order: 1; /* アバターと名前を左に */ margin-right: 10px; text-align: center; } .speaker-left .balloon { order: 2; /* 吹き出しを右に */ background-color: #f0f0f0; /* グレー系 */ border-radius: 0 10px 10px 10px; /* 左上の角を直角に */ position: relative; /* しっぽの位置基準 */ margin-left: 15px; /* しっぽのスペース */ } .speaker-left .balloon::after { /* しっぽ */ content: ''; position: absolute; top: 10px; left: -15px; /* 左側に配置 */ border: 8px solid transparent; border-right: 8px solid #f0f0f0; /* 右向きの三角形 */ } /* 香子のアバター枠色 */ .speaker-left .avatar:has(img[alt="香子"]) { border-color: #cccccc; } /* 青井 春のアバター枠色 */ .speaker-left .avatar:has(img[alt="青井 春"]) { border-color: #ffce00; } /* ハート */ .balloon.heart { background-color: #D169B8; color: white; } .speaker-left .balloon.heart::after { border-right-color: #D169B8; } .speaker-info { flex-shrink: 0; width: 80px; } .name { font-size: 12px; color: #555; font-weight: bold; } .balloon { padding: 0 20px 15px; max-width: calc(100% - 130px); box-sizing: border-box; } .balloon p { margin: 0 0 10px 0; font-size: 16px; } .balloon p:last-child { margin-bottom: 0; } .balloon p[style*="font-size:11px"], .balloon p[style*="font-size:12px"] { font-size: smaller; } /* 中央の画像 */ .center-image { display: table; margin: 30px auto; max-width: 100%; height: auto; border: 1px solid #ccc; text-align: center; box-sizing: border-box; } .center-image img { max-width: 100%; height: auto; display: table; } 香子 香子 一ノ瀬さん、いよいよ41類だね！ 41類担当はどんな人なんでしょう？わくわく！ リサ リサ 香子 香子 一ノ瀬さんはどんな人に来て欲しい？ う～ん…個人的にはちょっと悪い感じのタイプがいいなあ！ リサ リサ 香子 香子 え～？どういうこと？ ほら、ちょっと悪ぶっているっていうか…やんちゃ系みたいな♪ リサ リサ 香子 香子 例えば不良系ってこと？ そうそう！不良が雨の中、子猫を保護する的な！ リサ リサ 香子 香子 一ノ瀬さんベタすぎ～！ いいんですよ～！一見やんちゃで実は優しいとかギャップ萌えしちゃう！ リサ リサ 青井 春 青井 春 例えば俺みたいな～？ そうそう！君みたいな感じ♪ リサ リサ 青井 春 青井 春 ・・・・・ ・・・・・ リサ リサ …って誰！！？ 香子 香子 青井 春 青井 春 青井 春（あおい はる）でーす！よろしく～♪ 香子 香子 え～っと… 青井 春 青井 春 あれ？今日ってTMB45のインタビューだよね？ え！じゃああなたが41類担当！？ リサ リサ 青井 春 青井 春 うん！よろしく～！ 香子 香子 びっくりして、お名前全然聞いてなかった…。もう一度お願いします。 青井 春 青井 春 青井 春です！ あおい はるくん？ リサ リサ 青井 春 青井 春 うん！あ、アオハルって呼んでね！ 香子 香子 あ、アオハルくん？ 青井 春 青井 春 うん！友達からそう呼ばれてるんだ！ 青井 春くんだから、アオハルなんだね！ リサ リサ 青井 春 青井 春 いえす！ ねえねえ、アオハルって高校生だよね？ リサ リサ 青井 春 青井 春 うん、高2だよ★ もしかして、アオハルってやんちゃ系～？ リサ リサ 香子 香子 一ノ瀬さん！？ 悪い意味ではなくて！恰好が今どきだなあって！ リサ リサ 青井 春 青井 春 へへへ！ 香子 香子 でも、アオハルくんの制服って全国の中でも指折りの名門校だよね？ え！そうなの！？ リサ リサ 青井 春 青井 春 いやいや、それほどでも…あるかな？（笑） 香子 香子 うん。中高一貫の男子校で、偏差値がものすごいって聞いたことある…。 そうなんだ！じゃあ、アオハルは勉強ばっかりしているの？ リサ リサ 青井 春 青井 春 そんなことないよ～（笑） 香子 香子 じゃあアルバイトとか？ 青井 春 青井 春 ううん。最近は、起業家のためのセミナーに通ってるよん！ き、起業家のためのセミナー！！？ リサ リサ 香子 香子 まだ高校生なのに…。 青井 春 青井 春 へへへ！ どうして起業家のためのセミナーに通っているの？ リサ リサ 青井 春 青井 春 俺、将来イベント運営の会社を立ち上げたいんだ！ 香子 香子 へえ！なにかきっかけがあったんですか？ 青井 春 青井 春 実は去年の学園祭のときに、実行委員に選ばれちゃってさあ…最初は面倒だなあ～って思いながら参加してたんだよね。 ふむふむ！ リサ リサ 青井 春 青井 春 でもやっていく中で、形になっていく過程とかに面白さを感じてさ！みんなに楽しいって思ってもらえるようなイベントを運営したいなって思ったんだ～！ 香子 香子 なるほど！ 青井 春 青井 春 あ、もちろん楽しいだけじゃなくて社会的意義のあるイベントも運営する予定だよ！ 香子 香子 それって例えばどんなイベントですか？ 青井 春 青井 春 例えば、捨て猫の里親探しとか！ 青井 春 青井 春 俺、猫好きで捨てられてる猫見ると見逃せないんだよね。実家では飼えないから、SNSで里親を探してるんだけど、それも限界を感じてて…だから里親探しのイベントとかは絶対やりたいんだ。 アオハル優しい…雨の中子猫を保護するやんちゃ系… リサ リサ 青井 春 青井 春 うん？ 香子 香子 いやいや、気にしないで！ 青井 春 青井 春 まあ、そういうわけでセミナー通いまくってるんだよ！ そうなんだ！ リサ リサ 青井 春 青井 春 俺、41類担当だしちょうどいいかな！っても思って（笑） 香子 香子 ん？ ん？？ リサ リサ 青井 春 青井 春 あれ？言ってなかったっけ？俺の担当する41類は各種学校・セミナー、イベントの運営などの区分なんだよ♪ アオハルにぴったりだね！ リサ リサ 香子 香子 うん！そうだね！ 青井 春 青井 春 へへへ♪ぜひ41類を覚えてね！ 香子 香子 もちろんです！では、アオハルくんから一言お願いします！ 青井 春 青井 春 どもども！TMB45で41類を担当している青井 春（あおい はる）です！俺が担当する41類は各種学校・セミナー、イベントの運営、運動・娯楽施設の提供、各種物品の貸与、翻訳、電子出版物の提供などだよ！是非覚えてね♪ アオハル、今どきの子だから何話していいかわからなくて最初不安でしたけど… リサ リサ 香子 香子 うんうん 将来のことちゃんと考えているし、すごくしっかりしてますよね！ リサ リサ 香子 香子 うん！そうだね！ 捨て猫を拾っちゃう話とか…めちゃめちゃ良い（４１）子… リサ リサ 香子 香子 ・・・・。 やんちゃ風の実は良い子、かなりツボですこれからは、アオハルを一番に推していきます！ リサ リサ 香子 香子 ・・・・。 青井 春 青井 春 ありがと♪これからもTMB45を応援してね～！ 青井 春 次は42類！42類を担当するのは、設計の達人！！？ ライター ライター TMB45メンバー一覧はこちら https://brandsecurity.gmo/blog/2020/01/10/l635ri-54_2/ お問い合わせこちら
.svg){kind=small}
