@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ(行政書士・社労士市川事務所 office-ichikawa.com 用。旧ホームページ作成ソフト時代の3カラムを再現)
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*********************************************************************
*  共通
*  旧サイトの画像はドキュメントルート直下にあるので「/画像名」で参照する。
*********************************************************************/
:root {
	--oi-width: 985px;
	--oi-nav: #5266cc;
	--oi-band: #0296ec;
	--oi-page-bg: #f5fffa;
}
body {
	background: #f0f0f0;
	color: #000;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 10pt;
	font-weight: normal;     /* SWELL は 500 */
	line-height: 1.4;
	word-break: normal;      /* SWELL は単語の途中でも折り返す設定。旧サイトと同じ折り返しにする */
	overflow-wrap: normal;
}
#body_wrap {
	max-width: var(--oi-width);
	margin: 0 auto;
	background: var(--oi-page-bg);
}

/*********************************************************************
*  ページ最上部の一行目(旧サイトのヘッダー右上の文字)
*********************************************************************/
.top-line {
	max-width: var(--oi-width);
	margin: 0 auto;
	padding: 0;
	background: #fff;
	color: #275880;
	font-size: 10pt;
	font-weight: bold;
	line-height: 1.2;
	text-align: right;
}

/*********************************************************************
*  ヘッダー(ヘッダー画像をロゴとして横幅いっぱいに表示)
*********************************************************************/
.l-header {
	background: #fff;
	box-shadow: none;
}
@media (min-width: 960px) {
	.l-header .l-header__inner {
		max-width: var(--oi-width);
		padding: 0;
	}
	.l-header .l-header__logo {
		padding: 0;   /* SWELL は上下16px。旧サイトは画像とナビの間に隙間なし */
	}
}

/*********************************************************************
*  グローバルナビ(青い帯・白い太字・▷の印・プルダウン)
*********************************************************************/
.l-header__gnav {
	padding: 4px 0 3px;
	border: 1px solid #fff;
	background: var(--oi-nav);
}
.l-header .l-header__gnav .c-gnav {
	justify-content: flex-start;
}
.c-gnav > .menu-item {
	padding: 0 8px;
	border-right: 1px solid #fff;
	background: #4169e1 url(/0301_05_02001.png) repeat left center;
}
.-parallel .l-header__gnav .c-gnav > .menu-item > a {   /* SWELL の「.-parallel … >a{padding:16px}」より強くする */
	padding: 10px 4px 10px 2px;
	color: #fff;
	font-weight: bold;
	font-size: 12pt;
	line-height: 1.2;
}
.-parallel .l-header__gnav .c-gnav > .menu-item > a .ttl {
	padding-left: 18px;
	background: url(/303_06001.png) no-repeat left center;   /* 旧サイトの「▷」の印 */
	font-size: inherit;
	line-height: inherit;
}
.c-gnav > .menu-item > a:hover,
.c-gnav > .menu-item.-current > a,
.c-gnav > .menu-item.current-menu-item > a {
	color: #ccd4ff;
}
.c-gnav > .menu-item > a::after {
	display: none; /* SWELL標準の下線アニメーションを消す */
}
.l-header .c-gnav .sub-menu {
	border: 1px solid #dcdcdc;
	background: #708090;
}
.l-header .c-gnav .sub-menu a {
	padding: 5px;
	border-bottom: 1px solid #fff;
	color: #fff;
	font-size: 10pt;
}
.l-header .c-gnav .sub-menu a:hover {
	color: #ccd4ff;
}

/*********************************************************************
*  パンくずリストとページタイトルは出さない(旧サイトに無いため)
*********************************************************************/
.p-breadcrumb,
.oi-legacy-page .c-pageTitle,
.oi-legacy-page .l-topTitleArea,
.oi-legacy-page .p-articleHead,   /* 投稿(お客様紹介)のタイトル・日付 */
.oi-legacy-page .p-articleFoot {
	display: none;
}

/* お客様紹介の一覧(syokai.html)のアイキャッチ画像(旧サイトの align="left" hspace="10" と同じ) */
.oi-legacy .oi-syokai-thumb {
	float: left;
	height: auto;
	margin: 0 10px;
}

/*********************************************************************
*  3カラム(左サイドバー 203px / 本文 / 右サイドバー 203px)
*  お客様紹介のページは 左サイドバー / 本文 の2カラム。
*  スマホ・タブレットでは 本文 → 左サイドバー → 右サイドバー の順に縦に並ぶ。
*********************************************************************/
.l-content {
	padding-top: 0;
	margin-bottom: 0;
}
@media (min-width: 960px) {
	.l-content,
	.top #content {
		max-width: var(--oi-width);
		padding: 0;
	}
	.oi-3col .l-content,
	.oi-2col .l-content {
		display: grid;
		column-gap: 0;
		align-items: stretch;
	}
	.oi-3col .l-content { grid-template-columns: 205px minmax(0, 1fr) 205px; }
	.oi-2col .l-content { grid-template-columns: 205px minmax(0, 1fr); }
	.oi-3col .l-sidebar.-left,
	.oi-2col .l-sidebar.-left {
		grid-row: 1;
		grid-column: 1;
		margin: 2px 0 2px 2px;
	}
	.oi-3col .l-mainContent,
	.oi-2col .l-mainContent {
		grid-row: 1;
		grid-column: 2;
		width: auto;
		max-width: none;
		margin: 2px;
	}
	.oi-3col #sidebar {
		grid-row: 1;
		grid-column: 3;
		width: auto;   /* SWELL が #sidebar を304px固定にしているので列の幅に合わせる */
		margin: 2px 2px 2px 0;
	}
	.oi-3col .l-sidebar,
	.oi-2col .l-sidebar {
		max-width: none;
	}
}
.l-mainContent,
.l-sidebar {
	padding: 10px 0;
	background: #fff;
}
.l-mainContent__inner {
	padding: 0 10px;
}

/*********************************************************************
*  サイドバー(旧サイトのHTMLをカスタムHTMLウィジェットでそのまま表示)
*********************************************************************/
#sidebar_left,
#sidebar {
	font-size: 10pt;   /* SWELL のサイドバーは14px */
	line-height: 1.4;
}
.l-sidebar .c-widget {
	margin: 0;
}
.l-sidebar .c-widget + .c-widget {
	margin-top: 1em;
}
#sidebar_left .textwidget p,
#sidebar .textwidget p {
	margin: 0;   /* SWELL はウィジェット内の段落の下に余白を付ける */
}
.l-sidebar table {
	border-collapse: separate;
}
/* 右サイドバーの囲み(見出しに色、四角い枠) */
.oi-sidebox {
	width: 200px;
	max-width: 100%;
	border: 1px solid var(--oi-band);
	background: #fff;
}
#sidebar .oi-sidebox__title {
	margin: 0;
	padding: 5px 4px;
	background: var(--oi-band);
	color: #fff;
	font-size: 10pt;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
}
.oi-sidebox__body {
	padding: 6px 8px;
}
.oi-sidebox__body:has(> a:only-child > img) {   /* 画像の後ろに SWELL が noscript を足すので a で判定 */
	padding: 0;   /* バナー画像だけの囲み(市川事務所のブログ)は余白なし */
}
#sidebar .oi-sidebox__body img {   /* 後ろの「.l-sidebar img」より強くする */
	max-width: 100%;   /* 囲みの枠からはみ出さない(ブログのバナーは幅200px) */
	height: auto;
	vertical-align: bottom;
}
.l-sidebar img {
	max-width: none;
}

/*********************************************************************
*  旧サイトから移した本文(固定ページの「カスタムHTML」ブロック)
*  SWELL の本文用スタイル(.post_content)を当てず、旧サイトのCSSで表示する。
*********************************************************************/
.oi-legacy {
	font-size: 12pt;
	line-height: 1.7;
}
.oi-legacy p,
.oi-legacy ul,
.oi-legacy ol {
	margin: 1em 0;
}
.oi-legacy ul,
.oi-legacy ol {
	padding-left: 40px;
}
.oi-legacy ul { list-style: disc; }
.oi-legacy ol { list-style: decimal; }
.oi-legacy table {
	border-collapse: separate;
}
/* セルの余白: SWELL の初期化CSSが0にしてしまうので、HTML の cellpadding の値に戻す(指定なしはブラウザ標準の1px) */
:is(.oi-legacy, .l-sidebar) table:not([cellpadding]) > * > tr > :is(td, th) { padding: 1px; }
:is(.oi-legacy, .l-sidebar) table[cellpadding="3"] > * > tr > :is(td, th) { padding: 3px; }
:is(.oi-legacy, .l-sidebar) table[cellpadding="4"] > * > tr > :is(td, th) { padding: 4px; }
:is(.oi-legacy, .l-sidebar) table[cellpadding="5"] > * > tr > :is(td, th) { padding: 5px; }
.oi-legacy hr {
	margin: 0.5em 0;
	border: none;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #eee;
}
.oi-legacy img {
	max-width: none;
	display: inline;
}
.oi-legacy strong,
.oi-legacy b {
	font-weight: bold;
}

/* 旧サイトのCSS(04_blue_f1_0002.css / 03_2bunkatu.css)から移したもの */
.oi-legacy a,
.l-sidebar a {
	color: #0000cd;
	text-decoration: underline;
}
.oi-legacy a:visited,
.l-sidebar a:visited {
	color: #9400d3;
}
.oi-legacy a:hover,
.l-sidebar a:hover {
	color: #29b1cc;
}
.oi-legacy h2 {
	margin: 0.83em 0;
	padding: 7px 0 6px 45px;
	background: url(/cen_bar.gif) no-repeat left top;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}
.oi-legacy h3 {
	margin: 1em 0;
	font-size: 11.7pt;
	font-style: italic;
	line-height: 1.2;
}
.oi-legacy h4 {
	margin: 1.33em 0;
	font-size: 10pt;
	font-weight: bold;
	line-height: 1.2;
}
p.menucenter {
	margin: 0;
	padding: 5px 0 5px 15px;
	background: var(--oi-band);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
}
p.centerlink {
	margin: 2px 0 2px 30px;
	padding: 7px 0 7px 40px;
	background: url(/cen_menu.gif) no-repeat left center;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2;
}
p.kaisyamei {
	margin: 0 0 15px;
	padding: 5px 0 0 35px;
	background: url(/kaisyameibg.gif) no-repeat left top;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.2;
}
p.kaisyagazo {
	margin: 5px;
	border: 1px solid #00f;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
}
p.memukaisya {
	margin: 0;
	padding: 8px 0 9px 20px;
	border: 1px solid #00f;
	background: url(/centermenu_kaisyamei.png) no-repeat left center;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
}
.sidemenu {
	margin: 0;
	padding: 8px 0 9px 15px;
	background: url(/sidemenu_top001.png) no-repeat left top;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
}
p.boxmenuleft {
	margin: 0;
	padding: 9px 0 9px 20px;
	background: url(/btn001.gif) no-repeat left center;
	font-size: 13px;
	line-height: 1.2;
}

/* お客様紹介の左メニュー(.submenu) */
.submenu {
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.submenu ul {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
}
.submenu li {
	clear: both;
	margin: 0;
}
.submenu .submenuitem {
	float: left;
	padding: 0 0 0 8px;
	border: 1px solid;
	background: url(/0304_01_01.png) no-repeat left center;
}
.submenu .submenuitemcenter {
	float: left;
	display: inline;
	background: url(/0304_01_02.png) repeat-x left center;
}
.submenu .submenuitemright {
	float: left;
	display: inline;
	padding: 0 8px 0 0;
	background: url(/0304_01_03.png) no-repeat right center;
}
.submenu .submenuitemlink {
	float: left;
	width: 185px;
	margin: 0;
	padding: 13px 0 12px;
	font-size: 10pt;
	line-height: 1;
	text-align: left;
	text-decoration: none;
}
.submenu .submenuitemmark1 {
	padding: 0 0 0 18px;
	background: url(/0240_06001.png) no-repeat left center;
}

/*********************************************************************
*  スマホ・タブレット(959px以下)
*  旧サイトは横幅985px固定でスマホ非対応だったため、画像と表を画面の幅に収める。
*********************************************************************/
@media (max-width: 959px) {
	.oi-legacy,
	.l-sidebar {
		overflow-wrap: anywhere;   /* 長い英数字(URLなど)が画面からはみ出さないようにする */
	}
	.oi-legacy img,
	.l-sidebar img {
		max-width: 100%;
		height: auto;      /* HTML の height 指定のままだと縦に伸びるため */
	}
	.oi-legacy table,
	.l-sidebar table {
		max-width: 100%;
	}
	.oi-legacy :is(table, td, th)[width],
	.l-sidebar :is(table, td, th)[width] {
		width: auto;       /* HTML の固定幅(550px など)をやめて画面の幅に合わせる */
	}
	.oi-legacy table[width="100%"],
	.oi-legacy table[width="98%"] {
		width: 100%;
	}
	/* 枠線のない表(文章と写真を横に並べるためのレイアウト用)は、スマホでは縦に並べる */
	.oi-legacy :is(table:not([border]), table[border="0"]),
	.oi-legacy :is(table:not([border]), table[border="0"]) > * > tr,
	.oi-legacy :is(table:not([border]), table[border="0"]) > * > tr > :is(td, th) {
		display: block;
		width: auto;
	}
	.oi-legacy :is(table:not([border]), table[border="0"]) > tbody {
		display: block;
	}
	/* 枠線のある表(一覧表)は表のまま。日付などは途中で折り返さない */
	.oi-legacy table[border]:not([border="0"]) :is(td, th) {
		overflow-wrap: normal;
	}
	.oi-legacy iframe {
		max-width: 100%;
	}
	/* 中央の黄色いリンク: 背景画像(幅450px)を画面の幅で切り、右端の丸い角だけを同じ画像から重ねて表示する */
	p.centerlink {
		position: relative;
		max-width: 450px;
		margin-left: 0;
		padding-right: 16px;
		font-size: clamp(11px, 3.6vw, 16px);   /* 1行に収める(背景画像は1行分の高さ) */
	}
	p.centerlink::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 16px;
		background: url(/cen_menu.gif) no-repeat right center;
	}
	.l-sidebar {
		padding: 10px;
	}
	/* サイドメニューを画面の幅いっぱいにする(PCの背景画像は幅203px固定のため、スマホでは CSS で同じ見た目を作る) */
	.sidemenu {
		background:
			url(/sidemenu_top001.png) no-repeat left top,          /* 左端の線は画像のまま */
			url(/sidemenu_top001.png) no-repeat left top / 100% 100%; /* その下に同じ画像を横に伸ばして敷き、右側の色と下の線をつなげる */
	}
	p.boxmenuleft {
		margin-top: -1px;   /* 上下の枠線を重ねて1本にする */
		padding-left: 22px;
		border: 1px solid #c8c8c8;
		border-right-color: #8a8a8a;
		border-bottom-color: #8a8a8a;
		background: #fff url(/0240_06001.png) no-repeat 4px center;
	}
	.submenu ul,
	.submenu .submenuitem,
	.submenu .submenuitemcenter,
	.submenu .submenuitemright,
	.submenu .submenuitemlink {
		float: none;
		display: block;
	}
	.submenu .submenuitemlink {
		width: auto;
	}
	.oi-sidebox {
		width: auto;
	}
	/* お客様紹介の一覧: 画像の横に文章を回り込ませず、画像の下に文章を置く */
	.oi-legacy .oi-syokai-thumb {
		float: none;
		display: block;
		margin: 0 auto 10px;
	}
	#sidebar .textwidget {
		text-align: center;   /* 「お客様の声」のバナーを中央に(住所などは HTML で左寄せ指定済み) */
	}
}

/*********************************************************************
*  フッター(青い帯にコピーライトだけ)
*********************************************************************/
.l-footer {
	max-width: var(--oi-width);
	margin: 0 auto;
	background: var(--oi-nav);
	color: #fff;
}
.l-footer__foot {
	padding: 4px 14px 3px;
	background: var(--oi-nav);
}
.copyright {
	color: #fff;
	font-size: 10pt;
	line-height: 1.2;
}