@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://use.fontawesome.com/releases/v5.0.6/css/all.css);

/*------------------------------------------------------------------
	main.css
	Create: 2019.02.01
	Update: 2019.02.08
	Hiroyuki Ikeda

------------------------------------------------------------------*/

/*==================================================================
	共通基本設定
==================================================================*/
html{
	overflow-x : hidden;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

/*****  イニシャライズ  *****/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;  padding: 0;font-weight:normal;}
table{border-collapse: collapse;  border-spacing: 0;  }
img, abbr, acronym, fieldset{border: none;}
p {margin:0;}
ul{list-style:none;}
li{list-style-type: none;}
caption, th{text-align: left;  }
section{display:block;}

/*****  回り込み解除  *****/
.clearfix:after,.section_frame:after {
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	content: ".";
}
	.clearfix{ display: inline-block; }
/* Hides from IE 4-6 \*/
	* html .clearfix{ height: 1%; }
	.clearfix{display: block;} 
/* End hide from IE 4-6 */

/* clearfix */
.clearfix{zoom:1;}
.clearfix:after{
	content:"";
	display:block;
	clear:both;
}

/*****  カラー  *****/
.color_senspider1{color:#b333b3;}

/*-----------------------------------------------
	PC
------------------------------------------------*/
@media screen and (min-width: 481px) {
	.only_sp{display:none !important;}

	body {
		font-family: 'Noto Sans Japanese', "Yu Gothic","游ゴシック",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",'Hiragino Kaku Gothic Pro',"メイリオ",Meiryo, sans-serif;
		overflow-x : hidden;
		/*overflow-y : hidden;*/
		font-size: 100%;
		/*background:url(../image/senspider_bg_pc.png)center 0px no-repeat #000;*/
		/*background-size:100%, 100%;*/
		background-image:url(../image/senspider_bg_pc.png);
		background-position:center 0;
		background-attachment:scroll;
		background-repeat:no-repeat;
		background-color:#000;
	}

	/****** レイアウト・テキスト ******/
	.mainwrap *{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	.mainwrap{
		width:100%;
		/*padding-top:350px;*/
		display:block;
	}
	.contentwrap{
		width:900px;
		margin:0 auto;
	}
	.leftborder_wrap{
		width:900px;
		background:url(../image/senspider_leftborder_wrap_bg_pc.png)0px 0px no-repeat;
	}
	.keyvisual_wrap{
		margin-bottom:40px;
	}
	.fa-caret-right{
		margin-left:10px;
	}
	.footerbg{
		background:url(../image/senspider_bg_footer.png);
		background-position:0 bottom;
		background-repeat:no-repeat;
	}
	.iziModal_wrap{
		width:800px;
		margin:0 auto;
		padding:40px 20px 20px 20px;
		
	}
	.bgs{
		background-image:url(../image/senspider_photo_keyvisual.png);
		background-position:center 45px;
		background-repeat:no-repeat;
		height:325px;
		margin-bottom:35px;
	}
	.spec_photo_wrap{
		background-image:url(../image/senspider_photo_senspider.png);
		background-position:center top;
		background-repeat:no-repeat;
		padding-top:315px;
		padding-bottom:50px;
	}

	/****** メニュー設定 ******/
	.inner {
		/*max-width: 1230px;*/
		width:100%;
		margin: 0 auto;
	}
	.inner:after {
		content: "";
		clear: both;
		display: block;
	}
	#top-head {
		/*top: -70px;*/
		/*position: absolute;*/
		position: fixed;
		width: 100%;
		/*margin: 70px auto 0;*/
		line-height: 1;
		z-index: 999;
		height:70px;

		background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.0) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.00)));
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
		background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
		background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
		background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);

	}
	#top-head a,
	#top-head {
		text-decoration: none;
	}
	#top-head .inner {
		position: relative;
	}
	#top-head .logo {
		/*width:25%;*/
		width:153px;
		float: left;
	}
	#top-head .logo img{
		position: relative;
		top:20px;
		left:30px;
	}

	/* グローバルメニュースクロール時の設定 */
	/*
	#top-head.fixed {
		margin-top: 0;
		top: 0;
		position: fixed;
		height:40px;
		background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.0) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.00)));
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
		background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
		background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
		background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
		transition: top 0.65s ease-in;
		-webkit-transition: top 0.65s ease-in;
		-moz-transition: top 0.65s ease-in;
	}
	#top-head.fixed .logo img {
		width:65% !important;
		position: relative;
		top:12px;
		left:30px;
	}
	#top-head.fixed .gnav_wrap ul{
		position: absolute;
		right: 0;
		top:14px;
	}
	#top-head.fixed .gnav_wrap > ul > li > a.textlink {
		font-size:0.9rem;
	}
	*/

	/* グローバルメニューテキスト */
	.gnav_wrap > ul {
		list-style: none;
		position: absolute;
		right: 0;
		top:26px;
	}
	.gnav_wrap > ul > li {
		float: left;
		position: relative;
		padding-right:16px;
		padding-left:16px;
		border-right:1px solid #b333b3;
		-webkit-transform: skewX(150deg);
		-moz-transform: skewX(150deg);
		transform: skewX(150deg);
	}
	.gnav_wrap > ul > li:last-child {
		border:none;
	}
	.gnav_wrap > ul > li > a.textlink {
		display:block;
		color:#b333b3;
		/*font-weight:500; 游ゴシック用*/
		font-weight:300;
		transform: skewX(-150deg);
		padding:2px 2px 1px 2px;
	}
	.gnav_wrap > ul > li > a.textlink:hover {
		display:block;
		color:#000;
		background:#b333b3;
		padding:2px 2px 1px 2px;
	}

	/*****  本体仕様、インターフェース一覧テキストリンク設定  *****/
	.speclinkbox{
		/*border-color: rgba(255,255,255,0.3);*/
		border-top-style: solid;
		border-top-width: 1px;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		padding:15px 0px;
		color:#fff;
		border-image: linear-gradient(to right, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.3) 20%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 80%, rgba(255,255,255,0.0) 100%);
		border-image-slice: 1;
	}
	.speclinkbox a{
		display:inline-block;
		padding:1px 1px 0px 1px;
		color:#ccc;
		text-decoration:none;
	}
	.speclinkbox a:hover{
		padding:1px 1px 0px 1px;
		/*background:#fff;
		color:#000;*/
		opacity: 0.5;
		filter: alpha(opacity=50);
		-moz-opacity: 0.5;
		text-decoration:none;
	}
	.specbg{
		background-image:url(../image/senspider_sectiont_spec.svg);
		background-position:left center;
		background-repeat:no-repeat;
		background-size:auto 27px;
	}

	/*****  フッタ、フッタボタン部分設定  *****/
	.footerbtn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width:100%;
		height: 70px;
		color:#ccc;
		text-decoration:none;
		background-color:rgba(50,50,50,0.5);
		border-color: rgba(50,50,50,0.5);
		border-style: solid;
		border-width: 1px;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		font-family: "游ゴシック",YuGothic !important;
	}
	a.footerbtn:hover{
		background-color:rgba(60,60,60,1.0);
		border-color: rgba(100,100,100,0.5);
		border-style: solid;
		border-width: 1px;
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}
	a.footerbtn span {
		color:#ccc;
		text-align:center;
	}
	a.icon_dl{
		background-image:url(../image/footer_link_icon_dl.png);
		background-position:95% center;
		background-repeat:no-repeat;
	}
	a.icon_tab{
		background-image:url(../image/footer_link_icon_tab.png);
		background-position:95% center;
		background-repeat:no-repeat;
	}

	/****** モーダルウィンドウ設定 ******/
	.tabbtn {
		cursor: pointer;
		/*opacity: 0.3;
		filter: alpha(opacity=30);
		-moz-opacity: 0.3;*/
		background:#0d0d0d;
	}
	.tabbtn:not(:last-child) {
		border-color: rgba(0,0,0,1.0);
		border-right-style: solid;
		border-right-width: 1px;
	}
	.tabbtn.select {
		background:#1a1a1a;
		opacity: 1.0;
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		border-color: rgba(0,0,0,1.0);
		border-left-style: solid;
		border-left-width: 1px;
	}
	.dis_no {
		display: none;
	}

	/****** スペックテーブル ******/
	div.speccell{
		display:table;
		width:100%;
	}
	div.speccell > dl{
	    display:table-row;
	}
	div.speccell > dl dt,
	div.speccell > dl dd{
		display:table-cell;
		vertical-align:middle;
		border-color: rgba(51,51,51,1.0);
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}
	.spb_u{
		border-color: rgba(26,26,26,1.0);
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}
	div.speccell > dl:first-child dt,
	div.speccell > dl:first-child dd{
		border-color: rgba(51,51,51,1.0);
		border-top-style: solid;
		border-top-width: 1px;
	}
	div.speccell > dl dt{
		color:#b333b3;
		padding:10px 0 10px 0;
		font-weight:600;
		font-size:1.0rem;
	}
	div.speccell > dl dd{
		color:#fff;
		padding:10px 10px 10px 0;
		font-size:1.0rem;
	}
	.btn_u_line{
		border-color: rgba(51,51,51,1.0);
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}

	/*****  ページダウンフェードイン（PC用）  *****/
	.fadeindown {
		-webkit-animation-fill-mode:both;
		-ms-animation-fill-mode:both;
		animation-fill-mode:both;
		-webkit-animation-duration:1.0s;
		-ms-animation-duration:1.0s;
		animation-duration:1.0s;
		-webkit-animation-name: fadeindown;
		animation-name: fadeindown;
		visibility: visible !important;
	}
	@-webkit-keyframes fadeindown {
		0% { opacity: 0; -webkit-transform: translateY(-60px); }
		100% { opacity: 1; -webkit-transform: translateY(0); }
	}
	@keyframes fadeindown {
		0% { opacity: 0; -webkit-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px); }
		100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
	}


}/* PC END*/


/*-----------------------------------------------
	スマホ
------------------------------------------------*/
@media screen and (max-width: 480px) {
	.only_pc{display:none !important;}

	body{
		margin:0;
		padding:0;
		height: 100%;
		overflow-x:hidden;
		overflow-y:auto;
		font-family: 'Noto Sans Japanese', Verdana, "游ゴシック", 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
		font-size: 100%;
		background-color:#000;
		-webkit-overflow-scrolling: touch;
	}

	/****** レイアウト・テキスト ******/
	.mainwrap *{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	.sp_bg{
		background-image:url(../image/senspider_bg_pc_sp.png),url(../image/senspider_bg_footer.png);
		background-position:center 70px,center bottom;
		background-attachment:scroll;
		background-repeat:no-repeat;
		background-size:100%,auto;
	}
	.mainwrap{
		width:100%;
		/*padding-top:200px;*/
		display:block;
	}
	.contentwrap{
		padding:0px 20px;
		margin:0 auto;
	}
	.leftborder_wrap{
		background:url(../image/senspider_leftborder_wrap_bg_sp.png);
		background-position:-18px 0;
		background-attachment:scroll;
		background-repeat:no-repeat;
		background-size:140%;
	}
	.keyvisual_wrap{
		margin-bottom:60px;
	}
	.fa-caret-right{
		margin-left:5px;
	}
	/*
	.footerbg{
		background:url(../image/senspider_bg_footer.png);
		background-position:0 bottom;
		background-repeat:no-repeat;
	}
	*/
	.iziModal_wrap{
		padding:20px 0px 20px 0px;
	}
	.bgs{
		background-image:url(../image/senspider_photo_keyvisual.png);
		background-position:center 45px;
		background-repeat:no-repeat;
		height:211px;
		margin-bottom:35px;
		background-size:140%;
	}
	.spec_photo_wrap{
		background-image:url(../image/senspider_photo_senspider_sp.png);
		background-position:center top;
		background-repeat:no-repeat;
		padding-top:180px;

		background-size:100%;
	}

	/****** メニュー設定 ******/
	#top-head,
	.inner {
		width: 100%;
		padding: 0;
	}
	#top-head {
		top: 0;
		position: fixed;
		margin-top: 0;
		height:60px;
		/*background: rgba(0,0,0,0.50);*/
		background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.0) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.00)));
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
		background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
		background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
		background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.00) 100%);
	}
	/* Fixed reset */
	#top-head.fixed {
		padding-top: 0;
		background: transparent;
	}
	#mobile-head {
		width: 100%;
		height: 60px;
		z-index: 999;
		position: relative;
	}
	#top-head.fixed .logo img,
	#top-head .logo img{
		width:100px;
		position: relative;
		left: 0px;
		top: 0px;
	}
	#top-head.fixed .logo,
	#top-head .logo {
		position: absolute;
		left: 20px;
		top: 18px;
	}
	/* ハンバーガーメニュー */
	.hbmenu{
		position: absolute;
		right: 20px;
		top: 20px;
		width: 50px;
		height: 18px;
		z-index: 9999;
	}
	/* ハンバーガーメニュー通常時 */
	.hbmenu_line{
		background: #aa1bb2;
		display: block;
		height: 2px;
		position: absolute;
		transition:transform .3s;
		width: 100%;
	}
	.hbmenu_line_center{
		top: 8px;
	}
	.hbmenu_line_bottom{
		bottom: 0;
	}
	/* ハンバーガーメニュー×印 */
	.hbmenu_line_top.active{
		top: 7px;
		transform: rotate(165deg);
	}
	.hbmenu_line_center.active{
		transform:scaleX(0);
	}
	.hbmenu_line_bottom.active{
		bottom: 9px;
		transform: rotate(15deg);
	}
	/* メニュー部分設定 */
	.gnav{
		/*background: rgba(0,0,0,0.8);*/
		background: rgba(0,0,0,1.0);
		display: none;
		height: 100%;
		position: fixed;
		width: 100%;
		z-index: 9998;
	}
	.gnav_wrap{
		align-items:center;
		display: flex;
		height: 100%;
		justify-content: center;
		position: absolute;
		width: 100%;
	}
	/* メニューテキスト */
	.gnav_wrap ul li{
		display:block;
		margin-bottom:30px;
		text-align:center;
		font-weight:200;
		letter-spacing: 4px;
	}
	.gnav_wrap ul li a{
		color:#aa1bb2;
		font-size:2.0rem;
		text-decoration:none;
	}

	/*****  本体仕様、インターフェース一覧テキストリンク設定  *****/
	.speclinkbox{
		border-color: rgba(255,255,255,0.3);
		border-top-style: solid;
		border-top-width: 1px;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		padding:10px 0px;
		color:#fff;
	}
	.speclinkbox a{
		display:inline-block;
		color:#ccc;
		text-decoration:none;
	}
	.specbg{
		background-image:url(../image/senspider_sectiont_spec.svg);
		background-position:left center;
		background-repeat:no-repeat;
		background-size:auto 15px;
	}


	/*****  フッタ、フッタボタン部分設定  *****/
	.footerbtn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width:100%;
		height: 60px;
		background-color:rgba(40,40,40,1.0);
		color:#ccc;
		text-decoration:none;
		font-family: "游ゴシック",YuGothic !important;
	}
	span {
		color:#ccc;
		text-align:center;
	}
	a.icon_dl{
		background-image:url(../image/footer_link_icon_dl.png);
		background-position:95% center;
		background-repeat:no-repeat;
	}
	a.icon_tab{
		background-image:url(../image/footer_link_icon_tab.png);
		background-position:95% center;
		background-repeat:no-repeat;
	}

	/****** モーダルウィンドウ設定 ******/
	.tabbtn {
		cursor: pointer;
		opacity: 1;
		background:#0d0d0d;
	}

	.tabbtn:not(:last-child) {
		border-color: #000;
		border-right-style: solid;
		border-right-width: 1px;
	}

	.tabbtn.select {
		background:#1a1a1a;
		opacity: 1.0;
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		border-color: #000;
		border-left-style: solid;
		border-left-width: 1px;
	}
	.dis_no {
		display: none;
	}

	/****** スペックテーブル ******/
	div.speccell{
		display:block;
	}
	div.speccell > dl{
		display:block;
	}
	div.speccell > dl dt,
	div.speccell > dl dd{
		display:block;
	}
	.sp_spb_u{
		border-color: rgba(26,26,26,1.0);
		border-bottom-style: solid;
		border-bottom-width: 1px;
		padding:8px 0 8px 0;
	}
	div.speccell > dl dt{
		color:#b333b3;
		padding:8px 0 2px 0;
		font-weight:500;
		font-size:0.9rem;
	}
	div.speccell > dl dd{
		color:#fff;
		padding:0 0 8px 0;
		font-weight:300;
		font-size:0.8rem;
		border-color: rgba(51,51,51,1.0);
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}

}/* SP END*/