/* CSS Document */

/* BODY */
body {
	font-family: "Rounded Mplus 1c", "ヒラギノ角ゴ Pro W3",Lucida Grande,Hiragino Kaku Gothic Pro,"メイリオ",Verdana,"ＭＳ Ｐゴシック",sans-serif;
	/*font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo , Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';*/
	margin:0px;
	height: 100%;
}
a { text-decoration:none; }

/* ボタンスタイルリセット*/
button{
 	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	/*padding: 0;*/
	appearance: none;
}

.container {
	content:"";
	display:block;
	clear:both;
}

.desable {
  display: none;
}

/* HEADER */
header {
	display:block;
	position:fixed;
	background-color: #FF7373;
	min-width:100%;
	height:26px;
	padding-right:3px;
	padding-left:3px;
	z-index: 100;
}

.navbar-header {
	float: left;
	width:20%;
}
.navbar-menu {
	float: right;
	width:80%;
	margin-top: 2px;
	text-align: right;
}

/* HEADER LOGO */
header h1 a {
	display:block;
	width: 74px;
	height:20px;
	background: url(../img/nfeed_white_74_20.png) no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	margin-top: 3px;
	margin-left:0px;
}

.list-group {
	margin-bottom: 0;
}

.list-group-item:first-child {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}	

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/*セクション*/
section[class^="sec"] {
	border:solid 0px #111111;
	/*background-color:#ffffff;*/
	max-width:100%;
	margin-top: -20px;
	padding-top:20px;
}
section[class^="sec"] h2{
	border:solid 0px #111111;
	margin-top: 20px;
	margin-bottom: 10px;
	text-align:center;
	display:block;
	margin-left: auto;
	margin-right: auto;
	border-bottom:solid 2px #FF7373;
	font-size: 20px;
	max-width:95%;
	height:28px;
}
div[class*="box"] {
	display: block;
	border:solid 0px #FF7373;
	text-align: center;
	align-content: center;
}



/*事業内容*/
.secBiz li {
	display: inline-block;
	border:solid 1px #FF7373;
	/*background-color: #F9E2E3;*/
	background-color: #ffffff;
	margin: 4px;
	width: 310px;
	height:315px;
	vertical-align: text-top;
	border-radius:0px;
}
.secBiz a { color:#555555; text-decoration:none; }
.secBiz h3 {
	color:#ffffff;
	background-color: #FF7373;
	padding: 3px;
}
.secBiz figure {
	border:solid 0px #FF7373;
	background-color: #FFFFFF;
	width:auto;
	height:200px;
	margin-bottom: 8px;
	overflow: hidden;
}
.secBiz img {
	transition: 0.3s;
}
.secBiz img:hover{
	opacity: 0.6;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
.secBiz p {
	display:inline;
	border:solid 0px #FF7373;
	color:#555555;
}
.secBiz .explanation {
	display:table-cell;
	vertical-align: middle;
	border:solid 0px #FF7373;
	width: 310px;
	height: 70px;
}
.comingsoon {
	opacity: 0.6;
}
//20221001追加
.detail{
	margin-top:80px;
}
.detail li{
	width:90%;
	border:solid 1px #ffffff;
	vertical-align: text-top;
	text-align:left;
	height:auto;
	margin:40px 4px 40px 4px;
}

.detail span{
	font-size:20px;
}


/* お知らせ */
.secInfo li {
	margin-top: 20px;
	margin-bottom: 10px;
	text-align:left;
	display:block;
	margin-left: auto;
	margin-right: auto;
	border:solid 0px #FF7373;
	max-width:90%;
	padding-top:6px;
	padding-bottom:6px;
	ol {
		li {
			list-style-type: decimal;
			display: list-item;
			margin-top: 0px;
			margin-bottom: 0px;
			padding-top:0px;
			padding-bottom:0px;
			color:#555555;
		}
	}
}

.infoCategory {
    display: inline-block;

	border: 1px solid #FF7373;
    border-radius: 3px;
    width: 90px;

	text-align: center;
    vertical-align: middle;
    letter-spacing: -1px;
    color: #FF7373;
    font-size: 12px;
    font-size: .75rem;
    font-weight: 400;
	line-height: 1.6;
	
	margin-right: 5px;
}
.infoDate{
	font-size: 16px;
	color:#555555;
}
.infoTitle{
	display: block;
	font-size: 16px;
	padding: 3px;
	color:#555555;
	border-bottom: 1px solid #FF7373;
}
.infoText{
	display: block;
	font-size: 16px;
	padding: 3px;
	color:#555555;
	text-align: left;
}

/*会社情報*/
.secCompany table {
	display: block;
	max-width: 80%;
	border:solid 0px #FF7373;
	margin-left: auto;
	margin-right: auto;
}
.secCompany th {
	border:solid 0px #FF7373;
	color:#555555;
	vertical-align: middle;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 40px;
	font-size: 18px;
}
.secCompany td {
	border:solid 0px #FF7373;
	color:#555555;
	vertical-align: middle;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 18px;
}

/*お問い合わせ*/
.Contactbox {
	height: 250px;
}
.Contactbox li {
	margin-top: 20px;
	margin-bottom: 10px;
	text-align:center;
	display:block;
	margin-left: auto;
	margin-right: auto;
	border:solid 1px #FF7373;
	max-width:90%;
	padding-top:6px;
	padding-bottom:6px;
}
.Contactbox li:hover{
	background-color:#FF7373;
}
.Contactbox li a {
	display:block;
	padding:15px;
	color:#000000;
	font-size:18px;
	text-decoration: none;
}
.Contactbox li a:hover{
	color:#FFFFFF;
}

/*プロダクト*/
.Prod {
	border:solid 0px #111111;
	/*background-color:#ffffff;*/
	max-width:100%;
	padding-top:20px;
	padding-bottom:30px;
}
.Prod h2{
	border:solid 0px #111111;
	margin-top: 20px;
	margin-bottom: 10px;
	text-align:center;
	display:block;
	margin-left: auto;
	margin-right: auto;
	border-bottom:solid 2px #FF7373;
	font-size: 20px;
	max-width:90%;
	height:28px;
}
.Prodbox {
	height: 80%;
}
.Prodbox li {
	margin-top: 20px;
	margin-bottom: 10px;
	text-align:center;
	display:block;
	margin-left: auto;
	margin-right: auto;
	border:solid 1px #FF7373;
	max-width:95%;
	padding-top:6px;
	padding-bottom:6px;
}
.Prodbox li:hover{
	background-color:#FF7373;
}
.Prodbox li a {
	display:block;
	padding:15px;
	color:#555555;
	font-size:18px;
	text-decoration: none;
}
.Prodbox li a:hover{
	color:#FFFFFF;
}
.Prod_img {
	max-width: 97%;
	height:auto;
	vertical-align: bottom;
}

.paddingTop40{
	padding-top: 40px;
}

.paddingBottom40{
	padding-bottom: 40px;
}

.tR {
	text-align:right
}

@media screen and (min-width:751px){
	.js-offcanvas-btn {display:none}

	/* nav */
	.menu ul {
		list-style-type: none;
		margin-top:0;
		margin-bottom:0;
		padding-left:0;
		font-size:0
	}
	.menu li {
		display:inline;
		font-size:12px;
		border-right:solid 1px #ffffff;
		padding-left:10px;
		padding-right:10px
	}
	.menu li:first-child {
		border-left:solid 1px #ffffff
	}
	.menu {
		display:block ;
		width:100%;
		margin-left:auto;
		margin-right:auto;
		text-align:right;
		margin-top:4px;
	}
	.menu a { color:#ffffff;text-decoration:none; }

} 

@media screen and (max-width:750px){
	#menu ul {
		position:fixed;
	}
	
	.menu ul {
		margin:0;
		padding:0;
		width:100%;
		text-align:left;
		margin-left:auto;
	}
	.menu li {
		background-color: #F9E2E3;
		border:solid 1px #ffffff;
	}
	
	.menu li a {
		display:block;
		padding:15px;
		color:#000000;
		font-size:18px;
		text-decoration: none;
	}
	.menu li a:hover{background-color:#FF7373;}

	.js-hiraku-offcanvas {
		display: block;
		position: static;
		background: none;
	}

	.js-hiraku-offcanvas .js-hiraku-offcanvas-sidebar {
		position: static;
		margin-right: 0;
		width:auto;
  	}

	/*事業内容*/
	.secBiz li {
		width:90%;
		height:100px;
	}
	.secBiz figure {
		display: none;
	}
.detail li{
	width:90%;
	border:solid 1px #ffffff;
	vertical-align: text-top;
	text-align:left;
	height:auto;
	margin:40px 4px 40px 4px;
}

.detail span{
	font-size:16px;
}

	/* お知らせ */
	.infoDate{
		font-size: 12px;
	}
	.infoTitle{
		font-size: 12px;
	}
	.infoText{
		font-size: 12px;
	}

	/*会社情報*/
	.secCompany table {
		max-width: 90%;
	}
	.secCompany th {
		width: 25%;
		padding-top: 7px;
		padding-bottom: 7px;
		padding-right: 0px;
		font-size: 13px;
	}
	.secCompany td {
		padding-top: 7px;
		padding-bottom: 7px;
		font-size: 13px;
	}

	/*お問い合わせ*/
	.Prodbox li a {
		font-size:14px;
	}

	/*プロダクト*/
	.Contactbox li a {
		font-size:14px;
	}
}

.cover_img {
	max-width: 100%;
	height:auto;
	vertical-align: bottom;
	margin-top: 26px;
	/* 動画用 */
	//position: relative;
	width: 2048px;
	aspect-ratio: 512 / 175;
	padding: 0px;
	border: 0px;
}


footer {
	display:table;
	position:fixed;
	bottom: 0px;
	background-color: #FF7373;
	width:100%;
	height:16px;
}
footer .cp {
	display:table-cell;
    color: #ffffff;
	text-align:center;
	vertical-align: middle;
	font-size: 10px;
	line-height: 1.0em; 
}


#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
 
#pageTop a {
	display: block;
	padding: 8px 0 0 8px;
	border-radius: 30px;
	width: 25px;
	height: 25px;
	background-color: #FF7373;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
 
#pageTop a:hover {
	text-decoration: none;
	opacity: 0.7;
}
.arrow4 {
    position: relative;
    display: inline-block;
}
.arrow4:after {
    content: '';
    width: 12px;
    height: 12px;
    border: 0px;
    border-left: solid 3px #fff;
    border-top: solid 3px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 45%;
    left: 9px;
    margin-top: -3px;
}

/* VIDEO */
video {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin-top: 26px;
  transform: translate(0,-19.49%);
  object-fit:cover;
}

.video-container:after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(black, .2);
  z-index: 1;
}

.desable {
  display: none;
}
.callout {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  text-align: center;
  position: relative;
  z-index: 10;
  color: #FFFFFF;
  font-size: 3vw;
}
.callout h1 span {
  text-transform: uppercase;
  font-weight: 900;
  margin: 0 0 1rem;
  padding: 0;
  line-height: 1;
  font-family: Futura, Helvetica, sans-serif;
  font-size: 6vw;
}

.callout span {
  color: transparent;
  animation: blur 10s ease-out;
  -webkit-animation: blur 10s ease-out;
  //animation: blur 10s ease-out infinite;
  //-webkit-animation: blur 10s ease-out infinite;
}

.callout span:nth-child(1) {
  animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
}
.callout span:nth-child(2) {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}

@keyframes blur {
  0%    {text-shadow:  0 0 100px #fff; opacity:0;}
  5%    {text-shadow:  0 0 90px #fff;}
  15%   {opacity: 1;}
  20%   {text-shadow:  0 0 0px #fff;}
  80%   {text-shadow:  0 0 0px #fff;}
  85%   {opacity: 1;}
  95%   {text-shadow:  0 0 90px #fff;}
  100%  {text-shadow:  0 0 100px #fff; opacity:0;}
}

@-webkit-keyframes blur {
  0%    {text-shadow:  0 0 100px #fff; opacity:0;}
  5%    {text-shadow:  0 0 90px #fff;}
  15%   {opacity: 1;}
  20%   {text-shadow:  0 0 0px #fff;}
  80%   {text-shadow:  0 0 0px #fff;}
  85%   {opacity: 1;}
  95%   {text-shadow:  0 0 90px #fff;}
  100%  {text-shadow:  0 0 100px #fff; opacity:0;}
}