@charset "utf-8";

/* -------------------------------------------------------------------

	大塚商会による中小企業診断士のための理論政策更新研修 全体で共通で読み込むCSS

	最終更新：　2025年2月7日

	/koushin-kenshu/のすべてのページから読むことを想定しています。


■CSS書き順■
 * display / list-style
 * position / float / clear / z-index
 * width / height / margin / padding / border
 * background
 * color /
   font (font-family / font-style / font-variant / font-weight / font-size / line-height)
   text-decoration / text-align / vertical-align /letter-spacing / white-space / (other text)
 * content
 * cursor

------------------------------------------------------------------- */

/* **********************************************************************************

	00. イニシャライズ

********************************************************************************** */

html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,cite,code,img,q,samp,small,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,figcaption,figure,footer,header,nav,section,time,audio,video {margin:0; padding:0; border:0; outline:0; font-size:100%; font-style:normal; vertical-align:baseline; background-color:transparent; }body {line-height:1; }blockquote,q {quotes:none; }blockquote:before,blockquote:after,q:before,q:after {content:''; content:none; }a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }table {border-collapse:collapse; border-spacing:0; }input,select {vertical-align:top; }article,aside,footer,header,main,nav,section{display:block; }
html { font-size:62.5%; overflow-y: scroll; }
body {
	background-color:#fff;
	color:#333;
	font-family:Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Helvetica, sans-serif;
	text-align:center; }
a:link    { color:#2451c6; text-decoration:none; }
a:active  { color:#2451c6; text-decoration:underline; }
a:visited { color:#7c169e; text-decoration:none; }
a:hover   { color:#2451c6; text-decoration:underline; }

input { font-family:Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Helvetica, sans-serif; }

/* Windows タブレット用の viewport 指定 */
@-ms-viewport { width: auto; }
@media
	only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait),
	only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) {
@-ms-viewport { width: 738px; } /* ■■■ToDo: 企業とプロモで値がずれていた。738px or 730px？ */
}


/* **********************************************************************************

	01. グローバルエレメント定義

********************************************************************************** */

/* -------------------------------------------------------------------

	clearfix

------------------------------------------------------------------- */

/* clearfix */
.clearfix:after { content:""; display:block; clear:both; height:0; visibility:hidden; }
.clearfix { min-height:1px; }
* html .clearfix { height:1px; /*\*//*/ height:auto; overflow:hidden; /**/ }


/* -------------------------------------------------------------------

	テキスト要素

------------------------------------------------------------------- */
#main p { margin:1em 0 0; font-size:16px; font-size:1.6rem; line-height:1.7em; word-break:break-all; }
#main dl dt,
#main dl dd { margin:1em 0 0; font-size:16px; font-size:1.6rem; line-height:1.7em; word-break:break-all; }


/* -------------------------------------------------------------------

	img要素

------------------------------------------------------------------- */
#main img { display:block;}


/* -------------------------------------------------------------------

	リンク

------------------------------------------------------------------- */

/* === kskb0007_1: リンクアイコン　通常の同画面遷移用 === */
a.icons-arrow-r {
	position:relative; display:inline-block; padding-left:16px;}
	a.icons-arrow-r:before{
		display:block; position:absolute; top:0.48em; left:0;
		width:6px; height:6px; content:"";
		border-top:2px solid #bd2c00; border-right:2px solid #bd2c00;
		-ms-transform:rotate(45deg); transform:rotate(45deg);}

/* === kskb0008_1: リンクアイコン　別窓遷移用 === */
a.icons-blank {
	position:relative; display:inline-block; padding-left:16px;}
	a.icons-blank:before{
		display:block; position:absolute; top:calc((1.7em - 9px) / 2); left:2px;
		width:8px; height:8px; border:none; content:"";
		background:url(/koushin-kenshu/common/img/icons-sprite.png) no-repeat;
		background-position:0 0;
		-ms-transform:rotate(0deg); transform:rotate(0deg);}

/* === kskb0009_1: リンクアイコン　別窓遷移用　大塚商会運営外のサイトへのリンク === */
a.icons-external {
	position:relative; display:inline-block; padding-left:16px;}
	a.icons-external:before{
		display:block; position:absolute; top:calc((1.7em - 9px) / 2); left:2px;
		width:8px; height:8px; border:none; content:"";
		background:url(/koushin-kenshu/common/img/icons-sprite.png) no-repeat;
		background-position:0 -18px;
		-ms-transform:rotate(0deg); transform:rotate(0deg);}

/* アイコン打ち消し */
a.icons-none {
	display:inline; padding-left:0;
	background:none; }


/* **********************************************************************************

	02. グローバルエリア定義

********************************************************************************** */

/* -------------------------------------------------------------------

	コンテナ

------------------------------------------------------------------- */

#wrap {
	width:100%; min-width:996px; text-align:left; -webkit-text-size-adjust: none; overflow:hidden; }

/* -------------------------------------------------------------------

	ヘッダー

------------------------------------------------------------------- */

#header { width:960px; margin:0 auto; }

/* ユーティリティ */
#header #header-area-utility {
	padding:13px 0 14px; text-align:right; position:relative;}
/* 背景 */
#header #header-area-utility:before { display:block; position:absolute; top:0; left:-4520px; left:-50vw; z-index:-2;
	width:10000px; width:calc(200vw + 960px); min-width:996px; height:100%; content:"";
	background:#f3f3f3;}
/* 下ボーダー */
#header #header-area-utility:after { display:block; position:absolute; bottom:0; left:-4520px; left:-50vw; z-index:-1;
		width:10000px; width:calc(200vw + 960px); min-width:996px; height:1px; content:"";
		background:#fff; border-bottom:1px solid #eee;}
	/* ロゴとユーティリティメニュー */
	#header #header-area-utility #header-menu-navi { display:inline-block; vertical-align:middle; position:relative; z-index:1;}
		#header #header-area-utility #header-menu-navi ul {
			display:inline-block; margin:0; padding:0; vertical-align:middle;}
			#header #header-area-utility #header-menu-navi ul li {
				display:inline-block; margin:0; padding:0; list-style:none; vertical-align:middle;
				font-size:14px; font-size:1.4rem; line-height:1.5em;}
				#header #header-area-utility #header-menu-navi ul li a.icons-arrow-r {
					background-position: 4px calc((1.5em - 8px) / 2 - 2px);}
	#header #header-area-utility #header-logo-ots {
		display:inline-block; vertical-align:middle; margin:0 0 0 20px; position:relative; z-index:1;}

/* 独自ヘッダー */
#header #header-koushin-kenshu {
	display:table; width:960px; padding:18px 0 20px; position:relative;}
	/* 固定時 */
	#header #header-koushin-kenshu.is-fixed {
		position: fixed; z-index: 2; top: 0;}

/* 下ボーダー */
#header #header-koushin-kenshu:after { display:block; position:absolute; bottom:0; left:-4520px; left:-50vw; z-index:-1;
	width:10000px; width:calc(200vw + 960px); min-width:996px; height:100%; content:"";
	background:#fff; border-bottom:6px solid #bd2c00; box-sizing: border-box;}
	/* ロゴ */
	#header #header-koushin-kenshu #header-logo-koushin-kenshu {
		display:table-cell; width:390px; padding-right:60px; vertical-align:top;}
		#header #header-koushin-kenshu #header-logo-koushin-kenshu img { display:block;}
	/* ナビゲーション */
	#header #header-koushin-kenshu #header-navi-koushin-kenshu { display:table-cell; width:calc(100% - 390px + 60px); vertical-align:top;}
		#header #header-koushin-kenshu #header-navi-koushin-kenshu ul { margin:-10px 0 0 -9px; padding:0;}
			#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li {
				display:inline-block; margin:2px 0 0 9px; padding:0; list-style:none;
				font-size:16px; font-size:1.6rem; line-height:1.7em;}
			#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li:nth-child(1),
			#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li:nth-child(2),
			#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li:nth-child(3),
			#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li:nth-child(4){
				min-width:120px;}
			#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li:nth-child(5) {
				min-width:148px;}
			#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li:nth-child(6) {}
				#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li a {
					padding:7px 20px 5px 32px;
					color:#333; border-radius:10em;}
					#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li a:hover {
						background-color:#faefeb; color:#333; text-decoration:none;}
					#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li.current a {
						padding:7px 26px 5px; background:#bd2c00; color:#fff;}
						#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li.current a:before{
							display:none;}
					#header #header-koushin-kenshu #header-navi-koushin-kenshu ul li a.icons-arrow-r:before {
						left:12px; top:calc((1.6em - 8px) / 2 + 7px);}


/* -------------------------------------------------------------------

	パンくず

------------------------------------------------------------------- */
#breadcrumbs-top{}
	#breadcrumbs-top ol{ width:960px; margin:0 auto; padding:20px 0;}
		#breadcrumbs-top ol li{
			position:relative; display:inline-block; padding-left:23px;
			list-style:none; font-weight:bold; font-size:13px; font-size:1.3rem; line-height:1.7em;}
			#breadcrumbs-top ol li:before{
				display:block; position:absolute; top:0.58em; left:6px;
				width:5px; height:5px; content:"";
				border-top:1px solid #bd2c00; border-right:1px solid #bd2c00;
				-ms-transform:rotate(45deg); transform:rotate(45deg);}
			#breadcrumbs-top ol li:first-child{ padding:0;}
			#breadcrumbs-top ol li:first-child:before{ display:none;}
			#breadcrumbs-top ol li a{ font-weight:normal;}

#breadcrumbs-bottom{
	width:100%; margin-top:60px; border-top:6px solid #bd2c00; border-bottom:1px solid #bd2c00; background:#faefeb;}
	#breadcrumbs-bottom ol{ width:960px; margin:0 auto; padding:14px 0;}
		#breadcrumbs-bottom ol li{
			position:relative; display:inline-block; padding-left:23px;
			list-style:none; font-weight:bold; font-size:13px; font-size:1.3rem; line-height:1.7em;}
			#breadcrumbs-bottom ol li:before{
				display:block; position:absolute; top:0.58em; left:6px;
				width:5px; height:5px; content:"";
				border-top:1px solid #bd2c00; border-right:1px solid #bd2c00;
				-ms-transform:rotate(45deg); transform:rotate(45deg);}
			#breadcrumbs-bottom ol li:first-child{ padding:0; background:none;}
			#breadcrumbs-bottom ol li:first-child:before{ display:none;}
			#breadcrumbs-bottom ol li a{ font-weight:normal;}

/* -------------------------------------------------------------------

	メイン

------------------------------------------------------------------- */

#main-container { width:960px; margin:0 auto; padding:0; }


/* -------------------------------------------------------------------

	サイド

------------------------------------------------------------------- */

	.text-side-title{ display:none;}
	#side a:before{
		display:none;}

	/* 第一階層 */
	.side-navi .text-category-title { border:none; font-weight:normal; background:transparent;}
		.side-navi .text-category-title a {
			display:block; padding:10px 10px 9px;
			background:#bd2c00; border-radius:10em;
			color:#fff; font-size:1.6rem; line-height:1.5em;
			text-align:center; text-decoration:none;}
			.side-navi .text-category-title a:before{
				display:none;}
			.side-navi .text-category-title a:hover{
				background:#faefeb; color:#333;}

		/* 第二階層 */
		.side-navi > ul { margin-top:2.3em; border-bottom:1px solid #ccc;}
			.side-navi > ul > li {
				list-style-type:none; border-top:1px solid #ccc;
				font-weight:bold; font-size:1.3rem; line-height:1.5em;}
				.side-navi > ul > li > a {
					display:block; padding:14px 10px 12px 15px;
					background:#fff; box-shadow:none; font-weight:normal;
					color:#333; font-size:1.6rem; line-height:1.5em; text-decoration:none; }
					.side-navi > ul > li > a:hover{ background-color:#faefeb;}
			/* 第二階層（カレント） */
			.side-navi > ul > li.current,
			.side-navi > ul > li.parent-current { border:none; }
				.side-navi > ul > li.current > a,
				.side-navi > ul > li.parent-current > a {
					padding:14px 10px 12px 15px; border-top:1px solid #ccc;
					box-shadow:none; font-weight:bold;
					background:#f2f2f2; color:#333; font-size:1.6rem; line-height:1.5em;}

		/* 第三階層 */
		.side-navi > ul > li > ul {
			padding:0 0 0 20px; border-top:1px solid #ccc;}
			.side-navi > ul > li > ul > li {
				list-style:none; margin:1em 0 0; border-left:transparent;}
				.side-navi > ul > li > ul > li:last-child {
					margin-bottom:1em;}
				.side-navi > ul > li > ul > li > a {
					margin:0; padding:0 0 0 20px; color:#333;
					font-weight:normal;font-size:1.4rem; line-height:1.5em;}
					.side-navi > ul > li > ul > li > a:hover {
						color:#bd2c00;}
					#side .side-navi > ul > li > ul > li > a::before {
						display:block; position:absolute; top:0.64em;
						width:5px; height:5px; background:#333;
						border:none; border-radius:10em;
						content:"";}
				/* 第三階層（カレント） */
				.side-navi > ul > li > ul > li.current > a {
					font-weight:bold; color:#bd2c00;}
					.side-navi > ul > li > ul > li.current > a:hover {
						text-decoration:none;}


/* -------------------------------------------------------------------

	フッター

------------------------------------------------------------------- */

#footer { width:960px; margin:0 auto;}

	/* お問い合わせとナビゲーションのエリア */
	#footer #footer-contact-nav { position:relative; padding-top:55px;}
	/* 背景 */
	#footer #footer-contact-nav:before {
		display:block; position:absolute; top:0; left:-4520px; z-index:-2;
		width:10000px; min-width:996px; height:100%; content:"";
		background:url(/koushin-kenshu/common/img/footer-bg.png) center bottom no-repeat #fff3f0;}
	/* お問い合わせ */
	#footer #footer-contact-nav #footer-contact {
		position:relative; margin:0 auto 0; padding:0;
		box-sizing:border-box; text-align:center;}
		/* お問い合わせタイトル */
		#footer #footer-contact-nav #footer-contact .title {
			font-size:34px; font-size:3.4rem; line-height:1.3em;}
		/* コンテンツ部 */
		#footer #footer-contact-nav #footer-contact .detail {
			margin-top:2em; text-align:left;}
			#footer #footer-contact-nav #footer-contact .detail .text {
				display:inline-block; width:470px; vertical-align:top;
				text-align:left; font-size:16px; font-size:1.6rem; line-height:1.7em;}
			#footer #footer-contact-nav #footer-contact .detail .conversion {
				display:inline-block; width:420px; margin-left:20px; vertical-align:top;}
				/* 部署名 */
				#footer #footer-contact-nav #footer-contact .conversion-post {
					margin-top:0; text-align:left; font-size:16px; font-size:1.6rem; line-height:1.5em;}
				/* 電話番号 */
				#footer #footer-contact-nav #footer-contact .conversion-tel {
					margin-top:1em; text-align:left;}
					#footer #footer-contact-nav #footer-contact .conversion-tel .number {
						display:inline-block; padding-left:26px;
						background:url(/koushin-kenshu/common/img/icons-tel.png) left top no-repeat;
						background-size:19px auto; line-height:1;
						font-size:30px; font-size:3rem; font-weight:bold; word-break:break-all;}
					/* 営業時間 */
					#footer #footer-contact-nav #footer-contact .conversion-tel .business-hours {
						display:inline-block; font-size:14px; font-size:1.4rem; line-height:1.5em;}
				#footer #footer-contact-nav #footer-contact p{
					margin-top:0.4em;
					font-size:14px; font-size:1.4rem; line-height:1.7em; text-align:left;}

	/* ナビゲーション */
	#footer #footer-contact-nav #footer-nav {
		margin-top:58px; padding:28px 0; position:relative;}
	/* 背景 */
	#footer #footer-contact-nav #footer-nav:before {
		display:block; position:absolute; top:0; left:-4520px; left:-50vw; z-index:-2;
		width:10000px; width:calc(200vw + 960px); min-width:996px; height:100%; content:"";
		background:#fff3f0; opacity:0.7;}
		#footer #footer-contact-nav #footer-nav ul { margin:-15px 0 0 -30px; padding:0;}
			#footer #footer-contact-nav #footer-nav ul li {
				display:inline-block; margin:15px 0 0 30px; padding:0; list-style:none;
				font-size:14px; font-size:1.4rem; line-height:1.5em;}
				#footer #footer-contact-nav #footer-nav ul li a { color:#333;}
				#footer #footer-contact-nav #footer-nav ul li a.icons-arrow-r {
					background-position: 4px calc((1.5em - 8px) / 2 - 2px);}


	/* フッターユーティリティ */
	#footer #footer-utility { padding:12px 0; overflow:hidden; }
		#footer #footer-utility ul { margin:-12px 0 0 -48px; padding:0;}
			#footer #footer-utility ul li {
				display:inline-block; margin:12px 0 0 48px; padding:0;
				list-style:none; font-size:14px; font-size:1.4rem; line-height:1.5em;
				position:relative;}
			#footer #footer-utility ul li + li:before {
				display:block; width:1px; height:100%; content:"";
				background:#7a7a7a; position:absolute; top:0; left:-25px; }
				#footer #footer-utility ul li a { color:#333;}
				#footer #footer-utility ul li a.icons-blank {
					background-position:2px calc((1.5em - 9px) / 2);}

	/* コピーライト */
	#footer #footer-copyright {
		position:relative; padding:28px 0 26px; }
	/* 背景 */
	#footer #footer-copyright:before {
		display:block; position:absolute; top:0; left:-4520px; left:-50vw; z-index:-2;
		width:10000px; width:calc(200vw + 960px); min-width:996px; height:100%; content:"";
		background:#bd2c00;}
		#footer #footer-copyright p {
			text-align:center; font-size:12px; font-size:1.2rem; line-height:1.5em; color:#fff;}

/* -------------------------------------------------------------------
	「スマホ版を表示」ボタン
	以下のコードはPC・スマホで共通です。
	修正する場合は、双方にコピー＆ペーストしてください。
------------------------------------------------------------------- */

#footer #footer-viewmode { display:none; }

/* -------------------------------------------------------------------

	ページトップ

------------------------------------------------------------------- */
#pagetop {
	clear:both; position:relative;
	width:960px; margin:0 auto; z-index:100; }
	#pagetop a {
		display:block;
		position:fixed; bottom:48px;
		width:50px; height:50px;
		margin:0 0 0 913px; }
		#pagetop a img{ width:50px; height:auto;}
	#pagetop a.footer-fixed { position:absolute; top:-181px; bottom:0; }