/*重要●dv-04はこの位置から動かさないこと！＆この上には設定項目を置かないこと！*/
/*重要●javascriptでdocument.styleSheets[0].cssRules[0].style.display = 'none';*/
/*重要●という記述をしている為、これ（dv-04）は先頭にあるという前提です。*/

.dv-04 {
	position:fixed;
	top:120px;
	left:0px;
	width:700px;
	height:90px;

}
@media screen and (min-width: 768px) { 
	.dv-04 {
		width:400px;
		height:210px;
		visibility:visible;
		overflow:hidden;
		position: relative;
		top:-756px;
		left:48px;
	}
}
*{
	margin: 0px; 
	padding: 0px; 
}

body {
	margin-top: 0px;
	/*以下コメント解除すると、メニューを表示＋スマホ横向きにしたときに
	メニューの下の方がグレーアウトされてしまう、その為にスマホの場合のみコメントにする*/
	/*background-image: url(../images/back_grey.gif);*/
}
@media screen and (min-width: 768px) { 
	body {
		/*margin-top: 0px;*/
		background-image: url(../images/back_grey.gif);
	}

}

img{
/*この設定が無いと、dv-01-1-right内に配置した画像と背景色がズレてしまう。*/
/*画像を縦に並べたときに、配置した画像と画像の間に若干の隙間が出来てしまうのを防ぐための設定*/
  vertical-align:bottom;
}

a:link { color: #663300; }
a:visited { color: #663300; }
a:hover { color: #ff0000; font-weight: bold;}
a:active { color: #ff0000; }

.dv-head{
	position:fixed;
	z-index:1;/*これが無いと、アニメ画像がheaderの上に表示されてしまう*/
}

.relative1 {
	visibility:hidden;
	position: relative;
	/*top:0px;*/
	/*left:-90px;*/
	/*z-index: 6;*/
}
.dv-00 {
	/*以下の２つの設定でiPhoneグラグラ問題を解決する
	何故かwidth: 100%;とheight:100%;では、スクロール時にグラグラ左右にズレてしまう*/
	max-width: 100%;
	height:auto;

    border: 1px #D1D1D1 solid;
	border-top-width: 0px;/*TOPの隙間を埋めるため、上のボーダーを無くすと隙間が消える。全てのボーダーを消してしまうとデザイン上問題なので上だけ消去する*/
    /*border-width: 1px;*/
	margin-left: auto;
	margin-right: auto;
	/*background: #FF0000;*/
	background: #FFFFFF;
	overflow:hidden;
}
@media screen and (min-width: 768px) { 
	.dv-00 {
		width: 815px;
		height:auto;
		overflow:visible;
	}
}

.dv-01 {
	display:none;
}
@media screen and (min-width: 768px) { 
	.dv-01 {
		/*position:fixed;*/
		display:block;
		
		height:90px;
		width: 815px;
		/*
		font-size: 0;
		line-height: 240px;
		*/
		background: #FF9900;
	}
}	

.dv-01tab {
	display:none;
}
@media screen and (min-width: 768px) { 
	.dv-01tab {
		/*position:fixed;*/
		border-top-width: 0px;/*ヘッダー内の隙間を埋めるため、上のボーダーを無くすと隙間が消える。全てのボーダーを消してしまうとデザイン上問題なので上だけ消去する*/
		
		display:block;
		height:30px;
		width: 815px;
		
		font-size: 0;
		
		/*line-height: 190px;*/
		
		background: #FF9900;
	}
}

.dv-01-1 {

}
@media screen and (min-width: 768px) { 
	.dv-01-1 {
		/*display:block;*/
		/*flex-direction:row;*/
	}
}
.dv-01-1-dm{
	margin-top:-100px;/*ここをマイナス指定しておかないと、先頭に隠れているメッセージのせいでメニューボタンを押せなくなる*/
	padding-left:0px;
	width:100%;
	height:0px;
	/*background: #FF9900;*/
	opacity: 0.88;
}
@media screen and (min-width: 768px) { 
	.dv-01-1-dm{
		display:none;
	}
}
.dv-office-head1 {
	/*margin-top:100px;指定は、dv-01-1-dmの「margin-top:-100px;」とセット。
	ズレをここで矯正する。*/
	margin-top:0px;
	display:none;
	margin-left: auto;
	margin-right: auto;
	padding-top:0px;
	padding-left:0px;
	/*height:100%;*/
	width:120%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	.dv-office-head1 {
		margin-top:0px;/*dv-01-1-dmの「margin-top:-100px;」の絡みで、この設定は必須*/
		display:none;		
		padding-top:140px;
		padding-left:0px;
		width:87%;
	}
}
.dv-office-head1-1 {
	/*margin-top:100px;指定は、dv-01-1-dmの「margin-top:-100px;」とセット。
	ズレをここで矯正する。*/
	margin-top:0px;
	display:none;
	margin-left: auto;
	margin-right: auto;
	padding-top:0px;
	padding-left:0px;
	/*height:100%;*/
	width:120%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	.dv-office-head1-1 {
		margin-top:0px;/*dv-01-1-dmの「margin-top:-100px;」の絡みで、この設定は必須*/
		display:block;/*ここだけが、dv-office-head1との違い*/		
		padding-top:140px;
		padding-left:0px;
		width:87%;
	}
}
.dv-office-head1-smart {
	/*margin-top:100px;指定は、dv-01-1-dmの「margin-top:-100px;」とセット。
	ズレをここで矯正する。*/
	margin-top:100px;
	display:none;
	margin-left: auto;
	margin-right: auto;
	padding-top:0px;
	padding-left:0px;
	/*height:100%;*/
	width:100%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	.dv-office-head1-smart {
		display:none;	
		margin-top:0px;/*dv-01-1-dmの「margin-top:-100px;」の絡みで、この設定は必須*/
		padding-top:140px;
		padding-left:0px;
		width:87%;
	}	
}
.dv-office-head2 {
	/*margin-top:100px;指定は、dv-01-1-dmの「margin-top:-100px;」とセット。
	ズレをここで矯正する。*/
	margin-top:0px;
	margin-left: auto;
	margin-right: auto;
	padding-top:0px;
	padding-left:0px;
	/*height:100%;*/
	width:120%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	.dv-office-head2 {
		margin-top:0px;/*dv-01-1-dmの「margin-top:-100px;」の絡みで、この設定は必須*/
		/*padding-top:140px;*/
		padding-left:0px;
		width:87%;
	}
}

/*●Excel*/
.dv-office-excel {
	clear:both;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3px;	
	/*padding-left:0px;*/
	/*height:150%;*/
	width:150%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	.dv-office-excel {
		/*padding-left:0px;*/
		width:87%;
	}
}
#dv-office-excel-1 {
	display:none;
	overflow:hidden;
	margin-top:1%;
	margin-left:25%;	
	height:100%;
	width:90%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#dv-office-excel-1 {
		float:left;
		margin-top:0%;
		margin-left:14%;		
		width:30%;
	}
}

.etc_kouza{
}
@media screen and (min-width: 768px) { 
	.etc_kouza{
		cursor:pointer;
	}
}

#office_excel{
}
@media screen and (min-width: 768px) { 
	#office_excel{
		cursor:pointer;
	}
}

#office-excel-1 {
	margin-left:30%;
	width:60%;
	
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#office-excel-1 {
		margin-left:0%;
		width:100%;
	}
}

#dv-office-excel-2 {
	display:none;
	overflow:hidden;
	margin-left:25%;	
	height:100%;
	width:90%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#dv-office-excel-2 {
		float:left;
		margin-left:-5%;
		width:30%;
	}
}
#office-excel-2 {
	margin-left:30%;
	width:60%;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#office-excel-2 {
		margin-left:0%;
		width:100%;
	}
}

#dv-office-excel-3 {
	display:none;
	overflow:hidden;
	margin-left:25%;	
	height:100%;
	width:90%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#dv-office-excel-3 {
		float:left;
		margin-left:-2%;
		width:30%;

	}
}
#office-excel-3 {
	margin-left:30%;
	width:60%;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#office-excel-3 {
		margin-left:0%;
		width:100%;
	}
}
/*●Access*/
.dv-office-access {
	clear:both;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	/*padding-left:0px;*/
	width:150%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	.dv-office-access {
		/*padding-left:0px;*/
		margin-top: 1px;
		width:87%;
	}
}
#dv-office-access-1 {
	display:none;
	overflow:hidden;
	margin-top:1%;
	margin-left:25%;		
	height:100%;
	width:90%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#dv-office-access-1 {
		float:left;
		margin-top:0%;
		margin-left:14%;		
		width:30%;		
	}
}

#office_access{
}
@media screen and (min-width: 768px) { 
	#office_access{
		cursor:pointer;
	}
}

#office-access-1 {
	margin-left:30%;
	width:60%;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#office-access-1 {
		margin-left:0%;
		width:100%;
	}
}

#dv-office-access-2 {
	display:none;
	overflow:hidden;
	margin-left:25%;
	height:100%;
	width:90%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#dv-office-access-2 {
		float:left;
		margin-left:0%;
		width:30%;
	}
}
#office-access-2 {
	margin-left:30%;
	width:60%;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#office-access-2 {
		margin-left:0%;
		width:100%;
	}
}

#dv-office-access-3 {
	display:none;
	overflow:hidden;
	margin-left:25%;	
	height:100%;
	width:90%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#dv-office-access-3 {
		float:left;
		width:30%;
		margin-left:-7%;
	}
}
#office-access-3 {
	margin-left:30%;
	width:60%;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	#office-access-3 {
		margin-left:0%;
		width:100%;
	}
}

/*●Word*/
.dv-office-word {
	clear:both;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	/*padding-left:0px;*/
	width:150%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	.dv-office-word {
		/*padding-left:0px;*/
		width:87%;
		margin-top: 1px;
	}
}

/*●Powerpoint*/
.dv-office-powerpoint {
	clear:both;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;	
	/*padding-left:0px;*/
	width:150%;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 768px) { 
	.dv-office-powerpoint {
		/*padding-left:0px;*/
		width:87%;
		margin-top: 1px;	
	}
}

.dv-03 {
	height:20px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align:center;
	line-height:20px;
	background:#FFFFFF;
	
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	color: #663300;
	line-height: 24px;
	/*margin-right: 75px;
	margin-left: 85px;*/
}
@media screen and (min-width: 768px) { 
	.dv-03 {
		clear:both;
		font-size: 13px;
	}
}


/*ヘッダー部メッセージ用*/
.dv-06_1 {
	/*display:none;*/
	/*background-color: #00FF00;*/
}
@media screen and (min-width: 768px) { 
	.dv-06_1 {
		/*position:fixed;*/
		width:795px;
		height:80px;
		align=right;
		visibility:visible;
		position: relative;
		top:5px;
		left:20px;
		/*background-color: #00FF00;*/
	}
}

.dv-06_2 {
	/*display:none;*/
	/*background-color: #0000FF;*/
}
@media screen and (min-width: 768px) { 	
	.dv-06_2 {
		/*position:fixed;*/
		width:760px;
		height:80px;
		overflow:hidden;
		visibility:hidden;
		position: relative;
		/*background-color: #0000FF;*/
	}
}

#dv-pageslide{
	display:none;
	width:100%;
	background:url("../images/menu_office.gif") no-repeat;
	background-size:100%;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}

#menu_1 a:active img {
	/*「display:hidden」にすると、前面に配置した画面が消えて
	ハイパーリンクが利かなくなる為、透明化により対処する*/
	opacity:0;
}

#menu_2 a:active img {
	opacity:0;
}
#menu_3 a:active img {
	opacity:0;
}
#menu_4 a:active img {
	opacity:0;
}
#menu_5 a:active img {
	opacity:0;
}
#menu_6 a:active img {
	opacity:0;
}
#menu_7 a:active img {
	opacity:0;
}

/*---★★★ これより以下はコンテンツ関連 ★★★---*/
/*---★★★ これより以下はコンテンツ関連 ★★★---*/
/*---★★★ これより以下はコンテンツ関連 ★★★---*/
.dv-conts{
	margin-top:16px;
	width:100%;
}
@media screen and (min-width: 768px) { 	
	.dv-conts{
		/*overflow:hidden;記述しておかないと、これ以降でfloat指定したDIVが、この親要素に収まり切れない*/
		/*論理的ではないがネットをググるとスタンダードな解決方法でもあるようだ。*/
		overflow:hidden;
		display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
		margin-left: auto;
		margin-right: auto;

		width:87%;
		border:solid 1px #FFD988;		
	}
}
.dv-conts-head{
	width:100%;
	padding-top: 5px;
	background-color: #FFFAD9;
	border:solid 1px #FFD988;
	border:solid 1px #FFD988;
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
}
@media screen and (min-width: 768px) { 	
	.dv-conts-head {
		padding-top: 20px;
	}
}

#EXCELSYOSIN{
}
@media screen and (min-width: 768px) { 	
	#EXCELSYOSIN {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-100px;
		padding-top:100px;
		position:absolute;/*chrome対応*/
	}
}
#EXCELKANSU{
}
@media screen and (min-width: 768px) { 	
	#EXCELKANSU {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-110px;
		padding-top:110px;
		position:absolute;/*chrome対応*/
	}
}
#EXCELVBA{
}
@media screen and (min-width: 768px) { 	
	#EXCELVBA {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-110px;
		padding-top:110px;
		position:absolute;/*chrome対応*/
	}
}
#ACCESSKISO{
}
@media screen and (min-width: 768px) { 	
	#ACCESSKISO {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-130px;
		padding-top:130px;
		position:absolute;/*chrome対応*/
	}
}
#ACCESSVBA{
}
@media screen and (min-width: 768px) { 	
	#ACCESSVBA {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-130px;
		padding-top:130px;
		position:absolute;/*chrome対応*/
	}
}
#ACCESSADO{
}
@media screen and (min-width: 768px) { 	
	#ACCESSADO {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-130px;
		padding-top:130px;
		position:absolute;/*chrome対応*/
	}
}
#WORD{
}
@media screen and (min-width: 768px) { 	
	#WORD {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-130px;
		padding-top:130px;
		position:absolute;/*chrome対応*/
	}
}
#POWERPOINT{
}
@media screen and (min-width: 768px) { 	
	#POWERPOINT {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-130px;
		padding-top:130px;
		position:absolute;/*chrome対応*/
	}
}
#JAVA{
}
@media screen and (min-width: 768px) { 	
	#JAVA {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-110px;
		padding-top:110px;
		position:absolute;/*chrome対応*/
	}
}
#C{
}
@media screen and (min-width: 768px) { 	
	#C {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-110px;
		padding-top:110px;
		position:absolute;/*chrome対応*/
	}
}
#CMAC{
}
@media screen and (min-width: 768px) { 	
	#CMAC {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-110px;
		padding-top:110px;
		position:absolute;/*chrome対応*/
	}
}
#ANDROID{
}
@media screen and (min-width: 768px) { 	
	#ANDROID {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-110px;
		padding-top:110px;
		position:absolute;/*chrome対応*/
	}
}
#ROBOT{
}
@media screen and (min-width: 768px) { 	
	#ROBOT {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-110px;
		padding-top:110px;
		position:absolute;/*chrome対応*/
	}
}
#HTML5CSS3{
}
@media screen and (min-width: 768px) { 	
	#HTML5CSS3 {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-110px;
		padding-top:110px;
		position:absolute;/*chrome対応*/
	}
}
#PHP{
}
@media screen and (min-width: 768px) { 	
	#PHP {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-130px;
		padding-top:130px;
		position:absolute;/*chrome対応*/
	}
}
#JAVASCRIPT{
}
@media screen and (min-width: 768px) { 	
	#JAVASCRIPT {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-130px;
		padding-top:130px;
		position:absolute;/*chrome対応*/
	}
}
#PERL{
}
@media screen and (min-width: 768px) { 	
	#PERL {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-130px;
		padding-top:130px;
		position:absolute;/*chrome対応*/
	}
}
#WEBAPPLICATION{
}
@media screen and (min-width: 768px) { 	
	#WEBAPPLICATION {
		/*以下３Stepが無いと、EXCELSYOSINのアンカーにリンクした時にページヘッダー部分をfixしているためズレてしまう*/
	 	/*以下３Stepは上記を解消するための記述*/
		margin-top:-130px;
		padding-top:130px;
		position:absolute;/*chrome対応*/
	}
}

.ExcelSyosinTitle{
 	display:none;
}
@media screen and (min-width: 768px) { 	
	.ExcelSyosinTitle {
	 	display:block;
		width:100%;
	}
}
.ExcelSyosinTitleSmart{
	width:80%;
	margin-top:10px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;
/*	height:"135";*/
}
@media screen and (min-width: 768px) { 	
	.ExcelSyosinTitleSmart {
		display:none;
	}
}
.KouzaTitle{
	width:80%;
	margin-top:10px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;
/*	height:"135";*/
}
@media screen and (min-width: 768px) { 	
	.KouzaTitle {
		margin-top:0px;
		width:50%;
	}
}
.KouzaTitle1{
	display:none;
/*	height:"135";*/
}
@media screen and (min-width: 768px) { 	
	.KouzaTitle1 {
	width:80%;
	margin-top:-20px;
	margin-bottom:15px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;		
	}
}
.KouzaTitle2{
	width:100%;
	margin-top:0px;
	margin-bottom:15px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;
/*	height:"135";*/
}
@media screen and (min-width: 768px) { 	
	.KouzaTitle2 {
		display:none;
	}
}

.KouzaTitle3{
	width:80%;
	margin-top:10px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;
/*	height:"135";*/
}
@media screen and (min-width: 768px) { 	
	.KouzaTitle3 {
		margin-top:-10px;
		width:50%;
	}
}
.KouzaTitle4{
	width:92%;
	margin-top:15px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;
/*	height:"135";*/
}
@media screen and (min-width: 768px) { 	
	.KouzaTitle4 {
		margin-top:0px;
		width:75%;
	}
}

.KouzaKyouzai{
	width:80%;
	margin-top:5px;
	margin-bottom:5px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;
/*	height:"135";*/
}
@media screen and (min-width: 768px) { 	
	.KouzaKyouzai {
		padding-left:8px;
	}
}

.p-conts-head1{
	margin-top:10px;
	padding-left:20px;
	padding-right:20px;
/*	background-color: #FFFAD9;*/
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 14px;
	font-style: normal;
	font-weight:normal;
	color: #FF3333;
	line-height: 24px;	
}
@media screen and (min-width: 768px) { 	
	.p-conts-head1 {
		display:none;
	}
}
.p-conts-head2{
	margin-top:5px;
	margin-left:16px;
	margin-right:20px;
	text-align:center;
/*	background-color: #FFFAD9;*/
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 14px;
	font-style: normal;
	font-weight:normal;
	color: #000000;
	line-height: 24px;	
}
.p-conts-head3{
	margin-top:5px;
	margin-left:16px;
	margin-right:20px;
	text-align:center;
/*	background-color: #FFFAD9;*/
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 17px;
	font-style: normal;
	font-weight:bold;
	color: #FF0000;
	line-height: 24px;	
}
@media screen and (min-width: 768px) { 	
	.p-conts-head3 {
	}
}
.excel_version{
 	display:none;
}
@media screen and (min-width: 768px) { 	
	.excel_version {
	 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
		margin-left: auto;
		margin-right: auto;
		margin-top:5px;
		padding-bottom:18px;				
		width:90%;
	}
}
.excel_version_smart{
	width:90%;
	margin-top:20px;
	padding-bottom:18px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;
/*	height:"135";*/
}
@media screen and (min-width: 768px) { 	
	.excel_version_smart {
		display:none;
	}
}
.pointmaster-head{
	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right:auto;
	width:80%;
}
@media screen and (min-width: 768px) { 	
	.pointmaster-head {
		display:none;
	}
}
.dv-conts-left{
	width:100%;
	margin-left: auto;
	margin-right: auto;
	margin-top:0px;
	padding-top:10px;
	background-color: #FFFFFF;
}
@media screen and (min-width: 768px) { 	
	.dv-conts-left {
		float:left;
		width:50%;
	}
}
.dv-conts-center{
	width:95%;
	margin-left: auto;
	margin-right: auto;
	margin-top:0px;
	padding-top:10px;
	background-color: #FFFFFF;
}
@media screen and (min-width: 768px) { 	
	.dv-conts-center {
	}
}
.p-conts-left-title{
	margin-top:5px;
	margin-left:10px;
	margin-right:5px;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	color: #FF3300;
	line-height: 32px;	
}
@media screen and (min-width: 768px) { 	
	.p-conts-left-title {
		margin-left:20px;
		margin-right:10px;		
	}
}

.p-conts-left{
	margin-left:10px;
	margin-right:10px;
	margin-bottom:15px;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	line-height: 32px;	
}
@media screen and (min-width: 768px) { 	
	.p-conts-left {
		margin-left:20px;
		margin-right:20px;
	}
}
.p-conts-center{
	margin-top:6px;
	margin-left:10px;
	margin-right:5px;
	margin-bottom:15px;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	line-height: 32px;	
}
@media screen and (min-width: 768px) { 	
	.p-conts-center {
		margin-top:12px;
		font-size: 16px;
		margin-left:20px;
		margin-right:20px;
		line-height: 34px;
	}
}
.p-conts-center1{
	margin-top:0px;
	margin-left:20px;
	margin-right:5px;
	margin-bottom:15px;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	line-height: 32px;	
}
@media screen and (min-width: 768px) { 	
	.p-conts-center1 {
		font-size: 16px;
		margin-left:30px;
		margin-right:20px;
		line-height: 34px;
	}
}

.ContsSupportImg{
		/*以下３Stepのセットでフッター上の２つのボタンをセンタリング*/
		display:block;
		margin-left: auto;
		margin-right:auto;
		width:95%;
}
@media screen and (min-width: 768px) { 	
	.ContsSupportImg {
		margin-bottom:0px;
		width:90%;
	}
}

.dv-conts-right{
	display:none;
	
}
@media screen and (min-width: 768px) { 	
	.dv-conts-right {
		display:block;
		float:left;
		margin-top:0px;
		padding-top:17px;
		padding-bottom:5px;		
		width:49%;
		border:solid 1px #FFD988;
		border-top-width: 0px;
		border-right-width: 0px;
		border-bottom-width: 0px;
		background-color: #FFFFFF;	
	}
}

.p-conts-right-title{
	display:none;
}
@media screen and (min-width: 768px) { 	
	.p-conts-right-title {
		display:block;
		margin-top:10px;
		margin-left:10px;
		font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
		font-size: 15px;
		font-style: normal;
		font-weight: bold;
		color: #663300;
		line-height: 28px;
	}
}
.p-conts-right-title1{
	display:none;
}
@media screen and (min-width: 768px) { 	
	.p-conts-right-title1 {
		display:block;
		margin-top:5px;
		margin-left:10px;
		font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
		font-size: 15px;
		font-style: normal;
		font-weight: bold;
		color: #663300;
		line-height: 28px;
	}
}
.p-conts-right{
	display:none;
}
@media screen and (min-width: 768px) { 	
	.p-conts-right {
		display:block;
		margin-top:0px;
		margin-left:20px;
		margin-right:2px;
		margin-bottom:5px;
		font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
		font-size: 14px;
		font-style: normal;
		font-weight: normal;
		color: #000000;
		line-height: 26px;		
	}
}
.p-conts-right-robot{
	display:none;
}
@media screen and (min-width: 768px) { 	
	.p-conts-right-robot {
		display:block;
		margin-top:0px;
		text-align:center;
		margin-bottom:5px;
		font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
		font-size: 14px;
		font-style: normal;
		font-weight: normal;
		color: #000000;
		line-height: 26px;		
	}
}
.p-conts-right-mos{
	display:none;
}
@media screen and (min-width: 768px) { 	
	.p-conts-right-mos {
		display:block;
		text-align:right;
		margin-top:0px;
		margin-left:20px;
		margin-right:20px;
		margin-bottom:5px;
		font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
		font-size: 14px;
		font-style: normal;
		font-weight: normal;
		color: #000000;
		line-height: 26px;		
	}
}

.dv-conts-futter{
	width:100%;
	padding-top:10px;
	background-color: #E0CC96;
	border:solid 1px #FFD988;
	border:solid 1px #FFD988;
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	
}
@media screen and (min-width: 768px) { 	
	.dv-conts-futter {
		clear:both;
		padding-top: 20px;
	}
}
.dv-kouza-futter{
	width:100%;
	margin-top:0px;
	margin-bottom:20px;
	/*以下３Stepのセットでフッター上の２つのボタンをセンタリング*/
	text-align:center;
	margin-left:auto;
    margin-right:auto;
}
@media screen and (min-width: 768px) { 	
	.dv-kouza-futter {
		width:50%;
	}
}
.dv-kouza-futter1{
	width:100%;
	margin-top:15px;
	margin-bottom:20px;
	/*以下３Stepのセットでフッター上の２つのボタンをセンタリング*/
	text-align:center;
	margin-left:auto;
    margin-right:auto;
}
@media screen and (min-width: 768px) { 	
	.dv-kouza-futter1 {
		width:100%;
	}
}
.kouza-futter1{
	width:80%;
	margin-top:10px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;
}
@media screen and (min-width: 768px) { 	
	.kouza-futter1 {
		width:60%;
	}
}
.kouza-futter2{
	width:38%;
}
@media screen and (min-width: 768px) { 	
	.kouza-futter2 {
		width:48%;
	}
}
.kouza-futter3{
	width:40%;
}
@media screen and (min-width: 768px) { 	
	.kouza-futter3 {
	}
}
.kouza-futter4{
	width:80%;
	margin-top:10px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;
}
@media screen and (min-width: 768px) { 	
	.kouza-futter4 {
		width:40%;
	}
}

#page-top {
    position: fixed;
    bottom: 0px;
    right: 3px;
	cursor:pointer;
    font-size: 77%;
	width:20%;
}
@media screen and (min-width: 768px) { 
	#page-top {
		right: 30px;
		width:90px;
		height=80px;	
	}
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

/*以下futterの意義：これがないと次のアンカーに上手く飛んでくれない。恐らくclear:bothがポイント。
　境界線を引く為にも重要*/
.dv-dummy-futter{
	border:solid 1px #FFD988;
}
@media screen and (min-width: 768px) { 	
	.dv-dummy-futter {
		clear:both;
	}
}

#RobotTitle{
  	display:block;
	margin-top:10px;
	margin-left: auto;
	margin-right: auto;
	width:100%;
}
@media screen and (min-width: 768px) { 	
	#RobotTitle {
		margin-top:0px;
		width:60%;
	}
}
.RobotKouzaKyouzai{
	width:50%;
	margin-top:5px;
	margin-bottom:5px;
 	display:block;/*これを記述しておかないと、以下のmargin-leftとmargin-rightの設定が有効にならない	*/
	margin-left: auto;
	margin-right: auto;
/*	height:"135";*/
}
@media screen and (min-width: 768px) { 	
	.RobotKouzaKyouzai {
	}
}

.dv-office-head3 {
	width:120%;
}
@media screen and (min-width: 768px) { 
	.dv-office-head3 {
		margin-left: auto;
		margin-right: auto;
		padding-top:0px;
		padding-left:0px;
		padding-top:20px;
		padding-left:0px;
		width:87%;
		background: #FFFFFF;
		/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		tap-highlight-color: rgba(0, 0, 0, 0);		
	}
}
.dv-office-head4 {
	/*margin-top:100px;指定は、dv-01-1-dmの「margin-top:-100px;」とセット。
	ズレをここで矯正する。*/
	margin-top:0px;
	margin-left: auto;
	margin-right: auto;
	padding-top:16px;
	padding-left:0px;
	background: #FFFFFF;
	/*以下は、リンクをタップした時に一瞬でる半透明の背景色を消すための措置*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
	width:120%;
}
@media screen and (min-width: 768px) { 
	.dv-office-head4 {
		padding-top:14px;	
		width:87%;
	}
}