@charset "utf-8";

.features .feature-menu a,
.features .feature-menu a:hover,
.scene .scene-menu a,
.scene .scene-menu a:hover {
  box-shadow: 0 -3px #b40200 inset; 
}

.content{
  max-width: 1000px;
}
.content section[class] a{ color: #37a5c7;}
.content section[class] a:hover{ text-decoration: underline;}

@media screen and (min-width: 769px) {
    .localnavi{ position: relative; overflow:inherit; }
    .localnavi .second{
    position: absolute;
    overflow: hidden;
    max-height: 0;
    top: 70px;
    background: #fff;
    opacity: 0;
    z-index: 999;
    transition: .3s;
   max-width: 400px;
  }
  .localnavi .active .second { 
    opacity: 1 !important;
    max-height: 9999px !important;
    padding:22px 30px;
}
  .localnavi .second li a{
    text-align: left;
    height: auto;
    display: block;
    padding: 8px 0 8px 15px;
    position: relative;
    box-shadow: none;
  }
  .localnavi .second li a::before{
    content: "";
    display: block;
    position: absolute;
    left: 0; top: 0; bottom: 0;
    margin: auto;
    width: 7px; height: 2px;
    background: #b40100;
  }
  .localnavi .second li a:hover{
    box-shadow: none;
    color: #b40100;
  }
  .localnavi .col-list{ display:flex; flex-wrap: wrap;}
  .localnavi .col-list li{ width: 50%;}
  .close{ opacity: 0 !important; max-height: 0 !important;}  
  
  
	.content section[class] {
		margin-bottom:80px;
	}
	.content section[class] h2 {
		font-size: 2.4rem;
		line-height: 1.27;
		color: #003264;
		letter-spacing: 0.075em;
		margin-bottom: 15px;
    font-weight: bold;
	}
	.content section[class] p + h2 {
		margin-top: 40px;
	}
	.content ul.nml {
		font-size: 1.7rem;
		line-height: 1.65;
		color: #000;
		list-style: disc;
		margin-left: 25px;
	}
	.content h1 {
		font-size: 3.6rem;
		line-height: 1.2;
		color: #1b1b1b;
		text-indent: -33px;
		margin: 0 0 65px 33px;
	}
	.content h1::before {
		content: "";
		background: #39a9cd;
		background: repeating-linear-gradient(#39a9cd, #39a9cd 2px, #fff 0, #fff 4px);
		vertical-align: middle;
		display: inline-block;
		width: 20px;
		height: 18px;
		margin-right: 13px;
	}
	#start {
		text-align: center;
		padding: 60px 0 80px;
		position: relative;
	}
	#start::before {
		content: "";
		background: #eef7fa;
		display: block;
		width: 100vw;
		height: 100%;
		position: absolute;
		left: calc(50% - 50vw);
		top: 0;
	}
	#start h2 {
		font-size: 3rem;
		margin-bottom: 50px;
		position: relative;
	}
	#start ul {
		display: table;
		width: 100%;
		max-width: 1135px;
		margin: auto;
		position: relative;
	}
	#start ul li {
		display: table-cell;
		width: 20%;
		padding: 0 7px;
	}
	#start ul li a {
		background: #fff;
		display: block;
	}
	#start ul li a span {
		font-size: 1.5rem;
		display: block;
		padding: 17px 5px;
	}
	#contact {
		text-align: center;
		padding: 75px 0 0;
	}
	#contact h2 {
		font-size: 3.2rem;
		margin-bottom: 50px;
	}
	#contact p {
		font-size: 2.2rem;
		line-height: 1.5;
		margin-bottom: 20px;
	}
	#contact p a {
		line-height: 1;
		color: #fff;
		background: #008cd6;
		display: block;
		width: 554px;
		padding: 16px 0;
		margin: auto;
		border-radius: 27px;
	}
	#contact dl {
		display: table;
		margin: 30px auto 0;
	}
	#contact dl dt,
	#contact dl dd {
		color: #3a3a3a;
		vertical-align: middle;
		display: table-cell;
	}
	#contact dl dt {
		font-size: 1.8rem;
		padding-right: 40px;
	}
	#contact dl dd {
		font-size: 1.1rem;
		text-align: left;
	}
	#contact dl dd i {
		font-size: 2.5rem;
		line-height: 32px;
		color: #008cd6;
		background: url(/product/motionboard/features/img/icon_tel.png) no-repeat;
		display: block;
		margin-bottom: 8px;
		padding-left: 45px;
	}
	#case ul li a,
	#feat2-4 ul li a,
	#start ul li a,
	#contact p a {
		transition: all 0.3s;
	}
	#feat2-4 ul li a:hover,
	#start ul li a:hover,
	#contact p a:hover {
		opacity: 0.7;
	}
}



@media screen and (max-width: 768px) {
	.content section[class] {
		padding: 0 10px;
		margin: 35px 0;
	}
	.content section[class] h2 {
		font-size: 1.6rem;
		line-height: 1.27;
		font-weight: bold;
		color: #1b1b1b;
		margin-bottom: 15px;
		padding-bottom: 15px;
		position: relative;
	}
	.content section[class] h2::after {
		content: "";
		background: #0890da;
		display: block;
		width: 40px;
		height: 3px;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.content section[class] h2 br {
		display: none;
	}
	.content section[class] p + h2 {
		margin-top: 35px;
	}
	.content ul.nml {
		font-size: 1.4rem;
		line-height: 1.42;
		color: #000;
		list-style: disc;
		margin-left: 20px;
	}
	.content h1 {
		font-size: 1.9rem;
		line-height: 1.2;
		font-weight: bold;
		color: #000;
		margin: 35px 5px 25px;
	}
	#start {
		background: #eef7fa;
		text-align: center;
		padding: 30px 0;
		margin: 0 -10px;
	}
	#start h2 {
		font-size: 1.8rem;
		font-weight: bold;
		margin-bottom: 30px;
	}
	#start .slider .slick-slide {
		margin: 0 5px;
	}
	#start ul li a {
		background: #fff;
		display: block;
	}
	#start ul li a span {
		font-size: 1.5rem;
		display: block;
		padding: 12px 5px;
	}
	#contact {
		margin: 35px 10px 0;
		padding-top: 25px;
		border-top: solid 3px #aa0201;
	}
	#contact h2 {
		font-size: 1.6rem;
		font-weight: bold;
		margin-bottom: 25px;
	}
	#contact p:first-of-type,
	#contact dl {
		display: none;
	}
	#contact p a {
		font-size: 1.6rem;
		font-weight: bold;
		color: #fff;
		background: #b40200;
		text-align: center;
		padding: 30px 0;
		display: block;
	}
	#contact p a::after {
		content: "";
		background: url(/common/img/arrow_white.png) center center / cover no-repeat;
		display: inline-block;
		width: 6px;
		height: 10px;
		margin-left: 15px;
	}
}
@charset "utf-8";

.features .feature-menu a,
.features .feature-menu a:hover,
.scene .scene-menu a,
.scene .scene-menu a:hover {
  box-shadow: 0 -3px #b40200 inset; 
}

.content{
  max-width: 1000px;
}
.content section[class] a{ color: #37a5c7;}
.content section[class] a:hover{ text-decoration: underline;}

@media screen and (min-width: 769px) {
    .localnavi{ position: relative; overflow:inherit; }
    .localnavi .second{
    position: absolute;
    overflow: hidden;
    max-height: 0;
    top: 70px;
    background: #fff;
    opacity: 0;
    z-index: 999;
    transition: .3s;
   max-width: 400px;
  }
  .localnavi .active .second { 
    opacity: 1 !important;
    max-height: 9999px !important;
    padding:22px 30px;
}
  .localnavi .second li a{
    text-align: left;
    height: auto;
    display: block;
    padding: 8px 0 8px 15px;
    position: relative;
    box-shadow: none;
  }
  .localnavi .second li a::before{
    content: "";
    display: block;
    position: absolute;
    left: 0; top: 0; bottom: 0;
    margin: auto;
    width: 7px; height: 2px;
    background: #b40100;
  }
  .localnavi .second li a:hover{
    box-shadow: none;
    color: #b40100;
  }
  .localnavi .col-list{ display:flex; flex-wrap: wrap;}
  .localnavi .col-list li{ width: 50%;}
  .close{ opacity: 0 !important; max-height: 0 !important;}  
  
  
	.content section[class] {
		margin-bottom:80px;
	}
	.content section[class] h2 {
		font-size: 2.4rem;
		line-height: 1.27;
		color: #003264;
		letter-spacing: 0.075em;
		margin-bottom: 15px;
    font-weight: bold;
	}
	.content section[class] p + h2 {
		margin-top: 40px;
	}
	.content ul.nml {
		font-size: 1.7rem;
		line-height: 1.65;
		color: #000;
		list-style: disc;
		margin-left: 25px;
	}
	.content h1 {
		font-size: 3.6rem;
		line-height: 1.2;
		color: #1b1b1b;
		text-indent: -33px;
		margin: 0 0 65px 33px;
	}
	.content h1::before {
		content: "";
		background: #39a9cd;
		background: repeating-linear-gradient(#39a9cd, #39a9cd 2px, #fff 0, #fff 4px);
		vertical-align: middle;
		display: inline-block;
		width: 20px;
		height: 18px;
		margin-right: 13px;
	}
	#start {
		text-align: center;
		padding: 60px 0 80px;
		position: relative;
	}
	#start::before {
		content: "";
		background: #eef7fa;
		display: block;
		width: 100vw;
		height: 100%;
		position: absolute;
		left: calc(50% - 50vw);
		top: 0;
	}
	#start h2 {
		font-size: 3rem;
		margin-bottom: 50px;
		position: relative;
	}
	#start ul {
		display: table;
		width: 100%;
		max-width: 1135px;
		margin: auto;
		position: relative;
	}
	#start ul li {
		display: table-cell;
		width: 20%;
		padding: 0 7px;
	}
	#start ul li a {
		background: #fff;
		display: block;
	}
	#start ul li a span {
		font-size: 1.5rem;
		display: block;
		padding: 17px 5px;
	}
	#contact {
		text-align: center;
		padding: 75px 0 0;
	}
	#contact h2 {
		font-size: 3.2rem;
		margin-bottom: 50px;
	}
	#contact p {
		font-size: 2.2rem;
		line-height: 1.5;
		margin-bottom: 20px;
	}
	#contact p a {
		line-height: 1;
		color: #fff;
		background: #008cd6;
		display: block;
		width: 554px;
		padding: 16px 0;
		margin: auto;
		border-radius: 27px;
	}
	#contact dl {
		display: table;
		margin: 30px auto 0;
	}
	#contact dl dt,
	#contact dl dd {
		color: #3a3a3a;
		vertical-align: middle;
		display: table-cell;
	}
	#contact dl dt {
		font-size: 1.8rem;
		padding-right: 40px;
	}
	#contact dl dd {
		font-size: 1.1rem;
		text-align: left;
	}
	#contact dl dd i {
		font-size: 2.5rem;
		line-height: 32px;
		color: #008cd6;
		background: url(/product/motionboard/features/img/icon_tel.png) no-repeat;
		display: block;
		margin-bottom: 8px;
		padding-left: 45px;
	}
	#case ul li a,
	#feat2-4 ul li a,
	#start ul li a,
	#contact p a {
		transition: all 0.3s;
	}
	#feat2-4 ul li a:hover,
	#start ul li a:hover,
	#contact p a:hover {
		opacity: 0.7;
	}
}



@media screen and (max-width: 768px) {
	.content section[class] {
		padding: 0 10px;
		margin: 35px 0;
	}
	.content section[class] h2 {
		font-size: 1.6rem;
		line-height: 1.27;
		font-weight: bold;
		color: #1b1b1b;
		margin-bottom: 15px;
		padding-bottom: 15px;
		position: relative;
	}
	.content section[class] h2::after {
		content: "";
		background: #0890da;
		display: block;
		width: 40px;
		height: 3px;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.content section[class] h2 br {
		display: none;
	}
	.content section[class] p + h2 {
		margin-top: 35px;
	}
	.content ul.nml {
		font-size: 1.4rem;
		line-height: 1.42;
		color: #000;
		list-style: disc;
		margin-left: 20px;
	}
	.content h1 {
		font-size: 1.9rem;
		line-height: 1.2;
		font-weight: bold;
		color: #000;
		margin: 35px 5px 25px;
	}
	#start {
		background: #eef7fa;
		text-align: center;
		padding: 30px 0;
		margin: 0 -10px;
	}
	#start h2 {
		font-size: 1.8rem;
		font-weight: bold;
		margin-bottom: 30px;
	}
	#start .slider .slick-slide {
		margin: 0 5px;
	}
	#start ul li a {
		background: #fff;
		display: block;
	}
	#start ul li a span {
		font-size: 1.5rem;
		display: block;
		padding: 12px 5px;
	}
	#contact {
		margin: 35px 10px 0;
		padding-top: 25px;
		border-top: solid 3px #aa0201;
	}
	#contact h2 {
		font-size: 1.6rem;
		font-weight: bold;
		margin-bottom: 25px;
	}
	#contact p:first-of-type,
	#contact dl {
		display: none;
	}
	#contact p a {
		font-size: 1.6rem;
		font-weight: bold;
		color: #fff;
		background: #b40200;
		text-align: center;
		padding: 30px 0;
		display: block;
	}
	#contact p a::after {
		content: "";
		background: url(/common/img/arrow_white.png) center center / cover no-repeat;
		display: inline-block;
		width: 6px;
		height: 10px;
		margin-left: 15px;
	}
}