@charset "UTF-8";

/* ==========================================================================
導入事例PDFダウンロード（サービスページ用）
========================================================================== */
:root {
  --opt-blue: #133664;
  --opt-yellow: #fabe00;
  --opt-gray: #738691;
  --opt-red: #CC0000;
  --opt-red-bg: #fffafa;
  --opt-gray-bg: #eaeff3;
  --opt-gray-dark: #343a40;
  --opt-gray-border: #b9c3c8;
  --opt-bluegray: #ccd9e2;
  --opt-softgray: #f9f9f9;
  --opt-link-blue: #0033aa;
  --mineo-green: #00a23f;
  --opt-warning: #ffc107;
  --opt-font-sans-serif:"メイリオ", Meiryo, "Noto Sans", sans-serif;
  --opt-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --opt-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

.caseDlWrap {
	margin: 0 auto 2rem auto;
	width: 94%;
	max-width: 1120px;
	display: flex;
	justify-content:space-evenly;
}
 
.tab-buttons {
	display: flex;
	justify-content: center;
	margin-bottom: 1em;
}

.tab-btn {
	position: relative;
	padding: 0.5em 1em;
	background: #ddd;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	width: 40%;
	border-radius: 10px;
	margin-right: 1em;
	padding: 1em .5em;
}
.tab-buttons .tab-btn:last-of-type {
	margin-right: 0;
}
.tab-btn::after {
	position: absolute;
	content: "＋";
	color: #000;
	font-weight: 600;
	font-size: 1em;
	right: 1.25em;
}
.tab-btn:hover {
	background: var(--opt-yellow);
	color: #fff;
}
.tab-btn:hover::after {
	color: #fff;
}
.tab-btn.active {
	background: var(--opt-blue);
	color: white;
}
.tab-btn.active::after {
	position: absolute;
	content: "\f282";
	font-family: bootstrap-icons;
	color: #fff;
	font-weight: 600;
	font-size: 1.5em;
	right: 1.25em;
}
.tab-btn.active:hover {
	cursor: default;
}
.tab-content-container {
	max-width: 980px;
	margin: 0 auto;
}
@media (max-width: 767px) {
	.tab-buttons {
		flex-direction: column;
	}
	.tab-btn {
		margin: .5em auto;
		font-size: 1rem;
		width: 80%;
	}
    .tab-buttons .tab-btn:last-of-type {
    	margin-right: auto;
    }
}

.tab-content{
  display: none;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.tab-content.active {
	display: flex;
}

@media (max-width: 767px) {
  .tab-content.active {
    flex-direction: column;
  }
}

.lead_text {
  text-align: center;
  font-size: 1.8em;
}

.pdfDl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .pdfDl {
    width: 95%;
  }
}
.categoryName {
  width: 80%;
  margin: 3.5rem auto 1.5rem;
  padding: 0.8em;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  color: var(--opt-blue);
  border-top: var(--opt-yellow) 7px double;
  border-bottom: var(--opt-yellow) 7px double;
}

.dlLink {
  margin-top: 1rem;
}

.dlLink a {
  color: #000;
  text-decoration: underline;
}

.dlLink a:hover {
  background: var(--opt-blue);
  color: #fff;
}

@media (max-width: 767px) {
  .dlLink a:hover {
    opacity: 0.7;
  }
}