@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');
/* CSS Document */
*{zoom:1;}
body {
	font-family:'Noto Sans JP', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/* font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; */
    background-color:#fff;
	font-size:16px;
	color:#000;
    line-height:1.5em;
    width:100%;
    min-width:960px;
    overflow-y:scroll;
}
body,nav,header,footer,div,p,a,ul,li,section,article,dl,dt,dd,h1,h2,h3,h4,h5,h6,img{
	margin:0;
	padding:0;
	font-weight:normal;
	list-style-type:none;	
	box-sizing:border-box;
	font-size: 1em;
}

body.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

::selection {
    background: #6c7f96;
    color: #fff;
}

/*Firefox*/
::-moz-selection {
    background: #6c7f96;
    color: #fff;
}

.clear{clear:both;}


img{
	width:100%;
    vertical-align: bottom;
    border:0;
}

a{
	text-decoration:none;
	word-wrap: break-word;     /* 旧プロパティ名 */
	overflow-wrap: break-word; /* 新プロパティ名 */
}
a:hover{
}

.br2{display:inline-block;}


ul.notes{margin-left:1em;}
ul.notes li{text-indent:-1em;}
ruby {
        display: inline-table;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        border: none;
        white-space: nowrap;
        text-indent: 0;
        vertical-align: 0.9em;
        text-decoration: inherit;
        text-align: center;
        line-height: 1em;
        }
ruby>rt {
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font: inherit;
    font-size: 50%;
    line-height: 1em;
	text-align: center;
    }

.serif{
	font-size: 1.1em;
	font-family: 'Noto Serif JP',"游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; 
}
/*トップヘ戻る*/
.backTopWrap{
	width:100%;
	height:50px;
	position:absolute;
	top:-50px;
	z-index:900;
}
#backTop{
	width:100px;
	height:100px;
	margin:0 auto;
	background-color:#000;
	transform: rotate(-45deg);
	position:relative;
	cursor:pointer;
	color:#fff;
}
#backTop .txt{
	width:100%;
	transform: rotate(45deg);
	position:absolute;
	top:28px;
	left:12px;
	text-align:center;
}
/*----------------------------------------------------------------
動画
-----------------------------------------------------------------*/
 .movieArea {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin:auto;
	border: solid 1px #2c2c2c;
}

.movieArea iframe,  
.movieArea object,  
.movieArea embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*----------------------------------------------------------------
ローディング
-----------------------------------------------------------------*/
.loading{
    width:100%;
    position:absolute;
    top:50%;
    z-index:999;
	font-family: 'Poppins', sans-serif;
	background-color:#fff;
	font-size: 16px;
}
.loading .load{
	width: 10em;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	position: relative;
}
.loading .load span{
	position: relative;
	z-index: 1;
}
.loading .load:before{
	content: "";
	display: block;
	position: absolute;
	top:0;
	bottom:0;
	width: 100%;
	transform: skewX(25deg);
	background-color: #031c59;
	border-left: #2eeef3 5px solid;
	border-right: #2eeef3 5px solid;
}

.loadBg{
	background-color: #fff;
	position: absolute;
	top:0;
	right: 0;
	border-left: #000 1px solid;
	opacity: 0;
	z-index: 999;
}
/*----------------------------------------------------------------
コンテンツ
-----------------------------------------------------------------*/
	#wrap{
		width: 100%;
		display: block;
		position: relative;

	}
	#contents{
		width: 100%;
		opacity: 0;
		position: relative;
	}
	.mainWrap{
		background-color: #fff;
	}
	.mainWrap.second{
		background-image: url(../img/bg_white_cross.jpg);
	}
	.mainWrap.second .main{
		background-image: url(../img/second/bg.png);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-attachment: fixed;
		padding: 2em 0 8em;
		overflow-x: hidden;
	}
	h1.contentsTitle{
		width: 100%;
		height: 6.25em;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: auto 100%;
		margin-bottom: 0.5em;
		transition: all 500ms 0s ease;
		transform: translateY(30px);
		opacity: 0;

	}
	h1.contentsTitle span{
		opacity: 0;
	}
	
	.main.action h1.contentsTitle{
		 transform: translateY(0px);
		opacity: 1;
	}
	.contentsBox{
		width: 96%;
		max-width: 1300px;
		margin: 0 auto;
	}
	/*二階層目*/
	.baseBox{
		background-color: #212121;
		padding: 1.3em;
		position: relative;
		color: #fff;
		margin-bottom: 2em;
		transition: all 500ms 0.5s ease;
		transform: translateX(30px);
		opacity: 0;

	}
	.main.action .baseBox{
		 transform: translateX(0px);
		opacity: 1;

	}

	.baseBox:before{
		content: "";
		position: absolute;
		display: block;
		top:0.3em;
		left:0.3em;
		right: 0.3em;
		bottom:0.3em;
		border: #31fdff 2px solid;
	}
	.baseBox h2{
		color: #2eeef3;
		text-align: center;
		font-size: 1.8em;
		background-image: url(../img/bg_blue_st_second.png);
		background-position: center;
		background-size: 0.694em auto;
		padding: 0.5em;
		position: relative;
		border-bottom: #2eeef3 1px solid;

		overflow: hidden;

	}
	.baseBox h2:after{
		content: "";
		width: 80%;
		margin-left: -40%;
		top:0;
		bottom:0;
		position: absolute;
		left:50%;
		background-color: #212121;
		display: block;
		transform: skewX(-45deg);
	}
	.baseBox h2 .h2Txt{
		position: relative;
		z-index: 2;
		padding: 0;
		font-weight:700;
	}
	.baseBox h2 .h2Txt.new:before{
		content: "new";
		font-family: 'Fjalla One', sans-serif;
		font-weight: normal;
		color: #FFC83E;
		margin-right: 0.5em;
		position: absolute;
		top:-0.5em;
		left:-0.5em;
		background-color: #000;
		padding: 0.2em 0.5em 0.2em;
	}
	.baseBox .txt{
		position: relative;
		z-index: 2;
	}
	/*製品情報*/
	dl.specTxt{
		font-size: 0.9em;
		line-height: 1.5em;
	}
	dl.specTxt dt{
		width: 7em;
		float: left;
		background-color: #31d2dd;
		padding: 0.3em 0.5em;
		color:#000;
	}
	dl.specTxt dd{
		margin-left: 7.5em;
		margin-bottom: 0.5em;
		color: #fff;
		padding: 0.3em 0;
	}
	
	/*二階層目サブメニュー*/
	.subNavi{
		z-index: 991;
		position: relative;
		text-align: center;
	}
	a.contentsLink{
		width: 19%;
		margin: 0.2em 0.5%;
		display: inline-block;
		vertical-align: top;
		position: relative;
		background-color: #000;
		border: #000 2px solid;
		overflow: hidden;
		padding: 0.5em;
		z-index: 900;
		color: #fff;

	}
	a.contentsLink:after{
		content: "";
		display: block;
		width: 100%;
		margin-left: -50%;
		left:50%;
		top:1px;
		bottom:1px;
		position: absolute;
		background-color: #000;
		z-index: 1;
		transition: all 100ms 0s ease;
		transform: skewX(0);
	}
	a.contentsLink:hover:after,a.contentsLink.selected:after{
		transform: skewX(45deg);
	}	
	a.contentsLink:hover{
		background-color: #666;
		color: #fff;
	}
	a.contentsLink.selected{
		background-color: #1cd8e9;
		color: #1cd8e9;
	}
	a.contentsLink.new .box:before{
	content: "new";
	font-family: 'Fjalla One', sans-serif;
	width:4em;
	top:0;
	left:0;
	line-height: 0;
	display: block;
	text-align:left;
	font-size:0.8em;
	color: #FFC83E;
	position: absolute;
	text-shadow:none;
	background-color: #000;
	z-index: 5;
	}
	a.contentsLink .box{
		text-align: center;
		position: relative;
		z-index: 2;
	}
/*----------------------------------------------------------------
フッター
-----------------------------------------------------------------*/
/*--------------------------------------------------*/
/*footer*/
footer{
	background-color:#000;
	margin:0;
	text-align:center;
	position:relative;
	color: #fff;
	padding-bottom: 50px;
}
footer .footerTxt{
	position:relative;
	z-index:990;
	background-color:#000;

	padding: 0 1em 50px;
}

footer #copy{
	padding: 5px 0 0;
	font-size: 12px;
}
footer #snsArea {
	padding: 15px 0 15px;
	
}
footer #snsArea img{
	width: 40px;
}
footer #linkArea .link{
	display:inline-block;
	vertical-align: middle;
	padding: 0.2em 1em;
	color: #fff;
	margin-top: 1em;
}

.fb_iframe_widget > span {
  vertical-align: baseline !important;
}
/*----------------------------------------------------------------
showAction
-----------------------------------------------------------------*/

.actionObject{
	opacity:0;
}
.showAction{
  animation: 0.5s ease-out 0s 1 normal forwards running;
  animation-name: showAction;
}

@keyframes showAction {
  0% {
    transform: translateY(20px);
	opacity:0;

  }
  100% {
    transform: translateY(0px);
	opacity:1;

  }
}

/*----------------------------------------------------------------
メディアクエリ
-----------------------------------------------------------------*/
@media (max-width: 978px) {
	body{
	font-size: 14px;
	}
	dl.specTxt{
		font-size: 1em;
	}

}

@media (max-width: 786px) {
    body{
	min-width:0; 
	overflow-x:hidden;
	font-size: 2vw;
	}
	.mainWrap.second .main{
	padding: 6em 0 8em;
	background-position: center;
	}
	
}
@media (max-width: 480px) {
    /*トップヘ戻る*/
	.loading{
		font-size: 14px;
	}
    #backTop{display:none;}

    body{
	min-width:0; 
	overflow-x:hidden;
	font-size: 3vw;
	}
	footer #linkArea a{
		width: 49%;
		margin: 2px 0.5%;
	}
	.baseBox h2.small{
	font-size: 1.5em;
	}

}