.ivy-labo {
padding: 2rem;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #ddd;
margin-bottom: 2rem;
}
.ivy-labo h2 {
margin: 0 0 1.2rem 0;
font-weight: bold;
}
/* タブメニュー */
.ivy-labo .tab-menu {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
padding: 0;
background: none;
border: none;
box-shadow: none;
}
/* タブ（グレーの小さなボタン） */
.ivy-labo .tab-menu a {
display: inline-block;
padding: 0.5rem 1rem;
background: #f0f0f0;
border-radius: 8px;
text-decoration: none;
color: #000;
font-weight: bold;
border: 1px solid #ddd;
transition: background 0.2s, color 0.2s;
}
/* ホバー（PC用） */
.ivy-labo .tab-menu a:hover {
background: #e0e0e0;
}
/* --------------------------------------------------------------
タブメニューのアクティブ表示
各ページのに付けたページ専用クラス（page-◯◯）を使って、
「今開いているページのタブだけ」を緑色＋白文字で強調表示する。
bodyのクラスがページ判定のスイッチになっている。
オレンジ色にする場合は#f39700（事業案内タブと同じ色）
濃いグレーにする場合は#999（各種料金プランタブと同じ色）
↓ ↓ ↓
-------------------------------------------------------------- */
/* アクティブ状態（緑色＋白太文字） */
.page-ivy-labo .tab-menu a[href="ivy-labo.html"],
.page-space-opening .tab-menu a[href="space-opening.html"]{
background: #228b22;
color: #fff;
font-weight: bold;
}
.ivy-labo .ivy-labo-photo-list {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
/* カードは240px以上、入るだけ横に並べる。画面幅似合わせて列数を自動で変える */
gap: 1.8rem;
}
/* は grid の子として高さを持てないから、
display: contents で ivy-labo-photo-list直下の を透明化して、
中の を grid の子要素にする↓↓↓ */
.ivy-labo .ivy-labo-photo-list > li {
display: contents;
}
/* ↑こうすることで、将来、文字量が増えても、文字量に関係なく同じ行のカードの高さを揃えることができる */
.photo-card {
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.photo-card img {
width: 100%;
height: auto;
display: block;
}
.photo-desc {
padding: 1rem;
margin: 0;
}
.callout .callout-text {
border-left: 4px solid #228b22;
padding: 0.7em 1em;
margin: 1.4em 0;
background: #fafafa;
border-radius: 4px;
}
/* デジタルサイネージブロック */
.digital-signage-info {
display: flex;
gap: 1.5rem;
margin: 2rem 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 1rem;
align-items: flex-start;
}
.digital-signage-info img {
width: 100%;
max-width: 280px; /* PC時の最大幅 */
height: auto;
border-radius: 6px;
flex-shrink: 0; /* 画像が潰れないようにする */
}
.digital-signage-text p {
margin: 0 0 0.6rem;
}
/* =========================
スマホ表示用
========================= */
@media (max-width: 768px) {
.ivy-labo {
padding: 1rem;
}
/* 親要素の中に入っている子要素を中央寄せ */
.ivy-labo .tab-menu {
justify-content: center;
}
/* 幅を自動にする（広がらない・縮まない・中身の大きさで決める） */
.ivy-labo .tab-menu a {
flex: 0 0 auto;
text-align: center;
}
}
@media (max-width: 600px) {
.digital-signage-info {
flex-direction: column; /* 縦並び */
text-align: left;
/* スマホで除草作業のカード枠を消す */
background: none; /* カード背景を消す */
border: none; /* 枠線を消す */
padding: 0; /* 余白を消す */
border-radius: 0; /* 角丸を消す */
}
.digital-signage-info img {
max-width: 100%;
width: 100%;
}
}