/* =========================================
   visual.css
   データ加工＆ビジュアル化支援サービス特設ページ
========================================= */

/* =========================================================
   WPテーマの #content_wrap 上書き（WPが自動生成する前提）
========================================================= */

/* このページ内の h2 span::before を完全無効化 */
#content_wrap .dv-page h2 span::before{
  content: none !important;
  display: none !important;
}


ul, ol{
	font-size:100%;
	
}
/* visualページでは h2 span のテーマCSSを完全無効化 */
h2 span{
  all: unset !important;
  display: inline !important; /* テキストとして成立させる */
}

#content_wrap{
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

#content_wrap > *{
  max-width: none;
}

#content_wrap .entry-content,
#content_wrap .post-content,
#content_wrap .page-content{
  padding: 0 !important;
  margin: 0 !important;
}

#content_wrap .dv-page h1,
#content_wrap .dv-page h2,
#content_wrap .dv-page h3{
  border: none !important;
  background: none !important;
}

#content_wrap .dv-page img{
  margin: 0 !important;
}

/* =========================================================
   基本設定
========================================================= */
:root{
  --dv-text:#1f2a37;
  --dv-bg:#f6f9fc;
  --dv-blue:#0c4a7c;
  --dv-container:1000px;
}

*{
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  margin:0;

  color:var(--dv-text);
  background:var(--dv-bg);
  line-height:1.7;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================================================
   レイアウト
========================================================= */
.dv-page{
  width:100%;
}

.dv-container{
  max-width:var(--dv-container);
  margin:0 auto;
  padding:24px;
}

/* =========================================================
   HERO（画像＋リード文）
========================================================= */
.dv-hero{
  padding:0;
}

.dv-hero .dv-container{
  background:transparent;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  position:static;
  padding-top:0;
  padding-bottom:0;
}

.dv-hero-figure{
  margin:0;
  padding:0;
}

.dv-hero-image{
  width:100%;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.dv-hero-lead{
  padding:18px 0 0;
}

.dv-hero-lead p{
  font-size:18.5px;
  line-height:4.5rem;
  margin:25px 0 25px 0;
  text-align:center;
}

/* =========================================================
   主な対応内容（モダン版）
========================================================= */
.dv-service{
  padding: 30px 0 10px;
}

.dv-section-head{
  text-align:center;
  margin: 0 auto 22px;
}

/* セクション見出し装飾：左右ライン */
.dv-section-title{
	font-size:2.8rem !important;
  display: inline-flex;
  align-items: center;
margin:10px 0 10px;
  gap: 18px;
  position: relative;
	color:#0c4a7c;
}

.dv-section-title::before,
.dv-section-title::after{
  content: "";
  display: block;
  width: 70px;
  height: 2px;
  background: #0c4a7c;
  opacity: 0.35;
}


.dv-section-lead{
  margin:10px auto 25px auto;
  max-width:70ch;
  color: rgba(31,42,55,.78);
  line-height:1.9;
  font-size:18px;
}

.dv-service-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:16px;
}

.dv-service-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:18px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(12,74,124,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}

.dv-badge{
  flex:0 0 44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:var(--dv-blue);
  background: linear-gradient(180deg, rgba(44,127,214,.18), rgba(44,127,214,.06));
  border: 1px solid rgba(44,127,214,.25);
}

.dv-service-title{
  margin:0 0 6px;
  font-size:20px;
  font-weight:900;
  color:var(--dv-blue);
}

.dv-service-text{
  margin:0;
  color:#2f3b4a;
  line-height:2.0;
  font-size:15px;
}

/* =========================================================
   主な対応品目：左を広く／右はベタ付け
========================================================= */

.dv-items-layout{
  display: grid;
  grid-template-columns: 75% 25%; /* ← 左を広く */
  gap: 8px;                      /* ← 隙間を最小限に */
  align-items: center;
}

/* 左：上3＋下2 */
.dv-items-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* 下段2つ（4・5番目） */
.dv-items-grid > li:nth-child(4){
  grid-column: 1 / span 1;
}
.dv-items-grid > li:nth-child(5){
  grid-column: 2 / span 1;
}

/* 主な対応品目：リストの黒丸を完全に無効化 */
.dv-items-grid,
.dv-items-grid li{
  list-style: none !important;
}

.dv-items-grid li::marker{
  content: none !important;
}

/* 右下（下段3列目）に「など」を置く */
.dv-items-etc{
  grid-column: 3;     /* 3列目 */
  grid-row: 2;        /* 2段目 */
  align-self: end; /* 縦中央 */
  justify-self: start;/* 左寄せ */

  color: rgba(31,42,55,.65);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .06em;

  /* “浮かない”ために少しだけ余白 */
  padding-left: 6px;
}

.dv-item-card{
  height: auto;
  border: none;
  border-radius: 8px;

  /* 面はほぼ白に溶かす */
  background: rgba(255,255,255,0.92);

  /* 影は「下にうっすら」だけ */
  box-shadow:
    0 1px 0 rgba(12,74,124,0.06),
    0 6px 12px rgba(0,0,0,0.04);

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 12px 16px 12px 28px; /* 左を少し深く */
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .06em;
  color: #0c4a7c;

  position: relative;
  cursor: default; /* ← 超重要 */
}

/* 左アクセント：さらに細く、情報感 */
.dv-item-card::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 99px;
  background: rgba(12,74,124,.45);
}



/* =========================
   右：キャラ（ベタ付け）
========================= */

.dv-items-figure{
  margin: 0;              /* ← 余白ゼロ */
  padding: 0;             /* ← 余白ゼロ */
  display: flex;
  justify-content: flex-end; /* ← 右にベタ付け */
  align-items: center;
}

/* 画像サイズ指定 */
.dv-items-character{
  height: 190px !important;
  width: auto !important;
  margin: 0 !important;              /* ← 念のため */
  padding: 0 !important;
  display: block !important;
}


/* =========================================================
   強調帯（コピー）
========================================================= */

.dv-band{
  padding: 0;
  background: linear-gradient(135deg, #0c4a7c, #083055);
  position: relative;
  overflow: hidden;
}

/* 斜めの模様（それっぽく） */
.dv-band::before{
  content:"";
  position:absolute;
  inset:-60px -60px -60px -60px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.06) 0 26px,
      rgba(255,255,255,0) 26px 52px
    );
  transform: rotate(-2deg);
  pointer-events:none;
}

.dv-band .dv-container{
  position: relative;
  z-index: 1;
}

/* テキスト */
.dv-band-text{
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 2.1;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* 強調（データ加工×ビジュアル化） */
.dv-band-text strong{
  font-weight: 900;
  color: #fff6b3; /* ほんのり黄みでアクセント */
}

/* =========================================================
   サイト事例（3カラム）
========================================================= */

.dv-cases{
  padding: 30px 0 10px;
}

.dv-cases-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* 1枚の事例カード */
.dv-case{
  background: #ffffff;
  border: 1px solid rgba(12, 74, 124, 0.14);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  padding: 16px 16px 18px;
}

/* タイトル（青いラベル風） */
/* タイトル：常に2行ぶん確保して、1行のときは中央に */
.dv-case-title{
  width: 100%;
  margin: 0 0 7px;
  padding: 8px 14px;
  border-radius: 999px;

  color: #0c4a7c;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 16px;

  /* ここから追加 */
  line-height: 1.35;
  min-height: calc(1.9em * 2);   /* 2行分の高さ */
  display: flex;
  align-items: center;            /* 縦中央 */
  justify-content: center;        /* 横中央 */
  text-align: center;
}

/* サムネ（リンク） */
.dv-case-thumbLink{
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(12, 74, 124, 0.18);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  background: #fff;
}

/* ワイド比率（HD想定） */
.dv-case-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* 文章 */
.dv-case-text{
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.95;
  color: #2f3b4a;
}

.br-pc { display: inline; }
.br-sp { display: none; }
/* スマホでは逆にする */
@media screen and (max-width: 500px) {
  .br-pc { display: none; }
  .br-sp { display: inline; }
}

@media screen and (max-width: 500px) {

	
	.dv-hero-lead p{
  font-size:16.5px;
  line-height:3.5rem;

}
	
	.dv-section-title{
	font-size:2.4rem !important;

}
	
	.dv-item-card{
		font-size:14px;
}
	
.dv-items-grid{
  gap:8px !important;
}
	
.dv-items-layout{
  grid-template-columns: 100% 0%; /* ← 左を広く */
}
	}