@charset "UTF-8";

h1, h2, h3, h4, h5, h6 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }

.sec_1 .jumbotron {
  background-image: url("../images/DJI_0022_custom_1920px_50per.jpg");
  background-size: cover;
  background-position: center 50%;
}

.sec_1 .jumbotron-extend {
    position: relative;
    height: 80vh;
    min-height: 300px;
	padding-top: 0;
}

.sec_2 .jumbotron {
  background-image: url("../images/System_Dev_jumboTron.jpg");
  background-size: cover;
  background-position: center 50%;
}

.sec_2 .jumbotron-extend {
    position: relative;
    height: 50vh;
    min-height: 300px;
	padding-top: 0;
}

.sec_2_saiLab .jumbotron {
  background-image: url("../images/Sai_Lab_jumboTron.jpg");
  background-size: cover;
  background-position: center 50%;
}

.sec_2_saiLab .jumbotron-extend {
    position: relative;
    height: 50vh;
    min-height: 300px;
	padding-top: 0;
}

.sec_2_cosmetics .jumbotron {
  background-image: url("../images/Cosmetics_jumboTron.jpg");
  background-size: cover;
  background-position: center 50%;
}

.sec_2_cosmetics .jumbotron-extend {
    position: relative;
    height: 50vh;
    min-height: 300px;
	padding-top: 0;
}

.mt-6{
  margin-top: 4rem !important;
}

.mt-7{
  margin-top: 5rem !important;
}

.pt-2rem{
  padding-top: 2rem;
}

.text_shadow{
  text-shadow: 3px 3px 3px #404040;
}

.fontsize_small{
	font-size: 0.8rem;
}

.hover_opacity7:hover{
	opacity: 0.7
}

.border_bottom_dotted_2px_black{
    border-bottom: dotted 2px black;
}

.jigyo_text{
  text-align: justify;
  margin: 20px 10px 0 10px;
}

#SDGs{
  margin: 0 auto;
    text-align: center;
    width: 700px;
    margin-bottom: 70px;
}
#SDGs img{
  width: 100%;
}

@media screen and (max-width: 960px){
  #SDGs{
    width: 90%;
  }
}

/*画像ホバーで拡大しながら傾く(事業分野）*/

.img_hover_kakudai_jigyou{
  margin: 0 auto;
  overflow: hidden;
}
.img_hover_kakudai_jigyou img{
  width: 100%;
  transition-duration: 1s;
}
.img_hover_kakudai_jigyou img:hover{
  transform: scale(1.1);
  transition-duration: 1s;
}

/*画像ホバーで拡大しながら傾く*/

.img_hover_kakudai{
  margin: 0 auto;
  overflow: hidden;
}
.img_hover_kakudai img{
  width: 60%;
  transition-duration: 0.5s;
}
.img_hover_kakudai img:hover{
  transform: scale(1.2) rotate(-9deg);
  transition-duration: 0.5s;
}

/*画像ホバーでカラーに変化*/

.img_hover_color{
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
}
.img_hover_color img{
  width: 100%;
  transform: scale(1.1);
  cursor: pointer;
  filter: grayscale(100%);
  transition-duration: 0.5s;
	opacity: 0.7;

}
.img_hover_color img:hover{
  filter: grayscale(0);
  transition-duration: 0.5s;
	opacity: 1;
}


/*== 線の上を別の線が伸びる */

.btnlinestretches4{
  /*線の基点とするためrelativeを指定*/
position:relative;
  /*リンクの形状*/ 
color:#333;
  padding: 10px 50px 10px 30px;

display:inline-block;
  text-decoration: none;
  outline: none;
}

/*線の設定*/
.btnlinestretches4::before,
.btnlinestretches4::after{
content:'';
  /*絶対配置で線の位置を決める*/
position:absolute;
z-index:1;
bottom:0;
left:0;
   /*線の形状*/   
background:#333;
width:100%;
height:1px;
  /*アニメーションの指定*/
transition:all 0.3s ease-in-out;
}

/*hover時に伸びる線の形状*/   
.btnlinestretches4::after{
width:0;
background:#459bd5;
}

/*hover時に100%に伸びる*/   
.btnlinestretches4:hover::after {
width:100%;
}

/*矢印の設定*/   
.btnlinestretches4 span::after {
  content: '';
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 1.3em;
  right: 20px;
  /*矢印の形状*/   
  width: 5px;
  height: 5px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  /*アニメーションの指定*/
  transition: all .3s;
}

/*hover時に矢印が移動*/   
.btnlinestretches4:hover span::after {
right:15px;
}

/*hover時にテキストのカラーを変更*/   
.btnlinestretches4 span:hover {
  color: #459bd5;;
  }

/*==================================================
ナビメニュー　共通　横並びのための設定 coco-factory
===================================*/

.gnavi{
  display: flex;
  flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
  margin:0 0 20px 0;
  list-style: none;
}

.gnavi li a{
  display: block;
  text-decoration: none;
  color: #333;
}

.gnavi li{
  margin-bottom:20px;
}
/*==================================================
ナビメニュー　　5-3-9 テキストが入れ替わる　coco-factory
===================================*/


.gnavi li a{
  /*テキストの基点とするためrelativeを指定*/
position: relative;
  /*はみ出る要素を隠す*/
overflow: hidden;
padding:10px 60px;
}

.gnavi li span{
  /*絶対配置でテキストの位置を決める*/
position: absolute;
left: 50%;
top:0;
  /*アニメーションの指定*/
transition: all .5s;
transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/
/*ブロック要素にして透過なし、テキスト折り返しなし*/  
display: block;
opacity:1;
white-space: nowrap;
}

/*差し替わるテキストの設定*/
.gnavi li span:nth-child(2){
opacity:0;/*透過0に*/
  transform: translate(-50%,100%);/*X方向に-50% Y方向に100%*/
}

/*hoverするとテキストが入れ替わる設定*/
.gnavi li:hover span:nth-child(1){
opacity:0;/*透過0に*/
  transform: translate(-50%,-100%);/*X方向に-50% Y方向に-100%*/
}

.gnavi li:hover span:nth-child(2){
opacity:1;/*不透明に*/
transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
}

/*==================================================
テキストの下半分だけライン引く
===================================*/
.underLine {
  background: linear-gradient(transparent 50%, #a8eaff 50%);
}