/* === HERO 本番版 === */
.concept-box{
  display: flex;
  align-items: stretch;        /* 子を同じ高さに揃える＝左のテキスト高に追従 */
  margin: 1px auto 20px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
  /* outlineや!importantは削除 */
  max-width: calc(100% - 10px); /* ← 左余白を引いたぶんだけに制限 */
  overflow-x: hidden;            /* ← 念のため保険 */
}
/* 左テキスト側（インラインの flex:1 を補強） */
.concept-box > div:first-child{
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}
/* 右：背景画像ボックス（高さ固定をやめる） */
.concept-image-bg{
  flex: 0 0 240px;             /* 幅240px固定・縮まない */
  /* height:500px; ← 削除 */
  background-image: url("/common/img/concept/top.jpg");
  background-size: cover;
  background-position: 13% center;
  background-repeat: no-repeat;
  border-radius: 6px;
  /* 何も入ってなくても伸びるように、親の stretch に任せる */
}
.list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 25px;
	color: #333;
}
.list-item p {
  margin: 0;
}
.list-marker {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border: 2px solid #666;
  background-color: transparent; /* 背景なし */
}
.list-marker2 {
  display: inline-block;
  width: 1.6em;
  text-align: center;
  margin-right: 0.5em;
  font-size: 1.1em;
  line-height: 1.4; /* アイコンの縦位置を揃えやすくする */
  vertical-align: text-top; /* もしくは middle を試す */
  color: #3A5370;
  font-weight: bold;
}

/* ▼ cocept/index ▼ */
.hero-sub .highlight {
  color: #2A5BD7; /* 信頼感ある青 */
  font-weight: bold;
}
.feature-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 4px 0 0 1.85em; /* 左マージンを少し空ける */
}
.section {
  margin: 64px 0; /* 上下64px、左右0 */
}
.studio-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}
.studio-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.studio-img {
  width: 100%;
  height: auto;
  aspect-ratio: 208 / 156;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.section-two-column {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 40px 0 64px; /* 上40px・左右0・下64px */
}
.text-column {
  flex: 1;
  min-width: 320px;
}
.image-column {
  flex: 1;
  min-width: 280px;
}
/* ▼ セクション8 専用スタイル ▼ */
.jwid-image {
  display: inline-block;           /* 画像サイズに応じて自動調整 */
  padding: 20px;                   /* 画像との間の余白 */
  border: 1px solid #ccc;          /* 薄いグレーの枠線 */
  border-radius: 6px;              /* 少し角を丸める */
  background-color: #fff;          /* 白背景 */
  margin: 20px 0 0 -10px;          /* 全体を少し下に、左に寄せる（調整可） */
}
.library-features {
  font-size: 14px;
  line-height: 1.8;
  margin-left: 20px;
  padding-right: 90px;
  box-sizing: border-box;
  max-width: calc(100% - 30px); /* ← 左余白を引いたぶんだけに制限 */
  overflow-x: hidden;            /* ← 念のため保険 */
}
.concept-section {
  max-width: 900px;                 /* wrapper幅に統一 */
  margin: 20px auto 0 auto;         /* 上30px、左右auto、下0 */
  padding: 14px 24px 10px 50px;     /* 上右下左 */
  background: #fafafa;
  border-radius: 12px;
  box-sizing: border-box;           /* 内側paddingで幅がはみ出さないように */
  max-width: calc(100% - 30px); /* ← 左余白を引いたぶんだけに制限 */
  overflow-x: hidden;            /* ← 念のため保険 */
}
/* SECTION 4 曲探しに迷ったら？ */
.section-box {
  background: #fdfaf7;
  border: 1px solid #e0d8cd;
  border-radius: 12px;
  padding: 15px 24px;
  margin-top: 30px;
  box-sizing: border-box;
  max-width: calc(100% - 10px); /* ← 左余白を引いたぶんだけに制限 */
  overflow-x: hidden;            /* ← 念のため保険 */
}
/* SECTION 5 */
.section-box2 {
  margin-top: 40px;
  max-width: calc(100% - 10px); /* ← 左余白を引いたぶんだけに制限 */
  overflow-x: hidden;            /* ← 念のため保険 */
}
.jisseki-box {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px 24px;
  font-size: 14px;
  color: #333;
  margin: 20px 0 0 1px; /* 上20px 左1pxのみ指定 */
  box-sizing: border-box;
  max-width: calc(100% - 10px); /* 左余白分を調整 */
  overflow-x: hidden; /* 横スクロール防止 */
}
/* SECTION 6 音の質”へのこだわり */
.section-box3 {
  margin-top: 40px;
  max-width: calc(100% - 10px); /* ← 左余白を引いたぶんだけに制限 */
  overflow-x: hidden;            /* ← 念のため保険 */
  box-sizing: border-box;     /* ← padding込みでwidthを計算 */
}
.studio-image-section {
  margin: 30px auto;
  padding: 0 10px;
  max-width: calc(100% - 10px); /* ← 左余白を引いたぶんだけに制限 */
  overflow-x: hidden;            /* ← 念のため保険 */
  box-sizing: border-box;     /* ← padding込みでwidthを計算 */
}
/* SECTION 7 アカデミックとスタンダード */
.section-box4 {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 80px;
  box-sizing: border-box;
  max-width: calc(100% - 10px); /* ← 左余白を引いたぶんだけに制限 */
  overflow-x: hidden;            /* ← 念のため保険 */
}
/* SECTION 8 J-wid */
.section-box5 {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 40px 0 60px;       /* 上40px・左右0・下60px */
  padding: 20px 0 10px 30px; /* 上20px・右0・下10px・左30px */
  box-sizing: border-box;
  background: #fdfaf7;
  border: 1px solid #e0d8cd;
  max-width: calc(100% - 10px); /* 左余白を引いたぶんだけ制限 */
  overflow-x: hidden;            /* 横スクロール防止（保険） */
}
/* SECTION 9 contact */
.section-box6 {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 40px 0 60px;          /* 上40px・左右0・下60px */
  box-sizing: border-box;
  max-width: calc(100% - 10px); /* 左余白を引いたぶんだけ制限 */
  overflow-x: hidden;           /* 横スクロール防止（保険） */
}

/* 画像：ホバー時に軽い反応（任意） */
.hover-infolarge {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  transform-origin: right center;
  cursor: zoom-in; /* クリックで拡大できる印象を出す */
  position: relative;
  z-index: 1;
}

.hover-infolarge:hover {
  transform: scale(1.02); /* 軽く反応させるだけ（お好み） */
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* 親が画像を切らないように */
.hover-infolarge-container {
  position: relative;
  overflow: visible;
}