@charset "utf-8";
/* CSS Document */
#casestudies_logo {
  display: block;
  max-width: 500px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
}
@media (max-width:566px) {
  #casestudies_logo {
    width: 50%;
    height: auto;
  }
}
#casestudies_title_bar {
  background-color: var(--main_color);
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  width: 100%;
}
#casestudies_title_bar2 {
  background-color: var(--main_color);
  width: 100%;
  height: 8px;
  margin-top: 5px;
}
#casestudies_title_bar span {
  color: #ffd400;
  font-size: 1.5rem;
  display: block;
  margin-right: auto;
  padding: 0;
  margin-left: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 1300px;
  text-align: center;
}
#casestudies_title_bar h1 {
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  color: #FFFFFF;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 2rem;
  padding: 0;
  max-width: 1300px;
  display: block;
  text-align: center;
}
/* ========== ベースまわり（既存） ========== */
#casestudies_box {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  height: auto;
}
#casestudies_box2 {
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  height: auto;
}
@media (max-width:566px) {
  #casestudies_box,
  #casestudies_box2	{
    width: 94%;
    margin-right: auto;
    margin-left: auto;
  }
}
#casestudies_box #txt_box1 {
  width: 100%;
  height: auto;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #333;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 1rem;
  margin-top: 2rem;
  line-height: 1.65;
}
#casestudies_box #txt_box1 p {
  margin-top: 1rem;
  font-size: 0.75rem;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: normal;
}
/* ========== ボイス一覧レイアウト ========== */
#voice_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2カラム */
  gap: 15px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 15px 0;
  box-sizing: border-box;
}


/* -------------------------------------------------
  1. カード全体の箱 (#voice_list > div)
     - 白いカード感を消して「青帯＋灰ボックスの2段」に見せる
------------------------------------------------- */
/* カード全体のベース */
#voice_list > div {
  /* もともとのリセット */
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding-bottom: 0;
  overflow: visible;
  margin-bottom: 3rem;
}

/*-------------------------------------------------
　ホバー時の処理
-------------------------------------------------*/
#voice_list > div {
  transition: transform .25s ease, background-color .25s ease;
  /* すでに他の指定があれば一緒に書いてOK */
}
#voice_list > div:hover {
  transform: translateY(-4px);  /* -3〜-6px くらいはお好みで調整 */
  /* ドロップシャドウなし（指定しないだけでOK） */
}

#voice_list > div:hover dl {
    background-color: #E0F3E8;   /* 好きな色に変更 */
    font-weight: bold;
    color: #000;
}
#voice_list > div:hover h2 {
    background-color: var(--ichiro_color);   /* 好きな色に変更 */
}

#voice_list > div:hover h2.voice-heading::after {
    background-color: #006E30;
}

/* a全体がクリック領域なのはそのまま使う */
#voice_list a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0; /* 余白はそれぞれの中身側で付ける */
}

/* -------------------------------------------------
  2. 青いタイトル帯 .voice-heading
     - 角丸をやめて、濃いブルーの三角の"しっぽ"をつける
     - 「お客様の声」バッジはデザイン的に消す（必要なら後で戻せる）
------------------------------------------------- */

/* まずは色(仮)を決める。自由に上書きOK */
:root {
  --voice-blue: #1a5fa8;         /* 見出しの青（今の var(--main_color) でもOK） */
  --voice-blue-dark: #1e5e93;    /* 三角の濃い青 */
  --voice-gray-bg: #eee;      /* 会社情報のグレー背景 */
  --voice-gray-border: rgba(0,0,0,.2);
  --voice-shadow: 0 3px 8px rgba(0,0,0,.18);
}

/* 見出し帯 */
#voice_list h2.voice-heading {
    position: relative;
    margin: 0;
    /* バッジと本文タイトルを縦積みにしてたflexは活かす */
    display: flex;
    flex-direction: column;
    /* 角丸と下線をやめる・青帯の見た目に寄せる */
    background-color: var(--main_color);
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-bottom: none;
    color: #fff;
    /* 文字まわり */
    font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    font-weight: normal;
    font-size: 1.4rem;
    line-height: 1.2;
    font-feature-settings: "palt";
    padding-top: 1rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 0.8rem;
    min-height: 90px;
	/*box-shadow: 5px 5px 5px -1px #cfcfcf;*/
	box-shadow: 5px 5px 5px -1px #c7c7c7;
}
@media (max-width: 800px) {
  #voice_list h2.voice-heading {
	  min-height: auto;
  }
}
/* スマホでも同じでOK。高さautoなので特別な分岐いらない */
@media (max-width: 566px) {
  #voice_list h2.voice-heading {
    font-size: 1.2rem;
    line-height: 1.4;
	  min-height: auto;
  }
}

/* 「お客様の声」バッジはスクショだと出ていないので隠す */
#voice_list h2.voice-heading .voice-badge {
  display: none;
}

/* タイトルテキスト（白文字の長文） */
#voice_list h2.voice-heading .voice-title {
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: normal;
  display: block;
  /* バッジを消したので上マージンいらない */
  margin: 0;
}

/* ▼フキダシの三角部分を疑似要素で描く
   スクショだと青帯の左寄りから、下のグレーボックス左フチに向かって
   斜めに落ちる濃い青の三角が付いてるよね？
   あれを::afterで作る。
*/
#voice_list h2.voice-heading::after {
  content: "";
  position: absolute;

  /* 青帯の"真下"に出したいので top:100% (=h2の下端) から配置 */
  top: 100%;

  /* グレーボックスは少し右にズレてる（インデントしてる）
     その左上角と三角の直角が揃ってるように見える。
     → ここでその位置に合わせる。 */
  left: 0rem;

  /* 三角のサイズ（大きすぎ/小さすぎならお好みで調整）
     スクショだと大体 20〜24px 四方くらい */
  width: 20px;
  height: 20px;

  /* 三角の色（青帯よりちょい濃い） */
  background: var(--voice-blue-dark);

  /* clip-path で「直角が右上」の三角を切り出す
     polygon(0 0,100% 0,100% 100%)
     → 上辺(0,0→100%,0)と右辺(100%,0→100%,100%)が直角の辺になる。
     → 斜辺が左下方向に伸びる、スクショそっくりの形になる。
   */
  clip-path: polygon(0 0,100% 0,100% 100%);
  /* pointer-eventsなしでOK。a全体クリックでも邪魔しないはず */
}

/* -------------------------------------------------
  3. グレーの会社情報ボックス (dl)
     - スクショでは青帯の下に、少し右にずらして
       薄グレー＋枠線＋薄いドロップシャドウの別カードがいる
------------------------------------------------- */

#voice_list dl {
    /* レイアウトは今までどおりの2カラムgridを使い回す */
    display: grid;
    grid-template-columns: 5rem 1fr;
    column-gap: 6px;
    row-gap: 6px;
    /* ボックスっぽい背景＆枠＆影 */
    background: var(--voice-gray-bg);
    /*border: 1px solid var(--voice-gray-border);*/
    /*box-shadow: var(--voice-shadow);*/
    padding-top: 1rem;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-bottom: 1rem;
    /* 余白（外側）:
     - 上方向マージンは0にして青帯とくっつける
     - 左にインデントして、三角の分だけ右にずらす
       （これがフキダシっぽく見える肝）
  */
    margin: 0;
    margin-left: 20px; /* ← h2::after の left と同値にすると三角と揃う */
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: px;
    /* ボックス幅がカード幅いっぱいまで伸びると
     左インデント分だけ全体よりちょい細い、っていう見え方になる。
     それを width:calc(...) で演出する */
    width: calc(100% - 2.5rem);
    box-sizing: border-box;
    min-height: 140px;
	transition: background-color .25s ease;
}

/* ラベル側（dt） */
#voice_list dt {
  font-size: 0.9rem;
  text-align: left;
  white-space: nowrap;
  color: #333;
  margin: 0;
  font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight: normal;
  /*line-height: 1.6;*/
}

/* 値側（dd） */
#voice_list dd {
  margin: 0;
  font-size: 0.9rem;
  /*line-height: 1.6;*/
  color: #333;
  font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight: normal;
}

/* 会社名のh3はインライン化して今のままでOK。
   文字サイズも0.9remに寄せて揃えるとより近い。 */
#voice_list dd h3 {
  display: inline;
  font-size: 0.9rem;
  font-weight: normal;
  margin: 0;
  color: #333;
}

/* スマホ(800px以下)で1カラムに落とすのは既存の考え方でOK。
   ただしdl側のpadding等はちょっと詰めたいならここで微調整も可。 */
@media (max-width: 800px) {
  #voice_list {
    grid-template-columns: 1fr;
  }

  #voice_list dl {
    grid-template-columns: 90px 1fr;
    width: calc(100% - 40px);
    margin-left: 20px;
    padding: 1rem 1rem 1.25rem;
	  min-height: auto;
  }

  #voice_list h2.voice-heading::after {
    left: 0;
  }
}



/* フィルタ全体 */
#search_area {
  max-width: 1300px;
  margin-top: 3rem;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  padding-right: 2rem;
  padding-left: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
  text-align: center;
  /*border: 1px solid #CCCCCC;*/
  border-radius: 8px;
  background-color: #CFE8F3;
  padding-top: 2rem;
}
#search_area p {
  padding: .5rem;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1.5rem;
  color: #fff;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  font-size: 1.2rem;
  background-color: #3CA1CE;
  border-radius: 50px;
  width: 15rem;
}
/* 横並び */
.filter-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* ← ラベルとセレクトのベースラインを揃える */
  gap: 30px;
  flex-wrap: wrap;
}
/* 各ブロック */
.filter-box {
  flex: 1 1 300px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* ラベル */
.filter-label {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 1rem;
  line-height: 1;
  text-align: left;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
}
/* セレクト共通 */
.filter-select {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  appearance: none;
  box-sizing: border-box;
  font-weight: normal;
  font-variant: normal;
  font-style: normal;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #333;
  text-indent: 1rem;
}
@media screen and (max-width: 566px) {
  #search_area {
    padding: 10px 15px;
  }
  .filter-wrap {
    flex-direction: column;
    align-items: stretch; /* ← flex-start より自然 */
    gap: 10px; /* ← 余白を詰める */
  }
  .filter-box {
    width: 100%;
    max-width: none;
    margin: 0; /* ← ブラウザデフォルトmargin除去 */
    padding: 0; /* ← 不要な余白除去 */
  }
  .filter-label {
    text-align: left;
    margin-bottom: 4px; /* ← labelとselectの隙間だけ最小限に */
    line-height: 1.2;
  }
  .filter-select {
    width: 100%;
    margin: 0; /* ← select周囲の隙間リセット */
  }
}
@media screen and (max-width: 566px) {
  .filter-box {
    flex: none; /* ← flex-grow/shrink/basis を全解除 */
    width: 100%; /* ← 単純に全幅にする */
    min-width: auto; /* ← デフォルトに戻す */
  }
}
.canvas_frame {
    width: 100%;
    aspect-ratio: 25 / 17;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
}
.canvas_frame iframe {
    width: 100%;
    margin-top: 1rem;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    padding: 0;
    height: 100%;
    border-radius: 5px;
    border-style: none;
    border-width: 0px;
    transform: scale(0.9); /* 90%縮小 */
    transform-origin: center; /* 真ん中基準で縮める */
}
@media (max-width:566px) {
  .canvas_frame {
    width: 100%;
  }
  .canvas_frame iframe {
    margin-left: 0;
    margin-right: 0;
    transform: scale(1); /* 90%縮小 */
    transform-origin: center; /* 真ん中基準で縮める */
  }
  #search_area p {
    margin-top: 1rem;
  }
}