@charset "UTF-8";

/* ===================================
	File Name   : top.css
	Description : Outline Page CSS
	Editor      : Bface Chiba
	Last Editor : Bface Chiba
	
	Update Description :
	[2023/01/10] 新規制作
====================================== */

/*========== Style Contents ==========

	1. Redefinition
  2. Index Page
  3. Section [structure]
  4. Section [ol_outline]
  5. Section [ol_target]
  6. Section [section_structture]

====================================== */



/*===== 1. Redefinition =====*/
sub {
  font-size: 0.7em;
  vertical-align: text-bottom;
}


/*===== 2. Index Page =====*/
#ol_structure{
 margin-top: 7rem;
}
#ol_structure > div{
  padding: 4rem 4rem;
  background: #efefef;
}
#ol_structure .category_wrapper:not(:last-child){
  border-bottom: dotted #666 0.1rem;
  margin-bottom: 4rem;
  padding-bottom: 3rem;
}
#ol_structure .st_category{
  padding: 0rem 0 0rem 1rem ;
  color: #191d69;
  font-weight: bold;
  font-size: 2rem;
  border-left: 0.5rem #191d69 solid;
  margin-bottom: 1rem;
}
#ol_structure ul + .st_category{
  margin-top: 1rem;
}
#ol_structure ul{
  padding: 0 ;
}
#ol_structure li{
	position: relative;
	background: #fff;
	margin: 0 0 1.5rem;
	box-shadow: 0.5rem 0.5rem rgba(25,29,109,0.3);
	z-index: 1
}
#ol_structure li a{
  position: relative;
  display: block;
  padding: 1.5rem;
  height: 100%;
  border: solid #6064b2 0.1rem;
}
#ol_structure li a.soon{opacity: 1;}
#ol_structure li a.soon::before,
#ol_structure li a.soon::after{
  display: none;
}
#ol_structure li a.soon > b{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: bold;
	background: rgba(255, 255, 255, 0.8);
	border: solid #999 0.2rem;
	color: #666;
	padding: 0.5rem 1rem;
	font-size: 3rem;
}
#ol_structure li a::before {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  content: '';
  width: 0.8rem;
  height: 0.8rem;
  border-top: solid 0.1rem #fff;
  border-right: solid 0.1rem #fff;
  transform: rotate(45deg);
  z-index: 2;
}
#ol_structure li a::after{
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  z-index: 1;
  width: 3.5rem;
  height: 3.5rem;
  content: "";
  background: linear-gradient(to bottom right, rgba(25,29,105,0) 50%, rgba(25,29,105,1) 50.01%) no-repeat top left / 100% 100%;
}
#ol_structure li span{
	position: absolute;
	top:0.5rem;
	right: 0.5rem;
	height: 4.5rem;
	width: 4.5rem;
	border-radius: 50%;
	font-weight: bold;
	color: #fff;
	background: #ffae00;
	box-shadow: 0 0.2rem #d79303;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#ol_structure li a > picture{
  display: block;
  padding-right: 4rem;
}
#ol_structure li a:hover {opacity: .6;}
#ol_structure li a img{
  opacity: 1;
  vertical-align: bottom;
}
#ol_structure li a > p:last-of-type{
  margin-top: 1rem;
	padding-top: 1rem;
	color: #333;
	font-size: 1.4rem;
	line-height: 1.4;
}

/*#ol_structure ul li:first-of-type a > p:first-of-type{border-left: #008cd6 0.5rem solid; color: #c8161d;}*/
#ol_structure  .category_wrapper:nth-of-type(1) ul li:first-of-type a > p:last-of-type{border-top: #c8161d 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(1) ul li:nth-of-type(2) a > p:last-of-type{border-top: #7a7878 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(1) ul li:nth-of-type(3) a > p:last-of-type{border-top: #008cd6 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(1) ul li:nth-of-type(4) a > p:last-of-type{border-top: #ed6c00 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(1) ul li:nth-of-type(5) a > p:last-of-type{border-top: #e7280e 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(2) ul li:nth-of-type(1) a > p:last-of-type{border-top: #07913a 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(2) ul li:nth-of-type(2) a > p:last-of-type{border-top: #e95098 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(3) ul li:nth-of-type(1) a > p:last-of-type{border-top: #c88d37 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(3) ul li:nth-of-type(2) a > p:last-of-type{border-top: #c88d37 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(4) ul li:nth-of-type(1) a > p:last-of-type{border-top: #a64a97 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(4) ul li:nth-of-type(2) a > p:last-of-type{border-top: #f39800 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(4) ul li:nth-of-type(3) a > p:last-of-type{border-top: #e8340c 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(4) ul li:nth-of-type(4) a > p:last-of-type{border-top: #5b78ae 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(4) ul li:nth-of-type(5) a > p:last-of-type{border-top: #dca54c 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(4) ul li:nth-of-type(6) a > p:last-of-type{border-top: #76a32d 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(4) ul li:nth-of-type(7) a > p:last-of-type{border-top: #0080a3 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(4) ul li:nth-of-type(8) a > p:last-of-type{border-top: #009e53 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(4) ul li:nth-of-type(9) a > p:last-of-type{border-top: #50206e 0.1rem solid;}
#ol_structure  .category_wrapper:nth-of-type(4) ul li:nth-of-type(10) a > p:last-of-type{border-top: #3f7967 0.1rem solid;}


@media (max-width: 1024px) {
  #ol_structure li span{
    height: 3.5rem;
    width: 3.5rem;
  }
}

@media (max-width: 768px) {
  #ol_structure	 .box_wrapper .tf_about{
    padding: 2rem 1.5rem;
  }
  #ol_structure .box_wrapper p{
    font-size: 1.6rem;
  }
  #ol_structure > div{
    padding: 2rem 1.5rem;
  }
  #ol_structure .category_wrapper:not(:last-child){
    margin-bottom: 3rem;
    padding-bottom: 2rem;
  }
  #ol_structure .st_category{
    font-size: 1.6rem;
  }
  #ol_structure ul{
    padding: 0;
  }
  #ol_structure li{
    margin: 0 0 1rem;
    box-shadow: 0.2rem 0.2rem rgba(25, 29, 109, 0.3);
  }
  #ol_structure li a{
    padding: 1rem;
  }
  #ol_structure li a > picture{
    display: flex;
    padding-right: 2rem;
  }
  #ol_structure li span {
    height: 3rem;
    width: 3rem;
  }
  #ol_structure li a > p:first-of-type{
    font-size: 1.6rem;
  }
  #ol_structure li a > p:last-of-type{
    font-size: 1.4rem;
    line-height: 1.4;
  }
	#ol_structure li a.soon > b{
		font-size: 2rem;
	}
}

/*===== 3. Section [structure]  =====*/
.structure .structure_title {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 35.0rem;
}
.structure .structure_title::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  height: 100%;
  clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);
  background: url(../img/outline/img-main_motor.jpg) center center / cover no-repeat;
  content: "";
  z-index: 0;
}

.structure#st_motion .structure_title::before{ background: url(../img/outline/img-main_motion.jpg) center center / cover no-repeat;}
.structure#st_mechatronics .structure_title::before{ background: url(../img/outline/img-main_mechatronics.jpg) center center / cover no-repeat;}
.structure#st_design .structure_title::before{ background: url(../img/outline/img-main_design.jpg) center center / cover no-repeat;}
.structure#st_power .structure_title::before{ background: url(../img/outline/img-main_power.jpg) center center / cover no-repeat;}
.structure#st_processing .structure_title::before{ background: url(../img/outline/img-main_processing.jpg) center center / cover no-repeat;}
.structure#st_electronics .structure_title::before{ background: url(../img/outline/img-main_electronics.jpg) center center / cover no-repeat;}
.structure#st_battery .structure_title::before{ background: url("../img/outline/img-main_battery.jpg") center center / cover no-repeat;}
.structure#st_emc .structure_title::before{ background: url(../img/outline/img-main_emc.jpg) center center / cover no-repeat;}
.structure#st_thermal .structure_title::before{ background: url(../img/outline/img-main_thermal.jpg) center center / cover no-repeat;}
.structure#st_connect .structure_title::before{ background: url(../img/outline/img-main_connect.jpg) center center / cover no-repeat;}
.structure#st_visualization .structure_title::before{ background: url(../img/outline/img-main_visualization.jpg) bottom center / cover no-repeat;}
.structure#st_dx .structure_title::before{ background: url(../img/outline/img-main_dx.jpg) center center / cover no-repeat;}
.structure#st_robot .structure_title::before{ background: url(../img/outline/img-main_robot.jpg) center center / cover no-repeat;}
.structure#st_ai .structure_title::before{ background: url(../img/outline/img-main_ai.jpg) center center / cover no-repeat;}
.structure#st_data .structure_title::before{ background: url(../img/outline/img-main_data.jpg) center center / cover no-repeat;}
.structure#st_omen .structure_title::before{ background: url(../img/outline/img-main_omen.jpg) center center / cover no-repeat;}
.structure#st_sdv .structure_title::before{ background: url(../img/outline/img-main_sdv.jpg) bottom center / cover no-repeat;}
.structure#st_ot .structure_title::before{ background: url(../img/outline/img-main_ot.jpg) bottom center / cover no-repeat;}
.structure#st_private .structure_title::before{ background: url(../img/outline/img-main_private.jpg) bottom center / cover no-repeat;}

.structure .structure_title > p{
  background: #fff;
  z-index: 5;
  font-weight: bold;
}
.structure .structure_title > p:first-of-type{
  align-self: flex-start;
  margin-bottom: 6rem;
  padding: 1rem;
}
.structure .structure_title > p:first-of-type > span{
  font-size: 5.0rem;
  color: #555;
  opacity: 0.15;
  line-height: 0.8;
}
.structure .structure_title > p:first-of-type > span span{
  font-size: 4.0rem;
}
.structure .structure_title > p:last-of-type{
  align-self: flex-end;
  max-width: 80%;
  padding: 1rem 1rem 0;
}
.structure .structure_title > p:last-of-type > span{
  font-size: 6.0rem;
  color: #c8161d;
  opacity: 0.15;
  line-height: 0.8;
}
.structure#st_motion .structure_title > p:last-of-type > span{ color: #008cd6;}
.structure#st_mechatronics .structure_title > p:last-of-type > span{ color: #666464;}
.structure#st_design .structure_title > p:last-of-type > span{ color: #c68b38;}
.structure#st_power .structure_title > p:last-of-type > span{ color: #ec7c1e;}
.structure#st_processing .structure_title > p:last-of-type > span{ color: #c68b38;}
.structure#st_electronics .structure_title > p:last-of-type > span{ color: #e75440;}
.structure#st_battery .structure_title > p:last-of-type > span{ color: #6fb92c;}
.structure#st_emc .structure_title > p:last-of-type > span{ color: #00913a;}
.structure#st_thermal .structure_title > p:last-of-type > span{ color: #e75297;}
.structure#st_connect .structure_title > p:last-of-type > span{ color:#e7380d;;}
.structure#st_visualization .structure_title > p:last-of-type > span{ color: #5d77ac;}
.structure#st_dx .structure_title > p:last-of-type > span{ color: #dba44c;}
.structure#st_robot .structure_title > p:last-of-type > span{ color: #0080a3;}
.structure#st_ai .structure_title > p:last-of-type > span{ color: #f39800;}
.structure#st_data .structure_title > p:last-of-type > span{ color: #a64a97;}
.structure#st_omen .structure_title > p:last-of-type > span{ color: #76a32d;}
.structure#st_sdv .structure_title > p:last-of-type > span{ color: #009e53;}
.structure#st_ot .structure_title > p:last-of-type > span{ color: #50206e;}
.structure#st_private .structure_title > p:last-of-type > span{ color: #3f7967;}

.structure .structure_title h1{
  align-self: flex-start;
  position: relative;
  z-index: 1;
  max-width: 90%;
  margin-bottom: 6rem;
}
.structure .structure_title h1 span{
  display: block;
  padding: 3.0rem 5rem;
  background: #fff;
  border-right: 0.1rem solid #191d69;
  border-bottom: 0.1rem solid #191d69;
}
.structure .structure_title h1 span::before{
  position: absolute;
  content:"";
  left: 0rem;
  bottom: -1rem;
  background: rgba(25, 29, 105, .3);
  width: calc(100% + 1rem);
  height: 100%;
  z-index: -1;
}
.structure .structure_title h1 img{
  height: 3.5rem;
}
.structure .ol_about{
  margin-top: 3rem;
  padding: 0 0 3rem;
  position: relative;
}
.structure .ol_about::after{
  position: absolute;
  content: "";
  height: 0.1rem;
  left: 9rem;
  bottom: 0;
  right: 0;
  background: #191d69;
}
.structure .ol_about h2 {
  position: relative;
   margin: 0 0 2rem 4rem;
  font-weight: bold;
  color: #191d69;
  font-size: 2.6rem;
  display: flex;
  align-items: baseline;
}
.structure .ol_about h2:after {
  position: absolute;
  content: '';
  top: 50%;
  left: -5rem;
  transform: translateY(-50%);
  height: 1rem;
  width: 4rem;
  background: #191d69;
}
.structure .ol_about h2 span {
  font-size: 6rem;
  display: inline-block;
  margin: 0 1rem 0 0;
}
.structure .ol_about p{
  margin: 0 9rem;
  font-size: 1.8rem;
  line-height: 1.8;
}
.structure .ol_about p b{
  display:block;
  color: #c8161d;
  font-weight: bold;
  margin-bottom: 1.5rem;
}
.structure .ol_about ul{
  margin: 0 9rem;
  font-size: 1.8rem;
  line-height: 1.8;
}
.structure .ol_about ul li{
  font-size: 1.4rem;
}
.structure .ol_about ul li:not(:last-child){
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 0.1rem #ccc dotted;
}

.structure#st_motion .ol_about p b{ color: #008cd6;}
.structure#st_mechatronics .ol_about p b{ color: #666464;}
.structure#st_design .ol_about p b{ color: #c68b38;}
.structure#st_power .ol_about p b{ color: #ec7c1e;}
.structure#st_processing .ol_about p b{ color: #c68b38;}
.structure#st_electronics .ol_about p b{ color: #e75440;}
.structure#st_battery .ol_about p b{ color: #6fb92c;}
.structure#st_emc .ol_about p b{ color: #00913a;}
.structure#st_thermal .ol_about p b{ color: #e75297;}
.structure#st_connect .ol_about p b{ color:#e7380d;;}
.structure#st_visualization .ol_about p b{ color: #5d77ac;}
.structure#st_dx .ol_about p b{ color: #dba44c;}
.structure#st_robot .ol_about p b{ color: #0080a3;}
.structure#st_ai .ol_about p b{ color: #f39800;}
.structure#st_data .ol_about p b{ color: #a64a97;}
.structure#st_omen .ol_about p b{ color: #76a32d;}
.structure#st_sdv .ol_about p b{ color: #009e53;}
.structure#st_ot .ol_about p b{ color: #50206e;}
.structure#st_private .ol_about p b{ color: #3f7967;}

@media (max-width: 768px) {
  .structure .structure_title{
    min-height: 30rem;
  }
  .structure .structure_title::before {
    width: 95%;
    clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
  }
  .structure .structure_title h1 {
    max-width: 95%;
    margin-bottom: 4rem;
  }
  .structure .structure_title h1 span{
    padding: 1.0rem 2rem;
  }
  .structure .structure_title h1 span::before{
    bottom: -0.5rem;
    width: calc(100% + 0.5rem);
  }
  .structure .structure_title h1 img{
    height: 2.2rem;
  }
  .structure .structure_title h1 img.line2{height: 4rem;}
  .structure .structure_title > p:first-of-type{
    margin-bottom: 4rem;
    padding: 0.5rem;
  }
  .structure .structure_title > p:last-of-type{
    max-width: 90%;
    padding: 0.5rem 0 0 0.5rem ;
  }
  .structure .structure_title > p:first-of-type > span{
    font-size: 2.4rem;
  }
  .structure .structure_title > p:first-of-type > span > span{
    font-size: 2.0rem;
  }
  .structure .structure_title > p:last-of-type > span{
    font-size: 2.4rem;
    text-align: right;
  }
  .structure .ol_about h2 {
    margin: 0 1rem 1rem 2rem;
    font-size: 2rem;
    align-items: flex-start;
  }
  .structure .ol_about h2 span{
    font-size: 4rem;
    line-height: 1.0;
  }
  .structure .ol_about h2:after {
    left: -2rem;
    height: 0.5rem;
    width: 2rem;
    top: 2rem;
    transform: inherit;
  }
  .structure .ol_about p{
    margin: 0 1rem;
    font-size: 1.6rem;
  }
  .structure .ol_about::after{
    left: 1rem;
  }
  .structure .ol_about ul{
    margin: 0 1rem;
    font-size: 1.6rem;
  }
}

/*===== 4. Section [ol_outline]  =====*/
#ol_outline {
  margin: 4rem auto 0;
  width: 80%;
}
#ol_outline dl{
  margin-bottom: 0.1rem;
}
#ol_outline dt{
  width: 20rem;
}
@media (max-width: 768px) {
  #ol_outline {
    min-width: auto;
    width: 100%;
  }
  #ol_outline dt{
    width: 100%;
  }
}

/*===== 5. Section [ol_target]  =====*/
#ol_target {
  position: relative;
  padding: 5.0rem 1.0rem;
  margin-top: 6rem;
}
#ol_target::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: -1px;;
  width: 70%;
  height: 100%;
  clip-path: polygon(0 0,100% 0,20% 100%,0% 100%);
  background: #191d69;
}
#ol_target .tit_subhead,
#ol_target div{
  position: relative;
  z-index: 1;
}
#ol_target .tit_subhead span:after{
  background: #fff;
}
#ol_target div > ul > li{
  background: #e8e8f0;
  position: relative;
}
#ol_target div > ul > li::after{
  position: absolute;
  content: "";
  top: -1.5rem;
  right: 1.5rem;
  background: #191d69;
  height: 6.0rem;
  width: 0.1rem;
  transform: translateY(0) rotate(135deg);
}
#ol_target .space01::after {
  display: block;
  width: calc(33.33% - 2rem);
  height: 100%;
  content: "";
}
#ol_target .space02::after {
  display: block;
  width: calc(50% - 2rem);
  height: 100%;
  content: "";
}

@media (max-width: 768px) {
  #ol_target {
    margin-top: 3rem;
    padding: 5rem 0;
  }
  #ol_target::after {
    width: 70%;
    clip-path: none;
  }
}

/*===== 6. Section [section_structture]  =====*/
#section_structure .flex4::after{
	content: "";
	display: block;
	width: 25%;
}
#section_structure a.bgskew{
	margin-top: 1rem;
	font-size: 1.4rem;
	padding: 1rem 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}