@charset "utf-8";

/*---------------------------------------------------------------------------------------------------
	Reset
-----------------------------------------------------------------------------------------------------*/

/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	line-height: 1.6em;
	font-family: "kozL",'小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
    src: url(KozGoPr6N-Light.otf);
}
	
/*行の高さをフォントサイズと同じにしています*/
/*body {
	line-height: 1;
	-webkit-text-size-adjust: 100%;
}*/

/*(HTML5用)新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section, summary { 
	display: block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
nav ul {
	list-style: none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
	quotes: none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
/*blockquote: before ,
blockquote: after ,
q: before ,
q: after {
	content:'';
	content:none;
}*/

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}

/* borderを込みのサイズに設定 */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
	background-color: #ff9;
	color: #000; 
	font-style: italic;
	font-weight: bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
	text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title] , dfn[title]  {
	border-bottom: 1px dotted;
	cursor: help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 3px solid #000;
	margin: 0.5em 0 1em;
	padding: 0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
	vertical-align: middle;
}

/*firefoxでリンクした元ページに戻ると枠線が出る現象の対処*/
a {
	outline: none;
}

a:focus {
	outline: none;
}


/*-----------------------------------------------------
	ClearFix
------------------------------------------------------*/
.clearfix:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/*------------------------------------------------------------------------------------------------
	comon-conpornent
--------------------------------------------------------------------------------------------------*/

body {
	background-color: #fff;
	width: 100%;
	-webkit-text-size-adjust: 100%;
	overflow: hidden;
}
body ,
p ,
a ,
li ,
tr ,
td ,
th {
	font-size: 20px;
	color: #534741;
	font-family: "kozL",'小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
}
#wrapper {
	background-color: white;
	/*width: 1400px;*/
	margin: 0 auto;
	overflow: hidden;
}
img {
	margin: 0px;
}




div.breadcrumb {
	line-height: 1.05;
	margin-top: 5px;
	margin-left: 3%;
}




@media screen and (min-width: 1400px){
	.over-ssa-banner {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
	}
	.over-ssa-banner .ssa-banner {
		width: 401px;
	}
	.over-ssa-banner .ssa-banner a {
	}
	.over-ssa-banner .ssa-banner a img {
		width: 401px;
		height: auto;
	}
}



@media screen and (min-width: 1020px)and (max-width: 1399px){
	.over-ssa-banner {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}
	.over-ssa-banner .ssa-banner {
		width: 401px;
		margin: 20px 50px;
	}
	.over-ssa-banner .ssa-banner a {
	}
	.over-ssa-banner .ssa-banner a img {
		width: 401px;
		height: auto;
	}
}

@media screen and (min-width: 420px) and (max-width: 1019px){
	.over-ssa-banner {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.over-ssa-banner .ssa-banner {
		width: 46%;
		max-width: 401px;
		margin: 2%;
	}
	.over-ssa-banner .ssa-banner a {
	}
	.over-ssa-banner .ssa-banner a img {
		width: 100%;
		max-width: 401px;
		height: auto;
	}
}
@media screen and (min-width: 280px) and (max-width: 419px){
	.over-ssa-banner .ssa-banner {
		flex-direction: column;
		width: 90%;
		margin: 5%;
	}
	.over-ssa-banner .ssa-banner a {
	}
	.over-ssa-banner .ssa-banner a img {
		width: 100%;
		max-width: 401px;
		height: auto;
	}
	
	
	
}