.mainTop {
	background:url(../img/top.jpg) center no-repeat;
	background-size: cover;
	min-height:600px;
	position: relative;
	animation: rotation 0.8s ease 0s 1 alternate none running;
}

.mainTopN {
	
	animation: rotation 0.8s ease 0s 1 alternate none running;
}
.commercialTop{
	background:url(../img/commercialTop.jpg) center no-repeat;
	background-size: cover;
	min-height:600px;
	animation: rotation 0.8s ease 0s 1 alternate none running;
}
.marineTop{
	background:url(../img/marineTop.jpg) center no-repeat;
	background-size: cover;
	min-height:600px;
	animation: rotation 0.8s ease 0s 1 alternate none running;
}
.customTop{
	background:url(../img/customTop.jpg) center no-repeat;
	background-size: cover;
	min-height:600px;
	animation: rotation 0.8s ease 0s 1 alternate none running;
}
.aboutTop{
	background:url(../img/aboutTop.jpg) center no-repeat;
	background-size: cover;
	min-height:600px;
	animation: rotation 0.8s ease 0s 1 alternate none running;
}
.recruitTop{
	background:url(../img/recruitTop.jpg) center no-repeat;
	background-size: cover;
	min-height:600px;
	animation: rotation 0.8s ease 0s 1 alternate none running;
}
.historyTop{
	background:url(../img/historyTop.jpg) center no-repeat;
	background-size: cover;
	min-height:600px;
	animation: rotation 0.8s ease 0s 1 alternate none running;
}
@keyframes rotation {
	0% {
		transform: scale(0.9);
		opacity:0.5;
	}
	100% {
		transform: scale(1);
		opacity:1;
	}
}
.rightUp,.rightDown,.leftUp,.leftDown{
	position:absolute;
	font-weight:bold;
	font-size:1.9vh;
	line-height:1.8em;
	}
.rightUp{
	right:1.2em;
	top:10vh;
	color:#FFF;
	text-shadow: 3px 3px 1px #333;
}
.rightDown{
	right:1.2em;
	top:20vh;
	color:#FFF;
	text-shadow: 3px 3px 1px #333;
	position: absolute;
}
.leftUp{
	left:1.2em;
	top:20vh;
	color:#FFF;
	text-shadow: 3px 3px 1px #333;
}
.leftDown{
	left:1.2em;
	top:20vh;
	color:#FFF;
	text-shadow: 3px 3px 1px #333;
}
      body{
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
     }
      .works {
       }
      .works img:hover {
        transform:scale(1.05,1.05);
        transition:1s all;
      }
      .bg-nav{
        background:#354847;
}
      .bg-nav{
	background-color: #06bcfb;
	background-image: linear-gradient(315deg, #06bcfb 0%, #ffffff 74%);
}
      footer{
	background-color: #06bcfb;
	background-image: linear-gradient(315deg, #06bcfb 0%, #4884ee 74%);
}
      navbar-light li{
        color:FBFAF7;
      }
      footer{
        color:#FBFAF7;
      }
.logo {
/* text-align: center;
  width: 65%;
  height: 250px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
*/
   user-select: none;
}

.logo b{
  color: #FFF;
  text-shadow: 0 -4px 100px, 0 0 2px, 0 0 1em #ff4, 0 0 0.5em #ff4, 0 0 0.1em #ff4, 0 1px 3px #000;
	letter-spacing:0.2vw;
}
.logo b span{
  animation: blink linear infinite 2s;
}
.logo b span:nth-of-type(2){
  animation: blink linear infinite 3s;
}
@keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79%{
     color: #333;
  }
  80% {
    
    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #333;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}
p:first-letter{
padding:0 0 0 1em;
}
H2,P{
	width:100%}
.works,
h2{
	opacity: 1;
	transition: 1000ms;
}
.works.is-fadein ,
h2.is-fadein{
	opacity: 1
}
h2{
	animation: SlideInL 1.6s;
	word-break: break-all;
}
.slideR{
	animation: SlideInR 1.6s;
	word-break: break-all;
}
/* CSSアニメーション */
@keyframes SlideInL {
	0% {
		opacity: 0;
		transform: translateX(-64px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes SlideInR {
	0% {
		opacity: 0;
		transform: translateX(64px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
h2.ln17{
	padding:0 0.8em;
	font-size:5.2vw;
}
h3.ln25{
	font-size:3.5vw;
}
	@media (min-height:1px) {
		.rightDown{
			right:0.8em;
					top:30vh;
					color:#333;
		}
					
	}
	@media (min-height:667px) {
		.rightDown{
			right:0.8em;
			top:30vh;
		}
	}
	@media (min-height:932px) {
		.rightDown{
			right:1.2em;
			top:20vh;
		}
	}
	@media (min-width:575px) {
		h2.ln17{
			padding:0;
			font-size:31px;
		}
		h3.ln25{
			font-size:23px;
		}
		.rightDown{
			right:1.0em;
			top:25vh;
		}
	}
	@media (min-width:768px) {
		h2.ln17{
			font-size:42px;
		}
		h3.ln25{
			font-size:31px;
		}
		.rightDown{
			right:1.2em;
			top:25vh;
		}
	}
	@media (min-width:991px) { 
		h2.ln17{
			font-size:56px;
		}
		.rightDown{
			right:1em;
			top:20vh;
		}
	}
	@media (min-width:1200px) { 
		h2.ln17{
			font-size:67px;
		} 
	}
		}
		.asideNum{
			font-size:80%;
			text-decoration:underline;
			color:blue;
		}
		.btnIndex,
		a.btnIndex {
			color: #fff;
			background-color: #06bcfb;
			background-image: linear-gradient(315deg, #06bcfb 0%, #4884ee 74%);
			filter: grayscale(70%);
		}
		.btnIndex:hover,
		a.btnIndex:hover {
			color: #fff;
			background-color: #06bcfb;
			background-image: linear-gradient(315deg, #06bcfb 0%, #4884ee 74%);
			filter: grayscale(0);
		}
#toContact .btn{
	position: fixed;
	top: 65px;
	right: 3px;
	z-index: 999;
	color: #fff;
	background-color: #eb6100;
	background-image: linear-gradient(315deg, #ffb76b 0%, #eb6100 74%);
	animation: fadeOut 2.6s;
	opacity:0.5;
}
#toContact .btn:hover{
	filter: brightness(110%);
	opacity:0.8;
}
.dreamFadeIn{
	animation: fadeIn 2.6s;
}
#ScrollTop {
	position: fixed;
	right: 20px;
	bottom: 0;
	min-width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #eb6100;
	background-image: linear-gradient(315deg, #ffb76b 0%, #eb6100 74%);
	text-decoration: none;
	transition: all 0.65s;
	border-radius:0.25rem;
	z-index:100;
}
#ScrollTop a{
	color: #fff;
	padding:0 1em;
}
/*#ScrollTop.isActive {
	opacity: 1;
	transition: all 0.65s;
}*/
#brandHistory img.saturateOn{
	animation: saturateOn 1.6s;
}
@keyframes saturateOn {
	0% {filter: saturate(0);}
	100% {filter: saturate(100%);}
}
@keyframes fadeOut {
	0% {opacity: 1}
	100% {opacity: 0.5}
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
table.tableFixed{
	font-size: 1rem;
}
/* history Section */
#history {
	padding: 100px 0;
	background: #f6f6f6;
}
.timeline {
	position: relative;
	padding: 0;
	list-style: none;
}
.timeline:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 40px;
	width: 2px;
	margin-left: -1.5px;
	background-color: #c0c0c0;//タイムライン縦線
}
.timeline>li {
	position: relative;
	margin-bottom: 50px;
	min-height: 50px;
}
.timeline>li:before, .timeline>li:after {
	content: " ";
	display: table;
}
.timeline>li:after {
	clear: both;
}
.timeline>li .timeline-panel {
	float: right;
	position: relative;
	width: 100%;
	padding: 0 20px 0 100px;
	text-align: left;
}
.timeline>li .timeline-panel:before {
	right: auto;
	left: -15px;
	border-right-width: 15px;
	border-left-width: 0;
}
.timeline>li .timeline-panel:after {
	right: auto;
	left: -14px;
	border-right-width: 14px;
	border-left-width: 0;
}
.timeline>li .timeline-image {
	z-index: 100;
	position: absolute;
	left: 0;
	width: 70px;
	height: 70px;
	margin-left: 0;
	border: 1px solid #c0c0c0;
	border-radius: 100%;
	text-align: center;
	background: #fff;
}
.timeline>li .timeline-image:after {
  content: '';
	z-index: -1;
	position: absolute;
	left: 2px;
	top: 2px;
	width: 64px;
	height: 64px;
	margin-left: 0;
	border-radius: 100%;
	text-align: center;
	background: #f8f9fa;
	opacity:0.7;
}
.timeline>li .timeline-image h4 {
	margin-top: 20px;
	font-size: 14px;
	text-transform: uppercase;
}
.timeline>li.timeline-inverted>.timeline-panel {
	float: right;
	padding: 0 20px 0 100px;
	text-align: left;
}
.timeline>li.timeline-inverted>.timeline-panel:before {
	right: auto;
	left: -15px;
	border-right-width: 15px;
	border-left-width: 0;
}
.timeline>li.timeline-inverted>.timeline-panel:after {
	right: auto;
	left: -14px;
	border-right-width: 14px;
	border-left-width: 0;
}
.timeline>li:last-child {
	margin-bottom: 40px;
}
.timeline .timeline-heading h4 {
	margin-top: 0;
	text-transform: uppercase;
	font-size: 16px;
}
.timeline .timeline-heading h2 {
	margin-top: 30px;
}
.timeline .timeline-heading h4.subheading {
	text-transform: none;
	color: #001a0f;
	font-size: 20px;
}
.timeline .timeline-body>p, .timeline .timeline-body>ul {
	margin-bottom: 0;
}
/* Media Queries */
@media(min-width:768px) {
.intro {
	height: 100%;
	padding: 0;
	text-align: left;
	color: #fff;
}
.intro H1 {
	font-size: 60px;
	font-weight: 500;
	letter-spacing: -2px;
}
.intro .name {
	font-weight: 600;
}
.intro .intro-text {
	max-width: 75%;
}
.intro .intro-text p {
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	margin-bottom: 40px;
	margin-top: 20px;
}
header .intro-text {
	padding-top: 300px;
	padding-bottom: 200px;
}
.timeline:before {
	left: 50%;
}
.timeline>li {
	margin-bottom: 100px;
	min-height: 100px;
}
.timeline>li .timeline-panel {
	float: left;
	width: 41%;
	padding: 0 20px 20px 30px;
	text-align: right;
}
.timeline>li .timeline-image {
	left: 50%;
	width: 100px;
	height: 100px;
	margin-left: -50px;
}
.timeline>li .timeline-image:after {
	width: 94px;
	height: 94px;
}
.timeline>li .timeline-image h4 {
	margin-top: 16px;
	line-height: 18px;
	font-weight: 400;
}
.timeline>li.timeline-inverted>.timeline-panel {
	float: right;
	padding: 0 30px 20px 20px;
	text-align: left;
}
}

@media(min-width:992px) {
#here-me h1 {
	margin: 10px 0 0px;
}
.timeline>li {
	min-height: 150px;
}
.timeline>li .timeline-panel {
	padding: 0 20px 20px;
}
.timeline>li .timeline-image {
	width: 150px;
	height: 150px;
	margin-left: -75px;
}
.timeline>li .timeline-image:after {
	width: 144px;
	height: 144px;
}
.timeline>li .timeline-image h4 {
	margin-top: 30px;
	font-size: 18px;
	line-height: 26px;
}
.timeline>li.timeline-inverted>.timeline-panel {
	padding: 0 20px 20px;
}
}

@media(min-width:1200px) {
.timeline>li {
	min-height: 170px;
}
.timeline>li .timeline-panel {
	padding: 10px 20px 20px 100px;
}
.timeline>li .timeline-image {
	width: 150px;
	height: 150px;
	margin-left: -75px;
}
.timeline>li .timeline-image h4 {
	margin-top: 40px;
	font-weight: 400;
}
.timeline>li.timeline-inverted>.timeline-panel {
	padding: 10px 100px 20px 20px;
}
}
p:first-letter{
padding-left:1em;
}
.timeline-body p:first-letter{
padding-left:0;
}

//Go TOP
#goTop{
width: 90px;
height: 90px;
position: fixed;
right: 0;
bottom: 0;
opacity: 0.6;
background: #fff;
border-radius: 50%;
z-index: 9999;
}
#goTop a{
position: relative;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
#goTop a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: #001a0f;
position: absolute;
width: 25px;
height: 25px;
top: -40px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
#goTop a::after{
content: 'PAGE TOP';
font-size: 13px;
color: #fff;
position: absolute;
top: 45px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
color: #001a0f;
}
body{
font-family: "Yu Mincho","YuMincho","Hiragino Mincho Pro","MS PMincho",serif;
}
.carousel-inner{
color:#fff;
text-shadow: 
2px2px 1px #333,
-2px2px 1px #333,
2px -2px 1px #333,
-2px -2px 1px #333,
2px0px 1px #333,
0px2px 1px #333,
-2px0px 1px #333,
0px -2px 1px #333; 
}
.is-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
opacity:0.9;
}
P.sectionTitleOpposite{
color:#fff;
}
.sectionTitle,
.sectionTitleOpposite{
font-weight:bold;
}
.row.Masonry-2 {
    column-count: 2;
    column-gap: 0;
}
.row.Masonry-3 {
    column-count: 3;
    column-gap: 0;
}
.Masonry-2 .col-md-6,
.Masonry-3 .col-md-4 {
    float: none;
    width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
@media (max-width: 480px) {
	.row.Masonry-2,
	.row.Masonry-3 {
		column-count: 1;
	}
}
ul.products {
  padding: 0;
}

ul.products li, ol.products li {
  color: #404040;
  border-left: solid 6px #001a0f;/*左側の線*/
  border-bottom: solid 2px #dadada;/*下に灰色線*/
  background: whitesmoke;
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  font-weight: bold;
}
.achievement-box{
	opacity:0;
}
.achievement-box.active{
	opacity:1;
	transition: 2.5s ease-in-out;
}

.editorial {
  display: block;
  width: 100%;
  height: 60px;
  max-height: 60px;
  margin: 0;
  z-index:0;
  bottom:0;
//  position:absolute;
  left:0px;
  float:left;
}

.parallax1 > use {
  animation: move-forever1 20s linear infinite;
  &:nth-child(1) {
    animation-delay: -4s;
  }
}
.parallax2 > use {
  animation: move-forever2 16s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax3 > use {
  animation: move-forever3 12s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.parallax4 > use {
  animation: move-forever4 8s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
@keyframes move-forever3 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever4 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
.timeline>li .timeline-image{
  content: '';
  background: linear-gradient(45deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);

  animation: animatedgradient 6s ease alternate infinite;
  background-size: 300% 300%;
}
						/**/
						textarea.wMax{
							width:100%;
						}
					label#privercyPermitLabel{
							display: flex;
							cursor: pointer;
						}
						input#privercyPermit{
							margin: 0;
							width: 0;
							opacity: 0;
						}
						input#privercyPermit:hover{
							background: rgba(0,0,0,.05) !important;
						}
						
						
.CheckboxInput:hover > .CheckboxInput-DummyInput{
  transform: scale(1.1);
}

input#privercyPermit:focus + .CheckboxInput-DummyInput{
  transform: scale(1.1);
}
input#privercyPermit:checked + .CheckboxInput-DummyInput {
  background: rgba(107, 26, 250, 1);
}
input#privercyPermit:checked + .CheckboxInput-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  height: 4px;
  border-radius: 2px;
  transform: translate(-6px, 5px) rotateZ(-135deg);
  transform-origin: 2px 2px;
  background: #FFFFFF;
}
input#privercyPermit:checked + .CheckboxInput-DummyInput::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 4px;
  border-radius: 2px;
  transform: translate(-6px, 5px) rotateZ(-45deg);
  transform-origin: 2px 2px;
  background: #FFFFFF;
}
.CheckboxInput-DummyInput {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 32px;
  height: 32px;
  border: solid 2px transparent;
  background: rgba(0, 0, 0, .15);
  border-radius: 50%;
  transition: all .15s linear;
}
.CheckboxInput-LabelText {
  margin-left: 12px;
  display: block;
  font-size: 18px;
  font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(25,25,25,.5);
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(25,25,25,.75);
	color:#999;
}