@charset "UTF-8";
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ページ全体に適用するスタイル↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

/***********************************************
// 概 要：サーバー上にあるフォント名を指定して使用する
// 備 考：
***********************************************/

@font-face {
	font-family: 'icomoon';
	src: url("../fonts/icomoon/icomoon.eot?srf3rx");
	src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
	font-weight: normal;
	font-style: normal;
}

/***********************************************
// 概 要：ページ全体を使用する
// 備 考：
***********************************************/

body, html {
	height: 100%;
}

/***********************************************
// 概 要：bodyの設定
// 備 考：
***********************************************/

/***********************************************
// 概 要：「使用方法」の画像がクリックされたときにモーダルウィンドウ外を固定する
// 備 考：
***********************************************/

.bodyfixed {
	position: fixed;
}

/***********************************************
// 概 要：各グリッドの高さ・幅及びグリッド領域を設定する
// 備 考：高さ・幅の指定：「px」「auto」「vh」「fr」「%」で指定可能
         グリッド領域：任意の文字列で指定可能
***********************************************/

#container {
	/*最低限webブラウザの使用領域と同等の高さを取る*/
	min-height: 100%;
	/* background: linear-gradient(white,rgb(130, 166, 228)); */
	/* background: linear-gradient(rgb(244,247,252),rgb(130, 166, 228)); */
	/*スクロールバーを非表示にする*/
	overflow: hidden;
	/*displayタイプをグリッドにする*/
	display: -ms-grid;
	display: -webkit-grid;
	display: grid;
	/*１行目の高さ、２行目の高さ・・・と指定する*/
	-ms-grid-rows: auto auto ;
	-webkit-grid-rows: auto auto ;
	/* grid-template-rows: 80px auto; */
	grid-template-rows: auto auto;
	grid-template-rows: 80px auto;

	/* grid-template-rows: auto auto; */
	/*1列目の幅、2列目の幅・・・と指定する*/
	-ms-grid-columns: 1fr 12fr 1fr;
	-webkit-grid-columns: 1fr 12fr 1fr;
	grid-template-columns: 1fr 12fr 1fr;

	/*上で指定したグリッドに合わせてエリアに名前を付けることで、表示する場所を指定できる*/
	
	grid-template-areas: 
	"header					header			header				" 
	"webseminar webseminar webseminar" ;
	padding: 0;
}
#container div{
	/* border: solid 3px rgb(75, 35, 185); */
}

#menu ul li a{
	font-size: 17px;
}

#webseminar {
	-ms-grid-column: 1;
	-ms-grid-row: 2;
	-ms-grid-column-span: 3;
	-webkit-grid-column: 1;
	-webkit-grid-row: 2;
	-webkit-grid-column-span: 3;

	grid-area: webseminar;
	width: 100%;
	/* margin-bottom: 30px; */
	border-top: 6px solid rgb(68,114,196);
	background: linear-gradient(rgb(244,247,252),90%,rgb(130, 166, 228));
	
}

#webseminar .holding{
	color: white;
	background-color: rgb(76, 123, 209);
	border: 4px solid rgb(169,208,244);
	text-align: center;
	width: 16em;
	margin:30px auto;
	font-size: 30px;
	font-weight: bolder;
	font-weight: bold;

}

#webseminar .detail{
	/* background-color: transparent;*/
	color: rgb(32,56,100);
	background-color: rgb(255,227,255);

	/* border: rgb(209,182,205) solid 3px; */
	/* border: rgb(209,182,205) outset 3px; */
	/* background-image: url(../images/vinewidth.png);
	background-image: url(../images/fdial.png);
	background-image: url(../images/shousai.png);

	background-size: cover; */
	/* background-size: contain; */
	background-size: 16em auto;
	width: 16em;
	margin: 60px auto;
	text-align: center;
	margin-bottom: 90px;
	font-size: 30px;
	font-weight: bolder;
	position: relative;
}
#webseminar .detailbutton{
	background-color: transparent;
	/* background-color: black; */

	width: 60%;
	max-width: 500px;
	margin:30px auto;
	/* background-color: turquoise; */
}
#webseminar .detailbutton:hover{
	opacity: 0.6;
}

#webseminar .bolded{
	font-weight: bold;
	margin-top: 30px;
	margin-bottom: 20px;

}

#webseminar .entry{
	width: 6em;
	color: black;
	font-size: 30px;
	border:rgb(0, 26, 255) 3px solid;
	border:rgb(0, 26, 255) 3px double;
	
	
	border-radius: 40%;
	text-align: center;
	background-color: rgb(227,234,242);
	margin:30px auto;
}

#webseminar .i2Style{
	font:bold 24px Century Gothic, sans-serif;
	font-style:normal;
	color:#1f3fde;
	color: rgb(32,56,100);

	background:#E3EAF2;
	border:4px groove #d5dbb6;
	border:4px ridge #d5dbb6;
	border:4px solid #d5dbb6;

	border:4px double #dce2ba;

	text-shadow:0px 0px 0px #084d0c;
	/* box-shadow:8px 0px 7px #252b01;
	-moz-box-shadow:8px 0px 7px #252b01;
	-webkit-box-shadow:8px 0px 7px #252b01; */
	border-radius:40px 40px 40px 40px;
	-moz-border-radius:40px 40px 40px 40px;
	-webkit-border-radius:40px 40px 40px 40px;
	width:150px;
	padding:12px 28px;
	/* cursor:pointer; */
	margin:10px auto;
	margin-bottom: 30px;
}

	

#webseminar .i2Style a{
	width: 6em;
	color: rgb(32,56,100);
	font-size: 30px;
	text-decoration: none;
	background-color: transparent;
}


/* #octagon {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
  }
  #octagon:before {
	content: "";
	width: 100px;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: 29px solid red;
	border-left: 29px solid transparent;
	border-right: 29px solid transparent;
  }
  #octagon:after {
	content: "";
	width: 100px;
	height: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 29px solid red;
	border-left: 29px solid transparent;
	border-right: 29px solid transparent;
  } */



#webseminar .entrylogo{
	color: white;
	background-color: rgb(76, 123, 209);
	border: double blue 8px;
	border: double rgb(38, 67, 111) 5px;
	
	text-align: center;
	width: 15em;
	font-size: 30px;
	font-weight: bold;
	margin: 30px auto;
}

#webseminar .entrybutton{
	background-color: transparent;
	/* background-color: black; */

	/* max-width: 600px; */
	/* max-width: 200px; */

	/* max-width: 100px; */
	width: 60%;
	max-width: 250px;
	margin-bottom: 100px;
	/* background-color: turquoise; */
}
#webseminar .entrybutton:hover{
	opacity: 0.6;
}

/*input.cssのスタイル*/
#webseminar .entrylogo span{
	color: rgb(255,242,204);
}
#webseminar .contentswidth{
	width: 800px;
	/* width: 70vw;
	width: 300px; */

	margin: 0 auto;
	word-break: break-all;
	font-size: 20px;
}

#webseminar .textwidth{
	width: 800px;
	/* width: 70vw;
	width: 300px; */

	margin: 0 auto;
	word-break: break-all;
	font-size: 20px;
}

/* thanks.php */
#webseminar .entryend{
	color: white;
	background-color: rgb(76, 123, 209);
	
	text-align: center;
	width: 17em;
	font-size: 30px;
	font-weight: bold;
	margin: 60px auto;
	margin-top: 120px;
}
#webseminar .entryend span{
	color: rgb(255,242,204);
	font-size:1.2em;
}

#webseminar .centering{
	text-align: center;
	/* margin-bottom: 30px; */
}
#webseminar .underred{
	color: rgb(255, 34, 34);
	color: rgb(255, 34, 34);
	text-align: center;

	text-decoration: underline;
	margin-top: 60px;
	margin-bottom: 120px;
}

/* contact */
.contact {
	/* background-color: transparent; */
}
.contact p{
	width: 1000px;
	text-align: left;
	margin: 0 auto;
	margin-bottom: 1em;
}

.contact div {
	width: 100%;
	display: inline-block;
	text-align: left;
}

.contact .borderall {
	margin-left: 5px;
	margin-bottom: 30px;
	width: 95%;
	width: 1000px;
	border: 1px solid black;
}
.contact .borderall span{
	vertical-align: bottom;
}

.contact .dencomlogo {
	color: white;
}

.contact .dencomlogo img {
	padding-left: 20px;
	padding-top: 20px;
	margin-right: 20px;
	/* margin-bottom: -10px; */
	max-width: 120px;
}
.contact a{
	vertical-align: bottom;
	vertical-align: text-bottom;
	/* display: inline; */
}

.contact .densei {
	/* display: inline-block; */
	font-size: 28px;
	color: #4D4D4D;
	vertical-align: bottom;
	vertical-align: text-bottom;
	display: inline;
	padding-left: 20px;

}

.contact .url {
	text-decoration: none;
	font-size: 24px;
	color: #79BEE9;
	color:rgb(51,63,80);
	font-weight: 600;
	transition: 0.5s;
	margin-left: 1em;
}

.contact .url:hover {
	text-decoration: underline;
}

.contact .fdial {
	line-height: 40px;
}

.contact .borderline {
	width: 95%;
	margin-left: 2%;
	border-top: 1px solid black;
}

.contact .tel {
	max-width: 43px;
	width: 100%;
	vertical-align: text-bottom;
}

.contact .other {
	display: inline-block;
	display: block;
	width: 100%;
	padding-left: 1em;
	font-size: 24px;
	margin-bottom: 2em;
	color: black;
}

.contact .other span {
	font-size: 1em;
	font-weight: 500;
	margin: 0 0;
}
.contact .other span.tel {
	font-size: 30px;
	font-weight: 500;
	margin-left: 1em;
	margin-left: 20px;
}

.contact .other .mailpic {
	max-width: 320px;
	width: 100%;
	vertical-align: bottom;
	vertical-align: text-bottom;
	vertical-align: middle;
}
.contact .other .mailfig{
	font-size: 25px;
}
.contact .other div {
	/* display: inline-block; */
	display: block;

}
.contact .other .fdial div {
	width: 44px;
	display: inline-block;
}
.contact .other .picture {
	font-size: 20px;
	line-height: 1.5;
}
.contact .other .mail {
	vertical-align: sub;
	vertical-align: middle;
}
@media screen and (max-width:991px) {
	/***********************************************
	// 概 要：グリッドの変更
	// 備 考：
	***********************************************/
	#container {
		-ms-grid-columns: 1fr;
		-webkit-grid-columns: 1fr;
		grid-template-columns: 1fr;
		/*上で指定したグリッドに合わせてエリアに名前を付けることで、表示する場所を指定できる*/
		/* 		grid-template-areas: "header" "home" "d-introtop" "d-introbot" "work" "specification" "pamp" "demo" "buy" "q-and-a" "columnspace" "contact";
 */
		grid-template-areas: "header" "webseminar";
	}

}

@media screen and (max-width:900px) {
	#webseminar .contentswidth{
		max-width: 280px;
	}
	#webseminar .textwidth {
		width: 100%;
		width: 90%;
		
	}
	
	#webseminar .centering{
		width: 90%;
		margin: auto;
	}

	#webseminar .holding{
		font-size: 20px;
	}
	#webseminar .entryend{
		width: 100%;
		font-size: 1em;
	}
	#webseminar .detailbutton{
		width: 90%;
	}
	body {
		font-size: 14px;
	}
	.contact .other, .contact .other div , .contact {
		width: 90%;
	}
	.contact .borderall {
		width: 90%;
	}
	.contact .borderall a {
		display: block;
	}
	.contact p{
		width: 100%;
		text-align: left;
		margin: 0 auto;
		margin-bottom: 1em;
	}
	
}

@media screen and (max-width:450px) {
	#webseminar .textwidth {

		font-size: 1em;
	}
	.contact .url {
		font-size: 20px;
		font-size: 18px;
		/* font-size: 10px; */
		
	}
	.contact .other .mailfig {
		font-size: 18px;
	}
}