）にメインコンセプトと同じ見た目を適用 */
.main-concept,
.content-body p {
font-size: 16px; /* .main-concept に合わせる */
line-height: 3; /* 読点間を広めに */
text-indent: 1em; /* 1字下げ */
}
/* 日本語の折返しを安定化（右カラム/本文ともに） */
.right-column,
.content-body {
word-break: normal; /* keep-all を打ち消し */
overflow-wrap: anywhere; /* 長い英数やURLも折り返す */
line-break: strict; /* 日本語の禁則処理を考慮 */
}
/* 画像の上下余白: クラス名の表記ゆれを修正（.content-Body → .content-body） */
.content-body img,
.wp-block-image img {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* スマホでは情報密度を上げて読みやすく（任意: PCと完全一致を崩さない範囲） */
@media (max-width: 768px){
.main-concept,
.content-body p {
line-height: 1.8;
text-indent: 0;
}
}
.gallery-archive {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.gallery-item {
width: calc(50% - 30px); /* 2列レイアウト */
height: 800px;
background-size: cover;
background-position: center;
position: relative;
margin-bottom: 20px;
overflow: visible; /* はみ出し表示を許可（デフォルトでもOKだが明示） */
}
.gallery-thumbnail-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.gallery-item.offset {
margin-top: 200px; /* 上下にずらす */
}
.gallery-info {
position: absolute;
width: 100%;
padding: 20px;
z-index: 2;
color: #fff;
text-align: left;
}
.left-column {
top: -200px; /* 上に配置 */
}
/* ★ここを差し替え */
.right-column {
bottom: -220px; /* 画像内の下端から余白 */
right: -100px; /* 画像内の右端から余白 */
left: auto; /* 念のため左固定を解除 */
width: auto;
max-width: min(100%, 460px); /* テキスト行幅を抑える */
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-end; /* 右端で揃える */
gap: 6px;
color: #111; /* 右下は明るい背景が多い想定なので黒文字 */
}
/* 右列内の表示順：概要 → サブタイトル → タイトル（タイトルを一番下に） */
.right-column .excerpt { order: 1; margin: 0; line-height: 1.6; }
.right-column .project-subtitle { order: 2; margin: 0; opacity: .85; font-size: 0.95rem; }
.right-column .project-title { order: 3; margin: 0; }
.right-column .project-title a { color: #111; text-decoration: none; }
.project-title a {
color: black;
text-decoration: none;
font-size: 20px;
}
.project-title a:hover {
color: lightgray;
}
/* Pagination */
.pagination {
display: flex;
justify-content: space-between;
padding: 20px;
}
.pagination-left {
display: flex;
gap: 5px;
}
.pagination-right {
display: flex;
gap: 5px;
}
.page-number {
color: #666;
}
.pagination a {
text-decoration: none;
color: #999;
}
.pagination a:hover {
color: #333;
}
.pagination .current {
color: #000;
font-weight: bold;
}
.pagination .prev, .pagination .next {
font-weight: normal;
color: #999;
}
.pagination .prev.disabled, .pagination .next.disabled {
color: #ccc;
}
/* === Works Archive: スマホは1カラム === */
@media (max-width: 768px) {
/* 1列化 + 間隔 */
.gallery-item {
width: 100%;
height: 60vh; /* 長すぎ防止。好みで 50–70vh 程度に */
margin-bottom: 24px;
}
/* 交互の段差を解除 */
.gallery-item.offset { margin-top: 0; }
/* タイトル等は下辺に揃えて読みやすく */
.gallery-info {
position: absolute;
left: 16px;
right: 0;
bottom: 16px; /* 常に下配置 */
width: 100%;
padding: 16px;
z-index: 2; /* サムネ用リンク(z-index:1)より前 */
text-align: left;
}
.project-title a {
text-shadow:
0 0 6px rgba(255,255,255,.95), /* 強めの白ぼかし */
0 0 12px rgba(255,255,255,.7); /* 外側にもう一段 */
}
.excerpt,
.project-subtitle {
font-size: 12px;
color: rgb(0, 0, 0);
text-shadow:
0 0 6px rgb(255, 255, 255), /* 強めの白ぼかし */
0 0 12px rgb(255, 255, 255); /* 外側にもう一段 */
}
/* PC用の個別オフセットを打ち消す */
.left-column { top: auto; }
.right-column {
bottom: 0;
right: auto;
left: 0;
max-width: 100%;
align-items: flex-start;
}
}
/* ==== Works: スマホ最適化 追加パッチ ==== */
@media (max-width: 768px){
/* 1) ヘッダー2カラムを縦積み＆順序最適化 */
.gallery-header{ flex-direction: column; gap: 5px; padding: 0 16px; }
.left-column, .right-column{ width:100%; margin:0%; padding:0px; }
.left-column, .right-column{ display:flex; flex-direction: column; }
.project-title{ order:1; font-size: clamp(22px, 6vw, 28px); line-height:1.25; margin: 6px 0 2px; }
.project-subtitle{ order:2; font-size: clamp(13px, 3.6vw, 16px); margin: 0 0 8px; }
.excerpt{ order:3; width:auto; margin: 0 0 0; }
/* 3) コンセプト本文の行間を詰める */
.main-concept,
.content-body p { font-size: 15px;
line-height: 1.4;
padding:12px;
text-indent: 1em;
word-break: normal;
line-break: strict;
color: #000; }
}
/* =================================
作品一覧 スマホ表示調整
================================= */
@media (max-width: 768px) {
/* ヘッダー：検索フォームを非表示にし、カテゴリータブを中央寄せ */
.archive-header {
justify-content: center;
padding: 20px 16px;
}
.archive-header .archive-search-form {
display: none;
}
/* 各作品情報のコンテナをFlexboxに設定 */
.gallery-info {
display: flex;
flex-direction: column;
}
/* 表示順序を指定： 1.タイトル → 2.サブタイトル → 3.概要 */
.gallery-info .project-title {
order: 1;
margin-right: 16px;
}
.gallery-info .project-subtitle {
order: 2;
margin-top: 4px; /* タイトルとの間に少し余白を追加 */
}
.gallery-info .excerpt {
order: 3;
text-indent: 0;
margin-left: 16px;
margin-top: 8px; /* サブタイトルとの間に少し余白を追加 */
}
}
/* 6) PHP側の content-body に合わせてクラス名を補完（PC/スマホ共通） */
.content-body img{
margin-top:0 !important;
margin-bottom:0 !important;
display:block;
width:100%;
height:auto;
}
/* メンバーページのスタイル */
/* メンバー一覧のレイアウト */
/* ヘッダーやフッターと同じ左右余白（例：50px）に合わせる */
.members-archive {
width: calc(100% - 100px); /* 両側50pxずつの余白を確保 */
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
padding: 20px 0;
}
/* 各メンバーを縦並びに配置 */
.member-row {
margin-bottom: 40px; /* 下部余白 */
}
/* 黒い台形 */
.member-trapezoid {
position: relative;
width: 100%;
height: 180px; /* お好みで台形の高さを調整 */
background: #000; /* 黒塗り */
color: #fff;
display: flex; /* 左右に並べる */
align-items: center;
/* 台形の形状（右側を尖らせる例）*/
clip-path: polygon(
0 0, /* 左上 */
75% 0, /* 右上手前 */
80% 100%, /* 右下手前 */
0 100% /* 左下 */
);
/* 波打ちアニメーションを適用 */
animation: waveTrapezoid var(--wave-duration, 3s) ease-in-out infinite;
animation-delay: var(--wave-delay, 0s);
}
/* 画像を左半分、テキストを右半分に */
.member-photo-area {
width: 40%; /* 左側写真領域 */
height: 100%;
display: flex;
align-items: left;
justify-content: left;
overflow: hidden;
}
.member-photo {
width: auto;
height: 100%;
object-fit: cover;
}
.member-info-area {
width: 60%; /* 右側テキスト領域 */
display: flex;
flex-direction: column;
justify-content: left;
text-align: left; /* 左寄せ */
}
.member-role {
font-size: 1rem;
color: #ccc;
}
.member-name {
padding-top: 8px;
align-self: flex-start;
font-size: 1.2rem;
}
.member-name a {
color: inherit; /* 親の色（白）を継承 */
text-decoration: none;/* リンクの下線を消す（必要に応じて追加） */
}
.member-name a:hover {
text-decoration: underline;
}
/* 台形の右上と右下頂点を左右に動かすアニメーション */
@keyframes waveTrapezoid {
0% {
clip-path: polygon(0 0, 75% 0, 80% 100%, 0 100%);
}
50% {
/* 右上が 78% 0、右下が 77% 100% に移動（左右の動きのみ） */
clip-path: polygon(0 0, 77% 0, 78% 100%, 0 100%);
}
100% {
clip-path: polygon(0 0, 75% 0, 80% 100%, 0 100%);
}
}
/* メディアクエリでスマホ対応 */
@media (max-width: 768px) {
.member-trapezoid {
height: 140px;
}
.member-photo-area {
width: 40%;
}
.member-info-area {
width: 60%;
}
}
/* ===== Members archive: mobile optimization ===== */
@media (max-width: 768px){
/* ページ左右の50px余白をリセットして全幅に */
.members-archive{
width: 100%;
margin: 24px 0 0;
padding: 0 16px;
}
.member-row{ margin-bottom: 20px; }
/* 台形はカード化：高さ可変、角丸、アニメ停止で読みやすく */
.member-trapezoid{
position: relative;
height: auto;
padding: 12px;
clip-path: none;
animation: none;
}
/* 画像 → テキストの縦積み */
.member-photo-area{
width: 100%;
height: auto;
margin-bottom: 8px;
display: block; /* 念のため上書き */
}
.member-photo{
width: 100%;
height: auto;
aspect-ratio: 4 / 3; /* サムネ比率を統一（好みで 1/1 でもOK） */
object-fit: cover;
display: block;
border-radius: 8px;
}
.member-info-area{
width: 100%;
padding: 4px 2px 0;
display: block;
text-align: left;
}
/* タイポグラフィ（指で読めるサイズに） */
.member-role{
font-size: clamp(12px, 3.2vw, 14px);
color: #ccc;
}
.members-archive .member-name{
font-size: clamp(16px, 5.6vw, 20px);
margin: 2px 0 0;
}
.members-archive .member-name a{
display: inline-block;
padding: 6px 0; /* タップ領域を拡大 */
}
}
/* 端末の“簡易表示”設定に追従してアニメ無効化 */
@media (prefers-reduced-motion: reduce){
.member-trapezoid{ animation: none !important; }
}
/* （任意）カード全体をクリック可能にする場合に使う */
.member-card{
display: block;
text-decoration: none;
color: inherit;
}
/* ドラクエ風のメンバーページスタイル */
.dq-status.dq-dark {
background-color: #222; /* 背景黒 */
color: #fff; /* 文字色を白 */
padding: 20px;
display: flex; /* 左右に分けるためのflex */
gap: 20px; /* 左箱と右箱の間 */
border: 2px solid #555; /* 全体の外枠(お好みで) */
}
/* 左ボックス：名前&写真 */
.left-box {
flex: 0 0 300px; /* 幅固定 or お好みで */
border: 1px solid #fff; /* 四角い枠(白線) */
padding: 15px;
display: flex; /* 縦方向に積む */
flex-direction: column;
align-items: center; /* 中央寄せ(任意) */
}
.member-name {
margin: 0 0 10px;
text-align: center;
font-size: 1.2em;
/* ほかドラクエ風フォントなど */
}
.photo-box {
width: 100%;
border: 1px solid #fff; /* 内側の写真枠 */
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.photo-box img {
max-width: 100%;
height: auto;
}
/* 右ボックス全体 */
.right-box {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 20px; /* 上下の枠同士の余白 */
}
/* 自己紹介を囲む枠 */
.intro-box {
border: 1px solid #fff;
padding: 15px;
}
/* 趣味などを囲む枠 */
.meta-box {
border: 1px solid #fff;
padding: 15px;
}
.meta-box ul {
margin: 0;
padding: 0;
list-style: none;
}
.meta-box li {
margin-bottom: 8px;
}
/* 初期状態: 非表示 */
#detail-container {
background-color: #222; /* 背景色 */
color: #fff;
border: 1px solid #fff;
padding: 15px;
margin-top: 20px;
transform: scale(0); /* 縮小状態 */
opacity: 0; /* 非表示 */
transform-origin: center; /* 中心を基点に拡大/縮小 */
transition: transform 0.4s ease, opacity 0.4s ease; /* アニメーション効果 */
}
/* 表示状態（拡大して表示） */
#detail-container.show {
transform: scale(1); /* 拡大 */
opacity: 1; /* 表示 */
}
/* 非表示状態（縮小して消える） */
#detail-container.hide {
transform: scale(0); /* 縮小 */
opacity: 0; /* 非表示 */
}
/* スマホ対応 (幅が狭いときは縦並びに) */
@media (max-width: 768px) {
.dq-status.dq-dark {
flex-direction: column;
}
.left-box {
margin-bottom: 20px;
flex: none; /* 幅固定を解除したい場合 */
}
}
/* detail-toggle: デフォルトの状態 */
.detail-toggle {
text-decoration: underline; /* 下線を付ける */
color: #ffffff; /* 青系の文字色（任意） */
cursor: pointer; /* 指アイコンに変える */
transition: color 0.2s; /* カーソル時の色変化をスムーズに */
}
/* detail-toggle: ホバー時 */
.detail-toggle:hover {
color: #ffffffa9; /* 少し濃い色に変える（任意） */
text-decoration: none; /* 下線を一時的に消す */
}
/* メンバー一覧の名前（リスト専用） */
.members-container .member-name {
color: #000; /* 黒文字に設定 */
font-weight: bold; /* 太字（任意） */
text-align: center; /* 中央揃え（任意） */
margin-top: 10px; /* 適宜調整 */
font-size: 1em; /* 適切なサイズ */
}
/* 個別ページ（dq-dark の中）専用の名前スタイル */
.dq-dark .member-name {
color: #fff; /* 白文字 */
font-weight: bold;
}
/* ここまでがメンバーページのスタイル */
/* 私たちについてページのスタイル */
/* =========================
1) 全体レイアウト関連
========================= */
html, body {
margin: 0;
padding: 0;
background: #fff;
overflow-x: hidden; /* 横スクロールが出ないように */
}
.container-fluid.content {
position: relative;
z-index: 10;
/* 背景より前面に表示したいのでz-indexを高くする。
#floating-bgを後ろに配置する想定 */
}
.main {
position: relative;
padding: 80px 20px;
z-index: 11;
}
/* タイトルや記事コンテンツのスタイリングはお好みで */
.content-Title {
font-size: 2rem;
margin-bottom: 2rem;
}
/* =========================
2) 背景の円アニメーション用
========================= */
#floating-bg {
position: fixed; /* ページをスクロールしても常に画面全体を覆う */
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 1;
pointer-events: none;
/* マウスイベントを拾わないようにしておく */
}
/* 円に付与するクラス例。JSから動的に作ってもいいし、あらかじめ複数作ってもいい */
.floating-circle {
position: absolute;
background-color: rgba(0, 102, 255, 0.021); /* 青系で透明感あり */
border-radius: 50%;
transition: all 8s ease; /* なめらかな移動 */
}
/* 円がひとつのかたまりになって中央付近に集まるときのクラス */
.circle-cluster {
left: 50%!important;
top: 50%!important;
transform: translate(-50%, -50%) scale(2);
background-color: rgba(0, 102, 255, 0.284);
transition: all 8s ease;
}
/* =========================
3) コンテンツが段階的に表示
========================= */
.about-content p.visible {
opacity: 1;
transform: translateY(0); /* 元の位置 */
transition: opacity 1s ease, transform 1s ease;
}
/* JSがページ読み込み時に付与するクラス */
.about-content p.prepare-animation {
opacity: 0;
transform: translateY(200px);
}
/* スマホだけ薄くする */
@media (max-width: 768px) {
.content-Title,
.content-Body {
z-index: 2000;
/* ふわっと白いグロー */
text-shadow: 0 1px 2px rgba(255,255,255,.7),
0 0 6px rgba(255,255,255,.5);
}
.floating-circle {
background-color: rgba(0, 102, 255, 0.007); /* ← 透明度を下げる（薄く） */
}
.circle-cluster {
left: 10%!important;
top: 10%!important;
background-color: rgba(0, 102, 255, 0.001); /* ← 集合時も薄く */
}
}
@media (max-width: 768px){
.about-content p {
opacity: 0;
transform: translateY(200px); /* 下から表示 */
transition: opacity 1s ease, transform 1s ease;
}
.about-content p.visible {
opacity: 1;
transform: translateY(0); /* 元の位置 */
}
.about-content {
opacity: 1 !important;
transform: none !important;
}
}
/* ここまでが私たちについてページのスタイル */
/* =================================
設計の流れページ：Lottie横スクロール (構文修正版)
================================= */
/* 横スクロール全体 */
.design-flow-container {
width: 95vw;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.design-flow-title {
text-align: center;
font-size: 2rem;
margin: 20px 0;
}
/* 横スクロールのラッパ */
.design-flow-steps-wrapper {
display: flex;
flex-direction: row;
/* width: 100vw; は削除 (Edgeの不具合対応) */
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Firefox用 */
}
/* Edge, Chrome, Safari 用のスクロールバー非表示 */
.design-flow-steps-wrapper::-webkit-scrollbar {
display: none;
}
/* ▼ [変更] ステップ内のレイアウトと隙間を調整 */
.design-step {
flex: 0 0 80vw;
display: flex;
align-items: center;
justify-content: center; /* Lottieとテキストのブロック全体を中央に */
gap: 1vw; /* Lottieとテキストの間の隙間 (ここの数値で調整) */
height: 100%;
opacity: 1;
}
/* イントロダクション用のステップ調整 */
.design-step.design-step-intro {
justify-content: center;
align-items: center;
text-align: center;
}
.design-step.design-step-intro .lottie-container {
display: none;
}
.design-step.design-step-intro .step-description {
opacity: 1;
transform: none;
max-width: 600px;
margin-right: 0;
}
.design-step.design-step-intro .step-description strong {
display: block;
font-size: 1.25em;
margin-bottom: 0.75em;
line-height: 1.4;
color: #111;
}
/* ▼ [変更] Lottieコンテナのサイズとマージンを調整 */
.lottie-container {
width: 45vw; /* Lottieの幅を調整 (旧 70vw) */
height: 70%; /* ご要望の高さ */
margin-left: 100px; /* マージンをリセット (旧 50px) */
margin-bottom: 0px;
flex-shrink: 0; /* 縮まないように */
}
/* ▼ [変更] テキストのマージンを調整 */
.step-description {
max-width: 450px; /* テキストの最大幅 (旧 500px) */
margin-right: 0; /* マージンをリセット (旧 50px) */
text-align: left;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
word-break: keep-all;
overflow-wrap: break-word;
flex-shrink: 0; /* 縮まないように */
}
.step-description.show {
opacity: 1;
transform: translateY(0);
}
/* 「ご期待いただけること」のスタイル (Tips風) */
.step-expectations {
margin-top: 1.5em;
font-size: 0.85em;
color: #333;
background-color: #fdfaf5; /* 薄いベージュ */
border-radius: 8px; /* 角丸 */
padding: 1.25em; /* 内側余白 */
}
.step-expectations h4 {
font-size: 1em;
font-weight: bold;
margin: 0 0 0.5em 0;
color: #111;
}
.step-expectations p {
font-size: 1em;
line-height: 1.6;
margin: 0;
}
/* =================================
PC表示 (769px以上)
================================= */
@media (min-width: 769px) {
.design-flow-container {
/* (1) コンテナをヘッダー下からフッター上までの高さに */
height: calc(100vh - var(--header-height, 80px));
min-height: 600px;
/* (2) [変更] コンテナ自体をFlexコンテナ(縦積み)にする */
display: flex;
flex-direction: column;
}
/* (3) [変更] タイトルは高さを自動にし、縮まないように */
.design-flow-title {
flex-shrink: 0;
}
/* (4) [変更] 横スクロールラッパーが残りの高さいっぱいまで広がる */
.design-flow-steps-wrapper {
height: auto; /* 従来の 100% を解除 */
flex-grow: 1; /* 残りのスペースを埋める */
min-height: 0; /* flex-grow と height:auto を併用する際のハック */
}
}
/* =================================
設計の流れページ：スマホ対応 (768px以下)
================================= */
@media (max-width: 768px) {
/* スマホ用の .design-flow-container や .design-step などの
スタイル指定は、すでにこの @media ブロック内に
正しく配置されているため、変更ありません。
(そのままお使いください)
*/
.design-flow-container {
width: auto;
height: auto;
overflow: visible;
overflow-y: auto;
min-height: 0;
}
.design-flow-title {
font-size: 1.5rem;
margin: 30px 0 40px;
padding: 0 1rem;
}
.design-flow-steps-wrapper {
flex-direction: column;
overflow-x: visible;
scroll-snap-type: none;
height: auto;
width: 100%;
}
.design-step {
flex-direction: column;
width: 100%;
height: auto;
padding: 0 1.5rem;
margin-bottom: 4rem;
}
.design-step.design-step-intro {
text-align: left;
}
.design-step.design-step-intro .step-description {
max-width: 100%;
}
.design-step.design-step-intro .step-description strong {
font-size: 1.15em;
}
.lottie-container {
width: 100%;
max-width: 450px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5rem;
}
.step-description {
max-width: 100%;
text-align: left;
margin-right: auto;
}
.step-description h2 {
font-size: 1.25rem;
line-height: 1.5;
}
.step-description p {
font-size: 1rem;
line-height: 1.8;
}
.step-expectations {
margin-top: 1.25em;
font-size: 0.9em;
padding: 1.15em;
}
}
/* AI×BIMページのスタイル */
/* ==========================================================
1️⃣ 基本設定（色・フォント・リセット）
========================================================= */
:root {
/* 色調整 */
--color-bg : #f9fafb; /* ページ背景 */
--color-main : #3c4650; /* 主なテキストカラー */
--color-accent : #827581; /* アクセントカラー*/
--color-muted : #a695a5; /* ミュートテキスト */
--color-shadow : rgba(0, 0, 0, 0.12);
--color-border : #e1e4e8;
/* フォントサイズ（rem） */
--fs-base : 16px;
--fs-lg : 2rem; /* 32px */
--fs-md : 1.5rem; /* 24px */
--fs-sm : 0.875rem;/* 14px */
/* フォントファミリ（Google Fonts: Inter）*/
--ff-base : 'Inter', -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial,
sans-serif;
}
/* ベースリセット */
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0; padding: 0;
font-family: var(--ff-base);
font-size: var(--fs-base);
line-height: 1.6;
color: var(--color-main);
background-color: var(--color-bg);
}
/* リンク */
a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
/* コンテナ共通設定 */
.container-fluid.content {
width: 100%;
margin: 0 auto;
padding: 0 1rem; /* デフォルトは 1rem の左右余白 */
}
/* 全体レイアウト */
.aibim-summary-container {
width: 100%;
margin: 0 auto;
max-width: 1200px; /* 適宜調整 */
padding: 0 20px;
}
/* 各セクションの余白（スマホでは 60px、デスクトップで 100px） */
.aibim-section {
margin-bottom: clamp(4rem, 6vw + 3rem, 7rem);
padding-top: 1.5rem; /* ヘッダー固定時に隙間が生じないよう調整 */
}
/* セクションタイトル（h2） */
.aibim-section h2 {
font-size: var(--fs-lg);
margin-bottom: 0.75rem;
position: relative;
color: var(--color-main);
text-transform: uppercase;
letter-spacing: 1px;
}
/* タイトルの下に下線 */
.aibim-section h2::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: black;
margin: 0.5rem auto 0;
}
/* ==========================================================
3️⃣ サービス一覧
========================================================= */
.services-grid {
display: grid;
gap: clamp(1rem, 2vw + 0.5rem, 2rem);
/* 画面幅に応じて列数を自動調整 */
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* サービスカード（既存 .service-item） */
.service-item {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 8px var(--color-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
padding: 1rem;
height: 100%;
}
/* ホバー時のエフェクト */
.service-item:hover,
.service-item:focus-within {
transform: translateY(-5px);
box-shadow: 0 8px 16px var(--color-shadow);
}
/* サムネイル（画像） */
.service-thumb img {
width: 100%;
height: auto;
border-radius: 6px;
object-fit: cover;
aspect-ratio: 4/3; /* 高さを固定で縦横比維持 */
margin-bottom: 0.75rem;
}
/* タイトル・抜粋 */
.service-item h3 {
font-size: var(--fs-md);
margin: 0 0 0.5rem 0;
}
.service-item p {
flex-grow: 1; /* テキストが長い場合でもカードの高さを揃える */
color: var(--color-muted);
}
/* 詳細リンク（→詳細ページへ） */
.service-item a {
margin-top: 1rem;
align-self: start;
font-weight: bold;
color: var(--color-accent);
}
/* =======================================
1) 左からフェードインする基本アニメーション
======================================= */
.fade-in {
opacity: 0; /* 初期状態：非表示 */
transform: translateX(-30px); /* 左に少しズレた状態 */
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.show {
opacity: 1;
transform: translateX(0);
}
/* ==========================================================
8️⃣ 固定ヘッダー
========================================================= */
#scroll-header {
position: fixed;
top: 0; left: 0; right: 0;
background: #fff;
border-bottom: 1px solid var(--color-border);
z-index: 9999;
transition: transform 0.4s ease;
box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
#scroll-header.hide {
transform: translateY(-100%);
}
/* ===== 事例カルーセル（Owl） ===== */
/* カードの影・ベース */
.shadow-effect{
background:#ffffff00;
padding:16px;
border-radius:12px;
border:1px solid #ececec00;
text-align:left;
transition: transform .25s ease, box-shadow .25s ease;
}
.shadow-effect:hover{
transform: translateY(-2px);
}
/* 画像のアスペクト統一（16:9） */
.case-thumb{
position:relative;
width:100%;
aspect-ratio:16/9;
overflow:hidden;
border-radius:10px;
background:#f5f6fa;
}
.case-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* テキスト */
.case-body{ padding:12px 4px 0; }
.case-title{
font-size:1rem;
line-height:1.4;
margin:0 0 .25rem;
color:var(--color-main, #222);
}
.case-excerpt{
font-size:.9rem;
color:var(--color-text-sub, #555);
margin:0;
}
/* 中央のスライドを少し強調 */
#cases-carousel .item{
opacity:.6;
transform: scale3d(.92,.92,1);
transition: all .3s ease-in-out;
padding: 12px; /* スライド間余白（marginと併用） */
}
#cases-carousel .owl-item.active.center .item{
opacity:1;
transform: scale3d(1,1,1);
}
/* ドット（ページネーション） */
#cases-carousel.owl-carousel .owl-dots{
margin-top:12px;
text-align:center;
}
#cases-carousel.owl-carousel .owl-dots .owl-dot span{
width:10px; height:10px; margin:0 6px;
background: #cfd8dc; display:inline-block; border-radius:50%;
transition:all .25s ease;
}
#cases-carousel.owl-carousel .owl-dots .owl-dot.active span,
#cases-carousel.owl-carousel .owl-dots .owl-dot:hover span{
background: var(--color-accent, #3190E7);
transform: scale(1.25);
}
/* ナビ（前後） */
#cases-carousel .owl-nav{
position:relative; margin-top:20px;
}
#cases-carousel .owl-nav button{
position:absolute; top:-52px;
width:36px; height:36px; border-radius:9999px;
background:#fff !important; border:1px solid #e0e0e0;
box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
#cases-carousel .owl-nav .owl-prev{ right:56px; }
#cases-carousel .owl-nav .owl-next{ right:12px; }
.owl-prev-icon, .owl-next-icon{
display:block; width:100%; height:100%;
}
.owl-prev-icon::before, .owl-next-icon::before{
content:''; position:absolute; top:50%; left:50%;
width:8px; height:8px; border-top:2px solid #333; border-right:2px solid #333;
transform-origin:center; transform: translate(-50%,-50%) rotate(225deg);
}
.owl-next-icon::before{ transform: translate(-50%,-50%) rotate(45deg); }
/* ==========================================================
5️⃣ 料金表（テーブル）
========================================================= */
/* ===== ページ固有（必要ならIDは差し替え） ===== */
body.page-id-468 .aibim-pricing__intro{
max-width: 740px; /* 行長を揃える */
margin-left: 0; /* 左寄せ */
margin-right: auto;
text-align: left !important;
line-height: 1.9;
color: #6b7280;
}
/* ===== AI×BIM 料金表：カード風・読みやすさ重視 ===== */
.aibim-pricing{
--line:#eaeaea;
--muted:#6b7280; /* サブテキスト */
--radius:14px;
--shadow:0 10px 24px rgba(0,0,0,.05);
font-feature-settings: "palt" 1;
}
.aibim-pricing__title{
font-size:1.7rem;
margin:.6rem 0 .6rem;
padding-bottom:.4rem;
border-bottom:1px solid var(--line);
}
.aibim-pricing__intro{
max-width:740px;
margin:0 0 1.25rem;
color:var(--muted);
line-height:1.9;
text-align:left; /* 料金表のリードも左寄せ */
}
/* テーブルを“行＝カード”にする */
.aibim-pricing__table{
width:100%;
border:0;
border-collapse:separate;
border-spacing:0 14px; /* 行間にスペース */
background:transparent;
}
.aibim-pricing__table thead th{
background:#fafafa;
border:1px solid var(--line);
border-radius:10px;
padding:.7rem .9rem;
font-weight:600;
}
.aibim-pricing__table tbody tr{
/* 各行をカードっぽく */
box-shadow:var(--shadow);
}
.aibim-pricing__table tbody th,
.aibim-pricing__table tbody td{
background:#fff;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:1rem 1.1rem;
vertical-align:top;
}
.aibim-pricing__table tbody th{
width:32%;
border-left:1px solid var(--line);
border-right:0; /* 右側の境界は消す */
border-top-left-radius:var(--radius);
border-bottom-left-radius:var(--radius);
}
.aibim-pricing__table tbody td{
border-right:1px solid var(--line);
border-left:0; /* 左側の境界は消す */
border-top-right-radius:var(--radius);
border-bottom-right-radius:var(--radius);
}
/* 左カラム（プラン名） */
.aibim-pricing__plan-name{
font-weight:700;
font-size:1.05rem;
margin-bottom:.35rem;
}
.aibim-pricing__plan-summary{
color:var(--muted);
}
/* 右カラム（開閉式の計算根拠） */
.aibim-pricing details{
border-radius:10px;
overflow:hidden;
}
.aibim-pricing details summary{
cursor:pointer;
font-weight:600;
padding:.65rem .9rem;
background:#f7f8fa;
border:1px solid var(--line);
border-radius:10px;
list-style:none;
position:relative;
}
.aibim-pricing details summary::after{
content:"+";
position:absolute;
right:.9rem; top:.55rem;
font-weight:700;
}
.aibim-pricing details[open] summary{
background:#fff;
border-bottom-color:transparent;
border-radius:10px 10px 0 0;
}
.aibim-pricing details[open] summary::after{
content:"−";
}
.aibim-pricing details > .aibim-pricing__basis,
.aibim-pricing details > .aibim-pricing__sub{
border:1px solid var(--line);
border-top:0;
padding:.85rem .95rem;
background:#fff;
}
.aibim-pricing__sub{ margin-top:.6rem; }
.aibim-pricing__sub h4{
margin:.2rem 0 .4rem;
font-size:1rem;
font-weight:600;
}
.aibim-pricing__sub ul{
margin:.2rem 0 0 1.1rem;
padding:0;
}
.aibim-pricing__sub li{ line-height:1.8; }
/* スマホ最適化：従来同様に縦積みに */
@media (max-width: 720px){
.aibim-pricing__table thead{ display:none; }
.aibim-pricing__table tr{ display:block; }
.aibim-pricing__table th,
.aibim-pricing__table td{ display:block; border:1px solid var(--line); }
.aibim-pricing__table tbody th{
border-bottom:0;
border-radius:var(--radius) var(--radius) 0 0;
width:auto;
}
.aibim-pricing__table tbody td{
border-top:0;
border-radius:0 0 var(--radius) var(--radius);
}
}
/* ==========================================================
6️⃣ Contact Form 7 の軽微なリニューアル
========================================================= */
/* ===== Contact / Card & Grid ===== */
:root{
--c-bg:#fff;
--c-txt:#1f2937;
--c-sub:#64748b;
--c-border: var(--color-border, #e5e7eb);
--c-ring: color-mix(in oklab, var(--color-accent,#3190E7) 30%, transparent);
--c-accent: var(--color-accent,#3190E7);
}
.contact-card{
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: 16px;
padding: clamp(16px, 2vw, 28px);
box-shadow: 0 24px 46px rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.04);
max-width: 900px;
}
.contact-lead{
margin: 0 0 1rem;
color: var(--c-sub);
font-size: .95rem;
}
/* Grid */
.c7-grid{
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px){
.c7-grid{ grid-template-columns: repeat(12, 1fr); }
.c7-grid .half{ grid-column: span 6; }
.c7-grid .form-field:not(.half),
.c7-grid .form-submit{ grid-column: 1 / -1; }
.c7-grid .inline{ grid-column: 1 / -1; }
}
/* Field base */
.wpcf7-form .form-field input[type="text"],
.wpcf7-form .form-field input[type="email"],
.wpcf7-form .form-field input[type="tel"],
.wpcf7-form .form-field select,
.wpcf7-form .form-field textarea{
width: 100%;
padding: 0.9rem 1rem;
font-size: 16px;
line-height: 1.45;
color: var(--c-txt);
background: #fff;
border: 1px solid var(--c-border);
border-radius: 10px;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.wpcf7-form .form-field textarea{ min-height: 160px; resize: vertical; }
/* Placeholder */
.wpcf7-form ::placeholder{ color: #9aa3ae; }
/* Focus ring */
.wpcf7-form .form-field input:focus,
.wpcf7-form .form-field select:focus,
.wpcf7-form .form-field textarea:focus{
outline: none;
border-color: var(--c-accent);
box-shadow: 0 0 0 4px var(--c-ring);
}
/* Validation */
.wpcf7-form .wpcf7-not-valid{
border-color: #ef4444 !important;
box-shadow: 0 0 0 4px rgba(239,68,68,.12) !important;
}
.wpcf7-form .wpcf7-not-valid-tip{
margin-top: 6px;
font-size: .85rem;
color: #b91c1c;
}
/* Acceptance（同意チェック）をおしゃれに */
.wpcf7-acceptance .wpcf7-list-item{
margin: 0;
}
.wpcf7-acceptance .wpcf7-list-item label{
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.wpcf7-acceptance input[type="checkbox"]{
/* 視覚的に非表示にしてカスタムUIを使う */
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.wpcf7-acceptance .wpcf7-list-item-label{
position: relative;
padding-left: 30px;
color: var(--c-sub);
}
.wpcf7-acceptance .wpcf7-list-item-label::before,
.wpcf7-acceptance .wpcf7-list-item-label::after{
content:"";
position:absolute; inset: 0 auto 0 0;
width: 20px; height: 20px; border-radius: 6px;
}
.wpcf7-acceptance .wpcf7-list-item-label::before{
background:#fff; border:1px solid var(--c-border);
box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
}
.wpcf7-acceptance input[type="checkbox"]:checked ~ .wpcf7-list-item-label::before{
border-color: var(--c-accent);
box-shadow: 0 0 0 4px var(--c-ring);
}
.wpcf7-acceptance .wpcf7-list-item-label::after{
transform: scale(0); transition: transform .15s ease;
left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 4px;
background: var(--c-accent);
}
.wpcf7-acceptance input[type="checkbox"]:checked ~ .wpcf7-list-item-label::after{
transform: scale(1);
}
/* Submit button */
.wpcf7-form input[type="submit"]{
--btn-shadow: 0 10px 20px rgba(50,50,93,.12), 0 6px 6px rgba(0,0,0,.08);
appearance: none;
border: 0;
border-radius: 999px;
padding: 0.9rem 1.6rem;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--c-accent), color-mix(in oklab, var(--c-accent) 85%, #fff));
box-shadow: var(--btn-shadow);
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.wpcf7-form input[type="submit"]:hover{
transform: translateY(-1px);
filter: brightness(1.02);
}
.wpcf7-form input[type="submit"]:active{
transform: translateY(0);
}
/* Spinner（送信中のぐるぐる） */
.wpcf7 .wpcf7-spinner{
width: 22px; height: 22px;
border: 2px solid #e5e7eb; border-top-color: var(--c-accent);
margin-left: 10px;
}
/* Response messages */
.wpcf7 .wpcf7-response-output{
margin-top: 14px;
padding: 12px 14px;
border-radius: 10px;
border-left: 4px solid transparent;
background: #f8fafc;
color: var(--c-sub);
}
.wpcf7 form.sent .wpcf7-response-output{
background:#f0fdf4; color:#166534; border-left-color:#22c55e;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{
background:#fef2f2; color:#b91c1c; border-left-color:#ef4444;
}
/* 小さめの上下余白調整 */
.wpcf7-form .form-submit{ margin-top: 4px; }
/* ダークモード配慮（任意） */
@media (prefers-color-scheme: dark){
.contact-card{ background:#0b0f14; border-color:#1f2937; box-shadow: none; }
.contact-lead{ color:#9aa3ae; }
.wpcf7-form .form-field input,
.wpcf7-form .form-field select,
.wpcf7-form .form-field textarea{
background:#0b1117; border-color:#263241; color:#dbe3ea;
}
.wpcf7-form ::placeholder{ color:#7b8794; }
}
/* ==========================================================
9️⃣ メディアクエリ（スマホ優先）
========================================================= */
/* 600px 以下はカードを縦並びに */
@media (max-width: 600px) {
.services-grid { grid-template-columns: 1fr; }
}
/* 480px 以下はヘッダーの高さと余白を縮小 */
@media (max-width: 480px) {
#scroll-header { height: 50px; line-height: 50px; }
}
/* ここまでがAI×BIMページのスタイル */
/* スムーズスクロールを有効化 */
html {
scroll-behavior: smooth;
}
/* ==========================================================
AI×BIMページ スマホ向け文字サイズ調整
========================================================= */
@media (max-width: 768px) {
/* セクションタイトルを少し小さくしてバランスを調整 */
.aibim-section h2 {
font-size: clamp(1.5rem, 6vw, 1.8rem); /* 最小24px〜最大28.8pxの範囲で調整 */
}
/* サービスカードのタイトル */
.service-item h3 {
font-size: 1.25rem; /* 20pxに固定 */
}
/* 料金表タイトル */
.aibim-pricing__title {
font-size: 1.5rem; /* 24pxに固定 */
}
/* お問い合わせカードの余白を調整 */
.contact-card {
padding: 1.5rem 1.25rem;
}
}
/* スマートフォン表示でカラムを縦積みにする */
@media (max-width: 782px) {
.wp-block-columns {
flex-direction: column;
}
}
/* ==========================================================
AI×BIMまとめページ スマホ表示のテキスト間隔最適化
========================================================= */
@media (max-width: 768px) {
/* ページ本文（WordPressエディタ部分）の段落(p)を対象 */
.aibim-summary-container .page-content p {
/* 行間を少し広げて、テキストの詰まりを解消します */
line-height: 1.85;
/* 文字間もわずかに広げ、視認性を向上させます */
letter-spacing: 0.05em;
}
/* セクションタイトル(h2)の文字間も調整 */
.aibim-section h2 {
letter-spacing: 0.03em;
}
}
/* ==========================================================
サービス詳細ページ（単一記事）のスマホ向け最適化
========================================================= */
@media (max-width: 768px) {
/* --- 全体の余白を調整 --- */
.single-service .main {
padding: 32px 16px; /* 上下の余白を32px、左右の余白を16pxに */
}
/* --- ページのメインタイトル --- */
.single-service .content-Title {
/* 画面幅に応じて文字サイズを滑らかに調整 */
font-size: clamp(1.75rem, 7vw, 2.25rem);
line-height: 1.35;
margin-bottom: 24px;
}
/* --- アイキャッチ画像 --- */
.single-service .content-EyeCatch {
/* 左右の余白をなくし、画面幅いっぱいに表示 */
margin-left: -16px;
margin-right: -16px;
margin-bottom: 32px; /* 画像と本文の間に余白を確保 */
}
.single-service .content-EyeCatch img {
width: 100%;
height: auto;
display: block;
}
/* --- 本文エリア --- */
.single-service .content-Body p {
font-size: 16px; /* 読みやすい基本の文字サイズ */
line-height: 1.8; /* 行間を広げて読みやすく */
letter-spacing: 0.04em; /* 文字間を少し広げる */
}
/* 本文中の見出し(H2など)の余白調整 */
.single-service .content-Body h2 {
margin-top: 2.5em;
font-size: 1.5rem;
}
}
/* ==========================================================
事例詳細ページ（単一記事）のスマホ向け最適化
========================================================= */
@media (max-width: 768px) {
/* --- 全体の余白を調整 --- */
.single-case_study .main {
padding: 32px 16px; /* 上下の余白を32px、左右の余白を16pxに */
}
/* --- ページのメインタイトル --- */
.single-case_study .content-Title {
/* 画面幅に応じて文字サイズを滑らかに調整 */
font-size: clamp(1.75rem, 7vw, 2.25rem);
line-height: 1.35;
margin-bottom: 24px;
}
/* --- アイキャッチ画像 --- */
.single-case_study .content-EyeCatch {
/* 左右の余白をなくし、画面幅いっぱいに表示 */
margin-left: -16px;
margin-right: -16px;
margin-bottom: 32px; /* 画像と本文の間に余白を確保 */
}
.single-case_study .content-EyeCatch img {
width: 100%;
height: auto;
display: block;
}
/* --- 本文エリア --- */
.single-case_study .content-Body p {
font-size: 16px; /* 読みやすい基本の文字サイズ */
line-height: 1.8; /* 行間を広げて読みやすく */
letter-spacing: 0.04em; /* 文字間を少し広げる */
}
/* 本文中の見出し(H2など)の余白調整 */
.single-case_study .content-Body h2 {
margin-top: 2.5em;
font-size: 1.5rem;
}
}
/* 日本語の禁則処理を強化し、不自然な改行を防止 全体レイアウトの調整*/
.content-Title, .project-title, .project-subtitle, .excerpt {
margin-left: 35px;
}
.content-Body, .content-body {
max-width: 80vw;
}
.content-Body, .content-body, .main-concept {
margin-left: 50px;
line-break: strict;
word-break: keep-all;
overflow-wrap: break-word;
}
@media (max-width: 768px) {
.content-Body, .content-body, .main-concept {
margin-left: 0px;
max-width: 100vw;
}
.content-Title, .project-title, .project-subtitle, .excerpt {
margin-left: 0px;
}
}
/*!
* Bootstrap Grid v4.1.3 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
.col-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 576px) {
.col-sm {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-sm-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
.col-sm-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-sm-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-sm-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-sm-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-sm-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-sm-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-sm-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-sm-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-sm-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-sm-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-sm-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-sm-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 768px) {
.col-md {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-md-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
.col-md-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-md-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-md-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-md-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-md-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-md-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-md-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-md-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-md-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-md-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-md-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-md-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 992px) {
.col-lg {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-lg-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
.col-lg-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-lg-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-lg-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-lg-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-lg-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-lg-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-lg-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-lg-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-lg-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-lg-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-lg-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-lg-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 1200px) {
.col-xl {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-xl-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
.col-xl-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-xl-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-xl-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-xl-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-xl-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-xl-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-xl-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-xl-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-xl-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-xl-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-xl-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-xl-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
/* === 会話風吹き出しスタイル (修正版) === */
/* 全体を囲むブロック */
.conversation-block {
display: flex !important;
flex-direction: row !important;
align-items: flex-start;
gap: 16px;
margin: 2em 0;
width: 100%;
box-sizing: border-box;
}
/* 右寄せバージョン */
.conversation-block.align-right {
flex-direction: row-reverse !important;
}
/* アイコン部分 */
.speaker-icon {
flex: 0 0 80px;
text-align: center;
}
.speaker-icon img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
background-color: #f0f0f0;
}
.speaker-icon .speaker-name {
font-size: 0.85em;
margin-top: 4px;
color: #555;
letter-spacing: 0.05em;
word-break: keep-all;
}
/* 吹き出し部分 */
.speech-bubble {
position: relative;
padding: 1.2em 1.5em;
background-color: #e6e6ed;
border-radius: 12px;
/* width: 100%; ★ この行を削除 */
flex: 1 1 auto;
box-sizing: border-box;
}
.speech-bubble.bubble-right {
background-color: #f0f4f8;
}
.speech-bubble p {
margin: 0;
line-height: 1.7;
}
.speech-bubble p:not(:last-child) {
margin-bottom: 1em;
}
/* 吹き出しのしっぽ */
.speech-bubble::before {
content: '';
position: absolute;
top: 24px;
width: 12px;
height: 12px;
background-color: inherit;
transform: rotate(45deg);
}
/* 左のしっぽ */
.align-left .speech-bubble::before {
left: -6px;
}
/* 右のしっぽ */
.align-right .speech-bubble::before {
right: -6px;
}
/* ===== 横並びのまま余白を最小化（スマホ） ===== */
@media (max-width: 768px){
/* 調整しやすい変数（必要なら数値だけ変えてください） */
:root{
--icon: 48px; /* アイコンの表示サイズ */
--gap: 4px; /* アイコンと吹き出しの間隔 */
--padx: 0px; /* 画面左右の安全マージン */
}
/* 行内の余白を最小限に */
.conversation-block{
gap: 4px;
padding-inline: var(--padx);
align-items: flex-start;
}
/* アイコンは固定幅（計算の基準になる） */
.speaker-icon{ flex: 0 0 var(--icon); }
.speaker-icon img{ width: var(--icon); height: var(--icon); }
/* 吹き出し：親の幅からアイコン・隙間・左右マージンを差し引いて“できるだけ広く” */
.speech-bubble{
position: relative;
z-index: 0; /* これで子の z-index 基準が安定します */
margin: 0; /* 余計な外側余白を消す */
padding: 8px 10px; /* 内側も控えめに（好みで調整可） */
min-width: 0; /* 長文でも縮められるように */
max-inline-size: calc(100% - var(--icon) - var(--gap) - (var(--padx) * 2));
overflow-wrap: anywhere; /* 長い英数字やURLの折返し */
word-break: normal;
}
/* “しっぽ”が画面外へ出ないよう内側に配置 */
.align-left .speech-bubble::before{ left: 0px; }
.align-right .speech-bubble::before{ right: 0px; }
/* しっぽ（::before）をテキストより下に */
.align-left .speech-bubble::before,
.align-right .speech-bubble::before{
position: absolute;
z-index: -1; /* ← テキストより背面に回す */
pointer-events: none; /* タップ選択の邪魔をしない保険 */
}
}
/* URL・codeなどの折返し保険（PC/スマホ共通） */
.speech-bubble a,
.speech-bubble code{
overflow-wrap: anywhere;
word-break: break-word;
}
/* ===== スマホで左右ガターを 4px に統一（標準テンプレ＆one-column両対応） ===== */
@media (max-width: 768px){
:root{ --gutter: 4px; } /* ← 8pxにしたくなったらここだけ 8px に */
/* 外枠（.container / .container-fluid）の左右パディングを揃える */
.container,
.content.container-fluid{
padding-left: var(--gutter) !important;
padding-right: var(--gutter) !important;
}
/* 行の“負マージン”もガターに合わせる（※タイプミス 0x → -4px 相当） */
.row{
margin-left: calc(var(--gutter) * -1) !important;
margin-right: calc(var(--gutter) * -1) !important;
}
/* カラムの左右パディングも揃える（既定は15px） */
.row > [class*="col-"]{
padding-left: var(--gutter) !important;
padding-right: var(--gutter) !important;
}
/* 会話ブロックも外枠と合わせる */
.conversation-block{ padding-inline: var(--gutter) !important; }
/* サイドバーのULマーカーが外へ出ないように（カテゴリ/アーカイブ等） */
#sidebar-widget-area ul{
margin: 0;
padding-left: 1rem;
list-style-position: inside;
}
#sidebar-widget-area li{ margin: 0 0 .5em; }
}
/* ==========================================================
通常の投稿 (single-post) のスマホ向け最適化
========================================================= */
@media (max-width: 768px) {
/* --- 全体の余白を調整 --- */
.single-post .main {
padding: 32px 16px; /* 左右の余白を16pxに */
}
/* --- ページのメインタイトル --- */
.single-post .content-Title {
font-size: clamp(1.75rem, 7vw, 2.25rem);
line-height: 1.35;
margin-bottom: 24px;
}
/* --- アイキャッチ画像 --- */
.single-post .content-EyeCatch {
/* 左右の余白(16px)を打ち消すネガティブマージンで全幅に */
margin-left: -16px;
margin-right: -16px;
margin-bottom: 32px; /* 画像と本文の間に余白を確保 */
}
.single-post .content-EyeCatch img {
width: 100%;
height: auto;
display: block;
}
/* --- 本文エリア --- */
.single-post .content-Body p {
font-size: 16px; /* 読みやすい基本の文字サイズ */
line-height: 1.8; /* 行間を広げて読みやすく */
letter-spacing: 0.04em; /* 文字間を少し広げる */
}
}
/* ===== スマホ表示 (768px以下) の調整 ===== */
@media (max-width: 768px) {
/* --- 検索フォーム（