@charset "utf-8";
body{
	margin:0;
	letter-spacing: 0.06em;
	font-family:"游ゴシック体","Yu Gothic",YuGothic,sans-serif;
}
html{
	scroll-behavior: smooth;
}


/***************************************
ボタン系
***************************************/

/*メニューボタン*/
.menuBtn{
	display:none;
	width:48px;
	height:48px;
	position:fixed;
	top:0px; left:0px;
	background-image:url("img/menu.svg");
	background-size:48px;
	background-position:center;
	background-repeat:no-repeat;
	cursor:pointer;
	z-index: 2;
}


/*クローズボタン*/
.closeBtn{
	display:none;
	width:48px;
	height:48px;
	position:rerative;
	background-image:url("img/close.svg");
	background-size:48px;
	background-position:center;
	background-repeat:norepeat;
	cursor:pointer;
}


/*メールボタン*/
.mailBtn{
	width:48px;
	height:48px;
	position:rerative;
	background-image:url("img/mail.svg");
	background-size:48px;
	background-position:center;
	background-repeat:norepeat;
	cursor:pointer;
}

/*TOPへ戻るボタン*/
.topBtn{
	width:48px;
	height:48px;
	margin:4px auto;
	border-radius: 50%;
	color:white;
	background-color:navy;
	text-align:center;
	line-height:48px;
}
.topBtn a{
	color:white;
	text-decoration:none;
}
.topBtn a:hover, a:visitd{color:white}


/***************************************
コンテンツ
***************************************/
/*コンテンツ枠*/
.contents{
	max-width:960px;
	margin-left:250px;
	position: relative;
}
/*オーバーレイ*/
.overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
}
.overlay.active{	/*.の後に間を開けない*/
	display: block;
}
/*ヘッダー*/
header{
	position: relative;
	width: 100%;
	height: 220px;
}

#rogo{
	font-size:2rem;
	font-weight: bold;
	letter-spacing: 10px;
	z-index: 1;
}

/*トップイメージ*/
.topimage{
	height:220px;
	width: 100%;
	background-position:center;
	background-size:cover;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
}

/**/
#status{
	text-align: center;
	background-color:#fff;
	border-bottom:solid black 1px;
}

/*メインコンテンツ*/
main{
	padding:20px 30px;
	background-color:#fffffc;
	font-family: "Meiryo","Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;
}

/*記述部*/
.author{}

/*フッター*/
#footer{
	height:180px;
	width:100%;
	box-sizing: border-box;
	border-left: 1px solid white;
	background-color:#009bc6;
	color:white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#footer::before{
	content:"Copyright(C)2024　ささお行政書士法務事務所　All rights reserved.";
	color: white;
}
#footer::after{
	content:"〒231-0864 神奈川県横浜市中区千代崎町1丁目1番地の2";
	color: white;
}
/***************************************
サイドバー
***************************************/

.sidebar{
	width:250px;
	/*画面の縦サイズ*/
	height:100vh;
	background-color:#009bc6;
	/*左端固定*/
	position:fixed;
	top:0px;
	left:0px;
	/*動作速度*/
	transition:0.5s;
	/*被せ位置（最上位）*/
	z-index:998;
}

/*メニューリスト*/
.sidebar ul{
	padding:0;
	margin:0;
}

.sidebar ul li{
	list-style-type:none;
	text-align:center;
	padding:10px 0;
	border-top:solid #fff 1px;
	position:relative;
}
.sidebar > ul > li:last-child{
	border-bottom:solid #fff 1px;
}

.sidebar a{
	text-decoration:none;
	font-size:1.2rem;
	color:white;
}
.sidebar a:visited{ color:white; }
.sidebar a:hover{ color:#FFFF00; }


/*サブメニュー*/
.submenu02{
	display:none;
	margin:0;
	padding:0;
	width:200px;
	position:absolute;
	top:10px;
	left:150px;
	background-color:#666;
	z-index:999;
}
.submenu02 > li:last-child{
	border-bottom:solid #fff 1px;
	margin-bottom:0;
}


/*サイドバー余白*/
.sidefooter{
	width:250px;
	height:100%;
}

/***************************************
ナビバー
***************************************/
nav ul{
	display:flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	background-color:slategray;
	margin:0;
	padding:0;
}
nav li{
	display:block;
	list-style-type:none;
	margin: 4px;
}
nav li:last-child{
	border:none;
}
nav a{text-decoration:none;}
nav a:link{ color:white; }
nav a:visited{ color:white; }
nav a:hover{ color:#FFFF00; }


/*ナビのサブメニュー*/
.submenu01{	
	display:none;
	background-color:#003399;
	margin:0;
	padding:0;
	position:absolute;
}
.submenu01 li{
	list-style-type:none;
	margin:0;
	padding:10px 0;
	text-align:center;
	border:solid gray 1px;
}


/***************************************
画面サイズ変更時の処理
***************************************/
@media screen and (max-width: 760px){
	/*ナビゲーション非表示*/
	nav ul{
		flex-direction: column;
		background-color:#fffffc;
	}
	nav a:link{ color:black; }
	nav a:visited{ color:black; }
	nav a:hover{ color:#FFFF00; }
	/*サイドバーを隠す*/
	.sidebar{
		left:-250px;
	}
	.submenu02{
		display:none;
	}
	/*コンテンツの幅調整*/
	.contents{
		margin: auto;
	}
	/*メニューボタン表示*/
	.menuBtn, .closeBtn{
		display:block;
	}	
}

/*メニューボタンクリック時（Jquery追加クラス）*/
.is-active{
	left:0px;
	transition:0.3s;
}

/***************************************
書式設定
***************************************/

/*見出し*/
h1{
	padding:8px;
	font-size:1.4rem;
	color:#fff;
	background-color:#009bc6;
	border-radius:10px;
	text-indent:1em;
}

h2{
	padding:5px;
	margin:10px 10px 10px 10px;
	font-size:1.3rem;
	background-color:#eee;
	text-indent:1em;
	border: solid #aaa 1px;
	box-shadow: 4px 4px 4px #009bc6;
}

h3{
	margin:10px 10px 10px 16px;
	padding:2px;
	font-size:1.1rem;
	text-indent:1em;
	/*background-color:#7acbe1;*/
	color:#030;
	border-left:solid black 10px;
}

h4{
	margin-bottom:4px;
	height:10px;
	margin-left:10px;
}
/*h4::before{content:'◆';}*/


/*段落スタイル*/
p{
	text-indent:1em;
	line-height:1.5em;
	text-align:justify;
	margin-left:6px;
}

/*リストスタイル*/
li{
	line-height:1.5em;
	margin-bottom:8px;
}
li::marker{
	font-weight: bold;
}

dt{
	font-weight:bold;
	text-indent:1em;
	margin-left:10px;
}
dd{
	text-indent:1em;
	margin-bottom:8px;
}


/*ボックスフレーム*/

.dotted-frame{
	margin:10px 0px;
	padding:3px;
	border:dotted black 2px;
}
.dashed-frame{
	margin:10px 0px;
	padding:3px;
	border:dashed black 2px;
}

/***************************************
テーブル装飾
***************************************/
/*テーブル（デフォルト）*/
table{
	max-width:800px;
	border-collapse:separate;	/*セルとセルの間を空ける*/
	margin-top:20px;
	margin-bottom:20px;
 	margin-right:auto;
 	margin-left:auto;
}

caption{
	font-size:110%;
	font-weight:bold;
}

th{
	padding:5px;
	background-color:#ddd;
	white-space:nowrap;
}

thead{}

thead th{
	text-align:center;
	background-color:#193278;
	color:white;
	font-size:1.1rem;
}

thead td{
	text-align:center;
	background-color:#193278;
	color:white;
	font-size:1.1rem;
}

td{
	padding:5px;
	background-color:#f0f0f0;
	line-height:1.5;
}

/*テーブル内リスト*/
td ul{
	margin:0; padding:0;
	list-style-position:inside;
}

/***************************************
テーブル装飾（料金表）
***************************************/

table.fee-table1 caption{
	font-size:1.5rem;
}

/*列ごとのスタイル指定*/
table.fee-table1 tbody td:nth-of-type(1){
	width:200px;
	font-weight:bold;
	font-size:0.9rem;
	text-align:center;
	background-color:#ddd;
}
table.fee-table1 tbody td:nth-of-type(2){
	width:300px;
	font-size:0.9rem;
}
table.fee-table1 tbody td:nth-of-type(3){
	width:150px;
	font-size:0.9rem;
	text-align:right;
}


.fee-table2 caption{
	font-size:1.5rem;
}


.fee-table2 td:nth-of-type(1){
	width:240px;
}
.fee-table2 td:nth-of-type(2){
	width:180px;
	text-align:right;
}



/***************************************
図形装飾（フローチャート）
***************************************/

table.chart{
	border-collapse:separate;
	border-spacing:8px;
}

.chart th{
	background-color:#fff;
	border:ridge deepskyblue 2px;
	border-radius:8px;
	text-align:left;
	font-family:serif;
	white-space:normal;
	min-width:180px;
}

.chart td{
	background-color:#fffffc;
	border:0px;
	font-size:0.89rem;

}

.chart td.disc{
	background-color:#fff;
	border:ridge pink 2px;
	border-radius:8px;
	vertical-align:top;
}

.chart-container {
	display: flex;
	padding: 10px;
	flex-wrap: wrap;
}

.chart-container .box-border-none {
	display: flex;
	align-items: center;
	justify-content:center;
	font-family:serif;
	white-space:normal;
	margin: 5px;
	padding: 8px;
}
.chart-container .box-blue {
	display: flex;
	align-items: center;
	justify-content:center;
	background:#fff;
	border:2px ridge deepskyblue;
	border-radius: 8px;
	font-family:serif;
	font-weight: bold;
	white-space:normal;
	margin: 5px;
	padding: 8px 0;
	flex-grow: 1;
}
.chart-container .box-pink {
	display: flex;
	align-items: center;
	justify-content:center;
	background:#fff;
	border:2px ridge pink;
	border-radius: 8px;
	font-family:serif;
	font-weight: bold;
	font-size: 14px;
	white-space:normal;
	margin: 5px;
	padding: 8px 4px;
	flex-grow: 1;
}