@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff');
}

/* Chromeだとフォントが細くなってしまうため、normalに1段階太いフォントを使う */
/*
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
	@font-face {
		font-family: 'Noto Sans Japanese';
		font-style: normal;
		font-weight: 400;
		src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff');
	}
}
*/
@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 900;
	src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff');
}


* {
	margin:0px;
	padding:0px;
	box-sizing: border-box; /* paddingとborderをwidth/heightの中に含める */
	
	/*
		テキストや配色の設定はbodyで設定して継承させる
		ここで設定すると、コード内で変更した際、ネストしたタグ全てに同じスタイル指定する必要があるため
	*/
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	vertical-align: inherit;
	
	background-color: inherit;
	color: inherit;
	
}

html {
	width: 100%;
	overflow-y: scroll;
}

body {
	margin: 0 auto 0 auto;
	width: 100%;
	text-align: center;
	
	/* iOS/Androidでフォントサイズが自動変更されるのを防ぐ */
	-webkit-text-size-adjust: 100%;
	
	/*
		Fontの優先順位
		1 CSSで読み込んだNotoフォントを最優先(基本的には全てこのフォントになるはず)
		2 Win8.1以降とMac用に游ゴシック("Yu Gothic Medium", "Yu Gothic", YuGothic)
		3 iPhone/iPadシステムフォント(-apple-system, BlinkMacSystemFont)
		4 Androidシステムフォント(Roboto , "Droid Sans")
		5 Win7/8用のメイリオ(Meiryo)
		6 それ以外はデフォルトのゴシック体
	*/
	font-size: 22px;
	line-height: 32px;
	vertical-align: baseline;
	font-family: "Noto Sans Japanese", "Yu Gothic Medium", "Yu Gothic", YuGothic, -apple-system, BlinkMacSystemFont, Roboto, "Droid Sans", Meiryo, sans-serif;
	font-weight: normal;
	
	background-color: #FFFFFF;
	color: #444444;
	
}

body.bg400 {
/*	background: url("image/background400.jpg") no-repeat top; */
	background: url("image/background400.jpg") no-repeat;
	background-position: center top;
}

body.bg240 {
/*	background: url("image/background240.jpg") no-repeat top; */
	background: url("image/background240.jpg") no-repeat;
	background-position: center top;
}


#pre_header-wrapper {
	margin: 0 auto 0 auto;
	height: 20px;
	width: 100%;
	text-align: center;
	background-color: #666666;
}

#pre_header {
	margin: 0 auto 0 auto;
	width: 760px;
	text-align: left;
}

#header-wrapper {
	margin: 0 auto 0 auto;
	height: 60px;
	width: 100%;
	text-align: center;
	background-color: rgba(255,255,255,0.9); /* RGBaで透明度指定すると、自タグのみに透明度が反映され、子には反映しない。ただしIE9以降 */
	overflow : hidden; /* floatでmargin-topが効かなくなる症状の対処 */
}

#header {
	margin: 0 auto 0 auto;
	width: 760px;
	text-align: left;
	background-color: transparent;
}

#contents-wrapper {
	margin: 0 auto 0 auto;
	width: 800px; /* スマホ表示用の横幅。HTML内のmetaタグで指定しているので不要だが念のため */
	text-align: center;
	clear: both;
}

/* box-borderなどで760pxに収まらない表示をするために横幅を780pxに変更(内部要素で右余白を設定するなどして対応) */
#contents {
	margin: 0 0 0 20px;
	width: 780px;
	text-align: left;
}

#footer-wrapper {
	margin: 20px auto 0 auto; /* ボーダーと上コンテンツの間にスペースをあけるため、ここだけmarginに20pxの余白を指定 */
	padding: 20px 0 0 0;
	width: 100%;
	text-align: center;
	border-top: 1px solid #000000;
	clear: both;
}

#footer {
	margin: 0 auto 80px auto; /* スマホなどで、画面下にメニューが被る事があるので下余白を多めに */
	width: 760px;
	text-align: center;
}



/*------ header ------*/

#pre_header h1{
	padding-top: 4px;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: normal;
	line-height: 12px;
}

#header a#officenor_title {
	padding-top: 12px;
	width: 260px;
	float: left;
	font-size: 28px;
	line-height: 40px;
	font-weight: bold;
	vertical-align: top;
	color: #000000;
	letter-spacing: -0.1em;
}

#header ul.menu {
	padding-top: 14px;
	float: right;
	display: talbe;
}

#header ul.menu li {
	padding-left: 20px;
	display: table-cell;
	list-style-type: none;
}

#header ul.menu li a {
	font-size: 24px;
	line-height: 24px;
	color: #444444;
	letter-spacing: -0.05em;
	border-bottom: 1px solid #444444;
/*	text-decoration: underline; */
}


/*------ contents ------*/

#contents h2.home_title {
	padding: 60px 0 0 0;
	height: 320px;
	color: #FFFFFF;
	text-shadow: 1px 1px 6px #663333, -1px -1px 6px #663333;
	font-size: 28px;
	line-height: 36px;
	font-weight: bold;
	letter-spacing: -0.05em;
}

#contents h2.page_title {
	padding: 80px 0 0 0;
	height: 160px;
	color: #FFFFFF;
	text-shadow: 1px 1px 5px #AA6600, -1px -1px 5px #AA6600;
	font-size: 48px;
	line-height: 48px;
	font-weight: bold;
}

#contents h3 {
	margin-top: 20px;
	padding: 10px 0 2px 10px;
	font-size: 26px;
	line-height: 26px;
	color: #000000;
	border-top: 1px solid #FF0000;
	border-left: 10px solid #FF0000;
	font-weight: bold;
}

#contents h4 {
	margin-top: 20px;
	padding: 5px 0 5px 15px;
	font-size: 20px;
	line-height: 20px;
	color: #000000;
	border-left: 5px solid #FF0000;
	font-weight: bold;
	background-color: #FFDDDD;
}

#contents .inner_content {
	margin-right: 20px; /* #contentsで右余白を0にしているので、ここで右余白を20px設定 */
	clear: both;
	overflow: hidden;
}

#contents .col2_left {
	margin-right: 20px;
	width: 370px;
	float: left;
}

#contents .col2_right {
	width: 370px;
	float: left;
}

#contents .home_topic {
	position: relative;
	height: 600px;
	margin-top:20px;
	border-right: #999999 1px solid;
	border-bottom: #999999 1px solid;
}

#contents strong.home_pc_support {
	position: absolute;
	display: inline-block;
	top: 190px;
	left: 20px;
	font-size: 48px;
	line-height: 48px;
	color: #FFFFFF;
	text-shadow: 1px 1px 6px #333333, -1px -1px 6px #333333;
	font-weight: bold;
	letter-spacing: -0.05em;
}

#contents strong.home_web_create {
	position: absolute;
	display: inline-block;
	top: 20px;
	left: 20px;
	font-size: 48px;
	line-height: 48px;
	color: #443344;
	text-shadow: 1px 1px 6px #FFFFFF, -1px -1px 6px #FFFFFF;
	font-weight: bold;
	letter-spacing: -0.05em;
}


#contents ul.sub_menu {
	margin: 20px 0 0 0;
	display: talbe;
	border-collapse: separate;
	border-spacing: 0 20px 0 0;
}

#contents ul.sub_menu li {
	display: table-cell;
}

#contents ul.sub_menu li a {
	margin: 0 20px 0 0;
	padding: 0 20px 0 20px;
	display: inline-box;
	line-height: 24px;
	font-size: 24px;
	color: #CC6666;
/*	text-decoration: underline; */
	border-bottom: 1px solid #CC6666;
}

#contents ul.list{
	margin: 10px 0 0 0;
}

#contents ul.list li {
	padding: 0 0 0 12px;
	line-height: 40px;
	list-style-type: none;
	background: url("image/list_icon.svg") left center no-repeat;
}

#contents a.link_button {
	display: inline-block;
	padding: 20px;
	line-height: 24px;
	font-size: 24px;
	color: #FFFFFF;
	background-color: #FF6633;
}

#contents a.link_button_L {
	display: block;
	width: 760px;
	padding: 32px;
	text-align: center;
	font-size: 32px;
	line-height: 32px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #FF6633;
}

/* トップページのリンクのみ、表示位置を絶対値指定 */
#contents a.home_link {
	position: absolute;
	display: inline-block;
	bottom: 20px;
	right: 20px;
}

#contents ul.check_list {
	margin-top: 20px;
	padding: 20px;
	width: 100%;
	border: 1px solid #666666;
}

#contents ul.check_list li {
	padding: 0 0 0 26px;
	line-height: 40px;
	list-style-type: none;
	background: url("image/check.svg") left 11px no-repeat;
}


/*------ footer ------*/

#footer ul.f_menu {
	float: right;
	display: talbe;
	overflow: hidden;
}

#footer ul.f_menu li {
	padding-left: 20px;
	display: table-cell;
	list-style-type: none;
}

#footer ul.f_menu li a {
	display: inline-box;
	line-height: 18px;
	font-size: 18px;
	color: #666666;
}

#footer .f_info {
	font-size: 14px;
	text-align: center;
	clear: both;
}

#footer .f_copy {
	font-size: 14px;
	margin-top:20px;
	text-align: center;
}


/*------ common tag ------*/
a {
	text-decoration: none;
	color: #FF0000;
}

a:hover, a:active {
	opacity: 0.5;
}

strong {
	font-weight: bold;
}

img {
	border-width: 0;
}

p {
	margin-top: 20px;
}

hr {
	margin-top: 40px;
}

table {
	margin-top: 20px;
	border-collapse: collapse;
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
}

tr {
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
}

td{
	padding: 10px;
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
	vertical-align: middle;
}

dl {
	margin-top: 20px;
}

dt {
	margin-top: 20px;
	padding-left: 20px;
	color: #000000;
	background-color: #FFDDDD;
	
}

dd {
	padding-left: 20px;
}

/*------ common class ------*/

.clearBoth {
	clear: both;
}