html {
	font-size: 16px;
	/* 1rem = 16px */
	scroll-padding-top: 120px;
	scroll-behavior: smooth;


}

body {
	font-size: 1rem;
	/* 16px */
	font-family: 'Yu Gothic', 'Meiryo', sans-serif;
	color: #222;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}

main {
	max-width: 1080px;
	margin: 0 auto;
	box-sizing: border-box;
}

ul,
ol {
	padding-left: 0em;
	margin-bottom: 1.5em;
}

li {
	list-style: none;
	text-indent: -1em;
	padding-left: 1em;
}

.li_circle {
	color: #80CFF4;
}

a {
	color: #000;
	text-decoration: none;
	transition: color 0.2s;
}

a:hover {
	color: #004b87;
	text-decoration: underline;
}

p {
	text-align: justify;
	margin-block-start: 0em;

}

.red {
	color: #E60012;
}

/* ===== 見出し ===== */
h2,
h3,
h4 {
	font-weight: normal;
	margin-top: 2em;
	margin-bottom: 0.5em;
	letter-spacing: 0.03em;
}

/* h2：全体の見出しデザイン */
h2 {
	background: #00AEEF;
	color: #fff;
	font-size: 1.75rem;
	/* 28px */
	padding: 0.6em 1em;
	margin: 2.5em 0 1.5em 0;
	border-radius: 0;
	line-height: 1;
	width: 100%;
	box-sizing: border-box;
	display: flex;

}

/* h3：小見出しデザイン */
h3 {
	border: solid 2px #00AEEF;
	color: #00AEEF;
	font-size: 1.25rem;
	/* 20px */
	padding: 0.2em 1em;
	margin: 2em 0 1em 0;
	box-sizing: border-box;
	background: none;
	display: flex;
}

.num {
	white-space: nowrap;
}

/* h4：小小見出しデザイン */
h4 {
	color: #00AEEF;
	font-size: 1.25rem;
	/* 20px */
	border-left: 6px solid #00AEEF;
	padding: 0.2em 0 0.2em 1em;
	margin: 2em 0 1em 0;
	border-bottom: 1.5px solid #00AEEF;
	box-sizing: border-box;
	background: none;
	line-height: 1.4em;
}

/* ===== メインビジュアル ===== */

.main-visual {
	margin-top: 98px;

}

.main-visual img {
	width: 100%;
	display: block;
	object-fit: cover;
}

/* ===== こんなお悩みありませんか？セクション ===== */
.troubles-section {
	padding: 2em 1em;
	border-radius: 10px;
	margin-bottom: 2em;
}

.troubles-header {
	background: #00A0E9;
	color: #fff;
	text-align: center;
	font-weight: normal;
	font-size: 1.75rem;
	padding: 0.7em 0;
	margin-bottom: 1.5em;
}

.troubles-catch {
	text-align: center;
	font-weight: normal;
	margin: 2em 0 0.5em 0;
	font-size: 1.8em;
}

.arrow-down {
	width: 0;
	height: 0;
	border-left: 24px solid transparent;
	border-right: 24px solid transparent;
	border-top: 28px solid #009fe8;
	margin: 0 auto 1.5em auto;
}

/* ===== 2カラムレイアウト ===== */
.two-column {
	display: flex;
	gap: 3rem;
	margin: 2em 0;
}

.two-column .text-column,
.two-column .image-column,
.two-column div {
	flex: 1 1 0;
}



.two-column .image-column {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.two-column img {
	max-width: 100%;
	height: auto;
}

/* 7:3の比率 */
.two-column.two-seven-three .left {
	flex: 0 1 70%;
}

.two-column.two-seven-three .right {
	flex: 0 1 30%;
}

/* 6:4の比率 */
.two-column.two-six-four .left {
	flex: 0 1 60%;
}

.two-column.two-six-four .right {
	flex: 0 1 40%;
}

/* ===== 1カラム画像 ===== */
.image-container,
.howto-items .image-container {
	text-align: center;
	margin: 2em 0;
}

.image-container img {

	width: 100%;
	height: auto;
}

/* ===== トラブルリスト ===== */
.trouble-list {
	list-style: none;
	padding: 0;
	margin: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.trouble-list li {
	background: #eaf4fb;
	padding: 0.3em 1em 0.3em 3.5em;
	position: relative;
	font-size: 1em;

}

.trouble-list .check {
	position: absolute;
	left: 0.7em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.2em;
	height: 1.2em;
	background: url('../images/check-icon.svg') no-repeat center/contain;
	display: inline-block;
}

/* ===== INDEX（目次） ===== */
.index-box {
	background: #eaf4fb;
	border: 6px solid #009fe8;
	padding: 2em 1.5em 2em 1.5em;
	max-width: 880px;
	margin: 0 auto 2em auto;
	box-shadow: 0 4px 16px rgba(0, 159, 232, 0.06);
	position: relative;
}

.index-title {
	text-align: center;
	font-weight: normal;
	color: #009fe8;
	font-size: 1.6em;
	letter-spacing: 0.15em;
	margin-bottom: 1.2em;
	display: inline-block;
	padding: 0.3em 1.5em;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 2px 8px rgba(0, 159, 232, 0.05);
}

.index-list {
	margin: 0 auto;
}

.index-list>ol {
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	column-gap: 2em;
	margin: 0;
	padding-left: 1.5em;
	font-size: 1.05em;
}

.index-list ol li {
	margin-bottom: 0.7em;
	line-height: 1.5;
	font-weight: 500;
	transition: color 0.2s;
}

.index-list ol li a {
	text-decoration: none;
	transition: color 0.2s, border 0.2s;
	padding: 0.1em 0;
	display: inline-block;
}

.index-list ol li a:hover {
	color: #009fe8;
	border-bottom: 2px solid #009fe8;
}

.index-list ol ol {
	columns: 1;
	margin: 0.5em 0 0.5em 0em;
	padding-left: 0;
	font-size: 0.98em;
}

.index-list ol ol li {
	font-weight: normal;
	margin-bottom: 0.4em;
}

/* ===== PDFダウンロードボタン ===== */

.pdf_dl {
	margin: 0 auto;
	text-align: center;
}

.download-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #15A9EF;
	color: #fff;
	font-size: 1.25rem;
	/* 20px */
	font-weight: normal;
	padding: 0.7em 1em;
	border-radius: 0;
	text-decoration: none;
	width: 100%;
	max-width: 600px;
	box-shadow: 0 2px 8px rgba(21, 169, 239, 0.10);
	transition: background 0.2s, box-shadow 0.2s;
	letter-spacing: 0.04em;
	margin: 2em auto 1.5em auto;
}

.download-btn:hover {
	background: #009fe8;
	box-shadow: 0 4px 16px rgba(21, 169, 239, 0.16);
	color: #fff;
}

.download-icon {
	width: 1.4em;
	height: 1.4em;
	margin-left: 0.6em;
	object-fit: contain;
	display: inline-block;
}

/* ===== ボタン（通常） ===== */
.btn,
a.btn {
	display: inline-block;
	background: #0072c6;
	color: #fff !important;
	padding: 0.75em 2em;
	border-radius: 4px;
	font-weight: normal;
	font-size: 1.1em;
	margin: 1em 0;
	text-align: center;
	transition: background 0.2s;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn:hover,
a.btn:hover {
	background: #005fa3;
	color: #fff !important;
}

/* ===== その他 ===== */
.section-summary {
	background-color: #CCECFB;
	width: 80%;
	margin: 0 auto;
	padding: 1rem;
	text-align: center;
	font-size: 1.2em;
	font-weight: 400;
}

/* ===== 制作実績 ===== */
.works-list {
	display: flex;
	gap: 3rem;
	flex-wrap: wrap;
	margin: 1.5em 0;
}

.works-list article {
	flex: 1 1 220px;
	min-width: 200px;
	background: #f5faff;
	border-radius: 8px;
	text-align: center;
	padding: 1em;
}

.works-list img {
	max-width: 100%;
	border-radius: 6px;
	margin-bottom: 0.5em;
}

/* ===== お問い合わせ ===== */
.contact .phone-link {
	display: inline-block;
	font-size: 1.3em;
	font-weight: bold;
	color: #0072c6;
	margin: 1em 0;
}

/* ===== セクション区切り ===== */
section {
	margin-bottom: 2.5em;
	padding-bottom: 0.5em;
}

section:last-child {
	border-bottom: none;
}

/* ===== レスポンシブ対応 ===== */
@media (max-width: 900px) {
	main {
		padding: 1.5rem 4vw;
	}

	.two-column {
		flex-direction: column;
		gap: 1.5em;
	}

	.works-list,
	.link-cards {
		flex-direction: column;
		gap: 1em;
	}

	.image-column img {
		max-width: 100%;
	}
}

@media (max-width: 700px) {
	.two-column {
		flex-direction: column;
		gap: 1em;
	}

	.index-list>ol {
		columns: 1;
		font-size: 1em;
	}
}

@media (max-width: 600px) {

	.main-visual img,
	.image-container img,
	.two-column img {
		max-width: 100%;
		height: auto;
	}

	.mid-cta {
		padding: 1.5em 0.5em;
	}

	html {
		font-size: 14px !important;
	}

	.index-box {
		font-size: 12px;
	}

	h2,
	h3,
	h4 {
		font-size: 1.2em;
	}

	.section-summary {
		font-size: 1em;
		width: 100%;
	}

	.download-btn {
		font-size: 1em;

	}


}

.download-btn {
	width: 100%;
	display: block;
	box-sizing: border-box;
}

.related-articles {
	margin: 2em 0;
}

.related-articles h5 {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 1em;
	margin-bottom: 0;
	color: #222;
}

.link-cards {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	max-width: 800px;
	margin: 0 auto;
}

.link-card-horizontal {
	display: flex;
	align-items: flex-start;
	background: #f5f5f5;
	border: 1.5px solid #888;
	border-radius: 3px;
	text-decoration: none;
	color: #222;
	padding: 1em 1.2em;
	transition: box-shadow 0.2s, border 0.2s;
	box-sizing: border-box;
	gap: 1.2em;
}

.link-card-horizontal:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border-color: #00AEEF;
}

.card-thumb {
	width: 160px;
	object-fit: cover;
	border-radius: 3px;
	flex-shrink: 0;
	background: #eee;
}

.card-content {
	flex: 1;
}

.card-title {
	font-size: 1rem;
	margin: 0 0 0.3em 0;
}

.card-meta {
	font-size: 0.95em;
	color: #555;
	margin-bottom: 0.3em;
}

.card-desc {
	font-size: 0.8em;
	margin: 0;
	color: #222;
	line-height: 1.2;
}


@media (max-width: 600px) {
	.link-card-horizontal {
		flex-direction: column;
		align-items: stretch;
		padding: 0.8em 0.7em;
	}

	.card-thumb {
		height: 100px;
		width: 100%;
		margin-bottom: 0.7em;
	}

	.trouble-list li {
		margin-bottom: 0.3em;
		line-height: 1.3em;
		text-indent: 0;
		padding-left: 2.5em;
	}

	.troubles-catch {
		line-height: 1.5em;
	}

	.main-visual,
	.main-visual img {
		margin: 0;
		padding: 0;
		max-width: 100%;
	}

	.responsive-img {
		margin: 1em 0;
		padding: 0;
		max-width: 100%;
	}



}

/* ===== 外側の左右ブロック ===== */
.outer-blocks {
	display: flex;
	gap: 3rem;
	/* ブロック間の左右の余白 */
	margin-bottom: 2em;
}

.outer-blocks>div {
	/* 直接の子要素のdiv (info-block と sales-block) */
	flex: 1 1 0;
	/* 左右のブロックが同じ幅になるように */
	box-sizing: border-box;
	/* paddingを含めて幅を計算 */
}

/* ===== ブロック内の要素（見出し、テキスト、画像） ===== */
.outer-blocks h4 {
	/* 既存のh4のスタイルを適用 */
	margin-top: 0;
	/* ブロック内で最初の要素なので上マージンをリセット */
	margin-bottom: 0.5em;
}

.outer-blocks .block-text {
	margin-bottom: 1em;
}

.outer-blocks .block-image img {
	max-width: 100%;
	height: auto;
	display: block;
	/* 画像が親要素の幅いっぱいに表示されるように */
	margin-bottom: 0;
}

/* レスポンシブ対応 (700px以下の場合など) */
@media (max-width: 700px) {
	.outer-blocks {
		flex-direction: column;
		/* 縦並びにする */
		gap: 1em;
	}
}

/* ===== CTAセクション ===== */
.mid-cta {
	background-color: #F0F0E6;
	margin-bottom: 2.5em;
	padding: 4em;

}

.fl-cta {
	display: flex;
	justify-content: space-between;
	/* 左右の要素を両端に配置 */
	align-items: flex-start;
}

.cta-left {
	padding-right: 2em;
	/* 右側の要素との間隔 */
	flex: 1 1 0;

}

/* ===== CTAセクションの見出し（一行表示） ===== */
.cta-title {
	color: #00A0E9;
	font-size: 1.5em;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0.5em;
	white-space: nowrap;
	/* テキストを折り返さない */
	overflow: hidden;
	/* はみ出した部分を隠す */
	text-overflow: ellipsis;
	/* はみ出した部分を ... で表示 */
	text-align: center;
}

.cta-left p {
	color: #000;
	font-size: 1em;
	line-height: 2;
	margin: 0;
}

.cta-right {
	display: flex;
	flex-direction: column;
	gap: 1em;
	/* ボタンと電話番号の間の余白 */
	align-items: flex-end;
	/* 右寄せ */
	flex: 1 1 0;

}

.contact-button-image,
.phone-number-image {
	display: block;
	/* 画像リンクをブロック要素にする */
	transition: opacity 0.2s;
}

.contact-button-image:hover,
.phone-number-image:hover {
	opacity: 0.8;
	/* ホバー時に少し透明にする */
}

.contact-button-image img,
.phone-number-image img {
	max-width: 100%;
	/* 親要素の幅に合わせてリサイズ */
	height: auto;
}

/* レスポンシブ対応 (画面幅が狭い場合) */
@media (max-width: 768px) {
	.mid-cta {
		flex-direction: column;
		text-align: center;
		padding: 1em;
	}

	.fl-cta {
		flex-direction: column;
	}

	.cta-left {
		padding-right: 0;
		margin-bottom: 1.5em;
		text-align: center;
	}

	.cta-title {
		white-space: normal;
		/* 通常の折り返しに戻す */
		overflow: visible;
		/* はみ出した部分を表示 */
		text-overflow: clip;
		/* ... を表示しない */
		font-size: 1.2em;
		line-height: 1.4;
	}

	.cta-right {
		align-items: center;
	}

	.contact-button-image img,
	.phone-number-image img {
		width: 80%;
		/* 小さい画面では少し小さく表示 */
		margin: 0 auto;
		/* 中央寄せ */
	}
}

/* ===== それぞれの役割について セクション ===== */
.section-roles {
	margin-bottom: 2.5em;
	padding-bottom: 0.5em;
}

.section-roles h3 {
	/* 既存のh3スタイルを適用 */
	text-align: left;
	/* 必要に応じて */
}

.section-roles h4 {
	/* 既存のh4スタイルを適用 */
	text-align: left;
	/* 必要に応じて */
	margin-bottom: 1.5em;
}

.roles-container {
	display: flex;
	gap: 3rem;
	/* 左右の項目の間隔 */
	align-items: flex-start;
	/* 上部で揃える */
	max-width: 1080px;
	/* 必要に応じて */
	margin: 0 auto;
	/* 中央寄せ */
}

.role-item {
	flex: 1;
	/* 左右の項目が同じ幅になるように */
	text-align: left;
}

.role-item h5 {
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	margin-top: 0;
	margin-bottom: 1em;
	background-color: #ADE1F8;
	padding: 0.5em 0;
}

.role-item p {
	color: #555;
	font-size: 1em;
	line-height: 1.6;
	margin-bottom: 1.5em;
}

.role-images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	/* 画像をレスポンシブに配置 */
	gap: 1rem;
	/* 画像間の間隔 */
}

.role-images img {
	max-width: 100%;
	height: auto;
}

/* レスポンシブ対応 (画面幅が狭い場合) */
@media (max-width: 768px) {
	.roles-container {
		flex-direction: column;
		/* 縦並びにする */
		gap: 3em;
	}

	.role-images {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		/* より小さく */
	}
}

.design-examples {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	/* 画像間の間隔 */
}

.design-examples img {
	max-width: 100%;
	height: auto;
}

/* デスクトップなどの広い画面 (769px以上) */
@media (min-width: 769px) {
	.design-examples {
		grid-template-columns: repeat(3, 1fr);
		/* 3列に固定 */
	}
}

/* スマートフォンなどの狭い画面 (768px以下) */
@media (max-width: 768px) {
	.design-examples {
		grid-template-columns: repeat(2, 1fr);
		/* 2列に固定 */
	}
}

/* ===== 会社案内の仕様を選定 セクション ===== */
.section-pamphlet-specs {
	margin-bottom: 2.5em;
	padding-bottom: 0.5em;
}

.section-pamphlet-specs h3 {
	/* 既存のh3スタイルを適用 */
	text-align: left;
	margin-bottom: 1em;
}

.section-pamphlet-specs p {
	font-size: 1em;
	line-height: 1.6;
}

/* ===== 2カラム ===== */
.specs-columns {
	display: flex;
	gap: 3rem;
	/* カラム間の間隔 */
	margin-bottom: 1.5em;
}

.spec-column {
	flex: 1;
	/* 左右のカラムが同じ幅になるように */
	text-align: left;
}


.spec-column p {
	color: #555;
	font-size: 1em;
	line-height: 1.6;
	margin-bottom: 0;
}

/* ===== 1カラム ===== */
.spec-fullwidth {
	text-align: left;
}

.spec-fullwidth p {
	color: #555;
	font-size: 1em;
	line-height: 1.6;
	margin-bottom: 0;
}

/* レスポンシブ対応 (画面幅が狭い場合) */
@media (max-width: 768px) {
	.specs-columns {
		flex-direction: column;
		/* 縦並びにする */
		gap: 1.5em;
	}
}

/* ===== 会社案内の形状 セクション ===== */
.section-pamphlet-format {
	margin-bottom: 2.5em;
	padding-bottom: 0.5em;
}

.section-pamphlet-format h3 {
	/* 既存のh3スタイルを適用 */
	text-align: left;
	margin-bottom: 1em;
}

.format-list {
	display: flex;
	flex-wrap: wrap;
	/* 折り返しあり */
	padding-left: 0;
	list-style: none;
	margin: 4em 0;
}

.format-item {
	flex: 1 0 calc(50% - 1.5rem);
	/* 2列配置、間隔調整 */
	text-align: center;
}

.format-item img {
	width: auto;
	height: 150px;
	margin-bottom: 0.5em;
}

.format-item p {
	text-align: center;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.format-item {
		flex-basis: calc(25% - 1.5rem);
		/* 4列配置、間隔調整 */
	}
}

/* ===== 製本と加工 セクション ===== */
.section-pamphlet-binding-processing {
	margin-bottom: 2.5em;
	padding-bottom: 0.5em;
	display: flex;
	gap: 3rem;
	align-items: flex-start;
}

.section-pamphlet-binding-processing h3 {
	/* 既存のh3スタイルを適用 */
	text-align: left;
	margin-bottom: 1em;
}


.binding-item,
.processing-item {
	flex: 1;
	text-align: left;
}

.center {
	display: inline-block;
	width: 100%;
	text-align: center;
}



.binding-item img,
.processing-item img {
	width: 80%;
	display: block;
	height: auto;
	margin: 2em auto 0 auto;
}



@media (max-width: 768px) {

	.binding-container,
	.processing-container {
		flex-direction: column;
		gap: 1.5em;
	}

	.section-pamphlet-binding-processing {
		flex-direction: column;
	}
}


/* ===== 制作会社の選定 セクション ===== */
.section-select-production-company {
	margin-bottom: 2.5em;
	padding-bottom: 0.5em;
}

.section-select-production-company h3,
.section-select-production-company h4 {
	text-align: left;
	margin-bottom: 1em;
}



.company-types {
	display: flex;
	gap: 3rem;
	margin-bottom: 2em;
}

.company-type {
	flex: 1;
	padding: 1.5em;
	background-color: #D9F1FC;
}

.company-type h5 {
	font-size: 1.1em;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0.5em;
}

.company-type p {
	line-height: 1.6;
	margin-bottom: 0;
}



.checkbox {
	background-color: #D9F1FC;
	padding: 1em;
}

.checkbox h5 {
	font-size: 1.1em;
}

.checklist {
	margin: 0;
}

.section-select-production-company ul.checklist {
	list-style: none;
	padding-left: 0;
}

.section-select-production-company ul.checklist li::before {
	content: "☐";
	display: inline-block;
	padding-left: 1em;
}

.link-cards.vertical {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

/* 既存の .link-card-horizontal スタイルはそのまま使用 */

/* レスポンシブ対応 (画面幅が狭い場合) */
@media (max-width: 768px) {
	.company-types {
		flex-direction: column;
		gap: 1.5em;
	}
}

.two-column h5 {
	margin: 0;
}

.between-lines {
	line-height: 2;
}

/* ===== 制作会社との打ち合わせ ＆ [前準備] セクション ===== */
.section-meeting-preparation {
	margin-bottom: 2.5em;
	padding-bottom: 0.5em;
}

.section-meeting-preparation h3 {
	/* 既存のh3スタイルを適用 */
	text-align: left;
	margin-bottom: 1em;
}

.section-meeting-preparation .meeting-container {
	display: flex;
	gap: 3rem;
	align-items: flex-start;
	/* 縦方向中央揃え */
}

.section-meeting-preparation .meeting-text {
	flex: 1;
	text-align: left;
}

.section-meeting-preparation .meeting-text p {
	font-size: 1em;
	line-height: 2;
	margin-bottom: 0;
}



.section-meeting-preparation .meeting-image {
	flex: 1;
	text-align: center;
}

.section-meeting-preparation .meeting-image img {
	max-width: 100%;
	height: auto;
}

/* ===== 校正について セクション ===== */
.section-proofreading {
	margin-bottom: 2.5em;
	padding-bottom: 0.5em;
}

.section-proofreading h3 {
	/* 既存のh3スタイルを適用 */
	text-align: left;
	margin-bottom: 1em;
}

.section-proofreading .proofreading-container {
	display: flex;
	gap: 3rem;
	align-items: flex-start;
	/* 縦方向中央揃え */
}

.section-proofreading .proofreading-image {
	flex: 1;
	text-align: center;
}

.section-proofreading .proofreading-image img {
	max-width: 100%;
	height: auto;
}

.section-proofreading .proofreading-text {
	flex: 1;
	text-align: left;
}

.section-proofreading .proofreading-text p {
	font-size: 1em;
	line-height: 2;
	margin-bottom: 0;
}

/* レスポンシブ対応 (画面幅が狭い場合) */
@media (max-width: 768px) {

	.section-meeting-preparation .meeting-container,
	.section-proofreading .proofreading-container {
		flex-direction: column;
		/* 縦並びにする */
		gap: 1.5em;
	}

	.section-meeting-preparation .meeting-image,
	.section-proofreading .proofreading-image {
		order: -1;
		/* 画像をテキストより上に表示 (必要に応じて) */
	}

	.usage-container {
		flex-direction: column;
	}
}

.design-images {
	/* flexboxやgridの指定は削除 */
}

.design-images img {
	display: block;
	/* ブロック要素として配置し、縦に並べる */
	width: 100%;
	/* 親要素の幅いっぱいに広げる */
	height: auto;
	/* 高さの比率は維持 */
	margin-bottom: 1rem;
}

/* 最後の画像のmargin-bottomは不要な場合 */
.design-images img:last-child {
	margin-bottom: 0;
}

.usage-container {
	display: flex;
	/* フレックスボックスで横並びにする */
	align-items: baseline;
	/* ベースラインで揃える（必要に応じて center などに変更） */
	margin-bottom: 1em;
	/* 下の要素との間隔 */
}

.case-item h6 {
	display: inline-block;
	color: red;
	border: 1px solid red;
	padding: 0.2em 0.5em;
	border-radius: 4px;
	font-size: 1em;
	font-weight: bold;
	margin-right: 0.5em;
	/* 説明文との間隔 */
	margin-bottom: 0;
	/* 親要素（.usage-container）でmarginを設定するため削除 */
	margin-block-start: 0em;
}

.usage-text {
	flex-grow: 1;
	/* 説明文が残りのスペースを埋めるように */
	color: #555;
	font-size: 1em;
	line-height: 1.6;
	margin-bottom: 0;
	/* 親要素（.usage-container）でmarginを設定するため削除 */
}

/* ===== ブランド構築 セクション (修正) ===== */
.section-brand-building {
	margin-bottom: 2.5em;
	padding-bottom: 0.5em;
}

.section-brand-building h3 {
	/* 既存のh3スタイルを適用 */
	text-align: left;
	margin-bottom: 1em;
}

.section-brand-building .brand-intro {
	display: flex;
	gap: 3rem;
	align-items: flex-start;
	margin-bottom: 1.5em;
}

.section-brand-building .brand-image {
	flex: 0 0 auto;
	/* 幅をコンテンツに合わせる */
	text-align: center;
	display: flex;
}

.section-brand-building .brand-image img {
	max-width: 300px;
	height: auto;
	margin: 1em 6em;
}

.section-brand-building .brand-text {
	flex: 1;
	text-align: left;
}

.section-brand-building .brand-text .question {
	color: #555;
	font-size: 1.1em;
	line-height: 1.6;
	margin-bottom: 1em;
}

.section-brand-building .brand-text .catch-copy {
	margin-bottom: 0.8em;
	text-align: center;
}

.section-brand-building .brand-text .catch-copy .emphasized {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 0.2em;
	line-height: 1.4;
}

.section-brand-building .brand-text .catch-copy .offer {
	color: #00A0E9;
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	margin-top: 0.5em;

}

.section-brand-building .brand-text p {
	font-size: 1em;
	line-height: 2;
	margin-bottom: 1em;
	text-align: left;
}

.section-brand-building .brand-images {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.section-brand-building .brand-images img {
	max-width: 90%;
	height: auto;
}

/* レスポンシブ対応 (画面幅が狭い場合) */
@media (max-width: 768px) {
	.section-brand-building .brand-intro {
		flex-direction: column;
		/* 縦並びにする */
		align-items: flex-start;
		/* 左寄せに戻す */
		gap: 1.5em;
	}

	.section-brand-building .brand-image {

		justify-content: center;
	}

	.section-brand-building .brand-image img {
		max-width: 80%;
		margin: 0;
		/* 小さい画面での球体画像のサイズ調整 */
	}

	.section-brand-building .brand-images img {
		max-width: 100%;
		/* 1列で表示 */
	}
}

.emphasized {
	position: relative;
	display: inline-block;
	padding: 7px 10px;
	min-width: 120px;
	max-width: 100%;
	color: #00A0E9;
	font-size: 16px;
	background: #FFF;
	border: solid 3px #00A0E9;
	box-sizing: border-box;
}

.emphasized:before {
	content: "";
	position: absolute;
	bottom: -24px;
	left: 50%;
	margin-left: -15px;
	border: 12px solid transparent;
	border-top: 12px solid #FFF;
	z-index: 2;
}

.emphasized:after {
	content: "";
	position: absolute;
	bottom: -30px;
	left: 50%;
	margin-left: -17px;
	border: 14px solid transparent;
	border-top: 14px solid #00A0E9;
	z-index: 1;
}

.emphasized p {
	margin: 0;
	padding: 0;
}


/* ===== 失敗しない会社案内・パンフレットの作り方【完全ガイド】 セクション ===== */
.section-download-guide {
	background-color: #F0F0E6;
	padding: 2em 1em;
	text-align: center;
}

.guide-container {
	display: flex;
	flex-direction: column;
	max-width: 800px;
	margin: 0 auto;
	gap: 1.5em;
}

.guide-image {
	text-align: center;
	display: flex;
	justify-content: center;
}

.guide-image img {
	max-width: 130px;
	height: auto;
}

.guide-info {
	text-align: center;
	max-width: 640px;
}

.guide-info h3 {
	color: #00A0E9;
	font-size: 1.3em;
	margin-top: 0;
	margin: 0;
	padding: 0;
	border: 0px;
}

.guide-info p {
	font-size: 0.9em;
	line-height: 1.6;
	margin-bottom: 1.5em;
}

.download-button {
	display: inline-block;
	background-color: #00A0E9;
	color: #fff;
	width: 100%;
	padding: 0.5em 0;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	font-size: 1em;
}

.download-button:hover {
	background-color: #0056b3;
	/* ホバー時の色 */
}

.download-icon {
	margin-left: 0.5em;
}

/* メディアクエリ (画面幅が広い場合) */
@media (min-width: 768px) {
	.guide-container {
		flex-direction: row;
		/* 横並びにする */
		align-items: center;
		/* 縦方向中央揃え */
		text-align: left;
	}

	.guide-image {
		flex: 0 0 auto;
		text-align: left;
	}

	.guide-info {
		flex: 1;
		text-align: left;
	}

}


/*-----------------------　　ヘッダー　　-----------------------*/



#fixed {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	transition: padding .3s;
}

/*fixedでブロックがなくなるのではじめの要素のトップに余白を持たせる*/
header {
	padding-top: 74px;
}

/*==ふわっと出現させるためのCSS*/

/*　上に上がる動き　*/

#fixed.UpMove {
	position: fixed;
	width: 100%;
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-100px);
	}
}

/*　下に下がる動き　*/

#fixed.DownMove {
	position: fixed;
	width: 100%;
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


.header_flex {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	align-items: center;
	padding: 0 5%;
	height: 64px;

}



nav {
	background-color: black;
	height: 34px;
}

nav a {
	color: #fff;
}


.naviflex {
	width: 1080px;
	height: 100%;
	margin: 0 auto;
	display: flex;
}

.naviflex li {
	list-style-type: none;
	flex-grow: 1;
	text-align: center;
	height: 100%;
	line-height: 35px;
	border-left: 1px solid #fff;
	border-right: 1px solid #ffff;
}

.naviflex li+li {
	border-left: 0;
	border-right: 1px solid #fff;
}

.headderRightbox {
	margin-right: 6rem;
	margin-bottom: 0px;
	display: flex;
	justify-content: space-between;
	height: 100%;

}

.headderRightbox li {
	margin-right: 3rem;
	flex-shrink: 0;
}

.headcontact {
	background-color: #00A0E9;
	color: #fff;
	font-weight: 800;
	font-size: 0.7em;
}

.headbtn {
	background-color: #00A0E9;
	color: #fff;
	padding: 1em;
	margin: 0 auto;
	text-align: center;
	font-size: 0.7em;
	cursor: pointer;
	text-indent: 0em;

}

.headbtn:hover {
	background-color: yellow;
	color: #00A0E9;
	transition: 1.0s;

}

.headbtn a {
	color: #fff;
}


/*-----------------------　　メガ　　-----------------------*/

/* スマホ閲覧時のハンバーガーメニュー */

#hanburger {
	display: none;
	/* チェックボックスを非表示 */
}

.menu_button {
	/* ボタンのスタイル */
	width: 50px;
	/* 幅 */
	height: 50px;
	/* 高さ */
	position: fixed;
	top: 10px;
	right: 60px;
	/* 背景色 */
	z-index: 999;
}

.megaflex {
	display: flex;
}

.megaleft {
	width: 500px;
}

.menu_button::before {
	/* アイコンのスタイル */
	font-family: "Font Awesome 5 Free";
	content: "\f0c9";
	/* アイコン「３本線」 */
	font-weight: 600;
	font-size: 3rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#hanburger:checked+.menu_button::before {
	/* アイコンのスタイル（チェック済み） */
	content: "\f00d";
	/* アイコン「×印」 */
}

.global_menu {
	/* メニュー全体のスタイル */
	visibility: hidden;
	/* メニューを非表示 */
	width: 1000px;
	height: auto;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	right: 0;
	padding: 30px;
	color: #333;
	/* 文字色 */
	background: #D2D2D2;
	/* 背景色 */
	overflow-y: scroll;
	z-index: 99;
}

#hanburger:checked~.global_menu {
	/* メニュー全体のスタイル（チェック済） */
	visibility: visible;
	/* メニューを表示 */
	animation-duration: 0.5s;
	animation-name: fade-in;
}


@keyframes fade-in {
	from {
		/*アニメーションを開始するときのCSSを記述*/
		visibility: hidden;
		opacity: 0;
	}

	to {
		/*アニメーションを終了するときのCSSを記述*/
		visibility: visible;
		opacity: 1;
	}

}

.global_menu a {
	/* 各項目のスタイル */
	display: block;
	width: 100%;
}

.global_menu a:hover {
	/* 各項目のスタイル（ホバー時） */
	background: #ffb6c1;
}


.menu>a {
	/* 親項目のスタイル */
	font-weight: bold;
	padding: 5px 10px;
}

.child_menu>li>a {
	padding: 5px 30px 5px 0;

	color: #000;
	padding-left: 1em;
	text-indent: -1em;
}

.megahead {
	background-color: #fff;
	padding: 5px;
	width: 90%;
	display: block;
	margin-bottom: 1rem;
}

.navflex {
	display: flex;
}

.meganavbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	height: 280px;
}

.meganavbox li {
	width: 46%;
	height: 120px;
	background-color: #fff;
	color: #000;
}

.meganavbox li a {
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	box-sizing: border-box;
	outline: 1px solid rgb(0, 0, 0);
	outline-offset: -10px;

}

.pagetop {
	position: fixed;
	right: 15px;
	bottom: 60px;
}

.pagetop a {
	display: block;
	font-size: 0;
	width: 50px;
	height: 50px;
	text-align: center;
	background: #7db4e6;
	line-height: 50px;
}

.pagetop a i {
	font-size: 20px;
	color: #fff;
	line-height: 50px;
}

.bottom-sticky-nav {
	height: 60px;
	position: fixed;
	display: block;
	background: #00A0E9;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
}

.bottom-sticky-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-evenly;
}

.flexc {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.bottom-sticky-nav ul li {
	flex: 1;
}


.bottom-sticky-nav ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 60px;
	color: #fff;
	padding-top: 12px;
}

.bottom-sticky-nav li+li {
	border-left: solid 0.5px #fff;
}

.bottom-sticky-nav ul li a:hover,
.bottom-sticky-nav ul li a:focus {
	text-decoration: none;
}

.bottom-sticky-nav ul li a i {
	font-size: 1.4rem;
}

.bottom-sticky-nav ul li a span {
	line-height: 1.;
	font-size: 0.8rem;
}

@media (min-width: 768px) {
	.bottom-sticky-nav {
		display: none;
	}
}